@hitachivantara/uikit-react-core 5.39.3 → 5.39.4

package/dist/esm/BaseInput/BaseInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseInput.js","sources":["../../../src/BaseInput/BaseInput.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport {\n  InputBaseComponentProps as MuiInputBaseComponentProps,\n  InputBaseProps,\n} from \"@mui/material/InputBase\";\nimport MuiInput, { InputProps as MuiInputProps } from \"@mui/material/Input\";\n\nimport { css as emotionCss, Global } from \"@emotion/react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { ExtractNames } from \"../utils/classes\";\nimport {\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n  buildFormElementPropsFromContext,\n  buildAriaPropsFromContext,\n} from \"../Forms\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./BaseInput.styles\";\n\nexport { staticClasses as baseInputClasses };\n\nexport type HvBaseInputClasses = ExtractNames<typeof useClasses>;\n\n// Global styles for the base input.\nconst baseInputStyles = emotionCss({\n  \"input:-webkit-autofill\": {\n    WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.atmo1} inset`,\n    WebkitTextFillColor: theme.colors.secondary,\n  },\n\n  // Clears number input up/down arrows in Chrome and Firefox\n  \"input::-webkit-outer-spin-button,input::-webkit-inner-spin-button\": {\n    WebkitAppearance: \"none\",\n    margin: 0,\n  },\n  \"input[type=number]\": {\n    MozAppearance: \"textfield\",\n  },\n\n  // Clears time input clock in Chrome\n  \"input::-webkit-calendar-picker-indicator\": {\n    display: \"none\",\n  },\n\n  // Clears search input clear button in Chrome\n  \"input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration\":\n    {\n      display: \"none\",\n    },\n});\n\nexport interface HvBaseInputProps\n  extends Omit<MuiInputProps, \"onChange\" | \"classes\"> {\n  /** The input name. */\n  name?: string;\n  /** The value of the input, when controlled. */\n  value?: string;\n  /** The initial value of the input, when uncontrolled. */\n  defaultValue?: string;\n  /** If `true` the input is disabled. */\n  disabled?: boolean;\n  /** Indicates that the input is not editable. */\n  readOnly?: boolean;\n  /** If true, the input element will be required. */\n  required?: boolean;\n  /** The function that will be executed onChange, allows modification of the input,\n   * it receives the value. If a new value should be presented it must returned it. */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n    value: string\n  ) => void;\n  /** The input type. */\n  type?: string;\n  /** Label inside the input used to help user. */\n  placeholder?: string;\n  /** If true, a textarea element will be rendered. */\n  multiline?: boolean;\n  /** If true and multiline is also true the textarea element will be resizable. */\n  resizable?: boolean;\n  /** Denotes if the input is in an invalid state. */\n  invalid?: boolean;\n  /** Attributes applied to the input element. */\n  inputProps?: MuiInputBaseComponentProps;\n  /** Allows passing a ref to the underlying input */\n  inputRef?: InputBaseProps[\"inputRef\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBaseInputClasses;\n}\n\n/**\n * An Input component that only posses the most basic functionalities.\n * It should be used alongside the other form elements to construct a proper accessible form.\n */\nexport const HvBaseInput = (props: HvBaseInputProps) => {\n  const {\n    classes: classesProp,\n    className = \"\",\n    id,\n    name,\n    value,\n    defaultValue,\n    required,\n    readOnly,\n    disabled,\n    onChange,\n    type = \"text\",\n    placeholder,\n    multiline = false,\n    resizable = false,\n    invalid = false,\n    inputRef,\n    inputProps = {},\n    ...others\n  } = useDefaultProps(\"HvBaseInput\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const formElementContext = useContext(HvFormElementContext);\n  const formElementProps = buildFormElementPropsFromContext(\n    name,\n    disabled,\n    readOnly,\n    required,\n    formElementContext\n  );\n\n  const localInvalid = invalid || formElementProps.status === \"invalid\";\n\n  const formElementDescriptorsContext = useContext(\n    HvFormElementDescriptorsContext\n  );\n  const ariaProps = buildAriaPropsFromContext(\n    inputProps,\n    formElementDescriptorsContext,\n    localInvalid,\n    id\n  );\n\n  const onChangeHandler: MuiInputProps[\"onChange\"] = (event) => {\n    onChange?.(event, event.target.value);\n  };\n\n  return (\n    <>\n      <Global styles={baseInputStyles} />\n      <div\n        className={cx(classes.root, className, {\n          [classes.disabled]: formElementProps.disabled,\n          [classes.invalid]: localInvalid,\n          [classes.resizable]: multiline && resizable,\n          [classes.readOnly]: formElementProps.readOnly,\n        })}\n      >\n        <MuiInput\n          id={id}\n          name={formElementProps.name}\n          value={value}\n          defaultValue={defaultValue}\n          type={type}\n          placeholder={placeholder}\n          readOnly={!!formElementProps.readOnly}\n          disabled={formElementProps.disabled}\n          onChange={onChangeHandler}\n          className={cx({\n            [classes.inputRootInvalid]: localInvalid,\n            [classes.inputRootReadOnly]: formElementProps.readOnly,\n          })}\n          classes={{\n            root: classes.inputRoot,\n            focused: classes.inputRootFocused,\n            disabled: classes.inputRootDisabled,\n            multiline: classes.inputRootMultiline,\n            input: cx(classes.input, {\n              [classes.inputResizable]: !formElementProps.disabled && resizable,\n              [classes.inputDisabled]: formElementProps.disabled,\n              [classes.inputReadOnly]: formElementProps.readOnly,\n            }),\n          }}\n          inputProps={{\n            // Avoid the required attribute at the root node\n            required: formElementProps.required,\n            ...inputProps,\n            ...ariaProps,\n          }}\n          inputRef={inputRef}\n          multiline={multiline}\n          rows={10}\n          {...others}\n        />\n        {!multiline && (\n          <div role=\"presentation\" className={classes.inputBorderContainer} />\n        )}\n      </div>\n    </>\n  );\n};\n"],"names":["emotionCss"],"mappings":"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"}

