dynamic-mui 2.2.0 → 2.3.1

package/README.md

@@ -94,10 +94,74 @@ api.current?.validate();           // boolean — runs validation, shows errors
 api.current?.getErrors();          // array of { id, rule, message }
 api.current?.reset();              // clear values
 api.current?.submit();             // trigger the submit flow
+
+// Dirty tracking
+api.current?.isDirty();            // changed since it loaded?
+api.current?.getInitialValues();   // the starting snapshot
+api.current?.resetToInitial();     // undo all edits
+api.current?.markPristine();       // adopt current values as the new baseline (after save)
+
+// Print & PDF (see below)
+api.current?.print({ title: 'Report' });
+await api.current?.exportPdf({ title: 'Report', filename: 'report.pdf' });
+```
+
+Set `warnOnUnsavedChanges` to prompt the user before they leave the page while
+the form is dirty.
+
+---
+
+## Review, read-only, print & PDF
+
+```tsx
+// Read-only: full layout, every control disabled
+<FormGenerator guid="f" data={schema} patch={values} readOnly />
+
+// Review: a clean label → value summary instead of inputs
+<FormGenerator guid="f" data={schema} patch={values} reviewMode />
+```
+
+The review summary resolves option labels (not raw values), Yes/No for booleans,
+joins multi-values, skips hidden and display-only fields, and follows matching
+subforms — ideal for a "confirm before submit" step.
+
+`print()` opens the browser dialog for that same summary (users can Save as PDF)
+— **no dependencies**. `exportPdf()` downloads a real PDF and needs the optional
+`pdfmake` package (lazy-loaded, never bundled into the core):
+
+```bash
+npm i pdfmake   # only if you use exportPdf()
 ```
 
 ---
 
+## Submit bar
+
+Render a visible (optionally sticky) submit button, fully configurable:
+
+```tsx
+<FormGenerator
+  guid="wo" data={schema}
+  stickySubmit                       // pins to the bottom of the scroll area
+  cancelLabel="Cancel" onCancel={...}
+  submitButton={{
+    label: 'Dispatch work order',
+    color: 'success',                // MUI palette name or any CSS color
+    gradient: ['#f59e0b', '#ef4444'],// optional gradient fill (overrides color)
+    icon: 'engineering',             // leading Material icon; also `endIcon`
+    variant: 'contained',            // contained | outlined | text
+    loadingLabel: 'Dispatching…',
+  }}
+  onSubmit={async (values, errors) => { if (!errors.length) await save(values); }}
+/>
+```
+
+If `onSubmit` returns a Promise, the button shows a **spinner automatically**
+until it settles (or drive it yourself with `submitButton.loading`).
+`submitLabel="Save"` is a shortcut for `submitButton={{ label: 'Save' }}`.
+
+---
+
 ## Dynamic rule engine
 
 Add these keys to any field to make the form reactive. All conditions run
@@ -190,16 +254,89 @@ const schema = defineForm([
 
 ---
 
+## Extensibility & DX
+
+- **Custom controls** — register your own field types; they get the same
+  `ControlProps` as built-ins and participate fully in the engine:
+  ```ts
+  import { registerControl } from 'dynamic-mui';
+  registerControl('color-swatch', ({ attributes, onChange }) => /* your component */);
+  // then: { type: 'color-swatch', props: { id: 'brand' } }
+  ```
+- **Zod / Yup validation** — validate the whole form against an existing schema
+  (`zod`/`yup` are never bundled — the resolvers duck-type the object you pass):
+  ```ts
+  import { zodResolver } from 'dynamic-mui';
+  <FormGenerator data={fields} resolver={zodResolver(z.object({ email: z.string().email() }))} />
+  ```
+- **Async / remote validation** — per-field server checks (debounced, race-safe,
+  gates submit): `asyncValidators={{ username: async (v) => taken(v) ? 'Taken' : null }}`.
+- **Typed values** — `FormApi<T>`, `FormData<T>(guid)`, `useForm<T>(guid)` give
+  autocompleted, type-checked values.
+
+### Headless engine — `useFormEngine`
+
+The whole dynamic engine (rules, validation, dynamic options, subforms) with **no
+UI** — render your own components:
+
+```tsx
+import { useFormEngine, zodResolver } from 'dynamic-mui';
+
+function MyForm() {
+  const form = useFormEngine(schema, { resolver: zodResolver(mySchema) });
+  return (
+    <form onSubmit={(e) => { e.preventDefault(); form.submit(save); }}>
+      {form.visibleFields.map((f) => (
+        <MyInput key={f.id} value={f.value} required={f.required}
+          disabled={f.disabled} options={f.options} error={f.error}
+          onChange={(v) => form.setValue(f.id, v)} />
+      ))}
+    </form>
+  );
+}
+```
+
+Exposes `values`, `errors`, `fields`/`visibleFields`, `setValue`/`setValues`,
+`validate()`, `submit(onValid)`, `isValid`, `isDirty`, `reset()`, `getFieldState(id)`.
+
+### Schema linter — `validateSchema`
+
+Catch config mistakes before runtime (great in a test or build step):
+
+```ts
+import { validateSchema } from 'dynamic-mui';
+
+const issues = validateSchema(mySchema); // SchemaIssue[]; [] = clean
+// flags duplicate ids, dependsOn → missing field, orphan optionsMap,
+// rule/cross-field references to unknown fields, subform conditions
+// that aren't real options, …
+if (issues.some((i) => i.level === 'error')) throw new Error('Bad form schema');
+```
+
+---
+
 ## Internationalisation
 
+Override the built-in strings:
+
 ```tsx
