@axenstudio/axen-form 0.1.17 → 0.1.19

package/README.md

@@ -324,7 +324,7 @@ const config = {
 <AxenForm
   config={config}
   components={defaultComponentMap}
-  validationAdapter={yupAdapter}
+  validationAdapter={yupAdapter(yup)}
   onSubmit={handleSubmit}
 />;
 ```
@@ -333,11 +333,12 @@ const config = {
 
 ```tsx
 import { zodAdapter } from '@axenstudio/axen-form/adapters/zod';
+import { z } from 'zod';
 
 <AxenForm
   config={config}
   components={defaultComponentMap}
-  validationAdapter={zodAdapter}
+  validationAdapter={zodAdapter(z)}
   onSubmit={handleSubmit}
 />;
 ```
@@ -964,7 +965,7 @@ Plug in any validation library:
 | `zodAdapter`      | `@axenstudio/axen-form/adapters/zod` | Zod     |
 | `simpleValidator` | Built-in (default)                   | None    |
 
-Both adapters auto-generate schemas from `FieldConfig` (required, min, max, type-aware schema). You can also provide custom `validation` on individual fields.
+Both adapters are factories: call `yupAdapter(yup)` or `zodAdapter(z)` with your installed validation library. They generate type-aware schemas for required fields. Put additional rules such as min/max on the field's custom `validation` schema; the adapters do not infer those rules from display props. The packed-consumer suite verifies Yup 1 and Zod 3.
 
 ---
 
@@ -1138,6 +1139,13 @@ src/
 
 axen-form uses CSS Custom Properties (design tokens) for fine-grained theming.
 
+Published JS injects the compiled styles automatically; no separate CSS import is needed.
+Form resets and the default light color scheme apply inside `AxenForm` (or an explicit
+`data-axen-theme` wrapper). Standalone fields keep their own scoped base styles.
+Importing the package does not reset unrelated application controls or change the
+document's color scheme. The namespaced `--axen-*` token defaults remain available
+on `:root` for standalone layout components.
+
 **Key token categories:**
 
 | Category   | Example Tokens                                                        |
@@ -1173,6 +1181,29 @@ Requires React 19+ and ES2022+ environment.
 
 ---
 
+## Development validation
+
+From `libs/axen-form`, using the tested Linux/WSL Node 24 and pnpm 10 toolchain:
+
+```bash
+pnpm install --frozen-lockfile
+pnpm typecheck
+pnpm test
+pnpm test:consumer
+```
+
+`test:consumer` builds and packs the library, installs the tarball into a fresh
+temporary React application, checks public ESM/CJS/types exports and server
+rendering, then builds that application and runs Chromium desktop/mobile tests.
+It covers required-field validation, submission and reset with the built-in,
+Yup 1 and Zod 3 adapters, CSS isolation, and standalone static named imports.
+It requires npm and network access to install the fixture dependencies and
+Chromium. The evidence directory is printed and retained under the system temp
+directory, including browser failure screenshots. The preview uses local port
+4179 and fails if that port is already occupied.
+
+---
+
 ## License
 
 MIT © [Axen Studio](https://github.com/axenstudio)

package/dist/adapters/yupAdapter.cjs

@@ -1,33 +1,50 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const pathUtils = require("../core/pathUtils.cjs");
 function yupAdapter(yup) {
   return {
     buildSchema(fields) {
       const shape = {};
       for (const field of fields) {
+        let rule;
         if (field.validation) {
-          shape[field.name] = field.validation;
+          rule = field.validation;
         } else if (field.required) {
           const msg = field.requiredMessage ?? `${field.label ?? field.name} is required`;
           switch (field.type) {
             case "checkbox":
             case "switch":
-              shape[field.name] = yup.boolean().oneOf([true], msg).required(msg);
+              rule = yup.boolean().oneOf([true], msg).required(msg);
               break;
             case "number":
             case "currency":
             case "slider":
-              shape[field.name] = yup.number().required(msg).typeError(msg);
+              rule = yup.number().required(msg).typeError(msg);
               break;
             case "autocomplete-multi":
-              shape[field.name] = yup.array().min(1, msg).required(msg);
+              rule = yup.array().min(1, msg).required(msg);
               break;
             default:
-              shape[field.name] = yup.string().required(msg);
+              rule = yup.string().required(msg);
           }
         }
+        if (!rule) continue;
+        const path = field.name.replace(/\[(\d+)\]/g, ".$1").split(".").filter(Boolean);
+        let node = shape;
+        for (const segment of path.slice(0, -1)) {
+          node[segment] ?? (node[segment] = {});
+          node = node[segment];
+        }
+        const leaf = path.at(-1);
+        if (leaf) node[leaf] = rule;
       }
-      return yup.object(shape);
+      const nested = (node) => yup.object(Object.fromEntries(
+        Object.entries(node).map(([key, value]) => [
+          key,
+          value && Object.getPrototypeOf(value) === Object.prototype ? nested(value) : value
+        ])
+      ));
+      return nested(shape);
     },
     async validate(schema, values) {
       const yupSchema = schema;
@@ -39,10 +56,12 @@ function yupAdapter(yup) {
         const errors = {};
         if (validationError.inner) {
           for (const e of validationError.inner) {
-            if (e.path && !errors[e.path]) {
-              errors[e.path] = e.message;
-            }
+            if (e.path && !errors[e.path]) errors[e.path] = e.message;
           }
+        } else if ("path" in validationError && typeof validationError.path === "string") {
+          errors[validationError.path] = validationError.message;
+        } else {
+          throw err;
         }
         return errors;
       }
@@ -50,7 +69,7 @@ function yupAdapter(yup) {
     async validateField(schema, name, value) {
       const yupSchema = schema;
       try {
-        await yupSchema.validateAt(name, { [name]: value });
+        await yupSchema.validateAt(name, pathUtils.set({}, name, value));
         return void 0;
       } catch (err) {
         return err.message;

package/dist/adapters/yupAdapter.d.ts

@@ -5,7 +5,7 @@ import { ValidationAdapter } from '../types';
  *
  * Usage:
  *   import * as yup from 'yup';
- *   import { yupAdapter } from '@axenstudio/axen-form/yupAdapter';
+ *   import { yupAdapter } from '@axenstudio/axen-form/adapters/yup';
  *
  *   const adapter = yupAdapter(yup);
  */
@@ -18,4 +18,3 @@ interface YupLike {
 }
 export declare function yupAdapter(yup: YupLike): ValidationAdapter;
 export {};
-//# sourceMappingURL=yupAdapter.d.ts.map

package/dist/adapters/yupAdapter.js

@@ -1,31 +1,48 @@
+import { set } from "../core/pathUtils.js";
 function yupAdapter(yup) {
   return {
     buildSchema(fields) {
       const shape = {};
       for (const field of fields) {
+        let rule;
         if (field.validation) {
-          shape[field.name] = field.validation;
+          rule = field.validation;
         } else if (field.required) {
           const msg = field.requiredMessage ?? `${field.label ?? field.name} is required`;
           switch (field.type) {
             case "checkbox":
             case "switch":
-              shape[field.name] = yup.boolean().oneOf([true], msg).required(msg);
+              rule = yup.boolean().oneOf([true], msg).required(msg);
               break;
             case "number":
             case "currency":
             case "slider":
-              shape[field.name] = yup.number().required(msg).typeError(msg);
+              rule = yup.number().required(msg).typeError(msg);
               break;
             case "autocomplete-multi":
-              shape[field.name] = yup.array().min(1, msg).required(msg);
+              rule = yup.array().min(1, msg).required(msg);
               break;
             default:
-              shape[field.name] = yup.string().required(msg);
+              rule = yup.string().required(msg);
           }
         }
+        if (!rule) continue;
+        const path = field.name.replace(/\[(\d+)\]/g, ".$1").split(".").filter(Boolean);
+        let node = shape;
+        for (const segment of path.slice(0, -1)) {
+          node[segment] ?? (node[segment] = {});
+          node = node[segment];
+        }
+        const leaf = path.at(-1);
+        if (leaf) node[leaf] = rule;
       }
-      return yup.object(shape);
+      const nested = (node) => yup.object(Object.fromEntries(
+        Object.entries(node).map(([key, value]) => [
+          key,
+          value && Object.getPrototypeOf(value) === Object.prototype ? nested(value) : value
+        ])
+      ));
+      return nested(shape);
     },
     async validate(schema, values) {
       const yupSchema = schema;
@@ -37,10 +54,12 @@ function yupAdapter(yup) {
         const errors = {};
         if (validationError.inner) {
           for (const e of validationError.inner) {
-            if (e.path && !errors[e.path]) {
-              errors[e.path] = e.message;
-            }
+            if (e.path && !errors[e.path]) errors[e.path] = e.message;
           }
+        } else if ("path" in validationError && typeof validationError.path === "string") {
+          errors[validationError.path] = validationError.message;
+        } else {
+          throw err;
         }
         return errors;
       }
@@ -48,7 +67,7 @@ function yupAdapter(yup) {
     async validateField(schema, name, value) {
       const yupSchema = schema;
       try {
-        await yupSchema.validateAt(name, { [name]: value });
+        await yupSchema.validateAt(name, set({}, name, value));
         return void 0;
       } catch (err) {
         return err.message;

package/dist/adapters/zodAdapter.cjs

@@ -5,29 +5,45 @@ function zodAdapter(z) {
     buildSchema(fields) {
       const shape = {};
       for (const field of fields) {
+        let rule;
         if (field.validation) {
-          shape[field.name] = field.validation;
+          rule = field.validation;
         } else if (field.required) {
           const msg = field.requiredMessage ?? `${field.label ?? field.name} is required`;
           switch (field.type) {
             case "checkbox":
             case "switch":
-              shape[field.name] = z.literal(true, { errorMap: () => ({ message: msg }) });
+              rule = z.literal(true, { errorMap: () => ({ message: msg }) });
               break;
             case "number":
             case "currency":
             case "slider":
-              shape[field.name] = z.number({ required_error: msg, invalid_type_error: msg });
+              rule = z.number({ required_error: msg, invalid_type_error: msg });
               break;
             case "autocomplete-multi":
-              shape[field.name] = z.array(z.unknown()).min(1, msg);
+              rule = z.array(z.unknown()).min(1, msg);
               break;
             default:
-              shape[field.name] = z.string({ required_error: msg }).min(1, msg);
+              rule = z.string({ required_error: msg }).min(1, msg);
           }
         }
+        if (!rule) continue;
+        const path = field.name.replace(/\[(\d+)\]/g, ".$1").split(".").filter(Boolean);
+        let node = shape;
+        for (const segment of path.slice(0, -1)) {
+          node[segment] ?? (node[segment] = {});
+          node = node[segment];
+        }
+        const leaf = path.at(-1);
+        if (leaf) node[leaf] = rule;
       }
-      return z.object(shape);
+      const nested = (node) => z.object(Object.fromEntries(
+        Object.entries(node).map(([key, value]) => [
+          key,
+          value && Object.getPrototypeOf(value) === Object.prototype ? nested(value) : value
+        ])
+      ));
+      return nested(shape);
     },
     async validate(schema, values) {
       var _a;
@@ -46,13 +62,16 @@ function zodAdapter(z) {
       return errors;
     },
     async validateField(schema, name, value) {
-      var _a, _b;
+      var _a, _b, _c;
       const zodSchema = schema;
-      const fieldSchema = zodSchema.shape[name];
-      if (!fieldSchema) return void 0;
+      let fieldSchema = zodSchema;
+      for (const segment of name.replace(/\[(\d+)\]/g, ".$1").split(".").filter(Boolean)) {
+        fieldSchema = (_a = fieldSchema.shape) == null ? void 0 : _a[segment];
+        if (!fieldSchema) return void 0;
+      }
       const result = fieldSchema.safeParse(value);
       if (result.success) return void 0;
-      return (_b = (_a = result.error) == null ? void 0 : _a.issues[0]) == null ? void 0 : _b.message;
+      return (_c = (_b = result.error) == null ? void 0 : _b.issues[0]) == null ? void 0 : _c.message;
     }
   };
 }

package/dist/adapters/zodAdapter.d.ts

@@ -5,7 +5,7 @@ import { ValidationAdapter } from '../types';
  *
  * Usage:
  *   import { z } from 'zod';
- *   import { zodAdapter } from '@axenstudio/axen-form/zodAdapter';
+ *   import { zodAdapter } from '@axenstudio/axen-form/adapters/zod';
  *
  *   const adapter = zodAdapter(z);
  */
@@ -19,4 +19,3 @@ interface ZodLike {
 }
 export declare function zodAdapter(z: ZodLike): ValidationAdapter;
 export {};
-//# sourceMappingURL=zodAdapter.d.ts.map

package/dist/adapters/zodAdapter.js

@@ -3,29 +3,45 @@ function zodAdapter(z) {
     buildSchema(fields) {
       const shape = {};
       for (const field of fields) {
+        let rule;
         if (field.validation) {
-          shape[field.name] = field.validation;
+          rule = field.validation;
         } else if (field.required) {
           const msg = field.requiredMessage ?? `${field.label ?? field.name} is required`;
           switch (field.type) {
             case "checkbox":
             case "switch":
-              shape[field.name] = z.literal(true, { errorMap: () => ({ message: msg }) });
+              rule = z.literal(true, { errorMap: () => ({ message: msg }) });
               break;
             case "number":
             case "currency":
             case "slider":
-              shape[field.name] = z.number({ required_error: msg, invalid_type_error: msg });
+              rule = z.number({ required_error: msg, invalid_type_error: msg });
               break;
             case "autocomplete-multi":
-              shape[field.name] = z.array(z.unknown()).min(1, msg);
+              rule = z.array(z.unknown()).min(1, msg);
               break;
             default:
-              shape[field.name] = z.string({ required_error: msg }).min(1, msg);
+              rule = z.string({ required_error: msg }).min(1, msg);
           }
         }
+        if (!rule) continue;
+        const path = field.name.replace(/\[(\d+)\]/g, ".$1").split(".").filter(Boolean);
+        let node = shape;
+        for (const segment of path.slice(0, -1)) {
+          node[segment] ?? (node[segment] = {});
+          node = node[segment];
+        }
+        const leaf = path.at(-1);
+        if (leaf) node[leaf] = rule;
       }
-      return z.object(shape);
+      const nested = (node) => z.object(Object.fromEntries(
+        Object.entries(node).map(([key, value]) => [
+          key,
+          value && Object.getPrototypeOf(value) === Object.prototype ? nested(value) : value
+        ])
+      ));
+      return nested(shape);
     },
     async validate(schema, values) {
       var _a;
@@ -44,13 +60,16 @@ function zodAdapter(z) {
       return errors;
     },
     async validateField(schema, name, value) {
-      var _a, _b;
+      var _a, _b, _c;
       const zodSchema = schema;
-      const fieldSchema = zodSchema.shape[name];
-      if (!fieldSchema) return void 0;
+      let fieldSchema = zodSchema;
+      for (const segment of name.replace(/\[(\d+)\]/g, ".$1").split(".").filter(Boolean)) {
+        fieldSchema = (_a = fieldSchema.shape) == null ? void 0 : _a[segment];
+        if (!fieldSchema) return void 0;
+      }
       const result = fieldSchema.safeParse(value);
       if (result.success) return void 0;
-      return (_b = (_a = result.error) == null ? void 0 : _a.issues[0]) == null ? void 0 : _b.message;
+      return (_c = (_b = result.error) == null ? void 0 : _b.issues[0]) == null ? void 0 : _c.message;
     }
   };
 }

package/dist/core/dateUtils.d.ts

@@ -25,4 +25,3 @@ export declare function toISOTimeString(date: Date): string;
  * Falls back to 'en-US' in non-browser environments (SSR/tests).
  */
 export declare function getDefaultLocale(): string;
-//# sourceMappingURL=dateUtils.d.ts.map