@spark-ui/components 17.4.2 → 17.5.0

package/dist/segmented-gauge/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/segmented-gauge/SegmentedGaugeContext.tsx","../../src/segmented-gauge/SegmentedGaugeLabel.tsx","../../src/segmented-gauge/SegmentedGaugeSegment.tsx","../../src/segmented-gauge/SegmentedGaugeTrack.tsx","../../src/segmented-gauge/SegmentedGauge.tsx","../../src/segmented-gauge/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface SegmentedGaugeContextValue {\n  value?: number\n  min: number\n  max: number\n  segments: number\n  currentIndex: number\n  size: 'sm' | 'md'\n  intent: 'main' | 'support' | 'accent' | 'success' | 'alert' | 'danger' | 'info' | 'neutral'\n  customColor?: string\n  labelId: string\n  gaugeId: string\n}\n\nexport const SegmentedGaugeContext = createContext<SegmentedGaugeContextValue | null>(null)\n\nexport const useSegmentedGaugeContext = () => {\n  const context = useContext(SegmentedGaugeContext)\n\n  if (!context) {\n    throw new Error('useSegmentedGaugeContext must be used within a SegmentedGauge provider')\n  }\n\n  return context\n}\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useSegmentedGaugeContext } from './SegmentedGaugeContext'\n\nexport interface SegmentedGaugeLabelProps extends ComponentProps<'span'> {\n  ref?: Ref<HTMLSpanElement>\n  id?: string\n}\n\nexport const SegmentedGaugeLabel = ({\n  className,\n  children,\n  ref,\n  id,\n  ...props\n}: SegmentedGaugeLabelProps) => {\n  const { labelId } = useSegmentedGaugeContext()\n\n  return (\n    <span\n      data-spark-component=\"segmented-gauge-label\"\n      data-testid=\"segmented-gauge-label\"\n      ref={ref}\n      id={id || labelId}\n      className={cx('default:text-on-surface default:text-body-2', className)}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n\nSegmentedGaugeLabel.displayName = 'SegmentedGauge.Label'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref, useMemo } from 'react'\n\nimport { useSegmentedGaugeContext } from './SegmentedGaugeContext'\n\nexport interface SegmentedGaugeSegmentProps extends ComponentProps<'div'> {\n  /**\n   * Index of this segment (0-based)\n   */\n  index?: number\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const SegmentedGaugeSegment = ({\n  index = 0,\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedGaugeSegmentProps) => {\n  const { size, intent, customColor, currentIndex } = useSegmentedGaugeContext()\n\n  // Calculate isActive and isCurrent from context and index\n  const isActive = currentIndex !== -1 && index <= currentIndex\n  const isCurrent = currentIndex !== -1 && index === currentIndex\n\n  const gaugeColor = useMemo(() => {\n    // If customColor is provided, use it\n    if (customColor) {\n      return customColor\n    }\n\n    // Handle predefined intents\n    switch (intent) {\n      case 'main':\n        return 'var(--color-main)'\n      case 'support':\n        return 'var(--color-support)'\n      case 'accent':\n        return 'var(--color-accent)'\n      case 'success':\n        return 'var(--color-success)'\n      case 'alert':\n        return 'var(--color-alert)'\n      case 'danger':\n        return 'var(--color-error)'\n      case 'info':\n        return 'var(--color-info)'\n      case 'neutral':\n        return 'var(--color-neutral)'\n      default:\n        return 'var(--color-neutral)'\n    }\n  }, [intent, customColor])\n\n  const segmentClasses = cx(\n    'border-outline relative rounded-full',\n    {\n      'h-sz-8 w-sz-24': size === 'sm',\n      'h-sz-12 w-sz-36': size === 'md',\n      'default:bg-[var(--gauge-color)]': isActive,\n      'border-sm bg-surface': !isActive,\n    },\n    className\n  )\n\n  const indicatorClasses = cx(\n    'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n    'default:bg-surface default:rounded-full',\n    'border-[var(--gauge-color)]',\n    {\n      'size-sz-12 border-md': size === 'sm',\n      'size-sz-20 border-lg': size === 'md',\n    }\n  )\n\n  return (\n    <div\n      data-spark-component=\"segmented-gauge-segment\"\n      data-testid=\"segmented-gauge-segment\"\n      data-active={isActive}\n      data-current={isCurrent}\n      ref={ref}\n      style={\n        {\n          '--gauge-color': gaugeColor,\n        } as React.CSSProperties\n      }\n      className={segmentClasses}\n      {...props}\n    >\n      {children}\n      {isCurrent && <div className={indicatorClasses} aria-hidden=\"true\" />}\n    </div>\n  )\n}\n\nSegmentedGaugeSegment.displayName = 'SegmentedGauge.Segment'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface SegmentedGaugeTrackProps extends ComponentProps<'div'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const SegmentedGaugeTrack = ({\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedGaugeTrackProps) => {\n  return (\n    <div\n      data-spark-component=\"segmented-gauge-track\"\n      ref={ref}\n      className={cx('gap-sm relative flex rounded-full', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nSegmentedGaugeTrack.displayName = 'SegmentedGauge.Track'\n","import { cx } from 'class-variance-authority'\nimport { Ref, useId, useMemo } from 'react'\n\nimport { SegmentedGaugeContext } from './SegmentedGaugeContext'\nimport { SegmentedGaugeLabel } from './SegmentedGaugeLabel'\nimport { SegmentedGaugeSegment } from './SegmentedGaugeSegment'\nimport { SegmentedGaugeTrack } from './SegmentedGaugeTrack'\n\nconst calculateCurrentIndex = (\n  value: number | undefined,\n  min: number,\n  max: number,\n  segments: number\n) => {\n  // If value is undefined or null, no segment is active\n  if (value == null) {\n    return -1\n  }\n  const normalizedValue = Math.max(min, Math.min(max, value))\n  const range = max - min\n  const segmentSize = range / (segments - 1)\n  const rawIndex = (normalizedValue - min) / segmentSize\n\n  // Clamp the index to valid range\n  return Math.max(0, Math.min(segments - 1, Math.round(rawIndex)))\n}\n\nexport interface SegmentedGaugeProps {\n  /**\n   * The current value of the gauge\n   */\n  value?: number\n  /**\n   * Minimum value of the gauge (aria-valuemin)\n   */\n  min: number\n  /**\n   * Maximum value of the gauge (aria-valuemax)\n   */\n  max: number\n  /**\n   * Description text for the gauge (aria-describedby)\n   */\n  description?: string\n  /**\n   * Size of the gauge\n   */\n  size?: 'sm' | 'md'\n  /**\n   * Intent of the gauge - predefined color intent\n   */\n  intent?: 'main' | 'support' | 'accent' | 'success' | 'alert' | 'danger' | 'info' | 'neutral'\n  /**\n   * Custom color for the gauge (hex, CSS variable, etc.)\n   */\n  customColor?: string\n  /**\n   * ID of the gauge element\n   */\n  id?: string\n  /**\n   * Accessible label for the gauge (required if no id is provided)\n   */\n  'aria-label'?: string\n  /**\n   * Textual representation of the current value (aria-valuetext)\n   * By default, percentage is used (e.g. \"33%\")\n   */\n  'aria-valuetext'?: string\n  /**\n   * Additional CSS classes\n   */\n  className?: string\n  /**\n   * Ref to the root element\n   */\n  ref?: Ref<HTMLDivElement>\n  /**\n   * Children render prop for custom rendering\n   */\n  children?: (props: {\n    segments: {\n      isActive: boolean\n      isCurrent: boolean\n    }[]\n    currentIndex: number\n  }) => React.ReactNode\n}\n\nexport const SegmentedGauge = ({\n  value,\n  min,\n  max,\n  description,\n  size = 'md',\n  intent = 'neutral',\n  customColor,\n  id,\n  'aria-label': ariaLabel,\n  className,\n  ref,\n  children,\n  ...props\n}: SegmentedGaugeProps) => {\n  // Calculate segments from min and max\n  const segments = max - min + 1\n  const currentIndex = useMemo(\n    () => calculateCurrentIndex(value, min, max, segments),\n    [value, min, max, segments]\n  )\n\n  // Generate unique IDs\n  const internalLabelId = useId()\n  const generatedId = useId()\n  // Use provided id or generated one for the gauge element\n  const gaugeId = id || generatedId\n\n  const segmentsData = useMemo(() => {\n    return Array.from({ length: segments }, (_, index) => ({\n      isActive: currentIndex !== -1 && index <= currentIndex,\n      isCurrent: currentIndex !== -1 && index === currentIndex,\n    }))\n  }, [segments, currentIndex])\n\n  const contextValue = useMemo(\n    () => ({\n      value,\n      min,\n      max,\n      segments,\n      currentIndex,\n      size,\n      intent,\n      customColor,\n      labelId: internalLabelId,\n      gaugeId,\n    }),\n    [value, min, max, segments, currentIndex, size, intent, customColor, internalLabelId, gaugeId]\n  )\n\n  /**\n   * A `meter` role MUST have a value. If the value is not available, the component uses a `status` role instead.\n   */\n  const roleProps =\n    value != null\n      ? {\n          role: 'meter',\n          'aria-valuenow': value,\n          'aria-valuemin': min,\n          'aria-valuemax': max,\n        }\n      : {\n          role: 'status',\n        }\n\n  return (\n    <SegmentedGaugeContext.Provider value={contextValue}>\n      <div\n        id={gaugeId}\n        data-spark-component=\"segmented-gauge\"\n        ref={ref}\n        className={cx('gap-md flex flex-wrap items-center', className)}\n        {...roleProps}\n        aria-labelledby={id ? `${gaugeId}-label` : undefined}\n        aria-label={!id ? ariaLabel : undefined}\n        aria-describedby={internalLabelId}\n        {...props}\n      >\n        {children ? (\n          children({\n            segments: segmentsData,\n            currentIndex,\n          })\n        ) : (\n          <>\n            <SegmentedGaugeTrack>\n              {segmentsData.map((_, index) => (\n                <SegmentedGaugeSegment key={index} index={index} />\n              ))}\n            </SegmentedGaugeTrack>\n\n            {description && (\n              <SegmentedGaugeLabel id={internalLabelId}>{description}</SegmentedGaugeLabel>\n            )}\n          </>\n        )}\n      </div>\n    </SegmentedGaugeContext.Provider>\n  )\n}\n\nSegmentedGauge.displayName = 'SegmentedGauge'\n","import { SegmentedGauge as Root } from './SegmentedGauge'\nimport { SegmentedGaugeLabel } from './SegmentedGaugeLabel'\nimport { SegmentedGaugeSegment } from './SegmentedGaugeSegment'\nimport { SegmentedGaugeTrack } from './SegmentedGaugeTrack'\n\nexport const SegmentedGauge: typeof Root & {\n  Track: typeof SegmentedGaugeTrack\n  Segment: typeof SegmentedGaugeSegment\n  Label: typeof SegmentedGaugeLabel\n} = Object.assign(Root, {\n  Track: SegmentedGaugeTrack,\n  Segment: SegmentedGaugeSegment,\n  Label: SegmentedGaugeLabel,\n})\n\nSegmentedGauge.displayName = 'SegmentedGauge'\nSegmentedGaugeTrack.displayName = 'SegmentedGauge.Track'\nSegmentedGaugeSegment.displayName = 'SegmentedGauge.Segment'\nSegmentedGaugeLabel.displayName = 'SegmentedGauge.Label'\n\nexport { type SegmentedGaugeProps } from './SegmentedGauge'\nexport { type SegmentedGaugeTrackProps } from './SegmentedGaugeTrack'\nexport { type SegmentedGaugeSegmentProps } from './SegmentedGaugeSegment'\nexport { type SegmentedGaugeLabelProps } from './SegmentedGaugeLabel'\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/segmented-gauge/SegmentedGaugeContext.tsx","../../src/segmented-gauge/SegmentedGaugeLabel.tsx","../../src/segmented-gauge/SegmentedGaugeSegment.tsx","../../src/segmented-gauge/SegmentedGaugeTrack.tsx","../../src/segmented-gauge/SegmentedGauge.tsx","../../src/segmented-gauge/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface SegmentedGaugeContextValue {\n  value?: number\n  min: number\n  max: number\n  segments: number\n  currentIndex: number\n  size: 'sm' | 'md'\n  intent: 'main' | 'support' | 'accent' | 'success' | 'alert' | 'danger' | 'info' | 'neutral'\n  customColor?: string\n  labelId: string\n  gaugeId: string\n}\n\nexport const SegmentedGaugeContext = createContext<SegmentedGaugeContextValue | null>(null)\n\nexport const useSegmentedGaugeContext = () => {\n  const context = useContext(SegmentedGaugeContext)\n\n  if (!context) {\n    throw new Error('useSegmentedGaugeContext must be used within a SegmentedGauge provider')\n  }\n\n  return context\n}\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useSegmentedGaugeContext } from './SegmentedGaugeContext'\n\nexport interface SegmentedGaugeLabelProps extends ComponentProps<'span'> {\n  ref?: Ref<HTMLSpanElement>\n  id?: string\n}\n\nexport const SegmentedGaugeLabel = ({\n  className,\n  children,\n  ref,\n  id,\n  ...props\n}: SegmentedGaugeLabelProps) => {\n  const { labelId } = useSegmentedGaugeContext()\n\n  return (\n    <span\n      data-spark-component=\"segmented-gauge-label\"\n      data-testid=\"segmented-gauge-label\"\n      ref={ref}\n      id={id || labelId}\n      className={cx('default:text-on-surface default:text-body-2', className)}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n\nSegmentedGaugeLabel.displayName = 'SegmentedGauge.Label'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref, useMemo } from 'react'\n\nimport { useSegmentedGaugeContext } from './SegmentedGaugeContext'\n\nexport interface SegmentedGaugeSegmentProps extends ComponentProps<'div'> {\n  /**\n   * Index of this segment (0-based)\n   */\n  index?: number\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const SegmentedGaugeSegment = ({\n  index = 0,\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedGaugeSegmentProps) => {\n  const { size, intent, customColor, currentIndex } = useSegmentedGaugeContext()\n\n  // Calculate isActive and isCurrent from context and index\n  const isActive = currentIndex !== -1 && index <= currentIndex\n  const isCurrent = currentIndex !== -1 && index === currentIndex\n\n  const gaugeColor = useMemo(() => {\n    // If customColor is provided, use it\n    if (customColor) {\n      return customColor\n    }\n\n    // Handle predefined intents\n    switch (intent) {\n      case 'main':\n        return 'var(--color-main)'\n      case 'support':\n        return 'var(--color-support)'\n      case 'accent':\n        return 'var(--color-accent)'\n      case 'success':\n        return 'var(--color-success)'\n      case 'alert':\n        return 'var(--color-alert)'\n      case 'danger':\n        return 'var(--color-error)'\n      case 'info':\n        return 'var(--color-info)'\n      case 'neutral':\n        return 'var(--color-neutral)'\n      default:\n        return 'var(--color-neutral)'\n    }\n  }, [intent, customColor])\n\n  const segmentClasses = cx(\n    'border-outline relative rounded-full',\n    {\n      'h-sz-8 w-sz-24': size === 'sm',\n      'h-sz-12 w-sz-36': size === 'md',\n      'default:bg-[var(--gauge-color)]': isActive,\n      'border-sm bg-surface': !isActive,\n    },\n    className\n  )\n\n  const indicatorClasses = cx(\n    'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n    'default:bg-surface default:rounded-full',\n    'border-[var(--gauge-color)]',\n    {\n      'size-sz-12 border-md': size === 'sm',\n      'size-sz-20 border-lg': size === 'md',\n    }\n  )\n\n  return (\n    <div\n      data-spark-component=\"segmented-gauge-segment\"\n      data-testid=\"segmented-gauge-segment\"\n      data-active={isActive}\n      data-current={isCurrent}\n      ref={ref}\n      style={\n        {\n          '--gauge-color': gaugeColor,\n        } as React.CSSProperties\n      }\n      className={segmentClasses}\n      {...props}\n    >\n      {children}\n      {isCurrent && <div className={indicatorClasses} aria-hidden=\"true\" />}\n    </div>\n  )\n}\n\nSegmentedGaugeSegment.displayName = 'SegmentedGauge.Segment'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface SegmentedGaugeTrackProps extends ComponentProps<'div'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const SegmentedGaugeTrack = ({\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedGaugeTrackProps) => {\n  return (\n    <div\n      data-spark-component=\"segmented-gauge-track\"\n      ref={ref}\n      className={cx('gap-sm relative flex rounded-full', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nSegmentedGaugeTrack.displayName = 'SegmentedGauge.Track'\n","import { cx } from 'class-variance-authority'\nimport { Ref, useId, useMemo } from 'react'\n\nimport { SegmentedGaugeContext } from './SegmentedGaugeContext'\nimport { SegmentedGaugeLabel } from './SegmentedGaugeLabel'\nimport { SegmentedGaugeSegment } from './SegmentedGaugeSegment'\nimport { SegmentedGaugeTrack } from './SegmentedGaugeTrack'\n\nconst calculateCurrentIndex = (\n  value: number | undefined,\n  min: number,\n  max: number,\n  segments: number\n) => {\n  // If value is undefined or null, no segment is active\n  if (value == null) {\n    return -1\n  }\n  const normalizedValue = Math.max(min, Math.min(max, value))\n  const range = max - min\n  const segmentSize = range / (segments - 1)\n  const rawIndex = (normalizedValue - min) / segmentSize\n\n  // Clamp the index to valid range\n  return Math.max(0, Math.min(segments - 1, Math.round(rawIndex)))\n}\n\nexport interface SegmentedGaugeProps {\n  /**\n   * The current value of the gauge\n   */\n  value?: number\n  /**\n   * Minimum value of the gauge (aria-valuemin)\n   */\n  min: number\n  /**\n   * Maximum value of the gauge (aria-valuemax)\n   */\n  max: number\n  /**\n   * Description text for the gauge (aria-describedby)\n   */\n  description?: string\n  /**\n   * Size of the gauge\n   */\n  size?: 'sm' | 'md'\n  /**\n   * Intent of the gauge - predefined color intent\n   */\n  intent?: 'main' | 'support' | 'accent' | 'success' | 'alert' | 'danger' | 'info' | 'neutral'\n  /**\n   * Custom color for the gauge (hex, CSS variable, etc.)\n   */\n  customColor?: string\n  /**\n   * ID of the gauge element\n   */\n  id?: string\n  /**\n   * Accessible label for the gauge (required if no id is provided)\n   */\n  'aria-label'?: string\n  /**\n   * Textual representation of the current value (aria-valuetext)\n   * By default, percentage is used (e.g. \"33%\")\n   */\n  'aria-valuetext'?: string\n  /**\n   * Additional CSS classes\n   */\n  className?: string\n  /**\n   * Ref to the root element\n   */\n  ref?: Ref<HTMLDivElement>\n  /**\n   * Children render prop for custom rendering\n   */\n  children?: (props: {\n    segments: {\n      isActive: boolean\n      isCurrent: boolean\n    }[]\n    currentIndex: number\n  }) => React.ReactNode\n}\n\nexport const SegmentedGauge = ({\n  value,\n  min,\n  max,\n  description,\n  size = 'md',\n  intent = 'neutral',\n  customColor,\n  id,\n  'aria-label': ariaLabel,\n  className,\n  ref,\n  children,\n  ...props\n}: SegmentedGaugeProps) => {\n  // Calculate segments from min and max\n  const segments = max - min + 1\n  const currentIndex = useMemo(\n    () => calculateCurrentIndex(value, min, max, segments),\n    [value, min, max, segments]\n  )\n\n  // Generate unique IDs\n  const internalLabelId = useId()\n  const generatedId = useId()\n  // Use provided id or generated one for the gauge element\n  const gaugeId = id || generatedId\n\n  const segmentsData = useMemo(() => {\n    return Array.from({ length: segments }, (_, index) => ({\n      isActive: currentIndex !== -1 && index <= currentIndex,\n      isCurrent: currentIndex !== -1 && index === currentIndex,\n    }))\n  }, [segments, currentIndex])\n\n  const contextValue = useMemo(\n    () => ({\n      value,\n      min,\n      max,\n      segments,\n      currentIndex,\n      size,\n      intent,\n      customColor,\n      labelId: internalLabelId,\n      gaugeId,\n    }),\n    [value, min, max, segments, currentIndex, size, intent, customColor, internalLabelId, gaugeId]\n  )\n\n  /**\n   * A `meter` role MUST have a value. If the value is not available, the component uses a `status` role instead.\n   */\n  const roleProps =\n    value != null\n      ? {\n          role: 'meter',\n          'aria-valuenow': value,\n          'aria-valuemin': min,\n          'aria-valuemax': max,\n        }\n      : {\n          role: 'status',\n        }\n\n  return (\n    <SegmentedGaugeContext.Provider value={contextValue}>\n      <div\n        id={gaugeId}\n        data-spark-component=\"segmented-gauge\"\n        ref={ref}\n        className={cx('gap-md flex flex-wrap items-center', className)}\n        {...roleProps}\n        aria-labelledby={id ? `${gaugeId}-label` : undefined}\n        aria-label={!id ? ariaLabel : undefined}\n        aria-describedby={internalLabelId}\n        {...props}\n      >\n        {children ? (\n          children({\n            segments: segmentsData,\n            currentIndex,\n          })\n        ) : (\n          <>\n            <SegmentedGaugeTrack>\n              {segmentsData.map((_, index) => (\n                <SegmentedGaugeSegment key={index} index={index} />\n              ))}\n            </SegmentedGaugeTrack>\n\n            {description && (\n              <SegmentedGaugeLabel id={internalLabelId}>{description}</SegmentedGaugeLabel>\n            )}\n          </>\n        )}\n      </div>\n    </SegmentedGaugeContext.Provider>\n  )\n}\n\nSegmentedGauge.displayName = 'SegmentedGauge'\n","import { SegmentedGauge as Root } from './SegmentedGauge'\nimport { SegmentedGaugeLabel } from './SegmentedGaugeLabel'\nimport { SegmentedGaugeSegment } from './SegmentedGaugeSegment'\nimport { SegmentedGaugeTrack } from './SegmentedGaugeTrack'\n\n/**\n * A visual indicator that displays a value using discrete segments within a defined range.\n */\nexport const SegmentedGauge: typeof Root & {\n  Track: typeof SegmentedGaugeTrack\n  Segment: typeof SegmentedGaugeSegment\n  Label: typeof SegmentedGaugeLabel\n} = Object.assign(Root, {\n  Track: SegmentedGaugeTrack,\n  Segment: SegmentedGaugeSegment,\n  Label: SegmentedGaugeLabel,\n})\n\nSegmentedGauge.displayName = 'SegmentedGauge'\nSegmentedGaugeTrack.displayName = 'SegmentedGauge.Track'\nSegmentedGaugeSegment.displayName = 'SegmentedGauge.Segment'\nSegmentedGaugeLabel.displayName = 'SegmentedGauge.Label'\n\nexport { type SegmentedGaugeProps } from './SegmentedGauge'\nexport { type SegmentedGaugeTrackProps } from './SegmentedGaugeTrack'\nexport { type SegmentedGaugeSegmentProps } from './SegmentedGaugeSegment'\nexport { type SegmentedGaugeLabelProps } from './SegmentedGaugeLabel'\n"],"mappings":";;;;AAeA,IAAa,IAAwB,EAAiD,KAAK,EAE9E,UAAiC;CAC5C,IAAM,IAAU,EAAW,EAAsB;AAEjD,KAAI,CAAC,EACH,OAAU,MAAM,yEAAyE;AAG3F,QAAO;GCdI,KAAuB,EAClC,cACA,aACA,QACA,OACA,GAAG,QAC2B;CAC9B,IAAM,EAAE,eAAY,GAA0B;AAE9C,QACE,kBAAC,QAAD;EACE,wBAAqB;EACrB,eAAY;EACP;EACL,IAAI,KAAM;EACV,WAAW,EAAG,+CAA+C,EAAU;EACvE,GAAI;EAEH;EACI,CAAA;;AAIX,EAAoB,cAAc;;;ACpBlC,IAAa,KAAyB,EACpC,WAAQ,GACR,cACA,aACA,QACA,GAAG,QAC6B;CAChC,IAAM,EAAE,SAAM,WAAQ,gBAAa,oBAAiB,GAA0B,EAGxE,IAAW,MAAiB,MAAM,KAAS,GAC3C,IAAY,MAAiB,MAAM,MAAU,GAE7C,IAAa,QAAc;AAE/B,MAAI,EACF,QAAO;AAIT,UAAQ,GAAR;GACE,KAAK,OACH,QAAO;GACT,KAAK,UACH,QAAO;GACT,KAAK,SACH,QAAO;GACT,KAAK,UACH,QAAO;GACT,KAAK,QACH,QAAO;GACT,KAAK,SACH,QAAO;GACT,KAAK,OACH,QAAO;GACT,KAAK,UACH,QAAO;GACT,QACE,QAAO;;IAEV,CAAC,GAAQ,EAAY,CAAC,EAEnB,IAAiB,EACrB,wCACA;EACE,kBAAkB,MAAS;EAC3B,mBAAmB,MAAS;EAC5B,mCAAmC;EACnC,wBAAwB,CAAC;EAC1B,EACD,EACD,EAEK,IAAmB,EACvB,+DACA,2CACA,+BACA;EACE,wBAAwB,MAAS;EACjC,wBAAwB,MAAS;EAClC,CACF;AAED,QACE,kBAAC,OAAD;EACE,wBAAqB;EACrB,eAAY;EACZ,eAAa;EACb,gBAAc;EACT;EACL,OACE,EACE,iBAAiB,GAClB;EAEH,WAAW;EACX,GAAI;YAZN,CAcG,GACA,KAAa,kBAAC,OAAD;GAAK,WAAW;GAAkB,eAAY;GAAS,CAAA,CACjE;;;AAIV,EAAsB,cAAc;;;AC1FpC,IAAa,KAAuB,EAClC,cACA,aACA,QACA,GAAG,QAGD,kBAAC,OAAD;CACE,wBAAqB;CAChB;CACL,WAAW,EAAG,qCAAqC,EAAU;CAC7D,GAAI;CAEH;CACG,CAAA;AAIV,EAAoB,cAAc;;;ACjBlC,IAAM,KACJ,GACA,GACA,GACA,MACG;AAEH,KAAI,KAAS,KACX,QAAO;CAET,IAAM,IAAkB,KAAK,IAAI,GAAK,KAAK,IAAI,GAAK,EAAM,CAAC,EAErD,KADQ,IAAM,MACS,IAAW,IAClC,KAAY,IAAkB,KAAO;AAG3C,QAAO,KAAK,IAAI,GAAG,KAAK,IAAI,IAAW,GAAG,KAAK,MAAM,EAAS,CAAC,CAAC;GAiErD,KAAkB,EAC7B,UACA,QACA,QACA,gBACA,UAAO,MACP,YAAS,WACT,gBACA,OACA,cAAc,GACd,cACA,QACA,aACA,GAAG,QACsB;CAEzB,IAAM,IAAW,IAAM,IAAM,GACvB,IAAe,QACb,EAAsB,GAAO,GAAK,GAAK,EAAS,EACtD;EAAC;EAAO;EAAK;EAAK;EAAS,CAC5B,EAGK,IAAkB,GAAO,EACzB,IAAc,GAAO,EAErB,IAAU,KAAM,GAEhB,IAAe,QACZ,MAAM,KAAK,EAAE,QAAQ,GAAU,GAAG,GAAG,OAAW;EACrD,UAAU,MAAiB,MAAM,KAAS;EAC1C,WAAW,MAAiB,MAAM,MAAU;EAC7C,EAAE,EACF,CAAC,GAAU,EAAa,CAAC,EAEtB,IAAe,SACZ;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,SAAS;EACT;EACD,GACD;EAAC;EAAO;EAAK;EAAK;EAAU;EAAc;EAAM;EAAQ;EAAa;EAAiB;EAAQ,CAC/F,EAKK,IACJ,KAAS,OAOL,EACE,MAAM,UACP,GARD;EACE,MAAM;EACN,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EAClB;AAKP,QACE,kBAAC,EAAsB,UAAvB;EAAgC,OAAO;YACrC,kBAAC,OAAD;GACE,IAAI;GACJ,wBAAqB;GAChB;GACL,WAAW,EAAG,sCAAsC,EAAU;GAC9D,GAAI;GACJ,mBAAiB,IAAK,GAAG,EAAQ,UAAU,KAAA;GAC3C,cAAa,IAAiB,KAAA,IAAZ;GAClB,oBAAkB;GAClB,GAAI;aAEH,IACC,EAAS;IACP,UAAU;IACV;IACD,CAAC,GAEF,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UACG,EAAa,KAAK,GAAG,MACpB,kBAAC,GAAD,EAA0C,UAAS,EAAvB,EAAuB,CACnD,EACkB,CAAA,EAErB,KACC,kBAAC,GAAD;IAAqB,IAAI;cAAkB;IAAkC,CAAA,CAE9E,EAAA,CAAA;GAED,CAAA;EACyB,CAAA;;AAIrC,EAAe,cAAc;;;ACvL7B,IAAa,IAIT,OAAO,OAAO,GAAM;CACtB,OAAO;CACP,SAAS;CACT,OAAO;CACR,CAAC;AAEF,EAAe,cAAc,kBAC7B,EAAoB,cAAc,wBAClC,EAAsB,cAAc,0BACpC,EAAoB,cAAc"}

