@salt-ds/core 1.53.0 → 1.54.0

package/dist-es/pill/PillGroup.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltPillGroup {\n  border: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--salt-spacing-50);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=PillGroup.css.js.map

package/dist-es/pill/PillGroup.css.js.map

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

package/dist-es/pill/PillGroup.js

@@ -0,0 +1,81 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import clsx from 'clsx';
+import { forwardRef, useCallback, useMemo } from 'react';
+import '../form-field-context/FormFieldContext.js';
+import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import { useControlled } from '../utils/useControlled.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import css_248z from './PillGroup.css.js';
+import { PillGroupContext } from './PillGroupContext.js';
+
+const withBaseName = makePrefixer("saltPillGroup");
+const PillGroup = forwardRef(
+  function PillGroup2(props, ref) {
+    const {
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      disabled: disabledProp,
+      children,
+      selected: selectedProp,
+      defaultSelected,
+      onSelectionChange,
+      className,
+      selectionVariant = "none",
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-pill-group",
+      css: css_248z,
+      window: targetWindow
+    });
+    const { a11yProps: formFieldA11yProps, disabled: formFieldDisabled } = useFormFieldProps();
+    const disabled = formFieldDisabled || disabledProp;
+    const [selected, setSelected] = useControlled({
+      controlled: selectedProp,
+      default: defaultSelected || [],
+      name: "PillGroup",
+      state: "selected"
+    });
+    const select = useCallback(
+      (event, newValue) => {
+        if (disabled) {
+          return;
+        }
+        const newSelected = selected.includes(newValue) ? selected.filter((item) => item !== newValue) : selected.concat(newValue);
+        setSelected(newSelected);
+        onSelectionChange == null ? void 0 : onSelectionChange(event, newSelected);
+      },
+      [disabled, selected, onSelectionChange]
+    );
+    const context = useMemo(
+      () => ({
+        disabled,
+        select,
+        selected,
+        selectionVariant
+      }),
+      [disabled, select, selected, selectionVariant]
+    );
+    return /* @__PURE__ */ jsx(PillGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+      "fieldset",
+      {
+        "aria-labelledby": clsx(formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-labelledby"], ariaLabelledBy) || void 0,
+        "aria-describedby": clsx(formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-describedby"], ariaDescribedBy) || void 0,
+        className: clsx(withBaseName(), className),
+        ref,
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+
+export { PillGroup };
+//# sourceMappingURL=PillGroup.js.map

package/dist-es/pill/PillGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillGroup.js","sources":["../src/pill/PillGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type SyntheticEvent,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport pillGroupCss from \"./PillGroup.css\";\nimport { PillGroupContext } from \"./PillGroupContext\";\n\ninterface CommonPillGroupProps extends ComponentPropsWithoutRef<\"fieldset\"> {\n  /**\n   * If `true`, the Pill group will be disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * Selection variant of the Pill group. If \"none\", the Pills will not be selectable. If \"multiple\", pills inside behave like checkboxes.\n   */\n  selectionVariant?: \"none\" | \"multiple\";\n}\n\ninterface SelectablePillGroupProps extends CommonPillGroupProps {\n  selectionVariant: \"multiple\";\n  /**\n   * The currently selected values.\n   */\n  selected?: string[];\n  /**\n   * The default selected values for un-controlled component.\n   */\n  defaultSelected?: string[];\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   * @param newSelected The new selected values.\n   */\n  onSelectionChange?: (event: SyntheticEvent, newSelected: string[]) => void;\n}\n\ninterface NonSelectablePillGroupProps extends CommonPillGroupProps {\n  selectionVariant?: \"none\";\n}\n\nexport type PillGroupProps =\n  | SelectablePillGroupProps\n  | NonSelectablePillGroupProps;\n\nconst withBaseName = makePrefixer(\"saltPillGroup\");\n\nexport const PillGroup = forwardRef<HTMLFieldSetElement, PillGroupProps>(\n  function PillGroup(props, ref) {\n    const {\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      disabled: disabledProp,\n      children,\n      selected: selectedProp,\n      defaultSelected,\n      onSelectionChange,\n      className,\n      selectionVariant = \"none\",\n      ...rest\n    } = props as SelectablePillGroupProps;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-pill-group\",\n      css: pillGroupCss,\n      window: targetWindow,\n    });\n\n    const { a11yProps: formFieldA11yProps, disabled: formFieldDisabled } =\n      useFormFieldProps();\n\n    const disabled = formFieldDisabled || disabledProp;\n\n    const [selected, setSelected] = useControlled({\n      controlled: selectedProp,\n      default: defaultSelected || [],\n      name: \"PillGroup\",\n      state: \"selected\",\n    });\n\n    const select = useCallback(\n      (event: SyntheticEvent, newValue: string) => {\n        if (disabled) {\n          return;\n        }\n\n        const newSelected = selected.includes(newValue)\n          ? selected.filter((item) => item !== newValue)\n          : selected.concat(newValue);\n\n        setSelected(newSelected);\n        onSelectionChange?.(event, newSelected);\n      },\n      [disabled, selected, onSelectionChange],\n    );\n\n    const context = useMemo(\n      () =>\n        ({\n          disabled,\n          select,\n          selected,\n          selectionVariant,\n        }) as const,\n      [disabled, select, selected, selectionVariant],\n    );\n\n    return (\n      <PillGroupContext.Provider value={context}>\n        <fieldset\n          aria-labelledby={\n            clsx(formFieldA11yProps?.[\"aria-labelledby\"], ariaLabelledBy) ||\n            undefined\n          }\n          aria-describedby={\n            clsx(formFieldA11yProps?.[\"aria-describedby\"], ariaDescribedBy) ||\n            undefined\n          }\n          className={clsx(withBaseName(), className)}\n          ref={ref}\n          {...rest}\n        >\n          {children}\n        </fieldset>\n      </PillGroupContext.Provider>\n    );\n  },\n);\n"],"names":["PillGroup","pillGroupCss"],"mappings":";;;;;;;;;;;;;;;;AAqDA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAE1C,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,SAASA,UAAAA,CAAU,KAAA,EAAO,GAAA,EAAK;AAC7B,IAAA,MAAM;AAAA,MACJ,iBAAA,EAAmB,cAAA;AAAA,MACnB,kBAAA,EAAoB,eAAA;AAAA,MACpB,QAAA,EAAU,YAAA;AAAA,MACV,QAAA;AAAA,MACA,QAAA,EAAU,YAAA;AAAA,MACV,eAAA;AAAA,MACA,iBAAA;AAAA,MACA,SAAA;AAAA,MACA,gBAAA,GAAmB,MAAA;AAAA,MACnB,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,iBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,SAAA,EAAW,kBAAA,EAAoB,QAAA,EAAU,iBAAA,KAC/C,iBAAA,EAAkB;AAEpB,IAAA,MAAM,WAAW,iBAAA,IAAqB,YAAA;AAEtC,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,aAAA,CAAc;AAAA,MAC5C,UAAA,EAAY,YAAA;AAAA,MACZ,OAAA,EAAS,mBAAmB,EAAC;AAAA,MAC7B,IAAA,EAAM,WAAA;AAAA,MACN,KAAA,EAAO;AAAA,KACR,CAAA;AAED,IAAA,MAAM,MAAA,GAAS,WAAA;AAAA,MACb,CAAC,OAAuB,QAAA,KAAqB;AAC3C,QAAA,IAAI,QAAA,EAAU;AACZ,UAAA;AAAA,QACF;AAEA,QAAA,MAAM,WAAA,GAAc,QAAA,CAAS,QAAA,CAAS,QAAQ,IAC1C,QAAA,CAAS,MAAA,CAAO,CAAC,IAAA,KAAS,IAAA,KAAS,QAAQ,CAAA,GAC3C,QAAA,CAAS,OAAO,QAAQ,CAAA;AAE5B,QAAA,WAAA,CAAY,WAAW,CAAA;AACvB,QAAA,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAoB,KAAA,EAAO,WAAA,CAAA;AAAA,MAC7B,CAAA;AAAA,MACA,CAAC,QAAA,EAAU,QAAA,EAAU,iBAAiB;AAAA,KACxC;AAEA,IAAA,MAAM,OAAA,GAAU,OAAA;AAAA,MACd,OACG;AAAA,QACC,QAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA;AAAA,OACF,CAAA;AAAA,MACF,CAAC,QAAA,EAAU,MAAA,EAAQ,QAAA,EAAU,gBAAgB;AAAA,KAC/C;AAEA,IAAA,uBACE,GAAA,CAAC,gBAAA,CAAiB,QAAA,EAAjB,EAA0B,OAAO,OAAA,EAChC,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,iBAAA,EACE,IAAA,CAAK,kBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,kBAAA,CAAqB,iBAAA,CAAA,EAAoB,cAAc,CAAA,IAC5D,MAAA;AAAA,QAEF,kBAAA,EACE,IAAA,CAAK,kBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,kBAAA,CAAqB,kBAAA,CAAA,EAAqB,eAAe,CAAA,IAC9D,MAAA;AAAA,QAEF,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}

package/dist-es/pill/PillGroupContext.js

@@ -0,0 +1,24 @@
+import { useContext } from 'react';
+import { createContext } from '../utils/createContext.js';
+import 'clsx';
+import 'react/jsx-runtime';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+
+const PillGroupContext = createContext(
+  "PillGroupContext",
+  {
+    selected: [],
+    select: () => {
+    },
+    selectionVariant: "none"
+  }
+);
+function usePillGroup() {
+  return useContext(PillGroupContext);
+}
+
+export { PillGroupContext, usePillGroup };
+//# sourceMappingURL=PillGroupContext.js.map

package/dist-es/pill/PillGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillGroupContext.js","sources":["../src/pill/PillGroupContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface PillGroupContextValue {\n  selected: string[];\n  select: (e: SyntheticEvent, value: string) => void;\n  disabled?: boolean;\n  selectionVariant: \"none\" | \"multiple\";\n}\n\nexport const PillGroupContext = createContext<PillGroupContextValue>(\n  \"PillGroupContext\",\n  {\n    selected: [],\n    select: () => {},\n    selectionVariant: \"none\",\n  },\n);\n\nexport function usePillGroup() {\n  return useContext(PillGroupContext);\n}\n"],"names":[],"mappings":";;;;;;;;;AAUO,MAAM,gBAAA,GAAmB,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,UAAU,EAAC;AAAA,IACX,QAAQ,MAAM;AAAA,IAAC,CAAA;AAAA,IACf,gBAAA,EAAkB;AAAA;AAEtB;AAEO,SAAS,YAAA,GAAe;AAC7B,EAAA,OAAO,WAAW,gBAAgB,CAAA;AACpC;;;;"}

package/dist-es/pill-input/PillInput.js

@@ -6,6 +6,7 @@ import { forwardRef, useState, useRef } from 'react';
 import '../form-field-context/FormFieldContext.js';
 import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
 import { Pill } from '../pill/Pill.js';
+import '../pill/PillGroup.js';
 import { useIcon } from '../semantic-icon-provider/SemanticIconProvider.js';
 import { StatusAdornment } from '../status-adornment/StatusAdornment.js';
 import { makePrefixer } from '../utils/makePrefixer.js';

package/dist-es/pill-input/PillInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PillInput.js","sources":["../src/pill-input/PillInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type ForwardedRef,\n  forwardRef,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  useRef,\n  useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Pill } from \"../pill\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled, useForkRef, useId } from \"../utils\";\nimport pillInputCss from \"./PillInput.css\";\nimport { useTruncatePills } from \"./useTruncatePills\";\n\nconst withBaseName = makePrefixer(\"saltPillInput\");\n\nexport interface PillInputProps\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?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\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   * The tokens to display in the input.\n   */\n  pills?: string[];\n  onPillRemove?: (event: SyntheticEvent, index: number) => void;\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  hidePillClose?: boolean;\n  truncate?: boolean;\n  /** Styling variant with full border. Defaults to false\n   */\n  bordered?: boolean;\n}\n\nexport const PillInput = forwardRef(function PillInput(\n  {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    className: classNameProp,\n    disabled,\n    emptyReadOnlyMarker = \"—\",\n    endAdornment,\n    hidePillClose,\n    id: idProp,\n    inputProps = {},\n    inputRef: inputRefProp,\n    placeholder,\n    pills = [],\n    onPillRemove,\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    truncate,\n    bordered = false,\n    ...other\n  }: PillInputProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  const { OverflowIcon, CloseIcon } = useIcon();\n  useComponentCssInjection({\n    testId: \"salt-pill-input\",\n    css: pillInputCss,\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  const [focusedPillIndex, setFocusedPillIndex] = useState(-1);\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    onFocus,\n    onChange,\n    required: inputPropsRequired,\n    onKeyDown: inputOnKeyDown,\n    ...restInputProps\n  } = inputProps;\n\n  const isRequired = formFieldRequired\n    ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n    : inputPropsRequired;\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Input\",\n    state: \"value\",\n  });\n\n  const { visiblePills, pillListRef } = useTruncatePills({\n    pills,\n    enable: truncate && pills.length > 0,\n  });\n\n  const id = useId(idProp);\n  const pillListId = `${id}-optionsList`;\n\n  const pillElementsRef = useRef<HTMLElement[]>([]);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleInputRef = useForkRef(inputRef, inputRefProp);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setValue(value);\n    onChange?.(event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    const target = event.currentTarget;\n    if (target.selectionStart === 0 && target.selectionEnd === 0) {\n      const lastPillIndex = pills.length - 1;\n      const lastPill = pills[lastPillIndex];\n      if (event.key === \"Backspace\" && lastPill) {\n        event.preventDefault();\n        onPillRemove?.(event, lastPillIndex);\n      } else if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        // Move focus to last pill\n        pillElementsRef.current[lastPillIndex]?.focus();\n      }\n    }\n\n    inputOnKeyDown?.(event);\n  };\n\n  const handlePillKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    const target = event.currentTarget;\n    const index = Number(target.dataset.index);\n    if (event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      // Move focus to previous pill\n      pillElementsRef.current[index - 1]?.focus();\n    } else if (event.key === \"ArrowRight\") {\n      event.preventDefault();\n      // Move focus to next pill or input\n      if (index === pills.length - 1) {\n        inputRef?.current?.focus();\n      } else {\n        pillElementsRef.current[index + 1]?.focus();\n      }\n    } else if (event.key === \"Delete\" || event.key === \"Backspace\") {\n      event.preventDefault();\n      onPillRemove?.(event, index);\n\n      if (pills.length === 1) {\n        inputRef.current?.focus();\n      } else if (index === pills.length - 1) {\n        pillElementsRef.current[pills.length - 2]?.focus();\n      } else {\n        pillElementsRef.current[index]?.focus();\n      }\n    }\n  };\n\n  const handlePillClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (!hidePillClose) {\n      const target = event.currentTarget;\n      const index = Number(target.dataset.index);\n      onPillRemove?.(event, index);\n    }\n    inputRef.current?.focus();\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(\"truncate\")]: truncate,\n          [withBaseName(validationStatus ?? \"\")]: validationStatus,\n          [withBaseName(\"bordered\")]: bordered,\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      <div className={withBaseName(\"inputWrapper\")} ref={pillListRef}>\n        <div\n          role=\"list\"\n          className={withBaseName(\"pillList\")}\n          aria-labelledby={clsx(formFieldLabelledBy, pillListId)}\n          aria-label=\"Selected Options\"\n          id={pillListId}\n        >\n          {visiblePills?.map((pill, index) => (\n            <div role=\"listitem\" key={pill}>\n              <Pill\n                data-index={index}\n                disabled={disabled}\n                aria-label={hidePillClose ? pill : `Remove ${pill}`}\n                ref={(element) => {\n                  if (element) {\n                    pillElementsRef.current[index] = element;\n                  } else {\n                    pillElementsRef.current = pillElementsRef.current.filter(\n                      (pillEl) => pillEl !== element,\n                    );\n                  }\n                }}\n                onFocus={() => setFocusedPillIndex(index)}\n                onKeyDown={handlePillKeyDown}\n                onClick={handlePillClick}\n                tabIndex={\n                  focusedPillIndex === -1 || focusedPillIndex === index ? 0 : -1\n                }\n              >\n                {pill}\n                {!hidePillClose && <CloseIcon aria-hidden />}\n              </Pill>\n            </div>\n          ))}\n          {visiblePills.length < pills.length && (\n            <div role=\"listitem\">\n              <div\n                data-overflowindicator\n                className={withBaseName(\"overflowIndicator\")}\n              >\n                <OverflowIcon aria-hidden />\n              </div>\n            </div>\n          )}\n        </div>\n        <input\n          aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n          aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n          autoComplete=\"off\"\n          className={clsx(withBaseName(\"input\"), inputProps?.className)}\n          disabled={isDisabled}\n          id={id}\n          readOnly={isReadOnly}\n          ref={handleInputRef}\n          role={role}\n          tabIndex={isDisabled ? -1 : 0}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={!isDisabled ? handleFocus : undefined}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          value={value}\n          {...restA11yProps}\n          {...restInputProps}\n          required={isRequired}\n        />\n      </div>\n      {!isDisabled && validationStatus && (\n        <div className={withBaseName(\"statusAdornmentContainer\")}>\n          <StatusAdornment status={validationStatus} />\n        </div>\n      )}\n      {endAdornment && (\n        <div className={withBaseName(\"endAdornmentContainer\")}>\n          {endAdornment}\n        </div>\n      )}\n      <div className={withBaseName(\"activationIndicator\")} />\n    </div>\n  );\n});\n"],"names":["PillInput","pillInputCss","value"],"mappings":"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"}
+{"version":3,"file":"PillInput.js","sources":["../src/pill-input/PillInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type ForwardedRef,\n  forwardRef,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  useRef,\n  useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Pill } from \"../pill\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled, useForkRef, useId } from \"../utils\";\nimport pillInputCss from \"./PillInput.css\";\nimport { useTruncatePills } from \"./useTruncatePills\";\n\nconst withBaseName = makePrefixer(\"saltPillInput\");\n\nexport interface PillInputProps\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?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\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   * The tokens to display in the input.\n   */\n  pills?: string[];\n  onPillRemove?: (event: SyntheticEvent, index: number) => void;\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  hidePillClose?: boolean;\n  truncate?: boolean;\n  /** Styling variant with full border. Defaults to false\n   */\n  bordered?: boolean;\n}\n\nexport const PillInput = forwardRef(function PillInput(\n  {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    className: classNameProp,\n    disabled,\n    emptyReadOnlyMarker = \"—\",\n    endAdornment,\n    hidePillClose,\n    id: idProp,\n    inputProps = {},\n    inputRef: inputRefProp,\n    placeholder,\n    pills = [],\n    onPillRemove,\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    truncate,\n    bordered = false,\n    ...other\n  }: PillInputProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  const { OverflowIcon, CloseIcon } = useIcon();\n  useComponentCssInjection({\n    testId: \"salt-pill-input\",\n    css: pillInputCss,\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  const [focusedPillIndex, setFocusedPillIndex] = useState(-1);\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    onFocus,\n    onChange,\n    required: inputPropsRequired,\n    onKeyDown: inputOnKeyDown,\n    ...restInputProps\n  } = inputProps;\n\n  const isRequired = formFieldRequired\n    ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n    : inputPropsRequired;\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Input\",\n    state: \"value\",\n  });\n\n  const { visiblePills, pillListRef } = useTruncatePills({\n    pills,\n    enable: truncate && pills.length > 0,\n  });\n\n  const id = useId(idProp);\n  const pillListId = `${id}-optionsList`;\n\n  const pillElementsRef = useRef<HTMLElement[]>([]);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleInputRef = useForkRef(inputRef, inputRefProp);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setValue(value);\n    onChange?.(event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    const target = event.currentTarget;\n    if (target.selectionStart === 0 && target.selectionEnd === 0) {\n      const lastPillIndex = pills.length - 1;\n      const lastPill = pills[lastPillIndex];\n      if (event.key === \"Backspace\" && lastPill) {\n        event.preventDefault();\n        onPillRemove?.(event, lastPillIndex);\n      } else if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        // Move focus to last pill\n        pillElementsRef.current[lastPillIndex]?.focus();\n      }\n    }\n\n    inputOnKeyDown?.(event);\n  };\n\n  const handlePillKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    const target = event.currentTarget;\n    const index = Number(target.dataset.index);\n    if (event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      // Move focus to previous pill\n      pillElementsRef.current[index - 1]?.focus();\n    } else if (event.key === \"ArrowRight\") {\n      event.preventDefault();\n      // Move focus to next pill or input\n      if (index === pills.length - 1) {\n        inputRef?.current?.focus();\n      } else {\n        pillElementsRef.current[index + 1]?.focus();\n      }\n    } else if (event.key === \"Delete\" || event.key === \"Backspace\") {\n      event.preventDefault();\n      onPillRemove?.(event, index);\n\n      if (pills.length === 1) {\n        inputRef.current?.focus();\n      } else if (index === pills.length - 1) {\n        pillElementsRef.current[pills.length - 2]?.focus();\n      } else {\n        pillElementsRef.current[index]?.focus();\n      }\n    }\n  };\n\n  const handlePillClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (!hidePillClose) {\n      const target = event.currentTarget;\n      const index = Number(target.dataset.index);\n      onPillRemove?.(event, index);\n    }\n    inputRef.current?.focus();\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(\"truncate\")]: truncate,\n          [withBaseName(validationStatus ?? \"\")]: validationStatus,\n          [withBaseName(\"bordered\")]: bordered,\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      <div className={withBaseName(\"inputWrapper\")} ref={pillListRef}>\n        <div\n          role=\"list\"\n          className={withBaseName(\"pillList\")}\n          aria-labelledby={clsx(formFieldLabelledBy, pillListId)}\n          aria-label=\"Selected Options\"\n          id={pillListId}\n        >\n          {visiblePills?.map((pill, index) => (\n            <div role=\"listitem\" key={pill}>\n              <Pill\n                data-index={index}\n                disabled={disabled}\n                aria-label={hidePillClose ? pill : `Remove ${pill}`}\n                ref={(element) => {\n                  if (element) {\n                    pillElementsRef.current[index] = element;\n                  } else {\n                    pillElementsRef.current = pillElementsRef.current.filter(\n                      (pillEl) => pillEl !== element,\n                    );\n                  }\n                }}\n                onFocus={() => setFocusedPillIndex(index)}\n                onKeyDown={handlePillKeyDown}\n                onClick={handlePillClick}\n                tabIndex={\n                  focusedPillIndex === -1 || focusedPillIndex === index ? 0 : -1\n                }\n              >\n                {pill}\n                {!hidePillClose && <CloseIcon aria-hidden />}\n              </Pill>\n            </div>\n          ))}\n          {visiblePills.length < pills.length && (\n            <div role=\"listitem\">\n              <div\n                data-overflowindicator\n                className={withBaseName(\"overflowIndicator\")}\n              >\n                <OverflowIcon aria-hidden />\n              </div>\n            </div>\n          )}\n        </div>\n        <input\n          aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n          aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n          autoComplete=\"off\"\n          className={clsx(withBaseName(\"input\"), inputProps?.className)}\n          disabled={isDisabled}\n          id={id}\n          readOnly={isReadOnly}\n          ref={handleInputRef}\n          role={role}\n          tabIndex={isDisabled ? -1 : 0}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={!isDisabled ? handleFocus : undefined}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          value={value}\n          {...restA11yProps}\n          {...restInputProps}\n          required={isRequired}\n        />\n      </div>\n      {!isDisabled && validationStatus && (\n        <div className={withBaseName(\"statusAdornmentContainer\")}>\n          <StatusAdornment status={validationStatus} />\n        </div>\n      )}\n      {endAdornment && (\n        <div className={withBaseName(\"endAdornmentContainer\")}>\n          {endAdornment}\n        </div>\n      )}\n      <div className={withBaseName(\"activationIndicator\")} />\n    </div>\n  );\n});\n"],"names":["PillInput","pillInputCss","value"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2BA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAyD1C,MAAM,SAAA,GAAY,UAAA,CAAW,SAASA,UAAAA,CAC3C;AAAA,EACE,uBAAA,EAAyB,oBAAA;AAAA,EACzB,eAAA,EAAiB,YAAA;AAAA,EACjB,WAAA,EAAa,QAAA;AAAA,EACb,SAAA,EAAW,aAAA;AAAA,EACX,QAAA;AAAA,EACA,mBAAA,GAAsB,QAAA;AAAA,EACtB,YAAA;AAAA,EACA,aAAA;AAAA,EACA,EAAA,EAAI,MAAA;AAAA,EACJ,aAAa,EAAC;AAAA,EACd,QAAA,EAAU,YAAA;AAAA,EACV,WAAA;AAAA,EACA,QAAQ,EAAC;AAAA,EACT,YAAA;AAAA,EACA,QAAA,EAAU,YAAA;AAAA,EACV,IAAA;AAAA,EACA,cAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA,GAAY,MAAA;AAAA,EACZ,KAAA,EAAO,SAAA;AAAA,EACP,YAAA,EAAc,gBAAA,GAAmB,SAAA,KAAc,MAAA,GAAY,EAAA,GAAK,MAAA;AAAA,EAChE,gBAAA,EAAkB,oBAAA;AAAA,EAClB,OAAA,GAAU,SAAA;AAAA,EACV,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,MAAM,EAAE,YAAA,EAAc,SAAA,EAAU,GAAI,OAAA,EAAQ;AAC5C,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,iBAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM;AAAA,IACJ,SAAA,EAAW;AAAA,MACT,kBAAA,EAAoB,oBAAA;AAAA,MACpB,iBAAA,EAAmB;AAAA,QACjB,EAAC;AAAA,IACL,QAAA,EAAU,iBAAA;AAAA,IACV,QAAA,EAAU,iBAAA;AAAA,IACV,SAAA,EAAW,iBAAA;AAAA,IACX,gBAAA,EAAkB;AAAA,MAChB,iBAAA,EAAkB;AAEtB,EAAA,MAAM,aAAA,GAAgB;AAAA,IACpB,uBAAA,EAAyB,oBAAA;AAAA,IACzB,eAAA,EAAiB,YAAA;AAAA,IACjB,WAAA,EAAa;AAAA,GACf;AAEA,EAAA,MAAM,aAAa,QAAA,IAAY,iBAAA;AAC/B,EAAA,MAAM,aAAa,YAAA,IAAgB,iBAAA;AACnC,EAAA,MAAM,mBAAmB,yBAAA,IAA6B,oBAAA;AAEtD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,SAAS,EAAE,CAAA;AAE3D,EAAA,MAAM,eAAA,GAAkB,UAAA,IAAc,CAAC,gBAAA,IAAoB,CAAC,SAAA;AAC5D,EAAA,MAAM,YAAA,GAAe,kBAAkB,mBAAA,GAAsB,gBAAA;AAE7D,EAAA,MAAM;AAAA,IACJ,kBAAA,EAAoB,gBAAA;AAAA,IACpB,iBAAA,EAAmB,eAAA;AAAA,IACnB,MAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA,EAAU,kBAAA;AAAA,IACV,SAAA,EAAW,cAAA;AAAA,IACX,GAAG;AAAA,GACL,GAAI,UAAA;AAEJ,EAAA,MAAM,UAAA,GAAa,oBACf,CAAC,UAAA,EAAY,UAAU,CAAA,CAAE,QAAA,CAAS,iBAAiB,CAAA,GACnD,kBAAA;AAEJ,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,aAAA,CAAc;AAAA,IACtC,UAAA,EAAY,SAAA;AAAA,IACZ,OAAA,EAAS,YAAA;AAAA,IACT,IAAA,EAAM,OAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACR,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,WAAA,EAAY,GAAI,gBAAA,CAAiB;AAAA,IACrD,KAAA;AAAA,IACA,MAAA,EAAQ,QAAA,IAAY,KAAA,CAAM,MAAA,GAAS;AAAA,GACpC,CAAA;AAED,EAAA,MAAM,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,EAAA,MAAM,UAAA,GAAa,GAAG,EAAE,CAAA,YAAA,CAAA;AAExB,EAAA,MAAM,eAAA,GAAkB,MAAA,CAAsB,EAAE,CAAA;AAChD,EAAA,MAAM,QAAA,GAAW,OAAyB,IAAI,CAAA;AAE9C,EAAA,MAAM,cAAA,GAAiB,UAAA,CAAW,QAAA,EAAU,YAAY,CAAA;AAExD,EAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KAAyC;AAC7D,IAAA,MAAMC,MAAAA,GAAQ,MAAM,MAAA,CAAO,KAAA;AAC3B,IAAA,QAAA,CAASA,MAAK,CAAA;AACd,IAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,CAAA;AAAA,EACb,CAAA;AAEA,EAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA2C;AA/LpE,IAAA,IAAA,EAAA;AAgMI,IAAA,MAAM,SAAS,KAAA,CAAM,aAAA;AACrB,IAAA,IAAI,MAAA,CAAO,cAAA,KAAmB,CAAA,IAAK,MAAA,CAAO,iBAAiB,CAAA,EAAG;AAC5D,MAAA,MAAM,aAAA,GAAgB,MAAM,MAAA,GAAS,CAAA;AACrC,MAAA,MAAM,QAAA,GAAW,MAAM,aAAa,CAAA;AACpC,MAAA,IAAI,KAAA,CAAM,GAAA,KAAQ,WAAA,IAAe,QAAA,EAAU;AACzC,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAe,KAAA,EAAO,aAAA,CAAA;AAAA,MACxB,CAAA,MAAA,IAAW,KAAA,CAAM,GAAA,KAAQ,WAAA,EAAa;AACpC,QAAA,KAAA,CAAM,cAAA,EAAe;AAErB,QAAA,CAAA,EAAA,GAAA,eAAA,CAAgB,OAAA,CAAQ,aAAa,CAAA,KAArC,IAAA,GAAA,MAAA,GAAA,EAAA,CAAwC,KAAA,EAAA;AAAA,MAC1C;AAAA,IACF;AAEA,IAAA,cAAA,IAAA,IAAA,GAAA,MAAA,GAAA,cAAA,CAAiB,KAAA,CAAA;AAAA,EACnB,CAAA;AAEA,EAAA,MAAM,iBAAA,GAAoB,CAAC,KAAA,KAA4C;AAjNzE,IAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AAkNI,IAAA,MAAM,SAAS,KAAA,CAAM,aAAA;AACrB,IAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,MAAA,CAAO,OAAA,CAAQ,KAAK,CAAA;AACzC,IAAA,IAAI,KAAA,CAAM,QAAQ,WAAA,EAAa;AAC7B,MAAA,KAAA,CAAM,cAAA,EAAe;AAErB,MAAA,CAAA,EAAA,GAAA,eAAA,CAAgB,OAAA,CAAQ,KAAA,GAAQ,CAAC,CAAA,KAAjC,IAAA,GAAA,MAAA,GAAA,EAAA,CAAoC,KAAA,EAAA;AAAA,IACtC,CAAA,MAAA,IAAW,KAAA,CAAM,GAAA,KAAQ,YAAA,EAAc;AACrC,MAAA,KAAA,CAAM,cAAA,EAAe;AAErB,MAAA,IAAI,KAAA,KAAU,KAAA,CAAM,MAAA,GAAS,CAAA,EAAG;AAC9B,QAAA,CAAA,EAAA,GAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,YAAV,IAAA,GAAA,MAAA,GAAA,EAAA,CAAmB,KAAA,EAAA;AAAA,MACrB,CAAA,MAAO;AACL,QAAA,CAAA,EAAA,GAAA,eAAA,CAAgB,OAAA,CAAQ,KAAA,GAAQ,CAAC,CAAA,KAAjC,IAAA,GAAA,MAAA,GAAA,EAAA,CAAoC,KAAA,EAAA;AAAA,MACtC;AAAA,IACF,WAAW,KAAA,CAAM,GAAA,KAAQ,QAAA,IAAY,KAAA,CAAM,QAAQ,WAAA,EAAa;AAC9D,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAe,KAAA,EAAO,KAAA,CAAA;AAEtB,MAAA,IAAI,KAAA,CAAM,WAAW,CAAA,EAAG;AACtB,QAAA,CAAA,EAAA,GAAA,QAAA,CAAS,YAAT,IAAA,GAAA,MAAA,GAAA,EAAA,CAAkB,KAAA,EAAA;AAAA,MACpB,CAAA,MAAA,IAAW,KAAA,KAAU,KAAA,CAAM,MAAA,GAAS,CAAA,EAAG;AACrC,QAAA,CAAA,EAAA,GAAA,eAAA,CAAgB,OAAA,CAAQ,KAAA,CAAM,MAAA,GAAS,CAAC,MAAxC,IAAA,GAAA,MAAA,GAAA,EAAA,CAA2C,KAAA,EAAA;AAAA,MAC7C,CAAA,MAAO;AACL,QAAA,CAAA,EAAA,GAAA,eAAA,CAAgB,OAAA,CAAQ,KAAK,CAAA,KAA7B,IAAA,GAAA,MAAA,GAAA,EAAA,CAAgC,KAAA,EAAA;AAAA,MAClC;AAAA,IACF;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,eAAA,GAAkB,CAAC,KAAA,KAAyC;AA9OpE,IAAA,IAAA,EAAA;AA+OI,IAAA,IAAI,CAAC,aAAA,EAAe;AAClB,MAAA,MAAM,SAAS,KAAA,CAAM,aAAA;AACrB,MAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,MAAA,CAAO,OAAA,CAAQ,KAAK,CAAA;AACzC,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAe,KAAA,EAAO,KAAA,CAAA;AAAA,IACxB;AACA,IAAA,CAAA,EAAA,GAAA,QAAA,CAAS,YAAT,IAAA,GAAA,MAAA,GAAA,EAAA,CAAkB,KAAA,EAAA;AAAA,EACpB,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa,CAAC,KAAA,KAAwC;AAC1D,IAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,KAAA,CAAA;AACT,IAAA,UAAA,CAAW,KAAK,CAAA;AAAA,EAClB,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAwC;AAC3D,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AACV,IAAA,UAAA,CAAW,IAAI,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,mBAAA,EAAqB,SAAA;AAAA,IACrB,GAAG;AAAA,GACL;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,UACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,CAAC,UAAA,IAAc,OAAA;AAAA,UAC1C,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,gBAAA,IAAoB,EAAE,CAAC,GAAG,gBAAA;AAAA,UACxC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC9B;AAAA,QACA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACA,KAAA,EAAO,UAAA;AAAA,MACN,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,cAAA,wBACE,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,yBAAyB,GACnD,QAAA,EAAA,cAAA,EACH,CAAA;AAAA,6BAED,KAAA,EAAA,EAAI,SAAA,EAAW,aAAa,cAAc,CAAA,EAAG,KAAK,WAAA,EACjD,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,MAAA;AAAA,cACL,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,cAClC,iBAAA,EAAiB,IAAA,CAAK,mBAAA,EAAqB,UAAU,CAAA;AAAA,cACrD,YAAA,EAAW,kBAAA;AAAA,cACX,EAAA,EAAI,UAAA;AAAA,cAEH,QAAA,EAAA;AAAA,gBAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,IAAI,CAAC,IAAA,EAAM,0BACxB,GAAA,CAAC,KAAA,EAAA,EAAI,MAAK,UAAA,EACR,QAAA,kBAAA,IAAA;AAAA,kBAAC,IAAA;AAAA,kBAAA;AAAA,oBACC,YAAA,EAAY,KAAA;AAAA,oBACZ,QAAA;AAAA,oBACA,YAAA,EAAY,aAAA,GAAgB,IAAA,GAAO,CAAA,OAAA,EAAU,IAAI,CAAA,CAAA;AAAA,oBACjD,GAAA,EAAK,CAAC,OAAA,KAAY;AAChB,sBAAA,IAAI,OAAA,EAAS;AACX,wBAAA,eAAA,CAAgB,OAAA,CAAQ,KAAK,CAAA,GAAI,OAAA;AAAA,sBACnC,CAAA,MAAO;AACL,wBAAA,eAAA,CAAgB,OAAA,GAAU,gBAAgB,OAAA,CAAQ,MAAA;AAAA,0BAChD,CAAC,WAAW,MAAA,KAAW;AAAA,yBACzB;AAAA,sBACF;AAAA,oBACF,CAAA;AAAA,oBACA,OAAA,EAAS,MAAM,mBAAA,CAAoB,KAAK,CAAA;AAAA,oBACxC,SAAA,EAAW,iBAAA;AAAA,oBACX,OAAA,EAAS,eAAA;AAAA,oBACT,QAAA,EACE,gBAAA,KAAqB,EAAA,IAAM,gBAAA,KAAqB,QAAQ,CAAA,GAAI,EAAA;AAAA,oBAG7D,QAAA,EAAA;AAAA,sBAAA,IAAA;AAAA,sBACA,CAAC,aAAA,oBAAiB,GAAA,CAAC,SAAA,EAAA,EAAU,eAAW,IAAA,EAAC;AAAA;AAAA;AAAA,qBAtBpB,IAwB1B,CAAA,CAAA;AAAA,gBAED,aAAa,MAAA,GAAS,KAAA,CAAM,0BAC3B,GAAA,CAAC,KAAA,EAAA,EAAI,MAAK,UAAA,EACR,QAAA,kBAAA,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,wBAAA,EAAsB,IAAA;AAAA,oBACtB,SAAA,EAAW,aAAa,mBAAmB,CAAA;AAAA,oBAE3C,QAAA,kBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,iBAC5B,EACF;AAAA;AAAA;AAAA,WAEJ;AAAA,0BACA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,kBAAA,EAAkB,IAAA,CAAK,oBAAA,EAAsB,gBAAgB,CAAA;AAAA,cAC7D,iBAAA,EAAiB,IAAA,CAAK,mBAAA,EAAqB,eAAe,CAAA;AAAA,cAC1D,YAAA,EAAa,KAAA;AAAA,cACb,WAAW,IAAA,CAAK,YAAA,CAAa,OAAO,CAAA,EAAG,yCAAY,SAAS,CAAA;AAAA,cAC5D,QAAA,EAAU,UAAA;AAAA,cACV,EAAA;AAAA,cACA,QAAA,EAAU,UAAA;AAAA,cACV,GAAA,EAAK,cAAA;AAAA,cACL,IAAA;AAAA,cACA,QAAA,EAAU,aAAa,EAAA,GAAK,CAAA;AAAA,cAC5B,MAAA,EAAQ,UAAA;AAAA,cACR,QAAA,EAAU,YAAA;AAAA,cACV,OAAA,EAAS,CAAC,UAAA,GAAa,WAAA,GAAc,MAAA;AAAA,cACrC,SAAA,EAAW,aAAA;AAAA,cACX,WAAA;AAAA,cACA,KAAA;AAAA,cACC,GAAG,aAAA;AAAA,cACH,GAAG,cAAA;AAAA,cACJ,QAAA,EAAU;AAAA;AAAA;AACZ,SAAA,EACF,CAAA;AAAA,QACC,CAAC,UAAA,IAAc,gBAAA,oBACd,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,0BAA0B,CAAA,EACrD,QAAA,kBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,MAAA,EAAQ,kBAAkB,CAAA,EAC7C,CAAA;AAAA,QAED,gCACC,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,YAAA,CAAa,uBAAuB,GACjD,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,wBAEF,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,qBAAqB,CAAA,EAAG;AAAA;AAAA;AAAA,GACvD;AAEJ,CAAC;;;;"}

package/dist-es/slider/internal/useRangeSliderThumb.js

@@ -76,7 +76,7 @@ const useRangeSliderThumb = ({
       onChange
     ]
   );
-  const handlePointerUp = useCallback(
+  const handleDragEnd = useCallback(
     (event) => {
       setIsDragging(false);
       setIsFocusVisible(false);
@@ -87,16 +87,25 @@ const useRangeSliderThumb = ({
   useEffect(() => {
     if (isDragging) {
       targetWindow == null ? void 0 : targetWindow.addEventListener("pointermove", handlePointerMove);
-      targetWindow == null ? void 0 : targetWindow.addEventListener("pointerup", handlePointerUp);
+      targetWindow == null ? void 0 : targetWindow.addEventListener("pointerup", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.addEventListener("pointercancel", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.addEventListener("blur", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.addEventListener("contextmenu", handleDragEnd);
     } else {
       targetWindow == null ? void 0 : targetWindow.removeEventListener("pointermove", handlePointerMove);
-      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointerup", handlePointerUp);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointerup", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointercancel", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("blur", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("contextmenu", handleDragEnd);
     }
     return () => {
       targetWindow == null ? void 0 : targetWindow.removeEventListener("pointermove", handlePointerMove);
-      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointerup", handlePointerUp);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointerup", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointercancel", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("blur", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("contextmenu", handleDragEnd);
     };
-  }, [handlePointerMove, handlePointerUp, isDragging, targetWindow]);
+  }, [isDragging, targetWindow, handlePointerMove, handleDragEnd]);
   const handlePointerDownOnThumb = useCallback(
     (event, thumbIndex) => {
       var _a;

package/dist-es/slider/internal/useRangeSliderThumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRangeSliderThumb.js","sources":["../src/slider/internal/useRangeSliderThumb.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport {\n  type ChangeEvent,\n  type Dispatch,\n  type RefObject,\n  type SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport type { SliderProps } from \"../Slider\";\nimport { getClickedPosition, getKeyboardValue } from \"./utils\";\n\ntype UseRangeSliderThumbProps = Pick<SliderProps, \"min\" | \"max\" | \"step\"> & {\n  decimalPlaces: number;\n  handleInputChange: (\n    event: ChangeEvent<HTMLInputElement>,\n    thumbIndex: number,\n  ) => void;\n  inputRefs: RefObject<HTMLInputElement>[];\n  marks?: { label: string; value: number }[];\n  onChange?: (event: Event, value: [number, number]) => void;\n  onChangeEnd?: (event: Event, value: [number, number]) => void;\n  restrictToMarks?: boolean;\n  setValue: Dispatch<SetStateAction<[number, number]>>;\n  stepMultiplier: number;\n  value: [number, number];\n};\n\nexport const useRangeSliderThumb = ({\n  decimalPlaces,\n  handleInputChange,\n  inputRefs,\n  marks,\n  min = 0,\n  max = 10,\n  step = 1,\n  onChange,\n  onChangeEnd,\n  restrictToMarks,\n  setValue,\n  stepMultiplier,\n  value,\n}: UseRangeSliderThumbProps) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [isFocusVisible, setIsFocusVisible] = useState(false);\n  const [thumbIndexState, setIsThumbIndex] = useState<number>(0);\n  const lastValueRef = useRef<[number, number]>(value);\n  const sliderRef = useRef<HTMLDivElement>(null);\n  const targetWindow = useWindow();\n\n  const preventThumbOverlap = useCallback(\n    (currentValue: number, value: [number, number], thumbIndex: number) => {\n      const values = [...value] as [number, number];\n      if (thumbIndex === 0 && currentValue >= values[1]) {\n        values[0] = values[1];\n      } else if (thumbIndex === 1 && currentValue <= values[0]) {\n        values[1] = values[0];\n      } else {\n        values[thumbIndex] = currentValue;\n      }\n      return values;\n    },\n    [],\n  );\n\n  const handlePointerMove = useCallback(\n    (event: PointerEvent) => {\n      if (!sliderRef.current) return;\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      if (newValue === undefined) return;\n      const newValues = preventThumbOverlap(\n        newValue,\n        value as [number, number],\n        thumbIndexState,\n      );\n\n      if (\n        newValues[0] !== lastValueRef.current[0] ||\n        newValues[1] !== lastValueRef.current[1]\n      ) {\n        lastValueRef.current = newValues;\n        setValue(newValues);\n        onChange?.(event, newValues);\n      }\n    },\n    [\n      decimalPlaces,\n      marks,\n      max,\n      min,\n      step,\n      preventThumbOverlap,\n      restrictToMarks,\n      value,\n      thumbIndexState,\n      setValue,\n      onChange,\n    ],\n  );\n\n  const handlePointerUp = useCallback(\n    (event: PointerEvent) => {\n      setIsDragging(false);\n      setIsFocusVisible(false);\n      onChangeEnd?.(event, lastValueRef.current);\n    },\n    [onChangeEnd],\n  );\n\n  useEffect(() => {\n    if (isDragging) {\n      targetWindow?.addEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.addEventListener(\"pointerup\", handlePointerUp);\n    } else {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n    }\n    return () => {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n    };\n  }, [handlePointerMove, handlePointerUp, isDragging, targetWindow]);\n\n  const handlePointerDownOnThumb = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>, thumbIndex: number) => {\n      event.preventDefault();\n      // To prevent the pointerdown event from bubbling up to the slider track\n      //  and triggering its pointerdown event\n      event.stopPropagation();\n\n      inputRefs[thumbIndex].current?.focus();\n      setIsDragging(true);\n      setIsFocusVisible(false);\n      if (thumbIndex !== undefined) {\n        setIsThumbIndex(thumbIndex);\n      }\n    },\n    [inputRefs],\n  );\n\n  const handlePointerDownOnTrack = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      setIsDragging(true);\n\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      let closestThumbIndex = 0;\n\n      if (newValue === undefined) return;\n      const newValues = [...value] as [number, number];\n      // Find nearest thumb\n      const distanceToThumb0 = Math.abs(newValue - newValues[0]);\n      const distanceToThumb1 = Math.abs(newValue - newValues[1]);\n      if (distanceToThumb0 > distanceToThumb1) {\n        // Move the second thumb\n        newValues[1] = newValue;\n        closestThumbIndex = 1;\n      } else if (distanceToThumb0 < distanceToThumb1) {\n        // Move the first thumb\n        newValues[0] = newValue;\n        closestThumbIndex = 0;\n      } else {\n        // If distances are equal, determine based on the click position\n        if (newValue < newValues[0]) {\n          // Clicked position is before both thumbs, move the first thumb\n          newValues[0] = newValue;\n          closestThumbIndex = 0;\n        } else if (newValue > newValues[1]) {\n          // Clicked position is after both thumbs, move the second thumb\n          newValues[1] = newValue;\n          closestThumbIndex = 1;\n        } else {\n          // Clicked position is between the thumbs, move the first thumb\n          newValues[0] = newValue;\n          closestThumbIndex = 0;\n        }\n      }\n      setIsThumbIndex(closestThumbIndex);\n      inputRefs[closestThumbIndex].current?.focus();\n      setIsFocusVisible(false);\n\n      if (\n        newValues[0] !== lastValueRef.current[0] ||\n        newValues[1] !== lastValueRef.current[1]\n      ) {\n        lastValueRef.current = newValues;\n        setValue(newValues);\n        onChange?.(event.nativeEvent, newValues);\n      }\n    },\n    [\n      decimalPlaces,\n      marks,\n      value,\n      max,\n      min,\n      inputRefs,\n      onChange,\n      restrictToMarks,\n      setValue,\n      step,\n    ],\n  );\n\n  const handleKeydownOnThumb = useCallback(\n    (event: React.KeyboardEvent, thumbIndex: number) => {\n      const newValue = getKeyboardValue(\n        event,\n        value[thumbIndex],\n        step,\n        stepMultiplier,\n        max,\n        min,\n        restrictToMarks,\n        marks,\n      );\n      if (\n        newValue === undefined ||\n        newValue === lastValueRef.current[thumbIndex]\n      ) {\n        return;\n      }\n      setIsFocusVisible(true);\n      lastValueRef.current[thumbIndex] = newValue;\n      handleInputChange(\n        {\n          target: { value: newValue.toString() },\n        } as ChangeEvent<HTMLInputElement>,\n        thumbIndex,\n      );\n    },\n    [\n      value,\n      step,\n      stepMultiplier,\n      max,\n      min,\n      restrictToMarks,\n      marks,\n      handleInputChange,\n    ],\n  );\n\n  const handleFocus = (thumbIndex: number) => {\n    setIsThumbIndex(thumbIndex);\n    setIsFocusVisible(true);\n  };\n\n  const handleBlur = (thumbIndex: number) => {\n    setIsThumbIndex(thumbIndex);\n    setIsFocusVisible(false);\n  };\n\n  return {\n    handleBlur,\n    handleFocus,\n    handleKeydownOnThumb,\n    handlePointerDownOnThumb,\n    handlePointerDownOnTrack,\n    isDragging,\n    isFocusVisible,\n    preventThumbOverlap,\n    sliderRef,\n    thumbIndexState,\n  };\n};\n"],"names":["value"],"mappings":"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"}
+{"version":3,"file":"useRangeSliderThumb.js","sources":["../src/slider/internal/useRangeSliderThumb.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport {\n  type ChangeEvent,\n  type Dispatch,\n  type RefObject,\n  type SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport type { SliderProps } from \"../Slider\";\nimport { getClickedPosition, getKeyboardValue } from \"./utils\";\n\ntype UseRangeSliderThumbProps = Pick<SliderProps, \"min\" | \"max\" | \"step\"> & {\n  decimalPlaces: number;\n  handleInputChange: (\n    event: ChangeEvent<HTMLInputElement>,\n    thumbIndex: number,\n  ) => void;\n  inputRefs: RefObject<HTMLInputElement>[];\n  marks?: { label: string; value: number }[];\n  onChange?: (event: Event, value: [number, number]) => void;\n  onChangeEnd?: (event: Event, value: [number, number]) => void;\n  restrictToMarks?: boolean;\n  setValue: Dispatch<SetStateAction<[number, number]>>;\n  stepMultiplier: number;\n  value: [number, number];\n};\n\nexport const useRangeSliderThumb = ({\n  decimalPlaces,\n  handleInputChange,\n  inputRefs,\n  marks,\n  min = 0,\n  max = 10,\n  step = 1,\n  onChange,\n  onChangeEnd,\n  restrictToMarks,\n  setValue,\n  stepMultiplier,\n  value,\n}: UseRangeSliderThumbProps) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [isFocusVisible, setIsFocusVisible] = useState(false);\n  const [thumbIndexState, setIsThumbIndex] = useState<number>(0);\n  const lastValueRef = useRef<[number, number]>(value);\n  const sliderRef = useRef<HTMLDivElement>(null);\n  const targetWindow = useWindow();\n\n  const preventThumbOverlap = useCallback(\n    (currentValue: number, value: [number, number], thumbIndex: number) => {\n      const values = [...value] as [number, number];\n      if (thumbIndex === 0 && currentValue >= values[1]) {\n        values[0] = values[1];\n      } else if (thumbIndex === 1 && currentValue <= values[0]) {\n        values[1] = values[0];\n      } else {\n        values[thumbIndex] = currentValue;\n      }\n      return values;\n    },\n    [],\n  );\n\n  const handlePointerMove = useCallback(\n    (event: PointerEvent) => {\n      if (!sliderRef.current) return;\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      if (newValue === undefined) return;\n      const newValues = preventThumbOverlap(\n        newValue,\n        value as [number, number],\n        thumbIndexState,\n      );\n\n      if (\n        newValues[0] !== lastValueRef.current[0] ||\n        newValues[1] !== lastValueRef.current[1]\n      ) {\n        lastValueRef.current = newValues;\n        setValue(newValues);\n        onChange?.(event, newValues);\n      }\n    },\n    [\n      decimalPlaces,\n      marks,\n      max,\n      min,\n      step,\n      preventThumbOverlap,\n      restrictToMarks,\n      value,\n      thumbIndexState,\n      setValue,\n      onChange,\n    ],\n  );\n\n  const handleDragEnd = useCallback(\n    (event: Event) => {\n      setIsDragging(false);\n      setIsFocusVisible(false);\n      onChangeEnd?.(event, lastValueRef.current);\n    },\n    [onChangeEnd],\n  );\n\n  useEffect(() => {\n    if (isDragging) {\n      targetWindow?.addEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.addEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.addEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.addEventListener(\"blur\", handleDragEnd);\n      targetWindow?.addEventListener(\"contextmenu\", handleDragEnd);\n    } else {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n      targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n    }\n    return () => {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n      targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n    };\n  }, [isDragging, targetWindow, handlePointerMove, handleDragEnd]);\n\n  const handlePointerDownOnThumb = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>, thumbIndex: number) => {\n      event.preventDefault();\n      // To prevent the pointerdown event from bubbling up to the slider track\n      //  and triggering its pointerdown event\n      event.stopPropagation();\n\n      inputRefs[thumbIndex].current?.focus();\n      setIsDragging(true);\n      setIsFocusVisible(false);\n      if (thumbIndex !== undefined) {\n        setIsThumbIndex(thumbIndex);\n      }\n    },\n    [inputRefs],\n  );\n\n  const handlePointerDownOnTrack = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      setIsDragging(true);\n\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      let closestThumbIndex = 0;\n\n      if (newValue === undefined) return;\n      const newValues = [...value] as [number, number];\n      // Find nearest thumb\n      const distanceToThumb0 = Math.abs(newValue - newValues[0]);\n      const distanceToThumb1 = Math.abs(newValue - newValues[1]);\n      if (distanceToThumb0 > distanceToThumb1) {\n        // Move the second thumb\n        newValues[1] = newValue;\n        closestThumbIndex = 1;\n      } else if (distanceToThumb0 < distanceToThumb1) {\n        // Move the first thumb\n        newValues[0] = newValue;\n        closestThumbIndex = 0;\n      } else {\n        // If distances are equal, determine based on the click position\n        if (newValue < newValues[0]) {\n          // Clicked position is before both thumbs, move the first thumb\n          newValues[0] = newValue;\n          closestThumbIndex = 0;\n        } else if (newValue > newValues[1]) {\n          // Clicked position is after both thumbs, move the second thumb\n          newValues[1] = newValue;\n          closestThumbIndex = 1;\n        } else {\n          // Clicked position is between the thumbs, move the first thumb\n          newValues[0] = newValue;\n          closestThumbIndex = 0;\n        }\n      }\n      setIsThumbIndex(closestThumbIndex);\n      inputRefs[closestThumbIndex].current?.focus();\n      setIsFocusVisible(false);\n\n      if (\n        newValues[0] !== lastValueRef.current[0] ||\n        newValues[1] !== lastValueRef.current[1]\n      ) {\n        lastValueRef.current = newValues;\n        setValue(newValues);\n        onChange?.(event.nativeEvent, newValues);\n      }\n    },\n    [\n      decimalPlaces,\n      marks,\n      value,\n      max,\n      min,\n      inputRefs,\n      onChange,\n      restrictToMarks,\n      setValue,\n      step,\n    ],\n  );\n\n  const handleKeydownOnThumb = useCallback(\n    (event: React.KeyboardEvent, thumbIndex: number) => {\n      const newValue = getKeyboardValue(\n        event,\n        value[thumbIndex],\n        step,\n        stepMultiplier,\n        max,\n        min,\n        restrictToMarks,\n        marks,\n      );\n      if (\n        newValue === undefined ||\n        newValue === lastValueRef.current[thumbIndex]\n      ) {\n        return;\n      }\n      setIsFocusVisible(true);\n      lastValueRef.current[thumbIndex] = newValue;\n      handleInputChange(\n        {\n          target: { value: newValue.toString() },\n        } as ChangeEvent<HTMLInputElement>,\n        thumbIndex,\n      );\n    },\n    [\n      value,\n      step,\n      stepMultiplier,\n      max,\n      min,\n      restrictToMarks,\n      marks,\n      handleInputChange,\n    ],\n  );\n\n  const handleFocus = (thumbIndex: number) => {\n    setIsThumbIndex(thumbIndex);\n    setIsFocusVisible(true);\n  };\n\n  const handleBlur = (thumbIndex: number) => {\n    setIsThumbIndex(thumbIndex);\n    setIsFocusVisible(false);\n  };\n\n  return {\n    handleBlur,\n    handleFocus,\n    handleKeydownOnThumb,\n    handlePointerDownOnThumb,\n    handlePointerDownOnTrack,\n    isDragging,\n    isFocusVisible,\n    preventThumbOverlap,\n    sliderRef,\n    thumbIndexState,\n  };\n};\n"],"names":["value"],"mappings":"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"}

package/dist-es/slider/internal/useSliderThumb.js

@@ -44,7 +44,7 @@ const useSliderThumb = ({
     },
     [decimalPlaces, marks, max, min, onChange, setValue, restrictToMarks, step]
   );
-  const handlePointerUp = useCallback(
+  const handleDragEnd = useCallback(
     (event) => {
       setIsDragging(false);
       setIsFocusVisible(false);
@@ -55,16 +55,25 @@ const useSliderThumb = ({
   useEffect(() => {
     if (isDragging) {
       targetWindow == null ? void 0 : targetWindow.addEventListener("pointermove", handlePointerMove);
-      targetWindow == null ? void 0 : targetWindow.addEventListener("pointerup", handlePointerUp);
+      targetWindow == null ? void 0 : targetWindow.addEventListener("pointerup", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.addEventListener("pointercancel", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.addEventListener("blur", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.addEventListener("contextmenu", handleDragEnd);
     } else {
       targetWindow == null ? void 0 : targetWindow.removeEventListener("pointermove", handlePointerMove);
-      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointerup", handlePointerUp);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointerup", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointercancel", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("blur", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("contextmenu", handleDragEnd);
     }
     return () => {
       targetWindow == null ? void 0 : targetWindow.removeEventListener("pointermove", handlePointerMove);
-      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointerup", handlePointerUp);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointerup", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointercancel", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("blur", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("contextmenu", handleDragEnd);
     };
-  }, [handlePointerMove, handlePointerUp, isDragging, targetWindow]);
+  }, [isDragging, targetWindow, handlePointerMove, handleDragEnd]);
   const handlePointerDownOnThumb = useCallback(
     (event) => {
       event.preventDefault();

package/dist-es/slider/internal/useSliderThumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSliderThumb.js","sources":["../src/slider/internal/useSliderThumb.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport {\n  type ChangeEvent,\n  type Dispatch,\n  type RefObject,\n  type SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport type { SliderProps } from \"../Slider\";\nimport { getClickedPosition, getKeyboardValue } from \"./utils\";\n\ntype UseSliderThumbProps = Pick<SliderProps, \"min\" | \"max\" | \"step\"> & {\n  decimalPlaces: number;\n  handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;\n  inputRef: RefObject<HTMLInputElement>;\n  marks?: { label: string; value: number }[];\n  onChange?: (event: Event, value: number) => void;\n  onChangeEnd?: (event: Event, value: number) => void;\n  restrictToMarks?: boolean;\n  setValue: Dispatch<SetStateAction<number>>;\n  stepMultiplier: number;\n  value: number;\n};\n\nexport const useSliderThumb = ({\n  decimalPlaces,\n  handleInputChange,\n  inputRef,\n  marks,\n  min = 0,\n  max = 10,\n  step = 1,\n  onChange,\n  onChangeEnd,\n  restrictToMarks,\n  setValue,\n  stepMultiplier,\n  value,\n}: UseSliderThumbProps) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [isFocusVisible, setIsFocusVisible] = useState(false);\n  const lastValueRef = useRef<number>(value);\n  const sliderRef = useRef<HTMLDivElement>(null);\n  const targetWindow = useWindow();\n\n  const handlePointerMove = useCallback(\n    (event: PointerEvent) => {\n      if (!sliderRef.current) return;\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      if (newValue === undefined || lastValueRef.current === newValue) {\n        return;\n      }\n      lastValueRef.current = newValue;\n      setValue(newValue);\n      onChange?.(event, newValue);\n    },\n    [decimalPlaces, marks, max, min, onChange, setValue, restrictToMarks, step],\n  );\n\n  const handlePointerUp = useCallback(\n    (event: PointerEvent) => {\n      setIsDragging(false);\n      setIsFocusVisible(false);\n      onChangeEnd?.(event, lastValueRef.current);\n    },\n    [onChangeEnd],\n  );\n\n  useEffect(() => {\n    if (isDragging) {\n      targetWindow?.addEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.addEventListener(\"pointerup\", handlePointerUp);\n    } else {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n    }\n    return () => {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n    };\n  }, [handlePointerMove, handlePointerUp, isDragging, targetWindow]);\n\n  const handlePointerDownOnThumb = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      // To prevent the pointerdown event from bubbling up to the slider track\n      //  and triggering its pointerdown event\n      event.stopPropagation();\n      if (inputRef.current) inputRef.current.focus();\n      setIsDragging(true);\n      setIsFocusVisible(false);\n    },\n    [inputRef],\n  );\n\n  const handlePointerDownOnTrack = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      if (inputRef.current) inputRef.current.focus();\n      setIsDragging(true);\n      setIsFocusVisible(false);\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      if (newValue === undefined || lastValueRef.current === newValue) {\n        return;\n      }\n      lastValueRef.current = newValue;\n      setValue(newValue);\n      onChange?.(event.nativeEvent, newValue);\n    },\n    [\n      decimalPlaces,\n      inputRef,\n      marks,\n      max,\n      min,\n      onChange,\n      restrictToMarks,\n      setValue,\n      step,\n    ],\n  );\n\n  const handleKeydownOnThumb = useCallback(\n    (event: React.KeyboardEvent) => {\n      const newValue = getKeyboardValue(\n        event,\n        value,\n        step,\n        stepMultiplier,\n        max,\n        min,\n        restrictToMarks,\n        marks,\n      );\n      if (newValue === undefined || lastValueRef.current === newValue) {\n        return;\n      }\n      setIsFocusVisible(true);\n      lastValueRef.current = newValue;\n      handleInputChange({\n        target: { value: newValue.toString() },\n      } as ChangeEvent<HTMLInputElement>);\n    },\n    [\n      value,\n      step,\n      stepMultiplier,\n      max,\n      min,\n      restrictToMarks,\n      marks,\n      handleInputChange,\n    ],\n  );\n\n  const handleFocus = () => setIsFocusVisible(true);\n\n  const handleBlur = () => setIsFocusVisible(false);\n\n  return {\n    handleBlur,\n    handleFocus,\n    handleKeydownOnThumb,\n    handlePointerDownOnThumb,\n    handlePointerDownOnTrack,\n    isDragging,\n    isFocusVisible,\n    sliderRef,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useSliderThumb.js","sources":["../src/slider/internal/useSliderThumb.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport {\n  type ChangeEvent,\n  type Dispatch,\n  type RefObject,\n  type SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport type { SliderProps } from \"../Slider\";\nimport { getClickedPosition, getKeyboardValue } from \"./utils\";\n\ntype UseSliderThumbProps = Pick<SliderProps, \"min\" | \"max\" | \"step\"> & {\n  decimalPlaces: number;\n  handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;\n  inputRef: RefObject<HTMLInputElement>;\n  marks?: { label: string; value: number }[];\n  onChange?: (event: Event, value: number) => void;\n  onChangeEnd?: (event: Event, value: number) => void;\n  restrictToMarks?: boolean;\n  setValue: Dispatch<SetStateAction<number>>;\n  stepMultiplier: number;\n  value: number;\n};\n\nexport const useSliderThumb = ({\n  decimalPlaces,\n  handleInputChange,\n  inputRef,\n  marks,\n  min = 0,\n  max = 10,\n  step = 1,\n  onChange,\n  onChangeEnd,\n  restrictToMarks,\n  setValue,\n  stepMultiplier,\n  value,\n}: UseSliderThumbProps) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [isFocusVisible, setIsFocusVisible] = useState(false);\n  const lastValueRef = useRef<number>(value);\n  const sliderRef = useRef<HTMLDivElement>(null);\n  const targetWindow = useWindow();\n\n  const handlePointerMove = useCallback(\n    (event: PointerEvent) => {\n      if (!sliderRef.current) return;\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      if (newValue === undefined || lastValueRef.current === newValue) {\n        return;\n      }\n      lastValueRef.current = newValue;\n      setValue(newValue);\n      onChange?.(event, newValue);\n    },\n    [decimalPlaces, marks, max, min, onChange, setValue, restrictToMarks, step],\n  );\n\n  const handleDragEnd = useCallback(\n    (event: Event) => {\n      setIsDragging(false);\n      setIsFocusVisible(false);\n      onChangeEnd?.(event, lastValueRef.current);\n    },\n    [onChangeEnd],\n  );\n\n  useEffect(() => {\n    if (isDragging) {\n      targetWindow?.addEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.addEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.addEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.addEventListener(\"blur\", handleDragEnd);\n      targetWindow?.addEventListener(\"contextmenu\", handleDragEnd);\n    } else {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n      targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n    }\n\n    return () => {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n      targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n    };\n  }, [isDragging, targetWindow, handlePointerMove, handleDragEnd]);\n\n  const handlePointerDownOnThumb = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n      if (inputRef.current) inputRef.current.focus();\n      setIsDragging(true);\n      setIsFocusVisible(false);\n    },\n    [inputRef],\n  );\n\n  const handlePointerDownOnTrack = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      if (inputRef.current) inputRef.current.focus();\n      setIsDragging(true);\n      setIsFocusVisible(false);\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      if (newValue === undefined || lastValueRef.current === newValue) {\n        return;\n      }\n      lastValueRef.current = newValue;\n      setValue(newValue);\n      onChange?.(event.nativeEvent, newValue);\n    },\n    [\n      decimalPlaces,\n      inputRef,\n      marks,\n      max,\n      min,\n      onChange,\n      restrictToMarks,\n      setValue,\n      step,\n    ],\n  );\n\n  const handleKeydownOnThumb = useCallback(\n    (event: React.KeyboardEvent) => {\n      const newValue = getKeyboardValue(\n        event,\n        value,\n        step,\n        stepMultiplier,\n        max,\n        min,\n        restrictToMarks,\n        marks,\n      );\n      if (newValue === undefined || lastValueRef.current === newValue) {\n        return;\n      }\n      setIsFocusVisible(true);\n      lastValueRef.current = newValue;\n      handleInputChange({\n        target: { value: newValue.toString() },\n      } as ChangeEvent<HTMLInputElement>);\n    },\n    [\n      value,\n      step,\n      stepMultiplier,\n      max,\n      min,\n      restrictToMarks,\n      marks,\n      handleInputChange,\n    ],\n  );\n\n  const handleFocus = () => setIsFocusVisible(true);\n  const handleBlur = () => setIsFocusVisible(false);\n\n  return {\n    handleBlur,\n    handleFocus,\n    handleKeydownOnThumb,\n    handlePointerDownOnThumb,\n    handlePointerDownOnTrack,\n    isDragging,\n    isFocusVisible,\n    sliderRef,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/tag/Tag.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltTag {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  min-height: var(--salt-text-minHeight);\n  display: flex;\n  column-gap: var(--salt-spacing-50);\n  align-items: center;\n  padding: var(--salt-spacing-25) var(--salt-spacing-100);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  overflow: hidden;\n  border-radius: var(--saltTag-borderRadius, var(--salt-palette-corner-strongest, 9999px));\n  width: fit-content;\n  min-width: max-content;\n  box-sizing: border-box;\n}\n.saltTag-primary {\n  background: var(--tag-primary-background, var(--salt-category-1-subtle-background));\n  color: var(--tag-primary-foreground, var(--salt-category-1-subtle-foreground));\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n}\n.saltTag-bordered {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--tag-primary-borderColor, var(--salt-category-1-subtle-borderColor));\n}\n.saltTag-secondary {\n  background: var(--tag-secondary-background, var(--salt-category-1-bold-background));\n  color: var(--tag-secondary-foreground, var(--salt-category-1-bold-foreground));\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n}\n\n.saltTag-category-1 {\n  --tag-primary-background: var(--salt-category-1-subtle-background);\n  --tag-primary-foreground: var(--salt-category-1-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-1-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-1-bold-background);\n  --tag-secondary-foreground: var(--salt-category-1-bold-foreground);\n}\n.saltTag-category-2 {\n  --tag-primary-background: var(--salt-category-2-subtle-background);\n  --tag-primary-foreground: var(--salt-category-2-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-2-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-2-bold-background);\n  --tag-secondary-foreground: var(--salt-category-2-bold-foreground);\n}\n\n.saltTag-category-3 {\n  --tag-primary-background: var(--salt-category-3-subtle-background);\n  --tag-primary-foreground: var(--salt-category-3-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-3-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-3-bold-background);\n  --tag-secondary-foreground: var(--salt-category-3-bold-foreground);\n}\n\n.saltTag-category-4 {\n  --tag-primary-background: var(--salt-category-4-subtle-background);\n  --tag-primary-foreground: var(--salt-category-4-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-4-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-4-bold-background);\n  --tag-secondary-foreground: var(--salt-category-4-bold-foreground);\n}\n\n.saltTag-category-5 {\n  --tag-primary-background: var(--salt-category-5-subtle-background);\n  --tag-primary-foreground: var(--salt-category-5-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-5-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-5-bold-background);\n  --tag-secondary-foreground: var(--salt-category-5-bold-foreground);\n}\n\n.saltTag-category-6 {\n  --tag-primary-background: var(--salt-category-6-subtle-background);\n  --tag-primary-foreground: var(--salt-category-6-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-6-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-6-bold-background);\n  --tag-secondary-foreground: var(--salt-category-6-bold-foreground);\n}\n\n.saltTag-category-7 {\n  --tag-primary-background: var(--salt-category-7-subtle-background);\n  --tag-primary-foreground: var(--salt-category-7-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-7-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-7-bold-background);\n  --tag-secondary-foreground: var(--salt-category-7-bold-foreground);\n}\n\n.saltTag-category-8 {\n  --tag-primary-background: var(--salt-category-8-subtle-background);\n  --tag-primary-foreground: var(--salt-category-8-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-8-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-8-bold-background);\n  --tag-secondary-foreground: var(--salt-category-8-bold-foreground);\n}\n\n.saltTag-category-9 {\n  --tag-primary-background: var(--salt-category-9-subtle-background);\n  --tag-primary-foreground: var(--salt-category-9-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-9-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-9-bold-background);\n  --tag-secondary-foreground: var(--salt-category-9-bold-foreground);\n}\n\n.saltTag-category-10 {\n  --tag-primary-background: var(--salt-category-10-subtle-background);\n  --tag-primary-foreground: var(--salt-category-10-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-10-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-10-bold-background);\n  --tag-secondary-foreground: var(--salt-category-10-bold-foreground);\n}\n.saltTag-category-11 {\n  --tag-primary-background: var(--salt-category-11-subtle-background);\n  --tag-primary-foreground: var(--salt-category-11-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-11-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-11-bold-background);\n  --tag-secondary-foreground: var(--salt-category-11-bold-foreground);\n}\n.saltTag-category-12 {\n  --tag-primary-background: var(--salt-category-12-subtle-background);\n  --tag-primary-foreground: var(--salt-category-12-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-12-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-12-bold-background);\n  --tag-secondary-foreground: var(--salt-category-12-bold-foreground);\n}\n.saltTag-category-13 {\n  --tag-primary-background: var(--salt-category-13-subtle-background);\n  --tag-primary-foreground: var(--salt-category-13-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-13-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-13-bold-background);\n  --tag-secondary-foreground: var(--salt-category-13-bold-foreground);\n}\n.saltTag-category-14 {\n  --tag-primary-background: var(--salt-category-14-subtle-background);\n  --tag-primary-foreground: var(--salt-category-14-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-14-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-14-bold-background);\n  --tag-secondary-foreground: var(--salt-category-14-bold-foreground);\n}\n.saltTag-category-15 {\n  --tag-primary-background: var(--salt-category-15-subtle-background);\n  --tag-primary-foreground: var(--salt-category-15-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-15-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-15-bold-background);\n  --tag-secondary-foreground: var(--salt-category-15-bold-foreground);\n}\n.saltTag-category-16 {\n  --tag-primary-background: var(--salt-category-16-subtle-background);\n  --tag-primary-foreground: var(--salt-category-16-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-16-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-16-bold-background);\n  --tag-secondary-foreground: var(--salt-category-16-bold-foreground);\n}\n.saltTag-category-17 {\n  --tag-primary-background: var(--salt-category-17-subtle-background);\n  --tag-primary-foreground: var(--salt-category-17-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-17-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-17-bold-background);\n  --tag-secondary-foreground: var(--salt-category-17-bold-foreground);\n}\n.saltTag-category-18 {\n  --tag-primary-background: var(--salt-category-18-subtle-background);\n  --tag-primary-foreground: var(--salt-category-18-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-18-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-18-bold-background);\n  --tag-secondary-foreground: var(--salt-category-18-bold-foreground);\n}\n.saltTag-category-19 {\n  --tag-primary-background: var(--salt-category-19-subtle-background);\n  --tag-primary-foreground: var(--salt-category-19-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-19-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-19-bold-background);\n  --tag-secondary-foreground: var(--salt-category-19-bold-foreground);\n}\n.saltTag-category-20 {\n  --tag-primary-background: var(--salt-category-20-subtle-background);\n  --tag-primary-foreground: var(--salt-category-20-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-20-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-20-bold-background);\n  --tag-secondary-foreground: var(--salt-category-20-bold-foreground);\n}\n";
+var css_248z = ".saltTag {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  min-height: var(--salt-text-minHeight);\n  display: flex;\n  column-gap: var(--salt-spacing-50);\n  align-items: center;\n  padding: var(--salt-spacing-25) var(--salt-spacing-100);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  overflow: hidden;\n  border-radius: var(--saltTag-borderRadius, var(--salt-palette-corner-strongest, 9999px));\n  width: fit-content;\n  min-width: max-content;\n  box-sizing: border-box;\n}\n.saltTag-primary {\n  background: var(--tag-primary-background, var(--salt-category-1-subtle-background));\n  color: var(--tag-primary-foreground, var(--salt-category-1-subtle-foreground));\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n}\n.saltTag-bordered {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--tag-primary-borderColor, var(--salt-category-1-subtle-borderColor));\n}\n.saltTag-secondary {\n  background: var(--tag-secondary-background, var(--salt-category-1-bold-background));\n  color: var(--salt-content-bold-foreground);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n}\n\n.saltTag-category-1 {\n  --tag-primary-background: var(--salt-category-1-subtle-background);\n  --tag-primary-foreground: var(--salt-category-1-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-1-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-1-bold-background);\n}\n.saltTag-category-2 {\n  --tag-primary-background: var(--salt-category-2-subtle-background);\n  --tag-primary-foreground: var(--salt-category-2-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-2-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-2-bold-background);\n}\n\n.saltTag-category-3 {\n  --tag-primary-background: var(--salt-category-3-subtle-background);\n  --tag-primary-foreground: var(--salt-category-3-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-3-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-3-bold-background);\n}\n\n.saltTag-category-4 {\n  --tag-primary-background: var(--salt-category-4-subtle-background);\n  --tag-primary-foreground: var(--salt-category-4-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-4-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-4-bold-background);\n}\n\n.saltTag-category-5 {\n  --tag-primary-background: var(--salt-category-5-subtle-background);\n  --tag-primary-foreground: var(--salt-category-5-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-5-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-5-bold-background);\n}\n\n.saltTag-category-6 {\n  --tag-primary-background: var(--salt-category-6-subtle-background);\n  --tag-primary-foreground: var(--salt-category-6-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-6-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-6-bold-background);\n}\n\n.saltTag-category-7 {\n  --tag-primary-background: var(--salt-category-7-subtle-background);\n  --tag-primary-foreground: var(--salt-category-7-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-7-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-7-bold-background);\n}\n\n.saltTag-category-8 {\n  --tag-primary-background: var(--salt-category-8-subtle-background);\n  --tag-primary-foreground: var(--salt-category-8-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-8-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-8-bold-background);\n}\n\n.saltTag-category-9 {\n  --tag-primary-background: var(--salt-category-9-subtle-background);\n  --tag-primary-foreground: var(--salt-category-9-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-9-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-9-bold-background);\n}\n\n.saltTag-category-10 {\n  --tag-primary-background: var(--salt-category-10-subtle-background);\n  --tag-primary-foreground: var(--salt-category-10-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-10-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-10-bold-background);\n}\n.saltTag-category-11 {\n  --tag-primary-background: var(--salt-category-11-subtle-background);\n  --tag-primary-foreground: var(--salt-category-11-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-11-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-11-bold-background);\n}\n.saltTag-category-12 {\n  --tag-primary-background: var(--salt-category-12-subtle-background);\n  --tag-primary-foreground: var(--salt-category-12-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-12-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-12-bold-background);\n}\n.saltTag-category-13 {\n  --tag-primary-background: var(--salt-category-13-subtle-background);\n  --tag-primary-foreground: var(--salt-category-13-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-13-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-13-bold-background);\n}\n.saltTag-category-14 {\n  --tag-primary-background: var(--salt-category-14-subtle-background);\n  --tag-primary-foreground: var(--salt-category-14-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-14-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-14-bold-background);\n}\n.saltTag-category-15 {\n  --tag-primary-background: var(--salt-category-15-subtle-background);\n  --tag-primary-foreground: var(--salt-category-15-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-15-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-15-bold-background);\n}\n.saltTag-category-16 {\n  --tag-primary-background: var(--salt-category-16-subtle-background);\n  --tag-primary-foreground: var(--salt-category-16-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-16-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-16-bold-background);\n}\n.saltTag-category-17 {\n  --tag-primary-background: var(--salt-category-17-subtle-background);\n  --tag-primary-foreground: var(--salt-category-17-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-17-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-17-bold-background);\n}\n.saltTag-category-18 {\n  --tag-primary-background: var(--salt-category-18-subtle-background);\n  --tag-primary-foreground: var(--salt-category-18-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-18-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-18-bold-background);\n}\n.saltTag-category-19 {\n  --tag-primary-background: var(--salt-category-19-subtle-background);\n  --tag-primary-foreground: var(--salt-category-19-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-19-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-19-bold-background);\n}\n.saltTag-category-20 {\n  --tag-primary-background: var(--salt-category-20-subtle-background);\n  --tag-primary-foreground: var(--salt-category-20-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-20-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-20-bold-background);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Tag.css.js.map

package/dist-es/toggle-button/ToggleButton.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltToggleButton {\n  --toggleButton-borderWidth: var(--salt-size-fixed-100);\n\n  align-items: center;\n  appearance: none;\n  background: var(--toggleButton-background);\n  border-color: var(--toggleButton-borderColor, transparent);\n  border-style: solid;\n  border-width: var(--toggleButton-borderWidth);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  box-sizing: border-box;\n  color: var(--toggleButton-text-color);\n  cursor: var(--salt-cursor-hover);\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  justify-content: center;\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-action-fontWeight);\n  font-family: var(--salt-text-action-fontFamily);\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  text-transform: var(--salt-text-action-textTransform);\n  padding: 0 calc(var(--salt-spacing-100) - var(--toggleButton-borderWidth));\n  margin: 0;\n  min-width: unset;\n  position: relative;\n  text-align: var(--salt-text-action-textAlign);\n  text-decoration: none;\n  transition: none;\n  width: auto;\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.saltToggleButton:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--toggleButton-background-hover);\n  color: var(--toggleButton-text-color-hover);\n  border-color: var(--toggleButton-borderColor-hover);\n}\n\n@media (hover: hover) {\n  .saltToggleButton:hover {\n    background: var(--toggleButton-background-hover);\n    color: var(--toggleButton-text-color-hover);\n    border-color: var(--toggleButton-borderColor-hover);\n  }\n}\n\n.saltToggleButton:active {\n  background: var(--toggleButton-background-active);\n  color: var(--toggleButton-text-color-active);\n  border-color: var(--toggleButton-borderColor-active);\n}\n\n.saltToggleButton[aria-checked=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"] {\n  background: var(--toggleButton-background-selected);\n  color: var(--toggleButton-text-color-selected);\n  cursor: var(--salt-cursor-active);\n  border-color: var(--toggleButton-borderColor-selected);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:hover {\n  cursor: unset;\n}\n\n.saltToggleButton[aria-pressed=\"true\"]:hover {\n  border-color: var(--toggleButton-borderColor-selectedHover);\n}\n\n.saltToggleButton[aria-disabled=\"true\"] {\n  background: var(--toggleButton-background);\n  color: var(--toggleButton-text-color);\n  cursor: var(--salt-cursor-disabled);\n  border-color: var(--toggleButton-borderColor);\n\n  opacity: 0.4;\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton[aria-disabled=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton[aria-disabled=\"true\"] {\n  background: var(--toggleButton-background-selected);\n  color: var(--toggleButton-text-color-selected);\n  border-color: var(--toggleButton-borderColor-selected);\n}\n\n.saltToggleButton.saltToggleButton-readOnly {\n  background: var(--toggleButton-background);\n  color: var(--toggleButton-text-color);\n  cursor: var(--salt-cursor-disabled);\n  border-color: var(--toggleButton-borderColor);\n\n  opacity: 0.4;\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton-readOnly,\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton-readOnly {\n  background: var(--toggleButton-background-selected);\n  color: var(--toggleButton-text-color-selected);\n  border-color: var(--toggleButton-borderColor-selected);\n\n  opacity: unset;\n}\n\n.saltToggleButton-neutral.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-subtle-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-subtle-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-bold-borderColor-hover);\n}\n\n.saltToggleButton-accented.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-accented-subtle-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-accented-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-accented-bold-borderColor-hover);\n}\n\n.saltToggleButton-positive.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-positive-subtle-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-positive-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-positive-bold-borderColor-hover);\n}\n\n.saltToggleButton-negative.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-negative-subtle-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-negative-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-negative-bold-borderColor-hover);\n}\n\n.saltToggleButton-caution.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-caution-subtle-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-caution-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-caution-bold-borderColor-hover);\n}\n\n.saltToggleButton-neutral.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-foreground);\n  --toggleButton-text-color-selected: var(--salt-actionable-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-background);\n  --toggleButton-background-hover: var(--salt-actionable-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-background);\n  --toggleButton-background-selected: var(--salt-actionable-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-borderColor);\n  --toggleButton-borderColor-active: var(--salt-actionable-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-bold-borderColor-hover);\n}\n\n.saltToggleButton-accented.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-accented-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-accented-foreground);\n  --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-accented-background);\n  --toggleButton-background-hover: var(--salt-actionable-accented-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-accented-background);\n  --toggleButton-background-selected: var(--salt-actionable-accented-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-accented-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-accented-borderColor);\n  --toggleButton-borderColor-active: var(--salt-actionable-accented-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-accented-bold-borderColor-hover);\n}\n\n.saltToggleButton-positive.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-positive-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-positive-foreground);\n  --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-positive-background);\n  --toggleButton-background-hover: var(--salt-actionable-positive-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-positive-background);\n  --toggleButton-background-selected: var(--salt-actionable-positive-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-positive-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-positive-borderColor);\n  --toggleButton-borderColor-active: var(--salt-actionable-positive-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-positive-bold-borderColor-hover);\n}\n\n.saltToggleButton-negative.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-negative-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-negative-foreground);\n  --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-negative-background);\n  --toggleButton-background-hover: var(--salt-actionable-negative-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-negative-background);\n  --toggleButton-background-selected: var(--salt-actionable-negative-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-negative-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-negative-borderColor);\n  --toggleButton-borderColor-active: var(--salt-actionable-negative-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-negative-bold-borderColor-hover);\n}\n\n.saltToggleButton-caution.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-caution-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-caution-foreground);\n  --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-caution-background);\n  --toggleButton-background-hover: var(--salt-actionable-caution-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-caution-background);\n  --toggleButton-background-selected: var(--salt-actionable-caution-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-caution-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-caution-borderColor);\n  --toggleButton-borderColor-active: var(--salt-actionable-caution-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-caution-bold-borderColor-hover);\n}\n";
+var css_248z = ".saltToggleButton {\n  --toggleButton-borderWidth: var(--salt-size-fixed-100);\n\n  align-items: center;\n  appearance: none;\n  background: var(--toggleButton-background);\n  border-color: var(--toggleButton-borderColor, transparent);\n  border-style: solid;\n  border-width: var(--toggleButton-borderWidth);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  box-sizing: border-box;\n  color: var(--toggleButton-text-color);\n  cursor: var(--salt-cursor-hover);\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  justify-content: center;\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-action-fontWeight);\n  font-family: var(--salt-text-action-fontFamily);\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  text-transform: var(--salt-text-action-textTransform);\n  padding: 0 calc(var(--salt-spacing-100) - var(--toggleButton-borderWidth));\n  margin: 0;\n  min-width: unset;\n  position: relative;\n  text-align: var(--salt-text-action-textAlign);\n  text-decoration: none;\n  transition: none;\n  width: auto;\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.saltToggleButton:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--toggleButton-background-hover);\n  color: var(--toggleButton-text-color-hover);\n  border-color: var(--toggleButton-borderColor-hover);\n}\n\n@media (hover: hover) {\n  .saltToggleButton:hover {\n    background: var(--toggleButton-background-hover);\n    color: var(--toggleButton-text-color-hover);\n    border-color: var(--toggleButton-borderColor-hover);\n  }\n}\n\n.saltToggleButton:active {\n  background: var(--toggleButton-background-active);\n  color: var(--toggleButton-text-color-active);\n  border-color: var(--toggleButton-borderColor-active);\n}\n\n.saltToggleButton[aria-checked=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"] {\n  background: var(--toggleButton-background-selected);\n  color: var(--toggleButton-text-color-selected);\n  cursor: var(--salt-cursor-active);\n  border-color: var(--toggleButton-borderColor-selected);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:hover {\n  cursor: unset;\n}\n\n.saltToggleButton[aria-pressed=\"true\"]:hover {\n  background: var(--toggleButton-background-selectedHover);\n  border-color: var(--toggleButton-borderColor-selectedHover);\n}\n\n.saltToggleButton[aria-disabled=\"true\"] {\n  background: var(--toggleButton-background);\n  color: var(--toggleButton-text-color);\n  cursor: var(--salt-cursor-disabled);\n  border-color: var(--toggleButton-borderColor);\n\n  opacity: 0.4;\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton[aria-disabled=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton[aria-disabled=\"true\"] {\n  background: var(--toggleButton-background-selected);\n  color: var(--toggleButton-text-color-selected);\n  border-color: var(--toggleButton-borderColor-selected);\n}\n\n.saltToggleButton.saltToggleButton-readOnly {\n  background: var(--toggleButton-background);\n  color: var(--toggleButton-text-color);\n  cursor: var(--salt-cursor-disabled);\n  border-color: var(--toggleButton-borderColor);\n\n  opacity: 0.4;\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton-readOnly,\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton-readOnly {\n  background: var(--toggleButton-background-selected);\n  color: var(--toggleButton-text-color-selected);\n  border-color: var(--toggleButton-borderColor-selected);\n\n  opacity: unset;\n}\n\n.saltToggleButton-neutral.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-subtle-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-subtle-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-bold-background-hover);\n}\n\n.saltToggleButton-accented.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-accented-subtle-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-accented-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-accented-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-accented-bold-background-hover);\n}\n\n.saltToggleButton-positive.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-positive-subtle-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-positive-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-positive-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-accented-bold-background-hover);\n}\n\n.saltToggleButton-negative.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-negative-subtle-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-negative-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-negative-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-negative-bold-background-hover);\n}\n\n.saltToggleButton-caution.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-caution-subtle-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-caution-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-caution-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-caution-bold-background-hover);\n}\n\n.saltToggleButton-neutral.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-foreground);\n  --toggleButton-text-color-selected: var(--salt-actionable-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-background);\n  --toggleButton-background-hover: var(--salt-actionable-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-background);\n  --toggleButton-background-selected: var(--salt-actionable-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-borderColor);\n  --toggleButton-borderColor-active: var(--salt-actionable-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-bold-background-hover);\n}\n\n.saltToggleButton-accented.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-accented-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-accented-foreground);\n  --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-accented-background);\n  --toggleButton-background-hover: var(--salt-actionable-accented-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-accented-background);\n  --toggleButton-background-selected: var(--salt-actionable-accented-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-accented-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-accented-borderColor);\n  --toggleButton-borderColor-active: var(--salt-actionable-accented-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-accented-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-accented-bold-background-hover);\n}\n\n.saltToggleButton-positive.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-positive-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-positive-foreground);\n  --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-positive-background);\n  --toggleButton-background-hover: var(--salt-actionable-positive-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-positive-background);\n  --toggleButton-background-selected: var(--salt-actionable-positive-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-positive-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-positive-borderColor);\n  --toggleButton-borderColor-active: var(--salt-actionable-positive-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-positive-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-positive-bold-background-hover);\n}\n\n.saltToggleButton-negative.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-negative-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-negative-foreground);\n  --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-negative-background);\n  --toggleButton-background-hover: var(--salt-actionable-negative-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-negative-background);\n  --toggleButton-background-selected: var(--salt-actionable-negative-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-negative-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-negative-borderColor);\n  --toggleButton-borderColor-active: var(--salt-actionable-negative-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-negative-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-negative-bold-background-hover);\n}\n\n.saltToggleButton-caution.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-caution-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-caution-foreground);\n  --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-caution-background);\n  --toggleButton-background-hover: var(--salt-actionable-caution-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-caution-background);\n  --toggleButton-background-selected: var(--salt-actionable-caution-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-caution-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-caution-borderColor);\n  --toggleButton-borderColor-active: var(--salt-actionable-caution-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-caution-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-caution-bold-background-hover);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=ToggleButton.css.js.map

package/dist-types/menu/MenuContext.d.ts

@@ -10,6 +10,8 @@ export interface MenuContextValue extends Pick<UseInteractionsReturn, "getItemPr
     focusInside: boolean;
     setFocusInside: Dispatch<SetStateAction<boolean>>;
     isNested: boolean;
+    triggerDisabled: boolean;
+    setTriggerDisabled: (disabled: boolean) => void;
 }
 export declare const MenuContext: import("react").Context<MenuContextValue>;
 export declare function useMenuContext(): MenuContextValue;

package/dist-types/number-input/internal/useLongPressPointerAction.d.ts

@@ -0,0 +1,2 @@
+import { type PointerEvent } from "react";
+export declare function useLongPressPointerAction(actionFn: (event?: PointerEvent) => void, isAtLimit: boolean): (event: PointerEvent) => void;

package/dist-types/pill/Pill.d.ts

@@ -1,4 +1,5 @@
 import { type ComponentPropsWithoutRef } from "react";
 export interface PillProps extends ComponentPropsWithoutRef<"button"> {
+    value?: string;
 }
 export declare const Pill: import("react").ForwardRefExoticComponent<PillProps & import("react").RefAttributes<HTMLButtonElement>>;