@lar-works/design-system 0.0.0-stage → 0.1.0

package/dist/layout/TitleBar.js

@@ -0,0 +1,83 @@
+import { useDesignSystemLabels } from "../foundations/DesignSystemProvider.js";
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
+// src/layout/TitleBar.tsx
+/** T3 Code's 52px title bar: the brand and where you are on the left, tools on the right. Its own width,
+*  not the window's, decides when search folds to an icon; narrow screens close the gaps so the title keeps
+*  the room left. */
+function TitleBar({ actions, brand, search, title }) {
+	const labels = useDesignSystemLabels();
+	return /* @__PURE__ */ jsxs("header", {
+		"aria-label": labels.toolbar,
+		className: "@container relative flex h-13 min-w-0 items-center gap-1 px-3 sm:gap-2 sm:px-4",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "[&_a]:focus-visible:ring-primary flex shrink-0 items-center [&_a]:rounded-sm [&_a]:outline-none [&_a]:focus-visible:ring-2",
+				children: brand
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "bg-base-300 mx-1 h-5 w-px shrink-0 max-sm:hidden"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 flex-1 items-center gap-1",
+				children: title
+			}),
+			search ? /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0",
+				children: search
+			}) : null,
+			actions ? /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center gap-1.5",
+				children: actions
+			}) : null
+		]
+	});
+}
+/** The title bar's location, T3's "project / thread": each step muted and chevron-separated, the current one
+*  in the foreground. Steps that switch somewhere are buttons with a chevron. Narrow screens show only the
+*  current step. */
+function TitleBarTrail({ items }) {
+	return /* @__PURE__ */ jsx("ol", {
+		className: "flex min-w-0 items-center gap-0.5 text-sm",
+		children: items.map((item, index) => {
+			const last = index === items.length - 1;
+			const content = /* @__PURE__ */ jsxs(Fragment, { children: [item.icon ? /* @__PURE__ */ jsx("span", {
+				className: "text-base-700 flex shrink-0 [&_svg]:size-4",
+				children: item.icon
+			}) : null, /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: item.label
+			})] });
+			return /* @__PURE__ */ jsxs("li", {
+				"aria-current": last ? "page" : void 0,
+				className: `flex min-w-0 items-center gap-0.5 ${last ? "text-base-content font-medium" : "text-base-700 hidden shrink-0 sm:flex"}`,
+				children: [index > 0 ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "text-base-500 flex shrink-0 [&>svg]:size-3.5",
+					children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+				}) : null, item.onSelect ? /* @__PURE__ */ jsxs("button", {
+					...tabbable,
+					type: "button",
+					"aria-haspopup": "dialog",
+					"aria-description": item.selectLabel,
+					title: item.selectLabel,
+					onClick: item.onSelect,
+					className: "hover:bg-base-200 hover:text-base-content focus-visible:outline-primary dark:hover:bg-base-300 flex h-7 min-w-0 items-center gap-2 rounded-lg px-2 transition-colors focus-visible:outline-2",
+					children: [content, /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "text-base-500 flex shrink-0 [&>svg]:size-3.5",
+						children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+					})]
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "flex min-w-0 items-center gap-2 px-2",
+					children: content
+				})]
+			}, item.key);
+		})
+	});
+}
+export { TitleBar, TitleBarTrail };
+
+//# sourceMappingURL=TitleBar.js.map

