@puzzle-ui/ui 0.0.0-stage → 0.1.0

package/dist/components/forms/select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/forms/select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ButtonHTMLAttributes,\n  type ChangeEvent,\n  type CSSProperties,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nimport { cn, resolveResponsiveValue, type ResponsiveValue } from \"@puzzle-ui/core\";\n\nimport {\n  Popout,\n  type PopoutAlignment,\n  type PopoutPosition,\n  type PopoutTriggerProps,\n} from \"../../overlays/popout\";\n\nimport \"./select.css\";\n\ntype SelectSize = \"sm\" | \"md\" | \"lg\";\n\ntype SelectOption<T = string> = {\n  /** Stable identifier, useful when options are reordered. */\n  id?: string | number;\n\n  /** The value returned by onChange. */\n  value: T;\n\n  /** Plain-text label, also used for typeahead and accessibility. */\n  label: string;\n\n  /** Optional supporting text. */\n  description?: ReactNode;\n\n  /** Optional group heading. */\n  group?: string;\n\n  /** Prevents this option from being selected. */\n  disabled?: boolean;\n};\n\ntype SelectOptionRenderState = {\n  selected: boolean;\n  active: boolean;\n  multiple: boolean;\n};\n\ntype SelectBaseProps<T> = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"children\" | \"value\" | \"disabled\" | \"form\" | \"size\" | \"type\" | \"onChange\"\n> & {\n  /** Available options. */\n  options: readonly SelectOption<T>[];\n\n  /** Optional visible field label. */\n  label?: ReactNode;\n\n  /** Text shown when no value is selected. */\n  placeholder?: ReactNode;\n\n  /** Supporting text below the control. */\n  description?: ReactNode;\n\n  /** Error message. Set to true to use the default message. */\n  error?: ReactNode | boolean;\n\n  /** Disables the entire control. */\n  disabled?: boolean;\n\n  /** Makes the field required. */\n  required?: boolean;\n\n  /** Allows the selected value(s) to be cleared. */\n  clearable?: boolean;\n\n  /** Accessible name of the clear button. */\n  clearLabel?: string;\n\n  /** Form field name. Adds a visually hidden native select. */\n  name?: string;\n\n  /** Form ID for form association. */\n  form?: string;\n\n  /** Native autocomplete attribute. */\n  autoComplete?: string;\n\n  /** Serializes generic values for native form submission. */\n  serializeValue?: (value: T) => string;\n\n  /** Custom comparison for object values. */\n  isOptionEqualToValue?: (option: SelectOption<T>, value: T) => boolean;\n\n  /** Custom rendering of the selected value(s). */\n  renderValue?: (\n    selected: SelectOption<T> | readonly SelectOption<T>[] | undefined,\n  ) => ReactNode;\n\n  /** Custom rendering of an option. */\n  renderOption?: (\n    option: SelectOption<T>,\n    state: SelectOptionRenderState,\n  ) => ReactNode;\n\n  /** Responsive control size. */\n  size?: ResponsiveValue<SelectSize>;\n\n  /** Responsive full-width layout. */\n  fullWidth?: ResponsiveValue<boolean>;\n\n  /** Controls the dropdown visibility. */\n  open?: boolean;\n\n  /** Initial dropdown visibility. */\n  defaultOpen?: boolean;\n\n  /** Called when the dropdown visibility changes. */\n  onOpenChange?: (open: boolean) => void;\n\n  /** Dropdown placement. */\n  position?: PopoutPosition;\n\n  /** Dropdown alignment. */\n  align?: PopoutAlignment;\n\n  /** Distance between the trigger and dropdown. */\n  offset?: number;\n\n  /** Minimum distance from the viewport edges. */\n  collisionPadding?: number;\n\n  /** Whether the dropdown closes after selecting an option. */\n  closeOnSelect?: boolean;\n\n  /** Maximum number of simultaneously selected options. */\n  maxSelected?: number;\n\n  /** Match the dropdown's minimum width to the trigger. */\n  matchTriggerWidth?: boolean;\n\n  /** Maximum dropdown height. */\n  menuMaxHeight?: CSSProperties[\"maxHeight\"];\n\n  /** Content displayed when there are no options. */\n  noOptionsText?: ReactNode;\n\n  /** Additional class on the outer field. */\n  rootClassName?: string;\n\n  /** Additional class on the Popout content. */\n  popoverClassName?: string;\n\n  /** Additional class on the listbox. */\n  menuClassName?: string;\n};\n\ntype SelectSingleProps<T = string> = SelectBaseProps<T> & {\n  multiple?: false;\n\n  /** Controlled selected value. Undefined represents no selection. */\n  value?: T | undefined;\n\n  /** Initial selected value. Undefined represents no selection. */\n  defaultValue?: T | undefined;\n\n  /** Called when the selected value changes. */\n  onChange?: (value: T | undefined) => void;\n};\n\ntype SelectMultipleProps<T = string> = SelectBaseProps<T> & {\n  multiple: true;\n\n  /** Controlled selected values. */\n  value?: readonly T[];\n\n  /** Initial selected values. */\n  defaultValue?: readonly T[];\n\n  /** Called when the selected values change. */\n  onChange?: (value: T[]) => void;\n};\n\ntype SelectProps<T = string> = SelectSingleProps<T> | SelectMultipleProps<T>;\n\nconst findEnabledIndex = <T,>(\n  options: readonly SelectOption<T>[],\n  startIndex: number,\n  direction: -1 | 1,\n  wrap = true,\n): number => {\n  const length = options.length;\n\n  for (let step = 1; step <= length; step++) {\n    let index = startIndex + step * direction;\n\n    if (wrap) {\n      index = (index + length) % length;\n    } else if (index < 0 || index >= length) {\n      break;\n    }\n\n    if (!options[index].disabled) {\n      return index;\n    }\n  }\n\n  return -1;\n};\n\ntype IndexedOption<T> = {\n  option: SelectOption<T>;\n  index: number;\n};\n\ntype SelectGroup<T> = {\n  label: string | null;\n  options: IndexedOption<T>[];\n};\n\nconst groupOptions = <T,>(\n  options: readonly SelectOption<T>[],\n): SelectGroup<T>[] => {\n  const groups = new Map<string | null, SelectGroup<T>>();\n\n  options.forEach((option, index) => {\n    const label = option.group ?? null;\n\n    let group = groups.get(label);\n\n    if (!group) {\n      group = {\n        label,\n        options: [],\n      };\n\n      groups.set(label, group);\n    }\n\n    group.options.push({ option, index });\n  });\n\n  return Array.from(groups.values());\n};\n\nconst Select = <T,>(props: SelectProps<T>) => {\n  const {\n    options,\n    label,\n    placeholder = \"Select an option\",\n    description,\n    error,\n    disabled = false,\n    required = false,\n    clearable = false,\n    clearLabel = \"Clear selection\",\n    name,\n    form,\n    autoComplete,\n    serializeValue,\n    isOptionEqualToValue,\n    renderValue,\n    renderOption,\n    size = \"md\",\n    fullWidth = false,\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    position = \"bottom\",\n    align = \"start\",\n    offset = 8,\n    collisionPadding = 8,\n    closeOnSelect: closeOnSelectProp,\n    maxSelected,\n    matchTriggerWidth = true,\n    menuMaxHeight = \"18rem\",\n    noOptionsText = \"No options\",\n    rootClassName,\n    popoverClassName,\n    menuClassName,\n    value,\n    onChange,\n    id,\n    className,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    ...buttonProps\n  } = props;\n\n  const multiple = props.multiple === true;\n\n  // Property presence matters because value={undefined} is a controlled\n  // single-select with no selected value.\n  const controlledValue = Object.prototype.hasOwnProperty.call(props, \"value\");\n\n  const controlledOpen = open !== undefined;\n\n  const baseId = useId();\n  const triggerId = id ?? `${baseId}-trigger`;\n  const labelId = `${baseId}-label`;\n  const descriptionId = `${baseId}-description`;\n  const errorId = `${baseId}-error`;\n  const listboxId = `${baseId}-listbox`;\n\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  const listboxRef = useRef<HTMLDivElement | null>(null);\n\n  const typeaheadRef = useRef({\n    query: \"\",\n    timestamp: 0,\n  });\n\n  const [internalValue, setInternalValue] = useState<\n    T | readonly T[] | undefined\n  >(() =>\n    multiple\n      ? ((props as SelectMultipleProps<T>).defaultValue ?? [])\n      : (props as SelectSingleProps<T>).defaultValue,\n  );\n\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const [triggerWidth, setTriggerWidth] = useState(0);\n\n  const selectedValue = controlledValue ? value : internalValue;\n\n  const selectedValues: readonly T[] = multiple\n    ? ((selectedValue as readonly T[] | undefined) ?? [])\n    : selectedValue === undefined\n      ? []\n      : [selectedValue as T];\n\n  const isOpen = open ?? internalOpen;\n  const hasSelection = selectedValues.length > 0;\n\n  const hasError = error !== undefined && error !== null && error !== false;\n\n  const isAriaInvalid =\n    ariaInvalid !== undefined &&\n    ariaInvalid !== false &&\n    ariaInvalid !== \"false\";\n\n  const isInvalid = hasError || isAriaInvalid;\n\n  const resolvedAriaInvalid = isInvalid\n    ? hasError || ariaInvalid === true\n      ? true\n      : ariaInvalid\n    : ariaInvalid;\n\n  const errorContent = error === true ? \"Invalid value\" : error;\n\n  const closeOnSelect = closeOnSelectProp ?? !multiple;\n\n  const responsiveSize = resolveResponsiveValue(size, \"md\");\n  const responsiveFullWidth = resolveResponsiveValue(fullWidth, false);\n\n  const groups = useMemo(() => groupOptions(options), [options]);\n\n  const isEqual = useCallback(\n    (option: SelectOption<T>, selected: T) =>\n      isOptionEqualToValue\n        ? isOptionEqualToValue(option, selected)\n        : Object.is(option.value, selected),\n    [isOptionEqualToValue],\n  );\n\n  const selectedOptions = selectedValues\n    .map((selected) => options.find((option) => isEqual(option, selected)))\n    .filter((option): option is SelectOption<T> => option !== undefined);\n\n  const isSelected = (option: SelectOption<T>) =>\n    selectedValues.some((selected) => isEqual(option, selected));\n\n  const initialActiveIndex = useCallback(\n    (direction: -1 | 1 = 1) => {\n      const selectedIndex = options.findIndex(\n        (option) =>\n          !option.disabled &&\n          selectedValues.some((selected) => isEqual(option, selected)),\n      );\n\n      if (selectedIndex !== -1) {\n        return selectedIndex;\n      }\n\n      return direction === 1\n        ? findEnabledIndex(options, -1, 1, false)\n        : findEnabledIndex(options, options.length, -1, false);\n    },\n    [options, selectedValues, isEqual],\n  );\n\n  const changeOpenState = useCallback(\n    (nextOpen: boolean) => {\n      if (!controlledOpen) {\n        setInternalOpen(nextOpen);\n      }\n\n      onOpenChange?.(nextOpen);\n    },\n    [controlledOpen, onOpenChange],\n  );\n\n  const updateValue = useCallback(\n    (nextValue: T | readonly T[] | undefined) => {\n      if (!controlledValue) {\n        setInternalValue(nextValue);\n      }\n\n      if (multiple) {\n        const callback = onChange as\n          | SelectMultipleProps<T>[\"onChange\"]\n          | undefined;\n\n        callback?.([...(nextValue as readonly T[])]);\n      } else {\n        const callback = onChange as\n          | SelectSingleProps<T>[\"onChange\"]\n          | undefined;\n\n        callback?.(nextValue as T | undefined);\n      }\n    },\n    [controlledValue, multiple, onChange],\n  );\n\n  const getSerializedValue = useCallback(\n    (selected: T) =>\n      serializeValue ? serializeValue(selected) : String(selected),\n    [serializeValue],\n  );\n\n  const findTypeaheadMatch = (\n    character: string,\n    startIndex: number,\n  ): number => {\n    if (options.length === 0) {\n      return -1;\n    }\n\n    const now = Date.now();\n    const previous = typeaheadRef.current;\n\n    const query =\n      now - previous.timestamp > 700 ? character : previous.query + character;\n\n    typeaheadRef.current = {\n      query,\n      timestamp: now,\n    };\n\n    const repeatedCharacter =\n      query.length > 1 &&\n      Array.from(query).every(\n        (item) => item.toLowerCase() === query[0].toLowerCase(),\n      );\n\n    const search = repeatedCharacter ? character : query;\n    const normalizedSearch = search.toLocaleLowerCase();\n\n    for (let offset = 1; offset <= options.length; offset++) {\n      const index = (startIndex + offset + options.length) % options.length;\n      const option = options[index];\n\n      if (\n        !option.disabled &&\n        option.label.toLocaleLowerCase().startsWith(normalizedSearch)\n      ) {\n        return index;\n      }\n    }\n\n    return -1;\n  };\n\n  const focusTrigger = () => {\n    triggerRef.current?.focus({ preventScroll: true });\n  };\n\n  const handleOptionSelect = (option: SelectOption<T>) => {\n    if (disabled || option.disabled) {\n      return;\n    }\n\n    const currentlySelected = isSelected(option);\n\n    if (multiple) {\n      if (\n        !currentlySelected &&\n        maxSelected !== undefined &&\n        selectedValues.length >= maxSelected\n      ) {\n        return;\n      }\n\n      const nextValues = currentlySelected\n        ? selectedValues.filter((selected) => !isEqual(option, selected))\n        : [...selectedValues, option.value];\n\n      updateValue(nextValues);\n    } else {\n      updateValue(option.value);\n    }\n\n    if (closeOnSelect) {\n      changeOpenState(false);\n      focusTrigger();\n    }\n  };\n\n  const handleClear = () => {\n    if (!hasSelection || disabled) {\n      return;\n    }\n\n    updateValue(multiple ? [] : undefined);\n    focusTrigger();\n  };\n\n  const handleTriggerRef = useCallback((node: HTMLElement | null) => {\n    triggerRef.current = node as HTMLButtonElement | null;\n  }, []);\n\n  const handleListboxRef = useCallback((node: HTMLDivElement | null) => {\n    listboxRef.current = node;\n  }, []);\n\n  const handleTriggerClick = (event: ReactMouseEvent<HTMLButtonElement>) => {\n    onClick?.(event);\n\n    if (event.defaultPrevented || disabled) {\n      return;\n    }\n\n    // Prevent Popout's default click action. We control its state here\n    // so that the trigger correctly toggles the dropdown.\n    event.preventDefault();\n\n    if (!isOpen) {\n      setActiveIndex(initialActiveIndex());\n    }\n\n    changeOpenState(!isOpen);\n  };\n\n  const handleTriggerKeyDown = (\n    event: ReactKeyboardEvent<HTMLButtonElement>,\n  ) => {\n    onKeyDown?.(event);\n\n    if (event.defaultPrevented || disabled) {\n      return;\n    }\n\n    if (isOpen) {\n      handleComboboxKeyDown(event);\n      return;\n    }\n\n    if (\n      event.key === \"ArrowDown\" ||\n      event.key === \"ArrowUp\" ||\n      event.key === \"Enter\" ||\n      event.key === \" \"\n    ) {\n      event.preventDefault();\n\n      setActiveIndex(initialActiveIndex(event.key === \"ArrowUp\" ? -1 : 1));\n      changeOpenState(true);\n\n      return;\n    }\n\n    if (\n      event.key.length === 1 &&\n      !event.altKey &&\n      !event.ctrlKey &&\n      !event.metaKey\n    ) {\n      const index = findTypeaheadMatch(event.key, activeIndex);\n\n      if (index !== -1) {\n        event.preventDefault();\n        setActiveIndex(index);\n\n        if (!isOpen) {\n          changeOpenState(true);\n        }\n      }\n    }\n  };\n\n  const handleTriggerKeyUp = (event: ReactKeyboardEvent<HTMLButtonElement>) => {\n    onKeyUp?.(event);\n\n    // Prevent Space from producing a second click in Firefox.\n    if (event.key === \" \") {\n      event.preventDefault();\n    }\n  };\n\n  const moveActive = (direction: -1 | 1, amount = 1, wrap = true) => {\n    let nextIndex = activeIndex;\n\n    for (let step = 0; step < amount; step++) {\n      const startIndex =\n        nextIndex === -1 ? (direction === 1 ? -1 : options.length) : nextIndex;\n\n      const next = findEnabledIndex(options, startIndex, direction, wrap);\n\n      if (next === -1) {\n        break;\n      }\n\n      nextIndex = next;\n    }\n\n    if (nextIndex !== -1) {\n      setActiveIndex(nextIndex);\n    }\n  };\n\n  const handleComboboxKeyDown = (event: ReactKeyboardEvent<HTMLElement>) => {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        moveActive(1);\n        return;\n\n      case \"ArrowUp\":\n        event.preventDefault();\n        moveActive(-1);\n        return;\n\n      case \"Home\":\n        event.preventDefault();\n        setActiveIndex(findEnabledIndex(options, -1, 1, false));\n        return;\n\n      case \"End\":\n        event.preventDefault();\n        setActiveIndex(findEnabledIndex(options, options.length, -1, false));\n        return;\n\n      case \"PageDown\":\n        event.preventDefault();\n        moveActive(1, 10, false);\n        return;\n\n      case \"PageUp\":\n        event.preventDefault();\n        moveActive(-1, 10, false);\n        return;\n\n      case \"Enter\":\n      case \" \":\n        event.preventDefault();\n\n        if (activeIndex >= 0 && options[activeIndex]) {\n          handleOptionSelect(options[activeIndex]);\n        }\n\n        return;\n\n      case \"Escape\":\n        event.preventDefault();\n        event.stopPropagation();\n\n        changeOpenState(false);\n        focusTrigger();\n        return;\n\n      case \"Tab\":\n        changeOpenState(false);\n        return;\n\n      default:\n        break;\n    }\n\n    if (\n      event.key.length === 1 &&\n      !event.altKey &&\n      !event.ctrlKey &&\n      !event.metaKey\n    ) {\n      event.preventDefault();\n\n      const index = findTypeaheadMatch(event.key, activeIndex);\n\n      if (index !== -1) {\n        setActiveIndex(index);\n      }\n    }\n  };\n\n  const handleNativeChange = (event: ChangeEvent<HTMLSelectElement>) => {\n    const serializedValues = new Set(\n      Array.from(event.currentTarget.selectedOptions, (option) => option.value),\n    );\n\n    const nextValues = options\n      .filter((option) =>\n        serializedValues.has(getSerializedValue(option.value)),\n      )\n      .map((option) => option.value);\n\n    updateValue(multiple ? nextValues : nextValues[0]);\n  };\n\n  // Initialize or recover the active option when opening.\n  useEffect(() => {\n    if (\n      isOpen &&\n      (activeIndex < 0 ||\n        !options[activeIndex] ||\n        options[activeIndex].disabled)\n    ) {\n      setActiveIndex(initialActiveIndex());\n    }\n  }, [isOpen, activeIndex, options, initialActiveIndex]);\n\n  // Keep the active option visible during keyboard navigation.\n  useEffect(() => {\n    if (!isOpen || activeIndex < 0) {\n      return;\n    }\n\n    const option = listboxRef.current?.ownerDocument.getElementById(\n      `${listboxId}-option-${activeIndex}`,\n    );\n\n    option?.scrollIntoView({ block: \"nearest\" });\n  }, [isOpen, activeIndex, listboxId]);\n\n  // Match the menu's minimum width to the trigger.\n  useLayoutEffect(() => {\n    if (!isOpen || !matchTriggerWidth) {\n      return;\n    }\n\n    const trigger = triggerRef.current;\n    const ownerWindow = trigger?.ownerDocument.defaultView;\n\n    if (!trigger || !ownerWindow) {\n      return;\n    }\n\n    const updateWidth = () => {\n      setTriggerWidth(trigger.getBoundingClientRect().width);\n    };\n\n    updateWidth();\n\n    const ResizeObserverConstructor =\n      ownerWindow.ResizeObserver ?? ResizeObserver;\n\n    const observer = new ResizeObserverConstructor(updateWidth);\n    observer.observe(trigger);\n\n    ownerWindow.addEventListener(\"resize\", updateWidth);\n\n    return () => {\n      observer.disconnect();\n      ownerWindow.removeEventListener(\"resize\", updateWidth);\n    };\n  }, [isOpen, matchTriggerWidth]);\n\n  const activeOptionId =\n    activeIndex >= 0 && options[activeIndex] && !options[activeIndex].disabled\n      ? `${listboxId}-option-${activeIndex}`\n      : undefined;\n\n  const resolvedLabelledBy =\n    ariaLabelledBy ?? (label != null ? labelId : undefined);\n\n  const resolvedDescribedBy =\n    [\n      ariaDescribedBy,\n      description != null ? descriptionId : undefined,\n      hasError ? errorId : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \") || undefined;\n\n  const displayValue = hasSelection\n    ? renderValue\n      ? renderValue(multiple ? selectedOptions : selectedOptions[0])\n      : multiple\n        ? selectedOptions.length\n          ? selectedOptions.map((option) => option.label).join(\", \")\n          : selectedValues.map(String).join(\", \")\n        : (selectedOptions[0]?.label ?? String(selectedValues[0]))\n    : placeholder;\n\n  const listboxStyle: CSSProperties = {\n    minWidth: matchTriggerWidth && triggerWidth > 0 ? triggerWidth : undefined,\n    maxHeight: menuMaxHeight,\n  };\n\n  const triggerElement = (\n    <button\n      {...buttonProps}\n      ref={handleTriggerRef}\n      id={triggerId}\n      type=\"button\"\n      role=\"combobox\"\n      disabled={disabled}\n      className={cn(\"puzzle-select__trigger\", className)}\n      onClick={handleTriggerClick}\n      onKeyDown={handleTriggerKeyDown}\n      onKeyUp={handleTriggerKeyUp}\n      aria-label={ariaLabel}\n      aria-labelledby={resolvedLabelledBy}\n      aria-describedby={resolvedDescribedBy}\n      aria-autocomplete=\"none\"\n      aria-haspopup=\"listbox\"\n      aria-expanded={isOpen}\n      aria-controls={isOpen ? listboxId : undefined}\n      aria-activedescendant={isOpen ? activeOptionId : undefined}\n      aria-required={required || undefined}\n      aria-invalid={resolvedAriaInvalid}\n    >\n      <span\n        className={cn(\n          \"puzzle-select__value\",\n          !hasSelection && \"puzzle-select__placeholder\",\n        )}\n      >\n        {displayValue}\n      </span>\n\n      <span className=\"puzzle-select__icon\" aria-hidden=\"true\" />\n    </button>\n  ) as ReactElement<PopoutTriggerProps>;\n\n  const renderOptionElement = ({ option, index }: IndexedOption<T>) => {\n    const selected = isSelected(option);\n    const active = activeIndex === index;\n\n    const content = renderOption ? (\n      renderOption(option, {\n        selected,\n        active,\n        multiple,\n      })\n    ) : option.description != null ? (\n      <span className=\"puzzle-select__option-content\">\n        <span className=\"puzzle-select__option-label\">{option.label}</span>\n\n        <span\n          id={`${listboxId}-description-${index}`}\n          className=\"puzzle-select__option-description\"\n        >\n          {option.description}\n        </span>\n      </span>\n    ) : (\n      option.label\n    );\n\n    return (\n      <div\n        key={option.id ?? index}\n        id={`${listboxId}-option-${index}`}\n        className=\"puzzle-select__option\"\n        role=\"option\"\n        aria-label={option.label}\n        aria-selected={selected}\n        aria-disabled={option.disabled || undefined}\n        aria-describedby={\n          !renderOption && option.description != null\n            ? `${listboxId}-description-${index}`\n            : undefined\n        }\n        data-index={index}\n        data-active={active ? \"true\" : undefined}\n        onPointerDown={(event) => event.preventDefault()}\n        onPointerMove={(event) => {\n          if (event.pointerType !== \"touch\" && !option.disabled) {\n            setActiveIndex(index);\n          }\n        }}\n        onClick={() => handleOptionSelect(option)}\n      >\n        {content}\n      </div>\n    );\n  };\n\n  return (\n    <div\n      className={cn(\"puzzle-select\", rootClassName)}\n      data-open={isOpen ? \"true\" : \"false\"}\n      data-disabled={disabled ? \"true\" : undefined}\n      data-invalid={isInvalid ? \"true\" : undefined}\n      data-multiple={multiple ? \"true\" : undefined}\n      data-size-mobile={responsiveSize.mobile}\n      data-size-tablet={responsiveSize.tablet}\n      data-size-desktop={responsiveSize.desktop}\n      data-full-width-mobile={String(responsiveFullWidth.mobile)}\n      data-full-width-tablet={String(responsiveFullWidth.tablet)}\n      data-full-width-desktop={String(responsiveFullWidth.desktop)}\n    >\n      {label != null && (\n        <label\n          id={labelId}\n          htmlFor={triggerId}\n          className=\"puzzle-select__label\"\n        >\n          {label}\n\n          {required && (\n            <span className=\"puzzle-select__required\" aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n\n      <div className=\"puzzle-select__control\">\n        <Popout\n          trigger={triggerElement}\n          open={isOpen}\n          onOpenChange={changeOpenState}\n          action=\"click\"\n          position={position}\n          align={align}\n          offset={offset}\n          collisionPadding={collisionPadding}\n          contentClassName={cn(\"puzzle-select__popover\", popoverClassName)}\n        >\n          <div\n            ref={handleListboxRef}\n            id={listboxId}\n            className={cn(\"puzzle-select__listbox\", menuClassName)}\n            role=\"listbox\"\n            aria-label={\n              label == null && ariaLabelledBy == null ? ariaLabel : undefined\n            }\n            aria-labelledby={\n              ariaLabelledBy ?? (label != null ? labelId : undefined)\n            }\n            aria-multiselectable={multiple || undefined}\n            style={listboxStyle}\n          >\n            {options.length === 0 ? (\n              <div className=\"puzzle-select__empty\" role=\"presentation\">\n                {noOptionsText}\n              </div>\n            ) : (\n              groups.map((group) =>\n                group.label != null ? (\n                  <div\n                    key={group.label}\n                    className=\"puzzle-select__group\"\n                    role=\"group\"\n                    aria-label={group.label}\n                  >\n                    <div\n                      className=\"puzzle-select__group-label\"\n                      aria-hidden=\"true\"\n                    >\n                      {group.label}\n                    </div>\n\n                    {group.options.map(renderOptionElement)}\n                  </div>\n                ) : (\n                  group.options.map(renderOptionElement)\n                ),\n              )\n            )}\n          </div>\n        </Popout>\n\n        {clearable && hasSelection && (\n          <button\n            type=\"button\"\n            className=\"puzzle-select__clear\"\n            disabled={disabled}\n            aria-label={clearLabel}\n            onClick={(event) => {\n              event.preventDefault();\n              event.stopPropagation();\n              handleClear();\n            }}\n          >\n            <span aria-hidden=\"true\">×</span>\n          </button>\n        )}\n      </div>\n\n      {description != null && (\n        <div id={descriptionId} className=\"puzzle-select__description\">\n          {description}\n        </div>\n      )}\n\n      {hasError && (\n        <div id={errorId} className=\"puzzle-select__error\" role=\"alert\">\n          {errorContent}\n        </div>\n      )}\n\n      {name != null && (\n        <select\n          className=\"puzzle-select__native\"\n          aria-hidden=\"true\"\n          tabIndex={-1}\n          name={name}\n          form={form}\n          autoComplete={autoComplete}\n          disabled={disabled}\n          required={required}\n          multiple={multiple}\n          value={\n            multiple\n              ? selectedValues.map(getSerializedValue)\n              : selectedValues.length\n                ? getSerializedValue(selectedValues[0])\n                : \"\"\n          }\n          onChange={handleNativeChange}\n          onInvalid={(event) => {\n            event.preventDefault();\n            focusTrigger();\n          }}\n        >\n          {!multiple && <option value=\"\"> </option>}\n\n          {groups.map((group) =>\n            group.label != null ? (\n              <optgroup key={group.label} label={group.label}>\n                {group.options.map(({ option, index }) => (\n                  <option\n                    key={option.id ?? index}\n                    value={getSerializedValue(option.value)}\n                    disabled={option.disabled}\n                  >\n                    {option.label}\n                  </option>\n                ))}\n              </optgroup>\n            ) : (\n              group.options.map(({ option, index }) => (\n                <option\n                  key={option.id ?? index}\n                  value={getSerializedValue(option.value)}\n                  disabled={option.disabled}\n                >\n                  {option.label}\n                </option>\n              ))\n            ),\n          )}\n        </select>\n      )}\n    </div>\n  );\n};\n\nexport {\n  Select,\n  type SelectOption,\n  type SelectProps,\n  type SelectSingleProps,\n  type SelectMultipleProps,\n  type SelectSize,\n};\n"],"mappings":"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"}

