@cloudflare/kumo 2.4.1 → 2.5.0

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

@@ -1 +0,0 @@
-{"version":3,"file":"sidebar-hzio700cg85f7f31.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 { Dialog as DialogBase } from \"@base-ui/react/dialog\";\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 Kumo convention)\n// ============================================================================\n\n/** Sidebar variant definitions mapping layout, collapse, and side options. */\nexport const KUMO_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 KUMO_SIDEBAR_DEFAULT_VARIANTS = {\n  variant: \"sidebar\",\n  collapsible: \"icon\",\n  side: \"left\",\n} as const;\n\nexport const KUMO_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;\n\n// ============================================================================\n// Mobile detection hook\n// ============================================================================\n\nfunction useIsMobile() {\n  const [isMobile, setIsMobile] = useState(false);\n\n  useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_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  }, []);\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  /** 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 = KUMO_SIDEBAR_DEFAULT_VARIANTS.variant,\n  side = KUMO_SIDEBAR_DEFAULT_VARIANTS.side,\n  collapsible = KUMO_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  children,\n  className,\n  style,\n}: SidebarProviderProps) {\n  const isMobile = useIsMobile();\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  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((prev) => !prev);\n    } else {\n      setIsPeeking(false);\n      setOpen((prev: boolean) => !prev);\n    }\n  }, [isMobile, 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    state, open, setOpen, openMobile, setOpenMobile, isMobile,\n    toggleSidebar, variant, side, collapsible, width, resizable,\n    minWidth, maxWidth, isResizing, setIsResizing, setWidth,\n    isPeeking, peekable, startPeek, stopPeek, contained, animationDuration,\n  }), [state, open, openMobile, isMobile, width, isResizing, isPeeking]);\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-kumo-base)\",\n            ...style,\n          } as CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper isolate flex w-full\",\n          !contained && \"min-h-svh\",\n          \"has-data-[variant=inset]:bg-kumo-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  /** Sidebar content — Header, Content, Footer, etc. */\n  children: ReactNode;\n}\n\n/**\n * Main sidebar container. Renders as `<aside>` on desktop, Dialog 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, 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    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-kumo-default\",\n            variant === \"sidebar\" &&\n              (side === \"left\"\n                ? \"border-r border-kumo-line\"\n                : \"border-l border-kumo-line\"),\n            variant === \"floating\" &&\n              \"m-2 rounded-lg border border-kumo-line shadow-lg\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </aside>\n      );\n    }\n\n    if (isMobile) {\n      return (\n        <DialogBase.Root open={openMobile} onOpenChange={setOpenMobile}>\n          <DialogBase.Portal>\n            <DialogBase.Backdrop data-sidebar-backdrop=\"\" className=\"fixed inset-0 bg-black/50 transition-opacity duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0\" />\n            <DialogBase.Popup\n              data-sidebar-popup=\"\"\n              className={cn(\n                \"fixed inset-y-0 flex w-[--sidebar-width] flex-col bg-kumo-base p-0\",\n                \"duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0\",\n                side === \"left\" &&\n                  \"left-0 data-[ending-style]:-translate-x-full data-[starting-style]:-translate-x-full\",\n                side === \"right\" &&\n                  \"right-0 data-[ending-style]:translate-x-full data-[starting-style]:translate-x-full\",\n              )}\n              style={\n                {\n                  \"--sidebar-width\": SIDEBAR_WIDTH,\n                  transitionProperty: \"transform, opacity\",\n                  transitionTimingFunction:\n                    \"var(--default-transition-timing-function)\",\n                } as CSSProperties\n              }\n            >\n              <div\n                data-state=\"expanded\"\n                data-side={side}\n                data-variant={variant}\n                data-collapsible={collapsible}\n                data-sidebar=\"sidebar\"\n                data-mobile=\"true\"\n                className={cn(\n                  \"group/sidebar flex h-full w-full flex-col bg-kumo-base text-kumo-default\",\n                  className,\n                )}\n              >\n                {children}\n              </div>\n            </DialogBase.Popup>\n          </DialogBase.Portal>\n        </DialogBase.Root>\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    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    // 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-kumo-line\"\n          : \"border-l border-kumo-line\"\n        : variant === \"floating\"\n          ? \"border border-kumo-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 === \"Sidebar.Footer\",\n            );\n            const nonFooterChildren = childArray.filter(\n              (child) =>\n                !React.isValidElement(child) ||\n                (child.type as { displayName?: string })?.displayName !== \"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-kumo-default\",\n                  borderClasses,\n                  \"transition-[width] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n                  \"motion-reduce:transition-none\",\n                  isResizing && \"transition-none!\",\n                  !open && 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                )}\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] items-center gap-1 border-b border-kumo-line px-3.5\",\n      \"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      className={cn(\n        \"h-full px-[11px] py-[13px] group-not-data-[state=collapsed]/sidebar:px-3.5\",\n        \"transition-[padding] duration-(--sidebar-animation-duration)\",\n        \"group-data-[state=collapsed]/sidebar: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 gap-2 group-data-[state=collapsed]/sidebar:min-w-0!\">\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\n        className=\"flex-1 rounded-full bg-kumo-line\"\n      />\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-kumo-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-kumo-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<HTMLDivElement, 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);\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      // Collapsed: spacer with divider line between icon groups\n      \"grid-rows-[0fr] my-3 border-b border-kumo-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      className,\n    )}\n    {...props}\n  >\n    <div className=\"min-h-0\">\n      <div\n        className={cn(\n          \"truncate px-3 mt-4 mb-2 text-sm font-medium text-kumo-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(\"relative group-data-[state=collapsed]/sidebar:overflow-hidden\", className)}\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 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  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      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 }>;\n      return (\n        <Comp\n          className={cn(\"shrink-0 opacity-50\", size === \"base\" ? \"size-4\" : \"size-3.5\")}\n        />\n      );\n    })();\n\n    const content = (\n      <div\n        className={cn(\n          \"flex flex-1 items-center min-w-0 gap-3\",\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          {children}\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-2.5 rounded-lg outline-none cursor-pointer\",\n      \"before:absolute before:inset-x-0 before:-inset-y-px\",\n      // Sizing\n      size === \"base\" && \"min-h-8.5 px-3 py-0 text-sm font-medium\",\n      size === \"sm\" && \"min-h-7 px-2 py-0 text-sm\",\n      \"text-kumo-default\",\n      \"transition-[color,background-color,box-shadow,outline] duration-(--sidebar-animation-duration)\",\n      !active && \"hover:bg-kumo-tint\",\n      // Active state\n      active && \"bg-kumo-tint\",\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-kumo-tint\",\n      // Focus\n      \"focus:outline-none focus-visible:text-kumo-strong focus-visible:bg-kumo-tint\",\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          data-active={active || undefined}\n          data-sidebar=\"menu-button\"\n          data-kumo-component=\"Sidebar\"\n          data-kumo-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-kumo-component=\"Sidebar\"\n          data-kumo-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 data-sidebar=\"menu-item\" className=\"relative group-data-[state=collapsed]/sidebar:overflow-hidden\">\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-kumo-line\",\n      \"select-none px-1.5 py-0.5 text-[11px]/none font-medium text-kumo-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      // Hidden when collapsed\n      \"group-data-[state=collapsed]/sidebar:hidden\",\n      className,\n    )}\n    {...props}\n  >\n    <div className=\"absolute left-[19px] inset-y-px w-px bg-kumo-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 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    \"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-kumo-default transition-colors duration-150\",\n    !active && \"hover:bg-kumo-tint\",\n    active && \"bg-kumo-tint\",\n    \"focus:outline-none focus-visible:text-kumo-strong focus-visible:bg-kumo-tint\",\n    className,\n  );\n\n  const content = (\n    <span className=\"flex flex-1 items-center gap-2 truncate text-left\">\n      {children}\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-kumo-component=\"Sidebar\"\n        data-kumo-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-kumo-component=\"Sidebar\"\n        data-kumo-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(\n      \"my-3 px-2\",\n      className,\n    )}\n    {...props}\n  >\n    <div className=\"border-b border-kumo-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-kumo-component=\"Sidebar\"\n      data-kumo-part=\"trigger\"\n      aria-expanded={open}\n      aria-label={open ? \"Collapse sidebar\" : \"Expand sidebar\"}\n      className={cn(\n        \"flex size-8.5 justify-center items-center rounded-lg cursor-pointer\",\n        \"text-kumo-subtle hover:text-kumo-default hover:bg-kumo-tint\",\n        \"focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-kumo-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-kumo-component=\"Sidebar\"\n      data-kumo-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-kumo-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 { side, resizable, setIsResizing, setWidth, setOpen, open, minWidth, width: currentWidth, 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-kumo-hairline active:after:bg-kumo-hairline focus-visible:after:bg-kumo-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  toggle: () => void;\n}\n\nconst SidebarCollapseContext = createContext<SidebarCollapseContextValue>({\n  contentId: \"\",\n  isOpen: true,\n  isCollapsible: false,\n  toggle: () => {},\n});\n\nexport interface SidebarCollapsibleProps 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}\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  ({ defaultOpen = false, open: openProp, onOpenChange, className, children, ...props }, ref) => {\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      () => ({ contentId, isOpen, isCollapsible: true, toggle }),\n      [contentId, isOpen, 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 = (render.props as { onClick?: (e: React.MouseEvent) => void }).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 } = useContext(SidebarCollapseContext);\n\n  return (\n    <div\n      ref={ref}\n      id={contentId}\n      role=\"region\"\n      aria-hidden={!isOpen}\n      inert={!isOpen ? true : undefined}\n      data-open={isOpen || undefined}\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 text-kumo-subtle transition-transform 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 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<HTMLDivElement, SidebarSlidingViewsProps>(\n  ({ activeKey, direction: _direction = \"left\", className, children, ...props }, ref) => {\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(\"flex flex-1 min-h-0 overflow-hidden\", className)}\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 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    return (\n      <div\n        ref={ref}\n        data-sidebar=\"sliding-view\"\n        data-value={value}\n        aria-hidden={!isActive}\n        inert={!isActive ? true : undefined}\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":["KUMO_SIDEBAR_VARIANTS","KUMO_SIDEBAR_DEFAULT_VARIANTS","KUMO_SIDEBAR_STYLING","SIDEBAR_WIDTH","SIDEBAR_WIDTH_ICON","SIDEBAR_EASING","SIDEBAR_ANIMATION_DURATION_MS","MOBILE_BREAKPOINT","useIsMobile","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","children","className","style","openMobile","setOpenMobile","width","setWidthState","isResizing","setIsResizing","isPeeking","setIsPeeking","setWidth","useCallback","newWidth","clamped","_open","_setOpen","open","setOpen","value","next","toggleSidebar","prev","startPeek","stopPeek","state","sidebarWidthValue","contextValue","useMemo","jsx","cn","SidebarRoot","forwardRef","props","ref","DialogBase.Root","jsxs","DialogBase.Portal","DialogBase.Backdrop","DialogBase.Popup","handlePeekBlur","e","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","tooltip","LinkComponent","useLinkComponent","isInsideMenuItem","iconNode","content","buttonClasses","button","Tooltip","SidebarMenuBadge","SidebarMenuSub","SidebarMenuSubItem","SidebarMenuSubButton","isInsideMenuSubItem","SidebarSeparator","SidebarPanelIcon","SidebarTrigger","onClick","SidebarRail","SidebarResizeHandle","currentWidth","startX","useRef","startWidth","wasCollapsed","KEYBOARD_STEP","handlePointerDown","sidebar","cleanup","handlePointerMove","handlePointerUp","moveEvent","delta","rawWidth","handleKeyDown","grow","shrink","SidebarCollapseContext","SidebarCollapsible","onOpenChange","internalOpen","setInternalOpen","isOpen","contentId","useId","keyboardExpandedRef","toggle","handleFocusIn","handleFocusOut","SidebarCollapsibleTrigger","render","existingOnClick","SidebarCollapsibleContent","SidebarMenuChevron","isCollapsible","CaretRightIcon","SlidingViewActiveContext","SidebarSlidingViews","activeKey","_direction","activeIndex","prefersReducedMotion","translateX","SidebarSlidingView","isActive","Sidebar"],"mappings":"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"}

