@hitachivantara/uikit-react-core 5.15.0 → 5.16.0

package/dist/cjs/components/ActionBar/ActionBar.cjs

@@ -1,23 +1,24 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const clsx = require("clsx");
 const ActionBar_styles = require("./ActionBar.styles.cjs");
-const actionBarClasses = require("./actionBarClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvActionBar = (props) => {
   const {
-    classes,
+    classes: classesProp,
     className,
-    id,
     children,
     ...others
   } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(ActionBar_styles.StyledRoot, {
-    id,
-    className: clsx.clsx(actionBarClasses.default.root, classes == null ? void 0 : classes.root, className),
+  const {
+    classes,
+    cx
+  } = ActionBar_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: cx(classes.root, className),
     ...others,
     children
   });
 };
+exports.actionBarClasses = ActionBar_styles.staticClasses;
 exports.HvActionBar = HvActionBar;
 //# sourceMappingURL=ActionBar.cjs.map

package/dist/cjs/components/ActionBar/ActionBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.cjs","sources":["../../../../src/components/ActionBar/ActionBar.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { HvBaseProps } from \"@core/types\";\nimport { StyledRoot } from \"./ActionBar.styles\";\nimport actionBarClasses, { HvActionBarClasses } from \"./actionBarClasses\";\n\nexport interface HvActionBarProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionBarClasses;\n}\n\nexport const HvActionBar = (props: HvActionBarProps) => {\n  const { classes, className, id, children, ...others } = props;\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(actionBarClasses.root, classes?.root, className)}\n      {...others}\n    >\n      {children}\n    </StyledRoot>\n  );\n};\n"],"names":["HvActionBar","props","classes","className","id","children","others","StyledRoot","clsx","actionBarClasses","root"],"mappings":";;;;;;AAUaA,MAAAA,cAAcA,CAACC,UAA4B;AAChD,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAWC;AAAAA,IAAIC;AAAAA,IAAU,GAAGC;AAAAA,EAAWL,IAAAA;AAExD,wCACGM,iBAAAA,YAAU;AAAA,IACTH;AAAAA,IACAD,WAAWK,KAAKC,KAAAA,iBAAAA,QAAiBC,MAAMR,mCAASQ,MAAMP,SAAS;AAAA,IAAE,GAC7DG;AAAAA,IAAMD;AAAAA,EAAAA,CAGA;AAEhB;;"}
+{"version":3,"file":"ActionBar.cjs","sources":["../../../../src/components/ActionBar/ActionBar.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport { ExtractNames } from \"@core/utils\";\nimport { staticClasses, useClasses } from \"./ActionBar.styles\";\n\nexport { staticClasses as actionBarClasses };\n\nexport type HvActionBarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionBarProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: Partial<HvActionBarClasses>;\n}\n\nexport const HvActionBar = (props: HvActionBarProps) => {\n  const { classes: classesProp, className, children, ...others } = props;\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      {children}\n    </div>\n  );\n};\n"],"names":["HvActionBar","props","classes","classesProp","className","children","others","cx","useClasses","root"],"mappings":";;;;AAaaA,MAAAA,cAAcA,CAACC,UAA4B;AAChD,QAAA;AAAA,IAAEC,SAASC;AAAAA,IAAaC;AAAAA,IAAWC;AAAAA,IAAU,GAAGC;AAAAA,EAAWL,IAAAA;AAC3D,QAAA;AAAA,IAAEC;AAAAA,IAASK;AAAAA,EAAAA,IAAOC,iBAAAA,WAAWL,WAAW;AAE9C,wCACE,OAAA;AAAA,IAAKC,WAAWG,GAAGL,QAAQO,MAAML,SAAS;AAAA,IAAE,GAAKE;AAAAA,IAAMD;AAAAA,EAAAA,CAElD;AAET;;;"}

package/dist/cjs/components/ActionBar/ActionBar.styles.cjs

