@invana/forms 0.0.7 → 0.0.12

package/dist/index.d.ts

@@ -35,7 +35,13 @@ declare const FormDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAtt
 declare const FormMessage: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 
 type LabelPosition = 'side' | 'top';
-type FieldType = 'text' | 'number' | 'boolean' | 'color' | 'select' | 'icon';
+/**
+ * Field density. `sm` is the compact look used by dense panels (e.g. the
+ * modeller property editor) and is the default for backward compatibility.
+ * `md` renders full-size fields for primary, page-level forms.
+ */
+type FieldSize = 'sm' | 'md';
+type FieldType = 'text' | 'password' | 'textarea' | 'number' | 'boolean' | 'color' | 'select' | 'icon';
 type ColorPreset = {
     label: string;
     value: string;
@@ -58,6 +64,22 @@ type FieldConfig = {
     row?: string;
     presetColors?: ColorPreset[];
     defaultValue?: string;
+    /** Number of visible rows for `textarea` fields. */
+    rows?: number;
+    /**
+     * How many grid columns the field spans on `md+` screens. Defaults to `1`.
+     * The grid is two columns by default (see `ObjectField`'s `columns`), so
+     * `colSpan: 2` makes a full-width field (textarea, long URI, …). A span
+     * larger than the column count simply fills the row. Ignored below `md`,
+     * where every field stacks full width.
+     */
+    colSpan?: number;
+    /**
+     * Extra classes merged onto the field's grid cell. Escape hatch for
+     * per-field layout/spacing tweaks (custom width, ordering, margins, …)
+     * without adding a dedicated prop for every case.
+     */
+    className?: string;
 };
 type RowConfig = {
     id: string;
@@ -69,6 +91,14 @@ interface ObjectFieldProps {
     fields: FieldConfig[];
     rowConfig?: RowConfig[];
     labelPosition?: LabelPosition;
+    /** Field density. Defaults to `sm` (compact) for backward compatibility. */
+    size?: FieldSize;
+    /**
+     * Number of columns in the field grid on `md+` screens. Defaults to `2`.
+     * Increase it to build wider layouts that fields can span via `colSpan`.
+     * Below `md` the grid always collapses to a single column.
+     */
+    columns?: number;
 }
 
 type AnyValue = any;
@@ -87,10 +117,14 @@ interface BaseFieldProps {
     step?: number;
     presetColors?: ColorPreset[];
     defaultValue?: string;
+    rows?: number;
     className?: string;
     labelPosition?: LabelPosition;
+    size?: FieldSize;
 }
 declare const InputField: React$1.FC<BaseFieldProps>;
+declare const PasswordField: React$1.FC<BaseFieldProps>;
+declare const TextareaField: React$1.FC<BaseFieldProps>;
 declare const SelectField: React$1.FC<BaseFieldProps>;
 declare const BooleanField: React$1.FC<BaseFieldProps>;
 declare const ColorField: React$1.FC<BaseFieldProps>;
@@ -98,6 +132,8 @@ declare const NumberField: React$1.FC<BaseFieldProps>;
 declare const IconField: React$1.FC<BaseFieldProps>;
 declare const Field: {
     Input: React$1.FC<BaseFieldProps>;
+    Password: React$1.FC<BaseFieldProps>;
+    Textarea: React$1.FC<BaseFieldProps>;
     Boolean: React$1.FC<BaseFieldProps>;
     Color: React$1.FC<BaseFieldProps>;
     Number: React$1.FC<BaseFieldProps>;
@@ -108,6 +144,8 @@ declare const ObjectField: React$1.FC<ObjectFieldProps>;
 interface FormFieldExtensions {
     ObjectField: typeof ObjectField;
     Input: typeof InputField;
+    Password: typeof PasswordField;
+    Textarea: typeof TextareaField;
     Boolean: typeof BooleanField;
     Color: typeof ColorField;
     Number: typeof NumberField;
@@ -147,6 +185,18 @@ declare const IconInput: React$1.FC<IconInputProps>;
 
 declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
+type PasswordInputProps = Omit<React$1.ComponentProps<"input">, "type"> & {
+    /** Controls visibility in a controlled fashion. Omit for self-managed toggle. */
+    visible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+};
+/**
+ * Password input with a built-in show/hide toggle. Wraps {@link Input} and
+ * overlays an eye / eye-off button that flips the field between `password`
+ * and `text`. Visibility is self-managed unless `visible` is supplied.
+ */
+declare const PasswordInput: React$1.ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+
 declare const Textarea: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React$1.RefAttributes<HTMLTextAreaElement>>;
 
 declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
@@ -202,4 +252,4 @@ declare function InputGroupText({ className, ...props }: React$1.ComponentProps<
 declare function InputGroupInput({ className, ...props }: React$1.ComponentProps<"input">): react_jsx_runtime.JSX.Element;
 declare function InputGroupTextarea({ className, ...props }: React$1.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
 
-export { BooleanField, Checkbox, ColorField, type ColorPreset, ColorSwatches, Field, type FieldConfig, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, type FieldType, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, IconField, IconInput, Input, InputField, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, type LabelPosition, NumberField, ObjectField, type ObjectFieldProps, RadioGroup, RadioGroupItem, type RowConfig, Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Slider, SliderNumber, Switch, Textarea, useFormField };
+export { BooleanField, Checkbox, ColorField, type ColorPreset, ColorSwatches, Field, type FieldConfig, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, type FieldSize, FieldTitle, type FieldType, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, IconField, IconInput, Input, InputField, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, type LabelPosition, NumberField, ObjectField, type ObjectFieldProps, PasswordField, PasswordInput, type PasswordInputProps, RadioGroup, RadioGroupItem, type RowConfig, Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Slider, SliderNumber, Switch, Textarea, TextareaField, useFormField };

package/dist/index.js

@@ -6,9 +6,9 @@ import { useFormContext, Controller, FormProvider } from 'react-hook-form';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { EyeOff, Eye, ChevronDown, ChevronUp, Check, Circle } from 'lucide-react';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { ChevronDown, ChevronUp, Check, Circle } from 'lucide-react';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
@@ -126,7 +126,7 @@ var Input = React2.forwardRef(
       {
         type,
         className: 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,
@@ -136,6 +136,58 @@ var Input = React2.forwardRef(
   }
 );
 Input.displayName = "Input";
+var PasswordInput = React2.forwardRef(
+  ({ className, visible, onVisibleChange, disabled, ...props }, ref) => {
+    const [internalVisible, setInternalVisible] = React2.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__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: show ? "text" : "password",
+          className: cn("pr-10", className),
+          disabled,
+          ref,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ 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__ */ jsx(EyeOff, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { className: "size-4", "aria-hidden": "true" })
+        }
+      )
+    ] });
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+var Textarea = React2.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      className: 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.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SwitchPrimitives.Root,
   {
@@ -409,6 +461,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 cn(
     labelPosition === "side" && "grid grid-cols-3 items-center gap-2",
@@ -426,21 +482,74 @@ var InputField = ({
   value,
   onChange,
   labelPosition = "side",
+  size = "sm",
   className
 }) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsx(FormLabel, { className: "text-xs", children: label }),
+  label && /* @__PURE__ */ jsx(FormLabel, { className: SIZE[size].label, children: label }),
   /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition), children: [
     /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
       Input,
       {
-        className: "h-8 text-sm",
+        className: SIZE[size].input,
+        placeholder,
+        value: value ?? "",
+        onChange: (e) => onChange?.(e.target.value)
+      }
+    ) }),
+    description && /* @__PURE__ */ jsx(FormDescription, { className: SIZE[size].desc, children: description }),
+    /* @__PURE__ */ jsx(FormMessage, { className: SIZE[size].desc })
+  ] })
+] });
+var PasswordField = ({
+  label,
+  description,
+  placeholder,
+  value,
+  onChange,
+  labelPosition = "side",
+  size = "sm",
+  className
+}) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
+  label && /* @__PURE__ */ jsx(FormLabel, { className: SIZE[size].label, children: label }),
+  /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition), children: [
+    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+      PasswordInput,
+      {
+        className: SIZE[size].input,
+        placeholder,
+        value: value ?? "",
+        onChange: (e) => onChange?.(e.target.value)
+      }
+    ) }),
+    description && /* @__PURE__ */ jsx(FormDescription, { className: SIZE[size].desc, children: description }),
+    /* @__PURE__ */ jsx(FormMessage, { className: SIZE[size].desc })
+  ] })
+] });
+var TextareaField = ({
+  label,
+  description,
+  placeholder,
+  value,
+  onChange,
+  rows,
+  labelPosition = "side",
+  size = "sm",
+  className
+}) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
+  label && /* @__PURE__ */ jsx(FormLabel, { className: SIZE[size].label, children: label }),
+  /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition), children: [
+    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        className: size === "sm" ? "text-sm" : void 0,
+        rows,
         placeholder,
         value: value ?? "",
         onChange: (e) => onChange?.(e.target.value)
       }
     ) }),
