@salt-ds/lab 1.0.0-alpha.51 → 1.0.0-alpha.53

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

@@ -0,0 +1,87 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useRef, useState, useEffect } from 'react';
+import { useSliderContext } from './SliderContext.js';
+import { SliderSelection } from './SliderSelection.js';
+import { SliderThumb } from './SliderThumb.js';
+import { getValue, getNearestIndex, setValue, preventOverlappingValues } from './utils.js';
+
+const withBaseName = makePrefixer("saltSliderTrack");
+const SliderTrack = ({ ...props }) => {
+  const { min, max, step, value, onChange } = useSliderContext();
+  const trackRef = useRef(null);
+  const valueRef = useRef(value);
+  const [activeThumb, setActiveThumbState] = useState(void 0);
+  const activeThumbRef = useRef(void 0);
+  const pointerDown = useRef(false);
+  const setActiveThumb = (index) => {
+    setActiveThumbState(index);
+    activeThumbRef.current = index;
+  };
+  const handlePointerUp = () => {
+    setActiveThumb(void 0);
+    pointerDown.current = false;
+  };
+  const handlePointerDown = (event) => {
+    if (event.button !== 0)
+      return;
+    const { clientX } = event;
+    const newValue = getValue(trackRef, min, max, step, clientX);
+    const nearestIndex = getNearestIndex(value, newValue);
+    setValue(value, newValue, value.length > 1 ? nearestIndex : 0, onChange);
+    setActiveThumb(nearestIndex);
+    pointerDown.current = true;
+  };
+  const handlePointerMove = (event) => {
+    if (!pointerDown.current || typeof activeThumbRef.current === "undefined")
+      return;
+    const thumb = activeThumbRef.current;
+    const { clientX } = event;
+    const rawValue = getValue(trackRef, min, max, step, clientX);
+    const newValue = preventOverlappingValues(
+      valueRef.current,
+      rawValue,
+      thumb
+    );
+    setValue(valueRef.current, newValue, thumb, onChange);
+  };
+  const handlePointerOut = () => {
+    if (!pointerDown.current) {
+      setActiveThumb(void 0);
+    }
+  };
+  useEffect(() => {
+    window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("pointermove", handlePointerMove);
+    return () => {
+      window.removeEventListener("pointerup", handlePointerUp);
+      window.removeEventListener("pointermove", handlePointerMove);
+    };
+  }, []);
+  useEffect(() => {
+    valueRef.current = value;
+  }, [value]);
+  return /* @__PURE__ */ jsxs("div", {
+    className: withBaseName(),
+    ref: trackRef,
+    onPointerDown: handlePointerDown,
+    onPointerOut: handlePointerOut,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: withBaseName("rail")
+      }),
+      /* @__PURE__ */ jsx(SliderSelection, {}),
+      value.map((_, i) => {
+        return /* @__PURE__ */ jsx(SliderThumb, {
+          index: i,
+          activeThumb,
+          setActiveThumb
+        }, i);
+      })
+    ]
+  });
+};
+
+export { SliderTrack };
+//# sourceMappingURL=SliderTrack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderTrack.js","sources":["../src/slider/internal/SliderTrack.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport {\n  type ComponentPropsWithoutRef,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { ActiveThumbIndex, SliderValue, ThumbIndex } from \"../types\";\nimport { useSliderContext } from \"./SliderContext\";\nimport { SliderSelection } from \"./SliderSelection\";\nimport { SliderThumb } from \"./SliderThumb\";\nimport {\n  getNearestIndex,\n  getValue,\n  preventOverlappingValues,\n  setValue,\n} from \"./utils\";\n\nexport interface SliderTrackProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltSliderTrack\");\n\nexport const SliderTrack = ({ ...props }: SliderTrackProps) => {\n  const { min, max, step, value, onChange } = useSliderContext();\n\n  const trackRef = useRef<HTMLDivElement>(null);\n\n  const valueRef = useRef<SliderValue>(value);\n\n  const [activeThumb, setActiveThumbState] =\n    useState<ActiveThumbIndex>(undefined);\n  const activeThumbRef = useRef<ActiveThumbIndex>(undefined);\n  const pointerDown = useRef(false);\n\n  const setActiveThumb = (index: ActiveThumbIndex) => {\n    setActiveThumbState(index);\n    activeThumbRef.current = index;\n  };\n\n  const handlePointerUp = () => {\n    setActiveThumb(undefined);\n    pointerDown.current = false;\n  };\n\n  const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n    if (event.button !== 0) return;\n    const { clientX } = event;\n    const newValue: number = getValue(trackRef, min, max, step, clientX);\n    const nearestIndex = getNearestIndex(value, newValue);\n    setValue(value, newValue, value.length > 1 ? nearestIndex : 0, onChange);\n    setActiveThumb(nearestIndex);\n    pointerDown.current = true;\n  };\n\n  const handlePointerMove = (event: PointerEvent) => {\n    if (!pointerDown.current || typeof activeThumbRef.current === \"undefined\")\n      return;\n    const thumb = activeThumbRef.current;\n    const { clientX } = event;\n    const rawValue: number = getValue(trackRef, min, max, step, clientX);\n    const newValue = preventOverlappingValues(\n      valueRef.current,\n      rawValue,\n      thumb,\n    );\n    setValue(valueRef.current, newValue, thumb, onChange);\n  };\n\n  const handlePointerOut = () => {\n    if (!pointerDown.current) {\n      setActiveThumb(undefined);\n    }\n  };\n\n  useEffect(() => {\n    window.addEventListener(\"pointerup\", handlePointerUp);\n    window.addEventListener(\"pointermove\", handlePointerMove);\n    return () => {\n      window.removeEventListener(\"pointerup\", handlePointerUp);\n      window.removeEventListener(\"pointermove\", handlePointerMove);\n    };\n  }, []);\n\n  useEffect(() => {\n    valueRef.current = value;\n  }, [value]);\n\n  return (\n    <div\n      className={withBaseName()}\n      ref={trackRef}\n      onPointerDown={handlePointerDown}\n      onPointerOut={handlePointerOut}\n      {...props}\n    >\n      <div className={withBaseName(\"rail\")} />\n      <SliderSelection />\n      {value.map((_, i) => {\n        return (\n          <SliderThumb\n            key={i}\n            index={i as ThumbIndex}\n            activeThumb={activeThumb}\n            setActiveThumb={setActiveThumb}\n          />\n        );\n      })}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,49 @@
+import { setValue, roundToStep, preventOverlappingValues, clampValue } from './utils.js';
+
+const supportedKeys = [
+  "Home",
+  "End",
+  "ArrowUp",
+  "ArrowRight",
+  "ArrowDown",
+  "ArrowLeft"
+];
+const getValueFromKeyName = (keyName, value, min, max, step) => {
+  switch (keyName) {
+    case "Home":
+      return min;
+    case "End":
+      return max;
+    case "ArrowUp":
+    case "ArrowRight":
+      return value + step;
+    case "ArrowDown":
+    case "ArrowLeft":
+      return value - step;
+    default:
+      return value;
+  }
+};
+const useKeyDownThumb = (min, max, step, value, onChange, index) => {
+  return (event) => {
+    if (!supportedKeys.includes(event.key))
+      return;
+    event.preventDefault();
+    const targetValue = value[index];
+    const rawValue = getValueFromKeyName(
+      event.key,
+      targetValue,
+      min,
+      max,
+      step
+    );
+    const roundedToStep = roundToStep(rawValue, step);
+    const rounded = Number(roundedToStep.toFixed(1));
+    const clamped = clampValue(rounded, [min, max]);
+    const newValue = preventOverlappingValues(value, clamped, index);
+    setValue(value, newValue, index, onChange);
+  };
+};
+
+export { useKeyDownThumb };
+//# sourceMappingURL=useKeyDownThumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyDownThumb.js","sources":["../src/slider/internal/useKeyDownThumb.ts"],"sourcesContent":["import type { SliderChangeHandler, SliderValue, ThumbIndex } from \"../types\";\nimport {\n  clampValue,\n  preventOverlappingValues,\n  roundToStep,\n  setValue,\n} from \"./utils\";\n\nconst supportedKeys = [\n  \"Home\",\n  \"End\",\n  \"ArrowUp\",\n  \"ArrowRight\",\n  \"ArrowDown\",\n  \"ArrowLeft\",\n];\n\nconst getValueFromKeyName = (\n  keyName: string,\n  value: number,\n  min: number,\n  max: number,\n  step: number,\n) => {\n  switch (keyName) {\n    case \"Home\":\n      return min;\n    case \"End\":\n      return max;\n    case \"ArrowUp\":\n    case \"ArrowRight\":\n      return value + step;\n    case \"ArrowDown\":\n    case \"ArrowLeft\":\n      return value - step;\n    default:\n      return value;\n  }\n};\n\nexport const useKeyDownThumb = (\n  min: number,\n  max: number,\n  step: number,\n  value: SliderValue,\n  onChange: SliderChangeHandler,\n  index: ThumbIndex,\n) => {\n  return (event: React.KeyboardEvent) => {\n    if (!supportedKeys.includes(event.key)) return;\n    event.preventDefault();\n    const targetValue = value[index];\n    const rawValue = getValueFromKeyName(\n      event.key,\n      targetValue as number,\n      min,\n      max,\n      step,\n    );\n\n    const roundedToStep = roundToStep(rawValue, step);\n    const rounded = Number(roundedToStep.toFixed(1));\n    const clamped = clampValue(rounded, [min, max]);\n    const newValue = preventOverlappingValues(value, clamped, index);\n\n    setValue(value, newValue, index, onChange);\n  };\n};\n"],"names":[],"mappings":";;AAQA,MAAM,aAAgB,GAAA;AAAA,EACpB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AACF,CAAA,CAAA;AAEA,MAAM,sBAAsB,CAC1B,OAAA,EACA,KACA,EAAA,GAAA,EACA,KACA,IACG,KAAA;AACH,EAAQ,QAAA,OAAA;AAAA,IACD,KAAA,MAAA;AACH,MAAO,OAAA,GAAA,CAAA;AAAA,IACJ,KAAA,KAAA;AACH,MAAO,OAAA,GAAA,CAAA;AAAA,IACJ,KAAA,SAAA,CAAA;AAAA,IACA,KAAA,YAAA;AACH,MAAA,OAAO,KAAQ,GAAA,IAAA,CAAA;AAAA,IACZ,KAAA,WAAA,CAAA;AAAA,IACA,KAAA,WAAA;AACH,MAAA,OAAO,KAAQ,GAAA,IAAA,CAAA;AAAA,IAAA;AAEf,MAAO,OAAA,KAAA,CAAA;AAAA,GAAA;AAEb,CAAA,CAAA;AAEO,MAAM,kBAAkB,CAC7B,GAAA,EACA,KACA,IACA,EAAA,KAAA,EACA,UACA,KACG,KAAA;AACH,EAAA,OAAO,CAAC,KAA+B,KAAA;AACrC,IAAA,IAAI,CAAC,aAAA,CAAc,QAAS,CAAA,KAAA,CAAM,GAAG,CAAA;AAAG,MAAA,OAAA;AACxC,IAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,IAAA,MAAM,cAAc,KAAM,CAAA,KAAA,CAAA,CAAA;AAC1B,IAAA,MAAM,QAAW,GAAA,mBAAA;AAAA,MACf,KAAM,CAAA,GAAA;AAAA,MACN,WAAA;AAAA,MACA,GAAA;AAAA,MACA,GAAA;AAAA,MACA,IAAA;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,aAAA,GAAgB,WAAY,CAAA,QAAA,EAAU,IAAI,CAAA,CAAA;AAChD,IAAA,MAAM,OAAU,GAAA,MAAA,CAAO,aAAc,CAAA,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA;AAC/C,IAAA,MAAM,UAAU,UAAW,CAAA,OAAA,EAAS,CAAC,GAAA,EAAK,GAAG,CAAC,CAAA,CAAA;AAC9C,IAAA,MAAM,QAAW,GAAA,wBAAA,CAAyB,KAAO,EAAA,OAAA,EAAS,KAAK,CAAA,CAAA;AAE/D,IAAS,QAAA,CAAA,KAAA,EAAO,QAAU,EAAA,KAAA,EAAO,QAAQ,CAAA,CAAA;AAAA,GAC3C,CAAA;AACF;;;;"}

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

