zabi-components 3.0.1 → 4.0.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.
- package/README.md +50 -28
- package/dist/CodeBlock-Bbv6JfD2.js +422 -0
- package/dist/ThemeToggle-Z2Ndc0if.js +42 -0
- package/dist/atoms/index.js +662 -18
- package/dist/index/index.js +45 -41
- package/dist/molecules/index.js +403 -391
- package/dist/organisms/index.js +102 -3
- package/dist/props-BKbHJRuR.js +2213 -0
- package/dist/zabi-components.css +1 -1
- package/package.json +3 -4
- package/dist/Navigation-A1Skrbs5.js +0 -81
- package/dist/OptimizedImage-CWv4Xphx.js +0 -593
- package/dist/Textarea-B0T7x4TT.js +0 -259
- package/dist/ThemeToggle-2HEU5v1Q.js +0 -42
- package/dist/props-DyILkQVH.js +0 -2340
package/dist/zabi-components.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--zabi-primary: #2563eb;--zabi-primary-hover: #1d4ed8;--zabi-primary-active: #1e40af;--zabi-primary-disabled: #93c5fd;--zabi-primary-light: #dbeafe;--zabi-primary-dark: #1e40af;--zabi-secondary: #
|
|
1
|
+
:root{--zabi-primary: #2563eb;--zabi-primary-hover: #1d4ed8;--zabi-primary-active: #1e40af;--zabi-primary-disabled: #93c5fd;--zabi-primary-light: #dbeafe;--zabi-primary-dark: #1e40af;--zabi-secondary: #57534e;--zabi-secondary-hover: #44403c;--zabi-secondary-active: #292524;--zabi-secondary-disabled: #d6d3d1;--zabi-secondary-light: #f5f5f4;--zabi-secondary-dark: #292524;--zabi-success: #16a34a;--zabi-success-hover: #15803d;--zabi-success-active: #166534;--zabi-success-disabled: #86efac;--zabi-success-light: #dcfce7;--zabi-success-dark: #166534;--zabi-warning: #ca8a04;--zabi-warning-hover: #a16207;--zabi-warning-active: #854d0e;--zabi-warning-disabled: #fde047;--zabi-warning-light: #fef9c3;--zabi-warning-dark: #854d0e;--zabi-error: #dc2626;--zabi-error-hover: #b91c1c;--zabi-error-active: #991b1b;--zabi-error-disabled: #fca5a5;--zabi-error-light: #fee2e2;--zabi-error-dark: #991b1b;--zabi-info: #2563eb;--zabi-info-hover: #1d4ed8;--zabi-info-active: #1e40af;--zabi-info-disabled: #93c5fd;--zabi-info-light: #dbeafe;--zabi-info-dark: #1e40af;--zabi-surface: #fff;--zabi-surface-hover: #fafaf9;--zabi-surface-active: #f5f5f4;--zabi-surface-disabled: #f5f5f4;--zabi-border: #d6d3d1;--zabi-border-hover: #a8a29e;--zabi-border-focus: #3b82f6;--zabi-border-disabled: #e7e5e4;--zabi-text: #1c1917;--zabi-text-muted: #57534e;--zabi-text-placeholder: #a8a29e;--zabi-text-inverse: #fff;--zabi-text-disabled: #a8a29e;--zabi-focus-ring: #3b82f6;--zabi-focus-ring-offset: #fff;--zabi-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--zabi-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--zabi-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--zabi-radius-sm: var(--radius-sm);--zabi-radius-md: var(--radius-md);--zabi-radius-lg: var(--radius-lg);--zabi-spacing-xs: .25rem;--zabi-spacing-sm: .5rem;--zabi-spacing-md: 1rem;--zabi-spacing-lg: 1.5rem;--zabi-spacing-xl: 2rem}.dark{--zabi-surface: #292524;--zabi-surface-hover: #44403c;--zabi-surface-active: #57534e;--zabi-surface-disabled: #44403c;--zabi-border: #57534e;--zabi-border-hover: #78716c;--zabi-border-focus: #60a5fa;--zabi-border-disabled: #57534e;--zabi-text: #e7e5e4;--zabi-text-muted: #78716c;--zabi-text-placeholder: #57534e;--zabi-text-inverse: #292524;--zabi-text-disabled: #57534e;--zabi-focus-ring-offset: #292524}.zabi-primary{background-color:var(--zabi-primary);color:var(--zabi-text-inverse)}.zabi-primary:hover{background-color:var(--zabi-primary-hover)}.zabi-primary:active{background-color:var(--zabi-primary-active)}.zabi-primary:disabled{background-color:var(--zabi-primary-disabled);color:var(--zabi-text-disabled)}.zabi-secondary{background-color:var(--zabi-secondary);color:var(--zabi-text-inverse)}.zabi-secondary:hover{background-color:var(--zabi-secondary-hover)}.zabi-secondary:active{background-color:var(--zabi-secondary-active)}.zabi-secondary:disabled{background-color:var(--zabi-secondary-disabled);color:var(--zabi-text-disabled)}.zabi-success{background-color:var(--zabi-success);color:var(--zabi-text-inverse)}.zabi-success:hover{background-color:var(--zabi-success-hover)}.zabi-success:active{background-color:var(--zabi-success-active)}.zabi-success:disabled{background-color:var(--zabi-success-disabled);color:var(--zabi-text-disabled)}.zabi-warning{background-color:var(--zabi-warning);color:var(--zabi-text-inverse)}.zabi-warning:hover{background-color:var(--zabi-warning-hover)}.zabi-warning:active{background-color:var(--zabi-warning-active)}.zabi-warning:disabled{background-color:var(--zabi-warning-disabled);color:var(--zabi-text-disabled)}.zabi-error{background-color:var(--zabi-error);color:var(--zabi-text-inverse)}.zabi-error:hover{background-color:var(--zabi-error-hover)}.zabi-error:active{background-color:var(--zabi-error-active)}.zabi-error:disabled{background-color:var(--zabi-error-disabled);color:var(--zabi-text-disabled)}.zabi-info{background-color:var(--zabi-info);color:var(--zabi-text-inverse)}.zabi-info:hover{background-color:var(--zabi-info-hover)}.zabi-info:active{background-color:var(--zabi-info-active)}.zabi-info:disabled{background-color:var(--zabi-info-disabled);color:var(--zabi-text-disabled)}.zabi-surface{background-color:var(--zabi-surface);color:var(--zabi-text)}.zabi-surface:hover{background-color:var(--zabi-surface-hover)}.zabi-surface:active{background-color:var(--zabi-surface-active)}.zabi-border{border-color:var(--zabi-border)}.zabi-border:hover{border-color:var(--zabi-border-hover)}.zabi-border:focus{border-color:var(--zabi-border-focus)}.zabi-border:disabled{border-color:var(--zabi-border-disabled)}.zabi-text{color:var(--zabi-text)}.zabi-text-muted{color:var(--zabi-text-muted)}.zabi-text-placeholder{color:var(--zabi-text-placeholder)}.zabi-text-inverse{color:var(--zabi-text-inverse)}.zabi-text-disabled{color:var(--zabi-text-disabled)}.zabi-focus{outline:2px solid var(--zabi-focus-ring);outline-offset:2px}.zabi-focus-ring{box-shadow:0 0 0 2px var(--zabi-focus-ring-offset),0 0 0 4px var(--zabi-focus-ring)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "zabi-components",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"description": "A modern Svelte 5 component library with TypeScript, Tailwind CSS, and SSR support",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index/index.js",
|
|
@@ -84,8 +84,7 @@
|
|
|
84
84
|
"vite": "^6.0.0"
|
|
85
85
|
},
|
|
86
86
|
"dependencies": {
|
|
87
|
-
"@lucide/svelte": "^0.544.0"
|
|
88
|
-
"zabi-components": "^3.0.0"
|
|
87
|
+
"@lucide/svelte": "^0.544.0"
|
|
89
88
|
},
|
|
90
89
|
"peerDependencies": {
|
|
91
90
|
"@sveltejs/kit": "^2.0.0",
|
|
@@ -101,4 +100,4 @@
|
|
|
101
100
|
},
|
|
102
101
|
"svelte": "./dist/index/index.js",
|
|
103
102
|
"ssr": true
|
|
104
|
-
}
|
|
103
|
+
}
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
import { l as k, p as n, f as x, a as F, s as y, b as N, t as $, e as O, c as u, h as a, j as i, k as s, m as ea, n as G, o as ta, q as sa, r as ra, u as va, v as A, w as ia, x as P, y as la } from "./props-DyILkQVH.js";
|
|
2
|
-
import { T as E } from "./ThemeToggle-2HEU5v1Q.js";
|
|
3
|
-
var na = x('<div class="mt-2"><!></div>'), da = x('<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>'), oa = x('<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 ga(d, e) {
|
|
5
|
-
const o = k(e, ["children", "$$slots", "$$events", "$$legacy"]), T = k(o, ["brand", "showThemeToggle", "className"]);
|
|
6
|
-
let g = n(e, "brand", 8, ""), m = n(e, "showThemeToggle", 8, !0), h = n(e, "className", 8, ""), c = ea(!1);
|
|
7
|
-
function _() {
|
|
8
|
-
ta(c, !s(c));
|
|
9
|
-
}
|
|
10
|
-
function f() {
|
|
11
|
-
}
|
|
12
|
-
var l = oa();
|
|
13
|
-
F(l, () => ({
|
|
14
|
-
class: `bg-white border-b border-gray-200 sticky top-0 z-50 ${h() ?? ""}`,
|
|
15
|
-
...T
|
|
16
|
-
}));
|
|
17
|
-
var t = a(l), b = a(t), r = a(b), p = a(r), H = a(p), z = i(r, 2), I = a(z), J = a(I);
|
|
18
|
-
y(J, e, "nav", {});
|
|
19
|
-
var j = i(z, 2), K = a(j), C = a(K);
|
|
20
|
-
y(C, e, "actions", {});
|
|
21
|
-
var L = i(C, 2);
|
|
22
|
-
{
|
|
23
|
-
var Q = (v) => {
|
|
24
|
-
E(v, {});
|
|
25
|
-
};
|
|
26
|
-
N(L, (v) => {
|
|
27
|
-
m() && v(Q);
|
|
28
|
-
});
|
|
29
|
-
}
|
|
30
|
-
var R = i(j, 2), S = a(R), U = i(b, 2);
|
|
31
|
-
{
|
|
32
|
-
var V = (v) => {
|
|
33
|
-
var M = da(), W = a(M), q = a(W);
|
|
34
|
-
y(q, e, "nav", {});
|
|
35
|
-
var X = i(q, 2), B = a(X);
|
|
36
|
-
y(B, e, "actions", {});
|
|
37
|
-
var Y = i(B, 2);
|
|
38
|
-
{
|
|
39
|
-
var Z = (w) => {
|
|
40
|
-
var D = na(), aa = a(D);
|
|
41
|
-
E(aa, {}), u(w, D);
|
|
42
|
-
};
|
|
43
|
-
N(Y, (w) => {
|
|
44
|
-
m() && w(Z);
|
|
45
|
-
});
|
|
46
|
-
}
|
|
47
|
-
u(v, M);
|
|
48
|
-
};
|
|
49
|
-
N(U, (v) => {
|
|
50
|
-
s(c) && v(V);
|
|
51
|
-
});
|
|
52
|
-
}
|
|
53
|
-
$(() => G(H, g())), O("click", p, f), O("click", S, _), u(d, l);
|
|
54
|
-
}
|
|
55
|
-
var ca = (d, e, o) => e(s(o), d), _a = x("<li><a> </a></li>"), ba = x("<nav><ul></ul></nav>");
|
|
56
|
-
function ma(d, e) {
|
|
57
|
-
const o = k(e, ["children", "$$slots", "$$events", "$$legacy"]), T = k(o, ["variant", "items", "currentPath"]);
|
|
58
|
-
let g = n(e, "variant", 8, "header"), m = n(e, "items", 24, () => []), h = n(e, "currentPath", 8, "");
|
|
59
|
-
function c(l, t) {
|
|
60
|
-
t.preventDefault();
|
|
61
|
-
}
|
|
62
|
-
var _ = ba();
|
|
63
|
-
F(_, () => ({
|
|
64
|
-
class: `navigation navigation-${g() ?? ""}`,
|
|
65
|
-
...T
|
|
66
|
-
}));
|
|
67
|
-
var f = a(_);
|
|
68
|
-
ra(f, 5, m, va, (l, t) => {
|
|
69
|
-
var b = _a(), r = a(b);
|
|
70
|
-
r.__click = [ca, c, t];
|
|
71
|
-
var p = a(r);
|
|
72
|
-
$(() => {
|
|
73
|
-
ia(r, "href", (s(t), P(() => s(t).href))), A(r, 1, `px-3 py-2 text-sm font-medium rounded-md transition-colors ${la(h()), s(t), P(() => h() === s(t).href ? "bg-blue-100 text-blue-700" : "text-gray-600 hover:text-gray-900 hover:bg-gray-100") ?? ""}`), G(p, (s(t), P(() => s(t).label)));
|
|
74
|
-
}), u(l, b);
|
|
75
|
-
}), $(() => A(f, 1, `flex ${g() === "sidebar" ? "flex-col space-y-2" : "space-x-6"}`)), u(d, _);
|
|
76
|
-
}
|
|
77
|
-
sa(["click"]);
|
|
78
|
-
export {
|
|
79
|
-
ga as N,
|
|
80
|
-
ma as a
|
|
81
|
-
};
|