-    description && /* @__PURE__ */ jsx(FormDescription, { className: "text-xs", children: description }),
-    /* @__PURE__ */ jsx(FormMessage, { className: "text-xs" })
+    description && /* @__PURE__ */ jsx(FormDescription, { className: SIZE[size].desc, children: description }),
+    /* @__PURE__ */ jsx(FormMessage, { className: SIZE[size].desc })
   ] })
 ] });
 var SelectField = ({
@@ -451,16 +560,17 @@ var SelectField = ({
   onChange,
   placeholder = "Select type",
   labelPosition = "side",
+  size = "sm",
   className
 }) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsx(FormLabel, { className: "text-xs", children: label }),
+  label && /* @__PURE__ */ jsx(FormLabel, { className: SIZE[size].label, children: label }),
   /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition), children: [
     /* @__PURE__ */ jsxs(Select, { value: value ?? "", onValueChange: onChange, children: [
-      /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsx(SelectValue, { placeholder }) }) }),
+      /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(SelectTrigger, { className: SIZE[size].select, children: /* @__PURE__ */ jsx(SelectValue, { placeholder }) }) }),
       /* @__PURE__ */ jsx(SelectContent, { children: options.map((o) => /* @__PURE__ */ jsx(SelectItem, { value: o.value, children: o.label }, o.value)) })
     ] }),
