@spark-ui/components 17.4.1 → 17.5.0

package/dist/slider/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/slider/Slider.styles.ts","../../src/slider/SliderContext.tsx","../../src/slider/Slider.tsx","../../src/slider/SliderControl.tsx","../../src/slider/SliderTrack.styles.ts","../../src/slider/SliderIndicator.tsx","../../src/slider/SliderLabel.tsx","../../src/slider/SliderMaxValue.tsx","../../src/slider/SliderMinValue.tsx","../../src/slider/SliderThumb.styles.ts","../../src/slider/SliderThumbContext.tsx","../../src/slider/SliderThumb.tsx","../../src/slider/SliderTrack.tsx","../../src/slider/useSliderValueBoundaries.ts","../../src/slider/SliderValue.tsx","../../src/slider/index.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'grid grid-cols-[1fr_auto] gap-y-sm gap-x-md relative',\n  'touch-none select-none',\n  'data-disabled:cursor-not-allowed data-disabled:opacity-dim-3',\n])\n","import type { RefObject } from 'react'\nimport { createContext, useContext } from 'react'\n\nimport type { SliderProps } from './Slider'\n\nexport type SliderContextInterface = Pick<SliderProps, 'intent' | 'min' | 'max'> & {\n  fieldLabelId?: string\n  fieldId?: string\n  onLabelId?: (id: string | undefined) => void\n  hasValueInThumb: boolean\n  registerValueInThumb: () => () => void\n  controlRef: RefObject<HTMLElement | null>\n  thumbRef: RefObject<HTMLElement | null>\n}\n\nexport const SliderContext = createContext<SliderContextInterface>({} as SliderContextInterface)\n\nexport const useSliderContext = () => useContext(SliderContext)\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { ComponentProps, type PropsWithChildren, Ref, useCallback, useRef, useState } from 'react'\n\nimport { rootStyles } from './Slider.styles'\nimport { SliderContext } from './SliderContext'\nimport type { SliderRangeVariantsProps } from './SliderTrack.styles'\n\nexport interface SliderProps\n  extends\n    Omit<\n      ComponentProps<typeof BaseSlider.Root>,\n      'render' | 'orientation' | 'onValueChange' | 'onValueCommitted'\n    >,\n    PropsWithChildren<SliderRangeVariantsProps> {\n  /**\n   * The value of the slider when initially rendered. Use when you do not need to control the state of the slider.\n   */\n  defaultValue?: number\n  /**\n   * The controlled value of the slider. Must be used in conjunction with `onValueChange`.\n   */\n  value?: number\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: number) => void\n  /**\n   * Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.\n   */\n  onValueCommit?: (value: number) => void\n  /**\n   * The name of the slider. Submitted with its owning form as part of a name/value pair.\n   * If wrapped with a FormField with a name, will be inherited from it.\n   */\n  name?: string\n  /**\n   * When `true`, prevents the user from interacting with the slider.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Sets the slider as interactive or not.\n   */\n  readOnly?: boolean\n  /**\n   * The minimum value for the range.\n   * @default 0\n   */\n  min?: number\n  /**\n   * The maximum value for the range.\n   * @default 100\n   */\n  max?: number\n  /**\n   * The stepping interval.\n   * @default 1\n   */\n  step?: number\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Slider = ({\n  intent = 'support',\n  children,\n  className,\n  ref,\n  value: valueProp,\n  defaultValue: defaultValueProp,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  name: nameProp,\n  onValueChange,\n  onValueCommit,\n  min = 0,\n  max = 100,\n  ...rest\n}: SliderProps) => {\n  const field = useFormFieldControl()\n\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n  const name = field.name ?? nameProp\n\n  const [labelId, setLabelId] = useState<string | undefined>(field.labelId)\n  const [valueInThumbCount, setValueInThumbCount] = useState(0)\n  const controlRef = useRef<HTMLElement | null>(null)\n  const thumbRef = useRef<HTMLElement | null>(null)\n\n  const handleLabelId = useCallback((id: string | undefined) => {\n    setLabelId(id)\n  }, [])\n\n  const registerValueInThumb = useCallback(() => {\n    setValueInThumbCount(c => c + 1)\n\n    return () => setValueInThumbCount(c => c - 1)\n  }, [])\n\n  return (\n    <SliderContext.Provider\n      value={{\n        intent,\n        min,\n        max,\n        fieldLabelId: field.labelId || labelId,\n        fieldId: field.id,\n        onLabelId: handleLabelId,\n        hasValueInThumb: valueInThumbCount > 0,\n        registerValueInThumb,\n        controlRef,\n        thumbRef,\n      }}\n    >\n      <BaseSlider.Root\n        ref={ref}\n        data-spark-component=\"slider\"\n        className={rootStyles({ className })}\n        orientation=\"horizontal\"\n        disabled={disabled || readOnly}\n        thumbAlignment=\"edge\"\n        name={name}\n        aria-describedby={field.description}\n        aria-invalid={field.isInvalid}\n        aria-disabled={disabled || readOnly ? true : undefined}\n        value={valueProp !== undefined ? [valueProp] : undefined}\n        defaultValue={defaultValueProp !== undefined ? [defaultValueProp] : undefined}\n        onValueChange={\n          onValueChange\n            ? (value: number | readonly number[]) => {\n                const v = Array.isArray(value) ? (value[0] ?? 0) : value\n                onValueChange(v)\n              }\n            : undefined\n        }\n        onValueCommitted={\n          onValueCommit\n            ? (value: number | readonly number[]) => {\n                const v = Array.isArray(value) ? (value[0] ?? 0) : value\n                onValueCommit(v)\n              }\n            : undefined\n        }\n        min={min}\n        max={max}\n        {...rest}\n      >\n        {children}\n      </BaseSlider.Root>\n    </SliderContext.Provider>\n  )\n}\n\nSlider.displayName = 'Slider'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport type SliderControlProps = Omit<ComponentProps<typeof BaseSlider.Control>, 'render'>\n\nexport const SliderControl = ({ className, ref, ...rest }: SliderControlProps) => {\n  const { hasValueInThumb, controlRef } = useSliderContext()\n  const mergedRef = useMergeRefs(controlRef, ref)\n\n  return (\n    <BaseSlider.Control\n      data-spark-component=\"slider-control\"\n      ref={mergedRef}\n      className={cx(\n        'min-h-sz-24 relative col-span-2 flex w-full min-w-0 flex-1 items-center',\n        hasValueInThumb && 'mt-xl',\n        className\n      )}\n      {...rest}\n    />\n  )\n}\n\nSliderControl.displayName = 'Slider.Control'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const trackVariants = cva(['relative grow h-sz-4 bg-on-background/dim-4 rounded-sm'])\n\nexport const rangeVariants = cva(\n  [\n    'absolute h-full rounded-sm',\n    // Disable transitions during drag to eliminate latency\n    'transition-none',\n  ],\n  {\n    variants: {\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        accent: ['bg-accent'],\n        info: ['bg-info'],\n        neutral: ['bg-neutral'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        error: ['bg-error'],\n      },\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type SliderRangeVariantsProps = VariantProps<typeof rangeVariants>\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { rangeVariants } from './SliderTrack.styles'\n\nexport type SliderIndicatorProps = Omit<ComponentProps<typeof BaseSlider.Indicator>, 'render'>\n\nexport const SliderIndicator = ({ className, ref, ...rest }: SliderIndicatorProps) => {\n  const { intent } = useSliderContext()\n\n  return (\n    <BaseSlider.Indicator\n      data-spark-component=\"slider-indicator\"\n      ref={ref}\n      className={rangeVariants({ intent, className })}\n      {...rest}\n    />\n  )\n}\n\nSliderIndicator.displayName = 'Slider.Indicator'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ReactNode, Ref, useEffect, useId, useRef } from 'react'\n\nimport { FormFieldRequiredIndicator } from '../form-field/FormFieldRequiredIndicator'\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useSliderContext } from './SliderContext'\n\nconst ID_PREFIX = ':slider-label'\n\nexport interface SliderLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const SliderLabel = ({\n  htmlFor: htmlForProp,\n  id: idProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: SliderLabelProps) => {\n  const field = useFormFieldControl()\n  const { fieldLabelId, fieldId, onLabelId } = useSliderContext()\n\n  // Generate an id if not provided and no FormField labelId is available\n  const internalId = useId()\n  const generatedId = `${ID_PREFIX}-${internalId}`\n  const labelId = idProp || fieldLabelId || field.labelId || generatedId\n\n  // Use FormField id for htmlFor if present, otherwise use fieldId from context, or the prop\n  const htmlFor = asChild ? undefined : htmlForProp || fieldId || field.id\n\n  // Get disabled and required state from FormField if present\n  const disabled = field.disabled\n  const isRequired = field.isRequired\n\n  // Notify SliderContext of the label id if no FormField is present\n  const labelRef = useRef<HTMLLabelElement>(null)\n  const mergedRef = useMergeRefs(ref, labelRef)\n\n  useEffect(() => {\n    if (onLabelId && !fieldLabelId && !field.labelId) {\n      onLabelId(labelId)\n    }\n  }, [onLabelId, fieldLabelId, field.labelId, labelId])\n\n  return (\n    <Label\n      ref={mergedRef}\n      id={labelId}\n      data-spark-component=\"slider-label\"\n      htmlFor={htmlFor}\n      className={cx(disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined, className)}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nSliderLabel.displayName = 'Slider.Label'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMaxValueProps {\n  className?: string\n  children?: (value: number) => ReactNode\n}\n\nexport const SliderMaxValue = forwardRef<HTMLDivElement, SliderMaxValueProps>(\n  ({ className, children }, ref) => {\n    const { max = 100 } = useSliderContext()\n\n    const content = children ? children(max) : max\n\n    return (\n      <div\n        data-spark-component=\"slider-max-value\"\n        ref={ref}\n        className={cx('text-on-surface/dim-1 text-body-2 col-start-2 text-right', className)}\n      >\n        {content}\n      </div>\n    )\n  }\n)\n\nSliderMaxValue.displayName = 'Slider.MaxValue'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMinValueProps {\n  className?: string\n  children?: (value: number) => ReactNode\n}\n\nexport const SliderMinValue = forwardRef<HTMLDivElement, SliderMinValueProps>(\n  ({ className, children }, ref) => {\n    const { min = 0 } = useSliderContext()\n\n    const content = children ? children(min) : min\n\n    return (\n      <div\n        data-spark-component=\"slider-min-value\"\n        ref={ref}\n        className={cx('text-on-surface/dim-1 text-body-2 col-start-1 text-left', className)}\n      >\n        {content}\n      </div>\n    )\n  }\n)\n\nSliderMinValue.displayName = 'Slider.MinValue'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const thumbVariants = cva(\n  [\n    'relative block size-sz-24 rounded-full cursor-pointer',\n    'outline-hidden',\n    'has-focus-visible:ring-2 has-focus-visible:ring-offset-2 has-focus-visible:ring-focus',\n    'data-disabled:hover:ring-0 data-disabled:cursor-not-allowed data-disabled:before:hidden',\n    // visual thumb\n    'after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n    'after:size-sz-24 after:rounded-full',\n    // hover effect\n    'before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',\n    'before:size-sz-24 before:rounded-full before:border-solid before:border-sm before:transition-all before:duration-75',\n    'hover:before:size-sz-32 data-dragging:before:size-sz-32',\n  ],\n  {\n    variants: {\n      intent: {\n        main: ['after:bg-main', 'before:bg-main-container before:border-main'],\n        support: ['after:bg-support', 'before:bg-support-container before:border-support'],\n        accent: ['after:bg-accent', 'before:bg-accent-container before:border-accent'],\n        info: ['after:bg-info', 'before:bg-info-container before:border-info'],\n        neutral: ['after:bg-neutral', 'before:bg-neutral-container before:border-neutral'],\n        success: ['after:bg-success', 'before:bg-success-container before:border-success'],\n        alert: ['after:bg-alert', 'before:bg-alert-container before:border-alert'],\n        error: ['after:bg-error', 'before:bg-error-container before:border-error'],\n      },\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type SliderThumbVariantsProps = VariantProps<typeof thumbVariants>\n","import { createContext, useContext } from 'react'\n\nexport interface SliderThumbContextValue {\n  isInsideThumb: true\n}\n\nexport const SliderThumbContext = createContext<SliderThumbContextValue | null>(null)\n\nexport const useSliderThumbContext = () => useContext(SliderThumbContext)\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, type PropsWithChildren, useRef } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { thumbVariants } from './SliderThumb.styles'\nimport { SliderThumbContext } from './SliderThumbContext'\n\nexport type SliderThumbProps = Omit<ComponentProps<typeof BaseSlider.Thumb>, 'render' | 'index'> &\n  PropsWithChildren\n\nexport const SliderThumb = ({\n  className,\n  ref: forwardedRef,\n  children,\n  ...rest\n}: SliderThumbProps) => {\n  const { intent, fieldLabelId, fieldId, thumbRef: contextThumbRef } = useSliderContext()\n\n  const innerRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(contextThumbRef, forwardedRef ?? innerRef)\n\n  return (\n    <SliderThumbContext.Provider value={{ isInsideThumb: true }}>\n      <BaseSlider.Thumb\n        data-spark-component=\"slider-thumb\"\n        ref={ref}\n        id={fieldId}\n        className={thumbVariants({ intent, className })}\n        aria-labelledby={fieldLabelId}\n        {...rest}\n      >\n        {children}\n      </BaseSlider.Thumb>\n    </SliderThumbContext.Provider>\n  )\n}\n\nSliderThumb.displayName = 'Slider.Thumb'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { trackVariants } from './SliderTrack.styles'\n\nexport type SliderTrackProps = Omit<ComponentProps<typeof BaseSlider.Track>, 'render'>\n\nexport const SliderTrack = ({ className, ref, ...rest }: SliderTrackProps) => {\n  return (\n    <BaseSlider.Track\n      data-spark-component=\"slider-track\"\n      ref={ref}\n      className={trackVariants({ className })}\n      {...rest}\n    />\n  )\n}\n\nSliderTrack.displayName = 'Slider.Track'\n","import type { RefObject } from 'react'\nimport { useLayoutEffect, useState } from 'react'\n\n/**\n * Computes the translateX (in pixels) to apply to the value element so it stays\n * within the horizontal bounds of the slider control when displayed inside the thumb.\n *\n * @param controlRef - Ref to the slider control (track container)\n * @param thumbRef - Ref to the thumb element\n * @param valueRef - Ref to the value label element\n * @param value - Current slider value (0–100 or min–max), used to re-run when thumb moves\n * @returns translateX in pixels (positive = right, negative = left), or 0 if refs are missing\n */\nexport function useSliderValueBoundaries(\n  controlRef: RefObject<HTMLElement | null>,\n  thumbRef: RefObject<HTMLElement | null>,\n  valueRef: RefObject<HTMLElement | null>,\n  value: number\n): number {\n  const [translateX, setTranslateX] = useState(0)\n  const [refsRetryScheduled, setRefsRetryScheduled] = useState(false)\n\n  useLayoutEffect(() => {\n    const control = controlRef.current\n    const thumb = thumbRef.current\n    const valueEl = valueRef.current\n\n    if (!control || !thumb || !valueEl) {\n      setTranslateX(0)\n      // Re-run once on next frame when refs may be set (e.g. Slider.Value mounts after Control/Thumb)\n      if (!refsRetryScheduled) {\n        requestAnimationFrame(() => setRefsRetryScheduled(true))\n      }\n\n      return\n    }\n\n    let cancelled = false\n\n    const compute = () => {\n      if (cancelled) return\n\n      const controlRect = control.getBoundingClientRect()\n      const thumbRect = thumb.getBoundingClientRect()\n      const valueWidth = valueEl.scrollWidth\n\n      // Skip until value label has been laid out (content from render prop may not be ready on first paint)\n      if (valueWidth === 0) {\n        requestAnimationFrame(compute)\n\n        return\n      }\n\n      const thumbCenterPx = thumbRect.left - controlRect.left + thumbRect.width / 2\n\n      const valueCenterMin = valueWidth / 2\n      const valueCenterMax = controlRect.width - valueWidth / 2\n\n      const clampedCenter = Math.max(valueCenterMin, Math.min(valueCenterMax, thumbCenterPx))\n      const nextTranslateX = clampedCenter - thumbCenterPx\n\n      setTranslateX(prev => (prev !== nextTranslateX ? nextTranslateX : prev))\n    }\n\n    compute()\n\n    const resizeObserver = new ResizeObserver(compute)\n    resizeObserver.observe(control)\n    resizeObserver.observe(valueEl)\n\n    return () => {\n      cancelled = true\n      resizeObserver.disconnect()\n    }\n  }, [controlRef, thumbRef, valueRef, value, refsRetryScheduled])\n\n  return translateX\n}\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport { ComponentProps, useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { useSliderThumbContext } from './SliderThumbContext'\nimport { useSliderValueBoundaries } from './useSliderValueBoundaries'\n\nexport type SliderValueProps = Omit<\n  ComponentProps<typeof BaseSlider.Value>,\n  'render' | 'children'\n> & {\n  children?: ReactNode | ((formatted: string, value: number) => ReactNode)\n}\n\n/**\n * Normalizes Base UI's (formattedValues, values) to single (formatted, value) for the render prop.\n */\nexport const SliderValue = ({ className, children, ref, ...rest }: SliderValueProps) => {\n  const { registerValueInThumb, controlRef, thumbRef } = useSliderContext()\n  const thumbContext = useSliderThumbContext()\n  const isInsideThumb = thumbContext !== null\n\n  const valueRef = useRef<HTMLOutputElement | null>(null)\n  const mergedRef = useMergeRefs(valueRef, ref)\n\n  const [currentValue, setCurrentValue] = useState(0)\n  const translateX = useSliderValueBoundaries(controlRef, thumbRef, valueRef, currentValue)\n\n  useEffect(() => {\n    if (!isInsideThumb) return\n\n    return registerValueInThumb()\n  }, [isInsideThumb, registerValueInThumb])\n\n  const resolvedClassName = cx(\n    isInsideThumb\n      ? 'absolute left-1/2 -translate-x-1/2 top-[calc(-100%-var(--spacing-sm))] text-body-1 font-bold whitespace-nowrap'\n      : 'default:text-body-1 col-start-2 text-right default:font-bold',\n    className\n  )\n\n  const normalizedChildren = useCallback(\n    (formattedValues: readonly string[], values: readonly number[]) => {\n      const formatted = formattedValues[0] ?? String(values[0] ?? '')\n      const value = values[0] ?? 0\n      setCurrentValue(value)\n      if (typeof children === 'function') {\n        return children(formatted, value)\n      }\n\n      return formatted\n    },\n    [children]\n  )\n\n  const style = isInsideThumb\n    ? { transform: `translate(calc(0% + ${translateX}px), 0)` }\n    : undefined\n\n  return (\n    <BaseSlider.Value\n      data-spark-component=\"slider-value\"\n      ref={mergedRef}\n      className={resolvedClassName}\n      style={style}\n      {...rest}\n    >\n      {normalizedChildren}\n    </BaseSlider.Value>\n  )\n}\n\nSliderValue.displayName = 'Slider.Value'\n","import { Slider as Root, type SliderProps } from './Slider'\nimport { SliderControl as Control, type SliderControlProps } from './SliderControl'\nimport { SliderIndicator as Indicator, type SliderIndicatorProps } from './SliderIndicator'\nimport { SliderLabel as Label, type SliderLabelProps } from './SliderLabel'\nimport { SliderMaxValue as MaxValue, type SliderMaxValueProps } from './SliderMaxValue'\nimport { SliderMinValue as MinValue, type SliderMinValueProps } from './SliderMinValue'\nimport { SliderThumb as Thumb, type SliderThumbProps } from './SliderThumb'\nimport { SliderTrack as Track, type SliderTrackProps } from './SliderTrack'\nimport { SliderValue as Value, type SliderValueProps } from './SliderValue'\n\nexport const Slider: typeof Root & {\n  Control: typeof Control\n  Indicator: typeof Indicator\n  Label: typeof Label\n  MaxValue: typeof MaxValue\n  MinValue: typeof MinValue\n  Thumb: typeof Thumb\n  Track: typeof Track\n  Value: typeof Value\n} = Object.assign(Root, {\n  Control,\n  Indicator,\n  Label,\n  MaxValue,\n  MinValue,\n  Thumb,\n  Track,\n  Value,\n})\n\nSlider.displayName = 'Slider'\nControl.displayName = 'Slider.Control'\nIndicator.displayName = 'Slider.Indicator'\nLabel.displayName = 'Slider.Label'\nMaxValue.displayName = 'Slider.MaxValue'\nMinValue.displayName = 'Slider.MinValue'\nThumb.displayName = 'Slider.Thumb'\nTrack.displayName = 'Slider.Track'\nValue.displayName = 'Slider.Value'\n\nexport type {\n  SliderProps,\n  SliderControlProps,\n  SliderIndicatorProps,\n  SliderLabelProps,\n  SliderMaxValueProps,\n  SliderMinValueProps,\n  SliderThumbProps,\n  SliderTrackProps,\n  SliderValueProps,\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/slider/Slider.styles.ts","../../src/slider/SliderContext.tsx","../../src/slider/Slider.tsx","../../src/slider/SliderControl.tsx","../../src/slider/SliderTrack.styles.ts","../../src/slider/SliderIndicator.tsx","../../src/slider/SliderLabel.tsx","../../src/slider/SliderMaxValue.tsx","../../src/slider/SliderMinValue.tsx","../../src/slider/SliderThumb.styles.ts","../../src/slider/SliderThumbContext.tsx","../../src/slider/SliderThumb.tsx","../../src/slider/SliderTrack.tsx","../../src/slider/useSliderValueBoundaries.ts","../../src/slider/SliderValue.tsx","../../src/slider/index.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'grid grid-cols-[1fr_auto] gap-y-sm gap-x-md relative',\n  'touch-none select-none',\n  'data-disabled:cursor-not-allowed data-disabled:opacity-dim-3',\n])\n","import type { RefObject } from 'react'\nimport { createContext, useContext } from 'react'\n\nimport type { SliderProps } from './Slider'\n\nexport type SliderContextInterface = Pick<SliderProps, 'intent' | 'min' | 'max'> & {\n  fieldLabelId?: string\n  fieldId?: string\n  onLabelId?: (id: string | undefined) => void\n  hasValueInThumb: boolean\n  registerValueInThumb: () => () => void\n  controlRef: RefObject<HTMLElement | null>\n  thumbRef: RefObject<HTMLElement | null>\n}\n\nexport const SliderContext = createContext<SliderContextInterface>({} as SliderContextInterface)\n\nexport const useSliderContext = () => useContext(SliderContext)\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { ComponentProps, type PropsWithChildren, Ref, useCallback, useRef, useState } from 'react'\n\nimport { rootStyles } from './Slider.styles'\nimport { SliderContext } from './SliderContext'\nimport type { SliderRangeVariantsProps } from './SliderTrack.styles'\n\nexport interface SliderProps\n  extends\n    Omit<\n      ComponentProps<typeof BaseSlider.Root>,\n      'render' | 'orientation' | 'onValueChange' | 'onValueCommitted'\n    >,\n    PropsWithChildren<SliderRangeVariantsProps> {\n  /**\n   * The value of the slider when initially rendered. Use when you do not need to control the state of the slider.\n   */\n  defaultValue?: number\n  /**\n   * The controlled value of the slider. Must be used in conjunction with `onValueChange`.\n   */\n  value?: number\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: number) => void\n  /**\n   * Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.\n   */\n  onValueCommit?: (value: number) => void\n  /**\n   * The name of the slider. Submitted with its owning form as part of a name/value pair.\n   * If wrapped with a FormField with a name, will be inherited from it.\n   */\n  name?: string\n  /**\n   * When `true`, prevents the user from interacting with the slider.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Sets the slider as interactive or not.\n   */\n  readOnly?: boolean\n  /**\n   * The minimum value for the range.\n   * @default 0\n   */\n  min?: number\n  /**\n   * The maximum value for the range.\n   * @default 100\n   */\n  max?: number\n  /**\n   * The stepping interval.\n   * @default 1\n   */\n  step?: number\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Slider = ({\n  intent = 'support',\n  children,\n  className,\n  ref,\n  value: valueProp,\n  defaultValue: defaultValueProp,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  name: nameProp,\n  onValueChange,\n  onValueCommit,\n  min = 0,\n  max = 100,\n  ...rest\n}: SliderProps) => {\n  const field = useFormFieldControl()\n\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n  const name = field.name ?? nameProp\n\n  const [labelId, setLabelId] = useState<string | undefined>(field.labelId)\n  const [valueInThumbCount, setValueInThumbCount] = useState(0)\n  const controlRef = useRef<HTMLElement | null>(null)\n  const thumbRef = useRef<HTMLElement | null>(null)\n\n  const handleLabelId = useCallback((id: string | undefined) => {\n    setLabelId(id)\n  }, [])\n\n  const registerValueInThumb = useCallback(() => {\n    setValueInThumbCount(c => c + 1)\n\n    return () => setValueInThumbCount(c => c - 1)\n  }, [])\n\n  return (\n    <SliderContext.Provider\n      value={{\n        intent,\n        min,\n        max,\n        fieldLabelId: field.labelId || labelId,\n        fieldId: field.id,\n        onLabelId: handleLabelId,\n        hasValueInThumb: valueInThumbCount > 0,\n        registerValueInThumb,\n        controlRef,\n        thumbRef,\n      }}\n    >\n      <BaseSlider.Root\n        ref={ref}\n        data-spark-component=\"slider\"\n        className={rootStyles({ className })}\n        orientation=\"horizontal\"\n        disabled={disabled || readOnly}\n        thumbAlignment=\"edge\"\n        name={name}\n        aria-describedby={field.description}\n        aria-invalid={field.isInvalid}\n        aria-disabled={disabled || readOnly ? true : undefined}\n        value={valueProp !== undefined ? [valueProp] : undefined}\n        defaultValue={defaultValueProp !== undefined ? [defaultValueProp] : undefined}\n        onValueChange={\n          onValueChange\n            ? (value: number | readonly number[]) => {\n                const v = Array.isArray(value) ? (value[0] ?? 0) : value\n                onValueChange(v)\n              }\n            : undefined\n        }\n        onValueCommitted={\n          onValueCommit\n            ? (value: number | readonly number[]) => {\n                const v = Array.isArray(value) ? (value[0] ?? 0) : value\n                onValueCommit(v)\n              }\n            : undefined\n        }\n        min={min}\n        max={max}\n        {...rest}\n      >\n        {children}\n      </BaseSlider.Root>\n    </SliderContext.Provider>\n  )\n}\n\nSlider.displayName = 'Slider'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport type SliderControlProps = Omit<ComponentProps<typeof BaseSlider.Control>, 'render'>\n\nexport const SliderControl = ({ className, ref, ...rest }: SliderControlProps) => {\n  const { hasValueInThumb, controlRef } = useSliderContext()\n  const mergedRef = useMergeRefs(controlRef, ref)\n\n  return (\n    <BaseSlider.Control\n      data-spark-component=\"slider-control\"\n      ref={mergedRef}\n      className={cx(\n        'min-h-sz-24 relative col-span-2 flex w-full min-w-0 flex-1 items-center',\n        hasValueInThumb && 'mt-xl',\n        className\n      )}\n      {...rest}\n    />\n  )\n}\n\nSliderControl.displayName = 'Slider.Control'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const trackVariants = cva(['relative grow h-sz-4 bg-on-background/dim-4 rounded-sm'])\n\nexport const rangeVariants = cva(\n  [\n    'absolute h-full rounded-sm',\n    // Disable transitions during drag to eliminate latency\n    'transition-none',\n  ],\n  {\n    variants: {\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        accent: ['bg-accent'],\n        info: ['bg-info'],\n        neutral: ['bg-neutral'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        error: ['bg-error'],\n      },\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type SliderRangeVariantsProps = VariantProps<typeof rangeVariants>\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { rangeVariants } from './SliderTrack.styles'\n\nexport type SliderIndicatorProps = Omit<ComponentProps<typeof BaseSlider.Indicator>, 'render'>\n\nexport const SliderIndicator = ({ className, ref, ...rest }: SliderIndicatorProps) => {\n  const { intent } = useSliderContext()\n\n  return (\n    <BaseSlider.Indicator\n      data-spark-component=\"slider-indicator\"\n      ref={ref}\n      className={rangeVariants({ intent, className })}\n      {...rest}\n    />\n  )\n}\n\nSliderIndicator.displayName = 'Slider.Indicator'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ReactNode, Ref, useEffect, useId, useRef } from 'react'\n\nimport { FormFieldRequiredIndicator } from '../form-field/FormFieldRequiredIndicator'\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useSliderContext } from './SliderContext'\n\nconst ID_PREFIX = ':slider-label'\n\nexport interface SliderLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const SliderLabel = ({\n  htmlFor: htmlForProp,\n  id: idProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: SliderLabelProps) => {\n  const field = useFormFieldControl()\n  const { fieldLabelId, fieldId, onLabelId } = useSliderContext()\n\n  // Generate an id if not provided and no FormField labelId is available\n  const internalId = useId()\n  const generatedId = `${ID_PREFIX}-${internalId}`\n  const labelId = idProp || fieldLabelId || field.labelId || generatedId\n\n  // Use FormField id for htmlFor if present, otherwise use fieldId from context, or the prop\n  const htmlFor = asChild ? undefined : htmlForProp || fieldId || field.id\n\n  // Get disabled and required state from FormField if present\n  const disabled = field.disabled\n  const isRequired = field.isRequired\n\n  // Notify SliderContext of the label id if no FormField is present\n  const labelRef = useRef<HTMLLabelElement>(null)\n  const mergedRef = useMergeRefs(ref, labelRef)\n\n  useEffect(() => {\n    if (onLabelId && !fieldLabelId && !field.labelId) {\n      onLabelId(labelId)\n    }\n  }, [onLabelId, fieldLabelId, field.labelId, labelId])\n\n  return (\n    <Label\n      ref={mergedRef}\n      id={labelId}\n      data-spark-component=\"slider-label\"\n      htmlFor={htmlFor}\n      className={cx(disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined, className)}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nSliderLabel.displayName = 'Slider.Label'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMaxValueProps {\n  className?: string\n  children?: (value: number) => ReactNode\n}\n\nexport const SliderMaxValue = forwardRef<HTMLDivElement, SliderMaxValueProps>(\n  ({ className, children }, ref) => {\n    const { max = 100 } = useSliderContext()\n\n    const content = children ? children(max) : max\n\n    return (\n      <div\n        data-spark-component=\"slider-max-value\"\n        ref={ref}\n        className={cx('text-on-surface/dim-1 text-body-2 col-start-2 text-right', className)}\n      >\n        {content}\n      </div>\n    )\n  }\n)\n\nSliderMaxValue.displayName = 'Slider.MaxValue'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMinValueProps {\n  className?: string\n  children?: (value: number) => ReactNode\n}\n\nexport const SliderMinValue = forwardRef<HTMLDivElement, SliderMinValueProps>(\n  ({ className, children }, ref) => {\n    const { min = 0 } = useSliderContext()\n\n    const content = children ? children(min) : min\n\n    return (\n      <div\n        data-spark-component=\"slider-min-value\"\n        ref={ref}\n        className={cx('text-on-surface/dim-1 text-body-2 col-start-1 text-left', className)}\n      >\n        {content}\n      </div>\n    )\n  }\n)\n\nSliderMinValue.displayName = 'Slider.MinValue'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const thumbVariants = cva(\n  [\n    'relative block size-sz-24 rounded-full cursor-pointer',\n    'outline-hidden',\n    'has-focus-visible:ring-2 has-focus-visible:ring-offset-2 has-focus-visible:ring-focus',\n    'data-disabled:hover:ring-0 data-disabled:cursor-not-allowed data-disabled:before:hidden',\n    // visual thumb\n    'after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n    'after:size-sz-24 after:rounded-full',\n    // hover effect\n    'before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',\n    'before:size-sz-24 before:rounded-full before:border-solid before:border-sm before:transition-all before:duration-75',\n    'hover:before:size-sz-32 data-dragging:before:size-sz-32',\n  ],\n  {\n    variants: {\n      intent: {\n        main: ['after:bg-main', 'before:bg-main-container before:border-main'],\n        support: ['after:bg-support', 'before:bg-support-container before:border-support'],\n        accent: ['after:bg-accent', 'before:bg-accent-container before:border-accent'],\n        info: ['after:bg-info', 'before:bg-info-container before:border-info'],\n        neutral: ['after:bg-neutral', 'before:bg-neutral-container before:border-neutral'],\n        success: ['after:bg-success', 'before:bg-success-container before:border-success'],\n        alert: ['after:bg-alert', 'before:bg-alert-container before:border-alert'],\n        error: ['after:bg-error', 'before:bg-error-container before:border-error'],\n      },\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type SliderThumbVariantsProps = VariantProps<typeof thumbVariants>\n","import { createContext, useContext } from 'react'\n\nexport interface SliderThumbContextValue {\n  isInsideThumb: true\n}\n\nexport const SliderThumbContext = createContext<SliderThumbContextValue | null>(null)\n\nexport const useSliderThumbContext = () => useContext(SliderThumbContext)\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, type PropsWithChildren, useRef } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { thumbVariants } from './SliderThumb.styles'\nimport { SliderThumbContext } from './SliderThumbContext'\n\nexport type SliderThumbProps = Omit<ComponentProps<typeof BaseSlider.Thumb>, 'render' | 'index'> &\n  PropsWithChildren\n\nexport const SliderThumb = ({\n  className,\n  ref: forwardedRef,\n  children,\n  ...rest\n}: SliderThumbProps) => {\n  const { intent, fieldLabelId, fieldId, thumbRef: contextThumbRef } = useSliderContext()\n\n  const innerRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(contextThumbRef, forwardedRef ?? innerRef)\n\n  return (\n    <SliderThumbContext.Provider value={{ isInsideThumb: true }}>\n      <BaseSlider.Thumb\n        data-spark-component=\"slider-thumb\"\n        ref={ref}\n        id={fieldId}\n        className={thumbVariants({ intent, className })}\n        aria-labelledby={fieldLabelId}\n        {...rest}\n      >\n        {children}\n      </BaseSlider.Thumb>\n    </SliderThumbContext.Provider>\n  )\n}\n\nSliderThumb.displayName = 'Slider.Thumb'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { trackVariants } from './SliderTrack.styles'\n\nexport type SliderTrackProps = Omit<ComponentProps<typeof BaseSlider.Track>, 'render'>\n\nexport const SliderTrack = ({ className, ref, ...rest }: SliderTrackProps) => {\n  return (\n    <BaseSlider.Track\n      data-spark-component=\"slider-track\"\n      ref={ref}\n      className={trackVariants({ className })}\n      {...rest}\n    />\n  )\n}\n\nSliderTrack.displayName = 'Slider.Track'\n","import type { RefObject } from 'react'\nimport { useLayoutEffect, useState } from 'react'\n\n/**\n * Computes the translateX (in pixels) to apply to the value element so it stays\n * within the horizontal bounds of the slider control when displayed inside the thumb.\n *\n * @param controlRef - Ref to the slider control (track container)\n * @param thumbRef - Ref to the thumb element\n * @param valueRef - Ref to the value label element\n * @param value - Current slider value (0–100 or min–max), used to re-run when thumb moves\n * @returns translateX in pixels (positive = right, negative = left), or 0 if refs are missing\n */\nexport function useSliderValueBoundaries(\n  controlRef: RefObject<HTMLElement | null>,\n  thumbRef: RefObject<HTMLElement | null>,\n  valueRef: RefObject<HTMLElement | null>,\n  value: number\n): number {\n  const [translateX, setTranslateX] = useState(0)\n  const [refsRetryScheduled, setRefsRetryScheduled] = useState(false)\n\n  useLayoutEffect(() => {\n    const control = controlRef.current\n    const thumb = thumbRef.current\n    const valueEl = valueRef.current\n\n    if (!control || !thumb || !valueEl) {\n      setTranslateX(0)\n      // Re-run once on next frame when refs may be set (e.g. Slider.Value mounts after Control/Thumb)\n      if (!refsRetryScheduled) {\n        requestAnimationFrame(() => setRefsRetryScheduled(true))\n      }\n\n      return\n    }\n\n    let cancelled = false\n\n    const compute = () => {\n      if (cancelled) return\n\n      const controlRect = control.getBoundingClientRect()\n      const thumbRect = thumb.getBoundingClientRect()\n      const valueWidth = valueEl.scrollWidth\n\n      // Skip until value label has been laid out (content from render prop may not be ready on first paint)\n      if (valueWidth === 0) {\n        requestAnimationFrame(compute)\n\n        return\n      }\n\n      const thumbCenterPx = thumbRect.left - controlRect.left + thumbRect.width / 2\n\n      const valueCenterMin = valueWidth / 2\n      const valueCenterMax = controlRect.width - valueWidth / 2\n\n      const clampedCenter = Math.max(valueCenterMin, Math.min(valueCenterMax, thumbCenterPx))\n      const nextTranslateX = clampedCenter - thumbCenterPx\n\n      setTranslateX(prev => (prev !== nextTranslateX ? nextTranslateX : prev))\n    }\n\n    compute()\n\n    const resizeObserver = new ResizeObserver(compute)\n    resizeObserver.observe(control)\n    resizeObserver.observe(valueEl)\n\n    return () => {\n      cancelled = true\n      resizeObserver.disconnect()\n    }\n  }, [controlRef, thumbRef, valueRef, value, refsRetryScheduled])\n\n  return translateX\n}\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport { ComponentProps, useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { useSliderThumbContext } from './SliderThumbContext'\nimport { useSliderValueBoundaries } from './useSliderValueBoundaries'\n\nexport type SliderValueProps = Omit<\n  ComponentProps<typeof BaseSlider.Value>,\n  'render' | 'children'\n> & {\n  children?: ReactNode | ((formatted: string, value: number) => ReactNode)\n}\n\n/**\n * Normalizes Base UI's (formattedValues, values) to single (formatted, value) for the render prop.\n */\nexport const SliderValue = ({ className, children, ref, ...rest }: SliderValueProps) => {\n  const { registerValueInThumb, controlRef, thumbRef } = useSliderContext()\n  const thumbContext = useSliderThumbContext()\n  const isInsideThumb = thumbContext !== null\n\n  const valueRef = useRef<HTMLOutputElement | null>(null)\n  const mergedRef = useMergeRefs(valueRef, ref)\n\n  const [currentValue, setCurrentValue] = useState(0)\n  const translateX = useSliderValueBoundaries(controlRef, thumbRef, valueRef, currentValue)\n\n  useEffect(() => {\n    if (!isInsideThumb) return\n\n    return registerValueInThumb()\n  }, [isInsideThumb, registerValueInThumb])\n\n  const resolvedClassName = cx(\n    isInsideThumb\n      ? 'absolute left-1/2 -translate-x-1/2 top-[calc(-100%-var(--spacing-sm))] text-body-1 font-bold whitespace-nowrap'\n      : 'default:text-body-1 col-start-2 text-right default:font-bold',\n    className\n  )\n\n  const normalizedChildren = useCallback(\n    (formattedValues: readonly string[], values: readonly number[]) => {\n      const formatted = formattedValues[0] ?? String(values[0] ?? '')\n      const value = values[0] ?? 0\n      setCurrentValue(value)\n      if (typeof children === 'function') {\n        return children(formatted, value)\n      }\n\n      return formatted\n    },\n    [children]\n  )\n\n  const style = isInsideThumb\n    ? { transform: `translate(calc(0% + ${translateX}px), 0)` }\n    : undefined\n\n  return (\n    <BaseSlider.Value\n      data-spark-component=\"slider-value\"\n      ref={mergedRef}\n      className={resolvedClassName}\n      style={style}\n      {...rest}\n    >\n      {normalizedChildren}\n    </BaseSlider.Value>\n  )\n}\n\nSliderValue.displayName = 'Slider.Value'\n","import { Slider as Root, type SliderProps } from './Slider'\nimport { SliderControl as Control, type SliderControlProps } from './SliderControl'\nimport { SliderIndicator as Indicator, type SliderIndicatorProps } from './SliderIndicator'\nimport { SliderLabel as Label, type SliderLabelProps } from './SliderLabel'\nimport { SliderMaxValue as MaxValue, type SliderMaxValueProps } from './SliderMaxValue'\nimport { SliderMinValue as MinValue, type SliderMinValueProps } from './SliderMinValue'\nimport { SliderThumb as Thumb, type SliderThumbProps } from './SliderThumb'\nimport { SliderTrack as Track, type SliderTrackProps } from './SliderTrack'\nimport { SliderValue as Value, type SliderValueProps } from './SliderValue'\n\n/**\n * An input control that allows users to select a value from a continuous range by dragging a handle.\n */\nexport const Slider: typeof Root & {\n  Control: typeof Control\n  Indicator: typeof Indicator\n  Label: typeof Label\n  MaxValue: typeof MaxValue\n  MinValue: typeof MinValue\n  Thumb: typeof Thumb\n  Track: typeof Track\n  Value: typeof Value\n} = Object.assign(Root, {\n  Control,\n  Indicator,\n  Label,\n  MaxValue,\n  MinValue,\n  Thumb,\n  Track,\n  Value,\n})\n\nSlider.displayName = 'Slider'\nControl.displayName = 'Slider.Control'\nIndicator.displayName = 'Slider.Indicator'\nLabel.displayName = 'Slider.Label'\nMaxValue.displayName = 'Slider.MaxValue'\nMinValue.displayName = 'Slider.MinValue'\nThumb.displayName = 'Slider.Thumb'\nTrack.displayName = 'Slider.Track'\nValue.displayName = 'Slider.Value'\n\nexport type {\n  SliderProps,\n  SliderControlProps,\n  SliderIndicatorProps,\n  SliderLabelProps,\n  SliderMaxValueProps,\n  SliderMinValueProps,\n  SliderThumbProps,\n  SliderTrackProps,\n  SliderValueProps,\n}\n"],"mappings":"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"}

