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

package/dist/navigation/CollectionBrowseSelector.js

@@ -0,0 +1,70 @@
+import { Button } from "../actions/Button.js";
+import { Badge } from "../display/Badge.js";
+import { DropdownMenu } from "../overlays/DropdownMenu.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "lucide-react";
+// src/navigation/CollectionBrowseSelector.tsx
+const CollectionBrowseTrigger = forwardRef(({ label, icon, active = false, ...props }, ref) => /* @__PURE__ */ jsxs(Button, {
+	ref,
+	...props,
+	"aria-label": props["aria-label"] ?? label,
+	title: label,
+	className: "data-[state=open]:bg-base-200 max-w-full min-w-0 gap-1.5 px-2 [&>svg]:size-3.5 [&>svg]:shrink-0",
+	selected: active,
+	variant: "quiet",
+	children: [
+		icon ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "size-4 shrink-0 [&>svg]:size-full",
+			children: icon
+		}) : null,
+		/* @__PURE__ */ jsx("span", {
+			className: icon ? "hidden truncate sm:block" : "truncate",
+			children: label
+		}),
+		icon ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "hidden size-3.5 shrink-0 sm:block [&>svg]:size-full",
+			children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+		}) : /* @__PURE__ */ jsx(ChevronDownIcon, {}),
+		active ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "bg-primary absolute top-1 right-1 size-1.5 rounded-full sm:hidden"
+		}) : null
+	]
+}));
+CollectionBrowseTrigger.displayName = "CollectionBrowseTrigger";
+function CollectionBrowseSelector({ children, ...trigger }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenu.Trigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(CollectionBrowseTrigger, { ...trigger })
+	}), /* @__PURE__ */ jsx(DropdownMenu.Content, {
+		align: "start",
+		children
+	})] });
+}
+function CollectionBrowseControls({ children, count, countLabel, filters }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-1 items-center justify-between gap-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-center gap-1",
+			children: [children, /* @__PURE__ */ jsx(Badge, {
+				"aria-label": countLabel,
+				tone: "neutral",
+				radius: "md",
+				className: "max-w-20 shrink-0 tabular-nums",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: count
+				})
+			})]
+		}), filters ? /* @__PURE__ */ jsx("div", {
+			className: "flex min-w-0 items-center gap-1 [&>button]:max-w-48",
+			children: filters
+		}) : null]
+	});
+}
+export { CollectionBrowseControls, CollectionBrowseSelector, CollectionBrowseTrigger };
+
+//# sourceMappingURL=CollectionBrowseSelector.js.map

