@eduardoalvarez/arrecife 0.5.1 → 0.6.0

package/dist/form/index.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var react = require('react');
@@ -32,56 +33,56 @@ var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 // src/form/index.tsx
 var typeScale = {
   display: { family: "display", size: 76, lineHeight: 0.96, weight: 800, tracking: "-0.035em" },
-  /** Métricas grandes. Números, no prosa: interlineado 1 y sin descendentes. */
+  /** Large metrics. Numbers, not prose: line height 1 and no descenders. */
   stat: { family: "display", size: 46, lineHeight: 1, weight: 800, tracking: "-0.035em" },
   h1: { family: "display", size: 44, lineHeight: 1.05, weight: 700, tracking: "-0.03em" },
   h2: { family: "display", size: 30, lineHeight: 1.1, weight: 600, tracking: "-0.02em" },
   h3: { family: "display", size: 25, lineHeight: 1.15, weight: 600, tracking: "-0.02em" },
   body: { family: "sans", size: 18, lineHeight: 1.75, weight: 400 },
   /**
-   * 17px. El botón grande y la bajada de las páginas internas.
+   * 17px. The large button, and the deck on interior pages.
    *
-   * Entra como escalón propio porque el documento lo usa DOS veces y en piezas
-   * distintas: «lg 15px 30px r12» con texto de 17, y «h1 44/700 · bajada 17px ·
-   * párrafo de contexto 15px». Un solo uso no habría justificado partir la
-   * distancia entre `ui` (15) y `body` (18); dos sí.
+   * It earns its own step because the identity document uses it TWICE, in two
+   * different pieces: «lg 15/30 r12» with 17px text, and «h1 44/700 · deck 17px
+   * · context paragraph 15px». One use would not have justified splitting the
+   * gap between `ui` (15) and `body` (18); two did.
    */
   lead: { family: "sans", size: 17, lineHeight: 1.5, weight: 400 },
   ui: { family: "sans", size: 15, lineHeight: 1.6, weight: 400 },
   label: { family: "sans", size: 13, lineHeight: 1.5, weight: 500 },
   /**
-   * La escala de las etiquetas de estado: sans 12.5/500, cuadrada.
+   * The status-badge scale: sans 12.5/500, squared off.
    *
-   * Es medio píxel por debajo de `label`, y esta vez el medio píxel sí importa:
-   * una etiqueta de estado va dentro de una tabla o al lado de un título, y a 13
-   * competía con el texto que acompaña. El documento la da en 12.5 y se ve.
+   * That is half a pixel below `label`, and this time the half pixel matters: a
+   * status badge sits inside a table or next to a title, and at 13 it competed
+   * with the text it accompanies. The document specifies 12.5 and it shows.
    */
   tag: { family: "sans", size: 12.5, lineHeight: 1.4, weight: 500 },
   /**
-   * La escala de categoría y métrica: mono 11.5.
+   * The category and metric scale: mono 11.5.
    *
-   * Rompe el suelo de `limits.minScreenPx`, y es a propósito. Ese suelo protege
-   * al TEXTO —lo que se lee en una frase—, y una píldora de una palabra no es
-   * texto corrido: es una marca. El contraste sigue medido y pasa AA (plancton
-   * 5.57:1 sobre abismo), que es la parte que no se negocia.
+   * It breaks the floor set by `limits.minScreenPx`, deliberately. That floor
+   * protects TEXT — what you read in a sentence — and a one-word pill is not
+   * running text: it is a mark. Contrast is still measured and still passes AA
+   * (plankton 5.57:1 over abyss), which is the part that is not negotiable.
    *
-   * A 13 las tres familias de etiqueta salían del tamaño de un botón pequeño y
-   * pesaban más que el título que acompañan. Ver `docs/decisiones.md`.
+   * At 13 the three badge families grew past the size of a small button and
+   * outweighed the title they accompany. See `docs/decisions.md`.
    */
   chip: { family: "mono", size: 11.5, lineHeight: 1.4, weight: 400 },
   /**
-   * Mono SIN transformar: fechas, rutas, versiones, nombres de archivo, la firma
-   * del footer y las métricas de etiqueta. Es la mayoría del mono del sistema.
+   * Mono with NO transform: dates, paths, versions, file names, the footer
+   * signature and metric labels. It is most of the mono in the system.
    *
-   * Existe porque `eyebrow` lleva `uppercase` de fábrica y no es una preferencia
-   * que se pueda apagar: es la escala del eyebrow. Un `18 ago 2026` en versalitas
-   * o un `pose-laptop-coffee.png` en mayúsculas están mal, y sin este escalón la
-   * única salida era un `normal-case` en cada sitio de uso.
+   * It exists because `eyebrow` ships `uppercase` and that is not a preference
+   * you can switch off: it IS the eyebrow scale. An `18 Aug 2026` in small caps
+   * or a `pose-laptop-coffee.png` in all caps are wrong, and without this step
+   * the only way out was a `normal-case` at every call site.
    *
-   * El documento dice 12.5. Son 13 por la misma razón por la que `textMuted` se
-   * corrigió: `limits.minScreenPx` es 13 y plancton «nunca bajo 13px». Esta
-   * escala es justo donde se escriben las metas en muted, así que ponerla en
-   * 12.5 habría dejado ilegible su uso más común por medio píxel.
+   * The document says 12.5. This is 13 for the same reason `textMuted` was
+   * corrected: `limits.minScreenPx` is 13 and plankton is «never under 13px».
+   * This scale is exactly where muted metadata gets written, so putting it at
+   * 12.5 would have made its most common use illegible by half a pixel.
    */
   meta: { family: "mono", size: 13, lineHeight: 1.6, weight: 400 },
   eyebrow: { family: "mono", size: 12, tracking: "0.12em", transform: "uppercase" }
@@ -97,8 +98,24 @@ var control = {
   sm: 14,
   md: 22,
   lg: 30,
-  /** Botón de icono: cuadrado, sin texto. */
-  icon: 42
+  /** Icon button: square, no text. */
+  icon: 42,
+  /**
+   * The dense icon button, 32×32.
+   *
+   * 42 is the right measure for a control you hit with a thumb, and the four
+   * reading sites are where that fits. `cursos` is the odd one out: it is the
+   * only admin app of the set, with three actions per table row, and at 42 the
+   * row grows with them — the original used 24 and 28.
+   *
+   * It is 32 and not 28 because 32 is `sm`'s height. A dense icon button lines
+   * up with a small text button, so a toolbar mixing the two stays on one
+   * baseline; 28 would have been a fifth height that matches nothing.
+   *
+   * It does not replace `icon`. A page's primary action stays at 42; this is for
+   * a row of a table. See `docs/decisions.md` § 22.
+   */
+  iconSm: 32
 };
 var spacing = {
   stepXs: 8,
@@ -110,21 +127,21 @@ var spacing = {
 };
 
 // src/lib/cn.ts
-var kebab = (nombre) => nombre.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
-var escalas = Object.keys(typeScale);
-var radios = Object.keys(radius);
-var espacios = Object.keys(spacing).map(kebab);
-var controles = Object.keys(control).map((nombre) => `control-${kebab(nombre)}`);
+var kebab = (name) => name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+var scales = Object.keys(typeScale);
+var radii = Object.keys(radius);
+var namespaces = Object.keys(spacing).map(kebab);
+var controls = Object.keys(control).map((name) => `control-${kebab(name)}`);
 var twMerge = tailwindMerge.extendTailwindMerge({
   extend: {
     classGroups: {
-      "font-size": [{ text: escalas }],
-      rounded: [{ rounded: radios }],
-      p: [{ p: espacios }],
-      px: [{ px: [...espacios, ...controles] }],
-      py: [{ py: espacios }],
-      gap: [{ gap: espacios }],
-      size: [{ size: controles }]
+      "font-size": [{ text: scales }],
+      rounded: [{ rounded: radii }],
+      p: [{ p: namespaces }],
+      px: [{ px: [...namespaces, ...controls] }],
+      py: [{ py: namespaces }],
+      gap: [{ gap: namespaces }],
+      size: [{ size: controls }]
     }
   }
 });
@@ -144,46 +161,31 @@ function Label({ className, ...props }) {
     }
   );
 }
