@salt-ds/core 1.43.0 → 1.44.1

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

@@ -0,0 +1,119 @@
+const toFloat = (value) => typeof value === "string" ? Number.parseFloat(value) : value;
+const calculateMarkPosition = (value, max, min) => {
+  if (min === max) {
+    return 0;
+  }
+  const clampedValue = Number.isNaN(toFloat(value)) ? min : Math.min(Math.max(toFloat(value), min), max);
+  const markPosition = (clampedValue - min) / (max - min) * 100;
+  return Math.round(markPosition * 100) / 100;
+};
+const calculatePercentage = (value, max, min) => (value - min) / (max - min) * 100;
+const clamp = (value, max, min, step, decimalPlaces, marks, restrictToMarks) => {
+  if (Number.isNaN(value)) {
+    return min;
+  }
+  const clampedValue = Math.min(Math.max(value, min), max);
+  if (restrictToMarks && marks) {
+    let closestMark = marks[0].value;
+    let smallestDifference = Math.abs(clampedValue - closestMark);
+    for (let i = 1; i < marks.length; i++) {
+      const currentDifference = Math.abs(clampedValue - marks[i].value);
+      if (currentDifference < smallestDifference) {
+        smallestDifference = currentDifference;
+        closestMark = marks[i].value;
+      }
+    }
+    return closestMark;
+  }
+  let roundedValue = Math.round(clampedValue / step) * step;
+  if (roundedValue > max) {
+    roundedValue = max;
+  } else if (roundedValue < min) {
+    roundedValue = min;
+  }
+  return Number.parseFloat(roundedValue.toFixed(decimalPlaces));
+};
+const clampRange = (range, max, min, step, decimalPlaces, marks, restrictToMarks) => {
+  let [start, end] = range;
+  if (Number.isNaN(start)) {
+    start = min;
+  }
+  if (Number.isNaN(end)) {
+    end = max;
+  }
+  if (start > end) {
+    [start, end] = [end, start];
+  }
+  start = clamp(start, max, min, step, decimalPlaces, marks, restrictToMarks);
+  end = clamp(end, max, min, step, decimalPlaces, marks, restrictToMarks);
+  return [start, end];
+};
+const getClickedPosition = (sliderRef, clientX, max, min, step, decimalPlaces, marks, restrictToMarks) => {
+  if (!sliderRef.current) return;
+  const sliderRect = sliderRef.current.getBoundingClientRect();
+  const rawValue = (clientX - sliderRect.left) / sliderRect.width * (max - min) + min;
+  const steppedValue = Math.round(rawValue / step) * step;
+  return clamp(
+    steppedValue,
+    max,
+    min,
+    step,
+    decimalPlaces,
+    marks,
+    restrictToMarks
+  );
+};
+const getKeyboardValue = (event, value, step, stepMultiplier, max, min, restrictToMarks, marks) => {
+  let newValue = value;
+  if (restrictToMarks && marks && marks.length >= 1) {
+    const currentIndex = marks.findIndex((mark) => mark.value === value);
+    switch (event.key) {
+      case "ArrowUp":
+      case "ArrowRight":
+      case "PageUp":
+        if (currentIndex < marks.length - 1) {
+          newValue = marks[currentIndex + 1].value;
+        }
+        break;
+      case "ArrowDown":
+      case "ArrowLeft":
+      case "PageDown":
+        if (currentIndex > 0) {
+          newValue = marks[currentIndex - 1].value;
+        }
+        break;
+      default:
+        return newValue;
+    }
+  } else {
+    switch (event.key) {
+      case "ArrowUp":
+      case "ArrowRight":
+        newValue = Math.min(value + step, max);
+        break;
+      case "ArrowDown":
+      case "ArrowLeft":
+        newValue = Math.max(value - step, min);
+        break;
+      case "Home":
+        newValue = min;
+        break;
+      case "End":
+        newValue = max;
+        break;
+      case "PageUp":
+        newValue = Math.min(value + step * stepMultiplier, max);
+        break;
+      case "PageDown":
+        newValue = Math.max(value - step * stepMultiplier, min);
+        break;
+      default:
+        return newValue;
+    }
+  }
+  event.preventDefault();
+  return newValue;
+};
+
+export { calculateMarkPosition, calculatePercentage, clamp, clampRange, getClickedPosition, getKeyboardValue, toFloat };
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../src/slider/internal/utils.ts"],"sourcesContent":["import type { RefObject } from \"react\";\n\nexport const toFloat = (value: number | string) =>\n  typeof value === \"string\" ? Number.parseFloat(value) : value;\n\nexport const calculateMarkPosition = (\n  value: number | string,\n  max: number,\n  min: number,\n) => {\n  if (min === max) {\n    return 0;\n  }\n  const clampedValue = Number.isNaN(toFloat(value))\n    ? min\n    : Math.min(Math.max(toFloat(value), min), max);\n  const markPosition = ((clampedValue - min) / (max - min)) * 100;\n  return Math.round(markPosition * 100) / 100;\n};\n\nexport const calculatePercentage = (value: number, max: number, min: number) =>\n  ((value - min) / (max - min)) * 100;\n\nexport const clamp = (\n  value: number,\n  max: number,\n  min: number,\n  step: number,\n  decimalPlaces: number,\n  marks?: { value: number; label: string }[],\n  restrictToMarks?: boolean,\n) => {\n  if (Number.isNaN(value)) {\n    return min;\n  }\n  // Clamp the value between min and max\n  const clampedValue = Math.min(Math.max(value, min), max);\n  if (restrictToMarks && marks) {\n    // Find the closest mark value\n    let closestMark = marks[0].value;\n    let smallestDifference = Math.abs(clampedValue - closestMark);\n    for (let i = 1; i < marks.length; i++) {\n      const currentDifference = Math.abs(clampedValue - marks[i].value);\n      if (currentDifference < smallestDifference) {\n        smallestDifference = currentDifference;\n        closestMark = marks[i].value;\n      }\n    }\n    return closestMark;\n  }\n  // Round to the nearest multiple of the step\n  let roundedValue = Math.round(clampedValue / step) * step;\n  // Ensure the rounded value does not exceed max or min\n  if (roundedValue > max) {\n    roundedValue = max;\n  } else if (roundedValue < min) {\n    roundedValue = min;\n  }\n  return Number.parseFloat(roundedValue.toFixed(decimalPlaces));\n};\n\nexport const clampRange = (\n  range: [number, number],\n  max: number,\n  min: number,\n  step: number,\n  decimalPlaces: number,\n  marks?: { value: number; label: string }[],\n  restrictToMarks?: boolean,\n) => {\n  let [start, end] = range;\n\n  if (Number.isNaN(start)) {\n    start = min;\n  }\n  if (Number.isNaN(end)) {\n    end = max;\n  }\n  if (start > end) {\n    [start, end] = [end, start];\n  }\n  start = clamp(start, max, min, step, decimalPlaces, marks, restrictToMarks);\n  end = clamp(end, max, min, step, decimalPlaces, marks, restrictToMarks);\n  return [start, end] as [number, number];\n};\n\nexport const getClickedPosition = (\n  sliderRef: RefObject<HTMLDivElement>,\n  clientX: number,\n  max: number,\n  min: number,\n  step: number,\n  decimalPlaces: number,\n  marks?: { label: string; value: number }[],\n  restrictToMarks?: boolean,\n) => {\n  if (!sliderRef.current) return;\n\n  const sliderRect = sliderRef.current.getBoundingClientRect();\n  const rawValue =\n    ((clientX - sliderRect.left) / sliderRect.width) * (max - min) + min;\n  const steppedValue = Math.round(rawValue / step) * step;\n  return clamp(\n    steppedValue,\n    max,\n    min,\n    step,\n    decimalPlaces,\n    marks,\n    restrictToMarks,\n  );\n};\n\nexport const getKeyboardValue = (\n  event: React.KeyboardEvent,\n  value: number,\n  step: number,\n  stepMultiplier: number,\n  max: number,\n  min: number,\n  restrictToMarks?: boolean,\n  marks?: { label: string; value: number }[],\n) => {\n  let newValue = value;\n\n  if (restrictToMarks && marks && marks.length >= 1) {\n    const currentIndex = marks.findIndex((mark) => mark.value === value);\n\n    switch (event.key) {\n      case \"ArrowUp\":\n      case \"ArrowRight\":\n      case \"PageUp\":\n        if (currentIndex < marks.length - 1) {\n          newValue = marks[currentIndex + 1].value;\n        }\n        break;\n      case \"ArrowDown\":\n      case \"ArrowLeft\":\n      case \"PageDown\":\n        if (currentIndex > 0) {\n          newValue = marks[currentIndex - 1].value;\n        }\n        break;\n      default:\n        return newValue;\n    }\n  } else {\n    switch (event.key) {\n      case \"ArrowUp\":\n      case \"ArrowRight\":\n        newValue = Math.min(value + step, max);\n        break;\n      case \"ArrowDown\":\n      case \"ArrowLeft\":\n        newValue = Math.max(value - step, min);\n        break;\n      case \"Home\":\n        newValue = min;\n        break;\n      case \"End\":\n        newValue = max;\n        break;\n      case \"PageUp\":\n        newValue = Math.min(value + step * stepMultiplier, max);\n        break;\n      case \"PageDown\":\n        newValue = Math.max(value - step * stepMultiplier, min);\n        break;\n      default:\n        return newValue;\n    }\n  }\n\n  event.preventDefault();\n  return newValue;\n};\n"],"names":[],"mappings":"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"}

