@axenstudio/axen-form 0.1.1

package/dist/layout/Grid/Grid.cjs

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const fieldUtils = require("../../fields/fieldUtils.cjs");
+const Grid_module = require("./Grid.module.css.cjs");
+function toGapValue(value, fallback) {
+  if (value == null) return fallback;
+  return typeof value === "number" ? `${value * 8}px` : value;
+}
+function buildContainerStyle(columns, spacing, rowSpacing, columnSpacing) {
+  const gap = toGapValue(spacing);
+  const rGap = toGapValue(rowSpacing, gap);
+  const cGap = toGapValue(columnSpacing, gap);
+  const s = {
+    display: "grid",
+    gridTemplateColumns: `repeat(${columns}, 1fr)`
+  };
+  if (rGap && cGap) {
+    s.gap = `${rGap} ${cGap}`;
+  } else if (gap) {
+    s.gap = gap;
+  }
+  return s;
+}
+function buildItemStyle(size, xs, columns, offset) {
+  const s = {};
+  const resolved = size ?? xs ?? columns;
+  if (resolved === "auto") {
+    s.gridColumn = "auto";
+  } else if (resolved === "grow") {
+    s.gridColumn = "1 / -1";
+    s.flex = "1 1 0";
+  } else if (typeof resolved === "number") {
+    s.gridColumn = `span ${resolved}`;
+  }
+  if (offset != null) {
+    const off = typeof offset === "number" ? offset : offset.xs ?? 0;
+    if (off > 0) {
+      s.gridColumnStart = off + 1;
+    }
+  }
+  return s;
+}
+function Grid({
+  children,
+  container,
+  columns = 12,
+  spacing,
+  rowSpacing,
+  columnSpacing,
+  size,
+  xs,
+  sm,
+  md,
+  lg,
+  xl,
+  offset,
+  className,
+  style: userStyle
+}) {
+  const style = react.useMemo(() => {
+    const base = container ? buildContainerStyle(columns, spacing, rowSpacing, columnSpacing) : buildItemStyle(size, xs, columns, offset);
+    return { ...base, ...userStyle };
+  }, [
+    container,
+    columns,
+    spacing,
+    rowSpacing,
+    columnSpacing,
+    size,
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    offset,
+    userStyle
+  ]);
+  const responsiveClass = react.useMemo(() => {
+    if (container) return Grid_module.default.container;
+    const classes = [Grid_module.default.item];
+    if (sm != null) classes.push(Grid_module.default[`sm`]);
+    if (md != null) classes.push(Grid_module.default[`md`]);
+    if (lg != null) classes.push(Grid_module.default[`lg`]);
+    if (xl != null) classes.push(Grid_module.default[`xl`]);
+    return classes.filter(Boolean).join(" ");
+  }, [container, sm, md, lg, xl]);
+  const cssVars = react.useMemo(() => {
+    const vars = {};
+    if (sm != null && typeof sm === "number") vars["--axen-grid-sm"] = `${sm}`;
+    if (md != null && typeof md === "number") vars["--axen-grid-md"] = `${md}`;
+    if (lg != null && typeof lg === "number") vars["--axen-grid-lg"] = `${lg}`;
+    if (xl != null && typeof xl === "number") vars["--axen-grid-xl"] = `${xl}`;
+    return vars;
+  }, [sm, md, lg, xl]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: fieldUtils.cx(responsiveClass, className),
+      style: { ...style, ...cssVars },
+      children
+    }
+  );
+}
+exports.Grid = Grid;

package/dist/layout/Grid/Grid.d.ts

