@stridge/noctis 1.0.0-beta.0

package/dist/components/tabs/tabs.js

@@ -0,0 +1,118 @@
+"use client";
+import { Icon } from "../../icons/icon.js";
+import { tabs_exports } from "../../primitives/tabs.js";
+import { TabsProvider, useTabsContext } from "./tabs.context.js";
+import { TABS_SLOTS } from "./tabs.slots.js";
+import { indicatorProps, listProps, panelProps, rootProps, tabProps } from "./tabs.props.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/tabs/tabs.tsx
+/**
+* Owns the active value and shares the `variant`/`size` with the strip. Works controlled (`value` +
+* `onValueChange`) or uncontrolled (`defaultValue`). Compose `Tabs.List` (holding `Tabs.Tab`s and a
+* `Tabs.Indicator`) with one `Tabs.Panel` per value.
+*/
+function TabsRoot({ variant = "line", size = "md", color = "primary", className, children, ...props }) {
+	return /* @__PURE__ */ jsx(tabs_exports.Tabs.Root, {
+		"data-slot": TABS_SLOTS.root,
+		"data-variant": variant,
+		"data-size": size,
+		"data-color": color,
+		className,
+		...props,
+		children: /* @__PURE__ */ jsx(TabsProvider, {
+			value: {
+				variant,
+				size
+			},
+			children
+		})
+	});
+}
+/**
+* The row of tabs. Holds the `Tab`s and a single `Indicator`, and carries the strip's `variant` look.
+* Arrow keys move between tabs and switch immediately (`activateOnFocus`); set it `false` for manual
+* activation (move with arrows, commit with Enter/Space) when showing a panel is expensive.
+*/
+function TabsList({ activateOnFocus = true, className, ...props }) {
+	useTabsContext("List");
+	return /* @__PURE__ */ jsx(tabs_exports.Tabs.List, {
+		"data-slot": TABS_SLOTS.list,
+		className,
+		activateOnFocus,
+		...props
+	});
+}
+/** One tab. Names its panel; pass `value` to match a `Panel`. Optional leading `icon`. */
+function TabsTab({ icon, className, children, ...props }) {
+	const { size } = useTabsContext("Tab");
+	return /* @__PURE__ */ jsxs(tabs_exports.Tabs.Tab, {
+		"data-slot": TABS_SLOTS.tab,
+		className,
+		...props,
+		children: [icon ? /* @__PURE__ */ jsx(Icon, {
+			icon,
+			size: size === "sm" ? "sm" : "md"
+		}) : null, children]
+	});
+}
+/** Pins the indicator to the strip's bottom rule (line) or behind the active tab (pill/segmented). */
+function lineStyle(variant) {
+	if (variant === "line") return {
+		left: "var(--active-tab-left)",
+		width: "var(--active-tab-width)"
+	};
+	return {
+		left: "var(--active-tab-left)",
+		top: "var(--active-tab-top)",
+		width: "var(--active-tab-width)",
+		height: "var(--active-tab-height)"
+	};
+}
+/** The sliding active highlight. Render it once inside `Tabs.List`; it follows the active tab. */
+function TabsIndicator({ className, style, ...props }) {
+	const { variant } = useTabsContext("Indicator");
+	return /* @__PURE__ */ jsx(tabs_exports.Tabs.Indicator, {
+		"data-slot": TABS_SLOTS.indicator,
+		className,
+		style: {
+			...lineStyle(variant),
+			...style
+		},
+		...props
+	});
+}
+/** The content for one tab. Match its `value` to a `Tab`. Only the active panel is shown. */
+function TabsPanel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(tabs_exports.Tabs.Panel, {
+		"data-slot": TABS_SLOTS.panel,
+		className,
+		...props
+	});
+}
+/**
+* A tabbed control: a strip of tabs over swappable panels, with a single highlight that slides between
+* the active tab. Three looks — `line` (underline), `pill` (floating pill), and `segmented` (raised
+* pill in a sunken track) — in two sizes. Built on Base UI's Tabs, so the strip is fully
+* keyboard-operable (arrows, Home/End), RTL-aware, and the indicator animation respects
+* `prefers-reduced-motion`.
+*
+* Compose from parts: `Tabs.Root` owns the value and the shared `variant`/`size`, `Tabs.List` holds
+* the `Tabs.Tab`s and one `Tabs.Indicator`, and a `Tabs.Panel` renders each value's content.
+*
+* The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are
+* exposed through the matching `Tabs` namespace — e.g. `Tabs.Tab.Props`.
+*/
+const Tabs = {
+	/** Owns the value and the shared look/size. `Tabs.Root.props({ variant, size })` → its spreadable prop bag. */
+	Root: Object.assign(TabsRoot, { props: rootProps }),
+	/** The tab strip. `Tabs.List.props()` → its spreadable prop bag. */
+	List: Object.assign(TabsList, { props: listProps }),
+	/** One tab. `Tabs.Tab.props({ selected, disabled })` → its spreadable prop bag for a foreign element. */
+	Tab: Object.assign(TabsTab, { props: tabProps }),
+	/** The sliding highlight. `Tabs.Indicator.props()` → its spreadable prop bag. */
+	Indicator: Object.assign(TabsIndicator, { props: indicatorProps }),
+	/** One panel. `Tabs.Panel.props()` → its spreadable prop bag. */
+	Panel: Object.assign(TabsPanel, { props: panelProps })
+};
+//#endregion
+export { Tabs };