package/dist/layout/TitleBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleBar.js","names":[],"sources":["../../src/layout/TitleBar.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport { useDesignSystemLabels } from '../foundations/DesignSystemProvider';\nimport { tabbable } from '../foundations/KeyboardFocus';\n\ninterface TitleBarProps {\n    actions?: ReactNode;\n    /** The brand, a link home, before a divider and the title. */\n    brand: ReactNode;\n    search?: ReactNode;\n    title: ReactNode;\n}\n\n/** T3 Code's 52px title bar: the brand and where you are on the left, tools on the right. Its own width,\n *  not the window's, decides when search folds to an icon; narrow screens close the gaps so the title keeps\n *  the room left. */\nexport function TitleBar({ actions, brand, search, title }: TitleBarProps) {\n    const labels = useDesignSystemLabels();\n\n    return (\n        <header\n            aria-label={labels.toolbar}\n            className=\"@container relative flex h-13 min-w-0 items-center gap-1 px-3 sm:gap-2 sm:px-4\"\n        >\n            <div className=\"[&_a]:focus-visible:ring-primary flex shrink-0 items-center [&_a]:rounded-sm [&_a]:outline-none [&_a]:focus-visible:ring-2\">\n                {brand}\n            </div>\n            <span aria-hidden=\"true\" className=\"bg-base-300 mx-1 h-5 w-px shrink-0 max-sm:hidden\" />\n            <div className=\"flex min-w-0 flex-1 items-center gap-1\">{title}</div>\n            {search ? <div className=\"flex shrink-0\">{search}</div> : null}\n            {actions ? <div className=\"flex shrink-0 items-center gap-1.5\">{actions}</div> : null}\n        </header>\n    );\n}\n\nexport interface TitleBarTrailItem {\n    key: string;\n    icon?: ReactNode;\n    label: string;\n    /** Makes the step a button, such as one switching to its siblings; `selectLabel` says where it leads. */\n    onSelect?: () => void;\n    selectLabel?: string;\n}\n\n/** The title bar's location, T3's \"project / thread\": each step muted and chevron-separated, the current one\n *  in the foreground. Steps that switch somewhere are buttons with a chevron. Narrow screens show only the\n *  current step. */\nexport function TitleBarTrail({ items }: { items: readonly TitleBarTrailItem[] }) {\n    return (\n        <ol className=\"flex min-w-0 items-center gap-0.5 text-sm\">\n            {items.map((item, index) => {\n                const last = index === items.length - 1;\n                const content = (\n                    <>\n                        {item.icon ? (\n                            <span className=\"text-base-700 flex shrink-0 [&_svg]:size-4\">{item.icon}</span>\n                        ) : null}\n                        <span className=\"truncate\">{item.label}</span>\n                    </>\n                );\n\n                return (\n                    <li\n                        key={item.key}\n                        aria-current={last ? 'page' : undefined}\n                        className={`flex min-w-0 items-center gap-0.5 ${last ? 'text-base-content font-medium' : 'text-base-700 hidden shrink-0 sm:flex'}`}\n                    >\n                        {index > 0 ? (\n                            <span aria-hidden=\"true\" className=\"text-base-500 flex shrink-0 [&>svg]:size-3.5\">\n                                <ChevronRightIcon />\n                            </span>\n                        ) : null}\n                        {item.onSelect ? (\n                            <button\n                                {...tabbable}\n                                type=\"button\"\n                                aria-haspopup=\"dialog\"\n                                aria-description={item.selectLabel}\n                                title={item.selectLabel}\n                                onClick={item.onSelect}\n                                className=\"hover:bg-base-200 hover:text-base-content focus-visible:outline-primary dark:hover:bg-base-300 flex h-7 min-w-0 items-center gap-2 rounded-lg px-2 transition-colors focus-visible:outline-2\"\n                            >\n                                {content}\n                                <span aria-hidden=\"true\" className=\"text-base-500 flex shrink-0 [&>svg]:size-3.5\">\n                                    <ChevronDownIcon />\n                                </span>\n                            </button>\n                        ) : (\n                            <span className=\"flex min-w-0 items-center gap-2 px-2\">{content}</span>\n                        )}\n                    </li>\n                );\n            })}\n        </ol>\n    );\n}\n"],"mappings":";;;;;;;;AAiBA,SAAgB,SAAS,EAAE,SAAS,OAAO,QAAQ,SAAwB;CACvE,MAAM,SAAS,sBAAsB;CAErC,OACI,qBAAC,UAAD;EACI,cAAY,OAAO;EACnB,WAAU;EAFd,UAAA;GAII,oBAAC,OAAD;IAAK,WAAU;IACV,UAAA;GACA,CAAA;GACL,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;GAAoD,CAAA;GACvF,oBAAC,OAAD;IAAK,WAAU;IAA0C,UAAA;GAAW,CAAA;GACnE,SAAS,oBAAC,OAAD;IAAK,WAAU;IAAiB,UAAA;GAAY,CAAA,IAAI;GACzD,UAAU,oBAAC,OAAD;IAAK,WAAU;IAAsC,UAAA;GAAa,CAAA,IAAI;EAC7E;;AAEhB;;;;AAcA,SAAgB,cAAc,EAAE,SAAkD;CAC9E,OACI,oBAAC,MAAD;EAAI,WAAU;EACT,UAAA,MAAM,KAAK,MAAM,UAAU;GACxB,MAAM,OAAO,UAAU,MAAM,SAAS;GACtC,MAAM,UACF,qBAAA,UAAA,EAAA,UAAA,CACK,KAAK,OACF,oBAAC,QAAD;IAAM,WAAU;IAA8C,UAAA,KAAK;GAAW,CAAA,IAC9E,MACJ,oBAAC,QAAD;IAAM,WAAU;IAAY,UAAA,KAAK;GAAY,CAAA,CAC/C,EAAA,CAAA;GAGN,OACI,qBAAC,MAAD;IAEI,gBAAc,OAAO,SAAS,KAAA;IAC9B,WAAW,qCAAqC,OAAO,kCAAkC;IAH7F,UAAA,CAKK,QAAQ,IACL,oBAAC,QAAD;KAAM,eAAY;KAAO,WAAU;KAC/B,UAAA,oBAAC,kBAAD,CAAmB,CAAA;IACjB,CAAA,IACN,MACH,KAAK,WACF,qBAAC,UAAD;KACI,GAAI;KACJ,MAAK;KACL,iBAAc;KACd,oBAAkB,KAAK;KACvB,OAAO,KAAK;KACZ,SAAS,KAAK;KACd,WAAU;KAPd,UAAA,CASK,SACD,oBAAC,QAAD;MAAM,eAAY;MAAO,WAAU;MAC/B,UAAA,oBAAC,iBAAD,CAAkB,CAAA;KAChB,CAAA,CACF;IAER,CAAA,IAAA,oBAAC,QAAD;KAAM,WAAU;KAAwC,UAAA;IAAc,CAAA,CAE1E;GA3BK,GAAA,KAAK,GA2BV;EAEZ,CAAC;CACD,CAAA;AAEZ"}

