@duestel/ui 0.1.0

package/README.md

@@ -0,0 +1,110 @@
+# @duestel/ui
+
+A **Material 3 (M3)** React component library — the Duestel design guide, packaged. Built on [Base UI](https://base-ui.com/) primitives, [Tailwind 4](https://tailwindcss.com/) (CSS-first tokens), and React 19.
+
+- 🎨 **40 components** — accordion → tooltip, all M3-spec'd
+- 🌗 **Theming** — light + dark out of the box, on M3 semantic color tokens
+- 🧩 **Headless behavior** — Base UI compound parts (`Root` / `Trigger` / `Panel` …) wrapped in M3 styling
+- 🔠 **Full M3 type scale, radii, elevation** — `text-title-medium`, `rounded-medium`, `shadow-mm-1`, …
+- 📦 **Tree-shakeable** — per-component subpath exports, `preserveModules` build
+
+> Published publicly under the `@duestel` scope — `npm install @duestel/ui`, no auth required.
+
+📖 **Docs & live component explorer:** [duestel.com/ui](https://duestel.com/ui/)
+
+## Install
+
+```bash
+npm install @duestel/ui
+# or
+bun add @duestel/ui
+```
+
+`react` and `react-dom` (^19) are **peer dependencies** — install them in your app.
+
+## Quick start
+
+Import the styles once at your app root, then use components anywhere.
+
+```tsx
+// app entry (e.g. main.tsx / layout.tsx)
+import '@duestel/ui/styles.css'
+```
+
+```tsx
+import { Button } from '@duestel/ui'
+
+export function App() {
+  return <Button.Root variant="filled">Click me</Button.Root>
+}
+```
+
+The components render with [Readex Pro](https://fonts.google.com/specimen/Readex+Pro). `styles.css` is a zero-config drop-in — it ships the M3 tokens plus exactly the Tailwind utilities the components use. **Load Readex Pro yourself** (e.g. via Google Fonts or `@fontsource/readex-pro`).
+
+## Imports
+
+Two import styles, both supported:
+
+```tsx
+// 1. Namespace barrel (the root export)
+import { Button, Accordion, DataTable } from '@duestel/ui'
+
+<Accordion.Root>
+  <Accordion.Item>…</Accordion.Item>
+</Accordion.Root>
+
+// 2. Per-component subpath (mirrors Base UI, best for tree-shaking)
+import { Root, Item, Trigger, Panel } from '@duestel/ui/accordion'
+```
+
+Shared compound part names (`Root`, `Trigger`, …) collide in the flat barrel, so the root export exposes each component as a **namespace object** (`Accordion.Root`). Reach bare parts via the namespace or the subpath import.
+
+## Theming
+
+Light is the default (`:root`); wrap any subtree in `.dark` for dark mode:
+
+```tsx
+<div className="dark">
+  {/* M3 dark tokens apply here */}
+</div>
+```
+
+Colors are driven by M3 semantic tokens — `primary` / `secondary` / `tertiary` / `error` (+ `on-*`, `*-container`), surfaces (`surface`, `surface-container-low`, `on-surface-variant`, …), `outline`, `scrim`. Override the `--m3-*` CSS variables to retheme.
+
+### Bring-your-own Tailwind build
+
+If your app already runs Tailwind 4 and you want the raw token layer (so component utilities compile in your pipeline), use `theme.css` instead of `styles.css`:
+
+```css
+/* your app's main css */
+@import '@duestel/ui/theme.css';
+@source '@duestel/ui';
+```
+
+This imports the M3 `@theme` token layer and tells Tailwind to scan the package for utilities. Load Readex Pro yourself in this mode too.
+
+## Components
+
+| | | | |
+|---|---|---|---|
+| accordion | alert-dialog | autocomplete | avatar |
+| badge | button | carousel | checkbox |
+| collapsible | combobox | command | context-menu |
+| data-table | date-picker | dialog | drawer |
+| form | hotkeys | menu | menubar |
+| meter | navigation-menu | number-field | otp-field |
+| pagination | popover | preview-card | progress |
+| radio | resizable | scroll-area | select |
+| separator | slider | switch | tabs |
+| toast | toggle | toolbar | tooltip |
+
+**Data tables** are powered by [TanStack Table](https://tanstack.com/table); **app forms** by [TanStack Form](https://tanstack.com/form) (`useAppForm` pre-binds M3 fields). Browse every component's stories, variants, and props at [duestel.com/ui](https://duestel.com/ui/).
+
+## Requirements
+
+- React 19+
+- A Tailwind 4 toolchain only if you use `theme.css`; `styles.css` needs none.
+
+## License
+
+UNLICENSED — © Duestel. Publicly available on npm; all rights reserved.

package/dist/components/accordion/Accordion.d.ts

@@ -0,0 +1,34 @@
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * Accordion — Material 3 styled wrapper over Base UI's headless Accordion.
+ * Behaviour/accessibility: Base UI (https://base-ui.com/react/components/accordion).
+ * Visuals: M3 surface, shape, type scale, and state layers (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI:
+ *   <Accordion.Root>
+ *     <Accordion.Item value="a">
+ *       <Accordion.Header>
+ *         <Accordion.Trigger>Title</Accordion.Trigger>
+ *       </Accordion.Header>
+ *       <Accordion.Panel>Content</Accordion.Panel>
+ *     </Accordion.Item>
+ *   </Accordion.Root>
+ */
+declare function Root({ className, ...props }: ComponentProps<typeof BaseAccordion.Root>): import("react").JSX.Element;
+declare function Item({ className, ...props }: ComponentProps<typeof BaseAccordion.Item>): import("react").JSX.Element;
+declare function Header({ className, ...props }: ComponentProps<typeof BaseAccordion.Header>): import("react").JSX.Element;
+type TriggerProps = ComponentProps<typeof BaseAccordion.Trigger> & {
+    /** Replace the trailing chevron with a custom node, or `null` to hide it. */
+    icon?: ReactNode;
+};
+declare function Trigger({ className, children, icon, ...props }: TriggerProps): import("react").JSX.Element;
+declare function Panel({ className, children, ...props }: ComponentProps<typeof BaseAccordion.Panel>): import("react").JSX.Element;
+export declare const Accordion: {
+    Root: typeof Root;
+    Item: typeof Item;
+    Header: typeof Header;
+    Trigger: typeof Trigger;
+    Panel: typeof Panel;
+};
+export { Root, Item, Header, Trigger, Panel };

package/dist/components/accordion/Accordion.js

@@ -0,0 +1,54 @@
+import { cn as e } from "../../lib/cn.js";
+import { Accordion as t } from "@base-ui/react/accordion";
+import { ChevronDown as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/accordion/Accordion.tsx
+function a({ className: n, ...i }) {
+	return /* @__PURE__ */ r(t.Root, {
+		className: e("flex w-full flex-col overflow-hidden rounded-medium bg-surface-container-low text-on-surface", n),
+		...i
+	});
+}
+function o({ className: n, ...i }) {
+	return /* @__PURE__ */ r(t.Item, {
+		className: e("border-b border-outline-variant last:border-b-0", n),
+		...i
+	});
+}
+function s({ className: n, ...i }) {
+	return /* @__PURE__ */ r(t.Header, {
+		className: e("m-0", n),
+		...i
+	});
+}
+function c({ className: a, children: o, icon: s, ...c }) {
+	return /* @__PURE__ */ i(t.Trigger, {
+		className: e("group flex w-full cursor-pointer items-center justify-between gap-4", "px-4 py-[18px] text-left text-title-medium text-on-surface", "transition-colors hover:bg-on-surface/[0.08]", "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary", "disabled:cursor-not-allowed disabled:opacity-[0.38]", a),
+		...c,
+		children: [o, s === void 0 ? /* @__PURE__ */ r(n, {
+			"aria-hidden": !0,
+			className: "size-5 shrink-0 text-on-surface-variant transition-transform duration-200 ease-out group-data-[panel-open]:rotate-180"
+		}) : s]
+	});
+}
+function l({ className: n, children: i, ...a }) {
+	return /* @__PURE__ */ r(t.Panel, {
+		className: e("h-(--accordion-panel-height) overflow-hidden transition-[height] duration-200 ease-out", "data-[ending-style]:h-0 data-[starting-style]:h-0", n),
+		...a,
+		children: /* @__PURE__ */ r("div", {
+			className: "px-4 pb-4 text-body-medium text-on-surface-variant",
+			children: i
+		})
+	});
+}
+var u = {
+	Root: a,
+	Item: o,
+	Header: s,
+	Trigger: c,
+	Panel: l
+};
+//#endregion
+export { u as Accordion, s as Header, o as Item, l as Panel, a as Root, c as Trigger };
+
+//# sourceMappingURL=Accordion.js.map

package/dist/components/accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","names":[],"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { ChevronDown } from 'lucide-react'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps, ReactNode } from 'react'\n\n/**\n * Accordion — Material 3 styled wrapper over Base UI's headless Accordion.\n * Behaviour/accessibility: Base UI (https://base-ui.com/react/components/accordion).\n * Visuals: M3 surface, shape, type scale, and state layers (see CLAUDE.md).\n *\n * Compound API mirrors Base UI:\n *   <Accordion.Root>\n *     <Accordion.Item value=\"a\">\n *       <Accordion.Header>\n *         <Accordion.Trigger>Title</Accordion.Trigger>\n *       </Accordion.Header>\n *       <Accordion.Panel>Content</Accordion.Panel>\n *     </Accordion.Item>\n *   </Accordion.Root>\n */\n\nfunction Root({ className, ...props }: ComponentProps<typeof BaseAccordion.Root>) {\n  return (\n    <BaseAccordion.Root\n      className={cn(\n        'flex w-full flex-col overflow-hidden rounded-medium bg-surface-container-low text-on-surface',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction Item({ className, ...props }: ComponentProps<typeof BaseAccordion.Item>) {\n  return (\n    <BaseAccordion.Item\n      className={cn(\n        'border-b border-outline-variant last:border-b-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction Header({ className, ...props }: ComponentProps<typeof BaseAccordion.Header>) {\n  return <BaseAccordion.Header className={cn('m-0', className)} {...props} />\n}\n\ntype TriggerProps = ComponentProps<typeof BaseAccordion.Trigger> & {\n  /** Replace the trailing chevron with a custom node, or `null` to hide it. */\n  icon?: ReactNode\n}\n\nfunction Trigger({ className, children, icon, ...props }: TriggerProps) {\n  return (\n    <BaseAccordion.Trigger\n      className={cn(\n        'group flex w-full cursor-pointer items-center justify-between gap-4',\n        'px-4 py-[18px] text-left text-title-medium text-on-surface',\n        'transition-colors hover:bg-on-surface/[0.08]',\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      {children}\n      {icon === undefined ? (\n        <ChevronDown\n          aria-hidden\n          className=\"size-5 shrink-0 text-on-surface-variant transition-transform duration-200 ease-out group-data-[panel-open]:rotate-180\"\n        />\n      ) : (\n        icon\n      )}\n    </BaseAccordion.Trigger>\n  )\n}\n\nfunction Panel({ className, children, ...props }: ComponentProps<typeof BaseAccordion.Panel>) {\n  return (\n    <BaseAccordion.Panel\n      className={cn(\n        'h-(--accordion-panel-height) overflow-hidden transition-[height] duration-200 ease-out',\n        'data-[ending-style]:h-0 data-[starting-style]:h-0',\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"px-4 pb-4 text-body-medium text-on-surface-variant\">{children}</div>\n    </BaseAccordion.Panel>\n  )\n}\n\nexport const Accordion = { Root, Item, Header, Trigger, Panel }\nexport { Root, Item, Header, Trigger, Panel }\n"],"mappings":";;;;;AAsBA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAoD;CAChF,OACE,kBAAC,EAAc,MAAf;EACE,WAAW,EACT,gGACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAoD;CAChF,OACE,kBAAC,EAAc,MAAf;EACE,WAAW,EACT,mDACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAO,EAAE,cAAW,GAAG,KAAsD;CACpF,OAAO,kBAAC,EAAc,QAAf;EAAsB,WAAW,EAAG,OAAO,CAAS;EAAG,GAAI;CAAQ,CAAA;AAC5E;AAOA,SAAS,EAAQ,EAAE,cAAW,aAAU,SAAM,GAAG,KAAuB;CACtE,OACE,kBAAC,EAAc,SAAf;EACE,WAAW,EACT,uEACA,8DACA,gDACA,yFACA,uDACA,CACF;EACA,GAAI;YATN,CAWG,GACA,MAAS,KAAA,IACR,kBAAC,GAAD;GACE,eAAA;GACA,WAAU;EACX,CAAA,IAED,CAEmB;;AAE3B;AAEA,SAAS,EAAM,EAAE,cAAW,aAAU,GAAG,KAAqD;CAC5F,OACE,kBAAC,EAAc,OAAf;EACE,WAAW,EACT,0FACA,qDACA,CACF;EACA,GAAI;YAEJ,kBAAC,OAAD;GAAK,WAAU;GAAsD;EAAc,CAAA;CAChE,CAAA;AAEzB;AAEA,IAAa,IAAY;CAAE;CAAM;CAAM;CAAQ;CAAS;AAAM"}

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

@@ -0,0 +1 @@
+export { Accordion, Root, Item, Header, Trigger, Panel } from './Accordion';

package/dist/components/accordion/index.js

@@ -0,0 +1,2 @@
+import { Accordion as e, Header as t, Item as n, Panel as r, Root as i, Trigger as a } from "./Accordion.js";
+export { e as Accordion, t as Header, n as Item, r as Panel, i as Root, a as Trigger };

package/dist/components/alert-dialog/AlertDialog.d.ts

@@ -0,0 +1,53 @@
+import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
+import { ComponentProps } from 'react';
+/**
+ * AlertDialog — Material 3 styled wrapper over Base UI's headless Alert Dialog.
+ * Behaviour/accessibility (focus trap, role="alertdialog", no dismiss on
+ * backdrop/Esc): Base UI (https://base-ui.com/react/components/alert-dialog).
+ * Visuals: M3 dialog anatomy — scrim, extra-large corner, surface-container,
+ * headline-small title, body-medium supporting text, text-button actions.
+ * Design ref: port/core/ui/components/dialogs (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI:
+ *   <AlertDialog.Root>
+ *     <AlertDialog.Trigger>Delete</AlertDialog.Trigger>
+ *     <AlertDialog.Portal>
+ *       <AlertDialog.Backdrop />
+ *       <AlertDialog.Viewport>
+ *         <AlertDialog.Popup>
+ *           <AlertDialog.Title>Delete file?</AlertDialog.Title>
+ *           <AlertDialog.Description>This can't be undone.</AlertDialog.Description>
+ *           <AlertDialog.Actions>
+ *             <AlertDialog.Close>Cancel</AlertDialog.Close>
+ *             <AlertDialog.Close>Delete</AlertDialog.Close>
+ *           </AlertDialog.Actions>
+ *         </AlertDialog.Popup>
+ *       </AlertDialog.Viewport>
+ *     </AlertDialog.Portal>
+ *   </AlertDialog.Root>
+ */
+declare const Root: typeof BaseAlertDialog.Root;
+declare const Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').AlertDialogPortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare function Trigger({ className, ...props }: ComponentProps<typeof BaseAlertDialog.Trigger>): import("react").JSX.Element;
+declare function Backdrop({ className, ...props }: ComponentProps<typeof BaseAlertDialog.Backdrop>): import("react").JSX.Element;
+declare function Viewport({ className, ...props }: ComponentProps<typeof BaseAlertDialog.Viewport>): import("react").JSX.Element;
+declare function Popup({ className, ...props }: ComponentProps<typeof BaseAlertDialog.Popup>): import("react").JSX.Element;
+declare function Title({ className, ...props }: ComponentProps<typeof BaseAlertDialog.Title>): import("react").JSX.Element;
+declare function Description({ className, ...props }: ComponentProps<typeof BaseAlertDialog.Description>): import("react").JSX.Element;
+/** Trailing actions row (M3: right-aligned text buttons). */
+declare function Actions({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** Closes the dialog; styled as an M3 text button — pair inside <Actions>. */
+declare function Close({ className, ...props }: ComponentProps<typeof BaseAlertDialog.Close>): import("react").JSX.Element;
+export declare const AlertDialog: {
+    Root: typeof BaseAlertDialog.Root;
+    Trigger: typeof Trigger;
+    Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').AlertDialogPortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Backdrop: typeof Backdrop;
+    Viewport: typeof Viewport;
+    Popup: typeof Popup;
+    Title: typeof Title;
+    Description: typeof Description;
+    Actions: typeof Actions;
+    Close: typeof Close;
+};
+export { Root, Trigger, Portal, Backdrop, Viewport, Popup, Title, Description, Actions, Close };

package/dist/components/alert-dialog/AlertDialog.js

@@ -0,0 +1,69 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+import { AlertDialog as n } from "@base-ui/react/alert-dialog";
+//#region src/components/alert-dialog/AlertDialog.tsx
+var r = n.Root, i = n.Portal;
+function a({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Trigger, {
+		className: e(r),
+		...i
+	});
+}
+function o({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Backdrop, {
+		className: e("fixed inset-0 z-40 bg-scrim transition-opacity duration-200 ease-out", "data-[ending-style]:opacity-0 data-[starting-style]:opacity-0", r),
+		...i
+	});
+}
+function s({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Viewport, {
+		className: e("fixed inset-0 z-50 flex items-center justify-center p-4", r),
+		...i
+	});
+}
+function c({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Popup, {
+		className: e("flex w-full min-w-[280px] max-w-[560px] flex-col gap-4", "rounded-extra-large bg-surface-container p-6 text-on-surface shadow-mm-3", "transition-all duration-200 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", r),
+		...i
+	});
+}
+function l({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Title, {
+		className: e("m-0 text-headline-small text-on-surface", r),
+		...i
+	});
+}
+function u({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Description, {
+		className: e("m-0 text-body-medium text-on-surface-variant", r),
+		...i
+	});
+}
+function d({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		className: e("mt-2 flex items-center justify-end gap-2", n),
+		...r
+	});
+}
+function f({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Close, {
+		className: e("inline-flex h-10 cursor-pointer items-center justify-center rounded-full px-3", "text-label-large text-primary transition-colors", "hover:bg-primary/[0.08] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary", "disabled:cursor-not-allowed disabled:opacity-[0.38]", r),
+		...i
+	});
+}
+var p = {
+	Root: r,
+	Trigger: a,
+	Portal: i,
+	Backdrop: o,
+	Viewport: s,
+	Popup: c,
+	Title: l,
+	Description: u,
+	Actions: d,
+	Close: f
+};
+//#endregion
+export { d as Actions, p as AlertDialog, o as Backdrop, f as Close, u as Description, c as Popup, i as Portal, r as Root, l as Title, a as Trigger, s as Viewport };
+
+//# sourceMappingURL=AlertDialog.js.map

package/dist/components/alert-dialog/AlertDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.js","names":[],"sources":["../../../src/components/alert-dialog/AlertDialog.tsx"],"sourcesContent":["import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * AlertDialog — Material 3 styled wrapper over Base UI's headless Alert Dialog.\n * Behaviour/accessibility (focus trap, role=\"alertdialog\", no dismiss on\n * backdrop/Esc): Base UI (https://base-ui.com/react/components/alert-dialog).\n * Visuals: M3 dialog anatomy — scrim, extra-large corner, surface-container,\n * headline-small title, body-medium supporting text, text-button actions.\n * Design ref: port/core/ui/components/dialogs (see CLAUDE.md).\n *\n * Compound API mirrors Base UI:\n *   <AlertDialog.Root>\n *     <AlertDialog.Trigger>Delete</AlertDialog.Trigger>\n *     <AlertDialog.Portal>\n *       <AlertDialog.Backdrop />\n *       <AlertDialog.Viewport>\n *         <AlertDialog.Popup>\n *           <AlertDialog.Title>Delete file?</AlertDialog.Title>\n *           <AlertDialog.Description>This can't be undone.</AlertDialog.Description>\n *           <AlertDialog.Actions>\n *             <AlertDialog.Close>Cancel</AlertDialog.Close>\n *             <AlertDialog.Close>Delete</AlertDialog.Close>\n *           </AlertDialog.Actions>\n *         </AlertDialog.Popup>\n *       </AlertDialog.Viewport>\n *     </AlertDialog.Portal>\n *   </AlertDialog.Root>\n */\n\nconst Root = BaseAlertDialog.Root\nconst Portal = BaseAlertDialog.Portal\n\nfunction Trigger({ className, ...props }: ComponentProps<typeof BaseAlertDialog.Trigger>) {\n  return <BaseAlertDialog.Trigger className={cn(className)} {...props} />\n}\n\nfunction Backdrop({ className, ...props }: ComponentProps<typeof BaseAlertDialog.Backdrop>) {\n  return (\n    <BaseAlertDialog.Backdrop\n      className={cn(\n        'fixed inset-0 z-40 bg-scrim transition-opacity duration-200 ease-out',\n        'data-[ending-style]:opacity-0 data-[starting-style]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction Viewport({ className, ...props }: ComponentProps<typeof BaseAlertDialog.Viewport>) {\n  return (\n    <BaseAlertDialog.Viewport\n      className={cn('fixed inset-0 z-50 flex items-center justify-center p-4', className)}\n      {...props}\n    />\n  )\n}\n\nfunction Popup({ className, ...props }: ComponentProps<typeof BaseAlertDialog.Popup>) {\n  return (\n    <BaseAlertDialog.Popup\n      className={cn(\n        'flex w-full min-w-[280px] max-w-[560px] flex-col gap-4',\n        'rounded-extra-large bg-surface-container p-6 text-on-surface shadow-mm-3',\n        'transition-all duration-200 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\nfunction Title({ className, ...props }: ComponentProps<typeof BaseAlertDialog.Title>) {\n  return (\n    <BaseAlertDialog.Title\n      className={cn('m-0 text-headline-small text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nfunction Description({ className, ...props }: ComponentProps<typeof BaseAlertDialog.Description>) {\n  return (\n    <BaseAlertDialog.Description\n      className={cn('m-0 text-body-medium text-on-surface-variant', className)}\n      {...props}\n    />\n  )\n}\n\n/** Trailing actions row (M3: right-aligned text buttons). */\nfunction Actions({ className, ...props }: ComponentProps<'div'>) {\n  return <div className={cn('mt-2 flex items-center justify-end gap-2', className)} {...props} />\n}\n\n/** Closes the dialog; styled as an M3 text button — pair inside <Actions>. */\nfunction Close({ className, ...props }: ComponentProps<typeof BaseAlertDialog.Close>) {\n  return (\n    <BaseAlertDialog.Close\n      className={cn(\n        'inline-flex h-10 cursor-pointer items-center justify-center rounded-full px-3',\n        'text-label-large text-primary transition-colors',\n        'hover:bg-primary/[0.08] 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\nexport const AlertDialog = {\n  Root,\n  Trigger,\n  Portal,\n  Backdrop,\n  Viewport,\n  Popup,\n  Title,\n  Description,\n  Actions,\n  Close,\n}\nexport { Root, Trigger, Portal, Backdrop, Viewport, Popup, Title, Description, Actions, Close }\n"],"mappings":";;;;AAgCA,IAAM,IAAO,EAAgB,MACvB,IAAS,EAAgB;AAE/B,SAAS,EAAQ,EAAE,cAAW,GAAG,KAAyD;CACxF,OAAO,kBAAC,EAAgB,SAAjB;EAAyB,WAAW,EAAG,CAAS;EAAG,GAAI;CAAQ,CAAA;AACxE;AAEA,SAAS,EAAS,EAAE,cAAW,GAAG,KAA0D;CAC1F,OACE,kBAAC,EAAgB,UAAjB;EACE,WAAW,EACT,wEACA,iEACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAS,EAAE,cAAW,GAAG,KAA0D;CAC1F,OACE,kBAAC,EAAgB,UAAjB;EACE,WAAW,EAAG,2DAA2D,CAAS;EAClF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAuD;CACpF,OACE,kBAAC,EAAgB,OAAjB;EACE,WAAW,EACT,0DACA,4EACA,2DACA,kEACA,8DACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAuD;CACpF,OACE,kBAAC,EAAgB,OAAjB;EACE,WAAW,EAAG,2CAA2C,CAAS;EAClE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAY,EAAE,cAAW,GAAG,KAA6D;CAChG,OACE,kBAAC,EAAgB,aAAjB;EACE,WAAW,EAAG,gDAAgD,CAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAQ,EAAE,cAAW,GAAG,KAAgC;CAC/D,OAAO,kBAAC,OAAD;EAAK,WAAW,EAAG,4CAA4C,CAAS;EAAG,GAAI;CAAQ,CAAA;AAChG;AAGA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAuD;CACpF,OACE,kBAAC,EAAgB,OAAjB;EACE,WAAW,EACT,iFACA,mDACA,gHACA,uDACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,IAAc;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}

package/dist/components/alert-dialog/index.d.ts

@@ -0,0 +1 @@
+export { AlertDialog, Root, Trigger, Portal, Backdrop, Viewport, Popup, Title, Description, Actions, Close, } from './AlertDialog';

package/dist/components/alert-dialog/index.js

@@ -0,0 +1,2 @@
+import { Actions as e, AlertDialog as t, Backdrop as n, Close as r, Description as i, Popup as a, Portal as o, Root as s, Title as c, Trigger as l, Viewport as u } from "./AlertDialog.js";
+export { e as Actions, t as AlertDialog, n as Backdrop, r as Close, i as Description, a as Popup, o as Portal, s as Root, c as Title, l as Trigger, u as Viewport };

package/dist/components/autocomplete/Autocomplete.d.ts

@@ -0,0 +1,90 @@
+import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
+import { ComponentProps } from 'react';
+/**
+ * Autocomplete — Material 3 styled wrapper over Base UI's headless Autocomplete.
+ * Behaviour/accessibility (combobox pattern, filtering, list navigation):
+ * Base UI (https://base-ui.com/react/components/autocomplete).
+ * Visuals: M3 search-bar anatomy for the field (surface-container-low pill,
+ * leading icon, trailing clear) and M3 menu anatomy for the suggestion popup
+ * (surface-container, small elevation, 48dp label-large items).
+ * Design refs: port/core/ui/components/search, text-field, dropdown (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI:
+ *   <Autocomplete.Root items={items}>
+ *     <Autocomplete.InputGroup>
+ *       <Autocomplete.Icon><Search /></Autocomplete.Icon>
+ *       <Autocomplete.Input placeholder="Search" />
+ *       <Autocomplete.Clear><X /></Autocomplete.Clear>
+ *     </Autocomplete.InputGroup>
+ *     <Autocomplete.Portal>
+ *       <Autocomplete.Positioner>
+ *         <Autocomplete.Popup>
+ *           <Autocomplete.Empty>No results.</Autocomplete.Empty>
+ *           <Autocomplete.List>
+ *             {(item) => <Autocomplete.Item key={item} value={item}>{item}</Autocomplete.Item>}
+ *           </Autocomplete.List>
+ *         </Autocomplete.Popup>
+ *       </Autocomplete.Positioner>
+ *     </Autocomplete.Portal>
+ *   </Autocomplete.Root>
+ */
+declare const Root: typeof BaseAutocomplete.Root;
+declare const Value: typeof BaseAutocomplete.Value;
+declare const Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').AutocompletePortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const Collection: typeof BaseAutocomplete.Collection;
+/** Field container — M3 search bar: 56dp pill on surface-container-low. */
+declare function InputGroup({ className, ...props }: ComponentProps<typeof BaseAutocomplete.InputGroup>): import("react").JSX.Element;
+/** Text input — bare body-large field; pair inside <InputGroup> for the chrome. */
+declare function Input({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Input>): import("react").JSX.Element;
+/** Leading icon slot (decorative; M3 search bar leading icon). */
+declare function Icon({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Icon>): import("react").JSX.Element;
+/** Opens the popup — 40dp icon button (chevron rotates via group-data-[popup-open]). */
+declare function Trigger({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Trigger>): import("react").JSX.Element;
+/** Clears the input — trailing 40dp icon button; unmounts while the field is empty. */
+declare function Clear({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Clear>): import("react").JSX.Element;
+declare function Backdrop({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Backdrop>): import("react").JSX.Element;
+declare function Positioner({ className, sideOffset, ...props }: ComponentProps<typeof BaseAutocomplete.Positioner>): import("react").JSX.Element;
+/** Suggestion menu — M3 menu container: surface-container, 12dp corner, level-2 shadow. */
+declare function Popup({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Popup>): import("react").JSX.Element;
+declare function Arrow({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Arrow>): import("react").JSX.Element;
+declare function List({ className, ...props }: ComponentProps<typeof BaseAutocomplete.List>): import("react").JSX.Element;
+/** Polite live region for async list status; collapses padding when childless. */
+declare function Status({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Status>): import("react").JSX.Element;
+/** Shown only when the filtered list is empty; collapses padding otherwise. */
+declare function Empty({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Empty>): import("react").JSX.Element;
+declare function Group({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Group>): import("react").JSX.Element;
+/** Group subheader — M3 list subheader: label-medium, on-surface-variant. */
+declare function GroupLabel({ className, ...props }: ComponentProps<typeof BaseAutocomplete.GroupLabel>): import("react").JSX.Element;
+/** Suggestion — M3 menu item: 48dp row, label-large, on-surface 8% highlight layer. */
+declare function Item({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Item>): import("react").JSX.Element;
+/** Single row of items when the root list is a grid. */
+declare function Row({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Row>): import("react").JSX.Element;
+declare function Separator({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Separator>): import("react").JSX.Element;
+declare const useFilter: typeof import('@base-ui/react/internals/filter').getFilter;
+declare const useFilteredItems: typeof BaseAutocomplete.useFilteredItems;
+export declare const Autocomplete: {
+    Root: typeof BaseAutocomplete.Root;
+    Value: typeof BaseAutocomplete.Value;
+    Trigger: typeof Trigger;
+    Input: typeof Input;
+    InputGroup: typeof InputGroup;
+    Icon: typeof Icon;
+    Clear: typeof Clear;
+    List: typeof List;
+    Status: typeof Status;
+    Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').AutocompletePortalProps, "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;
+    Row: typeof Row;
+    Collection: typeof BaseAutocomplete.Collection;
+    Empty: typeof Empty;
+    Separator: typeof Separator;
+    useFilter: typeof import('@base-ui/react/internals/filter').getFilter;
+    useFilteredItems: typeof BaseAutocomplete.useFilteredItems;
+};
+export { Root, Value, Trigger, Input, InputGroup, Icon, Clear, List, Status, Portal, Backdrop, Positioner, Popup, Arrow, Group, GroupLabel, Item, Row, Collection, Empty, Separator, useFilter, useFilteredItems, };

package/dist/components/autocomplete/Autocomplete.js

@@ -0,0 +1,137 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Autocomplete as n } from "@base-ui/react/autocomplete";
+//#region src/components/autocomplete/Autocomplete.tsx
+var r = n.Root, i = n.Value, a = n.Portal, o = n.Collection;
+function s({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.InputGroup, {
+		className: e("flex h-14 w-full min-w-0 items-center gap-1 rounded-full bg-surface-container-low px-2", "text-on-surface transition-colors", "focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-primary", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-[0.38]", r),
+		...i
+	});
+}
+function c({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Input, {
+		className: e("h-full w-full min-w-0 flex-1 bg-transparent px-2 text-body-large text-on-surface", "outline-none placeholder:text-on-surface-variant", "disabled:cursor-not-allowed disabled:opacity-[0.38]", r),
+		...i
+	});
+}
+function l({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Icon, {
+		className: e("flex size-10 shrink-0 items-center justify-center text-on-surface-variant", r),
+		...i
+	});
+}
+function u({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Trigger, {
+		className: e("group flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-full", "text-on-surface-variant transition-colors hover:bg-on-surface/[0.08]", "focus-visible:outline-2 focus-visible:outline-primary", "disabled:cursor-not-allowed disabled:opacity-[0.38]", r),
+		...i
+	});
+}
+function d({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Clear, {
+		className: e("flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-full", "text-on-surface-variant transition-colors hover:bg-on-surface/[0.08]", "focus-visible:outline-2 focus-visible:outline-primary", "disabled:cursor-not-allowed disabled:opacity-[0.38]", r),
+		...i
+	});
+}
+function f({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Backdrop, {
+		className: e("fixed inset-0 z-40", r),
+		...i
+	});
+}
+function p({ className: r, sideOffset: i = 4, ...a }) {
+	return /* @__PURE__ */ t(n.Positioner, {
+		className: e("z-50 outline-none", r),
+		sideOffset: i,
+		...a
+	});
+}
+function m({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Popup, {
+		className: e("max-h-[min(var(--available-height),20rem)] w-(--anchor-width)", "origin-(--transform-origin) overflow-y-auto overscroll-contain", "rounded-medium bg-surface-container py-2 text-on-surface shadow-mm-2 outline-none", "transition-[transform,scale,opacity] duration-150 ease-out", "data-[starting-style]:scale-95 data-[starting-style]:opacity-0", "data-[ending-style]:scale-95 data-[ending-style]:opacity-0", r),
+		...i
+	});
+}
+function h({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Arrow, {
+		className: e(r),
+		...i
+	});
+}
+function g({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.List, {
+		className: e("outline-none", r),
+		...i
+	});
+}
+function _({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Status, {
+		className: e("px-4 py-2 text-body-small text-on-surface-variant empty:p-0", r),
+		...i
+	});
+}
+function v({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Empty, {
+		className: e("px-4 py-2 text-body-medium text-on-surface-variant empty:p-0", r),
+		...i
+	});
+}
+function y({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Group, {
+		className: e(r),
+		...i
+	});
+}
+function b({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.GroupLabel, {
+		className: e("px-4 pt-3 pb-1 text-label-medium text-on-surface-variant", r),
+		...i
+	});
+}
+function x({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Item, {
+		className: e("flex min-h-12 cursor-pointer items-center gap-3 px-4 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]", r),
+		...i
+	});
+}
+function S({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Row, {
+		className: e("flex", r),
+		...i
+	});
+}
+function C({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Separator, {
+		className: e("my-2 h-px bg-outline-variant", r),
+		...i
+	});
+}
+var w = n.useFilter, T = n.useFilteredItems, E = {
+	Root: r,
+	Value: i,
+	Trigger: u,
+	Input: c,
+	InputGroup: s,
+	Icon: l,
+	Clear: d,
+	List: g,
+	Status: _,
+	Portal: a,
+	Backdrop: f,
+	Positioner: p,
+	Popup: m,
+	Arrow: h,
+	Group: y,
+	GroupLabel: b,
+	Item: x,
+	Row: S,
+	Collection: o,
+	Empty: v,
+	Separator: C,
+	useFilter: w,
+	useFilteredItems: T
+};
+//#endregion
+export { h as Arrow, E as Autocomplete, f as Backdrop, d as Clear, o as Collection, v as Empty, y as Group, b as GroupLabel, l as Icon, c as Input, s as InputGroup, x as Item, g as List, m as Popup, a as Portal, p as Positioner, r as Root, S as Row, C as Separator, _ as Status, u as Trigger, i as Value, w as useFilter, T as useFilteredItems };
+
+//# sourceMappingURL=Autocomplete.js.map

package/dist/components/autocomplete/Autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.js","names":[],"sources":["../../../src/components/autocomplete/Autocomplete.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Autocomplete — Material 3 styled wrapper over Base UI's headless Autocomplete.\n * Behaviour/accessibility (combobox pattern, filtering, list navigation):\n * Base UI (https://base-ui.com/react/components/autocomplete).\n * Visuals: M3 search-bar anatomy for the field (surface-container-low pill,\n * leading icon, trailing clear) and M3 menu anatomy for the suggestion popup\n * (surface-container, small elevation, 48dp label-large items).\n * Design refs: port/core/ui/components/search, text-field, dropdown (see CLAUDE.md).\n *\n * Compound API mirrors Base UI:\n *   <Autocomplete.Root items={items}>\n *     <Autocomplete.InputGroup>\n *       <Autocomplete.Icon><Search /></Autocomplete.Icon>\n *       <Autocomplete.Input placeholder=\"Search\" />\n *       <Autocomplete.Clear><X /></Autocomplete.Clear>\n *     </Autocomplete.InputGroup>\n *     <Autocomplete.Portal>\n *       <Autocomplete.Positioner>\n *         <Autocomplete.Popup>\n *           <Autocomplete.Empty>No results.</Autocomplete.Empty>\n *           <Autocomplete.List>\n *             {(item) => <Autocomplete.Item key={item} value={item}>{item}</Autocomplete.Item>}\n *           </Autocomplete.List>\n *         </Autocomplete.Popup>\n *       </Autocomplete.Positioner>\n *     </Autocomplete.Portal>\n *   </Autocomplete.Root>\n */\n\n// These parts render no HTML element of their own (or only portal plumbing),\n// so they pass through unstyled. Root stays an alias to preserve its generics.\nconst Root = BaseAutocomplete.Root\nconst Value = BaseAutocomplete.Value\nconst Portal = BaseAutocomplete.Portal\nconst Collection = BaseAutocomplete.Collection\n\n/** Field container — M3 search bar: 56dp pill on surface-container-low. */\nfunction InputGroup({ className, ...props }: ComponentProps<typeof BaseAutocomplete.InputGroup>) {\n  return (\n    <BaseAutocomplete.InputGroup\n      className={cn(\n        'flex h-14 w-full min-w-0 items-center gap-1 rounded-full bg-surface-container-low px-2',\n        'text-on-surface transition-colors',\n        'focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-primary',\n        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-[0.38]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Text input — bare body-large field; pair inside <InputGroup> for the chrome. */\nfunction Input({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Input>) {\n  return (\n    <BaseAutocomplete.Input\n      className={cn(\n        'h-full w-full min-w-0 flex-1 bg-transparent px-2 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  )\n}\n\n/** Leading icon slot (decorative; M3 search bar leading icon). */\nfunction Icon({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Icon>) {\n  return (\n    <BaseAutocomplete.Icon\n      className={cn(\n        'flex size-10 shrink-0 items-center justify-center text-on-surface-variant',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Opens the popup — 40dp icon button (chevron rotates via group-data-[popup-open]). */\nfunction Trigger({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Trigger>) {\n  return (\n    <BaseAutocomplete.Trigger\n      className={cn(\n        'group flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-full',\n        'text-on-surface-variant transition-colors hover:bg-on-surface/[0.08]',\n        'focus-visible:outline-2 focus-visible:outline-primary',\n        'disabled:cursor-not-allowed disabled:opacity-[0.38]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Clears the input — trailing 40dp icon button; unmounts while the field is empty. */\nfunction Clear({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Clear>) {\n  return (\n    <BaseAutocomplete.Clear\n      className={cn(\n        'flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-full',\n        'text-on-surface-variant transition-colors hover:bg-on-surface/[0.08]',\n        'focus-visible:outline-2 focus-visible:outline-primary',\n        'disabled:cursor-not-allowed disabled:opacity-[0.38]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction Backdrop({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Backdrop>) {\n  return <BaseAutocomplete.Backdrop className={cn('fixed inset-0 z-40', className)} {...props} />\n}\n\nfunction Positioner({\n  className,\n  sideOffset = 4,\n  ...props\n}: ComponentProps<typeof BaseAutocomplete.Positioner>) {\n  return (\n    <BaseAutocomplete.Positioner\n      className={cn('z-50 outline-none', className)}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\n/** Suggestion menu — M3 menu container: surface-container, 12dp corner, level-2 shadow. */\nfunction Popup({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Popup>) {\n  return (\n    <BaseAutocomplete.Popup\n      className={cn(\n        'max-h-[min(var(--available-height),20rem)] w-(--anchor-width)',\n        'origin-(--transform-origin) overflow-y-auto overscroll-contain',\n        'rounded-medium bg-surface-container py-2 text-on-surface shadow-mm-2 outline-none',\n        'transition-[transform,scale,opacity] duration-150 ease-out',\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\nfunction Arrow({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Arrow>) {\n  return <BaseAutocomplete.Arrow className={cn(className)} {...props} />\n}\n\nfunction List({ className, ...props }: ComponentProps<typeof BaseAutocomplete.List>) {\n  return <BaseAutocomplete.List className={cn('outline-none', className)} {...props} />\n}\n\n/** Polite live region for async list status; collapses padding when childless. */\nfunction Status({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Status>) {\n  return (\n    <BaseAutocomplete.Status\n      className={cn('px-4 py-2 text-body-small text-on-surface-variant empty:p-0', className)}\n      {...props}\n    />\n  )\n}\n\n/** Shown only when the filtered list is empty; collapses padding otherwise. */\nfunction Empty({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Empty>) {\n  return (\n    <BaseAutocomplete.Empty\n      className={cn('px-4 py-2 text-body-medium text-on-surface-variant empty:p-0', className)}\n      {...props}\n    />\n  )\n}\n\nfunction Group({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Group>) {\n  return <BaseAutocomplete.Group className={cn(className)} {...props} />\n}\n\n/** Group subheader — M3 list subheader: label-medium, on-surface-variant. */\nfunction GroupLabel({ className, ...props }: ComponentProps<typeof BaseAutocomplete.GroupLabel>) {\n  return (\n    <BaseAutocomplete.GroupLabel\n      className={cn('px-4 pt-3 pb-1 text-label-medium text-on-surface-variant', className)}\n      {...props}\n    />\n  )\n}\n\n/** Suggestion — M3 menu item: 48dp row, label-large, on-surface 8% highlight layer. */\nfunction Item({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Item>) {\n  return (\n    <BaseAutocomplete.Item\n      className={cn(\n        'flex min-h-12 cursor-pointer items-center gap-3 px-4 text-label-large text-on-surface',\n        'outline-none transition-colors data-[highlighted]:bg-on-surface/[0.08]',\n        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-[0.38]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Single row of items when the root list is a grid. */\nfunction Row({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Row>) {\n  return <BaseAutocomplete.Row className={cn('flex', className)} {...props} />\n}\n\nfunction Separator({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Separator>) {\n  return (\n    <BaseAutocomplete.Separator\n      className={cn('my-2 h-px bg-outline-variant', className)}\n      {...props}\n    />\n  )\n}\n\n// Filtering hook re-exports (not parts; mirror the Base UI package surface).\nconst useFilter = BaseAutocomplete.useFilter\nconst useFilteredItems = BaseAutocomplete.useFilteredItems\n\nexport const Autocomplete = {\n  Root,\n  Value,\n  Trigger,\n  Input,\n  InputGroup,\n  Icon,\n  Clear,\n  List,\n  Status,\n  Portal,\n  Backdrop,\n  Positioner,\n  Popup,\n  Arrow,\n  Group,\n  GroupLabel,\n  Item,\n  Row,\n  Collection,\n  Empty,\n  Separator,\n  useFilter,\n  useFilteredItems,\n}\nexport {\n  Root,\n  Value,\n  Trigger,\n  Input,\n  InputGroup,\n  Icon,\n  Clear,\n  List,\n  Status,\n  Portal,\n  Backdrop,\n  Positioner,\n  Popup,\n  Arrow,\n  Group,\n  GroupLabel,\n  Item,\n  Row,\n  Collection,\n  Empty,\n  Separator,\n  useFilter,\n  useFilteredItems,\n}\n"],"mappings":"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"}

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

@@ -0,0 +1 @@
+export { Autocomplete, Root, Value, Trigger, Input, InputGroup, Icon, Clear, List, Status, Portal, Backdrop, Positioner, Popup, Arrow, Group, GroupLabel, Item, Row, Collection, Empty, Separator, useFilter, useFilteredItems, } from './Autocomplete';

package/dist/components/autocomplete/index.js

@@ -0,0 +1,2 @@
+import { Arrow as e, Autocomplete as t, Backdrop as n, Clear as r, Collection as i, Empty as a, Group as o, GroupLabel as s, Icon as c, Input as l, InputGroup as u, Item as d, List as f, Popup as p, Portal as m, Positioner as h, Root as g, Row as _, Separator as v, Status as y, Trigger as b, Value as x, useFilter as S, useFilteredItems as C } from "./Autocomplete.js";
+export { e as Arrow, t as Autocomplete, n as Backdrop, r as Clear, i as Collection, a as Empty, o as Group, s as GroupLabel, c as Icon, l as Input, u as InputGroup, d as Item, f as List, p as Popup, m as Portal, h as Positioner, g as Root, _ as Row, v as Separator, y as Status, b as Trigger, x as Value, S as useFilter, C as useFilteredItems };