@mehdashti/forms 0.1.0

package/README.md

@@ -0,0 +1,432 @@
+# @mehdashti/forms
+
+> Comprehensive form validation and management for Smart Platform
+
+Built on React Hook Form + Zod with smart defaults and seamless integration with @mehdashti/ui components.
+
+## Features
+
+- ✅ **React Hook Form + Zod** - Type-safe validation with automatic error handling
+- ✅ **Real-time Validation** - Validate on change by default
+- ✅ **Smart Defaults** - Sensible defaults based on APISmith patterns
+- ✅ **Form Field Components** - Pre-built field components with error display
+- ✅ **Field Arrays** - Dynamic form fields support
+- ✅ **TypeScript First** - Full type safety with excellent IntelliSense
+- ✅ **@mehdashti/ui Integration** - Works seamlessly with platform UI components
+- ✅ **Lightweight** - Minimal bundle size with tree-shaking support
+
+## Installation
+
+```bash
+pnpm add @mehdashti/forms react-hook-form zod @hookform/resolvers
+```
+
+**Peer Dependencies:**
+```bash
+pnpm add react react-dom @mehdashti/ui @mehdashti/contracts
+```
+
+## Quick Start
+
+### Basic Form
+
+```typescript
+import { useSmartForm, FormField, z } from '@mehdashti/forms'
+
+const loginSchema = z.object({
+  email: z.string().email('Invalid email address'),
+  password: z.string().min(8, 'Password must be at least 8 characters'),
+})
+
+function LoginForm() {
+  const form = useSmartForm({
+    schema: loginSchema,
+    onSubmit: async (data) => {
+      await loginUser(data)
+    },
+  })
+
+  return (
+    <form onSubmit={form.handleSubmit}>
+      <FormField
+        name="email"
+        label="Email"
+        type="email"
+        required
+        control={form.control}
+        placeholder="Enter your email"
+      />
+
+      <FormField
+        name="password"
+        label="Password"
+        type="password"
+        required
+        control={form.control}
+      />
+
+      <button type="submit" disabled={form.isSubmitting}>
+        {form.isSubmitting ? 'Loading...' : 'Login'}
+      </button>
+    </form>
+  )
+}
+```
+
+### Form with Select
+
+```typescript
+import { useSmartForm, FormField, FormSelect, z } from '@mehdashti/forms'
+
+const connectionSchema = z.object({
+  name: z.string().min(1, 'Name is required'),
+  type: z.enum(['oracle', 'mssql', 'postgresql']),
+  host: z.string().min(1, 'Host is required'),
+  port: z.number().min(1).max(65535),
+})
+
+function ConnectionForm() {
+  const form = useSmartForm({
+    schema: connectionSchema,
+    defaultValues: {
+      type: 'oracle',
+      port: 1521,
+    },
+    onSubmit: async (data) => {
+      await createConnection(data)
+    },
+  })
+
+  return (
+    <form onSubmit={form.handleSubmit}>
+      <FormField
+        name="name"
+        label="Connection Name"
+        required
+        control={form.control}
+      />
+
+      <FormSelect
+        name="type"
+        label="Database Type"
+        required
+        control={form.control}
+        options={[
+          { value: 'oracle', label: 'Oracle' },
+          { value: 'mssql', label: 'MS SQL Server' },
+          { value: 'postgresql', label: 'PostgreSQL' },
+        ]}
+      />
+
+      <FormField
+        name="host"
+        label="Host"
+        required
+        control={form.control}
+        placeholder="192.168.1.100"
+      />
+
+      <FormField
+        name="port"
+        label="Port"
+        type="number"
+        required
+        control={form.control}
+      />
+
+      <button type="submit">Save Connection</button>
+    </form>
+  )
+}
+```
+
+### Dynamic Field Arrays
+
+```typescript
+import { useSmartForm, useSmartFieldArray, FormField, z } from '@mehdashti/forms'
+
+const orderSchema = z.object({
+  customerName: z.string().min(1),
+  items: z.array(
+    z.object({
+      name: z.string().min(1, 'Item name is required'),
+      quantity: z.number().min(1, 'Quantity must be at least 1'),
+    })
+  ),
+})
+
+function OrderForm() {
+  const form = useSmartForm({
+    schema: orderSchema,
+    defaultValues: {
+      items: [{ name: '', quantity: 1 }],
+    },
+    onSubmit: async (data) => {
+      await createOrder(data)
+    },
+  })
+
+  const { fields, append, remove } = useSmartFieldArray({
+    name: 'items',
+    control: form.control,
+    defaultValue: { name: '', quantity: 1 },
+  })
+
+  return (
+    <form onSubmit={form.handleSubmit}>
+      <FormField
+        name="customerName"
+        label="Customer Name"
+        required
+        control={form.control}
+      />
+
+      <div>
+        <h3>Order Items</h3>
+        {fields.map((field, index) => (
+          <div key={field.id} className="flex gap-2">
+            <FormField
+              name={`items.${index}.name`}
+              label="Item Name"
+              required
+              control={form.control}
+            />
+
+            <FormField
+              name={`items.${index}.quantity`}
+              label="Quantity"
+              type="number"
+              required
+              control={form.control}
+            />
+
+            <button type="button" onClick={() => remove(index)}>
+              Remove
+            </button>
+          </div>
+        ))}
+
+        <button type="button" onClick={() => append()}>
+          Add Item
+        </button>
+      </div>
+
+      <button type="submit">Create Order</button>
+    </form>
+  )
+}
+```
+
+### Custom Validation
+
+```typescript
+import { useSmartForm, FormField, z } from '@mehdashti/forms'
+
+const registrationSchema = z
+  .object({
+    email: z.string().email(),
+    password: z.string().min(8),
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwords don't match",
+    path: ['confirmPassword'],
+  })
+
+function RegistrationForm() {
+  const form = useSmartForm({
+    schema: registrationSchema,
+    onSubmit: async (data) => {
+      await registerUser(data)
+    },
+    onError: (errors) => {
+      console.error('Validation errors:', errors)
+    },
+  })
+
+  return (
+    <form onSubmit={form.handleSubmit}>
+      <FormField
+        name="email"
+        label="Email"
+        type="email"
+        required
+        control={form.control}
+      />
+
+      <FormField
+        name="password"
+        label="Password"
+        type="password"
+        required
+        control={form.control}
+        helpText="Must be at least 8 characters"
+      />
+
+      <FormField
+        name="confirmPassword"
+        label="Confirm Password"
+        type="password"
+        required
+        control={form.control}
+      />
+
+      <button type="submit">Register</button>
+    </form>
+  )
+}
+```
+
+## API Reference
+
+### `useSmartForm(options)`
+
+Main hook for form management.
+
+**Options:**
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `schema` | `ZodSchema` | required | Zod validation schema |
+| `onSubmit` | `function` | required | Submit handler |
+| `onError` | `function` | optional | Error handler |
+| `defaultValues` | `object` | optional | Initial form values |
+| `realtimeValidation` | `boolean` | `true` | Enable validation on change |
+
+**Returns:**
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `handleSubmit` | `function` | Form submit handler |
+| `isSubmitting` | `boolean` | Whether form is submitting |
+| `hasErrors` | `boolean` | Whether form has validation errors |
+| `getError` | `function` | Get error message for a field |
+| `control` | `Control` | React Hook Form control |
+| `watch` | `function` | Watch field values |
+| `setValue` | `function` | Set field value |
+| `reset` | `function` | Reset form |
+| `...` | | All React Hook Form methods |
+
+### `<FormField>`
+
+Smart form field component with automatic error handling.
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `string` | required | Field name |
+| `label` | `string` | required | Field label |
+| `type` | `string` | `'text'` | Input type |
+| `required` | `boolean` | `false` | Show required indicator |
+| `placeholder` | `string` | optional | Placeholder text |
+| `helpText` | `string` | optional | Help text below field |
+| `disabled` | `boolean` | `false` | Disable field |
+| `control` | `Control` | required | Form control |
+| `render` | `function` | optional | Custom render function |
+
+### `<FormSelect>`
+
+Select field component.
+
+**Props:**
+
+Same as `FormField` plus:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `options` | `SelectOption[]` | Select options |
+
+### `<FormCheckbox>`
+
+Checkbox field component.
+
+**Props:**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `name` | `string` | Field name |
+| `label` | `string` | Checkbox label |
+| `description` | `string` | Description text |
+| `required` | `boolean` | Show required indicator |
+| `control` | `Control` | Form control |
+
+### `useSmartFieldArray(options)`
+
+Hook for managing dynamic field arrays.
+
+**Options:**
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `name` | `string` | Field array name |
+| `control` | `Control` | Form control |
+| `defaultValue` | `any` | Default value for new items |
+
+**Returns:**
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `fields` | `array` | Current field array |
+| `append` | `function` | Add new field |
+| `remove` | `function` | Remove field by index |
+| `insert` | `function` | Insert field at index |
+| `move` | `function` | Move field |
+| `swap` | `function` | Swap two fields |
+
+## Integration with @mehdashti/ui
+
+The form components are designed to work seamlessly with @mehdashti/ui. You can also use @mehdashti/ui components directly:
+
+```typescript
+import { useSmartForm, z } from '@mehdashti/forms'
+import { Button, Input, Label } from '@mehdashti/ui'
+import { Controller } from 'react-hook-form'
+
+function CustomForm() {
+  const form = useSmartForm({
+    schema: z.object({
+      name: z.string().min(1),
+    }),
+    onSubmit: async (data) => {
+      console.log(data)
+    },
+  })
+
+  return (
+    <form onSubmit={form.handleSubmit}>
+      <Controller
+        name="name"
+        control={form.control}
+        render={({ field, fieldState: { error } }) => (
+          <div>
+            <Label>Name</Label>
+            <Input {...field} />
+            {error && <p className="text-destructive">{error.message}</p>}
+          </div>
+        )}
+      />
+
+      <Button type="submit">Submit</Button>
+    </form>
+  )
+}
+```
+
+## Best Practices
+
+1. **Export schemas** for reuse and testing
+2. **Use TypeScript** for type safety
+3. **Keep validation logic in schemas** not in components
+4. **Use `watch`** sparingly for performance
+5. **Debounce expensive validations** using Zod's `refine` with async
+6. **Use `reset`** after successful submission
+7. **Handle errors gracefully** with `onError` callback
+
+## Examples
+
+See the [examples directory](../../examples/forms) for complete working examples.
+
+## License
+
+MIT

