@cloudraker/reki 2.6.1 → 2.7.0

package/dist/chunks/sidebar-gwfibai76tw069d4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-gwfibai76tw069d4.js","sources":["../../src/components/sidebar/sidebar.tsx"],"sourcesContent":["import React, {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type ReactNode,\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport { ScrollArea as ScrollAreaBase } from \"@base-ui/react/scroll-area\";\n\nimport { CaretRightIcon } from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { Tooltip, TooltipProvider } from \"../tooltip\";\n\n// ============================================================================\n// Variants (required by Reki convention)\n// ============================================================================\n\n/** Sidebar variant definitions mapping layout, collapse, and side options. */\nexport const REKI_SIDEBAR_VARIANTS = {\n  variant: {\n    sidebar: {\n      classes: \"\",\n      description: \"Standard sidebar with border separator\",\n    },\n    floating: {\n      classes: \"\",\n      description: \"Floating sidebar with shadow and rounded corners\",\n    },\n    inset: {\n      classes: \"\",\n      description: \"Inset sidebar within the content area\",\n    },\n  },\n  collapsible: {\n    icon: {\n      classes: \"\",\n      description: \"Collapses to show icons only\",\n    },\n    offcanvas: {\n      classes: \"\",\n      description: \"Slides off screen when collapsed\",\n    },\n    none: {\n      classes: \"\",\n      description: \"Cannot be collapsed\",\n    },\n  },\n  side: {\n    left: {\n      classes: \"\",\n      description: \"Left-aligned sidebar\",\n    },\n    right: {\n      classes: \"\",\n      description: \"Right-aligned sidebar\",\n    },\n  },\n} as const;\n\nexport const REKI_SIDEBAR_DEFAULT_VARIANTS = {\n  variant: \"sidebar\",\n  collapsible: \"icon\",\n  side: \"left\",\n} as const;\n\nexport const REKI_SIDEBAR_STYLING = {\n  width: {\n    expanded: \"16.25rem\",\n    icon: \"57px\",\n  },\n  mobile: {\n    breakpoint: 768,\n  },\n} as const;\n\nexport type SidebarSide = \"left\" | \"right\";\nexport type SidebarVariant = \"sidebar\" | \"floating\" | \"inset\";\nexport type SidebarCollapsible = \"icon\" | \"offcanvas\" | \"none\";\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst SIDEBAR_WIDTH = \"16.25rem\";\nconst SIDEBAR_WIDTH_ICON = \"57px\";\nconst SIDEBAR_EASING = \"cubic-bezier(0.77, 0, 0.175, 1)\";\nconst SIDEBAR_ANIMATION_DURATION_MS = 250;\nconst MOBILE_BREAKPOINT = 768;\nconst FOCUSABLE_SELECTOR =\n  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n// ============================================================================\n// Mobile detection hook\n// ============================================================================\n\nfunction useIsMobile(breakpoint: number = MOBILE_BREAKPOINT) {\n  const [isMobile, setIsMobile] = useState(() => {\n    if (typeof window === \"undefined\") return false;\n    return window.matchMedia(`(max-width: ${breakpoint - 1}px)`).matches;\n  });\n\n  useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);\n    const onChange = () => setIsMobile(mql.matches);\n    mql.addEventListener(\"change\", onChange);\n    setIsMobile(mql.matches);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, [breakpoint]);\n\n  return isMobile;\n}\n\n// ============================================================================\n// Context\n// ============================================================================\n\nexport type SidebarState = \"expanded\" | \"collapsed\" | \"peeking\";\n\nexport interface SidebarContextValue {\n  state: SidebarState;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: boolean;\n  toggleSidebar: () => void;\n  variant: \"sidebar\" | \"floating\" | \"inset\";\n  side: \"left\" | \"right\";\n  collapsible: \"icon\" | \"offcanvas\" | \"none\";\n  width: number;\n  resizable: boolean;\n  minWidth: number;\n  maxWidth: number;\n  isResizing: boolean;\n  setIsResizing: (resizing: boolean) => void;\n  setWidth: (width: number) => void;\n  isPeeking: boolean;\n  peekable: boolean;\n  startPeek: () => void;\n  stopPeek: () => void;\n  contained: boolean;\n  animationDuration: number;\n}\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\n/**\n * Hook to access sidebar state and actions from any descendant component.\n *\n * @example\n * ```tsx\n * const { state, open, toggleSidebar, isMobile } = useSidebar();\n * ```\n *\n * @throws Error if used outside a `Sidebar.Provider`.\n */\nexport function useSidebar() {\n  const context = useContext(SidebarContext);\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a Sidebar.Provider\");\n  }\n  return context;\n}\n\n// ============================================================================\n// Provider\n// ============================================================================\n\nexport interface SidebarProviderProps {\n  /** Initial open state when uncontrolled. @default true */\n  defaultOpen?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Callback when open state changes (controlled mode). */\n  onOpenChange?: (open: boolean) => void;\n  /** Sidebar layout variant. @default \"sidebar\" */\n  variant?: SidebarVariant;\n  /** Which side the sidebar is on. @default \"left\" */\n  side?: SidebarSide;\n  collapsible?: \"icon\" | \"offcanvas\" | \"none\";\n  /** Enable drag-to-resize on the sidebar edge. @default false */\n  resizable?: boolean;\n  /** Initial width in pixels when resizable. @default 256 */\n  defaultWidth?: number;\n  /** Minimum width in pixels when resizing. @default 200 */\n  minWidth?: number;\n  /** Maximum width in pixels when resizing. @default 480 */\n  maxWidth?: number;\n  /** Callback when width changes during resize. */\n  onWidthChange?: (width: number) => void;\n  /**\n   * When true, the collapsed sidebar uses absolute positioning instead of fixed,\n   * keeping it scoped inside a bounded parent. Useful for demos and embedded sidebars.\n   * @default false\n   */\n  contained?: boolean;\n  /**\n   * When true, hovering or focusing the collapsed sidebar temporarily expands it.\n   * The `state` will be `\"peeking\"` during the peek. Moving away collapses it back.\n   * @default false\n   */\n  peekable?: boolean;\n  /**\n   * Duration of sidebar expand/collapse animation in milliseconds.\n   * @default 250\n   */\n  animationDuration?: number;\n  /**\n   * Viewport width (in px) below which the sidebar renders as a mobile dialog\n   * sheet instead of the desktop aside rail.\n   * @default 768\n   */\n  mobileBreakpoint?: number;\n  /** Content — typically `<Sidebar>` + main content. */\n  children: ReactNode;\n  /** Additional CSS classes for the wrapper div. */\n  className?: string;\n  /** Inline styles for the wrapper div. */\n  style?: CSSProperties;\n}\n\n/**\n * Sidebar context provider. Manages expand/collapse state and mobile detection.\n * Renders a flex wrapper div with CSS custom properties for sidebar width.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider defaultOpen>\n *   <Sidebar>{...}</Sidebar>\n *   <main className=\"flex-1\">{...}</main>\n * </Sidebar.Provider>\n * ```\n */\nconst DEFAULT_WIDTH_PX = 256;\nconst MIN_WIDTH_PX = 200;\nconst MAX_WIDTH_PX = 480;\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  variant = REKI_SIDEBAR_DEFAULT_VARIANTS.variant,\n  side = REKI_SIDEBAR_DEFAULT_VARIANTS.side,\n  collapsible = REKI_SIDEBAR_DEFAULT_VARIANTS.collapsible,\n  resizable = false,\n  defaultWidth = DEFAULT_WIDTH_PX,\n  minWidth = MIN_WIDTH_PX,\n  maxWidth = MAX_WIDTH_PX,\n  onWidthChange,\n  contained = false,\n  peekable = false,\n  animationDuration = SIDEBAR_ANIMATION_DURATION_MS,\n  mobileBreakpoint,\n  children,\n  className,\n  style,\n}: SidebarProviderProps) {\n  const isMobile = useIsMobile(mobileBreakpoint);\n  const [_openMobile, _setOpenMobile] = useState(false);\n  const [width, setWidthState] = useState(defaultWidth);\n  const [isResizing, setIsResizing] = useState(false);\n  const [isPeeking, setIsPeeking] = useState(false);\n\n  // When controlled (`openProp` provided), use it directly for mobile too.\n  // When uncontrolled, use internal `_openMobile` state.\n  const openMobile =\n    isMobile && openProp !== undefined ? openProp : _openMobile;\n\n  const setOpenMobile = useCallback(\n    (next: boolean) => {\n      _setOpenMobile(next);\n      // In controlled mode on mobile, notify the consumer\n      if (isMobile && openProp !== undefined) {\n        setOpenProp?.(next);\n      }\n    },\n    [isMobile, openProp, setOpenProp],\n  );\n\n  const setWidth = useCallback(\n    (newWidth: number) => {\n      const clamped = Math.min(maxWidth, Math.max(minWidth, newWidth));\n      setWidthState(clamped);\n      onWidthChange?.(clamped);\n    },\n    [minWidth, maxWidth, onWidthChange],\n  );\n\n  const [_open, _setOpen] = useState(defaultOpen);\n  const open = openProp ?? _open;\n  const setOpen = useCallback(\n    (value: boolean | ((prev: boolean) => boolean)) => {\n      const next = typeof value === \"function\" ? value(open) : value;\n      setOpenProp?.(next);\n      _setOpen(next);\n    },\n    [setOpenProp, open],\n  );\n\n  const toggleSidebar = useCallback(() => {\n    if (isMobile) {\n      setOpenMobile(!openMobile);\n    } else {\n      setIsPeeking(false);\n      setOpen((prev: boolean) => !prev);\n    }\n  }, [isMobile, openMobile, setOpenMobile, setOpen]);\n\n  const startPeek = useCallback(() => {\n    if (peekable && !open && !isMobile) {\n      setIsPeeking(true);\n    }\n  }, [peekable, open, isMobile]);\n\n  const stopPeek = useCallback(() => {\n    setIsPeeking(false);\n  }, []);\n\n  const state: SidebarState = isPeeking\n    ? \"peeking\"\n    : open\n      ? \"expanded\"\n      : \"collapsed\";\n\n  const sidebarWidthValue = resizable ? `${width}px` : SIDEBAR_WIDTH;\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps -- all values are\n  // either stable (props, setters) or derived from state that triggers re-render\n  const contextValue = useMemo<SidebarContextValue>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      openMobile,\n      setOpenMobile,\n      isMobile,\n      toggleSidebar,\n      variant,\n      side,\n      collapsible,\n      width,\n      resizable,\n      minWidth,\n      maxWidth,\n      isResizing,\n      setIsResizing,\n      setWidth,\n      isPeeking,\n      peekable,\n      startPeek,\n      stopPeek,\n      contained,\n      animationDuration,\n    }),\n    [state, open, openMobile, isMobile, width, isResizing, isPeeking],\n  );\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-sidebar-wrapper=\"\"\n        data-state={state}\n        data-side={side}\n        style={\n          {\n            \"--sidebar-width\": sidebarWidthValue,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            \"--sidebar-animation-duration\": `${animationDuration}ms`,\n            \"--sidebar-easing\": SIDEBAR_EASING,\n            \"--sidebar-bg\": \"var(--color-reki-sidebar)\",\n            \"--sidebar-active-bg\": \"var(--color-reki-sidebar-active)\",\n            ...style,\n          } as CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper relative isolate flex w-full\",\n          !contained && !isMobile && \"min-h-svh\",\n          \"has-data-[variant=inset]:bg-reki-recessed\",\n          isResizing && \"select-none\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  );\n}\n\nSidebarProvider.displayName = \"Sidebar.Provider\";\n\n// ============================================================================\n// Sidebar Root\n// ============================================================================\n\nexport interface SidebarRootProps extends ComponentPropsWithoutRef<\"aside\"> {\n  /** Additional CSS classes for the sidebar element. */\n  className?: string;\n  /** Additional CSS classes for the inner content container. */\n  contentClassName?: string;\n  /** Sidebar content — Header, Content, Footer, etc. */\n  children: ReactNode;\n}\n\n/**\n * Main sidebar container. Renders as `<aside>` on desktop, modal sidebar sheet on mobile.\n * Must be used inside `Sidebar.Provider`.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider>\n *   <Sidebar>\n *     <Sidebar.Header>...</Sidebar.Header>\n *     <Sidebar.Content>...</Sidebar.Content>\n *     <Sidebar.Footer>...</Sidebar.Footer>\n *   </Sidebar>\n * </Sidebar.Provider>\n * ```\n */\nconst SidebarRoot = forwardRef<HTMLElement, SidebarRootProps>(\n  ({ className, contentClassName, children, ...props }, ref) => {\n    const {\n      state,\n      open,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      side,\n      variant,\n      collapsible,\n      isResizing,\n      resizable,\n      width,\n      isPeeking,\n      startPeek,\n      stopPeek,\n      contained,\n    } = useSidebar();\n\n    // --- Mobile a11y hooks (must be before early returns) ---\n\n    // Imperatively set inert on the mobile sidebar — React 18 doesn't\n    // reliably forward the inert attribute as a JSX prop on initial mount.\n    const mobileAsideRef = useCallback(\n      (node: HTMLElement | null) => {\n        if (node) {\n          if (!openMobile) {\n            node.setAttribute(\"inert\", \"\");\n          } else {\n            node.removeAttribute(\"inert\");\n          }\n        }\n      },\n      [openMobile],\n    );\n\n    // Merge forwarded ref with inert ref for the mobile aside\n    const mergedMobileRef = useCallback(\n      (node: HTMLElement | null) => {\n        mobileAsideRef(node);\n        if (typeof ref === \"function\") {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLElement | null>).current = node;\n        }\n      },\n      [ref, mobileAsideRef],\n    );\n\n    // Refs for mobile focus management (declared before effects that use them)\n    const triggerRef = useRef<Element | null>(null);\n    const mobileNodeRef = useRef<HTMLElement | null>(null);\n    const shouldRestoreFocusRef = useRef(false);\n\n    // Escape key and focus-leave close the mobile sidebar\n    useEffect(() => {\n      if (!isMobile || !openMobile) return;\n      const node = mobileNodeRef.current;\n      const handleKeyDown = (e: KeyboardEvent) => {\n        if (e.key === \"Escape\") {\n          shouldRestoreFocusRef.current = true;\n          setOpenMobile(false);\n        }\n      };\n      const handleFocusOut = (e: FocusEvent) => {\n        if (node && !node.contains(e.relatedTarget as Node)) {\n          shouldRestoreFocusRef.current = false;\n          setOpenMobile(false);\n        }\n      };\n      document.addEventListener(\"keydown\", handleKeyDown);\n      node?.addEventListener(\"focusout\", handleFocusOut);\n      return () => {\n        document.removeEventListener(\"keydown\", handleKeyDown);\n        node?.removeEventListener(\"focusout\", handleFocusOut);\n      };\n    }, [isMobile, openMobile, setOpenMobile]);\n\n    // When the mobile sidebar opens, move focus into it;\n    // when it closes, return focus to the element that opened it.\n    useEffect(() => {\n      if (!isMobile) return;\n      if (openMobile) {\n        triggerRef.current = document.activeElement;\n        shouldRestoreFocusRef.current = false;\n        // Wait a frame so the aside is no longer inert before focusing\n        requestAnimationFrame(() => {\n          const firstFocusable = mobileNodeRef.current?.querySelector<HTMLElement>(\n            FOCUSABLE_SELECTOR,\n          );\n          (firstFocusable ?? mobileNodeRef.current)?.focus();\n        });\n      } else if (\n        shouldRestoreFocusRef.current &&\n        triggerRef.current instanceof HTMLElement\n      ) {\n        triggerRef.current.focus();\n        shouldRestoreFocusRef.current = false;\n        triggerRef.current = null;\n      }\n    }, [isMobile, openMobile]);\n\n    const handlePeekBlur = useCallback(\n      (e: React.FocusEvent<HTMLDivElement>) => {\n        if (!e.currentTarget.contains(e.relatedTarget as Node)) {\n          stopPeek();\n        }\n      },\n      [stopPeek],\n    );\n\n    if (collapsible === \"none\") {\n      return (\n        <aside\n          ref={ref}\n          data-state=\"expanded\"\n          data-side={side}\n          data-variant={variant}\n          data-sidebar=\"sidebar\"\n          style={{\n            width: \"var(--sidebar-width)\",\n            minWidth: \"var(--sidebar-width)\",\n            maxWidth: \"var(--sidebar-width)\",\n          }}\n          className={cn(\n            \"relative flex h-full shrink-0 grow-0 flex-col overflow-hidden bg-(--sidebar-bg) text-reki-default\",\n            variant === \"sidebar\" &&\n              (side === \"left\"\n                ? \"border-r border-reki-line\"\n                : \"border-l border-reki-line\"),\n            variant === \"floating\" &&\n              \"m-2 rounded-lg border border-reki-line shadow-lg\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </aside>\n      );\n    }\n\n    if (isMobile) {\n      return (\n        <>\n          {/* Backdrop — click to close */}\n          <div\n            data-sidebar-backdrop=\"\"\n            className={cn(\n              contained ? \"absolute inset-0 z-40 bg-reki-recessed\" : \"fixed inset-0 z-40 bg-reki-recessed\",\n              \"transition-opacity duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n              \"motion-reduce:transition-none\",\n              openMobile ? \"opacity-80\" : \"opacity-0 pointer-events-none\",\n            )}\n            onClick={() => {\n              shouldRestoreFocusRef.current = true;\n              setOpenMobile(false);\n            }}\n            aria-hidden=\"true\"\n          />\n\n          {/* Mobile sidebar — navigation landmark with focus management */}\n          <nav\n            ref={(node) => {\n              mergedMobileRef(node);\n              mobileNodeRef.current = node;\n            }}\n            tabIndex={-1}\n            aria-label=\"Navigation\"\n            aria-hidden={!openMobile}\n            data-state={openMobile ? \"expanded\" : \"collapsed\"}\n            data-side={side}\n            data-variant={variant}\n            data-collapsible={collapsible}\n            data-sidebar=\"sidebar\"\n            data-mobile=\"true\"\n            className={cn(\n              contained\n                ? \"group/sidebar absolute inset-y-0 z-50 flex w-(--sidebar-width) flex-col overflow-hidden\"\n                : \"group/sidebar fixed inset-y-0 z-50 flex w-(--sidebar-width) flex-col overflow-hidden\",\n              \"border-r border-reki-line bg-(--sidebar-bg) text-reki-default\",\n              \"transition-transform duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n              \"motion-reduce:transition-none\",\n              side === \"left\" && \"left-0\",\n              side === \"right\" && \"right-0\",\n              side === \"left\" &&\n                (openMobile ? \"translate-x-0\" : \"-translate-x-full\"),\n              side === \"right\" &&\n                (openMobile ? \"translate-x-0\" : \"translate-x-full\"),\n              className,\n            )}\n            {...props}\n          >\n            {children}\n          </nav>\n        </>\n      );\n    }\n\n    // --- Desktop two-layer architecture ---\n    // Rail: the <aside> whose width drives layout (stays collapsed during peek).\n    // Content container: holds actual sidebar content, can overlay when peeking.\n\n    // Rail width: based on open state only (not peeking)\n    const collapsedWidth =\n      collapsible === \"icon\" ? \"var(--sidebar-width-icon)\" : \"0px\";\n    const expandedWidth = resizable ? `${width}px` : \"var(--sidebar-width)\";\n    const railWidth = open ? expandedWidth : collapsedWidth;\n\n    // Content container width: expanded during peek\n    const contentExpanded = open || isPeeking;\n    const contentWidth = contentExpanded ? expandedWidth : collapsedWidth;\n\n    const borderClasses =\n      variant === \"sidebar\"\n        ? side === \"left\"\n          ? \"border-r border-reki-line\"\n          : \"border-l border-reki-line\"\n        : variant === \"floating\"\n          ? \"border border-reki-line\"\n          : \"\";\n\n    return (\n      <aside\n        ref={ref}\n        data-state={state}\n        data-side={side}\n        data-variant={variant}\n        data-collapsible={collapsible}\n        data-sidebar=\"sidebar\"\n        style={{ width: railWidth }}\n        className={cn(\n          \"group/sidebar relative h-full shrink-0 grow-0\",\n          \"overflow-visible\", // allow content container to overlay when peeking\n          \"transition-[width] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n          \"motion-reduce:transition-none\",\n          isResizing && \"transition-none!\",\n          variant === \"floating\" && \"m-2 rounded-lg shadow-lg\",\n          className,\n        )}\n        {...props}\n      >\n        <TooltipProvider>\n          {(() => {\n            // Separate footer children from the rest so hovering the footer\n            // doesn't trigger peeking. Footer is rendered outside the peek zone.\n            const childArray = React.Children.toArray(children);\n            const footerChildren = childArray.filter(\n              (child) =>\n                React.isValidElement(child) &&\n                (child.type as { displayName?: string })?.displayName ===\n                  \"Sidebar.Footer\",\n            );\n            const nonFooterChildren = childArray.filter(\n              (child) =>\n                !React.isValidElement(child) ||\n                (child.type as { displayName?: string })?.displayName !==\n                  \"Sidebar.Footer\",\n            );\n\n            return (\n              <div\n                data-sidebar=\"content-container\"\n                style={{ width: contentWidth }}\n                className={cn(\n                  \"flex h-full flex-col\",\n                  \"min-w-0 overflow-hidden whitespace-nowrap\",\n                  \"bg-(--sidebar-bg) text-reki-default\",\n                  borderClasses,\n                  \"transition-[width] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n                  \"motion-reduce:transition-none\",\n                  isResizing && \"transition-none!\",\n                  !open &&\n                    cn(\n                      contained ? \"absolute\" : \"fixed\",\n                      \"inset-y-0 z-40\",\n                      side === \"left\" && \"left-0\",\n                      side === \"right\" && \"right-0\",\n                    ),\n                  open && \"relative\",\n                  contentClassName,\n                )}\n              >\n                {/* Peek zone — header + content (not footer) */}\n                <div\n                  data-sidebar=\"peek-zone\"\n                  className=\"flex flex-1 flex-col min-h-0\"\n                  onMouseEnter={startPeek}\n                  onMouseLeave={stopPeek}\n                  onFocus={startPeek}\n                  onBlur={handlePeekBlur}\n                >\n                  {nonFooterChildren}\n                </div>\n                {/* Footer — outside peek zone */}\n                {footerChildren}\n              </div>\n            );\n          })()}\n        </TooltipProvider>\n      </aside>\n    );\n  },\n);\n\nSidebarRoot.displayName = \"Sidebar\";\n\n// ============================================================================\n// Sidebar Header\n// ============================================================================\n\n/**\n * Top section of the sidebar. Typically contains a logo, title, and action button.\n *\n * @example\n * ```tsx\n * <Sidebar.Header>\n *   <CloudflareLogo />\n *   <span>Design Engineering</span>\n *   <Button shape=\"square\" icon={CaretUpDownIcon} aria-label=\"Switch\" />\n * </Sidebar.Header>\n * ```\n */\nconst SidebarHeader = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"header\"\n    className={cn(\n      \"flex h-[58px] shrink-0 items-center gap-1 border-b border-reki-line font-medium\",\n      \"px-3 overflow-hidden\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nSidebarHeader.displayName = \"Sidebar.Header\";\n\n// ============================================================================\n// Sidebar Content\n// ============================================================================\n\n/**\n * Scrollable middle section of the sidebar. Contains nav groups and menus.\n *\n * @example\n * ```tsx\n * <Sidebar.Content>\n *   <Sidebar.Group>...</Sidebar.Group>\n * </Sidebar.Content>\n * ```\n */\nconst SidebarContent = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, children, ...props }, ref) => (\n  <ScrollAreaBase.Root\n    ref={ref}\n    data-sidebar=\"content\"\n    className={cn(\"relative min-w-0 flex-1 overflow-hidden\", className)}\n    {...props}\n  >\n    <ScrollAreaBase.Viewport\n      tabIndex={-1}\n      className={cn(\n        \"h-full px-[11px] py-3 group-not-data-[state=collapsed]/sidebar:px-3.5\",\n        \"transition-[padding] duration-(--sidebar-animation-duration)\",\n        \"overflow-x-hidden!\",\n        // Scroll fade via CSS mask driven by Base UI overflow CSS variables\n        \"[mask-image:linear-gradient(to_bottom,transparent_0,black_min(24px,var(--scroll-area-overflow-y-start,24px)),black_calc(100%-min(24px,var(--scroll-area-overflow-y-end,24px))),transparent_100%)]\",\n      )}\n    >\n      <ScrollAreaBase.Content className=\"flex min-w-0! flex-col\">\n        {children}\n      </ScrollAreaBase.Content>\n    </ScrollAreaBase.Viewport>\n    <ScrollAreaBase.Scrollbar\n      orientation=\"vertical\"\n      className={cn(\n        \"flex w-1.5 touch-none select-none p-px\",\n        \"opacity-0 transition-opacity duration-150\",\n        \"data-[scrolling]:opacity-100 data-[hovering]:opacity-100\",\n      )}\n    >\n      <ScrollAreaBase.Thumb className=\"flex-1 rounded-full bg-reki-line\" />\n    </ScrollAreaBase.Scrollbar>\n  </ScrollAreaBase.Root>\n));\n\nSidebarContent.displayName = \"Sidebar.Content\";\n\n// ============================================================================\n// Sidebar Footer\n// ============================================================================\n\n/**\n * Bottom-pinned section of the sidebar. Rendered outside the peek zone\n * so hovering the footer doesn't trigger a peek. Tracks sidebar width\n * to stay aligned with the content container.\n *\n * @example\n * ```tsx\n * <Sidebar.Footer>\n *   <Sidebar.Trigger />\n * </Sidebar.Footer>\n * ```\n */\nconst SidebarFooter = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"footer\"\n    className={cn(\n      \"flex h-12 shrink-0 items-center gap-4 overflow-hidden whitespace-nowrap border-t border-reki-line\",\n      \"px-[11px] group-not-data-[state=collapsed]/sidebar:px-4\",\n      \"bg-(--sidebar-bg)\",\n      \"w-(--sidebar-width)\",\n      \"transition-[width,padding] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n      \"motion-reduce:transition-none\",\n      \"sticky bottom-0\",\n      \"group-data-[state=collapsed]/sidebar:w-(--sidebar-width-icon) bg-clip-padding\",\n      \"group-data-[state=collapsed]/sidebar:border-r group-data-[state=collapsed]/sidebar:border-reki-line\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nSidebarFooter.displayName = \"Sidebar.Footer\";\n\n// ============================================================================\n// Sidebar Group\n// ============================================================================\n\n/**\n * Groups related menu items with an optional label.\n *\n * @example\n * ```tsx\n * <Sidebar.Group>\n *   <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n *   <Sidebar.Menu>...</Sidebar.Menu>\n * </Sidebar.Group>\n * ```\n */\nconst SidebarGroup = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, children, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"group\"\n    className={cn(\"flex min-w-0 flex-col gap-y-px\", className)}\n    {...props}\n  >\n    {children}\n  </div>\n));\n\nSidebarGroup.displayName = \"Sidebar.Group\";\n\n// ============================================================================\n// Sidebar GroupLabel\n// ============================================================================\n\n/**\n * Section label for a sidebar group (e.g., \"Build\", \"Protect & Connect\").\n * When the sidebar is collapsed, renders as a thin horizontal divider.\n * When it's the first group, the divider is hidden (nothing above to separate from).\n *\n * @example\n * ```tsx\n * <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n * ```\n */\nconst SidebarGroupLabel = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, children, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"group-label\"\n    className={cn(\n      // Grid-rows for smooth collapse animation\n      \"grid overflow-hidden\",\n      \"transition-[grid-template-rows,margin,border-color] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n      // Mobile: no collapse animation — sidebar is always expanded\n      \"group-data-[mobile=true]/sidebar:transition-none\",\n      // Collapsed: spacer with divider line between icon groups\n      \"grid-rows-[0fr] my-3 border-b border-reki-line\",\n      // First group: no spacer or divider needed\n      \"[[data-sidebar=group]:first-child_&]:my-0 [[data-sidebar=group]:first-child_&]:border-transparent\",\n      // Expanded: reveal the label text\n      \"group-not-data-[state=collapsed]/sidebar:grid-rows-[1fr] group-not-data-[state=collapsed]/sidebar:my-0 group-not-data-[state=collapsed]/sidebar:border-transparent\",\n      // Mobile: always show labels (sidebar content is always expanded on mobile)\n      \"group-data-[mobile=true]/sidebar:grid-rows-[1fr] group-data-[mobile=true]/sidebar:my-0 group-data-[mobile=true]/sidebar:border-transparent\",\n      className,\n    )}\n    {...props}\n  >\n    <div className=\"min-h-0 min-w-0\">\n      <div\n        className={cn(\n          \"truncate px-3 mt-4 mb-2 text-sm font-medium text-reki-subtle\",\n          // First group: less top margin\n          \"[[data-sidebar=group]:first-child_&]:mt-2\",\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  </div>\n));\n\nSidebarGroupLabel.displayName = \"Sidebar.GroupLabel\";\n\n// ============================================================================\n// MenuItem / MenuSubItem auto-wrap contexts\n// ============================================================================\n\n/**\n * When `true`, indicates the component is already wrapped in a `MenuItem` `<li>`.\n * `MenuButton` checks this: if `false`, it auto-wraps itself in an `<li>`.\n */\nconst MenuItemContext = createContext(false);\n\n/**\n * When `true`, indicates the component is already wrapped in a `MenuSubItem` `<li>`.\n * `MenuSubButton` checks this: if `false`, it auto-wraps itself in an `<li>`.\n */\nconst MenuSubItemContext = createContext(false);\n\n// ============================================================================\n// Sidebar Menu\n// ============================================================================\n\n/**\n * Navigation menu list. Renders as `<ul>`.\n *\n * `MenuButton` auto-wraps in `<li>` so `MenuItem` is optional for simple items.\n *\n * @example Simple usage\n * ```tsx\n * <Sidebar.Menu>\n *   <Sidebar.MenuButton icon={HouseIcon} active>Account home</Sidebar.MenuButton>\n *   <Sidebar.MenuButton icon={GlobeIcon}>Domains</Sidebar.MenuButton>\n * </Sidebar.Menu>\n * ```\n *\n * @example With explicit MenuItem (needed for Collapsible wrapper)\n * ```tsx\n * <Sidebar.Menu>\n *   <Sidebar.MenuItem>\n *     <Sidebar.Collapsible>...</Sidebar.Collapsible>\n *   </Sidebar.MenuItem>\n * </Sidebar.Menu>\n * ```\n */\nconst SidebarMenu = forwardRef<\n  HTMLUListElement,\n  ComponentPropsWithoutRef<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    data-sidebar=\"menu\"\n    className={cn(\n      \"m-0 flex min-w-0 list-none flex-col items-stretch gap-y-px p-0\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nSidebarMenu.displayName = \"Sidebar.Menu\";\n\n// ============================================================================\n// Sidebar MenuItem\n// ============================================================================\n\n/**\n * Individual menu list item. Renders as `<li>`.\n *\n * **Optional when using `MenuButton` directly** — `MenuButton` auto-wraps\n * itself in a `<li>` when not already inside a `MenuItem`. Use `MenuItem`\n * explicitly when wrapping a `Collapsible`.\n *\n * @example Explicit usage (wrapping a Collapsible)\n * ```tsx\n * <Sidebar.MenuItem>\n *   <Sidebar.Collapsible>...</Sidebar.Collapsible>\n * </Sidebar.MenuItem>\n * ```\n */\nconst SidebarMenuItem = forwardRef<\n  HTMLLIElement,\n  ComponentPropsWithoutRef<\"li\">\n>(({ className, children, ...props }, ref) => (\n  <MenuItemContext.Provider value={true}>\n    <li\n      ref={ref}\n      data-sidebar=\"menu-item\"\n      className={cn(\n        \"relative group-data-[state=collapsed]/sidebar:overflow-hidden\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </li>\n  </MenuItemContext.Provider>\n));\n\nSidebarMenuItem.displayName = \"Sidebar.MenuItem\";\n\n// ============================================================================\n// Sidebar MenuButton\n// ============================================================================\n\nexport type SidebarMenuButtonSize = \"base\" | \"sm\";\n\nexport interface SidebarMenuButtonProps\n  extends Omit<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    \"className\" | \"children\"\n  > {\n  icon?: React.ComponentType<{ className?: string }> | React.ReactNode;\n  active?: boolean;\n  /**\n   * Button size.\n   * - `\"base\"` — Standard nav item\n   * - `\"sm\"` — Compact nav item\n   * @default \"base\"\n   */\n  size?: SidebarMenuButtonSize;\n  href?: string;\n  /** Link target — only meaningful when `href` is provided. */\n  target?: React.HTMLAttributeAnchorTarget;\n  tooltip?: string;\n  className?: string;\n  children?: ReactNode;\n}\n\n/**\n * Primary interactive element inside a menu item. Renders as a `<button>` or link.\n * Supports icons, active state, and auto-tooltip when the sidebar is collapsed.\n *\n * **Auto-wraps in `<li>`** when not already inside a `Sidebar.MenuItem`.\n * Use `MenuItem` explicitly only when wrapping a `Collapsible`.\n *\n * @example Simple usage (auto-wrapped in `<li>`)\n * ```tsx\n * <Sidebar.Menu>\n *   <Sidebar.MenuButton icon={GlobeIcon} active>Domains</Sidebar.MenuButton>\n *   <Sidebar.MenuButton icon={ClockIcon} href=\"/recents\">Recents</Sidebar.MenuButton>\n * </Sidebar.Menu>\n * ```\n *\n * @example With Collapsible (explicit MenuItem needed)\n * ```tsx\n * <Sidebar.MenuItem>\n *   <Sidebar.Collapsible>\n *     <Sidebar.CollapsibleTrigger render={<Sidebar.MenuButton icon={CodeIcon}>Compute<Sidebar.MenuChevron /></Sidebar.MenuButton>} />\n *     <Sidebar.CollapsibleContent>...</Sidebar.CollapsibleContent>\n *   </Sidebar.Collapsible>\n * </Sidebar.MenuItem>\n * ```\n */\nconst SidebarMenuButton = forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\n  (\n    {\n      className,\n      icon: IconProp,\n      active = false,\n      size = \"base\",\n      href,\n      target,\n      tooltip,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const { state, peekable } = useSidebar();\n    const LinkComponent = useLinkComponent();\n    const isInsideMenuItem = useContext(MenuItemContext);\n\n    // Render icon — supports both component types and React elements\n    const iconNode = (() => {\n      if (!IconProp) return null;\n      if (React.isValidElement(IconProp)) return IconProp;\n      const Comp = IconProp as React.ComponentType<{ className?: string, weight?: string }>;\n      return (\n        <Comp\n          className={cn(\n            \"shrink-0 opacity-40\",\n            size === \"base\" ? \"size-4\" : \"size-3.5\",\n          )}\n        />\n      );\n    })();\n\n    const content = (\n      <div\n        className={cn(\n          \"flex flex-1 items-center min-w-0 gap-2\",\n          \"translate-x-[-3px] group-not-data-[state=collapsed]/sidebar:translate-x-0\",\n          \"transition-transform duration-(--sidebar-animation-duration)\",\n        )}\n      >\n        {iconNode}\n        <span\n          className={cn(\n            \"flex flex-1 items-center gap-2 min-w-0 text-left overflow-hidden\",\n          )}\n        >\n          {React.Children.map(children, (child) =>\n            typeof child === \"string\" || typeof child === \"number\" ? (\n              <span className=\"truncate\">{child}</span>\n            ) : (\n              child\n            ),\n          )}\n        </span>\n      </div>\n    );\n\n    const buttonClasses = cn(\n      // Layout\n      \"group/menu-button relative flex w-full min-w-0 items-center gap-1.5 rounded-lg outline-none cursor-pointer\",\n      \"before:absolute before:inset-x-0 before:-inset-y-px\",\n      // Sizing\n       \"min-h-7 px-2 py-0 text-sm text-tight\",\n      \"text-reki-default\",\n      \"transition-[color,box-shadow,outline] duration-(--sidebar-animation-duration)\",\n      !active && \"hover:bg-(--sidebar-active-bg)\",\n      // Active state\n      active && \"bg-(--sidebar-active-bg)\",\n      // When a child sub-button is active, don't show active styling on the parent trigger\n      \"has-[[data-active]]:bg-transparent has-[[data-active]]:hover:bg-(--sidebar-active-bg)\",\n      // Focus\n      \"focus:outline-none focus-visible:text-reki-strong focus-visible:bg-(--sidebar-active-bg)\",\n      className,\n    );\n\n    let button: React.ReactNode;\n\n    if (href) {\n      button = (\n        <LinkComponent\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          className={cn(buttonClasses, \"no-underline!\")}\n          href={href}\n          to={href}\n          target={target}\n          data-active={active || undefined}\n          data-sidebar=\"menu-button\"\n          data-reki-component=\"Sidebar\"\n          data-reki-part=\"menu-button-link\"\n          data-size={size}\n          onClick={\n            props.onClick as unknown as React.MouseEventHandler<HTMLAnchorElement>\n          }\n        >\n          {content}\n        </LinkComponent>\n      );\n    } else {\n      button = (\n        <button\n          ref={ref}\n          type=\"button\"\n          className={buttonClasses}\n          data-active={active || undefined}\n          data-sidebar=\"menu-button\"\n          data-reki-component=\"Sidebar\"\n          data-reki-part=\"menu-button\"\n          data-size={size}\n          {...props}\n        >\n          {content}\n        </button>\n      );\n    }\n\n    // Always wrap in Tooltip when tooltip text is provided so the DOM\n    // structure stays stable across expand/collapse — preventing React from\n    // remounting the button (which would kill CSS transitions).\n    // The tooltip popup only shows when collapsed and peeking is disabled —\n    // when peekable, hovering reveals the full sidebar so tooltips are redundant.\n    const showTooltip = state === \"collapsed\" && !peekable;\n    if (tooltip) {\n      button = (\n        <Tooltip\n          content={showTooltip ? tooltip : null}\n          side=\"right\"\n          render={button}\n        />\n      );\n    }\n\n    // Auto-wrap in <li> when not already inside a MenuItem\n    if (!isInsideMenuItem) {\n      return (\n        <li\n          data-sidebar=\"menu-item\"\n          className=\"relative group-data-[state=collapsed]/sidebar:overflow-hidden\"\n        >\n          {button}\n        </li>\n      );\n    }\n\n    return button;\n  },\n);\n\nSidebarMenuButton.displayName = \"Sidebar.MenuButton\";\n\n// ============================================================================\n// Sidebar MenuBadge\n// ============================================================================\n\n/**\n * Badge pill displayed inside a menu button (e.g., \"Beta\", \"New\").\n * Uses dashed border styling matching the Cloudflare design system.\n *\n * @example\n * ```tsx\n * <Sidebar.MenuSubButton>\n *   Containers\n *   <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>\n * </Sidebar.MenuSubButton>\n * ```\n */\nconst SidebarMenuBadge = forwardRef<\n  HTMLSpanElement,\n  ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    data-sidebar=\"menu-badge\"\n    className={cn(\n      \"inline-flex shrink-0 items-center rounded-full border border-dashed border-reki-line\",\n      \"select-none px-1.5 py-0.5 text-[11px]/none font-medium text-reki-strong\",\n      // Hidden when collapsed\n      \"group-data-[state=collapsed]/sidebar:hidden\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nSidebarMenuBadge.displayName = \"Sidebar.MenuBadge\";\n\n// ============================================================================\n// Sidebar MenuSub\n// ============================================================================\n\n/**\n * Indented sub-menu container for child navigation items. Renders as `<ul>` with\n * a left border accent for visual hierarchy.\n *\n * `MenuSubButton` auto-wraps in `<li>` so `MenuSubItem` is optional.\n *\n * @example\n * ```tsx\n * <Sidebar.MenuSub>\n *   <Sidebar.MenuSubButton active>Workers & Pages</Sidebar.MenuSubButton>\n *   <Sidebar.MenuSubButton>Durable Objects</Sidebar.MenuSubButton>\n * </Sidebar.MenuSub>\n * ```\n */\nconst SidebarMenuSub = forwardRef<\n  HTMLUListElement,\n  ComponentPropsWithoutRef<\"ul\">\n>(({ className, children, ...props }, ref) => (\n  <ul\n    ref={ref}\n    data-sidebar=\"menu-sub\"\n    className={cn(\n      \"relative m-0 flex min-w-0 list-none flex-col gap-y-px p-0 pl-7 pr-0 overflow-hidden\",\n      className,\n    )}\n    {...props}\n  >\n    <div className=\"absolute left-[19px] inset-y-px w-px bg-reki-line z-10\" />\n    {children}\n  </ul>\n));\n\nSidebarMenuSub.displayName = \"Sidebar.MenuSub\";\n\n// ============================================================================\n// Sidebar MenuSubItem\n// ============================================================================\n\n/**\n * Individual item inside a sub-menu. Renders as `<li>`.\n *\n * **Optional when using `MenuSubButton` directly** — `MenuSubButton` auto-wraps\n * itself in a `<li>` when not already inside a `MenuSubItem`.\n */\nconst SidebarMenuSubItem = forwardRef<\n  HTMLLIElement,\n  ComponentPropsWithoutRef<\"li\">\n>(({ className, children, ...props }, ref) => (\n  <MenuSubItemContext.Provider value={true}>\n    <li\n      ref={ref}\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      {children}\n    </li>\n  </MenuSubItemContext.Provider>\n));\n\nSidebarMenuSubItem.displayName = \"Sidebar.MenuSubItem\";\n\n// ============================================================================\n// Sidebar MenuSubButton\n// ============================================================================\n\nexport interface SidebarMenuSubButtonProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  /** Marks this sub-item as currently active/selected. @default false */\n  active?: boolean;\n  /** Navigation URL. When set, renders as a link via LinkProvider. */\n  href?: string;\n}\n\n/**\n * Button inside a sub-menu item. Does not render an icon (sub-items are\n * indented instead). Supports active state and link rendering.\n *\n * **Auto-wraps in `<li>`** when not already inside a `Sidebar.MenuSubItem`.\n *\n * @example Simple usage (auto-wrapped in `<li>`)\n * ```tsx\n * <Sidebar.MenuSub>\n *   <Sidebar.MenuSubButton active>Workers & Pages</Sidebar.MenuSubButton>\n *   <Sidebar.MenuSubButton href=\"/observability\">Observability</Sidebar.MenuSubButton>\n * </Sidebar.MenuSub>\n * ```\n */\nconst SidebarMenuSubButton = forwardRef<\n  HTMLButtonElement,\n  SidebarMenuSubButtonProps\n>(({ className, active = false, href, children, ...props }, ref) => {\n  const LinkComponent = useLinkComponent();\n  const isInsideMenuSubItem = useContext(MenuSubItemContext);\n\n  const buttonClasses = cn(\n    \"group/menu-button relative flex w-full min-w-0 items-center gap-2 rounded-lg min-h-8.5 px-3 py-0 text-sm font-medium outline-none cursor-pointer\",\n    \"before:absolute before:inset-x-0 before:-inset-y-px\",\n    \"text-reki-default transition-[color] duration-150\",\n    !active && \"hover:bg-(--sidebar-active-bg)\",\n    active && \"bg-(--sidebar-active-bg)\",\n    \"focus:outline-none focus-visible:text-reki-strong focus-visible:bg-(--sidebar-active-bg)\",\n    className,\n  );\n\n  const content = (\n    <span className=\"flex flex-1 items-center gap-2 min-w-0 text-left overflow-hidden\">\n      {React.Children.map(children, (child) =>\n        typeof child === \"string\" || typeof child === \"number\" ? (\n          <span className=\"truncate\">{child}</span>\n        ) : (\n          child\n        ),\n      )}\n    </span>\n  );\n\n  let button: React.ReactNode;\n\n  if (href) {\n    button = (\n      <LinkComponent\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        className={cn(buttonClasses, \"no-underline!\")}\n        href={href}\n        to={href}\n        data-active={active || undefined}\n        data-sidebar=\"menu-sub-button\"\n        data-reki-component=\"Sidebar\"\n        data-reki-part=\"menu-sub-button-link\"\n        onClick={\n          props.onClick as unknown as React.MouseEventHandler<HTMLAnchorElement>\n        }\n      >\n        {content}\n      </LinkComponent>\n    );\n  } else {\n    button = (\n      <button\n        ref={ref}\n        type=\"button\"\n        className={buttonClasses}\n        data-active={active || undefined}\n        data-sidebar=\"menu-sub-button\"\n        data-reki-component=\"Sidebar\"\n        data-reki-part=\"menu-sub-button\"\n        {...props}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  // Auto-wrap in <li> when not already inside a MenuSubItem\n  if (!isInsideMenuSubItem) {\n    return (\n      <li data-sidebar=\"menu-sub-item\" className=\"relative\">\n        {button}\n      </li>\n    );\n  }\n\n  return button;\n});\n\nSidebarMenuSubButton.displayName = \"Sidebar.MenuSubButton\";\n\n// ============================================================================\n// Sidebar Separator\n// ============================================================================\n\n/**\n * Horizontal divider line between sidebar sections.\n */\nconst SidebarSeparator = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"separator\"\n    className={cn(\"my-3 px-2\", className)}\n    {...props}\n  >\n    <div className=\"border-b border-reki-line\" />\n  </div>\n));\n\nSidebarSeparator.displayName = \"Sidebar.Separator\";\n\n// ============================================================================\n// Sidebar Trigger\n// ============================================================================\n\n// ============================================================================\n// Sidebar PanelIcon\n// ============================================================================\n\n/**\n * Animated sidebar panel icon. The vertical divider line slides based\n * on the sidebar's open/closed state.\n */\nfunction SidebarPanelIcon({ className }: { className?: string }) {\n  const { open } = useSidebar();\n\n  return (\n    <svg\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      className={cn(\"shrink-0\", className)}\n    >\n      <path d=\"M21.25 6.72v10.56a2.97 2.97 0 0 1-2.97 2.97H5.72a2.97 2.97 0 0 1-2.97-2.97V6.72a2.97 2.97 0 0 1 2.97-2.97h12.56a2.97 2.97 0 0 1 2.97 2.97\" />\n      <path\n        d=\"M6.25 7.25v9.5\"\n        className={cn(\n          \"transition-transform duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n          open ? \"translate-x-px\" : \"translate-x-[10.5px]\",\n        )}\n      />\n    </svg>\n  );\n}\n\nSidebarPanelIcon.displayName = \"Sidebar.PanelIcon\";\n\n/**\n * Button that toggles the sidebar open/collapsed. Uses `toggleSidebar()` from context.\n * Defaults to an animated `SidebarPanelIcon`.\n *\n * @example\n * ```tsx\n * <Sidebar.Trigger />\n * ```\n */\nconst SidebarTrigger = forwardRef<\n  HTMLButtonElement,\n  ComponentPropsWithoutRef<\"button\">\n>(({ className, children, onClick, ...props }, ref) => {\n  const { open, toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      data-sidebar=\"trigger\"\n      data-reki-component=\"Sidebar\"\n      data-reki-part=\"trigger\"\n      aria-expanded={open}\n      aria-label={open ? \"Collapse sidebar\" : \"Expand sidebar\"}\n      className={cn(\n        \"flex shrink-0 size-8.5 justify-center items-center rounded-lg cursor-pointer\",\n        \"text-reki-subtle hover:text-reki-default hover:bg-(--sidebar-active-bg)\",\n        \"focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-reki-brand\",\n        className,\n      )}\n      onClick={(e) => {\n        onClick?.(e);\n        toggleSidebar();\n      }}\n      {...props}\n    >\n      {children ?? <SidebarPanelIcon />}\n    </button>\n  );\n});\n\nSidebarTrigger.displayName = \"Sidebar.Trigger\";\n\n// ============================================================================\n// Sidebar Rail\n// ============================================================================\n\n/**\n * Invisible interaction strip at the sidebar edge for click-to-toggle.\n * Renders a thin hover-sensitive area between the sidebar and main content.\n */\nconst SidebarRail = forwardRef<\n  HTMLButtonElement,\n  ComponentPropsWithoutRef<\"button\">\n>(({ className, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      data-sidebar=\"rail\"\n      data-reki-component=\"Sidebar\"\n      data-reki-part=\"rail\"\n      aria-label=\"Toggle sidebar\"\n      tabIndex={-1}\n      className={cn(\n        \"absolute inset-y-0 z-1 hidden w-4 -translate-x-1/2 cursor-pointer transition-all\",\n        \"after:absolute after:inset-y-0 after:left-1/2 after:w-0.5\",\n        \"hover:after:bg-reki-brand/20\",\n        \"group-data-[side=left]/sidebar-wrapper:right-0\",\n        \"group-data-[side=right]/sidebar-wrapper:left-0\",\n        \"sm:flex\",\n        className,\n      )}\n      onClick={toggleSidebar}\n      {...props}\n    />\n  );\n});\n\nSidebarRail.displayName = \"Sidebar.Rail\";\n\n// ============================================================================\n// Sidebar ResizeHandle\n// ============================================================================\n\n/**\n * Drag handle for resizing the sidebar. Renders when `resizable` is true in\n * both expanded and collapsed states.\n *\n * - **Expanded → drag inward past `minWidth`**: auto-collapses to icon-only.\n * - **Collapsed → drag outward past `minWidth`**: auto-expands and begins\n *   tracking width from `minWidth`.\n */\nconst SidebarResizeHandle = forwardRef<\n  HTMLButtonElement,\n  ComponentPropsWithoutRef<\"button\">\n>(({ className, ...props }, ref) => {\n  const {\n    side,\n    resizable,\n    setIsResizing,\n    setWidth,\n    setOpen,\n    open,\n    minWidth,\n    width: currentWidth,\n    maxWidth,\n  } = useSidebar();\n  const startX = useRef(0);\n  const startWidth = useRef(0);\n  const wasCollapsed = useRef(false);\n\n  if (!resizable) return null;\n\n  const KEYBOARD_STEP = 10;\n\n  const handlePointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {\n    e.preventDefault();\n    setIsResizing(true);\n    startX.current = e.clientX;\n    wasCollapsed.current = !open;\n\n    const wrapper = (e.currentTarget as HTMLElement).closest(\n      \"[data-sidebar-wrapper]\",\n    );\n    const sidebar = wrapper?.querySelector(\"[data-sidebar='sidebar']\");\n    startWidth.current = sidebar?.getBoundingClientRect().width ?? 0;\n\n    const cleanup = () => {\n      setIsResizing(false);\n      document.removeEventListener(\"pointermove\", handlePointerMove);\n      document.removeEventListener(\"pointerup\", handlePointerUp);\n    };\n\n    const handlePointerMove = (moveEvent: PointerEvent) => {\n      const delta =\n        side === \"left\"\n          ? moveEvent.clientX - startX.current\n          : startX.current - moveEvent.clientX;\n      const rawWidth = startWidth.current + delta;\n\n      if (wasCollapsed.current) {\n        // Dragging outward from collapsed — expand once past minWidth\n        if (rawWidth >= minWidth) {\n          wasCollapsed.current = false;\n          setOpen(true);\n          setWidth(rawWidth);\n        }\n        return;\n      }\n\n      // Dragging inward while expanded — collapse when below minWidth\n      if (rawWidth < minWidth) {\n        setOpen(false);\n        wasCollapsed.current = true;\n        return;\n      }\n\n      setWidth(rawWidth);\n    };\n\n    const handlePointerUp = () => {\n      cleanup();\n    };\n\n    document.addEventListener(\"pointermove\", handlePointerMove);\n    document.addEventListener(\"pointerup\", handlePointerUp);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n    const grow = side === \"left\" ? \"ArrowRight\" : \"ArrowLeft\";\n    const shrink = side === \"left\" ? \"ArrowLeft\" : \"ArrowRight\";\n\n    if (e.key === grow) {\n      e.preventDefault();\n      if (!open) {\n        setOpen(true);\n        setWidth(minWidth);\n      } else {\n        setWidth(Math.min(currentWidth + KEYBOARD_STEP, maxWidth));\n      }\n    } else if (e.key === shrink) {\n      e.preventDefault();\n      const next = currentWidth - KEYBOARD_STEP;\n      if (next < minWidth) {\n        setOpen(false);\n      } else {\n        setWidth(next);\n      }\n    } else if (e.key === \"Home\") {\n      e.preventDefault();\n      setOpen(false);\n    } else if (e.key === \"End\") {\n      e.preventDefault();\n      setOpen(true);\n      setWidth(maxWidth);\n    }\n  };\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-label=\"Resize sidebar\"\n      tabIndex={0}\n      data-sidebar=\"resize-handle\"\n      className={cn(\n        // Hit area inside the sidebar edge; thin visual line pinned to the edge via ::after\n        \"absolute inset-y-0 z-2 hidden w-3 cursor-col-resize sm:block\",\n        \"after:absolute after:inset-y-0 after:w-0.5\",\n        \"after:bg-transparent after:transition-colors\",\n        \"hover:after:bg-reki-hairline active:after:bg-reki-hairline focus-visible:after:bg-reki-hairline\",\n        \"focus:outline-none\",\n        side === \"left\" && \"right-0 after:right-0\",\n        side === \"right\" && \"left-0 after:left-0\",\n        className,\n      )}\n      onPointerDown={handlePointerDown}\n      onKeyDown={handleKeyDown}\n      {...props}\n    />\n  );\n});\n\nSidebarResizeHandle.displayName = \"Sidebar.ResizeHandle\";\n\n// ============================================================================\n// Collapsible context + components (custom implementation, no Base UI dep)\n// ============================================================================\n\ninterface SidebarCollapseContextValue {\n  contentId: string;\n  isOpen: boolean;\n  isCollapsible: boolean;\n  autoScrollOnOpen: boolean;\n  toggle: () => void;\n}\n\nconst SidebarCollapseContext = createContext<SidebarCollapseContextValue>({\n  contentId: \"\",\n  isOpen: true,\n  isCollapsible: false,\n  autoScrollOnOpen: false,\n  toggle: () => {},\n});\n\nexport interface SidebarCollapsibleProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /** Initial open state (uncontrolled). @default false */\n  defaultOpen?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Callback when open state changes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Scroll the expanded content into view after opening. @default false */\n  autoScrollOnOpen?: boolean;\n}\n\n/**\n * Collapsible wrapper for sidebar sub-menu expand/collapse.\n * Manages open/close state and provides context to Trigger and Content children.\n *\n * Keyboard behaviour: when a child receives keyboard focus (`focus-visible`)\n * while collapsed, the section auto-expands. It collapses again on blur\n * unless it was explicitly opened via click or a child has `data-active`.\n *\n * @example\n * ```tsx\n * <Sidebar.MenuItem>\n *   <Sidebar.Collapsible defaultOpen>\n *     <Sidebar.CollapsibleTrigger\n *       render={<Sidebar.MenuButton icon={CodeIcon}>Compute<Sidebar.MenuChevron /></Sidebar.MenuButton>}\n *     />\n *     <Sidebar.CollapsibleContent>\n *       <Sidebar.MenuSub>...</Sidebar.MenuSub>\n *     </Sidebar.CollapsibleContent>\n *   </Sidebar.Collapsible>\n * </Sidebar.MenuItem>\n * ```\n */\nconst SidebarCollapsible = forwardRef<HTMLDivElement, SidebarCollapsibleProps>(\n  (\n    {\n      defaultOpen = false,\n      open: openProp,\n      onOpenChange,\n      autoScrollOnOpen = false,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const [internalOpen, setInternalOpen] = useState(defaultOpen);\n    const isOpen = openProp ?? internalOpen;\n    const contentId = useId();\n    const keyboardExpandedRef = useRef(false);\n\n    const toggle = useCallback(() => {\n      const next = !isOpen;\n      setInternalOpen(next);\n      onOpenChange?.(next);\n      // If user explicitly clicks, clear the keyboard-expanded flag\n      keyboardExpandedRef.current = false;\n    }, [isOpen, onOpenChange]);\n\n    const contextValue = useMemo<SidebarCollapseContextValue>(\n      () => ({\n        contentId,\n        isOpen,\n        isCollapsible: true,\n        autoScrollOnOpen,\n        toggle,\n      }),\n      [contentId, isOpen, autoScrollOnOpen, toggle],\n    );\n\n    const handleFocusIn = useCallback(\n      (e: React.FocusEvent<HTMLDivElement>) => {\n        // Auto-expand on keyboard focus (focus-visible) when collapsed\n        if (!isOpen && (e.target as HTMLElement).matches(\":focus-visible\")) {\n          keyboardExpandedRef.current = true;\n          setInternalOpen(true);\n          onOpenChange?.(true);\n        }\n      },\n      [isOpen, onOpenChange],\n    );\n\n    const handleFocusOut = useCallback(\n      (e: React.FocusEvent<HTMLDivElement>) => {\n        // Auto-collapse on blur if it was keyboard-expanded (not click-expanded)\n        // and no child has data-active\n        if (\n          keyboardExpandedRef.current &&\n          !e.currentTarget.contains(e.relatedTarget as Node) &&\n          !e.currentTarget.querySelector(\"[data-active]\")\n        ) {\n          keyboardExpandedRef.current = false;\n          setInternalOpen(false);\n          onOpenChange?.(false);\n        }\n      },\n      [onOpenChange],\n    );\n\n    return (\n      <SidebarCollapseContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          data-open={isOpen || undefined}\n          className={cn(\"min-w-0\", className)}\n          onFocus={handleFocusIn}\n          onBlur={handleFocusOut}\n          {...props}\n        >\n          {children}\n        </div>\n      </SidebarCollapseContext.Provider>\n    );\n  },\n);\n\nSidebarCollapsible.displayName = \"Sidebar.Collapsible\";\n\nexport interface SidebarCollapsibleTriggerProps {\n  /** Element to render as the trigger. Gets aria-expanded, aria-controls, and onClick merged. */\n  render: React.ReactElement;\n}\n\n/**\n * Trigger for a sidebar collapsible section. Uses `render` prop to compose\n * with `Sidebar.MenuButton` or `Sidebar.MenuSubButton`.\n *\n * @example\n * ```tsx\n * <Sidebar.CollapsibleTrigger\n *   render={\n *     <Sidebar.MenuButton icon={CodeIcon}>\n *       Compute\n *       <Sidebar.MenuChevron />\n *     </Sidebar.MenuButton>\n *   }\n * />\n * ```\n */\nfunction SidebarCollapsibleTrigger({ render }: SidebarCollapsibleTriggerProps) {\n  const { contentId, isOpen, toggle } = useContext(SidebarCollapseContext);\n\n  return React.cloneElement(render, {\n    \"aria-expanded\": isOpen,\n    \"aria-controls\": contentId,\n    \"data-open\": isOpen || undefined,\n    onClick: (e: React.MouseEvent) => {\n      // Call any existing onClick on the render element\n      const existingOnClick = (\n        render.props as { onClick?: (e: React.MouseEvent) => void }\n      ).onClick;\n      existingOnClick?.(e);\n      toggle();\n    },\n  } as Record<string, unknown>);\n}\n\nSidebarCollapsibleTrigger.displayName = \"Sidebar.CollapsibleTrigger\";\n\n/**\n * Animated collapsible content panel. Uses CSS grid-rows for smooth\n * height transitions without measuring DOM height.\n *\n * Always mounted (no unmount on close) so exit animations play.\n */\nconst SidebarCollapsibleContent = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, children, ...props }, ref) => {\n  const { contentId, isOpen: isCollapsibleOpen } = useContext(\n    SidebarCollapseContext,\n  );\n  const { state, animationDuration } = useSidebar();\n  const { autoScrollOnOpen } = useContext(SidebarCollapseContext);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n\n  const isOpen = isCollapsibleOpen && state !== \"collapsed\";\n\n  useEffect(() => {\n    if (!isOpen || !autoScrollOnOpen) return;\n\n    const timeout = window.setTimeout(() => {\n      const prefersReducedMotion = window.matchMedia(\n        \"(prefers-reduced-motion: reduce)\",\n      ).matches;\n      contentRef.current?.scrollIntoView({\n        block: \"nearest\",\n        behavior: prefersReducedMotion ? \"auto\" : \"smooth\",\n      });\n    }, animationDuration);\n\n    return () => window.clearTimeout(timeout);\n  }, [isOpen, autoScrollOnOpen, animationDuration]);\n\n  // Imperatively set inert — React 18 doesn't reliably forward\n  // the inert attribute as a JSX prop on initial mount.\n  const inertRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      if (node) {\n        if (!isOpen) {\n          node.setAttribute(\"inert\", \"\");\n        } else {\n          node.removeAttribute(\"inert\");\n        }\n      }\n    },\n    [isOpen],\n  );\n\n  const mergedRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      contentRef.current = node;\n      inertRef(node);\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      }\n    },\n    [ref, inertRef],\n  );\n\n  return (\n    <div\n      ref={mergedRef}\n      id={contentId}\n      role=\"region\"\n      aria-hidden={!isOpen}\n      className={cn(\n        \"grid\",\n        \"transition-[grid-template-rows] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n        \"motion-reduce:transition-none\",\n        isOpen ? \"grid-rows-[1fr]\" : \"grid-rows-[0fr]\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"overflow-hidden\">{children}</div>\n    </div>\n  );\n});\n\nSidebarCollapsibleContent.displayName = \"Sidebar.CollapsibleContent\";\n\n// ============================================================================\n// Sidebar MenuChevron\n// ============================================================================\n\n/**\n * Auto-rotating chevron for collapsible menu items. Reads open state from\n * the nearest `SidebarCollapseContext` and rotates accordingly.\n *\n * @example\n * ```tsx\n * <Sidebar.CollapsibleTrigger\n *   render={<Sidebar.MenuButton icon={CodeIcon}>Compute<Sidebar.MenuChevron /></Sidebar.MenuButton>}\n * />\n * ```\n */\nfunction SidebarMenuChevron({ className }: { className?: string }) {\n  const { isOpen, isCollapsible } = useContext(SidebarCollapseContext);\n\n  return (\n    <CaretRightIcon\n      size={12}\n      weight=\"bold\"\n      className={cn(\n        \"ml-auto shrink-0 opacity-40 group-hover/menu-button:opacity-100 transition-[transform,rotate,opacity] duration-200\",\n        isCollapsible && isOpen && \"rotate-90\",\n        // Hidden when sidebar is collapsed\n        \"group-data-[state=collapsed]/sidebar:hidden\",\n        className,\n      )}\n    />\n  );\n}\n\nSidebarMenuChevron.displayName = \"Sidebar.MenuChevron\";\n\n// ============================================================================\n// SlidingViews — animated horizontal transitions between navigation surfaces\n// ============================================================================\n\nconst SlidingViewActiveContext = createContext<string>(\"\");\n\nexport interface SidebarSlidingViewsProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /** Key of the currently active view. Must match a child `SlidingView` value. */\n  activeKey: string;\n  /**\n   * Slide direction for the transition.\n   * - `\"left\"`: new view slides in from the right\n   * - `\"right\"`: new view slides in from the left\n   * @default \"left\"\n   */\n  direction?: \"left\" | \"right\";\n}\n\n/**\n * Container for animated horizontal transitions between navigation surfaces\n * (e.g., account ↔ zone). Inactive views are marked `aria-hidden` and `inert`.\n *\n * Animation respects `prefers-reduced-motion`.\n *\n * @example\n * ```tsx\n * <Sidebar.SlidingViews activeKey={surface} direction=\"left\">\n *   <Sidebar.SlidingView value=\"account\">\n *     <Sidebar.Content>...account nav...</Sidebar.Content>\n *   </Sidebar.SlidingView>\n *   <Sidebar.SlidingView value=\"zone\">\n *     <Sidebar.Content>...zone nav...</Sidebar.Content>\n *   </Sidebar.SlidingView>\n * </Sidebar.SlidingViews>\n * ```\n */\nconst SidebarSlidingViews = forwardRef<\n  HTMLDivElement,\n  SidebarSlidingViewsProps\n>(\n  (\n    {\n      activeKey,\n      direction: _direction = \"left\",\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const childArray = React.Children.toArray(children);\n    const activeIndex = childArray.findIndex(\n      (child) =>\n        React.isValidElement(child) &&\n        (child.props as { value?: string }).value === activeKey,\n    );\n    const prefersReducedMotion =\n      typeof window !== \"undefined\" &&\n      window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n    const translateX = activeIndex > 0 ? `-${activeIndex * 100}%` : \"0%\";\n\n    return (\n      <SlidingViewActiveContext.Provider value={activeKey}>\n        <div\n          ref={ref}\n          data-sidebar=\"sliding-views\"\n          className={cn(\n            \"flex flex-1 min-h-0 max-w-(--sidebar-width) overflow-hidden\",\n            className,\n          )}\n          {...props}\n        >\n          <div\n            className=\"flex min-h-0 w-full shrink-0\"\n            style={{\n              transform: `translateX(${translateX})`,\n              transition: prefersReducedMotion\n                ? \"none\"\n                : `transform var(--sidebar-animation-duration) var(--sidebar-easing)`,\n            }}\n          >\n            {children}\n          </div>\n        </div>\n      </SlidingViewActiveContext.Provider>\n    );\n  },\n);\n\nSidebarSlidingViews.displayName = \"Sidebar.SlidingViews\";\n\nexport interface SidebarSlidingViewProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /** Unique key matching this view. Must correspond to `activeKey` on `SlidingViews`. */\n  value: string;\n}\n\n/**\n * Individual panel inside `SlidingViews`. Inactive views are automatically\n * marked `aria-hidden` and `inert` so they're unreachable by keyboard/screen readers.\n */\nconst SidebarSlidingView = forwardRef<HTMLDivElement, SidebarSlidingViewProps>(\n  ({ value, className, children, ...props }, ref) => {\n    const activeKey = useContext(SlidingViewActiveContext);\n    const isActive = activeKey === value;\n\n    // Imperatively set inert — React 18.2 doesn't reliably forward the inert\n    // attribute to the DOM when set as a JSX prop on initial mount.\n    const inertRef = useCallback(\n      (node: HTMLDivElement | null) => {\n        if (node) {\n          if (!isActive) {\n            node.setAttribute(\"inert\", \"\");\n          } else {\n            node.removeAttribute(\"inert\");\n          }\n        }\n      },\n      [isActive],\n    );\n\n    // Merge forwarded ref with inert ref\n    const mergedRef = useCallback(\n      (node: HTMLDivElement | null) => {\n        inertRef(node);\n        if (typeof ref === \"function\") {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        }\n      },\n      [ref, inertRef],\n    );\n\n    return (\n      <div\n        ref={mergedRef}\n        data-sidebar=\"sliding-view\"\n        data-value={value}\n        aria-hidden={!isActive}\n        className={cn(\n          \"flex w-full shrink-0 flex-col min-h-0\",\n          !isActive && \"pointer-events-none\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nSidebarSlidingView.displayName = \"Sidebar.SlidingView\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\n/**\n * Sidebar — responsive navigation panel with expand/collapse support.\n *\n * Compound component: `Sidebar` (root `<aside>`), `.Provider`, `.Header`,\n * `.Content`, `.Footer`, `.Group`, `.GroupLabel`,\n * `.Menu`, `.MenuItem`, `.MenuButton`, `.MenuBadge`,\n * `.MenuSub`, `.MenuSubItem`, `.MenuSubButton`, `.Separator`,\n * `.Trigger`, `.Rail`, `.MenuChevron`,\n * `.Collapsible`, `.CollapsibleTrigger`, `.CollapsibleContent`.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider defaultOpen>\n *   <Sidebar>\n *     <Sidebar.Content>\n *       <Sidebar.Group>\n *         <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n *         <Sidebar.Menu>\n *           <Sidebar.MenuButton icon={HouseIcon} active>Home</Sidebar.MenuButton>\n *           <Sidebar.MenuButton icon={GlobeIcon}>Domains</Sidebar.MenuButton>\n *         </Sidebar.Menu>\n *       </Sidebar.Group>\n *     </Sidebar.Content>\n *     <Sidebar.Footer>\n *       <Sidebar.Trigger />\n *     </Sidebar.Footer>\n *   </Sidebar>\n * </Sidebar.Provider>\n * ```\n */\nexport const Sidebar = Object.assign(SidebarRoot, {\n  Provider: SidebarProvider,\n  Header: SidebarHeader,\n  Content: SidebarContent,\n  Footer: SidebarFooter,\n  Group: SidebarGroup,\n  GroupLabel: SidebarGroupLabel,\n  Menu: SidebarMenu,\n  MenuItem: SidebarMenuItem,\n  MenuButton: SidebarMenuButton,\n  MenuBadge: SidebarMenuBadge,\n  MenuSub: SidebarMenuSub,\n  MenuSubItem: SidebarMenuSubItem,\n  MenuSubButton: SidebarMenuSubButton,\n  Separator: SidebarSeparator,\n  Trigger: SidebarTrigger,\n  Rail: SidebarRail,\n  ResizeHandle: SidebarResizeHandle,\n  MenuChevron: SidebarMenuChevron,\n  Collapsible: SidebarCollapsible,\n  CollapsibleTrigger: SidebarCollapsibleTrigger,\n  CollapsibleContent: SidebarCollapsibleContent,\n  SlidingViews: SidebarSlidingViews,\n  SlidingView: SidebarSlidingView,\n});\n\nexport {\n  SidebarProvider,\n  SidebarRoot,\n  SidebarHeader,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuItem,\n  SidebarMenuButton,\n  SidebarMenuBadge,\n  SidebarMenuSub,\n  SidebarMenuSubItem,\n  SidebarMenuSubButton,\n  SidebarSeparator,\n  SidebarTrigger,\n  SidebarRail,\n  SidebarResizeHandle,\n  SidebarMenuChevron,\n  SidebarCollapsible,\n  SidebarCollapsibleTrigger,\n  SidebarCollapsibleContent,\n  SidebarSlidingViews,\n  SidebarSlidingView,\n};\n"],"names":["REKI_SIDEBAR_VARIANTS","REKI_SIDEBAR_DEFAULT_VARIANTS","REKI_SIDEBAR_STYLING","SIDEBAR_WIDTH","SIDEBAR_WIDTH_ICON","SIDEBAR_EASING","SIDEBAR_ANIMATION_DURATION_MS","MOBILE_BREAKPOINT","FOCUSABLE_SELECTOR","useIsMobile","breakpoint","isMobile","setIsMobile","useState","useEffect","mql","onChange","SidebarContext","createContext","useSidebar","context","useContext","DEFAULT_WIDTH_PX","MIN_WIDTH_PX","MAX_WIDTH_PX","SidebarProvider","defaultOpen","openProp","setOpenProp","variant","side","collapsible","resizable","defaultWidth","minWidth","maxWidth","onWidthChange","contained","peekable","animationDuration","mobileBreakpoint","children","className","style","_openMobile","_setOpenMobile","width","setWidthState","isResizing","setIsResizing","isPeeking","setIsPeeking","openMobile","setOpenMobile","useCallback","next","setWidth","newWidth","clamped","_open","_setOpen","open","setOpen","value","toggleSidebar","prev","startPeek","stopPeek","state","sidebarWidthValue","contextValue","useMemo","jsx","cn","SidebarRoot","forwardRef","contentClassName","props","ref","mobileAsideRef","node","mergedMobileRef","triggerRef","useRef","mobileNodeRef","shouldRestoreFocusRef","handleKeyDown","e","handleFocusOut","handlePeekBlur","jsxs","Fragment","collapsedWidth","expandedWidth","railWidth","contentWidth","borderClasses","TooltipProvider","childArray","React","footerChildren","child","nonFooterChildren","SidebarHeader","SidebarContent","ScrollAreaBase.Root","ScrollAreaBase.Viewport","ScrollAreaBase.Content","ScrollAreaBase.Scrollbar","ScrollAreaBase.Thumb","SidebarFooter","SidebarGroup","SidebarGroupLabel","MenuItemContext","MenuSubItemContext","SidebarMenu","SidebarMenuItem","SidebarMenuButton","IconProp","active","size","href","target","tooltip","LinkComponent","useLinkComponent","isInsideMenuItem","iconNode","content","buttonClasses","button","Tooltip","SidebarMenuBadge","SidebarMenuSub","SidebarMenuSubItem","SidebarMenuSubButton","isInsideMenuSubItem","SidebarSeparator","SidebarPanelIcon","SidebarTrigger","onClick","SidebarRail","SidebarResizeHandle","currentWidth","startX","startWidth","wasCollapsed","KEYBOARD_STEP","handlePointerDown","sidebar","cleanup","handlePointerMove","handlePointerUp","moveEvent","delta","rawWidth","grow","shrink","SidebarCollapseContext","SidebarCollapsible","onOpenChange","autoScrollOnOpen","internalOpen","setInternalOpen","isOpen","contentId","useId","keyboardExpandedRef","toggle","handleFocusIn","SidebarCollapsibleTrigger","render","existingOnClick","SidebarCollapsibleContent","isCollapsibleOpen","contentRef","timeout","prefersReducedMotion","inertRef","mergedRef","SidebarMenuChevron","isCollapsible","CaretRightIcon","SlidingViewActiveContext","SidebarSlidingViews","activeKey","_direction","activeIndex","translateX","SidebarSlidingView","isActive","Sidebar"],"mappings":"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"}

