quirk-ui 0.1.181 → 0.1.182

package/dist/{FormField-oa2piuZf.js → FormField-B1JNU2Mz.js}

@@ -1,63 +1,63 @@
 import { jsx as s } from "react/jsx-runtime";
-import { Input as T } from "./core/components/Input/index.mjs";
-import { Textarea as W } from "./core/components/Textarea/index.mjs";
+import { Input as z } from "./core/components/Input/index.mjs";
+import { Textarea as v } from "./core/components/Textarea/index.mjs";
 import { Select as m } from "./core/components/Select/index.mjs";
 import { Checkbox as _ } from "./core/components/Checkbox/index.mjs";
-import { Radio as f } from "./core/components/Radio/index.mjs";
+import { Radio as T } from "./core/components/Radio/index.mjs";
 import { Fieldset as h } from "./core/components/Fieldset/index.mjs";
-import { DatePicker as k } from "./core/components/DatePicker/index.mjs";
-import { Range as w } from "./core/components/Range/index.mjs";
-import './FormField.css';const L = "_formBlock_1taaa_1", C = "_container_1taaa_7", F = "_formInner_1taaa_20", y = "_maxWidthSm_1taaa_26", B = "_maxWidthMd_1taaa_29", q = "_maxWidthLg_1taaa_32", S = "_maxWidthFull_1taaa_35", H = "_heading_1taaa_41", G = "_eyebrow_1taaa_47", M = "_title_1taaa_51", $ = "_disclaimer_1taaa_55", I = "_progress_1taaa_61", D = "_progressHeader_1taaa_67", O = "_stepLabel_1taaa_73", V = "_stepCount_1taaa_79", P = "_stepDescription_1taaa_84", R = "_fields_1taaa_92", j = "_fieldFull_1taaa_99", N = "_fieldHalf_1taaa_103", z = "_fieldThird_1taaa_111", A = "_actions_1taaa_121", E = "_submitButton_1taaa_128", J = "_success_1taaa_134", K = "_errorBanner_1taaa_149", u = {
-  formBlock: L,
-  container: C,
-  formInner: F,
-  maxWidthSm: y,
-  maxWidthMd: B,
-  maxWidthLg: q,
-  maxWidthFull: S,
-  heading: H,
-  eyebrow: G,
-  title: M,
-  disclaimer: $,
-  progress: I,
-  progressHeader: D,
-  stepLabel: O,
-  stepCount: V,
-  stepDescription: P,
-  fields: R,
-  fieldFull: j,
-  fieldHalf: N,
-  fieldThird: z,
+import { DatePicker as W } from "./core/components/DatePicker/index.mjs";
+import { Range as f } from "./core/components/Range/index.mjs";
+import './FormField.css';const k = "_formBlock_tzwar_1", L = "_container_tzwar_7", C = "_formInner_tzwar_20", F = "_maxWidthSm_tzwar_26", y = "_maxWidthMd_tzwar_29", B = "_maxWidthLg_tzwar_32", q = "_maxWidthFull_tzwar_35", S = "_heading_tzwar_41", H = "_eyebrow_tzwar_47", G = "_title_tzwar_51", M = "_disclaimer_tzwar_55", $ = "_progress_tzwar_61", I = "_progressHeader_tzwar_67", D = "_stepLabel_tzwar_73", O = "_stepCount_tzwar_79", V = "_stepDescription_tzwar_84", P = "_fields_tzwar_92", R = "_fieldFull_tzwar_99", j = "_fieldHalf_tzwar_103", N = "_fieldThird_tzwar_111", A = "_actions_tzwar_121", E = "_submitButton_tzwar_128", J = "_success_tzwar_134", K = "_errorBanner_tzwar_149", u = {
+  formBlock: k,
+  container: L,
+  formInner: C,
+  maxWidthSm: F,
+  maxWidthMd: y,
+  maxWidthLg: B,
+  maxWidthFull: q,
+  heading: S,
+  eyebrow: H,
+  title: G,
+  disclaimer: M,
+  progress: $,
+  progressHeader: I,
+  stepLabel: D,
+  stepCount: O,
+  stepDescription: V,
+  fields: P,
+  fieldFull: R,
+  fieldHalf: j,
+  fieldThird: N,
   actions: A,
   submitButton: E,
   success: J,
   errorBanner: K
 };
 function c(e) {
-  return (e ?? []).map((t) => ({
-    label: t.label,
-    value: t.value.current,
-    disabled: t.disabled
+  return (e ?? []).map((r) => ({
+    label: r.label,
+    value: r.value.current,
+    disabled: r.disabled
   }));
 }
 function p(e) {
-  return (e ?? []).map((t) => ({
-    label: t.label,
-    options: t.options.map((n) => ({
+  return (e ?? []).map((r) => ({
+    label: r.label,
+    options: r.options.map((n) => ({
       label: n.label,
       value: n.value.current,
       disabled: n.disabled
     }))
   }));
 }
-function ne({ field: e, value: t, error: n, onChange: o }) {
-  const r = e.name.current, b = {
+function ne({ field: e, value: r, error: n, onChange: o }) {
+  const a = e.name.current, b = {
     full: u.fieldFull,
     half: u.fieldHalf,
     third: u.fieldThird
   }[e.width ?? "full"], i = {
-    id: r,
-    name: r,
+    id: a,
+    name: a,
     label: e.label,
     required: e.required,
     disabled: e.disabled,
@@ -72,60 +72,60 @@ function ne({ field: e, value: t, error: n, onChange: o }) {
       case "number":
       case "url":
         return /* @__PURE__ */ s(
-          T,
+          z,
           {
             ...i,
             type: e.fieldType === "phone" ? "tel" : e.fieldType,
             placeholder: e.placeholder,
-            value: t ?? "",
+            value: r ?? "",
             minLength: e.minLength,
             maxLength: e.maxLength,
             fullWidth: !0,
-            onChange: (a) => o(r, a.target.value)
+            onChange: (t) => o(a, t.target.value)
           }
         );
       // ── Textarea ───────────────────────────────────────────────────────
       case "textarea":
         return /* @__PURE__ */ s(
-          W,
+          v,
           {
             ...i,
             placeholder: e.placeholder,
-            value: t ?? "",
+            value: r ?? "",
             rows: e.rows ?? 4,
             maxLength: e.maxLength,
             showCharCount: e.showCharCount,
             fullWidth: !0,
-            onChange: (a) => o(r, a.target.value)
+            onChange: (t) => o(a, t.target.value)
           }
         );
       // ── Select ─────────────────────────────────────────────────────────
       case "select": {
-        const a = e.useOptionGroups ? p(e.optionGroups) : c(e.options);
+        const t = e.useOptionGroups ? p(e.optionGroups) : c(e.options);
         return /* @__PURE__ */ s(
           m,
           {
             ...i,
             placeholder: e.placeholder,
-            options: a,
-            value: t ?? "",
+            options: t,
+            value: r ?? "",
             fullWidth: !0,
-            onChange: (l) => o(r, l.target.value)
+            onChange: (l) => o(a, l.target.value)
           }
         );
       }
       // ── Multi-select ───────────────────────────────────────────────────
       case "multiselect": {
-        const a = e.useOptionGroups ? p(e.optionGroups) : c(e.options);
+        const t = e.useOptionGroups ? p(e.optionGroups) : c(e.options);
         return /* @__PURE__ */ s(
           m,
           {
             ...i,
             multiple: !0,
-            options: a,
-            value: t ?? [],
+            options: t,
+            value: r ?? [],
             showSelectedCount: !0,
-            onChange: (l) => o(r, l)
+            onChange: (l) => o(a, l)
           }
         );
       }
@@ -141,24 +141,24 @@ function ne({ field: e, value: t, error: n, onChange: o }) {
             disabled: e.disabled,
             helperText: n ?? e.helperText,
             error: !!n,
-            checked: t ?? !1,
-            onChange: (a) => o(r, a.target.checked)
+            checked: r ?? !1,
+            onChange: (t) => o(a, t.target.checked)
           }
         );
       // ── Checkbox group ─────────────────────────────────────────────────
       case "checkboxGroup": {
-        const a = t ?? [];
+        const t = r ?? [];
         return /* @__PURE__ */ s(h, { legend: e.label, error: !!n, helperText: n, children: c(e.options).map((l) => /* @__PURE__ */ s(
           _,
           {
-            id: `${r}-${l.value}`,
-            name: `${r}[]`,
+            id: `${a}-${l.value}`,
+            name: `${a}[]`,
             label: l.label,
-            checked: a.includes(l.value),
+            checked: t.includes(l.value),
             disabled: l.disabled || e.disabled,
             onChange: (x) => {
-              const g = x.target.checked ? [...a, l.value] : a.filter((v) => v !== l.value);
-              o(r, g);
+              const w = x.target.checked ? [...t, l.value] : t.filter((g) => g !== l.value);
+              o(a, w);
             }
           },
           l.value
@@ -166,24 +166,24 @@ function ne({ field: e, value: t, error: n, onChange: o }) {
       }
       // ── Radio group ────────────────────────────────────────────────────
       case "radio":
-        return /* @__PURE__ */ s(h, { legend: e.label, error: !!n, helperText: n, children: c(e.options).map((a) => /* @__PURE__ */ s(
-          f,
+        return /* @__PURE__ */ s(h, { legend: e.label, error: !!n, helperText: n, children: c(e.options).map((t) => /* @__PURE__ */ s(
+          T,
           {
-            id: `${r}-${a.value}`,
-            name: r,
-            value: a.value,
-            label: a.label,
-            checked: t === a.value,
-            disabled: a.disabled || e.disabled,
+            id: `${a}-${t.value}`,
+            name: a,
+            value: t.value,
+            label: t.label,
+            checked: r === t.value,
+            disabled: t.disabled || e.disabled,
             required: e.required,
-            onChange: () => o(r, a.value)
+            onChange: () => o(a, t.value)
           },
-          a.value
+          t.value
         )) });
       // ── Date picker ────────────────────────────────────────────────────
       case "date":
         return /* @__PURE__ */ s(
-          k,
+          W,
           {
             id: i.id,
             name: i.name,
@@ -192,24 +192,24 @@ function ne({ field: e, value: t, error: n, onChange: o }) {
             disabled: e.disabled,
             helperText: n ?? e.helperText,
             error: !!n,
-            value: t ?? null,
-            onChange: (a) => o(r, a)
+            value: r ?? null,
+            onChange: (t) => o(a, t)
           }
         );
       // ── Range ──────────────────────────────────────────────────────────
       case "range":
         return /* @__PURE__ */ s(
-          w,
+          f,
           {
             ...i,
-            value: t ?? e.rangeMin ?? 0,
+            value: r ?? e.rangeMin ?? 0,
             min: e.rangeMin ?? 0,
             max: e.rangeMax ?? 100,
             step: e.rangeStep ?? 1,
             valuePrefix: e.rangeValuePrefix,
             valueSuffix: e.rangeValueSuffix,
             showValue: !0,
-            onChange: (a) => o(r, a)
+            onChange: (t) => o(a, t)
           }
         );
       // ── Hidden ─────────────────────────────────────────────────────────
@@ -218,8 +218,8 @@ function ne({ field: e, value: t, error: n, onChange: o }) {
           "input",
           {
             type: "hidden",
-            name: r,
-            value: t ?? e.hiddenValue ?? ""
+            name: a,
+            value: r ?? e.hiddenValue ?? ""
           }
         );
       default:

package/dist/FormField-DZdJLBIK.cjs

@@ -0,0 +1 @@
+"use strict";require('./FormField.css');const s=require("react/jsx-runtime"),z=require("./core/components/Input/index.cjs"),v=require("./core/components/Textarea/index.cjs"),_=require("./core/components/Select/index.cjs"),h=require("./core/components/Checkbox/index.cjs"),q=require("./core/components/Radio/index.cjs"),p=require("./core/components/Fieldset/index.cjs"),T=require("./core/components/DatePicker/index.cjs"),k=require("./core/components/Range/index.cjs"),W="_formBlock_tzwar_1",F="_container_tzwar_7",j="_formInner_tzwar_20",C="_maxWidthSm_tzwar_26",L="_maxWidthMd_tzwar_29",y="_maxWidthLg_tzwar_32",S="_maxWidthFull_tzwar_35",B="_heading_tzwar_41",$="_eyebrow_tzwar_47",H="_title_tzwar_51",G="_disclaimer_tzwar_55",I="_progress_tzwar_61",M="_progressHeader_tzwar_67",D="_stepLabel_tzwar_73",O="_stepCount_tzwar_79",P="_stepDescription_tzwar_84",R="_fields_tzwar_92",V="_fieldFull_tzwar_99",f="_fieldHalf_tzwar_103",N="_fieldThird_tzwar_111",A="_actions_tzwar_121",E="_submitButton_tzwar_128",J="_success_tzwar_134",K="_errorBanner_tzwar_149",u={formBlock:W,container:F,formInner:j,maxWidthSm:C,maxWidthMd:L,maxWidthLg:y,maxWidthFull:S,heading:B,eyebrow:$,title:H,disclaimer:G,progress:I,progressHeader:M,stepLabel:D,stepCount:O,stepDescription:P,fields:R,fieldFull:V,fieldHalf:f,fieldThird:N,actions:A,submitButton:E,success:J,errorBanner:K};function i(e){return(e??[]).map(r=>({label:r.label,value:r.value.current,disabled:r.disabled}))}function m(e){return(e??[]).map(r=>({label:r.label,options:r.options.map(n=>({label:n.label,value:n.value.current,disabled:n.disabled}))}))}function Q({field:e,value:r,error:n,onChange:l}){const a=e.name.current,x={full:u.fieldFull,half:u.fieldHalf,third:u.fieldThird}[e.width??"full"],c={id:a,name:a,label:e.label,required:e.required,disabled:e.disabled,helperText:e.helperText,error:n},d=()=>{switch(e.fieldType){case"text":case"email":case"phone":case"number":case"url":return s.jsx(z.Input,{...c,type:e.fieldType==="phone"?"tel":e.fieldType,placeholder:e.placeholder,value:r??"",minLength:e.minLength,maxLength:e.maxLength,fullWidth:!0,onChange:t=>l(a,t.target.value)});case"textarea":return s.jsx(v.Textarea,{...c,placeholder:e.placeholder,value:r??"",rows:e.rows??4,maxLength:e.maxLength,showCharCount:e.showCharCount,fullWidth:!0,onChange:t=>l(a,t.target.value)});case"select":{const t=e.useOptionGroups?m(e.optionGroups):i(e.options);return s.jsx(_.Select,{...c,placeholder:e.placeholder,options:t,value:r??"",fullWidth:!0,onChange:o=>l(a,o.target.value)})}case"multiselect":{const t=e.useOptionGroups?m(e.optionGroups):i(e.options);return s.jsx(_.Select,{...c,multiple:!0,options:t,value:r??[],showSelectedCount:!0,onChange:o=>l(a,o)})}case"checkbox":return s.jsx(h.Checkbox,{id:c.id,name:c.name,label:e.label,required:e.required,disabled:e.disabled,helperText:n??e.helperText,error:!!n,checked:r??!1,onChange:t=>l(a,t.target.checked)});case"checkboxGroup":{const t=r??[];return s.jsx(p.Fieldset,{legend:e.label,error:!!n,helperText:n,children:i(e.options).map(o=>s.jsx(h.Checkbox,{id:`${a}-${o.value}`,name:`${a}[]`,label:o.label,checked:t.includes(o.value),disabled:o.disabled||e.disabled,onChange:b=>{const w=b.target.checked?[...t,o.value]:t.filter(g=>g!==o.value);l(a,w)}},o.value))})}case"radio":return s.jsx(p.Fieldset,{legend:e.label,error:!!n,helperText:n,children:i(e.options).map(t=>s.jsx(q.Radio,{id:`${a}-${t.value}`,name:a,value:t.value,label:t.label,checked:r===t.value,disabled:t.disabled||e.disabled,required:e.required,onChange:()=>l(a,t.value)},t.value))});case"date":return s.jsx(T.DatePicker,{id:c.id,name:c.name,label:e.label,required:e.required,disabled:e.disabled,helperText:n??e.helperText,error:!!n,value:r??null,onChange:t=>l(a,t)});case"range":return s.jsx(k.Range,{...c,value:r??e.rangeMin??0,min:e.rangeMin??0,max:e.rangeMax??100,step:e.rangeStep??1,valuePrefix:e.rangeValuePrefix,valueSuffix:e.rangeValueSuffix,showValue:!0,onChange:t=>l(a,t)});case"hidden":return s.jsx("input",{type:"hidden",name:a,value:r??e.hiddenValue??""});default:return null}};return e.fieldType==="hidden"?d():s.jsx("div",{className:`${x}`,children:d()})}exports.FormField=Q;exports.styles=u;

package/dist/FormField.css

@@ -1 +1 @@
-._formBlock_1taaa_1{width:100%;padding-top:var(--spacing-xl);padding-bottom:var(--spacing-xl)}._container_1taaa_7{width:100%;max-width:var(--layout-width, 1250px);margin:0 auto;padding-left:var(--spacing-md);padding-right:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-lg)}._formInner_1taaa_20{width:100%;margin-left:auto;margin-right:auto}._maxWidthSm_1taaa_26{max-width:480px}._maxWidthMd_1taaa_29{max-width:640px}._maxWidthLg_1taaa_32{max-width:800px}._maxWidthFull_1taaa_35{max-width:100%}._heading_1taaa_41{display:flex;flex-direction:column;gap:var(--spacing-sm)}._eyebrow_1taaa_47{font-weight:var(--font-weight-bold)}._title_1taaa_51{text-wrap:balance}._disclaimer_1taaa_55{font-size:var(--font-size-sm)}._progress_1taaa_61{display:flex;flex-direction:column;gap:var(--spacing-sm)}._progressHeader_1taaa_67{display:flex;justify-content:space-between;align-items:center}._stepLabel_1taaa_73{font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);color:var(--color-text-primary)}._stepCount_1taaa_79{font-size:var(--font-size-sm);color:var(--color-secondary-50)}._stepDescription_1taaa_84{color:var(--color-secondary-75);font-size:var(--font-size-md);margin:0}._fields_1taaa_92{display:flex;flex-wrap:wrap;gap:var(--spacing-md)}._fieldFull_1taaa_99{width:100%}._fieldHalf_1taaa_103{width:calc(50% - var(--spacing-md) / 2)}@media (max-width: 767px){._fieldHalf_1taaa_103{width:100%}}._fieldThird_1taaa_111{width:calc(33.333% - var(--spacing-md) * 2 / 3)}@media (max-width: 767px){._fieldThird_1taaa_111{width:100%}}._actions_1taaa_121{display:flex;align-items:center;gap:var(--spacing-md);padding-top:var(--spacing-sm)}._submitButton_1taaa_128{margin-left:auto}._success_1taaa_134{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-lg);padding:var(--spacing-md) 0 0}._success_1taaa_134 p{color:var(--color-states-success-bg);font-weight:var(--font-weight-semibold)}._errorBanner_1taaa_149{padding:var(--spacing-md);background-color:var(--color-states-error-bg);color:var(--color-states-error-text);border-radius:var(--radius-md);font-size:var(--font-size-sm)}.split ._container_1taaa_7{flex-direction:row;gap:3rem}.split ._heading_1taaa_41,.split form{flex:.5}@media (max-width: 767px){.split ._container_1taaa_7{flex-direction:column-reverse}.split ._heading_1taaa_41,.split form{flex:1}}
+._formBlock_tzwar_1{width:100%;padding-top:var(--spacing-xl);padding-bottom:var(--spacing-xl)}._container_tzwar_7{width:100%;max-width:var(--layout-width, 1250px);margin:0 auto;padding-left:var(--spacing-md);padding-right:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-lg)}._formInner_tzwar_20{width:100%;margin-left:auto;margin-right:auto}._maxWidthSm_tzwar_26{max-width:480px}._maxWidthMd_tzwar_29{max-width:640px}._maxWidthLg_tzwar_32{max-width:800px}._maxWidthFull_tzwar_35{max-width:100%}._heading_tzwar_41{display:flex;flex-direction:column;gap:var(--spacing-sm)}._eyebrow_tzwar_47{font-weight:var(--font-weight-bold)}._title_tzwar_51{text-wrap:balance}._disclaimer_tzwar_55{font-size:var(--font-size-sm)}._progress_tzwar_61{display:flex;flex-direction:column;gap:var(--spacing-sm)}._progressHeader_tzwar_67{display:flex;justify-content:space-between;align-items:center}._stepLabel_tzwar_73{font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);color:var(--color-text-primary)}._stepCount_tzwar_79{font-size:var(--font-size-sm);color:var(--color-secondary-50)}._stepDescription_tzwar_84{color:var(--color-secondary-75);font-size:var(--font-size-md);margin:0}._fields_tzwar_92{display:flex;flex-wrap:wrap;gap:var(--spacing-md)}._fieldFull_tzwar_99{width:100%}._fieldHalf_tzwar_103{width:calc(50% - var(--spacing-md) / 2)}@media (max-width: 767px){._fieldHalf_tzwar_103{width:100%}}._fieldThird_tzwar_111{width:calc(33.333% - var(--spacing-md) * 2 / 3)}@media (max-width: 767px){._fieldThird_tzwar_111{width:100%}}._actions_tzwar_121{display:flex;align-items:center;gap:var(--spacing-md);padding-top:var(--spacing-sm)}._submitButton_tzwar_128{margin-left:auto}._success_tzwar_134{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-lg);padding:var(--spacing-md) 0 0}._success_tzwar_134 p{color:var(--color-states-success-bg);font-weight:var(--font-weight-semibold)}._errorBanner_tzwar_149{padding:var(--spacing-md);background-color:var(--color-states-error-bg);color:var(--color-states-error-text);border-radius:var(--radius-md);font-size:var(--font-size-sm)}.split ._container_tzwar_7{flex-direction:row;gap:3rem}.split ._heading_tzwar_41,.split form{flex:.5}@media (max-width: 767px){.split ._container_tzwar_7{flex-direction:column}.split ._heading_tzwar_41,.split form{flex:1}}

package/dist/next/blocks/FormBlock/FormField.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("../../../core/components/Input/index.cjs");require("../../../core/components/Textarea/index.cjs");require("../../../core/components/Select/index.cjs");require("../../../core/components/Checkbox/index.cjs");require("../../../core/components/Radio/index.cjs");require("../../../core/components/Fieldset/index.cjs");require("../../../core/components/DatePicker/index.cjs");require("../../../core/components/Range/index.cjs");const e=require("../../../FormField-LSFCBISi.cjs");exports.FormField=e.FormField;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("../../../core/components/Input/index.cjs");require("../../../core/components/Textarea/index.cjs");require("../../../core/components/Select/index.cjs");require("../../../core/components/Checkbox/index.cjs");require("../../../core/components/Radio/index.cjs");require("../../../core/components/Fieldset/index.cjs");require("../../../core/components/DatePicker/index.cjs");require("../../../core/components/Range/index.cjs");const e=require("../../../FormField-DZdJLBIK.cjs");exports.FormField=e.FormField;

package/dist/next/blocks/FormBlock/FormField.mjs

@@ -7,7 +7,7 @@ import "../../../core/components/Radio/index.mjs";
 import "../../../core/components/Fieldset/index.mjs";
 import "../../../core/components/DatePicker/index.mjs";
 import "../../../core/components/Range/index.mjs";
-import { F as l } from "../../../FormField-oa2piuZf.js";
+import { F as l } from "../../../FormField-B1JNU2Mz.js";
 export {
   l as FormField
 };

package/dist/next/blocks/FormBlock/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("react"),W=require("../../../core/components/Form/index.cjs"),E=require("../../../index-0SVQqhAg.cjs"),M=require("../../../core/components/ProgressBar/index.cjs"),A=require("../../hooks/useStyleClasses.cjs"),e=require("../../../FormField-LSFCBISi.cjs"),_=require("./validate.cjs");function D(r,s){switch(s.type){case"SET_VALUE":return{...r,values:{...r.values,[s.name]:s.value},errors:{...r.errors,[s.name]:""}};case"SET_ERRORS":return{...r,errors:s.errors};case"CLEAR_ERROR":return{...r,errors:{...r.errors,[s.name]:""}};case"NEXT_STEP":return{...r,currentStep:r.currentStep+1,errors:{}};case"PREV_STEP":return{...r,currentStep:r.currentStep-1,errors:{}};case"SET_SUBMITTING":return{...r,isSubmitting:s.value};case"SET_RESULT":return{...r,submitResult:s.result,isSubmitting:!1};case"RESET":return{...r,currentStep:0,errors:{},submitResult:null,isSubmitting:!1};default:return r}}function G({id:r,heading:s,layout:B="vertical",maxWidth:x="md",steps:S,submitLabel:C="Submit",nextLabel:F="Next",backLabel:L="Back",successMessage:P="Thank you! Your submission has been received.",errorMessage:p="Something went wrong. Please try again.",styleOptions:$,renderRichText:c,onSubmit:v}){const N=A.useStyleClasses($??{}),j={sm:e.styles.maxWidthSm,md:e.styles.maxWidthMd,lg:e.styles.maxWidthLg,full:e.styles.maxWidthFull}[x],q=i.useMemo(()=>_.buildInitialValues(S),[]),[w,o]=i.useReducer(D,{values:q,errors:{},currentStep:0,isSubmitting:!1,submitResult:null}),{values:u,errors:T,currentStep:m,isSubmitting:b,submitResult:n}=w,y=S.length,k=y>1,f=m===y-1,I=(m+1)/y*100,a=S[m],O=i.useCallback((l,d)=>{o({type:"SET_VALUE",name:l,value:d})},[]),U=i.useCallback(()=>{const l=_.validateStep(a.fields,u);if(Object.keys(l).length>0){o({type:"SET_ERRORS",errors:l});return}o({type:"NEXT_STEP"})},[a.fields,u]),V=i.useCallback(()=>{o({type:"PREV_STEP"})},[]),R=i.useCallback(async()=>{const l=_.validateStep(a.fields,u);if(Object.keys(l).length>0){o({type:"SET_ERRORS",errors:l});return}o({type:"SET_SUBMITTING",value:!0});try{const d=await v(u);o({type:"SET_RESULT",result:d})}catch{o({type:"SET_RESULT",result:{success:!1,message:p}})}},[a.fields,u,v,p]);return n!=null&&n.success?t.jsx("section",{id:r,className:`${e.styles.formBlock} ${N}`,children:t.jsx("div",{className:`${e.styles.formInner} ${j}`,children:t.jsx("div",{className:e.styles.container,children:t.jsxs("div",{className:e.styles.success,children:[t.jsx("p",{children:n.message??P}),t.jsx(E.Button,{as:"button",variant:"secondary",onClick:()=>o({type:"RESET"}),children:"Submit another response"})]})})})}):t.jsx("section",{id:r,className:`${e.styles.formBlock} ${N}`,children:t.jsx("div",{className:`${e.styles.formInner} ${j}`,children:t.jsxs("div",{className:e.styles.container,children:[((s==null?void 0:s.title)||(s==null?void 0:s.description))&&t.jsxs("div",{className:e.styles.heading,children:[s.eyebrow&&(c==null?void 0:c({blocks:s.eyebrow,className:e.styles.eyebrow})),s.title&&(c==null?void 0:c({blocks:s.title,className:e.styles.title})),s.description&&(c==null?void 0:c({blocks:s.description}))]}),k&&t.jsxs("div",{className:e.styles.progress,children:[t.jsxs("div",{className:e.styles.progressHeader,children:[t.jsx("span",{className:e.styles.stepLabel,children:a.title}),t.jsxs("span",{className:e.styles.stepCount,children:[m+1," / ",y]})]}),t.jsx(M.ProgressBar,{progress:I,variant:"primary",size:"sm",showLabel:!1})]}),a.description&&t.jsx("p",{className:e.styles.stepDescription,children:a.description}),n&&!n.success&&t.jsx("div",{className:e.styles.errorBanner,role:"alert",children:n.message??p}),t.jsxs(W.Form,{layout:B,noValidate:!0,onSubmit:l=>{l.preventDefault(),f?R():U()},children:[t.jsx("div",{className:e.styles.fields,children:a.fields.map(l=>t.jsx(e.FormField,{field:l,value:u[l.name.current],error:T[l.name.current],onChange:O},l._key))}),(s==null?void 0:s.disclaimer)&&(c==null?void 0:c({blocks:s==null?void 0:s.disclaimer,className:e.styles.disclaimer})),t.jsxs("div",{className:e.styles.actions,children:[k&&m>0&&t.jsx(E.Button,{as:"button",type:"button",variant:"secondary",onClick:V,disabled:b,children:L}),t.jsx(E.Button,{as:"button",type:"submit",variant:"primary",disabled:b,className:e.styles.submitButton,children:b?"Submitting…":f?C:F})]})]})]})})})}exports.FormBlock=G;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("react"),W=require("../../../core/components/Form/index.cjs"),E=require("../../../index-0SVQqhAg.cjs"),M=require("../../../core/components/ProgressBar/index.cjs"),A=require("../../hooks/useStyleClasses.cjs"),e=require("../../../FormField-DZdJLBIK.cjs"),_=require("./validate.cjs");function D(r,s){switch(s.type){case"SET_VALUE":return{...r,values:{...r.values,[s.name]:s.value},errors:{...r.errors,[s.name]:""}};case"SET_ERRORS":return{...r,errors:s.errors};case"CLEAR_ERROR":return{...r,errors:{...r.errors,[s.name]:""}};case"NEXT_STEP":return{...r,currentStep:r.currentStep+1,errors:{}};case"PREV_STEP":return{...r,currentStep:r.currentStep-1,errors:{}};case"SET_SUBMITTING":return{...r,isSubmitting:s.value};case"SET_RESULT":return{...r,submitResult:s.result,isSubmitting:!1};case"RESET":return{...r,currentStep:0,errors:{},submitResult:null,isSubmitting:!1};default:return r}}function G({id:r,heading:s,layout:B="vertical",maxWidth:x="md",steps:S,submitLabel:C="Submit",nextLabel:F="Next",backLabel:L="Back",successMessage:P="Thank you! Your submission has been received.",errorMessage:p="Something went wrong. Please try again.",styleOptions:$,renderRichText:c,onSubmit:v}){const N=A.useStyleClasses($??{}),j={sm:e.styles.maxWidthSm,md:e.styles.maxWidthMd,lg:e.styles.maxWidthLg,full:e.styles.maxWidthFull}[x],q=i.useMemo(()=>_.buildInitialValues(S),[]),[w,o]=i.useReducer(D,{values:q,errors:{},currentStep:0,isSubmitting:!1,submitResult:null}),{values:u,errors:T,currentStep:m,isSubmitting:b,submitResult:n}=w,y=S.length,k=y>1,f=m===y-1,I=(m+1)/y*100,a=S[m],O=i.useCallback((l,d)=>{o({type:"SET_VALUE",name:l,value:d})},[]),U=i.useCallback(()=>{const l=_.validateStep(a.fields,u);if(Object.keys(l).length>0){o({type:"SET_ERRORS",errors:l});return}o({type:"NEXT_STEP"})},[a.fields,u]),V=i.useCallback(()=>{o({type:"PREV_STEP"})},[]),R=i.useCallback(async()=>{const l=_.validateStep(a.fields,u);if(Object.keys(l).length>0){o({type:"SET_ERRORS",errors:l});return}o({type:"SET_SUBMITTING",value:!0});try{const d=await v(u);o({type:"SET_RESULT",result:d})}catch{o({type:"SET_RESULT",result:{success:!1,message:p}})}},[a.fields,u,v,p]);return n!=null&&n.success?t.jsx("section",{id:r,className:`${e.styles.formBlock} ${N}`,children:t.jsx("div",{className:`${e.styles.formInner} ${j}`,children:t.jsx("div",{className:e.styles.container,children:t.jsxs("div",{className:e.styles.success,children:[t.jsx("p",{children:n.message??P}),t.jsx(E.Button,{as:"button",variant:"secondary",onClick:()=>o({type:"RESET"}),children:"Submit another response"})]})})})}):t.jsx("section",{id:r,className:`${e.styles.formBlock} ${N}`,children:t.jsx("div",{className:`${e.styles.formInner} ${j}`,children:t.jsxs("div",{className:e.styles.container,children:[((s==null?void 0:s.title)||(s==null?void 0:s.description))&&t.jsxs("div",{className:e.styles.heading,children:[s.eyebrow&&(c==null?void 0:c({blocks:s.eyebrow,className:e.styles.eyebrow})),s.title&&(c==null?void 0:c({blocks:s.title,className:e.styles.title})),s.description&&(c==null?void 0:c({blocks:s.description}))]}),k&&t.jsxs("div",{className:e.styles.progress,children:[t.jsxs("div",{className:e.styles.progressHeader,children:[t.jsx("span",{className:e.styles.stepLabel,children:a.title}),t.jsxs("span",{className:e.styles.stepCount,children:[m+1," / ",y]})]}),t.jsx(M.ProgressBar,{progress:I,variant:"primary",size:"sm",showLabel:!1})]}),a.description&&t.jsx("p",{className:e.styles.stepDescription,children:a.description}),n&&!n.success&&t.jsx("div",{className:e.styles.errorBanner,role:"alert",children:n.message??p}),t.jsxs(W.Form,{layout:B,noValidate:!0,onSubmit:l=>{l.preventDefault(),f?R():U()},children:[t.jsx("div",{className:e.styles.fields,children:a.fields.map(l=>t.jsx(e.FormField,{field:l,value:u[l.name.current],error:T[l.name.current],onChange:O},l._key))}),(s==null?void 0:s.disclaimer)&&(c==null?void 0:c({blocks:s==null?void 0:s.disclaimer,className:e.styles.disclaimer})),t.jsxs("div",{className:e.styles.actions,children:[k&&m>0&&t.jsx(E.Button,{as:"button",type:"button",variant:"secondary",onClick:V,disabled:b,children:L}),t.jsx(E.Button,{as:"button",type:"submit",variant:"primary",disabled:b,className:e.styles.submitButton,children:b?"Submitting…":f?C:F})]})]})]})})})}exports.FormBlock=G;

package/dist/next/blocks/FormBlock/index.mjs

@@ -4,7 +4,7 @@ import { Form as X } from "../../../core/components/Form/index.mjs";
 import { B as d } from "../../../index-aWdsapYP.js";
 import { ProgressBar as z } from "../../../core/components/ProgressBar/index.mjs";
 import { useStyleClasses as H } from "../../hooks/useStyleClasses.mjs";
-import { s as r, F as Y } from "../../../FormField-oa2piuZf.js";
+import { s as r, F as Y } from "../../../FormField-B1JNU2Mz.js";
 import { buildInitialValues as h, validateStep as L } from "./validate.mjs";
 function q(e, s) {
   switch (s.type) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quirk-ui",
   "private": false,
-  "version": "0.1.181",
+  "version": "0.1.182",
   "type": "module",
   "exports": {
     ".": {

package/dist/FormField-LSFCBISi.cjs

@@ -1 +0,0 @@
-"use strict";require('./FormField.css');const s=require("react/jsx-runtime"),q=require("./core/components/Input/index.cjs"),T=require("./core/components/Textarea/index.cjs"),_=require("./core/components/Select/index.cjs"),h=require("./core/components/Checkbox/index.cjs"),k=require("./core/components/Radio/index.cjs"),p=require("./core/components/Fieldset/index.cjs"),W=require("./core/components/DatePicker/index.cjs"),F=require("./core/components/Range/index.cjs"),j="_formBlock_1taaa_1",C="_container_1taaa_7",w="_formInner_1taaa_20",L="_maxWidthSm_1taaa_26",y="_maxWidthMd_1taaa_29",S="_maxWidthLg_1taaa_32",B="_maxWidthFull_1taaa_35",$="_heading_1taaa_41",H="_eyebrow_1taaa_47",G="_title_1taaa_51",I="_disclaimer_1taaa_55",M="_progress_1taaa_61",D="_progressHeader_1taaa_67",O="_stepLabel_1taaa_73",P="_stepCount_1taaa_79",R="_stepDescription_1taaa_84",V="_fields_1taaa_92",f="_fieldFull_1taaa_99",N="_fieldHalf_1taaa_103",z="_fieldThird_1taaa_111",A="_actions_1taaa_121",E="_submitButton_1taaa_128",J="_success_1taaa_134",K="_errorBanner_1taaa_149",u={formBlock:j,container:C,formInner:w,maxWidthSm:L,maxWidthMd:y,maxWidthLg:S,maxWidthFull:B,heading:$,eyebrow:H,title:G,disclaimer:I,progress:M,progressHeader:D,stepLabel:O,stepCount:P,stepDescription:R,fields:V,fieldFull:f,fieldHalf:N,fieldThird:z,actions:A,submitButton:E,success:J,errorBanner:K};function i(e){return(e??[]).map(t=>({label:t.label,value:t.value.current,disabled:t.disabled}))}function m(e){return(e??[]).map(t=>({label:t.label,options:t.options.map(r=>({label:r.label,value:r.value.current,disabled:r.disabled}))}))}function Q({field:e,value:t,error:r,onChange:l}){const n=e.name.current,x={full:u.fieldFull,half:u.fieldHalf,third:u.fieldThird}[e.width??"full"],c={id:n,name:n,label:e.label,required:e.required,disabled:e.disabled,helperText:e.helperText,error:r},d=()=>{switch(e.fieldType){case"text":case"email":case"phone":case"number":case"url":return s.jsx(q.Input,{...c,type:e.fieldType==="phone"?"tel":e.fieldType,placeholder:e.placeholder,value:t??"",minLength:e.minLength,maxLength:e.maxLength,fullWidth:!0,onChange:a=>l(n,a.target.value)});case"textarea":return s.jsx(T.Textarea,{...c,placeholder:e.placeholder,value:t??"",rows:e.rows??4,maxLength:e.maxLength,showCharCount:e.showCharCount,fullWidth:!0,onChange:a=>l(n,a.target.value)});case"select":{const a=e.useOptionGroups?m(e.optionGroups):i(e.options);return s.jsx(_.Select,{...c,placeholder:e.placeholder,options:a,value:t??"",fullWidth:!0,onChange:o=>l(n,o.target.value)})}case"multiselect":{const a=e.useOptionGroups?m(e.optionGroups):i(e.options);return s.jsx(_.Select,{...c,multiple:!0,options:a,value:t??[],showSelectedCount:!0,onChange:o=>l(n,o)})}case"checkbox":return s.jsx(h.Checkbox,{id:c.id,name:c.name,label:e.label,required:e.required,disabled:e.disabled,helperText:r??e.helperText,error:!!r,checked:t??!1,onChange:a=>l(n,a.target.checked)});case"checkboxGroup":{const a=t??[];return s.jsx(p.Fieldset,{legend:e.label,error:!!r,helperText:r,children:i(e.options).map(o=>s.jsx(h.Checkbox,{id:`${n}-${o.value}`,name:`${n}[]`,label:o.label,checked:a.includes(o.value),disabled:o.disabled||e.disabled,onChange:b=>{const g=b.target.checked?[...a,o.value]:a.filter(v=>v!==o.value);l(n,g)}},o.value))})}case"radio":return s.jsx(p.Fieldset,{legend:e.label,error:!!r,helperText:r,children:i(e.options).map(a=>s.jsx(k.Radio,{id:`${n}-${a.value}`,name:n,value:a.value,label:a.label,checked:t===a.value,disabled:a.disabled||e.disabled,required:e.required,onChange:()=>l(n,a.value)},a.value))});case"date":return s.jsx(W.DatePicker,{id:c.id,name:c.name,label:e.label,required:e.required,disabled:e.disabled,helperText:r??e.helperText,error:!!r,value:t??null,onChange:a=>l(n,a)});case"range":return s.jsx(F.Range,{...c,value:t??e.rangeMin??0,min:e.rangeMin??0,max:e.rangeMax??100,step:e.rangeStep??1,valuePrefix:e.rangeValuePrefix,valueSuffix:e.rangeValueSuffix,showValue:!0,onChange:a=>l(n,a)});case"hidden":return s.jsx("input",{type:"hidden",name:n,value:t??e.hiddenValue??""});default:return null}};return e.fieldType==="hidden"?d():s.jsx("div",{className:`${x}`,children:d()})}exports.FormField=Q;exports.styles=u;