@spark-ui/components 16.2.2 → 17.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (182) hide show
  1. package/dist/{Button-DPncfbbM.mjs → Button-1M9DcZl0.mjs} +25 -79
  2. package/dist/Button-1M9DcZl0.mjs.map +1 -0
  3. package/dist/Button-FZceRWG2.js +2 -0
  4. package/dist/Button-FZceRWG2.js.map +1 -0
  5. package/dist/{Icon-C23-htlD.mjs → Icon-BO327oHU.mjs} +8 -9
  6. package/dist/Icon-BO327oHU.mjs.map +1 -0
  7. package/dist/Icon-C-cNTnzd.js +2 -0
  8. package/dist/Icon-C-cNTnzd.js.map +1 -0
  9. package/dist/{IconButton-D3g86WpZ.js → IconButton-BR1bJSQA.js} +2 -2
  10. package/dist/{IconButton-D3g86WpZ.js.map → IconButton-BR1bJSQA.js.map} +1 -1
  11. package/dist/{IconButton-Bfd-6BAD.mjs → IconButton-DdB3Pq13.mjs} +2 -2
  12. package/dist/{IconButton-Bfd-6BAD.mjs.map → IconButton-DdB3Pq13.mjs.map} +1 -1
  13. package/dist/Spinner-Br4Rp9V2.js +2 -0
  14. package/dist/Spinner-Br4Rp9V2.js.map +1 -0
  15. package/dist/{Spinner-aLrtE2JN.mjs → Spinner-Co3AjkQV.mjs} +7 -8
  16. package/dist/Spinner-Co3AjkQV.mjs.map +1 -0
  17. package/dist/TextLink-5MvP0P8D.js +2 -0
  18. package/dist/TextLink-5MvP0P8D.js.map +1 -0
  19. package/dist/{TextLink-D7mOCjY_.mjs → TextLink-Cc_LeVcx.mjs} +10 -11
  20. package/dist/TextLink-Cc_LeVcx.mjs.map +1 -0
  21. package/dist/accordion/index.js +1 -1
  22. package/dist/accordion/index.mjs +1 -1
  23. package/dist/avatar/index.js +1 -1
  24. package/dist/avatar/index.mjs +2 -2
  25. package/dist/badge/BadgeItem.styles.d.ts +1 -1
  26. package/dist/badge/index.js +1 -1
  27. package/dist/badge/index.js.map +1 -1
  28. package/dist/badge/index.mjs +10 -11
  29. package/dist/badge/index.mjs.map +1 -1
  30. package/dist/breadcrumb/index.js +1 -1
  31. package/dist/breadcrumb/index.mjs +2 -2
  32. package/dist/button/Button.styles.d.ts +1 -1
  33. package/dist/button/index.js +1 -1
  34. package/dist/button/index.mjs +1 -1
  35. package/dist/button/variants/contrast.d.ts +0 -4
  36. package/dist/button/variants/filled.d.ts +0 -4
  37. package/dist/button/variants/ghost.d.ts +0 -4
  38. package/dist/button/variants/outlined.d.ts +0 -4
  39. package/dist/button/variants/tinted.d.ts +0 -4
  40. package/dist/card/Backdrop.d.ts +1 -1
  41. package/dist/card/Card.styles.d.ts +1 -1
  42. package/dist/card/Content.styles.d.ts +1 -1
  43. package/dist/card/index.js +1 -1
  44. package/dist/card/index.js.map +1 -1
  45. package/dist/card/index.mjs +12 -31
  46. package/dist/card/index.mjs.map +1 -1
  47. package/dist/carousel/CarouselPageIndicator.d.ts +1 -1
  48. package/dist/carousel/index.js +1 -1
  49. package/dist/carousel/index.js.map +1 -1
  50. package/dist/carousel/index.mjs +29 -29
  51. package/dist/carousel/index.mjs.map +1 -1
  52. package/dist/checkbox/CheckboxInput.styles.d.ts +1 -1
  53. package/dist/checkbox/index.js +1 -1
  54. package/dist/checkbox/index.js.map +1 -1
  55. package/dist/checkbox/index.mjs +26 -33
  56. package/dist/checkbox/index.mjs.map +1 -1
  57. package/dist/chip/Chip.styles.d.ts +1 -1
  58. package/dist/chip/index.js +1 -1
  59. package/dist/chip/index.js.map +1 -1
  60. package/dist/chip/index.mjs +33 -68
  61. package/dist/chip/index.mjs.map +1 -1
  62. package/dist/chip/variants/dashed.d.ts +0 -4
  63. package/dist/chip/variants/outlined.d.ts +0 -4
  64. package/dist/chip/variants/tinted.d.ts +0 -4
  65. package/dist/combobox/index.js +1 -1
  66. package/dist/combobox/index.mjs +3 -3
  67. package/dist/dialog/index.js +1 -1
  68. package/dist/dialog/index.mjs +2 -2
  69. package/dist/drawer/index.js +1 -1
  70. package/dist/drawer/index.mjs +2 -2
  71. package/dist/dropdown/index.js +1 -1
  72. package/dist/dropdown/index.mjs +1 -1
  73. package/dist/file-upload/index.js +1 -1
  74. package/dist/file-upload/index.js.map +1 -1
  75. package/dist/file-upload/index.mjs +4 -4
  76. package/dist/file-upload/index.mjs.map +1 -1
  77. package/dist/form-field/index.js +1 -1
  78. package/dist/form-field/index.mjs +1 -1
  79. package/dist/icon/Icon.styles.d.ts +1 -1
  80. package/dist/icon/index.js +1 -1
  81. package/dist/icon/index.mjs +1 -1
  82. package/dist/icon-button/index.js +1 -1
  83. package/dist/icon-button/index.mjs +1 -1
  84. package/dist/input/index.js +1 -1
  85. package/dist/input/index.mjs +1 -1
  86. package/dist/pagination/index.js +1 -1
  87. package/dist/pagination/index.mjs +3 -3
  88. package/dist/popover/PopoverContent.styles.d.ts +1 -1
  89. package/dist/popover/PopoverContext.d.ts +1 -1
  90. package/dist/popover/index.js +1 -1
  91. package/dist/popover/index.js.map +1 -1
  92. package/dist/popover/index.mjs +33 -35
  93. package/dist/popover/index.mjs.map +1 -1
  94. package/dist/progress/ProgressIndicator.d.ts +1 -1
  95. package/dist/progress/index.js +1 -1
  96. package/dist/progress/index.js.map +1 -1
  97. package/dist/progress/index.mjs +42 -43
  98. package/dist/progress/index.mjs.map +1 -1
  99. package/dist/progress-tracker/ProgressTrackerStep.styles.d.ts +1 -1
  100. package/dist/progress-tracker/ProgressTrackerStepIndicator.styles.d.ts +1 -1
  101. package/dist/progress-tracker/index.js +1 -1
  102. package/dist/progress-tracker/index.js.map +1 -1
  103. package/dist/progress-tracker/index.mjs +38 -38
  104. package/dist/progress-tracker/index.mjs.map +1 -1
  105. package/dist/radio-group/RadioIndicator.styles.d.ts +1 -1
  106. package/dist/radio-group/RadioInput.styles.d.ts +1 -1
  107. package/dist/radio-group/index.js +1 -1
  108. package/dist/radio-group/index.js.map +1 -1
  109. package/dist/radio-group/index.mjs +47 -53
  110. package/dist/radio-group/index.mjs.map +1 -1
  111. package/dist/rating/index.js +1 -1
  112. package/dist/rating/index.mjs +1 -1
  113. package/dist/rating-display/index.js +1 -1
  114. package/dist/rating-display/index.mjs +1 -1
  115. package/dist/scrolling-list/index.js +1 -1
  116. package/dist/scrolling-list/index.mjs +3 -3
  117. package/dist/segmented-gauge/SegmentedGauge.d.ts +1 -1
  118. package/dist/segmented-gauge/SegmentedGaugeContext.d.ts +1 -1
  119. package/dist/segmented-gauge/index.js +1 -1
  120. package/dist/segmented-gauge/index.js.map +1 -1
  121. package/dist/segmented-gauge/index.mjs +14 -16
  122. package/dist/segmented-gauge/index.mjs.map +1 -1
  123. package/dist/select/index.js +1 -1
  124. package/dist/select/index.mjs +1 -1
  125. package/dist/slider/SliderThumb.styles.d.ts +1 -1
  126. package/dist/slider/SliderTrack.styles.d.ts +1 -1
  127. package/dist/slider/index.js +1 -1
  128. package/dist/slider/index.js.map +1 -1
  129. package/dist/slider/index.mjs +3 -5
  130. package/dist/slider/index.mjs.map +1 -1
  131. package/dist/snackbar/SnackbarItem.styles.d.ts +1 -1
  132. package/dist/snackbar/index.js +1 -1
  133. package/dist/snackbar/index.js.map +1 -1
  134. package/dist/snackbar/index.mjs +24 -35
  135. package/dist/snackbar/index.mjs.map +1 -1
  136. package/dist/snackbar/snackbarVariants.d.ts +0 -8
  137. package/dist/spinner/Spinner.styles.d.ts +1 -1
  138. package/dist/spinner/index.js +1 -1
  139. package/dist/spinner/index.mjs +1 -1
  140. package/dist/stepper/index.js +1 -1
  141. package/dist/stepper/index.mjs +2 -2
  142. package/dist/switch/SwitchInput.d.ts +7 -5
  143. package/dist/switch/SwitchInput.styles.d.ts +1 -1
  144. package/dist/switch/index.js +1 -1
  145. package/dist/switch/index.js.map +1 -1
  146. package/dist/switch/index.mjs +80 -91
  147. package/dist/switch/index.mjs.map +1 -1
  148. package/dist/tabs/TabsTrigger.styles.d.ts +1 -1
  149. package/dist/tabs/index.js +1 -1
  150. package/dist/tabs/index.js.map +1 -1
  151. package/dist/tabs/index.mjs +20 -21
  152. package/dist/tabs/index.mjs.map +1 -1
  153. package/dist/tag/Tag.styles.d.ts +1 -1
  154. package/dist/tag/index.js +1 -1
  155. package/dist/tag/index.js.map +1 -1
  156. package/dist/tag/index.mjs +15 -31
  157. package/dist/tag/index.mjs.map +1 -1
  158. package/dist/tag/variants/filled.d.ts +0 -4
  159. package/dist/tag/variants/outlined.d.ts +0 -4
  160. package/dist/tag/variants/tinted.d.ts +0 -4
  161. package/dist/text-link/TextLink.d.ts +1 -1
  162. package/dist/text-link/index.js +1 -1
  163. package/dist/text-link/index.mjs +1 -1
  164. package/dist/toast/Toast.styles.d.ts +1 -1
  165. package/dist/toast/index.js +1 -1
  166. package/dist/toast/index.js.map +1 -1
  167. package/dist/toast/index.mjs +25 -37
  168. package/dist/toast/index.mjs.map +1 -1
  169. package/dist/toast/types.d.ts +1 -1
  170. package/package.json +4 -4
  171. package/dist/Button-B6rA3-e5.js +0 -2
  172. package/dist/Button-B6rA3-e5.js.map +0 -1
  173. package/dist/Button-DPncfbbM.mjs.map +0 -1
  174. package/dist/Icon-C23-htlD.mjs.map +0 -1
  175. package/dist/Icon-CF0W0LKr.js +0 -2
  176. package/dist/Icon-CF0W0LKr.js.map +0 -1
  177. package/dist/Spinner-_Kffli3B.js +0 -2
  178. package/dist/Spinner-_Kffli3B.js.map +0 -1
  179. package/dist/Spinner-aLrtE2JN.mjs.map +0 -1
  180. package/dist/TextLink-C3xDLsbC.js +0 -2
  181. package/dist/TextLink-C3xDLsbC.js.map +0 -1
  182. package/dist/TextLink-D7mOCjY_.mjs.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","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 { Tabs as RadixTabs } from 'radix-ui'\nimport { createContext, useContext } from 'react'\n\nimport type { TabsTriggerVariantsProps } from './TabsTrigger.styles'\n\nexport type TabsContextInterface = TabsTriggerVariantsProps &\n Pick<RadixTabs.TabsProps, 'orientation'> & {\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 RadixTabs } from 'radix-ui'\nimport { 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 Omit<RadixTabs.TabsProps, 'activationMode'>,\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 = 'basic',\n size = 'md',\n /**\n * Default Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#root\n */\n asChild = false,\n forceMount = false,\n orientation = 'horizontal',\n children,\n className,\n ref,\n ...rest\n}: TabsProps) => {\n return (\n <TabsContext.Provider\n value={{\n intent,\n size,\n orientation,\n forceMount,\n }}\n >\n <RadixTabs.Root\n ref={ref}\n asChild={asChild}\n orientation={orientation}\n className={rootStyles({ className })}\n data-spark-component=\"tabs\"\n activationMode=\"automatic\"\n {...rest}\n >\n {children}\n </RadixTabs.Root>\n </TabsContext.Provider>\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-[state=inactive]:hidden',\n false: '',\n },\n },\n})\n","import { Tabs as RadixTabs } from 'radix-ui'\nimport { type PropsWithChildren, Ref } from 'react'\n\nimport { contentStyles } from './TabsContent.styles'\nimport { useTabsContext } from './TabsContext'\n\nexport interface TabsContentProps\n extends PropsWithChildren<Omit<RadixTabs.TabsContentProps, 'forceMount'>> {\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\nexport const TabsContent = ({\n /**\n * Default Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#content\n */\n children,\n asChild = false,\n className,\n ref,\n ...rest\n}: TabsContentProps) => {\n const { forceMount } = useTabsContext()\n\n return (\n <RadixTabs.Content\n data-spark-component=\"tabs-content\"\n ref={ref}\n forceMount={forceMount || rest.forceMount}\n className={contentStyles({ className, forceMount })}\n asChild={asChild}\n {...rest}\n >\n {children}\n </RadixTabs.Content>\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 { ArrowVerticalLeft } from '@spark-ui/icons/ArrowVerticalLeft'\nimport { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { Tabs as RadixTabs } from 'radix-ui'\nimport { 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<RadixTabs.TabsListProps, 'children'> {\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\nexport const TabsList = ({\n /**\n * Default Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#list\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\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 <RadixTabs.List\n data-spark-component=\"tabs-list\"\n ref={listRef}\n className={listStyles()}\n asChild={asChild}\n loop={loop}\n {...rest}\n >\n {children}\n </RadixTabs.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.Provider value={contextValue}>\n <SparkPopover {...props}>{props.children}</SparkPopover>\n </TabsPopoverContext.Provider>\n )) as typeof SparkPopover\n\n const PopoverComponent = Object.assign(PopoverWrapper, SparkPopover, {\n Content: TabsPopoverContent,\n Trigger: TabsPopoverTrigger,\n }) as ConfiguredPopoverComponent\n\n return (\n <TabsPopoverContext.Provider value={contextValue}>\n {children(PopoverComponent)}\n </TabsPopoverContext.Provider>\n )\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-[state=active]:font-bold',\n 'data-[state=inactive]: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 basic\n */\n intent: makeVariants<'intent', ['main', 'support', 'basic']>({\n main: ['data-[state=active]:text-main data-[state=active]:after:bg-main'],\n support: ['data-[state=active]:text-support data-[state=active]:after:bg-support'],\n basic: ['data-[state=active]:text-basic data-[state=active]:after:bg-basic'],\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: 'basic',\n size: 'md',\n hasMenu: false,\n orientation: 'horizontal',\n },\n }\n)\n\nexport type TabsTriggerVariantsProps = VariantProps<typeof triggerVariants>\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { Tabs as RadixTabs } from 'radix-ui'\nimport { type FocusEvent, type KeyboardEvent, type ReactNode, Ref, useRef } from 'react'\n\nimport { useTabsContext } from './TabsContext'\nimport { type ConfiguredPopoverComponent, Popover } from './TabsPopoverAbstraction'\nimport { triggerVariants } from './TabsTrigger.styles'\n\nexport interface TabsTriggerProps extends RadixTabs.TabsTriggerProps {\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\nexport const TabsTrigger = ({\n /**\n * Default Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#trigger\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 handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\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 <RadixTabs.Trigger\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 asChild={asChild}\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 </RadixTabs.Trigger>\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\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"],"names":["TabsContext","createContext","useTabsContext","context","useContext","rootStyles","cva","Tabs","intent","size","asChild","forceMount","orientation","children","className","ref","rest","jsx","RadixTabs","contentStyles","TabsContent","wrapperStyles","listStyles","navigationArrowStyles","useResizeObserver","target","onResize","setSize","useState","resizeObserverRef","useRef","resizeCallbackRef","useEffect","targetElm","entry","width","height","TabsList","loop","wrapperRef","innerRef","listRef","arrows","setArrows","toggleArrowsVisibility","currentList","handlePrevClick","shouldLoopForward","handleNextClick","shouldLoopBackward","jsxs","Button","Icon","ArrowVerticalLeft","ArrowVerticalRight","TabsPopoverContext","useTabsPopoverContext","TabsPopoverTrigger","forwardRef","ariaLabel","iconChildren","triggerProps","forwardedRef","popoverTriggerRef","mergedRef","useMergeRefs","SparkPopover","IconButton","MoreMenuHorizontal","TabsPopoverContent","side","align","contentProps","popoverSide","mergedClassName","cx","Popover","contextValue","useMemo","PopoverComponent","props","triggerVariants","makeVariants","TabsTrigger","value","disabled","onKeyDown","renderMenu","tabsTriggerRef","handleKeyDown","e","hasMenu","trigger","PopoverAbstraction","Root","List","Trigger","Content"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","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 { Tabs as RadixTabs } from 'radix-ui'\nimport { createContext, useContext } from 'react'\n\nimport type { TabsTriggerVariantsProps } from './TabsTrigger.styles'\n\nexport type TabsContextInterface = TabsTriggerVariantsProps &\n Pick<RadixTabs.TabsProps, 'orientation'> & {\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 RadixTabs } from 'radix-ui'\nimport { 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 Omit<RadixTabs.TabsProps, 'activationMode'>,\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 Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#root\n */\n asChild = false,\n forceMount = false,\n orientation = 'horizontal',\n children,\n className,\n ref,\n ...rest\n}: TabsProps) => {\n return (\n <TabsContext.Provider\n value={{\n intent,\n size,\n orientation,\n forceMount,\n }}\n >\n <RadixTabs.Root\n ref={ref}\n asChild={asChild}\n orientation={orientation}\n className={rootStyles({ className })}\n data-spark-component=\"tabs\"\n activationMode=\"automatic\"\n {...rest}\n >\n {children}\n </RadixTabs.Root>\n </TabsContext.Provider>\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-[state=inactive]:hidden',\n false: '',\n },\n },\n})\n","import { Tabs as RadixTabs } from 'radix-ui'\nimport { type PropsWithChildren, Ref } from 'react'\n\nimport { contentStyles } from './TabsContent.styles'\nimport { useTabsContext } from './TabsContext'\n\nexport interface TabsContentProps\n extends PropsWithChildren<Omit<RadixTabs.TabsContentProps, 'forceMount'>> {\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\nexport const TabsContent = ({\n /**\n * Default Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#content\n */\n children,\n asChild = false,\n className,\n ref,\n ...rest\n}: TabsContentProps) => {\n const { forceMount } = useTabsContext()\n\n return (\n <RadixTabs.Content\n data-spark-component=\"tabs-content\"\n ref={ref}\n forceMount={forceMount || rest.forceMount}\n className={contentStyles({ className, forceMount })}\n asChild={asChild}\n {...rest}\n >\n {children}\n </RadixTabs.Content>\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 { ArrowVerticalLeft } from '@spark-ui/icons/ArrowVerticalLeft'\nimport { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { Tabs as RadixTabs } from 'radix-ui'\nimport { 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<RadixTabs.TabsListProps, 'children'> {\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\nexport const TabsList = ({\n /**\n * Default Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#list\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\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 <RadixTabs.List\n data-spark-component=\"tabs-list\"\n ref={listRef}\n className={listStyles()}\n asChild={asChild}\n loop={loop}\n {...rest}\n >\n {children}\n </RadixTabs.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.Provider value={contextValue}>\n <SparkPopover {...props}>{props.children}</SparkPopover>\n </TabsPopoverContext.Provider>\n )) as typeof SparkPopover\n\n const PopoverComponent = Object.assign(PopoverWrapper, SparkPopover, {\n Content: TabsPopoverContent,\n Trigger: TabsPopoverTrigger,\n }) as ConfiguredPopoverComponent\n\n return (\n <TabsPopoverContext.Provider value={contextValue}>\n {children(PopoverComponent)}\n </TabsPopoverContext.Provider>\n )\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-[state=active]:font-bold',\n 'data-[state=inactive]: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-[state=active]:text-main data-[state=active]:after:bg-main'],\n support: ['data-[state=active]:text-support data-[state=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 { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { Tabs as RadixTabs } from 'radix-ui'\nimport { type FocusEvent, type KeyboardEvent, type ReactNode, Ref, useRef } from 'react'\n\nimport { useTabsContext } from './TabsContext'\nimport { type ConfiguredPopoverComponent, Popover } from './TabsPopoverAbstraction'\nimport { triggerVariants } from './TabsTrigger.styles'\n\nexport interface TabsTriggerProps extends RadixTabs.TabsTriggerProps {\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\nexport const TabsTrigger = ({\n /**\n * Default Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#trigger\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 handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\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 <RadixTabs.Trigger\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 asChild={asChild}\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 </RadixTabs.Trigger>\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\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"],"names":["TabsContext","createContext","useTabsContext","context","useContext","rootStyles","cva","Tabs","intent","size","asChild","forceMount","orientation","children","className","ref","rest","jsx","RadixTabs","contentStyles","TabsContent","wrapperStyles","listStyles","navigationArrowStyles","useResizeObserver","target","onResize","setSize","useState","resizeObserverRef","useRef","resizeCallbackRef","useEffect","targetElm","entry","width","height","TabsList","loop","wrapperRef","innerRef","listRef","arrows","setArrows","toggleArrowsVisibility","currentList","handlePrevClick","shouldLoopForward","handleNextClick","shouldLoopBackward","jsxs","Button","Icon","ArrowVerticalLeft","ArrowVerticalRight","TabsPopoverContext","useTabsPopoverContext","TabsPopoverTrigger","forwardRef","ariaLabel","iconChildren","triggerProps","forwardedRef","popoverTriggerRef","mergedRef","useMergeRefs","SparkPopover","IconButton","MoreMenuHorizontal","TabsPopoverContent","side","align","contentProps","popoverSide","mergedClassName","cx","Popover","contextValue","useMemo","PopoverComponent","props","triggerVariants","makeVariants","TabsTrigger","value","disabled","onKeyDown","renderMenu","tabsTriggerRef","handleKeyDown","e","hasMenu","trigger","PopoverAbstraction","Root","List","Trigger","Content"],"mappings":"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"}
@@ -1,14 +1,14 @@
1
1
  import { jsx as n, jsxs as I } from "react/jsx-runtime";
2
2
  import { Tabs as T } from "radix-ui";
3
- import { createContext as E, useContext as A, useState as B, useRef as p, useEffect as g, forwardRef as O, useMemo as G } from "react";
3
+ import { createContext as E, useContext as A, useState as B, useRef as b, useEffect as g, forwardRef as O, useMemo as G } from "react";
4
4
  import { cva as x, cx as J } from "class-variance-authority";
5
5
  import { ArrowVerticalLeft as Q } from "@spark-ui/icons/ArrowVerticalLeft";
6
6
  import { ArrowVerticalRight as U } from "@spark-ui/icons/ArrowVerticalRight";
7
- import { B as M } from "../Button-DPncfbbM.mjs";
8
- import { I as N } from "../Icon-C23-htlD.mjs";
7
+ import { B as M } from "../Button-1M9DcZl0.mjs";
8
+ import { I as N } from "../Icon-BO327oHU.mjs";
9
9
  import { useMergeRefs as j } from "@spark-ui/hooks/use-merge-refs";
10
10
  import { MoreMenuHorizontal as X } from "@spark-ui/icons/MoreMenuHorizontal";
11
- import { I as Y } from "../IconButton-Bfd-6BAD.mjs";
11
+ import { I as Y } from "../IconButton-DdB3Pq13.mjs";
12
12
  import { Popover as w } from "../popover/index.mjs";
13
13
  import { makeVariants as Z } from "@spark-ui/internal-utils";
14
14
  const D = E({}), L = () => {
@@ -22,7 +22,7 @@ const D = E({}), L = () => {
22
22
  "data-[orientation=vertical]:flex-row",
23
23
  "max-w-full"
24
24
  ]), F = ({
25
- intent: t = "basic",
25
+ intent: t = "support",
26
26
  size: r = "md",
27
27
  /**
28
28
  * Default Radix Primitive values
@@ -107,15 +107,15 @@ const te = x(["relative flex"]), re = x([
107
107
  "outline-hidden",
108
108
  "focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset!"
109
109
  ]), oe = (t, r) => {
110
- const [s, a] = B({ width: void 0, height: void 0 }), o = p(null), i = p(r);
110
+ const [s, a] = B({ width: void 0, height: void 0 }), o = b(null), i = b(r);
111
111
  return g(() => {
112
112
  i.current = r;
113
113
  }, [r]), g(() => {
114
114
  const l = t && "current" in t ? t.current : t;
115
115
  if (!(!l || o.current))
116
116
  return o.current = new ResizeObserver(([c]) => {
117
- const { inlineSize: e, blockSize: m } = c?.borderBoxSize?.[0] ?? {};
118
- i.current?.(c), a({ width: e, height: m });
117
+ const { inlineSize: e, blockSize: p } = c?.borderBoxSize?.[0] ?? {};
118
+ i.current?.(c), a({ width: e, height: p });
119
119
  }), o.current.observe(l), () => {
120
120
  o.current && o.current.unobserve(l);
121
121
  };
@@ -132,20 +132,20 @@ const te = x(["relative flex"]), re = x([
132
132
  ref: o,
133
133
  ...i
134
134
  }) => {
135
- const l = p(null), c = p(null), e = o || c, { orientation: m } = L(), { width: z } = oe(l), [d, h] = B({
135
+ const l = b(null), c = b(null), e = o || c, { orientation: p } = L(), { width: z } = oe(l), [d, m] = B({
136
136
  prev: "hidden",
137
137
  next: "hidden"
138
138
  });
139
139
  g(() => {
140
- typeof e == "function" || !e.current || h(m !== "horizontal" ? { prev: "hidden", next: "hidden" } : {
140
+ typeof e == "function" || !e.current || m(p !== "horizontal" ? { prev: "hidden", next: "hidden" } : {
141
141
  prev: e.current.scrollWidth > e.current.clientWidth ? "visible" : "hidden",
142
142
  next: e.current.scrollWidth > e.current.clientWidth ? "visible" : "hidden"
143
143
  });
144
- }, [m, e, z]), g(() => {
144
+ }, [p, e, z]), g(() => {
145
145
  if (typeof e == "function" || !e.current || d.prev === "hidden" || r)
146
146
  return;
147
147
  const f = (u) => {
148
- h({
148
+ m({
149
149
  prev: u.scrollLeft > 0 ? "visible" : "disabled",
150
150
  next: u.scrollLeft + u.clientWidth < u.scrollWidth ? "visible" : "disabled"
151
151
  });
@@ -287,12 +287,11 @@ const ne = x(
287
287
  variants: {
288
288
  /**
289
289
  * Change the color scheme of the tabs
290
- * @default basic
290
+ * @default support
291
291
  */
292
292
  intent: Z({
293
293
  main: ["data-[state=active]:text-main data-[state=active]:after:bg-main"],
294
- support: ["data-[state=active]:text-support data-[state=active]:after:bg-support"],
295
- basic: ["data-[state=active]:text-basic data-[state=active]:after:bg-basic"]
294
+ support: ["data-[state=active]:text-support data-[state=active]:after:bg-support"]
296
295
  }),
297
296
  /**
298
297
  * Change the size of the tabs
@@ -319,7 +318,7 @@ const ne = x(
319
318
  }
320
319
  ],
321
320
  defaultVariants: {
322
- intent: "basic",
321
+ intent: "support",
323
322
  size: "md",
324
323
  hasMenu: !1,
325
324
  orientation: "horizontal"
@@ -340,15 +339,15 @@ const ne = x(
340
339
  renderMenu: c,
341
340
  ...e
342
341
  }) => {
343
- const { intent: m, size: z, orientation: d } = L(), h = p(null), y = p(null), C = j(i, y), f = (b) => {
344
- b.key === "F10" && b.shiftKey && c && h.current && (b.preventDefault(), h.current.click()), l?.(b);
342
+ const { intent: p, size: z, orientation: d } = L(), m = b(null), y = b(null), C = j(i, y), f = (h) => {
343
+ h.key === "F10" && h.shiftKey && c && m.current && (h.preventDefault(), m.current.click()), l?.(h);
345
344
  }, v = !!c, u = d === "vertical" ? "right" : "bottom", S = /* @__PURE__ */ n(
346
345
  T.Trigger,
347
346
  {
348
347
  "data-spark-component": "tabs-trigger",
349
348
  ref: C,
350
349
  className: ne({
351
- intent: m,
350
+ intent: p,
352
351
  size: z,
353
352
  hasMenu: v,
354
353
  orientation: d ?? "horizontal",
@@ -357,7 +356,7 @@ const ne = x(
357
356
  asChild: t,
358
357
  disabled: s,
359
358
  value: r,
360
- onFocus: ({ target: b }) => b.scrollIntoView({
359
+ onFocus: ({ target: h }) => h.scrollIntoView({
361
360
  behavior: "smooth",
362
361
  block: "nearest",
363
362
  inline: "nearest"
@@ -370,7 +369,7 @@ const ne = x(
370
369
  );
371
370
  return v ? /* @__PURE__ */ I("div", { className: d === "vertical" ? "relative w-full" : "relative", children: [
372
371
  S,
373
- /* @__PURE__ */ n("div", { className: "right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2", children: /* @__PURE__ */ n(H, { popoverSide: u, popoverTriggerRef: h, children: (b) => c?.({ Popover: b }) }) })
372
+ /* @__PURE__ */ n("div", { className: "right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2", children: /* @__PURE__ */ n(H, { popoverSide: u, popoverTriggerRef: m, children: (h) => c?.({ Popover: h }) }) })
374
373
  ] }) : S;
375
374
  };
376
375
  W.displayName = "Tabs.Trigger";
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","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 { Tabs as RadixTabs } from 'radix-ui'\nimport { createContext, useContext } from 'react'\n\nimport type { TabsTriggerVariantsProps } from './TabsTrigger.styles'\n\nexport type TabsContextInterface = TabsTriggerVariantsProps &\n Pick<RadixTabs.TabsProps, 'orientation'> & {\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 RadixTabs } from 'radix-ui'\nimport { 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 Omit<RadixTabs.TabsProps, 'activationMode'>,\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 = 'basic',\n size = 'md',\n /**\n * Default Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#root\n */\n asChild = false,\n forceMount = false,\n orientation = 'horizontal',\n children,\n className,\n ref,\n ...rest\n}: TabsProps) => {\n return (\n <TabsContext.Provider\n value={{\n intent,\n size,\n orientation,\n forceMount,\n }}\n >\n <RadixTabs.Root\n ref={ref}\n asChild={asChild}\n orientation={orientation}\n className={rootStyles({ className })}\n data-spark-component=\"tabs\"\n activationMode=\"automatic\"\n {...rest}\n >\n {children}\n </RadixTabs.Root>\n </TabsContext.Provider>\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-[state=inactive]:hidden',\n false: '',\n },\n },\n})\n","import { Tabs as RadixTabs } from 'radix-ui'\nimport { type PropsWithChildren, Ref } from 'react'\n\nimport { contentStyles } from './TabsContent.styles'\nimport { useTabsContext } from './TabsContext'\n\nexport interface TabsContentProps\n extends PropsWithChildren<Omit<RadixTabs.TabsContentProps, 'forceMount'>> {\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\nexport const TabsContent = ({\n /**\n * Default Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#content\n */\n children,\n asChild = false,\n className,\n ref,\n ...rest\n}: TabsContentProps) => {\n const { forceMount } = useTabsContext()\n\n return (\n <RadixTabs.Content\n data-spark-component=\"tabs-content\"\n ref={ref}\n forceMount={forceMount || rest.forceMount}\n className={contentStyles({ className, forceMount })}\n asChild={asChild}\n {...rest}\n >\n {children}\n </RadixTabs.Content>\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 { ArrowVerticalLeft } from '@spark-ui/icons/ArrowVerticalLeft'\nimport { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { Tabs as RadixTabs } from 'radix-ui'\nimport { 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<RadixTabs.TabsListProps, 'children'> {\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\nexport const TabsList = ({\n /**\n * Default Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#list\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\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 <RadixTabs.List\n data-spark-component=\"tabs-list\"\n ref={listRef}\n className={listStyles()}\n asChild={asChild}\n loop={loop}\n {...rest}\n >\n {children}\n </RadixTabs.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.Provider value={contextValue}>\n <SparkPopover {...props}>{props.children}</SparkPopover>\n </TabsPopoverContext.Provider>\n )) as typeof SparkPopover\n\n const PopoverComponent = Object.assign(PopoverWrapper, SparkPopover, {\n Content: TabsPopoverContent,\n Trigger: TabsPopoverTrigger,\n }) as ConfiguredPopoverComponent\n\n return (\n <TabsPopoverContext.Provider value={contextValue}>\n {children(PopoverComponent)}\n </TabsPopoverContext.Provider>\n )\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-[state=active]:font-bold',\n 'data-[state=inactive]: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 basic\n */\n intent: makeVariants<'intent', ['main', 'support', 'basic']>({\n main: ['data-[state=active]:text-main data-[state=active]:after:bg-main'],\n support: ['data-[state=active]:text-support data-[state=active]:after:bg-support'],\n basic: ['data-[state=active]:text-basic data-[state=active]:after:bg-basic'],\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: 'basic',\n size: 'md',\n hasMenu: false,\n orientation: 'horizontal',\n },\n }\n)\n\nexport type TabsTriggerVariantsProps = VariantProps<typeof triggerVariants>\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { Tabs as RadixTabs } from 'radix-ui'\nimport { type FocusEvent, type KeyboardEvent, type ReactNode, Ref, useRef } from 'react'\n\nimport { useTabsContext } from './TabsContext'\nimport { type ConfiguredPopoverComponent, Popover } from './TabsPopoverAbstraction'\nimport { triggerVariants } from './TabsTrigger.styles'\n\nexport interface TabsTriggerProps extends RadixTabs.TabsTriggerProps {\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\nexport const TabsTrigger = ({\n /**\n * Default Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#trigger\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 handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\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 <RadixTabs.Trigger\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 asChild={asChild}\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 </RadixTabs.Trigger>\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\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"],"names":["TabsContext","createContext","useTabsContext","context","useContext","rootStyles","cva","Tabs","intent","size","asChild","forceMount","orientation","children","className","ref","rest","jsx","RadixTabs","contentStyles","TabsContent","wrapperStyles","listStyles","navigationArrowStyles","useResizeObserver","target","onResize","setSize","useState","resizeObserverRef","useRef","resizeCallbackRef","useEffect","targetElm","entry","width","height","TabsList","loop","wrapperRef","innerRef","listRef","arrows","setArrows","toggleArrowsVisibility","currentList","handlePrevClick","shouldLoopForward","handleNextClick","shouldLoopBackward","jsxs","Button","Icon","ArrowVerticalLeft","ArrowVerticalRight","TabsPopoverContext","useTabsPopoverContext","TabsPopoverTrigger","forwardRef","ariaLabel","iconChildren","triggerProps","forwardedRef","popoverTriggerRef","mergedRef","useMergeRefs","SparkPopover","IconButton","MoreMenuHorizontal","TabsPopoverContent","side","align","contentProps","popoverSide","mergedClassName","cx","Popover","contextValue","useMemo","PopoverComponent","props","triggerVariants","makeVariants","TabsTrigger","value","disabled","onKeyDown","renderMenu","tabsTriggerRef","handleKeyDown","e","hasMenu","trigger","PopoverAbstraction","Root","List","Trigger","Content"],"mappings":"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"}
1
+ {"version":3,"file":"index.mjs","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 { Tabs as RadixTabs } from 'radix-ui'\nimport { createContext, useContext } from 'react'\n\nimport type { TabsTriggerVariantsProps } from './TabsTrigger.styles'\n\nexport type TabsContextInterface = TabsTriggerVariantsProps &\n Pick<RadixTabs.TabsProps, 'orientation'> & {\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 RadixTabs } from 'radix-ui'\nimport { 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 Omit<RadixTabs.TabsProps, 'activationMode'>,\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 Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#root\n */\n asChild = false,\n forceMount = false,\n orientation = 'horizontal',\n children,\n className,\n ref,\n ...rest\n}: TabsProps) => {\n return (\n <TabsContext.Provider\n value={{\n intent,\n size,\n orientation,\n forceMount,\n }}\n >\n <RadixTabs.Root\n ref={ref}\n asChild={asChild}\n orientation={orientation}\n className={rootStyles({ className })}\n data-spark-component=\"tabs\"\n activationMode=\"automatic\"\n {...rest}\n >\n {children}\n </RadixTabs.Root>\n </TabsContext.Provider>\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-[state=inactive]:hidden',\n false: '',\n },\n },\n})\n","import { Tabs as RadixTabs } from 'radix-ui'\nimport { type PropsWithChildren, Ref } from 'react'\n\nimport { contentStyles } from './TabsContent.styles'\nimport { useTabsContext } from './TabsContext'\n\nexport interface TabsContentProps\n extends PropsWithChildren<Omit<RadixTabs.TabsContentProps, 'forceMount'>> {\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\nexport const TabsContent = ({\n /**\n * Default Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#content\n */\n children,\n asChild = false,\n className,\n ref,\n ...rest\n}: TabsContentProps) => {\n const { forceMount } = useTabsContext()\n\n return (\n <RadixTabs.Content\n data-spark-component=\"tabs-content\"\n ref={ref}\n forceMount={forceMount || rest.forceMount}\n className={contentStyles({ className, forceMount })}\n asChild={asChild}\n {...rest}\n >\n {children}\n </RadixTabs.Content>\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 { ArrowVerticalLeft } from '@spark-ui/icons/ArrowVerticalLeft'\nimport { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { Tabs as RadixTabs } from 'radix-ui'\nimport { 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<RadixTabs.TabsListProps, 'children'> {\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\nexport const TabsList = ({\n /**\n * Default Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#list\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\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 <RadixTabs.List\n data-spark-component=\"tabs-list\"\n ref={listRef}\n className={listStyles()}\n asChild={asChild}\n loop={loop}\n {...rest}\n >\n {children}\n </RadixTabs.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.Provider value={contextValue}>\n <SparkPopover {...props}>{props.children}</SparkPopover>\n </TabsPopoverContext.Provider>\n )) as typeof SparkPopover\n\n const PopoverComponent = Object.assign(PopoverWrapper, SparkPopover, {\n Content: TabsPopoverContent,\n Trigger: TabsPopoverTrigger,\n }) as ConfiguredPopoverComponent\n\n return (\n <TabsPopoverContext.Provider value={contextValue}>\n {children(PopoverComponent)}\n </TabsPopoverContext.Provider>\n )\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-[state=active]:font-bold',\n 'data-[state=inactive]: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-[state=active]:text-main data-[state=active]:after:bg-main'],\n support: ['data-[state=active]:text-support data-[state=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 { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { Tabs as RadixTabs } from 'radix-ui'\nimport { type FocusEvent, type KeyboardEvent, type ReactNode, Ref, useRef } from 'react'\n\nimport { useTabsContext } from './TabsContext'\nimport { type ConfiguredPopoverComponent, Popover } from './TabsPopoverAbstraction'\nimport { triggerVariants } from './TabsTrigger.styles'\n\nexport interface TabsTriggerProps extends RadixTabs.TabsTriggerProps {\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\nexport const TabsTrigger = ({\n /**\n * Default Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#trigger\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 handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\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 <RadixTabs.Trigger\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 asChild={asChild}\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 </RadixTabs.Trigger>\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\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"],"names":["TabsContext","createContext","useTabsContext","context","useContext","rootStyles","cva","Tabs","intent","size","asChild","forceMount","orientation","children","className","ref","rest","jsx","RadixTabs","contentStyles","TabsContent","wrapperStyles","listStyles","navigationArrowStyles","useResizeObserver","target","onResize","setSize","useState","resizeObserverRef","useRef","resizeCallbackRef","useEffect","targetElm","entry","width","height","TabsList","loop","wrapperRef","innerRef","listRef","arrows","setArrows","toggleArrowsVisibility","currentList","handlePrevClick","shouldLoopForward","handleNextClick","shouldLoopBackward","jsxs","Button","Icon","ArrowVerticalLeft","ArrowVerticalRight","TabsPopoverContext","useTabsPopoverContext","TabsPopoverTrigger","forwardRef","ariaLabel","iconChildren","triggerProps","forwardedRef","popoverTriggerRef","mergedRef","useMergeRefs","SparkPopover","IconButton","MoreMenuHorizontal","TabsPopoverContent","side","align","contentProps","popoverSide","mergedClassName","cx","Popover","contextValue","useMemo","PopoverComponent","props","triggerVariants","makeVariants","TabsTrigger","value","disabled","onKeyDown","renderMenu","tabsTriggerRef","handleKeyDown","e","hasMenu","trigger","PopoverAbstraction","Root","List","Trigger","Content"],"mappings":"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"}
@@ -3,6 +3,6 @@ export declare const tagStyles: (props?: ({
3
3
  design?: "filled" | "outlined" | "tinted" | null | undefined;
4
4
  size?: "md" | "lg" | null | undefined;
5
5
  shape?: "square" | "rounded" | "pill" | null | undefined;
6
- intent?: "main" | "alert" | "support" | "accent" | "basic" | "success" | "info" | "neutral" | "danger" | "surface" | null | undefined;
6
+ intent?: "main" | "alert" | "support" | "accent" | "success" | "info" | "neutral" | "danger" | "surface" | null | undefined;
7
7
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
8
8
  export type TagStylesProps = VariantProps<typeof tagStyles>;
package/dist/tag/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),u=require("../Slot-DQ8z2zsy.js"),t=require("@spark-ui/internal-utils"),g=require("class-variance-authority"),b=[{intent:"main",design:"filled",class:t.tw(["bg-main","text-on-main"])},{intent:"support",design:"filled",class:t.tw(["bg-support","text-on-support"])},{intent:"accent",design:"filled",class:t.tw(["bg-accent","text-on-accent"])},{intent:"basic",design:"filled",class:t.tw(["bg-basic","text-on-basic"])},{intent:"success",design:"filled",class:t.tw(["bg-success","text-on-success"])},{intent:"alert",design:"filled",class:t.tw(["bg-alert","text-on-alert"])},{intent:"danger",design:"filled",class:t.tw(["bg-error","text-on-error"])},{intent:"info",design:"filled",class:t.tw(["bg-info","text-on-info"])},{intent:"neutral",design:"filled",class:t.tw(["bg-neutral","text-on-neutral"])},{intent:"surface",design:"filled",class:t.tw(["bg-surface","text-on-surface"])}],f=[{intent:"main",design:"outlined",class:t.tw(["text-main"])},{intent:"support",design:"outlined",class:t.tw(["text-support"])},{intent:"accent",design:"outlined",class:t.tw(["text-accent"])},{intent:"basic",design:"outlined",class:t.tw(["text-basic"])},{intent:"success",design:"outlined",class:t.tw(["text-success"])},{intent:"alert",design:"outlined",class:t.tw(["text-alert"])},{intent:"danger",design:"outlined",class:t.tw(["text-error"])},{intent:"info",design:"outlined",class:t.tw(["text-info"])},{intent:"neutral",design:"outlined",class:t.tw(["text-neutral"])}],p=[{intent:"main",design:"tinted",class:t.tw(["bg-main-container","text-on-main-container"])},{intent:"support",design:"tinted",class:t.tw(["bg-support-container","text-on-support-container"])},{intent:"accent",design:"tinted",class:t.tw(["bg-accent-container","text-on-accent-container"])},{intent:"basic",design:"tinted",class:t.tw(["bg-basic-container","text-on-basic-container"])},{intent:"success",design:"tinted",class:t.tw(["bg-success-container","text-on-success-container"])},{intent:"alert",design:"tinted",class:t.tw(["bg-alert-container","text-on-alert-container"])},{intent:"danger",design:"tinted",class:t.tw(["bg-error-container","text-on-error-container"])},{intent:"info",design:"tinted",class:t.tw(["bg-info-container","text-on-info-container"])},{intent:"neutral",design:"tinted",class:t.tw(["bg-neutral-container","text-on-neutral-container"])}],x=g.cva(["box-border default:inline-flex default:w-fit items-center justify-center gap-sm whitespace-nowrap","text-caption font-bold","px-md"],{variants:{design:t.makeVariants({filled:[],outlined:["border-sm","border-current"],tinted:[]}),size:t.makeVariants({md:["h-sz-20"],lg:["h-sz-24"]}),shape:t.makeVariants({square:[],rounded:["rounded-md"],pill:["rounded-full"]}),intent:t.makeVariants({main:[],support:[],accent:[],basic:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[]})},compoundVariants:[...b,...f,...p],defaultVariants:{design:"filled",intent:"basic",size:"md",shape:"pill"}}),w=({design:n="filled",intent:e="basic",size:s="md",shape:i="pill",asChild:a,className:c,ref:r,...l})=>{const o=a?u.Slot:"span";return d.jsx(o,{"data-spark-component":"tag",ref:r,className:x({className:c,design:n,intent:e,size:s,shape:i}),...l})};exports.Tag=w;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),u=require("../Slot-DQ8z2zsy.js"),t=require("@spark-ui/internal-utils"),g=require("class-variance-authority"),p=[{intent:"main",design:"filled",class:t.tw(["bg-main","text-on-main"])},{intent:"support",design:"filled",class:t.tw(["bg-support","text-on-support"])},{intent:"accent",design:"filled",class:t.tw(["bg-accent","text-on-accent"])},{intent:"success",design:"filled",class:t.tw(["bg-success","text-on-success"])},{intent:"alert",design:"filled",class:t.tw(["bg-alert","text-on-alert"])},{intent:"danger",design:"filled",class:t.tw(["bg-error","text-on-error"])},{intent:"info",design:"filled",class:t.tw(["bg-info","text-on-info"])},{intent:"neutral",design:"filled",class:t.tw(["bg-neutral","text-on-neutral"])},{intent:"surface",design:"filled",class:t.tw(["bg-surface","text-on-surface"])}],f=[{intent:"main",design:"outlined",class:t.tw(["text-main"])},{intent:"support",design:"outlined",class:t.tw(["text-support"])},{intent:"accent",design:"outlined",class:t.tw(["text-accent"])},{intent:"success",design:"outlined",class:t.tw(["text-success"])},{intent:"alert",design:"outlined",class:t.tw(["text-alert"])},{intent:"danger",design:"outlined",class:t.tw(["text-error"])},{intent:"info",design:"outlined",class:t.tw(["text-info"])},{intent:"neutral",design:"outlined",class:t.tw(["text-neutral"])}],x=[{intent:"main",design:"tinted",class:t.tw(["bg-main-container","text-on-main-container"])},{intent:"support",design:"tinted",class:t.tw(["bg-support-container","text-on-support-container"])},{intent:"accent",design:"tinted",class:t.tw(["bg-accent-container","text-on-accent-container"])},{intent:"success",design:"tinted",class:t.tw(["bg-success-container","text-on-success-container"])},{intent:"alert",design:"tinted",class:t.tw(["bg-alert-container","text-on-alert-container"])},{intent:"danger",design:"tinted",class:t.tw(["bg-error-container","text-on-error-container"])},{intent:"info",design:"tinted",class:t.tw(["bg-info-container","text-on-info-container"])},{intent:"neutral",design:"tinted",class:t.tw(["bg-neutral-container","text-on-neutral-container"])}],w=g.cva(["box-border default:inline-flex default:w-fit items-center justify-center gap-sm whitespace-nowrap","text-caption font-bold","px-md"],{variants:{design:t.makeVariants({filled:[],outlined:["border-sm","border-current"],tinted:[]}),size:t.makeVariants({md:["h-sz-20"],lg:["h-sz-24"]}),shape:t.makeVariants({square:[],rounded:["rounded-md"],pill:["rounded-full"]}),intent:t.makeVariants({main:[],support:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[]})},compoundVariants:[...p,...f,...x],defaultVariants:{design:"filled",intent:"support",size:"md",shape:"pill"}}),m=({design:n="filled",intent:e="support",size:s="md",shape:i="pill",asChild:a,className:r,ref:c,...l})=>{const o=a?u.Slot:"span";return d.jsx(o,{"data-spark-component":"tag",ref:c,className:w({className:r,design:n,intent:e,size:s,shape:i}),...l})};exports.Tag=m;
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/tag/variants/filled.ts","../../src/tag/variants/outlined.ts","../../src/tag/variants/tinted.ts","../../src/tag/Tag.styles.tsx","../../src/tag/Tag.tsx"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n {\n intent: 'main',\n design: 'filled',\n class: tw(['bg-main', 'text-on-main']),\n },\n {\n intent: 'support',\n design: 'filled',\n class: tw(['bg-support', 'text-on-support']),\n },\n {\n intent: 'accent',\n design: 'filled',\n class: tw(['bg-accent', 'text-on-accent']),\n },\n {\n intent: 'basic',\n design: 'filled',\n class: tw(['bg-basic', 'text-on-basic']),\n },\n {\n intent: 'success',\n design: 'filled',\n class: tw(['bg-success', 'text-on-success']),\n },\n {\n intent: 'alert',\n design: 'filled',\n class: tw(['bg-alert', 'text-on-alert']),\n },\n {\n intent: 'danger',\n design: 'filled',\n class: tw(['bg-error', 'text-on-error']),\n },\n {\n intent: 'info',\n design: 'filled',\n class: tw(['bg-info', 'text-on-info']),\n },\n {\n intent: 'neutral',\n design: 'filled',\n class: tw(['bg-neutral', 'text-on-neutral']),\n },\n {\n intent: 'surface',\n design: 'filled',\n class: tw(['bg-surface', 'text-on-surface']),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n {\n intent: 'main',\n design: 'outlined',\n class: tw(['text-main']),\n },\n {\n intent: 'support',\n design: 'outlined',\n class: tw(['text-support']),\n },\n {\n intent: 'accent',\n design: 'outlined',\n class: tw(['text-accent']),\n },\n {\n intent: 'basic',\n design: 'outlined',\n class: tw(['text-basic']),\n },\n {\n intent: 'success',\n design: 'outlined',\n class: tw(['text-success']),\n },\n {\n intent: 'alert',\n design: 'outlined',\n class: tw(['text-alert']),\n },\n {\n intent: 'danger',\n design: 'outlined',\n class: tw(['text-error']),\n },\n {\n intent: 'info',\n design: 'outlined',\n class: tw(['text-info']),\n },\n {\n intent: 'neutral',\n design: 'outlined',\n class: tw(['text-neutral']),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n {\n intent: 'main',\n design: 'tinted',\n class: tw(['bg-main-container', 'text-on-main-container']),\n },\n {\n intent: 'support',\n design: 'tinted',\n class: tw(['bg-support-container', 'text-on-support-container']),\n },\n {\n intent: 'accent',\n design: 'tinted',\n class: tw(['bg-accent-container', 'text-on-accent-container']),\n },\n {\n intent: 'basic',\n design: 'tinted',\n class: tw(['bg-basic-container', 'text-on-basic-container']),\n },\n {\n intent: 'success',\n design: 'tinted',\n class: tw(['bg-success-container', 'text-on-success-container']),\n },\n {\n intent: 'alert',\n design: 'tinted',\n class: tw(['bg-alert-container', 'text-on-alert-container']),\n },\n {\n intent: 'danger',\n design: 'tinted',\n class: tw(['bg-error-container', 'text-on-error-container']),\n },\n {\n intent: 'info',\n design: 'tinted',\n class: tw(['bg-info-container', 'text-on-info-container']),\n },\n {\n intent: 'neutral',\n design: 'tinted',\n class: tw(['bg-neutral-container', 'text-on-neutral-container']),\n },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { filledVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const tagStyles = cva(\n [\n 'box-border default:inline-flex default:w-fit items-center justify-center gap-sm whitespace-nowrap',\n 'text-caption font-bold',\n 'px-md',\n ],\n {\n variants: {\n /**\n * Main style of the tag.\n * - `filled`: Tag will be plain.\n * - `outlined`: Tag will have a surface background with an colored outline/text.\n * - `tinted`: Tag will be filled but using a lighter color scheme.\n */\n design: makeVariants<'design', ['filled', 'outlined', 'tinted']>({\n filled: [],\n outlined: ['border-sm', 'border-current'],\n tinted: [],\n }),\n size: makeVariants<'size', ['md', 'lg']>({\n md: ['h-sz-20'],\n lg: ['h-sz-24'],\n }),\n shape: makeVariants<'shape', ['square', 'rounded', 'pill']>({\n square: [],\n rounded: ['rounded-md'],\n pill: ['rounded-full'],\n }),\n /**\n * Color scheme of the tag.\n */\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'basic',\n 'success',\n 'alert',\n 'info',\n 'neutral',\n 'danger',\n 'surface',\n ]\n >({\n main: [],\n support: [],\n accent: [],\n basic: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n }),\n },\n compoundVariants: [...filledVariants, ...outlinedVariants, ...tintedVariants],\n defaultVariants: {\n design: 'filled',\n intent: 'basic',\n size: 'md',\n shape: 'pill',\n },\n }\n)\n\nexport type TagStylesProps = VariantProps<typeof tagStyles>\n","import { ButtonHTMLAttributes, type PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { tagStyles, type TagStylesProps } from './Tag.styles'\n\ninterface BaseTagProps\n extends PropsWithChildren<ButtonHTMLAttributes<HTMLSpanElement>>,\n TagStylesProps {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n}\n\ninterface FilteredDesignIntent<\n Design extends TagProps['design'],\n K extends TagStylesProps['intent'] | never = never,\n> {\n design?: Design\n intent?: Exclude<TagStylesProps['intent'], K>\n ref?: Ref<HTMLButtonElement>\n}\n\nexport type ValidTagDesignIntent =\n | FilteredDesignIntent<'tinted', 'surface'>\n | FilteredDesignIntent<'outlined', 'surface'>\n | FilteredDesignIntent<'filled'>\n\nexport type TagProps = BaseTagProps & ValidTagDesignIntent\n\nexport const Tag = ({\n design = 'filled',\n intent = 'basic',\n size = 'md',\n shape = 'pill',\n asChild,\n className,\n ref,\n ...others\n}: TagProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n data-spark-component=\"tag\"\n ref={ref}\n className={tagStyles({\n className,\n design,\n intent,\n size,\n shape,\n })}\n {...others}\n />\n )\n}\n"],"names":["filledVariants","tw","outlinedVariants","tintedVariants","tagStyles","cva","makeVariants","Tag","design","intent","size","shape","asChild","className","ref","others","Component","Slot","jsx"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../src/tag/variants/filled.ts","../../src/tag/variants/outlined.ts","../../src/tag/variants/tinted.ts","../../src/tag/Tag.styles.tsx","../../src/tag/Tag.tsx"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n {\n intent: 'main',\n design: 'filled',\n class: tw(['bg-main', 'text-on-main']),\n },\n {\n intent: 'support',\n design: 'filled',\n class: tw(['bg-support', 'text-on-support']),\n },\n {\n intent: 'accent',\n design: 'filled',\n class: tw(['bg-accent', 'text-on-accent']),\n },\n {\n intent: 'success',\n design: 'filled',\n class: tw(['bg-success', 'text-on-success']),\n },\n {\n intent: 'alert',\n design: 'filled',\n class: tw(['bg-alert', 'text-on-alert']),\n },\n {\n intent: 'danger',\n design: 'filled',\n class: tw(['bg-error', 'text-on-error']),\n },\n {\n intent: 'info',\n design: 'filled',\n class: tw(['bg-info', 'text-on-info']),\n },\n {\n intent: 'neutral',\n design: 'filled',\n class: tw(['bg-neutral', 'text-on-neutral']),\n },\n {\n intent: 'surface',\n design: 'filled',\n class: tw(['bg-surface', 'text-on-surface']),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n {\n intent: 'main',\n design: 'outlined',\n class: tw(['text-main']),\n },\n {\n intent: 'support',\n design: 'outlined',\n class: tw(['text-support']),\n },\n {\n intent: 'accent',\n design: 'outlined',\n class: tw(['text-accent']),\n },\n {\n intent: 'success',\n design: 'outlined',\n class: tw(['text-success']),\n },\n {\n intent: 'alert',\n design: 'outlined',\n class: tw(['text-alert']),\n },\n {\n intent: 'danger',\n design: 'outlined',\n class: tw(['text-error']),\n },\n {\n intent: 'info',\n design: 'outlined',\n class: tw(['text-info']),\n },\n {\n intent: 'neutral',\n design: 'outlined',\n class: tw(['text-neutral']),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n {\n intent: 'main',\n design: 'tinted',\n class: tw(['bg-main-container', 'text-on-main-container']),\n },\n {\n intent: 'support',\n design: 'tinted',\n class: tw(['bg-support-container', 'text-on-support-container']),\n },\n {\n intent: 'accent',\n design: 'tinted',\n class: tw(['bg-accent-container', 'text-on-accent-container']),\n },\n {\n intent: 'success',\n design: 'tinted',\n class: tw(['bg-success-container', 'text-on-success-container']),\n },\n {\n intent: 'alert',\n design: 'tinted',\n class: tw(['bg-alert-container', 'text-on-alert-container']),\n },\n {\n intent: 'danger',\n design: 'tinted',\n class: tw(['bg-error-container', 'text-on-error-container']),\n },\n {\n intent: 'info',\n design: 'tinted',\n class: tw(['bg-info-container', 'text-on-info-container']),\n },\n {\n intent: 'neutral',\n design: 'tinted',\n class: tw(['bg-neutral-container', 'text-on-neutral-container']),\n },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { filledVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const tagStyles = cva(\n [\n 'box-border default:inline-flex default:w-fit items-center justify-center gap-sm whitespace-nowrap',\n 'text-caption font-bold',\n 'px-md',\n ],\n {\n variants: {\n /**\n * Main style of the tag.\n * - `filled`: Tag will be plain.\n * - `outlined`: Tag will have a surface background with an colored outline/text.\n * - `tinted`: Tag will be filled but using a lighter color scheme.\n */\n design: makeVariants<'design', ['filled', 'outlined', 'tinted']>({\n filled: [],\n outlined: ['border-sm', 'border-current'],\n tinted: [],\n }),\n size: makeVariants<'size', ['md', 'lg']>({\n md: ['h-sz-20'],\n lg: ['h-sz-24'],\n }),\n shape: makeVariants<'shape', ['square', 'rounded', 'pill']>({\n square: [],\n rounded: ['rounded-md'],\n pill: ['rounded-full'],\n }),\n /**\n * Color scheme of the tag.\n */\n intent: makeVariants<\n 'intent',\n ['main', 'support', 'accent', 'success', 'alert', 'info', 'neutral', 'danger', 'surface']\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n }),\n },\n compoundVariants: [...filledVariants, ...outlinedVariants, ...tintedVariants],\n defaultVariants: {\n design: 'filled',\n intent: 'support',\n size: 'md',\n shape: 'pill',\n },\n }\n)\n\nexport type TagStylesProps = VariantProps<typeof tagStyles>\n","import { ButtonHTMLAttributes, type PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { tagStyles, type TagStylesProps } from './Tag.styles'\n\ninterface BaseTagProps\n extends PropsWithChildren<ButtonHTMLAttributes<HTMLSpanElement>>,\n TagStylesProps {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n}\n\ninterface FilteredDesignIntent<\n Design extends TagProps['design'],\n K extends TagStylesProps['intent'] | never = never,\n> {\n design?: Design\n intent?: Exclude<TagStylesProps['intent'], K>\n ref?: Ref<HTMLButtonElement>\n}\n\nexport type ValidTagDesignIntent =\n | FilteredDesignIntent<'tinted', 'surface'>\n | FilteredDesignIntent<'outlined', 'surface'>\n | FilteredDesignIntent<'filled'>\n\nexport type TagProps = BaseTagProps & ValidTagDesignIntent\n\nexport const Tag = ({\n design = 'filled',\n intent = 'support',\n size = 'md',\n shape = 'pill',\n asChild,\n className,\n ref,\n ...others\n}: TagProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n data-spark-component=\"tag\"\n ref={ref}\n className={tagStyles({\n className,\n design,\n intent,\n size,\n shape,\n })}\n {...others}\n />\n )\n}\n"],"names":["filledVariants","tw","outlinedVariants","tintedVariants","tagStyles","cva","makeVariants","Tag","design","intent","size","shape","asChild","className","ref","others","Component","Slot","jsx"],"mappings":"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"}