package/dist/navigation/CollectionBrowseSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionBrowseSelector.js","names":[],"sources":["../../src/navigation/CollectionBrowseSelector.tsx"],"sourcesContent":["import { ChevronDownIcon } from 'lucide-react';\nimport { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from 'react';\n\nimport { Button } from '../actions/Button';\nimport { Badge } from '../display/Badge';\nimport { DropdownMenu } from '../overlays/DropdownMenu';\n\ninterface CollectionBrowseSelectorProps extends Pick<ComponentPropsWithoutRef<'button'>, 'aria-label'> {\n    children: ReactNode;\n    label: string;\n    icon?: ReactNode;\n    active?: boolean;\n}\n\ninterface CollectionBrowseTriggerProps extends Omit<ComponentPropsWithoutRef<'button'>, 'children' | 'className'> {\n    label: string;\n    icon?: ReactNode;\n    active?: boolean;\n}\n\nexport const CollectionBrowseTrigger = forwardRef<HTMLButtonElement, CollectionBrowseTriggerProps>(\n    ({ label, icon, active = false, ...props }, ref) => (\n        <Button\n            ref={ref}\n            {...props}\n            aria-label={props['aria-label'] ?? label}\n            title={label}\n            className=\"data-[state=open]:bg-base-200 max-w-full min-w-0 gap-1.5 px-2 [&>svg]:size-3.5 [&>svg]:shrink-0\"\n            selected={active}\n            variant=\"quiet\"\n        >\n            {icon ? (\n                <span aria-hidden=\"true\" className=\"size-4 shrink-0 [&>svg]:size-full\">\n                    {icon}\n                </span>\n            ) : null}\n            <span className={icon ? 'hidden truncate sm:block' : 'truncate'}>{label}</span>\n            {icon ? (\n                <span aria-hidden=\"true\" className=\"hidden size-3.5 shrink-0 sm:block [&>svg]:size-full\">\n                    <ChevronDownIcon />\n                </span>\n            ) : (\n                <ChevronDownIcon />\n            )}\n            {active ? (\n                <span\n                    aria-hidden=\"true\"\n                    className=\"bg-primary absolute top-1 right-1 size-1.5 rounded-full sm:hidden\"\n                />\n            ) : null}\n        </Button>\n    ),\n);\n\nCollectionBrowseTrigger.displayName = 'CollectionBrowseTrigger';\n\nexport function CollectionBrowseSelector({ children, ...trigger }: CollectionBrowseSelectorProps) {\n    return (\n        <DropdownMenu>\n            <DropdownMenu.Trigger asChild>\n                <CollectionBrowseTrigger {...trigger} />\n            </DropdownMenu.Trigger>\n            <DropdownMenu.Content align=\"start\">{children}</DropdownMenu.Content>\n        </DropdownMenu>\n    );\n}\n\nexport function CollectionBrowseControls({\n    children,\n    count,\n    countLabel,\n    filters,\n}: {\n    children: ReactNode;\n    count: ReactNode;\n    countLabel: string;\n    filters?: ReactNode;\n}) {\n    return (\n        <div className=\"flex min-w-0 flex-1 items-center justify-between gap-2\">\n            <div className=\"flex min-w-0 items-center gap-1\">\n                {children}\n                <Badge aria-label={countLabel} tone=\"neutral\" radius=\"md\" className=\"max-w-20 shrink-0 tabular-nums\">\n                    <span className=\"truncate\">{count}</span>\n                </Badge>\n            </div>\n            {filters ? <div className=\"flex min-w-0 items-center gap-1 [&>button]:max-w-48\">{filters}</div> : null}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;AAoBA,MAAa,0BAA0B,YAClC,EAAE,OAAO,MAAM,SAAS,OAAO,GAAG,SAAS,QACxC,qBAAC,QAAD;CACS;CACL,GAAI;CACJ,cAAY,MAAM,iBAAiB;CACnC,OAAO;CACP,WAAU;CACV,UAAU;CACV,SAAQ;CAPZ,UAAA;EASK,OACG,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GAC9B,UAAA;EACC,CAAA,IACN;EACJ,oBAAC,QAAD;GAAM,WAAW,OAAO,6BAA6B;GAAa,UAAA;EAAY,CAAA;EAC7E,OACG,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GAC/B,UAAA,oBAAC,iBAAD,CAAkB,CAAA;EAChB,CAAA,IAEN,oBAAC,iBAAD,CAAkB,CAAA;EAErB,SACG,oBAAC,QAAD;GACI,eAAY;GACZ,WAAU;EACb,CAAA,IACD;CACA;AAEhB,CAAA,CAAA;AAEA,wBAAwB,cAAc;AAEtC,SAAgB,yBAAyB,EAAE,UAAU,GAAG,WAA0C;CAC9F,OACI,qBAAC,cAAD,EAAA,UAAA,CACI,oBAAC,aAAa,SAAd;EAAsB,SAAA;EAClB,UAAA,oBAAC,yBAAD,EAAyB,GAAI,QAAU,CAAA;CACrB,CAAA,GACtB,oBAAC,aAAa,SAAd;EAAsB,OAAM;EAAS;CAA+B,CAAA,CAC1D,EAAA,CAAA;AAEtB;AAEA,SAAgB,yBAAyB,EACrC,UACA,OACA,YACA,WAMD;CACC,OACI,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACI,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACK,UACD,oBAAC,OAAD;IAAO,cAAY;IAAY,MAAK;IAAU,QAAO;IAAK,WAAU;IAChE,UAAA,oBAAC,QAAD;KAAM,WAAU;KAAY,UAAA;IAAY,CAAA;GACrC,CAAA,CACN;EACJ,CAAA,GAAA,UAAU,oBAAC,OAAD;GAAK,WAAU;GAAuD,UAAA;EAAa,CAAA,IAAI,IACjG;;AAEb"}

package/dist/navigation/CollectionViewToggle.d.ts

@@ -0,0 +1,12 @@
+export type CollectionView = 'grid' | 'table';
+interface CollectionViewToggleProps {
+  disabledViews?: readonly CollectionView[];
+  gridLabel: string;
+  label: string;
+  onChange: (view: CollectionView) => void;
+  tableLabel: string;
+  value: CollectionView;
+}
+export declare function CollectionViewToggle({ disabledViews, gridLabel, label, onChange, tableLabel, value }: CollectionViewToggleProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=CollectionViewToggle.d.ts.map

package/dist/navigation/CollectionViewToggle.js

@@ -0,0 +1,36 @@
+import { IconButton } from "../actions/IconButton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { LayoutGridIcon, TableIcon } from "lucide-react";
+// src/navigation/CollectionViewToggle.tsx
+function CollectionViewToggle({ disabledViews = [], gridLabel, label, onChange, tableLabel, value }) {
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": label,
+		className: "bg-base-200/70 flex gap-0.5 rounded-lg p-0.5",
+		children: [/* @__PURE__ */ jsx(IconButton, {
+			"aria-label": gridLabel,
+			"aria-pressed": value === "grid",
+			disabled: disabledViews.includes("grid"),
+			icon: /* @__PURE__ */ jsx(LayoutGridIcon, {}),
+			title: gridLabel,
+			className: buttonClasses(value === "grid"),
+			onClick: () => onChange("grid"),
+			tone: "neutral"
+		}), /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": tableLabel,
+			"aria-pressed": value === "table",
+			disabled: disabledViews.includes("table"),
+			icon: /* @__PURE__ */ jsx(TableIcon, {}),
+			title: tableLabel,
+			className: buttonClasses(value === "table"),
+			onClick: () => onChange("table"),
+			tone: "neutral"
+		})]
+	});
+}
+function buttonClasses(active) {
+	return `size-8 p-0 ${active ? "bg-base-100 text-base-content shadow-sm" : "text-base-600"}`;
+}
+export { CollectionViewToggle };
+
+//# sourceMappingURL=CollectionViewToggle.js.map

package/dist/navigation/CollectionViewToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionViewToggle.js","names":[],"sources":["../../src/navigation/CollectionViewToggle.tsx"],"sourcesContent":["import { LayoutGridIcon, TableIcon } from 'lucide-react';\n\nimport { IconButton } from '../actions/IconButton';\n\nexport type CollectionView = 'grid' | 'table';\n\ninterface CollectionViewToggleProps {\n    disabledViews?: readonly CollectionView[];\n    gridLabel: string;\n    label: string;\n    onChange: (view: CollectionView) => void;\n    tableLabel: string;\n    value: CollectionView;\n}\n\nexport function CollectionViewToggle({\n    disabledViews = [],\n    gridLabel,\n    label,\n    onChange,\n    tableLabel,\n    value,\n}: CollectionViewToggleProps) {\n    return (\n        <div role=\"group\" aria-label={label} className=\"bg-base-200/70 flex gap-0.5 rounded-lg p-0.5\">\n            <IconButton\n                aria-label={gridLabel}\n                aria-pressed={value === 'grid'}\n                disabled={disabledViews.includes('grid')}\n                icon={<LayoutGridIcon />}\n                title={gridLabel}\n                className={buttonClasses(value === 'grid')}\n                onClick={() => onChange('grid')}\n                tone=\"neutral\"\n            />\n            <IconButton\n                aria-label={tableLabel}\n                aria-pressed={value === 'table'}\n                disabled={disabledViews.includes('table')}\n                icon={<TableIcon />}\n                title={tableLabel}\n                className={buttonClasses(value === 'table')}\n                onClick={() => onChange('table')}\n                tone=\"neutral\"\n            />\n        </div>\n    );\n}\n\nfunction buttonClasses(active: boolean): string {\n    return `size-8 p-0 ${active ? 'bg-base-100 text-base-content shadow-sm' : 'text-base-600'}`;\n}\n"],"mappings":";;;;AAeA,SAAgB,qBAAqB,EACjC,gBAAgB,CAAC,GACjB,WACA,OACA,UACA,YACA,SAC0B;CAC1B,OACI,qBAAC,OAAD;EAAK,MAAK;EAAQ,cAAY;EAAO,WAAU;EAA/C,UAAA,CACI,oBAAC,YAAD;GACI,cAAY;GACZ,gBAAc,UAAU;GACxB,UAAU,cAAc,SAAS,MAAM;GACvC,MAAM,oBAAC,gBAAD,CAAiB,CAAA;GACvB,OAAO;GACP,WAAW,cAAc,UAAU,MAAM;GACzC,eAAe,SAAS,MAAM;GAC9B,MAAK;EACR,CAAA,GACD,oBAAC,YAAD;GACI,cAAY;GACZ,gBAAc,UAAU;GACxB,UAAU,cAAc,SAAS,OAAO;GACxC,MAAM,oBAAC,WAAD,CAAY,CAAA;GAClB,OAAO;GACP,WAAW,cAAc,UAAU,OAAO;GAC1C,eAAe,SAAS,OAAO;GAC/B,MAAK;EACR,CAAA,CACA;;AAEb;AAEA,SAAS,cAAc,QAAyB;CAC5C,OAAO,cAAc,SAAS,4CAA4C;AAC9E"}

