@salt-ds/lab 1.0.0-alpha.2 → 1.0.0-alpha.21

package/dist-es/skip-link/SkipLink.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { makePrefixer, Link } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { useManageFocusOnTarget } from './internal/useManageFocusOnTarget.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './SkipLink.css.js';
+
+const withBaseName = makePrefixer("saltSkipLink");
+const SkipLink = forwardRef(
+  function SkipLink2({ className, targetRef, ...rest }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-skip-link",
+      css: css_248z,
+      window: targetWindow
+    });
+    const targetClass = clsx(withBaseName("target"), className);
+    const eventHandlers = useManageFocusOnTarget({ targetRef, targetClass });
+    return /* @__PURE__ */ jsx("li", {
+      children: /* @__PURE__ */ jsx(Link, {
+        ...eventHandlers,
+        ...rest,
+        className: clsx(withBaseName(), className),
+        ref
+      })
+    });
+  }
+);
+
+export { SkipLink };
+//# sourceMappingURL=SkipLink.js.map

package/dist-es/skip-link/SkipLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkipLink.js","sources":["../src/skip-link/SkipLink.tsx"],"sourcesContent":["import { forwardRef, RefObject } from \"react\";\nimport { Link, LinkProps, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { useManageFocusOnTarget } from \"./internal/useManageFocusOnTarget\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport skipLinkCss from \"./SkipLink.css\";\n\ninterface SkipLinkProps extends LinkProps {\n  /**\n   * This is a ref that has access to the target element.\n   *\n   * This will be used to apply focus to that element\n   *\n   * Refs are referentially stable so if this changes it won't be picked up\n   * will need to find a better way of passing in the target element to apply the attributes\n   */\n  targetRef?: RefObject<HTMLElement>;\n}\n\nconst withBaseName = makePrefixer(\"saltSkipLink\");\n\nexport const SkipLink = forwardRef<HTMLAnchorElement, SkipLinkProps>(\n  function SkipLink({ className, targetRef, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-skip-link\",\n      css: skipLinkCss,\n      window: targetWindow,\n    });\n\n    const targetClass = clsx(withBaseName(\"target\"), className);\n\n    const eventHandlers = useManageFocusOnTarget({ targetRef, targetClass });\n\n    return (\n      <li>\n        <Link\n          {...eventHandlers}\n          {...rest}\n          className={clsx(withBaseName(), className)}\n          ref={ref}\n        />\n      </li>\n    );\n  }\n);\n"],"names":["SkipLink","skipLinkCss"],"mappings":";;;;;;;;;AAqBA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAEzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SAAS,CAAA,EAAE,WAAW,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACxD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,WAAc,GAAA,IAAA,CAAK,YAAa,CAAA,QAAQ,GAAG,SAAS,CAAA,CAAA;AAE1D,IAAA,MAAM,aAAgB,GAAA,sBAAA,CAAuB,EAAE,SAAA,EAAW,aAAa,CAAA,CAAA;AAEvE,IAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,MACC,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA;AAAA,QACE,GAAG,aAAA;AAAA,QACH,GAAG,IAAA;AAAA,QACJ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/skip-link/SkipLinks.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltSkipLinks {\n  position: relative;\n  float: left;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=SkipLinks.css.js.map

package/dist-es/skip-link/SkipLinks.css.js.map

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

package/dist-es/skip-link/SkipLinks.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { makePrefixer } from '@salt-ds/core';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './SkipLinks.css.js';
+
+const withBaseName = makePrefixer("saltSkipLinks");
+const SkipLinks = forwardRef(function SkipLinks2(props, ref) {
+  const { className, children, ...restProps } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-skip-links",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx("ul", {
+    ...restProps,
+    className: clsx(withBaseName(), className),
+    ref,
+    children
+  });
+});
+
+export { SkipLinks };
+//# sourceMappingURL=SkipLinks.js.map

package/dist-es/skip-link/SkipLinks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkipLinks.js","sources":["../src/skip-link/SkipLinks.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport skipLinksCss from \"./SkipLinks.css\";\n\nconst withBaseName = makePrefixer(\"saltSkipLinks\");\n\nexport const SkipLinks = forwardRef<\n  HTMLUListElement,\n  HTMLAttributes<HTMLUListElement>\n>(function SkipLinks(props, ref) {\n  const { className, children, ...restProps } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-skip-links\",\n    css: skipLinksCss,\n    window: targetWindow,\n  });\n\n  return (\n    <ul {...restProps} className={clsx(withBaseName(), className)} ref={ref}>\n      {children}\n    </ul>\n  );\n});\n"],"names":["SkipLinks","skipLinksCss"],"mappings":";;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAA,UAAA,CAGvB,SAASA,UAAAA,CAAU,OAAO,GAAK,EAAA;AAC/B,EAAA,MAAM,EAAE,SAAA,EAAW,QAAa,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAC9C,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IAAW,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAG,GAAA;AAAA,IAC5D,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/skip-link/internal/useManageFocusOnTarget.js