@@ -1,21 +1,20 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "eae5m590"
-} : {
-  target: "eae5m590",
-  label: "StyledRoot"
-})({
-  width: "100%",
-  height: "75px",
-  padding: uikitStyles.theme.space.sm,
-  borderTop: `3px solid ${uikitStyles.theme.colors.atmo2}`,
-  display: "flex",
-  justifyContent: "flex-end"
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQWN0aW9uQmFyL0FjdGlvbkJhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUcwQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0FjdGlvbkJhci9BY3Rpb25CYXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgaGVpZ2h0OiBcIjc1cHhcIixcbiAgcGFkZGluZzogdGhlbWUuc3BhY2Uuc20sXG4gIGJvcmRlclRvcDogYDNweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hdG1vMn1gLFxuICBkaXNwbGF5OiBcImZsZXhcIixcbiAganVzdGlmeUNvbnRlbnQ6IFwiZmxleC1lbmRcIixcbn0pO1xuIl19 */");
-exports.StyledRoot = StyledRoot;
+const classes = require("../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvActionBar", {
+  root: {
+    width: "100%",
+    padding: uikitStyles.theme.space.sm,
+    borderTop: uikitStyles.theme.actionBar.borderTop,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end"
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=ActionBar.styles.cjs.map

package/dist/cjs/components/ActionBar/ActionBar.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.styles.cjs","sources":["../../../../src/components/ActionBar/ActionBar.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const StyledRoot = styled(\"div\")({\n  width: \"100%\",\n  height: \"75px\",\n  padding: theme.space.sm,\n  borderTop: `3px solid ${theme.colors.atmo2}`,\n  display: \"flex\",\n  justifyContent: \"flex-end\",\n});\n"],"names":["StyledRoot","_styled","process","env","NODE_ENV","target","label","width","height","padding","theme","space","sm","borderTop","colors","atmo2","display","justifyContent"],"mappings":";;;;;;AAGO,MAAMA,aAAoBC,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACtCC,OAAO;AAAA,EACPC,QAAQ;AAAA,EACRC,SAASC,YAAAA,MAAMC,MAAMC;AAAAA,EACrBC,WAAY,aAAYH,YAAAA,MAAMI,OAAOC;AAAAA,EACrCC,SAAS;AAAA,EACTC,gBAAgB;AAClB,GAACf,QAAAC,IAAAC,aAAC,eAAA,KAAA,y4BAAA;;"}
+{"version":3,"file":"ActionBar.styles.cjs","sources":["../../../../src/components/ActionBar/ActionBar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvActionBar\", {\n  root: {\n    width: \"100%\",\n    padding: theme.space.sm,\n    borderTop: theme.actionBar.borderTop,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","width","padding","theme","space","sm","borderTop","actionBar","display","alignItems","justifyContent"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,SAASC,YAAAA,MAAMC,MAAMC;AAAAA,IACrBC,WAAWH,YAAAA,MAAMI,UAAUD;AAAAA,IAC3BE,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,gBAAgB;AAAA,EAClB;AACF,CAAC;;;"}

package/dist/cjs/components/TimePicker/Placeholder.cjs

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const datepicker = require("@react-aria/datepicker");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const getDateValue = (date) => {
+  if (!date)
+    return "";
+  const {
+    hour,
+    minute,
+    second
+  } = date;
+  return [hour, minute, second].map((el) => String(el).padStart(2, "0")).join(":");
+};
+const PlaceholderSegment = ({
+  segment,
+  state,
+  placeholder
+}) => {
+  const ref = React.useRef(null);
+  const {
+    segmentProps
+  } = datepicker.useDateSegment(segment, state, ref);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ref,
+    ...segmentProps,
+    children: (() => {
+      if (segment.type === "literal")
+        return segment.text;
+      if (segment.isPlaceholder)
+        return placeholder ?? segment.text;
+      return segment.text.padStart(2, "0");
+    })()
+  });
+};
+const Placeholder = React.forwardRef((props, ref) => {
+  const {
+    name,
+    state,
+    placeholders,
+    onKeyDown,
+    ...others
+  } = props;
+  const {
+    value,
+    segments
+  } = state;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      ref,
+      onKeyDown: (event) => {
+        event.stopPropagation();
+        onKeyDown == null ? void 0 : onKeyDown(event);
+      },
+      ...others,
+      children: [name && /* @__PURE__ */ jsxRuntime.jsx("input", {
+        type: "hidden",
+        name,
+        value: getDateValue(value)
+      }), segments.map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(PlaceholderSegment, {
+        segment,
+        state,
+        placeholder: placeholders[segment.type]
+      }, i))]
+    })
+  });
+});
+exports.Placeholder = Placeholder;
+//# sourceMappingURL=Placeholder.cjs.map

package/dist/cjs/components/TimePicker/Placeholder.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Placeholder.cjs","sources":["../../../../src/components/TimePicker/Placeholder.tsx"],"sourcesContent":["import { forwardRef, useRef } from \"react\";\nimport { DateFieldState, DateSegment } from \"@react-stately/datepicker\";\nimport { useDateSegment } from \"@react-aria/datepicker\";\nimport { HvBaseProps } from \"@core/types\";\n\n/** Convert `Date` into `hh:mm:ss` format */\nconst getDateValue = (date) => {\n  if (!date) return \"\";\n  const { hour, minute, second } = date;\n\n  return [hour, minute, second]\n    .map((el) => String(el).padStart(2, \"0\"))\n    .join(\":\");\n};\n\nconst PlaceholderSegment = ({\n  segment,\n  state,\n  placeholder,\n}: {\n  segment: DateSegment;\n  state: DateFieldState;\n  placeholder: string;\n}) => {\n  const ref = useRef(null);\n  const { segmentProps } = useDateSegment(segment, state, ref);\n\n  return (\n    <div ref={ref} {...segmentProps}>\n      {(() => {\n        if (segment.type === \"literal\") return segment.text;\n        if (segment.isPlaceholder) return placeholder ?? segment.text;\n        return segment.text.padStart(2, \"0\");\n      })()}\n    </div>\n  );\n};\n\ninterface PlaceholderProps extends HvBaseProps<HTMLDivElement> {\n  name?: string;\n  state: DateFieldState;\n  placeholders: { hour?: string; minute?: string; second?: string };\n}\n\nexport const Placeholder = forwardRef<HTMLDivElement, PlaceholderProps>(\n  (props, ref) => {\n    const { name, state, placeholders, onKeyDown, ...others } = props;\n    const { value, segments } = state;\n\n    return (\n      <>\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n        <div\n          ref={ref}\n          onKeyDown={(event) => {\n            // stop ArrowDown from opening dropdown\n            event.stopPropagation();\n            onKeyDown?.(event);\n          }}\n          {...others}\n        >\n          {name && (\n            <input type=\"hidden\" name={name} value={getDateValue(value)} />\n          )}\n          {segments.map((segment, i) => (\n            <PlaceholderSegment\n              key={i}\n              segment={segment}\n              state={state}\n              placeholder={placeholders[segment.type]}\n            />\n          ))}\n        </div>\n      </>\n    );\n  }\n);\n"],"names":["getDateValue","date","hour","minute","second","map","el","String","padStart","join","PlaceholderSegment","segment","state","placeholder","ref","useRef","segmentProps","useDateSegment","children","type","text","isPlaceholder","Placeholder","forwardRef","props","name","placeholders","onKeyDown","others","value","segments","_Fragment","event","stopPropagation","_jsx","i"],"mappings":";;;;;AAMA,MAAMA,eAAgBC,CAAS,SAAA;AAC7B,MAAI,CAACA;AAAa,WAAA;AACZ,QAAA;AAAA,IAAEC;AAAAA,IAAMC;AAAAA,IAAQC;AAAAA,EAAWH,IAAAA;AAEjC,SAAO,CAACC,MAAMC,QAAQC,MAAM,EACzBC,IAAKC,CAAOC,OAAAA,OAAOD,EAAE,EAAEE,SAAS,GAAG,GAAG,CAAC,EACvCC,KAAK,GAAG;AACb;AAEA,MAAMC,qBAAqBA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAKF,MAAM;AACEC,QAAAA,MAAMC,aAAO,IAAI;AACjB,QAAA;AAAA,IAAEC;AAAAA,EAAiBC,IAAAA,0BAAeN,SAASC,OAAOE,GAAG;AAE3D,wCACE,OAAA;AAAA,IAAKA;AAAAA,IAAS,GAAKE;AAAAA,IAAYE,WAC3B,MAAM;AACN,UAAIP,QAAQQ,SAAS;AAAW,eAAOR,QAAQS;AAC/C,UAAIT,QAAQU;AAAe,eAAOR,eAAeF,QAAQS;AACzD,aAAOT,QAAQS,KAAKZ,SAAS,GAAG,GAAG;AAAA,IAAA,GAClC;AAAA,EAAA,CACA;AAET;AAQO,MAAMc,cAAcC,MAAAA,WACzB,CAACC,OAAOV,QAAQ;AACR,QAAA;AAAA,IAAEW;AAAAA,IAAMb;AAAAA,IAAOc;AAAAA,IAAcC;AAAAA,IAAW,GAAGC;AAAAA,EAAWJ,IAAAA;AACtD,QAAA;AAAA,IAAEK;AAAAA,IAAOC;AAAAA,EAAalB,IAAAA;AAE5B,wCACEmB,WAAAA,UAAA;AAAA,IAAAb,0CAEE,OAAA;AAAA,MACEJ;AAAAA,MACAa,WAAYK,CAAU,UAAA;AAEpBA,cAAMC,gBAAgB;AACtBN,+CAAYK;AAAAA,MACd;AAAA,MAAE,GACEJ;AAAAA,MAAMV,UAAA,CAETO,QACCS,2BAAAA,IAAA,SAAA;AAAA,QAAOf,MAAK;AAAA,QAASM;AAAAA,QAAYI,OAAO7B,aAAa6B,KAAK;AAAA,MAAA,CAAI,GAE/DC,SAASzB,IAAI,CAACM,SAASwB,qCACrBzB,oBAAkB;AAAA,QAEjBC;AAAAA,QACAC;AAAAA,QACAC,aAAaa,aAAaf,QAAQQ,IAAI;AAAA,MAAA,GAHjCgB,CAIN,CACF,CAAC;AAAA,IAAA,CACC;AAAA,EAAA,CACL;AAEN,CACF;;"}