package/dist/esm/BaseInput/BaseInput.styles.js

@@ -0,0 +1,200 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { outlineStyles } from "../utils/focusUtils.js";
+import { createClasses } from "../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvBaseInput", {
+  root: {
+    display: "inline-block",
+    width: "100%",
+    position: "relative",
+    "&:hover $inputBorderContainer": {
+      backgroundColor: theme.colors.primary
+    },
+    "&:focus-within $inputBorderContainer": {
+      backgroundColor: theme.colors.primary
+    }
+  },
+  disabled: {
+    "& $inputRoot": {
+      backgroundColor: theme.colors.atmo2,
+      borderColor: theme.colors.secondary_60
+    },
+    "& $inputBorderContainer": {
+      backgroundColor: theme.colors.atmo4
+    },
+    "&:hover $inputBorderContainer": {
+      backgroundColor: theme.colors.atmo4
+    },
+    "&& $input": {
+      color: theme.colors.secondary_60,
+      WebkitTextFillColor: theme.colors.secondary_60
+    },
+    "& $inputRootMultiline": {
+      "& $input": {
+        backgroundColor: theme.colors.atmo2,
+        border: `1px solid ${theme.colors.secondary_60}`
+      }
+    },
+    "&:hover $inputRootMultiline": {
+      "& $input": {
+        backgroundColor: theme.colors.atmo2,
+        border: `1px solid ${theme.colors.secondary_60}`
+      }
+    }
+  },
+  invalid: {
+    "&:not(.disabled)": {
+      "& $inputBorderContainer": {
+        backgroundColor: theme.colors.negative
+      },
+      "&:hover $inputBorderContainer": {
+        backgroundColor: theme.colors.negative
+      },
+      "& $inputRootMultiline": {
+        "& $input": {
+          border: `1px solid ${theme.colors.negative}`
+        }
+      },
+      "&:hover $inputRootMultiline": {
+        "& $input": {
+          border: `1px solid ${theme.colors.negative}`
+        }
+      },
+      "&:focus-within $inputRootMultiline": {
+        "& $input": {
+          border: `1px solid ${theme.colors.negative}`
+        }
+      }
+    }
+  },
+  resizable: { width: "auto" },
+  readOnly: {
+    "& $inputBorderContainer": {
+      backgroundColor: "transparent"
+    },
+    "&:hover $inputBorderContainer": {
+      backgroundColor: "transparent"
+    },
+    "&:focus-within $inputBorderContainer": {
+      backgroundColor: "transparent"
+    },
+    "& $inputRootMultiline": {
+      "& $input": {
+        border: `1px solid ${theme.colors.secondary_60}`,
+        backgroundColor: theme.colors.atmo2
+      }
+    },
+    "&:hover $inputRootMultiline": {
+      "& $input": {
+        border: `1px solid ${theme.colors.secondary_60}`,
+        backgroundColor: theme.colors.atmo2
+      }
+    },
+    "&:focus-within $inputRootMultiline": {
+      "& $input": {
+        border: `1px solid ${theme.colors.secondary_60}`,
+        backgroundColor: theme.colors.atmo2
+      }
+    }
+  },
+  inputBorderContainer: {
+    position: "absolute",
+    width: "calc(100% - 4px)",
+    height: "0px",
+    top: "31px",
+    left: "2px",
+    backgroundColor: theme.colors.atmo4
+  },
+  inputRootInvalid: { borderColor: theme.colors.negative },
+  inputRootReadOnly: {
+    borderColor: theme.colors.secondary_60,
+    backgroundColor: theme.colors.atmo2
+  },
+  inputRoot: {
+    margin: 0,
+    width: "100%",
+    borderRadius: theme.radii.base,
+    height: "32px",
+    border: `1px solid ${theme.colors.secondary}`,
+    boxSizing: "border-box",
+    backgroundColor: theme.colors.atmo1,
+    fontFamily: theme.fontFamily.body,
+    "&:hover:not($inputRootDisabled):not($inputRootInvalid):not($inputRootReadOnly)": {
+      borderColor: theme.colors.primary
+    },
+    "&:hover:not($inputRootDisabled)::before": {
+      borderBottom: "none"
+    },
+    "&::before": {
+      borderBottom: "none"
+    },
+    "&::after": {
+      borderBottom: "none"
+    }
+  },
+  inputRootFocused: {
+    backgroundColor: theme.colors.atmo1,
+    ...outlineStyles,
+    "&:hover": {
+      backgroundColor: theme.colors.atmo1
+    },
+    "&$inputRootReadOnly": {
+      backgroundColor: theme.colors.atmo2
+    }
+  },
+  inputRootDisabled: {
+    cursor: "not-allowed",
+    "&&::before": {
+      borderBottomStyle: "none"
+    }
+  },
+  inputRootMultiline: {
+    padding: 0,
+    backgroundColor: "transparent",
+    overflow: "auto",
+    border: "none",
+    height: "auto",
+    "& $input": {
+      border: `1px solid ${theme.colors.secondary}`,
+      borderRadius: theme.radii.base,
+      backgroundColor: theme.colors.atmo1,
+      height: "auto",
+      minHeight: "21px",
+      padding: "5px 10px",
+      overflow: "auto",
+      marginLeft: "0px",
+      marginRight: "0px",
+      "&:hover": {
+        border: `1px solid ${theme.colors.primary}`
+      }
+    }
+  },
+  input: {
+    height: "19px",
+    marginLeft: theme.space.xs,
+    marginRight: theme.space.xs,
+    padding: "6px 0 5px",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    outline: "none",
+    width: "initial",
+    flexGrow: 1,
+    ...theme.typography.body,
+    "&::placeholder": {
+      opacity: 1,
+      color: theme.colors.secondary_80
+    },
+    "&::-ms-clear": {
+      display: "none"
+    }
+  },
+  inputDisabled: {},
+  inputReadOnly: {
+    color: theme.colors.secondary_80
+  },
+  inputResizable: { resize: "both", width: "100%" }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=BaseInput.styles.js.map

package/dist/esm/BaseInput/BaseInput.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseInput.styles.js","sources":["../../../src/BaseInput/BaseInput.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseInput\", {\n  root: {\n    display: \"inline-block\",\n    width: \"100%\",\n    position: \"relative\",\n\n    \"&:hover $inputBorderContainer\": {\n      backgroundColor: theme.colors.primary,\n    },\n\n    \"&:focus-within $inputBorderContainer\": {\n      backgroundColor: theme.colors.primary,\n    },\n  },\n  disabled: {\n    \"& $inputRoot\": {\n      backgroundColor: theme.colors.atmo2,\n      borderColor: theme.colors.secondary_60,\n    },\n\n    \"& $inputBorderContainer\": {\n      backgroundColor: theme.colors.atmo4,\n    },\n\n    \"&:hover $inputBorderContainer\": {\n      backgroundColor: theme.colors.atmo4,\n    },\n\n    \"&& $input\": {\n      color: theme.colors.secondary_60,\n      WebkitTextFillColor: theme.colors.secondary_60,\n    },\n\n    \"& $inputRootMultiline\": {\n      \"& $input\": {\n        backgroundColor: theme.colors.atmo2,\n        border: `1px solid ${theme.colors.secondary_60}`,\n      },\n    },\n\n    \"&:hover $inputRootMultiline\": {\n      \"& $input\": {\n        backgroundColor: theme.colors.atmo2,\n        border: `1px solid ${theme.colors.secondary_60}`,\n      },\n    },\n  },\n  invalid: {\n    \"&:not(.disabled)\": {\n      \"& $inputBorderContainer\": {\n        backgroundColor: theme.colors.negative,\n      },\n\n      \"&:hover $inputBorderContainer\": {\n        backgroundColor: theme.colors.negative,\n      },\n\n      \"& $inputRootMultiline\": {\n        \"& $input\": {\n          border: `1px solid ${theme.colors.negative}`,\n        },\n      },\n\n      \"&:hover $inputRootMultiline\": {\n        \"& $input\": {\n          border: `1px solid ${theme.colors.negative}`,\n        },\n      },\n\n      \"&:focus-within $inputRootMultiline\": {\n        \"& $input\": {\n          border: `1px solid ${theme.colors.negative}`,\n        },\n      },\n    },\n  },\n  resizable: { width: \"auto\" },\n  readOnly: {\n    \"& $inputBorderContainer\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:hover $inputBorderContainer\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:focus-within $inputBorderContainer\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"& $inputRootMultiline\": {\n      \"& $input\": {\n        border: `1px solid ${theme.colors.secondary_60}`,\n        backgroundColor: theme.colors.atmo2,\n      },\n    },\n\n    \"&:hover $inputRootMultiline\": {\n      \"& $input\": {\n        border: `1px solid ${theme.colors.secondary_60}`,\n        backgroundColor: theme.colors.atmo2,\n      },\n    },\n\n    \"&:focus-within $inputRootMultiline\": {\n      \"& $input\": {\n        border: `1px solid ${theme.colors.secondary_60}`,\n        backgroundColor: theme.colors.atmo2,\n      },\n    },\n  },\n  inputBorderContainer: {\n    position: \"absolute\",\n    width: \"calc(100% - 4px)\",\n    height: \"0px\",\n    top: \"31px\",\n    left: \"2px\",\n    backgroundColor: theme.colors.atmo4,\n  },\n  inputRootInvalid: { borderColor: theme.colors.negative },\n  inputRootReadOnly: {\n    borderColor: theme.colors.secondary_60,\n    backgroundColor: theme.colors.atmo2,\n  },\n  inputRoot: {\n    margin: 0,\n    width: \"100%\",\n    borderRadius: theme.radii.base,\n    height: \"32px\",\n    border: `1px solid ${theme.colors.secondary}`,\n    boxSizing: \"border-box\",\n    backgroundColor: theme.colors.atmo1,\n    fontFamily: theme.fontFamily.body,\n\n    \"&:hover:not($inputRootDisabled):not($inputRootInvalid):not($inputRootReadOnly)\":\n      {\n        borderColor: theme.colors.primary,\n      },\n\n    \"&:hover:not($inputRootDisabled)::before\": {\n      borderBottom: \"none\",\n    },\n\n    \"&::before\": {\n      borderBottom: \"none\",\n    },\n\n    \"&::after\": {\n      borderBottom: \"none\",\n    },\n  },\n  inputRootFocused: {\n    backgroundColor: theme.colors.atmo1,\n    ...outlineStyles,\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n\n    \"&$inputRootReadOnly\": {\n      backgroundColor: theme.colors.atmo2,\n    },\n  },\n  inputRootDisabled: {\n    cursor: \"not-allowed\",\n\n    \"&&::before\": {\n      borderBottomStyle: \"none\",\n    },\n  },\n  inputRootMultiline: {\n    padding: 0,\n    backgroundColor: \"transparent\",\n    overflow: \"auto\",\n    border: \"none\",\n    height: \"auto\",\n\n    \"& $input\": {\n      border: `1px solid ${theme.colors.secondary}`,\n      borderRadius: theme.radii.base,\n      backgroundColor: theme.colors.atmo1,\n      height: \"auto\",\n      minHeight: \"21px\",\n      padding: \"5px 10px\",\n      overflow: \"auto\",\n      marginLeft: \"0px\",\n      marginRight: \"0px\",\n\n      \"&:hover\": {\n        border: `1px solid ${theme.colors.primary}`,\n      },\n    },\n  },\n  input: {\n    height: \"19px\",\n    marginLeft: theme.space.xs,\n    marginRight: theme.space.xs,\n    padding: \"6px 0 5px\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    outline: \"none\",\n    width: \"initial\",\n    flexGrow: 1,\n    ...(theme.typography.body as CSSProperties),\n\n    \"&::placeholder\": {\n      opacity: 1,\n      color: theme.colors.secondary_80,\n    },\n\n    \"&::-ms-clear\": {\n      display: \"none\",\n    },\n  },\n  inputDisabled: {},\n  inputReadOnly: {\n    color: theme.colors.secondary_80,\n  },\n  inputResizable: { resize: \"both\", width: \"100%\" },\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/BaseInput/validations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validations.js","sources":["../../../src/BaseInput/validations.ts"],"sourcesContent":["import { HTMLInputTypeAttribute } from \"react\";\n\nimport { InputBaseComponentProps } from \"@mui/material/InputBase\";\n\nimport validationStates from \"../Forms/FormElement/validationStates\";\n\n/** Checks if the value is a number. */\nconst isNumeric = (num: string) =>\n  // to prevent Number( <spaces> ) = 0\n  num.trim().length > 0 && !Number.isNaN(Number(num));\n\n/** Checks if the value is an email */\nconst isEmail = (email: string) => {\n  const regexp =\n    /^[^\\\\s]+[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?[.])+[a-z0-9](?:[a-z0-9-]*[a-z0-9])$/i;\n  return regexp.test(email);\n};\n\nexport const validationTypes = Object.freeze({\n  none: \"none\",\n  number: \"number\",\n  email: \"email\",\n});\n\n/** Returns the input's validation type based in the type of the input. */\nexport const computeValidationType = (type: HTMLInputTypeAttribute) => {\n  switch (type) {\n    case \"number\":\n      return validationTypes.number;\n    case \"email\":\n      return validationTypes.email;\n\n    default:\n      return validationTypes.none;\n  }\n};\n\n/**\n * Checks whether any integrated validation, native or not, is active.\n */\nexport const hasBuiltInValidations = (\n  required: boolean,\n  validationType: HTMLInputTypeAttribute,\n  minCharQuantity: number | null | undefined,\n  maxCharQuantity: number | null | undefined,\n  validation?: (value: string) => boolean,\n  inputProps?: InputBaseComponentProps\n) =>\n  required ||\n  validationType !== validationTypes.none ||\n  minCharQuantity != null ||\n  maxCharQuantity != null ||\n  validation != null ||\n  inputProps?.required != null ||\n  inputProps?.minLength != null ||\n  inputProps?.maxLength != null ||\n  inputProps?.min != null ||\n  inputProps?.max != null ||\n  (inputProps?.type != null &&\n    inputProps?.type !== \"text\" &&\n    inputProps?.type !== \"password\") ||\n  inputProps?.pattern != null;\n\n/** Returns the form element's validation state based in the validity state of the input. */\nexport const computeValidationState = (\n  inputValidity: HvInputValidity,\n  isEmptyValue: boolean\n) => {\n  // to keep 2.x behaviour,\n  // consider that if the value is empty (and not required) we're returning to the standBy state.\n  // might not make sense, as it makes impossible to say if the user explicitly cleared the input.\n  if (inputValidity.valid && isEmptyValue) {\n    return validationStates.standBy;\n  }\n\n  return inputValidity.valid\n    ? validationStates.valid\n    : validationStates.invalid;\n};\n\n/**\n * Returns a error message based in the validity state of the input.\n *\n * Only one error message is returned even if multiple validations fail.\n * Also, only required, minCharQuantity, maxCharQuantity and validationType have specific error messages.\n *\n * For further customization both status and statusMessage should be controlled and\n * set using the onBlur callback that receives both the value and the input validity object.\n */\nexport const computeValidationMessage = (\n  inputValidity: HvInputValidity,\n  /** The available localized error messages. */\n  errorMessages: Record<string, string>\n) => {\n  if (inputValidity.valid) {\n    return \"\";\n  }\n\n  if (inputValidity.valueMissing) {\n    return errorMessages.requiredError;\n  }\n  if (inputValidity.tooLong) {\n    return errorMessages.maxCharError;\n  }\n  if (inputValidity.tooShort) {\n    return errorMessages.minCharError;\n  }\n  if (inputValidity.typeMismatch) {\n    return errorMessages.typeMismatchError;\n  }\n\n  return errorMessages.error;\n};\n\n/**\n * Returns a object describing the validity state of the input.\n *\n * It implements the native browser's ValidityState interface:\n * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n */\nexport const validateInput = (\n  input: HTMLInputElement | HTMLTextAreaElement | null,\n  value: string,\n  required: boolean,\n  minCharQuantity: any,\n  maxCharQuantity: any,\n  validationType: string,\n  validation?: (value: string) => boolean\n): HvInputValidity => {\n  // bootstrap validity object using browser's built-in validation\n  const inputValidity: HvInputValidity = {\n    valid: input?.validity?.valid ?? true,\n    badInput: input?.validity?.badInput,\n    customError: input?.validity?.customError,\n    patternMismatch: input?.validity?.patternMismatch,\n    rangeOverflow: input?.validity?.rangeOverflow,\n    rangeUnderflow: input?.validity?.rangeUnderflow,\n    stepMismatch: input?.validity?.stepMismatch,\n    tooLong: input?.validity?.tooLong,\n    tooShort: input?.validity?.tooShort,\n    typeMismatch: input?.validity?.typeMismatch,\n    valueMissing: input?.validity?.valueMissing,\n  };\n\n  if (!value) {\n    if (required) {\n      // this is redundant because we're setting the required property in the native input\n      inputValidity.valueMissing = true;\n      inputValidity.valid = false;\n    }\n  } else {\n    // we're not setting minlength and maxlength in the native input\n    // to avoid different browser's behaviours and keep the user experience consistent\n    if (minCharQuantity !== null && value.length < minCharQuantity) {\n      inputValidity.tooShort = true;\n      inputValidity.valid = false;\n    }\n\n    if (maxCharQuantity !== null && value.length > maxCharQuantity) {\n      inputValidity.tooLong = true;\n      inputValidity.valid = false;\n    }\n\n    // the validationType is used instead of type\n    // for the same reason stated above\n    switch (validationType) {\n      case validationTypes.number:\n        if (!isNumeric(value)) {\n          inputValidity.typeMismatch = true;\n          inputValidity.valid = false;\n        }\n        break;\n\n      case validationTypes.email:\n        if (!isEmail(value)) {\n          inputValidity.typeMismatch = true;\n          inputValidity.valid = false;\n        }\n        break;\n\n      default:\n    }\n\n    if (validation != null && !validation(value)) {\n      inputValidity.customError = true;\n      inputValidity.valid = false;\n    }\n  }\n\n  return inputValidity;\n};\n\nexport type HvInputValidity = {\n  valid?: boolean;\n  badInput?: boolean;\n  customError?: boolean;\n  patternMismatch?: boolean;\n  rangeOverflow?: boolean;\n  rangeUnderflow?: boolean;\n  stepMismatch?: boolean;\n  tooLong?: boolean;\n  tooShort?: boolean;\n  typeMismatch?: boolean;\n  valueMissing?: boolean;\n};\n\nexport const DEFAULT_ERROR_MESSAGES = {\n  error: \"Invalid value\",\n  requiredError: \"The value is required\",\n  minCharError: \"The value is too short\",\n  maxCharError: \"The value is too long\",\n  typeMismatchError: \"Invalid value\",\n};\n"],"names":["validationStates"],"mappings":"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"}

