beez-ui 2.4.0 → 2.5.0

package/dist/components/input.d.ts

@@ -1,3 +1,17 @@
-import * as React from "react";
-declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+/**
+ * Arc's Input (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a single-line field on Arc's tokens whose
+ * focus answers with the border colour alone. With a `label`, `description` or `error` it renders Arc's labelled field
+ * with animated helper and error rows; without them it renders the bare control, for input groups, tables and forms
+ * that place their own label.
+ */
+import type { ComponentProps } from "react";
+import type { FieldCopyProps } from "./field.js";
+export type InputProps = ComponentProps<"input"> & FieldCopyProps;
+/**
+ * A single-line text value, controlled or uncontrolled like a native input.
+ * @param inputProps - Optional field copy plus every native input attribute, including `ref`, `name` and `type`.
+ * @returns The labelled field when `label`, `description` or `error` is passed (even as `undefined`), otherwise the
+ *   bare control.
+ */
+declare function Input(inputProps: InputProps): import("react").JSX.Element;
 export { Input };

package/dist/components/input.js

@@ -1,17 +1,124 @@
-import * as React from "react";
+"use client";
+import { c as _c } from "react/compiler-runtime";
 import { Input as InputPrimitive } from "@base-ui/react/input";
 import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
+import { Field, usesFieldCopy, useFieldAria } from "./field.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-function Input({ className, type, ...props }) {
-	return /* @__PURE__ */ _jsx(MotionSlot, {
-		kind: "field",
-		children: /* @__PURE__ */ _jsx(InputPrimitive, {
-			type,
-			"data-slot": "input",
-			className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-[color,background-color,border-color,box-shadow] outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
+/**
+* Arc's control recipe. Text stays at 16px on small screens so iOS does not zoom on focus, hover only answers on
+* hover-capable fine pointers, and the field never changes size on focus or error.
+*/
+const inputClassName = "min-h-(--control-height-md) w-full min-w-0 rounded-(--radius-control) border border-border-strong bg-surface px-(--space-3) font-sans text-base leading-(--leading-body) tracking-(--tracking-body) text-foreground outline-none transition-[color,background-color,border-color] duration-(--duration-fast) ease-(--ease-standard) motion-reduce:transition-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-muted hover-fine:not-disabled:not-aria-invalid:border-foreground focus-visible:border-foreground aria-invalid:border-danger disabled:cursor-not-allowed disabled:bg-surface-muted disabled:opacity-50 md:text-sm";
+/**
+* A single-line text value, controlled or uncontrolled like a native input.
+* @param inputProps - Optional field copy plus every native input attribute, including `ref`, `name` and `type`.
+* @returns The labelled field when `label`, `description` or `error` is passed (even as `undefined`), otherwise the
+*   bare control.
+*/
+function Input(inputProps) {
+	const $ = _c(28);
+	let className;
+	let description;
+	let error;
+	let id;
+	let label;
+	let props;
+	let type;
+	if ($[0] !== inputProps) {
+		({className, type, label, description, error, id, ...props} = inputProps);
+		$[0] = inputProps;
+		$[1] = className;
+		$[2] = description;
+		$[3] = error;
+		$[4] = id;
+		$[5] = label;
+		$[6] = props;
+		$[7] = type;
+	} else {
+		className = $[1];
+		description = $[2];
+		error = $[3];
+		id = $[4];
+		label = $[5];
+		props = $[6];
+		type = $[7];
+	}
+	let t0;
+	if ($[8] !== description || $[9] !== error || $[10] !== id || $[11] !== props) {
+		t0 = {
+			id,
+			description,
+			error,
 			...props
-		})
-	});
+		};
+		$[8] = description;
+		$[9] = error;
+		$[10] = id;
+		$[11] = props;
+		$[12] = t0;
+	} else {
+		t0 = $[12];
+	}
+	const aria = useFieldAria(t0);
+	const isField = usesFieldCopy(inputProps);
+	let t1;
+	if ($[13] !== className) {
+		t1 = cn(inputClassName, className);
+		$[13] = className;
+		$[14] = t1;
+	} else {
+		t1 = $[14];
+	}
+	const t2 = isField ? aria.controlId : id;
+	const t3 = aria["aria-describedby"];
+	const t4 = aria["aria-invalid"];
+	let t5;
+	if ($[15] !== props || $[16] !== t1 || $[17] !== t2 || $[18] !== t3 || $[19] !== t4 || $[20] !== type) {
+		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "field",
+			children: /* @__PURE__ */ _jsx(InputPrimitive, {
+				type,
+				"data-slot": "input",
+				className: t1,
+				...props,
+				id: t2,
+				"aria-describedby": t3,
+				"aria-invalid": t4
+			})
+		});
+		$[15] = props;
+		$[16] = t1;
+		$[17] = t2;
+		$[18] = t3;
+		$[19] = t4;
+		$[20] = type;
+		$[21] = t5;
+	} else {
+		t5 = $[21];
+	}
+	const control = t5;
+	if (!isField) {
+		return control;
+	}
+	let t6;
+	if ($[22] !== aria || $[23] !== control || $[24] !== description || $[25] !== error || $[26] !== label) {
+		t6 = /* @__PURE__ */ _jsx(Field, {
+			label,
+			description,
+			error,
+			aria,
+			children: control
+		});
+		$[22] = aria;
+		$[23] = control;
+		$[24] = description;
+		$[25] = error;
+		$[26] = label;
+		$[27] = t6;
+	} else {
+		t6 = $[27];
+	}
+	return t6;
 }
 export { Input };