package/dist/layout/WorkspaceActionsHeader.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+interface WorkspaceActionsHeaderProps {
+  children?: ReactNode;
+  leading?: ReactNode;
+}
+export declare function WorkspaceActionsHeader({ children, leading }: WorkspaceActionsHeaderProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=WorkspaceActionsHeader.d.ts.map

package/dist/layout/WorkspaceActionsHeader.js

@@ -0,0 +1,18 @@
+import { ContentContainer } from "./ContentContainer.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/layout/WorkspaceActionsHeader.tsx
+function WorkspaceActionsHeader({ children, leading }) {
+	return /* @__PURE__ */ jsxs(ContentContainer, {
+		className: "bg-base-50 z-40 flex h-14 shrink-0 items-center gap-2 sm:gap-3",
+		children: [leading ? /* @__PURE__ */ jsx("div", {
+			className: "flex min-w-0 flex-1 items-center gap-1",
+			children: leading
+		}) : null, children ? /* @__PURE__ */ jsx("div", {
+			className: "ml-auto shrink-0",
+			children
+		}) : null]
+	});
+}
+export { WorkspaceActionsHeader };
+
+//# sourceMappingURL=WorkspaceActionsHeader.js.map

package/dist/layout/WorkspaceActionsHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkspaceActionsHeader.js","names":[],"sources":["../../src/layout/WorkspaceActionsHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { ContentContainer } from './ContentContainer';\n\ninterface WorkspaceActionsHeaderProps {\n    children?: ReactNode;\n    leading?: ReactNode;\n}\n\nexport function WorkspaceActionsHeader({ children, leading }: WorkspaceActionsHeaderProps) {\n    return (\n        <ContentContainer className=\"bg-base-50 z-40 flex h-14 shrink-0 items-center gap-2 sm:gap-3\">\n            {leading ? <div className=\"flex min-w-0 flex-1 items-center gap-1\">{leading}</div> : null}\n            {children ? <div className=\"ml-auto shrink-0\">{children}</div> : null}\n        </ContentContainer>\n    );\n}\n"],"mappings":";;;AASA,SAAgB,uBAAuB,EAAE,UAAU,WAAwC;CACvF,OACI,qBAAC,kBAAD;EAAkB,WAAU;EAA5B,UAAA,CACK,UAAU,oBAAC,OAAD;GAAK,WAAU;GAA0C,UAAA;EAAa,CAAA,IAAI,MACpF,WAAW,oBAAC,OAAD;GAAK,WAAU;GAAoB;EAAc,CAAA,IAAI,IACnD;;AAE1B"}

package/dist/layout/index.d.ts

@@ -0,0 +1,19 @@
+import { AppShell } from "./AppShell.js";
+import { AuthLayout } from "./AuthLayout.js";
+import { FlowSpace, Grid as Grid$1, Inline, Stack as Stack$1, StackProps as StackProps$1 } from "./Flow.js";
+import { PageLayout } from "./PageLayout.js";
+import { ScrollArea, ScrollAreaProps } from "./ScrollArea.js";
+import { Section } from "./Section.js";
+import { SidebarNavigationItem } from "./sidebar/SidebarNavigationItem.js";
+import { SidebarNavigationGroup, SidebarPane } from "./sidebar/SidebarPane.js";
+import { TitleBar, TitleBarTrail, TitleBarTrailItem } from "./TitleBar.js";
+import { CommandPaletteTrigger } from "./toolbar/CommandPaletteTrigger.js";
+import { ToolbarStatusGroup } from "./toolbar/ToolbarStatusGroup.js";
+import { ToolbarStatusItem } from "./toolbar/ToolbarStatusItem.js";
+import { WorkspaceActionsHeader } from "./WorkspaceActionsHeader.js";
+import { ContentContainer } from "./ContentContainer.js";
+import { Eyebrow, PageSection, SectionHeading } from "./PageSection.js";
+import { SiteFooter, SiteHeader, SiteLink, SiteShell } from "./Site.js";
+import { Divider } from "@ninna-ui/primitives";
+import { Box as Box$1 } from "@ninna-ui/layout";
+export { AppShell, AuthLayout, Box$1 as Box, CommandPaletteTrigger, ContentContainer, Divider, Eyebrow, type FlowSpace, Grid$1 as Grid, Inline, PageLayout, PageSection, ScrollArea, type ScrollAreaProps, Section, SectionHeading, SidebarNavigationGroup, SidebarNavigationItem, SidebarPane, SiteFooter, SiteHeader, type SiteLink, SiteShell, Stack$1 as Stack, type StackProps$1 as StackProps, TitleBar, TitleBarTrail, type TitleBarTrailItem, ToolbarStatusGroup, ToolbarStatusItem, WorkspaceActionsHeader };

package/dist/layout/index.js

@@ -0,0 +1,19 @@
+import { Grid as Grid$1, Inline, Stack as Stack$1 } from "./Flow.js";
+import { AppShell } from "./AppShell.js";
+import { AuthLayout } from "./AuthLayout.js";
+import { ContentContainer } from "./ContentContainer.js";
+import { PageLayout } from "./PageLayout.js";
+import { ScrollArea } from "./ScrollArea.js";
+import { Section } from "./Section.js";
+import { SidebarNavigationItem } from "./sidebar/SidebarNavigationItem.js";
+import { SidebarNavigationGroup, SidebarPane } from "./sidebar/SidebarPane.js";
+import { TitleBar, TitleBarTrail } from "./TitleBar.js";
+import { CommandPaletteTrigger } from "./toolbar/CommandPaletteTrigger.js";
+import { ToolbarStatusGroup } from "./toolbar/ToolbarStatusGroup.js";
+import { ToolbarStatusItem } from "./toolbar/ToolbarStatusItem.js";
+import { WorkspaceActionsHeader } from "./WorkspaceActionsHeader.js";
+import { Eyebrow, PageSection, SectionHeading } from "./PageSection.js";
+import { SiteFooter, SiteHeader, SiteShell } from "./Site.js";
+import { Divider } from "@ninna-ui/primitives";
+import { Box as Box$1 } from "@ninna-ui/layout";
+export { AppShell, AuthLayout, Box$1 as Box, CommandPaletteTrigger, ContentContainer, Divider, Eyebrow, Grid$1 as Grid, Inline, PageLayout, PageSection, ScrollArea, Section, SectionHeading, SidebarNavigationGroup, SidebarNavigationItem, SidebarPane, SiteFooter, SiteHeader, SiteShell, Stack$1 as Stack, TitleBar, TitleBarTrail, ToolbarStatusGroup, ToolbarStatusItem, WorkspaceActionsHeader };

package/dist/layout/sidebar/SidebarNavigationItem.d.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithoutRef } from "react";
+type SidebarNavigationItemProps = Omit<ComponentPropsWithoutRef<'button'>, 'className' | 'style' | 'type'> & {
+  active?: boolean;
+  /** Styles its only child, such as a router link, instead of wrapping it in a second tab stop. */
+  asChild?: boolean;
+  notification?: string;
+};
+export declare function SidebarNavigationItem({ active, asChild, children, notification, ...props }: SidebarNavigationItemProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=SidebarNavigationItem.d.ts.map

package/dist/layout/sidebar/SidebarNavigationItem.js

@@ -0,0 +1,36 @@
+import { StatusIndicator } from "../../feedback/StatusIndicator.js";
+import { tabbable } from "../../foundations/KeyboardFocus.js";
+import { cloneElement, isValidElement, useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/layout/sidebar/SidebarNavigationItem.tsx
+function SidebarNavigationItem({ active = false, asChild = false, children, notification, ...props }) {
+	const target = useRef(null);
+	useEffect(() => {
+		if (active) target.current?.scrollIntoView?.({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [active]);
+	const item = {
+		...tabbable,
+		"aria-current": active ? "page" : void 0,
+		"aria-description": notification,
+		className: `flex h-8 shrink-0 items-center gap-2 rounded-md px-2 text-sm transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary [&>svg]:size-4 ${active ? "bg-base-200 font-medium text-base-content dark:bg-base-300 [&>svg]:text-base-content" : "text-base-content/80 hover:bg-base-200/70 hover:text-base-content [&>svg]:text-base-700"}`
+	};
+	const indicator = notification ? /* @__PURE__ */ jsx(StatusIndicator, {
+		tone: "warning",
+		size: "sm",
+		className: "ml-auto"
+	}) : null;
+	if (asChild && isValidElement(children)) return cloneElement(children, item, children.props.children, indicator);
+	return /* @__PURE__ */ jsxs("button", {
+		ref: target,
+		...props,
+		...item,
+		type: "button",
+		children: [children, indicator]
+	});
+}
+export { SidebarNavigationItem };
+
+//# sourceMappingURL=SidebarNavigationItem.js.map

package/dist/layout/sidebar/SidebarNavigationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNavigationItem.js","names":[],"sources":["../../../src/layout/sidebar/SidebarNavigationItem.tsx"],"sourcesContent":["import { cloneElement, type ComponentPropsWithoutRef, isValidElement, useEffect, useRef } from 'react';\n\nimport { StatusIndicator } from '../../feedback/StatusIndicator';\nimport { tabbable } from '../../foundations/KeyboardFocus';\n\ntype SidebarNavigationItemProps = Omit<ComponentPropsWithoutRef<'button'>, 'className' | 'style' | 'type'> & {\n    active?: boolean;\n    /** Styles its only child, such as a router link, instead of wrapping it in a second tab stop. */\n    asChild?: boolean;\n    notification?: string;\n};\n\nexport function SidebarNavigationItem({\n    active = false,\n    asChild = false,\n    children,\n    notification,\n    ...props\n}: SidebarNavigationItemProps) {\n    const target = useRef<HTMLButtonElement | null>(null);\n\n    useEffect(() => {\n        if (active) target.current?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });\n    }, [active]);\n\n    const item = {\n        ...tabbable,\n        'aria-current': active ? ('page' as const) : undefined,\n        'aria-description': notification,\n        className: `flex h-8 shrink-0 items-center gap-2 rounded-md px-2 text-sm transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary [&>svg]:size-4 ${active ? 'bg-base-200 font-medium text-base-content dark:bg-base-300 [&>svg]:text-base-content' : 'text-base-content/80 hover:bg-base-200/70 hover:text-base-content [&>svg]:text-base-700'}`,\n    };\n\n    const indicator = notification ? <StatusIndicator tone=\"warning\" size=\"sm\" className=\"ml-auto\" /> : null;\n\n    if (asChild && isValidElement<ComponentPropsWithoutRef<'button'>>(children)) {\n        return cloneElement(children, item, children.props.children, indicator);\n    }\n\n    return (\n        <button ref={target} {...props} {...item} type=\"button\">\n            {children}\n            {indicator}\n        </button>\n    );\n}\n"],"mappings":";;;;;AAYA,SAAgB,sBAAsB,EAClC,SAAS,OACT,UAAU,OACV,UACA,cACA,GAAG,SACwB;CAC3B,MAAM,SAAS,OAAiC,IAAI;CAEpD,gBAAgB;EACZ,IAAI,QAAQ,OAAO,SAAS,iBAAiB;GAAE,OAAO;GAAW,QAAQ;EAAU,CAAC;CACxF,GAAG,CAAC,MAAM,CAAC;CAEX,MAAM,OAAO;EACT,GAAG;EACH,gBAAgB,SAAU,SAAmB,KAAA;EAC7C,oBAAoB;EACpB,WAAW,uLAAuL,SAAS,yFAAyF;CACxS;CAEA,MAAM,YAAY,eAAe,oBAAC,iBAAD;EAAiB,MAAK;EAAU,MAAK;EAAK,WAAU;CAAW,CAAA,IAAI;CAEpG,IAAI,WAAW,eAAmD,QAAQ,GACtE,OAAO,aAAa,UAAU,MAAM,SAAS,MAAM,UAAU,SAAS;CAG1E,OACI,qBAAC,UAAD;EAAQ,KAAK;EAAQ,GAAI;EAAO,GAAI;EAAM,MAAK;EAA/C,UAAA,CACK,UACA,SACG;;AAEhB"}

package/dist/layout/sidebar/SidebarPane.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+interface SidebarPaneProps {
+  children: ReactNode;
+  label: string;
+}
+export declare function SidebarPane({ children, label }: SidebarPaneProps): import("react").JSX.Element;
+interface SidebarNavigationGroupProps {
+  children: ReactNode;
+  label: string;
+}
+export declare function SidebarNavigationGroup({ children, label }: SidebarNavigationGroupProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=SidebarPane.d.ts.map

package/dist/layout/sidebar/SidebarPane.js

@@ -0,0 +1,30 @@
+import { Text } from "../../typography/Typography.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/layout/sidebar/SidebarPane.tsx
+function SidebarPane({ children, label }) {
+	return /* @__PURE__ */ jsx("aside", {
+		className: "border-base-300 bg-base-100/40 w-full border-y md:h-full md:border-y-0 md:border-r dark:bg-black/20",
+		children: /* @__PURE__ */ jsx("nav", {
+			"aria-label": label,
+			className: "flex items-center gap-1 overflow-x-auto overscroll-contain p-3 md:h-full md:flex-col md:items-stretch md:gap-1 md:overflow-y-auto md:px-3 md:py-4",
+			children
+		})
+	});
+}
+function SidebarNavigationGroup({ children, label }) {
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": label,
+		className: "flex shrink-0 gap-1 md:mb-4 md:flex-col md:last:mb-0",
+		children: [/* @__PURE__ */ jsx(Text, {
+			as: "span",
+			className: "hidden h-7 px-2 leading-7 font-medium md:block",
+			variant: "caption",
+			tone: "muted",
+			children: label
+		}), children]
+	});
+}
+export { SidebarNavigationGroup, SidebarPane };
+
+//# sourceMappingURL=SidebarPane.js.map

package/dist/layout/sidebar/SidebarPane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarPane.js","names":[],"sources":["../../../src/layout/sidebar/SidebarPane.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Text } from '../../typography/Typography';\n\ninterface SidebarPaneProps {\n    children: ReactNode;\n    label: string;\n}\n\nexport function SidebarPane({ children, label }: SidebarPaneProps) {\n    return (\n        <aside className=\"border-base-300 bg-base-100/40 w-full border-y md:h-full md:border-y-0 md:border-r dark:bg-black/20\">\n            <nav\n                aria-label={label}\n                className=\"flex items-center gap-1 overflow-x-auto overscroll-contain p-3 md:h-full md:flex-col md:items-stretch md:gap-1 md:overflow-y-auto md:px-3 md:py-4\"\n            >\n                {children}\n            </nav>\n        </aside>\n    );\n}\n\ninterface SidebarNavigationGroupProps {\n    children: ReactNode;\n    label: string;\n}\n\nexport function SidebarNavigationGroup({ children, label }: SidebarNavigationGroupProps) {\n    return (\n        <div role=\"group\" aria-label={label} className=\"flex shrink-0 gap-1 md:mb-4 md:flex-col md:last:mb-0\">\n            <Text as=\"span\" className=\"hidden h-7 px-2 leading-7 font-medium md:block\" variant=\"caption\" tone=\"muted\">\n                {label}\n            </Text>\n            {children}\n        </div>\n    );\n}\n"],"mappings":";;;AASA,SAAgB,YAAY,EAAE,UAAU,SAA2B;CAC/D,OACI,oBAAC,SAAD;EAAO,WAAU;EACb,UAAA,oBAAC,OAAD;GACI,cAAY;GACZ,WAAU;GAET;EACA,CAAA;CACF,CAAA;AAEf;AAOA,SAAgB,uBAAuB,EAAE,UAAU,SAAsC;CACrF,OACI,qBAAC,OAAD;EAAK,MAAK;EAAQ,cAAY;EAAO,WAAU;EAA/C,UAAA,CACI,oBAAC,MAAD;GAAM,IAAG;GAAO,WAAU;GAAiD,SAAQ;GAAU,MAAK;GAC7F,UAAA;EACC,CAAA,GACL,QACA;;AAEb"}

