@uniform-ts/core 0.0.2 → 0.0.3

package/README.md

@@ -14,7 +14,7 @@ UniForm takes a Zod schema and automatically renders a fully customizable form.
 - **Per-field `onChange` in `fields` prop** — react to individual field changes inline, with typed values and full form control methods
 - **Per-field custom components** — pass any `React.ComponentType<FieldProps>` directly as `meta.component` (inline, no registry) or register under a custom string key; direct components bypass the registry _and_ the default `ArrayField`/`ObjectField` routing, allowing fully custom multi-value widgets for `array`-typed fields
 - **Layout hooks** — `classNames`, `fieldWrapper`, `layout.formWrapper`, `layout.sectionWrapper`, `layout.submitButton`
-- **Section grouping** — group fields into named sections via `meta.section`
+- **Section grouping** — group fields into named sections via `meta.section`; style or swap individual section wrappers via `layout.sections`
 - **Conditional fields** — show/hide fields based on form values with `meta.condition`; hidden fields automatically reset to their default value
 - **Field ordering** — control render order with `meta.order`
 - **`createAutoForm()` factory** — bake in your design system defaults once, use everywhere
@@ -178,7 +178,7 @@ const MyAutoForm = createAutoForm({
 | -------------- | ---------------------------------------- | ------------------------------------------------ |
 | `components`   | `ComponentRegistry`                      | Deep merge (instance overrides specific keys)    |
 | `fieldWrapper` | `React.ComponentType<FieldWrapperProps>` | Instance replaces factory                        |
-| `layout`       | `LayoutSlots`                            | Shallow merge                                    |
+| `layout`       | `LayoutSlots`                            | Shallow merge (except `sections` — deep-merged)  |
 | `classNames`   | `FormClassNames`                         | Shallow merge                                    |
 | `disabled`     | `boolean`                                | OR logic (either `true` → disabled)              |
 | `coercions`    | `CoercionMap`                            | Shallow merge                                    |
@@ -307,11 +307,29 @@ type LayoutSlots = {
   sectionWrapper?: React.ComponentType<{
     children: React.ReactNode
     title: string
+    className?: string
   }>
   submitButton?: React.ComponentType<{ isSubmitting: boolean }>
   arrayRowLayout?: React.ComponentType<ArrayRowLayoutProps>
   /** Shown while async `defaultValues` are resolving. Default: `<p>Loading…</p>` */
   loadingFallback?: React.ReactNode
+  /** Per-section styling / component overrides keyed by section title. */
+  sections?: Record<string, SectionConfig>
+}
+```
+
+#### `SectionConfig`
+
+```ts
+type SectionConfig = {
+  /** CSS class name forwarded to the section wrapper. */
+  className?: string
+  /** Replace the section wrapper component for this section only. */
+  component?: React.ComponentType<{
+    children: React.ReactNode
+    title: string
+    className?: string
+  }>
 }
 ```
 
@@ -633,8 +651,8 @@ The `span` value is set as `--field-span` CSS custom property on each field wrap
     city: { section: 'Address', order: 4 },
   }}
   layout={{
-    sectionWrapper: ({ children, title }) => (
-      <fieldset>
+    sectionWrapper: ({ children, title, className }) => (
+      <fieldset className={className}>
         <legend>{title}</legend>
         {children}
       </fieldset>
@@ -643,6 +661,23 @@ The `span` value is set as `--field-span` CSS custom property on each field wrap
 />
 ```
 
+Use `layout.sections` to style or swap the wrapper for individual sections:
+
+```tsx
+<AutoForm
+  form={myForm}
+  onSubmit={handleSubmit}
+  layout={{
+    sections: {
+      Personal: { className: 'bg-blue-50 p-4 rounded' },
+      Address: { component: AddressCard }, // completely different component
+    },
+  }}
+/>
+```
+
+`className` is forwarded as a prop to the active wrapper (global `sectionWrapper` or the per-section `component`). Factory-level and instance-level `sections` are merged — instance wins on conflicts.
+
 ### Conditional Fields
 
 Show a field only when another field has a specific value. Conditional fields are fully lifecycle-managed:

package/dist/index.d.mts

@@ -347,6 +347,20 @@ type ArrayRowLayoutProps = {
     /** Total number of rows currently in the array. */
     rowCount: number;
 };
+/**
+ * Per-section styling overrides forwarded to the `sectionWrapper` component.
+ * Keys are section titles; values control how that section wrapper is styled.
+ */
+type SectionConfig = {
+    /** CSS class name(s) applied to the section wrapper. */
+    className?: string;
+    /** Replaces the section wrapper component entirely for this section. */
+    component?: React.ComponentType<{
+        children: React.ReactNode;
+        title: string;
+        className?: string;
+    }>;
+};
 /**
  * Optional layout slot overrides for top-level structural components of the
  * form. Provide only the slots you want to replace; omitted slots fall back
@@ -361,6 +375,7 @@ type LayoutSlots = {
     sectionWrapper?: React.ComponentType<{
         children: React.ReactNode;
         title: string;
+        className?: string;
     }>;
     /** Custom submit button component. */
     submitButton?: React.ComponentType<{
@@ -374,6 +389,11 @@ type LayoutSlots = {
      * Defaults to a simple `<p>Loading…</p>` when not provided.
      */
     loadingFallback?: React.ReactNode;
+    /**
+     * Per-section config keyed by section title.
+     * Forwarded to the `sectionWrapper` component as a `className` prop.
+     */
+    sections?: Record<string, SectionConfig>;
 };
 /**
  * The resolved version of `LayoutSlots` used internally, where all slots are
@@ -386,6 +406,7 @@ type ResolvedLayoutSlots = {
     sectionWrapper: React.ComponentType<{
         children: React.ReactNode;
         title: string;
+        className?: string;
     }>;
     submitButton: React.ComponentType<{
         isSubmitting: boolean;

package/dist/index.d.ts

@@ -347,6 +347,20 @@ type ArrayRowLayoutProps = {
     /** Total number of rows currently in the array. */
     rowCount: number;
 };
+/**
+ * Per-section styling overrides forwarded to the `sectionWrapper` component.
+ * Keys are section titles; values control how that section wrapper is styled.
+ */
+type SectionConfig = {
+    /** CSS class name(s) applied to the section wrapper. */
+    className?: string;
+    /** Replaces the section wrapper component entirely for this section. */
+    component?: React.ComponentType<{
+        children: React.ReactNode;
+        title: string;
+        className?: string;
+    }>;
+};
 /**
  * Optional layout slot overrides for top-level structural components of the
  * form. Provide only the slots you want to replace; omitted slots fall back
@@ -361,6 +375,7 @@ type LayoutSlots = {
     sectionWrapper?: React.ComponentType<{
         children: React.ReactNode;
         title: string;
+        className?: string;
     }>;
     /** Custom submit button component. */
     submitButton?: React.ComponentType<{
@@ -374,6 +389,11 @@ type LayoutSlots = {
      * Defaults to a simple `<p>Loading…</p>` when not provided.
      */
     loadingFallback?: React.ReactNode;
+    /**
+     * Per-section config keyed by section title.
+     * Forwarded to the `sectionWrapper` component as a `className` prop.
+     */
+    sections?: Record<string, SectionConfig>;
 };
 /**
  * The resolved version of `LayoutSlots` used internally, where all slots are
@@ -386,6 +406,7 @@ type ResolvedLayoutSlots = {
     sectionWrapper: React.ComponentType<{
         children: React.ReactNode;
         title: string;
+        className?: string;
     }>;
     submitButton: React.ComponentType<{
         isSubmitting: boolean;

package/dist/index.js

@@ -398,9 +398,10 @@ function DefaultFormWrapper({ children }) {
 }
 function DefaultSectionWrapper({
   children,
-  title
+  title,
+  className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className, children: [
     /* @__PURE__ */ jsxRuntime.jsx("legend", { children: title }),
     children
   ] });