package/dist/navigation/DrilldownBrowseSelector.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+export interface DrilldownBrowseItem {
+  id: string;
+  label: string;
+}
+export interface DrilldownBrowseGroup {
+  id: string;
+  label: string;
+  items: readonly DrilldownBrowseItem[];
+  loading: boolean;
+  loadingLabel: string;
+  noResultsLabel: string;
+  /** Clears this group alone, leaving the groups it combines with. */
+  allLabel: string;
+  /** Long lists are searchable; short ones list every item at once. */
+  searchLabel?: string;
+  selectedId?: string;
+  onChange: (itemId: string | undefined) => void;
+}
+interface DrilldownBrowseSelectorProps {
+  icon?: ReactNode;
+  allLabel: string;
+  backLabel: string;
+  disabledOptionLabel?: string;
+  groups: readonly DrilldownBrowseGroup[];
+  label: string;
+  onClear: () => void;
+}
+export declare function DrilldownBrowseSelector({ icon, allLabel, backLabel, disabledOptionLabel, groups, label, onClear }: DrilldownBrowseSelectorProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=DrilldownBrowseSelector.d.ts.map

package/dist/navigation/DrilldownBrowseSelector.js

@@ -0,0 +1,174 @@
+import { Input } from "../forms/Input.js";
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { ScrollArea } from "../layout/ScrollArea.js";
+import { Popover } from "../overlays/Popover.js";
+import { CollectionBrowseTrigger } from "./CollectionBrowseSelector.js";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, SearchIcon } from "lucide-react";
+// src/navigation/DrilldownBrowseSelector.tsx
+function DrilldownBrowseSelector({ icon, allLabel, backLabel, disabledOptionLabel, groups, label, onClear }) {
+	const [open, setOpen] = useState(false);
+	const [groupId, setGroupId] = useState(null);
+	const [query, setQuery] = useState("");
+	const group = groups.find(({ id }) => id === groupId);
+	const normalizedQuery = normalizeSearch(query);
+	const filteredItems = useMemo(() => group?.items.filter((item) => normalizeSearch(item.label).includes(normalizedQuery)) ?? [], [group, normalizedQuery]);
+	const closeAndSelect = (select) => {
+		select();
+		setQuery("");
+		setGroupId(null);
+		setOpen(false);
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: (nextOpen) => {
+			setOpen(nextOpen);
+			if (!nextOpen) {
+				setQuery("");
+				setGroupId(null);
+			}
+		},
+		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(CollectionBrowseTrigger, {
+				label,
+				icon,
+				active: groups.some(({ selectedId }) => Boolean(selectedId))
+			})
+		}), /* @__PURE__ */ jsx(Popover.Content, {
+			align: "start",
+			presentation: "menu",
+			sideOffset: 8,
+			width: "sm",
+			children: !group ? /* @__PURE__ */ jsxs("div", {
+				role: "menu",
+				"aria-label": label,
+				children: [
+					/* @__PURE__ */ jsx(MenuOption, {
+						label: allLabel,
+						selected: groups.every(({ selectedId }) => !selectedId),
+						onSelect: () => closeAndSelect(onClear)
+					}),
+					disabledOptionLabel ? /* @__PURE__ */ jsx(MenuOption, {
+						disabled: true,
+						label: disabledOptionLabel,
+						selected: false
+					}) : null,
+					groups.map(({ id, items, label: groupLabel, selectedId }) => /* @__PURE__ */ jsxs("button", {
+						...tabbable,
+						className: "hover:bg-base-200 focus-visible:outline-primary flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-sm transition-colors focus-visible:outline-2",
+						role: "menuitem",
+						type: "button",
+						onClick: () => setGroupId(id),
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 flex-1 truncate",
+								children: groupLabel
+							}),
+							" ",
+							selectedId ? /* @__PURE__ */ jsx("span", {
+								className: "text-base-600 max-w-1/2 min-w-0 truncate",
+								children: items.find((item) => item.id === selectedId)?.label
+							}) : null,
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "size-4 shrink-0 -rotate-90 [&>svg]:size-full",
+								children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+							})
+						]
+					}, id))
+				]
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "space-y-2",
+				children: [
+					/* @__PURE__ */ jsxs("button", {
+						...tabbable,
+						className: "hover:bg-base-200 focus-visible:outline-primary flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-sm transition-colors focus-visible:outline-2",
+						type: "button",
+						onClick: () => {
+							setQuery("");
+							setGroupId(null);
+						},
+						children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "size-4 shrink-0 rotate-90 [&>svg]:size-full",
+							children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+						}), backLabel]
+					}),
+					/* @__PURE__ */ jsx("div", { className: "bg-base-200 h-px" }),
+					group.searchLabel ? /* @__PURE__ */ jsxs("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-base-500 pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 [&>svg]:size-full",
+							children: /* @__PURE__ */ jsx(SearchIcon, {})
+						}), /* @__PURE__ */ jsx(Input, {
+							autoFocus: true,
+							"aria-label": group.searchLabel,
+							className: "pl-8",
+							placeholder: group.searchLabel,
+							size: "sm",
+							type: "search",
+							value: query,
+							onChange: (event) => setQuery(event.target.value)
+						})]
+					}) : null,
+					/* @__PURE__ */ jsxs(ScrollArea, {
+						role: "listbox",
+						"aria-label": group.label,
+						children: [
+							!normalizedQuery ? /* @__PURE__ */ jsx(ListOption, {
+								label: group.allLabel,
+								selected: !group.selectedId,
+								onSelect: () => closeAndSelect(() => group.onChange(void 0))
+							}) : null,
+							group.loading ? /* @__PURE__ */ jsx("p", {
+								className: "text-base-600 px-2 py-3 text-sm",
+								children: group.loadingLabel
+							}) : null,
+							!group.loading && filteredItems.length === 0 ? /* @__PURE__ */ jsx("p", {
+								className: "text-base-600 px-2 py-3 text-sm",
+								children: group.noResultsLabel
+							}) : null,
+							filteredItems.map((item) => /* @__PURE__ */ jsx(ListOption, {
+								label: item.label,
+								selected: item.id === group.selectedId,
+								onSelect: () => closeAndSelect(() => group.onChange(item.id))
+							}, item.id))
+						]
+					})
+				]
+			})
+		})]
+	});
+}
+function MenuOption({ disabled = false, label, onSelect, selected }) {
+	return /* @__PURE__ */ jsx("button", {
+		...tabbable,
+		"aria-checked": selected,
+		"aria-disabled": disabled || void 0,
+		className: `hover:bg-base-200 focus-visible:outline-primary flex h-8 w-full items-center rounded-md px-2 text-left text-sm transition-colors focus-visible:outline-2 ${selected ? "bg-base-200 font-medium" : ""} ${disabled ? "pointer-events-none opacity-50" : ""}`,
+		disabled,
+		role: "menuitemradio",
+		type: "button",
+		onClick: onSelect,
+		children: label
+	});
+}
+function ListOption({ label, onSelect, selected }) {
+	return /* @__PURE__ */ jsx("button", {
+		...tabbable,
+		"aria-selected": selected,
+		className: `hover:bg-base-200 focus-visible:outline-primary flex h-8 w-full items-center rounded-md px-2 text-left text-sm transition-colors focus-visible:outline-2 ${selected ? "bg-base-200 font-medium" : ""}`,
+		role: "option",
+		type: "button",
+		onClick: onSelect,
+		children: label
+	});
+}
+function normalizeSearch(value) {
+	return value.normalize("NFKD").replace(/\p{M}/gu, "").toLocaleLowerCase().trim();
+}
+export { DrilldownBrowseSelector };
+
+//# sourceMappingURL=DrilldownBrowseSelector.js.map

