@invana/forms 0.0.7 → 0.0.12

package/dist/index.cjs

@@ -7,9 +7,9 @@ var reactHookForm = require('react-hook-form');
 var LabelPrimitive = require('@radix-ui/react-label');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
 var SwitchPrimitives = require('@radix-ui/react-switch');
 var SelectPrimitive = require('@radix-ui/react-select');
-var lucideReact = require('lucide-react');
 var SliderPrimitive = require('@radix-ui/react-slider');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
@@ -153,7 +153,7 @@ var Input = React2__namespace.forwardRef(
       {
         type,
         className: ui.cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         ),
         ref,
@@ -163,6 +163,58 @@ var Input = React2__namespace.forwardRef(
   }
 );
 Input.displayName = "Input";
+var PasswordInput = React2__namespace.forwardRef(
+  ({ className, visible, onVisibleChange, disabled, ...props }, ref) => {
+    const [internalVisible, setInternalVisible] = React2__namespace.useState(false);
+    const isControlled = visible !== void 0;
+    const show = isControlled ? visible : internalVisible;
+    const toggle = () => {
+      const next = !show;
+      if (!isControlled) setInternalVisible(next);
+      onVisibleChange?.(next);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          type: show ? "text" : "password",
+          className: ui.cn("pr-10", className),
+          disabled,
+          ref,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: toggle,
+          disabled,
+          tabIndex: -1,
+          "aria-label": show ? "Hide password" : "Show password",
+          "aria-pressed": show,
+          className: "absolute inset-y-0 right-0 flex items-center justify-center px-3 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          children: show ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "size-4", "aria-hidden": "true" })
+        }
+      )
+    ] });
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+var Textarea = React2__namespace.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      className: ui.cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+Textarea.displayName = "Textarea";
 var Switch = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SwitchPrimitives__namespace.Root,
   {
@@ -436,6 +488,10 @@ var IconInput = ({ value, onChange }) => {
     )
   ] });
 };