package/dist-es/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../src/switch/Switch.tsx"],"sourcesContent":["import {\n  type IconProps,\n  SuccessSmallSolidIcon,\n  SuccessSolidIcon,\n} from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  type ComponentPropsWithoutRef,\n  type FocusEventHandler,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useDensity } from \"../salt-provider\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled } from \"../utils\";\n\nimport switchCss from \"./Switch.css\";\n\nexport interface SwitchProps\n  extends Omit<\n    ComponentPropsWithoutRef<\"label\">,\n    \"children\" | \"onFocus\" | \"onBlur\" | \"onChange\"\n  > {\n  /**\n   * If `true`, the checkbox will be checked.\n   */\n  checked?: boolean;\n  /**\n   * Whether the checkbox component is checked by default\n   * This will be disregarded if checked is already set.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true`, the checkbox will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Properties applied to the input element.\n   */\n  inputProps?: Partial<ComponentPropsWithoutRef<\"input\">> & DataAttributes;\n  /**\n   * The label to be shown next to the checkbox.\n   */\n  label?: ReactNode;\n  /**\n   * The name applied to the input.\n   */\n  name?: string;\n  /**\n   * Callback when checkbox loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback when checked state is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Callback when checkbox gains focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * The value of the checkbox.\n   */\n  value?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltSwitch\");\n\nfunction CheckedIcon(props: IconProps) {\n  const density = useDensity();\n  return density === \"high\" ? (\n    <SuccessSmallSolidIcon {...props} />\n  ) : (\n    <SuccessSolidIcon {...props} />\n  );\n}\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n  function Switch(props, ref) {\n    const {\n      checked: checkedProp,\n      className,\n      defaultChecked,\n      disabled: disabledProp,\n      inputProps = {},\n      label,\n      name,\n      onBlur,\n      onChange,\n      onFocus,\n      value,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-switch\",\n      css: switchCss,\n      window: targetWindow,\n    });\n\n    const {\n      \"aria-describedby\": inputDescribedBy,\n      \"aria-labelledby\": inputLabelledBy,\n      className: inputClassName,\n      onChange: inputOnChange,\n      ...restInputProps\n    } = inputProps;\n\n    const [checked, setChecked] = useControlled({\n      controlled: checkedProp,\n      default: Boolean(defaultChecked),\n      name: \"Switch\",\n      state: \"checked\",\n    });\n\n    const { a11yProps: formFieldA11yProps, disabled: formFieldDisabled } =\n      useFormFieldProps();\n\n    const disabled = formFieldDisabled || disabledProp;\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      // Workaround for https://github.com/facebook/react/issues/9023\n      if (event.nativeEvent.defaultPrevented) {\n        return;\n      }\n\n      const value = event.target.checked;\n      setChecked(value);\n      onChange?.(event);\n      inputOnChange?.(event);\n    };\n\n    return (\n      <label\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"checked\")]: checked,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <input\n          aria-describedby={clsx(\n            formFieldA11yProps?.[\"aria-describedby\"],\n            inputDescribedBy,\n          )}\n          aria-labelledby={clsx(\n            formFieldA11yProps?.[\"aria-labelledby\"],\n            inputLabelledBy,\n          )}\n          name={name}\n          value={value}\n          checked={checked}\n          className={clsx(withBaseName(\"input\"), inputClassName)}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          onBlur={onBlur}\n          onChange={handleChange}\n          onFocus={onFocus}\n          type=\"checkbox\"\n          role=\"switch\"\n          {...restInputProps}\n        />\n        <span className={withBaseName(\"track\")}>\n          <span className={withBaseName(\"thumb\")}>\n            {checked && (\n              <CheckedIcon aria-hidden className={withBaseName(\"icon\")} />\n            )}\n          </span>\n        </span>\n        {label && <span className={withBaseName(\"label\")}>{label}</span>}\n      </label>\n    );\n  },\n);\n"],"names":["Switch","switchCss","value"],"mappings":"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"}
+{"version":3,"file":"Switch.js","sources":["../src/switch/Switch.tsx"],"sourcesContent":["import {\n  type IconProps,\n  SuccessSmallSolidIcon,\n  SuccessSolidIcon,\n} from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  type ComponentPropsWithoutRef,\n  type FocusEventHandler,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useDensity } from \"../salt-provider\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled } from \"../utils\";\n\nimport switchCss from \"./Switch.css\";\n\nexport interface SwitchProps\n  extends Omit<\n    ComponentPropsWithoutRef<\"label\">,\n    \"children\" | \"onFocus\" | \"onBlur\" | \"onChange\"\n  > {\n  /**\n   * If `true`, the switch will be checked.\n   */\n  checked?: boolean;\n  /**\n   * Whether the switch component is checked by default\n   * This will be disregarded if checked is already set.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true`, the switch will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Properties applied to the input element.\n   */\n  inputProps?: Partial<ComponentPropsWithoutRef<\"input\">> & DataAttributes;\n  /**\n   * The label to be shown next to the switch.\n   */\n  label?: ReactNode;\n  /**\n   * The name applied to the input.\n   */\n  name?: string;\n  /**\n   * Callback when switch loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback when checked state is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Callback when switch gains focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * The value of the switch.\n   */\n  value?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltSwitch\");\n\nfunction CheckedIcon(props: IconProps) {\n  const density = useDensity();\n  return density === \"high\" ? (\n    <SuccessSmallSolidIcon {...props} />\n  ) : (\n    <SuccessSolidIcon {...props} />\n  );\n}\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n  function Switch(props, ref) {\n    const {\n      checked: checkedProp,\n      className,\n      defaultChecked,\n      disabled: disabledProp,\n      inputProps = {},\n      label,\n      name,\n      onBlur,\n      onChange,\n      onFocus,\n      value,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-switch\",\n      css: switchCss,\n      window: targetWindow,\n    });\n\n    const {\n      \"aria-describedby\": inputDescribedBy,\n      \"aria-labelledby\": inputLabelledBy,\n      className: inputClassName,\n      onChange: inputOnChange,\n      ...restInputProps\n    } = inputProps;\n\n    const [checked, setChecked] = useControlled({\n      controlled: checkedProp,\n      default: Boolean(defaultChecked),\n      name: \"Switch\",\n      state: \"checked\",\n    });\n\n    const { a11yProps: formFieldA11yProps, disabled: formFieldDisabled } =\n      useFormFieldProps();\n\n    const disabled = formFieldDisabled || disabledProp;\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      // Workaround for https://github.com/facebook/react/issues/9023\n      if (event.nativeEvent.defaultPrevented) {\n        return;\n      }\n\n      const value = event.target.checked;\n      setChecked(value);\n      onChange?.(event);\n      inputOnChange?.(event);\n    };\n\n    return (\n      <label\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"checked\")]: checked,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <input\n          aria-describedby={clsx(\n            formFieldA11yProps?.[\"aria-describedby\"],\n            inputDescribedBy,\n          )}\n          aria-labelledby={clsx(\n            formFieldA11yProps?.[\"aria-labelledby\"],\n            inputLabelledBy,\n          )}\n          name={name}\n          value={value}\n          checked={checked}\n          className={clsx(withBaseName(\"input\"), inputClassName)}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          onBlur={onBlur}\n          onChange={handleChange}\n          onFocus={onFocus}\n          type=\"checkbox\"\n          role=\"switch\"\n          {...restInputProps}\n        />\n        <span className={withBaseName(\"track\")}>\n          <span className={withBaseName(\"thumb\")}>\n            {checked && (\n              <CheckedIcon aria-hidden className={withBaseName(\"icon\")} />\n            )}\n          </span>\n        </span>\n        {label && <span className={withBaseName(\"label\")}>{label}</span>}\n      </label>\n    );\n  },\n);\n"],"names":["Switch","switchCss","value"],"mappings":"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"}