package/dist/navigation/DrilldownBrowseSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrilldownBrowseSelector.js","names":[],"sources":["../../src/navigation/DrilldownBrowseSelector.tsx"],"sourcesContent":["import { ChevronDownIcon, SearchIcon } from 'lucide-react';\nimport { type ReactNode, useMemo, useState } from 'react';\n\nimport { Input } from '../forms/Input';\nimport { tabbable } from '../foundations/KeyboardFocus';\nimport { ScrollArea } from '../layout/ScrollArea';\nimport { Popover } from '../overlays/Popover';\nimport { CollectionBrowseTrigger } from './CollectionBrowseSelector';\n\nexport interface DrilldownBrowseItem {\n    id: string;\n    label: string;\n}\n\nexport interface DrilldownBrowseGroup {\n    id: string;\n    label: string;\n    items: readonly DrilldownBrowseItem[];\n    loading: boolean;\n    loadingLabel: string;\n    noResultsLabel: string;\n    /** Clears this group alone, leaving the groups it combines with. */\n    allLabel: string;\n    /** Long lists are searchable; short ones list every item at once. */\n    searchLabel?: string;\n    selectedId?: string;\n    onChange: (itemId: string | undefined) => void;\n}\n\ninterface DrilldownBrowseSelectorProps {\n    icon?: ReactNode;\n    allLabel: string;\n    backLabel: string;\n    disabledOptionLabel?: string;\n    groups: readonly DrilldownBrowseGroup[];\n    label: string;\n    onClear: () => void;\n}\n\nexport function DrilldownBrowseSelector({\n    icon,\n    allLabel,\n    backLabel,\n    disabledOptionLabel,\n    groups,\n    label,\n    onClear,\n}: DrilldownBrowseSelectorProps) {\n    const [open, setOpen] = useState(false);\n    const [groupId, setGroupId] = useState<string | null>(null);\n    const [query, setQuery] = useState('');\n    const group = groups.find(({ id }) => id === groupId);\n    const normalizedQuery = normalizeSearch(query);\n    const filteredItems = useMemo(\n        () => group?.items.filter((item) => normalizeSearch(item.label).includes(normalizedQuery)) ?? [],\n        [group, normalizedQuery],\n    );\n\n    const closeAndSelect = (select: () => void) => {\n        select();\n        setQuery('');\n        setGroupId(null);\n        setOpen(false);\n    };\n\n    return (\n        <Popover\n            open={open}\n            onOpenChange={(nextOpen) => {\n                setOpen(nextOpen);\n\n                if (!nextOpen) {\n                    setQuery('');\n                    setGroupId(null);\n                }\n            }}\n        >\n            <Popover.Trigger asChild>\n                <CollectionBrowseTrigger\n                    label={label}\n                    icon={icon}\n                    active={groups.some(({ selectedId }) => Boolean(selectedId))}\n                />\n            </Popover.Trigger>\n            <Popover.Content align=\"start\" presentation=\"menu\" sideOffset={8} width=\"sm\">\n                {!group ? (\n                    <div role=\"menu\" aria-label={label}>\n                        <MenuOption\n                            label={allLabel}\n                            selected={groups.every(({ selectedId }) => !selectedId)}\n                            onSelect={() => closeAndSelect(onClear)}\n                        />\n                        {disabledOptionLabel ? (\n                            <MenuOption disabled label={disabledOptionLabel} selected={false} />\n                        ) : null}\n                        {groups.map(({ id, items, label: groupLabel, selectedId }) => (\n                            <button\n                                key={id}\n                                {...tabbable}\n                                className=\"hover:bg-base-200 focus-visible:outline-primary flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-sm transition-colors focus-visible:outline-2\"\n                                role=\"menuitem\"\n                                type=\"button\"\n                                onClick={() => setGroupId(id)}\n                            >\n                                <span className=\"min-w-0 flex-1 truncate\">{groupLabel}</span>{' '}\n                                {selectedId ? (\n                                    <span className=\"text-base-600 max-w-1/2 min-w-0 truncate\">\n                                        {items.find((item) => item.id === selectedId)?.label}\n                                    </span>\n                                ) : null}\n                                <span aria-hidden=\"true\" className=\"size-4 shrink-0 -rotate-90 [&>svg]:size-full\">\n                                    <ChevronDownIcon />\n                                </span>\n                            </button>\n                        ))}\n                    </div>\n                ) : (\n                    <div className=\"space-y-2\">\n                        <button\n                            {...tabbable}\n                            className=\"hover:bg-base-200 focus-visible:outline-primary flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-sm transition-colors focus-visible:outline-2\"\n                            type=\"button\"\n                            onClick={() => {\n                                setQuery('');\n                                setGroupId(null);\n                            }}\n                        >\n                            <span aria-hidden=\"true\" className=\"size-4 shrink-0 rotate-90 [&>svg]:size-full\">\n                                <ChevronDownIcon />\n                            </span>\n                            {backLabel}\n                        </button>\n                        <div className=\"bg-base-200 h-px\" />\n                        {group.searchLabel ? (\n                            <div className=\"relative\">\n                                <span className=\"text-base-500 pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 [&>svg]:size-full\">\n                                    <SearchIcon />\n                                </span>\n                                <Input\n                                    autoFocus\n                                    aria-label={group.searchLabel}\n                                    className=\"pl-8\"\n                                    placeholder={group.searchLabel}\n                                    size=\"sm\"\n                                    type=\"search\"\n                                    value={query}\n                                    onChange={(event) => setQuery(event.target.value)}\n                                />\n                            </div>\n                        ) : null}\n                        <ScrollArea role=\"listbox\" aria-label={group.label}>\n                            {!normalizedQuery ? (\n                                <ListOption\n                                    label={group.allLabel}\n                                    selected={!group.selectedId}\n                                    onSelect={() => closeAndSelect(() => group.onChange(undefined))}\n                                />\n                            ) : null}\n                            {group.loading ? (\n                                <p className=\"text-base-600 px-2 py-3 text-sm\">{group.loadingLabel}</p>\n                            ) : null}\n                            {!group.loading && filteredItems.length === 0 ? (\n                                <p className=\"text-base-600 px-2 py-3 text-sm\">{group.noResultsLabel}</p>\n                            ) : null}\n                            {filteredItems.map((item) => (\n                                <ListOption\n                                    key={item.id}\n                                    label={item.label}\n                                    selected={item.id === group.selectedId}\n                                    onSelect={() => closeAndSelect(() => group.onChange(item.id))}\n                                />\n                            ))}\n                        </ScrollArea>\n                    </div>\n                )}\n            </Popover.Content>\n        </Popover>\n    );\n}\n\nfunction MenuOption({\n    disabled = false,\n    label,\n    onSelect,\n    selected,\n}: {\n    disabled?: boolean;\n    label: string;\n    onSelect?: () => void;\n    selected: boolean;\n}) {\n    return (\n        <button\n            {...tabbable}\n            aria-checked={selected}\n            aria-disabled={disabled || undefined}\n            className={`hover:bg-base-200 focus-visible:outline-primary flex h-8 w-full items-center rounded-md px-2 text-left text-sm transition-colors focus-visible:outline-2 ${\n                selected ? 'bg-base-200 font-medium' : ''\n            } ${disabled ? 'pointer-events-none opacity-50' : ''}`}\n            disabled={disabled}\n            role=\"menuitemradio\"\n            type=\"button\"\n            onClick={onSelect}\n        >\n            {label}\n        </button>\n    );\n}\n\nfunction ListOption({ label, onSelect, selected }: { label: string; onSelect: () => void; selected: boolean }) {\n    return (\n        <button\n            {...tabbable}\n            aria-selected={selected}\n            className={`hover:bg-base-200 focus-visible:outline-primary flex h-8 w-full items-center rounded-md px-2 text-left text-sm transition-colors focus-visible:outline-2 ${\n                selected ? 'bg-base-200 font-medium' : ''\n            }`}\n            role=\"option\"\n            type=\"button\"\n            onClick={onSelect}\n        >\n            {label}\n        </button>\n    );\n}\n\nfunction normalizeSearch(value: string): string {\n    return value.normalize('NFKD').replace(/\\p{M}/gu, '').toLocaleLowerCase().trim();\n}\n"],"mappings":"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"}

