@spark-ui/components 13.1.4 → 13.2.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/scrolling-list/ScrollingList.tsx","../../src/scrolling-list/ScrollingListControls.tsx","../../src/scrolling-list/ScrollingListItem.tsx","../../src/scrolling-list/useFocusWithinScroll.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 { 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 { 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 { 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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","names":["cx","jsx","cx","useRef","useEffect","jsx","useRef","cx","cx","useContext","jsx","useContext","cx","cx","useContext","jsx","useContext","cx","cx","useContext","jsx","useContext","cx","cx","useContext","jsx","useContext","cx","ScrollingList"]}
+{"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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"}

package/dist/scrolling-list/useFocusWithinScroll.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from 'react';
+export declare function useFocusWithinScroll<T extends HTMLElement | null>(ref: RefObject<T>, // The container to detect focus within
+scrollRef: RefObject<HTMLDivElement | null>): boolean;

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

@@ -0,0 +1,66 @@
+import { Ref } from 'react';
+export 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;
+    /**
+     * Textual representation of the current value (aria-valuetext)
+     * By default, percentage is used (e.g. "33%")
+     */
+    'aria-valuetext'?: 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;
+}
+export declare const SegmentedGauge: {
+    ({ value, min, max, description, size, intent, customColor, id, "aria-label": ariaLabel, className, ref, children, ...props }: SegmentedGaugeProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,14 @@
+export interface SegmentedGaugeContextValue {
+    value?: number;
+    min: number;
+    max: number;
+    segments: number;
+    currentIndex: number;
+    size: 'sm' | 'md';
+    intent: 'main' | 'support' | 'basic' | 'accent' | 'success' | 'alert' | 'danger' | 'info' | 'neutral';
+    customColor?: string;
+    labelId: string;
+    gaugeId: string;
+}
+export declare const SegmentedGaugeContext: import('react').Context<SegmentedGaugeContextValue | null>;
+export declare const useSegmentedGaugeContext: () => SegmentedGaugeContextValue;

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

@@ -0,0 +1,9 @@
+import { ComponentProps, Ref } from 'react';
+export interface SegmentedGaugeLabelProps extends ComponentProps<'span'> {
+    ref?: Ref<HTMLSpanElement>;
+    id?: string;
+}
+export declare const SegmentedGaugeLabel: {
+    ({ className, children, ref, id, ...props }: SegmentedGaugeLabelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,12 @@
+import { ComponentProps, Ref } from 'react';
+export interface SegmentedGaugeSegmentProps extends ComponentProps<'div'> {
+    /**
+     * Index of this segment (0-based)
+     */
+    index?: number;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const SegmentedGaugeSegment: {
+    ({ index, className, children, ref, ...props }: SegmentedGaugeSegmentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,8 @@
+import { ComponentProps, Ref } from 'react';
+export interface SegmentedGaugeTrackProps extends ComponentProps<'div'> {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const SegmentedGaugeTrack: {
+    ({ className, children, ref, ...props }: SegmentedGaugeTrackProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -1,105 +1,13 @@
-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;
-    /**
-     * Textual representation of the current value (aria-valuetext)
-     * By default, percentage is used (e.g. "33%")
-     */
-    'aria-valuetext'?: 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 & {
+import { SegmentedGauge as Root } from './SegmentedGauge';
+import { SegmentedGaugeLabel } from './SegmentedGaugeLabel';
+import { SegmentedGaugeSegment } from './SegmentedGaugeSegment';
+import { SegmentedGaugeTrack } from './SegmentedGaugeTrack';
+export declare const SegmentedGauge: typeof Root & {
     Track: typeof SegmentedGaugeTrack;
     Segment: typeof SegmentedGaugeSegment;
     Label: typeof SegmentedGaugeLabel;
 };
-
-export { SegmentedGauge, type SegmentedGaugeLabelProps, type SegmentedGaugeProps, type SegmentedGaugeSegmentProps, type SegmentedGaugeTrackProps };
+export { type SegmentedGaugeProps } from './SegmentedGauge';
+export { type SegmentedGaugeTrackProps } from './SegmentedGaugeTrack';
+export { type SegmentedGaugeSegmentProps } from './SegmentedGaugeSegment';
+export { type SegmentedGaugeLabelProps } from './SegmentedGaugeLabel';

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

@@ -1,105 +1,13 @@
-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;
-    /**
-     * Textual representation of the current value (aria-valuetext)
-     * By default, percentage is used (e.g. "33%")
-     */
-    'aria-valuetext'?: 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 & {
+import { SegmentedGauge as Root } from './SegmentedGauge';
+import { SegmentedGaugeLabel } from './SegmentedGaugeLabel';
+import { SegmentedGaugeSegment } from './SegmentedGaugeSegment';
+import { SegmentedGaugeTrack } from './SegmentedGaugeTrack';
+export declare const SegmentedGauge: typeof Root & {
     Track: typeof SegmentedGaugeTrack;
     Segment: typeof SegmentedGaugeSegment;
     Label: typeof SegmentedGaugeLabel;
 };
-
-export { SegmentedGauge, type SegmentedGaugeLabelProps, type SegmentedGaugeProps, type SegmentedGaugeSegmentProps, type SegmentedGaugeTrackProps };
+export { type SegmentedGaugeProps } from './SegmentedGauge';
+export { type SegmentedGaugeTrackProps } from './SegmentedGaugeTrack';
+export { type SegmentedGaugeSegmentProps } from './SegmentedGaugeSegment';
+export { type SegmentedGaugeLabelProps } from './SegmentedGaugeLabel';