package/dist-types/combo-box/useComboBox.d.ts

@@ -26,7 +26,7 @@ export declare function useComboBox<Item>(props: UseComboBoxProps<Item>): {
     getOptionAtIndex: (index: number) => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    };
+    } | undefined;
     getIndexOfOption: (option: OptionValue<Item>) => number;
     getOptionsMatching: (predicate: (option: OptionValue<Item>) => boolean) => {
         data: OptionValue<Item>;
@@ -36,27 +36,27 @@ export declare function useComboBox<Item>(props: UseComboBoxProps<Item>): {
     getOptionAfter: (option: OptionValue<Item>) => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    };
+    } | undefined;
     getOptionBefore: (option: OptionValue<Item>) => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    };
+    } | undefined;
     getOptionPageAbove: (start: OptionValue<Item>) => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    } | null;
+    } | undefined;
     getOptionPageBelow: (start: OptionValue<Item>) => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    } | null;
+    } | undefined;
     getFirstOption: () => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    };
+    } | undefined;
     getLastOption: () => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    };
+    } | undefined;
     valueToString: (item: Item) => string;
     disabled: boolean | undefined;
 };

package/dist-types/index.d.ts

@@ -50,6 +50,7 @@ export * from "./text";
 export * from "./theme";
 export * from "./toast";
 export * from "./salt-provider";