@@ -0,0 +1,7 @@
+import { GridProps } from '../../types';
+/**
+ * CSS Grid-based layout component (MUI v7 Grid API).
+ * 12-column responsive grid system.
+ */
+export declare function Grid({ children, container, columns, spacing, rowSpacing, columnSpacing, size, xs, sm, md, lg, xl, offset, className, style: userStyle, }: Readonly<GridProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Grid.d.ts.map

package/dist/layout/Grid/Grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/layout/Grid/Grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AA4D7C;;;GAGG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,OAAY,EACZ,OAAO,EACP,UAAU,EACV,aAAa,EACb,IAAI,EACJ,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,MAAM,EACN,SAAS,EACT,KAAK,EAAE,SAAS,GACjB,EAAE,QAAQ,CAAC,SAAS,CAAC,2CAqDrB"}

package/dist/layout/Grid/Grid.js

@@ -0,0 +1,106 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { cx } from "../../fields/fieldUtils.js";
+import styles from "./Grid.module.css.js";
+function toGapValue(value, fallback) {
+  if (value == null) return fallback;
+  return typeof value === "number" ? `${value * 8}px` : value;
+}
+function buildContainerStyle(columns, spacing, rowSpacing, columnSpacing) {
+  const gap = toGapValue(spacing);
+  const rGap = toGapValue(rowSpacing, gap);
+  const cGap = toGapValue(columnSpacing, gap);
+  const s = {
+    display: "grid",
+    gridTemplateColumns: `repeat(${columns}, 1fr)`
+  };
+  if (rGap && cGap) {
+    s.gap = `${rGap} ${cGap}`;
+  } else if (gap) {
+    s.gap = gap;
+  }
+  return s;
+}
+function buildItemStyle(size, xs, columns, offset) {
+  const s = {};
+  const resolved = size ?? xs ?? columns;
+  if (resolved === "auto") {
+    s.gridColumn = "auto";
+  } else if (resolved === "grow") {
+    s.gridColumn = "1 / -1";
+    s.flex = "1 1 0";
+  } else if (typeof resolved === "number") {
+    s.gridColumn = `span ${resolved}`;
+  }
+  if (offset != null) {
+    const off = typeof offset === "number" ? offset : offset.xs ?? 0;
+    if (off > 0) {
+      s.gridColumnStart = off + 1;
+    }
+  }
+  return s;
+}
+function Grid({
+  children,
+  container,
+  columns = 12,
+  spacing,
+  rowSpacing,
+  columnSpacing,
+  size,
+  xs,
+  sm,
+  md,
+  lg,
+  xl,
+  offset,
+  className,
+  style: userStyle
+}) {
+  const style = useMemo(() => {
+    const base = container ? buildContainerStyle(columns, spacing, rowSpacing, columnSpacing) : buildItemStyle(size, xs, columns, offset);
+    return { ...base, ...userStyle };
+  }, [
+    container,
+    columns,
+    spacing,
+    rowSpacing,
+    columnSpacing,
+    size,
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    offset,
+    userStyle
+  ]);
+  const responsiveClass = useMemo(() => {
+    if (container) return styles.container;
+    const classes = [styles.item];
+    if (sm != null) classes.push(styles[`sm`]);
+    if (md != null) classes.push(styles[`md`]);
+    if (lg != null) classes.push(styles[`lg`]);
+    if (xl != null) classes.push(styles[`xl`]);
+    return classes.filter(Boolean).join(" ");
+  }, [container, sm, md, lg, xl]);
+  const cssVars = useMemo(() => {
+    const vars = {};
+    if (sm != null && typeof sm === "number") vars["--axen-grid-sm"] = `${sm}`;
+    if (md != null && typeof md === "number") vars["--axen-grid-md"] = `${md}`;
+    if (lg != null && typeof lg === "number") vars["--axen-grid-lg"] = `${lg}`;
+    if (xl != null && typeof xl === "number") vars["--axen-grid-xl"] = `${xl}`;
+    return vars;
+  }, [sm, md, lg, xl]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(responsiveClass, className),
+      style: { ...style, ...cssVars },
+      children
+    }
+  );
+}
+export {
+  Grid
+};

package/dist/layout/Grid/Grid.module.css

@@ -0,0 +1,43 @@
+/* ═══════════════════════════════════════════════
+   Grid Layout — Responsive CSS Grid
+   12-column mobile-first system
+   ═══════════════════════════════════════════════ */
+
+._container_1asbx_6 {
+  display: grid;
+  width: 100%;
+}
+
+._item_1asbx_11 {
+  min-width: 0; /* Prevent overflow */
+}
+
+/* ── Responsive Breakpoints ──────────────────── */
+
+/* sm ≥ 600px */
+@media (min-width: 600px) {
+  ._sm_1asbx_19 {
+    grid-column: span var(--axen-grid-sm, 12);
+  }
+}
+
+/* md ≥ 900px */
+@media (min-width: 900px) {
+  ._md_1asbx_26 {
+    grid-column: span var(--axen-grid-md, 12);
+  }
+}
+
+/* lg ≥ 1200px */
+@media (min-width: 1200px) {
+  ._lg_1asbx_33 {
+    grid-column: span var(--axen-grid-lg, 12);
+  }
+}
+
+/* xl ≥ 1536px */
+@media (min-width: 1536px) {
+  ._xl_1asbx_40 {
+    grid-column: span var(--axen-grid-xl, 12);
+  }
+}

