@classytic/formkit 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Classytic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,273 @@
+# @classytic/formkit
+
+A headless, type-safe form generation engine for React 18+ and React 19. Build dynamic forms from schemas with full TypeScript support and zero UI opinions.
+
+[![npm version](https://img.shields.io/npm/v/@classytic/formkit.svg)](https://www.npmjs.com/package/@classytic/formkit)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## ✨ Features
+
+- 🎯 **Headless & UI-Agnostic**: Bring your own components (Shadcn, Material UI, Ant Design, or custom)
+- 📝 **Schema-Driven**: Generate complex forms from simple JSON schemas
+- 🔒 **Type-Safe**: Built with TypeScript, full type inference and autocomplete
+- ⚡ **Performance**: Optimized rendering with React 18/19 concurrent features
+- 🎨 **Variants**: Support multiple component styles (compact, default, custom)
+- 🔀 **Conditional Fields**: Show/hide fields based on form values
+- 🧩 **Composable**: Modular architecture with pluggable components
+- 🪝 **React Hook Form**: Built on top of the industry-standard form library
+- 🌲 **Tree-Shakeable**: Only bundle what you use
+
+## 📦 Installation
+
+```bash
+npm install @classytic/formkit react-hook-form
+# or
+yarn add @classytic/formkit react-hook-form
+# or
+pnpm add @classytic/formkit react-hook-form
+```
+
+## 🚀 Quick Start
+
+### 1. Create a Component Adapter
+
+Map your UI components to form field types:
+
+```tsx
+// form-adapter.tsx
+import { FormSystemProvider } from "@classytic/formkit";
+import { Input } from "@/components/ui/input";
+import { Select } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+
+const components = {
+  text: Input,
+  email: Input,
+  select: Select,
+  checkbox: Checkbox,
+  // Add more field types as needed
+};
+
+const layouts = {
+  grid: ({ children, cols = 1 }) => (
+    <div className={`grid grid-cols-${cols} gap-4`}>{children}</div>
+  ),
+  section: ({ title, description, children }) => (
+    <div className="space-y-4">
+      {title && <h3 className="text-lg font-semibold">{title}</h3>}
+      {description && <p className="text-sm text-muted-foreground">{description}</p>}
+      {children}
+    </div>
+  ),
+};
+
+export function FormProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <FormSystemProvider components={components} layouts={layouts}>
+      {children}
+    </FormSystemProvider>
+  );
+}
+```
+
+### 2. Define Your Schema
+
+```tsx
+import type { FormSchema } from "@classytic/formkit";
+
+const userFormSchema: FormSchema = {
+  sections: [
+    {
+      title: "Personal Information",
+      cols: 2,
+      fields: [
+        {
+          name: "firstName",
+          type: "text",
+          label: "First Name",
+          required: true,
+        },
+        {
+          name: "lastName",
+          type: "text",
+          label: "Last Name",
+          required: true,
+        },
+        {
+          name: "email",
+          type: "email",
+          label: "Email",
+          fullWidth: true,
+        },
+      ],
+    },
+    {
+      title: "Account Settings",
+      fields: [
+        {
+          name: "role",
+          type: "select",
+          label: "Role",
+          options: [
+            { value: "user", label: "User" },
+            { value: "admin", label: "Admin" },
+          ],
+        },
+        {
+          name: "notifications",
+          type: "checkbox",
+          label: "Enable notifications",
+          // Conditional field - only show for admins
+          condition: (values) => values.role === "admin",
+        },
+      ],
+    },
+  ],
+};
+```
+
+### 3. Render Your Form
+
+```tsx
+import { useForm } from "react-hook-form";
+import { FormGenerator } from "@classytic/formkit";
+import { FormProvider } from "./form-adapter";
+
+function UserForm() {
+  const form = useForm();
+
+  const onSubmit = (data: any) => {
+    console.log("Form data:", data);
+  };
+
+  return (
+    <FormProvider>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <FormGenerator schema={userFormSchema} control={form.control} />
+        <button type="submit">Submit</button>
+      </form>
+    </FormProvider>
+  );
+}
+```
+
+## 📖 API Reference
+
+### `<FormSystemProvider>`
+
+The root provider that registers your components.
+
+```tsx
+<FormSystemProvider components={componentsMap} layouts={layoutsMap}>
+  {children}
+</FormSystemProvider>
+```
+
+**Props:**
+- `components`: Object mapping field types to React components
+- `layouts`: Object mapping layout types to React components
+- `children`: React children
+
+### `<FormGenerator>`
+
+Renders forms from schemas.
+
+```tsx
+<FormGenerator schema={schema} control={control} disabled={false} variant="default" />
+```
+
+**Props:**
+- `schema`: Form schema object
+- `control?`: React Hook Form control (optional if inside FormProvider)
+- `disabled?`: Global disabled state
+- `variant?`: Component variant to use
+
+### Type Exports
+
+```tsx
+import type {
+  FormSchema,
+  BaseField,
+  Section,
+  FieldComponentProps,
+  ComponentRegistry,
+} from "@classytic/formkit";
+```
+
+## 🎨 Advanced Usage
+
+### Variants
+
+Support multiple UI styles:
+
+```tsx
+const components = {
+  text: DefaultInput,
+  compact: {
+    text: CompactInput,
+    select: CompactSelect,
+  },
+};
+
+// Use compact variant
+<FormGenerator schema={schema} variant="compact" />
+```
+
+### Conditional Fields
+
+```tsx
+{
+  name: "vatNumber",
+  type: "text",
+  label: "VAT Number",
+  condition: (values) => values.country === "EU",
+}
+```
+
+### Custom Renderers
+
+```tsx
+{
+  title: "Custom Section",
+  render: ({ control, disabled }) => (
+    <div>Your custom JSX here</div>
+  ),
+}
+```
+
+### Full Width Fields
+
+```tsx
+{
+  name: "description",
+  type: "textarea",
+  label: "Description",
+  fullWidth: true, // Spans all columns
+}
+```
+
+## 🧪 Testing
+
+```bash
+npm test
+```
+
+## 📄 License
+
+MIT © [Classytic](https://github.com/classytic)
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 🔗 Links
+
+- [GitHub Repository](https://github.com/classytic/formkit)
+- [Issue Tracker](https://github.com/classytic/formkit/issues)
+- [npm Package](https://www.npmjs.com/package/@classytic/formkit)
+
+## 🌟 Related Packages
+
+- [@classytic/notifications](https://www.npmjs.com/package/@classytic/notifications) - Multi-channel notification system
+- [@classytic/mongokit](https://www.npmjs.com/package/@classytic/mongokit) - Event-driven MongoDB repositories
+

package/dist/index.cjs

@@ -0,0 +1,169 @@
+'use strict';
+
+var reactHookForm = require('react-hook-form');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+
+// src/FormGenerator.tsx
+var FormSystemContext = react.createContext(null);
+function FormSystemProvider({
+  components,
+  layouts,
+  children
+}) {
+  const value = react.useMemo(
+    () => ({
+      components: components || {},
+      layouts: layouts || {}
+    }),
+    [components, layouts]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(FormSystemContext.Provider, { value, children });
+}
+function useFormSystem() {
+  const context = react.useContext(FormSystemContext);
+  if (!context) {
+    throw new Error("useFormSystem must be used within a FormSystemProvider");
+  }
+  return context;
+}
+function useFieldComponent(type, variant) {
+  const { components } = useFormSystem();
+  if (variant && typeof components[variant] === "object" && components[variant]) {
+    const variantComponents = components[variant];
+    if (variantComponents[type]) {
+      return variantComponents[type];
+    }
+  }
+  const Component = components[type] || components["default"] || components["text"];
+  if (!Component) {
+    if (process.env.NODE_ENV === "development") {
+      console.warn(`FormKit: No component found for type "${type}" (variant: ${variant})`);
+      return () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: "red", padding: 4, border: "1px dashed red" }, children: [
+        "Missing: ",
+        type
+      ] });
+    }
+    return () => null;
+  }
+  return Component;
+}
+function useLayoutComponent(type, variant) {
+  const { layouts } = useFormSystem();
+  if (variant && typeof layouts[variant] === "object" && layouts[variant]) {
+    const variantLayouts = layouts[variant];
+    if (variantLayouts[type]) {
+      return variantLayouts[type];
+    }
+  }
+  return layouts[type] || layouts["default"] || DefaultLayout;
+}
+var DefaultLayout = ({ children, className }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function FormGenerator({
+  schema,
+  control,
+  disabled = false,
+  variant
+}) {
+  const formContext = reactHookForm.useFormContext();
+  const activeControl = control || formContext?.control;
+  if (!schema?.sections) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("form-generator-root", variant && `form-variant-${variant}`), children: schema.sections.map((section, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+    SectionRenderer,
+    {
+      section,
+      control: activeControl,
+      disabled,
+      variant
+    },
+    section.id || idx
+  )) });
+}
+function SectionRenderer({
+  section,
+  control,
+  disabled,
+  variant
+}) {
+  const activeVariant = section.variant || variant;
+  const SectionLayout = useLayoutComponent("section", activeVariant);
+  if (section.condition && !section.condition(control)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SectionLayout,
+    {
+      title: section.title,
+      description: section.description,
+      icon: section.icon,
+      variant: activeVariant,
+      className: section.className,
+      children: section.render ? section.render({ control, disabled, section }) : /* @__PURE__ */ jsxRuntime.jsx(
+        GridRenderer,
+        {
+          fields: section.fields,
+          cols: section.cols,
+          control,
+          disabled,
+          variant: activeVariant
+        }
+      )
+    }
+  );
+}
+function GridRenderer({
+  fields,
+  cols = 1,
+  control,
+  disabled,
+  variant
+}) {
+  const GridLayout = useLayoutComponent("grid", variant);
+  if (!fields || fields.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(GridLayout, { cols, children: fields.map((field, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+    FieldWrapper,
+    {
+      field,
+      control,
+      disabled,
+      variant
+    },
+    field.name || idx
+  )) });
+}
+function FieldWrapper({
+  field,
+  control,
+  disabled,
+  variant
+}) {
+  const formValues = reactHookForm.useWatch({ control });
+  if (field.condition && !field.condition(formValues)) {
+    return null;
+  }
+  const activeVariant = field.variant || variant;
+  const FieldComponent = useFieldComponent(field.type, activeVariant);
+  if (!FieldComponent) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: field.fullWidth ? "col-span-full" : "", children: /* @__PURE__ */ jsxRuntime.jsx(
+    FieldComponent,
+    {
+      field,
+      control,
+      disabled: disabled || field.disabled,
+      variant: activeVariant,
+      ...field
+    }
+  ) });
+}
+
+exports.FormGenerator = FormGenerator;
+exports.FormSystemProvider = FormSystemProvider;
+exports.cn = cn;
+exports.useFormSystem = useFormSystem;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/FormSystemContext.tsx","../src/utils.ts","../src/FormGenerator.tsx"],"names":["createContext","useMemo","jsx","useContext","jsxs","twMerge","clsx","useFormContext","useWatch"],"mappings":"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","file":"index.cjs","sourcesContent":["\"use client\";\r\n\r\nimport { createContext, useContext, useMemo } from \"react\";\r\nimport type {\r\n  FormSystemContextValue,\r\n  FormSystemProviderProps,\r\n  FieldComponent,\r\n  LayoutComponent,\r\n  FieldType,\r\n  LayoutType,\r\n  Variant,\r\n} from \"./types\";\r\n\r\nconst FormSystemContext = createContext<FormSystemContextValue | null>(null);\r\n\r\n/**\r\n * FormSystemProvider\r\n *\r\n * Provides the component registry to the form system.\r\n * This is the root provider that enables FormGenerator to work.\r\n *\r\n * @example\r\n * ```tsx\r\n * import { FormSystemProvider } from '@classytic/formkit';\r\n *\r\n * const components = {\r\n *   text: TextInput,\r\n *   select: SelectInput,\r\n * };\r\n *\r\n * const layouts = {\r\n *   section: SectionLayout,\r\n *   grid: GridLayout,\r\n * };\r\n *\r\n * function App() {\r\n *   return (\r\n *     <FormSystemProvider components={components} layouts={layouts}>\r\n *       <YourFormComponent />\r\n *     </FormSystemProvider>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport function FormSystemProvider({\r\n  components,\r\n  layouts,\r\n  children,\r\n}: FormSystemProviderProps): JSX.Element {\r\n  const value = useMemo<FormSystemContextValue>(\r\n    () => ({\r\n      components: components || {},\r\n      layouts: layouts || {},\r\n    }),\r\n    [components, layouts]\r\n  );\r\n\r\n  return <FormSystemContext.Provider value={value}>{children}</FormSystemContext.Provider>;\r\n}\r\n\r\n/**\r\n * Hook to access the form system context\r\n *\r\n * @throws {Error} If used outside FormSystemProvider\r\n * @returns Form system context value\r\n *\r\n * @example\r\n * ```tsx\r\n * const { components, layouts } = useFormSystem();\r\n * ```\r\n */\r\nexport function useFormSystem(): FormSystemContextValue {\r\n  const context = useContext(FormSystemContext);\r\n  if (!context) {\r\n    throw new Error(\"useFormSystem must be used within a FormSystemProvider\");\r\n  }\r\n  return context;\r\n}\r\n\r\n/**\r\n * Helper to resolve a component for a specific field type and variant\r\n *\r\n * @param type - Field type identifier\r\n * @param variant - Optional variant name\r\n * @returns Field component or fallback\r\n *\r\n * @internal\r\n */\r\nexport function useFieldComponent(type: FieldType, variant?: Variant): FieldComponent {\r\n  const { components } = useFormSystem();\r\n\r\n  // 1. Try variant-specific component\r\n  if (variant && typeof components[variant] === \"object\" && components[variant]) {\r\n    const variantComponents = components[variant] as Record<string, FieldComponent>;\r\n    if (variantComponents[type]) {\r\n      return variantComponents[type];\r\n    }\r\n  }\r\n\r\n  // 2. Fallback to standard component\r\n  const Component =\r\n    (components[type] as FieldComponent) ||\r\n    (components[\"default\"] as FieldComponent) ||\r\n    (components[\"text\"] as FieldComponent);\r\n\r\n  if (!Component) {\r\n    // Library-safe fallback: Don't crash, just warn and render nothing or a placeholder\r\n    if (process.env.NODE_ENV === \"development\") {\r\n      console.warn(`FormKit: No component found for type \"${type}\" (variant: ${variant})`);\r\n      return () => (\r\n        <div style={{ color: \"red\", padding: 4, border: \"1px dashed red\" }}>\r\n          Missing: {type}\r\n        </div>\r\n      );\r\n    }\r\n    return () => null;\r\n  }\r\n\r\n  return Component;\r\n}\r\n\r\n/**\r\n * Helper to resolve a layout component\r\n *\r\n * @param type - Layout type identifier\r\n * @param variant - Optional variant name\r\n * @returns Layout component or fallback\r\n *\r\n * @internal\r\n */\r\nexport function useLayoutComponent(type: LayoutType, variant?: Variant): LayoutComponent {\r\n  const { layouts } = useFormSystem();\r\n\r\n  // 1. Try variant-specific layout\r\n  if (variant && typeof layouts[variant] === \"object\" && layouts[variant]) {\r\n    const variantLayouts = layouts[variant] as Record<string, LayoutComponent>;\r\n    if (variantLayouts[type]) {\r\n      return variantLayouts[type];\r\n    }\r\n  }\r\n\r\n  // 2. Fallback to standard layout\r\n  return (\r\n    (layouts[type] as LayoutComponent) ||\r\n    (layouts[\"default\"] as LayoutComponent) ||\r\n    DefaultLayout\r\n  );\r\n}\r\n\r\n/**\r\n * Default layout component - simple div wrapper\r\n */\r\nconst DefaultLayout: LayoutComponent = ({ children, className }: any) => (\r\n  <div className={className}>{children}</div>\r\n);\r\n","import { type ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\n/**\r\n * Utility function to merge Tailwind CSS classes\r\n * Combines clsx and tailwind-merge for conflict-free class merging\r\n *\r\n * @param inputs - Class values to merge\r\n * @returns Merged class string\r\n */\r\nexport function cn(...inputs: ClassValue[]): string {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useFormContext, useWatch } from \"react-hook-form\";\r\nimport type { Control, FieldValues } from \"react-hook-form\";\r\nimport { useFieldComponent, useLayoutComponent } from \"./FormSystemContext\";\r\nimport { cn } from \"./utils\";\r\nimport type { FormGeneratorProps, Section, BaseField, Variant } from \"./types\";\r\n\r\n/**\r\n * FormGenerator - Headless Form Generator Component\r\n *\r\n * Renders a form based on a schema, using components injected via FormSystemProvider.\r\n * Supports conditional fields, dynamic layouts, and variants.\r\n *\r\n * @template TFieldValues - Form field values type\r\n *\r\n * @example\r\n * ```tsx\r\n * import { useForm } from 'react-hook-form';\r\n * import { FormGenerator } from '@classytic/formkit';\r\n *\r\n * function MyForm() {\r\n *   const { control } = useForm();\r\n *\r\n *   const schema = {\r\n *     sections: [\r\n *       {\r\n *         title: \"User Details\",\r\n *         fields: [\r\n *           { name: \"firstName\", type: \"text\", label: \"First Name\" },\r\n *           { name: \"email\", type: \"email\", label: \"Email\" }\r\n *         ]\r\n *       }\r\n *     ]\r\n *   };\r\n *\r\n *   return <FormGenerator schema={schema} control={control} />;\r\n * }\r\n * ```\r\n */\r\nexport function FormGenerator<TFieldValues extends FieldValues = FieldValues>({\r\n  schema,\r\n  control,\r\n  disabled = false,\r\n  variant,\r\n}: FormGeneratorProps<TFieldValues>): JSX.Element | null {\r\n  // Use provided control or fall back to context\r\n  const formContext = useFormContext<TFieldValues>();\r\n  const activeControl = control || formContext?.control;\r\n\r\n  if (!schema?.sections) return null;\r\n\r\n  return (\r\n    <div className={cn(\"form-generator-root\", variant && `form-variant-${variant}`)}>\r\n      {schema.sections.map((section, idx) => (\r\n        <SectionRenderer\r\n          key={section.id || idx}\r\n          section={section}\r\n          control={activeControl}\r\n          disabled={disabled}\r\n          variant={variant}\r\n        />\r\n      ))}\r\n    </div>\r\n  );\r\n}\r\n\r\n/**\r\n * Section Renderer Props\r\n */\r\ninterface SectionRendererProps<TFieldValues extends FieldValues = FieldValues> {\r\n  section: Section;\r\n  control?: Control<TFieldValues>;\r\n  disabled?: boolean;\r\n  variant?: Variant;\r\n}\r\n\r\n/**\r\n * Renders a single section with its fields\r\n */\r\nfunction SectionRenderer<TFieldValues extends FieldValues = FieldValues>({\r\n  section,\r\n  control,\r\n  disabled,\r\n  variant,\r\n}: SectionRendererProps<TFieldValues>): JSX.Element | null {\r\n  // Allow section to override variant, or use global variant\r\n  const activeVariant = section.variant || variant;\r\n  const SectionLayout = useLayoutComponent(\"section\", activeVariant);\r\n\r\n  // Check condition if present\r\n  if (section.condition && !section.condition(control)) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <SectionLayout\r\n      title={section.title}\r\n      description={section.description}\r\n      icon={section.icon}\r\n      variant={activeVariant}\r\n      className={section.className}\r\n    >\r\n      {section.render ? (\r\n        section.render({ control, disabled, section })\r\n      ) : (\r\n        <GridRenderer\r\n          fields={section.fields}\r\n          cols={section.cols}\r\n          control={control}\r\n          disabled={disabled}\r\n          variant={activeVariant}\r\n        />\r\n      )}\r\n    </SectionLayout>\r\n  );\r\n}\r\n\r\n/**\r\n * Grid Renderer Props\r\n */\r\ninterface GridRendererProps<TFieldValues extends FieldValues = FieldValues> {\r\n  fields?: BaseField[];\r\n  cols?: number;\r\n  control?: Control<TFieldValues>;\r\n  disabled?: boolean;\r\n  variant?: Variant;\r\n}\r\n\r\n/**\r\n * Renders a grid of fields with specified column layout\r\n */\r\nfunction GridRenderer<TFieldValues extends FieldValues = FieldValues>({\r\n  fields,\r\n  cols = 1,\r\n  control,\r\n  disabled,\r\n  variant,\r\n}: GridRendererProps<TFieldValues>): JSX.Element | null {\r\n  const GridLayout = useLayoutComponent(\"grid\", variant);\r\n\r\n  if (!fields || fields.length === 0) return null;\r\n\r\n  return (\r\n    <GridLayout cols={cols}>\r\n      {fields.map((field, idx) => (\r\n        <FieldWrapper\r\n          key={field.name || idx}\r\n          field={field}\r\n          control={control}\r\n          disabled={disabled}\r\n          variant={variant}\r\n        />\r\n      ))}\r\n    </GridLayout>\r\n  );\r\n}\r\n\r\n/**\r\n * Field Wrapper Props\r\n */\r\ninterface FieldWrapperProps<TFieldValues extends FieldValues = FieldValues> {\r\n  field: BaseField;\r\n  control?: Control<TFieldValues>;\r\n  disabled?: boolean;\r\n  variant?: Variant;\r\n}\r\n\r\n/**\r\n * Renders a single field wrapper\r\n * Handles conditional rendering and field visibility\r\n */\r\nfunction FieldWrapper<TFieldValues extends FieldValues = FieldValues>({\r\n  field,\r\n  control,\r\n  disabled,\r\n  variant,\r\n}: FieldWrapperProps<TFieldValues>): JSX.Element | null {\r\n  // Watch values for conditional rendering\r\n  const formValues = useWatch({ control });\r\n\r\n  if (field.condition && !field.condition(formValues)) {\r\n    return null;\r\n  }\r\n\r\n  // Allow field to override variant\r\n  const activeVariant = field.variant || variant;\r\n  const FieldComponent = useFieldComponent(field.type, activeVariant);\r\n\r\n  if (!FieldComponent) return null;\r\n\r\n  return (\r\n    <div className={field.fullWidth ? \"col-span-full\" : \"\"}>\r\n      <FieldComponent\r\n        field={field}\r\n        control={control as any}\r\n        disabled={disabled || field.disabled}\r\n        variant={activeVariant}\r\n        // Pass all field props to the component\r\n        {...field}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n"]}

package/dist/index.d.cts

@@ -0,0 +1,265 @@
+import { FieldValues, Control } from 'react-hook-form';
+import { ReactNode, ComponentType } from 'react';
+import { ClassValue } from 'clsx';
+
+/**
+ * Field type identifier
+ */
+type FieldType = string;
+/**
+ * Layout type identifier
+ */
+type LayoutType = "section" | "grid" | "default" | string;
+/**
+ * Variant identifier for component styling
+ */
+type Variant = string | undefined;
+/**
+ * Base field configuration
+ */
+interface BaseField {
+    /** Field name (maps to form field) */
+    name: string;
+    /** Field type (text, select, checkbox, etc.) */
+    type: FieldType;
+    /** Field label */
+    label?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether field is disabled */
+    disabled?: boolean;
+    /** Whether field is required */
+    required?: boolean;
+    /** Field variant */
+    variant?: Variant;
+    /** Whether field should span full width */
+    fullWidth?: boolean;
+    /** Custom CSS class name */
+    className?: string;
+    /** Conditional rendering function */
+    condition?: (formValues: FieldValues) => boolean;
+    /** Default value */
+    defaultValue?: any;
+    /** Additional field-specific props */
+    [key: string]: any;
+}
+/**
+ * Field component props
+ */
+interface FieldComponentProps<TFieldValues extends FieldValues = FieldValues> {
+    /** Field configuration */
+    field: BaseField;
+    /** React Hook Form control */
+    control?: Control<TFieldValues>;
+    /** Whether field is disabled */
+    disabled?: boolean;
+    /** Field variant */
+    variant?: Variant;
+}
+/**
+ * Section configuration
+ */
+interface Section {
+    /** Section ID (optional) */
+    id?: string;
+    /** Section title */
+    title?: string;
+    /** Section description */
+    description?: string;
+    /** Section icon */
+    icon?: ReactNode;
+    /** Section fields */
+    fields?: BaseField[];
+    /** Number of columns in grid */
+    cols?: number;
+    /** Custom render function */
+    render?: (props: {
+        control?: Control<any>;
+        disabled?: boolean;
+        section: Section;
+    }) => ReactNode;
+    /** Section variant */
+    variant?: Variant;
+    /** Custom CSS class name */
+    className?: string;
+    /** Conditional rendering function */
+    condition?: (control?: Control<any>) => boolean;
+}
+/**
+ * Form schema configuration
+ */
+interface FormSchema {
+    /** Form sections */
+    sections: Section[];
+}
+/**
+ * Section layout component props
+ */
+interface SectionLayoutProps {
+    /** Section title */
+    title?: string;
+    /** Section description */
+    description?: string;
+    /** Section icon */
+    icon?: ReactNode;
+    /** Layout variant */
+    variant?: Variant;
+    /** Custom CSS class name */
+    className?: string;
+    /** Children content */
+    children: ReactNode;
+}
+/**
+ * Grid layout component props
+ */
+interface GridLayoutProps {
+    /** Number of columns */
+    cols?: number;
+    /** Children content */
+    children: ReactNode;
+}
+/**
+ * Layout component props union
+ */
+type LayoutComponentProps = SectionLayoutProps | GridLayoutProps;
+/**
+ * Field component type
+ */
+type FieldComponent<TFieldValues extends FieldValues = FieldValues> = ComponentType<FieldComponentProps<TFieldValues>>;
+/**
+ * Layout component type
+ */
+type LayoutComponent = ComponentType<any>;
+/**
+ * Component registry mapping field types to components
+ */
+interface ComponentRegistry {
+    [key: string]: FieldComponent | ComponentRegistry;
+}
+/**
+ * Layout registry mapping layout types to components
+ */
+interface LayoutRegistry {
+    [key: string]: LayoutComponent | LayoutRegistry;
+}
+/**
+ * Form system context value
+ */
+interface FormSystemContextValue {
+    /** Registered field components */
+    components: ComponentRegistry;
+    /** Registered layout components */
+    layouts: LayoutRegistry;
+}
+/**
+ * Form system provider props
+ */
+interface FormSystemProviderProps {
+    /** Field component registry */
+    components?: ComponentRegistry;
+    /** Layout component registry */
+    layouts?: LayoutRegistry;
+    /** Children content */
+    children: ReactNode;
+}
+/**
+ * Form generator props
+ */
+interface FormGeneratorProps<TFieldValues extends FieldValues = FieldValues> {
+    /** Form schema */
+    schema: FormSchema;
+    /** React Hook Form control */
+    control?: Control<TFieldValues>;
+    /** Global disabled state */
+    disabled?: boolean;
+    /** Global variant */
+    variant?: Variant;
+}
+
+/**
+ * FormGenerator - Headless Form Generator Component
+ *
+ * Renders a form based on a schema, using components injected via FormSystemProvider.
+ * Supports conditional fields, dynamic layouts, and variants.
+ *
+ * @template TFieldValues - Form field values type
+ *
+ * @example
+ * ```tsx
+ * import { useForm } from 'react-hook-form';
+ * import { FormGenerator } from '@classytic/formkit';
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *
+ *   const schema = {
+ *     sections: [
+ *       {
+ *         title: "User Details",
+ *         fields: [
+ *           { name: "firstName", type: "text", label: "First Name" },
+ *           { name: "email", type: "email", label: "Email" }
+ *         ]
+ *       }
+ *     ]
+ *   };
+ *
+ *   return <FormGenerator schema={schema} control={control} />;
+ * }
+ * ```
+ */
+declare function FormGenerator<TFieldValues extends FieldValues = FieldValues>({ schema, control, disabled, variant, }: FormGeneratorProps<TFieldValues>): JSX.Element | null;
+
+/**
+ * FormSystemProvider
+ *
+ * Provides the component registry to the form system.
+ * This is the root provider that enables FormGenerator to work.
+ *
+ * @example
+ * ```tsx
+ * import { FormSystemProvider } from '@classytic/formkit';
+ *
+ * const components = {
+ *   text: TextInput,
+ *   select: SelectInput,
+ * };
+ *
+ * const layouts = {
+ *   section: SectionLayout,
+ *   grid: GridLayout,
+ * };
+ *
+ * function App() {
+ *   return (
+ *     <FormSystemProvider components={components} layouts={layouts}>
+ *       <YourFormComponent />
+ *     </FormSystemProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function FormSystemProvider({ components, layouts, children, }: FormSystemProviderProps): JSX.Element;
+/**
+ * Hook to access the form system context
+ *
+ * @throws {Error} If used outside FormSystemProvider
+ * @returns Form system context value
+ *
+ * @example
+ * ```tsx
+ * const { components, layouts } = useFormSystem();
+ * ```
+ */
+declare function useFormSystem(): FormSystemContextValue;
+
+/**
+ * Utility function to merge Tailwind CSS classes
+ * Combines clsx and tailwind-merge for conflict-free class merging
+ *
+ * @param inputs - Class values to merge
+ * @returns Merged class string
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+export { type BaseField, type ComponentRegistry, type FieldComponent, type FieldComponentProps, type FieldType, FormGenerator, type FormGeneratorProps, type FormSchema, type FormSystemContextValue, FormSystemProvider, type FormSystemProviderProps, type GridLayoutProps, type LayoutComponent, type LayoutComponentProps, type LayoutRegistry, type LayoutType, type Section, type SectionLayoutProps, type Variant, cn, useFormSystem };

package/dist/index.d.ts

@@ -0,0 +1,265 @@
+import { FieldValues, Control } from 'react-hook-form';
+import { ReactNode, ComponentType } from 'react';
+import { ClassValue } from 'clsx';
+
+/**
+ * Field type identifier
+ */
+type FieldType = string;
+/**
+ * Layout type identifier
+ */
+type LayoutType = "section" | "grid" | "default" | string;
+/**
+ * Variant identifier for component styling
+ */
+type Variant = string | undefined;
+/**
+ * Base field configuration
+ */
+interface BaseField {
+    /** Field name (maps to form field) */
+    name: string;
+    /** Field type (text, select, checkbox, etc.) */
+    type: FieldType;
+    /** Field label */
+    label?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether field is disabled */
+    disabled?: boolean;
+    /** Whether field is required */
+    required?: boolean;
+    /** Field variant */
+    variant?: Variant;
+    /** Whether field should span full width */
+    fullWidth?: boolean;
+    /** Custom CSS class name */
+    className?: string;
+    /** Conditional rendering function */
+    condition?: (formValues: FieldValues) => boolean;
+    /** Default value */
+    defaultValue?: any;
+    /** Additional field-specific props */
+    [key: string]: any;
+}
+/**
+ * Field component props
+ */
+interface FieldComponentProps<TFieldValues extends FieldValues = FieldValues> {
+    /** Field configuration */
+    field: BaseField;
+    /** React Hook Form control */
+    control?: Control<TFieldValues>;
+    /** Whether field is disabled */
+    disabled?: boolean;
+    /** Field variant */
+    variant?: Variant;
+}
+/**
+ * Section configuration
+ */
+interface Section {
+    /** Section ID (optional) */
+    id?: string;
+    /** Section title */
+    title?: string;
+    /** Section description */
+    description?: string;
+    /** Section icon */
+    icon?: ReactNode;
+    /** Section fields */
+    fields?: BaseField[];
+    /** Number of columns in grid */
+    cols?: number;
+    /** Custom render function */
+    render?: (props: {
+        control?: Control<any>;
+        disabled?: boolean;
+        section: Section;
+    }) => ReactNode;
+    /** Section variant */
+    variant?: Variant;
+    /** Custom CSS class name */
+    className?: string;
+    /** Conditional rendering function */
+    condition?: (control?: Control<any>) => boolean;
+}
+/**
+ * Form schema configuration
+ */
+interface FormSchema {
+    /** Form sections */
+    sections: Section[];
+}
+/**
+ * Section layout component props
+ */
+interface SectionLayoutProps {
+    /** Section title */
+    title?: string;
+    /** Section description */
+    description?: string;
+    /** Section icon */
+    icon?: ReactNode;
+    /** Layout variant */
+    variant?: Variant;
+    /** Custom CSS class name */
+    className?: string;
+    /** Children content */
+    children: ReactNode;
+}
+/**
+ * Grid layout component props
+ */
+interface GridLayoutProps {
+    /** Number of columns */
+    cols?: number;
+    /** Children content */
+    children: ReactNode;
+}
+/**
+ * Layout component props union
+ */
+type LayoutComponentProps = SectionLayoutProps | GridLayoutProps;
+/**
+ * Field component type
+ */
+type FieldComponent<TFieldValues extends FieldValues = FieldValues> = ComponentType<FieldComponentProps<TFieldValues>>;
+/**
+ * Layout component type
+ */
+type LayoutComponent = ComponentType<any>;
+/**
+ * Component registry mapping field types to components
+ */
+interface ComponentRegistry {
+    [key: string]: FieldComponent | ComponentRegistry;
+}
+/**
+ * Layout registry mapping layout types to components
+ */
+interface LayoutRegistry {
+    [key: string]: LayoutComponent | LayoutRegistry;
+}
+/**
+ * Form system context value
+ */
+interface FormSystemContextValue {
+    /** Registered field components */
+    components: ComponentRegistry;
+    /** Registered layout components */
+    layouts: LayoutRegistry;
+}
+/**
+ * Form system provider props
+ */
+interface FormSystemProviderProps {
+    /** Field component registry */
+    components?: ComponentRegistry;
+    /** Layout component registry */
+    layouts?: LayoutRegistry;
+    /** Children content */
+    children: ReactNode;
+}
+/**
+ * Form generator props
+ */
+interface FormGeneratorProps<TFieldValues extends FieldValues = FieldValues> {
+    /** Form schema */
+    schema: FormSchema;
+    /** React Hook Form control */
+    control?: Control<TFieldValues>;
+    /** Global disabled state */
+    disabled?: boolean;
+    /** Global variant */
+    variant?: Variant;
+}
+
+/**
+ * FormGenerator - Headless Form Generator Component
+ *
+ * Renders a form based on a schema, using components injected via FormSystemProvider.
+ * Supports conditional fields, dynamic layouts, and variants.
+ *
+ * @template TFieldValues - Form field values type
+ *
+ * @example
+ * ```tsx
+ * import { useForm } from 'react-hook-form';
+ * import { FormGenerator } from '@classytic/formkit';
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *
+ *   const schema = {
+ *     sections: [
+ *       {
+ *         title: "User Details",
+ *         fields: [
+ *           { name: "firstName", type: "text", label: "First Name" },
+ *           { name: "email", type: "email", label: "Email" }
+ *         ]
+ *       }
+ *     ]
+ *   };
+ *
+ *   return <FormGenerator schema={schema} control={control} />;
+ * }
+ * ```
+ */
+declare function FormGenerator<TFieldValues extends FieldValues = FieldValues>({ schema, control, disabled, variant, }: FormGeneratorProps<TFieldValues>): JSX.Element | null;
+
+/**
+ * FormSystemProvider
+ *
+ * Provides the component registry to the form system.
+ * This is the root provider that enables FormGenerator to work.
+ *
+ * @example
+ * ```tsx
+ * import { FormSystemProvider } from '@classytic/formkit';
+ *
+ * const components = {
+ *   text: TextInput,
+ *   select: SelectInput,
+ * };
+ *
+ * const layouts = {
+ *   section: SectionLayout,
+ *   grid: GridLayout,
+ * };
+ *
+ * function App() {
+ *   return (
+ *     <FormSystemProvider components={components} layouts={layouts}>
+ *       <YourFormComponent />
+ *     </FormSystemProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function FormSystemProvider({ components, layouts, children, }: FormSystemProviderProps): JSX.Element;
+/**
+ * Hook to access the form system context
+ *
+ * @throws {Error} If used outside FormSystemProvider
+ * @returns Form system context value
+ *
+ * @example
+ * ```tsx
+ * const { components, layouts } = useFormSystem();
+ * ```
+ */
+declare function useFormSystem(): FormSystemContextValue;
+
+/**
+ * Utility function to merge Tailwind CSS classes
+ * Combines clsx and tailwind-merge for conflict-free class merging
+ *
+ * @param inputs - Class values to merge
+ * @returns Merged class string
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+export { type BaseField, type ComponentRegistry, type FieldComponent, type FieldComponentProps, type FieldType, FormGenerator, type FormGeneratorProps, type FormSchema, type FormSystemContextValue, FormSystemProvider, type FormSystemProviderProps, type GridLayoutProps, type LayoutComponent, type LayoutComponentProps, type LayoutRegistry, type LayoutType, type Section, type SectionLayoutProps, type Variant, cn, useFormSystem };

package/dist/index.js

@@ -0,0 +1,164 @@
+import { useFormContext, useWatch } from 'react-hook-form';
+import { createContext, useMemo, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+// src/FormGenerator.tsx
+var FormSystemContext = createContext(null);
+function FormSystemProvider({
+  components,
+  layouts,
+  children
+}) {
+  const value = useMemo(
+    () => ({
+      components: components || {},
+      layouts: layouts || {}
+    }),
+    [components, layouts]
+  );
+  return /* @__PURE__ */ jsx(FormSystemContext.Provider, { value, children });
+}
+function useFormSystem() {
+  const context = useContext(FormSystemContext);
+  if (!context) {
+    throw new Error("useFormSystem must be used within a FormSystemProvider");
+  }
+  return context;
+}
+function useFieldComponent(type, variant) {
+  const { components } = useFormSystem();
+  if (variant && typeof components[variant] === "object" && components[variant]) {
+    const variantComponents = components[variant];
+    if (variantComponents[type]) {
+      return variantComponents[type];
+    }
+  }
+  const Component = components[type] || components["default"] || components["text"];
+  if (!Component) {
+    if (process.env.NODE_ENV === "development") {
+      console.warn(`FormKit: No component found for type "${type}" (variant: ${variant})`);
+      return () => /* @__PURE__ */ jsxs("div", { style: { color: "red", padding: 4, border: "1px dashed red" }, children: [
+        "Missing: ",
+        type
+      ] });
+    }
+    return () => null;
+  }
+  return Component;
+}
+function useLayoutComponent(type, variant) {
+  const { layouts } = useFormSystem();
+  if (variant && typeof layouts[variant] === "object" && layouts[variant]) {
+    const variantLayouts = layouts[variant];
+    if (variantLayouts[type]) {
+      return variantLayouts[type];
+    }
+  }
+  return layouts[type] || layouts["default"] || DefaultLayout;
+}
+var DefaultLayout = ({ children, className }) => /* @__PURE__ */ jsx("div", { className, children });
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function FormGenerator({
+  schema,
+  control,
+  disabled = false,
+  variant
+}) {
+  const formContext = useFormContext();
+  const activeControl = control || formContext?.control;
+  if (!schema?.sections) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("form-generator-root", variant && `form-variant-${variant}`), children: schema.sections.map((section, idx) => /* @__PURE__ */ jsx(
+    SectionRenderer,
+    {
+      section,
+      control: activeControl,
+      disabled,
+      variant
+    },
+    section.id || idx
+  )) });
+}
+function SectionRenderer({
+  section,
+  control,
+  disabled,
+  variant
+}) {
+  const activeVariant = section.variant || variant;
+  const SectionLayout = useLayoutComponent("section", activeVariant);
+  if (section.condition && !section.condition(control)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    SectionLayout,
+    {
+      title: section.title,
+      description: section.description,
+      icon: section.icon,
+      variant: activeVariant,
+      className: section.className,
+      children: section.render ? section.render({ control, disabled, section }) : /* @__PURE__ */ jsx(
+        GridRenderer,
+        {
+          fields: section.fields,
+          cols: section.cols,
+          control,
+          disabled,
+          variant: activeVariant
+        }
+      )
+    }
+  );
+}
+function GridRenderer({
+  fields,
+  cols = 1,
+  control,
+  disabled,
+  variant
+}) {
+  const GridLayout = useLayoutComponent("grid", variant);
+  if (!fields || fields.length === 0) return null;
+  return /* @__PURE__ */ jsx(GridLayout, { cols, children: fields.map((field, idx) => /* @__PURE__ */ jsx(
+    FieldWrapper,
+    {
+      field,
+      control,
+      disabled,
+      variant
+    },
+    field.name || idx
+  )) });
+}
+function FieldWrapper({
+  field,
+  control,
+  disabled,
+  variant
+}) {
+  const formValues = useWatch({ control });
+  if (field.condition && !field.condition(formValues)) {
+    return null;
+  }
+  const activeVariant = field.variant || variant;
+  const FieldComponent = useFieldComponent(field.type, activeVariant);
+  if (!FieldComponent) return null;
+  return /* @__PURE__ */ jsx("div", { className: field.fullWidth ? "col-span-full" : "", children: /* @__PURE__ */ jsx(
+    FieldComponent,
+    {
+      field,
+      control,
+      disabled: disabled || field.disabled,
+      variant: activeVariant,
+      ...field
+    }
+  ) });
+}
+
+export { FormGenerator, FormSystemProvider, cn, useFormSystem };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/FormSystemContext.tsx","../src/utils.ts","../src/FormGenerator.tsx"],"names":["jsx"],"mappings":"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","file":"index.js","sourcesContent":["\"use client\";\r\n\r\nimport { createContext, useContext, useMemo } from \"react\";\r\nimport type {\r\n  FormSystemContextValue,\r\n  FormSystemProviderProps,\r\n  FieldComponent,\r\n  LayoutComponent,\r\n  FieldType,\r\n  LayoutType,\r\n  Variant,\r\n} from \"./types\";\r\n\r\nconst FormSystemContext = createContext<FormSystemContextValue | null>(null);\r\n\r\n/**\r\n * FormSystemProvider\r\n *\r\n * Provides the component registry to the form system.\r\n * This is the root provider that enables FormGenerator to work.\r\n *\r\n * @example\r\n * ```tsx\r\n * import { FormSystemProvider } from '@classytic/formkit';\r\n *\r\n * const components = {\r\n *   text: TextInput,\r\n *   select: SelectInput,\r\n * };\r\n *\r\n * const layouts = {\r\n *   section: SectionLayout,\r\n *   grid: GridLayout,\r\n * };\r\n *\r\n * function App() {\r\n *   return (\r\n *     <FormSystemProvider components={components} layouts={layouts}>\r\n *       <YourFormComponent />\r\n *     </FormSystemProvider>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport function FormSystemProvider({\r\n  components,\r\n  layouts,\r\n  children,\r\n}: FormSystemProviderProps): JSX.Element {\r\n  const value = useMemo<FormSystemContextValue>(\r\n    () => ({\r\n      components: components || {},\r\n      layouts: layouts || {},\r\n    }),\r\n    [components, layouts]\r\n  );\r\n\r\n  return <FormSystemContext.Provider value={value}>{children}</FormSystemContext.Provider>;\r\n}\r\n\r\n/**\r\n * Hook to access the form system context\r\n *\r\n * @throws {Error} If used outside FormSystemProvider\r\n * @returns Form system context value\r\n *\r\n * @example\r\n * ```tsx\r\n * const { components, layouts } = useFormSystem();\r\n * ```\r\n */\r\nexport function useFormSystem(): FormSystemContextValue {\r\n  const context = useContext(FormSystemContext);\r\n  if (!context) {\r\n    throw new Error(\"useFormSystem must be used within a FormSystemProvider\");\r\n  }\r\n  return context;\r\n}\r\n\r\n/**\r\n * Helper to resolve a component for a specific field type and variant\r\n *\r\n * @param type - Field type identifier\r\n * @param variant - Optional variant name\r\n * @returns Field component or fallback\r\n *\r\n * @internal\r\n */\r\nexport function useFieldComponent(type: FieldType, variant?: Variant): FieldComponent {\r\n  const { components } = useFormSystem();\r\n\r\n  // 1. Try variant-specific component\r\n  if (variant && typeof components[variant] === \"object\" && components[variant]) {\r\n    const variantComponents = components[variant] as Record<string, FieldComponent>;\r\n    if (variantComponents[type]) {\r\n      return variantComponents[type];\r\n    }\r\n  }\r\n\r\n  // 2. Fallback to standard component\r\n  const Component =\r\n    (components[type] as FieldComponent) ||\r\n    (components[\"default\"] as FieldComponent) ||\r\n    (components[\"text\"] as FieldComponent);\r\n\r\n  if (!Component) {\r\n    // Library-safe fallback: Don't crash, just warn and render nothing or a placeholder\r\n    if (process.env.NODE_ENV === \"development\") {\r\n      console.warn(`FormKit: No component found for type \"${type}\" (variant: ${variant})`);\r\n      return () => (\r\n        <div style={{ color: \"red\", padding: 4, border: \"1px dashed red\" }}>\r\n          Missing: {type}\r\n        </div>\r\n      );\r\n    }\r\n    return () => null;\r\n  }\r\n\r\n  return Component;\r\n}\r\n\r\n/**\r\n * Helper to resolve a layout component\r\n *\r\n * @param type - Layout type identifier\r\n * @param variant - Optional variant name\r\n * @returns Layout component or fallback\r\n *\r\n * @internal\r\n */\r\nexport function useLayoutComponent(type: LayoutType, variant?: Variant): LayoutComponent {\r\n  const { layouts } = useFormSystem();\r\n\r\n  // 1. Try variant-specific layout\r\n  if (variant && typeof layouts[variant] === \"object\" && layouts[variant]) {\r\n    const variantLayouts = layouts[variant] as Record<string, LayoutComponent>;\r\n    if (variantLayouts[type]) {\r\n      return variantLayouts[type];\r\n    }\r\n  }\r\n\r\n  // 2. Fallback to standard layout\r\n  return (\r\n    (layouts[type] as LayoutComponent) ||\r\n    (layouts[\"default\"] as LayoutComponent) ||\r\n    DefaultLayout\r\n  );\r\n}\r\n\r\n/**\r\n * Default layout component - simple div wrapper\r\n */\r\nconst DefaultLayout: LayoutComponent = ({ children, className }: any) => (\r\n  <div className={className}>{children}</div>\r\n);\r\n","import { type ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\n/**\r\n * Utility function to merge Tailwind CSS classes\r\n * Combines clsx and tailwind-merge for conflict-free class merging\r\n *\r\n * @param inputs - Class values to merge\r\n * @returns Merged class string\r\n */\r\nexport function cn(...inputs: ClassValue[]): string {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useFormContext, useWatch } from \"react-hook-form\";\r\nimport type { Control, FieldValues } from \"react-hook-form\";\r\nimport { useFieldComponent, useLayoutComponent } from \"./FormSystemContext\";\r\nimport { cn } from \"./utils\";\r\nimport type { FormGeneratorProps, Section, BaseField, Variant } from \"./types\";\r\n\r\n/**\r\n * FormGenerator - Headless Form Generator Component\r\n *\r\n * Renders a form based on a schema, using components injected via FormSystemProvider.\r\n * Supports conditional fields, dynamic layouts, and variants.\r\n *\r\n * @template TFieldValues - Form field values type\r\n *\r\n * @example\r\n * ```tsx\r\n * import { useForm } from 'react-hook-form';\r\n * import { FormGenerator } from '@classytic/formkit';\r\n *\r\n * function MyForm() {\r\n *   const { control } = useForm();\r\n *\r\n *   const schema = {\r\n *     sections: [\r\n *       {\r\n *         title: \"User Details\",\r\n *         fields: [\r\n *           { name: \"firstName\", type: \"text\", label: \"First Name\" },\r\n *           { name: \"email\", type: \"email\", label: \"Email\" }\r\n *         ]\r\n *       }\r\n *     ]\r\n *   };\r\n *\r\n *   return <FormGenerator schema={schema} control={control} />;\r\n * }\r\n * ```\r\n */\r\nexport function FormGenerator<TFieldValues extends FieldValues = FieldValues>({\r\n  schema,\r\n  control,\r\n  disabled = false,\r\n  variant,\r\n}: FormGeneratorProps<TFieldValues>): JSX.Element | null {\r\n  // Use provided control or fall back to context\r\n  const formContext = useFormContext<TFieldValues>();\r\n  const activeControl = control || formContext?.control;\r\n\r\n  if (!schema?.sections) return null;\r\n\r\n  return (\r\n    <div className={cn(\"form-generator-root\", variant && `form-variant-${variant}`)}>\r\n      {schema.sections.map((section, idx) => (\r\n        <SectionRenderer\r\n          key={section.id || idx}\r\n          section={section}\r\n          control={activeControl}\r\n          disabled={disabled}\r\n          variant={variant}\r\n        />\r\n      ))}\r\n    </div>\r\n  );\r\n}\r\n\r\n/**\r\n * Section Renderer Props\r\n */\r\ninterface SectionRendererProps<TFieldValues extends FieldValues = FieldValues> {\r\n  section: Section;\r\n  control?: Control<TFieldValues>;\r\n  disabled?: boolean;\r\n  variant?: Variant;\r\n}\r\n\r\n/**\r\n * Renders a single section with its fields\r\n */\r\nfunction SectionRenderer<TFieldValues extends FieldValues = FieldValues>({\r\n  section,\r\n  control,\r\n  disabled,\r\n  variant,\r\n}: SectionRendererProps<TFieldValues>): JSX.Element | null {\r\n  // Allow section to override variant, or use global variant\r\n  const activeVariant = section.variant || variant;\r\n  const SectionLayout = useLayoutComponent(\"section\", activeVariant);\r\n\r\n  // Check condition if present\r\n  if (section.condition && !section.condition(control)) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <SectionLayout\r\n      title={section.title}\r\n      description={section.description}\r\n      icon={section.icon}\r\n      variant={activeVariant}\r\n      className={section.className}\r\n    >\r\n      {section.render ? (\r\n        section.render({ control, disabled, section })\r\n      ) : (\r\n        <GridRenderer\r\n          fields={section.fields}\r\n          cols={section.cols}\r\n          control={control}\r\n          disabled={disabled}\r\n          variant={activeVariant}\r\n        />\r\n      )}\r\n    </SectionLayout>\r\n  );\r\n}\r\n\r\n/**\r\n * Grid Renderer Props\r\n */\r\ninterface GridRendererProps<TFieldValues extends FieldValues = FieldValues> {\r\n  fields?: BaseField[];\r\n  cols?: number;\r\n  control?: Control<TFieldValues>;\r\n  disabled?: boolean;\r\n  variant?: Variant;\r\n}\r\n\r\n/**\r\n * Renders a grid of fields with specified column layout\r\n */\r\nfunction GridRenderer<TFieldValues extends FieldValues = FieldValues>({\r\n  fields,\r\n  cols = 1,\r\n  control,\r\n  disabled,\r\n  variant,\r\n}: GridRendererProps<TFieldValues>): JSX.Element | null {\r\n  const GridLayout = useLayoutComponent(\"grid\", variant);\r\n\r\n  if (!fields || fields.length === 0) return null;\r\n\r\n  return (\r\n    <GridLayout cols={cols}>\r\n      {fields.map((field, idx) => (\r\n        <FieldWrapper\r\n          key={field.name || idx}\r\n          field={field}\r\n          control={control}\r\n          disabled={disabled}\r\n          variant={variant}\r\n        />\r\n      ))}\r\n    </GridLayout>\r\n  );\r\n}\r\n\r\n/**\r\n * Field Wrapper Props\r\n */\r\ninterface FieldWrapperProps<TFieldValues extends FieldValues = FieldValues> {\r\n  field: BaseField;\r\n  control?: Control<TFieldValues>;\r\n  disabled?: boolean;\r\n  variant?: Variant;\r\n}\r\n\r\n/**\r\n * Renders a single field wrapper\r\n * Handles conditional rendering and field visibility\r\n */\r\nfunction FieldWrapper<TFieldValues extends FieldValues = FieldValues>({\r\n  field,\r\n  control,\r\n  disabled,\r\n  variant,\r\n}: FieldWrapperProps<TFieldValues>): JSX.Element | null {\r\n  // Watch values for conditional rendering\r\n  const formValues = useWatch({ control });\r\n\r\n  if (field.condition && !field.condition(formValues)) {\r\n    return null;\r\n  }\r\n\r\n  // Allow field to override variant\r\n  const activeVariant = field.variant || variant;\r\n  const FieldComponent = useFieldComponent(field.type, activeVariant);\r\n\r\n  if (!FieldComponent) return null;\r\n\r\n  return (\r\n    <div className={field.fullWidth ? \"col-span-full\" : \"\"}>\r\n      <FieldComponent\r\n        field={field}\r\n        control={control as any}\r\n        disabled={disabled || field.disabled}\r\n        variant={activeVariant}\r\n        // Pass all field props to the component\r\n        {...field}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n"]}

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@classytic/formkit",
+  "version": "1.0.0",
+  "description": "Headless, type-safe form generation engine for React. Schema-driven with full TypeScript support.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "tsc --noEmit",
+    "test": "node --test tests/*.test.js",
+    "test:watch": "node --test --watch tests/*.test.js",
+    "prepublishOnly": "npm run lint && npm run build",
+    "version:patch": "npm version patch",
+    "version:minor": "npm version minor",
+    "version:major": "npm version major",
+    "publish:npm": "npm publish --access public",
+    "release:patch": "npm run version:patch && npm run publish:npm",
+    "release:minor": "npm run version:minor && npm run publish:npm",
+    "release:major": "npm run version:major && npm run publish:npm"
+  },
+  "keywords": [
+    "react",
+    "react19",
+    "forms",
+    "form-generator",
+    "headless",
+    "schema-driven",
+    "typescript",
+    "type-safe",
+    "react-hook-form",
+    "ui-agnostic",
+    "tailwind",
+    "shadcn",
+    "dynamic-forms",
+    "conditional-fields"
+  ],
+  "author": "Classytic",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/classytic/formkit.git"
+  },
+  "bugs": {
+    "url": "https://github.com/classytic/formkit/issues"
+  },
+  "homepage": "https://github.com/classytic/formkit#readme",
+  "peerDependencies": {
+    "react": ">=18.3.0",
+    "react-dom": ">=18.3.0",
+    "react-hook-form": ">=7.50.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.5"
+  },
+  "devDependencies": {
+    "@types/node": "^22.8.7",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.53.2",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}