-    description && /* @__PURE__ */ jsx(FormDescription, { className: "text-xs", children: description }),
-    /* @__PURE__ */ jsx(FormMessage, { className: "text-xs" })
+    description && /* @__PURE__ */ jsx(FormDescription, { className: SIZE[size].desc, children: description }),
+    /* @__PURE__ */ jsx(FormMessage, { className: SIZE[size].desc })
   ] })
 ] });
 var BooleanField = ({
@@ -468,22 +578,23 @@ var BooleanField = ({
   description,
   value,
   onChange,
-  labelPosition = "side"
+  labelPosition = "side",
+  size = "sm"
 }) => {
   if (labelPosition === "side") {
     return /* @__PURE__ */ jsxs(FormItem, { className: "flex items-center justify-between rounded-md border p-2", children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        label && /* @__PURE__ */ jsx(FormLabel, { className: "text-xs", children: label }),
-        description && /* @__PURE__ */ jsx(FormDescription, { className: "text-xs", children: description })
+        label && /* @__PURE__ */ jsx(FormLabel, { className: SIZE[size].label, children: label }),
+        description && /* @__PURE__ */ jsx(FormDescription, { className: SIZE[size].desc, children: description })
       ] }),
       /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Switch, { checked: !!value, onCheckedChange: onChange }) })
     ] });
   }
   return /* @__PURE__ */ jsxs(FormItem, { className: "space-y-2", children: [
-    label && /* @__PURE__ */ jsx(FormLabel, { className: "text-xs", children: label }),
+    label && /* @__PURE__ */ jsx(FormLabel, { className: SIZE[size].label, children: label }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-md border p-2", children: [
       /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Switch, { checked: !!value, onCheckedChange: onChange }) }),
-      description && /* @__PURE__ */ jsx(FormDescription, { className: "ml-2 text-xs", children: description })
+      description && /* @__PURE__ */ jsx(FormDescription, { className: cn("ml-2", SIZE[size].desc), children: description })
     ] })
   ] });
 };
@@ -495,9 +606,10 @@ var ColorField = ({
   presetColors,
   defaultValue,
   labelPosition = "side",
+  size = "sm",
   className
 }) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsx(FormLabel, { className: "text-xs", children: label }),
+  label && /* @__PURE__ */ jsx(FormLabel, { className: SIZE[size].label, children: label }),
   /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition), children: [
     /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
       ColorSwatches,
@@ -508,8 +620,8 @@ var ColorField = ({
         defaultValue
       }
     ) }),
-    description && /* @__PURE__ */ jsx(FormDescription, { className: "text-xs", children: description }),
-    /* @__PURE__ */ jsx(FormMessage, { className: "text-xs" })
+    description && /* @__PURE__ */ jsx(FormDescription, { className: SIZE[size].desc, children: description }),
+    /* @__PURE__ */ jsx(FormMessage, { className: SIZE[size].desc })
   ] })
 ] });
 var NumberField = ({
@@ -521,9 +633,10 @@ var NumberField = ({
   max,
   step,
   labelPosition = "side",
+  size = "sm",
   className
 }) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsx(FormLabel, { className: "text-xs", children: label }),
+  label && /* @__PURE__ */ jsx(FormLabel, { className: SIZE[size].label, children: label }),
   /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition), children: [
     /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
       SliderNumber,
@@ -535,8 +648,8 @@ var NumberField = ({
         step
       }
     ) }),