+var SIZE = {
+  sm: { input: "h-8 text-sm", select: "h-8", label: "text-xs", desc: "text-xs" },
+  md: { input: "", select: "", label: "", desc: "" }
+};
 function itemClasses(labelPosition, className) {
   return ui.cn(
     labelPosition === "side" && "grid grid-cols-3 items-center gap-2",
@@ -453,21 +509,74 @@ var InputField = ({
   value,
   onChange,
   labelPosition = "side",
+  size = "sm",
   className
 }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: "text-xs", children: label }),
+  label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition), children: [
     /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
       Input,
       {
-        className: "h-8 text-sm",
+        className: SIZE[size].input,
+        placeholder,
+        value: value ?? "",
+        onChange: (e) => onChange?.(e.target.value)
+      }
+    ) }),
+    description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description }),
+    /* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: SIZE[size].desc })
+  ] })
+] });
+var PasswordField = ({
+  label,
+  description,
+  placeholder,
+  value,
+  onChange,
+  labelPosition = "side",
+  size = "sm",
+  className
+}) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
+  label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      PasswordInput,
+      {
+        className: SIZE[size].input,
+        placeholder,
+        value: value ?? "",
+        onChange: (e) => onChange?.(e.target.value)
+      }
+    ) }),
+    description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description }),
+    /* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: SIZE[size].desc })
+  ] })
+] });
+var TextareaField = ({
+  label,
+  description,
+  placeholder,
+  value,
+  onChange,
+  rows,
+  labelPosition = "side",
+  size = "sm",
+  className
+}) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
+  label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      Textarea,
+      {
+        className: size === "sm" ? "text-sm" : void 0,
+        rows,
         placeholder,
         value: value ?? "",
         onChange: (e) => onChange?.(e.target.value)
       }
     ) }),
-    description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: "text-xs", children: description }),
-    /* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: "text-xs" })
+    description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description }),
+    /* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: SIZE[size].desc })
   ] })
 ] });
 var SelectField = ({
@@ -478,16 +587,17 @@ var SelectField = ({
   onChange,
   placeholder = "Select type",
   labelPosition = "side",
+  size = "sm",
   className
 }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: "text-xs", children: label }),
+  label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: value ?? "", onValueChange: onChange, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: SIZE[size].select, children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: options.map((o) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: o.value, children: o.label }, o.value)) })
     ] }),
-    description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: "text-xs", children: description }),
-    /* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: "text-xs" })
+    description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description }),
+    /* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: SIZE[size].desc })
   ] })
 ] });
 var BooleanField = ({
@@ -495,22 +605,23 @@ var BooleanField = ({
   description,
   value,
   onChange,
-  labelPosition = "side"
+  labelPosition = "side",
+  size = "sm"
 }) => {
   if (labelPosition === "side") {
     return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: "flex items-center justify-between rounded-md border p-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: "text-xs", children: label }),
-        description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: "text-xs", children: description })
+        label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
+        description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(Switch, { checked: !!value, onCheckedChange: onChange }) })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: "space-y-2", children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: "text-xs", children: label }),
+    label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between rounded-md border p-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(Switch, { checked: !!value, onCheckedChange: onChange }) }),
-      description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: "ml-2 text-xs", children: description })
+      description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: ui.cn("ml-2", SIZE[size].desc), children: description })
     ] })
   ] });
 };
@@ -522,9 +633,10 @@ var ColorField = ({
   presetColors,
   defaultValue,
   labelPosition = "side",
+  size = "sm",
   className
 }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: "text-xs", children: label }),
+  label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition), children: [
     /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
       ColorSwatches,
@@ -535,8 +647,8 @@ var ColorField = ({
         defaultValue
       }
     ) }),
-    description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: "text-xs", children: description }),
-    /* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: "text-xs" })
+    description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description }),
+    /* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: SIZE[size].desc })
   ] })
 ] });
 var NumberField = ({
@@ -548,9 +660,10 @@ var NumberField = ({
   max,
   step,
   labelPosition = "side",
+  size = "sm",
   className
 }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: "text-xs", children: label }),
+  label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition), children: [
     /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
       SliderNumber,
@@ -562,8 +675,8 @@ var NumberField = ({
         step
       }
     ) }),
-    description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: "text-xs", children: description }),
-    /* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: "text-xs" })
+    description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description }),
+    /* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: SIZE[size].desc })
   ] })
 ] });
 var IconField = ({
@@ -572,17 +685,20 @@ var IconField = ({
   value,
   onChange,
   labelPosition = "side",
+  size = "sm",
   className
 }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: "text-xs", children: label }),
+  label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition), children: [
     /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(IconInput, { value, onChange }) }),
-    description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: "text-xs", children: description }),
-    /* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: "text-xs" })
+    description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description }),
+    /* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: SIZE[size].desc })
   ] })
 ] });
 var Field = {
   Input: InputField,
+  Password: PasswordField,
+  Textarea: TextareaField,
   Boolean: BooleanField,
   Color: ColorField,
   Number: NumberField,
@@ -592,12 +708,7 @@ var Field = {
 function humanize(name) {
   return name.replace(/([A-Z])/g, " $1").replace(/^./, (c) => c.toUpperCase()).trim();
 }
-function chunk(arr, size) {
-  const out = [];
-  for (let i = 0; i < arr.length; i += size) out.push(arr.slice(i, i + size));
-  return out;
-}
-function renderField(field, parentName, control, labelPosition) {
+function renderField(field, parentName, control, labelPosition, size) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     FormField,
     {
@@ -614,11 +725,21 @@ function renderField(field, parentName, control, labelPosition) {
           step: field.step,
           presetColors: field.presetColors,
           defaultValue: field.defaultValue,
+          rows: field.rows,
           labelPosition,
+          size,
           value: rhf.value,
           onChange: rhf.onChange
         };
         switch (field.type) {
+          case "password":
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              PasswordField,
+              {
+                ...common,
+                placeholder: field.placeholder ?? `Enter ${field.name}`
+              }
+            );
           case "boolean":
             return /* @__PURE__ */ jsxRuntime.jsx(BooleanField, { ...common });
           case "color":
@@ -629,6 +750,14 @@ function renderField(field, parentName, control, labelPosition) {
             return /* @__PURE__ */ jsxRuntime.jsx(SelectField, { ...common });
           case "icon":
             return /* @__PURE__ */ jsxRuntime.jsx(IconField, { ...common });
+          case "textarea":
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              TextareaField,
+              {
+                ...common,
+                placeholder: field.placeholder ?? `Enter ${field.name}`
+              }
+            );
           case "text":
           default:
             return /* @__PURE__ */ jsxRuntime.jsx(
@@ -644,9 +773,38 @@ function renderField(field, parentName, control, labelPosition) {
     field.name
   );
 }