package/dist/select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/select/utils.ts","../../src/select/SelectContext.tsx","../../src/select/Select.tsx","../../src/select/SelectItemsGroupContext.tsx","../../src/select/SelectGroup.tsx","../../src/select/SelectItem.tsx","../../src/select/SelectItems.tsx","../../src/select/SelectLabel.tsx","../../src/select/SelectLeadingIcon.tsx","../../src/select/SelectPlaceholder.tsx","../../src/select/SelectTrigger.styles.tsx","../../src/select/SelectTrigger.tsx","../../src/select/SelectValue.tsx","../../src/select/index.ts"],"sourcesContent":["import { Children, type FC, isValidElement, type ReactElement, type ReactNode } from 'react'\n\nimport { type ItemProps } from './SelectItem'\nimport { type ItemsMap, type SelectItem } from './types'\n\nexport const findElement = (children: ReactNode) => (name: string) => {\n  const validChildren = Children.toArray(children).filter(isValidElement)\n\n  return validChildren.find(child => {\n    return getElementDisplayName(child)?.includes(name)\n  })\n}\n\nconst getElementDisplayName = (element?: ReactElement) => {\n  return element ? (element.type as FC & { displayName?: string }).displayName : ''\n}\n\nconst getOrderedItems = (children: ReactNode, result: SelectItem[] = []): SelectItem[] => {\n  Children.forEach(children, child => {\n    if (!isValidElement(child)) return\n\n    if (\n      getElementDisplayName(child) === 'Select.Item' ||\n      getElementDisplayName(child) === 'Select.Placeholder'\n    ) {\n      const childProps = child.props as ItemProps\n      result.push({\n        value: childProps.value,\n        disabled: !!childProps.disabled,\n        text: childProps.children,\n      })\n    }\n\n    if ((child.props as { children: ReactNode }).children) {\n      getOrderedItems((child.props as { children: ReactNode }).children, result)\n    }\n  })\n\n  return result\n}\n\nexport const getItemsFromChildren = (children: ReactNode): ItemsMap => {\n  const newMap: ItemsMap = new Map()\n\n  getOrderedItems(children).forEach(itemData => {\n    newMap.set(itemData.value, itemData)\n  })\n\n  return newMap\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport {\n  createContext,\n  Dispatch,\n  PropsWithChildren,\n  ReactElement,\n  SetStateAction,\n  useContext,\n  useEffect,\n  useId,\n  useState,\n} from 'react'\n\nimport { type ItemsMap, SelectItem } from './types'\nimport { getItemsFromChildren } from './utils'\n\nexport interface SelectContextState {\n  itemsMap: ItemsMap\n  disabled: boolean\n  readOnly: boolean\n  state?: 'error' | 'alert' | 'success'\n  itemsComponent: ReactElement | undefined\n  selectedItem: SelectItem | undefined\n  setValue: (value: string) => void\n  isControlled: boolean\n  onValueChange?: (value: string) => void\n  ariaLabel: string | undefined\n  setAriaLabel: Dispatch<SetStateAction<string | undefined>>\n  fieldId: string\n  fieldLabelId: string | undefined\n  name: string | undefined\n  required: boolean\n  placeholder: string | undefined\n  setPlaceholder: Dispatch<SetStateAction<string | undefined>>\n}\n\nexport type SelectContextProps = PropsWithChildren<{\n  /**\n   * Use `state` prop to assign a specific state to the select, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.\n   */\n  state?: 'error' | 'alert' | 'success'\n  /**\n   * When true, prevents the user from interacting with the select.\n   */\n  disabled?: boolean\n  /**\n   * Sets the select as interactive or not.\n   */\n  readOnly?: boolean\n  /**\n   * The value of the select when initially rendered. Use when you do not need to control the state of the select.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the select. Should be used in conjunction with `onValueChange`.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string) => void\n\n  itemsComponent: ReactElement | undefined\n  /**\n   * This attribute is used to specify the name of the control.\n   * If wrapped with a FormField with a name, will be inherited from it.\n   */\n  name?: string\n  /**\n   * A Boolean attribute indicating that an option with a non-empty string value must be selected.\n   */\n  required?: boolean\n}>\n\nconst SelectContext = createContext<SelectContextState | null>(null)\n\nconst ID_PREFIX = ':select'\n\nexport const SelectProvider = ({\n  children,\n  defaultValue,\n  value: valueProp,\n  onValueChange,\n  disabled: disabledProp = false,\n  readOnly: readOnlyProp = false,\n  state: stateProp,\n  itemsComponent,\n  name: nameProp,\n  required: requiredProp,\n}: SelectContextProps) => {\n  const [value, setValue] = useCombinedState(valueProp, defaultValue, onValueChange)\n  const [placeholder, setPlaceholder] = useState<string | undefined>(undefined)\n  const [itemsMap, setItemsMap] = useState<ItemsMap>(getItemsFromChildren(itemsComponent))\n  const [ariaLabel, setAriaLabel] = useState<string>()\n\n  // Computed state\n  const firstItem = itemsMap.entries().next()?.value?.[1]\n  const selectedItem = typeof value === 'string' ? itemsMap.get(value) : firstItem\n  const isControlled = valueProp != null\n\n  // Derivated from FormField context\n  const field = useFormFieldControl()\n  const state = field.state || stateProp\n\n  const internalFieldID = `${ID_PREFIX}-field-${useId()}`\n  const fieldId = field.id || internalFieldID\n  const fieldLabelId = field.labelId\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n  const name = field.name ?? nameProp\n  const required = !!(field.isRequired ?? requiredProp)\n\n  /**\n   * Indices in a Map are set when an element is added to the Map.\n   * If for some reason, in the Select:\n   * - items order changes\n   * - items are added\n   * - items are removed\n   *\n   * The Map must be rebuilt from the new children in order to preserve logical indices.\n   *\n   */\n  useEffect(() => {\n    const newMap = getItemsFromChildren(itemsComponent)\n\n    const previousItems = [...itemsMap.values()]\n    const newItems = [...newMap.values()]\n\n    const hasItemsChanges =\n      previousItems.length !== newItems.length ||\n      previousItems.some((item, index) => {\n        const hasUpdatedValue = item.value !== newItems[index]?.value\n        const hasUpdatedText = item.text !== newItems[index]?.text\n\n        return hasUpdatedValue || hasUpdatedText\n      })\n\n    if (hasItemsChanges) {\n      setItemsMap(newMap)\n    }\n  }, [children])\n\n  return (\n    <SelectContext.Provider\n      value={{\n        disabled,\n        readOnly,\n        itemsMap,\n        state,\n        itemsComponent,\n        selectedItem,\n        setValue,\n        isControlled,\n        onValueChange,\n        ariaLabel,\n        setAriaLabel,\n        fieldId,\n        fieldLabelId,\n        name,\n        required,\n        placeholder,\n        setPlaceholder,\n      }}\n    >\n      {children}\n    </SelectContext.Provider>\n  )\n}\n\nexport const useSelectContext = () => {\n  const context = useContext(SelectContext)\n\n  if (!context) {\n    throw Error('useSelectContext must be used within a Select provider')\n  }\n\n  return context\n}\n","import { type SelectContextProps, SelectProvider } from './SelectContext'\nimport { findElement } from './utils'\n\nexport type SelectProps = Omit<SelectContextProps, 'itemsComponent'>\n\nexport const Select = ({ children, ...props }: SelectProps) => {\n  const finder = findElement(children)\n  const trigger = finder('Trigger')\n  const items = finder('Items')\n\n  return (\n    <SelectProvider {...props} itemsComponent={items}>\n      {trigger}\n    </SelectProvider>\n  )\n}\n\nSelect.displayName = 'Select'\n","import { createContext, type PropsWithChildren, useContext, useState } from 'react'\n\nexport interface SelectContextState {\n  groupLabel: string\n  setGroupLabel: (label: string) => void\n}\n\ntype SelectContextProps = PropsWithChildren\n\nconst SelectGroupContext = createContext<SelectContextState | null>(null)\n\nexport const SelectGroupProvider = ({ children }: SelectContextProps) => {\n  const [groupLabel, setGroupLabel] = useState('')\n\n  return (\n    <SelectGroupContext.Provider value={{ groupLabel, setGroupLabel }}>\n      {children}\n    </SelectGroupContext.Provider>\n  )\n}\n\nexport const useSelectGroupContext = () => {\n  const context = useContext(SelectGroupContext)\n\n  if (!context) {\n    throw Error('useSelectGroupContext must be used within a SelectGroup provider')\n  }\n\n  return context\n}\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, type Ref } from 'react'\n\nimport { SelectGroupProvider, useSelectGroupContext } from './SelectItemsGroupContext'\n\ninterface GroupProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLOptGroupElement>\n}\n\nexport const Group = ({ children, ref: forwardedRef, ...props }: GroupProps) => {\n  return (\n    <SelectGroupProvider>\n      <GroupContent ref={forwardedRef} {...props}>\n        {children}\n      </GroupContent>\n    </SelectGroupProvider>\n  )\n}\n\nconst GroupContent = ({ children, className, ref: forwardedRef }: GroupProps) => {\n  const { groupLabel } = useSelectGroupContext()\n\n  return (\n    <optgroup\n      data-spark-component=\"select-group\"\n      ref={forwardedRef}\n      className={cx(className)}\n      label={groupLabel}\n    >\n      {children}\n    </optgroup>\n  )\n}\n\nGroup.displayName = 'Select.Group'\n","import { type Ref } from 'react'\n\nexport interface ItemProps {\n  disabled?: boolean\n  value: string\n  children: string\n  ref?: Ref<HTMLOptionElement>\n}\n\nexport const Item = ({ disabled = false, value, children, ref: forwardedRef }: ItemProps) => {\n  return (\n    <option\n      data-spark-component=\"select-item\"\n      ref={forwardedRef}\n      key={value}\n      value={value}\n      disabled={disabled}\n      // label\n    >\n      {children}\n    </option>\n  )\n}\n\nItem.displayName = 'Select.Item'\n","import { cva } from 'class-variance-authority'\nimport { ChangeEvent, ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport const styles = cva(\n  [\n    'absolute left-0 top-0 size-full rounded-lg opacity-0',\n    'min-h-sz-44',\n    // outline styles\n    'ring-1 outline-hidden ring-inset focus:ring-2',\n  ],\n  {\n    variants: {\n      state: {\n        undefined: 'ring-outline focus:ring-outline-high',\n        error: 'ring-error',\n        alert: 'ring-alert',\n        success: 'ring-success',\n      },\n      disabled: {\n        true: 'cursor-not-allowed',\n      },\n      readOnly: {\n        true: 'cursor-default',\n      },\n    },\n    compoundVariants: [\n      {\n        disabled: false,\n        state: undefined,\n        class: 'hover:ring-outline-high',\n      },\n    ],\n  }\n)\n\nexport const Items = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: PropsWithChildren<ComponentPropsWithRef<'select'>>) => {\n  const {\n    state,\n    disabled,\n    readOnly,\n    ariaLabel,\n    fieldLabelId,\n    isControlled,\n    onValueChange,\n    selectedItem,\n    setValue,\n    name,\n    required,\n    fieldId,\n  } = useSelectContext()\n\n  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {\n    if (isControlled) {\n      event.preventDefault()\n      onValueChange?.(event.target.value)\n    } else {\n      setValue(event.target.value)\n    }\n  }\n\n  return (\n    <select\n      data-spark-component=\"select-items\"\n      ref={ref}\n      disabled={disabled || readOnly}\n      name={name}\n      required={required}\n      aria-labelledby={fieldLabelId}\n      {...(ariaLabel && { 'aria-label': ariaLabel })}\n      className={styles({ className, state, disabled, readOnly })}\n      value={selectedItem?.value}\n      onChange={handleChange}\n      id={fieldId}\n      {...rest}\n    >\n      {children}\n    </select>\n  )\n}\n\nItems.displayName = 'Select.Items'\n","import { useEffect } from 'react'\n\nimport { useSelectGroupContext } from './SelectItemsGroupContext'\n\ninterface LabelProps {\n  children: string\n}\n\nexport const Label = ({ children }: LabelProps) => {\n  const { setGroupLabel } = useSelectGroupContext()\n\n  useEffect(() => {\n    setGroupLabel(children)\n  }, [children])\n\n  return null\n}\n\nLabel.displayName = 'Select.Label'\n","import { ReactElement } from 'react'\n\nimport { Icon } from '../icon'\n\nexport const LeadingIcon = ({ children }: { children: ReactElement }) => {\n  return (\n    <Icon size={'sm'} className=\"shrink-0\">\n      {children}\n    </Icon>\n  )\n}\n\nLeadingIcon.displayName = 'Select.LeadingIcon'\n","import { type Ref, useEffect } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport interface PlaceholderProps {\n  disabled?: boolean\n  children: string\n  ref?: Ref<HTMLOptionElement>\n}\n\nexport const Placeholder = ({\n  disabled = false,\n  children,\n  ref: forwardedRef,\n}: PlaceholderProps) => {\n  const { setPlaceholder } = useSelectContext()\n\n  useEffect(() => {\n    setPlaceholder(children)\n  }, [children])\n\n  return (\n    <option\n      data-spark-component=\"select-placeholder\"\n      ref={forwardedRef}\n      key=\"placeholder\"\n      value=\"\"\n      disabled={disabled}\n    >\n      {children}\n    </option>\n  )\n}\n\nPlaceholder.displayName = 'Select.Placeholder'\n","import { cva } from 'class-variance-authority'\n\nexport const styles = cva(\n  [\n    'relative flex w-full items-center justify-between',\n    'min-h-sz-44 rounded-lg px-lg',\n    'text-body-1',\n    // outline styles\n    'ring-1 outline-hidden ring-inset focus-within:ring-focus',\n  ],\n  {\n    variants: {\n      state: {\n        undefined: 'ring-outline',\n        error: 'ring-error',\n        alert: 'ring-alert',\n        success: 'ring-success',\n      },\n      disabled: {\n        false: 'focus-within:ring-2',\n      },\n      readOnly: {\n        true: '',\n      },\n    },\n    compoundVariants: [\n      {\n        readOnly: false,\n        disabled: false,\n        class: 'bg-surface text-on-surface',\n      },\n      {\n        readOnly: true,\n        class: 'bg-on-surface/dim-5 text-on-surface cursor-default',\n      },\n      {\n        disabled: true,\n        class: ['bg-on-surface/dim-5 text-on-surface/dim-3', 'cursor-not-allowed'],\n      },\n      {\n        disabled: false,\n        state: undefined,\n        class: 'default:hover:ring-outline-high',\n      },\n    ],\n  }\n)\n","import { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { ReactNode, type Ref, useEffect } from 'react'\n\nimport { Icon } from '../icon'\nimport { useSelectContext } from './SelectContext'\nimport { styles } from './SelectTrigger.styles'\n\ninterface TriggerProps {\n  'aria-label'?: string\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * This trigger acts as a fake button for the `select` tag.\n * It is not interactive.\n */\nexport const Trigger = ({\n  'aria-label': ariaLabel,\n  children,\n  className,\n  ref: forwardedRef,\n}: TriggerProps) => {\n  const { disabled, readOnly, state, setAriaLabel, itemsComponent } = useSelectContext()\n\n  useEffect(() => {\n    if (ariaLabel) {\n      setAriaLabel(ariaLabel)\n    }\n  }, [ariaLabel])\n\n  return (\n    <div\n      data-spark-component=\"select-trigger\"\n      ref={forwardedRef}\n      className={styles({ className, state, disabled, readOnly })}\n    >\n      <span className=\"gap-md flex items-center justify-start\">{children}</span>\n\n      <Icon className=\"ml-md shrink-0\" size=\"sm\">\n        <ArrowHorizontalDown />\n      </Icon>\n\n      {itemsComponent}\n    </div>\n  )\n}\n\nTrigger.displayName = 'Select.Trigger'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, type Ref } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport interface ValueProps {\n  children?: ReactNode\n  className?: string\n  /**\n   * Optional placeholder value for the trigger.\n   * If not specified, the value inside `Select.Placeholder` item will be used.\n   */\n  placeholder?: string\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const Value = ({\n  children,\n  className,\n  placeholder: customPlaceholder,\n  ref: forwardedRef,\n}: ValueProps) => {\n  const { selectedItem, placeholder, disabled } = useSelectContext()\n\n  const isPlaceholderSelected = selectedItem?.value == null\n  const valuePlaceholder = customPlaceholder || placeholder\n\n  return (\n    <span\n      role=\"presentation\"\n      data-spark-component=\"select-value\"\n      ref={forwardedRef}\n      className={cx('flex shrink items-center text-left', className)}\n    >\n      <span\n        className={cx(\n          'line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis',\n          isPlaceholderSelected && !disabled && 'text-on-surface/dim-1'\n        )}\n      >\n        {isPlaceholderSelected ? valuePlaceholder : children || selectedItem?.text}\n      </span>\n    </span>\n  )\n}\n\nValue.displayName = 'Select.Value'\n","import { Select as Root } from './Select'\nimport { SelectProvider, useSelectContext } from './SelectContext'\nimport { Group } from './SelectGroup'\nimport { Item } from './SelectItem'\nimport { Items } from './SelectItems'\nimport { Label } from './SelectLabel'\nimport { LeadingIcon } from './SelectLeadingIcon'\nimport { Placeholder } from './SelectPlaceholder'\nimport { Trigger } from './SelectTrigger'\nimport { Value } from './SelectValue'\n\nexport { useSelectContext, SelectProvider }\n\nexport const Select: typeof Root & {\n  Group: typeof Group\n  Item: typeof Item\n  Items: typeof Items\n  Placeholder: typeof Placeholder\n  Label: typeof Label\n  Trigger: typeof Trigger\n  Value: typeof Value\n  LeadingIcon: typeof LeadingIcon\n} = Object.assign(Root, {\n  Group,\n  Item,\n  Items,\n  Placeholder,\n  Label,\n  Trigger,\n  Value,\n  LeadingIcon,\n})\n\nSelect.displayName = 'Select'\nGroup.displayName = 'Select.Group'\nItems.displayName = 'Select.Items'\nItem.displayName = 'Select.Item'\nPlaceholder.displayName = 'Select.Placeholder'\nLabel.displayName = 'Select.Label'\nTrigger.displayName = 'Select.Trigger'\nValue.displayName = 'Select.Value'\nLeadingIcon.displayName = 'Select.LeadingIcon'\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/select/utils.ts","../../src/select/SelectContext.tsx","../../src/select/Select.tsx","../../src/select/SelectItemsGroupContext.tsx","../../src/select/SelectGroup.tsx","../../src/select/SelectItem.tsx","../../src/select/SelectItems.tsx","../../src/select/SelectLabel.tsx","../../src/select/SelectLeadingIcon.tsx","../../src/select/SelectPlaceholder.tsx","../../src/select/SelectTrigger.styles.tsx","../../src/select/SelectTrigger.tsx","../../src/select/SelectValue.tsx","../../src/select/index.ts"],"sourcesContent":["import { Children, type FC, isValidElement, type ReactElement, type ReactNode } from 'react'\n\nimport { type ItemProps } from './SelectItem'\nimport { type ItemsMap, type SelectItem } from './types'\n\nexport const findElement = (children: ReactNode) => (name: string) => {\n  const validChildren = Children.toArray(children).filter(isValidElement)\n\n  return validChildren.find(child => {\n    return getElementDisplayName(child)?.includes(name)\n  })\n}\n\nconst getElementDisplayName = (element?: ReactElement) => {\n  return element ? (element.type as FC & { displayName?: string }).displayName : ''\n}\n\nconst getOrderedItems = (children: ReactNode, result: SelectItem[] = []): SelectItem[] => {\n  Children.forEach(children, child => {\n    if (!isValidElement(child)) return\n\n    if (\n      getElementDisplayName(child) === 'Select.Item' ||\n      getElementDisplayName(child) === 'Select.Placeholder'\n    ) {\n      const childProps = child.props as ItemProps\n      result.push({\n        value: childProps.value,\n        disabled: !!childProps.disabled,\n        text: childProps.children,\n      })\n    }\n\n    if ((child.props as { children: ReactNode }).children) {\n      getOrderedItems((child.props as { children: ReactNode }).children, result)\n    }\n  })\n\n  return result\n}\n\nexport const getItemsFromChildren = (children: ReactNode): ItemsMap => {\n  const newMap: ItemsMap = new Map()\n\n  getOrderedItems(children).forEach(itemData => {\n    newMap.set(itemData.value, itemData)\n  })\n\n  return newMap\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport {\n  createContext,\n  Dispatch,\n  PropsWithChildren,\n  ReactElement,\n  SetStateAction,\n  useContext,\n  useEffect,\n  useId,\n  useState,\n} from 'react'\n\nimport { type ItemsMap, SelectItem } from './types'\nimport { getItemsFromChildren } from './utils'\n\nexport interface SelectContextState {\n  itemsMap: ItemsMap\n  disabled: boolean\n  readOnly: boolean\n  state?: 'error' | 'alert' | 'success'\n  itemsComponent: ReactElement | undefined\n  selectedItem: SelectItem | undefined\n  setValue: (value: string) => void\n  isControlled: boolean\n  onValueChange?: (value: string) => void\n  ariaLabel: string | undefined\n  setAriaLabel: Dispatch<SetStateAction<string | undefined>>\n  fieldId: string\n  fieldLabelId: string | undefined\n  name: string | undefined\n  required: boolean\n  placeholder: string | undefined\n  setPlaceholder: Dispatch<SetStateAction<string | undefined>>\n}\n\nexport type SelectContextProps = PropsWithChildren<{\n  /**\n   * Use `state` prop to assign a specific state to the select, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.\n   */\n  state?: 'error' | 'alert' | 'success'\n  /**\n   * When true, prevents the user from interacting with the select.\n   */\n  disabled?: boolean\n  /**\n   * Sets the select as interactive or not.\n   */\n  readOnly?: boolean\n  /**\n   * The value of the select when initially rendered. Use when you do not need to control the state of the select.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the select. Should be used in conjunction with `onValueChange`.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string) => void\n\n  itemsComponent: ReactElement | undefined\n  /**\n   * This attribute is used to specify the name of the control.\n   * If wrapped with a FormField with a name, will be inherited from it.\n   */\n  name?: string\n  /**\n   * A Boolean attribute indicating that an option with a non-empty string value must be selected.\n   */\n  required?: boolean\n}>\n\nconst SelectContext = createContext<SelectContextState | null>(null)\n\nconst ID_PREFIX = ':select'\n\nexport const SelectProvider = ({\n  children,\n  defaultValue,\n  value: valueProp,\n  onValueChange,\n  disabled: disabledProp = false,\n  readOnly: readOnlyProp = false,\n  state: stateProp,\n  itemsComponent,\n  name: nameProp,\n  required: requiredProp,\n}: SelectContextProps) => {\n  const [value, setValue] = useCombinedState(valueProp, defaultValue, onValueChange)\n  const [placeholder, setPlaceholder] = useState<string | undefined>(undefined)\n  const [itemsMap, setItemsMap] = useState<ItemsMap>(getItemsFromChildren(itemsComponent))\n  const [ariaLabel, setAriaLabel] = useState<string>()\n\n  // Computed state\n  const firstItem = itemsMap.entries().next()?.value?.[1]\n  const selectedItem = typeof value === 'string' ? itemsMap.get(value) : firstItem\n  const isControlled = valueProp != null\n\n  // Derivated from FormField context\n  const field = useFormFieldControl()\n  const state = field.state || stateProp\n\n  const internalFieldID = `${ID_PREFIX}-field-${useId()}`\n  const fieldId = field.id || internalFieldID\n  const fieldLabelId = field.labelId\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n  const name = field.name ?? nameProp\n  const required = !!(field.isRequired ?? requiredProp)\n\n  /**\n   * Indices in a Map are set when an element is added to the Map.\n   * If for some reason, in the Select:\n   * - items order changes\n   * - items are added\n   * - items are removed\n   *\n   * The Map must be rebuilt from the new children in order to preserve logical indices.\n   *\n   */\n  useEffect(() => {\n    const newMap = getItemsFromChildren(itemsComponent)\n\n    const previousItems = [...itemsMap.values()]\n    const newItems = [...newMap.values()]\n\n    const hasItemsChanges =\n      previousItems.length !== newItems.length ||\n      previousItems.some((item, index) => {\n        const hasUpdatedValue = item.value !== newItems[index]?.value\n        const hasUpdatedText = item.text !== newItems[index]?.text\n\n        return hasUpdatedValue || hasUpdatedText\n      })\n\n    if (hasItemsChanges) {\n      setItemsMap(newMap)\n    }\n  }, [children])\n\n  return (\n    <SelectContext.Provider\n      value={{\n        disabled,\n        readOnly,\n        itemsMap,\n        state,\n        itemsComponent,\n        selectedItem,\n        setValue,\n        isControlled,\n        onValueChange,\n        ariaLabel,\n        setAriaLabel,\n        fieldId,\n        fieldLabelId,\n        name,\n        required,\n        placeholder,\n        setPlaceholder,\n      }}\n    >\n      {children}\n    </SelectContext.Provider>\n  )\n}\n\nexport const useSelectContext = () => {\n  const context = useContext(SelectContext)\n\n  if (!context) {\n    throw Error('useSelectContext must be used within a Select provider')\n  }\n\n  return context\n}\n","import { type SelectContextProps, SelectProvider } from './SelectContext'\nimport { findElement } from './utils'\n\nexport type SelectProps = Omit<SelectContextProps, 'itemsComponent'>\n\nexport const Select = ({ children, ...props }: SelectProps) => {\n  const finder = findElement(children)\n  const trigger = finder('Trigger')\n  const items = finder('Items')\n\n  return (\n    <SelectProvider {...props} itemsComponent={items}>\n      {trigger}\n    </SelectProvider>\n  )\n}\n\nSelect.displayName = 'Select'\n","import { createContext, type PropsWithChildren, useContext, useState } from 'react'\n\nexport interface SelectContextState {\n  groupLabel: string\n  setGroupLabel: (label: string) => void\n}\n\ntype SelectContextProps = PropsWithChildren\n\nconst SelectGroupContext = createContext<SelectContextState | null>(null)\n\nexport const SelectGroupProvider = ({ children }: SelectContextProps) => {\n  const [groupLabel, setGroupLabel] = useState('')\n\n  return (\n    <SelectGroupContext.Provider value={{ groupLabel, setGroupLabel }}>\n      {children}\n    </SelectGroupContext.Provider>\n  )\n}\n\nexport const useSelectGroupContext = () => {\n  const context = useContext(SelectGroupContext)\n\n  if (!context) {\n    throw Error('useSelectGroupContext must be used within a SelectGroup provider')\n  }\n\n  return context\n}\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, type Ref } from 'react'\n\nimport { SelectGroupProvider, useSelectGroupContext } from './SelectItemsGroupContext'\n\ninterface GroupProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLOptGroupElement>\n}\n\nexport const Group = ({ children, ref: forwardedRef, ...props }: GroupProps) => {\n  return (\n    <SelectGroupProvider>\n      <GroupContent ref={forwardedRef} {...props}>\n        {children}\n      </GroupContent>\n    </SelectGroupProvider>\n  )\n}\n\nconst GroupContent = ({ children, className, ref: forwardedRef }: GroupProps) => {\n  const { groupLabel } = useSelectGroupContext()\n\n  return (\n    <optgroup\n      data-spark-component=\"select-group\"\n      ref={forwardedRef}\n      className={cx(className)}\n      label={groupLabel}\n    >\n      {children}\n    </optgroup>\n  )\n}\n\nGroup.displayName = 'Select.Group'\n","import { type Ref } from 'react'\n\nexport interface ItemProps {\n  disabled?: boolean\n  value: string\n  children: string\n  ref?: Ref<HTMLOptionElement>\n}\n\nexport const Item = ({ disabled = false, value, children, ref: forwardedRef }: ItemProps) => {\n  return (\n    <option\n      data-spark-component=\"select-item\"\n      ref={forwardedRef}\n      key={value}\n      value={value}\n      disabled={disabled}\n      // label\n    >\n      {children}\n    </option>\n  )\n}\n\nItem.displayName = 'Select.Item'\n","import { cva } from 'class-variance-authority'\nimport { ChangeEvent, ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport const styles = cva(\n  [\n    'absolute left-0 top-0 size-full rounded-lg opacity-0',\n    'min-h-sz-44',\n    // outline styles\n    'ring-1 outline-hidden ring-inset focus:ring-2',\n  ],\n  {\n    variants: {\n      state: {\n        undefined: 'ring-outline focus:ring-outline-high',\n        error: 'ring-error',\n        alert: 'ring-alert',\n        success: 'ring-success',\n      },\n      disabled: {\n        true: 'cursor-not-allowed',\n      },\n      readOnly: {\n        true: 'cursor-default',\n      },\n    },\n    compoundVariants: [\n      {\n        disabled: false,\n        state: undefined,\n        class: 'hover:ring-outline-high',\n      },\n    ],\n  }\n)\n\nexport const Items = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: PropsWithChildren<ComponentPropsWithRef<'select'>>) => {\n  const {\n    state,\n    disabled,\n    readOnly,\n    ariaLabel,\n    fieldLabelId,\n    isControlled,\n    onValueChange,\n    selectedItem,\n    setValue,\n    name,\n    required,\n    fieldId,\n  } = useSelectContext()\n\n  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {\n    if (isControlled) {\n      event.preventDefault()\n      onValueChange?.(event.target.value)\n    } else {\n      setValue(event.target.value)\n    }\n  }\n\n  return (\n    <select\n      data-spark-component=\"select-items\"\n      ref={ref}\n      disabled={disabled || readOnly}\n      name={name}\n      required={required}\n      aria-labelledby={fieldLabelId}\n      {...(ariaLabel && { 'aria-label': ariaLabel })}\n      className={styles({ className, state, disabled, readOnly })}\n      value={selectedItem?.value}\n      onChange={handleChange}\n      id={fieldId}\n      {...rest}\n    >\n      {children}\n    </select>\n  )\n}\n\nItems.displayName = 'Select.Items'\n","import { useEffect } from 'react'\n\nimport { useSelectGroupContext } from './SelectItemsGroupContext'\n\ninterface LabelProps {\n  children: string\n}\n\nexport const Label = ({ children }: LabelProps) => {\n  const { setGroupLabel } = useSelectGroupContext()\n\n  useEffect(() => {\n    setGroupLabel(children)\n  }, [children])\n\n  return null\n}\n\nLabel.displayName = 'Select.Label'\n","import { ReactElement } from 'react'\n\nimport { Icon } from '../icon'\n\nexport const LeadingIcon = ({ children }: { children: ReactElement }) => {\n  return (\n    <Icon size={'sm'} className=\"shrink-0\">\n      {children}\n    </Icon>\n  )\n}\n\nLeadingIcon.displayName = 'Select.LeadingIcon'\n","import { type Ref, useEffect } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport interface PlaceholderProps {\n  disabled?: boolean\n  children: string\n  ref?: Ref<HTMLOptionElement>\n}\n\nexport const Placeholder = ({\n  disabled = false,\n  children,\n  ref: forwardedRef,\n}: PlaceholderProps) => {\n  const { setPlaceholder } = useSelectContext()\n\n  useEffect(() => {\n    setPlaceholder(children)\n  }, [children])\n\n  return (\n    <option\n      data-spark-component=\"select-placeholder\"\n      ref={forwardedRef}\n      key=\"placeholder\"\n      value=\"\"\n      disabled={disabled}\n    >\n      {children}\n    </option>\n  )\n}\n\nPlaceholder.displayName = 'Select.Placeholder'\n","import { cva } from 'class-variance-authority'\n\nexport const styles = cva(\n  [\n    'relative flex w-full items-center justify-between',\n    'min-h-sz-44 rounded-lg px-lg',\n    'text-body-1',\n    // outline styles\n    'ring-1 outline-hidden ring-inset focus-within:ring-focus',\n  ],\n  {\n    variants: {\n      state: {\n        undefined: 'ring-outline',\n        error: 'ring-error',\n        alert: 'ring-alert',\n        success: 'ring-success',\n      },\n      disabled: {\n        false: 'focus-within:ring-2',\n      },\n      readOnly: {\n        true: '',\n      },\n    },\n    compoundVariants: [\n      {\n        readOnly: false,\n        disabled: false,\n        class: 'bg-surface text-on-surface',\n      },\n      {\n        readOnly: true,\n        class: 'bg-on-surface/dim-5 text-on-surface cursor-default',\n      },\n      {\n        disabled: true,\n        class: ['bg-on-surface/dim-5 text-on-surface/dim-3', 'cursor-not-allowed'],\n      },\n      {\n        disabled: false,\n        state: undefined,\n        class: 'default:hover:ring-outline-high',\n      },\n    ],\n  }\n)\n","import { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { ReactNode, type Ref, useEffect } from 'react'\n\nimport { Icon } from '../icon'\nimport { useSelectContext } from './SelectContext'\nimport { styles } from './SelectTrigger.styles'\n\ninterface TriggerProps {\n  'aria-label'?: string\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * This trigger acts as a fake button for the `select` tag.\n * It is not interactive.\n */\nexport const Trigger = ({\n  'aria-label': ariaLabel,\n  children,\n  className,\n  ref: forwardedRef,\n}: TriggerProps) => {\n  const { disabled, readOnly, state, setAriaLabel, itemsComponent } = useSelectContext()\n\n  useEffect(() => {\n    if (ariaLabel) {\n      setAriaLabel(ariaLabel)\n    }\n  }, [ariaLabel])\n\n  return (\n    <div\n      data-spark-component=\"select-trigger\"\n      ref={forwardedRef}\n      className={styles({ className, state, disabled, readOnly })}\n    >\n      <span className=\"gap-md flex items-center justify-start\">{children}</span>\n\n      <Icon className=\"ml-md shrink-0\" size=\"sm\">\n        <ArrowHorizontalDown />\n      </Icon>\n\n      {itemsComponent}\n    </div>\n  )\n}\n\nTrigger.displayName = 'Select.Trigger'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, type Ref } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport interface ValueProps {\n  children?: ReactNode\n  className?: string\n  /**\n   * Optional placeholder value for the trigger.\n   * If not specified, the value inside `Select.Placeholder` item will be used.\n   */\n  placeholder?: string\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const Value = ({\n  children,\n  className,\n  placeholder: customPlaceholder,\n  ref: forwardedRef,\n}: ValueProps) => {\n  const { selectedItem, placeholder, disabled } = useSelectContext()\n\n  const isPlaceholderSelected = selectedItem?.value == null\n  const valuePlaceholder = customPlaceholder || placeholder\n\n  return (\n    <span\n      role=\"presentation\"\n      data-spark-component=\"select-value\"\n      ref={forwardedRef}\n      className={cx('flex shrink items-center text-left', className)}\n    >\n      <span\n        className={cx(\n          'line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis',\n          isPlaceholderSelected && !disabled && 'text-on-surface/dim-1'\n        )}\n      >\n        {isPlaceholderSelected ? valuePlaceholder : children || selectedItem?.text}\n      </span>\n    </span>\n  )\n}\n\nValue.displayName = 'Select.Value'\n","import { Select as Root } from './Select'\nimport { SelectProvider, useSelectContext } from './SelectContext'\nimport { Group } from './SelectGroup'\nimport { Item } from './SelectItem'\nimport { Items } from './SelectItems'\nimport { Label } from './SelectLabel'\nimport { LeadingIcon } from './SelectLeadingIcon'\nimport { Placeholder } from './SelectPlaceholder'\nimport { Trigger } from './SelectTrigger'\nimport { Value } from './SelectValue'\n\nexport { useSelectContext, SelectProvider }\n\n/**\n * A dropdown component that allows users to choose one option from a list of choices.\n */\nexport const Select: typeof Root & {\n  Group: typeof Group\n  Item: typeof Item\n  Items: typeof Items\n  Placeholder: typeof Placeholder\n  Label: typeof Label\n  Trigger: typeof Trigger\n  Value: typeof Value\n  LeadingIcon: typeof LeadingIcon\n} = Object.assign(Root, {\n  Group,\n  Item,\n  Items,\n  Placeholder,\n  Label,\n  Trigger,\n  Value,\n  LeadingIcon,\n})\n\nSelect.displayName = 'Select'\nGroup.displayName = 'Select.Group'\nItems.displayName = 'Select.Items'\nItem.displayName = 'Select.Item'\nPlaceholder.displayName = 'Select.Placeholder'\nLabel.displayName = 'Select.Label'\nTrigger.displayName = 'Select.Trigger'\nValue.displayName = 'Select.Value'\nLeadingIcon.displayName = 'Select.LeadingIcon'\n"],"mappings":"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"}

package/dist/select/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/select/utils.ts","../../src/select/SelectContext.tsx","../../src/select/Select.tsx","../../src/select/SelectItemsGroupContext.tsx","../../src/select/SelectGroup.tsx","../../src/select/SelectItem.tsx","../../src/select/SelectItems.tsx","../../src/select/SelectLabel.tsx","../../src/select/SelectLeadingIcon.tsx","../../src/select/SelectPlaceholder.tsx","../../src/select/SelectTrigger.styles.tsx","../../src/select/SelectTrigger.tsx","../../src/select/SelectValue.tsx","../../src/select/index.ts"],"sourcesContent":["import { Children, type FC, isValidElement, type ReactElement, type ReactNode } from 'react'\n\nimport { type ItemProps } from './SelectItem'\nimport { type ItemsMap, type SelectItem } from './types'\n\nexport const findElement = (children: ReactNode) => (name: string) => {\n  const validChildren = Children.toArray(children).filter(isValidElement)\n\n  return validChildren.find(child => {\n    return getElementDisplayName(child)?.includes(name)\n  })\n}\n\nconst getElementDisplayName = (element?: ReactElement) => {\n  return element ? (element.type as FC & { displayName?: string }).displayName : ''\n}\n\nconst getOrderedItems = (children: ReactNode, result: SelectItem[] = []): SelectItem[] => {\n  Children.forEach(children, child => {\n    if (!isValidElement(child)) return\n\n    if (\n      getElementDisplayName(child) === 'Select.Item' ||\n      getElementDisplayName(child) === 'Select.Placeholder'\n    ) {\n      const childProps = child.props as ItemProps\n      result.push({\n        value: childProps.value,\n        disabled: !!childProps.disabled,\n        text: childProps.children,\n      })\n    }\n\n    if ((child.props as { children: ReactNode }).children) {\n      getOrderedItems((child.props as { children: ReactNode }).children, result)\n    }\n  })\n\n  return result\n}\n\nexport const getItemsFromChildren = (children: ReactNode): ItemsMap => {\n  const newMap: ItemsMap = new Map()\n\n  getOrderedItems(children).forEach(itemData => {\n    newMap.set(itemData.value, itemData)\n  })\n\n  return newMap\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport {\n  createContext,\n  Dispatch,\n  PropsWithChildren,\n  ReactElement,\n  SetStateAction,\n  useContext,\n  useEffect,\n  useId,\n  useState,\n} from 'react'\n\nimport { type ItemsMap, SelectItem } from './types'\nimport { getItemsFromChildren } from './utils'\n\nexport interface SelectContextState {\n  itemsMap: ItemsMap\n  disabled: boolean\n  readOnly: boolean\n  state?: 'error' | 'alert' | 'success'\n  itemsComponent: ReactElement | undefined\n  selectedItem: SelectItem | undefined\n  setValue: (value: string) => void\n  isControlled: boolean\n  onValueChange?: (value: string) => void\n  ariaLabel: string | undefined\n  setAriaLabel: Dispatch<SetStateAction<string | undefined>>\n  fieldId: string\n  fieldLabelId: string | undefined\n  name: string | undefined\n  required: boolean\n  placeholder: string | undefined\n  setPlaceholder: Dispatch<SetStateAction<string | undefined>>\n}\n\nexport type SelectContextProps = PropsWithChildren<{\n  /**\n   * Use `state` prop to assign a specific state to the select, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.\n   */\n  state?: 'error' | 'alert' | 'success'\n  /**\n   * When true, prevents the user from interacting with the select.\n   */\n  disabled?: boolean\n  /**\n   * Sets the select as interactive or not.\n   */\n  readOnly?: boolean\n  /**\n   * The value of the select when initially rendered. Use when you do not need to control the state of the select.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the select. Should be used in conjunction with `onValueChange`.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string) => void\n\n  itemsComponent: ReactElement | undefined\n  /**\n   * This attribute is used to specify the name of the control.\n   * If wrapped with a FormField with a name, will be inherited from it.\n   */\n  name?: string\n  /**\n   * A Boolean attribute indicating that an option with a non-empty string value must be selected.\n   */\n  required?: boolean\n}>\n\nconst SelectContext = createContext<SelectContextState | null>(null)\n\nconst ID_PREFIX = ':select'\n\nexport const SelectProvider = ({\n  children,\n  defaultValue,\n  value: valueProp,\n  onValueChange,\n  disabled: disabledProp = false,\n  readOnly: readOnlyProp = false,\n  state: stateProp,\n  itemsComponent,\n  name: nameProp,\n  required: requiredProp,\n}: SelectContextProps) => {\n  const [value, setValue] = useCombinedState(valueProp, defaultValue, onValueChange)\n  const [placeholder, setPlaceholder] = useState<string | undefined>(undefined)\n  const [itemsMap, setItemsMap] = useState<ItemsMap>(getItemsFromChildren(itemsComponent))\n  const [ariaLabel, setAriaLabel] = useState<string>()\n\n  // Computed state\n  const firstItem = itemsMap.entries().next()?.value?.[1]\n  const selectedItem = typeof value === 'string' ? itemsMap.get(value) : firstItem\n  const isControlled = valueProp != null\n\n  // Derivated from FormField context\n  const field = useFormFieldControl()\n  const state = field.state || stateProp\n\n  const internalFieldID = `${ID_PREFIX}-field-${useId()}`\n  const fieldId = field.id || internalFieldID\n  const fieldLabelId = field.labelId\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n  const name = field.name ?? nameProp\n  const required = !!(field.isRequired ?? requiredProp)\n\n  /**\n   * Indices in a Map are set when an element is added to the Map.\n   * If for some reason, in the Select:\n   * - items order changes\n   * - items are added\n   * - items are removed\n   *\n   * The Map must be rebuilt from the new children in order to preserve logical indices.\n   *\n   */\n  useEffect(() => {\n    const newMap = getItemsFromChildren(itemsComponent)\n\n    const previousItems = [...itemsMap.values()]\n    const newItems = [...newMap.values()]\n\n    const hasItemsChanges =\n      previousItems.length !== newItems.length ||\n      previousItems.some((item, index) => {\n        const hasUpdatedValue = item.value !== newItems[index]?.value\n        const hasUpdatedText = item.text !== newItems[index]?.text\n\n        return hasUpdatedValue || hasUpdatedText\n      })\n\n    if (hasItemsChanges) {\n      setItemsMap(newMap)\n    }\n  }, [children])\n\n  return (\n    <SelectContext.Provider\n      value={{\n        disabled,\n        readOnly,\n        itemsMap,\n        state,\n        itemsComponent,\n        selectedItem,\n        setValue,\n        isControlled,\n        onValueChange,\n        ariaLabel,\n        setAriaLabel,\n        fieldId,\n        fieldLabelId,\n        name,\n        required,\n        placeholder,\n        setPlaceholder,\n      }}\n    >\n      {children}\n    </SelectContext.Provider>\n  )\n}\n\nexport const useSelectContext = () => {\n  const context = useContext(SelectContext)\n\n  if (!context) {\n    throw Error('useSelectContext must be used within a Select provider')\n  }\n\n  return context\n}\n","import { type SelectContextProps, SelectProvider } from './SelectContext'\nimport { findElement } from './utils'\n\nexport type SelectProps = Omit<SelectContextProps, 'itemsComponent'>\n\nexport const Select = ({ children, ...props }: SelectProps) => {\n  const finder = findElement(children)\n  const trigger = finder('Trigger')\n  const items = finder('Items')\n\n  return (\n    <SelectProvider {...props} itemsComponent={items}>\n      {trigger}\n    </SelectProvider>\n  )\n}\n\nSelect.displayName = 'Select'\n","import { createContext, type PropsWithChildren, useContext, useState } from 'react'\n\nexport interface SelectContextState {\n  groupLabel: string\n  setGroupLabel: (label: string) => void\n}\n\ntype SelectContextProps = PropsWithChildren\n\nconst SelectGroupContext = createContext<SelectContextState | null>(null)\n\nexport const SelectGroupProvider = ({ children }: SelectContextProps) => {\n  const [groupLabel, setGroupLabel] = useState('')\n\n  return (\n    <SelectGroupContext.Provider value={{ groupLabel, setGroupLabel }}>\n      {children}\n    </SelectGroupContext.Provider>\n  )\n}\n\nexport const useSelectGroupContext = () => {\n  const context = useContext(SelectGroupContext)\n\n  if (!context) {\n    throw Error('useSelectGroupContext must be used within a SelectGroup provider')\n  }\n\n  return context\n}\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, type Ref } from 'react'\n\nimport { SelectGroupProvider, useSelectGroupContext } from './SelectItemsGroupContext'\n\ninterface GroupProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLOptGroupElement>\n}\n\nexport const Group = ({ children, ref: forwardedRef, ...props }: GroupProps) => {\n  return (\n    <SelectGroupProvider>\n      <GroupContent ref={forwardedRef} {...props}>\n        {children}\n      </GroupContent>\n    </SelectGroupProvider>\n  )\n}\n\nconst GroupContent = ({ children, className, ref: forwardedRef }: GroupProps) => {\n  const { groupLabel } = useSelectGroupContext()\n\n  return (\n    <optgroup\n      data-spark-component=\"select-group\"\n      ref={forwardedRef}\n      className={cx(className)}\n      label={groupLabel}\n    >\n      {children}\n    </optgroup>\n  )\n}\n\nGroup.displayName = 'Select.Group'\n","import { type Ref } from 'react'\n\nexport interface ItemProps {\n  disabled?: boolean\n  value: string\n  children: string\n  ref?: Ref<HTMLOptionElement>\n}\n\nexport const Item = ({ disabled = false, value, children, ref: forwardedRef }: ItemProps) => {\n  return (\n    <option\n      data-spark-component=\"select-item\"\n      ref={forwardedRef}\n      key={value}\n      value={value}\n      disabled={disabled}\n      // label\n    >\n      {children}\n    </option>\n  )\n}\n\nItem.displayName = 'Select.Item'\n","import { cva } from 'class-variance-authority'\nimport { ChangeEvent, ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport const styles = cva(\n  [\n    'absolute left-0 top-0 size-full rounded-lg opacity-0',\n    'min-h-sz-44',\n    // outline styles\n    'ring-1 outline-hidden ring-inset focus:ring-2',\n  ],\n  {\n    variants: {\n      state: {\n        undefined: 'ring-outline focus:ring-outline-high',\n        error: 'ring-error',\n        alert: 'ring-alert',\n        success: 'ring-success',\n      },\n      disabled: {\n        true: 'cursor-not-allowed',\n      },\n      readOnly: {\n        true: 'cursor-default',\n      },\n    },\n    compoundVariants: [\n      {\n        disabled: false,\n        state: undefined,\n        class: 'hover:ring-outline-high',\n      },\n    ],\n  }\n)\n\nexport const Items = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: PropsWithChildren<ComponentPropsWithRef<'select'>>) => {\n  const {\n    state,\n    disabled,\n    readOnly,\n    ariaLabel,\n    fieldLabelId,\n    isControlled,\n    onValueChange,\n    selectedItem,\n    setValue,\n    name,\n    required,\n    fieldId,\n  } = useSelectContext()\n\n  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {\n    if (isControlled) {\n      event.preventDefault()\n      onValueChange?.(event.target.value)\n    } else {\n      setValue(event.target.value)\n    }\n  }\n\n  return (\n    <select\n      data-spark-component=\"select-items\"\n      ref={ref}\n      disabled={disabled || readOnly}\n      name={name}\n      required={required}\n      aria-labelledby={fieldLabelId}\n      {...(ariaLabel && { 'aria-label': ariaLabel })}\n      className={styles({ className, state, disabled, readOnly })}\n      value={selectedItem?.value}\n      onChange={handleChange}\n      id={fieldId}\n      {...rest}\n    >\n      {children}\n    </select>\n  )\n}\n\nItems.displayName = 'Select.Items'\n","import { useEffect } from 'react'\n\nimport { useSelectGroupContext } from './SelectItemsGroupContext'\n\ninterface LabelProps {\n  children: string\n}\n\nexport const Label = ({ children }: LabelProps) => {\n  const { setGroupLabel } = useSelectGroupContext()\n\n  useEffect(() => {\n    setGroupLabel(children)\n  }, [children])\n\n  return null\n}\n\nLabel.displayName = 'Select.Label'\n","import { ReactElement } from 'react'\n\nimport { Icon } from '../icon'\n\nexport const LeadingIcon = ({ children }: { children: ReactElement }) => {\n  return (\n    <Icon size={'sm'} className=\"shrink-0\">\n      {children}\n    </Icon>\n  )\n}\n\nLeadingIcon.displayName = 'Select.LeadingIcon'\n","import { type Ref, useEffect } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport interface PlaceholderProps {\n  disabled?: boolean\n  children: string\n  ref?: Ref<HTMLOptionElement>\n}\n\nexport const Placeholder = ({\n  disabled = false,\n  children,\n  ref: forwardedRef,\n}: PlaceholderProps) => {\n  const { setPlaceholder } = useSelectContext()\n\n  useEffect(() => {\n    setPlaceholder(children)\n  }, [children])\n\n  return (\n    <option\n      data-spark-component=\"select-placeholder\"\n      ref={forwardedRef}\n      key=\"placeholder\"\n      value=\"\"\n      disabled={disabled}\n    >\n      {children}\n    </option>\n  )\n}\n\nPlaceholder.displayName = 'Select.Placeholder'\n","import { cva } from 'class-variance-authority'\n\nexport const styles = cva(\n  [\n    'relative flex w-full items-center justify-between',\n    'min-h-sz-44 rounded-lg px-lg',\n    'text-body-1',\n    // outline styles\n    'ring-1 outline-hidden ring-inset focus-within:ring-focus',\n  ],\n  {\n    variants: {\n      state: {\n        undefined: 'ring-outline',\n        error: 'ring-error',\n        alert: 'ring-alert',\n        success: 'ring-success',\n      },\n      disabled: {\n        false: 'focus-within:ring-2',\n      },\n      readOnly: {\n        true: '',\n      },\n    },\n    compoundVariants: [\n      {\n        readOnly: false,\n        disabled: false,\n        class: 'bg-surface text-on-surface',\n      },\n      {\n        readOnly: true,\n        class: 'bg-on-surface/dim-5 text-on-surface cursor-default',\n      },\n      {\n        disabled: true,\n        class: ['bg-on-surface/dim-5 text-on-surface/dim-3', 'cursor-not-allowed'],\n      },\n      {\n        disabled: false,\n        state: undefined,\n        class: 'default:hover:ring-outline-high',\n      },\n    ],\n  }\n)\n","import { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { ReactNode, type Ref, useEffect } from 'react'\n\nimport { Icon } from '../icon'\nimport { useSelectContext } from './SelectContext'\nimport { styles } from './SelectTrigger.styles'\n\ninterface TriggerProps {\n  'aria-label'?: string\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * This trigger acts as a fake button for the `select` tag.\n * It is not interactive.\n */\nexport const Trigger = ({\n  'aria-label': ariaLabel,\n  children,\n  className,\n  ref: forwardedRef,\n}: TriggerProps) => {\n  const { disabled, readOnly, state, setAriaLabel, itemsComponent } = useSelectContext()\n\n  useEffect(() => {\n    if (ariaLabel) {\n      setAriaLabel(ariaLabel)\n    }\n  }, [ariaLabel])\n\n  return (\n    <div\n      data-spark-component=\"select-trigger\"\n      ref={forwardedRef}\n      className={styles({ className, state, disabled, readOnly })}\n    >\n      <span className=\"gap-md flex items-center justify-start\">{children}</span>\n\n      <Icon className=\"ml-md shrink-0\" size=\"sm\">\n        <ArrowHorizontalDown />\n      </Icon>\n\n      {itemsComponent}\n    </div>\n  )\n}\n\nTrigger.displayName = 'Select.Trigger'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, type Ref } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport interface ValueProps {\n  children?: ReactNode\n  className?: string\n  /**\n   * Optional placeholder value for the trigger.\n   * If not specified, the value inside `Select.Placeholder` item will be used.\n   */\n  placeholder?: string\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const Value = ({\n  children,\n  className,\n  placeholder: customPlaceholder,\n  ref: forwardedRef,\n}: ValueProps) => {\n  const { selectedItem, placeholder, disabled } = useSelectContext()\n\n  const isPlaceholderSelected = selectedItem?.value == null\n  const valuePlaceholder = customPlaceholder || placeholder\n\n  return (\n    <span\n      role=\"presentation\"\n      data-spark-component=\"select-value\"\n      ref={forwardedRef}\n      className={cx('flex shrink items-center text-left', className)}\n    >\n      <span\n        className={cx(\n          'line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis',\n          isPlaceholderSelected && !disabled && 'text-on-surface/dim-1'\n        )}\n      >\n        {isPlaceholderSelected ? valuePlaceholder : children || selectedItem?.text}\n      </span>\n    </span>\n  )\n}\n\nValue.displayName = 'Select.Value'\n","import { Select as Root } from './Select'\nimport { SelectProvider, useSelectContext } from './SelectContext'\nimport { Group } from './SelectGroup'\nimport { Item } from './SelectItem'\nimport { Items } from './SelectItems'\nimport { Label } from './SelectLabel'\nimport { LeadingIcon } from './SelectLeadingIcon'\nimport { Placeholder } from './SelectPlaceholder'\nimport { Trigger } from './SelectTrigger'\nimport { Value } from './SelectValue'\n\nexport { useSelectContext, SelectProvider }\n\nexport const Select: typeof Root & {\n  Group: typeof Group\n  Item: typeof Item\n  Items: typeof Items\n  Placeholder: typeof Placeholder\n  Label: typeof Label\n  Trigger: typeof Trigger\n  Value: typeof Value\n  LeadingIcon: typeof LeadingIcon\n} = Object.assign(Root, {\n  Group,\n  Item,\n  Items,\n  Placeholder,\n  Label,\n  Trigger,\n  Value,\n  LeadingIcon,\n})\n\nSelect.displayName = 'Select'\nGroup.displayName = 'Select.Group'\nItems.displayName = 'Select.Items'\nItem.displayName = 'Select.Item'\nPlaceholder.displayName = 'Select.Placeholder'\nLabel.displayName = 'Select.Label'\nTrigger.displayName = 'Select.Trigger'\nValue.displayName = 'Select.Value'\nLeadingIcon.displayName = 'Select.LeadingIcon'\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/select/utils.ts","../../src/select/SelectContext.tsx","../../src/select/Select.tsx","../../src/select/SelectItemsGroupContext.tsx","../../src/select/SelectGroup.tsx","../../src/select/SelectItem.tsx","../../src/select/SelectItems.tsx","../../src/select/SelectLabel.tsx","../../src/select/SelectLeadingIcon.tsx","../../src/select/SelectPlaceholder.tsx","../../src/select/SelectTrigger.styles.tsx","../../src/select/SelectTrigger.tsx","../../src/select/SelectValue.tsx","../../src/select/index.ts"],"sourcesContent":["import { Children, type FC, isValidElement, type ReactElement, type ReactNode } from 'react'\n\nimport { type ItemProps } from './SelectItem'\nimport { type ItemsMap, type SelectItem } from './types'\n\nexport const findElement = (children: ReactNode) => (name: string) => {\n  const validChildren = Children.toArray(children).filter(isValidElement)\n\n  return validChildren.find(child => {\n    return getElementDisplayName(child)?.includes(name)\n  })\n}\n\nconst getElementDisplayName = (element?: ReactElement) => {\n  return element ? (element.type as FC & { displayName?: string }).displayName : ''\n}\n\nconst getOrderedItems = (children: ReactNode, result: SelectItem[] = []): SelectItem[] => {\n  Children.forEach(children, child => {\n    if (!isValidElement(child)) return\n\n    if (\n      getElementDisplayName(child) === 'Select.Item' ||\n      getElementDisplayName(child) === 'Select.Placeholder'\n    ) {\n      const childProps = child.props as ItemProps\n      result.push({\n        value: childProps.value,\n        disabled: !!childProps.disabled,\n        text: childProps.children,\n      })\n    }\n\n    if ((child.props as { children: ReactNode }).children) {\n      getOrderedItems((child.props as { children: ReactNode }).children, result)\n    }\n  })\n\n  return result\n}\n\nexport const getItemsFromChildren = (children: ReactNode): ItemsMap => {\n  const newMap: ItemsMap = new Map()\n\n  getOrderedItems(children).forEach(itemData => {\n    newMap.set(itemData.value, itemData)\n  })\n\n  return newMap\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport {\n  createContext,\n  Dispatch,\n  PropsWithChildren,\n  ReactElement,\n  SetStateAction,\n  useContext,\n  useEffect,\n  useId,\n  useState,\n} from 'react'\n\nimport { type ItemsMap, SelectItem } from './types'\nimport { getItemsFromChildren } from './utils'\n\nexport interface SelectContextState {\n  itemsMap: ItemsMap\n  disabled: boolean\n  readOnly: boolean\n  state?: 'error' | 'alert' | 'success'\n  itemsComponent: ReactElement | undefined\n  selectedItem: SelectItem | undefined\n  setValue: (value: string) => void\n  isControlled: boolean\n  onValueChange?: (value: string) => void\n  ariaLabel: string | undefined\n  setAriaLabel: Dispatch<SetStateAction<string | undefined>>\n  fieldId: string\n  fieldLabelId: string | undefined\n  name: string | undefined\n  required: boolean\n  placeholder: string | undefined\n  setPlaceholder: Dispatch<SetStateAction<string | undefined>>\n}\n\nexport type SelectContextProps = PropsWithChildren<{\n  /**\n   * Use `state` prop to assign a specific state to the select, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.\n   */\n  state?: 'error' | 'alert' | 'success'\n  /**\n   * When true, prevents the user from interacting with the select.\n   */\n  disabled?: boolean\n  /**\n   * Sets the select as interactive or not.\n   */\n  readOnly?: boolean\n  /**\n   * The value of the select when initially rendered. Use when you do not need to control the state of the select.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the select. Should be used in conjunction with `onValueChange`.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string) => void\n\n  itemsComponent: ReactElement | undefined\n  /**\n   * This attribute is used to specify the name of the control.\n   * If wrapped with a FormField with a name, will be inherited from it.\n   */\n  name?: string\n  /**\n   * A Boolean attribute indicating that an option with a non-empty string value must be selected.\n   */\n  required?: boolean\n}>\n\nconst SelectContext = createContext<SelectContextState | null>(null)\n\nconst ID_PREFIX = ':select'\n\nexport const SelectProvider = ({\n  children,\n  defaultValue,\n  value: valueProp,\n  onValueChange,\n  disabled: disabledProp = false,\n  readOnly: readOnlyProp = false,\n  state: stateProp,\n  itemsComponent,\n  name: nameProp,\n  required: requiredProp,\n}: SelectContextProps) => {\n  const [value, setValue] = useCombinedState(valueProp, defaultValue, onValueChange)\n  const [placeholder, setPlaceholder] = useState<string | undefined>(undefined)\n  const [itemsMap, setItemsMap] = useState<ItemsMap>(getItemsFromChildren(itemsComponent))\n  const [ariaLabel, setAriaLabel] = useState<string>()\n\n  // Computed state\n  const firstItem = itemsMap.entries().next()?.value?.[1]\n  const selectedItem = typeof value === 'string' ? itemsMap.get(value) : firstItem\n  const isControlled = valueProp != null\n\n  // Derivated from FormField context\n  const field = useFormFieldControl()\n  const state = field.state || stateProp\n\n  const internalFieldID = `${ID_PREFIX}-field-${useId()}`\n  const fieldId = field.id || internalFieldID\n  const fieldLabelId = field.labelId\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n  const name = field.name ?? nameProp\n  const required = !!(field.isRequired ?? requiredProp)\n\n  /**\n   * Indices in a Map are set when an element is added to the Map.\n   * If for some reason, in the Select:\n   * - items order changes\n   * - items are added\n   * - items are removed\n   *\n   * The Map must be rebuilt from the new children in order to preserve logical indices.\n   *\n   */\n  useEffect(() => {\n    const newMap = getItemsFromChildren(itemsComponent)\n\n    const previousItems = [...itemsMap.values()]\n    const newItems = [...newMap.values()]\n\n    const hasItemsChanges =\n      previousItems.length !== newItems.length ||\n      previousItems.some((item, index) => {\n        const hasUpdatedValue = item.value !== newItems[index]?.value\n        const hasUpdatedText = item.text !== newItems[index]?.text\n\n        return hasUpdatedValue || hasUpdatedText\n      })\n\n    if (hasItemsChanges) {\n      setItemsMap(newMap)\n    }\n  }, [children])\n\n  return (\n    <SelectContext.Provider\n      value={{\n        disabled,\n        readOnly,\n        itemsMap,\n        state,\n        itemsComponent,\n        selectedItem,\n        setValue,\n        isControlled,\n        onValueChange,\n        ariaLabel,\n        setAriaLabel,\n        fieldId,\n        fieldLabelId,\n        name,\n        required,\n        placeholder,\n        setPlaceholder,\n      }}\n    >\n      {children}\n    </SelectContext.Provider>\n  )\n}\n\nexport const useSelectContext = () => {\n  const context = useContext(SelectContext)\n\n  if (!context) {\n    throw Error('useSelectContext must be used within a Select provider')\n  }\n\n  return context\n}\n","import { type SelectContextProps, SelectProvider } from './SelectContext'\nimport { findElement } from './utils'\n\nexport type SelectProps = Omit<SelectContextProps, 'itemsComponent'>\n\nexport const Select = ({ children, ...props }: SelectProps) => {\n  const finder = findElement(children)\n  const trigger = finder('Trigger')\n  const items = finder('Items')\n\n  return (\n    <SelectProvider {...props} itemsComponent={items}>\n      {trigger}\n    </SelectProvider>\n  )\n}\n\nSelect.displayName = 'Select'\n","import { createContext, type PropsWithChildren, useContext, useState } from 'react'\n\nexport interface SelectContextState {\n  groupLabel: string\n  setGroupLabel: (label: string) => void\n}\n\ntype SelectContextProps = PropsWithChildren\n\nconst SelectGroupContext = createContext<SelectContextState | null>(null)\n\nexport const SelectGroupProvider = ({ children }: SelectContextProps) => {\n  const [groupLabel, setGroupLabel] = useState('')\n\n  return (\n    <SelectGroupContext.Provider value={{ groupLabel, setGroupLabel }}>\n      {children}\n    </SelectGroupContext.Provider>\n  )\n}\n\nexport const useSelectGroupContext = () => {\n  const context = useContext(SelectGroupContext)\n\n  if (!context) {\n    throw Error('useSelectGroupContext must be used within a SelectGroup provider')\n  }\n\n  return context\n}\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, type Ref } from 'react'\n\nimport { SelectGroupProvider, useSelectGroupContext } from './SelectItemsGroupContext'\n\ninterface GroupProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLOptGroupElement>\n}\n\nexport const Group = ({ children, ref: forwardedRef, ...props }: GroupProps) => {\n  return (\n    <SelectGroupProvider>\n      <GroupContent ref={forwardedRef} {...props}>\n        {children}\n      </GroupContent>\n    </SelectGroupProvider>\n  )\n}\n\nconst GroupContent = ({ children, className, ref: forwardedRef }: GroupProps) => {\n  const { groupLabel } = useSelectGroupContext()\n\n  return (\n    <optgroup\n      data-spark-component=\"select-group\"\n      ref={forwardedRef}\n      className={cx(className)}\n      label={groupLabel}\n    >\n      {children}\n    </optgroup>\n  )\n}\n\nGroup.displayName = 'Select.Group'\n","import { type Ref } from 'react'\n\nexport interface ItemProps {\n  disabled?: boolean\n  value: string\n  children: string\n  ref?: Ref<HTMLOptionElement>\n}\n\nexport const Item = ({ disabled = false, value, children, ref: forwardedRef }: ItemProps) => {\n  return (\n    <option\n      data-spark-component=\"select-item\"\n      ref={forwardedRef}\n      key={value}\n      value={value}\n      disabled={disabled}\n      // label\n    >\n      {children}\n    </option>\n  )\n}\n\nItem.displayName = 'Select.Item'\n","import { cva } from 'class-variance-authority'\nimport { ChangeEvent, ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport const styles = cva(\n  [\n    'absolute left-0 top-0 size-full rounded-lg opacity-0',\n    'min-h-sz-44',\n    // outline styles\n    'ring-1 outline-hidden ring-inset focus:ring-2',\n  ],\n  {\n    variants: {\n      state: {\n        undefined: 'ring-outline focus:ring-outline-high',\n        error: 'ring-error',\n        alert: 'ring-alert',\n        success: 'ring-success',\n      },\n      disabled: {\n        true: 'cursor-not-allowed',\n      },\n      readOnly: {\n        true: 'cursor-default',\n      },\n    },\n    compoundVariants: [\n      {\n        disabled: false,\n        state: undefined,\n        class: 'hover:ring-outline-high',\n      },\n    ],\n  }\n)\n\nexport const Items = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: PropsWithChildren<ComponentPropsWithRef<'select'>>) => {\n  const {\n    state,\n    disabled,\n    readOnly,\n    ariaLabel,\n    fieldLabelId,\n    isControlled,\n    onValueChange,\n    selectedItem,\n    setValue,\n    name,\n    required,\n    fieldId,\n  } = useSelectContext()\n\n  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {\n    if (isControlled) {\n      event.preventDefault()\n      onValueChange?.(event.target.value)\n    } else {\n      setValue(event.target.value)\n    }\n  }\n\n  return (\n    <select\n      data-spark-component=\"select-items\"\n      ref={ref}\n      disabled={disabled || readOnly}\n      name={name}\n      required={required}\n      aria-labelledby={fieldLabelId}\n      {...(ariaLabel && { 'aria-label': ariaLabel })}\n      className={styles({ className, state, disabled, readOnly })}\n      value={selectedItem?.value}\n      onChange={handleChange}\n      id={fieldId}\n      {...rest}\n    >\n      {children}\n    </select>\n  )\n}\n\nItems.displayName = 'Select.Items'\n","import { useEffect } from 'react'\n\nimport { useSelectGroupContext } from './SelectItemsGroupContext'\n\ninterface LabelProps {\n  children: string\n}\n\nexport const Label = ({ children }: LabelProps) => {\n  const { setGroupLabel } = useSelectGroupContext()\n\n  useEffect(() => {\n    setGroupLabel(children)\n  }, [children])\n\n  return null\n}\n\nLabel.displayName = 'Select.Label'\n","import { ReactElement } from 'react'\n\nimport { Icon } from '../icon'\n\nexport const LeadingIcon = ({ children }: { children: ReactElement }) => {\n  return (\n    <Icon size={'sm'} className=\"shrink-0\">\n      {children}\n    </Icon>\n  )\n}\n\nLeadingIcon.displayName = 'Select.LeadingIcon'\n","import { type Ref, useEffect } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport interface PlaceholderProps {\n  disabled?: boolean\n  children: string\n  ref?: Ref<HTMLOptionElement>\n}\n\nexport const Placeholder = ({\n  disabled = false,\n  children,\n  ref: forwardedRef,\n}: PlaceholderProps) => {\n  const { setPlaceholder } = useSelectContext()\n\n  useEffect(() => {\n    setPlaceholder(children)\n  }, [children])\n\n  return (\n    <option\n      data-spark-component=\"select-placeholder\"\n      ref={forwardedRef}\n      key=\"placeholder\"\n      value=\"\"\n      disabled={disabled}\n    >\n      {children}\n    </option>\n  )\n}\n\nPlaceholder.displayName = 'Select.Placeholder'\n","import { cva } from 'class-variance-authority'\n\nexport const styles = cva(\n  [\n    'relative flex w-full items-center justify-between',\n    'min-h-sz-44 rounded-lg px-lg',\n    'text-body-1',\n    // outline styles\n    'ring-1 outline-hidden ring-inset focus-within:ring-focus',\n  ],\n  {\n    variants: {\n      state: {\n        undefined: 'ring-outline',\n        error: 'ring-error',\n        alert: 'ring-alert',\n        success: 'ring-success',\n      },\n      disabled: {\n        false: 'focus-within:ring-2',\n      },\n      readOnly: {\n        true: '',\n      },\n    },\n    compoundVariants: [\n      {\n        readOnly: false,\n        disabled: false,\n        class: 'bg-surface text-on-surface',\n      },\n      {\n        readOnly: true,\n        class: 'bg-on-surface/dim-5 text-on-surface cursor-default',\n      },\n      {\n        disabled: true,\n        class: ['bg-on-surface/dim-5 text-on-surface/dim-3', 'cursor-not-allowed'],\n      },\n      {\n        disabled: false,\n        state: undefined,\n        class: 'default:hover:ring-outline-high',\n      },\n    ],\n  }\n)\n","import { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { ReactNode, type Ref, useEffect } from 'react'\n\nimport { Icon } from '../icon'\nimport { useSelectContext } from './SelectContext'\nimport { styles } from './SelectTrigger.styles'\n\ninterface TriggerProps {\n  'aria-label'?: string\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * This trigger acts as a fake button for the `select` tag.\n * It is not interactive.\n */\nexport const Trigger = ({\n  'aria-label': ariaLabel,\n  children,\n  className,\n  ref: forwardedRef,\n}: TriggerProps) => {\n  const { disabled, readOnly, state, setAriaLabel, itemsComponent } = useSelectContext()\n\n  useEffect(() => {\n    if (ariaLabel) {\n      setAriaLabel(ariaLabel)\n    }\n  }, [ariaLabel])\n\n  return (\n    <div\n      data-spark-component=\"select-trigger\"\n      ref={forwardedRef}\n      className={styles({ className, state, disabled, readOnly })}\n    >\n      <span className=\"gap-md flex items-center justify-start\">{children}</span>\n\n      <Icon className=\"ml-md shrink-0\" size=\"sm\">\n        <ArrowHorizontalDown />\n      </Icon>\n\n      {itemsComponent}\n    </div>\n  )\n}\n\nTrigger.displayName = 'Select.Trigger'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, type Ref } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport interface ValueProps {\n  children?: ReactNode\n  className?: string\n  /**\n   * Optional placeholder value for the trigger.\n   * If not specified, the value inside `Select.Placeholder` item will be used.\n   */\n  placeholder?: string\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const Value = ({\n  children,\n  className,\n  placeholder: customPlaceholder,\n  ref: forwardedRef,\n}: ValueProps) => {\n  const { selectedItem, placeholder, disabled } = useSelectContext()\n\n  const isPlaceholderSelected = selectedItem?.value == null\n  const valuePlaceholder = customPlaceholder || placeholder\n\n  return (\n    <span\n      role=\"presentation\"\n      data-spark-component=\"select-value\"\n      ref={forwardedRef}\n      className={cx('flex shrink items-center text-left', className)}\n    >\n      <span\n        className={cx(\n          'line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis',\n          isPlaceholderSelected && !disabled && 'text-on-surface/dim-1'\n        )}\n      >\n        {isPlaceholderSelected ? valuePlaceholder : children || selectedItem?.text}\n      </span>\n    </span>\n  )\n}\n\nValue.displayName = 'Select.Value'\n","import { Select as Root } from './Select'\nimport { SelectProvider, useSelectContext } from './SelectContext'\nimport { Group } from './SelectGroup'\nimport { Item } from './SelectItem'\nimport { Items } from './SelectItems'\nimport { Label } from './SelectLabel'\nimport { LeadingIcon } from './SelectLeadingIcon'\nimport { Placeholder } from './SelectPlaceholder'\nimport { Trigger } from './SelectTrigger'\nimport { Value } from './SelectValue'\n\nexport { useSelectContext, SelectProvider }\n\n/**\n * A dropdown component that allows users to choose one option from a list of choices.\n */\nexport const Select: typeof Root & {\n  Group: typeof Group\n  Item: typeof Item\n  Items: typeof Items\n  Placeholder: typeof Placeholder\n  Label: typeof Label\n  Trigger: typeof Trigger\n  Value: typeof Value\n  LeadingIcon: typeof LeadingIcon\n} = Object.assign(Root, {\n  Group,\n  Item,\n  Items,\n  Placeholder,\n  Label,\n  Trigger,\n  Value,\n  LeadingIcon,\n})\n\nSelect.displayName = 'Select'\nGroup.displayName = 'Select.Group'\nItems.displayName = 'Select.Items'\nItem.displayName = 'Select.Item'\nPlaceholder.displayName = 'Select.Placeholder'\nLabel.displayName = 'Select.Label'\nTrigger.displayName = 'Select.Trigger'\nValue.displayName = 'Select.Value'\nLeadingIcon.displayName = 'Select.LeadingIcon'\n"],"mappings":"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"}

package/dist/skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/skeleton/Skeleton.styles.ts","../../src/skeleton/Skeleton.tsx","../../src/skeleton/SkeletonItem.styles.ts","../../src/skeleton/SkeletonItem.tsx","../../src/skeleton/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonStyles = cva([], {\n  variants: {\n    isAnimated: {\n      true: [\n        '[mask-image:linear-gradient(90deg,#000_40%,rgba(0,0,0,.3)_60%,#000_100%)]',\n        '[mask-size:200%_100%]',\n        'animate-standalone-shimmer motion-reduce:animate-none!',\n      ],\n      false: [],\n    },\n  },\n  defaultVariants: {\n    isAnimated: true,\n  },\n})\n\nexport type SkeletonStyleProps = ExcludeNull<VariantProps<typeof skeletonStyles>>\n","import { ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { type SkeletonStyleProps, skeletonStyles } from './Skeleton.styles'\n\nexport interface SkeletonProps extends ComponentPropsWithRef<'div'>, SkeletonStyleProps {\n  /**\n   * Displays an animated light effect.\n   * @default true\n   */\n  isAnimated?: boolean\n  /**\n   * Adds an accessible fallback label.\n   */\n  label?: string\n}\n\nexport const Skeleton = ({\n  isAnimated = true,\n  label,\n  className,\n  children,\n  ref: forwardedRef,\n  ...rest\n}: PropsWithChildren<SkeletonProps>) => (\n  <div\n    ref={forwardedRef}\n    data-spark-component=\"skeleton\"\n    role=\"presentation\"\n    className={skeletonStyles({ isAnimated, className })}\n    {...rest}\n  >\n    {children}\n\n    {label && <VisuallyHidden>{label}</VisuallyHidden>}\n  </div>\n)\n\nSkeleton.displayName = 'Skeleton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonItemStyles = cva(['bg-neutral/dim-4', 'min-h-lg min-w-lg'], {\n  variants: {\n    shape: {\n      line: ['w-full [&:last-child:not(:first-child)]:w-5/6', 'rounded-lg'],\n      rectangle: ['rounded-sm'],\n      circle: ['flex-none', 'rounded-full'],\n    },\n  },\n  defaultVariants: {\n    shape: 'rectangle',\n  },\n})\n\nexport const skeletonLineStyles = cva(['flex flex-col', 'w-full'], {\n  variants: {\n    gap: {\n      sm: 'gap-sm',\n      md: 'gap-md',\n      lg: 'gap-lg',\n      xl: 'gap-xl',\n      '2xl': 'gap-2xl',\n      '3xl': 'gap-3xl',\n    },\n  },\n  defaultVariants: {\n    gap: 'md',\n  },\n})\n\nexport type SkeletonItemStyleProps = ExcludeNull<VariantProps<typeof skeletonItemStyles>>\n","import { ComponentPropsWithRef, CSSProperties } from 'react'\n\nimport {\n  type SkeletonItemStyleProps,\n  skeletonItemStyles,\n  skeletonLineStyles,\n} from './SkeletonItem.styles'\n\ninterface SkeletonItemProps extends ComponentPropsWithRef<'div'>, SkeletonItemStyleProps {}\n\nexport type SkeletonRectangleProps = Omit<SkeletonItemProps, 'shape'> & {\n  width?: string | number\n  height?: string | number\n}\nexport type SkeletonCircleProps = Omit<SkeletonItemProps, 'shape'> & { size: string | number }\nexport type SkeletonLineProps = Omit<SkeletonItemProps, 'shape'> & {\n  lines?: number\n  /**\n   * Sets the gaps between group items.\n   */\n  gap?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'\n}\n\nconst getSizeValue = (size?: number | string): string | undefined => {\n  if (typeof size === 'number') return `${size}px`\n\n  return size\n}\n\nconst SkeletonItem = ({ shape, className, ref: forwardedRef, ...rest }: SkeletonItemProps) => {\n  return (\n    <div\n      ref={forwardedRef}\n      aria-hidden=\"true\"\n      className={skeletonItemStyles({ shape, className })}\n      {...rest}\n    />\n  )\n}\n\nexport const SkeletonRectangle = ({ width = '100%', height, ...rest }: SkeletonRectangleProps) => {\n  return (\n    <SkeletonItem\n      style={\n        {\n          '--skeleton-rect-width': getSizeValue(width),\n          '--skeleton-rect-height': getSizeValue(height),\n        } as CSSProperties\n      }\n      className=\"h-(--skeleton-rect-height) w-(--skeleton-rect-width)\"\n      {...rest}\n      shape=\"rectangle\"\n      data-shape=\"rectangle\"\n    />\n  )\n}\n\nexport const SkeletonCircle = ({ size, ...rest }: SkeletonCircleProps) => (\n  <SkeletonItem\n    style={{ '--skeleton-circle-size': getSizeValue(size) } as CSSProperties}\n    className=\"size-(--skeleton-circle-size)\"\n    {...rest}\n    shape=\"circle\"\n    data-shape=\"circle\"\n  />\n)\n\nexport const SkeletonLine = ({\n  lines = 1,\n  gap: gapProp,\n  className,\n  ...rest\n}: SkeletonLineProps) => {\n  const gap = gapProp || 'md'\n\n  return (\n    <div className={skeletonLineStyles({ gap, className })} aria-hidden=\"true\">\n      {[...new Array(lines)].map((_, index) => (\n        <SkeletonItem key={`line_${index}`} {...rest} shape=\"line\" data-shape=\"line\" />\n      ))}\n    </div>\n  )\n}\n\nSkeletonRectangle.displayName = 'Skeleton.Rectangle'\nSkeletonCircle.displayName = 'Skeleton.Circle'\nSkeletonLine.displayName = 'Skeleton.Line'\n","import { Skeleton as Root } from './Skeleton'\nimport {\n  SkeletonCircle as Circle,\n  SkeletonLine as Line,\n  SkeletonRectangle as Rectangle,\n} from './SkeletonItem'\n\nexport const Skeleton: typeof Root & {\n  Circle: typeof Circle\n  Line: typeof Line\n  Rectangle: typeof Rectangle\n} = Object.assign(Root, {\n  Circle,\n  Line,\n  Rectangle,\n})\n\nSkeleton.displayName = 'Skeleton'\nLine.displayName = 'Skeleton.Line'\nCircle.displayName = 'Skeleton.Circle'\nRectangle.displayName = 'Skeleton.Rectangle'\n\nexport type { SkeletonProps } from './Skeleton'\n"],"mappings":"2NAEA,IAAa,GAAA,EAAA,EAAA,KAAqB,EAAE,CAAE,CACpC,SAAU,CACR,WAAY,CACV,KAAM,CACJ,4EACA,wBACA,yDACD,CACD,MAAO,EAAE,CACV,CACF,CACD,gBAAiB,CACf,WAAY,GACb,CACF,CAAC,CCCW,GAAY,CACvB,aAAa,GACb,QACA,YACA,WACA,IAAK,EACL,GAAG,MAEH,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,uBAAqB,WACrB,KAAK,eACL,UAAW,EAAe,CAAE,aAAY,YAAW,CAAC,CACpD,GAAI,WALN,CAOG,EAEA,IAAS,EAAA,EAAA,KAAC,EAAA,eAAD,CAAA,SAAiB,EAAuB,CAAA,CAC9C,GAGR,EAAS,YAAc,WCpCvB,IAAa,GAAA,EAAA,EAAA,KAAyB,CAAC,mBAAoB,oBAAoB,CAAE,CAC/E,SAAU,CACR,MAAO,CACL,KAAM,CAAC,gDAAiD,aAAa,CACrE,UAAW,CAAC,aAAa,CACzB,OAAQ,CAAC,YAAa,eAAe,CACtC,CACF,CACD,gBAAiB,CACf,MAAO,YACR,CACF,CAAC,CAEW,GAAA,EAAA,EAAA,KAAyB,CAAC,gBAAiB,SAAS,CAAE,CACjE,SAAU,CACR,IAAK,CACH,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,MAAO,UACP,MAAO,UACR,CACF,CACD,gBAAiB,CACf,IAAK,KACN,CACF,CAAC,CCNI,EAAgB,GAChB,OAAO,GAAS,SAAiB,GAAG,EAAK,IAEtC,EAGH,GAAgB,CAAE,QAAO,YAAW,IAAK,EAAc,GAAG,MAE5D,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,cAAY,OACZ,UAAW,EAAmB,CAAE,QAAO,YAAW,CAAC,CACnD,GAAI,EACJ,CAAA,CAIO,GAAqB,CAAE,QAAQ,OAAQ,SAAQ,GAAG,MAE3D,EAAA,EAAA,KAAC,EAAD,CACE,MACE,CACE,wBAAyB,EAAa,EAAM,CAC5C,yBAA0B,EAAa,EAAO,CAC/C,CAEH,UAAU,uDACV,GAAI,EACJ,MAAM,YACN,aAAW,YACX,CAAA,CAIO,GAAkB,CAAE,OAAM,GAAG,MACxC,EAAA,EAAA,KAAC,EAAD,CACE,MAAO,CAAE,yBAA0B,EAAa,EAAK,CAAE,CACvD,UAAU,gCACV,GAAI,EACJ,MAAM,SACN,aAAW,SACX,CAAA,CAGS,GAAgB,CAC3B,QAAQ,EACR,IAAK,EACL,YACA,GAAG,MAKD,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAmB,CAAE,IAH3B,GAAW,KAGqB,YAAW,CAAC,CAAE,cAAY,gBACjE,CAAC,GAAO,MAAM,EAAM,CAAC,CAAC,KAAK,EAAG,KAC7B,EAAA,EAAA,KAAC,EAAD,CAAoC,GAAI,EAAM,MAAM,OAAO,aAAW,OAAS,CAA5D,QAAQ,IAAoD,CAC/E,CACE,CAAA,CAIV,EAAkB,YAAc,qBAChC,EAAe,YAAc,kBAC7B,EAAa,YAAc,gBC/E3B,IAAa,EAIT,OAAO,OAAO,EAAM,CACtB,OAAA,EACA,KAAA,EACA,UAAA,EACD,CAAC,CAEF,EAAS,YAAc,WACvB,EAAK,YAAc,gBACnB,EAAO,YAAc,kBACrB,EAAU,YAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/skeleton/Skeleton.styles.ts","../../src/skeleton/Skeleton.tsx","../../src/skeleton/SkeletonItem.styles.ts","../../src/skeleton/SkeletonItem.tsx","../../src/skeleton/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonStyles = cva([], {\n  variants: {\n    isAnimated: {\n      true: [\n        '[mask-image:linear-gradient(90deg,#000_40%,rgba(0,0,0,.3)_60%,#000_100%)]',\n        '[mask-size:200%_100%]',\n        'animate-standalone-shimmer motion-reduce:animate-none!',\n      ],\n      false: [],\n    },\n  },\n  defaultVariants: {\n    isAnimated: true,\n  },\n})\n\nexport type SkeletonStyleProps = ExcludeNull<VariantProps<typeof skeletonStyles>>\n","import { ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { type SkeletonStyleProps, skeletonStyles } from './Skeleton.styles'\n\nexport interface SkeletonProps extends ComponentPropsWithRef<'div'>, SkeletonStyleProps {\n  /**\n   * Displays an animated light effect.\n   * @default true\n   */\n  isAnimated?: boolean\n  /**\n   * Adds an accessible fallback label.\n   */\n  label?: string\n}\n\nexport const Skeleton = ({\n  isAnimated = true,\n  label,\n  className,\n  children,\n  ref: forwardedRef,\n  ...rest\n}: PropsWithChildren<SkeletonProps>) => (\n  <div\n    ref={forwardedRef}\n    data-spark-component=\"skeleton\"\n    role=\"presentation\"\n    className={skeletonStyles({ isAnimated, className })}\n    {...rest}\n  >\n    {children}\n\n    {label && <VisuallyHidden>{label}</VisuallyHidden>}\n  </div>\n)\n\nSkeleton.displayName = 'Skeleton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonItemStyles = cva(['bg-neutral/dim-4', 'min-h-lg min-w-lg'], {\n  variants: {\n    shape: {\n      line: ['w-full [&:last-child:not(:first-child)]:w-5/6', 'rounded-lg'],\n      rectangle: ['rounded-sm'],\n      circle: ['flex-none', 'rounded-full'],\n    },\n  },\n  defaultVariants: {\n    shape: 'rectangle',\n  },\n})\n\nexport const skeletonLineStyles = cva(['flex flex-col', 'w-full'], {\n  variants: {\n    gap: {\n      sm: 'gap-sm',\n      md: 'gap-md',\n      lg: 'gap-lg',\n      xl: 'gap-xl',\n      '2xl': 'gap-2xl',\n      '3xl': 'gap-3xl',\n    },\n  },\n  defaultVariants: {\n    gap: 'md',\n  },\n})\n\nexport type SkeletonItemStyleProps = ExcludeNull<VariantProps<typeof skeletonItemStyles>>\n","import { ComponentPropsWithRef, CSSProperties } from 'react'\n\nimport {\n  type SkeletonItemStyleProps,\n  skeletonItemStyles,\n  skeletonLineStyles,\n} from './SkeletonItem.styles'\n\ninterface SkeletonItemProps extends ComponentPropsWithRef<'div'>, SkeletonItemStyleProps {}\n\nexport type SkeletonRectangleProps = Omit<SkeletonItemProps, 'shape'> & {\n  width?: string | number\n  height?: string | number\n}\nexport type SkeletonCircleProps = Omit<SkeletonItemProps, 'shape'> & { size: string | number }\nexport type SkeletonLineProps = Omit<SkeletonItemProps, 'shape'> & {\n  lines?: number\n  /**\n   * Sets the gaps between group items.\n   */\n  gap?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'\n}\n\nconst getSizeValue = (size?: number | string): string | undefined => {\n  if (typeof size === 'number') return `${size}px`\n\n  return size\n}\n\nconst SkeletonItem = ({ shape, className, ref: forwardedRef, ...rest }: SkeletonItemProps) => {\n  return (\n    <div\n      ref={forwardedRef}\n      aria-hidden=\"true\"\n      className={skeletonItemStyles({ shape, className })}\n      {...rest}\n    />\n  )\n}\n\nexport const SkeletonRectangle = ({ width = '100%', height, ...rest }: SkeletonRectangleProps) => {\n  return (\n    <SkeletonItem\n      style={\n        {\n          '--skeleton-rect-width': getSizeValue(width),\n          '--skeleton-rect-height': getSizeValue(height),\n        } as CSSProperties\n      }\n      className=\"h-(--skeleton-rect-height) w-(--skeleton-rect-width)\"\n      {...rest}\n      shape=\"rectangle\"\n      data-shape=\"rectangle\"\n    />\n  )\n}\n\nexport const SkeletonCircle = ({ size, ...rest }: SkeletonCircleProps) => (\n  <SkeletonItem\n    style={{ '--skeleton-circle-size': getSizeValue(size) } as CSSProperties}\n    className=\"size-(--skeleton-circle-size)\"\n    {...rest}\n    shape=\"circle\"\n    data-shape=\"circle\"\n  />\n)\n\nexport const SkeletonLine = ({\n  lines = 1,\n  gap: gapProp,\n  className,\n  ...rest\n}: SkeletonLineProps) => {\n  const gap = gapProp || 'md'\n\n  return (\n    <div className={skeletonLineStyles({ gap, className })} aria-hidden=\"true\">\n      {[...new Array(lines)].map((_, index) => (\n        <SkeletonItem key={`line_${index}`} {...rest} shape=\"line\" data-shape=\"line\" />\n      ))}\n    </div>\n  )\n}\n\nSkeletonRectangle.displayName = 'Skeleton.Rectangle'\nSkeletonCircle.displayName = 'Skeleton.Circle'\nSkeletonLine.displayName = 'Skeleton.Line'\n","import { Skeleton as Root } from './Skeleton'\nimport {\n  SkeletonCircle as Circle,\n  SkeletonLine as Line,\n  SkeletonRectangle as Rectangle,\n} from './SkeletonItem'\n\n/**\n * A placeholder component that displays a loading state with animated shimmer effect.\n */\nexport const Skeleton: typeof Root & {\n  Circle: typeof Circle\n  Line: typeof Line\n  Rectangle: typeof Rectangle\n} = Object.assign(Root, {\n  Circle,\n  Line,\n  Rectangle,\n})\n\nSkeleton.displayName = 'Skeleton'\nLine.displayName = 'Skeleton.Line'\nCircle.displayName = 'Skeleton.Circle'\nRectangle.displayName = 'Skeleton.Rectangle'\n\nexport type { SkeletonProps } from './Skeleton'\n"],"mappings":"2NAEA,IAAa,GAAA,EAAA,EAAA,KAAqB,EAAE,CAAE,CACpC,SAAU,CACR,WAAY,CACV,KAAM,CACJ,4EACA,wBACA,yDACD,CACD,MAAO,EAAE,CACV,CACF,CACD,gBAAiB,CACf,WAAY,GACb,CACF,CAAC,CCCW,GAAY,CACvB,aAAa,GACb,QACA,YACA,WACA,IAAK,EACL,GAAG,MAEH,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,uBAAqB,WACrB,KAAK,eACL,UAAW,EAAe,CAAE,aAAY,YAAW,CAAC,CACpD,GAAI,WALN,CAOG,EAEA,IAAS,EAAA,EAAA,KAAC,EAAA,eAAD,CAAA,SAAiB,EAAuB,CAAA,CAC9C,GAGR,EAAS,YAAc,WCpCvB,IAAa,GAAA,EAAA,EAAA,KAAyB,CAAC,mBAAoB,oBAAoB,CAAE,CAC/E,SAAU,CACR,MAAO,CACL,KAAM,CAAC,gDAAiD,aAAa,CACrE,UAAW,CAAC,aAAa,CACzB,OAAQ,CAAC,YAAa,eAAe,CACtC,CACF,CACD,gBAAiB,CACf,MAAO,YACR,CACF,CAAC,CAEW,GAAA,EAAA,EAAA,KAAyB,CAAC,gBAAiB,SAAS,CAAE,CACjE,SAAU,CACR,IAAK,CACH,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,MAAO,UACP,MAAO,UACR,CACF,CACD,gBAAiB,CACf,IAAK,KACN,CACF,CAAC,CCNI,EAAgB,GAChB,OAAO,GAAS,SAAiB,GAAG,EAAK,IAEtC,EAGH,GAAgB,CAAE,QAAO,YAAW,IAAK,EAAc,GAAG,MAE5D,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,cAAY,OACZ,UAAW,EAAmB,CAAE,QAAO,YAAW,CAAC,CACnD,GAAI,EACJ,CAAA,CAIO,GAAqB,CAAE,QAAQ,OAAQ,SAAQ,GAAG,MAE3D,EAAA,EAAA,KAAC,EAAD,CACE,MACE,CACE,wBAAyB,EAAa,EAAM,CAC5C,yBAA0B,EAAa,EAAO,CAC/C,CAEH,UAAU,uDACV,GAAI,EACJ,MAAM,YACN,aAAW,YACX,CAAA,CAIO,GAAkB,CAAE,OAAM,GAAG,MACxC,EAAA,EAAA,KAAC,EAAD,CACE,MAAO,CAAE,yBAA0B,EAAa,EAAK,CAAE,CACvD,UAAU,gCACV,GAAI,EACJ,MAAM,SACN,aAAW,SACX,CAAA,CAGS,GAAgB,CAC3B,QAAQ,EACR,IAAK,EACL,YACA,GAAG,MAKD,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAmB,CAAE,IAH3B,GAAW,KAGqB,YAAW,CAAC,CAAE,cAAY,gBACjE,CAAC,GAAO,MAAM,EAAM,CAAC,CAAC,KAAK,EAAG,KAC7B,EAAA,EAAA,KAAC,EAAD,CAAoC,GAAI,EAAM,MAAM,OAAO,aAAW,OAAS,CAA5D,QAAQ,IAAoD,CAC/E,CACE,CAAA,CAIV,EAAkB,YAAc,qBAChC,EAAe,YAAc,kBAC7B,EAAa,YAAc,gBC5E3B,IAAa,EAIT,OAAO,OAAO,EAAM,CACtB,OAAA,EACA,KAAA,EACA,UAAA,EACD,CAAC,CAEF,EAAS,YAAc,WACvB,EAAK,YAAc,gBACnB,EAAO,YAAc,kBACrB,EAAU,YAAc"}

package/dist/skeleton/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/skeleton/Skeleton.styles.ts","../../src/skeleton/Skeleton.tsx","../../src/skeleton/SkeletonItem.styles.ts","../../src/skeleton/SkeletonItem.tsx","../../src/skeleton/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonStyles = cva([], {\n  variants: {\n    isAnimated: {\n      true: [\n        '[mask-image:linear-gradient(90deg,#000_40%,rgba(0,0,0,.3)_60%,#000_100%)]',\n        '[mask-size:200%_100%]',\n        'animate-standalone-shimmer motion-reduce:animate-none!',\n      ],\n      false: [],\n    },\n  },\n  defaultVariants: {\n    isAnimated: true,\n  },\n})\n\nexport type SkeletonStyleProps = ExcludeNull<VariantProps<typeof skeletonStyles>>\n","import { ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { type SkeletonStyleProps, skeletonStyles } from './Skeleton.styles'\n\nexport interface SkeletonProps extends ComponentPropsWithRef<'div'>, SkeletonStyleProps {\n  /**\n   * Displays an animated light effect.\n   * @default true\n   */\n  isAnimated?: boolean\n  /**\n   * Adds an accessible fallback label.\n   */\n  label?: string\n}\n\nexport const Skeleton = ({\n  isAnimated = true,\n  label,\n  className,\n  children,\n  ref: forwardedRef,\n  ...rest\n}: PropsWithChildren<SkeletonProps>) => (\n  <div\n    ref={forwardedRef}\n    data-spark-component=\"skeleton\"\n    role=\"presentation\"\n    className={skeletonStyles({ isAnimated, className })}\n    {...rest}\n  >\n    {children}\n\n    {label && <VisuallyHidden>{label}</VisuallyHidden>}\n  </div>\n)\n\nSkeleton.displayName = 'Skeleton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonItemStyles = cva(['bg-neutral/dim-4', 'min-h-lg min-w-lg'], {\n  variants: {\n    shape: {\n      line: ['w-full [&:last-child:not(:first-child)]:w-5/6', 'rounded-lg'],\n      rectangle: ['rounded-sm'],\n      circle: ['flex-none', 'rounded-full'],\n    },\n  },\n  defaultVariants: {\n    shape: 'rectangle',\n  },\n})\n\nexport const skeletonLineStyles = cva(['flex flex-col', 'w-full'], {\n  variants: {\n    gap: {\n      sm: 'gap-sm',\n      md: 'gap-md',\n      lg: 'gap-lg',\n      xl: 'gap-xl',\n      '2xl': 'gap-2xl',\n      '3xl': 'gap-3xl',\n    },\n  },\n  defaultVariants: {\n    gap: 'md',\n  },\n})\n\nexport type SkeletonItemStyleProps = ExcludeNull<VariantProps<typeof skeletonItemStyles>>\n","import { ComponentPropsWithRef, CSSProperties } from 'react'\n\nimport {\n  type SkeletonItemStyleProps,\n  skeletonItemStyles,\n  skeletonLineStyles,\n} from './SkeletonItem.styles'\n\ninterface SkeletonItemProps extends ComponentPropsWithRef<'div'>, SkeletonItemStyleProps {}\n\nexport type SkeletonRectangleProps = Omit<SkeletonItemProps, 'shape'> & {\n  width?: string | number\n  height?: string | number\n}\nexport type SkeletonCircleProps = Omit<SkeletonItemProps, 'shape'> & { size: string | number }\nexport type SkeletonLineProps = Omit<SkeletonItemProps, 'shape'> & {\n  lines?: number\n  /**\n   * Sets the gaps between group items.\n   */\n  gap?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'\n}\n\nconst getSizeValue = (size?: number | string): string | undefined => {\n  if (typeof size === 'number') return `${size}px`\n\n  return size\n}\n\nconst SkeletonItem = ({ shape, className, ref: forwardedRef, ...rest }: SkeletonItemProps) => {\n  return (\n    <div\n      ref={forwardedRef}\n      aria-hidden=\"true\"\n      className={skeletonItemStyles({ shape, className })}\n      {...rest}\n    />\n  )\n}\n\nexport const SkeletonRectangle = ({ width = '100%', height, ...rest }: SkeletonRectangleProps) => {\n  return (\n    <SkeletonItem\n      style={\n        {\n          '--skeleton-rect-width': getSizeValue(width),\n          '--skeleton-rect-height': getSizeValue(height),\n        } as CSSProperties\n      }\n      className=\"h-(--skeleton-rect-height) w-(--skeleton-rect-width)\"\n      {...rest}\n      shape=\"rectangle\"\n      data-shape=\"rectangle\"\n    />\n  )\n}\n\nexport const SkeletonCircle = ({ size, ...rest }: SkeletonCircleProps) => (\n  <SkeletonItem\n    style={{ '--skeleton-circle-size': getSizeValue(size) } as CSSProperties}\n    className=\"size-(--skeleton-circle-size)\"\n    {...rest}\n    shape=\"circle\"\n    data-shape=\"circle\"\n  />\n)\n\nexport const SkeletonLine = ({\n  lines = 1,\n  gap: gapProp,\n  className,\n  ...rest\n}: SkeletonLineProps) => {\n  const gap = gapProp || 'md'\n\n  return (\n    <div className={skeletonLineStyles({ gap, className })} aria-hidden=\"true\">\n      {[...new Array(lines)].map((_, index) => (\n        <SkeletonItem key={`line_${index}`} {...rest} shape=\"line\" data-shape=\"line\" />\n      ))}\n    </div>\n  )\n}\n\nSkeletonRectangle.displayName = 'Skeleton.Rectangle'\nSkeletonCircle.displayName = 'Skeleton.Circle'\nSkeletonLine.displayName = 'Skeleton.Line'\n","import { Skeleton as Root } from './Skeleton'\nimport {\n  SkeletonCircle as Circle,\n  SkeletonLine as Line,\n  SkeletonRectangle as Rectangle,\n} from './SkeletonItem'\n\nexport const Skeleton: typeof Root & {\n  Circle: typeof Circle\n  Line: typeof Line\n  Rectangle: typeof Rectangle\n} = Object.assign(Root, {\n  Circle,\n  Line,\n  Rectangle,\n})\n\nSkeleton.displayName = 'Skeleton'\nLine.displayName = 'Skeleton.Line'\nCircle.displayName = 'Skeleton.Circle'\nRectangle.displayName = 'Skeleton.Rectangle'\n\nexport type { SkeletonProps } from './Skeleton'\n"],"mappings":";;;;AAEA,IAAa,IAAiB,EAAI,EAAE,EAAE;CACpC,UAAU,EACR,YAAY;EACV,MAAM;GACJ;GACA;GACA;GACD;EACD,OAAO,EAAE;EACV,EACF;CACD,iBAAiB,EACf,YAAY,IACb;CACF,CAAC,ECCW,KAAY,EACvB,gBAAa,IACb,UACA,cACA,aACA,KAAK,GACL,GAAG,QAEH,kBAAC,OAAD;CACE,KAAK;CACL,wBAAqB;CACrB,MAAK;CACL,WAAW,EAAe;EAAE;EAAY;EAAW,CAAC;CACpD,GAAI;WALN,CAOG,GAEA,KAAS,kBAAC,GAAD,EAAA,UAAiB,GAAuB,CAAA,CAC9C;;AAGR,EAAS,cAAc;;;ACpCvB,IAAa,IAAqB,EAAI,CAAC,oBAAoB,oBAAoB,EAAE;CAC/E,UAAU,EACR,OAAO;EACL,MAAM,CAAC,iDAAiD,aAAa;EACrE,WAAW,CAAC,aAAa;EACzB,QAAQ,CAAC,aAAa,eAAe;EACtC,EACF;CACD,iBAAiB,EACf,OAAO,aACR;CACF,CAAC,EAEW,IAAqB,EAAI,CAAC,iBAAiB,SAAS,EAAE;CACjE,UAAU,EACR,KAAK;EACH,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;EACP,OAAO;EACR,EACF;CACD,iBAAiB,EACf,KAAK,MACN;CACF,CAAC,ECNI,KAAgB,MAChB,OAAO,KAAS,WAAiB,GAAG,EAAK,MAEtC,GAGH,KAAgB,EAAE,UAAO,cAAW,KAAK,GAAc,GAAG,QAE5D,kBAAC,OAAD;CACE,KAAK;CACL,eAAY;CACZ,WAAW,EAAmB;EAAE;EAAO;EAAW,CAAC;CACnD,GAAI;CACJ,CAAA,EAIO,KAAqB,EAAE,WAAQ,QAAQ,WAAQ,GAAG,QAE3D,kBAAC,GAAD;CACE,OACE;EACE,yBAAyB,EAAa,EAAM;EAC5C,0BAA0B,EAAa,EAAO;EAC/C;CAEH,WAAU;CACV,GAAI;CACJ,OAAM;CACN,cAAW;CACX,CAAA,EAIO,KAAkB,EAAE,SAAM,GAAG,QACxC,kBAAC,GAAD;CACE,OAAO,EAAE,0BAA0B,EAAa,EAAK,EAAE;CACvD,WAAU;CACV,GAAI;CACJ,OAAM;CACN,cAAW;CACX,CAAA,EAGS,KAAgB,EAC3B,WAAQ,GACR,KAAK,GACL,cACA,GAAG,QAKD,kBAAC,OAAD;CAAK,WAAW,EAAmB;EAAE,KAH3B,KAAW;EAGqB;EAAW,CAAC;CAAE,eAAY;WACjE,CAAC,GAAO,MAAM,EAAM,CAAC,CAAC,KAAK,GAAG,MAC7B,kBAAC,GAAD;EAAoC,GAAI;EAAM,OAAM;EAAO,cAAW;EAAS,EAA5D,QAAQ,IAAoD,CAC/E;CACE,CAAA;AAIV,EAAkB,cAAc,sBAChC,EAAe,cAAc,mBAC7B,EAAa,cAAc;;;AC/E3B,IAAa,IAIT,OAAO,OAAO,GAAM;CACtB,QAAA;CACA,MAAA;CACA,WAAA;CACD,CAAC;AAEF,EAAS,cAAc,YACvB,EAAK,cAAc,iBACnB,EAAO,cAAc,mBACrB,EAAU,cAAc"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/skeleton/Skeleton.styles.ts","../../src/skeleton/Skeleton.tsx","../../src/skeleton/SkeletonItem.styles.ts","../../src/skeleton/SkeletonItem.tsx","../../src/skeleton/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonStyles = cva([], {\n  variants: {\n    isAnimated: {\n      true: [\n        '[mask-image:linear-gradient(90deg,#000_40%,rgba(0,0,0,.3)_60%,#000_100%)]',\n        '[mask-size:200%_100%]',\n        'animate-standalone-shimmer motion-reduce:animate-none!',\n      ],\n      false: [],\n    },\n  },\n  defaultVariants: {\n    isAnimated: true,\n  },\n})\n\nexport type SkeletonStyleProps = ExcludeNull<VariantProps<typeof skeletonStyles>>\n","import { ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { type SkeletonStyleProps, skeletonStyles } from './Skeleton.styles'\n\nexport interface SkeletonProps extends ComponentPropsWithRef<'div'>, SkeletonStyleProps {\n  /**\n   * Displays an animated light effect.\n   * @default true\n   */\n  isAnimated?: boolean\n  /**\n   * Adds an accessible fallback label.\n   */\n  label?: string\n}\n\nexport const Skeleton = ({\n  isAnimated = true,\n  label,\n  className,\n  children,\n  ref: forwardedRef,\n  ...rest\n}: PropsWithChildren<SkeletonProps>) => (\n  <div\n    ref={forwardedRef}\n    data-spark-component=\"skeleton\"\n    role=\"presentation\"\n    className={skeletonStyles({ isAnimated, className })}\n    {...rest}\n  >\n    {children}\n\n    {label && <VisuallyHidden>{label}</VisuallyHidden>}\n  </div>\n)\n\nSkeleton.displayName = 'Skeleton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonItemStyles = cva(['bg-neutral/dim-4', 'min-h-lg min-w-lg'], {\n  variants: {\n    shape: {\n      line: ['w-full [&:last-child:not(:first-child)]:w-5/6', 'rounded-lg'],\n      rectangle: ['rounded-sm'],\n      circle: ['flex-none', 'rounded-full'],\n    },\n  },\n  defaultVariants: {\n    shape: 'rectangle',\n  },\n})\n\nexport const skeletonLineStyles = cva(['flex flex-col', 'w-full'], {\n  variants: {\n    gap: {\n      sm: 'gap-sm',\n      md: 'gap-md',\n      lg: 'gap-lg',\n      xl: 'gap-xl',\n      '2xl': 'gap-2xl',\n      '3xl': 'gap-3xl',\n    },\n  },\n  defaultVariants: {\n    gap: 'md',\n  },\n})\n\nexport type SkeletonItemStyleProps = ExcludeNull<VariantProps<typeof skeletonItemStyles>>\n","import { ComponentPropsWithRef, CSSProperties } from 'react'\n\nimport {\n  type SkeletonItemStyleProps,\n  skeletonItemStyles,\n  skeletonLineStyles,\n} from './SkeletonItem.styles'\n\ninterface SkeletonItemProps extends ComponentPropsWithRef<'div'>, SkeletonItemStyleProps {}\n\nexport type SkeletonRectangleProps = Omit<SkeletonItemProps, 'shape'> & {\n  width?: string | number\n  height?: string | number\n}\nexport type SkeletonCircleProps = Omit<SkeletonItemProps, 'shape'> & { size: string | number }\nexport type SkeletonLineProps = Omit<SkeletonItemProps, 'shape'> & {\n  lines?: number\n  /**\n   * Sets the gaps between group items.\n   */\n  gap?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'\n}\n\nconst getSizeValue = (size?: number | string): string | undefined => {\n  if (typeof size === 'number') return `${size}px`\n\n  return size\n}\n\nconst SkeletonItem = ({ shape, className, ref: forwardedRef, ...rest }: SkeletonItemProps) => {\n  return (\n    <div\n      ref={forwardedRef}\n      aria-hidden=\"true\"\n      className={skeletonItemStyles({ shape, className })}\n      {...rest}\n    />\n  )\n}\n\nexport const SkeletonRectangle = ({ width = '100%', height, ...rest }: SkeletonRectangleProps) => {\n  return (\n    <SkeletonItem\n      style={\n        {\n          '--skeleton-rect-width': getSizeValue(width),\n          '--skeleton-rect-height': getSizeValue(height),\n        } as CSSProperties\n      }\n      className=\"h-(--skeleton-rect-height) w-(--skeleton-rect-width)\"\n      {...rest}\n      shape=\"rectangle\"\n      data-shape=\"rectangle\"\n    />\n  )\n}\n\nexport const SkeletonCircle = ({ size, ...rest }: SkeletonCircleProps) => (\n  <SkeletonItem\n    style={{ '--skeleton-circle-size': getSizeValue(size) } as CSSProperties}\n    className=\"size-(--skeleton-circle-size)\"\n    {...rest}\n    shape=\"circle\"\n    data-shape=\"circle\"\n  />\n)\n\nexport const SkeletonLine = ({\n  lines = 1,\n  gap: gapProp,\n  className,\n  ...rest\n}: SkeletonLineProps) => {\n  const gap = gapProp || 'md'\n\n  return (\n    <div className={skeletonLineStyles({ gap, className })} aria-hidden=\"true\">\n      {[...new Array(lines)].map((_, index) => (\n        <SkeletonItem key={`line_${index}`} {...rest} shape=\"line\" data-shape=\"line\" />\n      ))}\n    </div>\n  )\n}\n\nSkeletonRectangle.displayName = 'Skeleton.Rectangle'\nSkeletonCircle.displayName = 'Skeleton.Circle'\nSkeletonLine.displayName = 'Skeleton.Line'\n","import { Skeleton as Root } from './Skeleton'\nimport {\n  SkeletonCircle as Circle,\n  SkeletonLine as Line,\n  SkeletonRectangle as Rectangle,\n} from './SkeletonItem'\n\n/**\n * A placeholder component that displays a loading state with animated shimmer effect.\n */\nexport const Skeleton: typeof Root & {\n  Circle: typeof Circle\n  Line: typeof Line\n  Rectangle: typeof Rectangle\n} = Object.assign(Root, {\n  Circle,\n  Line,\n  Rectangle,\n})\n\nSkeleton.displayName = 'Skeleton'\nLine.displayName = 'Skeleton.Line'\nCircle.displayName = 'Skeleton.Circle'\nRectangle.displayName = 'Skeleton.Rectangle'\n\nexport type { SkeletonProps } from './Skeleton'\n"],"mappings":";;;;AAEA,IAAa,IAAiB,EAAI,EAAE,EAAE;CACpC,UAAU,EACR,YAAY;EACV,MAAM;GACJ;GACA;GACA;GACD;EACD,OAAO,EAAE;EACV,EACF;CACD,iBAAiB,EACf,YAAY,IACb;CACF,CAAC,ECCW,KAAY,EACvB,gBAAa,IACb,UACA,cACA,aACA,KAAK,GACL,GAAG,QAEH,kBAAC,OAAD;CACE,KAAK;CACL,wBAAqB;CACrB,MAAK;CACL,WAAW,EAAe;EAAE;EAAY;EAAW,CAAC;CACpD,GAAI;WALN,CAOG,GAEA,KAAS,kBAAC,GAAD,EAAA,UAAiB,GAAuB,CAAA,CAC9C;;AAGR,EAAS,cAAc;;;ACpCvB,IAAa,IAAqB,EAAI,CAAC,oBAAoB,oBAAoB,EAAE;CAC/E,UAAU,EACR,OAAO;EACL,MAAM,CAAC,iDAAiD,aAAa;EACrE,WAAW,CAAC,aAAa;EACzB,QAAQ,CAAC,aAAa,eAAe;EACtC,EACF;CACD,iBAAiB,EACf,OAAO,aACR;CACF,CAAC,EAEW,IAAqB,EAAI,CAAC,iBAAiB,SAAS,EAAE;CACjE,UAAU,EACR,KAAK;EACH,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;EACP,OAAO;EACR,EACF;CACD,iBAAiB,EACf,KAAK,MACN;CACF,CAAC,ECNI,KAAgB,MAChB,OAAO,KAAS,WAAiB,GAAG,EAAK,MAEtC,GAGH,KAAgB,EAAE,UAAO,cAAW,KAAK,GAAc,GAAG,QAE5D,kBAAC,OAAD;CACE,KAAK;CACL,eAAY;CACZ,WAAW,EAAmB;EAAE;EAAO;EAAW,CAAC;CACnD,GAAI;CACJ,CAAA,EAIO,KAAqB,EAAE,WAAQ,QAAQ,WAAQ,GAAG,QAE3D,kBAAC,GAAD;CACE,OACE;EACE,yBAAyB,EAAa,EAAM;EAC5C,0BAA0B,EAAa,EAAO;EAC/C;CAEH,WAAU;CACV,GAAI;CACJ,OAAM;CACN,cAAW;CACX,CAAA,EAIO,KAAkB,EAAE,SAAM,GAAG,QACxC,kBAAC,GAAD;CACE,OAAO,EAAE,0BAA0B,EAAa,EAAK,EAAE;CACvD,WAAU;CACV,GAAI;CACJ,OAAM;CACN,cAAW;CACX,CAAA,EAGS,KAAgB,EAC3B,WAAQ,GACR,KAAK,GACL,cACA,GAAG,QAKD,kBAAC,OAAD;CAAK,WAAW,EAAmB;EAAE,KAH3B,KAAW;EAGqB;EAAW,CAAC;CAAE,eAAY;WACjE,CAAC,GAAO,MAAM,EAAM,CAAC,CAAC,KAAK,GAAG,MAC7B,kBAAC,GAAD;EAAoC,GAAI;EAAM,OAAM;EAAO,cAAW;EAAS,EAA5D,QAAQ,IAAoD,CAC/E;CACE,CAAA;AAIV,EAAkB,cAAc,sBAChC,EAAe,cAAc,mBAC7B,EAAa,cAAc;;;AC5E3B,IAAa,IAIT,OAAO,OAAO,GAAM;CACtB,QAAA;CACA,MAAA;CACA,WAAA;CACD,CAAC;AAEF,EAAS,cAAc,YACvB,EAAK,cAAc,iBACnB,EAAO,cAAc,mBACrB,EAAU,cAAc"}

package/dist/slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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.js","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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"}