package/dist/layout/Grid/Grid.module.css.cjs

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const container = "_container_1asbx_6";
+const item = "_item_1asbx_11";
+const sm = "_sm_1asbx_19";
+const md = "_md_1asbx_26";
+const lg = "_lg_1asbx_33";
+const xl = "_xl_1asbx_40";
+const styles = {
+  container,
+  item,
+  sm,
+  md,
+  lg,
+  xl
+};
+exports.container = container;
+exports.default = styles;
+exports.item = item;
+exports.lg = lg;
+exports.md = md;
+exports.sm = sm;
+exports.xl = xl;

package/dist/layout/Grid/Grid.module.css.js

@@ -0,0 +1,23 @@
+const container = "_container_1asbx_6";
+const item = "_item_1asbx_11";
+const sm = "_sm_1asbx_19";
+const md = "_md_1asbx_26";
+const lg = "_lg_1asbx_33";
+const xl = "_xl_1asbx_40";
+const styles = {
+  container,
+  item,
+  sm,
+  md,
+  lg,
+  xl
+};
+export {
+  container,
+  styles as default,
+  item,
+  lg,
+  md,
+  sm,
+  xl
+};

package/dist/layout/Spacer/Spacer.cjs

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const SPACING_UNIT = 8;
+function Spacer({
+  x = 0,
+  y = 0,
+  basis = 0,
+  grow = false,
+  className,
+  style: userStyle
+}) {
+  const style = react.useMemo(() => {
+    const s = {
+      flexShrink: 0
+    };
+    if (x) s.width = `${x * SPACING_UNIT}px`;
+    if (y) s.height = `${y * SPACING_UNIT}px`;
+    if (basis) s.flexBasis = `${basis * SPACING_UNIT}px`;
+    if (grow) {
+      s.flexGrow = 1;
+    } else {
+      s.flexGrow = 0;
+    }
+    return { ...s, ...userStyle };
+  }, [x, y, basis, grow, userStyle]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style, "aria-hidden": "true" });
+}
+exports.Spacer = Spacer;

package/dist/layout/Spacer/Spacer.d.ts

@@ -0,0 +1,21 @@
+import { SpacerProps } from '../../types';
+/**
+ * Invisible spacing element — creates horizontal, vertical, or flex-basis gaps.
+ *
+ * Uses the same 8px spacing unit as Box/Grid/Stack.
+ *
+ * @example
+ * // Horizontal gap
+ * <Spacer x={2} />        // 16px wide
+ *
+ * // Vertical gap
+ * <Spacer y={3} />        // 24px tall
+ *
+ * // Flex spacer (push items apart)
+ * <Spacer grow />
+ *
+ * // Flex basis (fixed space in flex container)
+ * <Spacer basis={4} />    // 32px flex-basis
+ */
+export declare function Spacer({ x, y, basis, grow, className, style: userStyle, }: Readonly<SpacerProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Spacer.d.ts.map

package/dist/layout/Spacer/Spacer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.d.ts","sourceRoot":"","sources":["../../../src/layout/Spacer/Spacer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI/C;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,MAAM,CAAC,EACrB,CAAK,EACL,CAAK,EACL,KAAS,EACT,IAAY,EACZ,SAAS,EACT,KAAK,EAAE,SAAS,GACjB,EAAE,QAAQ,CAAC,WAAW,CAAC,2CAmBvB"}

package/dist/layout/Spacer/Spacer.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+const SPACING_UNIT = 8;
+function Spacer({
+  x = 0,
+  y = 0,
+  basis = 0,
+  grow = false,
+  className,
+  style: userStyle
+}) {
+  const style = useMemo(() => {
+    const s = {
+      flexShrink: 0
+    };
+    if (x) s.width = `${x * SPACING_UNIT}px`;
+    if (y) s.height = `${y * SPACING_UNIT}px`;
+    if (basis) s.flexBasis = `${basis * SPACING_UNIT}px`;
+    if (grow) {
+      s.flexGrow = 1;
+    } else {
+      s.flexGrow = 0;
+    }
+    return { ...s, ...userStyle };
+  }, [x, y, basis, grow, userStyle]);
+  return /* @__PURE__ */ jsx("div", { className, style, "aria-hidden": "true" });
+}
+export {
+  Spacer
+};

package/dist/layout/Stack/Stack.cjs

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const fieldUtils = require("../../fields/fieldUtils.cjs");
+const Stack_module = require("./Stack.module.css.cjs");
+const SPACING_UNIT = 8;
+function Stack({
+  children,
+  direction = "column",
+  spacing = 2,
+  alignItems,
+  justifyContent,
+  divider,
+  className,
+  style: userStyle
+}) {
+  const style = react.useMemo(() => {
+    const s = {
+      display: "flex",
+      flexDirection: direction
+    };
+    if (alignItems) s.alignItems = alignItems;
+    if (justifyContent) s.justifyContent = justifyContent;
+    if (!divider) {
+      s.gap = typeof spacing === "number" ? `${spacing * SPACING_UNIT}px` : spacing;
+    }
+    return { ...s, ...userStyle };
+  }, [direction, spacing, alignItems, justifyContent, divider, userStyle]);
+  if (divider) {
+    const items = react.Children.toArray(children).filter(Boolean);
+    const gapValue = typeof spacing === "number" ? `${spacing * SPACING_UNIT}px` : spacing;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldUtils.cx(Stack_module.default.stack, className), style, children: items.map((child, index) => {
+      const itemKey = react.isValidElement(child) ? child.key : `divider-${String(index)}`;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        child,
+        items.indexOf(child) < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              [direction === "column" ? "marginTop" : "marginLeft"]: gapValue,
+              [direction === "column" ? "marginBottom" : "marginRight"]: gapValue
+            },
+            children: divider
+          }
+        )
+      ] }, itemKey);
+    }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldUtils.cx(Stack_module.default.stack, className), style, children });
+}
+exports.Stack = Stack;

