@salt-ds/core 1.4.0 → 1.5.0

package/dist-es/packages/core/src/checkbox/Checkbox.js

@@ -0,0 +1,91 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import { useControlled } from '../utils/useControlled.js';
+import '../utils/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { CheckboxIcon } from './CheckboxIcon.js';
+import './Checkbox.css.js';
+import { useCheckboxGroup } from './internal/useCheckboxGroup.js';
+
+const withBaseName = makePrefixer("saltCheckbox");
+const Checkbox = forwardRef(
+  function Checkbox2({
+    checked: checkedProp,
+    className,
+    defaultChecked,
+    disabled,
+    error,
+    indeterminate,
+    inputProps,
+    label,
+    name,
+    onBlur,
+    onChange,
+    onFocus,
+    value,
+    ...rest
+  }, ref) {
+    var _a;
+    const checkboxGroup = useCheckboxGroup();
+    const handleChange = (event) => {
+      var _a2;
+      if (event.nativeEvent.defaultPrevented) {
+        return;
+      }
+      const value2 = event.target.checked;
+      setChecked(value2);
+      onChange == null ? void 0 : onChange(event);
+      (_a2 = checkboxGroup.onChange) == null ? void 0 : _a2.call(checkboxGroup, event);
+    };
+    const checkboxGroupChecked = checkedProp == null && value != null ? (_a = checkboxGroup.checkedValues) == null ? void 0 : _a.includes(value) : checkedProp;
+    const [checked, setChecked] = useControlled({
+      controlled: checkboxGroupChecked,
+      default: Boolean(defaultChecked),
+      name: "Checkbox",
+      state: "checked"
+    });
+    return /* @__PURE__ */ jsxs("label", {
+      className: clsx(
+        withBaseName(),
+        {
+          [withBaseName("disabled")]: disabled,
+          [withBaseName("error")]: error
+        },
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("input", {
+          "aria-checked": indeterminate ? "mixed" : void 0,
+          name,
+          value,
+          ...inputProps,
+          checked,
+          className: withBaseName("input"),
+          "data-indeterminate": indeterminate,
+          defaultChecked,
+          disabled,
+          onBlur,
+          onChange: handleChange,
+          onFocus,
+          type: "checkbox"
+        }),
+        /* @__PURE__ */ jsx(CheckboxIcon, {
+          checked,
+          disabled,
+          error,
+          indeterminate
+        }),
+        label
+      ]
+    });
+  }
+);
+
+export { Checkbox };
+//# sourceMappingURL=Checkbox.js.map

package/dist-es/packages/core/src/checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  ReactNode,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { CheckboxIcon } from \"./CheckboxIcon\";\n\nimport \"./Checkbox.css\";\nimport { useCheckboxGroup } from \"./internal/useCheckboxGroup\";\n\nconst withBaseName = makePrefixer(\"saltCheckbox\");\n\nexport interface CheckboxProps\n  extends Omit<\n    InputHTMLAttributes<HTMLLabelElement>,\n    \"onChange\" | \"onBlur\" | \"onFocus\"\n  > {\n  /**\n   * If `true`, the checkbox will be checked.\n   */\n  checked?: boolean;\n  /**\n   * Whether the checkbox component is checked by default\n   * This will be disregarded if checked is already set.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true`, the checkbox will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the checkbox will be in the error state.\n   */\n  error?: boolean;\n  /**\n   * If true, the checkbox appears indeterminate. This does not set the native\n   * input element to indeterminate due to the inconsistent behaviour across browsers\n   * However, a data-indeterminate attribute is set on the input.\n   */\n  indeterminate?: boolean;\n  /**\n   * Properties applied to the input element.\n   */\n  inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n  /**\n   * The label to be shown next to the checkbox.\n   */\n  label?: ReactNode;\n  /**\n   * The name applied to the input.\n   */\n  name?: string;\n  /**\n   * Callback when checkbox loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback when checked state is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Callback when checkbox gains focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * The value of the checkbox.\n   */\n  value?: string;\n}\n\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n  function Checkbox(\n    {\n      checked: checkedProp,\n      className,\n      defaultChecked,\n      disabled,\n      error,\n      indeterminate,\n      inputProps,\n      label,\n      name,\n      onBlur,\n      onChange,\n      onFocus,\n      value,\n      ...rest\n    },\n    ref\n  ) {\n    const checkboxGroup = useCheckboxGroup();\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      // Workaround for https://github.com/facebook/react/issues/9023\n      if (event.nativeEvent.defaultPrevented) {\n        return;\n      }\n\n      const value = event.target.checked;\n      setChecked(value);\n      onChange?.(event);\n      checkboxGroup.onChange?.(event);\n    };\n\n    const checkboxGroupChecked =\n      checkedProp == null && value != null\n        ? checkboxGroup.checkedValues?.includes(value)\n        : checkedProp;\n\n    const [checked, setChecked] = useControlled({\n      controlled: checkboxGroupChecked,\n      default: Boolean(defaultChecked),\n      name: \"Checkbox\",\n      state: \"checked\",\n    });\n\n    return (\n      <label\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"error\")]: error,\n          },\n          className\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <input\n          // aria-checked only needed when indeterminate since native indeterminate behaviour is not used\n          aria-checked={indeterminate ? \"mixed\" : undefined}\n          name={name}\n          value={value}\n          {...inputProps}\n          checked={checked}\n          className={withBaseName(\"input\")}\n          data-indeterminate={indeterminate}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          onBlur={onBlur}\n          onChange={handleChange}\n          onFocus={onFocus}\n          type=\"checkbox\"\n        />\n        <CheckboxIcon\n          checked={checked}\n          disabled={disabled}\n          error={error}\n          indeterminate={indeterminate}\n        />\n        {label}\n      </label>\n    );\n  }\n);\n"],"names":["Checkbox","_a","value"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AA4DzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SACP,CAAA;AAAA,IACE,OAAS,EAAA,WAAA;AAAA,IACT,SAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AA7FJ,IAAA,IAAA,EAAA,CAAA;AA8FI,IAAA,MAAM,gBAAgB,gBAAiB,EAAA,CAAA;AAEvC,IAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AAhG1E,MAAAC,IAAAA,GAAAA,CAAAA;AAkGM,MAAI,IAAA,KAAA,CAAM,YAAY,gBAAkB,EAAA;AACtC,QAAA,OAAA;AAAA,OACF;AAEA,MAAMC,MAAAA,MAAAA,GAAQ,MAAM,MAAO,CAAA,OAAA,CAAA;AAC3B,MAAA,UAAA,CAAWA,MAAK,CAAA,CAAA;AAChB,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AACX,MAAA,CAAAD,GAAA,GAAA,aAAA,CAAc,QAAd,KAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,IAAA,IAAyB,CAAA,aAAA,EAAA,KAAA,CAAA,CAAA;AAAA,KAC3B,CAAA;AAEA,IAAM,MAAA,oBAAA,GACJ,eAAe,IAAQ,IAAA,KAAA,IAAS,QAC5B,EAAc,GAAA,aAAA,CAAA,aAAA,KAAd,IAA6B,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,QAAA,CAAS,KACtC,CAAA,GAAA,WAAA,CAAA;AAEN,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,aAAc,CAAA;AAAA,MAC1C,UAAY,EAAA,oBAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,cAAc,CAAA;AAAA,MAC/B,IAAM,EAAA,UAAA;AAAA,MACN,KAAO,EAAA,SAAA;AAAA,KACR,CAAA,CAAA;AAED,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,UAC5B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,SAC3B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,OAAA,EAAA;AAAA,UAEC,cAAA,EAAc,gBAAgB,OAAU,GAAA,KAAA,CAAA;AAAA,UACxC,IAAA;AAAA,UACA,KAAA;AAAA,UACC,GAAG,UAAA;AAAA,UACJ,OAAA;AAAA,UACA,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,oBAAoB,EAAA,aAAA;AAAA,UACpB,cAAA;AAAA,UACA,QAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAU,EAAA,YAAA;AAAA,UACV,OAAA;AAAA,UACA,IAAK,EAAA,UAAA;AAAA,SACP,CAAA;AAAA,wBACC,GAAA,CAAA,YAAA,EAAA;AAAA,UACC,OAAA;AAAA,UACA,QAAA;AAAA,UACA,KAAA;AAAA,UACA,aAAA;AAAA,SACF,CAAA;AAAA,QACC,KAAA;AAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/core/src/checkbox/CheckboxGroup.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "/* Styles applied to root component */\n.saltCheckboxGroup {\n  border: none;\n  margin: 0;\n  padding: 0;\n}\n\n/* Styles applied to root component if `direction={\"horizontal\"}` */\n.saltCheckboxGroup-horizontal {\n  display: flex;\n  gap: var(--salt-size-adornmentGap);\n  flex-direction: row;\n  flex-wrap: wrap;\n}\n\n/* Styles applied to root component if `direction={\"vertical\"}` */\n.saltCheckboxGroup-vertical {\n  display: flex;\n  gap: var(--salt-size-unit);\n  flex-direction: column;\n}\n\n.saltCheckboxGroup-noWrap {\n  flex-wrap: nowrap;\n}\n\n.saltCheckboxGroup-noWrap .saltCheckbox {\n  white-space: break-spaces;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=CheckboxGroup.css.js.map

package/dist-es/packages/core/src/checkbox/CheckboxGroup.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist-es/packages/core/src/checkbox/CheckboxGroup.js

@@ -0,0 +1,58 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import { useControlled } from '../utils/useControlled.js';
+import '../utils/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { CheckboxGroupContext } from './internal/CheckboxGroupContext.js';
+import './CheckboxGroup.css.js';
+
+const withBaseName = makePrefixer("saltCheckboxGroup");
+const CheckboxGroup = forwardRef(function CheckboxGroup2({
+  checkedValues: checkedValuesProp,
+  defaultCheckedValues = [],
+  children,
+  className,
+  direction = "vertical",
+  name,
+  onChange,
+  wrap,
+  ...other
+}, ref) {
+  const [checkedValues, setCheckedValues] = useControlled({
+    controlled: checkedValuesProp,
+    default: defaultCheckedValues,
+    name: "CheckboxGroup",
+    state: "checkedValues"
+  });
+  const handleChange = (event) => {
+    setCheckedValues((oldValues = []) => {
+      const name2 = event.target.value;
+      const isSelected = oldValues.includes(name2);
+      return isSelected ? oldValues.filter((value) => value !== name2) : oldValues.concat(name2);
+    });
+    onChange == null ? void 0 : onChange(event);
+  };
+  return /* @__PURE__ */ jsx("fieldset", {
+    className: clsx(
+      withBaseName(),
+      withBaseName(direction),
+      {
+        [withBaseName("noWrap")]: !wrap
+      },
+      className
+    ),
+    ref,
+    ...other,
+    children: /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, {
+      value: { name, onChange: handleChange, checkedValues },
+      children
+    })
+  });
+});
+
+export { CheckboxGroup };
+//# sourceMappingURL=CheckboxGroup.js.map

