@sawabona/forms 0.4.0 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormRenderer.d.ts","sourceRoot":"","sources":["../../src/lib/components/FormRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAOhD,UAAU,iBAAiB;IACvB,MAAM,EAAE,UAAU,CAAC;IACnB,QAAQ,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;CACpC;AAWD,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,iBAAiB,
|
|
1
|
+
{"version":3,"file":"FormRenderer.d.ts","sourceRoot":"","sources":["../../src/lib/components/FormRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAOhD,UAAU,iBAAiB;IACvB,MAAM,EAAE,UAAU,CAAC;IACnB,QAAQ,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;CACpC;AAWD,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAsLnE"}
|
package/dist/sawabona-forms.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:rgba(0,0,0,0);--tw-gradient-via:rgba(0,0,0,0);--tw-gradient-to:rgba(0,0,0,0);--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 rgba(0,0,0,0);--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 rgba(0,0,0,0);--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 rgba(0,0,0,0);--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 rgba(0,0,0,0);--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 rgba(0,0,0,0);--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}:root:not(#\#),:host:not(#\#){--font-sans:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-400:rgb(255, 101, 104);--color-red-500:rgb(251, 44, 54);--color-yellow-100:rgb(254, 249, 194);--color-yellow-200:rgb(255, 240, 133);--color-yellow-400:rgb(247, 201, 0);--color-yellow-500:rgb(234, 179, 0);--color-yellow-600:rgb(202, 138, 0);--color-yellow-800:rgb(135, 76, 0);--color-yellow-900:rgb(115, 62, 10);--color-green-400:rgb(5, 223, 114);--color-green-500:rgb(0, 198, 90);--color-blue-400:rgb(86, 162, 255);--color-blue-600:rgb(21, 93, 252);--color-purple-600:rgb(152, 16, 250);--color-zinc-500:rgb(113, 113, 123);--color-zinc-600:rgb(82, 82, 92);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-md:28rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-8xl:6rem;--text-8xl--line-height:1;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-tight:1.25;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--blur-sm:8px;--blur-md:12px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--font-sw-heading:"Yeseva One",serif;--font-sw-body:"Josefin Sans",sans-serif;--color-sw-primary:#716c4a;--color-sw-background:#efe9db;--color-sw-text-secondary:#171717}@supports (color: color(display-p3 0 0 0%)){
|
|
1
|
+
@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:rgba(0,0,0,0);--tw-gradient-via:rgba(0,0,0,0);--tw-gradient-to:rgba(0,0,0,0);--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 rgba(0,0,0,0);--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 rgba(0,0,0,0);--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 rgba(0,0,0,0);--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 rgba(0,0,0,0);--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 rgba(0,0,0,0);--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}:root:not(#\#),:host:not(#\#){--font-sans:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-400:rgb(255, 101, 104);--color-red-500:rgb(251, 44, 54);--color-yellow-100:rgb(254, 249, 194);--color-yellow-200:rgb(255, 240, 133);--color-yellow-400:rgb(247, 201, 0);--color-yellow-500:rgb(234, 179, 0);--color-yellow-600:rgb(202, 138, 0);--color-yellow-800:rgb(135, 76, 0);--color-yellow-900:rgb(115, 62, 10);--color-green-400:rgb(5, 223, 114);--color-green-500:rgb(0, 198, 90);--color-blue-400:rgb(86, 162, 255);--color-blue-600:rgb(21, 93, 252);--color-purple-600:rgb(152, 16, 250);--color-zinc-500:rgb(113, 113, 123);--color-zinc-600:rgb(82, 82, 92);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-md:28rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-8xl:6rem;--text-8xl--line-height:1;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-tight:1.25;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--blur-sm:8px;--blur-md:12px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--font-sw-heading:"Yeseva One",serif;--font-sw-body:"Josefin Sans",sans-serif;--color-sw-primary:#716c4a;--color-sw-background:#efe9db;--color-sw-text-primary:#716c4a;--color-sw-text-secondary:#171717}@supports (color: color(display-p3 0 0 0%)){
|
|
2
2
|
:root:not(#\#),:host:not(#\#){--color-red-400:rgb(255, 101, 104);--color-yellow-400:rgb(247, 201, 0);--color-yellow-500:rgb(234, 179, 0);--color-yellow-600:rgb(202, 138, 0);--color-yellow-800:rgb(135, 76, 0);--color-green-500:rgb(0, 198, 90);--color-blue-400:rgb(86, 162, 255)}
|
|
3
3
|
|
|
4
4
|
@media (color-gamut: p3){
|
|
@@ -2,22 +2,22 @@ var _ = Object.defineProperty, D = Object.defineProperties;
|
|
|
2
2
|
var O = Object.getOwnPropertyDescriptors;
|
|
3
3
|
var A = Object.getOwnPropertySymbols;
|
|
4
4
|
var R = Object.prototype.hasOwnProperty, P = Object.prototype.propertyIsEnumerable;
|
|
5
|
-
var T = (e, a,
|
|
6
|
-
for (var
|
|
7
|
-
R.call(a,
|
|
5
|
+
var T = (e, a, r) => a in e ? _(e, a, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[a] = r, x = (e, a) => {
|
|
6
|
+
for (var r in a || (a = {}))
|
|
7
|
+
R.call(a, r) && T(e, r, a[r]);
|
|
8
8
|
if (A)
|
|
9
|
-
for (var
|
|
10
|
-
P.call(a,
|
|
9
|
+
for (var r of A(a))
|
|
10
|
+
P.call(a, r) && T(e, r, a[r]);
|
|
11
11
|
return e;
|
|
12
12
|
}, w = (e, a) => D(e, O(a));
|
|
13
13
|
var j = (e) => typeof e == "symbol" ? e : e + "", z = (e, a) => {
|
|
14
|
-
var
|
|
15
|
-
for (var
|
|
16
|
-
R.call(e,
|
|
14
|
+
var r = {};
|
|
15
|
+
for (var t in e)
|
|
16
|
+
R.call(e, t) && a.indexOf(t) < 0 && (r[t] = e[t]);
|
|
17
17
|
if (e != null && A)
|
|
18
|
-
for (var
|
|
19
|
-
a.indexOf(
|
|
20
|
-
return
|
|
18
|
+
for (var t of A(e))
|
|
19
|
+
a.indexOf(t) < 0 && P.call(e, t) && (r[t] = e[t]);
|
|
20
|
+
return r;
|
|
21
21
|
};
|
|
22
22
|
import { jsxs as m, jsx as n } from "react/jsx-runtime";
|
|
23
23
|
import { useState as H, useMemo as K, useCallback as C, createContext as Q, useContext as V, useRef as W, useEffect as L } from "react";
|
|
@@ -25,7 +25,7 @@ import { motion as y, AnimatePresence as M } from "framer-motion";
|
|
|
25
25
|
import { Check as $, Star as U, ChevronLeft as G, ChevronRight as X } from "lucide-react";
|
|
26
26
|
function J({ schema: e, onSubmit: a }) {
|
|
27
27
|
var b;
|
|
28
|
-
const [
|
|
28
|
+
const [r, t] = H({
|
|
29
29
|
answers: {},
|
|
30
30
|
currentStepId: ((b = e.questions[0]) == null ? void 0 : b.id) || "",
|
|
31
31
|
history: [],
|
|
@@ -33,10 +33,10 @@ function J({ schema: e, onSubmit: a }) {
|
|
|
33
33
|
errors: {},
|
|
34
34
|
isCompleted: !1
|
|
35
35
|
}), d = K(
|
|
36
|
-
() => e.questions.findIndex((o) => o.id ===
|
|
37
|
-
[e.questions,
|
|
36
|
+
() => e.questions.findIndex((o) => o.id === r.currentStepId),
|
|
37
|
+
[e.questions, r.currentStepId]
|
|
38
38
|
), l = e.questions[d], h = C((o, s) => {
|
|
39
|
-
|
|
39
|
+
t((i) => w(x({}, i), {
|
|
40
40
|
answers: w(x({}, i.answers), {
|
|
41
41
|
[o]: s
|
|
42
42
|
}),
|
|
@@ -46,7 +46,7 @@ function J({ schema: e, onSubmit: a }) {
|
|
|
46
46
|
})
|
|
47
47
|
}));
|
|
48
48
|
}, []), u = C((o, s) => {
|
|
49
|
-
|
|
49
|
+
t((i) => {
|
|
50
50
|
if (s === null) {
|
|
51
51
|
const N = i.errors, { [o]: k } = N, I = z(N, [j(o)]);
|
|
52
52
|
return w(x({}, i), { errors: I });
|
|
@@ -58,37 +58,37 @@ function J({ schema: e, onSubmit: a }) {
|
|
|
58
58
|
}, []), c = C(() => {
|
|
59
59
|
var i;
|
|
60
60
|
if (!l) return !0;
|
|
61
|
-
const o =
|
|
61
|
+
const o = r.answers[l.id], s = l.validation;
|
|
62
62
|
return s && s.required && (o === void 0 || o === "" || Array.isArray(o) && o.length === 0) ? (u(l.id, ((i = e.i18n) == null ? void 0 : i.required) || "This field is required"), !1) : !0;
|
|
63
|
-
}, [l,
|
|
63
|
+
}, [l, r.answers, u, e.i18n]), p = C((o) => {
|
|
64
64
|
const s = e.questions.findIndex((i) => i.id === o.id);
|
|
65
65
|
return s < e.questions.length - 1 ? e.questions[s + 1].id : "submit";
|
|
66
66
|
}, [e.questions]), f = C(() => {
|
|
67
67
|
if (!c()) return;
|
|
68
68
|
const o = p(l);
|
|
69
|
-
o === "submit" ? (
|
|
69
|
+
o === "submit" ? (t((s) => w(x({}, s), { isCompleted: !0 })), a == null || a(r.answers)) : t((s) => w(x({}, s), {
|
|
70
70
|
history: [...s.history, s.currentStepId],
|
|
71
71
|
currentStepId: o
|
|
72
72
|
}));
|
|
73
|
-
}, [l,
|
|
74
|
-
if (
|
|
75
|
-
const o =
|
|
76
|
-
|
|
73
|
+
}, [l, r.answers, c, p, a]), g = C(() => {
|
|
74
|
+
if (r.history.length === 0) return;
|
|
75
|
+
const o = r.history[r.history.length - 1];
|
|
76
|
+
t((s) => w(x({}, s), {
|
|
77
77
|
history: s.history.slice(0, -1),
|
|
78
78
|
currentStepId: o
|
|
79
79
|
}));
|
|
80
|
-
}, [
|
|
80
|
+
}, [r.history]), v = C((o) => {
|
|
81
81
|
if (!e.questions.some((i) => i.id === o)) {
|
|
82
82
|
console.warn(`Step ${o} does not exist`);
|
|
83
83
|
return;
|
|
84
84
|
}
|
|
85
|
-
|
|
85
|
+
t((i) => w(x({}, i), {
|
|
86
86
|
history: [...i.history, i.currentStepId],
|
|
87
87
|
currentStepId: o
|
|
88
88
|
}));
|
|
89
89
|
}, [e.questions]), S = C(() => {
|
|
90
90
|
var o;
|
|
91
|
-
|
|
91
|
+
t({
|
|
92
92
|
answers: {},
|
|
93
93
|
currentStepId: ((o = e.questions[0]) == null ? void 0 : o.id) || "",
|
|
94
94
|
history: [],
|
|
@@ -97,19 +97,19 @@ function J({ schema: e, onSubmit: a }) {
|
|
|
97
97
|
isCompleted: !1
|
|
98
98
|
});
|
|
99
99
|
}, [e.questions]);
|
|
100
|
-
return w(x({},
|
|
100
|
+
return w(x({}, r), {
|
|
101
101
|
setAnswer: h,
|
|
102
102
|
nextStep: f,
|
|
103
103
|
prevStep: g,
|
|
104
104
|
jumpToStep: v,
|
|
105
|
-
submitForm: () => a == null ? void 0 : a(
|
|
105
|
+
submitForm: () => a == null ? void 0 : a(r.answers),
|
|
106
106
|
resetForm: S,
|
|
107
107
|
registerError: u,
|
|
108
108
|
// Helper to calculate progress
|
|
109
109
|
progress: d / e.questions.length * 100
|
|
110
110
|
});
|
|
111
111
|
}
|
|
112
|
-
const B = Q(void 0),
|
|
112
|
+
const B = Q(void 0), E = () => {
|
|
113
113
|
const e = V(B);
|
|
114
114
|
if (!e)
|
|
115
115
|
throw new Error("useFormContext must be used within a FormProvider");
|
|
@@ -117,7 +117,7 @@ const B = Q(void 0), F = () => {
|
|
|
117
117
|
};
|
|
118
118
|
function Y({ question: e }) {
|
|
119
119
|
var g, v, S, b, o;
|
|
120
|
-
const { answers: a, setAnswer:
|
|
120
|
+
const { answers: a, setAnswer: r, nextStep: t } = E(), d = a[e.id], l = d != null ? String(d) : "", h = W(null);
|
|
121
121
|
L(() => {
|
|
122
122
|
const s = setTimeout(() => {
|
|
123
123
|
var i;
|
|
@@ -131,9 +131,9 @@ function Y({ question: e }) {
|
|
|
131
131
|
const N = ((k = e.validation) == null ? void 0 : k.maxLength) || 2048;
|
|
132
132
|
if (i.length > N && (i = i.slice(0, N)), e.type === "number") {
|
|
133
133
|
const I = i === "" ? "" : parseFloat(i);
|
|
134
|
-
|
|
134
|
+
r(e.id, I);
|
|
135
135
|
} else
|
|
136
|
-
|
|
136
|
+
r(e.id, i);
|
|
137
137
|
}, c = () => {
|
|
138
138
|
var s, i, N, k, I;
|
|
139
139
|
if ((s = e.validation) != null && s.required && !l) return !1;
|
|
@@ -142,12 +142,12 @@ function Y({ question: e }) {
|
|
|
142
142
|
if ((N = e.validation) != null && N.pattern)
|
|
143
143
|
try {
|
|
144
144
|
if (!new RegExp(e.validation.pattern).test(l)) return !1;
|
|
145
|
-
} catch (
|
|
146
|
-
console.error("Invalid regex pattern in schema",
|
|
145
|
+
} catch (F) {
|
|
146
|
+
console.error("Invalid regex pattern in schema", F);
|
|
147
147
|
}
|
|
148
148
|
if (e.type === "number") {
|
|
149
|
-
const
|
|
150
|
-
if (!isNaN(
|
|
149
|
+
const F = parseFloat(l);
|
|
150
|
+
if (!isNaN(F) && (((k = e.validation) == null ? void 0 : k.min) !== void 0 && F < e.validation.min || ((I = e.validation) == null ? void 0 : I.max) !== void 0 && F > e.validation.max))
|
|
151
151
|
return !1;
|
|
152
152
|
}
|
|
153
153
|
}
|
|
@@ -159,7 +159,7 @@ function Y({ question: e }) {
|
|
|
159
159
|
i.classList.add("shake-animation"), setTimeout(() => i.classList.remove("shake-animation"), 500);
|
|
160
160
|
return;
|
|
161
161
|
}
|
|
162
|
-
|
|
162
|
+
t();
|
|
163
163
|
}
|
|
164
164
|
};
|
|
165
165
|
return /* @__PURE__ */ m("div", { className: "w-full relative group", children: [
|
|
@@ -198,8 +198,8 @@ function Y({ question: e }) {
|
|
|
198
198
|
}
|
|
199
199
|
function Z({ question: e }) {
|
|
200
200
|
var u;
|
|
201
|
-
const { answers: a, setAnswer:
|
|
202
|
-
|
|
201
|
+
const { answers: a, setAnswer: r, nextStep: t } = E(), d = a[e.id] || "", l = (c) => {
|
|
202
|
+
r(e.id, c), setTimeout(() => t(), 400);
|
|
203
203
|
}, h = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
|
204
204
|
return L(() => {
|
|
205
205
|
const c = (p) => {
|
|
@@ -245,17 +245,17 @@ function Z({ question: e }) {
|
|
|
245
245
|
}
|
|
246
246
|
function q({ question: e }) {
|
|
247
247
|
var l;
|
|
248
|
-
const { answers: a, setAnswer:
|
|
248
|
+
const { answers: a, setAnswer: r } = E(), t = a[e.id] || 0, d = Math.min(((l = e.validation) == null ? void 0 : l.max) || 5, 20);
|
|
249
249
|
return /* @__PURE__ */ m("div", { className: "flex flex-col gap-6", children: [
|
|
250
250
|
/* @__PURE__ */ n("div", { className: "flex gap-4 flex-wrap", children: Array.from({ length: d }).map((h, u) => {
|
|
251
|
-
const c = u + 1, p = c <=
|
|
251
|
+
const c = u + 1, p = c <= t;
|
|
252
252
|
return /* @__PURE__ */ n(
|
|
253
253
|
y.button,
|
|
254
254
|
{
|
|
255
255
|
initial: { opacity: 0, scale: 0 },
|
|
256
256
|
animate: { opacity: 1, scale: 1 },
|
|
257
257
|
transition: { delay: u * 0.05 },
|
|
258
|
-
onClick: () =>
|
|
258
|
+
onClick: () => r(e.id, c),
|
|
259
259
|
whileHover: { scale: 1.2, rotate: 5 },
|
|
260
260
|
whileTap: { scale: 0.9 },
|
|
261
261
|
className: "focus:outline-none",
|
|
@@ -276,9 +276,9 @@ function q({ question: e }) {
|
|
|
276
276
|
y.div,
|
|
277
277
|
{
|
|
278
278
|
initial: { opacity: 0, scale: 0.8 },
|
|
279
|
-
animate: { opacity:
|
|
279
|
+
animate: { opacity: t ? 1 : 0, scale: t ? 1 : 0.8 },
|
|
280
280
|
className: "font-bold text-primary text-xl",
|
|
281
|
-
children:
|
|
281
|
+
children: t ? `${t} / ${d}` : ""
|
|
282
282
|
}
|
|
283
283
|
),
|
|
284
284
|
/* @__PURE__ */ n("span", { className: "text-sm md:text-base font-medium text-muted-foreground uppercase tracking-wide", children: e.maxLabel || "Excellent" })
|
|
@@ -286,13 +286,13 @@ function q({ question: e }) {
|
|
|
286
286
|
] });
|
|
287
287
|
}
|
|
288
288
|
function ee({ question: e }) {
|
|
289
|
-
const { schema: a } =
|
|
289
|
+
const { schema: a } = E(), r = a.questions.findIndex((u) => u.id === e.id) + 1, t = a.questions.length, d = {
|
|
290
290
|
hidden: { opacity: 0, y: 20 },
|
|
291
291
|
visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] } }
|
|
292
292
|
}, l = (u) => u && u.replace(/\{\{(\w+)\}\}/g, (c, p) => {
|
|
293
293
|
const f = h.answers[p];
|
|
294
294
|
return f != null ? String(f) : "";
|
|
295
|
-
}), h =
|
|
295
|
+
}), h = E();
|
|
296
296
|
return /* @__PURE__ */ m(
|
|
297
297
|
y.div,
|
|
298
298
|
{
|
|
@@ -305,9 +305,9 @@ function ee({ question: e }) {
|
|
|
305
305
|
children: [
|
|
306
306
|
/* @__PURE__ */ m("div", { className: "flex flex-col gap-2", children: [
|
|
307
307
|
/* @__PURE__ */ n(y.div, { variants: d, className: "flex gap-4 items-baseline", children: /* @__PURE__ */ m("span", { className: "flex items-center gap-2 text-sm md:text-base font-medium text-sw-primary/90 bg-sw-primary/10 px-3 py-1 rounded-full border border-sw-primary/20 backdrop-blur-sm", children: [
|
|
308
|
-
/* @__PURE__ */ n("span", { children:
|
|
308
|
+
/* @__PURE__ */ n("span", { children: r }),
|
|
309
309
|
/* @__PURE__ */ n("span", { className: "opacity-40 text-xs", children: "/" }),
|
|
310
|
-
/* @__PURE__ */ n("span", { className: "opacity-60", children:
|
|
310
|
+
/* @__PURE__ */ n("span", { className: "opacity-60", children: t })
|
|
311
311
|
] }) }),
|
|
312
312
|
/* @__PURE__ */ m(
|
|
313
313
|
y.h2,
|
|
@@ -351,7 +351,7 @@ const te = {
|
|
|
351
351
|
};
|
|
352
352
|
function oe({ schema: e, onSubmit: a }) {
|
|
353
353
|
var S;
|
|
354
|
-
const
|
|
354
|
+
const r = J({ schema: e, onSubmit: a }), t = e.theme || {
|
|
355
355
|
backgroundColor: "#ffffff",
|
|
356
356
|
textColor: "#000000",
|
|
357
357
|
// Start with generic defaults, override in usage
|
|
@@ -359,28 +359,36 @@ function oe({ schema: e, onSubmit: a }) {
|
|
|
359
359
|
borderRadius: "8px",
|
|
360
360
|
fontFamily: "sans-serif"
|
|
361
361
|
}, d = x(x({}, te), e.i18n), l = {
|
|
362
|
-
backgroundColor:
|
|
363
|
-
color:
|
|
364
|
-
fontFamily:
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
color:
|
|
368
|
-
|
|
369
|
-
|
|
362
|
+
backgroundColor: t.backgroundColor,
|
|
363
|
+
color: t.textColor,
|
|
364
|
+
fontFamily: t.fontFamily,
|
|
365
|
+
// Inject CSS Variables for Tailwind to pick up
|
|
366
|
+
"--color-sw-primary": t.primaryColor,
|
|
367
|
+
"--color-sw-background": t.backgroundColor,
|
|
368
|
+
"--color-sw-text-primary": t.primaryColor,
|
|
369
|
+
"--color-sw-text-secondary": t.textColor,
|
|
370
|
+
"--font-sw-heading": t.fontFamily || "inherit",
|
|
371
|
+
// Fallback or use specific font prop if added
|
|
372
|
+
"--font-sw-body": t.fontFamily || "inherit"
|
|
373
|
+
}, h = t.buttonVariant === "outline", u = {
|
|
374
|
+
backgroundColor: h ? "transparent" : t.primaryColor,
|
|
375
|
+
color: h ? t.primaryColor : t.textColor,
|
|
376
|
+
border: h ? `2px solid ${t.primaryColor}` : "none",
|
|
377
|
+
borderRadius: t.borderRadius || "8px",
|
|
370
378
|
fontWeight: 600
|
|
371
379
|
}, c = {
|
|
372
|
-
color:
|
|
373
|
-
borderRadius:
|
|
380
|
+
color: t.primaryColor,
|
|
381
|
+
borderRadius: t.borderRadius || "8px",
|
|
374
382
|
fontWeight: 600
|
|
375
383
|
}, { autoReload: p, reloadDelay: f = 3e3 } = e;
|
|
376
384
|
if (L(() => {
|
|
377
|
-
if (
|
|
385
|
+
if (r.isCompleted && p) {
|
|
378
386
|
const b = setTimeout(() => {
|
|
379
|
-
|
|
387
|
+
r.resetForm();
|
|
380
388
|
}, f);
|
|
381
389
|
return () => clearTimeout(b);
|
|
382
390
|
}
|
|
383
|
-
}, [
|
|
391
|
+
}, [r.isCompleted, p, f, r.resetForm]), r.isCompleted)
|
|
384
392
|
return /* @__PURE__ */ m(
|
|
385
393
|
"div",
|
|
386
394
|
{
|
|
@@ -413,8 +421,8 @@ function oe({ schema: e, onSubmit: a }) {
|
|
|
413
421
|
]
|
|
414
422
|
}
|
|
415
423
|
);
|
|
416
|
-
const g = e.questions.find((b) => b.id ===
|
|
417
|
-
return /* @__PURE__ */ n(B.Provider, { value: w(x({},
|
|
424
|
+
const g = e.questions.find((b) => b.id === r.currentStepId), v = (e.questions.findIndex((b) => b.id === r.currentStepId) + 1) / e.questions.length * 100;
|
|
425
|
+
return /* @__PURE__ */ n(B.Provider, { value: w(x({}, r), { schema: e }), children: /* @__PURE__ */ m(
|
|
418
426
|
"div",
|
|
419
427
|
{
|
|
420
428
|
className: "w-full h-full flex flex-col relative overflow-hidden transition-colors duration-700",
|
|
@@ -429,7 +437,7 @@ function oe({ schema: e, onSubmit: a }) {
|
|
|
429
437
|
initial: { width: 0 },
|
|
430
438
|
animate: { width: `${v}%` },
|
|
431
439
|
transition: { duration: 0.5, ease: "easeInOut" },
|
|
432
|
-
style: { backgroundColor:
|
|
440
|
+
style: { backgroundColor: t.primaryColor }
|
|
433
441
|
}
|
|
434
442
|
)
|
|
435
443
|
] }),
|
|
@@ -446,7 +454,7 @@ function oe({ schema: e, onSubmit: a }) {
|
|
|
446
454
|
g.id
|
|
447
455
|
) }) }),
|
|
448
456
|
/* @__PURE__ */ m("div", { className: "w-full px-6 pt-6 pb-8 md:p-10 flex flex-col md:flex-row justify-between items-center z-20 gap-4", children: [
|
|
449
|
-
|
|
457
|
+
t.showPoweredBy !== !1 && /* @__PURE__ */ m(
|
|
450
458
|
"a",
|
|
451
459
|
{
|
|
452
460
|
href: "#",
|
|
@@ -457,8 +465,8 @@ function oe({ schema: e, onSubmit: a }) {
|
|
|
457
465
|
"span",
|
|
458
466
|
{
|
|
459
467
|
className: "text-[10px] md:text-xs font-mono font-bold tracking-[0.2em] uppercase transition-colors shadow-sw-primary",
|
|
460
|
-
style: { color:
|
|
461
|
-
children: ((S =
|
|
468
|
+
style: { color: t.brandColor || t.primaryColor },
|
|
469
|
+
children: ((S = t.poweredBy) == null ? void 0 : S.replace("Powered by ", "")) || "SAWABONA TECH"
|
|
462
470
|
}
|
|
463
471
|
)
|
|
464
472
|
]
|
|
@@ -468,8 +476,8 @@ function oe({ schema: e, onSubmit: a }) {
|
|
|
468
476
|
/* @__PURE__ */ n(
|
|
469
477
|
y.button,
|
|
470
478
|
{
|
|
471
|
-
onClick:
|
|
472
|
-
disabled:
|
|
479
|
+
onClick: r.prevStep,
|
|
480
|
+
disabled: r.history.length === 0,
|
|
473
481
|
whileHover: { scale: 1.05 },
|
|
474
482
|
whileTap: { scale: 0.95 },
|
|
475
483
|
className: "w-12 h-12 md:w-14 md:h-14 flex items-center justify-center disabled:opacity-0 disabled:pointer-events-none transition-all hover:bg-white/5 rounded-full",
|
|
@@ -480,14 +488,14 @@ function oe({ schema: e, onSubmit: a }) {
|
|
|
480
488
|
/* @__PURE__ */ m(
|
|
481
489
|
y.button,
|
|
482
490
|
{
|
|
483
|
-
onClick:
|
|
491
|
+
onClick: r.nextStep,
|
|
484
492
|
whileHover: { scale: 1.02 },
|
|
485
493
|
whileTap: { scale: 0.98 },
|
|
486
494
|
className: "px-8 py-3 md:px-10 md:py-4 text-lg font-bold shadow-2xl flex items-center gap-3 transition-all rounded-lg",
|
|
487
495
|
style: u,
|
|
488
496
|
children: [
|
|
489
|
-
/* @__PURE__ */ n("span", { children:
|
|
490
|
-
|
|
497
|
+
/* @__PURE__ */ n("span", { children: r.currentStepId === e.questions[e.questions.length - 1].id ? t.submitText || d.submit : d.next }),
|
|
498
|
+
r.currentStepId !== e.questions[e.questions.length - 1].id && /* @__PURE__ */ n(X, { size: 20, strokeWidth: 3 })
|
|
491
499
|
]
|
|
492
500
|
}
|
|
493
501
|
)
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(o,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("react/jsx-runtime"),require("react"),require("framer-motion"),require("lucide-react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","framer-motion","lucide-react"],t):(o=typeof globalThis!="undefined"?globalThis:o||self,t(o.SawabonaForms={},o.jsxRuntime,o.React,o.Motion,o.Lucide))})(this,(function(o,t,a,c,E){"use strict";var W=Object.defineProperty,U=Object.defineProperties;var G=Object.getOwnPropertyDescriptors;var A=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable;var j=(o,t,a)=>t in o?W(o,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):o[t]=a,h=(o,t)=>{for(var a in t||(t={}))P.call(t,a)&&j(o,a,t[a]);if(A)for(var a of A(t))z.call(t,a)&&j(o,a,t[a]);return o},g=(o,t)=>U(o,G(t));var $=o=>typeof o=="symbol"?o:o+"",B=(o,t)=>{var a={};for(var c in o)P.call(o,c)&&t.indexOf(c)<0&&(a[c]=o[c]);if(o!=null&&A)for(var c of A(o))t.indexOf(c)<0&&z.call(o,c)&&(a[c]=o[c]);return a};function O({schema:e,onSubmit:f}){var v;const[s,r]=a.useState({answers:{},currentStepId:((v=e.questions[0])==null?void 0:v.id)||"",history:[],isSubmitting:!1,errors:{},isCompleted:!1}),p=a.useMemo(()=>e.questions.findIndex(i=>i.id===s.currentStepId),[e.questions,s.currentStepId]),d=e.questions[p],w=a.useCallback((i,l)=>{r(n=>g(h({},n),{answers:g(h({},n.answers),{[i]:l}),errors:g(h({},n.errors),{[i]:""})}))},[]),x=a.useCallback((i,l)=>{r(n=>{if(l===null){const N=n.errors,{[i]:S}=N,I=B(N,[$(i)]);return g(h({},n),{errors:I})}return g(h({},n),{errors:g(h({},n.errors),{[i]:l})})})},[]),u=a.useCallback(()=>{var n;if(!d)return!0;const i=s.answers[d.id],l=d.validation;return l&&l.required&&(i===void 0||i===""||Array.isArray(i)&&i.length===0)?(x(d.id,((n=e.i18n)==null?void 0:n.required)||"This field is required"),!1):!0},[d,s.answers,x,e.i18n]),m=a.useCallback(i=>{const l=e.questions.findIndex(n=>n.id===i.id);return l<e.questions.length-1?e.questions[l+1].id:"submit"},[e.questions]),y=a.useCallback(()=>{if(!u())return;const i=m(d);i==="submit"?(r(l=>g(h({},l),{isCompleted:!0})),f==null||f(s.answers)):r(l=>g(h({},l),{history:[...l.history,l.currentStepId],currentStepId:i}))},[d,s.answers,u,m,f]),b=a.useCallback(()=>{if(s.history.length===0)return;const i=s.history[s.history.length-1];r(l=>g(h({},l),{history:l.history.slice(0,-1),currentStepId:i}))},[s.history]),C=a.useCallback(i=>{if(!e.questions.some(n=>n.id===i)){console.warn(`Step ${i} does not exist`);return}r(n=>g(h({},n),{history:[...n.history,n.currentStepId],currentStepId:i}))},[e.questions]),k=a.useCallback(()=>{var i;r({answers:{},currentStepId:((i=e.questions[0])==null?void 0:i.id)||"",history:[],isSubmitting:!1,errors:{},isCompleted:!1})},[e.questions]);return g(h({},s),{setAnswer:w,nextStep:y,prevStep:b,jumpToStep:C,submitForm:()=>f==null?void 0:f(s.answers),resetForm:k,registerError:x,progress:p/e.questions.length*100})}const L=a.createContext(void 0),T=()=>{const e=a.useContext(L);if(!e)throw new Error("useFormContext must be used within a FormProvider");return e};function _({question:e}){var b,C,k,v,i;const{answers:f,setAnswer:s,nextStep:r}=T(),p=f[e.id],d=p!=null?String(p):"",w=a.useRef(null);a.useEffect(()=>{const l=setTimeout(()=>{var n;(n=w.current)==null||n.focus()},500);return()=>clearTimeout(l)},[e.id]);const x=l=>{var S;let n=l.target.value;const N=((S=e.validation)==null?void 0:S.maxLength)||2048;if(n.length>N&&(n=n.slice(0,N)),e.type==="number"){const I=n===""?"":parseFloat(n);s(e.id,I)}else s(e.id,n)},u=()=>{var l,n,N,S,I;if((l=e.validation)!=null&&l.required&&!d)return!1;if(d){if((n=e.validation)!=null&&n.minLength&&d.length<e.validation.minLength||e.type==="email"&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(d))return!1;if((N=e.validation)!=null&&N.pattern)try{if(!new RegExp(e.validation.pattern).test(d))return!1}catch(F){console.error("Invalid regex pattern in schema",F)}if(e.type==="number"){const F=parseFloat(d);if(!isNaN(F)&&(((S=e.validation)==null?void 0:S.min)!==void 0&&F<e.validation.min||((I=e.validation)==null?void 0:I.max)!==void 0&&F>e.validation.max))return!1}}return!0},m=l=>{if(l.key==="Enter"&&!l.shiftKey){if(l.preventDefault(),!u()){const n=document.querySelector(".sawabona-form-container")||document.body;n.classList.add("shake-animation"),setTimeout(()=>n.classList.remove("shake-animation"),500);return}r()}};return t.jsxs("div",{className:"w-full relative group",children:[t.jsx("input",{ref:w,type:e.type,value:typeof d=="string"||typeof d=="number"?d:"",onChange:x,onKeyDown:m,placeholder:e.placeholder,minLength:(b=e.validation)==null?void 0:b.minLength,maxLength:((C=e.validation)==null?void 0:C.maxLength)||2048,min:(k=e.validation)==null?void 0:k.min,max:(v=e.validation)==null?void 0:v.max,pattern:(i=e.validation)==null?void 0:i.pattern,className:`
|
|
2
2
|
w-full bg-transparent border-b-2 border-sw-text-secondary/20
|
|
3
3
|
py-4 text-2xl md:text-3xl font-medium outline-none transition-colors
|
|
4
4
|
placeholder:text-sw-text-secondary/30
|
|
5
5
|
focus:border-sw-primary
|
|
6
6
|
font-sw-heading
|
|
7
|
-
`,autoFocus:!0}),void 0,t.jsxs("p",{className:"text-sm opacity-50 mt-4",children:[e.type==="email"&&"Press Enter to continue",e.type==="text"&&"Press Enter to continue",e.type==="number"&&"Press Enter to continue",e.type==="url"&&"Press Enter to continue"]})]})}function D({question:e}){var x;const{answers:f,setAnswer:s,nextStep:r}=T(),p=f[e.id]||"",d=u=>{s(e.id,u),setTimeout(()=>r(),400)},w="ABCDEFGHIJKLMNOPQRSTUVWXYZ";return
|
|
7
|
+
`,autoFocus:!0}),void 0,t.jsxs("p",{className:"text-sm opacity-50 mt-4",children:[e.type==="email"&&"Press Enter to continue",e.type==="text"&&"Press Enter to continue",e.type==="number"&&"Press Enter to continue",e.type==="url"&&"Press Enter to continue"]})]})}function D({question:e}){var x;const{answers:f,setAnswer:s,nextStep:r}=T(),p=f[e.id]||"",d=u=>{s(e.id,u),setTimeout(()=>r(),400)},w="ABCDEFGHIJKLMNOPQRSTUVWXYZ";return a.useEffect(()=>{const u=m=>{var C;const y=m.key.toUpperCase(),b=w.indexOf(y);b>=0&&b<(((C=e.options)==null?void 0:C.length)||0)&&d(e.options[b].value)};return window.addEventListener("keydown",u),()=>window.removeEventListener("keydown",u)},[e.options,e.id]),t.jsx("div",{className:"flex flex-col gap-3 w-full max-w-xl",children:(x=e.options)==null?void 0:x.map((u,m)=>{const y=Array.isArray(p)?p.includes(u.value):p===u.value;return t.jsxs(c.motion.button,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{delay:m*.05},onClick:()=>d(u.value),className:`
|
|
8
8
|
w-full text-left p-4 rounded-lg border-2 transition-all duration-200
|
|
9
9
|
flex items-center justify-between group
|
|
10
10
|
${y?"border-sw-primary bg-sw-primary/5 text-sw-primary":"border-sw-text-secondary/10 hover:border-sw-primary/50 hover:bg-sw-primary/5"}
|
|
11
11
|
`,children:[t.jsxs("span",{className:"text-lg font-medium flex items-center gap-3",children:[t.jsx("span",{className:`
|
|
12
12
|
w-6 h-6 rounded-full border-2 flex items-center justify-center transition-colors
|
|
13
13
|
${y?"border-sw-primary bg-sw-primary":"border-sw-text-secondary/30 group-hover:border-sw-primary/50"}
|
|
14
|
-
`,children:y&&t.jsx(
|
|
14
|
+
`,children:y&&t.jsx(E.Check,{size:14,className:"text-sw-background"})}),u.label]}),t.jsxs("span",{className:"opacity-0 group-hover:opacity-100 transition-opacity text-xs font-mono uppercase tracking-widest text-sw-text-secondary/50",children:["Select ",t.jsxs("span",{className:"hidden md:inline",children:["Key ",m+1]})]})]},String(u.value))})})}function H({question:e}){var d;const{answers:f,setAnswer:s}=T(),r=f[e.id]||0,p=Math.min(((d=e.validation)==null?void 0:d.max)||5,20);return t.jsxs("div",{className:"flex flex-col gap-6",children:[t.jsx("div",{className:"flex gap-4 flex-wrap",children:Array.from({length:p}).map((w,x)=>{const u=x+1,m=u<=r;return t.jsx(c.motion.button,{initial:{opacity:0,scale:0},animate:{opacity:1,scale:1},transition:{delay:x*.05},onClick:()=>s(e.id,u),whileHover:{scale:1.2,rotate:5},whileTap:{scale:.9},className:"focus:outline-none",children:t.jsx(E.Star,{className:`w-12 h-12 md:w-16 md:h-16 transition-all duration-300 ${m?"fill-yellow-400 text-yellow-400 drop-shadow-[0_0_15px_rgba(250,204,21,0.4)]":"text-zinc-600 hover:text-yellow-400/50"}`,strokeWidth:1.5})},x)})}),t.jsxs("div",{className:"flex justify-between w-full max-w-[300px] md:max-w-[400px] px-2 items-center",children:[t.jsx("span",{className:"text-sm md:text-base font-medium text-sw-text-secondary/50 uppercase tracking-wide",children:e.minLabel||"Poor"}),t.jsx(c.motion.div,{initial:{opacity:0,scale:.8},animate:{opacity:r?1:0,scale:r?1:.8},className:"font-bold text-primary text-xl",children:r?`${r} / ${p}`:""}),t.jsx("span",{className:"text-sm md:text-base font-medium text-muted-foreground uppercase tracking-wide",children:e.maxLabel||"Excellent"})]})]})}function K({question:e}){const{schema:f}=T(),s=f.questions.findIndex(x=>x.id===e.id)+1,r=f.questions.length,p={hidden:{opacity:0,y:20},visible:{opacity:1,y:0,transition:{duration:.5,ease:[.22,1,.36,1]}}},d=x=>x&&x.replace(/\{\{(\w+)\}\}/g,(u,m)=>{const y=w.answers[m];return y!=null?String(y):""}),w=T();return t.jsxs(c.motion.div,{className:"flex flex-col gap-8 w-full max-w-4xl mx-auto",initial:"hidden",animate:"visible",variants:{visible:{transition:{staggerChildren:.1}}},children:[t.jsxs("div",{className:"flex flex-col gap-2",children:[t.jsx(c.motion.div,{variants:p,className:"flex gap-4 items-baseline",children:t.jsxs("span",{className:"flex items-center gap-2 text-sm md:text-base font-medium text-sw-primary/90 bg-sw-primary/10 px-3 py-1 rounded-full border border-sw-primary/20 backdrop-blur-sm",children:[t.jsx("span",{children:s}),t.jsx("span",{className:"opacity-40 text-xs",children:"/"}),t.jsx("span",{className:"opacity-60",children:r})]})}),t.jsxs(c.motion.h2,{variants:p,className:"text-3xl md:text-4xl lg:text-5xl font-bold leading-tight tracking-tight text-pretty mt-2 font-sw-heading",children:[d(e.title)," ",t.jsx("span",{className:"text-sw-primary",children:"*"})]}),e.description&&t.jsx(c.motion.p,{variants:p,className:"text-lg md:text-xl text-muted-foreground font-normal leading-relaxed max-w-2xl mt-2",children:d(e.description)})]}),t.jsx(c.motion.div,{variants:p,className:"w-full mt-6",children:e.type==="text"||e.type==="email"||e.type==="number"||e.type==="url"?t.jsx(_,{question:e}):e.type==="select"?t.jsx(D,{question:e}):e.type==="rating"?t.jsx(H,{question:e}):t.jsxs("div",{className:"p-4 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200 rounded",children:["Unsupported question type: ",e.type," (ID: ",e.id,")"]})})]})}const Q={next:"Next",back:"Back",submit:"Submit",required:"Required",optional:"Optional",stepInfo:"Question {{current}} of {{total}}"};function V({schema:e,onSubmit:f}){var k;const s=O({schema:e,onSubmit:f}),r=e.theme||{backgroundColor:"#ffffff",textColor:"#000000",primaryColor:"#000000",borderRadius:"8px",fontFamily:"sans-serif"},p=h(h({},Q),e.i18n),d={backgroundColor:r.backgroundColor,color:r.textColor,fontFamily:r.fontFamily,"--color-sw-primary":r.primaryColor,"--color-sw-background":r.backgroundColor,"--color-sw-text-primary":r.primaryColor,"--color-sw-text-secondary":r.textColor,"--font-sw-heading":r.fontFamily||"inherit","--font-sw-body":r.fontFamily||"inherit"},w=r.buttonVariant==="outline",x={backgroundColor:w?"transparent":r.primaryColor,color:w?r.primaryColor:r.textColor,border:w?`2px solid ${r.primaryColor}`:"none",borderRadius:r.borderRadius||"8px",fontWeight:600},u={color:r.primaryColor,borderRadius:r.borderRadius||"8px",fontWeight:600},{autoReload:m,reloadDelay:y=3e3}=e;if(a.useEffect(()=>{if(s.isCompleted&&m){const v=setTimeout(()=>{s.resetForm()},y);return()=>clearTimeout(v)}},[s.isCompleted,m,y,s.resetForm]),s.isCompleted)return t.jsxs("div",{className:"flex flex-col items-center justify-center h-full w-full p-8 text-center relative overflow-hidden",style:d,children:[m&&t.jsx(c.motion.div,{initial:{width:"0%"},animate:{width:"100%"},transition:{duration:y/1e3,ease:"linear"},className:"absolute top-0 left-0 h-1 bg-green-500 z-50"}),t.jsxs(c.motion.div,{initial:{scale:.9,opacity:0,y:20},animate:{scale:1,opacity:1,y:0},transition:{duration:.6,ease:[.22,1,.36,1]},className:"flex flex-col items-center",children:[t.jsx("div",{className:"mb-6 p-4 rounded-full bg-green-500/20 text-green-500 w-24 h-24 flex items-center justify-center",children:t.jsx(E.Check,{size:48})}),t.jsx("h1",{className:"text-4xl md:text-5xl font-bold mb-4 tracking-tight",children:"Obrigado!"}),t.jsx("p",{className:"text-xl opacity-70 max-w-md leading-relaxed",children:"Suas respostas foram enviadas com sucesso."})]})]});const b=e.questions.find(v=>v.id===s.currentStepId),C=(e.questions.findIndex(v=>v.id===s.currentStepId)+1)/e.questions.length*100;return t.jsx(L.Provider,{value:g(h({},s),{schema:e}),children:t.jsxs("div",{className:"w-full h-full flex flex-col relative overflow-hidden transition-colors duration-700",style:d,children:[t.jsxs("div",{className:"absolute top-0 left-0 w-full h-1 z-50",children:[t.jsx("div",{className:"absolute top-0 left-0 w-full h-full bg-current opacity-10"}),t.jsx(c.motion.div,{className:"h-full relative z-10",initial:{width:0},animate:{width:`${C}%`},transition:{duration:.5,ease:"easeInOut"},style:{backgroundColor:r.primaryColor}})]}),t.jsx("div",{className:"flex-1 flex flex-col items-center justify-center p-6 md:p-12 w-full max-w-5xl mx-auto z-10",children:t.jsx(c.AnimatePresence,{mode:"wait",children:b&&t.jsx(c.motion.div,{initial:{opacity:0,y:40},animate:{opacity:1,y:0},exit:{opacity:0,y:-40},transition:{duration:.5,ease:[.22,1,.36,1]},className:"w-full",children:t.jsx(K,{question:b})},b.id)})}),t.jsxs("div",{className:"w-full px-6 pt-6 pb-8 md:p-10 flex flex-col md:flex-row justify-between items-center z-20 gap-4",children:[r.showPoweredBy!==!1&&t.jsxs("a",{href:"#",className:"order-3 md:order-1 group flex items-center gap-2 px-3 py-1.5 rounded-md border border-white/10 bg-black/20 hover:border-sw-primary/50 hover:bg-black/40 transition-all duration-300 cursor-pointer no-underline backdrop-blur-sm",children:[t.jsx("span",{className:"text-[10px] md:text-xs font-mono font-medium tracking-[0.2em] uppercase text-muted-foreground group-hover:text-muted-foreground/80 transition-colors",children:"Powered By"}),t.jsx("span",{className:"text-[10px] md:text-xs font-mono font-bold tracking-[0.2em] uppercase transition-colors shadow-sw-primary",style:{color:r.brandColor||r.primaryColor},children:((k=r.poweredBy)==null?void 0:k.replace("Powered by ",""))||"SAWABONA TECH"})]}),t.jsxs("div",{className:"flex items-center gap-4 order-2 md:order-3 ml-auto",children:[t.jsx(c.motion.button,{onClick:s.prevStep,disabled:s.history.length===0,whileHover:{scale:1.05},whileTap:{scale:.95},className:"w-12 h-12 md:w-14 md:h-14 flex items-center justify-center disabled:opacity-0 disabled:pointer-events-none transition-all hover:bg-white/5 rounded-full",style:u,children:t.jsx(E.ChevronLeft,{size:24})}),t.jsxs(c.motion.button,{onClick:s.nextStep,whileHover:{scale:1.02},whileTap:{scale:.98},className:"px-8 py-3 md:px-10 md:py-4 text-lg font-bold shadow-2xl flex items-center gap-3 transition-all rounded-lg",style:x,children:[t.jsx("span",{children:s.currentStepId===e.questions[e.questions.length-1].id?r.submitText||p.submit:p.next}),s.currentStepId!==e.questions[e.questions.length-1].id&&t.jsx(E.ChevronRight,{size:20,strokeWidth:3})]})]})]})]})})}o.FormRenderer=V,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})}));
|