+export * from "./slider";
 export * from "./split-layout";
 export * from "./switch";
 export * from "./tag";

package/dist-types/list-control/ListControlState.d.ts

@@ -65,7 +65,7 @@ export declare function useListControl<Item>(props: ListControlProps<Item>): {
     getOptionAtIndex: (index: number) => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    };
+    } | undefined;
     getIndexOfOption: (option: OptionValue<Item>) => number;
     getOptionsMatching: (predicate: (option: OptionValue<Item>) => boolean) => {
         data: OptionValue<Item>;
@@ -75,27 +75,27 @@ export declare function useListControl<Item>(props: ListControlProps<Item>): {
     getOptionAfter: (option: OptionValue<Item>) => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    };
+    } | undefined;
     getOptionBefore: (option: OptionValue<Item>) => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    };
+    } | undefined;
     getOptionPageAbove: (start: OptionValue<Item>) => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    } | null;
+    } | undefined;
     getOptionPageBelow: (start: OptionValue<Item>) => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    } | null;
+    } | undefined;
     getFirstOption: () => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    };
+    } | undefined;
     getLastOption: () => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    };
+    } | undefined;
     valueToString: (item: Item) => string;
     disabled: boolean | undefined;
 };

package/dist-types/slider/RangeSlider.d.ts

