@hitachivantara/uikit-react-core 5.41.0 → 5.42.0

package/dist/esm/BulkActions/BulkActions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulkActions.mjs","sources":["../../../src/BulkActions/BulkActions.tsx"],"sourcesContent":["import { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { setId } from \"../utils/setId\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvCheckBox, HvCheckBoxProps } from \"../CheckBox\";\nimport {\n  HvActionGeneric,\n  HvActionsGeneric,\n  HvActionsGenericProps,\n} from \"../ActionsGeneric\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BulkActions.styles\";\n\nexport { staticClasses as bulkActionsClasses };\n\nexport type HvBulkActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBulkActionsProps extends HvBaseProps {\n  /**\n   * Custom label for select all checkbox\n   */\n  selectAllLabel?: React.ReactNode;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * Custom label for select all pages button\n   */\n  selectAllPagesLabel?: React.ReactNode;\n  /**\n   * Whether select all pages element should be visible\n   */\n  showSelectAllPages?: boolean;\n  /**\n   * The total number of elements\n   */\n  numTotal?: number;\n  /**\n   * The number of elements currently selected\n   */\n  numSelected?: number;\n  /**\n   * Function called when the \"select all\" Checkbox is toggled.\n   */\n  onSelectAll?: HvCheckBoxProps[\"onChange\"];\n  /**\n   * Function called when the \"select all pages\" button is clicked toggled.\n   */\n  onSelectAllPages?: HvButtonProps[\"onClick\"];\n  /**\n   * Whether the bulk actions should use the semantic styles when there are selected elements.\n   */\n  semantic?: boolean;\n  /**\n   * The renderable content inside the right actions slot,\n   * or an Array of actions `{ id, label, icon, disabled, ... }`\n   */\n  actions?: React.ReactNode | HvActionGeneric[];\n  /**\n   *  Whether actions should be all disabled\n   */\n  actionsDisabled?: boolean;\n  /**\n   *  The callback function ran when an action is triggered, receiving `action` as param\n   */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /**\n   *  The number of maximum visible actions before they're collapsed into a `DropDownMenu`.\n   */\n  maxVisibleActions?: number;\n  /**\n   * Properties to be passed onto the checkbox component, the values of the object are equivalent to the\n   * HvCheckbox API.\n   */\n  checkboxProps?: HvCheckBoxProps;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvBulkActionsClasses;\n}\n\n/**\n * Bulk Actions allow users to perform an action on a single or multiple items.\n * Also known as \"batch production\" of multiple items at once, one stage at a time.\n */\nexport const HvBulkActions = (props: HvBulkActionsProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selectAllPagesLabel,\n    actionsDisabled,\n    maxVisibleActions,\n    checkboxProps,\n    actions,\n    numTotal = 0,\n    numSelected = 0,\n    selectAllLabel = \"All\",\n    selectAllConjunctionLabel = \"/\",\n    showSelectAllPages = false,\n    semantic = true,\n    actionsCallback,\n    onSelectAll,\n    onSelectAllPages,\n    ...others\n  } = useDefaultProps(\"HvBulkActions\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { activeTheme } = useTheme();\n\n  const anySelected = numSelected > 0;\n  const isSemantic = semantic && anySelected;\n\n  const selectAllLabelComponent = (\n    <HvTypography\n      component=\"span\"\n      disabled={checkboxProps?.disabled}\n      variant=\"body\"\n    >\n      {!anySelected ? (\n        <>\n          <HvTypography variant=\"label\">{selectAllLabel}</HvTypography>\n          {` (${numTotal})`}\n        </>\n      ) : (\n        <>\n          <HvTypography variant=\"label\">{numSelected}</HvTypography>\n          {` ${selectAllConjunctionLabel} ${numTotal}`}\n        </>\n      )}\n    </HvTypography>\n  );\n\n  return (\n    <div\n      id={id}\n      className={cx(\n        classes.root,\n        { [classes.semantic]: isSemantic },\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select\")}\n          className={classes.selectAll}\n          checked={numSelected > 0}\n          semantic={isSemantic}\n          onChange={onSelectAll}\n          indeterminate={numSelected > 0 && numSelected < numTotal}\n          label={selectAllLabelComponent}\n          {...checkboxProps}\n        />\n        {showSelectAllPages && anySelected && numSelected < numTotal && (\n          <>\n            <div className={classes.divider} />\n            <HvButton\n              id={setId(id, \"pages\")}\n              className={classes.selectAllPages}\n              variant={\n                isSemantic\n                  ? (activeTheme?.bulkActions\n                      .actionButtonVariant as HvButtonVariant)\n                  : \"secondaryGhost\"\n              }\n              onClick={onSelectAllPages}\n            >\n              {selectAllPagesLabel ?? `Select all ${numTotal} items`}\n            </HvButton>\n          </>\n        )}\n      </div>\n      <HvActionsGeneric\n        id={setId(id, \"actions\")}\n        classes={{ root: classes.actions }}\n        category={\n          isSemantic\n            ? (activeTheme?.bulkActions.actionButtonVariant as HvButtonVariant)\n            : \"secondaryGhost\"\n        }\n        actions={actions}\n        disabled={actionsDisabled ?? numSelected === 0}\n        actionsCallback={actionsCallback}\n        maxVisibleActions={maxVisibleActions}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAyFa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,4BAA4B;AAAA,IAC5B,qBAAqB;AAAA,IACrB,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,EAAE,gBAAgB;AAExB,QAAM,cAAc,cAAc;AAClC,QAAM,aAAa,YAAY;AAE/B,QAAM,0BACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,UAAU,eAAe;AAAA,MACzB,SAAQ;AAAA,MAEP,UAAA,CAAC,cAEE,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAC,oBAAA,cAAA,EAAa,SAAQ,SAAS,UAAe,gBAAA;AAAA,QAC7C,KAAK,QAAQ;AAAA,MAAA,EAAA,CAChB,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAC,oBAAA,cAAA,EAAa,SAAQ,SAAS,UAAY,aAAA;AAAA,QAC1C,IAAI,yBAAyB,IAAI,QAAQ;AAAA,MAAA,GAC5C;AAAA,IAAA;AAAA,EAAA;AAMJ,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QACjC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,oBACtB,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,IAAI,QAAQ;AAAA,cACtB,WAAW,QAAQ;AAAA,cACnB,SAAS,cAAc;AAAA,cACvB,UAAU;AAAA,cACV,UAAU;AAAA,cACV,eAAe,cAAc,KAAK,cAAc;AAAA,cAChD,OAAO;AAAA,cACN,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UACC,sBAAsB,eAAe,cAAc,YAEhD,qBAAA,UAAA,EAAA,UAAA;AAAA,YAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,QAAS,CAAA;AAAA,YACjC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,IAAI,OAAO;AAAA,gBACrB,WAAW,QAAQ;AAAA,gBACnB,SACE,aACK,aAAa,YACX,sBACH;AAAA,gBAEN,SAAS;AAAA,gBAER,UAAA,uBAAuB,cAAc,QAAQ;AAAA,cAAA;AAAA,YAChD;AAAA,UAAA,GACF;AAAA,QAAA,GAEJ;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,IAAI,SAAS;AAAA,YACvB,SAAS,EAAE,MAAM,QAAQ,QAAQ;AAAA,YACjC,UACE,aACK,aAAa,YAAY,sBAC1B;AAAA,YAEN;AAAA,YACA,UAAU,mBAAmB,gBAAgB;AAAA,YAC7C;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/BulkActions/BulkActions.styles.mjs

@@ -0,0 +1,44 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.mjs";
+const { staticClasses, useClasses } = createClasses("HvBulkActions", {
+  root: {
+    display: "flex",
+    alignItems: "center",
+    border: `1px solid ${theme.colors.atmo4}`,
+    backgroundColor: theme.colors.atmo2,
+    padding: theme.spacing("xs", "md"),
+    marginBottom: theme.space.xs
+  },
+  semantic: {
+    backgroundColor: theme.colors.primary_20,
+    "& $selectAll div": {
+      color: "inherit",
+      "&:hover:not(:disabled)": {
+        backgroundColor: theme.alpha("base_light", 0.3)
+      },
+      "& *": {
+        color: "inherit",
+        backgroundColor: "transparent"
+      }
+    },
+    "& $selectAll:focus-within div": {
+      backgroundColor: theme.alpha("base_light", 0.3)
+    }
+  },
+  actions: { display: "inline-flex", marginLeft: "auto" },
+  selectAllContainer: { display: "flex", alignItems: "center" },
+  selectAll: {},
+  selectAllPages: {},
+  divider: {
+    display: "flex",
+    backgroundColor: theme.colors.atmo4,
+    width: "1px",
+    height: "32px",
+    marginLeft: theme.space.sm
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=BulkActions.styles.mjs.map

package/dist/esm/BulkActions/BulkActions.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulkActions.styles.mjs","sources":["../../../src/BulkActions/BulkActions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBulkActions\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    border: `1px solid ${theme.colors.atmo4}`,\n    backgroundColor: theme.colors.atmo2,\n    padding: theme.spacing(\"xs\", \"md\"),\n    marginBottom: theme.space.xs,\n  },\n  semantic: {\n    backgroundColor: theme.colors.primary_20,\n    \"& $selectAll div\": {\n      color: \"inherit\",\n\n      \"&:hover:not(:disabled)\": {\n        backgroundColor: theme.alpha(\"base_light\", 0.3),\n      },\n\n      \"& *\": {\n        color: \"inherit\",\n        backgroundColor: \"transparent\",\n      },\n    },\n\n    \"& $selectAll:focus-within div\": {\n      backgroundColor: theme.alpha(\"base_light\", 0.3),\n    },\n  },\n  actions: { display: \"inline-flex\", marginLeft: \"auto\" },\n  selectAllContainer: { display: \"flex\", alignItems: \"center\" },\n  selectAll: {},\n  selectAllPages: {},\n  divider: {\n    display: \"flex\",\n    backgroundColor: theme.colors.atmo4,\n    width: \"1px\",\n    height: \"32px\",\n    marginLeft: theme.space.sm,\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ,aAAa,MAAM,OAAO,KAAK;AAAA,IACvC,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS,MAAM,QAAQ,MAAM,IAAI;AAAA,IACjC,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,oBAAoB;AAAA,MAClB,OAAO;AAAA,MAEP,0BAA0B;AAAA,QACxB,iBAAiB,MAAM,MAAM,cAAc,GAAG;AAAA,MAChD;AAAA,MAEA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IAEA,iCAAiC;AAAA,MAC/B,iBAAiB,MAAM,MAAM,cAAc,GAAG;AAAA,IAChD;AAAA,EACF;AAAA,EACA,SAAS,EAAE,SAAS,eAAe,YAAY,OAAO;AAAA,EACtD,oBAAoB,EAAE,SAAS,QAAQ,YAAY,SAAS;AAAA,EAC5D,WAAW,CAAC;AAAA,EACZ,gBAAgB,CAAC;AAAA,EACjB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY,MAAM,MAAM;AAAA,EAC1B;AACF,CAAC;"}

package/dist/esm/Button/Button.mjs

@@ -0,0 +1,76 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { useTheme } from "../hooks/useTheme.mjs";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { useClasses, getSizeStyles, getRadiusStyles, getOverrideColors } from "./Button.styles.mjs";
+import { staticClasses } from "./Button.styles.mjs";
+const mapVariant = (variant, theme) => {
+  if (theme === "ds3")
+    return variant;
+  const deprecatedVariantMap = {
+    secondary: "secondarySubtle",
+    ghost: "primaryGhost"
+  };
+  const mappedVariant = deprecatedVariantMap[variant];
+  return mappedVariant || variant;
+};
+const HvButton = forwardRef(
+  (props, ref) => {
+    const {
+      classes: classesProp,
+      children,
+      variant: variantProp,
+      disabled = false,
+      className,
+      startIcon,
+      endIcon,
+      icon = false,
+      size,
+      radius,
+      overrideIconColors = true,
+      component: Component = "button",
+      ...others
+    } = useDefaultProps("HvButton", props);
+    const { classes, css, cx } = useClasses(classesProp);
+    const { activeTheme } = useTheme();
+    const variant = mapVariant(
+      variantProp ?? (icon ? "secondaryGhost" : "primary"),
+      activeTheme?.name
+    );
+    return /* @__PURE__ */ jsxs(
+      Component,
+      {
+        ref,
+        className: cx(
+          classes.root,
+          classes[variant],
+          size && css(getSizeStyles(size)),
+          radius && css(getRadiusStyles(radius)),
+          overrideIconColors && css(getOverrideColors()),
+          {
+            [classes.icon]: icon,
+            [classes.disabled]: disabled
+          },
+          className
+        ),
+        ...Component === "button" && { type: "button" },
+        ...disabled && {
+          disabled: true,
+          tabIndex: -1,
+          "aria-disabled": true
+        },
+        ...others,
+        children: [
+          startIcon && /* @__PURE__ */ jsx("span", { className: classes.startIcon, children: startIcon }),
+          children,
+          endIcon && /* @__PURE__ */ jsx("span", { className: classes.endIcon, children: endIcon })
+        ]
+      }
+    );
+  }
+);
+export {
+  HvButton,
+  staticClasses as buttonClasses
+};
+//# sourceMappingURL=Button.mjs.map

package/dist/esm/Button/Button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.mjs","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\n\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { PolymorphicComponentRef, PolymorphicRef } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport {\n  staticClasses as buttonClasses,\n  getOverrideColors,\n  getRadiusStyles,\n  getSizeStyles,\n  useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the Button. */\n      variant?: HvButtonVariant;\n      /** Whether the Button is an icon-only button. */\n      icon?: boolean;\n      /** Whether the Button is disabled or not. */\n      disabled?: boolean;\n      /** Class names to be applied. */\n      className?: string;\n      /** Element placed before the children. */\n      startIcon?: ReactElement;\n      /** Element placed after the children. */\n      endIcon?: ReactElement;\n      /** Button size. */\n      size?: HvButtonSize;\n      /** Button border radius. */\n      radius?: HvButtonRadius;\n      /** Defines the default colors of the button are forced into the icon. */\n      overrideIconColors?: boolean;\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvButtonClasses;\n      /** Whether the Button is selected or not. */\n      selected?: boolean;\n    }\n  >;\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n */\nconst mapVariant = (\n  variant: HvButtonVariant,\n  theme?: string\n): HvButtonVariant => {\n  if (theme === \"ds3\") return variant;\n\n  const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n    secondary: \"secondarySubtle\",\n    ghost: \"primaryGhost\",\n  };\n\n  const mappedVariant = deprecatedVariantMap[variant];\n\n  if (import.meta.env.DEV && mappedVariant) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`\n    );\n  }\n\n  return mappedVariant || variant;\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton: <C extends React.ElementType = \"button\">(\n  props: HvButtonProps<C>\n) => React.ReactElement | null = forwardRef(\n  <C extends React.ElementType = \"button\">(\n    props: HvButtonProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const {\n      classes: classesProp,\n      children,\n      variant: variantProp,\n      disabled = false,\n      className,\n      startIcon,\n      endIcon,\n      icon = false,\n      size,\n      radius,\n      overrideIconColors = true,\n      component: Component = \"button\",\n      ...others\n    } = useDefaultProps(\"HvButton\", props);\n    const { classes, css, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n    const variant = mapVariant(\n      variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n      activeTheme?.name\n    );\n\n    return (\n      <Component\n        ref={ref}\n        className={cx(\n          classes.root,\n          classes[variant],\n          size && css(getSizeStyles(size)),\n          radius && css(getRadiusStyles(radius)),\n          overrideIconColors && css(getOverrideColors()),\n          {\n            [classes.icon]: icon,\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\n        {...(Component === \"button\" && { type: \"button\" })}\n        {...(disabled && {\n          disabled: true,\n          tabIndex: -1,\n          \"aria-disabled\": true,\n        })}\n        {...others}\n      >\n        {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n        {children}\n        {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n      </Component>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;AAsDA,MAAM,aAAa,CACjB,SACA,UACoB;AACpB,MAAI,UAAU;AAAc,WAAA;AAE5B,QAAM,uBAAwD;AAAA,IAC5D,WAAW;AAAA,IACX,OAAO;AAAA,EAAA;AAGH,QAAA,gBAAgB,qBAAqB,OAAO;AASlD,SAAO,iBAAiB;AAC1B;AAKO,MAAM,WAEoB;AAAA,EAC/B,CACE,OACA,QACG;AACG,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACrB,WAAW,YAAY;AAAA,MACvB,GAAG;AAAA,IAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,UAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,UAAA,EAAE,gBAAgB;AACxB,UAAM,UAAU;AAAA,MACd,gBAAgB,OAAO,mBAAmB;AAAA,MAC1C,aAAa;AAAA,IAAA;AAIb,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ,OAAO;AAAA,UACf,QAAQ,IAAI,cAAc,IAAI,CAAC;AAAA,UAC/B,UAAU,IAAI,gBAAgB,MAAM,CAAC;AAAA,UACrC,sBAAsB,IAAI,mBAAmB;AAAA,UAC7C;AAAA,YACE,CAAC,QAAQ,IAAI,GAAG;AAAA,YAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAI,cAAc,YAAY,EAAE,MAAM,SAAS;AAAA,QAC/C,GAAI,YAAY;AAAA,UACf,UAAU;AAAA,UACV,UAAU;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,aAAc,oBAAA,QAAA,EAAK,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,UAC5D;AAAA,UACA,WAAY,oBAAA,QAAA,EAAK,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7D;AACF;"}

package/dist/esm/Button/Button.styles.mjs

@@ -0,0 +1,115 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { outlineStyles } from "../utils/focusUtils.mjs";
+import { createClasses } from "../utils/classes.mjs";
+const { staticClasses, useClasses } = createClasses("HvButton", {
+  root: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    textTransform: "none",
+    cursor: "pointer",
+    minWidth: "70px",
+    whiteSpace: "nowrap",
+    "&:hover": {
+      backgroundColor: theme.colors.containerBackgroundHover
+    },
+    "&:focus-visible": {
+      ...outlineStyles,
+      backgroundColor: theme.colors.containerBackgroundHover
+    },
+    // default button - no size specified
+    fontFamily: theme.fontFamily.body,
+    fontSize: theme.fontSizes.base,
+    fontWeight: theme.fontWeights.semibold,
+    lineHeight: "11px",
+    letterSpacing: 0,
+    height: "32px",
+    borderRadius: theme.radii.base,
+    padding: theme.spacing("xs", "sm")
+  },
+  startIcon: {
+    marginLeft: `calc(-1 * ${theme.space.xs})`
+  },
+  endIcon: {
+    marginRight: `calc(-1 * ${theme.space.xs})`
+  },
+  focusVisible: {},
+  disabled: {
+    color: theme.colors.secondary_60,
+    borderColor: theme.colors.atmo4,
+    backgroundColor: theme.colors.atmo3,
+    cursor: "not-allowed",
+    pointerEvents: "none"
+  },
+  icon: {
+    margin: 0,
+    padding: 0,
+    height: "fit-content",
+    minWidth: "unset"
+  },
+  primary: {
+    color: theme.colors.atmo1,
+    backgroundColor: theme.colors.primary,
+    "&:hover, &:focus-visible": {
+      backgroundColor: theme.colors.primary_80
+    }
+  },
+  primarySubtle: {
+    color: theme.colors.primary,
+    backgroundColor: "transparent",
+    border: "1px solid currentColor"
+  },
+  primaryGhost: {
+    color: theme.colors.primary,
+    backgroundColor: "transparent",
+    "&:disabled": {
+      backgroundColor: "transparent"
+    }
+  },
+  secondarySubtle: {
+    color: theme.colors.secondary,
+    backgroundColor: "transparent",
+    border: "1px solid currentColor"
+  },
+  secondaryGhost: {
+    color: theme.colors.secondary,
+    backgroundColor: "transparent",
+    "&:disabled": {
+      backgroundColor: "transparent"
+    }
+  },
+  semantic: {
+    color: theme.colors.base_dark,
+    backgroundColor: "transparent",
+    "&:hover, &:focus-visible": {
+      backgroundColor: "rgba(251, 252, 252, 0.3)"
+    },
+    "&:disabled": {
+      backgroundColor: "rgba(251, 252, 252, 0.1)"
+    }
+  },
+  secondary: {},
+  ghost: {}
+});
+const getRadiusStyles = (radius) => ({
+  borderRadius: theme.radii[radius]
+});
+const getSizeStyles = (size) => ({
+  height: theme.sizes[size],
+  paddingLeft: theme.space[size],
+  paddingRight: theme.space[size],
+  fontSize: theme.fontSizes[size]
+});
+const getOverrideColors = () => ({
+  "& svg .color0": {
+    fill: "currentcolor"
+  }
+});
+export {
+  getOverrideColors,
+  getRadiusStyles,
+  getSizeStyles,
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Button.styles.mjs.map

package/dist/esm/Button/Button.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styles.mjs","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nimport { HvButtonRadius, HvButtonSize } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    textTransform: \"none\",\n    cursor: \"pointer\",\n    minWidth: \"70px\",\n\n    whiteSpace: \"nowrap\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n\n    // default button - no size specified\n    fontFamily: theme.fontFamily.body,\n    fontSize: theme.fontSizes.base,\n    fontWeight: theme.fontWeights.semibold,\n    lineHeight: \"11px\",\n    letterSpacing: 0,\n    height: \"32px\",\n    borderRadius: theme.radii.base,\n    padding: theme.spacing(\"xs\", \"sm\"),\n  },\n  startIcon: {\n    marginLeft: `calc(-1 * ${theme.space.xs})`,\n  },\n  endIcon: {\n    marginRight: `calc(-1 * ${theme.space.xs})`,\n  },\n  focusVisible: {},\n\n  disabled: {\n    color: theme.colors.secondary_60,\n    borderColor: theme.colors.atmo4,\n    backgroundColor: theme.colors.atmo3,\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n  },\n\n  icon: {\n    margin: 0,\n    padding: 0,\n    height: \"fit-content\",\n    minWidth: \"unset\",\n  },\n\n  primary: {\n    color: theme.colors.atmo1,\n    backgroundColor: theme.colors.primary,\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: theme.colors.primary_80,\n    },\n  },\n  primarySubtle: {\n    color: theme.colors.primary,\n    backgroundColor: \"transparent\",\n    border: \"1px solid currentColor\",\n  },\n  primaryGhost: {\n    color: theme.colors.primary,\n    backgroundColor: \"transparent\",\n    \"&:disabled\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  secondarySubtle: {\n    color: theme.colors.secondary,\n    backgroundColor: \"transparent\",\n    border: \"1px solid currentColor\",\n  },\n  secondaryGhost: {\n    color: theme.colors.secondary,\n    backgroundColor: \"transparent\",\n    \"&:disabled\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  semantic: {\n    color: theme.colors.base_dark,\n    backgroundColor: \"transparent\",\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: \"rgba(251, 252, 252, 0.3)\",\n    },\n    \"&:disabled\": {\n      backgroundColor: \"rgba(251, 252, 252, 0.1)\",\n    },\n  },\n  secondary: {},\n  ghost: {},\n});\n\nexport const getRadiusStyles = (radius: HvButtonRadius): CSSInterpolation => ({\n  borderRadius: theme.radii[radius],\n});\n\nexport const getSizeStyles = (size: HvButtonSize): CSSInterpolation => ({\n  height: theme.sizes[size],\n  paddingLeft: theme.space[size],\n  paddingRight: theme.space[size],\n  fontSize: theme.fontSizes[size],\n});\n\nexport const getOverrideColors = (): CSSInterpolation => ({\n  \"& svg .color0\": {\n    fill: \"currentcolor\",\n  },\n});\n"],"names":[],"mappings":";;;AASO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,UAAU;AAAA,IAEV,YAAY;AAAA,IAEZ,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAG;AAAA,MACH,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA;AAAA,IAGA,YAAY,MAAM,WAAW;AAAA,IAC7B,UAAU,MAAM,UAAU;AAAA,IAC1B,YAAY,MAAM,YAAY;AAAA,IAC9B,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,SAAS,MAAM,QAAQ,MAAM,IAAI;AAAA,EACnC;AAAA,EACA,WAAW;AAAA,IACT,YAAY,aAAa,MAAM,MAAM,EAAE;AAAA,EACzC;AAAA,EACA,SAAS;AAAA,IACP,aAAa,aAAa,MAAM,MAAM,EAAE;AAAA,EAC1C;AAAA,EACA,cAAc,CAAC;AAAA,EAEf,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,IACR,eAAe;AAAA,EACjB;AAAA,EAEA,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EAEA,SAAS;AAAA,IACP,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,4BAA4B;AAAA,MAC1B,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,EACF;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB;AAAA,IACjB,QAAQ;AAAA,EACV;AAAA,EACA,cAAc;AAAA,IACZ,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB;AAAA,IACjB,cAAc;AAAA,MACZ,iBAAiB;AAAA,IACnB;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB;AAAA,IACjB,QAAQ;AAAA,EACV;AAAA,EACA,gBAAgB;AAAA,IACd,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB;AAAA,IACjB,cAAc;AAAA,MACZ,iBAAiB;AAAA,IACnB;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB;AAAA,IACjB,4BAA4B;AAAA,MAC1B,iBAAiB;AAAA,IACnB;AAAA,IACA,cAAc;AAAA,MACZ,iBAAiB;AAAA,IACnB;AAAA,EACF;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,OAAO,CAAC;AACV,CAAC;AAEY,MAAA,kBAAkB,CAAC,YAA8C;AAAA,EAC5E,cAAc,MAAM,MAAM,MAAM;AAClC;AAEa,MAAA,gBAAgB,CAAC,UAA0C;AAAA,EACtE,QAAQ,MAAM,MAAM,IAAI;AAAA,EACxB,aAAa,MAAM,MAAM,IAAI;AAAA,EAC7B,cAAc,MAAM,MAAM,IAAI;AAAA,EAC9B,UAAU,MAAM,UAAU,IAAI;AAChC;AAEO,MAAM,oBAAoB,OAAyB;AAAA,EACxD,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF;"}

package/dist/esm/Button/types.mjs

@@ -0,0 +1,25 @@
+const buttonVariant = [
+  "primary",
+  "primarySubtle",
+  "primaryGhost",
+  "secondarySubtle",
+  "secondaryGhost",
+  "semantic",
+  // deprecated props
+  "secondary",
+  "ghost"
+];
+const buttonSize = ["xs", "sm", "md", "lg", "xl"];
+const buttonRadius = [
+  "none",
+  "base",
+  "round",
+  "circle",
+  "full"
+];
+export {
+  buttonRadius,
+  buttonSize,
+  buttonVariant
+};
+//# sourceMappingURL=types.mjs.map

package/dist/esm/Button/types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.mjs","sources":["../../../src/Button/types.ts"],"sourcesContent":["export const buttonVariant = [\n  \"primary\",\n  \"primarySubtle\",\n  \"primaryGhost\",\n  \"secondarySubtle\",\n  \"secondaryGhost\",\n  \"semantic\",\n  // deprecated props\n  \"secondary\",\n  \"ghost\",\n] as const;\nexport type HvButtonVariant = (typeof buttonVariant)[number];\n\nexport const buttonSize = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const;\nexport type HvButtonSize = (typeof buttonSize)[number];\n\nexport const buttonRadius = [\n  \"none\",\n  \"base\",\n  \"round\",\n  \"circle\",\n  \"full\",\n] as const;\nexport type HvButtonRadius = (typeof buttonRadius)[number];\n"],"names":[],"mappings":"AAAO,MAAM,gBAAgB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AACF;AAGO,MAAM,aAAa,CAAC,MAAM,MAAM,MAAM,MAAM,IAAI;AAGhD,MAAM,eAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}

package/dist/esm/Calendar/Calendar.mjs

@@ -0,0 +1,105 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useContext } from "react";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { setId } from "../utils/setId.mjs";
+import { isRange } from "./utils.mjs";
+import { useClasses } from "./Calendar.styles.mjs";
+import { staticClasses } from "./Calendar.styles.mjs";
+import { HvSingleCalendar } from "./SingleCalendar/SingleCalendar.mjs";
+import { HvFormElementContext } from "../Forms/FormElement/context/FormElementContext.mjs";
+import { HvFormElementValueContext } from "../Forms/FormElement/context/FormElementValueContext.mjs";
+const HvCalendar = (props) => {
+  const {
+    classes: classesProp,
+    id,
+    locale = "en-US",
+    value,
+    visibleMonth,
+    visibleYear,
+    rightVisibleMonth,
+    rightVisibleYear,
+    minimumDate,
+    maximumDate,
+    startAdornment,
+    onChange,
+    onInputChange,
+    onVisibleDateChange,
+    invalidDateLabel,
+    ...others
+  } = useDefaultProps("HvCalendar", props);
+  const { classes } = useClasses(classesProp);
+  const { elementId } = useContext(HvFormElementContext);
+  const elementValue = useContext(HvFormElementValueContext);
+  const localValue = value ?? elementValue;
+  const localId = id ?? setId(elementId, "single-calendar");
+  const rangeMode = isRange(localValue);
+  const rightCalendarId = setId(localId, "single-calendar-right");
+  const clampedMonth = visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;
+  const singleCalendar = /* @__PURE__ */ jsx(
+    HvSingleCalendar,
+    {
+      id: localId,
+      locale,
+      value: localValue,
+      visibleMonth: clampedMonth,
+      visibleYear,
+      minimumDate,
+      maximumDate,
+      onChange,
+      onInputChange: (evt, date) => onInputChange && onInputChange(evt, date, "left"),
+      onVisibleDateChange,
+      invalidDateLabel,
+      ...others
+    }
+  );
+  const rangeCalendar = /* @__PURE__ */ jsxs("div", { className: classes.rangeCalendarContainer, children: [
+    /* @__PURE__ */ jsx(
+      HvSingleCalendar,
+      {
+        className: classes.singleCalendar,
+        id: localId,
+        locale,
+        value: localValue,
+        visibleMonth: clampedMonth,
+        visibleYear,
+        minimumDate,
+        maximumDate,
+        onChange,
+        onInputChange: (evt, date) => onInputChange && onInputChange(evt, date, "left"),
+        onVisibleDateChange: (event, action, index) => onVisibleDateChange?.(event, action, index, "left"),
+        invalidDateLabel,
+        ...others
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      HvSingleCalendar,
+      {
+        className: classes.singleCalendar,
+        id: rightCalendarId,
+        locale,
+        value: localValue,
+        visibleMonth: rightVisibleMonth,
+        visibleYear: rightVisibleYear,
+        minimumDate,
+        maximumDate,
+        onChange,
+        onInputChange: (evt, date) => onInputChange && onInputChange(evt, date, "right"),
+        onVisibleDateChange: (event, action, index) => {
+          onVisibleDateChange?.(event, action, index, "right");
+        },
+        showEndDate: true,
+        invalidDateLabel,
+        ...others
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
+    startAdornment,
+    rangeMode ? rangeCalendar : singleCalendar
+  ] });
+};
+export {
+  HvCalendar,
+  staticClasses as calendarClasses
+};
+//# sourceMappingURL=Calendar.mjs.map

package/dist/esm/Calendar/Calendar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.mjs","sources":["../../../src/Calendar/Calendar.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { setId } from \"../utils/setId\";\nimport { HvFormElementContext, HvFormElementValueContext } from \"../Forms\";\n\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { isRange } from \"./utils\";\nimport { HvSingleCalendar } from \"./SingleCalendar\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"./types\";\n\nimport { staticClasses, useClasses } from \"./Calendar.styles\";\n\nexport { staticClasses as calendarClasses };\n\nexport type HvCalendarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCalendarProps {\n  /**\n   * Styles applied from the theme.\n   */\n  classes?: HvCalendarClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The calendar locale. If undefined, it defaults to en-US\n   *\n   */\n  locale?: string;\n  /**\n   * Date that the calendar would show.\n   * if using the object format the calendar enter in range mode showing two calendars\n   */\n  value?: DateRangeProp | Date;\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleMonth?: number;\n  /**\n   * Controls the visible year of the Calendar\n   */\n  visibleYear?: number;\n  /**\n   * Controls the visible month of the Calendar on the right side of the datepicker\n   */\n  rightVisibleMonth?: number;\n  /**\n   * Controls the visible year of the Calendar on the right side of the datepicker\n   */\n  rightVisibleYear?: number;\n  /**\n   * Callback function to be triggered when the selected date has changed.\n   */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    value: Date | DateRangeProp\n  ) => void;\n  /**\n   * Callback function to be triggered when the selected date input has changed.\n   */\n  onInputChange?: (\n    event:\n      | React.ChangeEvent<\n          HTMLTextAreaElement | HTMLInputElement | HTMLButtonElement\n        >\n      | undefined,\n    value: Date | DateRangeProp,\n    position: \"left\" | \"right\"\n  ) => void;\n  /**\n   * Callback function to be triggered when the user clicks on the month or year selector.\n   * it receives the action that was pressed:\n   * previous_month, next_month, previous_year, next_year,month\n   */\n  onVisibleDateChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    action: VisibilitySelectorActions,\n    value?: Date | DateRangeProp | number,\n    position?: \"left\" | \"right\"\n  ) => void;\n  /**\n   * The maximum selectable date after this all values are disabled.\n   */\n  maximumDate?: Date;\n  /**\n   * The minimum selectable date before this all values are disabled.\n   */\n  minimumDate?: Date;\n  /**\n   * An element placed before the Calendar\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Indicates if header should display the day of week.\n   */\n  showDayOfWeek?: boolean;\n  /**\n   * Label shown when date is invalid.\n   */\n  invalidDateLabel?: string;\n}\n\nexport const HvCalendar = (props: HvCalendarProps) => {\n  const {\n    classes: classesProp,\n    id,\n    locale = \"en-US\",\n    value,\n    visibleMonth,\n    visibleYear,\n    rightVisibleMonth,\n    rightVisibleYear,\n    minimumDate,\n    maximumDate,\n    startAdornment,\n    onChange,\n    onInputChange,\n    onVisibleDateChange,\n    invalidDateLabel,\n    ...others\n  } = useDefaultProps(\"HvCalendar\", props);\n  const { classes } = useClasses(classesProp);\n\n  const { elementId } = useContext(HvFormElementContext);\n  const elementValue = useContext(HvFormElementValueContext);\n  const localValue = value ?? elementValue;\n  const localId = id ?? setId(elementId, \"single-calendar\");\n  const rangeMode = isRange(localValue);\n  const rightCalendarId = setId(localId, \"single-calendar-right\");\n  const clampedMonth =\n    visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;\n\n  const singleCalendar = (\n    <HvSingleCalendar\n      id={localId}\n      locale={locale}\n      value={localValue}\n      visibleMonth={clampedMonth}\n      visibleYear={visibleYear}\n      minimumDate={minimumDate}\n      maximumDate={maximumDate}\n      onChange={onChange}\n      onInputChange={(evt, date) =>\n        onInputChange && onInputChange(evt, date, \"left\")\n      }\n      onVisibleDateChange={onVisibleDateChange}\n      invalidDateLabel={invalidDateLabel}\n      {...others}\n    />\n  );\n\n  const rangeCalendar = (\n    <div className={classes.rangeCalendarContainer}>\n      <HvSingleCalendar\n        className={classes.singleCalendar}\n        id={localId}\n        locale={locale}\n        value={localValue}\n        visibleMonth={clampedMonth}\n        visibleYear={visibleYear}\n        minimumDate={minimumDate}\n        maximumDate={maximumDate}\n        onChange={onChange}\n        onInputChange={(evt, date) =>\n          onInputChange && onInputChange(evt, date, \"left\")\n        }\n        onVisibleDateChange={(event, action, index) =>\n          onVisibleDateChange?.(event, action, index, \"left\")\n        }\n        invalidDateLabel={invalidDateLabel}\n        {...others}\n      />\n\n      <HvSingleCalendar\n        className={classes.singleCalendar}\n        id={rightCalendarId}\n        locale={locale}\n        value={localValue}\n        visibleMonth={rightVisibleMonth}\n        visibleYear={rightVisibleYear}\n        minimumDate={minimumDate}\n        maximumDate={maximumDate}\n        onChange={onChange}\n        onInputChange={(evt, date) =>\n          onInputChange && onInputChange(evt, date, \"right\")\n        }\n        onVisibleDateChange={(event, action, index) => {\n          onVisibleDateChange?.(event, action, index, \"right\");\n        }}\n        showEndDate\n        invalidDateLabel={invalidDateLabel}\n        {...others}\n      />\n    </div>\n  );\n\n  return (\n    <div className={classes.root}>\n      {startAdornment}\n      {rangeMode ? rangeCalendar : singleCalendar}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA8Ga,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,EAAE,UAAA,IAAc,WAAW,oBAAoB;AAC/C,QAAA,eAAe,WAAW,yBAAyB;AACzD,QAAM,aAAa,SAAS;AAC5B,QAAM,UAAU,MAAM,MAAM,WAAW,iBAAiB;AAClD,QAAA,YAAY,QAAQ,UAAU;AAC9B,QAAA,kBAAkB,MAAM,SAAS,uBAAuB;AAC9D,QAAM,eACJ,gBAAgB,eAAe,KAAK,IAAI,eAAe,KAAK;AAE9D,QAAM,iBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe,CAAC,KAAK,SACnB,iBAAiB,cAAc,KAAK,MAAM,MAAM;AAAA,MAElD;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAIR,QAAM,gBACJ,qBAAC,OAAI,EAAA,WAAW,QAAQ,wBACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,IAAI;AAAA,QACJ;AAAA,QACA,OAAO;AAAA,QACP,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,CAAC,KAAK,SACnB,iBAAiB,cAAc,KAAK,MAAM,MAAM;AAAA,QAElD,qBAAqB,CAAC,OAAO,QAAQ,UACnC,sBAAsB,OAAO,QAAQ,OAAO,MAAM;AAAA,QAEpD;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,IAAI;AAAA,QACJ;AAAA,QACA,OAAO;AAAA,QACP,cAAc;AAAA,QACd,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,CAAC,KAAK,SACnB,iBAAiB,cAAc,KAAK,MAAM,OAAO;AAAA,QAEnD,qBAAqB,CAAC,OAAO,QAAQ,UAAU;AACvB,gCAAA,OAAO,QAAQ,OAAO,OAAO;AAAA,QACrD;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EACF,EAAA,CAAA;AAGF,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,MACrB,UAAA;AAAA,IAAA;AAAA,IACA,YAAY,gBAAgB;AAAA,EAC/B,EAAA,CAAA;AAEJ;"}

package/dist/esm/Calendar/Calendar.styles.mjs

@@ -0,0 +1,35 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.mjs";
+const { staticClasses, useClasses } = createClasses("HvCalendar", {
+  root: {
+    display: "flex",
+    justifyContent: "center"
+  },
+  rangeCalendarContainer: {
+    display: "flex"
+  },
+  singleCalendar: {
+    "&:hover": {
+      "& ~ $singleCalendar": {
+        // target the next calendar when the former is hovered
+        "& > div": {
+          "& > div:nth-of-type(3)": {
+            "& > div": {
+              "& > div[data-calendar-cell='calendarCell']": {
+                backgroundColor: theme.colors.atmo1
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  focusSelection: {},
+  calendarMonthlyCell: {},
+  calendarMonthlyCellSelected: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Calendar.styles.mjs.map

package/dist/esm/Calendar/Calendar.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.styles.mjs","sources":["../../../src/Calendar/Calendar.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendar\", {\n  root: {\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n  rangeCalendarContainer: {\n    display: \"flex\",\n  },\n  singleCalendar: {\n    \"&:hover\": {\n      \"& ~ $singleCalendar\": {\n        // target the next calendar when the former is hovered\n        \"& > div\": {\n          \"& > div:nth-of-type(3)\": {\n            \"& > div\": {\n              \"& > div[data-calendar-cell='calendarCell']\": {\n                backgroundColor: theme.colors.atmo1,\n              },\n            },\n          },\n        },\n      },\n    },\n  },\n  focusSelection: {},\n  calendarMonthlyCell: {},\n  calendarMonthlyCellSelected: {},\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,gBAAgB;AAAA,EAClB;AAAA,EACA,wBAAwB;AAAA,IACtB,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB;AAAA,IACd,WAAW;AAAA,MACT,uBAAuB;AAAA;AAAA,QAErB,WAAW;AAAA,UACT,0BAA0B;AAAA,YACxB,WAAW;AAAA,cACT,8CAA8C;AAAA,gBAC5C,iBAAiB,MAAM,OAAO;AAAA,cAChC;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA,gBAAgB,CAAC;AAAA,EACjB,qBAAqB,CAAC;AAAA,EACtB,6BAA6B,CAAC;AAChC,CAAC;"}

package/dist/esm/Calendar/CalendarHeader/CalendarHeader.mjs

@@ -0,0 +1,150 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useContext, useState, useEffect } from "react";
+import dayjs from "dayjs";
+import localeData from "dayjs/plugin/localeData";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import { isKey } from "../../utils/keyboardUtils.mjs";
+import { setId } from "../../utils/setId.mjs";
+import { useDefaultProps } from "../../hooks/useDefaultProps.mjs";
+import { isRange, isDate, formatToLocale, isSameDay } from "../utils.mjs";
+import { useClasses } from "./CalendarHeader.styles.mjs";
+import { staticClasses } from "./CalendarHeader.styles.mjs";
+import { HvFormElementValueContext } from "../../Forms/FormElement/context/FormElementValueContext.mjs";
+import { HvInput } from "../../Input/Input.mjs";
+import { HvFormElementContext } from "../../Forms/FormElement/context/FormElementContext.mjs";
+import { HvFormElementDescriptorsContext } from "../../Forms/FormElement/context/FormElementDescriptorsContext.mjs";
+import { HvTypography } from "../../Typography/Typography.mjs";
+dayjs.extend(localeData);
+dayjs.extend(localizedFormat);
+dayjs.extend(customParseFormat);
+const HvCalendarHeader = (props) => {
+  const {
+    id,
+    value,
+    locale = "en-US",
+    classes: classesProp,
+    onChange,
+    showEndDate,
+    showDayOfWeek = false,
+    onFocus,
+    invalidDateLabel = "Invalid Date"
+  } = useDefaultProps("HvCalendarHeader", props);
+  const { classes, cx } = useClasses(classesProp);
+  const { elementId } = useContext(HvFormElementContext);
+  const elementValue = useContext(HvFormElementValueContext);
+  const { label } = useContext(HvFormElementDescriptorsContext);
+  let localValue = value ?? elementValue ?? "";
+  if (isRange(localValue)) {
+    localValue = showEndDate ? localValue.endDate : localValue.startDate;
+  }
+  const [dateValue, setDateValue] = useState(localValue);
+  const [editedValue, setEditedValue] = useState(null);
+  const [displayValue, setDisplayValue] = useState("");
+  const [weekdayDisplay, setWeekdayDisplay] = useState("");
+  const localId = id ?? setId(elementId, "calendarHeader");
+  const inputValue = editedValue ?? displayValue;
+  const localeFormat = dayjs().locale(locale).localeData().longDateFormat("L");
+  const [isValidValue, setIsValidValue] = useState(
+    inputValue.length === 0 || !!inputValue && dayjs(localValue).isValid()
+  );
+  const validateInput = (incomingValid) => incomingValid === void 0 || dayjs(incomingValid).isValid();
+  useEffect(() => {
+    const valid = validateInput(localValue);
+    setIsValidValue(valid);
+    if (valid) {
+      if (!localValue) {
+        setDisplayValue("");
+        setEditedValue(null);
+        setWeekdayDisplay("");
+        return;
+      }
+      const weekday = new Intl.DateTimeFormat(locale, {
+        weekday: "short"
+      }).format(isDate(localValue) ? localValue : 0);
+      setDisplayValue(formatToLocale(localValue, locale));
+      setEditedValue(null);
+      setWeekdayDisplay(weekday);
+    }
+  }, [localValue, locale]);
+  const handleNewDate = (event, date) => {
+    const localeParsedDate = dayjs(date, localeFormat);
+    const isValidInput = localeParsedDate.isValid();
+    const dateParsed = isValidInput ? localeParsedDate.toDate() : dayjs(date).toDate();
+    if (!isSameDay(dateParsed, dateValue)) {
+      setDateValue(dateParsed);
+      onChange?.(event, dateParsed);
+    }
+    setIsValidValue(isValidInput);
+    if (isValidInput) {
+      setEditedValue(null);
+    }
+  };
+  const onBlurHandler = (event) => {
+    if (editedValue == null)
+      return;
+    if (editedValue === "") {
+      setIsValidValue(true);
+      setEditedValue(null);
+      return;
+    }
+    handleNewDate(event, editedValue);
+  };
+  const keyDownHandler = (event) => {
+    if (!isKey(event, "Enter") || editedValue == null || editedValue === "")
+      return;
+    event.preventDefault();
+    handleNewDate(event, editedValue);
+  };
+  const onFocusHandler = (event) => {
+    if (!localValue)
+      return;
+    const formattedDate = isValidValue && isDate(localValue) ? dayjs(localValue).locale(locale).format("L") : editedValue;
+    setEditedValue(formattedDate);
+    onFocus?.(event, formattedDate);
+  };
+  const onChangeHandler = (event, val) => {
+    setEditedValue(val);
+  };
+  const isInvalid = !isValidValue && inputValue !== "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: localId,
+      className: cx(classes.root, {
+        [classes.invalid]: isInvalid
+      }),
+      children: [
+        showDayOfWeek && /* @__PURE__ */ jsx(HvTypography, { className: classes.headerDayOfWeek, children: weekdayDisplay || " " }),
+        /* @__PURE__ */ jsx(
+          HvInput,
+          {
+            type: "text",
+            id: setId(localId, "header-input"),
+            className: classes.headerDate,
+            classes: {
+              input: classes.input,
+              inputBorderContainer: classes.inputBorderContainer,
+              error: classes.invalidMessageStyling
+            },
+            placeholder: localeFormat,
+            value: inputValue,
+            "aria-labelledby": label?.[0]?.id,
+            onBlur: onBlurHandler,
+            onFocus: onFocusHandler,
+            onChange: onChangeHandler,
+            onKeyDown: keyDownHandler,
+            status: isInvalid ? "invalid" : "valid",
+            statusMessage: invalidDateLabel
+          }
+        )
+      ]
+    }
+  );
+};
+HvCalendarHeader.formElementType = "HvCalendarHeader";
+export {
+  HvCalendarHeader,
+  staticClasses as calendarHeaderClasses
+};
+//# sourceMappingURL=CalendarHeader.mjs.map