@locusgraph/components 0.0.0-stage → 0.1.0

package/dist/overlay/sheet.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { XIcon } from "lucide-react";
+import * as SheetPrimitive from "radix-ui/dialog";
+function Sheet({ ...props }) {
+    return _jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+}
+function SheetTrigger({ ...props }) {
+    return _jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetClose({ ...props }) {
+    return _jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
+}
+function SheetPortal({ ...props }) {
+    return _jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({ className, ...props }) {
+    return (_jsx(SheetPrimitive.Overlay, { "data-slot": "sheet-overlay", className: cn("fixed inset-0 z-[300] bg-black/40 backdrop-blur-sm data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", className), ...props }));
+}
+function SheetContent({ className, children, side = "right", showCloseButton = true, ...props }) {
+    return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, { "data-slot": "sheet-content", className: cn("fixed z-[300] flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500", side === "right" &&
+                    "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", side === "left" &&
+                    "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", side === "top" &&
+                    "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", side === "bottom" &&
+                    "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", className), ...props, children: [children, showCloseButton && (_jsxs(SheetPrimitive.Close, { className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary", children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+}
+function SheetHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sheet-header", className: cn("flex flex-col gap-1.5 p-4", className), ...props }));
+}
+function SheetFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sheet-footer", className: cn("mt-auto flex flex-col gap-2 p-4", className), ...props }));
+}
+function SheetTitle({ className, ...props }) {
+    return (_jsx(SheetPrimitive.Title, { "data-slot": "sheet-title", className: cn("font-semibold text-foreground", className), ...props }));
+}
+function SheetDescription({ className, ...props }) {
+    return (_jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", className: cn("text-sm text-muted-foreground", className), ...props }));
+}
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, };

package/dist/overlay/tooltip.d.ts

@@ -0,0 +1,7 @@
+import * as TooltipPrimitive from "radix-ui/tooltip";
+import * as React from "react";
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
+declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): React.JSX.Element;
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/overlay/tooltip.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import * as TooltipPrimitive from "radix-ui/tooltip";
+function TooltipProvider({ delayDuration = 0, ...props }) {
+    return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration: delayDuration, ...props }));
+}
+function Tooltip({ ...props }) {
+    return _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({ ...props }) {
+    return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({ className, sideOffset = 0, children, ...props }) {
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn("z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" })] }) }));
+}
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/shell/app-header.d.ts

@@ -0,0 +1,11 @@
+import type * as React from "react";
+type AppHeaderProps = {
+    breadcrumbs?: React.ReactNode;
+    children?: React.ReactNode;
+};
+declare function AppHeader({ breadcrumbs, children }: AppHeaderProps): React.JSX.Element;
+declare function CommandHint({ shortcut, label, }: {
+    shortcut?: string;
+    label?: string;
+}): React.JSX.Element;
+export { AppHeader, CommandHint };

