@axenstudio/axen-form 0.1.3 → 0.1.5

package/dist/fields/iconUtils.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const icons = require("./icons.cjs");
+function resolveFieldIcon(icon, fieldType) {
+  if (icon === false) return null;
+  if (icon != null) return icon;
+  return icons.defaultIcons[fieldType] ?? null;
+}
+exports.resolveFieldIcon = resolveFieldIcon;

package/dist/fields/iconUtils.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+/**
+ * Resolve the icon for a field.
+ * - `undefined` → use default icon for the field type
+ * - `false` → no icon
+ * - `ReactNode` → custom icon
+ */
+export declare function resolveFieldIcon(icon: ReactNode | false | undefined, fieldType: string): ReactNode | null;
+//# sourceMappingURL=iconUtils.d.ts.map

package/dist/fields/iconUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconUtils.d.ts","sourceRoot":"","sources":["../../src/fields/iconUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACnC,SAAS,EAAE,MAAM,GAChB,SAAS,GAAG,IAAI,CAIlB"}

package/dist/fields/iconUtils.js

@@ -0,0 +1,9 @@
+import { defaultIcons } from "./icons.js";
+function resolveFieldIcon(icon, fieldType) {
+  if (icon === false) return null;
+  if (icon != null) return icon;
+  return defaultIcons[fieldType] ?? null;
+}
+export {
+  resolveFieldIcon
+};