@@ -0,0 +1,57 @@
+import { useState, useRef, useEffect, useMemo } from 'react';
+
+const FOCUS_TIMEOUT = 50;
+const useManageFocusOnTarget = ({
+  targetRef,
+  targetClass
+}) => {
+  const [target, setTarget] = useState();
+  const hasTabIndex = useRef();
+  const shouldRemoveTabIndex = useRef();
+  useEffect(() => {
+    if (targetRef == null ? void 0 : targetRef.current) {
+      setTarget(targetRef.current);
+    }
+  }, [targetRef]);
+  return useMemo(() => {
+    if (!target) {
+      return {};
+    }
+    const addTabIndex = () => {
+      const tabIndex = target.getAttribute("tabIndex");
+      hasTabIndex.current = tabIndex || tabIndex === "0";
+      if (!hasTabIndex.current) {
+        shouldRemoveTabIndex.current = true;
+        target.setAttribute("tabIndex", "-1");
+      }
+    };
+    const removeTabIndex = () => {
+      if (!hasTabIndex.current && shouldRemoveTabIndex.current) {
+        target.removeAttribute("tabIndex");
+      }
+    };
+    const handleFocusOnTarget = () => {
+      shouldRemoveTabIndex.current = false;
+      target.classList.add(targetClass);
+    };
+    const handleBlurFromTarget = () => {
+      shouldRemoveTabIndex.current = true;
+      removeTabIndex();
+      target.classList.remove(targetClass);
+    };
+    return {
+      onBlur: () => setTimeout(removeTabIndex, FOCUS_TIMEOUT),
+      onClick: () => {
+        addTabIndex();
+        setTimeout(() => {
+          target.focus();
+        }, FOCUS_TIMEOUT);
+        target.addEventListener("focus", handleFocusOnTarget, { once: true });
+        target.addEventListener("blur", handleBlurFromTarget, { once: true });
+      }
+    };
+  }, [target, targetClass]);
+};
+
+export { useManageFocusOnTarget };
+//# sourceMappingURL=useManageFocusOnTarget.js.map

