@spark-ui/components 13.1.2 → 13.1.4

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","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:\n    | 'main'\n    | 'support'\n    | 'basic'\n    | 'accent'\n    | 'success'\n    | 'alert'\n    | 'danger'\n    | 'info'\n    | '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 'basic':\n        return 'var(--color-basic)'\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?:\n    | 'main'\n    | 'support'\n    | 'basic'\n    | 'accent'\n    | 'success'\n    | 'alert'\n    | 'danger'\n    | 'info'\n    | '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"],"names":["SegmentedGaugeContext","createContext","useSegmentedGaugeContext","context","useContext","SegmentedGaugeLabel","className","children","ref","id","props","labelId","jsx","cx","SegmentedGaugeSegment","index","size","intent","customColor","currentIndex","isActive","isCurrent","gaugeColor","useMemo","segmentClasses","indicatorClasses","jsxs","SegmentedGaugeTrack","calculateCurrentIndex","value","min","max","segments","normalizedValue","segmentSize","rawIndex","SegmentedGauge","description","ariaLabel","internalLabelId","useId","generatedId","gaugeId","segmentsData","_","contextValue","roleProps","Fragment","Root"],"mappings":"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"}
+{"version":3,"sources":["../../src/segmented-gauge/index.ts","../../src/segmented-gauge/SegmentedGauge.tsx","../../src/segmented-gauge/SegmentedGaugeContext.tsx","../../src/segmented-gauge/SegmentedGaugeLabel.tsx","../../src/segmented-gauge/SegmentedGaugeSegment.tsx","../../src/segmented-gauge/SegmentedGaugeTrack.tsx"],"sourcesContent":["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","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?:\n    | 'main'\n    | 'support'\n    | 'basic'\n    | 'accent'\n    | 'success'\n    | 'alert'\n    | 'danger'\n    | 'info'\n    | '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 { 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:\n    | 'main'\n    | 'support'\n    | 'basic'\n    | 'accent'\n    | 'success'\n    | 'alert'\n    | 'danger'\n    | 'info'\n    | '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 'basic':\n        return 'var(--color-basic)'\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"],"mappings":"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","names":["SegmentedGauge","import_class_variance_authority","import_react","import_class_variance_authority","import_react","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","import_jsx_runtime","SegmentedGauge"]}

package/dist/segmented-gauge/index.mjs