@@ -0,0 +1,99 @@
+import { type HTMLAttributes } from "react";
+export interface RangeSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /**
+     * Accessible text to announce maximum value label.
+     */
+    accessibleMaxText?: string;
+    /**
+     * Accessible text to announce minimum value label.
+     */
+    accessibleMinText?: string;
+    /**
+     * When minimum and maximum labels are defined, ensure
+     * they are confined within the boundary of the slider.
+     */
+    constrainLabelPosition?: boolean;
+    /**
+     * The number of allowed decimal places
+     * @default 2
+     */
+    decimalPlaces?: number;
+    /**
+     * The default value. Use when the component is not controlled.
+     * @default [min, min + (max - min) / 2]
+     */
+    defaultValue?: [number, number];
+    /**
+     * Disable the slider.
+     */
+    disabled?: boolean;
+    /**
+     * Show visual ticks above the marks.
+     */
+    showTicks?: boolean;
+    /**
+     * A callback to format the display value in the tooltip, min and max labels
+     * and the `aria-valuetext` attribute.
+     */
+    format?: (value: number) => string | number;
+    /**
+     * Marks that are displayed under the track.
+     */
+    marks?: {
+        label: string;
+        value: number;
+    }[];
+    /**
+     * Maximum slider value.
+     * @default 10
+     */
+    max?: number;
+    /**
+     * Minimum slider value.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Label for maximum value.
+     */
+    maxLabel?: string;
+    /**
+     * Label for minimum value.
+     */
+    minLabel?: string;
+    /**
+     * Callback called when slider value is changed.
+     * It provides a generic event and the current value of the slider.
+     */
+    onChange?: (event: Event, value: [number, number]) => void;
+    /**
+     * Callback called when the slider is stopped from being dragged or
+     * its value is changed from the keyboard. It provides a generic
+     * event and the current value of the slider.
+     */
+    onChangeEnd?: (event: Event, value: [number, number]) => void;
+    /**
+     * Restrict slider value to marks only. The step will be ignored.
+     */
+    restrictToMarks?: boolean;
+    /**
+     * Show the slider value in a tooltip when the thumb is hovered.
+     * @default true
+     */
+    showTooltip?: boolean;
+    /**
+     * Minimum interval the slider thumb can move.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Maximum interval the slider thumb can move when using PageUp and PageDown keys.
+     * @default 2
+     */
+    stepMultiplier?: number;
+    /**
+     * Value of the slider, to be used when in a controlled state.
+     */
+    value?: [number, number];
+}
+export declare const RangeSlider: import("react").ForwardRefExoticComponent<RangeSliderProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/slider/Slider.d.ts