package/dist/fields/icons.cjs

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const svg = (d) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d })
+  }
+);
+const svgMulti = (...paths) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: paths.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { d }, { key: i }.key))
+  }
+);
+const TextIcon = svgMulti("M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z", "M15 5l4 4");
+const EmailIcon = svgMulti(
+  "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z",
+  "M22 6l-10 7L2 6"
+);
+const LockIcon = svgMulti(
+  "M19 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2z",
+  "M7 11V7a5 5 0 0 1 10 0v4"
+);
+const PhoneIcon = svg(
+  "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
+);
+const NumberIcon = svgMulti("M4 9h16", "M4 15h16", "M10 3L8 21", "M16 3l-2 18");
+const CurrencyIcon = svgMulti("M12 1v22", "M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6");
+const CalendarIcon = svgMulti(
+  "M19 4H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z",
+  "M16 2v4",
+  "M8 2v4",
+  "M3 10h18"
+);
+const ClockIcon = /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 6v6l4 2" })
+    ]
+  }
+);
+const SearchIcon = /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 21l-4.35-4.35" })
+    ]
+  }
+);
+svgMulti(
+  "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71",
+  "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+);
+const defaultIcons = {
+  text: TextIcon,
+  email: EmailIcon,
+  password: LockIcon,
+  phone: PhoneIcon,
+  number: NumberIcon,
+  currency: CurrencyIcon,
+  date: CalendarIcon,
+  time: ClockIcon,
+  datetime: CalendarIcon,
+  autocomplete: SearchIcon,
+  "autocomplete-predict": SearchIcon
+};
+exports.defaultIcons = defaultIcons;

package/dist/fields/icons.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { BuiltInFieldType } from '../types';
+/** Link / URL icon */
+export declare const LinkIcon: import("react/jsx-runtime").JSX.Element;
+export declare const defaultIcons: Partial<Record<BuiltInFieldType, ReactNode>>;
+//# sourceMappingURL=icons.d.ts.map

package/dist/fields/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/fields/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAsHjD,sBAAsB;AACtB,eAAO,MAAM,QAAQ,yCAGpB,CAAC;AAIF,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAYrE,CAAC"}

package/dist/fields/icons.js

@@ -0,0 +1,111 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+const svg = (d) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("path", { d })
+  }
+);
+const svgMulti = (...paths) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: paths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, { key: i }.key))
+  }
+);
+const TextIcon = svgMulti("M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z", "M15 5l4 4");
+const EmailIcon = svgMulti(
+  "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z",
+  "M22 6l-10 7L2 6"
+);
+const LockIcon = svgMulti(
+  "M19 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2z",
+  "M7 11V7a5 5 0 0 1 10 0v4"
+);
+const PhoneIcon = svg(
+  "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
+);
+const NumberIcon = svgMulti("M4 9h16", "M4 15h16", "M10 3L8 21", "M16 3l-2 18");
+const CurrencyIcon = svgMulti("M12 1v22", "M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6");
+const CalendarIcon = svgMulti(
+  "M19 4H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z",
+  "M16 2v4",
+  "M8 2v4",
+  "M3 10h18"
+);
+const ClockIcon = /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 6v6l4 2" })
+    ]
+  }
+);
+const SearchIcon = /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+      /* @__PURE__ */ jsx("path", { d: "M21 21l-4.35-4.35" })
+    ]
+  }
+);
+svgMulti(
+  "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71",
+  "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+);
+const defaultIcons = {
+  text: TextIcon,
+  email: EmailIcon,
+  password: LockIcon,
+  phone: PhoneIcon,
+  number: NumberIcon,
+  currency: CurrencyIcon,
+  date: CalendarIcon,
+  time: ClockIcon,
+  datetime: CalendarIcon,
+  autocomplete: SearchIcon,
+  "autocomplete-predict": SearchIcon
+};
+export {
+  defaultIcons
+};

package/dist/index.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const types = require("./types.cjs");
 const dateUtils = require("./core/dateUtils.cjs");
 const formStore = require("./core/formStore.cjs");
 const numberUtils = require("./core/numberUtils.cjs");
@@ -38,7 +39,11 @@ const Divider = require("./layout/Divider/Divider.cjs");
 const Grid = require("./layout/Grid/Grid.cjs");
 const Spacer = require("./layout/Spacer/Spacer.cjs");
 const Stack = require("./layout/Stack/Stack.cjs");
+const defaultPlaceholders = require("./fields/defaultPlaceholders.cjs");
 const fieldUtils = require("./fields/fieldUtils.cjs");
+const icons = require("./fields/icons.cjs");
+const iconUtils = require("./fields/iconUtils.cjs");
+exports.isFieldGroup = types.isFieldGroup;
 exports.formatDateLocale = dateUtils.formatDateLocale;
 exports.formatDateTimeLocale = dateUtils.formatDateTimeLocale;
 exports.formatTimeLocale = dateUtils.formatTimeLocale;
@@ -93,7 +98,10 @@ exports.Divider = Divider.Divider;
 exports.Grid = Grid.Grid;
 exports.Spacer = Spacer.Spacer;
 exports.Stack = Stack.Stack;
+exports.defaultPlaceholders = defaultPlaceholders.defaultPlaceholders;
 exports.ariaProps = fieldUtils.ariaProps;
 exports.cx = fieldUtils.cx;
 exports.helperId = fieldUtils.helperId;
 exports.labelId = fieldUtils.labelId;
+exports.defaultIcons = icons.defaultIcons;
+exports.resolveFieldIcon = iconUtils.resolveFieldIcon;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-export type { ArrayFieldConfig, ArrayHelpers, AutocompleteOption, AxenFormProps, AxenFormRef, BoxProps, Breakpoint, BuiltInFieldType, DividerProps, FieldComponentProps, FieldConfig, FieldOption, FieldTypeComponentMap, FormApi, FormConfig, GridProps, GridSize, PayloadConfig, SpacerProps, StackProps, ValidationAdapter, } from './types';
+export type { ArrayFieldConfig, ArrayHelpers, AutocompleteOption, AxenFormProps, AxenFormRef, BoxProps, Breakpoint, BuiltInFieldType, DividerProps, FieldComponentProps, FieldConfig, FieldGroupConfig, FieldOption, FieldTypeComponentMap, FormApi, FormConfig, GridProps, GridSize, PayloadConfig, SpacerProps, StackProps, ValidationAdapter, } from './types';
+export { isFieldGroup } from './types';
 export { formatDateLocale, formatDateTimeLocale, formatTimeLocale, getDefaultLocale, toISODateString, toISODateTimeLocalString, toISOTimeString, } from './core/dateUtils';
 export { createFormStore } from './core/formStore';
 export { calculateCursorPosition, formatNumber, getDecimalSeparator, getGroupSeparator, stripNonNumeric, } from './core/numberUtils';
@@ -38,5 +39,8 @@ export { Divider } from './layout/Divider/Divider';
 export { Grid } from './layout/Grid/Grid';
 export { Spacer } from './layout/Spacer/Spacer';
 export { Stack } from './layout/Stack/Stack';
+export { defaultPlaceholders } from './fields/defaultPlaceholders';
 export { ariaProps, cx, helperId, labelId } from './fields/fieldUtils';
+export { defaultIcons } from './fields/icons';
+export { resolveFieldIcon } from './fields/iconUtils';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,YAAY,EACV,gBAAgB,EAChB,YAAY,EACZ,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,mBAAmB,EACnB,WAAW,EACX,WAAW,EACX,qBAAqB,EACrB,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAQ,EACR,aAAa,EACb,WAAW,EACX,UAAU,EACV,iBAAiB,GAClB,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,wBAAwB,EACxB,eAAe,GAChB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EACL,uBAAuB,EACvB,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAChF,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAClE,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAGtD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,8CAA8C,CAAC;AACjF,OAAO,EAAE,sBAAsB,EAAE,MAAM,wDAAwD,CAAC;AAChG,OAAO,EAAE,wBAAwB,EAAE,MAAM,4DAA4D,CAAC;AACtG,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAG7C,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,3 +1,4 @@
+import { isFieldGroup } from "./types.js";
 import { formatDateLocale, formatDateTimeLocale, formatTimeLocale, getDefaultLocale, toISODateString, toISODateTimeLocalString, toISOTimeString } from "./core/dateUtils.js";
 import { createFormStore } from "./core/formStore.js";
 import { calculateCursorPosition, formatNumber, getDecimalSeparator, getGroupSeparator, stripNonNumeric } from "./core/numberUtils.js";
@@ -36,7 +37,10 @@ import { Divider } from "./layout/Divider/Divider.js";
 import { Grid } from "./layout/Grid/Grid.js";
 import { Spacer } from "./layout/Spacer/Spacer.js";
 import { Stack } from "./layout/Stack/Stack.js";
+import { defaultPlaceholders } from "./fields/defaultPlaceholders.js";
 import { ariaProps, cx, helperId, labelId } from "./fields/fieldUtils.js";
+import { defaultIcons } from "./fields/icons.js";
+import { resolveFieldIcon } from "./fields/iconUtils.js";
 export {
   AutocompleteField,
   AutocompleteMultiField,
@@ -71,6 +75,8 @@ export {
   createFormStore,
   cx,
   defaultComponentMap,
+  defaultIcons,
+  defaultPlaceholders,
   formatDateLocale,
   formatDateTimeLocale,
   formatNumber,
@@ -81,10 +87,12 @@ export {
   getGroupSeparator,
   getStrippedFields,
   helperId,
+  isFieldGroup,
   labelId,
   mapPayload,
   pathToString,
   pickFields,
+  resolveFieldIcon,
   set,
   simpleValidator,
   stripNonNumeric,

package/dist/react/AxenForm.cjs

@@ -4,7 +4,14 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const payloadUtils = require("../core/payloadUtils.cjs");
 const defaultComponentMap = require("../fields/defaultComponentMap.cjs");
+const defaultPlaceholders = require("../fields/defaultPlaceholders.cjs");
+;/* empty css                    */
+;/* empty css                     */
+;/* empty css                     */
+const types = require("../types.cjs");
 const FormContext = require("./FormContext.cjs");
+const fieldGroup_module = require("./fieldGroup.module.css.cjs");
+const gridCell_module = require("./gridCell.module.css.cjs");
 const useAxenForm = require("./useAxenForm.cjs");
 const useField = require("./useField.cjs");
 function AxenFormInner(props, ref) {
@@ -19,6 +26,7 @@ function AxenFormInner(props, ref) {
     gap = "1rem",
     className,
     disabled,
+    theme,
     validateOnChange,
     validateOnBlur,
     children
@@ -66,8 +74,50 @@ function AxenFormInner(props, ref) {
     }),
     [columns, gap]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(FormContext.FormContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: formApi.handleSubmit, className, noValidate: true, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: gridStyle, children: config.fields.map((fieldConfig) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(FormContext.FormContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "form",
+    {
+      onSubmit: formApi.handleSubmit,
+      className,
+      noValidate: true,
+      ...theme ? { "data-axen-theme": theme } : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: gridStyle, children: config.fields.map((item) => {
+          if (types.isFieldGroup(item)) {
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              AxenFieldGroup,
+              {
+                group: item,
+                disabled,
+                formApi
+              },
+              item.group
+            );
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            AxenFieldRenderer,
+            {
+              config: item,
+              disabled,
+              formApi
+            },
+            item.name
+          );
+        }) }),
+        children
+      ]
+    }
+  ) });
+}
+const AxenForm = react.forwardRef(AxenFormInner);
+function AxenFieldGroup({
+  group,
+  disabled,
+  formApi
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldGroup_module.default.fieldGroup, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldGroup_module.default.groupLabel, children: group.group }),
+    group.fields.map((fieldConfig) => /* @__PURE__ */ jsxRuntime.jsx(
       AxenFieldRenderer,
       {
         config: fieldConfig,
@@ -75,11 +125,9 @@ function AxenFormInner(props, ref) {
         formApi
       },
       fieldConfig.name
-    )) }),
-    children
-  ] }) });
+    ))
+  ] });
 }
