@duestel/ui 0.1.0

package/dist/components/command/Command.js

@@ -0,0 +1,90 @@
+import { cn as e } from "../../lib/cn.js";
+import { Search as t } from "lucide-react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Command as i } from "cmdk";
+//#region src/components/command/Command.tsx
+var a = "flex w-full max-w-xl flex-col overflow-hidden rounded-large bg-surface-container text-on-surface";
+function o({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i, {
+		className: e(a, t),
+		...r
+	});
+}
+function s({ className: a, ...o }) {
+	return /* @__PURE__ */ r("div", {
+		className: "flex h-14 shrink-0 items-center gap-3 border-b border-outline-variant px-4",
+		children: [/* @__PURE__ */ n(t, {
+			"aria-hidden": !0,
+			className: "size-5 shrink-0 text-on-surface-variant"
+		}), /* @__PURE__ */ n(i.Input, {
+			className: e("h-full w-full min-w-0 flex-1 bg-transparent text-body-large text-on-surface", "outline-none placeholder:text-on-surface-variant", "disabled:cursor-not-allowed disabled:opacity-[0.38]", a),
+			...o
+		})]
+	});
+}
+function c({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.List, {
+		className: e("max-h-80 overflow-y-auto overscroll-contain py-2 outline-none", t),
+		...r
+	});
+}
+function l({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Empty, {
+		className: e("py-6 text-center text-body-medium text-on-surface-variant", t),
+		...r
+	});
+}
+function u({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Group, {
+		className: e("[&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:py-1", "[&_[cmdk-group-heading]]:text-label-small [&_[cmdk-group-heading]]:text-on-surface-variant", t),
+		...r
+	});
+}
+function d({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Item, {
+		className: e("flex min-h-12 cursor-pointer select-none items-center gap-3 px-4", "text-label-large text-on-surface outline-none transition-colors", "data-[selected=true]:bg-on-surface/[0.08]", "aria-disabled:cursor-not-allowed aria-disabled:opacity-[0.38]", t),
+		...r
+	});
+}
+function f({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Separator, {
+		className: e("my-2 h-px bg-outline-variant", t),
+		...r
+	});
+}
+function p({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Loading, {
+		className: e("px-4 py-2 text-body-small text-on-surface-variant", t),
+		...r
+	});
+}
+function m({ className: t, ...r }) {
+	return /* @__PURE__ */ n("span", {
+		className: e("ml-auto rounded-extra-small bg-surface-container-high px-1.5 py-0.5", "text-label-small text-on-surface-variant", t),
+		...r
+	});
+}
+function h({ className: t, overlayClassName: r, contentClassName: o, ...s }) {
+	return /* @__PURE__ */ n(i.Dialog, {
+		overlayClassName: e("fixed inset-0 z-40 bg-scrim", r),
+		contentClassName: e("fixed inset-x-0 top-[20vh] z-50 mx-auto w-full max-w-xl px-4", o),
+		className: e(a, "shadow-mm-3", t),
+		...s
+	});
+}
+var g = {
+	Root: o,
+	Input: s,
+	List: c,
+	Empty: l,
+	Group: u,
+	Item: d,
+	Separator: f,
+	Loading: p,
+	Shortcut: m,
+	Dialog: h
+};
+//#endregion
+export { g as Command, h as CommandDialog, l as Empty, u as Group, s as Input, d as Item, c as List, p as Loading, o as Root, f as Separator, m as Shortcut };
+
+//# sourceMappingURL=Command.js.map