@@ -1,121 +1,80 @@
-import { useMemo } from 'react';
-
-const updateValueItemNotPushable = (oldValue, index, valueItem, min, max) => {
-  const newValue = [...oldValue];
-  if (valueItem < oldValue[index]) {
-    const constraint = index === 0 ? min : newValue[index - 1];
-    newValue[index] = Math.max(constraint, valueItem);
-  } else {
-    const constraint = index === newValue.length - 1 ? max : newValue[index + 1];
-    newValue[index] = Math.min(constraint, valueItem);
-  }
-  return newValue;
+const getValue = (trackRef, min, max, step, clientX) => {
+  const { width, x } = trackRef.current.getBoundingClientRect();
+  const localX = clientX - x;
+  const normaliseBetweenValues = localX / width * (max - min) + min;
+  const roundedToStep = roundToStep(normaliseBetweenValues, step);
+  const decimals = countDecimalPlaces(step);
+  const rounded = Number(roundedToStep.toFixed(decimals));
+  const value = clampValue(rounded, [min, max]);
+  return value;
 };
-const updateValueItemPushable = (oldValue, index, valueItem, min, max, pushDistance) => {
-  const newValue = [...oldValue];
-  newValue[index] = valueItem;
-  if (valueItem < oldValue[index]) {
-    for (let i = index - 1; i >= 0; --i) {
-      if (newValue[i + 1] - newValue[i] < pushDistance) {
-        newValue[i] = newValue[i + 1] - pushDistance;
-      } else {
-        break;
-      }
-    }
-    const distToMin = newValue[0] - min;
-    if (distToMin < 0) {
-      for (let i = index; i >= 0; --i) {
-        newValue[i] -= distToMin;
-      }
-    }
-  } else {
-    for (let i = index + 1; i < newValue.length; ++i) {
-      if (newValue[i] - newValue[i - 1] < pushDistance) {
-        newValue[i] = newValue[i - 1] + pushDistance;
-      } else {
-        break;
-      }
-    }
-    const distToMax = max - newValue[newValue.length - 1];
-    if (distToMax < 0) {
-      for (let i = index; i < newValue.length; ++i) {
-        newValue[i] += distToMax;
-      }
-    }
+const setValue = (value, newValue, index, onChange) => {
+  if (value.length === 2) {
+    const newValueArray = [...value];
+    newValueArray.splice(index, 1, newValue);
+    onChange(newValueArray);
+    return;
   }
-  return newValue;
+  onChange([newValue]);
 };
-function useValueUpdater(pushable, pushDistance, min, max) {
-  return useMemo(() => {
-    const updater = pushable ? (oldValue, index, valueItem) => updateValueItemPushable(
-      oldValue,
-      index,
-      valueItem,
-      min,
-      max,
-      pushDistance
-    ) : (oldValue, index, valueItem) => updateValueItemNotPushable(oldValue, index, valueItem, min, max);
-    return (oldValue, index, valueItem) => {
-      if (!Array.isArray(oldValue)) {
-        return valueItem;
-      }
-      if (oldValue[index] === valueItem) {
-        return oldValue;
-      }
-      const newValue = updater(oldValue, index, valueItem);
-      if (-1 === newValue.findIndex((v, i) => oldValue[i] !== v)) {
-        return oldValue;
-      }
-      return newValue;
-    };
-  }, [pushable, pushDistance, min, max]);
-}
-const roundValue = (v, step) => Math.round(v / step) * step;
-const clampValue = (v, min, max) => {
-  if (v < min) {
-    return min;
-  }
-  if (v > max) {
+const roundToStep = (value, step) => Math.round(value / step) * step;
+const clampValue = (value, [min, max]) => {
+  if (value > max) {
     return max;
   }
-  return v;
-};
-function getSliderAriaLabel(count, index) {
-  if (count < 2) {
-    return;
-  }
-  if (count === 2) {
-    return index === 0 ? "Min" : "Max";
+  if (value < min) {
+    return min;
   }
-  if (index >= 0 && index < 10) {
-    return [
-      "First",
-      "Second",
-      "Third",
-      "Fourth",
-      "Fifth",
-      "Sixth",
-      "Seventh",
-      "Eighth",
-      "Ninth",
-      "Tenth"
-    ][index];
+  return value;
+};
+const getPercentage = (min, max, value) => {
+  const percentage = (value - min) / (max - min) * 100;
+  return Math.min(Math.max(percentage, 0), 100);
+};
+const countDecimalPlaces = (num) => {
+  const parts = num.toString().split(".");
+  return parts.length > 1 ? parts[1].length : 0;
+};
+const getMarkStyles = (min, max, step) => {
+  const marks = [];
+  for (let i = min; i <= max; i = Number((i + step).toPrecision(4))) {
+    const value = Number(i.toPrecision(4));
+    const position = `${getPercentage(min, max, value)}%`;
+    marks.push({ value, position });
   }
-  return;
-}
-function getHandleIndex(element) {
-  const handleIndexAttribute = element.getAttribute("data-handle-index");
-  if (handleIndexAttribute) {
-    return Number.parseInt(handleIndexAttribute, 10);
+  const decimals = Math.max(
+    ...marks.map((mark) => countDecimalPlaces(mark.value))
+  );
+  return marks.map((mark) => ({
+    ...mark,
+    label: mark.value.toFixed(decimals)
+  }));
+};
+const getNearestIndex = (value, newValue) => {
+  if (value.length === 1)
+    return 0;
+  if (value[0] === value[1]) {
+    if (newValue < value[0])
+      return 0;
+    return 1;
   }
-  return getHandleIndex(element.parentElement);
-}
-function isLabeledMark(mark) {
-  return typeof mark !== "number";
-}
-function isMarkAtMax(max, mark) {
-  return max === (isLabeledMark(mark) ? mark.value : mark);
-}
+  const distances = value.map((value2) => Math.abs(newValue - value2));
+  const minDistance = Math.min(...distances);
+  const nearestIndex = distances.indexOf(minDistance);
+  return nearestIndex;
+};
+const preventOverlappingValues = (value, newValue, index) => value.length === 2 ? index === 0 ? Math.min(newValue, value[1]) : Math.max(newValue, value[0]) : newValue;
+const parseValueProp = (value, min, max) => {
+  if (typeof value === "undefined" || value.length < 1)
+    return;
+  const a = clampValue(value[0], [min, max]);
+  if (value.length === 1)
+    return [a];
+  const b = clampValue(value[1], [min, max]);
+  if (a > b)
+    return [a, a];
+  return [a, b];
+};
 
-export { clampValue, getHandleIndex, getSliderAriaLabel, isLabeledMark, isMarkAtMax, roundValue, useValueUpdater };
+export { clampValue, countDecimalPlaces, getMarkStyles, getNearestIndex, getPercentage, getValue, parseValueProp, preventOverlappingValues, roundToStep, setValue };
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../src/slider/internal/utils.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport type { SliderValue } from \"../types\";\nimport type { LabeledMark, SliderMark } from \"./SliderRailMarks\";\n\nconst updateValueItemNotPushable = (\n  oldValue: number[],\n  index: number,\n  valueItem: number,\n  min: number,\n  max: number,\n) => {\n  const newValue = [...oldValue];\n  if (valueItem < oldValue[index]) {\n    const constraint = index === 0 ? min : newValue[index - 1];\n    newValue[index] = Math.max(constraint, valueItem);\n  } else {\n    const constraint =\n      index === newValue.length - 1 ? max : newValue[index + 1];\n    newValue[index] = Math.min(constraint, valueItem);\n  }\n  return newValue;\n};\n\nconst updateValueItemPushable = (\n  oldValue: number[],\n  index: number,\n  valueItem: number,\n  min: number,\n  max: number,\n  pushDistance: number,\n) => {\n  const newValue = [...oldValue];\n  newValue[index] = valueItem;\n  if (valueItem < oldValue[index]) {\n    for (let i = index - 1; i >= 0; --i) {\n      if (newValue[i + 1] - newValue[i] < pushDistance) {\n        newValue[i] = newValue[i + 1] - pushDistance;\n      } else {\n        break;\n      }\n    }\n    const distToMin = newValue[0] - min;\n    if (distToMin < 0) {\n      for (let i = index; i >= 0; --i) {\n        newValue[i] -= distToMin;\n      }\n    }\n  } else {\n    for (let i = index + 1; i < newValue.length; ++i) {\n      if (newValue[i] - newValue[i - 1] < pushDistance) {\n        newValue[i] = newValue[i - 1] + pushDistance;\n      } else {\n        break;\n      }\n    }\n    const distToMax = max - newValue[newValue.length - 1];\n    if (distToMax < 0) {\n      for (let i = index; i < newValue.length; ++i) {\n        newValue[i] += distToMax;\n      }\n    }\n  }\n  return newValue;\n};\n\nexport type UpdateValueItem = (\n  oldValue: SliderValue,\n  index: number,\n  valueItem: number,\n) => SliderValue;\n\nexport function useValueUpdater(\n  pushable: boolean | undefined,\n  pushDistance: number,\n  min: number,\n  max: number,\n): UpdateValueItem {\n  return useMemo(() => {\n    const updater = pushable\n      ? (oldValue: number[], index: number, valueItem: number) =>\n          updateValueItemPushable(\n            oldValue,\n            index,\n            valueItem,\n            min,\n            max,\n            pushDistance,\n          )\n      : (oldValue: number[], index: number, valueItem: number) =>\n          updateValueItemNotPushable(oldValue, index, valueItem, min, max);\n    return (oldValue: SliderValue, index: number, valueItem: number) => {\n      if (!Array.isArray(oldValue)) {\n        return valueItem;\n      }\n      if (oldValue[index] === valueItem) {\n        return oldValue;\n      }\n      const newValue = updater(oldValue, index, valueItem);\n      if (-1 === newValue.findIndex((v, i) => oldValue[i] !== v)) {\n        return oldValue;\n      }\n      return newValue;\n    };\n  }, [pushable, pushDistance, min, max]);\n}\n\nexport const roundValue = (v: number, step: number) =>\n  Math.round(v / step) * step;\n\nexport const clampValue = (v: number, min: number, max: number) => {\n  if (v < min) {\n    return min;\n  }\n  if (v > max) {\n    return max;\n  }\n  return v;\n};\n\nexport function getSliderAriaLabel(count: number, index: number) {\n  if (count < 2) {\n    return;\n  }\n  if (count === 2) {\n    return index === 0 ? \"Min\" : \"Max\";\n  }\n  if (index >= 0 && index < 10) {\n    return [\n      \"First\",\n      \"Second\",\n      \"Third\",\n      \"Fourth\",\n      \"Fifth\",\n      \"Sixth\",\n      \"Seventh\",\n      \"Eighth\",\n      \"Ninth\",\n      \"Tenth\",\n    ][index];\n  }\n  return;\n}\n\nexport function getHandleIndex(element: HTMLElement): number {\n  const handleIndexAttribute = element.getAttribute(\"data-handle-index\");\n  if (handleIndexAttribute) {\n    return Number.parseInt(handleIndexAttribute, 10);\n  }\n  return getHandleIndex(element.parentElement as HTMLElement);\n}\n\nexport function isLabeledMark(mark: SliderMark): mark is LabeledMark {\n  return typeof mark !== \"number\";\n}\n\nexport function isMarkAtMax(max: number, mark: SliderMark) {\n  return max === (isLabeledMark(mark) ? mark.value : mark);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../src/slider/internal/utils.ts"],"sourcesContent":["import type { RefObject } from \"react\";\nimport type { SliderChangeHandler, SliderValue, ThumbIndex } from \"../types\";\n\nexport const getValue = (\n  trackRef: RefObject<Element>,\n  min: number,\n  max: number,\n  step: number,\n  clientX: number,\n) => {\n  const { width, x } = trackRef.current!.getBoundingClientRect();\n  const localX = clientX - x;\n  const normaliseBetweenValues = (localX / width) * (max - min) + min;\n  const roundedToStep = roundToStep(normaliseBetweenValues, step);\n  const decimals = countDecimalPlaces(step);\n  const rounded = Number(roundedToStep.toFixed(decimals));\n  const value = clampValue(rounded, [min, max]);\n  return value;\n};\n\nexport const setValue = (\n  value: SliderValue,\n  newValue: number,\n  index: ThumbIndex,\n  onChange: SliderChangeHandler,\n) => {\n  if (value.length === 2) {\n    const newValueArray = [...value];\n    newValueArray.splice(index, 1, newValue);\n    onChange(newValueArray as SliderValue);\n    return;\n  }\n  onChange([newValue]);\n};\n\nexport const roundToStep = (value: number, step: number) =>\n  Math.round(value / step) * step;\n\nexport const clampValue = (value: number, [min, max]: number[]) => {\n  if (value > max) {\n    return max;\n  }\n  if (value < min) {\n    return min;\n  }\n  return value;\n};\n\nexport const getPercentage = (min: number, max: number, value: number) => {\n  const percentage = ((value - min) / (max - min)) * 100;\n  return Math.min(Math.max(percentage, 0), 100);\n};\n\nexport const getPercentageDifference = (\n  min: number,\n  max: number,\n  value: number[],\n) => {\n  const valueDiff = value[1] - value[0];\n  const percentage = ((valueDiff - min) / (max - min)) * 100;\n  return `${Math.min(Math.max(percentage, 0), 100)}%`;\n};\n\nexport const getPercentageOffset = (\n  min: number,\n  max: number,\n  value: number[],\n) => {\n  const offsetLeft = ((value[0] - min) / (max - min)) * 100;\n  return `${Math.min(Math.max(offsetLeft, 0), 100)}%`;\n};\n\nexport const countDecimalPlaces = (num: number) => {\n  const parts = num.toString().split(\".\");\n  return parts.length > 1 ? parts[1].length : 0;\n};\n\nexport const getMarkStyles = (min: number, max: number, step: number) => {\n  const marks = [];\n  for (let i = min; i <= max; i = Number((i + step).toPrecision(4))) {\n    const value = Number(i.toPrecision(4));\n    const position = `${getPercentage(min, max, value)}%`;\n    marks.push({ value, position });\n  }\n  const decimals = Math.max(\n    ...marks.map((mark) => countDecimalPlaces(mark.value)),\n  );\n  return marks.map((mark) => ({\n    ...mark,\n    label: mark.value.toFixed(decimals),\n  }));\n};\n\nexport const getNearestIndex = (value: SliderValue, newValue: number) => {\n  if (value.length === 1) return 0;\n\n  if (value[0] === value[1]) {\n    if (newValue < value[0]) return 0;\n    return 1;\n  }\n\n  const distances = value.map((value) => Math.abs(newValue - value));\n  const minDistance = Math.min(...distances);\n  const nearestIndex = distances.indexOf(minDistance);\n\n  return nearestIndex as ThumbIndex;\n};\n\nexport const preventOverlappingValues = (\n  value: SliderValue,\n  newValue: number,\n  index: ThumbIndex,\n) =>\n  value.length === 2\n    ? index === 0\n      ? Math.min(newValue, value[1])\n      : Math.max(newValue, value[0])\n    : newValue;\n\nexport const parseValueProp = (\n  value: number[] | undefined,\n  min: number,\n  max: number,\n) => {\n  if (typeof value === \"undefined\" || value.length < 1) return;\n  const a = clampValue(value[0], [min, max]);\n  if (value.length === 1) return [a] as SliderValue;\n  const b = clampValue(value[1], [min, max]);\n  if (a > b) return [a, a] as SliderValue;\n  return [a, b] as SliderValue;\n};\n"],"names":["value"],"mappings":"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"}

package/dist-es/static-list/StaticList.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltStaticList {\n  overflow-y: auto;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=StaticList.css.js.map

package/dist-es/static-list/StaticList.css.js.map

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

package/dist-es/static-list/StaticList.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import css_248z from './StaticList.css.js';
+
+const withBaseName = makePrefixer("saltStaticList");
+const StaticList = forwardRef(
+  function StaticList2({ children, className, ...rest }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-static-list",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx("ol", {
+      className: clsx(withBaseName(), className),
+      ref,
+      ...rest,
+      children
+    });
+  }
+);
+
+export { StaticList };
+//# sourceMappingURL=StaticList.js.map

package/dist-es/static-list/StaticList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticList.js","sources":["../src/static-list/StaticList.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport staticListCss from \"./StaticList.css\";\n\nconst withBaseName = makePrefixer(\"saltStaticList\");\n\nexport interface StaticListProps extends ComponentPropsWithoutRef<\"ul\"> {\n  /**\n   * The list items to be rendered within the StaticList.\n   */\n  children: ReactNode;\n}\n\nexport const StaticList = forwardRef<HTMLOListElement, StaticListProps>(\n  function StaticList({ children, className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-static-list\",\n      css: staticListCss,\n      window: targetWindow,\n    });\n\n    return (\n      <ol className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n        {children}\n      </ol>\n    );\n  },\n);\n"],"names":["StaticList","staticListCss"],"mappings":";;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAS3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAW,CAAA,EAAE,UAAU,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACzD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,MAAG,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,MAC3D,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/static-list/StaticListItem.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltStaticListItem {\n  list-style-type: none;\n  display: flex;\n  gap: var(--salt-spacing-100);\n  box-sizing: border-box;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n}\n\n.saltStaticListItem > .saltIcon {\n  /* Workaround to ensure the icon and button are aligned.*/\n  min-height: var(--salt-size-base);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=StaticListItem.css.js.map

package/dist-es/static-list/StaticListItem.css.js.map

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

package/dist-es/static-list/StaticListItem.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import css_248z from './StaticListItem.css.js';
+
+const withBaseName = makePrefixer("saltStaticListItem");
+const StaticListItem = forwardRef(
+  function StaticListItem2(props, ref) {
+    const { className, children, ...restProps } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-static-list-item",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx("li", {
+      className: clsx(withBaseName(), className),
+      ref,
+      ...restProps,
+      children
+    });
+  }
+);
+
+export { StaticListItem };
+//# sourceMappingURL=StaticListItem.js.map

package/dist-es/static-list/StaticListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticListItem.js","sources":["../src/static-list/StaticListItem.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport staticListItemCss from \"./StaticListItem.css\";\n\nconst withBaseName = makePrefixer(\"saltStaticListItem\");\n\nexport interface StaticListItemProps extends ComponentPropsWithoutRef<\"li\"> {}\n\nexport const StaticListItem = forwardRef<HTMLLIElement, StaticListItemProps>(\n  function StaticListItem(props, ref) {\n    const { className, children, ...restProps } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-static-list-item\",\n      css: staticListItemCss,\n      window: targetWindow,\n    });\n\n    return (\n      <li className={clsx(withBaseName(), className)} ref={ref} {...restProps}>\n        {children}\n      </li>\n    );\n  },\n);\n"],"names":["StaticListItem","staticListItemCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAI/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAA,MAAM,EAAE,SAAA,EAAW,QAAa,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAE9C,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,uBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,MAAG,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAAW,GAAG,SAAA;AAAA,MAC3D,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/static-list/StaticListItemContent.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltStaticListItemContent {\n  flex: 1 0;\n  margin: var(--salt-spacing-75) 0;\n  color: var(--salt-content-primary-foreground);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=StaticListItemContent.css.js.map

package/dist-es/static-list/StaticListItemContent.css.js.map

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

package/dist-es/static-list/StaticListItemContent.js

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import css_248z from './StaticListItemContent.css.js';
+
+const withBaseName = makePrefixer("saltStaticListItemContent");
+const StaticListItemContent = forwardRef(function StaticListItemContent2({ children, className, ...restProps }, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-static-list-item-content",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx("div", {
+    className: clsx(withBaseName(), className),
+    ...restProps,
+    ref,
+    children
+  });
+});
+
+export { StaticListItemContent };
+//# sourceMappingURL=StaticListItemContent.js.map