package/dist/components/forms/select/select.css

@@ -0,0 +1,363 @@
+.puzzle-select {
+  --puzzle-select-height: 2.5rem;
+  --puzzle-select-padding: var(--puzzle-space-3, .75rem);
+  --puzzle-select-font-size: var(--puzzle-font-size-sm, .875rem);
+  gap: var(--puzzle-space-1, .25rem);
+  min-width: 0;
+  color: var(--puzzle-color-text);
+  flex-direction: column;
+  display: inline-flex;
+  position: relative;
+}
+
+.puzzle-select[data-size-mobile="sm"] {
+  --puzzle-select-height: 2rem;
+  --puzzle-select-padding: var(--puzzle-space-2, .5rem);
+  --puzzle-select-font-size: var(--puzzle-font-size-xs, .75rem);
+}
+
+.puzzle-select[data-size-mobile="md"] {
+  --puzzle-select-height: 2.5rem;
+  --puzzle-select-padding: var(--puzzle-space-3, .75rem);
+  --puzzle-select-font-size: var(--puzzle-font-size-sm, .875rem);
+}
+
+.puzzle-select[data-size-mobile="lg"] {
+  --puzzle-select-height: 3rem;
+  --puzzle-select-padding: var(--puzzle-space-4, 1rem);
+  --puzzle-select-font-size: var(--puzzle-font-size-base, 1rem);
+}
+
+@media (width >= 768px) {
+  .puzzle-select[data-size-tablet="sm"] {
+    --puzzle-select-height: 2rem;
+    --puzzle-select-padding: var(--puzzle-space-2, .5rem);
+    --puzzle-select-font-size: var(--puzzle-font-size-xs, .75rem);
+  }
+
+  .puzzle-select[data-size-tablet="md"] {
+    --puzzle-select-height: 2.5rem;
+    --puzzle-select-padding: var(--puzzle-space-3, .75rem);
+    --puzzle-select-font-size: var(--puzzle-font-size-sm, .875rem);
+  }
+
+  .puzzle-select[data-size-tablet="lg"] {
+    --puzzle-select-height: 3rem;
+    --puzzle-select-padding: var(--puzzle-space-4, 1rem);
+    --puzzle-select-font-size: var(--puzzle-font-size-base, 1rem);
+  }
+
+  .puzzle-select[data-full-width-tablet="true"] {
+    width: 100%;
+  }
+
+  .puzzle-select[data-full-width-tablet="false"] {
+    width: auto;
+  }
+}
+
+@media (width >= 1024px) {
+  .puzzle-select[data-size-desktop="sm"] {
+    --puzzle-select-height: 2rem;
+    --puzzle-select-padding: var(--puzzle-space-2, .5rem);
+    --puzzle-select-font-size: var(--puzzle-font-size-xs, .75rem);
+  }
+
+  .puzzle-select[data-size-desktop="md"] {
+    --puzzle-select-height: 2.5rem;
+    --puzzle-select-padding: var(--puzzle-space-3, .75rem);
+    --puzzle-select-font-size: var(--puzzle-font-size-sm, .875rem);
+  }
+
+  .puzzle-select[data-size-desktop="lg"] {
+    --puzzle-select-height: 3rem;
+    --puzzle-select-padding: var(--puzzle-space-4, 1rem);
+    --puzzle-select-font-size: var(--puzzle-font-size-base, 1rem);
+  }
+
+  .puzzle-select[data-full-width-desktop="true"] {
+    width: 100%;
+  }
+
+  .puzzle-select[data-full-width-desktop="false"] {
+    width: auto;
+  }
+}
+
+.puzzle-select[data-full-width-mobile="true"] {
+  width: 100%;
+}
+
+.puzzle-select__label {
+  color: var(--puzzle-color-text);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  font-weight: var(--puzzle-font-weight-medium, 500);
+  line-height: var(--puzzle-font-line-height-body2, 1.4);
+  display: block;
+}
+
+.puzzle-select__required {
+  color: var(--puzzle-color-danger);
+  margin-inline-start: .2em;
+}
+
+.puzzle-select__control {
+  align-items: center;
+  gap: var(--puzzle-space-1, .25rem);
+  width: 100%;
+  min-width: 0;
+  display: flex;
+}
+
+.puzzle-select__trigger {
+  box-sizing: border-box;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--puzzle-space-2, .5rem);
+  width: 100%;
+  min-width: 0;
+  min-height: var(--puzzle-select-height);
+  padding-inline: var(--puzzle-select-padding);
+  border: 1px solid var(--puzzle-color-border);
+  border-radius: var(--puzzle-radius-md, .5rem);
+  background: var(--puzzle-color-surface);
+  color: var(--puzzle-color-text);
+  font-family: inherit;
+  font-size: var(--puzzle-select-font-size);
+  font-weight: var(--puzzle-font-weight-normal, 400);
+  line-height: var(--puzzle-font-line-height-body2, 1.4);
+  text-align: start;
+  cursor: pointer;
+  transition: background-color var(--puzzle-duration-fast, .15s) ease,
+        border-color var(--puzzle-duration-fast, .15s) ease,
+        box-shadow var(--puzzle-duration-fast, .15s) ease;
+  flex: auto;
+  display: inline-flex;
+}
+
+.puzzle-select__trigger:hover:not(:disabled) {
+  border-color: var(--puzzle-color-border-strong, var(--puzzle-color-border));
+}
+
+.puzzle-select[data-open="true"] .puzzle-select__trigger {
+  border-color: var(--puzzle-color-primary);
+}
+
+.puzzle-select__trigger:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 2px;
+}
+
+.puzzle-select__value {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: auto;
+  min-width: 0;
+  display: block;
+  overflow: hidden;
+}
+
+.puzzle-select__placeholder {
+  color: var(--puzzle-color-text-muted);
+}
+
+.puzzle-select__icon {
+  opacity: .65;
+  width: .5rem;
+  height: .5rem;
+  transition: transform var(--puzzle-duration-fast, .15s) ease,
+        opacity var(--puzzle-duration-fast, .15s) ease;
+  border-block-end: 1.5px solid;
+  border-inline-end: 1.5px solid;
+  flex: 0 0 .5rem;
+  margin-block-start: -.2rem;
+  display: block;
+  position: relative;
+  transform: rotate(45deg);
+}
+
+.puzzle-select[data-open="true"] .puzzle-select__icon {
+  opacity: 1;
+  margin-block-start: .2rem;
+  transform: rotate(225deg);
+}
+
+.puzzle-select__clear {
+  box-sizing: border-box;
+  flex: 0 0 var(--puzzle-select-height);
+  width: var(--puzzle-select-height);
+  height: var(--puzzle-select-height);
+  border: 1px solid var(--puzzle-color-border);
+  border-radius: var(--puzzle-radius-md, .5rem);
+  background: var(--puzzle-color-surface);
+  color: var(--puzzle-color-text-muted);
+  font: inherit;
+  cursor: pointer;
+  transition: background-color var(--puzzle-duration-fast, .15s) ease,
+        color var(--puzzle-duration-fast, .15s) ease;
+  place-items: center;
+  padding: 0;
+  font-size: 1.25rem;
+  line-height: 1;
+  display: grid;
+}
+
+.puzzle-select__clear:hover:not(:disabled) {
+  background: var(--puzzle-color-surface-sunken);
+  color: var(--puzzle-color-text);
+}
+
+.puzzle-select__clear:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 2px;
+}
+
+.puzzle-popout__content.puzzle-select__popover {
+  padding: 0;
+  overflow: hidden;
+}
+
+.puzzle-select__listbox {
+  box-sizing: border-box;
+  min-width: 0;
+  padding: var(--puzzle-space-1, .25rem);
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  outline: none;
+  overflow: hidden auto;
+}
+
+.puzzle-select__option {
+  box-sizing: border-box;
+  align-items: center;
+  gap: var(--puzzle-space-2, .5rem);
+  min-width: 0;
+  min-height: 2.25rem;
+  padding: var(--puzzle-space-2, .5rem) var(--puzzle-space-3, .75rem);
+  border-radius: var(--puzzle-radius-sm, .25rem);
+  color: var(--puzzle-color-text);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  line-height: var(--puzzle-font-line-height-body2, 1.4);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--puzzle-duration-fast, .15s) ease,
+        color var(--puzzle-duration-fast, .15s) ease;
+  background: none;
+  display: flex;
+}
+
+.puzzle-select__option[data-active="true"] {
+  background: var(--puzzle-color-surface-sunken);
+}
+
+.puzzle-select__option:after {
+  box-sizing: border-box;
+  content: "";
+  opacity: 0;
+  border-block-end: 2px solid;
+  border-inline-start: 2px solid;
+  flex: 0 0 .55rem;
+  width: .55rem;
+  height: .3rem;
+  margin-inline-start: auto;
+  transform: rotate(-45deg);
+}
+
+.puzzle-select__option[aria-selected="true"]:after {
+  opacity: 1;
+}
+
+.puzzle-select__option[aria-disabled="true"] {
+  color: var(--puzzle-color-text-subtle);
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+.puzzle-select__option-content {
+  gap: var(--puzzle-space-1, .25rem);
+  flex-direction: column;
+  flex: auto;
+  min-width: 0;
+  display: flex;
+}
+
+.puzzle-select__option-label {
+  color: inherit;
+  font-weight: var(--puzzle-font-weight-medium, 500);
+}
+
+.puzzle-select__option-description {
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+}
+
+.puzzle-select__group + .puzzle-select__group, .puzzle-select__ungrouped + .puzzle-select__group {
+  margin-block-start: var(--puzzle-space-2, .5rem);
+}
+
+.puzzle-select__group-label {
+  padding: var(--puzzle-space-2, .5rem) var(--puzzle-space-3, .75rem);
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  font-weight: var(--puzzle-font-weight-semibold, 600);
+  line-height: var(--puzzle-font-line-height-caption, 1.4);
+  user-select: none;
+}
+
+.puzzle-select__empty {
+  padding: var(--puzzle-space-3, .75rem);
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  text-align: center;
+}
+
+.puzzle-select__description {
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  line-height: var(--puzzle-font-line-height-caption, 1.4);
+}
+
+.puzzle-select__error {
+  color: var(--puzzle-color-danger);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  line-height: var(--puzzle-font-line-height-caption, 1.4);
+}
+
+.puzzle-select[data-invalid="true"] .puzzle-select__trigger {
+  border-color: var(--puzzle-color-danger);
+}
+
+.puzzle-select[data-invalid="true"] .puzzle-select__trigger:focus-visible {
+  outline-color: var(--puzzle-color-danger);
+}
+
+.puzzle-select[data-disabled="true"] .puzzle-select__trigger {
+  background: var(--puzzle-color-surface-sunken);
+  color: var(--puzzle-color-text-muted);
+  cursor: not-allowed;
+  opacity: .6;
+}
+
+.puzzle-select__clear:disabled {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+.puzzle-select__native {
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-select__trigger, .puzzle-select__icon, .puzzle-select__clear, .puzzle-select__option {
+    transition: none;
+  }
+}

package/dist/components/forms/slider/index.cjs

@@ -0,0 +1,93 @@
+"use client";
+;/* empty css             */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/forms/slider/index.tsx
+const getPrecision = (value) => {
+	const [coefficient, exponent = "0"] = String(value).toLowerCase().split("e");
+	const decimals = coefficient.split(".")[1]?.length ?? 0;
+	return Math.min(12, Math.max(0, decimals - Number(exponent)));
+};
+const normalizeSliderValue = (value, min, max, step) => {
+	if (max <= min) return min;
+	const boundedValue = Math.min(max, Math.max(min, value));
+	if (step === "any") return boundedValue;
+	const factor = 10 ** Math.max(getPrecision(min), getPrecision(step));
+	const steppedValue = min + Math.round((boundedValue - min) / step) * step;
+	return Math.min(max, Math.max(min, Math.round(steppedValue * factor) / factor));
+};
+const Slider = ({ value, defaultValue, onChange, min = 0, max = 100, step = 1, size = "md", marks, showValue = false, formatValue, className, id, ref, disabled = false, style, "aria-invalid": ariaInvalid, "aria-valuetext": ariaValueText, ...inputProps }) => {
+	const generatedId = (0, react.useId)();
+	const inputId = id ?? generatedId;
+	const resolvedMin = Number.isFinite(min) ? min : 0;
+	const resolvedMax = Math.max(resolvedMin, Number.isFinite(max) ? max : 100);
+	const resolvedStep = step === "any" ? "any" : Number.isFinite(step) && step > 0 ? step : 1;
+	const isControlled = value !== void 0;
+	const [internalValue, setInternalValue] = (0, react.useState)(() => normalizeSliderValue(defaultValue ?? (resolvedMin + resolvedMax) / 2, resolvedMin, resolvedMax, resolvedStep));
+	const currentValue = normalizeSliderValue(isControlled ? value : internalValue, resolvedMin, resolvedMax, resolvedStep);
+	const progress = resolvedMax > resolvedMin ? (currentValue - resolvedMin) / (resolvedMax - resolvedMin) * 100 : 0;
+	const formattedValue = formatValue?.(currentValue);
+	const isInvalid = ariaInvalid === true || ariaInvalid === "true";
+	const resolvedMarks = (marks ?? []).filter((mark) => Number.isFinite(mark.value) && mark.value >= resolvedMin && mark.value <= resolvedMax).slice().sort((a, b) => a.value - b.value);
+	const hasMarkLabels = resolvedMarks.some((mark) => mark.label != null);
+	const handleChange = (event) => {
+		const nextValue = normalizeSliderValue(event.currentTarget.valueAsNumber, resolvedMin, resolvedMax, resolvedStep);
+		if (!isControlled) setInternalValue(nextValue);
+		onChange?.(nextValue);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _puzzle_ui_core.cn)("puzzle-slider", className),
+		"data-size": size,
+		"data-disabled": disabled || void 0,
+		"data-invalid": isInvalid || void 0,
+		children: [
+			showValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("output", {
+				htmlFor: inputId,
+				className: "puzzle-slider__value",
+				children: formattedValue ?? currentValue
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				...inputProps,
+				ref,
+				id: inputId,
+				className: "puzzle-slider__input",
+				type: "range",
+				min: resolvedMin,
+				max: resolvedMax,
+				step: resolvedStep,
+				value: currentValue,
+				disabled,
+				"aria-invalid": ariaInvalid,
+				"aria-valuetext": ariaValueText ?? formattedValue,
+				style: {
+					...style,
+					"--puzzle-slider-progress": `${progress}%`
+				},
+				onChange: handleChange
+			}),
+			resolvedMarks.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "puzzle-slider__marks",
+				"data-has-labels": hasMarkLabels || void 0,
+				children: resolvedMarks.map((mark, index) => {
+					const position = resolvedMax > resolvedMin ? (mark.value - resolvedMin) / (resolvedMax - resolvedMin) * 100 : 0;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "puzzle-slider__mark",
+						"data-edge": index === 0 ? "start" : index === resolvedMarks.length - 1 ? "end" : void 0,
+						style: { insetInlineStart: `${position}%` },
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "puzzle-slider__mark-tick",
+							"aria-hidden": "true"
+						}), mark.label != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "puzzle-slider__mark-label",
+							children: mark.label
+						})]
+					}, `${mark.value}-${index}`);
+				})
+			})
+		]
+	});
+};
+exports.Slider = Slider;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/forms/slider/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useId","useState","cn"],"sources":["../../../../src/components/forms/slider/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useId,\n  useState,\n  type ChangeEvent,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport \"./slider.css\";\n\ntype SliderSize = \"sm\" | \"md\" | \"lg\";\n\ntype SliderMark = {\n  /** Numeric position of the mark. */\n  value: number;\n\n  /** Optional visible label below the mark. */\n  label?: ReactNode;\n};\n\ntype SliderProps = Omit<\n  ComponentPropsWithRef<\"input\">,\n  | \"type\"\n  | \"value\"\n  | \"defaultValue\"\n  | \"onChange\"\n  | \"min\"\n  | \"max\"\n  | \"step\"\n  | \"size\"\n  | \"className\"\n> & {\n  /** Controlled numeric value. */\n  value?: number;\n\n  /** Initial value for uncontrolled usage. Defaults to the range midpoint. */\n  defaultValue?: number;\n\n  /** Called whenever the selected value changes. */\n  onChange?: (value: number) => void;\n\n  /** Minimum selectable value. Defaults to 0. */\n  min?: number;\n\n  /** Maximum selectable value. Defaults to 100. */\n  max?: number;\n\n  /** Allowed increment. Use \"any\" to disable step rounding. */\n  step?: number | \"any\";\n\n  /** Visual size of the slider. */\n  size?: SliderSize;\n\n  /** Optional marks displayed below the track. */\n  marks?: readonly SliderMark[];\n\n  /** Displays the current value above the slider. */\n  showValue?: boolean;\n\n  /**\n   * Formats the visible value and supplies aria-valuetext.\n   * An explicitly supplied aria-valuetext takes precedence.\n   */\n  formatValue?: (value: number) => string;\n\n  /** Class applied to the outer slider element. */\n  className?: string;\n};\n\nconst getPrecision = (value: number) => {\n  const [coefficient, exponent = \"0\"] = String(value).toLowerCase().split(\"e\");\n\n  const decimals = coefficient.split(\".\")[1]?.length ?? 0;\n\n  return Math.min(12, Math.max(0, decimals - Number(exponent)));\n};\n\nconst normalizeSliderValue = (\n  value: number,\n  min: number,\n  max: number,\n  step: number | \"any\",\n) => {\n  if (max <= min) {\n    return min;\n  }\n\n  const boundedValue = Math.min(max, Math.max(min, value));\n\n  if (step === \"any\") {\n    return boundedValue;\n  }\n\n  const precision = Math.max(getPrecision(min), getPrecision(step));\n  const factor = 10 ** precision;\n\n  const steppedValue = min + Math.round((boundedValue - min) / step) * step;\n\n  return Math.min(\n    max,\n    Math.max(min, Math.round(steppedValue * factor) / factor),\n  );\n};\n\nconst Slider = ({\n  value,\n  defaultValue,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  size = \"md\",\n  marks,\n  showValue = false,\n  formatValue,\n  className,\n  id,\n  ref,\n  disabled = false,\n  style,\n  \"aria-invalid\": ariaInvalid,\n  \"aria-valuetext\": ariaValueText,\n  ...inputProps\n}: SliderProps) => {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n\n  const resolvedMin = Number.isFinite(min) ? min : 0;\n\n  const requestedMax = Number.isFinite(max) ? max : 100;\n  const resolvedMax = Math.max(resolvedMin, requestedMax);\n\n  const resolvedStep =\n    step === \"any\" ? \"any\" : Number.isFinite(step) && step > 0 ? step : 1;\n\n  const isControlled = value !== undefined;\n\n  const [internalValue, setInternalValue] = useState(() =>\n    normalizeSliderValue(\n      defaultValue ?? (resolvedMin + resolvedMax) / 2,\n      resolvedMin,\n      resolvedMax,\n      resolvedStep,\n    ),\n  );\n\n  const currentValue = normalizeSliderValue(\n    isControlled ? value : internalValue,\n    resolvedMin,\n    resolvedMax,\n    resolvedStep,\n  );\n\n  const progress =\n    resolvedMax > resolvedMin\n      ? ((currentValue - resolvedMin) / (resolvedMax - resolvedMin)) * 100\n      : 0;\n\n  const formattedValue = formatValue?.(currentValue);\n\n  const isInvalid = ariaInvalid === true || ariaInvalid === \"true\";\n\n  const resolvedMarks = (marks ?? [])\n    .filter(\n      (mark) =>\n        Number.isFinite(mark.value) &&\n        mark.value >= resolvedMin &&\n        mark.value <= resolvedMax,\n    )\n    .slice()\n    .sort((a, b) => a.value - b.value);\n\n  const hasMarkLabels = resolvedMarks.some((mark) => mark.label != null);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const nextValue = normalizeSliderValue(\n      event.currentTarget.valueAsNumber,\n      resolvedMin,\n      resolvedMax,\n      resolvedStep,\n    );\n\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n\n    onChange?.(nextValue);\n  };\n\n  return (\n    <div\n      className={cn(\"puzzle-slider\", className)}\n      data-size={size}\n      data-disabled={disabled || undefined}\n      data-invalid={isInvalid || undefined}\n    >\n      {showValue && (\n        <output htmlFor={inputId} className=\"puzzle-slider__value\">\n          {formattedValue ?? currentValue}\n        </output>\n      )}\n\n      <input\n        {...inputProps}\n        ref={ref}\n        id={inputId}\n        className=\"puzzle-slider__input\"\n        type=\"range\"\n        min={resolvedMin}\n        max={resolvedMax}\n        step={resolvedStep}\n        value={currentValue}\n        disabled={disabled}\n        aria-invalid={ariaInvalid}\n        aria-valuetext={ariaValueText ?? formattedValue}\n        style={\n          {\n            ...style,\n            \"--puzzle-slider-progress\": `${progress}%`,\n          } as CSSProperties\n        }\n        onChange={handleChange}\n      />\n\n      {resolvedMarks.length > 0 && (\n        <div\n          className=\"puzzle-slider__marks\"\n          data-has-labels={hasMarkLabels || undefined}\n        >\n          {resolvedMarks.map((mark, index) => {\n            const position =\n              resolvedMax > resolvedMin\n                ? ((mark.value - resolvedMin) / (resolvedMax - resolvedMin)) *\n                  100\n                : 0;\n\n            return (\n              <span\n                key={`${mark.value}-${index}`}\n                className=\"puzzle-slider__mark\"\n                data-edge={\n                  index === 0\n                    ? \"start\"\n                    : index === resolvedMarks.length - 1\n                      ? \"end\"\n                      : undefined\n                }\n                style={{\n                  insetInlineStart: `${position}%`,\n                }}\n              >\n                <span className=\"puzzle-slider__mark-tick\" aria-hidden=\"true\" />\n\n                {mark.label != null && (\n                  <span className=\"puzzle-slider__mark-label\">\n                    {mark.label}\n                  </span>\n                )}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport { Slider, type SliderProps, type SliderMark, type SliderSize };\n"],"mappings":"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"}