package/dist-es/slider/Slider.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".salt-density-high {\n  --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 2px);\n  --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 2px);\n  --slider-paddingTop: var(--saltSlider-paddingTop, 3px);\n  --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);\n}\n\n.salt-density-medium {\n  --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 4px);\n  --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 4px);\n  --slider-paddingTop: var(--saltSlider-paddingTop, 6px);\n  --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);\n}\n\n.salt-density-low {\n  --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 8px);\n  --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 8px);\n  --slider-paddingTop: var(--saltSlider-paddingTop, 9px);\n  --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);\n}\n\n.salt-density-touch {\n  --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 12px);\n  --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 12px);\n  --slider-paddingTop: var(--saltSlider-paddingTop, 12px);\n  --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);\n}\n\n.saltSlider {\n  --slider-rail-height: var(--saltSlider-rail-height, 8px);\n  --slider-rail-color: var(--saltSlider-rail-color, var(--salt-track-borderColor));\n\n  --slider-rail-mark-height: var(--saltSlider-rail-mark-height, 7px);\n  --slider-rail-mark-color: var(--saltSlider-rail-mark-color, var(--slider-rail-color));\n\n  --slider-selection-color: var(--saltSlider-selection-color, var(--salt-accent-background));\n  --slider-selection-height: var(--saltSlider-selection-height, 2px);\n\n  --slider-handle-size: var(--saltSlider-handle-size, calc(var(--salt-size-base) * 0.5));\n  --slider-handle-outlineStyle: var(--saltSlider-handle-outlineStyle, var(--salt-focused-outlineStyle));\n  --slider-handle-outlineWidth: var(--saltSlider-handle-outlineWidth, var(--salt-focused-outlineWidth));\n  --slider-handle-outlineColor: var(--saltSlider-handle-outlineColor, var(--salt-focused-outlineColor));\n  --slider-handle-outlineOffset: var(--saltSlider-handle-outlineOffset, var(--salt-focused-outlineOffset));\n\n  --slider-arrow-height: var(--saltSlider-arrow-height, 6px);\n  --slider-arrow-width: var(--saltSlider-arrow-width, 8px);\n  --slider-arrow-color: var(--saltSlider-arrow-color, var(--slider-selection-color));\n\n  --slider-borderStyle: var(--saltSlider-borderStyle, none);\n  --slider-borderWidth: var(--saltSlider-borderWidth, 0);\n  --slider-borderColor: var(--saltSlider-borderColor, transparent);\n  --slider-width: var(--saltSlider-width, 300px);\n\n  --slider-clickable-paddingLeft: var(--saltSlider-clickable-paddingLeft, calc(var(--salt-size-base) * 0.5));\n  --slider-clickable-paddingRight: var(--saltSlider-clickable-paddingRight, calc(var(--salt-size-base) * 0.5));\n\n  --slider-label-fontSize: var(--saltSlider-label-fontSize, var(--salt-text-label-fontSize));\n  --slider-label-paddingLeft: var(--saltSlider-label-paddingLeft, 0);\n  --slider-label-paddingRight: var(--saltSlider-label-paddingRight, 0);\n}\n\n.saltSlider {\n  width: var(--slider-width);\n  border-style: var(--slider-borderStyle);\n  border-width: var(--slider-borderWidth);\n  border-color: var(--slider-borderColor);\n\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n\n  padding-top: var(--slider-paddingTop);\n  padding-bottom: var(--slider-paddingBottom);\n}\n\n.saltSlider-disabled {\n}\n\n.saltSlider-clickable {\n  padding: var(--slider-clickable-paddingTop) var(--slider-clickable-paddingRight) var(--slider-clickable-paddingBottom) var(--slider-clickable-paddingLeft);\n  margin-right: calc(-1 * var(--slider-clickable-paddingRight));\n  margin-left: calc(-1 * var(--slider-clickable-paddingLeft));\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: stretch;\n}\n\n.saltSlider-track {\n  display: grid;\n  grid-template-rows: auto auto auto;\n  align-items: end;\n  grid-template-columns: auto auto auto;\n  row-gap: 0;\n  transition: grid-template-columns 100ms ease;\n}\n\n.saltSliderRail {\n  grid-row: 1;\n  grid-column-start: 1;\n  grid-column-end: -1;\n  height: var(--slider-rail-height);\n  border-style: solid;\n  border-width: 0 1px 1px 1px;\n  border-color: var(--slider-rail-color);\n}\n\n.saltSliderRailMarks {\n  grid-row: 2;\n  grid-column-start: 1;\n  grid-column-end: -1;\n  /*height: var(--markedRail-height);*/\n  display: grid;\n  grid-template-rows: auto;\n}\n\n.saltSliderRailMarks-mark {\n  grid-row: 1;\n  width: 0;\n  height: var(--slider-rail-mark-height);\n  border-left: 1px solid var(--slider-rail-mark-color);\n}\n\n.saltSliderRailMarks-max {\n  margin-left: -1px;\n}\n\n.saltSliderMarkLabels {\n  grid-row: 3;\n  grid-column-start: 1;\n  grid-column-end: -1;\n\n  display: grid;\n  grid-template-rows: auto;\n  justify-items: center;\n}\n\n.saltSliderMarkLabels-label {\n  color: var(--saltSlider-label-text-color, var(--salt-text-secondary-foreground));\n  font-size: var(--slider-label-fontSize);\n  margin-top: var(--saltSlider-label-marginTop);\n  line-height: var(--saltSlider-label-lineHeight, var(--salt-text-lineHeight));\n\n  white-space: nowrap;\n}\n\n.saltSliderSelection {\n  grid-row: 1;\n  grid-column-start: 1;\n  grid-column-end: -2;\n  height: var(--slider-selection-height);\n  background: var(--slider-selection-color);\n}\n\n.saltSliderSelection-range {\n  grid-row: 1;\n  grid-column-start: 2;\n  grid-column-end: -2;\n  height: var(--slider-selection-height);\n  background: var(--slider-selection-color);\n}\n\n.saltSliderHandle-box:focus-visible {\n  outline-style: var(--slider-handle-outlineStyle);\n  outline-width: var(--slider-handle-outlineWidth);\n  outline-color: var(--slider-handle-outlineColor);\n  outline-offset: var(--slider-handle-outlineOffset);\n}\n\n.saltSliderHandle {\n  margin-left: calc(var(--slider-arrow-width) * -0.5);\n  grid-row: 1;\n  width: 0;\n  height: 0;\n  border-left: calc(var(--slider-arrow-width) * 0.5) solid transparent;\n  border-right: calc(var(--slider-arrow-width) * 0.5) solid transparent;\n  border-bottom: calc(var(--slider-arrow-height)) solid var(--slider-arrow-color);\n  position: relative;\n}\n\n.saltSliderHandle-min {\n  border-left: none;\n  margin-left: 0;\n}\n\n.saltSliderHandle-max {\n  border-right: none;\n}\n\n.saltSlider-label {\n  color: var(--saltSlider-label-text-color, var(--salt-text-secondary-foreground));\n  font-size: var(--slider-label-fontSize);\n  margin-top: var(--saltSlider-label-marginTop);\n  line-height: var(--saltSlider-label-lineHeight, var(--salt-text-lineHeight));\n\n  padding-left: var(--slider-label-paddingLeft);\n  padding-right: var(--slider-label-paddingRight);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Slider.css.js.map

package/dist-es/slider/Slider.css.js.map

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

package/dist-es/slider/Slider.js

