@eduardoalvarez/arrecife 0.3.0 → 0.5.0

package/dist/{chunk-ND45OQOC.js → chunk-YZ2SDOVZ.js}

@@ -1,30 +1,8 @@
 import { aletas, RUTA_ASSETS, poses, caras } from './chunk-E3OMP2DL.js';
-import { spacing, control, radius, typeScale, naming } from './chunk-I7GYZD2A.js';
-import { clsx } from 'clsx';
-import { extendTailwindMerge } from 'tailwind-merge';
+import { cn } from './chunk-NHS7ETKJ.js';
+import { naming, tagline } from './chunk-TSPJOM6K.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-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 twMerge = 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 }]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 function Isotipo({
   sobre = "oscuro",
   basePath = RUTA_ASSETS,
@@ -49,20 +27,36 @@ function Logo({
   sobre = "oscuro",
   basePath = RUTA_ASSETS,
   soloIsotipo = false,
+  conLema = false,
   className,
   ...props
 }) {
+  const conAleta = /* @__PURE__ */ jsx(
+    Isotipo,
+    {
+      sobre,
+      basePath,
+      alt: soloIsotipo ? naming.wordmark : "",
+      className: conLema ? "h-9 w-auto" : "h-7 w-auto"
+    }
+  );
+  const wordmark = /* @__PURE__ */ jsx("span", { className: "text-ui font-display text-text-primary font-bold tracking-[-0.02em]", children: naming.wordmark });
+  if (soloIsotipo) {
+    return /* @__PURE__ */ jsx("span", { className: cn("gap-step-xs inline-flex items-center", className), ...props, children: conAleta });
+  }
+  if (conLema) {
+    return /* @__PURE__ */ jsxs("span", { className: cn("gap-step-sm inline-flex items-center", className), ...props, children: [
+      conAleta,
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "bg-hairline h-8 w-px shrink-0" }),
+      /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
+        wordmark,
+        /* @__PURE__ */ jsx("span", { className: "text-eyebrow font-mono text-text-muted uppercase", children: tagline.corto })
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsxs("span", { className: cn("gap-step-xs inline-flex items-center", className), ...props, children: [
-    /* @__PURE__ */ jsx(
-      Isotipo,
-      {
-        sobre,
-        basePath,
-        alt: soloIsotipo ? naming.wordmark : "",
-        className: "h-7 w-auto"
-      }
-    ),
-    soloIsotipo ? null : /* @__PURE__ */ jsx("span", { className: "text-ui font-display text-text-primary font-bold tracking-[-0.02em]", children: naming.wordmark })
+    conAleta,
+    wordmark
   ] });
 }
 function Mascota({
@@ -100,4 +94,4 @@ function CaraDeMascota({
   );
 }
 
-export { CaraDeMascota, Isotipo, Logo, Mascota, cn };
+export { CaraDeMascota, Isotipo, Logo, Mascota };

package/dist/chunk-ZEOQKRQ7.js

@@ -0,0 +1,19 @@
+import { cn } from './chunk-NHS7ETKJ.js';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { jsx } from 'react/jsx-runtime';
+
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    LabelPrimitive.Root,
+    {
+      className: cn(
+        "text-label font-sans text-text-secondary select-none",
+        "peer-disabled:opacity-50 group-data-[disabled]:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { Label };

package/dist/form/index.cjs

@@ -0,0 +1,301 @@
+'use strict';
+
+var react = require('react');
+var reactHookForm = require('react-hook-form');
+var reactSlot = require('@radix-ui/react-slot');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var LabelPrimitive = require('@radix-ui/react-label');
+var jsxRuntime = require('react/jsx-runtime');
+var classVarianceAuthority = require('class-variance-authority');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+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. */
+  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.
+   *
+   * 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í.
+   */
+  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.
+   *
+   * 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.
+   */
+  tag: { family: "sans", size: 12.5, lineHeight: 1.4, weight: 500 },
+  /**
+   * La escala de categoría y métrica: 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.
+   *
+   * 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`.
+   */
+  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.
+   *
+   * 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.
+   *
+   * 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.
+   */
+  meta: { family: "mono", size: 13, lineHeight: 1.6, weight: 400 },
+  eyebrow: { family: "mono", size: 12, tracking: "0.12em", transform: "uppercase" }
+};
+var radius = {
+  chip: 6,
+  control: 10,
+  card: 14,
+  panel: 16,
+  pill: 999
+};
+var control = {
+  sm: 14,
+  md: 22,
+  lg: 30,
+  /** Botón de icono: cuadrado, sin texto. */
+  icon: 42
+};
+var spacing = {
+  stepXs: 8,
+  stepSm: 12,
+  stepMd: 16,
+  stepLg: 26,
+  stepXl: 40,
+  section: 96
+};
+
+// 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 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 }]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx.clsx(inputs));
+}
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    LabelPrimitive__namespace.Root,
+    {
+      className: cn(
+        "text-label font-sans text-text-secondary select-none",
+        "peer-disabled:opacity-50 group-data-[disabled]:opacity-50",
+        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("", {
+  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.
+      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.
+      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.
+      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"`.
+      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.
+      eyebrow: "text-eyebrow font-mono uppercase"
+    },
+    tone: {
+      primary: "text-text-primary",
+      secondary: "text-text-secondary",
+      muted: "text-text-muted",
+      accent: "text-accent",
+      warm: "text-warm",
+      success: "text-success",
+      warning: "text-warning",
+      error: "text-error"
+    }
+  },
+  defaultVariants: { variant: "body", tone: "primary" }
+});
+function Text({
+  className,
+  variant,
+  tone,
+  as,
+  asChild = false,
+  measure,
+  children,
+  ...props
+}) {
+  const escala = variant ?? "body";
+  const limitar = measure ?? escala === "body";
+  const clases = cn(texto({ variant, tone }), limitar && "max-w-measure", className);
+  if (asChild) {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: clases, ...props, children });
+  }
+  const Etiqueta = as ?? ETIQUETA[escala];
+  return /* @__PURE__ */ jsxRuntime.jsx(Etiqueta, { className: clases, ...props, children });
+}
+var Form = reactHookForm.FormProvider;
+var Campo = 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 }) });
+}
+function useFormField() {
+  const campo = react.useContext(Campo);
+  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>.");
+  return {
+    name: campo.name,
+    id: item.id,
+    idDescripcion: `${item.id}-descripcion`,
+    idMensaje: `${item.id}-mensaje`,
+    ...getFieldState(campo.name, estado)
+  };
+}
+function FormItem({ className, ...props }) {
+  const id = react.useId();
+  return /* @__PURE__ */ jsxRuntime.jsx(Item.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("gap-step-xs flex flex-col", className), ...props }) });
+}
+function FormLabel({ className, ...props }) {
+  const { id } = useFormField();
+  return /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: id, className, ...props });
+}
+function FormControl({ ...props }) {
+  const { error, id, idDescripcion, idMensaje } = useFormField();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactSlot.Slot,
+    {
+      id,
+      "aria-describedby": error ? `${idDescripcion} ${idMensaje}` : idDescripcion,
+      "aria-invalid": error ? true : void 0,
+      ...props
+    }
+  );
+}
+function FormDescription({ className, ...props }) {
+  const { idDescripcion } = useFormField();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Text,
+    {
+      as: "p",
+      variant: "label",
+      tone: "muted",
+      id: idDescripcion,
+      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;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Text,
+    {
+      as: "p",
+      variant: "label",
+      tone: "error",
+      id: idMensaje,
+      className,
+      ...props,
+      children: cuerpo
+    }
+  );
+}
+
+exports.Form = Form;
+exports.FormControl = FormControl;
+exports.FormDescription = FormDescription;
+exports.FormField = FormField;
+exports.FormItem = FormItem;
+exports.FormLabel = FormLabel;
+exports.FormMessage = FormMessage;
+exports.useFormField = useFormField;