package/dist/layout/toolbar/CommandPaletteTrigger.d.ts

@@ -0,0 +1,11 @@
+interface CommandPaletteTriggerProps {
+  label: string;
+  onOpen: () => void;
+  /** Key that opens the palette from anywhere, pressed with ⌘ on Apple devices and Ctrl elsewhere. */
+  shortcut: string;
+}
+/** The title bar's way into the command palette: a quiet field-like button with its shortcut, folding to its
+ *  icon when the title bar is narrow. */
+export declare function CommandPaletteTrigger({ label, onOpen, shortcut }: CommandPaletteTriggerProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=CommandPaletteTrigger.d.ts.map

package/dist/layout/toolbar/CommandPaletteTrigger.js

@@ -0,0 +1,46 @@
+import { Kbd } from "../../display/Kbd.js";
+import { tabbable } from "../../foundations/KeyboardFocus.js";
+import { applePlatform, isShortcut } from "../../foundations/KeyboardShortcut.js";
+import { useEffect, useEffectEvent, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SearchIcon } from "lucide-react";
+// src/layout/toolbar/CommandPaletteTrigger.tsx
+/** The title bar's way into the command palette: a quiet field-like button with its shortcut, folding to its
+*  icon when the title bar is narrow. */
+function CommandPaletteTrigger({ label, onOpen, shortcut }) {
+	const button = useRef(null);
+	const openFromShortcut = useEffectEvent((event) => {
+		if (!isShortcut(event, shortcut) || button.current?.closest("[aria-hidden=\"true\"]")) return;
+		event.preventDefault();
+		onOpen();
+	});
+	useEffect(() => {
+		const listener = (event) => openFromShortcut(event);
+		document.addEventListener("keydown", listener);
+		return () => document.removeEventListener("keydown", listener);
+	}, []);
+	return /* @__PURE__ */ jsxs("button", {
+		...tabbable,
+		ref: button,
+		type: "button",
+		"aria-label": label,
+		"aria-haspopup": "dialog",
+		"aria-keyshortcuts": `${applePlatform ? "Meta" : "Control"}+${shortcut.toUpperCase()}`,
+		onClick: onOpen,
+		className: "text-base-600 hover:bg-base-200 hover:text-base-content focus-visible:outline-primary @2xl:border-base-300 @2xl:bg-base-100 @2xl:hover:border-base-400 @2xl:hover:bg-base-100 dark:@2xl:bg-base-200 flex size-7 items-center justify-center gap-2 rounded-lg text-sm transition-colors focus-visible:outline-2 @2xl:w-56 @2xl:justify-start @2xl:border @2xl:px-2.5 [&>svg]:size-4 [&>svg]:shrink-0",
+		children: [
+			/* @__PURE__ */ jsx(SearchIcon, {}),
+			/* @__PURE__ */ jsx("span", {
+				className: "hidden flex-1 text-left @2xl:inline",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "hidden pointer-fine:@2xl:inline",
+				children: /* @__PURE__ */ jsx(Kbd, { children: applePlatform ? `⌘${shortcut.toUpperCase()}` : `Ctrl ${shortcut.toUpperCase()}` })
+			})
+		]
+	});
+}
+export { CommandPaletteTrigger };
+
+//# sourceMappingURL=CommandPaletteTrigger.js.map

package/dist/layout/toolbar/CommandPaletteTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPaletteTrigger.js","names":[],"sources":["../../../src/layout/toolbar/CommandPaletteTrigger.tsx"],"sourcesContent":["import { SearchIcon } from 'lucide-react';\nimport { useEffect, useEffectEvent, useRef } from 'react';\n\nimport { Kbd } from '../../display/Kbd';\nimport { tabbable } from '../../foundations/KeyboardFocus';\nimport { applePlatform, isShortcut } from '../../foundations/KeyboardShortcut';\n\ninterface CommandPaletteTriggerProps {\n    label: string;\n    onOpen: () => void;\n    /** Key that opens the palette from anywhere, pressed with ⌘ on Apple devices and Ctrl elsewhere. */\n    shortcut: string;\n}\n\n/** The title bar's way into the command palette: a quiet field-like button with its shortcut, folding to its\n *  icon when the title bar is narrow. */\nexport function CommandPaletteTrigger({ label, onOpen, shortcut }: CommandPaletteTriggerProps) {\n    const button = useRef<HTMLButtonElement>(null);\n    const openFromShortcut = useEffectEvent((event: KeyboardEvent) => {\n        // An open dialog hides the page behind it, the trigger included.\n        if (!isShortcut(event, shortcut) || button.current?.closest('[aria-hidden=\"true\"]')) return;\n\n        event.preventDefault();\n        onOpen();\n    });\n\n    useEffect(() => {\n        const listener = (event: KeyboardEvent) => openFromShortcut(event);\n\n        document.addEventListener('keydown', listener);\n\n        return () => document.removeEventListener('keydown', listener);\n    }, []);\n\n    return (\n        <button\n            {...tabbable}\n            ref={button}\n            type=\"button\"\n            aria-label={label}\n            aria-haspopup=\"dialog\"\n            aria-keyshortcuts={`${applePlatform ? 'Meta' : 'Control'}+${shortcut.toUpperCase()}`}\n            onClick={onOpen}\n            className=\"text-base-600 hover:bg-base-200 hover:text-base-content focus-visible:outline-primary @2xl:border-base-300 @2xl:bg-base-100 @2xl:hover:border-base-400 @2xl:hover:bg-base-100 dark:@2xl:bg-base-200 flex size-7 items-center justify-center gap-2 rounded-lg text-sm transition-colors focus-visible:outline-2 @2xl:w-56 @2xl:justify-start @2xl:border @2xl:px-2.5 [&>svg]:size-4 [&>svg]:shrink-0\"\n        >\n            <SearchIcon />\n            <span className=\"hidden flex-1 text-left @2xl:inline\">{label}</span>\n            <span className=\"hidden pointer-fine:@2xl:inline\">\n                <Kbd>{applePlatform ? `⌘${shortcut.toUpperCase()}` : `Ctrl ${shortcut.toUpperCase()}`}</Kbd>\n            </span>\n        </button>\n    );\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAgB,sBAAsB,EAAE,OAAO,QAAQ,YAAwC;CAC3F,MAAM,SAAS,OAA0B,IAAI;CAC7C,MAAM,mBAAmB,gBAAgB,UAAyB;EAE9D,IAAI,CAAC,WAAW,OAAO,QAAQ,KAAK,OAAO,SAAS,QAAQ,wBAAsB,GAAG;EAErF,MAAM,eAAe;EACrB,OAAO;CACX,CAAC;CAED,gBAAgB;EACZ,MAAM,YAAY,UAAyB,iBAAiB,KAAK;EAEjE,SAAS,iBAAiB,WAAW,QAAQ;EAE7C,aAAa,SAAS,oBAAoB,WAAW,QAAQ;CACjE,GAAG,CAAC,CAAC;CAEL,OACI,qBAAC,UAAD;EACI,GAAI;EACJ,KAAK;EACL,MAAK;EACL,cAAY;EACZ,iBAAc;EACd,qBAAmB,GAAG,gBAAgB,SAAS,UAAU,GAAG,SAAS,YAAY;EACjF,SAAS;EACT,WAAU;EARd,UAAA;GAUI,oBAAC,YAAD,CAAa,CAAA;GACb,oBAAC,QAAD;IAAM,WAAU;IAAuC,UAAA;GAAY,CAAA;GACnE,oBAAC,QAAD;IAAM,WAAU;IACZ,UAAA,oBAAC,KAAD,EAAA,UAAM,gBAAgB,IAAI,SAAS,YAAY,MAAM,QAAQ,SAAS,YAAY,IAAS,CAAA;GACzF,CAAA;EACF;;AAEhB"}

package/dist/layout/toolbar/ToolbarStatusGroup.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from "react";
+type ToolbarStatusGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+export declare function ToolbarStatusGroup(props: ToolbarStatusGroupProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ToolbarStatusGroup.d.ts.map

package/dist/layout/toolbar/ToolbarStatusGroup.js

@@ -0,0 +1,14 @@
+import { Inline } from "../Flow.js";
+import { jsx } from "react/jsx-runtime";
+// src/layout/toolbar/ToolbarStatusGroup.tsx
+function ToolbarStatusGroup(props) {
+	return /* @__PURE__ */ jsx(Inline, {
+		align: "center",
+		justify: "start",
+		...props,
+		className: "h-8 shrink-0 gap-0 sm:gap-2 sm:px-1"
+	});
+}
+export { ToolbarStatusGroup };
+
+//# sourceMappingURL=ToolbarStatusGroup.js.map

package/dist/layout/toolbar/ToolbarStatusGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarStatusGroup.js","names":[],"sources":["../../../src/layout/toolbar/ToolbarStatusGroup.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport { Inline } from '../Flow';\n\ntype ToolbarStatusGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;\n\nexport function ToolbarStatusGroup(props: ToolbarStatusGroupProps) {\n    return <Inline align=\"center\" justify=\"start\" {...props} className=\"h-8 shrink-0 gap-0 sm:gap-2 sm:px-1\" />;\n}\n"],"mappings":";;;AAMA,SAAgB,mBAAmB,OAAgC;CAC/D,OAAO,oBAAC,QAAD;EAAQ,OAAM;EAAS,SAAQ;EAAQ,GAAI;EAAO,WAAU;CAAuC,CAAA;AAC9G"}

package/dist/layout/toolbar/ToolbarStatusItem.d.ts

@@ -0,0 +1,9 @@
+import { StatusTone } from "../../feedback/StatusIndicator.js";
+import { ReactNode } from "react";
+interface ToolbarStatusItemProps {
+  icon: ReactNode;
+  tone: StatusTone;
+}
+export declare function ToolbarStatusItem({ icon, tone }: ToolbarStatusItemProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ToolbarStatusItem.d.ts.map

package/dist/layout/toolbar/ToolbarStatusItem.js

@@ -0,0 +1,18 @@
+import { StatusIndicator } from "../../feedback/StatusIndicator.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box } from "@ninna-ui/layout";
+// src/layout/toolbar/ToolbarStatusItem.tsx
+function ToolbarStatusItem({ icon, tone }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		"aria-hidden": "true",
+		className: "relative size-4 shrink-0 text-(--color-header-icon) [&>svg]:size-full",
+		children: [icon, /* @__PURE__ */ jsx(StatusIndicator, {
+			tone,
+			size: "sm",
+			className: "absolute -right-0.5 -bottom-0.5"
+		})]
+	});
+}
+export { ToolbarStatusItem };
+
+//# sourceMappingURL=ToolbarStatusItem.js.map

package/dist/layout/toolbar/ToolbarStatusItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarStatusItem.js","names":[],"sources":["../../../src/layout/toolbar/ToolbarStatusItem.tsx"],"sourcesContent":["import { Box } from '@ninna-ui/layout';\nimport type { ReactNode } from 'react';\n\nimport { StatusIndicator, type StatusTone } from '../../feedback/StatusIndicator';\n\ninterface ToolbarStatusItemProps {\n    icon: ReactNode;\n    tone: StatusTone;\n}\n\nexport function ToolbarStatusItem({ icon, tone }: ToolbarStatusItemProps) {\n    return (\n        <Box aria-hidden=\"true\" className=\"relative size-4 shrink-0 text-(--color-header-icon) [&>svg]:size-full\">\n            {icon}\n            <StatusIndicator tone={tone} size=\"sm\" className=\"absolute -right-0.5 -bottom-0.5\" />\n        </Box>\n    );\n}\n"],"mappings":";;;;AAUA,SAAgB,kBAAkB,EAAE,MAAM,QAAgC;CACtE,OACI,qBAAC,KAAD;EAAK,eAAY;EAAO,WAAU;EAAlC,UAAA,CACK,MACD,oBAAC,iBAAD;GAAuB;GAAM,MAAK;GAAK,WAAU;EAAmC,CAAA,CACnF;;AAEb"}

package/dist/navigation/ArtworkTabs.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+export interface ArtworkTabsItem<T extends string> {
+  value: T;
+  label: string;
+  caption?: string;
+  /** Small poster artwork, about 3rem wide. */
+  artwork: ReactNode;
+}
+/** One sideways-scrolling row of tabs with small artwork, such as a show's seasons. */
+export declare function ArtworkTabs<T extends string>({ items, label, value, onChange, loading, loadingLabel }: {
+  items: readonly ArtworkTabsItem<T>[];
+  label: string;
+  value: T | undefined;
+  onChange: (value: T) => void;
+  loading?: boolean;
+  loadingLabel?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ArtworkTabs.d.ts.map

package/dist/navigation/ArtworkTabs.js

@@ -0,0 +1,72 @@
+import { revealInRow } from "../collections/useScrollRow.js";
+import { SkeletonLoader } from "../feedback/SkeletonLoader.js";
+import { Stack } from "../layout/Flow.js";
+import { Text } from "../typography/Typography.js";
+import { moveTabSelection } from "./TabKeys.js";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/navigation/ArtworkTabs.tsx
+const row = "-mx-1 flex gap-3 overflow-x-auto px-1 pt-1 pb-2";
+/** One sideways-scrolling row of tabs with small artwork, such as a show's seasons. */
+function ArtworkTabs({ items, label, value, onChange, loading = false, loadingLabel = label }) {
+	const tabs = useRef(null);
+	useEffect(() => {
+		if (tabs.current && value !== void 0) revealInRow(tabs.current, tabs.current.querySelector(`[data-value="${value}"]`));
+	}, [value, loading]);
+	if (loading) return /* @__PURE__ */ jsx(SkeletonLoader, {
+		label: loadingLabel,
+		children: /* @__PURE__ */ jsx("div", {
+			className: row,
+			children: Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsxs("div", {
+				className: "flex w-56 shrink-0 items-center gap-3 p-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "w-12 shrink-0",
+					children: /* @__PURE__ */ jsx(SkeletonLoader.Shape, { presentation: "poster" })
+				}), /* @__PURE__ */ jsx(SkeletonLoader.Shape, { width: "wide" })]
+			}, index))
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: tabs,
+		role: "tablist",
+		"aria-label": label,
+		className: row,
+		onKeyDown: (event) => {
+			if (value !== void 0) moveTabSelection(event, items.map((item) => item.value), value, onChange);
+		},
+		children: items.map((item) => {
+			const selected = item.value === value;
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				role: "tab",
+				"aria-selected": selected,
+				tabIndex: selected ? 0 : -1,
+				"data-value": item.value,
+				className: "group hover:bg-base-200 focus-visible:outline-primary aria-selected:bg-base-200 aria-selected:ring-base-300 flex w-56 shrink-0 items-center gap-3 rounded-lg p-1.5 pr-3 text-left transition-colors focus-visible:outline-2 aria-selected:ring-1",
+				onClick: () => onChange(item.value),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "ring-base-900/10 w-12 shrink-0 overflow-hidden rounded-md ring-1 transition-opacity group-hover:opacity-100 group-aria-[selected=false]:opacity-70",
+					children: item.artwork
+				}), /* @__PURE__ */ jsxs(Stack, {
+					space: "none",
+					className: "min-w-0",
+					children: [/* @__PURE__ */ jsx(Text, {
+						as: "span",
+						variant: "label",
+						truncate: true,
+						children: item.label
+					}), item.caption ? /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						variant: "caption",
+						tone: "muted",
+						truncate: true,
+						children: item.caption
+					}) : null]
+				})]
+			}, item.value);
+		})
+	});
+}
+export { ArtworkTabs };
+
+//# sourceMappingURL=ArtworkTabs.js.map

