@spark-ui/components 17.2.3 → 17.2.4

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/scrolling-list/ScrollingList.tsx","../../src/scrolling-list/ScrollingListControls.tsx","../../src/scrolling-list/useFocusWithinScroll.tsx","../../src/scrolling-list/ScrollingListItem.tsx","../../src/scrolling-list/ScrollingListItems.tsx","../../src/scrolling-list/ScrollingListNextButton.tsx","../../src/scrolling-list/ScrollingListPrevButton.tsx","../../src/scrolling-list/ScrollingListSkipButton.tsx","../../src/scrolling-list/index.ts"],"sourcesContent":["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, refresh: refreshOverflow } = useScrollOverflow(scrollAreaRef, {\n    precisionTreshold: 1,\n  })\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        refreshOverflow()\n      })\n    }\n  }, [children, refreshOverflow])\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 { 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 { 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 { 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 { 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","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"],"names":["ScrollingListContext","createContext","ScrollingList","snapType","snapStop","scrollBehavior","loop","gap","withFade","scrollPadding","children","className","rest","scrollAreaRef","useRef","skipAnchorRef","snapCarouselAPI","useSnapCarousel","overflow","refreshOverflow","useScrollOverflow","activePageIndex","pages","refresh","visibleItems","visibleItemsRange","forceRefresh","useCallback","useEffect","useLayoutEffect","ctxValue","jsxs","jsx","cx","ScrollingListControls","visibility","useFocusWithinScroll","ref","scrollRef","isFocusWithin","setIsFocusWithin","useState","handleFocusIn","event","focusedElement","scrollContainer","focusRect","scrollRect","handleFocusOut","node","ScrollingListItem","asChild","index","ctx","useContext","itemRef","isSnapPoint","Slot","mergeRefs","refs","value","ScrollingListItems","snapConfig","handleLeftArrow","handleRightArrow","handleKeyDown","inlineStyles","Children","child","isValidElement","cloneElement","ScrollingListNextButton","ariaLabel","handleNextPage","isDisabled","IconButton","Icon","ArrowVerticalRight","ScrollingListPrevButton","handlePrevPage","ArrowVerticalLeft","ScrollingListSkipButton","Button","Root","Controls","NextButton","PrevButton","Item","Items","SkipButton"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/scrolling-list/ScrollingList.tsx","../../src/scrolling-list/ScrollingListControls.tsx","../../src/scrolling-list/useFocusWithinScroll.tsx","../../src/scrolling-list/ScrollingListItem.tsx","../../src/scrolling-list/ScrollingListItems.tsx","../../src/scrolling-list/ScrollingListNextButton.tsx","../../src/scrolling-list/ScrollingListPrevButton.tsx","../../src/scrolling-list/ScrollingListSkipButton.tsx","../../src/scrolling-list/index.ts"],"sourcesContent":["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, refresh: refreshOverflow } = useScrollOverflow(scrollAreaRef, {\n    precisionTreshold: 1,\n  })\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        refreshOverflow()\n      })\n    }\n  }, [children, refreshOverflow])\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 { 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 { 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 { 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 { 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","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"],"mappings":"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"}

package/dist/segmented-control/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react/jsx-runtime"),z=require("@base-ui/react/radio-group"),N=require("@spark-ui/components/form-field"),E=require("@spark-ui/hooks/use-merge-refs"),o=require("react"),S=require("class-variance-authority"),L=require("@base-ui/react/radio"),F=S.cva(["default:self-start","group inline-grid grid-flow-col auto-cols-fr","relative items-stretch min-w-max","rounded-xl p-sm","bg-surface border-sm border-outline"]),M=S.cva(["relative z-raised min-h-sz-44 focus-visible:outline-none","flex flex-none items-center justify-center gap-md","default:px-lg default:py-md","rounded-[20px]","cursor-pointer select-none","font-medium","transition-colors duration-150","outline-none","focus-visible:u-outline","data-disabled:cursor-not-allowed data-disabled:opacity-dim-3","data-checked:text-on-support-container","data-checked:[&>[data-spark-segmented-control-text]]:[text-shadow:0.35px_0_currentColor,-0.35px_0_currentColor]"]),O=S.cva(["absolute z-base","rounded-[20px]","bg-support-container border-md border-support","group-has-focus-visible:border-focus","transition-[left,top,width,height] duration-200 ease-in-out","pointer-events-none"]),I=o.createContext({}),_=()=>{const e=o.useContext(I);if(!e)throw Error("useSegmentedControlContext must be used within a SegmentedControlContext Provider");return e},P=e=>{let n=null;return o.Children.forEach(e,r=>{n===null&&o.isValidElement(r)&&typeof r.props.value=="string"&&(n=r.props.value)}),n},V=({value:e,defaultValue:n,onValueChange:r,className:c,children:i,ref:s,...u})=>{const t=o.useRef(null),g=E.useMergeRefs(t,s),f=P(i),m=e!==void 0,[a,h]=o.useState(()=>n??f),p=m?e??null:a,l=k=>{const R=k;m||h(R),r?.(R)},{labelId:C,description:d,isRequired:b,isInvalid:x,name:j}=N.useFormFieldControl();return v.jsx(I.Provider,{value:{checkedValue:p,containerRef:t},children:v.jsx(z.RadioGroup,{ref:g,value:m?e:void 0,defaultValue:m?void 0:n??f??void 0,onValueChange:l,"data-spark-component":"segmented-control",className:F({className:c}),"aria-labelledby":C,"aria-describedby":d,"aria-required":b||void 0,"aria-invalid":x||void 0,name:j,...u,children:i})})};V.displayName="SegmentedControl";const y=({className:e,ref:n,...r})=>{const{checkedValue:c,containerRef:i}=_(),[s,u]=o.useState(null),t=o.useMemo(()=>c?`[data-value="${CSS.escape(c)}"]`:null,[c]);if(o.useEffect(()=>{const f=i.current;if(!f)return;const m=t?f.querySelector(t):null,a=()=>{const p=i.current;if(!p||!t){u(null);return}const l=p.querySelector(t);if(!l){u(null);return}const C=p.getBoundingClientRect(),d=l.getBoundingClientRect(),b=l.offsetWidth>0?d.width/l.offsetWidth:1,x=l.offsetHeight>0?d.height/l.offsetHeight:1;u({left:(d.left-C.left)/b-p.clientLeft,top:(d.top-C.top)/x-p.clientTop,width:d.width/b,height:d.height/x})};a();const h=typeof ResizeObserver<"u"?new ResizeObserver(()=>{a()}):null;return h?.observe(f),m&&h?.observe(m),window.addEventListener("resize",a,{passive:!0}),window.visualViewport?.addEventListener("resize",a,{passive:!0}),()=>{h?.disconnect(),window.removeEventListener("resize",a),window.visualViewport?.removeEventListener("resize",a)}},[i,t]),!s)return null;const g={left:s.left,top:s.top,width:s.width,height:s.height};return v.jsx("span",{ref:n,"data-spark-component":"segmented-control-indicator","aria-hidden":!0,className:O({className:e}),style:g,...r})};y.displayName="SegmentedControl.Indicator";const w=({value:e,disabled:n=!1,children:r,className:c,ref:i,...s})=>{const u=o.Children.toArray(r).map((t,g)=>typeof t=="string"||typeof t=="number"?v.jsx("span",{"data-spark-segmented-control-text":!0,children:t},`text-${g}`):t);return v.jsx(L.Radio.Root,{ref:i,"data-spark-component":"segmented-control-item","data-value":e,value:e,disabled:n,className:M({className:c}),...s,children:u})};w.displayName="SegmentedControl.Item";const q=Object.assign(V,{Item:w,Indicator:y});q.displayName="SegmentedControl";w.displayName="SegmentedControl.Item";y.displayName="SegmentedControl.Indicator";exports.SegmentedControl=q;
-//# sourceMappingURL=index.js.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`class-variance-authority`),t=require(`react`),n=require(`react/jsx-runtime`),r=require(`@spark-ui/hooks/use-merge-refs`),i=require(`@spark-ui/components/form-field`),a=require(`@base-ui/react/radio-group`),o=require(`@base-ui/react/radio`);var s=(0,e.cva)([`default:self-start`,`group inline-grid grid-flow-col auto-cols-fr`,`relative items-stretch min-w-max`,`rounded-xl p-sm`,`bg-surface border-sm border-outline`]),c=(0,e.cva)([`relative z-raised min-h-sz-44 focus-visible:outline-none`,`flex flex-none items-center justify-center gap-md`,`default:px-lg default:py-md`,`rounded-[20px]`,`cursor-pointer select-none`,`font-medium`,`transition-colors duration-150`,`outline-none`,`focus-visible:u-outline`,`data-disabled:cursor-not-allowed data-disabled:opacity-dim-3`,`data-checked:text-on-support-container`,`data-checked:[&>[data-spark-segmented-control-text]]:[text-shadow:0.35px_0_currentColor,-0.35px_0_currentColor]`]),l=(0,e.cva)([`absolute z-base`,`rounded-[20px]`,`bg-support-container border-md border-support`,`group-has-focus-visible:border-focus`,`transition-[left,top,width,height] duration-200 ease-in-out`,`pointer-events-none`]),u=(0,t.createContext)({}),d=()=>{let e=(0,t.useContext)(u);if(!e)throw Error(`useSegmentedControlContext must be used within a SegmentedControlContext Provider`);return e},f=e=>{let n=null;return t.Children.forEach(e,e=>{n===null&&(0,t.isValidElement)(e)&&typeof e.props.value==`string`&&(n=e.props.value)}),n},p=({value:e,defaultValue:o,onValueChange:c,className:l,children:d,ref:p,...m})=>{let h=(0,t.useRef)(null),g=(0,r.useMergeRefs)(h,p),_=f(d),v=e!==void 0,[y,b]=(0,t.useState)(()=>o??_),x=v?e??null:y,S=e=>{let t=e;v||b(t),c?.(t)},{labelId:C,description:w,isRequired:T,isInvalid:E,name:D}=(0,i.useFormFieldControl)();return(0,n.jsx)(u.Provider,{value:{checkedValue:x,containerRef:h},children:(0,n.jsx)(a.RadioGroup,{ref:g,value:v?e:void 0,defaultValue:v?void 0:o??_??void 0,onValueChange:S,"data-spark-component":`segmented-control`,className:s({className:l}),"aria-labelledby":C,"aria-describedby":w,"aria-required":T||void 0,"aria-invalid":E||void 0,name:D,...m,children:d})})};p.displayName=`SegmentedControl`;var m=({className:e,ref:r,...i})=>{let{checkedValue:a,containerRef:o}=d(),[s,c]=(0,t.useState)(null),u=(0,t.useMemo)(()=>a?`[data-value="${CSS.escape(a)}"]`:null,[a]);if((0,t.useEffect)(()=>{let e=o.current;if(!e)return;let t=u?e.querySelector(u):null,n=()=>{let e=o.current;if(!e||!u){c(null);return}let t=e.querySelector(u);if(!t){c(null);return}let n=e.getBoundingClientRect(),r=t.getBoundingClientRect(),i=t.offsetWidth>0?r.width/t.offsetWidth:1,a=t.offsetHeight>0?r.height/t.offsetHeight:1;c({left:(r.left-n.left)/i-e.clientLeft,top:(r.top-n.top)/a-e.clientTop,width:r.width/i,height:r.height/a})};n();let r=typeof ResizeObserver<`u`?new ResizeObserver(()=>{n()}):null;return r?.observe(e),t&&r?.observe(t),window.addEventListener(`resize`,n,{passive:!0}),window.visualViewport?.addEventListener(`resize`,n,{passive:!0}),()=>{r?.disconnect(),window.removeEventListener(`resize`,n),window.visualViewport?.removeEventListener(`resize`,n)}},[o,u]),!s)return null;let f={left:s.left,top:s.top,width:s.width,height:s.height};return(0,n.jsx)(`span`,{ref:r,"data-spark-component":`segmented-control-indicator`,"aria-hidden":!0,className:l({className:e}),style:f,...i})};m.displayName=`SegmentedControl.Indicator`;var h=({value:e,disabled:r=!1,children:i,className:a,ref:s,...l})=>{let u=t.Children.toArray(i).map((e,t)=>typeof e==`string`||typeof e==`number`?(0,n.jsx)(`span`,{"data-spark-segmented-control-text":!0,children:e},`text-${t}`):e);return(0,n.jsx)(o.Radio.Root,{ref:s,"data-spark-component":`segmented-control-item`,"data-value":e,value:e,disabled:r,className:c({className:a}),...l,children:u})};h.displayName=`SegmentedControl.Item`;var g=Object.assign(p,{Item:h,Indicator:m});g.displayName=`SegmentedControl`,h.displayName=`SegmentedControl.Item`,m.displayName=`SegmentedControl.Indicator`,exports.SegmentedControl=g;
+//# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/segmented-control/SegmentedControl.styles.ts","../../src/segmented-control/SegmentedControlContext.tsx","../../src/segmented-control/SegmentedControl.tsx","../../src/segmented-control/SegmentedControlIndicator.tsx","../../src/segmented-control/SegmentedControlItem.tsx","../../src/segmented-control/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'default:self-start',\n  'group inline-grid grid-flow-col auto-cols-fr',\n  'relative items-stretch min-w-max',\n  'rounded-xl p-sm',\n  'bg-surface border-sm border-outline',\n])\n\nexport const itemStyles = cva([\n  'relative z-raised min-h-sz-44 focus-visible:outline-none',\n  'flex flex-none items-center justify-center gap-md',\n  'default:px-lg default:py-md',\n  'rounded-[20px]',\n  'cursor-pointer select-none',\n  'font-medium',\n  'transition-colors duration-150',\n  'outline-none',\n  'focus-visible:u-outline',\n  'data-disabled:cursor-not-allowed data-disabled:opacity-dim-3',\n  'data-checked:text-on-support-container',\n  // Avoid layout shift: simulate \"bold\" without changing font metrics.\n  // Apply only to wrapped text nodes (not arbitrary nested JSX like Tag).\n  'data-checked:[&>[data-spark-segmented-control-text]]:[text-shadow:0.35px_0_currentColor,-0.35px_0_currentColor]',\n])\n\nexport const indicatorStyles = cva([\n  'absolute z-base',\n  'rounded-[20px]',\n  'bg-support-container border-md border-support',\n  'group-has-focus-visible:border-focus',\n  'transition-[left,top,width,height] duration-200 ease-in-out',\n  'pointer-events-none',\n])\n\nexport type SegmentedControlStylesProps = VariantProps<typeof itemStyles>\n","import { createContext, RefObject, useContext } from 'react'\n\nexport interface SegmentedControlContextInterface {\n  checkedValue: string | null\n  containerRef: RefObject<HTMLDivElement | null>\n}\n\nexport const SegmentedControlContext = createContext<SegmentedControlContextInterface>(\n  {} as SegmentedControlContextInterface\n)\n\nexport const useSegmentedControlContext = () => {\n  const context = useContext(SegmentedControlContext)\n\n  if (!context) {\n    throw Error('useSegmentedControlContext must be used within a SegmentedControlContext Provider')\n  }\n\n  return context\n}\n","import { RadioGroup } from '@base-ui/react/radio-group'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { Children, type ComponentProps, isValidElement, Ref, useRef, useState } from 'react'\n\nimport type { SegmentedControlStylesProps } from './SegmentedControl.styles'\nimport { rootStyles } from './SegmentedControl.styles'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nexport interface SegmentedControlProps\n  extends Omit<ComponentProps<typeof RadioGroup>, 'value' | 'defaultValue' | 'onValueChange'>,\n    SegmentedControlStylesProps {\n  /**\n   * The controlled selected value.\n   */\n  value?: string\n  /**\n   * The uncontrolled default selected value.\n   */\n  defaultValue?: string\n  /**\n   * Callback fired when the selected value changes.\n   */\n  onValueChange?: (value: string) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nconst getFirstItemValue = (children: React.ReactNode): string | null => {\n  let firstValue: string | null = null\n\n  Children.forEach(children, child => {\n    if (firstValue !== null) return\n    if (isValidElement(child) && typeof (child.props as { value?: string }).value === 'string') {\n      firstValue = (child.props as { value: string }).value\n    }\n  })\n\n  return firstValue\n}\n\nexport const SegmentedControl = ({\n  value,\n  defaultValue,\n  onValueChange,\n  className,\n  children,\n  ref,\n  ...rest\n}: SegmentedControlProps) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const mergedRef = useMergeRefs(containerRef, ref)\n\n  const firstValue = getFirstItemValue(children)\n\n  const isControlled = value !== undefined\n  const [internalValue, setInternalValue] = useState<string | null>(\n    () => defaultValue ?? firstValue\n  )\n  const checkedValue = isControlled ? (value ?? null) : internalValue\n\n  const handleValueChange = (newValue: unknown) => {\n    const next = newValue as string\n\n    if (!isControlled) {\n      setInternalValue(next)\n    }\n\n    onValueChange?.(next)\n  }\n\n  const { labelId, description, isRequired, isInvalid, name } = useFormFieldControl()\n\n  return (\n    <SegmentedControlContext.Provider\n      value={{\n        checkedValue,\n        containerRef,\n      }}\n    >\n      <RadioGroup\n        ref={mergedRef}\n        value={isControlled ? value : undefined}\n        defaultValue={!isControlled ? (defaultValue ?? firstValue ?? undefined) : undefined}\n        onValueChange={handleValueChange}\n        data-spark-component=\"segmented-control\"\n        className={rootStyles({ className })}\n        aria-labelledby={labelId}\n        aria-describedby={description}\n        aria-required={isRequired || undefined}\n        aria-invalid={isInvalid || undefined}\n        name={name}\n        {...rest}\n      >\n        {children}\n      </RadioGroup>\n    </SegmentedControlContext.Provider>\n  )\n}\n\nSegmentedControl.displayName = 'SegmentedControl'\n","import { type ComponentProps, type CSSProperties, Ref, useEffect, useMemo, useState } from 'react'\n\nimport { indicatorStyles } from './SegmentedControl.styles'\nimport { useSegmentedControlContext } from './SegmentedControlContext'\n\ninterface IndicatorRect {\n  left: number\n  top: number\n  width: number\n  height: number\n}\n\nexport interface SegmentedControlIndicatorProps extends ComponentProps<'span'> {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const SegmentedControlIndicator = ({\n  className,\n  ref,\n  ...rest\n}: SegmentedControlIndicatorProps) => {\n  const { checkedValue, containerRef } = useSegmentedControlContext()\n  const [rect, setRect] = useState<IndicatorRect | null>(null)\n\n  const selector = useMemo(\n    () => (checkedValue ? `[data-value=\"${CSS.escape(checkedValue)}\"]` : null),\n    [checkedValue]\n  )\n\n  useEffect(() => {\n    const container = containerRef.current\n\n    if (!container) {\n      return\n    }\n\n    const selectedItem = selector ? container.querySelector<HTMLElement>(selector) : null\n\n    const update = () => {\n      const currentContainer = containerRef.current\n      if (!currentContainer || !selector) {\n        setRect(null)\n\n        return\n      }\n\n      const currentSelected = currentContainer.querySelector<HTMLElement>(selector)\n      if (!currentSelected) {\n        setRect(null)\n\n        return\n      }\n\n      const containerRect = currentContainer.getBoundingClientRect()\n      const itemRect = currentSelected.getBoundingClientRect()\n\n      // Storybook canvas \"zoom\" can be implemented via `transform: scale()`.\n      // In that case, `getBoundingClientRect()` returns *scaled* values, but CSS positioning/sizing\n      // expects unscaled layout pixels. We infer the scale factor from offset sizes and normalize.\n      const scaleX =\n        currentSelected.offsetWidth > 0 ? itemRect.width / currentSelected.offsetWidth : 1\n      const scaleY =\n        currentSelected.offsetHeight > 0 ? itemRect.height / currentSelected.offsetHeight : 1\n\n      // `getBoundingClientRect()` is border-box; absolute positioning is relative to the padding box.\n      setRect({\n        left: (itemRect.left - containerRect.left) / scaleX - currentContainer.clientLeft,\n        top: (itemRect.top - containerRect.top) / scaleY - currentContainer.clientTop,\n        width: itemRect.width / scaleX,\n        height: itemRect.height / scaleY,\n      })\n    }\n\n    update()\n\n    const ro =\n      typeof ResizeObserver !== 'undefined'\n        ? new ResizeObserver(() => {\n            update()\n          })\n        : null\n\n    ro?.observe(container)\n    if (selectedItem) ro?.observe(selectedItem)\n\n    window.addEventListener('resize', update, { passive: true })\n    window.visualViewport?.addEventListener('resize', update, { passive: true })\n\n    return () => {\n      ro?.disconnect()\n      window.removeEventListener('resize', update)\n      window.visualViewport?.removeEventListener('resize', update)\n    }\n  }, [containerRef, selector])\n\n  if (!rect) return null\n\n  const style: CSSProperties = {\n    left: rect.left,\n    top: rect.top,\n    width: rect.width,\n    height: rect.height,\n  }\n\n  return (\n    <span\n      ref={ref}\n      data-spark-component=\"segmented-control-indicator\"\n      aria-hidden\n      className={indicatorStyles({ className })}\n      style={style}\n      {...rest}\n    />\n  )\n}\n\nSegmentedControlIndicator.displayName = 'SegmentedControl.Indicator'\n","import { Radio } from '@base-ui/react/radio'\nimport { Children, type ComponentProps, Ref } from 'react'\n\nimport { itemStyles } from './SegmentedControl.styles'\n\nexport interface SegmentedControlItemProps\n  extends Omit<ComponentProps<typeof Radio.Root>, 'value'> {\n  /**\n   * A unique value that identifies this item within the segmented control.\n   */\n  value: string\n  /**\n   * When true, prevents the user from interacting with this item.\n   * @default false\n   */\n  disabled?: boolean\n  ref?: Ref<HTMLElement>\n}\n\nexport const SegmentedControlItem = ({\n  value,\n  disabled = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: SegmentedControlItemProps) => {\n  const content = Children.toArray(children).map((child, index) => {\n    if (typeof child === 'string' || typeof child === 'number') {\n      return (\n        <span key={`text-${index}`} data-spark-segmented-control-text>\n          {child}\n        </span>\n      )\n    }\n\n    return child\n  })\n\n  return (\n    <Radio.Root\n      ref={ref}\n      data-spark-component=\"segmented-control-item\"\n      data-value={value}\n      value={value}\n      disabled={disabled}\n      className={itemStyles({ className })}\n      {...rest}\n    >\n      {content}\n    </Radio.Root>\n  )\n}\n\nSegmentedControlItem.displayName = 'SegmentedControl.Item'\n","import { SegmentedControl as Root } from './SegmentedControl'\nimport { SegmentedControlIndicator as Indicator } from './SegmentedControlIndicator'\nimport { SegmentedControlItem as Item } from './SegmentedControlItem'\n\nexport const SegmentedControl: typeof Root & {\n  Item: typeof Item\n  Indicator: typeof Indicator\n} = Object.assign(Root, {\n  Item,\n  Indicator,\n})\n\nSegmentedControl.displayName = 'SegmentedControl'\nItem.displayName = 'SegmentedControl.Item'\nIndicator.displayName = 'SegmentedControl.Indicator'\n\nexport type { SegmentedControlProps } from './SegmentedControl'\nexport type { SegmentedControlItemProps } from './SegmentedControlItem'\nexport type { SegmentedControlIndicatorProps } from './SegmentedControlIndicator'\n"],"names":["rootStyles","cva","itemStyles","indicatorStyles","SegmentedControlContext","createContext","useSegmentedControlContext","context","useContext","getFirstItemValue","children","firstValue","Children","child","isValidElement","SegmentedControl","value","defaultValue","onValueChange","className","ref","rest","containerRef","useRef","mergedRef","useMergeRefs","isControlled","internalValue","setInternalValue","useState","checkedValue","handleValueChange","newValue","next","labelId","description","isRequired","isInvalid","name","useFormFieldControl","jsx","RadioGroup","SegmentedControlIndicator","rect","setRect","selector","useMemo","useEffect","container","selectedItem","update","currentContainer","currentSelected","containerRect","itemRect","scaleX","scaleY","ro","style","SegmentedControlItem","disabled","content","index","Radio","Root","Item","Indicator"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/segmented-control/SegmentedControl.styles.ts","../../src/segmented-control/SegmentedControlContext.tsx","../../src/segmented-control/SegmentedControl.tsx","../../src/segmented-control/SegmentedControlIndicator.tsx","../../src/segmented-control/SegmentedControlItem.tsx","../../src/segmented-control/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'default:self-start',\n  'group inline-grid grid-flow-col auto-cols-fr',\n  'relative items-stretch min-w-max',\n  'rounded-xl p-sm',\n  'bg-surface border-sm border-outline',\n])\n\nexport const itemStyles = cva([\n  'relative z-raised min-h-sz-44 focus-visible:outline-none',\n  'flex flex-none items-center justify-center gap-md',\n  'default:px-lg default:py-md',\n  'rounded-[20px]',\n  'cursor-pointer select-none',\n  'font-medium',\n  'transition-colors duration-150',\n  'outline-none',\n  'focus-visible:u-outline',\n  'data-disabled:cursor-not-allowed data-disabled:opacity-dim-3',\n  'data-checked:text-on-support-container',\n  // Avoid layout shift: simulate \"bold\" without changing font metrics.\n  // Apply only to wrapped text nodes (not arbitrary nested JSX like Tag).\n  'data-checked:[&>[data-spark-segmented-control-text]]:[text-shadow:0.35px_0_currentColor,-0.35px_0_currentColor]',\n])\n\nexport const indicatorStyles = cva([\n  'absolute z-base',\n  'rounded-[20px]',\n  'bg-support-container border-md border-support',\n  'group-has-focus-visible:border-focus',\n  'transition-[left,top,width,height] duration-200 ease-in-out',\n  'pointer-events-none',\n])\n\nexport type SegmentedControlStylesProps = VariantProps<typeof itemStyles>\n","import { createContext, RefObject, useContext } from 'react'\n\nexport interface SegmentedControlContextInterface {\n  checkedValue: string | null\n  containerRef: RefObject<HTMLDivElement | null>\n}\n\nexport const SegmentedControlContext = createContext<SegmentedControlContextInterface>(\n  {} as SegmentedControlContextInterface\n)\n\nexport const useSegmentedControlContext = () => {\n  const context = useContext(SegmentedControlContext)\n\n  if (!context) {\n    throw Error('useSegmentedControlContext must be used within a SegmentedControlContext Provider')\n  }\n\n  return context\n}\n","import { RadioGroup } from '@base-ui/react/radio-group'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { Children, type ComponentProps, isValidElement, Ref, useRef, useState } from 'react'\n\nimport type { SegmentedControlStylesProps } from './SegmentedControl.styles'\nimport { rootStyles } from './SegmentedControl.styles'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nexport interface SegmentedControlProps\n  extends\n    Omit<ComponentProps<typeof RadioGroup>, 'value' | 'defaultValue' | 'onValueChange'>,\n    SegmentedControlStylesProps {\n  /**\n   * The controlled selected value.\n   */\n  value?: string\n  /**\n   * The uncontrolled default selected value.\n   */\n  defaultValue?: string\n  /**\n   * Callback fired when the selected value changes.\n   */\n  onValueChange?: (value: string) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nconst getFirstItemValue = (children: React.ReactNode): string | null => {\n  let firstValue: string | null = null\n\n  Children.forEach(children, child => {\n    if (firstValue !== null) return\n    if (isValidElement(child) && typeof (child.props as { value?: string }).value === 'string') {\n      firstValue = (child.props as { value: string }).value\n    }\n  })\n\n  return firstValue\n}\n\nexport const SegmentedControl = ({\n  value,\n  defaultValue,\n  onValueChange,\n  className,\n  children,\n  ref,\n  ...rest\n}: SegmentedControlProps) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const mergedRef = useMergeRefs(containerRef, ref)\n\n  const firstValue = getFirstItemValue(children)\n\n  const isControlled = value !== undefined\n  const [internalValue, setInternalValue] = useState<string | null>(\n    () => defaultValue ?? firstValue\n  )\n  const checkedValue = isControlled ? (value ?? null) : internalValue\n\n  const handleValueChange = (newValue: unknown) => {\n    const next = newValue as string\n\n    if (!isControlled) {\n      setInternalValue(next)\n    }\n\n    onValueChange?.(next)\n  }\n\n  const { labelId, description, isRequired, isInvalid, name } = useFormFieldControl()\n\n  return (\n    <SegmentedControlContext.Provider\n      value={{\n        checkedValue,\n        containerRef,\n      }}\n    >\n      <RadioGroup\n        ref={mergedRef}\n        value={isControlled ? value : undefined}\n        defaultValue={!isControlled ? (defaultValue ?? firstValue ?? undefined) : undefined}\n        onValueChange={handleValueChange}\n        data-spark-component=\"segmented-control\"\n        className={rootStyles({ className })}\n        aria-labelledby={labelId}\n        aria-describedby={description}\n        aria-required={isRequired || undefined}\n        aria-invalid={isInvalid || undefined}\n        name={name}\n        {...rest}\n      >\n        {children}\n      </RadioGroup>\n    </SegmentedControlContext.Provider>\n  )\n}\n\nSegmentedControl.displayName = 'SegmentedControl'\n","import { type ComponentProps, type CSSProperties, Ref, useEffect, useMemo, useState } from 'react'\n\nimport { indicatorStyles } from './SegmentedControl.styles'\nimport { useSegmentedControlContext } from './SegmentedControlContext'\n\ninterface IndicatorRect {\n  left: number\n  top: number\n  width: number\n  height: number\n}\n\nexport interface SegmentedControlIndicatorProps extends ComponentProps<'span'> {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const SegmentedControlIndicator = ({\n  className,\n  ref,\n  ...rest\n}: SegmentedControlIndicatorProps) => {\n  const { checkedValue, containerRef } = useSegmentedControlContext()\n  const [rect, setRect] = useState<IndicatorRect | null>(null)\n\n  const selector = useMemo(\n    () => (checkedValue ? `[data-value=\"${CSS.escape(checkedValue)}\"]` : null),\n    [checkedValue]\n  )\n\n  useEffect(() => {\n    const container = containerRef.current\n\n    if (!container) {\n      return\n    }\n\n    const selectedItem = selector ? container.querySelector<HTMLElement>(selector) : null\n\n    const update = () => {\n      const currentContainer = containerRef.current\n      if (!currentContainer || !selector) {\n        setRect(null)\n\n        return\n      }\n\n      const currentSelected = currentContainer.querySelector<HTMLElement>(selector)\n      if (!currentSelected) {\n        setRect(null)\n\n        return\n      }\n\n      const containerRect = currentContainer.getBoundingClientRect()\n      const itemRect = currentSelected.getBoundingClientRect()\n\n      // Storybook canvas \"zoom\" can be implemented via `transform: scale()`.\n      // In that case, `getBoundingClientRect()` returns *scaled* values, but CSS positioning/sizing\n      // expects unscaled layout pixels. We infer the scale factor from offset sizes and normalize.\n      const scaleX =\n        currentSelected.offsetWidth > 0 ? itemRect.width / currentSelected.offsetWidth : 1\n      const scaleY =\n        currentSelected.offsetHeight > 0 ? itemRect.height / currentSelected.offsetHeight : 1\n\n      // `getBoundingClientRect()` is border-box; absolute positioning is relative to the padding box.\n      setRect({\n        left: (itemRect.left - containerRect.left) / scaleX - currentContainer.clientLeft,\n        top: (itemRect.top - containerRect.top) / scaleY - currentContainer.clientTop,\n        width: itemRect.width / scaleX,\n        height: itemRect.height / scaleY,\n      })\n    }\n\n    update()\n\n    const ro =\n      typeof ResizeObserver !== 'undefined'\n        ? new ResizeObserver(() => {\n            update()\n          })\n        : null\n\n    ro?.observe(container)\n    if (selectedItem) ro?.observe(selectedItem)\n\n    window.addEventListener('resize', update, { passive: true })\n    window.visualViewport?.addEventListener('resize', update, { passive: true })\n\n    return () => {\n      ro?.disconnect()\n      window.removeEventListener('resize', update)\n      window.visualViewport?.removeEventListener('resize', update)\n    }\n  }, [containerRef, selector])\n\n  if (!rect) return null\n\n  const style: CSSProperties = {\n    left: rect.left,\n    top: rect.top,\n    width: rect.width,\n    height: rect.height,\n  }\n\n  return (\n    <span\n      ref={ref}\n      data-spark-component=\"segmented-control-indicator\"\n      aria-hidden\n      className={indicatorStyles({ className })}\n      style={style}\n      {...rest}\n    />\n  )\n}\n\nSegmentedControlIndicator.displayName = 'SegmentedControl.Indicator'\n","import { Radio } from '@base-ui/react/radio'\nimport { Children, type ComponentProps, Ref } from 'react'\n\nimport { itemStyles } from './SegmentedControl.styles'\n\nexport interface SegmentedControlItemProps extends Omit<\n  ComponentProps<typeof Radio.Root>,\n  'value'\n> {\n  /**\n   * A unique value that identifies this item within the segmented control.\n   */\n  value: string\n  /**\n   * When true, prevents the user from interacting with this item.\n   * @default false\n   */\n  disabled?: boolean\n  ref?: Ref<HTMLElement>\n}\n\nexport const SegmentedControlItem = ({\n  value,\n  disabled = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: SegmentedControlItemProps) => {\n  const content = Children.toArray(children).map((child, index) => {\n    if (typeof child === 'string' || typeof child === 'number') {\n      return (\n        <span key={`text-${index}`} data-spark-segmented-control-text>\n          {child}\n        </span>\n      )\n    }\n\n    return child\n  })\n\n  return (\n    <Radio.Root\n      ref={ref}\n      data-spark-component=\"segmented-control-item\"\n      data-value={value}\n      value={value}\n      disabled={disabled}\n      className={itemStyles({ className })}\n      {...rest}\n    >\n      {content}\n    </Radio.Root>\n  )\n}\n\nSegmentedControlItem.displayName = 'SegmentedControl.Item'\n","import { SegmentedControl as Root } from './SegmentedControl'\nimport { SegmentedControlIndicator as Indicator } from './SegmentedControlIndicator'\nimport { SegmentedControlItem as Item } from './SegmentedControlItem'\n\nexport const SegmentedControl: typeof Root & {\n  Item: typeof Item\n  Indicator: typeof Indicator\n} = Object.assign(Root, {\n  Item,\n  Indicator,\n})\n\nSegmentedControl.displayName = 'SegmentedControl'\nItem.displayName = 'SegmentedControl.Item'\nIndicator.displayName = 'SegmentedControl.Indicator'\n\nexport type { SegmentedControlProps } from './SegmentedControl'\nexport type { SegmentedControlItemProps } from './SegmentedControlItem'\nexport type { SegmentedControlIndicatorProps } from './SegmentedControlIndicator'\n"],"mappings":"kWAEA,IAAa,GAAA,EAAA,EAAA,KAAiB,CAC5B,qBACA,+CACA,mCACA,kBACA,sCACD,CAAC,CAEW,GAAA,EAAA,EAAA,KAAiB,CAC5B,2DACA,oDACA,8BACA,iBACA,6BACA,cACA,iCACA,eACA,0BACA,+DACA,yCAGA,kHACD,CAAC,CAEW,GAAA,EAAA,EAAA,KAAsB,CACjC,kBACA,iBACA,gDACA,uCACA,8DACA,sBACD,CAAC,CC3BW,GAAA,EAAA,EAAA,eACX,EAAE,CACH,CAEY,MAAmC,CAC9C,IAAM,GAAA,EAAA,EAAA,YAAqB,EAAwB,CAEnD,GAAI,CAAC,EACH,MAAM,MAAM,oFAAoF,CAGlG,OAAO,GCUH,EAAqB,GAA6C,CACtE,IAAI,EAA4B,KAShC,OAPA,EAAA,SAAS,QAAQ,EAAU,GAAS,CAC9B,IAAe,OACnB,EAAA,EAAA,gBAAmB,EAAM,EAAI,OAAQ,EAAM,MAA6B,OAAU,WAChF,EAAc,EAAM,MAA4B,QAElD,CAEK,GAGI,GAAoB,CAC/B,QACA,eACA,gBACA,YACA,WACA,MACA,GAAG,KACwB,CAC3B,IAAM,GAAA,EAAA,EAAA,QAA6C,KAAK,CAClD,GAAA,EAAA,EAAA,cAAyB,EAAc,EAAI,CAE3C,EAAa,EAAkB,EAAS,CAExC,EAAe,IAAU,IAAA,GACzB,CAAC,EAAe,IAAA,EAAA,EAAA,cACd,GAAgB,EACvB,CACK,EAAe,EAAgB,GAAS,KAAQ,EAEhD,EAAqB,GAAsB,CAC/C,IAAM,EAAO,EAER,GACH,EAAiB,EAAK,CAGxB,IAAgB,EAAK,EAGjB,CAAE,UAAS,cAAa,aAAY,YAAW,SAAA,EAAA,EAAA,sBAA8B,CAEnF,OACE,EAAA,EAAA,KAAC,EAAwB,SAAzB,CACE,MAAO,CACL,eACA,eACD,WAED,EAAA,EAAA,KAAC,EAAA,WAAD,CACE,IAAK,EACL,MAAO,EAAe,EAAQ,IAAA,GAC9B,aAAe,EAA2D,IAAA,GAA3C,GAAgB,GAAc,IAAA,GAC7D,cAAe,EACf,uBAAqB,oBACrB,UAAW,EAAW,CAAE,YAAW,CAAC,CACpC,kBAAiB,EACjB,mBAAkB,EAClB,gBAAe,GAAc,IAAA,GAC7B,eAAc,GAAa,IAAA,GACrB,OACN,GAAI,EAEH,WACU,CAAA,CACoB,CAAA,EAIvC,EAAiB,YAAc,mBCpF/B,IAAa,GAA6B,CACxC,YACA,MACA,GAAG,KACiC,CACpC,GAAM,CAAE,eAAc,gBAAiB,GAA4B,CAC7D,CAAC,EAAM,IAAA,EAAA,EAAA,UAA0C,KAAK,CAEtD,GAAA,EAAA,EAAA,aACG,EAAe,gBAAgB,IAAI,OAAO,EAAa,CAAC,IAAM,KACrE,CAAC,EAAa,CACf,CAoED,IAlEA,EAAA,EAAA,eAAgB,CACd,IAAM,EAAY,EAAa,QAE/B,GAAI,CAAC,EACH,OAGF,IAAM,EAAe,EAAW,EAAU,cAA2B,EAAS,CAAG,KAE3E,MAAe,CACnB,IAAM,EAAmB,EAAa,QACtC,GAAI,CAAC,GAAoB,CAAC,EAAU,CAClC,EAAQ,KAAK,CAEb,OAGF,IAAM,EAAkB,EAAiB,cAA2B,EAAS,CAC7E,GAAI,CAAC,EAAiB,CACpB,EAAQ,KAAK,CAEb,OAGF,IAAM,EAAgB,EAAiB,uBAAuB,CACxD,EAAW,EAAgB,uBAAuB,CAKlD,EACJ,EAAgB,YAAc,EAAI,EAAS,MAAQ,EAAgB,YAAc,EAC7E,EACJ,EAAgB,aAAe,EAAI,EAAS,OAAS,EAAgB,aAAe,EAGtF,EAAQ,CACN,MAAO,EAAS,KAAO,EAAc,MAAQ,EAAS,EAAiB,WACvE,KAAM,EAAS,IAAM,EAAc,KAAO,EAAS,EAAiB,UACpE,MAAO,EAAS,MAAQ,EACxB,OAAQ,EAAS,OAAS,EAC3B,CAAC,EAGJ,GAAQ,CAER,IAAM,EACJ,OAAO,eAAmB,IACtB,IAAI,mBAAqB,CACvB,GAAQ,EACR,CACF,KAQN,OANA,GAAI,QAAQ,EAAU,CAClB,GAAc,GAAI,QAAQ,EAAa,CAE3C,OAAO,iBAAiB,SAAU,EAAQ,CAAE,QAAS,GAAM,CAAC,CAC5D,OAAO,gBAAgB,iBAAiB,SAAU,EAAQ,CAAE,QAAS,GAAM,CAAC,KAE/D,CACX,GAAI,YAAY,CAChB,OAAO,oBAAoB,SAAU,EAAO,CAC5C,OAAO,gBAAgB,oBAAoB,SAAU,EAAO,GAE7D,CAAC,EAAc,EAAS,CAAC,CAExB,CAAC,EAAM,OAAO,KAElB,IAAM,EAAuB,CAC3B,KAAM,EAAK,KACX,IAAK,EAAK,IACV,MAAO,EAAK,MACZ,OAAQ,EAAK,OACd,CAED,OACE,EAAA,EAAA,KAAC,OAAD,CACO,MACL,uBAAqB,8BACrB,cAAA,GACA,UAAW,EAAgB,CAAE,YAAW,CAAC,CAClC,QACP,GAAI,EACJ,CAAA,EAIN,EAA0B,YAAc,6BC/FxC,IAAa,GAAwB,CACnC,QACA,WAAW,GACX,WACA,YACA,MACA,GAAG,KAC4B,CAC/B,IAAM,EAAU,EAAA,SAAS,QAAQ,EAAS,CAAC,KAAK,EAAO,IACjD,OAAO,GAAU,UAAY,OAAO,GAAU,UAE9C,EAAA,EAAA,KAAC,OAAD,CAA4B,oCAAA,YACzB,EACI,CAFI,QAAQ,IAEZ,CAIJ,EACP,CAEF,OACE,EAAA,EAAA,KAAC,EAAA,MAAM,KAAP,CACO,MACL,uBAAqB,yBACrB,aAAY,EACL,QACG,WACV,UAAW,EAAW,CAAE,YAAW,CAAC,CACpC,GAAI,WAEH,EACU,CAAA,EAIjB,EAAqB,YAAc,wBCpDnC,IAAa,EAGT,OAAO,OAAO,EAAM,CACtB,KAAA,EACA,UAAA,EACD,CAAC,CAEF,EAAiB,YAAc,mBAC/B,EAAK,YAAc,wBACnB,EAAU,YAAc"}

package/dist/segmented-control/index.mjs

@@ -1,185 +1,151 @@
-import { jsx as h } from "react/jsx-runtime";
-import { RadioGroup as E } from "@base-ui/react/radio-group";
-import { useFormFieldControl as L } from "@spark-ui/components/form-field";
-import { useMergeRefs as q } from "@spark-ui/hooks/use-merge-refs";
-import { createContext as _, useContext as j, useRef as F, useState as R, Children as I, isValidElement as O, useMemo as $, useEffect as B } from "react";
-import { cva as x } from "class-variance-authority";
-import { Radio as H } from "@base-ui/react/radio";
-const M = x([
-  "default:self-start",
-  "group inline-grid grid-flow-col auto-cols-fr",
-  "relative items-stretch min-w-max",
-  "rounded-xl p-sm",
-  "bg-surface border-sm border-outline"
-]), P = x([
-  "relative z-raised min-h-sz-44 focus-visible:outline-none",
-  "flex flex-none items-center justify-center gap-md",
-  "default:px-lg default:py-md",
-  "rounded-[20px]",
-  "cursor-pointer select-none",
-  "font-medium",
-  "transition-colors duration-150",
-  "outline-none",
-  "focus-visible:u-outline",
-  "data-disabled:cursor-not-allowed data-disabled:opacity-dim-3",
-  "data-checked:text-on-support-container",
-  // Avoid layout shift: simulate "bold" without changing font metrics.
-  // Apply only to wrapped text nodes (not arbitrary nested JSX like Tag).
-  "data-checked:[&>[data-spark-segmented-control-text]]:[text-shadow:0.35px_0_currentColor,-0.35px_0_currentColor]"
-]), W = x([
-  "absolute z-base",
-  "rounded-[20px]",
-  "bg-support-container border-md border-support",
-  "group-has-focus-visible:border-focus",
-  "transition-[left,top,width,height] duration-200 ease-in-out",
-  "pointer-events-none"
-]), V = _(
-  {}
-), A = () => {
-  const e = j(V);
-  if (!e)
-    throw Error("useSegmentedControlContext must be used within a SegmentedControlContext Provider");
-  return e;
-}, G = (e) => {
-  let o = null;
-  return I.forEach(e, (n) => {
-    o === null && O(n) && typeof n.props.value == "string" && (o = n.props.value);
-  }), o;
-}, k = ({
-  value: e,
-  defaultValue: o,
-  onValueChange: n,
-  className: d,
-  children: s,
-  ref: r,
-  ...c
-}) => {
-  const t = F(null), f = q(t, r), p = G(s), u = e !== void 0, [i, g] = R(
-    () => o ?? p
-  ), m = u ? e ?? null : i, a = (N) => {
-    const y = N;
-    u || g(y), n?.(y);
-  }, { labelId: v, description: l, isRequired: C, isInvalid: b, name: z } = L();
-  return /* @__PURE__ */ h(
-    V.Provider,
-    {
-      value: {
-        checkedValue: m,
-        containerRef: t
-      },
-      children: /* @__PURE__ */ h(
-        E,
-        {
-          ref: f,
-          value: u ? e : void 0,
-          defaultValue: u ? void 0 : o ?? p ?? void 0,
-          onValueChange: a,
-          "data-spark-component": "segmented-control",
-          className: M({ className: d }),
-          "aria-labelledby": v,
-          "aria-describedby": l,
-          "aria-required": C || void 0,
-          "aria-invalid": b || void 0,
-          name: z,
-          ...c,
-          children: s
-        }
-      )
-    }
-  );
+import { cva as e } from "class-variance-authority";
+import { Children as t, createContext as n, isValidElement as r, useContext as i, useEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+import { jsx as l } from "react/jsx-runtime";
+import { useMergeRefs as u } from "@spark-ui/hooks/use-merge-refs";
+import { useFormFieldControl as d } from "@spark-ui/components/form-field";
+import { RadioGroup as f } from "@base-ui/react/radio-group";
+import { Radio as p } from "@base-ui/react/radio";
+//#region src/segmented-control/SegmentedControl.styles.ts
+var m = e([
+	"default:self-start",
+	"group inline-grid grid-flow-col auto-cols-fr",
+	"relative items-stretch min-w-max",
+	"rounded-xl p-sm",
+	"bg-surface border-sm border-outline"
+]), h = e([
+	"relative z-raised min-h-sz-44 focus-visible:outline-none",
+	"flex flex-none items-center justify-center gap-md",
+	"default:px-lg default:py-md",
+	"rounded-[20px]",
+	"cursor-pointer select-none",
+	"font-medium",
+	"transition-colors duration-150",
+	"outline-none",
+	"focus-visible:u-outline",
+	"data-disabled:cursor-not-allowed data-disabled:opacity-dim-3",
+	"data-checked:text-on-support-container",
+	"data-checked:[&>[data-spark-segmented-control-text]]:[text-shadow:0.35px_0_currentColor,-0.35px_0_currentColor]"
+]), g = e([
+	"absolute z-base",
+	"rounded-[20px]",
+	"bg-support-container border-md border-support",
+	"group-has-focus-visible:border-focus",
+	"transition-[left,top,width,height] duration-200 ease-in-out",
+	"pointer-events-none"
+]), _ = n({}), v = () => {
+	let e = i(_);
+	if (!e) throw Error("useSegmentedControlContext must be used within a SegmentedControlContext Provider");
+	return e;
+}, y = (e) => {
+	let n = null;
+	return t.forEach(e, (e) => {
+		n === null && r(e) && typeof e.props.value == "string" && (n = e.props.value);
+	}), n;
+}, b = ({ value: e, defaultValue: t, onValueChange: n, className: r, children: i, ref: a, ...o }) => {
+	let p = s(null), h = u(p, a), g = y(i), v = e !== void 0, [b, x] = c(() => t ?? g), S = v ? e ?? null : b, C = (e) => {
+		let t = e;
+		v || x(t), n?.(t);
+	}, { labelId: w, description: T, isRequired: E, isInvalid: D, name: O } = d();
+	return /* @__PURE__ */ l(_.Provider, {
+		value: {
+			checkedValue: S,
+			containerRef: p
+		},
+		children: /* @__PURE__ */ l(f, {
+			ref: h,
+			value: v ? e : void 0,
+			defaultValue: v ? void 0 : t ?? g ?? void 0,
+			onValueChange: C,
+			"data-spark-component": "segmented-control",
+			className: m({ className: r }),
+			"aria-labelledby": w,
+			"aria-describedby": T,
+			"aria-required": E || void 0,
+			"aria-invalid": D || void 0,
+			name: O,
+			...o,
+			children: i
+		})
+	});
 };
-k.displayName = "SegmentedControl";
-const w = ({
-  className: e,
-  ref: o,
-  ...n
-}) => {
-  const { checkedValue: d, containerRef: s } = A(), [r, c] = R(null), t = $(
-    () => d ? `[data-value="${CSS.escape(d)}"]` : null,
-    [d]
-  );
-  if (B(() => {
-    const p = s.current;
-    if (!p)
-      return;
-    const u = t ? p.querySelector(t) : null, i = () => {
-      const m = s.current;
-      if (!m || !t) {
-        c(null);
-        return;
-      }
-      const a = m.querySelector(t);
-      if (!a) {
-        c(null);
-        return;
-      }
-      const v = m.getBoundingClientRect(), l = a.getBoundingClientRect(), C = a.offsetWidth > 0 ? l.width / a.offsetWidth : 1, b = a.offsetHeight > 0 ? l.height / a.offsetHeight : 1;
-      c({
-        left: (l.left - v.left) / C - m.clientLeft,
-        top: (l.top - v.top) / b - m.clientTop,
-        width: l.width / C,
-        height: l.height / b
-      });
-    };
-    i();
-    const g = typeof ResizeObserver < "u" ? new ResizeObserver(() => {
-      i();
-    }) : null;
-    return g?.observe(p), u && g?.observe(u), window.addEventListener("resize", i, { passive: !0 }), window.visualViewport?.addEventListener("resize", i, { passive: !0 }), () => {
-      g?.disconnect(), window.removeEventListener("resize", i), window.visualViewport?.removeEventListener("resize", i);
-    };
-  }, [s, t]), !r) return null;
-  const f = {
-    left: r.left,
-    top: r.top,
-    width: r.width,
-    height: r.height
-  };
-  return /* @__PURE__ */ h(
-    "span",
-    {
-      ref: o,
-      "data-spark-component": "segmented-control-indicator",
-      "aria-hidden": !0,
-      className: W({ className: e }),
-      style: f,
-      ...n
-    }
-  );
+b.displayName = "SegmentedControl";
+//#endregion
+//#region src/segmented-control/SegmentedControlIndicator.tsx
+var x = ({ className: e, ref: t, ...n }) => {
+	let { checkedValue: r, containerRef: i } = v(), [s, u] = c(null), d = o(() => r ? `[data-value="${CSS.escape(r)}"]` : null, [r]);
+	if (a(() => {
+		let e = i.current;
+		if (!e) return;
+		let t = d ? e.querySelector(d) : null, n = () => {
+			let e = i.current;
+			if (!e || !d) {
+				u(null);
+				return;
+			}
+			let t = e.querySelector(d);
+			if (!t) {
+				u(null);
+				return;
+			}
+			let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), a = t.offsetWidth > 0 ? r.width / t.offsetWidth : 1, o = t.offsetHeight > 0 ? r.height / t.offsetHeight : 1;
+			u({
+				left: (r.left - n.left) / a - e.clientLeft,
+				top: (r.top - n.top) / o - e.clientTop,
+				width: r.width / a,
+				height: r.height / o
+			});
+		};
+		n();
+		let r = typeof ResizeObserver < "u" ? new ResizeObserver(() => {
+			n();
+		}) : null;
+		return r?.observe(e), t && r?.observe(t), window.addEventListener("resize", n, { passive: !0 }), window.visualViewport?.addEventListener("resize", n, { passive: !0 }), () => {
+			r?.disconnect(), window.removeEventListener("resize", n), window.visualViewport?.removeEventListener("resize", n);
+		};
+	}, [i, d]), !s) return null;
+	let f = {
+		left: s.left,
+		top: s.top,
+		width: s.width,
+		height: s.height
+	};
+	return /* @__PURE__ */ l("span", {
+		ref: t,
+		"data-spark-component": "segmented-control-indicator",
+		"aria-hidden": !0,
+		className: g({ className: e }),
+		style: f,
+		...n
+	});
 };
-w.displayName = "SegmentedControl.Indicator";
-const S = ({
-  value: e,
-  disabled: o = !1,
-  children: n,
-  className: d,
-  ref: s,
-  ...r
-}) => {
-  const c = I.toArray(n).map((t, f) => typeof t == "string" || typeof t == "number" ? /* @__PURE__ */ h("span", { "data-spark-segmented-control-text": !0, children: t }, `text-${f}`) : t);
-  return /* @__PURE__ */ h(
-    H.Root,
-    {
-      ref: s,
-      "data-spark-component": "segmented-control-item",
-      "data-value": e,
-      value: e,
-      disabled: o,
-      className: P({ className: d }),
-      ...r,
-      children: c
-    }
-  );
+x.displayName = "SegmentedControl.Indicator";
+//#endregion
+//#region src/segmented-control/SegmentedControlItem.tsx
+var S = ({ value: e, disabled: n = !1, children: r, className: i, ref: a, ...o }) => {
+	let s = t.toArray(r).map((e, t) => typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ l("span", {
+		"data-spark-segmented-control-text": !0,
+		children: e
+	}, `text-${t}`) : e);
+	return /* @__PURE__ */ l(p.Root, {
+		ref: a,
+		"data-spark-component": "segmented-control-item",
+		"data-value": e,
+		value: e,
+		disabled: n,
+		className: h({ className: i }),
+		...o,
+		children: s
+	});
 };
 S.displayName = "SegmentedControl.Item";
-const T = Object.assign(k, {
-  Item: S,
-  Indicator: w
+//#endregion
+//#region src/segmented-control/index.ts
+var C = Object.assign(b, {
+	Item: S,
+	Indicator: x
 });
-T.displayName = "SegmentedControl";
-S.displayName = "SegmentedControl.Item";
-w.displayName = "SegmentedControl.Indicator";
-export {
-  T as SegmentedControl
-};
-//# sourceMappingURL=index.mjs.map
+C.displayName = "SegmentedControl", S.displayName = "SegmentedControl.Item", x.displayName = "SegmentedControl.Indicator";
+//#endregion
+export { C as SegmentedControl };
+
+//# sourceMappingURL=index.mjs.map