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

package/dist/navigation/ViewTabs.js

@@ -0,0 +1,48 @@
+import { Text } from "../typography/Typography.js";
+import { moveTabSelection } from "./TabKeys.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/navigation/ViewTabs.tsx
+/** A row of tabs that switches which list the page shows, each with its count. */
+function ViewTabs({ items, label, onChange, value, end }) {
+	const tabs = /* @__PURE__ */ jsx("div", {
+		role: "tablist",
+		"aria-label": label,
+		className: "border-base-300 flex min-w-0 gap-1 overflow-x-auto border-b",
+		onKeyDown: (event) => 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: `focus-visible:outline-primary -mb-px flex shrink-0 items-center gap-2 border-b-2 px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-[-2px] ${selected ? "border-base-content text-base-content" : "text-base-700 hover:text-base-content border-transparent"}`,
+				onClick: () => onChange(item.value),
+				children: [
+					item.label,
+					item.count !== void 0 ? " " : null,
+					item.count !== void 0 ? /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						variant: "caption",
+						className: `rounded-full px-1.5 tabular-nums ${selected ? "bg-base-content/10 text-base-content" : "bg-base-200 text-base-700 dark:bg-base-300"}`,
+						children: item.count
+					}) : null
+				]
+			}, item.value);
+		})
+	});
+	return end ? /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "min-w-0",
+			children: tabs
+		}), /* @__PURE__ */ jsx("div", {
+			className: "sm:w-64 sm:pb-1",
+			children: end
+		})]
+	}) : tabs;
+}
+export { ViewTabs };
+
+//# sourceMappingURL=ViewTabs.js.map

package/dist/navigation/ViewTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewTabs.js","names":[],"sources":["../../src/navigation/ViewTabs.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Text } from '../typography/Typography';\nimport { moveTabSelection } from './TabKeys';\n\nexport interface ViewTabsItem<T extends string> {\n    value: T;\n    label: string;\n    /** Already formatted for the viewer's locale. */\n    count?: string;\n}\n\ninterface ViewTabsProps<T extends string> {\n    items: readonly ViewTabsItem<T>[];\n    label: string;\n    onChange: (value: T) => void;\n    value: T;\n    /** A control that acts on the same list, such as its search, beside the tabs on wide screens. */\n    end?: ReactNode;\n}\n\n/** A row of tabs that switches which list the page shows, each with its count. */\nexport function ViewTabs<T extends string>({ items, label, onChange, value, end }: ViewTabsProps<T>) {\n    const tabs = (\n        <div\n            role=\"tablist\"\n            aria-label={label}\n            className=\"border-base-300 flex min-w-0 gap-1 overflow-x-auto border-b\"\n            onKeyDown={(event) =>\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={`focus-visible:outline-primary -mb-px flex shrink-0 items-center gap-2 border-b-2 px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-[-2px] ${\n                            selected\n                                ? 'border-base-content text-base-content'\n                                : 'text-base-700 hover:text-base-content border-transparent'\n                        }`}\n                        onClick={() => onChange(item.value)}\n                    >\n                        {item.label}\n                        {item.count !== undefined ? ' ' : null}\n                        {item.count !== undefined ? (\n                            <Text\n                                as=\"span\"\n                                variant=\"caption\"\n                                className={`rounded-full px-1.5 tabular-nums ${\n                                    selected\n                                        ? 'bg-base-content/10 text-base-content'\n                                        : 'bg-base-200 text-base-700 dark:bg-base-300'\n                                }`}\n                            >\n                                {item.count}\n                            </Text>\n                        ) : null}\n                    </button>\n                );\n            })}\n        </div>\n    );\n\n    return end ? (\n        <div className=\"flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between\">\n            <div className=\"min-w-0\">{tabs}</div>\n            <div className=\"sm:w-64 sm:pb-1\">{end}</div>\n        </div>\n    ) : (\n        tabs\n    );\n}\n"],"mappings":";;;;;AAsBA,SAAgB,SAA2B,EAAE,OAAO,OAAO,UAAU,OAAO,OAAyB;CACjG,MAAM,OACF,oBAAC,OAAD;EACI,MAAK;EACL,cAAY;EACZ,WAAU;EACV,YAAY,UACR,iBACI,OACA,MAAM,KAAK,SAAS,KAAK,KAAK,GAC9B,OACA,QACJ;EAGH,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,WAAW,gMACP,WACM,0CACA;IAEV,eAAe,SAAS,KAAK,KAAK;IAZtC,UAAA;KAcK,KAAK;KACL,KAAK,UAAU,KAAA,IAAY,MAAM;KACjC,KAAK,UAAU,KAAA,IACZ,oBAAC,MAAD;MACI,IAAG;MACH,SAAQ;MACR,WAAW,oCACP,WACM,yCACA;MAGT,UAAA,KAAK;KACJ,CAAA,IACN;IACA;GA5BC,GAAA,KAAK,KA4BN;EAEhB,CAAC;CACA,CAAA;CAGT,OAAO,MACH,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACI,oBAAC,OAAD;GAAK,WAAU;GAAW,UAAA;EAAU,CAAA,GACpC,oBAAC,OAAD;GAAK,WAAU;GAAmB,UAAA;EAAS,CAAA,CAC1C;CAEL,CAAA,IAAA;AAER"}

package/dist/navigation/index.d.ts

@@ -0,0 +1,8 @@
+import { ArtworkTabs, ArtworkTabsItem } from "./ArtworkTabs.js";
+import { Breadcrumbs } from "./Breadcrumbs.js";
+import { CollectionBrowseControls, CollectionBrowseSelector, CollectionBrowseTrigger } from "./CollectionBrowseSelector.js";
+import { CollectionView, CollectionViewToggle } from "./CollectionViewToggle.js";
+import { DrilldownBrowseGroup, DrilldownBrowseItem, DrilldownBrowseSelector } from "./DrilldownBrowseSelector.js";
+import { FolderSelector, FolderSelectorOption, FolderSelectorProps } from "./FolderSelector.js";
+import { ViewTabs, ViewTabsItem } from "./ViewTabs.js";
+export { ArtworkTabs, type ArtworkTabsItem, Breadcrumbs, CollectionBrowseControls, CollectionBrowseSelector, CollectionBrowseTrigger, type CollectionView, CollectionViewToggle, type DrilldownBrowseGroup, type DrilldownBrowseItem, DrilldownBrowseSelector, FolderSelector, type FolderSelectorOption, type FolderSelectorProps, ViewTabs, type ViewTabsItem };

