@astra-kit/ui 0.0.0-stage → 1.0.0

package/dist/components/tabs.js

@@ -0,0 +1,636 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's Tabs (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): its segmented list on Arc's tokens, a
+* highlight that glides between triggers with Arc's morph spring, a list that scrolls sideways and keeps the active
+* tab in view, and panels that slide in from the side of the chosen tab while their height morphs from the previous
+* panel. Radix keeps the roles, keyboard navigation and controlled or uncontrolled value.
+*/
+import { createContext, useContext, useLayoutEffect, useRef, useState } from "react";
+import { Slot, Tabs as TabsPrimitive } from "radix-ui";
+import { AnimatePresence, animate, motion, useIsPresent } from "motion/react";
+import { TABS_DIRECTION, TABS_PANEL_HEIGHT_TOLERANCE_PX, TABS_PANEL_OFFSET_PX, TABS_PANEL_REDUCED_EXIT_DURATION_S, TABS_REVEAL_MARGIN_PX } from "../constants/tabs.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { ARC_DURATION, ARC_EASE, ARC_SPRING_SMOOTH } from "../motion/arc-tokens.js";
+import { GlideSlot } from "../motion/glide-slot.js";
+import { useAttachedElement } from "../motion/use-attached-element.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TabsMotionContext = createContext(null);
+/** Returns the elements of a slot that belong to this Tabs instance, never to a nested one. */
+function getOwnElements(root, selector) {
+	return Array.from(root.querySelectorAll(selector)).filter((element) => element.closest("[data-slot=\"tabs\"]") === root);
+}
+/**
+* Reads which way the selection travels from the order of this instance's triggers.
+* @param root - The tabs root, or null before it is attached.
+* @param fromValue - Value of the previously active tab.
+* @param toValue - Value of the newly active tab.
+* @returns The travel direction, or null when either tab is not rendered.
+*/
+function getTravelDirection(root, fromValue, toValue) {
+	if (!root) return null;
+	const order = getOwnElements(root, "[data-slot=\"tabs-trigger\"]").map((trigger) => trigger.getAttribute("data-value"));
+	const fromIndex = order.indexOf(fromValue);
+	const toIndex = order.indexOf(toValue);
+	if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex) return null;
+	return toIndex > fromIndex ? TABS_DIRECTION.forward : TABS_DIRECTION.backward;
+}
+/**
+* Groups a tab list with its panels. Accepts Radix's `value`/`defaultValue`/`onValueChange` contract unchanged.
+* @param props - Radix root props, including `orientation` and `ref`.
+* @returns The tabs root.
+*/
+function Tabs(t0) {
+	const $ = _c(28);
+	let className;
+	let defaultValue;
+	let onValueChange;
+	let props;
+	let ref;
+	let t1;
+	let value;
+	if ($[0] !== t0) {
+		({className, orientation: t1, value, defaultValue, onValueChange, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = defaultValue;
+		$[3] = onValueChange;
+		$[4] = props;
+		$[5] = ref;
+		$[6] = t1;
+		$[7] = value;
+	} else {
+		className = $[1];
+		defaultValue = $[2];
+		onValueChange = $[3];
+		props = $[4];
+		ref = $[5];
+		t1 = $[6];
+		value = $[7];
+	}
+	const orientation = t1 === undefined ? "horizontal" : t1;
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
+	const [direction, setDirection] = useState(TABS_DIRECTION.forward);
+	const [root, attachRoot] = useAttachedElement(ref);
+	const panelHeightRef = useRef(null);
+	const leavingRectRef = useRef(null);
+	const activeValue = value ?? uncontrolledValue;
+	const [renderedValue, setRenderedValue] = useState(activeValue);
+	if (renderedValue !== activeValue) {
+		setRenderedValue(activeValue);
+		const travelDirection = getTravelDirection(root, renderedValue, activeValue);
+		if (travelDirection !== null) {
+			setDirection(travelDirection);
+		}
+	}
+	let t2;
+	if ($[8] !== onValueChange || $[9] !== root || $[10] !== value) {
+		t2 = function handleValueChange(nextValue) {
+			const activePanel = root ? getOwnElements(root, "[data-slot=\"tabs-content\"][data-state=\"active\"]")[0] : undefined;
+			leavingRectRef.current = activePanel ? {
+				value: nextValue,
+				rect: activePanel.getBoundingClientRect()
+			} : null;
+			if (value === undefined) {
+				setUncontrolledValue(nextValue);
+			}
+			onValueChange?.(nextValue);
+		};
+		$[8] = onValueChange;
+		$[9] = root;
+		$[10] = value;
+		$[11] = t2;
+	} else {
+		t2 = $[11];
+	}
+	const handleValueChange = t2;
+	let t3;
+	if ($[12] !== activeValue || $[13] !== direction || $[14] !== orientation) {
+		t3 = {
+			activeValue,
+			direction,
+			orientation,
+			panelHeightRef,
+			leavingRectRef
+		};
+		$[12] = activeValue;
+		$[13] = direction;
+		$[14] = orientation;
+		$[15] = t3;
+	} else {
+		t3 = $[15];
+	}
+	let t4;
+	if ($[16] !== className) {
+		t4 = cn("group/tabs relative flex gap-(--space-4) data-horizontal:flex-col", className);
+		$[16] = className;
+		$[17] = t4;
+	} else {
+		t4 = $[17];
+	}
+	let t5;
+	if ($[18] !== activeValue || $[19] !== attachRoot || $[20] !== handleValueChange || $[21] !== orientation || $[22] !== props || $[23] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(TabsPrimitive.Root, {
+			ref: attachRoot,
+			"data-slot": "tabs",
+			"data-orientation": orientation,
+			orientation,
+			className: t4,
+			...props,
+			value: activeValue,
+			onValueChange: handleValueChange
+		});
+		$[18] = activeValue;
+		$[19] = attachRoot;
+		$[20] = handleValueChange;
+		$[21] = orientation;
+		$[22] = props;
+		$[23] = t4;
+		$[24] = t5;
+	} else {
+		t5 = $[24];
+	}
+	let t6;
+	if ($[25] !== t3 || $[26] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(TabsMotionContext.Provider, {
+			value: t3,
+			children: t5
+		});
+		$[25] = t3;
+		$[26] = t5;
+		$[27] = t6;
+	} else {
+		t6 = $[27];
+	}
+	return t6;
+}
+/**
+* Arc's segmented list: a muted track whose active trigger is a raised surface. Horizontal lists scroll sideways
+* without a visible scrollbar.
+*/
+const tabsListClassName = "group/tabs-list inline-flex w-fit max-w-full min-w-0 items-center gap-(--space-1) rounded-(--radius-control) border border-border bg-surface-muted p-(--space-1) text-text-muted group-data-horizontal/tabs:overflow-x-auto group-data-horizontal/tabs:[scrollbar-width:none] group-data-horizontal/tabs:[&::-webkit-scrollbar]:hidden group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col";
+/**
+* Scrolls a horizontally overflowing list just enough to show the trigger, never the page around it. The target is an
+* absolute offset, so a second call while a smooth scroll is still running (focus and selection both reveal the
+* trigger on the same key press) aims at the same place instead of adding its delta to a moving position.
+* @param list - The scrolling tab list.
+* @param trigger - The trigger to reveal.
+* @param reduceMotion - True jumps instead of scrolling smoothly.
+*/
+function revealTrigger(list, trigger, reduceMotion) {
+	if (!trigger || list.scrollWidth <= list.clientWidth || typeof list.scrollTo !== "function") return;
+	const frame = list.getBoundingClientRect();
+	const item = trigger.getBoundingClientRect();
+	const itemStart = item.left - frame.left + list.scrollLeft;
+	const itemEnd = itemStart + item.width;
+	const visibleStart = list.scrollLeft;
+	const visibleEnd = visibleStart + list.clientWidth;
+	const target = itemStart < visibleStart + TABS_REVEAL_MARGIN_PX ? itemStart - TABS_REVEAL_MARGIN_PX : itemEnd > visibleEnd - TABS_REVEAL_MARGIN_PX ? itemEnd - list.clientWidth + TABS_REVEAL_MARGIN_PX : visibleStart;
+	if (target !== visibleStart) list.scrollTo({
+		left: target,
+		behavior: reduceMotion ? "instant" : "smooth"
+	});
+}
+/**
+* Holds the triggers. The active highlight glides to the newly selected trigger and the list scrolls to keep the
+* active or focused trigger visible.
+* @param props - Radix list props, including `aria-label`, `loop` and `ref`.
+* @returns The tab list.
+*/
+function TabsList(t0) {
+	const $ = _c(28);
+	let className;
+	let onFocusCapture;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({className, ref, onFocusCapture, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = onFocusCapture;
+		$[3] = props;
+		$[4] = ref;
+	} else {
+		className = $[1];
+		onFocusCapture = $[2];
+		props = $[3];
+		ref = $[4];
+	}
+	const motionState = useContext(TabsMotionContext);
+	const reduceMotion = usePrefersReducedMotion();
+	const [list, attachList] = useAttachedElement(ref);
+	const activeValue = motionState?.activeValue;
+	let t1;
+	if ($[5] !== list || $[6] !== motionState?.orientation || $[7] !== reduceMotion) {
+		t1 = () => {
+			if (!list || motionState?.orientation === "vertical") {
+				return;
+			}
+			const revealActiveTrigger = () => revealTrigger(list, list.querySelector("[data-slot=\"tabs-trigger\"][data-state=\"active\"]"), reduceMotion);
+			revealActiveTrigger();
+			const observer = new ResizeObserver(revealActiveTrigger);
+			for (const trigger of list.querySelectorAll("[data-slot=\"tabs-trigger\"]")) {
+				observer.observe(trigger);
+			}
+			return () => observer.disconnect();
+		};
+		$[5] = list;
+		$[6] = motionState?.orientation;
+		$[7] = reduceMotion;
+		$[8] = t1;
+	} else {
+		t1 = $[8];
+	}
+	const t2 = motionState?.orientation;
+	let t3;
+	if ($[9] !== activeValue || $[10] !== list || $[11] !== reduceMotion || $[12] !== t2) {
+		t3 = [
+			list,
+			activeValue,
+			t2,
+			reduceMotion
+		];
+		$[9] = activeValue;
+		$[10] = list;
+		$[11] = reduceMotion;
+		$[12] = t2;
+		$[13] = t3;
+	} else {
+		t3 = $[13];
+	}
+	useLayoutEffect(t1, t3);
+	let t4;
+	if ($[14] !== list || $[15] !== motionState?.orientation || $[16] !== onFocusCapture || $[17] !== reduceMotion) {
+		t4 = function handleFocusCapture(event) {
+			onFocusCapture?.(event);
+			if (!list || motionState?.orientation === "vertical") {
+				return;
+			}
+			if (event.target instanceof HTMLElement && event.target.getAttribute("role") === "tab") {
+				revealTrigger(list, event.target, reduceMotion);
+			}
+		};
+		$[14] = list;
+		$[15] = motionState?.orientation;
+		$[16] = onFocusCapture;
+		$[17] = reduceMotion;
+		$[18] = t4;
+	} else {
+		t4 = $[18];
+	}
+	const handleFocusCapture = t4;
+	let t5;
+	if ($[19] !== className) {
+		t5 = cn(tabsListClassName, className);
+		$[19] = className;
+		$[20] = t5;
+	} else {
+		t5 = $[20];
+	}
+	let t6;
+	if ($[21] !== handleFocusCapture || $[22] !== props || $[23] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(TabsPrimitive.List, {
+			"data-slot": "tabs-list",
+			className: t5,
+			onFocusCapture: handleFocusCapture,
+			...props
+		});
+		$[21] = handleFocusCapture;
+		$[22] = props;
+		$[23] = t5;
+		$[24] = t6;
+	} else {
+		t6 = $[24];
+	}
+	let t7;
+	if ($[25] !== attachList || $[26] !== t6) {
+		t7 = /* @__PURE__ */ _jsx(GlideSlot, {
+			preset: "tabs",
+			ref: attachList,
+			children: t6
+		});
+		$[25] = attachList;
+		$[26] = t6;
+		$[27] = t7;
+	} else {
+		t7 = $[27];
+	}
+	return t7;
+}
+/**
+* Selects a panel. Arc's trigger: muted label, accent label once active, hover only on fine pointers and the
+* shared keyboard focus outline.
+* @param props - Radix trigger props, including `value`.
+* @returns The tab.
+*/
+function TabsTrigger(t0) {
+	const $ = _c(10);
+	let className;
+	let props;
+	let value;
+	if ($[0] !== t0) {
+		({className, value, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = value;
+	} else {
+		className = $[1];
+		props = $[2];
+		value = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = cn("relative inline-flex min-h-(--control-height-sm) min-w-[5.5rem] flex-[1_0_auto] cursor-pointer items-center justify-center gap-1.5 rounded-[calc(var(--radius-control)-3px)] border border-transparent bg-transparent px-(--space-3) font-sans text-sm font-medium whitespace-nowrap text-text-muted [-webkit-tap-highlight-color:transparent] transition-[color,background-color,border-color,box-shadow] duration-(--duration-fast) ease-(--ease-standard) select-none motion-reduce:transition-none hover-fine:text-foreground active:text-foreground disabled:cursor-not-allowed disabled:opacity-50 data-active:text-(--accent-strong) group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "data-active:border-border data-active:bg-surface data-active:shadow-(--shadow-resting)", className);
+		$[4] = className;
+		$[5] = t1;
+	} else {
+		t1 = $[5];
+	}
+	let t2;
+	if ($[6] !== props || $[7] !== t1 || $[8] !== value) {
+		t2 = /* @__PURE__ */ _jsx(TabsPrimitive.Trigger, {
+			"data-slot": "tabs-trigger",
+			"data-value": value,
+			value,
+			className: t1,
+			...props
+		});
+		$[6] = props;
+		$[7] = t1;
+		$[8] = value;
+		$[9] = t2;
+	} else {
+		t2 = $[9];
+	}
+	return t2;
+}
+/** Panel classes: Arc's body text rhythm and a rounded keyboard focus outline. */
+const tabsContentClassName = "flex-1 text-sm leading-(--leading-body) [--focus-outline-offset:3px] focus-visible:rounded-(--radius-control) data-[state=inactive]:pointer-events-none";
+/** Places a slide offset on the axis the list runs along. */
+function slideOffset({ orientation }, distance) {
+	return orientation === "vertical" ? {
+		x: 0,
+		y: distance
+	} : {
+		x: distance,
+		y: 0
+	};
+}
+/** Arc's panel motion: slides in from the side of the chosen tab and leaves quickly the opposite way. */
+const panelVariants = {
+	enter: (custom) => ({
+		opacity: 0,
+		...slideOffset(custom, custom.direction * TABS_PANEL_OFFSET_PX.enter)
+	}),
+	center: {
+		opacity: 1,
+		x: 0,
+		y: 0,
+		transition: {
+			opacity: {
+				duration: ARC_DURATION.standard,
+				ease: [...ARC_EASE.enter]
+			},
+			x: ARC_SPRING_SMOOTH,
+			y: ARC_SPRING_SMOOTH
+		}
+	},
+	exit: (custom) => ({
+		opacity: 0,
+		...slideOffset(custom, custom.direction * -TABS_PANEL_OFFSET_PX.exit),
+		transition: {
+			duration: ARC_DURATION.instant,
+			ease: [...ARC_EASE.standard]
+		}
+	})
+};
+/** Reduced motion: a short crossfade in place. Keys match `panelVariants`, so server and client styles agree. */
+const reducedPanelVariants = {
+	enter: {
+		opacity: 0,
+		x: 0,
+		y: 0
+	},
+	center: {
+		opacity: 1,
+		x: 0,
+		y: 0,
+		transition: { duration: ARC_DURATION.instant }
+	},
+	exit: {
+		opacity: 0,
+		x: 0,
+		y: 0,
+		transition: { duration: TABS_PANEL_REDUCED_EXIT_DURATION_S }
+	}
+};
+/** Inline properties the height morph overrides on the panel and restores when it settles. */
+const MORPH_STYLE_PROPERTIES = [
+	"height",
+	"overflow",
+	"flex",
+	"min-height"
+];
+/** Animates the consumer's own element when `TabsContent` is used with `asChild`. */
+const MotionPanelSlot = motion.create(Slot.Root);
+/**
+* The animated element behind an active panel. While present it morphs from the previous panel's height to its
+* own; once leaving it stays pinned where it was, inert and hidden from assistive technology, until it fades out.
+*/
+function TabsPanel({ motionState, reduceMotion, asChild, ref, ...props }) {
+	const isPresent = useIsPresent();
+	const [panel, attachPanel] = useAttachedElement(ref);
+	const { panelHeightRef, leavingRectRef, direction, orientation } = motionState;
+	const activeValue = useContext(TabsMotionContext)?.activeValue ?? motionState.activeValue;
+	const PanelElement = asChild ? MotionPanelSlot : motion.div;
+	useLayoutEffect(() => {
+		if (!panel) return;
+		if (!isPresent) {
+			const leaving = leavingRectRef.current;
+			const before = leaving?.value === activeValue ? leaving.rect : null;
+			const now = panel.getBoundingClientRect();
+			if (before) panel.style.translate = `${before.left - now.left}px ${before.top - now.top}px`;
+			return;
+		}
+		panel.style.translate = "";
+		const fromHeight = panelHeightRef.current;
+		const toHeight = panel.offsetHeight;
+		let controls;
+		const inlineStyle = MORPH_STYLE_PROPERTIES.map((property) => ({
+			property,
+			value: panel.style.getPropertyValue(property),
+			priority: panel.style.getPropertyPriority(property)
+		}));
+		const release = () => {
+			for (const { property, value, priority } of inlineStyle) panel.style.setProperty(property, value, priority);
+		};
+		if (fromHeight !== null && Math.abs(fromHeight - toHeight) > TABS_PANEL_HEIGHT_TOLERANCE_PX && !reduceMotion) {
+			panel.style.flex = "none";
+			panel.style.minHeight = "0";
+			if (toHeight > fromHeight) panel.style.overflow = "clip";
+			panel.style.height = `${fromHeight}px`;
+			controls = animate(panel, { height: [fromHeight, toHeight] }, {
+				...ARC_SPRING_SMOOTH,
+				onComplete: release
+			});
+		}
+		panelHeightRef.current = controls && fromHeight !== null ? fromHeight : toHeight;
+		const observer = new ResizeObserver(() => {
+			panelHeightRef.current = panel.offsetHeight;
+		});
+		observer.observe(panel);
+		return () => {
+			observer.disconnect();
+			controls?.stop();
+			release();
+		};
+	}, [
+		panel,
+		isPresent,
+		reduceMotion,
+		panelHeightRef,
+		leavingRectRef,
+		activeValue
+	]);
+	return /* @__PURE__ */ _jsx(PanelElement, {
+		ref: attachPanel,
+		...props,
+		custom: {
+			direction,
+			orientation
+		},
+		variants: reduceMotion ? reducedPanelVariants : panelVariants,
+		initial: "enter",
+		animate: "center",
+		exit: "exit",
+		inert: !isPresent || undefined,
+		"aria-hidden": !isPresent || undefined
+	});
+}
+/**
+* Content of one tab. Inside `Tabs` it animates between panels; with `forceMount` it stays mounted and switches
+* without motion, as Radix renders it. With `asChild` the consumer's element is the panel in both cases.
+* @param props - Radix content props, including `value` and `forceMount`.
+* @returns The tab panel, or nothing while another tab is active.
+*/
+function TabsContent(t0) {
+	const $ = _c(31);
+	let asChild;
+	let children;
+	let className;
+	let forceMount;
+	let props;
+	let value;
+	if ($[0] !== t0) {
+		({className, value, forceMount, asChild, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = asChild;
+		$[2] = children;
+		$[3] = className;
+		$[4] = forceMount;
+		$[5] = props;
+		$[6] = value;
+	} else {
+		asChild = $[1];
+		children = $[2];
+		className = $[3];
+		forceMount = $[4];
+		props = $[5];
+		value = $[6];
+	}
+	const motionState = useContext(TabsMotionContext);
+	const reduceMotion = usePrefersReducedMotion();
+	let t1;
+	if ($[7] !== className) {
+		t1 = cn(tabsContentClassName, className);
+		$[7] = className;
+		$[8] = t1;
+	} else {
+		t1 = $[8];
+	}
+	const classes = t1;
+	if (forceMount || !motionState) {
+		let t2;
+		if ($[9] !== asChild || $[10] !== children || $[11] !== classes || $[12] !== forceMount || $[13] !== props || $[14] !== value) {
+			t2 = /* @__PURE__ */ _jsx(TabsPrimitive.Content, {
+				"data-slot": "tabs-content",
+				value,
+				forceMount,
+				asChild,
+				className: classes,
+				...props,
+				children
+			});
+			$[9] = asChild;
+			$[10] = children;
+			$[11] = classes;
+			$[12] = forceMount;
+			$[13] = props;
+			$[14] = value;
+			$[15] = t2;
+		} else {
+			t2 = $[15];
+		}
+		return t2;
+	}
+	const isSelected = motionState.activeValue === value;
+	let t2;
+	if ($[16] !== motionState.direction || $[17] !== motionState.orientation) {
+		t2 = {
+			direction: motionState.direction,
+			orientation: motionState.orientation
+		};
+		$[16] = motionState.direction;
+		$[17] = motionState.orientation;
+		$[18] = t2;
+	} else {
+		t2 = $[18];
+	}
+	const t3 = t2;
+	let t4;
+	if ($[19] !== asChild || $[20] !== children || $[21] !== classes || $[22] !== isSelected || $[23] !== motionState || $[24] !== props || $[25] !== reduceMotion || $[26] !== value) {
+		t4 = isSelected && /* @__PURE__ */ _jsx(TabsPrimitive.Content, {
+			"data-slot": "tabs-content",
+			...props,
+			value,
+			forceMount: true,
+			asChild: true,
+			children: /* @__PURE__ */ _jsx(TabsPanel, {
+				className: classes,
+				motionState,
+				reduceMotion,
+				asChild,
+				children
+			})
+		}, value);
+		$[19] = asChild;
+		$[20] = children;
+		$[21] = classes;
+		$[22] = isSelected;
+		$[23] = motionState;
+		$[24] = props;
+		$[25] = reduceMotion;
+		$[26] = value;
+		$[27] = t4;
+	} else {
+		t4 = $[27];
+	}
+	let t5;
+	if ($[28] !== t3 || $[29] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: false,
+			mode: "popLayout",
+			custom: t3,
+			children: t4
+		});
+		$[28] = t3;
+		$[29] = t4;
+		$[30] = t5;
+	} else {
+		t5 = $[30];
+	}
+	return t5;
+}
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/components/textarea.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Arc's Textarea (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a multi-line field on Arc's tokens with
+ * a 110px minimum height and a vertical resize handle. With a `label`, `description` or `error` it renders Arc's
+ * labelled field, where a live count in the description rolls its digits; without them it renders the bare control.
+ */
+import type { ComponentProps } from "react";
+import type { FieldCopyProps } from "./field.js";
+export type TextareaProps = ComponentProps<"textarea"> & FieldCopyProps;
+/**
+ * Free-form multi-line text, controlled or uncontrolled like a native textarea.
+ * @param textareaProps - Optional field copy plus every native textarea attribute, including `ref`, `rows` and `maxLength`.
+ * @returns The labelled field when `label`, `description` or `error` is passed (even as `undefined`), otherwise the
+ *   bare control.
+ */
+declare function Textarea(textareaProps: TextareaProps): import("react").JSX.Element;
+export { Textarea };