zabi-components 2.0.2 → 2.0.4

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,582 +1,48 @@
1
- import { B as pe, C as me, a as xe, H as ve, I as ye, b as he, c as ge, O as Ie, P as Te, d as ke, S as Ce, e as we, f as De, T as Ae, g as Ee, h as Be, i as Fe, j as Le } from "../Tooltip-C9G35OZ6.js";
2
- import { B as Oe, C as ze } from "../Card-BIAsG5HX.js";
3
- import { T as Pe } from "../ThemeToggle-CRI92cOb.js";
4
- import { A as $e, C as je, a as Me, D as Ke, F as qe, H as Re, I as Ve, L as Ue, M as We, S as Ge, b as Je, T as Qe } from "../Tabs-DXN_BqPw.js";
5
- import { N as Ye, a as Ze } from "../Navigation-BoOnkbXw.js";
6
- const h = (e, t) => {
7
- const { shouldFocus: r = !1, delay: n = 0 } = t || {};
8
- function o() {
9
- r && (n > 0 ? setTimeout(() => e.focus(), n) : e.focus());
10
- }
11
- return r && o(), {
12
- update(a) {
13
- const { shouldFocus: s = !1, delay: i = 0 } = a || {};
14
- s && (i > 0 ? setTimeout(() => e.focus(), i) : e.focus());
15
- }
16
- };
17
- }, g = (e, t) => {
18
- function r(n) {
19
- e.contains(n.target) || t(n);
20
- }
21
- return document.addEventListener("click", r, !0), {
22
- destroy() {
23
- document.removeEventListener("click", r, !0);
24
- }
25
- };
26
- }, I = (e, t) => {
27
- function r(n) {
28
- n.key === "Escape" && t(n);
29
- }
30
- return e.addEventListener("keydown", r), {
31
- destroy() {
32
- e.removeEventListener("keydown", r);
33
- }
34
- };
35
- }, T = (e, t) => {
36
- const r = new ResizeObserver(t);
37
- return r.observe(e), {
38
- destroy() {
39
- r.disconnect();
40
- }
41
- };
42
- }, k = (e, { callback: t, options: r = {} }) => {
43
- const n = new IntersectionObserver(t, r);
44
- return n.observe(e), {
45
- destroy() {
46
- n.disconnect();
47
- }
48
- };
49
- }, C = (e) => {
50
- function t() {
51
- e.style.height = "auto", e.style.height = `${e.scrollHeight}px`;
52
- }
53
- return t(), e.addEventListener("input", t), {
54
- destroy() {
55
- e.removeEventListener("input", t);
56
- }
57
- };
58
- }, w = (e, { src: t, onLoad: r, onError: n }) => {
59
- const o = new IntersectionObserver((a) => {
60
- a.forEach((s) => {
61
- s.isIntersecting && (e instanceof HTMLImageElement && (e.src = t, e.onload = r, e.onerror = n), o.unobserve(e));
62
- });
63
- });
64
- return o.observe(e), {
65
- update(a) {
66
- a != null && a.src && e instanceof HTMLImageElement && (e.src = a.src);
67
- },
68
- destroy() {
69
- o.disconnect();
70
- }
71
- };
72
- };
73
- function D(e) {
74
- return {
75
- value: e.value,
76
- hasValue: !!(e.value && e.value.trim()),
77
- isFocused: !1,
78
- hasError: !!e.error || e.variant === "error",
79
- hasSuccess: !!e.success || e.variant === "success"
80
- };
81
- }
82
- function A(e, t) {
83
- return {
84
- ...e,
85
- value: t,
86
- hasValue: !!(t && t.trim())
87
- };
88
- }
89
- function E(e, t) {
90
- return {
91
- ...e,
92
- isFocused: t
93
- };
94
- }
95
- function B(e, t, r, n) {
96
- return {
97
- ...e,
98
- hasError: !!t || n === "error",
99
- hasSuccess: !!r || n === "success"
100
- };
101
- }
102
- function F(e) {
103
- return e || `input-${Math.random().toString(36).substr(2, 9)}`;
104
- }
105
- function L(e, t, r) {
106
- return { value: e, event: t, field: r };
107
- }
108
- function S(e, t, r, n) {
109
- return { value: e, event: t, field: r, checked: n };
110
- }
111
- const m = {
112
- sm: {
113
- input: "px-3 py-1.5 text-sm",
114
- label: "text-xs",
115
- helper: "text-xs"
116
- },
117
- md: {
118
- input: "px-4 py-2.5 text-sm",
119
- label: "text-sm",
120
- helper: "text-xs"
121
- },
122
- lg: {
123
- input: "px-5 py-3 text-base",
124
- label: "text-base",
125
- helper: "text-sm"
126
- }
127
- }, O = [
128
- "w-full",
129
- "min-w-0",
130
- "rounded-md",
131
- "transition-all",
132
- "duration-200",
133
- "ease-in-out",
134
- "focus:outline-none",
135
- "focus:ring-2",
136
- "focus:ring-focus-ring",
137
- "focus:ring-offset-2",
138
- "disabled:opacity-50",
139
- "disabled:cursor-not-allowed",
140
- "read-only:cursor-default",
141
- "read-only:opacity-75"
142
- ].join(" ");
143
- function z(e, t) {
144
- return e ? "border-error text-text placeholder-text-placeholder focus:ring-error focus:border-error" : t ? "border-success text-text placeholder-text-placeholder focus:ring-success focus:border-success" : "border-border text-text placeholder-text-placeholder focus:ring-focus-ring focus:border-border-focus";
145
- }
146
- function H(e) {
147
- return e ? "bg-surface-disabled text-text-disabled border-border-disabled cursor-not-allowed" : "";
148
- }
149
- function P(e, t, r) {
150
- return [
151
- "block",
152
- m[r].label,
153
- "font-medium",
154
- "mb-2",
155
- "transition-colors",
156
- "duration-200",
157
- e ? "text-error" : t ? "text-success" : "text-text"
158
- ].join(" ");
159
- }
160
- function N(e, t, r) {
161
- return [
162
- "mt-2",
163
- m[r].helper,
164
- e ? "text-error" : t ? "text-success" : "text-text-secondary"
165
- ].join(" ");
166
- }
167
- function $(e = "") {
168
- return {
169
- isOpen: !1,
170
- activeItem: e,
171
- currentFocusIndex: -1,
172
- isKeyboardNavigation: !1
173
- };
174
- }
175
- function j(e, t) {
176
- return { ...e, ...t };
177
- }
178
- const f = {
179
- density: {
180
- compact: "density-compact",
181
- comfortable: "density-comfortable"
182
- },
183
- variant: {
184
- header: "nav-header",
185
- sidebar: "nav-sidebar",
186
- breadcrumb: "nav-breadcrumb",
187
- tabs: "nav-tabs",
188
- pagination: "nav-pagination"
189
- }
190
- };
191
- function M(e, t, r = "") {
192
- return [
193
- "modern-navigation",
194
- f.variant[e.variant],
195
- `nav-${e.orientation}`,
196
- f.density[e.density],
197
- e.responsive ? "responsive" : "",
198
- e.collapsible ? "collapsible" : "",
199
- t.isOpen ? "open" : "",
200
- r
201
- ].filter(Boolean).join(" ");
202
- }
203
- function K(e, t, r, n) {
204
- return function(a) {
205
- if (!(!e.isOpen && a.key !== "Enter" && a.key !== " "))
206
- switch (t({ isKeyboardNavigation: !0 }), a.key) {
207
- case "Enter":
208
- case " ":
209
- a.preventDefault();
210
- const s = document.activeElement;
211
- (s == null ? void 0 : s.getAttribute("role")) === "menuitem" && s.click();
212
- break;
213
- case "Escape":
214
- e.isOpen && t({ isOpen: !1 });
215
- break;
216
- case "ArrowDown":
217
- a.preventDefault(), b(e, t, r);
218
- break;
219
- case "ArrowUp":
220
- a.preventDefault(), p(e, t, r);
221
- break;
222
- case "ArrowRight":
223
- a.preventDefault(), e.isOpen && b(e, t, r);
224
- break;
225
- case "ArrowLeft":
226
- a.preventDefault(), p(e, t, r);
227
- break;
228
- case "Home":
229
- a.preventDefault(), v(e, t, r);
230
- break;
231
- case "End":
232
- a.preventDefault(), y(e, t, r);
233
- break;
234
- }
235
- };
236
- }
237
- function b(e, t, r) {
238
- var a;
239
- const n = r();
240
- if (n.length === 0) return;
241
- const o = (e.currentFocusIndex + 1) % n.length;
242
- t({ currentFocusIndex: o }), (a = n[o]) == null || a.focus();
243
- }
244
- function p(e, t, r) {
245
- var a;
246
- const n = r();
247
- if (n.length === 0) return;
248
- const o = e.currentFocusIndex <= 0 ? n.length - 1 : e.currentFocusIndex - 1;
249
- t({ currentFocusIndex: o }), (a = n[o]) == null || a.focus();
250
- }
251
- function v(e, t, r) {
252
- var o;
253
- const n = r();
254
- n.length !== 0 && (t({ currentFocusIndex: 0 }), (o = n[0]) == null || o.focus());
255
- }
256
- function y(e, t, r) {
257
- var a;
258
- const n = r();
259
- if (n.length === 0) return;
260
- const o = n.length - 1;
261
- t({ currentFocusIndex: o }), (a = n[o]) == null || a.focus();
262
- }
263
- function q(e) {
264
- return Array.from(
265
- e.querySelectorAll(
266
- 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])'
267
- )
268
- );
269
- }
270
- function R(e, t, r) {
271
- return {
272
- toggle: () => {
273
- const n = !e.isOpen;
274
- t({ isOpen: n }), n && setTimeout(() => {
275
- var a;
276
- const o = r();
277
- o.length > 0 && (t({ currentFocusIndex: 0 }), (a = o[0]) == null || a.focus());
278
- }, 100);
279
- },
280
- open: () => {
281
- t({ isOpen: !0 }), setTimeout(() => {
282
- var o;
283
- const n = r();
284
- n.length > 0 && (t({ currentFocusIndex: 0 }), (o = n[0]) == null || o.focus());
285
- }, 100);
286
- },
287
- close: () => {
288
- t({ isOpen: !1 });
289
- }
290
- };
291
- }
292
- function V(e, t, r) {
293
- return function(o, a) {
294
- if (o.disabled) {
295
- a.preventDefault();
296
- return;
297
- }
298
- e({ activeItem: o.id }), r("item-click", { item: o, event: a }), t.collapsible && t.variant !== "tabs" && e({ isOpen: !1 });
299
- };
300
- }
301
- const U = {
302
- mobile: 768,
303
- tablet: 1024,
304
- desktop: 1280
305
- };
306
- function W(e, t, r, n = "navigation") {
307
- return {
308
- "aria-label": t || `${e} navigation`,
309
- "aria-describedby": r || void 0,
310
- role: n,
311
- "data-variant": e
312
- };
313
- }
314
- function G(e) {
315
- return {
316
- "aria-expanded": e,
317
- "aria-controls": "navigation-menu",
318
- "aria-haspopup": "menu",
319
- "aria-label": "Toggle navigation menu"
320
- };
321
- }
322
- function J(e, t) {
323
- return {
324
- id: "navigation-menu",
325
- role: e === "horizontal" ? "menubar" : "menu",
326
- "aria-orientation": e,
327
- "aria-label": `${t} menu`
328
- };
329
- }
330
- function Q(e, t) {
331
- const r = t || (e.length > 0 ? e[0].id : "");
332
- return {
333
- activeTab: r,
334
- activeTabIndex: e.findIndex((n) => n.id === r)
335
- };
336
- }
337
- function X(e, t, r) {
338
- return {
339
- activeTab: r,
340
- activeTabIndex: t.findIndex((n) => n.id === r)
341
- };
342
- }
343
- const x = {
344
- sm: {
345
- tab: "px-3 py-1.5 text-sm",
346
- panel: "p-3",
347
- icon: "w-4 h-4"
348
- },
349
- md: {
350
- tab: "px-4 py-2 text-base",
351
- panel: "p-4",
352
- icon: "w-5 h-5"
353
- },
354
- lg: {
355
- tab: "px-6 py-3 text-lg",
356
- panel: "p-6",
357
- icon: "w-6 h-6"
358
- }
359
- }, d = {
360
- default: {
361
- container: "border-b border-primary",
362
- tab: "border-b-2 border-transparent text-secondary hover:text-primary hover:border-primary-hover transition-colors",
363
- activeTab: "border-primary text-primary",
364
- panel: "mt-4"
365
- },
366
- pills: {
367
- container: "bg-surface-secondary p-1 rounded-lg",
368
- tab: "rounded-md text-secondary hover:text-primary hover:bg-surface-tertiary transition-colors",
369
- activeTab: "bg-surface text-primary shadow-adaptive-sm",
370
- panel: "mt-4"
371
- },
372
- underline: {
373
- container: "border-b border-primary",
374
- tab: "relative text-secondary hover:text-primary transition-colors",
375
- activeTab: "text-primary",
376
- panel: "mt-4"
377
- },
378
- cards: {
379
- container: "space-y-2",
380
- tab: "border border-primary rounded-lg text-secondary hover:text-primary hover:bg-surface-secondary transition-colors",
381
- activeTab: "bg-surface text-primary shadow-adaptive-sm border-primary",
382
- panel: "mt-4"
383
- }
384
- };
385
- function Y(e, t, r) {
386
- const n = x[e.size], o = d[e.variant];
387
- return [
388
- n.tab,
389
- o.tab,
390
- r ? o.activeTab : "",
391
- t.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
392
- e.fullWidth ? "flex-1" : "",
393
- "flex items-center justify-center gap-2"
394
- ].filter(Boolean).join(" ");
395
- }
396
- function Z(e, t = []) {
397
- return [
398
- d[e.variant].container,
399
- e.orientation === "vertical" ? "flex-col space-y-1 mr-4" : "",
400
- e.fullWidth ? `grid grid-cols-${t.length || 1}` : "flex"
401
- ].filter(Boolean).join(" ");
402
- }
403
- function _(e, t) {
404
- const r = x[e.size], n = d[e.variant];
405
- return [
406
- r.panel,
407
- n.panel,
408
- t ? "block" : "hidden"
409
- ].filter(Boolean).join(" ");
410
- }
411
- function ee(e, t, r, n) {
412
- return function(a) {
413
- const s = Array.from(
414
- document.querySelectorAll('[role="tab"]')
415
- ), i = s.findIndex(
416
- (l) => l === document.activeElement
417
- );
418
- let c = i;
419
- switch (a.key) {
420
- case "ArrowRight":
421
- case "ArrowDown":
422
- a.preventDefault(), c = (i + 1) % e.length;
423
- break;
424
- case "ArrowLeft":
425
- case "ArrowUp":
426
- a.preventDefault(), c = i === 0 ? e.length - 1 : i - 1;
427
- break;
428
- case "Home":
429
- a.preventDefault(), c = 0;
430
- break;
431
- case "End":
432
- a.preventDefault(), c = e.length - 1;
433
- break;
434
- case "Enter":
435
- case " ":
436
- a.preventDefault();
437
- const l = s[i];
438
- l && l.click();
439
- return;
440
- }
441
- c !== i && s[c] && s[c].focus();
442
- };
443
- }
444
- function te(e, t, r) {
445
- return function(o, a) {
446
- o.disabled || (t({ activeTab: o.id }), r("change", { activeTab: o.id, tab: o, event: a }), r("tabClick", { tab: o, event: a }));
447
- };
448
- }
449
- function re(e, t) {
450
- const r = t.querySelector(
451
- `[data-tab-id="${e}"]`
452
- );
453
- r == null || r.focus();
454
- }
455
- function ne(e, t) {
456
- return e.find((r) => r.id === t);
457
- }
458
- function ae(e, t) {
459
- return e.id === t;
460
- }
461
- function oe(e, t, r) {
462
- return {
463
- "aria-selected": t,
464
- "aria-controls": `tabpanel-${e.id}`,
465
- "aria-disabled": e.disabled,
466
- tabindex: t ? 0 : -1
467
- };
468
- }
469
- function se(e) {
470
- return {
471
- id: `tabpanel-${e.id}`,
472
- role: "tabpanel",
473
- "aria-labelledby": `tab-${e.id}`
474
- };
475
- }
476
- function u() {
477
- return typeof window < "u" && typeof document < "u";
478
- }
479
- function ie() {
480
- return u() ? window : void 0;
481
- }
482
- function ce() {
483
- return u() ? document : void 0;
484
- }
485
- function ue(e) {
486
- return u() ? requestAnimationFrame(e) : void 0;
487
- }
488
- function le(e, t) {
489
- return u() ? setTimeout(e, t) : void 0;
490
- }
491
- function de(e) {
492
- u() && e && clearTimeout(e);
493
- }
1
+ import { B as g, C as m, I as d, T as c, d as p, c as C, a as T, g as x, b as f } from "../Checkbox-cOmcN4_d.js";
2
+ import { B as b, C as I, a as S, H as B, O as D, P as F, S as V, b as M, T as h, c as k, d as v } from "../OptimizedImage-AlFTGrwF.js";
3
+ import { T as N } from "../ThemeToggle-Dgb0rEn7.js";
4
+ import { A as P, C as R, D as $, F as j, I as w, L as E, M as H, S as L, T as U } from "../ContactForm-DKoAOLWp.js";
5
+ import { N as y, a as z } from "../Navigation-BCY_oTq9.js";
6
+ const e = (a = "id") => `${a}-${Math.random().toString(36).substr(2, 9)}`, t = (...a) => a.filter(Boolean).join(" "), o = (a) => {
7
+ const s = new FormData(a);
8
+ return Object.fromEntries(s.entries());
9
+ }, r = (a) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(a), n = (a) => a != null && a !== "";
494
10
  export {
495
- $e as Alert,
496
- pe as Badge,
497
- Oe as Button,
498
- ze as Card,
499
- je as CardsGrid,
500
- me as Checkbox,
501
- Me as ColorDemo,
502
- xe as ColorPicker,
503
- Ke as Dropdown,
504
- qe as Form,
505
- ve as Heading,
506
- Re as Hero,
507
- Ve as ImageUpload,
508
- ye as Input,
509
- he as InputActions,
510
- ge as InputValidation,
511
- Ue as Layout,
512
- We as Modal,
513
- Ye as Navbar,
514
- Ze as Navigation,
515
- Ie as OptimizedImage,
516
- Te as PerformanceMonitor,
517
- ke as Progress,
518
- Ce as ScaleDemo,
519
- we as Select,
520
- Ge as SelectedCardInfo,
521
- De as Skeleton,
522
- Je as SlideUp,
523
- Qe as Tabs,
524
- Ae as TextAlignment,
525
- Ee as Textarea,
526
- Pe as ThemeToggle,
527
- Be as Toast,
528
- Fe as Toggle,
529
- Le as Tooltip,
530
- C as autoResize,
531
- O as baseInputClasses,
532
- U as breakpoints,
533
- g as clickOutside,
534
- S as createChangeEventDetail,
535
- L as createInputEventDetail,
536
- D as createInputState,
537
- V as createItemClickHandler,
538
- K as createKeyboardNavigation,
539
- R as createMenuState,
540
- $ as createNavigationState,
541
- te as createTabClickHandler,
542
- ee as createTabsKeyboardNavigation,
543
- Q as createTabsState,
544
- I as escapeKey,
545
- h as focus,
546
- re as focusTab,
547
- m as formSizeClasses,
548
- F as generateInputId,
549
- W as getAccessibilityProps,
550
- Z as getContainerClasses,
551
- H as getDisabledClasses,
552
- q as getFocusableItems,
553
- N as getHelperTextClasses,
554
- P as getLabelClasses,
555
- G as getMenuButtonProps,
556
- J as getMenuListProps,
557
- M as getNavigationClasses,
558
- se as getPanelAccessibilityProps,
559
- _ as getPanelClasses,
560
- z as getStateClasses,
561
- oe as getTabAccessibilityProps,
562
- Y as getTabClasses,
563
- ne as getTabContent,
564
- k as intersectionObserver,
565
- u as isBrowser,
566
- ae as isTabActive,
567
- w as lazyLoad,
568
- f as navigationClasses,
569
- T as resizeObserver,
570
- de as safeClearTimeout,
571
- ce as safeDocument,
572
- ue as safeRequestAnimationFrame,
573
- le as safeSetTimeout,
574
- ie as safeWindow,
575
- x as tabsSizeClasses,
576
- d as tabsVariantClasses,
577
- E as updateFocusState,
578
- A as updateInputState,
579
- j as updateNavigationState,
580
- X as updateTabsState,
581
- B as updateValidationState
11
+ P as Alert,
12
+ b as Badge,
13
+ g as Button,
14
+ I as Card,
15
+ m as Checkbox,
16
+ S as ColorPicker,
17
+ R as ContactForm,
18
+ $ as Dropdown,
19
+ j as Form,
20
+ B as Heading,
21
+ w as ImageUpload,
22
+ d as Input,
23
+ E as Layout,
24
+ H as Modal,
25
+ y as Navbar,
26
+ z as Navigation,
27
+ D as OptimizedImage,
28
+ F as Progress,
29
+ V as Select,
30
+ M as Skeleton,
31
+ L as SlideUp,
32
+ U as Tabs,
33
+ c as Textarea,
34
+ N as ThemeToggle,
35
+ h as Toast,
36
+ k as Toggle,
37
+ v as Tooltip,
38
+ t as cn,
39
+ e as createId,
40
+ p as createVariantClassMap,
41
+ C as getAllVariantClasses,
42
+ T as getCardVariantClasses,
43
+ o as getFormData,
44
+ x as getInputVariantClasses,
45
+ f as getVariantClasses,
46
+ r as validateEmail,
47
+ n as validateRequired
582
48
  };