package/dist/slot/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/slot/Slot.tsx"],"sourcesContent":["import { Slot as RadixSlot } from 'radix-ui'\nimport {\n  cloneElement,\n  HTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n  return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n  asChild: boolean | undefined,\n  children: ReactNode,\n  callback: (children: ReactNode) => ReactNode\n) => {\n  if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n  return isValidElement(children)\n    ? cloneElement(\n        children,\n        undefined,\n        callback((children.props as { children: ReactNode }).children)\n      )\n    : null\n}\n"],"mappings":"+KAUA,IAAa,EAAwC,EAAA,KAAU,UAMlD,GAAQ,CAAE,MAAK,GAAG,MACtB,EAAA,EAAA,KAAC,EAAA,KAAU,KAAX,CAAqB,MAAK,GAAI,EAAS,CAAA,CAOnC,GACX,EACA,EACA,IAEK,GAEL,EAAA,EAAA,gBAAsB,EAAS,EAAA,EAAA,EAAA,cAEzB,EACA,IAAA,GACA,EAAU,EAAS,MAAkC,SAAS,CAC/D,CACD,KARiB,EAAS,EAAS"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/slot/Slot.tsx"],"sourcesContent":["import { Slot as RadixSlot } from 'radix-ui'\nimport {\n  cloneElement,\n  HTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  ref?: Ref<HTMLElement>\n}\n\n/**\n * A utility component that merges its props with its child component, enabling polymorphic\n * component patterns through the `asChild` prop for flexible composition.\n */\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n  return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n  asChild: boolean | undefined,\n  children: ReactNode,\n  callback: (children: ReactNode) => ReactNode\n) => {\n  if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n  return isValidElement(children)\n    ? cloneElement(\n        children,\n        undefined,\n        callback((children.props as { children: ReactNode }).children)\n      )\n    : null\n}\n"],"mappings":"+KAUA,IAAa,EAAwC,EAAA,KAAU,UAUlD,GAAQ,CAAE,MAAK,GAAG,MACtB,EAAA,EAAA,KAAC,EAAA,KAAU,KAAX,CAAqB,MAAK,GAAI,EAAS,CAAA,CAOnC,GACX,EACA,EACA,IAEK,GAEL,EAAA,EAAA,gBAAsB,EAAS,EAAA,EAAA,EAAA,cAEzB,EACA,IAAA,GACA,EAAU,EAAS,MAAkC,SAAS,CAC/D,CACD,KARiB,EAAS,EAAS"}