package/dist/cjs/components/TimePicker/TimePicker.cjs

@@ -0,0 +1,222 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const date = require("@internationalized/date");
+const datepicker$1 = require("@react-aria/datepicker");
+const datepicker = require("@react-stately/datepicker");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const useCss = require("../../hooks/useCss.cjs");
+require("@hitachivantara/uikit-styles");
+const Placeholder = require("./Placeholder.cjs");
+const TimePicker_styles = require("./TimePicker.styles.cjs");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const useUniqueId = require("../../hooks/useUniqueId.cjs");
+const Unit = require("./Unit/Unit.cjs");
+const useControlled = require("../../hooks/useControlled.cjs");
+const setId = require("../../utils/setId.cjs");
+const FormElement = require("../Forms/FormElement/FormElement.cjs");
+const Label = require("../Forms/Label/Label.cjs");
+const InfoMessage = require("../Forms/InfoMessage/InfoMessage.cjs");
+const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
+const WarningText = require("../Forms/WarningText/WarningText.cjs");
+const toTime = (value) => {
+  if (!value)
+    return void 0;
+  const {
+    hours,
+    minutes,
+    seconds
+  } = value;
+  return new date.Time(hours, minutes, seconds);
+};
+const getFormat = (timeFormat) => {
+  if (timeFormat == null)
+    return 24;
+  return timeFormat === "12" ? 12 : 24;
+};
+const HvTimePicker = (props) => {
+  const {
+    classes: classesProp = {},
+    className,
+    id: idProp,
+    name,
+    required = false,
+    disabled = false,
+    readOnly = false,
+    label,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    description,
+    "aria-describedby": ariaDescribedBy,
+    status,
+    statusMessage,
+    "aria-errormessage": ariaErrorMessage,
+    placeholder,
+    hoursPlaceholder = "hh",
+    minutesPlaceholder = "mm",
+    secondsPlaceholder = "ss",
+    value: valueProp,
+    defaultValue: defaultValueProp,
+    timeFormat,
+    showSeconds,
+    disableExpand,
+    locale = "en",
+    onToggle,
+    onChange,
+    // misc properties:
+    disablePortal = true,
+    escapeWithReference = true,
+    dropdownProps,
+    ...others
+  } = props;
+  const id = useUniqueId.default(idProp, "hvtimepicker");
+  const ref = React.useRef(null);
+  const {
+    css
+  } = useCss.useCss();
+  const {
+    classes,
+    cx
+  } = TimePicker_styles.useClasses(classesProp);
+  const stateProps = {
+    value: toTime(valueProp),
+    defaultValue: toTime(defaultValueProp),
+    label,
+    locale,
+    isRequired: required,
+    isReadOnly: readOnly,
+    isDisabled: disabled,
+    granularity: "second",
+    hourCycle: getFormat(timeFormat),
+    onChange: (value) => {
+      const {
+        hour: hours,
+        minute: minutes,
+        second: seconds
+      } = value;
+      onChange == null ? void 0 : onChange({
+        hours,
+        minutes,
+        seconds
+      });
+    }
+  };
+  const state = datepicker.useTimeFieldState(stateProps);
+  const {
+    labelProps,
+    fieldProps
+  } = datepicker$1.useTimeField({
+    ...stateProps,
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy
+  }, state, ref);
+  const [open, setOpen] = React.useState(false);
+  const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
+  const [validationState] = useControlled.useControlled(status, "standBy");
+  const placeholders = React.useMemo(() => ({
+    hour: hoursPlaceholder,
+    minute: minutesPlaceholder,
+    second: secondsPlaceholder
+  }), [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]);
+  const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
+  const is12HrFormat = state.segments[5] != null;
+  const isStateInvalid = validationState === "invalid";
+  const errorMessageId = isStateInvalid ? canShowError ? setId.setId(id, "error") : ariaErrorMessage : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, {
+    name,
+    required,
+    disabled,
+    status: validationState,
+    className: cx(classes.root, className),
+    ...others,
+    children: [(label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: classes.labelContainer,
+      children: [label && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, {
+        label,
+        className: classes.label,
+        ...labelProps
+      }), description && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, {
+        className: classes.description,
+        children: description
+      })]
+    }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: css({
+        width: is12HrFormat ? 220 : 200
+      }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown.HvBaseDropdown, {
+        role: "combobox",
+        variableWidth: true,
+        disabled,
+        readOnly,
+        placeholder: placeholder && !state.value ? placeholder : /* @__PURE__ */ jsxRuntime.jsx(Placeholder.Placeholder, {
+          ref,
+          name,
+          state,
+          placeholders,
+          className: cx(classes.placeholder, {
+            [classes.placeholderDisabled]: disabled
+          }),
+          ...fieldProps
+        }),
+        classes: {
+          header: cx(classes.dropdownHeader, {
+            [classes.dropdownHeaderInvalid]: isStateInvalid
+          }),
+          panel: classes.dropdownPanel,
+          headerOpen: classes.dropdownHeaderOpen
+        },
+        placement: "right",
+        adornment: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Time, {
+          color: disabled ? "secondary_60" : void 0,
+          className: classes.icon
+        }),
+        expanded: open,
+        onToggle: (evt, newOpen) => {
+          if (disableExpand)
+            return;
+          setOpen(newOpen);
+          onToggle == null ? void 0 : onToggle(evt, newOpen);
+        },
+        onContainerCreation: (containerRef) => {
+          var _a;
+          (_a = containerRef == null ? void 0 : containerRef.getElementsByTagName("input")[0]) == null ? void 0 : _a.focus();
+        },
+        "aria-haspopup": "dialog",
+        "aria-invalid": isStateInvalid ? true : void 0,
+        "aria-errormessage": errorMessageId,
+        disablePortal,
+        popperProps: {
+          modifiers: [{
+            name: "preventOverflow",
+            enabled: escapeWithReference
+          }]
+        },
+        ...dropdownProps,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+          ref,
+          className: classes.timePopperContainer,
+          children: state.segments.map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(Unit.Unit, {
+            state,
+            segment,
+            placeholder: placeholders[segment.type],
+            onAdd: () => state.increment(segment.type),
+            onSub: () => state.decrement(segment.type),
+            onChange: (evt, val) => {
+              state.setSegment(segment.type, Number(val));
+            }
+          }, i))
+        })
+      })
+    }), canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, {
+      id: setId.setId(id, "error"),
+      disableBorder: true,
+      className: classes.error,
+      children: validationMessage
+    })]
+  });
+};
+exports.timePickerClasses = TimePicker_styles.staticClasses;
+exports.HvTimePicker = HvTimePicker;
+//# sourceMappingURL=TimePicker.cjs.map

