@spark-ui/components 18.1.1 → 18.1.3

package/dist/tabs/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","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.mjs","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/tag/Tag.styles.d.ts

@@ -3,6 +3,6 @@ export declare const tagStyles: (props?: ({
     design?: "filled" | "outlined" | "tinted" | null | undefined;
     size?: "md" | "lg" | null | undefined;
     shape?: "square" | "rounded" | "pill" | null | undefined;
-    intent?: "main" | "alert" | "surface" | "support" | "accent" | "success" | "info" | "neutral" | "ai" | "danger" | null | undefined;
+    intent?: "main" | "surface" | "support" | "alert" | "accent" | "success" | "info" | "neutral" | "ai" | "danger" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type TagStylesProps = VariantProps<typeof tagStyles>;

package/dist/tag/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../slot/index.js");let t=require("class-variance-authority"),n=require("react/jsx-runtime"),r=require("@spark-ui/internal-utils");var i=[{intent:`main`,design:`filled`,class:(0,r.tw)([`bg-main`,`text-on-main`])},{intent:`support`,design:`filled`,class:(0,r.tw)([`bg-support`,`text-on-support`])},{intent:`accent`,design:`filled`,class:(0,r.tw)([`bg-accent`,`text-on-accent`])},{intent:`success`,design:`filled`,class:(0,r.tw)([`bg-success`,`text-on-success`])},{intent:`alert`,design:`filled`,class:(0,r.tw)([`bg-alert`,`text-on-alert`])},{intent:`danger`,design:`filled`,class:(0,r.tw)([`bg-error`,`text-on-error`])},{intent:`info`,design:`filled`,class:(0,r.tw)([`bg-info`,`text-on-info`])},{intent:`neutral`,design:`filled`,class:(0,r.tw)([`bg-neutral`,`text-on-neutral`])},{intent:`surface`,design:`filled`,class:(0,r.tw)([`bg-surface`,`text-on-surface`])}],a=[{intent:`main`,design:`outlined`,class:(0,r.tw)([`text-main`])},{intent:`support`,design:`outlined`,class:(0,r.tw)([`text-support`])},{intent:`accent`,design:`outlined`,class:(0,r.tw)([`text-accent`])},{intent:`success`,design:`outlined`,class:(0,r.tw)([`text-success`])},{intent:`alert`,design:`outlined`,class:(0,r.tw)([`text-alert`])},{intent:`danger`,design:`outlined`,class:(0,r.tw)([`text-error`])},{intent:`info`,design:`outlined`,class:(0,r.tw)([`text-info`])},{intent:`neutral`,design:`outlined`,class:(0,r.tw)([`text-neutral`])}],o=[{intent:`main`,design:`tinted`,class:(0,r.tw)([`bg-main-container`,`text-on-main-container`])},{intent:`support`,design:`tinted`,class:(0,r.tw)([`bg-support-container`,`text-on-support-container`])},{intent:`accent`,design:`tinted`,class:(0,r.tw)([`bg-accent-container`,`text-on-accent-container`])},{intent:`success`,design:`tinted`,class:(0,r.tw)([`bg-success-container`,`text-on-success-container`])},{intent:`alert`,design:`tinted`,class:(0,r.tw)([`bg-alert-container`,`text-on-alert-container`])},{intent:`danger`,design:`tinted`,class:(0,r.tw)([`bg-error-container`,`text-on-error-container`])},{intent:`info`,design:`tinted`,class:(0,r.tw)([`bg-info-container`,`text-on-info-container`])},{intent:`neutral`,design:`tinted`,class:(0,r.tw)([`bg-neutral-container`,`text-on-neutral-container`])},{intent:`ai`,design:`tinted`,class:(0,r.tw)([`bg-ai-container`,`text-on-ai-container`])}],s=(0,t.cva)([`box-border default:inline-flex default:w-fit items-center justify-center gap-sm whitespace-nowrap`,`text-caption-highlight`,`px-md`],{variants:{design:(0,r.makeVariants)({filled:[],outlined:[`border-sm`,`border-current`],tinted:[]}),size:(0,r.makeVariants)({md:[`h-sz-20`],lg:[`h-sz-24`]}),shape:(0,r.makeVariants)({square:[],rounded:[`rounded-tag`],pill:[`rounded-full`]}),intent:(0,r.makeVariants)({main:[],support:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[],ai:[]})},compoundVariants:[...i,...a,...o],defaultVariants:{design:`filled`,intent:`support`,size:`md`,shape:`pill`}}),c=({design:t=`filled`,intent:r=`support`,size:i=`md`,shape:a=`rounded`,asChild:o,className:c,ref:l,...u})=>(0,n.jsx)(o?e.Slot:`span`,{"data-spark-component":`tag`,ref:l,className:s({className:c,design:t,intent:r,size:i,shape:a}),...u});exports.Tag=c;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../slot/index.js");let t=require("@spark-ui/internal-utils"),n=require("class-variance-authority"),r=require("react/jsx-runtime");var i=[{intent:`main`,design:`filled`,class:(0,t.tw)([`bg-main`,`text-on-main`])},{intent:`support`,design:`filled`,class:(0,t.tw)([`bg-support`,`text-on-support`])},{intent:`accent`,design:`filled`,class:(0,t.tw)([`bg-accent`,`text-on-accent`])},{intent:`success`,design:`filled`,class:(0,t.tw)([`bg-success`,`text-on-success`])},{intent:`alert`,design:`filled`,class:(0,t.tw)([`bg-alert`,`text-on-alert`])},{intent:`danger`,design:`filled`,class:(0,t.tw)([`bg-error`,`text-on-error`])},{intent:`info`,design:`filled`,class:(0,t.tw)([`bg-info`,`text-on-info`])},{intent:`neutral`,design:`filled`,class:(0,t.tw)([`bg-neutral`,`text-on-neutral`])},{intent:`surface`,design:`filled`,class:(0,t.tw)([`bg-surface`,`text-on-surface`])}],a=[{intent:`main`,design:`outlined`,class:(0,t.tw)([`text-main`])},{intent:`support`,design:`outlined`,class:(0,t.tw)([`text-support`])},{intent:`accent`,design:`outlined`,class:(0,t.tw)([`text-accent`])},{intent:`success`,design:`outlined`,class:(0,t.tw)([`text-success`])},{intent:`alert`,design:`outlined`,class:(0,t.tw)([`text-alert`])},{intent:`danger`,design:`outlined`,class:(0,t.tw)([`text-error`])},{intent:`info`,design:`outlined`,class:(0,t.tw)([`text-info`])},{intent:`neutral`,design:`outlined`,class:(0,t.tw)([`text-neutral`])}],o=[{intent:`main`,design:`tinted`,class:(0,t.tw)([`bg-main-container`,`text-on-main-container`])},{intent:`support`,design:`tinted`,class:(0,t.tw)([`bg-support-container`,`text-on-support-container`])},{intent:`accent`,design:`tinted`,class:(0,t.tw)([`bg-accent-container`,`text-on-accent-container`])},{intent:`success`,design:`tinted`,class:(0,t.tw)([`bg-success-container`,`text-on-success-container`])},{intent:`alert`,design:`tinted`,class:(0,t.tw)([`bg-alert-container`,`text-on-alert-container`])},{intent:`danger`,design:`tinted`,class:(0,t.tw)([`bg-error-container`,`text-on-error-container`])},{intent:`info`,design:`tinted`,class:(0,t.tw)([`bg-info-container`,`text-on-info-container`])},{intent:`neutral`,design:`tinted`,class:(0,t.tw)([`bg-neutral-container`,`text-on-neutral-container`])},{intent:`ai`,design:`tinted`,class:(0,t.tw)([`bg-ai-container`,`text-on-ai-container`])}],s=(0,n.cva)([`box-border default:inline-flex default:w-fit items-center justify-center gap-sm whitespace-nowrap`,`text-caption-highlight`,`px-md`],{variants:{design:(0,t.makeVariants)({filled:[],outlined:[`border-sm`,`border-current`],tinted:[]}),size:(0,t.makeVariants)({md:[`h-sz-20`],lg:[`h-sz-24`]}),shape:(0,t.makeVariants)({square:[],rounded:[`rounded-tag`],pill:[`rounded-full`]}),intent:(0,t.makeVariants)({main:[],support:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[],ai:[]})},compoundVariants:[...i,...a,...o],defaultVariants:{design:`filled`,intent:`support`,size:`md`,shape:`pill`}}),c=({design:t=`filled`,intent:n=`support`,size:i=`md`,shape:a=`rounded`,asChild:o,className:c,ref:l,...u})=>(0,r.jsx)(o?e.Slot:`span`,{"data-spark-component":`tag`,ref:l,className:s({className:c,design:t,intent:n,size:i,shape:a}),...u});exports.Tag=c;
 //# sourceMappingURL=index.js.map

package/dist/tag/index.mjs

@@ -1,162 +1,162 @@
 import { Slot as e } from "../slot/index.mjs";
-import { cva as t } from "class-variance-authority";
-import { jsx as n } from "react/jsx-runtime";
-import { makeVariants as r, tw as i } from "@spark-ui/internal-utils";
+import { makeVariants as t, tw as n } from "@spark-ui/internal-utils";
+import { cva as r } from "class-variance-authority";
+import { jsx as i } from "react/jsx-runtime";
 //#region src/tag/variants/filled.ts
 var a = [
 	{
 		intent: "main",
 		design: "filled",
-		class: i(["bg-main", "text-on-main"])
+		class: n(["bg-main", "text-on-main"])
 	},
 	{
 		intent: "support",
 		design: "filled",
-		class: i(["bg-support", "text-on-support"])
+		class: n(["bg-support", "text-on-support"])
 	},
 	{
 		intent: "accent",
 		design: "filled",
-		class: i(["bg-accent", "text-on-accent"])
+		class: n(["bg-accent", "text-on-accent"])
 	},
 	{
 		intent: "success",
 		design: "filled",
-		class: i(["bg-success", "text-on-success"])
+		class: n(["bg-success", "text-on-success"])
 	},
 	{
 		intent: "alert",
 		design: "filled",
-		class: i(["bg-alert", "text-on-alert"])
+		class: n(["bg-alert", "text-on-alert"])
 	},
 	{
 		intent: "danger",
 		design: "filled",
-		class: i(["bg-error", "text-on-error"])
+		class: n(["bg-error", "text-on-error"])
 	},
 	{
 		intent: "info",
 		design: "filled",
-		class: i(["bg-info", "text-on-info"])
+		class: n(["bg-info", "text-on-info"])
 	},
 	{
 		intent: "neutral",
 		design: "filled",
-		class: i(["bg-neutral", "text-on-neutral"])
+		class: n(["bg-neutral", "text-on-neutral"])
 	},
 	{
 		intent: "surface",
 		design: "filled",
-		class: i(["bg-surface", "text-on-surface"])
+		class: n(["bg-surface", "text-on-surface"])
 	}
 ], o = [
 	{
 		intent: "main",
 		design: "outlined",
-		class: i(["text-main"])
+		class: n(["text-main"])
 	},
 	{
 		intent: "support",
 		design: "outlined",
-		class: i(["text-support"])
+		class: n(["text-support"])
 	},
 	{
 		intent: "accent",
 		design: "outlined",
-		class: i(["text-accent"])
+		class: n(["text-accent"])
 	},
 	{
 		intent: "success",
 		design: "outlined",
-		class: i(["text-success"])
+		class: n(["text-success"])
 	},
 	{
 		intent: "alert",
 		design: "outlined",
-		class: i(["text-alert"])
+		class: n(["text-alert"])
 	},
 	{
 		intent: "danger",
 		design: "outlined",
-		class: i(["text-error"])
+		class: n(["text-error"])
 	},
 	{
 		intent: "info",
 		design: "outlined",
-		class: i(["text-info"])
+		class: n(["text-info"])
 	},
 	{
 		intent: "neutral",
 		design: "outlined",
-		class: i(["text-neutral"])
+		class: n(["text-neutral"])
 	}
 ], s = [
 	{
 		intent: "main",
 		design: "tinted",
-		class: i(["bg-main-container", "text-on-main-container"])
+		class: n(["bg-main-container", "text-on-main-container"])
 	},
 	{
 		intent: "support",
 		design: "tinted",
-		class: i(["bg-support-container", "text-on-support-container"])
+		class: n(["bg-support-container", "text-on-support-container"])
 	},
 	{
 		intent: "accent",
 		design: "tinted",
-		class: i(["bg-accent-container", "text-on-accent-container"])
+		class: n(["bg-accent-container", "text-on-accent-container"])
 	},
 	{
 		intent: "success",
 		design: "tinted",
-		class: i(["bg-success-container", "text-on-success-container"])
+		class: n(["bg-success-container", "text-on-success-container"])
 	},
 	{
 		intent: "alert",
 		design: "tinted",
-		class: i(["bg-alert-container", "text-on-alert-container"])
+		class: n(["bg-alert-container", "text-on-alert-container"])
 	},
 	{
 		intent: "danger",
 		design: "tinted",
-		class: i(["bg-error-container", "text-on-error-container"])
+		class: n(["bg-error-container", "text-on-error-container"])
 	},
 	{
 		intent: "info",
 		design: "tinted",
-		class: i(["bg-info-container", "text-on-info-container"])
+		class: n(["bg-info-container", "text-on-info-container"])
 	},
 	{
 		intent: "neutral",
 		design: "tinted",
-		class: i(["bg-neutral-container", "text-on-neutral-container"])
+		class: n(["bg-neutral-container", "text-on-neutral-container"])
 	},
 	{
 		intent: "ai",
 		design: "tinted",
-		class: i(["bg-ai-container", "text-on-ai-container"])
+		class: n(["bg-ai-container", "text-on-ai-container"])
 	}
-], c = t([
+], c = r([
 	"box-border default:inline-flex default:w-fit items-center justify-center gap-sm whitespace-nowrap",
 	"text-caption-highlight",
 	"px-md"
 ], {
 	variants: {
-		design: r({
+		design: t({
 			filled: [],
 			outlined: ["border-sm", "border-current"],
 			tinted: []
 		}),
-		size: r({
+		size: t({
 			md: ["h-sz-20"],
 			lg: ["h-sz-24"]
 		}),
-		shape: r({
+		shape: t({
 			square: [],
 			rounded: ["rounded-tag"],
 			pill: ["rounded-full"]
 		}),
-		intent: r({
+		intent: t({
 			main: [],
 			support: [],
 			accent: [],
@@ -180,14 +180,14 @@ var a = [
 		size: "md",
 		shape: "pill"
 	}
-}), l = ({ design: t = "filled", intent: r = "support", size: i = "md", shape: a = "rounded", asChild: o, className: s, ref: l, ...u }) => /* @__PURE__ */ n(o ? e : "span", {
+}), l = ({ design: t = "filled", intent: n = "support", size: r = "md", shape: a = "rounded", asChild: o, className: s, ref: l, ...u }) => /* @__PURE__ */ i(o ? e : "span", {
 	"data-spark-component": "tag",
 	ref: l,
 	className: c({
 		className: s,
 		design: t,
-		intent: r,
-		size: i,
+		intent: n,
+		size: r,
 		shape: a
 	}),
 	...u

package/dist/text-link/TextLink.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import { ComponentPropsWithRef } from 'react';
 declare const textLinkStyles: (props?: ({
-    intent?: "main" | "current" | "alert" | "support" | "accent" | "success" | "info" | "neutral" | "danger" | null | undefined;
+    intent?: "main" | "support" | "alert" | "current" | "accent" | "success" | "info" | "neutral" | "danger" | null | undefined;
     bold?: boolean | null | undefined;
     underline?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/textarea/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../input-BoxJZira.js");let t=require("class-variance-authority"),n=require("react/jsx-runtime");var r=t=>(0,n.jsx)(e.t.ClearButton,{inline:!0,"data-spark-component":`textarea-group-trailing-icon`,...t});r.id=e.t.ClearButton.id,r.displayName=`TextareaGroup.ClearButton`;var i=t=>(0,n.jsx)(e.t,{...t});i.displayName=`TextareaGroup`;var a=t=>(0,n.jsx)(e.t.LeadingIcon,{"data-spark-component":`textarea-group-leading-icon`,...t});a.id=e.t.LeadingIcon.id,a.displayName=`TextareaGroup.LeadingIcon`;var o=t=>(0,n.jsx)(e.t.TrailingIcon,{"data-spark-component":`textarea-group-trailing-icon`,...t});o.id=e.t.TrailingIcon.id,o.displayName=`TextareaGroup.TrailingIcon`;var s=({className:r,disabled:i,rows:a=1,isResizable:o=!0,ref:s,onValueChange:c,...l})=>(0,n.jsx)(e.n,{className:(0,t.cx)(r,`py-sz-10 rounded-xl!`,o?`resize-y`:`resize-none`),"data-spark-component":`textarea`,disabled:i,asChild:!0,onValueChange:c,children:(0,n.jsx)(`textarea`,{ref:s,rows:a,...l})}),c=Object.assign(s,{id:e.n.id});s.displayName=`Textarea`;var l=Object.assign(i,{LeadingIcon:a,TrailingIcon:o,ClearButton:r});l.displayName=`TextareaGroup`,a.displayName=`TextareaGroup.LeadingIcon`,o.displayName=`TextareaGroup.TrailingIcon`,r.displayName=`TextareaGroup.ClearButton`,exports.Textarea=c,exports.TextareaGroup=l;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../input-CADvgFpY.js");let t=require("class-variance-authority"),n=require("react/jsx-runtime");var r=t=>(0,n.jsx)(e.t.ClearButton,{inline:!0,"data-spark-component":`textarea-group-trailing-icon`,...t});r.id=e.t.ClearButton.id,r.displayName=`TextareaGroup.ClearButton`;var i=t=>(0,n.jsx)(e.t,{...t});i.displayName=`TextareaGroup`;var a=t=>(0,n.jsx)(e.t.LeadingIcon,{"data-spark-component":`textarea-group-leading-icon`,...t});a.id=e.t.LeadingIcon.id,a.displayName=`TextareaGroup.LeadingIcon`;var o=t=>(0,n.jsx)(e.t.TrailingIcon,{"data-spark-component":`textarea-group-trailing-icon`,...t});o.id=e.t.TrailingIcon.id,o.displayName=`TextareaGroup.TrailingIcon`;var s=({className:r,disabled:i,rows:a=1,isResizable:o=!0,ref:s,onValueChange:c,...l})=>(0,n.jsx)(e.n,{className:(0,t.cx)(r,`py-sz-10 rounded-xl!`,o?`resize-y`:`resize-none`),"data-spark-component":`textarea`,disabled:i,asChild:!0,onValueChange:c,children:(0,n.jsx)(`textarea`,{ref:s,rows:a,...l})}),c=Object.assign(s,{id:e.n.id});s.displayName=`Textarea`;var l=Object.assign(i,{LeadingIcon:a,TrailingIcon:o,ClearButton:r});l.displayName=`TextareaGroup`,a.displayName=`TextareaGroup.LeadingIcon`,o.displayName=`TextareaGroup.TrailingIcon`,r.displayName=`TextareaGroup.ClearButton`,exports.Textarea=c,exports.TextareaGroup=l;
 //# sourceMappingURL=index.js.map

package/dist/textarea/index.mjs

@@ -1,4 +1,4 @@
-import { n as e, t } from "../input-Du9YSgAt.mjs";
+import { n as e, t } from "../input-CmlNZ4Bo.mjs";
 import { cx as n } from "class-variance-authority";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/textarea/TextareaClearButton.tsx

package/dist/toast/Toast.styles.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const toastStyles: (props?: ({
     design?: "filled" | "tinted" | null | undefined;
-    intent?: "main" | "alert" | "surface" | "support" | "error" | "accent" | "success" | "info" | "neutral" | "surfaceInverse" | null | undefined;
+    intent?: "main" | "surface" | "support" | "alert" | "error" | "accent" | "success" | "info" | "neutral" | "surfaceInverse" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type ToastVariantProps = VariantProps<typeof toastStyles>;

package/dist/toast/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../rolldown-runtime-CMqjfN_6.js"),t=require("../slot/index.js"),n=require("../icon-DY4l9nsc.js"),r=require("../button-D0s-21qo.js"),i=require("../icon-button-DRFf308H.js");let a=require("class-variance-authority"),o=require("react");o=e.t(o);let s=require("react/jsx-runtime"),c=require("@spark-ui/icons/Close"),l=require("@base-ui/react/toast"),u=require("@spark-ui/icons/AlertFill"),d=require("@spark-ui/icons/InfoFill"),f=require("@spark-ui/icons/ValidFill"),p=require("@spark-ui/icons/WarningFill");var m=(0,a.cva)([`gap-lg p-md flex w-max !w-[min(400px,calc(100vw-2rem))] flex-col rounded-lg border-md`,`absolute right-0 bottom-0 left-auto mr-0`,`bg-clip-padding shadow-md select-none`,`focus-visible:ring-focus focus-visible:ring-2 focus-visible:outline-none`,`z-[calc(1000-var(--toast-index))]`,`after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']`,`[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+calc(min(var(--toast-index),10)*-16px)))_scale(calc(max(0,1-(var(--toast-index)*0.1))))]`,`ease-standard [transition-property:opacity,transform]`,`duration-400`,`data-[starting-style]:[transform:translateY(150%)]`,`data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y)))]`,`data-[ending-style]:duration-250`,`data-[ending-style]:opacity-0`,`data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]`,`data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]`,`data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]`,`data-[limited]:opacity-0`],{variants:{design:{filled:``,tinted:``},intent:{success:``,alert:``,error:``,info:``,neutral:``,main:``,support:``,accent:``,surface:``,surfaceInverse:``}},compoundVariants:[{design:`filled`,intent:`success`,class:[`bg-success text-on-success border-success`]},{design:`filled`,intent:`alert`,class:[`bg-alert text-on-alert border-alert`]},{design:`filled`,intent:`error`,class:[`bg-error text-on-error border-error`]},{design:`filled`,intent:`info`,class:[`bg-info text-on-info border-info`]},{design:`filled`,intent:`neutral`,class:[`bg-neutral text-on-neutral border-neutral`]},{design:`filled`,intent:`main`,class:[`bg-main text-on-main border-main`]},{design:`filled`,intent:`support`,class:[`bg-support text-on-support border-support`]},{design:`filled`,intent:`accent`,class:[`bg-accent text-on-accent border-accent`]},{design:`filled`,intent:`surface`,class:[`bg-surface text-on-surface border-surface`]},{design:`filled`,intent:`surfaceInverse`,class:[`bg-surface-inverse text-on-surface-inverse border-surface-inverse`]},{design:`tinted`,intent:`success`,class:[`bg-success-container text-on-success-container border-success`]},{design:`tinted`,intent:`alert`,class:[`bg-alert-container text-on-alert-container border-alert`]},{design:`tinted`,intent:`error`,class:[`bg-error-container text-on-error-container border-error`]},{design:`tinted`,intent:`info`,class:[`bg-info-container text-on-info-container border-info`]},{design:`tinted`,intent:`neutral`,class:[`bg-neutral-container text-on-neutral-container border-neutral`]},{design:`tinted`,intent:`main`,class:[`bg-main-container text-on-main-container border-main`]},{design:`tinted`,intent:`support`,class:[`bg-support-container text-on-support-container border-support`]},{design:`tinted`,intent:`accent`,class:[`bg-accent-container text-on-accent-container border-accent`]},{design:`tinted`,intent:`surface`,class:[`bg-surface text-on-surface border-surface`]},{design:`tinted`,intent:`surfaceInverse`,class:[`bg-surface-inverse text-on-surface-inverse border-surface-inverse`]}],defaultVariants:{design:`filled`,intent:`neutral`}});function h(e){return e===`surfaceInverse`?`surface`:e===`surface`?`surfaceInverse`:e===`error`?`danger`:e}function g(e){return e===`surfaceInverse`?`surfaceInverse`:e===`surface`?`surface`:e===`error`?`danger`:e}var _=(e,{toastDesign:t,toastIntent:n})=>{if(!e)return{};let{design:r,intent:i,className:o,onClick:s,...c}=e;return{design:r??t,intent:i??h(n),className:(0,a.cx)(`ml-auto`,o),onClick:s,...c}},v=(e,t,n)=>({swipeDirection:[`down`,`right`],toast:e,className:(0,a.cx)(m({design:t,intent:n})),style:{"--gap":`var(--spacing-md)`,"--offset-y":`calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y))`}});function y(e){switch(e){case`info`:return(0,s.jsx)(d.InfoFill,{});case`success`:return(0,s.jsx)(f.ValidFill,{});case`alert`:return(0,s.jsx)(p.WarningFill,{});case`error`:return(0,s.jsx)(u.AlertFill,{});default:return(0,s.jsx)(d.InfoFill,{})}}function b({toast:e}){let{icon:t,intent:o=`info`,design:u,action:d,isClosable:f,closeLabel:p=`Close`,compact:m=!1}=e.data??{},h=`tinted`,b=d?.close?l.Toast.Close:l.Toast.Action,x=_(d,{toastDesign:h,toastIntent:o}),S=v(e,h,o),C=t??y(o),w=e=>f?(0,s.jsx)(l.Toast.Close,{className:e,render:(0,s.jsx)(i.t,{"aria-label":p,design:h,intent:g(o),size:`md`}),children:(0,s.jsx)(n.t,{children:(0,s.jsx)(c.Close,{})})}):null,T=()=>{let t=e.data?.title??e.title,n=!!(e.data?.description??e.description);return typeof t!=`string`&&t!==void 0?(0,s.jsx)(l.Toast.Title,{className:n?`text-headline-2`:`text-body-1`,render:(0,s.jsx)(`div`,{}),children:t}):(0,s.jsx)(l.Toast.Title,{className:n?`text-headline-2`:`text-body-1`})},E=()=>{let t=e.data?.description??e.description;return t?typeof t==`string`?(0,s.jsx)(l.Toast.Description,{className:`text-body-1`}):(0,s.jsx)(l.Toast.Description,{className:`text-body-1`,render:(0,s.jsx)(`div`,{}),children:t}):null};return(0,s.jsx)(l.Toast.Root,{...S,children:(0,s.jsxs)(`div`,{className:(0,a.cx)(`flex`,m?`gap-lg items-center`:`gap-md flex-col`),children:[(0,s.jsxs)(`div`,{className:`gap-lg p-md flex grow items-center`,children:[(0,s.jsx)(n.t,{size:`md`,children:C}),(0,s.jsxs)(`div`,{className:(0,a.cx)(`gap-sm flex flex-col`,m&&`flex-1`,!m&&f&&`pr-3xl`),children:[T(),E()]})]}),(0,s.jsxs)(`div`,{className:(0,a.cx)(`flex`),children:[d&&(0,s.jsx)(b,{render:(0,s.jsx)(r.t,{...x}),children:d.label}),m&&w()]}),!m&&w(`top-md right-md absolute`)]})},e.id)}function x(){let e=l.Toast.useToastManager(),t=o.useRef(e);return t.current=e,o.useMemo(()=>({get toasts(){return t.current.toasts},add:e=>t.current.add(e),update:(e,n)=>t.current.update(e,n),close:e=>t.current.close(e),promise:(e,n)=>t.current.promise(e,n),closeAll:()=>t.current.toasts.forEach(({id:e})=>t.current.close(e))}),[])}function S(){let{toasts:e}=x();return e.map(e=>(0,s.jsx)(b,{toast:e},e.id))}function C({children:e,limit:t=3,...n}){return(0,s.jsxs)(l.Toast.Provider,{limit:t,...n,children:[(0,s.jsx)(l.Toast.Portal,{children:(0,s.jsx)(l.Toast.Viewport,{className:(0,a.cx)(`z-toast right-lg bottom-lg text-on-surfa- fixed top-auto mx-auto flex w-fit flex-col items-end`),children:(0,s.jsx)(S,{})})}),e]})}function w({children:e,onClick:n,asChild:r=!1,title:i,description:a,timeout:o=5e3,design:c=`filled`,intent:l=`neutral`,isClosable:u=!0,icon:d,action:f,compact:p,priority:m=`low`}){let h=x(),g=r?t.Slot:`button`;function _(e){n?.(e),h.add({title:i,description:a,timeout:o,priority:m,data:{design:c,intent:l,isClosable:u,...d&&{icon:d},action:f,...p!==void 0&&{compact:p}}})}return(0,s.jsx)(g,{...!r&&{type:`button`},onClick:_,children:e})}var T=l.Toast.createToastManager;exports.ToastProvider=C,exports.ToastTrigger=w,exports.createToastManager=T,exports.useToastManager=x;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../rolldown-runtime-CMqjfN_6.js"),t=require("../slot/index.js"),n=require("../icon-CfEsla9z.js"),r=require("../button-3vvMrf1L.js"),i=require("../icon-button-B2TM0Xby.js");let a=require("class-variance-authority"),o=require("react");o=e.t(o);let s=require("react/jsx-runtime"),c=require("@spark-ui/icons/Close"),l=require("@base-ui/react/toast"),u=require("@spark-ui/icons/AlertFill"),d=require("@spark-ui/icons/InfoFill"),f=require("@spark-ui/icons/ValidFill"),p=require("@spark-ui/icons/WarningFill");var m=(0,a.cva)([`gap-lg p-md flex w-max w-[min(400px,calc(100vw-var(--spacing-sz-32)))]! flex-col rounded-lg border-md`,`absolute right-0 bottom-0 left-auto mr-0`,`bg-clip-padding shadow-md select-none`,`focus-visible:ring-focus focus-visible:ring-2 focus-visible:outline-none`,`z-[calc(1000-var(--toast-index))]`,`after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']`,`[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+calc(min(var(--toast-index),10)*-16px)))_scale(calc(max(0,1-(var(--toast-index)*0.1))))]`,`ease-standard [transition-property:opacity,transform]`,`duration-400`,`data-[starting-style]:[transform:translateY(150%)]`,`data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y)))]`,`data-[ending-style]:duration-250`,`data-[ending-style]:opacity-0`,`data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]`,`data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]`,`data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]`,`data-[limited]:opacity-0`],{variants:{design:{filled:``,tinted:``},intent:{success:``,alert:``,error:``,info:``,neutral:``,main:``,support:``,accent:``,surface:``,surfaceInverse:``}},compoundVariants:[{design:`filled`,intent:`success`,class:[`bg-success text-on-success border-success`]},{design:`filled`,intent:`alert`,class:[`bg-alert text-on-alert border-alert`]},{design:`filled`,intent:`error`,class:[`bg-error text-on-error border-error`]},{design:`filled`,intent:`info`,class:[`bg-info text-on-info border-info`]},{design:`filled`,intent:`neutral`,class:[`bg-neutral text-on-neutral border-neutral`]},{design:`filled`,intent:`main`,class:[`bg-main text-on-main border-main`]},{design:`filled`,intent:`support`,class:[`bg-support text-on-support border-support`]},{design:`filled`,intent:`accent`,class:[`bg-accent text-on-accent border-accent`]},{design:`filled`,intent:`surface`,class:[`bg-surface text-on-surface border-surface`]},{design:`filled`,intent:`surfaceInverse`,class:[`bg-surface-inverse text-on-surface-inverse border-surface-inverse`]},{design:`tinted`,intent:`success`,class:[`bg-success-container text-on-success-container border-success`]},{design:`tinted`,intent:`alert`,class:[`bg-alert-container text-on-alert-container border-alert`]},{design:`tinted`,intent:`error`,class:[`bg-error-container text-on-error-container border-error`]},{design:`tinted`,intent:`info`,class:[`bg-info-container text-on-info-container border-info`]},{design:`tinted`,intent:`neutral`,class:[`bg-neutral-container text-on-neutral-container border-neutral`]},{design:`tinted`,intent:`main`,class:[`bg-main-container text-on-main-container border-main`]},{design:`tinted`,intent:`support`,class:[`bg-support-container text-on-support-container border-support`]},{design:`tinted`,intent:`accent`,class:[`bg-accent-container text-on-accent-container border-accent`]},{design:`tinted`,intent:`surface`,class:[`bg-surface text-on-surface border-surface`]},{design:`tinted`,intent:`surfaceInverse`,class:[`bg-surface-inverse text-on-surface-inverse border-surface-inverse`]}],defaultVariants:{design:`filled`,intent:`neutral`}});function h(e){return e===`surfaceInverse`?`surface`:e===`surface`?`surfaceInverse`:e===`error`?`danger`:e}function g(e){return e===`surfaceInverse`?`surfaceInverse`:e===`surface`?`surface`:e===`error`?`danger`:e}var _=(e,{toastDesign:t,toastIntent:n})=>{if(!e)return{};let{design:r,intent:i,className:o,onClick:s,...c}=e;return{design:r??t,intent:i??h(n),className:(0,a.cx)(`ml-auto`,o),onClick:s,...c}},v=(e,t,n)=>({swipeDirection:[`down`,`right`],toast:e,className:(0,a.cx)(m({design:t,intent:n})),style:{"--gap":`var(--spacing-md)`,"--offset-y":`calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y))`}});function y(e){switch(e){case`info`:return(0,s.jsx)(d.InfoFill,{});case`success`:return(0,s.jsx)(f.ValidFill,{});case`alert`:return(0,s.jsx)(p.WarningFill,{});case`error`:return(0,s.jsx)(u.AlertFill,{});default:return(0,s.jsx)(d.InfoFill,{})}}function b({toast:e}){let{icon:t,intent:o=`info`,design:u,action:d,isClosable:f,closeLabel:p=`Close`,compact:m=!1}=e.data??{},h=`tinted`,b=d?.close?l.Toast.Close:l.Toast.Action,x=_(d,{toastDesign:h,toastIntent:o}),S=v(e,h,o),C=t??y(o),w=e=>f?(0,s.jsx)(l.Toast.Close,{className:e,render:(0,s.jsx)(i.t,{"aria-label":p,design:h,intent:g(o),size:`md`}),children:(0,s.jsx)(n.t,{children:(0,s.jsx)(c.Close,{})})}):null,T=()=>{let t=e.data?.title??e.title,n=!!(e.data?.description??e.description);return typeof t!=`string`&&t!==void 0?(0,s.jsx)(l.Toast.Title,{className:n?`text-headline-2`:`text-body-1`,render:(0,s.jsx)(`div`,{}),children:t}):(0,s.jsx)(l.Toast.Title,{className:n?`text-headline-2`:`text-body-1`})},E=()=>{let t=e.data?.description??e.description;return t?typeof t==`string`?(0,s.jsx)(l.Toast.Description,{className:`text-body-1`}):(0,s.jsx)(l.Toast.Description,{className:`text-body-1`,render:(0,s.jsx)(`div`,{}),children:t}):null};return(0,s.jsx)(l.Toast.Root,{...S,children:(0,s.jsxs)(`div`,{className:(0,a.cx)(`flex`,m?`gap-lg items-center`:`gap-md flex-col`),children:[(0,s.jsxs)(`div`,{className:`gap-lg p-md flex grow items-center`,children:[(0,s.jsx)(n.t,{size:`md`,children:C}),(0,s.jsxs)(`div`,{className:(0,a.cx)(`gap-sm flex flex-col`,m&&`flex-1`,!m&&f&&`pr-3xl`),children:[T(),E()]})]}),(0,s.jsxs)(`div`,{className:(0,a.cx)(`flex`),children:[d&&(0,s.jsx)(b,{render:(0,s.jsx)(r.t,{...x}),children:d.label}),m&&w()]}),!m&&w(`top-md right-md absolute`)]})},e.id)}function x(){let e=l.Toast.useToastManager(),t=o.useRef(e);return t.current=e,o.useMemo(()=>({get toasts(){return t.current.toasts},add:e=>t.current.add(e),update:(e,n)=>t.current.update(e,n),close:e=>t.current.close(e),promise:(e,n)=>t.current.promise(e,n),closeAll:()=>t.current.toasts.forEach(({id:e})=>t.current.close(e))}),[])}function S(){let{toasts:e}=x();return e.map(e=>(0,s.jsx)(b,{toast:e},e.id))}function C({children:e,limit:t=3,...n}){return(0,s.jsxs)(l.Toast.Provider,{limit:t,...n,children:[(0,s.jsx)(l.Toast.Portal,{children:(0,s.jsx)(l.Toast.Viewport,{className:(0,a.cx)(`z-toast right-lg bottom-lg text-on-surfa- fixed top-auto mx-auto flex w-fit flex-col items-end`),children:(0,s.jsx)(S,{})})}),e]})}function w({children:e,onClick:n,asChild:r=!1,title:i,description:a,timeout:o=5e3,design:c=`filled`,intent:l=`neutral`,isClosable:u=!0,icon:d,action:f,compact:p,priority:m=`low`}){let h=x(),g=r?t.Slot:`button`;function _(e){n?.(e),h.add({title:i,description:a,timeout:o,priority:m,data:{design:c,intent:l,isClosable:u,...d&&{icon:d},action:f,...p!==void 0&&{compact:p}}})}return(0,s.jsx)(g,{...!r&&{type:`button`},onClick:_,children:e})}var T=l.Toast.createToastManager;exports.ToastProvider=C,exports.ToastTrigger=w,exports.createToastManager=T,exports.useToastManager=x;
 //# sourceMappingURL=index.js.map

package/dist/toast/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/toast/Toast.styles.ts","../../src/toast/Toast.tsx","../../src/toast/useToastManager.ts","../../src/toast/index.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const toastStyles = cva(\n  [\n    'gap-lg p-md flex w-max !w-[min(400px,calc(100vw-2rem))] flex-col rounded-lg border-md',\n    'absolute right-0 bottom-0 left-auto mr-0',\n    'bg-clip-padding shadow-md select-none',\n    'focus-visible:ring-focus focus-visible:ring-2 focus-visible:outline-none',\n    'z-[calc(1000-var(--toast-index))]',\n    \"after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']\",\n    // Stack effect while not focused\n    '[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+calc(min(var(--toast-index),10)*-16px)))_scale(calc(max(0,1-(var(--toast-index)*0.1))))]',\n    // Scale and translate\n    'ease-standard [transition-property:opacity,transform]',\n    'duration-400',\n    // Present when the toast is animating in.\n    'data-[starting-style]:[transform:translateY(150%)]',\n    // Expanded: Present when the toast is expanded in the viewport.\n    'data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y)))]',\n    // Present when the toast is animating out.\n    'data-[ending-style]:duration-250',\n    'data-[ending-style]:opacity-0',\n    'data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]',\n    'data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',\n    'data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',\n    // Limited: Present when the toast was removed due to exceeding the limit.\n    'data-[limited]:opacity-0',\n  ],\n  {\n    variants: {\n      design: {\n        filled: '',\n        tinted: '',\n      },\n      intent: {\n        success: '',\n        alert: '',\n        error: '',\n        info: '',\n        neutral: '',\n        main: '',\n        support: '',\n        accent: '',\n        surface: '',\n        surfaceInverse: '',\n      },\n    },\n    compoundVariants: [\n      // Filled variants\n      {\n        design: 'filled',\n        intent: 'success',\n        class: ['bg-success text-on-success border-success'],\n      },\n      {\n        design: 'filled',\n        intent: 'alert',\n        class: ['bg-alert text-on-alert border-alert'],\n      },\n      {\n        design: 'filled',\n        intent: 'error',\n        class: ['bg-error text-on-error border-error'],\n      },\n      {\n        design: 'filled',\n        intent: 'info',\n        class: ['bg-info text-on-info border-info'],\n      },\n      {\n        design: 'filled',\n        intent: 'neutral',\n        class: ['bg-neutral text-on-neutral border-neutral'],\n      },\n      {\n        design: 'filled',\n        intent: 'main',\n        class: ['bg-main text-on-main border-main'],\n      },\n      {\n        design: 'filled',\n        intent: 'support',\n        class: ['bg-support text-on-support border-support'],\n      },\n      {\n        design: 'filled',\n        intent: 'accent',\n        class: ['bg-accent text-on-accent border-accent'],\n      },\n      {\n        design: 'filled',\n        intent: 'surface',\n        class: ['bg-surface text-on-surface border-surface'],\n      },\n      {\n        design: 'filled',\n        intent: 'surfaceInverse',\n        class: ['bg-surface-inverse text-on-surface-inverse border-surface-inverse'],\n      },\n\n      // Tinted variants\n      {\n        design: 'tinted',\n        intent: 'success',\n        class: ['bg-success-container text-on-success-container border-success'],\n      },\n      {\n        design: 'tinted',\n        intent: 'alert',\n        class: ['bg-alert-container text-on-alert-container border-alert'],\n      },\n      {\n        design: 'tinted',\n        intent: 'error',\n        class: ['bg-error-container text-on-error-container border-error'],\n      },\n      {\n        design: 'tinted',\n        intent: 'info',\n        class: ['bg-info-container text-on-info-container border-info'],\n      },\n      {\n        design: 'tinted',\n        intent: 'neutral',\n        class: ['bg-neutral-container text-on-neutral-container border-neutral'],\n      },\n      {\n        design: 'tinted',\n        intent: 'main',\n        class: ['bg-main-container text-on-main-container border-main'],\n      },\n      {\n        design: 'tinted',\n        intent: 'support',\n        class: ['bg-support-container text-on-support-container border-support'],\n      },\n      {\n        design: 'tinted',\n        intent: 'accent',\n        class: ['bg-accent-container text-on-accent-container border-accent'],\n      },\n      {\n        design: 'tinted',\n        intent: 'surface',\n        class: ['bg-surface text-on-surface border-surface'],\n      },\n      {\n        design: 'tinted',\n        intent: 'surfaceInverse',\n        class: ['bg-surface-inverse text-on-surface-inverse border-surface-inverse'],\n      },\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type ToastVariantProps = VariantProps<typeof toastStyles>\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport { Button, ButtonProps } from '@spark-ui/components/button'\nimport { Icon } from '@spark-ui/components/icon'\nimport { IconButton } from '@spark-ui/components/icon-button'\nimport { AlertFill } from '@spark-ui/icons/AlertFill'\nimport { Close } from '@spark-ui/icons/Close'\nimport { InfoFill } from '@spark-ui/icons/InfoFill'\nimport { ValidFill } from '@spark-ui/icons/ValidFill'\nimport { WarningFill } from '@spark-ui/icons/WarningFill'\nimport { cx } from 'class-variance-authority'\n\nimport { toastStyles } from './Toast.styles'\nimport type { ToastData, ToastDesign, ToastIntent, ToastObject } from './types'\n\nfunction getButtonIntent(intent?: ToastIntent): ButtonProps['intent'] {\n  if (intent === 'surfaceInverse') return 'surface'\n  if (intent === 'surface') return 'surfaceInverse'\n  if (intent === 'error') return 'danger'\n\n  return intent as ButtonProps['intent']\n}\n\nfunction getCloseButtonIntent(intent?: ToastIntent): ButtonProps['intent'] {\n  if (intent === 'surfaceInverse') return 'surfaceInverse'\n  if (intent === 'surface') return 'surface'\n  if (intent === 'error') return 'danger'\n\n  return intent as ButtonProps['intent']\n}\n\nconst getActionProps = (\n  action: ToastData['action'],\n  { toastDesign, toastIntent }: { toastDesign?: ToastDesign; toastIntent?: ToastIntent }\n): ButtonProps => {\n  if (!action) return {}\n\n  const { design, intent, className, onClick, ...rest } = action\n\n  return {\n    design: design ?? toastDesign,\n    intent: intent ?? getButtonIntent(toastIntent),\n    className: cx('ml-auto', className),\n    onClick,\n    ...rest,\n  }\n}\n\nconst getToastRootProps = (toast: ToastObject, design: ToastDesign, intent: ToastIntent) => ({\n  swipeDirection: ['down', 'right'] as ['down', 'right'],\n  toast,\n  className: cx(toastStyles({ design, intent })),\n  style: {\n    ['--gap' as string]: 'var(--spacing-md)',\n    ['--offset-y' as string]:\n      'calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y))',\n  },\n})\n\nfunction getDefaultIcon(intent: ToastIntent): React.ReactNode {\n  switch (intent) {\n    case 'info':\n      return <InfoFill />\n    case 'success':\n      return <ValidFill />\n    case 'alert':\n      return <WarningFill />\n    case 'error':\n      return <AlertFill />\n    case 'main':\n    case 'support':\n    case 'accent':\n    case 'neutral':\n    case 'surface':\n    case 'surfaceInverse':\n    default:\n      return <InfoFill />\n  }\n}\n\nexport function Toast({ toast }: { toast: ToastObject }) {\n  const {\n    icon: ToastIcon,\n    intent = 'info',\n    design: _design, // deprecated prop, ignored\n    action,\n    isClosable,\n    closeLabel = 'Close',\n    compact = false,\n  } = toast.data ?? {}\n\n  // Always use 'tinted' design regardless of prop value\n  const design = 'tinted' as const\n\n  const ActionButton = action?.close ? BaseToast.Close : BaseToast.Action\n  const actionProps = getActionProps(action, { toastDesign: design, toastIntent: intent })\n  const rootProps = getToastRootProps(toast, design, intent)\n\n  // Use provided icon or default icon based on intent\n  const icon = ToastIcon ?? getDefaultIcon(intent)\n\n  const getCloseButton = (className?: string) => {\n    if (!isClosable) return null\n\n    return (\n      <BaseToast.Close\n        className={className}\n        render={\n          <IconButton\n            aria-label={closeLabel}\n            design={design}\n            intent={getCloseButtonIntent(intent)}\n            size=\"md\"\n          />\n        }\n      >\n        <Icon>\n          <Close />\n        </Icon>\n      </BaseToast.Close>\n    )\n  }\n\n  const renderTitle = () => {\n    // Check ToastData first for JSX, then fallback to toast.title (string)\n    const title = toast.data?.title ?? toast.title\n    const hasDescription = !!(toast.data?.description ?? toast.description)\n\n    if (typeof title !== 'string' && title !== undefined) {\n      return (\n        <BaseToast.Title\n          className={hasDescription ? 'text-headline-2' : 'text-body-1'}\n          render={<div />}\n        >\n          {title}\n        </BaseToast.Title>\n      )\n    }\n\n    return <BaseToast.Title className={hasDescription ? 'text-headline-2' : 'text-body-1'} />\n  }\n\n  const renderDescription = () => {\n    // Check ToastData first for JSX, then fallback to toast.description (string)\n    const description = toast.data?.description ?? toast.description\n\n    if (!description) return null\n\n    if (typeof description !== 'string') {\n      return (\n        <BaseToast.Description className=\"text-body-1\" render={<div />}>\n          {description}\n        </BaseToast.Description>\n      )\n    }\n\n    return <BaseToast.Description className=\"text-body-1\" />\n  }\n\n  return (\n    <BaseToast.Root key={toast.id} {...rootProps}>\n      <div className={cx('flex', compact ? 'gap-lg items-center' : 'gap-md flex-col')}>\n        <div className=\"gap-lg p-md flex grow items-center\">\n          {/* Icon */}\n          <Icon size=\"md\">{icon}</Icon>\n          {/* Title and description */}\n          <div\n            className={cx(\n              'gap-sm flex flex-col',\n              compact && 'flex-1',\n              !compact && isClosable && 'pr-3xl'\n            )}\n          >\n            {renderTitle()}\n            {renderDescription()}\n          </div>\n        </div>\n\n        <div className={cx('flex')}>\n          {/* Action button */}\n          {action && (\n            <ActionButton render={<Button {...actionProps} />}>{action.label}</ActionButton>\n          )}\n          {/* Close button - compact layout only */}\n          {compact && getCloseButton()}\n        </div>\n\n        {/* Close button - default layout only */}\n        {!compact && getCloseButton('top-md right-md absolute')}\n      </div>\n    </BaseToast.Root>\n  )\n}\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport * as React from 'react'\n\nimport type { UseToastManagerReturnValue } from './types'\n\nexport function useToastManager(): UseToastManagerReturnValue {\n  const manager = BaseToast.useToastManager()\n  const managerRef = React.useRef(manager)\n  managerRef.current = manager\n\n  return React.useMemo(\n    () => ({\n      get toasts() {\n        return managerRef.current.toasts\n      },\n      add: options => managerRef.current.add(options),\n      update: (id, options) => managerRef.current.update(id, options),\n      close: id => managerRef.current.close(id),\n      promise: (p, options) => managerRef.current.promise(p, options),\n      closeAll: () => managerRef.current.toasts.forEach(({ id }) => managerRef.current.close(id)),\n    }),\n    []\n  )\n}\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport { Slot } from '@spark-ui/components/slot'\nimport { cx } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { Toast } from './Toast'\nimport type { ToastData, ToastObject } from './types'\nimport { useToastManager } from './useToastManager'\n\nexport * from './types'\n\nfunction ToastList() {\n  const { toasts } = useToastManager()\n\n  return toasts.map(toast => <Toast key={toast.id} toast={toast} />)\n}\n\ninterface ToastProviderProps extends React.ComponentProps<typeof BaseToast.Provider> {\n  children: React.ReactNode\n}\n\n/**\n * A provider component that manages and displays temporary notification messages to users.\n */\nexport function ToastProvider({ children, limit = 3, ...props }: ToastProviderProps) {\n  return (\n    <BaseToast.Provider limit={limit} {...props}>\n      <BaseToast.Portal>\n        <BaseToast.Viewport\n          className={cx(\n            'z-toast right-lg bottom-lg text-on-surfa- fixed top-auto mx-auto flex w-fit flex-col items-end'\n          )}\n        >\n          <ToastList />\n        </BaseToast.Viewport>\n      </BaseToast.Portal>\n      {children}\n    </BaseToast.Provider>\n  )\n}\n\ninterface ToastTriggerProps\n  extends\n    Omit<React.ComponentPropsWithRef<'button'>, 'title'>,\n    Pick<ToastObject, 'priority'>,\n    Pick<ToastData, 'design' | 'intent' | 'icon' | 'isClosable' | 'action' | 'compact'> {\n  children: React.ReactNode\n  asChild?: boolean\n  title: string | React.ReactNode\n  description?: string | React.ReactNode\n  timeout?: number\n}\n\nexport function ToastTrigger({\n  children,\n  onClick,\n  asChild = false,\n  title,\n  description,\n  timeout = 5000,\n  design = 'filled',\n  intent = 'neutral',\n  isClosable = true,\n  icon,\n  action,\n  compact,\n  priority = 'low',\n}: ToastTriggerProps) {\n  const toastManager = useToastManager()\n\n  const Component = asChild ? Slot : 'button'\n\n  function createToast(e: React.MouseEvent<HTMLButtonElement>) {\n    onClick?.(e)\n    toastManager.add({\n      title,\n      description,\n      timeout,\n      priority,\n      data: {\n        design,\n        intent,\n        isClosable,\n        ...(icon && { icon }),\n        action,\n        ...(compact !== undefined && { compact }),\n      },\n    })\n  }\n\n  return (\n    <Component {...(!asChild && { type: 'button' })} onClick={createToast}>\n      {children}\n    </Component>\n  )\n}\n\nexport type ToastManager = ReturnType<typeof BaseToast.createToastManager>\n\nexport const createToastManager: () => ToastManager = BaseToast.createToastManager\n\nexport { useToastManager }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/toast/Toast.styles.ts","../../src/toast/Toast.tsx","../../src/toast/useToastManager.ts","../../src/toast/index.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const toastStyles = cva(\n  [\n    'gap-lg p-md flex w-max w-[min(400px,calc(100vw-var(--spacing-sz-32)))]! flex-col rounded-lg border-md',\n    'absolute right-0 bottom-0 left-auto mr-0',\n    'bg-clip-padding shadow-md select-none',\n    'focus-visible:ring-focus focus-visible:ring-2 focus-visible:outline-none',\n    'z-[calc(1000-var(--toast-index))]',\n    \"after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']\",\n    // Stack effect while not focused\n    '[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+calc(min(var(--toast-index),10)*-16px)))_scale(calc(max(0,1-(var(--toast-index)*0.1))))]',\n    // Scale and translate\n    'ease-standard [transition-property:opacity,transform]',\n    'duration-400',\n    // Present when the toast is animating in.\n    'data-[starting-style]:[transform:translateY(150%)]',\n    // Expanded: Present when the toast is expanded in the viewport.\n    'data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y)))]',\n    // Present when the toast is animating out.\n    'data-[ending-style]:duration-250',\n    'data-[ending-style]:opacity-0',\n    'data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]',\n    'data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',\n    'data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',\n    // Limited: Present when the toast was removed due to exceeding the limit.\n    'data-[limited]:opacity-0',\n  ],\n  {\n    variants: {\n      design: {\n        filled: '',\n        tinted: '',\n      },\n      intent: {\n        success: '',\n        alert: '',\n        error: '',\n        info: '',\n        neutral: '',\n        main: '',\n        support: '',\n        accent: '',\n        surface: '',\n        surfaceInverse: '',\n      },\n    },\n    compoundVariants: [\n      // Filled variants\n      {\n        design: 'filled',\n        intent: 'success',\n        class: ['bg-success text-on-success border-success'],\n      },\n      {\n        design: 'filled',\n        intent: 'alert',\n        class: ['bg-alert text-on-alert border-alert'],\n      },\n      {\n        design: 'filled',\n        intent: 'error',\n        class: ['bg-error text-on-error border-error'],\n      },\n      {\n        design: 'filled',\n        intent: 'info',\n        class: ['bg-info text-on-info border-info'],\n      },\n      {\n        design: 'filled',\n        intent: 'neutral',\n        class: ['bg-neutral text-on-neutral border-neutral'],\n      },\n      {\n        design: 'filled',\n        intent: 'main',\n        class: ['bg-main text-on-main border-main'],\n      },\n      {\n        design: 'filled',\n        intent: 'support',\n        class: ['bg-support text-on-support border-support'],\n      },\n      {\n        design: 'filled',\n        intent: 'accent',\n        class: ['bg-accent text-on-accent border-accent'],\n      },\n      {\n        design: 'filled',\n        intent: 'surface',\n        class: ['bg-surface text-on-surface border-surface'],\n      },\n      {\n        design: 'filled',\n        intent: 'surfaceInverse',\n        class: ['bg-surface-inverse text-on-surface-inverse border-surface-inverse'],\n      },\n\n      // Tinted variants\n      {\n        design: 'tinted',\n        intent: 'success',\n        class: ['bg-success-container text-on-success-container border-success'],\n      },\n      {\n        design: 'tinted',\n        intent: 'alert',\n        class: ['bg-alert-container text-on-alert-container border-alert'],\n      },\n      {\n        design: 'tinted',\n        intent: 'error',\n        class: ['bg-error-container text-on-error-container border-error'],\n      },\n      {\n        design: 'tinted',\n        intent: 'info',\n        class: ['bg-info-container text-on-info-container border-info'],\n      },\n      {\n        design: 'tinted',\n        intent: 'neutral',\n        class: ['bg-neutral-container text-on-neutral-container border-neutral'],\n      },\n      {\n        design: 'tinted',\n        intent: 'main',\n        class: ['bg-main-container text-on-main-container border-main'],\n      },\n      {\n        design: 'tinted',\n        intent: 'support',\n        class: ['bg-support-container text-on-support-container border-support'],\n      },\n      {\n        design: 'tinted',\n        intent: 'accent',\n        class: ['bg-accent-container text-on-accent-container border-accent'],\n      },\n      {\n        design: 'tinted',\n        intent: 'surface',\n        class: ['bg-surface text-on-surface border-surface'],\n      },\n      {\n        design: 'tinted',\n        intent: 'surfaceInverse',\n        class: ['bg-surface-inverse text-on-surface-inverse border-surface-inverse'],\n      },\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type ToastVariantProps = VariantProps<typeof toastStyles>\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport { Button, ButtonProps } from '@spark-ui/components/button'\nimport { Icon } from '@spark-ui/components/icon'\nimport { IconButton } from '@spark-ui/components/icon-button'\nimport { AlertFill } from '@spark-ui/icons/AlertFill'\nimport { Close } from '@spark-ui/icons/Close'\nimport { InfoFill } from '@spark-ui/icons/InfoFill'\nimport { ValidFill } from '@spark-ui/icons/ValidFill'\nimport { WarningFill } from '@spark-ui/icons/WarningFill'\nimport { cx } from 'class-variance-authority'\n\nimport { toastStyles } from './Toast.styles'\nimport type { ToastData, ToastDesign, ToastIntent, ToastObject } from './types'\n\nfunction getButtonIntent(intent?: ToastIntent): ButtonProps['intent'] {\n  if (intent === 'surfaceInverse') return 'surface'\n  if (intent === 'surface') return 'surfaceInverse'\n  if (intent === 'error') return 'danger'\n\n  return intent as ButtonProps['intent']\n}\n\nfunction getCloseButtonIntent(intent?: ToastIntent): ButtonProps['intent'] {\n  if (intent === 'surfaceInverse') return 'surfaceInverse'\n  if (intent === 'surface') return 'surface'\n  if (intent === 'error') return 'danger'\n\n  return intent as ButtonProps['intent']\n}\n\nconst getActionProps = (\n  action: ToastData['action'],\n  { toastDesign, toastIntent }: { toastDesign?: ToastDesign; toastIntent?: ToastIntent }\n): ButtonProps => {\n  if (!action) return {}\n\n  const { design, intent, className, onClick, ...rest } = action\n\n  return {\n    design: design ?? toastDesign,\n    intent: intent ?? getButtonIntent(toastIntent),\n    className: cx('ml-auto', className),\n    onClick,\n    ...rest,\n  }\n}\n\nconst getToastRootProps = (toast: ToastObject, design: ToastDesign, intent: ToastIntent) => ({\n  swipeDirection: ['down', 'right'] as ['down', 'right'],\n  toast,\n  className: cx(toastStyles({ design, intent })),\n  style: {\n    ['--gap' as string]: 'var(--spacing-md)',\n    ['--offset-y' as string]:\n      'calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y))',\n  },\n})\n\nfunction getDefaultIcon(intent: ToastIntent): React.ReactNode {\n  switch (intent) {\n    case 'info':\n      return <InfoFill />\n    case 'success':\n      return <ValidFill />\n    case 'alert':\n      return <WarningFill />\n    case 'error':\n      return <AlertFill />\n    case 'main':\n    case 'support':\n    case 'accent':\n    case 'neutral':\n    case 'surface':\n    case 'surfaceInverse':\n    default:\n      return <InfoFill />\n  }\n}\n\nexport function Toast({ toast }: { toast: ToastObject }) {\n  const {\n    icon: ToastIcon,\n    intent = 'info',\n    design: _design, // deprecated prop, ignored\n    action,\n    isClosable,\n    closeLabel = 'Close',\n    compact = false,\n  } = toast.data ?? {}\n\n  // Always use 'tinted' design regardless of prop value\n  const design = 'tinted' as const\n\n  const ActionButton = action?.close ? BaseToast.Close : BaseToast.Action\n  const actionProps = getActionProps(action, { toastDesign: design, toastIntent: intent })\n  const rootProps = getToastRootProps(toast, design, intent)\n\n  // Use provided icon or default icon based on intent\n  const icon = ToastIcon ?? getDefaultIcon(intent)\n\n  const getCloseButton = (className?: string) => {\n    if (!isClosable) return null\n\n    return (\n      <BaseToast.Close\n        className={className}\n        render={\n          <IconButton\n            aria-label={closeLabel}\n            design={design}\n            intent={getCloseButtonIntent(intent)}\n            size=\"md\"\n          />\n        }\n      >\n        <Icon>\n          <Close />\n        </Icon>\n      </BaseToast.Close>\n    )\n  }\n\n  const renderTitle = () => {\n    // Check ToastData first for JSX, then fallback to toast.title (string)\n    const title = toast.data?.title ?? toast.title\n    const hasDescription = !!(toast.data?.description ?? toast.description)\n\n    if (typeof title !== 'string' && title !== undefined) {\n      return (\n        <BaseToast.Title\n          className={hasDescription ? 'text-headline-2' : 'text-body-1'}\n          render={<div />}\n        >\n          {title}\n        </BaseToast.Title>\n      )\n    }\n\n    return <BaseToast.Title className={hasDescription ? 'text-headline-2' : 'text-body-1'} />\n  }\n\n  const renderDescription = () => {\n    // Check ToastData first for JSX, then fallback to toast.description (string)\n    const description = toast.data?.description ?? toast.description\n\n    if (!description) return null\n\n    if (typeof description !== 'string') {\n      return (\n        <BaseToast.Description className=\"text-body-1\" render={<div />}>\n          {description}\n        </BaseToast.Description>\n      )\n    }\n\n    return <BaseToast.Description className=\"text-body-1\" />\n  }\n\n  return (\n    <BaseToast.Root key={toast.id} {...rootProps}>\n      <div className={cx('flex', compact ? 'gap-lg items-center' : 'gap-md flex-col')}>\n        <div className=\"gap-lg p-md flex grow items-center\">\n          {/* Icon */}\n          <Icon size=\"md\">{icon}</Icon>\n          {/* Title and description */}\n          <div\n            className={cx(\n              'gap-sm flex flex-col',\n              compact && 'flex-1',\n              !compact && isClosable && 'pr-3xl'\n            )}\n          >\n            {renderTitle()}\n            {renderDescription()}\n          </div>\n        </div>\n\n        <div className={cx('flex')}>\n          {/* Action button */}\n          {action && (\n            <ActionButton render={<Button {...actionProps} />}>{action.label}</ActionButton>\n          )}\n          {/* Close button - compact layout only */}\n          {compact && getCloseButton()}\n        </div>\n\n        {/* Close button - default layout only */}\n        {!compact && getCloseButton('top-md right-md absolute')}\n      </div>\n    </BaseToast.Root>\n  )\n}\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport * as React from 'react'\n\nimport type { UseToastManagerReturnValue } from './types'\n\nexport function useToastManager(): UseToastManagerReturnValue {\n  const manager = BaseToast.useToastManager()\n  const managerRef = React.useRef(manager)\n  managerRef.current = manager\n\n  return React.useMemo(\n    () => ({\n      get toasts() {\n        return managerRef.current.toasts\n      },\n      add: options => managerRef.current.add(options),\n      update: (id, options) => managerRef.current.update(id, options),\n      close: id => managerRef.current.close(id),\n      promise: (p, options) => managerRef.current.promise(p, options),\n      closeAll: () => managerRef.current.toasts.forEach(({ id }) => managerRef.current.close(id)),\n    }),\n    []\n  )\n}\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport { Slot } from '@spark-ui/components/slot'\nimport { cx } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { Toast } from './Toast'\nimport type { ToastData, ToastObject } from './types'\nimport { useToastManager } from './useToastManager'\n\nexport * from './types'\n\nfunction ToastList() {\n  const { toasts } = useToastManager()\n\n  return toasts.map(toast => <Toast key={toast.id} toast={toast} />)\n}\n\ninterface ToastProviderProps extends React.ComponentProps<typeof BaseToast.Provider> {\n  children: React.ReactNode\n}\n\n/**\n * A provider component that manages and displays temporary notification messages to users.\n */\nexport function ToastProvider({ children, limit = 3, ...props }: ToastProviderProps) {\n  return (\n    <BaseToast.Provider limit={limit} {...props}>\n      <BaseToast.Portal>\n        <BaseToast.Viewport\n          className={cx(\n            'z-toast right-lg bottom-lg text-on-surfa- fixed top-auto mx-auto flex w-fit flex-col items-end'\n          )}\n        >\n          <ToastList />\n        </BaseToast.Viewport>\n      </BaseToast.Portal>\n      {children}\n    </BaseToast.Provider>\n  )\n}\n\ninterface ToastTriggerProps\n  extends\n    Omit<React.ComponentPropsWithRef<'button'>, 'title'>,\n    Pick<ToastObject, 'priority'>,\n    Pick<ToastData, 'design' | 'intent' | 'icon' | 'isClosable' | 'action' | 'compact'> {\n  children: React.ReactNode\n  asChild?: boolean\n  title: string | React.ReactNode\n  description?: string | React.ReactNode\n  timeout?: number\n}\n\nexport function ToastTrigger({\n  children,\n  onClick,\n  asChild = false,\n  title,\n  description,\n  timeout = 5000,\n  design = 'filled',\n  intent = 'neutral',\n  isClosable = true,\n  icon,\n  action,\n  compact,\n  priority = 'low',\n}: ToastTriggerProps) {\n  const toastManager = useToastManager()\n\n  const Component = asChild ? Slot : 'button'\n\n  function createToast(e: React.MouseEvent<HTMLButtonElement>) {\n    onClick?.(e)\n    toastManager.add({\n      title,\n      description,\n      timeout,\n      priority,\n      data: {\n        design,\n        intent,\n        isClosable,\n        ...(icon && { icon }),\n        action,\n        ...(compact !== undefined && { compact }),\n      },\n    })\n  }\n\n  return (\n    <Component {...(!asChild && { type: 'button' })} onClick={createToast}>\n      {children}\n    </Component>\n  )\n}\n\nexport type ToastManager = ReturnType<typeof BaseToast.createToastManager>\n\nexport const createToastManager: () => ToastManager = BaseToast.createToastManager\n\nexport { useToastManager }\n"],"mappings":"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"}

package/dist/toast/index.mjs

@@ -1,7 +1,7 @@
 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 } from "../icon-VM_Ys9Xn.mjs";
+import { t as n } from "../button-DBNjh3Bi.mjs";
+import { t as r } from "../icon-button-CexCkoV0.mjs";
 import { cva as i, cx as a } from "class-variance-authority";
 import * as o from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
@@ -13,7 +13,7 @@ import { ValidFill as p } from "@spark-ui/icons/ValidFill";
 import { WarningFill as m } from "@spark-ui/icons/WarningFill";
 //#region src/toast/Toast.styles.ts
 var h = i([
-	"gap-lg p-md flex w-max !w-[min(400px,calc(100vw-2rem))] flex-col rounded-lg border-md",
+	"gap-lg p-md flex w-max w-[min(400px,calc(100vw-var(--spacing-sz-32)))]! flex-col rounded-lg border-md",
 	"absolute right-0 bottom-0 left-auto mr-0",
 	"bg-clip-padding shadow-md select-none",
 	"focus-visible:ring-focus focus-visible:ring-2 focus-visible:outline-none",