@duestel/ui 0.1.0

package/dist/components/form/app-form.js

@@ -0,0 +1,95 @@
+import { cn as e } from "../../lib/cn.js";
+import { Button as t } from "../button/Button.js";
+import { Checkbox as n } from "../checkbox/Checkbox.js";
+import { Input as r, TextField as i } from "./Input.js";
+import { DatePicker as a } from "../date-picker/DatePicker.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { createFormHook as c, createFormHookContexts as l } from "@tanstack/react-form";
+//#region src/components/form/app-form.tsx
+var { fieldContext: u, formContext: d, useFieldContext: f, useFormContext: p } = l();
+function m() {
+	let { errors: e, isTouched: t } = f().state.meta;
+	return !t || e.length === 0 ? null : /* @__PURE__ */ o("p", {
+		className: "m-0 px-3 text-body-small text-error",
+		children: e.map((e) => typeof e == "string" ? e : e?.message ?? "").filter(Boolean).join(" ")
+	});
+}
+function h({ className: t, ...n }) {
+	let i = f(), a = i.state.meta.isTouched && i.state.meta.errors.length > 0;
+	return /* @__PURE__ */ s("div", {
+		className: e("flex w-full flex-col gap-1", t),
+		children: [/* @__PURE__ */ o(r, {
+			name: i.name,
+			value: i.state.value,
+			onChange: (e) => i.handleChange(e.target.value),
+			onBlur: i.handleBlur,
+			"data-invalid": a ? "" : void 0,
+			...n
+		}), /* @__PURE__ */ o(m, {})]
+	});
+}
+function g({ className: t, ...n }) {
+	let r = f(), a = r.state.meta.isTouched && r.state.meta.errors.length > 0;
+	return /* @__PURE__ */ s("div", {
+		className: e("flex w-full flex-col gap-1", t),
+		children: [/* @__PURE__ */ o(i, {
+			name: r.name,
+			value: r.state.value,
+			onChange: (e) => r.handleChange(e.target.value),
+			onBlur: r.handleBlur,
+			"data-invalid": a ? "" : void 0,
+			...n
+		}), /* @__PURE__ */ o(m, {})]
+	});
+}
+function _({ label: e }) {
+	let t = f();
+	return /* @__PURE__ */ s("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ o(n, {
+			name: t.name,
+			label: e,
+			checked: t.state.value,
+			onCheckedChange: (e) => t.handleChange(e === !0),
+			onBlur: t.handleBlur
+		}), /* @__PURE__ */ o(m, {})]
+	});
+}
+function v({ className: t, ...n }) {
+	let r = f();
+	return /* @__PURE__ */ s("div", {
+		className: e("flex w-full flex-col gap-1", t),
+		children: [/* @__PURE__ */ o(a, {
+			name: r.name,
+			value: r.state.value,
+			onChange: (e) => r.handleChange(e),
+			...n
+		}), /* @__PURE__ */ o(m, {})]
+	});
+}
+function y({ children: e, ...n }) {
+	return /* @__PURE__ */ o(p().Subscribe, {
+		selector: (e) => [e.canSubmit, e.isSubmitting],
+		children: ([r, i]) => /* @__PURE__ */ o(t.Root, {
+			type: "submit",
+			disabled: !r,
+			...n,
+			children: i ? "Submitting…" : e
+		})
+	});
+}
+var { useAppForm: b, withForm: x } = c({
+	fieldContext: u,
+	formContext: d,
+	fieldComponents: {
+		TextField: h,
+		TextArea: g,
+		Checkbox: _,
+		DatePicker: v
+	},
+	formComponents: { SubmitButton: y }
+});
+//#endregion
+export { b as useAppForm, f as useFieldContext, p as useFormContext, x as withForm };
+
+//# sourceMappingURL=app-form.js.map

