@agentero/design-system 0.29.1 → 0.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.29.1",
+	"version": "0.31.0",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -49,6 +49,10 @@
 			"types": "./src/checkbox/index.d.ts",
 			"import": "./src/checkbox/index.js"
 		},
+		"./combobox": {
+			"types": "./src/combobox/index.d.ts",
+			"import": "./src/combobox/index.js"
+		},
 		"./command": {
 			"types": "./src/command/index.d.ts",
 			"import": "./src/command/index.js"
@@ -133,6 +137,10 @@
 			"types": "./src/tag/index.d.ts",
 			"import": "./src/tag/index.js"
 		},
+		"./textarea": {
+			"types": "./src/textarea/index.d.ts",
+			"import": "./src/textarea/index.js"
+		},
 		"./toast": {
 			"types": "./src/toast/index.d.ts",
 			"import": "./src/toast/index.js"
@@ -172,6 +180,7 @@
 		}
 	},
 	"dependencies": {
+		"@base-ui/react": "^1.8.0",
 		"@radix-ui/react-accordion": "^1.2.14",
 		"@radix-ui/react-avatar": "^1.1.11",
 		"@radix-ui/react-checkbox": "^1.3.11",

package/src/combobox/combobox.d.ts

@@ -0,0 +1,200 @@
+import { ComponentPropsWithRef } from 'react';
+import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
+import { InputSize } from '../input';
+/**
+ * Style recipe for Combobox. The surface carries its own chrome — border,
+ * background and shadow — because the list it holds is plain content.
+ *
+ * @summary tailwind-variants recipe backing the Combobox surface and list styles
+ */
+export declare const comboboxRecipe: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            list?: import('tailwind-merge').ClassNameValue;
+            clear?: import('tailwind-merge').ClassNameValue;
+            item?: import('tailwind-merge').ClassNameValue;
+            field?: import('tailwind-merge').ClassNameValue;
+            message?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            list?: import('tailwind-merge').ClassNameValue;
+            clear?: import('tailwind-merge').ClassNameValue;
+            item?: import('tailwind-merge').ClassNameValue;
+            field?: import('tailwind-merge').ClassNameValue;
+            message?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    field: string;
+    clear: string[];
+    content: string[];
+    list: string[];
+    item: string[];
+    message: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            list?: import('tailwind-merge').ClassNameValue;
+            clear?: import('tailwind-merge').ClassNameValue;
+            item?: import('tailwind-merge').ClassNameValue;
+            field?: import('tailwind-merge').ClassNameValue;
+            message?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    field: string;
+    clear: string[];
+    content: string[];
+    list: string[];
+    item: string[];
+    message: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    field: string;
+    clear: string[];
+    content: string[];
+    list: string[];
+    item: string[];
+    message: string[];
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * Root of a combobox: a text input that filters a list of options and writes the
+ * chosen one back into itself. With `Input` as the only trigger, the list opens on
+ * focus or on the first keystroke.
+ *
+ * Pass the options as `items`. For a list that comes from the server, set
+ * `filter={null}`, hand the already-filtered rows to `filteredItems`, and request
+ * them from `onInputValueChange`; `Status` then announces the wait.
+ *
+ * @summary Root provider for an input-triggered filterable list
+ * @see {@link https://base-ui.com/react/components/combobox|Base UI Combobox}
+ *
+ * @example
+ * ```tsx
+ * import { Combobox } from '@agentero/design-system/combobox';
+ *
+ * <Combobox.Root items={states}>
+ *   <Combobox.Input placeholder="Search states" />
+ *   <Combobox.Content>
+ *     <Combobox.Empty>No matches found</Combobox.Empty>
+ *     <Combobox.List>
+ *       {(state: string) => <Combobox.Item key={state} value={state}>{state}</Combobox.Item>}
+ *     </Combobox.List>
+ *   </Combobox.Content>
+ * </Combobox.Root>
+ * ```
+ */
+export declare const Root: {
+    <Value, Multiple extends boolean | undefined = false, Item = Value>(props: ComboboxPrimitive.Root.Props<Value, Multiple, Item>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type InputProps = Omit<ComponentPropsWithRef<typeof ComboboxPrimitive.Input>, 'size'> & {
+    /** Control height, matching `Input`. Defaults to `'md'`. */
+    size?: InputSize;
+    /**
+     * Accessible name for the clear button. Defaults to `'Clear'`; name it after
+     * the field when a page carries several comboboxes.
+     */
+    clearLabel?: string;
+};
+/**
+ * The search field, which doubles as the trigger: focusing or typing opens the
+ * list. It wears the same styling as `Input` and takes the same wiring from
+ * `InputContext`, so inside a `FieldText` the label, the hint and the error point
+ * at it with nothing passed by hand. Its own props win over the context.
+ *
+ * It always carries a clear button, which Base UI mounts only once there is
+ * something to clear, so an untouched field shows nothing. Name it with
+ * `clearLabel` when a page has more than one combobox.
+ *
+ * Pass `render` to swap the element for a richer control — a field with a leading
+ * search icon, for instance — and the combobox wiring rides along.
+ *
+ * @summary Search field that opens the list on focus and filters it as you type
+ * @dataAttribute {string} data-slot - Always set to "combobox-input"
+ */
+export declare const Input: {
+    ({ clearLabel, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type ContentProps = ComponentPropsWithRef<typeof ComboboxPrimitive.Popup> & Pick<ComponentPropsWithRef<typeof ComboboxPrimitive.Positioner>, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor' | 'collisionPadding'>;
+/**
+ * The floating surface holding the list. It portals to the body, matches the
+ * input's width and caps its height to the space actually available, so a list
+ * near the bottom of the viewport scrolls instead of overflowing.
+ *
+ * `sideOffset` defaults to 12, the gap the legacy Datalist kept. It is wider than
+ * the 8 every other surface uses on purpose: those hang off a button, while this
+ * one sits under a focused input whose ring is already two near-black pixels, and
+ * at 8 the two borders fight.
+ *
+ * @summary Floating surface anchored to the input, holding the list
+ * @dataAttribute {string} data-slot - Always set to "combobox-content"
+ */
+export declare const Content: {
+    ({ className, side, align, sideOffset, alignOffset, anchor, collisionPadding, ...props }: ContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type ListProps = ComponentPropsWithRef<typeof ComboboxPrimitive.List>;
+/**
+ * Scrollable container for the items. Give it a function as its child to render
+ * one `Item` per entry of the root's `items`.
+ *
+ * Base UI ships the listbox unnamed, which axe flags, so it carries a generic
+ * `aria-label`. Name it after the field when a page has more than one — and note
+ * it cannot borrow the input's name: `aria-labelledby` pointing at a text field
+ * resolves to that field's *value*, so the list would rename itself on every
+ * keystroke.
+ *
+ * @summary Scrollable list of the filtered items
+ * @dataAttribute {string} data-slot - Always set to "combobox-list"
+ */
+export declare const List: {
+    ({ className, ...props }: ListProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type ItemProps = ComponentPropsWithRef<typeof ComboboxPrimitive.Item>;
+/**
+ * A selectable row. `value` is what the combobox stores and what
+ * `itemToStringLabel` turns into the text written back into the input.
+ *
+ * @summary Selectable row inside the list
+ * @dataAttribute {string} data-slot - Always set to "combobox-item"
+ */
+export declare const Item: {
+    ({ className, ...props }: ItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type EmptyProps = ComponentPropsWithRef<typeof ComboboxPrimitive.Empty>;
+/**
+ * Shown in place of the list when nothing matches, and announced politely. It
+ * needs `items` on `Root` to know the list is empty, and it must stay mounted —
+ * change its children rather than rendering it conditionally.
+ *
+ * @summary Message shown when no item matches the query
+ * @dataAttribute {string} data-slot - Always set to "combobox-empty"
+ */
+export declare const Empty: {
+    ({ className, ...props }: EmptyProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type StatusProps = ComponentPropsWithRef<typeof ComboboxPrimitive.Status>;
+/**
+ * Announces the state of a list that is still loading. Use it for the wait on a
+ * remote search: keep it mounted and swap its children. It does not mark the
+ * surface busy on its own — pass `aria-busy` to `Content` while the request is in
+ * flight, as Base UI's own examples do.
+ *
+ * @summary Politely announced status message for an async list
+ * @dataAttribute {string} data-slot - Always set to "combobox-status"
+ */
+export declare const Status: {
+    ({ className, ...props }: StatusProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/src/combobox/combobox.js

@@ -0,0 +1,118 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { useMergeProps as t } from "../../lib/merge-props.js";
+import { ComboboxRoot as n } from "../../node_modules/@base-ui/react/combobox/root/ComboboxRoot.js";
+import { ComboboxInput as r } from "../../node_modules/@base-ui/react/combobox/input/ComboboxInput.js";
+import { ComboboxList as i } from "../../node_modules/@base-ui/react/combobox/list/ComboboxList.js";
+import { ComboboxStatus as a } from "../../node_modules/@base-ui/react/combobox/status/ComboboxStatus.js";
+import { ComboboxPortal as o } from "../../node_modules/@base-ui/react/combobox/portal/ComboboxPortal.js";
+import { ComboboxPositioner as s } from "../../node_modules/@base-ui/react/combobox/positioner/ComboboxPositioner.js";
+import { ComboboxPopup as c } from "../../node_modules/@base-ui/react/combobox/popup/ComboboxPopup.js";
+import { ComboboxItem as l } from "../../node_modules/@base-ui/react/combobox/item/ComboboxItem.js";
+import { ComboboxEmpty as u } from "../../node_modules/@base-ui/react/combobox/empty/ComboboxEmpty.js";
+import { ComboboxClear as d } from "../../node_modules/@base-ui/react/combobox/clear/ComboboxClear.js";
+import { InputContext as f } from "../input/context.js";
+import { inputRecipe as p } from "../input/input.js";
+import { IconCancel as m } from "./icons.js";
+import { tv as h } from "tailwind-variants";
+import { use as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/combobox/combobox.tsx
+var y = h({ slots: {
+	field: "relative",
+	clear: [
+		"absolute top-1/2 right-3 flex size-6 -translate-y-1/2 cursor-pointer items-center",
+		"justify-center rounded-sm [&>svg>path]:fill-icon-input-default",
+		"hover:[&>svg>path]:fill-icon-default-base-primary",
+		"disabled:cursor-default disabled:[&>svg>path]:fill-icon-input-disable"
+	],
+	content: [
+		"w-(--anchor-width) max-h-(--available-height) overflow-hidden rounded-md",
+		"border border-border-default-base-primary bg-bg-default-base-primary shadow-lg",
+		"data-[side=bottom]:origin-top data-[side=top]:origin-bottom",
+		"transition-[scale,opacity] duration-100 ease-in-out",
+		"data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+		"data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+		"motion-reduce:transition-none"
+	],
+	list: ["max-h-[min(10.25rem,var(--available-height))] overflow-y-auto scroll-py-2 py-2 outline-none", "data-empty:py-0"],
+	item: [
+		"mx-2 my-px flex cursor-pointer items-center rounded-[calc(var(--radius-md)-2px)]",
+		"px-3 py-2 text-sm text-text-default-base-primary select-none",
+		"data-highlighted:bg-bg-default-base-primary-hover",
+		"data-disabled:cursor-default data-disabled:text-text-default-base-tertiary"
+	],
+	message: ["mx-2 my-px px-3 py-2 text-sm text-text-default-base-tertiary", "empty:m-0 empty:p-0"]
+} }), b = y(), x = (e) => /* @__PURE__ */ _(n, { ...e });
+x.displayName = "Combobox.Root";
+var S = /* @__PURE__ */ new Set([
+	"value",
+	"defaultValue",
+	"onChange"
+]), C = (e) => {
+	let n = g(f), r = n ? Object.fromEntries(Object.entries(n).filter(([e]) => !S.has(e))) : null;
+	return t(r, e);
+}, w = ({ clearLabel: t = "Clear", ...n }) => {
+	let { className: i, size: a = "md", ...o } = C(n);
+	return /* @__PURE__ */ v("div", {
+		"data-slot": "combobox-field",
+		className: b.field(),
+		children: [/* @__PURE__ */ _(r, {
+			"data-slot": "combobox-input",
+			"data-size": a,
+			className: e(p({ size: a }), "pr-11", i),
+			...o
+		}), /* @__PURE__ */ _(d, {
+			"data-slot": "combobox-clear",
+			"aria-label": t,
+			className: b.clear(),
+			children: /* @__PURE__ */ _(m, {})
+		})]
+	});
+};
+w.displayName = "Combobox.Input";
+var T = ({ className: t, side: n = "bottom", align: r = "start", sideOffset: i = 12, alignOffset: a, anchor: l, collisionPadding: u = 8, ...d }) => /* @__PURE__ */ _(o, { children: /* @__PURE__ */ _(s, {
+	side: n,
+	align: r,
+	sideOffset: i,
+	alignOffset: a,
+	anchor: l,
+	collisionPadding: u,
+	className: "isolate z-(--z-index-top-layer) pointer-events-auto",
+	children: /* @__PURE__ */ _(c, {
+		"data-slot": "combobox-content",
+		className: e(b.content(), t),
+		...d
+	})
+}) });
+T.displayName = "Combobox.Content";
+var E = ({ className: t, ...n }) => {
+	let r = "aria-label" in n || "aria-labelledby" in n;
+	return /* @__PURE__ */ _(i, {
+		"data-slot": "combobox-list",
+		"aria-label": r ? void 0 : "Suggestions",
+		className: e(b.list(), t),
+		...n
+	});
+};
+E.displayName = "Combobox.List";
+var D = ({ className: t, ...n }) => /* @__PURE__ */ _(l, {
+	"data-slot": "combobox-item",
+	className: e(b.item(), t),
+	...n
+});
+D.displayName = "Combobox.Item";
+var O = ({ className: t, ...n }) => /* @__PURE__ */ _(u, {
+	"data-slot": "combobox-empty",
+	className: e(b.message(), t),
+	...n
+});
+O.displayName = "Combobox.Empty";
+var k = ({ className: t, ...n }) => /* @__PURE__ */ _(a, {
+	"data-slot": "combobox-status",
+	className: e(b.message(), t),
+	...n
+});
+k.displayName = "Combobox.Status";
+//#endregion
+export { T as Content, O as Empty, w as Input, D as Item, E as List, x as Root, k as Status, y as comboboxRecipe };

package/src/combobox/icons.d.ts

@@ -0,0 +1,10 @@
+import { SVGProps } from 'react';
+/**
+ * Circled cross rendered inside `Combobox.Clear`, the affordance the legacy
+ * search field used. Fill color is supplied by the surrounding class
+ * (`[&>path]:fill-...`) so the icon follows the button's state instead of
+ * carrying a color of its own.
+ *
+ * @summary 24px cancel icon used as the Combobox clear affordance
+ */
+export declare const IconCancel: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/src/combobox/icons.js

@@ -0,0 +1,13 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/combobox/icons.tsx
+var t = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M12 13.0538L15.0731 16.1269C15.2115 16.2654 15.3856 16.3362 15.5952 16.3394C15.8048 16.3426 15.982 16.2718 16.1269 16.1269C16.2718 15.982 16.3442 15.8064 16.3442 15.6C16.3442 15.3936 16.2718 15.218 16.1269 15.0731L13.0538 12L16.1269 8.9269C16.2653 8.78845 16.3362 8.61442 16.3394 8.4048C16.3426 8.1952 16.2718 8.01797 16.1269 7.8731C15.982 7.72822 15.8064 7.65577 15.6 7.65577C15.3936 7.65577 15.2179 7.72822 15.0731 7.8731L12 10.9462L8.92688 7.8731C8.78842 7.73463 8.61439 7.6638 8.40478 7.6606C8.19518 7.65738 8.01794 7.72822 7.87308 7.8731C7.72819 8.01797 7.65575 8.1936 7.65575 8.4C7.65575 8.6064 7.72819 8.78203 7.87308 8.9269L10.9461 12L7.87308 15.0731C7.73461 15.2115 7.66378 15.3856 7.66058 15.5952C7.65736 15.8048 7.72819 15.982 7.87308 16.1269C8.01794 16.2718 8.19358 16.3442 8.39998 16.3442C8.60638 16.3442 8.78201 16.2718 8.92688 16.1269L12 13.0538ZM12.0016 21.5C10.6877 21.5 9.45268 21.2506 8.29655 20.752C7.1404 20.2533 6.13472 19.5766 5.2795 18.7217C4.42427 17.8669 3.74721 16.8616 3.24833 15.706C2.74944 14.5504 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45271 3.248 8.29657C3.74667 7.14042 4.42342 6.13474 5.27825 5.27952C6.1331 4.42429 7.13834 3.74723 8.29398 3.24835C9.44959 2.74947 10.6844 2.50002 11.9983 2.50002C13.3122 2.50002 14.5473 2.74936 15.7034 3.24802C16.8596 3.74669 17.8652 4.42344 18.7205 5.27827C19.5757 6.13312 20.2527 7.13837 20.7516 8.294C21.2505 9.44962 21.5 10.6844 21.5 11.9983C21.5 13.3123 21.2506 14.5473 20.752 15.7034C20.2533 16.8596 19.5765 17.8653 18.7217 18.7205C17.8669 19.5757 16.8616 20.2528 15.706 20.7516C14.5504 21.2505 13.3156 21.5 12.0016 21.5ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76664 4 7.87498 4.775 6.32498 6.325C4.77498 7.875 3.99998 9.76667 3.99998 12C3.99998 14.2333 4.77498 16.125 6.32498 17.675C7.87498 19.225 9.76664 20 12 20Z" })
+});
+//#endregion
+export { t as IconCancel };

package/src/combobox/index.d.ts

@@ -0,0 +1,34 @@
+export { comboboxRecipe } from './combobox';
+export declare const Combobox: {
+    Root: {
+        <Value, Multiple extends boolean | undefined = false, Item = Value>(props: import("@base-ui/react/combobox").ComboboxRoot.Props<Value, Multiple, Item>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Input: {
+        ({ clearLabel, ...props }: Omit<Omit<import('@base-ui/react/combobox').ComboboxInputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>, "size"> & {
+            size?: import('../input').InputSize;
+            clearLabel?: string;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ className, side, align, sideOffset, alignOffset, anchor, collisionPadding, ...props }: Omit<import('@base-ui/react/combobox').ComboboxPopupProps, "ref"> & import('react').RefAttributes<HTMLDivElement> & Pick<Omit<import('@base-ui/react/combobox').ComboboxPositionerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "anchor" | "align" | "side" | "sideOffset" | "alignOffset" | "collisionPadding">): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    List: {
+        ({ className, ...props }: Omit<import('@base-ui/react/combobox').ComboboxListProps, "ref"> & import('react').RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        ({ className, ...props }: Omit<import('@base-ui/react/combobox').ComboboxItemProps, "ref"> & import('react').RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Empty: {
+        ({ className, ...props }: Omit<import('@base-ui/react/combobox').ComboboxEmptyProps, "ref"> & import('react').RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Status: {
+        ({ className, ...props }: Omit<import('@base-ui/react/combobox').ComboboxStatusProps, "ref"> & import('react').RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};

package/src/combobox/index.js

@@ -0,0 +1,13 @@
+import { Content as e, Empty as t, Input as n, Item as r, List as i, Root as a, Status as o, comboboxRecipe as s } from "./combobox.js";
+//#region src/combobox/index.ts
+var c = {
+	Root: a,
+	Input: n,
+	Content: e,
+	List: i,
+	Item: r,
+	Empty: t,
+	Status: o
+};
+//#endregion
+export { c as Combobox, s as comboboxRecipe };

package/src/field-text/field-text.js

@@ -1,11 +1,11 @@
 "use client";
-import { useFieldContext as e } from "../field/context.js";
-import { Field as t } from "../field/index.js";
-import { InputContext as n } from "../input/context.js";
+import { InputContext as e } from "../input/context.js";
+import { useFieldContext as t } from "../field/context.js";
+import { Field as n } from "../field/index.js";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/field-text/field-text.tsx
-var i = ({ children: t }) => {
-	let i = e(), a = i && {
+var i = ({ children: n }) => {
+	let i = t(), a = i && {
 		id: i.controlId,
 		"aria-describedby": i.describedBy,
 		"aria-invalid": i.invalid || void 0,
@@ -13,12 +13,12 @@ var i = ({ children: t }) => {
 		disabled: i.disabled || void 0,
 		readOnly: i.readOnly || void 0
 	};
-	return /* @__PURE__ */ r(n, {
+	return /* @__PURE__ */ r(e, {
 		value: a,
-		children: t
+		children: n
 	});
-}, a = ({ children: e, ...n }) => /* @__PURE__ */ r(t.Root, {
-	...n,
+}, a = ({ children: e, ...t }) => /* @__PURE__ */ r(n.Root, {
+	...t,
 	children: /* @__PURE__ */ r(i, { children: e })
 });
 a.displayName = "FieldText";

package/src/form-text/form-text.js

@@ -1,7 +1,7 @@
 "use client";
 import { mergeProps as e } from "../../lib/merge-props.js";
-import { Field as t } from "../field/index.js";
-import { Input as n } from "../input/input.js";
+import { Input as t } from "../input/input.js";
+import { Field as n } from "../field/index.js";
 import { FieldText as r } from "../field-text/field-text.js";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import { useController as o } from "react-hook-form";
@@ -23,15 +23,15 @@ var s = ({ name: s, control: c, rules: l, shouldUnregister: u, disabled: d, labe
 		invalid: b.invalid,
 		disabled: d || y.disabled,
 		...v,
-		children: [/* @__PURE__ */ i(t.Label, {
+		children: [/* @__PURE__ */ i(n.Label, {
 			tooltip: m,
 			tooltipSide: h,
 			optional: g,
 			children: f
-		}), /* @__PURE__ */ a(t.Content, { children: [
-			/* @__PURE__ */ i(n, { ...e(x, _ ?? {}) }),
-			p && /* @__PURE__ */ i(t.Description, { children: p }),
-			/* @__PURE__ */ i(t.Error, { errors: b.error ? [b.error] : void 0 })
+		}), /* @__PURE__ */ a(n.Content, { children: [
+			/* @__PURE__ */ i(t, { ...e(x, _ ?? {}) }),
+			p && /* @__PURE__ */ i(n.Description, { children: p }),
+			/* @__PURE__ */ i(n.Error, { errors: b.error ? [b.error] : void 0 })
 		] })]
 	});
 };

package/src/textarea/index.d.ts

@@ -0,0 +1,2 @@
+export { TextArea, textAreaRecipe } from './textarea';
+export type { TextAreaProps, TextAreaSize, TextAreaVariants } from './textarea';

package/src/textarea/index.js

@@ -0,0 +1,2 @@
+import { TextArea as e, textAreaRecipe as t } from "./textarea.js";
+export { e as TextArea, t as textAreaRecipe };

package/src/textarea/textarea.d.ts

@@ -0,0 +1,88 @@
+import { ComponentPropsWithRef } from 'react';
+import { VariantProps } from 'tailwind-variants';
+/**
+ * Extends `inputRecipe`, trading Input's fixed height for a minimum one. The
+ * handle drags vertically only, so the control can never break its column.
+ *
+ * @summary tailwind-variants recipe backing the TextArea component styles
+ */
+export declare const textAreaRecipe: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "block resize-y", {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, string[], {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>>;
+export type TextAreaVariants = VariantProps<typeof textAreaRecipe>;
+/** Control size, the same three as Input. */
+export type TextAreaSize = NonNullable<TextAreaVariants['size']>;
+/** Every `<textarea>` attribute is forwarded; these are redeclared so the docs and the MCP manifest list them. */
+export type TextAreaProps = ComponentPropsWithRef<'textarea'> & {
+    /**
+     * Defaults to `'md'`. The first row measures one Input of the same size and
+     * three rows show at rest: `sm` 76px, `md` 84px, `lg` 96px (`lg` also raises
+     * the text to `base` and the radius to `lg`).
+     */
+    size?: TextAreaSize;
+    /** Rows visible at rest when three are not enough. */
+    rows?: number;
+    /** Hint shown while empty; never a substitute for a label. */
+    placeholder?: string;
+    /** Caps the value in UTF-16 code units: typing stops there and a paste is cut. */
+    maxLength?: number;
+    /**
+     * Blocks interaction and drops the value from the submission. Use `readOnly`
+     * when the user still needs to read or copy it.
+     */
+    disabled?: boolean;
+    /** Focusable, copyable and submitted, but not editable. */
+    readOnly?: boolean;
+    /** Marks the control required for both the browser and assistive technology. */
+    required?: boolean;
+    /** Drives the destructive border and is what assistive technology announces. */
+    'aria-invalid'?: ComponentPropsWithRef<'textarea'>['aria-invalid'];
+};
+/**
+ * TextArea is the design system's multi-line text control: Input's skin, states
+ * and sizes on a single `<textarea>` with nothing around it, so the native
+ * resize handle and scrollbar keep working. Pair it with
+ * [Label](?path=/docs/components-label--docs) the way you pair an Input.
+ *
+ * It wires nothing itself — `id`, `aria-describedby` and `aria-invalid` are the
+ * field owner's job, and there is no `status` prop. It holds no value either, so
+ * a character counter belongs to whoever owns it.
+ *
+ * @summary Base multi-line text control sharing Input's skin, states and sizes
+ *
+ * @example
+ * <Label htmlFor="notes">Notes</Label>
+ * <TextArea id="notes" placeholder="Anything the underwriter should know" />
+ */
+export declare const TextArea: {
+    (props: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/textarea/textarea.js

@@ -0,0 +1,26 @@
+import { cn as e } from "../../lib/utils.js";
+import { inputRecipe as t } from "../input/input.js";
+import { tv as n } from "tailwind-variants";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/textarea/textarea.tsx
+var i = n({
+	extend: t,
+	base: "block resize-y",
+	variants: { size: {
+		sm: "h-auto min-h-19 py-1",
+		md: "h-auto min-h-21 py-2",
+		lg: "h-auto min-h-24 py-2.75"
+	} },
+	defaultVariants: { size: "md" }
+}), a = (t) => {
+	let { className: n, size: a, ...o } = t;
+	return /* @__PURE__ */ r("textarea", {
+		"data-slot": "textarea",
+		"data-size": a,
+		className: e(i({ size: a }), n),
+		...o
+	});
+};
+a.displayName = "TextArea";
+//#endregion
+export { a as TextArea, i as textAreaRecipe };