@spark-ui/components 16.2.3 → 17.0.1-beta.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 (196) hide show
  1. package/dist/Button-CXL2NOrq.js +2 -0
  2. package/dist/Button-CXL2NOrq.js.map +1 -0
  3. package/dist/{Button-DPncfbbM.mjs → Button-CcIRizse.mjs} +25 -79
  4. package/dist/Button-CcIRizse.mjs.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-Bfd-6BAD.mjs → IconButton-CP4JbWsI.mjs} +14 -14
  10. package/dist/IconButton-CP4JbWsI.mjs.map +1 -0
  11. package/dist/IconButton-JFDGiOOn.js +2 -0
  12. package/dist/IconButton-JFDGiOOn.js.map +1 -0
  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 +34 -69
  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.js.map +1 -1
  67. package/dist/combobox/index.mjs +41 -41
  68. package/dist/combobox/index.mjs.map +1 -1
  69. package/dist/dialog/index.js +1 -1
  70. package/dist/dialog/index.mjs +2 -2
  71. package/dist/drawer/index.js +1 -1
  72. package/dist/drawer/index.mjs +2 -2
  73. package/dist/dropdown/index.js +1 -1
  74. package/dist/dropdown/index.js.map +1 -1
  75. package/dist/dropdown/index.mjs +2 -2
  76. package/dist/dropdown/index.mjs.map +1 -1
  77. package/dist/file-upload/index.js +1 -1
  78. package/dist/file-upload/index.js.map +1 -1
  79. package/dist/file-upload/index.mjs +4 -4
  80. package/dist/file-upload/index.mjs.map +1 -1
  81. package/dist/form-field/index.js +1 -1
  82. package/dist/form-field/index.mjs +1 -1
  83. package/dist/icon/Icon.styles.d.ts +1 -1
  84. package/dist/icon/index.js +1 -1
  85. package/dist/icon/index.mjs +1 -1
  86. package/dist/icon-button/index.js +1 -1
  87. package/dist/icon-button/index.mjs +1 -1
  88. package/dist/input/index.js +1 -1
  89. package/dist/input/index.js.map +1 -1
  90. package/dist/input/index.mjs +7 -7
  91. package/dist/input/index.mjs.map +1 -1
  92. package/dist/pagination/index.js +1 -1
  93. package/dist/pagination/index.mjs +3 -3
  94. package/dist/popover/PopoverContent.styles.d.ts +1 -1
  95. package/dist/popover/PopoverContext.d.ts +1 -1
  96. package/dist/popover/index.js +1 -1
  97. package/dist/popover/index.js.map +1 -1
  98. package/dist/popover/index.mjs +33 -35
  99. package/dist/popover/index.mjs.map +1 -1
  100. package/dist/progress/ProgressIndicator.d.ts +1 -1
  101. package/dist/progress/index.js +1 -1
  102. package/dist/progress/index.js.map +1 -1
  103. package/dist/progress/index.mjs +42 -43
  104. package/dist/progress/index.mjs.map +1 -1
  105. package/dist/progress-tracker/ProgressTrackerStep.styles.d.ts +1 -1
  106. package/dist/progress-tracker/ProgressTrackerStepIndicator.styles.d.ts +1 -1
  107. package/dist/progress-tracker/index.js +1 -1
  108. package/dist/progress-tracker/index.js.map +1 -1
  109. package/dist/progress-tracker/index.mjs +38 -38
  110. package/dist/progress-tracker/index.mjs.map +1 -1
  111. package/dist/radio-group/RadioIndicator.styles.d.ts +1 -1
  112. package/dist/radio-group/RadioInput.styles.d.ts +1 -1
  113. package/dist/radio-group/index.js +1 -1
  114. package/dist/radio-group/index.js.map +1 -1
  115. package/dist/radio-group/index.mjs +47 -53
  116. package/dist/radio-group/index.mjs.map +1 -1
  117. package/dist/rating/index.js +1 -1
  118. package/dist/rating/index.mjs +1 -1
  119. package/dist/rating-display/index.js +1 -1
  120. package/dist/rating-display/index.mjs +1 -1
  121. package/dist/scrolling-list/index.js +1 -1
  122. package/dist/scrolling-list/index.mjs +3 -3
  123. package/dist/segmented-gauge/SegmentedGauge.d.ts +1 -1
  124. package/dist/segmented-gauge/SegmentedGaugeContext.d.ts +1 -1
  125. package/dist/segmented-gauge/index.js +1 -1
  126. package/dist/segmented-gauge/index.js.map +1 -1
  127. package/dist/segmented-gauge/index.mjs +14 -16
  128. package/dist/segmented-gauge/index.mjs.map +1 -1
  129. package/dist/select/index.js +1 -1
  130. package/dist/select/index.js.map +1 -1
  131. package/dist/select/index.mjs +2 -2
  132. package/dist/select/index.mjs.map +1 -1
  133. package/dist/slider/SliderThumb.styles.d.ts +1 -1
  134. package/dist/slider/SliderTrack.styles.d.ts +1 -1
  135. package/dist/slider/index.js +1 -1
  136. package/dist/slider/index.js.map +1 -1
  137. package/dist/slider/index.mjs +3 -5
  138. package/dist/slider/index.mjs.map +1 -1
  139. package/dist/snackbar/SnackbarItem.styles.d.ts +1 -1
  140. package/dist/snackbar/index.js +1 -1
  141. package/dist/snackbar/index.js.map +1 -1
  142. package/dist/snackbar/index.mjs +24 -35
  143. package/dist/snackbar/index.mjs.map +1 -1
  144. package/dist/snackbar/snackbarVariants.d.ts +0 -8
  145. package/dist/spinner/Spinner.styles.d.ts +1 -1
  146. package/dist/spinner/index.js +1 -1
  147. package/dist/spinner/index.mjs +1 -1
  148. package/dist/stepper/index.js +1 -1
  149. package/dist/stepper/index.mjs +2 -2
  150. package/dist/switch/SwitchInput.styles.d.ts +1 -1
  151. package/dist/switch/index.js +1 -1
  152. package/dist/switch/index.js.map +1 -1
  153. package/dist/switch/index.mjs +22 -23
  154. package/dist/switch/index.mjs.map +1 -1
  155. package/dist/tabs/TabsTrigger.styles.d.ts +1 -1
  156. package/dist/tabs/index.js +1 -1
  157. package/dist/tabs/index.js.map +1 -1
  158. package/dist/tabs/index.mjs +20 -21
  159. package/dist/tabs/index.mjs.map +1 -1
  160. package/dist/tag/Tag.styles.d.ts +1 -1
  161. package/dist/tag/index.js +1 -1
  162. package/dist/tag/index.js.map +1 -1
  163. package/dist/tag/index.mjs +19 -35
  164. package/dist/tag/index.mjs.map +1 -1
  165. package/dist/tag/variants/filled.d.ts +0 -4
  166. package/dist/tag/variants/outlined.d.ts +0 -4
  167. package/dist/tag/variants/tinted.d.ts +0 -4
  168. package/dist/text-link/TextLink.d.ts +1 -1
  169. package/dist/text-link/index.js +1 -1
  170. package/dist/text-link/index.mjs +1 -1
  171. package/dist/textarea/index.js +1 -1
  172. package/dist/textarea/index.js.map +1 -1
  173. package/dist/textarea/index.mjs +10 -14
  174. package/dist/textarea/index.mjs.map +1 -1
  175. package/dist/toast/Toast.styles.d.ts +1 -1
  176. package/dist/toast/index.js +1 -1
  177. package/dist/toast/index.js.map +1 -1
  178. package/dist/toast/index.mjs +25 -37
  179. package/dist/toast/index.mjs.map +1 -1
  180. package/dist/toast/types.d.ts +1 -1
  181. package/package.json +4 -4
  182. package/dist/Button-B6rA3-e5.js +0 -2
  183. package/dist/Button-B6rA3-e5.js.map +0 -1
  184. package/dist/Button-DPncfbbM.mjs.map +0 -1
  185. package/dist/Icon-C23-htlD.mjs.map +0 -1
  186. package/dist/Icon-CF0W0LKr.js +0 -2
  187. package/dist/Icon-CF0W0LKr.js.map +0 -1
  188. package/dist/IconButton-Bfd-6BAD.mjs.map +0 -1
  189. package/dist/IconButton-D3g86WpZ.js +0 -2
  190. package/dist/IconButton-D3g86WpZ.js.map +0 -1
  191. package/dist/Spinner-_Kffli3B.js +0 -2
  192. package/dist/Spinner-_Kffli3B.js.map +0 -1
  193. package/dist/Spinner-aLrtE2JN.mjs.map +0 -1
  194. package/dist/TextLink-C3xDLsbC.js +0 -2
  195. package/dist/TextLink-C3xDLsbC.js.map +0 -1
  196. package/dist/TextLink-D7mOCjY_.mjs.map +0 -1
