npm - @epilot/zenith-react - Versions diffs - 0.2.0-next.1 → 0.2.0-next.4 - Mend

@epilot/zenith-react 0.2.0-next.1 → 0.2.0-next.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (273) hide show

package/dist/components/scroll-overflow/scroll-overflow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scroll-overflow.js","sources":["../../../src/components/scroll-overflow/scroll-overflow.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { useScrollbarStyles } from \"../scroll-area/scrollbar-styles\"\n\nexport type UseScrollOverflowOptions = {\n /** Scroll distance per step in pixels. Default: 200 /\n scrollStep?: number\n /* Scroll orientation. Default: \"horizontal\" /\n orientation?: \"horizontal\" \| \"vertical\"\n}\n\nexport type UseScrollOverflowReturn = {\n /* Ref to attach to the scroll container (Base UI Viewport) /\n scrollRef: React.RefObject<HTMLDivElement \| null>\n /* Whether the content overflows the container /\n hasOverflow: boolean\n /* Whether there is hidden content before the visible area (left or top) /\n canScrollStart: boolean\n /* Whether there is hidden content after the visible area (right or bottom) /\n canScrollEnd: boolean\n /* Scroll toward the start (left or up) by scrollStep /\n scrollToStart: () => void\n /* Scroll toward the end (right or down) by scrollStep /\n scrollToEnd: () => void\n}\n\nfunction getScrollBehavior(): ScrollBehavior {\n if (typeof window === \"undefined\" \|\| !window.matchMedia) return \"auto\"\n return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n ? \"auto\"\n : \"smooth\"\n}\n\nexport function useScrollOverflow(\n options: UseScrollOverflowOptions = {}\n): UseScrollOverflowReturn {\n const { scrollStep = 200, orientation = \"horizontal\" } = options\n const scrollRef = React.useRef<HTMLDivElement \| null>(null)\n const [hasOverflow, setHasOverflow] = React.useState(false)\n const [canScrollStart, setCanScrollStart] = React.useState(false)\n const [canScrollEnd, setCanScrollEnd] = React.useState(false)\n\n const isHorizontal = orientation === \"horizontal\"\n\n const updateScrollState = React.useCallback(() => {\n const el = scrollRef.current\n if (!el) return\n\n if (isHorizontal) {\n const scrollLeft = Math.round(el.scrollLeft)\n const scrollWidth = el.scrollWidth\n const clientWidth = el.clientWidth\n\n setHasOverflow(scrollWidth > clientWidth)\n setCanScrollStart(scrollLeft > 0)\n setCanScrollEnd(scrollLeft + clientWidth < scrollWidth - 1)\n } else {\n const scrollTop = Math.round(el.scrollTop)\n const scrollHeight = el.scrollHeight\n const clientHeight = el.clientHeight\n\n setHasOverflow(scrollHeight > clientHeight)\n setCanScrollStart(scrollTop > 0)\n setCanScrollEnd(scrollTop + clientHeight < scrollHeight - 1)\n }\n }, [isHorizontal])\n\n React.useEffect(() => {\n const el = scrollRef.current\n if (!el) return\n\n updateScrollState()\n\n let observer: ResizeObserver \| null = null\n if (typeof ResizeObserver !== \"undefined\") {\n observer = new ResizeObserver(() => {\n updateScrollState()\n })\n observer.observe(el)\n for (const child of el.children) {\n observer.observe(child)\n }\n }\n\n el.addEventListener(\"scroll\", updateScrollState, { passive: true })\n\n return () => {\n observer?.disconnect()\n el.removeEventListener(\"scroll\", updateScrollState)\n }\n }, [updateScrollState])\n\n const scrollToStartFn = React.useCallback(() => {\n scrollRef.current?.scrollBy({\n [isHorizontal ? \"left\" : \"top\"]: -scrollStep,\n behavior: getScrollBehavior(),\n })\n }, [scrollStep, isHorizontal])\n\n const scrollToEndFn = React.useCallback(() => {\n scrollRef.current?.scrollBy({\n [isHorizontal ? \"left\" : \"top\"]: scrollStep,\n behavior: getScrollBehavior(),\n })\n }, [scrollStep, isHorizontal])\n\n return {\n scrollRef,\n hasOverflow,\n canScrollStart,\n canScrollEnd,\n scrollToStart: scrollToStartFn,\n scrollToEnd: scrollToEndFn,\n }\n}\n\nconst ChevronLeftIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M 8.86 10.51 C 8.94 10.51 9.02 10.49 9.08 10.43 C 9.14 10.38 9.17 10.3 9.17 10.21 V 5.79 C 9.17 5.7 9.14 5.62 9.08 5.57 C 9.01 5.51 8.94 5.49 8.86 5.49 C 8.84 5.49 8.77 5.52 8.65 5.58 L 6.55 7.68 C 6.5 7.73 6.47 7.78 6.44 7.83 C 6.42 7.88 6.41 7.94 6.41 8 C 6.41 8.06 6.42 8.12 6.44 8.17 C 6.47 8.22 6.5 8.27 6.55 8.32 L 8.65 10.42 C 8.68 10.45 8.71 10.47 8.75 10.49 C 8.78 10.51 8.82 10.51 8.86 10.51 Z\" />\n </svg>\n)\n\nconst ChevronRightIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M7.14 10.51C7.06 10.51 6.98 10.49 6.92 10.43C6.86 10.38 6.83 10.3 6.83 10.21V5.79C6.83 5.7 6.86 5.62 6.92 5.57C6.99 5.51 7.06 5.49 7.14 5.49C7.16 5.49 7.23 5.52 7.35 5.58L9.45 7.68C9.5 7.73 9.53 7.78 9.56 7.83C9.58 7.88 9.59 7.94 9.59 8C9.59 8.06 9.58 8.12 9.56 8.17C9.53 8.22 9.5 8.27 9.45 8.32L7.35 10.42C7.32 10.45 7.29 10.47 7.25 10.49C7.22 10.51 7.18 10.51 7.14 10.51Z\" />\n </svg>\n)\n\nconst ChevronUpIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M5.49 7.14C5.49 7.06 5.51 6.98 5.57 6.92C5.62 6.86 5.7 6.83 5.79 6.83H10.21C10.3 6.83 10.38 6.86 10.43 6.92C10.49 6.99 10.51 7.06 10.51 7.14C10.51 7.16 10.48 7.23 10.42 7.35L8.32 9.45C8.27 9.5 8.22 9.53 8.17 9.56C8.12 9.58 8.06 9.59 8 9.59C7.94 9.59 7.88 9.58 7.83 9.56C7.78 9.53 7.73 9.5 7.68 9.45L5.58 7.35C5.55 7.32 5.53 7.29 5.51 7.25C5.49 7.22 5.49 7.18 5.49 7.14Z\" />\n </svg>\n)\n\nconst ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M10.51 8.86C10.51 8.94 10.49 9.02 10.43 9.08C10.38 9.14 10.3 9.17 10.21 9.17H5.79C5.7 9.17 5.62 9.14 5.57 9.08C5.51 9.01 5.49 8.94 5.49 8.86C5.49 8.84 5.52 8.77 5.58 8.65L7.68 6.55C7.73 6.5 7.78 6.47 7.83 6.44C7.88 6.42 7.94 6.41 8 6.41C8.06 6.41 8.12 6.42 8.17 6.44C8.22 6.47 8.27 6.5 8.32 6.55L10.42 8.65C10.45 8.68 10.47 8.71 10.49 8.75C10.51 8.78 10.51 8.82 10.51 8.86Z\" />\n </svg>\n)\n\nconst useStyles = makeZenithStyles({\n container: {\n position: \"relative\",\n display: \"flex\",\n },\n containerHorizontal: {\n alignItems: \"center\",\n },\n containerVertical: {\n flexDirection: \"column\",\n },\n fade: {\n position: \"absolute\",\n zIndex: 10,\n pointerEvents: \"none\",\n },\n fadeHorizontalStart: {\n left: 0,\n top: 0,\n bottom: 0,\n },\n fadeHorizontalEnd: {\n right: 0,\n top: 0,\n bottom: 0,\n },\n fadeVerticalStart: {\n top: 0,\n left: 0,\n right: 0,\n },\n fadeVerticalEnd: {\n bottom: 0,\n left: 0,\n right: 0,\n },\n shadowHorizontalStart: {\n boxShadow: \"inset 8px 0 6px -6px rgba(0,0,0,0.08)\",\n },\n shadowHorizontalEnd: {\n boxShadow: \"inset -8px 0 6px -6px rgba(0,0,0,0.08)\",\n },\n shadowVerticalStart: {\n boxShadow: \"inset 0 8px 6px -6px rgba(0,0,0,0.08)\",\n },\n shadowVerticalEnd: {\n boxShadow: \"inset 0 -8px 6px -6px rgba(0,0,0,0.08)\",\n },\n arrowButton: {\n ...nativeControl,\n position: \"absolute\",\n zIndex: 20,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n backgroundColor: \"transparent\",\n ...shorthands.borderStyle(\"none\"),\n ...shorthands.borderWidth(0),\n ...shorthands.padding(0),\n },\n arrowHorizontalStart: {\n ...boxModel,\n left: 0,\n top: 0,\n bottom: 0,\n width: \"1.5rem\",\n },\n arrowHorizontalEnd: {\n ...boxModel,\n right: 0,\n top: 0,\n bottom: 0,\n width: \"1.5rem\",\n },\n arrowVerticalStart: {\n ...boxModel,\n top: 0,\n left: 0,\n right: 0,\n height: \"1.5rem\",\n },\n arrowVerticalEnd: {\n ...boxModel,\n bottom: 0,\n left: 0,\n right: 0,\n height: \"1.5rem\",\n },\n arrowBadge: {\n ...boxModel,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n backgroundColor: tokens.grayA8,\n ...shorthands.borderRadius(tokens.radiusSm),\n backdropFilter: \"blur(4px)\",\n color: tokens.gray1,\n \":hover\": {\n backgroundColor: tokens.grayA12,\n },\n },\n arrowIcon: {\n ...boxModel,\n width: \"1rem\",\n height: \"1rem\",\n },\n scrollAreaRoot: {\n ...shorthands.overflow(\"hidden\"),\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n },\n scrollAreaRootHorizontal: {\n ...boxModel,\n minWidth: 0,\n },\n scrollAreaRootVertical: {\n ...boxModel,\n minHeight: 0,\n display: \"flex\",\n flexDirection: \"column\",\n },\n scrollAreaRootScrollbarHorizontal: {\n display: \"flex\",\n flexDirection: \"column\",\n },\n scrollAreaRootScrollbarVertical: {\n display: \"flex\",\n flexDirection: \"row\",\n },\n viewport: {\n ...boxModel,\n ...shorthands.borderRadius(tokens.radiusMd),\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineOffset: \"2px\",\n outlineStyle: \"solid\",\n outlineColor: tokens.accentA8,\n },\n },\n viewportHorizontal: {\n \"& > div\": {\n display: \"flex\",\n flexDirection: \"row\",\n },\n },\n viewportVertical: {\n ...boxModel,\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n minHeight: 0,\n },\n viewportFlex: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n },\n scrollbar: {\n ...boxModel,\n ...shorthands.padding(\"1px\"),\n transitionProperty: \"color, background-color, border-color\",\n transitionDuration: \"150ms\",\n },\n scrollbarHidden: {\n display: \"none\",\n },\n scrollbarHorizontal: {\n ...boxModel,\n height: \"0.5rem\",\n flexDirection: \"column\",\n },\n scrollbarVertical: {\n ...boxModel,\n width: \"0.5rem\",\n flexDirection: \"row\",\n },\n thumb: {\n backgroundColor: tokens.grayA8,\n },\n})\n\nexport type ScrollOverflowProps = React.ComponentProps<\n typeof ScrollAreaPrimitive.Root\n> &\n UseScrollOverflowOptions & {\n /* Show navigation arrow buttons on edges. Default: false /\n arrows?: boolean\n /* Show gradient fade indicators on edges. Default: true /\n gradients?: boolean\n /* Gradient width in pixels. Default: 40 /\n gradientWidth?: number\n /* Gradient base color (CSS value). Should match the parent background. Default: \"var(--volt-body)\" /\n gradientColor?: string\n /* Show inset shadow on overflow edges. Default: true /\n shadow?: boolean\n /* Show a styled scrollbar track. Default: false /\n scrollbar?: boolean\n }\n\nexport const ScrollOverflow = React.forwardRef<\n HTMLDivElement,\n ScrollOverflowProps\n>(function ScrollOverflow(\n {\n className,\n children,\n arrows = false,\n gradients = true,\n gradientWidth = 40,\n gradientColor = \"var(--volt-body)\",\n shadow = true,\n scrollbar = false,\n scrollStep,\n orientation = \"horizontal\",\n ...props\n },\n ref\n) {\n const styles = useStyles()\n const scrollbarStyles = useScrollbarStyles()\n const {\n scrollRef,\n hasOverflow,\n canScrollStart,\n canScrollEnd,\n scrollToStart,\n scrollToEnd,\n } = useScrollOverflow({ scrollStep, orientation })\n\n const isHorizontal = orientation === \"horizontal\"\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n // Only handle when the viewport itself is focused, not children\n if (e.target !== e.currentTarget) return\n\n const prevKey = isHorizontal ? \"ArrowLeft\" : \"ArrowUp\"\n const nextKey = isHorizontal ? \"ArrowRight\" : \"ArrowDown\"\n\n switch (e.key) {\n case prevKey:\n e.preventDefault()\n scrollToStart()\n break\n case nextKey:\n e.preventDefault()\n scrollToEnd()\n break\n case \"Home\":\n e.preventDefault()\n scrollRef.current?.scrollTo({\n [isHorizontal ? \"left\" : \"top\"]: 0,\n behavior: \"smooth\",\n })\n break\n case \"End\":\n e.preventDefault()\n scrollRef.current?.scrollTo({\n [isHorizontal ? \"left\" : \"top\"]: isHorizontal\n ? scrollRef.current.scrollWidth\n : scrollRef.current.scrollHeight,\n behavior: \"smooth\",\n })\n break\n }\n }\n\n return (\n <div\n ref={ref}\n data-slot=\"scroll-overflow\"\n {...{ [SLOT_ATTR]: \"scroll-overflow\" }}\n data-orientation={orientation}\n data-has-overflow={hasOverflow \|\| undefined}\n data-can-scroll-start={canScrollStart \|\| undefined}\n data-can-scroll-end={canScrollEnd \|\| undefined}\n className={mergeClasses(\n styles.container,\n isHorizontal ? styles.containerHorizontal : styles.containerVertical,\n className\n )}\n >\n {/ Start gradient + shadow /}\n {gradients && canScrollStart && (\n <div\n data-slot=\"scroll-overflow-fade-start\"\n {...{ [SLOT_ATTR]: \"scroll-overflow-fade-start\" }}\n aria-hidden=\"true\"\n className={mergeClasses(\n styles.fade,\n isHorizontal\n ? styles.fadeHorizontalStart\n : styles.fadeVerticalStart,\n shadow &&\n (isHorizontal\n ? styles.shadowHorizontalStart\n : styles.shadowVerticalStart)\n )}\n style={\n isHorizontal\n ? {\n width: gradientWidth,\n background: `linear-gradient(to right, ${gradientColor}, transparent)`,\n }\n : {\n height: gradientWidth,\n background: `linear-gradient(to bottom, ${gradientColor}, transparent)`,\n }\n }\n />\n )}\n\n {/ Start arrow button /}\n {arrows && canScrollStart && (\n <button\n data-slot=\"scroll-overflow-arrow-start\"\n {...{ [SLOT_ATTR]: \"scroll-overflow-arrow-start\" }}\n type=\"button\"\n tabIndex={-1}\n aria-label={isHorizontal ? \"Scroll left\" : \"Scroll up\"}\n onClick={scrollToStart}\n className={mergeClasses(\n styles.arrowButton,\n isHorizontal\n ? styles.arrowHorizontalStart\n : styles.arrowVerticalStart\n )}\n >\n <span\n data-slot=\"scroll-overflow-arrow-icon\"\n {...{ [SLOT_ATTR]: \"scroll-overflow-arrow-icon\" }}\n className={styles.arrowBadge}\n >\n {isHorizontal ? (\n <ChevronLeftIcon className={styles.arrowIcon} />\n ) : (\n <ChevronUpIcon className={styles.arrowIcon} />\n )}\n </span>\n </button>\n )}\n\n {/ Radix ScrollArea /}\n <ScrollAreaPrimitive.Root\n data-slot=\"scroll-overflow-root\"\n type=\"scroll\"\n {...{ [SLOT_ATTR]: \"scroll-overflow-root\" }}\n className={mergeClasses(\n styles.scrollAreaRoot,\n isHorizontal\n ? styles.scrollAreaRootHorizontal\n : styles.scrollAreaRootVertical,\n scrollbar &&\n (isHorizontal\n ? styles.scrollAreaRootScrollbarHorizontal\n : styles.scrollAreaRootScrollbarVertical)\n )}\n {...props}\n >\n <ScrollAreaPrimitive.Viewport\n ref={scrollRef}\n data-slot=\"scroll-overflow-viewport\"\n {...{ [SLOT_ATTR]: \"scroll-overflow-viewport\" }}\n tabIndex={hasOverflow ? 0 : undefined}\n onKeyDown={handleKeyDown}\n className={mergeClasses(\n styles.viewport,\n isHorizontal && styles.viewportHorizontal,\n scrollbar && styles.viewportFlex,\n !isHorizontal && styles.viewportVertical\n )}\n >\n {children}\n </ScrollAreaPrimitive.Viewport>\n\n <ScrollAreaPrimitive.Scrollbar\n forceMount\n orientation={orientation}\n data-slot=\"scroll-overflow-scrollbar\"\n {...{ [SLOT_ATTR]: \"scroll-overflow-scrollbar\" }}\n className={mergeClasses(\n scrollbarStyles.track,\n scrollbar ? styles.scrollbar : styles.scrollbarHidden,\n isHorizontal ? styles.scrollbarHorizontal : styles.scrollbarVertical\n )}\n >\n <ScrollAreaPrimitive.Thumb\n data-slot=\"scroll-overflow-thumb\"\n {...{ [SLOT_ATTR]: \"scroll-overflow-thumb\" }}\n className={mergeClasses(scrollbarStyles.thumb, styles.thumb)}\n />\n </ScrollAreaPrimitive.Scrollbar>\n </ScrollAreaPrimitive.Root>\n\n {/ End gradient + shadow /}\n {gradients && canScrollEnd && (\n <div\n data-slot=\"scroll-overflow-fade-end\"\n {...{ [SLOT_ATTR]: \"scroll-overflow-fade-end\" }}\n aria-hidden=\"true\"\n className={mergeClasses(\n styles.fade,\n isHorizontal ? styles.fadeHorizontalEnd : styles.fadeVerticalEnd,\n shadow &&\n (isHorizontal\n ? styles.shadowHorizontalEnd\n : styles.shadowVerticalEnd)\n )}\n style={\n isHorizontal\n ? {\n width: gradientWidth,\n background: `linear-gradient(to left, ${gradientColor}, transparent)`,\n }\n : {\n height: gradientWidth,\n background: `linear-gradient(to top, ${gradientColor}, transparent)`,\n }\n }\n />\n )}\n\n {/ End arrow button */}\n {arrows && canScrollEnd && (\n <button\n data-slot=\"scroll-overflow-arrow-end\"\n {...{ [SLOT_ATTR]: \"scroll-overflow-arrow-end\" }}\n type=\"button\"\n tabIndex={-1}\n aria-label={isHorizontal ? \"Scroll right\" : \"Scroll down\"}\n onClick={scrollToEnd}\n className={mergeClasses(\n styles.arrowButton,\n isHorizontal ? styles.arrowHorizontalEnd : styles.arrowVerticalEnd\n )}\n >\n <span\n data-slot=\"scroll-overflow-arrow-icon\"\n {...{ [SLOT_ATTR]: \"scroll-overflow-arrow-icon\" }}\n className={styles.arrowBadge}\n >\n {isHorizontal ? (\n <ChevronRightIcon className={styles.arrowIcon} />\n ) : (\n <ChevronDownIcon className={styles.arrowIcon} />\n )}\n </span>\n </button>\n )}\n </div>\n )\n})\n"],"names":["getScrollBehavior","useScrollOverflow","options","scrollStep","orientation","scrollRef","React","hasOverflow","setHasOverflow","canScrollStart","setCanScrollStart","canScrollEnd","setCanScrollEnd","isHorizontal","updateScrollState","el","scrollLeft","scrollWidth","clientWidth","scrollTop","scrollHeight","clientHeight","observer","child","scrollToStartFn","_a","scrollToEndFn","ChevronLeftIcon","props","jsx","ChevronRightIcon","ChevronUpIcon","ChevronDownIcon","useStyles","makeZenithStyles","nativeControl","shorthands","boxModel","tokens.grayA8","tokens.radiusSm","tokens.gray1","tokens.grayA12","tokens.radiusMd","tokens.accentA8","ScrollOverflow","className","children","arrows","gradients","gradientWidth","gradientColor","shadow","scrollbar","ref","styles","scrollbarStyles","useScrollbarStyles","scrollToStart","scrollToEnd","handleKeyDown","e","prevKey","nextKey","_b","jsxs","SLOT_ATTR","mergeClasses","ScrollAreaPrimitive.Root","ScrollAreaPrimitive.Viewport","ScrollAreaPrimitive.Scrollbar","ScrollAreaPrimitive.Thumb"],"mappings":"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"}
1	+ {"version":3,"file":"scroll-overflow.js","sources":["../../../src/components/scroll-overflow/scroll-overflow.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { CSPProvider } from \"@base-ui/react/csp-provider\"\nimport { DirectionProvider } from \"@base-ui/react/direction-provider\"\nimport { ScrollArea as Primitive } from \"@base-ui/react/scroll-area\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { useScrollbarStyles } from \"../scroll-area/scrollbar-styles\"\n\nexport type UseScrollOverflowOptions = {\n /** Scroll distance per step in pixels. Default: 200 /\n scrollStep?: number\n /* Scroll orientation. Default: \"horizontal\" /\n orientation?: \"horizontal\" \| \"vertical\"\n}\n\nexport type UseScrollOverflowReturn = {\n /* Ref to attach to the scroll container (Base UI Viewport) /\n scrollRef: React.RefObject<HTMLDivElement \| null>\n /* Whether the content overflows the container /\n hasOverflow: boolean\n /* Whether there is hidden content before the visible area (left or top) /\n canScrollStart: boolean\n /* Whether there is hidden content after the visible area (right or bottom) /\n canScrollEnd: boolean\n /* Scroll toward the start (left or up) by scrollStep /\n scrollToStart: () => void\n /* Scroll toward the end (right or down) by scrollStep /\n scrollToEnd: () => void\n}\n\nfunction getScrollBehavior(): ScrollBehavior {\n if (typeof window === \"undefined\" \|\| !window.matchMedia) return \"auto\"\n return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n ? \"auto\"\n : \"smooth\"\n}\n\nexport function useScrollOverflow(\n options: UseScrollOverflowOptions = {}\n): UseScrollOverflowReturn {\n const { scrollStep = 200, orientation = \"horizontal\" } = options\n const scrollRef = React.useRef<HTMLDivElement \| null>(null)\n const [hasOverflow, setHasOverflow] = React.useState(false)\n const [canScrollStart, setCanScrollStart] = React.useState(false)\n const [canScrollEnd, setCanScrollEnd] = React.useState(false)\n\n const isHorizontal = orientation === \"horizontal\"\n\n const updateScrollState = React.useCallback(() => {\n const el = scrollRef.current\n if (!el) return\n\n if (isHorizontal) {\n const scrollLeft = Math.round(el.scrollLeft)\n const scrollWidth = el.scrollWidth\n const clientWidth = el.clientWidth\n\n setHasOverflow(scrollWidth > clientWidth)\n setCanScrollStart(scrollLeft > 0)\n setCanScrollEnd(scrollLeft + clientWidth < scrollWidth - 1)\n } else {\n const scrollTop = Math.round(el.scrollTop)\n const scrollHeight = el.scrollHeight\n const clientHeight = el.clientHeight\n\n setHasOverflow(scrollHeight > clientHeight)\n setCanScrollStart(scrollTop > 0)\n setCanScrollEnd(scrollTop + clientHeight < scrollHeight - 1)\n }\n }, [isHorizontal])\n\n React.useEffect(() => {\n const el = scrollRef.current\n if (!el) return\n\n updateScrollState()\n\n let observer: ResizeObserver \| null = null\n if (typeof ResizeObserver !== \"undefined\") {\n observer = new ResizeObserver(() => {\n updateScrollState()\n })\n observer.observe(el)\n for (const child of el.children) {\n observer.observe(child)\n }\n }\n\n el.addEventListener(\"scroll\", updateScrollState, { passive: true })\n\n return () => {\n observer?.disconnect()\n el.removeEventListener(\"scroll\", updateScrollState)\n }\n }, [updateScrollState])\n\n const scrollToStartFn = React.useCallback(() => {\n scrollRef.current?.scrollBy({\n [isHorizontal ? \"left\" : \"top\"]: -scrollStep,\n behavior: getScrollBehavior(),\n })\n }, [scrollStep, isHorizontal])\n\n const scrollToEndFn = React.useCallback(() => {\n scrollRef.current?.scrollBy({\n [isHorizontal ? \"left\" : \"top\"]: scrollStep,\n behavior: getScrollBehavior(),\n })\n }, [scrollStep, isHorizontal])\n\n return {\n scrollRef,\n hasOverflow,\n canScrollStart,\n canScrollEnd,\n scrollToStart: scrollToStartFn,\n scrollToEnd: scrollToEndFn,\n }\n}\n\nconst ChevronLeftIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M 8.86 10.51 C 8.94 10.51 9.02 10.49 9.08 10.43 C 9.14 10.38 9.17 10.3 9.17 10.21 V 5.79 C 9.17 5.7 9.14 5.62 9.08 5.57 C 9.01 5.51 8.94 5.49 8.86 5.49 C 8.84 5.49 8.77 5.52 8.65 5.58 L 6.55 7.68 C 6.5 7.73 6.47 7.78 6.44 7.83 C 6.42 7.88 6.41 7.94 6.41 8 C 6.41 8.06 6.42 8.12 6.44 8.17 C 6.47 8.22 6.5 8.27 6.55 8.32 L 8.65 10.42 C 8.68 10.45 8.71 10.47 8.75 10.49 C 8.78 10.51 8.82 10.51 8.86 10.51 Z\" />\n </svg>\n)\n\nconst ChevronRightIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M7.14 10.51C7.06 10.51 6.98 10.49 6.92 10.43C6.86 10.38 6.83 10.3 6.83 10.21V5.79C6.83 5.7 6.86 5.62 6.92 5.57C6.99 5.51 7.06 5.49 7.14 5.49C7.16 5.49 7.23 5.52 7.35 5.58L9.45 7.68C9.5 7.73 9.53 7.78 9.56 7.83C9.58 7.88 9.59 7.94 9.59 8C9.59 8.06 9.58 8.12 9.56 8.17C9.53 8.22 9.5 8.27 9.45 8.32L7.35 10.42C7.32 10.45 7.29 10.47 7.25 10.49C7.22 10.51 7.18 10.51 7.14 10.51Z\" />\n </svg>\n)\n\nconst ChevronUpIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M5.49 7.14C5.49 7.06 5.51 6.98 5.57 6.92C5.62 6.86 5.7 6.83 5.79 6.83H10.21C10.3 6.83 10.38 6.86 10.43 6.92C10.49 6.99 10.51 7.06 10.51 7.14C10.51 7.16 10.48 7.23 10.42 7.35L8.32 9.45C8.27 9.5 8.22 9.53 8.17 9.56C8.12 9.58 8.06 9.59 8 9.59C7.94 9.59 7.88 9.58 7.83 9.56C7.78 9.53 7.73 9.5 7.68 9.45L5.58 7.35C5.55 7.32 5.53 7.29 5.51 7.25C5.49 7.22 5.49 7.18 5.49 7.14Z\" />\n </svg>\n)\n\nconst ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M10.51 8.86C10.51 8.94 10.49 9.02 10.43 9.08C10.38 9.14 10.3 9.17 10.21 9.17H5.79C5.7 9.17 5.62 9.14 5.57 9.08C5.51 9.01 5.49 8.94 5.49 8.86C5.49 8.84 5.52 8.77 5.58 8.65L7.68 6.55C7.73 6.5 7.78 6.47 7.83 6.44C7.88 6.42 7.94 6.41 8 6.41C8.06 6.41 8.12 6.42 8.17 6.44C8.22 6.47 8.27 6.5 8.32 6.55L10.42 8.65C10.45 8.68 10.47 8.71 10.49 8.75C10.51 8.78 10.51 8.82 10.51 8.86Z\" />\n </svg>\n)\n\nconst useStyles = makeZenithStyles({\n container: {\n position: \"relative\",\n display: \"flex\",\n },\n containerHorizontal: {\n alignItems: \"center\",\n },\n containerVertical: {\n flexDirection: \"column\",\n },\n fade: {\n position: \"absolute\",\n zIndex: 10,\n pointerEvents: \"none\",\n },\n fadeHorizontalStart: {\n left: 0,\n top: 0,\n bottom: 0,\n },\n fadeHorizontalEnd: {\n right: 0,\n top: 0,\n bottom: 0,\n },\n fadeVerticalStart: {\n top: 0,\n left: 0,\n right: 0,\n },\n fadeVerticalEnd: {\n bottom: 0,\n left: 0,\n right: 0,\n },\n shadowHorizontalStart: {\n boxShadow: \"inset 8px 0 6px -6px rgba(0,0,0,0.08)\",\n },\n shadowHorizontalEnd: {\n boxShadow: \"inset -8px 0 6px -6px rgba(0,0,0,0.08)\",\n },\n shadowVerticalStart: {\n boxShadow: \"inset 0 8px 6px -6px rgba(0,0,0,0.08)\",\n },\n shadowVerticalEnd: {\n boxShadow: \"inset 0 -8px 6px -6px rgba(0,0,0,0.08)\",\n },\n arrowButton: {\n ...nativeControl,\n position: \"absolute\",\n zIndex: 20,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n backgroundColor: \"transparent\",\n ...shorthands.borderStyle(\"none\"),\n ...shorthands.borderWidth(0),\n ...shorthands.padding(0),\n },\n arrowHorizontalStart: {\n ...boxModel,\n left: 0,\n top: 0,\n bottom: 0,\n width: \"1.5rem\",\n },\n arrowHorizontalEnd: {\n ...boxModel,\n right: 0,\n top: 0,\n bottom: 0,\n width: \"1.5rem\",\n },\n arrowVerticalStart: {\n ...boxModel,\n top: 0,\n left: 0,\n right: 0,\n height: \"1.5rem\",\n },\n arrowVerticalEnd: {\n ...boxModel,\n bottom: 0,\n left: 0,\n right: 0,\n height: \"1.5rem\",\n },\n arrowBadge: {\n ...boxModel,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n backgroundColor: tokens.grayA8,\n ...shorthands.borderRadius(tokens.radiusSm),\n backdropFilter: \"blur(4px)\",\n color: tokens.gray1,\n \":hover\": {\n backgroundColor: tokens.grayA12,\n },\n },\n arrowIcon: {\n ...boxModel,\n width: \"1rem\",\n height: \"1rem\",\n },\n scrollAreaRoot: {\n ...shorthands.overflow(\"hidden\"),\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n },\n scrollAreaRootHorizontal: {\n ...boxModel,\n minWidth: 0,\n },\n scrollAreaRootVertical: {\n ...boxModel,\n minHeight: 0,\n display: \"flex\",\n flexDirection: \"column\",\n },\n scrollAreaRootScrollbarHorizontal: {\n display: \"flex\",\n flexDirection: \"column\",\n },\n scrollAreaRootScrollbarVertical: {\n display: \"flex\",\n flexDirection: \"row\",\n },\n viewport: {\n ...boxModel,\n ...shorthands.borderRadius(tokens.radiusMd),\n // The tracks replace the native scrollbars. Zenith's stylesheet hides them, so no inline\n // <style> needs a nonce (Radix's took the viewport's).\n scrollbarWidth: \"none\",\n \"::-webkit-scrollbar\": { display: \"none\" },\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineOffset: \"2px\",\n outlineStyle: \"solid\",\n outlineColor: tokens.accentA8,\n },\n },\n // The content wrapper keeps Radix's display:table, which grows to the content's width.\n content: { display: \"table\" },\n viewportHorizontal: {\n \"& > div\": {\n display: \"flex\",\n flexDirection: \"row\",\n },\n },\n viewportVertical: {\n ...boxModel,\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n minHeight: 0,\n },\n viewportFlex: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n },\n scrollbar: {\n ...boxModel,\n transitionProperty: \"color, background-color, border-color\",\n transitionDuration: \"150ms\",\n },\n scrollbarHidden: {\n display: \"none\",\n },\n scrollbarHorizontal: {\n ...boxModel,\n height: \"0.5rem\",\n flexDirection: \"column\",\n // The 1px inset along the scroll axis is margin, not padding: Base UI sizes the thumb from the\n // track's offset size without subtracting padding (see ScrollArea's tracks).\n ...shorthands.padding(\"1px\", \"0\"),\n ...shorthands.margin(\"0\", \"1px\"),\n },\n scrollbarVertical: {\n ...boxModel,\n width: \"0.5rem\",\n flexDirection: \"row\",\n ...shorthands.padding(\"0\", \"1px\"),\n ...shorthands.margin(\"1px\", \"0\"),\n },\n thumb: {\n backgroundColor: tokens.grayA8,\n },\n})\n\n// Declared in Zenith in their Radix-era shape, a div's props, not derived from Base UI's, whose\n// types would carry its internals into the published declarations.\nexport type ScrollOverflowProps = Omit<React.ComponentProps<\"div\">, \"dir\"> &\n UseScrollOverflowOptions & {\n /* Text direction of the region and of its thumb position. /\n dir?: \"ltr\" \| \"rtl\"\n /\n Only `\"hover\"` has an effect, as in earlier releases: with `scrollbar`, the track is not shown\n * until the content overflows. Every other value looks the same, because the track is always\n * mounted.\n /\n type?: \"auto\" \| \"always\" \| \"scroll\" \| \"hover\"\n /* Accepted for compatibility and ignored: Base UI manages track visibility itself. /\n scrollHideDelay?: number\n /* Accepted for compatibility and ignored: the root's children are the viewport and track. /\n asChild?: boolean\n /* Show navigation arrow buttons on edges. Default: false /\n arrows?: boolean\n /* Show gradient fade indicators on edges. Default: true /\n gradients?: boolean\n /* Gradient width in pixels. Default: 40 /\n gradientWidth?: number\n /* Gradient base color (CSS value). Should match the parent background. Default: \"var(--volt-body)\" /\n gradientColor?: string\n /* Show inset shadow on overflow edges. Default: true /\n shadow?: boolean\n /* Show a styled scrollbar track. Default: false /\n scrollbar?: boolean\n }\n\nexport const ScrollOverflow = React.forwardRef<\n HTMLDivElement,\n ScrollOverflowProps\n>(function ScrollOverflow(\n {\n className,\n children,\n arrows = false,\n gradients = true,\n gradientWidth = 40,\n gradientColor = \"var(--volt-body)\",\n shadow = true,\n scrollbar = false,\n scrollStep,\n orientation = \"horizontal\",\n dir = \"ltr\",\n // Radix-only: its visibility and slotting have no Base UI counterpart (see the prop docs).\n type,\n scrollHideDelay: _scrollHideDelay,\n asChild: _asChild,\n ...props\n },\n ref\n) {\n const styles = useStyles()\n const scrollbarStyles = useScrollbarStyles()\n const {\n scrollRef,\n hasOverflow,\n canScrollStart,\n canScrollEnd,\n scrollToStart,\n scrollToEnd,\n } = useScrollOverflow({ scrollStep, orientation })\n\n const isHorizontal = orientation === \"horizontal\"\n // Radix's hover scrollbar was the one type that dropped the track (no forceMount) while the\n // content fit; the others kept it mounted. Base UI's track stays mounted, so hide it likewise.\n const showTrack = scrollbar && !(type === \"hover\" && !hasOverflow)\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n // Only handle when the viewport itself is focused, not children\n if (e.target !== e.currentTarget) return\n\n const prevKey = isHorizontal ? \"ArrowLeft\" : \"ArrowUp\"\n const nextKey = isHorizontal ? \"ArrowRight\" : \"ArrowDown\"\n\n switch (e.key) {\n case prevKey:\n e.preventDefault()\n scrollToStart()\n break\n case nextKey:\n e.preventDefault()\n scrollToEnd()\n break\n case \"Home\":\n e.preventDefault()\n scrollRef.current?.scrollTo({\n [isHorizontal ? \"left\" : \"top\"]: 0,\n behavior: \"smooth\",\n })\n break\n case \"End\":\n e.preventDefault()\n scrollRef.current?.scrollTo({\n [isHorizontal ? \"left\" : \"top\"]: isHorizontal\n ? scrollRef.current.scrollWidth\n : scrollRef.current.scrollHeight,\n behavior: \"smooth\",\n })\n break\n }\n }\n\n return (\n <div\n ref={ref}\n data-slot=\"scroll-overflow\"\n {...{ [SLOT_ATTR]: \"scroll-overflow\" }}\n data-orientation={orientation}\n data-has-overflow={hasOverflow \|\| undefined}\n data-can-scroll-start={canScrollStart \|\| undefined}\n data-can-scroll-end={canScrollEnd \|\| undefined}\n className={mergeClasses(\n styles.container,\n isHorizontal ? styles.containerHorizontal : styles.containerVertical,\n className\n )}\n >\n {/ Start gradient + shadow /}\n {gradients && canScrollStart && (\n <div\n data-slot=\"scroll-overflow-fade-start\"\n {...{ [SLOT_ATTR]: \"scroll-overflow-fade-start\" }}\n aria-hidden=\"true\"\n className={mergeClasses(\n styles.fade,\n isHorizontal\n ? styles.fadeHorizontalStart\n : styles.fadeVerticalStart,\n shadow &&\n (isHorizontal\n ? styles.shadowHorizontalStart\n : styles.shadowVerticalStart)\n )}\n style={\n isHorizontal\n ? {\n width: gradientWidth,\n background: `linear-gradient(to right, ${gradientColor}, transparent)`,\n }\n : {\n height: gradientWidth,\n background: `linear-gradient(to bottom, ${gradientColor}, transparent)`,\n }\n }\n />\n )}\n\n {/ Start arrow button /}\n {arrows && canScrollStart && (\n <button\n data-slot=\"scroll-overflow-arrow-start\"\n {...{ [SLOT_ATTR]: \"scroll-overflow-arrow-start\" }}\n type=\"button\"\n tabIndex={-1}\n aria-label={isHorizontal ? \"Scroll left\" : \"Scroll up\"}\n onClick={scrollToStart}\n className={mergeClasses(\n styles.arrowButton,\n isHorizontal\n ? styles.arrowHorizontalStart\n : styles.arrowVerticalStart\n )}\n >\n <span\n data-slot=\"scroll-overflow-arrow-icon\"\n {...{ [SLOT_ATTR]: \"scroll-overflow-arrow-icon\" }}\n className={styles.arrowBadge}\n >\n {isHorizontal ? (\n <ChevronLeftIcon className={styles.arrowIcon} />\n ) : (\n <ChevronUpIcon className={styles.arrowIcon} />\n )}\n </span>\n </button>\n )}\n\n {/ Base UI ScrollArea; Radix's inline <style> is not rendered, the viewport's styles hide the native scrollbars. /}\n <DirectionProvider direction={dir}>\n <CSPProvider disableStyleElements>\n <Primitive.Root\n data-slot=\"scroll-overflow-root\"\n {...{ [SLOT_ATTR]: \"scroll-overflow-root\" }}\n {...props}\n dir={dir}\n className={mergeClasses(\n styles.scrollAreaRoot,\n isHorizontal\n ? styles.scrollAreaRootHorizontal\n : styles.scrollAreaRootVertical,\n showTrack &&\n (isHorizontal\n ? styles.scrollAreaRootScrollbarHorizontal\n : styles.scrollAreaRootScrollbarVertical)\n )}\n >\n <Primitive.Viewport\n ref={scrollRef}\n data-slot=\"scroll-overflow-viewport\"\n {...{ [SLOT_ATTR]: \"scroll-overflow-viewport\" }}\n tabIndex={hasOverflow ? 0 : -1}\n onKeyDown={handleKeyDown}\n className={mergeClasses(\n styles.viewport,\n isHorizontal && styles.viewportHorizontal,\n scrollbar && styles.viewportFlex,\n !isHorizontal && styles.viewportVertical\n )}\n // Only the axis with a track scrolls, as Radix enabled overflow per mounted scrollbar.\n style={{\n overflowX: isHorizontal ? \"scroll\" : \"hidden\",\n overflowY: isHorizontal ? \"hidden\" : \"scroll\",\n }}\n >\n <Primitive.Content\n className={styles.content}\n // Over Base UI's fit-content, as Radix's wrapper filled the viewport.\n style={{ minWidth: \"100%\" }}\n >\n {children}\n </Primitive.Content>\n </Primitive.Viewport>\n\n <Primitive.Scrollbar\n keepMounted\n orientation={orientation}\n data-slot=\"scroll-overflow-scrollbar\"\n {...{ [SLOT_ATTR]: \"scroll-overflow-scrollbar\" }}\n className={mergeClasses(\n scrollbarStyles.track,\n showTrack ? styles.scrollbar : styles.scrollbarHidden,\n isHorizontal\n ? styles.scrollbarHorizontal\n : styles.scrollbarVertical\n )}\n >\n <Primitive.Thumb\n data-slot=\"scroll-overflow-thumb\"\n {...{ [SLOT_ATTR]: \"scroll-overflow-thumb\" }}\n className={mergeClasses(scrollbarStyles.thumb, styles.thumb)}\n />\n </Primitive.Scrollbar>\n </Primitive.Root>\n </CSPProvider>\n </DirectionProvider>\n\n {/ End gradient + shadow /}\n {gradients && canScrollEnd && (\n <div\n data-slot=\"scroll-overflow-fade-end\"\n {...{ [SLOT_ATTR]: \"scroll-overflow-fade-end\" }}\n aria-hidden=\"true\"\n className={mergeClasses(\n styles.fade,\n isHorizontal ? styles.fadeHorizontalEnd : styles.fadeVerticalEnd,\n shadow &&\n (isHorizontal\n ? styles.shadowHorizontalEnd\n : styles.shadowVerticalEnd)\n )}\n style={\n isHorizontal\n ? {\n width: gradientWidth,\n background: `linear-gradient(to left, ${gradientColor}, transparent)`,\n }\n : {\n height: gradientWidth,\n background: `linear-gradient(to top, ${gradientColor}, transparent)`,\n }\n }\n />\n )}\n\n {/ End arrow button */}\n {arrows && canScrollEnd && (\n <button\n data-slot=\"scroll-overflow-arrow-end\"\n {...{ [SLOT_ATTR]: \"scroll-overflow-arrow-end\" }}\n type=\"button\"\n tabIndex={-1}\n aria-label={isHorizontal ? \"Scroll right\" : \"Scroll down\"}\n onClick={scrollToEnd}\n className={mergeClasses(\n styles.arrowButton,\n isHorizontal ? styles.arrowHorizontalEnd : styles.arrowVerticalEnd\n )}\n >\n <span\n data-slot=\"scroll-overflow-arrow-icon\"\n {...{ [SLOT_ATTR]: \"scroll-overflow-arrow-icon\" }}\n className={styles.arrowBadge}\n >\n {isHorizontal ? (\n <ChevronRightIcon className={styles.arrowIcon} />\n ) : (\n <ChevronDownIcon className={styles.arrowIcon} />\n )}\n </span>\n </button>\n )}\n </div>\n )\n})\n"],"names":["getScrollBehavior","useScrollOverflow","options","scrollStep","orientation","scrollRef","React","hasOverflow","setHasOverflow","canScrollStart","setCanScrollStart","canScrollEnd","setCanScrollEnd","isHorizontal","updateScrollState","el","scrollLeft","scrollWidth","clientWidth","scrollTop","scrollHeight","clientHeight","observer","child","scrollToStartFn","_a","scrollToEndFn","ChevronLeftIcon","props","jsx","ChevronRightIcon","ChevronUpIcon","ChevronDownIcon","useStyles","makeZenithStyles","nativeControl","shorthands","boxModel","tokens.grayA8","tokens.radiusSm","tokens.gray1","tokens.grayA12","tokens.radiusMd","tokens.accentA8","ScrollOverflow","className","children","arrows","gradients","gradientWidth","gradientColor","shadow","scrollbar","dir","type","_scrollHideDelay","_asChild","ref","styles","scrollbarStyles","useScrollbarStyles","scrollToStart","scrollToEnd","showTrack","handleKeyDown","e","prevKey","nextKey","_b","jsxs","SLOT_ATTR","mergeClasses","DirectionProvider","CSPProvider","Primitive"],"mappings":"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"}

