npm - @cloudflare/kumo - Versions diffs - 2.2.2 → 2.4.0 - Mend

@cloudflare/kumo 2.2.2 → 2.4.0

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

Files changed (252) hide show

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

@@ -0,0 +1 @@

+ {"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/{surface-ck1nt2uqfzmod4sz.js → surface-iyejjbqogjbo7ise.js} RENAMED Viewed

@@ -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-hyz8lfxceudt05pv.js";
+import { L as m } from "./layer-card-er4flkcxmzfug8jw.js";
 const f = function({
   color: r = "primary",
   className: a,
@@ -26,4 +26,4 @@ f.displayName = "Surface";
 export {
   f as S
 };
-//# sourceMappingURL=surface-ck1nt2uqfzmod4sz.js.map
+//# sourceMappingURL=surface-iyejjbqogjbo7ise.js.map

package/dist/chunks/{surface-ck1nt2uqfzmod4sz.js.map → surface-iyejjbqogjbo7ise.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"surface-~~ck1nt2uqfzmod4sz~~.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 KUMO_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 KUMO_SURFACE_DEFAULT_VARIANTS = {\n color: \"primary\",\n} as const;\n\n// Derived types from KUMO_SURFACE_VARIANTS\nexport type KumoSurfaceColor = keyof typeof KUMO_SURFACE_VARIANTS.color;\n\nexport interface KumoSurfaceVariantsProps {\n /\n Surface color variant.\n * - `\"primary\"` — Primary surface color\n * - `\"secondary\"` — Secondary surface color\n * @default \"primary\"\n /\n color?: KumoSurfaceColor;\n}\n\nexport function surfaceVariants({\n color = KUMO_SURFACE_DEFAULT_VARIANTS.color,\n}: KumoSurfaceVariantsProps = {}) {\n return resolveVariant(KUMO_SURFACE_VARIANTS.color, color, KUMO_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 KumoSurfaceVariantsProps & {\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;"}
1	+ {"version":3,"file":"surface-iyejjbqogjbo7ise.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 KUMO_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 KUMO_SURFACE_DEFAULT_VARIANTS = {\n color: \"primary\",\n} as const;\n\n// Derived types from KUMO_SURFACE_VARIANTS\nexport type KumoSurfaceColor = keyof typeof KUMO_SURFACE_VARIANTS.color;\n\nexport interface KumoSurfaceVariantsProps {\n /\n Surface color variant.\n * - `\"primary\"` — Primary surface color\n * - `\"secondary\"` — Secondary surface color\n * @default \"primary\"\n /\n color?: KumoSurfaceColor;\n}\n\nexport function surfaceVariants({\n color = KUMO_SURFACE_DEFAULT_VARIANTS.color,\n}: KumoSurfaceVariantsProps = {}) {\n return resolveVariant(KUMO_SURFACE_VARIANTS.color, color, KUMO_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 KumoSurfaceVariantsProps & {\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-fv0ttj24uhocvuh8.js → switch-g8f77h69h34xld06.js} RENAMED Viewed

@@ -2,8 +2,8 @@
 import { jsx as e, jsxs as z } from "react/jsx-runtime";
 import { forwardRef as A, createContext as H, useContext as V } from "react";
 import { c as i } from "./cn-ct4n7r74mh8y0f48.js";
-import { F as W } from "./field-l1oapopp6kjnephi.js";
-import { Q as L, U as E, bd as P } from "./vendor-base-ui-nbyiqqi138hcoz52.js";
+import { F as W } from "./field-c8o7h3rlam4c9pcx.js";
+import { Q as L, U as E, bf as P } from "./vendor-base-ui-knphx7dts1vm1x37.js";
 const re = {
   size: {
     sm: {
@@ -29,19 +29,19 @@ const re = {
       description: "Monochrome switch with squircle shape for subtle toggles"
     }
   }
-}, se = {
+}, te = {
   size: "base",
   variant: "default"
 }, T = H({
   controlFirst: !0
 }), U = A(
   ({
-    className: t,
+    className: a,
     checked: o,
     disabled: n,
     size: c = "base",
     variant: l = "default",
-    label: a,
+    label: s,
     labelTooltip: u,
     required: f,
     controlFirst: w = !0,
@@ -49,57 +49,58 @@ const re = {
     transitioning: N,
     id: r,
     ...d
-  }, v) => {
-    const _ = typeof a == "string" ? a : "Switch", S = /* @__PURE__ */ e(
+  }, S) => {
+    const v = typeof s == "string" ? s : "Switch", _ = /* @__PURE__ */ e(
       P,
       {
-        ref: v,
+        ref: S,
         id: r,
         checked: o,
         disabled: n,
         onCheckedChange: x,
         nativeButton: !0,
-        render: (R, s) => {
+        render: (R, t) => {
           const {
-            ref: m,
+            ref: b,
             className: h,
             role: q,
             "aria-checked": k,
             "aria-pressed": F,
             ...y
-          } = R, g = l === "neutral", p = "rounded-[5px] supports-[corner-shape:squircle]:rounded-[10px] [corner-shape:squircle]", b = {
+          } = R, g = l === "neutral", p = "rounded-[5px] supports-[corner-shape:squircle]:rounded-[10px] [corner-shape:squircle]", m = {
             sm: { track: "h-4 w-8", thumb: "w-4", slide: "left-4" },
             base: { track: "h-4.5 w-9", thumb: "w-4.5", slide: "left-4.5" },
             lg: { track: "h-5 w-10", thumb: "w-5", slide: "left-5" }
-          }[c], D = g ? s.checked ? "bg-neutral-500 dark:bg-kumo-base ring-neutral-600 dark:ring-neutral-700" : "bg-neutral-150 dark:bg-kumo-base ring-kumo-hairline" : s.checked ? "bg-blue-500 dark:bg-blue-600 ring-blue-600 dark:ring-blue-500" : "bg-neutral-200 dark:bg-neutral-700 ring-neutral-300 dark:ring-neutral-600", G = g ? s.checked ? "bg-kumo-base dark:bg-neutral-400" : "bg-kumo-base dark:bg-neutral-850" : s.checked ? "bg-kumo-base dark:bg-blue-300" : "bg-kumo-base dark:bg-neutral-850", K = i(
+          }[c], D = g ? t.checked ? "bg-neutral-500 dark:bg-kumo-base ring-neutral-600 dark:ring-neutral-700" : "bg-neutral-150 dark:bg-kumo-base ring-kumo-hairline" : t.checked ? "bg-blue-500 dark:bg-blue-600 ring-blue-600 dark:ring-blue-500" : "bg-neutral-200 dark:bg-neutral-700 ring-neutral-300 dark:ring-neutral-600", G = g ? t.checked ? "bg-kumo-base dark:bg-neutral-400" : "bg-kumo-base dark:bg-neutral-850" : t.checked ? "bg-kumo-base dark:bg-blue-300" : "bg-kumo-base dark:bg-neutral-850", K = i(
             "relative inline-flex items-center ring cursor-pointer border-none p-0",
             "focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand",
             "transition-colors duration-150 ease-out motion-reduce:transition-none",
             "disabled:cursor-not-allowed disabled:opacity-50",
-            b.track,
+            m.track,
             p,
             D,
-            t,
+            a,
             h
           ), M = i(
             "absolute top-0 bottom-0 shadow-[0_0_1px_0.5px_var(--color-kumo-shadow-edge),0_1px_2px_var(--color-kumo-shadow-drop)]",
-            b.thumb,
+            m.thumb,
             p,
             G,
             "transition-all duration-150 ease-out motion-reduce:transition-none",
-            s.checked ? b.slide : "left-0"
-          ), I = d.role ?? q ?? "switch", O = I === "switch" ? { "aria-checked": s.checked } : { "aria-pressed": s.checked };
+            t.checked ? m.slide : "left-0"
+          ), I = d.role ?? q ?? "switch", O = I === "switch" ? { "aria-checked": t.checked } : { "aria-pressed": t.checked };
           return /* @__PURE__ */ e(
             "button",
             {
               ...y,
               ...d,
-              ref: m,
+              ref: b,
+              "data-kumo-component": "Switch",
               type: "button",
               role: I,
               ...O,
               "aria-busy": N || void 0,
-              "aria-label": d["aria-label"] ?? _,
+              "aria-label": d["aria-label"] ?? v,
               className: K,
               children: /* @__PURE__ */ e("div", { className: M })
             }
@@ -107,27 +108,27 @@ const re = {
         }
       }
     );
-    return a ? /* @__PURE__ */ e(
+    return s ? /* @__PURE__ */ e(
       W,
       {
-        label: a,
+        label: s,
         required: f,
         labelTooltip: u,
         controlFirst: w,
-        children: S
+        children: _
       }
-    ) : S;
+    ) : _;
   }
 );
 U.displayName = "Switch";
 const j = A(
   ({
-    className: t,
+    className: a,
     checked: o,
     disabled: n,
     size: c = "base",
     variant: l = "default",
-    label: a,
+    label: s,
     onCheckedChange: u,
     transitioning: f
   }, w) => {
@@ -135,13 +136,15 @@ const j = A(
     return /* @__PURE__ */ z(
       "label",
       {
+        "data-kumo-component": "Switch",
+        "data-kumo-part": "item-label",
         className: i(
           "m-0 relative inline-flex items-center gap-2",
           // Control first (default): switch before label
           // Label first: label before switch using flex-row-reverse
           !x && "flex-row-reverse justify-end",
           n ? "cursor-not-allowed opacity-50" : "cursor-pointer",
-          t
+          a
         ),
         children: [
           /* @__PURE__ */ e(
@@ -155,16 +158,16 @@ const j = A(
               render: (N, r) => {
                 const {
                   ref: d,
-                  className: v,
-                  role: _,
-                  "aria-checked": S,
+                  className: S,
+                  role: v,
+                  "aria-checked": _,
                   "aria-pressed": R,
-                  ...s
-                } = N, m = l === "neutral", h = "rounded-[5px] supports-[corner-shape:squircle]:rounded-[10px] [corner-shape:squircle]", k = {
+                  ...t
+                } = N, b = l === "neutral", h = "rounded-[5px] supports-[corner-shape:squircle]:rounded-[10px] [corner-shape:squircle]", k = {
                   sm: { track: "h-4 w-8", thumb: "w-4", slide: "left-4" },
                   base: { track: "h-4.5 w-9", thumb: "w-4.5", slide: "left-4.5" },
                   lg: { track: "h-5 w-10", thumb: "w-5", slide: "left-5" }
-                }[c], F = m ? r.checked ? "bg-neutral-500 dark:bg-kumo-base ring-neutral-600 dark:ring-neutral-700" : "bg-neutral-150 dark:bg-kumo-base ring-kumo-hairline" : r.checked ? "bg-blue-500 dark:bg-blue-600 ring-blue-600 dark:ring-blue-500" : "bg-neutral-200 dark:bg-neutral-700 ring-neutral-300 dark:ring-neutral-600", y = m ? r.checked ? "bg-kumo-base dark:bg-neutral-400" : "bg-kumo-base dark:bg-neutral-850" : r.checked ? "bg-kumo-base dark:bg-blue-300" : "bg-kumo-base dark:bg-neutral-850", g = i(
+                }[c], F = b ? r.checked ? "bg-neutral-500 dark:bg-kumo-base ring-neutral-600 dark:ring-neutral-700" : "bg-neutral-150 dark:bg-kumo-base ring-kumo-hairline" : r.checked ? "bg-blue-500 dark:bg-blue-600 ring-blue-600 dark:ring-blue-500" : "bg-neutral-200 dark:bg-neutral-700 ring-neutral-300 dark:ring-neutral-600", y = b ? r.checked ? "bg-kumo-base dark:bg-neutral-400" : "bg-kumo-base dark:bg-neutral-850" : r.checked ? "bg-kumo-base dark:bg-blue-300" : "bg-kumo-base dark:bg-neutral-850", g = i(
                   "relative inline-flex items-center ring cursor-pointer border-none p-0",
                   "focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand",
                   "transition-colors duration-150 ease-out motion-reduce:transition-none",
@@ -172,7 +175,7 @@ const j = A(
                   k.track,
                   h,
                   F,
-                  v
+                  S
                 ), p = i(
                   "absolute top-0 bottom-0 shadow-[0_0_1px_0.5px_var(--color-kumo-shadow-edge),0_1px_2px_var(--color-kumo-shadow-drop)]",
                   k.thumb,
@@ -180,15 +183,17 @@ const j = A(
                   y,
                   "transition-all duration-150 ease-out motion-reduce:transition-none",
                   r.checked ? k.slide : "left-0"
-                ), C = _ ?? "switch", b = C === "switch" ? { "aria-checked": r.checked } : { "aria-pressed": r.checked };
+                ), C = v ?? "switch", m = C === "switch" ? { "aria-checked": r.checked } : { "aria-pressed": r.checked };
                 return /* @__PURE__ */ e(
                   "button",
                   {
-                    ...s,
+                    ...t,
                     ref: d,
+                    "data-kumo-component": "Switch",
+                    "data-kumo-part": "item",
                     type: "button",
                     role: C,
-                    ...b,
+                    ...m,
                     "aria-busy": f || void 0,
                     className: g,
                     children: /* @__PURE__ */ e("div", { className: p })
@@ -197,39 +202,39 @@ const j = A(
               }
             }
           ),
-          /* @__PURE__ */ e("span", { className: "text-base font-medium text-kumo-default", children: a })
+          /* @__PURE__ */ e("span", { className: "text-base font-medium text-kumo-default", children: s })
         ]
       }
     );
   }
 );
 j.displayName = "Switch.Item";
-function B({ children: t, className: o }) {
+function B({ children: a, className: o }) {
   return /* @__PURE__ */ e(
     L,
     {
       className: i("text-base font-medium text-kumo-default", o),
-      children: t
+      children: a
     }
   );
 }
 B.displayName = "Switch.Legend";
 function Q({
-  legend: t,
+  legend: a,
   children: o,
   error: n,
   description: c,
   disabled: l,
-  controlFirst: a = !0,
+  controlFirst: s = !0,
   className: u
 }) {
-  return /* @__PURE__ */ e(T.Provider, { value: { controlFirst: a }, children: /* @__PURE__ */ z(
+  return /* @__PURE__ */ e(T.Provider, { value: { controlFirst: s }, children: /* @__PURE__ */ z(
     E,
     {
       className: i("flex flex-col gap-4", u),
       disabled: l,
       children: [
-        t && /* @__PURE__ */ e(L, { className: "text-base font-medium text-kumo-default", children: t }),
+        a && /* @__PURE__ */ e(L, { className: "text-base font-medium text-kumo-default", children: a }),
         /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: o }),
         n && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-danger", children: n }),
         c && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-subtle", children: c })
@@ -246,6 +251,6 @@ J.displayName = "Switch";
 export {
   re as K,
   J as S,
-  se as a
+  te as a
 };
-//# sourceMappingURL=switch-fv0ttj24uhocvuh8.js.map
+//# sourceMappingURL=switch-g8f77h69h34xld06.js.map

package/dist/chunks/switch-g8f77h69h34xld06.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"switch-g8f77h69h34xld06.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 KUMO_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 KUMO_SWITCH_DEFAULT_VARIANTS = {\n size: \"base\",\n variant: \"default\",\n} as const;\n\n// Derived types from KUMO_SWITCH_VARIANTS\nexport type KumoSwitchSize = keyof typeof KUMO_SWITCH_VARIANTS.size;\nexport type KumoSwitchVariant = keyof typeof KUMO_SWITCH_VARIANTS.variant;\n\nexport interface KumoSwitchVariantsProps {\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?: KumoSwitchSize;\n /**\n * Visual variant.\n * - `\"default\"` — Standard switch appearance\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: KumoSwitchVariant;\n}\n\nexport function switchVariants({\n size = KUMO_SWITCH_DEFAULT_VARIANTS.size,\n variant = KUMO_SWITCH_DEFAULT_VARIANTS.variant,\n}: KumoSwitchVariantsProps = {}) {\n const sizeConfig = resolveVariant(KUMO_SWITCH_VARIANTS.size, size, KUMO_SWITCH_DEFAULT_VARIANTS.size);\n const variantConfig = resolveVariant(KUMO_SWITCH_VARIANTS.variant, variant, KUMO_SWITCH_DEFAULT_VARIANTS.variant);\n return cn(sizeConfig.classes, variantConfig.classes);\n}\n\n// Legacy type aliases for backwards compatibility\nexport type SwitchSize = KumoSwitchSize;\nexport type SwitchVariant = KumoSwitchVariant;\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?: KumoSwitchSize;\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?: KumoSwitchSize;\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-kumo-base ring-neutral-600 dark:ring-neutral-700\"\n : \"bg-neutral-150 dark:bg-kumo-base ring-kumo-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-kumo-base dark:bg-neutral-400\"\n : \"bg-kumo-base dark:bg-neutral-850\"\n : state.checked\n ? \"bg-kumo-base dark:bg-blue-300\"\n : \"bg-kumo-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-kumo-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-kumo-shadow-edge),0_1px_2px_var(--color-kumo-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-kumo-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-kumo-component=\"Switch\"\n data-kumo-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-kumo-base ring-neutral-600 dark:ring-neutral-700\"\n : \"bg-neutral-150 dark:bg-kumo-base ring-kumo-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-kumo-base dark:bg-neutral-400\"\n : \"bg-kumo-base dark:bg-neutral-850\"\n : state.checked\n ? \"bg-kumo-base dark:bg-blue-300\"\n : \"bg-kumo-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-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-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-kumo-shadow-edge),0_1px_2px_var(--color-kumo-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-kumo-component=\"Switch\"\n data-kumo-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-kumo-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-kumo-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-kumo-default\">\n {legend}\n </Fieldset.Legend>\n )}\n <div className=\"flex flex-col gap-2\">{children}</div>\n {error && <p className=\"text-sm text-kumo-danger\">{error}</p>}\n {description && (\n <p className=\"text-sm text-kumo-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":["KUMO_SWITCH_VARIANTS","KUMO_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-nsfcgpo93gfetrhh.js → table-e1te1im2tt2ez05y.js} RENAMED Viewed

@@ -3,7 +3,7 @@ import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as r } from "react";
 import { c as l } from "./cn-ct4n7r74mh8y0f48.js";
 import { r as f } from "./resolve-variant-gw6eh7fa4st8ej7m.js";
-import { C as k } from "./checkbox-h6vkv17lnq854z2c.js";
+import { C as k } from "./checkbox-dqih8tzzt3vhp870.js";
 const h = {
   layout: {
     auto: {
@@ -205,4 +205,4 @@ export {
   S as T,
   h as a
 };
-//# sourceMappingURL=table-nsfcgpo93gfetrhh.js.map
+//# sourceMappingURL=table-e1te1im2tt2ez05y.js.map