package/dist/chunks/status-ot0itdwxloqgahi0.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as t, jsxs as p, Fragment as f } from "react/jsx-runtime";
+import { L as x } from "./loader-cxzp72mn53lzbv9c.js";
+import { a as d } from "./tag-h5kwf5eh7dyyvc2c.js";
+import { c as m } from "./cn-ct4n7r74mh8y0f48.js";
+function L({
+  color: s,
+  text: l,
+  isLoaderVisible: o = !1,
+  weight: c = "regular",
+  onClick: e,
+  className: u
+}) {
+  const n = s === "transparent", r = n ? null : d[s], a = m(
+    "inline-flex h-5 w-fit min-w-0 max-w-full items-center gap-1 rounded-sm px-1.5 text-xs",
+    c === "medium" && "font-medium",
+    e && "cursor-pointer",
+    n ? "text-reki-subtle" : m(r?.bg, r?.text),
+    u
+  ), i = /* @__PURE__ */ p(f, { children: [
+    /* @__PURE__ */ t("span", { className: "truncate", children: l }),
+    o ? /* @__PURE__ */ t(x, { size: 12 }) : null
+  ] });
+  return e ? /* @__PURE__ */ t("button", { type: "button", onClick: e, className: a, children: i }) : /* @__PURE__ */ t("span", { className: a, children: i });
+}
+export {
+  L as S
+};
+//# sourceMappingURL=status-ot0itdwxloqgahi0.js.map

