@hitachivantara/uikit-react-core 5.41.0 → 5.42.0

package/dist/esm/Carousel/CarouselControls.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselControls.mjs","sources":["../../../src/Carousel/CarouselControls.tsx"],"sourcesContent":["import { MouseEventHandler, ReactNode } from \"react\";\n\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvButton } from \"../Button\";\nimport { HvPaginationProps } from \"../Pagination\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useClasses } from \"./Carousel.styles\";\n\ninterface HvCarouselControlsProps\n  extends HvBaseProps<HTMLDivElement>,\n    Pick<HvPaginationProps, \"page\" | \"pages\" | \"canPrevious\" | \"canNext\"> {\n  showDots?: boolean;\n  classes?: ExtractNames<typeof useClasses>;\n  actions?: ReactNode;\n  onPreviousClick?: MouseEventHandler<HTMLButtonElement>;\n  onNextClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const HvCarouselControls = (props: HvCarouselControlsProps) => {\n  const {\n    classes: classesProp,\n    className,\n    showDots,\n    page,\n    pages,\n    canPrevious,\n    canNext,\n    actions,\n    onPreviousClick,\n    onNextClick,\n  } = useDefaultProps(\"HvCarouselControls\", props);\n  const { classes, cx } = useClasses(classesProp, false);\n\n  const selectedIndex = page || 0;\n  const numSlides = pages;\n\n  return (\n    <div className={cx(classes.controls, className)}>\n      {showDots ? (\n        <div className={classes.dots}>\n          {Array.from(Array(numSlides)).map((el, index) => (\n            <span\n              key={`circle-${index}`}\n              className={cx(classes.dot, {\n                [classes.dotSelected]: index === selectedIndex,\n              })}\n            />\n          ))}\n        </div>\n      ) : (\n        <>\n          <HvButton\n            icon\n            disabled={!canPrevious}\n            aria-label=\"Backwards\"\n            onClick={onPreviousClick}\n          >\n            <Backwards iconSize=\"XS\" />\n          </HvButton>\n          <div className={classes.pageCounter}>\n            {`${selectedIndex + 1} / ${numSlides}`}\n          </div>\n          <HvButton\n            icon\n            disabled={!canNext}\n            aria-label=\"Forwards\"\n            onClick={onNextClick}\n          >\n            <Forwards iconSize=\"XS\" />\n          </HvButton>\n        </>\n      )}\n      {actions}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAuBa,MAAA,qBAAqB,CAAC,UAAmC;AAC9D,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,sBAAsB,KAAK;AAC/C,QAAM,EAAE,SAAS,GAAA,IAAO,WAAW,aAAa,KAAK;AAErD,QAAM,gBAAgB,QAAQ;AAC9B,QAAM,YAAY;AAElB,8BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,UAAU,SAAS,GAC3C,UAAA;AAAA,IAAA,WACE,oBAAA,OAAA,EAAI,WAAW,QAAQ,MACrB,UAAM,MAAA,KAAK,MAAM,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,UACrC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,GAAG,QAAQ,KAAK;AAAA,UACzB,CAAC,QAAQ,WAAW,GAAG,UAAU;AAAA,QAAA,CAClC;AAAA,MAAA;AAAA,MAHI,UAAU,KAAK;AAAA,IAKvB,CAAA,EACH,CAAA,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ,UAAU,CAAC;AAAA,UACX,cAAW;AAAA,UACX,SAAS;AAAA,UAET,UAAA,oBAAC,WAAU,EAAA,UAAS,KAAK,CAAA;AAAA,QAAA;AAAA,MAC3B;AAAA,MACA,oBAAC,OAAI,EAAA,WAAW,QAAQ,aACrB,aAAG,gBAAgB,CAAC,MAAM,SAAS,GACtC,CAAA;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ,UAAU,CAAC;AAAA,UACX,cAAW;AAAA,UACX,SAAS;AAAA,UAET,UAAA,oBAAC,UAAS,EAAA,UAAS,KAAK,CAAA;AAAA,QAAA;AAAA,MAC1B;AAAA,IAAA,GACF;AAAA,IAED;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/esm/Carousel/CarouselSlide/CarouselSlide.mjs

@@ -0,0 +1,28 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useClasses } from "./CarouselSlide.styles.mjs";
+const HvCarouselSlide = ({
+  classes: classesProp,
+  className,
+  children,
+  size: flexBasis = "100%",
+  src,
+  alt,
+  ...props
+}) => {
+  const { classes, css, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        css({ flex: `0 0 ${flexBasis}` }),
+        classes.slide,
+        className
+      ),
+      children: children ?? /* @__PURE__ */ jsx("img", { className: classes.image, src, alt, ...props })
+    }
+  );
+};
+export {
+  HvCarouselSlide
+};
+//# sourceMappingURL=CarouselSlide.mjs.map

package/dist/esm/Carousel/CarouselSlide/CarouselSlide.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselSlide.mjs","sources":["../../../../src/Carousel/CarouselSlide/CarouselSlide.tsx"],"sourcesContent":["import { ImgHTMLAttributes } from \"react\";\n\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { useClasses } from \"./CarouselSlide.styles\";\n\nexport type HvCarouselSlideClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselSlideProps\n  extends ImgHTMLAttributes<HTMLImageElement> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselSlideClasses;\n  /** The width of the Slide. Defaults to `100%` */\n  size?: string;\n  /** Content of a slide to be displayed */\n  children?: React.ReactNode;\n}\n\n/**\n * A container to use as `children` of `HvCarousel`.\n * Pass `img` props directly to it, or `children` for any custom content\n */\nexport const HvCarouselSlide = ({\n  classes: classesProp,\n  className,\n  children,\n  size: flexBasis = \"100%\",\n  src,\n  alt,\n  ...props\n}: HvCarouselSlideProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n  return (\n    <div\n      className={cx(\n        css({ flex: `0 0 ${flexBasis}` }),\n        classes.slide,\n        className\n      )}\n    >\n      {children ?? (\n        <img className={classes.image} src={src} alt={alt} {...props} />\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;AAsBO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,MAAM,YAAY;AAAA,EAClB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4B;AAC1B,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAEjD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,IAAI,EAAE,MAAM,OAAO,SAAS,IAAI;AAAA,QAChC,QAAQ;AAAA,QACR;AAAA,MACF;AAAA,MAEC,UAAA,gCACE,OAAI,EAAA,WAAW,QAAQ,OAAO,KAAU,KAAW,GAAG,MAAO,CAAA;AAAA,IAAA;AAAA,EAAA;AAItE;"}

package/dist/esm/Carousel/CarouselSlide/CarouselSlide.styles.mjs

@@ -0,0 +1,14 @@
+import { createClasses } from "../../utils/classes.mjs";
+const { staticClasses, useClasses } = createClasses("HvCarouselSlide", {
+  slide: {},
+  image: {
+    aspectRatio: "16/9",
+    width: "100%",
+    height: "100%"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=CarouselSlide.styles.mjs.map

package/dist/esm/Carousel/CarouselSlide/CarouselSlide.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselSlide.styles.mjs","sources":["../../../../src/Carousel/CarouselSlide/CarouselSlide.styles.ts"],"sourcesContent":["import { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCarouselSlide\", {\n  slide: {},\n  image: {\n    aspectRatio: \"16/9\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,OAAO,CAAC;AAAA,EACR,OAAO;AAAA,IACL,aAAa;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AACF,CAAC;"}

package/dist/esm/Carousel/CarouselThumbnails.mjs

@@ -0,0 +1,40 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { useClasses } from "./Carousel.styles.mjs";
+import { HvStack } from "../Stack/Stack.mjs";
+import { HvButton } from "../Button/Button.mjs";
+const HvCarouselThumbnails = forwardRef((props, ref) => {
+  const {
+    classes: classesProp,
+    className,
+    page,
+    pages,
+    width,
+    renderThumbnail,
+    onThumbnailClick,
+    thumbnailProps,
+    ...others
+  } = props;
+  const { classes, cx } = useClasses(classesProp);
+  const selectedIndex = page || 0;
+  const numSlides = pages;
+  return /* @__PURE__ */ jsx("div", { ref, className: cx(classes.panel, className), ...others, children: /* @__PURE__ */ jsx(HvStack, { direction: "row", spacing: "xs", children: Array.from(Array(numSlides)).map((doc, i) => /* @__PURE__ */ jsx(
+    HvButton,
+    {
+      icon: true,
+      style: { width },
+      variant: "secondaryGhost",
+      className: cx(classes.thumbnail, {
+        [classes.thumbnailSelected]: i === selectedIndex
+      }),
+      onClick: (event) => onThumbnailClick?.(event, i),
+      ...thumbnailProps,
+      children: renderThumbnail?.(i)
+    },
+    `thumbnail-${i}`
+  )) }) });
+});
+export {
+  HvCarouselThumbnails
+};
+//# sourceMappingURL=CarouselThumbnails.mjs.map

package/dist/esm/Carousel/CarouselThumbnails.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselThumbnails.mjs","sources":["../../../src/Carousel/CarouselThumbnails.tsx"],"sourcesContent":["import { CSSProperties, MouseEvent, forwardRef } from \"react\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvPaginationProps } from \"../Pagination\";\nimport { HvStack } from \"../Stack\";\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useClasses } from \"./Carousel.styles\";\n\ninterface HvCarouselThumbnailsProps\n  extends HvBaseProps<HTMLDivElement, \"children\">,\n    Pick<HvPaginationProps, \"page\" | \"pages\" | \"canPrevious\" | \"canNext\"> {\n  width?: CSSProperties[\"width\"];\n  classes?: ExtractNames<typeof useClasses>;\n  onThumbnailClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    index: number\n  ) => void;\n  thumbnailProps?: Partial<HvButtonProps>;\n  showDots?: boolean;\n  renderThumbnail?: (index: number) => React.ReactNode;\n}\n\nexport const HvCarouselThumbnails = forwardRef<\n  HTMLDivElement,\n  HvCarouselThumbnailsProps\n>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    page,\n    pages,\n    width,\n    renderThumbnail,\n    onThumbnailClick,\n    thumbnailProps,\n    ...others\n  } = props;\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectedIndex = page || 0;\n  const numSlides = pages;\n\n  return (\n    <div ref={ref} className={cx(classes.panel, className)} {...others}>\n      <HvStack direction=\"row\" spacing=\"xs\">\n        {Array.from(Array(numSlides)).map((doc, i) => (\n          <HvButton\n            icon\n            key={`thumbnail-${i}`}\n            style={{ width }}\n            variant=\"secondaryGhost\"\n            className={cx(classes.thumbnail, {\n              [classes.thumbnailSelected]: i === selectedIndex,\n            })}\n            onClick={(event) => onThumbnailClick?.(event, i)}\n            {...thumbnailProps}\n          >\n            {renderThumbnail?.(i)}\n          </HvButton>\n        ))}\n      </HvStack>\n    </div>\n  );\n});\n"],"names":[],"mappings":";;;;;AAwBO,MAAM,uBAAuB,WAGlC,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AACJ,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,gBAAgB,QAAQ;AAC9B,QAAM,YAAY;AAGhB,SAAA,oBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,OAAO,SAAS,GAAI,GAAG,QAC1D,UAAC,oBAAA,SAAA,EAAQ,WAAU,OAAM,SAAQ,MAC9B,UAAA,MAAM,KAAK,MAAM,SAAS,CAAC,EAAE,IAAI,CAAC,KAAK,MACtC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAI;AAAA,MAEJ,OAAO,EAAE,MAAM;AAAA,MACf,SAAQ;AAAA,MACR,WAAW,GAAG,QAAQ,WAAW;AAAA,QAC/B,CAAC,QAAQ,iBAAiB,GAAG,MAAM;AAAA,MAAA,CACpC;AAAA,MACD,SAAS,CAAC,UAAU,mBAAmB,OAAO,CAAC;AAAA,MAC9C,GAAG;AAAA,MAEH,4BAAkB,CAAC;AAAA,IAAA;AAAA,IATf,aAAa,CAAC;AAAA,EAAA,CAWtB,GACH,EACF,CAAA;AAEJ,CAAC;"}

package/dist/esm/CheckBox/CheckBox.mjs

@@ -0,0 +1,182 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, useState, useCallback } from "react";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { useUniqueId } from "../hooks/useUniqueId.mjs";
+import { useControlled } from "../hooks/useControlled.mjs";
+import { setId } from "../utils/setId.mjs";
+import { useClasses } from "./CheckBox.styles.mjs";
+import { staticClasses } from "./CheckBox.styles.mjs";
+import { isInvalid } from "../Forms/FormElement/validationStates.mjs";
+import { HvBaseCheckBox } from "../BaseCheckBox/BaseCheckBox.mjs";
+import { HvFormElement } from "../Forms/FormElement/FormElement.mjs";
+import { HvLabel } from "../Forms/Label/Label.mjs";
+import { HvWarningText } from "../Forms/WarningText/WarningText.mjs";
+const HvCheckBox = forwardRef(
+  (props, ref) => {
+    const {
+      id,
+      classes: classesProp,
+      className,
+      name,
+      checked,
+      status,
+      indeterminate,
+      statusMessage,
+      label,
+      labelProps,
+      inputProps,
+      value = "on",
+      required = false,
+      readOnly = false,
+      disabled = false,
+      semantic = false,
+      defaultChecked = false,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-errormessage": ariaErrorMessage,
+      onChange,
+      onFocusVisible,
+      onBlur,
+      ...others
+    } = useDefaultProps("HvCheckBox", props);
+    const { classes, cx } = useClasses(classesProp);
+    const elementId = useUniqueId(id, "hvcheckbox");
+    const [focusVisible, setFocusVisible] = useState(false);
+    const [validationState, setValidationState] = useControlled(
+      status,
+      "standBy"
+    );
+    const [validationMessage] = useControlled(statusMessage, "Required");
+    const [isChecked, setIsChecked] = useControlled(
+      checked,
+      Boolean(defaultChecked)
+    );
+    const [isIndeterminate, setIsIndeterminate] = useControlled(
+      checked !== void 0 ? indeterminate : void 0,
+      Boolean(indeterminate)
+    );
+    const isStateInvalid = isInvalid(validationState);
+    const onChangeCallback = useCallback(
+      (event, newChecked) => {
+        setIsChecked(() => {
+          setIsIndeterminate(false);
+          if (required && !newChecked) {
+            setValidationState("invalid");
+          } else {
+            setValidationState("valid");
+          }
+          return newChecked;
+        });
+        onChange?.(event, newChecked, value);
+      },
+      [
+        onChange,
+        required,
+        setIsChecked,
+        setIsIndeterminate,
+        setValidationState,
+        value
+      ]
+    );
+    const onFocusVisibleCallback = (event) => {
+      setFocusVisible(true);
+      onFocusVisible?.(event);
+    };
+    const onBlurCallback = (event) => {
+      setFocusVisible(false);
+      onBlur?.(event);
+    };
+    const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
+    const hasLabel = label != null;
+    let errorMessageId;
+    if (isStateInvalid) {
+      errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
+    }
+    const checkbox = /* @__PURE__ */ jsx(
+      HvBaseCheckBox,
+      {
+        ref,
+        id: hasLabel ? setId(elementId, "input") : setId(id, "input"),
+        name,
+        className: cx(classes.checkbox, {
+          [classes.invalidCheckbox]: isStateInvalid
+        }),
+        disabled,
+        readOnly,
+        required,
+        onChange: onChangeCallback,
+        value,
+        checked: isChecked,
+        indeterminate: isIndeterminate,
+        semantic,
+        inputProps: {
+          "aria-invalid": isStateInvalid ? true : void 0,
+          "aria-errormessage": errorMessageId,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": ariaDescribedBy,
+          ...inputProps
+        },
+        onFocusVisible: onFocusVisibleCallback,
+        onBlur: onBlurCallback,
+        ...others
+      }
+    );
+    return /* @__PURE__ */ jsxs(
+      HvFormElement,
+      {
+        id,
+        name,
+        status: validationState,
+        disabled,
+        required,
+        readOnly,
+        className: cx(
+          classes.root,
+          { [classes.focusVisible]: !!(focusVisible && label) },
+          className
+        ),
+        children: [
+          hasLabel ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cx(classes.container, {
+                [classes.disabled]: disabled,
+                [classes.invalidContainer]: isStateInvalid
+              }),
+              children: [
+                checkbox,
+                /* @__PURE__ */ jsx(
+                  HvLabel,
+                  {
+                    id: setId(elementId, "label"),
+                    htmlFor: setId(elementId, "input"),
+                    label,
+                    className: classes.label,
+                    ...labelProps
+                  }
+                )
+              ]
+            }
+          ) : checkbox,
+          canShowError && /* @__PURE__ */ jsx(
+            HvWarningText,
+            {
+              id: setId(elementId, "error"),
+              disableAdornment: !hasLabel,
+              hideText: !hasLabel,
+              disableBorder: true,
+              children: validationMessage
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  HvCheckBox,
+  staticClasses as checkBoxClasses
+};
+//# sourceMappingURL=CheckBox.mjs.map

package/dist/esm/CheckBox/CheckBox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckBox.mjs","sources":["../../../src/CheckBox/CheckBox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { setId } from \"../utils/setId\";\nimport { HvBaseCheckBox, HvBaseCheckBoxProps } from \"../BaseCheckBox\";\nimport {\n  HvLabelProps,\n  HvFormStatus,\n  HvWarningText,\n  isInvalid,\n  HvFormElement,\n  HvLabel,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./CheckBox.styles\";\n\nexport { staticClasses as checkBoxClasses };\n\nexport type HvCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxProps extends Omit<HvBaseCheckBoxProps, \"classes\"> {\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvCheckBoxClasses;\n}\n\n/**\n * A Checkbox is a mechanism that allows the user to select one or more options.\n *\n * Usually used in a Checkbox Group to present the user with a range of options from\n * which the user <b>may select any number of options</b> to complete their task.\n *\n * It can also be used individually to represent the toggle of a single option, when\n * the Toggle Switch and Toggle Button aren't more appropriate.\n */\nexport const HvCheckBox = forwardRef<HTMLButtonElement, HvCheckBoxProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      name,\n      checked,\n      status,\n      indeterminate,\n      statusMessage,\n      label,\n      labelProps,\n      inputProps,\n      value = \"on\",\n      required = false,\n      readOnly = false,\n      disabled = false,\n      semantic = false,\n      defaultChecked = false,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": ariaErrorMessage,\n      onChange,\n      onFocusVisible,\n      onBlur,\n      ...others\n    } = useDefaultProps(\"HvCheckBox\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id, \"hvcheckbox\");\n\n    const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\"\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const [isChecked, setIsChecked] = useControlled(\n      checked,\n      Boolean(defaultChecked)\n    );\n\n    const [isIndeterminate, setIsIndeterminate] = useControlled(\n      checked !== undefined ? indeterminate : undefined,\n      Boolean(indeterminate)\n    );\n\n    const isStateInvalid = isInvalid(validationState);\n\n    const onChangeCallback = useCallback<\n      NonNullable<HvBaseCheckBoxProps[\"onChange\"]>\n    >(\n      (event, newChecked) => {\n        setIsChecked(() => {\n          // This will only run if uncontrolled\n          setIsIndeterminate(false);\n\n          if (required && !newChecked) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newChecked;\n        });\n\n        onChange?.(event, newChecked, value);\n      },\n      [\n        onChange,\n        required,\n        setIsChecked,\n        setIsIndeterminate,\n        setValidationState,\n        value,\n      ]\n    );\n\n    const onFocusVisibleCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    };\n\n    const onBlurCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n      setFocusVisible(false);\n      onBlur?.(event);\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 hasLabel = label != null;\n\n    let errorMessageId;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    const checkbox = (\n      <HvBaseCheckBox\n        ref={ref}\n        id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n        name={name}\n        className={cx(classes.checkbox, {\n          [classes.invalidCheckbox]: isStateInvalid,\n        })}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        onChange={onChangeCallback}\n        value={value}\n        checked={isChecked}\n        indeterminate={isIndeterminate}\n        semantic={semantic}\n        inputProps={{\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-describedby\": ariaDescribedBy,\n          ...inputProps,\n        }}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(\n          classes.root,\n          { [classes.focusVisible]: !!(focusVisible && label) },\n          className\n        )}\n      >\n        {hasLabel ? (\n          <div\n            className={cx(classes.container, {\n              [classes.disabled]: disabled,\n              [classes.invalidContainer]: isStateInvalid,\n            })}\n          >\n            {checkbox}\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n              className={classes.label}\n              {...labelProps}\n            />\n          </div>\n        ) : (\n          checkbox\n        )}\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableAdornment={!hasLabel}\n            hideText={!hasLabel}\n            disableBorder\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":[],"mappings":"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"}

package/dist/esm/CheckBox/CheckBox.styles.mjs

@@ -0,0 +1,60 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { outlineStyles } from "../utils/focusUtils.mjs";
+import { createClasses } from "../utils/classes.mjs";
+const { staticClasses, useClasses } = createClasses("HvCheckBox", {
+  root: { display: "inline-block" },
+  container: {
+    cursor: "pointer",
+    display: "flex",
+    height: "32px",
+    transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+    "&:hover": {
+      backgroundColor: theme.colors.containerBackgroundHover,
+      borderRadius: theme.radii.base
+    }
+  },
+  disabled: {
+    cursor: "not-allowed",
+    "& $label": { color: theme.colors.secondary_60, cursor: "not-allowed" }
+  },
+  focusVisible: {
+    ...outlineStyles,
+    "& div": {
+      backgroundColor: theme.colors.atmo3
+    },
+    [`& $checkbox div > svg`]: {
+      outline: "none",
+      boxShadow: "none"
+    }
+  },
+  invalidContainer: {
+    borderBottom: `1px solid ${theme.colors.negative}`,
+    "&:hover": {
+      borderBottomLeftRadius: "0px",
+      borderBottomRightRadius: "0px"
+    }
+  },
+  checkbox: { height: "32px" },
+  invalidCheckbox: {
+    borderBottom: `1px solid ${theme.colors.negative}`,
+    borderBottomLeftRadius: "0px",
+    borderBottomRightRadius: "0px"
+  },
+  label: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    verticalAlign: "middle",
+    paddingRight: theme.space.xs,
+    whiteSpace: "nowrap",
+    ...theme.typography.body,
+    cursor: "pointer",
+    height: "32px",
+    lineHeight: "32px",
+    width: "100%"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=CheckBox.styles.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckBox.styles.mjs","sources":["../../../src/CheckBox/CheckBox.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCheckBox\", {\n  root: { display: \"inline-block\" },\n  container: {\n    cursor: \"pointer\",\n    display: \"flex\",\n    height: \"32px\",\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n    },\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n  },\n  focusVisible: {\n    ...outlineStyles,\n\n    \"& div\": {\n      backgroundColor: theme.colors.atmo3,\n    },\n\n    [`& $checkbox div > svg`]: {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  invalidContainer: {\n    borderBottom: `1px solid ${theme.colors.negative}`,\n\n    \"&:hover\": {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    },\n  },\n  checkbox: { height: \"32px\" },\n  invalidCheckbox: {\n    borderBottom: `1px solid ${theme.colors.negative}`,\n    borderBottomLeftRadius: \"0px\",\n    borderBottomRightRadius: \"0px\",\n  },\n  label: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    verticalAlign: \"middle\",\n    paddingRight: theme.space.xs,\n    whiteSpace: \"nowrap\",\n    ...theme.typography.body,\n    cursor: \"pointer\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    width: \"100%\",\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM,EAAE,SAAS,eAAe;AAAA,EAChC,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IAEZ,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,YAAY,EAAE,OAAO,MAAM,OAAO,cAAc,QAAQ,cAAc;AAAA,EACxE;AAAA,EACA,cAAc;AAAA,IACZ,GAAG;AAAA,IAEH,SAAS;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IAEA,CAAC,uBAAuB,GAAG;AAAA,MACzB,SAAS;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB,cAAc,aAAa,MAAM,OAAO,QAAQ;AAAA,IAEhD,WAAW;AAAA,MACT,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAC3B;AAAA,EACF;AAAA,EACA,UAAU,EAAE,QAAQ,OAAO;AAAA,EAC3B,iBAAiB;AAAA,IACf,cAAc,aAAa,MAAM,OAAO,QAAQ;AAAA,IAChD,wBAAwB;AAAA,IACxB,yBAAyB;AAAA,EAC3B;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,cAAc;AAAA,IACd,eAAe;AAAA,IACf,cAAc,MAAM,MAAM;AAAA,IAC1B,YAAY;AAAA,IACZ,GAAG,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AACF,CAAC;"}

package/dist/esm/CheckBoxGroup/CheckBoxGroup.mjs

@@ -0,0 +1,249 @@
+import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useRef, useMemo, Children, useCallback, cloneElement } from "react";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { useUniqueId } from "../hooks/useUniqueId.mjs";
+import { useControlled } from "../hooks/useControlled.mjs";
+import { setId } from "../utils/setId.mjs";
+import { multiSelectionEventHandler } from "../utils/multiSelectionEventHandler.mjs";
+import { useClasses } from "./CheckBoxGroup.styles.mjs";
+import { staticClasses } from "./CheckBoxGroup.styles.mjs";
+import { HvFormElement } from "../Forms/FormElement/FormElement.mjs";
+import { HvLabel } from "../Forms/Label/Label.mjs";
+import { HvInfoMessage } from "../Forms/InfoMessage/InfoMessage.mjs";
+import { HvCheckBox } from "../CheckBox/CheckBox.mjs";
+import { HvWarningText } from "../Forms/WarningText/WarningText.mjs";
+const computeSelectAllState = (selected, total) => {
+  if (selected === 0) {
+    return "none";
+  }
+  if (selected === total) {
+    return "all";
+  }
+  return "some";
+};
+const getValueFromSelectedChildren = (children) => {
+  const selectedValues = Children.toArray(children).map((child) => {
+    const childIsControlled = child?.props?.checked !== void 0;
+    const childIsSelected = childIsControlled ? child?.props?.checked : child?.props?.defaultChecked;
+    return childIsSelected ? child?.props?.value : void 0;
+  }).filter((v) => v !== void 0);
+  return selectedValues;
+};
+const HvCheckBoxGroup = forwardRef(
+  (props, ref) => {
+    const {
+      id,
+      classes: classesProp,
+      className,
+      children,
+      name,
+      label,
+      description,
+      status,
+      statusMessage,
+      defaultValue,
+      value: valueProp,
+      required = false,
+      readOnly = false,
+      disabled = false,
+      showSelectAll = false,
+      orientation = "vertical",
+      selectAllLabel = "All",
+      selectAllConjunctionLabel = "/",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-errormessage": ariaErrorMessage,
+      onChange,
+      ...others
+    } = useDefaultProps("HvCheckBoxGroup", props);
+    const { classes, cx } = useClasses(classesProp);
+    const [value, setValue] = useControlled(
+      valueProp,
+      defaultValue !== void 0 ? defaultValue : (
+        // When uncontrolled and no default value is given,
+        // extract the initial selected values from the children own state
+        () => getValueFromSelectedChildren(children)
+      )
+    );
+    const [validationState, setValidationState] = useControlled(
+      status,
+      "standBy"
+    );
+    const [validationMessage] = useControlled(statusMessage, "Required");
+    const elementId = useUniqueId(id, "hvcheckboxgroup");
+    const selectionAnchor = useRef(void 0);
+    const [allValues, selectedState, selectedCount] = useMemo(() => {
+      const childValues = [];
+      const childSelectedState = [];
+      let childSelectedCounter = 0;
+      Children.toArray(children).forEach((child, i) => {
+        const childValue = child?.props?.value;
+        const childIsSelected = value.indexOf(childValue) !== -1;
+        childValues[i] = childValue;
+        childSelectedState[i] = childIsSelected;
+        if (childIsSelected) {
+          childSelectedCounter += 1;
+        }
+      });
+      return [childValues, childSelectedState, childSelectedCounter];
+    }, [children, value]);
+    const selectAllState = computeSelectAllState(
+      value.length,
+      selectedState.length
+    );
+    const onChildChangeInterceptor = useCallback(
+      (index, childOnChange, event, isChecked) => {
+        const newValue = multiSelectionEventHandler(
+          event,
+          index,
+          selectionAnchor,
+          allValues,
+          selectedState,
+          isChecked
+        );
+        childOnChange?.(event, isChecked);
+        onChange?.(event, newValue);
+        setValue(() => {
+          if (required && newValue.length === 0) {
+            setValidationState("invalid");
+          } else {
+            setValidationState("valid");
+          }
+          return newValue;
+        });
+      },
+      [
+        allValues,
+        onChange,
+        required,
+        selectedState,
+        setValidationState,
+        setValue
+      ]
+    );
+    const modifiedChildren = useMemo(() => {
+      return Children.map(children, (child, i) => {
+        const childIsSelected = selectedState[i];
+        return cloneElement(child, {
+          checked: childIsSelected,
+          name: child?.props?.name || name,
+          onChange: (event, isChecked) => onChildChangeInterceptor(
+            i,
+            child?.props?.onChange,
+            event,
+            isChecked
+          ),
+          disabled: disabled || child?.props?.disabled,
+          readOnly: readOnly || child?.props?.readOnly
+        });
+      });
+    }, [
+      children,
+      disabled,
+      name,
+      onChildChangeInterceptor,
+      readOnly,
+      selectedState
+    ]);
+    const handleSelectAll = (event, selectAllChecked) => {
+      let newValue;
+      if (selectAllState === "some") {
+        newValue = [];
+      } else if (selectAllChecked) {
+        newValue = [...allValues];
+      } else {
+        newValue = [];
+      }
+      onChange?.(event, newValue);
+      setValue(() => {
+        if (required && newValue.length === 0) {
+          setValidationState("invalid");
+        } else {
+          setValidationState("valid");
+        }
+        return newValue;
+      });
+    };
+    const selectAllLabelComponent = selectedCount === 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("b", { children: selectAllLabel }),
+      ` (${Children.toArray(children).length})`
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("b", { children: selectedCount }),
+      ` ${selectAllConjunctionLabel} ${Children.toArray(children).length}`
+    ] });
+    const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
+    const errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
+    return /* @__PURE__ */ jsxs(
+      HvFormElement,
+      {
+        id,
+        name,
+        status: validationState,
+        disabled,
+        required,
+        readOnly,
+        className: cx(classes.root, className),
+        children: [
+          label && /* @__PURE__ */ jsx(
+            HvLabel,
+            {
+              id: setId(elementId, "label"),
+              label,
+              className: classes.label
+            }
+          ),
+          description && /* @__PURE__ */ jsx(HvInfoMessage, { id: setId(elementId, "description"), children: description }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref,
+              role: "group",
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy || label && setId(elementId, "label") || void 0,
+              "aria-disabled": disabled ? true : void 0,
+              "aria-invalid": validationState === "invalid" ? true : void 0,
+              "aria-errormessage": validationState === "invalid" ? errorMessageId : void 0,
+              "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
+              className: cx(classes.group, {
+                [classes.vertical]: orientation === "vertical",
+                [classes.horizontal]: orientation === "horizontal",
+                [classes.invalid]: validationState === "invalid"
+              }),
+              ...others,
+              children: [
+                showSelectAll && /* @__PURE__ */ jsx(
+                  HvCheckBox,
+                  {
+                    checked: selectAllState === "all",
+                    indeterminate: selectAllState === "some",
+                    label: selectAllLabelComponent,
+                    disabled,
+                    readOnly,
+                    className: classes.selectAll,
+                    onChange: handleSelectAll
+                  }
+                ),
+                modifiedChildren
+              ]
+            }
+          ),
+          canShowError && /* @__PURE__ */ jsx(
+            HvWarningText,
+            {
+              id: setId(elementId, "error"),
+              disableBorder: true,
+              className: classes.error,
+              children: validationMessage
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  HvCheckBoxGroup,
+  staticClasses as checkBoxGroupClasses
+};
+//# sourceMappingURL=CheckBoxGroup.mjs.map