package/dist/index.js

@@ -0,0 +1,212 @@
+import { useForm, Controller, useFieldArray } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { jsx, jsxs } from 'react/jsx-runtime';
+export { z } from 'zod';
+
+// src/use-smart-form.ts
+function useSmartForm(options) {
+  const { schema, onSubmit, onError, realtimeValidation = true, ...formOptions } = options;
+  const form = useForm({
+    resolver: zodResolver(schema),
+    mode: realtimeValidation ? "onChange" : formOptions.mode || "onSubmit",
+    ...formOptions
+  });
+  const {
+    handleSubmit: rhfHandleSubmit,
+    formState: { isSubmitting, errors }
+  } = form;
+  const hasErrors = Object.keys(errors).length > 0;
+  const getError = (name) => {
+    const error = errors[name];
+    return error?.message;
+  };
+  const handleSubmit = rhfHandleSubmit(
+    async (data) => {
+      try {
+        await onSubmit(data);
+      } catch (error) {
+        if (onError) {
+          onError(error);
+        } else {
+          console.error("Form submission error:", error);
+        }
+      }
+    },
+    (errors2) => {
+      if (onError) {
+        onError(errors2);
+      }
+    }
+  );
+  return {
+    ...form,
+    handleSubmit,
+    isSubmitting,
+    hasErrors,
+    getError
+  };
+}
+function FormField({
+  name,
+  label,
+  type = "text",
+  placeholder,
+  required = false,
+  helpText,
+  disabled = false,
+  className,
+  control,
+  render
+}) {
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsxs("div", { className: `space-y-2 ${className || ""}`, children: [
+        /* @__PURE__ */ jsxs("label", { htmlFor: String(name), className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+        ] }),
+        render ? render(field) : /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: String(name),
+            type,
+            placeholder,
+            disabled,
+            className: `flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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 ${error ? "border-destructive" : ""}`,
+            "aria-invalid": !!error,
+            ...field,
+            value: field.value || ""
+          }
+        ),
+        error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error.message }),
+        helpText && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: helpText })
+      ] })
+    }
+  );
+}
+function FormSelect({
+  name,
+  label,
+  options,
+  placeholder,
+  required = false,
+  helpText,
+  disabled = false,
+  className,
+  control
+}) {
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsxs("div", { className: `space-y-2 ${className || ""}`, children: [
+        /* @__PURE__ */ jsxs("label", { htmlFor: String(name), className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            id: String(name),
+            disabled,
+            className: `flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${error ? "border-destructive" : ""}`,
+            "aria-invalid": !!error,
+            ...field,
+            value: field.value || "",
+            children: [
+              placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
+              options.map((option) => /* @__PURE__ */ jsx(
+                "option",
+                {
+                  value: option.value,
+                  disabled: option.disabled,
+                  children: option.label
+                },
+                String(option.value)
+              ))
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error.message }),
+        helpText && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: helpText })
+      ] })
+    }
+  );
+}
+function FormCheckbox({
+  name,
+  label,
+  description,
+  required = false,
+  helpText,
+  disabled = false,
+  className,
+  control
+}) {
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsxs("div", { className: `space-y-2 ${className || ""}`, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start space-x-3", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: String(name),
+              type: "checkbox",
+              disabled,
+              className: `h-4 w-4 rounded border-input ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${error ? "border-destructive" : ""}`,
+              "aria-invalid": !!error,
+              checked: field.value || false,
+              onChange: (e) => field.onChange(e.target.checked),
+              onBlur: field.onBlur
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1 leading-none", children: [
+            /* @__PURE__ */ jsxs(
+              "label",
+              {
+                htmlFor: String(name),
+                className: "text-sm font-medium cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+                children: [
+                  label,
+                  required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+                ]
+              }
+            ),
+            description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+          ] })
+        ] }),
+        error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error.message }),
+        helpText && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: helpText })
+      ] })
+    }
+  );
+}
+function useSmartFieldArray({
+  name,
+  control,
+  defaultValue
+}) {
+  const fieldArray = useFieldArray({
+    name,
+    control
+  });
+  const { append: rhfAppend, ...rest } = fieldArray;
+  const append = (value) => {
+    rhfAppend(value || defaultValue);
+  };
+  return {
+    ...rest,
+    append
+  };
+}
+
+export { FormCheckbox, FormField, FormSelect, useSmartFieldArray, useSmartForm };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-smart-form.ts","../src/form-field.tsx","../src/form-select.tsx","../src/form-checkbox.tsx","../src/use-field-array.ts"],"names":["errors","jsx","Controller","jsxs","rhfUseFieldArray"],"mappings":"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","file":"index.js","sourcesContent":["import { useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport type { FieldValues, Path, UseFormReturn } from 'react-hook-form'\nimport type { z } from 'zod'\n\nexport interface SmartFormOptions<TFieldValues extends FieldValues = FieldValues> {\n  schema: z.ZodSchema<TFieldValues>\n  onSubmit: (data: TFieldValues) => void | Promise<void>\n  onError?: (errors: Record<string, unknown>) => void\n  realtimeValidation?: boolean\n  defaultValues?: Partial<TFieldValues>\n  mode?: 'onSubmit' | 'onBlur' | 'onChange' | 'onTouched' | 'all'\n}\n\n/**\n * Enhanced React Hook Form with Zod validation and smart defaults\n */\nexport function useSmartForm<TFieldValues extends FieldValues = FieldValues>(\n  options: SmartFormOptions<TFieldValues>\n) {\n  const { schema, onSubmit, onError, realtimeValidation = true, ...formOptions } = options\n\n  const form = useForm<TFieldValues>({\n    resolver: zodResolver(schema),\n    mode: realtimeValidation ? 'onChange' : (formOptions.mode || 'onSubmit'),\n    ...formOptions,\n  })\n\n  const {\n    handleSubmit: rhfHandleSubmit,\n    formState: { isSubmitting, errors },\n  } = form\n\n  const hasErrors = Object.keys(errors).length > 0\n\n  const getError = (name: Path<TFieldValues>): string | undefined => {\n    const error = errors[name]\n    return error?.message as string | undefined\n  }\n\n  const handleSubmit = rhfHandleSubmit(\n    async (data) => {\n      try {\n        await onSubmit(data)\n      } catch (error) {\n        if (onError) {\n          onError(error as Record<string, unknown>)\n        } else {\n          console.error('Form submission error:', error)\n        }\n      }\n    },\n    (errors) => {\n      if (onError) {\n        onError(errors)\n      }\n    }\n  )\n\n  return {\n    ...form,\n    handleSubmit,\n    isSubmitting,\n    hasErrors,\n    getError,\n  }\n}\n\nexport type SmartFormReturn<TFieldValues extends FieldValues = FieldValues> = ReturnType<typeof useSmartForm<TFieldValues>>\n","import { Controller } from 'react-hook-form'\nimport type { FieldValues } from 'react-hook-form'\nimport type { FormFieldProps } from './form-types'\n\n/**\n * Smart Form Field component with automatic error handling\n *\n * @example\n * ```tsx\n * <FormField\n *   name=\"email\"\n *   label=\"Email\"\n *   type=\"email\"\n *   required\n *   control={form.control}\n *   placeholder=\"Enter your email\"\n * />\n * ```\n */\nexport function FormField<TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label,\n  type = 'text',\n  placeholder,\n  required = false,\n  helpText,\n  disabled = false,\n  className,\n  control,\n  render,\n}: FormFieldProps<TFieldValues>) {\n  return (\n    <Controller\n      name={name}\n      control={control}\n      render={({ field, fieldState: { error } }) => (\n        <div className={`space-y-2 ${className || ''}`}>\n          <label htmlFor={String(name)} className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n            {label}\n            {required && <span className=\"text-destructive ml-1\">*</span>}\n          </label>\n\n          {render ? (\n            render(field)\n          ) : (\n            <input\n              id={String(name)}\n              type={type}\n              placeholder={placeholder}\n              disabled={disabled}\n              className={`flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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 ${\n                error ? 'border-destructive' : ''\n              }`}\n              aria-invalid={!!error}\n              {...field}\n              value={field.value || ''}\n            />\n          )}\n\n          {error && (\n            <p className=\"text-sm text-destructive\">{error.message}</p>\n          )}\n\n          {helpText && !error && (\n            <p className=\"text-xs text-muted-foreground\">{helpText}</p>\n          )}\n        </div>\n      )}\n    />\n  )\n}\n","import { Controller } from 'react-hook-form'\nimport type { FieldValues } from 'react-hook-form'\nimport type { FormSelectProps } from './form-types'\n\n/**\n * Smart Form Select component\n *\n * @example\n * ```tsx\n * <FormSelect\n *   name=\"country\"\n *   label=\"Country\"\n *   required\n *   control={form.control}\n *   options={[\n *     { value: 'us', label: 'United States' },\n *     { value: 'uk', label: 'United Kingdom' },\n *   ]}\n * />\n * ```\n */\nexport function FormSelect<TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label,\n  options,\n  placeholder,\n  required = false,\n  helpText,\n  disabled = false,\n  className,\n  control,\n}: FormSelectProps<TFieldValues>) {\n  return (\n    <Controller\n      name={name}\n      control={control}\n      render={({ field, fieldState: { error } }) => (\n        <div className={`space-y-2 ${className || ''}`}>\n          <label htmlFor={String(name)} className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n            {label}\n            {required && <span className=\"text-destructive ml-1\">*</span>}\n          </label>\n\n          <select\n            id={String(name)}\n            disabled={disabled}\n            className={`flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${\n              error ? 'border-destructive' : ''\n            }`}\n            aria-invalid={!!error}\n            {...field}\n            value={field.value || ''}\n          >\n            {placeholder && (\n              <option value=\"\" disabled>\n                {placeholder}\n              </option>\n            )}\n            {options.map((option) => (\n              <option\n                key={String(option.value)}\n                value={option.value}\n                disabled={option.disabled}\n              >\n                {option.label}\n              </option>\n            ))}\n          </select>\n\n          {error && (\n            <p className=\"text-sm text-destructive\">{error.message}</p>\n          )}\n\n          {helpText && !error && (\n            <p className=\"text-xs text-muted-foreground\">{helpText}</p>\n          )}\n        </div>\n      )}\n    />\n  )\n}\n","import { Controller } from 'react-hook-form'\nimport type { FieldValues } from 'react-hook-form'\nimport type { FormCheckboxProps } from './form-types'\n\n/**\n * Smart Form Checkbox component\n *\n * @example\n * ```tsx\n * <FormCheckbox\n *   name=\"acceptTerms\"\n *   label=\"I accept the terms and conditions\"\n *   required\n *   control={form.control}\n *   description=\"You must accept the terms to continue\"\n * />\n * ```\n */\nexport function FormCheckbox<TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label,\n  description,\n  required = false,\n  helpText,\n  disabled = false,\n  className,\n  control,\n}: FormCheckboxProps<TFieldValues>) {\n  return (\n    <Controller\n      name={name}\n      control={control}\n      render={({ field, fieldState: { error } }) => (\n        <div className={`space-y-2 ${className || ''}`}>\n          <div className=\"flex items-start space-x-3\">\n            <input\n              id={String(name)}\n              type=\"checkbox\"\n              disabled={disabled}\n              className={`h-4 w-4 rounded border-input ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${\n                error ? 'border-destructive' : ''\n              }`}\n              aria-invalid={!!error}\n              checked={field.value || false}\n              onChange={(e) => field.onChange(e.target.checked)}\n              onBlur={field.onBlur}\n            />\n            <div className=\"flex-1 space-y-1 leading-none\">\n              <label\n                htmlFor={String(name)}\n                className=\"text-sm font-medium cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n              >\n                {label}\n                {required && <span className=\"text-destructive ml-1\">*</span>}\n              </label>\n              {description && (\n                <p className=\"text-sm text-muted-foreground\">{description}</p>\n              )}\n            </div>\n          </div>\n\n          {error && (\n            <p className=\"text-sm text-destructive\">{error.message}</p>\n          )}\n\n          {helpText && !error && (\n            <p className=\"text-xs text-muted-foreground\">{helpText}</p>\n          )}\n        </div>\n      )}\n    />\n  )\n}\n","import { useFieldArray as rhfUseFieldArray } from 'react-hook-form'\nimport type { FieldValues, ArrayPath } from 'react-hook-form'\nimport type { UseFormReturn } from 'react-hook-form'\n\n/**\n * Field array options\n */\nexport interface FieldArrayOptions<TFieldValues extends FieldValues = FieldValues> {\n  /**\n   * Field array name\n   */\n  name: ArrayPath<TFieldValues>\n\n  /**\n   * Form control instance\n   */\n  control: UseFormReturn<TFieldValues>['control']\n\n  /**\n   * Default value for new items\n   */\n  defaultValue?: unknown\n}\n\n/**\n * Wrapper around React Hook Form's useFieldArray with smart defaults\n *\n * @example\n * ```tsx\n * const { fields, append, remove } = useSmartFieldArray({\n *   name: 'items',\n *   control: form.control,\n *   defaultValue: { name: '', quantity: 0 }\n * })\n * ```\n */\nexport function useSmartFieldArray<TFieldValues extends FieldValues = FieldValues>({\n  name,\n  control,\n  defaultValue,\n}: FieldArrayOptions<TFieldValues>) {\n  const fieldArray = rhfUseFieldArray({\n    name,\n    control,\n  })\n\n  const { append: rhfAppend, ...rest } = fieldArray\n\n  // Enhanced append with default value\n  const append = (value?: unknown) => {\n    rhfAppend((value || defaultValue) as never)\n  }\n\n  return {\n    ...rest,\n    append,\n  }\n}\n"]}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@mehdashti/forms",
+  "version": "0.1.0",
+  "description": "Form validation and management for Smart Platform",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react-hook-form": "^7.53.2",
+    "zod": "^3.24.1",
+    "@hookform/resolvers": "^3.9.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "@mehdashti/ui": "^0.1.0",
+    "@mehdashti/contracts": "^0.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "typescript": "^5.9.3",
+    "tsup": "^8.3.5"
+  },
+  "keywords": [
+    "forms",
+    "validation",
+    "react-hook-form",
+    "zod",
+    "smart-platform"
+  ],
+  "author": "mehdashti",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mehdashti/smart-platform.git",
+    "directory": "packages/forms"
+  }
+}