package/dist/components/form/app-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-form.js","names":[],"sources":["../../../src/components/form/app-form.tsx"],"sourcesContent":["import { createFormHook, createFormHookContexts } from '@tanstack/react-form'\nimport { Button } from '#/components/button'\nimport { Checkbox } from '#/components/checkbox'\nimport { DatePicker } from '#/components/date-picker'\nimport { cn } from '#/lib/cn'\nimport { Input, TextField } from './Input'\n\nimport type { ComponentProps, ReactNode } from 'react'\n\n/**\n * App forms — TanStack Form (https://tanstack.com/form) bound to the M3 text\n * fields ported from port/core/ui/components/text-field. This is the\n * recommended way to build forms in this app; the Base UI Form/Field family\n * remains for the design-guide catalog.\n *\n * `useAppForm` pre-binds field components via TanStack's createFormHook, so\n * fields read state from field context — no manual value/onChange wiring:\n *\n *   const form = useAppForm({\n *     defaultValues: { email: '', story: '', agree: false },\n *     onSubmit: async ({ value }) => save(value),\n *   })\n *\n *   <form onSubmit={(e) => { e.preventDefault(); form.handleSubmit() }}>\n *     <form.AppField\n *       name=\"email\"\n *       validators={{ onChange: ({ value }) => (!value ? 'Required' : undefined) }}\n *     >\n *       {(field) => <field.TextField label=\"Email\" />}\n *     </form.AppField>\n *     <form.AppForm>\n *       <form.SubmitButton>Save</form.SubmitButton>\n *     </form.AppForm>\n *   </form>\n */\n\nexport const { fieldContext, formContext, useFieldContext, useFormContext } =\n  createFormHookContexts()\n\n/** M3 error supporting text under a field; shown once the field was touched. */\nfunction FieldErrors() {\n  const field = useFieldContext()\n  const { errors, isTouched } = field.state.meta\n  if (!isTouched || errors.length === 0) return null\n  return (\n    <p className=\"m-0 px-3 text-body-small text-error\">\n      {errors\n        .map((e: unknown) =>\n          typeof e === 'string' ? e : ((e as { message?: string } | null)?.message ?? ''),\n        )\n        .filter(Boolean)\n        .join(' ')}\n    </p>\n  )\n}\n\ntype BoundTextFieldProps = Omit<\n  ComponentProps<typeof Input>,\n  'value' | 'onChange' | 'onBlur' | 'name'\n>\n\n/** Single-line M3 text field bound to the field context (port anatomy). */\nfunction AppTextField({ className, ...props }: BoundTextFieldProps) {\n  const field = useFieldContext<string>()\n  const invalid = field.state.meta.isTouched && field.state.meta.errors.length > 0\n  return (\n    <div className={cn('flex w-full flex-col gap-1', className)}>\n      <Input\n        name={field.name}\n        value={field.state.value}\n        onChange={(e) => field.handleChange(e.target.value)}\n        onBlur={field.handleBlur}\n        data-invalid={invalid ? '' : undefined}\n        {...props}\n      />\n      <FieldErrors />\n    </div>\n  )\n}\n\ntype BoundTextAreaProps = Omit<\n  ComponentProps<typeof TextField>,\n  'value' | 'onChange' | 'onBlur' | 'name'\n>\n\n/** Multi-line M3 text field bound to the field context (port anatomy). */\nfunction AppTextArea({ className, ...props }: BoundTextAreaProps) {\n  const field = useFieldContext<string>()\n  const invalid = field.state.meta.isTouched && field.state.meta.errors.length > 0\n  return (\n    <div className={cn('flex w-full flex-col gap-1', className)}>\n      <TextField\n        name={field.name}\n        value={field.state.value}\n        onChange={(e) => field.handleChange(e.target.value)}\n        onBlur={field.handleBlur}\n        data-invalid={invalid ? '' : undefined}\n        {...props}\n      />\n      <FieldErrors />\n    </div>\n  )\n}\n\n/** Port-styled checkbox bound to a boolean field. */\nfunction AppCheckbox({ label }: { label: ReactNode }) {\n  const field = useFieldContext<boolean>()\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <Checkbox\n        name={field.name}\n        label={label}\n        checked={field.state.value}\n        onCheckedChange={(checked) => field.handleChange(checked === true)}\n        onBlur={field.handleBlur}\n      />\n      <FieldErrors />\n    </div>\n  )\n}\n\ntype BoundDatePickerProps = Omit<\n  ComponentProps<typeof DatePicker>,\n  'value' | 'onChange' | 'name'\n>\n\n/** M3 docked date picker bound to a `Date | null` field. */\nfunction AppDatePicker({ className, ...props }: BoundDatePickerProps) {\n  const field = useFieldContext<Date | null>()\n  return (\n    <div className={cn('flex w-full flex-col gap-1', className)}>\n      <DatePicker\n        name={field.name}\n        value={field.state.value}\n        onChange={(date) => field.handleChange(date)}\n        {...props}\n      />\n      <FieldErrors />\n    </div>\n  )\n}\n\n/** Filled M3 submit button; disabled while the form can't submit. */\nfunction SubmitButton({ children, ...props }: ComponentProps<typeof Button.Root>) {\n  const form = useFormContext()\n  return (\n    <form.Subscribe selector={(state) => [state.canSubmit, state.isSubmitting]}>\n      {([canSubmit, isSubmitting]) => (\n        <Button.Root type=\"submit\" disabled={!canSubmit} {...props}>\n          {isSubmitting ? 'Submitting…' : children}\n        </Button.Root>\n      )}\n    </form.Subscribe>\n  )\n}\n\nexport const { useAppForm, withForm } = createFormHook({\n  fieldContext,\n  formContext,\n  fieldComponents: {\n    TextField: AppTextField,\n    TextArea: AppTextArea,\n    Checkbox: AppCheckbox,\n    DatePicker: AppDatePicker,\n  },\n  formComponents: {\n    SubmitButton,\n  },\n})\n"],"mappings":";;;;;;;;AAoCA,IAAa,EAAE,iBAAc,gBAAa,oBAAiB,sBACzD,EAAuB;AAGzB,SAAS,IAAc;CAErB,IAAM,EAAE,WAAQ,iBADF,EACgB,EAAM,MAAM;CAE1C,OADI,CAAC,KAAa,EAAO,WAAW,IAAU,OAE5C,kBAAC,KAAD;EAAG,WAAU;YACV,EACE,KAAK,MACJ,OAAO,KAAM,WAAW,IAAM,GAAmC,WAAW,EAC9E,EACC,OAAO,OAAO,EACd,KAAK,GAAG;CACV,CAAA;AAEP;AAQA,SAAS,EAAa,EAAE,cAAW,GAAG,KAA8B;CAClE,IAAM,IAAQ,EAAwB,GAChC,IAAU,EAAM,MAAM,KAAK,aAAa,EAAM,MAAM,KAAK,OAAO,SAAS;CAC/E,OACE,kBAAC,OAAD;EAAK,WAAW,EAAG,8BAA8B,CAAS;YAA1D,CACE,kBAAC,GAAD;GACE,MAAM,EAAM;GACZ,OAAO,EAAM,MAAM;GACnB,WAAW,MAAM,EAAM,aAAa,EAAE,OAAO,KAAK;GAClD,QAAQ,EAAM;GACd,gBAAc,IAAU,KAAK,KAAA;GAC7B,GAAI;EACL,CAAA,GACD,kBAAC,GAAD,CAAc,CAAA,CACX;;AAET;AAQA,SAAS,EAAY,EAAE,cAAW,GAAG,KAA6B;CAChE,IAAM,IAAQ,EAAwB,GAChC,IAAU,EAAM,MAAM,KAAK,aAAa,EAAM,MAAM,KAAK,OAAO,SAAS;CAC/E,OACE,kBAAC,OAAD;EAAK,WAAW,EAAG,8BAA8B,CAAS;YAA1D,CACE,kBAAC,GAAD;GACE,MAAM,EAAM;GACZ,OAAO,EAAM,MAAM;GACnB,WAAW,MAAM,EAAM,aAAa,EAAE,OAAO,KAAK;GAClD,QAAQ,EAAM;GACd,gBAAc,IAAU,KAAK,KAAA;GAC7B,GAAI;EACL,CAAA,GACD,kBAAC,GAAD,CAAc,CAAA,CACX;;AAET;AAGA,SAAS,EAAY,EAAE,YAA+B;CACpD,IAAM,IAAQ,EAAyB;CACvC,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GACE,MAAM,EAAM;GACL;GACP,SAAS,EAAM,MAAM;GACrB,kBAAkB,MAAY,EAAM,aAAa,MAAY,EAAI;GACjE,QAAQ,EAAM;EACf,CAAA,GACD,kBAAC,GAAD,CAAc,CAAA,CACX;;AAET;AAQA,SAAS,EAAc,EAAE,cAAW,GAAG,KAA+B;CACpE,IAAM,IAAQ,EAA6B;CAC3C,OACE,kBAAC,OAAD;EAAK,WAAW,EAAG,8BAA8B,CAAS;YAA1D,CACE,kBAAC,GAAD;GACE,MAAM,EAAM;GACZ,OAAO,EAAM,MAAM;GACnB,WAAW,MAAS,EAAM,aAAa,CAAI;GAC3C,GAAI;EACL,CAAA,GACD,kBAAC,GAAD,CAAc,CAAA,CACX;;AAET;AAGA,SAAS,EAAa,EAAE,aAAU,GAAG,KAA6C;CAEhF,OACE,kBAFW,EAEV,EAAK,WAAN;EAAgB,WAAW,MAAU,CAAC,EAAM,WAAW,EAAM,YAAY;aACrE,CAAC,GAAW,OACZ,kBAAC,EAAO,MAAR;GAAa,MAAK;GAAS,UAAU,CAAC;GAAW,GAAI;aAClD,IAAe,gBAAgB;EACrB,CAAA;CAED,CAAA;AAEpB;AAEA,IAAa,EAAE,eAAY,gBAAa,EAAe;CACrD;CACA;CACA,iBAAiB;EACf,WAAW;EACX,UAAU;EACV,UAAU;EACV,YAAY;CACd;CACA,gBAAgB,EACd,gBACF;AACF,CAAC"}