package/dist/components/tabs/tabs.props.d.ts

@@ -0,0 +1,59 @@
+import { TabsColor, TabsSize, TabsVariant } from "./tabs.context.js";
+
+//#region src/components/tabs/tabs.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `Tabs.*.props()` returns. */
+type TabsPartProps = {
+  /** The slot value the matching `tabs.css` rules anchor on. */"data-slot": string; /** Forwarded verbatim — styling is attribute-driven, so this is an optional consumer passthrough. */
+  className?: string; /** A data-attribute present (empty string) or absent (`undefined`); never `false`. */
+  [attr: `data-${string}`]: string | undefined;
+};
+/** Common shape: every part's `.props()` accepts an optional `className` passthrough. */
+interface BasePropsArgs {
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/** Argument to `Tabs.Root.props(...)` — the strip's shared look + size, stamped on the root the CSS keys metrics off. */
+interface TabsRootPropsArgs extends BasePropsArgs {
+  /** Strip look — `line`, `pill`, or `segmented`. @default "line" */
+  variant?: TabsVariant;
+  /** Control height and type — `sm` or `md`. @default "md" */
+  size?: TabsSize;
+  /** The `segmented` active chip's fill — `primary` (default) or `accent`. @default "primary" */
+  color?: TabsColor;
+}
+/** Argument to `Tabs.Tab.props(...)` — the per-tab state the CSS keys its colour/affordance off. */
+interface TabsTabPropsArgs extends BasePropsArgs {
+  /** Whether this tab is the active one (drives the foreground colour via `data-active`). */
+  selected?: boolean;
+  /** Whether this tab is disabled (drives the not-allowed affordance via `data-disabled`). */
+  disabled?: boolean;
+}
+/** Argument to a stateless part's `.props(...)` — no variants/state of its own; look flows from the root. */
+type TabsStatelessPropsArgs = BasePropsArgs;
+/** Root prop bag: `data-slot` plus the `data-variant`/`data-size`/`data-color` the descendant rules read. */
+declare function rootProps({
+  variant,
+  size,
+  color,
+  className
+}?: TabsRootPropsArgs): TabsPartProps;
+/** List prop bag: just the slot anchor (variant look flows from the root). */
+declare function listProps({
+  className
+}?: TabsStatelessPropsArgs): TabsPartProps;
+/** Tab prop bag: slot anchor plus the `data-active`/`data-disabled` state. */
+declare function tabProps({
+  selected,
+  disabled,
+  className
+}?: TabsTabPropsArgs): TabsPartProps;
+/** Indicator prop bag: just the slot anchor (positioning flows from the root variant). */
+declare function indicatorProps({
+  className
+}?: TabsStatelessPropsArgs): TabsPartProps;
+/** Panel prop bag: just the slot anchor. */
+declare function panelProps({
+  className
+}?: TabsStatelessPropsArgs): TabsPartProps;
+//#endregion
+export { TabsPartProps, TabsRootPropsArgs, TabsTabPropsArgs, indicatorProps, listProps, panelProps, rootProps, tabProps };

package/dist/components/tabs/tabs.props.js

@@ -0,0 +1,39 @@
+import { TABS_SLOTS } from "./tabs.slots.js";
+//#region src/components/tabs/tabs.props.ts
+/** Stamp a boolean state as a bare data-attribute: present (`""`) when on, absent (`undefined`) when off. */
+const flag = (on) => on ? "" : void 0;
+const withClassName = (bag, className) => className === void 0 ? bag : {
+	...bag,
+	className
+};
+/** Root prop bag: `data-slot` plus the `data-variant`/`data-size`/`data-color` the descendant rules read. */
+function rootProps({ variant = "line", size = "md", color = "primary", className } = {}) {
+	return withClassName({
+		"data-slot": TABS_SLOTS.root,
+		"data-variant": variant,
+		"data-size": size,
+		"data-color": color
+	}, className);
+}
+/** List prop bag: just the slot anchor (variant look flows from the root). */
+function listProps({ className } = {}) {
+	return withClassName({ "data-slot": TABS_SLOTS.list }, className);
+}
+/** Tab prop bag: slot anchor plus the `data-active`/`data-disabled` state. */
+function tabProps({ selected, disabled, className } = {}) {
+	return withClassName({
+		"data-slot": TABS_SLOTS.tab,
+		"data-active": flag(selected),
+		"data-disabled": flag(disabled)
+	}, className);
+}
+/** Indicator prop bag: just the slot anchor (positioning flows from the root variant). */
+function indicatorProps({ className } = {}) {
+	return withClassName({ "data-slot": TABS_SLOTS.indicator }, className);
+}
+/** Panel prop bag: just the slot anchor. */
+function panelProps({ className } = {}) {
+	return withClassName({ "data-slot": TABS_SLOTS.panel }, className);
+}
+//#endregion
+export { indicatorProps, listProps, panelProps, rootProps, tabProps };

package/dist/components/tabs/tabs.slots.d.ts

@@ -0,0 +1,20 @@
+//#region src/components/tabs/tabs.slots.d.ts
+/**
+ * The `data-*` hooks `Tabs` stamps on its parts, for host-side styling and tests. Slot values mark
+ * each rendered element; the state attributes are emitted by Base UI's Tabs — pair a slot with a
+ * state to target, say, only the active tab.
+ */
+declare enum TabsDataAttributes {
+  /** The root tabs element. */
+  slot = "data-slot",
+  /** Present on the active tab and its panel. */
+  active = "data-active",
+  /** Present on the tab the keyboard is focused on. */
+  highlighted = "data-highlighted",
+  /** Present on a disabled tab. */
+  disabled = "data-disabled",
+  /** `horizontal` | `vertical` — the strip's orientation. */
+  orientation = "data-orientation"
+}
+//#endregion
+export { TabsDataAttributes };

package/dist/components/tabs/tabs.slots.js

@@ -0,0 +1,33 @@
+//#region src/components/tabs/tabs.slots.ts
+/**
+* The slot vocabulary every `Tabs` part stamps as its `data-slot`. The authored source the
+* orchestration file reads from, kebab-cased `{component}-{part}`; SLOTS.md still generates from the
+* token-graph declarations.
+*/
+const TABS_SLOTS = {
+	root: "noctis-tabs",
+	list: "noctis-tabs-list",
+	tab: "noctis-tabs-tab",
+	indicator: "noctis-tabs-indicator",
+	panel: "noctis-tabs-panel"
+};
+/**
+* The `data-*` hooks `Tabs` stamps on its parts, for host-side styling and tests. Slot values mark
+* each rendered element; the state attributes are emitted by Base UI's Tabs — pair a slot with a
+* state to target, say, only the active tab.
+*/
+let TabsDataAttributes = /* @__PURE__ */ function(TabsDataAttributes) {
+	/** The root tabs element. */
+	TabsDataAttributes["slot"] = "data-slot";
+	/** Present on the active tab and its panel. */
+	TabsDataAttributes["active"] = "data-active";
+	/** Present on the tab the keyboard is focused on. */
+	TabsDataAttributes["highlighted"] = "data-highlighted";
+	/** Present on a disabled tab. */
+	TabsDataAttributes["disabled"] = "data-disabled";
+	/** `horizontal` | `vertical` — the strip's orientation. */
+	TabsDataAttributes["orientation"] = "data-orientation";
+	return TabsDataAttributes;
+}({});
+//#endregion
+export { TABS_SLOTS, TabsDataAttributes };

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

@@ -0,0 +1,3 @@
+import { TextareaSize } from "./textarea.types.js";
+import { Textarea } from "./textarea.js";
+import { TextareaDataAttributes } from "./textarea.slots.js";

package/dist/components/textarea/textarea.context.js

@@ -0,0 +1,13 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/components/textarea/textarea.context.ts
+const TextareaContext = createContext(null);
+const TextareaProvider = TextareaContext.Provider;
+/** Read the field context, throwing a named error when a part renders outside `Textarea.Root`. */
+function useTextareaContext(part) {
+	const context = use(TextareaContext);
+	if (context === null) throw new Error(`Textarea.${part} must be rendered inside <Textarea.Root>.`);
+	return context;
+}
+//#endregion
+export { TextareaProvider, useTextareaContext };

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,142 @@
+import { FieldActionPropsArgs, FieldCountPropsArgs, actionProps, countProps } from "../field/field.props.js";
+import { FieldAction, FieldCount } from "../field/field.js";
+import { input_d_exports } from "../../primitives/input.js";
+import { TextareaSize } from "./textarea.types.js";
+import { TextareaPartProps, TextareaRootPropsArgs, TextareaToolbarPropsArgs, controlProps, rootProps, toolbarProps } from "./textarea.props.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+
+//#region src/components/textarea/textarea.d.ts
+/**
+ * The multi-line field shell — a `<div>` that paints the field surface, border, and a subtle rest shadow,
+ * and stacks the editable control above an optional toolbar. It owns the shared `size` (descendant parts
+ * read it from context) and stamps the `data-size` axis `textarea.css` keys its metrics off. State flows
+ * from the control: the shell reads the control's `:disabled`/`aria-invalid`/`readonly` (and Base UI/Field
+ * `data-*`) through `:has()`, so validity and disabled have one source of truth; the `invalid`/`disabled`
+ * props stay as additive shell-only overrides. Clicking the shell padding focuses the control; focus is
+ * calm and ring-less, shifting the border to the focus role.
+ */
+declare function TextareaRoot({
+  size,
+  invalid,
+  disabled,
+  className,
+  children,
+  onMouseDown,
+  ...props
+}: Textarea.Root.Props): ReactElement;
+/**
+ * The editable control — a native `<textarea>` rendered through Base UI's input, so it works on its own
+ * or inside a Base UI `Field.Root` (which feeds it the validity/disabled state the shell reads). It is
+ * reset to a clean textarea so the shell owns the chrome, top-aligns its text, and auto-grows with its
+ * content (native `field-sizing` where supported, a tiny scroll-height fallback otherwise) between the
+ * field's min and max height, keeping a vertical resize handle.
+ */
+declare function TextareaControl({
+  className,
+  ref,
+  onChange,
+  ...props
+}: Textarea.Control.Props): ReactElement;
+/**
+ * The toolbar row beneath the control — a flex strip, divided from the text by a hairline, that hosts the
+ * shared `Textarea.Action`s and an optional `Textarea.Count` (the comment-composer footer). Lay actions
+ * and the count out with the usual flex utilities.
+ */
+declare function TextareaToolbar({
+  className,
+  children,
+  ...props
+}: Textarea.Toolbar.Props): ReactElement;
+/**
+ * A multi-line text field: the editable control wearing the shared field surface, border, calm focus, and
+ * rest shadow, that auto-grows with its content and keeps a resize handle. Compose from parts —
+ * `Textarea.Root` is the shell that owns the `size`, `Textarea.Control` is the Base UI textarea (its
+ * disabled/read-only/invalid state drives the shell), and `Textarea.Toolbar` is an optional footer row for
+ * `Textarea.Action`s and a `Textarea.Count`. The action and count are the shared field affordances
+ * (identical to Input's), so the composer footer reads exactly like the rest of the family. Built on Base
+ * UI's input, so it slots straight into a `Field.Root` for labels, descriptions, and validation.
+ *
+ * The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are exposed
+ * through the matching `Textarea` namespace — e.g. `Textarea.Control.Props`.
+ */
+declare const Textarea: {
+  /** The field shell. `Textarea.Root.props({ size, invalid, disabled })` → its spreadable prop bag. */Root: typeof TextareaRoot & {
+    props: typeof rootProps;
+  }; /** The editable textarea. `Textarea.Control.props()` → its spreadable prop bag for a foreign element. */
+  Control: typeof TextareaControl & {
+    props: typeof controlProps;
+  }; /** The footer toolbar row. `Textarea.Toolbar.props()` → its spreadable prop bag. */
+  Toolbar: typeof TextareaToolbar & {
+    props: typeof toolbarProps;
+  }; /** The shared in-field action button (shortcut/submit/clear). `Textarea.Action.props({ side })` → its prop bag. */
+  Action: typeof FieldAction & {
+    props: typeof actionProps;
+  }; /** The shared character-count readout. `Textarea.Count.props()` → its spreadable prop bag. */
+  Count: typeof FieldCount & {
+    props: typeof countProps;
+  };
+};
+/**
+ * Per-part prop and state types, mirroring Base UI's `Component.Part.Props` convention. Types-only — it
+ * emits no runtime code and merges with the `Textarea` object above.
+ */
+declare namespace Textarea {
+  /** Field height/padding/text scale — `sm`, `md`, or `lg`. */
+  type Size = TextareaSize;
+  /** The spreadable data-attribute prop bag every `Textarea.*.props()` returns (D12). */
+  type PartProps = TextareaPartProps;
+  namespace Root {
+    type Props = Omit<ComponentPropsWithRef<"div">, "children"> & {
+      /**
+       * Field height/padding/text scale.
+       * @default "md"
+       */
+      size?: TextareaSize;
+      /**
+       * Shell-only override that forces the invalid border. The default path reads the control's
+       * `aria-invalid`/Field validity through `:has()`, so this is only an escape hatch.
+       * @default false
+       */
+      invalid?: boolean;
+      /**
+       * Shell-only override that forces the disabled affordance. The default path reads the
+       * control's `disabled`/Field state through `:has()`, so this is only an escape hatch.
+       * @default false
+       */
+      disabled?: boolean; /** `Textarea.Control` and an optional `Textarea.Toolbar`. */
+      children?: ReactNode; /** Classes merged onto the shell. */
+      className?: string;
+    };
+    /** Argument to the `Textarea.Root.props(...)` escape-hatch helper. */
+    type PropsArgs = TextareaRootPropsArgs;
+  }
+  namespace Control {
+    type Props = input_d_exports.Input.Props & {
+      /**
+       * Initial visible row count (the native textarea attribute). The field still auto-grows and is
+       * bounded by its min/max height, so this is just the starting size.
+       */
+      rows?: number;
+    };
+    type State = input_d_exports.Input.State;
+  }
+  namespace Toolbar {
+    type Props = ComponentPropsWithRef<"div">;
+    /** Argument to the `Textarea.Toolbar.props(...)` escape-hatch helper. */
+    type PropsArgs = TextareaToolbarPropsArgs;
+  }
+  /** The shared in-field action button — see {@link FieldAction}. */
+  namespace Action {
+    type Props = FieldAction.Props;
+    /** Argument to the `Textarea.Action.props(...)` escape-hatch helper. */
+    type PropsArgs = FieldActionPropsArgs;
+  }
+  /** The shared character-count readout — see {@link FieldCount}. */
+  namespace Count {
+    type Props = FieldCount.Props;
+    /** Argument to the `Textarea.Count.props(...)` escape-hatch helper. */
+    type PropsArgs = FieldCountPropsArgs;
+  }
+}
+//#endregion
+export { Textarea };

package/dist/components/textarea/textarea.js

@@ -0,0 +1,129 @@
+"use client";
+import { actionProps, countProps } from "../field/field.props.js";
+import { FieldAction, FieldCount } from "../field/field.js";
+import { input_exports } from "../../primitives/input.js";
+import { TextareaProvider, useTextareaContext } from "./textarea.context.js";
+import { TEXTAREA_SLOTS } from "./textarea.slots.js";
+import { controlProps, rootProps, toolbarProps } from "./textarea.props.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/textarea/textarea.tsx
+/** Interactive descendants that own their own click: a click landing on (or inside) one is left alone. */
+const INTERACTIVE_SELECTOR = "button, a, input, textarea, select, label, [contenteditable], [tabindex]";
+/**
+* Whether the browser auto-sizes a textarea to its content natively (CSS `field-sizing: content`). When
+* it does, the control grows with no script; when it doesn't (older browsers), the control falls back to
+* a tiny scroll-height auto-grow on input. Resolved once; `false` under SSR, re-checked on the client.
+*/
+const SUPPORTS_FIELD_SIZING = typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("field-sizing", "content");
+/** Grow a textarea to fit its content; CSS `min/max-block-size` floor and cap it, scrolling past the cap. */
+function autoGrow(el) {
+	el.style.height = "auto";
+	el.style.height = `${el.scrollHeight}px`;
+}
+/**
+* The multi-line field shell — a `<div>` that paints the field surface, border, and a subtle rest shadow,
+* and stacks the editable control above an optional toolbar. It owns the shared `size` (descendant parts
+* read it from context) and stamps the `data-size` axis `textarea.css` keys its metrics off. State flows
+* from the control: the shell reads the control's `:disabled`/`aria-invalid`/`readonly` (and Base UI/Field
+* `data-*`) through `:has()`, so validity and disabled have one source of truth; the `invalid`/`disabled`
+* props stay as additive shell-only overrides. Clicking the shell padding focuses the control; focus is
+* calm and ring-less, shifting the border to the focus role.
+*/
+function TextareaRoot({ size = "md", invalid = false, disabled = false, className, children, onMouseDown, ...props }) {
+	const { className: _omit, ...recipe } = rootProps({
+		size,
+		invalid,
+		disabled
+	});
+	const value = { size };
+	function handleMouseDown(event) {
+		onMouseDown?.(event);
+		if (event.defaultPrevented || event.button !== 0) return;
+		if (event.target.closest(INTERACTIVE_SELECTOR)) return;
+		const control = event.currentTarget.querySelector(`[data-slot="${TEXTAREA_SLOTS.control}"]`);
+		if (control) {
+			event.preventDefault();
+			control.focus();
+		}
+	}
+	return /* @__PURE__ */ jsx("div", {
+		...recipe,
+		"data-slot": TEXTAREA_SLOTS.root,
+		className,
+		onMouseDown: handleMouseDown,
+		...props,
+		children: /* @__PURE__ */ jsx(TextareaProvider, {
+			value,
+			children
+		})
+	});
+}
+/**
+* The editable control — a native `<textarea>` rendered through Base UI's input, so it works on its own
+* or inside a Base UI `Field.Root` (which feeds it the validity/disabled state the shell reads). It is
+* reset to a clean textarea so the shell owns the chrome, top-aligns its text, and auto-grows with its
+* content (native `field-sizing` where supported, a tiny scroll-height fallback otherwise) between the
+* field's min and max height, keeping a vertical resize handle.
+*/
+function TextareaControl({ className, ref, onChange, ...props }) {
+	useTextareaContext("Control");
+	const setRef = (node) => {
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+		if (node && !SUPPORTS_FIELD_SIZING) autoGrow(node);
+	};
+	const handleChange = (event) => {
+		onChange?.(event);
+		if (!SUPPORTS_FIELD_SIZING) autoGrow(event.currentTarget);
+	};
+	return /* @__PURE__ */ jsx(input_exports.Input, {
+		render: /* @__PURE__ */ jsx("textarea", {}),
+		ref: setRef,
+		onChange: handleChange,
+		"data-slot": TEXTAREA_SLOTS.control,
+		className,
+		...props
+	});
+}
+/**
+* The toolbar row beneath the control — a flex strip, divided from the text by a hairline, that hosts the
+* shared `Textarea.Action`s and an optional `Textarea.Count` (the comment-composer footer). Lay actions
+* and the count out with the usual flex utilities.
+*/
+function TextareaToolbar({ className, children, ...props }) {
+	const { className: _omit, ...recipe } = toolbarProps();
+	useTextareaContext("Toolbar");
+	return /* @__PURE__ */ jsx("div", {
+		...recipe,
+		"data-slot": TEXTAREA_SLOTS.toolbar,
+		className,
+		...props,
+		children
+	});
+}
+/**
+* A multi-line text field: the editable control wearing the shared field surface, border, calm focus, and
+* rest shadow, that auto-grows with its content and keeps a resize handle. Compose from parts —
+* `Textarea.Root` is the shell that owns the `size`, `Textarea.Control` is the Base UI textarea (its
+* disabled/read-only/invalid state drives the shell), and `Textarea.Toolbar` is an optional footer row for
+* `Textarea.Action`s and a `Textarea.Count`. The action and count are the shared field affordances
+* (identical to Input's), so the composer footer reads exactly like the rest of the family. Built on Base
+* UI's input, so it slots straight into a `Field.Root` for labels, descriptions, and validation.
+*
+* The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are exposed
+* through the matching `Textarea` namespace — e.g. `Textarea.Control.Props`.
+*/
+const Textarea = {
+	/** The field shell. `Textarea.Root.props({ size, invalid, disabled })` → its spreadable prop bag. */
+	Root: Object.assign(TextareaRoot, { props: rootProps }),
+	/** The editable textarea. `Textarea.Control.props()` → its spreadable prop bag for a foreign element. */
+	Control: Object.assign(TextareaControl, { props: controlProps }),
+	/** The footer toolbar row. `Textarea.Toolbar.props()` → its spreadable prop bag. */
+	Toolbar: Object.assign(TextareaToolbar, { props: toolbarProps }),
+	/** The shared in-field action button (shortcut/submit/clear). `Textarea.Action.props({ side })` → its prop bag. */
+	Action: Object.assign(FieldAction, { props: actionProps }),
+	/** The shared character-count readout. `Textarea.Count.props()` → its spreadable prop bag. */
+	Count: Object.assign(FieldCount, { props: countProps })
+};
+//#endregion
+export { Textarea };

package/dist/components/textarea/textarea.props.d.ts

@@ -0,0 +1,44 @@
+import { TextareaSize } from "./textarea.types.js";
+
+//#region src/components/textarea/textarea.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `Textarea.*.props()` returns. */
+type TextareaPartProps = {
+  /** The slot value the matching `textarea.css` rules anchor on. */"data-slot": string; /** Forwarded verbatim — styling is attribute-driven, so this is an optional consumer passthrough. */
+  className?: string; /** A data-attribute present (empty string) or absent (`undefined`); never `false`. */
+  [attr: `data-${string}`]: string | undefined;
+};
+/** Common shape: every part's `.props()` accepts an optional `className` passthrough. */
+interface BasePropsArgs {
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/** Argument to `Textarea.Root.props(...)` — the shell's size + validity, stamped on the slot the CSS keys metrics off. */
+interface TextareaRootPropsArgs extends BasePropsArgs {
+  /** Field height/padding/text scale. @default "md" */
+  size?: TextareaSize;
+  /** Shell-only override: force the invalid border via `data-invalid` (the default path reads the control). */
+  invalid?: boolean;
+  /** Shell-only override: force the disabled affordance via `data-disabled` (the default path reads the control). */
+  disabled?: boolean;
+}
+/** Argument to a stateless part's `.props(...)` — no variants/state of its own; look flows from the root. */
+type TextareaControlPropsArgs = BasePropsArgs;
+/** Argument to `Textarea.Toolbar.props(...)` — the toolbar carries no variants of its own. */
+type TextareaToolbarPropsArgs = BasePropsArgs;
+/** Root prop bag: `data-slot` plus the `data-size` and the `data-invalid`/`data-disabled` shell overrides. */
+declare function rootProps({
+  size,
+  invalid,
+  disabled,
+  className
+}?: TextareaRootPropsArgs): TextareaPartProps;
+/** Control prop bag: just the slot anchor (the editable textarea; metrics flow from the root). */
+declare function controlProps({
+  className
+}?: TextareaControlPropsArgs): TextareaPartProps;
+/** Toolbar prop bag: just the slot anchor (the row hosting the field affordances). */
+declare function toolbarProps({
+  className
+}?: TextareaToolbarPropsArgs): TextareaPartProps;
+//#endregion
+export { TextareaPartProps, TextareaRootPropsArgs, TextareaToolbarPropsArgs, controlProps, rootProps, toolbarProps };

package/dist/components/textarea/textarea.props.js

@@ -0,0 +1,32 @@
+import { TEXTAREA_SLOTS } from "./textarea.slots.js";
+//#region src/components/textarea/textarea.props.ts
+/**
+* The D12 unified variant contract for Textarea — each compound part exposes a `props(...)` builder
+* returning a spreadable `{ "data-slot": "noctis-textarea-<part>", ...dataAttrs }` so `textarea.css` can
+* style a foreign element as that part, mirroring Input's builders.
+*/
+/** Stamp a boolean state as a bare data-attribute: present (`""`) when on, absent (`undefined`) when off. */
+const flag = (on) => on ? "" : void 0;
+const withClassName = (bag, className) => className === void 0 ? bag : {
+	...bag,
+	className
+};
+/** Root prop bag: `data-slot` plus the `data-size` and the `data-invalid`/`data-disabled` shell overrides. */
+function rootProps({ size = "md", invalid, disabled, className } = {}) {
+	return withClassName({
+		"data-slot": TEXTAREA_SLOTS.root,
+		"data-size": size,
+		"data-invalid": flag(invalid),
+		"data-disabled": flag(disabled)
+	}, className);
+}
+/** Control prop bag: just the slot anchor (the editable textarea; metrics flow from the root). */
+function controlProps({ className } = {}) {
+	return withClassName({ "data-slot": TEXTAREA_SLOTS.control }, className);
+}
+/** Toolbar prop bag: just the slot anchor (the row hosting the field affordances). */
+function toolbarProps({ className } = {}) {
+	return withClassName({ "data-slot": TEXTAREA_SLOTS.toolbar }, className);
+}
+//#endregion
+export { controlProps, rootProps, toolbarProps };

package/dist/components/textarea/textarea.slots.d.ts

@@ -0,0 +1,23 @@
+//#region src/components/textarea/textarea.slots.d.ts
+/**
+ * The data attributes the {@link Textarea} (and the Base UI control it renders) expose for styling and
+ * testing. The shell's look is keyed off the root `data-slot="noctis-textarea"` plus `data-size`. State
+ * flows from the editable control: the shell reads the control's `:disabled`/`aria-invalid`/`readonly`
+ * (and Base UI/Field `data-*`) through `:has()`, so validity and disabled have one source of truth, with
+ * the root's own `[data-invalid]`/`[data-disabled]` as additive shell-only overrides. Focus is calm and
+ * ring-less, shifting the border to the focus role, mirroring Input.
+ */
+declare enum TextareaDataAttributes {
+  /** The rendered element of a given part (root shell, control, or toolbar). */
+  slot = "data-slot",
+  /** The size scale — `sm` | `md` | `lg`; the generated layer keys the per-size internals off it. */
+  size = "data-size",
+  /** Present when the field is in an invalid state — set by Base UI/Field on the control, or by the root override. */
+  invalid = "data-invalid",
+  /** Present when the field is disabled — set by Base UI on the control, or by the root override. */
+  disabled = "data-disabled",
+  /** Present when the field is read-only — set by Base UI on the control; the shell holds the rest border. */
+  readonly = "data-readonly"
+}
+//#endregion
+export { TextareaDataAttributes };