package/dist/chunks/status-ot0itdwxloqgahi0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-ot0itdwxloqgahi0.js","sources":["../../src/components/status/status.tsx"],"sourcesContent":["import { Loader } from \"../loader\";\nimport { REKI_TAG_COLORS, type TagColor } from \"../tag\";\nimport { cn } from \"../../utils/cn\";\n\n/** Variant standard export (reki convention). */\nexport const REKI_STATUS_VARIANTS = {\n  weight: {\n    regular: { classes: \"\", description: \"Regular weight\" },\n    medium: { classes: \"font-medium\", description: \"Medium weight\" },\n  },\n} as const;\n\nexport const REKI_STATUS_DEFAULT_VARIANTS = {\n  weight: \"regular\",\n} as const;\n\n/**\n * Status component props.\n *\n * @example\n * ```tsx\n * <Status color=\"green\" text=\"Active\" />\n * ```\n */\nexport interface StatusProps {\n  /** Named CRM color, or `\"transparent\"` for a neutral status. */\n  color: TagColor;\n  /** Status label text. */\n  text: string;\n  /** Shows an inline loader after the text (e.g. while a transition runs). */\n  isLoaderVisible?: boolean;\n  /** Font weight of the label. @default \"regular\" */\n  weight?: \"regular\" | \"medium\";\n  /** Makes the status interactive; renders as a button. */\n  onClick?: () => void;\n  /** Additional CSS classes merged via `cn()`. Use reki semantic tokens only. */\n  className?: string;\n}\n\n/**\n * A compact colored status indicator for record states (pipeline stages, task\n * status, health). Uses the `reki-tag-*` palette so it stays consistent with\n * {@link Tag} and adapts to light/dark automatically.\n *\n * @example\n * ```tsx\n * <Status color=\"green\" text=\"Active\" />\n * <Status color=\"orange\" text=\"Syncing\" isLoaderVisible />\n * ```\n */\nexport function Status({\n  color,\n  text,\n  isLoaderVisible = false,\n  weight = \"regular\",\n  onClick,\n  className,\n}: StatusProps) {\n  const isTransparent = color === \"transparent\";\n  const palette = isTransparent ? null : REKI_TAG_COLORS[color];\n\n  const classes = cn(\n    \"inline-flex h-5 w-fit min-w-0 max-w-full items-center gap-1 rounded-sm px-1.5 text-xs\",\n    weight === \"medium\" && \"font-medium\",\n    onClick && \"cursor-pointer\",\n    isTransparent ? \"text-reki-subtle\" : cn(palette?.bg, palette?.text),\n    className,\n  );\n\n  const content = (\n    <>\n      <span className=\"truncate\">{text}</span>\n      {isLoaderVisible ? <Loader size={12} /> : null}\n    </>\n  );\n\n  if (onClick) {\n    return (\n      <button type=\"button\" onClick={onClick} className={classes}>\n        {content}\n      </button>\n    );\n  }\n\n  return <span className={classes}>{content}</span>;\n}\n"],"names":["Status","color","text","isLoaderVisible","weight","onClick","className","isTransparent","palette","REKI_TAG_COLORS","classes","cn","content","jsxs","Fragment","jsx","Loader"],"mappings":";;;;;AAkDO,SAASA,EAAO;AAAA,EACrB,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,QAAAC,IAAS;AAAA,EACT,SAAAC;AAAA,EACA,WAAAC;AACF,GAAgB;AACd,QAAMC,IAAgBN,MAAU,eAC1BO,IAAUD,IAAgB,OAAOE,EAAgBR,CAAK,GAEtDS,IAAUC;AAAA,IACd;AAAA,IACAP,MAAW,YAAY;AAAA,IACvBC,KAAW;AAAA,IACXE,IAAgB,qBAAqBI,EAAGH,GAAS,IAAIA,GAAS,IAAI;AAAA,IAClEF;AAAA,EAAA,GAGIM,IACJ,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,YAAY,UAAAb,GAAK;AAAA,IAChCC,IAAkB,gBAAAY,EAACC,GAAA,EAAO,MAAM,IAAI,IAAK;AAAA,EAAA,GAC5C;AAGF,SAAIX,sBAEC,UAAA,EAAO,MAAK,UAAS,SAAAA,GAAkB,WAAWK,GAChD,UAAAE,GACH,IAIG,gBAAAG,EAAC,QAAA,EAAK,WAAWL,GAAU,UAAAE,GAAQ;AAC5C;"}