package/dist/esm/BaseRadio/BaseRadio.js

@@ -0,0 +1,101 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useState, useCallback } from "react";
+import MuiRadio from "@mui/material/Radio";
+import { RadioButtonUnselected, RadioButtonSelected } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useClasses } from "./BaseRadio.styles.js";
+import { staticClasses } from "./BaseRadio.styles.js";
+const getSelectorIcons = (options, classes) => {
+  const { disabled, semantic } = options;
+  const color = disabled && ["atmo3", "secondary_60"] || semantic && ["base_light", "base_dark"] || void 0;
+  const checkedColor = disabled && ["atmo3", "secondary_60"] || semantic && ["base_dark", "base_light"] || void 0;
+  return {
+    radio: /* @__PURE__ */ jsx(RadioButtonUnselected, { color, className: classes.icon }),
+    radioChecked: /* @__PURE__ */ jsx(RadioButtonSelected, { color: checkedColor, className: classes.icon })
+  };
+};
+const HvBaseRadio = forwardRef(
+  (props, ref) => {
+    const {
+      classes: classesProp,
+      className,
+      id,
+      name,
+      value = "on",
+      required = false,
+      readOnly = false,
+      disabled = false,
+      checked,
+      defaultChecked,
+      onChange,
+      semantic = false,
+      inputProps,
+      onFocusVisible,
+      onBlur,
+      ...others
+    } = useDefaultProps("HvBaseRadio", props);
+    const { classes, cx } = useClasses(classesProp);
+    const [focusVisible, setFocusVisible] = useState(false);
+    const onFocusVisibleCallback = useCallback(
+      (evt) => {
+        setFocusVisible(true);
+        onFocusVisible?.(evt);
+      },
+      [onFocusVisible]
+    );
+    const onBlurCallback = useCallback(
+      (evt) => {
+        setFocusVisible(false);
+        onBlur?.(evt);
+      },
+      [onBlur]
+    );
+    const icons = getSelectorIcons({ disabled, semantic }, classes);
+    const onLocalChange = useCallback(
+      (evt) => {
+        if (readOnly) {
+          return;
+        }
+        onChange?.(evt, evt.target.checked, value);
+      },
+      [onChange, readOnly, value]
+    );
+    return /* @__PURE__ */ jsx(
+      MuiRadio,
+      {
+        ref,
+        id,
+        name,
+        className: cx(
+          classes.root,
+          {
+            [classes.disabled]: disabled,
+            [classes.focusVisible]: focusVisible
+          },
+          className
+        ),
+        icon: icons.radio,
+        checkedIcon: icons.radioChecked,
+        color: "default",
+        disabled,
+        required,
+        readOnly,
+        disableRipple: true,
+        onChange: onLocalChange,
+        value,
+        checked,
+        defaultChecked,
+        inputProps,
+        onFocusVisible: onFocusVisibleCallback,
+        onBlur: onBlurCallback,
+        ...others
+      }
+    );
+  }
+);
+export {
+  HvBaseRadio,
+  staticClasses as baseRadioClasses,
+  getSelectorIcons
+};
+//# sourceMappingURL=BaseRadio.js.map