package/dist/cjs/components/TimePicker/TimePicker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.cjs","sources":["../../../../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo } from \"react\";\nimport { Time } from \"@internationalized/date\";\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  TimeFieldStateOptions,\n  useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\nimport { useCss } from \"@core/hooks/useCss\";\nimport {\n  HvFormElement,\n  HvBaseDropdown,\n  HvLabel,\n  HvWarningText,\n  HvInfoMessage,\n  HvFormElementProps,\n  HvBaseDropdownProps,\n  useControlled,\n  useUniqueId,\n  setId,\n  ExtractNames,\n} from \"../..\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\n\nconst toTime = (value?: HvTimePickerValue) => {\n  if (!value) return undefined;\n  const { hours, minutes, seconds } = value;\n  return new Time(hours, minutes, seconds);\n};\n\nconst getFormat = (timeFormat?: TimeFormat) => {\n  if (timeFormat == null) return 24;\n  return timeFormat === \"12\" ? 12 : 24;\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" | \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n  | \"root\"\n  | \"input\"\n  | \"label\"\n  | \"placeholder\"\n  | \"timePopperContainer\"\n  | \"separator\"\n  | \"periodContainer\"\n  | \"formElementRoot\"\n  | \"dropdownPlaceholder\"\n  | \"iconBaseRoot\"\n  | \"error\"\n  | \"labelContainer\"\n  | \"description\"\n  | \"dropdownHeaderInvalid\"\n  | \"dropdownPlaceholderDisabled\"\n  | \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n  hours: number;\n  minutes: number;\n  seconds: number;\n};\n\nexport interface HvTimePickerProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"value\" | \"defaultValue\" | \"onChange\" | \"onFocus\" | \"onBlur\"\n  > {\n  /** Id to be applied to the form element root node. */\n  id?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: Partial<HvTimePickerClasses>;\n  /** Current value of the element when _controlled_. Follows the 24-hour format. */\n  value?: HvTimePickerValue;\n  /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n  defaultValue?: HvTimePickerValue;\n  /** The placeholder value when no time is selected. */\n  placeholder?: string;\n  /** The placeholder of the hours input. */\n  hoursPlaceholder?: string;\n  /** The placeholder of the minutes input. */\n  minutesPlaceholder?: string;\n  /** The placeholder of the seconds input. */\n  secondsPlaceholder?: string;\n  /**\n   * Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n   * If undefined, the component will use a format according to the passed locale.\n   */\n  timeFormat?: TimeFormat;\n  /** Whether to show the seconds when using the native time picker */\n  showSeconds?: boolean;\n  /** Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` */\n  locale?: string;\n  /** Whether the dropdown is expandable. */\n  disableExpand?: boolean;\n\n  /**\n   * Callback function to be triggered when the input value is changed.\n   * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n   */\n  onChange?: (value: HvTimePickerValue) => void;\n\n  /** Callback called when dropdown changes the expanded state. */\n  onToggle?: (event: Event, isOpen: boolean) => void;\n\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n\n  /** Sets if the calendar container should follow the date picker input out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n\n  /** Extra properties to be passed to the TimePicker's dropdown. */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n}\n\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = (props: HvTimePickerProps) => {\n  const {\n    classes: classesProp = {},\n    className,\n\n    id: idProp,\n    name,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    label,\n\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    placeholder,\n    hoursPlaceholder = \"hh\",\n    minutesPlaceholder = \"mm\",\n    secondsPlaceholder = \"ss\",\n\n    value: valueProp,\n    defaultValue: defaultValueProp,\n\n    timeFormat,\n    showSeconds,\n    disableExpand,\n    locale = \"en\",\n\n    onToggle,\n    onChange,\n\n    // misc properties:\n    disablePortal = true,\n    escapeWithReference = true,\n    dropdownProps,\n    ...others\n  } = props;\n  const id = useUniqueId(idProp, \"hvtimepicker\");\n  const ref = useRef<HTMLDivElement>(null);\n  const { css } = useCss();\n  const { classes, cx } = useClasses(classesProp);\n\n  const stateProps: TimeFieldStateOptions = {\n    value: toTime(valueProp),\n    defaultValue: toTime(defaultValueProp),\n    label,\n    locale,\n    isRequired: required,\n    isReadOnly: readOnly,\n    isDisabled: disabled,\n    granularity: \"second\",\n    hourCycle: getFormat(timeFormat),\n    onChange: (value) => {\n      const { hour: hours, minute: minutes, second: seconds } = value;\n      onChange?.({ hours, minutes, seconds });\n    },\n  };\n  const state = useTimeFieldState(stateProps);\n  const { labelProps, fieldProps } = useTimeField(\n    {\n      ...stateProps,\n      id,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n    },\n    state,\n    ref\n  );\n\n  const [open, setOpen] = useState(false);\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n  const [validationState] = useControlled(status, \"standBy\");\n\n  const placeholders = useMemo(\n    () => ({\n      hour: hoursPlaceholder,\n      minute: minutesPlaceholder,\n      second: secondsPlaceholder,\n    }),\n    [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]\n  );\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const is12HrFormat = state.segments[5] != null;\n  const isStateInvalid = validationState === \"invalid\";\n  const errorMessageId = isStateInvalid\n    ? canShowError\n      ? setId(id, \"error\")\n      : ariaErrorMessage\n    : undefined;\n\n  return (\n    <HvFormElement\n      name={name}\n      required={required}\n      disabled={disabled}\n      status={validationState}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      {(label || description) && (\n        <div className={classes.labelContainer}>\n          {label && (\n            <HvLabel label={label} className={classes.label} {...labelProps} />\n          )}\n          {description && (\n            <HvInfoMessage className={classes.description}>\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n\n      <div className={css({ width: is12HrFormat ? 220 : 200 })}>\n        <HvBaseDropdown\n          role=\"combobox\"\n          variableWidth\n          disabled={disabled}\n          readOnly={readOnly}\n          placeholder={\n            placeholder && !state.value ? (\n              placeholder\n            ) : (\n              <Placeholder\n                ref={ref}\n                name={name}\n                state={state}\n                placeholders={placeholders}\n                className={cx(classes.placeholder, {\n                  [classes.placeholderDisabled]: disabled,\n                })}\n                {...fieldProps}\n              />\n            )\n          }\n          classes={{\n            header: cx(classes.dropdownHeader, {\n              [classes.dropdownHeaderInvalid]: isStateInvalid,\n            }),\n            panel: classes.dropdownPanel,\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          placement=\"right\"\n          adornment={\n            <TimeIcon\n              color={disabled ? \"secondary_60\" : undefined}\n              className={classes.icon}\n            />\n          }\n          expanded={open}\n          onToggle={(evt, newOpen) => {\n            if (disableExpand) return;\n            setOpen(newOpen);\n            onToggle?.(evt, newOpen);\n          }}\n          onContainerCreation={(containerRef) => {\n            containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n          }}\n          aria-haspopup=\"dialog\"\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          disablePortal={disablePortal}\n          popperProps={{\n            modifiers: [\n              { name: \"preventOverflow\", enabled: escapeWithReference },\n            ],\n          }}\n          {...dropdownProps}\n        >\n          <div ref={ref} className={classes.timePopperContainer}>\n            {state.segments.map((segment, i) => (\n              <Unit\n                key={i}\n                state={state}\n                segment={segment}\n                placeholder={placeholders[segment.type]}\n                onAdd={() => state.increment(segment.type)}\n                onSub={() => state.decrement(segment.type)}\n                onChange={(evt, val) => {\n                  state.setSegment(segment.type, Number(val));\n                }}\n              />\n            ))}\n          </div>\n        </HvBaseDropdown>\n      </div>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(id, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["toTime","value","undefined","hours","minutes","seconds","Time","getFormat","timeFormat","HvTimePicker","props","classes","classesProp","className","id","idProp","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","status","statusMessage","ariaErrorMessage","placeholder","hoursPlaceholder","minutesPlaceholder","secondsPlaceholder","valueProp","defaultValue","defaultValueProp","showSeconds","disableExpand","locale","onToggle","onChange","disablePortal","escapeWithReference","dropdownProps","others","useUniqueId","ref","useRef","css","useCss","cx","useClasses","stateProps","isRequired","isReadOnly","isDisabled","granularity","hourCycle","hour","minute","second","state","useTimeFieldState","labelProps","fieldProps","useTimeField","open","setOpen","useState","validationMessage","useControlled","validationState","placeholders","useMemo","canShowError","is12HrFormat","segments","isStateInvalid","errorMessageId","setId","HvFormElement","root","children","labelContainer","_jsx","HvLabel","HvInfoMessage","width","HvBaseDropdown","role","variableWidth","Placeholder","placeholderDisabled","header","dropdownHeader","dropdownHeaderInvalid","panel","dropdownPanel","headerOpen","dropdownHeaderOpen","placement","adornment","TimeIcon","color","icon","expanded","evt","newOpen","onContainerCreation","containerRef","getElementsByTagName","focus","popperProps","modifiers","enabled","timePopperContainer","map","segment","i","Unit","type","onAdd","increment","onSub","decrement","val","setSegment","Number","HvWarningText","disableBorder","error"],"mappings":"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"}