package/dist/overlays/ActionModal.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+interface ActionModalProps {
+  accessibleTitle?: string;
+  actionColor?: 'danger' | 'primary';
+  actionDisabled?: boolean;
+  actionLabel: string;
+  children: ReactNode;
+  bodyLayout?: 'scroll' | 'fill';
+  description: string;
+  footerLeading?: ReactNode;
+  headerActions?: ReactNode;
+  loading: boolean;
+  onAction: () => void;
+  onClose: () => void;
+  sidebar?: ReactNode;
+  noValidate?: boolean;
+  title: string;
+}
+export declare function ActionModal({ accessibleTitle, actionColor, actionDisabled, actionLabel, children, bodyLayout, description, footerLeading, headerActions, loading, onAction, onClose, sidebar, noValidate, title }: ActionModalProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ActionModal.d.ts.map

package/dist/overlays/ActionModal.js

@@ -0,0 +1,48 @@
+import { Button } from "../actions/Button.js";
+import { useDesignSystemLabels } from "../foundations/DesignSystemProvider.js";
+import { Modal } from "./Modal.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/overlays/ActionModal.tsx
+function ActionModal({ accessibleTitle, actionColor = "primary", actionDisabled = false, actionLabel, children, bodyLayout, description, footerLeading, headerActions, loading, onAction, onClose, sidebar, noValidate, title }) {
+	const labels = useDesignSystemLabels();
+	return /* @__PURE__ */ jsx(Modal, {
+		loading,
+		onClose,
+		children: /* @__PURE__ */ jsx(Modal.Content, {
+			title,
+			accessibleTitle,
+			description,
+			sidebar,
+			headerActions,
+			children: /* @__PURE__ */ jsxs(Modal.Form, {
+				noValidate,
+				onSubmit: (event) => {
+					event.preventDefault();
+					if (!loading && !actionDisabled) onAction();
+				},
+				children: [/* @__PURE__ */ jsx(Modal.Body, {
+					layout: bodyLayout,
+					children
+				}), /* @__PURE__ */ jsxs(Modal.Footer, {
+					leading: footerLeading,
+					children: [/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						disabled: loading,
+						onClick: onClose,
+						variant: "secondary",
+						children: labels.cancel
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						loading,
+						disabled: loading || actionDisabled,
+						variant: actionColor === "danger" ? "destructive" : "primary",
+						children: actionLabel
+					})]
+				})]
+			})
+		})
+	});
+}
+export { ActionModal };
+
+//# sourceMappingURL=ActionModal.js.map

package/dist/overlays/ActionModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionModal.js","names":[],"sources":["../../src/overlays/ActionModal.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Button } from '../actions/Button';\nimport { useDesignSystemLabels } from '../foundations/DesignSystemProvider';\nimport { Modal } from './Modal';\n\ninterface ActionModalProps {\n    accessibleTitle?: string;\n    actionColor?: 'danger' | 'primary';\n    actionDisabled?: boolean;\n    actionLabel: string;\n    children: ReactNode;\n    bodyLayout?: 'scroll' | 'fill';\n    description: string;\n    footerLeading?: ReactNode;\n    headerActions?: ReactNode;\n    loading: boolean;\n    onAction: () => void;\n    onClose: () => void;\n    sidebar?: ReactNode;\n    noValidate?: boolean;\n    title: string;\n}\n\nexport function ActionModal({\n    accessibleTitle,\n    actionColor = 'primary',\n    actionDisabled = false,\n    actionLabel,\n    children,\n    bodyLayout,\n    description,\n    footerLeading,\n    headerActions,\n    loading,\n    onAction,\n    onClose,\n    sidebar,\n    noValidate,\n    title,\n}: ActionModalProps) {\n    const labels = useDesignSystemLabels();\n\n    return (\n        <Modal loading={loading} onClose={onClose}>\n            <Modal.Content\n                title={title}\n                accessibleTitle={accessibleTitle}\n                description={description}\n                sidebar={sidebar}\n                headerActions={headerActions}\n            >\n                <Modal.Form\n                    noValidate={noValidate}\n                    onSubmit={(event) => {\n                        event.preventDefault();\n\n                        if (!loading && !actionDisabled) {\n                            onAction();\n                        }\n                    }}\n                >\n                    <Modal.Body layout={bodyLayout}>{children}</Modal.Body>\n                    <Modal.Footer leading={footerLeading}>\n                        <Button type=\"button\" disabled={loading} onClick={onClose} variant=\"secondary\">\n                            {labels.cancel}\n                        </Button>\n                        <Button\n                            type=\"submit\"\n                            loading={loading}\n                            disabled={loading || actionDisabled}\n                            variant={actionColor === 'danger' ? 'destructive' : 'primary'}\n                        >\n                            {actionLabel}\n                        </Button>\n                    </Modal.Footer>\n                </Modal.Form>\n            </Modal.Content>\n        </Modal>\n    );\n}\n"],"mappings":";;;;;AAwBA,SAAgB,YAAY,EACxB,iBACA,cAAc,WACd,iBAAiB,OACjB,aACA,UACA,YACA,aACA,eACA,eACA,SACA,UACA,SACA,SACA,YACA,SACiB;CACjB,MAAM,SAAS,sBAAsB;CAErC,OACI,oBAAC,OAAD;EAAgB;EAAkB;EAC9B,UAAA,oBAAC,MAAM,SAAP;GACW;GACU;GACJ;GACJ;GACM;GAEf,UAAA,qBAAC,MAAM,MAAP;IACgB;IACZ,WAAW,UAAU;KACjB,MAAM,eAAe;KAErB,IAAI,CAAC,WAAW,CAAC,gBACb,SAAS;IAEjB;IARJ,UAAA,CAUI,oBAAC,MAAM,MAAP;KAAY,QAAQ;KAAa;IAAqB,CAAA,GACtD,qBAAC,MAAM,QAAP;KAAc,SAAS;KAAvB,UAAA,CACI,oBAAC,QAAD;MAAQ,MAAK;MAAS,UAAU;MAAS,SAAS;MAAS,SAAQ;MAC9D,UAAA,OAAO;KACJ,CAAA,GACR,oBAAC,QAAD;MACI,MAAK;MACI;MACT,UAAU,WAAW;MACrB,SAAS,gBAAgB,WAAW,gBAAgB;MAEnD,UAAA;KACG,CAAA,CACE;IACN,CAAA,CAAA;;EACD,CAAA;CACZ,CAAA;AAEf"}