package/dist/layout/Stack/Stack.d.ts

@@ -0,0 +1,7 @@
+import { StackProps } from '../../types';
+/**
+ * Stack component — arranges children in a row or column with spacing.
+ * Optionally inserts a divider between items.
+ */
+export declare function Stack({ children, direction, spacing, alignItems, justifyContent, divider, className, style: userStyle, }: Readonly<StackProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Stack.d.ts.map

package/dist/layout/Stack/Stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/layout/Stack/Stack.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK9C;;;GAGG;AACH,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,SAAoB,EACpB,OAAW,EACX,UAAU,EACV,cAAc,EACd,OAAO,EACP,SAAS,EACT,KAAK,EAAE,SAAS,GACjB,EAAE,QAAQ,CAAC,UAAU,CAAC,2CA+CtB"}

package/dist/layout/Stack/Stack.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, Children, isValidElement } from "react";
+import { cx } from "../../fields/fieldUtils.js";
+import styles from "./Stack.module.css.js";
+const SPACING_UNIT = 8;
+function Stack({
+  children,
+  direction = "column",
+  spacing = 2,
+  alignItems,
+  justifyContent,
+  divider,
+  className,
+  style: userStyle
+}) {
+  const style = useMemo(() => {
+    const s = {
+      display: "flex",
+      flexDirection: direction
+    };
+    if (alignItems) s.alignItems = alignItems;
+    if (justifyContent) s.justifyContent = justifyContent;
+    if (!divider) {
+      s.gap = typeof spacing === "number" ? `${spacing * SPACING_UNIT}px` : spacing;
+    }
+    return { ...s, ...userStyle };
+  }, [direction, spacing, alignItems, justifyContent, divider, userStyle]);
+  if (divider) {
+    const items = Children.toArray(children).filter(Boolean);
+    const gapValue = typeof spacing === "number" ? `${spacing * SPACING_UNIT}px` : spacing;
+    return /* @__PURE__ */ jsx("div", { className: cx(styles.stack, className), style, children: items.map((child, index) => {
+      const itemKey = isValidElement(child) ? child.key : `divider-${String(index)}`;
+      return /* @__PURE__ */ jsxs("div", { children: [
+        child,
+        items.indexOf(child) < items.length - 1 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              [direction === "column" ? "marginTop" : "marginLeft"]: gapValue,
+              [direction === "column" ? "marginBottom" : "marginRight"]: gapValue
+            },
+            children: divider
+          }
+        )
+      ] }, itemKey);
+    }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cx(styles.stack, className), style, children });
+}
+export {
+  Stack
+};

package/dist/layout/Stack/Stack.module.css

@@ -0,0 +1,3 @@
+._stack_1m70l_1 {
+  min-width: 0;
+}