-<FormGenerator
-  guid="fr"
-  data={schema}
-  messages={{ required: 'Champ obligatoire', errorSummary: '{n} champ(s) à corriger' }}
-/>
+<FormGenerator guid="fr" data={schema}
+  messages={{ required: 'Champ obligatoire', errorSummary: '{n} champ(s) à corriger' }} />
 ```
 
+Or plug in **any** i18n system with a `translate` function — it localizes every
+user-facing string (labels, placeholders, helper text, option labels, validation
+messages, typography, submit/cancel labels), keeping the schema in one language:
+
+```tsx
+// works with i18next, react-intl, or a plain dictionary
+const t = (s) => dictionary[s] ?? s;
+
+<FormGenerator guid="form" data={schema} translate={t} />
+```
+
+Switching the language re-renders the form translated while preserving values.
+
 ---
 
 ## Controls

package/dist/accordion-Bf0VwGuE.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),r=require("@mui/material"),a=require("./index-eJceCjKS.js"),l=require("./v4-CqdK_b8Y.js");function x({attributes:n={},patch:o,onChange:c}){const{MuiAttributes:i={},label:t="Accordion",subFields:s=[]}=n,d=u.useMemo(()=>l.v4(),[]);return e.jsxs(r.Accordion,{...i,children:[e.jsx(r.AccordionSummary,{expandIcon:e.jsx(r.Icon,{children:"expand_more"}),children:e.jsx(r.Typography,{children:t})}),e.jsx(r.AccordionDetails,{children:e.jsx(a.FormGenerator,{guid:d,data:s,patch:o,onChange:c})})]})}exports.default=x;

package/dist/accordion-DEd2a2Ps.mjs

@@ -0,0 +1,23 @@
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import m from "react";
+import { Accordion as s, AccordionSummary as l, Typography as p, Icon as u, AccordionDetails as f } from "@mui/material";
+import { F as A } from "./index-Bh6BLrzq.mjs";
+import { v as h } from "./v4-BysszJq8.mjs";
+function j({ attributes: r = {}, patch: c, onChange: i }) {
+  const { MuiAttributes: n = {}, label: e = "Accordion", subFields: t = [] } = r, d = m.useMemo(() => h(), []);
+  return /* @__PURE__ */ a(s, { ...n, children: [
+    /* @__PURE__ */ o(l, { expandIcon: /* @__PURE__ */ o(u, { children: "expand_more" }), children: /* @__PURE__ */ o(p, { children: e }) }),
+    /* @__PURE__ */ o(f, { children: /* @__PURE__ */ o(
+      A,
+      {
+        guid: d,
+        data: t,
+        patch: c,
+        onChange: i
+      }
+    ) })
+  ] });
+}
+export {
+  j as default
+};

package/dist/addressfield-Dfd9ilpe.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),s=require("@mui/material/Grid"),n=require("@mui/material/TextField"),A=require("@mui/material/MenuItem"),c=require("./index-eJceCjKS.js"),g=[{value:"US",label:"United States"},{value:"CA",label:"Canada"},{value:"MX",label:"Mexico"},{value:"GB",label:"United Kingdom"},{value:"IE",label:"Ireland"},{value:"FR",label:"France"},{value:"DE",label:"Germany"},{value:"ES",label:"Spain"},{value:"IT",label:"Italy"},{value:"NL",label:"Netherlands"},{value:"BE",label:"Belgium"},{value:"CH",label:"Switzerland"},{value:"SE",label:"Sweden"},{value:"NO",label:"Norway"},{value:"DK",label:"Denmark"},{value:"PT",label:"Portugal"},{value:"AU",label:"Australia"},{value:"NZ",label:"New Zealand"},{value:"IN",label:"India"},{value:"CN",label:"China"},{value:"JP",label:"Japan"},{value:"SG",label:"Singapore"},{value:"AE",label:"United Arab Emirates"},{value:"BR",label:"Brazil"},{value:"ZA",label:"South Africa"}],f={street1:"Street address",street2:"Apt, suite, etc. (optional)",city:"City",state:"State / Province",postalCode:"Postal code",country:"Country"};function P({attributes:i={},rules:m={},onChange:b}){const{id:v="",MuiAttributes:x={},countries:o,labels:C={}}=i,S=Array.isArray(o)&&o.length?o:g,l={...f,...C},d=m?.validation?.some(t=>t.rule==="mandatory"||t.rule==="mandatoryselect")||!1,[a,p]=h.useState(()=>({street1:"",street2:"",city:"",state:"",postalCode:"",country:"",...i?.value||{}}));c.useUpdateEffect(()=>{p({street1:"",street2:"",city:"",state:"",postalCode:"",country:"",...i?.value||{}})},[i?.value]);const r=h.useCallback(t=>j=>{const y={...a,[t]:j.target.value};p(y),b?.({id:v,value:y})},[a,v,b]),u=c.mergeSx(c.premiumInputSx,x?.sx);return e.jsxs(s,{container:!0,spacing:2,...x,children:[e.jsx(s,{size:{xs:12},children:e.jsx(n,{fullWidth:!0,label:l.street1,required:d,value:a.street1||"",onChange:r("street1"),inputProps:{"aria-label":l.street1},sx:u})}),e.jsx(s,{size:{xs:12},children:e.jsx(n,{fullWidth:!0,label:l.street2,value:a.street2||"",onChange:r("street2"),inputProps:{"aria-label":l.street2},sx:u})}),e.jsx(s,{size:{xs:12,sm:6,md:5},children:e.jsx(n,{fullWidth:!0,label:l.city,required:d,value:a.city||"",onChange:r("city"),inputProps:{"aria-label":l.city},sx:u})}),e.jsx(s,{size:{xs:12,sm:6,md:4},children:e.jsx(n,{fullWidth:!0,label:l.state,value:a.state||"",onChange:r("state"),inputProps:{"aria-label":l.state},sx:u})}),e.jsx(s,{size:{xs:12,sm:6,md:3},children:e.jsx(n,{fullWidth:!0,label:l.postalCode,value:a.postalCode||"",onChange:r("postalCode"),inputProps:{"aria-label":l.postalCode},sx:u})}),e.jsx(s,{size:{xs:12,sm:6},children:e.jsx(n,{select:!0,fullWidth:!0,label:l.country,required:d,value:a.country||"",onChange:r("country"),SelectProps:{inputProps:{"aria-label":l.country}},sx:u,children:S.map(t=>e.jsx(A,{value:t.value,children:t.label},t.value))})})]})}exports.default=P;

package/dist/addressfield-FjNJCCuC.mjs

@@ -0,0 +1,152 @@
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import S, { useCallback as A } from "react";
+import r from "@mui/material/Grid";
+import i from "@mui/material/TextField";
+import g from "@mui/material/MenuItem";
+import { u as E, m as P, a as I } from "./index-Bh6BLrzq.mjs";
+const N = [
+  { value: "US", label: "United States" },
+  { value: "CA", label: "Canada" },
+  { value: "MX", label: "Mexico" },
+  { value: "GB", label: "United Kingdom" },
+  { value: "IE", label: "Ireland" },
+  { value: "FR", label: "France" },
+  { value: "DE", label: "Germany" },
+  { value: "ES", label: "Spain" },
+  { value: "IT", label: "Italy" },
+  { value: "NL", label: "Netherlands" },
+  { value: "BE", label: "Belgium" },
+  { value: "CH", label: "Switzerland" },
+  { value: "SE", label: "Sweden" },
+  { value: "NO", label: "Norway" },
+  { value: "DK", label: "Denmark" },
+  { value: "PT", label: "Portugal" },
+  { value: "AU", label: "Australia" },
+  { value: "NZ", label: "New Zealand" },
+  { value: "IN", label: "India" },
+  { value: "CN", label: "China" },
+  { value: "JP", label: "Japan" },
+  { value: "SG", label: "Singapore" },
+  { value: "AE", label: "United Arab Emirates" },
+  { value: "BR", label: "Brazil" },
+  { value: "ZA", label: "South Africa" }
+], U = {
+  street1: "Street address",
+  street2: "Apt, suite, etc. (optional)",
+  city: "City",
+  state: "State / Province",
+  postalCode: "Postal code",
+  country: "Country"
+};
+function D({ attributes: n = {}, rules: h = {}, onChange: c }) {
+  const {
+    id: b = "",
+    MuiAttributes: v = {},
+    countries: o,
+    labels: y = {}
+  } = n, x = Array.isArray(o) && o.length ? o : N, l = { ...U, ...y }, d = h?.validation?.some(
+    (t) => t.rule === "mandatory" || t.rule === "mandatoryselect"
+  ) || !1, [a, p] = S.useState(() => ({
+    street1: "",
+    street2: "",
+    city: "",
+    state: "",
+    postalCode: "",
+    country: "",
+    ...n?.value || {}
+  }));
+  E(() => {
+    p({
+      street1: "",
+      street2: "",
+      city: "",
+      state: "",
+      postalCode: "",
+      country: "",
+      ...n?.value || {}
+    });
+  }, [n?.value]);
+  const s = A(
+    (t) => (C) => {
+      const m = { ...a, [t]: C.target.value };
+      p(m), c?.({ id: b, value: m });
+    },
+    [a, b, c]
+  ), u = P(I, v?.sx);
+  return /* @__PURE__ */ f(r, { container: !0, spacing: 2, ...v, children: [
+    /* @__PURE__ */ e(r, { size: { xs: 12 }, children: /* @__PURE__ */ e(
+      i,
+      {
+        fullWidth: !0,
+        label: l.street1,
+        required: d,
+        value: a.street1 || "",
+        onChange: s("street1"),
+        inputProps: { "aria-label": l.street1 },
+        sx: u
+      }
+    ) }),
+    /* @__PURE__ */ e(r, { size: { xs: 12 }, children: /* @__PURE__ */ e(
+      i,
+      {
+        fullWidth: !0,
+        label: l.street2,
+        value: a.street2 || "",
+        onChange: s("street2"),
+        inputProps: { "aria-label": l.street2 },
+        sx: u
+      }
+    ) }),
+    /* @__PURE__ */ e(r, { size: { xs: 12, sm: 6, md: 5 }, children: /* @__PURE__ */ e(
+      i,
+      {
+        fullWidth: !0,
+        label: l.city,
+        required: d,
+        value: a.city || "",
+        onChange: s("city"),
+        inputProps: { "aria-label": l.city },
+        sx: u
+      }
+    ) }),
+    /* @__PURE__ */ e(r, { size: { xs: 12, sm: 6, md: 4 }, children: /* @__PURE__ */ e(
+      i,
+      {
+        fullWidth: !0,
+        label: l.state,
+        value: a.state || "",
+        onChange: s("state"),
+        inputProps: { "aria-label": l.state },
+        sx: u
+      }
+    ) }),
+    /* @__PURE__ */ e(r, { size: { xs: 12, sm: 6, md: 3 }, children: /* @__PURE__ */ e(
+      i,
+      {
+        fullWidth: !0,
+        label: l.postalCode,
+        value: a.postalCode || "",
+        onChange: s("postalCode"),
+        inputProps: { "aria-label": l.postalCode },
+        sx: u
+      }
+    ) }),
+    /* @__PURE__ */ e(r, { size: { xs: 12, sm: 6 }, children: /* @__PURE__ */ e(
+      i,
+      {
+        select: !0,
+        fullWidth: !0,
+        label: l.country,
+        required: d,
+        value: a.country || "",
+        onChange: s("country"),
+        SelectProps: { inputProps: { "aria-label": l.country } },
+        sx: u,
+        children: x.map((t) => /* @__PURE__ */ e(g, { value: t.value, children: t.label }, t.value))
+      }
+    ) })
+  ] });
+}
+export {
+  D as default
+};

package/dist/asyncautocomplete-9O6nwGP_.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),t=require("react"),$=require("@mui/material/Autocomplete"),F=require("@mui/material/TextField"),K=require("@mui/material/CircularProgress"),y=require("./index-eJceCjKS.js");function L({attributes:o={},rules:v={},onChange:q}){const{MuiAttributes:A={},id:x="",label:S="Search",placeholder:j="",minChars:C=1,debounceMs:O=300,labelKey:I="label",valueKey:d="value",loadOptions:p,optionsUrl:a}=o,[R,h]=t.useState(o.value??null),[b,i]=t.useState([]),[m,s]=t.useState(!1),c=t.useRef(0),r=t.useRef(null);y.useUpdateEffect(()=>{h(o.value??null)},[o.value]),t.useEffect(()=>()=>{r.current&&clearTimeout(r.current)},[]);const P=async e=>{if(typeof p=="function")return p(e);if(a){const n=`${a}${a.includes("?")?"&":"?"}q=${encodeURIComponent(e)}`,g=await(await fetch(n)).json();return Array.isArray(g)?g:[]}return[]},T=e=>{const n=++c.current;s(!0),P(e).then(f=>{n===c.current&&(i(Array.isArray(f)?f:[]),s(!1))}).catch(()=>{n===c.current&&(i([]),s(!1))})},E=(e,n)=>{if(r.current&&clearTimeout(r.current),!n||n.length<C){c.current++,s(!1),i([]);return}r.current=setTimeout(()=>{T(n)},O)},M=(e,n)=>{h(n),q?.({id:x,value:n!=null?n?.[d]??n:n,option:n})},l=e=>typeof e=="string"?e:e?.[I]??"",U=!!v?.validation?.some(e=>e.rule==="mandatory");return u.jsx($,{value:R,onChange:M,onInputChange:E,options:b,loading:m,filterOptions:e=>e,getOptionLabel:l,renderOption:(e,n)=>t.createElement("li",{...e,key:(n&&n[d])??l(n)},l(n)),...A,renderInput:e=>u.jsx(F,{...e,label:S,placeholder:j,required:U,sx:y.premiumInputSx,InputProps:{...e.InputProps,endAdornment:u.jsxs(u.Fragment,{children:[m?u.jsx(K,{color:"inherit",size:20}):null,e.InputProps.endAdornment]})}})})}exports.default=L;

package/dist/asyncautocomplete-B8qI_lz9.mjs

@@ -0,0 +1,89 @@
+import { jsx as c, jsxs as F, Fragment as K } from "react/jsx-runtime";
+import { useState as f, useRef as y, useEffect as L, createElement as M } from "react";
+import _ from "@mui/material/Autocomplete";
+import k from "@mui/material/TextField";
+import z from "@mui/material/CircularProgress";
+import { u as V, a as w } from "./index-Bh6BLrzq.mjs";
+function Q({ attributes: t = {}, rules: v = {}, onChange: A }) {
+  const {
+    MuiAttributes: C = {},
+    id: x = "",
+    label: I = "Search",
+    placeholder: O = "",
+    minChars: S = 1,
+    debounceMs: q = 300,
+    labelKey: P = "label",
+    valueKey: p = "value",
+    loadOptions: m,
+    optionsUrl: s
+  } = t, [T, d] = f(t.value ?? null), [b, a] = f([]), [h, o] = f(!1), u = y(0), r = y(null);
+  V(() => {
+    d(t.value ?? null);
+  }, [t.value]), L(() => () => {
+    r.current && clearTimeout(r.current);
+  }, []);
+  const j = async (e) => {
+    if (typeof m == "function")
+      return m(e);
+    if (s) {
+      const n = `${s}${s.includes("?") ? "&" : "?"}q=${encodeURIComponent(e)}`, g = await (await fetch(n)).json();
+      return Array.isArray(g) ? g : [];
+    }
+    return [];
+  }, E = (e) => {
+    const n = ++u.current;
+    o(!0), j(e).then((i) => {
+      n === u.current && (a(Array.isArray(i) ? i : []), o(!1));
+    }).catch(() => {
+      n === u.current && (a([]), o(!1));
+    });
+  }, R = (e, n) => {
+    if (r.current && clearTimeout(r.current), !n || n.length < S) {
+      u.current++, o(!1), a([]);
+      return;
+    }
+    r.current = setTimeout(() => {
+      E(n);
+    }, q);
+  }, U = (e, n) => {
+    d(n), A?.({
+      id: x,
+      value: n != null ? n?.[p] ?? n : n,
+      option: n
+    });
+  }, l = (e) => typeof e == "string" ? e : e?.[P] ?? "", $ = !!v?.validation?.some((e) => e.rule === "mandatory");
+  return /* @__PURE__ */ c(
+    _,
+    {
+      value: T,
+      onChange: U,
+      onInputChange: R,
+      options: b,
+      loading: h,
+      filterOptions: (e) => e,
+      getOptionLabel: l,
+      renderOption: (e, n) => /* @__PURE__ */ M("li", { ...e, key: (n && n[p]) ?? l(n) }, l(n)),
+      ...C,
+      renderInput: (e) => /* @__PURE__ */ c(
+        k,
+        {
+          ...e,
+          label: I,
+          placeholder: O,
+          required: $,
+          sx: w,
+          InputProps: {
+            ...e.InputProps,
+            endAdornment: /* @__PURE__ */ F(K, { children: [
+              h ? /* @__PURE__ */ c(z, { color: "inherit", size: 20 }) : null,
+              e.InputProps.endAdornment
+            ] })
+          }
+        }
+      )
+    }
+  );
+}
+export {
+  Q as default
+};

package/dist/bar-BzO7tvYJ.mjs

@@ -0,0 +1,20 @@
+import { jsx as r } from "react/jsx-runtime";
+import a, { Suspense as i } from "react";
+import n from "@mui/material/Box";
+import s from "@mui/material/CircularProgress";
+const f = a.lazy(
+  () => import("@mui/x-charts/BarChart").then((t) => ({ default: t.BarChart }))
+);
+function u({ attributes: t = {} }) {
+  const { MuiChartAttributes: e = {}, id: o = "" } = t;
+  return /* @__PURE__ */ r(
+    i,
+    {
+      fallback: /* @__PURE__ */ r(n, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ r(s, {}) }),
+      children: /* @__PURE__ */ r(f, { height: 300, ...e }, o)
+    }
+  );
+}
+export {
+  u as default
+};

package/dist/bar-DEVxyUVS.js

@@ -0,0 +1 @@
+"use strict";var c=Object.create;var u=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var x=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of l(t))!h.call(e,s)&&s!==r&&u(e,s,{get:()=>t[s],enumerable:!(n=o(t,s))||n.enumerable});return e};var f=(e,t,r)=>(r=e!=null?c(d(e)):{},x(t||!e||!e.__esModule?u(r,"default",{value:e,enumerable:!0}):r,e));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),a=require("react"),j=require("@mui/material/Box"),p=require("@mui/material/CircularProgress"),y=a.lazy(()=>import("@mui/x-charts/BarChart").then(e=>({default:e.BarChart})));function C({attributes:e={}}){const{MuiChartAttributes:t={},id:r=""}=e;return i.jsx(a.Suspense,{fallback:i.jsx(j,{sx:{display:"flex",justifyContent:"center",p:2},children:i.jsx(p,{})}),children:i.jsx(y,{height:300,...t},r)})}exports.default=C;

package/dist/cascadeselect-D8sVXV1g.mjs

@@ -0,0 +1,64 @@
+import { jsxs as C, jsx as p } from "react/jsx-runtime";
+import x, { useCallback as E } from "react";
+import I from "@mui/material/TextField";
+import S from "@mui/material/MenuItem";
+import { u as y, m as O, a as P } from "./index-Bh6BLrzq.mjs";
+const R = (a) => Array.isArray(a) ? a.map(
+  (e) => e != null && typeof e == "object" ? { value: e.value, label: e.label ?? e.title ?? String(e.value) } : { value: e, label: String(e) }
+) : [], h = (a, e, t) => {
+  const r = a && e != null && e !== "" ? a[e] : void 0;
+  return R(r ?? t ?? []);
+};
+function U({ attributes: a = {}, rules: e = {}, onChange: t }) {
+  const {
+    id: r = "",
+    parentValue: s,
+    optionsMap: o,
+    options: i,
+    label: v = "",
+    placeholder: c = "",
+    MuiAttributes: f = {}
+  } = a, b = e?.validation?.some(
+    (l) => l.rule === "mandatory" || l.rule === "mandatoryselect"
+  ) || !1, [m, g] = x.useState(
+    () => h(o, s, i)
+  ), [n, d] = x.useState(() => a?.value ?? "");
+  y(() => {
+    d(a?.value ?? "");
+  }, [a?.value]), y(() => {
+    const l = h(o, s, i);
+    g(l), n !== "" && n != null && !l.some((u) => u.value === n) && (d(""), t?.({ id: r, value: "", option: null }));
+  }, [s, o, i]);
+  const M = E(
+    (l) => {
+      const u = l.target.value, j = m.find((A) => A.value === u) ?? null;
+      d(u), t?.({ id: r, value: u, option: j });
+    },
+    [m, r, t]
+  );
+  return /* @__PURE__ */ C(
+    I,
+    {
+      select: !0,
+      fullWidth: !0,
+      label: v,
+      placeholder: c,
+      required: b,
+      value: n ?? "",
+      onChange: M,
+      SelectProps: {
+        displayEmpty: !0,
+        inputProps: { "aria-label": v || "cascade-select" }
+      },
+      ...f,
+      sx: O(P, f?.sx),
+      children: [
+        c ? /* @__PURE__ */ p(S, { value: "", children: /* @__PURE__ */ p("em", { children: c }) }) : null,
+        m.map((l) => /* @__PURE__ */ p(S, { value: l.value, children: l.label }, String(l.value)))
+      ]
+    }
+  );
+}
+export {
+  U as default
+};

package/dist/cascadeselect-DeoPn4_V.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),f=require("react"),A=require("@mui/material/TextField"),y=require("@mui/material/MenuItem"),i=require("./index-eJceCjKS.js"),E=t=>Array.isArray(t)?t.map(e=>e!=null&&typeof e=="object"?{value:e.value,label:e.label??e.title??String(e.value)}:{value:e,label:String(e)}):[],b=(t,e,a)=>{const u=t&&e!=null&&e!==""?t[e]:void 0;return E(u??a??[])};function O({attributes:t={},rules:e={},onChange:a}){const{id:u="",parentValue:c,optionsMap:o,options:d,label:x="",placeholder:v="",MuiAttributes:S={}}=t,g=e?.validation?.some(l=>l.rule==="mandatory"||l.rule==="mandatoryselect")||!1,[p,h]=f.useState(()=>b(o,c,d)),[r,m]=f.useState(()=>t?.value??"");i.useUpdateEffect(()=>{m(t?.value??"")},[t?.value]),i.useUpdateEffect(()=>{const l=b(o,c,d);h(l),r!==""&&r!=null&&!l.some(n=>n.value===r)&&(m(""),a?.({id:u,value:"",option:null}))},[c,o,d]);const j=f.useCallback(l=>{const n=l.target.value,q=p.find(M=>M.value===n)??null;m(n),a?.({id:u,value:n,option:q})},[p,u,a]);return s.jsxs(A,{select:!0,fullWidth:!0,label:x,placeholder:v,required:g,value:r??"",onChange:j,SelectProps:{displayEmpty:!0,inputProps:{"aria-label":x||"cascade-select"}},...S,sx:i.mergeSx(i.premiumInputSx,S?.sx),children:[v?s.jsx(y,{value:"",children:s.jsx("em",{children:v})}):null,p.map(l=>s.jsx(y,{value:l.value,children:l.label},String(l.value)))]})}exports.default=O;

package/dist/colorpicker-BcnqB34i.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),k=require("react"),p=require("@mui/material/Box"),x=require("@mui/material/Stack"),C=require("@mui/material/TextField"),$=require("@mui/material/FormControl"),A=require("@mui/material/FormLabel"),n=require("@mui/material/styles"),l=require("./index-eJceCjKS.js"),h="#000000";function R({attributes:t={},rules:m={},onChange:b}){const{id:u="",label:o,presets:s=[],MuiAttributes:g={}}=t,{sx:y,...f}=g,[a,d]=k.useState(t.value||h);l.useUpdateEffect(()=>{d(t.value||h)},[t.value]);const v=m?.validation?.some(e=>e.rule==="mandatory"||e.rule==="mandatoryselect")||!1,c=e=>{d(e),b?.({id:u,value:e})},S=e=>{c(e.target.value)},w=e=>{c(e.target.value)},j=e=>{c(e)},q={width:44,height:44,borderRadius:"10px",border:e=>`1px solid ${n.alpha(e.palette.text.primary,.2)}`,boxShadow:e=>`0 2px 8px ${n.alpha(e.palette.common.black,.12)}`,cursor:"pointer",flexShrink:0,position:"relative",overflow:"hidden"};return r.jsxs($,{required:v,component:"fieldset",fullWidth:!0,children:[o&&r.jsx(A,{component:"legend",children:o}),r.jsxs(x,{direction:"row",spacing:1.5,alignItems:"center",sx:{mt:o?1:0},children:[r.jsx(p,{sx:{...q,backgroundColor:a},children:r.jsx("input",{type:"color","aria-label":o?`${o} colour`:"colour",value:a,onChange:S,...f,style:{position:"absolute",inset:0,width:"100%",height:"100%",opacity:0,border:"none",padding:0,cursor:"pointer"}})}),r.jsx(C,{id:u||void 0,value:a,onChange:w,size:"small",label:"Hex",inputProps:{"aria-label":"hex value"},sx:l.mergeSx(l.premiumInputSx,l.mergeSx({maxWidth:160},y))})]}),Array.isArray(s)&&s.length>0&&r.jsx(x,{direction:"row",spacing:1,sx:{mt:1.5,flexWrap:"wrap",rowGap:1},children:s.map(e=>r.jsx(p,{role:"button","aria-label":`preset ${e}`,onClick:()=>j(e),sx:{width:26,height:26,borderRadius:"8px",backgroundColor:e,cursor:"pointer",flexShrink:0,border:i=>a===e?`2px solid ${i.palette.primary.main}`:`1px solid ${n.alpha(i.palette.text.primary,.2)}`,boxShadow:i=>`0 1px 4px ${n.alpha(i.palette.common.black,.12)}`}},e))})]})}exports.default=R;

package/dist/colorpicker-DcyceL6g.mjs

@@ -0,0 +1,98 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import $ from "react";
+import m from "@mui/material/Box";
+import u from "@mui/material/Stack";
+import A from "@mui/material/TextField";
+import F from "@mui/material/FormControl";
+import I from "@mui/material/FormLabel";
+import { alpha as l } from "@mui/material/styles";
+import { u as R, m as x, a as B } from "./index-Bh6BLrzq.mjs";
+const h = "#000000";
+function q({ attributes: t = {}, rules: f = {}, onChange: b }) {
+  const { id: p = "", label: r, presets: n = [], MuiAttributes: g = {} } = t, { sx: w, ...v } = g, [a, d] = $.useState(
+    t.value || h
+  );
+  R(() => {
+    d(t.value || h);
+  }, [t.value]);
+  const y = f?.validation?.some(
+    (o) => o.rule === "mandatory" || o.rule === "mandatoryselect"
+  ) || !1, s = (o) => {
+    d(o), b?.({ id: p, value: o });
+  }, k = (o) => {
+    s(o.target.value);
+  }, C = (o) => {
+    s(o.target.value);
+  }, S = (o) => {
+    s(o);
+  };
+  return /* @__PURE__ */ c(F, { required: y, component: "fieldset", fullWidth: !0, children: [
+    r && /* @__PURE__ */ e(I, { component: "legend", children: r }),
+    /* @__PURE__ */ c(u, { direction: "row", spacing: 1.5, alignItems: "center", sx: { mt: r ? 1 : 0 }, children: [
+      /* @__PURE__ */ e(m, { sx: { ...{
+        width: 44,
+        height: 44,
+        borderRadius: "10px",
+        border: (o) => `1px solid ${l(o.palette.text.primary, 0.2)}`,
+        boxShadow: (o) => `0 2px 8px ${l(o.palette.common.black, 0.12)}`,
+        cursor: "pointer",
+        flexShrink: 0,
+        position: "relative",
+        overflow: "hidden"
+      }, backgroundColor: a }, children: /* @__PURE__ */ e(
+        "input",
+        {
+          type: "color",
+          "aria-label": r ? `${r} colour` : "colour",
+          value: a,
+          onChange: k,
+          ...v,
+          style: {
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            opacity: 0,
+            border: "none",
+            padding: 0,
+            cursor: "pointer"
+          }
+        }
+      ) }),
+      /* @__PURE__ */ e(
+        A,
+        {
+          id: p || void 0,
+          value: a,
+          onChange: C,
+          size: "small",
+          label: "Hex",
+          inputProps: { "aria-label": "hex value" },
+          sx: x(B, x({ maxWidth: 160 }, w))
+        }
+      )
+    ] }),
+    Array.isArray(n) && n.length > 0 && /* @__PURE__ */ e(u, { direction: "row", spacing: 1, sx: { mt: 1.5, flexWrap: "wrap", rowGap: 1 }, children: n.map((o) => /* @__PURE__ */ e(
+      m,
+      {
+        role: "button",
+        "aria-label": `preset ${o}`,
+        onClick: () => S(o),
+        sx: {
+          width: 26,
+          height: 26,
+          borderRadius: "8px",
+          backgroundColor: o,
+          cursor: "pointer",
+          flexShrink: 0,
+          border: (i) => a === o ? `2px solid ${i.palette.primary.main}` : `1px solid ${l(i.palette.text.primary, 0.2)}`,
+          boxShadow: (i) => `0 1px 4px ${l(i.palette.common.black, 0.12)}`
+        }
+      },
+      o
+    )) })
+  ] });
+}
+export {
+  q as default
+};

package/dist/components/DynamicComponent.d.ts

@@ -1,5 +1,7 @@
 import { ControlProps } from '../types';
 interface DynamicComponentProps extends ControlProps {
+    /** Schema `type` — checked against the custom-control registry first. */
+    type?: string;
     map?: string;
     option?: string;
     control?: any;