silver-ui 0.1.1 → 0.2.0

package/dist/chunk-36QGPGT2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TextInput/TextInput.tsx"],"names":["useId","getStatusMessageID","getDescribedBy","useInputGroup","jsxs","cx","inputRecipe","jsx","inputStyles","Icon","Button","X","Spinner","getStatusIcon","Field","getNecessity"],"mappings":"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","file":"chunk-36QGPGT2.cjs","sourcesContent":["import {X} from 'lucide-react';\nimport {\n  useId,\n  type ChangeEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {cx} from '../../internal/cx';\nimport {Button} from '../Button';\nimport {\n  Field,\n  getNecessity,\n  type FieldNecessity,\n  type InputSize,\n  type InputStatus,\n} from '../Field';\nimport {inputRecipe, inputStyles} from '../Field/inputStyles';\nimport {\n  getDescribedBy,\n  getStatusIcon,\n  getStatusMessageID,\n} from '../Field/inputUtils';\nimport {Icon, type IconComponent} from '../Icon';\nimport {useInputGroup} from '../InputGroup';\nimport {Spinner} from '../Spinner';\n\nexport type TextInputType = 'email' | 'password' | 'text';\n\nexport type TextInputProps = {\n  /**\n   * HTML autocomplete hint for the browser.\n   */\n  autoComplete?: string;\n  /**\n   * Additional CSS class names applied to the input wrapper.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the input element.\n   */\n  'data-testid'?: string;\n  /**\n   * Supporting text rendered below the label.\n   */\n  description?: ReactNode;\n  /**\n   * Content rendered after the input, before the status icon.\n   */\n  endContent?: ReactNode;\n  /**\n   * Whether to focus the input on mount.\n   */\n  hasAutoFocus?: boolean;\n  /**\n   * Whether to show a clear button when the input has a value.\n   */\n  hasClear?: boolean;\n  /**\n   * HTML name attribute.\n   */\n  htmlName?: string;\n  /**\n   * Whether the input is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether to visually hide the label.\n   */\n  isLabelHidden?: boolean;\n  /**\n   * Whether the input is loading.\n   */\n  isLoading?: boolean;\n  /**\n   * Field label.\n   */\n  label: string;\n  /**\n   * Icon shown before the label.\n   */\n  labelIcon?: IconComponent;\n  /**\n   * Tooltip shown beside the label.\n   */\n  labelTooltip?: ReactNode;\n  /**\n   * Called when the input loses focus.\n   */\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Called with the next string value.\n   */\n  onChange: (\n    value: string,\n    event: ChangeEvent<HTMLInputElement> | null,\n  ) => void;\n  /**\n   * Called when Enter is pressed.\n   */\n  onEnter?: () => void;\n  /**\n   * Called when the input gains focus.\n   */\n  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Keyboard event handler for the input.\n   */\n  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n  /**\n   * Placeholder text.\n   */\n  placeholder?: string;\n  /**\n   * Ref forwarded to the input element.\n   */\n  ref?: Ref<HTMLInputElement>;\n  /**\n   * Visual size.\n   */\n  size?: InputSize;\n  /**\n   * Icon shown before the input.\n   */\n  startIcon?: IconComponent;\n  /**\n   * Status displayed on the field.\n   */\n  status?: InputStatus;\n  /**\n   * Inline styles applied to the wrapper.\n   */\n  style?: CSSProperties;\n  /**\n   * HTML input type.\n   */\n  type?: TextInputType;\n  /**\n   * Controlled input value.\n   */\n  value: string;\n} & FieldNecessity;\n\n/**\n * Single-line text input field.\n */\nexport function TextInput({\n  autoComplete,\n  label,\n  value,\n  onChange,\n  onBlur,\n  onFocus,\n  type = 'text',\n  size: sizeProp = 'md',\n  placeholder,\n  description,\n  endContent,\n  isLabelHidden = false,\n  isOptional,\n  isRequired,\n  isDisabled = false,\n  isLoading = false,\n  hasClear = false,\n  hasAutoFocus = false,\n  htmlName,\n  status,\n  labelIcon,\n  labelTooltip,\n  startIcon,\n  onEnter,\n  onKeyDown,\n  className,\n  'data-testid': dataTestId,\n  style,\n  ref,\n}: TextInputProps): React.JSX.Element {\n  const inputId = useId();\n  const descriptionID =\n    description != null ? `${inputId}-description` : undefined;\n  const statusMessageID = getStatusMessageID(inputId, status);\n  const describedBy = getDescribedBy(descriptionID, statusMessageID);\n  const inputGroup = useInputGroup();\n  const effectiveDisabled = isDisabled || inputGroup?.isDisabled === true;\n  const size = inputGroup?.size ?? sizeProp;\n  const effectiveStatusType = status?.type ?? inputGroup?.statusType;\n\n  const inputWrapper = (\n    <div\n      className={cx(\n        inputRecipe({\n          size,\n          status: effectiveStatusType,\n          isDisabled: effectiveDisabled,\n        }),\n        inputGroup != null ? className : undefined,\n      )}\n      style={inputGroup != null ? style : undefined}>\n      {startIcon != null ? (\n        <span className={inputStyles.iconSlot}>\n          <Icon color=\"secondary\" icon={startIcon} size=\"sm\" />\n        </span>\n      ) : null}\n      <input\n        aria-busy={isLoading || undefined}\n        aria-describedby={describedBy}\n        aria-invalid={status?.type === 'error' || undefined}\n        aria-label={inputGroup != null ? label : undefined}\n        aria-required={isRequired ?? undefined}\n        autoComplete={autoComplete}\n        // eslint-disable-next-line jsx-a11y-x/no-autofocus\n        autoFocus={hasAutoFocus}\n        className={inputStyles.control}\n        data-autofocus={hasAutoFocus || undefined}\n        data-testid={dataTestId}\n        disabled={effectiveDisabled}\n        id={inputId}\n        name={htmlName}\n        onBlur={onBlur}\n        onChange={event => onChange(event.target.value, event)}\n        onFocus={onFocus}\n        onKeyDown={event => {\n          if (event.key === 'Enter' && !event.nativeEvent.isComposing) {\n            onEnter?.();\n          }\n          onKeyDown?.(event);\n        }}\n        placeholder={placeholder}\n        ref={ref}\n        required={isRequired ?? undefined}\n        type={type}\n        value={value}\n      />\n      {hasClear && value !== '' && !effectiveDisabled ? (\n        <Button\n          icon={X}\n          isIconOnly\n          label={`Clear ${label}`}\n          onClick={() => onChange('', null)}\n          size=\"sm\"\n          variant=\"ghost\"\n        />\n      ) : null}\n      {endContent}\n      {isLoading ? <Spinner size=\"sm\" /> : null}\n      {status != null ? (\n        <span className={inputStyles.iconSlot}>\n          {getStatusIcon(status.type)}\n        </span>\n      ) : null}\n    </div>\n  );\n\n  if (inputGroup != null) {\n    return inputWrapper;\n  }\n\n  return (\n    <Field\n      className={className}\n      description={description}\n      descriptionID={descriptionID}\n      inputId={inputId}\n      isDisabled={isDisabled}\n      isLabelHidden={isLabelHidden}\n      {...getNecessity(isOptional, isRequired)}\n      label={label}\n      labelIcon={labelIcon}\n      labelTooltip={labelTooltip}\n      status={\n        status == null ? undefined : {...status, messageID: statusMessageID}\n      }\n      style={style}>\n      {inputWrapper}\n    </Field>\n  );\n}\n\nTextInput.displayName = 'TextInput';\n"]}

package/dist/chunk-3DFRJSNE.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+var chunk36QGPGT2_cjs = require('./chunk-36QGPGT2.cjs');
+var chunkKFEXS6OK_cjs = require('./chunk-KFEXS6OK.cjs');
+var chunkO3T7Z6RH_cjs = require('./chunk-O3T7Z6RH.cjs');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function PasswordInput({
+  className,
+  "data-testid": dataTestId,
+  isDisabled = false,
+  isOptional,
+  isRequired,
+  ref,
+  style,
+  ...props
+}) {
+  const [isVisible, setIsVisible] = react.useState(false);
+  const toggleVisibility = react.useCallback(() => setIsVisible((v) => !v), []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunk36QGPGT2_cjs.TextInput,
+    {
+      ...props,
+      ...chunkKFEXS6OK_cjs.getNecessity(isOptional, isRequired),
+      className,
+      "data-testid": dataTestId,
+      endContent: /* @__PURE__ */ jsxRuntime.jsx(
+        chunkO3T7Z6RH_cjs.Button,
+        {
+          icon: isVisible ? lucideReact.EyeOff : lucideReact.Eye,
+          isDisabled,
+          isIconOnly: true,
+          label: isVisible ? "Hide password" : "Show password",
+          onClick: toggleVisibility,
+          size: "sm",
+          variant: "ghost"
+        }
+      ),
+      isDisabled,
+      ref,
+      style,
+      type: isVisible ? "text" : "password"
+    }
+  );
+}
+PasswordInput.displayName = "PasswordInput";
+
+exports.PasswordInput = PasswordInput;
+//# sourceMappingURL=chunk-3DFRJSNE.cjs.map
+//# sourceMappingURL=chunk-3DFRJSNE.cjs.map

package/dist/chunk-3DFRJSNE.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/PasswordInput/PasswordInput.tsx"],"names":["useState","useCallback","jsx","TextInput","getNecessity","Button","EyeOff","Eye"],"mappings":";;;;;;;;;AAmBO,SAAS,aAAA,CAAc;AAAA,EAC5B,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,UAAA,GAAa,KAAA;AAAA,EACb,UAAA;AAAA,EACA,UAAA;AAAA,EACA,GAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA0C;AACxC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,KAAK,CAAA;AAChD,EAAA,MAAM,gBAAA,GAAmBC,kBAAY,MAAM,YAAA,CAAa,OAAK,CAAC,CAAC,CAAA,EAAG,EAAE,CAAA;AAEpE,EAAA,uBACEC,cAAA;AAAA,IAACC,2BAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACH,GAAGC,8BAAA,CAAa,UAAA,EAAY,UAAU,CAAA;AAAA,MACvC,SAAA;AAAA,MACA,aAAA,EAAa,UAAA;AAAA,MACb,UAAA,kBACEF,cAAA;AAAA,QAACG,wBAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAM,YAAYC,kBAAA,GAASC,eAAA;AAAA,UAC3B,UAAA;AAAA,UACA,UAAA,EAAU,IAAA;AAAA,UACV,KAAA,EAAO,YAAY,eAAA,GAAkB,eAAA;AAAA,UACrC,OAAA,EAAS,gBAAA;AAAA,UACT,IAAA,EAAK,IAAA;AAAA,UACL,OAAA,EAAQ;AAAA;AAAA,OACV;AAAA,MAEF,UAAA;AAAA,MACA,GAAA;AAAA,MACA,KAAA;AAAA,MACA,IAAA,EAAM,YAAY,MAAA,GAAS;AAAA;AAAA,GAC7B;AAEJ;AAEA,aAAA,CAAc,WAAA,GAAc,eAAA","file":"chunk-3DFRJSNE.cjs","sourcesContent":["import {Eye, EyeOff} from 'lucide-react';\nimport {useCallback, useState, type Ref} from 'react';\nimport {Button} from '../Button';\nimport {getNecessity} from '../Field';\nimport {TextInput, type TextInputProps} from '../TextInput';\n\nexport type PasswordInputProps = Omit<\n  TextInputProps,\n  'endContent' | 'hasClear' | 'startIcon' | 'type'\n> & {\n  /**\n   * Ref forwarded to the input element.\n   */\n  ref?: Ref<HTMLInputElement>;\n};\n\n/**\n * Password input with a toggle to show or hide the entered value.\n */\nexport function PasswordInput({\n  className,\n  'data-testid': dataTestId,\n  isDisabled = false,\n  isOptional,\n  isRequired,\n  ref,\n  style,\n  ...props\n}: PasswordInputProps): React.JSX.Element {\n  const [isVisible, setIsVisible] = useState(false);\n  const toggleVisibility = useCallback(() => setIsVisible(v => !v), []);\n\n  return (\n    <TextInput\n      {...props}\n      {...getNecessity(isOptional, isRequired)}\n      className={className}\n      data-testid={dataTestId}\n      endContent={\n        <Button\n          icon={isVisible ? EyeOff : Eye}\n          isDisabled={isDisabled}\n          isIconOnly\n          label={isVisible ? 'Hide password' : 'Show password'}\n          onClick={toggleVisibility}\n          size=\"sm\"\n          variant=\"ghost\"\n        />\n      }\n      isDisabled={isDisabled}\n      ref={ref}\n      style={style}\n      type={isVisible ? 'text' : 'password'}\n    />\n  );\n}\n\nPasswordInput.displayName = 'PasswordInput';\n"]}

package/dist/chunk-3DZPRXMC.cjs

@@ -0,0 +1,559 @@
+'use strict';
+
+var chunkKFEXS6OK_cjs = require('./chunk-KFEXS6OK.cjs');
+var chunk7GN6YTSS_cjs = require('./chunk-7GN6YTSS.cjs');
+var chunk5QPM5LUS_cjs = require('./chunk-5QPM5LUS.cjs');
+var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Slider/Slider.recipe.ts
+var THUMB_SIZE = 20;
+var TRACK_SIZE = 4;
+var sliderRecipe = chunk5QPM5LUS_cjs.sva({
+  slots: [
+    "field",
+    "filledTrack",
+    "mark",
+    "markLabel",
+    "marksContainer",
+    "row",
+    "textValue",
+    "thumb",
+    "track",
+    "trackContainer"
+  ],
+  base: {
+    row: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2"
+    },
+    trackContainer: {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      isolation: "isolate",
+      touchAction: "none",
+      userSelect: "none"
+    },
+    track: {
+      position: "absolute",
+      bg: "track",
+      borderRadius: "full"
+    },
+    filledTrack: {
+      position: "absolute",
+      bg: "primary",
+      borderRadius: "full"
+    },
+    thumb: {
+      position: "absolute",
+      zIndex: 1,
+      w: `${THUMB_SIZE}px`,
+      h: `${THUMB_SIZE}px`,
+      borderRadius: "full",
+      bg: "primary",
+      cursor: "grab",
+      outline: "none",
+      transform: "translate(-50%, -50%)",
+      transitionDuration: "fast",
+      transitionProperty: "background-color, box-shadow",
+      transitionTimingFunction: "default",
+      _focusVisible: {
+        outlineWidth: "focus",
+        outlineStyle: "solid",
+        outlineColor: "primary",
+        outlineOffset: "focusOffset"
+      },
+      _hover: {
+        "@media (hover: hover)": {
+          bg: "primary.emphasized"
+        }
+      }
+    },
+    marksContainer: {
+      position: "absolute"
+    },
+    mark: {
+      position: "absolute",
+      bg: "border.emphasized",
+      borderRadius: "full"
+    },
+    markLabel: {
+      position: "absolute",
+      color: "fg.muted",
+      fontFamily: "body",
+      fontSize: "xs",
+      whiteSpace: "nowrap"
+    },
+    textValue: {
+      flexShrink: 0,
+      color: "fg",
+      fontFamily: "body",
+      fontSize: "sm",
+      whiteSpace: "nowrap"
+    }
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        trackContainer: {
+          w: "full",
+          h: `${THUMB_SIZE}px`,
+          flexGrow: 1,
+          cursor: "pointer"
+        },
+        track: {
+          insetInline: 0,
+          top: "50%",
+          h: `${TRACK_SIZE}px`,
+          transform: "translateY(-50%)"
+        },
+        filledTrack: {
+          top: "50%",
+          h: `${TRACK_SIZE}px`,
+          transform: "translateY(-50%)"
+        },
+        thumb: {
+          top: "50%"
+        },
+        marksContainer: {
+          insetInline: 0,
+          top: "50%"
+        },
+        mark: {
+          w: "0.5",
+          h: "2",
+          transform: "translate(-50%, -50%)"
+        },
+        markLabel: {
+          top: `${THUMB_SIZE / 2 + 4}px`,
+          transform: "translateX(-50%)"
+        }
+      },
+      vertical: {
+        field: {
+          alignItems: "center",
+          w: "fit-content"
+        },
+        row: {
+          flexDirection: "column",
+          alignItems: "center"
+        },
+        trackContainer: {
+          w: `${THUMB_SIZE}px`,
+          h: "40",
+          flexDirection: "column",
+          justifyContent: "center",
+          cursor: "pointer"
+        },
+        track: {
+          insetBlock: 0,
+          left: "50%",
+          w: `${TRACK_SIZE}px`,
+          transform: "translateX(-50%)"
+        },
+        filledTrack: {
+          left: "50%",
+          w: `${TRACK_SIZE}px`,
+          transform: "translateX(-50%)"
+        },
+        thumb: {
+          left: "50%",
+          transform: "translate(-50%, 50%)"
+        },
+        marksContainer: {
+          insetBlock: 0,
+          left: "50%"
+        },
+        mark: {
+          w: "2",
+          h: "0.5",
+          transform: "translate(-50%, 50%)"
+        },
+        markLabel: {
+          left: `${THUMB_SIZE / 2 + 4}px`,
+          transform: "translateY(50%)"
+        }
+      }
+    },
+    isDisabled: {
+      true: {
+        trackContainer: {
+          cursor: "not-allowed",
+          opacity: 0.5
+        },
+        thumb: {
+          bg: "track.disabled",
+          cursor: "not-allowed"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function snapToStep(value, min, step) {
+  if (step <= 0) {
+    return value;
+  }
+  return min + Math.round((value - min) / step) * step;
+}
+function getPercent(value, min, max) {
+  if (max === min) {
+    return 0;
+  }
+  return (value - min) / (max - min) * 100;
+}
+function Slider({
+  className,
+  "data-testid": dataTestId,
+  description,
+  formatValue,
+  isDisabled = false,
+  isLabelHidden = false,
+  isOptional,
+  isRequired,
+  label,
+  labelTooltip,
+  marks,
+  max = 100,
+  min = 0,
+  orientation = "horizontal",
+  ref,
+  status,
+  step = 1,
+  style,
+  value,
+  valueDisplay = "tooltip",
+  ...props
+}) {
+  const inputId = react.useId();
+  const trackRef = react.useRef(null);
+  const pendingValuesRef = react.useRef(null);
+  const draggingThumbRef = react.useRef(null);
+  const isRange = Array.isArray(value);
+  const isHorizontal = orientation === "horizontal";
+  const values = react.useMemo(() => isRange ? value : [value], [isRange, value]);
+  const onChange = props.onChange;
+  const onChangeEnd = "onChangeEnd" in props ? props.onChangeEnd : void 0;
+  const minStepsBetweenThumbs = isRange && "minStepsBetweenThumbs" in props ? props.minStepsBetweenThumbs ?? 0 : 0;
+  const descriptionID = description != null ? `${inputId}-description` : void 0;
+  const statusMessageID = status?.message != null ? `${inputId}-status` : void 0;
+  const ariaDescribedBy = [descriptionID, statusMessageID].filter(Boolean).join(" ") || void 0;
+  react.useEffect(() => {
+    pendingValuesRef.current = values;
+  }, [values]);
+  const displayValue = react.useCallback(
+    (displayedValue) => formatValue == null ? String(displayedValue) : formatValue(displayedValue),
+    [formatValue]
+  );
+  const getValueFromPosition = react.useCallback(
+    (clientX, clientY) => {
+      const track = trackRef.current;
+      if (track == null) {
+        return min;
+      }
+      const rect = track.getBoundingClientRect();
+      const rawPercent = isHorizontal ? (clientX - rect.left) / rect.width : 1 - (clientY - rect.top) / rect.height;
+      const percent = clamp(rawPercent, 0, 1);
+      const rawValue = min + percent * (max - min);
+      return clamp(snapToStep(rawValue, min, step), min, max);
+    },
+    [isHorizontal, max, min, step]
+  );
+  const getClosestThumb = react.useCallback(
+    (newValue) => {
+      if (!isRange) {
+        return 0;
+      }
+      const [lower, upper] = values;
+      return Math.abs(newValue - lower) <= Math.abs(newValue - upper) ? 0 : 1;
+    },
+    [isRange, values]
+  );
+  const getNextValues = react.useCallback(
+    (thumbIndex, newValue) => {
+      const snapped = clamp(snapToStep(newValue, min, step), min, max);
+      if (!isRange) {
+        return [snapped];
+      }
+      const nextValues = [...values];
+      nextValues[thumbIndex] = snapped;
+      const minGap = minStepsBetweenThumbs * step;
+      if (thumbIndex === 0) {
+        nextValues[0] = Math.min(nextValues[0], nextValues[1] - minGap);
+      } else {
+        nextValues[1] = Math.max(nextValues[1], nextValues[0] + minGap);
+      }
+      nextValues[0] = clamp(nextValues[0], min, max);
+      nextValues[1] = clamp(nextValues[1], min, max);
+      return nextValues;
+    },
+    [isRange, max, min, minStepsBetweenThumbs, step, values]
+  );
+  const emitChange = react.useCallback(
+    (nextValues) => {
+      pendingValuesRef.current = nextValues;
+      if (isRange) {
+        onChange(
+          nextValues
+        );
+      } else {
+        onChange(nextValues[0]);
+      }
+    },
+    [isRange, onChange]
+  );
+  const emitChangeEnd = react.useCallback(
+    (nextValues) => {
+      if (isRange) {
+        onChangeEnd?.(
+          nextValues
+        );
+      } else {
+        onChangeEnd?.(nextValues[0]);
+      }
+    },
+    [isRange, onChangeEnd]
+  );
+  const updateValue = react.useCallback(
+    (thumbIndex, newValue) => {
+      if (isDisabled) {
+        return null;
+      }
+      const nextValues = getNextValues(thumbIndex, newValue);
+      emitChange(nextValues);
+      return nextValues;
+    },
+    [emitChange, getNextValues, isDisabled]
+  );
+  const handlePointerDown = react.useCallback(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
+      event.preventDefault();
+      const markElement = event.target.closest(
+        "[data-mark-value]"
+      );
+      const newValue = markElement == null ? getValueFromPosition(event.clientX, event.clientY) : Number(markElement.dataset.markValue);
+      const thumbIndex = getClosestThumb(newValue);
+      draggingThumbRef.current = thumbIndex;
+      updateValue(thumbIndex, newValue);
+      if (typeof event.currentTarget.setPointerCapture === "function") {
+        event.currentTarget.setPointerCapture(event.pointerId);
+      }
+    },
+    [getClosestThumb, getValueFromPosition, isDisabled, updateValue]
+  );
+  const handlePointerMove = react.useCallback(
+    (event) => {
+      if (draggingThumbRef.current == null || isDisabled) {
+        return;
+      }
+      updateValue(
+        draggingThumbRef.current,
+        getValueFromPosition(event.clientX, event.clientY)
+      );
+    },
+    [getValueFromPosition, isDisabled, updateValue]
+  );
+  const handlePointerUp = react.useCallback(() => {
+    if (draggingThumbRef.current == null) {
+      return;
+    }
+    draggingThumbRef.current = null;
+    emitChangeEnd(pendingValuesRef.current ?? values);
+  }, [emitChangeEnd, values]);
+  const handleKeyDown = react.useCallback(
+    (thumbIndex, event) => {
+      if (isDisabled) {
+        return;
+      }
+      const currentValue = values[thumbIndex];
+      let nextValue;
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowLeft":
+          nextValue = currentValue - step;
+          break;
+        case "ArrowRight":
+        case "ArrowUp":
+          nextValue = currentValue + step;
+          break;
+        case "End":
+          nextValue = max;
+          break;
+        case "Home":
+          nextValue = min;
+          break;
+        case "PageDown":
+          nextValue = currentValue - step * 10;
+          break;
+        case "PageUp":
+          nextValue = currentValue + step * 10;
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      const nextValues = getNextValues(thumbIndex, nextValue);
+      emitChange(nextValues);
+      emitChangeEnd(nextValues);
+    },
+    [
+      emitChange,
+      emitChangeEnd,
+      getNextValues,
+      isDisabled,
+      max,
+      min,
+      step,
+      values
+    ]
+  );
+  const filledStyle = (() => {
+    if (isRange) {
+      const [lower, upper] = values;
+      const lowerPercent = getPercent(lower, min, max);
+      const upperPercent = getPercent(upper, min, max);
+      return isHorizontal ? { left: `${lowerPercent}%`, width: `${upperPercent - lowerPercent}%` } : {
+        bottom: `${lowerPercent}%`,
+        height: `${upperPercent - lowerPercent}%`
+      };
+    }
+    const percent = getPercent(values[0], min, max);
+    return isHorizontal ? { left: "0%", width: `${percent}%` } : { bottom: "0%", height: `${percent}%` };
+  })();
+  const classes = sliderRecipe({
+    orientation,
+    isDisabled: isDisabled || void 0
+  });
+  const textDisplay = valueDisplay === "text" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.textValue, children: isRange ? `${displayValue(values[0])} - ${displayValue(values[1])}` : displayValue(values[0]) }) : null;
+  const necessity = chunkKFEXS6OK_cjs.getNecessity(isOptional, isRequired);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkKFEXS6OK_cjs.Field,
+    {
+      className: chunkSPDVNY2Z_cjs.cx(className, classes.field),
+      "data-testid": dataTestId,
+      description,
+      descriptionID,
+      inputId,
+      isDisabled,
+      isLabelHidden,
+      ...necessity,
+      label,
+      labelTooltip,
+      ref,
+      status: status == null ? void 0 : { ...status, messageID: statusMessageID },
+      statusVariant: "detached",
+      style,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.row, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "aria-label": isRange ? label : void 0,
+            className: classes.trackContainer,
+            "data-testid": "slider-track-container",
+            onPointerCancel: handlePointerUp,
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp,
+            ref: trackRef,
+            role: isRange ? "group" : void 0,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: classes.track }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  className: classes.filledTrack,
+                  style: filledStyle
+                }
+              ),
+              marks == null ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: classes.marksContainer, children: marks.map((mark) => {
+                const percent = getPercent(mark.value, min, max);
+                const markStyle = isHorizontal ? { left: `${percent}%` } : { bottom: `${percent}%` };
+                return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: classes.mark,
+                      "data-mark-value": mark.value,
+                      "data-testid": "slider-mark",
+                      style: markStyle
+                    }
+                  ),
+                  mark.label == null ? null : /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: classes.markLabel,
+                      "data-mark-value": mark.value,
+                      "data-testid": "slider-mark-label",
+                      style: markStyle,
+                      children: mark.label
+                    }
+                  )
+                ] }, mark.value);
+              }) }),
+              values.map((currentValue, thumbIndex) => {
+                const percent = getPercent(currentValue, min, max);
+                const thumbStyle = isHorizontal ? { left: `${percent}%` } : { bottom: `${percent}%`, left: "50%" };
+                const thumbLabel = isRange ? thumbIndex === 0 ? `${label}, minimum value` : `${label}, maximum value` : label;
+                const thumbKey = isRange ? thumbIndex === 0 ? "minimum" : "maximum" : "value";
+                const thumb = /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    "aria-describedby": ariaDescribedBy,
+                    "aria-disabled": isDisabled || void 0,
+                    "aria-invalid": status?.type === "error" || void 0,
+                    "aria-label": thumbLabel,
+                    "aria-orientation": orientation,
+                    "aria-valuemax": max,
+                    "aria-valuemin": min,
+                    "aria-valuenow": currentValue,
+                    "aria-valuetext": formatValue == null ? void 0 : formatValue(currentValue),
+                    className: classes.thumb,
+                    id: !isRange || thumbIndex === 0 ? inputId : void 0,
+                    onKeyDown: (event) => handleKeyDown(thumbIndex, event),
+                    role: "slider",
+                    style: thumbStyle,
+                    tabIndex: isDisabled ? -1 : 0
+                  },
+                  thumbKey
+                );
+                if (valueDisplay !== "tooltip") {
+                  return thumb;
+                }
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  chunk7GN6YTSS_cjs.Tooltip,
+                  {
+                    content: displayValue(currentValue),
+                    delay: 0,
+                    focusTrigger: "always",
+                    placement: isHorizontal ? "above" : "start",
+                    children: thumb
+                  },
+                  thumbKey
+                );
+              })
+            ]
+          }
+        ),
+        textDisplay
+      ] })
+    }
+  );
+}
+Slider.displayName = "Slider";
+
+exports.Slider = Slider;
+exports.sliderRecipe = sliderRecipe;
+//# sourceMappingURL=chunk-3DZPRXMC.cjs.map
+//# sourceMappingURL=chunk-3DZPRXMC.cjs.map