@eduardoalvarez/arrecife 0.5.0 → 0.6.0

package/dist/form/index.js

@@ -1,7 +1,9 @@
-import { Label } from '../chunk-ZEOQKRQ7.js';
-import { Text } from '../chunk-UOWIDFCB.js';
-import { cn } from '../chunk-NHS7ETKJ.js';
-import '../chunk-TSPJOM6K.js';
+'use client';
+import { Label } from '../chunk-DKCN7BAL.js';
+import { Text } from '../chunk-JMOOFZ3B.js';
+import '../chunk-ODBFN44D.js';
+import { cn } from '../chunk-XKYHTOUJ.js';
+import '../chunk-O4TAH7YJ.js';
 import '../chunk-MLKGABMK.js';
 import { createContext, useContext, useId } from 'react';
 import { FormProvider, Controller, useFormContext, useFormState } from 'react-hook-form';
@@ -9,24 +11,24 @@ import { Slot } from '@radix-ui/react-slot';
 import { jsx } from 'react/jsx-runtime';
 
 var Form = FormProvider;
-var Campo = createContext(null);
+var Field = createContext(null);
 var Item = createContext(null);
 function FormField(props) {
-  return /* @__PURE__ */ jsx(Campo.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+  return /* @__PURE__ */ jsx(Field.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 }
 function useFormField() {
-  const campo = useContext(Campo);
+  const field = useContext(Field);
   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>.");
+  const state = 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 }) {
@@ -38,45 +40,45 @@ function FormLabel({ className, ...props }) {
   return /* @__PURE__ */ jsx(Label, { htmlFor: id, className, ...props });
 }
 function FormControl({ ...props }) {
-  const { error, id, idDescripcion, idMensaje } = useFormField();
+  const { error, id, descriptionId, messageId } = useFormField();
   return /* @__PURE__ */ jsx(
     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__ */ 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__ */ jsx(
     Text,
     {
       as: "p",
       variant: "label",
       tone: "error",
-      id: idMensaje,
+      id: messageId,
       className,
       ...props,
-      children: cuerpo
+      children: body
     }
   );
 }