package/dist/esm/BaseRadio/BaseRadio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseRadio.js","sources":["../../../src/BaseRadio/BaseRadio.tsx"],"sourcesContent":["import React, { useState, useCallback, forwardRef } from \"react\";\n\nimport MuiRadio, { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\n\nimport {\n  RadioButtonUnselected,\n  RadioButtonSelected,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseRadio.styles\";\n\nexport { staticClasses as baseRadioClasses };\n\nexport type HvBaseRadioClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseRadioProps\n  extends Omit<MuiRadioProps, \"onChange\" | \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes?: HvBaseRadioClasses;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n   *\n   * When defined the radio button state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The callback fired when the radio button is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * @ignore\n   */\n  onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\nexport const getSelectorIcons = (\n  options: { disabled: boolean; semantic: boolean },\n  classes: HvBaseRadioClasses\n) => {\n  const { disabled, semantic } = options;\n  const color =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_light\", \"base_dark\"]) ||\n    undefined;\n  const checkedColor =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_dark\", \"base_light\"]) ||\n    undefined;\n\n  return {\n    radio: <RadioButtonUnselected color={color} className={classes.icon} />,\n    radioChecked: (\n      <RadioButtonSelected color={checkedColor} className={classes.icon} />\n    ),\n  };\n};\n\n/**\n * A Radio Button is a mechanism that allows user to select one or more options.\n *\n * The Base Radio Button is a building block of the Radio Button form element. Don't\n * use unless implementing a custom use case not covered by the Radio Button form element.\n */\nexport const HvBaseRadio = forwardRef<HTMLButtonElement, HvBaseRadioProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n      id,\n      name,\n      value = \"on\",\n      required = false,\n      readOnly = false,\n      disabled = false,\n      checked,\n      defaultChecked,\n      onChange,\n      semantic = false,\n      inputProps,\n      onFocusVisible,\n      onBlur,\n      ...others\n    } = useDefaultProps(\"HvBaseRadio\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [focusVisible, setFocusVisible] = useState(false);\n\n    const onFocusVisibleCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(true);\n        onFocusVisible?.(evt);\n      },\n      [onFocusVisible]\n    );\n\n    const onBlurCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(false);\n        onBlur?.(evt);\n      },\n      [onBlur]\n    );\n\n    const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n    const onLocalChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>) => {\n        if (readOnly) {\n          return;\n        }\n\n        onChange?.(evt, evt.target.checked, value);\n      },\n      [onChange, readOnly, value]\n    );\n\n    return (\n      <MuiRadio\n        ref={ref}\n        id={id}\n        name={name}\n        className={cx(\n          classes.root,\n          {\n            [classes.disabled]: disabled,\n            [classes.focusVisible]: focusVisible,\n          },\n          className\n        )}\n        icon={icons.radio}\n        checkedIcon={icons.radioChecked}\n        color=\"default\"\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        disableRipple\n        onChange={onLocalChange}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        inputProps={inputProps}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;AA2Fa,MAAA,mBAAmB,CAC9B,SACA,YACG;AACG,QAAA,EAAE,UAAU,SAAa,IAAA;AACzB,QAAA,QACH,YAAY,CAAC,SAAS,cAAc,KACpC,YAAY,CAAC,cAAc,WAAW,KACvC;AACI,QAAA,eACH,YAAY,CAAC,SAAS,cAAc,KACpC,YAAY,CAAC,aAAa,YAAY,KACvC;AAEK,SAAA;AAAA,IACL,OAAQ,oBAAA,uBAAA,EAAsB,OAAc,WAAW,QAAQ,MAAM;AAAA,IACrE,cACG,oBAAA,qBAAA,EAAoB,OAAO,cAAc,WAAW,QAAQ,MAAM;AAAA,EAAA;AAGzE;AAQO,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,UAAM,yBAAyB;AAAA,MAC7B,CAAC,QAA+B;AAC9B,wBAAgB,IAAI;AACpB,yBAAiB,GAAG;AAAA,MACtB;AAAA,MACA,CAAC,cAAc;AAAA,IAAA;AAGjB,UAAM,iBAAiB;AAAA,MACrB,CAAC,QAA+B;AAC9B,wBAAgB,KAAK;AACrB,iBAAS,GAAG;AAAA,MACd;AAAA,MACA,CAAC,MAAM;AAAA,IAAA;AAGT,UAAM,QAAQ,iBAAiB,EAAE,UAAU,SAAA,GAAY,OAAO;AAE9D,UAAM,gBAAgB;AAAA,MACpB,CAAC,QAA6C;AAC5C,YAAI,UAAU;AACZ;AAAA,QACF;AAEA,mBAAW,KAAK,IAAI,OAAO,SAAS,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,UAAU,UAAU,KAAK;AAAA,IAAA;AAI1B,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,UAC1B;AAAA,UACA;AAAA,QACF;AAAA,QACA,MAAM,MAAM;AAAA,QACZ,aAAa,MAAM;AAAA,QACnB,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