package/dist/cjs/components/TimePicker/TimePicker.styles.cjs

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const classes = require("../../utils/classes.cjs");
+const {
+  useClasses,
+  staticClasses
+} = classes.createClasses("HvTimerPicker", {
+  root: {
+    position: "relative"
+  },
+  labelContainer: {
+    display: "flex",
+    alignItems: "flex-start"
+  },
+  label: {
+    marginBottom: 6,
+    display: "block"
+  },
+  description: {},
+  placeholder: {
+    display: "flex",
+    gap: 1
+  },
+  placeholderDisabled: {
+    color: uikitStyles.theme.colors.secondary_60
+  },
+  dropdownHeader: {},
+  dropdownHeaderOpen: {},
+  dropdownHeaderInvalid: {
+    border: `1px solid ${uikitStyles.theme.colors.negative}`,
+    "&:hover": {
+      border: `1px solid ${uikitStyles.theme.colors.negative}`
+    }
+  },
+  dropdownPanel: {},
+  icon: {},
+  timePopperContainer: {
+    backgroundColor: uikitStyles.theme.colors.atmo1,
+    zIndex: 10,
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: uikitStyles.theme.spacing(["xs", 0]),
+    userSelect: "none",
+    minWidth: "175px"
+  },
+  error: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=TimePicker.styles.cjs.map

package/dist/cjs/components/TimePicker/TimePicker.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.styles.cjs","sources":["../../../../src/components/TimePicker/TimePicker.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvTimerPicker\", {\n  root: {\n    position: \"relative\",\n  },\n\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    marginBottom: 6,\n    display: \"block\",\n  },\n  description: {},\n\n  placeholder: {\n    display: \"flex\",\n    gap: 1,\n  },\n  placeholderDisabled: {\n    color: theme.colors.secondary_60,\n  },\n\n  dropdownHeader: {},\n  dropdownHeaderOpen: {},\n  dropdownHeaderInvalid: {\n    border: `1px solid ${theme.colors.negative}`,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.negative}`,\n    },\n  },\n  dropdownPanel: {},\n\n  icon: {},\n\n  timePopperContainer: {\n    backgroundColor: theme.colors.atmo1,\n    zIndex: 10,\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: theme.spacing([\"xs\", 0]),\n    userSelect: \"none\",\n    minWidth: \"175px\",\n  },\n\n  error: {},\n});\n"],"names":["useClasses","staticClasses","createClasses","root","position","labelContainer","display","alignItems","label","marginBottom","description","placeholder","gap","placeholderDisabled","color","theme","colors","secondary_60","dropdownHeader","dropdownHeaderOpen","dropdownHeaderInvalid","border","negative","dropdownPanel","icon","timePopperContainer","backgroundColor","atmo1","zIndex","flexDirection","justifyContent","padding","spacing","userSelect","minWidth","error"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IACJC,UAAU;AAAA,EACZ;AAAA,EAEAC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,YAAY;AAAA,EACd;AAAA,EACAC,OAAO;AAAA,IACLC,cAAc;AAAA,IACdH,SAAS;AAAA,EACX;AAAA,EACAI,aAAa,CAAC;AAAA,EAEdC,aAAa;AAAA,IACXL,SAAS;AAAA,IACTM,KAAK;AAAA,EACP;AAAA,EACAC,qBAAqB;AAAA,IACnBC,OAAOC,YAAAA,MAAMC,OAAOC;AAAAA,EACtB;AAAA,EAEAC,gBAAgB,CAAC;AAAA,EACjBC,oBAAoB,CAAC;AAAA,EACrBC,uBAAuB;AAAA,IACrBC,QAAS,aAAYN,YAAAA,MAAMC,OAAOM;AAAAA,IAClC,WAAW;AAAA,MACTD,QAAS,aAAYN,YAAAA,MAAMC,OAAOM;AAAAA,IACpC;AAAA,EACF;AAAA,EACAC,eAAe,CAAC;AAAA,EAEhBC,MAAM,CAAC;AAAA,EAEPC,qBAAqB;AAAA,IACnBC,iBAAiBX,YAAAA,MAAMC,OAAOW;AAAAA,IAC9BC,QAAQ;AAAA,IACRtB,SAAS;AAAA,IACTuB,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBvB,YAAY;AAAA,IACZwB,SAAShB,YAAAA,MAAMiB,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,IAChCC,YAAY;AAAA,IACZC,UAAU;AAAA,EACZ;AAAA,EAEAC,OAAO,CAAC;AACV,CAAC;;;"}

package/dist/cjs/components/TimePicker/Unit/Unit.cjs

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("@emotion/react");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const Unit_styles = require("./Unit.styles.cjs");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const ToggleButton = require("../../ToggleButton/ToggleButton.cjs");
+const Input = require("../../Input/Input.cjs");
+const Unit = ({
+  id,
+  state,
+  segment,
+  placeholder: placeholderProp,
+  onChange,
+  onAdd,
+  onSub
+}) => {
+  const {
+    type,
+    text
+  } = segment;
+  const placeholder = placeholderProp ?? segment.placeholder;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
+    children: ({
+      css
+    }) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: css(Unit_styles.styles.root),
+      children: [type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, {
+        onClick: onAdd
+      }), type === "literal" && /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: css(Unit_styles.styles.separator),
+        children: text
+      }), type === "dayPeriod" && /* @__PURE__ */ jsxRuntime.jsx(ToggleButton.HvToggleButton, {
+        className: css(Unit_styles.styles.periodToggle),
+        onClick: onAdd,
+        children: text
+      }), ["hour", "minute", "second"].includes(type) && /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
+        id,
+        disableClear: true,
+        style: {
+          ...uikitStyles.theme.typography.title3
+        },
+        classes: {
+          input: css(Unit_styles.styles.input),
+          root: css(Unit_styles.styles.inputContainer),
+          inputBorderContainer: css(Unit_styles.styles.inputBorderContainer),
+          inputRoot: css(Unit_styles.styles.inputRoot)
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        },
+        required: true,
+        status: state.validationState,
+        value: text.padStart(2, "0"),
+        onChange,
+        placeholder,
+        inputProps: {
+          autoComplete: "off",
+          type: "number"
+        }
+      }), type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, {
+        onClick: onSub
+      })]
+    })
+  });
+};
+exports.Unit = Unit;
+//# sourceMappingURL=Unit.cjs.map

