@hitachivantara/uikit-react-core 5.15.0 → 5.16.0

package/dist/cjs/index.cjs

@@ -41,7 +41,7 @@ const baseInputClasses = require("./components/BaseInput/baseInputClasses.cjs");
 const BaseInput = require("./components/BaseInput/BaseInput.cjs");
 const baseDropdownClasses = require("./components/BaseDropdown/baseDropdownClasses.cjs");
 const BaseDropdown = require("./components/BaseDropdown/BaseDropdown.cjs");
-const actionBarClasses = require("./components/ActionBar/actionBarClasses.cjs");
+const ActionBar_styles = require("./components/ActionBar/ActionBar.styles.cjs");
 const ActionBar = require("./components/ActionBar/ActionBar.cjs");
 const accordionClasses = require("./components/Accordion/accordionClasses.cjs");
 const Accordion = require("./components/Accordion/Accordion.cjs");
@@ -253,6 +253,8 @@ const Carousel_styles = require("./components/Carousel/Carousel.styles.cjs");
 const Carousel = require("./components/Carousel/Carousel.cjs");
 const CarouselSlide_styles = require("./components/Carousel/CarouselSlide/CarouselSlide.styles.cjs");
 const CarouselSlide = require("./components/Carousel/CarouselSlide/CarouselSlide.cjs");
+const TimePicker_styles = require("./components/TimePicker/TimePicker.styles.cjs");
+const TimePicker = require("./components/TimePicker/TimePicker.cjs");
 const useUniqueId = require("./hooks/useUniqueId.cjs");
 const useIsMounted = require("./hooks/useIsMounted.cjs");
 const useClickOutside = require("./hooks/useClickOutside.cjs");
@@ -349,7 +351,7 @@ exports.baseInputClasses = baseInputClasses.default;
 exports.HvBaseInput = BaseInput.HvBaseInput;
 exports.baseDropdownClasses = baseDropdownClasses.default;
 exports.HvBaseDropdown = BaseDropdown.HvBaseDropdown;
-exports.actionBarClasses = actionBarClasses.default;
+exports.actionBarClasses = ActionBar_styles.staticClasses;
 exports.HvActionBar = ActionBar.HvActionBar;
 exports.accordionClasses = accordionClasses.default;
 exports.HvAccordion = Accordion.HvAccordion;
@@ -597,6 +599,8 @@ exports.carouselClasses = Carousel_styles.carouselClasses;
 exports.HvCarousel = Carousel.HvCarousel;
 exports.cc = CarouselSlide_styles.cc;
 exports.HvCarouselSlide = CarouselSlide.HvCarouselSlide;
+exports.timePickerClasses = TimePicker_styles.staticClasses;
+exports.HvTimePicker = TimePicker.HvTimePicker;
 exports.useUniqueId = useUniqueId.default;
 exports.useIsMounted = useIsMounted.default;
 exports.useClickOutside = useClickOutside.useClickOutside;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/utils/classes.cjs