package/dist/components/segmented-control/segmented-control.js CHANGED Viewed

@@ -1,23 +1,24 @@
-import { jsx as x, jsxs as T } from "react/jsx-runtime";
-import * as p from "react";
-import { useRef as O, useState as C, useCallback as w, useLayoutEffect as R } from "react";
-import { Root as V, Item as G } from "../../vendor/.bun/@radix-ui_react-radio-group@1.3.8_2b23df507bdda662/vendor/@radix-ui/react-radio-group/dist/index.js";
-import { SLOT_ATTR as e, mergeClasses as v, shorthands as n } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as P } from "../../styles/make-styles.js";
-import { boxModel as s, nativeControl as Y } from "../../styles/host-reset.js";
-import { accentDefault as I, accentA8 as Z, accentSoft as A, fontWeightSemibold as _, leadingXs as J, textXs as K, spacingElement1 as u, spacingElement3 as E, body as Q } from "../../tokens/index.js";
-const W = p.createContext({
+import { jsx as h, jsxs as $ } from "react/jsx-runtime";
+import * as f from "react";
+import { useRef as G, useState as v, useCallback as E, useLayoutEffect as I } from "react";
+import { Radio as O } from "../../_virtual/_zenith-runtime-family_radio.js";
+import { SLOT_ATTR as e, mergeClasses as w, shorthands as n } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as V } from "../../styles/make-styles.js";
+import { boxModel as s, nativeControl as P } from "../../styles/host-reset.js";
+import { accentDefault as T, accentA8 as Y, accentSoft as A, fontWeightSemibold as Z, leadingXs as J, textXs as K, spacingElement1 as p, spacingElement3 as W, body as Q } from "../../tokens/index.js";
+import { RadioGroupBase as U } from "../radio/radio-group-base.js";
+const z = f.createContext({
   layout: "hug"
-}), $ = P({
+}), N = V({
   group: {
     ...s,
     position: "relative",
     display: "inline-flex",
     alignItems: "center",
-    ...n.gap(u),
+    ...n.gap(p),
     ...n.borderRadius("9999px"),
     backgroundColor: A,
-    ...n.padding(u),
+    ...n.padding(p),
     ...n.border("0"),
     boxShadow: "none"
   },
@@ -51,27 +52,27 @@ const W = p.createContext({
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
   },
   item: {
-    ...Y,
+    ...P,
     position: "relative",
     zIndex: 1,
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    ...n.gap(u),
+    ...n.gap(p),
     ...n.borderRadius("9999px"),
     minWidth: "3rem",
     // v1 uses Tailwind's `px-3` = 0.75rem here. The semantic spacing scale has NO 0.75rem
     // token -- it runs 0.25/0.5/0.5/1/1.5/2 -- so this is a literal by necessity.
     // `spacingGroup1` is 0.5rem and reaching for it by name (as three components did)
     // silently loses 4px per side. See STATUS: the scale gap is the root cause.
-    paddingLeft: E,
-    paddingRight: E,
-    paddingTop: u,
-    paddingBottom: u,
+    paddingLeft: W,
+    paddingRight: W,
+    paddingTop: p,
+    paddingBottom: p,
     fontSize: K,
     lineHeight: J,
-    fontWeight: _,
-    color: I,
+    fontWeight: Z,
+    color: T,
     cursor: "pointer",
     userSelect: "none",
     backgroundColor: "transparent",
@@ -90,7 +91,7 @@ const W = p.createContext({
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
-      outlineColor: Z
+      outlineColor: Y
     },
     "&[data-disabled]": {
       pointerEvents: "none",
@@ -99,7 +100,7 @@ const W = p.createContext({
     },
     "&[data-checked]": {
       backgroundColor: "transparent",
-      color: I
+      color: T
     },
     "&[data-checked][data-disabled]": {
       backgroundColor: "transparent"
@@ -137,124 +138,135 @@ const W = p.createContext({
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   }
-}), at = p.forwardRef(function({
-  className: b,
+}), dt = f.forwardRef(function({
+  className: x,
   layout: o = "hug",
   orientation: c = "horizontal",
   value: r,
-  defaultValue: f,
-  onValueChange: i,
-  children: a,
-  ...y
-}, h) {
-  const l = $(), d = O(null), [N, q] = C(f), [S, D] = C(!1), [F, L] = C({
+  defaultValue: y,
+  onValueChange: d,
+  children: S,
+  asChild: R,
+  ...i
+}, a) {
+  const l = N(), m = G(null), [M, _] = v(y), [C, q] = v(!1), [B, F] = v({
     opacity: 0
-  }), g = r !== void 0, j = g ? r : N, k = w(() => {
-    if (!d.current) return;
-    const t = d.current.querySelector(
-      `[${e}="segmented-control-item"][data-state="checked"]`
+  }), g = r !== void 0, j = g ? r : M, k = E(() => {
+    if (!m.current) return;
+    const t = m.current.querySelector(
+      `[${e}="segmented-control-item"][data-checked]`
     );
-    t && (L({
+    t && (F({
       opacity: 1,
       width: t.offsetWidth,
       height: t.offsetHeight,
       transform: `translate(${t.offsetLeft}px, ${t.offsetTop}px)`
-    }), D(!0));
+    }), q(!0));
   }, []);
-  R(() => {
-    if (!d.current) return;
+  I(() => {
+    if (!m.current) return;
     const t = Array.from(
-      d.current.querySelectorAll(
+      m.current.querySelectorAll(
         `[${e}="segmented-control-item"]`
       )
     );
-    if (!t.length || (t.forEach((m) => m.style.minWidth = ""), o !== "equal")) return;
-    const B = Math.max(...t.map((m) => m.offsetWidth));
-    t.forEach((m) => m.style.minWidth = `${B}px`);
-  }, [o]), R(() => {
-    if (!S) {
+    if (!t.length || (t.forEach((u) => u.style.minWidth = ""), o !== "equal")) return;
+    const b = Math.max(...t.map((u) => u.offsetWidth));
+    t.forEach((u) => u.style.minWidth = `${b}px`);
+  }, [o]), I(() => {
+    if (!C) {
       k();
       return;
     }
     const t = requestAnimationFrame(k);
     return () => cancelAnimationFrame(t);
-  }, [j, S, k]);
-  const H = w(
-    (t) => {
-      g || q(t), i == null || i(t);
+  }, [j, C, k]);
+  const D = E(
+    (t, b) => {
+      d == null || d(t, b), !g && !b.isCanceled && _(t);
     },
-    [g, i]
-  ), M = (t) => {
-    d.current = t, typeof h == "function" ? h(t) : h && (h.current = t);
-  }, X = p.useMemo(() => ({ layout: o }), [o]);
-  return /* @__PURE__ */ x(W.Provider, { value: X, children: /* @__PURE__ */ T(
-    V,
+    [g, d]
+  ), H = (t) => {
+    m.current = t, typeof a == "function" ? a(t) : a && (a.current = t);
+  }, X = f.useMemo(() => ({ layout: o }), [o]);
+  return /* @__PURE__ */ h(z.Provider, { value: X, children: /* @__PURE__ */ $(
+    U,
     {
-      ref: M,
+      ref: H,
       "data-slot": "segmented-control",
       [e]: "segmented-control",
       "data-layout": o,
       value: g ? r : void 0,
-      defaultValue: f,
-      onValueChange: H,
+      defaultValue: y,
+      onValueChange: D,
       orientation: c,
-      className: v(
+      className: w(
         l.group,
         o === "stretch" && l.groupStretch,
         c === "vertical" && l.groupVertical,
-        b
+        x
       ),
-      ...y,
+      ...i,
       children: [
-        /* @__PURE__ */ x(
+        /* @__PURE__ */ h(
           "span",
           {
             "aria-hidden": "true",
             "data-slot": "segmented-control-indicator",
             [e]: "segmented-control-indicator",
-            className: v(
+            className: w(
               l.indicator,
-              S && l.indicatorAnimated
+              C && l.indicatorAnimated
             ),
-            style: F
+            style: B
           }
         ),
-        a
+        S
       ]
     }
   ) });
-}), st = p.forwardRef(function({ className: b, value: o, icon: c, children: r, ...f }, i) {
-  const a = $(), { layout: y } = p.useContext(W);
-  return /* @__PURE__ */ T(
-    G,
+}), tt = /* @__PURE__ */ h("button", { type: "button" }), lt = f.forwardRef(function({
+  className: x,
+  value: o,
+  icon: c,
+  children: r,
+  asChild: y,
+  checked: d,
+  ...S
+}, R) {
+  const i = N(), { layout: a } = f.useContext(z);
+  return /* @__PURE__ */ $(
+    O.Root,
     {
-      ref: i,
+      ref: R,
+      nativeButton: !0,
+      render: tt,
       value: o,
       "data-slot": "segmented-control-item",
       [e]: "segmented-control-item",
-      className: v(
-        a.item,
-        y === "stretch" && a.itemStretch,
-        b
+      className: w(
+        i.item,
+        a === "stretch" && i.itemStretch,
+        x
       ),
-      ...f,
+      ...S,
       children: [
-        c && /* @__PURE__ */ x(
+        c && /* @__PURE__ */ h(
           "span",
           {
             "aria-hidden": "true",
             "data-slot": "segmented-control-item-icon",
             [e]: "segmented-control-item-icon",
-            className: a.icon,
+            className: i.icon,
             children: c
           }
         ),
-        r && /* @__PURE__ */ x(
+        r && /* @__PURE__ */ h(
           "span",
           {
             "data-slot": "segmented-control-item-label",
             [e]: "segmented-control-item-label",
-            className: a.label,
+            className: i.label,
             children: r
           }
         )
@@ -263,7 +275,7 @@ const W = p.createContext({
   );
 });
 export {
-  at as SegmentedControl,
-  st as SegmentedControlItem
+  dt as SegmentedControl,
+  lt as SegmentedControlItem
 };
 //# sourceMappingURL=segmented-control.js.map

package/dist/components/segmented-control/segmented-control.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"segmented-control.js","sources":["../../../src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useCallback, useLayoutEffect, useRef, useState } from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\n\nexport type SegmentedControlLayout = \"hug\" \| \"equal\" \| \"stretch\"\n\nexport type SegmentedControlProps = React.ComponentProps<\n typeof RadioGroupPrimitive.Root\n> & {\n layout?: SegmentedControlLayout\n}\n\nexport type SegmentedControlItemProps = React.ComponentProps<\n typeof RadioGroupPrimitive.Item\n> & {\n icon?: React.ReactNode\n}\n\ninterface SegmentedControlContextValue {\n layout: SegmentedControlLayout\n}\n\nconst SegmentedControlContext =\n React.createContext<SegmentedControlContextValue>({\n layout: \"hug\",\n })\n\nconst useStyles = makeZenithStyles({\n group: {\n ...boxModel,\n position: \"relative\",\n display: \"inline-flex\",\n alignItems: \"center\",\n ...shorthands.gap(tokens.spacingElement1),\n ...shorthands.borderRadius(\"9999px\"),\n backgroundColor: tokens.accentSoft,\n ...shorthands.padding(tokens.spacingElement1),\n ...shorthands.border(\"0\"),\n boxShadow: \"none\",\n },\n groupStretch: {\n ...boxModel,\n display: \"flex\",\n width: \"100%\",\n },\n groupVertical: {\n ...boxModel,\n flexDirection: \"column\",\n display: \"inline-flex\",\n width: \"fit-content\",\n },\n indicator: {\n ...boxModel,\n pointerEvents: \"none\",\n position: \"absolute\",\n top: 0,\n left: 0,\n zIndex: 0,\n ...shorthands.borderRadius(\"9999px\"),\n backgroundColor: tokens.body,\n // Tailwind `shadow-sm`\n boxShadow: \"0 1px 2px 0 #0000000d\",\n },\n indicatorAnimated: {\n ...boxModel,\n transitionProperty: \"transform, width, height\",\n transitionDuration: \"150ms\",\n transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n },\n item: {\n ...nativeControl,\n position: \"relative\",\n zIndex: 1,\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n ...shorthands.gap(tokens.spacingElement1),\n ...shorthands.borderRadius(\"9999px\"),\n minWidth: \"3rem\",\n // v1 uses Tailwind's `px-3` = 0.75rem here. The semantic spacing scale has NO 0.75rem\n // token -- it runs 0.25/0.5/0.5/1/1.5/2 -- so this is a literal by necessity.\n // `spacingGroup1` is 0.5rem and reaching for it by name (as three components did)\n // silently loses 4px per side. See STATUS: the scale gap is the root cause.\n paddingLeft: tokens.spacingElement3,\n paddingRight: tokens.spacingElement3,\n paddingTop: tokens.spacingElement1,\n paddingBottom: tokens.spacingElement1,\n fontSize: tokens.textXs,\n lineHeight: tokens.leadingXs,\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.accentDefault,\n cursor: \"pointer\",\n userSelect: \"none\",\n backgroundColor: \"transparent\",\n outlineStyle: \"none\",\n ...shorthands.border(\"0\"),\n boxShadow: \"none\",\n aspectRatio: \"auto\",\n width: \"auto\",\n height: \"auto\",\n transitionProperty: \"background-color, color\",\n transitionDuration: \"150ms\",\n transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n \":hover:not([data-checked])\": {\n backgroundColor: tokens.accentSoft,\n },\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineColor: tokens.accentA8,\n },\n \"&[data-disabled]\": {\n pointerEvents: \"none\",\n opacity: 0.5,\n backgroundColor: \"transparent\",\n },\n \"&[data-checked]\": {\n backgroundColor: \"transparent\",\n color: tokens.accentDefault,\n },\n \"&[data-checked][data-disabled]\": {\n backgroundColor: \"transparent\",\n },\n [`& [${SLOT_ATTR}=\"radio-group-indicator\"]`]: {\n display: \"none\",\n },\n // Keyed on SLOT_ATTR, never data-slot (rule 4): the composed RadioGroup emits both, and\n // data-slot values are shared with v1 so such a rule would also match v1-rendered DOM.\n [`[${SLOT_ATTR}='radio-group-indicator']`]: {\n display: \"none\",\n },\n },\n itemStretch: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n },\n icon: {\n ...boxModel,\n flexShrink: 0,\n width: \"1rem\",\n height: \"1rem\",\n pointerEvents: \"none\",\n \"& svg\": {\n width: \"100%\",\n height: \"100%\",\n display: \"block\",\n },\n },\n label: {\n lineHeight: \"1rem\",\n overflowX: \"hidden\",\n overflowY: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n})\n\nexport const SegmentedControl = React.forwardRef<\n HTMLDivElement,\n SegmentedControlProps\n>(function SegmentedControl(\n {\n className,\n layout = \"hug\",\n orientation = \"horizontal\",\n value: valueProp,\n defaultValue,\n onValueChange,\n children,\n ...props\n },\n forwardedRef\n) {\n const styles = useStyles()\n const rootRef = useRef<HTMLDivElement>(null)\n const [trackedValue, setTrackedValue] = useState(defaultValue)\n // Starts false to prevent CSS transition flash on SSR hydration\n const [indicatorReady, setIndicatorReady] = useState(false)\n const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({\n opacity: 0,\n })\n\n const isControlled = valueProp !== undefined\n const currentValue = isControlled ? valueProp : trackedValue\n\n const updateIndicator = useCallback(() => {\n if (!rootRef.current) return\n const el = rootRef.current.querySelector<HTMLElement>(\n `[${SLOT_ATTR}=\"segmented-control-item\"][data-state=\"checked\"]`\n )\n if (!el) return\n setIndicatorStyle({\n opacity: 1,\n width: el.offsetWidth,\n height: el.offsetHeight,\n transform: `translate(${el.offsetLeft}px, ${el.offsetTop}px)`,\n })\n setIndicatorReady(true)\n }, [])\n\n // Must run before indicator effect so equalized widths are measured correctly\n useLayoutEffect(() => {\n if (!rootRef.current) return\n const items = Array.from(\n rootRef.current.querySelectorAll<HTMLElement>(\n `[${SLOT_ATTR}=\"segmented-control-item\"]`\n )\n )\n if (!items.length) return\n items.forEach((el) => (el.style.minWidth = \"\"))\n if (layout !== \"equal\") return\n const max = Math.max(...items.map((el) => el.offsetWidth))\n items.forEach((el) => (el.style.minWidth = `${max}px`))\n }, [layout])\n\n useLayoutEffect(() => {\n if (!indicatorReady) {\n updateIndicator()\n return\n }\n const raf = requestAnimationFrame(updateIndicator)\n return () => cancelAnimationFrame(raf)\n }, [currentValue, indicatorReady, updateIndicator])\n\n const handleValueChange = useCallback(\n (value: string) => {\n if (!isControlled) setTrackedValue(value)\n onValueChange?.(value)\n },\n [isControlled, onValueChange]\n )\n\n const handleRef = (node: HTMLDivElement \| null) => {\n rootRef.current = node\n if (typeof forwardedRef === \"function\") {\n forwardedRef(node)\n } else if (forwardedRef) {\n forwardedRef.current = node\n }\n }\n\n const contextValue = React.useMemo(() => ({ layout }), [layout])\n\n return (\n <SegmentedControlContext.Provider value={contextValue}>\n <RadioGroupPrimitive.Root\n ref={handleRef}\n data-slot=\"segmented-control\"\n {...{ [SLOT_ATTR]: \"segmented-control\" }}\n data-layout={layout}\n value={isControlled ? valueProp : undefined}\n defaultValue={defaultValue}\n onValueChange={handleValueChange}\n orientation={orientation}\n className={mergeClasses(\n styles.group,\n layout === \"stretch\" && styles.groupStretch,\n orientation === \"vertical\" && styles.groupVertical,\n className\n )}\n {...props}\n >\n <span\n aria-hidden=\"true\"\n data-slot=\"segmented-control-indicator\"\n {...{ [SLOT_ATTR]: \"segmented-control-indicator\" }}\n className={mergeClasses(\n styles.indicator,\n indicatorReady && styles.indicatorAnimated\n )}\n style={indicatorStyle}\n />\n {children}\n </RadioGroupPrimitive.Root>\n </SegmentedControlContext.Provider>\n )\n})\n\nexport const SegmentedControlItem = React.forwardRef<\n HTMLButtonElement,\n SegmentedControlItemProps\n>(function SegmentedControlItem(\n { className, value, icon, children, ...props },\n ref\n) {\n const styles = useStyles()\n const { layout } = React.useContext(SegmentedControlContext)\n\n return (\n <RadioGroupPrimitive.Item\n ref={ref}\n value={value}\n data-slot=\"segmented-control-item\"\n {...{ [SLOT_ATTR]: \"segmented-control-item\" }}\n className={mergeClasses(\n styles.item,\n layout === \"stretch\" && styles.itemStretch,\n className\n )}\n {...props}\n >\n {icon && (\n <span\n aria-hidden=\"true\"\n data-slot=\"segmented-control-item-icon\"\n {...{ [SLOT_ATTR]: \"segmented-control-item-icon\" }}\n className={styles.icon}\n >\n {icon}\n </span>\n )}\n {children && (\n <span\n data-slot=\"segmented-control-item-label\"\n {...{ [SLOT_ATTR]: \"segmented-control-item-label\" }}\n className={styles.label}\n >\n {children}\n </span>\n )}\n </RadioGroupPrimitive.Item>\n )\n})\n"],"names":["SegmentedControlContext","React","useStyles","makeZenithStyles","boxModel","shorthands","tokens.spacingElement1","tokens.accentSoft","tokens.body","nativeControl","tokens.spacingElement3","tokens.textXs","tokens.leadingXs","tokens.fontWeightSemibold","tokens.accentDefault","tokens.accentA8","SLOT_ATTR","SegmentedControl","className","layout","orientation","valueProp","defaultValue","onValueChange","children","props","forwardedRef","styles","rootRef","useRef","trackedValue","setTrackedValue","useState","indicatorReady","setIndicatorReady","indicatorStyle","setIndicatorStyle","isControlled","currentValue","updateIndicator","useCallback","el","useLayoutEffect","items","max","raf","handleValueChange","value","handleRef","node","contextValue","jsx","jsxs","RadioGroupPrimitive.Root","mergeClasses","SegmentedControlItem","icon","ref","RadioGroupPrimitive.Item"],"mappings":"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"}
1	+ {"version":3,"file":"segmented-control.js","sources":["../../../src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useCallback, useLayoutEffect, useRef, useState } from \"react\"\nimport { Radio } from \"@base-ui/react/radio\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport {\n RadioGroupBase,\n type RadioGroupBaseProps,\n} from \"../radio/radio-group-base\"\nimport type {\n RadioGroupChangeDetails,\n RadioGroupItemProps,\n RadioGroupProps,\n} from \"../radio/radio\"\n\nexport type SegmentedControlLayout = \"hug\" \| \"equal\" \| \"stretch\"\n\nexport type SegmentedControlProps = RadioGroupProps & {\n layout?: SegmentedControlLayout\n}\n\nexport type SegmentedControlItemProps = RadioGroupItemProps & {\n icon?: React.ReactNode\n}\n\ninterface SegmentedControlContextValue {\n layout: SegmentedControlLayout\n}\n\nconst SegmentedControlContext =\n React.createContext<SegmentedControlContextValue>({\n layout: \"hug\",\n })\n\nconst useStyles = makeZenithStyles({\n group: {\n ...boxModel,\n position: \"relative\",\n display: \"inline-flex\",\n alignItems: \"center\",\n ...shorthands.gap(tokens.spacingElement1),\n ...shorthands.borderRadius(\"9999px\"),\n backgroundColor: tokens.accentSoft,\n ...shorthands.padding(tokens.spacingElement1),\n ...shorthands.border(\"0\"),\n boxShadow: \"none\",\n },\n groupStretch: {\n ...boxModel,\n display: \"flex\",\n width: \"100%\",\n },\n groupVertical: {\n ...boxModel,\n flexDirection: \"column\",\n display: \"inline-flex\",\n width: \"fit-content\",\n },\n indicator: {\n ...boxModel,\n pointerEvents: \"none\",\n position: \"absolute\",\n top: 0,\n left: 0,\n zIndex: 0,\n ...shorthands.borderRadius(\"9999px\"),\n backgroundColor: tokens.body,\n // Tailwind `shadow-sm`\n boxShadow: \"0 1px 2px 0 #0000000d\",\n },\n indicatorAnimated: {\n ...boxModel,\n transitionProperty: \"transform, width, height\",\n transitionDuration: \"150ms\",\n transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n },\n item: {\n ...nativeControl,\n position: \"relative\",\n zIndex: 1,\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n ...shorthands.gap(tokens.spacingElement1),\n ...shorthands.borderRadius(\"9999px\"),\n minWidth: \"3rem\",\n // v1 uses Tailwind's `px-3` = 0.75rem here. The semantic spacing scale has NO 0.75rem\n // token -- it runs 0.25/0.5/0.5/1/1.5/2 -- so this is a literal by necessity.\n // `spacingGroup1` is 0.5rem and reaching for it by name (as three components did)\n // silently loses 4px per side. See STATUS: the scale gap is the root cause.\n paddingLeft: tokens.spacingElement3,\n paddingRight: tokens.spacingElement3,\n paddingTop: tokens.spacingElement1,\n paddingBottom: tokens.spacingElement1,\n fontSize: tokens.textXs,\n lineHeight: tokens.leadingXs,\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.accentDefault,\n cursor: \"pointer\",\n userSelect: \"none\",\n backgroundColor: \"transparent\",\n outlineStyle: \"none\",\n ...shorthands.border(\"0\"),\n boxShadow: \"none\",\n aspectRatio: \"auto\",\n width: \"auto\",\n height: \"auto\",\n transitionProperty: \"background-color, color\",\n transitionDuration: \"150ms\",\n transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n \":hover:not([data-checked])\": {\n backgroundColor: tokens.accentSoft,\n },\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineColor: tokens.accentA8,\n },\n \"&[data-disabled]\": {\n pointerEvents: \"none\",\n opacity: 0.5,\n backgroundColor: \"transparent\",\n },\n \"&[data-checked]\": {\n backgroundColor: \"transparent\",\n color: tokens.accentDefault,\n },\n \"&[data-checked][data-disabled]\": {\n backgroundColor: \"transparent\",\n },\n [`& [${SLOT_ATTR}=\"radio-group-indicator\"]`]: {\n display: \"none\",\n },\n // Keyed on SLOT_ATTR, never data-slot (rule 4): the composed RadioGroup emits both, and\n // data-slot values are shared with v1 so such a rule would also match v1-rendered DOM.\n [`[${SLOT_ATTR}='radio-group-indicator']`]: {\n display: \"none\",\n },\n },\n itemStretch: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n },\n icon: {\n ...boxModel,\n flexShrink: 0,\n width: \"1rem\",\n height: \"1rem\",\n pointerEvents: \"none\",\n \"& svg\": {\n width: \"100%\",\n height: \"100%\",\n display: \"block\",\n },\n },\n label: {\n lineHeight: \"1rem\",\n overflowX: \"hidden\",\n overflowY: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n})\n\nexport const SegmentedControl = React.forwardRef<\n HTMLDivElement,\n SegmentedControlProps\n>(function SegmentedControl(\n {\n className,\n layout = \"hug\",\n orientation = \"horizontal\",\n value: valueProp,\n defaultValue,\n onValueChange,\n children,\n asChild: _asChild,\n ...props\n },\n forwardedRef\n) {\n const styles = useStyles()\n const rootRef = useRef<HTMLDivElement>(null)\n const [trackedValue, setTrackedValue] = useState(defaultValue)\n // Starts false to prevent CSS transition flash on SSR hydration\n const [indicatorReady, setIndicatorReady] = useState(false)\n const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({\n opacity: 0,\n })\n\n const isControlled = valueProp !== undefined\n const currentValue = isControlled ? valueProp : trackedValue\n\n const updateIndicator = useCallback(() => {\n if (!rootRef.current) return\n const el = rootRef.current.querySelector<HTMLElement>(\n `[${SLOT_ATTR}=\"segmented-control-item\"][data-checked]`\n )\n if (!el) return\n setIndicatorStyle({\n opacity: 1,\n width: el.offsetWidth,\n height: el.offsetHeight,\n transform: `translate(${el.offsetLeft}px, ${el.offsetTop}px)`,\n })\n setIndicatorReady(true)\n }, [])\n\n // Must run before indicator effect so equalized widths are measured correctly\n useLayoutEffect(() => {\n if (!rootRef.current) return\n const items = Array.from(\n rootRef.current.querySelectorAll<HTMLElement>(\n `[${SLOT_ATTR}=\"segmented-control-item\"]`\n )\n )\n if (!items.length) return\n items.forEach((el) => (el.style.minWidth = \"\"))\n if (layout !== \"equal\") return\n const max = Math.max(...items.map((el) => el.offsetWidth))\n items.forEach((el) => (el.style.minWidth = `${max}px`))\n }, [layout])\n\n useLayoutEffect(() => {\n if (!indicatorReady) {\n updateIndicator()\n return\n }\n const raf = requestAnimationFrame(updateIndicator)\n return () => cancelAnimationFrame(raf)\n }, [currentValue, indicatorReady, updateIndicator])\n\n const handleValueChange = useCallback(\n (value: string, eventDetails: RadioGroupChangeDetails) => {\n onValueChange?.(value, eventDetails)\n if (!isControlled && !eventDetails.isCanceled) setTrackedValue(value)\n },\n [isControlled, onValueChange]\n )\n\n const handleRef = (node: HTMLDivElement \| null) => {\n rootRef.current = node\n if (typeof forwardedRef === \"function\") {\n forwardedRef(node)\n } else if (forwardedRef) {\n forwardedRef.current = node\n }\n }\n\n const contextValue = React.useMemo(() => ({ layout }), [layout])\n\n return (\n <SegmentedControlContext.Provider value={contextValue}>\n <RadioGroupBase\n ref={handleRef}\n data-slot=\"segmented-control\"\n {...{ [SLOT_ATTR]: \"segmented-control\" }}\n data-layout={layout}\n value={isControlled ? valueProp : undefined}\n defaultValue={defaultValue}\n onValueChange={handleValueChange}\n orientation={orientation}\n className={mergeClasses(\n styles.group,\n layout === \"stretch\" && styles.groupStretch,\n orientation === \"vertical\" && styles.groupVertical,\n className\n )}\n {...(props as RadioGroupBaseProps)}\n >\n <span\n aria-hidden=\"true\"\n data-slot=\"segmented-control-indicator\"\n {...{ [SLOT_ATTR]: \"segmented-control-indicator\" }}\n className={mergeClasses(\n styles.indicator,\n indicatorReady && styles.indicatorAnimated\n )}\n style={indicatorStyle}\n />\n {children}\n </RadioGroupBase>\n </SegmentedControlContext.Provider>\n )\n})\n\n// Base UI renders a <span> by default; a native button keeps the HTMLButtonElement ref, native\n// disabled and the id Radix had on the item.\nconst ITEM_ELEMENT = <button type=\"button\" />\n\nexport const SegmentedControlItem = React.forwardRef<\n HTMLButtonElement,\n SegmentedControlItemProps\n>(function SegmentedControlItem(\n {\n className,\n value,\n icon,\n children,\n asChild: _asChild,\n checked: _checked,\n ...props\n },\n ref\n) {\n const styles = useStyles()\n const { layout } = React.useContext(SegmentedControlContext)\n\n return (\n <Radio.Root\n ref={ref}\n nativeButton\n render={ITEM_ELEMENT}\n value={value}\n data-slot=\"segmented-control-item\"\n {...{ [SLOT_ATTR]: \"segmented-control-item\" }}\n className={mergeClasses(\n styles.item,\n layout === \"stretch\" && styles.itemStretch,\n className\n )}\n {...(props as Omit<Radio.Root.Props<string>, \"value\">)}\n >\n {icon && (\n <span\n aria-hidden=\"true\"\n data-slot=\"segmented-control-item-icon\"\n {...{ [SLOT_ATTR]: \"segmented-control-item-icon\" }}\n className={styles.icon}\n >\n {icon}\n </span>\n )}\n {children && (\n <span\n data-slot=\"segmented-control-item-label\"\n {...{ [SLOT_ATTR]: \"segmented-control-item-label\" }}\n className={styles.label}\n >\n {children}\n </span>\n )}\n </Radio.Root>\n )\n})\n"],"names":["SegmentedControlContext","React","useStyles","makeZenithStyles","boxModel","shorthands","tokens.spacingElement1","tokens.accentSoft","tokens.body","nativeControl","tokens.spacingElement3","tokens.textXs","tokens.leadingXs","tokens.fontWeightSemibold","tokens.accentDefault","tokens.accentA8","SLOT_ATTR","SegmentedControl","className","layout","orientation","valueProp","defaultValue","onValueChange","children","_asChild","props","forwardedRef","styles","rootRef","useRef","trackedValue","setTrackedValue","useState","indicatorReady","setIndicatorReady","indicatorStyle","setIndicatorStyle","isControlled","currentValue","updateIndicator","useCallback","el","useLayoutEffect","items","max","raf","handleValueChange","value","eventDetails","handleRef","node","contextValue","jsx","jsxs","RadioGroupBase","mergeClasses","ITEM_ELEMENT","SegmentedControlItem","icon","_checked","ref","Radio"],"mappings":"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"}