package/dist/cjs/components/TimePicker/Unit/Unit.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Unit.cjs","sources":["../../../../../src/components/TimePicker/Unit/Unit.tsx"],"sourcesContent":["import { KeyboardEvent } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport { DateFieldState, DateSegment } from \"@react-stately/datepicker\";\nimport {\n  DropDownXS as SubtractTimeIcon,\n  DropUpXS as AddTimeIcon,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { HvInput, HvInputProps, HvToggleButton, theme } from \"../../..\";\nimport { styles } from \"./Unit.styles\";\n\ninterface UnitProps {\n  id?: string;\n  state: DateFieldState;\n  segment: DateSegment;\n  placeholder?: string;\n  /** Called when the value changes */\n  onChange?: HvInputProps[\"onChange\"];\n  /** Called when the up/add arrow is pressed */\n  onAdd?: () => void;\n  /** Called when the down/subtract arrow is pressed */\n  onSub?: () => void;\n}\n\nexport const Unit = ({\n  id,\n  state,\n  segment,\n  placeholder: placeholderProp,\n  onChange,\n  onAdd,\n  onSub,\n}: UnitProps) => {\n  const { type, text } = segment;\n  const placeholder = placeholderProp ?? segment.placeholder;\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <div className={css(styles.root)}>\n          {type !== \"literal\" && <AddTimeIcon onClick={onAdd} />}\n          {type === \"literal\" && (\n            <div className={css(styles.separator)}>{text}</div>\n          )}\n          {type === \"dayPeriod\" && (\n            <HvToggleButton\n              className={css(styles.periodToggle)}\n              onClick={onAdd}\n            >\n              {text}\n            </HvToggleButton>\n          )}\n          {[\"hour\", \"minute\", \"second\"].includes(type) && (\n            <HvInput\n              id={id}\n              disableClear\n              style={{\n                ...theme.typography.title3,\n              }}\n              classes={{\n                input: css(styles.input),\n                root: css(styles.inputContainer),\n                inputBorderContainer: css(styles.inputBorderContainer),\n                inputRoot: css(styles.inputRoot),\n              }}\n              onKeyDown={(event) => {\n                if ((event as KeyboardEvent).key === \"Enter\") {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n              }}\n              required\n              status={state.validationState}\n              value={text.padStart(2, \"0\")}\n              onChange={onChange}\n              placeholder={placeholder}\n              inputProps={{ autoComplete: \"off\", type: \"number\" }}\n            />\n          )}\n          {type !== \"literal\" && <SubtractTimeIcon onClick={onSub} />}\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["Unit","id","state","segment","placeholder","placeholderProp","onChange","onAdd","onSub","type","text","ClassNames","children","css","className","styles","root","AddTimeIcon","onClick","separator","HvToggleButton","periodToggle","includes","_jsx","HvInput","disableClear","style","theme","typography","title3","classes","input","inputContainer","inputBorderContainer","inputRoot","onKeyDown","event","key","preventDefault","stopPropagation","required","status","validationState","value","padStart","inputProps","autoComplete","SubtractTimeIcon"],"mappings":";;;;;;;;;AAuBO,MAAMA,OAAOA,CAAC;AAAA,EACnBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAaC;AAAAA,EACbC;AAAAA,EACAC;AAAAA,EACAC;AACS,MAAM;AACT,QAAA;AAAA,IAAEC;AAAAA,IAAMC;AAAAA,EAASP,IAAAA;AACjBC,QAAAA,cAAcC,mBAAmBF,QAAQC;AAE/C,wCACGO,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,sCACF,OAAA;AAAA,MAAKC,WAAWD,IAAIE,YAAAA,OAAOC,IAAI;AAAA,MAAEJ,WAC9BH,SAAS,4CAAcQ,gBAAAA,UAAW;AAAA,QAACC,SAASX;AAAAA,MAAQ,CAAA,GACpDE,SAAS,4CACR,OAAA;AAAA,QAAKK,WAAWD,IAAIE,YAAAA,OAAOI,SAAS;AAAA,QAAEP,UAAEF;AAAAA,MAAU,CAAA,GAEnDD,SAAS,8CACPW,aAAAA,gBAAc;AAAA,QACbN,WAAWD,IAAIE,YAAAA,OAAOM,YAAY;AAAA,QAClCH,SAASX;AAAAA,QAAMK,UAEdF;AAAAA,MAAAA,CACa,GAEjB,CAAC,QAAQ,UAAU,QAAQ,EAAEY,SAASb,IAAI,KACzCc,2BAAAA,IAACC,eAAO;AAAA,QACNvB;AAAAA,QACAwB,cAAY;AAAA,QACZC,OAAO;AAAA,UACL,GAAGC,YAAAA,MAAMC,WAAWC;AAAAA,QACtB;AAAA,QACAC,SAAS;AAAA,UACPC,OAAOlB,IAAIE,YAAAA,OAAOgB,KAAK;AAAA,UACvBf,MAAMH,IAAIE,YAAAA,OAAOiB,cAAc;AAAA,UAC/BC,sBAAsBpB,IAAIE,YAAAA,OAAOkB,oBAAoB;AAAA,UACrDC,WAAWrB,IAAIE,YAAAA,OAAOmB,SAAS;AAAA,QACjC;AAAA,QACAC,WAAYC,CAAU,UAAA;AACfA,cAAAA,MAAwBC,QAAQ,SAAS;AAC5CD,kBAAME,eAAe;AACrBF,kBAAMG,gBAAgB;AAAA,UACxB;AAAA,QACF;AAAA,QACAC,UAAQ;AAAA,QACRC,QAAQvC,MAAMwC;AAAAA,QACdC,OAAOjC,KAAKkC,SAAS,GAAG,GAAG;AAAA,QAC3BtC;AAAAA,QACAF;AAAAA,QACAyC,YAAY;AAAA,UAAEC,cAAc;AAAA,UAAOrC,MAAM;AAAA,QAAS;AAAA,MACnD,CAAA,GAEFA,SAAS,4CAAcsC,gBAAAA,YAAgB;AAAA,QAAC7B,SAASV;AAAAA,MAAAA,CAAQ,CAAC;AAAA,IAAA,CACxD;AAAA,EAAA,CAEG;AAEhB;;"}

