@spark-ui/components 11.1.0 → 11.1.1

package/dist/scrolling-list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/scrolling-list/index.ts","../../src/scrolling-list/ScrollingList.tsx","../../src/scrolling-list/ScrollingListControls.tsx","../../src/scrolling-list/ScrollingListItem.tsx","../../src/slot/Slot.tsx","../../src/scrolling-list/useFocusWithinScroll.tsx","../../src/scrolling-list/ScrollingListItems.tsx","../../src/scrolling-list/ScrollingListNextButton.tsx","../../src/icon/Icon.tsx","../../src/visually-hidden/VisuallyHidden.tsx","../../src/icon/Icon.styles.tsx","../../src/button/Button.tsx","../../src/spinner/Spinner.styles.tsx","../../src/spinner/Spinner.tsx","../../src/button/Button.styles.tsx","../../src/button/variants/filled.ts","../../src/button/variants/ghost.ts","../../src/button/variants/outlined.ts","../../src/button/variants/tinted.ts","../../src/button/variants/contrast.ts","../../src/icon-button/IconButton.styles.tsx","../../src/icon-button/IconButton.tsx","../../src/scrolling-list/ScrollingListPrevButton.tsx","../../src/scrolling-list/ScrollingListSkipButton.tsx"],"sourcesContent":["import { ScrollingList as Root } from './ScrollingList'\nimport { ScrollingListControls as Controls } from './ScrollingListControls'\nimport { ScrollingListItem as Item } from './ScrollingListItem'\nimport { ScrollingListItems as Items } from './ScrollingListItems'\nimport { ScrollingListNextButton as NextButton } from './ScrollingListNextButton'\nimport { ScrollingListPrevButton as PrevButton } from './ScrollingListPrevButton'\nimport { ScrollingListSkipButton as SkipButton } from './ScrollingListSkipButton'\n\nexport const ScrollingList: typeof Root & {\n  Controls: typeof Controls\n  NextButton: typeof NextButton\n  PrevButton: typeof PrevButton\n  Item: typeof Item\n  Items: typeof Items\n  SkipButton: typeof SkipButton\n} = Object.assign(Root, {\n  Controls,\n  NextButton,\n  PrevButton,\n  Item,\n  Items,\n  SkipButton,\n})\n\nScrollingList.displayName = 'ScrollingList'\n","import { ScrollOverflow, useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { cx } from 'class-variance-authority'\nimport {\n  ComponentPropsWithRef,\n  createContext,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n} from 'react'\nimport { SnapCarouselResult, useSnapCarousel } from 'react-snap-carousel'\n\ntype SnapType = 'mandatory' | 'proximity' | 'none'\ntype ScrollBehavior = 'smooth' | 'instant'\ntype SnapStop = 'normal' | 'always'\n\ninterface Props extends ComponentPropsWithRef<'div'> {\n  /**\n   * CSS scroll snap behavior.\n   * - `mandatory` to force snapping on each \"page\".\n   * - `proximity` to force snapping only when scroll position is near the edge of a \"page\". Behavior can change depending on each browser.\n   * - `none` to disabled scroll snapping.\n   */\n  snapType?: SnapType\n  /**\n   * Defines whether or not the scroll container is allowed to \"pass over\" possible snap positions.\n   */\n  snapStop?: SnapStop\n  scrollBehavior?: ScrollBehavior\n  /**\n   * Add a fade effect to indicate content overflow.\n   */\n  withFade?: boolean\n  children?: ReactNode\n  /**\n   * When `true`, allow previous and next buttons to be used when reaching the edges of the list.\n   */\n  loop?: boolean\n  /**\n   * Space (in pixels) between items.\n   */\n  gap?: number\n  /**\n   * Offset (in pixels) of the left of the optimal viewing region of the list.\n   */\n  scrollPadding?: number\n  className?: string\n}\n\ninterface ScrollingListContextState extends SnapCarouselResult {\n  snapType: SnapType\n  snapStop: SnapStop\n  scrollBehavior: ScrollBehavior\n  visibleItemsRange: readonly [number, number]\n  loop: boolean\n  gap: number\n  withFade: boolean\n  scrollPadding: number\n  scrollAreaRef: RefObject<HTMLDivElement | null>\n  overflow: ScrollOverflow\n  skipKeyboardNavigation: () => void\n}\n\nexport const ScrollingListContext = createContext<ScrollingListContextState>(\n  null as unknown as ScrollingListContextState\n)\n\nexport const ScrollingList = ({\n  snapType = 'none',\n  snapStop = 'normal',\n  scrollBehavior = 'smooth',\n  loop = false,\n  gap = 16,\n  withFade = false,\n  scrollPadding = 0,\n  children,\n  className,\n  ...rest\n}: Props) => {\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const skipAnchorRef = useRef<HTMLButtonElement>(null)\n\n  const snapCarouselAPI = useSnapCarousel()\n\n  const overflow = useScrollOverflow(scrollAreaRef, { precisionTreshold: 1 })\n\n  const { activePageIndex, pages, refresh } = snapCarouselAPI\n\n  const visibleItems = pages[activePageIndex] as number[]\n\n  const visibleItemsRange = visibleItems\n    ? ([visibleItems[0]! + 1, visibleItems[visibleItems.length - 1]! + 1] as const)\n    : ([0, 0] as const)\n\n  // Force refresh of the carousel API when children change\n  const forceRefresh = useCallback(() => {\n    if (refresh && scrollAreaRef.current) {\n      // Small delay to ensure DOM is updated\n      setTimeout(() => {\n        refresh()\n      }, 0)\n    }\n  }, [refresh])\n\n  useEffect(() => {\n    forceRefresh()\n  }, [children, forceRefresh])\n\n  useLayoutEffect(() => {\n    if (scrollAreaRef.current) {\n      // Use requestAnimationFrame to ensure proper timing with the render cycle\n      // This prevents race conditions that occur when the console is closed\n      requestAnimationFrame(() => {\n        window.dispatchEvent(new Event('resize'))\n      })\n    }\n  }, [children])\n\n  const skipKeyboardNavigation = () => {\n    skipAnchorRef.current?.focus()\n  }\n\n  const ctxValue: ScrollingListContextState = {\n    ...snapCarouselAPI,\n    snapType,\n    snapStop,\n    skipKeyboardNavigation,\n    scrollBehavior,\n    visibleItemsRange,\n    loop,\n    gap,\n    withFade,\n    scrollPadding,\n    scrollAreaRef,\n    overflow,\n  }\n\n  return (\n    <ScrollingListContext.Provider value={ctxValue}>\n      <div\n        data-spark-component=\"scrolling-list\"\n        className={cx(\n          'gap-lg group/scrolling-list relative flex flex-col default:w-full',\n          className\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n      <span ref={skipAnchorRef} className=\"size-0 overflow-hidden\" tabIndex={-1} />\n    </ScrollingListContext.Provider>\n  )\n}\n\nScrollingList.displayName = 'ScrollingList'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react'\n\ninterface ScrollingListControls extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Visibility behavior of the control buttons:\n   * - `always`: buttons are always visible.\n   * - `hover`: buttons only appear on hover.\n   *\n   * a11y: `hover` is dangerous for accessibility as it disabled controls for touch screen users.\n   * When using it, you must provide an alternative control outside of the list to replace them.\n   */\n  visibility?: 'hover' | 'always'\n  children: ReactNode\n}\n\nexport const ScrollingListControls = ({\n  children,\n  visibility = 'always',\n  className,\n  ...rest\n}: ScrollingListControls) => {\n  return (\n    <div\n      data-spark-component=\"scrolling-list-controls\"\n      className={cx(\n        'default:px-md pointer-events-none absolute inset-0 flex flex-row items-center justify-between overflow-hidden',\n        className\n      )}\n      style={\n        {\n          '--scrolling-list-controls-opacity': visibility === 'hover' ? '0' : '1',\n        } as CSSProperties\n      }\n      data-orientation=\"horizontal\"\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nScrollingListControls.displayName = 'ScrollingList.Controls'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, ReactNode, useContext, useRef } from 'react'\n\nimport { Slot } from '../slot'\nimport { ScrollingListContext } from './ScrollingList'\nimport { useFocusWithinScroll } from './useFocusWithinScroll'\n\nexport interface ScrollingListItemProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  children?: ReactNode\n  /**\n   * DO NOT USE. This prop is automatically managed by the parent ScrollingList.ListItems\n   */\n  index?: number\n  className?: string\n}\n\nexport const ScrollingListItem = ({\n  asChild = false,\n  children,\n  index = 0,\n  className = '',\n  ...rest\n}: ScrollingListItemProps) => {\n  const ctx = useContext(ScrollingListContext)\n  const itemRef = useRef<HTMLDivElement>(null)\n\n  const isSnapPoint = ctx.snapPointIndexes.has(index)\n\n  useFocusWithinScroll(itemRef, ctx.scrollAreaRef)\n\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <Component\n      data-spark-component=\"scrolling-list-item\"\n      role=\"listitem\"\n      ref={itemRef}\n      className={cx(\n        'default:w-auto default:shrink-0',\n        {\n          'snap-start': isSnapPoint,\n          'snap-normal': isSnapPoint && ctx.snapStop === 'normal',\n          'snap-always': isSnapPoint && ctx.snapStop === 'always',\n        },\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  )\n}\n\nScrollingListItem.displayName = 'ScrollingList.Item'\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n  cloneElement,\n  HTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n  return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n  asChild: boolean | undefined,\n  children: ReactNode,\n  callback: (children: ReactNode) => ReactNode\n) => {\n  if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n  return isValidElement(children)\n    ? cloneElement(\n        children,\n        undefined,\n        callback((children.props as { children: ReactNode }).children)\n      )\n    : null\n}\n","import { RefObject, useEffect, useState } from 'react'\n\nexport function useFocusWithinScroll<T extends HTMLElement | null>(\n  ref: RefObject<T>, // The container to detect focus within\n  scrollRef: RefObject<HTMLDivElement | null> // The scrollable container\n) {\n  const [isFocusWithin, setIsFocusWithin] = useState(false)\n\n  useEffect(() => {\n    const handleFocusIn = (event: FocusEvent) => {\n      setIsFocusWithin(true)\n\n      const focusedElement = event.target as HTMLElement\n      const scrollContainer = scrollRef.current\n\n      if (focusedElement && scrollContainer) {\n        const focusRect = focusedElement.getBoundingClientRect()\n        const scrollRect = scrollContainer.getBoundingClientRect()\n\n        // Check if the focused element is fully visible inside the scroll container\n        const isFullyVisible =\n          focusRect.left >= scrollRect.left &&\n          focusRect.right <= scrollRect.right &&\n          focusRect.top >= scrollRect.top &&\n          focusRect.bottom <= scrollRect.bottom\n\n        if (!isFullyVisible) {\n          focusedElement.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })\n        }\n      }\n    }\n\n    const handleFocusOut = (event: FocusEvent) => {\n      if (ref.current && !ref.current.contains(event.relatedTarget as Node)) {\n        setIsFocusWithin(false)\n      }\n    }\n\n    const node = ref.current\n    if (node) {\n      node.addEventListener('focusin', handleFocusIn)\n      node.addEventListener('focusout', handleFocusOut)\n    }\n\n    return () => {\n      if (node) {\n        node.removeEventListener('focusin', handleFocusIn)\n        node.removeEventListener('focusout', handleFocusOut)\n      }\n    }\n  }, [ref, scrollRef])\n\n  return isFocusWithin\n}\n","import { cx } from 'class-variance-authority'\nimport {\n  Children,\n  cloneElement,\n  ComponentPropsWithRef,\n  CSSProperties,\n  isValidElement,\n  KeyboardEvent,\n  ReactNode,\n  Ref,\n  RefObject,\n  useContext,\n} from 'react'\n\nimport { ScrollingListContext } from './ScrollingList'\nimport { ScrollingListItemProps } from './ScrollingListItem'\n\ninterface Props extends ComponentPropsWithRef<'div'> {\n  children?: ReactNode\n  className?: string\n}\n\nexport function mergeRefs<T>(...refs: (Ref<T> | undefined | null)[]): Ref<T> {\n  return (value: T | null) => {\n    refs.forEach(ref => {\n      if (typeof ref === 'function') {\n        ref(value)\n      } else if (ref && typeof ref === 'object' && 'current' in ref) {\n        ;(ref as RefObject<T | null>).current = value\n      }\n    })\n  }\n}\n\nexport const ScrollingListItems = ({ children, ref, className = '', ...rest }: Props) => {\n  const ctx = useContext(ScrollingListContext)\n\n  const snapConfig = {\n    mandatory: 'x mandatory',\n    proximity: 'x proximity',\n    none: 'none',\n  }\n\n  const handleLeftArrow = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!ctx.loop && !ctx.hasPrevPage) return\n\n    event.preventDefault()\n    ctx.goTo(ctx.hasPrevPage ? ctx.activePageIndex - 1 : ctx.pages.length - 1, {\n      behavior: ctx.scrollBehavior,\n    })\n  }\n\n  const handleRightArrow = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!ctx.loop && !ctx.hasNextPage) return\n\n    event.preventDefault()\n    ctx.goTo(ctx.hasNextPage ? ctx.activePageIndex + 1 : 0, { behavior: ctx.scrollBehavior })\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'ArrowLeft') {\n      handleLeftArrow(event)\n    }\n\n    if (event.key === 'ArrowRight') {\n      handleRightArrow(event)\n    }\n  }\n\n  interface CustomCSSProperties extends CSSProperties {\n    '--scrolling-list-gap'?: string\n    '--scrolling-list-px'?: string\n  }\n\n  const inlineStyles: CustomCSSProperties = {\n    scrollSnapType: snapConfig[ctx.snapType],\n    scrollPaddingInline: 'var(--scrolling-list-px)',\n    '--scrolling-list-px': `${ctx.scrollPadding}px`,\n    '--scrolling-list-gap': `${ctx.gap}px`,\n    ...(ctx.withFade && {\n      maskImage:\n        'linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))',\n      maskSize: `calc(100% + ${ctx.overflow.left ? '0px' : '44px'} + ${ctx.overflow.right ? '0px' : '44px'}) 100%`,\n      maskPosition: `${ctx.overflow.left ? '0px' : '-44px'} 0`,\n    }),\n  }\n\n  return (\n    <div\n      data-spark-component=\"scrolling-list-items\"\n      id=\"scrolling-list-items\"\n      role=\"list\"\n      className={cx(\n        'relative transition-all duration-300',\n        'u-no-scrollbar overflow-x-auto scroll-smooth',\n        'w-full gap-(--scrolling-list-gap) default:flex default:flex-row',\n        'focus-visible:u-outline',\n        className\n      )}\n      ref={mergeRefs<HTMLDivElement>(ctx.scrollAreaRef, ctx.scrollRef, ref)}\n      style={inlineStyles}\n      onKeyDown={handleKeyDown}\n      {...rest}\n    >\n      {Children.map(children, (child, index) =>\n        isValidElement<ScrollingListItemProps>(child) ? cloneElement(child, { index }) : child\n      )}\n    </div>\n  )\n}\n\nScrollingListItems.displayName = 'ScrollingList.Items'\n","import { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { cx } from 'class-variance-authority'\nimport { useContext } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton, IconButtonProps } from '../icon-button'\nimport { ScrollingListContext } from './ScrollingList'\n\nexport const ScrollingListNextButton = ({ 'aria-label': ariaLabel, ...rest }: IconButtonProps) => {\n  const ctx = useContext(ScrollingListContext)\n\n  const handleNextPage = () => {\n    if (ctx.hasNextPage) {\n      ctx.next({ behavior: ctx.scrollBehavior })\n    } else {\n      ctx.goTo(0, { behavior: ctx.scrollBehavior })\n    }\n  }\n\n  const listHasOverflow = ctx.overflow.left || ctx.overflow.right\n  const isDisabled = !listHasOverflow || (!ctx.loop && !ctx.overflow.right)\n\n  return (\n    <IconButton\n      data-spark-component=\"scrolling-list-next-button\"\n      size=\"sm\"\n      intent=\"surface\"\n      design=\"filled\"\n      className={cx(\n        'pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible',\n        'group-hover/scrolling-list:opacity-none focus-visible:opacity-none'\n      )}\n      onClick={handleNextPage}\n      disabled={isDisabled}\n      aria-label={ariaLabel}\n      aria-controls=\"scrolling-list-items\"\n      {...rest}\n    >\n      <Icon>\n        <ArrowVerticalRight />\n      </Icon>\n    </IconButton>\n  )\n}\n\nScrollingListNextButton.displayName = 'ScrollingList.NextButton'\n","import { Children, cloneElement, ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { iconStyles, IconVariantsProps } from './Icon.styles'\n\nexport interface IconProps extends IconVariantsProps, ComponentPropsWithoutRef<'svg'> {\n  /**\n   * The svg icon that will be wrapped\n   */\n  children: ReactNode\n  /**\n   * The accessible label for the icon. This label will be visually hidden but announced to screen\n   * reader users, similar to `alt` text for `img` tags.\n   */\n  label?: string\n}\n\nexport const Icon = ({\n  label,\n  className,\n  size = 'current',\n  intent = 'current',\n  children,\n  ...others\n}: IconProps) => {\n  const child = Children.only(children)\n\n  return (\n    <>\n      {cloneElement(child as ReactElement<Record<string, any>>, {\n        className: iconStyles({ className, size, intent }),\n        'data-spark-component': 'icon',\n        'aria-hidden': 'true',\n        focusable: 'false',\n        ...others,\n      })}\n\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n    </>\n  )\n}\n\nIcon.displayName = 'Icon'\n","import { HTMLAttributes, PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLElement>\n}\n\nexport const VisuallyHidden = ({ asChild = false, ref, ...props }: VisuallyHiddenProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      {...props}\n      ref={ref}\n      style={{\n        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n        position: 'absolute',\n        border: 0,\n        width: 1,\n        height: 1,\n        padding: 0,\n        margin: -1,\n        overflow: 'hidden',\n        clip: 'rect(0, 0, 0, 0)',\n        whiteSpace: 'nowrap',\n        wordWrap: 'normal',\n        ...props.style,\n      }}\n    />\n  )\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const iconStyles = cva(['fill-current shrink-0'], {\n  variants: {\n    /**\n     * Color scheme of the icon.\n     */\n    intent: makeVariants<\n      'intent',\n      [\n        'current',\n        'main',\n        'support',\n        'accent',\n        'basic',\n        'success',\n        'alert',\n        'error',\n        'info',\n        'neutral',\n      ]\n    >({\n      current: ['text-current'],\n      main: ['text-main'],\n      support: ['text-support'],\n      accent: ['text-accent'],\n      basic: ['text-basic'],\n      success: ['text-success'],\n      alert: ['text-alert'],\n      error: ['text-error'],\n      info: ['text-info'],\n      neutral: ['text-neutral'],\n    }),\n    /**\n     * Sets the size of the icon.\n     */\n    size: makeVariants<'size', ['current', 'sm', 'md', 'lg', 'xl']>({\n      current: ['u-current-font-size'],\n      sm: ['w-sz-16', 'h-sz-16'],\n      md: ['w-sz-24', 'h-sz-24'],\n      lg: ['w-sz-32', 'h-sz-32'],\n      xl: ['w-sz-40', 'h-sz-40'],\n    }),\n  },\n})\n\nexport type IconVariantsProps = VariantProps<typeof iconStyles>\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, type DOMAttributes, Ref, useMemo } from 'react'\n\nimport { Slot, wrapPolymorphicSlot } from '../slot'\nimport { Spinner, type SpinnerProps } from '../spinner'\nimport { buttonStyles, type ButtonStylesProps } from './Button.styles'\n\nexport interface ButtonProps\n  extends Omit<ComponentPropsWithoutRef<'button'>, 'disabled'>,\n    ButtonStylesProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Display a spinner to indicate to the user that the button is loading something after they interacted with it.\n   */\n  isLoading?: boolean\n  /**\n   * If your loading state should only display a spinner, it's better to specify a label for it (a11y).\n   */\n  loadingLabel?: string\n  /**\n   * If your loading state should also display a label, you can use this prop instead of `loadingLabel`.\n   * **Please note that using this can result in layout shifting when the Button goes from loading state to normal state.**\n   */\n  loadingText?: string\n  ref?: Ref<HTMLButtonElement>\n}\n\ntype DOMAttributesEventHandler = keyof Omit<\n  DOMAttributes<HTMLButtonElement>,\n  'children' | 'dangerouslySetInnerHTML'\n>\n\nconst blockedEventHandlers: DOMAttributesEventHandler[] = [\n  'onClick',\n  'onMouseDown',\n  'onMouseUp',\n  'onMouseEnter',\n  'onMouseLeave',\n  'onMouseOver',\n  'onMouseOut',\n  'onKeyDown',\n  'onKeyPress',\n  'onKeyUp',\n  'onSubmit',\n]\n\nexport const Button = ({\n  children,\n  design = 'filled',\n  disabled = false,\n  intent = 'main',\n  isLoading = false,\n  loadingLabel,\n  loadingText,\n  shape = 'rounded',\n  size = 'md',\n  asChild,\n  className,\n  underline = false,\n  ref,\n  ...others\n}: ButtonProps) => {\n  const Component = asChild ? Slot : 'button'\n\n  const shouldNotInteract = !!disabled || isLoading\n\n  const disabledEventHandlers = useMemo(() => {\n    const result: Partial<Record<DOMAttributesEventHandler, () => void>> = {}\n\n    if (shouldNotInteract) {\n      blockedEventHandlers.forEach(eventHandler => (result[eventHandler] = undefined))\n    }\n\n    return result\n  }, [shouldNotInteract])\n\n  const spinnerProps = {\n    size: 'current' as SpinnerProps['size'],\n    className: loadingText ? 'inline-block' : 'absolute',\n    ...(loadingLabel && { 'aria-label': loadingLabel }),\n  }\n\n  return (\n    <Component\n      data-spark-component=\"button\"\n      {...(Component === 'button' && { type: 'button' })}\n      ref={ref}\n      className={buttonStyles({\n        className,\n        design,\n        disabled: shouldNotInteract,\n        intent,\n        shape,\n        size,\n        underline,\n      })}\n      disabled={!!disabled}\n      aria-busy={isLoading}\n      aria-live={isLoading ? 'assertive' : 'off'}\n      {...others}\n      {...disabledEventHandlers}\n    >\n      {wrapPolymorphicSlot(asChild, children, slotted =>\n        isLoading ? (\n          <>\n            <Spinner {...spinnerProps} />\n            {loadingText && loadingText}\n\n            <div\n              aria-hidden\n              className={cx('gap-md', loadingText ? 'hidden' : 'inline-flex opacity-0')}\n            >\n              {slotted}\n            </div>\n          </>\n        ) : (\n          slotted\n        )\n      )}\n    </Component>\n  )\n}\n\nButton.displayName = 'Button'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nconst defaultVariants = {\n  intent: 'current',\n  size: 'current',\n  isBackgroundVisible: false,\n} as const\n\nexport const spinnerStyles = cva(\n  ['inline-block', 'border-solid', 'rounded-full', 'border-md', 'animate-spin'],\n  {\n    variants: {\n      /**\n       * Use `size` prop to set the size of the spinner. If you want to set the full size for the spinner, don't forget to add a wrapping container with its own size.\n       */\n      size: {\n        current: ['u-current-font-size'],\n        sm: ['w-sz-20', 'h-sz-20'],\n        md: ['w-sz-28', 'h-sz-28'],\n        full: ['w-full', 'h-full'],\n      },\n      /**\n       * Color scheme of the spinner.\n       */\n      intent: makeVariants<\n        'intent',\n        [\n          'current',\n          'main',\n          'support',\n          'accent',\n          'basic',\n          'success',\n          'alert',\n          'error',\n          'info',\n          'neutral',\n        ]\n      >({\n        current: ['border-current'],\n        main: ['border-main'],\n        support: ['border-support'],\n        accent: ['border-accent'],\n        basic: ['border-basic'],\n        success: ['border-success'],\n        alert: ['border-alert'],\n        error: ['border-error'],\n        info: ['border-info'],\n        neutral: ['border-neutral'],\n      }),\n      /**\n       * Size of the button.\n       */\n      isBackgroundVisible: {\n        true: ['border-b-neutral-container', 'border-l-neutral-container'],\n        false: ['border-b-transparent', 'border-l-transparent'],\n      },\n    },\n    defaultVariants,\n  }\n)\n\nexport type SpinnerStylesProps = VariantProps<typeof spinnerStyles>\n","import { ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { spinnerStyles, SpinnerStylesProps } from './Spinner.styles'\n\nexport interface SpinnerProps extends ComponentPropsWithRef<'div'>, SpinnerStylesProps {\n  /**\n   * Use `label` prop for accessibility, it is important to add a fallback loading text. This text will be visible to screen readers.\n   */\n  label?: string\n}\n\nexport const Spinner = ({\n  className,\n  size = 'current',\n  intent = 'current',\n  label,\n  isBackgroundVisible,\n  ref,\n  ...others\n}: PropsWithChildren<SpinnerProps>) => {\n  return (\n    <span\n      role=\"status\"\n      data-spark-component=\"spinner\"\n      ref={ref}\n      className={spinnerStyles({ className, size, intent, isBackgroundVisible })}\n      {...others}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n    </span>\n  )\n}\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport {\n  contrastVariants,\n  filledVariants,\n  ghostVariants,\n  outlinedVariants,\n  tintedVariants,\n} from './variants'\n\nexport const buttonStyles = cva(\n  [\n    'u-shadow-border-transition',\n    'box-border inline-flex items-center justify-center gap-md whitespace-nowrap',\n    'default:px-lg',\n    'text-body-1 font-bold',\n    'focus-visible:u-outline',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the button.\n       *\n       * - `filled`: Button will be plain.\n       *\n       * - `outlined`: Button will be transparent with an outline.\n       *\n       * - `tinted`: Button will be filled but using a lighter color scheme.\n       *\n       * - `ghost`: Button will look like a link. No borders, plain text.\n       *\n       * - `contrast`: Button will be surface filled. No borders, plain text.\n       *\n       */\n      design: makeVariants<'design', ['filled', 'outlined', 'tinted', 'ghost', 'contrast']>({\n        filled: [],\n        outlined: ['bg-transparent', 'border-sm', 'border-current'],\n        tinted: [],\n        ghost: ['default:-mx-md px-md hover:bg-main/dim-5'],\n        contrast: [],\n      }),\n      underline: {\n        true: ['underline'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'basic',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        basic: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n        surfaceInverse: [],\n      }),\n      /**\n       * Size of the button.\n       */\n      size: makeVariants<'size', ['sm', 'md', 'lg']>({\n        sm: ['min-w-sz-32', 'h-sz-32'],\n        md: ['min-w-sz-44', 'h-sz-44'],\n        lg: ['min-w-sz-56', 'h-sz-56'],\n      }),\n      /**\n       * Shape of the button.\n       */\n      shape: makeVariants<'shape', ['rounded', 'square', 'pill']>({\n        rounded: ['rounded-lg'],\n        square: ['rounded-0'],\n        pill: ['rounded-full'],\n      }),\n      /**\n       * Disable the button, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed', 'opacity-dim-3'],\n        false: ['cursor-pointer'],\n      },\n    },\n    compoundVariants: [\n      ...filledVariants,\n      ...outlinedVariants,\n      ...tintedVariants,\n      ...ghostVariants,\n      ...contrastVariants,\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'main',\n      size: 'md',\n      shape: 'rounded',\n    },\n  }\n)\n\nexport type ButtonStylesProps = VariantProps<typeof buttonStyles>\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n  // Main\n  {\n    intent: 'main',\n    design: 'filled',\n    class: tw([\n      'bg-main',\n      'text-on-main',\n      'hover:bg-main-hovered',\n      'enabled:active:bg-main-hovered',\n      'focus-visible:bg-main-hovered',\n    ]),\n  },\n  // Support\n  {\n    intent: 'support',\n    design: 'filled',\n    class: tw([\n      'bg-support',\n      'text-on-support',\n      'hover:bg-support-hovered',\n      'enabled:active:bg-support-hovered',\n      'focus-visible:bg-support-hovered',\n    ]),\n  },\n  // Accent\n  {\n    intent: 'accent',\n    design: 'filled',\n    class: tw([\n      'bg-accent',\n      'text-on-accent',\n      'hover:bg-accent-hovered',\n      'enabled:active:bg-accent-hovered',\n      'focus-visible:bg-accent-hovered',\n    ]),\n  },\n  // Basic\n  {\n    intent: 'basic',\n    design: 'filled',\n    class: tw([\n      'bg-basic',\n      'text-on-basic',\n      'hover:bg-basic-hovered',\n      'enabled:active:bg-basic-hovered',\n      'focus-visible:bg-basic-hovered',\n    ]),\n  },\n  // Success\n  {\n    intent: 'success',\n    design: 'filled',\n    class: tw([\n      'bg-success',\n      'text-on-success',\n      'hover:bg-success-hovered',\n      'enabled:active:bg-success-hovered',\n      'focus-visible:bg-success-hovered',\n    ]),\n  },\n  // Alert\n  {\n    intent: 'alert',\n    design: 'filled',\n    class: tw([\n      'bg-alert',\n      'text-on-alert',\n      'hover:bg-alert-hovered',\n      'enabled:active:bg-alert-hovered',\n      'focus-visible:bg-alert-hovered',\n    ]),\n  },\n  // Danger\n  {\n    intent: 'danger',\n    design: 'filled',\n    class: tw([\n      'text-on-error bg-error',\n      'hover:bg-error-hovered enabled:active:bg-error-hovered',\n      'focus-visible:bg-error-hovered',\n    ]),\n  },\n  // Info\n  {\n    intent: 'info',\n    design: 'filled',\n    class: tw([\n      'text-on-error bg-info',\n      'hover:bg-info-hovered enabled:active:bg-info-hovered',\n      'focus-visible:bg-info-hovered',\n    ]),\n  },\n  // Neutral\n  {\n    intent: 'neutral',\n    design: 'filled',\n    class: tw([\n      'bg-neutral',\n      'text-on-neutral',\n      'hover:bg-neutral-hovered',\n      'enabled:active:bg-neutral-hovered',\n      'focus-visible:bg-neutral-hovered',\n    ]),\n  },\n  // Surface\n  {\n    intent: 'surface',\n    design: 'filled',\n    class: tw([\n      'bg-surface',\n      'text-on-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'filled',\n    class: tw([\n      'bg-surface-inverse',\n      'text-on-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const ghostVariants = [\n  {\n    intent: 'main',\n    design: 'ghost',\n    class: tw([\n      'text-on-main-container',\n      'hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'ghost',\n    class: tw([\n      'text-on-support-container',\n      'hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'ghost',\n    class: tw([\n      'text-on-accent-container',\n      'hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n    ]),\n  },\n  {\n    intent: 'basic',\n    design: 'ghost',\n    class: tw([\n      'text-on-basic-container',\n      'hover:bg-basic/dim-5',\n      'enabled:active:bg-basic/dim-5',\n      'focus-visible:bg-basic/dim-5',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'ghost',\n    class: tw([\n      'text-on-success-container',\n      'hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'ghost',\n    class: tw([\n      'text-on-alert-container',\n      'hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'ghost',\n    class: tw([\n      'text-on-error-container',\n      'hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'ghost',\n    class: tw([\n      'text-on-info-container',\n      'hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'ghost',\n    class: tw([\n      'text-on-neutral-container',\n      'hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'ghost',\n    class: tw([\n      'text-surface',\n      'hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'ghost',\n    class: tw([\n      'text-surface-inverse',\n      'hover:bg-surface-inverse/dim-5',\n      'enabled:active:bg-surface-inverse/dim-5',\n      'focus-visible:bg-surface-inverse/dim-5',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  {\n    intent: 'main',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'text-main',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'text-accent',\n    ]),\n  },\n  {\n    intent: 'basic',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-basic/dim-5',\n      'enabled:active:bg-basic/dim-5',\n      'focus-visible:bg-basic/dim-5',\n      'text-basic',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'text-alert',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'text-error',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'text-info',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'text-neutral',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'text-surface',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-surface-inverse/dim-5',\n      'enabled:active:bg-surface-inverse/dim-5',\n      'focus-visible:bg-surface-inverse/dim-5',\n      'text-surface-inverse',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw([\n      'bg-main-container',\n      'text-on-main-container',\n      'hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw([\n      'bg-support-container',\n      'text-on-support-container',\n      'hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw([\n      'bg-accent-container',\n      'text-on-accent-container',\n      'hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n    ]),\n  },\n  {\n    intent: 'basic',\n    design: 'tinted',\n    class: tw([\n      'bg-basic-container',\n      'text-on-basic-container',\n      'hover:bg-basic-container-hovered',\n      'enabled:active:bg-basic-container-hovered',\n      'focus-visible:bg-basic-container-hovered',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw([\n      'bg-success-container',\n      'text-on-success-container',\n      'hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw([\n      'bg-alert-container',\n      'text-on-alert-container',\n      'hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw([\n      'bg-error-container',\n      'text-on-error-container',\n      'hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw([\n      'bg-info-container',\n      'text-on-info-container',\n      'hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw([\n      'bg-neutral-container',\n      'text-on-neutral-container',\n      'hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'tinted',\n    class: tw([\n      'bg-surface',\n      'text-on-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'tinted',\n    class: tw([\n      'bg-surface-inverse',\n      'text-on-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const contrastVariants = [\n  {\n    intent: 'main',\n    design: 'contrast',\n    class: tw([\n      'text-on-main-contaier bg-surface',\n      'hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'contrast',\n    class: tw([\n      'text-on-support-container bg-surface',\n      'hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'contrast',\n    class: tw([\n      'text-on-accent-container bg-surface',\n      'hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n    ]),\n  },\n  {\n    intent: 'basic',\n    design: 'contrast',\n    class: tw([\n      'text-on-basic-container bg-surface',\n      'hover:bg-basic-container-hovered',\n      'enabled:active:bg-basic-container-hovered',\n      'focus-visible:bg-basic-container-hovered',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'contrast',\n    class: tw([\n      'text-on-success-container bg-surface',\n      'hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'contrast',\n    class: tw([\n      'text-on-alert-container bg-surface',\n      'hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'contrast',\n    class: tw([\n      'text-on-error-container bg-surface',\n      'hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'contrast',\n    class: tw([\n      'text-on-info-container bg-surface',\n      'hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'contrast',\n    class: tw([\n      'text-on-neutral-container bg-surface',\n      'hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'contrast',\n    class: tw([\n      'text-on-surface bg-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'contrast',\n    class: tw([\n      'text-on-surface-inverse bg-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\n// override the Button component's px-lg padding by using a more specific class selector (pl-0 pr-0)\nexport const iconButtonStyles = cva(['pl-0 pr-0'], {\n  variants: {\n    /**\n     * Sets the size of the icon.\n     */\n    size: makeVariants<'size', ['sm', 'md', 'lg']>({\n      sm: ['text-body-1'],\n      md: ['text-body-1'],\n      lg: ['text-display-3'],\n    }),\n  },\n})\n\nexport type IconButtonStylesProps = VariantProps<typeof iconButtonStyles>\n","import { Ref } from 'react'\n\nimport { Button, ButtonProps } from '../button'\nimport { iconButtonStyles } from './IconButton.styles'\n\nexport interface IconButtonProps extends Omit<ButtonProps, 'loadingText'> {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const IconButton = ({\n  design = 'filled',\n  disabled = false,\n  intent = 'main',\n  shape = 'rounded',\n  size = 'md',\n  className,\n  ref,\n  ...others\n}: IconButtonProps) => {\n  return (\n    <Button\n      data-spark-component=\"icon-button\"\n      ref={ref}\n      className={iconButtonStyles({ size, className })}\n      design={design}\n      disabled={disabled}\n      intent={intent}\n      shape={shape}\n      size={size}\n      {...others}\n    />\n  )\n}\n\nIconButton.displayName = 'IconButton'\n","import { ArrowVerticalLeft } from '@spark-ui/icons/ArrowVerticalLeft'\nimport { cx } from 'class-variance-authority'\nimport { useContext } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton, IconButtonProps } from '../icon-button'\nimport { ScrollingListContext } from './ScrollingList'\n\nexport const ScrollingListPrevButton = ({\n  'aria-label': ariaLabel,\n\n  ...rest\n}: IconButtonProps) => {\n  const ctx = useContext(ScrollingListContext)\n\n  const handlePrevPage = () => {\n    const shouldSnapFirstPage =\n      ctx.activePageIndex === 0 && (ctx.scrollAreaRef.current?.scrollLeft || 0) > 0\n\n    if (shouldSnapFirstPage) {\n      ctx.goTo(0, { behavior: ctx.scrollBehavior })\n    } else if (ctx.hasPrevPage) {\n      ctx.prev({ behavior: ctx.scrollBehavior })\n    } else {\n      ctx.goTo(ctx.pages.length - 1, { behavior: ctx.scrollBehavior })\n    }\n  }\n\n  const listHasOverflow = ctx.overflow.left || ctx.overflow.right\n  const isDisabled = !listHasOverflow || (!ctx.loop && !ctx.overflow.left)\n\n  return (\n    <IconButton\n      data-spark-component=\"scrolling-list-prev-button\"\n      size=\"sm\"\n      intent=\"surface\"\n      design=\"filled\"\n      className={cx(\n        'pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible',\n        'group-hover/scrolling-list:opacity-none focus-visible:opacity-none'\n      )}\n      onClick={handlePrevPage}\n      disabled={isDisabled}\n      aria-label={ariaLabel}\n      aria-controls=\"scrolling-list-items\"\n      {...rest}\n    >\n      <Icon>\n        <ArrowVerticalLeft />\n      </Icon>\n    </IconButton>\n  )\n}\n\nScrollingListPrevButton.displayName = 'ScrollingList.PrevButton'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, useContext } from 'react'\n\nimport { Button } from '../button'\nimport { ScrollingListContext } from './ScrollingList'\n\ninterface Props extends ComponentPropsWithoutRef<'button'> {\n  children: string\n}\n\nexport const ScrollingListSkipButton = ({ children, ...rest }: Props) => {\n  const ctx = useContext(ScrollingListContext)\n\n  return (\n    <Button\n      type=\"button\"\n      design=\"tinted\"\n      intent=\"surface\"\n      tabIndex={0}\n      className={cx(\n        'z-raised absolute top-1/2 left-0 -translate-y-1/2',\n        'not-focus-visible:pointer-events-none not-focus-visible:size-0 not-focus-visible:opacity-0'\n      )}\n      onClick={ctx.skipKeyboardNavigation}\n      {...rest}\n    >\n      {children}\n    </Button>\n  )\n}\n\nScrollingListSkipButton.displayName = 'ScrollingList.SkipButton'\n"],"mappings":"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","names":["ScrollingList","import_class_variance_authority","import_jsx_runtime","import_class_variance_authority","import_react","import_react","import_jsx_runtime","RadixSlot","import_react","import_jsx_runtime","import_class_variance_authority","import_react","import_jsx_runtime","import_class_variance_authority","import_react","import_react","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","import_class_variance_authority","import_react","import_internal_utils","import_class_variance_authority","import_jsx_runtime","import_internal_utils","import_class_variance_authority","import_internal_utils","import_internal_utils","import_internal_utils","import_internal_utils","import_internal_utils","import_jsx_runtime","import_internal_utils","import_class_variance_authority","import_jsx_runtime","import_jsx_runtime","import_class_variance_authority","import_react","import_jsx_runtime","import_class_variance_authority","import_react","import_jsx_runtime","ScrollingList"]}

package/dist/segmented-gauge/index.d.ts

@@ -0,0 +1,100 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Ref, ComponentProps } from 'react';
+
+interface SegmentedGaugeProps {
+    /**
+     * The current value of the gauge
+     */
+    value?: number;
+    /**
+     * Minimum value of the gauge (aria-valuemin)
+     */
+    min: number;
+    /**
+     * Maximum value of the gauge (aria-valuemax)
+     */
+    max: number;
+    /**
+     * Description text for the gauge (aria-describedby)
+     */
+    description?: string;
+    /**
+     * Size of the gauge
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Intent of the gauge - predefined color intent
+     */
+    intent?: 'main' | 'support' | 'basic' | 'accent' | 'success' | 'alert' | 'danger' | 'info' | 'neutral';
+    /**
+     * Custom color for the gauge (hex, CSS variable, etc.)
+     */
+    customColor?: string;
+    /**
+     * ID of the gauge element
+     */
+    id?: string;
+    /**
+     * Accessible label for the gauge (required if no id is provided)
+     */
+    'aria-label'?: string;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Ref to the root element
+     */
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Children render prop for custom rendering
+     */
+    children?: (props: {
+        segments: {
+            isActive: boolean;
+            isCurrent: boolean;
+        }[];
+        currentIndex: number;
+    }) => React.ReactNode;
+}
+declare const SegmentedGauge$1: {
+    ({ value, min, max, description, size, intent, customColor, id, "aria-label": ariaLabel, className, ref, children, ...props }: SegmentedGaugeProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface SegmentedGaugeLabelProps extends ComponentProps<'span'> {
+    ref?: Ref<HTMLSpanElement>;
+    id?: string;
+}
+declare const SegmentedGaugeLabel: {
+    ({ className, children, ref, id, ...props }: SegmentedGaugeLabelProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface SegmentedGaugeSegmentProps extends ComponentProps<'div'> {
+    /**
+     * Index of this segment (0-based)
+     */
+    index?: number;
+    ref?: Ref<HTMLDivElement>;
+}
+declare const SegmentedGaugeSegment: {
+    ({ index, className, children, ref, ...props }: SegmentedGaugeSegmentProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface SegmentedGaugeTrackProps extends ComponentProps<'div'> {
+    ref?: Ref<HTMLDivElement>;
+}
+declare const SegmentedGaugeTrack: {
+    ({ className, children, ref, ...props }: SegmentedGaugeTrackProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const SegmentedGauge: typeof SegmentedGauge$1 & {
+    Track: typeof SegmentedGaugeTrack;
+    Segment: typeof SegmentedGaugeSegment;
+    Label: typeof SegmentedGaugeLabel;
+};
+
+export { SegmentedGauge, type SegmentedGaugeLabelProps, type SegmentedGaugeProps, type SegmentedGaugeSegmentProps, type SegmentedGaugeTrackProps };

package/dist/segmented-gauge/index.js

@@ -0,0 +1,277 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/segmented-gauge/index.ts
+var segmented_gauge_exports = {};
+__export(segmented_gauge_exports, {
+  SegmentedGauge: () => SegmentedGauge2
+});
+module.exports = __toCommonJS(segmented_gauge_exports);
+
+// src/segmented-gauge/SegmentedGauge.tsx
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_react3 = require("react");
+
+// src/segmented-gauge/SegmentedGaugeContext.tsx
+var import_react = require("react");
+var SegmentedGaugeContext = (0, import_react.createContext)(null);
+var useSegmentedGaugeContext = () => {
+  const context = (0, import_react.useContext)(SegmentedGaugeContext);
+  if (!context) {
+    throw new Error("useSegmentedGaugeContext must be used within a SegmentedGauge provider");
+  }
+  return context;
+};
+
+// src/segmented-gauge/SegmentedGaugeLabel.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_jsx_runtime = require("react/jsx-runtime");
+var SegmentedGaugeLabel = ({
+  className,
+  children,
+  ref,
+  id,
+  ...props
+}) => {
+  const { labelId } = useSegmentedGaugeContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      "data-spark-component": "segmented-gauge-label",
+      "data-testid": "segmented-gauge-label",
+      ref,
+      id: id || labelId,
+      className: (0, import_class_variance_authority.cx)("default:text-on-surface default:text-body-2", className),
+      ...props,
+      children
+    }
+  );
+};
+SegmentedGaugeLabel.displayName = "SegmentedGauge.Label";
+
+// src/segmented-gauge/SegmentedGaugeSegment.tsx
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SegmentedGaugeSegment = ({
+  index = 0,
+  className,
+  children,
+  ref,
+  ...props
+}) => {
+  const { size, intent, customColor, currentIndex } = useSegmentedGaugeContext();
+  const isActive = currentIndex !== -1 && index <= currentIndex;
+  const isCurrent = currentIndex !== -1 && index === currentIndex;
+  const gaugeColor = (0, import_react2.useMemo)(() => {
+    if (customColor) {
+      return customColor;
+    }
+    switch (intent) {
+      case "main":
+        return "var(--color-main)";
+      case "support":
+        return "var(--color-support)";
+      case "basic":
+        return "var(--color-basic)";
+      case "accent":
+        return "var(--color-accent)";
+      case "success":
+        return "var(--color-success)";
+      case "alert":
+        return "var(--color-alert)";
+      case "danger":
+        return "var(--color-error)";
+      case "info":
+        return "var(--color-info)";
+      case "neutral":
+        return "var(--color-neutral)";
+      default:
+        return "var(--color-neutral)";
+    }
+  }, [intent, customColor]);
+  const segmentClasses = (0, import_class_variance_authority2.cx)(
+    "border-outline relative rounded-full",
+    {
+      "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
+    },
+    className
+  );
+  const indicatorClasses = (0, import_class_variance_authority2.cx)(
+    "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": size === "sm",
+      "size-sz-20 border-lg": size === "md"
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      "data-spark-component": "segmented-gauge-segment",
+      "data-testid": "segmented-gauge-segment",
+      "data-active": isActive,
+      "data-current": isCurrent,
+      ref,
+      style: {
+        "--gauge-color": gaugeColor
+      },
+      className: segmentClasses,
+      ...props,
+      children: [
+        children,
+        isCurrent && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: indicatorClasses, "aria-hidden": "true" })
+      ]
+    }
+  );
+};
+SegmentedGaugeSegment.displayName = "SegmentedGauge.Segment";
+
+// src/segmented-gauge/SegmentedGaugeTrack.tsx
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SegmentedGaugeTrack = ({
+  className,
+  children,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      "data-spark-component": "segmented-gauge-track",
+      ref,
+      className: (0, import_class_variance_authority3.cx)("gap-sm relative flex rounded-full", className),
+      ...props,
+      children
+    }
+  );
+};
+SegmentedGaugeTrack.displayName = "SegmentedGauge.Track";
+
+// src/segmented-gauge/SegmentedGauge.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var calculateCurrentIndex = (value, min, max, segments) => {
+  if (value == null) {
+    return -1;
+  }
+  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 segments = max - min + 1;
+  const currentIndex = (0, import_react3.useMemo)(
+    () => calculateCurrentIndex(value, min, max, segments),
+    [value, min, max, segments]
+  );
+  const internalLabelId = (0, import_react3.useId)();
+  const generatedId = (0, import_react3.useId)();
+  const gaugeId = id || generatedId;
+  const segmentsData = (0, import_react3.useMemo)(() => {
+    return Array.from({ length: segments }, (_, index) => ({
+      isActive: currentIndex !== -1 && index <= currentIndex,
+      isCurrent: currentIndex !== -1 && index === currentIndex
+    }));
+  }, [segments, currentIndex]);
+  const contextValue = (0, import_react3.useMemo)(
+    () => ({
+      value,
+      min,
+      max,
+      segments,
+      currentIndex,
+      size,
+      intent,
+      customColor,
+      labelId: internalLabelId,
+      gaugeId
+    }),
+    [value, min, max, segments, currentIndex, size, intent, customColor, internalLabelId, gaugeId]
+  );
+  if (children) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SegmentedGaugeContext.Provider, { value: contextValue, children: children({
+      segments: segmentsData,
+      currentIndex
+    }) });
+  }
+  const roleProps = value != null ? {
+    role: "meter",
+    "aria-valuenow": value,
+    "aria-valuemin": min,
+    "aria-valuemax": max
+  } : {
+    role: "status"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SegmentedGaugeContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      id: gaugeId,
+      "data-spark-component": "segmented-gauge",
+      ref,
+      className: (0, import_class_variance_authority4.cx)("gap-md flex items-center", className),
+      ...roleProps,
+      "aria-labelledby": id ? `${gaugeId}-label` : void 0,
+      "aria-label": !id ? ariaLabel : void 0,
+      "aria-describedby": internalLabelId,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SegmentedGaugeTrack, { children: segmentsData.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SegmentedGaugeSegment, { index }, index)) }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SegmentedGaugeLabel, { id: internalLabelId, children: description })
+      ]
+    }
+  ) });
+};
+SegmentedGauge.displayName = "SegmentedGauge";
+
+// src/segmented-gauge/index.ts
+var SegmentedGauge2 = Object.assign(SegmentedGauge, {
+  Track: SegmentedGaugeTrack,
+  Segment: SegmentedGaugeSegment,
+  Label: SegmentedGaugeLabel
+});
+SegmentedGauge2.displayName = "SegmentedGauge";
+SegmentedGaugeTrack.displayName = "SegmentedGauge.Track";
+SegmentedGaugeSegment.displayName = "SegmentedGauge.Segment";
+SegmentedGaugeLabel.displayName = "SegmentedGauge.Label";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SegmentedGauge
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"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   * 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  // If children is provided, use render prop pattern\n  if (children) {\n    return (\n      <SegmentedGaugeContext.Provider value={contextValue}>\n        {children({\n          segments: segmentsData,\n          currentIndex,\n        })}\n      </SegmentedGaugeContext.Provider>\n    )\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  // Default rendering\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 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        <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      </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"]}