@simplybusiness/mobius 4.8.6 → 4.8.8

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  ChangeEvent,\n  CompositionEvent,\n  Ref,\n  RefAttributes,\n  forwardRef,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport { DOMProps } from \"../../types/dom\";\nimport { UseLabelProps, useLabel } from \"../../hooks\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\n\nexport type NumberFieldElementType = HTMLInputElement;\n\nexport interface NumberFieldProps\n  extends DOMProps,\n    UseLabelProps,\n    RefAttributes<NumberFieldElementType> {\n  id?: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  validationState?: \"valid\" | \"invalid\" | undefined;\n  /** The smallest value allowed for the input. */\n  minValue?: number;\n  /** The largest value allowed for the input. */\n  maxValue?: number;\n  /** The amount that the input value changes with each increment or decrement \"tick\". */\n  step?: number; // ??\n  /** The default value (uncontrolled). */\n  defaultValue?: number;\n  /** Handler that is called when the value changes. */\n  onChange?: (event: ChangeEvent<NumberFieldElementType>) => void;\n  /** Temporary text that occupies the text input when it is empty. */\n  placeholder?: string;\n  /** Whether user input is required on the input before form submission. */\n  isRequired?: boolean;\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n  /** Whether the input can be selected but not changed by the user. */\n  isReadOnly?: boolean;\n  /** An error message for the field. */\n  errorMessage?: string;\n  /** Identifies the element (or elements) that describes the object. */\n  \"aria-describedby\"?: string | undefined;\n}\n\nexport type NumberFieldRef = Ref<NumberFieldElementType>;\n\nexport const NumberField: ForwardedRefComponent<\n  NumberFieldProps,\n  NumberFieldElementType\n> = forwardRef((props: NumberFieldProps, ref: NumberFieldRef) => {\n  const {\n    id,\n    isDisabled,\n    isRequired,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    className,\n    errorMessage,\n    validationState,\n    isReadOnly,\n    minValue,\n    maxValue,\n    step,\n    placeholder,\n    defaultValue = 0,\n    onChange,\n  } = props;\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const [value, setValue] = useState<number>(defaultValue);\n  const valueWithoutLeadingZero = value.toString().replace(/^0+/, \"\");\n  const optional = typeof isRequired === \"boolean\" && !isRequired;\n  const required = typeof isRequired === \"boolean\" && isRequired;\n\n  const { labelProps, fieldProps } = useLabel({\n    id,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n  });\n\n  const containerClasses = classNames(\"mobius/NumberField\", className, {\n    \"--is-optional\": optional,\n  });\n\n  const inputClasses = classNames(\"mobius/NumberFieldInput\", className, {\n    \"--is-required\": required,\n    \"--is-optional\": optional,\n    \"--is-valid\": validationState === \"valid\",\n    \"--is-invalid\": validationState === \"invalid\",\n    \"--is-disabled\": isDisabled,\n  });\n\n  const labelClasses = classNames(\"mobius/NumberFieldLabel\", {\n    \"--is-valid\": validationState === \"valid\",\n    \"--is-invalid\": validationState === \"invalid\",\n    \"--is-disabled\": isDisabled,\n  });\n\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n\n  const handleChange = (event: ChangeEvent<NumberFieldElementType>) => {\n    // Only allow change between min and max values\n    const enteredValue = Number(event.target.value);\n    if (\n      (minValue && enteredValue < minValue) ||\n      (maxValue && enteredValue > maxValue)\n    ) {\n      return;\n    }\n    setValue(enteredValue);\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  // Only allow numeric input\n  const handleBeforeInput = (\n    event: CompositionEvent<NumberFieldElementType>,\n  ) => {\n    const allowedChars = /[\\d]/;\n\n    if (event.data && !allowedChars.test(event.data)) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  return (\n    <div className={containerClasses}>\n      {label && (\n        <Label {...labelProps} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius/NumberFieldInputWrapper\">\n        <input\n          {...fieldProps}\n          ref={inputRef || ref}\n          className={inputClasses}\n          type=\"number\"\n          onChange={handleChange}\n          onBeforeInput={handleBeforeInput}\n          max={maxValue}\n          min={minValue}\n          step={step}\n          value={valueWithoutLeadingZero}\n          placeholder={placeholder}\n          required={required}\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={validationState === \"invalid\"}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          spellCheck=\"false\"\n        />\n      </div>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </div>\n  );\n});\n"],"names":["classNames","forwardRef","useId","useRef","useState","useLabel","spaceDelimitedList","ErrorMessage","Label","NumberField","props","ref","id","isDisabled","isRequired","label","ariaLabel","ariaLabelledBy","ariaDescribedBy","className","errorMessage","validationState","isReadOnly","minValue","maxValue","step","placeholder","defaultValue","onChange","inputRef","value","setValue","valueWithoutLeadingZero","toString","replace","optional","required","labelProps","fieldProps","containerClasses","inputClasses","labelClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","handleChange","event","enteredValue","Number","target","handleBeforeInput","allowedChars","data","test","preventDefault","stopPropagation","div","input","type","onBeforeInput","max","min","aria-describedby","aria-errormessage","aria-invalid","readOnly","disabled","autoComplete","autoCorrect","spellCheck"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  ChangeEvent,\n  CompositionEvent,\n  Ref,\n  RefAttributes,\n  forwardRef,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport { DOMProps } from \"../../types/dom\";\nimport { UseLabelProps, useLabel, useValidationClasses } from \"../../hooks\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Validation } from \"../../types\";\n\nexport type NumberFieldElementType = HTMLInputElement;\n\nexport interface NumberFieldProps\n  extends DOMProps,\n    Validation,\n    UseLabelProps,\n    RefAttributes<NumberFieldElementType> {\n  id?: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** The smallest value allowed for the input. */\n  minValue?: number;\n  /** The largest value allowed for the input. */\n  maxValue?: number;\n  /** The amount that the input value changes with each increment or decrement \"tick\". */\n  step?: number; // ??\n  /** The default value (uncontrolled). */\n  defaultValue?: number;\n  /** Handler that is called when the value changes. */\n  onChange?: (event: ChangeEvent<NumberFieldElementType>) => void;\n  /** Temporary text that occupies the text input when it is empty. */\n  placeholder?: string;\n  /** Whether user input is required on the input before form submission. */\n  isRequired?: boolean;\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n  /** Whether the input can be selected but not changed by the user. */\n  isReadOnly?: boolean;\n  /** An error message for the field. */\n  errorMessage?: string;\n  /** Identifies the element (or elements) that describes the object. */\n  \"aria-describedby\"?: string | undefined;\n}\n\nexport type NumberFieldRef = Ref<NumberFieldElementType>;\n\nexport const NumberField: ForwardedRefComponent<\n  NumberFieldProps,\n  NumberFieldElementType\n> = forwardRef((props: NumberFieldProps, ref: NumberFieldRef) => {\n  const {\n    id,\n    isDisabled,\n    isRequired,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    className,\n    errorMessage,\n    validationState,\n    isInvalid,\n    isReadOnly,\n    minValue,\n    maxValue,\n    step,\n    placeholder,\n    defaultValue = 0,\n    onChange,\n  } = props;\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const [value, setValue] = useState<number>(defaultValue);\n  const valueWithoutLeadingZero = value.toString().replace(/^0+/, \"\");\n  const optional = typeof isRequired === \"boolean\" && !isRequired;\n  const required = typeof isRequired === \"boolean\" && isRequired;\n\n  const { labelProps, fieldProps } = useLabel({\n    id,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n  });\n\n  const containerClasses = classNames(\"mobius/NumberField\", className, {\n    \"--is-optional\": optional,\n  });\n\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n\n  const inputClasses = classNames(\n    \"mobius/NumberFieldInput\",\n    className,\n    {\n      \"--is-required\": required,\n      \"--is-optional\": optional,\n      \"--is-disabled\": isDisabled,\n    },\n    validationClasses,\n  );\n\n  const labelClasses = classNames(\n    \"mobius/NumberFieldLabel\",\n    {\n      \"--is-disabled\": isDisabled,\n    },\n    validationClasses,\n  );\n\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n\n  const handleChange = (event: ChangeEvent<NumberFieldElementType>) => {\n    // Only allow change between min and max values\n    const enteredValue = Number(event.target.value);\n    if (\n      (minValue && enteredValue < minValue) ||\n      (maxValue && enteredValue > maxValue)\n    ) {\n      return;\n    }\n    setValue(enteredValue);\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  // Only allow numeric input\n  const handleBeforeInput = (\n    event: CompositionEvent<NumberFieldElementType>,\n  ) => {\n    const allowedChars = /[\\d]/;\n\n    if (event.data && !allowedChars.test(event.data)) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  return (\n    <div className={containerClasses}>\n      {label && (\n        <Label {...labelProps} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius/NumberFieldInputWrapper\">\n        <input\n          {...fieldProps}\n          ref={inputRef || ref}\n          className={inputClasses}\n          type=\"number\"\n          onChange={handleChange}\n          onBeforeInput={handleBeforeInput}\n          max={maxValue}\n          min={minValue}\n          step={step}\n          value={valueWithoutLeadingZero}\n          placeholder={placeholder}\n          required={required}\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={isInvalid}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          spellCheck=\"false\"\n        />\n      </div>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </div>\n  );\n});\n"],"names":["classNames","forwardRef","useId","useRef","useState","useLabel","useValidationClasses","spaceDelimitedList","ErrorMessage","Label","NumberField","props","ref","id","isDisabled","isRequired","label","ariaLabel","ariaLabelledBy","ariaDescribedBy","className","errorMessage","validationState","isInvalid","isReadOnly","minValue","maxValue","step","placeholder","defaultValue","onChange","inputRef","value","setValue","valueWithoutLeadingZero","toString","replace","optional","required","labelProps","fieldProps","containerClasses","validationClasses","inputClasses","labelClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","handleChange","event","enteredValue","Number","target","handleBeforeInput","allowedChars","data","test","preventDefault","stopPropagation","div","input","type","onBeforeInput","max","min","aria-describedby","aria-errormessage","aria-invalid","readOnly","disabled","autoComplete","autoCorrect","spellCheck"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/esm/components/Radio/RadioGroup.js

@@ -5,6 +5,7 @@ import classNames from "classnames/dedupe";
 import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
 import { ErrorMessage } from "../ErrorMessage";
 import { Label } from "../Label";
+import { useValidationClasses } from "../../hooks";
 const getDefaultVal = (children, defaultValue)=>{
     if (Array.isArray(children) && defaultValue) {
         const option = children === null || children === void 0 ? void 0 : children.find((item)=>item.props.value === defaultValue);
@@ -14,23 +15,25 @@ const getDefaultVal = (children, defaultValue)=>{
     return "";
 };
 const RadioGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { label, isDisabled = false, isRequired, validationState, orientation = "vertical", className, errorMessage, children, defaultValue, isReadOnly, name, onChange, ...rest } = props;
+    const { label, isDisabled = false, isRequired, validationState, isInvalid, orientation = "vertical", className, errorMessage, children, defaultValue, isReadOnly, name, onChange, ...rest } = props;
     const defaultSelected = getDefaultVal(children, defaultValue);
     const [selected, setSelected] = useState(defaultSelected);
+    const validationClasses = useValidationClasses({
+        validationState,
+        isInvalid
+    });
     const radioClasses = {
         "--is-disabled": isDisabled,
-        "--is-valid": validationState === "valid",
-        "--is-invalid": validationState === "invalid",
         "--is-required": typeof isRequired === "boolean" && isRequired,
         "--is-optional": typeof isRequired === "boolean" && !isRequired,
         [`--is-${orientation}`]: true,
         [className || ""]: true
     };
-    const radioGroupClasses = classNames("mobius", "mobius/RadioGroup", radioClasses);
+    const radioGroupClasses = classNames("mobius", "mobius/RadioGroup", radioClasses, validationClasses);
     const radioWrapperClasses = classNames("mobius/RadioWrapper", {
         [`--is-${orientation}`]: true
     });
-    const labelClasses = classNames(radioClasses);
+    const labelClasses = classNames(radioClasses, validationClasses);
     const errorMessageId = useId();
     const defaultNameAttrId = useId();
     const nameAttribute = name || defaultNameAttrId;
@@ -45,7 +48,7 @@ const RadioGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
         "aria-describedby": props["aria-describedby"],
         "aria-disabled": isDisabled,
         "aria-errormessage": shouldErrorMessageShow,
-        "aria-invalid": validationState === "invalid",
+        "aria-invalid": isInvalid,
         "aria-label": props["aria-label"],
         "aria-labelledby": props["aria-labelledby"] || labelId,
         "aria-orientation": orientation,

package/dist/esm/components/Radio/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Radio/RadioGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useId,\n  useState,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { HTMLElementEvent } from \"../../types/events\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\n\nexport type RadioGroupElementType = HTMLDivElement;\n\nexport interface RadioGroupProps\n  extends DOMProps,\n    RefAttributes<RadioGroupElementType> {\n  children: ReactNode;\n  className?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  errorMessage?: string;\n  // Callback that fires when select changes\n  onChange?: (event: HTMLElementEvent<HTMLInputElement>) => void;\n  // Defines a string value that labels the current element.\n  \"aria-label\"?: string;\n  // Identifies the element (or elements) that labels the current element.\n  \"aria-labelledby\"?: string;\n  // Identifies the element that provides an error message for the object.\n  \"aria-errormessage\"?: string;\n  // Identifies the element (or elements) that describes the object.\n  \"aria-describedby\"?: string;\n  // Whether the input should display its \"valid\" or \"invalid\" visual styling.\n  validationState?: \"valid\" | \"invalid\";\n  // Whether user input is required on the input before form submission.\n  isRequired?: boolean;\n  // Whether the input is disabled.\n  isDisabled?: boolean;\n  // Whether the input can be selected but not changed by the user.\n  isReadOnly?: boolean;\n  // The default value (uncontrolled).\n  defaultValue?: string;\n  // The content to display as the label.\n  label?: ReactNode;\n  /**\n   * The value of the radio button, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).\n   */\n  value?: string;\n  name?: string;\n}\n\nexport type RadioGroupRef = Ref<RadioGroupElementType>;\n\nconst getDefaultVal = (children: ReactNode, defaultValue?: string) => {\n  if (Array.isArray(children) && defaultValue) {\n    const option = children?.find(item => item.props.value === defaultValue);\n\n    if (!option) return \"\";\n\n    return option.props.value;\n  }\n\n  return \"\";\n};\n\nconst RadioGroup: ForwardedRefComponent<\n  RadioGroupProps,\n  RadioGroupElementType\n> = forwardRef((props: RadioGroupProps, ref: RadioGroupRef) => {\n  const {\n    label,\n    isDisabled = false,\n    isRequired,\n    validationState,\n    orientation = \"vertical\",\n    className,\n    errorMessage,\n    children,\n    defaultValue,\n    isReadOnly,\n    name,\n    onChange,\n    ...rest\n  } = props;\n  const defaultSelected = getDefaultVal(children, defaultValue);\n  const [selected, setSelected] = useState<string>(defaultSelected);\n  const radioClasses = {\n    \"--is-disabled\": isDisabled,\n    \"--is-valid\": validationState === \"valid\",\n    \"--is-invalid\": validationState === \"invalid\",\n    \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n    \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    [`--is-${orientation}`]: true,\n    [className || \"\"]: true,\n  };\n  const radioGroupClasses = classNames(\n    \"mobius\",\n    \"mobius/RadioGroup\",\n    radioClasses,\n  );\n  const radioWrapperClasses = classNames(\"mobius/RadioWrapper\", {\n    [`--is-${orientation}`]: true,\n  });\n  const labelClasses = classNames(radioClasses);\n  const errorMessageId = useId();\n  const defaultNameAttrId = useId();\n  const nameAttribute = name || defaultNameAttrId;\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n  const labelId = useId();\n\n  return (\n    <div\n      {...rest}\n      aria-describedby={props[\"aria-describedby\"]}\n      aria-disabled={isDisabled}\n      aria-errormessage={shouldErrorMessageShow}\n      aria-invalid={validationState === \"invalid\"}\n      aria-label={props[\"aria-label\"]}\n      aria-labelledby={props[\"aria-labelledby\"] || labelId}\n      aria-orientation={orientation}\n      aria-readonly={isReadOnly}\n      aria-required={isRequired}\n      ref={ref}\n      className={radioGroupClasses}\n      role=\"radiogroup\"\n    >\n      {label && (\n        <Label htmlFor={name} id={labelId} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className={radioWrapperClasses}>\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            return cloneElement(child as ReactElement, {\n              orientation,\n              groupDisabled: isDisabled,\n              name: nameAttribute,\n              selected,\n              setSelected,\n              isRequired,\n              \"aria-describedby\": describedBy,\n              onChange,\n            });\n          }\n\n          return child;\n        })}\n      </div>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </div>\n  );\n});\n\nRadioGroup.displayName = \"RadioGroup\";\nexport { RadioGroup };\n"],"names":["Children","cloneElement","forwardRef","isValidElement","useId","useState","classNames","spaceDelimitedList","ErrorMessage","Label","getDefaultVal","children","defaultValue","Array","isArray","option","find","item","props","value","RadioGroup","ref","label","isDisabled","isRequired","validationState","orientation","className","errorMessage","isReadOnly","name","onChange","rest","defaultSelected","selected","setSelected","radioClasses","radioGroupClasses","radioWrapperClasses","labelClasses","errorMessageId","defaultNameAttrId","nameAttribute","shouldErrorMessageShow","undefined","describedBy","labelId","div","aria-describedby","aria-disabled","aria-errormessage","aria-invalid","aria-label","aria-labelledby","aria-orientation","aria-readonly","aria-required","role","htmlFor","id","map","child","groupDisabled","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,SACEA,QAAQ,EAKRC,YAAY,EACZC,UAAU,EACVC,cAAc,EACdC,KAAK,EACLC,QAAQ,QACH,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAI3C,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,KAAK,QAAQ,WAAW;AA2CjC,MAAMC,gBAAgB,CAACC,UAAqBC;IAC1C,IAAIC,MAAMC,OAAO,CAACH,aAAaC,cAAc;QAC3C,MAAMG,SAASJ,qBAAAA,+BAAAA,SAAUK,IAAI,CAACC,CAAAA,OAAQA,KAAKC,KAAK,CAACC,KAAK,KAAKP;QAE3D,IAAI,CAACG,QAAQ,OAAO;QAEpB,OAAOA,OAAOG,KAAK,CAACC,KAAK;IAC3B;IAEA,OAAO;AACT;AAEA,MAAMC,2BAGFlB,WAAW,CAACgB,OAAwBG;IACtC,MAAM,EACJC,KAAK,EACLC,aAAa,KAAK,EAClBC,UAAU,EACVC,eAAe,EACfC,cAAc,UAAU,EACxBC,SAAS,EACTC,YAAY,EACZjB,QAAQ,EACRC,YAAY,EACZiB,UAAU,EACVC,IAAI,EACJC,QAAQ,EACR,GAAGC,MACJ,GAAGd;IACJ,MAAMe,kBAAkBvB,cAAcC,UAAUC;IAChD,MAAM,CAACsB,UAAUC,YAAY,GAAG9B,SAAiB4B;IACjD,MAAMG,eAAe;QACnB,iBAAiBb;QACjB,cAAcE,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiB,OAAOD,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;QACrD,CAAC,CAAC,KAAK,EAAEE,YAAY,CAAC,CAAC,EAAE;QACzB,CAACC,aAAa,GAAG,EAAE;IACrB;IACA,MAAMU,oBAAoB/B,WACxB,UACA,qBACA8B;IAEF,MAAME,sBAAsBhC,WAAW,uBAAuB;QAC5D,CAAC,CAAC,KAAK,EAAEoB,YAAY,CAAC,CAAC,EAAE;IAC3B;IACA,MAAMa,eAAejC,WAAW8B;IAChC,MAAMI,iBAAiBpC;IACvB,MAAMqC,oBAAoBrC;IAC1B,MAAMsC,gBAAgBZ,QAAQW;IAC9B,MAAME,yBAAyBf,eAAeY,iBAAiBI;IAC/D,MAAMC,cAActC,mBAAmB;QACrCoC;QACAzB,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAM4B,UAAU1C;IAEhB,qBACE,MAAC2C;QACE,GAAGf,IAAI;QACRgB,oBAAkB9B,KAAK,CAAC,mBAAmB;QAC3C+B,iBAAe1B;QACf2B,qBAAmBP;QACnBQ,gBAAc1B,oBAAoB;QAClC2B,cAAYlC,KAAK,CAAC,aAAa;QAC/BmC,mBAAiBnC,KAAK,CAAC,kBAAkB,IAAI4B;QAC7CQ,oBAAkB5B;QAClB6B,iBAAe1B;QACf2B,iBAAehC;QACfH,KAAKA;QACLM,WAAWU;QACXoB,MAAK;;YAEJnC,uBACC,KAACb;gBAAMiD,SAAS5B;gBAAM6B,IAAIb;gBAASnB,WAAWY;0BAC3CjB;;0BAGL,KAACyB;gBAAIpB,WAAWW;0BACbtC,SAAS4D,GAAG,CAACjD,UAAUkD,CAAAA;oBACtB,kBAAI1D,eAAe0D,QAAQ;wBACzB,qBAAO5D,aAAa4D,OAAuB;4BACzCnC;4BACAoC,eAAevC;4BACfO,MAAMY;4BACNR;4BACAC;4BACAX;4BACA,oBAAoBqB;4BACpBd;wBACF;oBACF;oBAEA,OAAO8B;gBACT;;0BAEF,KAACrD;gBAAamD,IAAInB;gBAAgBZ,cAAcA;;;;AAGtD;AAEAR,WAAW2C,WAAW,GAAG;AACzB,SAAS3C,UAAU,GAAG"}
+{"version":3,"sources":["../../../../src/components/Radio/RadioGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useId,\n  useState,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { HTMLElementEvent } from \"../../types/events\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Validation } from \"../../types\";\nimport { useValidationClasses } from \"../../hooks\";\n\nexport type RadioGroupElementType = HTMLDivElement;\n\nexport interface RadioGroupProps\n  extends DOMProps,\n    Validation,\n    RefAttributes<RadioGroupElementType> {\n  children: ReactNode;\n  className?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  errorMessage?: string;\n  // Callback that fires when select changes\n  onChange?: (event: HTMLElementEvent<HTMLInputElement>) => void;\n  // Defines a string value that labels the current element.\n  \"aria-label\"?: string;\n  // Identifies the element (or elements) that labels the current element.\n  \"aria-labelledby\"?: string;\n  // Identifies the element that provides an error message for the object.\n  \"aria-errormessage\"?: string;\n  // Identifies the element (or elements) that describes the object.\n  \"aria-describedby\"?: string;\n  // Whether user input is required on the input before form submission.\n  isRequired?: boolean;\n  // Whether the input is disabled.\n  isDisabled?: boolean;\n  // Whether the input can be selected but not changed by the user.\n  isReadOnly?: boolean;\n  // The default value (uncontrolled).\n  defaultValue?: string;\n  // The content to display as the label.\n  label?: ReactNode;\n  /**\n   * The value of the radio button, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).\n   */\n  value?: string;\n  name?: string;\n}\n\nexport type RadioGroupRef = Ref<RadioGroupElementType>;\n\nconst getDefaultVal = (children: ReactNode, defaultValue?: string) => {\n  if (Array.isArray(children) && defaultValue) {\n    const option = children?.find(item => item.props.value === defaultValue);\n\n    if (!option) return \"\";\n\n    return option.props.value;\n  }\n\n  return \"\";\n};\n\nconst RadioGroup: ForwardedRefComponent<\n  RadioGroupProps,\n  RadioGroupElementType\n> = forwardRef((props: RadioGroupProps, ref: RadioGroupRef) => {\n  const {\n    label,\n    isDisabled = false,\n    isRequired,\n    validationState,\n    isInvalid,\n    orientation = \"vertical\",\n    className,\n    errorMessage,\n    children,\n    defaultValue,\n    isReadOnly,\n    name,\n    onChange,\n    ...rest\n  } = props;\n  const defaultSelected = getDefaultVal(children, defaultValue);\n  const [selected, setSelected] = useState<string>(defaultSelected);\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const radioClasses = {\n    \"--is-disabled\": isDisabled,\n    \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n    \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    [`--is-${orientation}`]: true,\n    [className || \"\"]: true,\n  };\n  const radioGroupClasses = classNames(\n    \"mobius\",\n    \"mobius/RadioGroup\",\n    radioClasses,\n    validationClasses,\n  );\n  const radioWrapperClasses = classNames(\"mobius/RadioWrapper\", {\n    [`--is-${orientation}`]: true,\n  });\n  const labelClasses = classNames(radioClasses, validationClasses);\n  const errorMessageId = useId();\n  const defaultNameAttrId = useId();\n  const nameAttribute = name || defaultNameAttrId;\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n  const labelId = useId();\n\n  return (\n    <div\n      {...rest}\n      aria-describedby={props[\"aria-describedby\"]}\n      aria-disabled={isDisabled}\n      aria-errormessage={shouldErrorMessageShow}\n      aria-invalid={isInvalid}\n      aria-label={props[\"aria-label\"]}\n      aria-labelledby={props[\"aria-labelledby\"] || labelId}\n      aria-orientation={orientation}\n      aria-readonly={isReadOnly}\n      aria-required={isRequired}\n      ref={ref}\n      className={radioGroupClasses}\n      role=\"radiogroup\"\n    >\n      {label && (\n        <Label htmlFor={name} id={labelId} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className={radioWrapperClasses}>\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            return cloneElement(child as ReactElement, {\n              orientation,\n              groupDisabled: isDisabled,\n              name: nameAttribute,\n              selected,\n              setSelected,\n              isRequired,\n              \"aria-describedby\": describedBy,\n              onChange,\n            });\n          }\n\n          return child;\n        })}\n      </div>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </div>\n  );\n});\n\nRadioGroup.displayName = \"RadioGroup\";\nexport { RadioGroup };\n"],"names":["Children","cloneElement","forwardRef","isValidElement","useId","useState","classNames","spaceDelimitedList","ErrorMessage","Label","useValidationClasses","getDefaultVal","children","defaultValue","Array","isArray","option","find","item","props","value","RadioGroup","ref","label","isDisabled","isRequired","validationState","isInvalid","orientation","className","errorMessage","isReadOnly","name","onChange","rest","defaultSelected","selected","setSelected","validationClasses","radioClasses","radioGroupClasses","radioWrapperClasses","labelClasses","errorMessageId","defaultNameAttrId","nameAttribute","shouldErrorMessageShow","undefined","describedBy","labelId","div","aria-describedby","aria-disabled","aria-errormessage","aria-invalid","aria-label","aria-labelledby","aria-orientation","aria-readonly","aria-required","role","htmlFor","id","map","child","groupDisabled","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/esm/components/Select/Select.js

@@ -7,23 +7,27 @@ import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
 import { ErrorMessage } from "../ErrorMessage";
 import { Flex } from "../Flex";
 import { Label } from "../Label";
+import { useValidationClasses } from "../../hooks";
 const Select = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { label, onChange, validationState, errorMessage, isDisabled = false, isRequired, ...otherProps } = props;
+    const { label, onChange, validationState, isInvalid, errorMessage, isDisabled = false, isRequired, ...otherProps } = props;
     const { labelProps, fieldProps } = useLabel({
         label,
         ...otherProps
     });
+    const validationClasses = useValidationClasses({
+        validationState,
+        isInvalid
+    });
     const stateClasses = {
         "--is-disabled": isDisabled,
-        "--is-valid": validationState === "valid",
-        "--is-invalid": validationState === "invalid",
         "--is-required": typeof isRequired === "boolean" && isRequired,
         "--is-optional": typeof isRequired === "boolean" && !isRequired
     };
-    const wrapperClasses = classNames("mobius/SelectWrapper", stateClasses, otherProps.className);
-    const selectClasses = classNames("mobius/Select", stateClasses, otherProps.className);
-    const labelClasses = classNames("mobius/Label", stateClasses, otherProps.className);
-    const iconClasses = classNames("mobius/SelectIcon", stateClasses);
+    const sharedClasses = classNames(validationClasses, stateClasses);
+    const wrapperClasses = classNames("mobius/SelectWrapper", sharedClasses, otherProps.className);
+    const selectClasses = classNames("mobius/Select", sharedClasses, otherProps.className);
+    const labelClasses = classNames("mobius/Label", sharedClasses, otherProps.className);
+    const iconClasses = classNames("mobius/SelectIcon", sharedClasses);
     const errorMessageId = useId();
     const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
     const describedBy = spaceDelimitedList([

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  ChangeEvent,\n  ReactElement,\n  Ref,\n  RefAttributes,\n  forwardRef,\n  useId,\n} from \"react\";\nimport { UseLabelProps, useLabel } from \"../../hooks/useLabel\";\nimport { DOMProps, Validation } from \"../../types\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Flex } from \"../Flex\";\nimport { Label } from \"../Label\";\nimport { OptionProps } from \"../Option\";\n\nexport type SelectElementType = HTMLSelectElement;\nexport interface SelectProps\n  extends UseLabelProps,\n    Validation,\n    DOMProps,\n    RefAttributes<SelectElementType> {\n  name?: string;\n  onChange?: (e: ChangeEvent<HTMLSelectElement>) => void;\n  value?: string;\n  defaultValue?: string;\n  className?: string;\n  errorMessage?: string;\n  children?: ReactElement<OptionProps>[] | ReactElement<OptionProps>;\n  \"aria-describedby\"?: string;\n  isDisabled?: boolean;\n}\n\nexport type SelectRef = Ref<SelectElementType>;\n\nconst Select: ForwardedRefComponent<SelectProps, SelectElementType> =\n  forwardRef((props: SelectProps, ref: SelectRef) => {\n    const {\n      label,\n      onChange,\n      validationState,\n      errorMessage,\n      isDisabled = false,\n      isRequired,\n      ...otherProps\n    } = props;\n\n    const { labelProps, fieldProps } = useLabel({\n      label,\n      ...otherProps,\n    });\n\n    const stateClasses = {\n      \"--is-disabled\": isDisabled,\n      \"--is-valid\": validationState === \"valid\",\n      \"--is-invalid\": validationState === \"invalid\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    };\n\n    const wrapperClasses = classNames(\n      \"mobius/SelectWrapper\",\n      stateClasses,\n      otherProps.className,\n    );\n    const selectClasses = classNames(\n      \"mobius/Select\",\n      stateClasses,\n      otherProps.className,\n    );\n    const labelClasses = classNames(\n      \"mobius/Label\",\n      stateClasses,\n      otherProps.className,\n    );\n    const iconClasses = classNames(\"mobius/SelectIcon\", stateClasses);\n    const errorMessageId = useId();\n    const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n    const describedBy = spaceDelimitedList([\n      shouldErrorMessageShow,\n      props[\"aria-describedby\"],\n    ]);\n\n    const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {\n      if (onChange) {\n        onChange(e);\n      }\n    };\n\n    return (\n      <Flex flexDirection=\"column\" className=\"mobius mobius/SelectOuter\">\n        {label && (\n          <Label {...labelProps} className={labelClasses}>\n            {label}\n          </Label>\n        )}\n        <div className={wrapperClasses}>\n          <select\n            {...otherProps}\n            {...fieldProps}\n            ref={ref}\n            multiple={false}\n            className={selectClasses}\n            disabled={isDisabled}\n            aria-invalid={!!errorMessage}\n            aria-describedby={describedBy}\n            aria-required={isRequired}\n            onChange={handleChange}\n          />\n          <span className={iconClasses} />\n        </div>\n        {errorMessage && (\n          <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n        )}\n      </Flex>\n    );\n  });\n\nSelect.displayName = \"Select\";\nexport { Select };\n"],"names":["classNames","forwardRef","useId","useLabel","spaceDelimitedList","ErrorMessage","Flex","Label","Select","props","ref","label","onChange","validationState","errorMessage","isDisabled","isRequired","otherProps","labelProps","fieldProps","stateClasses","wrapperClasses","className","selectClasses","labelClasses","iconClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","handleChange","e","flexDirection","div","select","multiple","disabled","aria-invalid","aria-describedby","aria-required","span","id","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAKEC,UAAU,EACVC,KAAK,QACA,QAAQ;AACf,SAAwBC,QAAQ,QAAQ,uBAAuB;AAG/D,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,KAAK,QAAQ,WAAW;AAsBjC,MAAMC,uBACJP,WAAW,CAACQ,OAAoBC;IAC9B,MAAM,EACJC,KAAK,EACLC,QAAQ,EACRC,eAAe,EACfC,YAAY,EACZC,aAAa,KAAK,EAClBC,UAAU,EACV,GAAGC,YACJ,GAAGR;IAEJ,MAAM,EAAES,UAAU,EAAEC,UAAU,EAAE,GAAGhB,SAAS;QAC1CQ;QACA,GAAGM,UAAU;IACf;IAEA,MAAMG,eAAe;QACnB,iBAAiBL;QACjB,cAAcF,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiB,OAAOG,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEA,MAAMK,iBAAiBrB,WACrB,wBACAoB,cACAH,WAAWK,SAAS;IAEtB,MAAMC,gBAAgBvB,WACpB,iBACAoB,cACAH,WAAWK,SAAS;IAEtB,MAAME,eAAexB,WACnB,gBACAoB,cACAH,WAAWK,SAAS;IAEtB,MAAMG,cAAczB,WAAW,qBAAqBoB;IACpD,MAAMM,iBAAiBxB;IACvB,MAAMyB,yBAAyBb,eAAeY,iBAAiBE;IAC/D,MAAMC,cAAczB,mBAAmB;QACrCuB;QACAlB,KAAK,CAAC,mBAAmB;KAC1B;IAED,MAAMqB,eAAe,CAACC;QACpB,IAAInB,UAAU;YACZA,SAASmB;QACX;IACF;IAEA,qBACE,MAACzB;QAAK0B,eAAc;QAASV,WAAU;;YACpCX,uBACC,KAACJ;gBAAO,GAAGW,UAAU;gBAAEI,WAAWE;0BAC/Bb;;0BAGL,MAACsB;gBAAIX,WAAWD;;kCACd,KAACa;wBACE,GAAGjB,UAAU;wBACb,GAAGE,UAAU;wBACdT,KAAKA;wBACLyB,UAAU;wBACVb,WAAWC;wBACXa,UAAUrB;wBACVsB,gBAAc,CAAC,CAACvB;wBAChBwB,oBAAkBT;wBAClBU,iBAAevB;wBACfJ,UAAUkB;;kCAEZ,KAACU;wBAAKlB,WAAWG;;;;YAElBX,8BACC,KAACT;gBAAaoC,IAAIf;gBAAgBZ,cAAcA;;;;AAIxD;AAEFN,OAAOkC,WAAW,GAAG;AACrB,SAASlC,MAAM,GAAG"}
+{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  ChangeEvent,\n  ReactElement,\n  Ref,\n  RefAttributes,\n  forwardRef,\n  useId,\n} from \"react\";\nimport { UseLabelProps, useLabel } from \"../../hooks/useLabel\";\nimport { DOMProps, Validation } from \"../../types\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Flex } from \"../Flex\";\nimport { Label } from \"../Label\";\nimport { OptionProps } from \"../Option\";\nimport { useValidationClasses } from \"../../hooks\";\n\nexport type SelectElementType = HTMLSelectElement;\nexport interface SelectProps\n  extends UseLabelProps,\n    Validation,\n    DOMProps,\n    RefAttributes<SelectElementType> {\n  name?: string;\n  onChange?: (e: ChangeEvent<HTMLSelectElement>) => void;\n  value?: string;\n  defaultValue?: string;\n  className?: string;\n  errorMessage?: string;\n  children?: ReactElement<OptionProps>[] | ReactElement<OptionProps>;\n  \"aria-describedby\"?: string;\n  isDisabled?: boolean;\n}\n\nexport type SelectRef = Ref<SelectElementType>;\n\nconst Select: ForwardedRefComponent<SelectProps, SelectElementType> =\n  forwardRef((props: SelectProps, ref: SelectRef) => {\n    const {\n      label,\n      onChange,\n      validationState,\n      isInvalid,\n      errorMessage,\n      isDisabled = false,\n      isRequired,\n      ...otherProps\n    } = props;\n\n    const { labelProps, fieldProps } = useLabel({\n      label,\n      ...otherProps,\n    });\n\n    const validationClasses = useValidationClasses({\n      validationState,\n      isInvalid,\n    });\n\n    const stateClasses = {\n      \"--is-disabled\": isDisabled,\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    };\n\n    const sharedClasses = classNames(validationClasses, stateClasses);\n\n    const wrapperClasses = classNames(\n      \"mobius/SelectWrapper\",\n      sharedClasses,\n      otherProps.className,\n    );\n    const selectClasses = classNames(\n      \"mobius/Select\",\n      sharedClasses,\n      otherProps.className,\n    );\n    const labelClasses = classNames(\n      \"mobius/Label\",\n      sharedClasses,\n      otherProps.className,\n    );\n    const iconClasses = classNames(\"mobius/SelectIcon\", sharedClasses);\n    const errorMessageId = useId();\n    const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n    const describedBy = spaceDelimitedList([\n      shouldErrorMessageShow,\n      props[\"aria-describedby\"],\n    ]);\n\n    const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {\n      if (onChange) {\n        onChange(e);\n      }\n    };\n\n    return (\n      <Flex flexDirection=\"column\" className=\"mobius mobius/SelectOuter\">\n        {label && (\n          <Label {...labelProps} className={labelClasses}>\n            {label}\n          </Label>\n        )}\n        <div className={wrapperClasses}>\n          <select\n            {...otherProps}\n            {...fieldProps}\n            ref={ref}\n            multiple={false}\n            className={selectClasses}\n            disabled={isDisabled}\n            aria-invalid={!!errorMessage}\n            aria-describedby={describedBy}\n            aria-required={isRequired}\n            onChange={handleChange}\n          />\n          <span className={iconClasses} />\n        </div>\n        {errorMessage && (\n          <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n        )}\n      </Flex>\n    );\n  });\n\nSelect.displayName = \"Select\";\nexport { Select };\n"],"names":["classNames","forwardRef","useId","useLabel","spaceDelimitedList","ErrorMessage","Flex","Label","useValidationClasses","Select","props","ref","label","onChange","validationState","isInvalid","errorMessage","isDisabled","isRequired","otherProps","labelProps","fieldProps","validationClasses","stateClasses","sharedClasses","wrapperClasses","className","selectClasses","labelClasses","iconClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","handleChange","e","flexDirection","div","select","multiple","disabled","aria-invalid","aria-describedby","aria-required","span","id","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAKEC,UAAU,EACVC,KAAK,QACA,QAAQ;AACf,SAAwBC,QAAQ,QAAQ,uBAAuB;AAG/D,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,KAAK,QAAQ,WAAW;AAEjC,SAASC,oBAAoB,QAAQ,cAAc;AAqBnD,MAAMC,uBACJR,WAAW,CAACS,OAAoBC;IAC9B,MAAM,EACJC,KAAK,EACLC,QAAQ,EACRC,eAAe,EACfC,SAAS,EACTC,YAAY,EACZC,aAAa,KAAK,EAClBC,UAAU,EACV,GAAGC,YACJ,GAAGT;IAEJ,MAAM,EAAEU,UAAU,EAAEC,UAAU,EAAE,GAAGlB,SAAS;QAC1CS;QACA,GAAGO,UAAU;IACf;IAEA,MAAMG,oBAAoBd,qBAAqB;QAC7CM;QACAC;IACF;IAEA,MAAMQ,eAAe;QACnB,iBAAiBN;QACjB,iBAAiB,OAAOC,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEA,MAAMM,gBAAgBxB,WAAWsB,mBAAmBC;IAEpD,MAAME,iBAAiBzB,WACrB,wBACAwB,eACAL,WAAWO,SAAS;IAEtB,MAAMC,gBAAgB3B,WACpB,iBACAwB,eACAL,WAAWO,SAAS;IAEtB,MAAME,eAAe5B,WACnB,gBACAwB,eACAL,WAAWO,SAAS;IAEtB,MAAMG,cAAc7B,WAAW,qBAAqBwB;IACpD,MAAMM,iBAAiB5B;IACvB,MAAM6B,yBAAyBf,eAAec,iBAAiBE;IAC/D,MAAMC,cAAc7B,mBAAmB;QACrC2B;QACArB,KAAK,CAAC,mBAAmB;KAC1B;IAED,MAAMwB,eAAe,CAACC;QACpB,IAAItB,UAAU;YACZA,SAASsB;QACX;IACF;IAEA,qBACE,MAAC7B;QAAK8B,eAAc;QAASV,WAAU;;YACpCd,uBACC,KAACL;gBAAO,GAAGa,UAAU;gBAAEM,WAAWE;0BAC/BhB;;0BAGL,MAACyB;gBAAIX,WAAWD;;kCACd,KAACa;wBACE,GAAGnB,UAAU;wBACb,GAAGE,UAAU;wBACdV,KAAKA;wBACL4B,UAAU;wBACVb,WAAWC;wBACXa,UAAUvB;wBACVwB,gBAAc,CAAC,CAACzB;wBAChB0B,oBAAkBT;wBAClBU,iBAAezB;wBACfL,UAAUqB;;kCAEZ,KAACU;wBAAKlB,WAAWG;;;;YAElBb,8BACC,KAACX;gBAAawC,IAAIf;gBAAgBd,cAAcA;;;;AAIxD;AAEFP,OAAOqC,WAAW,GAAG;AACrB,SAASrC,MAAM,GAAG"}

package/dist/esm/components/Slider/helpers.test.js

@@ -0,0 +1,73 @@
+import { renderHook } from "@testing-library/react";
+import { numberFormatter, unwrapFirstValue, useUnwrappedHandler, useWrappedValue, wrapValue, } from "./helpers";
+describe("Slider helpers", () => {
+    describe("unwrapFirstValue", () => {
+        it("should return undefined if the value is undefined", () => {
+            expect(unwrapFirstValue(undefined)).toBeUndefined();
+        });
+        it("should return undefined if the value is an empty array", () => {
+            expect(unwrapFirstValue([])).toBeUndefined();
+        });
+        it("should return the first value if the value is an array with one element", () => {
+            expect(unwrapFirstValue([1])).toBe(1);
+        });
+        it("should return the first value if the value is an array with more than one element", () => {
+            expect(unwrapFirstValue([1, 2])).toBe(1);
+        });
+    });
+    describe("wrapValue", () => {
+        it("should return undefined if the value is undefined", () => {
+            expect(wrapValue(undefined)).toBeUndefined();
+        });
+        it("should return the value if it is not an array", () => {
+            expect(wrapValue(1)).toEqual([1]);
+        });
+        it("should return an array of array if value is an array", () => {
+            expect(wrapValue([1])).toEqual([[1]]);
+        });
+    });
+    describe("useWrappedValue", () => {
+        it("should return undefined if the value is undefined", () => {
+            const { result } = renderHook(() => useWrappedValue(undefined));
+            expect(result.current).toBeUndefined();
+        });
+        it("should return the value if it is not an array", () => {
+            const { result } = renderHook(() => useWrappedValue(1));
+            expect(result.current).toEqual([1]);
+        });
+        it("should return an array of array if value is an array", () => {
+            const { result } = renderHook(() => useWrappedValue([1]));
+            expect(result.current).toEqual([[1]]);
+        });
+    });
+    describe("useUnwrappedHandler", () => {
+        it("should call the handler with the unwrapped value", () => {
+            const handler = jest.fn();
+            const { result } = renderHook(() => useUnwrappedHandler(handler));
+            result.current([1]);
+            expect(handler).toHaveBeenCalledWith(1);
+        });
+    });
+    describe("numberFormatter", () => {
+        it("returns an empty string when no params are passed", () => {
+            expect(numberFormatter(undefined)).toEqual("");
+        });
+        it("returns the unformatted value when no formatter is present", () => {
+            expect(numberFormatter(43)).toEqual("43");
+            expect(numberFormatter("QQ")).toEqual("QQ");
+        });
+        it("returns the unformatted value when format options are empty", () => {
+            const formatOptions = {};
+            expect(numberFormatter(35, formatOptions)).toEqual("35");
+        });
+        it("returns a formatted value, defaulting to en-GB locale", () => {
+            const formatOptions = { style: "currency", currency: "EUR" };
+            expect(numberFormatter(35.4, formatOptions)).toEqual("€35.40");
+        });
+        it("respects a locale if supplied", () => {
+            const formatOptions = { style: "currency", currency: "EUR" };
+            expect(numberFormatter(35.4, formatOptions, "de-DE")).toEqual("35,40 €");
+        });
+    });
+});
+//# sourceMappingURL=helpers.test.js.map

package/dist/esm/components/Slider/helpers.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.test.js","sourceRoot":"","sources":["../../../../src/components/Slider/helpers.test.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/Stack/Stack.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames/dedupe";
+import { sizeClasses } from "../../utils";
+export const Stack = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { elementType: Element = "div", direction = "row", spacing = "xs", ...otherProps } = props;
+    const spaceClasses = sizeClasses(spacing);
+    const classes = classNames("mobius", "mobius/Stack", spaceClasses, {
+        "--is-horizontal": direction === "row",
+        "--is-vertical": direction === "column"
+    }, otherProps.className);
+    return /*#__PURE__*/ _jsx(Element, {
+        ref: ref,
+        ...otherProps,
+        className: classes
+    });
+});
+
+//# sourceMappingURL=Stack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { SizeType } from \"../../types\";\nimport { sizeClasses } from \"../../utils\";\n\nexport type StackElementType = HTMLDivElement;\n\nexport interface StackProps extends DOMProps, RefAttributes<StackElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: string | React.ElementType;\n  direction?: \"row\" | \"column\";\n  spacing?: SizeType;\n}\n\nexport type StackRef = Ref<StackElementType>;\n\nexport const Stack: ForwardedRefComponent<StackProps, StackElementType> =\n  forwardRef((props: StackProps, ref: StackRef) => {\n    const {\n      elementType: Element = \"div\",\n      direction = \"row\",\n      spacing = \"xs\",\n      ...otherProps\n    } = props;\n\n    const spaceClasses = sizeClasses(spacing);\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Stack\",\n      spaceClasses,\n      {\n        \"--is-horizontal\": direction === \"row\",\n        \"--is-vertical\": direction === \"column\",\n      },\n      otherProps.className,\n    );\n\n    return <Element ref={ref} {...otherProps} className={classes} />;\n  });\n"],"names":["forwardRef","classNames","sizeClasses","Stack","props","ref","elementType","Element","direction","spacing","otherProps","spaceClasses","classes","className"],"mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAI3C,SAASC,WAAW,QAAQ,cAAc;AAe1C,OAAO,MAAMC,sBACXH,WAAW,CAACI,OAAmBC;IAC7B,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,YAAY,KAAK,EACjBC,UAAU,IAAI,EACd,GAAGC,YACJ,GAAGN;IAEJ,MAAMO,eAAeT,YAAYO;IAEjC,MAAMG,UAAUX,WACd,UACA,gBACAU,cACA;QACE,mBAAmBH,cAAc;QACjC,iBAAiBA,cAAc;IACjC,GACAE,WAAWG,SAAS;IAGtB,qBAAO,KAACN;QAAQF,KAAKA;QAAM,GAAGK,UAAU;QAAEG,WAAWD;;AACvD,GAAG"}

package/dist/esm/components/Stack/index.js

@@ -0,0 +1,3 @@
+export * from "./Stack";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Stack/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Stack/index.tsx"],"sourcesContent":["export * from \"./Stack\";\n"],"names":[],"mappings":"AAAA,cAAc,UAAU"}

