@duestel/ui 0.1.0

package/dist/components/drawer/Drawer.js

@@ -0,0 +1,106 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Drawer as n } from "@base-ui/react/drawer";
+//#region src/components/drawer/Drawer.tsx
+var r = n.Root, i = n.Portal, a = n.Provider, o = n.Handle, s = n.createHandle;
+function c({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Trigger, {
+		className: e(r),
+		...i
+	});
+}
+function l({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Backdrop, {
+		className: e("fixed inset-0 z-40 bg-scrim transition-opacity duration-[450ms] ease-out", "data-[ending-style]:opacity-0 data-[starting-style]:opacity-0", r),
+		...i
+	});
+}
+function u({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Viewport, {
+		className: e("fixed inset-0 z-50 flex", r),
+		...i
+	});
+}
+var d = {
+	bottom: e("mx-auto self-end rounded-t-extra-large", "w-full max-w-[640px]", "max-h-[calc(100dvh-72px)]", "[transform:translateY(calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px)))]", "data-[ending-style]:translate-y-full data-[starting-style]:translate-y-full"),
+	left: e("mr-auto rounded-r-large", "h-full w-[360px] max-w-[85vw]", "[transform:translateX(var(--drawer-swipe-movement-x,0px))]", "data-[ending-style]:-translate-x-full data-[starting-style]:-translate-x-full"),
+	right: e("ml-auto rounded-l-large", "h-full w-[360px] max-w-[85vw]", "[transform:translateX(var(--drawer-swipe-movement-x,0px))]", "data-[ending-style]:translate-x-full data-[starting-style]:translate-x-full")
+};
+function f({ className: r, side: i = "bottom", ...a }) {
+	return /* @__PURE__ */ t(n.Popup, {
+		className: e("relative flex flex-col overflow-hidden bg-surface-container text-on-surface shadow-mm-1", "transition-transform duration-[calc(var(--drawer-swipe-strength,1)*450ms)] ease-[cubic-bezier(0.32,0.72,0,1)]", "data-[swiping]:duration-0", "focus:outline-none", d[i], r),
+		...a
+	});
+}
+function p({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Content, {
+		className: e("flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-6", r),
+		...i
+	});
+}
+function m({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Title, {
+		className: e("m-0 text-title-large text-on-surface", r),
+		...i
+	});
+}
+function h({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Description, {
+		className: e("m-0 text-body-medium text-on-surface-variant", r),
+		...i
+	});
+}
+function g({ 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
+	});
+}
+function _({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"aria-hidden": !0,
+		className: e("mx-auto mt-4 mb-1.5 h-1 w-8 shrink-0 rounded-full bg-on-surface-variant/40", n),
+		...r
+	});
+}
+function v({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.SwipeArea, {
+		className: e(r),
+		...i
+	});
+}
+function y({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Indent, {
+		className: e("origin-top bg-surface transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)]", "data-[active]:scale-[0.98] data-[active]:rounded-extra-large", r),
+		...i
+	});
+}
+function b({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.IndentBackground, {
+		className: e("fixed inset-0 bg-inverse-surface opacity-0 transition-opacity duration-[450ms]", "data-[active]:opacity-100", r),
+		...i
+	});
+}
+var x = {
+	Root: r,
+	Trigger: c,
+	Portal: i,
+	Backdrop: l,
+	Viewport: u,
+	Popup: f,
+	Content: p,
+	Title: m,
+	Description: h,
+	Close: g,
+	DragHandle: _,
+	SwipeArea: v,
+	Provider: a,
+	Indent: y,
+	IndentBackground: b,
+	Handle: o,
+	createHandle: s
+};
+//#endregion
+export { l as Backdrop, g as Close, p as Content, h as Description, _ as DragHandle, x as Drawer, o as Handle, y as Indent, b as IndentBackground, f as Popup, i as Portal, a as Provider, r as Root, v as SwipeArea, m as Title, c as Trigger, u as Viewport, s as createHandle };
+
+//# sourceMappingURL=Drawer.js.map