package/dist/navigation/FolderSelector.d.ts

@@ -0,0 +1,24 @@
+import { ComponentPropsWithoutRef } from "react";
+export interface FolderSelectorOption {
+  name: string;
+  path: string;
+}
+export interface FolderSelectorProps extends Pick<ComponentPropsWithoutRef<'button'>, 'id' | 'title' | 'aria-describedby' | 'aria-invalid' | 'aria-required'> {
+  browsePath: string;
+  disabled?: boolean;
+  error?: string;
+  hasMore?: boolean;
+  loading?: boolean;
+  loadingMore?: boolean;
+  onBrowsePathChange: (path: string) => void;
+  onChange: (path: string) => void;
+  onLoadMore: () => void;
+  onOpenChange: (open: boolean) => void;
+  onRetry: () => void;
+  open: boolean;
+  options: readonly FolderSelectorOption[];
+  parentPath?: string | null;
+  value: string;
+}
+export declare function FolderSelector({ id, title, 'aria-describedby': describedBy, 'aria-invalid': invalid, 'aria-required': required, browsePath, disabled, error, hasMore, loading, loadingMore, onBrowsePathChange, onChange, onLoadMore, onOpenChange, onRetry, open, options, parentPath, value }: FolderSelectorProps): import("react").JSX.Element;
+//# sourceMappingURL=FolderSelector.d.ts.map

package/dist/navigation/FolderSelector.js