package/dist/components/forms/slider/index.d.cts

@@ -0,0 +1,37 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+type SliderSize = "sm" | "md" | "lg";
+type SliderMark = {
+  /** Numeric position of the mark. */
+  value: number;
+  /** Optional visible label below the mark. */
+  label?: ReactNode;
+};
+type SliderProps = Omit<ComponentPropsWithRef<"input">, "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step" | "size" | "className"> & {
+  /** Controlled numeric value. */
+  value?: number;
+  /** Initial value for uncontrolled usage. Defaults to the range midpoint. */
+  defaultValue?: number;
+  /** Called whenever the selected value changes. */
+  onChange?: (value: number) => void;
+  /** Minimum selectable value. Defaults to 0. */
+  min?: number;
+  /** Maximum selectable value. Defaults to 100. */
+  max?: number;
+  /** Allowed increment. Use "any" to disable step rounding. */
+  step?: number | "any";
+  /** Visual size of the slider. */
+  size?: SliderSize;
+  /** Optional marks displayed below the track. */
+  marks?: readonly SliderMark[];
+  /** Displays the current value above the slider. */
+  showValue?: boolean;
+  /**
+   * Formats the visible value and supplies aria-valuetext.
+   * An explicitly supplied aria-valuetext takes precedence.
+   */
+  formatValue?: (value: number) => string;
+  /** Class applied to the outer slider element. */
+  className?: string;
+};
+declare const Slider: ({ value, defaultValue, onChange, min, max, step, size, marks, showValue, formatValue, className, id, ref, disabled, style, "aria-invalid": ariaInvalid, "aria-valuetext": ariaValueText, ...inputProps }: SliderProps) => import("react").JSX.Element;
+export { Slider, type SliderMark, type SliderProps, type SliderSize };