@@ -0,0 +1,100 @@
+import { type HTMLAttributes } from "react";
+export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /**
+     * Accessible text to announce maximum value label.
+     */
+    accessibleMaxText?: string;
+    /**
+     * Accessible text to announce minimum value label.
+     */
+    accessibleMinText?: string;
+    /**
+     * When minimum and maximum labels are defined, ensure
+     * they are confined within the boundary of the slider.
+     * @default false
+     */
+    constrainLabelPosition?: boolean;
+    /**
+     * The number of allowed decimal places
+     * @default 2
+     */
+    decimalPlaces?: number;
+    /**
+     * The default value. Use when the component is not controlled.
+     * @default min + (max - min) / 2,
+     */
+    defaultValue?: number;
+    /**
+     * Disable the slider.
+     */
+    disabled?: boolean;
+    /**
+     * A callback to format the display value in the tooltip, min and max labels
+     * and the `aria-valuetext` attribute.
+     */
+    format?: (value: number) => string | number;
+    /**
+     * Marks that are displayed under the track.
+     */
+    marks?: {
+        label: string;
+        value: number;
+    }[];
+    /**
+     * Maximum slider value.
+     * @default 10
+     */
+    max?: number;
+    /**
+     * Minimum slider value.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Label for maximum value.
+     */
+    maxLabel?: string;
+    /**
+     * Label for the minimum value.
+     */
+    minLabel?: string;
+    /**
+     * Callback called when slider value is changed.
+     * It provides a generic event and the current value of the slider.
+     */
+    onChange?: (event: Event, value: number) => void;
+    /**
+     * Callback called when the slider is stopped from being dragged or
+     * its value is changed from the keyboard. It provides a generic
+     * event and the current value of the slider.
+     */
+    onChangeEnd?: (event: Event, value: number) => void;
+    /**
+     * Restrict slider value to marks only. The step will be ignored.
+     */
+    restrictToMarks?: boolean;
+    /**
+     * Show visual ticks above the marks.
+     */
+    showTicks?: boolean;
+    /**
+     * Show the slider value in a tooltip when the thumb is hovered.
+     * @default true
+     */
+    showTooltip?: boolean;
+    /**
+     * Minimum interval the slider thumb can move.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Maximum interval the slider thumb can move when using PageUp and PageDown keys.
+     * @default 2
+     */
+    stepMultiplier?: number;
+    /**
+     * Value of the slider, to be used when in a controlled state.
+     */
+    value?: number;
+}
+export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/slider/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Slider";
+export * from "./RangeSlider";