-var ETIQUETA = {
-  display: "h1",
-  stat: "p",
-  h1: "h1",
-  h2: "h2",
-  h3: "h3",
-  body: "p",
-  lead: "p",
-  ui: "p",
-  label: "span",
-  tag: "span",
-  meta: "p",
-  chip: "span",
-  eyebrow: "p"
-};
-var texto = classVarianceAuthority.cva("", {
+var text = classVarianceAuthority.cva("", {
   variants: {
     variant: {
       display: "text-display font-display",
-      // Métricas grandes: 46px de display. Es la única escala pensada para un
-      // número, y por eso el interlineado es 1.
+      // Large metrics: 46px of display. It is the only scale designed for a
+      // number, which is why its line height is 1.
       stat: "text-stat font-display",
       h1: "text-h1 font-display",
       h2: "text-h2 font-display",
       h3: "text-h3 font-display",
       body: "text-body font-sans",
-      // 17px: la bajada de las páginas internas y el botón grande.
+      // 17px: the deck on interior pages and the large button.
       lead: "text-lead font-sans",
       ui: "text-ui font-sans",
       label: "text-label font-sans",
-      // Las dos escalas de etiqueta. `tag` es el estado (sans 12.5/500) y `chip`
-      // la categoría y la métrica (mono 11.5). Ninguna transforma el texto.
+      // The two badge scales. `tag` is status (sans 12.5/500) and `chip` is
+      // category and metric (mono 11.5). Neither transforms the text.
       tag: "text-tag font-sans",
       chip: "text-chip font-mono",
-      // Mono SIN transformar: fechas, rutas, versiones, nombres de archivo y la
-      // firma del footer. Es el escalón que faltaba, y por el que cada sitio de
-      // uso terminaba escribiendo `variant="eyebrow" className="normal-case"`.
+      // Mono with NO transform: dates, paths, versions, file names and the
+      // footer signature. It is the step that was missing, and the reason every
+      // call site ended up writing `variant="eyebrow" className="normal-case"`.
       meta: "text-meta font-mono",
-      // `uppercase` no cabe en un token de tamaño: text-transform no es un
-      // modificador de --text-*. Por eso lo pone la variante y no theme.css.
+      // `uppercase` does not fit in a size token: text-transform is not a
+      // modifier of --text-*. Which is why the variant sets it, not theme.css.
       eyebrow: "text-eyebrow font-mono uppercase"
     },
     tone: {
@@ -199,6 +201,21 @@ var texto = classVarianceAuthority.cva("", {
   },
   defaultVariants: { variant: "body", tone: "primary" }
 });
+var LABEL = {
+  display: "h1",
+  stat: "p",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  body: "p",
+  lead: "p",
+  ui: "p",
+  label: "span",
+  tag: "span",
+  meta: "p",
+  chip: "span",
+  eyebrow: "p"
+};
 function Text({
   className,
   variant,
@@ -209,34 +226,34 @@ function Text({
   children,
   ...props
 }) {
-  const escala = variant ?? "body";
-  const limitar = measure ?? escala === "body";
-  const clases = cn(texto({ variant, tone }), limitar && "max-w-measure", className);
+  const scale = variant ?? "body";
+  const clamp = measure ?? scale === "body";
+  const classes = cn(text({ variant, tone }), clamp && "max-w-measure", className);
   if (asChild) {
-    return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: clases, ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: classes, ...props, children });
   }
-  const Etiqueta = as ?? ETIQUETA[escala];
-  return /* @__PURE__ */ jsxRuntime.jsx(Etiqueta, { className: clases, ...props, children });
+  const Label2 = as ?? LABEL[scale];
+  return /* @__PURE__ */ jsxRuntime.jsx(Label2, { className: classes, ...props, children });
 }
 var Form = reactHookForm.FormProvider;
-var Campo = react.createContext(null);
+var Field = react.createContext(null);
 var Item = react.createContext(null);
 function FormField(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Campo.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Field.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
 }
 function useFormField() {
-  const campo = react.useContext(Campo);
+  const field = react.useContext(Field);
   const item = react.useContext(Item);
   const { getFieldState } = reactHookForm.useFormContext();
-  const estado = reactHookForm.useFormState({ name: campo?.name ?? "" });
-  if (!campo) throw new Error("useFormField se usa dentro de un <FormField>.");
-  if (!item) throw new Error("useFormField se usa dentro de un <FormItem>.");
+  const state = reactHookForm.useFormState({ name: field?.name ?? "" });
+  if (!field) throw new Error("useFormField must be used inside a <FormField>.");
+  if (!item) throw new Error("useFormField must be used inside a <FormItem>.");
   return {
-    name: campo.name,
+    name: field.name,
     id: item.id,
-    idDescripcion: `${item.id}-descripcion`,
-    idMensaje: `${item.id}-mensaje`,
-    ...getFieldState(campo.name, estado)
+    descriptionId: `${item.id}-descripcion`,
+    messageId: `${item.id}-mensaje`,
+    ...getFieldState(field.name, state)
   };
 }
 function FormItem({ className, ...props }) {
@@ -248,45 +265,45 @@ function FormLabel({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: id, className, ...props });
 }
 function FormControl({ ...props }) {
-  const { error, id, idDescripcion, idMensaje } = useFormField();
+  const { error, id, descriptionId, messageId } = useFormField();
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactSlot.Slot,
     {
       id,
-      "aria-describedby": error ? `${idDescripcion} ${idMensaje}` : idDescripcion,
+      "aria-describedby": error ? `${descriptionId} ${messageId}` : descriptionId,
       "aria-invalid": error ? true : void 0,
       ...props
     }
   );
 }
 function FormDescription({ className, ...props }) {
-  const { idDescripcion } = useFormField();
+  const { descriptionId } = useFormField();
   return /* @__PURE__ */ jsxRuntime.jsx(
     Text,
     {
       as: "p",
       variant: "label",
       tone: "muted",
-      id: idDescripcion,
+      id: descriptionId,
       className: cn("font-normal", className),
       ...props
     }
   );
 }
 function FormMessage({ className, children, ...props }) {
-  const { error, idMensaje } = useFormField();
-  const cuerpo = error?.message ? String(error.message) : children;
-  if (!cuerpo) return null;
+  const { error, messageId } = useFormField();
+  const body = error?.message ? String(error.message) : children;
+  if (!body) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Text,
     {
       as: "p",
       variant: "label",
       tone: "error",
-      id: idMensaje,
+      id: messageId,
       className,
       ...props,
-      children: cuerpo
+      children: body
     }
   );
 }

package/dist/form/index.d.cts

@@ -3,44 +3,45 @@ import { ComponentPropsWithoutRef } from 'react';
 import * as react_hook_form from 'react-hook-form';
 import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
 import { Slot } from '@radix-ui/react-slot';
-import { L as Label } from '../label-DuTvJGxD.cjs';
+import { L as Label } from '../label-MgHFKnFy.cjs';
 import '@radix-ui/react-label';
 
 /**
- * La capa que ata los controles a un formulario con validación y mensajes.
+ * The layer that ties the controls to a form with validation and messages.
  *
- * La librería ya traía `Input`, `Label`, `Checkbox`, `RadioGroup`, `Select` y
- * `Textarea`, y ninguno sabía nada del otro: el `htmlFor`, el `aria-describedby`
- * del mensaje de error y el `aria-invalid` había que cablearlos a mano en cada
- * campo de cada proyecto. Eso se olvida, y cuando se olvida el fallo es que un
- * lector de pantalla no anuncia por qué el campo está en rojo.
+ * The library already had `Input`, `Label`, `Checkbox`, `RadioGroup`, `Select`
+ * and `Textarea`, and none of them knew anything about the others: the
+ * `htmlFor`, the error message's `aria-describedby` and the `aria-invalid` had
+ * to be wired by hand on every field of every project. That gets forgotten, and
+ * when it does the failure is that a screen reader never announces why the field
+ * is red.
  *
- * Se publica en `@eduardoalvarez/arrecife/form`, NO en la raíz, y eso es
- * deliberado. React Hook Form es una dependencia de pares opcional: solo uno de
- * los cinco proyectos la usa, y si esto colgara del índice principal, los otros
- * cuatro tendrían que instalarla para que su bundler resolviera un import que
- * nunca ejecutan. Es la misma razón por la que `./og` y `./shiki` viven aparte,
- * mirada desde el otro lado: allí se saca React del camino, aquí se saca RHF.
+ * It is published at `@eduardoalvarez/arrecife/form`, NOT at the root, and that
+ * is deliberate. React Hook Form is an optional peer dependency: only one of the
+ * five projects uses it, and if this hung off the main index the other four
+ * would have to install it just so their bundler could resolve an import they
+ * never execute. It is the same reason `./og` and `./shiki` live apart, seen
+ * from the other side: there React is kept out of the way, here RHF is.
  *
- * La forma es la de shadcn —`FormField` sobre `Controller`, contexto de campo y
- * contexto de item— porque el proyecto que la consume ya está escrito contra
- * ella y reinventarla solo le costaría una migración. Lo que cambia es el
- * vocabulario visual: los ids, la escala y el tono salen del sistema.
+ * The shape is shadcn's — `FormField` on `Controller`, field context and item
+ * context — because the project consuming it is already written against it and
+ * reinventing it would only cost them a migration. What changes is the visual
+ * vocabulary: the ids, the scale and the tone come from the system.
  */
 declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getErrors, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe, }: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
 /**
- * Un campo controlado. Envuelve el `Controller` de RHF y además publica el
- * nombre en contexto, que es de donde lo leen la etiqueta y el mensaje sin que
- * haya que repetirlo tres veces.
+ * A controlled field. It wraps RHF's `Controller` and also publishes the name
+ * into context, which is where the label and the message read it from without
+ * having to repeat it three times.
  */
 declare function FormField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: ControllerProps<TFieldValues, TName>): react.JSX.Element;
 /**
- * Lo que necesita cualquier pieza del campo: el nombre, los tres ids y el estado
- * de validación.
+ * What any piece of the field needs: the name, the three ids and the validation
+ * state.
  *
- * Tira si se usa fuera de un `FormField` o de un `FormItem`, con el mensaje que
- * dice cuál de los dos falta. Devolver algo a medias sería peor: el campo se
- * renderizaría sin `aria-describedby` y nada avisaría.
+ * It throws if used outside a `FormField` or a `FormItem`, with a message saying
+ * which of the two is missing. Returning something half-formed would be worse:
+ * the field would render with no `aria-describedby` and nothing would warn.
  */
 declare function useFormField(): {
     invalid: boolean;
@@ -50,36 +51,36 @@ declare function useFormField(): {
     error?: react_hook_form.FieldError;
     name: string;
     id: string;
-    idDescripcion: string;
-    idMensaje: string;
+    descriptionId: string;
+    messageId: string;
 };
-/** La caja del campo: etiqueta, control, ayuda y mensaje, en columna. */
+/** The field's box: label, control, help and message, in a column. */
 declare function FormItem({ className, ...props }: ComponentPropsWithoutRef<'div'>): react.JSX.Element;
 /**
- * La etiqueta NO se tiñe de rojo cuando el campo falla.
+ * The label is NOT tinted red when the field fails.
  *
- * El sistema deja el color semántico en el borde y en el glifo, y el texto en un
- * token de texto: el borde del control ya está en `error` y el mensaje de abajo
- * también, así que teñir además la etiqueta son tres rojos para un solo fallo.
+ * The system keeps the semantic color on the border and on the glyph, and the
+ * text on a text token: the control's border is already in `error` and so is the
+ * message below it, so tinting the label as well is three reds for one failure.
  */
 declare function FormLabel({ className, ...props }: ComponentPropsWithoutRef<typeof Label>): react.JSX.Element;
 /**
- * Envuelve al control y le cablea los atributos: el `id` que la etiqueta apunta,
- * el `aria-describedby` con la ayuda y el mensaje, y el `aria-invalid`.
+ * Wraps the control and wires its attributes: the `id` the label points at, the
+ * `aria-describedby` with the help and the message, and the `aria-invalid`.
  *
- * Es un `Slot`, así que el hijo puede ser cualquiera de los controles del
- * sistema —`Input`, `Textarea`, `SelectTrigger`— sin que esto sepa cuál.
+ * It is a `Slot`, so the child can be any of the system's controls — `Input`,
+ * `Textarea`, `SelectTrigger` — without this knowing which.
  */
 declare function FormControl({ ...props }: ComponentPropsWithoutRef<typeof Slot>): react.JSX.Element;
-/** La ayuda del campo. Se anuncia siempre, haya error o no. */
+/** The field's help text. It is always announced, error or not. */
 declare function FormDescription({ className, ...props }: ComponentPropsWithoutRef<'p'>): react.JSX.Element;
 /**
- * El mensaje de validación. Sin error no renderiza nada: un hueco reservado
- * para el fallo desplaza el resto del formulario cada vez que aparece.
+ * The validation message. With no error it renders nothing: a gap reserved for
+ * the failure shifts the rest of the form every time it appears.
  *
- * Toma el texto del error de RHF; `children` sirve para un mensaje que no venga
- * del esquema —el 409 que devuelve el servidor y que ningún validador de
- * cliente puede anticipar—.
+ * It takes its text from RHF's error; `children` is for a message that does not
+ * come from the schema — the 409 the server returns and that no client-side
+ * validator can anticipate.
  */
 declare function FormMessage({ className, children, ...props }: ComponentPropsWithoutRef<'p'>): react.JSX.Element | null;
 

package/dist/form/index.d.ts

@@ -3,44 +3,45 @@ import { ComponentPropsWithoutRef } from 'react';
 import * as react_hook_form from 'react-hook-form';
 import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
 import { Slot } from '@radix-ui/react-slot';
-import { L as Label } from '../label-DuTvJGxD.js';
+import { L as Label } from '../label-MgHFKnFy.js';
 import '@radix-ui/react-label';
 
 /**
- * La capa que ata los controles a un formulario con validación y mensajes.
+ * The layer that ties the controls to a form with validation and messages.
  *
- * La librería ya traía `Input`, `Label`, `Checkbox`, `RadioGroup`, `Select` y
- * `Textarea`, y ninguno sabía nada del otro: el `htmlFor`, el `aria-describedby`
- * del mensaje de error y el `aria-invalid` había que cablearlos a mano en cada
- * campo de cada proyecto. Eso se olvida, y cuando se olvida el fallo es que un
- * lector de pantalla no anuncia por qué el campo está en rojo.
+ * The library already had `Input`, `Label`, `Checkbox`, `RadioGroup`, `Select`
+ * and `Textarea`, and none of them knew anything about the others: the
+ * `htmlFor`, the error message's `aria-describedby` and the `aria-invalid` had
+ * to be wired by hand on every field of every project. That gets forgotten, and
+ * when it does the failure is that a screen reader never announces why the field
+ * is red.
  *
- * Se publica en `@eduardoalvarez/arrecife/form`, NO en la raíz, y eso es
- * deliberado. React Hook Form es una dependencia de pares opcional: solo uno de
- * los cinco proyectos la usa, y si esto colgara del índice principal, los otros
- * cuatro tendrían que instalarla para que su bundler resolviera un import que
- * nunca ejecutan. Es la misma razón por la que `./og` y `./shiki` viven aparte,
- * mirada desde el otro lado: allí se saca React del camino, aquí se saca RHF.
+ * It is published at `@eduardoalvarez/arrecife/form`, NOT at the root, and that
+ * is deliberate. React Hook Form is an optional peer dependency: only one of the
+ * five projects uses it, and if this hung off the main index the other four
+ * would have to install it just so their bundler could resolve an import they
+ * never execute. It is the same reason `./og` and `./shiki` live apart, seen
+ * from the other side: there React is kept out of the way, here RHF is.
  *
- * La forma es la de shadcn —`FormField` sobre `Controller`, contexto de campo y
- * contexto de item— porque el proyecto que la consume ya está escrito contra
- * ella y reinventarla solo le costaría una migración. Lo que cambia es el
- * vocabulario visual: los ids, la escala y el tono salen del sistema.
+ * The shape is shadcn's — `FormField` on `Controller`, field context and item
+ * context — because the project consuming it is already written against it and
+ * reinventing it would only cost them a migration. What changes is the visual
+ * vocabulary: the ids, the scale and the tone come from the system.
  */
 declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getErrors, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe, }: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
 /**
- * Un campo controlado. Envuelve el `Controller` de RHF y además publica el
- * nombre en contexto, que es de donde lo leen la etiqueta y el mensaje sin que
- * haya que repetirlo tres veces.
+ * A controlled field. It wraps RHF's `Controller` and also publishes the name
+ * into context, which is where the label and the message read it from without
+ * having to repeat it three times.
  */
 declare function FormField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: ControllerProps<TFieldValues, TName>): react.JSX.Element;
 /**
- * Lo que necesita cualquier pieza del campo: el nombre, los tres ids y el estado
- * de validación.
+ * What any piece of the field needs: the name, the three ids and the validation
+ * state.
  *
- * Tira si se usa fuera de un `FormField` o de un `FormItem`, con el mensaje que
- * dice cuál de los dos falta. Devolver algo a medias sería peor: el campo se
- * renderizaría sin `aria-describedby` y nada avisaría.
+ * It throws if used outside a `FormField` or a `FormItem`, with a message saying
+ * which of the two is missing. Returning something half-formed would be worse:
+ * the field would render with no `aria-describedby` and nothing would warn.
  */
 declare function useFormField(): {
     invalid: boolean;
@@ -50,36 +51,36 @@ declare function useFormField(): {
     error?: react_hook_form.FieldError;
     name: string;
     id: string;
-    idDescripcion: string;
-    idMensaje: string;
+    descriptionId: string;
+    messageId: string;
 };
-/** La caja del campo: etiqueta, control, ayuda y mensaje, en columna. */
+/** The field's box: label, control, help and message, in a column. */
 declare function FormItem({ className, ...props }: ComponentPropsWithoutRef<'div'>): react.JSX.Element;
 /**
- * La etiqueta NO se tiñe de rojo cuando el campo falla.
+ * The label is NOT tinted red when the field fails.
  *
- * El sistema deja el color semántico en el borde y en el glifo, y el texto en un
- * token de texto: el borde del control ya está en `error` y el mensaje de abajo
- * también, así que teñir además la etiqueta son tres rojos para un solo fallo.
+ * The system keeps the semantic color on the border and on the glyph, and the
+ * text on a text token: the control's border is already in `error` and so is the
+ * message below it, so tinting the label as well is three reds for one failure.
  */
 declare function FormLabel({ className, ...props }: ComponentPropsWithoutRef<typeof Label>): react.JSX.Element;
 /**
- * Envuelve al control y le cablea los atributos: el `id` que la etiqueta apunta,
- * el `aria-describedby` con la ayuda y el mensaje, y el `aria-invalid`.
+ * Wraps the control and wires its attributes: the `id` the label points at, the
+ * `aria-describedby` with the help and the message, and the `aria-invalid`.
  *
- * Es un `Slot`, así que el hijo puede ser cualquiera de los controles del
- * sistema —`Input`, `Textarea`, `SelectTrigger`— sin que esto sepa cuál.
+ * It is a `Slot`, so the child can be any of the system's controls — `Input`,
+ * `Textarea`, `SelectTrigger` — without this knowing which.
  */
 declare function FormControl({ ...props }: ComponentPropsWithoutRef<typeof Slot>): react.JSX.Element;
-/** La ayuda del campo. Se anuncia siempre, haya error o no. */
+/** The field's help text. It is always announced, error or not. */
 declare function FormDescription({ className, ...props }: ComponentPropsWithoutRef<'p'>): react.JSX.Element;
 /**
- * El mensaje de validación. Sin error no renderiza nada: un hueco reservado
- * para el fallo desplaza el resto del formulario cada vez que aparece.
+ * The validation message. With no error it renders nothing: a gap reserved for
+ * the failure shifts the rest of the form every time it appears.
  *
- * Toma el texto del error de RHF; `children` sirve para un mensaje que no venga
- * del esquema —el 409 que devuelve el servidor y que ningún validador de
- * cliente puede anticipar—.
+ * It takes its text from RHF's error; `children` is for a message that does not
+ * come from the schema — the 409 the server returns and that no client-side
+ * validator can anticipate.
  */
 declare function FormMessage({ className, children, ...props }: ComponentPropsWithoutRef<'p'>): react.JSX.Element | null;