package/dist/esm/BaseRadio/BaseRadio.styles.js

@@ -0,0 +1,35 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { outlineStyles } from "../utils/focusUtils.js";
+import { createClasses } from "../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvBaseRadio", {
+  root: {
+    padding: 0,
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: theme.colors.containerBackgroundHover,
+      borderRadius: theme.radii.base
+    },
+    borderRadius: 0
+  },
+  disabled: {
+    cursor: "not-allowed",
+    pointerEvents: "initial",
+    "& svg": {
+      "& path:nth-of-type(2)": {
+        fill: theme.colors.secondary_60
+      }
+    }
+  },
+  focusVisible: {
+    "& svg": {
+      borderRadius: "8px",
+      ...outlineStyles
+    }
+  },
+  icon: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=BaseRadio.styles.js.map

package/dist/esm/BaseRadio/BaseRadio.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseRadio.styles.js","sources":["../../../src/BaseRadio/BaseRadio.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(\"HvBaseRadio\", {\n  root: {\n    padding: 0,\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n    },\n    borderRadius: 0,\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"initial\",\n    \"& svg\": {\n      \"& path:nth-of-type(2)\": {\n        fill: theme.colors.secondary_60,\n      },\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      borderRadius: \"8px\",\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,IACA,cAAc;AAAA,EAChB;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,SAAS;AAAA,MACP,yBAAyB;AAAA,QACvB,MAAM,MAAM,OAAO;AAAA,MACrB;AAAA,IACF;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,cAAc;AAAA,MACd,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,MAAM,CAAC;AACT,CAAC;"}

