fix: ToggleButton usage

packages/core/src/Button/Button.tsx

@@ -170,7 +170,7 @@ export const HvButton = fixedForwardRef(function HvButton<
         tabIndex: focusableWhenDisabled ? 0 : -1,
         "aria-disabled": true,
       })}
-      {...(selected && { "aria-pressed": selected })}
+      {...(selected != null && { "aria-pressed": selected })}
       {...others}
     >
       {startIcon && <span className={classes.startIcon}>{startIcon}</span>}

packages/core/src/TimePicker/TimePicker.stories.tsx

@@ -37,10 +37,10 @@ export const Main: StoryObj<HvTimePickerProps> = {
     label: "Time Picker",
     description: "",
     placeholder: "Select a date",
+    timeFormat: "24",
   },
   argTypes: {
     classes: { control: { disable: true } },
-    timeFormat: { control: { disable: true } },
     value: { control: { disable: true } },
     defaultValue: { control: { disable: true } },
     dropdownProps: { control: { disable: true } },

packages/core/src/TimePicker/Unit/Unit.tsx

@@ -1,13 +1,12 @@
-import { KeyboardEvent } from "react";
 import { DateFieldState, DateSegment } from "@react-stately/datepicker";
 import {
   DropUpXS as AddTimeIcon,
   DropDownXS as SubtractTimeIcon,
 } from "@hitachivantara/uikit-react-icons";
 import { theme } from "@hitachivantara/uikit-styles";
 
-import { HvInput, HvInputProps } from "../../Input";
-import { HvToggleButton } from "../../ToggleButton";
+import { HvBaseInput, HvBaseInputProps } from "../../BaseInput";
+import { HvButton } from "../../Button";
 import { useClasses } from "./Unit.styles";
 
 interface UnitProps {
@@ -16,7 +15,7 @@ interface UnitProps {
   segment: DateSegment;
   placeholder?: string;
   /** Called when the value changes */
-  onChange?: HvInputProps["onChange"];
+  onChange?: HvBaseInputProps["onChange"];
   /** Called when the up/add arrow is pressed */
   onAdd?: () => void;
   /** Called when the down/subtract arrow is pressed */
@@ -41,14 +40,13 @@ export const Unit = ({
       {type !== "literal" && <AddTimeIcon onClick={onAdd} />}
       {type === "literal" && <div className={classes.separator}>{text}</div>}
       {type === "dayPeriod" && (
-        <HvToggleButton className={classes.periodToggle} onClick={onAdd}>
+        <HvButton icon className={classes.periodToggle} onClick={onAdd}>
           {text}
-        </HvToggleButton>
+        </HvButton>
       )}
       {["hour", "minute", "second"].includes(type) && (
-        <HvInput
+        <HvBaseInput
           id={id}
-          disableClear
           style={{
             ...theme.typography.title3,
           }}
@@ -59,13 +57,13 @@ export const Unit = ({
             inputRoot: classes.inputRoot,
           }}
           onKeyDown={(event) => {
-            if ((event as KeyboardEvent).key === "Enter") {
+            if ("key" in event && event.key === "Enter") {
               event.preventDefault();
               event.stopPropagation();
             }
           }}
           required
-          status={state.validationState}
+          invalid={state.isInvalid}
           value={text.padStart(2, "0")}
           onChange={onChange}
           placeholder={placeholder}

packages/core/src/ToggleButton/ToggleButton.tsx

@@ -43,17 +43,15 @@ export const HvToggleButton = forwardRef<
     Boolean(defaultSelected),
   );
 
-  const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setIsSelected(!isSelected);
-    onClick?.(event, !isSelected);
-  };
-
   return (
     <HvButton
       ref={ref}
       icon
-      aria-pressed={isSelected}
-      onClick={onClickHandler}
+      selected={isSelected}
+      onClick={(event) => {
+        setIsSelected(!isSelected);
+        onClick?.(event, !isSelected);
+      }}
       {...others}
     >
       {children || (!isSelected ? notSelectedIcon : selectedIcon)}