package/dist/overlays/CommandPalette.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from "react";
+interface CommandPaletteProps {
+  /** The dialog's accessible title and description; the field says the rest. */
+  label: string;
+  description: string;
+  placeholder: string;
+  query: string;
+  onQueryChange: (query: string) => void;
+  /** Narrows the list to one level, shown as a chip before the field; Backspace in an empty field leaves it. */
+  scope?: {
+    label: string;
+    leaveLabel: string;
+    onLeave: () => void;
+  };
+  /** The options' values in list order, for the arrow keys and Enter. */
+  options: readonly string[];
+  onSelect: (value: string) => void;
+  onClose: () => void;
+  listLabel: string;
+  busy?: boolean;
+  /** Shown when nothing is listed. */
+  empty?: ReactNode;
+  /** Quiet key hints under the list, on screens with a keyboard. */
+  footer?: ReactNode;
+  children: ReactNode;
+}
+/** T3 Code's command palette: a field over one keyboard list of grouped options, as a dialog over the page
+ *  or, on phones, the whole screen. The arrow keys move through `options`, Enter selects, Escape closes. */
+export declare function CommandPalette({ label, description, placeholder, query, onQueryChange, scope, options, onSelect, onClose, listLabel, busy, empty, footer, children }: CommandPaletteProps): import("react").JSX.Element;
+/** A labelled run of options in the palette's list. */
+export declare function CommandPaletteGroup({ label, children }: {
+  label: string;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** Props for a palette option, such as a `ResultRow`: its id, highlight and pointer tracking. */
+export declare function useCommandPaletteOption(value: string): {
+  id: string;
+  selected: boolean;
+  tabIndex: number;
+  onPointerMove: () => void;
+};
+export {};
+//# sourceMappingURL=CommandPalette.d.ts.map

package/dist/overlays/CommandPalette.js

@@ -0,0 +1,163 @@
+import { IconButton } from "../actions/IconButton.js";
+import { ResultList } from "../collections/ResultList.js";
+import { useDesignSystemLabels } from "../foundations/DesignSystemProvider.js";
+import { Text } from "../typography/Typography.js";
+import { useModalAutoFocus } from "./useModalAutoFocus.js";
+import { useScrollFade } from "./useScrollFade.js";
+import { createContext, useContext, useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SearchIcon, XIcon } from "lucide-react";
+import { Modal } from "@ninna-ui/overlays";
+// src/overlays/CommandPalette.tsx
+const OptionContext = createContext(null);
+/** T3 Code's command palette: a field over one keyboard list of grouped options, as a dialog over the page
+*  or, on phones, the whole screen. The arrow keys move through `options`, Enter selects, Escape closes. */
+function CommandPalette({ label, description, placeholder, query, onQueryChange, scope, options, onSelect, onClose, listLabel, busy = false, empty, footer, children }) {
+	const labels = useDesignSystemLabels();
+	const focusProps = useModalAutoFocus();
+	const { setViewport, setContent, className } = useScrollFade();
+	const listId = useId();
+	const input = useRef(null);
+	const [chosen, setActiveValue] = useState();
+	const activeValue = chosen !== void 0 && options.includes(chosen) ? chosen : options[0];
+	useEffect(() => {
+		if (activeValue) document.getElementById(optionId(listId, activeValue))?.scrollIntoView({ block: "nearest" });
+	}, [activeValue, listId]);
+	return /* @__PURE__ */ jsx(Modal, {
+		open: true,
+		onOpenChange: (open) => !open && onClose(),
+		children: /* @__PURE__ */ jsxs(Modal.Content, {
+			title: label,
+			description,
+			centered: false,
+			...focusProps,
+			className: "flex max-h-[min(36rem,calc(100dvh-6rem))] w-[calc(100vw-2rem)] max-w-2xl flex-col overflow-hidden p-0 shadow-(--lar-shadow-dialog) max-sm:top-0 max-sm:left-0 max-sm:h-dvh max-sm:max-h-none max-sm:w-full max-sm:max-w-none max-sm:translate-x-0 max-sm:rounded-none! max-sm:border-0 max-sm:pt-[env(safe-area-inset-top)]",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "border-base-300 [&>svg]:text-base-600 flex shrink-0 items-center gap-2 border-b px-4 py-3 [&>svg]:size-4 [&>svg]:shrink-0",
+					children: [
+						/* @__PURE__ */ jsx(SearchIcon, {}),
+						scope ? /* @__PURE__ */ jsxs("span", {
+							className: "bg-primary/12 text-primary flex shrink-0 items-center gap-1 rounded-md py-0.5 pr-1 pl-2 text-xs font-medium",
+							children: [scope.label, /* @__PURE__ */ jsx("button", {
+								type: "button",
+								tabIndex: -1,
+								"aria-label": scope.leaveLabel,
+								className: "hover:bg-primary/15 rounded-sm p-0.5 [&>svg]:size-3",
+								onClick: () => {
+									scope.onLeave();
+									input.current?.focus();
+								},
+								children: /* @__PURE__ */ jsx(XIcon, {})
+							})]
+						}) : null,
+						/* @__PURE__ */ jsx("input", {
+							ref: input,
+							role: "combobox",
+							"aria-label": label,
+							"aria-expanded": true,
+							"aria-controls": listId,
+							"aria-autocomplete": "list",
+							"aria-activedescendant": activeValue ? optionId(listId, activeValue) : void 0,
+							"aria-busy": busy,
+							placeholder,
+							value: query,
+							className: "text-base-content placeholder:text-base-600 min-w-0 flex-1 bg-transparent text-base outline-none sm:text-sm",
+							onChange: (event) => onQueryChange(event.target.value),
+							onKeyDown: (event) => {
+								if (event.nativeEvent.isComposing) return;
+								if (event.key === "Backspace" && !query && scope) {
+									event.preventDefault();
+									scope.onLeave();
+								} else if ((event.key === "ArrowDown" || event.key === "ArrowUp") && options.length) {
+									event.preventDefault();
+									const index = activeValue ? options.indexOf(activeValue) : -1;
+									const step = event.key === "ArrowDown" ? 1 : -1;
+									setActiveValue(options[(index + step + options.length) % options.length]);
+								} else if (event.key === "Enter" && activeValue) {
+									event.preventDefault();
+									onSelect(activeValue);
+								}
+							}
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "flex sm:hidden",
+							children: /* @__PURE__ */ jsx(IconButton, {
+								"aria-label": labels.close,
+								icon: /* @__PURE__ */ jsx(XIcon, {}),
+								onClick: onClose,
+								variant: "header"
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					ref: setViewport,
+					className: `min-h-0 flex-1 overflow-y-auto overscroll-contain p-2 ${className}`,
+					children: /* @__PURE__ */ jsxs("div", {
+						ref: setContent,
+						className: "flow-root",
+						children: [/* @__PURE__ */ jsx(OptionContext.Provider, {
+							value: {
+								listId,
+								activeValue,
+								setActiveValue
+							},
+							children: /* @__PURE__ */ jsx(ResultList, {
+								id: listId,
+								label: listLabel,
+								density: "compact",
+								"aria-busy": busy,
+								children
+							})
+						}), options.length === 0 && empty ? /* @__PURE__ */ jsx(Text, {
+							tone: "muted",
+							className: "px-3 py-8 text-center",
+							children: empty
+						}) : null]
+					})
+				}),
+				footer ? /* @__PURE__ */ jsx("div", {
+					className: "border-base-300 text-2xs text-base-700 hidden shrink-0 items-center gap-4 border-t px-4 py-2 pointer-fine:flex",
+					children: footer
+				}) : null
+			]
+		})
+	});
+}
+/** A labelled run of options in the palette's list. */
+function CommandPaletteGroup({ label, children }) {
+	const labelId = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-labelledby": labelId,
+		className: "flex flex-col gap-1 not-first:pt-2",
+		children: [/* @__PURE__ */ jsx(Text, {
+			as: "span",
+			id: labelId,
+			variant: "caption",
+			tone: "muted",
+			className: "px-2 pt-1 font-medium tracking-wide uppercase",
+			children: label
+		}), children]
+	});
+}
+/** Props for a palette option, such as a `ResultRow`: its id, highlight and pointer tracking. */
+function useCommandPaletteOption(value) {
+	const context = useContext(OptionContext);
+	if (!context) throw new Error("useCommandPaletteOption must be used inside CommandPalette");
+	return {
+		id: optionId(context.listId, value),
+		selected: context.activeValue === value,
+		tabIndex: -1,
+		onPointerMove: () => {
+			if (context.activeValue !== value) context.setActiveValue(value);
+		}
+	};
+}
+function optionId(listId, value) {
+	return `${listId}-${value.replace(/[^\w-]/g, "_")}`;
+}
+export { CommandPalette, CommandPaletteGroup, useCommandPaletteOption };
+
+//# sourceMappingURL=CommandPalette.js.map

package/dist/overlays/CommandPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.js","names":["NinnaModal"],"sources":["../../src/overlays/CommandPalette.tsx"],"sourcesContent":["/* oxlint-disable react/only-export-components -- The option hook belongs to the palette. */\n\nimport { Modal as NinnaModal } from '@ninna-ui/overlays';\nimport { SearchIcon, XIcon } from 'lucide-react';\nimport { createContext, type ReactNode, useContext, useEffect, useId, useRef, useState } from 'react';\n\nimport { IconButton } from '../actions/IconButton';\nimport { ResultList } from '../collections/ResultList';\nimport { useDesignSystemLabels } from '../foundations/DesignSystemProvider';\nimport { Text } from '../typography/Typography';\nimport { useModalAutoFocus } from './useModalAutoFocus';\nimport { useScrollFade } from './useScrollFade';\n\ninterface CommandPaletteProps {\n    /** The dialog's accessible title and description; the field says the rest. */\n    label: string;\n    description: string;\n    placeholder: string;\n    query: string;\n    onQueryChange: (query: string) => void;\n    /** Narrows the list to one level, shown as a chip before the field; Backspace in an empty field leaves it. */\n    scope?: { label: string; leaveLabel: string; onLeave: () => void };\n    /** The options' values in list order, for the arrow keys and Enter. */\n    options: readonly string[];\n    onSelect: (value: string) => void;\n    onClose: () => void;\n    listLabel: string;\n    busy?: boolean;\n    /** Shown when nothing is listed. */\n    empty?: ReactNode;\n    /** Quiet key hints under the list, on screens with a keyboard. */\n    footer?: ReactNode;\n    children: ReactNode;\n}\n\nconst OptionContext = createContext<{\n    listId: string;\n    activeValue: string | undefined;\n    setActiveValue: (value: string) => void;\n} | null>(null);\n\n/** T3 Code's command palette: a field over one keyboard list of grouped options, as a dialog over the page\n *  or, on phones, the whole screen. The arrow keys move through `options`, Enter selects, Escape closes. */\nexport function CommandPalette({\n    label,\n    description,\n    placeholder,\n    query,\n    onQueryChange,\n    scope,\n    options,\n    onSelect,\n    onClose,\n    listLabel,\n    busy = false,\n    empty,\n    footer,\n    children,\n}: CommandPaletteProps) {\n    const labels = useDesignSystemLabels();\n    const focusProps = useModalAutoFocus();\n    const { setViewport, setContent, className } = useScrollFade();\n    const listId = useId();\n    const input = useRef<HTMLInputElement>(null);\n    const [chosen, setActiveValue] = useState<string>();\n    // The highlight follows the list: when the chosen option leaves it, the first option takes over.\n    const activeValue = chosen !== undefined && options.includes(chosen) ? chosen : options[0];\n\n    useEffect(() => {\n        if (activeValue) document.getElementById(optionId(listId, activeValue))?.scrollIntoView({ block: 'nearest' });\n    }, [activeValue, listId]);\n\n    return (\n        <NinnaModal open onOpenChange={(open) => !open && onClose()}>\n            <NinnaModal.Content\n                title={label}\n                description={description}\n                centered={false}\n                {...focusProps}\n                className=\"flex max-h-[min(36rem,calc(100dvh-6rem))] w-[calc(100vw-2rem)] max-w-2xl flex-col overflow-hidden p-0 shadow-(--lar-shadow-dialog) max-sm:top-0 max-sm:left-0 max-sm:h-dvh max-sm:max-h-none max-sm:w-full max-sm:max-w-none max-sm:translate-x-0 max-sm:rounded-none! max-sm:border-0 max-sm:pt-[env(safe-area-inset-top)]\"\n            >\n                <div className=\"border-base-300 [&>svg]:text-base-600 flex shrink-0 items-center gap-2 border-b px-4 py-3 [&>svg]:size-4 [&>svg]:shrink-0\">\n                    <SearchIcon />\n                    {scope ? (\n                        <span className=\"bg-primary/12 text-primary flex shrink-0 items-center gap-1 rounded-md py-0.5 pr-1 pl-2 text-xs font-medium\">\n                            {scope.label}\n                            <button\n                                type=\"button\"\n                                tabIndex={-1}\n                                aria-label={scope.leaveLabel}\n                                className=\"hover:bg-primary/15 rounded-sm p-0.5 [&>svg]:size-3\"\n                                onClick={() => {\n                                    scope.onLeave();\n                                    input.current?.focus();\n                                }}\n                            >\n                                <XIcon />\n                            </button>\n                        </span>\n                    ) : null}\n                    <input\n                        ref={input}\n                        role=\"combobox\"\n                        aria-label={label}\n                        aria-expanded\n                        aria-controls={listId}\n                        aria-autocomplete=\"list\"\n                        aria-activedescendant={activeValue ? optionId(listId, activeValue) : undefined}\n                        aria-busy={busy}\n                        placeholder={placeholder}\n                        value={query}\n                        className=\"text-base-content placeholder:text-base-600 min-w-0 flex-1 bg-transparent text-base outline-none sm:text-sm\"\n                        onChange={(event) => onQueryChange(event.target.value)}\n                        onKeyDown={(event) => {\n                            if (event.nativeEvent.isComposing) return;\n\n                            if (event.key === 'Backspace' && !query && scope) {\n                                event.preventDefault();\n                                scope.onLeave();\n                            } else if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && options.length) {\n                                event.preventDefault();\n\n                                const index = activeValue ? options.indexOf(activeValue) : -1;\n                                const step = event.key === 'ArrowDown' ? 1 : -1;\n\n                                setActiveValue(options[(index + step + options.length) % options.length]!);\n                            } else if (event.key === 'Enter' && activeValue) {\n                                event.preventDefault();\n                                onSelect(activeValue);\n                            }\n                        }}\n                    />\n                    <span className=\"flex sm:hidden\">\n                        <IconButton aria-label={labels.close} icon={<XIcon />} onClick={onClose} variant=\"header\" />\n                    </span>\n                </div>\n                <div ref={setViewport} className={`min-h-0 flex-1 overflow-y-auto overscroll-contain p-2 ${className}`}>\n                    <div ref={setContent} className=\"flow-root\">\n                        <OptionContext.Provider value={{ listId, activeValue, setActiveValue }}>\n                            <ResultList id={listId} label={listLabel} density=\"compact\" aria-busy={busy}>\n                                {children}\n                            </ResultList>\n                        </OptionContext.Provider>\n                        {options.length === 0 && empty ? (\n                            <Text tone=\"muted\" className=\"px-3 py-8 text-center\">\n                                {empty}\n                            </Text>\n                        ) : null}\n                    </div>\n                </div>\n                {footer ? (\n                    <div className=\"border-base-300 text-2xs text-base-700 hidden shrink-0 items-center gap-4 border-t px-4 py-2 pointer-fine:flex\">\n                        {footer}\n                    </div>\n                ) : null}\n            </NinnaModal.Content>\n        </NinnaModal>\n    );\n}\n\n/** A labelled run of options in the palette's list. */\nexport function CommandPaletteGroup({ label, children }: { label: string; children: ReactNode }) {\n    const labelId = useId();\n\n    return (\n        <div role=\"group\" aria-labelledby={labelId} className=\"flex flex-col gap-1 not-first:pt-2\">\n            <Text\n                as=\"span\"\n                id={labelId}\n                variant=\"caption\"\n                tone=\"muted\"\n                className=\"px-2 pt-1 font-medium tracking-wide uppercase\"\n            >\n                {label}\n            </Text>\n            {children}\n        </div>\n    );\n}\n\n/** Props for a palette option, such as a `ResultRow`: its id, highlight and pointer tracking. */\nexport function useCommandPaletteOption(value: string) {\n    const context = useContext(OptionContext);\n\n    if (!context) throw new Error('useCommandPaletteOption must be used inside CommandPalette');\n\n    return {\n        id: optionId(context.listId, value),\n        selected: context.activeValue === value,\n        tabIndex: -1,\n        onPointerMove: () => {\n            if (context.activeValue !== value) context.setActiveValue(value);\n        },\n    };\n}\n\nfunction optionId(listId: string, value: string) {\n    return `${listId}-${value.replace(/[^\\w-]/g, '_')}`;\n}\n"],"mappings":"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"}

package/dist/overlays/Drawer.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps, ReactNode } from "react";
+import { Drawer, DrawerBodyProps, DrawerContentProps, DrawerFooterProps } from "@ninna-ui/overlays";
+interface DrawerContentPolicyProps extends Omit<DrawerContentProps, 'className' | 'placement' | 'size' | 'title'> {
+  title: string;
+  subtitle?: ReactNode;
+  /** Header controls shown before the close button. */
+  actions?: ReactNode;
+  /** Runs as the drawer closes; preventing its default keeps focus from returning to the opening control. */
+  onCloseAutoFocus?: (event: Event) => void;
+}
+declare function DrawerRoot(props: ComponentProps<typeof Drawer>): import("react").JSX.Element;
+declare const Drawer$1: typeof DrawerRoot & {
+  Body: import("react").ForwardRefExoticComponent<Omit<DrawerBodyProps, "className"> & import("react").RefAttributes<HTMLDivElement>>;
+  Content: import("react").ForwardRefExoticComponent<DrawerContentPolicyProps & import("react").RefAttributes<HTMLDivElement>>;
+  Footer: import("react").ForwardRefExoticComponent<Omit<DrawerFooterProps, "className"> & import("react").RefAttributes<HTMLDivElement>>;
+  Trigger: import("react").ForwardRefExoticComponent<import("@ninna-ui/overlays").DrawerTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export { Drawer$1 as Drawer };
+//# sourceMappingURL=Drawer.d.ts.map

package/dist/overlays/Drawer.js

@@ -0,0 +1,83 @@
+import { IconButton } from "../actions/IconButton.js";
+import { useDesignSystemLabels } from "../foundations/DesignSystemProvider.js";
+import { Heading, Text } from "../typography/Typography.js";
+import { useModalAutoFocus } from "./useModalAutoFocus.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+import { Drawer } from "@ninna-ui/overlays";
+// src/overlays/Drawer.tsx
+function DrawerRoot(props) {
+	return /* @__PURE__ */ jsx(Drawer, { ...props });
+}
+const DrawerContent = forwardRef(({ actions, children, description, subtitle, title, onCloseAutoFocus, ...props }, ref) => {
+	const labels = useDesignSystemLabels();
+	const autoFocus = useModalAutoFocus();
+	const focusProps = {
+		...autoFocus,
+		onCloseAutoFocus: (event) => {
+			onCloseAutoFocus?.(event);
+			if (!event.defaultPrevented) autoFocus.onCloseAutoFocus(event);
+		}
+	};
+	return /* @__PURE__ */ jsxs(Drawer.Content, {
+		ref,
+		...props,
+		...focusProps,
+		title,
+		description,
+		placement: "right",
+		size: "lg",
+		className: "flex w-full max-w-xl flex-col overflow-hidden",
+		children: [/* @__PURE__ */ jsxs("header", {
+			"data-slot": "drawer-header",
+			className: "border-base-300 shrink-0 border-b px-5 py-5 sm:px-6 sm:py-6",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-start gap-4",
+				children: [/* @__PURE__ */ jsx(Heading, {
+					as: "h2",
+					className: "min-w-0 wrap-break-word",
+					variant: "section",
+					children: title
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [actions, /* @__PURE__ */ jsx(Drawer.Close, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(IconButton, {
+							"aria-label": labels.close,
+							icon: /* @__PURE__ */ jsx(XIcon, {}),
+							variant: "header"
+						})
+					})]
+				})]
+			}), subtitle ?? description ? /* @__PURE__ */ jsx(Text, {
+				className: "mt-2 wrap-break-word",
+				variant: "description",
+				tone: "muted",
+				children: subtitle ?? description
+			}) : null]
+		}), children]
+	});
+});
+DrawerContent.displayName = "Drawer.Content";
+const DrawerBody = forwardRef((props, ref) => /* @__PURE__ */ jsx(Drawer.Body, {
+	ref,
+	...props,
+	className: "min-h-0 min-w-0 flex-1 overflow-y-auto overscroll-contain px-5 py-5 sm:px-6"
+}));
+DrawerBody.displayName = "Drawer.Body";
+const DrawerFooter = forwardRef((props, ref) => /* @__PURE__ */ jsx(Drawer.Footer, {
+	ref,
+	...props,
+	className: "border-base-300 shrink-0 justify-between border-t px-5 py-3 sm:px-6 sm:py-3"
+}));
+DrawerFooter.displayName = "Drawer.Footer";
+const Drawer$1 = Object.assign(DrawerRoot, {
+	Body: DrawerBody,
+	Content: DrawerContent,
+	Footer: DrawerFooter,
+	Trigger: Drawer.Trigger
+});
+export { Drawer$1 as Drawer };
+
+//# sourceMappingURL=Drawer.js.map