package/dist/form/index.d.cts

@@ -0,0 +1,86 @@
+import * as react from 'react';
+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 '@radix-ui/react-label';
+
+/**
+ * La capa que ata los controles a un formulario con validación y mensajes.
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * 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.
+ */
+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.
+ */
+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.
+ *
+ * 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.
+ */
+declare function useFormField(): {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: react_hook_form.FieldError;
+    name: string;
+    id: string;
+    idDescripcion: string;
+    idMensaje: string;
+};
+/** La caja del campo: etiqueta, control, ayuda y mensaje, en columna. */
+declare function FormItem({ className, ...props }: ComponentPropsWithoutRef<'div'>): react.JSX.Element;
+/**
+ * La etiqueta NO se tiñe de rojo cuando el campo falla.
+ *
+ * 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.
+ */
+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`.
+ *
+ * Es un `Slot`, así que el hijo puede ser cualquiera de los controles del
+ * sistema —`Input`, `Textarea`, `SelectTrigger`— sin que esto sepa cuál.
+ */
+declare function FormControl({ ...props }: ComponentPropsWithoutRef<typeof Slot>): react.JSX.Element;
+/** La ayuda del campo. Se anuncia siempre, haya error o no. */
+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.
+ *
+ * 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—.
+ */
+declare function FormMessage({ className, children, ...props }: ComponentPropsWithoutRef<'p'>): react.JSX.Element | null;
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/form/index.d.ts

@@ -0,0 +1,86 @@
+import * as react from 'react';
+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 '@radix-ui/react-label';
+
+/**
+ * La capa que ata los controles a un formulario con validación y mensajes.
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * 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.
+ */
+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.
+ */
+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.
+ *
+ * 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.
+ */
+declare function useFormField(): {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: react_hook_form.FieldError;
+    name: string;
+    id: string;
+    idDescripcion: string;
+    idMensaje: string;
+};
+/** La caja del campo: etiqueta, control, ayuda y mensaje, en columna. */
+declare function FormItem({ className, ...props }: ComponentPropsWithoutRef<'div'>): react.JSX.Element;
+/**
+ * La etiqueta NO se tiñe de rojo cuando el campo falla.
+ *
+ * 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.
+ */
+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`.
+ *
+ * Es un `Slot`, así que el hijo puede ser cualquiera de los controles del
+ * sistema —`Input`, `Textarea`, `SelectTrigger`— sin que esto sepa cuál.
+ */
+declare function FormControl({ ...props }: ComponentPropsWithoutRef<typeof Slot>): react.JSX.Element;
+/** La ayuda del campo. Se anuncia siempre, haya error o no. */
+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.
+ *
+ * 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—.
+ */
+declare function FormMessage({ className, children, ...props }: ComponentPropsWithoutRef<'p'>): react.JSX.Element | null;
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/form/index.js