package/dist/components/drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["import { Drawer as BaseDrawer } from '@base-ui/react/drawer'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Drawer — Material 3 styled wrapper over Base UI's headless Drawer.\n * Behaviour/accessibility (focus trap, scroll lock, swipe-to-dismiss, snap\n * points): Base UI (https://base-ui.com/react/components/drawer).\n * Visuals: M3 sheet anatomy — scrim, drag handle (32×4 on-surface-variant),\n * surface-container panel, extra-large top corner for bottom sheets, large\n * side corner for side sheets / modal navigation drawers, title-large header.\n * Design refs: port/core/ui/components/sheets (BottomSheet, SideSheet) and\n * port/core/ui/components/navigation-drawer (see CLAUDE.md).\n *\n * Compound API mirrors Base UI:\n *   <Drawer.Root>                            // swipeDirection: 'down' (default) | 'left' | 'right' | 'up'\n *     <Drawer.Trigger>Open</Drawer.Trigger>\n *     <Drawer.Portal>\n *       <Drawer.Backdrop />\n *       <Drawer.Viewport>\n *         <Drawer.Popup side=\"bottom\">       // side: 'bottom' | 'left' | 'right'\n *           <Drawer.DragHandle />            // bottom sheets only\n *           <Drawer.Content>\n *             <Drawer.Title>Title</Drawer.Title>\n *             <Drawer.Description>Supporting text</Drawer.Description>\n *             <Drawer.Close>Done</Drawer.Close>\n *           </Drawer.Content>\n *         </Drawer.Popup>\n *       </Drawer.Viewport>\n *     </Drawer.Portal>\n *   </Drawer.Root>\n *\n * App-shell parts (optional): wrap the page in <Drawer.Provider> with\n * <Drawer.IndentBackground /> + <Drawer.Indent> to scale the app behind an\n * open drawer. <Drawer.SwipeArea> opens the drawer from a screen edge.\n */\n\nconst Root = BaseDrawer.Root\nconst Portal = BaseDrawer.Portal\nconst Provider = BaseDrawer.Provider\nconst Handle = BaseDrawer.Handle\nconst createHandle = BaseDrawer.createHandle\n\nfunction Trigger({ className, ...props }: ComponentProps<typeof BaseDrawer.Trigger>) {\n  return <BaseDrawer.Trigger className={cn(className)} {...props} />\n}\n\nfunction Backdrop({ className, ...props }: ComponentProps<typeof BaseDrawer.Backdrop>) {\n  return (\n    <BaseDrawer.Backdrop\n      className={cn(\n        'fixed inset-0 z-40 bg-scrim transition-opacity duration-[450ms] 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 BaseDrawer.Viewport>) {\n  return <BaseDrawer.Viewport className={cn('fixed inset-0 z-50 flex', className)} {...props} />\n}\n\n/** Where the sheet rests: M3 bottom sheet, or side sheet / modal nav drawer. */\ntype DrawerSide = 'bottom' | 'left' | 'right'\n\nconst popupSideClasses: Record<DrawerSide, string> = {\n  // M3 bottom sheet: full-width docked panel, extra-large top corners,\n  // tracks vertical swipe + snap-point offset via Base UI CSS vars.\n  bottom: cn(\n    'mx-auto self-end rounded-t-extra-large',\n    'w-full max-w-[640px]',\n    'max-h-[calc(100dvh-72px)]',\n    '[transform:translateY(calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px)))]',\n    'data-[ending-style]:translate-y-full data-[starting-style]:translate-y-full',\n  ),\n  // M3 modal navigation drawer: leading edge, large trailing corners.\n  left: cn(\n    'mr-auto rounded-r-large',\n    'h-full w-[360px] max-w-[85vw]',\n    '[transform:translateX(var(--drawer-swipe-movement-x,0px))]',\n    'data-[ending-style]:-translate-x-full data-[starting-style]:-translate-x-full',\n  ),\n  // M3 modal side sheet: trailing edge, large leading corners.\n  right: cn(\n    'ml-auto rounded-l-large',\n    'h-full w-[360px] max-w-[85vw]',\n    '[transform:translateX(var(--drawer-swipe-movement-x,0px))]',\n    'data-[ending-style]:translate-x-full data-[starting-style]:translate-x-full',\n  ),\n}\n\ntype PopupProps = ComponentProps<typeof BaseDrawer.Popup> & {\n  /**\n   * Edge the sheet is docked to. Pair with the matching `swipeDirection` on\n   * `Drawer.Root` ('down' for bottom, 'left'/'right' for side sheets).\n   * @default 'bottom'\n   */\n  side?: DrawerSide\n}\n\nfunction Popup({ className, side = 'bottom', ...props }: PopupProps) {\n  return (\n    <BaseDrawer.Popup\n      className={cn(\n        'relative flex flex-col overflow-hidden bg-surface-container text-on-surface shadow-mm-1',\n        // Swipe release duration scales with Base UI's swipe-strength scalar;\n        // transforms are instant while the user is dragging.\n        'transition-transform duration-[calc(var(--drawer-swipe-strength,1)*450ms)] ease-[cubic-bezier(0.32,0.72,0,1)]',\n        'data-[swiping]:duration-0',\n        'focus:outline-none',\n        popupSideClasses[side],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Scrollable body of the sheet. */\nfunction Content({ className, ...props }: ComponentProps<typeof BaseDrawer.Content>) {\n  return (\n    <BaseDrawer.Content\n      className={cn('flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-6', className)}\n      {...props}\n    />\n  )\n}\n\nfunction Title({ className, ...props }: ComponentProps<typeof BaseDrawer.Title>) {\n  return (\n    <BaseDrawer.Title\n      className={cn('m-0 text-title-large text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nfunction Description({ className, ...props }: ComponentProps<typeof BaseDrawer.Description>) {\n  return (\n    <BaseDrawer.Description\n      className={cn('m-0 text-body-medium text-on-surface-variant', className)}\n      {...props}\n    />\n  )\n}\n\n/** Closes the drawer; styled as an M3 text button. */\nfunction Close({ className, ...props }: ComponentProps<typeof BaseDrawer.Close>) {\n  return (\n    <BaseDrawer.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\n/**\n * M3 drag handle (32×4, on-surface-variant @ 40%) shown at the top of a\n * bottom sheet to signal swipeability. Not a Base UI part — plain `<div>`.\n */\nfunction DragHandle({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      aria-hidden\n      className={cn(\n        'mx-auto mt-4 mb-1.5 h-1 w-8 shrink-0 rounded-full bg-on-surface-variant/40',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Invisible screen-edge area that opens the drawer on swipe. */\nfunction SwipeArea({ className, ...props }: ComponentProps<typeof BaseDrawer.SwipeArea>) {\n  return <BaseDrawer.SwipeArea className={cn(className)} {...props} />\n}\n\n/**\n * Wraps the app's main UI inside `<Drawer.Provider>`; gets `data-active`\n * while any drawer is open, scaling the page back behind the sheet.\n */\nfunction Indent({ className, ...props }: ComponentProps<typeof BaseDrawer.Indent>) {\n  return (\n    <BaseDrawer.Indent\n      className={cn(\n        'origin-top bg-surface transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)]',\n        'data-[active]:scale-[0.98] data-[active]:rounded-extra-large',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Background layer revealed behind a scaled `<Drawer.Indent>`. */\nfunction IndentBackground({\n  className,\n  ...props\n}: ComponentProps<typeof BaseDrawer.IndentBackground>) {\n  return (\n    <BaseDrawer.IndentBackground\n      className={cn(\n        'fixed inset-0 bg-inverse-surface opacity-0 transition-opacity duration-[450ms]',\n        'data-[active]:opacity-100',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport const Drawer = {\n  Root,\n  Trigger,\n  Portal,\n  Backdrop,\n  Viewport,\n  Popup,\n  Content,\n  Title,\n  Description,\n  Close,\n  DragHandle,\n  SwipeArea,\n  Provider,\n  Indent,\n  IndentBackground,\n  Handle,\n  createHandle,\n}\nexport {\n  Root,\n  Trigger,\n  Portal,\n  Backdrop,\n  Viewport,\n  Popup,\n  Content,\n  Title,\n  Description,\n  Close,\n  DragHandle,\n  SwipeArea,\n  Provider,\n  Indent,\n  IndentBackground,\n  Handle,\n  createHandle,\n}\n"],"mappings":";;;;AAsCA,IAAM,IAAO,EAAW,MAClB,IAAS,EAAW,QACpB,IAAW,EAAW,UACtB,IAAS,EAAW,QACpB,IAAe,EAAW;AAEhC,SAAS,EAAQ,EAAE,cAAW,GAAG,KAAoD;CACnF,OAAO,kBAAC,EAAW,SAAZ;EAAoB,WAAW,EAAG,CAAS;EAAG,GAAI;CAAQ,CAAA;AACnE;AAEA,SAAS,EAAS,EAAE,cAAW,GAAG,KAAqD;CACrF,OACE,kBAAC,EAAW,UAAZ;EACE,WAAW,EACT,4EACA,iEACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAS,EAAE,cAAW,GAAG,KAAqD;CACrF,OAAO,kBAAC,EAAW,UAAZ;EAAqB,WAAW,EAAG,2BAA2B,CAAS;EAAG,GAAI;CAAQ,CAAA;AAC/F;AAKA,IAAM,IAA+C;CAGnD,QAAQ,EACN,0CACA,wBACA,6BACA,wGACA,6EACF;CAEA,MAAM,EACJ,2BACA,iCACA,8DACA,+EACF;CAEA,OAAO,EACL,2BACA,iCACA,8DACA,6EACF;AACF;AAWA,SAAS,EAAM,EAAE,cAAW,UAAO,UAAU,GAAG,KAAqB;CACnE,OACE,kBAAC,EAAW,OAAZ;EACE,WAAW,EACT,2FAGA,iHACA,6BACA,sBACA,EAAiB,IACjB,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAQ,EAAE,cAAW,GAAG,KAAoD;CACnF,OACE,kBAAC,EAAW,SAAZ;EACE,WAAW,EAAG,0DAA0D,CAAS;EACjF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAkD;CAC/E,OACE,kBAAC,EAAW,OAAZ;EACE,WAAW,EAAG,wCAAwC,CAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAY,EAAE,cAAW,GAAG,KAAwD;CAC3F,OACE,kBAAC,EAAW,aAAZ;EACE,WAAW,EAAG,gDAAgD,CAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAkD;CAC/E,OACE,kBAAC,EAAW,OAAZ;EACE,WAAW,EACT,iFACA,mDACA,gHACA,uDACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAMA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAgC;CAClE,OACE,kBAAC,OAAD;EACE,eAAA;EACA,WAAW,EACT,8EACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAU,EAAE,cAAW,GAAG,KAAsD;CACvF,OAAO,kBAAC,EAAW,WAAZ;EAAsB,WAAW,EAAG,CAAS;EAAG,GAAI;CAAQ,CAAA;AACrE;AAMA,SAAS,EAAO,EAAE,cAAW,GAAG,KAAmD;CACjF,OACE,kBAAC,EAAW,QAAZ;EACE,WAAW,EACT,kGACA,gEACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAiB,EACxB,cACA,GAAG,KACkD;CACrD,OACE,kBAAC,EAAW,kBAAZ;EACE,WAAW,EACT,kFACA,6BACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,IAAS;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}

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