package/dist-es/packages/core/src/checkbox/CheckboxGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.js","sources":["../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEvent,\n  ChangeEventHandler,\n  ComponentPropsWithoutRef,\n  forwardRef,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { CheckboxGroupContext } from \"./internal/CheckboxGroupContext\";\n\nimport \"./CheckboxGroup.css\";\n\nexport interface CheckboxGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"onChange\"> {\n  /**\n   * The current checked options.\n   */\n  checkedValues?: string[];\n  /**\n   * The default selected options for un-controlled component.\n   */\n  defaultCheckedValues?: string[];\n  /**\n   * Display group of elements in a compact row.\n   */\n  direction?: \"horizontal\" | \"vertical\";\n  /**\n   * The name used to reference the value of the control.\n   */\n  name?: string;\n  /**\n   * Callback fired when a checkbox is clicked.\n   * `event.target.value` returns the value of the checkbox that was clicked.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * 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.\n   */\n  wrap?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxGroup\");\n\nexport const CheckboxGroup = forwardRef<\n  HTMLFieldSetElement,\n  CheckboxGroupProps\n>(function CheckboxGroup(\n  {\n    checkedValues: checkedValuesProp,\n    defaultCheckedValues = [],\n    children,\n    className,\n    direction = \"vertical\",\n    name,\n    onChange,\n    wrap,\n    ...other\n  },\n  ref\n) {\n  const [checkedValues, setCheckedValues] = useControlled({\n    controlled: checkedValuesProp,\n    default: defaultCheckedValues,\n    name: \"CheckboxGroup\",\n    state: \"checkedValues\",\n  });\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setCheckedValues((oldValues: string[] = []) => {\n      const name = event.target.value;\n      const isSelected = oldValues.includes(name);\n\n      return isSelected\n        ? oldValues.filter((value) => value !== name)\n        : oldValues.concat(name);\n    });\n\n    onChange?.(event);\n  };\n\n  return (\n    <fieldset\n      className={clsx(\n        withBaseName(),\n        withBaseName(direction),\n        {\n          [withBaseName(\"noWrap\")]: !wrap,\n        },\n        className\n      )}\n      ref={ref}\n      {...other}\n    >\n      <CheckboxGroupContext.Provider\n        value={{ name, onChange: handleChange, checkedValues }}\n      >\n        {children}\n      </CheckboxGroupContext.Provider>\n    </fieldset>\n  );\n});\n"],"names":["CheckboxGroup","name"],"mappings":";;;;;;;;;;;;AAyCA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAExC,MAAA,aAAA,GAAgB,UAG3B,CAAA,SAASA,cACT,CAAA;AAAA,EACE,aAAe,EAAA,iBAAA;AAAA,EACf,uBAAuB,EAAC;AAAA,EACxB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAY,GAAA,UAAA;AAAA,EACZ,IAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACG,GAAA,KAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,aAAc,CAAA;AAAA,IACtD,UAAY,EAAA,iBAAA;AAAA,IACZ,OAAS,EAAA,oBAAA;AAAA,IACT,IAAM,EAAA,eAAA;AAAA,IACN,KAAO,EAAA,eAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAiB,gBAAA,CAAA,CAAC,SAAsB,GAAA,EAAO,KAAA;AAC7C,MAAMC,MAAAA,KAAAA,GAAO,MAAM,MAAO,CAAA,KAAA,CAAA;AAC1B,MAAM,MAAA,UAAA,GAAa,SAAU,CAAA,QAAA,CAASA,KAAI,CAAA,CAAA;AAE1C,MAAO,OAAA,UAAA,GACH,SAAU,CAAA,MAAA,CAAO,CAAC,KAAA,KAAU,UAAUA,KAAI,CAAA,GAC1C,SAAU,CAAA,MAAA,CAAOA,KAAI,CAAA,CAAA;AAAA,KAC1B,CAAA,CAAA;AAED,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,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,GAAA;AAAA,IACC,GAAG,KAAA;AAAA,IAEJ,QAAA,kBAAA,GAAA,CAAC,qBAAqB,QAArB,EAAA;AAAA,MACC,KAAO,EAAA,EAAE,IAAM,EAAA,QAAA,EAAU,cAAc,aAAc,EAAA;AAAA,MAEpD,QAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/core/src/checkbox/CheckboxIcon.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "/* Styles applied to root component */\n\n.saltCheckboxIcon {\n  --checkbox-density-bar-y: 6px;\n  --checkbox-density-bar-height: 2px;\n\n  --checkbox-borderWidth: var(--salt-size-border);\n  --checkbox-size: var(--salt-size-selectable);\n  --checkbox-box-offset: calc(var(--checkbox-borderWidth) / 2);\n  /* 14px is used to match the svg's viewbox */\n  --checkbox-box-size: calc(100% - var(--checkbox-borderWidth));\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-tick-color, var(--salt-selectable-primary-foreground-selected));\n\n  fill: var(--saltCheckbox-icon-fill, var(--salt-selectable-background));\n  height: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  min-height: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  stroke: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground));\n  stroke-width: var(--saltCheckbox-icon-strokeWidth, var(--checkbox-borderWidth));\n  width: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  min-width: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  background: var(--salt-container-primary-background);\n}\n\n/* Styles applied to root component on hover */\n.saltCheckbox:hover .saltCheckboxIcon {\n  stroke: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground-hover));\n  background: var(--salt-selectable-background-hover);\n}\n\n/* Styles applied if `disabled={true}` */\n.saltCheckbox-disabled:hover .saltCheckboxIcon,\n.saltCheckboxIcon-disabled {\n  stroke: var(--saltCheckbox-icon-stroke-disabled, var(--salt-selectable-foreground-disabled));\n  background: var(--salt-selectable-background);\n}\n\n/* Styles applied if `error={true}` */\n.saltCheckbox-error .saltCheckboxIcon,\n.saltCheckbox-error:hover .saltCheckboxIcon {\n  stroke: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground));\n}\n\n/* Styles applied if `error={true}` on hover */\n.saltCheckbox-error:hover .saltCheckboxIcon {\n  background: var(--salt-status-error-background-emphasize);\n}\n\n/* Styles applied if `error={true}` and `disabled={true}` */\n.saltCheckbox-error.saltCheckbox-disabled .saltCheckboxIcon,\n.saltCheckbox-error.saltCheckbox-disabled:hover .saltCheckboxIcon {\n  stroke: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground-disabled));\n  background: var(--salt-selectable-background);\n}\n\n/* Styles applied if `checked={true}` */\n.saltCheckboxIcon-checked {\n  fill: var(--saltCheckbox-icon-fill-checked, var(--salt-selectable-foreground-selected));\n  --checkbox-borderWidth: var(--saltCheckbox-icon-borderWidth-checked, 0px);\n}\n\n/* Styles applied if `checked={true}` and `disabled={true}` */\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  fill: var(--saltCheckbox-icon-fill-disabled, var(--salt-selectable-foreground-selectedDisabled));\n}\n\n/* Styles applied if `checked={true}` and `error={true}` */\n.saltCheckboxIcon-checked.saltCheckboxIcon-error {\n  fill: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground));\n}\n\n/* Styles applied if `checked={true}`,`error={true}` and `disabled={true}` */\n.saltCheckboxIcon-checked.saltCheckboxIcon-error.saltCheckboxIcon-disabled {\n  fill: var(--saltCheckbox-icon-fill-disabled, var(--salt-status-error-foreground-disabled));\n}\n\n/* Styles applied to box */\n.saltCheckboxIcon-box {\n  stroke-width: var(--checkbox-borderWidth);\n  width: var(--checkbox-box-size);\n  height: var(--checkbox-box-size);\n  x: var(--checkbox-box-offset);\n  y: var(--checkbox-box-offset);\n}\n\n/* Styles applied to icon if `indeterminate={true}` */\n.saltCheckboxIcon-indeterminate {\n  stroke: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground-selected));\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-indeterminate-bar-color, var(--salt-selectable-foreground-selected));\n}\n\n/* Styles applied to icon if `indeterminate={true}` on hover */\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground-hover));\n}\n\n/* Styles applied if `indeterminate={true}` and `disabled={true}` */\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  stroke: var(--saltCheckbox-icon-stroke-disabled, var(--salt-selectable-foreground-disabled));\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-indeterminate-bar-color-disabled, var(--salt-selectable-foreground-selectedDisabled));\n}\n\n/* Styles applied if `indeterminate={true}` and `error={true}` */\n.saltCheckboxIcon-error.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-error.saltCheckboxIcon-indeterminate {\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground));\n}\n\n/* Styles applied if `indeterminate={true}`,`disabled={true}` and `error={true}` */\n.saltCheckboxIcon-error.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground-disabled));\n}\n\n/* Styles applied to tick */\n.saltCheckboxIcon-tick {\n  fill: var(--saltCheckbox-icon-tick-fill, var(--checkbox-icon-tick-fill));\n  stroke-width: 0;\n}\n\n/* Styles applied to tick if `indeterminate={true}` */\n.saltCheckboxIcon-indeterminate .saltCheckboxIcon-tick {\n  height: var(--saltCheckbox-icon-indeterminate-bar-height, var(--checkbox-density-bar-height));\n  y: var(--saltCheckbox-icon-indeterminate-bar-y, var(--checkbox-density-bar-y));\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=CheckboxIcon.css.js.map

package/dist-es/packages/core/src/checkbox/CheckboxIcon.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxIcon.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist-es/packages/core/src/checkbox/CheckboxIcon.js

@@ -0,0 +1,44 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import 'react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI.js';
+import '../utils/useId.js';
+import { useDensity } from '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { CheckboxUncheckedIcon } from './assets/CheckboxUncheckedIcon.js';
+import { CheckboxCheckedIcon } from './assets/CheckboxCheckedIcon.js';
+import { CheckboxCheckedIconHD } from './assets/CheckboxCheckedIconHD.js';
+import { CheckboxIndeterminateIcon } from './assets/CheckboxIndeterminateIcon.js';
+import './CheckboxIcon.css.js';
+
+const withBaseName = makePrefixer("saltCheckboxIcon");
+const CheckboxIcon = ({
+  checked = false,
+  className: classNameProp,
+  disabled,
+  error,
+  indeterminate
+}) => {
+  const className = clsx(
+    withBaseName(),
+    {
+      [withBaseName("disabled")]: disabled,
+      [withBaseName("error")]: error
+    },
+    classNameProp
+  );
+  const density = useDensity();
+  return indeterminate ? /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, {
+    className: clsx(className, withBaseName("indeterminate"))
+  }) : checked ? density === "high" ? /* @__PURE__ */ jsx(CheckboxCheckedIconHD, {
+    className: clsx(className, withBaseName("checked"))
+  }) : /* @__PURE__ */ jsx(CheckboxCheckedIcon, {
+    className: clsx(className, withBaseName("checked"))
+  }) : /* @__PURE__ */ jsx(CheckboxUncheckedIcon, {
+    className
+  });
+};
+
+export { CheckboxIcon };
+//# sourceMappingURL=CheckboxIcon.js.map