package/dist/shell/app-header.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Separator } from "../display/separator";
+import { SidebarTrigger } from "../layout/sidebar/sidebar";
+function AppHeader({ breadcrumbs, children }) {
+    return (_jsxs("header", { "data-slot": "app-header", className: "flex h-14 shrink-0 items-center gap-3 border-b border-line bg-background px-4", children: [_jsx(SidebarTrigger, { className: "-ml-1" }), _jsx(Separator, { orientation: "vertical", className: "h-4" }), breadcrumbs, _jsx("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: children })] }));
+}
+function CommandHint({ shortcut = "⌘K", label = "commands", }) {
+    return (_jsxs("span", { className: "hidden items-center gap-1.5 text-xs text-faint 2xl:flex", children: [_jsx("kbd", { className: "rounded border border-line bg-ghost px-1.5 py-0.5 font-mono text-[11px]", children: shortcut }), label] }));
+}
+export { AppHeader, CommandHint };

package/dist/shell/app-shell.d.ts

@@ -0,0 +1,10 @@
+import type * as React from "react";
+type AppShellProps = {
+    sidebar: React.ReactNode;
+    header: React.ReactNode;
+    children: React.ReactNode;
+    defaultOpen?: boolean;
+    bodyClassName?: string;
+};
+declare function AppShell({ sidebar, header, children, defaultOpen, bodyClassName }: AppShellProps): React.JSX.Element;
+export { AppShell };

package/dist/shell/app-shell.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { SidebarInset } from "../layout/sidebar/sidebar";
+import { SidebarProvider } from "../layout/sidebar/sidebar-context";
+function AppShell({ sidebar, header, children, defaultOpen, bodyClassName }) {
+    return (_jsxs(SidebarProvider, { defaultOpen: defaultOpen, children: [sidebar, _jsxs(SidebarInset, { className: "h-svh overflow-hidden", children: [header, _jsx("div", { "data-slot": "app-shell-body", className: cn("no-scrollbar flex w-full flex-1 flex-col overflow-y-auto px-6 pt-7 pb-8 lg:px-8", bodyClassName), children: children })] })] }));
+}
+export { AppShell };

package/dist/shell/breadcrumbs.d.ts

@@ -0,0 +1,12 @@
+import type * as React from "react";
+import type { LinkComponent } from "./link";
+type Crumb = {
+    label: React.ReactNode;
+    href?: string;
+};
+type BreadcrumbsProps = {
+    items: Crumb[];
+    linkComponent?: LinkComponent | "a";
+};
+declare function Breadcrumbs({ items, linkComponent }: BreadcrumbsProps): React.JSX.Element;
+export { Breadcrumbs, type Crumb };

package/dist/shell/breadcrumbs.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon } from "lucide-react";
+function CrumbLabel({ crumb, last, Link, }) {
+    if (last) {
+        return (_jsx("span", { "aria-current": "page", className: "truncate font-medium", children: crumb.label }));
+    }
+    if (crumb.href === undefined) {
+        return _jsx("span", { className: "truncate text-soft", children: crumb.label });
+    }
+    return (_jsx(Link, { href: crumb.href, className: "truncate text-soft transition-colors hover:text-foreground", children: crumb.label }));
+}
+function Breadcrumbs({ items, linkComponent = "a" }) {
+    return (_jsx("nav", { "aria-label": "Breadcrumb", className: "flex min-w-0 items-center gap-1.5 text-sm", children: items.map((crumb, index) => {
+            const last = index === items.length - 1;
+            return (_jsxs("span", { className: last ? "flex min-w-0 items-center gap-1.5" : "hidden items-center gap-1.5 sm:flex", children: [_jsx(CrumbLabel, { crumb: crumb, last: last, Link: linkComponent }), last ? null : (_jsx(ChevronRightIcon, { className: "size-3.5 shrink-0 text-faint", "aria-hidden": true }))] }, crumb.href ?? index));
+        }) }));
+}
+export { Breadcrumbs };

package/dist/shell/docs/docs-header.d.ts

@@ -0,0 +1,22 @@
+import type * as React from "react";
+import type { LinkComponent } from "../link";
+type DocsBrand = {
+    name: string;
+    product?: string;
+    icon: React.ReactNode;
+    href: string;
+};
+type DocsHeaderLink = {
+    title: string;
+    href: string;
+};
+type DocsHeaderProps = {
+    brand: DocsBrand;
+    links: DocsHeaderLink[];
+    activeHref: string;
+    mobileNav: React.ReactNode;
+    linkComponent?: LinkComponent | "a";
+    children?: React.ReactNode;
+};
+declare function DocsHeader({ brand, links, activeHref, mobileNav, linkComponent: Link, children, }: DocsHeaderProps): React.JSX.Element;
+export { type DocsBrand, DocsHeader, type DocsHeaderLink };

package/dist/shell/docs/docs-header.js

@@ -0,0 +1,20 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { MenuIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "../../action/button";
+import { Sheet, SheetContent, SheetTitle } from "../../overlay/sheet";
+function MobileNavSheet({ children }) {
+    const [open, setOpen] = useState(false);
+    const closeOnLinkClick = (event) => {
+        if (event.target.closest("a")) {
+            setOpen(false);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "icon-sm", className: "lg:hidden", "aria-label": "Open menu", onClick: () => setOpen(true), children: _jsx(MenuIcon, {}) }), _jsx(Sheet, { open: open, onOpenChange: setOpen, children: _jsxs(SheetContent, { side: "left", className: "w-72 overflow-y-auto p-4", children: [_jsx(SheetTitle, { className: "sr-only", children: "Menu" }), _jsx("div", { onClickCapture: closeOnLinkClick, children: children })] }) })] }));
+}
+function DocsHeader({ brand, links, activeHref, mobileNav, linkComponent: Link = "a", children, }) {
+    return (_jsx("header", { "data-slot": "docs-header", className: "sticky top-0 z-50 w-full bg-background/95 backdrop-blur", children: _jsxs("div", { className: "mx-auto flex h-(--docs-header-height) w-full max-w-[1536px] items-center gap-4 px-6 **:data-[slot=separator]:h-4!", children: [_jsx(MobileNavSheet, { children: mobileNav }), _jsxs(Link, { href: brand.href, className: "flex items-center gap-2 font-brand text-base tracking-tight", children: [brand.icon, _jsxs("span", { children: [_jsx("span", { className: "font-bold", children: brand.name }), brand.product && _jsx("span", { className: "font-light", children: brand.product })] })] }), _jsx("nav", { "aria-label": "Main", className: "hidden items-center gap-0.5 lg:flex", children: links.map((link) => (_jsx(Link, { href: link.href, "aria-current": link.href === activeHref ? "page" : undefined, className: cn("rounded-md px-2.5 py-1.5 text-sm font-medium text-foreground/80 transition-colors hover:text-foreground", link.href === activeHref && "text-foreground"), children: link.title }, link.href))) }), _jsx("div", { className: "ml-auto flex items-center gap-2", children: children })] }) }));
+}
+export { DocsHeader };

package/dist/shell/docs/docs-shell.d.ts

@@ -0,0 +1,9 @@
+import type * as React from "react";
+type DocsShellProps = {
+    header: React.ReactNode;
+    sidebar?: React.ReactNode;
+    aside?: React.ReactNode;
+    children: React.ReactNode;
+};
+declare function DocsShell({ header, sidebar, aside, children }: DocsShellProps): React.JSX.Element;
+export { DocsShell };

package/dist/shell/docs/docs-shell.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { TooltipProvider } from "../../overlay/tooltip";
+function DocsShell({ header, sidebar, aside, children }) {
+    return (_jsx(TooltipProvider, { delayDuration: 0, children: _jsxs("div", { "data-slot": "docs-shell", className: "flex min-h-svh flex-col bg-background [--docs-header-height:3.5rem] lg:[--docs-header-height:4rem]", children: [header, _jsxs("div", { className: cn("mx-auto w-full max-w-[1536px] flex-1 items-start px-2", sidebar && "lg:grid lg:grid-cols-[18rem_minmax(0,1fr)]"), children: [sidebar && (_jsx("aside", { "data-slot": "docs-sidebar", className: "sticky top-[calc(var(--docs-header-height)+0.6rem)] hidden h-[calc(100svh-10rem)] lg:block", children: sidebar })), _jsxs("div", { className: "flex min-w-0 items-stretch", children: [_jsx("main", { "data-slot": "docs-body", className: "min-w-0 flex-1 px-4 pt-6 pb-16 md:px-6 lg:pt-10", children: children }), aside && (_jsx("aside", { "data-slot": "docs-aside", className: "sticky top-[calc(var(--docs-header-height)+1px)] hidden h-[90svh] w-72 shrink-0 flex-col gap-8 overflow-hidden pt-10 xl:flex", children: _jsx("div", { className: "no-scrollbar flex flex-col gap-8 overflow-y-auto px-8", children: aside }) }))] })] })] }) }));
+}
+export { DocsShell };

package/dist/shell/docs/docs-sidebar.d.ts

@@ -0,0 +1,17 @@
+import type { LinkComponent } from "../link";
+type DocsNavItem = {
+    title: string;
+    href: string;
+};
+type DocsNavGroup = {
+    label: string;
+    items: DocsNavItem[];
+};
+type DocsNavListProps = {
+    groups: DocsNavGroup[];
+    activeHref: string;
+    linkComponent?: LinkComponent | "a";
+};
+declare function DocsNavList({ groups, activeHref, linkComponent: Link }: DocsNavListProps): import("react").JSX.Element;
+declare function DocsSidebar(props: DocsNavListProps): import("react").JSX.Element;
+export { type DocsNavGroup, type DocsNavItem, DocsNavList, DocsSidebar };

package/dist/shell/docs/docs-sidebar.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+function DocsNavList({ groups, activeHref, linkComponent: Link = "a" }) {
+    return (_jsx("div", { className: "flex flex-col gap-4", children: groups.map((group) => (_jsxs("div", { className: "flex flex-col", children: [_jsx("p", { className: "flex h-8 items-center px-2 text-xs font-medium text-muted-foreground", children: group.label }), _jsx("ul", { className: "flex flex-col gap-0.5", children: group.items.map((item) => {
+                        const active = item.href === activeHref;
+                        return (_jsx("li", { children: _jsx(Link, { href: item.href, "aria-current": active ? "page" : undefined, className: cn("flex h-[30px] w-fit items-center rounded-md border border-transparent px-2 text-[0.8rem] font-medium transition-colors hover:bg-accent", active && "border-accent bg-accent"), children: item.title }) }, item.href));
+                    }) })] }, group.label))) }));
+}
+function DocsSidebar(props) {
+    return (_jsxs("div", { className: "relative h-full", children: [_jsx("div", { className: "absolute top-12 right-2 bottom-0 w-px bg-[linear-gradient(to_bottom,transparent_0%,var(--border)_10%,var(--border)_90%,transparent_100%)]" }), _jsx("nav", { "aria-label": "Documentation", className: "no-scrollbar h-full w-56 overflow-y-auto pt-10 pb-12 pl-2.5 [mask-image:linear-gradient(to_bottom,transparent,black_2rem,black_calc(100%-3rem),transparent)]", children: _jsx(DocsNavList, { ...props }) })] }));
+}
+export { DocsNavList, DocsSidebar };

package/dist/shell/docs/on-this-page.d.ts

@@ -0,0 +1,11 @@
+type PageSection = {
+    id: string;
+    title: string;
+    nested?: boolean;
+};
+type OnThisPageProps = {
+    sections: PageSection[];
+    title?: string;
+};
+declare function OnThisPage({ sections, title }: OnThisPageProps): import("react").JSX.Element;
+export { OnThisPage, type PageSection };

package/dist/shell/docs/on-this-page.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { useActiveSection } from "./use-active-section";
+function OnThisPage({ sections, title = "On This Page" }) {
+    const [activeId, pinSection] = useActiveSection(sections.map((section) => section.id));
+    return (_jsxs("nav", { "aria-label": title, className: "flex flex-col gap-2 text-sm", children: [_jsx("p", { className: "h-6 text-xs font-medium text-muted-foreground", children: title }), sections.map((section) => (_jsx("button", { type: "button", onClick: () => {
+                    pinSection(section.id);
+                    document.getElementById(section.id)?.scrollIntoView({ behavior: "smooth" });
+                }, "aria-current": activeId === section.id ? "location" : undefined, className: cn("text-left text-[0.8rem] text-muted-foreground transition-colors hover:text-foreground", section.nested && "pl-4", activeId === section.id && "font-medium text-foreground"), children: section.title }, section.id)))] }));
+}
+export { OnThisPage };

package/dist/shell/docs/use-active-section.d.ts

@@ -0,0 +1,2 @@
+declare function useActiveSection(sectionIds: string[]): readonly [string, (id: string) => void];
+export { useActiveSection };

package/dist/shell/docs/use-active-section.js

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+const SMOOTH_SCROLL_MS = 800;
+function isWindowScrolledToBottom() {
+    const pageHeight = document.documentElement.scrollHeight;
+    const canScroll = pageHeight > window.innerHeight + 2;
+    return canScroll && window.innerHeight + window.scrollY >= pageHeight - 2;
+}
+const ACTIVE_LINE_PX = 120;
+function lastSectionAboveLine(ids) {
+    let current = ids[0];
+    for (const id of ids) {
+        const top = document.getElementById(id)?.getBoundingClientRect().top;
+        if (top !== undefined && top <= ACTIVE_LINE_PX) {
+            current = id;
+        }
+    }
+    return current;
+}
+function useActiveSection(sectionIds) {
+    const [activeId, setActiveId] = useState(sectionIds[0] ?? "");
+    const pinnedUntil = useRef(0);
+    const followScroll = useCallback((id) => {
+        if (Date.now() > pinnedUntil.current) {
+            setActiveId(id);
+        }
+    }, []);
+    const pinSection = useCallback((id) => {
+        pinnedUntil.current = Date.now() + SMOOTH_SCROLL_MS;
+        setActiveId(id);
+    }, []);
+    const idsKey = sectionIds.join(" ");
+    useEffect(() => {
+        const ids = idsKey.split(" ").filter(Boolean);
+        let frame = 0;
+        const updateActiveSection = () => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => {
+                const lastId = ids.at(-1);
+                const current = isWindowScrolledToBottom() && lastId ? lastId : lastSectionAboveLine(ids);
+                if (current) {
+                    followScroll(current);
+                }
+            });
+        };
+        updateActiveSection();
+        window.addEventListener("scroll", updateActiveSection, { passive: true });
+        return () => {
+            cancelAnimationFrame(frame);
+            window.removeEventListener("scroll", updateActiveSection);
+        };
+    }, [idsKey, followScroll]);
+    return [activeId, pinSection];
+}
+export { useActiveSection };