package/dist/layout/Stack/Stack.module.css.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const stack = "_stack_1m70l_1";
+const styles = {
+  stack
+};
+exports.default = styles;
+exports.stack = stack;

package/dist/layout/Stack/Stack.module.css.js

@@ -0,0 +1,8 @@
+const stack = "_stack_1m70l_1";
+const styles = {
+  stack
+};
+export {
+  styles as default,
+  stack
+};

package/dist/layout/index.d.ts

@@ -0,0 +1,6 @@
+export { Box } from './Box/Box';
+export { Divider } from './Divider/Divider';
+export { Grid } from './Grid/Grid';
+export { Spacer } from './Spacer/Spacer';
+export { Stack } from './Stack/Stack';
+//# sourceMappingURL=index.d.ts.map

package/dist/layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC"}

package/dist/react/AxenArrayField.cjs

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const FormContext = require("./FormContext.cjs");
+const useFieldArray = require("./useFieldArray.cjs");
+const useField = require("./useField.cjs");
+function AxenArrayField({ name, config, children }) {
+  const { fields: items, push, remove, swap, insert, replace, move, length } = useFieldArray.useFieldArray(name);
+  const { components, disabled } = FormContext.useFormContext();
+  const helpers = { push, remove, swap, insert, replace, move, length };
+  const renderField = (index) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-axen-array-item": index, children: config.fields.map((fieldConfig) => {
+      const fieldName = `${name}.${index}.${fieldConfig.name}`;
+      const Component = fieldConfig.component ?? components[fieldConfig.type];
+      if (!Component) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ArrayItemField,
+        {
+          name: fieldName,
+          config: fieldConfig,
+          Component,
+          disabled: disabled || config.disabled
+        },
+        fieldName
+      );
+    }) }, index);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children({ fields: items, helpers, renderField }) });
+}
+function ArrayItemField({
+  name,
+  config,
+  Component,
+  disabled
+}) {
+  const { store } = FormContext.useFormContext();
+  const { value, error, touched, onChange, onBlur } = useField.useField(name);
+  const showError = touched && !!error;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      name,
+      value,
+      onChange,
+      onBlur,
+      error: showError,
+      helperText: showError ? error : config.helperText,
+      label: config.label,
+      placeholder: config.placeholder,
+      disabled: disabled || config.disabled,
+      readOnly: config.readOnly,
+      required: config.required,
+      options: config.options,
+      form: {
+        values: store.getState().values,
+        errors: store.getState().errors,
+        touched: store.getState().touched,
+        dirty: store.getState().dirty,
+        isSubmitting: store.getState().isSubmitting,
+        isValid: Object.keys(store.getState().errors).length === 0,
+        submitCount: store.getState().submitCount,
+        setFieldValue: store.setFieldValue,
+        setFieldTouched: store.setFieldTouched,
+        setFieldError: store.setFieldError,
+        setValues: store.setValues,
+        setErrors: store.setErrors,
+        handleChange: onChange,
+        handleBlur: onBlur,
+        handleSubmit: () => {
+          void store.submitForm();
+        },
+        resetForm: store.resetForm,
+        submitForm: () => store.submitForm(),
+        validateForm: store.validateForm,
+        validateField: store.validateField
+      }
+    }
+  );
+}
+exports.AxenArrayField = AxenArrayField;

package/dist/react/AxenArrayField.d.ts

@@ -0,0 +1,15 @@
+import { ArrayFieldConfig, ArrayHelpers } from '../types';
+export interface AxenArrayFieldProps {
+    name: string;
+    config: ArrayFieldConfig;
+    children: (props: {
+        fields: unknown[];
+        helpers: ArrayHelpers;
+        renderField: (index: number) => React.ReactNode;
+    }) => React.ReactNode;
+}
+/**
+ * Array field component for repeating field groups.
+ */
+export declare function AxenArrayField({ name, config, children }: Readonly<AxenArrayFieldProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AxenArrayField.d.ts.map

package/dist/react/AxenArrayField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AxenArrayField.d.ts","sourceRoot":"","sources":["../../src/react/AxenArrayField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAoC,MAAM,UAAU,CAAC;AAIjG,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,gBAAgB,CAAC;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,MAAM,EAAE,OAAO,EAAE,CAAC;QAClB,OAAO,EAAE,YAAY,CAAC;QACtB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;KACjD,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CA+BvF"}