package/dist-es/packages/core/src/checkbox/CheckboxIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxIcon.js","sources":["../src/checkbox/CheckboxIcon.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\nimport {\n  CheckboxCheckedIcon,\n  CheckboxCheckedIconHD,\n  CheckboxIndeterminateIcon,\n  CheckboxUncheckedIcon,\n} from \"./assets\";\n\nimport \"./CheckboxIcon.css\";\nimport { useDensity } from \"../salt-provider\";\n\nexport interface CheckboxIconProps {\n  checked?: boolean;\n  className?: string;\n  disabled?: boolean;\n  error?: boolean;\n  indeterminate?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxIcon\");\n\nexport const CheckboxIcon = ({\n  checked = false,\n  className: classNameProp,\n  disabled,\n  error,\n  indeterminate,\n}: CheckboxIconProps): JSX.Element => {\n  const className = clsx(\n    withBaseName(),\n    {\n      [withBaseName(\"disabled\")]: disabled,\n      [withBaseName(\"error\")]: error,\n    },\n    classNameProp\n  );\n\n  // A different CheckboxCheckedIcon is rendered if the density is set to high\n  const density = useDensity();\n\n  return indeterminate ? (\n    <CheckboxIndeterminateIcon\n      className={clsx(className, withBaseName(\"indeterminate\"))}\n    />\n  ) : checked ? (\n    density === \"high\" ? (\n      <CheckboxCheckedIconHD\n        className={clsx(className, withBaseName(\"checked\"))}\n      />\n    ) : (\n      <CheckboxCheckedIcon\n        className={clsx(className, withBaseName(\"checked\"))}\n      />\n    )\n  ) : (\n    <CheckboxUncheckedIcon className={className} />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAU,GAAA,KAAA;AAAA,EACV,SAAW,EAAA,aAAA;AAAA,EACX,QAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AACF,CAAsC,KAAA;AACpC,EAAA,MAAM,SAAY,GAAA,IAAA;AAAA,IAChB,YAAa,EAAA;AAAA,IACb;AAAA,MACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,MAC5B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,KAC3B;AAAA,IACA,aAAA;AAAA,GACF,CAAA;AAGA,EAAA,MAAM,UAAU,UAAW,EAAA,CAAA;AAE3B,EAAA,OAAO,gCACJ,GAAA,CAAA,yBAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA,CAAK,SAAW,EAAA,YAAA,CAAa,eAAe,CAAC,CAAA;AAAA,GAC1D,CACE,GAAA,OAAA,GACF,OAAY,KAAA,MAAA,mBACT,GAAA,CAAA,qBAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA,CAAK,SAAW,EAAA,YAAA,CAAa,SAAS,CAAC,CAAA;AAAA,GACpD,oBAEC,GAAA,CAAA,mBAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA,CAAK,SAAW,EAAA,YAAA,CAAa,SAAS,CAAC,CAAA;AAAA,GACpD,oBAGD,GAAA,CAAA,qBAAA,EAAA;AAAA,IAAsB,SAAA;AAAA,GAAsB,CAAA,CAAA;AAEjD;;;;"}

