beez-ui 2.3.1 → 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/morph-text.d.ts

@@ -0,0 +1,14 @@
+import type { Ref } from "react";
+export type MorphTextProps = {
+    text: string;
+    reduceMotion: boolean;
+    /** Row of glyphs, for a caller that springs its slot to the row's width with `useMorphWidth`. */
+    ref?: Ref<HTMLSpanElement>;
+};
+/**
+ * Morphs one label into the next: kept letters glide into place and new ones rise in from a soft blur. The row
+ * keeps its natural width; callers spring the slot around it.
+ * @param props - Label text, whether the user prefers reduced motion and an optional ref to the row.
+ * @returns The row of animated letters. Callers hide it from assistive tech and name their control otherwise.
+ */
+export declare function MorphText({ text, reduceMotion, ref }: MorphTextProps): import("react").JSX.Element;

package/dist/components/morph-text.js

@@ -0,0 +1,210 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Letter-by-letter label morph adapted from Arc (https://uiarc.dev), Copyright (c) 2026 Elia Kuratli, MIT License.
+* The full license text ships in THIRD_PARTY_NOTICES.md. Internal: shared by `ActionButton` and `SplitButton`.
+*/
+import { useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { MORPH_TEXT_GLYPH_OFFSET_PX, MORPH_TEXT_MAX_GLYPH_DELAY_S, MORPH_TEXT_MIN_SHARED_RUN } from "../constants/morph-text.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE, ARC_SPRING_MORPH, ARC_STAGGER } from "../motion/arc-tokens.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const restState = {
+	opacity: 1,
+	y: 0,
+	filter: "blur(0px)"
+};
+/** Letters rise in from a soft blur and lift away a little faster. */
+const glyphEnter = {
+	opacity: 0,
+	y: MORPH_TEXT_GLYPH_OFFSET_PX.enter,
+	filter: `blur(${ARC_BLUR.soft}px)`
+};
+const glyphExit = {
+	opacity: 0,
+	y: MORPH_TEXT_GLYPH_OFFSET_PX.exit,
+	filter: `blur(${ARC_BLUR.subtle}px)`,
+	transition: {
+		duration: ARC_DURATION.fast,
+		ease: [...ARC_EASE.standard]
+	}
+};
+const reducedTransition = { duration: ARC_DURATION.instant };
+const reducedEnter = {
+	...restState,
+	opacity: 0
+};
+const reducedExit = {
+	opacity: 0,
+	transition: reducedTransition
+};
+/** Grapheme segmenter created once; absent on runtimes without `Intl.Segmenter`. */
+const graphemeSegmenter = typeof Intl.Segmenter === "function" ? new Intl.Segmenter(undefined, { granularity: "grapheme" }) : undefined;
+/**
+* Splits text into user-perceived characters, so emoji sequences, flags and combining accents stay in one glyph.
+* Falls back to code points when `Intl.Segmenter` is unavailable.
+* @param text - Text to split.
+* @returns Graphemes in reading order.
+*/
+function splitGraphemes(text) {
+	if (!graphemeSegmenter) return [...text];
+	return Array.from(graphemeSegmenter.segment(text), (segment) => segment.segment);
+}
+/**
+* Turns characters into glyphs of one generation.
+* @param characters - Characters to wrap.
+* @param generation - Label generation, part of every glyph id.
+* @returns Glyphs in reading order.
+*/
+function toGlyphs(characters, generation) {
+	return characters.map((character, order) => ({
+		id: `${generation}:${order}`,
+		character,
+		order
+	}));
+}
+/**
+* Splits a label into glyphs, keeping the identity of the shared leading and trailing characters of the previous
+* label, so `Copy page` → `Copied` only replaces the changed letters.
+* @param text - Current label.
+* @returns Glyphs of the label.
+*/
+function useGlyphs(text) {
+	const $ = _c(10);
+	let t0;
+	if ($[0] !== text) {
+		t0 = () => ({
+			text,
+			generation: 0,
+			glyphs: toGlyphs(splitGraphemes(text), 0)
+		});
+		$[0] = text;
+		$[1] = t0;
+	} else {
+		t0 = $[1];
+	}
+	const [glyphState, setGlyphState] = useState(t0);
+	if (glyphState.text === text) {
+		return glyphState.glyphs;
+	}
+	let t1;
+	if ($[2] !== glyphState.text) {
+		t1 = splitGraphemes(glyphState.text);
+		$[2] = glyphState.text;
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	const previous = t1;
+	let generation;
+	let t2;
+	if ($[4] !== glyphState.generation || $[5] !== glyphState.glyphs || $[6] !== previous || $[7] !== text) {
+		const next = splitGraphemes(text);
+		let sharedStart = 0;
+		let sharedEnd = 0;
+		while (sharedStart < previous.length && sharedStart < next.length && previous[sharedStart] === next[sharedStart]) {
+			sharedStart++;
+		}
+		while (sharedEnd < previous.length - sharedStart && sharedEnd < next.length - sharedStart && previous[previous.length - 1 - sharedEnd] === next[next.length - 1 - sharedEnd]) {
+			sharedEnd++;
+		}
+		if (sharedStart < MORPH_TEXT_MIN_SHARED_RUN) {
+			sharedStart = 0;
+		}
+		if (sharedEnd < MORPH_TEXT_MIN_SHARED_RUN) {
+			sharedEnd = 0;
+		}
+		generation = glyphState.generation + 1;
+		t2 = [
+			...glyphState.glyphs.slice(0, sharedStart),
+			...toGlyphs(next.slice(sharedStart, next.length - sharedEnd), generation),
+			...glyphState.glyphs.slice(glyphState.glyphs.length - sharedEnd)
+		];
+		$[4] = glyphState.generation;
+		$[5] = glyphState.glyphs;
+		$[6] = previous;
+		$[7] = text;
+		$[8] = generation;
+		$[9] = t2;
+	} else {
+		generation = $[8];
+		t2 = $[9];
+	}
+	const glyphs = t2;
+	setGlyphState({
+		text,
+		generation,
+		glyphs
+	});
+	return glyphs;
+}
+/**
+* Morphs one label into the next: kept letters glide into place and new ones rise in from a soft blur. The row
+* keeps its natural width; callers spring the slot around it.
+* @param props - Label text, whether the user prefers reduced motion and an optional ref to the row.
+* @returns The row of animated letters. Callers hide it from assistive tech and name their control otherwise.
+*/
+export function MorphText(t0) {
+	const $ = _c(12);
+	const { text, reduceMotion, ref } = t0;
+	const glyphs = useGlyphs(text);
+	let t1;
+	if ($[0] !== glyphs || $[1] !== reduceMotion || $[2] !== text) {
+		let t2;
+		if ($[4] !== reduceMotion || $[5] !== text) {
+			t2 = (glyph) => /* @__PURE__ */ _jsx(motion.span, {
+				className: "inline-block",
+				layout: reduceMotion ? false : "position",
+				layoutDependency: text,
+				initial: reduceMotion ? reducedEnter : glyphEnter,
+				animate: restState,
+				exit: reduceMotion ? reducedExit : glyphExit,
+				transition: reduceMotion ? reducedTransition : {
+					duration: ARC_DURATION.standard,
+					ease: [...ARC_EASE.enter],
+					delay: Math.min(glyph.order * ARC_STAGGER.char, MORPH_TEXT_MAX_GLYPH_DELAY_S),
+					layout: ARC_SPRING_MORPH
+				},
+				children: glyph.character
+			}, glyph.id);
+			$[4] = reduceMotion;
+			$[5] = text;
+			$[6] = t2;
+		} else {
+			t2 = $[6];
+		}
+		t1 = glyphs.map(t2);
+		$[0] = glyphs;
+		$[1] = reduceMotion;
+		$[2] = text;
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	let t2;
+	if ($[7] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			mode: "popLayout",
+			initial: false,
+			children: t1
+		});
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	let t3;
+	if ($[9] !== ref || $[10] !== t2) {
+		t3 = /* @__PURE__ */ _jsx("span", {
+			ref,
+			className: "relative inline-flex flex-none whitespace-pre",
+			children: t2
+		});
+		$[9] = ref;
+		$[10] = t2;
+		$[11] = t3;
+	} else {
+		t3 = $[11];
+	}
+	return t3;
+}

package/dist/components/split-button.d.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+import type { SplitButtonVariant } from "../constants/split-button.js";
+export type { SplitButtonVariant } from "../constants/split-button.js";
+/** One entry of the menu half. */
+export type SplitButtonAction = {
+    label: string;
+    onSelect?: () => void;
+    disabled?: boolean;
+    /** Marks an action that deletes or discards, drawn in the danger color. */
+    destructive?: boolean;
+    icon?: ReactNode;
+};
+export type SplitButtonProps = {
+    /** Label of the main action and its accessible name; changing it morphs the letters in place. */
+    label: string;
+    /** Actions of the menu half, in order. */
+    actions: SplitButtonAction[];
+    /** Runs the main action. */
+    onClick?: () => void;
+    disabled?: boolean;
+    /** Icon before the label; swapping it for another element (such as Copy for Check) crossfades it. */
+    icon?: ReactNode;
+    /** `primary` for the main action of a surface, `secondary` for a quieter, smaller one. */
+    variant?: SplitButtonVariant;
+    /** Accessible name of the menu half; defaults to "Más acciones de {label}". */
+    menuLabel?: string;
+    className?: string;
+};
+/**
+ * A main action joined to a menu of related actions, such as Copy page with Copy as Markdown and Open in a new tab.
+ * The main half announces label changes politely; the menu half opens a `DropdownMenu` aligned to its end.
+ * @param props - Main action, its icon, the menu actions, the variant and accessible names.
+ * @returns The joined pair of buttons and their menu.
+ */
+declare function SplitButton({ label, actions, onClick, disabled, icon, variant, menuLabel, className, }: SplitButtonProps): import("react").JSX.Element;
+export { SplitButton };