package/dist/components/textarea.d.ts

@@ -1,8 +1,16 @@
-import * as React from "react";
 /**
- * Distinguishes disabled fields with a muted background in both theme modes.
- * @param props - Primitive properties and optional consumer overrides.
- * @returns The styled primitive with its original interaction contract.
+ * 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.
  */
-declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
+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 };

package/dist/components/textarea.js

@@ -1,20 +1,115 @@
-import * as React from "react";
+"use client";
+import { c as _c } from "react/compiler-runtime";
 import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
+import { Field, usesFieldCopy, useFieldAria } from "./field.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+/** Same focus language as `Input`: the border answers alone and the box never changes size. */
+const textareaClassName = "flex min-h-[110px] w-full resize-y rounded-(--radius-control) border border-border-strong bg-surface p-(--space-3) font-sans text-base leading-(--leading-body) tracking-(--tracking-body) text-foreground outline-none transition-[color,background-color,border-color] duration-(--duration-fast) ease-(--ease-standard) motion-reduce:transition-none placeholder:text-text-muted hover-fine:not-disabled:not-aria-invalid:border-foreground focus-visible:border-foreground aria-invalid:border-danger disabled:cursor-not-allowed disabled:bg-surface-muted disabled:opacity-60 md:text-sm";
 /**
-* Distinguishes disabled fields with a muted background in both theme modes.
-* @param props - Primitive properties and optional consumer overrides.
-* @returns The styled primitive with its original interaction contract.
+* 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.
 */
-function Textarea({ className, ...props }) {
-	return /* @__PURE__ */ _jsx(MotionSlot, {
-		kind: "field",
-		children: /* @__PURE__ */ _jsx("textarea", {
-			"data-slot": "textarea",
-			className: cn("flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-[color,background-color,border-color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
+function Textarea(textareaProps) {
+	const $ = _c(26);
+	let className;
+	let description;
+	let error;
+	let id;
+	let label;
+	let props;
+	if ($[0] !== textareaProps) {
+		({className, label, description, error, id, ...props} = textareaProps);
+		$[0] = textareaProps;
+		$[1] = className;
+		$[2] = description;
+		$[3] = error;
+		$[4] = id;
+		$[5] = label;
+		$[6] = props;
+	} else {
+		className = $[1];
+		description = $[2];
+		error = $[3];
+		id = $[4];
+		label = $[5];
+		props = $[6];
+	}
+	let t0;
+	if ($[7] !== description || $[8] !== error || $[9] !== id || $[10] !== props) {
+		t0 = {
+			id,
+			description,
+			error,
 			...props
-		})
-	});
+		};
+		$[7] = description;
+		$[8] = error;
+		$[9] = id;
+		$[10] = props;
+		$[11] = t0;
+	} else {
+		t0 = $[11];
+	}
+	const aria = useFieldAria(t0);
+	const isField = usesFieldCopy(textareaProps);
+	let t1;
+	if ($[12] !== className) {
+		t1 = cn(textareaClassName, className);
+		$[12] = className;
+		$[13] = t1;
+	} else {
+		t1 = $[13];
+	}
+	const t2 = isField ? aria.controlId : id;
+	const t3 = aria["aria-describedby"];
+	const t4 = aria["aria-invalid"];
+	let t5;
+	if ($[14] !== props || $[15] !== t1 || $[16] !== t2 || $[17] !== t3 || $[18] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "field",
+			children: /* @__PURE__ */ _jsx("textarea", {
+				"data-slot": "textarea",
+				className: t1,
+				...props,
+				id: t2,
+				"aria-describedby": t3,
+				"aria-invalid": t4
+			})
+		});
+		$[14] = props;
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+	} else {
+		t5 = $[19];
+	}
+	const control = t5;
+	if (!isField) {
+		return control;
+	}
+	let t6;
+	if ($[20] !== aria || $[21] !== control || $[22] !== description || $[23] !== error || $[24] !== label) {
+		t6 = /* @__PURE__ */ _jsx(Field, {
+			label,
+			description,
+			error,
+			aria,
+			children: control
+		});
+		$[20] = aria;
+		$[21] = control;
+		$[22] = description;
+		$[23] = error;
+		$[24] = label;
+		$[25] = t6;
+	} else {
+		t6 = $[25];
+	}
+	return t6;
 }
 export { Textarea };

package/dist/constants/field.d.ts