package/dist/components/forms/slider/index.d.ts

@@ -0,0 +1,37 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+type SliderSize = "sm" | "md" | "lg";
+type SliderMark = {
+  /** Numeric position of the mark. */
+  value: number;
+  /** Optional visible label below the mark. */
+  label?: ReactNode;
+};
+type SliderProps = Omit<ComponentPropsWithRef<"input">, "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step" | "size" | "className"> & {
+  /** Controlled numeric value. */
+  value?: number;
+  /** Initial value for uncontrolled usage. Defaults to the range midpoint. */
+  defaultValue?: number;
+  /** Called whenever the selected value changes. */
+  onChange?: (value: number) => void;
+  /** Minimum selectable value. Defaults to 0. */
+  min?: number;
+  /** Maximum selectable value. Defaults to 100. */
+  max?: number;
+  /** Allowed increment. Use "any" to disable step rounding. */
+  step?: number | "any";
+  /** Visual size of the slider. */
+  size?: SliderSize;
+  /** Optional marks displayed below the track. */
+  marks?: readonly SliderMark[];
+  /** Displays the current value above the slider. */
+  showValue?: boolean;
+  /**
+   * Formats the visible value and supplies aria-valuetext.
+   * An explicitly supplied aria-valuetext takes precedence.
+   */
+  formatValue?: (value: number) => string;
+  /** Class applied to the outer slider element. */
+  className?: string;
+};
+declare const Slider: ({ value, defaultValue, onChange, min, max, step, size, marks, showValue, formatValue, className, id, ref, disabled, style, "aria-invalid": ariaInvalid, "aria-valuetext": ariaValueText, ...inputProps }: SliderProps) => import("react").JSX.Element;
+export { Slider, type SliderMark, type SliderProps, type SliderSize };