package/dist-es/static-list/StaticListItemContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticListItemContent.js","sources":["../src/static-list/StaticListItemContent.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport staticListItemContent from \"./StaticListItemContent.css\";\n\nconst withBaseName = makePrefixer(\"saltStaticListItemContent\");\n\nexport interface StaticListItemContentProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of Static List Item\n   */\n  children?: ReactNode;\n}\n\nexport const StaticListItemContent = forwardRef<\n  HTMLDivElement,\n  StaticListItemContentProps\n>(function StaticListItemContent({ children, className, ...restProps }, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-static-list-item-content\",\n    css: staticListItemContent,\n    window: targetWindow,\n  });\n\n  return (\n    <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n      {children}\n    </div>\n  );\n});\n"],"names":["StaticListItemContent","staticListItemContent"],"mappings":";;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,2BAA2B,CAAA,CAAA;AAUhD,MAAA,qBAAA,GAAwB,WAGnC,SAASA,sBAAAA,CAAsB,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,SAAU,EAAA,EAAG,GAAK,EAAA;AAC3E,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,+BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IAAW,GAAA;AAAA,IAC7D,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/stepped-tracker/TrackerStep/TrackerStep.js

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer } from '@salt-ds/core';
-import { StepDefaultIcon, StepActiveIcon, StepSuccessIcon, WarningSolidIcon, ErrorSolidIcon } from '@salt-ds/icons';
+import { makePrefixer, useIcon } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
@@ -10,13 +9,6 @@ import { useSteppedTrackerContext, useTrackerStepContext } from '../SteppedTrack
 import css_248z from './TrackerStep.css.js';
 
 const withBaseName = makePrefixer("saltTrackerStep");