package/dist/esm/components/TextArea/TextArea.js

@@ -6,21 +6,20 @@ import { TextAreaInput } from "../TextAreaInput";
 import { Label } from "../Label";
 import { Flex } from "../Flex";
 import { ErrorMessage } from "../ErrorMessage";
-import { useTextField } from "../../hooks";
+import { useTextField, useValidationClasses } from "../../hooks";
 const TextArea = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { isDisabled, className, errorMessage, label, validationState, ...otherProps } = props;
+    const { isDisabled, className, errorMessage, label, validationState, isInvalid, ...otherProps } = props;
     const { inputProps, labelProps, errorMessageProps } = useTextField(props);
     // Set class name for atom, including interaction state
     const classes = classNames("mobius", "mobius/TextArea", className);
-    const inputClasses = classNames("mobius/TextAreaInput", {
-        "--is-valid": validationState === "valid",
-        "--is-invalid": validationState === "invalid"
+    const validationClasses = useValidationClasses({
+        validationState,
+        isInvalid
     });
+    const inputClasses = classNames("mobius/TextAreaInput", validationClasses);
     const labelClasses = classNames({
-        "--is-valid": validationState === "valid",
-        "--is-invalid": validationState === "invalid",
         "--is-disabled": isDisabled
-    });
+    }, validationClasses);
     return /*#__PURE__*/ _jsxs(Flex, {
         flexDirection: "column",
         className: classes,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["\"use client\";\n\nimport { Ref, forwardRef, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { TextAreaInput } from \"../TextAreaInput\";\nimport { Label } from \"../Label\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Flex } from \"../Flex\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { UseTextFieldProps, useTextField } from \"../../hooks\";\n\nexport type TextAreaElementType = HTMLTextAreaElement;\n\nexport interface TextAreaProps\n  extends UseTextFieldProps,\n    DOMProps,\n    RefAttributes<TextAreaElementType> {\n  className?: string;\n  errorMessage?: string;\n  validationState?: \"valid\" | \"invalid\";\n}\n\nexport type TextAreaRef = Ref<TextAreaElementType>;\n\nconst TextArea: ForwardedRefComponent<TextAreaProps, TextAreaElementType> =\n  forwardRef((props: TextAreaProps, ref: TextAreaRef) => {\n    const {\n      isDisabled,\n      className,\n      errorMessage,\n      label,\n      validationState,\n      ...otherProps\n    } = props;\n\n    const { inputProps, labelProps, errorMessageProps } = useTextField(props);\n\n    // Set class name for atom, including interaction state\n    const classes = classNames(\"mobius\", \"mobius/TextArea\", className);\n    const inputClasses = classNames(\"mobius/TextAreaInput\", {\n      \"--is-valid\": validationState === \"valid\",\n      \"--is-invalid\": validationState === \"invalid\",\n    });\n    const labelClasses = classNames({\n      \"--is-valid\": validationState === \"valid\",\n      \"--is-invalid\": validationState === \"invalid\",\n      \"--is-disabled\": isDisabled,\n    });\n\n    return (\n      <Flex flexDirection=\"column\" className={classes}>\n        {label && (\n          <Label {...labelProps} className={labelClasses}>\n            {props.label}\n          </Label>\n        )}\n        <TextAreaInput\n          {...otherProps}\n          {...inputProps}\n          ref={ref}\n          className={inputClasses}\n          isDisabled={isDisabled}\n          aria-invalid={errorMessage != null}\n        />\n        <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />\n      </Flex>\n    );\n  });\n\nTextArea.displayName = \"TextArea\";\nexport { TextArea };\n"],"names":["forwardRef","classNames","TextAreaInput","Label","Flex","ErrorMessage","useTextField","TextArea","props","ref","isDisabled","className","errorMessage","label","validationState","otherProps","inputProps","labelProps","errorMessageProps","classes","inputClasses","labelClasses","flexDirection","aria-invalid","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,SAAcA,UAAU,QAAuB,QAAQ;AACvD,OAAOC,gBAAgB,oBAAoB;AAE3C,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,KAAK,QAAQ,WAAW;AAEjC,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAA4BC,YAAY,QAAQ,cAAc;AAe9D,MAAMC,yBACJP,WAAW,CAACQ,OAAsBC;IAChC,MAAM,EACJC,UAAU,EACVC,SAAS,EACTC,YAAY,EACZC,KAAK,EACLC,eAAe,EACf,GAAGC,YACJ,GAAGP;IAEJ,MAAM,EAAEQ,UAAU,EAAEC,UAAU,EAAEC,iBAAiB,EAAE,GAAGZ,aAAaE;IAEnE,uDAAuD;IACvD,MAAMW,UAAUlB,WAAW,UAAU,mBAAmBU;IACxD,MAAMS,eAAenB,WAAW,wBAAwB;QACtD,cAAca,oBAAoB;QAClC,gBAAgBA,oBAAoB;IACtC;IACA,MAAMO,eAAepB,WAAW;QAC9B,cAAca,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiBJ;IACnB;IAEA,qBACE,MAACN;QAAKkB,eAAc;QAASX,WAAWQ;;YACrCN,uBACC,KAACV;gBAAO,GAAGc,UAAU;gBAAEN,WAAWU;0BAC/Bb,MAAMK,KAAK;;0BAGhB,KAACX;gBACE,GAAGa,UAAU;gBACb,GAAGC,UAAU;gBACdP,KAAKA;gBACLE,WAAWS;gBACXV,YAAYA;gBACZa,gBAAcX,gBAAgB;;0BAEhC,KAACP;gBAAc,GAAGa,iBAAiB;gBAAEN,cAAcA;;;;AAGzD;AAEFL,SAASiB,WAAW,GAAG;AACvB,SAASjB,QAAQ,GAAG"}
+{"version":3,"sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["\"use client\";\n\nimport { Ref, forwardRef, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { TextAreaInput } from \"../TextAreaInput\";\nimport { Label } from \"../Label\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Flex } from \"../Flex\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport {\n  UseTextFieldProps,\n  useTextField,\n  useValidationClasses,\n} from \"../../hooks\";\n\nexport type TextAreaElementType = HTMLTextAreaElement;\n\nexport interface TextAreaProps\n  extends UseTextFieldProps,\n    DOMProps,\n    RefAttributes<TextAreaElementType> {\n  className?: string;\n  errorMessage?: string;\n}\n\nexport type TextAreaRef = Ref<TextAreaElementType>;\n\nconst TextArea: ForwardedRefComponent<TextAreaProps, TextAreaElementType> =\n  forwardRef((props: TextAreaProps, ref: TextAreaRef) => {\n    const {\n      isDisabled,\n      className,\n      errorMessage,\n      label,\n      validationState,\n      isInvalid,\n      ...otherProps\n    } = props;\n\n    const { inputProps, labelProps, errorMessageProps } = useTextField(props);\n\n    // Set class name for atom, including interaction state\n    const classes = classNames(\"mobius\", \"mobius/TextArea\", className);\n    const validationClasses = useValidationClasses({\n      validationState,\n      isInvalid,\n    });\n    const inputClasses = classNames(\"mobius/TextAreaInput\", validationClasses);\n    const labelClasses = classNames(\n      {\n        \"--is-disabled\": isDisabled,\n      },\n      validationClasses,\n    );\n\n    return (\n      <Flex flexDirection=\"column\" className={classes}>\n        {label && (\n          <Label {...labelProps} className={labelClasses}>\n            {props.label}\n          </Label>\n        )}\n        <TextAreaInput\n          {...otherProps}\n          {...inputProps}\n          ref={ref}\n          className={inputClasses}\n          isDisabled={isDisabled}\n          aria-invalid={errorMessage != null}\n        />\n        <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />\n      </Flex>\n    );\n  });\n\nTextArea.displayName = \"TextArea\";\nexport { TextArea };\n"],"names":["forwardRef","classNames","TextAreaInput","Label","Flex","ErrorMessage","useTextField","useValidationClasses","TextArea","props","ref","isDisabled","className","errorMessage","label","validationState","isInvalid","otherProps","inputProps","labelProps","errorMessageProps","classes","validationClasses","inputClasses","labelClasses","flexDirection","aria-invalid","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,SAAcA,UAAU,QAAuB,QAAQ;AACvD,OAAOC,gBAAgB,oBAAoB;AAE3C,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,KAAK,QAAQ,WAAW;AAEjC,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAEEC,YAAY,EACZC,oBAAoB,QACf,cAAc;AAcrB,MAAMC,yBACJR,WAAW,CAACS,OAAsBC;IAChC,MAAM,EACJC,UAAU,EACVC,SAAS,EACTC,YAAY,EACZC,KAAK,EACLC,eAAe,EACfC,SAAS,EACT,GAAGC,YACJ,GAAGR;IAEJ,MAAM,EAAES,UAAU,EAAEC,UAAU,EAAEC,iBAAiB,EAAE,GAAGd,aAAaG;IAEnE,uDAAuD;IACvD,MAAMY,UAAUpB,WAAW,UAAU,mBAAmBW;IACxD,MAAMU,oBAAoBf,qBAAqB;QAC7CQ;QACAC;IACF;IACA,MAAMO,eAAetB,WAAW,wBAAwBqB;IACxD,MAAME,eAAevB,WACnB;QACE,iBAAiBU;IACnB,GACAW;IAGF,qBACE,MAAClB;QAAKqB,eAAc;QAASb,WAAWS;;YACrCP,uBACC,KAACX;gBAAO,GAAGgB,UAAU;gBAAEP,WAAWY;0BAC/Bf,MAAMK,KAAK;;0BAGhB,KAACZ;gBACE,GAAGe,UAAU;gBACb,GAAGC,UAAU;gBACdR,KAAKA;gBACLE,WAAWW;gBACXZ,YAAYA;gBACZe,gBAAcb,gBAAgB;;0BAEhC,KAACR;gBAAc,GAAGe,iBAAiB;gBAAEP,cAAcA;;;;AAGzD;AAEFL,SAASmB,WAAW,GAAG;AACvB,SAASnB,QAAQ,GAAG"}

package/dist/esm/components/TextField/TextField.js

@@ -2,34 +2,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames/dedupe";
 import { forwardRef } from "react";
-import { useTextField } from "../../hooks";
+import { useTextField, useValidationClasses } from "../../hooks";
 import { ErrorMessage } from "../ErrorMessage";
 import { Label } from "../Label";
 import { adornmentWithClassName } from "./adornmentWithClassName";
 const TextField = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { isDisabled, type = "text", validationState, className, label, errorMessage, children, isRequired, prefixInside, prefixOutside, suffixInside, suffixOutside, ...otherProps } = props;
+    const { isDisabled, type = "text", validationState, isInvalid, className, label, errorMessage, children, isRequired, prefixInside, prefixOutside, suffixInside, suffixOutside, ...otherProps } = props;
     const { inputProps, labelProps, errorMessageProps } = useTextField({
         ...props,
         "aria-errormessage": errorMessage
     });
     const hidden = type === "hidden";
+    const validationClasses = useValidationClasses({
+        validationState,
+        isInvalid
+    });
     const textfieldClasses = {
         "--is-disabled": isDisabled,
-        "--is-valid": validationState === "valid",
-        "--is-invalid": validationState === "invalid",
         "--is-required": typeof isRequired === "boolean" && isRequired,
         "--is-optional": typeof isRequired === "boolean" && !isRequired,
         "--is-hidden": hidden,
         [className || ""]: true
     };
+    const sharedClasses = classNames(validationClasses, textfieldClasses);
     const labelClasses = classNames({
-        "--is-disabled": isDisabled,
-        "--is-valid": validationState === "valid",
-        "--is-invalid": validationState === "invalid"
-    });
-    const containerClasses = classNames("mobius", "mobius/TextField", textfieldClasses);
-    const inputClasses = classNames("mobius", "mobius/TextInput", textfieldClasses);
-    const inputWrapperClasses = classNames("mobius/TextFieldInputWrapper", textfieldClasses);
+        "--is-disabled": isDisabled
+    }, validationClasses);
+    const containerClasses = classNames("mobius", "mobius/TextField", sharedClasses);
+    const inputClasses = classNames("mobius", "mobius/TextInput", sharedClasses);
+    const inputWrapperClasses = classNames("mobius/TextFieldInputWrapper", sharedClasses);
     return /*#__PURE__*/ _jsxs("div", {
         className: containerClasses,
         children: [

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  HTMLInputTypeAttribute,\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  forwardRef,\n} from \"react\";\nimport { UseTextFieldProps, useTextField } from \"../../hooks\";\nimport { DOMProps, FocusEvents } from \"../../types\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { adornmentWithClassName } from \"./adornmentWithClassName\";\n\nexport type TextFieldElementType = HTMLInputElement;\nexport interface TextFieldProps\n  extends DOMProps,\n    FocusEvents,\n    UseTextFieldProps,\n    RefAttributes<TextFieldElementType> {\n  className?: string;\n  errorMessage?: string;\n  children?: ReactNode;\n  label?: string;\n  type?: Exclude<\n    HTMLInputTypeAttribute,\n    | \"button\"\n    | \"checkbox\"\n    | \"color\"\n    | \"date\"\n    | \"datetime-local\"\n    | \"file\"\n    | \"image\"\n    | \"month\"\n    | \"radio\"\n    | \"range\"\n    | \"reset\"\n    | \"submit\"\n    | \"week\"\n  >;\n  prefixInside?: ReactElement;\n  prefixOutside?: ReactElement;\n  suffixInside?: ReactElement;\n  suffixOutside?: ReactElement;\n}\n\nexport type TextFieldRef = Ref<TextFieldElementType>;\n\nconst TextField: ForwardedRefComponent<TextFieldProps, TextFieldElementType> =\n  forwardRef((props: TextFieldProps, ref: TextFieldRef) => {\n    const {\n      isDisabled,\n      type = \"text\",\n      validationState,\n      className,\n      label,\n      errorMessage,\n      children,\n      isRequired,\n      prefixInside,\n      prefixOutside,\n      suffixInside,\n      suffixOutside,\n      ...otherProps\n    } = props;\n\n    const { inputProps, labelProps, errorMessageProps } = useTextField({\n      ...props,\n      \"aria-errormessage\": errorMessage,\n    });\n\n    const hidden = type === \"hidden\";\n\n    const textfieldClasses = {\n      \"--is-disabled\": isDisabled,\n      \"--is-valid\": validationState === \"valid\",\n      \"--is-invalid\": validationState === \"invalid\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n      \"--is-hidden\": hidden,\n      [className || \"\"]: true,\n    };\n\n    const labelClasses = classNames({\n      \"--is-disabled\": isDisabled,\n      \"--is-valid\": validationState === \"valid\",\n      \"--is-invalid\": validationState === \"invalid\",\n    });\n\n    const containerClasses = classNames(\n      \"mobius\",\n      \"mobius/TextField\",\n      textfieldClasses,\n    );\n\n    const inputClasses = classNames(\n      \"mobius\",\n      \"mobius/TextInput\",\n      textfieldClasses,\n    );\n\n    const inputWrapperClasses = classNames(\n      \"mobius/TextFieldInputWrapper\",\n      textfieldClasses,\n    );\n\n    return (\n      <div className={containerClasses}>\n        {label && !hidden && (\n          <Label {...labelProps} className={labelClasses}>\n            {label}\n          </Label>\n        )}\n        <div className=\"mobius/TextFieldInnerContainer\">\n          {adornmentWithClassName(\n            prefixOutside,\n            \"mobius/TextFieldPrefixOutside\",\n          )}\n          <div className={inputWrapperClasses}>\n            {adornmentWithClassName(\n              prefixInside,\n              \"mobius/TextFieldPrefixInside\",\n            )}\n            <input\n              {...otherProps}\n              {...inputProps}\n              ref={ref}\n              type={type}\n              className={inputClasses}\n            />\n            {adornmentWithClassName(\n              suffixInside,\n              \"mobius/TextFieldSuffixInside\",\n            )}\n          </div>\n          {adornmentWithClassName(\n            suffixOutside,\n            \"mobius/TextFieldSuffixOutside\",\n          )}\n        </div>\n        {children && <div className=\"mobius/TextFieldChildren\">{children}</div>}\n\n        <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />\n      </div>\n    );\n  });\n\nTextField.displayName = \"TextField\";\nexport { TextField };\n"],"names":["classNames","forwardRef","useTextField","ErrorMessage","Label","adornmentWithClassName","TextField","props","ref","isDisabled","type","validationState","className","label","errorMessage","children","isRequired","prefixInside","prefixOutside","suffixInside","suffixOutside","otherProps","inputProps","labelProps","errorMessageProps","hidden","textfieldClasses","labelClasses","containerClasses","inputClasses","inputWrapperClasses","div","input","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAMEC,UAAU,QACL,QAAQ;AACf,SAA4BC,YAAY,QAAQ,cAAc;AAG9D,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,sBAAsB,QAAQ,2BAA2B;AAoClE,MAAMC,0BACJL,WAAW,CAACM,OAAuBC;IACjC,MAAM,EACJC,UAAU,EACVC,OAAO,MAAM,EACbC,eAAe,EACfC,SAAS,EACTC,KAAK,EACLC,YAAY,EACZC,QAAQ,EACRC,UAAU,EACVC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,aAAa,EACb,GAAGC,YACJ,GAAGd;IAEJ,MAAM,EAAEe,UAAU,EAAEC,UAAU,EAAEC,iBAAiB,EAAE,GAAGtB,aAAa;QACjE,GAAGK,KAAK;QACR,qBAAqBO;IACvB;IAEA,MAAMW,SAASf,SAAS;IAExB,MAAMgB,mBAAmB;QACvB,iBAAiBjB;QACjB,cAAcE,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiB,OAAOK,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;QACrD,eAAeS;QACf,CAACb,aAAa,GAAG,EAAE;IACrB;IAEA,MAAMe,eAAe3B,WAAW;QAC9B,iBAAiBS;QACjB,cAAcE,oBAAoB;QAClC,gBAAgBA,oBAAoB;IACtC;IAEA,MAAMiB,mBAAmB5B,WACvB,UACA,oBACA0B;IAGF,MAAMG,eAAe7B,WACnB,UACA,oBACA0B;IAGF,MAAMI,sBAAsB9B,WAC1B,gCACA0B;IAGF,qBACE,MAACK;QAAInB,WAAWgB;;YACbf,SAAS,CAACY,wBACT,KAACrB;gBAAO,GAAGmB,UAAU;gBAAEX,WAAWe;0BAC/Bd;;0BAGL,MAACkB;gBAAInB,WAAU;;oBACZP,uBACCa,eACA;kCAEF,MAACa;wBAAInB,WAAWkB;;4BACbzB,uBACCY,cACA;0CAEF,KAACe;gCACE,GAAGX,UAAU;gCACb,GAAGC,UAAU;gCACdd,KAAKA;gCACLE,MAAMA;gCACNE,WAAWiB;;4BAEZxB,uBACCc,cACA;;;oBAGHd,uBACCe,eACA;;;YAGHL,0BAAY,KAACgB;gBAAInB,WAAU;0BAA4BG;;0BAExD,KAACZ;gBAAc,GAAGqB,iBAAiB;gBAAEV,cAAcA;;;;AAGzD;AAEFR,UAAU2B,WAAW,GAAG;AACxB,SAAS3B,SAAS,GAAG"}
+{"version":3,"sources":["../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  HTMLInputTypeAttribute,\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  forwardRef,\n} from \"react\";\nimport {\n  UseTextFieldProps,\n  useTextField,\n  useValidationClasses,\n} from \"../../hooks\";\nimport { DOMProps, FocusEvents } from \"../../types\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { adornmentWithClassName } from \"./adornmentWithClassName\";\n\nexport type TextFieldElementType = HTMLInputElement;\nexport interface TextFieldProps\n  extends DOMProps,\n    FocusEvents,\n    UseTextFieldProps,\n    RefAttributes<TextFieldElementType> {\n  className?: string;\n  errorMessage?: string;\n  children?: ReactNode;\n  label?: string;\n  type?: Exclude<\n    HTMLInputTypeAttribute,\n    | \"button\"\n    | \"checkbox\"\n    | \"color\"\n    | \"date\"\n    | \"datetime-local\"\n    | \"file\"\n    | \"image\"\n    | \"month\"\n    | \"radio\"\n    | \"range\"\n    | \"reset\"\n    | \"submit\"\n    | \"week\"\n  >;\n  prefixInside?: ReactElement;\n  prefixOutside?: ReactElement;\n  suffixInside?: ReactElement;\n  suffixOutside?: ReactElement;\n}\n\nexport type TextFieldRef = Ref<TextFieldElementType>;\n\nconst TextField: ForwardedRefComponent<TextFieldProps, TextFieldElementType> =\n  forwardRef((props: TextFieldProps, ref: TextFieldRef) => {\n    const {\n      isDisabled,\n      type = \"text\",\n      validationState,\n      isInvalid,\n      className,\n      label,\n      errorMessage,\n      children,\n      isRequired,\n      prefixInside,\n      prefixOutside,\n      suffixInside,\n      suffixOutside,\n      ...otherProps\n    } = props;\n\n    const { inputProps, labelProps, errorMessageProps } = useTextField({\n      ...props,\n      \"aria-errormessage\": errorMessage,\n    });\n\n    const hidden = type === \"hidden\";\n\n    const validationClasses = useValidationClasses({\n      validationState,\n      isInvalid,\n    });\n\n    const textfieldClasses = {\n      \"--is-disabled\": isDisabled,\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n      \"--is-hidden\": hidden,\n      [className || \"\"]: true,\n    };\n\n    const sharedClasses = classNames(validationClasses, textfieldClasses);\n\n    const labelClasses = classNames(\n      {\n        \"--is-disabled\": isDisabled,\n      },\n      validationClasses,\n    );\n\n    const containerClasses = classNames(\n      \"mobius\",\n      \"mobius/TextField\",\n      sharedClasses,\n    );\n\n    const inputClasses = classNames(\n      \"mobius\",\n      \"mobius/TextInput\",\n      sharedClasses,\n    );\n\n    const inputWrapperClasses = classNames(\n      \"mobius/TextFieldInputWrapper\",\n      sharedClasses,\n    );\n\n    return (\n      <div className={containerClasses}>\n        {label && !hidden && (\n          <Label {...labelProps} className={labelClasses}>\n            {label}\n          </Label>\n        )}\n        <div className=\"mobius/TextFieldInnerContainer\">\n          {adornmentWithClassName(\n            prefixOutside,\n            \"mobius/TextFieldPrefixOutside\",\n          )}\n          <div className={inputWrapperClasses}>\n            {adornmentWithClassName(\n              prefixInside,\n              \"mobius/TextFieldPrefixInside\",\n            )}\n            <input\n              {...otherProps}\n              {...inputProps}\n              ref={ref}\n              type={type}\n              className={inputClasses}\n            />\n            {adornmentWithClassName(\n              suffixInside,\n              \"mobius/TextFieldSuffixInside\",\n            )}\n          </div>\n          {adornmentWithClassName(\n            suffixOutside,\n            \"mobius/TextFieldSuffixOutside\",\n          )}\n        </div>\n        {children && <div className=\"mobius/TextFieldChildren\">{children}</div>}\n\n        <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />\n      </div>\n    );\n  });\n\nTextField.displayName = \"TextField\";\nexport { TextField };\n"],"names":["classNames","forwardRef","useTextField","useValidationClasses","ErrorMessage","Label","adornmentWithClassName","TextField","props","ref","isDisabled","type","validationState","isInvalid","className","label","errorMessage","children","isRequired","prefixInside","prefixOutside","suffixInside","suffixOutside","otherProps","inputProps","labelProps","errorMessageProps","hidden","validationClasses","textfieldClasses","sharedClasses","labelClasses","containerClasses","inputClasses","inputWrapperClasses","div","input","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAMEC,UAAU,QACL,QAAQ;AACf,SAEEC,YAAY,EACZC,oBAAoB,QACf,cAAc;AAGrB,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,sBAAsB,QAAQ,2BAA2B;AAoClE,MAAMC,0BACJN,WAAW,CAACO,OAAuBC;IACjC,MAAM,EACJC,UAAU,EACVC,OAAO,MAAM,EACbC,eAAe,EACfC,SAAS,EACTC,SAAS,EACTC,KAAK,EACLC,YAAY,EACZC,QAAQ,EACRC,UAAU,EACVC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,aAAa,EACb,GAAGC,YACJ,GAAGf;IAEJ,MAAM,EAAEgB,UAAU,EAAEC,UAAU,EAAEC,iBAAiB,EAAE,GAAGxB,aAAa;QACjE,GAAGM,KAAK;QACR,qBAAqBQ;IACvB;IAEA,MAAMW,SAAShB,SAAS;IAExB,MAAMiB,oBAAoBzB,qBAAqB;QAC7CS;QACAC;IACF;IAEA,MAAMgB,mBAAmB;QACvB,iBAAiBnB;QACjB,iBAAiB,OAAOQ,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;QACrD,eAAeS;QACf,CAACb,aAAa,GAAG,EAAE;IACrB;IAEA,MAAMgB,gBAAgB9B,WAAW4B,mBAAmBC;IAEpD,MAAME,eAAe/B,WACnB;QACE,iBAAiBU;IACnB,GACAkB;IAGF,MAAMI,mBAAmBhC,WACvB,UACA,oBACA8B;IAGF,MAAMG,eAAejC,WACnB,UACA,oBACA8B;IAGF,MAAMI,sBAAsBlC,WAC1B,gCACA8B;IAGF,qBACE,MAACK;QAAIrB,WAAWkB;;YACbjB,SAAS,CAACY,wBACT,KAACtB;gBAAO,GAAGoB,UAAU;gBAAEX,WAAWiB;0BAC/BhB;;0BAGL,MAACoB;gBAAIrB,WAAU;;oBACZR,uBACCc,eACA;kCAEF,MAACe;wBAAIrB,WAAWoB;;4BACb5B,uBACCa,cACA;0CAEF,KAACiB;gCACE,GAAGb,UAAU;gCACb,GAAGC,UAAU;gCACdf,KAAKA;gCACLE,MAAMA;gCACNG,WAAWmB;;4BAEZ3B,uBACCe,cACA;;;oBAGHf,uBACCgB,eACA;;;YAGHL,0BAAY,KAACkB;gBAAIrB,WAAU;0BAA4BG;;0BAExD,KAACb;gBAAc,GAAGsB,iBAAiB;gBAAEV,cAAcA;;;;AAGzD;AAEFT,UAAU8B,WAAW,GAAG;AACxB,SAAS9B,SAAS,GAAG"}