@@ -0,0 +1,24 @@
+/** Tuning of the internal labelled field shared by `Input` and `Textarea`. */
+/** Vertical offsets, in em, of changed message words rising in and lifting out. */
+export declare const FIELD_MESSAGE_WORD_OFFSET_EM: {
+    readonly enter: 0.35;
+    readonly exit: -0.35;
+};
+/** Vertical travel, in em, of a digit rolling in or out of a count in the message. */
+export declare const FIELD_MESSAGE_DIGIT_OFFSET_EM = 0.6;
+/** A message word that rolls its digits instead of rising in: counts, decimals, ratios, times and percentages. */
+export declare const FIELD_MESSAGE_NUMBER_PATTERN: RegExp;
+/**
+ * Grouping separators removed before comparing two counts to pick the roll direction: a dot or comma followed by
+ * exactly three digits, so both `1.000` (es) and `1,000` (en) read as a thousand while `1,5` stays a decimal.
+ */
+export declare const FIELD_MESSAGE_GROUP_SEPARATOR_PATTERN: RegExp;
+/** Separators between the components of a time (`0:09`) or a ratio (`3/10`), compared one by one. */
+export declare const FIELD_MESSAGE_COMPONENT_SEPARATOR_PATTERN: RegExp;
+/** Decimal comma of locales such as Spanish, read as a decimal point once the grouping separators are gone. */
+export declare const FIELD_MESSAGE_DECIMAL_COMMA = ",";
+/** Suffixes of the ids that tie the helper and error rows to the control through `aria-describedby`. */
+export declare const FIELD_MESSAGE_ID_SUFFIX: {
+    readonly description: "description";
+    readonly error: "error";
+};

package/dist/constants/field.js

@@ -0,0 +1,24 @@
+/** Tuning of the internal labelled field shared by `Input` and `Textarea`. */
+/** Vertical offsets, in em, of changed message words rising in and lifting out. */
+export const FIELD_MESSAGE_WORD_OFFSET_EM = {
+	enter: .35,
+	exit: -.35
+};
+/** Vertical travel, in em, of a digit rolling in or out of a count in the message. */
+export const FIELD_MESSAGE_DIGIT_OFFSET_EM = .6;
+/** A message word that rolls its digits instead of rising in: counts, decimals, ratios, times and percentages. */
+export const FIELD_MESSAGE_NUMBER_PATTERN = /^\d[\d.,/:]*%?$/;
+/**
+* Grouping separators removed before comparing two counts to pick the roll direction: a dot or comma followed by
+* exactly three digits, so both `1.000` (es) and `1,000` (en) read as a thousand while `1,5` stays a decimal.
+*/
+export const FIELD_MESSAGE_GROUP_SEPARATOR_PATTERN = /[.,](?=\d{3}(?!\d))/g;
+/** Separators between the components of a time (`0:09`) or a ratio (`3/10`), compared one by one. */
+export const FIELD_MESSAGE_COMPONENT_SEPARATOR_PATTERN = /[:/]/;
+/** Decimal comma of locales such as Spanish, read as a decimal point once the grouping separators are gone. */
+export const FIELD_MESSAGE_DECIMAL_COMMA = ",";
+/** Suffixes of the ids that tie the helper and error rows to the control through `aria-describedby`. */
+export const FIELD_MESSAGE_ID_SUFFIX = {
+	description: "description",
+	error: "error"
+};

package/dist/motion/arc-tokens.d.ts

@@ -6,6 +6,7 @@
 export declare const ARC_DURATION: {
     readonly instant: 0.12;
     readonly fast: 0.16;
+    readonly exit: 0.18;
     readonly standard: 0.24;
 };
 /** Cubic-bezier curves for entrances and color or opacity tweens. */
@@ -19,6 +20,12 @@ export declare const ARC_SPRING_SNAPPY: {
     readonly visualDuration: 0.26;
     readonly bounce: 0.12;
 };
+/** Panels, height changes and layout shifts: critically damped, never overshoots. */
+export declare const ARC_SPRING_SMOOTH: {
+    readonly type: "spring";
+    readonly visualDuration: 0.4;
+    readonly bounce: 0;
+};
 /** Shape morphs and width changes that follow new content. */
 export declare const ARC_SPRING_MORPH: {
     readonly type: "spring";

package/dist/motion/arc-tokens.js

@@ -6,6 +6,7 @@
 export const ARC_DURATION = {
 	instant: .12,
 	fast: .16,
+	exit: .18,
 	standard: .24
 };
 /** Cubic-bezier curves for entrances and color or opacity tweens. */
@@ -29,6 +30,12 @@ export const ARC_SPRING_SNAPPY = {
 	visualDuration: .26,
 	bounce: .12
 };
+/** Panels, height changes and layout shifts: critically damped, never overshoots. */
+export const ARC_SPRING_SMOOTH = {
+	type: "spring",
+	visualDuration: .4,
+	bounce: 0
+};
 /** Shape morphs and width changes that follow new content. */
 export const ARC_SPRING_MORPH = {
 	type: "spring",