package/dist-types/slider/internal/SliderThumb.d.ts

@@ -0,0 +1,26 @@
+import { type ChangeEvent, type ComponentPropsWithoutRef, type RefObject } from "react";
+interface SliderThumbProps extends Omit<ComponentPropsWithoutRef<"input">, "onChange" | "defaultValue" | "min" | "max"> {
+    accessibleMaxText?: string;
+    accessibleMinText?: string;
+    disabled: boolean;
+    format?: (value: number) => number | string;
+    handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    handleKeydownOnThumb: (event: React.KeyboardEvent) => void;
+    handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
+    index?: number;
+    inputRef?: RefObject<HTMLInputElement>;
+    isFocusVisible: boolean;
+    max: number;
+    maxLabel?: string;
+    min: number;
+    minLabel?: string;
+    offsetPercentage?: string;
+    restrictToMarks?: boolean;
+    showTooltip?: boolean;
+    sliderValue: [number, number] | number;
+    step: number;
+    stepMultiplier: number;
+    trackDragging: boolean;
+}
+export declare const SliderThumb: ({ "aria-label": ariaLabel, "aria-valuetext": ariaValueText, "aria-labelledby": ariaLabelledBy, accessibleMaxText, accessibleMinText, disabled, format, handleInputChange, handleKeydownOnThumb, handlePointerDown, index, inputRef, isFocusVisible, max, maxLabel, min, minLabel, offsetPercentage, restrictToMarks, showTooltip, sliderValue, step, stepMultiplier, trackDragging, ...rest }: SliderThumbProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist-types/slider/internal/SliderTooltip.d.ts

@@ -0,0 +1,6 @@
+interface SliderTooltipProps {
+    value: number | string;
+    open?: boolean;
+}
+export declare const SliderTooltip: ({ value, open }: SliderTooltipProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist-types/slider/internal/SliderTrack.d.ts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes, type RefObject } from "react";
+interface SliderTrackProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    children: React.ReactNode;
+    constrainLabelPosition?: boolean;
+    disabled: boolean;
+    showTicks?: boolean;
+    format?: (value: number) => string | number;
+    handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
+    isDragging: boolean;
+    isRange?: boolean;
+    marks?: {
+        label: string;
+        value: number;
+    }[];
+    max: number;
+    maxLabel?: number | string;
+    min: number;
+    minLabel?: number | string;
+    progressPercentage?: number;
+    progressPercentageRange?: [number, number];
+    sliderRef: RefObject<HTMLDivElement>;
+}
+export declare const SliderTrack: import("react").ForwardRefExoticComponent<SliderTrackProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist-types/slider/internal/useRangeSliderThumb.d.ts