@@ -0,0 +1,142 @@
+import { Button } from "../actions/Button.js";
+import { IconButton } from "../actions/IconButton.js";
+import { formControlClasses } from "../forms/FormControlStyles.js";
+import { useDesignSystemLabels } from "../foundations/DesignSystemProvider.js";
+import { Inline, Stack } from "../layout/Flow.js";
+import { ScrollArea } from "../layout/ScrollArea.js";
+import { Popover } from "../overlays/Popover.js";
+import { Text } from "../typography/Typography.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, FolderIcon, FolderUpIcon, HouseIcon } from "lucide-react";
+import { Alert, Loading } from "@ninna-ui/feedback";
+// src/navigation/FolderSelector.tsx
+function FolderSelector({ id, title, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-required": required, browsePath, disabled, error, hasMore, loading, loadingMore, onBrowsePathChange, onChange, onLoadMore, onOpenChange, onRetry, open, options, parentPath, value }) {
+	const labels = useDesignSystemLabels();
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange,
+		modal: true,
+		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				id,
+				title,
+				"aria-describedby": describedBy,
+				"aria-invalid": invalid,
+				"aria-required": required,
+				"aria-label": value ? labels.folders.selectedPath(value) : labels.folders.path,
+				className: `${formControlClasses} hover:bg-base-200 justify-between font-normal [&>span>svg]:size-4`,
+				disabled,
+				fullWidth: true,
+				leftIcon: /* @__PURE__ */ jsx(FolderIcon, {}),
+				rightIcon: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
+				type: "button",
+				variant: "quiet",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate text-left",
+					children: value || labels.folders.chooseFolder
+				})
+			})
+		}), /* @__PURE__ */ jsx(Popover.Content, {
+			side: "bottom",
+			align: "start",
+			sideOffset: 8,
+			width: "trigger",
+			layout: "fill",
+			children: /* @__PURE__ */ jsxs(Stack, {
+				className: "min-h-0",
+				space: "group",
+				children: [
+					/* @__PURE__ */ jsxs(Stack, {
+						space: "tight",
+						children: [/* @__PURE__ */ jsxs(Inline, {
+							align: "center",
+							justify: "between",
+							space: "related",
+							children: [/* @__PURE__ */ jsx(Text, {
+								className: "min-w-0 flex-1 truncate",
+								variant: "label",
+								children: labels.folders.title
+							}), /* @__PURE__ */ jsxs(Inline, {
+								space: "tight",
+								children: [/* @__PURE__ */ jsx(IconButton, {
+									type: "button",
+									"aria-label": labels.folders.root,
+									title: labels.folders.root,
+									disabled: browsePath === "/",
+									icon: /* @__PURE__ */ jsx(HouseIcon, {}),
+									onClick: () => onBrowsePathChange("/")
+								}), /* @__PURE__ */ jsx(IconButton, {
+									type: "button",
+									"aria-label": labels.folders.upOneLevel,
+									title: labels.folders.upOneLevel,
+									disabled: !parentPath,
+									icon: /* @__PURE__ */ jsx(FolderUpIcon, {}),
+									onClick: () => parentPath && onBrowsePathChange(parentPath)
+								})]
+							})]
+						}), /* @__PURE__ */ jsx(Text, {
+							variant: "caption",
+							tone: "muted",
+							children: browsePath
+						})]
+					}),
+					/* @__PURE__ */ jsxs(ScrollArea, { children: [
+						loading ? /* @__PURE__ */ jsx(Loading, { label: labels.folders.loading }) : null,
+						error ? /* @__PURE__ */ jsx(Alert, {
+							color: "danger",
+							title: labels.folders.loadFailed,
+							description: error,
+							showIcon: true,
+							action: /* @__PURE__ */ jsx(Button, {
+								onClick: onRetry,
+								variant: "primary",
+								children: labels.retry
+							})
+						}) : null,
+						!loading && !error ? /* @__PURE__ */ jsxs(Stack, {
+							space: "tight",
+							children: [
+								options.map((option) => /* @__PURE__ */ jsx(Button, {
+									"aria-label": labels.folders.open(option.name),
+									className: "justify-start",
+									fullWidth: true,
+									leftIcon: /* @__PURE__ */ jsx(FolderIcon, {}),
+									type: "button",
+									onClick: () => onBrowsePathChange(option.path),
+									variant: "quiet",
+									children: /* @__PURE__ */ jsx("span", {
+										className: "min-w-0 flex-1 truncate text-left",
+										children: option.name
+									})
+								}, option.path)),
+								options.length === 0 ? /* @__PURE__ */ jsx(Text, {
+									tone: "muted",
+									children: labels.folders.empty
+								}) : null,
+								hasMore ? /* @__PURE__ */ jsx(Button, {
+									type: "button",
+									loading: loadingMore,
+									onClick: onLoadMore,
+									variant: "quiet",
+									children: labels.folders.loadMore
+								}) : null
+							]
+						}) : null
+					] }),
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						fullWidth: true,
+						disabled: browsePath === "/" || Boolean(error),
+						onClick: () => onChange(browsePath),
+						variant: "primary",
+						children: labels.folders.chooseThis
+					})
+				]
+			})
+		})]
+	});
+}
+export { FolderSelector };
+
+//# sourceMappingURL=FolderSelector.js.map