@@ -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-sm"],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="rounded",asChild:a,className:r,ref:c,...o})=>{const l=a?u.Slot:"span";return d.jsx(l,{"data-spark-component":"tag",ref:c,className:w({className:r,design:n,intent:e,size:s,shape:i}),...o})};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-sm'],\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 = 'rounded',\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,8 +1,8 @@
1
1
  import { jsx as d } from "react/jsx-runtime";
2
- import { S as g } from "../Slot-DLY1rJrG.mjs";
2
+ import { S as u } from "../Slot-DLY1rJrG.mjs";
3
3
  import { tw as t, makeVariants as n } from "@spark-ui/internal-utils";
4
- import { cva as u } from "class-variance-authority";
5
- const f = [
4
+ import { cva as g } from "class-variance-authority";
5
+ const p = [
6
6
  {
7
7
  intent: "main",
8
8
  design: "filled",
@@ -18,11 +18,6 @@ const f = [
18
18
  design: "filled",
19
19
  class: t(["bg-accent", "text-on-accent"])
20
20
  },
21
- {
22
- intent: "basic",
23
- design: "filled",
24
- class: t(["bg-basic", "text-on-basic"])
25
- },
26
21
  {
27
22
  intent: "success",
28
23
  design: "filled",
@@ -53,7 +48,7 @@ const f = [
53
48
  design: "filled",
54
49
  class: t(["bg-surface", "text-on-surface"])
55
50
  }
56
- ], p = [
51
+ ], f = [
57
52
  {
58
53
  intent: "main",
59
54
  design: "outlined",
@@ -69,11 +64,6 @@ const f = [
69
64
  design: "outlined",
70
65
  class: t(["text-accent"])
71
66
  },
72
- {
73
- intent: "basic",
74
- design: "outlined",
75
- class: t(["text-basic"])
76
- },
77
67
  {
78
68
  intent: "success",
79
69
  design: "outlined",
@@ -99,7 +89,7 @@ const f = [
99
89
  design: "outlined",
100
90
  class: t(["text-neutral"])
101
91
  }
102
- ], b = [
92
+ ], m = [
103
93
  {
104
94
  intent: "main",
105
95
  design: "tinted",
@@ -115,11 +105,6 @@ const f = [
115
105
  design: "tinted",
116
106
  class: t(["bg-accent-container", "text-on-accent-container"])
117
107
  },
118
- {
119
- intent: "basic",
120
- design: "tinted",
121
- class: t(["bg-basic-container", "text-on-basic-container"])
122
- },
123
108
  {
124
109
  intent: "success",
125
110
  design: "tinted",
@@ -145,7 +130,7 @@ const f = [
145
130
  design: "tinted",
146
131
  class: t(["bg-neutral-container", "text-on-neutral-container"])
147
132
  }
148
- ], x = u(
133
+ ], x = g(
149
134
  [
150
135
  "box-border default:inline-flex default:w-fit items-center justify-center gap-sm whitespace-nowrap",
151
136
  "text-caption font-bold",
@@ -170,7 +155,7 @@ const f = [
170
155
  }),
171
156
  shape: n({
172
157
  square: [],
173
- rounded: ["rounded-md"],
158
+ rounded: ["rounded-sm"],
174
159
  pill: ["rounded-full"]
175
160
  }),
176
161
  /**
@@ -180,7 +165,6 @@ const f = [
180
165
  main: [],
181
166
  support: [],
182
167
  accent: [],
183
- basic: [],
184
168
  success: [],
185
169
  alert: [],
186
170
  danger: [],
@@ -189,36 +173,36 @@ const f = [
189
173
  surface: []
190
174
  })
191
175
  },
192
- compoundVariants: [...f, ...p, ...b],
176
+ compoundVariants: [...p, ...f, ...m],
193
177
  defaultVariants: {
194
178
  design: "filled",
195
- intent: "basic",
179
+ intent: "support",
196
180
  size: "md",
197
181
  shape: "pill"
198
182
  }
199
183
  }
200
184
  ), S = ({
201
185
  design: e = "filled",
202
- intent: s = "basic",
186
+ intent: s = "support",
203
187
  size: i = "md",
204
- shape: a = "pill",
205
- asChild: c,
206
- className: o,
207
- ref: l,
208
- ...r
188
+ shape: a = "rounded",
189
+ asChild: o,
190
+ className: r,
191
+ ref: c,
192
+ ...l
209
193
  }) => /* @__PURE__ */ d(
210
- c ? g : "span",
194
+ o ? u : "span",
211
195
  {
212
196
  "data-spark-component": "tag",
213
- ref: l,
197
+ ref: c,
214
198
  className: x({
215
- className: o,
199
+ className: r,
216
200
  design: e,
217
201
  intent: s,
218
202
  size: i,
219
203
  shape: a
220
204
  }),
221
- ...r
205
+ ...l
222
206
  }
223
207
  );
224
208
  export {
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","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","jsx","Slot"],"mappings":"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"}
1
+ {"version":3,"file":"index.mjs","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-sm'],\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 = 'rounded',\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","jsx","Slot"],"mappings":"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"}
@@ -10,10 +10,6 @@ export declare const filledVariants: readonly [{
10
10
  readonly intent: "accent";
11
11
  readonly design: "filled";
12
12
  readonly class: string[];
13
- }, {
14
- readonly intent: "basic";
15
- readonly design: "filled";
16
- readonly class: string[];
17
13
  }, {
18
14
  readonly intent: "success";
19
15
  readonly design: "filled";
@@ -10,10 +10,6 @@ export declare const outlinedVariants: readonly [{
10
10
  readonly intent: "accent";
11
11
  readonly design: "outlined";
12
12
  readonly class: string[];
13
- }, {
14
- readonly intent: "basic";
15
- readonly design: "outlined";
16
- readonly class: string[];
17
13
  }, {
18
14
  readonly intent: "success";
19
15
  readonly design: "outlined";
@@ -10,10 +10,6 @@ export declare const tintedVariants: readonly [{
10
10
  readonly intent: "accent";
11
11
  readonly design: "tinted";
12
12
  readonly class: string[];
13
- }, {
14
- readonly intent: "basic";
15
- readonly design: "tinted";
16
- readonly class: string[];
17
13
  }, {
18
14
  readonly intent: "success";
19
15
  readonly design: "tinted";
@@ -1,7 +1,7 @@
1
1
  import { VariantProps } from 'class-variance-authority';
2
2
  import { ComponentPropsWithRef } from 'react';
3
3
  declare const textLinkStyles: (props?: ({
4
- intent?: "main" | "current" | "alert" | "support" | "accent" | "basic" | "success" | "info" | "neutral" | "danger" | null | undefined;
4
+ intent?: "main" | "current" | "alert" | "support" | "accent" | "success" | "info" | "neutral" | "danger" | null | undefined;
5
5
  bold?: boolean | null | undefined;
6
6
  underline?: boolean | null | undefined;
7
7
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../TextLink-C3xDLsbC.js");exports.TextLink=e.TextLink;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../TextLink-5MvP0P8D.js");exports.TextLink=e.TextLink;
2
2
  //# sourceMappingURL=index.js.map
@@ -1,4 +1,4 @@
1
- import { T as r } from "../TextLink-D7mOCjY_.mjs";
1
+ import { T as r } from "../TextLink-Cc_LeVcx.mjs";
2
2
  export {
3
3
  r as TextLink
4
4
  };
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),e=require("../input/index.js"),g=require("class-variance-authority"),t=a=>r.jsx(e.InputGroup.ClearButton,{inline:!0,"data-spark-component":"textarea-group-trailing-icon",...a});t.id=e.InputGroup.ClearButton.id;t.displayName="TextareaGroup.ClearButton";const i=a=>r.jsx(e.InputGroup,{...a});i.displayName="TextareaGroup";const n=a=>r.jsx(e.InputGroup.LeadingIcon,{"data-spark-component":"textarea-group-leading-icon",...a});n.id=e.InputGroup.LeadingIcon.id;n.displayName="TextareaGroup.LeadingIcon";const o=a=>r.jsx(e.InputGroup.TrailingIcon,{"data-spark-component":"textarea-group-trailing-icon",...a});o.id=e.InputGroup.TrailingIcon.id;o.displayName="TextareaGroup.TrailingIcon";const u=({className:a,disabled:s,rows:c=1,isResizable:d=!0,ref:l,onValueChange:x,...T})=>r.jsx(e.Input,{className:g.cx(a,"py-[var(--spacing-sz-10)]",d?"resize-y":"resize-none"),"data-spark-component":"textarea",disabled:s,asChild:!0,onValueChange:x,children:r.jsx("textarea",{ref:l,rows:c,...T})}),I=Object.assign(u,{id:e.Input.id});u.displayName="Textarea";const p=Object.assign(i,{LeadingIcon:n,TrailingIcon:o,ClearButton:t});p.displayName="TextareaGroup";n.displayName="TextareaGroup.LeadingIcon";o.displayName="TextareaGroup.TrailingIcon";t.displayName="TextareaGroup.ClearButton";exports.Textarea=I;exports.TextareaGroup=p;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),e=require("../input/index.js"),g=require("class-variance-authority"),t=a=>r.jsx(e.InputGroup.ClearButton,{inline:!0,"data-spark-component":"textarea-group-trailing-icon",...a});t.id=e.InputGroup.ClearButton.id;t.displayName="TextareaGroup.ClearButton";const i=a=>r.jsx(e.InputGroup,{...a});i.displayName="TextareaGroup";const n=a=>r.jsx(e.InputGroup.LeadingIcon,{"data-spark-component":"textarea-group-leading-icon",...a});n.id=e.InputGroup.LeadingIcon.id;n.displayName="TextareaGroup.LeadingIcon";const o=a=>r.jsx(e.InputGroup.TrailingIcon,{"data-spark-component":"textarea-group-trailing-icon",...a});o.id=e.InputGroup.TrailingIcon.id;o.displayName="TextareaGroup.TrailingIcon";const u=({className:a,disabled:s,rows:c=1,isResizable:d=!0,ref:l,onValueChange:x,...T})=>r.jsx(e.Input,{className:g.cx(a,"py-sz-10 rounded-xl!",d?"resize-y":"resize-none"),"data-spark-component":"textarea",disabled:s,asChild:!0,onValueChange:x,children:r.jsx("textarea",{ref:l,rows:c,...T})}),I=Object.assign(u,{id:e.Input.id});u.displayName="Textarea";const p=Object.assign(i,{LeadingIcon:n,TrailingIcon:o,ClearButton:t});p.displayName="TextareaGroup";n.displayName="TextareaGroup.LeadingIcon";o.displayName="TextareaGroup.TrailingIcon";t.displayName="TextareaGroup.ClearButton";exports.Textarea=I;exports.TextareaGroup=p;
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/textarea/TextareaClearButton.tsx","../../src/textarea/TextareaGroup.tsx","../../src/textarea/TextareaLeadingIcon.tsx","../../src/textarea/TextareaTrailingIcon.tsx","../../src/textarea/Textarea.tsx","../../src/textarea/index.ts"],"sourcesContent":["import { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { InputGroup } from '../input'\n\nexport interface TextareaClearButtonProps extends ComponentPropsWithoutRef<'button'> {\n 'aria-label': string\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const TextareaClearButton = (props: TextareaClearButtonProps) => {\n return (\n <InputGroup.ClearButton inline data-spark-component=\"textarea-group-trailing-icon\" {...props} />\n )\n}\n\nTextareaClearButton.id = InputGroup.ClearButton.id\nTextareaClearButton.displayName = 'TextareaGroup.ClearButton'\n","import { InputGroup, InputGroupProps } from '../input'\n\nexport type TextareaGroupProps = InputGroupProps\n\nexport const TextareaGroup = (props: TextareaGroupProps) => {\n return <InputGroup {...props} />\n}\n\nTextareaGroup.displayName = 'TextareaGroup'\n","import { InputGroup, InputLeadingIconProps } from '../input'\n\nexport type TextareaLeadingIconProps = InputLeadingIconProps\n\nexport const TextareaLeadingIcon = (props: InputLeadingIconProps) => {\n return <InputGroup.LeadingIcon data-spark-component=\"textarea-group-leading-icon\" {...props} />\n}\n\nTextareaLeadingIcon.id = InputGroup.LeadingIcon.id\nTextareaLeadingIcon.displayName = 'TextareaGroup.LeadingIcon'\n","import { InputGroup, InputTrailingIconProps } from '../input'\n\nexport type TextareaTrailingIconProps = InputTrailingIconProps\n\nexport const TextareaTrailingIcon = (props: InputTrailingIconProps) => {\n return <InputGroup.TrailingIcon data-spark-component=\"textarea-group-trailing-icon\" {...props} />\n}\n\nTextareaTrailingIcon.id = InputGroup.TrailingIcon.id\nTextareaTrailingIcon.displayName = 'TextareaGroup.TrailingIcon'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, PropsWithChildren, Ref } from 'react'\n\nimport { Input, InputProps } from '../input'\n\ntype TextareaPrimitiveProps = ComponentPropsWithoutRef<'textarea'>\n\nexport interface TextareaProps extends TextareaPrimitiveProps, Pick<InputProps, 'onValueChange'> {\n isResizable?: boolean\n ref?: Ref<HTMLTextAreaElement>\n}\n\nconst Root = ({\n className,\n disabled,\n rows = 1,\n isResizable = true,\n ref,\n onValueChange,\n ...others\n}: PropsWithChildren<TextareaProps>) => {\n return (\n <Input\n className={cx(\n className,\n 'py-[var(--spacing-sz-10)]',\n isResizable ? 'resize-y' : 'resize-none'\n )}\n data-spark-component=\"textarea\"\n disabled={disabled}\n asChild\n onValueChange={onValueChange}\n >\n <textarea ref={ref} rows={rows} {...others} />\n </Input>\n )\n}\n\nexport const Textarea = Object.assign(Root, {\n id: Input.id,\n})\n\nRoot.displayName = 'Textarea'\n","import { TextareaClearButton } from './TextareaClearButton'\nimport { TextareaGroup as Root } from './TextareaGroup'\nimport { TextareaLeadingIcon } from './TextareaLeadingIcon'\nimport { TextareaTrailingIcon } from './TextareaTrailingIcon'\n\nexport * from './Textarea'\n\nexport const TextareaGroup: typeof Root & {\n LeadingIcon: typeof TextareaLeadingIcon\n TrailingIcon: typeof TextareaTrailingIcon\n ClearButton: typeof TextareaClearButton\n} = Object.assign(Root, {\n LeadingIcon: TextareaLeadingIcon,\n TrailingIcon: TextareaTrailingIcon,\n ClearButton: TextareaClearButton,\n})\n\nTextareaGroup.displayName = 'TextareaGroup'\nTextareaLeadingIcon.displayName = 'TextareaGroup.LeadingIcon'\nTextareaTrailingIcon.displayName = 'TextareaGroup.TrailingIcon'\nTextareaClearButton.displayName = 'TextareaGroup.ClearButton'\n\nexport { type TextareaGroupProps } from './TextareaGroup'\nexport { type TextareaLeadingIconProps } from './TextareaLeadingIcon'\nexport { type TextareaTrailingIconProps } from './TextareaTrailingIcon'\nexport { type TextareaClearButtonProps } from './TextareaClearButton'\n"],"names":["TextareaClearButton","props","jsx","InputGroup","TextareaGroup","TextareaLeadingIcon","TextareaTrailingIcon","Root","className","disabled","rows","isResizable","ref","onValueChange","others","Input","cx","Textarea"],"mappings":"0LASaA,EAAuBC,GAEhCC,EAAAA,IAACC,aAAW,YAAX,CAAuB,OAAM,GAAC,uBAAqB,+BAAgC,GAAGF,EAAO,EAIlGD,EAAoB,GAAKG,aAAW,YAAY,GAChDH,EAAoB,YAAc,4BCZ3B,MAAMI,EAAiBH,GACrBC,MAACC,EAAAA,WAAA,CAAY,GAAGF,CAAA,CAAO,EAGhCG,EAAc,YAAc,gBCJrB,MAAMC,EAAuBJ,SAC1BE,EAAAA,WAAW,YAAX,CAAuB,uBAAqB,8BAA+B,GAAGF,EAAO,EAG/FI,EAAoB,GAAKF,aAAW,YAAY,GAChDE,EAAoB,YAAc,4BCL3B,MAAMC,EAAwBL,SAC3BE,EAAAA,WAAW,aAAX,CAAwB,uBAAqB,+BAAgC,GAAGF,EAAO,EAGjGK,EAAqB,GAAKH,aAAW,aAAa,GAClDG,EAAqB,YAAc,6BCGnC,MAAMC,EAAO,CAAC,CACZ,UAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,EACP,YAAAC,EAAc,GACd,IAAAC,EACA,cAAAC,EACA,GAAGC,CACL,IAEIZ,EAAAA,IAACa,EAAAA,MAAA,CACC,UAAWC,EAAAA,GACTR,EACA,4BACAG,EAAc,WAAa,aAAA,EAE7B,uBAAqB,WACrB,SAAAF,EACA,QAAO,GACP,cAAAI,EAEA,SAAAX,EAAAA,IAAC,WAAA,CAAS,IAAAU,EAAU,KAAAF,EAAa,GAAGI,CAAA,CAAQ,CAAA,CAAA,EAKrCG,EAAW,OAAO,OAAOV,EAAM,CAC1C,GAAIQ,EAAAA,MAAM,EACZ,CAAC,EAEDR,EAAK,YAAc,WCnCZ,MAAMH,EAIT,OAAO,OAAOG,EAAM,CACtB,YAAaF,EACb,aAAcC,EACd,YAAaN,CACf,CAAC,EAEDI,EAAc,YAAc,gBAC5BC,EAAoB,YAAc,4BAClCC,EAAqB,YAAc,6BACnCN,EAAoB,YAAc"}
1
+ {"version":3,"file":"index.js","sources":["../../src/textarea/TextareaClearButton.tsx","../../src/textarea/TextareaGroup.tsx","../../src/textarea/TextareaLeadingIcon.tsx","../../src/textarea/TextareaTrailingIcon.tsx","../../src/textarea/Textarea.tsx","../../src/textarea/index.ts"],"sourcesContent":["import { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { InputGroup } from '../input'\n\nexport interface TextareaClearButtonProps extends ComponentPropsWithoutRef<'button'> {\n 'aria-label': string\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const TextareaClearButton = (props: TextareaClearButtonProps) => {\n return (\n <InputGroup.ClearButton inline data-spark-component=\"textarea-group-trailing-icon\" {...props} />\n )\n}\n\nTextareaClearButton.id = InputGroup.ClearButton.id\nTextareaClearButton.displayName = 'TextareaGroup.ClearButton'\n","import { InputGroup, InputGroupProps } from '../input'\n\nexport type TextareaGroupProps = InputGroupProps\n\nexport const TextareaGroup = (props: TextareaGroupProps) => {\n return <InputGroup {...props} />\n}\n\nTextareaGroup.displayName = 'TextareaGroup'\n","import { InputGroup, InputLeadingIconProps } from '../input'\n\nexport type TextareaLeadingIconProps = InputLeadingIconProps\n\nexport const TextareaLeadingIcon = (props: InputLeadingIconProps) => {\n return <InputGroup.LeadingIcon data-spark-component=\"textarea-group-leading-icon\" {...props} />\n}\n\nTextareaLeadingIcon.id = InputGroup.LeadingIcon.id\nTextareaLeadingIcon.displayName = 'TextareaGroup.LeadingIcon'\n","import { InputGroup, InputTrailingIconProps } from '../input'\n\nexport type TextareaTrailingIconProps = InputTrailingIconProps\n\nexport const TextareaTrailingIcon = (props: InputTrailingIconProps) => {\n return <InputGroup.TrailingIcon data-spark-component=\"textarea-group-trailing-icon\" {...props} />\n}\n\nTextareaTrailingIcon.id = InputGroup.TrailingIcon.id\nTextareaTrailingIcon.displayName = 'TextareaGroup.TrailingIcon'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, PropsWithChildren, Ref } from 'react'\n\nimport { Input, InputProps } from '../input'\n\ntype TextareaPrimitiveProps = ComponentPropsWithoutRef<'textarea'>\n\nexport interface TextareaProps extends TextareaPrimitiveProps, Pick<InputProps, 'onValueChange'> {\n isResizable?: boolean\n ref?: Ref<HTMLTextAreaElement>\n}\n\nconst Root = ({\n className,\n disabled,\n rows = 1,\n isResizable = true,\n ref,\n onValueChange,\n ...others\n}: PropsWithChildren<TextareaProps>) => {\n return (\n <Input\n className={cx(className, 'py-sz-10 rounded-xl!', isResizable ? 'resize-y' : 'resize-none')}\n data-spark-component=\"textarea\"\n disabled={disabled}\n asChild\n onValueChange={onValueChange}\n >\n <textarea ref={ref} rows={rows} {...others} />\n </Input>\n )\n}\n\nexport const Textarea = Object.assign(Root, {\n id: Input.id,\n})\n\nRoot.displayName = 'Textarea'\n","import { TextareaClearButton } from './TextareaClearButton'\nimport { TextareaGroup as Root } from './TextareaGroup'\nimport { TextareaLeadingIcon } from './TextareaLeadingIcon'\nimport { TextareaTrailingIcon } from './TextareaTrailingIcon'\n\nexport * from './Textarea'\n\nexport const TextareaGroup: typeof Root & {\n LeadingIcon: typeof TextareaLeadingIcon\n TrailingIcon: typeof TextareaTrailingIcon\n ClearButton: typeof TextareaClearButton\n} = Object.assign(Root, {\n LeadingIcon: TextareaLeadingIcon,\n TrailingIcon: TextareaTrailingIcon,\n ClearButton: TextareaClearButton,\n})\n\nTextareaGroup.displayName = 'TextareaGroup'\nTextareaLeadingIcon.displayName = 'TextareaGroup.LeadingIcon'\nTextareaTrailingIcon.displayName = 'TextareaGroup.TrailingIcon'\nTextareaClearButton.displayName = 'TextareaGroup.ClearButton'\n\nexport { type TextareaGroupProps } from './TextareaGroup'\nexport { type TextareaLeadingIconProps } from './TextareaLeadingIcon'\nexport { type TextareaTrailingIconProps } from './TextareaTrailingIcon'\nexport { type TextareaClearButtonProps } from './TextareaClearButton'\n"],"names":["TextareaClearButton","props","jsx","InputGroup","TextareaGroup","TextareaLeadingIcon","TextareaTrailingIcon","Root","className","disabled","rows","isResizable","ref","onValueChange","others","Input","cx","Textarea"],"mappings":"0LASaA,EAAuBC,GAEhCC,EAAAA,IAACC,aAAW,YAAX,CAAuB,OAAM,GAAC,uBAAqB,+BAAgC,GAAGF,EAAO,EAIlGD,EAAoB,GAAKG,aAAW,YAAY,GAChDH,EAAoB,YAAc,4BCZ3B,MAAMI,EAAiBH,GACrBC,MAACC,EAAAA,WAAA,CAAY,GAAGF,CAAA,CAAO,EAGhCG,EAAc,YAAc,gBCJrB,MAAMC,EAAuBJ,SAC1BE,EAAAA,WAAW,YAAX,CAAuB,uBAAqB,8BAA+B,GAAGF,EAAO,EAG/FI,EAAoB,GAAKF,aAAW,YAAY,GAChDE,EAAoB,YAAc,4BCL3B,MAAMC,EAAwBL,SAC3BE,EAAAA,WAAW,aAAX,CAAwB,uBAAqB,+BAAgC,GAAGF,EAAO,EAGjGK,EAAqB,GAAKH,aAAW,aAAa,GAClDG,EAAqB,YAAc,6BCGnC,MAAMC,EAAO,CAAC,CACZ,UAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,EACP,YAAAC,EAAc,GACd,IAAAC,EACA,cAAAC,EACA,GAAGC,CACL,IAEIZ,EAAAA,IAACa,EAAAA,MAAA,CACC,UAAWC,EAAAA,GAAGR,EAAW,uBAAwBG,EAAc,WAAa,aAAa,EACzF,uBAAqB,WACrB,SAAAF,EACA,QAAO,GACP,cAAAI,EAEA,SAAAX,EAAAA,IAAC,WAAA,CAAS,IAAAU,EAAU,KAAAF,EAAa,GAAGI,CAAA,CAAQ,CAAA,CAAA,EAKrCG,EAAW,OAAO,OAAOV,EAAM,CAC1C,GAAIQ,EAAAA,MAAM,EACZ,CAAC,EAEDR,EAAK,YAAc,WC/BZ,MAAMH,EAIT,OAAO,OAAOG,EAAM,CACtB,YAAaF,EACb,aAAcC,EACd,YAAaN,CACf,CAAC,EAEDI,EAAc,YAAc,gBAC5BC,EAAoB,YAAc,4BAClCC,EAAqB,YAAc,6BACnCN,EAAoB,YAAc"}