@@ -1,44 +1,63 @@
-import { jsx as d, jsxs as I, Fragment as P } from "react/jsx-runtime";
-import { a as p } from "../index-BmAFn37q.mjs";
-import { createContext as V, useContext as _, useMemo as h, useId as z } from "react";
-const k = V(null), w = () => {
-  const e = _(k);
-  if (!e)
+// src/segmented-gauge/SegmentedGauge.tsx
+import { cx as cx4 } from "class-variance-authority";
+import { useId, useMemo as useMemo2 } from "react";
+
+// src/segmented-gauge/SegmentedGaugeContext.tsx
+import { createContext, useContext } from "react";
+var SegmentedGaugeContext = createContext(null);
+var useSegmentedGaugeContext = () => {
+  const context = useContext(SegmentedGaugeContext);
+  if (!context) {
     throw new Error("useSegmentedGaugeContext must be used within a SegmentedGauge provider");
-  return e;
-}, G = ({
-  className: e,
-  children: a,
-  ref: t,
-  id: r,
-  ...o
+  }
+  return context;
+};
+
+// src/segmented-gauge/SegmentedGaugeLabel.tsx
+import { cx } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var SegmentedGaugeLabel = ({
+  className,
+  children,
+  ref,
+  id,
+  ...props
 }) => {
-  const { labelId: n } = w();
-  return /* @__PURE__ */ d(
+  const { labelId } = useSegmentedGaugeContext();
+  return /* @__PURE__ */ jsx(
     "span",
     {
       "data-spark-component": "segmented-gauge-label",
       "data-testid": "segmented-gauge-label",
-      ref: t,
-      id: r || n,
-      className: p("default:text-on-surface default:text-body-2", e),
-      ...o,
-      children: a
+      ref,
+      id: id || labelId,
+      className: cx("default:text-on-surface default:text-body-2", className),
+      ...props,
+      children
     }
   );
 };
-G.displayName = "SegmentedGauge.Label";
-const x = ({
-  index: e = 0,
-  className: a,
-  children: t,
-  ref: r,
-  ...o
+SegmentedGaugeLabel.displayName = "SegmentedGauge.Label";
+
+// src/segmented-gauge/SegmentedGaugeSegment.tsx
+import { cx as cx2 } from "class-variance-authority";
+import { useMemo } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SegmentedGaugeSegment = ({
+  index = 0,
+  className,
+  children,
+  ref,
+  ...props
 }) => {
-  const { size: n, intent: u, customColor: s, currentIndex: g } = w(), m = g !== -1 && e <= g, b = g !== -1 && e === g, f = h(() => {
-    if (s)
-      return s;
-    switch (u) {
+  const { size, intent, customColor, currentIndex } = useSegmentedGaugeContext();
+  const isActive = currentIndex !== -1 && index <= currentIndex;
+  const isCurrent = currentIndex !== -1 && index === currentIndex;
+  const gaugeColor = useMemo(() => {
+    if (customColor) {
+      return customColor;
+    }
+    switch (intent) {
       case "main":
         return "var(--color-main)";
       case "support":
@@ -60,142 +79,169 @@ const x = ({
       default:
         return "var(--color-neutral)";
     }
-  }, [u, s]), N = p(
+  }, [intent, customColor]);
+  const segmentClasses = cx2(
     "border-outline relative rounded-full",
     {
-      "h-sz-8 w-sz-24": n === "sm",
-      "h-sz-12 w-sz-36": n === "md",
-      "default:bg-[var(--gauge-color)]": m,
-      "border-sm bg-surface": !m
+      "h-sz-8 w-sz-24": size === "sm",
+      "h-sz-12 w-sz-36": size === "md",
+      "default:bg-[var(--gauge-color)]": isActive,
+      "border-sm bg-surface": !isActive
     },
-    a
-  ), l = p(
+    className
+  );
+  const indicatorClasses = cx2(
     "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
     "default:bg-surface default:rounded-full",
     "border-[var(--gauge-color)]",
     {
-      "size-sz-12 border-md": n === "sm",
-      "size-sz-20 border-lg": n === "md"
+      "size-sz-12 border-md": size === "sm",
+      "size-sz-20 border-lg": size === "md"
     }
   );
-  return /* @__PURE__ */ I(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-spark-component": "segmented-gauge-segment",
       "data-testid": "segmented-gauge-segment",
-      "data-active": m,
-      "data-current": b,
-      ref: r,
+      "data-active": isActive,
+      "data-current": isCurrent,
+      ref,
       style: {
-        "--gauge-color": f
+        "--gauge-color": gaugeColor
       },
-      className: N,
-      ...o,
+      className: segmentClasses,
+      ...props,
       children: [
-        t,
-        b && /* @__PURE__ */ d("div", { className: l, "aria-hidden": "true" })
+        children,
+        isCurrent && /* @__PURE__ */ jsx2("div", { className: indicatorClasses, "aria-hidden": "true" })
       ]
     }
   );
 };
-x.displayName = "SegmentedGauge.Segment";
-const y = ({
-  className: e,
-  children: a,
-  ref: t,
-  ...r
-}) => /* @__PURE__ */ d(
-  "div",
-  {
-    "data-spark-component": "segmented-gauge-track",
-    ref: t,
-    className: p("gap-sm relative flex rounded-full", e),
-    ...r,
-    children: a
-  }
-);
-y.displayName = "SegmentedGauge.Track";
-const $ = (e, a, t, r) => {
-  if (e == null)
+SegmentedGaugeSegment.displayName = "SegmentedGauge.Segment";
+
+// src/segmented-gauge/SegmentedGaugeTrack.tsx
+import { cx as cx3 } from "class-variance-authority";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SegmentedGaugeTrack = ({
+  className,
+  children,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-spark-component": "segmented-gauge-track",
+      ref,
+      className: cx3("gap-sm relative flex rounded-full", className),
+      ...props,
+      children
+    }
+  );
+};
+SegmentedGaugeTrack.displayName = "SegmentedGauge.Track";
+
+// src/segmented-gauge/SegmentedGauge.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var calculateCurrentIndex = (value, min, max, segments) => {
+  if (value == null) {
     return -1;
-  const o = Math.max(a, Math.min(t, e)), u = (t - a) / (r - 1), s = (o - a) / u;
-  return Math.max(0, Math.min(r - 1, Math.round(s)));
-}, M = ({
-  value: e,
-  min: a,
-  max: t,
-  description: r,
-  size: o = "md",
-  intent: n = "neutral",
-  customColor: u,
-  id: s,
-  "aria-label": g,
-  className: m,
-  ref: b,
-  children: f,
-  ...N
+  }
+  const normalizedValue = Math.max(min, Math.min(max, value));
+  const range = max - min;
+  const segmentSize = range / (segments - 1);
+  const rawIndex = (normalizedValue - min) / segmentSize;
+  return Math.max(0, Math.min(segments - 1, Math.round(rawIndex)));
+};
+var SegmentedGauge = ({
+  value,
+  min,
+  max,
+  description,
+  size = "md",
+  intent = "neutral",
+  customColor,
+  id,
+  "aria-label": ariaLabel,
+  className,
+  ref,
+  children,
+  ...props
 }) => {
-  const l = t - a + 1, c = h(
-    () => $(e, a, t, l),
-    [e, a, t, l]
-  ), v = z(), L = z(), S = s || L, C = h(() => Array.from({ length: l }, (A, i) => ({
-    isActive: c !== -1 && i <= c,
-    isCurrent: c !== -1 && i === c
-  })), [l, c]), T = h(
+  const segments = max - min + 1;
+  const currentIndex = useMemo2(
+    () => calculateCurrentIndex(value, min, max, segments),
+    [value, min, max, segments]
+  );
+  const internalLabelId = useId();
+  const generatedId = useId();
+  const gaugeId = id || generatedId;
+  const segmentsData = useMemo2(() => {
+    return Array.from({ length: segments }, (_, index) => ({
+      isActive: currentIndex !== -1 && index <= currentIndex,
+      isCurrent: currentIndex !== -1 && index === currentIndex
+    }));
+  }, [segments, currentIndex]);
+  const contextValue = useMemo2(
     () => ({
-      value: e,
-      min: a,
-      max: t,
-      segments: l,
-      currentIndex: c,
-      size: o,
-      intent: n,
-      customColor: u,
-      labelId: v,
-      gaugeId: S
+      value,
+      min,
+      max,
+      segments,
+      currentIndex,
+      size,
+      intent,
+      customColor,
+      labelId: internalLabelId,
+      gaugeId
     }),
-    [e, a, t, l, c, o, n, u, v, S]
-  ), j = e != null ? {
+    [value, min, max, segments, currentIndex, size, intent, customColor, internalLabelId, gaugeId]
+  );
+  const roleProps = value != null ? {
     role: "meter",
-    "aria-valuenow": e,
-    "aria-valuemin": a,
-    "aria-valuemax": t
+    "aria-valuenow": value,
+    "aria-valuemin": min,
+    "aria-valuemax": max
   } : {
     role: "status"
   };
-  return /* @__PURE__ */ d(k.Provider, { value: T, children: /* @__PURE__ */ d(
+  return /* @__PURE__ */ jsx4(SegmentedGaugeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx4(
     "div",
     {
-      id: S,
+      id: gaugeId,
       "data-spark-component": "segmented-gauge",
-      ref: b,
-      className: p("gap-md flex flex-wrap items-center", m),
-      ...j,
-      "aria-labelledby": s ? `${S}-label` : void 0,
-      "aria-label": s ? void 0 : g,
-      "aria-describedby": v,
-      ...N,
-      children: f ? f({
-        segments: C,
-        currentIndex: c
-      }) : /* @__PURE__ */ I(P, { children: [
-        /* @__PURE__ */ d(y, { children: C.map((A, i) => /* @__PURE__ */ d(x, { index: i }, i)) }),
-        r && /* @__PURE__ */ d(G, { id: v, children: r })
+      ref,
+      className: cx4("gap-md flex flex-wrap items-center", className),
+      ...roleProps,
+      "aria-labelledby": id ? `${gaugeId}-label` : void 0,
+      "aria-label": !id ? ariaLabel : void 0,
+      "aria-describedby": internalLabelId,
+      ...props,
+      children: children ? children({
+        segments: segmentsData,
+        currentIndex
+      }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx4(SegmentedGaugeTrack, { children: segmentsData.map((_, index) => /* @__PURE__ */ jsx4(SegmentedGaugeSegment, { index }, index)) }),
+        description && /* @__PURE__ */ jsx4(SegmentedGaugeLabel, { id: internalLabelId, children: description })
       ] })
     }
   ) });
 };
-M.displayName = "SegmentedGauge";
-const D = Object.assign(M, {
-  Track: y,
-  Segment: x,
-  Label: G
+SegmentedGauge.displayName = "SegmentedGauge";
+
+// src/segmented-gauge/index.ts
+var SegmentedGauge2 = Object.assign(SegmentedGauge, {
+  Track: SegmentedGaugeTrack,
+  Segment: SegmentedGaugeSegment,
+  Label: SegmentedGaugeLabel
 });
-D.displayName = "SegmentedGauge";
-y.displayName = "SegmentedGauge.Track";
-x.displayName = "SegmentedGauge.Segment";
-G.displayName = "SegmentedGauge.Label";
+SegmentedGauge2.displayName = "SegmentedGauge";
+SegmentedGaugeTrack.displayName = "SegmentedGauge.Track";
+SegmentedGaugeSegment.displayName = "SegmentedGauge.Segment";
+SegmentedGaugeLabel.displayName = "SegmentedGauge.Label";
 export {
-  D as SegmentedGauge
+  SegmentedGauge2 as SegmentedGauge
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","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:\n    | 'main'\n    | 'support'\n    | 'basic'\n    | 'accent'\n    | 'success'\n    | 'alert'\n    | 'danger'\n    | 'info'\n    | '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 'basic':\n        return 'var(--color-basic)'\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?:\n    | 'main'\n    | 'support'\n    | 'basic'\n    | 'accent'\n    | 'success'\n    | 'alert'\n    | 'danger'\n    | 'info'\n    | '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"],"names":["SegmentedGaugeContext","createContext","useSegmentedGaugeContext","context","useContext","SegmentedGaugeLabel","className","children","ref","id","props","labelId","jsx","cx","SegmentedGaugeSegment","index","size","intent","customColor","currentIndex","isActive","isCurrent","gaugeColor","useMemo","segmentClasses","indicatorClasses","jsxs","SegmentedGaugeTrack","calculateCurrentIndex","value","min","max","segments","normalizedValue","segmentSize","rawIndex","SegmentedGauge","description","ariaLabel","internalLabelId","useId","generatedId","gaugeId","segmentsData","_","contextValue","roleProps","Fragment","Root"],"mappings":"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"}
+{"version":3,"sources":["../../src/segmented-gauge/SegmentedGauge.tsx","../../src/segmented-gauge/SegmentedGaugeContext.tsx","../../src/segmented-gauge/SegmentedGaugeLabel.tsx","../../src/segmented-gauge/SegmentedGaugeSegment.tsx","../../src/segmented-gauge/SegmentedGaugeTrack.tsx","../../src/segmented-gauge/index.ts"],"sourcesContent":["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?:\n    | 'main'\n    | 'support'\n    | 'basic'\n    | 'accent'\n    | 'success'\n    | 'alert'\n    | 'danger'\n    | 'info'\n    | '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 { 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:\n    | 'main'\n    | 'support'\n    | 'basic'\n    | 'accent'\n    | 'success'\n    | 'alert'\n    | 'danger'\n    | 'info'\n    | '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 'basic':\n        return 'var(--color-basic)'\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 { 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":";AAAA,SAAS,MAAAA,WAAU;AACnB,SAAc,OAAO,WAAAC,gBAAe;;;ACDpC,SAAS,eAAe,kBAAkB;AAwBnC,IAAM,wBAAwB,cAAiD,IAAI;AAEnF,IAAM,2BAA2B,MAAM;AAC5C,QAAM,UAAU,WAAW,qBAAqB;AAEhD,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,wEAAwE;AAAA,EAC1F;AAEA,SAAO;AACT;;;AClCA,SAAS,UAAU;AAoBf;AAVG,IAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgC;AAC9B,QAAM,EAAE,QAAQ,IAAI,yBAAyB;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,wBAAqB;AAAA,MACrB,eAAY;AAAA,MACZ;AAAA,MACA,IAAI,MAAM;AAAA,MACV,WAAW,GAAG,+CAA+C,SAAS;AAAA,MACrE,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,oBAAoB,cAAc;;;ACjClC,SAAS,MAAAC,WAAU;AACnB,SAA8B,eAAe;AA8EzC,SAegB,OAAAC,MAfhB;AAlEG,IAAM,wBAAwB,CAAC;AAAA,EACpC,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAkC;AAChC,QAAM,EAAE,MAAM,QAAQ,aAAa,aAAa,IAAI,yBAAyB;AAG7E,QAAM,WAAW,iBAAiB,MAAM,SAAS;AACjD,QAAM,YAAY,iBAAiB,MAAM,UAAU;AAEnD,QAAM,aAAa,QAAQ,MAAM;AAE/B,QAAI,aAAa;AACf,aAAO;AAAA,IACT;AAGA,YAAQ,QAAQ;AAAA,MACd,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IACX;AAAA,EACF,GAAG,CAAC,QAAQ,WAAW,CAAC;AAExB,QAAM,iBAAiBC;AAAA,IACrB;AAAA,IACA;AAAA,MACE,kBAAkB,SAAS;AAAA,MAC3B,mBAAmB,SAAS;AAAA,MAC5B,mCAAmC;AAAA,MACnC,wBAAwB,CAAC;AAAA,IAC3B;AAAA,IACA;AAAA,EACF;AAEA,QAAM,mBAAmBA;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,wBAAwB,SAAS;AAAA,MACjC,wBAAwB,SAAS;AAAA,IACnC;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,wBAAqB;AAAA,MACrB,eAAY;AAAA,MACZ,eAAa;AAAA,MACb,gBAAc;AAAA,MACd;AAAA,MACA,OACE;AAAA,QACE,iBAAiB;AAAA,MACnB;AAAA,MAEF,WAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,aAAa,gBAAAD,KAAC,SAAI,WAAW,kBAAkB,eAAY,QAAO;AAAA;AAAA;AAAA,EACrE;AAEJ;AAEA,sBAAsB,cAAc;;;ACnGpC,SAAS,MAAAE,WAAU;AAcf,gBAAAC,YAAA;AAPG,IAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgC;AAC9B,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,wBAAqB;AAAA,MACrB;AAAA,MACA,WAAWD,IAAG,qCAAqC,SAAS;AAAA,MAC3D,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,oBAAoB,cAAc;;;AJ8JxB,mBAGM,OAAAE,MAHN,QAAAC,aAAA;AA/KV,IAAM,wBAAwB,CAC5B,OACA,KACA,KACA,aACG;AAEH,MAAI,SAAS,MAAM;AACjB,WAAO;AAAA,EACT;AACA,QAAM,kBAAkB,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AAC1D,QAAM,QAAQ,MAAM;AACpB,QAAM,cAAc,SAAS,WAAW;AACxC,QAAM,YAAY,kBAAkB,OAAO;AAG3C,SAAO,KAAK,IAAI,GAAG,KAAK,IAAI,WAAW,GAAG,KAAK,MAAM,QAAQ,CAAC,CAAC;AACjE;AAyEO,IAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AAEzB,QAAM,WAAW,MAAM,MAAM;AAC7B,QAAM,eAAeC;AAAA,IACnB,MAAM,sBAAsB,OAAO,KAAK,KAAK,QAAQ;AAAA,IACrD,CAAC,OAAO,KAAK,KAAK,QAAQ;AAAA,EAC5B;AAGA,QAAM,kBAAkB,MAAM;AAC9B,QAAM,cAAc,MAAM;AAE1B,QAAM,UAAU,MAAM;AAEtB,QAAM,eAAeA,SAAQ,MAAM;AACjC,WAAO,MAAM,KAAK,EAAE,QAAQ,SAAS,GAAG,CAAC,GAAG,WAAW;AAAA,MACrD,UAAU,iBAAiB,MAAM,SAAS;AAAA,MAC1C,WAAW,iBAAiB,MAAM,UAAU;AAAA,IAC9C,EAAE;AAAA,EACJ,GAAG,CAAC,UAAU,YAAY,CAAC;AAE3B,QAAM,eAAeA;AAAA,IACnB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,IACF;AAAA,IACA,CAAC,OAAO,KAAK,KAAK,UAAU,cAAc,MAAM,QAAQ,aAAa,iBAAiB,OAAO;AAAA,EAC/F;AAKA,QAAM,YACJ,SAAS,OACL;AAAA,IACE,MAAM;AAAA,IACN,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,EACnB,IACA;AAAA,IACE,MAAM;AAAA,EACR;AAEN,SACE,gBAAAF,KAAC,sBAAsB,UAAtB,EAA+B,OAAO,cACrC,0BAAAA;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,wBAAqB;AAAA,MACrB;AAAA,MACA,WAAWG,IAAG,sCAAsC,SAAS;AAAA,MAC5D,GAAG;AAAA,MACJ,mBAAiB,KAAK,GAAG,OAAO,WAAW;AAAA,MAC3C,cAAY,CAAC,KAAK,YAAY;AAAA,MAC9B,oBAAkB;AAAA,MACjB,GAAG;AAAA,MAEH,qBACC,SAAS;AAAA,QACP,UAAU;AAAA,QACV;AAAA,MACF,CAAC,IAED,gBAAAF,MAAA,YACE;AAAA,wBAAAD,KAAC,uBACE,uBAAa,IAAI,CAAC,GAAG,UACpB,gBAAAA,KAAC,yBAAkC,SAAP,KAAqB,CAClD,GACH;AAAA,QAEC,eACC,gBAAAA,KAAC,uBAAoB,IAAI,iBAAkB,uBAAY;AAAA,SAE3D;AAAA;AAAA,EAEJ,GACF;AAEJ;AAEA,eAAe,cAAc;;;AKnMtB,IAAMI,kBAIT,OAAO,OAAO,gBAAM;AAAA,EACtB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AACT,CAAC;AAEDA,gBAAe,cAAc;AAC7B,oBAAoB,cAAc;AAClC,sBAAsB,cAAc;AACpC,oBAAoB,cAAc;","names":["cx","useMemo","cx","jsx","cx","cx","jsx","jsx","jsxs","useMemo","cx","SegmentedGauge"]}