package/dist/overlays/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","names":["NinnaDrawer","Drawer"],"sources":["../../src/overlays/Drawer.tsx"],"sourcesContent":["/* oxlint-disable react/only-export-components -- Compound members are exported through Drawer. */\nimport {\n    Drawer as NinnaDrawer,\n    type DrawerBodyProps,\n    type DrawerContentProps,\n    type DrawerFooterProps,\n} from '@ninna-ui/overlays';\nimport { XIcon } from 'lucide-react';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\n\nimport { IconButton } from '../actions/IconButton';\nimport { useDesignSystemLabels } from '../foundations/DesignSystemProvider';\nimport { Heading, Text } from '../typography/Typography';\nimport { useModalAutoFocus } from './useModalAutoFocus';\n\ninterface DrawerContentPolicyProps extends Omit<DrawerContentProps, 'className' | 'placement' | 'size' | 'title'> {\n    title: string;\n    subtitle?: ReactNode;\n    /** Header controls shown before the close button. */\n    actions?: ReactNode;\n    /** Runs as the drawer closes; preventing its default keeps focus from returning to the opening control. */\n    onCloseAutoFocus?: (event: Event) => void;\n}\n\nfunction DrawerRoot(props: ComponentProps<typeof NinnaDrawer>) {\n    return <NinnaDrawer {...props} />;\n}\n\nconst DrawerContent = forwardRef<HTMLDivElement, DrawerContentPolicyProps>(\n    ({ actions, children, description, subtitle, title, onCloseAutoFocus, ...props }, ref) => {\n        const labels = useDesignSystemLabels();\n        const autoFocus = useModalAutoFocus();\n        const focusProps = {\n            ...autoFocus,\n            onCloseAutoFocus: (event: Event) => {\n                onCloseAutoFocus?.(event);\n\n                if (!event.defaultPrevented) autoFocus.onCloseAutoFocus(event);\n            },\n        };\n\n        return (\n            <NinnaDrawer.Content\n                ref={ref}\n                {...props}\n                {...focusProps}\n                title={title}\n                description={description}\n                placement=\"right\"\n                size=\"lg\"\n                className=\"flex w-full max-w-xl flex-col overflow-hidden\"\n            >\n                <header\n                    data-slot=\"drawer-header\"\n                    className=\"border-base-300 shrink-0 border-b px-5 py-5 sm:px-6 sm:py-6\"\n                >\n                    <div className=\"grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-start gap-4\">\n                        <Heading as=\"h2\" className=\"min-w-0 wrap-break-word\" variant=\"section\">\n                            {title}\n                        </Heading>\n                        <div className=\"flex items-center gap-1\">\n                            {actions}\n                            <NinnaDrawer.Close asChild>\n                                <IconButton aria-label={labels.close} icon={<XIcon />} variant=\"header\" />\n                            </NinnaDrawer.Close>\n                        </div>\n                    </div>\n                    {(subtitle ?? description) ? (\n                        <Text className=\"mt-2 wrap-break-word\" variant=\"description\" tone=\"muted\">\n                            {subtitle ?? description}\n                        </Text>\n                    ) : null}\n                </header>\n                {children}\n            </NinnaDrawer.Content>\n        );\n    },\n);\n\nDrawerContent.displayName = 'Drawer.Content';\n\nconst DrawerBody = forwardRef<HTMLDivElement, Omit<DrawerBodyProps, 'className'>>((props, ref) => (\n    <NinnaDrawer.Body\n        ref={ref}\n        {...props}\n        className=\"min-h-0 min-w-0 flex-1 overflow-y-auto overscroll-contain px-5 py-5 sm:px-6\"\n    />\n));\n\nDrawerBody.displayName = 'Drawer.Body';\n\nconst DrawerFooter = forwardRef<HTMLDivElement, Omit<DrawerFooterProps, 'className'>>((props, ref) => (\n    <NinnaDrawer.Footer\n        ref={ref}\n        {...props}\n        className=\"border-base-300 shrink-0 justify-between border-t px-5 py-3 sm:px-6 sm:py-3\"\n    />\n));\n\nDrawerFooter.displayName = 'Drawer.Footer';\n\nexport const Drawer = Object.assign(DrawerRoot, {\n    Body: DrawerBody,\n    Content: DrawerContent,\n    Footer: DrawerFooter,\n    Trigger: NinnaDrawer.Trigger,\n});\n"],"mappings":";;;;;;;;;AAwBA,SAAS,WAAW,OAA2C;CAC3D,OAAO,oBAACA,QAAD,EAAa,GAAI,MAAQ,CAAA;AACpC;AAEA,MAAM,gBAAgB,YACjB,EAAE,SAAS,UAAU,aAAa,UAAU,OAAO,kBAAkB,GAAG,SAAS,QAAQ;CACtF,MAAM,SAAS,sBAAsB;CACrC,MAAM,YAAY,kBAAkB;CACpC,MAAM,aAAa;EACf,GAAG;EACH,mBAAmB,UAAiB;GAChC,mBAAmB,KAAK;GAExB,IAAI,CAAC,MAAM,kBAAkB,UAAU,iBAAiB,KAAK;EACjE;CACJ;CAEA,OACI,qBAACA,OAAY,SAAb;EACS;EACL,GAAI;EACJ,GAAI;EACG;EACM;EACb,WAAU;EACV,MAAK;EACL,WAAU;EARd,UAAA,CAUI,qBAAC,UAAD;GACI,aAAU;GACV,WAAU;GAFd,UAAA,CAII,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACI,oBAAC,SAAD;KAAS,IAAG;KAAK,WAAU;KAA0B,SAAQ;KACxD,UAAA;IACI,CAAA,GACT,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACK,SACD,oBAACA,OAAY,OAAb;MAAmB,SAAA;MACf,UAAA,oBAAC,YAAD;OAAY,cAAY,OAAO;OAAO,MAAM,oBAAC,OAAD,CAAQ,CAAA;OAAG,SAAQ;MAAU,CAAA;KAC1D,CAAA,CAClB;IACJ,CAAA,CAAA;GACH,CAAA,GAAA,YAAY,cACV,oBAAC,MAAD;IAAM,WAAU;IAAuB,SAAQ;IAAc,MAAK;IAC7D,UAAA,YAAY;GACX,CAAA,IACN,IACA;EACP,CAAA,GAAA,QACgB;;AAE7B,CACJ;AAEA,cAAc,cAAc;AAE5B,MAAM,aAAa,YAAgE,OAAO,QACtF,oBAACA,OAAY,MAAb;CACS;CACL,GAAI;CACJ,WAAU;AACb,CAAA,CACJ;AAED,WAAW,cAAc;AAEzB,MAAM,eAAe,YAAkE,OAAO,QAC1F,oBAACA,OAAY,QAAb;CACS;CACL,GAAI;CACJ,WAAU;AACb,CAAA,CACJ;AAED,aAAa,cAAc;AAE3B,MAAaC,WAAS,OAAO,OAAO,YAAY;CAC5C,MAAM;CACN,SAAS;CACT,QAAQ;CACR,SAASD,OAAY;AACzB,CAAC"}

package/dist/overlays/DropdownMenu.d.ts

@@ -0,0 +1,47 @@
+import { ComponentProps } from "react";
+import { DropdownMenu, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps } from "@ninna-ui/overlays";
+interface DropdownMenuContentPolicyProps extends Omit<DropdownMenuContentProps, 'className'> {
+  width?: 'sm' | 'md';
+}
+interface DropdownMenuLabelPolicyProps extends Omit<DropdownMenuLabelProps, 'className'> {
+  presentation?: 'section' | 'identity';
+}
+interface DropdownMenuItemPolicyProps extends Omit<DropdownMenuItemProps, 'className'> {
+  /** Forward the underlying menu item's behavior to a link without a second tab stop. */
+  asChild?: boolean;
+}
+interface DropdownMenuRadioGroupPolicyProps extends Omit<DropdownMenuRadioGroupProps, 'className'> {
+  presentation?: 'default' | 'segmented';
+}
+interface DropdownMenuRadioItemPolicyProps extends Omit<DropdownMenuRadioItemProps, 'className'> {
+  presentation?: 'default' | 'segmented';
+}
+declare function DropdownMenuRoot(props: ComponentProps<typeof DropdownMenu>): import("react").JSX.Element;
+declare const DropdownMenu$1: typeof DropdownMenuRoot & {
+  ({ children, open, defaultOpen, onOpenChange, modal, dir }: import("@ninna-ui/overlays").DropdownMenuProps): import("react").JSX.Element;
+  displayName: string;
+} & {
+  Trigger: import("react").ForwardRefExoticComponent<import("@ninna-ui/overlays").DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Content: import("react").ForwardRefExoticComponent<DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
+  Item: import("react").ForwardRefExoticComponent<DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+  CheckboxItem: import("react").ForwardRefExoticComponent<import("@ninna-ui/overlays").DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
+  RadioGroup: import("react").ForwardRefExoticComponent<DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+  RadioItem: import("react").ForwardRefExoticComponent<DropdownMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>;
+  Label: import("react").ForwardRefExoticComponent<DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+  Separator: import("react").ForwardRefExoticComponent<import("@ninna-ui/overlays").DropdownMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+  Group: import("react").ForwardRefExoticComponent<import("@ninna-ui/overlays").DropdownMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+  Sub: {
+    ({ children, open, defaultOpen, onOpenChange }: import("@ninna-ui/overlays").DropdownMenuSubProps): import("react").JSX.Element;
+    displayName: string;
+  };
+  SubTrigger: import("react").ForwardRefExoticComponent<import("@ninna-ui/overlays").DropdownMenuSubTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+  SubContent: import("react").ForwardRefExoticComponent<import("@ninna-ui/overlays").DropdownMenuSubContentProps & import("react").RefAttributes<HTMLDivElement>>;
+} & {
+  Content: import("react").ForwardRefExoticComponent<DropdownMenuContentPolicyProps & import("react").RefAttributes<HTMLDivElement>>;
+  Item: import("react").ForwardRefExoticComponent<DropdownMenuItemPolicyProps & import("react").RefAttributes<HTMLDivElement>>;
+  Label: import("react").ForwardRefExoticComponent<DropdownMenuLabelPolicyProps & import("react").RefAttributes<HTMLDivElement>>;
+  RadioGroup: import("react").ForwardRefExoticComponent<DropdownMenuRadioGroupPolicyProps & import("react").RefAttributes<HTMLDivElement>>;
+  RadioItem: import("react").ForwardRefExoticComponent<DropdownMenuRadioItemPolicyProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export { DropdownMenu$1 as DropdownMenu };
+//# sourceMappingURL=DropdownMenu.d.ts.map

package/dist/overlays/DropdownMenu.js

@@ -0,0 +1,58 @@
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { DropdownMenu } from "@ninna-ui/overlays";
+// src/overlays/DropdownMenu.tsx
+const contentWidthClasses = {
+	sm: "w-60",
+	md: "w-64"
+};
+const DropdownMenuContent = forwardRef(({ side = "bottom", sideOffset = 8, width = "sm", ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu.Content, {
+	ref,
+	side,
+	sideOffset,
+	...props,
+	className: `${contentWidthClasses[width]} max-h-(--radix-dropdown-menu-content-available-height) max-w-[calc(100vw-2rem)] overflow-y-auto`
+}));
+DropdownMenuContent.displayName = "DropdownMenu.Content";
+const DropdownMenuLabel = forwardRef(({ presentation = "section", ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu.Label, {
+	ref,
+	...props,
+	className: presentation === "identity" ? "tracking-normal normal-case" : void 0
+}));
+DropdownMenuLabel.displayName = "DropdownMenu.Label";
+const DropdownMenuItem = forwardRef((props, ref) => /* @__PURE__ */ jsx(DropdownMenu.Item, {
+	ref,
+	...props,
+	className: "aria-[current=page]:bg-primary/10 aria-[current=page]:text-primary max-lg:min-h-11 pointer-coarse:min-h-11 [&>svg]:size-4 [&>svg]:shrink-0"
+}));
+DropdownMenuItem.displayName = "DropdownMenu.Item";
+const DropdownMenuRadioGroup = forwardRef(({ presentation = "default", ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu.RadioGroup, {
+	ref,
+	...props,
+	className: presentation === "segmented" ? "bg-base-200/70 flex gap-0.5 rounded-lg p-0.5" : void 0
+}));
+DropdownMenuRadioGroup.displayName = "DropdownMenu.RadioGroup";
+const DropdownMenuRadioItem = forwardRef(({ onSelect, presentation = "default", ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu.RadioItem, {
+	ref,
+	...props,
+	"data-presentation": presentation,
+	onSelect: presentation === "segmented" ? (event) => {
+		event.preventDefault();
+		onSelect?.(event);
+	} : onSelect,
+	className: presentation === "segmented" ? "text-base-600 focus:bg-base-300 focus:text-base-content data-[state=checked]:bg-base-100 data-[state=checked]:text-base-content size-7 justify-center rounded-md p-0 data-[state=checked]:shadow-sm [&>span]:hidden [&>svg]:size-4" : "max-lg:min-h-11 pointer-coarse:min-h-11 [&>svg]:size-4 [&>svg]:shrink-0"
+}));
+DropdownMenuRadioItem.displayName = "DropdownMenu.RadioItem";
+function DropdownMenuRoot(props) {
+	return /* @__PURE__ */ jsx(DropdownMenu, { ...props });
+}
+const DropdownMenu$1 = Object.assign(DropdownMenuRoot, DropdownMenu, {
+	Content: DropdownMenuContent,
+	Item: DropdownMenuItem,
+	Label: DropdownMenuLabel,
+	RadioGroup: DropdownMenuRadioGroup,
+	RadioItem: DropdownMenuRadioItem
+});
+export { DropdownMenu$1 as DropdownMenu };
+
+//# sourceMappingURL=DropdownMenu.js.map

package/dist/overlays/DropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.js","names":["NinnaDropdownMenu","DropdownMenu"],"sources":["../../src/overlays/DropdownMenu.tsx"],"sourcesContent":["/* oxlint-disable react/only-export-components -- Compound members are exported through DropdownMenu. */\n\nimport {\n    DropdownMenu as NinnaDropdownMenu,\n    type DropdownMenuContentProps,\n    type DropdownMenuItemProps,\n    type DropdownMenuLabelProps,\n    type DropdownMenuRadioGroupProps,\n    type DropdownMenuRadioItemProps,\n} from '@ninna-ui/overlays';\nimport { type ComponentProps, forwardRef } from 'react';\n\ninterface DropdownMenuContentPolicyProps extends Omit<DropdownMenuContentProps, 'className'> {\n    width?: 'sm' | 'md';\n}\n\nconst contentWidthClasses: Record<NonNullable<DropdownMenuContentPolicyProps['width']>, string> = {\n    sm: 'w-60',\n    md: 'w-64',\n};\n\nconst DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentPolicyProps>(\n    ({ side = 'bottom', sideOffset = 8, width = 'sm', ...props }, ref) => (\n        <NinnaDropdownMenu.Content\n            ref={ref}\n            side={side}\n            sideOffset={sideOffset}\n            {...props}\n            className={`${contentWidthClasses[width]} max-h-(--radix-dropdown-menu-content-available-height) max-w-[calc(100vw-2rem)] overflow-y-auto`}\n        />\n    ),\n);\n\nDropdownMenuContent.displayName = 'DropdownMenu.Content';\n\ninterface DropdownMenuLabelPolicyProps extends Omit<DropdownMenuLabelProps, 'className'> {\n    presentation?: 'section' | 'identity';\n}\n\nconst DropdownMenuLabel = forwardRef<HTMLDivElement, DropdownMenuLabelPolicyProps>(\n    ({ presentation = 'section', ...props }, ref) => (\n        <NinnaDropdownMenu.Label\n            ref={ref}\n            {...props}\n            className={presentation === 'identity' ? 'tracking-normal normal-case' : undefined}\n        />\n    ),\n);\n\nDropdownMenuLabel.displayName = 'DropdownMenu.Label';\n\ninterface DropdownMenuItemPolicyProps extends Omit<DropdownMenuItemProps, 'className'> {\n    /** Forward the underlying menu item's behavior to a link without a second tab stop. */\n    asChild?: boolean;\n}\n\nconst DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemPolicyProps>((props, ref) => (\n    <NinnaDropdownMenu.Item\n        ref={ref}\n        {...props}\n        className=\"aria-[current=page]:bg-primary/10 aria-[current=page]:text-primary max-lg:min-h-11 pointer-coarse:min-h-11 [&>svg]:size-4 [&>svg]:shrink-0\"\n    />\n));\n\nDropdownMenuItem.displayName = 'DropdownMenu.Item';\n\ninterface DropdownMenuRadioGroupPolicyProps extends Omit<DropdownMenuRadioGroupProps, 'className'> {\n    presentation?: 'default' | 'segmented';\n}\n\nconst DropdownMenuRadioGroup = forwardRef<HTMLDivElement, DropdownMenuRadioGroupPolicyProps>(\n    ({ presentation = 'default', ...props }, ref) => (\n        <NinnaDropdownMenu.RadioGroup\n            ref={ref}\n            {...props}\n            className={presentation === 'segmented' ? 'bg-base-200/70 flex gap-0.5 rounded-lg p-0.5' : undefined}\n        />\n    ),\n);\n\nDropdownMenuRadioGroup.displayName = 'DropdownMenu.RadioGroup';\n\ninterface DropdownMenuRadioItemPolicyProps extends Omit<DropdownMenuRadioItemProps, 'className'> {\n    presentation?: 'default' | 'segmented';\n}\n\nconst DropdownMenuRadioItem = forwardRef<HTMLDivElement, DropdownMenuRadioItemPolicyProps>(\n    ({ onSelect, presentation = 'default', ...props }, ref) => (\n        <NinnaDropdownMenu.RadioItem\n            ref={ref}\n            {...props}\n            data-presentation={presentation}\n            onSelect={\n                presentation === 'segmented'\n                    ? (event) => {\n                          event.preventDefault();\n                          onSelect?.(event);\n                      }\n                    : onSelect\n            }\n            className={\n                presentation === 'segmented'\n                    ? 'text-base-600 focus:bg-base-300 focus:text-base-content data-[state=checked]:bg-base-100 data-[state=checked]:text-base-content size-7 justify-center rounded-md p-0 data-[state=checked]:shadow-sm [&>span]:hidden [&>svg]:size-4'\n                    : 'max-lg:min-h-11 pointer-coarse:min-h-11 [&>svg]:size-4 [&>svg]:shrink-0'\n            }\n        />\n    ),\n);\n\nDropdownMenuRadioItem.displayName = 'DropdownMenu.RadioItem';\n\nfunction DropdownMenuRoot(props: ComponentProps<typeof NinnaDropdownMenu>) {\n    return <NinnaDropdownMenu {...props} />;\n}\n\nexport const DropdownMenu = Object.assign(DropdownMenuRoot, NinnaDropdownMenu, {\n    Content: DropdownMenuContent,\n    Item: DropdownMenuItem,\n    Label: DropdownMenuLabel,\n    RadioGroup: DropdownMenuRadioGroup,\n    RadioItem: DropdownMenuRadioItem,\n});\n"],"mappings":";;;;AAgBA,MAAM,sBAA4F;CAC9F,IAAI;CACJ,IAAI;AACR;AAEA,MAAM,sBAAsB,YACvB,EAAE,OAAO,UAAU,aAAa,GAAG,QAAQ,MAAM,GAAG,SAAS,QAC1D,oBAACA,aAAkB,SAAnB;CACS;CACC;CACM;CACZ,GAAI;CACJ,WAAW,GAAG,oBAAoB,OAAO;AAC5C,CAAA,CAET;AAEA,oBAAoB,cAAc;AAMlC,MAAM,oBAAoB,YACrB,EAAE,eAAe,WAAW,GAAG,SAAS,QACrC,oBAACA,aAAkB,OAAnB;CACS;CACL,GAAI;CACJ,WAAW,iBAAiB,aAAa,gCAAgC,KAAA;AAC5E,CAAA,CAET;AAEA,kBAAkB,cAAc;AAOhC,MAAM,mBAAmB,YAAyD,OAAO,QACrF,oBAACA,aAAkB,MAAnB;CACS;CACL,GAAI;CACJ,WAAU;AACb,CAAA,CACJ;AAED,iBAAiB,cAAc;AAM/B,MAAM,yBAAyB,YAC1B,EAAE,eAAe,WAAW,GAAG,SAAS,QACrC,oBAACA,aAAkB,YAAnB;CACS;CACL,GAAI;CACJ,WAAW,iBAAiB,cAAc,iDAAiD,KAAA;AAC9F,CAAA,CAET;AAEA,uBAAuB,cAAc;AAMrC,MAAM,wBAAwB,YACzB,EAAE,UAAU,eAAe,WAAW,GAAG,SAAS,QAC/C,oBAACA,aAAkB,WAAnB;CACS;CACL,GAAI;CACJ,qBAAmB;CACnB,UACI,iBAAiB,eACV,UAAU;EACP,MAAM,eAAe;EACrB,WAAW,KAAK;CACpB,IACA;CAEV,WACI,iBAAiB,cACX,uOACA;AAEb,CAAA,CAET;AAEA,sBAAsB,cAAc;AAEpC,SAAS,iBAAiB,OAAiD;CACvE,OAAO,oBAACA,cAAD,EAAmB,GAAI,MAAQ,CAAA;AAC1C;AAEA,MAAaC,iBAAe,OAAO,OAAO,kBAAkBD,cAAmB;CAC3E,SAAS;CACT,MAAM;CACN,OAAO;CACP,YAAY;CACZ,WAAW;AACf,CAAC"}