package/dist/slot/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/slot/Slot.tsx"],"sourcesContent":["import { Slot as RadixSlot } from 'radix-ui'\nimport {\n  cloneElement,\n  HTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n  return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n  asChild: boolean | undefined,\n  children: ReactNode,\n  callback: (children: ReactNode) => ReactNode\n) => {\n  if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n  return isValidElement(children)\n    ? cloneElement(\n        children,\n        undefined,\n        callback((children.props as { children: ReactNode }).children)\n      )\n    : null\n}\n"],"mappings":";;;;AAUA,IAAa,IAAwC,EAAU,WAMlD,KAAQ,EAAE,QAAK,GAAG,QACtB,kBAAC,EAAU,MAAX;CAAqB;CAAK,GAAI;CAAS,CAAA,EAOnC,KACX,GACA,GACA,MAEK,IAEE,EAAe,EAAS,GAC3B,EACE,GACA,KAAA,GACA,EAAU,EAAS,MAAkC,SAAS,CAC/D,GACD,OARiB,EAAS,EAAS"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/slot/Slot.tsx"],"sourcesContent":["import { Slot as RadixSlot } from 'radix-ui'\nimport {\n  cloneElement,\n  HTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  ref?: Ref<HTMLElement>\n}\n\n/**\n * A utility component that merges its props with its child component, enabling polymorphic\n * component patterns through the `asChild` prop for flexible composition.\n */\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n  return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n  asChild: boolean | undefined,\n  children: ReactNode,\n  callback: (children: ReactNode) => ReactNode\n) => {\n  if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n  return isValidElement(children)\n    ? cloneElement(\n        children,\n        undefined,\n        callback((children.props as { children: ReactNode }).children)\n      )\n    : null\n}\n"],"mappings":";;;;AAUA,IAAa,IAAwC,EAAU,WAUlD,KAAQ,EAAE,QAAK,GAAG,QACtB,kBAAC,EAAU,MAAX;CAAqB;CAAK,GAAI;CAAS,CAAA,EAOnC,KACX,GACA,GACA,MAEK,IAEE,EAAe,EAAS,GAC3B,EACE,GACA,KAAA,GACA,EAAU,EAAS,MAAkC,SAAS,CAC/D,GACD,OARiB,EAAS,EAAS"}