-    description && /* @__PURE__ */ jsx(FormDescription, { className: "text-xs", children: description }),
-    /* @__PURE__ */ jsx(FormMessage, { className: "text-xs" })
+    description && /* @__PURE__ */ jsx(FormDescription, { className: SIZE[size].desc, children: description }),
+    /* @__PURE__ */ jsx(FormMessage, { className: SIZE[size].desc })
   ] })
 ] });
 var IconField = ({
@@ -545,17 +658,20 @@ var IconField = ({
   value,
   onChange,
   labelPosition = "side",
+  size = "sm",
   className
 }) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsx(FormLabel, { className: "text-xs", children: label }),
+  label && /* @__PURE__ */ jsx(FormLabel, { className: SIZE[size].label, children: label }),
   /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition), children: [
     /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(IconInput, { value, onChange }) }),
-    description && /* @__PURE__ */ jsx(FormDescription, { className: "text-xs", children: description }),
-    /* @__PURE__ */ jsx(FormMessage, { className: "text-xs" })
+    description && /* @__PURE__ */ jsx(FormDescription, { className: SIZE[size].desc, children: description }),
+    /* @__PURE__ */ jsx(FormMessage, { className: SIZE[size].desc })
   ] })
 ] });
 var Field = {
   Input: InputField,
+  Password: PasswordField,
+  Textarea: TextareaField,
   Boolean: BooleanField,
   Color: ColorField,
   Number: NumberField,
@@ -565,12 +681,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__ */ jsx(
     FormField,
     {
@@ -587,11 +698,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__ */ jsx(
+              PasswordField,
+              {
+                ...common,
+                placeholder: field.placeholder ?? `Enter ${field.name}`
+              }
+            );
           case "boolean":
             return /* @__PURE__ */ jsx(BooleanField, { ...common });
           case "color":
@@ -602,6 +723,14 @@ function renderField(field, parentName, control, labelPosition) {
             return /* @__PURE__ */ jsx(SelectField, { ...common });
           case "icon":
             return /* @__PURE__ */ jsx(IconField, { ...common });
+          case "textarea":
+            return /* @__PURE__ */ jsx(
+              TextareaField,
+              {
+                ...common,
+                placeholder: field.placeholder ?? `Enter ${field.name}`
+              }
+            );
           case "text":
           default:
             return /* @__PURE__ */ jsx(
@@ -617,9 +746,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__ */ jsx(
+    "div",
+    {
+      className: 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__ */ jsx(
+          "div",
+          {
+            className: 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__ */ jsx("div", { className: "grid gap-4", children: chunk(fields, 2).map((row, i) => /* @__PURE__ */ 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));
@@ -627,16 +785,26 @@ function renderRows(fields, rowConfig, parentName, control, labelPosition) {
   return /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "grid gap-4", children: chunk(unassigned, 2).map((row, i) => /* @__PURE__ */ 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 = ({
@@ -644,7 +812,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";
@@ -655,7 +825,15 @@ var ObjectField = ({
   delete grouped["_ungrouped"];
   const groupedEntries = Object.entries(grouped);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-    ungrouped.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-4", children: renderRows(ungrouped, rowConfig, name, control, labelPosition) }),
+    ungrouped.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-4", children: renderRows(
+      ungrouped,
+      rowConfig,
+      name,
+      control,
+      labelPosition,
+      size,
+      columns
+    ) }),
     groupedEntries.length > 0 && /* @__PURE__ */ jsx(
       Accordion,
       {
@@ -667,7 +845,15 @@ var ObjectField = ({
             humanize(group),
             " Settings"
           ] }),
-          /* @__PURE__ */ jsx(AccordionContent, { className: "px-3 pb-3", children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: renderRows(gFields, rowConfig, name, control, labelPosition) }) })
+          /* @__PURE__ */ jsx(AccordionContent, { className: "px-3 pb-3", children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: renderRows(
+            gFields,
+            rowConfig,
+            name,
+            control,
+            labelPosition,
+            size,
+            columns
+          ) }) })
         ] }, group))
       }
     )
@@ -676,26 +862,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.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    "textarea",
-    {
-      className: 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.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   CheckboxPrimitive.Root,
   {
@@ -1074,6 +1248,6 @@ function InputGroupTextarea({
   );
 }
 
-export { BooleanField, Checkbox, ColorField, ColorSwatches, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField2 as FormField, FormItem, FormLabel, FormMessage, IconField, IconInput, Input, InputField, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, NumberField, ObjectField, RadioGroup, RadioGroupItem, Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Slider, SliderNumber, Switch, Textarea, useFormField };
+export { BooleanField, Checkbox, ColorField, ColorSwatches, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField2 as FormField, FormItem, FormLabel, FormMessage, IconField, IconInput, Input, InputField, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, NumberField, ObjectField, PasswordField, PasswordInput, RadioGroup, RadioGroupItem, Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Slider, SliderNumber, Switch, Textarea, TextareaField, useFormField };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map