package/dist/shell/link.d.ts

@@ -0,0 +1,4 @@
+import type * as React from "react";
+export type LinkComponent = React.ComponentType<React.ComponentProps<"a"> & {
+    href: string;
+}>;

package/dist/shell/link.js

@@ -0,0 +1 @@
+export {};

package/dist/shell/navigation/app-sidebar.d.ts

@@ -0,0 +1,19 @@
+import type * as React from "react";
+import type { LinkComponent } from "../link";
+import { type AppNavGroup, type AppNavItem } from "./nav-group";
+type AppBrand = {
+    title: React.ReactNode;
+    subtitle?: string;
+    icon: React.ReactNode;
+    href: string;
+};
+type AppSidebarProps = {
+    brand: AppBrand;
+    groups: AppNavGroup[];
+    bottomItems?: AppNavItem[];
+    footer?: React.ReactNode;
+    activeHref: string;
+    linkComponent?: LinkComponent | "a";
+};
+declare function AppSidebar({ brand, groups, bottomItems, footer, activeHref, linkComponent, }: AppSidebarProps): React.JSX.Element;
+export { type AppBrand, AppSidebar };

package/dist/shell/navigation/app-sidebar.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sidebar, SidebarRail } from "../../layout/sidebar/sidebar";
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../../layout/sidebar/sidebar-menu";
+import { SidebarContent, SidebarFooter, SidebarHeader, } from "../../layout/sidebar/sidebar-sections";
+import { NavGroup } from "./nav-group";
+function BrandLink({ brand, Link }) {
+    return (_jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { size: "lg", asChild: true, children: _jsxs(Link, { href: brand.href, children: [_jsx("span", { "data-slot": "app-brand-icon", className: "flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg border border-line bg-ghost", children: brand.icon }), _jsxs("span", { className: "grid flex-1 text-left leading-tight", children: [_jsx("span", { className: "truncate text-sm font-semibold tracking-tight", children: brand.title }), brand.subtitle && (_jsx("span", { className: "truncate text-xs text-soft", children: brand.subtitle }))] })] }) }) }) }));
+}
+function AppSidebar({ brand, groups, bottomItems, footer, activeHref, linkComponent = "a", }) {
+    return (_jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { className: "h-14 justify-center border-b border-line py-0", children: _jsx(BrandLink, { brand: brand, Link: linkComponent }) }), _jsxs(SidebarContent, { children: [groups.map((group) => (_jsx(NavGroup, { group: group, activeHref: activeHref, Link: linkComponent }, group.label))), bottomItems && bottomItems.length > 0 && (_jsx(NavGroup, { group: { label: "", items: bottomItems }, activeHref: activeHref, Link: linkComponent, className: "mt-auto" }))] }), footer && _jsx(SidebarFooter, { className: "border-t border-line", children: footer }), _jsx(SidebarRail, {})] }));
+}
+export { AppSidebar };