@@ -0,0 +1,30 @@
+import { type ChangeEvent, type Dispatch, type RefObject, type SetStateAction } from "react";
+import type { SliderProps } from "../Slider";
+declare type UseRangeSliderThumbProps = Pick<SliderProps, "min" | "max" | "step"> & {
+    decimalPlaces: number;
+    handleInputChange: (event: ChangeEvent<HTMLInputElement>, thumbIndex: number) => void;
+    inputRefs: RefObject<HTMLInputElement>[];
+    marks?: {
+        label: string;
+        value: number;
+    }[];
+    onChange?: (event: Event, value: [number, number]) => void;
+    onChangeEnd?: (event: Event, value: [number, number]) => void;
+    restrictToMarks?: boolean;
+    setValue: Dispatch<SetStateAction<[number, number]>>;
+    stepMultiplier: number;
+    value: [number, number];
+};
+export declare const useRangeSliderThumb: ({ decimalPlaces, handleInputChange, inputRefs, marks, min, max, step, onChange, onChangeEnd, restrictToMarks, setValue, stepMultiplier, value, }: UseRangeSliderThumbProps) => {
+    handleBlur: (thumbIndex: number) => void;
+    handleFocus: (thumbIndex: number) => void;
+    handleKeydownOnThumb: (event: React.KeyboardEvent, thumbIndex: number) => void;
+    handlePointerDownOnThumb: (event: React.PointerEvent<HTMLDivElement>, thumbIndex: number) => void;
+    handlePointerDownOnTrack: (event: React.PointerEvent<HTMLDivElement>) => void;
+    isDragging: boolean;
+    isFocusVisible: boolean;
+    preventThumbOverlap: (currentValue: number, value: [number, number], thumbIndex: number) => [number, number];
+    sliderRef: RefObject<HTMLDivElement>;
+    thumbIndexState: number;
+};
+export {};

package/dist-types/slider/internal/useSliderThumb.d.ts

@@ -0,0 +1,28 @@
+import { type ChangeEvent, type Dispatch, type RefObject, type SetStateAction } from "react";
+import type { SliderProps } from "../Slider";
+declare type UseSliderThumbProps = Pick<SliderProps, "min" | "max" | "step"> & {
+    decimalPlaces: number;
+    handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    inputRef: RefObject<HTMLInputElement>;
+    marks?: {
+        label: string;
+        value: number;
+    }[];
+    onChange?: (event: Event, value: number) => void;
+    onChangeEnd?: (event: Event, value: number) => void;
+    restrictToMarks?: boolean;
+    setValue: Dispatch<SetStateAction<number>>;
+    stepMultiplier: number;
+    value: number;
+};
+export declare const useSliderThumb: ({ decimalPlaces, handleInputChange, inputRef, marks, min, max, step, onChange, onChangeEnd, restrictToMarks, setValue, stepMultiplier, value, }: UseSliderThumbProps) => {
+    handleBlur: () => void;
+    handleFocus: () => void;
+    handleKeydownOnThumb: (event: React.KeyboardEvent) => void;
+    handlePointerDownOnThumb: (event: React.PointerEvent<HTMLDivElement>) => void;
+    handlePointerDownOnTrack: (event: React.PointerEvent<HTMLDivElement>) => void;
+    isDragging: boolean;
+    isFocusVisible: boolean;
+    sliderRef: RefObject<HTMLDivElement>;
+};
+export {};

package/dist-types/slider/internal/utils.d.ts

@@ -0,0 +1,20 @@
+import type { RefObject } from "react";
+export declare const toFloat: (value: number | string) => number;
+export declare const calculateMarkPosition: (value: number | string, max: number, min: number) => number;
+export declare const calculatePercentage: (value: number, max: number, min: number) => number;
+export declare const clamp: (value: number, max: number, min: number, step: number, decimalPlaces: number, marks?: {
+    value: number;
+    label: string;
+}[] | undefined, restrictToMarks?: boolean | undefined) => number;
+export declare const clampRange: (range: [number, number], max: number, min: number, step: number, decimalPlaces: number, marks?: {
+    value: number;
+    label: string;
+}[] | undefined, restrictToMarks?: boolean | undefined) => [number, number];
+export declare const getClickedPosition: (sliderRef: RefObject<HTMLDivElement>, clientX: number, max: number, min: number, step: number, decimalPlaces: number, marks?: {
+    label: string;
+    value: number;
+}[] | undefined, restrictToMarks?: boolean | undefined) => number | undefined;
+export declare const getKeyboardValue: (event: React.KeyboardEvent, value: number, step: number, stepMultiplier: number, max: number, min: number, restrictToMarks?: boolean | undefined, marks?: {
+    label: string;
+    value: number;
+}[] | undefined) => number;