package/dist/esm/BaseSwitch/BaseSwitch.js

@@ -0,0 +1,95 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useState, useCallback } from "react";
+import MuiSwitch from "@mui/material/Switch";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useClasses } from "./BaseSwitch.styles.js";
+import { staticClasses } from "./BaseSwitch.styles.js";
+const HvBaseSwitch = forwardRef(
+  (props, ref) => {
+    const {
+      classes: classesProp,
+      className,
+      id,
+      name,
+      value = "on",
+      required = false,
+      readOnly = false,
+      disabled = false,
+      checked,
+      defaultChecked,
+      onChange,
+      inputProps,
+      onFocusVisible,
+      onBlur,
+      ...others
+    } = useDefaultProps("HvBaseSwitch", props);
+    const { classes, cx } = useClasses(classesProp);
+    const [focusVisible, setFocusVisible] = useState(false);
+    const onFocusVisibleCallback = useCallback(
+      (evt) => {
+        setFocusVisible(true);
+        onFocusVisible?.(evt);
+      },
+      [onFocusVisible]
+    );
+    const onBlurCallback = useCallback(
+      (evt) => {
+        setFocusVisible(false);
+        onBlur?.(evt);
+      },
+      [onBlur]
+    );
+    const onLocalChange = useCallback(
+      (evt) => {
+        if (readOnly) {
+          return;
+        }
+        onChange?.(evt, evt.target.checked, value);
+      },
+      [onChange, readOnly, value]
+    );
+    return /* @__PURE__ */ jsx(
+      MuiSwitch,
+      {
+        ref,
+        id,
+        name,
+        className: cx(
+          classes.root,
+          {
+            [classes.disabled]: disabled,
+            [classes.readOnly]: readOnly,
+            [classes.focusVisible]: focusVisible
+          },
+          className
+        ),
+        color: "default",
+        disabled,
+        required,
+        readOnly,
+        disableRipple: true,
+        onChange: onLocalChange,
+        value,
+        checked,
+        defaultChecked,
+        classes: {
+          root: classes.switch,
+          switchBase: classes.switchBase,
+          checked: classes.checked,
+          track: classes.track,
+          thumb: classes.thumb,
+          disabled: classes.disabled
+        },
+        inputProps,
+        onFocusVisible: onFocusVisibleCallback,
+        onBlur: onBlurCallback,
+        ...others
+      }
+    );
+  }
+);
+export {
+  HvBaseSwitch,
+  staticClasses as baseSwitchClasses
+};
+//# sourceMappingURL=BaseSwitch.js.map