package/dist-es/packages/core/src/checkbox/assets/CheckboxCheckedIcon.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function CheckboxCheckedIcon({
+  className
+}) {
+  return /* @__PURE__ */ jsx("svg", {
+    "aria-hidden": "true",
+    className,
+    focusable: "false",
+    shapeRendering: "geometricPrecision",
+    viewBox: "0 0 14 14",
+    children: /* @__PURE__ */ jsxs("g", {
+      fillRule: "evenodd",
+      children: [
+        /* @__PURE__ */ jsx("rect", {
+          className: `saltCheckboxIcon-box`
+        }),
+        /* @__PURE__ */ jsx("polygon", {
+          className: `saltCheckboxIcon-tick`,
+          fillRule: "nonzero",
+          points: "12 4.22226066 10.6259221 3 5.58277771 8.37894955 3.3179086 6.13993399 2 7.40754746 5.63993779 11"
+        })
+      ]
+    })
+  });
+}
+
+export { CheckboxCheckedIcon };
+//# sourceMappingURL=CheckboxCheckedIcon.js.map

package/dist-es/packages/core/src/checkbox/assets/CheckboxCheckedIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxCheckedIcon.js","sources":["../src/checkbox/assets/CheckboxCheckedIcon.tsx"],"sourcesContent":["export function CheckboxCheckedIcon({\n  className,\n}: {\n  className: string;\n}): JSX.Element {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={className}\n      focusable=\"false\"\n      shapeRendering=\"geometricPrecision\"\n      viewBox=\"0 0 14 14\"\n    >\n      <g fillRule=\"evenodd\">\n        <rect className={`saltCheckboxIcon-box`} />\n        <polygon\n          className={`saltCheckboxIcon-tick`}\n          fillRule=\"nonzero\"\n          points=\"12 4.22226066 10.6259221 3 5.58277771 8.37894955 3.3179086 6.13993399 2 7.40754746 5.63993779 11\"\n        />\n      </g>\n    </svg>\n  );\n}\n"],"names":[],"mappings":";;AAAO,SAAS,mBAAoB,CAAA;AAAA,EAClC,SAAA;AACF,CAEgB,EAAA;AACd,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,aAAY,EAAA,MAAA;AAAA,IACZ,SAAA;AAAA,IACA,SAAU,EAAA,OAAA;AAAA,IACV,cAAe,EAAA,oBAAA;AAAA,IACf,OAAQ,EAAA,WAAA;AAAA,IAER,QAAC,kBAAA,IAAA,CAAA,GAAA,EAAA;AAAA,MAAE,QAAS,EAAA,SAAA;AAAA,MACV,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,SAAW,EAAA,CAAA,oBAAA,CAAA;AAAA,SAAwB,CAAA;AAAA,wBACxC,GAAA,CAAA,SAAA,EAAA;AAAA,UACC,SAAW,EAAA,CAAA,qBAAA,CAAA;AAAA,UACX,QAAS,EAAA,SAAA;AAAA,UACT,MAAO,EAAA,kGAAA;AAAA,SACT,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/core/src/checkbox/assets/CheckboxCheckedIconHD.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function CheckboxCheckedIconHD({
+  className
+}) {
+  return /* @__PURE__ */ jsx("svg", {
+    "aria-hidden": "true",
+    className,
+    focusable: "false",
+    shapeRendering: "geometricPrecision",
+    viewBox: "0 0 12 12",
+    children: /* @__PURE__ */ jsxs("g", {
+      fillRule: "evenodd",
+      children: [
+        /* @__PURE__ */ jsx("rect", {
+          className: `saltCheckboxIcon-box`
+        }),
+        /* @__PURE__ */ jsx("path", {
+          className: `saltCheckboxIcon-tick`,
+          d: "m10 3.70547L4.83651 9.27702L2 6.6259L2.70868 5.86766L4.78375 7.8071L9.23877 3L10 3.70547z"
+        })
+      ]
+    })
+  });
+}
+
+export { CheckboxCheckedIconHD };
+//# sourceMappingURL=CheckboxCheckedIconHD.js.map