@@ -0,0 +1,139 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, useControlled } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { forwardRef, useRef, useMemo } from 'react';
+import { SliderHandle } from './internal/SliderHandle.js';
+import { SliderMarkLabels } from './internal/SliderMarkLabels.js';
+import { SliderRail } from './internal/SliderRail.js';
+import { SliderRailMarks } from './internal/SliderRailMarks.js';
+import { SliderSelection } from './internal/SliderSelection.js';
+import { createTrackStyle, createHandleStyles } from './internal/styles.js';
+import { useSliderKeyDown } from './internal/useSliderKeyDown.js';
+import { useSliderMouseDown } from './internal/useSliderMouseDown.js';
+import { useValueUpdater } from './internal/utils.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './Slider.css.js';
+
+const withBaseName = makePrefixer("saltSlider");
+const defaultMin = 0;
+const defaultMax = 100;
+const defaultStep = 1;
+const Slider = forwardRef(function Slider2({
+  min = defaultMin,
+  max = defaultMax,
+  step = defaultStep,
+  pageStep = step,
+  value: valueProp,
+  defaultValue = defaultMin,
+  onChange,
+  label,
+  className,
+  pushable,
+  pushDistance = 0,
+  disabled,
+  marks,
+  hideMarks,
+  hideMarkLabels,
+  ...restProps
+}, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-slider",
+    css: css_248z,
+    window: targetWindow
+  });
+  const trackRef = useRef(null);
+  const [value, setValue] = useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    name: "Slider",
+    state: "Value"
+  });
+  const updateValueItem = useValueUpdater(pushable, pushDistance, min, max);
+  const trackStyle = useMemo(
+    () => createTrackStyle(min, max, value),
+    [min, max, value]
+  );
+  const valueLength = Array.isArray(value) ? value.length : 1;
+  const handleStyles = useMemo(
+    () => createHandleStyles(valueLength),
+    [valueLength]
+  );
+  const onMouseDown = useSliderMouseDown(
+    trackRef,
+    value,
+    min,
+    max,
+    step,
+    updateValueItem,
+    setValue,
+    onChange
+  );
+  const onKeyDown = useSliderKeyDown(
+    value,
+    min,
+    max,
+    pageStep,
+    step,
+    updateValueItem,
+    setValue,
+    onChange
+  );
+  return /* @__PURE__ */ jsxs("div", {
+    className: clsx(
+      withBaseName(),
+      {
+        [withBaseName("disabled")]: disabled
+      },
+      className
+    ),
+    ref,
+    onKeyDown: disabled ? void 0 : onKeyDown,
+    "aria-label": `${label} slider from ${min} to ${max}`,
+    role: "group",
+    children: [
+      label !== void 0 ? /* @__PURE__ */ jsx("div", {
+        className: withBaseName("label"),
+        children: label
+      }) : null,
+      /* @__PURE__ */ jsx("div", {
+        className: withBaseName("clickable"),
+        onMouseDown: disabled ? void 0 : onMouseDown,
+        children: /* @__PURE__ */ jsxs("div", {
+          className: withBaseName("track"),
+          style: trackStyle,
+          ref: trackRef,
+          children: [
+            /* @__PURE__ */ jsx(SliderRail, {}),
+            marks && !hideMarks ? /* @__PURE__ */ jsx(SliderRailMarks, {
+              min,
+              max,
+              marks
+            }) : null,
+            marks && !hideMarkLabels ? /* @__PURE__ */ jsx(SliderMarkLabels, {
+              min,
+              max,
+              marks
+            }) : null,
+            /* @__PURE__ */ jsx(SliderSelection, {
+              valueLength
+            }),
+            (Array.isArray(value) ? value : [value]).map((v, i) => /* @__PURE__ */ jsx(SliderHandle, {
+              min,
+              max,
+              value: v,
+              index: i,
+              disabled: !!disabled,
+              valueLength,
+              style: handleStyles[i]
+            }, i))
+          ]
+        })
+      })
+    ]
+  });
+});
+
+export { Slider };
+//# sourceMappingURL=Slider.js.map

package/dist-es/slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sources":["../src/slider/Slider.tsx"],"sourcesContent":["import { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { SliderHandle } from \"./internal/SliderHandle\";\nimport { SliderMarkLabels } from \"./internal/SliderMarkLabels\";\nimport { SliderRail } from \"./internal/SliderRail\";\nimport { SliderMark, SliderRailMarks } from \"./internal/SliderRailMarks\";\nimport { SliderSelection } from \"./internal/SliderSelection\";\nimport { createHandleStyles, createTrackStyle } from \"./internal/styles\";\nimport { useSliderKeyDown } from \"./internal/useSliderKeyDown\";\nimport { useSliderMouseDown } from \"./internal/useSliderMouseDown\";\nimport { useValueUpdater } from \"./internal/utils\";\nimport { SliderChangeHandler, SliderValue } from \"./types\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport sliderCss from \"./Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSlider\");\n\nconst defaultMin = 0;\nconst defaultMax = 100;\nconst defaultStep = 1;\n\nexport interface SliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  label?: string;\n  min?: number;\n  max?: number;\n  step?: number;\n  pageStep?: number;\n  value?: SliderValue;\n  defaultValue?: SliderValue;\n  pushable?: boolean;\n  pushDistance?: number;\n  disabled?: boolean;\n  onChange?: SliderChangeHandler;\n  marks?: SliderMark[];\n  hideMarks?: boolean;\n  hideMarkLabels?: boolean;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n  {\n    min = defaultMin,\n    max = defaultMax,\n    step = defaultStep,\n    pageStep = step,\n    value: valueProp,\n    defaultValue = defaultMin,\n    onChange,\n    label,\n    className,\n    pushable,\n    pushDistance = 0,\n    disabled,\n    marks,\n    hideMarks,\n    hideMarkLabels,\n    ...restProps\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-slider\",\n    css: sliderCss,\n    window: targetWindow,\n  });\n\n  const trackRef = useRef<HTMLDivElement>(null);\n\n  const [value, setValue] = useControlled<SliderValue>({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Slider\",\n    state: \"Value\",\n  });\n\n  const updateValueItem = useValueUpdater(pushable, pushDistance, min, max);\n\n  const trackStyle = useMemo(\n    () => createTrackStyle(min, max, value),\n    [min, max, value]\n  );\n\n  const valueLength = Array.isArray(value) ? value.length : 1;\n\n  const handleStyles: CSSProperties[] = useMemo(\n    () => createHandleStyles(valueLength),\n    [valueLength]\n  );\n\n  const onMouseDown = useSliderMouseDown(\n    trackRef,\n    value,\n    min,\n    max,\n    step,\n    updateValueItem,\n    setValue,\n    onChange\n  );\n\n  const onKeyDown = useSliderKeyDown(\n    value,\n    min,\n    max,\n    pageStep,\n    step,\n    updateValueItem,\n    setValue,\n    onChange\n  );\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n        },\n        className\n      )}\n      ref={ref}\n      onKeyDown={disabled ? undefined : onKeyDown}\n      aria-label={`${label} slider from ${min} to ${max}`}\n      role=\"group\"\n    >\n      {label !== undefined ? (\n        <div className={withBaseName(\"label\")}>{label}</div>\n      ) : null}\n      <div\n        className={withBaseName(\"clickable\")}\n        onMouseDown={disabled ? undefined : onMouseDown}\n      >\n        <div\n          className={withBaseName(\"track\")}\n          style={trackStyle}\n          ref={trackRef}\n        >\n          <SliderRail />\n          {marks && !hideMarks ? (\n            <SliderRailMarks min={min} max={max} marks={marks} />\n          ) : null}\n          {marks && !hideMarkLabels ? (\n            <SliderMarkLabels min={min} max={max} marks={marks} />\n          ) : null}\n          <SliderSelection valueLength={valueLength} />\n          {(Array.isArray(value) ? value : [value]).map((v, i) => (\n            <SliderHandle\n              key={i}\n              min={min}\n              max={max}\n              value={v}\n              index={i}\n              disabled={!!disabled}\n              valueLength={valueLength}\n              style={handleStyles[i]}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n});\n"],"names":["Slider","sliderCss"],"mappings":"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"}

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

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, Tooltip } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { getSliderAriaLabel } from './utils.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from '../Slider.css.js';
+
+const withBaseName = makePrefixer("saltSliderHandle");
+function SliderHandle(props) {
+  const { min, max, value, disabled, valueLength, index, style } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-slider",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx(Tooltip, {
+    content: value,
+    placement: "top",
+    children: /* @__PURE__ */ jsx("div", {
+      className: clsx(withBaseName(), {
+        [withBaseName("min")]: value === min,
+        [withBaseName("max")]: value === max
+      }),
+      style,
+      role: "slider",
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": value,
+      "aria-disabled": disabled,
+      "aria-label": getSliderAriaLabel(valueLength, index),
+      tabIndex: 0,
+      "data-handle-index": index
+    })
+  });
+}
+
+export { SliderHandle };
+//# sourceMappingURL=SliderHandle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderHandle.js","sources":["../src/slider/internal/SliderHandle.tsx"],"sourcesContent":["import { makePrefixer, Tooltip } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { CSSProperties } from \"react\";\nimport { getSliderAriaLabel } from \"./utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport sliderCss from \"../Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderHandle\");\n\nexport interface SliderHandleProps {\n  min: number;\n  max: number;\n  value: number;\n  index: number;\n  disabled: boolean;\n  valueLength: number;\n  style: CSSProperties;\n}\n\nexport function SliderHandle(props: SliderHandleProps): JSX.Element {\n  const { min, max, value, disabled, valueLength, index, style } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-slider\",\n    css: sliderCss,\n    window: targetWindow,\n  });\n\n  return (\n    <Tooltip content={value} placement=\"top\">\n      <div\n        className={clsx(withBaseName(), {\n          [withBaseName(\"min\")]: value === min,\n          [withBaseName(\"max\")]: value === max,\n        })}\n        style={style}\n        role=\"slider\"\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-disabled={disabled}\n        aria-label={getSliderAriaLabel(valueLength, index)}\n        tabIndex={0}\n        data-handle-index={index}\n      />\n    </Tooltip>\n  );\n}\n"],"names":["sliderCss"],"mappings":";;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAY7C,SAAS,aAAa,KAAuC,EAAA;AAClE,EAAM,MAAA,EAAE,KAAK,GAAK,EAAA,KAAA,EAAO,UAAU,WAAa,EAAA,KAAA,EAAO,OAAU,GAAA,KAAA,CAAA;AAEjE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,IAAQ,OAAS,EAAA,KAAA;AAAA,IAAO,SAAU,EAAA,KAAA;AAAA,IACjC,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,QAC9B,CAAC,YAAA,CAAa,KAAK,CAAA,GAAI,KAAU,KAAA,GAAA;AAAA,QACjC,CAAC,YAAA,CAAa,KAAK,CAAA,GAAI,KAAU,KAAA,GAAA;AAAA,OAClC,CAAA;AAAA,MACD,KAAA;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACL,eAAe,EAAA,GAAA;AAAA,MACf,eAAe,EAAA,GAAA;AAAA,MACf,eAAe,EAAA,KAAA;AAAA,MACf,eAAe,EAAA,QAAA;AAAA,MACf,YAAA,EAAY,kBAAmB,CAAA,WAAA,EAAa,KAAK,CAAA;AAAA,MACjD,QAAU,EAAA,CAAA;AAAA,MACV,mBAAmB,EAAA,KAAA;AAAA,KACrB,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { createSliderMarkLabelsStyle, createSliderMarkLabelStyles } from './styles.js';
+import { isLabeledMark } from './utils.js';
+import { useMemo } from 'react';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from '../Slider.css.js';
+
+const withBaseName = makePrefixer("saltSliderMarkLabels");
+function SliderMarkLabels(props) {
+  const { min, max, marks } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-slider",
+    css: css_248z,
+    window: targetWindow
+  });
+  const style = useMemo(
+    () => createSliderMarkLabelsStyle(min, max, marks),
+    [min, max, marks]
+  );
+  const labelStyles = useMemo(
+    () => createSliderMarkLabelStyles(marks),
+    [marks]
+  );
+  return /* @__PURE__ */ jsx("div", {
+    className: withBaseName(),
+    style,
+    children: marks.map((mark, i) => {
+      return /* @__PURE__ */ jsx("div", {
+        className: withBaseName("label"),
+        style: labelStyles[i],
+        children: isLabeledMark(mark) ? mark.label : `${mark}`
+      }, i);
+    })
+  });
+}
+
+export { SliderMarkLabels };
+//# sourceMappingURL=SliderMarkLabels.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderMarkLabels.js","sources":["../src/slider/internal/SliderMarkLabels.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport {\n  createSliderMarkLabelsStyle,\n  createSliderMarkLabelStyles,\n} from \"./styles\";\nimport { isLabeledMark } from \"./utils\";\nimport { SliderMark } from \"./SliderRailMarks\";\nimport { useMemo } from \"react\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport sliderCss from \"../Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderMarkLabels\");\n\nexport interface SliderMarkLabelsProps {\n  min: number;\n  max: number;\n  marks: SliderMark[];\n}\n\nexport function SliderMarkLabels(props: SliderMarkLabelsProps) {\n  const { min, max, marks } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-slider\",\n    css: sliderCss,\n    window: targetWindow,\n  });\n\n  const style = useMemo(\n    () => createSliderMarkLabelsStyle(min, max, marks),\n    [min, max, marks]\n  );\n  const labelStyles = useMemo(\n    () => createSliderMarkLabelStyles(marks),\n    [marks]\n  );\n  return (\n    <div className={withBaseName()} style={style}>\n      {marks.map((mark, i) => {\n        return (\n          <div key={i} className={withBaseName(\"label\")} style={labelStyles[i]}>\n            {isLabeledMark(mark) ? mark.label : `${mark}`}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["sliderCss"],"mappings":";;;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;AAQjD,SAAS,iBAAiB,KAA8B,EAAA;AAC7D,EAAA,MAAM,EAAE,GAAA,EAAK,GAAK,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AAE5B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,MAAM,2BAAA,CAA4B,GAAK,EAAA,GAAA,EAAK,KAAK,CAAA;AAAA,IACjD,CAAC,GAAK,EAAA,GAAA,EAAK,KAAK,CAAA;AAAA,GAClB,CAAA;AACA,EAAA,MAAM,WAAc,GAAA,OAAA;AAAA,IAClB,MAAM,4BAA4B,KAAK,CAAA;AAAA,IACvC,CAAC,KAAK,CAAA;AAAA,GACR,CAAA;AACA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAG,KAAA;AAAA,IAC7B,QAAM,EAAA,KAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,CAAM,KAAA;AACtB,MAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,QAAY,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAAG,OAAO,WAAY,CAAA,CAAA,CAAA;AAAA,QAC/D,QAAc,EAAA,aAAA,CAAA,IAAI,CAAI,GAAA,IAAA,CAAK,QAAQ,CAAG,EAAA,IAAA,CAAA,CAAA;AAAA,OAAA,EAD/B,CAEV,CAAA,CAAA;AAAA,KAEH,CAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from '../Slider.css.js';
+
+const withBaseName = makePrefixer("saltSliderRail");
+function SliderRail(props) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-slider",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx("div", {
+    className: withBaseName()
+  });
+}
+
+export { SliderRail };
+//# sourceMappingURL=SliderRail.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderRail.js","sources":["../src/slider/internal/SliderRail.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport sliderCss from \"../Slider.css\";\n\nexport interface SliderRailProps {}\n\nconst withBaseName = makePrefixer(\"saltSliderRail\");\n\nexport function SliderRail(props: SliderRailProps) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-slider\",\n    css: sliderCss,\n    window: targetWindow,\n  });\n  return <div className={withBaseName()} />;\n}\n"],"names":["sliderCss"],"mappings":";;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAE3C,SAAS,WAAW,KAAwB,EAAA;AACjD,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,GAAG,CAAA,CAAA;AACzC;;;;"}

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