@@ -1525,7 +1526,17 @@ function AutoForm(props) {
           if (section.title === null) {
             return /* @__PURE__ */ jsxRuntime.jsx(React3__namespace.Fragment, { children: renderedFields }, "__ungrouped");
           }
-          return /* @__PURE__ */ jsxRuntime.jsx(SectionWrapper, { title: section.title, children: renderedFields }, section.title);
+          const sectionConfig = layout?.sections?.[section.title];
+          const PerSectionWrapper = sectionConfig?.component ?? SectionWrapper;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            PerSectionWrapper,
+            {
+              title: section.title,
+              className: sectionConfig?.className,
+              children: renderedFields
+            },
+            section.title
+          );
         }),
         /* @__PURE__ */ jsxRuntime.jsx(
           SubmitButton,
@@ -1545,7 +1556,11 @@ function createAutoForm(config) {
       [props.components]
     );
     const mergedLayout = React3__namespace.useMemo(
-      () => ({ ...config.layout, ...props.layout }),
+      () => ({
+        ...config.layout,
+        ...props.layout,
+        sections: config.layout?.sections || props.layout?.sections ? { ...config.layout?.sections, ...props.layout?.sections } : void 0
+      }),
       [props.layout]
     );
     const mergedClassNames = React3__namespace.useMemo(