package/dist-es/packages/core/src/checkbox/assets/CheckboxCheckedIconHD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxCheckedIconHD.js","sources":["../src/checkbox/assets/CheckboxCheckedIconHD.tsx"],"sourcesContent":["// This icon is used for the high density checkbox\nexport function CheckboxCheckedIconHD({\n  className,\n}: {\n  className: string;\n}): JSX.Element {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={className}\n      focusable=\"false\"\n      shapeRendering=\"geometricPrecision\"\n      viewBox=\"0 0 12 12\"\n    >\n      <g fillRule=\"evenodd\">\n        <rect className={`saltCheckboxIcon-box`} />\n        <path\n          className={`saltCheckboxIcon-tick`}\n          d=\"m10 3.70547L4.83651 9.27702L2 6.6259L2.70868 5.86766L4.78375 7.8071L9.23877 3L10 3.70547z\"\n        />\n      </g>\n    </svg>\n  );\n}\n"],"names":[],"mappings":";;AACO,SAAS,qBAAsB,CAAA;AAAA,EACpC,SAAA;AACF,CAEgB,EAAA;AACd,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,aAAY,EAAA,MAAA;AAAA,IACZ,SAAA;AAAA,IACA,SAAU,EAAA,OAAA;AAAA,IACV,cAAe,EAAA,oBAAA;AAAA,IACf,OAAQ,EAAA,WAAA;AAAA,IAER,QAAC,kBAAA,IAAA,CAAA,GAAA,EAAA;AAAA,MAAE,QAAS,EAAA,SAAA;AAAA,MACV,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,SAAW,EAAA,CAAA,oBAAA,CAAA;AAAA,SAAwB,CAAA;AAAA,wBACxC,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,SAAW,EAAA,CAAA,qBAAA,CAAA;AAAA,UACX,CAAE,EAAA,2FAAA;AAAA,SACJ,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/core/src/checkbox/assets/CheckboxIndeterminateIcon.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function CheckboxIndeterminateIcon({
+  className
+}) {
+  return /* @__PURE__ */ jsx("svg", {
+    "aria-hidden": "true",
+    className,
+    focusable: "false",
+    shapeRendering: "geometricPrecision",
+    viewBox: "0 0 14 14",
+    children: /* @__PURE__ */ jsxs("g", {
+      fillRule: "evenodd",
+      strokeWidth: "1",
+      children: [
+        /* @__PURE__ */ jsx("rect", {
+          className: `saltCheckboxIcon-box`
+        }),
+        /* @__PURE__ */ jsx("rect", {
+          className: `saltCheckboxIcon-tick`,
+          height: "2",
+          strokeWidth: "0",
+          width: "8",
+          x: "3",
+          y: "6"
+        })
+      ]
+    })
+  });
+}
+
+export { CheckboxIndeterminateIcon };
+//# sourceMappingURL=CheckboxIndeterminateIcon.js.map

package/dist-es/packages/core/src/checkbox/assets/CheckboxIndeterminateIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxIndeterminateIcon.js","sources":["../src/checkbox/assets/CheckboxIndeterminateIcon.tsx"],"sourcesContent":["export function CheckboxIndeterminateIcon({\n  className,\n}: {\n  className: string;\n}): JSX.Element {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={className}\n      focusable=\"false\"\n      shapeRendering=\"geometricPrecision\"\n      viewBox=\"0 0 14 14\"\n    >\n      <g fillRule=\"evenodd\" strokeWidth=\"1\">\n        <rect className={`saltCheckboxIcon-box`} />\n        <rect\n          className={`saltCheckboxIcon-tick`}\n          height=\"2\"\n          strokeWidth=\"0\"\n          width=\"8\"\n          x=\"3\"\n          y=\"6\"\n        />\n      </g>\n    </svg>\n  );\n}\n"],"names":[],"mappings":";;AAAO,SAAS,yBAA0B,CAAA;AAAA,EACxC,SAAA;AACF,CAEgB,EAAA;AACd,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,aAAY,EAAA,MAAA;AAAA,IACZ,SAAA;AAAA,IACA,SAAU,EAAA,OAAA;AAAA,IACV,cAAe,EAAA,oBAAA;AAAA,IACf,OAAQ,EAAA,WAAA;AAAA,IAER,QAAC,kBAAA,IAAA,CAAA,GAAA,EAAA;AAAA,MAAE,QAAS,EAAA,SAAA;AAAA,MAAU,WAAY,EAAA,GAAA;AAAA,MAChC,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,SAAW,EAAA,CAAA,oBAAA,CAAA;AAAA,SAAwB,CAAA;AAAA,wBACxC,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,SAAW,EAAA,CAAA,qBAAA,CAAA;AAAA,UACX,MAAO,EAAA,GAAA;AAAA,UACP,WAAY,EAAA,GAAA;AAAA,UACZ,KAAM,EAAA,GAAA;AAAA,UACN,CAAE,EAAA,GAAA;AAAA,UACF,CAAE,EAAA,GAAA;AAAA,SACJ,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/core/src/checkbox/assets/CheckboxUncheckedIcon.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+
+function CheckboxUncheckedIcon({
+  className
+}) {
+  return /* @__PURE__ */ jsx("svg", {
+    "aria-hidden": "true",
+    className,
+    focusable: "false",
+    shapeRendering: "geometricPrecision",
+    viewBox: "0 0 14 14",
+    children: /* @__PURE__ */ jsx("g", {
+      fillRule: "evenodd",
+      children: /* @__PURE__ */ jsx("rect", {
+        className: `saltCheckboxIcon-box`
+      })
+    })
+  });
+}
+
+export { CheckboxUncheckedIcon };
+//# sourceMappingURL=CheckboxUncheckedIcon.js.map

