zabi-components 1.0.4 → 1.0.6
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.
- package/README.md +498 -93
- package/dist/{Tabs-CQvsdYPW.js → Tabs-Tv_48hdh.js} +305 -309
- package/dist/{ToastManager-6EGReI73.js → ToastManager-Q990X_Ag.js} +60 -62
- package/dist/Toggle-BidBFl7X.js +2276 -0
- package/dist/{Tooltip-B-wUMg6c.js → Tooltip-BA4NYwx_.js} +139 -144
- package/dist/atoms/index.d.ts +5 -0
- package/dist/atoms/index.js +2 -2
- package/dist/index/index.js +4 -4
- package/dist/index.d.ts +1 -0
- package/dist/molecules/index.d.ts +3 -2
- package/dist/molecules/index.js +2 -2
- package/dist/organisms/index.d.ts +2 -0
- package/dist/organisms/index.js +1 -1
- package/dist/types/index.d.ts +4 -0
- package/dist/types/index.js +1 -0
- package/dist/zabi-components.css +1 -0
- package/package.json +7 -6
- package/dist/Toggle-DuPArdKN.js +0 -2315
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { a as ue, p as h, i as oe, f as _, b as ne, c as N, s as te, d as Be, t as I, e as
|
|
1
|
+
import { a as ue, p as h, i as oe, f as _, b as ne, c as N, s as te, d as Be, t as I, e as A, g as f, h as ie, j as le, k as g, l as e, m as U, n as d, o as w, q as K, u as o, r as m, v as G, w as fe, x as me, y as re, z as be, A as Ye, B as ae, C as ve, D as Ie, E as ge, F as Oe, G as L } from "./x-DpVwziig.js";
|
|
2
2
|
import { createEventDispatcher as he, onMount as se } from "svelte";
|
|
3
|
-
import { T as
|
|
4
|
-
var
|
|
3
|
+
import { T as Se, a as Ae } from "./Toast-DXZ9gllw.js";
|
|
4
|
+
var De = _('<button type="button" class="text-xl font-bold text-primary hover:text-primary-hover transition-colors svelte-1r8bk40"> </button>'), Fe = _('<img class="h-8 w-8 svelte-1r8bk40"/>'), Re = _('<a class="flex items-center space-x-2 text-xl font-bold text-primary hover:text-primary-hover transition-colors svelte-1r8bk40"><!> <span class="svelte-1r8bk40"> </span></a>'), qe = me('<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" class="svelte-1r8bk40"></path>'), Ge = me('<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" class="svelte-1r8bk40"></path>'), Ke = _('<div id="mobile-menu" class="md:hidden border-t border-primary bg-surface svelte-1r8bk40"><div class="px-4 py-2 space-y-1 svelte-1r8bk40"><!></div></div>'), Pe = _('<div class="fixed inset-0 bg-black/50 backdrop-blur-sm z-30 md:hidden svelte-1r8bk40" role="button" tabindex="0" aria-label="Close menu"></div>'), He = _('<nav aria-label="Main navigation"><div class="max-w-7xl mx-auto svelte-1r8bk40"><div><div class="flex items-center svelte-1r8bk40"><!></div> <div class="hidden md:flex items-center space-x-8 svelte-1r8bk40"><!></div> <div class="flex items-center space-x-4 svelte-1r8bk40"><!> <!> <button type="button" class="md:hidden p-2 rounded-lg text-primary hover:bg-surface-secondary focus:outline-none focus:ring-2 focus:ring-primary svelte-1r8bk40" aria-controls="mobile-menu" aria-label="Toggle navigation menu"><svg class="w-6 h-6 svelte-1r8bk40" fill="none" stroke="currentColor" viewBox="0 0 24 24"><!></svg></button></div></div> <!></div></nav> <!>', 1);
|
|
5
5
|
const Je = {
|
|
6
6
|
hash: "svelte-1r8bk40",
|
|
7
7
|
code: `
|
|
@@ -46,7 +46,7 @@ const Je = {
|
|
|
46
46
|
};
|
|
47
47
|
function et(B, a) {
|
|
48
48
|
le(a, !1), ue(B, Je);
|
|
49
|
-
let s = h(a, "brand", 8, ""), M = h(a, "variant", 8, "default"), T = h(a, "size", 8, "md"), c = h(a, "position", 8, "sticky"),
|
|
49
|
+
let s = h(a, "brand", 8, ""), M = h(a, "variant", 8, "default"), T = h(a, "size", 8, "md"), c = h(a, "position", 8, "sticky"), D = h(a, "showThemeToggle", 8, !0), b = h(a, "className", 8, "");
|
|
50
50
|
const p = he();
|
|
51
51
|
let i = U(!1), C = U(!1), k = U();
|
|
52
52
|
const y = { sm: "py-2 px-4", md: "py-3 px-6", lg: "py-4 px-8" }, z = {
|
|
@@ -59,53 +59,53 @@ function et(B, a) {
|
|
|
59
59
|
sticky: "sticky top-0 z-40",
|
|
60
60
|
fixed: "fixed top-0 left-0 right-0 z-40"
|
|
61
61
|
};
|
|
62
|
-
function
|
|
63
|
-
p("brandClick", r);
|
|
62
|
+
function O(r) {
|
|
63
|
+
p("brandClick", { event: r });
|
|
64
64
|
}
|
|
65
65
|
function l() {
|
|
66
|
-
g(i, !e(i)), p("menuToggle", e(i));
|
|
66
|
+
g(i, !e(i)), p("menuToggle", { isOpen: e(i) });
|
|
67
67
|
}
|
|
68
|
-
function
|
|
68
|
+
function E() {
|
|
69
69
|
g(C, window.scrollY > 10);
|
|
70
70
|
}
|
|
71
|
-
se(() => (window.addEventListener("scroll",
|
|
71
|
+
se(() => (window.addEventListener("scroll", E), () => window.removeEventListener("scroll", E)));
|
|
72
72
|
function x(r) {
|
|
73
|
-
r.key === "Escape" && e(i) && (g(i, !1), p("menuToggle", !1));
|
|
73
|
+
r.key === "Escape" && e(i) && (g(i, !1), p("menuToggle", { isOpen: !1 }));
|
|
74
74
|
}
|
|
75
75
|
function n(r) {
|
|
76
|
-
e(i) && e(k) && !e(k).contains(r.target) && (g(i, !1), p("menuToggle", !1));
|
|
76
|
+
e(i) && e(k) && !e(k).contains(r.target) && (g(i, !1), p("menuToggle", { isOpen: !1 }));
|
|
77
77
|
}
|
|
78
78
|
se(() => (document.addEventListener("keydown", x), document.addEventListener("click", n), () => {
|
|
79
79
|
document.removeEventListener("keydown", x), document.removeEventListener("click", n);
|
|
80
80
|
})), oe();
|
|
81
|
-
var t = He(), u = ne(t),
|
|
81
|
+
var t = He(), u = ne(t), P = d(u), F = d(P), H = d(F), V = d(H);
|
|
82
82
|
{
|
|
83
83
|
var W = (r) => {
|
|
84
|
-
var v = fe(),
|
|
84
|
+
var v = fe(), R = ne(v);
|
|
85
85
|
{
|
|
86
|
-
var $ = (
|
|
87
|
-
var
|
|
88
|
-
I(() => ae(Q, s())),
|
|
89
|
-
},
|
|
90
|
-
var
|
|
86
|
+
var $ = (S) => {
|
|
87
|
+
var j = De(), Q = d(j);
|
|
88
|
+
I(() => ae(Q, s())), A("click", j, O), f(S, j);
|
|
89
|
+
}, Ee = (S) => {
|
|
90
|
+
var j = Re(), Q = d(j);
|
|
91
91
|
{
|
|
92
|
-
var
|
|
93
|
-
var ee =
|
|
92
|
+
var je = (q) => {
|
|
93
|
+
var ee = Fe();
|
|
94
94
|
I(() => {
|
|
95
|
-
|
|
96
|
-
}), f(
|
|
95
|
+
G(ee, "src", (m(s()), o(() => s().logo))), G(ee, "alt", (m(s()), o(() => s().text)));
|
|
96
|
+
}), f(q, ee);
|
|
97
97
|
};
|
|
98
|
-
N(Q, (
|
|
99
|
-
m(s()), o(() => s().logo) &&
|
|
98
|
+
N(Q, (q) => {
|
|
99
|
+
m(s()), o(() => s().logo) && q(je);
|
|
100
100
|
});
|
|
101
101
|
}
|
|
102
102
|
var Le = w(Q, 2), Ne = d(Le);
|
|
103
103
|
I(() => {
|
|
104
|
-
|
|
105
|
-
}),
|
|
104
|
+
G(j, "href", (m(s()), o(() => s().href || "#"))), ae(Ne, (m(s()), o(() => s().text)));
|
|
105
|
+
}), A("click", j, (q) => O(q)), f(S, j);
|
|
106
106
|
};
|
|
107
|
-
N(
|
|
108
|
-
typeof s() == "string" ?
|
|
107
|
+
N(R, (S) => {
|
|
108
|
+
typeof s() == "string" ? S($) : S(Ee, !1);
|
|
109
109
|
});
|
|
110
110
|
}
|
|
111
111
|
f(r, v);
|
|
@@ -119,10 +119,10 @@ function et(B, a) {
|
|
|
119
119
|
var pe = w(J, 2), de = d(pe);
|
|
120
120
|
{
|
|
121
121
|
var ke = (r) => {
|
|
122
|
-
|
|
122
|
+
Se(r, { size: "md", variant: "outline" });
|
|
123
123
|
};
|
|
124
124
|
N(de, (r) => {
|
|
125
|
-
|
|
125
|
+
D() && r(ke);
|
|
126
126
|
});
|
|
127
127
|
}
|
|
128
128
|
var ce = w(de, 2);
|
|
@@ -130,20 +130,20 @@ function et(B, a) {
|
|
|
130
130
|
var Z = w(ce, 2), xe = d(Z), ye = d(xe);
|
|
131
131
|
{
|
|
132
132
|
var we = (r) => {
|
|
133
|
-
var v =
|
|
133
|
+
var v = qe();
|
|
134
134
|
f(r, v);
|
|
135
135
|
}, _e = (r) => {
|
|
136
|
-
var v =
|
|
136
|
+
var v = Ge();
|
|
137
137
|
f(r, v);
|
|
138
138
|
};
|
|
139
139
|
N(ye, (r) => {
|
|
140
140
|
e(i) ? r(we) : r(_e, !1);
|
|
141
141
|
});
|
|
142
142
|
}
|
|
143
|
-
var Me = w(
|
|
143
|
+
var Me = w(F, 2);
|
|
144
144
|
{
|
|
145
145
|
var Te = (r) => {
|
|
146
|
-
var v =
|
|
146
|
+
var v = Ke(), R = d(v), $ = d(R);
|
|
147
147
|
te($, a, "mobile-nav", {}, null), re(3, v, () => be, () => ({ y: -20, duration: 200 })), f(r, v);
|
|
148
148
|
};
|
|
149
149
|
N(Me, (r) => {
|
|
@@ -154,15 +154,15 @@ function et(B, a) {
|
|
|
154
154
|
var Ce = w(u, 2);
|
|
155
155
|
{
|
|
156
156
|
var ze = (r) => {
|
|
157
|
-
var v =
|
|
158
|
-
|
|
157
|
+
var v = Pe();
|
|
158
|
+
A("click", v, () => g(i, !1)), A("keydown", v, (R) => R.key === "Escape" && g(i, !1)), re(3, v, () => Ye, () => ({ duration: 200 })), f(r, v);
|
|
159
159
|
};
|
|
160
160
|
N(Ce, (r) => {
|
|
161
161
|
e(i) && r(ze);
|
|
162
162
|
});
|
|
163
163
|
}
|
|
164
164
|
I(() => {
|
|
165
|
-
|
|
165
|
+
K(
|
|
166
166
|
u,
|
|
167
167
|
1,
|
|
168
168
|
`
|
|
@@ -174,19 +174,19 @@ function et(B, a) {
|
|
|
174
174
|
${b() ?? ""}
|
|
175
175
|
`,
|
|
176
176
|
"svelte-1r8bk40"
|
|
177
|
-
),
|
|
178
|
-
|
|
177
|
+
), K(
|
|
178
|
+
F,
|
|
179
179
|
1,
|
|
180
180
|
`flex items-center justify-between ${m(T()), o(() => y[T()]) ?? ""}`,
|
|
181
181
|
"svelte-1r8bk40"
|
|
182
|
-
),
|
|
183
|
-
}),
|
|
182
|
+
), G(Z, "aria-expanded", e(i));
|
|
183
|
+
}), A("click", Z, l), f(B, t), ie();
|
|
184
184
|
}
|
|
185
185
|
var Qe = _('<div><div class="flex items-center"><svg class="w-5 h-5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg> <span class="text-sm font-medium flex-1"> </span></div> <button class="ml-3 flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity" aria-label="Close notification"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></button></div>'), Ue = _("<div></div>");
|
|
186
186
|
function tt(B, a) {
|
|
187
187
|
le(a, !1);
|
|
188
188
|
let s = h(a, "notifications", 28, () => []), M = h(a, "position", 8, "top-right"), T = h(a, "maxNotifications", 8, 5);
|
|
189
|
-
const c = he(),
|
|
189
|
+
const c = he(), D = "px-4 py-3 rounded-md border flex items-center justify-between mb-3 shadow-lg", b = {
|
|
190
190
|
success: "bg-green-100 border-green-400 text-green-700",
|
|
191
191
|
error: "bg-red-100 border-red-400 text-red-700",
|
|
192
192
|
warning: "bg-yellow-100 border-yellow-400 text-yellow-700",
|
|
@@ -205,7 +205,7 @@ function tt(B, a) {
|
|
|
205
205
|
"bottom-left": "fixed bottom-4 left-4"
|
|
206
206
|
};
|
|
207
207
|
function C(l) {
|
|
208
|
-
return `${
|
|
208
|
+
return `${D} ${b[l] || b.default}`;
|
|
209
209
|
}
|
|
210
210
|
function k(l) {
|
|
211
211
|
return p[l] || p.default;
|
|
@@ -230,23 +230,23 @@ function tt(B, a) {
|
|
|
230
230
|
}), Ie(), oe();
|
|
231
231
|
var z = fe(), Y = ne(z);
|
|
232
232
|
{
|
|
233
|
-
var
|
|
234
|
-
var
|
|
235
|
-
ge(
|
|
236
|
-
var t = Qe(), u = d(t),
|
|
233
|
+
var O = (l) => {
|
|
234
|
+
var E = Ue();
|
|
235
|
+
ge(E, 5, s, (x) => x.id, (x, n) => {
|
|
236
|
+
var t = Qe(), u = d(t), P = d(u), F = d(P), H = w(P, 2), V = d(H), W = w(u, 2);
|
|
237
237
|
I(
|
|
238
238
|
(J, X) => {
|
|
239
|
-
|
|
239
|
+
K(t, 1, J), G(F, "d", X), ae(V, (e(n), o(() => e(n).message)));
|
|
240
240
|
},
|
|
241
241
|
[
|
|
242
|
-
() =>
|
|
242
|
+
() => Oe((e(n), o(() => C(e(n).type)))),
|
|
243
243
|
() => (e(n), o(() => k(e(n).type)))
|
|
244
244
|
]
|
|
245
|
-
),
|
|
246
|
-
}), I(() =>
|
|
245
|
+
), A("click", W, () => y(e(n).id)), re(3, t, () => be, () => ({ x: M().includes("right") ? 300 : -300, duration: 300 })), f(x, t);
|
|
246
|
+
}), I(() => K(E, 1, `${m(M()), o(() => i[M()]) ?? ""} z-50 max-w-sm w-full space-y-2`)), f(l, E);
|
|
247
247
|
};
|
|
248
248
|
N(Y, (l) => {
|
|
249
|
-
m(s()), o(() => s().length > 0) && l(
|
|
249
|
+
m(s()), o(() => s().length > 0) && l(O);
|
|
250
250
|
});
|
|
251
251
|
}
|
|
252
252
|
f(B, z), ie();
|
|
@@ -259,15 +259,13 @@ const We = {
|
|
|
259
259
|
|
|
260
260
|
/* Re-enable pointer events for individual toasts */.toast-manager > * {pointer-events:auto;}
|
|
261
261
|
|
|
262
|
-
/* Stack toasts with proper spacing */.toast-manager.svelte-1hjxuh0 {display:flex;flex-direction:column;gap:0.5rem;}
|
|
263
|
-
|
|
264
|
-
/* Position-specific adjustments */`
|
|
262
|
+
/* Stack toasts with proper spacing */.toast-manager.svelte-1hjxuh0 {display:flex;flex-direction:column;gap:0.5rem;}`
|
|
265
263
|
};
|
|
266
264
|
function nt(B, a) {
|
|
267
265
|
le(a, !1), ue(B, We);
|
|
268
|
-
let s = h(a, "position", 8, "top-right"), M = h(a, "maxToasts", 8, 5), T = h(a, "className", 8, ""), c = U([]),
|
|
266
|
+
let s = h(a, "position", 8, "top-right"), M = h(a, "maxToasts", 8, 5), T = h(a, "className", 8, ""), c = U([]), D = 0;
|
|
269
267
|
function b(n) {
|
|
270
|
-
const t = `toast-${++
|
|
268
|
+
const t = `toast-${++D}`, u = {
|
|
271
269
|
id: t,
|
|
272
270
|
title: "",
|
|
273
271
|
message: "",
|
|
@@ -306,7 +304,7 @@ function nt(B, a) {
|
|
|
306
304
|
function Y(n, t) {
|
|
307
305
|
g(c, e(c).map((u) => u.id === n ? { ...u, ...t } : u));
|
|
308
306
|
}
|
|
309
|
-
function
|
|
307
|
+
function O(n) {
|
|
310
308
|
y(n.detail.id);
|
|
311
309
|
}
|
|
312
310
|
function l(n) {
|
|
@@ -314,11 +312,11 @@ function nt(B, a) {
|
|
|
314
312
|
se(() => (typeof window < "u" && (window.toast = { show: b, success: p, error: i, warning: C, info: k, close: y, closeAll: z, update: Y }), () => {
|
|
315
313
|
typeof window < "u" && delete window.toast;
|
|
316
314
|
}));
|
|
317
|
-
var
|
|
315
|
+
var E = { show: b, success: p, error: i, warning: C, info: k, close: y, closeAll: z, update: Y };
|
|
318
316
|
oe();
|
|
319
317
|
var x = Ve();
|
|
320
318
|
return ge(x, 5, () => e(c), (n) => n.id, (n, t) => {
|
|
321
|
-
|
|
319
|
+
Ae(n, {
|
|
322
320
|
get id() {
|
|
323
321
|
return e(t), o(() => e(t).id);
|
|
324
322
|
},
|
|
@@ -343,9 +341,9 @@ function nt(B, a) {
|
|
|
343
341
|
get position() {
|
|
344
342
|
return s();
|
|
345
343
|
},
|
|
346
|
-
$$events: { close:
|
|
344
|
+
$$events: { close: O, click: l }
|
|
347
345
|
});
|
|
348
|
-
}), I(() =>
|
|
346
|
+
}), I(() => K(x, 1, `toast-manager fixed inset-0 pointer-events-none z-notification ${T() ?? ""}`, "svelte-1hjxuh0")), f(B, x), L(a, "show", b), L(a, "success", p), L(a, "error", i), L(a, "warning", C), L(a, "info", k), L(a, "close", y), L(a, "closeAll", z), L(a, "update", Y), ie(E);
|
|
349
347
|
}
|
|
350
348
|
export {
|
|
351
349
|
et as N,
|