package/dist/components/form/index.d.ts

@@ -0,0 +1,5 @@
+export { Field, fieldControlClasses } from './Field';
+export { Fieldset } from './Fieldset';
+export { Form } from './Form';
+export { Input, TextField, InputOutlined, InputFilled, TextFieldOutlined, TextFieldFilled, } from './Input';
+export { useAppForm, withForm, useFieldContext, useFormContext } from './app-form';

package/dist/components/form/index.js

@@ -0,0 +1,6 @@
+import { Input as e, InputFilled as t, InputOutlined as n, TextField as r, TextFieldFilled as i, TextFieldOutlined as a } from "./Input.js";
+import { Field as o, fieldControlClasses as s } from "./Field.js";
+import { Fieldset as c } from "./Fieldset.js";
+import { Form as l } from "./Form.js";
+import { useAppForm as u, useFieldContext as d, useFormContext as f, withForm as p } from "./app-form.js";
+export { o as Field, c as Fieldset, l as Form, e as Input, t as InputFilled, n as InputOutlined, r as TextField, i as TextFieldFilled, a as TextFieldOutlined, s as fieldControlClasses, u as useAppForm, d as useFieldContext, f as useFormContext, p as withForm };

package/dist/components/hotkeys/Kbd.d.ts

@@ -0,0 +1,20 @@
+import { ComponentProps } from 'react';
+/**
+ * Kbd / Hotkey — M3 keyboard-key chips over TanStack Hotkeys' formatting
+ * helpers (https://tanstack.com/hotkeys). Behaviour hooks (useHotkey, …)
+ * re-export from './hotkeys'; this file is display only.
+ *
+ *   <Kbd>⌘K</Kbd>                 — single key cap
+ *   <Hotkey hotkey="mod+k" />     — combo rendered as platform-aware key caps
+ */
+/** Single M3 key cap: surface-container-high chip with key-cap bottom edge. */
+declare function Kbd({ className, ...props }: ComponentProps<'kbd'>): import("react").JSX.Element;
+type HotkeyProps = Omit<ComponentProps<'span'>, 'children'> & {
+    /** Hotkey string, e.g. 'mod+k', 'Shift+/'. `mod` adapts per platform. */
+    hotkey: string;
+    /** Force a platform's symbols (⌘⇧ on mac, Ctrl/Shift text elsewhere). Defaults to auto-detection. */
+    platform?: 'mac' | 'windows' | 'linux';
+};
+/** Hotkey combo as a row of Kbd chips joined with '+', platform-aware symbols. */
+declare function Hotkey({ hotkey, platform, className, ...props }: HotkeyProps): import("react").JSX.Element;
+export { Kbd, Hotkey };

package/dist/components/hotkeys/Kbd.js

@@ -0,0 +1,31 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Fragment as r } from "react";
+import { detectPlatform as i, formatForDisplay as a } from "@tanstack/react-hotkeys";
+//#region src/components/hotkeys/Kbd.tsx
+function o({ className: n, ...r }) {
+	return /* @__PURE__ */ t("kbd", {
+		className: e("inline-flex h-6 min-w-6 items-center justify-center px-1.5", "rounded-extra-small border border-b-2 border-outline-variant bg-surface-container-high", "font-sans text-label-small text-on-surface-variant tabular-nums", n),
+		...r
+	});
+}
+var s = "\0";
+function c({ hotkey: c, platform: l, className: u, ...d }) {
+	let f = a(c, {
+		platform: l ?? i(),
+		separatorToken: s
+	}).split(s);
+	return /* @__PURE__ */ t("span", {
+		className: e("inline-flex items-center gap-1", u),
+		...d,
+		children: f.map((e, i) => /* @__PURE__ */ n(r, { children: [i > 0 && /* @__PURE__ */ t("span", {
+			"aria-hidden": !0,
+			className: "text-label-small text-on-surface-variant",
+			children: "+"
+		}), /* @__PURE__ */ t(o, { children: e })] }, `${i}-${e}`))
+	});
+}
+//#endregion
+export { c as Hotkey, o as Kbd };
+
+//# sourceMappingURL=Kbd.js.map