@@ -31,7 +31,7 @@ const replace$ = (stylesObj, name) => {
 function createClasses(name, stylesObject) {
   const styles = replace$(stylesObject, name);
   const staticClasses = getClasses(Object.keys(styles), name);
-  function useClasses(classesProp) {
+  function useClasses(classesProp = {}) {
     const {
       cx,
       css
@@ -39,8 +39,9 @@ function createClasses(name, stylesObject) {
     const mergeClasses = (key) => cx(`${name}-${key}`, css(styles[key]), classesProp == null ? void 0 : classesProp[key]);
     const classes = Object.fromEntries(Object.keys(styles).map((key) => [key, mergeClasses(key)]));
     return {
-      cx,
-      classes
+      classes,
+      css,
+      cx
     };
   }
   return {

package/dist/cjs/utils/classes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"classes.cjs","sources":["../../../src/utils/classes.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/css\";\nimport { useCss } from \"@core/hooks/useCss\";\n\nexport type ExtractNames<\n  T extends (...args: any) => { classes: Record<string, any>; cx: any }\n> = ReturnType<T>[\"classes\"];\n\nexport const getClasses = <T extends string, N extends string>(\n  keys: T[],\n  name: N\n) => {\n  const classesObj: Record<string, string> = {};\n  keys.forEach((key: string) => {\n    classesObj[key] = `${name}-${key}`;\n  });\n  return classesObj as { [P in T]: `${N}-${P}` };\n};\n\nconst deepRenameKeys = <T extends object>(\n  obj: T,\n  mapFn: (key: string) => string\n): T => {\n  const result: any = {};\n  for (const key in obj) {\n    if (Object.hasOwn(obj, key)) {\n      const newKey = mapFn(key);\n      const value = obj[key];\n      result[newKey] =\n        typeof value === \"object\" ? deepRenameKeys(value as any, mapFn) : value;\n    }\n  }\n  return result;\n};\n\n/** Given a `stylesObj`, replaces its keys' `$myClass` with `.{name}-myClass`. */\nexport const replace$ = <T extends object>(stylesObj: T, name: string): T => {\n  return deepRenameKeys(stylesObj, (key) => {\n    const matches = key.match(/\\$\\w+/g);\n    if (!matches?.length) return key;\n    const newKey = matches.reduce(\n      (acc, match) => acc.replace(match, `.${name}-${match.slice(1)}`),\n      key\n    );\n    return newKey ?? key;\n  });\n};\n\n/** Utility function to create classes for a component. */\nexport function createClasses<Name extends string, ClassName extends string>(\n  /** Component name in PascalCase (ie. `HvTableCell`). */\n  name: Name,\n  stylesObject: Record<ClassName, CSSInterpolation>\n) {\n  const styles = replace$(stylesObject, name);\n\n  const staticClasses = getClasses(Object.keys(styles) as ClassName[], name);\n\n  function useClasses(classesProp: Partial<Record<ClassName, string>>) {\n    const { cx, css } = useCss();\n\n    const mergeClasses = (key: string) =>\n      cx(`${name}-${key}`, css(styles[key]), classesProp?.[key]);\n\n    const classes = Object.fromEntries(\n      Object.keys(styles).map((key) => [key, mergeClasses(key)])\n    ) as { [P in ClassName]: string };\n\n    return { cx, classes };\n  }\n\n  return { useClasses, staticClasses };\n}\n"],"names":["getClasses","keys","name","classesObj","forEach","key","deepRenameKeys","obj","mapFn","result","Object","hasOwn","newKey","value","replace$","stylesObj","matches","match","length","reduce","acc","replace","slice","createClasses","stylesObject","styles","staticClasses","useClasses","classesProp","cx","css","useCss","mergeClasses","classes","fromEntries","map"],"mappings":";;;AAOaA,MAAAA,aAAa,CACxBC,MACAC,SACG;AACH,QAAMC,aAAqC,CAAA;AACtCC,OAAAA,QAAQ,CAACC,QAAgB;AACjBA,eAAAA,GAAG,IAAK,GAAEH,QAAQG;AAAAA,EAAAA,CAC9B;AACMF,SAAAA;AACT;AAEA,MAAMG,iBAAiB,CACrBC,KACAC,UACM;AACN,QAAMC,SAAc,CAAA;AACpB,aAAWJ,OAAOE,KAAK;AACrB,QAAIG,OAAOC,OAAOJ,KAAKF,GAAG,GAAG;AACrBO,YAAAA,SAASJ,MAAMH,GAAG;AAClBQ,YAAAA,QAAQN,IAAIF,GAAG;AACdO,aAAAA,MAAM,IACX,OAAOC,UAAU,WAAWP,eAAeO,OAAcL,KAAK,IAAIK;AAAAA,IACtE;AAAA,EACF;AACOJ,SAAAA;AACT;AAGaK,MAAAA,WAAW,CAAmBC,WAAcb,SAAoB;AACpEI,SAAAA,eAAeS,WAAYV,CAAQ,QAAA;AAClCW,UAAAA,UAAUX,IAAIY,MAAM,QAAQ;AAClC,QAAI,EAACD,mCAASE;AAAeb,aAAAA;AAC7B,UAAMO,SAASI,QAAQG,OACrB,CAACC,KAAKH,UAAUG,IAAIC,QAAQJ,OAAQ,IAAGf,QAAQe,MAAMK,MAAM,CAAC,GAAG,GAC/DjB,GACF;AACA,WAAOO,UAAUP;AAAAA,EAAAA,CAClB;AACH;AAGgBkB,SAAAA,cAEdrB,MACAsB,cACA;AACMC,QAAAA,SAASX,SAASU,cAActB,IAAI;AAE1C,QAAMwB,gBAAgB1B,WAAWU,OAAOT,KAAKwB,MAAM,GAAkBvB,IAAI;AAEzE,WAASyB,WAAWC,aAAiD;AAC7D,UAAA;AAAA,MAAEC;AAAAA,MAAIC;AAAAA,QAAQC,OAAO,OAAA;AAE3B,UAAMC,eAAeA,CAAC3B,QACpBwB,GAAI,GAAE3B,QAAQG,OAAOyB,IAAIL,OAAOpB,GAAG,CAAC,GAAGuB,2CAAcvB,IAAI;AAE3D,UAAM4B,UAAUvB,OAAOwB,YACrBxB,OAAOT,KAAKwB,MAAM,EAAEU,IAAK9B,CAAAA,QAAQ,CAACA,KAAK2B,aAAa3B,GAAG,CAAC,CAAC,CAC3D;AAEO,WAAA;AAAA,MAAEwB;AAAAA,MAAII;AAAAA,IAAAA;AAAAA,EACf;AAEO,SAAA;AAAA,IAAEN;AAAAA,IAAYD;AAAAA,EAAAA;AACvB;;;;"}
+{"version":3,"file":"classes.cjs","sources":["../../../src/utils/classes.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/css\";\nimport { useCss } from \"@core/hooks/useCss\";\n\nexport type ExtractNames<\n  T extends (...args: any) => { classes: Record<string, any>; cx: any }\n> = ReturnType<T>[\"classes\"];\n\nexport const getClasses = <T extends string, N extends string>(\n  keys: T[],\n  name: N\n) => {\n  const classesObj: Record<string, string> = {};\n  keys.forEach((key: string) => {\n    classesObj[key] = `${name}-${key}`;\n  });\n  return classesObj as { [P in T]: `${N}-${P}` };\n};\n\nconst deepRenameKeys = <T extends object>(\n  obj: T,\n  mapFn: (key: string) => string\n): T => {\n  const result: any = {};\n  for (const key in obj) {\n    if (Object.hasOwn(obj, key)) {\n      const newKey = mapFn(key);\n      const value = obj[key];\n      result[newKey] =\n        typeof value === \"object\" ? deepRenameKeys(value as any, mapFn) : value;\n    }\n  }\n  return result;\n};\n\n/** Given a `stylesObj`, replaces its keys' `$myClass` with `.{name}-myClass`. */\nexport const replace$ = <T extends object>(stylesObj: T, name: string): T => {\n  return deepRenameKeys(stylesObj, (key) => {\n    const matches = key.match(/\\$\\w+/g);\n    if (!matches?.length) return key;\n    const newKey = matches.reduce(\n      (acc, match) => acc.replace(match, `.${name}-${match.slice(1)}`),\n      key\n    );\n    return newKey ?? key;\n  });\n};\n\n/** Utility function to create classes for a component. */\nexport function createClasses<Name extends string, ClassName extends string>(\n  /** Component name in PascalCase (ie. `HvTableCell`). */\n  name: Name,\n  stylesObject: Record<ClassName, CSSInterpolation>\n) {\n  const styles = replace$(stylesObject, name);\n\n  const staticClasses = getClasses(Object.keys(styles) as ClassName[], name);\n\n  function useClasses(classesProp: Partial<Record<ClassName, string>> = {}) {\n    const { cx, css } = useCss();\n\n    const mergeClasses = (key: string) =>\n      cx(`${name}-${key}`, css(styles[key]), classesProp?.[key]);\n\n    const classes = Object.fromEntries(\n      Object.keys(styles).map((key) => [key, mergeClasses(key)])\n    ) as { [P in ClassName]: string };\n\n    return { classes, css, cx };\n  }\n\n  return { useClasses, staticClasses };\n}\n"],"names":["getClasses","keys","name","classesObj","forEach","key","deepRenameKeys","obj","mapFn","result","Object","hasOwn","newKey","value","replace$","stylesObj","matches","match","length","reduce","acc","replace","slice","createClasses","stylesObject","styles","staticClasses","useClasses","classesProp","cx","css","useCss","mergeClasses","classes","fromEntries","map"],"mappings":";;;AAOaA,MAAAA,aAAa,CACxBC,MACAC,SACG;AACH,QAAMC,aAAqC,CAAA;AACtCC,OAAAA,QAAQ,CAACC,QAAgB;AACjBA,eAAAA,GAAG,IAAK,GAAEH,QAAQG;AAAAA,EAAAA,CAC9B;AACMF,SAAAA;AACT;AAEA,MAAMG,iBAAiB,CACrBC,KACAC,UACM;AACN,QAAMC,SAAc,CAAA;AACpB,aAAWJ,OAAOE,KAAK;AACrB,QAAIG,OAAOC,OAAOJ,KAAKF,GAAG,GAAG;AACrBO,YAAAA,SAASJ,MAAMH,GAAG;AAClBQ,YAAAA,QAAQN,IAAIF,GAAG;AACdO,aAAAA,MAAM,IACX,OAAOC,UAAU,WAAWP,eAAeO,OAAcL,KAAK,IAAIK;AAAAA,IACtE;AAAA,EACF;AACOJ,SAAAA;AACT;AAGaK,MAAAA,WAAW,CAAmBC,WAAcb,SAAoB;AACpEI,SAAAA,eAAeS,WAAYV,CAAQ,QAAA;AAClCW,UAAAA,UAAUX,IAAIY,MAAM,QAAQ;AAClC,QAAI,EAACD,mCAASE;AAAeb,aAAAA;AAC7B,UAAMO,SAASI,QAAQG,OACrB,CAACC,KAAKH,UAAUG,IAAIC,QAAQJ,OAAQ,IAAGf,QAAQe,MAAMK,MAAM,CAAC,GAAG,GAC/DjB,GACF;AACA,WAAOO,UAAUP;AAAAA,EAAAA,CAClB;AACH;AAGgBkB,SAAAA,cAEdrB,MACAsB,cACA;AACMC,QAAAA,SAASX,SAASU,cAActB,IAAI;AAE1C,QAAMwB,gBAAgB1B,WAAWU,OAAOT,KAAKwB,MAAM,GAAkBvB,IAAI;AAEhEyB,WAAAA,WAAWC,cAAkD,IAAI;AAClE,UAAA;AAAA,MAAEC;AAAAA,MAAIC;AAAAA,QAAQC,OAAO,OAAA;AAE3B,UAAMC,eAAeA,CAAC3B,QACpBwB,GAAI,GAAE3B,QAAQG,OAAOyB,IAAIL,OAAOpB,GAAG,CAAC,GAAGuB,2CAAcvB,IAAI;AAE3D,UAAM4B,UAAUvB,OAAOwB,YACrBxB,OAAOT,KAAKwB,MAAM,EAAEU,IAAK9B,CAAAA,QAAQ,CAACA,KAAK2B,aAAa3B,GAAG,CAAC,CAAC,CAC3D;AAEO,WAAA;AAAA,MAAE4B;AAAAA,MAASH;AAAAA,MAAKD;AAAAA,IAAAA;AAAAA,EACzB;AAEO,SAAA;AAAA,IAAEF;AAAAA,IAAYD;AAAAA,EAAAA;AACvB;;;;"}

package/dist/esm/components/ActionBar/ActionBar.js

@@ -1,23 +1,25 @@
-import { clsx } from "clsx";
-import { StyledRoot } from "./ActionBar.styles.js";
-import actionBarClasses from "./actionBarClasses.js";
+import { useClasses } from "./ActionBar.styles.js";
+import { staticClasses } from "./ActionBar.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 const HvActionBar = (props) => {
   const {
-    classes,
+    classes: classesProp,
     className,
-    id,
     children,
     ...others
   } = props;
-  return /* @__PURE__ */ jsx(StyledRoot, {
-    id,
-    className: clsx(actionBarClasses.root, classes == null ? void 0 : classes.root, className),
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx("div", {
+    className: cx(classes.root, className),
     ...others,
     children
   });
 };
 export {
-  HvActionBar
+  HvActionBar,
+  staticClasses as actionBarClasses
 };
 //# sourceMappingURL=ActionBar.js.map

package/dist/esm/components/ActionBar/ActionBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.js","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,6BACGM,YAAU;AAAA,IACTH;AAAAA,IACAD,WAAWK,KAAKC,iBAAiBC,MAAMR,mCAASQ,MAAMP,SAAS;AAAA,IAAE,GAC7DG;AAAAA,IAAMD;AAAAA,EAAAA,CAGA;AAEhB;"}
+{"version":3,"file":"ActionBar.js","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,WAAWL,WAAW;AAE9C,6BACE,OAAA;AAAA,IAAKC,WAAWG,GAAGL,QAAQO,MAAML,SAAS;AAAA,IAAE,GAAKE;AAAAA,IAAMD;AAAAA,EAAAA,CAElD;AAET;"}

package/dist/esm/components/ActionBar/ActionBar.styles.js

@@ -1,19 +1,20 @@
-import _styled from "@emotion/styled/base";
 import { theme } from "@hitachivantara/uikit-styles";
-const StyledRoot = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "eae5m590"
-} : {
-  target: "eae5m590",
-  label: "StyledRoot"
-})({
-  width: "100%",
-  height: "75px",
-  padding: theme.space.sm,
-  borderTop: `3px solid ${theme.colors.atmo2}`,
-  display: "flex",
-  justifyContent: "flex-end"
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQWN0aW9uQmFyL0FjdGlvbkJhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUcwQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0FjdGlvbkJhci9BY3Rpb25CYXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgaGVpZ2h0OiBcIjc1cHhcIixcbiAgcGFkZGluZzogdGhlbWUuc3BhY2Uuc20sXG4gIGJvcmRlclRvcDogYDNweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hdG1vMn1gLFxuICBkaXNwbGF5OiBcImZsZXhcIixcbiAganVzdGlmeUNvbnRlbnQ6IFwiZmxleC1lbmRcIixcbn0pO1xuIl19 */");
+import { createClasses } from "../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvActionBar", {
+  root: {
+    width: "100%",
+    padding: theme.space.sm,
+    borderTop: theme.actionBar.borderTop,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end"
+  }
+});
 export {
-  StyledRoot
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=ActionBar.styles.js.map

package/dist/esm/components/ActionBar/ActionBar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.styles.js","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","process","env","NODE_ENV","target","label","width","height","padding","theme","space","sm","borderTop","colors","atmo2","display","justifyContent"],"mappings":";;AAGO,MAAMA,aAAoB,wBAAA,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,MAAMC,MAAMC;AAAAA,EACrBC,WAAY,aAAYH,MAAMI,OAAOC;AAAAA,EACrCC,SAAS;AAAA,EACTC,gBAAgB;AAClB,GAACf,QAAAC,IAAAC,aAAC,eAAA,KAAA,y4BAAA;"}
+{"version":3,"file":"ActionBar.styles.js","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,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,SAASC,MAAMC,MAAMC;AAAAA,IACrBC,WAAWH,MAAMI,UAAUD;AAAAA,IAC3BE,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,gBAAgB;AAAA,EAClB;AACF,CAAC;"}

package/dist/esm/components/TimePicker/Placeholder.js

@@ -0,0 +1,70 @@
+import { forwardRef, useRef } from "react";
+import { useDateSegment } from "@react-aria/datepicker";
+import { jsx, Fragment, jsxs } from "@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 = useRef(null);
+  const {
+    segmentProps
+  } = useDateSegment(segment, state, ref);
+  return /* @__PURE__ */ 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 = forwardRef((props, ref) => {
+  const {
+    name,
+    state,
+    placeholders,
+    onKeyDown,
+    ...others
+  } = props;
+  const {
+    value,
+    segments
+  } = state;
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: /* @__PURE__ */ jsxs("div", {
+      ref,
+      onKeyDown: (event) => {
+        event.stopPropagation();
+        onKeyDown == null ? void 0 : onKeyDown(event);
+      },
+      ...others,
+      children: [name && /* @__PURE__ */ jsx("input", {
+        type: "hidden",
+        name,
+        value: getDateValue(value)
+      }), segments.map((segment, i) => /* @__PURE__ */ jsx(PlaceholderSegment, {
+        segment,
+        state,
+        placeholder: placeholders[segment.type]
+      }, i))]
+    })
+  });
+});
+export {
+  Placeholder
+};
+//# sourceMappingURL=Placeholder.js.map

package/dist/esm/components/TimePicker/Placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Placeholder.js","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,OAAO,IAAI;AACjB,QAAA;AAAA,IAAEC;AAAAA,EAAiBC,IAAAA,eAAeN,SAASC,OAAOE,GAAG;AAE3D,6BACE,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,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,6BACEmB,UAAA;AAAA,IAAAb,+BAEE,OAAA;AAAA,MACEJ;AAAAA,MACAa,WAAYK,CAAU,UAAA;AAEpBA,cAAMC,gBAAgB;AACtBN,+CAAYK;AAAAA,MACd;AAAA,MAAE,GACEJ;AAAAA,MAAMV,UAAA,CAETO,QACCS,oBAAA,SAAA;AAAA,QAAOf,MAAK;AAAA,QAASM;AAAAA,QAAYI,OAAO7B,aAAa6B,KAAK;AAAA,MAAA,CAAI,GAE/DC,SAASzB,IAAI,CAACM,SAASwB,0BACrBzB,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/esm/components/TimePicker/TimePicker.js

@@ -0,0 +1,223 @@
+import { useRef, useState, useMemo } from "react";
+import { Time as Time$1 } from "@internationalized/date";
+import { useTimeField } from "@react-aria/datepicker";
+import { useTimeFieldState } from "@react-stately/datepicker";
+import { Time } from "@hitachivantara/uikit-react-icons";
+import { useCss } from "../../hooks/useCss.js";
+import "@hitachivantara/uikit-styles";
+import { Placeholder } from "./Placeholder.js";
+import { useClasses } from "./TimePicker.styles.js";
+import { staticClasses } from "./TimePicker.styles.js";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import useUniqueId from "../../hooks/useUniqueId.js";
+import { Unit } from "./Unit/Unit.js";
+import { useControlled } from "../../hooks/useControlled.js";
+import { setId } from "../../utils/setId.js";
+import { HvFormElement } from "../Forms/FormElement/FormElement.js";
+import { HvLabel } from "../Forms/Label/Label.js";
+import { HvInfoMessage } from "../Forms/InfoMessage/InfoMessage.js";
+import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
+import { HvWarningText } from "../Forms/WarningText/WarningText.js";
+const toTime = (value) => {
+  if (!value)
+    return void 0;
+  const {
+    hours,
+    minutes,
+    seconds
+  } = value;
+  return new Time$1(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(idProp, "hvtimepicker");
+  const ref = useRef(null);
+  const {
+    css
+  } = useCss();
+  const {
+    classes,
+    cx
+  } = 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 = useTimeFieldState(stateProps);
+  const {
+    labelProps,
+    fieldProps
+  } = useTimeField({
+    ...stateProps,
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy
+  }, state, ref);
+  const [open, setOpen] = useState(false);
+  const [validationMessage] = useControlled(statusMessage, "Required");
+  const [validationState] = useControlled(status, "standBy");
+  const placeholders = 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(id, "error") : ariaErrorMessage : void 0;
+  return /* @__PURE__ */ jsxs(HvFormElement, {
+    name,
+    required,
+    disabled,
+    status: validationState,
+    className: cx(classes.root, className),
+    ...others,
+    children: [(label || description) && /* @__PURE__ */ jsxs("div", {
+      className: classes.labelContainer,
+      children: [label && /* @__PURE__ */ jsx(HvLabel, {
+        label,
+        className: classes.label,
+        ...labelProps
+      }), description && /* @__PURE__ */ jsx(HvInfoMessage, {
+        className: classes.description,
+        children: description
+      })]
+    }), /* @__PURE__ */ jsx("div", {
+      className: css({
+        width: is12HrFormat ? 220 : 200
+      }),
+      children: /* @__PURE__ */ jsx(HvBaseDropdown, {
+        role: "combobox",
+        variableWidth: true,
+        disabled,
+        readOnly,
+        placeholder: placeholder && !state.value ? placeholder : /* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsx("div", {
+          ref,
+          className: classes.timePopperContainer,
+          children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(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__ */ jsx(HvWarningText, {
+      id: setId(id, "error"),
+      disableBorder: true,
+      className: classes.error,
+      children: validationMessage
+    })]
+  });
+};
+export {
+  HvTimePicker,
+  staticClasses as timePickerClasses
+};
+//# sourceMappingURL=TimePicker.js.map

package/dist/esm/components/TimePicker/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.js","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/esm/components/TimePicker/TimePicker.styles.js

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

package/dist/esm/components/TimePicker/TimePicker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.styles.js","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,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,MAAMC,OAAOC;AAAAA,EACtB;AAAA,EAEAC,gBAAgB,CAAC;AAAA,EACjBC,oBAAoB,CAAC;AAAA,EACrBC,uBAAuB;AAAA,IACrBC,QAAS,aAAYN,MAAMC,OAAOM;AAAAA,IAClC,WAAW;AAAA,MACTD,QAAS,aAAYN,MAAMC,OAAOM;AAAAA,IACpC;AAAA,EACF;AAAA,EACAC,eAAe,CAAC;AAAA,EAEhBC,MAAM,CAAC;AAAA,EAEPC,qBAAqB;AAAA,IACnBC,iBAAiBX,MAAMC,OAAOW;AAAAA,IAC9BC,QAAQ;AAAA,IACRtB,SAAS;AAAA,IACTuB,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBvB,YAAY;AAAA,IACZwB,SAAShB,MAAMiB,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,IAChCC,YAAY;AAAA,IACZC,UAAU;AAAA,EACZ;AAAA,EAEAC,OAAO,CAAC;AACV,CAAC;"}