package/dist/cjs/components/TimePicker/Unit/Unit.styles.cjs

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const styles = {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    textAlign: "center",
+    ...uikitStyles.theme.typography.sTitle
+  },
+  separator: {
+    width: 8
+  },
+  periodToggle: {
+    height: 40,
+    width: 40
+  },
+  element: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    height: 40,
+    width: 40
+  },
+  input: {
+    ...uikitStyles.theme.typography.sTitle,
+    fontWeight: 600,
+    textAlign: "center",
+    height: 40,
+    width: 40,
+    padding: 0,
+    margin: 0,
+    "&::placeholder": {
+      fontSize: 16,
+      fontWeight: 600
+    }
+  },
+  inputRoot: {
+    width: 40,
+    height: 40
+  },
+  subtractIcon: {
+    marginTop: uikitStyles.theme.space.xs
+  },
+  inputContainer: {
+    minWidth: 40,
+    maxWidth: 40
+  },
+  inputBorderContainer: {
+    top: 40
+  }
+};
+exports.styles = styles;
+//# sourceMappingURL=Unit.styles.cjs.map

package/dist/cjs/components/TimePicker/Unit/Unit.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Unit.styles.cjs","sources":["../../../../../src/components/TimePicker/Unit/Unit.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/css\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const styles = {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    textAlign: \"center\",\n    ...theme.typography.sTitle,\n  },\n\n  separator: {\n    width: 8,\n  },\n\n  periodToggle: {\n    height: 40,\n    width: 40,\n  },\n\n  element: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: 40,\n    width: 40,\n  },\n\n  input: {\n    ...theme.typography.sTitle,\n    fontWeight: 600,\n    textAlign: \"center\",\n    height: 40,\n    width: 40,\n    padding: 0,\n    margin: 0,\n    \"&::placeholder\": {\n      fontSize: 16,\n      fontWeight: 600,\n    },\n  },\n  inputRoot: {\n    width: 40,\n    height: 40,\n  },\n\n  subtractIcon: {\n    marginTop: theme.space.xs,\n  },\n  inputContainer: {\n    minWidth: 40,\n    maxWidth: 40,\n  },\n  inputBorderContainer: {\n    top: 40,\n  },\n} satisfies Record<string, CSSInterpolation>;\n"],"names":["styles","root","display","flexDirection","justifyContent","alignItems","textAlign","theme","typography","sTitle","separator","width","periodToggle","height","element","input","fontWeight","padding","margin","fontSize","inputRoot","subtractIcon","marginTop","space","xs","inputContainer","minWidth","maxWidth","inputBorderContainer","top"],"mappings":";;;AAGO,MAAMA,SAAS;AAAA,EACpBC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,WAAW;AAAA,IACX,GAAGC,YAAAA,MAAMC,WAAWC;AAAAA,EACtB;AAAA,EAEAC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA,EAEAC,cAAc;AAAA,IACZC,QAAQ;AAAA,IACRF,OAAO;AAAA,EACT;AAAA,EAEAG,SAAS;AAAA,IACPZ,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZQ,QAAQ;AAAA,IACRF,OAAO;AAAA,EACT;AAAA,EAEAI,OAAO;AAAA,IACL,GAAGR,YAAAA,MAAMC,WAAWC;AAAAA,IACpBO,YAAY;AAAA,IACZV,WAAW;AAAA,IACXO,QAAQ;AAAA,IACRF,OAAO;AAAA,IACPM,SAAS;AAAA,IACTC,QAAQ;AAAA,IACR,kBAAkB;AAAA,MAChBC,UAAU;AAAA,MACVH,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAI,WAAW;AAAA,IACTT,OAAO;AAAA,IACPE,QAAQ;AAAA,EACV;AAAA,EAEAQ,cAAc;AAAA,IACZC,WAAWf,YAAAA,MAAMgB,MAAMC;AAAAA,EACzB;AAAA,EACAC,gBAAgB;AAAA,IACdC,UAAU;AAAA,IACVC,UAAU;AAAA,EACZ;AAAA,EACAC,sBAAsB;AAAA,IACpBC,KAAK;AAAA,EACP;AACF;;"}