@spark-ui/components 16.2.2 → 17.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{Button-DPncfbbM.mjs → Button-1M9DcZl0.mjs} +25 -79
- package/dist/Button-1M9DcZl0.mjs.map +1 -0
- package/dist/Button-FZceRWG2.js +2 -0
- package/dist/Button-FZceRWG2.js.map +1 -0
- package/dist/{Icon-C23-htlD.mjs → Icon-BO327oHU.mjs} +8 -9
- package/dist/Icon-BO327oHU.mjs.map +1 -0
- package/dist/Icon-C-cNTnzd.js +2 -0
- package/dist/Icon-C-cNTnzd.js.map +1 -0
- package/dist/{IconButton-D3g86WpZ.js → IconButton-BR1bJSQA.js} +2 -2
- package/dist/{IconButton-D3g86WpZ.js.map → IconButton-BR1bJSQA.js.map} +1 -1
- package/dist/{IconButton-Bfd-6BAD.mjs → IconButton-DdB3Pq13.mjs} +2 -2
- package/dist/{IconButton-Bfd-6BAD.mjs.map → IconButton-DdB3Pq13.mjs.map} +1 -1
- package/dist/Spinner-Br4Rp9V2.js +2 -0
- package/dist/Spinner-Br4Rp9V2.js.map +1 -0
- package/dist/{Spinner-aLrtE2JN.mjs → Spinner-Co3AjkQV.mjs} +7 -8
- package/dist/Spinner-Co3AjkQV.mjs.map +1 -0
- package/dist/TextLink-5MvP0P8D.js +2 -0
- package/dist/TextLink-5MvP0P8D.js.map +1 -0
- package/dist/{TextLink-D7mOCjY_.mjs → TextLink-Cc_LeVcx.mjs} +10 -11
- package/dist/TextLink-Cc_LeVcx.mjs.map +1 -0
- package/dist/accordion/index.js +1 -1
- package/dist/accordion/index.mjs +1 -1
- package/dist/avatar/index.js +1 -1
- package/dist/avatar/index.mjs +2 -2
- package/dist/badge/BadgeItem.styles.d.ts +1 -1
- package/dist/badge/index.js +1 -1
- package/dist/badge/index.js.map +1 -1
- package/dist/badge/index.mjs +10 -11
- package/dist/badge/index.mjs.map +1 -1
- package/dist/breadcrumb/index.js +1 -1
- package/dist/breadcrumb/index.mjs +2 -2
- package/dist/button/Button.styles.d.ts +1 -1
- package/dist/button/index.js +1 -1
- package/dist/button/index.mjs +1 -1
- package/dist/button/variants/contrast.d.ts +0 -4
- package/dist/button/variants/filled.d.ts +0 -4
- package/dist/button/variants/ghost.d.ts +0 -4
- package/dist/button/variants/outlined.d.ts +0 -4
- package/dist/button/variants/tinted.d.ts +0 -4
- package/dist/card/Backdrop.d.ts +1 -1
- package/dist/card/Card.styles.d.ts +1 -1
- package/dist/card/Content.styles.d.ts +1 -1
- package/dist/card/index.js +1 -1
- package/dist/card/index.js.map +1 -1
- package/dist/card/index.mjs +12 -31
- package/dist/card/index.mjs.map +1 -1
- package/dist/carousel/CarouselPageIndicator.d.ts +1 -1
- package/dist/carousel/index.js +1 -1
- package/dist/carousel/index.js.map +1 -1
- package/dist/carousel/index.mjs +29 -29
- package/dist/carousel/index.mjs.map +1 -1
- package/dist/checkbox/CheckboxInput.styles.d.ts +1 -1
- package/dist/checkbox/index.js +1 -1
- package/dist/checkbox/index.js.map +1 -1
- package/dist/checkbox/index.mjs +26 -33
- package/dist/checkbox/index.mjs.map +1 -1
- package/dist/chip/Chip.styles.d.ts +1 -1
- package/dist/chip/index.js +1 -1
- package/dist/chip/index.js.map +1 -1
- package/dist/chip/index.mjs +33 -68
- package/dist/chip/index.mjs.map +1 -1
- package/dist/chip/variants/dashed.d.ts +0 -4
- package/dist/chip/variants/outlined.d.ts +0 -4
- package/dist/chip/variants/tinted.d.ts +0 -4
- package/dist/combobox/index.js +1 -1
- package/dist/combobox/index.mjs +3 -3
- package/dist/dialog/index.js +1 -1
- package/dist/dialog/index.mjs +2 -2
- package/dist/drawer/index.js +1 -1
- package/dist/drawer/index.mjs +2 -2
- package/dist/dropdown/index.js +1 -1
- package/dist/dropdown/index.mjs +1 -1
- package/dist/file-upload/index.js +1 -1
- package/dist/file-upload/index.js.map +1 -1
- package/dist/file-upload/index.mjs +4 -4
- package/dist/file-upload/index.mjs.map +1 -1
- package/dist/form-field/index.js +1 -1
- package/dist/form-field/index.mjs +1 -1
- package/dist/icon/Icon.styles.d.ts +1 -1
- package/dist/icon/index.js +1 -1
- package/dist/icon/index.mjs +1 -1
- package/dist/icon-button/index.js +1 -1
- package/dist/icon-button/index.mjs +1 -1
- package/dist/input/index.js +1 -1
- package/dist/input/index.mjs +1 -1
- package/dist/pagination/index.js +1 -1
- package/dist/pagination/index.mjs +3 -3
- package/dist/popover/PopoverContent.styles.d.ts +1 -1
- package/dist/popover/PopoverContext.d.ts +1 -1
- package/dist/popover/index.js +1 -1
- package/dist/popover/index.js.map +1 -1
- package/dist/popover/index.mjs +33 -35
- package/dist/popover/index.mjs.map +1 -1
- package/dist/progress/ProgressIndicator.d.ts +1 -1
- package/dist/progress/index.js +1 -1
- package/dist/progress/index.js.map +1 -1
- package/dist/progress/index.mjs +42 -43
- package/dist/progress/index.mjs.map +1 -1
- package/dist/progress-tracker/ProgressTrackerStep.styles.d.ts +1 -1
- package/dist/progress-tracker/ProgressTrackerStepIndicator.styles.d.ts +1 -1
- package/dist/progress-tracker/index.js +1 -1
- package/dist/progress-tracker/index.js.map +1 -1
- package/dist/progress-tracker/index.mjs +38 -38
- package/dist/progress-tracker/index.mjs.map +1 -1
- package/dist/radio-group/RadioIndicator.styles.d.ts +1 -1
- package/dist/radio-group/RadioInput.styles.d.ts +1 -1
- package/dist/radio-group/index.js +1 -1
- package/dist/radio-group/index.js.map +1 -1
- package/dist/radio-group/index.mjs +47 -53
- package/dist/radio-group/index.mjs.map +1 -1
- package/dist/rating/index.js +1 -1
- package/dist/rating/index.mjs +1 -1
- package/dist/rating-display/index.js +1 -1
- package/dist/rating-display/index.mjs +1 -1
- package/dist/scrolling-list/index.js +1 -1
- package/dist/scrolling-list/index.mjs +3 -3
- package/dist/segmented-gauge/SegmentedGauge.d.ts +1 -1
- package/dist/segmented-gauge/SegmentedGaugeContext.d.ts +1 -1
- package/dist/segmented-gauge/index.js +1 -1
- package/dist/segmented-gauge/index.js.map +1 -1
- package/dist/segmented-gauge/index.mjs +14 -16
- package/dist/segmented-gauge/index.mjs.map +1 -1
- package/dist/select/index.js +1 -1
- package/dist/select/index.mjs +1 -1
- package/dist/slider/SliderThumb.styles.d.ts +1 -1
- package/dist/slider/SliderTrack.styles.d.ts +1 -1
- package/dist/slider/index.js +1 -1
- package/dist/slider/index.js.map +1 -1
- package/dist/slider/index.mjs +3 -5
- package/dist/slider/index.mjs.map +1 -1
- package/dist/snackbar/SnackbarItem.styles.d.ts +1 -1
- package/dist/snackbar/index.js +1 -1
- package/dist/snackbar/index.js.map +1 -1
- package/dist/snackbar/index.mjs +24 -35
- package/dist/snackbar/index.mjs.map +1 -1
- package/dist/snackbar/snackbarVariants.d.ts +0 -8
- package/dist/spinner/Spinner.styles.d.ts +1 -1
- package/dist/spinner/index.js +1 -1
- package/dist/spinner/index.mjs +1 -1
- package/dist/stepper/index.js +1 -1
- package/dist/stepper/index.mjs +2 -2
- package/dist/switch/SwitchInput.d.ts +7 -5
- package/dist/switch/SwitchInput.styles.d.ts +1 -1
- package/dist/switch/index.js +1 -1
- package/dist/switch/index.js.map +1 -1
- package/dist/switch/index.mjs +80 -91
- package/dist/switch/index.mjs.map +1 -1
- package/dist/tabs/TabsTrigger.styles.d.ts +1 -1
- package/dist/tabs/index.js +1 -1
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs +20 -21
- package/dist/tabs/index.mjs.map +1 -1
- package/dist/tag/Tag.styles.d.ts +1 -1
- package/dist/tag/index.js +1 -1
- package/dist/tag/index.js.map +1 -1
- package/dist/tag/index.mjs +15 -31
- package/dist/tag/index.mjs.map +1 -1
- package/dist/tag/variants/filled.d.ts +0 -4
- package/dist/tag/variants/outlined.d.ts +0 -4
- package/dist/tag/variants/tinted.d.ts +0 -4
- package/dist/text-link/TextLink.d.ts +1 -1
- package/dist/text-link/index.js +1 -1
- package/dist/text-link/index.mjs +1 -1
- package/dist/toast/Toast.styles.d.ts +1 -1
- package/dist/toast/index.js +1 -1
- package/dist/toast/index.js.map +1 -1
- package/dist/toast/index.mjs +25 -37
- package/dist/toast/index.mjs.map +1 -1
- package/dist/toast/types.d.ts +1 -1
- package/package.json +4 -4
- package/dist/Button-B6rA3-e5.js +0 -2
- package/dist/Button-B6rA3-e5.js.map +0 -1
- package/dist/Button-DPncfbbM.mjs.map +0 -1
- package/dist/Icon-C23-htlD.mjs.map +0 -1
- package/dist/Icon-CF0W0LKr.js +0 -2
- package/dist/Icon-CF0W0LKr.js.map +0 -1
- package/dist/Spinner-_Kffli3B.js +0 -2
- package/dist/Spinner-_Kffli3B.js.map +0 -1
- package/dist/Spinner-aLrtE2JN.mjs.map +0 -1
- package/dist/TextLink-C3xDLsbC.js +0 -2
- package/dist/TextLink-C3xDLsbC.js.map +0 -1
- package/dist/TextLink-D7mOCjY_.mjs.map +0 -1
package/dist/tabs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/tabs/TabsContext.tsx","../../src/tabs/TabsRoot.styles.ts","../../src/tabs/Tabs.tsx","../../src/tabs/TabsContent.styles.ts","../../src/tabs/TabsContent.tsx","../../src/tabs/TabsList.styles.ts","../../src/tabs/useResizeObserver.ts","../../src/tabs/TabsList.tsx","../../src/tabs/TabsPopoverAbstraction.tsx","../../src/tabs/TabsTrigger.styles.ts","../../src/tabs/TabsTrigger.tsx","../../src/tabs/index.ts"],"sourcesContent":["import { Tabs as RadixTabs } from 'radix-ui'\nimport { createContext, useContext } from 'react'\n\nimport type { TabsTriggerVariantsProps } from './TabsTrigger.styles'\n\nexport type TabsContextInterface = TabsTriggerVariantsProps &\n Pick<RadixTabs.TabsProps, 'orientation'> & {\n forceMount?: boolean\n }\n\nexport const TabsContext = createContext<TabsContextInterface>({} as TabsContextInterface)\n\nexport const useTabsContext = () => {\n const context = useContext(TabsContext)\n\n if (!context) {\n throw Error('useTabsContext must be used within a TabsContext Provider')\n }\n\n return context\n}\n","import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n 'flex',\n 'data-[orientation=horizontal]:flex-col',\n 'data-[orientation=vertical]:flex-row',\n 'max-w-full',\n])\n","import { Tabs as RadixTabs } from 'radix-ui'\nimport { type PropsWithChildren, Ref } from 'react'\n\nimport { TabsContext } from './TabsContext'\nimport { rootStyles } from './TabsRoot.styles'\nimport type { TabsTriggerVariantsProps } from './TabsTrigger.styles'\n\nexport interface TabsProps\n extends Omit<RadixTabs.TabsProps, 'activationMode'>,\n PropsWithChildren<Omit<TabsTriggerVariantsProps, 'orientation'>> {\n /**\n * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n * @default false\n */\n asChild?: boolean\n /**\n * Whether to keep inactive tabs content in the DOM.\n * @default false\n */\n forceMount?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * @deprecated\n */\nexport type TabsRootProps = TabsProps\n\nexport const Tabs = ({\n intent = 'basic',\n size = 'md',\n /**\n * Default Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#root\n */\n asChild = false,\n forceMount = false,\n orientation = 'horizontal',\n children,\n className,\n ref,\n ...rest\n}: TabsProps) => {\n return (\n <TabsContext.Provider\n value={{\n intent,\n size,\n orientation,\n forceMount,\n }}\n >\n <RadixTabs.Root\n ref={ref}\n asChild={asChild}\n orientation={orientation}\n className={rootStyles({ className })}\n data-spark-component=\"tabs\"\n activationMode=\"automatic\"\n {...rest}\n >\n {children}\n </RadixTabs.Root>\n </TabsContext.Provider>\n )\n}\n\nTabs.displayName = 'Tabs'\n","import { cva } from 'class-variance-authority'\n\nexport const contentStyles = cva(['w-full p-lg', 'focus-visible:u-outline-inset'], {\n variants: {\n forceMount: {\n true: 'data-[state=inactive]:hidden',\n false: '',\n },\n },\n})\n","import { Tabs as RadixTabs } from 'radix-ui'\nimport { type PropsWithChildren, Ref } from 'react'\n\nimport { contentStyles } from './TabsContent.styles'\nimport { useTabsContext } from './TabsContext'\n\nexport interface TabsContentProps\n extends PropsWithChildren<Omit<RadixTabs.TabsContentProps, 'forceMount'>> {\n /**\n * A unique value that associates the content with a trigger.\n */\n value: string\n /**\n * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n * @default false\n */\n asChild?: boolean\n /**\n * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n */\n forceMount?: true\n ref?: Ref<HTMLDivElement>\n}\n\nexport const TabsContent = ({\n /**\n * Default Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#content\n */\n children,\n asChild = false,\n className,\n ref,\n ...rest\n}: TabsContentProps) => {\n const { forceMount } = useTabsContext()\n\n return (\n <RadixTabs.Content\n data-spark-component=\"tabs-content\"\n ref={ref}\n forceMount={forceMount || rest.forceMount}\n className={contentStyles({ className, forceMount })}\n asChild={asChild}\n {...rest}\n >\n {children}\n </RadixTabs.Content>\n )\n}\n\nTabsContent.displayName = 'Tabs.Content'\n","import { cva } from 'class-variance-authority'\n\nexport const wrapperStyles = cva(['relative flex'])\n\nexport const listStyles = cva([\n 'flex w-full',\n 'data-[orientation=horizontal]:flex-row',\n 'data-[orientation=vertical]:flex-col',\n 'overflow-y-hidden u-no-scrollbar data-[orientation=vertical]:overflow-x-hidden',\n 'after:flex after:shrink after:grow after:border-outline',\n 'data-[orientation=horizontal]:after:border-b-sm',\n 'data-[orientation=vertical]:after:border-r-sm',\n])\n\nexport const navigationArrowStyles = cva([\n 'h-auto! flex-none',\n 'border-b-sm border-outline',\n 'outline-hidden',\n 'focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset!',\n])\n","import { type RefObject, useEffect, useRef, useState } from 'react'\n\ninterface Size {\n width?: number\n height?: number\n}\n\ntype ResizeCallback = (entry?: ResizeObserverEntry) => void\n\nexport const useResizeObserver = <T extends HTMLElement>(\n target: RefObject<T | null> | T | null,\n onResize?: ResizeCallback\n): Size => {\n const [size, setSize] = useState<Size>({ width: undefined, height: undefined })\n const resizeObserverRef = useRef<ResizeObserver>(null)\n const resizeCallbackRef = useRef<ResizeCallback | undefined>(onResize)\n\n useEffect(() => {\n resizeCallbackRef.current = onResize\n }, [onResize])\n\n useEffect(() => {\n const targetElm = target && 'current' in target ? target.current : target\n if (!targetElm || resizeObserverRef.current) {\n return\n }\n\n resizeObserverRef.current = new ResizeObserver(([entry]) => {\n const { inlineSize: width, blockSize: height } = entry?.borderBoxSize?.[0] ?? {}\n resizeCallbackRef.current?.(entry)\n\n setSize({ width, height })\n })\n\n resizeObserverRef.current.observe(targetElm as unknown as HTMLElement)\n\n return () => {\n resizeObserverRef.current &&\n resizeObserverRef.current.unobserve(targetElm as unknown as HTMLElement)\n }\n }, [target, resizeObserverRef, resizeCallbackRef])\n\n return size\n}\n","/* eslint-disable max-lines-per-function */\nimport { ArrowVerticalLeft } from '@spark-ui/icons/ArrowVerticalLeft'\nimport { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { Tabs as RadixTabs } from 'radix-ui'\nimport { type ReactElement, Ref, useEffect, useRef, useState } from 'react'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\nimport { useTabsContext } from './TabsContext'\nimport { listStyles, navigationArrowStyles, wrapperStyles } from './TabsList.styles'\nimport { useResizeObserver } from './useResizeObserver'\n\nexport interface TabsListProps extends Omit<RadixTabs.TabsListProps, 'children'> {\n /**\n * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n * @default false\n */\n asChild?: boolean\n /**\n * When true, keyboard navigation will loop from last tab to first, and vice versa.\n * @default false\n */\n loop?: boolean\n children: ReactElement[] | ReactElement\n ref?: Ref<HTMLDivElement>\n}\n\ntype ArrowState = 'visible' | 'hidden' | 'disabled'\n\nexport const TabsList = ({\n /**\n * Default Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#list\n */\n asChild = false,\n loop = false,\n children,\n className,\n ref,\n ...rest\n}: TabsListProps) => {\n const wrapperRef = useRef<HTMLDivElement>(null)\n const innerRef = useRef(null)\n const listRef = ref || innerRef\n const { orientation } = useTabsContext()\n\n const { width } = useResizeObserver(wrapperRef)\n\n const [arrows, setArrows] = useState<Record<'prev' | 'next', ArrowState>>({\n prev: 'hidden',\n next: 'hidden',\n })\n\n useEffect(() => {\n /**\n * Show/hide arrows\n */\n if (typeof listRef === 'function' || !listRef.current) {\n return\n }\n\n if (orientation !== 'horizontal') {\n setArrows({ prev: 'hidden', next: 'hidden' })\n } else {\n setArrows({\n prev: listRef.current.scrollWidth > listRef.current.clientWidth ? 'visible' : 'hidden',\n next: listRef.current.scrollWidth > listRef.current.clientWidth ? 'visible' : 'hidden',\n })\n }\n }, [orientation, listRef, width])\n\n useEffect(() => {\n /**\n * Enable/disable arrows\n */\n if (typeof listRef === 'function' || !listRef.current || arrows.prev === 'hidden' || loop) {\n return\n }\n\n const toggleArrowsVisibility = (target: HTMLDivElement) => {\n setArrows({\n prev: target.scrollLeft > 0 ? 'visible' : 'disabled',\n next: target.scrollLeft + target.clientWidth < target.scrollWidth ? 'visible' : 'disabled',\n })\n }\n\n const currentList = listRef.current\n\n toggleArrowsVisibility(currentList)\n\n currentList.addEventListener('scroll', ({ target }) =>\n toggleArrowsVisibility(target as HTMLDivElement)\n )\n\n return () =>\n currentList.removeEventListener('scroll', ({ target }) =>\n toggleArrowsVisibility(target as HTMLDivElement)\n )\n }, [listRef, arrows.prev, loop])\n\n const handlePrevClick = () => {\n if (typeof listRef === 'function' || !listRef.current) {\n return\n }\n\n const shouldLoopForward = loop && listRef.current.scrollLeft <= 0\n\n listRef.current.scrollTo({\n left: shouldLoopForward\n ? listRef.current.scrollLeft + listRef.current.scrollWidth - listRef.current.clientWidth\n : listRef.current.scrollLeft - listRef.current.clientWidth,\n behavior: 'smooth',\n })\n }\n\n const handleNextClick = () => {\n if (typeof listRef === 'function' || !listRef.current) {\n return\n }\n\n const shouldLoopBackward =\n loop &&\n listRef.current.scrollLeft + listRef.current.clientWidth >= listRef.current.scrollWidth\n\n listRef.current.scrollTo({\n left: shouldLoopBackward ? 0 : listRef.current.scrollLeft + listRef.current.clientWidth,\n behavior: 'smooth',\n })\n }\n\n return (\n <div className={wrapperStyles({ className })} ref={wrapperRef}>\n {arrows.prev !== 'hidden' && (\n <Button\n shape=\"square\"\n intent=\"surface\"\n size=\"sm\"\n className={navigationArrowStyles()}\n onClick={handlePrevClick}\n disabled={arrows.prev === 'disabled'}\n aria-label=\"Scroll left\"\n >\n <Icon>\n <ArrowVerticalLeft />\n </Icon>\n </Button>\n )}\n\n <RadixTabs.List\n data-spark-component=\"tabs-list\"\n ref={listRef}\n className={listStyles()}\n asChild={asChild}\n loop={loop}\n {...rest}\n >\n {children}\n </RadixTabs.List>\n\n {arrows.next !== 'hidden' && (\n <Button\n shape=\"square\"\n intent=\"surface\"\n size=\"sm\"\n className={navigationArrowStyles()}\n onClick={handleNextClick}\n disabled={arrows.next === 'disabled'}\n aria-label=\"Scroll right\"\n >\n <Icon>\n <ArrowVerticalRight />\n </Icon>\n </Button>\n )}\n </div>\n )\n}\n\nTabsList.displayName = 'Tabs.List'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { MoreMenuHorizontal } from '@spark-ui/icons/MoreMenuHorizontal'\nimport { cx } from 'class-variance-authority'\nimport {\n type ComponentType,\n createContext,\n forwardRef,\n type ReactNode,\n type RefObject,\n useContext,\n useMemo,\n} from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { Popover as SparkPopover } from '../popover'\nimport type { PopoverProps } from '../popover/Popover'\nimport type { ContentProps as PopoverContentProps } from '../popover/PopoverContent'\nimport type { TriggerProps as PopoverTriggerProps } from '../popover/PopoverTrigger'\n\ninterface TabsPopoverContextValue {\n popoverSide: 'right' | 'bottom'\n popoverTriggerRef: RefObject<HTMLButtonElement | null>\n}\n\nconst TabsPopoverContext = createContext<TabsPopoverContextValue | undefined>(undefined)\n\nconst useTabsPopoverContext = () => {\n const context = useContext(TabsPopoverContext)\n if (!context) {\n throw new Error('TabsPopover components must be used within TabsPopover')\n }\n\n return context\n}\n\n// Trigger component that uses context\ninterface TabsPopoverTriggerProps extends Omit<PopoverTriggerProps, 'asChild' | 'children'> {\n 'aria-label': string\n children?: ReactNode\n}\n\nconst TabsPopoverTrigger = forwardRef<HTMLButtonElement, TabsPopoverTriggerProps>(\n ({ 'aria-label': ariaLabel, children: iconChildren, ...triggerProps }, forwardedRef) => {\n const { popoverTriggerRef } = useTabsPopoverContext()\n const mergedRef = useMergeRefs(forwardedRef, popoverTriggerRef)\n\n return (\n <SparkPopover.Trigger asChild {...triggerProps}>\n <IconButton\n ref={mergedRef}\n size=\"sm\"\n intent=\"surfaceInverse\"\n design=\"ghost\"\n aria-label={ariaLabel}\n tabIndex={-1}\n >\n <Icon>{iconChildren || <MoreMenuHorizontal />}</Icon>\n </IconButton>\n </SparkPopover.Trigger>\n )\n }\n)\n\nTabsPopoverTrigger.displayName = 'Popover.Trigger'\n\n// Content component that uses context\nconst TabsPopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(\n ({ side, align = 'start', className, ...contentProps }, ref) => {\n const { popoverSide } = useTabsPopoverContext()\n const mergedClassName = cx('gap-sm flex flex-col', className)\n\n return (\n <SparkPopover.Content\n ref={ref}\n {...contentProps}\n side={side ?? popoverSide}\n align={align}\n className={mergedClassName}\n />\n )\n }\n)\n\nTabsPopoverContent.displayName = 'Popover.Content'\n\n// Export types\nexport type TabsPopoverTriggerComponent = typeof TabsPopoverTrigger\nexport type TabsPopoverContentComponent = typeof TabsPopoverContent\n\n// Create a type that extends SparkPopover but overrides Content and Trigger\n// Use ComponentType for JSX compatibility and Omit to exclude only Content and Trigger,\n// then add them back with the overridden types\nexport type ConfiguredPopoverComponent = ComponentType<PopoverProps> &\n Omit<typeof SparkPopover, 'Content' | 'Trigger'> & {\n Content: TabsPopoverContentComponent\n Trigger: TabsPopoverTriggerComponent\n }\n\ninterface PopoverAbstractionProps {\n popoverSide: 'right' | 'bottom'\n popoverTriggerRef: RefObject<HTMLButtonElement | null>\n children: (Popover: ConfiguredPopoverComponent) => ReactNode\n}\n\nexport const Popover = ({ popoverSide, popoverTriggerRef, children }: PopoverAbstractionProps) => {\n const contextValue = useMemo(\n () => ({ popoverSide, popoverTriggerRef }),\n [popoverSide, popoverTriggerRef]\n )\n\n const PopoverWrapper: typeof SparkPopover = ((props: PopoverProps) => (\n <TabsPopoverContext.Provider value={contextValue}>\n <SparkPopover {...props}>{props.children}</SparkPopover>\n </TabsPopoverContext.Provider>\n )) as typeof SparkPopover\n\n const PopoverComponent = Object.assign(PopoverWrapper, SparkPopover, {\n Content: TabsPopoverContent,\n Trigger: TabsPopoverTrigger,\n }) as ConfiguredPopoverComponent\n\n return (\n <TabsPopoverContext.Provider value={contextValue}>\n {children(PopoverComponent)}\n </TabsPopoverContext.Provider>\n )\n}\n\nPopover.displayName = 'Popover'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const triggerVariants = cva(\n [\n 'px-md',\n 'relative flex flex-none items-center',\n 'border-outline',\n 'hover:not-disabled:bg-surface-hovered',\n 'after:absolute',\n 'data-[state=active]:font-bold',\n 'data-[state=inactive]:not-disabled:cursor-pointer',\n 'data-[orientation=horizontal]:border-b-sm data-[orientation=horizontal]:after:inset-x-0 data-[orientation=horizontal]:after:bottom-[-1px] data-[orientation=horizontal]:after:h-sz-2',\n 'data-[orientation=vertical]:border-r-sm data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:right-[-1px] data-[orientation=vertical]:after:w-sz-2',\n 'focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset',\n 'disabled:cursor-not-allowed disabled:opacity-dim-3',\n 'gap-md [&>*:first-child]:ml-md [&>*:last-child]:mr-md',\n '[&>svg:last-child:first-child]:mx-auto',\n ],\n {\n variants: {\n /**\n * Change the color scheme of the tabs\n * @default basic\n */\n intent: makeVariants<'intent', ['main', 'support', 'basic']>({\n main: ['data-[state=active]:text-main data-[state=active]:after:bg-main'],\n support: ['data-[state=active]:text-support data-[state=active]:after:bg-support'],\n basic: ['data-[state=active]:text-basic data-[state=active]:after:bg-basic'],\n }),\n /**\n * Change the size of the tabs\n * @default md\n */\n size: {\n xs: ['h-sz-32 min-w-sz-32 text-caption'],\n sm: ['h-sz-36 min-w-sz-36 text-body-2'],\n md: ['h-sz-40 min-w-sz-40 text-body-1'],\n },\n hasMenu: {\n true: 'pr-3xl',\n },\n orientation: {\n horizontal: '',\n vertical: '',\n },\n },\n compoundVariants: [\n {\n hasMenu: true,\n orientation: 'vertical',\n class: 'w-full',\n },\n ],\n defaultVariants: {\n intent: 'basic',\n size: 'md',\n hasMenu: false,\n orientation: 'horizontal',\n },\n }\n)\n\nexport type TabsTriggerVariantsProps = VariantProps<typeof triggerVariants>\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { Tabs as RadixTabs } from 'radix-ui'\nimport { type FocusEvent, type KeyboardEvent, type ReactNode, Ref, useRef } from 'react'\n\nimport { useTabsContext } from './TabsContext'\nimport { type ConfiguredPopoverComponent, Popover } from './TabsPopoverAbstraction'\nimport { triggerVariants } from './TabsTrigger.styles'\n\nexport interface TabsTriggerProps extends RadixTabs.TabsTriggerProps {\n /**\n * A unique value that associates the trigger with a content.\n */\n value: string\n /**\n * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n * @default false\n */\n asChild?: boolean\n /**\n * When true, prevents the user from interacting with the tab.\n * @default false\n */\n disabled?: boolean\n /**\n * Function that receives a pre-configured Popover component and returns the popover structure.\n * @example\n * renderMenu={({ Popover }) => (\n * <Popover>\n * <Popover.Trigger aria-label=\"Options\">\n * <CustomIcon />\n * </Popover.Trigger>\n * <Popover.Content>\n * <Button>Action</Button>\n * </Popover.Content>\n * </Popover>\n * )}\n */\n renderMenu?: (props: { Popover: ConfiguredPopoverComponent }) => ReactNode\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const TabsTrigger = ({\n /**\n * Default Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#trigger\n */\n asChild = false,\n value,\n disabled = false,\n children,\n className,\n ref,\n onKeyDown,\n renderMenu,\n ...rest\n}: TabsTriggerProps) => {\n const { intent, size, orientation } = useTabsContext()\n const popoverTriggerRef = useRef<HTMLButtonElement>(null)\n const tabsTriggerRef = useRef<HTMLButtonElement>(null)\n\n // Combine internal ref with forwarded ref\n const mergedRef = useMergeRefs(ref, tabsTriggerRef)\n\n const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n // Handle Shift+F10 for popover\n if (e.key === 'F10' && e.shiftKey && renderMenu && popoverTriggerRef.current) {\n e.preventDefault()\n popoverTriggerRef.current.click()\n }\n\n // Call original onKeyDown if provided\n onKeyDown?.(e)\n }\n\n const hasMenu = !!renderMenu\n const popoverSide = orientation === 'vertical' ? 'right' : 'bottom'\n\n const trigger = (\n <RadixTabs.Trigger\n data-spark-component=\"tabs-trigger\"\n ref={mergedRef}\n className={triggerVariants({\n intent,\n size,\n hasMenu,\n orientation: orientation ?? 'horizontal',\n className,\n })}\n asChild={asChild}\n disabled={disabled}\n value={value}\n onFocus={({ target }: FocusEvent<HTMLButtonElement>) =>\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'nearest',\n })\n }\n onKeyDown={handleKeyDown}\n aria-haspopup={hasMenu ? 'true' : undefined}\n {...rest}\n >\n {children}\n </RadixTabs.Trigger>\n )\n\n if (!hasMenu) {\n return trigger\n }\n\n return (\n <div className={orientation === 'vertical' ? 'relative w-full' : 'relative'}>\n {trigger}\n <div className=\"right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2\">\n <Popover popoverSide={popoverSide} popoverTriggerRef={popoverTriggerRef}>\n {PopoverAbstraction => renderMenu?.({ Popover: PopoverAbstraction })}\n </Popover>\n </div>\n </div>\n )\n}\n\nTabsTrigger.displayName = 'Tabs.Trigger'\n","import { Tabs as Root } from './Tabs'\nimport { TabsContent as Content } from './TabsContent'\nimport { TabsList as List } from './TabsList'\nimport { TabsTrigger as Trigger } from './TabsTrigger'\n\nexport const Tabs: typeof Root & {\n List: typeof List\n Trigger: typeof Trigger\n Content: typeof Content\n} = Object.assign(Root, {\n List,\n Trigger,\n Content,\n})\n\nTabs.displayName = 'Tabs'\nList.displayName = 'Tabs.List'\nTrigger.displayName = 'Tabs.Trigger'\nContent.displayName = 'Tabs.Content'\n\nexport { type TabsContentProps } from './TabsContent'\nexport { type TabsListProps } from './TabsList'\nexport { type TabsProps, type TabsRootProps } from './Tabs'\nexport { type TabsTriggerProps } from './TabsTrigger'\n"],"names":["TabsContext","createContext","useTabsContext","context","useContext","rootStyles","cva","Tabs","intent","size","asChild","forceMount","orientation","children","className","ref","rest","jsx","RadixTabs","contentStyles","TabsContent","wrapperStyles","listStyles","navigationArrowStyles","useResizeObserver","target","onResize","setSize","useState","resizeObserverRef","useRef","resizeCallbackRef","useEffect","targetElm","entry","width","height","TabsList","loop","wrapperRef","innerRef","listRef","arrows","setArrows","toggleArrowsVisibility","currentList","handlePrevClick","shouldLoopForward","handleNextClick","shouldLoopBackward","jsxs","Button","Icon","ArrowVerticalLeft","ArrowVerticalRight","TabsPopoverContext","useTabsPopoverContext","TabsPopoverTrigger","forwardRef","ariaLabel","iconChildren","triggerProps","forwardedRef","popoverTriggerRef","mergedRef","useMergeRefs","SparkPopover","IconButton","MoreMenuHorizontal","TabsPopoverContent","side","align","contentProps","popoverSide","mergedClassName","cx","Popover","contextValue","useMemo","PopoverComponent","props","triggerVariants","makeVariants","TabsTrigger","value","disabled","onKeyDown","renderMenu","tabsTriggerRef","handleKeyDown","e","hasMenu","trigger","PopoverAbstraction","Root","List","Trigger","Content"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/tabs/TabsContext.tsx","../../src/tabs/TabsRoot.styles.ts","../../src/tabs/Tabs.tsx","../../src/tabs/TabsContent.styles.ts","../../src/tabs/TabsContent.tsx","../../src/tabs/TabsList.styles.ts","../../src/tabs/useResizeObserver.ts","../../src/tabs/TabsList.tsx","../../src/tabs/TabsPopoverAbstraction.tsx","../../src/tabs/TabsTrigger.styles.ts","../../src/tabs/TabsTrigger.tsx","../../src/tabs/index.ts"],"sourcesContent":["import { Tabs as RadixTabs } from 'radix-ui'\nimport { createContext, useContext } from 'react'\n\nimport type { TabsTriggerVariantsProps } from './TabsTrigger.styles'\n\nexport type TabsContextInterface = TabsTriggerVariantsProps &\n Pick<RadixTabs.TabsProps, 'orientation'> & {\n forceMount?: boolean\n }\n\nexport const TabsContext = createContext<TabsContextInterface>({} as TabsContextInterface)\n\nexport const useTabsContext = () => {\n const context = useContext(TabsContext)\n\n if (!context) {\n throw Error('useTabsContext must be used within a TabsContext Provider')\n }\n\n return context\n}\n","import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n 'flex',\n 'data-[orientation=horizontal]:flex-col',\n 'data-[orientation=vertical]:flex-row',\n 'max-w-full',\n])\n","import { Tabs as RadixTabs } from 'radix-ui'\nimport { type PropsWithChildren, Ref } from 'react'\n\nimport { TabsContext } from './TabsContext'\nimport { rootStyles } from './TabsRoot.styles'\nimport type { TabsTriggerVariantsProps } from './TabsTrigger.styles'\n\nexport interface TabsProps\n extends Omit<RadixTabs.TabsProps, 'activationMode'>,\n PropsWithChildren<Omit<TabsTriggerVariantsProps, 'orientation'>> {\n /**\n * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n * @default false\n */\n asChild?: boolean\n /**\n * Whether to keep inactive tabs content in the DOM.\n * @default false\n */\n forceMount?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * @deprecated\n */\nexport type TabsRootProps = TabsProps\n\nexport const Tabs = ({\n intent = 'support',\n size = 'md',\n /**\n * Default Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#root\n */\n asChild = false,\n forceMount = false,\n orientation = 'horizontal',\n children,\n className,\n ref,\n ...rest\n}: TabsProps) => {\n return (\n <TabsContext.Provider\n value={{\n intent,\n size,\n orientation,\n forceMount,\n }}\n >\n <RadixTabs.Root\n ref={ref}\n asChild={asChild}\n orientation={orientation}\n className={rootStyles({ className })}\n data-spark-component=\"tabs\"\n activationMode=\"automatic\"\n {...rest}\n >\n {children}\n </RadixTabs.Root>\n </TabsContext.Provider>\n )\n}\n\nTabs.displayName = 'Tabs'\n","import { cva } from 'class-variance-authority'\n\nexport const contentStyles = cva(['w-full p-lg', 'focus-visible:u-outline-inset'], {\n variants: {\n forceMount: {\n true: 'data-[state=inactive]:hidden',\n false: '',\n },\n },\n})\n","import { Tabs as RadixTabs } from 'radix-ui'\nimport { type PropsWithChildren, Ref } from 'react'\n\nimport { contentStyles } from './TabsContent.styles'\nimport { useTabsContext } from './TabsContext'\n\nexport interface TabsContentProps\n extends PropsWithChildren<Omit<RadixTabs.TabsContentProps, 'forceMount'>> {\n /**\n * A unique value that associates the content with a trigger.\n */\n value: string\n /**\n * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n * @default false\n */\n asChild?: boolean\n /**\n * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n */\n forceMount?: true\n ref?: Ref<HTMLDivElement>\n}\n\nexport const TabsContent = ({\n /**\n * Default Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#content\n */\n children,\n asChild = false,\n className,\n ref,\n ...rest\n}: TabsContentProps) => {\n const { forceMount } = useTabsContext()\n\n return (\n <RadixTabs.Content\n data-spark-component=\"tabs-content\"\n ref={ref}\n forceMount={forceMount || rest.forceMount}\n className={contentStyles({ className, forceMount })}\n asChild={asChild}\n {...rest}\n >\n {children}\n </RadixTabs.Content>\n )\n}\n\nTabsContent.displayName = 'Tabs.Content'\n","import { cva } from 'class-variance-authority'\n\nexport const wrapperStyles = cva(['relative flex'])\n\nexport const listStyles = cva([\n 'flex w-full',\n 'data-[orientation=horizontal]:flex-row',\n 'data-[orientation=vertical]:flex-col',\n 'overflow-y-hidden u-no-scrollbar data-[orientation=vertical]:overflow-x-hidden',\n 'after:flex after:shrink after:grow after:border-outline',\n 'data-[orientation=horizontal]:after:border-b-sm',\n 'data-[orientation=vertical]:after:border-r-sm',\n])\n\nexport const navigationArrowStyles = cva([\n 'h-auto! flex-none',\n 'border-b-sm border-outline',\n 'outline-hidden',\n 'focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset!',\n])\n","import { type RefObject, useEffect, useRef, useState } from 'react'\n\ninterface Size {\n width?: number\n height?: number\n}\n\ntype ResizeCallback = (entry?: ResizeObserverEntry) => void\n\nexport const useResizeObserver = <T extends HTMLElement>(\n target: RefObject<T | null> | T | null,\n onResize?: ResizeCallback\n): Size => {\n const [size, setSize] = useState<Size>({ width: undefined, height: undefined })\n const resizeObserverRef = useRef<ResizeObserver>(null)\n const resizeCallbackRef = useRef<ResizeCallback | undefined>(onResize)\n\n useEffect(() => {\n resizeCallbackRef.current = onResize\n }, [onResize])\n\n useEffect(() => {\n const targetElm = target && 'current' in target ? target.current : target\n if (!targetElm || resizeObserverRef.current) {\n return\n }\n\n resizeObserverRef.current = new ResizeObserver(([entry]) => {\n const { inlineSize: width, blockSize: height } = entry?.borderBoxSize?.[0] ?? {}\n resizeCallbackRef.current?.(entry)\n\n setSize({ width, height })\n })\n\n resizeObserverRef.current.observe(targetElm as unknown as HTMLElement)\n\n return () => {\n resizeObserverRef.current &&\n resizeObserverRef.current.unobserve(targetElm as unknown as HTMLElement)\n }\n }, [target, resizeObserverRef, resizeCallbackRef])\n\n return size\n}\n","/* eslint-disable max-lines-per-function */\nimport { ArrowVerticalLeft } from '@spark-ui/icons/ArrowVerticalLeft'\nimport { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { Tabs as RadixTabs } from 'radix-ui'\nimport { type ReactElement, Ref, useEffect, useRef, useState } from 'react'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\nimport { useTabsContext } from './TabsContext'\nimport { listStyles, navigationArrowStyles, wrapperStyles } from './TabsList.styles'\nimport { useResizeObserver } from './useResizeObserver'\n\nexport interface TabsListProps extends Omit<RadixTabs.TabsListProps, 'children'> {\n /**\n * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n * @default false\n */\n asChild?: boolean\n /**\n * When true, keyboard navigation will loop from last tab to first, and vice versa.\n * @default false\n */\n loop?: boolean\n children: ReactElement[] | ReactElement\n ref?: Ref<HTMLDivElement>\n}\n\ntype ArrowState = 'visible' | 'hidden' | 'disabled'\n\nexport const TabsList = ({\n /**\n * Default Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#list\n */\n asChild = false,\n loop = false,\n children,\n className,\n ref,\n ...rest\n}: TabsListProps) => {\n const wrapperRef = useRef<HTMLDivElement>(null)\n const innerRef = useRef(null)\n const listRef = ref || innerRef\n const { orientation } = useTabsContext()\n\n const { width } = useResizeObserver(wrapperRef)\n\n const [arrows, setArrows] = useState<Record<'prev' | 'next', ArrowState>>({\n prev: 'hidden',\n next: 'hidden',\n })\n\n useEffect(() => {\n /**\n * Show/hide arrows\n */\n if (typeof listRef === 'function' || !listRef.current) {\n return\n }\n\n if (orientation !== 'horizontal') {\n setArrows({ prev: 'hidden', next: 'hidden' })\n } else {\n setArrows({\n prev: listRef.current.scrollWidth > listRef.current.clientWidth ? 'visible' : 'hidden',\n next: listRef.current.scrollWidth > listRef.current.clientWidth ? 'visible' : 'hidden',\n })\n }\n }, [orientation, listRef, width])\n\n useEffect(() => {\n /**\n * Enable/disable arrows\n */\n if (typeof listRef === 'function' || !listRef.current || arrows.prev === 'hidden' || loop) {\n return\n }\n\n const toggleArrowsVisibility = (target: HTMLDivElement) => {\n setArrows({\n prev: target.scrollLeft > 0 ? 'visible' : 'disabled',\n next: target.scrollLeft + target.clientWidth < target.scrollWidth ? 'visible' : 'disabled',\n })\n }\n\n const currentList = listRef.current\n\n toggleArrowsVisibility(currentList)\n\n currentList.addEventListener('scroll', ({ target }) =>\n toggleArrowsVisibility(target as HTMLDivElement)\n )\n\n return () =>\n currentList.removeEventListener('scroll', ({ target }) =>\n toggleArrowsVisibility(target as HTMLDivElement)\n )\n }, [listRef, arrows.prev, loop])\n\n const handlePrevClick = () => {\n if (typeof listRef === 'function' || !listRef.current) {\n return\n }\n\n const shouldLoopForward = loop && listRef.current.scrollLeft <= 0\n\n listRef.current.scrollTo({\n left: shouldLoopForward\n ? listRef.current.scrollLeft + listRef.current.scrollWidth - listRef.current.clientWidth\n : listRef.current.scrollLeft - listRef.current.clientWidth,\n behavior: 'smooth',\n })\n }\n\n const handleNextClick = () => {\n if (typeof listRef === 'function' || !listRef.current) {\n return\n }\n\n const shouldLoopBackward =\n loop &&\n listRef.current.scrollLeft + listRef.current.clientWidth >= listRef.current.scrollWidth\n\n listRef.current.scrollTo({\n left: shouldLoopBackward ? 0 : listRef.current.scrollLeft + listRef.current.clientWidth,\n behavior: 'smooth',\n })\n }\n\n return (\n <div className={wrapperStyles({ className })} ref={wrapperRef}>\n {arrows.prev !== 'hidden' && (\n <Button\n shape=\"square\"\n intent=\"surface\"\n size=\"sm\"\n className={navigationArrowStyles()}\n onClick={handlePrevClick}\n disabled={arrows.prev === 'disabled'}\n aria-label=\"Scroll left\"\n >\n <Icon>\n <ArrowVerticalLeft />\n </Icon>\n </Button>\n )}\n\n <RadixTabs.List\n data-spark-component=\"tabs-list\"\n ref={listRef}\n className={listStyles()}\n asChild={asChild}\n loop={loop}\n {...rest}\n >\n {children}\n </RadixTabs.List>\n\n {arrows.next !== 'hidden' && (\n <Button\n shape=\"square\"\n intent=\"surface\"\n size=\"sm\"\n className={navigationArrowStyles()}\n onClick={handleNextClick}\n disabled={arrows.next === 'disabled'}\n aria-label=\"Scroll right\"\n >\n <Icon>\n <ArrowVerticalRight />\n </Icon>\n </Button>\n )}\n </div>\n )\n}\n\nTabsList.displayName = 'Tabs.List'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { MoreMenuHorizontal } from '@spark-ui/icons/MoreMenuHorizontal'\nimport { cx } from 'class-variance-authority'\nimport {\n type ComponentType,\n createContext,\n forwardRef,\n type ReactNode,\n type RefObject,\n useContext,\n useMemo,\n} from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { Popover as SparkPopover } from '../popover'\nimport type { PopoverProps } from '../popover/Popover'\nimport type { ContentProps as PopoverContentProps } from '../popover/PopoverContent'\nimport type { TriggerProps as PopoverTriggerProps } from '../popover/PopoverTrigger'\n\ninterface TabsPopoverContextValue {\n popoverSide: 'right' | 'bottom'\n popoverTriggerRef: RefObject<HTMLButtonElement | null>\n}\n\nconst TabsPopoverContext = createContext<TabsPopoverContextValue | undefined>(undefined)\n\nconst useTabsPopoverContext = () => {\n const context = useContext(TabsPopoverContext)\n if (!context) {\n throw new Error('TabsPopover components must be used within TabsPopover')\n }\n\n return context\n}\n\n// Trigger component that uses context\ninterface TabsPopoverTriggerProps extends Omit<PopoverTriggerProps, 'asChild' | 'children'> {\n 'aria-label': string\n children?: ReactNode\n}\n\nconst TabsPopoverTrigger = forwardRef<HTMLButtonElement, TabsPopoverTriggerProps>(\n ({ 'aria-label': ariaLabel, children: iconChildren, ...triggerProps }, forwardedRef) => {\n const { popoverTriggerRef } = useTabsPopoverContext()\n const mergedRef = useMergeRefs(forwardedRef, popoverTriggerRef)\n\n return (\n <SparkPopover.Trigger asChild {...triggerProps}>\n <IconButton\n ref={mergedRef}\n size=\"sm\"\n intent=\"surfaceInverse\"\n design=\"ghost\"\n aria-label={ariaLabel}\n tabIndex={-1}\n >\n <Icon>{iconChildren || <MoreMenuHorizontal />}</Icon>\n </IconButton>\n </SparkPopover.Trigger>\n )\n }\n)\n\nTabsPopoverTrigger.displayName = 'Popover.Trigger'\n\n// Content component that uses context\nconst TabsPopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(\n ({ side, align = 'start', className, ...contentProps }, ref) => {\n const { popoverSide } = useTabsPopoverContext()\n const mergedClassName = cx('gap-sm flex flex-col', className)\n\n return (\n <SparkPopover.Content\n ref={ref}\n {...contentProps}\n side={side ?? popoverSide}\n align={align}\n className={mergedClassName}\n />\n )\n }\n)\n\nTabsPopoverContent.displayName = 'Popover.Content'\n\n// Export types\nexport type TabsPopoverTriggerComponent = typeof TabsPopoverTrigger\nexport type TabsPopoverContentComponent = typeof TabsPopoverContent\n\n// Create a type that extends SparkPopover but overrides Content and Trigger\n// Use ComponentType for JSX compatibility and Omit to exclude only Content and Trigger,\n// then add them back with the overridden types\nexport type ConfiguredPopoverComponent = ComponentType<PopoverProps> &\n Omit<typeof SparkPopover, 'Content' | 'Trigger'> & {\n Content: TabsPopoverContentComponent\n Trigger: TabsPopoverTriggerComponent\n }\n\ninterface PopoverAbstractionProps {\n popoverSide: 'right' | 'bottom'\n popoverTriggerRef: RefObject<HTMLButtonElement | null>\n children: (Popover: ConfiguredPopoverComponent) => ReactNode\n}\n\nexport const Popover = ({ popoverSide, popoverTriggerRef, children }: PopoverAbstractionProps) => {\n const contextValue = useMemo(\n () => ({ popoverSide, popoverTriggerRef }),\n [popoverSide, popoverTriggerRef]\n )\n\n const PopoverWrapper: typeof SparkPopover = ((props: PopoverProps) => (\n <TabsPopoverContext.Provider value={contextValue}>\n <SparkPopover {...props}>{props.children}</SparkPopover>\n </TabsPopoverContext.Provider>\n )) as typeof SparkPopover\n\n const PopoverComponent = Object.assign(PopoverWrapper, SparkPopover, {\n Content: TabsPopoverContent,\n Trigger: TabsPopoverTrigger,\n }) as ConfiguredPopoverComponent\n\n return (\n <TabsPopoverContext.Provider value={contextValue}>\n {children(PopoverComponent)}\n </TabsPopoverContext.Provider>\n )\n}\n\nPopover.displayName = 'Popover'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const triggerVariants = cva(\n [\n 'px-md',\n 'relative flex flex-none items-center',\n 'border-outline',\n 'hover:not-disabled:bg-surface-hovered',\n 'after:absolute',\n 'data-[state=active]:font-bold',\n 'data-[state=inactive]:not-disabled:cursor-pointer',\n 'data-[orientation=horizontal]:border-b-sm data-[orientation=horizontal]:after:inset-x-0 data-[orientation=horizontal]:after:bottom-[-1px] data-[orientation=horizontal]:after:h-sz-2',\n 'data-[orientation=vertical]:border-r-sm data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:right-[-1px] data-[orientation=vertical]:after:w-sz-2',\n 'focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset',\n 'disabled:cursor-not-allowed disabled:opacity-dim-3',\n 'gap-md [&>*:first-child]:ml-md [&>*:last-child]:mr-md',\n '[&>svg:last-child:first-child]:mx-auto',\n ],\n {\n variants: {\n /**\n * Change the color scheme of the tabs\n * @default support\n */\n intent: makeVariants<'intent', ['main', 'support']>({\n main: ['data-[state=active]:text-main data-[state=active]:after:bg-main'],\n support: ['data-[state=active]:text-support data-[state=active]:after:bg-support'],\n }),\n /**\n * Change the size of the tabs\n * @default md\n */\n size: {\n xs: ['h-sz-32 min-w-sz-32 text-caption'],\n sm: ['h-sz-36 min-w-sz-36 text-body-2'],\n md: ['h-sz-40 min-w-sz-40 text-body-1'],\n },\n hasMenu: {\n true: 'pr-3xl',\n },\n orientation: {\n horizontal: '',\n vertical: '',\n },\n },\n compoundVariants: [\n {\n hasMenu: true,\n orientation: 'vertical',\n class: 'w-full',\n },\n ],\n defaultVariants: {\n intent: 'support',\n size: 'md',\n hasMenu: false,\n orientation: 'horizontal',\n },\n }\n)\n\nexport type TabsTriggerVariantsProps = VariantProps<typeof triggerVariants>\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { Tabs as RadixTabs } from 'radix-ui'\nimport { type FocusEvent, type KeyboardEvent, type ReactNode, Ref, useRef } from 'react'\n\nimport { useTabsContext } from './TabsContext'\nimport { type ConfiguredPopoverComponent, Popover } from './TabsPopoverAbstraction'\nimport { triggerVariants } from './TabsTrigger.styles'\n\nexport interface TabsTriggerProps extends RadixTabs.TabsTriggerProps {\n /**\n * A unique value that associates the trigger with a content.\n */\n value: string\n /**\n * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n * @default false\n */\n asChild?: boolean\n /**\n * When true, prevents the user from interacting with the tab.\n * @default false\n */\n disabled?: boolean\n /**\n * Function that receives a pre-configured Popover component and returns the popover structure.\n * @example\n * renderMenu={({ Popover }) => (\n * <Popover>\n * <Popover.Trigger aria-label=\"Options\">\n * <CustomIcon />\n * </Popover.Trigger>\n * <Popover.Content>\n * <Button>Action</Button>\n * </Popover.Content>\n * </Popover>\n * )}\n */\n renderMenu?: (props: { Popover: ConfiguredPopoverComponent }) => ReactNode\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const TabsTrigger = ({\n /**\n * Default Radix Primitive values\n * see https://www.radix-ui.com/docs/primitives/components/tabs#trigger\n */\n asChild = false,\n value,\n disabled = false,\n children,\n className,\n ref,\n onKeyDown,\n renderMenu,\n ...rest\n}: TabsTriggerProps) => {\n const { intent, size, orientation } = useTabsContext()\n const popoverTriggerRef = useRef<HTMLButtonElement>(null)\n const tabsTriggerRef = useRef<HTMLButtonElement>(null)\n\n // Combine internal ref with forwarded ref\n const mergedRef = useMergeRefs(ref, tabsTriggerRef)\n\n const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n // Handle Shift+F10 for popover\n if (e.key === 'F10' && e.shiftKey && renderMenu && popoverTriggerRef.current) {\n e.preventDefault()\n popoverTriggerRef.current.click()\n }\n\n // Call original onKeyDown if provided\n onKeyDown?.(e)\n }\n\n const hasMenu = !!renderMenu\n const popoverSide = orientation === 'vertical' ? 'right' : 'bottom'\n\n const trigger = (\n <RadixTabs.Trigger\n data-spark-component=\"tabs-trigger\"\n ref={mergedRef}\n className={triggerVariants({\n intent,\n size,\n hasMenu,\n orientation: orientation ?? 'horizontal',\n className,\n })}\n asChild={asChild}\n disabled={disabled}\n value={value}\n onFocus={({ target }: FocusEvent<HTMLButtonElement>) =>\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'nearest',\n })\n }\n onKeyDown={handleKeyDown}\n aria-haspopup={hasMenu ? 'true' : undefined}\n {...rest}\n >\n {children}\n </RadixTabs.Trigger>\n )\n\n if (!hasMenu) {\n return trigger\n }\n\n return (\n <div className={orientation === 'vertical' ? 'relative w-full' : 'relative'}>\n {trigger}\n <div className=\"right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2\">\n <Popover popoverSide={popoverSide} popoverTriggerRef={popoverTriggerRef}>\n {PopoverAbstraction => renderMenu?.({ Popover: PopoverAbstraction })}\n </Popover>\n </div>\n </div>\n )\n}\n\nTabsTrigger.displayName = 'Tabs.Trigger'\n","import { Tabs as Root } from './Tabs'\nimport { TabsContent as Content } from './TabsContent'\nimport { TabsList as List } from './TabsList'\nimport { TabsTrigger as Trigger } from './TabsTrigger'\n\nexport const Tabs: typeof Root & {\n List: typeof List\n Trigger: typeof Trigger\n Content: typeof Content\n} = Object.assign(Root, {\n List,\n Trigger,\n Content,\n})\n\nTabs.displayName = 'Tabs'\nList.displayName = 'Tabs.List'\nTrigger.displayName = 'Tabs.Trigger'\nContent.displayName = 'Tabs.Content'\n\nexport { type TabsContentProps } from './TabsContent'\nexport { type TabsListProps } from './TabsList'\nexport { type TabsProps, type TabsRootProps } from './Tabs'\nexport { type TabsTriggerProps } from './TabsTrigger'\n"],"names":["TabsContext","createContext","useTabsContext","context","useContext","rootStyles","cva","Tabs","intent","size","asChild","forceMount","orientation","children","className","ref","rest","jsx","RadixTabs","contentStyles","TabsContent","wrapperStyles","listStyles","navigationArrowStyles","useResizeObserver","target","onResize","setSize","useState","resizeObserverRef","useRef","resizeCallbackRef","useEffect","targetElm","entry","width","height","TabsList","loop","wrapperRef","innerRef","listRef","arrows","setArrows","toggleArrowsVisibility","currentList","handlePrevClick","shouldLoopForward","handleNextClick","shouldLoopBackward","jsxs","Button","Icon","ArrowVerticalLeft","ArrowVerticalRight","TabsPopoverContext","useTabsPopoverContext","TabsPopoverTrigger","forwardRef","ariaLabel","iconChildren","triggerProps","forwardedRef","popoverTriggerRef","mergedRef","useMergeRefs","SparkPopover","IconButton","MoreMenuHorizontal","TabsPopoverContent","side","align","contentProps","popoverSide","mergedClassName","cx","Popover","contextValue","useMemo","PopoverComponent","props","triggerVariants","makeVariants","TabsTrigger","value","disabled","onKeyDown","renderMenu","tabsTriggerRef","handleKeyDown","e","hasMenu","trigger","PopoverAbstraction","Root","List","Trigger","Content"],"mappings":"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"}
|
package/dist/tabs/index.mjs
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { jsx as n, jsxs as I } from "react/jsx-runtime";
|
|
2
2
|
import { Tabs as T } from "radix-ui";
|
|
3
|
-
import { createContext as E, useContext as A, useState as B, useRef as
|
|
3
|
+
import { createContext as E, useContext as A, useState as B, useRef as b, useEffect as g, forwardRef as O, useMemo as G } from "react";
|
|
4
4
|
import { cva as x, cx as J } from "class-variance-authority";
|
|
5
5
|
import { ArrowVerticalLeft as Q } from "@spark-ui/icons/ArrowVerticalLeft";
|
|
6
6
|
import { ArrowVerticalRight as U } from "@spark-ui/icons/ArrowVerticalRight";
|
|
7
|
-
import { B as M } from "../Button-
|
|
8
|
-
import { I as N } from "../Icon-
|
|
7
|
+
import { B as M } from "../Button-1M9DcZl0.mjs";
|
|
8
|
+
import { I as N } from "../Icon-BO327oHU.mjs";
|
|
9
9
|
import { useMergeRefs as j } from "@spark-ui/hooks/use-merge-refs";
|
|
10
10
|
import { MoreMenuHorizontal as X } from "@spark-ui/icons/MoreMenuHorizontal";
|
|
11
|
-
import { I as Y } from "../IconButton-
|
|
11
|
+
import { I as Y } from "../IconButton-DdB3Pq13.mjs";
|
|
12
12
|
import { Popover as w } from "../popover/index.mjs";
|
|
13
13
|
import { makeVariants as Z } from "@spark-ui/internal-utils";
|
|
14
14
|
const D = E({}), L = () => {
|
|
@@ -22,7 +22,7 @@ const D = E({}), L = () => {
|
|
|
22
22
|
"data-[orientation=vertical]:flex-row",
|
|
23
23
|
"max-w-full"
|
|
24
24
|
]), F = ({
|
|
25
|
-
intent: t = "
|
|
25
|
+
intent: t = "support",
|
|
26
26
|
size: r = "md",
|
|
27
27
|
/**
|
|
28
28
|
* Default Radix Primitive values
|
|
@@ -107,15 +107,15 @@ const te = x(["relative flex"]), re = x([
|
|
|
107
107
|
"outline-hidden",
|
|
108
108
|
"focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset!"
|
|
109
109
|
]), oe = (t, r) => {
|
|
110
|
-
const [s, a] = B({ width: void 0, height: void 0 }), o =
|
|
110
|
+
const [s, a] = B({ width: void 0, height: void 0 }), o = b(null), i = b(r);
|
|
111
111
|
return g(() => {
|
|
112
112
|
i.current = r;
|
|
113
113
|
}, [r]), g(() => {
|
|
114
114
|
const l = t && "current" in t ? t.current : t;
|
|
115
115
|
if (!(!l || o.current))
|
|
116
116
|
return o.current = new ResizeObserver(([c]) => {
|
|
117
|
-
const { inlineSize: e, blockSize:
|
|
118
|
-
i.current?.(c), a({ width: e, height:
|
|
117
|
+
const { inlineSize: e, blockSize: p } = c?.borderBoxSize?.[0] ?? {};
|
|
118
|
+
i.current?.(c), a({ width: e, height: p });
|
|
119
119
|
}), o.current.observe(l), () => {
|
|
120
120
|
o.current && o.current.unobserve(l);
|
|
121
121
|
};
|
|
@@ -132,20 +132,20 @@ const te = x(["relative flex"]), re = x([
|
|
|
132
132
|
ref: o,
|
|
133
133
|
...i
|
|
134
134
|
}) => {
|
|
135
|
-
const l =
|
|
135
|
+
const l = b(null), c = b(null), e = o || c, { orientation: p } = L(), { width: z } = oe(l), [d, m] = B({
|
|
136
136
|
prev: "hidden",
|
|
137
137
|
next: "hidden"
|
|
138
138
|
});
|
|
139
139
|
g(() => {
|
|
140
|
-
typeof e == "function" || !e.current ||
|
|
140
|
+
typeof e == "function" || !e.current || m(p !== "horizontal" ? { prev: "hidden", next: "hidden" } : {
|
|
141
141
|
prev: e.current.scrollWidth > e.current.clientWidth ? "visible" : "hidden",
|
|
142
142
|
next: e.current.scrollWidth > e.current.clientWidth ? "visible" : "hidden"
|
|
143
143
|
});
|
|
144
|
-
}, [
|
|
144
|
+
}, [p, e, z]), g(() => {
|
|
145
145
|
if (typeof e == "function" || !e.current || d.prev === "hidden" || r)
|
|
146
146
|
return;
|
|
147
147
|
const f = (u) => {
|
|
148
|
-
|
|
148
|
+
m({
|
|
149
149
|
prev: u.scrollLeft > 0 ? "visible" : "disabled",
|
|
150
150
|
next: u.scrollLeft + u.clientWidth < u.scrollWidth ? "visible" : "disabled"
|
|
151
151
|
});
|
|
@@ -287,12 +287,11 @@ const ne = x(
|
|
|
287
287
|
variants: {
|
|
288
288
|
/**
|
|
289
289
|
* Change the color scheme of the tabs
|
|
290
|
-
* @default
|
|
290
|
+
* @default support
|
|
291
291
|
*/
|
|
292
292
|
intent: Z({
|
|
293
293
|
main: ["data-[state=active]:text-main data-[state=active]:after:bg-main"],
|
|
294
|
-
support: ["data-[state=active]:text-support data-[state=active]:after:bg-support"]
|
|
295
|
-
basic: ["data-[state=active]:text-basic data-[state=active]:after:bg-basic"]
|
|
294
|
+
support: ["data-[state=active]:text-support data-[state=active]:after:bg-support"]
|
|
296
295
|
}),
|
|
297
296
|
/**
|
|
298
297
|
* Change the size of the tabs
|
|
@@ -319,7 +318,7 @@ const ne = x(
|
|
|
319
318
|
}
|
|
320
319
|
],
|
|
321
320
|
defaultVariants: {
|
|
322
|
-
intent: "
|
|
321
|
+
intent: "support",
|
|
323
322
|
size: "md",
|
|
324
323
|
hasMenu: !1,
|
|
325
324
|
orientation: "horizontal"
|
|
@@ -340,15 +339,15 @@ const ne = x(
|
|
|
340
339
|
renderMenu: c,
|
|
341
340
|
...e
|
|
342
341
|
}) => {
|
|
343
|
-
const { intent:
|
|
344
|
-
|
|
342
|
+
const { intent: p, size: z, orientation: d } = L(), m = b(null), y = b(null), C = j(i, y), f = (h) => {
|
|
343
|
+
h.key === "F10" && h.shiftKey && c && m.current && (h.preventDefault(), m.current.click()), l?.(h);
|
|
345
344
|
}, v = !!c, u = d === "vertical" ? "right" : "bottom", S = /* @__PURE__ */ n(
|
|
346
345
|
T.Trigger,
|
|
347
346
|
{
|
|
348
347
|
"data-spark-component": "tabs-trigger",
|
|
349
348
|
ref: C,
|
|
350
349
|
className: ne({
|
|
351
|
-
intent:
|
|
350
|
+
intent: p,
|
|
352
351
|
size: z,
|
|
353
352
|
hasMenu: v,
|
|
354
353
|
orientation: d ?? "horizontal",
|
|
@@ -357,7 +356,7 @@ const ne = x(
|
|
|
357
356
|
asChild: t,
|
|
358
357
|
disabled: s,
|
|
359
358
|
value: r,
|
|
360
|
-
onFocus: ({ target:
|
|
359
|
+
onFocus: ({ target: h }) => h.scrollIntoView({
|
|
361
360
|
behavior: "smooth",
|
|
362
361
|
block: "nearest",
|
|
363
362
|
inline: "nearest"
|
|
@@ -370,7 +369,7 @@ const ne = x(
|
|
|
370
369
|
);
|
|
371
370
|
return v ? /* @__PURE__ */ I("div", { className: d === "vertical" ? "relative w-full" : "relative", children: [
|
|
372
371
|
S,
|
|
373
|
-
/* @__PURE__ */ n("div", { className: "right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2", children: /* @__PURE__ */ n(H, { popoverSide: u, popoverTriggerRef:
|
|
372
|
+
/* @__PURE__ */ n("div", { className: "right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2", children: /* @__PURE__ */ n(H, { popoverSide: u, popoverTriggerRef: m, children: (h) => c?.({ Popover: h }) }) })
|
|
374
373
|
] }) : S;
|
|
375
374
|
};
|
|
376
375
|
W.displayName = "Tabs.Trigger";
|
package/dist/tabs/index.mjs.map
CHANGED
|
@@ -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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"}
|
package/dist/tag/Tag.styles.d.ts
CHANGED
|
@@ -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" | "
|
|
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"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),u=require("../Slot-DQ8z2zsy.js"),t=require("@spark-ui/internal-utils"),g=require("class-variance-authority"),p=[{intent:"main",design:"filled",class:t.tw(["bg-main","text-on-main"])},{intent:"support",design:"filled",class:t.tw(["bg-support","text-on-support"])},{intent:"accent",design:"filled",class:t.tw(["bg-accent","text-on-accent"])},{intent:"success",design:"filled",class:t.tw(["bg-success","text-on-success"])},{intent:"alert",design:"filled",class:t.tw(["bg-alert","text-on-alert"])},{intent:"danger",design:"filled",class:t.tw(["bg-error","text-on-error"])},{intent:"info",design:"filled",class:t.tw(["bg-info","text-on-info"])},{intent:"neutral",design:"filled",class:t.tw(["bg-neutral","text-on-neutral"])},{intent:"surface",design:"filled",class:t.tw(["bg-surface","text-on-surface"])}],f=[{intent:"main",design:"outlined",class:t.tw(["text-main"])},{intent:"support",design:"outlined",class:t.tw(["text-support"])},{intent:"accent",design:"outlined",class:t.tw(["text-accent"])},{intent:"success",design:"outlined",class:t.tw(["text-success"])},{intent:"alert",design:"outlined",class:t.tw(["text-alert"])},{intent:"danger",design:"outlined",class:t.tw(["text-error"])},{intent:"info",design:"outlined",class:t.tw(["text-info"])},{intent:"neutral",design:"outlined",class:t.tw(["text-neutral"])}],x=[{intent:"main",design:"tinted",class:t.tw(["bg-main-container","text-on-main-container"])},{intent:"support",design:"tinted",class:t.tw(["bg-support-container","text-on-support-container"])},{intent:"accent",design:"tinted",class:t.tw(["bg-accent-container","text-on-accent-container"])},{intent:"success",design:"tinted",class:t.tw(["bg-success-container","text-on-success-container"])},{intent:"alert",design:"tinted",class:t.tw(["bg-alert-container","text-on-alert-container"])},{intent:"danger",design:"tinted",class:t.tw(["bg-error-container","text-on-error-container"])},{intent:"info",design:"tinted",class:t.tw(["bg-info-container","text-on-info-container"])},{intent:"neutral",design:"tinted",class:t.tw(["bg-neutral-container","text-on-neutral-container"])}],w=g.cva(["box-border default:inline-flex default:w-fit items-center justify-center gap-sm whitespace-nowrap","text-caption font-bold","px-md"],{variants:{design:t.makeVariants({filled:[],outlined:["border-sm","border-current"],tinted:[]}),size:t.makeVariants({md:["h-sz-20"],lg:["h-sz-24"]}),shape:t.makeVariants({square:[],rounded:["rounded-md"],pill:["rounded-full"]}),intent:t.makeVariants({main:[],support:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[]})},compoundVariants:[...p,...f,...x],defaultVariants:{design:"filled",intent:"support",size:"md",shape:"pill"}}),m=({design:n="filled",intent:e="support",size:s="md",shape:i="pill",asChild:a,className:r,ref:c,...l})=>{const o=a?u.Slot:"span";return d.jsx(o,{"data-spark-component":"tag",ref:c,className:w({className:r,design:n,intent:e,size:s,shape:i}),...l})};exports.Tag=m;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/tag/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/tag/variants/filled.ts","../../src/tag/variants/outlined.ts","../../src/tag/variants/tinted.ts","../../src/tag/Tag.styles.tsx","../../src/tag/Tag.tsx"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n {\n intent: 'main',\n design: 'filled',\n class: tw(['bg-main', 'text-on-main']),\n },\n {\n intent: 'support',\n design: 'filled',\n class: tw(['bg-support', 'text-on-support']),\n },\n {\n intent: 'accent',\n design: 'filled',\n class: tw(['bg-accent', 'text-on-accent']),\n },\n {\n intent: 'basic',\n design: 'filled',\n class: tw(['bg-basic', 'text-on-basic']),\n },\n {\n intent: 'success',\n design: 'filled',\n class: tw(['bg-success', 'text-on-success']),\n },\n {\n intent: 'alert',\n design: 'filled',\n class: tw(['bg-alert', 'text-on-alert']),\n },\n {\n intent: 'danger',\n design: 'filled',\n class: tw(['bg-error', 'text-on-error']),\n },\n {\n intent: 'info',\n design: 'filled',\n class: tw(['bg-info', 'text-on-info']),\n },\n {\n intent: 'neutral',\n design: 'filled',\n class: tw(['bg-neutral', 'text-on-neutral']),\n },\n {\n intent: 'surface',\n design: 'filled',\n class: tw(['bg-surface', 'text-on-surface']),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n {\n intent: 'main',\n design: 'outlined',\n class: tw(['text-main']),\n },\n {\n intent: 'support',\n design: 'outlined',\n class: tw(['text-support']),\n },\n {\n intent: 'accent',\n design: 'outlined',\n class: tw(['text-accent']),\n },\n {\n intent: 'basic',\n design: 'outlined',\n class: tw(['text-basic']),\n },\n {\n intent: 'success',\n design: 'outlined',\n class: tw(['text-success']),\n },\n {\n intent: 'alert',\n design: 'outlined',\n class: tw(['text-alert']),\n },\n {\n intent: 'danger',\n design: 'outlined',\n class: tw(['text-error']),\n },\n {\n intent: 'info',\n design: 'outlined',\n class: tw(['text-info']),\n },\n {\n intent: 'neutral',\n design: 'outlined',\n class: tw(['text-neutral']),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n {\n intent: 'main',\n design: 'tinted',\n class: tw(['bg-main-container', 'text-on-main-container']),\n },\n {\n intent: 'support',\n design: 'tinted',\n class: tw(['bg-support-container', 'text-on-support-container']),\n },\n {\n intent: 'accent',\n design: 'tinted',\n class: tw(['bg-accent-container', 'text-on-accent-container']),\n },\n {\n intent: 'basic',\n design: 'tinted',\n class: tw(['bg-basic-container', 'text-on-basic-container']),\n },\n {\n intent: 'success',\n design: 'tinted',\n class: tw(['bg-success-container', 'text-on-success-container']),\n },\n {\n intent: 'alert',\n design: 'tinted',\n class: tw(['bg-alert-container', 'text-on-alert-container']),\n },\n {\n intent: 'danger',\n design: 'tinted',\n class: tw(['bg-error-container', 'text-on-error-container']),\n },\n {\n intent: 'info',\n design: 'tinted',\n class: tw(['bg-info-container', 'text-on-info-container']),\n },\n {\n intent: 'neutral',\n design: 'tinted',\n class: tw(['bg-neutral-container', 'text-on-neutral-container']),\n },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { filledVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const tagStyles = cva(\n [\n 'box-border default:inline-flex default:w-fit items-center justify-center gap-sm whitespace-nowrap',\n 'text-caption font-bold',\n 'px-md',\n ],\n {\n variants: {\n /**\n * Main style of the tag.\n * - `filled`: Tag will be plain.\n * - `outlined`: Tag will have a surface background with an colored outline/text.\n * - `tinted`: Tag will be filled but using a lighter color scheme.\n */\n design: makeVariants<'design', ['filled', 'outlined', 'tinted']>({\n filled: [],\n outlined: ['border-sm', 'border-current'],\n tinted: [],\n }),\n size: makeVariants<'size', ['md', 'lg']>({\n md: ['h-sz-20'],\n lg: ['h-sz-24'],\n }),\n shape: makeVariants<'shape', ['square', 'rounded', 'pill']>({\n square: [],\n rounded: ['rounded-md'],\n pill: ['rounded-full'],\n }),\n /**\n * Color scheme of the tag.\n */\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'basic',\n 'success',\n 'alert',\n 'info',\n 'neutral',\n 'danger',\n 'surface',\n ]\n >({\n main: [],\n support: [],\n accent: [],\n basic: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n }),\n },\n compoundVariants: [...filledVariants, ...outlinedVariants, ...tintedVariants],\n defaultVariants: {\n design: 'filled',\n intent: 'basic',\n size: 'md',\n shape: 'pill',\n },\n }\n)\n\nexport type TagStylesProps = VariantProps<typeof tagStyles>\n","import { ButtonHTMLAttributes, type PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { tagStyles, type TagStylesProps } from './Tag.styles'\n\ninterface BaseTagProps\n extends PropsWithChildren<ButtonHTMLAttributes<HTMLSpanElement>>,\n TagStylesProps {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n}\n\ninterface FilteredDesignIntent<\n Design extends TagProps['design'],\n K extends TagStylesProps['intent'] | never = never,\n> {\n design?: Design\n intent?: Exclude<TagStylesProps['intent'], K>\n ref?: Ref<HTMLButtonElement>\n}\n\nexport type ValidTagDesignIntent =\n | FilteredDesignIntent<'tinted', 'surface'>\n | FilteredDesignIntent<'outlined', 'surface'>\n | FilteredDesignIntent<'filled'>\n\nexport type TagProps = BaseTagProps & ValidTagDesignIntent\n\nexport const Tag = ({\n design = 'filled',\n intent = 'basic',\n size = 'md',\n shape = 'pill',\n asChild,\n className,\n ref,\n ...others\n}: TagProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n data-spark-component=\"tag\"\n ref={ref}\n className={tagStyles({\n className,\n design,\n intent,\n size,\n shape,\n })}\n {...others}\n />\n )\n}\n"],"names":["filledVariants","tw","outlinedVariants","tintedVariants","tagStyles","cva","makeVariants","Tag","design","intent","size","shape","asChild","className","ref","others","Component","Slot","jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/tag/variants/filled.ts","../../src/tag/variants/outlined.ts","../../src/tag/variants/tinted.ts","../../src/tag/Tag.styles.tsx","../../src/tag/Tag.tsx"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n {\n intent: 'main',\n design: 'filled',\n class: tw(['bg-main', 'text-on-main']),\n },\n {\n intent: 'support',\n design: 'filled',\n class: tw(['bg-support', 'text-on-support']),\n },\n {\n intent: 'accent',\n design: 'filled',\n class: tw(['bg-accent', 'text-on-accent']),\n },\n {\n intent: 'success',\n design: 'filled',\n class: tw(['bg-success', 'text-on-success']),\n },\n {\n intent: 'alert',\n design: 'filled',\n class: tw(['bg-alert', 'text-on-alert']),\n },\n {\n intent: 'danger',\n design: 'filled',\n class: tw(['bg-error', 'text-on-error']),\n },\n {\n intent: 'info',\n design: 'filled',\n class: tw(['bg-info', 'text-on-info']),\n },\n {\n intent: 'neutral',\n design: 'filled',\n class: tw(['bg-neutral', 'text-on-neutral']),\n },\n {\n intent: 'surface',\n design: 'filled',\n class: tw(['bg-surface', 'text-on-surface']),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n {\n intent: 'main',\n design: 'outlined',\n class: tw(['text-main']),\n },\n {\n intent: 'support',\n design: 'outlined',\n class: tw(['text-support']),\n },\n {\n intent: 'accent',\n design: 'outlined',\n class: tw(['text-accent']),\n },\n {\n intent: 'success',\n design: 'outlined',\n class: tw(['text-success']),\n },\n {\n intent: 'alert',\n design: 'outlined',\n class: tw(['text-alert']),\n },\n {\n intent: 'danger',\n design: 'outlined',\n class: tw(['text-error']),\n },\n {\n intent: 'info',\n design: 'outlined',\n class: tw(['text-info']),\n },\n {\n intent: 'neutral',\n design: 'outlined',\n class: tw(['text-neutral']),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n {\n intent: 'main',\n design: 'tinted',\n class: tw(['bg-main-container', 'text-on-main-container']),\n },\n {\n intent: 'support',\n design: 'tinted',\n class: tw(['bg-support-container', 'text-on-support-container']),\n },\n {\n intent: 'accent',\n design: 'tinted',\n class: tw(['bg-accent-container', 'text-on-accent-container']),\n },\n {\n intent: 'success',\n design: 'tinted',\n class: tw(['bg-success-container', 'text-on-success-container']),\n },\n {\n intent: 'alert',\n design: 'tinted',\n class: tw(['bg-alert-container', 'text-on-alert-container']),\n },\n {\n intent: 'danger',\n design: 'tinted',\n class: tw(['bg-error-container', 'text-on-error-container']),\n },\n {\n intent: 'info',\n design: 'tinted',\n class: tw(['bg-info-container', 'text-on-info-container']),\n },\n {\n intent: 'neutral',\n design: 'tinted',\n class: tw(['bg-neutral-container', 'text-on-neutral-container']),\n },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { filledVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const tagStyles = cva(\n [\n 'box-border default:inline-flex default:w-fit items-center justify-center gap-sm whitespace-nowrap',\n 'text-caption font-bold',\n 'px-md',\n ],\n {\n variants: {\n /**\n * Main style of the tag.\n * - `filled`: Tag will be plain.\n * - `outlined`: Tag will have a surface background with an colored outline/text.\n * - `tinted`: Tag will be filled but using a lighter color scheme.\n */\n design: makeVariants<'design', ['filled', 'outlined', 'tinted']>({\n filled: [],\n outlined: ['border-sm', 'border-current'],\n tinted: [],\n }),\n size: makeVariants<'size', ['md', 'lg']>({\n md: ['h-sz-20'],\n lg: ['h-sz-24'],\n }),\n shape: makeVariants<'shape', ['square', 'rounded', 'pill']>({\n square: [],\n rounded: ['rounded-md'],\n pill: ['rounded-full'],\n }),\n /**\n * Color scheme of the tag.\n */\n intent: makeVariants<\n 'intent',\n ['main', 'support', 'accent', 'success', 'alert', 'info', 'neutral', 'danger', 'surface']\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n }),\n },\n compoundVariants: [...filledVariants, ...outlinedVariants, ...tintedVariants],\n defaultVariants: {\n design: 'filled',\n intent: 'support',\n size: 'md',\n shape: 'pill',\n },\n }\n)\n\nexport type TagStylesProps = VariantProps<typeof tagStyles>\n","import { ButtonHTMLAttributes, type PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { tagStyles, type TagStylesProps } from './Tag.styles'\n\ninterface BaseTagProps\n extends PropsWithChildren<ButtonHTMLAttributes<HTMLSpanElement>>,\n TagStylesProps {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n}\n\ninterface FilteredDesignIntent<\n Design extends TagProps['design'],\n K extends TagStylesProps['intent'] | never = never,\n> {\n design?: Design\n intent?: Exclude<TagStylesProps['intent'], K>\n ref?: Ref<HTMLButtonElement>\n}\n\nexport type ValidTagDesignIntent =\n | FilteredDesignIntent<'tinted', 'surface'>\n | FilteredDesignIntent<'outlined', 'surface'>\n | FilteredDesignIntent<'filled'>\n\nexport type TagProps = BaseTagProps & ValidTagDesignIntent\n\nexport const Tag = ({\n design = 'filled',\n intent = 'support',\n size = 'md',\n shape = 'pill',\n asChild,\n className,\n ref,\n ...others\n}: TagProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n data-spark-component=\"tag\"\n ref={ref}\n className={tagStyles({\n className,\n design,\n intent,\n size,\n shape,\n })}\n {...others}\n />\n )\n}\n"],"names":["filledVariants","tw","outlinedVariants","tintedVariants","tagStyles","cva","makeVariants","Tag","design","intent","size","shape","asChild","className","ref","others","Component","Slot","jsx"],"mappings":"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"}
|