package/dist-es/packages/core/src/checkbox/assets/CheckboxUncheckedIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxUncheckedIcon.js","sources":["../src/checkbox/assets/CheckboxUncheckedIcon.tsx"],"sourcesContent":["export function CheckboxUncheckedIcon({\n  className,\n}: {\n  className: string;\n}): JSX.Element {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={className}\n      focusable=\"false\"\n      shapeRendering=\"geometricPrecision\"\n      viewBox=\"0 0 14 14\"\n    >\n      <g fillRule=\"evenodd\">\n        <rect className={`saltCheckboxIcon-box`} />\n      </g>\n    </svg>\n  );\n}\n"],"names":[],"mappings":";;AAAO,SAAS,qBAAsB,CAAA;AAAA,EACpC,SAAA;AACF,CAEgB,EAAA;AACd,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,aAAY,EAAA,MAAA;AAAA,IACZ,SAAA;AAAA,IACA,SAAU,EAAA,OAAA;AAAA,IACV,cAAe,EAAA,oBAAA;AAAA,IACf,OAAQ,EAAA,WAAA;AAAA,IAER,QAAC,kBAAA,GAAA,CAAA,GAAA,EAAA;AAAA,MAAE,QAAS,EAAA,SAAA;AAAA,MACV,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAW,EAAA,CAAA,oBAAA,CAAA;AAAA,OAAwB,CAAA;AAAA,KAC3C,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/core/src/checkbox/internal/CheckboxGroupContext.js

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+const CheckboxGroupContext = createContext({});
+if (process.env.NODE_ENV !== "production") {
+  CheckboxGroupContext.displayName = "CheckboxGroupContext";
+}
+
+export { CheckboxGroupContext };
+//# sourceMappingURL=CheckboxGroupContext.js.map

package/dist-es/packages/core/src/checkbox/internal/CheckboxGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroupContext.js","sources":["../src/checkbox/internal/CheckboxGroupContext.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport { CheckboxGroupProps } from \"../CheckboxGroup\";\n\nexport interface CheckboxGroupState {\n  name?: CheckboxGroupProps[\"name\"];\n  onChange?: CheckboxGroupProps[\"onChange\"];\n  checkedValues?: CheckboxGroupProps[\"checkedValues\"];\n}\n\nconst CheckboxGroupContext = createContext<CheckboxGroupState>({});\n\nif (process.env.NODE_ENV !== \"production\") {\n  CheckboxGroupContext.displayName = \"CheckboxGroupContext\";\n}\n\nexport { CheckboxGroupContext };\n"],"names":[],"mappings":";;AASM,MAAA,oBAAA,GAAuB,aAAkC,CAAA,EAAE,EAAA;AAEjE,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,oBAAA,CAAqB,WAAc,GAAA,sBAAA,CAAA;AACrC;;;;"}

package/dist-es/packages/core/src/checkbox/internal/useCheckboxGroup.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { CheckboxGroupContext } from './CheckboxGroupContext.js';
+
+function useCheckboxGroup() {
+  return useContext(CheckboxGroupContext);
+}
+
+export { useCheckboxGroup };
+//# sourceMappingURL=useCheckboxGroup.js.map

package/dist-es/packages/core/src/checkbox/internal/useCheckboxGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCheckboxGroup.js","sources":["../src/checkbox/internal/useCheckboxGroup.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport {\n  CheckboxGroupContext,\n  CheckboxGroupState,\n} from \"./CheckboxGroupContext\";\n\nexport function useCheckboxGroup(): CheckboxGroupState {\n  return useContext(CheckboxGroupContext);\n}\n"],"names":[],"mappings":";;;AAMO,SAAS,gBAAuC,GAAA;AACrD,EAAA,OAAO,WAAW,oBAAoB,CAAA,CAAA;AACxC;;;;"}

package/dist-es/packages/core/src/index.js

@@ -3,12 +3,17 @@ export { AriaAnnounce } from './aria-announcer/AriaAnnounce.js';
 export { ARIA_ANNOUNCE_DELAY, AriaAnnouncerProvider } from './aria-announcer/AriaAnnouncerProvider.js';
 export { useAriaAnnouncer } from './aria-announcer/useAriaAnnouncer.js';
 export { Avatar } from './avatar/Avatar.js';
+export { useAvatarImage } from './avatar/useAvatarImage.js';
 export { BORDER_POSITION, BorderItem } from './border-item/BorderItem.js';
 export { BorderLayout } from './border-layout/BorderLayout.js';
 export { DEFAULT_BREAKPOINTS } from './breakpoints/Breakpoints.js';
 export { Button, ButtonVariantValues } from './button/Button.js';
 export { useButton } from './button/useButton.js';
 export { Card } from './card/Card.js';
+export { InteractableCard } from './card/InteractableCard.js';
+export { Checkbox } from './checkbox/Checkbox.js';
+export { CheckboxGroup } from './checkbox/CheckboxGroup.js';
+export { CheckboxIcon } from './checkbox/CheckboxIcon.js';
 export { FLEX_ITEM_ALIGNMENTS, FlexItem } from './flex-item/FlexItem.js';
 export { FLEX_ALIGNMENT_BASE, FLEX_CONTENT_ALIGNMENT_BASE, FlexLayout } from './flex-layout/FlexLayout.js';
 export { FlowLayout } from './flow-layout/FlowLayout.js';
@@ -16,6 +21,9 @@ export { GRID_ALIGNMENT_BASE, GridItem } from './grid-item/GridItem.js';
 export { GridLayout } from './grid-layout/GridLayout.js';
 export { Link } from './link/Link.js';
 export { Panel } from './panel/Panel.js';
+export { RadioButton } from './radio-button/RadioButton.js';
+export { RadioButtonGroup } from './radio-button/RadioButtonGroup.js';
+export { RadioButtonIcon } from './radio-button/RadioButtonIcon.js';
 export { Spinner, SpinnerSizeValues } from './spinner/Spinner.js';
 export { StackLayout } from './stack-layout/StackLayout.js';
 export { StatusIndicator } from './status-indicator/StatusIndicator.js';