@@ -0,0 +1,84 @@
+import { Label } from '../chunk-ZEOQKRQ7.js';
+import { Text } from '../chunk-UOWIDFCB.js';
+import { cn } from '../chunk-NHS7ETKJ.js';
+import '../chunk-TSPJOM6K.js';
+import '../chunk-MLKGABMK.js';
+import { createContext, useContext, useId } from 'react';
+import { FormProvider, Controller, useFormContext, useFormState } from 'react-hook-form';
+import { Slot } from '@radix-ui/react-slot';
+import { jsx } from 'react/jsx-runtime';
+
+var Form = FormProvider;
+var Campo = createContext(null);
+var Item = createContext(null);
+function FormField(props) {
+  return /* @__PURE__ */ jsx(Campo.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+}
+function useFormField() {
+  const campo = useContext(Campo);
+  const item = useContext(Item);
+  const { getFieldState } = useFormContext();
+  const estado = 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>.");
+  return {
+    name: campo.name,
+    id: item.id,
+    idDescripcion: `${item.id}-descripcion`,
+    idMensaje: `${item.id}-mensaje`,
+    ...getFieldState(campo.name, estado)
+  };
+}
+function FormItem({ className, ...props }) {
+  const id = useId();
+  return /* @__PURE__ */ jsx(Item.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { className: cn("gap-step-xs flex flex-col", className), ...props }) });
+}
+function FormLabel({ className, ...props }) {
+  const { id } = useFormField();
+  return /* @__PURE__ */ jsx(Label, { htmlFor: id, className, ...props });
+}
+function FormControl({ ...props }) {
+  const { error, id, idDescripcion, idMensaje } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      id,
+      "aria-describedby": error ? `${idDescripcion} ${idMensaje}` : idDescripcion,
+      "aria-invalid": error ? true : void 0,
+      ...props
+    }
+  );
+}
+function FormDescription({ className, ...props }) {
+  const { idDescripcion } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      as: "p",
+      variant: "label",
+      tone: "muted",
+      id: idDescripcion,
+      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;
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      as: "p",
+      variant: "label",
+      tone: "error",
+      id: idMensaje,
+      className,
+      ...props,
+      children: cuerpo
+    }
+  );
+}
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };