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

package/dist-es/query-input/internal/ValueList.js

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { makePrefixer } from '@salt-ds/core';
-import { ChevronLeftIcon } from '@salt-ds/icons';
+import { makePrefixer, useIcon } from '@salt-ds/core';
 import '../../list/Highlighter.js';
 import { ListItem } from '../../list/ListItem.js';
 import { List } from '../../list/List.js';
@@ -21,6 +20,7 @@ function ValueList(props) {
     highlightedValueIndex,
     setHighlightedValueIndex
   } = props;
+  const { PreviousIcon } = useIcon();
   const handleSelect = (_, value) => {
     onValueToggle(category, value);
   };
@@ -47,7 +47,7 @@ function ValueList(props) {
           onClick: onBack,
           selectable: false,
           children: [
-            /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+            /* @__PURE__ */ jsx(PreviousIcon, {}),
             /* @__PURE__ */ jsx("div", {
               className: withBaseName("category"),
               children: category ? category.name : ""

package/dist-es/query-input/internal/ValueList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValueList.js","sources":["../src/query-input/internal/ValueList.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { ChevronLeftIcon } from \"@salt-ds/icons\";\nimport type { Dispatch, ReactElement, SetStateAction } from \"react\";\nimport type { SelectHandler } from \"../../common-hooks\";\nimport { List, ListItem } from \"../../list\";\nimport type { QueryInputCategory } from \"../queryInputTypes\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputValueList\");\n\nexport interface ValueListProps {\n  category: QueryInputCategory | null;\n  rootWidth: number;\n  onBack: () => void;\n  selectedValues: string[];\n  onValueToggle: (category: QueryInputCategory, value: string) => void;\n  highlightedValueIndex?: number;\n  setHighlightedValueIndex: Dispatch<SetStateAction<number>>;\n}\n\nexport function ValueList(props: ValueListProps) {\n  const {\n    category,\n    rootWidth,\n    onBack,\n    selectedValues,\n    onValueToggle,\n    highlightedValueIndex,\n    setHighlightedValueIndex,\n  } = props;\n\n  const handleSelect: SelectHandler = (_, value: string) => {\n    onValueToggle(category!, value);\n  };\n\n  const items: ReactElement[] = category\n    ? category.values.map((value) => (\n        <ListItem key={value} item={value}>\n          {value}\n        </ListItem>\n      ))\n    : [];\n\n  return (\n    <div className={withBaseName()} tabIndex={0} data-testid=\"value-list\">\n      <List\n        borderless={true}\n        checkable={false}\n        highlightedIndex={highlightedValueIndex}\n        onHighlight={setHighlightedValueIndex}\n        onSelect={handleSelect}\n        selectionStrategy=\"multiple\"\n        selected={selectedValues}\n        width={rootWidth}\n      >\n        <ListItem\n          className={withBaseName(\"back\")}\n          onClick={onBack}\n          selectable={false}\n        >\n          <ChevronLeftIcon />\n          <div className={withBaseName(\"category\")}>\n            {category ? category.name : \"\"}\n          </div>\n        </ListItem>\n        {items}\n      </List>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA,CAAA;AAYpD,SAAS,UAAU,KAAuB,EAAA;AAC/C,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,qBAAA;AAAA,IACA,wBAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,YAAA,GAA8B,CAAC,CAAA,EAAG,KAAkB,KAAA;AACxD,IAAA,aAAA,CAAc,UAAW,KAAK,CAAA,CAAA;AAAA,GAChC,CAAA;AAEA,EAAA,MAAM,QAAwB,QAC1B,GAAA,QAAA,CAAS,OAAO,GAAI,CAAA,CAAC,0BAClB,GAAA,CAAA,QAAA,EAAA;AAAA,IAAqB,IAAM,EAAA,KAAA;AAAA,IACzB,QAAA,EAAA,KAAA;AAAA,GADY,EAAA,KAEf,CACD,CAAA,GACD,EAAC,CAAA;AAEL,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAG,QAAU,EAAA,CAAA;AAAA,IAAG,aAAY,EAAA,YAAA;AAAA,IACvD,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA;AAAA,MACC,UAAY,EAAA,IAAA;AAAA,MACZ,SAAW,EAAA,KAAA;AAAA,MACX,gBAAkB,EAAA,qBAAA;AAAA,MAClB,WAAa,EAAA,wBAAA;AAAA,MACb,QAAU,EAAA,YAAA;AAAA,MACV,iBAAkB,EAAA,UAAA;AAAA,MAClB,QAAU,EAAA,cAAA;AAAA,MACV,KAAO,EAAA,SAAA;AAAA,MAEP,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,QAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAC9B,OAAS,EAAA,MAAA;AAAA,UACT,UAAY,EAAA,KAAA;AAAA,UAEZ,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,CAAA;AAAA,4BAChB,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,cACpC,QAAA,EAAA,QAAA,GAAW,SAAS,IAAO,GAAA,EAAA;AAAA,aAC9B,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,QACC,KAAA;AAAA,OAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ValueList.js","sources":["../src/query-input/internal/ValueList.tsx"],"sourcesContent":["import { makePrefixer, useIcon } from \"@salt-ds/core\";\nimport type { Dispatch, ReactElement, SetStateAction } from \"react\";\nimport type { SelectHandler } from \"../../common-hooks\";\nimport { List, ListItem } from \"../../list\";\nimport type { QueryInputCategory } from \"../queryInputTypes\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputValueList\");\n\nexport interface ValueListProps {\n  category: QueryInputCategory | null;\n  rootWidth: number;\n  onBack: () => void;\n  selectedValues: string[];\n  onValueToggle: (category: QueryInputCategory, value: string) => void;\n  highlightedValueIndex?: number;\n  setHighlightedValueIndex: Dispatch<SetStateAction<number>>;\n}\n\nexport function ValueList(props: ValueListProps) {\n  const {\n    category,\n    rootWidth,\n    onBack,\n    selectedValues,\n    onValueToggle,\n    highlightedValueIndex,\n    setHighlightedValueIndex,\n  } = props;\n  const { PreviousIcon } = useIcon();\n\n  const handleSelect: SelectHandler = (_, value: string) => {\n    onValueToggle(category!, value);\n  };\n\n  const items: ReactElement[] = category\n    ? category.values.map((value) => (\n        <ListItem key={value} item={value}>\n          {value}\n        </ListItem>\n      ))\n    : [];\n\n  return (\n    <div className={withBaseName()} tabIndex={0} data-testid=\"value-list\">\n      <List\n        borderless={true}\n        checkable={false}\n        highlightedIndex={highlightedValueIndex}\n        onHighlight={setHighlightedValueIndex}\n        onSelect={handleSelect}\n        selectionStrategy=\"multiple\"\n        selected={selectedValues}\n        width={rootWidth}\n      >\n        <ListItem\n          className={withBaseName(\"back\")}\n          onClick={onBack}\n          selectable={false}\n        >\n          <PreviousIcon />\n          <div className={withBaseName(\"category\")}>\n            {category ? category.name : \"\"}\n          </div>\n        </ListItem>\n        {items}\n      </List>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA,CAAA;AAYpD,SAAS,UAAU,KAAuB,EAAA;AAC/C,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,qBAAA;AAAA,IACA,wBAAA;AAAA,GACE,GAAA,KAAA,CAAA;AACJ,EAAM,MAAA,EAAE,YAAa,EAAA,GAAI,OAAQ,EAAA,CAAA;AAEjC,EAAM,MAAA,YAAA,GAA8B,CAAC,CAAA,EAAG,KAAkB,KAAA;AACxD,IAAA,aAAA,CAAc,UAAW,KAAK,CAAA,CAAA;AAAA,GAChC,CAAA;AAEA,EAAA,MAAM,QAAwB,QAC1B,GAAA,QAAA,CAAS,OAAO,GAAI,CAAA,CAAC,0BAClB,GAAA,CAAA,QAAA,EAAA;AAAA,IAAqB,IAAM,EAAA,KAAA;AAAA,IACzB,QAAA,EAAA,KAAA;AAAA,GADY,EAAA,KAEf,CACD,CAAA,GACD,EAAC,CAAA;AAEL,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAG,QAAU,EAAA,CAAA;AAAA,IAAG,aAAY,EAAA,YAAA;AAAA,IACvD,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA;AAAA,MACC,UAAY,EAAA,IAAA;AAAA,MACZ,SAAW,EAAA,KAAA;AAAA,MACX,gBAAkB,EAAA,qBAAA;AAAA,MAClB,WAAa,EAAA,wBAAA;AAAA,MACb,QAAU,EAAA,YAAA;AAAA,MACV,iBAAkB,EAAA,UAAA;AAAA,MAClB,QAAU,EAAA,cAAA;AAAA,MACV,KAAO,EAAA,SAAA;AAAA,MAEP,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,QAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAC9B,OAAS,EAAA,MAAA;AAAA,UACT,UAAY,EAAA,KAAA;AAAA,UAEZ,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAa,EAAA,EAAA,CAAA;AAAA,4BACb,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,cACpC,QAAA,EAAA,QAAA,GAAW,SAAS,IAAO,GAAA,EAAA;AAAA,aAC9B,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,QACC,KAAA;AAAA,OAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/search-input/SearchInput.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
-import { useForkRef, useControlled, Button } from '@salt-ds/core';
-import { CloseIcon, SearchIcon } from '@salt-ds/icons';
+import { useIcon, useForkRef, useControlled, Button } from '@salt-ds/core';
+import { SearchIcon } from '@salt-ds/icons';
 import { clsx } from 'clsx';
 import { forwardRef, useRef } from 'react';
 import { InputLegacy } from '../input-legacy/InputLegacy.js';
@@ -28,6 +28,7 @@ const SearchInput = forwardRef(
       css: css_248z,
       window: targetWindow
     });
+    const { CloseIcon } = useIcon();
     const inputRef = useRef(null);
     const handleRef = useForkRef(inputRef, ref);
     const [value, setValue, isControlled] = useControlled({

package/dist-es/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sources":["../src/search-input/SearchInput.tsx"],"sourcesContent":["import { Button, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { CloseIcon, SearchIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentType,\n  type KeyboardEvent,\n  type SyntheticEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport {\n  InputLegacy as Input,\n  type InputLegacyProps as InputProps,\n  StaticInputAdornment,\n} from \"../input-legacy\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport searchInputCss from \"./SearchInput.css\";\n\nconst baseName = \"saltSearchInput\";\n\n//TODO formfield integration\n\nexport interface SearchInputProps extends Omit<InputProps, \"onSubmit\"> {\n  /**\n   * Override \"search\" icon.\n   * Set to `null` to hide.\n   */\n  IconComponent?: ComponentType<any> | null;\n  /**\n   * Callback for when clear button is clicked.\n   */\n  onClear?: () => void;\n  /**\n   * Callback for change event.\n   * Event is either an Input change event or a Button click event.\n   */\n  onChange?: (event: SyntheticEvent<unknown>, value: string) => void;\n  /**\n   * Callback to trigger search.\n   */\n  onSubmit?: (value: InputProps[\"value\"]) => void;\n}\n\nexport const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      IconComponent = SearchIcon,\n      className,\n      onChange,\n      onClear,\n      onKeyUp,\n      onSubmit,\n      value: valueProp,\n      defaultValue,\n      ...other\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-search-input\",\n      css: searchInputCss,\n      window: targetWindow,\n    });\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(inputRef, ref);\n\n    const [value, setValue, isControlled] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"SearchInput\",\n      state: \"value\",\n    });\n\n    const handleChange = (\n      event: ChangeEvent<HTMLInputElement>,\n      newValue: string,\n    ) => {\n      setValue(newValue);\n      onChange?.(event, newValue);\n    };\n\n    const handleClear = (event: SyntheticEvent<HTMLButtonElement>) => {\n      setValue(\"\");\n      if (!isControlled) {\n        onChange?.(event, \"\");\n      }\n      onClear?.();\n      inputRef.current?.focus();\n    };\n\n    const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === \"Enter\" && onSubmit && value) {\n        onSubmit?.(value);\n      }\n\n      onKeyUp?.(event);\n    };\n\n    return (\n      <Input\n        className={clsx(baseName, className)}\n        ref={handleRef}\n        endAdornment={\n          !!value && (\n            <Button\n              className={clsx(`${baseName}-clearButton`)}\n              onClick={handleClear}\n              variant=\"secondary\"\n            >\n              <CloseIcon\n                aria-label=\"clear input\"\n                className={`${baseName}-clearIcon`}\n              />\n            </Button>\n          )\n        }\n        onChange={handleChange}\n        onKeyUp={handleKeyUp}\n        startAdornment={\n          IconComponent && (\n            <StaticInputAdornment>\n              <IconComponent className={`${baseName}-icon`} />\n            </StaticInputAdornment>\n          )\n        }\n        value={value || \"\"}\n        {...other}\n      />\n    );\n  },\n);\n"],"names":["SearchInput","searchInputCss","Input"],"mappings":"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"}
+{"version":3,"file":"SearchInput.js","sources":["../src/search-input/SearchInput.tsx"],"sourcesContent":["import { Button, useControlled, useForkRef, useIcon } from \"@salt-ds/core\";\nimport { SearchIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentType,\n  type KeyboardEvent,\n  type SyntheticEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport {\n  InputLegacy as Input,\n  type InputLegacyProps as InputProps,\n  StaticInputAdornment,\n} from \"../input-legacy\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport searchInputCss from \"./SearchInput.css\";\n\nconst baseName = \"saltSearchInput\";\n\n//TODO formfield integration\n\nexport interface SearchInputProps extends Omit<InputProps, \"onSubmit\"> {\n  /**\n   * Override \"search\" icon.\n   * Set to `null` to hide.\n   */\n  IconComponent?: ComponentType<any> | null;\n  /**\n   * Callback for when clear button is clicked.\n   */\n  onClear?: () => void;\n  /**\n   * Callback for change event.\n   * Event is either an Input change event or a Button click event.\n   */\n  onChange?: (event: SyntheticEvent<unknown>, value: string) => void;\n  /**\n   * Callback to trigger search.\n   */\n  onSubmit?: (value: InputProps[\"value\"]) => void;\n}\n\nexport const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      IconComponent = SearchIcon,\n      className,\n      onChange,\n      onClear,\n      onKeyUp,\n      onSubmit,\n      value: valueProp,\n      defaultValue,\n      ...other\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-search-input\",\n      css: searchInputCss,\n      window: targetWindow,\n    });\n    const { CloseIcon } = useIcon();\n    const inputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(inputRef, ref);\n\n    const [value, setValue, isControlled] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"SearchInput\",\n      state: \"value\",\n    });\n\n    const handleChange = (\n      event: ChangeEvent<HTMLInputElement>,\n      newValue: string,\n    ) => {\n      setValue(newValue);\n      onChange?.(event, newValue);\n    };\n\n    const handleClear = (event: SyntheticEvent<HTMLButtonElement>) => {\n      setValue(\"\");\n      if (!isControlled) {\n        onChange?.(event, \"\");\n      }\n      onClear?.();\n      inputRef.current?.focus();\n    };\n\n    const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === \"Enter\" && onSubmit && value) {\n        onSubmit?.(value);\n      }\n\n      onKeyUp?.(event);\n    };\n\n    return (\n      <Input\n        className={clsx(baseName, className)}\n        ref={handleRef}\n        endAdornment={\n          !!value && (\n            <Button\n              className={clsx(`${baseName}-clearButton`)}\n              onClick={handleClear}\n              variant=\"secondary\"\n            >\n              <CloseIcon\n                aria-label=\"clear input\"\n                className={`${baseName}-clearIcon`}\n              />\n            </Button>\n          )\n        }\n        onChange={handleChange}\n        onKeyUp={handleKeyUp}\n        startAdornment={\n          IconComponent && (\n            <StaticInputAdornment>\n              <IconComponent className={`${baseName}-icon`} />\n            </StaticInputAdornment>\n          )\n        }\n        value={value || \"\"}\n        {...other}\n      />\n    );\n  },\n);\n"],"names":["SearchInput","searchInputCss","Input"],"mappings":"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"}

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

@@ -1,4 +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-content-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-content-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";
+var css_248z = ".saltSlider {\n  display: grid;\n  gap: var(--salt-spacing-100);\n  grid-template-columns: auto 1fr auto;\n  user-select: none;\n}\n\n.saltSlider-label {\n  height: var(--salt-size-base);\n  display: flex;\n  align-items: center;\n}\n\n.saltSlider-bottomLabel {\n  grid-template-columns: 1fr;\n  gap: 0;\n}\n.saltSlider-bottomLabel .saltSlider-label {\n  height: auto;\n}\n\n.saltSlider-labelMinBottom {\n  grid-row: 2;\n  grid-column: 1;\n  justify-self: start;\n  width: min-content;\n}\n\n.saltSlider-labelMaxBottom {\n  grid-row: 2;\n  grid-column: 1;\n  justify-self: end;\n  width: min-content;\n}\n\n.saltSliderTrack {\n  display: flex;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  height: var(--salt-size-base);\n}\n\n.saltSliderTrack-rail {\n  height: var(--salt-size-bar);\n  background: var(--salt-track-borderColor);\n  width: 100%;\n  position: absolute;\n}\n\n.saltSliderTrack:active {\n  cursor: grabbing;\n}\n\n.saltSliderThumb-container {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: translate(-50%, 0%);\n  width: var(--salt-size-base);\n  height: var(--salt-size-base);\n}\n\n.saltSliderThumb-tooltip {\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-status-info-borderColor);\n  border-style: var(--salt-container-borderStyle);\n  border-width: var(--salt-size-border);\n  line-height: var(--salt-text-lineHeight);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  color: var(--salt-content-primary-foreground);\n  max-width: var(--saltTooltip-maxWidth, 230px);\n  padding: var(--saltTooltip-padding, var(--salt-size-unit));\n  position: absolute;\n  z-index: var(--salt-zIndex-flyover);\n  transform: translate(0, -100%);\n  display: none;\n}\n\n.saltSliderThumb-tooltip-arrow {\n  position: absolute;\n  pointer-events: none;\n  top: 100%;\n  left: 50%;\n  transform: translate(-50%, 0);\n  stroke: none;\n  fill: var(--salt-container-primary-background);\n  stroke: var(--salt-status-info-borderColor);\n  stroke-width: var(--salt-size-border);\n  width: var(--salt-size-icon);\n  height: var(--salt-size-icon);\n}\n\n.saltSliderThumb-tooltip-visible {\n  display: block;\n}\n\n.saltSliderThumb-container:hover .saltSliderThumb-tooltip {\n  display: block;\n}\n\n.saltSliderThumb {\n  position: relative;\n  width: var(--salt-size-indicator);\n  height: var(--salt-size-selectable);\n  background: var(--salt-accent-borderColor);\n}\n\n.saltSliderThumb:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline-color: var(--salt-focused-outlineColor);\n}\n\n.saltSliderSelection {\n  height: var(--salt-size-bar);\n  background: var(--salt-accent-borderColor);\n  align-items: start;\n  position: absolute;\n}\n\n.saltSliderSelection-range {\n  align-items: center;\n}\n\n.saltSliderMarks {\n  position: relative;\n}\n\n.saltSliderMarks-mark {\n  position: absolute;\n  transform: translate(-50%);\n  line-height: var(--salt-text-lineHeight);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Slider.css.js.map

package/dist-es/slider/Slider.js

@@ -1,41 +1,30 @@
-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 { jsx, jsxs } from 'react/jsx-runtime';
+import { makePrefixer, useControlled, Label } 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 { SliderTrack } from './internal/SliderTrack.js';
+import { SliderMarks } from './internal/SliderMarks.js';
+import { SliderContext } from './internal/SliderContext.js';
 import css_248z from './Slider.css.js';
+import { parseValueProp } from './internal/utils.js';
 
 const withBaseName = makePrefixer("saltSlider");
 const defaultMin = 0;
-const defaultMax = 100;
+const defaultMax = 10;
 const defaultStep = 1;
 const Slider = forwardRef(function Slider2({
   min = defaultMin,
   max = defaultMax,
   step = defaultStep,
-  pageStep = step,
   value: valueProp,
-  defaultValue = defaultMin,
+  defaultValue = [0],
   onChange,
-  label,
   className,
-  pushable,
-  pushDistance = 0,
-  disabled,
-  marks,
-  hideMarks,
-  hideMarkLabels,
-  ...restProps
+  "aria-label": ariaLabel,
+  marks = "inline",
+  ...rest
 }, ref) {
   const targetWindow = useWindow();
   useComponentCssInjection({
@@ -43,95 +32,54 @@ const Slider = forwardRef(function Slider2({
     css: css_248z,
     window: targetWindow
   });
-  const trackRef = useRef(null);
   const [value, setValue] = useControlled({
-    controlled: valueProp,
+    controlled: parseValueProp(valueProp, min, max),
     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))
-          ]
+  const handleSliderChange = (value2) => {
+    setValue(value2);
+    onChange == null ? void 0 : onChange(value2);
+  };
+  return /* @__PURE__ */ jsx(SliderContext.Provider, {
+    value: {
+      value,
+      min,
+      max,
+      step,
+      onChange: handleSliderChange,
+      ariaLabel
+    },
+    children: /* @__PURE__ */ jsxs("div", {
+      ref,
+      className: clsx(
+        withBaseName(),
+        { [withBaseName("bottomLabel")]: marks !== "inline" },
+        className
+      ),
+      ...rest,
+      children: [
+        marks !== "all" && /* @__PURE__ */ jsx(Label, {
+          className: clsx(withBaseName("label"), {
+            [withBaseName("labelMinBottom")]: marks !== "inline"
+          }),
+          children: min
+        }),
+        /* @__PURE__ */ jsx(SliderTrack, {}),
+        marks !== "all" && /* @__PURE__ */ jsx(Label, {
+          className: clsx(withBaseName("label"), {
+            [withBaseName("labelMaxBottom")]: marks !== "inline"
+          }),
+          children: max
+        }),
+        marks === "all" && /* @__PURE__ */ jsx(SliderMarks, {
+          max,
+          min,
+          step
         })
-      })
-    ]
+      ]
+    })
   });
 });
 

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

@@ -1 +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  type CSSProperties,\n  type HTMLAttributes,\n  forwardRef,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { SliderHandle } from \"./internal/SliderHandle\";\nimport { SliderMarkLabels } from \"./internal/SliderMarkLabels\";\nimport { SliderRail } from \"./internal/SliderRail\";\nimport { type 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 type { SliderChangeHandler, SliderValue } from \"./types\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\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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"}
+{"version":3,"file":"Slider.js","sources":["../src/slider/Slider.tsx"],"sourcesContent":["import { Label, makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\nimport { SliderContext, SliderMarks, SliderTrack } from \"./internal\";\n\nimport sliderCss from \"./Slider.css\";\nimport { parseValueProp } from \"./internal/utils\";\nimport type { SliderChangeHandler, SliderValue } from \"./types\";\n\nconst withBaseName = makePrefixer(\"saltSlider\");\n\nconst defaultMin = 0;\nconst defaultMax = 10;\nconst defaultStep = 1;\n\nexport interface SliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  /**\n   * Minimum slider value\n   */\n  min?: number;\n  /**\n   * Maximum slider value\n   */\n  max?: number;\n  /**\n   * Minimum interval the slider thumb can move\n   */\n  step?: number;\n  /**\n   * Initial value of the slider\n   */\n  defaultValue?: SliderValue;\n  /**\n   * The markings the slider is displayed with\n   */\n  marks?: \"inline\" | \"bottom\" | \"all\";\n  /**\n   * Value of the slider, to be used when in a controlled state\n   */\n  value?: SliderValue;\n  /**\n   * Change handler to be used when in a controlled state\n   */\n  onChange?: SliderChangeHandler;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n  {\n    min = defaultMin,\n    max = defaultMax,\n    step = defaultStep,\n    value: valueProp,\n    defaultValue = [0],\n    onChange,\n    className,\n    \"aria-label\": ariaLabel,\n    marks = \"inline\",\n    ...rest\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-slider\",\n    css: sliderCss,\n    window: targetWindow,\n  });\n\n  const [value, setValue] = useControlled<SliderValue>({\n    controlled: parseValueProp(valueProp, min, max),\n    default: defaultValue,\n    name: \"Slider\",\n    state: \"Value\",\n  });\n\n  const handleSliderChange = (value: SliderValue) => {\n    setValue(value);\n    onChange?.(value);\n  };\n\n  return (\n    <SliderContext.Provider\n      value={{\n        value,\n        min,\n        max,\n        step,\n        onChange: handleSliderChange,\n        ariaLabel,\n      }}\n    >\n      <div\n        ref={ref}\n        className={clsx(\n          withBaseName(),\n          { [withBaseName(\"bottomLabel\")]: marks !== \"inline\" },\n          className,\n        )}\n        {...rest}\n      >\n        {marks !== \"all\" && (\n          <Label\n            className={clsx(withBaseName(\"label\"), {\n              [withBaseName(\"labelMinBottom\")]: marks !== \"inline\",\n            })}\n          >\n            {min}\n          </Label>\n        )}\n        <SliderTrack />\n        {marks !== \"all\" && (\n          <Label\n            className={clsx(withBaseName(\"label\"), {\n              [withBaseName(\"labelMaxBottom\")]: marks !== \"inline\",\n            })}\n          >\n            {max}\n          </Label>\n        )}\n        {marks === \"all\" && <SliderMarks max={max} min={min} step={step} />}\n      </div>\n    </SliderContext.Provider>\n  );\n});\n"],"names":["Slider","sliderCss","value"],"mappings":"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"}

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

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react';
+
+const SliderContext = createContext({
+  min: 0,
+  max: 10,
+  step: 1,
+  value: [0],
+  onChange: () => null,
+  ariaLabel: "slider"
+});
+function useSliderContext() {
+  return useContext(SliderContext);
+}
+
+export { SliderContext, useSliderContext };
+//# sourceMappingURL=SliderContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderContext.js","sources":["../src/slider/internal/SliderContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { SliderChangeHandler, SliderValue } from \"../types\";\nexport interface SliderContextValue {\n  min: number;\n  max: number;\n  step: number;\n  value: SliderValue;\n  onChange: SliderChangeHandler;\n  ariaLabel: string | undefined;\n}\n\nexport const SliderContext = createContext<SliderContextValue>({\n  min: 0,\n  max: 10,\n  step: 1,\n  value: [0],\n  onChange: () => null,\n  ariaLabel: \"slider\",\n});\n\nexport function useSliderContext() {\n  return useContext(SliderContext);\n}\n"],"names":[],"mappings":";;AAWO,MAAM,gBAAgB,aAAkC,CAAA;AAAA,EAC7D,GAAK,EAAA,CAAA;AAAA,EACL,GAAK,EAAA,EAAA;AAAA,EACL,IAAM,EAAA,CAAA;AAAA,EACN,KAAA,EAAO,CAAC,CAAC,CAAA;AAAA,EACT,UAAU,MAAM,IAAA;AAAA,EAChB,SAAW,EAAA,QAAA;AACb,CAAC,EAAA;AAEM,SAAS,gBAAmB,GAAA;AACjC,EAAA,OAAO,WAAW,aAAa,CAAA,CAAA;AACjC;;;;"}

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

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, Label } from '@salt-ds/core';
+import { getMarkStyles } from './utils.js';
+
+const withBaseName = makePrefixer("saltSliderMarks");
+function SliderMarks({
+  min,
+  max,
+  step,
+  ...rest
+}) {
+  const marks = getMarkStyles(min, max, step);
+  return /* @__PURE__ */ jsx("div", {
+    className: withBaseName(),
+    ...rest,
+    children: marks.map((mark) => {
+      return /* @__PURE__ */ jsx(Label, {
+        className: withBaseName("mark"),
+        style: { left: mark.position },
+        children: mark.label
+      }, mark.value);
+    })
+  });
+}
+
+export { SliderMarks };
+//# sourceMappingURL=SliderMarks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderMarks.js","sources":["../src/slider/internal/SliderMarks.tsx"],"sourcesContent":["import { Label, makePrefixer } from \"@salt-ds/core\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { getMarkStyles } from \"./utils\";\n\nconst withBaseName = makePrefixer(\"saltSliderMarks\");\n\nexport interface SliderMarksProps extends ComponentPropsWithoutRef<\"div\"> {\n  min: number;\n  max: number;\n  step: number;\n}\n\nexport function SliderMarks({\n  min,\n  max,\n  step,\n  ...rest\n}: SliderMarksProps): JSX.Element {\n  const marks = getMarkStyles(min, max, step);\n  return (\n    <div className={withBaseName()} {...rest}>\n      {marks.map((mark) => {\n        return (\n          <Label\n            className={withBaseName(\"mark\")}\n            key={mark.value}\n            style={{ left: mark.position }}\n          >\n            {mark.label}\n          </Label>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAIA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AAQ5C,SAAS,WAAY,CAAA;AAAA,EAC1B,GAAA;AAAA,EACA,GAAA;AAAA,EACA,IAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAkC,EAAA;AAChC,EAAA,MAAM,KAAQ,GAAA,aAAA,CAAc,GAAK,EAAA,GAAA,EAAK,IAAI,CAAA,CAAA;AAC1C,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAI,GAAG,IAAA;AAAA,IACjC,QAAA,EAAA,KAAA,CAAM,GAAI,CAAA,CAAC,IAAS,KAAA;AACnB,MAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,QAE9B,KAAO,EAAA,EAAE,IAAM,EAAA,IAAA,CAAK,QAAS,EAAA;AAAA,QAE5B,QAAK,EAAA,IAAA,CAAA,KAAA;AAAA,OAAA,EAHD,KAAK,KAIZ,CAAA,CAAA;AAAA,KAEH,CAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

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

@@ -1,19 +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 css_248z from '../Slider.css.js';
+import { clsx } from 'clsx';
+import { useSliderContext } from './SliderContext.js';
+import { getPercentage } from './utils.js';
 
 const withBaseName = makePrefixer("saltSliderSelection");
-function SliderSelection({ valueLength }) {
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "salt-slider",
-    css: css_248z,
-    window: targetWindow
+function SliderSelection({
+  ...props
+}) {
+  const { min, max, value } = useSliderContext();
+  const thumbPosition = value.map((value2) => {
+    return getPercentage(min, max, value2);
   });
   return /* @__PURE__ */ jsx("div", {
-    className: valueLength < 2 ? withBaseName() : withBaseName("range")
+    className: clsx(withBaseName(), {
+      [withBaseName("range")]: Array.isArray(value)
+    }),
+    style: {
+      left: value.length > 1 ? `${thumbPosition[0]}%` : 0,
+      width: value.length > 1 ? `${thumbPosition[1] - thumbPosition[0]}%` : `${thumbPosition[0]}%`
+    },
+    ...props
   });
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"SliderSelection.js","sources":["../src/slider/internal/SliderSelection.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\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;;;;"}
+{"version":3,"file":"SliderSelection.js","sources":["../src/slider/internal/SliderSelection.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { useSliderContext } from \"./SliderContext\";\nimport { getPercentage } from \"./utils\";\n\nconst withBaseName = makePrefixer(\"saltSliderSelection\");\n\nexport interface SliderSelectionProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nexport function SliderSelection({\n  ...props\n}: SliderSelectionProps): JSX.Element {\n  const { min, max, value } = useSliderContext();\n\n  const thumbPosition = value.map((value) => {\n    return getPercentage(min, max, value);\n  });\n\n  return (\n    <div\n      className={clsx(withBaseName(), {\n        [withBaseName(\"range\")]: Array.isArray(value),\n      })}\n      style={{\n        left: value.length > 1 ? `${thumbPosition[0]}%` : 0,\n        width:\n          value.length > 1\n            ? `${thumbPosition[1] - thumbPosition[0]}%`\n            : `${thumbPosition[0]}%`,\n      }}\n      {...props}\n    />\n  );\n}\n"],"names":["value"],"mappings":";;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAIhD,SAAS,eAAgB,CAAA;AAAA,EAC3B,GAAA,KAAA;AACL,CAAsC,EAAA;AACpC,EAAA,MAAM,EAAE,GAAA,EAAK,GAAK,EAAA,KAAA,KAAU,gBAAiB,EAAA,CAAA;AAE7C,EAAA,MAAM,aAAgB,GAAA,KAAA,CAAM,GAAI,CAAA,CAACA,MAAU,KAAA;AACzC,IAAO,OAAA,aAAA,CAAc,GAAK,EAAA,GAAA,EAAKA,MAAK,CAAA,CAAA;AAAA,GACrC,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA,CAAM,QAAQ,KAAK,CAAA;AAAA,KAC7C,CAAA;AAAA,IACD,KAAO,EAAA;AAAA,MACL,MAAM,KAAM,CAAA,MAAA,GAAS,CAAI,GAAA,CAAA,EAAG,cAAc,CAAQ,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA;AAAA,MAClD,KAAA,EACE,KAAM,CAAA,MAAA,GAAS,CACX,GAAA,CAAA,EAAG,cAAc,CAAK,CAAA,GAAA,aAAA,CAAc,CACpC,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,EAAG,aAAc,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,KACzB;AAAA,IACC,GAAG,KAAA;AAAA,GACN,CAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,73 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, Label } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { useState } from 'react';
+import { useSliderContext } from './SliderContext.js';
+import { useKeyDownThumb } from './useKeyDownThumb.js';
+import { getPercentage } from './utils.js';
+
+const withBaseName = makePrefixer("saltSliderThumb");
+function SliderThumb(props) {
+  const { index, activeThumb, setActiveThumb } = props;
+  const [focussed, setFocussed] = useState(false);
+  const { min, max, step, value, onChange, ariaLabel } = useSliderContext();
+  const onKeyDown = useKeyDownThumb(min, max, step, value, onChange, index);
+  const thumbValue = value[index];
+  const thumbPosition = getPercentage(min, max, thumbValue);
+  const handlePointerOver = () => {
+    if (activeThumb === void 0 && index !== null)
+      setActiveThumb(index);
+  };
+  const handleFocus = () => {
+    setFocussed(true);
+    if (index !== null)
+      setActiveThumb(index);
+  };
+  const handleBlur = () => {
+    setFocussed(false);
+    setActiveThumb(void 0);
+  };
+  const showTooltip = focussed || activeThumb === index;
+  return /* @__PURE__ */ jsxs("div", {
+    style: { left: `${thumbPosition}%` },
+    className: withBaseName("container"),
+    onPointerOver: handlePointerOver,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: clsx(withBaseName("tooltip"), {
+          [withBaseName("tooltip-visible")]: showTooltip
+        }),
+        "aria-expanded": showTooltip,
+        children: [
+          /* @__PURE__ */ jsx("svg", {
+            className: withBaseName("tooltip-arrow"),
+            "aria-hidden": "true",
+            viewBox: "0 1 14 14",
+            children: /* @__PURE__ */ jsx("path", {
+              d: "M0,0 H14 L7,7 Q7,7 7,7 Z"
+            })
+          }),
+          /* @__PURE__ */ jsx(Label, {
+            children: value[index]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: withBaseName(),
+        onKeyDown,
+        role: "slider",
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": index === 1 ? value[1] : value[0],
+        "aria-label": ariaLabel,
+        "aria-orientation": "horizontal",
+        tabIndex: 0
+      })
+    ]
+  });
+}
+
+export { SliderThumb };
+//# sourceMappingURL=SliderThumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderThumb.js","sources":["../src/slider/internal/SliderThumb.tsx"],"sourcesContent":["import { Label, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, useState } from \"react\";\nimport type { ActiveThumbIndex, ThumbIndex } from \"../types\";\nimport { useSliderContext } from \"./SliderContext\";\nimport { useKeyDownThumb } from \"./useKeyDownThumb\";\nimport { getPercentage } from \"./utils\";\n\nconst withBaseName = makePrefixer(\"saltSliderThumb\");\n\nexport interface SliderThumbProps extends ComponentPropsWithoutRef<\"div\"> {\n  index: ThumbIndex;\n  activeThumb: ActiveThumbIndex;\n  setActiveThumb: (index: ActiveThumbIndex) => void;\n}\n\nexport function SliderThumb(props: SliderThumbProps): JSX.Element {\n  const { index, activeThumb, setActiveThumb } = props;\n\n  const [focussed, setFocussed] = useState(false);\n\n  const { min, max, step, value, onChange, ariaLabel } = useSliderContext();\n\n  const onKeyDown = useKeyDownThumb(min, max, step, value, onChange, index);\n\n  const thumbValue = value[index];\n\n  const thumbPosition = getPercentage(min, max, thumbValue as number);\n\n  const handlePointerOver = () => {\n    if (activeThumb === undefined && index !== null) setActiveThumb(index);\n  };\n\n  const handleFocus = () => {\n    setFocussed(true);\n    if (index !== null) setActiveThumb(index);\n  };\n\n  const handleBlur = () => {\n    setFocussed(false);\n    setActiveThumb(undefined);\n  };\n\n  const showTooltip = focussed || activeThumb === index;\n\n  return (\n    <div\n      style={{ left: `${thumbPosition}%` }}\n      className={withBaseName(\"container\")}\n      onPointerOver={handlePointerOver}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n    >\n      <div\n        className={clsx(withBaseName(\"tooltip\"), {\n          [withBaseName(\"tooltip-visible\")]: showTooltip,\n        })}\n        aria-expanded={showTooltip}\n      >\n        <svg\n          className={withBaseName(\"tooltip-arrow\")}\n          aria-hidden=\"true\"\n          viewBox=\"0 1 14 14\"\n        >\n          <path d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\" />\n        </svg>\n        <Label>{value[index]}</Label>\n      </div>\n      <div\n        className={withBaseName()}\n        onKeyDown={onKeyDown}\n        role=\"slider\"\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={index === 1 ? value[1] : value[0]}\n        aria-label={ariaLabel}\n        aria-orientation=\"horizontal\"\n        tabIndex={0}\n      />\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}