@nocoo/basalt 3.2.0 → 3.2.4

package/dist/components/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","names":["DialogPrimitive","SidebarContext","createContext","useSidebar","context","useContext","SidebarProvider","uncontrolled","setUncontrolled","useState","defaultCollapsed","peeking","setPeeking","width","setWidthState","clampSidebarWidth","defaultWidth","setWidth","useCallback","next","lastFocusRef","useRef","prevCollapsed","collapsed","prevOverlay","overlay","resolved","setCollapsed","onCollapsedChange","SidebarResize","cn","side","event","startX","startWidth","target","onMove","delta","move","onUp","dir","Sidebar","collapsedProp","props","body","SkeletonLine","children","resize","frameClass","BASALT_UI_CLASS","OVERLAY_MOTION","className","Dialog","open","DialogPortal","DialogOverlay","node","from","OVERLAY_LAYER","style","onMouseEnter","onMouseLeave","SIDEBAR_ROW_CLASS","SidebarHeader","SidebarSearch","NAV_ROW_CLASS","Search","shortcut","SidebarNav","highlightRef","useHoverHighlight","NAV_LIST_CLASS","SidebarPartition","SidebarItem","active","NAV_ITEM_CLASS","SidebarIconItem","SidebarGroup","setOpen","defaultOpen","Collapsible","CollapsibleTrigger","FOCUS_INSET","label","ChevronUp","CollapsibleContent","SidebarFooter","SidebarUser","avatar","name","email","action","ContentIsland","mobileSurface"],"sources":["../../src/components/sidebar.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { ChevronUp, Search } from \"lucide-react\";\nimport {\n\ttype ButtonHTMLAttributes,\n\tcreateContext,\n\ttype HTMLAttributes,\n\ttype ReactNode,\n\ttype PointerEvent as ReactPointerEvent,\n\ttype RefObject,\n\tuseCallback,\n\tuseContext,\n\tuseLayoutEffect,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { NAV_ITEM_CLASS, NAV_LIST_CLASS, NAV_ROW_CLASS } from \"../utils/navigation\";\nimport { useHoverHighlight } from \"../utils/use-hover-highlight\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"./collapsible\";\nimport { Dialog, DialogOverlay, DialogPortal } from \"./dialog\";\nimport { FOCUS_INSET, OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\nimport { SkeletonLine } from \"./skeleton-line\";\n\nexport type SidebarSide = \"left\" | \"right\";\n\nexport interface SidebarContextValue {\n\t/**\n\t * Whether the sidebar is currently collapsed.\n\t */\n\tcollapsed: boolean;\n\t/**\n\t * Callback to update the collapsed state.\n\t */\n\tsetCollapsed: (next: boolean) => void;\n\t/**\n\t * Which edge the sidebar occupies.\n\t */\n\tside: SidebarSide;\n\t/**\n\t * Whether the sidebar is currently displaying a loading skeleton.\n\t */\n\tloading: boolean;\n\t/**\n\t * Whether the sidebar rail expands on pointer hover.\n\t */\n\tpeek: boolean;\n\t/**\n\t * Whether the sidebar is actively hovering in peek preview mode.\n\t */\n\tpeeking: boolean;\n\t/**\n\t * Callback to update the peek preview state.\n\t */\n\tsetPeeking: (next: boolean) => void;\n\t/**\n\t * Whether the sidebar is rendering as a modal overlay drawer instead of in-flow layout chrome.\n\t */\n\toverlay: boolean;\n\t/**\n\t * Current expanded width in pixels, clamped between 180 and 400.\n\t */\n\twidth: number;\n\t/**\n\t * Callback to update the sidebar width. Value is clamped between 180 and 400 pixels.\n\t */\n\tsetWidth: (next: number) => void;\n\t/**\n\t * Reference to the last active element that held focus before opening the sidebar drawer.\n\t */\n\tlastFocusRef: RefObject<HTMLElement | null>;\n}\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\n/**\n * Accesses the sidebar context value. Must be used within a `SidebarProvider`; throws an error if called outside.\n * Returns the active sidebar state and control callbacks.\n */\nexport function useSidebar(): SidebarContextValue {\n\tconst context = useContext(SidebarContext);\n\tif (!context) {\n\t\tthrow new Error(\"useSidebar must be used within SidebarProvider\");\n\t}\n\treturn context;\n}\n\nexport type SidebarProviderProps = {\n\t/**\n\t * The controlled collapsed state.\n\t */\n\tcollapsed?: boolean;\n\t/**\n\t * The uncontrolled initial collapsed state.\n\t * @default false\n\t */\n\tdefaultCollapsed?: boolean;\n\t/**\n\t * Called when the collapsed state changes.\n\t */\n\tonCollapsedChange?: (collapsed: boolean) => void;\n\t/**\n\t * Which edge the sidebar occupies.\n\t * @default left\n\t */\n\tside?: SidebarSide;\n\t/**\n\t * Replace the nav with a loading skeleton.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * Expand the collapsed rail on hover.\n\t * @default false\n\t */\n\tpeek?: boolean;\n\t/**\n\t * Render as an overlay instead of in-flow chrome.\n\t * @default false\n\t */\n\toverlay?: boolean;\n\t/**\n\t * Initial expanded width in pixels, clamped between 180 and 400.\n\t * @default 260\n\t */\n\tdefaultWidth?: number;\n\t/**\n\t * Sidebar chrome and page content.\n\t */\n\tchildren: ReactNode;\n};\n\nexport function SidebarProvider({\n\tcollapsed,\n\tdefaultCollapsed = false,\n\tonCollapsedChange,\n\tside = \"left\",\n\tloading = false,\n\tpeek = false,\n\toverlay = false,\n\tdefaultWidth = 260,\n\tchildren,\n}: SidebarProviderProps) {\n\tconst [uncontrolled, setUncontrolled] = useState(defaultCollapsed);\n\tconst [peeking, setPeeking] = useState(false);\n\tconst [width, setWidthState] = useState(() => clampSidebarWidth(defaultWidth));\n\tconst setWidth = useCallback((next: number) => {\n\t\tsetWidthState(clampSidebarWidth(next));\n\t}, []);\n\tconst lastFocusRef = useRef<HTMLElement | null>(null);\n\tconst prevCollapsed = useRef(collapsed ?? defaultCollapsed);\n\tconst prevOverlay = useRef(overlay);\n\tconst resolved = collapsed ?? uncontrolled;\n\tuseLayoutEffect(() => {\n\t\tif (\n\t\t\toverlay &&\n\t\t\t!resolved &&\n\t\t\t(prevCollapsed.current || !prevOverlay.current) &&\n\t\t\tdocument.activeElement instanceof HTMLElement\n\t\t) {\n\t\t\tlastFocusRef.current = document.activeElement;\n\t\t}\n\t\tprevCollapsed.current = resolved;\n\t\tprevOverlay.current = overlay;\n\t});\n\tconst setCollapsed = useCallback(\n\t\t(next: boolean) => {\n\t\t\tif (!next && document.activeElement instanceof HTMLElement) {\n\t\t\t\tlastFocusRef.current = document.activeElement;\n\t\t\t}\n\t\t\tif (collapsed === undefined) {\n\t\t\t\tsetUncontrolled(next);\n\t\t\t}\n\t\t\tonCollapsedChange?.(next);\n\t\t},\n\t\t[collapsed, onCollapsedChange],\n\t);\n\treturn (\n\t\t<SidebarContext.Provider\n\t\t\tvalue={{\n\t\t\t\tcollapsed: resolved,\n\t\t\t\tsetCollapsed,\n\t\t\t\tside,\n\t\t\t\tloading,\n\t\t\t\tpeek,\n\t\t\t\tpeeking,\n\t\t\t\tsetPeeking,\n\t\t\t\toverlay,\n\t\t\t\twidth,\n\t\t\t\tsetWidth,\n\t\t\t\tlastFocusRef,\n\t\t\t}}\n\t\t>\n\t\t\t{children}\n\t\t</SidebarContext.Provider>\n\t);\n}\n\nexport type SidebarProps = HTMLAttributes<HTMLElement> & {\n\t/**\n\t * Collapse the rail when no provider is present.\n\t * @default false\n\t */\n\tcollapsed?: boolean;\n};\n\nfunction clampSidebarWidth(next: number) {\n\treturn Math.min(400, Math.max(180, next));\n}\n\nfunction SidebarResize({\n\tside,\n\twidth,\n\tonWidth,\n}: {\n\tside: SidebarSide;\n\twidth: number;\n\tonWidth: (next: number) => void;\n}) {\n\tconst onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n\t\tevent.preventDefault();\n\t\tevent.currentTarget.setPointerCapture(event.pointerId);\n\t\tconst startX = event.clientX;\n\t\tconst startWidth = width;\n\t\tconst target = event.currentTarget;\n\t\tconst onMove = (move: PointerEvent) => {\n\t\t\tconst delta = side === \"right\" ? startX - move.clientX : move.clientX - startX;\n\t\t\tonWidth(clampSidebarWidth(startWidth + delta));\n\t\t};\n\t\tconst onUp = () => {\n\t\t\ttarget.removeEventListener(\"pointermove\", onMove);\n\t\t\ttarget.removeEventListener(\"pointerup\", onUp);\n\t\t\ttarget.removeEventListener(\"pointercancel\", onUp);\n\t\t};\n\t\ttarget.addEventListener(\"pointermove\", onMove);\n\t\ttarget.addEventListener(\"pointerup\", onUp);\n\t\ttarget.addEventListener(\"pointercancel\", onUp);\n\t};\n\treturn (\n\t\t<div\n\t\t\trole=\"separator\"\n\t\t\taria-orientation=\"vertical\"\n\t\t\taria-valuenow={width}\n\t\t\taria-valuemin={180}\n\t\t\taria-valuemax={400}\n\t\t\taria-label=\"Resize sidebar\"\n\t\t\ttabIndex={0}\n\t\t\tclassName={cn(\n\t\t\t\t\"absolute top-0 h-full w-basalt-1 cursor-col-resize bg-transparent\",\n\t\t\t\tside === \"right\" ? \"left-0\" : \"right-0\",\n\t\t\t)}\n\t\t\tonPointerDown={onPointerDown}\n\t\t\tonKeyDown={(event) => {\n\t\t\t\tif (event.key !== \"ArrowLeft\" && event.key !== \"ArrowRight\") {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tevent.preventDefault();\n\t\t\t\tconst dir = event.key === \"ArrowRight\" ? 1 : -1;\n\t\t\t\tconst delta = side === \"right\" ? -dir * 8 : dir * 8;\n\t\t\t\tonWidth(clampSidebarWidth(width + delta));\n\t\t\t}}\n\t\t/>\n\t);\n}\n\nexport function Sidebar({\n\tcollapsed: collapsedProp,\n\tclassName,\n\tchildren,\n\tonMouseEnter,\n\tonMouseLeave,\n\tstyle,\n\t...props\n}: SidebarProps) {\n\tconst context = useContext(SidebarContext);\n\tconst collapsed = context\n\t\t? context.collapsed && !(context.peek && context.peeking)\n\t\t: (collapsedProp ?? false);\n\tconst side = context?.side ?? \"left\";\n\tconst overlay = context?.overlay ?? false;\n\tconst width = context?.width ?? 260;\n\tconst body = context?.loading ? (\n\t\t<div\n\t\t\tclassName=\"flex flex-col gap-basalt-space-lg p-basalt-space-lg\"\n\t\t\trole=\"status\"\n\t\t\taria-live=\"polite\"\n\t\t>\n\t\t\t<SkeletonLine />\n\t\t\t<SkeletonLine />\n\t\t\t<SkeletonLine />\n\t\t</div>\n\t) : (\n\t\tchildren\n\t);\n\tconst resize =\n\t\tcontext && !collapsed ? (\n\t\t\t<SidebarResize side={side} width={context.width} onWidth={context.setWidth} />\n\t\t) : null;\n\tconst frameClass = cn(\n\t\tBASALT_UI_CLASS,\n\t\t\"relative flex shrink-0 flex-col bg-basalt-background text-basalt-base text-basalt-foreground\",\n\t\tOVERLAY_MOTION,\n\t\tclassName,\n\t);\n\tif (overlay && context) {\n\t\treturn (\n\t\t\t<Dialog open={!context.collapsed} onOpenChange={(open) => context.setCollapsed(!open)}>\n\t\t\t\t<DialogPortal>\n\t\t\t\t\t<DialogOverlay />\n\t\t\t\t\t<DialogPrimitive.Content\n\t\t\t\t\t\tdata-basalt-sidebar=\"\"\n\t\t\t\t\t\taria-label=\"Sidebar\"\n\t\t\t\t\t\tdata-overlay=\"\"\n\t\t\t\t\t\tdata-side={side}\n\t\t\t\t\t\taria-busy={context.loading || undefined}\n\t\t\t\t\t\tonMouseEnter={onMouseEnter}\n\t\t\t\t\t\tonMouseLeave={onMouseLeave}\n\t\t\t\t\t\tref={(node) => {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tnode &&\n\t\t\t\t\t\t\t\tdocument.activeElement instanceof HTMLElement &&\n\t\t\t\t\t\t\t\t!node.contains(document.activeElement)\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tcontext.lastFocusRef.current = document.activeElement;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonOpenAutoFocus={(event) => {\n\t\t\t\t\t\t\tconst from = \"relatedTarget\" in event ? event.relatedTarget : null;\n\t\t\t\t\t\t\tif (from instanceof HTMLElement) {\n\t\t\t\t\t\t\t\tcontext.lastFocusRef.current = from;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonCloseAutoFocus={(event) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tcontext.lastFocusRef.current?.focus();\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\tframeClass,\n\t\t\t\t\t\t\tOVERLAY_LAYER,\n\t\t\t\t\t\t\t\"fixed inset-y-0 overflow-hidden shadow-md\",\n\t\t\t\t\t\t\tside === \"right\" ? \"right-0\" : \"left-0\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tstyle={{ width, ...style }}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t>\n\t\t\t\t\t\t{body}\n\t\t\t\t\t\t{resize}\n\t\t\t\t\t</DialogPrimitive.Content>\n\t\t\t\t</DialogPortal>\n\t\t\t</Dialog>\n\t\t);\n\t}\n\treturn (\n\t\t<aside\n\t\t\tdata-basalt-sidebar=\"\"\n\t\t\tdata-collapsed={collapsed ? \"\" : undefined}\n\t\t\tdata-side={side}\n\t\t\taria-busy={context?.loading || undefined}\n\t\t\tonMouseEnter={(event) => {\n\t\t\t\tif (context?.peek && context.collapsed) {\n\t\t\t\t\tcontext.setPeeking(true);\n\t\t\t\t}\n\t\t\t\tonMouseEnter?.(event);\n\t\t\t}}\n\t\t\tonMouseLeave={(event) => {\n\t\t\t\tif (context?.peek) {\n\t\t\t\t\tcontext.setPeeking(false);\n\t\t\t\t}\n\t\t\t\tonMouseLeave?.(event);\n\t\t\t}}\n\t\t\tclassName={cn(\n\t\t\t\tframeClass,\n\t\t\t\t\"sticky overflow-hidden transition-[width] basalt-motion duration-basalt-normal ease-basalt\",\n\t\t\t\tside === \"right\" ? \"order-last\" : undefined,\n\t\t\t\tcollapsed && \"w-basalt-rail\",\n\t\t\t)}\n\t\t\tstyle={!collapsed ? { width, ...style } : style}\n\t\t\t{...props}\n\t\t>\n\t\t\t{body}\n\t\t\t{resize}\n\t\t</aside>\n\t);\n}\n\nconst SIDEBAR_ROW_CLASS =\n\t\"min-h-[calc(var(--basalt-line-row)+2*var(--basalt-space-lg))] py-basalt-space-lg\";\n\nexport interface SidebarHeaderProps extends HTMLAttributes<HTMLDivElement> {}\n\nexport function SidebarHeader({ className, ...props }: SidebarHeaderProps) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"sidebar-header\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-basalt-14 shrink-0 items-center gap-basalt-row-gap px-basalt-nav-inset\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Props for `SidebarSearch`. Renders a native `<button>` element and accepts all standard button HTML attributes and click handlers.\n */\nexport interface SidebarSearchProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n\t/**\n\t * Shortcut key display label rendered inside the trailing kbd tag. Note: this is a visual label only and does not register a global keyboard shortcut.\n\t * @default \"⌘K\"\n\t */\n\tshortcut?: string;\n}\n\nexport function SidebarSearch({\n\tshortcut = \"⌘K\",\n\tclassName,\n\tchildren,\n\t...props\n}: SidebarSearchProps) {\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\tNAV_ROW_CLASS,\n\t\t\t\tSIDEBAR_ROW_CLASS,\n\t\t\t\t\"w-full cursor-pointer bg-basalt-secondary transition-colors basalt-motion hover:bg-basalt-hover\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<Search className=\"h-basalt-4 w-basalt-4 text-basalt-muted-foreground\" strokeWidth={1.5} />\n\t\t\t<span className=\"flex-1 text-left text-basalt-base text-basalt-muted-foreground\">\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t\t<kbd className=\"pointer-events-none hidden rounded-basalt-sm border border-basalt-border bg-basalt-card px-basalt-space-md py-basalt-space-xs text-basalt-sm font-medium text-basalt-muted-foreground sm:inline-block\">\n\t\t\t\t{shortcut}\n\t\t\t</kbd>\n\t\t</button>\n\t);\n}\n\nexport interface SidebarNavProps extends HTMLAttributes<HTMLElement> {}\n\nexport function SidebarNav({ className, ...props }: SidebarNavProps) {\n\tconst highlightRef = useHoverHighlight(undefined, { restoreOnPointerLeave: false });\n\treturn (\n\t\t<nav\n\t\t\tref={highlightRef}\n\t\t\tdata-slot=\"sidebar-nav\"\n\t\t\tclassName={cn(\n\t\t\t\tNAV_LIST_CLASS,\n\t\t\t\t\"min-h-0 flex-1 flex-col overflow-y-auto overscroll-y-contain\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport interface SidebarPartitionProps extends HTMLAttributes<HTMLParagraphElement> {}\n\nexport function SidebarPartition({ className, ...props }: SidebarPartitionProps) {\n\treturn (\n\t\t<p\n\t\t\tdata-slot=\"sidebar-partition\"\n\t\t\tclassName={cn(\n\t\t\t\t\"shrink-0 px-basalt-row-x pt-basalt-layout pb-basalt-space-lg text-basalt-sm font-semibold tracking-wide text-basalt-foreground uppercase\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type SidebarItemProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n\t/**\n\t * Mark the item as the current page.\n\t * @default false\n\t */\n\tactive?: boolean;\n};\n\nexport function SidebarItem({ active = false, className, ...props }: SidebarItemProps) {\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\taria-current={active ? \"page\" : undefined}\n\t\t\tdata-basalt-hover-item=\"\"\n\t\t\tdata-sidebar-row=\"\"\n\t\t\tdata-hover-selected={active}\n\t\t\tclassName={cn(NAV_ITEM_CLASS, SIDEBAR_ROW_CLASS, \"w-full\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Props for `SidebarIconItem`. Accepts standard button HTML attributes. The caller is responsible for providing accessible labeling via `aria-label` or `aria-labelledby` as icon buttons do not automatically generate accessible names.\n */\nexport interface SidebarIconItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n\t/**\n\t * Mark the icon button as active page item.\n\t * @default false\n\t */\n\tactive?: boolean;\n}\n\nexport function SidebarIconItem({ active = false, className, ...props }: SidebarIconItemProps) {\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\taria-current={active ? \"page\" : undefined}\n\t\t\tdata-basalt-hover-item=\"\"\n\t\t\tdata-sidebar-row=\"\"\n\t\t\tdata-hover-selected={active}\n\t\t\tclassName={cn(\n\t\t\t\tNAV_ITEM_CLASS,\n\t\t\t\tSIDEBAR_ROW_CLASS,\n\t\t\t\t\"relative w-basalt-control justify-center\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Props for `SidebarGroup`. Uncontrolled collapsible section that accepts only the documented properties. It does not accept controlled open props or arbitrary DOM attributes.\n */\nexport interface SidebarGroupProps {\n\t/**\n\t * Section label displayed on the group trigger.\n\t */\n\tlabel: ReactNode;\n\t/**\n\t * Uncontrolled initial open state for the collapsible group.\n\t * @default true\n\t */\n\tdefaultOpen?: boolean;\n\t/**\n\t * Navigation items rendered inside the group.\n\t */\n\tchildren: ReactNode;\n}\n\nexport function SidebarGroup({ label, defaultOpen = true, children }: SidebarGroupProps) {\n\tconst [open, setOpen] = useState(defaultOpen);\n\treturn (\n\t\t<Collapsible\n\t\t\topen={open}\n\t\t\tonOpenChange={setOpen}\n\t\t\tdata-slot=\"sidebar-group\"\n\t\t\tclassName=\"shrink-0 pt-basalt-layout-sm\"\n\t\t>\n\t\t\t<CollapsibleTrigger asChild>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tdata-slot=\"sidebar-group-label\"\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"flex w-full cursor-pointer items-center justify-between gap-basalt-row-gap rounded-basalt-md px-basalt-row-x py-basalt-space-lg text-left text-basalt-sm font-semibold leading-basalt-row tracking-wide text-basalt-muted-foreground uppercase transition-colors basalt-motion hover:text-basalt-foreground\",\n\t\t\t\t\t\tFOCUS_INSET,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"min-w-0 truncate\">{label}</span>\n\t\t\t\t\t<ChevronUp\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"h-basalt-4 w-basalt-4 text-basalt-muted-foreground transition-transform basalt-motion duration-basalt-normal\",\n\t\t\t\t\t\t\tOVERLAY_MOTION,\n\t\t\t\t\t\t\t!open && \"rotate-180\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t\t/>\n\t\t\t\t</button>\n\t\t\t</CollapsibleTrigger>\n\t\t\t<CollapsibleContent unstyled>\n\t\t\t\t<div className=\"flex flex-col gap-basalt-nav-gap pt-basalt-nav-gap\">{children}</div>\n\t\t\t</CollapsibleContent>\n\t\t</Collapsible>\n\t);\n}\n\nexport interface SidebarFooterProps extends HTMLAttributes<HTMLDivElement> {}\n\nexport function SidebarFooter({ className, ...props }: SidebarFooterProps) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"sidebar-footer\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex shrink-0 flex-col gap-basalt-content-gap px-basalt-nav-inset py-basalt-nav-inset\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport interface SidebarUserProps {\n\t/**\n\t * User display name.\n\t */\n\tname: ReactNode;\n\t/**\n\t * Optional user email or secondary text.\n\t */\n\temail?: ReactNode;\n\t/**\n\t * Avatar element slot.\n\t */\n\tavatar?: ReactNode;\n\t/**\n\t * Trailing action slot (e.g. settings or logout button).\n\t */\n\taction?: ReactNode;\n\t/**\n\t * Additional CSS class name.\n\t */\n\tclassName?: string;\n}\n\nexport function SidebarUser({ name, email, avatar, action, className }: SidebarUserProps) {\n\treturn (\n\t\t<div className={cn(\"flex items-center gap-basalt-space-lg\", className)}>\n\t\t\t{avatar}\n\t\t\t<div className=\"min-w-0 flex-1\">\n\t\t\t\t<p className=\"truncate text-basalt-base font-medium text-basalt-foreground\">{name}</p>\n\t\t\t\t{email ? (\n\t\t\t\t\t<p className=\"truncate text-basalt-sm text-basalt-muted-foreground\">{email}</p>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t\t{action}\n\t\t</div>\n\t);\n}\n\nexport interface ContentIslandProps extends HTMLAttributes<HTMLDivElement> {\n\t/** Mobile surface treatment; desktop remains an inset L1 island. @default \"inset\" */\n\tmobileSurface?: \"inset\" | \"edge-to-edge\";\n}\n\nexport function ContentIsland({\n\tmobileSurface = \"inset\",\n\tclassName,\n\t...props\n}: ContentIslandProps) {\n\treturn (\n\t\t<div\n\t\t\tdata-basalt-surface-root=\"\"\n\t\t\tdata-basalt-island={mobileSurface}\n\t\t\tclassName={cn(\n\t\t\t\t\"min-h-0 min-w-0 flex-1 bg-basalt-card text-basalt-card-foreground md:rounded-basalt-island md:p-basalt-layout-lg lg:px-basalt-layout-xl\",\n\t\t\t\tmobileSurface === \"inset\"\n\t\t\t\t\t? \"rounded-basalt-lg p-basalt-layout shadow-sm ring-1 ring-basalt-border/40\"\n\t\t\t\t\t: \"md:shadow-sm md:ring-1 md:ring-basalt-border/40\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;AAyEA,IAAMC,IAAiBC,EAA0C,IAAI;AAMrE,SAAgBC,IAAkC;CACjD,IAAMC,IAAUC,EAAWJ,CAAc;CACzC,IAAI,CAACG,GACJ,MAAU,MAAM,gDAAgD;CAEjE,OAAOA;AACR;AA+CA,SAAgBE,EAAgB,EAC/B,cACA,sBAAmB,IACnB,sBACA,UAAO,QACP,aAAU,IACV,UAAO,IACP,aAAU,IACV,kBAAe,KACf,eACwB;CACxB,IAAM,CAACC,GAAcC,KAAmBC,EAASC,CAAgB,GAC3D,CAACC,GAASC,KAAcH,EAAS,EAAK,GACtC,CAACI,GAAOC,KAAiBL,QAAeM,EAAkBC,CAAY,CAAC,GACvEC,IAAWC,GAAa,MAAiB;EAC9C,EAAcH,EAAkBI,CAAI,CAAC;CACtC,GAAG,CAAC,CAAC,GACCC,IAAeC,EAA2B,IAAI,GAC9CC,IAAgBD,EAAOE,KAAab,CAAgB,GACpDc,IAAcH,EAAOI,CAAO,GAC5BC,IAAWH,KAAahB;CAC9B,QAAsB;EAUrB,AARCkB,KACA,CAACC,MACAJ,EAAc,WAAW,CAACE,EAAY,YACvC,SAAS,yBAAyB,gBAElC,EAAa,UAAU,SAAS,gBAEjC,EAAc,UAAUE,GACxB,EAAY,UAAUD;CACvB,CAAC;CACD,IAAME,IAAeT,GACnB,MAAkB;EAOlB,AANI,CAACC,KAAQ,SAAS,yBAAyB,gBAC9C,EAAa,UAAU,SAAS,gBAE7BI,MAAc,KAAA,KACjBf,EAAgBW,CAAI,GAErBS,IAAoBT,CAAI;CACzB,GACA,CAACI,GAAWK,CAAiB,CAC9B;CACA,OACC,kBAAC3B,EAAe,UAAhB;EACC,OAAO;GACN,WAAWyB;GACX;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACD;EAEC;CACuB,CAAA;AAE3B;AAUA,SAASX,EAAkB,GAAc;CACxC,OAAO,KAAK,IAAI,KAAK,KAAK,IAAI,KAAKI,CAAI,CAAC;AACzC;AAEA,SAASU,EAAc,EACtB,SACA,UACA,cAKE;CAoBF,OACC,kBAAC,OAAD;EACC,MAAK;EACL,oBAAiB;EACjB,iBAAehB;EACf,iBAAe;EACf,iBAAe;EACf,cAAW;EACX,UAAU;EACV,WAAWiB,EACV,qEACAC,MAAS,UAAU,WAAW,SAC/B;EACe,gBAhCM,MAA6C;GAEnE,AADAC,EAAM,eAAe,GACrBA,EAAM,cAAc,kBAAkBA,EAAM,SAAS;GACrD,IAAMC,IAASD,EAAM,SACfE,IAAarB,GACbsB,IAASH,EAAM,eACfI,KAAU,MAAuB;IACtC,IAAMC,IAAQN,MAAS,UAAUE,IAASK,EAAK,UAAUA,EAAK,UAAUL;IACxE,EAAQlB,EAAkBmB,IAAaG,CAAK,CAAC;GAC9C,GACME,UAAa;IAGlB,AAFAJ,EAAO,oBAAoB,eAAeC,CAAM,GAChDD,EAAO,oBAAoB,aAAaI,CAAI,GAC5CJ,EAAO,oBAAoB,iBAAiBI,CAAI;GACjD;GAGA,AAFAJ,EAAO,iBAAiB,eAAeC,CAAM,GAC7CD,EAAO,iBAAiB,aAAaI,CAAI,GACzCJ,EAAO,iBAAiB,iBAAiBI,CAAI;EAC9C;EAeE,YAAY,MAAU;GACrB,IAAIP,EAAM,QAAQ,eAAeA,EAAM,QAAQ,cAC9C;GAED,EAAM,eAAe;GACrB,IAAMQ,IAAMR,EAAM,QAAQ,eAAe,IAAI;GAE7C,EAAQjB,EAAkBF,KADZkB,MAAS,UAAU,CAACS,IAAM,IAAIA,IAAM,EACX,CAAC;EACzC;CACA,CAAA;AAEH;AAEA,SAAgBC,EAAQ,EACvB,WAAWC,GACX,cACA,aACA,iBACA,iBACA,UACA,GAAGC,KACa;CAChB,IAAMvC,IAAUC,EAAWJ,CAAc,GACnCsB,IAAYnB,IACfA,EAAQ,aAAa,EAAEA,EAAQ,QAAQA,EAAQ,WAC9CsC,KAAiB,IACfX,IAAO3B,GAAS,QAAQ,QACxBqB,IAAUrB,GAAS,WAAW,IAC9BS,IAAQT,GAAS,SAAS,KAC1BwC,IAAOxC,GAAS,UACrB,kBAAC,OAAD;EACC,WAAU;EACV,MAAK;EACL,aAAU;EAHX,UAAA;GAKC,kBAACyC,GAAD,CAAe,CAAA;GACf,kBAACA,GAAD,CAAe,CAAA;GACf,kBAACA,GAAD,CAAe,CAAA;EACX;CAEL,CAAA,IAAAC,GAEKC,IACL3C,KAAW,CAACmB,IACX,kBAACM,GAAD;EAAqB;EAAM,OAAOzB,EAAQ;EAAO,SAASA,EAAQ;CAAW,CAAA,IAC1E,MACC4C,IAAalB,EAClBmB,GACA,gGACAC,GACAC,CACD;CAiDA,OAhDI1B,KAAWrB,IAEb,kBAACgD,GAAD;EAAQ,MAAM,CAAChD,EAAQ;EAAW,eAAe,MAASA,EAAQ,aAAa,CAACiD,CAAI;EACnF,UAAA,kBAACC,GAAD,EAAA,UAAA,CACC,kBAACC,GAAD,CAAgB,CAAA,GAChB,kBAACvD,EAAgB,SAAjB;GACC,uBAAoB;GACpB,cAAW;GACX,gBAAa;GACb,aAAW+B;GACX,aAAW3B,EAAQ,WAAW,KAAA;GAChB;GACA;GACd,MAAM,MAAS;IACd,AACCoD,KACA,SAAS,yBAAyB,eAClC,CAACA,EAAK,SAAS,SAAS,aAAa,MAErC,EAAQ,aAAa,UAAU,SAAS;GAE1C;GACA,kBAAkB,MAAU;IAC3B,IAAMC,IAAO,mBAAmBzB,IAAQA,EAAM,gBAAgB;IAC9D,AAAIyB,aAAgB,gBACnB,EAAQ,aAAa,UAAUA;GAEjC;GACA,mBAAmB,MAAU;IAE5B,AADAzB,EAAM,eAAe,GACrB5B,EAAQ,aAAa,SAAS,MAAM;GACrC;GACA,WAAW0B,EACVkB,GACAU,GACA,6CACA3B,MAAS,UAAU,YAAY,QAChC;GACA,OAAO;IAAE;IAAO,GAAG4B;GAAM;GACzB,GAAIhB;GAlCL,UAAA,CAoCEC,GACAG,CACuB;EACZ,CAAA,CAAA,EAAA,CAAA;CACP,CAAA,IAIT,kBAAC,SAAD;EACC,uBAAoB;EACpB,kBAAgBxB,IAAY,KAAK,KAAA;EACjC,aAAWQ;EACX,aAAW3B,GAAS,WAAW,KAAA;EAC/B,eAAe,MAAU;GAIxB,AAHIA,GAAS,QAAQA,EAAQ,aAC5BA,EAAQ,WAAW,EAAI,GAExBwD,IAAe5B,CAAK;EACrB;EACA,eAAe,MAAU;GAIxB,AAHI5B,GAAS,QACZA,EAAQ,WAAW,EAAK,GAEzByD,IAAe7B,CAAK;EACrB;EACA,WAAWF,EACVkB,GACA,8FACAjB,MAAS,UAAU,eAAe,KAAA,GAClCR,KAAa,eACd;EACA,OAAQA,IAAkCoC,IAAtB;GAAE;GAAO,GAAGA;EAAM;EACtC,GAAIhB;EAxBL,UAAA,CA0BEC,GACAG,CACK;;AAET;AAEA,IAAMe,IACL;AAID,SAAgBC,EAAc,EAAE,cAAW,GAAGpB,KAA6B;CAC1E,OACC,kBAAC,OAAD;EACC,aAAU;EACV,WAAWb,EACV,iFACAqB,CACD;EACA,GAAIR;CACJ,CAAA;AAEH;AAaA,SAAgBqB,EAAc,EAC7B,cAAW,MACX,cACA,aACA,GAAGrB,KACmB;CACtB,OACC,kBAAC,UAAD;EACC,MAAK;EACL,WAAWb,EACVmB,GACAgB,GACAH,GACA,mGACAX,CACD;EACA,GAAIR;EATL,UAAA;GAWC,kBAACuB,GAAD;IAAQ,WAAU;IAAqD,aAAa;GAAM,CAAA;GAC1F,kBAAC,QAAD;IAAM,WAAU;IACd;GACI,CAAA;GACN,kBAAC,OAAD;IAAK,WAAU;IACb,UAAAC;GACG,CAAA;EACE;;AAEV;AAIA,SAAgBC,EAAW,EAAE,cAAW,GAAGzB,KAA0B;CACpE,IAAM0B,IAAeC,EAAkB,KAAA,GAAW,EAAE,uBAAuB,GAAM,CAAC;CAClF,OACC,kBAAC,OAAD;EACC,KAAKD;EACL,aAAU;EACV,WAAWvC,EACVyC,GACA,gEACApB,CACD;EACA,GAAIR;CACJ,CAAA;AAEH;AAIA,SAAgB6B,EAAiB,EAAE,cAAW,GAAG7B,KAAgC;CAChF,OACC,kBAAC,KAAD;EACC,aAAU;EACV,WAAWb,EACV,4IACAqB,CACD;EACA,GAAIR;CACJ,CAAA;AAEH;AAUA,SAAgB8B,EAAY,EAAE,YAAS,IAAO,cAAW,GAAG9B,KAA2B;CACtF,OACC,kBAAC,UAAD;EACC,MAAK;EACL,gBAAc+B,IAAS,SAAS,KAAA;EAChC,0BAAuB;EACvB,oBAAiB;EACjB,uBAAqBA;EACrB,WAAW5C,EAAG6C,GAAgBb,GAAmB,UAAUX,CAAS;EACpE,GAAIR;CACJ,CAAA;AAEH;AAaA,SAAgBiC,EAAgB,EAAE,YAAS,IAAO,cAAW,GAAGjC,KAA+B;CAC9F,OACC,kBAAC,UAAD;EACC,MAAK;EACL,gBAAc+B,IAAS,SAAS,KAAA;EAChC,0BAAuB;EACvB,oBAAiB;EACjB,uBAAqBA;EACrB,WAAW5C,EACV6C,GACAb,GACA,4CACAX,CACD;EACA,GAAIR;CACJ,CAAA;AAEH;AAqBA,SAAgBkC,EAAa,EAAE,UAAO,iBAAc,IAAM,eAA+B;CACxF,IAAM,CAACxB,GAAMyB,KAAWrE,EAASsE,CAAW;CAC5C,OACC,kBAACC,GAAD;EACO;EACN,cAAcF;EACd,aAAU;EACV,WAAU;EAJX,UAAA,CAMC,kBAACG,GAAD;GAAoB,SAAA;GACnB,UAAA,kBAAC,UAAD;IACC,MAAK;IACL,aAAU;IACV,WAAWnD,EACV,+SACAoD,CACD;IAND,UAAA,CAQC,kBAAC,QAAD;KAAM,WAAU;KAAoB,UAAAC;IAAY,CAAA,GAChD,kBAACC,GAAD;KACC,WAAWtD,EACV,gHACAoB,GACA,CAACG,KAAQ,YACV;KACA,aAAa;IACb,CAAA,CACM;;EACW,CAAA,GACpB,kBAACgC,GAAD;GAAoB,UAAA;GACnB,UAAA,kBAAC,OAAD;IAAK,WAAU;IAAsD;GAAc,CAAA;EAChE,CAAA,CACR;;AAEf;AAIA,SAAgBC,EAAc,EAAE,cAAW,GAAG3C,KAA6B;CAC1E,OACC,kBAAC,OAAD;EACC,aAAU;EACV,WAAWb,EACV,yFACAqB,CACD;EACA,GAAIR;CACJ,CAAA;AAEH;AAyBA,SAAgB4C,EAAY,EAAE,SAAM,UAAO,WAAQ,WAAQ,gBAA+B;CACzF,OACC,kBAAC,OAAD;EAAK,WAAWzD,EAAG,yCAAyCqB,CAAS;EAArE,UAAA;GACEqC;GACD,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACC,kBAAC,KAAD;KAAG,WAAU;KAAgE,UAAAC;IAAQ,CAAA,GACpFC,IACA,kBAAC,KAAD;KAAG,WAAU;KAAwD,UAAAA;IAAS,CAAA,IAC3E,IACA;;GACJC;EACG;;AAEP;AAOA,SAAgBC,EAAc,EAC7B,mBAAgB,SAChB,cACA,GAAGjD,KACmB;CACtB,OACC,kBAAC,OAAD;EACC,4BAAyB;EACzB,sBAAoBkD;EACpB,WAAW/D,EACV,2IACA+D,MAAkB,UACf,6EACA,mDACH1C,CACD;EACA,GAAIR;CACJ,CAAA;AAEH"}
+{"version":3,"file":"sidebar.js","names":["DialogPrimitive","SidebarContext","createContext","useSidebar","context","useContext","SidebarProvider","uncontrolled","setUncontrolled","useState","defaultCollapsed","peeking","setPeeking","width","setWidthState","clampSidebarWidth","defaultWidth","setWidth","useCallback","next","lastFocusRef","useRef","prevCollapsed","collapsed","prevOverlay","overlay","resolved","setCollapsed","onCollapsedChange","SidebarResize","cn","side","event","startX","startWidth","target","onMove","delta","move","onUp","dir","Sidebar","collapsedProp","props","body","SkeletonLine","children","resize","resizable","frameClass","BASALT_UI_CLASS","OVERLAY_MOTION","className","Dialog","open","DialogPortal","DialogOverlay","node","from","OVERLAY_LAYER","style","onMouseEnter","onMouseLeave","SIDEBAR_ROW_CLASS","SidebarHeader","SidebarBrand","logo","name","version","action","SidebarToggle","ariaLabel","label","expandLabel","collapseLabel","TooltipProvider","Tooltip","TooltipTrigger","Button","onClick","PanelLeft","TooltipContent","SidebarSearch","NAV_ROW_CLASS","Search","shortcut","SidebarNav","highlightRef","useHoverHighlight","NAV_LIST_CLASS","SidebarPartition","rejectDisabledAsChild","SidebarItem","rowClass","NAV_ITEM_CLASS","_className","linkProps","Link","active","buttonProps","sharedProps","asChild","Slot","SidebarIconItem","SidebarGroup","setOpen","defaultOpen","Collapsible","CollapsibleTrigger","FOCUS_INSET","ChevronUp","CollapsibleContent","SidebarFooter","SidebarUser","avatar","email","ContentIsland","mobileSurface"],"sources":["../../src/components/sidebar.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { ChevronUp, PanelLeft, Search } from \"lucide-react\";\nimport {\n\ttype AnchorHTMLAttributes,\n\ttype ButtonHTMLAttributes,\n\tcreateContext,\n\ttype HTMLAttributes,\n\ttype ReactNode,\n\ttype PointerEvent as ReactPointerEvent,\n\ttype RefObject,\n\tuseCallback,\n\tuseContext,\n\tuseLayoutEffect,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { NAV_ITEM_CLASS, NAV_LIST_CLASS, NAV_ROW_CLASS } from \"../utils/navigation\";\nimport { useHoverHighlight } from \"../utils/use-hover-highlight\";\nimport { Button, type ButtonProps } from \"./button\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"./collapsible\";\nimport { Dialog, DialogOverlay, DialogPortal } from \"./dialog\";\nimport { Link } from \"./link\";\nimport { FOCUS_INSET, OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\nimport { SkeletonLine } from \"./skeleton-line\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"./tooltip\";\n\nexport type SidebarSide = \"left\" | \"right\";\n\nexport interface SidebarContextValue {\n\t/**\n\t * Whether the sidebar is currently collapsed.\n\t */\n\tcollapsed: boolean;\n\t/**\n\t * Callback to update the collapsed state.\n\t */\n\tsetCollapsed: (next: boolean) => void;\n\t/**\n\t * Which edge the sidebar occupies.\n\t */\n\tside: SidebarSide;\n\t/**\n\t * Whether the sidebar is currently displaying a loading skeleton.\n\t */\n\tloading: boolean;\n\t/**\n\t * Whether the sidebar rail expands on pointer hover.\n\t */\n\tpeek: boolean;\n\t/**\n\t * Whether the sidebar is actively hovering in peek preview mode.\n\t */\n\tpeeking: boolean;\n\t/**\n\t * Callback to update the peek preview state.\n\t */\n\tsetPeeking: (next: boolean) => void;\n\t/**\n\t * Whether the sidebar is rendering as a modal overlay drawer instead of in-flow layout chrome.\n\t */\n\toverlay: boolean;\n\t/**\n\t * Current expanded width in pixels, clamped between 180 and 400.\n\t */\n\twidth: number;\n\t/**\n\t * Callback to update the sidebar width. Value is clamped between 180 and 400 pixels.\n\t */\n\tsetWidth: (next: number) => void;\n\t/**\n\t * Reference to the last active element that held focus before opening the sidebar drawer.\n\t */\n\tlastFocusRef: RefObject<HTMLElement | null>;\n}\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\n/**\n * Accesses the sidebar context value. Must be used within a `SidebarProvider`; throws an error if called outside.\n * Returns the active sidebar state and control callbacks.\n */\nexport function useSidebar(): SidebarContextValue {\n\tconst context = useContext(SidebarContext);\n\tif (!context) {\n\t\tthrow new Error(\"useSidebar must be used within SidebarProvider\");\n\t}\n\treturn context;\n}\n\nexport type SidebarProviderProps = {\n\t/**\n\t * The controlled collapsed state.\n\t */\n\tcollapsed?: boolean;\n\t/**\n\t * The uncontrolled initial collapsed state.\n\t * @default false\n\t */\n\tdefaultCollapsed?: boolean;\n\t/**\n\t * Called when the collapsed state changes.\n\t */\n\tonCollapsedChange?: (collapsed: boolean) => void;\n\t/**\n\t * Which edge the sidebar occupies.\n\t * @default left\n\t */\n\tside?: SidebarSide;\n\t/**\n\t * Replace the nav with a loading skeleton.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * Expand the collapsed rail on hover.\n\t * @default false\n\t */\n\tpeek?: boolean;\n\t/**\n\t * Render as an overlay instead of in-flow chrome.\n\t * @default false\n\t */\n\toverlay?: boolean;\n\t/**\n\t * Initial expanded width in pixels, clamped between 180 and 400.\n\t * @default 260\n\t */\n\tdefaultWidth?: number;\n\t/**\n\t * Sidebar chrome and page content.\n\t */\n\tchildren: ReactNode;\n};\n\nexport function SidebarProvider({\n\tcollapsed,\n\tdefaultCollapsed = false,\n\tonCollapsedChange,\n\tside = \"left\",\n\tloading = false,\n\tpeek = false,\n\toverlay = false,\n\tdefaultWidth = 260,\n\tchildren,\n}: SidebarProviderProps) {\n\tconst [uncontrolled, setUncontrolled] = useState(defaultCollapsed);\n\tconst [peeking, setPeeking] = useState(false);\n\tconst [width, setWidthState] = useState(() => clampSidebarWidth(defaultWidth));\n\tconst setWidth = useCallback((next: number) => {\n\t\tsetWidthState(clampSidebarWidth(next));\n\t}, []);\n\tconst lastFocusRef = useRef<HTMLElement | null>(null);\n\tconst prevCollapsed = useRef(collapsed ?? defaultCollapsed);\n\tconst prevOverlay = useRef(overlay);\n\tconst resolved = collapsed ?? uncontrolled;\n\tuseLayoutEffect(() => {\n\t\tif (\n\t\t\toverlay &&\n\t\t\t!resolved &&\n\t\t\t(prevCollapsed.current || !prevOverlay.current) &&\n\t\t\tdocument.activeElement instanceof HTMLElement\n\t\t) {\n\t\t\tlastFocusRef.current = document.activeElement;\n\t\t}\n\t\tprevCollapsed.current = resolved;\n\t\tprevOverlay.current = overlay;\n\t});\n\tconst setCollapsed = useCallback(\n\t\t(next: boolean) => {\n\t\t\tif (!next && document.activeElement instanceof HTMLElement) {\n\t\t\t\tlastFocusRef.current = document.activeElement;\n\t\t\t}\n\t\t\tif (collapsed === undefined) {\n\t\t\t\tsetUncontrolled(next);\n\t\t\t}\n\t\t\tonCollapsedChange?.(next);\n\t\t},\n\t\t[collapsed, onCollapsedChange],\n\t);\n\treturn (\n\t\t<SidebarContext.Provider\n\t\t\tvalue={{\n\t\t\t\tcollapsed: resolved,\n\t\t\t\tsetCollapsed,\n\t\t\t\tside,\n\t\t\t\tloading,\n\t\t\t\tpeek,\n\t\t\t\tpeeking,\n\t\t\t\tsetPeeking,\n\t\t\t\toverlay,\n\t\t\t\twidth,\n\t\t\t\tsetWidth,\n\t\t\t\tlastFocusRef,\n\t\t\t}}\n\t\t>\n\t\t\t{children}\n\t\t</SidebarContext.Provider>\n\t);\n}\n\nexport type SidebarProps = HTMLAttributes<HTMLElement> & {\n\t/**\n\t * Collapse the rail when no provider is present.\n\t * @default false\n\t */\n\tcollapsed?: boolean;\n\t/**\n\t * Show the resize handle for an expanded provider-backed sidebar.\n\t * @default true\n\t */\n\tresizable?: boolean;\n};\n\nfunction clampSidebarWidth(next: number) {\n\treturn Math.min(400, Math.max(180, next));\n}\n\nfunction SidebarResize({\n\tside,\n\twidth,\n\tonWidth,\n}: {\n\tside: SidebarSide;\n\twidth: number;\n\tonWidth: (next: number) => void;\n}) {\n\tconst onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n\t\tevent.preventDefault();\n\t\tevent.currentTarget.setPointerCapture(event.pointerId);\n\t\tconst startX = event.clientX;\n\t\tconst startWidth = width;\n\t\tconst target = event.currentTarget;\n\t\tconst onMove = (move: PointerEvent) => {\n\t\t\tconst delta = side === \"right\" ? startX - move.clientX : move.clientX - startX;\n\t\t\tonWidth(clampSidebarWidth(startWidth + delta));\n\t\t};\n\t\tconst onUp = () => {\n\t\t\ttarget.removeEventListener(\"pointermove\", onMove);\n\t\t\ttarget.removeEventListener(\"pointerup\", onUp);\n\t\t\ttarget.removeEventListener(\"pointercancel\", onUp);\n\t\t};\n\t\ttarget.addEventListener(\"pointermove\", onMove);\n\t\ttarget.addEventListener(\"pointerup\", onUp);\n\t\ttarget.addEventListener(\"pointercancel\", onUp);\n\t};\n\treturn (\n\t\t<div\n\t\t\trole=\"separator\"\n\t\t\taria-orientation=\"vertical\"\n\t\t\taria-valuenow={width}\n\t\t\taria-valuemin={180}\n\t\t\taria-valuemax={400}\n\t\t\taria-label=\"Resize sidebar\"\n\t\t\ttabIndex={0}\n\t\t\tclassName={cn(\n\t\t\t\t\"absolute top-0 h-full w-basalt-1 cursor-col-resize bg-transparent\",\n\t\t\t\tside === \"right\" ? \"left-0\" : \"right-0\",\n\t\t\t)}\n\t\t\tonPointerDown={onPointerDown}\n\t\t\tonKeyDown={(event) => {\n\t\t\t\tif (event.key !== \"ArrowLeft\" && event.key !== \"ArrowRight\") {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tevent.preventDefault();\n\t\t\t\tconst dir = event.key === \"ArrowRight\" ? 1 : -1;\n\t\t\t\tconst delta = side === \"right\" ? -dir * 8 : dir * 8;\n\t\t\t\tonWidth(clampSidebarWidth(width + delta));\n\t\t\t}}\n\t\t/>\n\t);\n}\n\nexport function Sidebar({\n\tcollapsed: collapsedProp,\n\tresizable = true,\n\tclassName,\n\tchildren,\n\tonMouseEnter,\n\tonMouseLeave,\n\tstyle,\n\t...props\n}: SidebarProps) {\n\tconst context = useContext(SidebarContext);\n\tconst collapsed = context\n\t\t? context.collapsed && !(context.peek && context.peeking)\n\t\t: (collapsedProp ?? false);\n\tconst side = context?.side ?? \"left\";\n\tconst overlay = context?.overlay ?? false;\n\tconst width = context?.width ?? 260;\n\tconst body = context?.loading ? (\n\t\t<div\n\t\t\tclassName=\"flex flex-col gap-basalt-space-lg px-basalt-layout-lg py-basalt-space-lg\"\n\t\t\trole=\"status\"\n\t\t\taria-live=\"polite\"\n\t\t>\n\t\t\t<SkeletonLine />\n\t\t\t<SkeletonLine />\n\t\t\t<SkeletonLine />\n\t\t</div>\n\t) : (\n\t\tchildren\n\t);\n\tconst resize =\n\t\tcontext && resizable && !collapsed ? (\n\t\t\t<SidebarResize side={side} width={context.width} onWidth={context.setWidth} />\n\t\t) : null;\n\tconst frameClass = cn(\n\t\tBASALT_UI_CLASS,\n\t\t\"relative flex shrink-0 flex-col bg-basalt-background text-basalt-base text-basalt-foreground\",\n\t\tOVERLAY_MOTION,\n\t\tclassName,\n\t);\n\tif (overlay && context) {\n\t\treturn (\n\t\t\t<Dialog open={!context.collapsed} onOpenChange={(open) => context.setCollapsed(!open)}>\n\t\t\t\t<DialogPortal>\n\t\t\t\t\t<DialogOverlay />\n\t\t\t\t\t<DialogPrimitive.Content\n\t\t\t\t\t\tdata-basalt-sidebar=\"\"\n\t\t\t\t\t\taria-label=\"Sidebar\"\n\t\t\t\t\t\tdata-overlay=\"\"\n\t\t\t\t\t\tdata-side={side}\n\t\t\t\t\t\taria-busy={context.loading || undefined}\n\t\t\t\t\t\tonMouseEnter={onMouseEnter}\n\t\t\t\t\t\tonMouseLeave={onMouseLeave}\n\t\t\t\t\t\tref={(node) => {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tnode &&\n\t\t\t\t\t\t\t\tdocument.activeElement instanceof HTMLElement &&\n\t\t\t\t\t\t\t\t!node.contains(document.activeElement)\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tcontext.lastFocusRef.current = document.activeElement;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonOpenAutoFocus={(event) => {\n\t\t\t\t\t\t\tconst from = \"relatedTarget\" in event ? event.relatedTarget : null;\n\t\t\t\t\t\t\tif (from instanceof HTMLElement) {\n\t\t\t\t\t\t\t\tcontext.lastFocusRef.current = from;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (event.target instanceof HTMLElement) {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tevent.target.focus();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonCloseAutoFocus={(event) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tcontext.lastFocusRef.current?.focus();\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\tframeClass,\n\t\t\t\t\t\t\tOVERLAY_LAYER,\n\t\t\t\t\t\t\t\"fixed inset-y-0 overflow-hidden shadow-md\",\n\t\t\t\t\t\t\tside === \"right\" ? \"right-0\" : \"left-0\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tstyle={{ width, ...style }}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t>\n\t\t\t\t\t\t{body}\n\t\t\t\t\t\t{resize}\n\t\t\t\t\t</DialogPrimitive.Content>\n\t\t\t\t</DialogPortal>\n\t\t\t</Dialog>\n\t\t);\n\t}\n\treturn (\n\t\t<aside\n\t\t\tdata-basalt-sidebar=\"\"\n\t\t\tdata-collapsed={collapsed ? \"\" : undefined}\n\t\t\tdata-side={side}\n\t\t\taria-busy={context?.loading || undefined}\n\t\t\tonMouseEnter={(event) => {\n\t\t\t\tif (context?.peek && context.collapsed) {\n\t\t\t\t\tcontext.setPeeking(true);\n\t\t\t\t}\n\t\t\t\tonMouseEnter?.(event);\n\t\t\t}}\n\t\t\tonMouseLeave={(event) => {\n\t\t\t\tif (context?.peek) {\n\t\t\t\t\tcontext.setPeeking(false);\n\t\t\t\t}\n\t\t\t\tonMouseLeave?.(event);\n\t\t\t}}\n\t\t\tclassName={cn(\n\t\t\t\tframeClass,\n\t\t\t\t\"sticky overflow-hidden transition-[width] basalt-motion duration-basalt-normal ease-basalt\",\n\t\t\t\tside === \"right\" ? \"order-last\" : undefined,\n\t\t\t\tcollapsed && \"w-basalt-rail\",\n\t\t\t)}\n\t\t\tstyle={!collapsed ? { width, ...style } : style}\n\t\t\t{...props}\n\t\t>\n\t\t\t{body}\n\t\t\t{resize}\n\t\t</aside>\n\t);\n}\n\nconst SIDEBAR_ROW_CLASS =\n\t\"min-h-[calc(var(--basalt-line-row)+2*var(--basalt-space-lg))] py-basalt-space-lg\";\n\nexport interface SidebarHeaderProps extends HTMLAttributes<HTMLDivElement> {}\n\nexport function SidebarHeader({ className, ...props }: SidebarHeaderProps) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"sidebar-header\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-basalt-14 shrink-0 items-center gap-basalt-row-gap px-basalt-layout-lg\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport interface SidebarBrandProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n\t/** Brand mark rendered in the fixed collapsed-rail slot. */\n\tlogo: ReactNode;\n\t/** Product or workspace name. */\n\tname: ReactNode;\n\t/** Optional version or release metadata, rendered at the auxiliary type size. */\n\tversion?: ReactNode;\n\t/** Optional trailing action, conventionally a `SidebarToggle`. */\n\taction?: ReactNode;\n}\n\nexport function SidebarBrand({\n\tlogo,\n\tname,\n\tversion,\n\taction,\n\tclassName,\n\t...props\n}: SidebarBrandProps) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"sidebar-brand\"\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex h-full min-w-0 flex-1 items-center gap-basalt-row-gap\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span\n\t\t\t\tdata-slot=\"sidebar-brand-logo\"\n\t\t\t\tclassName=\"flex w-basalt-sidebar-brand-slot shrink-0 items-center justify-center\"\n\t\t\t>\n\t\t\t\t{logo}\n\t\t\t</span>\n\t\t\t<div className=\"flex min-w-0 flex-1 items-center gap-basalt-row-gap overflow-hidden whitespace-nowrap\">\n\t\t\t\t<span className=\"min-w-0 flex-1 truncate text-basalt-base font-semibold\">{name}</span>\n\t\t\t\t{version != null ? (\n\t\t\t\t\t<span className=\"shrink-0 text-basalt-sm text-basalt-muted-foreground\">{version}</span>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t\t{action ? (\n\t\t\t\t<div data-slot=\"sidebar-brand-action\" className=\"basalt-sidebar-brand-action\">\n\t\t\t\t\t{action}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n\nexport interface SidebarToggleProps\n\textends Omit<ButtonProps, \"children\" | \"size\" | \"aria-expanded\"> {\n\t/** Accessible label while the sidebar is collapsed. @default \"Expand sidebar\" */\n\texpandLabel?: string;\n\t/** Accessible label while the sidebar is expanded. @default \"Collapse sidebar\" */\n\tcollapseLabel?: string;\n}\n\nexport function SidebarToggle({\n\t\"aria-label\": ariaLabel,\n\texpandLabel = \"Expand sidebar\",\n\tcollapseLabel = \"Collapse sidebar\",\n\tonClick,\n\tvariant = \"ghost\",\n\t...props\n}: SidebarToggleProps) {\n\tconst { collapsed, setCollapsed, side } = useSidebar();\n\tconst label = ariaLabel ?? (collapsed ? expandLabel : collapseLabel);\n\treturn (\n\t\t<TooltipProvider>\n\t\t\t<Tooltip>\n\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t<Button\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\taria-expanded={!collapsed}\n\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\tonClick={(event) => {\n\t\t\t\t\t\t\tonClick?.(event);\n\t\t\t\t\t\t\tif (!event.defaultPrevented) setCollapsed(!collapsed);\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<PanelLeft aria-hidden=\"true\" />\n\t\t\t\t\t</Button>\n\t\t\t\t</TooltipTrigger>\n\t\t\t\t<TooltipContent side={side === \"right\" ? \"left\" : \"right\"}>{label}</TooltipContent>\n\t\t\t</Tooltip>\n\t\t</TooltipProvider>\n\t);\n}\n\n/**\n * Props for `SidebarSearch`. Renders a native `<button>` element and accepts all standard button HTML attributes and click handlers.\n */\nexport interface SidebarSearchProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n\t/**\n\t * Shortcut key display label rendered inside the trailing kbd tag. Note: this is a visual label only and does not register a global keyboard shortcut.\n\t * @default \"⌘K\"\n\t */\n\tshortcut?: string;\n}\n\nexport function SidebarSearch({\n\tshortcut = \"⌘K\",\n\tclassName,\n\tchildren,\n\t...props\n}: SidebarSearchProps) {\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\tNAV_ROW_CLASS,\n\t\t\t\tSIDEBAR_ROW_CLASS,\n\t\t\t\t\"w-full cursor-pointer bg-basalt-secondary transition-colors basalt-motion hover:bg-basalt-hover\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<Search className=\"h-basalt-4 w-basalt-4 text-basalt-muted-foreground\" strokeWidth={1.5} />\n\t\t\t<span className=\"flex-1 text-left text-basalt-base text-basalt-muted-foreground\">\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t\t<kbd className=\"pointer-events-none hidden rounded-basalt-sm border border-basalt-border bg-basalt-card px-basalt-space-md py-basalt-space-xs text-basalt-sm font-medium text-basalt-muted-foreground sm:inline-block\">\n\t\t\t\t{shortcut}\n\t\t\t</kbd>\n\t\t</button>\n\t);\n}\n\nexport interface SidebarNavProps extends HTMLAttributes<HTMLElement> {}\n\nexport function SidebarNav({ className, ...props }: SidebarNavProps) {\n\tconst highlightRef = useHoverHighlight(undefined, { restoreOnPointerLeave: false });\n\treturn (\n\t\t<nav\n\t\t\tref={highlightRef}\n\t\t\tdata-slot=\"sidebar-nav\"\n\t\t\tclassName={cn(\n\t\t\t\tNAV_LIST_CLASS,\n\t\t\t\t\"basalt-sidebar-nav min-h-0 flex-1 flex-col overflow-y-auto overscroll-y-contain\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport interface SidebarPartitionProps extends HTMLAttributes<HTMLParagraphElement> {}\n\nexport function SidebarPartition({ className, ...props }: SidebarPartitionProps) {\n\treturn (\n\t\t<p\n\t\t\tdata-slot=\"sidebar-partition\"\n\t\t\tclassName={cn(\n\t\t\t\t\"shrink-0 px-basalt-row-x pt-basalt-layout pb-basalt-space-lg text-basalt-sm font-semibold tracking-wide text-basalt-foreground uppercase\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\ntype SidebarRowProps = {\n\t/** Mark the item as the current page. @default false */\n\tactive?: boolean;\n\t/** Item content. */\n\tchildren?: ReactNode;\n\t/** Additional CSS classes. */\n\tclassName?: string;\n};\n\ntype SidebarButtonRowProps = Omit<\n\tButtonHTMLAttributes<HTMLButtonElement>,\n\t\"children\" | \"className\" | \"disabled\"\n> &\n\tSidebarRowProps & {\n\t\tasChild?: false;\n\t\tdisabled?: boolean;\n\t\thref?: never;\n\t};\n\ntype SidebarSlotRowProps = Omit<\n\tButtonHTMLAttributes<HTMLButtonElement>,\n\t\"children\" | \"className\" | \"disabled\"\n> &\n\tSidebarRowProps & {\n\t\t/** Render the item onto its single enabled child element. */\n\t\tasChild: true;\n\t\tdisabled?: never;\n\t\thref?: never;\n\t};\n\ntype SidebarLinkRowProps = Omit<\n\tAnchorHTMLAttributes<HTMLAnchorElement>,\n\t\"children\" | \"className\" | \"href\"\n> &\n\tSidebarRowProps & {\n\t\t/** Application route interpreted by LinkProvider. */\n\t\thref: string;\n\t\tasChild?: never;\n\t};\n\nexport type SidebarItemProps = SidebarButtonRowProps | SidebarSlotRowProps | SidebarLinkRowProps;\n\nfunction rejectDisabledAsChild(props: { asChild?: boolean; disabled?: boolean }) {\n\tif (props.asChild && props.disabled) {\n\t\tthrow new Error(\"Sidebar asChild rows do not support disabled; use a native button row\");\n\t}\n}\n\nexport function SidebarItem(props: SidebarItemProps) {\n\trejectDisabledAsChild(props);\n\tconst rowClass = cn(\n\t\tNAV_ITEM_CLASS,\n\t\tSIDEBAR_ROW_CLASS,\n\t\t\"w-full text-inherit no-underline hover:no-underline\",\n\t\tprops.className,\n\t);\n\tif (typeof props.href === \"string\") {\n\t\tconst { href, active = false, children, className: _className, ...linkProps } = props;\n\t\treturn (\n\t\t\t<Link\n\t\t\t\t{...linkProps}\n\t\t\t\thref={href}\n\t\t\t\taria-current={active ? \"page\" : undefined}\n\t\t\t\tdata-basalt-hover-item=\"\"\n\t\t\t\tdata-sidebar-row=\"\"\n\t\t\t\tdata-hover-selected={active}\n\t\t\t\tclassName={rowClass}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Link>\n\t\t);\n\t}\n\tconst {\n\t\tasChild = false,\n\t\ttype = \"button\",\n\t\tactive = false,\n\t\tchildren,\n\t\tclassName: _className,\n\t\t...buttonProps\n\t} = props;\n\tconst sharedProps = {\n\t\t\"aria-current\": active ? (\"page\" as const) : undefined,\n\t\t\"data-basalt-hover-item\": \"\",\n\t\t\"data-sidebar-row\": \"\",\n\t\t\"data-hover-selected\": active,\n\t\tclassName: rowClass,\n\t};\n\tif (asChild) {\n\t\treturn (\n\t\t\t<Slot {...buttonProps} {...sharedProps}>\n\t\t\t\t{children}\n\t\t\t</Slot>\n\t\t);\n\t}\n\treturn (\n\t\t<button {...buttonProps} type={type} {...sharedProps}>\n\t\t\t{children}\n\t\t</button>\n\t);\n}\n\nexport type SidebarIconItemProps =\n\t| SidebarButtonRowProps\n\t| SidebarSlotRowProps\n\t| SidebarLinkRowProps;\n\nexport function SidebarIconItem(props: SidebarIconItemProps) {\n\trejectDisabledAsChild(props);\n\tconst rowClass = cn(\n\t\tNAV_ITEM_CLASS,\n\t\tSIDEBAR_ROW_CLASS,\n\t\t\"relative w-basalt-control justify-center text-inherit no-underline hover:no-underline\",\n\t\tprops.className,\n\t);\n\tif (typeof props.href === \"string\") {\n\t\tconst { href, active = false, children, className: _className, ...linkProps } = props;\n\t\treturn (\n\t\t\t<Link\n\t\t\t\t{...linkProps}\n\t\t\t\thref={href}\n\t\t\t\taria-current={active ? \"page\" : undefined}\n\t\t\t\tdata-basalt-hover-item=\"\"\n\t\t\t\tdata-sidebar-row=\"\"\n\t\t\t\tdata-hover-selected={active}\n\t\t\t\tclassName={rowClass}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Link>\n\t\t);\n\t}\n\tconst {\n\t\tasChild = false,\n\t\ttype = \"button\",\n\t\tactive = false,\n\t\tchildren,\n\t\tclassName: _className,\n\t\t...buttonProps\n\t} = props;\n\tconst sharedProps = {\n\t\t\"aria-current\": active ? (\"page\" as const) : undefined,\n\t\t\"data-basalt-hover-item\": \"\",\n\t\t\"data-sidebar-row\": \"\",\n\t\t\"data-hover-selected\": active,\n\t\tclassName: rowClass,\n\t};\n\tif (asChild) {\n\t\treturn (\n\t\t\t<Slot {...buttonProps} {...sharedProps}>\n\t\t\t\t{children}\n\t\t\t</Slot>\n\t\t);\n\t}\n\treturn (\n\t\t<button {...buttonProps} type={type} {...sharedProps}>\n\t\t\t{children}\n\t\t</button>\n\t);\n}\n\n/**\n * Props for `SidebarGroup`. Uncontrolled collapsible section that accepts only the documented properties. It does not accept controlled open props or arbitrary DOM attributes.\n */\nexport interface SidebarGroupProps {\n\t/**\n\t * Section label displayed on the group trigger.\n\t */\n\tlabel: ReactNode;\n\t/**\n\t * Uncontrolled initial open state for the collapsible group.\n\t * @default true\n\t */\n\tdefaultOpen?: boolean;\n\t/**\n\t * Navigation items rendered inside the group.\n\t */\n\tchildren: ReactNode;\n}\n\nexport function SidebarGroup({ label, defaultOpen = true, children }: SidebarGroupProps) {\n\tconst [open, setOpen] = useState(defaultOpen);\n\treturn (\n\t\t<Collapsible\n\t\t\topen={open}\n\t\t\tonOpenChange={setOpen}\n\t\t\tdata-slot=\"sidebar-group\"\n\t\t\tclassName=\"shrink-0 pt-basalt-layout-sm\"\n\t\t>\n\t\t\t<CollapsibleTrigger asChild>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tdata-slot=\"sidebar-group-label\"\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"flex w-full cursor-pointer items-center justify-between gap-basalt-row-gap rounded-basalt-md px-basalt-row-x py-basalt-space-lg text-left text-basalt-sm font-semibold leading-basalt-row tracking-wide text-basalt-muted-foreground uppercase transition-colors basalt-motion hover:text-basalt-foreground\",\n\t\t\t\t\t\tFOCUS_INSET,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"min-w-0 truncate\">{label}</span>\n\t\t\t\t\t<ChevronUp\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"h-basalt-4 w-basalt-4 text-basalt-muted-foreground transition-transform basalt-motion duration-basalt-normal\",\n\t\t\t\t\t\t\tOVERLAY_MOTION,\n\t\t\t\t\t\t\t!open && \"rotate-180\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t\t/>\n\t\t\t\t</button>\n\t\t\t</CollapsibleTrigger>\n\t\t\t<CollapsibleContent unstyled>\n\t\t\t\t<div className=\"flex flex-col gap-basalt-nav-gap pt-basalt-nav-gap\">{children}</div>\n\t\t\t</CollapsibleContent>\n\t\t</Collapsible>\n\t);\n}\n\nexport interface SidebarFooterProps extends HTMLAttributes<HTMLDivElement> {}\n\nexport function SidebarFooter({ className, ...props }: SidebarFooterProps) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"sidebar-footer\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex shrink-0 flex-col gap-basalt-content-gap px-basalt-layout-lg pt-basalt-space-lg pb-basalt-layout\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport interface SidebarUserProps {\n\t/**\n\t * User display name.\n\t */\n\tname: ReactNode;\n\t/**\n\t * Optional user email or secondary text.\n\t */\n\temail?: ReactNode;\n\t/**\n\t * Avatar element slot.\n\t */\n\tavatar?: ReactNode;\n\t/**\n\t * Trailing action slot (e.g. settings or logout button).\n\t */\n\taction?: ReactNode;\n\t/**\n\t * Additional CSS class name.\n\t */\n\tclassName?: string;\n}\n\nexport function SidebarUser({ name, email, avatar, action, className }: SidebarUserProps) {\n\treturn (\n\t\t<div className={cn(\"flex items-center gap-basalt-space-lg\", className)}>\n\t\t\t{avatar}\n\t\t\t<div className=\"min-w-0 flex-1\">\n\t\t\t\t<p className=\"truncate text-basalt-base font-medium text-basalt-foreground\">{name}</p>\n\t\t\t\t{email ? (\n\t\t\t\t\t<p className=\"truncate text-basalt-sm text-basalt-muted-foreground\">{email}</p>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t\t{action}\n\t\t</div>\n\t);\n}\n\nexport interface ContentIslandProps extends HTMLAttributes<HTMLDivElement> {\n\t/** Mobile surface treatment; desktop remains an inset L1 island. @default \"inset\" */\n\tmobileSurface?: \"inset\" | \"edge-to-edge\";\n}\n\nexport function ContentIsland({\n\tmobileSurface = \"inset\",\n\tclassName,\n\t...props\n}: ContentIslandProps) {\n\treturn (\n\t\t<div\n\t\t\tdata-basalt-surface-root=\"\"\n\t\t\tdata-basalt-island={mobileSurface}\n\t\t\tclassName={cn(\n\t\t\t\t\"min-h-0 min-w-0 flex-1 bg-basalt-card text-basalt-card-foreground md:rounded-basalt-island md:p-basalt-layout-lg lg:px-basalt-layout-xl\",\n\t\t\t\tmobileSurface === \"inset\"\n\t\t\t\t\t? \"rounded-basalt-lg p-basalt-layout shadow-sm ring-1 ring-basalt-border/40\"\n\t\t\t\t\t: \"md:shadow-sm md:ring-1 md:ring-basalt-border/40\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA8EA,IAAMC,IAAiBC,EAA0C,IAAI;AAMrE,SAAgBC,IAAkC;CACjD,IAAMC,IAAUC,EAAWJ,CAAc;CACzC,IAAI,CAACG,GACJ,MAAU,MAAM,gDAAgD;CAEjE,OAAOA;AACR;AA+CA,SAAgBE,EAAgB,EAC/B,cACA,sBAAmB,IACnB,sBACA,UAAO,QACP,aAAU,IACV,UAAO,IACP,aAAU,IACV,kBAAe,KACf,eACwB;CACxB,IAAM,CAACC,GAAcC,KAAmBC,EAASC,CAAgB,GAC3D,CAACC,GAASC,KAAcH,EAAS,EAAK,GACtC,CAACI,GAAOC,KAAiBL,QAAeM,EAAkBC,CAAY,CAAC,GACvEC,IAAWC,GAAa,MAAiB;EAC9C,EAAcH,EAAkBI,CAAI,CAAC;CACtC,GAAG,CAAC,CAAC,GACCC,IAAeC,EAA2B,IAAI,GAC9CC,IAAgBD,EAAOE,KAAab,CAAgB,GACpDc,IAAcH,EAAOI,CAAO,GAC5BC,IAAWH,KAAahB;CAC9B,QAAsB;EAUrB,AARCkB,KACA,CAACC,MACAJ,EAAc,WAAW,CAACE,EAAY,YACvC,SAAS,yBAAyB,gBAElC,EAAa,UAAU,SAAS,gBAEjC,EAAc,UAAUE,GACxB,EAAY,UAAUD;CACvB,CAAC;CACD,IAAME,IAAeT,GACnB,MAAkB;EAOlB,AANI,CAACC,KAAQ,SAAS,yBAAyB,gBAC9C,EAAa,UAAU,SAAS,gBAE7BI,MAAc,KAAA,KACjBf,EAAgBW,CAAI,GAErBS,IAAoBT,CAAI;CACzB,GACA,CAACI,GAAWK,CAAiB,CAC9B;CACA,OACC,kBAAC3B,EAAe,UAAhB;EACC,OAAO;GACN,WAAWyB;GACX;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACD;EAEC;CACuB,CAAA;AAE3B;AAeA,SAASX,EAAkB,GAAc;CACxC,OAAO,KAAK,IAAI,KAAK,KAAK,IAAI,KAAKI,CAAI,CAAC;AACzC;AAEA,SAASU,EAAc,EACtB,SACA,UACA,cAKE;CAoBF,OACC,kBAAC,OAAD;EACC,MAAK;EACL,oBAAiB;EACjB,iBAAehB;EACf,iBAAe;EACf,iBAAe;EACf,cAAW;EACX,UAAU;EACV,WAAWiB,EACV,qEACAC,MAAS,UAAU,WAAW,SAC/B;EACe,gBAhCM,MAA6C;GAEnE,AADAC,EAAM,eAAe,GACrBA,EAAM,cAAc,kBAAkBA,EAAM,SAAS;GACrD,IAAMC,IAASD,EAAM,SACfE,IAAarB,GACbsB,IAASH,EAAM,eACfI,KAAU,MAAuB;IACtC,IAAMC,IAAQN,MAAS,UAAUE,IAASK,EAAK,UAAUA,EAAK,UAAUL;IACxE,EAAQlB,EAAkBmB,IAAaG,CAAK,CAAC;GAC9C,GACME,UAAa;IAGlB,AAFAJ,EAAO,oBAAoB,eAAeC,CAAM,GAChDD,EAAO,oBAAoB,aAAaI,CAAI,GAC5CJ,EAAO,oBAAoB,iBAAiBI,CAAI;GACjD;GAGA,AAFAJ,EAAO,iBAAiB,eAAeC,CAAM,GAC7CD,EAAO,iBAAiB,aAAaI,CAAI,GACzCJ,EAAO,iBAAiB,iBAAiBI,CAAI;EAC9C;EAeE,YAAY,MAAU;GACrB,IAAIP,EAAM,QAAQ,eAAeA,EAAM,QAAQ,cAC9C;GAED,EAAM,eAAe;GACrB,IAAMQ,IAAMR,EAAM,QAAQ,eAAe,IAAI;GAE7C,EAAQjB,EAAkBF,KADZkB,MAAS,UAAU,CAACS,IAAM,IAAIA,IAAM,EACX,CAAC;EACzC;CACA,CAAA;AAEH;AAEA,SAAgBC,EAAQ,EACvB,WAAWC,GACX,eAAY,IACZ,cACA,aACA,iBACA,iBACA,UACA,GAAGC,KACa;CAChB,IAAMvC,IAAUC,EAAWJ,CAAc,GACnCsB,IAAYnB,IACfA,EAAQ,aAAa,EAAEA,EAAQ,QAAQA,EAAQ,WAC9CsC,KAAiB,IACfX,IAAO3B,GAAS,QAAQ,QACxBqB,IAAUrB,GAAS,WAAW,IAC9BS,IAAQT,GAAS,SAAS,KAC1BwC,IAAOxC,GAAS,UACrB,kBAAC,OAAD;EACC,WAAU;EACV,MAAK;EACL,aAAU;EAHX,UAAA;GAKC,kBAACyC,GAAD,CAAe,CAAA;GACf,kBAACA,GAAD,CAAe,CAAA;GACf,kBAACA,GAAD,CAAe,CAAA;EACX;CAEL,CAAA,IAAAC,GAEKC,IACL3C,KAAW4C,KAAa,CAACzB,IACxB,kBAACM,GAAD;EAAqB;EAAM,OAAOzB,EAAQ;EAAO,SAASA,EAAQ;CAAW,CAAA,IAC1E,MACC6C,IAAanB,EAClBoB,GACA,gGACAC,GACAC,CACD;CAqDA,OApDI3B,KAAWrB,IAEb,kBAACiD,GAAD;EAAQ,MAAM,CAACjD,EAAQ;EAAW,eAAe,MAASA,EAAQ,aAAa,CAACkD,CAAI;EACnF,UAAA,kBAACC,GAAD,EAAA,UAAA,CACC,kBAACC,GAAD,CAAgB,CAAA,GAChB,kBAACxD,EAAgB,SAAjB;GACC,uBAAoB;GACpB,cAAW;GACX,gBAAa;GACb,aAAW+B;GACX,aAAW3B,EAAQ,WAAW,KAAA;GAChB;GACA;GACd,MAAM,MAAS;IACd,AACCqD,KACA,SAAS,yBAAyB,eAClC,CAACA,EAAK,SAAS,SAAS,aAAa,MAErC,EAAQ,aAAa,UAAU,SAAS;GAE1C;GACA,kBAAkB,MAAU;IAC3B,IAAMC,IAAO,mBAAmB1B,IAAQA,EAAM,gBAAgB;IAI9D,AAHI0B,aAAgB,gBACnB,EAAQ,aAAa,UAAUA,IAE5B1B,EAAM,kBAAkB,gBAC3BA,EAAM,eAAe,GACrBA,EAAM,OAAO,MAAM;GAErB;GACA,mBAAmB,MAAU;IAE5B,AADAA,EAAM,eAAe,GACrB5B,EAAQ,aAAa,SAAS,MAAM;GACrC;GACA,WAAW0B,EACVmB,GACAU,GACA,6CACA5B,MAAS,UAAU,YAAY,QAChC;GACA,OAAO;IAAE;IAAO,GAAG6B;GAAM;GACzB,GAAIjB;GAtCL,UAAA,CAwCEC,GACAG,CACuB;EACZ,CAAA,CAAA,EAAA,CAAA;CACP,CAAA,IAIT,kBAAC,SAAD;EACC,uBAAoB;EACpB,kBAAgBxB,IAAY,KAAK,KAAA;EACjC,aAAWQ;EACX,aAAW3B,GAAS,WAAW,KAAA;EAC/B,eAAe,MAAU;GAIxB,AAHIA,GAAS,QAAQA,EAAQ,aAC5BA,EAAQ,WAAW,EAAI,GAExByD,IAAe7B,CAAK;EACrB;EACA,eAAe,MAAU;GAIxB,AAHI5B,GAAS,QACZA,EAAQ,WAAW,EAAK,GAEzB0D,IAAe9B,CAAK;EACrB;EACA,WAAWF,EACVmB,GACA,8FACAlB,MAAS,UAAU,eAAe,KAAA,GAClCR,KAAa,eACd;EACA,OAAQA,IAAkCqC,IAAtB;GAAE;GAAO,GAAGA;EAAM;EACtC,GAAIjB;EAxBL,UAAA,CA0BEC,GACAG,CACK;;AAET;AAEA,IAAMgB,IACL;AAID,SAAgBC,EAAc,EAAE,cAAW,GAAGrB,KAA6B;CAC1E,OACC,kBAAC,OAAD;EACC,aAAU;EACV,WAAWb,EACV,iFACAsB,CACD;EACA,GAAIT;CACJ,CAAA;AAEH;AAaA,SAAgBsB,EAAa,EAC5B,SACA,SACA,YACA,WACA,cACA,GAAGtB,KACkB;CACrB,OACC,kBAAC,OAAD;EACC,aAAU;EACV,WAAWb,EACV,uEACAsB,CACD;EACA,GAAIT;EANL,UAAA;GAQC,kBAAC,QAAD;IACC,aAAU;IACV,WAAU;IAET,UAAAuB;GACI,CAAA;GACN,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACC,kBAAC,QAAD;KAAM,WAAU;KAA0D,UAAAC;IAAW,CAAA,GACpFC,KAAW,OAER,OADH,kBAAC,QAAD;KAAM,WAAU;KAAwD,UAAAA;IAAc,CAAA,CAEnF;;GACJC,IACA,kBAAC,OAAD;IAAK,aAAU;IAAuB,WAAU;IAC9C,UAAAA;GACG,CAAA,IACF;EACA;;AAEP;AAUA,SAAgBC,EAAc,EAC7B,cAAcC,GACd,iBAAc,kBACd,mBAAgB,oBAChB,YACA,aAAU,SACV,GAAG5B,KACmB;CACtB,IAAM,EAAE,cAAW,iBAAc,YAASxC,EAAW,GAC/CqE,IAAQD,MAAchD,IAAYkD,IAAcC;CACtD,OACC,kBAACC,GAAD,EAAA,UACC,kBAACC,GAAD,EAAA,UAAA,CACC,kBAACC,GAAD;EAAgB,SAAA;EACf,UAAA,kBAACC,GAAD;GACC,GAAInC;GACK;GACT,MAAK;GACL,iBAAe,CAACpB;GAChB,cAAYiD;GACZ,UAAU,MAAU;IAEnB,AADAO,IAAU/C,CAAK,GACVA,EAAM,oBAAkBL,EAAa,CAACJ,CAAS;GACrD;GAEA,UAAA,kBAACyD,GAAD,EAAW,eAAY,OAAQ,CAAA;EACxB,CAAA;CACO,CAAA,GAChB,kBAACC,GAAD;EAAgB,MAAMlD,MAAS,UAAU,SAAS;EAAU,UAAAyC;CAAsB,CAAA,CAC1E,EAAA,CAAA,EACO,CAAA;AAEnB;AAaA,SAAgBU,EAAc,EAC7B,cAAW,MACX,cACA,aACA,GAAGvC,KACmB;CACtB,OACC,kBAAC,UAAD;EACC,MAAK;EACL,WAAWb,EACVoB,GACAiC,GACApB,GACA,mGACAX,CACD;EACA,GAAIT;EATL,UAAA;GAWC,kBAACyC,GAAD;IAAQ,WAAU;IAAqD,aAAa;GAAM,CAAA;GAC1F,kBAAC,QAAD;IAAM,WAAU;IACd;GACI,CAAA;GACN,kBAAC,OAAD;IAAK,WAAU;IACb,UAAAC;GACG,CAAA;EACE;;AAEV;AAIA,SAAgBC,EAAW,EAAE,cAAW,GAAG3C,KAA0B;CACpE,IAAM4C,IAAeC,EAAkB,KAAA,GAAW,EAAE,uBAAuB,GAAM,CAAC;CAClF,OACC,kBAAC,OAAD;EACC,KAAKD;EACL,aAAU;EACV,WAAWzD,EACV2D,GACA,mFACArC,CACD;EACA,GAAIT;CACJ,CAAA;AAEH;AAIA,SAAgB+C,EAAiB,EAAE,cAAW,GAAG/C,KAAgC;CAChF,OACC,kBAAC,KAAD;EACC,aAAU;EACV,WAAWb,EACV,4IACAsB,CACD;EACA,GAAIT;CACJ,CAAA;AAEH;AA4CA,SAASgD,EAAsB,GAAkD;CAChF,IAAIhD,EAAM,WAAWA,EAAM,UAC1B,MAAU,MAAM,uEAAuE;AAEzF;AAEA,SAAgBiD,EAAY,GAAyB;CACpD,EAAsBjD,CAAK;CAC3B,IAAMkD,IAAW/D,EAChBgE,GACA/B,GACA,uDACApB,EAAM,SACP;CACA,IAAI,OAAOA,EAAM,QAAS,UAAU;EACnC,IAAM,EAAE,SAAM,YAAS,IAAO,aAAU,WAAWoD,GAAY,GAAGC,MAAcrD;EAChF,OACC,kBAACsD,GAAD;GACC,GAAID;GACE;GACN,gBAAcE,IAAS,SAAS,KAAA;GAChC,0BAAuB;GACvB,oBAAiB;GACjB,uBAAqBA;GACrB,WAAWL;GAEV;EACI,CAAA;CAER;CACA,IAAM,EACL,aAAU,IACV,UAAO,UACP,YAAS,IACT,aACA,WAAWE,GACX,GAAGI,MACAxD,GACEyD,IAAc;EACnB,gBAAgBF,IAAU,SAAmB,KAAA;EAC7C,0BAA0B;EAC1B,oBAAoB;EACpB,uBAAuBA;EACvB,WAAWL;CACZ;CAQA,OAPIQ,IAEF,kBAACC,GAAD;EAAM,GAAIH;EAAa,GAAIC;EACzB;CACI,CAAA,IAIP,kBAAC,UAAD;EAAQ,GAAID;EAAmB;EAAM,GAAIC;EACvC;CACM,CAAA;AAEV;AAOA,SAAgBG,EAAgB,GAA6B;CAC5D,EAAsB5D,CAAK;CAC3B,IAAMkD,IAAW/D,EAChBgE,GACA/B,GACA,yFACApB,EAAM,SACP;CACA,IAAI,OAAOA,EAAM,QAAS,UAAU;EACnC,IAAM,EAAE,SAAM,YAAS,IAAO,aAAU,WAAWoD,GAAY,GAAGC,MAAcrD;EAChF,OACC,kBAACsD,GAAD;GACC,GAAID;GACE;GACN,gBAAcE,IAAS,SAAS,KAAA;GAChC,0BAAuB;GACvB,oBAAiB;GACjB,uBAAqBA;GACrB,WAAWL;GAEV;EACI,CAAA;CAER;CACA,IAAM,EACL,aAAU,IACV,UAAO,UACP,YAAS,IACT,aACA,WAAWE,GACX,GAAGI,MACAxD,GACEyD,IAAc;EACnB,gBAAgBF,IAAU,SAAmB,KAAA;EAC7C,0BAA0B;EAC1B,oBAAoB;EACpB,uBAAuBA;EACvB,WAAWL;CACZ;CAQA,OAPIQ,IAEF,kBAACC,GAAD;EAAM,GAAIH;EAAa,GAAIC;EACzB;CACI,CAAA,IAIP,kBAAC,UAAD;EAAQ,GAAID;EAAmB;EAAM,GAAIC;EACvC;CACM,CAAA;AAEV;AAqBA,SAAgBI,EAAa,EAAE,UAAO,iBAAc,IAAM,eAA+B;CACxF,IAAM,CAAClD,GAAMmD,KAAWhG,EAASiG,CAAW;CAC5C,OACC,kBAACC,GAAD;EACO;EACN,cAAcF;EACd,aAAU;EACV,WAAU;EAJX,UAAA,CAMC,kBAACG,GAAD;GAAoB,SAAA;GACnB,UAAA,kBAAC,UAAD;IACC,MAAK;IACL,aAAU;IACV,WAAW9E,EACV,+SACA+E,CACD;IAND,UAAA,CAQC,kBAAC,QAAD;KAAM,WAAU;KAAoB,UAAArC;IAAY,CAAA,GAChD,kBAACsC,GAAD;KACC,WAAWhF,EACV,gHACAqB,GACA,CAACG,KAAQ,YACV;KACA,aAAa;IACb,CAAA,CACM;;EACW,CAAA,GACpB,kBAACyD,GAAD;GAAoB,UAAA;GACnB,UAAA,kBAAC,OAAD;IAAK,WAAU;IAAsD;GAAc,CAAA;EAChE,CAAA,CACR;;AAEf;AAIA,SAAgBC,EAAc,EAAE,cAAW,GAAGrE,KAA6B;CAC1E,OACC,kBAAC,OAAD;EACC,aAAU;EACV,WAAWb,EACV,yGACAsB,CACD;EACA,GAAIT;CACJ,CAAA;AAEH;AAyBA,SAAgBsE,EAAY,EAAE,SAAM,UAAO,WAAQ,WAAQ,gBAA+B;CACzF,OACC,kBAAC,OAAD;EAAK,WAAWnF,EAAG,yCAAyCsB,CAAS;EAArE,UAAA;GACE8D;GACD,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACC,kBAAC,KAAD;KAAG,WAAU;KAAgE,UAAA/C;IAAQ,CAAA,GACpFgD,IACA,kBAAC,KAAD;KAAG,WAAU;KAAwD,UAAAA;IAAS,CAAA,IAC3E,IACA;;GACJ9C;EACG;;AAEP;AAOA,SAAgB+C,GAAc,EAC7B,mBAAgB,SAChB,cACA,GAAGzE,KACmB;CACtB,OACC,kBAAC,OAAD;EACC,4BAAyB;EACzB,sBAAoB0E;EACpB,WAAWvF,EACV,2IACAuF,MAAkB,UACf,6EACA,mDACHjE,CACD;EACA,GAAIT;CACJ,CAAA;AAEH"}

package/dist/components/skeleton-line.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
 import { jsx as t } from "react/jsx-runtime";
-//#region src/components/skeleton-line.tsx
+// src/components/skeleton-line.tsx
 function n({ className: n, minWidth: r = 30, maxWidth: i = 100, height: a, style: o, ...s }) {
 	let c = {
 		width: `${(r + i) / 2}%`,
@@ -16,7 +16,6 @@ function n({ className: n, minWidth: r = 30, maxWidth: i = 100, height: a, style
 		children: /* @__PURE__ */ t("span", { className: "pointer-events-none absolute inset-0 animate-basalt-shimmer bg-gradient-to-r from-transparent via-basalt-foreground/10 to-transparent motion-reduce:animate-none" })
 	});
 }
-//#endregion
 export { n as SkeletonLine };
 
 //# sourceMappingURL=skeleton-line.js.map

package/dist/components/slider.js

@@ -5,7 +5,7 @@ import { FOCUS_RING as n } from "./overlay.js";
 import * as r from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-slider";
-//#region src/components/slider.tsx
+// src/components/slider.tsx
 var s = r.forwardRef(({ className: s, value: c, defaultValue: l, min: u = 0, max: d = 100, orientation: f = "horizontal", labels: p, "aria-label": m, "aria-labelledby": h, ...g }, _) => {
 	let v = f === "vertical", y = c !== void 0, b = r.useRef(l?.length ?? 1), x = y ? c?.length ?? 0 : b.current;
 	return /* @__PURE__ */ a(o.Root, {
@@ -31,7 +31,6 @@ var s = r.forwardRef(({ className: s, value: c, defaultValue: l, min: u = 0, max
 	});
 });
 s.displayName = o.Root.displayName;
-//#endregion
 export { s as Slider };
 
 //# sourceMappingURL=slider.js.map

package/dist/components/stat-strip.js

@@ -4,7 +4,7 @@ import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
 import { SkeletonLine as n } from "./skeleton-line.js";
 import * as r from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/components/stat-strip.tsx
+// src/components/stat-strip.tsx
 var o = r.forwardRef(({ "aria-busy": r, className: o, items: s, loading: c = !1, ...l }, u) => /* @__PURE__ */ i("dl", {
 	ref: u,
 	className: e(t, "grid grid-cols-2 gap-basalt-layout md:grid-cols-4", o),
@@ -23,7 +23,6 @@ var o = r.forwardRef(({ "aria-busy": r, className: o, items: s, loading: c = !1,
 	}, t))
 }));
 o.displayName = "StatStrip";
-//#endregion
 export { o as StatStrip };
 
 //# sourceMappingURL=stat-strip.js.map

package/dist/components/switch.js

@@ -6,7 +6,7 @@ import { useCheckableGroup as r } from "../utils/use-checkable-group.js";
 import * as i from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import * as s from "@radix-ui/react-switch";
-//#region src/components/switch.tsx
+// src/components/switch.tsx
 var c = i.createContext(null);
 function l(e, t, n) {
 	return n ? e.includes(t) ? e : [...e, t] : e.filter((e) => e !== t);
@@ -87,7 +87,6 @@ var m = Object.assign(u, {
 	Legend: f,
 	Item: p
 });
-//#endregion
 export { m as Switch };
 
 //# sourceMappingURL=switch.js.map

package/dist/components/table-of-contents.js

@@ -2,7 +2,7 @@
 import { cn as e } from "../utils/cn.js";
 import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
-//#region src/components/table-of-contents.tsx
+// src/components/table-of-contents.tsx
 function i({ title: i = "On this page", children: a, className: o }) {
 	return /* @__PURE__ */ r("nav", {
 		"aria-label": i || "On this page",
@@ -32,7 +32,6 @@ function a({ active: t, href: r, children: i }) {
 		})
 	});
 }
-//#endregion
 export { i as TableOfContents, a as TableOfContentsItem };
 
 //# sourceMappingURL=table-of-contents.js.map

package/dist/components/table-pager.js

@@ -3,7 +3,7 @@ import { cn as e } from "../utils/cn.js";
 import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
 import { Pagination as n } from "./pagination.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/components/table-pager.tsx
+// src/components/table-pager.tsx
 function a({ start: e, end: t, totalCount: n }) {
 	return n === 0 ? "No results" : `Showing ${e}–${t} of ${n}`;
 }
@@ -30,7 +30,6 @@ function o({ className: o, disabled: s = !1, formatRange: c, onPageChange: l, pa
 		})]
 	});
 }
-//#endregion
 export { o as TablePager };
 
 //# sourceMappingURL=table-pager.js.map

package/dist/components/table.js

@@ -4,7 +4,7 @@ import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
 import * as n from "react";
 import { ArrowDown as r, ArrowUp as i, ArrowUpDown as a } from "lucide-react";
 import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-//#region src/components/table.tsx
+// src/components/table.tsx
 var l = n.forwardRef(({ className: n, striped: r = !1, ...i }, a) => /* @__PURE__ */ s("table", {
 	ref: a,
 	"data-basalt-table": "",
@@ -51,13 +51,12 @@ var y = n.forwardRef(({ children: t, textAlign: n = "start", sorted: r, classNam
 	return /* @__PURE__ */ s("button", {
 		type: "button",
 		ref: l,
-		className: e("group flex w-full cursor-pointer items-center gap-basalt-space-sm rounded-basalt-sm border-0 bg-transparent p-0 font-inherit text-inherit font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-basalt-primary", n === "end" ? "justify-end text-end" : "text-start", i),
+		className: e("basalt-focus group flex w-full cursor-pointer items-center gap-basalt-space-sm rounded-basalt-sm border-0 bg-transparent p-0 font-inherit text-inherit font-medium", n === "end" ? "justify-end text-end" : "text-start", i),
 		...a,
 		children: n === "end" ? /* @__PURE__ */ c(o, { children: [d, u] }) : /* @__PURE__ */ c(o, { children: [u, d] })
 	});
 });
 y.displayName = "TableSortableHeader";
-//#endregion
 export { l as Table, d as TableBody, _ as TableCaption, g as TableCell, f as TableFooter, h as TableHead, u as TableHeader, p as TableRow, y as TableSortableHeader };
 
 //# sourceMappingURL=table.js.map

package/dist/components/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","names":["_Fragment","React","Fragment$1","Table","props","striped","cn","BASALT_UI_CLASS","className","TableHeader","TableBody","TableFooter","TableRow","variant","textAlignClass","textAlign","TableHead","align","TableCell","TableCaption","SortIcon","sorted","ArrowUp","ArrowDown","ArrowUpDown","TableSortableHeader","label","icon"],"sources":["../../src/components/table.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp, ArrowUpDown } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\n/** Logical inline alignment. Maps to CSS `text-align: start | end`. */\nexport type TableTextAlign = \"start\" | \"end\";\nexport type TableSortDirection = \"asc\" | \"desc\";\n\nexport type TableProps = {\n\t/** Paint alternating rows. @default false */\n\tstriped?: boolean;\n\t/**\n\t * Additional classes for the table.\n\t */\n\tclassName?: string;\n};\n\nexport const Table = React.forwardRef<\n\tHTMLTableElement,\n\tTableProps & React.HTMLAttributes<HTMLTableElement>\n>(({ className, striped = false, ...props }, ref) => (\n\t<table\n\t\tref={ref}\n\t\tdata-basalt-table=\"\"\n\t\tdata-striped={striped ? \"true\" : undefined}\n\t\tclassName={cn(\n\t\t\tBASALT_UI_CLASS,\n\t\t\t\"w-full border-separate border-spacing-0 caption-bottom text-start text-basalt-base leading-[var(--basalt-line-body)] text-basalt-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTable.displayName = \"Table\";\n\nexport interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableHeader = (props: TableHeaderProps) => <thead {...props} />;\n\nexport interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableBody = (props: TableBodyProps) => <tbody {...props} />;\n\nexport interface TableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableFooter = (props: TableFooterProps) => <tfoot {...props} />;\n\nexport type TableRowVariant = \"default\" | \"selected\";\n\nexport type TableRowProps = {\n\t/**\n\t * Highlight the row as selected.\n\t * @default \"default\"\n\t */\n\tvariant?: TableRowVariant;\n\t/**\n\t * Additional classes for the row.\n\t */\n\tclassName?: string;\n};\n\nexport const TableRow = ({\n\tclassName,\n\tvariant = \"default\",\n\t...props\n}: TableRowProps & React.HTMLAttributes<HTMLTableRowElement>) => (\n\t<tr\n\t\t{...props}\n\t\taria-selected={variant === \"selected\" ? true : props[\"aria-selected\"]}\n\t\tclassName={className}\n\t/>\n);\n\nfunction textAlignClass(textAlign?: TableTextAlign) {\n\tif (textAlign === \"end\") return \"text-end tabular-nums\";\n\tif (textAlign === \"start\") return \"text-start\";\n}\n\nexport type TableHeadProps = {\n\t/**\n\t * Additional classes for the header cell.\n\t */\n\tclassName?: string;\n\t/**\n\t * Logical inline alignment. Omitted headers keep `text-start` unless native `align` is set.\n\t */\n\ttextAlign?: TableTextAlign;\n};\n\nexport const TableHead = ({\n\tclassName,\n\ttextAlign,\n\talign,\n\t...props\n}: TableHeadProps & React.ThHTMLAttributes<HTMLTableCellElement>) => (\n\t<th\n\t\tclassName={cn(\n\t\t\t\"relative h-basalt-table-row whitespace-nowrap border-b border-basalt-border ps-basalt-table-x pe-basalt-table-x py-basalt-table-y align-middle text-basalt-sm font-medium tracking-[0.04em] text-basalt-muted-foreground\",\n\t\t\ttextAlignClass(textAlign) ?? (align == null ? \"text-start\" : undefined),\n\t\t\tclassName,\n\t\t)}\n\t\talign={align}\n\t\t{...props}\n\t/>\n);\n\nexport type TableCellProps = {\n\t/**\n\t * Additional classes for the cell.\n\t */\n\tclassName?: string;\n\t/**\n\t * Logical inline alignment. Omitted cells inherit from the table or row. Native HTML `align` is unchanged.\n\t */\n\ttextAlign?: TableTextAlign;\n};\n\nexport const TableCell = ({\n\tclassName,\n\ttextAlign,\n\t...props\n}: TableCellProps & React.TdHTMLAttributes<HTMLTableCellElement>) => (\n\t<td\n\t\tclassName={cn(\n\t\t\t\"relative h-basalt-table-row ps-basalt-table-x pe-basalt-table-x py-basalt-table-y align-middle\",\n\t\t\ttextAlignClass(textAlign),\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\n\nexport type TableCaptionProps = {\n\t/**\n\t * Additional classes for the caption.\n\t */\n\tclassName?: string;\n};\n\nexport function TableCaption({\n\tclassName,\n\t...props\n}: TableCaptionProps & React.HTMLAttributes<HTMLTableCaptionElement>) {\n\treturn (\n\t\t<caption\n\t\t\tclassName={cn(\n\t\t\t\t\"px-basalt-panel-x py-basalt-panel-y text-basalt-base text-basalt-muted-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type TableSortableHeaderProps = {\n\tchildren: React.ReactNode;\n\t/**\n\t * Logical control layout. `end` places the sort icon inward of the label.\n\t * @default \"start\"\n\t */\n\ttextAlign?: TableTextAlign;\n\t/**\n\t * Current sort direction when this column is sorted.\n\t */\n\tsorted?: TableSortDirection;\n\tclassName?: string;\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"children\" | \"className\">;\n\nfunction SortIcon({ sorted }: { sorted?: TableSortDirection }) {\n\tconst Icon = sorted === \"asc\" ? ArrowUp : sorted === \"desc\" ? ArrowDown : ArrowUpDown;\n\treturn (\n\t\t<Icon\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={cn(\n\t\t\t\t\"size-basalt-icon-sm shrink-0\",\n\t\t\t\t!sorted &&\n\t\t\t\t\t\"opacity-0 transition-opacity basalt-motion group-hover:opacity-60 group-focus-visible:opacity-60 motion-reduce:transition-none\",\n\t\t\t)}\n\t\t\tstrokeWidth={1.5}\n\t\t/>\n\t);\n}\n\nexport const TableSortableHeader = React.forwardRef<HTMLButtonElement, TableSortableHeaderProps>(\n\t({ children, textAlign = \"start\", sorted, className, ...props }, ref) => {\n\t\tconst label = (\n\t\t\t<span className=\"flex min-w-0 items-center gap-basalt-control-gap truncate\">{children}</span>\n\t\t);\n\t\tconst icon = <SortIcon sorted={sorted} />;\n\t\treturn (\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"group flex w-full cursor-pointer items-center gap-basalt-space-sm rounded-basalt-sm border-0 bg-transparent p-0 font-inherit text-inherit font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-basalt-primary\",\n\t\t\t\t\ttextAlign === \"end\" ? \"justify-end text-end\" : \"text-start\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{textAlign === \"end\" ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{icon}\n\t\t\t\t\t\t{label}\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{label}\n\t\t\t\t\t\t{icon}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</button>\n\t\t);\n\t},\n);\nTableSortableHeader.displayName = \"TableSortableHeader\";\n"],"mappings":";;;;;;;AAkBA,IAAaG,IAAQF,EAAM,YAGxB,EAAE,cAAW,aAAU,IAAO,GAAGG,KAAS,MAC5C,kBAAC,SAAD;CACM;CACL,qBAAkB;CAClB,gBAAcC,IAAU,SAAS,KAAA;CACjC,WAAWC,EACVC,GACA,+IACAC,CACD;CACA,GAAIJ;AACJ,CAAA,CACD;AACD,EAAM,cAAc;AAIpB,IAAaK,KAAe,MAA4B,kBAAC,SAAD,EAAO,GAAIL,EAAQ,CAAA,GAI9DM,KAAa,MAA0B,kBAAC,SAAD,EAAO,GAAIN,EAAQ,CAAA,GAI1DO,KAAe,MAA4B,kBAAC,SAAD,EAAO,GAAIP,EAAQ,CAAA,GAgB9DQ,KAAY,EACxB,cACA,aAAU,WACV,GAAGR,QAEH,kBAAC,MAAD;CACC,GAAIA;CACJ,iBAAeS,MAAY,cAAoBT,EAAM;CAC1C;AACX,CAAA;AAGF,SAASU,EAAe,GAA4B;CACnD,IAAIC,MAAc,OAAO,OAAO;CAChC,IAAIA,MAAc,SAAS,OAAO;AACnC;AAaA,IAAaC,KAAa,EACzB,cACA,cACA,UACA,GAAGZ,QAEH,kBAAC,MAAD;CACC,WAAWE,EACV,4NACAQ,EAAeC,CAAS,MAAME,KAAS,OAAO,eAAe,KAAA,IAC7DT,CACD;CACO;CACP,GAAIJ;AACJ,CAAA,GAcWc,KAAa,EACzB,cACA,cACA,GAAGd,QAEH,kBAAC,MAAD;CACC,WAAWE,EACV,kGACAQ,EAAeC,CAAS,GACxBP,CACD;CACA,GAAIJ;AACJ,CAAA;AAUF,SAAgBe,EAAa,EAC5B,cACA,GAAGf,KACkE;CACrE,OACC,kBAAC,WAAD;EACC,WAAWE,EACV,qFACAE,CACD;EACA,GAAIJ;CACJ,CAAA;AAEH;AAgBA,SAASgB,EAAS,EAAE,aAA2C;CAE9D,OACC,kBAFYC,MAAW,QAAQC,IAAUD,MAAW,SAASE,IAAYC,GAEzE;EACC,eAAY;EACZ,WAAWlB,EACV,gCACA,CAACe,KACA,gIACF;EACA,aAAa;CACb,CAAA;AAEH;AAEA,IAAaI,IAAsBxB,EAAM,YACvC,EAAE,aAAU,eAAY,SAAS,WAAQ,cAAW,GAAGG,KAAS,MAAQ;CACxE,IAAMsB,IACL,kBAAC,QAAD;EAAM,WAAU;EAA6D;CAAe,CAAA,GAEvFC,IAAO,kBAACP,GAAD,EAAkB,UAAS,CAAA;CACxC,OACC,kBAAC,UAAD;EACC,MAAK;EACA;EACL,WAAWd,EACV,qPACAS,MAAc,QAAQ,yBAAyB,cAC/CP,CACD;EACA,GAAIJ;EAEH,UAAAW,MAAc,QACd,kBAAAf,GAAA,EAAA,UAAA,CACE2B,GACAD,CACA,EAAA,CAAA,IAEF,kBAAA1B,GAAA,EAAA,UAAA,CACE0B,GACAC,CACA,EAAA,CAAA;CAEI,CAAA;AAEV,CACD;AACA,EAAoB,cAAc"}
+{"version":3,"file":"table.js","names":["_Fragment","React","Fragment$1","Table","props","striped","cn","BASALT_UI_CLASS","className","TableHeader","TableBody","TableFooter","TableRow","variant","textAlignClass","textAlign","TableHead","align","TableCell","TableCaption","SortIcon","sorted","ArrowUp","ArrowDown","ArrowUpDown","TableSortableHeader","label","icon"],"sources":["../../src/components/table.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp, ArrowUpDown } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\n/** Logical inline alignment. Maps to CSS `text-align: start | end`. */\nexport type TableTextAlign = \"start\" | \"end\";\nexport type TableSortDirection = \"asc\" | \"desc\";\n\nexport type TableProps = {\n\t/** Paint alternating rows. @default false */\n\tstriped?: boolean;\n\t/**\n\t * Additional classes for the table.\n\t */\n\tclassName?: string;\n};\n\nexport const Table = React.forwardRef<\n\tHTMLTableElement,\n\tTableProps & React.HTMLAttributes<HTMLTableElement>\n>(({ className, striped = false, ...props }, ref) => (\n\t<table\n\t\tref={ref}\n\t\tdata-basalt-table=\"\"\n\t\tdata-striped={striped ? \"true\" : undefined}\n\t\tclassName={cn(\n\t\t\tBASALT_UI_CLASS,\n\t\t\t\"w-full border-separate border-spacing-0 caption-bottom text-start text-basalt-base leading-[var(--basalt-line-body)] text-basalt-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTable.displayName = \"Table\";\n\nexport interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableHeader = (props: TableHeaderProps) => <thead {...props} />;\n\nexport interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableBody = (props: TableBodyProps) => <tbody {...props} />;\n\nexport interface TableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableFooter = (props: TableFooterProps) => <tfoot {...props} />;\n\nexport type TableRowVariant = \"default\" | \"selected\";\n\nexport type TableRowProps = {\n\t/**\n\t * Highlight the row as selected.\n\t * @default \"default\"\n\t */\n\tvariant?: TableRowVariant;\n\t/**\n\t * Additional classes for the row.\n\t */\n\tclassName?: string;\n};\n\nexport const TableRow = ({\n\tclassName,\n\tvariant = \"default\",\n\t...props\n}: TableRowProps & React.HTMLAttributes<HTMLTableRowElement>) => (\n\t<tr\n\t\t{...props}\n\t\taria-selected={variant === \"selected\" ? true : props[\"aria-selected\"]}\n\t\tclassName={className}\n\t/>\n);\n\nfunction textAlignClass(textAlign?: TableTextAlign) {\n\tif (textAlign === \"end\") return \"text-end tabular-nums\";\n\tif (textAlign === \"start\") return \"text-start\";\n}\n\nexport type TableHeadProps = {\n\t/**\n\t * Additional classes for the header cell.\n\t */\n\tclassName?: string;\n\t/**\n\t * Logical inline alignment. Omitted headers keep `text-start` unless native `align` is set.\n\t */\n\ttextAlign?: TableTextAlign;\n};\n\nexport const TableHead = ({\n\tclassName,\n\ttextAlign,\n\talign,\n\t...props\n}: TableHeadProps & React.ThHTMLAttributes<HTMLTableCellElement>) => (\n\t<th\n\t\tclassName={cn(\n\t\t\t\"relative h-basalt-table-row whitespace-nowrap border-b border-basalt-border ps-basalt-table-x pe-basalt-table-x py-basalt-table-y align-middle text-basalt-sm font-medium tracking-[0.04em] text-basalt-muted-foreground\",\n\t\t\ttextAlignClass(textAlign) ?? (align == null ? \"text-start\" : undefined),\n\t\t\tclassName,\n\t\t)}\n\t\talign={align}\n\t\t{...props}\n\t/>\n);\n\nexport type TableCellProps = {\n\t/**\n\t * Additional classes for the cell.\n\t */\n\tclassName?: string;\n\t/**\n\t * Logical inline alignment. Omitted cells inherit from the table or row. Native HTML `align` is unchanged.\n\t */\n\ttextAlign?: TableTextAlign;\n};\n\nexport const TableCell = ({\n\tclassName,\n\ttextAlign,\n\t...props\n}: TableCellProps & React.TdHTMLAttributes<HTMLTableCellElement>) => (\n\t<td\n\t\tclassName={cn(\n\t\t\t\"relative h-basalt-table-row ps-basalt-table-x pe-basalt-table-x py-basalt-table-y align-middle\",\n\t\t\ttextAlignClass(textAlign),\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\n\nexport type TableCaptionProps = {\n\t/**\n\t * Additional classes for the caption.\n\t */\n\tclassName?: string;\n};\n\nexport function TableCaption({\n\tclassName,\n\t...props\n}: TableCaptionProps & React.HTMLAttributes<HTMLTableCaptionElement>) {\n\treturn (\n\t\t<caption\n\t\t\tclassName={cn(\n\t\t\t\t\"px-basalt-panel-x py-basalt-panel-y text-basalt-base text-basalt-muted-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type TableSortableHeaderProps = {\n\tchildren: React.ReactNode;\n\t/**\n\t * Logical control layout. `end` places the sort icon inward of the label.\n\t * @default \"start\"\n\t */\n\ttextAlign?: TableTextAlign;\n\t/**\n\t * Current sort direction when this column is sorted.\n\t */\n\tsorted?: TableSortDirection;\n\tclassName?: string;\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"children\" | \"className\">;\n\nfunction SortIcon({ sorted }: { sorted?: TableSortDirection }) {\n\tconst Icon = sorted === \"asc\" ? ArrowUp : sorted === \"desc\" ? ArrowDown : ArrowUpDown;\n\treturn (\n\t\t<Icon\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={cn(\n\t\t\t\t\"size-basalt-icon-sm shrink-0\",\n\t\t\t\t!sorted &&\n\t\t\t\t\t\"opacity-0 transition-opacity basalt-motion group-hover:opacity-60 group-focus-visible:opacity-60 motion-reduce:transition-none\",\n\t\t\t)}\n\t\t\tstrokeWidth={1.5}\n\t\t/>\n\t);\n}\n\nexport const TableSortableHeader = React.forwardRef<HTMLButtonElement, TableSortableHeaderProps>(\n\t({ children, textAlign = \"start\", sorted, className, ...props }, ref) => {\n\t\tconst label = (\n\t\t\t<span className=\"flex min-w-0 items-center gap-basalt-control-gap truncate\">{children}</span>\n\t\t);\n\t\tconst icon = <SortIcon sorted={sorted} />;\n\t\treturn (\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"basalt-focus group flex w-full cursor-pointer items-center gap-basalt-space-sm rounded-basalt-sm border-0 bg-transparent p-0 font-inherit text-inherit font-medium\",\n\t\t\t\t\ttextAlign === \"end\" ? \"justify-end text-end\" : \"text-start\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{textAlign === \"end\" ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{icon}\n\t\t\t\t\t\t{label}\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{label}\n\t\t\t\t\t\t{icon}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</button>\n\t\t);\n\t},\n);\nTableSortableHeader.displayName = \"TableSortableHeader\";\n"],"mappings":";;;;;;;AAkBA,IAAaG,IAAQF,EAAM,YAGxB,EAAE,cAAW,aAAU,IAAO,GAAGG,KAAS,MAC5C,kBAAC,SAAD;CACM;CACL,qBAAkB;CAClB,gBAAcC,IAAU,SAAS,KAAA;CACjC,WAAWC,EACVC,GACA,+IACAC,CACD;CACA,GAAIJ;AACJ,CAAA,CACD;AACD,EAAM,cAAc;AAIpB,IAAaK,KAAe,MAA4B,kBAAC,SAAD,EAAO,GAAIL,EAAQ,CAAA,GAI9DM,KAAa,MAA0B,kBAAC,SAAD,EAAO,GAAIN,EAAQ,CAAA,GAI1DO,KAAe,MAA4B,kBAAC,SAAD,EAAO,GAAIP,EAAQ,CAAA,GAgB9DQ,KAAY,EACxB,cACA,aAAU,WACV,GAAGR,QAEH,kBAAC,MAAD;CACC,GAAIA;CACJ,iBAAeS,MAAY,cAAoBT,EAAM;CAC1C;AACX,CAAA;AAGF,SAASU,EAAe,GAA4B;CACnD,IAAIC,MAAc,OAAO,OAAO;CAChC,IAAIA,MAAc,SAAS,OAAO;AACnC;AAaA,IAAaC,KAAa,EACzB,cACA,cACA,UACA,GAAGZ,QAEH,kBAAC,MAAD;CACC,WAAWE,EACV,4NACAQ,EAAeC,CAAS,MAAME,KAAS,OAAO,eAAe,KAAA,IAC7DT,CACD;CACO;CACP,GAAIJ;AACJ,CAAA,GAcWc,KAAa,EACzB,cACA,cACA,GAAGd,QAEH,kBAAC,MAAD;CACC,WAAWE,EACV,kGACAQ,EAAeC,CAAS,GACxBP,CACD;CACA,GAAIJ;AACJ,CAAA;AAUF,SAAgBe,EAAa,EAC5B,cACA,GAAGf,KACkE;CACrE,OACC,kBAAC,WAAD;EACC,WAAWE,EACV,qFACAE,CACD;EACA,GAAIJ;CACJ,CAAA;AAEH;AAgBA,SAASgB,EAAS,EAAE,aAA2C;CAE9D,OACC,kBAFYC,MAAW,QAAQC,IAAUD,MAAW,SAASE,IAAYC,GAEzE;EACC,eAAY;EACZ,WAAWlB,EACV,gCACA,CAACe,KACA,gIACF;EACA,aAAa;CACb,CAAA;AAEH;AAEA,IAAaI,IAAsBxB,EAAM,YACvC,EAAE,aAAU,eAAY,SAAS,WAAQ,cAAW,GAAGG,KAAS,MAAQ;CACxE,IAAMsB,IACL,kBAAC,QAAD;EAAM,WAAU;EAA6D;CAAe,CAAA,GAEvFC,IAAO,kBAACP,GAAD,EAAkB,UAAS,CAAA;CACxC,OACC,kBAAC,UAAD;EACC,MAAK;EACA;EACL,WAAWd,EACV,sKACAS,MAAc,QAAQ,yBAAyB,cAC/CP,CACD;EACA,GAAIJ;EAEH,UAAAW,MAAc,QACd,kBAAAf,GAAA,EAAA,UAAA,CACE2B,GACAD,CACA,EAAA,CAAA,IAEF,kBAAA1B,GAAA,EAAA,UAAA,CACE0B,GACAC,CACA,EAAA,CAAA;CAEI,CAAA;AAEV,CACD;AACA,EAAoB,cAAc"}

package/dist/components/tabs.js

@@ -6,7 +6,7 @@ import { useSelectionIndicator as r } from "../utils/selection-indicator.js";
 import * as i from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import * as s from "@radix-ui/react-tabs";
-//#region src/components/tabs.tsx
+// src/components/tabs.tsx
 function c(e) {
 	return {
 		left: e.offsetLeft,
@@ -54,11 +54,10 @@ var d = i.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ a(s.Trigger,
 d.displayName = s.Trigger.displayName;
 var f = i.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ a(s.Content, {
 	ref: i,
-	className: e("mt-basalt-space-lg text-basalt-base text-basalt-foreground data-[state=active]:animate-basalt-tab-in", n, t),
+	className: e("basalt-focus basalt-focus-inset mt-basalt-space-lg text-basalt-base text-basalt-foreground data-[state=active]:animate-basalt-tab-in", n, t),
 	...r
 }));
 f.displayName = s.Content.displayName;
-//#endregion
 export { l as Tabs, f as TabsContent, u as TabsList, d as TabsTrigger };
 
 //# sourceMappingURL=tabs.js.map

package/dist/components/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":["React","TabsPrimitive","measureTabUnderline","item","Tabs","props","cn","BASALT_UI_CLASS","className","TabsList","listRef","useSelectionIndicator","showIndicator","children","motionClassName","state","TabsTrigger","OVERLAY_MOTION","TabsContent"],"sources":["../../src/components/tabs.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { useSelectionIndicator } from \"../utils/selection-indicator\";\nimport { OVERLAY_MOTION } from \"./overlay\";\n\nfunction measureTabUnderline(item: HTMLElement): {\n\tleft: number;\n\twidth: number;\n\ttop: number;\n\theight: number;\n} {\n\treturn {\n\t\tleft: item.offsetLeft,\n\t\twidth: item.offsetWidth,\n\t\ttop: item.offsetTop + item.offsetHeight,\n\t\theight: 0,\n\t};\n}\n\nexport type TabsProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>,\n\t\"value\" | \"defaultValue\" | \"onValueChange\"\n> & {\n\t/**\n\t * The controlled selected tab.\n\t */\n\tvalue?: string;\n\t/**\n\t * The uncontrolled initial tab.\n\t */\n\tdefaultValue?: string;\n\t/**\n\t * Called when the selected tab changes.\n\t */\n\tonValueChange?: (value: string) => void;\n};\nexport const Tabs: React.FC<TabsProps> = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.Root>,\n\tTabsProps\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitive.Root ref={ref} className={cn(BASALT_UI_CLASS, className)} {...props} />\n));\nTabs.displayName = TabsPrimitive.Root.displayName;\n\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {\n\t/**\n\t * Show the sliding active underline.\n\t * @default true\n\t */\n\tshowIndicator?: boolean;\n};\n\nexport const TabsList = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.List>,\n\tTabsListProps\n>(({ className, children, showIndicator = true, ...props }, ref) => {\n\tconst {\n\t\tref: listRef,\n\t\tstate,\n\t\tmotionClassName,\n\t} = useSelectionIndicator({\n\t\titemSelector: '[role=\"tab\"][data-state=\"active\"]',\n\t\tenabled: showIndicator,\n\t\tmapGeometry: measureTabUnderline,\n\t\tref,\n\t});\n\n\treturn (\n\t\t<TabsPrimitive.List\n\t\t\tref={listRef}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex flex-wrap items-center gap-basalt-space-sm border-b border-basalt-border\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t{showIndicator ? (\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tdata-slot=\"selection-indicator\"\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"pointer-events-none absolute h-basalt-0_5 bg-basalt-primary\",\n\t\t\t\t\t\tmotionClassName,\n\t\t\t\t\t)}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\ttransform: `translate(${state.left}px, ${state.top}px)`,\n\t\t\t\t\t\twidth: state.visible ? state.width : 0,\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t</TabsPrimitive.List>\n\t);\n});\nTabsList.displayName = TabsPrimitive.List.displayName;\n\nexport type TabsTriggerProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n\t\"disabled\" | \"value\"\n> & {\n\t/**\n\t * The tab value.\n\t */\n\tvalue: string;\n\t/**\n\t * Disable the tab trigger.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nexport const TabsTrigger = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.Trigger>,\n\tTabsTriggerProps\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitive.Trigger\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"basalt-action inline-flex items-center justify-center font-medium text-basalt-muted-foreground transition-colors basalt-motion hover:text-basalt-foreground data-[state=active]:text-basalt-selected-foreground\",\n\t\t\tOVERLAY_MOTION,\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\n\nexport type TabsContentProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>,\n\t\"value\"\n> & {\n\t/**\n\t * The tab value this panel belongs to.\n\t */\n\tvalue: string;\n};\n\nexport const TabsContent = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.Content>,\n\tTabsContentProps\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitive.Content\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"mt-basalt-space-lg text-basalt-base text-basalt-foreground data-[state=active]:animate-basalt-tab-in\",\n\t\t\tOVERLAY_MOTION,\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n"],"mappings":";;;;;;;;;AAOA,SAASE,EAAoB,GAK3B;CACD,OAAO;EACN,MAAMC,EAAK;EACX,OAAOA,EAAK;EACZ,KAAKA,EAAK,YAAYA,EAAK;EAC3B,QAAQ;CACT;AACD;AAmBA,IAAaC,IAA4BJ,EAAM,YAG5C,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACJ,EAAc,MAAf;CAAyB;CAAK,WAAWK,EAAGC,GAAiBC,CAAS;CAAG,GAAIH;AAAQ,CAAA,CACrF;AACD,EAAK,cAAcJ,EAAc,KAAK;AAUtC,IAAaQ,IAAWT,EAAM,YAG3B,EAAE,cAAW,aAAU,mBAAgB,IAAM,GAAGK,KAAS,MAAQ;CACnE,IAAM,EACL,KAAKK,GACL,UACA,uBACGC,EAAsB;EACzB,cAAc;EACd,SAASC;EACT,aAAaV;EACb;CACD,CAAC;CAED,OACC,kBAACD,EAAc,MAAf;EACC,KAAKS;EACL,WAAWJ,EACV,0FACAE,CACD;EACA,GAAIH;EANL,UAAA,CAQEQ,GACAD,IACA,kBAAC,QAAD;GACC,eAAY;GACZ,aAAU;GACV,WAAWN,EACV,+DACAQ,CACD;GACA,OAAO;IACN,MAAM;IACN,WAAW,aAAaC,EAAM,KAAK,MAAMA,EAAM,IAAI;IACnD,OAAOA,EAAM,UAAUA,EAAM,QAAQ;IACrC,KAAK;GACN;EACA,CAAA,IACE,IACe;;AAEtB,CAAC;AACD,EAAS,cAAcd,EAAc,KAAK;AAiB1C,IAAae,IAAchB,EAAM,YAG9B,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACJ,EAAc,SAAf;CACM;CACL,WAAWK,EACV,mNACAW,GACAT,CACD;CACA,GAAIH;AACJ,CAAA,CACD;AACD,EAAY,cAAcJ,EAAc,QAAQ;AAYhD,IAAaiB,IAAclB,EAAM,YAG9B,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACJ,EAAc,SAAf;CACM;CACL,WAAWK,EACV,wGACAW,GACAT,CACD;CACA,GAAIH;AACJ,CAAA,CACD;AACD,EAAY,cAAcJ,EAAc,QAAQ"}
+{"version":3,"file":"tabs.js","names":["React","TabsPrimitive","measureTabUnderline","item","Tabs","props","cn","BASALT_UI_CLASS","className","TabsList","listRef","useSelectionIndicator","showIndicator","children","motionClassName","state","TabsTrigger","OVERLAY_MOTION","TabsContent"],"sources":["../../src/components/tabs.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { useSelectionIndicator } from \"../utils/selection-indicator\";\nimport { OVERLAY_MOTION } from \"./overlay\";\n\nfunction measureTabUnderline(item: HTMLElement): {\n\tleft: number;\n\twidth: number;\n\ttop: number;\n\theight: number;\n} {\n\treturn {\n\t\tleft: item.offsetLeft,\n\t\twidth: item.offsetWidth,\n\t\ttop: item.offsetTop + item.offsetHeight,\n\t\theight: 0,\n\t};\n}\n\nexport type TabsProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>,\n\t\"value\" | \"defaultValue\" | \"onValueChange\"\n> & {\n\t/**\n\t * The controlled selected tab.\n\t */\n\tvalue?: string;\n\t/**\n\t * The uncontrolled initial tab.\n\t */\n\tdefaultValue?: string;\n\t/**\n\t * Called when the selected tab changes.\n\t */\n\tonValueChange?: (value: string) => void;\n};\nexport const Tabs: React.FC<TabsProps> = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.Root>,\n\tTabsProps\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitive.Root ref={ref} className={cn(BASALT_UI_CLASS, className)} {...props} />\n));\nTabs.displayName = TabsPrimitive.Root.displayName;\n\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {\n\t/**\n\t * Show the sliding active underline.\n\t * @default true\n\t */\n\tshowIndicator?: boolean;\n};\n\nexport const TabsList = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.List>,\n\tTabsListProps\n>(({ className, children, showIndicator = true, ...props }, ref) => {\n\tconst {\n\t\tref: listRef,\n\t\tstate,\n\t\tmotionClassName,\n\t} = useSelectionIndicator({\n\t\titemSelector: '[role=\"tab\"][data-state=\"active\"]',\n\t\tenabled: showIndicator,\n\t\tmapGeometry: measureTabUnderline,\n\t\tref,\n\t});\n\n\treturn (\n\t\t<TabsPrimitive.List\n\t\t\tref={listRef}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex flex-wrap items-center gap-basalt-space-sm border-b border-basalt-border\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t{showIndicator ? (\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tdata-slot=\"selection-indicator\"\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"pointer-events-none absolute h-basalt-0_5 bg-basalt-primary\",\n\t\t\t\t\t\tmotionClassName,\n\t\t\t\t\t)}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\ttransform: `translate(${state.left}px, ${state.top}px)`,\n\t\t\t\t\t\twidth: state.visible ? state.width : 0,\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t</TabsPrimitive.List>\n\t);\n});\nTabsList.displayName = TabsPrimitive.List.displayName;\n\nexport type TabsTriggerProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n\t\"disabled\" | \"value\"\n> & {\n\t/**\n\t * The tab value.\n\t */\n\tvalue: string;\n\t/**\n\t * Disable the tab trigger.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nexport const TabsTrigger = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.Trigger>,\n\tTabsTriggerProps\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitive.Trigger\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"basalt-action inline-flex items-center justify-center font-medium text-basalt-muted-foreground transition-colors basalt-motion hover:text-basalt-foreground data-[state=active]:text-basalt-selected-foreground\",\n\t\t\tOVERLAY_MOTION,\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\n\nexport type TabsContentProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>,\n\t\"value\"\n> & {\n\t/**\n\t * The tab value this panel belongs to.\n\t */\n\tvalue: string;\n};\n\nexport const TabsContent = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.Content>,\n\tTabsContentProps\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitive.Content\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"basalt-focus basalt-focus-inset mt-basalt-space-lg text-basalt-base text-basalt-foreground data-[state=active]:animate-basalt-tab-in\",\n\t\t\tOVERLAY_MOTION,\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n"],"mappings":";;;;;;;;;AAOA,SAASE,EAAoB,GAK3B;CACD,OAAO;EACN,MAAMC,EAAK;EACX,OAAOA,EAAK;EACZ,KAAKA,EAAK,YAAYA,EAAK;EAC3B,QAAQ;CACT;AACD;AAmBA,IAAaC,IAA4BJ,EAAM,YAG5C,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACJ,EAAc,MAAf;CAAyB;CAAK,WAAWK,EAAGC,GAAiBC,CAAS;CAAG,GAAIH;AAAQ,CAAA,CACrF;AACD,EAAK,cAAcJ,EAAc,KAAK;AAUtC,IAAaQ,IAAWT,EAAM,YAG3B,EAAE,cAAW,aAAU,mBAAgB,IAAM,GAAGK,KAAS,MAAQ;CACnE,IAAM,EACL,KAAKK,GACL,UACA,uBACGC,EAAsB;EACzB,cAAc;EACd,SAASC;EACT,aAAaV;EACb;CACD,CAAC;CAED,OACC,kBAACD,EAAc,MAAf;EACC,KAAKS;EACL,WAAWJ,EACV,0FACAE,CACD;EACA,GAAIH;EANL,UAAA,CAQEQ,GACAD,IACA,kBAAC,QAAD;GACC,eAAY;GACZ,aAAU;GACV,WAAWN,EACV,+DACAQ,CACD;GACA,OAAO;IACN,MAAM;IACN,WAAW,aAAaC,EAAM,KAAK,MAAMA,EAAM,IAAI;IACnD,OAAOA,EAAM,UAAUA,EAAM,QAAQ;IACrC,KAAK;GACN;EACA,CAAA,IACE,IACe;;AAEtB,CAAC;AACD,EAAS,cAAcd,EAAc,KAAK;AAiB1C,IAAae,IAAchB,EAAM,YAG9B,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACJ,EAAc,SAAf;CACM;CACL,WAAWK,EACV,mNACAW,GACAT,CACD;CACA,GAAIH;AACJ,CAAA,CACD;AACD,EAAY,cAAcJ,EAAc,QAAQ;AAYhD,IAAaiB,IAAclB,EAAM,YAG9B,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACJ,EAAc,SAAf;CACM;CACL,WAAWK,EACV,wIACAW,GACAT,CACD;CACA,GAAIH;AACJ,CAAA,CACD;AACD,EAAY,cAAcJ,EAAc,QAAQ"}

package/dist/components/tag-badge.js

@@ -2,7 +2,7 @@
 import { cn as e } from "../utils/cn.js";
 import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
 import { jsx as n } from "react/jsx-runtime";
-//#region src/components/tag-badge.tsx
+// src/components/tag-badge.tsx
 var r = {
 	slate: {
 		label: "Slate",
@@ -66,7 +66,6 @@ function o({ name: i, colorKey: o, color: s, size: c = "md", className: l, ...u
 		children: i
 	});
 }
-//#endregion
 export { r as TAG_COLORS, o as TagBadge, a as tagColorFor };
 
 //# sourceMappingURL=tag-badge.js.map

package/dist/components/tag-color-picker.js

@@ -1,13 +1,13 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
 import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
-import { FOCUS_INSET as n } from "./overlay.js";
+import { FOCUS_RING as n } from "./overlay.js";
 import { TAG_COLORS as r } from "./tag-badge.js";
 import { useState as i } from "react";
 import { Check as a } from "lucide-react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import * as c from "@radix-ui/react-radio-group";
-//#region src/components/tag-color-picker.tsx
+// src/components/tag-color-picker.tsx
 var l = Object.keys(r);
 function u({ label: u, value: d, defaultValue: f = "slate", onValueChange: p, colors: m = l, labels: h, disabled: g = !1, id: _, "aria-invalid": v, "aria-describedby": y, className: b }) {
 	let [x, S] = i(f), C = d ?? x;
@@ -26,7 +26,7 @@ function u({ label: u, value: d, defaultValue: f = "slate", onValueChange: p, co
 		children: m.map((t) => /* @__PURE__ */ s(c.Item, {
 			value: t,
 			"aria-label": h?.[t] ?? r[t].label,
-			className: e("group flex min-w-0 items-center gap-basalt-space-lg rounded-basalt-md p-basalt-space-lg text-left text-basalt-foreground transition-colors hover:bg-basalt-hover data-[state=checked]:bg-basalt-primary data-[state=checked]:text-basalt-primary-foreground disabled:cursor-not-allowed disabled:opacity-50", n, "data-[state=checked]:focus-visible:ring-basalt-primary-foreground"),
+			className: e("group flex min-w-0 items-center gap-basalt-space-lg rounded-basalt-md p-basalt-space-lg text-left text-basalt-foreground transition-colors hover:bg-basalt-hover data-[state=checked]:bg-basalt-primary data-[state=checked]:text-basalt-primary-foreground disabled:cursor-not-allowed disabled:opacity-50", n),
 			children: [
 				/* @__PURE__ */ o("span", {
 					"aria-hidden": "true",
@@ -44,7 +44,6 @@ function u({ label: u, value: d, defaultValue: f = "slate", onValueChange: p, co
 		}, t))
 	});
 }
-//#endregion
 export { u as TagColorPicker };
 
 //# sourceMappingURL=tag-color-picker.js.map

package/dist/components/tag-color-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag-color-picker.js","names":["RadioGroupPrimitive","ALL_COLORS","TAG_COLORS","TagColorPicker","ariaInvalid","describedBy","localValue","setLocalValue","useState","defaultValue","selected","value","label","cn","BASALT_UI_CLASS","className","color","next","onValueChange","colors","labels","FOCUS_INSET","Check"],"sources":["../../src/components/tag-color-picker.tsx"],"sourcesContent":["import * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport { Check } from \"lucide-react\";\nimport { type AriaAttributes, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { FOCUS_INSET } from \"./overlay\";\nimport { TAG_COLORS, type TagColor } from \"./tag-badge\";\n\nexport interface TagColorPickerProps {\n\t/** Accessible group name. */\n\tlabel: string;\n\t/** Controlled named color. */\n\tvalue?: TagColor;\n\t/** Initial uncontrolled color. @default \"slate\" */\n\tdefaultValue?: TagColor;\n\t/** Color selection request. */\n\tonValueChange?: (value: TagColor) => void;\n\t/** Allowed color subset, in caller-defined order. */\n\tcolors?: readonly TagColor[];\n\t/** Localized visible and accessible color names. */\n\tlabels?: Partial<Record<TagColor, string>>;\n\t/** Disable the picker. @default false */\n\tdisabled?: boolean;\n\t/** Forwarded to the radio group so Field and Label can own it. */\n\tid?: string;\n\t/** Forwarded to the radio group; Field sets it while the value is invalid. */\n\t\"aria-invalid\"?: AriaAttributes[\"aria-invalid\"];\n\t/** Forwarded to the radio group; Field points it at the hint or error. */\n\t\"aria-describedby\"?: string;\n\t/** Additional root classes. */\n\tclassName?: string;\n}\nconst ALL_COLORS = Object.keys(TAG_COLORS) as TagColor[];\nexport function TagColorPicker({\n\tlabel,\n\tvalue,\n\tdefaultValue = \"slate\",\n\tonValueChange,\n\tcolors = ALL_COLORS,\n\tlabels,\n\tdisabled = false,\n\tid,\n\t\"aria-invalid\": ariaInvalid,\n\t\"aria-describedby\": describedBy,\n\tclassName,\n}: TagColorPickerProps) {\n\tconst [localValue, setLocalValue] = useState(defaultValue);\n\tconst selected = value ?? localValue;\n\treturn (\n\t\t<RadioGroupPrimitive.Root\n\t\t\tvalue={selected}\n\t\t\tid={id}\n\t\t\taria-label={label}\n\t\t\taria-invalid={ariaInvalid}\n\t\t\taria-describedby={describedBy}\n\t\t\tdisabled={disabled}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"grid w-full min-w-0 max-w-3xl grid-cols-[repeat(auto-fit,minmax(min(100%,9rem),1fr))] gap-basalt-space-lg\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonValueChange={(next) => {\n\t\t\t\tconst color = next as TagColor;\n\t\t\t\tif (value === undefined) setLocalValue(color);\n\t\t\t\tonValueChange?.(color);\n\t\t\t}}\n\t\t>\n\t\t\t{colors.map((color) => (\n\t\t\t\t<RadioGroupPrimitive.Item\n\t\t\t\t\tkey={color}\n\t\t\t\t\tvalue={color}\n\t\t\t\t\taria-label={labels?.[color] ?? TAG_COLORS[color].label}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t// Accent choice grid: the selected tile owns the primary fill and its\n\t\t\t\t\t\t// contrast-corrected foreground, not a control fill inside a frame.\n\t\t\t\t\t\t\"group flex min-w-0 items-center gap-basalt-space-lg rounded-basalt-md p-basalt-space-lg text-left text-basalt-foreground transition-colors hover:bg-basalt-hover data-[state=checked]:bg-basalt-primary data-[state=checked]:text-basalt-primary-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\t\tFOCUS_INSET,\n\t\t\t\t\t\t\"data-[state=checked]:focus-visible:ring-basalt-primary-foreground\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"size-basalt-7 shrink-0 rounded-basalt-md border\",\n\t\t\t\t\t\t\tTAG_COLORS[color].className,\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t\t<span className=\"min-w-0 flex-1 break-words text-basalt-sm font-medium\">\n\t\t\t\t\t\t{labels?.[color] ?? TAG_COLORS[color].label}\n\t\t\t\t\t</span>\n\t\t\t\t\t<Check\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName=\"size-basalt-icon shrink-0 opacity-0 group-data-[state=checked]:opacity-100\"\n\t\t\t\t\t/>\n\t\t\t\t</RadioGroupPrimitive.Item>\n\t\t\t))}\n\t\t</RadioGroupPrimitive.Root>\n\t);\n}\n"],"mappings":";;;;;;;;;;AAgCA,IAAMC,IAAa,OAAO,KAAKC,CAAU;AACzC,SAAgBC,EAAe,EAC9B,UACA,UACA,kBAAe,SACf,kBACA,YAASF,GACT,WACA,cAAW,IACX,OACA,gBAAgBG,GAChB,oBAAoBC,GACpB,gBACuB;CACvB,IAAM,CAACC,GAAYC,KAAiBC,EAASC,CAAY,GACnDC,IAAWC,KAASL;CAC1B,OACC,kBAACN,EAAoB,MAArB;EACC,OAAOU;EACH;EACJ,cAAYE;EACZ,gBAAcR;EACd,oBAAkBC;EACR;EACV,WAAWQ,EACVC,GACA,6GACAC,CACD;EACA,gBAAgB,MAAS;GACxB,IAAMC,IAAQC;GAEd,AADIN,MAAU,KAAA,KAAWJ,EAAcS,CAAK,GAC5CE,IAAgBF,CAAK;EACtB;EAEC,UAAAG,EAAO,KAAK,MACZ,kBAACnB,EAAoB,MAArB;GAEC,OAAOgB;GACP,cAAYI,IAASJ,MAAUd,EAAWc,EAAM,CAAC;GACjD,WAAWH,EAGV,+SACAQ,GACA,mEACD;GAVD,UAAA;IAYC,kBAAC,QAAD;KACC,eAAY;KACZ,WAAWR,EACV,mDACAX,EAAWc,EAAM,CAAC,SACnB;IACA,CAAA;IACD,kBAAC,QAAD;KAAM,WAAU;KACd,UAAAI,IAASJ,MAAUd,EAAWc,EAAM,CAAC;IACjC,CAAA;IACN,kBAACM,GAAD;KACC,eAAY;KACZ,WAAU;IACV,CAAA;GACwB;EAzBpB,GAAAN,CAyBoB,CAC1B;CACwB,CAAA;AAE5B"}
+{"version":3,"file":"tag-color-picker.js","names":["RadioGroupPrimitive","ALL_COLORS","TAG_COLORS","TagColorPicker","ariaInvalid","describedBy","localValue","setLocalValue","useState","defaultValue","selected","value","label","cn","BASALT_UI_CLASS","className","color","next","onValueChange","colors","labels","FOCUS_RING","Check"],"sources":["../../src/components/tag-color-picker.tsx"],"sourcesContent":["import * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport { Check } from \"lucide-react\";\nimport { type AriaAttributes, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { FOCUS_RING } from \"./overlay\";\nimport { TAG_COLORS, type TagColor } from \"./tag-badge\";\n\nexport interface TagColorPickerProps {\n\t/** Accessible group name. */\n\tlabel: string;\n\t/** Controlled named color. */\n\tvalue?: TagColor;\n\t/** Initial uncontrolled color. @default \"slate\" */\n\tdefaultValue?: TagColor;\n\t/** Color selection request. */\n\tonValueChange?: (value: TagColor) => void;\n\t/** Allowed color subset, in caller-defined order. */\n\tcolors?: readonly TagColor[];\n\t/** Localized visible and accessible color names. */\n\tlabels?: Partial<Record<TagColor, string>>;\n\t/** Disable the picker. @default false */\n\tdisabled?: boolean;\n\t/** Forwarded to the radio group so Field and Label can own it. */\n\tid?: string;\n\t/** Forwarded to the radio group; Field sets it while the value is invalid. */\n\t\"aria-invalid\"?: AriaAttributes[\"aria-invalid\"];\n\t/** Forwarded to the radio group; Field points it at the hint or error. */\n\t\"aria-describedby\"?: string;\n\t/** Additional root classes. */\n\tclassName?: string;\n}\nconst ALL_COLORS = Object.keys(TAG_COLORS) as TagColor[];\nexport function TagColorPicker({\n\tlabel,\n\tvalue,\n\tdefaultValue = \"slate\",\n\tonValueChange,\n\tcolors = ALL_COLORS,\n\tlabels,\n\tdisabled = false,\n\tid,\n\t\"aria-invalid\": ariaInvalid,\n\t\"aria-describedby\": describedBy,\n\tclassName,\n}: TagColorPickerProps) {\n\tconst [localValue, setLocalValue] = useState(defaultValue);\n\tconst selected = value ?? localValue;\n\treturn (\n\t\t<RadioGroupPrimitive.Root\n\t\t\tvalue={selected}\n\t\t\tid={id}\n\t\t\taria-label={label}\n\t\t\taria-invalid={ariaInvalid}\n\t\t\taria-describedby={describedBy}\n\t\t\tdisabled={disabled}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"grid w-full min-w-0 max-w-3xl grid-cols-[repeat(auto-fit,minmax(min(100%,9rem),1fr))] gap-basalt-space-lg\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonValueChange={(next) => {\n\t\t\t\tconst color = next as TagColor;\n\t\t\t\tif (value === undefined) setLocalValue(color);\n\t\t\t\tonValueChange?.(color);\n\t\t\t}}\n\t\t>\n\t\t\t{colors.map((color) => (\n\t\t\t\t<RadioGroupPrimitive.Item\n\t\t\t\t\tkey={color}\n\t\t\t\t\tvalue={color}\n\t\t\t\t\taria-label={labels?.[color] ?? TAG_COLORS[color].label}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t// Accent choice grid: the selected tile owns the primary fill and its\n\t\t\t\t\t\t// contrast-corrected foreground, not a control fill inside a frame.\n\t\t\t\t\t\t\"group flex min-w-0 items-center gap-basalt-space-lg rounded-basalt-md p-basalt-space-lg text-left text-basalt-foreground transition-colors hover:bg-basalt-hover data-[state=checked]:bg-basalt-primary data-[state=checked]:text-basalt-primary-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\t\tFOCUS_RING,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"size-basalt-7 shrink-0 rounded-basalt-md border\",\n\t\t\t\t\t\t\tTAG_COLORS[color].className,\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t\t<span className=\"min-w-0 flex-1 break-words text-basalt-sm font-medium\">\n\t\t\t\t\t\t{labels?.[color] ?? TAG_COLORS[color].label}\n\t\t\t\t\t</span>\n\t\t\t\t\t<Check\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName=\"size-basalt-icon shrink-0 opacity-0 group-data-[state=checked]:opacity-100\"\n\t\t\t\t\t/>\n\t\t\t\t</RadioGroupPrimitive.Item>\n\t\t\t))}\n\t\t</RadioGroupPrimitive.Root>\n\t);\n}\n"],"mappings":";;;;;;;;;;AAgCA,IAAMC,IAAa,OAAO,KAAKC,CAAU;AACzC,SAAgBC,EAAe,EAC9B,UACA,UACA,kBAAe,SACf,kBACA,YAASF,GACT,WACA,cAAW,IACX,OACA,gBAAgBG,GAChB,oBAAoBC,GACpB,gBACuB;CACvB,IAAM,CAACC,GAAYC,KAAiBC,EAASC,CAAY,GACnDC,IAAWC,KAASL;CAC1B,OACC,kBAACN,EAAoB,MAArB;EACC,OAAOU;EACH;EACJ,cAAYE;EACZ,gBAAcR;EACd,oBAAkBC;EACR;EACV,WAAWQ,EACVC,GACA,6GACAC,CACD;EACA,gBAAgB,MAAS;GACxB,IAAMC,IAAQC;GAEd,AADIN,MAAU,KAAA,KAAWJ,EAAcS,CAAK,GAC5CE,IAAgBF,CAAK;EACtB;EAEC,UAAAG,EAAO,KAAK,MACZ,kBAACnB,EAAoB,MAArB;GAEC,OAAOgB;GACP,cAAYI,IAASJ,MAAUd,EAAWc,EAAM,CAAC;GACjD,WAAWH,EAGV,+SACAQ,CACD;GATD,UAAA;IAWC,kBAAC,QAAD;KACC,eAAY;KACZ,WAAWR,EACV,mDACAX,EAAWc,EAAM,CAAC,SACnB;IACA,CAAA;IACD,kBAAC,QAAD;KAAM,WAAU;KACd,UAAAI,IAASJ,MAAUd,EAAWc,EAAM,CAAC;IACjC,CAAA;IACN,kBAACM,GAAD;KACC,eAAY;KACZ,WAAU;IACV,CAAA;GACwB;EAxBpB,GAAAN,CAwBoB,CAC1B;CACwB,CAAA;AAE5B"}

package/dist/components/text.js

@@ -3,7 +3,7 @@ import { cn as e } from "../utils/cn.js";
 import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
 import * as n from "react";
 import { cva as r } from "class-variance-authority";
-//#region src/components/text.tsx
+// src/components/text.tsx
 var i = r("text-basalt-foreground", {
 	variants: {
 		size: {
@@ -41,7 +41,6 @@ var s = n.forwardRef(({ as: r, bold: s = !1, className: c, size: l, tone: u = "d
 	});
 });
 s.displayName = "Text";
-//#endregion
 export { s as Text };
 
 //# sourceMappingURL=text.js.map

package/dist/components/theme-toggle.js

@@ -3,7 +3,7 @@ import { Button as e } from "./button.js";
 import { useTheme as t } from "../providers/theme.js";
 import { Monitor as n, Moon as r, Sun as i } from "lucide-react";
 import { jsx as a } from "react/jsx-runtime";
-//#region src/components/theme-toggle.tsx
+// src/components/theme-toggle.tsx
 var o = {
 	className: "h-basalt-4 w-basalt-4",
 	"aria-hidden": !0,
@@ -22,7 +22,6 @@ function s({ "aria-label": s }) {
 		children: a(c === "system" ? n : c === "dark" ? r : i, { ...o })
 	});
 }
-//#endregion
 export { s as ThemeToggle };
 
 //# sourceMappingURL=theme-toggle.js.map

package/dist/components/thinking.js

@@ -5,7 +5,7 @@ import { useThinkingViewModel as i } from "../viewmodels/use-thinking.js";
 import { Loader as a } from "./loader.js";
 import { Check as o, Circle as s, CircleAlert as c, Code as l, Search as u, Sparkles as d } from "lucide-react";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
-//#region src/components/thinking.tsx
+// src/components/thinking.tsx
 function m({ steps: m, variant: h = "steps", title: g, className: _, ...v }) {
 	let y = i({
 		steps: m,
@@ -79,7 +79,6 @@ function m({ steps: m, variant: h = "steps", title: g, className: _, ...v }) {
 		})]
 	});
 }
-//#endregion
 export { m as Thinking };
 
 //# sourceMappingURL=thinking.js.map

package/dist/components/toast.js

@@ -2,7 +2,7 @@
 import { Check as e, CircleAlert as t, Info as n, TriangleAlert as r, X as i } from "lucide-react";
 import { jsx as a } from "react/jsx-runtime";
 import { Toaster as o, toast as s } from "sonner";
-//#region src/components/toast.tsx
+// src/components/toast.tsx
 var c = {
 	default: "bg-basalt-popover",
 	success: "bg-basalt-heatmap-green-1 [&_[data-icon]]:text-basalt-heatmap-green-4 [&_[data-title]]:text-basalt-heatmap-green-4",
@@ -63,7 +63,7 @@ function p({ closeButton: s = !0, ...l }) {
 				toast: "basalt-ui basalt-toast flex w-full items-center gap-basalt-space-lg rounded-basalt-md bg-basalt-popover px-basalt-card-lg py-basalt-card text-basalt-base leading-[var(--basalt-leading-banner)] text-basalt-foreground shadow-lg [&_[data-content]]:min-w-0 [&_[data-content]]:flex-1",
 				title: "font-medium",
 				description: "text-basalt-sm leading-[var(--basalt-line-relaxed)] text-basalt-muted-foreground",
-				closeButton: "basalt-action basalt-action-icon order-last inline-flex shrink-0 cursor-pointer items-center justify-center rounded-basalt-sm text-basalt-muted-foreground hover:bg-basalt-hover hover:text-basalt-foreground focus-visible:ring-2 focus-visible:ring-basalt-ring",
+				closeButton: "basalt-action basalt-action-icon order-last inline-flex shrink-0 cursor-pointer items-center justify-center rounded-basalt-sm text-basalt-muted-foreground hover:bg-basalt-hover hover:text-basalt-foreground",
 				actionButton: "basalt-action shrink-0 cursor-pointer rounded-basalt-sm bg-basalt-primary text-basalt-primary-foreground hover:bg-basalt-primary-hover",
 				cancelButton: "basalt-action shrink-0 cursor-pointer rounded-basalt-sm bg-basalt-control hover:bg-basalt-hover",
 				icon: "flex size-basalt-icon-lg shrink-0 items-center justify-center",
@@ -77,7 +77,6 @@ function p({ closeButton: s = !0, ...l }) {
 	});
 }
 var m = p;
-//#endregion
 export { m as Toast, p as Toaster, f as toast };
 
 //# sourceMappingURL=toast.js.map