@invana/forms 0.0.6 → 0.0.11

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: "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 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: 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,
@@ -570,7 +686,7 @@ function chunk(arr, size) {
   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 +703,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 +728,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 +751,9 @@ function renderField(field, parentName, control, labelPosition) {
     field.name
   );
 }
-function renderRows(fields, rowConfig, parentName, control, labelPosition) {
+function renderRows(fields, rowConfig, parentName, control, labelPosition, size) {
   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 /* @__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, size)) }, i)) });
   }
   const used = new Set(rowConfig.flatMap((r) => r.fields));
   const unassigned = fields.filter((f) => !used.has(f.name));
@@ -631,12 +765,12 @@ function renderRows(fields, rowConfig, parentName, control, labelPosition) {
         "div",
         {
           className: "grid grid-cols-1 gap-4 md:grid-cols-2",
-          children: cnk.map((f) => renderField(f, parentName, control, labelPosition))
+          children: cnk.map((f) => renderField(f, parentName, control, labelPosition, size))
         },
         `${row.id}-${idx}`
       ));
     }),
-    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 && /* @__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, size)) }, `u-${i}`)) })
   ] });
 }
 var ObjectField = ({
@@ -644,7 +778,8 @@ var ObjectField = ({
   name,
   fields,
   rowConfig,
-  labelPosition = "side"
+  labelPosition = "side",
+  size = "sm"
 }) => {
   const grouped = fields.reduce((acc, f) => {
     const key = f.group ?? "_ungrouped";
@@ -655,7 +790,7 @@ 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) }),
     groupedEntries.length > 0 && /* @__PURE__ */ jsx(
       Accordion,
       {
@@ -667,7 +802,7 @@ 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) }) })
         ] }, group))
       }
     )
@@ -676,26 +811,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 +1197,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