package/dist/components/command/Command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Command.js","names":[],"sources":["../../../src/components/command/Command.tsx"],"sourcesContent":["import { Command as CommandPrimitive } from 'cmdk'\nimport { Search } from 'lucide-react'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Command — Material 3 styled wrapper over cmdk's headless command menu.\n * Behaviour/accessibility (filtering, keyboard navigation, combobox\n * semantics): cmdk (https://github.com/pacocoursey/cmdk).\n * Visuals: M3 search view + menu anatomy — surface-container, large corner,\n * 56dp search row with leading icon, 48dp label-large items with state\n * layers, label-small group subheaders.\n * Design refs: port/core/ui/components/search, dropdown (see CLAUDE.md).\n *\n * Compound API mirrors cmdk:\n *   <Command.Root>\n *     <Command.Input placeholder=\"Type a command…\" />\n *     <Command.List>\n *       <Command.Empty>No results found.</Command.Empty>\n *       <Command.Group heading=\"Suggestions\">\n *         <Command.Item value=\"calendar\" onSelect={…}>\n *           <Calendar /> Open calendar <Command.Shortcut>⌘K</Command.Shortcut>\n *         </Command.Item>\n *       </Command.Group>\n *       <Command.Separator />\n *     </Command.List>\n *   </Command.Root>\n *\n * For a modal palette, use <CommandDialog> (same children, minus Root).\n */\n\n/** Shared container look — applied by Root and reused by CommandDialog. */\nconst rootClasses =\n  'flex w-full max-w-xl flex-col overflow-hidden rounded-large bg-surface-container text-on-surface'\n\nfunction Root({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive>) {\n  return <CommandPrimitive className={cn(rootClasses, className)} {...props} />\n}\n\n/** Search row — M3 search view header: 56dp, leading icon, bare body-large input. */\nfunction Input({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div className=\"flex h-14 shrink-0 items-center gap-3 border-b border-outline-variant px-4\">\n      <Search aria-hidden className=\"size-5 shrink-0 text-on-surface-variant\" />\n      <CommandPrimitive.Input\n        className={cn(\n          'h-full w-full min-w-0 flex-1 bg-transparent text-body-large text-on-surface',\n          'outline-none placeholder:text-on-surface-variant',\n          'disabled:cursor-not-allowed disabled:opacity-[0.38]',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction List({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      className={cn(\n        'max-h-80 overflow-y-auto overscroll-contain py-2 outline-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Rendered by cmdk only when no item matches the query. */\nfunction Empty({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      className={cn(\n        'py-6 text-center text-body-medium text-on-surface-variant',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Group with optional `heading` — M3 list subheader: label-small, on-surface-variant. */\nfunction Group({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      className={cn(\n        '[&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:py-1',\n        '[&_[cmdk-group-heading]]:text-label-small [&_[cmdk-group-heading]]:text-on-surface-variant',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Command — M3 menu item: 48dp row, label-large, on-surface 8% selected layer. */\nfunction Item({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      className={cn(\n        'flex min-h-12 cursor-pointer select-none items-center gap-3 px-4',\n        'text-label-large text-on-surface outline-none transition-colors',\n        'data-[selected=true]:bg-on-surface/[0.08]',\n        'aria-disabled:cursor-not-allowed aria-disabled:opacity-[0.38]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction Separator({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      className={cn('my-2 h-px bg-outline-variant', className)}\n      {...props}\n    />\n  )\n}\n\n/** Render conditionally while resolving async items. */\nfunction Loading({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Loading>) {\n  return (\n    <CommandPrimitive.Loading\n      className={cn(\n        'px-4 py-2 text-body-small text-on-surface-variant',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Trailing keyboard-shortcut hint — not a cmdk part, just a styled span. */\nfunction Shortcut({ className, ...props }: ComponentProps<'span'>) {\n  return (\n    <span\n      className={cn(\n        'ml-auto rounded-extra-small bg-surface-container-high px-1.5 py-0.5',\n        'text-label-small text-on-surface-variant',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Modal command palette — cmdk's Radix-based Dialog with M3 chrome:\n * full-screen scrim overlay, palette centered horizontally at ~20vh.\n * `className` styles the inner Command root; children are the usual\n * Input/List parts. Pass `label` for the accessible name.\n */\nfunction CommandDialog({\n  className,\n  overlayClassName,\n  contentClassName,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Dialog>) {\n  return (\n    <CommandPrimitive.Dialog\n      overlayClassName={cn('fixed inset-0 z-40 bg-scrim', overlayClassName)}\n      contentClassName={cn(\n        'fixed inset-x-0 top-[20vh] z-50 mx-auto w-full max-w-xl px-4',\n        contentClassName,\n      )}\n      className={cn(rootClasses, 'shadow-mm-3', className)}\n      {...props}\n    />\n  )\n}\n\nexport const Command = {\n  Root,\n  Input,\n  List,\n  Empty,\n  Group,\n  Item,\n  Separator,\n  Loading,\n  Shortcut,\n  Dialog: CommandDialog,\n}\nexport {\n  Root,\n  Input,\n  List,\n  Empty,\n  Group,\n  Item,\n  Separator,\n  Loading,\n  Shortcut,\n  CommandDialog,\n}\n"],"mappings":";;;;;AAiCA,IAAM,IACJ;AAEF,SAAS,EAAK,EACZ,cACA,GAAG,KACuC;CAC1C,OAAO,kBAAC,GAAD;EAAkB,WAAW,EAAG,GAAa,CAAS;EAAG,GAAI;CAAQ,CAAA;AAC9E;AAGA,SAAS,EAAM,EACb,cACA,GAAG,KAC6C;CAChD,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GAAQ,eAAA;GAAY,WAAU;EAA2C,CAAA,GACzE,kBAAC,EAAiB,OAAlB;GACE,WAAW,EACT,+EACA,oDACA,uDACA,CACF;GACA,GAAI;EACL,CAAA,CACE;;AAET;AAEA,SAAS,EAAK,EACZ,cACA,GAAG,KAC4C;CAC/C,OACE,kBAAC,EAAiB,MAAlB;EACE,WAAW,EACT,iEACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAM,EACb,cACA,GAAG,KAC6C;CAChD,OACE,kBAAC,EAAiB,OAAlB;EACE,WAAW,EACT,6DACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAM,EACb,cACA,GAAG,KAC6C;CAChD,OACE,kBAAC,EAAiB,OAAlB;EACE,WAAW,EACT,+DACA,8FACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAK,EACZ,cACA,GAAG,KAC4C;CAC/C,OACE,kBAAC,EAAiB,MAAlB;EACE,WAAW,EACT,oEACA,mEACA,6CACA,iEACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAU,EACjB,cACA,GAAG,KACiD;CACpD,OACE,kBAAC,EAAiB,WAAlB;EACE,WAAW,EAAG,gCAAgC,CAAS;EACvD,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAQ,EACf,cACA,GAAG,KAC+C;CAClD,OACE,kBAAC,EAAiB,SAAlB;EACE,WAAW,EACT,qDACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAS,EAAE,cAAW,GAAG,KAAiC;CACjE,OACE,kBAAC,QAAD;EACE,WAAW,EACT,uEACA,4CACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAQA,SAAS,EAAc,EACrB,cACA,qBACA,qBACA,GAAG,KAC8C;CACjD,OACE,kBAAC,EAAiB,QAAlB;EACE,kBAAkB,EAAG,+BAA+B,CAAgB;EACpE,kBAAkB,EAChB,gEACA,CACF;EACA,WAAW,EAAG,GAAa,eAAe,CAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,IAAU;CACrB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,QAAQ;AACV"}

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

@@ -0,0 +1 @@
+export { Command, Root, Input, List, Empty, Group, Item, Separator, Loading, Shortcut, CommandDialog, } from './Command';

package/dist/components/command/index.js

@@ -0,0 +1,2 @@
+import { Command as e, CommandDialog as t, Empty as n, Group as r, Input as i, Item as a, List as o, Loading as s, Root as c, Separator as l, Shortcut as u } from "./Command.js";
+export { e as Command, t as CommandDialog, n as Empty, r as Group, i as Input, a as Item, o as List, s as Loading, c as Root, l as Separator, u as Shortcut };

package/dist/components/context-menu/ContextMenu.d.ts

@@ -0,0 +1,76 @@
+import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
+import { ComponentProps } from 'react';
+/**
+ * ContextMenu — Material 3 styled wrapper over Base UI's headless Context Menu.
+ * Behaviour/accessibility (right-click / long-press open, typeahead, roving
+ * focus, submenus): Base UI (https://base-ui.com/react/components/context-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:
+ *   <ContextMenu.Root>
+ *     <ContextMenu.Trigger>Right-click me</ContextMenu.Trigger>
+ *     <ContextMenu.Portal>
+ *       <ContextMenu.Positioner>
+ *         <ContextMenu.Popup>
+ *           <ContextMenu.Item>Copy</ContextMenu.Item>
+ *           <ContextMenu.Separator />
+ *           <ContextMenu.SubmenuRoot>
+ *             <ContextMenu.SubmenuTrigger>Share</ContextMenu.SubmenuTrigger>
+ *             …
+ *           </ContextMenu.SubmenuRoot>
+ *         </ContextMenu.Popup>
+ *       </ContextMenu.Positioner>
+ *     </ContextMenu.Portal>
+ *   </ContextMenu.Root>
+ */
+declare const Root: typeof BaseContextMenu.Root;
+declare const Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').ContextMenuPortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const SubmenuRoot: typeof BaseContextMenu.SubmenuRoot;
+/** Area that opens the menu on right click or long press. */
+declare function Trigger({ className, ...props }: ComponentProps<typeof BaseContextMenu.Trigger>): import("react").JSX.Element;
+/** Invisible click-capture layer behind the menu (context menus use no scrim). */
+declare function Backdrop({ className, ...props }: ComponentProps<typeof BaseContextMenu.Backdrop>): import("react").JSX.Element;
+declare function Positioner({ className, ...props }: ComponentProps<typeof BaseContextMenu.Positioner>): import("react").JSX.Element;
+declare function Popup({ className, ...props }: ComponentProps<typeof BaseContextMenu.Popup>): import("react").JSX.Element;
+/** Optional pointer toward the anchor — rarely used for menus; unstyled hook point. */
+declare function Arrow({ className, ...props }: ComponentProps<typeof BaseContextMenu.Arrow>): import("react").JSX.Element;
+declare function Group({ className, ...props }: ComponentProps<typeof BaseContextMenu.Group>): import("react").JSX.Element;
+declare function GroupLabel({ className, ...props }: ComponentProps<typeof BaseContextMenu.GroupLabel>): import("react").JSX.Element;
+declare function Item({ className, ...props }: ComponentProps<typeof BaseContextMenu.Item>): import("react").JSX.Element;
+/** Menu item that renders an anchor element. */
+declare function LinkItem({ className, ...props }: ComponentProps<typeof BaseContextMenu.LinkItem>): import("react").JSX.Element;
+declare function CheckboxItem({ className, ...props }: ComponentProps<typeof BaseContextMenu.CheckboxItem>): import("react").JSX.Element;
+/** Leading 20px slot for the check mark — pass `keepMounted` to hold alignment. */
+declare function CheckboxItemIndicator({ className, ...props }: ComponentProps<typeof BaseContextMenu.CheckboxItemIndicator>): import("react").JSX.Element;
+declare function RadioGroup({ className, ...props }: ComponentProps<typeof BaseContextMenu.RadioGroup>): import("react").JSX.Element;
+declare function RadioItem({ className, ...props }: ComponentProps<typeof BaseContextMenu.RadioItem>): import("react").JSX.Element;
+/** Leading 20px slot for the selected mark — pass `keepMounted` to hold alignment. */
+declare function RadioItemIndicator({ className, ...props }: ComponentProps<typeof BaseContextMenu.RadioItemIndicator>): import("react").JSX.Element;
+/** Item that opens a nested menu; renders a trailing chevron automatically. */
+declare function SubmenuTrigger({ className, children, ...props }: ComponentProps<typeof BaseContextMenu.SubmenuTrigger>): import("react").JSX.Element;
+/** M3 divider between menu sections. */
+declare function Separator({ className, ...props }: ComponentProps<typeof BaseContextMenu.Separator>): import("react").JSX.Element;
+export declare const ContextMenu: {
+    Root: typeof BaseContextMenu.Root;
+    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 BaseContextMenu.SubmenuRoot;
+    SubmenuTrigger: typeof SubmenuTrigger;
+    Separator: typeof Separator;
+};
+export { Root, Trigger, Portal, Backdrop, Positioner, Popup, Arrow, Group, GroupLabel, Item, LinkItem, CheckboxItem, CheckboxItemIndicator, RadioGroup, RadioItem, RadioItemIndicator, SubmenuRoot, SubmenuTrigger, Separator, };

package/dist/components/context-menu/ContextMenu.js

@@ -0,0 +1,132 @@
+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 { ContextMenu as i } from "@base-ui/react/context-menu";
+//#region src/components/context-menu/ContextMenu.tsx
+var a = i.Root, o = i.Portal, s = i.SubmenuRoot;
+function c({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Trigger, {
+		className: e("select-none", t),
+		...r
+	});
+}
+function l({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Backdrop, {
+		className: e("fixed inset-0 z-40", t),
+		...r
+	});
+}
+function u({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Positioner, {
+		className: e("z-50 outline-none", t),
+		...r
+	});
+}
+function d({ 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 f({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Arrow, {
+		className: e(t),
+		...r
+	});
+}
+function p({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Group, {
+		className: e("flex flex-col", t),
+		...r
+	});
+}
+function m({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.GroupLabel, {
+		className: e("px-3 py-2 text-label-small text-on-surface-variant", t),
+		...r
+	});
+}
+var h = 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 g({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Item, {
+		className: e(h, t),
+		...r
+	});
+}
+function _({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.LinkItem, {
+		className: e(h, "no-underline", t),
+		...r
+	});
+}
+function v({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.CheckboxItem, {
+		className: e(h, t),
+		...r
+	});
+}
+function y({ 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 b({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.RadioGroup, {
+		className: e("flex flex-col", t),
+		...r
+	});
+}
+function x({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.RadioItem, {
+		className: e(h, t),
+		...r
+	});
+}
+function S({ 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 C({ className: a, children: o, ...s }) {
+	return /* @__PURE__ */ r(i.SubmenuTrigger, {
+		className: e(h, "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 w({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Separator, {
+		className: e("my-2 h-px shrink-0 bg-outline-variant", t),
+		...r
+	});
+}
+var T = {
+	Root: a,
+	Trigger: c,
+	Portal: o,
+	Backdrop: l,
+	Positioner: u,
+	Popup: d,
+	Arrow: f,
+	Group: p,
+	GroupLabel: m,
+	Item: g,
+	LinkItem: _,
+	CheckboxItem: v,
+	CheckboxItemIndicator: y,
+	RadioGroup: b,
+	RadioItem: x,
+	RadioItemIndicator: S,
+	SubmenuRoot: s,
+	SubmenuTrigger: C,
+	Separator: w
+};
+//#endregion
+export { f as Arrow, l as Backdrop, v as CheckboxItem, y as CheckboxItemIndicator, T as ContextMenu, p as Group, m as GroupLabel, g as Item, _ as LinkItem, d as Popup, o as Portal, u as Positioner, b as RadioGroup, x as RadioItem, S as RadioItemIndicator, a as Root, w as Separator, s as SubmenuRoot, C as SubmenuTrigger, c as Trigger };
+
+//# sourceMappingURL=ContextMenu.js.map

package/dist/components/context-menu/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","names":[],"sources":["../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu'\nimport { ChevronRight } from 'lucide-react'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * ContextMenu — Material 3 styled wrapper over Base UI's headless Context Menu.\n * Behaviour/accessibility (right-click / long-press open, typeahead, roving\n * focus, submenus): Base UI (https://base-ui.com/react/components/context-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 *   <ContextMenu.Root>\n *     <ContextMenu.Trigger>Right-click me</ContextMenu.Trigger>\n *     <ContextMenu.Portal>\n *       <ContextMenu.Positioner>\n *         <ContextMenu.Popup>\n *           <ContextMenu.Item>Copy</ContextMenu.Item>\n *           <ContextMenu.Separator />\n *           <ContextMenu.SubmenuRoot>\n *             <ContextMenu.SubmenuTrigger>Share</ContextMenu.SubmenuTrigger>\n *             …\n *           </ContextMenu.SubmenuRoot>\n *         </ContextMenu.Popup>\n *       </ContextMenu.Positioner>\n *     </ContextMenu.Portal>\n *   </ContextMenu.Root>\n */\n\nconst Root = BaseContextMenu.Root\nconst Portal = BaseContextMenu.Portal\nconst SubmenuRoot = BaseContextMenu.SubmenuRoot\n\n/** Area that opens the menu on right click or long press. */\nfunction Trigger({ className, ...props }: ComponentProps<typeof BaseContextMenu.Trigger>) {\n  return <BaseContextMenu.Trigger className={cn('select-none', className)} {...props} />\n}\n\n/** Invisible click-capture layer behind the menu (context menus use no scrim). */\nfunction Backdrop({ className, ...props }: ComponentProps<typeof BaseContextMenu.Backdrop>) {\n  return <BaseContextMenu.Backdrop className={cn('fixed inset-0 z-40', className)} {...props} />\n}\n\nfunction Positioner({ className, ...props }: ComponentProps<typeof BaseContextMenu.Positioner>) {\n  return (\n    <BaseContextMenu.Positioner className={cn('z-50 outline-none', className)} {...props} />\n  )\n}\n\nfunction Popup({ className, ...props }: ComponentProps<typeof BaseContextMenu.Popup>) {\n  return (\n    <BaseContextMenu.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 BaseContextMenu.Arrow>) {\n  return <BaseContextMenu.Arrow className={cn(className)} {...props} />\n}\n\nfunction Group({ className, ...props }: ComponentProps<typeof BaseContextMenu.Group>) {\n  return <BaseContextMenu.Group className={cn('flex flex-col', className)} {...props} />\n}\n\nfunction GroupLabel({ className, ...props }: ComponentProps<typeof BaseContextMenu.GroupLabel>) {\n  return (\n    <BaseContextMenu.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 BaseContextMenu.Item>) {\n  return <BaseContextMenu.Item className={cn(itemClasses, className)} {...props} />\n}\n\n/** Menu item that renders an anchor element. */\nfunction LinkItem({ className, ...props }: ComponentProps<typeof BaseContextMenu.LinkItem>) {\n  return (\n    <BaseContextMenu.LinkItem\n      className={cn(itemClasses, 'no-underline', className)}\n      {...props}\n    />\n  )\n}\n\nfunction CheckboxItem({ className, ...props }: ComponentProps<typeof BaseContextMenu.CheckboxItem>) {\n  return <BaseContextMenu.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 BaseContextMenu.CheckboxItemIndicator>) {\n  return (\n    <BaseContextMenu.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 BaseContextMenu.RadioGroup>) {\n  return <BaseContextMenu.RadioGroup className={cn('flex flex-col', className)} {...props} />\n}\n\nfunction RadioItem({ className, ...props }: ComponentProps<typeof BaseContextMenu.RadioItem>) {\n  return <BaseContextMenu.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 BaseContextMenu.RadioItemIndicator>) {\n  return (\n    <BaseContextMenu.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 BaseContextMenu.SubmenuTrigger>) {\n  return (\n    <BaseContextMenu.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    </BaseContextMenu.SubmenuTrigger>\n  )\n}\n\n/** M3 divider between menu sections. */\nfunction Separator({ className, ...props }: ComponentProps<typeof BaseContextMenu.Separator>) {\n  return (\n    <BaseContextMenu.Separator\n      className={cn('my-2 h-px shrink-0 bg-outline-variant', className)}\n      {...props}\n    />\n  )\n}\n\nexport const ContextMenu = {\n  Root,\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  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":"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"}

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

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

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

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

package/dist/components/data-table/DataTable.d.ts

@@ -0,0 +1,32 @@
+import { ColumnDef } from '@tanstack/react-table';
+/**
+ * DataTable — TanStack Table (https://tanstack.com/table) as the headless
+ * engine, the port Table family as the M3 skin. This is the recommended way
+ * to build data tables in this app; the bare Table parts remain for static
+ * layouts.
+ *
+ *   const columns: Array<ColumnDef<Row>> = [
+ *     { accessorKey: 'name', header: 'Name' },
+ *     { accessorKey: 'role', header: 'Role', enableSorting: false },
+ *   ]
+ *   <DataTable columns={columns} data={rows} pageSize={10} enableRowSelection />
+ *
+ * Sorting: sortable headers toggle asc/desc with M3 arrow affordances and
+ * aria-sort. `pageSize` adds the table footer (range label + Pagination).
+ * `enableRowSelection` injects a leading port-checkbox column with a
+ * select-all parent; selected rows tint secondary-container.
+ */
+type DataTableProps<TData> = {
+    columns: Array<ColumnDef<TData, any>>;
+    data: Array<TData>;
+    /** Rows per page; enables the pagination footer when set. */
+    pageSize?: number;
+    /** Leading checkbox column with select-all. */
+    enableRowSelection?: boolean;
+    /** Notified with the selected row data when selection changes. */
+    onRowSelectionChange?: (rows: Array<TData>) => void;
+    className?: string;
+};
+declare function DataTable<TData>({ columns, data, pageSize, enableRowSelection, onRowSelectionChange, className, }: DataTableProps<TData>): import("react").JSX.Element;
+export { DataTable };
+export type { ColumnDef };

package/dist/components/data-table/DataTable.js

@@ -0,0 +1,102 @@
+import { cn as e } from "../../lib/cn.js";
+import { Checkbox as t } from "../checkbox/Checkbox.js";
+import { Table as n } from "./Table.js";
+import { Pagination as r } from "../pagination/Pagination.js";
+import { ArrowDown as i, ArrowUp as a, ChevronsUpDown as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useMemo as l, useState as u } from "react";
+import { flexRender as d, getCoreRowModel as f, getPaginationRowModel as p, getSortedRowModel as m, useReactTable as h } from "@tanstack/react-table";
+//#region src/components/data-table/DataTable.tsx
+function g() {
+	return {
+		id: "select",
+		enableSorting: !1,
+		header: ({ table: e }) => /* @__PURE__ */ s(t, {
+			ariaLabel: "Select all rows",
+			checked: e.getIsAllRowsSelected(),
+			indeterminate: e.getIsSomeRowsSelected(),
+			onCheckedChange: () => e.toggleAllRowsSelected()
+		}),
+		cell: ({ row: e }) => /* @__PURE__ */ s(t, {
+			ariaLabel: "Select row",
+			checked: e.getIsSelected(),
+			disabled: !e.getCanSelect(),
+			onCheckedChange: (t) => e.toggleSelected(t === !0)
+		})
+	};
+}
+function _({ columns: t, data: _, pageSize: v, enableRowSelection: y = !1, onRowSelectionChange: b, className: x }) {
+	let [S, C] = u([]), [w, T] = u({}), E = h({
+		data: _,
+		columns: l(() => y ? [g(), ...t] : t, [t, y]),
+		state: {
+			sorting: S,
+			rowSelection: w
+		},
+		onSortingChange: C,
+		onRowSelectionChange: (e) => {
+			T((t) => {
+				let n = typeof e == "function" ? e(t) : e;
+				return b && queueMicrotask(() => b(E.getSelectedRowModel().rows.map((e) => e.original))), n;
+			});
+		},
+		enableRowSelection: y,
+		getCoreRowModel: f(),
+		getSortedRowModel: m(),
+		...v ? {
+			getPaginationRowModel: p(),
+			initialState: { pagination: { pageSize: v } }
+		} : {}
+	}), { pageIndex: D } = E.getState().pagination, O = E.getPrePaginationRowModel().rows.length;
+	return /* @__PURE__ */ c("div", {
+		className: e("flex flex-col gap-2", x),
+		children: [/* @__PURE__ */ c(n, { children: [/* @__PURE__ */ s(n.Head, { children: E.getHeaderGroups().map((t) => /* @__PURE__ */ s(n.Row, {
+			className: "odd:bg-transparent",
+			children: t.headers.map((t) => {
+				let r = t.column.getIsSorted();
+				return /* @__PURE__ */ s(n.HeaderCell, {
+					"aria-sort": r === "asc" ? "ascending" : r === "desc" ? "descending" : void 0,
+					children: t.isPlaceholder ? null : t.column.getCanSort() ? /* @__PURE__ */ c("button", {
+						type: "button",
+						onClick: t.column.getToggleSortingHandler(),
+						className: e("flex cursor-pointer items-center gap-1 rounded-extra-small", "transition-colors hover:text-on-surface", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"),
+						children: [d(t.column.columnDef.header, t.getContext()), r === "asc" ? /* @__PURE__ */ s(a, {
+							"aria-hidden": !0,
+							className: "size-4 text-on-surface"
+						}) : r === "desc" ? /* @__PURE__ */ s(i, {
+							"aria-hidden": !0,
+							className: "size-4 text-on-surface"
+						}) : /* @__PURE__ */ s(o, {
+							"aria-hidden": !0,
+							className: "size-4 text-on-surface-variant"
+						})]
+					}) : d(t.column.columnDef.header, t.getContext())
+				}, t.id);
+			})
+		}, t.id)) }), /* @__PURE__ */ s(n.Body, { children: E.getRowModel().rows.map((e) => /* @__PURE__ */ s(n.Row, {
+			className: e.getIsSelected() ? "bg-secondary-container/40 odd:bg-secondary-container/40" : void 0,
+			children: e.getVisibleCells().map((e) => /* @__PURE__ */ s(n.Cell, { children: d(e.column.columnDef.cell, e.getContext()) }, e.id))
+		}, e.id)) })] }), v !== void 0 && O > 0 && /* @__PURE__ */ c("div", {
+			className: "flex items-center justify-between px-4",
+			children: [/* @__PURE__ */ c("span", {
+				className: "text-body-small text-on-surface-variant",
+				children: [
+					D * v + 1,
+					"–",
+					Math.min((D + 1) * v, O),
+					" of",
+					" ",
+					O
+				]
+			}), /* @__PURE__ */ s(r, {
+				count: E.getPageCount(),
+				page: D + 1,
+				onPageChange: (e) => E.setPageIndex(e - 1)
+			})]
+		})]
+	});
+}
+//#endregion
+export { _ as DataTable };
+
+//# sourceMappingURL=DataTable.js.map

package/dist/components/data-table/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","names":[],"sources":["../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import { useMemo, useState } from 'react'\nimport {\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table'\nimport { ArrowDown, ArrowUp, ChevronsUpDown } from 'lucide-react'\nimport { Checkbox } from '#/components/checkbox'\nimport { Pagination } from '#/components/pagination'\nimport { cn } from '#/lib/cn'\nimport { Table } from './Table'\n\nimport type { ColumnDef, RowSelectionState, SortingState } from '@tanstack/react-table'\n\n/**\n * DataTable — TanStack Table (https://tanstack.com/table) as the headless\n * engine, the port Table family as the M3 skin. This is the recommended way\n * to build data tables in this app; the bare Table parts remain for static\n * layouts.\n *\n *   const columns: Array<ColumnDef<Row>> = [\n *     { accessorKey: 'name', header: 'Name' },\n *     { accessorKey: 'role', header: 'Role', enableSorting: false },\n *   ]\n *   <DataTable columns={columns} data={rows} pageSize={10} enableRowSelection />\n *\n * Sorting: sortable headers toggle asc/desc with M3 arrow affordances and\n * aria-sort. `pageSize` adds the table footer (range label + Pagination).\n * `enableRowSelection` injects a leading port-checkbox column with a\n * select-all parent; selected rows tint secondary-container.\n */\n\ntype DataTableProps<TData> = {\n  columns: Array<ColumnDef<TData, any>>\n  data: Array<TData>\n  /** Rows per page; enables the pagination footer when set. */\n  pageSize?: number\n  /** Leading checkbox column with select-all. */\n  enableRowSelection?: boolean\n  /** Notified with the selected row data when selection changes. */\n  onRowSelectionChange?: (rows: Array<TData>) => void\n  className?: string\n}\n\nfunction selectionColumn<TData>(): ColumnDef<TData, unknown> {\n  return {\n    id: 'select',\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        ariaLabel=\"Select all rows\"\n        checked={table.getIsAllRowsSelected()}\n        indeterminate={table.getIsSomeRowsSelected()}\n        onCheckedChange={() => table.toggleAllRowsSelected()}\n      />\n    ),\n    cell: ({ row }) => (\n      <Checkbox\n        ariaLabel=\"Select row\"\n        checked={row.getIsSelected()}\n        disabled={!row.getCanSelect()}\n        onCheckedChange={(checked) => row.toggleSelected(checked === true)}\n      />\n    ),\n  }\n}\n\nfunction DataTable<TData>({\n  columns,\n  data,\n  pageSize,\n  enableRowSelection = false,\n  onRowSelectionChange,\n  className,\n}: DataTableProps<TData>) {\n  const [sorting, setSorting] = useState<SortingState>([])\n  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})\n\n  const allColumns = useMemo(\n    () => (enableRowSelection ? [selectionColumn<TData>(), ...columns] : columns),\n    [columns, enableRowSelection],\n  )\n\n  const table = useReactTable({\n    data,\n    columns: allColumns,\n    state: { sorting, rowSelection },\n    onSortingChange: setSorting,\n    onRowSelectionChange: (updater) => {\n      setRowSelection((prev) => {\n        const next = typeof updater === 'function' ? updater(prev) : updater\n        if (onRowSelectionChange) {\n          queueMicrotask(() =>\n            onRowSelectionChange(\n              table\n                .getSelectedRowModel()\n                .rows.map((r) => r.original),\n            ),\n          )\n        }\n        return next\n      })\n    },\n    enableRowSelection,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    ...(pageSize\n      ? {\n          getPaginationRowModel: getPaginationRowModel(),\n          initialState: { pagination: { pageSize } },\n        }\n      : {}),\n  })\n\n  const { pageIndex } = table.getState().pagination\n  const totalRows = table.getPrePaginationRowModel().rows.length\n\n  return (\n    <div className={cn('flex flex-col gap-2', className)}>\n      <Table>\n        <Table.Head>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <Table.Row key={headerGroup.id} className=\"odd:bg-transparent\">\n              {headerGroup.headers.map((header) => {\n                const sortDir = header.column.getIsSorted()\n                return (\n                  <Table.HeaderCell\n                    key={header.id}\n                    aria-sort={\n                      sortDir === 'asc'\n                        ? 'ascending'\n                        : sortDir === 'desc'\n                          ? 'descending'\n                          : undefined\n                    }\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <button\n                        type=\"button\"\n                        onClick={header.column.getToggleSortingHandler()}\n                        className={cn(\n                          'flex cursor-pointer items-center gap-1 rounded-extra-small',\n                          'transition-colors hover:text-on-surface',\n                          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',\n                        )}\n                      >\n                        {flexRender(header.column.columnDef.header, header.getContext())}\n                        {sortDir === 'asc' ? (\n                          <ArrowUp aria-hidden className=\"size-4 text-on-surface\" />\n                        ) : sortDir === 'desc' ? (\n                          <ArrowDown aria-hidden className=\"size-4 text-on-surface\" />\n                        ) : (\n                          <ChevronsUpDown aria-hidden className=\"size-4 text-on-surface-variant\" />\n                        )}\n                      </button>\n                    ) : (\n                      flexRender(header.column.columnDef.header, header.getContext())\n                    )}\n                  </Table.HeaderCell>\n                )\n              })}\n            </Table.Row>\n          ))}\n        </Table.Head>\n        <Table.Body>\n          {table.getRowModel().rows.map((row) => (\n            <Table.Row\n              key={row.id}\n              className={\n                row.getIsSelected()\n                  ? 'bg-secondary-container/40 odd:bg-secondary-container/40'\n                  : undefined\n              }\n            >\n              {row.getVisibleCells().map((cell) => (\n                <Table.Cell key={cell.id}>\n                  {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                </Table.Cell>\n              ))}\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n\n      {pageSize !== undefined && totalRows > 0 && (\n        <div className=\"flex items-center justify-between px-4\">\n          <span className=\"text-body-small text-on-surface-variant\">\n            {pageIndex * pageSize + 1}–{Math.min((pageIndex + 1) * pageSize, totalRows)} of{' '}\n            {totalRows}\n          </span>\n          <Pagination\n            count={table.getPageCount()}\n            page={pageIndex + 1}\n            onPageChange={(page) => table.setPageIndex(page - 1)}\n          />\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { DataTable }\nexport type { ColumnDef }\n"],"mappings":";;;;;;;;;AA8CA,SAAS,IAAoD;CAC3D,OAAO;EACL,IAAI;EACJ,eAAe;EACf,SAAS,EAAE,eACT,kBAAC,GAAD;GACE,WAAU;GACV,SAAS,EAAM,qBAAqB;GACpC,eAAe,EAAM,sBAAsB;GAC3C,uBAAuB,EAAM,sBAAsB;EACpD,CAAA;EAEH,OAAO,EAAE,aACP,kBAAC,GAAD;GACE,WAAU;GACV,SAAS,EAAI,cAAc;GAC3B,UAAU,CAAC,EAAI,aAAa;GAC5B,kBAAkB,MAAY,EAAI,eAAe,MAAY,EAAI;EAClE,CAAA;CAEL;AACF;AAEA,SAAS,EAAiB,EACxB,YACA,SACA,aACA,wBAAqB,IACrB,yBACA,gBACwB;CACxB,IAAM,CAAC,GAAS,KAAc,EAAuB,CAAC,CAAC,GACjD,CAAC,GAAc,KAAmB,EAA4B,CAAC,CAAC,GAOhE,IAAQ,EAAc;EAC1B;EACA,SAPiB,QACV,IAAqB,CAAC,EAAuB,GAAG,GAAG,CAAO,IAAI,GACrE,CAAC,GAAS,CAAkB,CAKnB;EACT,OAAO;GAAE;GAAS;EAAa;EAC/B,iBAAiB;EACjB,uBAAuB,MAAY;GACjC,GAAiB,MAAS;IACxB,IAAM,IAAO,OAAO,KAAY,aAAa,EAAQ,CAAI,IAAI;IAU7D,OATI,KACF,qBACE,EACE,EACG,oBAAoB,EACpB,KAAK,KAAK,MAAM,EAAE,QAAQ,CAC/B,CACF,GAEK;GACT,CAAC;EACH;EACA;EACA,iBAAiB,EAAgB;EACjC,mBAAmB,EAAkB;EACrC,GAAI,IACA;GACE,uBAAuB,EAAsB;GAC7C,cAAc,EAAE,YAAY,EAAE,YAAS,EAAE;EAC3C,IACA,CAAC;CACP,CAAC,GAEK,EAAE,iBAAc,EAAM,SAAS,EAAE,YACjC,IAAY,EAAM,yBAAyB,EAAE,KAAK;CAExD,OACE,kBAAC,OAAD;EAAK,WAAW,EAAG,uBAAuB,CAAS;YAAnD,CACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,EAAM,MAAP,EAAA,UACG,EAAM,gBAAgB,EAAE,KAAK,MAC5B,kBAAC,EAAM,KAAP;GAAgC,WAAU;aACvC,EAAY,QAAQ,KAAK,MAAW;IACnC,IAAM,IAAU,EAAO,OAAO,YAAY;IAC1C,OACE,kBAAC,EAAM,YAAP;KAEE,aACE,MAAY,QACR,cACA,MAAY,SACV,eACA,KAAA;eAGP,EAAO,gBAAgB,OAAO,EAAO,OAAO,WAAW,IACtD,kBAAC,UAAD;MACE,MAAK;MACL,SAAS,EAAO,OAAO,wBAAwB;MAC/C,WAAW,EACT,8DACA,2CACA,sFACF;gBAPF,CASG,EAAW,EAAO,OAAO,UAAU,QAAQ,EAAO,WAAW,CAAC,GAC9D,MAAY,QACX,kBAAC,GAAD;OAAS,eAAA;OAAY,WAAU;MAA0B,CAAA,IACvD,MAAY,SACd,kBAAC,GAAD;OAAW,eAAA;OAAY,WAAU;MAA0B,CAAA,IAE3D,kBAAC,GAAD;OAAgB,eAAA;OAAY,WAAU;MAAkC,CAAA,CAEpE;UAER,EAAW,EAAO,OAAO,UAAU,QAAQ,EAAO,WAAW,CAAC;IAEhD,GA/BX,EAAO,EA+BI;GAEtB,CAAC;EACQ,GAvCK,EAAY,EAuCjB,CACZ,EACS,CAAA,GACZ,kBAAC,EAAM,MAAP,EAAA,UACG,EAAM,YAAY,EAAE,KAAK,KAAK,MAC7B,kBAAC,EAAM,KAAP;GAEE,WACE,EAAI,cAAc,IACd,4DACA,KAAA;aAGL,EAAI,gBAAgB,EAAE,KAAK,MAC1B,kBAAC,EAAM,MAAP,EAAA,UACG,EAAW,EAAK,OAAO,UAAU,MAAM,EAAK,WAAW,CAAC,EAC/C,GAFK,EAAK,EAEV,CACb;EACQ,GAZJ,EAAI,EAYA,CACZ,EACS,CAAA,CACP,EAAA,CAAA,GAEN,MAAa,KAAA,KAAa,IAAY,KACrC,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,QAAD;IAAM,WAAU;cAAhB;KACG,IAAY,IAAW;KAAE;KAAE,KAAK,KAAK,IAAY,KAAK,GAAU,CAAS;KAAE;KAAI;KAC/E;IACG;OACN,kBAAC,GAAD;IACE,OAAO,EAAM,aAAa;IAC1B,MAAM,IAAY;IAClB,eAAe,MAAS,EAAM,aAAa,IAAO,CAAC;GACpD,CAAA,CACE;IAEJ;;AAET"}

package/dist/components/data-table/Table.d.ts

@@ -0,0 +1,51 @@
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * Table — ported from port/core/ui/components/data-table (see CLAUDE.md):
+ * auto-layout table in an overflow-auto shell, surface-container header
+ * (body-medium, 500), zebra body rows (odd rows surface-container/50),
+ * 16/12px cell padding, body-medium cells on body-small base.
+ *
+ * Compound API mirrors the port:
+ *   <Table>
+ *     <Table.Head>
+ *       <Table.Row>
+ *         <Table.HeaderCell>Name</Table.HeaderCell>
+ *       </Table.Row>
+ *     </Table.Head>
+ *     <Table.Body>
+ *       <Table.Row>
+ *         <Table.Cell>…</Table.Cell>
+ *       </Table.Row>
+ *     </Table.Body>
+ *   </Table>
+ *
+ * <TextContainer width="w-[300px]"> wraps long cell copy at a fixed width.
+ * Cells accept `data` as an alternative to children (port API).
+ */
+declare function TableRoot({ className, children, ...props }: ComponentProps<'table'>): import("react").JSX.Element;
+declare function Head({ className, ...props }: ComponentProps<'thead'>): import("react").JSX.Element;
+declare function Body({ className, ...props }: ComponentProps<'tbody'>): import("react").JSX.Element;
+declare function Row({ className, ...props }: ComponentProps<'tr'>): import("react").JSX.Element;
+type CellProps = ComponentProps<'th'> & {
+    /** Cell content, port API alternative to children. */
+    data?: ReactNode;
+};
+declare function HeaderCell({ className, children, data, ...props }: CellProps): import("react").JSX.Element;
+declare function Cell({ className, children, data, ...props }: ComponentProps<'td'> & {
+    data?: ReactNode;
+}): import("react").JSX.Element;
+type TextContainerProps = ComponentProps<'div'> & {
+    /** Tailwind width class for the text column. @default 'w-[300px]' */
+    width?: string;
+    data?: ReactNode;
+};
+/** Fixed-width wrapper for long cell copy (port API). */
+declare function TextContainer({ className, children, data, width, ...props }: TextContainerProps): import("react").JSX.Element;
+export declare const Table: typeof TableRoot & {
+    Head: typeof Head;
+    Body: typeof Body;
+    Row: typeof Row;
+    HeaderCell: typeof HeaderCell;
+    Cell: typeof Cell;
+};
+export { TextContainer };

package/dist/components/data-table/Table.js

@@ -0,0 +1,69 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/data-table/Table.tsx
+function n({ className: n, children: r, ...i }) {
+	return /* @__PURE__ */ t("div", {
+		className: "overflow-auto",
+		children: /* @__PURE__ */ t("table", {
+			className: e("w-full table-auto overflow-clip text-body-small text-on-surface", n),
+			...i,
+			children: r
+		})
+	});
+}
+function r({ className: n, ...r }) {
+	return /* @__PURE__ */ t("thead", {
+		className: e("bg-surface-container text-body-medium", n),
+		...r
+	});
+}
+function i({ className: n, ...r }) {
+	return /* @__PURE__ */ t("tbody", {
+		className: e("text-body-medium", n),
+		...r
+	});
+}
+function a({ className: n, ...r }) {
+	return /* @__PURE__ */ t("tr", {
+		className: e("overflow-hidden odd:bg-surface-container/50", n),
+		...r
+	});
+}
+function o({ className: n, children: r, data: i, ...a }) {
+	return /* @__PURE__ */ t("th", {
+		className: e("min-w-max overflow-hidden px-4 py-3 text-left font-medium", n),
+		...a,
+		children: /* @__PURE__ */ t("div", {
+			className: "flex h-full w-full min-w-max flex-wrap",
+			children: r ?? i
+		})
+	});
+}
+function s({ className: n, children: r, data: i, ...a }) {
+	return /* @__PURE__ */ t("td", {
+		className: e("min-w-max px-4 py-3 pr-8", n),
+		...a,
+		children: /* @__PURE__ */ t("span", {
+			className: "flex sm:min-w-max",
+			children: r ?? i
+		})
+	});
+}
+function c({ className: n, children: r, data: i, width: a, ...o }) {
+	return /* @__PURE__ */ t("div", {
+		className: e("flex", a ?? "w-[300px]", n),
+		...o,
+		children: r ?? i
+	});
+}
+var l = Object.assign(n, {
+	Head: r,
+	Body: i,
+	Row: a,
+	HeaderCell: o,
+	Cell: s
+});
+//#endregion
+export { l as Table, c as TextContainer };
+
+//# sourceMappingURL=Table.js.map