{"_id":"@atomatik/dynamic-form","name":"@atomatik/dynamic-form","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@atomatik/dynamic-form","version":"0.1.0","description":"A drag-and-drop form builder for React with multi-step support, theming, and JSON export","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.js","types":"./dist/index.d.ts"},"./styles.css":"./dist/styles.css"},"scripts":{"build":"tsup","dev":"tsup --watch","lint":"eslint src/","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","react-hook-form":">=7.0.0"},"dependencies":{"@atlaskit/pragmatic-drag-and-drop":"^1.0.0","@hookform/resolvers":"^5.0.0","@radix-ui/react-avatar":"^1.1.0","@radix-ui/react-checkbox":"^1.1.0","@radix-ui/react-dialog":"^1.1.0","@radix-ui/react-label":"^2.1.0","@radix-ui/react-radio-group":"^1.3.0","@radix-ui/react-select":"^2.1.0","@radix-ui/react-separator":"^1.1.0","@radix-ui/react-slider":"^1.2.0","@radix-ui/react-slot":"^1.1.0","@radix-ui/react-switch":"^1.1.0","@radix-ui/react-tabs":"^1.1.0","@uiw/react-json-view":"^2.0.0-alpha.41","class-variance-authority":"^0.7.0","clsx":"^2.1.0","lodash.debounce":"^4.0.8","lodash.isequal":"^4.5.0","lucide-react":">=0.300.0","sonner":"^1.4.0","tailwind-merge":"^3.0.0","zod":"^3.22.0 || ^4.0.0"},"devDependencies":{"@types/lodash.debounce":"^4.0.9","@types/lodash.isequal":"^4.5.8","@types/node":"^20.0.0","@types/react":"^18.0.0 || ^19.0.0","@types/react-dom":"^18.0.0 || ^19.0.0","postcss":"^8.4.0","tailwindcss":"^3.4.0 || ^4.0.0","tsup":"^8.0.0","typescript":"^5.0.0"},"keywords":["react","form-builder","drag-and-drop","form","dynamic-form","multi-step","zod","react-hook-form"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/atomatik/dynamic-form.git"},"publishConfig":{"access":"public"},"_id":"@atomatik/dynamic-form@0.1.0","bugs":{"url":"https://github.com/atomatik/dynamic-form/issues"},"homepage":"https://github.com/atomatik/dynamic-form#readme","_nodeVersion":"25.2.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-/LiEN5v+7LUNn6JInEnpt+Sv8fATlZji3leEsl8NbCkHcEUCnL3WL+vXkmOduWl+djYgFzEjZBUKE2fQZQGj9A==","shasum":"a1f12abaf17890cd58d36f9d78a154163b4b457d","tarball":"https://registry.npmjs.org/@atomatik/dynamic-form/-/dynamic-form-0.1.0.tgz","fileCount":10,"unpackedSize":992170,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC41rCumptnwLxsQdX/O6e/HjUYx6zzoS0Kt2F2Jg2ZtgIgLvqhkxiOBK3FC5SLahB4r1YyN7S6BwUQb4hxgKcCGzk="}]},"_npmUser":{"name":"wizely99","email":"Wizely99@gmail.com"},"directories":{},"maintainers":[{"name":"wizely99","email":"Wizely99@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dynamic-form_0.1.0_1771076650757_0.12023434624712004"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-14T13:44:10.659Z","0.1.0":"2026-02-14T13:44:11.026Z","modified":"2026-02-14T13:44:11.256Z"},"maintainers":[{"name":"wizely99","email":"Wizely99@gmail.com"}],"description":"A drag-and-drop form builder for React with multi-step support, theming, and JSON export","homepage":"https://github.com/atomatik/dynamic-form#readme","keywords":["react","form-builder","drag-and-drop","form","dynamic-form","multi-step","zod","react-hook-form"],"repository":{"type":"git","url":"git+https://github.com/atomatik/dynamic-form.git"},"bugs":{"url":"https://github.com/atomatik/dynamic-form/issues"},"license":"MIT","readme":"# @atomatik/dynamic-form\n\nA drag-and-drop form builder for React with multi-step support, theming, and JSON export.\n\n## Installation\n\n```bash\nnpm install @atomatik/dynamic-form react-hook-form\n# or\npnpm add @atomatik/dynamic-form react-hook-form\n```\n\n## Usage\n\n### Basic Usage\n\n```tsx\n\"use client\"\n\nimport { useForm } from \"react-hook-form\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { FormBuilder, DynamicFormSchema, type DynamicForm } from \"@atomatik/dynamic-form\"\nimport \"@atomatik/dynamic-form/styles.css\"\n\nexport default function MyFormBuilder() {\n  const form = useForm<DynamicForm>({\n    resolver: zodResolver(DynamicFormSchema),\n    defaultValues: {\n      title: \"My Form\",\n      description: \"Build your form by dragging fields from the palette\",\n      submitButtonText: \"Submit\",\n      multiStep: false,\n      sections: [\n        {\n          id: \"section-1\",\n          title: \"Basic Information\",\n          description: \"\",\n          fields: [],\n        },\n      ],\n    },\n  })\n\n  return <FormBuilder form={form} />\n}\n```\n\n### With Custom Actions\n\n```tsx\nimport { FormBuilder, type FormBuilderActions } from \"@atomatik/dynamic-form\"\n\nconst actions: FormBuilderActions = {\n  onSave: async (config) => {\n    // Save to your backend\n    const response = await fetch(\"/api/forms\", {\n      method: \"POST\",\n      body: JSON.stringify(config),\n    })\n    return { success: response.ok, message: \"Form saved!\" }\n  },\n\n  onSubmit: async (formData) => {\n    // Handle form preview submission\n    const data = Object.fromEntries(formData)\n    return { success: true, message: \"Form submitted!\", data }\n  },\n\n  processOcr: async (file, endpoint) => {\n    // Call your OCR service\n    const formData = new FormData()\n    formData.append(\"file\", file)\n    const response = await fetch(endpoint || \"/api/ocr\", {\n      method: \"POST\",\n      body: formData,\n    })\n    const result = await response.json()\n    return result\n  },\n\n  verifyPhoneNumber: async (name, phone, endpoint) => {\n    // Call your phone verification service\n    const response = await fetch(endpoint || \"/api/verify-phone\", {\n      method: \"POST\",\n      body: JSON.stringify({ name, phone }),\n    })\n    const result = await response.json()\n    return result\n  },\n}\n\nexport default function MyFormBuilder() {\n  const form = useForm<DynamicForm>({ /* ... */ })\n\n  return <FormBuilder form={form} actions={actions} />\n}\n```\n\n### Rendering a Form (Without Builder)\n\nUse `FormPreview` to render a form configuration:\n\n```tsx\nimport { FormPreview, FormBuilderProvider, type DynamicForm } from \"@atomatik/dynamic-form\"\n\ninterface Props {\n  formConfig: DynamicForm\n}\n\nexport function MyForm({ formConfig }: Props) {\n  const [state, setState] = useState(null)\n  const [pending, setPending] = useState(false)\n\n  const handleSubmit = async (formData: FormData) => {\n    setPending(true)\n    // Handle submission\n    setPending(false)\n  }\n\n  return (\n    <FormBuilderProvider actions={{ /* your actions */ }}>\n      <FormPreview\n        formConfig={formConfig}\n        formAction={handleSubmit}\n        isPending={pending}\n        state={state}\n      />\n    </FormBuilderProvider>\n  )\n}\n```\n\n## Tailwind CSS Setup\n\nAdd the preset to your `tailwind.config.js`:\n\n```js\nconst dynamicFormPreset = require(\"@atomatik/dynamic-form/tailwind.preset\")\n\nmodule.exports = {\n  presets: [dynamicFormPreset],\n  content: [\n    // ... your content paths\n    \"./node_modules/@atomatik/dynamic-form/dist/**/*.{js,mjs}\",\n  ],\n}\n```\n\nOr import the CSS variables:\n\n```css\n@import \"@atomatik/dynamic-form/styles.css\";\n```\n\n## Features\n\n- Drag-and-drop form building\n- 16 field types (text, email, select, checkbox, signature, OCR, phone verification, etc.)\n- Multi-step form support\n- Live JSON editor with validation\n- Theme customization (colors, spacing, border radius, variants)\n- Preview mode\n- TypeScript support with Zod schemas\n- Works with React Hook Form\n\n## Field Types\n\n| Type | Description |\n|------|-------------|\n| `text` | Single line text input |\n| `email` | Email input with validation |\n| `password` | Password input |\n| `textarea` | Multi-line text |\n| `number` | Numeric input |\n| `date` | Date picker |\n| `select` | Dropdown select |\n| `switch` | Toggle switch |\n| `checkbox` | Checkbox |\n| `radio` | Radio button group |\n| `autocomplete` | Searchable select |\n| `file` | File upload |\n| `slider` | Range slider |\n| `signature` | Signature pad |\n| `ocr` | OCR scanner widget |\n| `phone_verification` | Phone verification widget |\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-85844ace78700eece4ff139b5801b20a"}