-function renderRows(fields, rowConfig, parentName, control, labelPosition) {
+function renderGrid(fields, parentName, control, labelPosition, size, columns, key) {
+  const customCols = columns !== 2;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: ui.cn(
+        "grid grid-cols-1 gap-4",
+        customCols ? "md:[grid-template-columns:repeat(var(--ff-cols),minmax(0,1fr))]" : "md:grid-cols-2"
+      ),
+      style: customCols ? { "--ff-cols": columns } : void 0,
+      children: fields.map((f) => {
+        const span = f.colSpan && f.colSpan > 1 ? f.colSpan : void 0;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: ui.cn(
+              span && "md:[grid-column:span_var(--ff-span)/span_var(--ff-span)]",
+              f.className
+            ),
+            style: span ? { "--ff-span": span } : void 0,
+            children: renderField(f, parentName, control, labelPosition, size)
+          },
+          f.name
+        );
+      })
+    },
+    key
+  );
+}
+function renderRows(fields, rowConfig, parentName, control, labelPosition, size, columns) {
   if (!rowConfig || rowConfig.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-4", children: chunk(fields, 2).map((row, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: row.map((f) => renderField(f, parentName, control, labelPosition)) }, i)) });
+    return renderGrid(fields, parentName, control, labelPosition, size, columns);
   }
   const used = new Set(rowConfig.flatMap((r) => r.fields));
   const unassigned = fields.filter((f) => !used.has(f.name));
@@ -654,16 +812,26 @@ function renderRows(fields, rowConfig, parentName, control, labelPosition) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     rowConfig.map((row) => {
       const rowFields = row.fields.map((n) => byName.get(n)).filter((f) => !!f);
-      return chunk(rowFields, 2).map((cnk, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "grid grid-cols-1 gap-4 md:grid-cols-2",
-          children: cnk.map((f) => renderField(f, parentName, control, labelPosition))
-        },
-        `${row.id}-${idx}`
-      ));
+      if (rowFields.length === 0) return null;
+      return renderGrid(
+        rowFields,
+        parentName,
+        control,
+        labelPosition,
+        size,
+        columns,
+        row.id
+      );
     }),
-    unassigned.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-4", children: chunk(unassigned, 2).map((row, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: row.map((f) => renderField(f, parentName, control, labelPosition)) }, `u-${i}`)) })
+    unassigned.length > 0 && renderGrid(
+      unassigned,
+      parentName,
+      control,
+      labelPosition,
+      size,
+      columns,
+      "_unassigned"
+    )
   ] });
 }
 var ObjectField = ({
@@ -671,7 +839,9 @@ var ObjectField = ({
   name,
   fields,
   rowConfig,
-  labelPosition = "side"
+  labelPosition = "side",
+  size = "sm",
+  columns = 2
 }) => {
   const grouped = fields.reduce((acc, f) => {
     const key = f.group ?? "_ungrouped";
@@ -682,7 +852,15 @@ var ObjectField = ({
   delete grouped["_ungrouped"];
   const groupedEntries = Object.entries(grouped);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-    ungrouped.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: renderRows(ungrouped, rowConfig, name, control, labelPosition) }),
+    ungrouped.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: renderRows(
+      ungrouped,
+      rowConfig,
+      name,
+      control,
+      labelPosition,
+      size,
+      columns
+    ) }),
     groupedEntries.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
       ui.Accordion,
       {
@@ -694,7 +872,15 @@ var ObjectField = ({
             humanize(group),
             " Settings"
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.AccordionContent, { className: "px-3 pb-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: renderRows(gFields, rowConfig, name, control, labelPosition) }) })
+          /* @__PURE__ */ jsxRuntime.jsx(ui.AccordionContent, { className: "px-3 pb-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: renderRows(
+            gFields,
+            rowConfig,
+            name,
+            control,
+            labelPosition,
+            size,
+            columns
+          ) }) })
         ] }, group))
       }
     )
@@ -703,26 +889,14 @@ var ObjectField = ({
 var FormField2 = Object.assign(FormField, {
   ObjectField,
   Input: InputField,
+  Password: PasswordField,
+  Textarea: TextareaField,
   Boolean: BooleanField,
   Color: ColorField,
   Number: NumberField,
   Select: SelectField,
   Icon: IconField
 });
-var Textarea = React2__namespace.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "textarea",
-    {
-      className: ui.cn(
-        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
-      ref,
-      ...props
-    }
-  );
-});
-Textarea.displayName = "Textarea";
 var Checkbox = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   CheckboxPrimitive__namespace.Root,
   {
@@ -1135,6 +1309,8 @@ exports.InputGroupTextarea = InputGroupTextarea;
 exports.Label = Label;
 exports.NumberField = NumberField;
 exports.ObjectField = ObjectField;
+exports.PasswordField = PasswordField;
+exports.PasswordInput = PasswordInput;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupItem = RadioGroupItem;
 exports.Select = Select;
@@ -1152,6 +1328,7 @@ exports.Slider = Slider;
 exports.SliderNumber = SliderNumber;
 exports.Switch = Switch;
 exports.Textarea = Textarea;
+exports.TextareaField = TextareaField;
 exports.useFormField = useFormField;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map