package/dist/esm/BaseSwitch/BaseSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSwitch.js","sources":["../../../src/BaseSwitch/BaseSwitch.tsx"],"sourcesContent":["import React, { useState, useCallback, forwardRef } from \"react\";\n\nimport MuiSwitch, { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useClasses, staticClasses } from \"./BaseSwitch.styles\";\n\nexport { staticClasses as baseSwitchClasses };\n\nexport type HvBaseSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseSwitchProps\n  extends Omit<MuiSwitchProps, \"onChange\" | \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the switch.\n   */\n  classes?: HvBaseSwitchClasses;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the switch is selected, if set to `false` the switch is not selected.\n   *\n   * When defined the switch state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The callback fired when the switch is pressed.\n   */\n  onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * @ignore\n   */\n  onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * The Base Switch is a building block of the Switch form element. Don't use unless\n * implementing a custom use case not covered by the Switch form element.\n */\nexport const HvBaseSwitch = forwardRef<HTMLButtonElement, HvBaseSwitchProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n      value = \"on\",\n\n      required = false,\n      readOnly = false,\n      disabled = false,\n\n      checked,\n      defaultChecked,\n\n      onChange,\n\n      inputProps,\n\n      onFocusVisible,\n      onBlur,\n\n      ...others\n    } = useDefaultProps(\"HvBaseSwitch\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [focusVisible, setFocusVisible] = useState(false);\n\n    const onFocusVisibleCallback = useCallback(\n      (evt: React.FocusEvent<any, Element>) => {\n        setFocusVisible(true);\n        onFocusVisible?.(evt);\n      },\n      [onFocusVisible]\n    );\n\n    const onBlurCallback = useCallback(\n      (evt: React.FocusEvent<any, Element>) => {\n        setFocusVisible(false);\n        onBlur?.(evt);\n      },\n      [onBlur]\n    );\n\n    const onLocalChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>) => {\n        if (readOnly) {\n          return;\n        }\n\n        onChange?.(evt, evt.target.checked, value);\n      },\n      [onChange, readOnly, value]\n    );\n\n    return (\n      <MuiSwitch\n        ref={ref}\n        id={id}\n        name={name}\n        className={cx(\n          classes.root,\n          {\n            [classes.disabled]: disabled,\n            [classes.readOnly]: readOnly,\n            [classes.focusVisible]: focusVisible,\n          },\n          className\n        )}\n        color=\"default\"\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        disableRipple\n        onChange={onLocalChange}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        classes={{\n          root: classes.switch,\n          switchBase: classes.switchBase,\n          checked: classes.checked,\n          track: classes.track,\n          thumb: classes.thumb,\n          disabled: classes.disabled,\n        }}\n        inputProps={inputProps}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;AAuFO,MAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MAEA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MAER,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MAEX;AAAA,MACA;AAAA,MAEA;AAAA,MAEA;AAAA,MAEA;AAAA,MACA;AAAA,MAEA,GAAG;AAAA,IAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,UAAM,yBAAyB;AAAA,MAC7B,CAAC,QAAwC;AACvC,wBAAgB,IAAI;AACpB,yBAAiB,GAAG;AAAA,MACtB;AAAA,MACA,CAAC,cAAc;AAAA,IAAA;AAGjB,UAAM,iBAAiB;AAAA,MACrB,CAAC,QAAwC;AACvC,wBAAgB,KAAK;AACrB,iBAAS,GAAG;AAAA,MACd;AAAA,MACA,CAAC,MAAM;AAAA,IAAA;AAGT,UAAM,gBAAgB;AAAA,MACpB,CAAC,QAA6C;AAC5C,YAAI,UAAU;AACZ;AAAA,QACF;AAEA,mBAAW,KAAK,IAAI,OAAO,SAAS,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,UAAU,UAAU,KAAK;AAAA,IAAA;AAI1B,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,UAC1B;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,YAAY,QAAQ;AAAA,UACpB,SAAS,QAAQ;AAAA,UACjB,OAAO,QAAQ;AAAA,UACf,OAAO,QAAQ;AAAA,UACf,UAAU,QAAQ;AAAA,QACpB;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

package/dist/esm/BaseSwitch/BaseSwitch.styles.js

@@ -0,0 +1,96 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { outlineStyles } from "../utils/focusUtils.js";
+import { createClasses } from "../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvBaseSwitch", {
+  root: {
+    padding: 0,
+    cursor: "pointer",
+    width: "40px",
+    height: "32px",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radii.base,
+    "&:hover": {
+      backgroundColor: theme.colors.primary_20
+    },
+    // Higher CSS specificity here
+    "& $switchBase": {
+      "&:hover": {
+        backgroundColor: "transparent"
+      },
+      "&$checked": {
+        transform: "translateX(16px)",
+        "& + $track": {
+          opacity: 1,
+          backgroundColor: theme.colors.secondary
+        },
+        "&:hover": {
+          backgroundColor: "transparent"
+        }
+      }
+    },
+    // Higher CSS specificity here
+    "&$disabled": {
+      "& $switchBase": {
+        "& + $track": {
+          opacity: 1,
+          backgroundColor: theme.colors.atmo3,
+          border: `solid 1px ${theme.colors.secondary_60}`
+        }
+      }
+    }
+  },
+  switch: {
+    width: "40px",
+    height: "32px",
+    padding: 0,
+    "&$readOnly $switchBase": {
+      cursor: "default"
+    }
+  },
+  switchBase: {
+    width: "40px",
+    height: "32px",
+    padding: 0
+  },
+  track: {
+    opacity: 1,
+    borderRadius: "15px",
+    height: "16px",
+    width: "32px",
+    border: `solid 1px ${theme.colors.secondary}`,
+    backgroundColor: theme.colors.atmo1
+  },
+  thumb: {
+    position: "relative",
+    left: "-9px",
+    width: "12px",
+    height: "12px",
+    border: `solid 1px ${theme.colors.secondary}`,
+    backgroundColor: theme.colors.atmo1,
+    marginLeft: "2px",
+    marginTop: 0,
+    boxShadow: "none"
+  },
+  checked: {},
+  disabled: {
+    cursor: "not-allowed",
+    "& $switch": {
+      cursor: "not-allowed"
+    },
+    "& $thumb": {
+      backgroundColor: theme.colors.atmo3,
+      border: `solid 1px ${theme.colors.secondary_60}`
+    }
+  },
+  readOnly: {},
+  focusVisible: {
+    borderRadius: "8px",
+    ...outlineStyles
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=BaseSwitch.styles.js.map

package/dist/esm/BaseSwitch/BaseSwitch.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSwitch.styles.js","sources":["../../../src/BaseSwitch/BaseSwitch.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(\"HvBaseSwitch\", {\n  root: {\n    padding: 0,\n    cursor: \"pointer\",\n    width: \"40px\",\n    height: \"32px\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    borderRadius: theme.radii.base,\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.primary_20,\n    },\n\n    // Higher CSS specificity here\n    \"& $switchBase\": {\n      \"&:hover\": {\n        backgroundColor: \"transparent\",\n      },\n\n      \"&$checked\": {\n        transform: \"translateX(16px)\",\n        \"& + $track\": {\n          opacity: 1,\n          backgroundColor: theme.colors.secondary,\n        },\n        \"&:hover\": {\n          backgroundColor: \"transparent\",\n        },\n      },\n    },\n\n    // Higher CSS specificity here\n    \"&$disabled\": {\n      \"& $switchBase\": {\n        \"& + $track\": {\n          opacity: 1,\n          backgroundColor: theme.colors.atmo3,\n          border: `solid 1px ${theme.colors.secondary_60}`,\n        },\n      },\n    },\n  },\n  switch: {\n    width: \"40px\",\n    height: \"32px\",\n    padding: 0,\n\n    \"&$readOnly $switchBase\": {\n      cursor: \"default\",\n    },\n  },\n  switchBase: {\n    width: \"40px\",\n    height: \"32px\",\n    padding: 0,\n  },\n  track: {\n    opacity: 1,\n    borderRadius: \"15px\",\n    height: \"16px\",\n    width: \"32px\",\n    border: `solid 1px ${theme.colors.secondary}`,\n    backgroundColor: theme.colors.atmo1,\n  },\n  thumb: {\n    position: \"relative\",\n    left: \"-9px\",\n    width: \"12px\",\n    height: \"12px\",\n    border: `solid 1px ${theme.colors.secondary}`,\n    backgroundColor: theme.colors.atmo1,\n    marginLeft: \"2px\",\n    marginTop: 0,\n    boxShadow: \"none\",\n  },\n  checked: {},\n  disabled: {\n    cursor: \"not-allowed\",\n\n    \"& $switch\": {\n      cursor: \"not-allowed\",\n    },\n\n    \"& $thumb\": {\n      backgroundColor: theme.colors.atmo3,\n      border: `solid 1px ${theme.colors.secondary_60}`,\n    },\n  },\n  readOnly: {},\n  focusVisible: {\n    borderRadius: \"8px\",\n    ...outlineStyles,\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,cAAc,MAAM,MAAM;AAAA,IAE1B,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA;AAAA,IAGA,iBAAiB;AAAA,MACf,WAAW;AAAA,QACT,iBAAiB;AAAA,MACnB;AAAA,MAEA,aAAa;AAAA,QACX,WAAW;AAAA,QACX,cAAc;AAAA,UACZ,SAAS;AAAA,UACT,iBAAiB,MAAM,OAAO;AAAA,QAChC;AAAA,QACA,WAAW;AAAA,UACT,iBAAiB;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA;AAAA,IAGA,cAAc;AAAA,MACZ,iBAAiB;AAAA,QACf,cAAc;AAAA,UACZ,SAAS;AAAA,UACT,iBAAiB,MAAM,OAAO;AAAA,UAC9B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,QAChD;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IAET,0BAA0B;AAAA,MACxB,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,IAC3C,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,IAC3C,iBAAiB,MAAM,OAAO;AAAA,IAC9B,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EACA,SAAS,CAAC;AAAA,EACV,UAAU;AAAA,IACR,QAAQ;AAAA,IAER,aAAa;AAAA,MACX,QAAQ;AAAA,IACV;AAAA,IAEA,YAAY;AAAA,MACV,iBAAiB,MAAM,OAAO;AAAA,MAC9B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAChD;AAAA,EACF;AAAA,EACA,UAAU,CAAC;AAAA,EACX,cAAc;AAAA,IACZ,cAAc;AAAA,IACd,GAAG;AAAA,EACL;AACF,CAAC;"}