@@ -0,0 +1,44 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { makePrefixer } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { createSliderRailMarksStyle, createHandleStyles } from './styles.js';
+import { isMarkAtMax } from './utils.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from '../Slider.css.js';
+
+const withBaseName = makePrefixer("saltSliderRailMarks");
+function SliderRailMarks(props) {
+  const { min, max, marks } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-slider",
+    css: css_248z,
+    window: targetWindow
+  });
+  const style = useMemo(
+    () => createSliderRailMarksStyle(min, max, marks),
+    [min, max, marks]
+  );
+  const marksLength = marks.length;
+  const markStyles = useMemo(
+    () => createHandleStyles(marksLength),
+    [marksLength]
+  );
+  return /* @__PURE__ */ jsx("div", {
+    className: withBaseName(),
+    style,
+    children: marks.map((mark, i) => {
+      return /* @__PURE__ */ jsx("div", {
+        className: clsx(withBaseName("mark"), {
+          [withBaseName("max")]: isMarkAtMax(max, mark)
+        }),
+        style: markStyles[i]
+      }, `Mark${i}`);
+    })
+  });
+}
+
+export { SliderRailMarks };
+//# sourceMappingURL=SliderRailMarks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderRailMarks.js","sources":["../src/slider/internal/SliderRailMarks.tsx"],"sourcesContent":["import { ReactNode, useMemo } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { createHandleStyles, createSliderRailMarksStyle } from \"./styles\";\nimport { isMarkAtMax } from \"./utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport sliderCss from \"../Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderRailMarks\");\n\nexport interface LabeledMark {\n  value: number;\n  label: ReactNode;\n}\n\nexport type SliderMark = number | LabeledMark;\n\nexport interface SliderRailMarksProps {\n  min: number;\n  max: number;\n  marks: SliderMark[];\n}\n\nexport function SliderRailMarks(props: SliderRailMarksProps) {\n  const { min, max, marks } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-slider\",\n    css: sliderCss,\n    window: targetWindow,\n  });\n\n  const style = useMemo(\n    () => createSliderRailMarksStyle(min, max, marks),\n    [min, max, marks]\n  );\n  const marksLength = marks.length;\n  const markStyles = useMemo(\n    () => createHandleStyles(marksLength),\n    [marksLength]\n  );\n\n  return (\n    <div className={withBaseName()} style={style}>\n      {marks.map((mark, i) => {\n        return (\n          <div\n            key={`Mark${i}`}\n            className={clsx(withBaseName(\"mark\"), {\n              [withBaseName(\"max\")]: isMarkAtMax(max, mark),\n            })}\n            style={markStyles[i]}\n          />\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["sliderCss"],"mappings":";;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAehD,SAAS,gBAAgB,KAA6B,EAAA;AAC3D,EAAA,MAAM,EAAE,GAAA,EAAK,GAAK,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AAE5B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,MAAM,0BAAA,CAA2B,GAAK,EAAA,GAAA,EAAK,KAAK,CAAA;AAAA,IAChD,CAAC,GAAK,EAAA,GAAA,EAAK,KAAK,CAAA;AAAA,GAClB,CAAA;AACA,EAAA,MAAM,cAAc,KAAM,CAAA,MAAA,CAAA;AAC1B,EAAA,MAAM,UAAa,GAAA,OAAA;AAAA,IACjB,MAAM,mBAAmB,WAAW,CAAA;AAAA,IACpC,CAAC,WAAW,CAAA;AAAA,GACd,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAG,KAAA;AAAA,IAC7B,QAAM,EAAA,KAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,CAAM,KAAA;AACtB,MAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,QAEC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,MAAM,CAAG,EAAA;AAAA,UACpC,CAAC,YAAa,CAAA,KAAK,CAAI,GAAA,WAAA,CAAY,KAAK,IAAI,CAAA;AAAA,SAC7C,CAAA;AAAA,QACD,OAAO,UAAW,CAAA,CAAA,CAAA;AAAA,OAAA,EAJb,OAAO,CAKd,CAAA,CAAA,CAAA,CAAA;AAAA,KAEH,CAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from '../Slider.css.js';
+
+const withBaseName = makePrefixer("saltSliderSelection");
+function SliderSelection({ valueLength }) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-slider",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx("div", {
+    className: valueLength < 2 ? withBaseName() : withBaseName("range")
+  });
+}
+
+export { SliderSelection };
+//# sourceMappingURL=SliderSelection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderSelection.js","sources":["../src/slider/internal/SliderSelection.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport sliderCss from \"../Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderSelection\");\n\nexport interface SliderSelectionProps {\n  valueLength: number;\n}\n\nexport function SliderSelection({ valueLength }: SliderSelectionProps) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-slider\",\n    css: sliderCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div className={valueLength < 2 ? withBaseName() : withBaseName(\"range\")} />\n  );\n}\n"],"names":["sliderCss"],"mappings":";;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAMvC,SAAA,eAAA,CAAgB,EAAE,WAAA,EAAqC,EAAA;AACrE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,WAAc,GAAA,CAAA,GAAI,YAAa,EAAA,GAAI,aAAa,OAAO,CAAA;AAAA,GAAG,CAAA,CAAA;AAE9E;;;;"}

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

