@spark-ui/components 18.1.1 → 18.1.3

package/dist/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/tabs/TabsContext.tsx","../../src/tabs/TabsRoot.styles.ts","../../src/tabs/useRenderSlot.tsx","../../src/tabs/Tabs.tsx","../../src/tabs/TabsContent.styles.ts","../../src/tabs/TabsContent.tsx","../../src/tabs/TabsList.styles.ts","../../src/tabs/useResizeObserver.ts","../../src/tabs/TabsList.tsx","../../src/tabs/TabsPopoverAbstraction.tsx","../../src/tabs/TabsTrigger.styles.ts","../../src/tabs/TabsTrigger.tsx","../../src/tabs/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport type { TabsTriggerVariantsProps } from './TabsTrigger.styles'\n\nexport type TabsContextInterface = TabsTriggerVariantsProps & {\n  orientation?: 'horizontal' | 'vertical'\n  forceMount?: boolean\n}\n\nexport const TabsContext = createContext<TabsContextInterface>({} as TabsContextInterface)\n\nexport const useTabsContext = () => {\n  const context = useContext(TabsContext)\n\n  if (!context) {\n    throw Error('useTabsContext must be used within a TabsContext Provider')\n  }\n\n  return context\n}\n","import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'flex',\n  'data-[orientation=horizontal]:flex-col',\n  'data-[orientation=vertical]:flex-row',\n  'max-w-full',\n])\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean) {\n  return asChild ? ({ ...props }: object) => <Slot {...props} /> : undefined\n}\n","import { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { type ComponentProps, type PropsWithChildren, Ref } from 'react'\n\nimport { TabsContext } from './TabsContext'\nimport { rootStyles } from './TabsRoot.styles'\nimport type { TabsTriggerVariantsProps } from './TabsTrigger.styles'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface TabsProps\n  extends\n    Omit<ComponentProps<typeof BaseTabs.Root>, 'render'>,\n    PropsWithChildren<Omit<TabsTriggerVariantsProps, 'orientation'>> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * Whether to keep inactive tabs content in the DOM.\n   * @default false\n   */\n  forceMount?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * @deprecated\n */\nexport type TabsRootProps = TabsProps\n\nexport const Tabs = ({\n  intent = 'support',\n  size = 'md',\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  asChild = false,\n  forceMount = false,\n  orientation = 'horizontal',\n  children,\n  className,\n  ref,\n  ...rest\n}: TabsProps) => {\n  const renderSlot = useRenderSlot(asChild)\n\n  return (\n    <TabsContext\n      value={{\n        intent,\n        size,\n        orientation,\n        forceMount,\n      }}\n    >\n      <BaseTabs.Root\n        ref={ref}\n        orientation={orientation}\n        className={rootStyles({ className })}\n        data-spark-component=\"tabs\"\n        render={renderSlot}\n        {...rest}\n      >\n        {children}\n      </BaseTabs.Root>\n    </TabsContext>\n  )\n}\n\nTabs.displayName = 'Tabs'\n","import { cva } from 'class-variance-authority'\n\nexport const contentStyles = cva(['w-full p-lg', 'focus-visible:u-outline-inset'], {\n  variants: {\n    forceMount: {\n      true: 'data-[hidden]:hidden',\n      false: '',\n    },\n  },\n})\n","import { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { type ComponentProps, type PropsWithChildren, Ref } from 'react'\n\nimport { contentStyles } from './TabsContent.styles'\nimport { useTabsContext } from './TabsContext'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface TabsContentProps extends PropsWithChildren<\n  Omit<ComponentProps<typeof BaseTabs.Panel>, 'keepMounted' | 'render'>\n> {\n  /**\n   * A unique value that associates the content with a trigger.\n   */\n  value: string\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n   */\n  forceMount?: true\n  ref?: Ref<HTMLDivElement>\n}\n\n/** The panel that displays content associated with a tab. Renders a <div> element. */\nexport const TabsContent = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  children,\n  asChild = false,\n  className,\n  ref,\n  forceMount,\n  ...rest\n}: TabsContentProps) => {\n  const { forceMount: contextForceMount } = useTabsContext()\n  const renderSlot = useRenderSlot(asChild)\n  const keepMounted = contextForceMount || forceMount\n\n  return (\n    <BaseTabs.Panel\n      data-spark-component=\"tabs-content\"\n      ref={ref}\n      keepMounted={keepMounted}\n      className={contentStyles({ className, forceMount: keepMounted })}\n      render={renderSlot}\n      {...rest}\n    >\n      {children}\n    </BaseTabs.Panel>\n  )\n}\n\nTabsContent.displayName = 'Tabs.Content'\n","import { cva } from 'class-variance-authority'\n\nexport const wrapperStyles = cva(['relative flex'])\n\nexport const listStyles = cva([\n  'flex w-full',\n  'data-[orientation=horizontal]:flex-row',\n  'data-[orientation=vertical]:flex-col',\n  'overflow-y-hidden u-no-scrollbar data-[orientation=vertical]:overflow-x-hidden',\n  'after:flex after:shrink after:grow after:border-outline',\n  'data-[orientation=horizontal]:after:border-b-sm',\n  'data-[orientation=vertical]:after:border-r-sm',\n])\n\nexport const navigationArrowStyles = cva([\n  'h-auto! flex-none',\n  'border-b-sm border-outline',\n  'outline-hidden',\n  'focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset!',\n])\n","import { type RefObject, useEffect, useRef, useState } from 'react'\n\ninterface Size {\n  width?: number\n  height?: number\n}\n\ntype ResizeCallback = (entry?: ResizeObserverEntry) => void\n\nexport const useResizeObserver = <T extends HTMLElement>(\n  target: RefObject<T | null> | T | null,\n  onResize?: ResizeCallback\n): Size => {\n  const [size, setSize] = useState<Size>({ width: undefined, height: undefined })\n  const resizeObserverRef = useRef<ResizeObserver>(null)\n  const resizeCallbackRef = useRef<ResizeCallback | undefined>(onResize)\n\n  useEffect(() => {\n    resizeCallbackRef.current = onResize\n  }, [onResize])\n\n  useEffect(() => {\n    const targetElm = target && 'current' in target ? target.current : target\n    if (!targetElm || resizeObserverRef.current) {\n      return\n    }\n\n    resizeObserverRef.current = new ResizeObserver(([entry]) => {\n      const { inlineSize: width, blockSize: height } = entry?.borderBoxSize?.[0] ?? {}\n      resizeCallbackRef.current?.(entry)\n\n      setSize({ width, height })\n    })\n\n    resizeObserverRef.current.observe(targetElm as unknown as HTMLElement)\n\n    return () => {\n      resizeObserverRef.current &&\n        resizeObserverRef.current.unobserve(targetElm as unknown as HTMLElement)\n    }\n  }, [target, resizeObserverRef, resizeCallbackRef])\n\n  return size\n}\n","/* eslint-disable max-lines-per-function */\nimport { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { ArrowVerticalLeft } from '@spark-ui/icons/ArrowVerticalLeft'\nimport { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { type ComponentProps, type ReactElement, Ref, useEffect, useRef, useState } from 'react'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\nimport { useTabsContext } from './TabsContext'\nimport { listStyles, navigationArrowStyles, wrapperStyles } from './TabsList.styles'\nimport { useRenderSlot } from './useRenderSlot'\nimport { useResizeObserver } from './useResizeObserver'\n\nexport interface TabsListProps extends Omit<\n  ComponentProps<typeof BaseTabs.List>,\n  'render' | 'loopFocus'\n> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * When true, keyboard navigation will loop from last tab to first, and vice versa.\n   * @default false\n   */\n  loop?: boolean\n  children: ReactElement[] | ReactElement\n  ref?: Ref<HTMLDivElement>\n}\n\ntype ArrowState = 'visible' | 'hidden' | 'disabled'\n\n/** The container for the tab triggers. Renders a <div> element. */\nexport const TabsList = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  asChild = false,\n  loop = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: TabsListProps) => {\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const innerRef = useRef(null)\n  const listRef = ref || innerRef\n  const { orientation } = useTabsContext()\n  const renderSlot = useRenderSlot(asChild)\n\n  const { width } = useResizeObserver(wrapperRef)\n\n  const [arrows, setArrows] = useState<Record<'prev' | 'next', ArrowState>>({\n    prev: 'hidden',\n    next: 'hidden',\n  })\n\n  useEffect(() => {\n    /**\n     * Show/hide arrows\n     */\n    if (typeof listRef === 'function' || !listRef.current) {\n      return\n    }\n\n    if (orientation !== 'horizontal') {\n      setArrows({ prev: 'hidden', next: 'hidden' })\n    } else {\n      setArrows({\n        prev: listRef.current.scrollWidth > listRef.current.clientWidth ? 'visible' : 'hidden',\n        next: listRef.current.scrollWidth > listRef.current.clientWidth ? 'visible' : 'hidden',\n      })\n    }\n  }, [orientation, listRef, width])\n\n  useEffect(() => {\n    /**\n     * Enable/disable arrows\n     */\n    if (typeof listRef === 'function' || !listRef.current || arrows.prev === 'hidden' || loop) {\n      return\n    }\n\n    const toggleArrowsVisibility = (target: HTMLDivElement) => {\n      setArrows({\n        prev: target.scrollLeft > 0 ? 'visible' : 'disabled',\n        next: target.scrollLeft + target.clientWidth < target.scrollWidth ? 'visible' : 'disabled',\n      })\n    }\n\n    const currentList = listRef.current\n\n    toggleArrowsVisibility(currentList)\n\n    currentList.addEventListener('scroll', ({ target }) =>\n      toggleArrowsVisibility(target as HTMLDivElement)\n    )\n\n    return () =>\n      currentList.removeEventListener('scroll', ({ target }) =>\n        toggleArrowsVisibility(target as HTMLDivElement)\n      )\n  }, [listRef, arrows.prev, loop])\n\n  const handlePrevClick = () => {\n    if (typeof listRef === 'function' || !listRef.current) {\n      return\n    }\n\n    const shouldLoopForward = loop && listRef.current.scrollLeft <= 0\n\n    listRef.current.scrollTo({\n      left: shouldLoopForward\n        ? listRef.current.scrollLeft + listRef.current.scrollWidth - listRef.current.clientWidth\n        : listRef.current.scrollLeft - listRef.current.clientWidth,\n      behavior: 'smooth',\n    })\n  }\n\n  const handleNextClick = () => {\n    if (typeof listRef === 'function' || !listRef.current) {\n      return\n    }\n\n    const shouldLoopBackward =\n      loop &&\n      listRef.current.scrollLeft + listRef.current.clientWidth >= listRef.current.scrollWidth\n\n    listRef.current.scrollTo({\n      left: shouldLoopBackward ? 0 : listRef.current.scrollLeft + listRef.current.clientWidth,\n      behavior: 'smooth',\n    })\n  }\n\n  return (\n    <div className={wrapperStyles({ className })} ref={wrapperRef}>\n      {arrows.prev !== 'hidden' && (\n        <Button\n          shape=\"square\"\n          intent=\"surface\"\n          size=\"sm\"\n          className={navigationArrowStyles()}\n          onClick={handlePrevClick}\n          disabled={arrows.prev === 'disabled'}\n          aria-label=\"Scroll left\"\n        >\n          <Icon>\n            <ArrowVerticalLeft />\n          </Icon>\n        </Button>\n      )}\n\n      <BaseTabs.List\n        data-spark-component=\"tabs-list\"\n        ref={listRef}\n        className={listStyles()}\n        render={renderSlot}\n        loopFocus={loop}\n        activateOnFocus\n        {...rest}\n      >\n        {children}\n      </BaseTabs.List>\n\n      {arrows.next !== 'hidden' && (\n        <Button\n          shape=\"square\"\n          intent=\"surface\"\n          size=\"sm\"\n          className={navigationArrowStyles()}\n          onClick={handleNextClick}\n          disabled={arrows.next === 'disabled'}\n          aria-label=\"Scroll right\"\n        >\n          <Icon>\n            <ArrowVerticalRight />\n          </Icon>\n        </Button>\n      )}\n    </div>\n  )\n}\n\nTabsList.displayName = 'Tabs.List'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { MoreMenuHorizontal } from '@spark-ui/icons/MoreMenuHorizontal'\nimport { cx } from 'class-variance-authority'\nimport {\n  type ComponentType,\n  createContext,\n  forwardRef,\n  type ReactNode,\n  type RefObject,\n  useContext,\n  useMemo,\n} from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { Popover as SparkPopover } from '../popover'\nimport type { PopoverProps } from '../popover/Popover'\nimport type { ContentProps as PopoverContentProps } from '../popover/PopoverContent'\nimport type { TriggerProps as PopoverTriggerProps } from '../popover/PopoverTrigger'\n\ninterface TabsPopoverContextValue {\n  popoverSide: 'right' | 'bottom'\n  popoverTriggerRef: RefObject<HTMLButtonElement | null>\n}\n\nconst TabsPopoverContext = createContext<TabsPopoverContextValue | undefined>(undefined)\n\nconst useTabsPopoverContext = () => {\n  const context = useContext(TabsPopoverContext)\n  if (!context) {\n    throw new Error('TabsPopover components must be used within TabsPopover')\n  }\n\n  return context\n}\n\n// Trigger component that uses context\ninterface TabsPopoverTriggerProps extends Omit<PopoverTriggerProps, 'asChild' | 'children'> {\n  'aria-label': string\n  children?: ReactNode\n}\n\nconst TabsPopoverTrigger = forwardRef<HTMLButtonElement, TabsPopoverTriggerProps>(\n  ({ 'aria-label': ariaLabel, children: iconChildren, ...triggerProps }, forwardedRef) => {\n    const { popoverTriggerRef } = useTabsPopoverContext()\n    const mergedRef = useMergeRefs(forwardedRef, popoverTriggerRef)\n\n    return (\n      <SparkPopover.Trigger asChild {...triggerProps}>\n        <IconButton\n          ref={mergedRef}\n          size=\"sm\"\n          intent=\"surfaceInverse\"\n          design=\"ghost\"\n          aria-label={ariaLabel}\n          tabIndex={-1}\n        >\n          <Icon>{iconChildren || <MoreMenuHorizontal />}</Icon>\n        </IconButton>\n      </SparkPopover.Trigger>\n    )\n  }\n)\n\nTabsPopoverTrigger.displayName = 'Popover.Trigger'\n\n// Content component that uses context\nconst TabsPopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(\n  ({ side, align = 'start', className, ...contentProps }, ref) => {\n    const { popoverSide } = useTabsPopoverContext()\n    const mergedClassName = cx('gap-sm flex flex-col', className)\n\n    return (\n      <SparkPopover.Content\n        ref={ref}\n        {...contentProps}\n        side={side ?? popoverSide}\n        align={align}\n        className={mergedClassName}\n      />\n    )\n  }\n)\n\nTabsPopoverContent.displayName = 'Popover.Content'\n\n// Export types\nexport type TabsPopoverTriggerComponent = typeof TabsPopoverTrigger\nexport type TabsPopoverContentComponent = typeof TabsPopoverContent\n\n// Create a type that extends SparkPopover but overrides Content and Trigger\n// Use ComponentType for JSX compatibility and Omit to exclude only Content and Trigger,\n// then add them back with the overridden types\nexport type ConfiguredPopoverComponent = ComponentType<PopoverProps> &\n  Omit<typeof SparkPopover, 'Content' | 'Trigger'> & {\n    Content: TabsPopoverContentComponent\n    Trigger: TabsPopoverTriggerComponent\n  }\n\ninterface PopoverAbstractionProps {\n  popoverSide: 'right' | 'bottom'\n  popoverTriggerRef: RefObject<HTMLButtonElement | null>\n  children: (Popover: ConfiguredPopoverComponent) => ReactNode\n}\n\nexport const Popover = ({ popoverSide, popoverTriggerRef, children }: PopoverAbstractionProps) => {\n  const contextValue = useMemo(\n    () => ({ popoverSide, popoverTriggerRef }),\n    [popoverSide, popoverTriggerRef]\n  )\n\n  const PopoverWrapper: typeof SparkPopover = ((props: PopoverProps) => (\n    <TabsPopoverContext value={contextValue}>\n      <SparkPopover {...props}>{props.children}</SparkPopover>\n    </TabsPopoverContext>\n  )) as typeof SparkPopover\n\n  const PopoverComponent = Object.assign(PopoverWrapper, SparkPopover, {\n    Content: TabsPopoverContent,\n    Trigger: TabsPopoverTrigger,\n  }) as ConfiguredPopoverComponent\n\n  return <TabsPopoverContext value={contextValue}>{children(PopoverComponent)}</TabsPopoverContext>\n}\n\nPopover.displayName = 'Popover'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const triggerVariants = cva(\n  [\n    'px-md',\n    'relative flex flex-none items-center',\n    'border-outline',\n    'hover:not-disabled:bg-surface-hovered',\n    'after:absolute',\n    'data-[active]:font-medium',\n    'not-data-[active]:not-disabled:cursor-pointer',\n    'data-[orientation=horizontal]:border-b-sm data-[orientation=horizontal]:after:inset-x-0 data-[orientation=horizontal]:after:bottom-[-1px] data-[orientation=horizontal]:after:h-sz-2',\n    'data-[orientation=vertical]:border-r-sm data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:right-[-1px] data-[orientation=vertical]:after:w-sz-2',\n    'focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset',\n    'disabled:cursor-not-allowed disabled:opacity-dim-3',\n    'gap-md [&>*:first-child]:ml-md [&>*:last-child]:mr-md',\n    '[&>svg:last-child:first-child]:mx-auto',\n  ],\n  {\n    variants: {\n      /**\n       * Change the color scheme of the tabs\n       * @default support\n       */\n      intent: makeVariants<'intent', ['main', 'support']>({\n        main: ['data-[active]:text-main data-[active]:after:bg-main'],\n        support: ['data-[active]:text-support data-[active]:after:bg-support'],\n      }),\n      /**\n       * Change the size of the tabs\n       * @default md\n       */\n      size: {\n        xs: ['h-sz-32 min-w-sz-32 text-caption'],\n        sm: ['h-sz-36 min-w-sz-36 text-body-2'],\n        md: ['h-sz-40 min-w-sz-40 text-body-1'],\n      },\n      hasMenu: {\n        true: 'pr-3xl',\n      },\n      orientation: {\n        horizontal: '',\n        vertical: '',\n      },\n    },\n    compoundVariants: [\n      {\n        hasMenu: true,\n        orientation: 'vertical',\n        class: 'w-full',\n      },\n    ],\n    defaultVariants: {\n      intent: 'support',\n      size: 'md',\n      hasMenu: false,\n      orientation: 'horizontal',\n    },\n  }\n)\n\nexport type TabsTriggerVariantsProps = VariantProps<typeof triggerVariants>\n","import { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { type ComponentProps, type FocusEvent, type ReactNode, Ref, useRef } from 'react'\n\ntype TabKeyDownEvent = Parameters<NonNullable<ComponentProps<typeof BaseTabs.Tab>['onKeyDown']>>[0]\n\nimport { useTabsContext } from './TabsContext'\nimport { type ConfiguredPopoverComponent, Popover } from './TabsPopoverAbstraction'\nimport { triggerVariants } from './TabsTrigger.styles'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface TabsTriggerProps extends Omit<ComponentProps<typeof BaseTabs.Tab>, 'render'> {\n  /**\n   * A unique value that associates the trigger with a content.\n   */\n  value: string\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * When true, prevents the user from interacting with the tab.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Function that receives a pre-configured Popover component and returns the popover structure.\n   * @example\n   * renderMenu={({ Popover }) => (\n   *   <Popover>\n   *     <Popover.Trigger aria-label=\"Options\">\n   *       <CustomIcon />\n   *     </Popover.Trigger>\n   *     <Popover.Content>\n   *       <Button>Action</Button>\n   *     </Popover.Content>\n   *   </Popover>\n   * )}\n   */\n  renderMenu?: (props: { Popover: ConfiguredPopoverComponent }) => ReactNode\n  ref?: Ref<HTMLButtonElement>\n}\n\n/** A button that activates a tab panel. Renders a <button> element. */\nexport const TabsTrigger = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  asChild = false,\n  value,\n  disabled = false,\n  children,\n  className,\n  ref,\n  onKeyDown,\n  renderMenu,\n  ...rest\n}: TabsTriggerProps) => {\n  const { intent, size, orientation } = useTabsContext()\n  const popoverTriggerRef = useRef<HTMLButtonElement>(null)\n  const tabsTriggerRef = useRef<HTMLButtonElement>(null)\n  const renderSlot = useRenderSlot(asChild)\n\n  // Combine internal ref with forwarded ref\n  const mergedRef = useMergeRefs(ref, tabsTriggerRef)\n\n  const handleKeyDown = (e: TabKeyDownEvent) => {\n    // Handle Shift+F10 for popover\n    if (e.key === 'F10' && e.shiftKey && renderMenu && popoverTriggerRef.current) {\n      e.preventDefault()\n      popoverTriggerRef.current.click()\n    }\n\n    // Call original onKeyDown if provided\n    onKeyDown?.(e)\n  }\n\n  const hasMenu = !!renderMenu\n  const popoverSide = orientation === 'vertical' ? 'right' : 'bottom'\n\n  const trigger = (\n    <BaseTabs.Tab\n      data-spark-component=\"tabs-trigger\"\n      ref={mergedRef}\n      className={triggerVariants({\n        intent,\n        size,\n        hasMenu,\n        orientation: orientation ?? 'horizontal',\n        className,\n      })}\n      render={renderSlot}\n      disabled={disabled}\n      value={value}\n      onFocus={({ target }: FocusEvent<HTMLButtonElement>) =>\n        target.scrollIntoView({\n          behavior: 'smooth',\n          block: 'nearest',\n          inline: 'nearest',\n        })\n      }\n      onKeyDown={handleKeyDown}\n      aria-haspopup={hasMenu ? 'true' : undefined}\n      {...rest}\n    >\n      {children}\n    </BaseTabs.Tab>\n  )\n\n  if (!hasMenu) {\n    return trigger\n  }\n\n  return (\n    <div className={orientation === 'vertical' ? 'relative w-full' : 'relative'}>\n      {trigger}\n      <div className=\"right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2\">\n        <Popover popoverSide={popoverSide} popoverTriggerRef={popoverTriggerRef}>\n          {PopoverAbstraction => renderMenu?.({ Popover: PopoverAbstraction })}\n        </Popover>\n      </div>\n    </div>\n  )\n}\n\nTabsTrigger.displayName = 'Tabs.Trigger'\n","import { Tabs as Root } from './Tabs'\nimport { TabsContent as Content } from './TabsContent'\nimport { TabsList as List } from './TabsList'\nimport { TabsTrigger as Trigger } from './TabsTrigger'\n\n/**\n * A set of layered sections of content that users can navigate between using tab controls.\n */\nexport const Tabs: typeof Root & {\n  List: typeof List\n  Trigger: typeof Trigger\n  Content: typeof Content\n} = Object.assign(Root, {\n  List,\n  Trigger,\n  Content,\n})\n\nTabs.displayName = 'Tabs'\nList.displayName = 'Tabs.List'\nTrigger.displayName = 'Tabs.Trigger'\nContent.displayName = 'Tabs.Content'\n\nexport { type TabsContentProps } from './TabsContent'\nexport { type TabsListProps } from './TabsList'\nexport { type TabsProps, type TabsRootProps } from './Tabs'\nexport { type TabsTriggerProps } from './TabsTrigger'\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/tabs/TabsContext.tsx","../../src/tabs/TabsRoot.styles.ts","../../src/tabs/Tabs.tsx","../../src/tabs/TabsContent.styles.ts","../../src/tabs/TabsContent.tsx","../../src/tabs/TabsList.styles.ts","../../src/tabs/useResizeObserver.ts","../../src/tabs/TabsList.tsx","../../src/tabs/TabsPopoverAbstraction.tsx","../../src/tabs/TabsTrigger.styles.ts","../../src/tabs/TabsTrigger.tsx","../../src/tabs/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport type { TabsTriggerVariantsProps } from './TabsTrigger.styles'\n\nexport type TabsContextInterface = TabsTriggerVariantsProps & {\n  orientation?: 'horizontal' | 'vertical'\n  forceMount?: boolean\n}\n\nexport const TabsContext = createContext<TabsContextInterface>({} as TabsContextInterface)\n\nexport const useTabsContext = () => {\n  const context = useContext(TabsContext)\n\n  if (!context) {\n    throw Error('useTabsContext must be used within a TabsContext Provider')\n  }\n\n  return context\n}\n","import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'flex',\n  'data-[orientation=horizontal]:flex-col',\n  'data-[orientation=vertical]:flex-row',\n  'max-w-full',\n])\n","import { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { createRenderSlot } from '@spark-ui/internal-utils'\nimport { type ComponentProps, type PropsWithChildren, Ref } from 'react'\n\nimport { TabsContext } from './TabsContext'\nimport { rootStyles } from './TabsRoot.styles'\nimport type { TabsTriggerVariantsProps } from './TabsTrigger.styles'\n\nexport interface TabsProps\n  extends\n    Omit<ComponentProps<typeof BaseTabs.Root>, 'render'>,\n    PropsWithChildren<Omit<TabsTriggerVariantsProps, 'orientation'>> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * Whether to keep inactive tabs content in the DOM.\n   * @default false\n   */\n  forceMount?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * @deprecated\n */\nexport type TabsRootProps = TabsProps\n\nexport const Tabs = ({\n  intent = 'support',\n  size = 'md',\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  asChild = false,\n  forceMount = false,\n  orientation = 'horizontal',\n  children,\n  className,\n  ref,\n  ...rest\n}: TabsProps) => {\n  const { renderProp, innerChildren } = createRenderSlot(asChild, children)\n\n  return (\n    <TabsContext\n      value={{\n        intent,\n        size,\n        orientation,\n        forceMount,\n      }}\n    >\n      <BaseTabs.Root\n        ref={ref}\n        orientation={orientation}\n        className={rootStyles({ className })}\n        data-spark-component=\"tabs\"\n        render={renderProp}\n        {...rest}\n      >\n        {innerChildren}\n      </BaseTabs.Root>\n    </TabsContext>\n  )\n}\n\nTabs.displayName = 'Tabs'\n","import { cva } from 'class-variance-authority'\n\nexport const contentStyles = cva(['w-full p-lg', 'focus-visible:u-outline-inset'], {\n  variants: {\n    forceMount: {\n      true: 'data-[hidden]:hidden',\n      false: '',\n    },\n  },\n})\n","import { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { createRenderSlot } from '@spark-ui/internal-utils'\nimport { type ComponentProps, type PropsWithChildren, Ref } from 'react'\n\nimport { contentStyles } from './TabsContent.styles'\nimport { useTabsContext } from './TabsContext'\n\nexport interface TabsContentProps extends PropsWithChildren<\n  Omit<ComponentProps<typeof BaseTabs.Panel>, 'keepMounted' | 'render'>\n> {\n  /**\n   * A unique value that associates the content with a trigger.\n   */\n  value: string\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n   */\n  forceMount?: true\n  ref?: Ref<HTMLDivElement>\n}\n\n/** The panel that displays content associated with a tab. Renders a <div> element. */\nexport const TabsContent = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  children,\n  asChild = false,\n  className,\n  ref,\n  forceMount,\n  ...rest\n}: TabsContentProps) => {\n  const { forceMount: contextForceMount } = useTabsContext()\n  const { renderProp, innerChildren } = createRenderSlot(asChild, children)\n  const keepMounted = contextForceMount || forceMount\n\n  return (\n    <BaseTabs.Panel\n      data-spark-component=\"tabs-content\"\n      ref={ref}\n      keepMounted={keepMounted}\n      className={contentStyles({ className, forceMount: keepMounted })}\n      render={renderProp}\n      {...rest}\n    >\n      {innerChildren}\n    </BaseTabs.Panel>\n  )\n}\n\nTabsContent.displayName = 'Tabs.Content'\n","import { cva } from 'class-variance-authority'\n\nexport const wrapperStyles = cva(['relative flex'])\n\nexport const listStyles = cva([\n  'flex w-full',\n  'data-[orientation=horizontal]:flex-row',\n  'data-[orientation=vertical]:flex-col',\n  'overflow-y-hidden u-no-scrollbar data-[orientation=vertical]:overflow-x-hidden',\n  'after:flex after:shrink after:grow after:border-outline',\n  'data-[orientation=horizontal]:after:border-b-sm',\n  'data-[orientation=vertical]:after:border-r-sm',\n])\n\nexport const navigationArrowStyles = cva([\n  'h-auto! flex-none',\n  'border-b-sm border-outline',\n  'outline-hidden',\n  'focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset!',\n])\n","import { type RefObject, useEffect, useRef, useState } from 'react'\n\ninterface Size {\n  width?: number\n  height?: number\n}\n\ntype ResizeCallback = (entry?: ResizeObserverEntry) => void\n\nexport const useResizeObserver = <T extends HTMLElement>(\n  target: RefObject<T | null> | T | null,\n  onResize?: ResizeCallback\n): Size => {\n  const [size, setSize] = useState<Size>({ width: undefined, height: undefined })\n  const resizeObserverRef = useRef<ResizeObserver>(null)\n  const resizeCallbackRef = useRef<ResizeCallback | undefined>(onResize)\n\n  useEffect(() => {\n    resizeCallbackRef.current = onResize\n  }, [onResize])\n\n  useEffect(() => {\n    const targetElm = target && 'current' in target ? target.current : target\n    if (!targetElm || resizeObserverRef.current) {\n      return\n    }\n\n    resizeObserverRef.current = new ResizeObserver(([entry]) => {\n      const { inlineSize: width, blockSize: height } = entry?.borderBoxSize?.[0] ?? {}\n      resizeCallbackRef.current?.(entry)\n\n      setSize({ width, height })\n    })\n\n    resizeObserverRef.current.observe(targetElm as unknown as HTMLElement)\n\n    return () => {\n      resizeObserverRef.current &&\n        resizeObserverRef.current.unobserve(targetElm as unknown as HTMLElement)\n    }\n  }, [target, resizeObserverRef, resizeCallbackRef])\n\n  return size\n}\n","/* eslint-disable max-lines-per-function */\nimport { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { ArrowVerticalLeft } from '@spark-ui/icons/ArrowVerticalLeft'\nimport { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { createRenderSlot } from '@spark-ui/internal-utils'\nimport { type ComponentProps, type ReactElement, Ref, useEffect, useRef, useState } from 'react'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\nimport { useTabsContext } from './TabsContext'\nimport { listStyles, navigationArrowStyles, wrapperStyles } from './TabsList.styles'\nimport { useResizeObserver } from './useResizeObserver'\n\nexport interface TabsListProps extends Omit<\n  ComponentProps<typeof BaseTabs.List>,\n  'render' | 'loopFocus'\n> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * When true, keyboard navigation will loop from last tab to first, and vice versa.\n   * @default false\n   */\n  loop?: boolean\n  children: ReactElement[] | ReactElement\n  ref?: Ref<HTMLDivElement>\n}\n\ntype ArrowState = 'visible' | 'hidden' | 'disabled'\n\n/** The container for the tab triggers. Renders a <div> element. */\nexport const TabsList = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  asChild = false,\n  loop = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: TabsListProps) => {\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const innerRef = useRef(null)\n  const listRef = ref || innerRef\n  const { orientation } = useTabsContext()\n  const { renderProp, innerChildren } = createRenderSlot(asChild, children)\n\n  const { width } = useResizeObserver(wrapperRef)\n\n  const [arrows, setArrows] = useState<Record<'prev' | 'next', ArrowState>>({\n    prev: 'hidden',\n    next: 'hidden',\n  })\n\n  useEffect(() => {\n    /**\n     * Show/hide arrows\n     */\n    if (typeof listRef === 'function' || !listRef.current) {\n      return\n    }\n\n    if (orientation !== 'horizontal') {\n      setArrows({ prev: 'hidden', next: 'hidden' })\n    } else {\n      setArrows({\n        prev: listRef.current.scrollWidth > listRef.current.clientWidth ? 'visible' : 'hidden',\n        next: listRef.current.scrollWidth > listRef.current.clientWidth ? 'visible' : 'hidden',\n      })\n    }\n  }, [orientation, listRef, width])\n\n  useEffect(() => {\n    /**\n     * Enable/disable arrows\n     */\n    if (typeof listRef === 'function' || !listRef.current || arrows.prev === 'hidden' || loop) {\n      return\n    }\n\n    const toggleArrowsVisibility = (target: HTMLDivElement) => {\n      setArrows({\n        prev: target.scrollLeft > 0 ? 'visible' : 'disabled',\n        next: target.scrollLeft + target.clientWidth < target.scrollWidth ? 'visible' : 'disabled',\n      })\n    }\n\n    const currentList = listRef.current\n\n    toggleArrowsVisibility(currentList)\n\n    currentList.addEventListener('scroll', ({ target }) =>\n      toggleArrowsVisibility(target as HTMLDivElement)\n    )\n\n    return () =>\n      currentList.removeEventListener('scroll', ({ target }) =>\n        toggleArrowsVisibility(target as HTMLDivElement)\n      )\n  }, [listRef, arrows.prev, loop])\n\n  const handlePrevClick = () => {\n    if (typeof listRef === 'function' || !listRef.current) {\n      return\n    }\n\n    const shouldLoopForward = loop && listRef.current.scrollLeft <= 0\n\n    listRef.current.scrollTo({\n      left: shouldLoopForward\n        ? listRef.current.scrollLeft + listRef.current.scrollWidth - listRef.current.clientWidth\n        : listRef.current.scrollLeft - listRef.current.clientWidth,\n      behavior: 'smooth',\n    })\n  }\n\n  const handleNextClick = () => {\n    if (typeof listRef === 'function' || !listRef.current) {\n      return\n    }\n\n    const shouldLoopBackward =\n      loop &&\n      listRef.current.scrollLeft + listRef.current.clientWidth >= listRef.current.scrollWidth\n\n    listRef.current.scrollTo({\n      left: shouldLoopBackward ? 0 : listRef.current.scrollLeft + listRef.current.clientWidth,\n      behavior: 'smooth',\n    })\n  }\n\n  return (\n    <div className={wrapperStyles({ className })} ref={wrapperRef}>\n      {arrows.prev !== 'hidden' && (\n        <Button\n          shape=\"square\"\n          intent=\"surface\"\n          size=\"sm\"\n          className={navigationArrowStyles()}\n          onClick={handlePrevClick}\n          disabled={arrows.prev === 'disabled'}\n          aria-label=\"Scroll left\"\n        >\n          <Icon>\n            <ArrowVerticalLeft />\n          </Icon>\n        </Button>\n      )}\n\n      <BaseTabs.List\n        data-spark-component=\"tabs-list\"\n        ref={listRef}\n        className={listStyles()}\n        render={renderProp}\n        loopFocus={loop}\n        activateOnFocus\n        {...rest}\n      >\n        {innerChildren}\n      </BaseTabs.List>\n\n      {arrows.next !== 'hidden' && (\n        <Button\n          shape=\"square\"\n          intent=\"surface\"\n          size=\"sm\"\n          className={navigationArrowStyles()}\n          onClick={handleNextClick}\n          disabled={arrows.next === 'disabled'}\n          aria-label=\"Scroll right\"\n        >\n          <Icon>\n            <ArrowVerticalRight />\n          </Icon>\n        </Button>\n      )}\n    </div>\n  )\n}\n\nTabsList.displayName = 'Tabs.List'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { MoreMenuHorizontal } from '@spark-ui/icons/MoreMenuHorizontal'\nimport { cx } from 'class-variance-authority'\nimport {\n  type ComponentType,\n  createContext,\n  forwardRef,\n  type ReactNode,\n  type RefObject,\n  useContext,\n  useMemo,\n} from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { Popover as SparkPopover } from '../popover'\nimport type { PopoverProps } from '../popover/Popover'\nimport type { ContentProps as PopoverContentProps } from '../popover/PopoverContent'\nimport type { TriggerProps as PopoverTriggerProps } from '../popover/PopoverTrigger'\n\ninterface TabsPopoverContextValue {\n  popoverSide: 'right' | 'bottom'\n  popoverTriggerRef: RefObject<HTMLButtonElement | null>\n}\n\nconst TabsPopoverContext = createContext<TabsPopoverContextValue | undefined>(undefined)\n\nconst useTabsPopoverContext = () => {\n  const context = useContext(TabsPopoverContext)\n  if (!context) {\n    throw new Error('TabsPopover components must be used within TabsPopover')\n  }\n\n  return context\n}\n\n// Trigger component that uses context\ninterface TabsPopoverTriggerProps extends Omit<PopoverTriggerProps, 'asChild' | 'children'> {\n  'aria-label': string\n  children?: ReactNode\n}\n\nconst TabsPopoverTrigger = forwardRef<HTMLButtonElement, TabsPopoverTriggerProps>(\n  ({ 'aria-label': ariaLabel, children: iconChildren, ...triggerProps }, forwardedRef) => {\n    const { popoverTriggerRef } = useTabsPopoverContext()\n    const mergedRef = useMergeRefs(forwardedRef, popoverTriggerRef)\n\n    return (\n      <SparkPopover.Trigger asChild {...triggerProps}>\n        <IconButton\n          ref={mergedRef}\n          size=\"sm\"\n          intent=\"surfaceInverse\"\n          design=\"ghost\"\n          aria-label={ariaLabel}\n          tabIndex={-1}\n        >\n          <Icon>{iconChildren || <MoreMenuHorizontal />}</Icon>\n        </IconButton>\n      </SparkPopover.Trigger>\n    )\n  }\n)\n\nTabsPopoverTrigger.displayName = 'Popover.Trigger'\n\n// Content component that uses context\nconst TabsPopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(\n  ({ side, align = 'start', className, ...contentProps }, ref) => {\n    const { popoverSide } = useTabsPopoverContext()\n    const mergedClassName = cx('gap-sm flex flex-col', className)\n\n    return (\n      <SparkPopover.Content\n        ref={ref}\n        {...contentProps}\n        side={side ?? popoverSide}\n        align={align}\n        className={mergedClassName}\n      />\n    )\n  }\n)\n\nTabsPopoverContent.displayName = 'Popover.Content'\n\n// Export types\nexport type TabsPopoverTriggerComponent = typeof TabsPopoverTrigger\nexport type TabsPopoverContentComponent = typeof TabsPopoverContent\n\n// Create a type that extends SparkPopover but overrides Content and Trigger\n// Use ComponentType for JSX compatibility and Omit to exclude only Content and Trigger,\n// then add them back with the overridden types\nexport type ConfiguredPopoverComponent = ComponentType<PopoverProps> &\n  Omit<typeof SparkPopover, 'Content' | 'Trigger'> & {\n    Content: TabsPopoverContentComponent\n    Trigger: TabsPopoverTriggerComponent\n  }\n\ninterface PopoverAbstractionProps {\n  popoverSide: 'right' | 'bottom'\n  popoverTriggerRef: RefObject<HTMLButtonElement | null>\n  children: (Popover: ConfiguredPopoverComponent) => ReactNode\n}\n\nexport const Popover = ({ popoverSide, popoverTriggerRef, children }: PopoverAbstractionProps) => {\n  const contextValue = useMemo(\n    () => ({ popoverSide, popoverTriggerRef }),\n    [popoverSide, popoverTriggerRef]\n  )\n\n  const PopoverWrapper: typeof SparkPopover = ((props: PopoverProps) => (\n    <TabsPopoverContext value={contextValue}>\n      <SparkPopover {...props}>{props.children}</SparkPopover>\n    </TabsPopoverContext>\n  )) as typeof SparkPopover\n\n  const PopoverComponent = Object.assign(PopoverWrapper, SparkPopover, {\n    Content: TabsPopoverContent,\n    Trigger: TabsPopoverTrigger,\n  }) as ConfiguredPopoverComponent\n\n  return <TabsPopoverContext value={contextValue}>{children(PopoverComponent)}</TabsPopoverContext>\n}\n\nPopover.displayName = 'Popover'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const triggerVariants = cva(\n  [\n    'px-md',\n    'relative flex flex-none items-center',\n    'border-outline',\n    'hover:not-disabled:bg-surface-hovered',\n    'after:absolute',\n    'data-[active]:font-medium',\n    'not-data-[active]:not-disabled:cursor-pointer',\n    'data-[orientation=horizontal]:border-b-sm data-[orientation=horizontal]:after:inset-x-0 data-[orientation=horizontal]:after:bottom-[-1px] data-[orientation=horizontal]:after:h-sz-2',\n    'data-[orientation=vertical]:border-r-sm data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:right-[-1px] data-[orientation=vertical]:after:w-sz-2',\n    'focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset',\n    'disabled:cursor-not-allowed disabled:opacity-dim-3',\n    'gap-md [&>*:first-child]:ml-md [&>*:last-child]:mr-md',\n    '[&>svg:last-child:first-child]:mx-auto',\n  ],\n  {\n    variants: {\n      /**\n       * Change the color scheme of the tabs\n       * @default support\n       */\n      intent: makeVariants<'intent', ['main', 'support']>({\n        main: ['data-[active]:text-main data-[active]:after:bg-main'],\n        support: ['data-[active]:text-support data-[active]:after:bg-support'],\n      }),\n      /**\n       * Change the size of the tabs\n       * @default md\n       */\n      size: {\n        xs: ['h-sz-32 min-w-sz-32 text-caption'],\n        sm: ['h-sz-36 min-w-sz-36 text-body-2'],\n        md: ['h-sz-40 min-w-sz-40 text-body-1'],\n      },\n      hasMenu: {\n        true: 'pr-3xl',\n      },\n      orientation: {\n        horizontal: '',\n        vertical: '',\n      },\n    },\n    compoundVariants: [\n      {\n        hasMenu: true,\n        orientation: 'vertical',\n        class: 'w-full',\n      },\n    ],\n    defaultVariants: {\n      intent: 'support',\n      size: 'md',\n      hasMenu: false,\n      orientation: 'horizontal',\n    },\n  }\n)\n\nexport type TabsTriggerVariantsProps = VariantProps<typeof triggerVariants>\n","import { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { type ComponentProps, type FocusEvent, type ReactNode, Ref, useRef } from 'react'\n\ntype TabKeyDownEvent = Parameters<NonNullable<ComponentProps<typeof BaseTabs.Tab>['onKeyDown']>>[0]\n\nimport { createRenderSlot } from '@spark-ui/internal-utils'\n\nimport { useTabsContext } from './TabsContext'\nimport { type ConfiguredPopoverComponent, Popover } from './TabsPopoverAbstraction'\nimport { triggerVariants } from './TabsTrigger.styles'\n\nexport interface TabsTriggerProps extends Omit<ComponentProps<typeof BaseTabs.Tab>, 'render'> {\n  /**\n   * A unique value that associates the trigger with a content.\n   */\n  value: string\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * When true, prevents the user from interacting with the tab.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Function that receives a pre-configured Popover component and returns the popover structure.\n   * @example\n   * renderMenu={({ Popover }) => (\n   *   <Popover>\n   *     <Popover.Trigger aria-label=\"Options\">\n   *       <CustomIcon />\n   *     </Popover.Trigger>\n   *     <Popover.Content>\n   *       <Button>Action</Button>\n   *     </Popover.Content>\n   *   </Popover>\n   * )}\n   */\n  renderMenu?: (props: { Popover: ConfiguredPopoverComponent }) => ReactNode\n  ref?: Ref<HTMLButtonElement>\n}\n\n/** A button that activates a tab panel. Renders a <button> element. */\nexport const TabsTrigger = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  asChild = false,\n  value,\n  disabled = false,\n  children,\n  className,\n  ref,\n  onKeyDown,\n  renderMenu,\n  ...rest\n}: TabsTriggerProps) => {\n  const { intent, size, orientation } = useTabsContext()\n  const popoverTriggerRef = useRef<HTMLButtonElement>(null)\n  const tabsTriggerRef = useRef<HTMLButtonElement>(null)\n\n  // Combine internal ref with forwarded ref\n  const mergedRef = useMergeRefs(ref, tabsTriggerRef)\n\n  const { renderProp, innerChildren } = createRenderSlot(asChild, children)\n\n  const handleKeyDown = (e: TabKeyDownEvent) => {\n    // Handle Shift+F10 for popover\n    if (e.key === 'F10' && e.shiftKey && renderMenu && popoverTriggerRef.current) {\n      e.preventDefault()\n      popoverTriggerRef.current.click()\n    }\n\n    // Call original onKeyDown if provided\n    onKeyDown?.(e)\n  }\n\n  const hasMenu = !!renderMenu\n  const popoverSide = orientation === 'vertical' ? 'right' : 'bottom'\n\n  const trigger = (\n    <BaseTabs.Tab\n      data-spark-component=\"tabs-trigger\"\n      ref={mergedRef}\n      className={triggerVariants({\n        intent,\n        size,\n        hasMenu,\n        orientation: orientation ?? 'horizontal',\n        className,\n      })}\n      render={renderProp}\n      disabled={disabled}\n      value={value}\n      onFocus={({ target }: FocusEvent<HTMLButtonElement>) =>\n        target.scrollIntoView({\n          behavior: 'smooth',\n          block: 'nearest',\n          inline: 'nearest',\n        })\n      }\n      onKeyDown={handleKeyDown}\n      aria-haspopup={hasMenu ? 'true' : undefined}\n      {...rest}\n    >\n      {innerChildren}\n    </BaseTabs.Tab>\n  )\n\n  if (!hasMenu) {\n    return trigger\n  }\n\n  return (\n    <div className={orientation === 'vertical' ? 'relative w-full' : 'relative'}>\n      {trigger}\n      <div className=\"right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2\">\n        <Popover popoverSide={popoverSide} popoverTriggerRef={popoverTriggerRef}>\n          {PopoverAbstraction => renderMenu?.({ Popover: PopoverAbstraction })}\n        </Popover>\n      </div>\n    </div>\n  )\n}\n\nTabsTrigger.displayName = 'Tabs.Trigger'\n","import { Tabs as Root } from './Tabs'\nimport { TabsContent as Content } from './TabsContent'\nimport { TabsList as List } from './TabsList'\nimport { TabsTrigger as Trigger } from './TabsTrigger'\n\n/**\n * A set of layered sections of content that users can navigate between using tab controls.\n */\nexport const Tabs: typeof Root & {\n  List: typeof List\n  Trigger: typeof Trigger\n  Content: typeof Content\n} = Object.assign(Root, {\n  List,\n  Trigger,\n  Content,\n})\n\nTabs.displayName = 'Tabs'\nList.displayName = 'Tabs.List'\nTrigger.displayName = 'Tabs.Trigger'\nContent.displayName = 'Tabs.Content'\n\nexport { type TabsContentProps } from './TabsContent'\nexport { type TabsListProps } from './TabsList'\nexport { type TabsProps, type TabsRootProps } from './Tabs'\nexport { type TabsTriggerProps } from './TabsTrigger'\n"],"mappings":"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"}

package/dist/tabs/index.mjs

@@ -1,80 +1,71 @@
-import { Slot as e } from "../slot/index.mjs";
-import { t } from "../icon-Bs-39J-H.mjs";
-import { t as n } from "../button-DwLTXeJX.mjs";
-import { t as r } from "../icon-button-C1ThqdK1.mjs";
-import { t as i } from "../popover-CGhSHQzb.mjs";
-import { cva as a, cx as o } from "class-variance-authority";
-import { createContext as s, forwardRef as c, useContext as l, useEffect as u, useMemo as d, useRef as f, useState as p } from "react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { makeVariants as g } from "@spark-ui/internal-utils";
+import { t as e } from "../icon-VM_Ys9Xn.mjs";
+import { t } from "../button-DBNjh3Bi.mjs";
+import { t as n } from "../icon-button-CexCkoV0.mjs";
+import { t as r } from "../popover-COqbFikI.mjs";
+import { createRenderSlot as i, makeVariants as a } from "@spark-ui/internal-utils";
+import { cva as o, cx as s } from "class-variance-authority";
+import { createContext as c, forwardRef as l, useContext as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
 import { useMergeRefs as _ } from "@spark-ui/hooks/use-merge-refs";
 import { ArrowVerticalRight as v } from "@spark-ui/icons/ArrowVerticalRight";
 import { ArrowVerticalLeft as y } from "@spark-ui/icons/ArrowVerticalLeft";
 import { Tabs as b } from "@base-ui/react/tabs";
 import { MoreMenuHorizontal as x } from "@spark-ui/icons/MoreMenuHorizontal";
 //#region src/tabs/TabsContext.tsx
-var S = s({}), C = () => {
-	let e = l(S);
+var S = c({}), C = () => {
+	let e = u(S);
 	if (!e) throw Error("useTabsContext must be used within a TabsContext Provider");
 	return e;
-}, w = a([
+}, w = o([
 	"flex",
 	"data-[orientation=horizontal]:flex-col",
 	"data-[orientation=vertical]:flex-row",
 	"max-w-full"
-]);
-//#endregion
-//#region src/tabs/useRenderSlot.tsx
-function T(t) {
-	return t ? ({ ...t }) => /* @__PURE__ */ m(e, { ...t }) : void 0;
-}
-//#endregion
-//#region src/tabs/Tabs.tsx
-var E = ({ intent: e = "support", size: t = "md", asChild: n = !1, forceMount: r = !1, orientation: i = "horizontal", children: a, className: o, ref: s, ...c }) => {
-	let l = T(n);
-	return /* @__PURE__ */ m(S, {
+]), T = ({ intent: e = "support", size: t = "md", asChild: n = !1, forceMount: r = !1, orientation: a = "horizontal", children: o, className: s, ref: c, ...l }) => {
+	let { renderProp: u, innerChildren: d } = i(n, o);
+	return /* @__PURE__ */ h(S, {
 		value: {
 			intent: e,
 			size: t,
-			orientation: i,
+			orientation: a,
 			forceMount: r
 		},
-		children: /* @__PURE__ */ m(b.Root, {
-			ref: s,
-			orientation: i,
-			className: w({ className: o }),
+		children: /* @__PURE__ */ h(b.Root, {
+			ref: c,
+			orientation: a,
+			className: w({ className: s }),
 			"data-spark-component": "tabs",
-			render: l,
-			...c,
-			children: a
+			render: u,
+			...l,
+			children: d
 		})
 	});
 };
-E.displayName = "Tabs";
+T.displayName = "Tabs";
 //#endregion
 //#region src/tabs/TabsContent.styles.ts
-var D = a(["w-full p-lg", "focus-visible:u-outline-inset"], { variants: { forceMount: {
+var E = o(["w-full p-lg", "focus-visible:u-outline-inset"], { variants: { forceMount: {
 	true: "data-[hidden]:hidden",
 	false: ""
-} } }), O = ({ children: e, asChild: t = !1, className: n, ref: r, forceMount: i, ...a }) => {
-	let { forceMount: o } = C(), s = T(t), c = o || i;
-	return /* @__PURE__ */ m(b.Panel, {
+} } }), D = ({ children: e, asChild: t = !1, className: n, ref: r, forceMount: a, ...o }) => {
+	let { forceMount: s } = C(), { renderProp: c, innerChildren: l } = i(t, e), u = s || a;
+	return /* @__PURE__ */ h(b.Panel, {
 		"data-spark-component": "tabs-content",
 		ref: r,
-		keepMounted: c,
-		className: D({
+		keepMounted: u,
+		className: E({
 			className: n,
-			forceMount: c
+			forceMount: u
 		}),
-		render: s,
-		...a,
-		children: e
+		render: c,
+		...o,
+		children: l
 	});
 };
-O.displayName = "Tabs.Content";
+D.displayName = "Tabs.Content";
 //#endregion
 //#region src/tabs/TabsList.styles.ts
-var k = a(["relative flex"]), A = a([
+var O = o(["relative flex"]), k = o([
 	"flex w-full",
 	"data-[orientation=horizontal]:flex-row",
 	"data-[orientation=vertical]:flex-col",
@@ -82,19 +73,19 @@ var k = a(["relative flex"]), A = a([
 	"after:flex after:shrink after:grow after:border-outline",
 	"data-[orientation=horizontal]:after:border-b-sm",
 	"data-[orientation=vertical]:after:border-r-sm"
-]), j = a([
+]), A = o([
 	"h-auto! flex-none",
 	"border-b-sm border-outline",
 	"outline-hidden",
 	"focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset!"
-]), M = (e, t) => {
-	let [n, r] = p({
+]), j = (e, t) => {
+	let [n, r] = m({
 		width: void 0,
 		height: void 0
-	}), i = f(null), a = f(t);
-	return u(() => {
+	}), i = p(null), a = p(t);
+	return d(() => {
 		a.current = t;
-	}, [t]), u(() => {
+	}, [t]), d(() => {
 		let t = e && "current" in e ? e.current : e;
 		if (!(!t || i.current)) return i.current = new ResizeObserver(([e]) => {
 			let { inlineSize: t, blockSize: n } = e?.borderBoxSize?.[0] ?? {};
@@ -110,147 +101,147 @@ var k = a(["relative flex"]), A = a([
 		i,
 		a
 	]), n;
-}, N = ({ asChild: e = !1, loop: r = !1, children: i, className: a, ref: o, ...s }) => {
-	let c = f(null), l = f(null), d = o || l, { orientation: g } = C(), _ = T(e), { width: x } = M(c), [S, w] = p({
+}, M = ({ asChild: n = !1, loop: r = !1, children: a, className: o, ref: s, ...c }) => {
+	let l = p(null), u = p(null), f = s || u, { orientation: _ } = C(), { renderProp: x, innerChildren: S } = i(n, a), { width: w } = j(l), [T, E] = m({
 		prev: "hidden",
 		next: "hidden"
 	});
-	u(() => {
-		typeof d == "function" || !d.current || w(g === "horizontal" ? {
-			prev: d.current.scrollWidth > d.current.clientWidth ? "visible" : "hidden",
-			next: d.current.scrollWidth > d.current.clientWidth ? "visible" : "hidden"
+	d(() => {
+		typeof f == "function" || !f.current || E(_ === "horizontal" ? {
+			prev: f.current.scrollWidth > f.current.clientWidth ? "visible" : "hidden",
+			next: f.current.scrollWidth > f.current.clientWidth ? "visible" : "hidden"
 		} : {
 			prev: "hidden",
 			next: "hidden"
 		});
 	}, [
-		g,
-		d,
-		x
-	]), u(() => {
-		if (typeof d == "function" || !d.current || S.prev === "hidden" || r) return;
+		_,
+		f,
+		w
+	]), d(() => {
+		if (typeof f == "function" || !f.current || T.prev === "hidden" || r) return;
 		let e = (e) => {
-			w({
+			E({
 				prev: e.scrollLeft > 0 ? "visible" : "disabled",
 				next: e.scrollLeft + e.clientWidth < e.scrollWidth ? "visible" : "disabled"
 			});
-		}, t = d.current;
+		}, t = f.current;
 		return e(t), t.addEventListener("scroll", ({ target: t }) => e(t)), () => t.removeEventListener("scroll", ({ target: t }) => e(t));
 	}, [
-		d,
-		S.prev,
+		f,
+		T.prev,
 		r
 	]);
-	let E = () => {
-		if (typeof d == "function" || !d.current) return;
-		let e = r && d.current.scrollLeft <= 0;
-		d.current.scrollTo({
-			left: e ? d.current.scrollLeft + d.current.scrollWidth - d.current.clientWidth : d.current.scrollLeft - d.current.clientWidth,
+	let D = () => {
+		if (typeof f == "function" || !f.current) return;
+		let e = r && f.current.scrollLeft <= 0;
+		f.current.scrollTo({
+			left: e ? f.current.scrollLeft + f.current.scrollWidth - f.current.clientWidth : f.current.scrollLeft - f.current.clientWidth,
 			behavior: "smooth"
 		});
-	}, D = () => {
-		if (typeof d == "function" || !d.current) return;
-		let e = r && d.current.scrollLeft + d.current.clientWidth >= d.current.scrollWidth;
-		d.current.scrollTo({
-			left: e ? 0 : d.current.scrollLeft + d.current.clientWidth,
+	}, M = () => {
+		if (typeof f == "function" || !f.current) return;
+		let e = r && f.current.scrollLeft + f.current.clientWidth >= f.current.scrollWidth;
+		f.current.scrollTo({
+			left: e ? 0 : f.current.scrollLeft + f.current.clientWidth,
 			behavior: "smooth"
 		});
 	};
-	return /* @__PURE__ */ h("div", {
-		className: k({ className: a }),
-		ref: c,
+	return /* @__PURE__ */ g("div", {
+		className: O({ className: o }),
+		ref: l,
 		children: [
-			S.prev !== "hidden" && /* @__PURE__ */ m(n, {
+			T.prev !== "hidden" && /* @__PURE__ */ h(t, {
 				shape: "square",
 				intent: "surface",
 				size: "sm",
-				className: j(),
-				onClick: E,
-				disabled: S.prev === "disabled",
+				className: A(),
+				onClick: D,
+				disabled: T.prev === "disabled",
 				"aria-label": "Scroll left",
-				children: /* @__PURE__ */ m(t, { children: /* @__PURE__ */ m(y, {}) })
+				children: /* @__PURE__ */ h(e, { children: /* @__PURE__ */ h(y, {}) })
 			}),
-			/* @__PURE__ */ m(b.List, {
+			/* @__PURE__ */ h(b.List, {
 				"data-spark-component": "tabs-list",
-				ref: d,
-				className: A(),
-				render: _,
+				ref: f,
+				className: k(),
+				render: x,
 				loopFocus: r,
 				activateOnFocus: !0,
-				...s,
-				children: i
+				...c,
+				children: S
 			}),
-			S.next !== "hidden" && /* @__PURE__ */ m(n, {
+			T.next !== "hidden" && /* @__PURE__ */ h(t, {
 				shape: "square",
 				intent: "surface",
 				size: "sm",
-				className: j(),
-				onClick: D,
-				disabled: S.next === "disabled",
+				className: A(),
+				onClick: M,
+				disabled: T.next === "disabled",
 				"aria-label": "Scroll right",
-				children: /* @__PURE__ */ m(t, { children: /* @__PURE__ */ m(v, {}) })
+				children: /* @__PURE__ */ h(e, { children: /* @__PURE__ */ h(v, {}) })
 			})
 		]
 	});
 };
-N.displayName = "Tabs.List";
+M.displayName = "Tabs.List";
 //#endregion
 //#region src/tabs/TabsPopoverAbstraction.tsx
-var P = s(void 0), F = () => {
-	let e = l(P);
+var N = c(void 0), P = () => {
+	let e = u(N);
 	if (!e) throw Error("TabsPopover components must be used within TabsPopover");
 	return e;
-}, I = c(({ "aria-label": e, children: n, ...a }, o) => {
-	let { popoverTriggerRef: s } = F(), c = _(o, s);
-	return /* @__PURE__ */ m(i.Trigger, {
+}, F = l(({ "aria-label": t, children: i, ...a }, o) => {
+	let { popoverTriggerRef: s } = P(), c = _(o, s);
+	return /* @__PURE__ */ h(r.Trigger, {
 		asChild: !0,
 		...a,
-		children: /* @__PURE__ */ m(r, {
+		children: /* @__PURE__ */ h(n, {
 			ref: c,
 			size: "sm",
 			intent: "surfaceInverse",
 			design: "ghost",
-			"aria-label": e,
+			"aria-label": t,
 			tabIndex: -1,
-			children: /* @__PURE__ */ m(t, { children: n || /* @__PURE__ */ m(x, {}) })
+			children: /* @__PURE__ */ h(e, { children: i || /* @__PURE__ */ h(x, {}) })
 		})
 	});
 });
-I.displayName = "Popover.Trigger";
-var L = c(({ side: e, align: t = "start", className: n, ...r }, a) => {
-	let { popoverSide: s } = F(), c = o("gap-sm flex flex-col", n);
-	return /* @__PURE__ */ m(i.Content, {
+F.displayName = "Popover.Trigger";
+var I = l(({ side: e, align: t = "start", className: n, ...i }, a) => {
+	let { popoverSide: o } = P(), c = s("gap-sm flex flex-col", n);
+	return /* @__PURE__ */ h(r.Content, {
 		ref: a,
-		...r,
-		side: e ?? s,
+		...i,
+		side: e ?? o,
 		align: t,
 		className: c
 	});
 });
-L.displayName = "Popover.Content";
-var R = ({ popoverSide: e, popoverTriggerRef: t, children: n }) => {
-	let r = d(() => ({
+I.displayName = "Popover.Content";
+var L = ({ popoverSide: e, popoverTriggerRef: t, children: n }) => {
+	let i = f(() => ({
 		popoverSide: e,
 		popoverTriggerRef: t
 	}), [e, t]);
-	return /* @__PURE__ */ m(P, {
-		value: r,
-		children: n(Object.assign(((e) => /* @__PURE__ */ m(P, {
-			value: r,
-			children: /* @__PURE__ */ m(i, {
+	return /* @__PURE__ */ h(N, {
+		value: i,
+		children: n(Object.assign(((e) => /* @__PURE__ */ h(N, {
+			value: i,
+			children: /* @__PURE__ */ h(r, {
 				...e,
 				children: e.children
 			})
-		})), i, {
-			Content: L,
-			Trigger: I
+		})), r, {
+			Content: I,
+			Trigger: F
 		}))
 	});
 };
-R.displayName = "Popover";
+L.displayName = "Popover";
 //#endregion
 //#region src/tabs/TabsTrigger.styles.ts
-var z = a([
+var R = o([
 	"px-md",
 	"relative flex flex-none items-center",
 	"border-outline",
@@ -266,7 +257,7 @@ var z = a([
 	"[&>svg:last-child:first-child]:mx-auto"
 ], {
 	variants: {
-		intent: g({
+		intent: a({
 			main: ["data-[active]:text-main data-[active]:after:bg-main"],
 			support: ["data-[active]:text-support data-[active]:after:bg-support"]
 		}),
@@ -292,20 +283,20 @@ var z = a([
 		hasMenu: !1,
 		orientation: "horizontal"
 	}
-}), B = ({ asChild: e = !1, value: t, disabled: n = !1, children: r, className: i, ref: a, onKeyDown: o, renderMenu: s, ...c }) => {
-	let { intent: l, size: u, orientation: d } = C(), p = f(null), g = f(null), v = T(e), y = _(a, g), x = (e) => {
-		e.key === "F10" && e.shiftKey && s && p.current && (e.preventDefault(), p.current.click()), o?.(e);
-	}, S = !!s, w = d === "vertical" ? "right" : "bottom", E = /* @__PURE__ */ m(b.Tab, {
+}), z = ({ asChild: e = !1, value: t, disabled: n = !1, children: r, className: a, ref: o, onKeyDown: s, renderMenu: c, ...l }) => {
+	let { intent: u, size: d, orientation: f } = C(), m = p(null), v = _(o, p(null)), { renderProp: y, innerChildren: x } = i(e, r), S = (e) => {
+		e.key === "F10" && e.shiftKey && c && m.current && (e.preventDefault(), m.current.click()), s?.(e);
+	}, w = !!c, T = f === "vertical" ? "right" : "bottom", E = /* @__PURE__ */ h(b.Tab, {
 		"data-spark-component": "tabs-trigger",
-		ref: y,
-		className: z({
-			intent: l,
-			size: u,
-			hasMenu: S,
-			orientation: d ?? "horizontal",
-			className: i
+		ref: v,
+		className: R({
+			intent: u,
+			size: d,
+			hasMenu: w,
+			orientation: f ?? "horizontal",
+			className: a
 		}),
-		render: v,
+		render: y,
 		disabled: n,
 		value: t,
 		onFocus: ({ target: e }) => e.scrollIntoView({
@@ -313,33 +304,33 @@ var z = a([
 			block: "nearest",
 			inline: "nearest"
 		}),
-		onKeyDown: x,
-		"aria-haspopup": S ? "true" : void 0,
-		...c,
-		children: r
+		onKeyDown: S,
+		"aria-haspopup": w ? "true" : void 0,
+		...l,
+		children: x
 	});
-	return S ? /* @__PURE__ */ h("div", {
-		className: d === "vertical" ? "relative w-full" : "relative",
-		children: [E, /* @__PURE__ */ m("div", {
+	return w ? /* @__PURE__ */ g("div", {
+		className: f === "vertical" ? "relative w-full" : "relative",
+		children: [E, /* @__PURE__ */ h("div", {
 			className: "right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2",
-			children: /* @__PURE__ */ m(R, {
-				popoverSide: w,
-				popoverTriggerRef: p,
-				children: (e) => s?.({ Popover: e })
+			children: /* @__PURE__ */ h(L, {
+				popoverSide: T,
+				popoverTriggerRef: m,
+				children: (e) => c?.({ Popover: e })
 			})
 		})]
 	}) : E;
 };
-B.displayName = "Tabs.Trigger";
+z.displayName = "Tabs.Trigger";
 //#endregion
 //#region src/tabs/index.ts
-var V = Object.assign(E, {
-	List: N,
-	Trigger: B,
-	Content: O
+var B = Object.assign(T, {
+	List: M,
+	Trigger: z,
+	Content: D
 });
-V.displayName = "Tabs", N.displayName = "Tabs.List", B.displayName = "Tabs.Trigger", O.displayName = "Tabs.Content";
+B.displayName = "Tabs", M.displayName = "Tabs.List", z.displayName = "Tabs.Trigger", D.displayName = "Tabs.Content";
 //#endregion
-export { V as Tabs };
+export { B as Tabs };
 
 //# sourceMappingURL=index.mjs.map