@@ -0,0 +1 @@
+export { Drawer, Root, Trigger, Portal, Backdrop, Viewport, Popup, Content, Title, Description, Close, DragHandle, SwipeArea, Provider, Indent, IndentBackground, Handle, createHandle, } from './Drawer';

package/dist/components/drawer/index.js

@@ -0,0 +1,2 @@
+import { Backdrop as e, Close as t, Content as n, Description as r, DragHandle as i, Drawer as a, Handle as o, Indent as s, IndentBackground as c, Popup as l, Portal as u, Provider as d, Root as f, SwipeArea as p, Title as m, Trigger as h, Viewport as g, createHandle as _ } from "./Drawer.js";
+export { e as Backdrop, t as Close, n as Content, r as Description, i as DragHandle, a as Drawer, o as Handle, s as Indent, c as IndentBackground, l as Popup, u as Portal, d as Provider, f as Root, p as SwipeArea, m as Title, h as Trigger, g as Viewport, _ as createHandle };

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

@@ -0,0 +1,52 @@
+import { Field as BaseField } from '@base-ui/react/field';
+import { ComponentProps } from 'react';
+/**
+ * Field — Material 3 styled wrapper over Base UI's headless Field.
+ * Behaviour/accessibility (label association, aria-invalid, validation state
+ * data-attributes, error wiring): Base UI (https://base-ui.com/react/components/field).
+ * Visuals ported from port/core/ui/components/text-field (InputOutlined) and
+ * port/pages/examples/text-fields (see CLAUDE.md): 56px outlined box with 8px
+ * corner, floating label that rests as hint text and floats to the top INSIDE
+ * the box when focused/filled (same anatomy as Input/InputOutlined — the two
+ * stay visually identical), body-small supporting/error text.
+ *
+ * Compound API mirrors Base UI:
+ *   <Field.Root name="email">
+ *     <Field.Label>Email</Field.Label>
+ *     <Field.Control type="email" required />
+ *     <Field.Description>We never share it.</Field.Description>
+ *     <Field.Error match="valueMissing">Enter your email.</Field.Error>
+ *   </Field.Root>
+ */
+/**
+ * M3 outlined text-field control classes — shared by Field.Control and Input
+ * so both render the same outlined box.
+ */
+export declare const fieldControlClasses: string;
+declare function Root({ className, ...props }: ComponentProps<typeof BaseField.Root>): import("react").JSX.Element;
+/**
+ * Floating label, port anatomy: rests as hint text in the box, floats to the
+ * top INSIDE the box once the field is focused or filled — driven purely by
+ * Base UI's data-focused/data-filled attributes. Override the positioning via
+ * className when pairing with non-text controls (checkbox, radio…).
+ */
+declare function Label({ className, ...props }: ComponentProps<typeof BaseField.Label>): import("react").JSX.Element;
+declare function Control({ className, ...props }: ComponentProps<typeof BaseField.Control>): import("react").JSX.Element;
+/** M3 supporting text: body-small, on-surface-variant, inset to the text box. */
+declare function Description({ className, ...props }: ComponentProps<typeof BaseField.Description>): import("react").JSX.Element;
+/** M3 error supporting text: body-small in the error role. */
+declare function Error({ className, ...props }: ComponentProps<typeof BaseField.Error>): import("react").JSX.Element;
+/** Groups one control of a checkbox/radio group with its label + description. */
+declare function Item({ className, ...props }: ComponentProps<typeof BaseField.Item>): import("react").JSX.Element;
+/** Render-prop helper exposing the field's ValidityState — no styling hook. */
+declare const Validity: import('react').FC<import('@base-ui/react').FieldValidityProps>;
+export declare const Field: {
+    Root: typeof Root;
+    Label: typeof Label;
+    Control: typeof Control;
+    Description: typeof Description;
+    Error: typeof Error;
+    Validity: import('react').FC<import('@base-ui/react').FieldValidityProps>;
+    Item: typeof Item;
+};
+export { Root, Label, Control, Description, Error, Validity, Item };

package/dist/components/form/Field.js

@@ -0,0 +1,54 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Field as n } from "@base-ui/react/field";
+//#region src/components/form/Field.tsx
+var r = e("h-14 w-full rounded-small border border-outline bg-transparent px-3 pt-6", "text-body-medium text-on-surface placeholder:text-transparent", "transition-[border-color,box-shadow] duration-150 ease-out", "hover:border-on-surface", "focus:border-primary focus:outline-none", "data-[invalid]:border-error data-[invalid]:hover:border-error", "data-[invalid]:focus:border-error", "disabled:cursor-not-allowed disabled:opacity-[0.38]");
+function i({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Root, {
+		className: e("relative flex w-full flex-col gap-1", r),
+		...i
+	});
+}
+function a({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Label, {
+		className: e("pointer-events-none absolute left-3 top-[17px] max-w-[calc(100%-2rem)] truncate", "text-body-medium text-on-surface-variant transition-all duration-150 ease-out", "data-[filled]:top-1.5 data-[filled]:text-body-small", "data-[focused]:top-1.5 data-[focused]:text-body-small", "data-[invalid]:text-error", "data-[disabled]:opacity-[0.38]", r),
+		...i
+	});
+}
+function o({ className: i, ...a }) {
+	return /* @__PURE__ */ t(n.Control, {
+		className: e(r, i),
+		...a
+	});
+}
+function s({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Description, {
+		className: e("m-0 px-3 text-body-small text-on-surface-variant data-[disabled]:opacity-[0.38]", r),
+		...i
+	});
+}
+function c({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Error, {
+		className: e("px-3 text-body-small text-error", r),
+		...i
+	});
+}
+function l({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Item, {
+		className: e("flex items-center gap-3", r),
+		...i
+	});
+}
+var u = {
+	Root: i,
+	Label: a,
+	Control: o,
+	Description: s,
+	Error: c,
+	Validity: n.Validity,
+	Item: l
+};
+//#endregion
+export { u as Field, r as fieldControlClasses };
+
+//# sourceMappingURL=Field.js.map