@@ -0,0 +1,89 @@
+import { useRef, useEffect, useCallback } from 'react';
+import { roundValue, clampValue } from './utils.js';
+
+const valueFromClientX = (context, x) => {
+  const { min, max, step, trackRef } = context;
+  const rect = trackRef.current.getBoundingClientRect();
+  const localX = x - rect.x;
+  let v = localX / rect.width * (max - min) + min;
+  v = roundValue(v, step);
+  v = clampValue(v, min, max);
+  return v;
+};
+function getNearestHandle(value, clickValue) {
+  if (!Array.isArray(value)) {
+    return 0;
+  }
+  let minDistance = Number.MAX_VALUE;
+  let handleIndex = -1;
+  value.forEach((v, i) => {
+    const d = Math.abs(clickValue - v);
+    if (d < minDistance) {
+      minDistance = d;
+      handleIndex = i;
+    }
+  });
+  return handleIndex;
+}
+function useSliderMouseDown(trackRef, value, min, max, step, updateValueItem, setValue, onChange) {
+  const mouseContext = useRef({
+    min,
+    max,
+    step,
+    value,
+    trackRef,
+    updateValueItem,
+    setValue,
+    onChange
+  });
+  useEffect(() => {
+    const c = mouseContext.current;
+    c.min = min;
+    c.max = max;
+    c.step = step;
+    c.value = value;
+    c.updateValueItem = updateValueItem;
+    c.onChange = onChange;
+    c.setValue = setValue;
+  }, [min, max, step, value, setValue, updateValueItem, onChange]);
+  const onMouseMove = useCallback((event) => {
+    const { handleIndex, value: value2, updateValueItem: updateValueItem2, setValue: setValue2, onChange: onChange2 } = mouseContext.current;
+    if (handleIndex === void 0) {
+      return;
+    }
+    const { clientX } = event;
+    const clickValue = valueFromClientX(mouseContext.current, clientX);
+    const newValue = updateValueItem2(value2, handleIndex, clickValue);
+    if (newValue !== value2) {
+      setValue2(newValue);
+      if (onChange2) {
+        onChange2(newValue);
+      }
+    }
+  }, []);
+  const onMouseUp = useCallback((event) => {
+    document.removeEventListener("mouseup", onMouseUp);
+    document.removeEventListener("mousemove", onMouseMove);
+    mouseContext.current.handleIndex = void 0;
+  }, []);
+  return useCallback((event) => {
+    const { value: value2, setValue: setValue2, onChange: onChange2 } = mouseContext.current;
+    document.addEventListener("mouseup", onMouseUp);
+    document.addEventListener("mousemove", onMouseMove);
+    const { clientX } = event;
+    const clickValue = valueFromClientX(mouseContext.current, clientX);
+    const handleIndex = getNearestHandle(value2, clickValue);
+    mouseContext.current.handleIndex = handleIndex;
+    const newValue = updateValueItem(value2, handleIndex, clickValue);
+    if (newValue !== value2) {
+      setValue2(newValue);
+      if (onChange2) {
+        onChange2(newValue);
+      }
+    }
+    event.preventDefault();
+  }, []);
+}
+
+export { useSliderMouseDown };
+//# sourceMappingURL=useSliderMouseDown.js.map

package/dist-es/stepped-tracker/StepLabel/StepLabel.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltStepLabel {\n  width: 100%;\n  text-align: center;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=StepLabel.css.js.map

package/dist-es/stepped-tracker/StepLabel/StepLabel.css.js.map

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