@@ -31,6 +39,7 @@ export { BreakpointContext, DEFAULT_DENSITY, DensityContext, SaltProvider, Theme
 export { SplitLayout } from './split-layout/SplitLayout.js';
 export { Tooltip } from './tooltip/Tooltip.js';
 export { useTooltip } from './tooltip/useTooltip.js';
+export { capitalize } from './utils/capitalize.js';
 export { createChainedFunction } from './utils/createChainedFunction.js';
 export { createContext } from './utils/createContext.js';
 export { debounce } from './utils/debounce.js';

package/dist-es/packages/core/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-es/packages/core/src/link/Link.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".saltLink {\n  --link-color-hover: var(--saltLink-color-hover, var(--salt-text-link-foreground-hover));\n  --link-color-active: var(--saltLink-color-active, var(--salt-text-link-foreground-active));\n  --link-color-visited: var(--saltLink-color-visited, var(--salt-text-link-foreground-visited));\n  /* When focused, we also want hover style */\n  --link-color-focus: var(--saltLink-color-focus, var(--link-color-hover));\n\n  --link-textDecoration: var(--salt-text-link-textDecoration);\n  --link-textDecoration-hover: var(--salt-text-link-textDecoration-hover);\n\n  --link-fontFamily: var(--salt-text-fontFamily);\n  --link-focus-outline: var(--salt-focused-outline);\n}\n\n/* Main css class */\n.saltLink {\n  color: var(--link-color);\n  letter-spacing: 0px;\n  text-decoration: var(--link-textDecoration);\n  font-family: var(--link-fontFamily);\n}\n\n/* Primary variant */\n.saltText-primary {\n  --link-color: var(--salt-text-primary-foreground);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --link-color: var(--salt-text-secondary-foreground);\n}\n\n/* External link's icon */\n.saltLink-icon {\n  margin-left: calc(var(--salt-size-unit) * 0.75);\n  margin-bottom: -2px;\n}\n\n/* Set color for visited link */\n.saltLink:visited {\n  --saltIcon-color: var(--link-color-visited);\n  color: var(--link-color-visited);\n}\n\n/* Set color for hovered link */\n.saltLink:hover {\n  --saltIcon-color: var(--link-color-hover);\n  color: var(--link-color-hover);\n  text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Set color for active link */\n.saltLink:active {\n  --saltIcon-color: var(--link-color-active);\n  color: var(--link-color-active);\n}\n\n/* Set color for focused link */\n.saltLink:focus {\n  --saltIcon-color: var(--link-color-focus);\n  outline: var(--link-focus-outline);\n  color: var(--link-color-focus);\n  text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Class for ADA content */\n.saltLink-externalLinkADA {\n  display: block;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  top: 0px;\n  left: 0px;\n  opacity: 0;\n}\n";
+var css_248z = ".saltLink {\n  --link-color-hover: var(--saltLink-color-hover, var(--salt-text-link-foreground-hover));\n  --link-color-active: var(--saltLink-color-active, var(--salt-text-link-foreground-active));\n  --link-color-visited: var(--saltLink-color-visited, var(--salt-text-link-foreground-visited));\n  /* When focused, we also want hover style */\n  --link-color-focus: var(--saltLink-color-focus, var(--link-color-hover));\n\n  --link-textDecoration: var(--salt-text-link-textDecoration);\n  --link-textDecoration-hover: var(--salt-text-link-textDecoration-hover);\n\n  --link-fontFamily: var(--salt-text-fontFamily);\n  --link-focus-outline: var(--salt-focused-outline);\n}\n\n/* Main css class */\n.saltLink {\n  color: var(--link-color);\n  letter-spacing: 0px;\n  text-decoration: var(--link-textDecoration);\n  font-family: var(--link-fontFamily);\n}\n\n/* Primary variant */\n.saltText-primary {\n  --link-color: var(--salt-text-primary-foreground);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --link-color: var(--salt-text-secondary-foreground);\n}\n\n/* External link's icon */\n.saltLink-icon {\n  margin-left: var(--salt-size-adornmentGap);\n  margin-bottom: -2px;\n}\n\n/* Set color for visited link */\n.saltLink:visited {\n  --saltIcon-color: var(--link-color-visited);\n  color: var(--link-color-visited);\n}\n\n/* Set color for hovered link */\n.saltLink:hover {\n  --saltIcon-color: var(--link-color-hover);\n  color: var(--link-color-hover);\n  text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Set color for active link */\n.saltLink:active {\n  --saltIcon-color: var(--link-color-active);\n  color: var(--link-color-active);\n}\n\n/* Set color for focused link */\n.saltLink:focus {\n  --saltIcon-color: var(--link-color-focus);\n  outline: var(--link-focus-outline);\n  color: var(--link-color-focus);\n  text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Class for ADA content */\n.saltLink-externalLinkADA {\n  display: block;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  top: 0px;\n  left: 0px;\n  opacity: 0;\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist-es/packages/core/src/link/Link.js

@@ -35,7 +35,7 @@ const Link = forwardRef(function Link2({
       children,
       target === "_blank" && /* @__PURE__ */ jsxs(Fragment, {
         children: [
-          /* @__PURE__ */ jsx(IconComponent, {
+          IconComponent && /* @__PURE__ */ jsx(IconComponent, {
             className: withBaseName("icon"),
             "aria-hidden": true
           }),

package/dist-es/packages/core/src/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../src/link/Link.tsx"],"sourcesContent":["import { ComponentType, forwardRef, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { IconProps, TearOutIcon } from \"@salt-ds/icons\";\nimport { makePrefixer } from \"../utils\";\nimport { Text, TextProps } from \"../text\";\n\nimport \"./Link.css\";\n\nconst withBaseName = makePrefixer(\"saltLink\");\n\n/**\n * Links are a fundamental navigation element. When clicked, they take the user to an entirely different page.\n *\n * @example\n * <LinkExample to=\"#link\">Action</LinkExample>\n */\nexport interface LinkProps extends Omit<TextProps<\"a\">, \"as\" | \"disabled\"> {\n  IconComponent?: ComponentType<IconProps>;\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  {\n    IconComponent = TearOutIcon,\n    href,\n    className,\n    children,\n    variant = \"primary\",\n    target = \"_self\",\n    ...rest\n  },\n  ref\n): ReactElement<LinkProps> {\n  return (\n    <Text\n      as=\"a\"\n      className={clsx(withBaseName(), className)}\n      href={href}\n      ref={ref}\n      target={target}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n      {target === \"_blank\" && (\n        <>\n          <IconComponent className={withBaseName(\"icon\")} aria-hidden />\n          <span className={withBaseName(\"externalLinkADA\")}>External Link</span>\n        </>\n      )}\n    </Text>\n  );\n});\n"],"names":["Link"],"mappings":";;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAY/B,MAAA,IAAA,GAAO,UAAyC,CAAA,SAASA,KACpE,CAAA;AAAA,EACE,aAAgB,GAAA,WAAA;AAAA,EAChB,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAU,GAAA,SAAA;AAAA,EACV,MAAS,GAAA,OAAA;AAAA,EACN,GAAA,IAAA;AACL,CAAA,EACA,GACyB,EAAA;AACzB,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACC,EAAG,EAAA,GAAA;AAAA,IACH,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,IAAA;AAAA,IACA,GAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,WAAW,QACV,oBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,QACE,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,aAAA,EAAA;AAAA,YAAc,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAAG,aAAW,EAAA,IAAA;AAAA,WAAC,CAAA;AAAA,0BAC3D,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,YAAG,QAAA,EAAA,eAAA;AAAA,WAAa,CAAA;AAAA,SAAA;AAAA,OACjE,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Link.js","sources":["../src/link/Link.tsx"],"sourcesContent":["import { ComponentType, forwardRef, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { IconProps, TearOutIcon } from \"@salt-ds/icons\";\nimport { makePrefixer } from \"../utils\";\nimport { Text, TextProps } from \"../text\";\n\nimport \"./Link.css\";\n\nconst withBaseName = makePrefixer(\"saltLink\");\n\n/**\n * Links are a fundamental navigation element. When clicked, they take the user to an entirely different page.\n *\n * @example\n * <LinkExample to=\"#link\">Action</LinkExample>\n */\nexport interface LinkProps extends Omit<TextProps<\"a\">, \"as\" | \"disabled\"> {\n  IconComponent?: ComponentType<IconProps> | null;\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  {\n    IconComponent = TearOutIcon,\n    href,\n    className,\n    children,\n    variant = \"primary\",\n    target = \"_self\",\n    ...rest\n  },\n  ref\n): ReactElement<LinkProps> {\n  return (\n    <Text\n      as=\"a\"\n      className={clsx(withBaseName(), className)}\n      href={href}\n      ref={ref}\n      target={target}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n      {target === \"_blank\" && (\n        <>\n          {IconComponent && (\n            <IconComponent className={withBaseName(\"icon\")} aria-hidden />\n          )}\n          <span className={withBaseName(\"externalLinkADA\")}>External Link</span>\n        </>\n      )}\n    </Text>\n  );\n});\n"],"names":["Link"],"mappings":";;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAY/B,MAAA,IAAA,GAAO,UAAyC,CAAA,SAASA,KACpE,CAAA;AAAA,EACE,aAAgB,GAAA,WAAA;AAAA,EAChB,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAU,GAAA,SAAA;AAAA,EACV,MAAS,GAAA,OAAA;AAAA,EACN,GAAA,IAAA;AACL,CAAA,EACA,GACyB,EAAA;AACzB,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACC,EAAG,EAAA,GAAA;AAAA,IACH,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,IAAA;AAAA,IACA,GAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,WAAW,QACV,oBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,QACG,QAAA,EAAA;AAAA,UAAA,aAAA,oBACE,GAAA,CAAA,aAAA,EAAA;AAAA,YAAc,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAAG,aAAW,EAAA,IAAA;AAAA,WAAC,CAAA;AAAA,0BAE7D,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,YAAG,QAAA,EAAA,eAAA;AAAA,WAAa,CAAA;AAAA,SAAA;AAAA,OACjE,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/core/src/panel/Panel.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* Styles applied to the root element when variant=\"primary\" */\n.saltPanel-primary.saltPanel {\n  --panel-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied to the root element when variant=\"secondary\" */\n.saltPanel-secondary.saltPanel {\n  --panel-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied to the root element */\n.saltPanel {\n  background: var(--saltPanel-background, var(--panel-background));\n  color: var(--saltPanel-color, inherit);\n  height: var(--saltPanel-height, 100%);\n  overflow: auto;\n  padding: var(--saltPanel-padding, calc(var(--salt-size-unit) * 3));\n  width: var(--saltPanel-width, 100%);\n}\n";
+var css_248z = "/* Styles applied to the root element when variant=\"primary\" */\n.saltPanel-primary.saltPanel {\n  --panel-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied to the root element when variant=\"secondary\" */\n.saltPanel-secondary.saltPanel {\n  --panel-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied to the root element */\n.saltPanel {\n  background: var(--saltPanel-background, var(--panel-background));\n  color: var(--saltPanel-color, initial);\n  height: var(--saltPanel-height, 100%);\n  overflow: auto;\n  padding: var(--saltPanel-padding, var(--salt-size-container-spacing));\n  width: var(--saltPanel-width, 100%);\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist-es/packages/core/src/radio-button/RadioButton.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+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";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=RadioButton.css.js.map

package/dist-es/packages/core/src/radio-button/RadioButton.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist-es/packages/core/src/radio-button/RadioButton.js

@@ -0,0 +1,82 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import { useControlled } from '../utils/useControlled.js';
+import '../utils/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { useRadioGroup } from './internal/useRadioGroup.js';
+import { RadioButtonIcon } from './RadioButtonIcon.js';
+import './RadioButton.css.js';
+
+const withBaseName = makePrefixer("saltRadioButton");
+const RadioButton = forwardRef(
+  function RadioButton2(props, ref) {
+    const {
+      checked: checkedProp,
+      className,
+      disabled,
+      error,
+      inputProps,
+      label,
+      name: nameProp,
+      onFocus,
+      onBlur,
+      onChange,
+      value,
+      ...rest
+    } = props;
+    const radioGroup = useRadioGroup();
+    const radioGroupChecked = radioGroup.value != null && value != null ? radioGroup.value === value : checkedProp;
+    const name = nameProp != null ? nameProp : radioGroup.name;
+    const [checked, setCheckedState] = useControlled({
+      controlled: radioGroupChecked,
+      default: Boolean(checkedProp),
+      name: "RadioBase",
+      state: "checked"
+    });
+    const handleChange = (event) => {
+      var _a;
+      const newChecked = event.target.checked;
+      setCheckedState(newChecked);
+      onChange == null ? void 0 : onChange(event);
+      (_a = radioGroup.onChange) == null ? void 0 : _a.call(radioGroup, event);
+    };
+    return /* @__PURE__ */ jsxs("label", {
+      className: clsx(
+        withBaseName(),
+        {
+          [withBaseName("disabled")]: disabled
+        },
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("input", {
+          className: withBaseName("input"),
+          ...inputProps,
+          checked,
+          disabled,
+          name,
+          value,
+          onBlur,
+          onChange: handleChange,
+          onFocus,
+          type: "radio"
+        }),
+        /* @__PURE__ */ jsx(RadioButtonIcon, {
+          checked,
+          error,
+          disabled
+        }),
+        label
+      ]
+    });
+  }
+);
+
+export { RadioButton };
+//# sourceMappingURL=RadioButton.js.map