npm - @salt-ds/core - Versions diffs - 1.8.0-rc.1 → 1.8.0-rc.2 - Mend

@salt-ds/core 1.8.0-rc.1 → 1.8.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (106) hide show

package/dist-es/input/Input.js CHANGED Viewed

@@ -51,12 +51,13 @@ const Input = forwardRef(function Input2({
     } = {},
     disabled: formFieldDisabled,
     readOnly: formFieldReadOnly,
+    necessity: formFieldRequired,
     validationStatus: formFieldValidationStatus
   } = useFormFieldProps();
   const restA11yProps = {
-    ariaActiveDescendant,
-    ariaExpanded,
-    ariaOwns
+    "aria-activedescendant": ariaActiveDescendant,
+    "aria-expanded": ariaExpanded,
+    "aria-owns": ariaOwns
   };
   const isDisabled = disabled || formFieldDisabled;
   const isReadOnly = readOnlyProp || formFieldReadOnly;
@@ -70,8 +71,10 @@ const Input = forwardRef(function Input2({
     onBlur,
     onChange,
     onFocus,
+    required: inputPropsRequired,
     ...restInputProps
   } = inputProps;
+  const isRequired = formFieldRequired ? ["required", "asterisk"].includes(formFieldRequired) : inputPropsRequired;
   const [value, setValue] = useControlled({
     controlled: valueProp,
     default: defaultValue,
@@ -98,12 +101,12 @@ const Input = forwardRef(function Input2({
   return /* @__PURE__ */ jsxs("div", {
     className: clsx(
       withBaseName(),
+      withBaseName(variant),
       {
         [withBaseName("focused")]: !isDisabled && focused,
         [withBaseName("disabled")]: isDisabled,
         [withBaseName("readOnly")]: isReadOnly,
-        [withBaseName(validationStatus || "")]: validationStatus,
-        [withBaseName(variant)]: variant
+        [withBaseName(validationStatus || "")]: validationStatus
       },
       classNameProp
     ),
@@ -131,7 +134,8 @@ const Input = forwardRef(function Input2({
         placeholder,
         value,
         ...restA11yProps,
-        ...restInputProps
+        ...restInputProps,
+        required: isRequired
       }),
       !isDisabled && !isReadOnly && validationStatus && /* @__PURE__ */ jsx(StatusAdornment, {
         status: validationStatus

package/dist-es/input/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","sources":["../src/input/Input.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEvent,\n ComponentPropsWithoutRef,\n FocusEvent,\n forwardRef,\n InputHTMLAttributes,\n ReactNode,\n Ref,\n useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { StatusAdornment } from \"../status-adornment\";\n\nimport inputCss from \"./Input.css\";\n\nconst withBaseName = makePrefixer(\"saltInput\");\n\nexport interface InputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<\n ComponentPropsWithoutRef<\"input\">,\n \"disabled\" \| \"value\" \| \"defaultValue\" \| \"placeholder\"\n > {\n /*\n The marker to use in an empty read only Input.\n * Use `''` to disable this feature. Defaults to '—'.\n /\n emptyReadOnlyMarker?: string;\n /\n End adornment component\n /\n endAdornment?: ReactNode;\n /\n [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n /\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /\n Optional ref for the input component\n /\n inputRef?: Ref<HTMLInputElement>;\n /\n If `true`, the component is read only.\n /\n readOnly?: boolean;\n /\n Start adornment component\n /\n startAdornment?: ReactNode;\n /\n Alignment of text within container. Defaults to \"left\"\n /\n textAlign?: \"left\" \| \"center\" \| \"right\";\n /\n Validation status.\n /\n validationStatus?: \"error\" \| \"warning\" \| \"success\";\n /\n Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" \| \"secondary\";\n}\n\nexport const Input = forwardRef<HTMLDivElement, InputProps>(function Input(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className: classNameProp,\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n id,\n inputProps = {},\n inputRef,\n placeholder,\n readOnly: readOnlyProp,\n role,\n startAdornment,\n style,\n textAlign = \"left\",\n value: valueProp,\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n ...other\n },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-input\",\n css: inputCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const restA11yProps = {\n ariaActiveDescendant,\n ariaExpanded,\n ariaOwns,\n };\n\n const isDisabled = disabled \|\| formFieldDisabled;\n const isReadOnly = readOnlyProp \|\| formFieldReadOnly;\n\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const [focused, setFocused] = useState(false);\n\n const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n onBlur,\n onChange,\n onFocus,\n ...restInputProps\n } = inputProps;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Input\",\n state: \"value\",\n });\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n onBlur?.(event);\n setFocused(false);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setFocused(true);\n };\n\n const inputStyle = {\n \"--input-textAlign\": textAlign,\n ...style,\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"focused\")]: !isDisabled && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(validationStatus \|\| \"\")]: validationStatus,\n [withBaseName(variant)]: variant,\n },\n classNameProp\n )}\n ref={ref}\n style={inputStyle}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <input\n aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n className={clsx(withBaseName(\"input\"), inputProps?.className)}\n disabled={isDisabled}\n id={id}\n readOnly={isReadOnly}\n ref={inputRef}\n role={role}\n tabIndex={isReadOnly \|\| isDisabled ? -1 : 0}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={!isDisabled ? handleFocus : undefined}\n placeholder={placeholder}\n value={value}\n {...restA11yProps}\n {...restInputProps}\n />\n {!isDisabled && !isReadOnly && validationStatus && (\n <StatusAdornment status={validationStatus} />\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n});\n"],"names":["Input","inputCss","value"],"mappings":"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"}
1	+ {"version":3,"file":"Input.js","sources":["../src/input/Input.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEvent,\n ComponentPropsWithoutRef,\n FocusEvent,\n forwardRef,\n InputHTMLAttributes,\n ReactNode,\n Ref,\n useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { StatusAdornment } from \"../status-adornment\";\n\nimport inputCss from \"./Input.css\";\n\nconst withBaseName = makePrefixer(\"saltInput\");\n\nexport interface InputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<\n ComponentPropsWithoutRef<\"input\">,\n \"disabled\" \| \"value\" \| \"defaultValue\" \| \"placeholder\"\n > {\n /*\n The marker to use in an empty read only Input.\n * Use `''` to disable this feature. Defaults to '—'.\n /\n emptyReadOnlyMarker?: string;\n /\n End adornment component\n /\n endAdornment?: ReactNode;\n /\n [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n /\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /\n Optional ref for the input component\n /\n inputRef?: Ref<HTMLInputElement>;\n /\n If `true`, the component is read only.\n /\n readOnly?: boolean;\n /\n Start adornment component\n /\n startAdornment?: ReactNode;\n /\n Alignment of text within container. Defaults to \"left\"\n /\n textAlign?: \"left\" \| \"center\" \| \"right\";\n /\n Validation status.\n /\n validationStatus?: \"error\" \| \"warning\" \| \"success\";\n /\n Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" \| \"secondary\";\n}\n\nexport const Input = forwardRef<HTMLDivElement, InputProps>(function Input(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className: classNameProp,\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n id,\n inputProps = {},\n inputRef,\n placeholder,\n readOnly: readOnlyProp,\n role,\n startAdornment,\n style,\n textAlign = \"left\",\n value: valueProp,\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n ...other\n },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-input\",\n css: inputCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const restA11yProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n };\n\n const isDisabled = disabled \|\| formFieldDisabled;\n const isReadOnly = readOnlyProp \|\| formFieldReadOnly;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const [focused, setFocused] = useState(false);\n\n const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n onBlur,\n onChange,\n onFocus,\n required: inputPropsRequired,\n ...restInputProps\n } = inputProps;\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : undefined ?? inputPropsRequired;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Input\",\n state: \"value\",\n });\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n onBlur?.(event);\n setFocused(false);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setFocused(true);\n };\n\n const inputStyle = {\n \"--input-textAlign\": textAlign,\n ...style,\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"focused\")]: !isDisabled && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(validationStatus \|\| \"\")]: validationStatus,\n },\n classNameProp\n )}\n ref={ref}\n style={inputStyle}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <input\n aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n className={clsx(withBaseName(\"input\"), inputProps?.className)}\n disabled={isDisabled}\n id={id}\n readOnly={isReadOnly}\n ref={inputRef}\n role={role}\n tabIndex={isReadOnly \|\| isDisabled ? -1 : 0}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={!isDisabled ? handleFocus : undefined}\n placeholder={placeholder}\n value={value}\n {...restA11yProps}\n {...restInputProps}\n required={isRequired}\n />\n {!isDisabled && !isReadOnly && validationStatus && (\n <StatusAdornment status={validationStatus} />\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n});\n"],"names":["Input","inputCss","value"],"mappings":"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"}

package/dist-es/radio-button/RadioButton.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to RadioButton container */\n.saltRadioButton {\n  display: flex;\n  gap: var(--salt-size-adornmentGap);\n  position: relative;\n  user-select: none;\n  cursor: pointer;\n}\n\n/* Styles applied when RadioButton is disabled */\n.saltRadioButton-disabled {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n  pointer-events: visible;\n}\n\n/* Styles applied to input component */\n.saltRadioButton-input {\n  cursor: inherit;\n  position: absolute;\n  opacity: 0;\n  top: 0;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  z-index: var(--salt-zIndex-default);\n}\n\n/* Styles applied to icon when :focus-visible */\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n  outline: var(--salt-focused-outline);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n";
+var css_248z = "/* Styles applied to RadioButton container */\n.saltRadioButton {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  user-select: none;\n  cursor: pointer;\n}\n\n/* Styles applied when RadioButton is disabled */\n.saltRadioButton-disabled {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n  pointer-events: visible;\n}\n\n/* Styles applied to input component */\n.saltRadioButton-input {\n  cursor: inherit;\n  position: absolute;\n  opacity: 0;\n  top: 0;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  z-index: var(--salt-zIndex-default);\n}\n\n/* Styles applied to icon when :focus-visible */\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n  outline: var(--saltRadioButton-outline, var(--salt-focused-outline));\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n";
 export { css_248z as default };
 //# sourceMappingURL=RadioButton.css.js.map

package/dist-es/radio-button/RadioButton.js CHANGED Viewed

@@ -12,22 +12,26 @@ import { RadioButtonIcon } from './RadioButtonIcon.js';
 import css_248z from './RadioButton.css.js';
 import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import '../form-field-context/FormFieldContext.js';
+import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
 const withBaseName = makePrefixer("saltRadioButton");
 const RadioButton = forwardRef(
   function RadioButton2(props, ref) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const {
       checked: checkedProp,
       className,
-      disabled,
+      disabled: disabledProp,
       error,
-      inputProps,
+      inputProps = {},
       label,
       name: nameProp,
       onFocus,
       onBlur,
       onChange,
       value,
+      validationStatus: validationStatusProp,
       ...rest
     } = props;
     const targetWindow = useWindow();
@@ -36,7 +40,19 @@ const RadioButton = forwardRef(
       css: css_248z,
       window: targetWindow
     });
+    const {
+      a11yProps: formFieldA11yProps,
+      disabled: formFieldDisabled,
+      validationStatus: formFieldValidationStatus
+    } = useFormFieldProps();
     const radioGroup = useRadioGroup();
+    const {
+      "aria-describedby": inputDescribedBy,
+      "aria-labelledby": inputLabelledBy,
+      ...restInputProps
+    } = inputProps;
+    const disabled = (_b = (_a = radioGroup.disabled) != null ? _a : formFieldDisabled) != null ? _b : disabledProp;
+    const validationStatus = !disabled ? (_d = (_c = radioGroup.validationStatus) != null ? _c : formFieldValidationStatus) != null ? _d : validationStatusProp : void 0;
     const radioGroupChecked = radioGroup.value != null && value != null ? radioGroup.value === value : checkedProp;
     const name = nameProp != null ? nameProp : radioGroup.name;
     const [checked, setCheckedState] = useControlled({
@@ -46,17 +62,20 @@ const RadioButton = forwardRef(
       state: "checked"
     });
     const handleChange = (event) => {
-      var _a;
+      var _a2;
       const newChecked = event.target.checked;
       setCheckedState(newChecked);
       onChange == null ? void 0 : onChange(event);
-      (_a = radioGroup.onChange) == null ? void 0 : _a.call(radioGroup, event);
+      (_a2 = radioGroup.onChange) == null ? void 0 : _a2.call(radioGroup, event);
     };
     return /* @__PURE__ */ jsxs("label", {
       className: clsx(
         withBaseName(),
         {
-          [withBaseName("disabled")]: disabled
+          [withBaseName("disabled")]: disabled,
+          [withBaseName("error")]: error,
+          [withBaseName(validationStatus || "")]: validationStatus,
+          [withBaseName("error")]: error
         },
         className
       ),
@@ -64,8 +83,16 @@ const RadioButton = forwardRef(
       ...rest,
       children: [
         /* @__PURE__ */ jsx("input", {
+          "aria-describedby": clsx(
+            (_f = (_e = radioGroup.a11yProps) == null ? void 0 : _e["aria-describedby"]) != null ? _f : formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-describedby"],
+            inputDescribedBy
+          ),
+          "aria-labelledby": clsx(
+            (_h = (_g = radioGroup.a11yProps) == null ? void 0 : _g["aria-labelledby"]) != null ? _h : formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-labelledby"],
+            inputLabelledBy
+          ),
           className: withBaseName("input"),
-          ...inputProps,
+          ...restInputProps,
           checked,
           disabled,
           name,
@@ -77,8 +104,9 @@ const RadioButton = forwardRef(
         }),
         /* @__PURE__ */ jsx(RadioButtonIcon, {
           checked,
-          error,
-          disabled
+          disabled,
+          validationStatus,
+          error
         }),
         label
       ]

package/dist-es/radio-button/RadioButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.js","sources":["../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLAttributes,\n InputHTMLAttributes,\n ReactNode,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { useRadioGroup } from \"./internal/useRadioGroup\";\nimport { RadioButtonIcon } from \"./RadioButtonIcon\";\n\nimport radioButtonCss from \"./RadioButton.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltRadioButton\");\n\nexport interface RadioButtonProps\n extends Omit<\n HTMLAttributes<HTMLLabelElement>,\n \"onChange\" \| \"onBlur\" \| \"onFocus\"\n > {\n /*\n Set the default selected radio button in the group\n /\n checked?: boolean;\n /\n Set the disabled state\n /\n disabled?: boolean;\n /\n Set the error state\n /\n error?: boolean;\n /\n Props to be passed to the radio input\n /\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n /\n The label to be shown next to the radio icon\n /\n label?: ReactNode;\n /\n Name of the radio group\n /\n name?: string;\n /\n Callback for blur event\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Callback for change event\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Callback for focus event\n /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Value of radio button\n */\n value?: string;\n}\n\nexport const RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(\n function RadioButton(props, ref) {\n const {\n checked: checkedProp,\n className,\n disabled,\n error,\n inputProps,\n label,\n name: nameProp,\n onFocus,\n onBlur,\n onChange,\n value,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button\",\n css: radioButtonCss,\n window: targetWindow,\n });\n\n const radioGroup = useRadioGroup();\n\n const radioGroupChecked =\n radioGroup.value != null && value != null\n ? radioGroup.value === value\n : checkedProp;\n const name = nameProp ?? radioGroup.name;\n\n const [checked, setCheckedState] = useControlled({\n controlled: radioGroupChecked,\n default: Boolean(checkedProp),\n name: \"RadioBase\",\n state: \"checked\",\n });\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newChecked = event.target.checked;\n setCheckedState(newChecked);\n\n onChange?.(event);\n radioGroup.onChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n <input\n className={withBaseName(\"input\")}\n {...~~inputProps~~}\n checked={checked}\n disabled={disabled}\n name={name}\n value={value}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"radio\"\n />\n <RadioButtonIcon checked={checked} ~~error~~={~~error~~} ~~disabled~~={~~disabled~~} />\n {label}\n </label>\n );\n }\n);\n"],"names":["RadioButton","radioButtonCss"],"mappings":"~~;;;;;;;;;;;;;;;AAiBA~~,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;~~AAiD5C~~,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;~~AAC/B~~,IAAM,MAAA;AAAA,MACJ,OAAS,EAAA,WAAA;AAAA,MACT,SAAA;AAAA,MACA,~~QAAA~~;AAAA,~~MACA~~,KAAA;AAAA,MACA,~~UAAA~~;AAAA,~~MACA~~,KAAA;AAAA,MACA,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,~~MACG~~,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,aAAa,aAAc,EAAA,CAAA;AAEjC,IAAM,MAAA,iBAAA,GACJ,WAAW,KAAS,IAAA,IAAA,IAAQ,SAAS,IACjC,GAAA,UAAA,CAAW,UAAU,KACrB,GAAA,WAAA,CAAA;AACN,IAAM,MAAA,IAAA,GAAO,8BAAY,UAAW,CAAA,IAAA,CAAA;AAEpC,IAAA,MAAM,CAAC,OAAA,EAAS,eAAe,CAAA,GAAI,aAAc,CAAA;AAAA,MAC/C,UAAY,EAAA,iBAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,WAAW,CAAA;AAAA,MAC5B,IAAM,EAAA,WAAA;AAAA,MACN,KAAO,EAAA,SAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;~~AAzG1E~~,~~MAAA~~,~~IAAA~~,~~EAAA~~,~~CAAA~~;~~AA0GM~~,MAAM,MAAA,UAAA,GAAa,MAAM,MAAO,CAAA,OAAA,CAAA;AAChC,MAAA,eAAA,CAAgB,UAAU,CAAA,CAAA;AAE1B,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AACX,MAAA,~~CAAA~~,~~EAAA~~,GAAA,UAAA,CAAW,~~aAAX~~,~~IAAsB~~,GAAA,KAAA,CAAA,~~GAAA~~,~~EAAA~~,~~CAAA~~,~~IAAA,~~CAAA,UAAA,EAAA,KAAA,CAAA,CAAA;AAAA,KACxB,CAAA;AAEA,IAAA,uBACG,IAAA,CAAA,OAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,~~SAC9B~~;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,OAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC9B,GAAG,~~UAAA~~;AAAA,UACJ,OAAA;AAAA,UACA,QAAA;AAAA,UACA,IAAA;AAAA,UACA,KAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAU,EAAA,YAAA;AAAA,UACV,OAAA;AAAA,UACA,IAAK,EAAA,OAAA;AAAA,SACP,CAAA;AAAA,wBACC,GAAA,CAAA,eAAA,EAAA;AAAA,~~UAAgB~~,OAAA;AAAA,~~UAAkB~~,~~KAAA~~;AAAA,~~UAAc~~,~~QAAA~~;AAAA,~~SAAoB~~,CAAA;AAAA,~~QACpE~~,KAAA;AAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"RadioButton.js","sources":["../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLAttributes,\n InputHTMLAttributes,\n ReactNode,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { useRadioGroup } from \"./internal/useRadioGroup\";\nimport { RadioButtonIcon } from \"./RadioButtonIcon\";\n\nimport radioButtonCss from \"./RadioButton.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\n\nconst withBaseName = makePrefixer(\"saltRadioButton\");\n\nexport interface RadioButtonProps\n extends Omit<\n HTMLAttributes<HTMLLabelElement>,\n \"onChange\" \| \"onBlur\" \| \"onFocus\"\n > {\n /*\n Set the default selected radio button in the group\n /\n checked?: boolean;\n /\n Set the disabled state\n /\n disabled?: boolean;\n /\n Deprecated: Use validationStatus instead\n * Set the error state\n /\n error?: boolean;\n /\n Props to be passed to the radio input\n /\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n /\n The label to be shown next to the radio icon\n /\n label?: ReactNode;\n /\n Name of the radio group\n /\n name?: string;\n /\n Callback for blur event\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Callback for change event\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Callback for focus event\n /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Value of radio button\n /\n value?: string;\n /\n Validation status, one of \"warning\" \| \"error\" \| \"success\"\n \n RadioButton has styling variants for \"error\" and \"warning\".\n * No visual styling will be applied on \"success\" variant.\n /\n validationStatus?: AdornmentValidationStatus;\n}\n\nexport const RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(\n function RadioButton(props, ref) {\n const {\n checked: checkedProp,\n className,\n disabled: disabledProp,\n error,\n inputProps = {},\n label,\n name: nameProp,\n onFocus,\n onBlur,\n onChange,\n value,\n validationStatus: validationStatusProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button\",\n css: radioButtonCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: formFieldA11yProps,\n disabled: formFieldDisabled,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const radioGroup = useRadioGroup();\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n ...restInputProps\n } = inputProps;\n\n const disabled = radioGroup.disabled ?? formFieldDisabled ?? disabledProp;\n const validationStatus = !disabled\n ? radioGroup.validationStatus ??\n formFieldValidationStatus ??\n validationStatusProp\n : undefined;\n\n const radioGroupChecked =\n radioGroup.value != null && value != null\n ? radioGroup.value === value\n : checkedProp;\n const name = nameProp ?? radioGroup.name;\n\n const [checked, setCheckedState] = useControlled({\n controlled: radioGroupChecked,\n default: Boolean(checkedProp),\n name: \"RadioBase\",\n state: \"checked\",\n });\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newChecked = event.target.checked;\n setCheckedState(newChecked);\n\n onChange?.(event);\n radioGroup.onChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"error\")]: error / Deprecated */,\n [withBaseName(validationStatus \|\| \"\")]: validationStatus,\n [withBaseName(\"error\")]: error,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-describedby={clsx(\n radioGroup.a11yProps?.[\"aria-describedby\"] ??\n formFieldA11yProps?.[\"aria-describedby\"],\n inputDescribedBy\n )}\n aria-labelledby={clsx(\n radioGroup.a11yProps?.[\"aria-labelledby\"] ??\n formFieldA11yProps?.[\"aria-labelledby\"],\n inputLabelledBy\n )}\n className={withBaseName(\"input\")}\n {...restInputProps}\n checked={checked}\n disabled={disabled}\n name={name}\n value={value}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"radio\"\n />\n <RadioButtonIcon\n checked={checked}\n disabled={disabled}\n validationStatus={validationStatus}\n error={error}\n />\n {label}\n </label>\n );\n }\n);\n"],"names":["RadioButton","radioButtonCss","_a"],"mappings":"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"}

package/dist-es/radio-button/RadioButtonGroup.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to root element */\n.saltRadioButtonGroup {\n  border: none;\n  margin: 0;\n  padding: 0;\n}\n\n/* Styles applied when direction is vertical */\n.saltRadioButtonGroup-vertical {\n  display: flex;\n  gap: var(--salt-size-unit);\n  flex-direction: column;\n}\n\n/* Styles applied when direction is horizontal */\n.saltRadioButtonGroup-horizontal {\n  display: flex;\n  gap: var(--salt-size-unit);\n  flex-direction: row;\n  flex-wrap: wrap;\n}\n\n.saltRadioButtonGroup-noWrap {\n  flex-wrap: nowrap;\n}\n.saltRadioButtonGroup-noWrap .saltRadioButton {\n  white-space: break-spaces;\n}\n\n/* Styles applied to radio group's legend */\n.saltRadioButtonGroup-legend {\n  display: inline-block;\n  font-size: var(--formFieldLegacy-label-fontSize); /* TODO: V2 Form Field work */\n  color: var(--salt-text-primary-foreground);\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n";
+var css_248z = "/* Styles applied to root element */\n.saltRadioButtonGroup {\n  border: none;\n  margin: 0;\n  padding: 0;\n}\n\n/* Styles applied when direction is vertical */\n.saltRadioButtonGroup-vertical {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  flex-direction: column;\n}\n\n/* Styles applied when direction is horizontal */\n.saltRadioButtonGroup-horizontal {\n  display: flex;\n  gap: var(--salt-spacing-200);\n  flex-direction: row;\n  flex-wrap: wrap;\n}\n\n.saltRadioButtonGroup-noWrap {\n  flex-wrap: nowrap;\n}\n.saltRadioButtonGroup-noWrap .saltRadioButton {\n  white-space: break-spaces;\n}\n\n/* Styles applied to radio group's legend */\n.saltRadioButtonGroup-legend {\n  display: inline-block;\n  font-size: var(--formFieldLegacy-label-fontSize); /* TODO: V2 Form Field work */\n  color: var(--salt-text-primary-foreground);\n  margin-bottom: var(--salt-spacing-200);\n}\n";
 export { css_248z as default };
 //# sourceMappingURL=RadioButtonGroup.css.js.map

package/dist-es/radio-button/RadioButtonGroup.js CHANGED Viewed

@@ -11,6 +11,8 @@ import { RadioGroupContext } from './internal/RadioGroupContext.js';
 import css_248z from './RadioButtonGroup.css.js';
 import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import '../form-field-context/FormFieldContext.js';
+import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
 const withBaseName = makePrefixer("saltRadioButtonGroup");
 const RadioButtonGroup = forwardRef(function RadioButtonGroup2(props, ref) {
@@ -19,10 +21,12 @@ const RadioButtonGroup = forwardRef(function RadioButtonGroup2(props, ref) {
     className,
     defaultValue,
     direction = "vertical",
+    disabled: disabledProp,
     wrap = true,
     name: nameProp,
     onChange,
     value: valueProp,
+    validationStatus: validationStatusProp,
     ...rest
   } = props;
   const targetWindow = useWindow();
@@ -31,6 +35,13 @@ const RadioButtonGroup = forwardRef(function RadioButtonGroup2(props, ref) {
     css: css_248z,
     window: targetWindow
   });
+  const {
+    a11yProps,
+    disabled: formFieldDisabled,
+    validationStatus: formFieldValidationStatus
+  } = useFormFieldProps();
+  const disabled = formFieldDisabled != null ? formFieldDisabled : disabledProp;
+  const validationStatus = formFieldValidationStatus != null ? formFieldValidationStatus : validationStatusProp;
   const [value, setStateValue] = useControlled({
     controlled: valueProp,
     default: defaultValue,
@@ -55,7 +66,14 @@ const RadioButtonGroup = forwardRef(function RadioButtonGroup2(props, ref) {
     ref,
     ...rest,
     children: /* @__PURE__ */ jsx(RadioGroupContext.Provider, {
-      value: { name, onChange: handleChange, value },
+      value: {
+        a11yProps,
+        disabled,
+        name,
+        onChange: handleChange,
+        validationStatus,
+        value
+      },
       children
     })
   });

package/dist-es/radio-button/RadioButtonGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButtonGroup.js","sources":["../src/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n forwardRef,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport { RadioGroupContext } from \"./internal/RadioGroupContext\";\n\nimport radioButtonGroupCss from \"./RadioButtonGroup.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonGroup\");\n\nexport interface RadioButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"onChange\"> {\n /*\n Set the selected value when initialized.\n /\n defaultValue?: string;\n /\n Set the group direction.\n /\n direction?: \"horizontal\" \| \"vertical\";\n /\n Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise the radio buttons will wrap onto the next line.\n /\n wrap?: boolean;\n /\n The name to be set on each radio button within the group. If not set, then one will be generated for you.\n /\n name?: string;\n /\n Callback for change event.\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n The value of the radio group, required for a controlled component.\n */\n value?: string;\n}\n\nexport const RadioButtonGroup = forwardRef<\n HTMLFieldSetElement,\n RadioButtonGroupProps\n>(function RadioButtonGroup(props, ref) {\n const {\n children,\n className,\n defaultValue,\n direction = \"vertical\",\n wrap = true,\n name: nameProp,\n onChange,\n value: valueProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button-group\",\n css: radioButtonGroupCss,\n window: targetWindow,\n });\n\n const [value, setStateValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n state: \"value\",\n name: \"RadioButtonGroup\",\n });\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n setStateValue(event.target.value);\n onChange?.(event);\n };\n\n const name = useId(nameProp);\n\n return (\n <fieldset\n className={clsx(\n withBaseName(),\n withBaseName(direction),\n {\n [withBaseName(\"noWrap\")]: !wrap,\n },\n className\n )}\n data-testid=\"radio-button-group\"\n ref={ref}\n {...rest}\n >\n <RadioGroupContext.Provider\n value={{ name, onChange: handleChange, value }}\n >\n {children}\n </RadioGroupContext.Provider>\n </fieldset>\n );\n});\n"],"names":["RadioButtonGroup","radioButtonGroupCss"],"mappings":"~~;;;;;;;;;;;;;;AAaA~~,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;~~AA8BjD~~,MAAM,gBAAmB,GAAA,UAAA,CAG9B,SAASA,iBAAAA,CAAiB,OAAO,GAAK,EAAA;AACtC,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAY,GAAA,UAAA;AAAA,IACZ,IAAO,GAAA,IAAA;AAAA,IACP,IAAM,EAAA,QAAA;AAAA,IACN,QAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,~~IACJ~~,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,yBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,KAAA,EAAO,aAAa,CAAA,GAAI,aAAc,CAAA;AAAA,IAC3C,UAAY,EAAA,SAAA;AAAA,IACZ,OAAS,EAAA,YAAA;AAAA,IACT,KAAO,EAAA,OAAA;AAAA,IACP,IAAM,EAAA,kBAAA;AAAA,GACP,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AACpE,IAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA,CAAA;AAChC,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAM,MAAA,IAAA,GAAO,MAAM,QAAQ,CAAA,CAAA;AAE3B,EAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,aAAa,SAAS,CAAA;AAAA,MACtB;AAAA,QACE,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,CAAC,IAAA;AAAA,OAC7B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,oBAAA;AAAA,IACZ,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEJ,QAAA,kBAAA,GAAA,CAAC,kBAAkB,QAAlB,EAAA;AAAA,MACC,KAAO,EAAA,~~EAAE~~,~~IAAM~~,~~EAAA~~,QAAA,~~EAAU~~,~~cAAc~~,~~KAAM~~,EAAA;AAAA,~~MAE5C~~,QAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"RadioButtonGroup.js","sources":["../src/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n forwardRef,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport { RadioGroupContext } from \"./internal/RadioGroupContext\";\n\nimport radioButtonGroupCss from \"./RadioButtonGroup.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonGroup\");\n\nexport interface RadioButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"onChange\"> {\n /*\n Set the selected value when initialized.\n /\n defaultValue?: string;\n /\n Set the group direction.\n /\n direction?: \"horizontal\" \| \"vertical\";\n /\n Disable the RadioButton group\n /\n disabled?: boolean;\n /\n Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise the radio buttons will wrap onto the next line.\n /\n wrap?: boolean;\n /\n The name to be set on each radio button within the group. If not set, then one will be generated for you.\n /\n name?: string;\n /\n Callback for change event.\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n The value of the radio group, required for a controlled component.\n /\n value?: string;\n /\n Validation status.\n */\n validationStatus?: \"error\" \| \"warning\";\n}\n\nexport const RadioButtonGroup = forwardRef<\n HTMLFieldSetElement,\n RadioButtonGroupProps\n>(function RadioButtonGroup(props, ref) {\n const {\n children,\n className,\n defaultValue,\n direction = \"vertical\",\n disabled: disabledProp,\n wrap = true,\n name: nameProp,\n onChange,\n value: valueProp,\n validationStatus: validationStatusProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button-group\",\n css: radioButtonGroupCss,\n window: targetWindow,\n });\n\n const {\n a11yProps,\n disabled: formFieldDisabled,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled ?? disabledProp;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const [value, setStateValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n state: \"value\",\n name: \"RadioButtonGroup\",\n });\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n setStateValue(event.target.value);\n onChange?.(event);\n };\n\n const name = useId(nameProp);\n\n return (\n <fieldset\n className={clsx(\n withBaseName(),\n withBaseName(direction),\n {\n [withBaseName(\"noWrap\")]: !wrap,\n },\n className\n )}\n data-testid=\"radio-button-group\"\n ref={ref}\n {...rest}\n >\n <RadioGroupContext.Provider\n value={{\n a11yProps,\n disabled,\n name,\n onChange: handleChange,\n validationStatus,\n value,\n }}\n >\n {children}\n </RadioGroupContext.Provider>\n </fieldset>\n );\n});\n"],"names":["RadioButtonGroup","radioButtonGroupCss"],"mappings":";;;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;AAsCjD,MAAM,gBAAmB,GAAA,UAAA,CAG9B,SAASA,iBAAAA,CAAiB,OAAO,GAAK,EAAA;AACtC,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAY,GAAA,UAAA;AAAA,IACZ,QAAU,EAAA,YAAA;AAAA,IACV,IAAO,GAAA,IAAA;AAAA,IACP,IAAM,EAAA,QAAA;AAAA,IACN,QAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,gBAAkB,EAAA,oBAAA;AAAA,IACf,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,yBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAU,EAAA,iBAAA;AAAA,IACV,gBAAkB,EAAA,yBAAA;AAAA,MAChB,iBAAkB,EAAA,CAAA;AAEtB,EAAA,MAAM,WAAW,iBAAqB,IAAA,IAAA,GAAA,iBAAA,GAAA,YAAA,CAAA;AACtC,EAAA,MAAM,mBAAmB,yBAA6B,IAAA,IAAA,GAAA,yBAAA,GAAA,oBAAA,CAAA;AAEtD,EAAA,MAAM,CAAC,KAAA,EAAO,aAAa,CAAA,GAAI,aAAc,CAAA;AAAA,IAC3C,UAAY,EAAA,SAAA;AAAA,IACZ,OAAS,EAAA,YAAA;AAAA,IACT,KAAO,EAAA,OAAA;AAAA,IACP,IAAM,EAAA,kBAAA;AAAA,GACP,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AACpE,IAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA,CAAA;AAChC,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAM,MAAA,IAAA,GAAO,MAAM,QAAQ,CAAA,CAAA;AAE3B,EAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,aAAa,SAAS,CAAA;AAAA,MACtB;AAAA,QACE,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,CAAC,IAAA;AAAA,OAC7B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,oBAAA;AAAA,IACZ,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEJ,QAAA,kBAAA,GAAA,CAAC,kBAAkB,QAAlB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,SAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA;AAAA,QACA,QAAU,EAAA,YAAA;AAAA,QACV,gBAAA;AAAA,QACA,KAAA;AAAA,OACF;AAAA,MAEC,QAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/radio-button/RadioButtonIcon.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to radio button icon */\n.saltRadioButtonIcon {\n  width: var(--salt-size-selectable);\n  height: var(--salt-size-selectable);\n  border-radius: 50%;\n  flex: none;\n  margin-top: var(--salt-size-border);\n}\n\n/* Styles applied to radio button icon circle */\n.saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-fill, var(--salt-container-primary-background));\n  stroke: var(--saltRadioButton-icon-stroke, var(--salt-selectable-foreground));\n  stroke-width: var(--salt-size-border);\n}\n\n/* Styles applied to radio button icon on hover */\n.saltRadioButton:hover .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-hover-fill, var(--salt-selectable-background-hover));\n  stroke: var(--saltRadioButton-icon-stroke-hover, var(--salt-selectable-foreground-hover));\n}\n\n/* Styles applied to radio button icon if checked */\n.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-checked .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-checked-fill, var(--salt-selectable-foreground-selected));\n  stroke: var(--saltRadioButton-icon-checked-stroke, var(--salt-selectable-foreground-selected));\n}\n\n/* Styles applied to radio button icon if disabled */\n.saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-disabled-fill, var(--salt-selectable-background));\n  stroke: var(--saltRadioButton-icon-disabled-stroke, var(--salt-selectable-foreground-disabled));\n}\n\n/* Styles applied to radio button icon if checked and disabled */\n.saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-checked-disabled-fill, var(--salt-container-primary-background-disabled));\n  stroke: var(--saltRadioButton-icon-checked-disabled-stroke, var(--salt-selectable-foreground-selectedDisabled));\n  stroke-width: calc(var(--salt-size-border) * 6.5);\n}\n\n/* Styles applied to radio button icon with error */\n.saltRadioButtonIcon-error .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  stroke: var(--saltRadioButton-icon-error-stroke, var(--salt-status-error-foreground));\n}\n\n.saltRadioButton:hover .saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-hover-fill, var(--salt-status-error-background));\n}\n\n/* Styles applied to radio button icon with error and disabled */\n.saltRadioButtonIcon-error.saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-error.saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-disabled-fill, var(--salt-selectable-background));\n  stroke: var(--saltRadioButton-icon-error-disabled-stroke, var(--salt-status-error-foreground-disabled));\n}\n\n/* Styles applied to radio button icon when checked and with error */\n.saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-fill, var(--salt-status-error-foreground));\n  stroke: var(--saltRadioButton-icon-error-stroke, var(--salt-status-error-foreground));\n}\n\n/* Styles applied to radio button icon when checked and with error and disabled */\n.saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-disabled-fill, var(--salt-container-primary-background-disabled));\n  stroke: var(--saltRadioButton-icon-error-disabled-stroke, var(--salt-status-error-foreground-disabled));\n}\n\n/* Styles applied to checked inner circle */\n.saltRadioButtonIcon-checked-circle {\n  fill: var(--saltRadioButton-icon-inner-fill, var(--salt-container-primary-background));\n}\n\n/* Styles applied to checked inner circle when disabled */\n.saltRadioButtonIcon-disabled .saltRadioButtonIcon-checked-circle {\n  fill: var(--saltRadioButton-icon-inner-disabled-fill, var(--salt-container-primary-background-disabled));\n}\n";
+var css_248z = "/* Styles applied to radio button icon */\n.saltRadioButtonIcon {\n  width: var(--salt-size-selectable);\n  height: var(--salt-size-selectable);\n  border-radius: 50%;\n  flex: none;\n  margin-top: var(--salt-size-border);\n}\n\n/* Styles applied to radio button icon circle */\n.saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-fill, var(--salt-container-primary-background));\n  stroke: var(--saltRadioButton-icon-stroke, var(--salt-selectable-foreground));\n  stroke-width: var(--salt-size-border);\n}\n\n/* Styles applied to radio button icon on hover */\n.saltRadioButton:hover .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-hover-fill, var(--salt-selectable-background-hover));\n  stroke: var(--saltRadioButton-icon-stroke-hover, var(--salt-selectable-foreground-hover));\n}\n\n/* Styles applied to radio button icon if checked */\n.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-checked .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-checked-fill, var(--salt-selectable-foreground-selected));\n  stroke: var(--saltRadioButton-icon-checked-stroke, var(--salt-selectable-foreground-selected));\n}\n\n/* Styles applied to radio button icon if disabled */\n.saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-disabled-fill, var(--salt-selectable-background));\n  stroke: var(--saltRadioButton-icon-disabled-stroke, var(--salt-selectable-foreground-disabled));\n}\n\n/* Styles applied to radio button icon if checked and disabled */\n.saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-checked-disabled-fill, var(--salt-container-primary-background-disabled));\n  stroke: var(--saltRadioButton-icon-checked-disabled-stroke, var(--salt-selectable-foreground-selectedDisabled));\n  stroke-width: calc(var(--salt-size-border) * 6.5);\n}\n\n/* Styles applied to radio button icon with `validationStatus=\"error\"` */\n.saltRadioButtonIcon-error .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  stroke: var(--saltRadioButton-icon-error-stroke, var(--salt-status-error-foreground));\n}\n\n.saltRadioButton:hover .saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-hover-fill, var(--salt-status-error-background));\n}\n\n/* Styles applied to radio button icon when checked and with `validationStatus=\"error\"` */\n.saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-fill, var(--salt-status-error-foreground));\n  stroke: var(--saltRadioButton-icon-error-stroke, var(--salt-status-error-foreground));\n}\n\n/* Styles applied to radio button icon with `validationStatus=\"warning\"` */\n.saltRadioButtonIcon-warning .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-warning .saltRadioButtonIcon-circle {\n  stroke: var(--saltRadioButton-icon-warning-stroke, var(--salt-status-warning-foreground));\n}\n\n.saltRadioButton:hover .saltRadioButtonIcon-warning .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-warning-hover-fill, var(--salt-status-warning-background));\n}\n\n/* Styles applied to radio button icon when checked and with `validationStatus=\"warning\"` */\n.saltRadioButtonIcon-checked.saltRadioButtonIcon-warning .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-warning .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-warning-fill, var(--salt-status-warning-foreground));\n  stroke: var(--saltRadioButton-icon-warning-stroke, var(--salt-status-warning-foreground));\n}\n\n/* Styles applied to checked inner circle */\n.saltRadioButtonIcon-checked-circle {\n  fill: var(--saltRadioButton-icon-inner-fill, var(--salt-container-primary-background));\n}\n\n/* Styles applied to checked inner circle when disabled */\n.saltRadioButtonIcon-disabled .saltRadioButtonIcon-checked-circle {\n  fill: var(--saltRadioButton-icon-inner-disabled-fill, var(--salt-container-primary-background-disabled));\n}\n";
 export { css_248z as default };
 //# sourceMappingURL=RadioButtonIcon.css.js.map

package/dist-es/radio-button/RadioButtonIcon.js CHANGED Viewed

@@ -6,15 +6,16 @@ import '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
 import { clsx } from 'clsx';
-import css_248z from './RadioButtonIcon.css.js';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
+import css_248z from './RadioButtonIcon.css.js';
 const withBaseName = makePrefixer("saltRadioButtonIcon");
 const RadioButtonIcon = ({
   checked,
   error,
-  disabled
+  disabled,
+  validationStatus
 }) => {
   const targetWindow = useWindow();
   useComponentCssInjection({
@@ -26,7 +27,8 @@ const RadioButtonIcon = ({
     className: clsx(withBaseName(), {
       [withBaseName("checked")]: checked,
       [withBaseName("error")]: error,
-      [withBaseName("disabled")]: disabled
+      [withBaseName("disabled")]: disabled,
+      [withBaseName(validationStatus || "")]: validationStatus
     }),
     height: "14",
     viewBox: "0 0 14 14",

package/dist-es/radio-button/RadioButtonIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButtonIcon.js","sources":["../src/radio-button/RadioButtonIcon.tsx"],"sourcesContent":["import { makePrefixer } from \"../utils\";\nimport { clsx } from \"clsx\";\nimport ~~radioButtonIconCss~~ from \"~~./RadioButtonIcon.css~~\";\nimport { ~~useComponentCssInjection~~ } from \"@salt-ds/~~styles~~\";\nimport { ~~useWindow~~ } from \"~~@salt~~-~~ds/window~~\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonIcon\");\n\nexport interface RadioButtonIconProps {\n checked?: boolean;\n error?: boolean;\n disabled?: boolean;\n}\n\n/*\n Default radio icon\n */\nexport const RadioButtonIcon = ({\n checked,\n error,\n disabled,\n}: RadioButtonIconProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button-icon\",\n css: radioButtonIconCss,\n window: targetWindow,\n });\n return (\n <svg\n className={clsx(withBaseName(), {\n [withBaseName(\"checked\")]: checked,\n [withBaseName(\"error\")]: error,\n [withBaseName(\"disabled\")]: disabled,\n })}\n height=\"14\"\n viewBox=\"0 0 14 14\"\n width=\"14\"\n >\n <circle className={withBaseName(\"circle\")} cx=\"7\" cy=\"7\" r=\"6.5\" />\n {checked && (\n <circle\n className={withBaseName(\"checked-circle\")}\n cx=\"7\"\n cy=\"7\"\n r=\"3.2\"\n />\n )}\n </svg>\n );\n};\n"],"names":["radioButtonIconCss"],"mappings":";;;;;;;;;;;;~~AAMA~~,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;~~AAWhD~~,MAAM,kBAAkB,CAAC;AAAA,EAC9B,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AACF,CAA4B,KAAA;AAC1B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,MAC3B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,MACzB,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,~~KAC7B~~,CAAA;AAAA,IACD,MAAO,EAAA,IAAA;AAAA,IACP,OAAQ,EAAA,WAAA;AAAA,IACR,KAAM,EAAA,IAAA;AAAA,IAEN,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,QAAA,EAAA;AAAA,QAAO,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,QAAG,EAAG,EAAA,GAAA;AAAA,QAAI,EAAG,EAAA,GAAA;AAAA,QAAI,CAAE,EAAA,KAAA;AAAA,OAAM,CAAA;AAAA,MAChE,2BACE,GAAA,CAAA,QAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,QACxC,EAAG,EAAA,GAAA;AAAA,QACH,EAAG,EAAA,GAAA;AAAA,QACH,CAAE,EAAA,KAAA;AAAA,OACJ,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"RadioButtonIcon.js","sources":["../src/radio-button/RadioButtonIcon.tsx"],"sourcesContent":["import { makePrefixer } from \"../utils\";\nimport { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\nimport radioButtonIconCss from \"./RadioButtonIcon.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonIcon\");\n\nexport interface RadioButtonIconProps {\n checked?: boolean;\n error?: boolean;\n disabled?: boolean;\n validationStatus?: AdornmentValidationStatus;\n}\n\n/*\n Default radio icon\n */\nexport const RadioButtonIcon = ({\n checked,\n error,\n disabled,\n validationStatus,\n}: RadioButtonIconProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button-icon\",\n css: radioButtonIconCss,\n window: targetWindow,\n });\n return (\n <svg\n className={clsx(withBaseName(), {\n [withBaseName(\"checked\")]: checked,\n [withBaseName(\"error\")]: error,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(validationStatus \|\| \"\")]: validationStatus,\n })}\n height=\"14\"\n viewBox=\"0 0 14 14\"\n width=\"14\"\n >\n <circle className={withBaseName(\"circle\")} cx=\"7\" cy=\"7\" r=\"6.5\" />\n {checked && (\n <circle\n className={withBaseName(\"checked-circle\")}\n cx=\"7\"\n cy=\"7\"\n r=\"3.2\"\n />\n )}\n </svg>\n );\n};\n"],"names":["radioButtonIconCss"],"mappings":";;;;;;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAYhD,MAAM,kBAAkB,CAAC;AAAA,EAC9B,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,gBAAA;AACF,CAA4B,KAAA;AAC1B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,MAC3B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,MACzB,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,MAC5B,CAAC,YAAA,CAAa,gBAAoB,IAAA,EAAE,CAAI,GAAA,gBAAA;AAAA,KACzC,CAAA;AAAA,IACD,MAAO,EAAA,IAAA;AAAA,IACP,OAAQ,EAAA,WAAA;AAAA,IACR,KAAM,EAAA,IAAA;AAAA,IAEN,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,QAAA,EAAA;AAAA,QAAO,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,QAAG,EAAG,EAAA,GAAA;AAAA,QAAI,EAAG,EAAA,GAAA;AAAA,QAAI,CAAE,EAAA,KAAA;AAAA,OAAM,CAAA;AAAA,MAChE,2BACE,GAAA,CAAA,QAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,QACxC,EAAG,EAAA,GAAA;AAAA,QACH,EAAG,EAAA,GAAA;AAAA,QACH,CAAE,EAAA,KAAA;AAAA,OACJ,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/radio-button/internal/RadioGroupContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioGroupContext.js","sources":["../src/radio-button/internal/RadioGroupContext.tsx"],"sourcesContent":["import { ChangeEventHandler } from \"react\";\nimport { createContext } from \"../../utils\";\n\nexport interface RadioGroupContextValue {\n name?: string;\n value?: string;\n onChange?: ChangeEventHandler<HTMLElement>;\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue>(\n \"RadioGroupContext\",\n {}\n);\n"],"names":[],"mappings":";;;;;;;;~~AASO~~,MAAM,iBAAoB,GAAA,aAAA;AAAA,EAC/B,mBAAA;AAAA,EACA,EAAC;AACH;;;;"}
1	+ {"version":3,"file":"RadioGroupContext.js","sources":["../src/radio-button/internal/RadioGroupContext.tsx"],"sourcesContent":["import { ChangeEventHandler } from \"react\";\nimport { a11yValueAriaProps } from \"../../form-field-context\";\nimport { AdornmentValidationStatus } from \"../../status-adornment\";\nimport { createContext } from \"../../utils\";\n\nexport interface RadioGroupContextValue {\n a11yProps?: a11yValueAriaProps;\n disabled?: boolean;\n name?: string;\n value?: string;\n onChange?: ChangeEventHandler<HTMLElement>;\n validationStatus?: AdornmentValidationStatus;\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue>(\n \"RadioGroupContext\",\n {}\n);\n"],"names":[],"mappings":";;;;;;;;AAcO,MAAM,iBAAoB,GAAA,aAAA;AAAA,EAC/B,mBAAA;AAAA,EACA,EAAC;AACH;;;;"}

package/dist-es/status-adornment/StatusAdornment.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var css_248z = ".saltStatusAdornment {\n  fill: var(--saltStatusAdornment-color, var(--statusAdornment-color));\n  display: inline-block;\n  position: relative;\n  height: var(--salt-icon-size-status-adornment);\n  min-height: var(--salt-icon-size-status-adornment);\n}\n\n.saltStatusAdornment-error {\n  --statusAdornment-color: var(--salt-status-error-foreground);\n}\n\n.saltStatusAdornment-warning {\n  --statusAdornment-color: var(--salt-status-warning-foreground);\n}\n";
+var css_248z = ".saltStatusAdornment {\n  display: inline-block;\n  fill: var(--saltStatusAdornment-color, var(--statusAdornment-color));\n  height: var(--salt-icon-size-status-adornment);\n  min-height: var(--salt-icon-size-status-adornment);\n  padding-left: var(--salt-spacing-100);\n  position: relative;\n}\n\n.saltStatusAdornment-error {\n  --statusAdornment-color: var(--salt-status-error-foreground);\n}\n\n.saltStatusAdornment-warning {\n  --statusAdornment-color: var(--salt-status-warning-foreground);\n}\n\n.saltStatusAdornment-success {\n  --statusAdornment-color: var(--salt-status-success-foreground);\n}\n";
 export { css_248z as default };
 //# sourceMappingURL=StatusAdornment.css.js.map

package/dist-es/status-adornment/StatusAdornment.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StatusAdornment.js","sources":["../src/status-adornment/StatusAdornment.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\nimport { ErrorAdornmentIcon } from \"./ErrorAdornment\";\nimport { SuccessAdornmentIcon } from \"./SuccessAdornment\";\nimport { WarningAdornmentIcon } from \"./WarningAdornment\";\n\nimport statusAdornmentCss from \"./StatusAdornment.css\";\n\nconst icons = {\n error: ErrorAdornmentIcon,\n warning: WarningAdornmentIcon,\n success: SuccessAdornmentIcon,\n};\n\~~ntype~~ AdornmentValidationStatus = Exclude<ValidationStatus, \"info\">;\n\nexport interface StatusAdornmentProps extends IconProps {\n /*\n Status adornment to be displayed.\n */\n status: AdornmentValidationStatus;\n}\n\nconst statusToAriaLabelMap: Record<AdornmentValidationStatus, string> = {\n error: \"error\",\n warning: \"warning\",\n success: \"success\",\n};\n\nconst withBaseName = makePrefixer(\"saltStatusAdornment\");\n\nexport const StatusAdornment = forwardRef<SVGSVGElement, StatusAdornmentProps>(\n function StatusAdornment({ className, status, ...restProps }, ref) {\n const AdornmentComponent = icons[status];\n const ariaLabel = statusToAriaLabelMap[status];\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-status-adornment\",\n css: statusAdornmentCss,\n window: targetWindow,\n });\n\n return (\n <AdornmentComponent\n className={clsx(withBaseName(), withBaseName(status), className)}\n aria-label={ariaLabel}\n {...restProps}\n ref={ref}\n />\n );\n }\n);\n"],"names":["StatusAdornment","statusAdornmentCss"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAM,KAAQ,GAAA;AAAA,EACZ,KAAO,EAAA,kBAAA;AAAA,EACP,OAAS,EAAA,oBAAA;AAAA,EACT,OAAS,EAAA,oBAAA;AACX,CAAA,CAAA;AAWA,MAAM,oBAAkE,GAAA;AAAA,EACtE,KAAO,EAAA,OAAA;AAAA,EACP,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AACX,CAAA,CAAA;AAEA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAEhD,MAAM,eAAkB,GAAA,UAAA;AAAA,EAC7B,SAASA,gBAAgB,CAAA,EAAE,WAAW,MAAW,EAAA,GAAA,SAAA,IAAa,GAAK,EAAA;AACjE,IAAA,MAAM,qBAAqB,KAAM,CAAA,MAAA,CAAA,CAAA;AACjC,IAAA,MAAM,YAAY,oBAAqB,CAAA,MAAA,CAAA,CAAA;AAEvC,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,uBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,kBAAA,EAAA;AAAA,MACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,MAC/D,YAAY,EAAA,SAAA;AAAA,MACX,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"StatusAdornment.js","sources":["../src/status-adornment/StatusAdornment.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\nimport { ErrorAdornmentIcon } from \"./ErrorAdornment\";\nimport { SuccessAdornmentIcon } from \"./SuccessAdornment\";\nimport { WarningAdornmentIcon } from \"./WarningAdornment\";\n\nimport statusAdornmentCss from \"./StatusAdornment.css\";\n\nconst icons = {\n error: ErrorAdornmentIcon,\n warning: WarningAdornmentIcon,\n success: SuccessAdornmentIcon,\n};\n\nexport type AdornmentValidationStatus = Exclude<ValidationStatus, \"info\">;\n\nexport interface StatusAdornmentProps extends IconProps {\n /*\n Status adornment to be displayed.\n */\n status: AdornmentValidationStatus;\n}\n\nconst statusToAriaLabelMap: Record<AdornmentValidationStatus, string> = {\n error: \"error\",\n warning: \"warning\",\n success: \"success\",\n};\n\nconst withBaseName = makePrefixer(\"saltStatusAdornment\");\n\nexport const StatusAdornment = forwardRef<SVGSVGElement, StatusAdornmentProps>(\n function StatusAdornment({ className, status, ...restProps }, ref) {\n const AdornmentComponent = icons[status];\n const ariaLabel = statusToAriaLabelMap[status];\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-status-adornment\",\n css: statusAdornmentCss,\n window: targetWindow,\n });\n\n return (\n <AdornmentComponent\n className={clsx(withBaseName(), withBaseName(status), className)}\n aria-label={ariaLabel}\n {...restProps}\n ref={ref}\n />\n );\n }\n);\n"],"names":["StatusAdornment","statusAdornmentCss"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAM,KAAQ,GAAA;AAAA,EACZ,KAAO,EAAA,kBAAA;AAAA,EACP,OAAS,EAAA,oBAAA;AAAA,EACT,OAAS,EAAA,oBAAA;AACX,CAAA,CAAA;AAWA,MAAM,oBAAkE,GAAA;AAAA,EACtE,KAAO,EAAA,OAAA;AAAA,EACP,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AACX,CAAA,CAAA;AAEA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAEhD,MAAM,eAAkB,GAAA,UAAA;AAAA,EAC7B,SAASA,gBAAgB,CAAA,EAAE,WAAW,MAAW,EAAA,GAAA,SAAA,IAAa,GAAK,EAAA;AACjE,IAAA,MAAM,qBAAqB,KAAM,CAAA,MAAA,CAAA,CAAA;AACjC,IAAA,MAAM,YAAY,oBAAqB,CAAA,MAAA,CAAA,CAAA;AAEvC,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,uBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,kBAAA,EAAA;AAAA,MACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,MAC/D,YAAY,EAAA,SAAA;AAAA,MACX,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/utils/useResponsiveProp.js CHANGED Viewed

@@ -2,7 +2,9 @@ import { useBreakpoints } from '../salt-provider/SaltProvider.js';
 import { useViewport } from '../viewport/ViewportProvider.js';
 const getCurrentBreakpoint = (breakpoints, width) => {
-  const breakpointList = Object.entries(breakpoints);
+  const breakpointList = Object.entries(breakpoints).sort(
+    ([, a], [, b]) => a - b
+  );
   const [currentBreakpoint] = breakpointList.reduce((acc, val) => {
     const [, accWidth] = acc;
     const [breakpoint, breakpointWidth] = val;
@@ -20,8 +22,7 @@ const useCurrentBreakpoint = () => {
 };
 const useOrderedBreakpoints = () => {
   const breakpoints = useBreakpoints();
-  const orderedBreakpoints = Object.entries(breakpoints).sort(([, a], [, b]) => a - b).map(([key]) => key);
-  return orderedBreakpoints;
+  return Object.entries(breakpoints).sort(([, a], [, b]) => a - b).map(([key]) => key);
 };
 const isObject = (value) => {
   const type = typeof value;
@@ -31,7 +32,7 @@ const hasBreakpointValues = (value, breakpoints) => {
   return isObject(value) && Object.keys(value).every((key) => key in breakpoints);
 };
 const getResponsiveValue = (breakpointValues, breakpoints, viewport, defaultValue) => {
-  const value = Object.entries(breakpointValues).reduce(
+  return Object.entries(breakpointValues).reduce(
     (acc, val) => {
       const [accWidth] = acc;
       const [breakpoint, breakpointValue] = val;
@@ -43,11 +44,12 @@ const getResponsiveValue = (breakpointValues, breakpoints, viewport, defaultValu
     },
     [0, defaultValue]
   )[1];
-  return value;
 };
 const useResponsiveProp = (value, defaultValue) => {
   const breakpoints = useBreakpoints();
   const viewport = useViewport();
+  if (value === defaultValue)
+    return defaultValue;
   const currentViewport = getCurrentBreakpoint(breakpoints, viewport);
   if (hasBreakpointValues(value, breakpoints)) {
     return getResponsiveValue(

package/dist-es/utils/useResponsiveProp.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useResponsiveProp.js","sources":["../src/utils/useResponsiveProp.ts"],"sourcesContent":["import { Breakpoints } from \"../breakpoints\";\nimport { useBreakpoints } from \"../salt-provider\";\nimport { useViewport } from \"../viewport\";\n\ntype BreakpointProp<T> = {\n [K in keyof Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T \| BreakpointProp<T>;\n\nexport const getCurrentBreakpoint = (\n breakpoints: Breakpoints,\n width: number\n) => {\n const breakpointList = Object.entries(breakpoints);\n\n const [currentBreakpoint] = (\n breakpointList as [keyof Breakpoints, number][]\n ).reduce((acc, val) => {\n const [, accWidth] = acc;\n const [breakpoint, breakpointWidth] = val;\n if (breakpointWidth < width && breakpointWidth > accWidth) {\n return [breakpoint, breakpointWidth];\n }\n return [...acc];\n }, breakpointList[0] as [keyof Breakpoints, number]);\n\n return currentBreakpoint;\n};\n\nexport const useCurrentBreakpoint = () => {\n const viewport = useViewport();\n\n const breakpoints = useBreakpoints();\n\n return getCurrentBreakpoint(breakpoints, viewport);\n};\n\nexport const useOrderedBreakpoints = () => {\n const breakpoints = useBreakpoints();\n\n ~~const~~ ~~orderedBreakpoints =~~ Object.entries(breakpoints)\n .sort(([, a], [, b]) => a - b)\n .map(([key]) => key);\n~~\n return orderedBreakpoints;\n~~};\n\nconst isObject = <T>(\n value: T\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n): value is Record<string \| number \| symbol, any> => {\n const type = typeof value;\n return value !== null && (type === \"object\" \|\| type === \"function\");\n};\n\nconst hasBreakpointValues = <T>(\n value: ResponsiveProp<T>,\n breakpoints: Breakpoints\n): value is BreakpointProp<T> => {\n return (\n isObject(value) && Object.keys(value).every((key) => key in breakpoints)\n );\n};\n\nconst getResponsiveValue = <T>(\n breakpointValues: BreakpointProp<T>,\n breakpoints: Breakpoints,\n viewport: keyof Breakpoints,\n defaultValue: T\n) => {\n ~~const~~ ~~value =~~ Object.entries(breakpointValues).reduce<[number, T]>(\n (acc, val) => {\n const [accWidth] = acc;\n const [breakpoint, breakpointValue] = val;\n\n const breakpointWidth =\n breakpoints[breakpoint as keyof typeof breakpoints];\n\n if (\n breakpointWidth >= accWidth &&\n breakpointWidth <= breakpoints[viewport]\n ) {\n return [breakpointWidth, breakpointValue];\n }\n\n return acc;\n },\n [0, defaultValue]\n )[1];\n~~\n return value;\n~~};\n\nexport const useResponsiveProp = <T>(\n value: ResponsiveProp<T>,\n defaultValue: T\n) => {\n const breakpoints = useBreakpoints();\n const viewport = useViewport();\n\n const currentViewport = getCurrentBreakpoint(breakpoints, viewport);\n\n if (hasBreakpointValues(value, breakpoints)) {\n return getResponsiveValue(\n value,\n breakpoints,\n currentViewport,\n defaultValue\n );\n }\n return value;\n};\n"],"names":[],"mappings":";;;AAUa,MAAA,oBAAA,GAAuB,CAClC,WAAA,EACA,KACG,KAAA;AACH,~~EAAM~~,MAAA,~~cAAA~~,~~GAAiB~~,~~MAAO~~,CAAA,~~OAAA~~,~~CAAQ~~,~~WAAW~~,CAAA,CAAA;~~AAEjD~~,EAAA,MAAM,CAAC,iBAAiB,CAAA,GACtB,eACA,MAAO,CAAA,CAAC,KAAK,GAAQ,KAAA;AACrB,IAAM,MAAA,GAAG,QAAQ,CAAI,GAAA,GAAA,CAAA;AACrB,IAAM,MAAA,CAAC,UAAY,EAAA,eAAe,CAAI,GAAA,GAAA,CAAA;AACtC,IAAI,IAAA,eAAA,GAAkB,KAAS,IAAA,eAAA,GAAkB,QAAU,EAAA;AACzD,MAAO,OAAA,CAAC,YAAY,eAAe,CAAA,CAAA;AAAA,KACrC;AACA,IAAO,OAAA,CAAC,GAAG,GAAG,CAAA,CAAA;AAAA,GAChB,EAAG,eAAe,CAAiC,CAAA,CAAA,CAAA;AAEnD,EAAO,OAAA,iBAAA,CAAA;AACT,EAAA;AAEO,MAAM,uBAAuB,MAAM;AACxC,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAE7B,EAAA,MAAM,cAAc,cAAe,EAAA,CAAA;AAEnC,EAAO,OAAA,oBAAA,CAAqB,aAAa,QAAQ,CAAA,CAAA;AACnD,EAAA;AAEO,MAAM,wBAAwB,MAAM;AACzC,EAAA,MAAM,cAAc,cAAe,EAAA,CAAA;AAEnC,~~EAAM~~,MAAA,~~kBAAA~~,~~GAAqB~~,~~OAAO~~,~~OAAQ,~~CAAA,~~WAAW~~,~~EAClD~~,~~IAAK,CAAA,~~CAAC,GAAG,CAAC,~~CAAA~~,~~EAAG~~,GAAG,CAAC,~~CAAM~~,~~KAAA~~,~~CAAA~~,~~GAAI,~~CAAC,CAAA,CAC5B,IAAI,CAAC,CAAC,GAAG,CAAA,KAAM,GAAG,CAAA,CAAA;~~AAErB~~,~~EAAO,OAAA,kBAAA,CAAA;AACT,~~EAAA;AAEA,MAAM,QAAA,GAAW,CACf,KAEmD,KAAA;AACnD,EAAA,MAAM,OAAO,OAAO,KAAA,CAAA;AACpB,EAAA,OAAO,KAAU,KAAA,IAAA,KAAS,IAAS,KAAA,QAAA,IAAY,IAAS,KAAA,UAAA,CAAA,CAAA;AAC1D,CAAA,CAAA;AAEA,MAAM,mBAAA,GAAsB,CAC1B,KAAA,EACA,WAC+B,KAAA;AAC/B,EACE,OAAA,QAAA,CAAS,KAAK,CAAA,IAAK,MAAO,CAAA,IAAA,CAAK,KAAK,CAAA,CAAE,KAAM,CAAA,CAAC,GAAQ,KAAA,GAAA,IAAO,WAAW,CAAA,CAAA;AAE3E,CAAA,CAAA;AAEA,MAAM,kBAAqB,GAAA,CACzB,gBACA,EAAA,WAAA,EACA,UACA,YACG,KAAA;AACH,~~EAAA~~,~~MAAM~~,~~KAAQ,GAAA,~~MAAA,CAAO,OAAQ,CAAA,gBAAgB,CAAE,CAAA,MAAA;AAAA,~~IAC7C~~,CAAC,KAAK,GAAQ,KAAA;AACZ,MAAM,MAAA,CAAC,QAAQ,CAAI,GAAA,GAAA,CAAA;AACnB,MAAM,MAAA,CAAC,UAAY,EAAA,eAAe,CAAI,GAAA,GAAA,CAAA;AAEtC,MAAA,MAAM,kBACJ,WAAY,CAAA,UAAA,CAAA,CAAA;AAEd,MAAA,IACE,eAAmB,IAAA,QAAA,IACnB,eAAmB,IAAA,WAAA,CAAY,QAC/B,CAAA,EAAA;AACA,QAAO,OAAA,CAAC,iBAAiB,eAAe,CAAA,CAAA;AAAA,OAC1C;AAEA,MAAO,OAAA,GAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,GAAG,YAAY,CAAA;AAAA,GAChB,CAAA,CAAA,CAAA,CAAA;~~AAEF~~,~~EAAO,OAAA,KAAA,~~CAAA~~;AACT~~,CAAA~~,CAAA~~;AAEa,MAAA,iBAAA,GAAoB,CAC/B,KAAA,EACA,YACG,KAAA;AACH,EAAA,MAAM,cAAc,cAAe,EAAA,CAAA;AACnC,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAE7B,EAAM,MAAA,eAAA,GAAkB,oBAAqB,CAAA,WAAA,EAAa,QAAQ,CAAA,CAAA;~~AAElE~~,EAAI,IAAA,mBAAA,CAAoB,KAAO,EAAA,WAAW,CAAG,EAAA;AAC3C,IAAO,OAAA,kBAAA;AAAA,MACL,KAAA;AAAA,MACA,WAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,KACF,CAAA;AAAA,GACF;AACA,EAAO,OAAA,KAAA,CAAA;AACT;;;;"}
1	+ {"version":3,"file":"useResponsiveProp.js","sources":["../src/utils/useResponsiveProp.ts"],"sourcesContent":["import { Breakpoints } from \"../breakpoints\";\nimport { useBreakpoints } from \"../salt-provider\";\nimport { useViewport } from \"../viewport\";\n\ntype BreakpointProp<T> = {\n [K in keyof Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T \| BreakpointProp<T>;\n\nexport const getCurrentBreakpoint = (\n breakpoints: Breakpoints,\n width: number\n) => {\n const breakpointList = Object.entries(breakpoints).sort(\n ([, a], [, b]) => a - b\n );\n const [currentBreakpoint] = (\n breakpointList as [keyof Breakpoints, number][]\n ).reduce((acc, val) => {\n const [, accWidth] = acc;\n const [breakpoint, breakpointWidth] = val;\n if (breakpointWidth < width && breakpointWidth > accWidth) {\n return [breakpoint, breakpointWidth];\n }\n return [...acc];\n }, breakpointList[0] as [keyof Breakpoints, number]);\n\n return currentBreakpoint;\n};\n\nexport const useCurrentBreakpoint = () => {\n const viewport = useViewport();\n\n const breakpoints = useBreakpoints();\n\n return getCurrentBreakpoint(breakpoints, viewport);\n};\n\nexport const useOrderedBreakpoints = () => {\n const breakpoints = useBreakpoints();\n\n return Object.entries(breakpoints)\n .sort(([, a], [, b]) => a - b)\n .map(([key]) => key);\n};\n\nconst isObject = <T>(\n value: T\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n): value is Record<string \| number \| symbol, any> => {\n const type = typeof value;\n return value !== null && (type === \"object\" \|\| type === \"function\");\n};\n\nconst hasBreakpointValues = <T>(\n value: ResponsiveProp<T>,\n breakpoints: Breakpoints\n): value is BreakpointProp<T> => {\n return (\n isObject(value) && Object.keys(value).every((key) => key in breakpoints)\n );\n};\n\nconst getResponsiveValue = <T>(\n breakpointValues: BreakpointProp<T>,\n breakpoints: Breakpoints,\n viewport: keyof Breakpoints,\n defaultValue: T\n) => {\n return Object.entries(breakpointValues).reduce<[number, T]>(\n (acc, val) => {\n const [accWidth] = acc;\n const [breakpoint, breakpointValue] = val;\n\n const breakpointWidth =\n breakpoints[breakpoint as keyof typeof breakpoints];\n\n if (\n breakpointWidth >= accWidth &&\n breakpointWidth <= breakpoints[viewport]\n ) {\n return [breakpointWidth, breakpointValue];\n }\n\n return acc;\n },\n [0, defaultValue]\n )[1];\n};\n\nexport const useResponsiveProp = <T>(\n value: ResponsiveProp<T>,\n defaultValue: T\n) => {\n const breakpoints = useBreakpoints();\n const viewport = useViewport();\n // return early if the values are the same\n if (value === defaultValue) return defaultValue;\n\n const currentViewport = getCurrentBreakpoint(breakpoints, viewport);\n if (hasBreakpointValues(value, breakpoints)) {\n return getResponsiveValue(\n value,\n breakpoints,\n currentViewport,\n defaultValue\n );\n }\n return value;\n};\n"],"names":[],"mappings":"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"}

package/dist-types/checkbox/Checkbox.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { ChangeEventHandler, FocusEventHandler, InputHTMLAttributes, ReactNode } from "react";
+import { AdornmentValidationStatus } from "../status-adornment";
 export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLLabelElement>, "onChange" | "onBlur" | "onFocus"> {
     /**
      * If `true`, the checkbox will be checked.
@@ -14,6 +15,7 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLLabelElement
      */
     disabled?: boolean;
     /**
+     * **Deprecated**: Use validationStatus instead
      * If `true`, the checkbox will be in the error state.
      */
     error?: boolean;
@@ -51,5 +53,12 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLLabelElement
      * The value of the checkbox.
      */
     value?: string;
+    /**
+     * Validation status, one of "warning" | "error" | "success"
+     *
+     * Checkbox has styling variants for "error" and "warning".
+     * No visual styling will be applied on "success" variant.
+     */
+    validationStatus?: AdornmentValidationStatus;
 }
 export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLLabelElement>>;

package/dist-types/checkbox/CheckboxGroup.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { ChangeEventHandler, ComponentPropsWithoutRef } from "react";
+import { AdornmentValidationStatus } from "../status-adornment";
 export interface CheckboxGroupProps extends Omit<ComponentPropsWithoutRef<"fieldset">, "onChange"> {
     /**
      * The current checked options.
@@ -12,6 +13,10 @@ export interface CheckboxGroupProps extends Omit<ComponentPropsWithoutRef<"field
      * Display group of elements in a compact row.
      */
     direction?: "horizontal" | "vertical";
+    /**
+     * Disable the Checkbox group
+     */
+    disabled?: boolean;
     /**
      * The name used to reference the value of the control.
      */
@@ -25,5 +30,9 @@ export interface CheckboxGroupProps extends Omit<ComponentPropsWithoutRef<"field
      * Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise, the checkboxes will wrap onto the next line.
      */
     wrap?: boolean;
+    /**
+     * Validation status.
+     */
+    validationStatus?: AdornmentValidationStatus;
 }
 export declare const CheckboxGroup: import("react").ForwardRefExoticComponent<CheckboxGroupProps & import("react").RefAttributes<HTMLFieldSetElement>>;

package/dist-types/checkbox/CheckboxIcon.d.ts CHANGED Viewed

@@ -1,9 +1,11 @@
 /// <reference types="react" />
+import { AdornmentValidationStatus } from "../status-adornment";
 export interface CheckboxIconProps {
     checked?: boolean;
     className?: string;
     disabled?: boolean;
     error?: boolean;
     indeterminate?: boolean;
+    validationStatus?: AdornmentValidationStatus;
 }
-export declare const CheckboxIcon: ({ checked, className: classNameProp, disabled, error, indeterminate, }: CheckboxIconProps) => JSX.Element;
+export declare const CheckboxIcon: ({ checked, className: classNameProp, disabled, error, indeterminate, validationStatus, }: CheckboxIconProps) => JSX.Element;

package/dist-types/checkbox/internal/CheckboxGroupContext.d.ts CHANGED Viewed

@@ -1,9 +1,14 @@
 /// <reference types="react" />
+import { a11yValueAriaProps } from "../../form-field-context";
+import { AdornmentValidationStatus } from "../../status-adornment";
 import { CheckboxGroupProps } from "../CheckboxGroup";
 export interface CheckboxGroupState {
+    a11yProps?: a11yValueAriaProps;
+    disabled?: boolean;
     name?: CheckboxGroupProps["name"];
     onChange?: CheckboxGroupProps["onChange"];
     checkedValues?: CheckboxGroupProps["checkedValues"];
+    validationStatus?: AdornmentValidationStatus;
 }
 declare const CheckboxGroupContext: import("react").Context<CheckboxGroupState>;
 export { CheckboxGroupContext };