package/dist/navigation/FolderSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FolderSelector.js","names":[],"sources":["../../src/navigation/FolderSelector.tsx"],"sourcesContent":["import { Alert, Loading } from '@ninna-ui/feedback';\nimport { ChevronDownIcon, FolderIcon, FolderUpIcon, HouseIcon } from 'lucide-react';\nimport type { ComponentPropsWithoutRef } from 'react';\n\nimport { Button } from '../actions/Button';\nimport { IconButton } from '../actions/IconButton';\nimport { formControlClasses } from '../forms/FormControlStyles';\nimport { useDesignSystemLabels } from '../foundations/DesignSystemProvider';\nimport { Inline, Stack } from '../layout/Flow';\nimport { ScrollArea } from '../layout/ScrollArea';\nimport { Popover } from '../overlays/Popover';\nimport { Text } from '../typography/Typography';\n\nexport interface FolderSelectorOption {\n    name: string;\n    path: string;\n}\n\nexport interface FolderSelectorProps extends Pick<\n    ComponentPropsWithoutRef<'button'>,\n    'id' | 'title' | 'aria-describedby' | 'aria-invalid' | 'aria-required'\n> {\n    browsePath: string;\n    disabled?: boolean;\n    error?: string;\n    hasMore?: boolean;\n    loading?: boolean;\n    loadingMore?: boolean;\n    onBrowsePathChange: (path: string) => void;\n    onChange: (path: string) => void;\n    onLoadMore: () => void;\n    onOpenChange: (open: boolean) => void;\n    onRetry: () => void;\n    open: boolean;\n    options: readonly FolderSelectorOption[];\n    parentPath?: string | null;\n    value: string;\n}\n\nexport function FolderSelector({\n    id,\n    title,\n    'aria-describedby': describedBy,\n    'aria-invalid': invalid,\n    'aria-required': required,\n    browsePath,\n    disabled,\n    error,\n    hasMore,\n    loading,\n    loadingMore,\n    onBrowsePathChange,\n    onChange,\n    onLoadMore,\n    onOpenChange,\n    onRetry,\n    open,\n    options,\n    parentPath,\n    value,\n}: FolderSelectorProps) {\n    const labels = useDesignSystemLabels();\n\n    return (\n        <Popover open={open} onOpenChange={onOpenChange} modal>\n            <Popover.Trigger asChild>\n                <Button\n                    id={id}\n                    title={title}\n                    aria-describedby={describedBy}\n                    aria-invalid={invalid}\n                    aria-required={required}\n                    aria-label={value ? labels.folders.selectedPath(value) : labels.folders.path}\n                    className={`${formControlClasses} hover:bg-base-200 justify-between font-normal [&>span>svg]:size-4`}\n                    disabled={disabled}\n                    fullWidth\n                    leftIcon={<FolderIcon />}\n                    rightIcon={<ChevronDownIcon />}\n                    type=\"button\"\n                    variant=\"quiet\"\n                >\n                    <span className=\"min-w-0 flex-1 truncate text-left\">{value || labels.folders.chooseFolder}</span>\n                </Button>\n            </Popover.Trigger>\n            <Popover.Content side=\"bottom\" align=\"start\" sideOffset={8} width=\"trigger\" layout=\"fill\">\n                <Stack className=\"min-h-0\" space=\"group\">\n                    <Stack space=\"tight\">\n                        <Inline align=\"center\" justify=\"between\" space=\"related\">\n                            <Text className=\"min-w-0 flex-1 truncate\" variant=\"label\">\n                                {labels.folders.title}\n                            </Text>\n                            <Inline space=\"tight\">\n                                <IconButton\n                                    type=\"button\"\n                                    aria-label={labels.folders.root}\n                                    title={labels.folders.root}\n                                    disabled={browsePath === '/'}\n                                    icon={<HouseIcon />}\n                                    onClick={() => onBrowsePathChange('/')}\n                                />\n                                <IconButton\n                                    type=\"button\"\n                                    aria-label={labels.folders.upOneLevel}\n                                    title={labels.folders.upOneLevel}\n                                    disabled={!parentPath}\n                                    icon={<FolderUpIcon />}\n                                    onClick={() => parentPath && onBrowsePathChange(parentPath)}\n                                />\n                            </Inline>\n                        </Inline>\n                        <Text variant=\"caption\" tone=\"muted\">\n                            {browsePath}\n                        </Text>\n                    </Stack>\n\n                    <ScrollArea>\n                        {loading ? <Loading label={labels.folders.loading} /> : null}\n\n                        {error ? (\n                            <Alert\n                                color=\"danger\"\n                                title={labels.folders.loadFailed}\n                                description={error}\n                                showIcon\n                                action={\n                                    <Button onClick={onRetry} variant=\"primary\">\n                                        {labels.retry}\n                                    </Button>\n                                }\n                            />\n                        ) : null}\n\n                        {!loading && !error ? (\n                            <Stack space=\"tight\">\n                                {options.map((option) => (\n                                    <Button\n                                        key={option.path}\n                                        aria-label={labels.folders.open(option.name)}\n                                        className=\"justify-start\"\n                                        fullWidth\n                                        leftIcon={<FolderIcon />}\n                                        type=\"button\"\n                                        onClick={() => onBrowsePathChange(option.path)}\n                                        variant=\"quiet\"\n                                    >\n                                        <span className=\"min-w-0 flex-1 truncate text-left\">{option.name}</span>\n                                    </Button>\n                                ))}\n                                {options.length === 0 ? <Text tone=\"muted\">{labels.folders.empty}</Text> : null}\n                                {hasMore ? (\n                                    <Button type=\"button\" loading={loadingMore} onClick={onLoadMore} variant=\"quiet\">\n                                        {labels.folders.loadMore}\n                                    </Button>\n                                ) : null}\n                            </Stack>\n                        ) : null}\n                    </ScrollArea>\n\n                    <Button\n                        type=\"button\"\n                        fullWidth\n                        disabled={browsePath === '/' || Boolean(error)}\n                        onClick={() => onChange(browsePath)}\n                        variant=\"primary\"\n                    >\n                        {labels.folders.chooseThis}\n                    </Button>\n                </Stack>\n            </Popover.Content>\n        </Popover>\n    );\n}\n"],"mappings":";;;;;;;;;;;;AAuCA,SAAgB,eAAe,EAC3B,IACA,OACA,oBAAoB,aACpB,gBAAgB,SAChB,iBAAiB,UACjB,YACA,UACA,OACA,SACA,SACA,aACA,oBACA,UACA,YACA,cACA,SACA,MACA,SACA,YACA,SACoB;CACpB,MAAM,SAAS,sBAAsB;CAErC,OACI,qBAAC,SAAD;EAAe;EAAoB;EAAc,OAAA;EAAjD,UAAA,CACI,oBAAC,QAAQ,SAAT;GAAiB,SAAA;GACb,UAAA,oBAAC,QAAD;IACQ;IACG;IACP,oBAAkB;IAClB,gBAAc;IACd,iBAAe;IACf,cAAY,QAAQ,OAAO,QAAQ,aAAa,KAAK,IAAI,OAAO,QAAQ;IACxE,WAAW,GAAG,mBAAmB;IACvB;IACV,WAAA;IACA,UAAU,oBAAC,YAAD,CAAa,CAAA;IACvB,WAAW,oBAAC,iBAAD,CAAkB,CAAA;IAC7B,MAAK;IACL,SAAQ;IAER,UAAA,oBAAC,QAAD;KAAM,WAAU;KAAqC,UAAA,SAAS,OAAO,QAAQ;IAAmB,CAAA;GAC5F,CAAA;EACK,CAAA,GACjB,oBAAC,QAAQ,SAAT;GAAiB,MAAK;GAAS,OAAM;GAAQ,YAAY;GAAG,OAAM;GAAU,QAAO;GAC/E,UAAA,qBAAC,OAAD;IAAO,WAAU;IAAU,OAAM;IAAjC,UAAA;KACI,qBAAC,OAAD;MAAO,OAAM;MAAb,UAAA,CACI,qBAAC,QAAD;OAAQ,OAAM;OAAS,SAAQ;OAAU,OAAM;OAA/C,UAAA,CACI,oBAAC,MAAD;QAAM,WAAU;QAA0B,SAAQ;QAC7C,UAAA,OAAO,QAAQ;OACd,CAAA,GACN,qBAAC,QAAD;QAAQ,OAAM;QAAd,UAAA,CACI,oBAAC,YAAD;SACI,MAAK;SACL,cAAY,OAAO,QAAQ;SAC3B,OAAO,OAAO,QAAQ;SACtB,UAAU,eAAe;SACzB,MAAM,oBAAC,WAAD,CAAY,CAAA;SAClB,eAAe,mBAAmB,GAAG;QACxC,CAAA,GACD,oBAAC,YAAD;SACI,MAAK;SACL,cAAY,OAAO,QAAQ;SAC3B,OAAO,OAAO,QAAQ;SACtB,UAAU,CAAC;SACX,MAAM,oBAAC,cAAD,CAAe,CAAA;SACrB,eAAe,cAAc,mBAAmB,UAAU;QAC7D,CAAA,CACG;OACJ,CAAA,CAAA;MACR,CAAA,GAAA,oBAAC,MAAD;OAAM,SAAQ;OAAU,MAAK;OACxB,UAAA;MACC,CAAA,CACH;;KAEP,qBAAC,YAAD,EAAA,UAAA;MACK,UAAU,oBAAC,SAAD,EAAS,OAAO,OAAO,QAAQ,QAAU,CAAA,IAAI;MAEvD,QACG,oBAAC,OAAD;OACI,OAAM;OACN,OAAO,OAAO,QAAQ;OACtB,aAAa;OACb,UAAA;OACA,QACI,oBAAC,QAAD;QAAQ,SAAS;QAAS,SAAQ;QAC7B,UAAA,OAAO;OACJ,CAAA;MAEf,CAAA,IACD;MAEH,CAAC,WAAW,CAAC,QACV,qBAAC,OAAD;OAAO,OAAM;OAAb,UAAA;QACK,QAAQ,KAAK,WACV,oBAAC,QAAD;SAEI,cAAY,OAAO,QAAQ,KAAK,OAAO,IAAI;SAC3C,WAAU;SACV,WAAA;SACA,UAAU,oBAAC,YAAD,CAAa,CAAA;SACvB,MAAK;SACL,eAAe,mBAAmB,OAAO,IAAI;SAC7C,SAAQ;SAER,UAAA,oBAAC,QAAD;UAAM,WAAU;UAAqC,UAAA,OAAO;SAAW,CAAA;QACnE,GAVC,OAAO,IAUR,CACX;QACA,QAAQ,WAAW,IAAI,oBAAC,MAAD;SAAM,MAAK;SAAS,UAAA,OAAO,QAAQ;QAAY,CAAA,IAAI;QAC1E,UACG,oBAAC,QAAD;SAAQ,MAAK;SAAS,SAAS;SAAa,SAAS;SAAY,SAAQ;SACpE,UAAA,OAAO,QAAQ;QACZ,CAAA,IACR;OACD;MACP,CAAA,IAAA;KACI,EAAA,CAAA;KAEZ,oBAAC,QAAD;MACI,MAAK;MACL,WAAA;MACA,UAAU,eAAe,OAAO,QAAQ,KAAK;MAC7C,eAAe,SAAS,UAAU;MAClC,SAAQ;MAEP,UAAA,OAAO,QAAQ;KACZ,CAAA;IACL;;EACM,CAAA,CACZ;;AAEjB"}

