@duestel/ui 0.1.0

package/dist/components/menubar/Menubar.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";
+import { Menubar as a } from "@base-ui/react/menubar";
+//#region src/components/menubar/Menubar.tsx
+function o({ className: t, ...r }) {
+	return /* @__PURE__ */ n(a, {
+		className: e("flex w-fit items-center gap-1 rounded-full bg-surface-container p-1 text-on-surface", "data-[orientation=vertical]:flex-col data-[orientation=vertical]:rounded-medium", "data-[orientation=vertical]:items-stretch", t),
+		...r
+	});
+}
+var s = i.Root, c = i.Portal, l = i.SubmenuRoot;
+function u({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Trigger, {
+		className: e("inline-flex h-10 cursor-pointer select-none items-center justify-center rounded-full px-4", "text-label-large text-on-surface outline-none transition-colors", "hover:bg-on-surface/[0.08] data-[popup-open]:bg-secondary-container data-[popup-open]:text-on-secondary-container", "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary", "disabled:cursor-not-allowed disabled:opacity-[0.38]", 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, ...r }) {
+	return /* @__PURE__ */ n(i.Positioner, {
+		align: "start",
+		sideOffset: 4,
+		className: e("z-50 outline-none", t),
+		...r
+	});
+}
+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.Group, {
+		className: e("flex flex-col", t),
+		...r
+	});
+}
+function g({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.GroupLabel, {
+		className: e("px-3 py-2 text-label-small text-on-surface-variant", t),
+		...r
+	});
+}
+var _ = 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 v({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Item, {
+		className: e(_, t),
+		...r
+	});
+}
+function y({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.LinkItem, {
+		className: e(_, "no-underline", t),
+		...r
+	});
+}
+function b({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.CheckboxItem, {
+		className: e(_, t),
+		...r
+	});
+}
+function x({ 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 S({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.RadioGroup, {
+		className: e("flex flex-col", t),
+		...r
+	});
+}
+function C({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.RadioItem, {
+		className: e(_, t),
+		...r
+	});
+}
+function w({ 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 T({ className: a, children: o, ...s }) {
+	return /* @__PURE__ */ r(i.SubmenuTrigger, {
+		className: e(_, "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 E({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Separator, {
+		className: e("my-2 h-px shrink-0 bg-outline-variant", t),
+		...r
+	});
+}
+var D = {
+	Root: o,
+	Menu: s,
+	Trigger: u,
+	Portal: c,
+	Backdrop: d,
+	Positioner: f,
+	Popup: p,
+	Arrow: m,
+	Group: h,
+	GroupLabel: g,
+	Item: v,
+	LinkItem: y,
+	CheckboxItem: b,
+	CheckboxItemIndicator: x,
+	RadioGroup: S,
+	RadioItem: C,
+	RadioItemIndicator: w,
+	SubmenuRoot: l,
+	SubmenuTrigger: T,
+	Separator: E
+};
+//#endregion
+export { m as Arrow, d as Backdrop, b as CheckboxItem, x as CheckboxItemIndicator, h as Group, g as GroupLabel, v as Item, y as LinkItem, s as Menu, D as Menubar, p as Popup, c as Portal, f as Positioner, S as RadioGroup, C as RadioItem, w as RadioItemIndicator, o as Root, E as Separator, l as SubmenuRoot, T as SubmenuTrigger, u as Trigger };
+
+//# sourceMappingURL=Menubar.js.map

package/dist/components/menubar/Menubar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menubar.js","names":[],"sources":["../../../src/components/menubar/Menubar.tsx"],"sourcesContent":["import { Menubar as BaseMenubar } from '@base-ui/react/menubar'\nimport { 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 * Menubar — Material 3 styled wrapper over Base UI's headless Menubar.\n * Behaviour/accessibility (roving focus across triggers, arrow-key navigation,\n * hover-to-switch open menus, typeahead, submenus): Base UI\n * (https://base-ui.com/react/components/menubar). The menubar package exports\n * only the container; each menu inside is composed from `@base-ui/react/menu`\n * parts, all wrapped here.\n * Visuals: M3 — surface-container bar with full-shape text-button triggers\n * (top-app-bar action anatomy), menus as surface-container at elevation 2,\n * small (8px) corner, 48px label-large items with leading/trailing slots.\n * Design ref: port/core/ui/components/top-app-bar + dropdown (see CLAUDE.md).\n *\n * Compound API:\n *   <Menubar.Root>\n *     <Menubar.Menu>\n *       <Menubar.Trigger>File</Menubar.Trigger>\n *       <Menubar.Portal>\n *         <Menubar.Positioner>\n *           <Menubar.Popup>\n *             <Menubar.Item>New…</Menubar.Item>\n *             <Menubar.Separator />\n *             <Menubar.SubmenuRoot>\n *               <Menubar.SubmenuTrigger>Share</Menubar.SubmenuTrigger>\n *               …\n *             </Menubar.SubmenuRoot>\n *           </Menubar.Popup>\n *         </Menubar.Positioner>\n *       </Menubar.Portal>\n *     </Menubar.Menu>\n *   </Menubar.Root>\n */\n\n/** The horizontal bar that hosts the menus (M3: surface-container strip). */\nfunction Root({ className, ...props }: ComponentProps<typeof BaseMenubar>) {\n  return (\n    <BaseMenubar\n      className={cn(\n        'flex w-fit items-center gap-1 rounded-full bg-surface-container p-1 text-on-surface',\n        'data-[orientation=vertical]:flex-col data-[orientation=vertical]:rounded-medium',\n        'data-[orientation=vertical]:items-stretch',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** One menu inside the bar — Base UI Menu.Root (renders no element itself). */\nconst Menu = BaseMenu.Root\nconst Portal = BaseMenu.Portal\nconst SubmenuRoot = BaseMenu.SubmenuRoot\n\n/** Menubar button (M3 text-button anatomy: 40px, full shape, label-large). */\nfunction Trigger({ className, ...props }: ComponentProps<typeof BaseMenu.Trigger>) {\n  return (\n    <BaseMenu.Trigger\n      className={cn(\n        'inline-flex h-10 cursor-pointer select-none items-center justify-center rounded-full px-4',\n        'text-label-large text-on-surface outline-none transition-colors',\n        'hover:bg-on-surface/[0.08] data-[popup-open]:bg-secondary-container data-[popup-open]:text-on-secondary-container',\n        'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary',\n        'disabled:cursor-not-allowed disabled:opacity-[0.38]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Invisible click-capture layer behind an open 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({ className, ...props }: ComponentProps<typeof BaseMenu.Positioner>) {\n  return (\n    <BaseMenu.Positioner\n      align=\"start\"\n      sideOffset={4}\n      className={cn('z-50 outline-none', className)}\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\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 Menubar = {\n  Root,\n  Menu,\n  Trigger,\n  Portal,\n  Backdrop,\n  Positioner,\n  Popup,\n  Arrow,\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}\nexport {\n  Root,\n  Menu,\n  Trigger,\n  Portal,\n  Backdrop,\n  Positioner,\n  Popup,\n  Arrow,\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}\n"],"mappings":";;;;;;AAwCA,SAAS,EAAK,EAAE,cAAW,GAAG,KAA6C;CACzE,OACE,kBAAC,GAAD;EACE,WAAW,EACT,uFACA,mFACA,6CACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,IAAM,IAAO,EAAS,MAChB,IAAS,EAAS,QAClB,IAAc,EAAS;AAG7B,SAAS,EAAQ,EAAE,cAAW,GAAG,KAAkD;CACjF,OACE,kBAAC,EAAS,SAAV;EACE,WAAW,EACT,6FACA,mEACA,qHACA,yFACA,uDACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;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,EAAE,cAAW,GAAG,KAAqD;CACvF,OACE,kBAAC,EAAS,YAAV;EACE,OAAM;EACN,YAAY;EACZ,WAAW,EAAG,qBAAqB,CAAS;EAC5C,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;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,IAAU;CACrB;CACA,MAAA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}

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

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

package/dist/components/menubar/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, Item as o, LinkItem as s, Menu as c, Menubar 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 } from "./Menubar.js";
+export { e as Arrow, t as Backdrop, n as CheckboxItem, r as CheckboxItemIndicator, i as Group, a as GroupLabel, o as Item, s as LinkItem, c as Menu, l as Menubar, 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 };

package/dist/components/meter/Meter.d.ts

@@ -0,0 +1,33 @@
+import { Meter as BaseMeter } from '@base-ui/react/meter';
+import { ComponentProps } from 'react';
+/**
+ * Meter — Material 3 styled wrapper over Base UI's headless Meter.
+ * Behaviour/accessibility (role="meter", aria-valuenow/-min/-max, formatted
+ * value text): Base UI (https://base-ui.com/react/components/meter).
+ * Visuals: M3 linear progress-indicator anatomy — 4px rounded track in
+ * surface-container-high with a primary active indicator, label-large label
+ * and label-medium value text.
+ * Design ref: port/core/ui/components/progress-bar (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI:
+ *   <Meter.Root value={65}>
+ *     <Meter.Label>Storage used</Meter.Label>
+ *     <Meter.Value />
+ *     <Meter.Track>
+ *       <Meter.Indicator />
+ *     </Meter.Track>
+ *   </Meter.Root>
+ */
+declare function Root({ className, ...props }: ComponentProps<typeof BaseMeter.Root>): import("react").JSX.Element;
+declare function Label({ className, ...props }: ComponentProps<typeof BaseMeter.Label>): import("react").JSX.Element;
+declare function Value({ className, ...props }: ComponentProps<typeof BaseMeter.Value>): import("react").JSX.Element;
+declare function Track({ className, ...props }: ComponentProps<typeof BaseMeter.Track>): import("react").JSX.Element;
+declare function Indicator({ className, ...props }: ComponentProps<typeof BaseMeter.Indicator>): import("react").JSX.Element;
+export declare const Meter: {
+    Root: typeof Root;
+    Label: typeof Label;
+    Value: typeof Value;
+    Track: typeof Track;
+    Indicator: typeof Indicator;
+};
+export { Root, Label, Value, Track, Indicator };

package/dist/components/meter/Meter.js

@@ -0,0 +1,45 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Meter as n } from "@base-ui/react/meter";
+//#region src/components/meter/Meter.tsx
+function r({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Root, {
+		className: e("flex w-full flex-col gap-2 text-on-surface", r),
+		...i
+	});
+}
+function i({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Label, {
+		className: e("text-label-large text-on-surface", r),
+		...i
+	});
+}
+function a({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Value, {
+		className: e("text-label-medium text-on-surface-variant tabular-nums", r),
+		...i
+	});
+}
+function o({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Track, {
+		className: e("relative h-1 w-full overflow-hidden rounded-full bg-surface-container-high", r),
+		...i
+	});
+}
+function s({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Indicator, {
+		className: e("absolute rounded-full bg-primary transition-[width] duration-500 ease-out", r),
+		...i
+	});
+}
+var c = {
+	Root: r,
+	Label: i,
+	Value: a,
+	Track: o,
+	Indicator: s
+};
+//#endregion
+export { s as Indicator, i as Label, c as Meter, r as Root, o as Track, a as Value };
+
+//# sourceMappingURL=Meter.js.map

package/dist/components/meter/Meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Meter.js","names":[],"sources":["../../../src/components/meter/Meter.tsx"],"sourcesContent":["import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Meter — Material 3 styled wrapper over Base UI's headless Meter.\n * Behaviour/accessibility (role=\"meter\", aria-valuenow/-min/-max, formatted\n * value text): Base UI (https://base-ui.com/react/components/meter).\n * Visuals: M3 linear progress-indicator anatomy — 4px rounded track in\n * surface-container-high with a primary active indicator, label-large label\n * and label-medium value text.\n * Design ref: port/core/ui/components/progress-bar (see CLAUDE.md).\n *\n * Compound API mirrors Base UI:\n *   <Meter.Root value={65}>\n *     <Meter.Label>Storage used</Meter.Label>\n *     <Meter.Value />\n *     <Meter.Track>\n *       <Meter.Indicator />\n *     </Meter.Track>\n *   </Meter.Root>\n */\n\nfunction Root({ className, ...props }: ComponentProps<typeof BaseMeter.Root>) {\n  return (\n    <BaseMeter.Root\n      className={cn('flex w-full flex-col gap-2 text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nfunction Label({ className, ...props }: ComponentProps<typeof BaseMeter.Label>) {\n  return (\n    <BaseMeter.Label\n      className={cn('text-label-large text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nfunction Value({ className, ...props }: ComponentProps<typeof BaseMeter.Value>) {\n  return (\n    <BaseMeter.Value\n      className={cn('text-label-medium text-on-surface-variant tabular-nums', className)}\n      {...props}\n    />\n  )\n}\n\nfunction Track({ className, ...props }: ComponentProps<typeof BaseMeter.Track>) {\n  return (\n    <BaseMeter.Track\n      className={cn(\n        'relative h-1 w-full overflow-hidden rounded-full bg-surface-container-high',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction Indicator({ className, ...props }: ComponentProps<typeof BaseMeter.Indicator>) {\n  return (\n    <BaseMeter.Indicator\n      className={cn(\n        'absolute rounded-full bg-primary transition-[width] duration-500 ease-out',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport const Meter = { Root, Label, Value, Track, Indicator }\nexport { Root, Label, Value, Track, Indicator }\n"],"mappings":";;;;AAwBA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAgD;CAC5E,OACE,kBAAC,EAAU,MAAX;EACE,WAAW,EAAG,8CAA8C,CAAS;EACrE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAiD;CAC9E,OACE,kBAAC,EAAU,OAAX;EACE,WAAW,EAAG,oCAAoC,CAAS;EAC3D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAiD;CAC9E,OACE,kBAAC,EAAU,OAAX;EACE,WAAW,EAAG,0DAA0D,CAAS;EACjF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAiD;CAC9E,OACE,kBAAC,EAAU,OAAX;EACE,WAAW,EACT,8EACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAU,EAAE,cAAW,GAAG,KAAqD;CACtF,OACE,kBAAC,EAAU,WAAX;EACE,WAAW,EACT,6EACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,IAAQ;CAAE;CAAM;CAAO;CAAO;CAAO;AAAU"}

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

@@ -0,0 +1 @@
+export { Meter, Root, Label, Value, Track, Indicator } from './Meter';

package/dist/components/meter/index.js

@@ -0,0 +1,2 @@
+import { Indicator as e, Label as t, Meter as n, Root as r, Track as i, Value as a } from "./Meter.js";
+export { e as Indicator, t as Label, n as Meter, r as Root, i as Track, a as Value };

package/dist/components/navigation-menu/NavigationMenu.d.ts

@@ -0,0 +1,81 @@
+import { NavigationMenu as BaseNavigationMenu } from '@base-ui/react/navigation-menu';
+import { ComponentProps } from 'react';
+/**
+ * NavigationMenu — Material 3 styled wrapper over Base UI's headless
+ * Navigation Menu. Behaviour/accessibility (hover/click open, keyboard
+ * navigation, content teleported into a shared animated popup):
+ * Base UI (https://base-ui.com/react/components/navigation-menu).
+ * Visuals: M3 navigation anatomy — surface-container bar with pill (full
+ * radius) label-large items and secondary-container active indicator, plus an
+ * elevated medium-corner menu surface for the flyout panel.
+ * Design ref: port/core/ui/components/navigation-bar + top-app-bar (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI:
+ *   <NavigationMenu.Root>
+ *     <NavigationMenu.List>
+ *       <NavigationMenu.Item>
+ *         <NavigationMenu.Trigger>
+ *           Products <NavigationMenu.Icon />
+ *         </NavigationMenu.Trigger>
+ *         <NavigationMenu.Content>
+ *           <NavigationMenu.Link href="…">…</NavigationMenu.Link>
+ *         </NavigationMenu.Content>
+ *       </NavigationMenu.Item>
+ *     </NavigationMenu.List>
+ *     <NavigationMenu.Portal>
+ *       <NavigationMenu.Backdrop />
+ *       <NavigationMenu.Positioner sideOffset={8}>
+ *         <NavigationMenu.Popup>
+ *           <NavigationMenu.Arrow />
+ *           <NavigationMenu.Viewport />
+ *         </NavigationMenu.Popup>
+ *       </NavigationMenu.Positioner>
+ *     </NavigationMenu.Portal>
+ *   </NavigationMenu.Root>
+ */
+declare const Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').NavigationMenuPortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare function Root({ className, ...props }: ComponentProps<typeof BaseNavigationMenu.Root>): import("react").JSX.Element;
+/** The menu bar itself — M3 surface-container pill, like the navigation bar. */
+declare function List({ className, ...props }: ComponentProps<typeof BaseNavigationMenu.List>): import("react").JSX.Element;
+declare function Item({ className, ...props }: ComponentProps<typeof BaseNavigationMenu.Item>): import("react").JSX.Element;
+/** Pill-shaped bar item; active indicator uses M3 secondary-container. */
+declare function Trigger({ className, ...props }: ComponentProps<typeof BaseNavigationMenu.Trigger>): import("react").JSX.Element;
+/** Trailing chevron inside a Trigger; rotates while the popup is open. */
+declare function Icon({ className, children, ...props }: ComponentProps<typeof BaseNavigationMenu.Icon>): import("react").JSX.Element;
+/**
+ * Per-item panel content; teleported into the shared popup viewport and
+ * cross-faded with a directional slide when the active item changes.
+ */
+declare function Content({ className, ...props }: ComponentProps<typeof BaseNavigationMenu.Content>): import("react").JSX.Element;
+/**
+ * Navigation link — M3 list-row recipe for panel content. For top-level bar
+ * usage, override with Trigger-like pill classes. `data-active` marks the
+ * current page (secondary-container indicator).
+ */
+declare function Link({ className, ...props }: ComponentProps<typeof BaseNavigationMenu.Link>): import("react").JSX.Element;
+/** Invisible click-capture layer behind the popup (M3 menus use no scrim). */
+declare function Backdrop({ className, ...props }: ComponentProps<typeof BaseNavigationMenu.Backdrop>): import("react").JSX.Element;
+/** Tracks the active trigger; CSS vars drive the sliding reposition. */
+declare function Positioner({ className, ...props }: ComponentProps<typeof BaseNavigationMenu.Positioner>): import("react").JSX.Element;
+/** Elevated M3 menu surface that animates its size to fit the active content. */
+declare function Popup({ className, ...props }: ComponentProps<typeof BaseNavigationMenu.Popup>): import("react").JSX.Element;
+/** Clips the active Content while panels cross-fade inside the popup. */
+declare function Viewport({ className, ...props }: ComponentProps<typeof BaseNavigationMenu.Viewport>): import("react").JSX.Element;
+/** Pointer toward the active trigger; fill matches the popup surface. */
+declare function Arrow({ className, children, ...props }: ComponentProps<typeof BaseNavigationMenu.Arrow>): import("react").JSX.Element;
+export declare const NavigationMenu: {
+    Root: typeof Root;
+    List: typeof List;
+    Item: typeof Item;
+    Trigger: typeof Trigger;
+    Icon: typeof Icon;
+    Content: typeof Content;
+    Link: typeof Link;
+    Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').NavigationMenuPortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Backdrop: typeof Backdrop;
+    Positioner: typeof Positioner;
+    Popup: typeof Popup;
+    Viewport: typeof Viewport;
+    Arrow: typeof Arrow;
+};
+export { Root, List, Item, Trigger, Icon, Content, Link, Portal, Backdrop, Positioner, Popup, Viewport, Arrow, };

package/dist/components/navigation-menu/NavigationMenu.js

@@ -0,0 +1,112 @@
+import { cn as e } from "../../lib/cn.js";
+import { ChevronDown as t } from "lucide-react";
+import { jsx as n } from "react/jsx-runtime";
+import { NavigationMenu as r } from "@base-ui/react/navigation-menu";
+//#region src/components/navigation-menu/NavigationMenu.tsx
+var i = r.Portal;
+function a({ className: t, ...i }) {
+	return /* @__PURE__ */ n(r.Root, {
+		className: e("relative", t),
+		...i
+	});
+}
+function o({ className: t, ...i }) {
+	return /* @__PURE__ */ n(r.List, {
+		className: e("relative m-0 flex list-none items-center gap-1 rounded-full bg-surface-container p-1 text-on-surface", t),
+		...i
+	});
+}
+function s({ className: t, ...i }) {
+	return /* @__PURE__ */ n(r.Item, {
+		className: e("flex", t),
+		...i
+	});
+}
+function c({ className: t, ...i }) {
+	return /* @__PURE__ */ n(r.Trigger, {
+		className: e("group flex h-10 cursor-pointer select-none items-center gap-1.5 rounded-full px-4", "text-label-large text-on-surface transition-colors", "hover:bg-on-surface/[0.08]", "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary", "data-[popup-open]:bg-secondary-container data-[popup-open]:text-on-secondary-container", "disabled:cursor-not-allowed disabled:opacity-[0.38]", t),
+		...i
+	});
+}
+function l({ className: i, children: a, ...o }) {
+	return /* @__PURE__ */ n(r.Icon, {
+		className: e("flex shrink-0 items-center justify-center transition-transform duration-200 ease-out", "data-[popup-open]:rotate-180", i),
+		...o,
+		children: a ?? /* @__PURE__ */ n(t, {
+			"aria-hidden": !0,
+			className: "size-4"
+		})
+	});
+}
+function u({ className: t, ...i }) {
+	return /* @__PURE__ */ n(r.Content, {
+		className: e("w-max min-w-[260px] max-w-[calc(100vw-2.5rem)] p-2", "transition-[opacity,translate] duration-300 ease-out", "data-[ending-style]:opacity-0 data-[starting-style]:opacity-0", "data-[ending-style]:absolute data-[ending-style]:left-0 data-[ending-style]:top-0", "data-[starting-style]:data-[activation-direction=left]:-translate-x-1/2", "data-[starting-style]:data-[activation-direction=right]:translate-x-1/2", "data-[ending-style]:data-[activation-direction=left]:translate-x-1/2", "data-[ending-style]:data-[activation-direction=right]:-translate-x-1/2", t),
+		...i
+	});
+}
+function d({ className: t, ...i }) {
+	return /* @__PURE__ */ n(r.Link, {
+		className: e("block rounded-small p-3 text-on-surface no-underline transition-colors", "hover:bg-on-surface/[0.08]", "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary", "data-[active]:bg-secondary-container data-[active]:text-on-secondary-container", t),
+		...i
+	});
+}
+function f({ className: t, ...i }) {
+	return /* @__PURE__ */ n(r.Backdrop, {
+		className: e("fixed inset-0 z-40", t),
+		...i
+	});
+}
+function p({ className: t, ...i }) {
+	return /* @__PURE__ */ n(r.Positioner, {
+		className: e("absolute z-50 flex h-(--positioner-height) w-(--positioner-width) max-w-(--available-width)", "transition-[top,left,right,bottom] duration-300 ease-out", "data-[instant]:transition-none", t),
+		...i
+	});
+}
+function m({ className: t, ...i }) {
+	return /* @__PURE__ */ n(r.Popup, {
+		className: e("relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin)", "rounded-medium bg-surface-container text-on-surface shadow-mm-2", "transition-[opacity,scale,width,height] duration-300 ease-out focus:outline-none", "data-[ending-style]:scale-90 data-[ending-style]:opacity-0", "data-[starting-style]:scale-90 data-[starting-style]:opacity-0", t),
+		...i
+	});
+}
+function h({ className: t, ...i }) {
+	return /* @__PURE__ */ n(r.Viewport, {
+		className: e("relative h-full w-full overflow-hidden rounded-[inherit]", t),
+		...i
+	});
+}
+function g({ className: t, children: i, ...a }) {
+	return /* @__PURE__ */ n(r.Arrow, {
+		className: e("flex transition-[left,right] duration-300 ease-out", "data-[side=bottom]:-top-2", "data-[side=top]:-bottom-2 data-[side=top]:rotate-180", "data-[side=left]:-right-3 data-[side=left]:rotate-90", "data-[side=right]:-left-3 data-[side=right]:-rotate-90", t),
+		...a,
+		children: i ?? /* @__PURE__ */ n("svg", {
+			width: "20",
+			height: "8",
+			viewBox: "0 0 20 8",
+			fill: "none",
+			"aria-hidden": !0,
+			children: /* @__PURE__ */ n("path", {
+				d: "M0 8 L10 0 L20 8 Z",
+				className: "fill-surface-container"
+			})
+		})
+	});
+}
+var _ = {
+	Root: a,
+	List: o,
+	Item: s,
+	Trigger: c,
+	Icon: l,
+	Content: u,
+	Link: d,
+	Portal: i,
+	Backdrop: f,
+	Positioner: p,
+	Popup: m,
+	Viewport: h,
+	Arrow: g
+};
+//#endregion
+export { g as Arrow, f as Backdrop, u as Content, l as Icon, s as Item, d as Link, o as List, _ as NavigationMenu, m as Popup, i as Portal, p as Positioner, a as Root, c as Trigger, h as Viewport };
+
+//# sourceMappingURL=NavigationMenu.js.map

package/dist/components/navigation-menu/NavigationMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationMenu.js","names":[],"sources":["../../../src/components/navigation-menu/NavigationMenu.tsx"],"sourcesContent":["import { NavigationMenu as BaseNavigationMenu } from '@base-ui/react/navigation-menu'\nimport { ChevronDown } from 'lucide-react'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * NavigationMenu — Material 3 styled wrapper over Base UI's headless\n * Navigation Menu. Behaviour/accessibility (hover/click open, keyboard\n * navigation, content teleported into a shared animated popup):\n * Base UI (https://base-ui.com/react/components/navigation-menu).\n * Visuals: M3 navigation anatomy — surface-container bar with pill (full\n * radius) label-large items and secondary-container active indicator, plus an\n * elevated medium-corner menu surface for the flyout panel.\n * Design ref: port/core/ui/components/navigation-bar + top-app-bar (see CLAUDE.md).\n *\n * Compound API mirrors Base UI:\n *   <NavigationMenu.Root>\n *     <NavigationMenu.List>\n *       <NavigationMenu.Item>\n *         <NavigationMenu.Trigger>\n *           Products <NavigationMenu.Icon />\n *         </NavigationMenu.Trigger>\n *         <NavigationMenu.Content>\n *           <NavigationMenu.Link href=\"…\">…</NavigationMenu.Link>\n *         </NavigationMenu.Content>\n *       </NavigationMenu.Item>\n *     </NavigationMenu.List>\n *     <NavigationMenu.Portal>\n *       <NavigationMenu.Backdrop />\n *       <NavigationMenu.Positioner sideOffset={8}>\n *         <NavigationMenu.Popup>\n *           <NavigationMenu.Arrow />\n *           <NavigationMenu.Viewport />\n *         </NavigationMenu.Popup>\n *       </NavigationMenu.Positioner>\n *     </NavigationMenu.Portal>\n *   </NavigationMenu.Root>\n */\n\nconst Portal = BaseNavigationMenu.Portal\n\nfunction Root({ className, ...props }: ComponentProps<typeof BaseNavigationMenu.Root>) {\n  return <BaseNavigationMenu.Root className={cn('relative', className)} {...props} />\n}\n\n/** The menu bar itself — M3 surface-container pill, like the navigation bar. */\nfunction List({ className, ...props }: ComponentProps<typeof BaseNavigationMenu.List>) {\n  return (\n    <BaseNavigationMenu.List\n      className={cn(\n        'relative m-0 flex list-none items-center gap-1 rounded-full bg-surface-container p-1 text-on-surface',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction Item({ className, ...props }: ComponentProps<typeof BaseNavigationMenu.Item>) {\n  return <BaseNavigationMenu.Item className={cn('flex', className)} {...props} />\n}\n\n/** Pill-shaped bar item; active indicator uses M3 secondary-container. */\nfunction Trigger({ className, ...props }: ComponentProps<typeof BaseNavigationMenu.Trigger>) {\n  return (\n    <BaseNavigationMenu.Trigger\n      className={cn(\n        'group flex h-10 cursor-pointer select-none items-center gap-1.5 rounded-full px-4',\n        'text-label-large text-on-surface transition-colors',\n        'hover:bg-on-surface/[0.08]',\n        'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary',\n        'data-[popup-open]:bg-secondary-container data-[popup-open]:text-on-secondary-container',\n        'disabled:cursor-not-allowed disabled:opacity-[0.38]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Trailing chevron inside a Trigger; rotates while the popup is open. */\nfunction Icon({ className, children, ...props }: ComponentProps<typeof BaseNavigationMenu.Icon>) {\n  return (\n    <BaseNavigationMenu.Icon\n      className={cn(\n        'flex shrink-0 items-center justify-center transition-transform duration-200 ease-out',\n        'data-[popup-open]:rotate-180',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? <ChevronDown aria-hidden className=\"size-4\" />}\n    </BaseNavigationMenu.Icon>\n  )\n}\n\n/**\n * Per-item panel content; teleported into the shared popup viewport and\n * cross-faded with a directional slide when the active item changes.\n */\nfunction Content({ className, ...props }: ComponentProps<typeof BaseNavigationMenu.Content>) {\n  return (\n    <BaseNavigationMenu.Content\n      className={cn(\n        'w-max min-w-[260px] max-w-[calc(100vw-2.5rem)] p-2',\n        'transition-[opacity,translate] duration-300 ease-out',\n        'data-[ending-style]:opacity-0 data-[starting-style]:opacity-0',\n        'data-[ending-style]:absolute data-[ending-style]:left-0 data-[ending-style]:top-0',\n        'data-[starting-style]:data-[activation-direction=left]:-translate-x-1/2',\n        'data-[starting-style]:data-[activation-direction=right]:translate-x-1/2',\n        'data-[ending-style]:data-[activation-direction=left]:translate-x-1/2',\n        'data-[ending-style]:data-[activation-direction=right]:-translate-x-1/2',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Navigation link — M3 list-row recipe for panel content. For top-level bar\n * usage, override with Trigger-like pill classes. `data-active` marks the\n * current page (secondary-container indicator).\n */\nfunction Link({ className, ...props }: ComponentProps<typeof BaseNavigationMenu.Link>) {\n  return (\n    <BaseNavigationMenu.Link\n      className={cn(\n        'block rounded-small p-3 text-on-surface no-underline transition-colors',\n        'hover:bg-on-surface/[0.08]',\n        'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary',\n        'data-[active]:bg-secondary-container data-[active]:text-on-secondary-container',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Invisible click-capture layer behind the popup (M3 menus use no scrim). */\nfunction Backdrop({ className, ...props }: ComponentProps<typeof BaseNavigationMenu.Backdrop>) {\n  return <BaseNavigationMenu.Backdrop className={cn('fixed inset-0 z-40', className)} {...props} />\n}\n\n/** Tracks the active trigger; CSS vars drive the sliding reposition. */\nfunction Positioner({ className, ...props }: ComponentProps<typeof BaseNavigationMenu.Positioner>) {\n  return (\n    <BaseNavigationMenu.Positioner\n      className={cn(\n        'absolute z-50 flex h-(--positioner-height) w-(--positioner-width) max-w-(--available-width)',\n        'transition-[top,left,right,bottom] duration-300 ease-out',\n        'data-[instant]:transition-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Elevated M3 menu surface that animates its size to fit the active content. */\nfunction Popup({ className, ...props }: ComponentProps<typeof BaseNavigationMenu.Popup>) {\n  return (\n    <BaseNavigationMenu.Popup\n      className={cn(\n        'relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin)',\n        'rounded-medium bg-surface-container text-on-surface shadow-mm-2',\n        'transition-[opacity,scale,width,height] duration-300 ease-out focus:outline-none',\n        'data-[ending-style]:scale-90 data-[ending-style]:opacity-0',\n        'data-[starting-style]:scale-90 data-[starting-style]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Clips the active Content while panels cross-fade inside the popup. */\nfunction Viewport({ className, ...props }: ComponentProps<typeof BaseNavigationMenu.Viewport>) {\n  return (\n    <BaseNavigationMenu.Viewport\n      className={cn('relative h-full w-full overflow-hidden rounded-[inherit]', className)}\n      {...props}\n    />\n  )\n}\n\n/** Pointer toward the active trigger; fill matches the popup surface. */\nfunction Arrow({ className, children, ...props }: ComponentProps<typeof BaseNavigationMenu.Arrow>) {\n  return (\n    <BaseNavigationMenu.Arrow\n      className={cn(\n        'flex transition-[left,right] duration-300 ease-out',\n        'data-[side=bottom]:-top-2',\n        'data-[side=top]:-bottom-2 data-[side=top]:rotate-180',\n        'data-[side=left]:-right-3 data-[side=left]:rotate-90',\n        'data-[side=right]:-left-3 data-[side=right]:-rotate-90',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? (\n        <svg width=\"20\" height=\"8\" viewBox=\"0 0 20 8\" fill=\"none\" aria-hidden>\n          <path d=\"M0 8 L10 0 L20 8 Z\" className=\"fill-surface-container\" />\n        </svg>\n      )}\n    </BaseNavigationMenu.Arrow>\n  )\n}\n\nexport const NavigationMenu = {\n  Root,\n  List,\n  Item,\n  Trigger,\n  Icon,\n  Content,\n  Link,\n  Portal,\n  Backdrop,\n  Positioner,\n  Popup,\n  Viewport,\n  Arrow,\n}\nexport {\n  Root,\n  List,\n  Item,\n  Trigger,\n  Icon,\n  Content,\n  Link,\n  Portal,\n  Backdrop,\n  Positioner,\n  Popup,\n  Viewport,\n  Arrow,\n}\n"],"mappings":";;;;;AAwCA,IAAM,IAAS,EAAmB;AAElC,SAAS,EAAK,EAAE,cAAW,GAAG,KAAyD;CACrF,OAAO,kBAAC,EAAmB,MAApB;EAAyB,WAAW,EAAG,YAAY,CAAS;EAAG,GAAI;CAAQ,CAAA;AACpF;AAGA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAyD;CACrF,OACE,kBAAC,EAAmB,MAApB;EACE,WAAW,EACT,wGACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAyD;CACrF,OAAO,kBAAC,EAAmB,MAApB;EAAyB,WAAW,EAAG,QAAQ,CAAS;EAAG,GAAI;CAAQ,CAAA;AAChF;AAGA,SAAS,EAAQ,EAAE,cAAW,GAAG,KAA4D;CAC3F,OACE,kBAAC,EAAmB,SAApB;EACE,WAAW,EACT,qFACA,sDACA,8BACA,yFACA,0FACA,uDACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAK,EAAE,cAAW,aAAU,GAAG,KAAyD;CAC/F,OACE,kBAAC,EAAmB,MAApB;EACE,WAAW,EACT,wFACA,gCACA,CACF;EACA,GAAI;YAEH,KAAY,kBAAC,GAAD;GAAa,eAAA;GAAY,WAAU;EAAU,CAAA;CACnC,CAAA;AAE7B;AAMA,SAAS,EAAQ,EAAE,cAAW,GAAG,KAA4D;CAC3F,OACE,kBAAC,EAAmB,SAApB;EACE,WAAW,EACT,sDACA,wDACA,iEACA,qFACA,2EACA,2EACA,wEACA,0EACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAyD;CACrF,OACE,kBAAC,EAAmB,MAApB;EACE,WAAW,EACT,0EACA,8BACA,yFACA,kFACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAS,EAAE,cAAW,GAAG,KAA6D;CAC7F,OAAO,kBAAC,EAAmB,UAApB;EAA6B,WAAW,EAAG,sBAAsB,CAAS;EAAG,GAAI;CAAQ,CAAA;AAClG;AAGA,SAAS,EAAW,EAAE,cAAW,GAAG,KAA+D;CACjG,OACE,kBAAC,EAAmB,YAApB;EACE,WAAW,EACT,+FACA,4DACA,kCACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAM,EAAE,cAAW,GAAG,KAA0D;CACvF,OACE,kBAAC,EAAmB,OAApB;EACE,WAAW,EACT,6EACA,mEACA,oFACA,8DACA,kEACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAS,EAAE,cAAW,GAAG,KAA6D;CAC7F,OACE,kBAAC,EAAmB,UAApB;EACE,WAAW,EAAG,4DAA4D,CAAS;EACnF,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAM,EAAE,cAAW,aAAU,GAAG,KAA0D;CACjG,OACE,kBAAC,EAAmB,OAApB;EACE,WAAW,EACT,sDACA,6BACA,wDACA,wDACA,0DACA,CACF;EACA,GAAI;YAEH,KACC,kBAAC,OAAD;GAAK,OAAM;GAAK,QAAO;GAAI,SAAQ;GAAW,MAAK;GAAO,eAAA;aACxD,kBAAC,QAAD;IAAM,GAAE;IAAqB,WAAU;GAA0B,CAAA;EAC9D,CAAA;CAEiB,CAAA;AAE9B;AAEA,IAAa,IAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}

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

@@ -0,0 +1 @@
+export { NavigationMenu, Root, List, Item, Trigger, Icon, Content, Link, Portal, Backdrop, Positioner, Popup, Viewport, Arrow, } from './NavigationMenu';

package/dist/components/navigation-menu/index.js

@@ -0,0 +1,2 @@
+import { Arrow as e, Backdrop as t, Content as n, Icon as r, Item as i, Link as a, List as o, NavigationMenu as s, Popup as c, Portal as l, Positioner as u, Root as d, Trigger as f, Viewport as p } from "./NavigationMenu.js";
+export { e as Arrow, t as Backdrop, n as Content, r as Icon, i as Item, a as Link, o as List, s as NavigationMenu, c as Popup, l as Portal, u as Positioner, d as Root, f as Trigger, p as Viewport };

package/dist/components/number-field/NumberField.d.ts

@@ -0,0 +1,53 @@
+import { NumberField as BaseNumberField } from '@base-ui/react/number-field';
+import { ComponentProps } from 'react';
+/**
+ * NumberField — Material 3 styled wrapper over Base UI's headless Number Field.
+ * Behaviour/accessibility (spinbutton semantics, locale-aware parsing/formatting,
+ * pointer scrubbing, wheel + keyboard stepping): Base UI
+ * (https://base-ui.com/react/components/number-field).
+ * Visuals: M3 outlined text field anatomy — 56px field box, extra-small corner,
+ * outline border (primary on focus), body-large input text, on-surface-variant
+ * stepper icons with state layers.
+ * Design ref: port/core/ui/components/text-field (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI:
+ *   <NumberField.Root defaultValue={100}>
+ *     <NumberField.ScrubArea>
+ *       <label>Amount</label>
+ *       <NumberField.ScrubAreaCursor />
+ *     </NumberField.ScrubArea>
+ *     <NumberField.Group>
+ *       <NumberField.Decrement />
+ *       <NumberField.Input />
+ *       <NumberField.Increment />
+ *     </NumberField.Group>
+ *   </NumberField.Root>
+ */
+declare function Root({ className, ...props }: ComponentProps<typeof BaseNumberField.Root>): import("react").JSX.Element;
+/**
+ * The visual field box (M3 outlined text field container): outline border,
+ * extra-small corner, primary border + ring while the input inside has focus.
+ */
+declare function Group({ className, ...props }: ComponentProps<typeof BaseNumberField.Group>): import("react").JSX.Element;
+/** Stepper button that decreases the value; renders a minus icon by default. */
+declare function Decrement({ className, children, ...props }: ComponentProps<typeof BaseNumberField.Decrement>): import("react").JSX.Element;
+/** Stepper button that increases the value; renders a plus icon by default. */
+declare function Increment({ className, children, ...props }: ComponentProps<typeof BaseNumberField.Increment>): import("react").JSX.Element;
+declare function Input({ className, ...props }: ComponentProps<typeof BaseNumberField.Input>): import("react").JSX.Element;
+/**
+ * Click-and-drag area (usually wrapping the label) that scrubs the value
+ * horizontally, like a video-editing slider.
+ */
+declare function ScrubArea({ className, ...props }: ComponentProps<typeof BaseNumberField.ScrubArea>): import("react").JSX.Element;
+/** Virtual cursor shown while scrubbing; renders a horizontal-move icon by default. */
+declare function ScrubAreaCursor({ className, children, ...props }: ComponentProps<typeof BaseNumberField.ScrubAreaCursor>): import("react").JSX.Element;
+export declare const NumberField: {
+    Root: typeof Root;
+    Group: typeof Group;
+    Decrement: typeof Decrement;
+    Input: typeof Input;
+    Increment: typeof Increment;
+    ScrubArea: typeof ScrubArea;
+    ScrubAreaCursor: typeof ScrubAreaCursor;
+};
+export { Root, Group, Decrement, Input, Increment, ScrubArea, ScrubAreaCursor };

package/dist/components/number-field/NumberField.js

@@ -0,0 +1,72 @@
+import { cn as e } from "../../lib/cn.js";
+import { Minus as t, MoveHorizontal as n, Plus as r } from "lucide-react";
+import { jsx as i } from "react/jsx-runtime";
+import { NumberField as a } from "@base-ui/react/number-field";
+//#region src/components/number-field/NumberField.tsx
+function o({ className: t, ...n }) {
+	return /* @__PURE__ */ i(a.Root, {
+		className: e("flex flex-col items-start gap-1 text-on-surface", t),
+		...n
+	});
+}
+function s({ className: t, ...n }) {
+	return /* @__PURE__ */ i(a.Group, {
+		className: e("flex h-14 items-stretch overflow-hidden rounded-extra-small border border-outline bg-surface", "transition-colors hover:border-on-surface", "focus-within:border-primary focus-within:ring-1 focus-within:ring-primary focus-within:hover:border-primary", "data-[disabled]:pointer-events-none data-[disabled]:opacity-[0.38]", t),
+		...n
+	});
+}
+function c({ className: n, children: r, ...o }) {
+	return /* @__PURE__ */ i(a.Decrement, {
+		className: e("flex w-12 shrink-0 cursor-pointer items-center justify-center", "border-r border-outline-variant text-on-surface-variant transition-colors", "hover:bg-on-surface/[0.08] active:bg-on-surface/[0.12]", "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary", "disabled:cursor-not-allowed disabled:opacity-[0.38] disabled:hover:bg-transparent", n),
+		...o,
+		children: r ?? /* @__PURE__ */ i(t, {
+			"aria-hidden": !0,
+			className: "size-5"
+		})
+	});
+}
+function l({ className: t, children: n, ...o }) {
+	return /* @__PURE__ */ i(a.Increment, {
+		className: e("flex w-12 shrink-0 cursor-pointer items-center justify-center", "border-l border-outline-variant text-on-surface-variant transition-colors", "hover:bg-on-surface/[0.08] active:bg-on-surface/[0.12]", "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary", "disabled:cursor-not-allowed disabled:opacity-[0.38] disabled:hover:bg-transparent", t),
+		...o,
+		children: n ?? /* @__PURE__ */ i(r, {
+			"aria-hidden": !0,
+			className: "size-5"
+		})
+	});
+}
+function u({ className: t, ...n }) {
+	return /* @__PURE__ */ i(a.Input, {
+		className: e("h-full w-full min-w-0 bg-transparent px-3 text-center text-body-large tabular-nums", "text-on-surface placeholder:text-on-surface-variant focus:outline-none", t),
+		...n
+	});
+}
+function d({ className: t, ...n }) {
+	return /* @__PURE__ */ i(a.ScrubArea, {
+		className: e("cursor-ew-resize select-none text-label-medium text-on-surface-variant", t),
+		...n
+	});
+}
+function f({ className: t, children: r, ...o }) {
+	return /* @__PURE__ */ i(a.ScrubAreaCursor, {
+		className: e("text-on-surface drop-shadow-sm", t),
+		...o,
+		children: r ?? /* @__PURE__ */ i(n, {
+			"aria-hidden": !0,
+			className: "size-5"
+		})
+	});
+}
+var p = {
+	Root: o,
+	Group: s,
+	Decrement: c,
+	Input: u,
+	Increment: l,
+	ScrubArea: d,
+	ScrubAreaCursor: f
+};
+//#endregion
+export { c as Decrement, s as Group, l as Increment, u as Input, p as NumberField, o as Root, d as ScrubArea, f as ScrubAreaCursor };
+
+//# sourceMappingURL=NumberField.js.map