beez-ui 2.4.0 → 2.5.0

package/CHANGELOG.md

@@ -4,6 +4,16 @@ Todos los cambios relevantes de beez-ui se documentan en este archivo con el for
 
 ## [Unreleased]
 
+## [2.5.0] - 2026-10-15
+
+### Added
+
+- `Input` y `Textarea` aceptan `label`, `description` y `error`, de Arc: si se pasa cualquiera de ellos (aunque valga `undefined`, así el control no se vuelve a montar cuando aparece la validación) renderizan el campo completo, con el label asociado al control, la ayuda y el error enlazados por `aria-describedby`, y filas que se abren con un resorte y cambian solo las palabras que cambiaron; los números de la ayuda (por ejemplo un contador de caracteres) giran solo los dígitos que cambian. El error marca `aria-invalid` y se anuncia con `role="alert"`. Con movimiento reducido los cambios son instantáneos. Sin esas props siguen renderizando solo el control.
+
+### Changed
+
+- `Input` y `Textarea` toman el diseño de Arc: alto mínimo de 44 px (`Textarea`, 110 px con redimensión vertical y sin crecer con el contenido), radio de control, fondo `surface`, borde fuerte que pasa a `foreground` con hover de puntero fino y con foco de teclado, sin anillos de foco, y borde `danger` cuando son inválidos. `InputGroup` usa el mismo marco.
+
 ## [2.4.0] - 2026-10-14
 
 ### Added

package/THIRD_PARTY_NOTICES.md

@@ -4,7 +4,7 @@ beez-ui includes code adapted from the following projects.
 
 ## Arc
 
-The theme tokens (`theme.css`, from Arc's `foundation.css`) and the `Button` API, styles and motion (`src/components/button.tsx`, `src/components/button-label.tsx`, `src/components/control-button.tsx`, `src/motion/arc-press.ts`, `src/motion/arc-tokens.ts`, `src/motion/use-morph-width.ts`), and the `ActionButton` and `SplitButton` components and their label morph (`src/components/action-button.tsx`, `src/components/split-button.tsx`, `src/components/morph-text.tsx`) are adapted from the free Arc library: https://uiarc.dev, https://github.com/kuratlielia/arc-library
+The theme tokens (`theme.css`, from Arc's `foundation.css`) and the `Button` API, styles and motion (`src/components/button.tsx`, `src/components/button-label.tsx`, `src/components/control-button.tsx`, `src/motion/arc-press.ts`, `src/motion/arc-tokens.ts`, `src/motion/use-morph-width.ts`), and the `ActionButton` and `SplitButton` components and their label morph (`src/components/action-button.tsx`, `src/components/split-button.tsx`, `src/components/morph-text.tsx`), and the `Input` and `Textarea` fields with their animated helper and error rows (`src/components/input.tsx`, `src/components/textarea.tsx`, `src/components/field.tsx`) are adapted from the free Arc library: https://uiarc.dev, https://github.com/kuratlielia/arc-library
 
 ```
 MIT License

package/dist/components/field.d.ts

@@ -0,0 +1,51 @@
+import type { AriaAttributes, ReactNode } from "react";
+/** Copy that turns a bare control into a labelled field. */
+export type FieldCopyProps = {
+    /** Visible label, tied to the control with `htmlFor`. */
+    label?: string;
+    /** Helper copy under the control, linked through `aria-describedby`; counts in it roll their digits. */
+    description?: string;
+    /** Error copy: sets `aria-invalid` and renders in a `role="alert"` row that rewords in place. */
+    error?: string;
+};
+type FieldAriaOptions = FieldCopyProps & {
+    id?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: AriaAttributes["aria-invalid"];
+};
+/** Ids and ARIA wiring a labelled field passes to its control. */
+export type FieldAria = {
+    controlId: string;
+    descriptionId: string;
+    errorId: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: AriaAttributes["aria-invalid"];
+};
+/**
+ * Resolves the control id (the caller's or a generated one) and merges the helper and error ids into the caller's
+ * `aria-describedby`. An error always marks the control invalid.
+ * @param options - Field copy and the caller's id and ARIA attributes.
+ * @returns The ids and ARIA attributes for the control.
+ */
+export declare function useFieldAria({ id, description, error, ...aria }: FieldAriaOptions): FieldAria;
+/**
+ * Tells whether a control renders as a labelled field. It looks at which props were passed, not at their values, so a
+ * field whose error or description comes and goes keeps the same tree and its control never remounts (losing an
+ * uncontrolled value or the focus) when validation appears.
+ * @param props - Props passed to the control.
+ * @returns `true` when the caller passed `label`, `description` or `error`, even as `undefined`.
+ */
+export declare function usesFieldCopy(props: FieldCopyProps): boolean;
+type FieldProps = Omit<FieldCopyProps, "label"> & {
+    label?: string;
+    aria: FieldAria;
+    className?: string;
+    children: ReactNode;
+};
+/**
+ * Arc's field layout: label, control, then the helper and error rows. There is no row gap, because grid tracks clamp
+ * a negative margin at zero and a closed row would still pay it; each row carries its own space instead. The wrapper
+ * keeps the bare control's full-width contract, so a field fills a flex row like the control alone does.
+ */
+export declare function Field({ label, description, error, aria, className, children }: FieldProps): import("react").JSX.Element;
+export {};