package/dist/navigation/TabKeys.js

@@ -0,0 +1,13 @@
+// src/navigation/TabKeys.ts
+/** Moves a tab row's selection and focus with the left and right arrow keys, wrapping at either end. */
+function moveTabSelection(event, values, value, onChange) {
+	const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+	if (step === 0 || values.length === 0) return;
+	event.preventDefault();
+	const next = values[(values.indexOf(value) + step + values.length) % values.length];
+	onChange(next);
+	event.currentTarget.querySelector(`[data-value="${next}"]`)?.focus();
+}
+export { moveTabSelection };
+
+//# sourceMappingURL=TabKeys.js.map

package/dist/navigation/TabKeys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabKeys.js","names":[],"sources":["../../src/navigation/TabKeys.ts"],"sourcesContent":["import type { KeyboardEvent } from 'react';\n\n/** Moves a tab row's selection and focus with the left and right arrow keys, wrapping at either end. */\nexport function moveTabSelection<T extends string>(\n    event: KeyboardEvent<HTMLElement>,\n    values: readonly T[],\n    value: T,\n    onChange: (value: T) => void,\n) {\n    const step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;\n\n    if (step === 0 || values.length === 0) return;\n\n    event.preventDefault();\n\n    const index = values.indexOf(value);\n    const next = values[(index + step + values.length) % values.length]!;\n\n    onChange(next);\n    event.currentTarget.querySelector<HTMLButtonElement>(`[data-value=\"${next}\"]`)?.focus();\n}\n"],"mappings":";;AAGA,SAAgB,iBACZ,OACA,QACA,OACA,UACF;CACE,MAAM,OAAO,MAAM,QAAQ,eAAe,IAAI,MAAM,QAAQ,cAAc,KAAK;CAE/E,IAAI,SAAS,KAAK,OAAO,WAAW,GAAG;CAEvC,MAAM,eAAe;CAGrB,MAAM,OAAO,QADC,OAAO,QAAQ,KACJ,IAAI,OAAO,OAAO,UAAU,OAAO;CAE5D,SAAS,IAAI;CACb,MAAM,cAAc,cAAiC,gBAAgB,KAAK,GAAG,CAAC,EAAE,MAAM;AAC1F"}

package/dist/navigation/ViewTabs.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+export interface ViewTabsItem<T extends string> {
+  value: T;
+  label: string;
+  /** Already formatted for the viewer's locale. */
+  count?: string;
+}
+interface ViewTabsProps<T extends string> {
+  items: readonly ViewTabsItem<T>[];
+  label: string;
+  onChange: (value: T) => void;
+  value: T;
+  /** A control that acts on the same list, such as its search, beside the tabs on wide screens. */
+  end?: ReactNode;
+}
+/** A row of tabs that switches which list the page shows, each with its count. */
+export declare function ViewTabs<T extends string>({ items, label, onChange, value, end }: ViewTabsProps<T>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ViewTabs.d.ts.map