package/dist/shell/navigation/nav-group.d.ts

@@ -0,0 +1,23 @@
+import type * as React from "react";
+import type { LinkComponent } from "../link";
+type AppNavItem = {
+    title: string;
+    href: string;
+    icon: React.ComponentType<{
+        className?: string;
+    }>;
+    external?: boolean;
+};
+type AppNavGroup = {
+    label: string;
+    items: AppNavItem[];
+};
+type NavGroupProps = {
+    group: AppNavGroup;
+    activeHref: string;
+    Link: LinkComponent | "a";
+    className?: string;
+};
+declare function isActiveHref(itemHref: string, activeHref: string): boolean;
+declare function NavGroup({ group, activeHref, Link, className }: NavGroupProps): React.JSX.Element;
+export { type AppNavGroup, type AppNavItem, isActiveHref, NavGroup };

package/dist/shell/navigation/nav-group.js

@@ -0,0 +1,17 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../../layout/sidebar/sidebar-menu";
+import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, } from "../../layout/sidebar/sidebar-sections";
+function isActiveHref(itemHref, activeHref) {
+    return activeHref === itemHref || activeHref.startsWith(`${itemHref}/`);
+}
+function NavItemLink({ item, Link, ...props }) {
+    const content = (_jsxs(_Fragment, { children: [_jsx(item.icon, {}), _jsx("span", { children: item.title })] }));
+    if (item.external) {
+        return (_jsx("a", { ...props, href: item.href, target: "_blank", rel: "noreferrer", children: content }));
+    }
+    return (_jsx(Link, { ...props, href: item.href, children: content }));
+}
+function NavGroup({ group, activeHref, Link, className }) {
+    return (_jsxs(SidebarGroup, { className: className, children: [group.label && _jsx(SidebarGroupLabel, { children: group.label }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: group.items.map((item) => (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, isActive: isActiveHref(item.href, activeHref), tooltip: item.title, children: _jsx(NavItemLink, { item: item, Link: Link }) }) }, item.href))) }) })] }));
+}
+export { isActiveHref, NavGroup };