@@ -1,15 +1,12 @@
1
- import { A as o, C as r, a as e, D as d, F as l, H as m, I as p, L as t, M as C, S as D, b as I, T as S } from "../Tabs-DXN_BqPw.js";
1
+ import { A as s, C as r, D as t, F as d, I as e, L as l, M as m, S as p, T as F } from "../ContactForm-DKoAOLWp.js";
2
2
  export {
3
- o as Alert,
4
- r as CardsGrid,
5
- e as ColorDemo,
6
- d as Dropdown,
7
- l as Form,
8
- m as Hero,
9
- p as ImageUpload,
10
- t as Layout,
11
- C as Modal,
12
- D as SelectedCardInfo,
13
- I as SlideUp,
14
- S as Tabs
3
+ s as Alert,
4
+ r as ContactForm,
5
+ t as Dropdown,
6
+ d as Form,
7
+ e as ImageUpload,
8
+ l as Layout,
9
+ m as Modal,
10
+ p as SlideUp,
11
+ F as Tabs
15
12
  };
@@ -1,4 +1,4 @@
1
- import { N as r, a as N } from "../Navigation-BoOnkbXw.js";
1
+ import { N as r, a as N } from "../Navigation-BCY_oTq9.js";
2
2
  export {
3
3
  r as Navbar,
4
4
  N as Navigation