@classytic/formkit 1.0.2 → 1.2.0

package/dist/index.cjs

@@ -1,169 +0,0 @@
-'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

@@ -1 +0,0 @@
-{"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

@@ -1,288 +0,0 @@
-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
- *
- * IMPORTANT: Components receive both:
- * 1. A `field` object with the complete field configuration
- * 2. All field properties spread at the top level (via ...field)
- *
- * Example:
- * ```tsx
- * // Schema
- * { name: "email", type: "email", label: "Email", placeholder: "user@example.com" }
- *
- * // Your component receives:
- * {
- *   field: { name: "email", type: "email", label: "Email", placeholder: "..." },
- *   control: {...},
- *   disabled: false,
- *   variant: undefined,
- *   // PLUS all field props at top level:
- *   name: "email",
- *   type: "email",
- *   label: "Email",
- *   placeholder: "user@example.com"
- * }
- * ```
- */
-interface FieldComponentProps<TFieldValues extends FieldValues = FieldValues> extends BaseField {
-    /** Field configuration object (contains all field props) */
-    field: BaseField;
-    /** React Hook Form control (for Controller integration) */
-    control?: Control<TFieldValues> | Control<any>;
-    /** Whether field is globally disabled */
-    disabled?: boolean;
-    /** Component variant (e.g., "compact", "default") */
-    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 };