package/dist/navigation/ArtworkTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArtworkTabs.js","names":[],"sources":["../../src/navigation/ArtworkTabs.tsx"],"sourcesContent":["import { type ReactNode, useEffect, useRef } from 'react';\n\nimport { revealInRow } from '../collections/useScrollRow';\nimport { SkeletonLoader } from '../feedback/SkeletonLoader';\nimport { Stack } from '../layout/Flow';\nimport { Text } from '../typography/Typography';\nimport { moveTabSelection } from './TabKeys';\n\nexport interface ArtworkTabsItem<T extends string> {\n    value: T;\n    label: string;\n    caption?: string;\n    /** Small poster artwork, about 3rem wide. */\n    artwork: ReactNode;\n}\n\nconst row = '-mx-1 flex gap-3 overflow-x-auto px-1 pt-1 pb-2';\n\n/** One sideways-scrolling row of tabs with small artwork, such as a show's seasons. */\nexport function ArtworkTabs<T extends string>({\n    items,\n    label,\n    value,\n    onChange,\n    loading = false,\n    loadingLabel = label,\n}: {\n    items: readonly ArtworkTabsItem<T>[];\n    label: string;\n    value: T | undefined;\n    onChange: (value: T) => void;\n    loading?: boolean;\n    loadingLabel?: string;\n}) {\n    const tabs = useRef<HTMLDivElement>(null);\n\n    // The selected tab stays in view however it was chosen, such as by an episode crossing into the next season.\n    useEffect(() => {\n        if (tabs.current && value !== undefined)\n            revealInRow(tabs.current, tabs.current.querySelector(`[data-value=\"${value}\"]`));\n    }, [value, loading]);\n\n    if (loading)\n        return (\n            <SkeletonLoader label={loadingLabel}>\n                <div className={row}>\n                    {Array.from({ length: 4 }, (_, index) => (\n                        <div key={index} className=\"flex w-56 shrink-0 items-center gap-3 p-1.5\">\n                            <span className=\"w-12 shrink-0\">\n                                <SkeletonLoader.Shape presentation=\"poster\" />\n                            </span>\n                            <SkeletonLoader.Shape width=\"wide\" />\n                        </div>\n                    ))}\n                </div>\n            </SkeletonLoader>\n        );\n\n    return (\n        <div\n            ref={tabs}\n            role=\"tablist\"\n            aria-label={label}\n            className={row}\n            onKeyDown={(event) => {\n                if (value !== undefined)\n                    moveTabSelection(\n                        event,\n                        items.map((item) => item.value),\n                        value,\n                        onChange,\n                    );\n            }}\n        >\n            {items.map((item) => {\n                const selected = item.value === value;\n\n                return (\n                    <button\n                        key={item.value}\n                        type=\"button\"\n                        role=\"tab\"\n                        aria-selected={selected}\n                        tabIndex={selected ? 0 : -1}\n                        data-value={item.value}\n                        className=\"group hover:bg-base-200 focus-visible:outline-primary aria-selected:bg-base-200 aria-selected:ring-base-300 flex w-56 shrink-0 items-center gap-3 rounded-lg p-1.5 pr-3 text-left transition-colors focus-visible:outline-2 aria-selected:ring-1\"\n                        onClick={() => onChange(item.value)}\n                    >\n                        <span className=\"ring-base-900/10 w-12 shrink-0 overflow-hidden rounded-md ring-1 transition-opacity group-hover:opacity-100 group-aria-[selected=false]:opacity-70\">\n                            {item.artwork}\n                        </span>\n                        <Stack space=\"none\" className=\"min-w-0\">\n                            <Text as=\"span\" variant=\"label\" truncate>\n                                {item.label}\n                            </Text>\n                            {item.caption ? (\n                                <Text as=\"span\" variant=\"caption\" tone=\"muted\" truncate>\n                                    {item.caption}\n                                </Text>\n                            ) : null}\n                        </Stack>\n                    </button>\n                );\n            })}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;AAgBA,MAAM,MAAM;;AAGZ,SAAgB,YAA8B,EAC1C,OACA,OACA,OACA,UACA,UAAU,OACV,eAAe,SAQhB;CACC,MAAM,OAAO,OAAuB,IAAI;CAGxC,gBAAgB;EACZ,IAAI,KAAK,WAAW,UAAU,KAAA,GAC1B,YAAY,KAAK,SAAS,KAAK,QAAQ,cAAc,gBAAgB,MAAM,GAAG,CAAC;CACvF,GAAG,CAAC,OAAO,OAAO,CAAC;CAEnB,IAAI,SACA,OACI,oBAAC,gBAAD;EAAgB,OAAO;EACnB,UAAA,oBAAC,OAAD;GAAK,WAAW;GACX,UAAA,MAAM,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,UAC3B,qBAAC,OAAD;IAAiB,WAAU;IAA3B,UAAA,CACI,oBAAC,QAAD;KAAM,WAAU;KACZ,UAAA,oBAAC,eAAe,OAAhB,EAAsB,cAAa,SAAU,CAAA;IAC3C,CAAA,GACN,oBAAC,eAAe,OAAhB,EAAsB,OAAM,OAAQ,CAAA,CACnC;GALK,GAAA,KAKL,CACR;EACA,CAAA;CACO,CAAA;CAGxB,OACI,oBAAC,OAAD;EACI,KAAK;EACL,MAAK;EACL,cAAY;EACZ,WAAW;EACX,YAAY,UAAU;GAClB,IAAI,UAAU,KAAA,GACV,iBACI,OACA,MAAM,KAAK,SAAS,KAAK,KAAK,GAC9B,OACA,QACJ;EACR;EAEC,UAAA,MAAM,KAAK,SAAS;GACjB,MAAM,WAAW,KAAK,UAAU;GAEhC,OACI,qBAAC,UAAD;IAEI,MAAK;IACL,MAAK;IACL,iBAAe;IACf,UAAU,WAAW,IAAI;IACzB,cAAY,KAAK;IACjB,WAAU;IACV,eAAe,SAAS,KAAK,KAAK;IARtC,UAAA,CAUI,oBAAC,QAAD;KAAM,WAAU;KACX,UAAA,KAAK;IACJ,CAAA,GACN,qBAAC,OAAD;KAAO,OAAM;KAAO,WAAU;KAA9B,UAAA,CACI,oBAAC,MAAD;MAAM,IAAG;MAAO,SAAQ;MAAQ,UAAA;MAC3B,UAAA,KAAK;KACJ,CAAA,GACL,KAAK,UACF,oBAAC,MAAD;MAAM,IAAG;MAAO,SAAQ;MAAU,MAAK;MAAQ,UAAA;MAC1C,UAAA,KAAK;KACJ,CAAA,IACN,IACD;IACH,CAAA,CAAA;GAtBC,GAAA,KAAK,KAsBN;EAEhB,CAAC;CACA,CAAA;AAEb"}

package/dist/navigation/Breadcrumbs.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+interface BreadcrumbsProps {
+  label: string;
+  items: readonly {
+    href: string;
+    label: ReactNode;
+  }[];
+  current?: ReactNode;
+  onNavigate: (href: string) => void;
+}
+export declare function Breadcrumbs({ label, items, current, onNavigate }: BreadcrumbsProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Breadcrumbs.d.ts.map

package/dist/navigation/Breadcrumbs.js

@@ -0,0 +1,32 @@
+import { Link } from "../typography/Link.js";
+import { Text } from "../typography/Typography.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/navigation/Breadcrumbs.tsx
+function Breadcrumbs({ label, items, current, onNavigate }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": label,
+		className: "min-w-0 overflow-x-auto",
+		children: /* @__PURE__ */ jsxs("ol", {
+			className: "flex w-max min-w-full items-center gap-2 whitespace-nowrap",
+			children: [items.map((item) => /* @__PURE__ */ jsxs("li", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Link, {
+					href: item.href,
+					onNavigate,
+					children: item.label
+				}), /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					"aria-hidden": "true",
+					tone: "muted",
+					children: "/"
+				})]
+			}, item.href)), current ? /* @__PURE__ */ jsx("li", {
+				"aria-current": "page",
+				children: current
+			}) : null]
+		})
+	});
+}
+export { Breadcrumbs };
+
+//# sourceMappingURL=Breadcrumbs.js.map

