zabi-components 2.0.4 → 2.1.1

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.
@@ -0,0 +1,302 @@
1
+ import { y as U, l as _, p as a, z as d, A as B, i as $, f as I, a as A, s as W, c as z, d as T, g as q, x as M, k as r, m as c, h as k, o as u, b as R, e as F, j as G, t as H, v as J, u as L, B as O, n as K } from "./props-B4BdFk2B.js";
2
+ function re(t, e) {
3
+ U(() => {
4
+ var s = t.getRootNode(), i = (
5
+ /** @type {ShadowRoot} */
6
+ s.host ? (
7
+ /** @type {ShadowRoot} */
8
+ s
9
+ ) : (
10
+ /** @type {Document} */
11
+ s.head ?? /** @type {Document} */
12
+ s.ownerDocument.head
13
+ )
14
+ );
15
+ if (!i.querySelector("#" + e.hash)) {
16
+ const l = document.createElement("style");
17
+ l.id = e.hash, l.textContent = e.code, i.appendChild(l);
18
+ }
19
+ });
20
+ }
21
+ var X = I("<button><!></button>");
22
+ function ne(t, e) {
23
+ const s = _(e, ["children", "$$slots", "$$events", "$$legacy"]), i = _(s, ["variant", "size", "disabled", "type"]);
24
+ q(e, !1);
25
+ const l = c(), n = c(), h = c();
26
+ let b = a(e, "variant", 8, "primary"), f = a(e, "size", 8, "md"), y = a(e, "disabled", 8, !1), p = a(e, "type", 8, "button");
27
+ d(() => {
28
+ }, () => {
29
+ u(l, {
30
+ sm: "px-3 py-1.5 text-sm",
31
+ md: "px-4 py-2 text-sm",
32
+ lg: "px-5 py-3 text-base"
33
+ });
34
+ }), d(() => {
35
+ }, () => {
36
+ u(n, {
37
+ primary: "bg-blue-600 text-white hover:bg-blue-700",
38
+ secondary: "bg-gray-600 text-white hover:bg-gray-700",
39
+ danger: "bg-red-600 text-white hover:bg-red-700"
40
+ });
41
+ }), d(
42
+ () => (r(l), M(f()), r(n), M(b())),
43
+ () => {
44
+ u(h, [
45
+ "inline-flex items-center justify-center font-medium rounded-md",
46
+ "disabled:opacity-50 disabled:cursor-not-allowed",
47
+ r(l)[f()],
48
+ r(n)[b()]
49
+ ].join(" "));
50
+ }
51
+ ), B(), $();
52
+ var v = X();
53
+ A(v, () => ({
54
+ type: p(),
55
+ class: r(h),
56
+ disabled: y(),
57
+ ...i
58
+ }));
59
+ var C = k(v);
60
+ W(C, e, "default", {}), z(t, v), T();
61
+ }
62
+ function Q(t) {
63
+ const e = {
64
+ default: "input-variant-default",
65
+ success: "input-variant-success",
66
+ warning: "input-variant-warning",
67
+ error: "input-variant-error",
68
+ info: "input-variant-info"
69
+ };
70
+ return e[t] || e.default;
71
+ }
72
+ function ie(t) {
73
+ const e = {
74
+ default: "card-variant-default",
75
+ success: "card-variant-success",
76
+ warning: "card-variant-warning",
77
+ error: "card-variant-error",
78
+ info: "card-variant-info"
79
+ };
80
+ return e[t] || e.default;
81
+ }
82
+ function N(t, e) {
83
+ const s = {
84
+ default: `variant-${e}-default`,
85
+ success: `variant-${e}-success`,
86
+ warning: `variant-${e}-warning`,
87
+ error: `variant-${e}-error`,
88
+ info: `variant-${e}-info`
89
+ };
90
+ return s[t] || s.default;
91
+ }
92
+ function oe(t) {
93
+ return {
94
+ border: N(t, "border"),
95
+ text: N(t, "text"),
96
+ bg: N(t, "bg")
97
+ };
98
+ }
99
+ function de(t, e) {
100
+ return t.reduce((s, i) => (s[i] = `${e}-${i}`, s), {});
101
+ }
102
+ var Y = I("<label> </label>"), Z = I("<div><!> <input/></div>");
103
+ function ce(t, e) {
104
+ const s = _(e, ["children", "$$slots", "$$events", "$$legacy"]), i = _(s, [
105
+ "value",
106
+ "type",
107
+ "label",
108
+ "placeholder",
109
+ "disabled",
110
+ "size",
111
+ "variant"
112
+ ]);
113
+ q(e, !1);
114
+ const l = c(), n = c(), h = c(), b = c();
115
+ let f = a(e, "value", 12, ""), y = a(e, "type", 8, "text"), p = a(e, "label", 8, ""), v = a(e, "placeholder", 8, ""), C = a(e, "disabled", 8, !1), w = a(e, "size", 8, "md"), g = a(e, "variant", 8, "default");
116
+ const x = `input-${Math.random().toString(36).substr(2, 9)}`;
117
+ function j(m) {
118
+ const o = m.target;
119
+ f(o.value);
120
+ }
121
+ d(() => {
122
+ }, () => {
123
+ u(l, {
124
+ sm: "px-3 py-1.5 text-sm",
125
+ md: "px-4 py-2 text-sm",
126
+ lg: "px-5 py-3 text-base"
127
+ });
128
+ }), d(() => M(g()), () => {
129
+ u(n, Q(g()));
130
+ }), d(
131
+ () => (r(l), M(w()), r(n)),
132
+ () => {
133
+ u(h, [
134
+ "w-full rounded-md transition-colors duration-200",
135
+ "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-surface",
136
+ "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-disabled",
137
+ r(l)[w()],
138
+ r(n)
139
+ ].join(" "));
140
+ }
141
+ ), d(() => {
142
+ }, () => {
143
+ u(b, "block text-sm font-medium text-primary mb-1");
144
+ }), B(), $();
145
+ var V = Z(), P = k(V);
146
+ {
147
+ var D = (m) => {
148
+ var o = Y(), E = k(o);
149
+ H(() => {
150
+ J(o, "for", x), L(o, 1, O(r(b))), K(E, p());
151
+ }), z(m, o);
152
+ };
153
+ R(P, (m) => {
154
+ p() && m(D);
155
+ });
156
+ }
157
+ var S = G(P, 2);
158
+ A(
159
+ S,
160
+ () => ({
161
+ id: x,
162
+ type: y(),
163
+ value: f(),
164
+ placeholder: v(),
165
+ disabled: C(),
166
+ class: r(h),
167
+ ...i
168
+ }),
169
+ void 0,
170
+ void 0,
171
+ void 0,
172
+ !0
173
+ ), F("input", S, j), z(t, V), T();
174
+ }
175
+ var ee = I("<label> </label>"), te = I("<div><!> <textarea></textarea></div>");
176
+ function ue(t, e) {
177
+ const s = _(e, ["children", "$$slots", "$$events", "$$legacy"]), i = _(s, [
178
+ "value",
179
+ "label",
180
+ "placeholder",
181
+ "disabled",
182
+ "rows",
183
+ "size",
184
+ "variant"
185
+ ]);
186
+ q(e, !1);
187
+ const l = c(), n = c(), h = c(), b = c();
188
+ let f = a(e, "value", 12, ""), y = a(e, "label", 8, ""), p = a(e, "placeholder", 8, ""), v = a(e, "disabled", 8, !1), C = a(e, "rows", 8, 4), w = a(e, "size", 8, "md"), g = a(e, "variant", 8, "default");
189
+ const x = `textarea-${Math.random().toString(36).substr(2, 9)}`;
190
+ function j(m) {
191
+ const o = m.target;
192
+ f(o.value);
193
+ }
194
+ d(() => {
195
+ }, () => {
196
+ u(l, {
197
+ sm: "px-3 py-1.5 text-sm",
198
+ md: "px-4 py-2 text-sm",
199
+ lg: "px-5 py-3 text-base"
200
+ });
201
+ }), d(() => M(g()), () => {
202
+ u(n, Q(g()));
203
+ }), d(
204
+ () => (r(l), M(w()), r(n)),
205
+ () => {
206
+ u(h, [
207
+ "w-full rounded-md transition-colors duration-200",
208
+ "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-surface",
209
+ "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-disabled",
210
+ "resize-y",
211
+ r(l)[w()],
212
+ r(n)
213
+ ].join(" "));
214
+ }
215
+ ), d(() => {
216
+ }, () => {
217
+ u(b, "block text-sm font-medium text-primary mb-1");
218
+ }), B(), $();
219
+ var V = te(), P = k(V);
220
+ {
221
+ var D = (m) => {
222
+ var o = ee(), E = k(o);
223
+ H(() => {
224
+ J(o, "for", x), L(o, 1, O(r(b))), K(E, y());
225
+ }), z(m, o);
226
+ };
227
+ R(P, (m) => {
228
+ y() && m(D);
229
+ });
230
+ }
231
+ var S = G(P, 2);
232
+ A(S, () => ({
233
+ id: x,
234
+ value: f(),
235
+ placeholder: p(),
236
+ disabled: v(),
237
+ rows: C(),
238
+ class: r(h),
239
+ ...i
240
+ })), F("input", S, j), z(t, V), T();
241
+ }
242
+ var ae = I('<label class="text-sm font-medium cursor-pointer"> </label>'), se = I('<div class="flex items-center gap-2"><input/> <!></div>');
243
+ function be(t, e) {
244
+ const s = _(e, ["children", "$$slots", "$$events", "$$legacy"]), i = _(s, ["checked", "disabled", "label"]);
245
+ q(e, !1);
246
+ const l = c();
247
+ let n = a(e, "checked", 12, !1), h = a(e, "disabled", 8, !1), b = a(e, "label", 8, "");
248
+ const f = `checkbox-${Math.random().toString(36).substr(2, 9)}`;
249
+ function y(g) {
250
+ const x = g.target;
251
+ n(x.checked);
252
+ }
253
+ d(() => {
254
+ }, () => {
255
+ u(l, [
256
+ "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded",
257
+ "focus:ring-blue-500 focus:ring-2",
258
+ "disabled:opacity-50 disabled:cursor-not-allowed"
259
+ ].join(" "));
260
+ }), B(), $();
261
+ var p = se(), v = k(p);
262
+ A(
263
+ v,
264
+ () => ({
265
+ type: "checkbox",
266
+ id: f,
267
+ checked: n(),
268
+ disabled: h(),
269
+ class: r(l),
270
+ ...i
271
+ }),
272
+ void 0,
273
+ void 0,
274
+ void 0,
275
+ !0
276
+ );
277
+ var C = G(v, 2);
278
+ {
279
+ var w = (g) => {
280
+ var x = ae(), j = k(x);
281
+ H(() => {
282
+ J(x, "for", f), K(j, b());
283
+ }), z(g, x);
284
+ };
285
+ R(C, (g) => {
286
+ b() && g(w);
287
+ });
288
+ }
289
+ F("change", v, y), z(t, p), T();
290
+ }
291
+ export {
292
+ ne as B,
293
+ be as C,
294
+ ce as I,
295
+ ue as T,
296
+ ie as a,
297
+ N as b,
298
+ oe as c,
299
+ de as d,
300
+ re as e,
301
+ Q as g
302
+ };
@@ -0,0 +1,78 @@
1
+ import { l as p, p as l, f as u, a as G, s as f, b as P, t as z, e as j, c as b, h as a, j as i, k as s, m as ea, n as H, o as ta, q as sa, r as ra, u as E, v as va, w as $, x as ia } from "./props-B4BdFk2B.js";
2
+ import { T as F } from "./ThemeToggle-Cm25ThjX.js";
3
+ var na = u('<div class="mt-2"><!></div>'), la = u('<div class="md:hidden"><div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 border-t border-gray-200"><!> <div class="pt-4"><!> <!></div></div></div>'), da = u('<nav><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex justify-between items-center h-16"><div class="flex-shrink-0"><button type="button" class="text-xl font-bold text-gray-900"> </button></div> <div class="hidden md:block"><div class="ml-10 flex items-baseline space-x-4"><!></div></div> <div class="hidden md:block"><div class="ml-4 flex items-center space-x-4"><!> <!></div></div> <div class="md:hidden"><button type="button" class="text-gray-500 hover:text-gray-600" aria-label="Toggle menu"><span class="text-2xl">☰</span></button></div></div> <!></div></nav>');
4
+ function _a(y, e) {
5
+ const k = p(e, ["children", "$$slots", "$$events", "$$legacy"]), T = p(k, ["brand", "showThemeToggle", "className"]);
6
+ let _ = l(e, "brand", 8, ""), x = l(e, "showThemeToggle", 8, !0), m = l(e, "className", 8, ""), d = ea(!1);
7
+ function o() {
8
+ ta(d, !s(d));
9
+ }
10
+ function g() {
11
+ }
12
+ var n = da();
13
+ G(n, () => ({
14
+ class: `bg-white border-b border-gray-200 sticky top-0 z-50 ${m() ?? ""}`,
15
+ ...T
16
+ }));
17
+ var t = a(n), c = a(t), r = a(c), h = a(r), w = a(h), C = i(r, 2), I = a(C), J = a(I);
18
+ f(J, e, "nav", {});
19
+ var M = i(C, 2), K = a(M), q = a(K);
20
+ f(q, e, "actions", {});
21
+ var L = i(q, 2);
22
+ {
23
+ var Q = (v) => {
24
+ F(v, {});
25
+ };
26
+ P(L, (v) => {
27
+ x() && v(Q);
28
+ });
29
+ }
30
+ var R = i(M, 2), S = a(R), U = i(c, 2);
31
+ {
32
+ var V = (v) => {
33
+ var B = la(), W = a(B), D = a(W);
34
+ f(D, e, "nav", {});
35
+ var X = i(D, 2), O = a(X);
36
+ f(O, e, "actions", {});
37
+ var Y = i(O, 2);
38
+ {
39
+ var Z = (N) => {
40
+ var A = na(), aa = a(A);
41
+ F(aa, {}), b(N, A);
42
+ };
43
+ P(Y, (N) => {
44
+ x() && N(Z);
45
+ });
46
+ }
47
+ b(v, B);
48
+ };
49
+ P(U, (v) => {
50
+ s(d) && v(V);
51
+ });
52
+ }
53
+ z(() => H(w, _())), j("click", h, g), j("click", S, o), b(y, n);
54
+ }
55
+ var oa = u("<li><a> </a></li>"), ca = u("<nav><ul></ul></nav>");
56
+ function xa(y, e) {
57
+ const k = p(e, ["children", "$$slots", "$$events", "$$legacy"]), T = p(k, ["variant", "items", "currentPath"]);
58
+ let _ = l(e, "variant", 8, "header"), x = l(e, "items", 24, () => []), m = l(e, "currentPath", 8, "");
59
+ function d(n, t) {
60
+ t.preventDefault();
61
+ }
62
+ var o = ca();
63
+ G(o, () => ({
64
+ class: `navigation navigation-${_() ?? ""}`,
65
+ ...T
66
+ }));
67
+ var g = a(o);
68
+ sa(g, 5, x, ra, (n, t) => {
69
+ var c = oa(), r = a(c), h = a(r);
70
+ z(() => {
71
+ va(r, "href", (s(t), $(() => s(t).href))), E(r, 1, `px-3 py-2 text-sm font-medium rounded-md transition-colors ${ia(m()), s(t), $(() => m() === s(t).href ? "bg-blue-100 text-blue-700" : "text-gray-600 hover:text-gray-900 hover:bg-gray-100") ?? ""}`), H(h, (s(t), $(() => s(t).label)));
72
+ }), j("click", r, (w) => d(s(t), w)), b(n, c);
73
+ }), z(() => E(g, 1, `flex ${_() === "sidebar" ? "flex-col space-y-2" : "space-x-6"}`)), b(y, o);
74
+ }
75
+ export {
76
+ _a as N,
77
+ xa as a
78
+ };