@nocoo/basalt 2.0.0-rc.1 → 2.0.2

package/dist/components/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","names":[],"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 { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"./collapsible\";\nimport { Dialog, DialogOverlay, DialogPortal } from \"./dialog\";\nimport { OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\nimport { SkeletonLine } from \"./skeleton-line\";\n\nexport type SidebarSide = \"left\" | \"right\";\n\ntype SidebarContextValue = {\n\tcollapsed: boolean;\n\tsetCollapsed: (next: boolean) => void;\n\tside: SidebarSide;\n\tloading: boolean;\n\tpeek: boolean;\n\tpeeking: boolean;\n\tsetPeeking: (next: boolean) => void;\n\toverlay: boolean;\n\twidth: number;\n\tsetWidth: (next: number) => void;\n\tlastFocusRef: RefObject<HTMLElement | null>;\n};\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\nexport function useSidebar() {\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 * Expanded width in pixels.\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-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 className=\"flex flex-col gap-2 p-3\" role=\"status\" aria-live=\"polite\">\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\t\"relative flex h-screen shrink-0 flex-col bg-basalt-background text-sm 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\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-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 top-0 transition-all duration-300 ease-in-out\",\n\t\t\t\tside === \"right\" ? \"order-last\" : undefined,\n\t\t\t\tcollapsed ? \"w-[68px] overflow-y-hidden\" : \"overflow-hidden\",\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\nexport function SidebarHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n\treturn <div className={cn(\"flex h-14 shrink-0 items-center px-3\", className)} {...props} />;\n}\n\nexport function SidebarSearch({\n\tshortcut = \"⌘K\",\n\tclassName,\n\tchildren,\n\t...props\n}: ButtonHTMLAttributes<HTMLButtonElement> & { shortcut?: string }) {\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex w-full cursor-pointer items-center gap-3 rounded-lg bg-basalt-secondary px-3 py-1.5 transition-colors hover:bg-basalt-accent\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<Search className=\"h-4 w-4 text-basalt-muted-foreground\" strokeWidth={1.5} />\n\t\t\t<span className=\"flex-1 text-left text-sm text-basalt-muted-foreground\">{children}</span>\n\t\t\t<kbd className=\"pointer-events-none hidden rounded-sm border border-basalt-border bg-basalt-card px-1.5 py-0.5 text-[10px] 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 function SidebarNav({ className, ...props }: HTMLAttributes<HTMLElement>) {\n\treturn (\n\t\t<nav className={cn(\"flex min-h-0 flex-1 flex-col overflow-y-auto\", className)} {...props} />\n\t);\n}\n\nexport function SidebarPartition({ className, ...props }: HTMLAttributes<HTMLParagraphElement>) {\n\treturn (\n\t\t<p\n\t\t\tclassName={cn(\n\t\t\t\t\"px-6 pt-3 pb-1 text-[11px] font-medium tracking-[0.14em] text-basalt-muted-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\tclassName={cn(\n\t\t\t\t\"flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-normal transition-colors\",\n\t\t\t\tactive\n\t\t\t\t\t? \"bg-basalt-accent text-basalt-foreground\"\n\t\t\t\t\t: \"text-basalt-muted-foreground hover:bg-basalt-accent hover:text-basalt-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport function SidebarIconItem({\n\tactive = false,\n\tclassName,\n\t...props\n}: ButtonHTMLAttributes<HTMLButtonElement> & { active?: boolean }) {\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\taria-current={active ? \"page\" : undefined}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex h-10 w-10 items-center justify-center rounded-lg transition-colors\",\n\t\t\t\tactive\n\t\t\t\t\t? \"bg-basalt-accent text-basalt-foreground\"\n\t\t\t\t\t: \"text-basalt-muted-foreground hover:bg-basalt-accent hover:text-basalt-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport function SidebarGroup({\n\tlabel,\n\tdefaultOpen = true,\n\tchildren,\n}: {\n\tlabel: ReactNode;\n\tdefaultOpen?: boolean;\n\tchildren: ReactNode;\n}) {\n\tconst [open, setOpen] = useState(defaultOpen);\n\treturn (\n\t\t<Collapsible open={open} onOpenChange={setOpen}>\n\t\t\t<div className=\"mt-2 px-3\">\n\t\t\t\t<CollapsibleTrigger asChild>\n\t\t\t\t\t<button type=\"button\" className=\"flex w-full items-center justify-between px-3 py-2.5\">\n\t\t\t\t\t\t<span className=\"text-sm font-normal text-basalt-muted-foreground\">{label}</span>\n\t\t\t\t\t\t<span className=\"flex h-7 w-7 shrink-0 items-center justify-center\">\n\t\t\t\t\t\t\t<ChevronUp\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"h-4 w-4 text-basalt-muted-foreground transition-transform duration-200\",\n\t\t\t\t\t\t\t\t\tOVERLAY_MOTION,\n\t\t\t\t\t\t\t\t\t!open && \"rotate-180\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t</CollapsibleTrigger>\n\t\t\t</div>\n\t\t\t<CollapsibleContent unstyled>\n\t\t\t\t<div className=\"flex flex-col gap-0.5 px-3\">{children}</div>\n\t\t\t</CollapsibleContent>\n\t\t</Collapsible>\n\t);\n}\n\nexport function SidebarFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n\treturn <div className={cn(\"px-4 py-3\", className)} {...props} />;\n}\n\nexport function SidebarUser({\n\tname,\n\temail,\n\tavatar,\n\taction,\n\tclassName,\n}: {\n\tname: ReactNode;\n\temail?: ReactNode;\n\tavatar?: ReactNode;\n\taction?: ReactNode;\n\tclassName?: string;\n}) {\n\treturn (\n\t\t<div className={cn(\"flex items-center gap-3\", 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-sm font-medium text-basalt-foreground\">{name}</p>\n\t\t\t\t{email ? <p className=\"truncate text-xs text-basalt-muted-foreground\">{email}</p> : null}\n\t\t\t</div>\n\t\t\t{action}\n\t\t</div>\n\t);\n}\n\nexport function ContentIsland({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"min-h-0 flex-1 overflow-y-auto rounded-[16px] bg-basalt-card p-3 text-basalt-card-foreground shadow-sm ring-1 ring-basalt-border/40 md:rounded-basalt-island md:p-5\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"file":"sidebar.js","names":[],"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 { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"./collapsible\";\nimport { Dialog, DialogOverlay, DialogPortal } from \"./dialog\";\nimport { OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\nimport { SkeletonLine } from \"./skeleton-line\";\n\nexport type SidebarSide = \"left\" | \"right\";\n\ntype SidebarContextValue = {\n\tcollapsed: boolean;\n\tsetCollapsed: (next: boolean) => void;\n\tside: SidebarSide;\n\tloading: boolean;\n\tpeek: boolean;\n\tpeeking: boolean;\n\tsetPeeking: (next: boolean) => void;\n\toverlay: boolean;\n\twidth: number;\n\tsetWidth: (next: number) => void;\n\tlastFocusRef: RefObject<HTMLElement | null>;\n};\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\nexport function useSidebar() {\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 * Expanded width in pixels.\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-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 className=\"flex flex-col gap-2 p-3\" role=\"status\" aria-live=\"polite\">\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\t\"relative flex h-screen shrink-0 flex-col bg-basalt-background text-sm 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\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-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 top-0 transition-all duration-300 ease-in-out\",\n\t\t\t\tside === \"right\" ? \"order-last\" : undefined,\n\t\t\t\tcollapsed ? \"w-[68px] overflow-y-hidden\" : \"overflow-hidden\",\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\nexport function SidebarHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n\treturn <div className={cn(\"flex h-14 shrink-0 items-center px-3\", className)} {...props} />;\n}\n\nexport function SidebarSearch({\n\tshortcut = \"⌘K\",\n\tclassName,\n\tchildren,\n\t...props\n}: ButtonHTMLAttributes<HTMLButtonElement> & { shortcut?: string }) {\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex w-full cursor-pointer items-center gap-3 rounded-lg bg-basalt-secondary px-3 py-1.5 transition-colors hover:bg-basalt-accent\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<Search className=\"h-4 w-4 text-basalt-muted-foreground\" strokeWidth={1.5} />\n\t\t\t<span className=\"flex-1 text-left text-sm text-basalt-muted-foreground\">{children}</span>\n\t\t\t<kbd className=\"pointer-events-none hidden rounded-sm border border-basalt-border bg-basalt-card px-1.5 py-0.5 text-[10px] 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 function SidebarNav({ className, ...props }: HTMLAttributes<HTMLElement>) {\n\treturn (\n\t\t<nav className={cn(\"flex min-h-0 flex-1 flex-col overflow-y-auto\", className)} {...props} />\n\t);\n}\n\nexport function SidebarPartition({ className, ...props }: HTMLAttributes<HTMLParagraphElement>) {\n\treturn (\n\t\t<p\n\t\t\tclassName={cn(\n\t\t\t\t\"px-6 pt-3 pb-1 text-[11px] font-medium tracking-[0.14em] text-basalt-muted-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\tclassName={cn(\n\t\t\t\t\"flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-normal transition-colors\",\n\t\t\t\tactive\n\t\t\t\t\t? \"bg-basalt-accent text-basalt-foreground\"\n\t\t\t\t\t: \"text-basalt-muted-foreground hover:bg-basalt-accent hover:text-basalt-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport function SidebarIconItem({\n\tactive = false,\n\tclassName,\n\t...props\n}: ButtonHTMLAttributes<HTMLButtonElement> & { active?: boolean }) {\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\taria-current={active ? \"page\" : undefined}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex h-10 w-10 items-center justify-center rounded-lg transition-colors\",\n\t\t\t\tactive\n\t\t\t\t\t? \"bg-basalt-accent text-basalt-foreground\"\n\t\t\t\t\t: \"text-basalt-muted-foreground hover:bg-basalt-accent hover:text-basalt-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport function SidebarGroup({\n\tlabel,\n\tdefaultOpen = true,\n\tchildren,\n}: {\n\tlabel: ReactNode;\n\tdefaultOpen?: boolean;\n\tchildren: ReactNode;\n}) {\n\tconst [open, setOpen] = useState(defaultOpen);\n\treturn (\n\t\t<Collapsible open={open} onOpenChange={setOpen}>\n\t\t\t<div className=\"mt-2 px-3\">\n\t\t\t\t<CollapsibleTrigger asChild>\n\t\t\t\t\t<button type=\"button\" className=\"flex w-full items-center justify-between px-3 py-2.5\">\n\t\t\t\t\t\t<span className=\"text-sm font-normal text-basalt-muted-foreground\">{label}</span>\n\t\t\t\t\t\t<span className=\"flex h-7 w-7 shrink-0 items-center justify-center\">\n\t\t\t\t\t\t\t<ChevronUp\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"h-4 w-4 text-basalt-muted-foreground transition-transform duration-200\",\n\t\t\t\t\t\t\t\t\tOVERLAY_MOTION,\n\t\t\t\t\t\t\t\t\t!open && \"rotate-180\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t</CollapsibleTrigger>\n\t\t\t</div>\n\t\t\t<CollapsibleContent unstyled>\n\t\t\t\t<div className=\"flex flex-col gap-0.5 px-3\">{children}</div>\n\t\t\t</CollapsibleContent>\n\t\t</Collapsible>\n\t);\n}\n\nexport function SidebarFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n\treturn <div className={cn(\"px-4 py-3\", className)} {...props} />;\n}\n\nexport function SidebarUser({\n\tname,\n\temail,\n\tavatar,\n\taction,\n\tclassName,\n}: {\n\tname: ReactNode;\n\temail?: ReactNode;\n\tavatar?: ReactNode;\n\taction?: ReactNode;\n\tclassName?: string;\n}) {\n\treturn (\n\t\t<div className={cn(\"flex items-center gap-3\", 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-sm font-medium text-basalt-foreground\">{name}</p>\n\t\t\t\t{email ? <p className=\"truncate text-xs text-basalt-muted-foreground\">{email}</p> : null}\n\t\t\t</div>\n\t\t\t{action}\n\t\t</div>\n\t);\n}\n\nexport function ContentIsland({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n\treturn (\n\t\t<div\n\t\t\tdata-basalt-surface-root=\"\"\n\t\t\tclassName={cn(\n\t\t\t\t\"min-h-0 flex-1 overflow-y-auto rounded-[16px] bg-basalt-card p-3 text-basalt-card-foreground shadow-sm ring-1 ring-basalt-border/40 md:rounded-basalt-island md:p-5\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":"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"}