package/dist/components/hotkeys/Kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.js","names":[],"sources":["../../../src/components/hotkeys/Kbd.tsx"],"sourcesContent":["import { Fragment } from 'react'\nimport { detectPlatform, formatForDisplay } from '@tanstack/react-hotkeys'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Kbd / Hotkey — M3 keyboard-key chips over TanStack Hotkeys' formatting\n * helpers (https://tanstack.com/hotkeys). Behaviour hooks (useHotkey, …)\n * re-export from './hotkeys'; this file is display only.\n *\n *   <Kbd>⌘K</Kbd>                 — single key cap\n *   <Hotkey hotkey=\"mod+k\" />     — combo rendered as platform-aware key caps\n */\n\n/** Single M3 key cap: surface-container-high chip with key-cap bottom edge. */\nfunction Kbd({ className, ...props }: ComponentProps<'kbd'>) {\n  return (\n    <kbd\n      className={cn(\n        'inline-flex h-6 min-w-6 items-center justify-center px-1.5',\n        'rounded-extra-small border border-b-2 border-outline-variant bg-surface-container-high',\n        'font-sans text-label-small text-on-surface-variant tabular-nums',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Sentinel separator so display tokens split safely even when the key is '+'. */\nconst TOKEN_SEPARATOR = '\u0000'\n\ntype HotkeyProps = Omit<ComponentProps<'span'>, 'children'> & {\n  /** Hotkey string, e.g. 'mod+k', 'Shift+/'. `mod` adapts per platform. */\n  hotkey: string\n  /** Force a platform's symbols (⌘⇧ on mac, Ctrl/Shift text elsewhere). Defaults to auto-detection. */\n  platform?: 'mac' | 'windows' | 'linux'\n}\n\n/** Hotkey combo as a row of Kbd chips joined with '+', platform-aware symbols. */\nfunction Hotkey({ hotkey, platform, className, ...props }: HotkeyProps) {\n  const resolved = platform ?? detectPlatform()\n  const tokens = formatForDisplay(hotkey, {\n    platform: resolved,\n    separatorToken: TOKEN_SEPARATOR,\n  }).split(TOKEN_SEPARATOR)\n  return (\n    <span className={cn('inline-flex items-center gap-1', className)} {...props}>\n      {tokens.map((token, index) => (\n        <Fragment key={`${index}-${token}`}>\n          {index > 0 && (\n            <span aria-hidden className=\"text-label-small text-on-surface-variant\">\n              +\n            </span>\n          )}\n          <Kbd>{token}</Kbd>\n        </Fragment>\n      ))}\n    </span>\n  )\n}\n\nexport { Kbd, Hotkey }\n"],"mappings":";;;;;AAgBA,SAAS,EAAI,EAAE,cAAW,GAAG,KAAgC;CAC3D,OACE,kBAAC,OAAD;EACE,WAAW,EACT,8DACA,0FACA,mEACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,IAAM,IAAkB;AAUxB,SAAS,EAAO,EAAE,WAAQ,aAAU,cAAW,GAAG,KAAsB;CAEtE,IAAM,IAAS,EAAiB,GAAQ;EACtC,UAFe,KAAY,EAAe;EAG1C,gBAAgB;CAClB,CAAC,EAAE,MAAM,CAAe;CACxB,OACE,kBAAC,QAAD;EAAM,WAAW,EAAG,kCAAkC,CAAS;EAAG,GAAI;YACnE,EAAO,KAAK,GAAO,MAClB,kBAAC,GAAD,EAAA,UAAA,CACG,IAAQ,KACP,kBAAC,QAAD;GAAM,eAAA;GAAY,WAAU;aAA2C;EAEjE,CAAA,GAER,kBAAC,GAAD,EAAA,UAAM,EAAW,CAAA,CACT,EAAA,GAPK,GAAG,EAAM,GAAG,GAOjB,CACX;CACG,CAAA;AAEV"}

package/dist/components/hotkeys/hotkeys.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Hotkeys — TanStack Hotkeys (https://tanstack.com/hotkeys) is this app's
+ * keyboard-shortcut engine. App code imports the blessed surface from
+ * '#/components/hotkeys' rather than the library directly, mirroring how
+ * forms wrap TanStack Form (see src/components/form/app-form.tsx).
+ *
+ *   useHotkey('Mod+K', openPalette)        — single combo (Mod = ⌘ / Ctrl)
+ *   useHotkeys([...])                      — several combos at once
+ *   useHotkeySequence(['G', 'D'], goHome)  — Vim-style sequences
+ *   useKeyHold('Shift')                    — reactive held-key boolean
+ *   <HotkeysProvider>                      — scoped defaults (optional)
+ *   formatForDisplay('Mod+K')              — '⌘ K' / 'Ctrl+K' for UI text
+ */
+export { HotkeysProvider, formatForDisplay, useHotkey, useHotkeys, useHotkeySequence, useKeyHold, } from '@tanstack/react-hotkeys';

package/dist/components/hotkeys/hotkeys.js

@@ -0,0 +1,2 @@
+import { HotkeysProvider as e, formatForDisplay as t, useHotkey as n, useHotkeySequence as r, useHotkeys as i, useKeyHold as a } from "@tanstack/react-hotkeys";
+export { e as HotkeysProvider, t as formatForDisplay, n as useHotkey, r as useHotkeySequence, i as useHotkeys, a as useKeyHold };

package/dist/components/hotkeys/index.d.ts

@@ -0,0 +1,2 @@
+export { Kbd, Hotkey } from './Kbd';
+export { HotkeysProvider, formatForDisplay, useHotkey, useHotkeys, useHotkeySequence, useKeyHold, } from './hotkeys';

package/dist/components/hotkeys/index.js

@@ -0,0 +1,3 @@
+import { Hotkey as e, Kbd as t } from "./Kbd.js";
+import { HotkeysProvider as n, formatForDisplay as r, useHotkey as i, useHotkeySequence as a, useHotkeys as o, useKeyHold as s } from "./hotkeys.js";
+export { e as Hotkey, n as HotkeysProvider, t as Kbd, r as formatForDisplay, i as useHotkey, a as useHotkeySequence, o as useHotkeys, s as useKeyHold };

package/dist/components/menu/Menu.d.ts

@@ -0,0 +1,84 @@
+import { Menu as BaseMenu } from '@base-ui/react/menu';
+import { ComponentProps } from 'react';
+/**
+ * Menu — Material 3 styled wrapper over Base UI's headless Menu.
+ * Behaviour/accessibility (click/keyboard open, typeahead, roving focus,
+ * submenus, detached triggers): Base UI (https://base-ui.com/react/components/menu).
+ * Visuals: M3 menu anatomy — surface-container at elevation 2, small (8px)
+ * corner, 48px label-large items with leading/trailing slots, state layers.
+ * Design ref: port/core/ui/components/dropdown + overflow-menu (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI:
+ *   <Menu.Root>
+ *     <Menu.Trigger>Open</Menu.Trigger>
+ *     <Menu.Portal>
+ *       <Menu.Positioner>
+ *         <Menu.Popup>
+ *           <Menu.Item>Copy</Menu.Item>
+ *           <Menu.Separator />
+ *           <Menu.SubmenuRoot>
+ *             <Menu.SubmenuTrigger>Share</Menu.SubmenuTrigger>
+ *             …
+ *           </Menu.SubmenuRoot>
+ *         </Menu.Popup>
+ *       </Menu.Positioner>
+ *     </Menu.Portal>
+ *   </Menu.Root>
+ */
+declare const Root: <Payload>(props: BaseMenu.Root.Props<Payload>) => import("react").JSX.Element;
+declare const Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').ContextMenuPortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const SubmenuRoot: typeof BaseMenu.SubmenuRoot;
+/** Imperative handle connecting a Menu.Root with detached Menu.Trigger components. */
+declare const Handle: typeof BaseMenu.Handle;
+declare const createHandle: typeof BaseMenu.createHandle;
+/** Button that opens the menu — style it like any M3 button at the call site. */
+declare function Trigger({ className, ...props }: ComponentProps<typeof BaseMenu.Trigger>): import("react").JSX.Element;
+/** Invisible click-capture layer behind the menu (menus use no scrim). */
+declare function Backdrop({ className, ...props }: ComponentProps<typeof BaseMenu.Backdrop>): import("react").JSX.Element;
+declare function Positioner({ className, sideOffset, ...props }: ComponentProps<typeof BaseMenu.Positioner>): import("react").JSX.Element;
+declare function Popup({ className, ...props }: ComponentProps<typeof BaseMenu.Popup>): import("react").JSX.Element;
+/** Optional pointer toward the anchor — rarely used for menus; unstyled hook point. */
+declare function Arrow({ className, ...props }: ComponentProps<typeof BaseMenu.Arrow>): import("react").JSX.Element;
+/** Transition container — only needed when one menu is shared by several triggers. */
+declare function Viewport({ className, ...props }: ComponentProps<typeof BaseMenu.Viewport>): import("react").JSX.Element;
+declare function Group({ className, ...props }: ComponentProps<typeof BaseMenu.Group>): import("react").JSX.Element;
+declare function GroupLabel({ className, ...props }: ComponentProps<typeof BaseMenu.GroupLabel>): import("react").JSX.Element;
+declare function Item({ className, ...props }: ComponentProps<typeof BaseMenu.Item>): import("react").JSX.Element;
+/** Menu item that renders an anchor element. */
+declare function LinkItem({ className, ...props }: ComponentProps<typeof BaseMenu.LinkItem>): import("react").JSX.Element;
+declare function CheckboxItem({ className, ...props }: ComponentProps<typeof BaseMenu.CheckboxItem>): import("react").JSX.Element;
+/** Leading 20px slot for the check mark — pass `keepMounted` to hold alignment. */
+declare function CheckboxItemIndicator({ className, ...props }: ComponentProps<typeof BaseMenu.CheckboxItemIndicator>): import("react").JSX.Element;
+declare function RadioGroup({ className, ...props }: ComponentProps<typeof BaseMenu.RadioGroup>): import("react").JSX.Element;
+declare function RadioItem({ className, ...props }: ComponentProps<typeof BaseMenu.RadioItem>): import("react").JSX.Element;
+/** Leading 20px slot for the selected mark — pass `keepMounted` to hold alignment. */
+declare function RadioItemIndicator({ className, ...props }: ComponentProps<typeof BaseMenu.RadioItemIndicator>): import("react").JSX.Element;
+/** Item that opens a nested menu; renders a trailing chevron automatically. */
+declare function SubmenuTrigger({ className, children, ...props }: ComponentProps<typeof BaseMenu.SubmenuTrigger>): import("react").JSX.Element;
+/** M3 divider between menu sections. */
+declare function Separator({ className, ...props }: ComponentProps<typeof BaseMenu.Separator>): import("react").JSX.Element;
+export declare const Menu: {
+    Root: <Payload>(props: BaseMenu.Root.Props<Payload>) => import("react").JSX.Element;
+    Trigger: typeof Trigger;
+    Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').ContextMenuPortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Backdrop: typeof Backdrop;
+    Positioner: typeof Positioner;
+    Popup: typeof Popup;
+    Arrow: typeof Arrow;
+    Viewport: typeof Viewport;
+    Group: typeof Group;
+    GroupLabel: typeof GroupLabel;
+    Item: typeof Item;
+    LinkItem: typeof LinkItem;
+    CheckboxItem: typeof CheckboxItem;
+    CheckboxItemIndicator: typeof CheckboxItemIndicator;
+    RadioGroup: typeof RadioGroup;
+    RadioItem: typeof RadioItem;
+    RadioItemIndicator: typeof RadioItemIndicator;
+    SubmenuRoot: typeof BaseMenu.SubmenuRoot;
+    SubmenuTrigger: typeof SubmenuTrigger;
+    Separator: typeof Separator;
+    Handle: typeof BaseMenu.Handle;
+    createHandle: typeof BaseMenu.createHandle;
+};
+export { Root, Trigger, Portal, Backdrop, Positioner, Popup, Arrow, Viewport, Group, GroupLabel, Item, LinkItem, CheckboxItem, CheckboxItemIndicator, RadioGroup, RadioItem, RadioItemIndicator, SubmenuRoot, SubmenuTrigger, Separator, Handle, createHandle, };

package/dist/components/menu/Menu.js

@@ -0,0 +1,142 @@
+import { cn as e } from "../../lib/cn.js";
+import { ChevronRight as t } from "lucide-react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Menu as i } from "@base-ui/react/menu";
+//#region src/components/menu/Menu.tsx
+var a = i.Root, o = i.Portal, s = i.SubmenuRoot, c = i.Handle, l = i.createHandle;
+function u({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Trigger, {
+		className: e("select-none", t),
+		...r
+	});
+}
+function d({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Backdrop, {
+		className: e("fixed inset-0 z-40", t),
+		...r
+	});
+}
+function f({ className: t, sideOffset: r = 4, ...a }) {
+	return /* @__PURE__ */ n(i.Positioner, {
+		className: e("z-50 outline-none", t),
+		sideOffset: r,
+		...a
+	});
+}
+function p({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Popup, {
+		className: e("flex max-h-[310px] min-w-[112px] max-w-[280px] flex-col overflow-y-auto", "rounded-small bg-surface-container py-2 text-on-surface shadow-mm-2", "origin-(--transform-origin) transition-[opacity,transform] duration-150 ease-out focus:outline-none", "data-[starting-style]:scale-95 data-[starting-style]:opacity-0", "data-[ending-style]:scale-95 data-[ending-style]:opacity-0", t),
+		...r
+	});
+}
+function m({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Arrow, {
+		className: e(t),
+		...r
+	});
+}
+function h({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Viewport, {
+		className: e("relative flex flex-col", t),
+		...r
+	});
+}
+function g({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Group, {
+		className: e("flex flex-col", t),
+		...r
+	});
+}
+function _({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.GroupLabel, {
+		className: e("px-3 py-2 text-label-small text-on-surface-variant", t),
+		...r
+	});
+}
+var v = e("flex h-12 cursor-pointer select-none items-center gap-3 pl-3 pr-6", "text-label-large text-on-surface outline-none transition-colors", "data-[highlighted]:bg-on-surface/[0.08]", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-[0.38]");
+function y({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Item, {
+		className: e(v, t),
+		...r
+	});
+}
+function b({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.LinkItem, {
+		className: e(v, "no-underline", t),
+		...r
+	});
+}
+function x({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.CheckboxItem, {
+		className: e(v, t),
+		...r
+	});
+}
+function S({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.CheckboxItemIndicator, {
+		className: e("flex size-5 shrink-0 items-center justify-center text-on-surface data-[unchecked]:invisible", t),
+		...r
+	});
+}
+function C({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.RadioGroup, {
+		className: e("flex flex-col", t),
+		...r
+	});
+}
+function w({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.RadioItem, {
+		className: e(v, t),
+		...r
+	});
+}
+function T({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.RadioItemIndicator, {
+		className: e("flex size-5 shrink-0 items-center justify-center text-on-surface data-[unchecked]:invisible", t),
+		...r
+	});
+}
+function E({ className: a, children: o, ...s }) {
+	return /* @__PURE__ */ r(i.SubmenuTrigger, {
+		className: e(v, "data-[popup-open]:bg-on-surface/[0.08]", a),
+		...s,
+		children: [o, /* @__PURE__ */ n(t, {
+			"aria-hidden": !0,
+			className: "ml-auto size-5 shrink-0 text-on-surface-variant"
+		})]
+	});
+}
+function D({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Separator, {
+		className: e("my-2 h-px shrink-0 bg-outline-variant", t),
+		...r
+	});
+}
+var O = {
+	Root: a,
+	Trigger: u,
+	Portal: o,
+	Backdrop: d,
+	Positioner: f,
+	Popup: p,
+	Arrow: m,
+	Viewport: h,
+	Group: g,
+	GroupLabel: _,
+	Item: y,
+	LinkItem: b,
+	CheckboxItem: x,
+	CheckboxItemIndicator: S,
+	RadioGroup: C,
+	RadioItem: w,
+	RadioItemIndicator: T,
+	SubmenuRoot: s,
+	SubmenuTrigger: E,
+	Separator: D,
+	Handle: c,
+	createHandle: l
+};
+//#endregion
+export { m as Arrow, d as Backdrop, x as CheckboxItem, S as CheckboxItemIndicator, g as Group, _ as GroupLabel, c as Handle, y as Item, b as LinkItem, O as Menu, p as Popup, o as Portal, f as Positioner, C as RadioGroup, w as RadioItem, T as RadioItemIndicator, a as Root, D as Separator, s as SubmenuRoot, E as SubmenuTrigger, u as Trigger, h as Viewport, l as createHandle };
+
+//# sourceMappingURL=Menu.js.map

package/dist/components/menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","names":[],"sources":["../../../src/components/menu/Menu.tsx"],"sourcesContent":["import { Menu as BaseMenu } from '@base-ui/react/menu'\nimport { ChevronRight } from 'lucide-react'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Menu — Material 3 styled wrapper over Base UI's headless Menu.\n * Behaviour/accessibility (click/keyboard open, typeahead, roving focus,\n * submenus, detached triggers): Base UI (https://base-ui.com/react/components/menu).\n * Visuals: M3 menu anatomy — surface-container at elevation 2, small (8px)\n * corner, 48px label-large items with leading/trailing slots, state layers.\n * Design ref: port/core/ui/components/dropdown + overflow-menu (see CLAUDE.md).\n *\n * Compound API mirrors Base UI:\n *   <Menu.Root>\n *     <Menu.Trigger>Open</Menu.Trigger>\n *     <Menu.Portal>\n *       <Menu.Positioner>\n *         <Menu.Popup>\n *           <Menu.Item>Copy</Menu.Item>\n *           <Menu.Separator />\n *           <Menu.SubmenuRoot>\n *             <Menu.SubmenuTrigger>Share</Menu.SubmenuTrigger>\n *             …\n *           </Menu.SubmenuRoot>\n *         </Menu.Popup>\n *       </Menu.Positioner>\n *     </Menu.Portal>\n *   </Menu.Root>\n */\n\nconst Root = BaseMenu.Root\nconst Portal = BaseMenu.Portal\nconst SubmenuRoot = BaseMenu.SubmenuRoot\n/** Imperative handle connecting a Menu.Root with detached Menu.Trigger components. */\nconst Handle = BaseMenu.Handle\nconst createHandle = BaseMenu.createHandle\n\n/** Button that opens the menu — style it like any M3 button at the call site. */\nfunction Trigger({ className, ...props }: ComponentProps<typeof BaseMenu.Trigger>) {\n  return <BaseMenu.Trigger className={cn('select-none', className)} {...props} />\n}\n\n/** Invisible click-capture layer behind the menu (menus use no scrim). */\nfunction Backdrop({ className, ...props }: ComponentProps<typeof BaseMenu.Backdrop>) {\n  return <BaseMenu.Backdrop className={cn('fixed inset-0 z-40', className)} {...props} />\n}\n\nfunction Positioner({\n  className,\n  sideOffset = 4,\n  ...props\n}: ComponentProps<typeof BaseMenu.Positioner>) {\n  return (\n    <BaseMenu.Positioner\n      className={cn('z-50 outline-none', className)}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction Popup({ className, ...props }: ComponentProps<typeof BaseMenu.Popup>) {\n  return (\n    <BaseMenu.Popup\n      className={cn(\n        'flex max-h-[310px] min-w-[112px] max-w-[280px] flex-col overflow-y-auto',\n        'rounded-small bg-surface-container py-2 text-on-surface shadow-mm-2',\n        'origin-(--transform-origin) transition-[opacity,transform] duration-150 ease-out focus:outline-none',\n        'data-[starting-style]:scale-95 data-[starting-style]:opacity-0',\n        'data-[ending-style]:scale-95 data-[ending-style]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Optional pointer toward the anchor — rarely used for menus; unstyled hook point. */\nfunction Arrow({ className, ...props }: ComponentProps<typeof BaseMenu.Arrow>) {\n  return <BaseMenu.Arrow className={cn(className)} {...props} />\n}\n\n/** Transition container — only needed when one menu is shared by several triggers. */\nfunction Viewport({ className, ...props }: ComponentProps<typeof BaseMenu.Viewport>) {\n  return <BaseMenu.Viewport className={cn('relative flex flex-col', className)} {...props} />\n}\n\nfunction Group({ className, ...props }: ComponentProps<typeof BaseMenu.Group>) {\n  return <BaseMenu.Group className={cn('flex flex-col', className)} {...props} />\n}\n\nfunction GroupLabel({ className, ...props }: ComponentProps<typeof BaseMenu.GroupLabel>) {\n  return (\n    <BaseMenu.GroupLabel\n      className={cn('px-3 py-2 text-label-small text-on-surface-variant', className)}\n      {...props}\n    />\n  )\n}\n\n/** Shared M3 list-item recipe: 48px row, label-large, state layers. */\nconst itemClasses = cn(\n  'flex h-12 cursor-pointer select-none items-center gap-3 pl-3 pr-6',\n  'text-label-large text-on-surface outline-none transition-colors',\n  'data-[highlighted]:bg-on-surface/[0.08]',\n  'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-[0.38]',\n)\n\nfunction Item({ className, ...props }: ComponentProps<typeof BaseMenu.Item>) {\n  return <BaseMenu.Item className={cn(itemClasses, className)} {...props} />\n}\n\n/** Menu item that renders an anchor element. */\nfunction LinkItem({ className, ...props }: ComponentProps<typeof BaseMenu.LinkItem>) {\n  return <BaseMenu.LinkItem className={cn(itemClasses, 'no-underline', className)} {...props} />\n}\n\nfunction CheckboxItem({ className, ...props }: ComponentProps<typeof BaseMenu.CheckboxItem>) {\n  return <BaseMenu.CheckboxItem className={cn(itemClasses, className)} {...props} />\n}\n\n/** Leading 20px slot for the check mark — pass `keepMounted` to hold alignment. */\nfunction CheckboxItemIndicator({\n  className,\n  ...props\n}: ComponentProps<typeof BaseMenu.CheckboxItemIndicator>) {\n  return (\n    <BaseMenu.CheckboxItemIndicator\n      className={cn(\n        'flex size-5 shrink-0 items-center justify-center text-on-surface data-[unchecked]:invisible',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroup({ className, ...props }: ComponentProps<typeof BaseMenu.RadioGroup>) {\n  return <BaseMenu.RadioGroup className={cn('flex flex-col', className)} {...props} />\n}\n\nfunction RadioItem({ className, ...props }: ComponentProps<typeof BaseMenu.RadioItem>) {\n  return <BaseMenu.RadioItem className={cn(itemClasses, className)} {...props} />\n}\n\n/** Leading 20px slot for the selected mark — pass `keepMounted` to hold alignment. */\nfunction RadioItemIndicator({\n  className,\n  ...props\n}: ComponentProps<typeof BaseMenu.RadioItemIndicator>) {\n  return (\n    <BaseMenu.RadioItemIndicator\n      className={cn(\n        'flex size-5 shrink-0 items-center justify-center text-on-surface data-[unchecked]:invisible',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Item that opens a nested menu; renders a trailing chevron automatically. */\nfunction SubmenuTrigger({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof BaseMenu.SubmenuTrigger>) {\n  return (\n    <BaseMenu.SubmenuTrigger\n      className={cn(itemClasses, 'data-[popup-open]:bg-on-surface/[0.08]', className)}\n      {...props}\n    >\n      {children}\n      <ChevronRight aria-hidden className=\"ml-auto size-5 shrink-0 text-on-surface-variant\" />\n    </BaseMenu.SubmenuTrigger>\n  )\n}\n\n/** M3 divider between menu sections. */\nfunction Separator({ className, ...props }: ComponentProps<typeof BaseMenu.Separator>) {\n  return (\n    <BaseMenu.Separator\n      className={cn('my-2 h-px shrink-0 bg-outline-variant', className)}\n      {...props}\n    />\n  )\n}\n\nexport const Menu = {\n  Root,\n  Trigger,\n  Portal,\n  Backdrop,\n  Positioner,\n  Popup,\n  Arrow,\n  Viewport,\n  Group,\n  GroupLabel,\n  Item,\n  LinkItem,\n  CheckboxItem,\n  CheckboxItemIndicator,\n  RadioGroup,\n  RadioItem,\n  RadioItemIndicator,\n  SubmenuRoot,\n  SubmenuTrigger,\n  Separator,\n  Handle,\n  createHandle,\n}\nexport {\n  Root,\n  Trigger,\n  Portal,\n  Backdrop,\n  Positioner,\n  Popup,\n  Arrow,\n  Viewport,\n  Group,\n  GroupLabel,\n  Item,\n  LinkItem,\n  CheckboxItem,\n  CheckboxItemIndicator,\n  RadioGroup,\n  RadioItem,\n  RadioItemIndicator,\n  SubmenuRoot,\n  SubmenuTrigger,\n  Separator,\n  Handle,\n  createHandle,\n}\n"],"mappings":";;;;;AAgCA,IAAM,IAAO,EAAS,MAChB,IAAS,EAAS,QAClB,IAAc,EAAS,aAEvB,IAAS,EAAS,QAClB,IAAe,EAAS;AAG9B,SAAS,EAAQ,EAAE,cAAW,GAAG,KAAkD;CACjF,OAAO,kBAAC,EAAS,SAAV;EAAkB,WAAW,EAAG,eAAe,CAAS;EAAG,GAAI;CAAQ,CAAA;AAChF;AAGA,SAAS,EAAS,EAAE,cAAW,GAAG,KAAmD;CACnF,OAAO,kBAAC,EAAS,UAAV;EAAmB,WAAW,EAAG,sBAAsB,CAAS;EAAG,GAAI;CAAQ,CAAA;AACxF;AAEA,SAAS,EAAW,EAClB,cACA,gBAAa,GACb,GAAG,KAC0C;CAC7C,OACE,kBAAC,EAAS,YAAV;EACE,WAAW,EAAG,qBAAqB,CAAS;EAChC;EACZ,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAgD;CAC7E,OACE,kBAAC,EAAS,OAAV;EACE,WAAW,EACT,2EACA,uEACA,uGACA,kEACA,8DACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAgD;CAC7E,OAAO,kBAAC,EAAS,OAAV;EAAgB,WAAW,EAAG,CAAS;EAAG,GAAI;CAAQ,CAAA;AAC/D;AAGA,SAAS,EAAS,EAAE,cAAW,GAAG,KAAmD;CACnF,OAAO,kBAAC,EAAS,UAAV;EAAmB,WAAW,EAAG,0BAA0B,CAAS;EAAG,GAAI;CAAQ,CAAA;AAC5F;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAgD;CAC7E,OAAO,kBAAC,EAAS,OAAV;EAAgB,WAAW,EAAG,iBAAiB,CAAS;EAAG,GAAI;CAAQ,CAAA;AAChF;AAEA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAqD;CACvF,OACE,kBAAC,EAAS,YAAV;EACE,WAAW,EAAG,sDAAsD,CAAS;EAC7E,GAAI;CACL,CAAA;AAEL;AAGA,IAAM,IAAc,EAClB,qEACA,mEACA,2CACA,mEACF;AAEA,SAAS,EAAK,EAAE,cAAW,GAAG,KAA+C;CAC3E,OAAO,kBAAC,EAAS,MAAV;EAAe,WAAW,EAAG,GAAa,CAAS;EAAG,GAAI;CAAQ,CAAA;AAC3E;AAGA,SAAS,EAAS,EAAE,cAAW,GAAG,KAAmD;CACnF,OAAO,kBAAC,EAAS,UAAV;EAAmB,WAAW,EAAG,GAAa,gBAAgB,CAAS;EAAG,GAAI;CAAQ,CAAA;AAC/F;AAEA,SAAS,EAAa,EAAE,cAAW,GAAG,KAAuD;CAC3F,OAAO,kBAAC,EAAS,cAAV;EAAuB,WAAW,EAAG,GAAa,CAAS;EAAG,GAAI;CAAQ,CAAA;AACnF;AAGA,SAAS,EAAsB,EAC7B,cACA,GAAG,KACqD;CACxD,OACE,kBAAC,EAAS,uBAAV;EACE,WAAW,EACT,+FACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAqD;CACvF,OAAO,kBAAC,EAAS,YAAV;EAAqB,WAAW,EAAG,iBAAiB,CAAS;EAAG,GAAI;CAAQ,CAAA;AACrF;AAEA,SAAS,EAAU,EAAE,cAAW,GAAG,KAAoD;CACrF,OAAO,kBAAC,EAAS,WAAV;EAAoB,WAAW,EAAG,GAAa,CAAS;EAAG,GAAI;CAAQ,CAAA;AAChF;AAGA,SAAS,EAAmB,EAC1B,cACA,GAAG,KACkD;CACrD,OACE,kBAAC,EAAS,oBAAV;EACE,WAAW,EACT,+FACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAe,EACtB,cACA,aACA,GAAG,KAC8C;CACjD,OACE,kBAAC,EAAS,gBAAV;EACE,WAAW,EAAG,GAAa,0CAA0C,CAAS;EAC9E,GAAI;YAFN,CAIG,GACD,kBAAC,GAAD;GAAc,eAAA;GAAY,WAAU;EAAmD,CAAA,CAChE;;AAE7B;AAGA,SAAS,EAAU,EAAE,cAAW,GAAG,KAAoD;CACrF,OACE,kBAAC,EAAS,WAAV;EACE,WAAW,EAAG,yCAAyC,CAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,IAAO;CAClB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}

package/dist/components/menu/index.d.ts

@@ -0,0 +1 @@
+export { Menu, Root, Trigger, Portal, Backdrop, Positioner, Popup, Arrow, Viewport, Group, GroupLabel, Item, LinkItem, CheckboxItem, CheckboxItemIndicator, RadioGroup, RadioItem, RadioItemIndicator, SubmenuRoot, SubmenuTrigger, Separator, Handle, createHandle, } from './Menu';

package/dist/components/menu/index.js

@@ -0,0 +1,2 @@
+import { Arrow as e, Backdrop as t, CheckboxItem as n, CheckboxItemIndicator as r, Group as i, GroupLabel as a, Handle as o, Item as s, LinkItem as c, Menu as l, Popup as u, Portal as d, Positioner as f, RadioGroup as p, RadioItem as m, RadioItemIndicator as h, Root as g, Separator as _, SubmenuRoot as v, SubmenuTrigger as y, Trigger as b, Viewport as x, createHandle as S } from "./Menu.js";
+export { e as Arrow, t as Backdrop, n as CheckboxItem, r as CheckboxItemIndicator, i as Group, a as GroupLabel, o as Handle, s as Item, c as LinkItem, l as Menu, u as Popup, d as Portal, f as Positioner, p as RadioGroup, m as RadioItem, h as RadioItemIndicator, g as Root, _ as Separator, v as SubmenuRoot, y as SubmenuTrigger, b as Trigger, x as Viewport, S as createHandle };

package/dist/components/menubar/Menubar.d.ts

@@ -0,0 +1,87 @@
+import { Menubar as BaseMenubar } from '@base-ui/react/menubar';
+import { Menu as BaseMenu } from '@base-ui/react/menu';
+import { ComponentProps } from 'react';
+/**
+ * Menubar — Material 3 styled wrapper over Base UI's headless Menubar.
+ * Behaviour/accessibility (roving focus across triggers, arrow-key navigation,
+ * hover-to-switch open menus, typeahead, submenus): Base UI
+ * (https://base-ui.com/react/components/menubar). The menubar package exports
+ * only the container; each menu inside is composed from `@base-ui/react/menu`
+ * parts, all wrapped here.
+ * Visuals: M3 — surface-container bar with full-shape text-button triggers
+ * (top-app-bar action anatomy), menus as surface-container at elevation 2,
+ * small (8px) corner, 48px label-large items with leading/trailing slots.
+ * Design ref: port/core/ui/components/top-app-bar + dropdown (see CLAUDE.md).
+ *
+ * Compound API:
+ *   <Menubar.Root>
+ *     <Menubar.Menu>
+ *       <Menubar.Trigger>File</Menubar.Trigger>
+ *       <Menubar.Portal>
+ *         <Menubar.Positioner>
+ *           <Menubar.Popup>
+ *             <Menubar.Item>New…</Menubar.Item>
+ *             <Menubar.Separator />
+ *             <Menubar.SubmenuRoot>
+ *               <Menubar.SubmenuTrigger>Share</Menubar.SubmenuTrigger>
+ *               …
+ *             </Menubar.SubmenuRoot>
+ *           </Menubar.Popup>
+ *         </Menubar.Positioner>
+ *       </Menubar.Portal>
+ *     </Menubar.Menu>
+ *   </Menubar.Root>
+ */
+/** The horizontal bar that hosts the menus (M3: surface-container strip). */
+declare function Root({ className, ...props }: ComponentProps<typeof BaseMenubar>): import("react").JSX.Element;
+/** One menu inside the bar — Base UI Menu.Root (renders no element itself). */
+declare const Menu: <Payload>(props: BaseMenu.Root.Props<Payload>) => import("react").JSX.Element;
+declare const Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').ContextMenuPortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const SubmenuRoot: typeof BaseMenu.SubmenuRoot;
+/** Menubar button (M3 text-button anatomy: 40px, full shape, label-large). */
+declare function Trigger({ className, ...props }: ComponentProps<typeof BaseMenu.Trigger>): import("react").JSX.Element;
+/** Invisible click-capture layer behind an open menu (menus use no scrim). */
+declare function Backdrop({ className, ...props }: ComponentProps<typeof BaseMenu.Backdrop>): import("react").JSX.Element;
+declare function Positioner({ className, ...props }: ComponentProps<typeof BaseMenu.Positioner>): import("react").JSX.Element;
+declare function Popup({ className, ...props }: ComponentProps<typeof BaseMenu.Popup>): import("react").JSX.Element;
+/** Optional pointer toward the anchor — rarely used for menus; unstyled hook point. */
+declare function Arrow({ className, ...props }: ComponentProps<typeof BaseMenu.Arrow>): import("react").JSX.Element;
+declare function Group({ className, ...props }: ComponentProps<typeof BaseMenu.Group>): import("react").JSX.Element;
+declare function GroupLabel({ className, ...props }: ComponentProps<typeof BaseMenu.GroupLabel>): import("react").JSX.Element;
+declare function Item({ className, ...props }: ComponentProps<typeof BaseMenu.Item>): import("react").JSX.Element;
+/** Menu item that renders an anchor element. */
+declare function LinkItem({ className, ...props }: ComponentProps<typeof BaseMenu.LinkItem>): import("react").JSX.Element;
+declare function CheckboxItem({ className, ...props }: ComponentProps<typeof BaseMenu.CheckboxItem>): import("react").JSX.Element;
+/** Leading 20px slot for the check mark — pass `keepMounted` to hold alignment. */
+declare function CheckboxItemIndicator({ className, ...props }: ComponentProps<typeof BaseMenu.CheckboxItemIndicator>): import("react").JSX.Element;
+declare function RadioGroup({ className, ...props }: ComponentProps<typeof BaseMenu.RadioGroup>): import("react").JSX.Element;
+declare function RadioItem({ className, ...props }: ComponentProps<typeof BaseMenu.RadioItem>): import("react").JSX.Element;
+/** Leading 20px slot for the selected mark — pass `keepMounted` to hold alignment. */
+declare function RadioItemIndicator({ className, ...props }: ComponentProps<typeof BaseMenu.RadioItemIndicator>): import("react").JSX.Element;
+/** Item that opens a nested menu; renders a trailing chevron automatically. */
+declare function SubmenuTrigger({ className, children, ...props }: ComponentProps<typeof BaseMenu.SubmenuTrigger>): import("react").JSX.Element;
+/** M3 divider between menu sections. */
+declare function Separator({ className, ...props }: ComponentProps<typeof BaseMenu.Separator>): import("react").JSX.Element;
+export declare const Menubar: {
+    Root: typeof Root;
+    Menu: <Payload>(props: BaseMenu.Root.Props<Payload>) => import("react").JSX.Element;
+    Trigger: typeof Trigger;
+    Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').ContextMenuPortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Backdrop: typeof Backdrop;
+    Positioner: typeof Positioner;
+    Popup: typeof Popup;
+    Arrow: typeof Arrow;
+    Group: typeof Group;
+    GroupLabel: typeof GroupLabel;
+    Item: typeof Item;
+    LinkItem: typeof LinkItem;
+    CheckboxItem: typeof CheckboxItem;
+    CheckboxItemIndicator: typeof CheckboxItemIndicator;
+    RadioGroup: typeof RadioGroup;
+    RadioItem: typeof RadioItem;
+    RadioItemIndicator: typeof RadioItemIndicator;
+    SubmenuRoot: typeof BaseMenu.SubmenuRoot;
+    SubmenuTrigger: typeof SubmenuTrigger;
+    Separator: typeof Separator;
+};
+export { Root, Menu, Trigger, Portal, Backdrop, Positioner, Popup, Arrow, Group, GroupLabel, Item, LinkItem, CheckboxItem, CheckboxItemIndicator, RadioGroup, RadioItem, RadioItemIndicator, SubmenuRoot, SubmenuTrigger, Separator, };