-const iconMap = {
-  pending: StepDefaultIcon,
-  active: StepActiveIcon,
-  completed: StepSuccessIcon,
-  warning: WarningSolidIcon,
-  error: ErrorSolidIcon
-};
 const useCheckWithinSteppedTracker = (isWithinSteppedTracker) => {
   useEffect(() => {
     if (process.env.NODE_ENV !== "production") {
@@ -57,11 +49,19 @@ const TrackerStep = forwardRef(
       css: css_248z,
       window: targetWindow
     });
+    const { ErrorIcon, WarningIcon, CompletedIcon, ActiveIcon, PendingIcon } = useIcon();
     const { activeStep, totalSteps, isWithinSteppedTracker } = useSteppedTrackerContext();
     const stepNumber = useTrackerStepContext();
     useCheckWithinSteppedTracker(isWithinSteppedTracker);
     const isActive = activeStep === stepNumber;
     const iconName = parseIconName({ stage, status, active: isActive });
+    const iconMap = {
+      pending: PendingIcon,
+      active: ActiveIcon,
+      completed: CompletedIcon,
+      warning: WarningIcon,
+      error: ErrorIcon
+    };
     const Icon = iconMap[iconName];
     const connectorState = activeStep > stepNumber ? "active" : "default";
     const hasConnector = stepNumber < totalSteps - 1;