package/dist/shell/theme-toggle.d.ts

@@ -0,0 +1,7 @@
+type Theme = "light" | "dark";
+type ThemeToggleProps = {
+    theme: Theme;
+    onThemeChange: (theme: Theme) => void;
+};
+declare function ThemeToggle({ theme, onThemeChange }: ThemeToggleProps): import("react").JSX.Element;
+export { ThemeToggle };

package/dist/shell/theme-toggle.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MoonIcon, SunIcon } from "lucide-react";
+import { Button } from "../action/button";
+function ThemeToggle({ theme, onThemeChange }) {
+    const nextTheme = theme === "dark" ? "light" : "dark";
+    return (_jsxs(Button, { variant: "ghost", size: "icon-sm", "aria-label": `Switch to ${nextTheme} theme`, onClick: () => onThemeChange(nextTheme), children: [_jsx(SunIcon, { className: "scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" }), _jsx(MoonIcon, { className: "absolute scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" })] }));
+}
+export { ThemeToggle };

package/dist/styles/theme.css

@@ -0,0 +1,4 @@
+@import "@locusgraph/tokens/theme.css";
+@import "@locusgraph/tokens/typeset.css";
+
+@source "../";

package/package.json

@@ -1,6 +1,68 @@
 {
   "name": "@locusgraph/components",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Radix and shadcn based React components, shells and theme for LocusGraph apps.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/locusgraph/design.git",
+    "directory": "packages/components"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./theme.css": "./dist/styles/theme.css"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public",
+    "provenance": true
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.9.0",
+    "@locusgraph/tokens": "0.1.0",
+    "@shadcn/react": "^0.3.1",
+    "class-variance-authority": "^0.7.1",
+    "cmdk": "^1.1.1",
+    "cn": "^0.4.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.5.0",
+    "lucide-react": "^1.28.0",
+    "radix-ui": "^1.8.1",
+    "react-day-picker": "^9.14.0",
+    "react-hook-form": "^7.90.0",
+    "react-resizable-panels": "^4.14.5",
+    "recharts": "^3.10.1",
+    "sonner": "^2.0.7",
+    "vaul": "^1.1.2"
+  },
+  "devDependencies": {
+    "@locusgraph/config": "0.1.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "typescript": "^7.0.2",
+    "vitest": "^5.0.3"
+  },
+  "homepage": "https://design.locusgraph.com",
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp -R src/styles dist/styles",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run"
+  }
 }