package/dist/components/form/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","names":[],"sources":["../../../src/components/form/Field.tsx"],"sourcesContent":["import { Field as BaseField } from '@base-ui/react/field'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Field — Material 3 styled wrapper over Base UI's headless Field.\n * Behaviour/accessibility (label association, aria-invalid, validation state\n * data-attributes, error wiring): Base UI (https://base-ui.com/react/components/field).\n * Visuals ported from port/core/ui/components/text-field (InputOutlined) and\n * port/pages/examples/text-fields (see CLAUDE.md): 56px outlined box with 8px\n * corner, floating label that rests as hint text and floats to the top INSIDE\n * the box when focused/filled (same anatomy as Input/InputOutlined — the two\n * stay visually identical), body-small supporting/error text.\n *\n * Compound API mirrors Base UI:\n *   <Field.Root name=\"email\">\n *     <Field.Label>Email</Field.Label>\n *     <Field.Control type=\"email\" required />\n *     <Field.Description>We never share it.</Field.Description>\n *     <Field.Error match=\"valueMissing\">Enter your email.</Field.Error>\n *   </Field.Root>\n */\n\n/**\n * M3 outlined text-field control classes — shared by Field.Control and Input\n * so both render the same outlined box.\n */\nexport const fieldControlClasses = cn(\n  'h-14 w-full rounded-small border border-outline bg-transparent px-3 pt-6',\n  'text-body-medium text-on-surface placeholder:text-transparent',\n  'transition-[border-color,box-shadow] duration-150 ease-out',\n  'hover:border-on-surface',\n  'focus:border-primary focus:outline-none',\n  'data-[invalid]:border-error data-[invalid]:hover:border-error',\n  'data-[invalid]:focus:border-error',\n  'disabled:cursor-not-allowed disabled:opacity-[0.38]',\n)\n\nfunction Root({ className, ...props }: ComponentProps<typeof BaseField.Root>) {\n  return (\n    <BaseField.Root className={cn('relative flex w-full flex-col gap-1', className)} {...props} />\n  )\n}\n\n/**\n * Floating label, port anatomy: rests as hint text in the box, floats to the\n * top INSIDE the box once the field is focused or filled — driven purely by\n * Base UI's data-focused/data-filled attributes. Override the positioning via\n * className when pairing with non-text controls (checkbox, radio…).\n */\nfunction Label({ className, ...props }: ComponentProps<typeof BaseField.Label>) {\n  return (\n    <BaseField.Label\n      className={cn(\n        'pointer-events-none absolute left-3 top-[17px] max-w-[calc(100%-2rem)] truncate',\n        'text-body-medium text-on-surface-variant transition-all duration-150 ease-out',\n        'data-[filled]:top-1.5 data-[filled]:text-body-small',\n        'data-[focused]:top-1.5 data-[focused]:text-body-small',\n        'data-[invalid]:text-error',\n        'data-[disabled]:opacity-[0.38]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction Control({ className, ...props }: ComponentProps<typeof BaseField.Control>) {\n  return <BaseField.Control className={cn(fieldControlClasses, className)} {...props} />\n}\n\n/** M3 supporting text: body-small, on-surface-variant, inset to the text box. */\nfunction Description({ className, ...props }: ComponentProps<typeof BaseField.Description>) {\n  return (\n    <BaseField.Description\n      className={cn(\n        'm-0 px-3 text-body-small text-on-surface-variant data-[disabled]:opacity-[0.38]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** M3 error supporting text: body-small in the error role. */\nfunction Error({ className, ...props }: ComponentProps<typeof BaseField.Error>) {\n  return <BaseField.Error className={cn('px-3 text-body-small text-error', className)} {...props} />\n}\n\n/** Groups one control of a checkbox/radio group with its label + description. */\nfunction Item({ className, ...props }: ComponentProps<typeof BaseField.Item>) {\n  return <BaseField.Item className={cn('flex items-center gap-3', className)} {...props} />\n}\n\n/** Render-prop helper exposing the field's ValidityState — no styling hook. */\nconst Validity = BaseField.Validity\n\nexport const Field = { Root, Label, Control, Description, Error, Validity, Item }\nexport { Root, Label, Control, Description, Error, Validity, Item }\n"],"mappings":";;;;AA4BA,IAAa,IAAsB,EACjC,4EACA,iEACA,8DACA,2BACA,2CACA,iEACA,qCACA,qDACF;AAEA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAgD;CAC5E,OACE,kBAAC,EAAU,MAAX;EAAgB,WAAW,EAAG,uCAAuC,CAAS;EAAG,GAAI;CAAQ,CAAA;AAEjG;AAQA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAiD;CAC9E,OACE,kBAAC,EAAU,OAAX;EACE,WAAW,EACT,mFACA,iFACA,uDACA,yDACA,6BACA,kCACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAQ,EAAE,cAAW,GAAG,KAAmD;CAClF,OAAO,kBAAC,EAAU,SAAX;EAAmB,WAAW,EAAG,GAAqB,CAAS;EAAG,GAAI;CAAQ,CAAA;AACvF;AAGA,SAAS,EAAY,EAAE,cAAW,GAAG,KAAuD;CAC1F,OACE,kBAAC,EAAU,aAAX;EACE,WAAW,EACT,mFACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAiD;CAC9E,OAAO,kBAAC,EAAU,OAAX;EAAiB,WAAW,EAAG,mCAAmC,CAAS;EAAG,GAAI;CAAQ,CAAA;AACnG;AAGA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAgD;CAC5E,OAAO,kBAAC,EAAU,MAAX;EAAgB,WAAW,EAAG,2BAA2B,CAAS;EAAG,GAAI;CAAQ,CAAA;AAC1F;AAKA,IAAa,IAAQ;CAAE;CAAM;CAAO;CAAS;CAAa;CAAO,UAFhD,EAAU;CAEgD;AAAK"}

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

@@ -0,0 +1,24 @@
+import { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';
+import { ComponentProps } from 'react';
+/**
+ * Fieldset — Material 3 styled wrapper over Base UI's headless Fieldset.
+ * Behaviour/accessibility (native `<fieldset>`, legend labelling): Base UI
+ * (https://base-ui.com/react/components/fieldset).
+ * Visuals: M3 grouped-section treatment — medium corner, outline-variant
+ * border, title-small legend (mirrors grouped fields on the text-fields
+ * example page).
+ * Design ref: port/pages/examples/text-fields (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI:
+ *   <Fieldset.Root>
+ *     <Fieldset.Legend>Shipping address</Fieldset.Legend>
+ *     <Field.Root>…</Field.Root>
+ *   </Fieldset.Root>
+ */
+declare function Root({ className, ...props }: ComponentProps<typeof BaseFieldset.Root>): import("react").JSX.Element;
+declare function Legend({ className, ...props }: ComponentProps<typeof BaseFieldset.Legend>): import("react").JSX.Element;
+export declare const Fieldset: {
+    Root: typeof Root;
+    Legend: typeof Legend;
+};
+export { Root, Legend };

package/dist/components/form/Fieldset.js

@@ -0,0 +1,24 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Fieldset as n } from "@base-ui/react/fieldset";
+//#region src/components/form/Fieldset.tsx
+function r({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Root, {
+		className: e("m-0 flex w-full min-w-0 flex-col gap-5 rounded-medium border border-outline-variant p-4", r),
+		...i
+	});
+}
+function i({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Legend, {
+		className: e("text-title-small text-on-surface", r),
+		...i
+	});
+}
+var a = {
+	Root: r,
+	Legend: i
+};
+//#endregion
+export { a as Fieldset };
+
+//# sourceMappingURL=Fieldset.js.map

package/dist/components/form/Fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.js","names":[],"sources":["../../../src/components/form/Fieldset.tsx"],"sourcesContent":["import { Fieldset as BaseFieldset } from '@base-ui/react/fieldset'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Fieldset — Material 3 styled wrapper over Base UI's headless Fieldset.\n * Behaviour/accessibility (native `<fieldset>`, legend labelling): Base UI\n * (https://base-ui.com/react/components/fieldset).\n * Visuals: M3 grouped-section treatment — medium corner, outline-variant\n * border, title-small legend (mirrors grouped fields on the text-fields\n * example page).\n * Design ref: port/pages/examples/text-fields (see CLAUDE.md).\n *\n * Compound API mirrors Base UI:\n *   <Fieldset.Root>\n *     <Fieldset.Legend>Shipping address</Fieldset.Legend>\n *     <Field.Root>…</Field.Root>\n *   </Fieldset.Root>\n */\n\nfunction Root({ className, ...props }: ComponentProps<typeof BaseFieldset.Root>) {\n  return (\n    <BaseFieldset.Root\n      className={cn(\n        'm-0 flex w-full min-w-0 flex-col gap-5 rounded-medium border border-outline-variant p-4',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction Legend({ className, ...props }: ComponentProps<typeof BaseFieldset.Legend>) {\n  return (\n    <BaseFieldset.Legend\n      className={cn('text-title-small text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nexport const Fieldset = { Root, Legend }\nexport { Root, Legend }\n"],"mappings":";;;;AAqBA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAmD;CAC/E,OACE,kBAAC,EAAa,MAAd;EACE,WAAW,EACT,2FACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAO,EAAE,cAAW,GAAG,KAAqD;CACnF,OACE,kBAAC,EAAa,QAAd;EACE,WAAW,EAAG,oCAAoC,CAAS;EAC3D,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,IAAW;CAAE;CAAM;AAAO"}

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

@@ -0,0 +1,18 @@
+import { Form as BaseForm } from '@base-ui/react/form';
+import { ComponentProps } from 'react';
+/**
+ * Form — Material 3 styled wrapper over Base UI's headless Form.
+ * Behaviour/accessibility (consolidated validation, server errors, submit
+ * handling): Base UI (https://base-ui.com/react/components/form).
+ * Visuals: vertical M3 form layout — column of fields on the standard
+ * 24px rhythm (mirrors the stacked containers on the text-fields example
+ * page).
+ * Design ref: port/pages/examples/text-fields (see CLAUDE.md).
+ *
+ * Usage mirrors Base UI:
+ *   <Form errors={errors} onFormSubmit={…}>
+ *     <Field.Root name="email">…</Field.Root>
+ *   </Form>
+ */
+declare function Form({ className, ...props }: ComponentProps<typeof BaseForm>): import("react").JSX.Element;
+export { Form };

package/dist/components/form/Form.js

@@ -0,0 +1,14 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Form as n } from "@base-ui/react/form";
+//#region src/components/form/Form.tsx
+function r({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n, {
+		className: e("flex w-full flex-col gap-6", r),
+		...i
+	});
+}
+//#endregion
+export { r as Form };
+
+//# sourceMappingURL=Form.js.map

package/dist/components/form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","names":[],"sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import { Form as BaseForm } from '@base-ui/react/form'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Form — Material 3 styled wrapper over Base UI's headless Form.\n * Behaviour/accessibility (consolidated validation, server errors, submit\n * handling): Base UI (https://base-ui.com/react/components/form).\n * Visuals: vertical M3 form layout — column of fields on the standard\n * 24px rhythm (mirrors the stacked containers on the text-fields example\n * page).\n * Design ref: port/pages/examples/text-fields (see CLAUDE.md).\n *\n * Usage mirrors Base UI:\n *   <Form errors={errors} onFormSubmit={…}>\n *     <Field.Root name=\"email\">…</Field.Root>\n *   </Form>\n */\n\nfunction Form({ className, ...props }: ComponentProps<typeof BaseForm>) {\n  return <BaseForm className={cn('flex w-full flex-col gap-6', className)} {...props} />\n}\n\nexport { Form }\n"],"mappings":";;;;AAoBA,SAAS,EAAK,EAAE,cAAW,GAAG,KAA0C;CACtE,OAAO,kBAAC,GAAD;EAAU,WAAW,EAAG,8BAA8B,CAAS;EAAG,GAAI;CAAQ,CAAA;AACvF"}

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

@@ -0,0 +1,33 @@
+import { Input as BaseInput } from '@base-ui/react/input';
+import { ComponentProps, ReactNode } from 'react';
+type InputProps = ComponentProps<typeof BaseInput> & {
+    variant?: 'outlined' | 'filled';
+    /** Floating label (port: the placeholder doubles as the label). */
+    label?: ReactNode;
+    /** Leading slot, centered in a 56px box (icon, avatar…). */
+    leftElement?: ReactNode;
+    /** Trailing slot (icon button, clear affordance…). */
+    rightElement?: ReactNode;
+};
+declare function Input({ className, variant, label, leftElement, rightElement, id, placeholder, ...props }: InputProps): import("react").JSX.Element;
+type TextFieldProps = ComponentProps<'textarea'> & {
+    variant?: 'outlined' | 'filled';
+    label?: ReactNode;
+    leftElement?: ReactNode;
+    rightElement?: ReactNode;
+};
+/**
+ * Multi-line text field (port TextFieldOutlined/TextFieldFilled): textarea
+ * with the same floating-label anatomy, 4 rows by default. The filled skin
+ * masks the label on a surface-container-low chip so content scrolls under it,
+ * per the port.
+ */
+declare function TextField({ className, variant, label, leftElement, rightElement, id, placeholder, rows, ...props }: TextFieldProps): import("react").JSX.Element;
+type PortLabelProps = {
+    children?: ReactNode;
+};
+declare function InputOutlined({ placeholder, children, ...props }: Omit<InputProps, 'variant' | 'label'> & PortLabelProps): import("react").JSX.Element;
+declare function InputFilled({ placeholder, children, ...props }: Omit<InputProps, 'variant' | 'label'> & PortLabelProps): import("react").JSX.Element;
+declare function TextFieldOutlined({ placeholder, children, ...props }: Omit<TextFieldProps, 'variant' | 'label'> & PortLabelProps): import("react").JSX.Element;
+declare function TextFieldFilled({ placeholder, children, ...props }: Omit<TextFieldProps, 'variant' | 'label'> & PortLabelProps): import("react").JSX.Element;
+export { Input, TextField, InputOutlined, InputFilled, TextFieldOutlined, TextFieldFilled };

package/dist/components/form/Input.js

@@ -0,0 +1,99 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useId as r } from "react";
+import { Input as i } from "@base-ui/react/input";
+//#region src/components/form/Input.tsx
+var a = {
+	outlined: e("rounded-small border border-outline bg-transparent", "hover:border-on-surface focus:border-primary", "data-[invalid]:border-error data-[invalid]:hover:border-error data-[invalid]:focus:border-error"),
+	filled: e("rounded-t-small border-x-0 border-b-2 border-t-0 border-on-surface-variant bg-surface-container", "hover:bg-surface-container-high focus:border-primary", "data-[invalid]:border-error")
+}, o = e("peer w-full px-3 text-body-medium text-on-surface", "transition-all duration-150 ease-out focus:outline-none", "disabled:cursor-not-allowed disabled:opacity-[0.38]");
+function s(e, t) {
+	return t ?? (typeof e == "string" ? e : " ");
+}
+function c({ children: e }) {
+	return /* @__PURE__ */ t("div", {
+		className: "absolute left-0 top-0 z-10 flex h-14 w-14 items-center justify-center text-on-surface-variant",
+		children: e
+	});
+}
+function l({ children: e }) {
+	return /* @__PURE__ */ t("div", {
+		className: "absolute right-2 top-0 z-10 flex h-14 items-center justify-end text-on-surface",
+		children: e
+	});
+}
+function u({ className: u, variant: d = "outlined", label: f, leftElement: p, rightElement: m, id: h, placeholder: g, ..._ }) {
+	let v = r(), y = h ?? v, b = /* @__PURE__ */ t(i, {
+		id: y,
+		placeholder: s(f, g),
+		className: e(o, "h-14", a[d], "placeholder:text-transparent", f && "pt-6", p && "pl-[60px]", m && "pr-12", u),
+		..._
+	});
+	return !f && !p && !m ? b : /* @__PURE__ */ n("div", {
+		className: "relative flex w-full",
+		children: [
+			p && /* @__PURE__ */ t(c, { children: p }),
+			b,
+			f && /* @__PURE__ */ t("label", {
+				htmlFor: y,
+				className: e("pointer-events-none absolute top-1.5 cursor-text", "text-body-small text-on-surface-variant transition-all duration-150 ease-out", "peer-placeholder-shown:top-[17px] peer-placeholder-shown:text-body-medium", "peer-focus:top-1.5 peer-focus:text-body-small", "peer-data-[invalid]:text-error peer-disabled:opacity-[0.38]", p ? "left-12 px-3" : "left-3"),
+				children: f
+			}),
+			m && /* @__PURE__ */ t(l, { children: m })
+		]
+	});
+}
+function d({ className: i, variant: u = "outlined", label: d, leftElement: f, rightElement: p, id: m, placeholder: h, rows: g = 4, ..._ }) {
+	let v = r(), y = m ?? v, b = /* @__PURE__ */ t("textarea", {
+		id: y,
+		rows: g,
+		placeholder: s(d, h),
+		className: e(o, u === "outlined" ? a.outlined : e("rounded-t-small border-x-0 border-b-2 border-t-0 border-outline bg-surface-container-low", "hover:bg-surface-container focus:border-primary"), "placeholder:text-transparent", d && "pt-[26px] sm:pt-[28px]", f && "pl-[60px]", p && "pr-12", i),
+		..._
+	});
+	return !d && !f && !p ? b : /* @__PURE__ */ n("div", {
+		className: "relative flex w-full",
+		children: [
+			f && /* @__PURE__ */ t(c, { children: f }),
+			b,
+			d && /* @__PURE__ */ t("label", {
+				htmlFor: y,
+				className: e("pointer-events-none absolute top-1 cursor-text px-3 py-1.5", "text-body-small text-on-surface-variant transition-all duration-150 ease-out", "peer-placeholder-shown:top-2 peer-placeholder-shown:text-body-medium", "peer-focus:top-1 peer-focus:text-body-small", "peer-disabled:opacity-[0.38]", u === "filled" && "rounded-br-small rounded-tl-small bg-surface-container-low", f ? "left-12" : "left-0"),
+				children: d
+			}),
+			p && /* @__PURE__ */ t(l, { children: p })
+		]
+	});
+}
+function f({ placeholder: e, children: n, ...r }) {
+	return /* @__PURE__ */ t(u, {
+		variant: "outlined",
+		label: n ?? e,
+		...r
+	});
+}
+function p({ placeholder: e, children: n, ...r }) {
+	return /* @__PURE__ */ t(u, {
+		variant: "filled",
+		label: n ?? e,
+		...r
+	});
+}
+function m({ placeholder: e, children: n, ...r }) {
+	return /* @__PURE__ */ t(d, {
+		variant: "outlined",
+		label: n ?? e,
+		...r
+	});
+}
+function h({ placeholder: e, children: n, ...r }) {
+	return /* @__PURE__ */ t(d, {
+		variant: "filled",
+		label: n ?? e,
+		...r
+	});
+}
+//#endregion
+export { u as Input, p as InputFilled, f as InputOutlined, d as TextField, h as TextFieldFilled, m as TextFieldOutlined };
+
+//# sourceMappingURL=Input.js.map

package/dist/components/form/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/form/Input.tsx"],"sourcesContent":["import { useId } from 'react'\nimport { Input as BaseInput } from '@base-ui/react/input'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps, ReactNode } from 'react'\n\n/**\n * Text fields ported from port/core/ui/components/text-field (see CLAUDE.md):\n * 56px single-line fields and multi-line textareas, filled + outlined skins,\n * floating label that rests as placeholder text and floats to the top of the\n * box on focus/fill, 56px left element and trailing right element slots.\n *\n * Port-compatible API (placeholder/children become the floating label):\n *   <InputOutlined name=\"email\" placeholder=\"Enter email\" />\n *   <InputOutlined leftElement={<ChartLine />} rightElement={<Button.Icon …/>}>\n *     Search pools or tokens\n *   </InputOutlined>\n *   <TextFieldOutlined rightElement={…}>Tell your story</TextFieldOutlined>\n *\n * Lower-level parts: <Input variant label …/> (Base UI input — composes with\n * Field.Root/Field.Label when label is omitted) and <TextField …/> (textarea).\n */\n\nconst variantClasses = {\n  outlined: cn(\n    'rounded-small border border-outline bg-transparent',\n    'hover:border-on-surface focus:border-primary',\n    'data-[invalid]:border-error data-[invalid]:hover:border-error data-[invalid]:focus:border-error',\n  ),\n  filled: cn(\n    'rounded-t-small border-x-0 border-b-2 border-t-0 border-on-surface-variant bg-surface-container',\n    'hover:bg-surface-container-high focus:border-primary',\n    'data-[invalid]:border-error',\n  ),\n}\n\nconst controlBaseClasses = cn(\n  'peer w-full px-3 text-body-medium text-on-surface',\n  'transition-all duration-150 ease-out focus:outline-none',\n  'disabled:cursor-not-allowed disabled:opacity-[0.38]',\n)\n\n/**\n * Text fields have NO visible placeholders (port/M3: the floating label is the\n * only hint text). The native placeholder attribute exists purely to drive the\n * :placeholder-shown float trick and is always transparent.\n */\nfunction floatPlaceholder(label: ReactNode, placeholder: string | undefined) {\n  return placeholder ?? (typeof label === 'string' ? label : ' ')\n}\n\nfunction LeftElement({ children }: { children: ReactNode }) {\n  return (\n    <div className=\"absolute left-0 top-0 z-10 flex h-14 w-14 items-center justify-center text-on-surface-variant\">\n      {children}\n    </div>\n  )\n}\n\nfunction RightElement({ children }: { children: ReactNode }) {\n  return (\n    <div className=\"absolute right-2 top-0 z-10 flex h-14 items-center justify-end text-on-surface\">\n      {children}\n    </div>\n  )\n}\n\ntype InputProps = ComponentProps<typeof BaseInput> & {\n  variant?: 'outlined' | 'filled'\n  /** Floating label (port: the placeholder doubles as the label). */\n  label?: ReactNode\n  /** Leading slot, centered in a 56px box (icon, avatar…). */\n  leftElement?: ReactNode\n  /** Trailing slot (icon button, clear affordance…). */\n  rightElement?: ReactNode\n}\n\nfunction Input({\n  className,\n  variant = 'outlined',\n  label,\n  leftElement,\n  rightElement,\n  id,\n  placeholder,\n  ...props\n}: InputProps) {\n  const autoId = useId()\n  const inputId = id ?? autoId\n\n  const control = (\n    <BaseInput\n      id={inputId}\n      placeholder={floatPlaceholder(label, placeholder)}\n      className={cn(\n        controlBaseClasses,\n        'h-14',\n        variantClasses[variant],\n        'placeholder:text-transparent',\n        label && 'pt-6',\n        leftElement && 'pl-[60px]',\n        rightElement && 'pr-12',\n        className,\n      )}\n      {...props}\n    />\n  )\n\n  // Bare control (no label/slots): composes with Field.Label inside Field.Root.\n  if (!label && !leftElement && !rightElement) return control\n\n  return (\n    <div className=\"relative flex w-full\">\n      {leftElement && <LeftElement>{leftElement}</LeftElement>}\n      {control}\n      {label && (\n        <label\n          htmlFor={inputId}\n          className={cn(\n            'pointer-events-none absolute top-1.5 cursor-text',\n            'text-body-small text-on-surface-variant transition-all duration-150 ease-out',\n            'peer-placeholder-shown:top-[17px] peer-placeholder-shown:text-body-medium',\n            'peer-focus:top-1.5 peer-focus:text-body-small',\n            'peer-data-[invalid]:text-error peer-disabled:opacity-[0.38]',\n            leftElement ? 'left-12 px-3' : 'left-3',\n          )}\n        >\n          {label}\n        </label>\n      )}\n      {rightElement && <RightElement>{rightElement}</RightElement>}\n    </div>\n  )\n}\n\ntype TextFieldProps = ComponentProps<'textarea'> & {\n  variant?: 'outlined' | 'filled'\n  label?: ReactNode\n  leftElement?: ReactNode\n  rightElement?: ReactNode\n}\n\n/**\n * Multi-line text field (port TextFieldOutlined/TextFieldFilled): textarea\n * with the same floating-label anatomy, 4 rows by default. The filled skin\n * masks the label on a surface-container-low chip so content scrolls under it,\n * per the port.\n */\nfunction TextField({\n  className,\n  variant = 'outlined',\n  label,\n  leftElement,\n  rightElement,\n  id,\n  placeholder,\n  rows = 4,\n  ...props\n}: TextFieldProps) {\n  const autoId = useId()\n  const inputId = id ?? autoId\n\n  const control = (\n    <textarea\n      id={inputId}\n      rows={rows}\n      placeholder={floatPlaceholder(label, placeholder)}\n      className={cn(\n        controlBaseClasses,\n        variant === 'outlined'\n          ? variantClasses.outlined\n          : cn(\n              'rounded-t-small border-x-0 border-b-2 border-t-0 border-outline bg-surface-container-low',\n              'hover:bg-surface-container focus:border-primary',\n            ),\n        'placeholder:text-transparent',\n        label && 'pt-[26px] sm:pt-[28px]',\n        leftElement && 'pl-[60px]',\n        rightElement && 'pr-12',\n        className,\n      )}\n      {...props}\n    />\n  )\n\n  if (!label && !leftElement && !rightElement) return control\n\n  return (\n    <div className=\"relative flex w-full\">\n      {leftElement && <LeftElement>{leftElement}</LeftElement>}\n      {control}\n      {label && (\n        <label\n          htmlFor={inputId}\n          className={cn(\n            'pointer-events-none absolute top-1 cursor-text px-3 py-1.5',\n            'text-body-small text-on-surface-variant transition-all duration-150 ease-out',\n            'peer-placeholder-shown:top-2 peer-placeholder-shown:text-body-medium',\n            'peer-focus:top-1 peer-focus:text-body-small',\n            'peer-disabled:opacity-[0.38]',\n            variant === 'filled' && 'rounded-br-small rounded-tl-small bg-surface-container-low',\n            leftElement ? 'left-12' : 'left-0',\n          )}\n        >\n          {label}\n        </label>\n      )}\n      {rightElement && <RightElement>{rightElement}</RightElement>}\n    </div>\n  )\n}\n\n/* ----------------------------------------------------------------------------\n * Port-compatible named components — same names and usage as the port:\n * placeholder (or children) is the floating label.\n * -------------------------------------------------------------------------- */\n\ntype PortLabelProps = { children?: ReactNode }\n\nfunction InputOutlined({ placeholder, children, ...props }: Omit<InputProps, 'variant' | 'label'> & PortLabelProps) {\n  return <Input variant=\"outlined\" label={children ?? placeholder} {...props} />\n}\n\nfunction InputFilled({ placeholder, children, ...props }: Omit<InputProps, 'variant' | 'label'> & PortLabelProps) {\n  return <Input variant=\"filled\" label={children ?? placeholder} {...props} />\n}\n\nfunction TextFieldOutlined({ placeholder, children, ...props }: Omit<TextFieldProps, 'variant' | 'label'> & PortLabelProps) {\n  return <TextField variant=\"outlined\" label={children ?? placeholder} {...props} />\n}\n\nfunction TextFieldFilled({ placeholder, children, ...props }: Omit<TextFieldProps, 'variant' | 'label'> & PortLabelProps) {\n  return <TextField variant=\"filled\" label={children ?? placeholder} {...props} />\n}\n\nexport { Input, TextField, InputOutlined, InputFilled, TextFieldOutlined, TextFieldFilled }\n"],"mappings":";;;;;AAuBA,IAAM,IAAiB;CACrB,UAAU,EACR,sDACA,gDACA,iGACF;CACA,QAAQ,EACN,mGACA,wDACA,6BACF;AACF,GAEM,IAAqB,EACzB,qDACA,2DACA,qDACF;AAOA,SAAS,EAAiB,GAAkB,GAAiC;CAC3E,OAAO,MAAgB,OAAO,KAAU,WAAW,IAAQ;AAC7D;AAEA,SAAS,EAAY,EAAE,eAAqC;CAC1D,OACE,kBAAC,OAAD;EAAK,WAAU;EACZ;CACE,CAAA;AAET;AAEA,SAAS,EAAa,EAAE,eAAqC;CAC3D,OACE,kBAAC,OAAD;EAAK,WAAU;EACZ;CACE,CAAA;AAET;AAYA,SAAS,EAAM,EACb,cACA,aAAU,YACV,UACA,gBACA,iBACA,OACA,gBACA,GAAG,KACU;CACb,IAAM,IAAS,EAAM,GACf,IAAU,KAAM,GAEhB,IACJ,kBAAC,GAAD;EACE,IAAI;EACJ,aAAa,EAAiB,GAAO,CAAW;EAChD,WAAW,EACT,GACA,QACA,EAAe,IACf,gCACA,KAAS,QACT,KAAe,aACf,KAAgB,SAChB,CACF;EACA,GAAI;CACL,CAAA;CAMH,OAFI,CAAC,KAAS,CAAC,KAAe,CAAC,IAAqB,IAGlD,kBAAC,OAAD;EAAK,WAAU;YAAf;GACG,KAAe,kBAAC,GAAD,EAAA,UAAc,EAAyB,CAAA;GACtD;GACA,KACC,kBAAC,SAAD;IACE,SAAS;IACT,WAAW,EACT,oDACA,gFACA,6EACA,iDACA,+DACA,IAAc,iBAAiB,QACjC;cAEC;GACI,CAAA;GAER,KAAgB,kBAAC,GAAD,EAAA,UAAe,EAA2B,CAAA;EACxD;;AAET;AAeA,SAAS,EAAU,EACjB,cACA,aAAU,YACV,UACA,gBACA,iBACA,OACA,gBACA,UAAO,GACP,GAAG,KACc;CACjB,IAAM,IAAS,EAAM,GACf,IAAU,KAAM,GAEhB,IACJ,kBAAC,YAAD;EACE,IAAI;EACE;EACN,aAAa,EAAiB,GAAO,CAAW;EAChD,WAAW,EACT,GACA,MAAY,aACR,EAAe,WACf,EACE,4FACA,iDACF,GACJ,gCACA,KAAS,0BACT,KAAe,aACf,KAAgB,SAChB,CACF;EACA,GAAI;CACL,CAAA;CAKH,OAFI,CAAC,KAAS,CAAC,KAAe,CAAC,IAAqB,IAGlD,kBAAC,OAAD;EAAK,WAAU;YAAf;GACG,KAAe,kBAAC,GAAD,EAAA,UAAc,EAAyB,CAAA;GACtD;GACA,KACC,kBAAC,SAAD;IACE,SAAS;IACT,WAAW,EACT,8DACA,gFACA,wEACA,+CACA,gCACA,MAAY,YAAY,8DACxB,IAAc,YAAY,QAC5B;cAEC;GACI,CAAA;GAER,KAAgB,kBAAC,GAAD,EAAA,UAAe,EAA2B,CAAA;EACxD;;AAET;AASA,SAAS,EAAc,EAAE,gBAAa,aAAU,GAAG,KAAiE;CAClH,OAAO,kBAAC,GAAD;EAAO,SAAQ;EAAW,OAAO,KAAY;EAAa,GAAI;CAAQ,CAAA;AAC/E;AAEA,SAAS,EAAY,EAAE,gBAAa,aAAU,GAAG,KAAiE;CAChH,OAAO,kBAAC,GAAD;EAAO,SAAQ;EAAS,OAAO,KAAY;EAAa,GAAI;CAAQ,CAAA;AAC7E;AAEA,SAAS,EAAkB,EAAE,gBAAa,aAAU,GAAG,KAAqE;CAC1H,OAAO,kBAAC,GAAD;EAAW,SAAQ;EAAW,OAAO,KAAY;EAAa,GAAI;CAAQ,CAAA;AACnF;AAEA,SAAS,EAAgB,EAAE,gBAAa,aAAU,GAAG,KAAqE;CACxH,OAAO,kBAAC,GAAD;EAAW,SAAQ;EAAS,OAAO,KAAY;EAAa,GAAI;CAAQ,CAAA;AACjF"}

package/dist/components/form/app-form.d.ts

@@ -0,0 +1,71 @@
+import { Button } from '../../../components/button';
+import { DatePicker } from '../../../components/date-picker';
+import { Input, TextField } from './Input';
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * App forms — TanStack Form (https://tanstack.com/form) bound to the M3 text
+ * fields ported from port/core/ui/components/text-field. This is the
+ * recommended way to build forms in this app; the Base UI Form/Field family
+ * remains for the design-guide catalog.
+ *
+ * `useAppForm` pre-binds field components via TanStack's createFormHook, so
+ * fields read state from field context — no manual value/onChange wiring:
+ *
+ *   const form = useAppForm({
+ *     defaultValues: { email: '', story: '', agree: false },
+ *     onSubmit: async ({ value }) => save(value),
+ *   })
+ *
+ *   <form onSubmit={(e) => { e.preventDefault(); form.handleSubmit() }}>
+ *     <form.AppField
+ *       name="email"
+ *       validators={{ onChange: ({ value }) => (!value ? 'Required' : undefined) }}
+ *     >
+ *       {(field) => <field.TextField label="Email" />}
+ *     </form.AppField>
+ *     <form.AppForm>
+ *       <form.SubmitButton>Save</form.SubmitButton>
+ *     </form.AppForm>
+ *   </form>
+ */
+export declare const fieldContext: import('react').Context<import('@tanstack/react-form').AnyFieldApi>, formContext: import('react').Context<import('@tanstack/react-form').AnyFormApi>, useFieldContext: <TData>() => import('@tanstack/react-form').FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>, useFormContext: () => import('@tanstack/react-form').ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;
+type BoundTextFieldProps = Omit<ComponentProps<typeof Input>, 'value' | 'onChange' | 'onBlur' | 'name'>;
+/** Single-line M3 text field bound to the field context (port anatomy). */
+declare function AppTextField({ className, ...props }: BoundTextFieldProps): import("react").JSX.Element;
+type BoundTextAreaProps = Omit<ComponentProps<typeof TextField>, 'value' | 'onChange' | 'onBlur' | 'name'>;
+/** Multi-line M3 text field bound to the field context (port anatomy). */
+declare function AppTextArea({ className, ...props }: BoundTextAreaProps): import("react").JSX.Element;
+/** Port-styled checkbox bound to a boolean field. */
+declare function AppCheckbox({ label }: {
+    label: ReactNode;
+}): import("react").JSX.Element;
+type BoundDatePickerProps = Omit<ComponentProps<typeof DatePicker>, 'value' | 'onChange' | 'name'>;
+/** M3 docked date picker bound to a `Date | null` field. */
+declare function AppDatePicker({ className, ...props }: BoundDatePickerProps): import("react").JSX.Element;
+/** Filled M3 submit button; disabled while the form can't submit. */
+declare function SubmitButton({ children, ...props }: ComponentProps<typeof Button.Root>): import("react").JSX.Element;
+export declare const useAppForm: <TFormData, TOnMount extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnChange extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta>(props: import('@tanstack/react-form').FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => import('@tanstack/react-form').AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {
+    readonly TextField: typeof AppTextField;
+    readonly TextArea: typeof AppTextArea;
+    readonly Checkbox: typeof AppCheckbox;
+    readonly DatePicker: typeof AppDatePicker;
+}, {
+    readonly SubmitButton: typeof SubmitButton;
+}>, withForm: <TFormData, TOnMount extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnChange extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta, TRenderProps extends object = {}>({ render, props, }: import('@tanstack/react-form').WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {
+    readonly TextField: typeof AppTextField;
+    readonly TextArea: typeof AppTextArea;
+    readonly Checkbox: typeof AppCheckbox;
+    readonly DatePicker: typeof AppDatePicker;
+}, {
+    readonly SubmitButton: typeof SubmitButton;
+}, TRenderProps>) => import('react').FunctionComponent<import('react').PropsWithChildren<NoInfer<[unknown] extends [TRenderProps] ? any : TRenderProps> & {
+    form: import('@tanstack/react-form').AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined] extends [TOnMount] ? [TOnMount] extends [TOnMount & (import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount : TOnMount, [import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined] extends [TOnChange] ? [TOnChange] extends [TOnChange & (import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange : TOnChange, [import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync] ? [TOnChangeAsync] extends [TOnChangeAsync & (import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync : TOnChangeAsync, [import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined] extends [TOnBlur] ? [TOnBlur] extends [TOnBlur & (import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur : TOnBlur, [import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync] ? [TOnBlurAsync] extends [TOnBlurAsync & (import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync : TOnBlurAsync, [import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit] ? [TOnSubmit] extends [TOnSubmit & (import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit : TOnSubmit, [import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync] ? [TOnSubmitAsync] extends [TOnSubmitAsync & (import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync : TOnSubmitAsync, [import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic] ? [TOnDynamic] extends [TOnDynamic & (import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic : TOnDynamic, [import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync] ? [TOnDynamicAsync] extends [TOnDynamicAsync & (import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync : TOnDynamicAsync, [import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined] extends [TOnServer] ? [TOnServer] extends [TOnServer & (import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer : TOnServer, [unknown] extends [TSubmitMeta] ? any : TSubmitMeta, {
+        readonly TextField: typeof AppTextField;
+        readonly TextArea: typeof AppTextArea;
+        readonly Checkbox: typeof AppCheckbox;
+        readonly DatePicker: typeof AppDatePicker;
+    }, {
+        readonly SubmitButton: typeof SubmitButton;
+    }>;
+}>>;
+export {};