package/dist/components/table.js

@@ -5,16 +5,17 @@ import { jsx as n } from "react/jsx-runtime";
 //#region src/components/table.tsx
 var r = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("table", {
 	ref: i,
+	"data-basalt-table": "",
 	className: e("w-full border-separate border-spacing-0 caption-bottom text-left text-sm text-basalt-foreground", t),
 	...r
 }));
 r.displayName = "Table";
-var i = (e) => /* @__PURE__ */ n("thead", { ...e }), a = (e) => /* @__PURE__ */ n("tbody", { ...e }), o = (e) => /* @__PURE__ */ n("tfoot", { ...e }), s = ({ className: t, variant: r = "default", ...i }) => /* @__PURE__ */ n("tr", {
-	...i,
-	"aria-selected": r === "selected" || i["aria-selected"],
-	className: e(r === "selected" ? "[&_td]:bg-basalt-accent" : "even:[&_td]:bg-basalt-secondary", t)
+var i = (e) => /* @__PURE__ */ n("thead", { ...e }), a = (e) => /* @__PURE__ */ n("tbody", { ...e }), o = (e) => /* @__PURE__ */ n("tfoot", { ...e }), s = ({ className: e, variant: t = "default", ...r }) => /* @__PURE__ */ n("tr", {
+	...r,
+	"aria-selected": t === "selected" || r["aria-selected"],
+	className: e
 }), c = ({ className: t, ...r }) => /* @__PURE__ */ n("th", {
-	className: e("border-b border-basalt-border bg-basalt-card p-3 text-left font-semibold first:rounded-tl-basalt-md last:rounded-tr-basalt-md", t),
+	className: e("border-b border-basalt-border p-3 text-left text-xs font-medium text-basalt-muted-foreground", t),
 	...r
 }), l = ({ className: t, ...r }) => /* @__PURE__ */ n("td", {
 	className: e("p-3", t),

package/dist/components/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","names":[],"sources":["../../src/components/table.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport type TableProps = {\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, ...props }, ref) => (\n\t<table\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"w-full border-separate border-spacing-0 caption-bottom text-left text-sm text-basalt-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTable.displayName = \"Table\";\n\nexport const TableHeader = (props: React.HTMLAttributes<HTMLTableSectionElement>) => (\n\t<thead {...props} />\n);\nexport const TableBody = (props: React.HTMLAttributes<HTMLTableSectionElement>) => (\n\t<tbody {...props} />\n);\nexport const TableFooter = (props: React.HTMLAttributes<HTMLTableSectionElement>) => (\n\t<tfoot {...props} />\n);\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={cn(\n\t\t\tvariant === \"selected\" ? \"[&_td]:bg-basalt-accent\" : \"even:[&_td]:bg-basalt-secondary\",\n\t\t\tclassName,\n\t\t)}\n\t/>\n);\n\nexport type TableHeadProps = {\n\t/**\n\t * Additional classes for the header cell.\n\t */\n\tclassName?: string;\n};\n\nexport const TableHead = ({\n\tclassName,\n\t...props\n}: TableHeadProps & React.ThHTMLAttributes<HTMLTableCellElement>) => (\n\t<th\n\t\tclassName={cn(\n\t\t\t\"border-b border-basalt-border bg-basalt-card p-3 text-left font-semibold first:rounded-tl-basalt-md last:rounded-tr-basalt-md\",\n\t\t\tclassName,\n\t\t)}\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};\n\nexport const TableCell = ({\n\tclassName,\n\t...props\n}: TableCellProps & React.TdHTMLAttributes<HTMLTableCellElement>) => (\n\t<td className={cn(\"p-3\", className)} {...props} />\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 className={cn(\"mt-2 text-sm text-basalt-muted-foreground\", className)} {...props} />\n\t);\n}\n"],"mappings":";;;;;AAUA,IAAa,IAAQ,EAAM,YAGxB,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,SAAD;CACM;CACL,WAAW,EACV,mGACA,CACD;CACA,GAAI;AACJ,CAAA,CACD;AACD,EAAM,cAAc;AAEpB,IAAa,KAAe,MAC3B,kBAAC,SAAD,EAAO,GAAI,EAAQ,CAAA,GAEP,KAAa,MACzB,kBAAC,SAAD,EAAO,GAAI,EAAQ,CAAA,GAEP,KAAe,MAC3B,kBAAC,SAAD,EAAO,GAAI,EAAQ,CAAA,GAiBP,KAAY,EACxB,cACA,aAAU,WACV,GAAG,QAEH,kBAAC,MAAD;CACC,GAAI;CACJ,iBAAe,MAAY,cAAoB,EAAM;CACrD,WAAW,EACV,MAAY,aAAa,4BAA4B,mCACrD,CACD;AACA,CAAA,GAUW,KAAa,EACzB,cACA,GAAG,QAEH,kBAAC,MAAD;CACC,WAAW,EACV,iIACA,CACD;CACA,GAAI;AACJ,CAAA,GAUW,KAAa,EACzB,cACA,GAAG,QAEH,kBAAC,MAAD;CAAI,WAAW,EAAG,OAAO,CAAS;CAAG,GAAI;AAAQ,CAAA;AAUlD,SAAgB,EAAa,EAC5B,cACA,GAAG,KACkE;CACrE,OACC,kBAAC,WAAD;EAAS,WAAW,EAAG,6CAA6C,CAAS;EAAG,GAAI;CAAQ,CAAA;AAE9F"}
+{"version":3,"file":"table.js","names":[],"sources":["../../src/components/table.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport type TableProps = {\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, ...props }, ref) => (\n\t<table\n\t\tref={ref}\n\t\tdata-basalt-table=\"\"\n\t\tclassName={cn(\n\t\t\t\"w-full border-separate border-spacing-0 caption-bottom text-left text-sm text-basalt-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTable.displayName = \"Table\";\n\nexport const TableHeader = (props: React.HTMLAttributes<HTMLTableSectionElement>) => (\n\t<thead {...props} />\n);\nexport const TableBody = (props: React.HTMLAttributes<HTMLTableSectionElement>) => (\n\t<tbody {...props} />\n);\nexport const TableFooter = (props: React.HTMLAttributes<HTMLTableSectionElement>) => (\n\t<tfoot {...props} />\n);\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\nexport type TableHeadProps = {\n\t/**\n\t * Additional classes for the header cell.\n\t */\n\tclassName?: string;\n};\n\nexport const TableHead = ({\n\tclassName,\n\t...props\n}: TableHeadProps & React.ThHTMLAttributes<HTMLTableCellElement>) => (\n\t<th\n\t\tclassName={cn(\n\t\t\t\"border-b border-basalt-border p-3 text-left text-xs font-medium text-basalt-muted-foreground\",\n\t\t\tclassName,\n\t\t)}\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};\n\nexport const TableCell = ({\n\tclassName,\n\t...props\n}: TableCellProps & React.TdHTMLAttributes<HTMLTableCellElement>) => (\n\t<td className={cn(\"p-3\", className)} {...props} />\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 className={cn(\"mt-2 text-sm text-basalt-muted-foreground\", className)} {...props} />\n\t);\n}\n"],"mappings":";;;;;AAUA,IAAa,IAAQ,EAAM,YAGxB,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,SAAD;CACM;CACL,qBAAkB;CAClB,WAAW,EACV,mGACA,CACD;CACA,GAAI;AACJ,CAAA,CACD;AACD,EAAM,cAAc;AAEpB,IAAa,KAAe,MAC3B,kBAAC,SAAD,EAAO,GAAI,EAAQ,CAAA,GAEP,KAAa,MACzB,kBAAC,SAAD,EAAO,GAAI,EAAQ,CAAA,GAEP,KAAe,MAC3B,kBAAC,SAAD,EAAO,GAAI,EAAQ,CAAA,GAiBP,KAAY,EACxB,cACA,aAAU,WACV,GAAG,QAEH,kBAAC,MAAD;CACC,GAAI;CACJ,iBAAe,MAAY,cAAoB,EAAM;CAC1C;AACX,CAAA,GAUW,KAAa,EACzB,cACA,GAAG,QAEH,kBAAC,MAAD;CACC,WAAW,EACV,gGACA,CACD;CACA,GAAI;AACJ,CAAA,GAUW,KAAa,EACzB,cACA,GAAG,QAEH,kBAAC,MAAD;CAAI,WAAW,EAAG,OAAO,CAAS;CAAG,GAAI;AAAQ,CAAA;AAUlD,SAAgB,EAAa,EAC5B,cACA,GAAG,KACkE;CACrE,OACC,kBAAC,WAAD;EAAS,WAAW,EAAG,6CAA6C,CAAS;EAAG,GAAI;CAAQ,CAAA;AAE9F"}

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { Checkbox } from "./components/checkbox.js";
 export { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/collapsible.js";
 export { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, CommandPaletteTrigger, CommandSeparator, CommandShortcut, } from "./components/command-palette.js";
 export { ConfirmDialog, useConfirm } from "./components/confirm-dialog.js";
+export { DescriptionList } from "./components/description-list.js";
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "./components/dialog.js";
 export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "./components/dropdown-menu.js";
 export { Field } from "./components/field.js";

package/dist/index.js

@@ -8,28 +8,29 @@ import { Checkbox as S } from "./components/checkbox.js";
 import { Collapsible as C, CollapsibleContent as w, CollapsibleTrigger as T } from "./components/collapsible.js";
 import { CommandEmpty as E, CommandGroup as D, CommandInput as O, CommandItem as k, CommandList as A, CommandPalette as j, CommandPaletteTrigger as M, CommandSeparator as N, CommandShortcut as P } from "./components/command-palette.js";
 import { ConfirmDialog as F, useConfirm as I } from "./components/confirm-dialog.js";
-import { DropdownMenu as L, DropdownMenuContent as R, DropdownMenuItem as z, DropdownMenuTrigger as B } from "./components/dropdown-menu.js";
-import { Tooltip as V, TooltipContent as H, TooltipProvider as U, TooltipTrigger as W } from "./components/tooltip.js";
-import { Label as G } from "./components/label.js";
-import { Field as K } from "./components/field.js";
-import { Input as q } from "./components/input.js";
-import { LayerCard as J } from "./components/layer-card.js";
-import { LinkProvider as Y } from "./providers/link.js";
-import { Link as X } from "./components/link.js";
-import { Meter as Z } from "./components/meter.js";
-import { Popover as Q, PopoverClose as $, PopoverContent as ee, PopoverDescription as te, PopoverTitle as ne, PopoverTrigger as re } from "./components/popover.js";
-import { ScrollArea as ie } from "./components/scroll-area.js";
-import { SegmentControl as ae } from "./components/segment-control.js";
-import { Separator as oe } from "./components/separator.js";
-import { Sheet as se, SheetClose as ce, SheetContent as le, SheetDescription as ue, SheetFooter as de, SheetHeader as fe, SheetTitle as pe, SheetTrigger as me } from "./components/sheet.js";
-import { ContentIsland as he, Sidebar as ge, SidebarFooter as _e, SidebarGroup as ve, SidebarHeader as ye, SidebarIconItem as be, SidebarItem as xe, SidebarNav as Se, SidebarPartition as Ce, SidebarProvider as we, SidebarSearch as Te, SidebarUser as Ee } from "./components/sidebar.js";
-import { StatStrip as De } from "./components/stat-strip.js";
-import { Switch as Oe } from "./components/switch.js";
-import { TablePager as ke } from "./components/table-pager.js";
-import { Tabs as Ae, TabsContent as je, TabsList as Me, TabsTrigger as Ne } from "./components/tabs.js";
-import { Text as Pe } from "./components/text.js";
-import { ThemeProvider as Fe } from "./providers/theme.js";
-import { ThemeToggle as Ie } from "./components/theme-toggle.js";
-import { Toast as Le, Toaster as Re, toast as ze } from "./components/toast.js";
-import { Toolbar as Be } from "./components/toolbar.js";
-export { l as AlertDialog, u as AlertDialogAction, d as AlertDialogCancel, f as AlertDialogContent, p as AlertDialogDescription, m as AlertDialogFooter, h as AlertDialogHeader, g as AlertDialogTitle, _ as AlertDialogTrigger, v as Avatar, y as AvatarFallback, b as AvatarImage, x as Badge, e as Button, S as Checkbox, C as Collapsible, w as CollapsibleContent, T as CollapsibleTrigger, E as CommandEmpty, D as CommandGroup, O as CommandInput, k as CommandItem, A as CommandList, j as CommandPalette, M as CommandPaletteTrigger, N as CommandSeparator, P as CommandShortcut, F as ConfirmDialog, he as ContentIsland, t as Dialog, n as DialogClose, r as DialogContent, i as DialogDescription, a as DialogFooter, o as DialogHeader, s as DialogTitle, c as DialogTrigger, L as DropdownMenu, R as DropdownMenuContent, z as DropdownMenuItem, B as DropdownMenuTrigger, K as Field, q as Input, G as Label, J as LayerCard, X as Link, Y as LinkProvider, Z as Meter, Q as Popover, $ as PopoverClose, ee as PopoverContent, te as PopoverDescription, ne as PopoverTitle, re as PopoverTrigger, ie as ScrollArea, ae as SegmentControl, oe as Separator, se as Sheet, ce as SheetClose, le as SheetContent, ue as SheetDescription, de as SheetFooter, fe as SheetHeader, pe as SheetTitle, me as SheetTrigger, ge as Sidebar, _e as SidebarFooter, ve as SidebarGroup, ye as SidebarHeader, be as SidebarIconItem, xe as SidebarItem, Se as SidebarNav, Ce as SidebarPartition, we as SidebarProvider, Te as SidebarSearch, Ee as SidebarUser, De as StatStrip, Oe as Switch, ke as TablePager, Ae as Tabs, je as TabsContent, Me as TabsList, Ne as TabsTrigger, Pe as Text, Fe as ThemeProvider, Ie as ThemeToggle, Le as Toast, Re as Toaster, Be as Toolbar, V as Tooltip, H as TooltipContent, U as TooltipProvider, W as TooltipTrigger, ze as toast, I as useConfirm };
+import { DescriptionList as L } from "./components/description-list.js";
+import { DropdownMenu as R, DropdownMenuContent as z, DropdownMenuItem as B, DropdownMenuTrigger as V } from "./components/dropdown-menu.js";
+import { Tooltip as H, TooltipContent as U, TooltipProvider as W, TooltipTrigger as G } from "./components/tooltip.js";
+import { Label as K } from "./components/label.js";
+import { Field as q } from "./components/field.js";
+import { Input as J } from "./components/input.js";
+import { LayerCard as Y } from "./components/layer-card.js";
+import { LinkProvider as X } from "./providers/link.js";
+import { Link as Z } from "./components/link.js";
+import { Meter as Q } from "./components/meter.js";
+import { Popover as $, PopoverClose as ee, PopoverContent as te, PopoverDescription as ne, PopoverTitle as re, PopoverTrigger as ie } from "./components/popover.js";
+import { ScrollArea as ae } from "./components/scroll-area.js";
+import { SegmentControl as oe } from "./components/segment-control.js";
+import { Separator as se } from "./components/separator.js";
+import { Sheet as ce, SheetClose as le, SheetContent as ue, SheetDescription as de, SheetFooter as fe, SheetHeader as pe, SheetTitle as me, SheetTrigger as he } from "./components/sheet.js";
+import { ContentIsland as ge, Sidebar as _e, SidebarFooter as ve, SidebarGroup as ye, SidebarHeader as be, SidebarIconItem as xe, SidebarItem as Se, SidebarNav as Ce, SidebarPartition as we, SidebarProvider as Te, SidebarSearch as Ee, SidebarUser as De } from "./components/sidebar.js";
+import { StatStrip as Oe } from "./components/stat-strip.js";
+import { Switch as ke } from "./components/switch.js";
+import { TablePager as Ae } from "./components/table-pager.js";
+import { Tabs as je, TabsContent as Me, TabsList as Ne, TabsTrigger as Pe } from "./components/tabs.js";
+import { Text as Fe } from "./components/text.js";
+import { ThemeProvider as Ie } from "./providers/theme.js";
+import { ThemeToggle as Le } from "./components/theme-toggle.js";
+import { Toast as Re, Toaster as ze, toast as Be } from "./components/toast.js";
+import { Toolbar as Ve } from "./components/toolbar.js";
+export { l as AlertDialog, u as AlertDialogAction, d as AlertDialogCancel, f as AlertDialogContent, p as AlertDialogDescription, m as AlertDialogFooter, h as AlertDialogHeader, g as AlertDialogTitle, _ as AlertDialogTrigger, v as Avatar, y as AvatarFallback, b as AvatarImage, x as Badge, e as Button, S as Checkbox, C as Collapsible, w as CollapsibleContent, T as CollapsibleTrigger, E as CommandEmpty, D as CommandGroup, O as CommandInput, k as CommandItem, A as CommandList, j as CommandPalette, M as CommandPaletteTrigger, N as CommandSeparator, P as CommandShortcut, F as ConfirmDialog, ge as ContentIsland, L as DescriptionList, t as Dialog, n as DialogClose, r as DialogContent, i as DialogDescription, a as DialogFooter, o as DialogHeader, s as DialogTitle, c as DialogTrigger, R as DropdownMenu, z as DropdownMenuContent, B as DropdownMenuItem, V as DropdownMenuTrigger, q as Field, J as Input, K as Label, Y as LayerCard, Z as Link, X as LinkProvider, Q as Meter, $ as Popover, ee as PopoverClose, te as PopoverContent, ne as PopoverDescription, re as PopoverTitle, ie as PopoverTrigger, ae as ScrollArea, oe as SegmentControl, se as Separator, ce as Sheet, le as SheetClose, ue as SheetContent, de as SheetDescription, fe as SheetFooter, pe as SheetHeader, me as SheetTitle, he as SheetTrigger, _e as Sidebar, ve as SidebarFooter, ye as SidebarGroup, be as SidebarHeader, xe as SidebarIconItem, Se as SidebarItem, Ce as SidebarNav, we as SidebarPartition, Te as SidebarProvider, Ee as SidebarSearch, De as SidebarUser, Oe as StatStrip, ke as Switch, Ae as TablePager, je as Tabs, Me as TabsContent, Ne as TabsList, Pe as TabsTrigger, Fe as Text, Ie as ThemeProvider, Le as ThemeToggle, Re as Toast, ze as Toaster, Ve as Toolbar, H as Tooltip, U as TooltipContent, W as TooltipProvider, G as TooltipTrigger, Be as toast, I as useConfirm };

package/dist/providers/accent.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+export type AccentSwatch = {
+    id: string;
+    label: string;
+    token: string;
+    light: string;
+    dark: string;
+};
+export declare const ACCENT_SWATCHES: readonly AccentSwatch[];
+export declare const DEFAULT_ACCENT_ID = "primary";
+type AccentContextValue = {
+    accent: string;
+    setAccent: (id: string) => void;
+    swatches: readonly AccentSwatch[];
+};
+export declare function accentSwatchById(id: string | null | undefined): AccentSwatch;
+export declare function accentForeground(hsl: string): "0 0% 10%" | "0 0% 100%";
+export declare function applyAccent(id: string, dark?: boolean): void;
+export declare function AccentProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useAccent(): AccentContextValue;
+export {};

package/dist/providers/accent.js

@@ -0,0 +1,232 @@
+"use client";
+import { createContext as e, useCallback as t, useContext as n, useEffect as r, useMemo as i, useSyncExternalStore as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/providers/accent.tsx
+var s = [
+	{
+		id: "primary",
+		label: "Primary",
+		token: "--basalt-chart-1",
+		light: "217 91% 60%",
+		dark: "217 91% 65%"
+	},
+	{
+		id: "sky",
+		label: "Sky",
+		token: "--basalt-chart-2",
+		light: "200 90% 55%",
+		dark: "200 90% 60%"
+	},
+	{
+		id: "teal",
+		label: "Teal",
+		token: "--basalt-chart-3",
+		light: "186 80% 45%",
+		dark: "186 80% 50%"
+	},
+	{
+		id: "jade",
+		label: "Jade",
+		token: "--basalt-chart-4",
+		light: "166 72% 44%",
+		dark: "166 72% 50%"
+	},
+	{
+		id: "green",
+		label: "Green",
+		token: "--basalt-chart-5",
+		light: "142 71% 45%",
+		dark: "142 71% 50%"
+	},
+	{
+		id: "lime",
+		label: "Lime",
+		token: "--basalt-chart-6",
+		light: "84 65% 46%",
+		dark: "84 65% 52%"
+	},
+	{
+		id: "amber",
+		label: "Amber",
+		token: "--basalt-chart-7",
+		light: "45 93% 47%",
+		dark: "45 93% 52%"
+	},
+	{
+		id: "orange",
+		label: "Orange",
+		token: "--basalt-chart-8",
+		light: "30 90% 55%",
+		dark: "30 90% 60%"
+	},
+	{
+		id: "vermilion",
+		label: "Vermilion",
+		token: "--basalt-chart-9",
+		light: "15 85% 52%",
+		dark: "15 85% 57%"
+	},
+	{
+		id: "red",
+		label: "Red",
+		token: "--basalt-chart-10",
+		light: "0 72% 51%",
+		dark: "0 72% 56%"
+	},
+	{
+		id: "rose",
+		label: "Rose",
+		token: "--basalt-chart-11",
+		light: "340 82% 55%",
+		dark: "340 82% 60%"
+	},
+	{
+		id: "magenta",
+		label: "Magenta",
+		token: "--basalt-chart-12",
+		light: "320 70% 55%",
+		dark: "320 70% 60%"
+	},
+	{
+		id: "orchid",
+		label: "Orchid",
+		token: "--basalt-chart-13",
+		light: "290 65% 55%",
+		dark: "290 65% 60%"
+	},
+	{
+		id: "purple",
+		label: "Purple",
+		token: "--basalt-chart-14",
+		light: "270 70% 60%",
+		dark: "270 70% 65%"
+	},
+	{
+		id: "indigo",
+		label: "Indigo",
+		token: "--basalt-chart-15",
+		light: "250 65% 58%",
+		dark: "250 65% 63%"
+	},
+	{
+		id: "cobalt",
+		label: "Cobalt",
+		token: "--basalt-chart-16",
+		light: "230 70% 56%",
+		dark: "230 70% 61%"
+	},
+	{
+		id: "steel",
+		label: "Steel",
+		token: "--basalt-chart-17",
+		light: "210 55% 50%",
+		dark: "210 55% 56%"
+	},
+	{
+		id: "cadet",
+		label: "Cadet",
+		token: "--basalt-chart-18",
+		light: "195 45% 55%",
+		dark: "195 45% 60%"
+	},
+	{
+		id: "seafoam",
+		label: "Seafoam",
+		token: "--basalt-chart-19",
+		light: "160 50% 50%",
+		dark: "160 50% 55%"
+	},
+	{
+		id: "olive",
+		label: "Olive",
+		token: "--basalt-chart-20",
+		light: "100 50% 48%",
+		dark: "100 50% 53%"
+	},
+	{
+		id: "gold",
+		label: "Gold",
+		token: "--basalt-chart-21",
+		light: "60 65% 45%",
+		dark: "60 65% 50%"
+	},
+	{
+		id: "tangerine",
+		label: "Tangerine",
+		token: "--basalt-chart-22",
+		light: "22 80% 50%",
+		dark: "22 80% 55%"
+	},
+	{
+		id: "crimson",
+		label: "Crimson",
+		token: "--basalt-chart-23",
+		light: "350 65% 50%",
+		dark: "350 65% 55%"
+	},
+	{
+		id: "gray",
+		label: "Gray",
+		token: "--basalt-chart-24",
+		light: "0 0% 25%",
+		dark: "0 0% 65%"
+	}
+], c = "primary", l = "basalt-accent", u = e(null);
+function d(e) {
+	return s.find((t) => t.id === e) ?? s[0];
+}
+function f(e) {
+	return e <= .04045 ? e / 12.92 : ((e + .055) / 1.055) ** 2.4;
+}
+function p(e) {
+	let [t, n, r] = e.trim().split(/\s+/), i = Number(t), a = Number(n.replace("%", "")) / 100, o = Number(r.replace("%", "")) / 100, s = a * Math.min(o, 1 - o), c = (e) => {
+		let t = (e + i / 30) % 12;
+		return o - s * Math.max(Math.min(t - 3, 9 - t, 1), -1);
+	};
+	return .2126 * f(c(0)) + .7152 * f(c(8)) + .0722 * f(c(4)) > .35 ? "0 0% 10%" : "0 0% 100%";
+}
+function m(e, t = !1) {
+	let n = d(e), r = t ? n.dark : n.light, i = document.documentElement;
+	i.style.setProperty("--basalt-primary", r), i.style.setProperty("--basalt-primary-foreground", p(r)), i.style.setProperty("--basalt-ring", r), i.dataset.accent = n.id;
+}
+function h() {
+	return d(window.localStorage.getItem(l)).id;
+}
+function g(e) {
+	return window.addEventListener("storage", e), () => window.removeEventListener("storage", e);
+}
+function _() {
+	return document.documentElement.classList.contains("dark");
+}
+function v({ children: e }) {
+	let n = a(g, h, () => c);
+	r(() => {
+		m(n, _());
+		let e = new MutationObserver(() => m(n, _()));
+		return e.observe(document.documentElement, {
+			attributes: !0,
+			attributeFilter: ["class"]
+		}), () => e.disconnect();
+	}, [n]);
+	let f = t((e) => {
+		let t = d(e).id;
+		window.localStorage.setItem(l, t), m(t, _()), window.dispatchEvent(new Event("storage"));
+	}, []), p = i(() => ({
+		accent: n,
+		setAccent: f,
+		swatches: s
+	}), [n, f]);
+	return /* @__PURE__ */ o(u.Provider, {
+		value: p,
+		children: e
+	});
+}
+function y() {
+	let e = n(u);
+	if (!e) throw Error("useAccent must be used within AccentProvider");
+	return e;
+}
+//#endregion
+export { s as ACCENT_SWATCHES, v as AccentProvider, c as DEFAULT_ACCENT_ID, p as accentForeground, d as accentSwatchById, m as applyAccent, y as useAccent };
+
+//# sourceMappingURL=accent.js.map

package/dist/providers/accent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accent.js","names":[],"sources":["../../src/providers/accent.tsx"],"sourcesContent":["import {\n\tcreateContext,\n\ttype ReactNode,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseSyncExternalStore,\n} from \"react\";\n\nexport type AccentSwatch = {\n\tid: string;\n\tlabel: string;\n\ttoken: string;\n\tlight: string;\n\tdark: string;\n};\n\nexport const ACCENT_SWATCHES: readonly AccentSwatch[] = [\n\t{\n\t\tid: \"primary\",\n\t\tlabel: \"Primary\",\n\t\ttoken: \"--basalt-chart-1\",\n\t\tlight: \"217 91% 60%\",\n\t\tdark: \"217 91% 65%\",\n\t},\n\t{ id: \"sky\", label: \"Sky\", token: \"--basalt-chart-2\", light: \"200 90% 55%\", dark: \"200 90% 60%\" },\n\t{\n\t\tid: \"teal\",\n\t\tlabel: \"Teal\",\n\t\ttoken: \"--basalt-chart-3\",\n\t\tlight: \"186 80% 45%\",\n\t\tdark: \"186 80% 50%\",\n\t},\n\t{\n\t\tid: \"jade\",\n\t\tlabel: \"Jade\",\n\t\ttoken: \"--basalt-chart-4\",\n\t\tlight: \"166 72% 44%\",\n\t\tdark: \"166 72% 50%\",\n\t},\n\t{\n\t\tid: \"green\",\n\t\tlabel: \"Green\",\n\t\ttoken: \"--basalt-chart-5\",\n\t\tlight: \"142 71% 45%\",\n\t\tdark: \"142 71% 50%\",\n\t},\n\t{ id: \"lime\", label: \"Lime\", token: \"--basalt-chart-6\", light: \"84 65% 46%\", dark: \"84 65% 52%\" },\n\t{\n\t\tid: \"amber\",\n\t\tlabel: \"Amber\",\n\t\ttoken: \"--basalt-chart-7\",\n\t\tlight: \"45 93% 47%\",\n\t\tdark: \"45 93% 52%\",\n\t},\n\t{\n\t\tid: \"orange\",\n\t\tlabel: \"Orange\",\n\t\ttoken: \"--basalt-chart-8\",\n\t\tlight: \"30 90% 55%\",\n\t\tdark: \"30 90% 60%\",\n\t},\n\t{\n\t\tid: \"vermilion\",\n\t\tlabel: \"Vermilion\",\n\t\ttoken: \"--basalt-chart-9\",\n\t\tlight: \"15 85% 52%\",\n\t\tdark: \"15 85% 57%\",\n\t},\n\t{ id: \"red\", label: \"Red\", token: \"--basalt-chart-10\", light: \"0 72% 51%\", dark: \"0 72% 56%\" },\n\t{\n\t\tid: \"rose\",\n\t\tlabel: \"Rose\",\n\t\ttoken: \"--basalt-chart-11\",\n\t\tlight: \"340 82% 55%\",\n\t\tdark: \"340 82% 60%\",\n\t},\n\t{\n\t\tid: \"magenta\",\n\t\tlabel: \"Magenta\",\n\t\ttoken: \"--basalt-chart-12\",\n\t\tlight: \"320 70% 55%\",\n\t\tdark: \"320 70% 60%\",\n\t},\n\t{\n\t\tid: \"orchid\",\n\t\tlabel: \"Orchid\",\n\t\ttoken: \"--basalt-chart-13\",\n\t\tlight: \"290 65% 55%\",\n\t\tdark: \"290 65% 60%\",\n\t},\n\t{\n\t\tid: \"purple\",\n\t\tlabel: \"Purple\",\n\t\ttoken: \"--basalt-chart-14\",\n\t\tlight: \"270 70% 60%\",\n\t\tdark: \"270 70% 65%\",\n\t},\n\t{\n\t\tid: \"indigo\",\n\t\tlabel: \"Indigo\",\n\t\ttoken: \"--basalt-chart-15\",\n\t\tlight: \"250 65% 58%\",\n\t\tdark: \"250 65% 63%\",\n\t},\n\t{\n\t\tid: \"cobalt\",\n\t\tlabel: \"Cobalt\",\n\t\ttoken: \"--basalt-chart-16\",\n\t\tlight: \"230 70% 56%\",\n\t\tdark: \"230 70% 61%\",\n\t},\n\t{\n\t\tid: \"steel\",\n\t\tlabel: \"Steel\",\n\t\ttoken: \"--basalt-chart-17\",\n\t\tlight: \"210 55% 50%\",\n\t\tdark: \"210 55% 56%\",\n\t},\n\t{\n\t\tid: \"cadet\",\n\t\tlabel: \"Cadet\",\n\t\ttoken: \"--basalt-chart-18\",\n\t\tlight: \"195 45% 55%\",\n\t\tdark: \"195 45% 60%\",\n\t},\n\t{\n\t\tid: \"seafoam\",\n\t\tlabel: \"Seafoam\",\n\t\ttoken: \"--basalt-chart-19\",\n\t\tlight: \"160 50% 50%\",\n\t\tdark: \"160 50% 55%\",\n\t},\n\t{\n\t\tid: \"olive\",\n\t\tlabel: \"Olive\",\n\t\ttoken: \"--basalt-chart-20\",\n\t\tlight: \"100 50% 48%\",\n\t\tdark: \"100 50% 53%\",\n\t},\n\t{\n\t\tid: \"gold\",\n\t\tlabel: \"Gold\",\n\t\ttoken: \"--basalt-chart-21\",\n\t\tlight: \"60 65% 45%\",\n\t\tdark: \"60 65% 50%\",\n\t},\n\t{\n\t\tid: \"tangerine\",\n\t\tlabel: \"Tangerine\",\n\t\ttoken: \"--basalt-chart-22\",\n\t\tlight: \"22 80% 50%\",\n\t\tdark: \"22 80% 55%\",\n\t},\n\t{\n\t\tid: \"crimson\",\n\t\tlabel: \"Crimson\",\n\t\ttoken: \"--basalt-chart-23\",\n\t\tlight: \"350 65% 50%\",\n\t\tdark: \"350 65% 55%\",\n\t},\n\t{ id: \"gray\", label: \"Gray\", token: \"--basalt-chart-24\", light: \"0 0% 25%\", dark: \"0 0% 65%\" },\n] as const;\n\nexport const DEFAULT_ACCENT_ID = \"primary\";\nconst STORAGE_KEY = \"basalt-accent\";\n\ntype AccentContextValue = {\n\taccent: string;\n\tsetAccent: (id: string) => void;\n\tswatches: readonly AccentSwatch[];\n};\n\nconst AccentContext = createContext<AccentContextValue | null>(null);\n\nexport function accentSwatchById(id: string | null | undefined): AccentSwatch {\n\treturn ACCENT_SWATCHES.find((swatch) => swatch.id === id) ?? ACCENT_SWATCHES[0];\n}\n\nfunction channel(c: number) {\n\treturn c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n}\n\nexport function accentForeground(hsl: string) {\n\tconst [hue, sat, light] = hsl.trim().split(/\\s+/);\n\tconst h = Number(hue);\n\tconst s = Number(sat.replace(\"%\", \"\")) / 100;\n\tconst l = Number(light.replace(\"%\", \"\")) / 100;\n\tconst a = s * Math.min(l, 1 - l);\n\tconst f = (n: number) => {\n\t\tconst k = (n + h / 30) % 12;\n\t\treturn l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n\t};\n\tconst luminance = 0.2126 * channel(f(0)) + 0.7152 * channel(f(8)) + 0.0722 * channel(f(4));\n\treturn luminance > 0.35 ? \"0 0% 10%\" : \"0 0% 100%\";\n}\n\nexport function applyAccent(id: string, dark = false) {\n\tconst swatch = accentSwatchById(id);\n\tconst value = dark ? swatch.dark : swatch.light;\n\tconst root = document.documentElement;\n\troot.style.setProperty(\"--basalt-primary\", value);\n\troot.style.setProperty(\"--basalt-primary-foreground\", accentForeground(value));\n\troot.style.setProperty(\"--basalt-ring\", value);\n\troot.dataset.accent = swatch.id;\n}\n\nfunction readAccent(): string {\n\treturn accentSwatchById(window.localStorage.getItem(STORAGE_KEY)).id;\n}\n\nfunction subscribe(onStoreChange: () => void) {\n\twindow.addEventListener(\"storage\", onStoreChange);\n\treturn () => window.removeEventListener(\"storage\", onStoreChange);\n}\n\nfunction isDarkMode(): boolean {\n\treturn document.documentElement.classList.contains(\"dark\");\n}\n\nexport function AccentProvider({ children }: { children: ReactNode }) {\n\tconst accent = useSyncExternalStore(subscribe, readAccent, () => DEFAULT_ACCENT_ID);\n\tuseEffect(() => {\n\t\tapplyAccent(accent, isDarkMode());\n\t\tconst observer = new MutationObserver(() => applyAccent(accent, isDarkMode()));\n\t\tobserver.observe(document.documentElement, { attributes: true, attributeFilter: [\"class\"] });\n\t\treturn () => observer.disconnect();\n\t}, [accent]);\n\tconst setAccent = useCallback((id: string) => {\n\t\tconst next = accentSwatchById(id).id;\n\t\twindow.localStorage.setItem(STORAGE_KEY, next);\n\t\tapplyAccent(next, isDarkMode());\n\t\twindow.dispatchEvent(new Event(\"storage\"));\n\t}, []);\n\tconst value = useMemo(\n\t\t() => ({ accent, setAccent, swatches: ACCENT_SWATCHES }),\n\t\t[accent, setAccent],\n\t);\n\treturn <AccentContext.Provider value={value}>{children}</AccentContext.Provider>;\n}\n\nexport function useAccent() {\n\tconst ctx = useContext(AccentContext);\n\tif (!ctx) {\n\t\tthrow new Error(\"useAccent must be used within AccentProvider\");\n\t}\n\treturn ctx;\n}\n"],"mappings":"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"}