package/dist/spinner-DFUoYvmm.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner-DFUoYvmm.js","names":[],"sources":["../src/spinner/Spinner.styles.tsx","../src/spinner/Spinner.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nconst defaultVariants = {\n  intent: 'current',\n  size: 'current',\n  isBackgroundVisible: false,\n} as const\n\nexport const spinnerStyles = cva(\n  ['inline-block', 'border-solid', 'rounded-full', 'border-md', 'animate-spin'],\n  {\n    variants: {\n      /**\n       * Use `size` prop to set the size of the spinner. If you want to set the full size for the spinner, don't forget to add a wrapping container with its own size.\n       */\n      size: {\n        current: ['u-current-font-size'],\n        sm: ['w-sz-20', 'h-sz-20'],\n        md: ['w-sz-28', 'h-sz-28'],\n        full: ['w-full', 'h-full'],\n      },\n      /**\n       * Color scheme of the spinner.\n       */\n      intent: makeVariants<\n        'intent',\n        ['current', 'main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        current: ['border-current'],\n        main: ['border-main'],\n        support: ['border-support'],\n        accent: ['border-accent'],\n        success: ['border-success'],\n        alert: ['border-alert'],\n        error: ['border-error'],\n        info: ['border-info'],\n        neutral: ['border-neutral'],\n      }),\n      /**\n       * Size of the button.\n       */\n      isBackgroundVisible: {\n        true: ['border-b-neutral-container', 'border-l-neutral-container'],\n        false: ['border-b-transparent', 'border-l-transparent'],\n      },\n    },\n    defaultVariants,\n  }\n)\n\nexport type SpinnerStylesProps = VariantProps<typeof spinnerStyles>\n","import { ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { spinnerStyles, SpinnerStylesProps } from './Spinner.styles'\n\nexport interface SpinnerProps extends ComponentPropsWithRef<'div'>, SpinnerStylesProps {\n  /**\n   * Use `label` prop for accessibility, it is important to add a fallback loading text. This text will be visible to screen readers.\n   */\n  label?: string\n}\n\nexport const Spinner = ({\n  className,\n  size = 'current',\n  intent = 'current',\n  label,\n  isBackgroundVisible,\n  ref,\n  ...others\n}: PropsWithChildren<SpinnerProps>) => {\n  return (\n    <span\n      role=\"status\"\n      data-spark-component=\"spinner\"\n      ref={ref}\n      className={spinnerStyles({ className, size, intent, isBackgroundVisible })}\n      {...others}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n    </span>\n  )\n}\n"],"mappings":"4LASA,IAAa,GAAA,EAAA,EAAA,KACX,CAAC,eAAgB,eAAgB,eAAgB,YAAa,eAAe,CAC7E,CACE,SAAU,CAIR,KAAM,CACJ,QAAS,CAAC,sBAAsB,CAChC,GAAI,CAAC,UAAW,UAAU,CAC1B,GAAI,CAAC,UAAW,UAAU,CAC1B,KAAM,CAAC,SAAU,SAAS,CAC3B,CAID,QAAA,EAAA,EAAA,cAGE,CACA,QAAS,CAAC,iBAAiB,CAC3B,KAAM,CAAC,cAAc,CACrB,QAAS,CAAC,iBAAiB,CAC3B,OAAQ,CAAC,gBAAgB,CACzB,QAAS,CAAC,iBAAiB,CAC3B,MAAO,CAAC,eAAe,CACvB,MAAO,CAAC,eAAe,CACvB,KAAM,CAAC,cAAc,CACrB,QAAS,CAAC,iBAAiB,CAC5B,CAAC,CAIF,oBAAqB,CACnB,KAAM,CAAC,6BAA8B,6BAA6B,CAClE,MAAO,CAAC,uBAAwB,uBAAuB,CACxD,CACF,CACD,gBA5CoB,CACtB,OAAQ,UACR,KAAM,UACN,oBAAqB,GACtB,CAyCE,CACF,CCrCY,GAAW,CACtB,YACA,OAAO,UACP,SAAS,UACT,QACA,sBACA,MACA,GAAG,MAGD,EAAA,EAAA,KAAC,OAAD,CACE,KAAK,SACL,uBAAqB,UAChB,MACL,UAAW,EAAc,CAAE,YAAW,OAAM,SAAQ,sBAAqB,CAAC,CAC1E,GAAI,WAEH,IAAS,EAAA,EAAA,KAAC,EAAA,eAAD,CAAA,SAAiB,EAAuB,CAAA,CAC7C,CAAA"}
+{"version":3,"file":"spinner-DFUoYvmm.js","names":[],"sources":["../src/spinner/Spinner.styles.tsx","../src/spinner/Spinner.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nconst defaultVariants = {\n  intent: 'current',\n  size: 'current',\n  isBackgroundVisible: false,\n} as const\n\nexport const spinnerStyles = cva(\n  ['inline-block', 'border-solid', 'rounded-full', 'border-md', 'animate-spin'],\n  {\n    variants: {\n      /**\n       * Use `size` prop to set the size of the spinner. If you want to set the full size for the spinner, don't forget to add a wrapping container with its own size.\n       */\n      size: {\n        current: ['u-current-font-size'],\n        sm: ['w-sz-20', 'h-sz-20'],\n        md: ['w-sz-28', 'h-sz-28'],\n        full: ['w-full', 'h-full'],\n      },\n      /**\n       * Color scheme of the spinner.\n       */\n      intent: makeVariants<\n        'intent',\n        ['current', 'main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        current: ['border-current'],\n        main: ['border-main'],\n        support: ['border-support'],\n        accent: ['border-accent'],\n        success: ['border-success'],\n        alert: ['border-alert'],\n        error: ['border-error'],\n        info: ['border-info'],\n        neutral: ['border-neutral'],\n      }),\n      /**\n       * Size of the button.\n       */\n      isBackgroundVisible: {\n        true: ['border-b-neutral-container', 'border-l-neutral-container'],\n        false: ['border-b-transparent', 'border-l-transparent'],\n      },\n    },\n    defaultVariants,\n  }\n)\n\nexport type SpinnerStylesProps = VariantProps<typeof spinnerStyles>\n","import { ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { spinnerStyles, SpinnerStylesProps } from './Spinner.styles'\n\nexport interface SpinnerProps extends ComponentPropsWithRef<'div'>, SpinnerStylesProps {\n  /**\n   * Use `label` prop for accessibility, it is important to add a fallback loading text. This text will be visible to screen readers.\n   */\n  label?: string\n}\n\n/**\n * An animated indicator that shows a loading or processing state to users.\n */\nexport const Spinner = ({\n  className,\n  size = 'current',\n  intent = 'current',\n  label,\n  isBackgroundVisible,\n  ref,\n  ...others\n}: PropsWithChildren<SpinnerProps>) => {\n  return (\n    <span\n      role=\"status\"\n      data-spark-component=\"spinner\"\n      ref={ref}\n      className={spinnerStyles({ className, size, intent, isBackgroundVisible })}\n      {...others}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n    </span>\n  )\n}\n"],"mappings":"4LASA,IAAa,GAAA,EAAA,EAAA,KACX,CAAC,eAAgB,eAAgB,eAAgB,YAAa,eAAe,CAC7E,CACE,SAAU,CAIR,KAAM,CACJ,QAAS,CAAC,sBAAsB,CAChC,GAAI,CAAC,UAAW,UAAU,CAC1B,GAAI,CAAC,UAAW,UAAU,CAC1B,KAAM,CAAC,SAAU,SAAS,CAC3B,CAID,QAAA,EAAA,EAAA,cAGE,CACA,QAAS,CAAC,iBAAiB,CAC3B,KAAM,CAAC,cAAc,CACrB,QAAS,CAAC,iBAAiB,CAC3B,OAAQ,CAAC,gBAAgB,CACzB,QAAS,CAAC,iBAAiB,CAC3B,MAAO,CAAC,eAAe,CACvB,MAAO,CAAC,eAAe,CACvB,KAAM,CAAC,cAAc,CACrB,QAAS,CAAC,iBAAiB,CAC5B,CAAC,CAIF,oBAAqB,CACnB,KAAM,CAAC,6BAA8B,6BAA6B,CAClE,MAAO,CAAC,uBAAwB,uBAAuB,CACxD,CACF,CACD,gBA5CoB,CACtB,OAAQ,UACR,KAAM,UACN,oBAAqB,GACtB,CAyCE,CACF,CClCY,GAAW,CACtB,YACA,OAAO,UACP,SAAS,UACT,QACA,sBACA,MACA,GAAG,MAGD,EAAA,EAAA,KAAC,OAAD,CACE,KAAK,SACL,uBAAqB,UAChB,MACL,UAAW,EAAc,CAAE,YAAW,OAAM,SAAQ,sBAAqB,CAAC,CAC1E,GAAI,WAEH,IAAS,EAAA,EAAA,KAAC,EAAA,eAAD,CAAA,SAAiB,EAAuB,CAAA,CAC7C,CAAA"}

package/dist/spinner-DULLiM6a.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spinner-DULLiM6a.mjs","names":[],"sources":["../src/spinner/Spinner.styles.tsx","../src/spinner/Spinner.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nconst defaultVariants = {\n  intent: 'current',\n  size: 'current',\n  isBackgroundVisible: false,\n} as const\n\nexport const spinnerStyles = cva(\n  ['inline-block', 'border-solid', 'rounded-full', 'border-md', 'animate-spin'],\n  {\n    variants: {\n      /**\n       * Use `size` prop to set the size of the spinner. If you want to set the full size for the spinner, don't forget to add a wrapping container with its own size.\n       */\n      size: {\n        current: ['u-current-font-size'],\n        sm: ['w-sz-20', 'h-sz-20'],\n        md: ['w-sz-28', 'h-sz-28'],\n        full: ['w-full', 'h-full'],\n      },\n      /**\n       * Color scheme of the spinner.\n       */\n      intent: makeVariants<\n        'intent',\n        ['current', 'main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        current: ['border-current'],\n        main: ['border-main'],\n        support: ['border-support'],\n        accent: ['border-accent'],\n        success: ['border-success'],\n        alert: ['border-alert'],\n        error: ['border-error'],\n        info: ['border-info'],\n        neutral: ['border-neutral'],\n      }),\n      /**\n       * Size of the button.\n       */\n      isBackgroundVisible: {\n        true: ['border-b-neutral-container', 'border-l-neutral-container'],\n        false: ['border-b-transparent', 'border-l-transparent'],\n      },\n    },\n    defaultVariants,\n  }\n)\n\nexport type SpinnerStylesProps = VariantProps<typeof spinnerStyles>\n","import { ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { spinnerStyles, SpinnerStylesProps } from './Spinner.styles'\n\nexport interface SpinnerProps extends ComponentPropsWithRef<'div'>, SpinnerStylesProps {\n  /**\n   * Use `label` prop for accessibility, it is important to add a fallback loading text. This text will be visible to screen readers.\n   */\n  label?: string\n}\n\nexport const Spinner = ({\n  className,\n  size = 'current',\n  intent = 'current',\n  label,\n  isBackgroundVisible,\n  ref,\n  ...others\n}: PropsWithChildren<SpinnerProps>) => {\n  return (\n    <span\n      role=\"status\"\n      data-spark-component=\"spinner\"\n      ref={ref}\n      className={spinnerStyles({ className, size, intent, isBackgroundVisible })}\n      {...others}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n    </span>\n  )\n}\n"],"mappings":";;;;AASA,IAAa,IAAgB,EAC3B;CAAC;CAAgB;CAAgB;CAAgB;CAAa;CAAe,EAC7E;CACE,UAAU;EAIR,MAAM;GACJ,SAAS,CAAC,sBAAsB;GAChC,IAAI,CAAC,WAAW,UAAU;GAC1B,IAAI,CAAC,WAAW,UAAU;GAC1B,MAAM,CAAC,UAAU,SAAS;GAC3B;EAID,QAAQ,EAGN;GACA,SAAS,CAAC,iBAAiB;GAC3B,MAAM,CAAC,cAAc;GACrB,SAAS,CAAC,iBAAiB;GAC3B,QAAQ,CAAC,gBAAgB;GACzB,SAAS,CAAC,iBAAiB;GAC3B,OAAO,CAAC,eAAe;GACvB,OAAO,CAAC,eAAe;GACvB,MAAM,CAAC,cAAc;GACrB,SAAS,CAAC,iBAAiB;GAC5B,CAAC;EAIF,qBAAqB;GACnB,MAAM,CAAC,8BAA8B,6BAA6B;GAClE,OAAO,CAAC,wBAAwB,uBAAuB;GACxD;EACF;CACD,iBA5CoB;EACtB,QAAQ;EACR,MAAM;EACN,qBAAqB;EACtB;CAyCE,CACF,ECrCY,KAAW,EACtB,cACA,UAAO,WACP,YAAS,WACT,UACA,wBACA,QACA,GAAG,QAGD,kBAAC,QAAD;CACE,MAAK;CACL,wBAAqB;CAChB;CACL,WAAW,EAAc;EAAE;EAAW;EAAM;EAAQ;EAAqB,CAAC;CAC1E,GAAI;WAEH,KAAS,kBAAC,GAAD,EAAA,UAAiB,GAAuB,CAAA;CAC7C,CAAA"}
+{"version":3,"file":"spinner-DULLiM6a.mjs","names":[],"sources":["../src/spinner/Spinner.styles.tsx","../src/spinner/Spinner.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nconst defaultVariants = {\n  intent: 'current',\n  size: 'current',\n  isBackgroundVisible: false,\n} as const\n\nexport const spinnerStyles = cva(\n  ['inline-block', 'border-solid', 'rounded-full', 'border-md', 'animate-spin'],\n  {\n    variants: {\n      /**\n       * Use `size` prop to set the size of the spinner. If you want to set the full size for the spinner, don't forget to add a wrapping container with its own size.\n       */\n      size: {\n        current: ['u-current-font-size'],\n        sm: ['w-sz-20', 'h-sz-20'],\n        md: ['w-sz-28', 'h-sz-28'],\n        full: ['w-full', 'h-full'],\n      },\n      /**\n       * Color scheme of the spinner.\n       */\n      intent: makeVariants<\n        'intent',\n        ['current', 'main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        current: ['border-current'],\n        main: ['border-main'],\n        support: ['border-support'],\n        accent: ['border-accent'],\n        success: ['border-success'],\n        alert: ['border-alert'],\n        error: ['border-error'],\n        info: ['border-info'],\n        neutral: ['border-neutral'],\n      }),\n      /**\n       * Size of the button.\n       */\n      isBackgroundVisible: {\n        true: ['border-b-neutral-container', 'border-l-neutral-container'],\n        false: ['border-b-transparent', 'border-l-transparent'],\n      },\n    },\n    defaultVariants,\n  }\n)\n\nexport type SpinnerStylesProps = VariantProps<typeof spinnerStyles>\n","import { ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { spinnerStyles, SpinnerStylesProps } from './Spinner.styles'\n\nexport interface SpinnerProps extends ComponentPropsWithRef<'div'>, SpinnerStylesProps {\n  /**\n   * Use `label` prop for accessibility, it is important to add a fallback loading text. This text will be visible to screen readers.\n   */\n  label?: string\n}\n\n/**\n * An animated indicator that shows a loading or processing state to users.\n */\nexport const Spinner = ({\n  className,\n  size = 'current',\n  intent = 'current',\n  label,\n  isBackgroundVisible,\n  ref,\n  ...others\n}: PropsWithChildren<SpinnerProps>) => {\n  return (\n    <span\n      role=\"status\"\n      data-spark-component=\"spinner\"\n      ref={ref}\n      className={spinnerStyles({ className, size, intent, isBackgroundVisible })}\n      {...others}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n    </span>\n  )\n}\n"],"mappings":";;;;AASA,IAAa,IAAgB,EAC3B;CAAC;CAAgB;CAAgB;CAAgB;CAAa;CAAe,EAC7E;CACE,UAAU;EAIR,MAAM;GACJ,SAAS,CAAC,sBAAsB;GAChC,IAAI,CAAC,WAAW,UAAU;GAC1B,IAAI,CAAC,WAAW,UAAU;GAC1B,MAAM,CAAC,UAAU,SAAS;GAC3B;EAID,QAAQ,EAGN;GACA,SAAS,CAAC,iBAAiB;GAC3B,MAAM,CAAC,cAAc;GACrB,SAAS,CAAC,iBAAiB;GAC3B,QAAQ,CAAC,gBAAgB;GACzB,SAAS,CAAC,iBAAiB;GAC3B,OAAO,CAAC,eAAe;GACvB,OAAO,CAAC,eAAe;GACvB,MAAM,CAAC,cAAc;GACrB,SAAS,CAAC,iBAAiB;GAC5B,CAAC;EAIF,qBAAqB;GACnB,MAAM,CAAC,8BAA8B,6BAA6B;GAClE,OAAO,CAAC,wBAAwB,uBAAuB;GACxD;EACF;CACD,iBA5CoB;EACtB,QAAQ;EACR,MAAM;EACN,qBAAqB;EACtB;CAyCE,CACF,EClCY,KAAW,EACtB,cACA,UAAO,WACP,YAAS,WACT,UACA,wBACA,QACA,GAAG,QAGD,kBAAC,QAAD;CACE,MAAK;CACL,wBAAqB;CAChB;CACL,WAAW,EAAc;EAAE;EAAW;EAAM;EAAQ;EAAqB,CAAC;CAC1E,GAAI;WAEH,KAAS,kBAAC,GAAD,EAAA,UAAiB,GAAuB,CAAA;CAC7C,CAAA"}

package/dist/src/accordion/index.d.mts

@@ -3,6 +3,9 @@ import { Item } from './AccordionItem';
 import { ItemContent } from './AccordionItemContent';
 import { ItemHeader } from './AccordionItemHeader';
 import { ItemTrigger } from './AccordionItemTrigger';
+/**
+ * A vertically stacked set of expandable sections that allow users to show and hide content.
+ */
 export declare const Accordion: typeof Root & {
     Item: typeof Item;
     ItemHeader: typeof ItemHeader;

package/dist/src/accordion/index.d.ts

@@ -3,6 +3,9 @@ import { Item } from './AccordionItem';
 import { ItemContent } from './AccordionItemContent';
 import { ItemHeader } from './AccordionItemHeader';
 import { ItemTrigger } from './AccordionItemTrigger';
+/**
+ * A vertically stacked set of expandable sections that allow users to show and hide content.
+ */
 export declare const Accordion: typeof Root & {
     Item: typeof Item;
     ItemHeader: typeof ItemHeader;

package/dist/src/alert-dialog/index.d.mts

@@ -23,6 +23,9 @@ export { type AlertDialogOverlayProps } from './AlertDialogOverlay';
 export { type AlertDialogPortalProps } from './AlertDialogPortal';
 export { type AlertDialogTitleProps } from './AlertDialogTitle';
 export { type AlertDialogTriggerProps } from './AlertDialogTrigger';
+/**
+ * A modal dialog that interrupts the user with important content and requires a response.
+ */
 export declare const AlertDialog: typeof Root & {
     Action: typeof AlertDialogAction;
     Body: typeof AlertDialogBody;

package/dist/src/alert-dialog/index.d.ts

@@ -23,6 +23,9 @@ export { type AlertDialogOverlayProps } from './AlertDialogOverlay';
 export { type AlertDialogPortalProps } from './AlertDialogPortal';
 export { type AlertDialogTitleProps } from './AlertDialogTitle';
 export { type AlertDialogTriggerProps } from './AlertDialogTrigger';
+/**
+ * A modal dialog that interrupts the user with important content and requires a response.
+ */
 export declare const AlertDialog: typeof Root & {
     Action: typeof AlertDialogAction;
     Body: typeof AlertDialogBody;

package/dist/src/avatar/index.d.mts

@@ -1,15 +1,17 @@
+import { Avatar as Root } from './Avatar';
 import { AvatarAction } from './AvatarAction';
 import { AvatarImage } from './AvatarImage';
 import { AvatarOnlineBadge } from './AvatarOnlineBadge';
 import { AvatarPlaceholder } from './AvatarPlaceholder';
 import { AvatarUser } from './AvatarUser';
-import { AvatarProps } from './types';
-export interface AvatarComponent extends React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>> {
+/**
+ * A graphical representation of a user, typically displaying an image, initials, or icon.
+ */
+export declare const Avatar: typeof Root & {
     Image: typeof AvatarImage;
     Action: typeof AvatarAction;
     OnlineBadge: typeof AvatarOnlineBadge;
     User: typeof AvatarUser;
     Placeholder: typeof AvatarPlaceholder;
-}
-declare const AvatarComponent: AvatarComponent;
-export { AvatarComponent as Avatar };
+};
+export type { AvatarProps } from './types';

package/dist/src/avatar/index.d.ts

@@ -1,15 +1,17 @@
+import { Avatar as Root } from './Avatar';
 import { AvatarAction } from './AvatarAction';
 import { AvatarImage } from './AvatarImage';
 import { AvatarOnlineBadge } from './AvatarOnlineBadge';
 import { AvatarPlaceholder } from './AvatarPlaceholder';
 import { AvatarUser } from './AvatarUser';
-import { AvatarProps } from './types';
-export interface AvatarComponent extends React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>> {
+/**
+ * A graphical representation of a user, typically displaying an image, initials, or icon.
+ */
+export declare const Avatar: typeof Root & {
     Image: typeof AvatarImage;
     Action: typeof AvatarAction;
     OnlineBadge: typeof AvatarOnlineBadge;
     User: typeof AvatarUser;
     Placeholder: typeof AvatarPlaceholder;
-}
-declare const AvatarComponent: AvatarComponent;
-export { AvatarComponent as Avatar };
+};
+export type { AvatarProps } from './types';

package/dist/src/badge/Badge.d.ts

@@ -3,6 +3,9 @@ import { BadgeItemProps } from './BadgeItem';
 export type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {
     ref?: Ref<HTMLElement>;
 };
+/**
+ * A visual indicator that displays a count or status, typically positioned on top of another element.
+ */
 export declare const Badge: {
     ({ children, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/src/breadcrumb/index.d.mts

@@ -3,6 +3,9 @@ import { CurrentPage } from './BreadcrumbCurrentPage';
 import { Item } from './BreadcrumbItem';
 import { Link } from './BreadcrumbLink';
 import { Separator } from './BreadcrumbSeparator';
+/**
+ * A navigation component that shows the user's current location in a hierarchical structure.
+ */
 export declare const Breadcrumb: typeof Root & {
     Item: typeof Item;
     Link: typeof Link;

package/dist/src/breadcrumb/index.d.ts

@@ -3,6 +3,9 @@ import { CurrentPage } from './BreadcrumbCurrentPage';
 import { Item } from './BreadcrumbItem';
 import { Link } from './BreadcrumbLink';
 import { Separator } from './BreadcrumbSeparator';
+/**
+ * A navigation component that shows the user's current location in a hierarchical structure.
+ */
 export declare const Breadcrumb: typeof Root & {
     Item: typeof Item;
     Link: typeof Link;

package/dist/src/button/Button.d.ts

@@ -26,6 +26,9 @@ export interface ButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'd
     ariaDisabled?: boolean;
     ref?: Ref<HTMLButtonElement>;
 }
+/**
+ * A clickable element that triggers an action or event when activated by the user.
+ */
 export declare const Button: {
     ({ children, design, disabled, ariaDisabled, intent, isLoading, loadingLabel, loadingText, shape, size, asChild, className, underline, ref, ...others }: ButtonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/src/card/index.d.mts

@@ -1,6 +1,9 @@
 import { Backdrop } from './Backdrop';
 import { Card as Root } from './Card';
 import { Content } from './Content';
+/**
+ * A container component that groups related content and actions in a single, styled surface.
+ */
 export declare const Card: typeof Root & {
     Content: typeof Content;
     Backdrop: typeof Backdrop;

package/dist/src/card/index.d.ts

@@ -1,6 +1,9 @@
 import { Backdrop } from './Backdrop';
 import { Card as Root } from './Card';
 import { Content } from './Content';
+/**
+ * A container component that groups related content and actions in a single, styled surface.
+ */
 export declare const Card: typeof Root & {
     Content: typeof Content;
     Backdrop: typeof Backdrop;

package/dist/src/carousel/index.d.mts

@@ -7,6 +7,9 @@ import { CarouselPrevButton as PrevButton } from './CarouselPrevButton';
 import { CarouselSlide as Slide } from './CarouselSlide';
 import { CarouselSlides as Slides } from './CarouselSlides';
 import { CarouselViewport as Viewport } from './CarouselViewport';
+/**
+ * A slideshow component that displays a series of content items in a scrollable container.
+ */
 export declare const Carousel: typeof Root & {
     Controls: typeof Controls;
     NextButton: typeof NextButton;

package/dist/src/carousel/index.d.ts

@@ -7,6 +7,9 @@ import { CarouselPrevButton as PrevButton } from './CarouselPrevButton';
 import { CarouselSlide as Slide } from './CarouselSlide';
 import { CarouselSlides as Slides } from './CarouselSlides';
 import { CarouselViewport as Viewport } from './CarouselViewport';
+/**
+ * A slideshow component that displays a series of content items in a scrollable container.
+ */
 export declare const Carousel: typeof Root & {
     Controls: typeof Controls;
     NextButton: typeof NextButton;

package/dist/src/checkbox/Checkbox.d.ts

@@ -4,6 +4,9 @@ import { CheckboxInputProps } from './CheckboxInput';
 export type CheckboxProps = CheckboxInputProps & Pick<CheckboxGroupContextState, 'reverse'> & {
     ref?: Ref<HTMLButtonElement>;
 };
+/**
+ * A control that allows users to select one or multiple options from a set.
+ */
 export declare const Checkbox: {
     ({ id: idProp, className, intent: intentProp, checked: checkedProp, value, disabled, reverse, onCheckedChange, children, ref: forwardedRef, ...others }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/src/checkbox/CheckboxGroup.d.ts

@@ -12,6 +12,10 @@ export interface CheckboxGroupProps extends Omit<ComponentPropsWithoutRef<'div'>
     onCheckedChange?: (value: string[]) => void;
     ref?: Ref<HTMLDivElement>;
 }
+/**
+ * A group component that allows users to select one or more checkboxes from a list of choices,
+ * managing their state collectively with support for controlled and uncontrolled modes.
+ */
 export declare const CheckboxGroup: {
     ({ name: nameProp, value: valueProp, defaultValue, className, intent, orientation, onCheckedChange: onCheckedChangeProp, reverse, children, ref, ...others }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/src/chip/index.d.mts

@@ -3,6 +3,9 @@ import { ChipClearButton } from './ChipClearButton';
 import { ChipContent } from './ChipContent';
 import { ChipLeadingIcon } from './ChipLeadingIcon';
 import { ChipTrailingIcon } from './ChipTrailingIcon';
+/**
+ * A compact, interactive element used for input, filtering, or representing attributes.
+ */
 export declare const Chip: typeof Root & {
     Content: typeof ChipContent;
     LeadingIcon: typeof ChipLeadingIcon;

package/dist/src/chip/index.d.ts

@@ -3,6 +3,9 @@ import { ChipClearButton } from './ChipClearButton';
 import { ChipContent } from './ChipContent';
 import { ChipLeadingIcon } from './ChipLeadingIcon';
 import { ChipTrailingIcon } from './ChipTrailingIcon';
+/**
+ * A compact, interactive element used for input, filtering, or representing attributes.
+ */
 export declare const Chip: typeof Root & {
     Content: typeof ChipContent;
     LeadingIcon: typeof ChipLeadingIcon;

package/dist/src/circular-meter/index.d.mts

@@ -3,6 +3,9 @@ import { CircularMeterContent } from './CircularMeterContent';
 import { CircularMeterLabel } from './CircularMeterLabel';
 import { CircularMeterTrack } from './CircularMeterTrack';
 import { CircularMeterValue } from './CircularMeterValue';
+/**
+ * A circular progress indicator that displays a value within a defined range.
+ */
 export declare const CircularMeter: typeof Root & {
     Content: typeof CircularMeterContent;
     Label: typeof CircularMeterLabel;

package/dist/src/circular-meter/index.d.ts

@@ -3,6 +3,9 @@ import { CircularMeterContent } from './CircularMeterContent';
 import { CircularMeterLabel } from './CircularMeterLabel';
 import { CircularMeterTrack } from './CircularMeterTrack';
 import { CircularMeterValue } from './CircularMeterValue';
+/**
+ * A circular progress indicator that displays a value within a defined range.
+ */
 export declare const CircularMeter: typeof Root & {
     Content: typeof CircularMeterContent;
     Label: typeof CircularMeterLabel;

package/dist/src/collapsible/index.d.mts

@@ -1,6 +1,9 @@
 import { Content } from './Content';
 import { Root } from './Root';
 import { Trigger } from './Trigger';
+/**
+ * A component that allows users to expand and collapse content sections.
+ */
 export declare const Collapsible: typeof Root & {
     Trigger: typeof Trigger;
     Content: typeof Content;

package/dist/src/collapsible/index.d.ts

@@ -1,6 +1,9 @@
 import { Content } from './Content';
 import { Root } from './Root';
 import { Trigger } from './Trigger';
+/**
+ * A component that allows users to expand and collapse content sections.
+ */
 export declare const Collapsible: typeof Root & {
     Trigger: typeof Trigger;
     Content: typeof Content;

package/dist/src/combobox/index.d.mts

@@ -16,6 +16,9 @@ import { Portal } from './ComboboxPortal';
 import { SelectedItems } from './ComboboxSelectedItems';
 import { Trigger } from './ComboboxTrigger';
 export { useComboboxContext, ComboboxProvider };
+/**
+ * A searchable dropdown that combines a text input with a list of selectable options.
+ */
 export declare const Combobox: typeof Root & {
     Group: typeof Group;
     Item: typeof Item;

package/dist/src/combobox/index.d.ts

@@ -16,6 +16,9 @@ import { Portal } from './ComboboxPortal';
 import { SelectedItems } from './ComboboxSelectedItems';
 import { Trigger } from './ComboboxTrigger';
 export { useComboboxContext, ComboboxProvider };
+/**
+ * A searchable dropdown that combines a text input with a list of selectable options.
+ */
 export declare const Combobox: typeof Root & {
     Group: typeof Group;
     Item: typeof Item;

package/dist/src/dialog/index.d.mts

@@ -10,6 +10,9 @@ import { Overlay } from './DialogOverlay';
 import { Portal } from './DialogPortal';
 import { Title } from './DialogTitle';
 import { Trigger } from './DialogTrigger';
+/**
+ * A modal window that displays content on top of the main page, requiring user interaction before returning to the main flow.
+ */
 export declare const Dialog: typeof Root & {
     Trigger: typeof Trigger;
     Portal: typeof Portal;

package/dist/src/dialog/index.d.ts

@@ -10,6 +10,9 @@ import { Overlay } from './DialogOverlay';
 import { Portal } from './DialogPortal';
 import { Title } from './DialogTitle';
 import { Trigger } from './DialogTrigger';
+/**
+ * A modal window that displays content on top of the main page, requiring user interaction before returning to the main flow.
+ */
 export declare const Dialog: typeof Root & {
     Trigger: typeof Trigger;
     Portal: typeof Portal;

package/dist/src/divider/index.d.mts

@@ -1,6 +1,9 @@
 import { Divider as Root } from './Divider';
 import { DividerContent } from './DividerContent';
 export { type DividerContentProps } from './DividerContent';
+/**
+ * A visual separator that divides content into distinct sections or groups.
+ */
 export declare const Divider: typeof Root & {
     Content: typeof DividerContent;
 };

package/dist/src/divider/index.d.ts

@@ -1,6 +1,9 @@
 import { Divider as Root } from './Divider';
 import { DividerContent } from './DividerContent';
 export { type DividerContentProps } from './DividerContent';
+/**
+ * A visual separator that divides content into distinct sections or groups.
+ */
 export declare const Divider: typeof Root & {
     Content: typeof DividerContent;
 };

package/dist/src/drawer/index.d.mts

@@ -10,6 +10,9 @@ import { DrawerOverlay } from './DrawerOverlay';
 import { DrawerPortal } from './DrawerPortal';
 import { DrawerTitle } from './DrawerTitle';
 import { DrawerTrigger } from './DrawerTrigger';
+/**
+ * A panel that slides in from the edge of the screen, typically used for navigation or displaying additional content.
+ */
 export declare const Drawer: typeof Root & {
     Trigger: typeof DrawerTrigger;
     Portal: typeof DrawerPortal;

package/dist/src/drawer/index.d.ts

@@ -10,6 +10,9 @@ import { DrawerOverlay } from './DrawerOverlay';
 import { DrawerPortal } from './DrawerPortal';
 import { DrawerTitle } from './DrawerTitle';
 import { DrawerTrigger } from './DrawerTrigger';
+/**
+ * A panel that slides in from the edge of the screen, typically used for navigation or displaying additional content.
+ */
 export declare const Drawer: typeof Root & {
     Trigger: typeof DrawerTrigger;
     Portal: typeof DrawerPortal;

package/dist/src/dropdown/index.d.mts

@@ -13,6 +13,9 @@ import { Portal } from './DropdownPortal';
 import { Trigger } from './DropdownTrigger';
 import { Value } from './DropdownValue';
 export { useDropdownContext, DropdownProvider };
+/**
+ * A list of options that appears when users interact with a trigger element.
+ */
 export declare const Dropdown: typeof Root & {
     Group: typeof Group;
     Item: typeof Item;

package/dist/src/dropdown/index.d.ts

@@ -13,6 +13,9 @@ import { Portal } from './DropdownPortal';
 import { Trigger } from './DropdownTrigger';
 import { Value } from './DropdownValue';
 export { useDropdownContext, DropdownProvider };
+/**
+ * A list of options that appears when users interact with a trigger element.
+ */
 export declare const Dropdown: typeof Root & {
     Group: typeof Group;
     Item: typeof Item;