package/dist/chunks/tabs-hice1yy5q2t889z8.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tabs-hice1yy5q2t889z8.js","sources":["../../src/components/tabs/tabs.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type MouseEvent, type PointerEvent, type ReactNode } from \"react\";\nimport type { TabsTab } from \"@base-ui/react/tabs\";\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport { cn } from \"../../utils/cn\";\n\n/** Tabs variant definitions. */\nexport const KUMO_TABS_VARIANTS = {\n  variant: [\"segmented\", \"underline\"],\n  size: [\"base\", \"sm\"],\n} as const;\n\nexport const KUMO_TABS_DEFAULT_VARIANTS = {\n  variant: \"segmented\",\n  size: \"base\",\n} as const;\n\nexport const KUMO_TABS_STYLING = {\n  container: {\n    height: 34,\n    borderRadius: 8,\n    background: \"color-accent\",\n    padding: 1,\n  },\n  tab: {\n    paddingX: 10,\n    verticalMargin: 1,\n    fontSize: 16,\n    fontWeight: 500,\n    borderRadius: 8,\n    activeColor: \"text-color-surface\",\n    inactiveColor: \"text-color-label\",\n  },\n  indicator: {\n    background: \"color-surface-secondary\",\n    ring: \"color-color-2\",\n    borderRadius: 6,\n    shadow: \"shadow-sm\",\n  },\n} as const;\n\n// Derived types from KUMO_TABS_VARIANTS\nexport interface KumoTabsVariantsProps {\n  /**\n   * Tab style.\n   * - `\"segmented\"` — Pill-shaped indicator on a filled track\n   * - `\"underline\"` — Underline indicator below tab text\n   * @default \"segmented\"\n   */\n  variant?: (typeof KUMO_TABS_VARIANTS.variant)[number];\n  /**\n   * Tab size.\n   * - `\"base\"` — Default size (h-9, text-base)\n   * - `\"sm\"` — Compact size (h-6.5, text-xs) — matches Input size=\"sm\"\n   * @default \"base\"\n   */\n  size?: (typeof KUMO_TABS_VARIANTS.size)[number];\n}\n\n/** Configuration for a single tab within the Tabs component. */\nexport type TabsItem = {\n  /** Unique identifier for the tab, used as the controlled value. */\n  value: string;\n  /** Display content for the tab trigger. */\n  label: ReactNode;\n  /** Additional CSS classes for this tab trigger. */\n  className?: string;\n  /**\n   * Custom render function or element to replace the tab element (e.g. for link-based tabs).\n   * When using a function, it receives the props to spread on the element and the tab's state.\n   */\n  render?: TabsTab.Props[\"render\"];\n};\n\n/**\n * Tabs component props.\n *\n * @example\n * ```tsx\n * <Tabs\n *   tabs={[\n *     { value: \"overview\", label: \"Overview\" },\n *     { value: \"settings\", label: \"Settings\" },\n *   ]}\n *   value={activeTab}\n *   onValueChange={setActiveTab}\n * />\n * ```\n */\nexport type TabsProps = KumoTabsVariantsProps & {\n  /** Array of tab items to render. */\n  tabs?: TabsItem[];\n  /** Controlled value. When set, component becomes controlled. */\n  value?: string;\n  /** Default selected value for uncontrolled mode. Ignored when `value` is set. */\n  selectedValue?: string;\n  /** Callback fired when the active tab changes. */\n  onValueChange?: (value: string) => void;\n  /**\n   * When `true`, tabs are activated immediately upon receiving focus via arrow keys.\n   * When `false` (default), tabs receive focus but require Enter/Space to activate.\n   */\n  activateOnFocus?: boolean;\n  /** Additional CSS classes for the root element. */\n  className?: string;\n  /** Additional CSS classes for the tab list element. */\n  listClassName?: string;\n  /** Additional CSS classes for the indicator element. */\n  indicatorClassName?: string;\n};\n\n/**\n * Tab navigation component with segmented or underline style.\n * Built on Base UI Tabs with animated active indicator.\n *\n * @example\n * ```tsx\n * <Tabs\n *   variant=\"segmented\"\n *   tabs={[{ value: \"tab1\", label: \"Tab 1\" }, { value: \"tab2\", label: \"Tab 2\" }]}\n *   value={active}\n *   onValueChange={setActive}\n * />\n * ```\n */\nexport function Tabs({\n  tabs,\n  value,\n  selectedValue,\n  onValueChange,\n  activateOnFocus,\n  className,\n  listClassName,\n  indicatorClassName,\n  variant = KUMO_TABS_DEFAULT_VARIANTS.variant,\n  size = KUMO_TABS_DEFAULT_VARIANTS.size,\n}: TabsProps) {\n  const items: TabsItem[] = tabs ?? [];\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const fallbackValue = items[0]?.value;\n  const isControlled = value !== undefined;\n  const rootProps = {\n    value: isControlled ? value : undefined,\n    defaultValue: isControlled ? undefined : (selectedValue ?? fallbackValue),\n  };\n\n  const isSegmented = variant === \"segmented\";\n  const isUnderline = variant === \"underline\";\n  const isSm = size === \"sm\";\n  const { ref: listRef, isOverflowing } = useOverflowDetect(isSegmented);\n  const bindDrag = useHorizontalDragScroll(listRef, isOverflowing);\n\n  return (\n    <TabsPrimitive.Root\n      {...rootProps}\n      className={cn(\"relative isolate min-w-0 font-medium\", className)}\n      onValueChange={(nextValue) => {\n        const stringValue = String(nextValue);\n        onValueChange?.(stringValue);\n      }}\n    >\n      {/* Background element for segmented variant */}\n      {isSegmented && (\n        <div className={cn(\"absolute inset-x-0 top-1/2 z-0 -translate-y-1/2 rounded-lg bg-kumo-recessed\", isSm ? \"h-6.5\" : \"h-9\")} />\n      )}\n      <TabsPrimitive.List\n        ref={listRef}\n        activateOnFocus={activateOnFocus}\n        data-overflowing={isOverflowing ? \"\" : undefined}\n        {...bindDrag()}\n        className={cn(\n          \"relative flex min-w-0 shrink items-stretch\",\n          isSegmented && \"kumo-tabs-list overflow-x-auto rounded-lg bg-kumo-recessed px-0.5 ring ring-kumo-hairline/70 [--scroll-fade-width:3rem]\",\n          isSegmented && (isSm ? \"h-6.5 rounded-md\" : \"h-9\"),\n          isOverflowing && \"cursor-grab active:cursor-grabbing\",\n          isUnderline && \"gap-4 border-b border-kumo-hairline pb-2\",\n          isUnderline && (isSm ? \"h-6.5\" : \"h-7.5\"),\n          listClassName,\n        )}\n      >\n        {items.map((tab) => (\n          <TabsPrimitive.Tab\n            key={tab.value}\n            data-kumo-component=\"Tabs\"\n            data-kumo-part=\"tab\"\n            value={tab.value}\n            render={tab.render}\n            className={cn(\n              \"relative z-2 flex items-center rounded bg-transparent whitespace-nowrap focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n              isOverflowing ? \"cursor-grab active:cursor-grabbing\" : \"cursor-pointer\",\n              isSm ? \"text-xs\" : \"text-base\",\n              isSegmented &&\n                \"my-0.5 rounded-md text-kumo-subtle hover:text-kumo-default aria-selected:text-kumo-default focus-visible:ring-inset\",\n              isSegmented && (isSm ? \"px-2\" : \"px-2.5\"),\n              isUnderline &&\n                \"text-kumo-subtle hover:bg-kumo-tint hover:text-kumo-default aria-selected:hover:bg-kumo-tint aria-selected:font-medium aria-selected:text-kumo-default\",\n              isUnderline && (isSm ? \"px-1.5 py-2.5\" : \"px-2 py-3\"),\n              tab.className,\n            )}\n          >\n            {tab.label}\n          </TabsPrimitive.Tab>\n        ))}\n        <TabsPrimitive.Indicator\n          render={(props) => (\n            <div\n              {...props}\n              className={cn(\n                \"absolute z-1 left-0\",\n                \"w-(--active-tab-width) translate-x-(--active-tab-left) transition-all duration-200\",\n                \"data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0\",\n                isSegmented &&\n                  cn(\"top-(--active-tab-top) h-(--active-tab-height) bg-kumo-base shadow-sm ring ring-kumo-line\", isSm ? \"rounded\" : \"rounded-md\"),\n                isUnderline && \"bottom-0 h-0.5 bg-kumo-brand\",\n                indicatorClassName,\n              )}\n            />\n          )}\n        />\n      </TabsPrimitive.List>\n    </TabsPrimitive.Root>\n  );\n}\n\n// ─── Horizontal drag-to-scroll ────────────────────────────────────────\n\n/**\n * Enables mouse drag to horizontally scroll the tab list.\n * Touch devices keep native horizontal overflow scrolling and inertia.\n */\nfunction useHorizontalDragScroll(\n  ref: React.RefObject<HTMLElement | null>,\n  enabled: boolean,\n) {\n  const dragState = useRef<{\n    pointerId: number;\n    startX: number;\n    scrollLeft: number;\n    dragging: boolean;\n  } | null>(null);\n  const shouldSuppressClick = useRef(false);\n\n  return () => ({\n    onPointerDownCapture: (event: PointerEvent<HTMLElement>) => {\n      const el = ref.current;\n      if (!el || !enabled) return;\n      if (event.pointerType !== \"mouse\" || event.button !== 0) return;\n\n      dragState.current = {\n        pointerId: event.pointerId,\n        startX: event.clientX,\n        scrollLeft: el.scrollLeft,\n        dragging: false,\n      };\n      shouldSuppressClick.current = false;\n    },\n    onPointerMoveCapture: (event: PointerEvent<HTMLElement>) => {\n      const el = ref.current;\n      const state = dragState.current;\n      if (!el || !enabled || !state || state.pointerId !== event.pointerId) return;\n\n      const movementX = event.clientX - state.startX;\n      if (!state.dragging) {\n        if (Math.abs(movementX) <= 3) return;\n        state.dragging = true;\n        shouldSuppressClick.current = true;\n        el.setPointerCapture(event.pointerId);\n      }\n\n      event.preventDefault();\n      el.scrollLeft = state.scrollLeft - movementX;\n    },\n    onPointerUpCapture: (event: PointerEvent<HTMLElement>) => {\n      const el = ref.current;\n      const state = dragState.current;\n      if (!el || !state || state.pointerId !== event.pointerId) return;\n\n      dragState.current = null;\n      if (el.hasPointerCapture(event.pointerId)) {\n        el.releasePointerCapture(event.pointerId);\n      }\n      if (shouldSuppressClick.current) {\n        window.setTimeout(() => {\n          shouldSuppressClick.current = false;\n        }, 0);\n      }\n    },\n    onPointerCancelCapture: (event: PointerEvent<HTMLElement>) => {\n      const el = ref.current;\n      const state = dragState.current;\n      if (!el || !state || state.pointerId !== event.pointerId) return;\n\n      dragState.current = null;\n      if (el.hasPointerCapture(event.pointerId)) {\n        el.releasePointerCapture(event.pointerId);\n      }\n    },\n    onClickCapture: (event: MouseEvent<HTMLElement>) => {\n      if (!shouldSuppressClick.current) {\n        return;\n      }\n      event.preventDefault();\n      event.stopPropagation();\n      shouldSuppressClick.current = false;\n    },\n  });\n}\n\n// ─── Overflow detection ───────────────────────────────────────────────\n\n/**\n * Detects whether the element's content overflows horizontally.\n * Returns a ref to attach and a boolean for conditional rendering.\n * The `data-overflowing` attribute drives the scroll-fade CSS.\n */\nfunction useOverflowDetect(enabled: boolean) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [isOverflowing, setIsOverflowing] = useState(false);\n\n  useEffect(() => {\n    if (!enabled) return;\n    const el = ref.current;\n    if (!el) return;\n\n    const check = () => setIsOverflowing(el.scrollWidth > el.clientWidth);\n\n    const ro = new ResizeObserver(check);\n    ro.observe(el);\n    check();\n\n    return () => ro.disconnect();\n  }, [enabled]);\n\n  return { ref, isOverflowing };\n}\n"],"names":["KUMO_TABS_DEFAULT_VARIANTS","Tabs","tabs","value","selectedValue","onValueChange","activateOnFocus","className","listClassName","indicatorClassName","variant","size","items","fallbackValue","isControlled","rootProps","isSegmented","isUnderline","isSm","listRef","isOverflowing","useOverflowDetect","bindDrag","useHorizontalDragScroll","jsxs","TabsPrimitive.Root","cn","nextValue","stringValue","jsx","TabsPrimitive.List","tab","TabsPrimitive.Tab","TabsPrimitive.Indicator","props","ref","enabled","dragState","useRef","shouldSuppressClick","event","el","state","movementX","setIsOverflowing","useState","useEffect","check","ro"],"mappings":"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"}