package/dist/navigation/Breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.js","names":[],"sources":["../../src/navigation/Breadcrumbs.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Link } from '../typography/Link';\nimport { Text } from '../typography/Typography';\n\ninterface BreadcrumbsProps {\n    label: string;\n    items: readonly { href: string; label: ReactNode }[];\n    current?: ReactNode;\n    onNavigate: (href: string) => void;\n}\n\nexport function Breadcrumbs({ label, items, current, onNavigate }: BreadcrumbsProps) {\n    return (\n        <nav aria-label={label} className=\"min-w-0 overflow-x-auto\">\n            <ol className=\"flex w-max min-w-full items-center gap-2 whitespace-nowrap\">\n                {items.map((item) => (\n                    <li key={item.href} className=\"flex items-center gap-2\">\n                        <Link href={item.href} onNavigate={onNavigate}>\n                            {item.label}\n                        </Link>\n                        <Text as=\"span\" aria-hidden=\"true\" tone=\"muted\">\n                            /\n                        </Text>\n                    </li>\n                ))}\n                {current ? <li aria-current=\"page\">{current}</li> : null}\n            </ol>\n        </nav>\n    );\n}\n"],"mappings":";;;;AAYA,SAAgB,YAAY,EAAE,OAAO,OAAO,SAAS,cAAgC;CACjF,OACI,oBAAC,OAAD;EAAK,cAAY;EAAO,WAAU;EAC9B,UAAA,qBAAC,MAAD;GAAI,WAAU;GAAd,UAAA,CACK,MAAM,KAAK,SACR,qBAAC,MAAD;IAAoB,WAAU;IAA9B,UAAA,CACI,oBAAC,MAAD;KAAM,MAAM,KAAK;KAAkB;KAC9B,UAAA,KAAK;IACJ,CAAA,GACN,oBAAC,MAAD;KAAM,IAAG;KAAO,eAAY;KAAO,MAAK;KAAQ,UAAA;IAE1C,CAAA,CACN;GAPK,GAAA,KAAK,IAOV,CACP,GACA,UAAU,oBAAC,MAAD;IAAI,gBAAa;IAAQ,UAAA;GAAY,CAAA,IAAI,IACpD;;CACH,CAAA;AAEb"}

package/dist/navigation/CollectionBrowseSelector.d.ts

@@ -0,0 +1,22 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+interface CollectionBrowseSelectorProps extends Pick<ComponentPropsWithoutRef<'button'>, 'aria-label'> {
+  children: ReactNode;
+  label: string;
+  icon?: ReactNode;
+  active?: boolean;
+}
+interface CollectionBrowseTriggerProps extends Omit<ComponentPropsWithoutRef<'button'>, 'children' | 'className'> {
+  label: string;
+  icon?: ReactNode;
+  active?: boolean;
+}
+export declare const CollectionBrowseTrigger: import("react").ForwardRefExoticComponent<CollectionBrowseTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function CollectionBrowseSelector({ children, ...trigger }: CollectionBrowseSelectorProps): import("react").JSX.Element;
+export declare function CollectionBrowseControls({ children, count, countLabel, filters }: {
+  children: ReactNode;
+  count: ReactNode;
+  countLabel: string;
+  filters?: ReactNode;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=CollectionBrowseSelector.d.ts.map