package/dist/chunks/{surface-cyxme7mlr49l33f8.js → surface-fqmma34ju0agh5pe.js}

@@ -2,7 +2,7 @@
 import { jsx as n } from "react/jsx-runtime";
 import { createElement as s } from "react";
 import { c as d } from "./cn-ct4n7r74mh8y0f48.js";
-import { L as m } from "./layer-card-kzu48dhzxm3e9p4u.js";
+import { L as m } from "./layer-card-iuquuc1w3116umfw.js";
 const f = function({
   color: r = "primary",
   className: a,
@@ -26,4 +26,4 @@ f.displayName = "Surface";
 export {
   f as S
 };
-//# sourceMappingURL=surface-cyxme7mlr49l33f8.js.map
+//# sourceMappingURL=surface-fqmma34ju0agh5pe.js.map

package/dist/chunks/{surface-cyxme7mlr49l33f8.js.map → surface-fqmma34ju0agh5pe.js.map}

@@ -1 +1 @@
-{"version":3,"file":"surface-cyxme7mlr49l33f8.js","sources":["../../src/components/surface/surface.tsx"],"sourcesContent":["import { createElement, type ElementType } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport { LayerCard, type LayerCardProps } from \"../layer-card/layer-card\";\n\n/** Surface color variant definitions. */\nexport const REKI_SURFACE_VARIANTS = {\n  color: {\n    primary: {\n      classes: \"\",\n      description: \"Primary surface color\",\n    },\n    secondary: {\n      classes: \"\",\n      description: \"Secondary surface color\",\n    },\n  },\n} as const;\n\nexport const REKI_SURFACE_DEFAULT_VARIANTS = {\n  color: \"primary\",\n} as const;\n\n// Derived types from REKI_SURFACE_VARIANTS\nexport type RekiSurfaceColor = keyof typeof REKI_SURFACE_VARIANTS.color;\n\nexport interface RekiSurfaceVariantsProps {\n  /**\n   * Surface color variant.\n   * - `\"primary\"` — Primary surface color\n   * - `\"secondary\"` — Secondary surface color\n   * @default \"primary\"\n   */\n  color?: RekiSurfaceColor;\n}\n\nexport function surfaceVariants({\n  color = REKI_SURFACE_DEFAULT_VARIANTS.color,\n}: RekiSurfaceVariantsProps = {}) {\n  return resolveVariant(REKI_SURFACE_VARIANTS.color, color, REKI_SURFACE_DEFAULT_VARIANTS.color).classes;\n}\n\n/**\n * Surface component props.\n *\n * @deprecated Use `LayerCard` instead. `Surface` is now a compatibility wrapper\n * around `LayerCard` for simple one-layer card containers.\n *\n * @example\n * ```tsx\n * <Surface className=\"rounded-lg p-4\">Card content</Surface>\n * <Surface render={<section />} className=\"rounded-lg p-6\">Section content</Surface>\n * ```\n */\nexport type SurfaceProps = LayerCardProps &\n  RekiSurfaceVariantsProps & {\n    /**\n     * @deprecated Use the `render` prop instead.\n     * @example `<Surface render={<section />}>` instead of `<Surface as=\"section\">`\n     */\n    as?: ElementType;\n  };\n\n/**\n * @deprecated Use `LayerCard` instead.\n *\n * Polymorphic compatibility wrapper that preserves the `Surface` API while\n * delegating rendering and styling to `LayerCard`.\n *\n * @example\n * ```tsx\n * <LayerCard className=\"rounded-lg p-4\">Card content</LayerCard>\n * ```\n */\nexport const Surface = function Surface({\n  color = \"primary\",\n  className,\n  render,\n  as,\n  ...props\n}: SurfaceProps) {\n  const resolvedRender = render ?? (as ? createElement(as) : undefined);\n  return (\n    <LayerCard\n      className={cn(\"overflow-visible rounded-none\", className)}\n      render={resolvedRender}\n      {...props}\n      data-surface-color={color}\n      data-deprecated=\"surface\"\n    />\n  );\n};\n\nSurface.displayName = \"Surface\";\n"],"names":["Surface","color","className","render","as","props","resolvedRender","createElement","jsx","LayerCard","cn"],"mappings":";;;;;AA0EO,MAAMA,IAAU,SAAiB;AAAA,EACtC,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,IAAAC;AAAA,EACA,GAAGC;AACL,GAAiB;AACf,QAAMC,IAAiBH,MAAWC,IAAKG,EAAcH,CAAE,IAAI;AAC3D,SACE,gBAAAI;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAG,iCAAiCR,CAAS;AAAA,MACxD,QAAQI;AAAA,MACP,GAAGD;AAAA,MACJ,sBAAoBJ;AAAA,MACpB,mBAAgB;AAAA,IAAA;AAAA,EAAA;AAGtB;AAEAD,EAAQ,cAAc;"}
+{"version":3,"file":"surface-fqmma34ju0agh5pe.js","sources":["../../src/components/surface/surface.tsx"],"sourcesContent":["import { createElement, type ElementType } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport { LayerCard, type LayerCardProps } from \"../layer-card/layer-card\";\n\n/** Surface color variant definitions. */\nexport const REKI_SURFACE_VARIANTS = {\n  color: {\n    primary: {\n      classes: \"\",\n      description: \"Primary surface color\",\n    },\n    secondary: {\n      classes: \"\",\n      description: \"Secondary surface color\",\n    },\n  },\n} as const;\n\nexport const REKI_SURFACE_DEFAULT_VARIANTS = {\n  color: \"primary\",\n} as const;\n\n// Derived types from REKI_SURFACE_VARIANTS\nexport type RekiSurfaceColor = keyof typeof REKI_SURFACE_VARIANTS.color;\n\nexport interface RekiSurfaceVariantsProps {\n  /**\n   * Surface color variant.\n   * - `\"primary\"` — Primary surface color\n   * - `\"secondary\"` — Secondary surface color\n   * @default \"primary\"\n   */\n  color?: RekiSurfaceColor;\n}\n\nexport function surfaceVariants({\n  color = REKI_SURFACE_DEFAULT_VARIANTS.color,\n}: RekiSurfaceVariantsProps = {}) {\n  return resolveVariant(REKI_SURFACE_VARIANTS.color, color, REKI_SURFACE_DEFAULT_VARIANTS.color).classes;\n}\n\n/**\n * Surface component props.\n *\n * @deprecated Use `LayerCard` instead. `Surface` is now a compatibility wrapper\n * around `LayerCard` for simple one-layer card containers.\n *\n * @example\n * ```tsx\n * <Surface className=\"rounded-lg p-4\">Card content</Surface>\n * <Surface render={<section />} className=\"rounded-lg p-6\">Section content</Surface>\n * ```\n */\nexport type SurfaceProps = LayerCardProps &\n  RekiSurfaceVariantsProps & {\n    /**\n     * @deprecated Use the `render` prop instead.\n     * @example `<Surface render={<section />}>` instead of `<Surface as=\"section\">`\n     */\n    as?: ElementType;\n  };\n\n/**\n * @deprecated Use `LayerCard` instead.\n *\n * Polymorphic compatibility wrapper that preserves the `Surface` API while\n * delegating rendering and styling to `LayerCard`.\n *\n * @example\n * ```tsx\n * <LayerCard className=\"rounded-lg p-4\">Card content</LayerCard>\n * ```\n */\nexport const Surface = function Surface({\n  color = \"primary\",\n  className,\n  render,\n  as,\n  ...props\n}: SurfaceProps) {\n  const resolvedRender = render ?? (as ? createElement(as) : undefined);\n  return (\n    <LayerCard\n      className={cn(\"overflow-visible rounded-none\", className)}\n      render={resolvedRender}\n      {...props}\n      data-surface-color={color}\n      data-deprecated=\"surface\"\n    />\n  );\n};\n\nSurface.displayName = \"Surface\";\n"],"names":["Surface","color","className","render","as","props","resolvedRender","createElement","jsx","LayerCard","cn"],"mappings":";;;;;AA0EO,MAAMA,IAAU,SAAiB;AAAA,EACtC,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,IAAAC;AAAA,EACA,GAAGC;AACL,GAAiB;AACf,QAAMC,IAAiBH,MAAWC,IAAKG,EAAcH,CAAE,IAAI;AAC3D,SACE,gBAAAI;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAG,iCAAiCR,CAAS;AAAA,MACxD,QAAQI;AAAA,MACP,GAAGD;AAAA,MACJ,sBAAoBJ;AAAA,MACpB,mBAAgB;AAAA,IAAA;AAAA,EAAA;AAGtB;AAEAD,EAAQ,cAAc;"}

package/dist/chunks/{switch-bigo96fyjlh7ivbi.js → switch-nhtmn65n5s7gg6vb.js}

@@ -2,8 +2,8 @@
 import { jsx as e, jsxs as z } from "react/jsx-runtime";
 import { forwardRef as A, useContext as V, createContext as W } from "react";
 import { c as n } from "./cn-ct4n7r74mh8y0f48.js";
-import { F as M } from "./field-fe5m8z3vbpvtctbe.js";
-import { Q as L, U as O, bf as P } from "./vendor-base-ui-bgl9g5nkvqy3tn36.js";
+import { F as M } from "./field-b0aywboxuss4rpu7.js";
+import { Q as L, U as O, bf as P } from "./vendor-base-ui-djdjrfuoxlb1lubi.js";
 const re = {
   size: {
     sm: {
@@ -253,4 +253,4 @@ export {
   J as S,
   re as a
 };
-//# sourceMappingURL=switch-bigo96fyjlh7ivbi.js.map
+//# sourceMappingURL=switch-nhtmn65n5s7gg6vb.js.map

package/dist/chunks/{switch-bigo96fyjlh7ivbi.js.map → switch-nhtmn65n5s7gg6vb.js.map}

@@ -1 +1 @@
-{"version":3,"file":"switch-bigo96fyjlh7ivbi.js","sources":["../../src/components/switch/switch.tsx"],"sourcesContent":["import { Switch as BaseSwitch } from \"@base-ui/react/switch\";\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type Ref,\n  type ReactNode,\n  createContext,\n  useContext,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport { Field } from \"../field/field\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\n\n/** Switch size and variant definitions mapping names to their Tailwind classes. */\nexport const REKI_SWITCH_VARIANTS = {\n  size: {\n    sm: {\n      classes: \"h-5.5 w-8.5\",\n      description: \"Small switch for compact UIs\",\n    },\n    base: {\n      classes: \"h-6.5 w-10.5\",\n      description: \"Default switch size\",\n    },\n    lg: {\n      classes: \"h-7.5 w-12.5\",\n      description: \"Large switch for prominent toggles\",\n    },\n  },\n  variant: {\n    default: {\n      classes: \"\",\n      description: \"Default switch with squircle shape and brand blue color\",\n    },\n    neutral: {\n      classes: \"\",\n      description: \"Monochrome switch with squircle shape for subtle toggles\",\n    },\n  },\n} as const;\n\nexport const REKI_SWITCH_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\n// Derived types from REKI_SWITCH_VARIANTS\nexport type RekiSwitchSize = keyof typeof REKI_SWITCH_VARIANTS.size;\nexport type RekiSwitchVariant = keyof typeof REKI_SWITCH_VARIANTS.variant;\n\nexport interface RekiSwitchVariantsProps {\n  /**\n   * Switch size.\n   * - `\"sm\"` — Small for compact UIs\n   * - `\"base\"` — Default size\n   * - `\"lg\"` — Large for prominent toggles\n   * @default \"base\"\n   */\n  size?: RekiSwitchSize;\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard switch appearance\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: RekiSwitchVariant;\n}\n\nexport function switchVariants({\n  size = REKI_SWITCH_DEFAULT_VARIANTS.size,\n  variant = REKI_SWITCH_DEFAULT_VARIANTS.variant,\n}: RekiSwitchVariantsProps = {}) {\n  const sizeConfig = resolveVariant(REKI_SWITCH_VARIANTS.size, size, REKI_SWITCH_DEFAULT_VARIANTS.size);\n  const variantConfig = resolveVariant(REKI_SWITCH_VARIANTS.variant, variant, REKI_SWITCH_DEFAULT_VARIANTS.variant);\n  return cn(sizeConfig.classes, variantConfig.classes);\n}\n\n// Legacy type aliases for backwards compatibility\nexport type SwitchSize = RekiSwitchSize;\nexport type SwitchVariant = RekiSwitchVariant;\n\n// Context for passing controlFirst from Group to Items\nconst SwitchGroupContext = createContext<{ controlFirst: boolean }>({\n  controlFirst: true,\n});\n\n/**\n * Single switch component props (with built-in Field)\n *\n * Usage patterns:\n *\n * Basic usage:\n * ```tsx\n * <Switch label=\"Enable notifications\" checked={true} onCheckedChange={setChecked} />\n * ```\n *\n * Label first layout:\n * ```tsx\n * <Switch label=\"Dark mode\" checked={false} onCheckedChange={setChecked} controlFirst={false} />\n * ```\n *\n * Neutral variant (monochrome, squircle shape):\n * ```tsx\n * <Switch label=\"Setting\" variant=\"neutral\" checked={false} onCheckedChange={setChecked} />\n * ```\n *\n * @property {string} label - Label text for the switch (Field wrapper is built-in)\n * @property {boolean} [controlFirst] - When true (default), switch appears before label\n */\nexport type SwitchProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"children\"\n> & {\n  /** Visual variant: \"default\" (pill, brand color) or \"neutral\" (squircle, monochrome) */\n  variant?: SwitchVariant;\n  /** Label content for the switch (Field wrapper is built-in) - can be a string or any React node. Optional when used standalone for visual-only purposes. */\n  label?: ReactNode;\n  /** Tooltip content to display next to the label via an info icon */\n  labelTooltip?: ReactNode;\n  /**\n   * Whether the switch is required.\n   * When explicitly false, shows \"(optional)\" text after the label.\n   */\n  required?: boolean;\n  /** When true (default), switch appears before label. When false, label appears before switch. */\n  controlFirst?: boolean;\n  size?: RekiSwitchSize;\n  checked?: boolean;\n  disabled?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  transitioning?: boolean;\n};\n\n/**\n * Switch group component props (with built-in Fieldset)\n *\n * Usage:\n * ```tsx\n * <Switch.Group\n *   legend=\"Notification settings\"\n *   error=\"You must enable at least one notification type\"\n * >\n *   <Switch.Item label=\"Email notifications\" value=\"email\" />\n *   <Switch.Item label=\"SMS notifications\" value=\"sms\" />\n * </Switch.Group>\n * ```\n */\n/**\n * Props for Switch.Legend — a composable sub-component for labeling a Switch.Group.\n *\n * Place as a direct child of `<Switch.Group>` to provide a styled, accessible legend.\n * Accepts `className` for full styling control (e.g. `className=\"sr-only\"` to visually hide).\n *\n * @example\n * ```tsx\n * <Switch.Group>\n *   <Switch.Legend className=\"sr-only\">Notification settings</Switch.Legend>\n *   <Switch.Item label=\"Email\" value=\"email\" />\n * </Switch.Group>\n * ```\n */\nexport interface SwitchLegendProps {\n  /** Legend content */\n  children: ReactNode;\n  /** Additional CSS classes (e.g. \"sr-only\" to visually hide the legend) */\n  className?: string;\n}\n\nexport interface SwitchGroupProps {\n  /**\n   * Legend text for the group.\n   * For more control over legend styling, omit this prop and use `<Switch.Legend>` as a child instead.\n   */\n  legend?: string;\n  /** Child Switch.Item components (and optionally a Switch.Legend) */\n  children: ReactNode;\n  /** Error message for the group (only appears in groups, not single switches) */\n  error?: string;\n  /** Helper text for the group */\n  description?: ReactNode;\n  /** Whether all switches in the group are disabled */\n  disabled?: boolean;\n  /** When true (default), switch appears before label. When false, label appears before switch. */\n  controlFirst?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Individual switch item within a group\n */\nexport type SwitchItemProps = {\n  /** Visual variant: \"default\" or \"error\" for validation failures */\n  variant?: SwitchVariant;\n  /** Label text displayed next to switch */\n  label: string;\n  /** Additional CSS classes for the label wrapper */\n  className?: string;\n  checked?: boolean;\n  disabled?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  size?: RekiSwitchSize;\n  transitioning?: boolean;\n};\n\n// Single switch with built-in Field\nconst SwitchBase = forwardRef<HTMLButtonElement, SwitchProps>(\n  (\n    {\n      className,\n      checked,\n      disabled,\n      size = \"base\",\n      variant = \"default\",\n      label,\n      labelTooltip,\n      required,\n      controlFirst = true,\n      onCheckedChange,\n      transitioning,\n      id,\n      ...props\n    },\n    ref,\n  ) => {\n    // For aria-label, only use string labels (ReactNode labels can't be used for aria-label)\n    const ariaLabelFallback = typeof label === \"string\" ? label : \"Switch\";\n    const switchControl = (\n      <BaseSwitch.Root\n        ref={ref}\n        id={id}\n        checked={checked}\n        disabled={disabled}\n        onCheckedChange={onCheckedChange}\n        nativeButton\n        render={(rootProps, state) => {\n          const {\n            ref: rootRef,\n            className: baseClassName,\n            role: baseRole,\n            \"aria-checked\": _ariaChecked,\n            \"aria-pressed\": _ariaPressed,\n            ...restRootProps\n          } = rootProps as typeof rootProps & {\n            ref?: Ref<HTMLButtonElement>;\n            className?: string;\n            role?: string;\n            \"aria-checked\"?: boolean;\n            \"aria-pressed\"?: boolean;\n          };\n\n          const isNeutral = variant === \"neutral\";\n\n          // Squircle-aware border-radius (used by both variants)\n          const squircleRadius =\n            \"rounded-[5px] supports-[corner-shape:squircle]:rounded-[10px] [corner-shape:squircle]\";\n\n          // Size styles matching Kyle's stratus implementation\n          const sizeStyles = {\n            sm: { track: \"h-4 w-8\", thumb: \"w-4\", slide: \"left-4\" },\n            base: { track: \"h-4.5 w-9\", thumb: \"w-4.5\", slide: \"left-4.5\" },\n            lg: { track: \"h-5 w-10\", thumb: \"w-5\", slide: \"left-5\" },\n          };\n          const s = sizeStyles[size];\n\n          // Track colors based on variant\n          const trackColors = isNeutral\n            ? state.checked\n              ? \"bg-neutral-500 dark:bg-reki-base ring-neutral-600 dark:ring-neutral-700\"\n              : \"bg-neutral-150 dark:bg-reki-base ring-reki-hairline\"\n            : state.checked\n              ? \"bg-reki-brand ring-reki-brand-hover\"\n              : \"bg-neutral-200 dark:bg-neutral-700 ring-neutral-300 dark:ring-neutral-600\";\n\n          // Thumb colors based on variant\n          const thumbColors = isNeutral\n            ? state.checked\n              ? \"bg-reki-base dark:bg-neutral-400\"\n              : \"bg-reki-base dark:bg-neutral-850\"\n            : state.checked\n              ? \"bg-reki-base dark:bg-reki-base\"\n              : \"bg-reki-base dark:bg-neutral-850\";\n\n          const trackClassName = cn(\n            \"relative inline-flex items-center ring cursor-pointer border-none p-0\",\n            \"focus:outline-none focus-visible:ring-2 focus-visible:ring-reki-brand\",\n            \"transition-colors duration-150 ease-out motion-reduce:transition-none\",\n            \"disabled:cursor-not-allowed disabled:opacity-50\",\n            s.track,\n            squircleRadius,\n            trackColors,\n            className,\n            baseClassName,\n          );\n\n          const thumbClassName = cn(\n            \"absolute top-0 bottom-0 shadow-[0_0_1px_0.5px_var(--color-reki-shadow-edge),0_1px_2px_var(--color-reki-shadow-drop)]\",\n            s.thumb,\n            squircleRadius,\n            thumbColors,\n            \"transition-all duration-150 ease-out motion-reduce:transition-none\",\n            state.checked ? s.slide : \"left-0\",\n          );\n\n          const role =\n            (props.role as string | undefined) ?? baseRole ?? \"switch\";\n          const checkedA11yProps =\n            role === \"switch\"\n              ? { \"aria-checked\": state.checked }\n              : { \"aria-pressed\": state.checked };\n\n          return (\n            <button\n              {...restRootProps}\n              {...props}\n              ref={rootRef}\n              data-reki-component=\"Switch\"\n              type=\"button\"\n              role={role}\n              {...checkedA11yProps}\n              aria-busy={transitioning || undefined}\n              aria-label={props[\"aria-label\"] ?? ariaLabelFallback}\n              className={trackClassName}\n            >\n              <div className={thumbClassName} />\n            </button>\n          );\n        }}\n      />\n    );\n\n    // Wrap in Field (built-in) - no description for single switches\n    // If no label provided, return bare switch (for use in other components)\n    if (!label) {\n      return switchControl;\n    }\n\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        controlFirst={controlFirst}\n      >\n        {switchControl}\n      </Field>\n    );\n  },\n);\n\nSwitchBase.displayName = \"Switch\";\n\n// Switch.Item for use within Switch.Group\nconst SwitchItem = forwardRef<HTMLButtonElement, SwitchItemProps>(\n  (\n    {\n      className,\n      checked,\n      disabled,\n      size = \"base\",\n      variant = \"default\",\n      label,\n      onCheckedChange,\n      transitioning,\n    },\n    ref,\n  ) => {\n    const { controlFirst } = useContext(SwitchGroupContext);\n\n    return (\n      <label\n        data-reki-component=\"Switch\"\n        data-reki-part=\"item-label\"\n        className={cn(\n          \"m-0 relative inline-flex items-center gap-2\",\n          // Control first (default): switch before label\n          // Label first: label before switch using flex-row-reverse\n          !controlFirst && \"flex-row-reverse justify-end\",\n          disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n          className,\n        )}\n      >\n        <BaseSwitch.Root\n          ref={ref}\n          checked={checked}\n          disabled={disabled}\n          onCheckedChange={onCheckedChange}\n          nativeButton\n          render={(rootProps, state) => {\n            const {\n              ref: rootRef,\n              className: baseClassName,\n              role: baseRole,\n              \"aria-checked\": _ariaChecked,\n              \"aria-pressed\": _ariaPressed,\n              ...restRootProps\n            } = rootProps as typeof rootProps & {\n              ref?: Ref<HTMLButtonElement>;\n              className?: string;\n              role?: string;\n              \"aria-checked\"?: boolean;\n              \"aria-pressed\"?: boolean;\n            };\n\n            const isNeutral = variant === \"neutral\";\n\n            // Squircle-aware border-radius (used by both variants)\n            const squircleRadius =\n              \"rounded-[5px] supports-[corner-shape:squircle]:rounded-[10px] [corner-shape:squircle]\";\n\n            // Size styles matching Kyle's stratus implementation\n            const sizeStyles = {\n              sm: { track: \"h-4 w-8\", thumb: \"w-4\", slide: \"left-4\" },\n              base: { track: \"h-4.5 w-9\", thumb: \"w-4.5\", slide: \"left-4.5\" },\n              lg: { track: \"h-5 w-10\", thumb: \"w-5\", slide: \"left-5\" },\n            };\n            const s = sizeStyles[size];\n\n            // Track colors based on variant\n            const trackColors = isNeutral\n              ? state.checked\n                ? \"bg-neutral-500 dark:bg-reki-base ring-neutral-600 dark:ring-neutral-700\"\n                : \"bg-neutral-150 dark:bg-reki-base ring-reki-hairline\"\n              : state.checked\n                ? \"bg-blue-500 dark:bg-blue-600 ring-blue-600 dark:ring-blue-500\"\n                : \"bg-neutral-200 dark:bg-neutral-700 ring-neutral-300 dark:ring-neutral-600\";\n\n            // Thumb colors based on variant\n            const thumbColors = isNeutral\n              ? state.checked\n                ? \"bg-reki-base dark:bg-neutral-400\"\n                : \"bg-reki-base dark:bg-neutral-850\"\n              : state.checked\n                ? \"bg-reki-base dark:bg-blue-300\"\n                : \"bg-reki-base dark:bg-neutral-850\";\n\n            const trackClassName = cn(\n              \"relative inline-flex items-center ring cursor-pointer border-none p-0\",\n              \"focus:outline-none focus:ring-reki-focus/50 focus-visible:ring-2 focus-visible:ring-reki-brand\",\n              \"transition-colors duration-150 ease-out motion-reduce:transition-none\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              s.track,\n              squircleRadius,\n              trackColors,\n              baseClassName,\n            );\n\n            const thumbClassName = cn(\n              \"absolute top-0 bottom-0 shadow-[0_0_1px_0.5px_var(--color-reki-shadow-edge),0_1px_2px_var(--color-reki-shadow-drop)]\",\n              s.thumb,\n              squircleRadius,\n              thumbColors,\n              \"transition-all duration-150 ease-out motion-reduce:transition-none\",\n              state.checked ? s.slide : \"left-0\",\n            );\n\n            const role = baseRole ?? \"switch\";\n            const checkedA11yProps =\n              role === \"switch\"\n                ? { \"aria-checked\": state.checked }\n                : { \"aria-pressed\": state.checked };\n\n            return (\n              <button\n                {...restRootProps}\n                ref={rootRef}\n                data-reki-component=\"Switch\"\n                data-reki-part=\"item\"\n                type=\"button\"\n                role={role}\n                {...checkedA11yProps}\n                aria-busy={transitioning || undefined}\n                className={trackClassName}\n              >\n                <div className={thumbClassName} />\n              </button>\n            );\n          }}\n        />\n        <span className=\"text-base font-medium text-reki-default\">{label}</span>\n      </label>\n    );\n  },\n);\n\nSwitchItem.displayName = \"Switch.Item\";\n\n// Switch.Legend — composable legend sub-component for Switch.Group\nfunction SwitchLegend({ children, className }: SwitchLegendProps) {\n  return (\n    <Fieldset.Legend\n      className={cn(\"text-base font-medium text-reki-default\", className)}\n    >\n      {children}\n    </Fieldset.Legend>\n  );\n}\n\nSwitchLegend.displayName = \"Switch.Legend\";\n\n// Switch.Group with built-in Fieldset\nfunction SwitchGroup({\n  legend,\n  children,\n  error,\n  description,\n  disabled,\n  controlFirst = true,\n  className,\n}: SwitchGroupProps) {\n  return (\n    <SwitchGroupContext.Provider value={{ controlFirst }}>\n      <Fieldset.Root\n        className={cn(\"flex flex-col gap-4\", className)}\n        disabled={disabled}\n      >\n        {legend && (\n          <Fieldset.Legend className=\"text-base font-medium text-reki-default\">\n            {legend}\n          </Fieldset.Legend>\n        )}\n        <div className=\"flex flex-col gap-2\">{children}</div>\n        {error && <p className=\"text-sm text-reki-danger\">{error}</p>}\n        {description && (\n          <p className=\"text-sm text-reki-subtle\">{description}</p>\n        )}\n      </Fieldset.Root>\n    </SwitchGroupContext.Provider>\n  );\n}\n\n// Compound component\nexport const Switch = Object.assign(SwitchBase, {\n  Item: SwitchItem,\n  Group: SwitchGroup,\n  Legend: SwitchLegend,\n});\n\nSwitch.displayName = \"Switch\";\n"],"names":["REKI_SWITCH_VARIANTS","REKI_SWITCH_DEFAULT_VARIANTS","SwitchGroupContext","createContext","SwitchBase","forwardRef","className","checked","disabled","size","variant","label","labelTooltip","required","controlFirst","onCheckedChange","transitioning","id","props","ref","ariaLabelFallback","switchControl","jsx","BaseSwitch.Root","rootProps","state","rootRef","baseClassName","baseRole","_ariaChecked","_ariaPressed","restRootProps","isNeutral","squircleRadius","s","trackColors","thumbColors","trackClassName","cn","thumbClassName","role","checkedA11yProps","Field","SwitchItem","useContext","jsxs","SwitchLegend","children","Fieldset.Legend","SwitchGroup","legend","error","description","Fieldset.Root","Switch"],"mappings":"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"}
+{"version":3,"file":"switch-nhtmn65n5s7gg6vb.js","sources":["../../src/components/switch/switch.tsx"],"sourcesContent":["import { Switch as BaseSwitch } from \"@base-ui/react/switch\";\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type Ref,\n  type ReactNode,\n  createContext,\n  useContext,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport { Field } from \"../field/field\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\n\n/** Switch size and variant definitions mapping names to their Tailwind classes. */\nexport const REKI_SWITCH_VARIANTS = {\n  size: {\n    sm: {\n      classes: \"h-5.5 w-8.5\",\n      description: \"Small switch for compact UIs\",\n    },\n    base: {\n      classes: \"h-6.5 w-10.5\",\n      description: \"Default switch size\",\n    },\n    lg: {\n      classes: \"h-7.5 w-12.5\",\n      description: \"Large switch for prominent toggles\",\n    },\n  },\n  variant: {\n    default: {\n      classes: \"\",\n      description: \"Default switch with squircle shape and brand blue color\",\n    },\n    neutral: {\n      classes: \"\",\n      description: \"Monochrome switch with squircle shape for subtle toggles\",\n    },\n  },\n} as const;\n\nexport const REKI_SWITCH_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\n// Derived types from REKI_SWITCH_VARIANTS\nexport type RekiSwitchSize = keyof typeof REKI_SWITCH_VARIANTS.size;\nexport type RekiSwitchVariant = keyof typeof REKI_SWITCH_VARIANTS.variant;\n\nexport interface RekiSwitchVariantsProps {\n  /**\n   * Switch size.\n   * - `\"sm\"` — Small for compact UIs\n   * - `\"base\"` — Default size\n   * - `\"lg\"` — Large for prominent toggles\n   * @default \"base\"\n   */\n  size?: RekiSwitchSize;\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard switch appearance\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: RekiSwitchVariant;\n}\n\nexport function switchVariants({\n  size = REKI_SWITCH_DEFAULT_VARIANTS.size,\n  variant = REKI_SWITCH_DEFAULT_VARIANTS.variant,\n}: RekiSwitchVariantsProps = {}) {\n  const sizeConfig = resolveVariant(REKI_SWITCH_VARIANTS.size, size, REKI_SWITCH_DEFAULT_VARIANTS.size);\n  const variantConfig = resolveVariant(REKI_SWITCH_VARIANTS.variant, variant, REKI_SWITCH_DEFAULT_VARIANTS.variant);\n  return cn(sizeConfig.classes, variantConfig.classes);\n}\n\n// Legacy type aliases for backwards compatibility\nexport type SwitchSize = RekiSwitchSize;\nexport type SwitchVariant = RekiSwitchVariant;\n\n// Context for passing controlFirst from Group to Items\nconst SwitchGroupContext = createContext<{ controlFirst: boolean }>({\n  controlFirst: true,\n});\n\n/**\n * Single switch component props (with built-in Field)\n *\n * Usage patterns:\n *\n * Basic usage:\n * ```tsx\n * <Switch label=\"Enable notifications\" checked={true} onCheckedChange={setChecked} />\n * ```\n *\n * Label first layout:\n * ```tsx\n * <Switch label=\"Dark mode\" checked={false} onCheckedChange={setChecked} controlFirst={false} />\n * ```\n *\n * Neutral variant (monochrome, squircle shape):\n * ```tsx\n * <Switch label=\"Setting\" variant=\"neutral\" checked={false} onCheckedChange={setChecked} />\n * ```\n *\n * @property {string} label - Label text for the switch (Field wrapper is built-in)\n * @property {boolean} [controlFirst] - When true (default), switch appears before label\n */\nexport type SwitchProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"children\"\n> & {\n  /** Visual variant: \"default\" (pill, brand color) or \"neutral\" (squircle, monochrome) */\n  variant?: SwitchVariant;\n  /** Label content for the switch (Field wrapper is built-in) - can be a string or any React node. Optional when used standalone for visual-only purposes. */\n  label?: ReactNode;\n  /** Tooltip content to display next to the label via an info icon */\n  labelTooltip?: ReactNode;\n  /**\n   * Whether the switch is required.\n   * When explicitly false, shows \"(optional)\" text after the label.\n   */\n  required?: boolean;\n  /** When true (default), switch appears before label. When false, label appears before switch. */\n  controlFirst?: boolean;\n  size?: RekiSwitchSize;\n  checked?: boolean;\n  disabled?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  transitioning?: boolean;\n};\n\n/**\n * Switch group component props (with built-in Fieldset)\n *\n * Usage:\n * ```tsx\n * <Switch.Group\n *   legend=\"Notification settings\"\n *   error=\"You must enable at least one notification type\"\n * >\n *   <Switch.Item label=\"Email notifications\" value=\"email\" />\n *   <Switch.Item label=\"SMS notifications\" value=\"sms\" />\n * </Switch.Group>\n * ```\n */\n/**\n * Props for Switch.Legend — a composable sub-component for labeling a Switch.Group.\n *\n * Place as a direct child of `<Switch.Group>` to provide a styled, accessible legend.\n * Accepts `className` for full styling control (e.g. `className=\"sr-only\"` to visually hide).\n *\n * @example\n * ```tsx\n * <Switch.Group>\n *   <Switch.Legend className=\"sr-only\">Notification settings</Switch.Legend>\n *   <Switch.Item label=\"Email\" value=\"email\" />\n * </Switch.Group>\n * ```\n */\nexport interface SwitchLegendProps {\n  /** Legend content */\n  children: ReactNode;\n  /** Additional CSS classes (e.g. \"sr-only\" to visually hide the legend) */\n  className?: string;\n}\n\nexport interface SwitchGroupProps {\n  /**\n   * Legend text for the group.\n   * For more control over legend styling, omit this prop and use `<Switch.Legend>` as a child instead.\n   */\n  legend?: string;\n  /** Child Switch.Item components (and optionally a Switch.Legend) */\n  children: ReactNode;\n  /** Error message for the group (only appears in groups, not single switches) */\n  error?: string;\n  /** Helper text for the group */\n  description?: ReactNode;\n  /** Whether all switches in the group are disabled */\n  disabled?: boolean;\n  /** When true (default), switch appears before label. When false, label appears before switch. */\n  controlFirst?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Individual switch item within a group\n */\nexport type SwitchItemProps = {\n  /** Visual variant: \"default\" or \"error\" for validation failures */\n  variant?: SwitchVariant;\n  /** Label text displayed next to switch */\n  label: string;\n  /** Additional CSS classes for the label wrapper */\n  className?: string;\n  checked?: boolean;\n  disabled?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  size?: RekiSwitchSize;\n  transitioning?: boolean;\n};\n\n// Single switch with built-in Field\nconst SwitchBase = forwardRef<HTMLButtonElement, SwitchProps>(\n  (\n    {\n      className,\n      checked,\n      disabled,\n      size = \"base\",\n      variant = \"default\",\n      label,\n      labelTooltip,\n      required,\n      controlFirst = true,\n      onCheckedChange,\n      transitioning,\n      id,\n      ...props\n    },\n    ref,\n  ) => {\n    // For aria-label, only use string labels (ReactNode labels can't be used for aria-label)\n    const ariaLabelFallback = typeof label === \"string\" ? label : \"Switch\";\n    const switchControl = (\n      <BaseSwitch.Root\n        ref={ref}\n        id={id}\n        checked={checked}\n        disabled={disabled}\n        onCheckedChange={onCheckedChange}\n        nativeButton\n        render={(rootProps, state) => {\n          const {\n            ref: rootRef,\n            className: baseClassName,\n            role: baseRole,\n            \"aria-checked\": _ariaChecked,\n            \"aria-pressed\": _ariaPressed,\n            ...restRootProps\n          } = rootProps as typeof rootProps & {\n            ref?: Ref<HTMLButtonElement>;\n            className?: string;\n            role?: string;\n            \"aria-checked\"?: boolean;\n            \"aria-pressed\"?: boolean;\n          };\n\n          const isNeutral = variant === \"neutral\";\n\n          // Squircle-aware border-radius (used by both variants)\n          const squircleRadius =\n            \"rounded-[5px] supports-[corner-shape:squircle]:rounded-[10px] [corner-shape:squircle]\";\n\n          // Size styles matching Kyle's stratus implementation\n          const sizeStyles = {\n            sm: { track: \"h-4 w-8\", thumb: \"w-4\", slide: \"left-4\" },\n            base: { track: \"h-4.5 w-9\", thumb: \"w-4.5\", slide: \"left-4.5\" },\n            lg: { track: \"h-5 w-10\", thumb: \"w-5\", slide: \"left-5\" },\n          };\n          const s = sizeStyles[size];\n\n          // Track colors based on variant\n          const trackColors = isNeutral\n            ? state.checked\n              ? \"bg-neutral-500 dark:bg-reki-base ring-neutral-600 dark:ring-neutral-700\"\n              : \"bg-neutral-150 dark:bg-reki-base ring-reki-hairline\"\n            : state.checked\n              ? \"bg-reki-brand ring-reki-brand-hover\"\n              : \"bg-neutral-200 dark:bg-neutral-700 ring-neutral-300 dark:ring-neutral-600\";\n\n          // Thumb colors based on variant\n          const thumbColors = isNeutral\n            ? state.checked\n              ? \"bg-reki-base dark:bg-neutral-400\"\n              : \"bg-reki-base dark:bg-neutral-850\"\n            : state.checked\n              ? \"bg-reki-base dark:bg-reki-base\"\n              : \"bg-reki-base dark:bg-neutral-850\";\n\n          const trackClassName = cn(\n            \"relative inline-flex items-center ring cursor-pointer border-none p-0\",\n            \"focus:outline-none focus-visible:ring-2 focus-visible:ring-reki-brand\",\n            \"transition-colors duration-150 ease-out motion-reduce:transition-none\",\n            \"disabled:cursor-not-allowed disabled:opacity-50\",\n            s.track,\n            squircleRadius,\n            trackColors,\n            className,\n            baseClassName,\n          );\n\n          const thumbClassName = cn(\n            \"absolute top-0 bottom-0 shadow-[0_0_1px_0.5px_var(--color-reki-shadow-edge),0_1px_2px_var(--color-reki-shadow-drop)]\",\n            s.thumb,\n            squircleRadius,\n            thumbColors,\n            \"transition-all duration-150 ease-out motion-reduce:transition-none\",\n            state.checked ? s.slide : \"left-0\",\n          );\n\n          const role =\n            (props.role as string | undefined) ?? baseRole ?? \"switch\";\n          const checkedA11yProps =\n            role === \"switch\"\n              ? { \"aria-checked\": state.checked }\n              : { \"aria-pressed\": state.checked };\n\n          return (\n            <button\n              {...restRootProps}\n              {...props}\n              ref={rootRef}\n              data-reki-component=\"Switch\"\n              type=\"button\"\n              role={role}\n              {...checkedA11yProps}\n              aria-busy={transitioning || undefined}\n              aria-label={props[\"aria-label\"] ?? ariaLabelFallback}\n              className={trackClassName}\n            >\n              <div className={thumbClassName} />\n            </button>\n          );\n        }}\n      />\n    );\n\n    // Wrap in Field (built-in) - no description for single switches\n    // If no label provided, return bare switch (for use in other components)\n    if (!label) {\n      return switchControl;\n    }\n\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        controlFirst={controlFirst}\n      >\n        {switchControl}\n      </Field>\n    );\n  },\n);\n\nSwitchBase.displayName = \"Switch\";\n\n// Switch.Item for use within Switch.Group\nconst SwitchItem = forwardRef<HTMLButtonElement, SwitchItemProps>(\n  (\n    {\n      className,\n      checked,\n      disabled,\n      size = \"base\",\n      variant = \"default\",\n      label,\n      onCheckedChange,\n      transitioning,\n    },\n    ref,\n  ) => {\n    const { controlFirst } = useContext(SwitchGroupContext);\n\n    return (\n      <label\n        data-reki-component=\"Switch\"\n        data-reki-part=\"item-label\"\n        className={cn(\n          \"m-0 relative inline-flex items-center gap-2\",\n          // Control first (default): switch before label\n          // Label first: label before switch using flex-row-reverse\n          !controlFirst && \"flex-row-reverse justify-end\",\n          disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n          className,\n        )}\n      >\n        <BaseSwitch.Root\n          ref={ref}\n          checked={checked}\n          disabled={disabled}\n          onCheckedChange={onCheckedChange}\n          nativeButton\n          render={(rootProps, state) => {\n            const {\n              ref: rootRef,\n              className: baseClassName,\n              role: baseRole,\n              \"aria-checked\": _ariaChecked,\n              \"aria-pressed\": _ariaPressed,\n              ...restRootProps\n            } = rootProps as typeof rootProps & {\n              ref?: Ref<HTMLButtonElement>;\n              className?: string;\n              role?: string;\n              \"aria-checked\"?: boolean;\n              \"aria-pressed\"?: boolean;\n            };\n\n            const isNeutral = variant === \"neutral\";\n\n            // Squircle-aware border-radius (used by both variants)\n            const squircleRadius =\n              \"rounded-[5px] supports-[corner-shape:squircle]:rounded-[10px] [corner-shape:squircle]\";\n\n            // Size styles matching Kyle's stratus implementation\n            const sizeStyles = {\n              sm: { track: \"h-4 w-8\", thumb: \"w-4\", slide: \"left-4\" },\n              base: { track: \"h-4.5 w-9\", thumb: \"w-4.5\", slide: \"left-4.5\" },\n              lg: { track: \"h-5 w-10\", thumb: \"w-5\", slide: \"left-5\" },\n            };\n            const s = sizeStyles[size];\n\n            // Track colors based on variant\n            const trackColors = isNeutral\n              ? state.checked\n                ? \"bg-neutral-500 dark:bg-reki-base ring-neutral-600 dark:ring-neutral-700\"\n                : \"bg-neutral-150 dark:bg-reki-base ring-reki-hairline\"\n              : state.checked\n                ? \"bg-blue-500 dark:bg-blue-600 ring-blue-600 dark:ring-blue-500\"\n                : \"bg-neutral-200 dark:bg-neutral-700 ring-neutral-300 dark:ring-neutral-600\";\n\n            // Thumb colors based on variant\n            const thumbColors = isNeutral\n              ? state.checked\n                ? \"bg-reki-base dark:bg-neutral-400\"\n                : \"bg-reki-base dark:bg-neutral-850\"\n              : state.checked\n                ? \"bg-reki-base dark:bg-blue-300\"\n                : \"bg-reki-base dark:bg-neutral-850\";\n\n            const trackClassName = cn(\n              \"relative inline-flex items-center ring cursor-pointer border-none p-0\",\n              \"focus:outline-none focus:ring-reki-focus/50 focus-visible:ring-2 focus-visible:ring-reki-brand\",\n              \"transition-colors duration-150 ease-out motion-reduce:transition-none\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              s.track,\n              squircleRadius,\n              trackColors,\n              baseClassName,\n            );\n\n            const thumbClassName = cn(\n              \"absolute top-0 bottom-0 shadow-[0_0_1px_0.5px_var(--color-reki-shadow-edge),0_1px_2px_var(--color-reki-shadow-drop)]\",\n              s.thumb,\n              squircleRadius,\n              thumbColors,\n              \"transition-all duration-150 ease-out motion-reduce:transition-none\",\n              state.checked ? s.slide : \"left-0\",\n            );\n\n            const role = baseRole ?? \"switch\";\n            const checkedA11yProps =\n              role === \"switch\"\n                ? { \"aria-checked\": state.checked }\n                : { \"aria-pressed\": state.checked };\n\n            return (\n              <button\n                {...restRootProps}\n                ref={rootRef}\n                data-reki-component=\"Switch\"\n                data-reki-part=\"item\"\n                type=\"button\"\n                role={role}\n                {...checkedA11yProps}\n                aria-busy={transitioning || undefined}\n                className={trackClassName}\n              >\n                <div className={thumbClassName} />\n              </button>\n            );\n          }}\n        />\n        <span className=\"text-base font-medium text-reki-default\">{label}</span>\n      </label>\n    );\n  },\n);\n\nSwitchItem.displayName = \"Switch.Item\";\n\n// Switch.Legend — composable legend sub-component for Switch.Group\nfunction SwitchLegend({ children, className }: SwitchLegendProps) {\n  return (\n    <Fieldset.Legend\n      className={cn(\"text-base font-medium text-reki-default\", className)}\n    >\n      {children}\n    </Fieldset.Legend>\n  );\n}\n\nSwitchLegend.displayName = \"Switch.Legend\";\n\n// Switch.Group with built-in Fieldset\nfunction SwitchGroup({\n  legend,\n  children,\n  error,\n  description,\n  disabled,\n  controlFirst = true,\n  className,\n}: SwitchGroupProps) {\n  return (\n    <SwitchGroupContext.Provider value={{ controlFirst }}>\n      <Fieldset.Root\n        className={cn(\"flex flex-col gap-4\", className)}\n        disabled={disabled}\n      >\n        {legend && (\n          <Fieldset.Legend className=\"text-base font-medium text-reki-default\">\n            {legend}\n          </Fieldset.Legend>\n        )}\n        <div className=\"flex flex-col gap-2\">{children}</div>\n        {error && <p className=\"text-sm text-reki-danger\">{error}</p>}\n        {description && (\n          <p className=\"text-sm text-reki-subtle\">{description}</p>\n        )}\n      </Fieldset.Root>\n    </SwitchGroupContext.Provider>\n  );\n}\n\n// Compound component\nexport const Switch = Object.assign(SwitchBase, {\n  Item: SwitchItem,\n  Group: SwitchGroup,\n  Legend: SwitchLegend,\n});\n\nSwitch.displayName = \"Switch\";\n"],"names":["REKI_SWITCH_VARIANTS","REKI_SWITCH_DEFAULT_VARIANTS","SwitchGroupContext","createContext","SwitchBase","forwardRef","className","checked","disabled","size","variant","label","labelTooltip","required","controlFirst","onCheckedChange","transitioning","id","props","ref","ariaLabelFallback","switchControl","jsx","BaseSwitch.Root","rootProps","state","rootRef","baseClassName","baseRole","_ariaChecked","_ariaPressed","restRootProps","isNeutral","squircleRadius","s","trackColors","thumbColors","trackClassName","cn","thumbClassName","role","checkedA11yProps","Field","SwitchItem","useContext","jsxs","SwitchLegend","children","Fieldset.Legend","SwitchGroup","legend","error","description","Fieldset.Root","Switch"],"mappings":"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"}

package/dist/chunks/{table-mwcmwp6a80zvyrxw.js → table-cjj894o3niouq4tg.js}

@@ -3,7 +3,7 @@ import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as l } from "react";
 import { c as s } from "./cn-ct4n7r74mh8y0f48.js";
 import { r as u } from "./resolve-variant-t8jcltsizeg29ege.js";
-import { C as k } from "./checkbox-g2661n3eodgoispq.js";
+import { C as k } from "./checkbox-h3kfhlron3b6sfhv.js";
 const h = {
   layout: {
     auto: {
@@ -205,4 +205,4 @@ export {
   F as T,
   h as a
 };
-//# sourceMappingURL=table-mwcmwp6a80zvyrxw.js.map
+//# sourceMappingURL=table-cjj894o3niouq4tg.js.map

package/dist/chunks/{table-mwcmwp6a80zvyrxw.js.map → table-cjj894o3niouq4tg.js.map}

@@ -1 +1 @@
-{"version":3,"file":"table-mwcmwp6a80zvyrxw.js","sources":["../../src/components/table/table.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport { Checkbox, type CheckboxChangeEventDetails } from \"../checkbox\";\n\n/** Table layout and row variant definitions mapping names to their Tailwind classes. */\nexport const REKI_TABLE_VARIANTS = {\n  layout: {\n    auto: {\n      classes: \"\",\n      description: \"Auto table layout - columns resize based on content\",\n    },\n    fixed: {\n      classes: \"table-fixed\",\n      description:\n        \"Fixed table layout - columns have equal width, controlled via colgroup\",\n    },\n  },\n  variant: {\n    default: {\n      classes: \"\",\n      description: \"Default row variant\",\n    },\n    selected: {\n      classes: \"bg-reki-tint\",\n      description: \"Selected row variant\",\n    },\n  },\n  sticky: {\n    left: {\n      classes: \"sticky left-0\",\n      description: \"Pin column to the left edge of the scroll container\",\n    },\n    right: {\n      classes: \"sticky right-0\",\n      description: \"Pin column to the right edge of the scroll container\",\n    },\n  },\n} as const;\n\nexport type RekiTableStickyColumn = keyof typeof REKI_TABLE_VARIANTS.sticky;\n\n/**\n * Shared sticky-column styles for `<th>` and `<td>`.\n *\n * - Opaque background so scrolling content doesn't show through.\n * - Gradient fade on the inner edge so the sticky boundary isn't a hard clip.\n * - z-index kept to z-0/z-1/z-2 within the table's `isolate` stacking context:\n *   - `z-0` — normal cells (default)\n *   - `z-1` — sticky body cells (`<td>`)\n *   - `z-2` — sticky header cells (`<th>`) so they sit above sticky body cells\n *\n * Header cells use `:has()` to detect if they're in a compact header (which has\n * `bg-reki-elevated`) and adjust both the background and gradient fade colors.\n */\nconst stickyColumnClasses = (\n  side: RekiTableStickyColumn,\n  /** \"head\" renders at z-2, \"cell\" at z-1 */\n  element: \"head\" | \"cell\",\n) => {\n  const base = resolveVariant(REKI_TABLE_VARIANTS.sticky, side, \"left\").classes;\n  const z = element === \"head\" ? \"z-2\" : \"z-1\";\n\n  const fadePosition = side === \"right\" ? \"before:-left-6\" : \"before:-right-6\";\n  const fadeBase =\n    \"before:pointer-events-none before:absolute before:inset-y-0 before:w-6\";\n\n  if (element === \"cell\") {\n    // Body cells always use reki-base\n    const fade =\n      side === \"right\"\n        ? \"before:bg-gradient-to-r before:from-transparent before:to-reki-base\"\n        : \"before:bg-gradient-to-l before:from-transparent before:to-reki-base\";\n    return cn(base, z, \"bg-reki-base\", fadeBase, fadePosition, fade);\n  }\n\n  // Header cells: use reki-base by default, reki-elevated when in compact header\n  // The compact header applies a data attribute we can target with :has()\n  const bg = \"bg-reki-base group-data-[compact]/header:bg-reki-elevated\";\n  const fade =\n    side === \"right\"\n      ? \"before:bg-gradient-to-r before:from-transparent before:to-reki-base group-data-[compact]/header:before:to-reki-elevated\"\n      : \"before:bg-gradient-to-l before:from-transparent before:to-reki-base group-data-[compact]/header:before:to-reki-elevated\";\n\n  return cn(base, z, bg, fadeBase, fadePosition, fade);\n};\n\nexport const REKI_TABLE_DEFAULT_VARIANTS = {\n  layout: \"auto\",\n  variant: \"default\",\n} as const;\n\nexport type RekiTableRowVariant = keyof typeof REKI_TABLE_VARIANTS.variant;\nexport type RekiTableLayout = keyof typeof REKI_TABLE_VARIANTS.layout;\n\n/**\n * Table root — applies layout, borders, padding, and header styles.\n *\n * @example\n * ```tsx\n * <Table layout=\"fixed\">\n *   <Table.Header>\n *     <Table.Row>\n *       <Table.Head>Name</Table.Head>\n *       <Table.Head>Status</Table.Head>\n *     </Table.Row>\n *   </Table.Header>\n *   <Table.Body>\n *     <Table.Row>\n *       <Table.Cell>Worker A</Table.Cell>\n *       <Table.Cell>Active</Table.Cell>\n *     </Table.Row>\n *   </Table.Body>\n * </Table>\n * ```\n */\nconst TableRoot = forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement> & {\n    /**\n     * Table layout algorithm.\n     * - `\"auto\"` — columns resize based on content\n     * - `\"fixed\"` — equal-width columns, controlled via `<colgroup>`\n     * @default \"auto\"\n     */\n    layout?: RekiTableLayout;\n  }\n>(({ layout = \"auto\", ...props }, ref) => {\n  const className = cn(\n    \"isolate w-full\", // isolate creates a stacking context so z-0/z-1/z-2 never leak out\n    resolveVariant(REKI_TABLE_VARIANTS.layout, layout, REKI_TABLE_DEFAULT_VARIANTS.layout).classes,\n    \"[&_td]:border-b [&_td]:border-reki-fill [&_tr:last-child_td]:border-b-0\", // Row border\n    \"[&_td]:p-3\", // Cell padding\n    \"[&_th]:border-b [&_th]:border-reki-fill [&_th]:p-3 [&_th]:font-semibold [&_th]:text-base\", // Header styles\n    \"[&_th]:bg-reki-base\", // Header background color\n    \"text-base text-left text-reki-default\",\n    props.className,\n  );\n\n  return <table ref={ref} {...props} className={className} />;\n});\n\nconst TableHeader = forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement> & {\n    variant?: \"default\" | \"compact\";\n    /**\n     * Make the header row stick to the top of the scroll container.\n     * Requires the table's parent to have a constrained height with\n     * `overflow-y: auto`.\n     */\n    sticky?: boolean;\n  }\n>(({ variant = \"default\", sticky, ...props }, ref) => {\n  const isCompact = variant === \"compact\";\n  const className = cn(\n    \"group/header\",\n    isCompact && \"[&_th]:bg-reki-elevated [&_th]:py-2 text-xs text-reki-strong\",\n    sticky && \"[&_th]:sticky [&_th]:top-0 [&_th]:z-1\",\n    props.className,\n  );\n\n  return (\n    <thead\n      ref={ref}\n      {...props}\n      className={className}\n      {...(isCompact && { \"data-compact\": \"\" })}\n    />\n  );\n});\n\nconst TableHead = forwardRef<\n  HTMLTableCellElement,\n  React.HTMLAttributes<HTMLTableCellElement> & {\n    /**\n     * Pin this header cell to the left or right edge of the scroll container.\n     * Adds `position: sticky`, an opaque background, and a gradient fade on the\n     * inner edge. Sticky header columns render at `z-2` so they sit above both\n     * normal cells and sticky body cells (`z-1`).\n     */\n    sticky?: RekiTableStickyColumn;\n  }\n>(({ sticky, ...props }, ref) => {\n  const className = cn(\n    \"group relative\",\n    sticky && stickyColumnClasses(sticky, \"head\"),\n    props.className,\n  );\n  return <th ref={ref} {...props} className={className} />;\n});\n\nconst TableRow = forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement> & {\n    variant?: RekiTableRowVariant;\n  }\n>(({ variant = REKI_TABLE_DEFAULT_VARIANTS.variant, ...props }, ref) => {\n  const className = cn(\n    resolveVariant(REKI_TABLE_VARIANTS.variant, variant, REKI_TABLE_DEFAULT_VARIANTS.variant).classes,\n    props.className,\n  );\n\n  return <tr ref={ref} {...props} className={className} />;\n});\n\nconst TableBody = forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>((props, ref) => {\n  return <tbody ref={ref} {...props} />;\n});\n\nconst TableCell = forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement> & {\n    /**\n     * Pin this cell to the left or right edge of the scroll container.\n     * Adds `position: sticky`, an opaque background, and a gradient fade on\n     * the inner edge. Requires the table's parent to have `overflow-x: auto`.\n     */\n    sticky?: RekiTableStickyColumn;\n  }\n>(({ sticky, ...props }, ref) => {\n  const className = cn(\n    sticky && stickyColumnClasses(sticky, \"cell\"),\n    props.className,\n  );\n  return <td ref={ref} {...props} className={className} />;\n});\n\nconst TableFooter = forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>((props, ref) => {\n  return <tfoot ref={ref} {...props} />;\n});\n\nconst TableResizeHandle = forwardRef<\n  HTMLButtonElement,\n  React.HTMLAttributes<HTMLButtonElement>\n>((props, ref) => {\n  return (\n    <button\n      ref={ref}\n      {...props}\n      type=\"button\"\n      aria-label=\"Resize column\"\n      className={cn(\n        \"invisible h-full group-hover:visible\", // Make the handle invisible by default\n        \"w-[10px]\", // Hitting area\n        \"flex items-center justify-center\", // Center the handle\n        \"cursor-col-resize touch-none select-none\", // Prevent selection and touch events\n        \"absolute top-0 right-0\", // Position the handle\n        \"m-0 bg-reki-base p-0\", // Override the stratus button styles\n        \"focus-visible:ring-2 focus-visible:ring-reki-brand\", // Consistent keyboard focus styling\n      )}\n    >\n      <span className=\"h-5 w-[2px] rounded bg-reki-hairline\" />\n    </button>\n  );\n});\n\n/**\n * Special cell that makes the entire cell area a hit target for the checkbox.\n */\n\nconst TableCheckCell = forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement> & {\n    checked?: boolean;\n    indeterminate?: boolean;\n    /**\n     * Called when the checkbox's checked state changes. The optional second\n     * argument exposes event details from the underlying Checkbox, matching\n     * the Checkbox component's signature.\n     */\n    onCheckedChange?: (\n      checked: boolean,\n      eventDetails?: CheckboxChangeEventDetails,\n    ) => void;\n    /** @deprecated Use `onCheckedChange` instead. Will be removed in a future major version. */\n    onValueChange?: (checked: boolean) => void;\n    label?: string;\n    disabled?: boolean;\n  }\n>(\n  (\n    {\n      checked,\n      indeterminate,\n      onCheckedChange,\n      onValueChange,\n      label,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <TableCell\n        ref={ref}\n        {...props}\n        className={cn(\"w-10 leading-none\", props.className)}\n      >\n        <Checkbox\n          checked={checked}\n          indeterminate={indeterminate}\n          onCheckedChange={(newChecked, eventDetails) => {\n            onCheckedChange?.(newChecked, eventDetails);\n            onValueChange?.(newChecked);\n          }}\n          aria-label={label ?? \"Select row\"}\n          disabled={disabled}\n          className=\"relative before:absolute before:-inset-3 before:content-['']\"\n        />\n      </TableCell>\n    );\n  },\n);\n\nconst TableCheckHead = forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement> & {\n    checked?: boolean;\n    indeterminate?: boolean;\n    /**\n     * Called when the checkbox's checked state changes. The optional second\n     * argument exposes event details from the underlying Checkbox, matching\n     * the Checkbox component's signature.\n     */\n    onCheckedChange?: (\n      checked: boolean,\n      eventDetails?: CheckboxChangeEventDetails,\n    ) => void;\n    /** @deprecated Use `onCheckedChange` instead. Will be removed in a future major version. */\n    onValueChange?: (checked: boolean) => void;\n    label?: string;\n    disabled?: boolean;\n  }\n>(\n  (\n    {\n      checked,\n      indeterminate,\n      onCheckedChange,\n      onValueChange,\n      label,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <TableHead\n        ref={ref}\n        {...props}\n        className={cn(\"w-10 leading-none\", props.className)}\n      >\n        <Checkbox\n          checked={checked}\n          indeterminate={indeterminate}\n          onCheckedChange={(newChecked, eventDetails) => {\n            onCheckedChange?.(newChecked, eventDetails);\n            onValueChange?.(newChecked);\n          }}\n          aria-label={label ?? \"Select all rows\"}\n          disabled={disabled}\n          className=\"relative before:absolute before:-inset-3 before:content-['']\"\n        />\n      </TableHead>\n    );\n  },\n);\n\nTableRoot.displayName = \"Table\";\nTableBody.displayName = \"Table.Body\";\nTableHead.displayName = \"Table.Head\";\nTableRow.displayName = \"Table.Row\";\nTableCell.displayName = \"Table.Cell\";\nTableFooter.displayName = \"Table.Footer\";\nTableHeader.displayName = \"Table.Header\";\nTableResizeHandle.displayName = \"Table.ResizeHandle\";\nTableCheckCell.displayName = \"Table.CheckCell\";\nTableCheckHead.displayName = \"Table.CheckHead\";\n\n/**\n * Table — semantic HTML table with styled rows, cells, and selection support.\n *\n * Compound component: `Table` (Root), `.Header`, `.Head`, `.Body`, `.Row`,\n * `.Cell`, `.Footer`, `.CheckCell`, `.CheckHead`, `.ResizeHandle`.\n *\n * @example\n * ```tsx\n * <Table>\n *   <Table.Header>\n *     <Table.Row>\n *       <Table.CheckHead checked={allSelected} onCheckedChange={toggleAll} />\n *       <Table.Head>Name</Table.Head>\n *     </Table.Row>\n *   </Table.Header>\n *   <Table.Body>\n *     {rows.map((row) => (\n *       <Table.Row key={row.id} variant={selected.has(row.id) ? \"selected\" : \"default\"}>\n *         <Table.CheckCell checked={selected.has(row.id)} onCheckedChange={() => toggle(row.id)} />\n *         <Table.Cell>{row.name}</Table.Cell>\n *       </Table.Row>\n *     ))}\n *   </Table.Body>\n * </Table>\n * ```\n */\nexport const Table = Object.assign(TableRoot, {\n  Header: TableHeader,\n  Head: TableHead,\n  Row: TableRow,\n  Body: TableBody,\n  Cell: TableCell,\n  CheckCell: TableCheckCell,\n  CheckHead: TableCheckHead,\n  Footer: TableFooter,\n  ResizeHandle: TableResizeHandle,\n});\n"],"names":["REKI_TABLE_VARIANTS","stickyColumnClasses","side","element","base","resolveVariant","z","fadePosition","fadeBase","cn","REKI_TABLE_DEFAULT_VARIANTS","TableRoot","forwardRef","layout","props","ref","className","jsx","TableHeader","variant","sticky","isCompact","TableHead","TableRow","TableBody","TableCell","TableFooter","TableResizeHandle","TableCheckCell","checked","indeterminate","onCheckedChange","onValueChange","label","disabled","Checkbox","newChecked","eventDetails","TableCheckHead","Table"],"mappings":"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"}
+{"version":3,"file":"table-cjj894o3niouq4tg.js","sources":["../../src/components/table/table.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport { Checkbox, type CheckboxChangeEventDetails } from \"../checkbox\";\n\n/** Table layout and row variant definitions mapping names to their Tailwind classes. */\nexport const REKI_TABLE_VARIANTS = {\n  layout: {\n    auto: {\n      classes: \"\",\n      description: \"Auto table layout - columns resize based on content\",\n    },\n    fixed: {\n      classes: \"table-fixed\",\n      description:\n        \"Fixed table layout - columns have equal width, controlled via colgroup\",\n    },\n  },\n  variant: {\n    default: {\n      classes: \"\",\n      description: \"Default row variant\",\n    },\n    selected: {\n      classes: \"bg-reki-tint\",\n      description: \"Selected row variant\",\n    },\n  },\n  sticky: {\n    left: {\n      classes: \"sticky left-0\",\n      description: \"Pin column to the left edge of the scroll container\",\n    },\n    right: {\n      classes: \"sticky right-0\",\n      description: \"Pin column to the right edge of the scroll container\",\n    },\n  },\n} as const;\n\nexport type RekiTableStickyColumn = keyof typeof REKI_TABLE_VARIANTS.sticky;\n\n/**\n * Shared sticky-column styles for `<th>` and `<td>`.\n *\n * - Opaque background so scrolling content doesn't show through.\n * - Gradient fade on the inner edge so the sticky boundary isn't a hard clip.\n * - z-index kept to z-0/z-1/z-2 within the table's `isolate` stacking context:\n *   - `z-0` — normal cells (default)\n *   - `z-1` — sticky body cells (`<td>`)\n *   - `z-2` — sticky header cells (`<th>`) so they sit above sticky body cells\n *\n * Header cells use `:has()` to detect if they're in a compact header (which has\n * `bg-reki-elevated`) and adjust both the background and gradient fade colors.\n */\nconst stickyColumnClasses = (\n  side: RekiTableStickyColumn,\n  /** \"head\" renders at z-2, \"cell\" at z-1 */\n  element: \"head\" | \"cell\",\n) => {\n  const base = resolveVariant(REKI_TABLE_VARIANTS.sticky, side, \"left\").classes;\n  const z = element === \"head\" ? \"z-2\" : \"z-1\";\n\n  const fadePosition = side === \"right\" ? \"before:-left-6\" : \"before:-right-6\";\n  const fadeBase =\n    \"before:pointer-events-none before:absolute before:inset-y-0 before:w-6\";\n\n  if (element === \"cell\") {\n    // Body cells always use reki-base\n    const fade =\n      side === \"right\"\n        ? \"before:bg-gradient-to-r before:from-transparent before:to-reki-base\"\n        : \"before:bg-gradient-to-l before:from-transparent before:to-reki-base\";\n    return cn(base, z, \"bg-reki-base\", fadeBase, fadePosition, fade);\n  }\n\n  // Header cells: use reki-base by default, reki-elevated when in compact header\n  // The compact header applies a data attribute we can target with :has()\n  const bg = \"bg-reki-base group-data-[compact]/header:bg-reki-elevated\";\n  const fade =\n    side === \"right\"\n      ? \"before:bg-gradient-to-r before:from-transparent before:to-reki-base group-data-[compact]/header:before:to-reki-elevated\"\n      : \"before:bg-gradient-to-l before:from-transparent before:to-reki-base group-data-[compact]/header:before:to-reki-elevated\";\n\n  return cn(base, z, bg, fadeBase, fadePosition, fade);\n};\n\nexport const REKI_TABLE_DEFAULT_VARIANTS = {\n  layout: \"auto\",\n  variant: \"default\",\n} as const;\n\nexport type RekiTableRowVariant = keyof typeof REKI_TABLE_VARIANTS.variant;\nexport type RekiTableLayout = keyof typeof REKI_TABLE_VARIANTS.layout;\n\n/**\n * Table root — applies layout, borders, padding, and header styles.\n *\n * @example\n * ```tsx\n * <Table layout=\"fixed\">\n *   <Table.Header>\n *     <Table.Row>\n *       <Table.Head>Name</Table.Head>\n *       <Table.Head>Status</Table.Head>\n *     </Table.Row>\n *   </Table.Header>\n *   <Table.Body>\n *     <Table.Row>\n *       <Table.Cell>Worker A</Table.Cell>\n *       <Table.Cell>Active</Table.Cell>\n *     </Table.Row>\n *   </Table.Body>\n * </Table>\n * ```\n */\nconst TableRoot = forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement> & {\n    /**\n     * Table layout algorithm.\n     * - `\"auto\"` — columns resize based on content\n     * - `\"fixed\"` — equal-width columns, controlled via `<colgroup>`\n     * @default \"auto\"\n     */\n    layout?: RekiTableLayout;\n  }\n>(({ layout = \"auto\", ...props }, ref) => {\n  const className = cn(\n    \"isolate w-full\", // isolate creates a stacking context so z-0/z-1/z-2 never leak out\n    resolveVariant(REKI_TABLE_VARIANTS.layout, layout, REKI_TABLE_DEFAULT_VARIANTS.layout).classes,\n    \"[&_td]:border-b [&_td]:border-reki-fill [&_tr:last-child_td]:border-b-0\", // Row border\n    \"[&_td]:p-3\", // Cell padding\n    \"[&_th]:border-b [&_th]:border-reki-fill [&_th]:p-3 [&_th]:font-semibold [&_th]:text-base\", // Header styles\n    \"[&_th]:bg-reki-base\", // Header background color\n    \"text-base text-left text-reki-default\",\n    props.className,\n  );\n\n  return <table ref={ref} {...props} className={className} />;\n});\n\nconst TableHeader = forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement> & {\n    variant?: \"default\" | \"compact\";\n    /**\n     * Make the header row stick to the top of the scroll container.\n     * Requires the table's parent to have a constrained height with\n     * `overflow-y: auto`.\n     */\n    sticky?: boolean;\n  }\n>(({ variant = \"default\", sticky, ...props }, ref) => {\n  const isCompact = variant === \"compact\";\n  const className = cn(\n    \"group/header\",\n    isCompact && \"[&_th]:bg-reki-elevated [&_th]:py-2 text-xs text-reki-strong\",\n    sticky && \"[&_th]:sticky [&_th]:top-0 [&_th]:z-1\",\n    props.className,\n  );\n\n  return (\n    <thead\n      ref={ref}\n      {...props}\n      className={className}\n      {...(isCompact && { \"data-compact\": \"\" })}\n    />\n  );\n});\n\nconst TableHead = forwardRef<\n  HTMLTableCellElement,\n  React.HTMLAttributes<HTMLTableCellElement> & {\n    /**\n     * Pin this header cell to the left or right edge of the scroll container.\n     * Adds `position: sticky`, an opaque background, and a gradient fade on the\n     * inner edge. Sticky header columns render at `z-2` so they sit above both\n     * normal cells and sticky body cells (`z-1`).\n     */\n    sticky?: RekiTableStickyColumn;\n  }\n>(({ sticky, ...props }, ref) => {\n  const className = cn(\n    \"group relative\",\n    sticky && stickyColumnClasses(sticky, \"head\"),\n    props.className,\n  );\n  return <th ref={ref} {...props} className={className} />;\n});\n\nconst TableRow = forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement> & {\n    variant?: RekiTableRowVariant;\n  }\n>(({ variant = REKI_TABLE_DEFAULT_VARIANTS.variant, ...props }, ref) => {\n  const className = cn(\n    resolveVariant(REKI_TABLE_VARIANTS.variant, variant, REKI_TABLE_DEFAULT_VARIANTS.variant).classes,\n    props.className,\n  );\n\n  return <tr ref={ref} {...props} className={className} />;\n});\n\nconst TableBody = forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>((props, ref) => {\n  return <tbody ref={ref} {...props} />;\n});\n\nconst TableCell = forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement> & {\n    /**\n     * Pin this cell to the left or right edge of the scroll container.\n     * Adds `position: sticky`, an opaque background, and a gradient fade on\n     * the inner edge. Requires the table's parent to have `overflow-x: auto`.\n     */\n    sticky?: RekiTableStickyColumn;\n  }\n>(({ sticky, ...props }, ref) => {\n  const className = cn(\n    sticky && stickyColumnClasses(sticky, \"cell\"),\n    props.className,\n  );\n  return <td ref={ref} {...props} className={className} />;\n});\n\nconst TableFooter = forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>((props, ref) => {\n  return <tfoot ref={ref} {...props} />;\n});\n\nconst TableResizeHandle = forwardRef<\n  HTMLButtonElement,\n  React.HTMLAttributes<HTMLButtonElement>\n>((props, ref) => {\n  return (\n    <button\n      ref={ref}\n      {...props}\n      type=\"button\"\n      aria-label=\"Resize column\"\n      className={cn(\n        \"invisible h-full group-hover:visible\", // Make the handle invisible by default\n        \"w-[10px]\", // Hitting area\n        \"flex items-center justify-center\", // Center the handle\n        \"cursor-col-resize touch-none select-none\", // Prevent selection and touch events\n        \"absolute top-0 right-0\", // Position the handle\n        \"m-0 bg-reki-base p-0\", // Override the stratus button styles\n        \"focus-visible:ring-2 focus-visible:ring-reki-brand\", // Consistent keyboard focus styling\n      )}\n    >\n      <span className=\"h-5 w-[2px] rounded bg-reki-hairline\" />\n    </button>\n  );\n});\n\n/**\n * Special cell that makes the entire cell area a hit target for the checkbox.\n */\n\nconst TableCheckCell = forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement> & {\n    checked?: boolean;\n    indeterminate?: boolean;\n    /**\n     * Called when the checkbox's checked state changes. The optional second\n     * argument exposes event details from the underlying Checkbox, matching\n     * the Checkbox component's signature.\n     */\n    onCheckedChange?: (\n      checked: boolean,\n      eventDetails?: CheckboxChangeEventDetails,\n    ) => void;\n    /** @deprecated Use `onCheckedChange` instead. Will be removed in a future major version. */\n    onValueChange?: (checked: boolean) => void;\n    label?: string;\n    disabled?: boolean;\n  }\n>(\n  (\n    {\n      checked,\n      indeterminate,\n      onCheckedChange,\n      onValueChange,\n      label,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <TableCell\n        ref={ref}\n        {...props}\n        className={cn(\"w-10 leading-none\", props.className)}\n      >\n        <Checkbox\n          checked={checked}\n          indeterminate={indeterminate}\n          onCheckedChange={(newChecked, eventDetails) => {\n            onCheckedChange?.(newChecked, eventDetails);\n            onValueChange?.(newChecked);\n          }}\n          aria-label={label ?? \"Select row\"}\n          disabled={disabled}\n          className=\"relative before:absolute before:-inset-3 before:content-['']\"\n        />\n      </TableCell>\n    );\n  },\n);\n\nconst TableCheckHead = forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement> & {\n    checked?: boolean;\n    indeterminate?: boolean;\n    /**\n     * Called when the checkbox's checked state changes. The optional second\n     * argument exposes event details from the underlying Checkbox, matching\n     * the Checkbox component's signature.\n     */\n    onCheckedChange?: (\n      checked: boolean,\n      eventDetails?: CheckboxChangeEventDetails,\n    ) => void;\n    /** @deprecated Use `onCheckedChange` instead. Will be removed in a future major version. */\n    onValueChange?: (checked: boolean) => void;\n    label?: string;\n    disabled?: boolean;\n  }\n>(\n  (\n    {\n      checked,\n      indeterminate,\n      onCheckedChange,\n      onValueChange,\n      label,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <TableHead\n        ref={ref}\n        {...props}\n        className={cn(\"w-10 leading-none\", props.className)}\n      >\n        <Checkbox\n          checked={checked}\n          indeterminate={indeterminate}\n          onCheckedChange={(newChecked, eventDetails) => {\n            onCheckedChange?.(newChecked, eventDetails);\n            onValueChange?.(newChecked);\n          }}\n          aria-label={label ?? \"Select all rows\"}\n          disabled={disabled}\n          className=\"relative before:absolute before:-inset-3 before:content-['']\"\n        />\n      </TableHead>\n    );\n  },\n);\n\nTableRoot.displayName = \"Table\";\nTableBody.displayName = \"Table.Body\";\nTableHead.displayName = \"Table.Head\";\nTableRow.displayName = \"Table.Row\";\nTableCell.displayName = \"Table.Cell\";\nTableFooter.displayName = \"Table.Footer\";\nTableHeader.displayName = \"Table.Header\";\nTableResizeHandle.displayName = \"Table.ResizeHandle\";\nTableCheckCell.displayName = \"Table.CheckCell\";\nTableCheckHead.displayName = \"Table.CheckHead\";\n\n/**\n * Table — semantic HTML table with styled rows, cells, and selection support.\n *\n * Compound component: `Table` (Root), `.Header`, `.Head`, `.Body`, `.Row`,\n * `.Cell`, `.Footer`, `.CheckCell`, `.CheckHead`, `.ResizeHandle`.\n *\n * @example\n * ```tsx\n * <Table>\n *   <Table.Header>\n *     <Table.Row>\n *       <Table.CheckHead checked={allSelected} onCheckedChange={toggleAll} />\n *       <Table.Head>Name</Table.Head>\n *     </Table.Row>\n *   </Table.Header>\n *   <Table.Body>\n *     {rows.map((row) => (\n *       <Table.Row key={row.id} variant={selected.has(row.id) ? \"selected\" : \"default\"}>\n *         <Table.CheckCell checked={selected.has(row.id)} onCheckedChange={() => toggle(row.id)} />\n *         <Table.Cell>{row.name}</Table.Cell>\n *       </Table.Row>\n *     ))}\n *   </Table.Body>\n * </Table>\n * ```\n */\nexport const Table = Object.assign(TableRoot, {\n  Header: TableHeader,\n  Head: TableHead,\n  Row: TableRow,\n  Body: TableBody,\n  Cell: TableCell,\n  CheckCell: TableCheckCell,\n  CheckHead: TableCheckHead,\n  Footer: TableFooter,\n  ResizeHandle: TableResizeHandle,\n});\n"],"names":["REKI_TABLE_VARIANTS","stickyColumnClasses","side","element","base","resolveVariant","z","fadePosition","fadeBase","cn","REKI_TABLE_DEFAULT_VARIANTS","TableRoot","forwardRef","layout","props","ref","className","jsx","TableHeader","variant","sticky","isCompact","TableHead","TableRow","TableBody","TableCell","TableFooter","TableResizeHandle","TableCheckCell","checked","indeterminate","onCheckedChange","onValueChange","label","disabled","Checkbox","newChecked","eventDetails","TableCheckHead","Table"],"mappings":"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"}