-const AxenForm = react.forwardRef(AxenFormInner);
 function AxenFieldRenderer({
   config,
   disabled,
@@ -95,8 +143,9 @@ function AxenFieldRenderer({
   }
   const showError = touched && !!error;
   const helperText = showError ? error : config.helperText;
-  const colSpanStyle = resolveColSpan(config.colSpan);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: colSpanStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
+  const placeholder = config.placeholder ?? defaultPlaceholders.defaultPlaceholders[config.type];
+  const { className: colClassName, style: colStyle } = resolveColSpan(config.colSpan);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: colClassName, style: colStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
       name: config.name,
@@ -106,12 +155,13 @@ function AxenFieldRenderer({
       error: showError,
       helperText,
       label: config.label,
-      placeholder: config.placeholder,
+      placeholder,
       disabled: disabled || config.disabled,
       readOnly: config.readOnly,
       required: config.required,
       options: config.options,
       form: formApi,
+      icon: config.icon,
       ...config.fieldProps ?? {},
       min: config.min,
       max: config.max,
@@ -129,11 +179,19 @@ function AxenFieldRenderer({
   ) });
 }
 function resolveColSpan(colSpan) {
-  if (!colSpan) return { gridColumn: "span 12" };
+  if (!colSpan) {
+    return { className: gridCell_module.default.cell, style: { "--col-xs": 12 } };
+  }
   if (typeof colSpan === "number") {
-    return { gridColumn: `span ${colSpan}` };
+    return { className: gridCell_module.default.cell, style: { "--col-xs": colSpan } };
   }
-  const xs = colSpan.xs ?? 12;
-  return { gridColumn: `span ${xs}` };
+  const vars = {};
+  if (colSpan.xs != null) vars["--col-xs"] = colSpan.xs;
+  if (colSpan.sm != null) vars["--col-sm"] = colSpan.sm;
+  if (colSpan.md != null) vars["--col-md"] = colSpan.md;
+  if (colSpan.lg != null) vars["--col-lg"] = colSpan.lg;
+  if (colSpan.xl != null) vars["--col-xl"] = colSpan.xl;
+  if (!("--col-xs" in vars)) vars["--col-xs"] = 12;
+  return { className: gridCell_module.default.cell, style: vars };
 }
 exports.AxenForm = AxenForm;

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

@@ -1 +1 @@
-{"version":3,"file":"AxenForm.d.ts","sourceRoot":"","sources":["../../src/react/AxenForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIjF,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAsC,MAAM,UAAU,CAAC;AA+F/F,eAAO,MAAM,QAAQ,EAAgC,CAAC,OAAO,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3F,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;CAAE,KACnF,SAAS,CAAC"}
+{"version":3,"file":"AxenForm.d.ts","sourceRoot":"","sources":["../../src/react/AxenForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,qBAAqB,CAAC;AAC7B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EAIZ,MAAM,UAAU,CAAC;AAoHlB,eAAO,MAAM,QAAQ,EAAgC,CAAC,OAAO,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3F,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;CAAE,KACnF,SAAS,CAAC"}

package/dist/react/AxenForm.js

@@ -2,7 +2,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo, useImperativeHandle } from "react";
 import { mapPayload } from "../core/payloadUtils.js";
 import { defaultComponentMap } from "../fields/defaultComponentMap.js";
+import { defaultPlaceholders } from "../fields/defaultPlaceholders.js";
+/* empty css                  */
+/* empty css                   */
+/* empty css                   */
+import { isFieldGroup } from "../types.js";
 import { FormContext, useFormContext } from "./FormContext.js";
+import groupStyles from "./fieldGroup.module.css.js";
+import gridStyles from "./gridCell.module.css.js";
 import { useAxenForm } from "./useAxenForm.js";
 import { useField } from "./useField.js";
 function AxenFormInner(props, ref) {
@@ -17,6 +24,7 @@ function AxenFormInner(props, ref) {
     gap = "1rem",
     className,
     disabled,
+    theme,
     validateOnChange,
     validateOnBlur,
     children
@@ -64,8 +72,50 @@ function AxenFormInner(props, ref) {
     }),
     [columns, gap]
   );
-  return /* @__PURE__ */ jsx(FormContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs("form", { onSubmit: formApi.handleSubmit, className, noValidate: true, children: [
-    /* @__PURE__ */ jsx("div", { style: gridStyle, children: config.fields.map((fieldConfig) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: formApi.handleSubmit,
+      className,
+      noValidate: true,
+      ...theme ? { "data-axen-theme": theme } : void 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { style: gridStyle, children: config.fields.map((item) => {
+          if (isFieldGroup(item)) {
+            return /* @__PURE__ */ jsx(
+              AxenFieldGroup,
+              {
+                group: item,
+                disabled,
+                formApi
+              },
+              item.group
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            AxenFieldRenderer,
+            {
+              config: item,
+              disabled,
+              formApi
+            },
+            item.name
+          );
+        }) }),
+        children
+      ]
+    }
+  ) });
+}
+const AxenForm = forwardRef(AxenFormInner);
+function AxenFieldGroup({
+  group,
+  disabled,
+  formApi
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: groupStyles.fieldGroup, children: [
+    /* @__PURE__ */ jsx("div", { className: groupStyles.groupLabel, children: group.group }),
+    group.fields.map((fieldConfig) => /* @__PURE__ */ jsx(
       AxenFieldRenderer,
       {
         config: fieldConfig,
@@ -73,11 +123,9 @@ function AxenFormInner(props, ref) {
         formApi
       },
       fieldConfig.name
-    )) }),
-    children
-  ] }) });
+    ))
+  ] });
 }
