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

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

@@ -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 * 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    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    left: 0,\n    top: 0,\n    bottom: 0,\n    width: \"1.5rem\",\n  },\n  arrowHorizontalEnd: {\n    right: 0,\n    top: 0,\n    bottom: 0,\n    width: \"1.5rem\",\n  },\n  arrowVerticalStart: {\n    top: 0,\n    left: 0,\n    right: 0,\n    height: \"1.5rem\",\n  },\n  arrowVerticalEnd: {\n    bottom: 0,\n    left: 0,\n    right: 0,\n    height: \"1.5rem\",\n  },\n  arrowBadge: {\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    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    minWidth: 0,\n  },\n  scrollAreaRootVertical: {\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    ...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    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    ...shorthands.padding(\"1px\"),\n    transitionProperty: \"color, background-color, border-color\",\n    transitionDuration: \"150ms\",\n  },\n  scrollbarHidden: {\n    display: \"none\",\n  },\n  scrollbarHorizontal: {\n    height: \"0.5rem\",\n    flexDirection: \"column\",\n  },\n  scrollbarVertical: {\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","shorthands","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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"}
+{"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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"}

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

@@ -1,70 +1,77 @@
-import { jsx as g, jsxs as E } from "react/jsx-runtime";
-import * as u from "react";
-import { useRef as M, useState as k, useCallback as v, useLayoutEffect as w } from "react";
-import { Root as O, Item as V } 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 C, shorthands as n } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as G } from "../../styles/make-styles.js";
-import { accentDefault as R, accentA8 as P, accentSoft as I, fontWeightSemibold as Y, leadingXs as Z, textXs as _, spacingElement1 as m, spacingElement3 as A, body as J } from "../../tokens/index.js";
-const T = u.createContext({
+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({
   layout: "hug"
-}), W = G({
+}), $ = P({
   group: {
+    ...s,
     position: "relative",
     display: "inline-flex",
     alignItems: "center",
-    ...n.gap(m),
+    ...n.gap(u),
     ...n.borderRadius("9999px"),
-    backgroundColor: I,
-    ...n.padding(m),
+    backgroundColor: A,
+    ...n.padding(u),
     ...n.border("0"),
     boxShadow: "none"
   },
   groupStretch: {
+    ...s,
     display: "flex",
     width: "100%"
   },
   groupVertical: {
+    ...s,
     flexDirection: "column",
     display: "inline-flex",
     width: "fit-content"
   },
   indicator: {
+    ...s,
     pointerEvents: "none",
     position: "absolute",
     top: 0,
     left: 0,
     zIndex: 0,
     ...n.borderRadius("9999px"),
-    backgroundColor: J,
+    backgroundColor: Q,
     // Tailwind `shadow-sm`
     boxShadow: "0 1px 2px 0 #0000000d"
   },
   indicatorAnimated: {
+    ...s,
     transitionProperty: "transform, width, height",
     transitionDuration: "150ms",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
   },
   item: {
+    ...Y,
     position: "relative",
     zIndex: 1,
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    ...n.gap(m),
+    ...n.gap(u),
     ...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: A,
-    paddingRight: A,
-    paddingTop: m,
-    paddingBottom: m,
-    fontSize: _,
-    lineHeight: Z,
-    fontWeight: Y,
-    color: R,
+    paddingLeft: E,
+    paddingRight: E,
+    paddingTop: u,
+    paddingBottom: u,
+    fontSize: K,
+    lineHeight: J,
+    fontWeight: _,
+    color: I,
     cursor: "pointer",
     userSelect: "none",
     backgroundColor: "transparent",
@@ -78,12 +85,12 @@ const T = u.createContext({
     transitionDuration: "150ms",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
     ":hover:not([data-checked])": {
-      backgroundColor: I
+      backgroundColor: A
     },
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
-      outlineColor: P
+      outlineColor: Z
     },
     "&[data-disabled]": {
       pointerEvents: "none",
@@ -92,7 +99,7 @@ const T = u.createContext({
     },
     "&[data-checked]": {
       backgroundColor: "transparent",
-      color: R
+      color: I
     },
     "&[data-checked][data-disabled]": {
       backgroundColor: "transparent"
@@ -112,6 +119,7 @@ const T = u.createContext({
     flexBasis: "0%"
   },
   icon: {
+    ...s,
     flexShrink: 0,
     width: "1rem",
     height: "1rem",
@@ -129,119 +137,119 @@ const T = u.createContext({
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   }
-}), nt = u.forwardRef(function({
-  className: x,
+}), at = p.forwardRef(function({
+  className: b,
   layout: o = "hug",
-  orientation: s = "horizontal",
+  orientation: c = "horizontal",
   value: r,
-  defaultValue: p,
+  defaultValue: f,
   onValueChange: i,
   children: a,
-  ...b
-}, f) {
-  const c = W(), l = M(null), [z, N] = k(p), [y, q] = k(!1), [D, F] = k({
+  ...y
+}, h) {
+  const l = $(), d = O(null), [N, q] = C(f), [S, D] = C(!1), [F, L] = C({
     opacity: 0
-  }), h = r !== void 0, L = h ? r : z, S = v(() => {
-    if (!l.current) return;
-    const t = l.current.querySelector(
+  }), 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"]`
     );
-    t && (F({
+    t && (L({
       opacity: 1,
       width: t.offsetWidth,
       height: t.offsetHeight,
       transform: `translate(${t.offsetLeft}px, ${t.offsetTop}px)`
-    }), q(!0));
+    }), D(!0));
   }, []);
-  w(() => {
-    if (!l.current) return;
+  R(() => {
+    if (!d.current) return;
     const t = Array.from(
-      l.current.querySelectorAll(
+      d.current.querySelectorAll(
         `[${e}="segmented-control-item"]`
       )
     );
-    if (!t.length || (t.forEach((d) => d.style.minWidth = ""), o !== "equal")) return;
-    const B = Math.max(...t.map((d) => d.offsetWidth));
-    t.forEach((d) => d.style.minWidth = `${B}px`);
-  }, [o]), w(() => {
-    if (!y) {
-      S();
+    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) {
+      k();
       return;
     }
-    const t = requestAnimationFrame(S);
+    const t = requestAnimationFrame(k);
     return () => cancelAnimationFrame(t);
-  }, [L, y, S]);
-  const j = v(
+  }, [j, S, k]);
+  const H = w(
     (t) => {
-      h || N(t), i == null || i(t);
+      g || q(t), i == null || i(t);
     },
-    [h, i]
-  ), H = (t) => {
-    l.current = t, typeof f == "function" ? f(t) : f && (f.current = t);
-  }, X = u.useMemo(() => ({ layout: o }), [o]);
-  return /* @__PURE__ */ g(T.Provider, { value: X, children: /* @__PURE__ */ E(
-    O,
+    [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,
     {
-      ref: H,
+      ref: M,
       "data-slot": "segmented-control",
       [e]: "segmented-control",
       "data-layout": o,
-      value: h ? r : void 0,
-      defaultValue: p,
-      onValueChange: j,
-      orientation: s,
-      className: C(
-        c.group,
-        o === "stretch" && c.groupStretch,
-        s === "vertical" && c.groupVertical,
-        x
+      value: g ? r : void 0,
+      defaultValue: f,
+      onValueChange: H,
+      orientation: c,
+      className: v(
+        l.group,
+        o === "stretch" && l.groupStretch,
+        c === "vertical" && l.groupVertical,
+        b
       ),
-      ...b,
+      ...y,
       children: [
-        /* @__PURE__ */ g(
+        /* @__PURE__ */ x(
           "span",
           {
             "aria-hidden": "true",
             "data-slot": "segmented-control-indicator",
             [e]: "segmented-control-indicator",
-            className: C(
-              c.indicator,
-              y && c.indicatorAnimated
+            className: v(
+              l.indicator,
+              S && l.indicatorAnimated
             ),
-            style: D
+            style: F
           }
         ),
         a
       ]
     }
   ) });
-}), rt = u.forwardRef(function({ className: x, value: o, icon: s, children: r, ...p }, i) {
-  const a = W(), { layout: b } = u.useContext(T);
-  return /* @__PURE__ */ E(
-    V,
+}), 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,
     {
       ref: i,
       value: o,
       "data-slot": "segmented-control-item",
       [e]: "segmented-control-item",
-      className: C(
+      className: v(
         a.item,
-        b === "stretch" && a.itemStretch,
-        x
+        y === "stretch" && a.itemStretch,
+        b
       ),
-      ...p,
+      ...f,
       children: [
-        s && /* @__PURE__ */ g(
+        c && /* @__PURE__ */ x(
           "span",
           {
             "aria-hidden": "true",
             "data-slot": "segmented-control-item-icon",
             [e]: "segmented-control-item-icon",
             className: a.icon,
-            children: s
+            children: c
           }
         ),
-        r && /* @__PURE__ */ g(
+        r && /* @__PURE__ */ x(
           "span",
           {
             "data-slot": "segmented-control-item-label",
@@ -255,7 +263,7 @@ const T = u.createContext({
   );
 });
 export {
-  nt as SegmentedControl,
-  rt as SegmentedControlItem
+  at as SegmentedControl,
+  st as SegmentedControlItem
 };
 //# sourceMappingURL=segmented-control.js.map

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

@@ -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 * 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    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    display: \"flex\",\n    width: \"100%\",\n  },\n  groupVertical: {\n    flexDirection: \"column\",\n    display: \"inline-flex\",\n    width: \"fit-content\",\n  },\n  indicator: {\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    transitionProperty: \"transform, width, height\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n  },\n  item: {\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    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","shorthands","tokens.spacingElement1","tokens.accentSoft","tokens.body","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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"}
+{"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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"}