npm - @epilot/zenith-react - Versions diffs - 0.2.0-next.5 → 0.2.0-next.6 - Mend

@epilot/zenith-react 0.2.0-next.5 → 0.2.0-next.6

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 (175) hide show

package/dist/components/scroll-area/scrollbar-styles.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { makeZenithStyles as e } from "../../styles/make-styles.js";
-import { shorthands as o } from "@epilot/zenith-runtime/v1";
+import { shorthands as o } from "@epilot/zenith-runtime/v1/core.js";
 const i = e({
   track: {
     position: "relative",

package/dist/components/scroll-area/scrollbar-styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scrollbar-styles.js","sources":["../../../src/components/scroll-area/scrollbar-styles.ts"],"sourcesContent":["import { makeZenithStyles } from \"../../styles/make-styles\"\nimport { shorthands } from \"@epilot/zenith-runtime/v1\"\n\n/** Shared mechanics only. Each consumer owns its size, colour and visibility policy. */\nexport const useScrollbarStyles = makeZenithStyles({\n track: {\n position: \"relative\",\n display: \"flex\",\n touchAction: \"none\",\n userSelect: \"none\",\n },\n thumb: {\n position: \"relative\",\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n ...shorthands.borderRadius(\"9999px\"),\n },\n})\n"],"names":["useScrollbarStyles","makeZenithStyles","shorthands"],"mappings":";;AAIO,MAAMA,IAAqBC,EAAiB;AAAA,EACjD,OAAO;AAAA,IACL,UAAU;AAAA,IACV,SAAS;AAAA,IACT,aAAa;AAAA,IACb,YAAY;AAAA,EAAA;AAAA,EAEd,OAAO;AAAA,IACL,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,GAAGC,EAAW,aAAa,QAAQ;AAAA,EAAA;AAEvC,CAAC;"}
1	+ {"version":3,"file":"scrollbar-styles.js","sources":["../../../src/components/scroll-area/scrollbar-styles.ts"],"sourcesContent":["import { makeZenithStyles } from \"../../styles/make-styles\"\nimport { shorthands } from \"@epilot/zenith-runtime/v1/core\"\n\n/** Shared mechanics only. Each consumer owns its size, colour and visibility policy. */\nexport const useScrollbarStyles = makeZenithStyles({\n track: {\n position: \"relative\",\n display: \"flex\",\n touchAction: \"none\",\n userSelect: \"none\",\n },\n thumb: {\n position: \"relative\",\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n ...shorthands.borderRadius(\"9999px\"),\n },\n})\n"],"names":["useScrollbarStyles","makeZenithStyles","shorthands"],"mappings":";;AAIO,MAAMA,IAAqBC,EAAiB;AAAA,EACjD,OAAO;AAAA,IACL,UAAU;AAAA,IACV,SAAS;AAAA,IACT,aAAa;AAAA,IACb,YAAY;AAAA,EAAA;AAAA,EAEd,OAAO;AAAA,IACL,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,GAAGC,EAAW,aAAa,QAAQ;AAAA,EAAA;AAEvC,CAAC;"}

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

@@ -3,7 +3,7 @@ import * as w from "react";
 import { CSPProvider as K } from "../../_virtual/_zenith-runtime-family_csp-provider.js";
 import { DirectionProvider as P } from "../../_virtual/_zenith-runtime-family_direction-provider.js";
 import { ScrollArea as g } from "../../_virtual/_zenith-runtime-family_scroll-area.js";
-import { mergeClasses as f, SLOT_ATTR as s, shorthands as i } from "@epilot/zenith-runtime/v1";
+import { mergeClasses as f, SLOT_ATTR as s, shorthands as i } from "@epilot/zenith-runtime/v1/core.js";
 import { makeZenithStyles as $ } from "../../styles/make-styles.js";
 import { boxModel as a, nativeControl as G } from "../../styles/host-reset.js";
 import { body as _, grayA8 as O, accentA8 as U, grayA12 as X, gray1 as Y, radiusMd as q, radiusSm as J } from "../../tokens/index.js";

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 { 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: the Zenith body token. /\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 = tokens.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","tokens.body","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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"}
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/core\"\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: the Zenith body token. /\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 = tokens.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","tokens.body","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,77 +1,77 @@
-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({
+import { jsx as b, jsxs as $ } from "react/jsx-runtime";
+import * as m from "react";
+import { useRef as G, useState as w, useCallback as R, useLayoutEffect as I } from "react";
+import { Radio as V } from "../../_virtual/_zenith-runtime-family_radio.js";
+import { SLOT_ATTR as t, mergeClasses as E, shorthands as n } from "@epilot/zenith-runtime/v1/core.js";
+import { makeZenithStyles as P } from "../../styles/make-styles.js";
+import { boxModel as l, nativeControl as Y } from "../../styles/host-reset.js";
+import { accentDefault as T, accentA8 as Z, accentSoft as W, fontWeightSemibold as J, leadingXs as K, textXs as Q, spacingElement1 as g, spacingElement3 as z, body as U } from "../../tokens/index.js";
+import { RadioGroupBase as ee } from "../radio/radio-group-base.js";
+const F = m.createContext({
   layout: "hug"
-}), N = V({
+}), q = P({
   group: {
-    ...s,
+    ...l,
     position: "relative",
     display: "inline-flex",
     alignItems: "center",
-    ...n.gap(p),
+    ...n.gap(g),
     ...n.borderRadius("9999px"),
-    backgroundColor: A,
-    ...n.padding(p),
+    backgroundColor: W,
+    ...n.padding(g),
     ...n.border("0"),
     boxShadow: "none"
   },
   groupStretch: {
-    ...s,
+    ...l,
     display: "flex",
     width: "100%"
   },
   groupVertical: {
-    ...s,
+    ...l,
     flexDirection: "column",
     display: "inline-flex",
     width: "fit-content"
   },
   indicator: {
-    ...s,
+    ...l,
     pointerEvents: "none",
     position: "absolute",
     top: 0,
     left: 0,
     zIndex: 0,
     ...n.borderRadius("9999px"),
-    backgroundColor: Q,
+    backgroundColor: U,
     // Tailwind `shadow-sm`
     boxShadow: "0 1px 2px 0 #0000000d"
   },
   indicatorAnimated: {
-    ...s,
+    ...l,
     transitionProperty: "transform, width, height",
     transitionDuration: "150ms",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
   },
   item: {
-    ...P,
+    ...Y,
     position: "relative",
     zIndex: 1,
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    ...n.gap(p),
+    ...n.gap(g),
     ...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: W,
-    paddingRight: W,
-    paddingTop: p,
-    paddingBottom: p,
-    fontSize: K,
-    lineHeight: J,
-    fontWeight: Z,
+    paddingLeft: z,
+    paddingRight: z,
+    paddingTop: g,
+    paddingBottom: g,
+    fontSize: Q,
+    lineHeight: K,
+    fontWeight: J,
     color: T,
     cursor: "pointer",
     userSelect: "none",
@@ -86,12 +86,12 @@ const z = f.createContext({
     transitionDuration: "150ms",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
     ":hover:not([data-checked])": {
-      backgroundColor: A
+      backgroundColor: W
     },
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
-      outlineColor: Y
+      outlineColor: Z
     },
     "&[data-disabled]": {
       pointerEvents: "none",
@@ -105,12 +105,12 @@ const z = f.createContext({
     "&[data-checked][data-disabled]": {
       backgroundColor: "transparent"
     },
-    [`& [${e}="radio-group-indicator"]`]: {
+    [`& [${t}="radio-group-indicator"]`]: {
       display: "none"
     },
     // Keyed on SLOT_ATTR, never data-slot (rule 4): the composed RadioGroup emits both, and
     // data-slot values are shared with v1 so such a rule would also match v1-rendered DOM.
-    [`[${e}='radio-group-indicator']`]: {
+    [`[${t}='radio-group-indicator']`]: {
       display: "none"
     }
   },
@@ -120,7 +120,7 @@ const z = f.createContext({
     flexBasis: "0%"
   },
   icon: {
-    ...s,
+    ...l,
     flexShrink: 0,
     width: "1rem",
     height: "1rem",
@@ -138,136 +138,147 @@ const z = f.createContext({
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   }
-}), dt = f.forwardRef(function({
-  className: x,
+}), le = m.forwardRef(function({
+  className: v,
   layout: o = "hug",
-  orientation: c = "horizontal",
-  value: r,
-  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({
+  orientation: u = "horizontal",
+  value: s,
+  defaultValue: C,
+  onValueChange: f,
+  children: x,
+  asChild: A,
+  ...c
+}, d) {
+  const p = q(), r = G(null), [L, M] = w(C), [k, _] = w(!1), [B, O] = w({
     opacity: 0
-  }), 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]`
+  }), y = s !== void 0, j = y ? s : L, h = R(() => {
+    if (!r.current) return;
+    const e = r.current.querySelector(
+      `[${t}="segmented-control-item"][data-checked]`
     );
-    t && (F({
+    e && (O({
       opacity: 1,
-      width: t.offsetWidth,
-      height: t.offsetHeight,
-      transform: `translate(${t.offsetLeft}px, ${t.offsetTop}px)`
-    }), q(!0));
-  }, []);
-  I(() => {
-    if (!m.current) return;
-    const t = Array.from(
-      m.current.querySelectorAll(
-        `[${e}="segmented-control-item"]`
+      width: e.offsetWidth,
+      height: e.offsetHeight,
+      transform: `translate(${e.offsetLeft}px, ${e.offsetTop}px)`
+    }), _(!0));
+  }, []), S = R(() => {
+    if (!r.current) return;
+    const e = Array.from(
+      r.current.querySelectorAll(
+        `[${t}="segmented-control-item"]`
       )
     );
-    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();
+    if (!e.length || (e.forEach((a) => a.style.minWidth = ""), o !== "equal")) return;
+    const i = Math.max(...e.map((a) => a.offsetWidth));
+    e.forEach((a) => a.style.minWidth = `${i}px`);
+  }, [o]);
+  I(S, [S]), I(() => {
+    if (!k) {
+      h();
       return;
     }
-    const t = requestAnimationFrame(k);
-    return () => cancelAnimationFrame(t);
-  }, [j, C, k]);
-  const D = E(
-    (t, b) => {
-      d == null || d(t, b), !g && !b.isCanceled && _(t);
+    const e = requestAnimationFrame(h);
+    return () => cancelAnimationFrame(e);
+  }, [j, k, h]), m.useEffect(() => {
+    if (!r.current || typeof ResizeObserver > "u") return;
+    let e;
+    const i = new ResizeObserver(() => {
+      e !== void 0 && cancelAnimationFrame(e), e = requestAnimationFrame(() => {
+        e = void 0, S(), h();
+      });
+    });
+    return r.current.querySelectorAll(`[${t}="segmented-control-item"]`).forEach((a) => i.observe(a, { box: "border-box" })), () => {
+      i.disconnect(), e !== void 0 && cancelAnimationFrame(e);
+    };
+  }, [x, h, S]);
+  const D = R(
+    (e, i) => {
+      f == null || f(e, i), !y && !i.isCanceled && M(e);
     },
-    [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,
+    [y, f]
+  ), H = (e) => {
+    r.current = e, typeof d == "function" ? d(e) : d && (d.current = e);
+  }, X = m.useMemo(() => ({ layout: o }), [o]);
+  return /* @__PURE__ */ b(F.Provider, { value: X, children: /* @__PURE__ */ $(
+    ee,
     {
       ref: H,
       "data-slot": "segmented-control",
-      [e]: "segmented-control",
+      [t]: "segmented-control",
       "data-layout": o,
-      value: g ? r : void 0,
-      defaultValue: y,
+      value: y ? s : void 0,
+      defaultValue: C,
       onValueChange: D,
-      orientation: c,
-      className: w(
-        l.group,
-        o === "stretch" && l.groupStretch,
-        c === "vertical" && l.groupVertical,
-        x
+      orientation: u,
+      className: E(
+        p.group,
+        o === "stretch" && p.groupStretch,
+        u === "vertical" && p.groupVertical,
+        v
       ),
-      ...i,
+      ...c,
       children: [
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ b(
           "span",
           {
             "aria-hidden": "true",
             "data-slot": "segmented-control-indicator",
-            [e]: "segmented-control-indicator",
-            className: w(
-              l.indicator,
-              C && l.indicatorAnimated
+            [t]: "segmented-control-indicator",
+            className: E(
+              p.indicator,
+              k && p.indicatorAnimated
             ),
             style: B
           }
         ),
-        S
+        x
       ]
     }
   ) });
-}), tt = /* @__PURE__ */ h("button", { type: "button" }), lt = f.forwardRef(function({
-  className: x,
+}), te = /* @__PURE__ */ b("button", { type: "button" }), me = m.forwardRef(function({
+  className: v,
   value: o,
-  icon: c,
-  children: r,
-  asChild: y,
-  checked: d,
-  ...S
-}, R) {
-  const i = N(), { layout: a } = f.useContext(z);
+  icon: u,
+  children: s,
+  asChild: C,
+  checked: f,
+  ...x
+}, A) {
+  const c = q(), { layout: d } = m.useContext(F);
   return /* @__PURE__ */ $(
-    O.Root,
+    V.Root,
     {
-      ref: R,
+      ref: A,
       nativeButton: !0,
-      render: tt,
+      render: te,
       value: o,
       "data-slot": "segmented-control-item",
-      [e]: "segmented-control-item",
-      className: w(
-        i.item,
-        a === "stretch" && i.itemStretch,
-        x
+      [t]: "segmented-control-item",
+      className: E(
+        c.item,
+        d === "stretch" && c.itemStretch,
+        v
       ),
-      ...S,
+      ...x,
       children: [
-        c && /* @__PURE__ */ h(
+        u && /* @__PURE__ */ b(
           "span",
           {
             "aria-hidden": "true",
             "data-slot": "segmented-control-item-icon",
-            [e]: "segmented-control-item-icon",
-            className: i.icon,
-            children: c
+            [t]: "segmented-control-item-icon",
+            className: c.icon,
+            children: u
           }
         ),
-        r && /* @__PURE__ */ h(
+        s && /* @__PURE__ */ b(
           "span",
           {
             "data-slot": "segmented-control-item-label",
-            [e]: "segmented-control-item-label",
-            className: i.label,
-            children: r
+            [t]: "segmented-control-item-label",
+            className: c.label,
+            children: s
           }
         )
       ]
@@ -275,7 +286,7 @@ const z = f.createContext({
   );
 });
 export {
-  dt as SegmentedControl,
-  lt as SegmentedControlItem
+  le as SegmentedControl,
+  me as SegmentedControlItem
 };
 //# sourceMappingURL=segmented-control.js.map