-const AxenForm = forwardRef(AxenFormInner);
 function AxenFieldRenderer({
   config,
   disabled,
@@ -93,8 +141,9 @@ function AxenFieldRenderer({
   }
   const showError = touched && !!error;
   const helperText = showError ? error : config.helperText;
-  const colSpanStyle = resolveColSpan(config.colSpan);
-  return /* @__PURE__ */ jsx("div", { style: colSpanStyle, children: /* @__PURE__ */ jsx(
+  const placeholder = config.placeholder ?? defaultPlaceholders[config.type];
+  const { className: colClassName, style: colStyle } = resolveColSpan(config.colSpan);
+  return /* @__PURE__ */ jsx("div", { className: colClassName, style: colStyle, children: /* @__PURE__ */ jsx(
     Component,
     {
       name: config.name,
@@ -104,12 +153,13 @@ function AxenFieldRenderer({
       error: showError,
       helperText,
       label: config.label,
-      placeholder: config.placeholder,
+      placeholder,
       disabled: disabled || config.disabled,
       readOnly: config.readOnly,
       required: config.required,
       options: config.options,
       form: formApi,
+      icon: config.icon,
       ...config.fieldProps ?? {},
       min: config.min,
       max: config.max,
@@ -127,12 +177,20 @@ function AxenFieldRenderer({
   ) });
 }
 function resolveColSpan(colSpan) {
-  if (!colSpan) return { gridColumn: "span 12" };
+  if (!colSpan) {
+    return { className: gridStyles.cell, style: { "--col-xs": 12 } };
+  }
   if (typeof colSpan === "number") {
-    return { gridColumn: `span ${colSpan}` };
+    return { className: gridStyles.cell, style: { "--col-xs": colSpan } };
   }
-  const xs = colSpan.xs ?? 12;
-  return { gridColumn: `span ${xs}` };
+  const vars = {};
+  if (colSpan.xs != null) vars["--col-xs"] = colSpan.xs;
+  if (colSpan.sm != null) vars["--col-sm"] = colSpan.sm;
+  if (colSpan.md != null) vars["--col-md"] = colSpan.md;
+  if (colSpan.lg != null) vars["--col-lg"] = colSpan.lg;
+  if (colSpan.xl != null) vars["--col-xl"] = colSpan.xl;
+  if (!("--col-xs" in vars)) vars["--col-xs"] = 12;
+  return { className: gridStyles.cell, style: vars };
 }
 export {
   AxenForm