zabi-components 5.0.13 → 5.0.14
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/dist/atoms/Badge.svelte
CHANGED
|
@@ -45,18 +45,18 @@
|
|
|
45
45
|
// Note: Using text-white instead of text-inverse to ensure light text in both light and dark modes
|
|
46
46
|
const variantClass =
|
|
47
47
|
variant === "success"
|
|
48
|
-
? "bg-
|
|
48
|
+
? "bg-success border-[var(--color-success)] text-white"
|
|
49
49
|
: variant === "warning"
|
|
50
|
-
? "bg-
|
|
50
|
+
? "bg-warning-weak border-[var(--color-warning-weak)] text-white"
|
|
51
51
|
: variant === "error"
|
|
52
|
-
? "bg-
|
|
52
|
+
? "bg-error border-[var(--color-error)] text-white"
|
|
53
53
|
: variant === "info"
|
|
54
|
-
? "bg-
|
|
54
|
+
? "bg-info border-[var(--color-info)] text-white"
|
|
55
55
|
: variant === "neutral"
|
|
56
|
-
? "bg-
|
|
56
|
+
? "bg-neutral border-[var(--color-neutral)] text-white"
|
|
57
57
|
: variant === "energetic"
|
|
58
|
-
? "bg-
|
|
59
|
-
: "bg-
|
|
58
|
+
? "bg-energetic-weak border-[var(--color-energetic-weak)] text-white"
|
|
59
|
+
: "bg-secondary border-[var(--color-secondary)] text-white"; // default
|
|
60
60
|
|
|
61
61
|
return `${baseClasses} ${sizeClass} ${variantClass}`.trim();
|
|
62
62
|
});
|
|
@@ -77,7 +77,10 @@
|
|
|
77
77
|
{#if variant === "success"}
|
|
78
78
|
<Check size={iconSize()} class="{iconSpacingClass()} text-white" />
|
|
79
79
|
{:else if variant === "warning"}
|
|
80
|
-
<AlertTriangle
|
|
80
|
+
<AlertTriangle
|
|
81
|
+
size={iconSize()}
|
|
82
|
+
class="{iconSpacingClass()} text-white"
|
|
83
|
+
/>
|
|
81
84
|
{:else if variant === "error"}
|
|
82
85
|
<X size={iconSize()} class="{iconSpacingClass()} text-white" />
|
|
83
86
|
{:else if variant === "info"}
|
package/dist/atoms/Select.svelte
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
+
import { CheckCircle, AlertTriangle, AlertCircle } from "@lucide/svelte";
|
|
3
|
+
|
|
2
4
|
// SSR-safe ID generation
|
|
3
5
|
function generateId(prefix: string = "id"): string {
|
|
4
6
|
if (typeof window !== "undefined") {
|
|
@@ -15,8 +17,8 @@
|
|
|
15
17
|
placeholder?: string;
|
|
16
18
|
disabled?: boolean;
|
|
17
19
|
rows?: number;
|
|
18
|
-
size?: "sm" | "md" | "lg";
|
|
19
20
|
variant?: "default" | "success" | "warning" | "error";
|
|
21
|
+
message?: string;
|
|
20
22
|
oninput?: (event: Event) => void;
|
|
21
23
|
}
|
|
22
24
|
|
|
@@ -27,8 +29,8 @@
|
|
|
27
29
|
placeholder = "",
|
|
28
30
|
disabled = false,
|
|
29
31
|
rows = 4,
|
|
30
|
-
size = "md",
|
|
31
32
|
variant = "default",
|
|
33
|
+
message = "",
|
|
32
34
|
oninput,
|
|
33
35
|
...restProps
|
|
34
36
|
}: Props = $props();
|
|
@@ -36,15 +38,6 @@
|
|
|
36
38
|
// Generate unique ID - SSR safe (call directly, not in $state)
|
|
37
39
|
const textareaId = generateId("textarea");
|
|
38
40
|
|
|
39
|
-
// Size classes using full class names
|
|
40
|
-
const sizeClass = $derived(() => {
|
|
41
|
-
return size === "sm"
|
|
42
|
-
? "px-3 py-1.5 text-sm"
|
|
43
|
-
: size === "lg"
|
|
44
|
-
? "px-5 py-3 text-base"
|
|
45
|
-
: "px-4 py-2 text-sm"; // default md
|
|
46
|
-
});
|
|
47
|
-
|
|
48
41
|
// Variant classes using semantic colors
|
|
49
42
|
const variantClass = $derived(() => {
|
|
50
43
|
return variant === "success"
|
|
@@ -53,15 +46,15 @@
|
|
|
53
46
|
? "border-warning focus:border-warning focus:ring-warning"
|
|
54
47
|
: variant === "error"
|
|
55
48
|
? "border-error focus:border-error focus:ring-error"
|
|
56
|
-
: "border-
|
|
49
|
+
: "border-0 focus:ring-2 focus:ring-brand-500"; // default - no border
|
|
57
50
|
});
|
|
58
51
|
|
|
59
|
-
// Textarea classes
|
|
52
|
+
// Textarea classes matching M3 design
|
|
60
53
|
const textareaClasses = $derived(() => {
|
|
61
54
|
const baseClasses =
|
|
62
|
-
"w-full
|
|
55
|
+
"w-full bg-brand-100 rounded-lg transition-all duration-200 placeholder:text-description text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed resize-y px-4 py-2.5 text-base leading-6";
|
|
63
56
|
|
|
64
|
-
return `${baseClasses} ${
|
|
57
|
+
return `${baseClasses} ${variantClass()}`.trim();
|
|
65
58
|
});
|
|
66
59
|
|
|
67
60
|
// Label classes using semantic text colors
|
|
@@ -69,6 +62,26 @@
|
|
|
69
62
|
() => "block text-sm font-medium text-label mb-1",
|
|
70
63
|
);
|
|
71
64
|
|
|
65
|
+
// Message classes based on variant
|
|
66
|
+
const messageClasses = $derived(() => {
|
|
67
|
+
if (variant === "error") {
|
|
68
|
+
return "text-error text-sm mt-1 flex items-center gap-1.5";
|
|
69
|
+
} else if (variant === "success") {
|
|
70
|
+
return "text-success text-sm mt-1 flex items-center gap-1.5";
|
|
71
|
+
} else if (variant === "warning") {
|
|
72
|
+
return "text-warning text-sm mt-1 flex items-center gap-1.5";
|
|
73
|
+
}
|
|
74
|
+
return "text-description text-sm mt-1 flex items-center gap-1.5";
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
// Get icon component based on variant
|
|
78
|
+
const getIcon = $derived(() => {
|
|
79
|
+
if (variant === "error") return AlertCircle;
|
|
80
|
+
if (variant === "success") return CheckCircle;
|
|
81
|
+
if (variant === "warning") return AlertTriangle;
|
|
82
|
+
return null;
|
|
83
|
+
});
|
|
84
|
+
|
|
72
85
|
function handleInput(event: Event) {
|
|
73
86
|
const target = event.target as HTMLTextAreaElement;
|
|
74
87
|
value = target.value;
|
|
@@ -84,7 +97,6 @@
|
|
|
84
97
|
{#if label}
|
|
85
98
|
<label for={textareaId} class={labelClasses()}>{label}</label>
|
|
86
99
|
{/if}
|
|
87
|
-
|
|
88
100
|
<textarea
|
|
89
101
|
id={textareaId}
|
|
90
102
|
{name}
|
|
@@ -94,6 +106,17 @@
|
|
|
94
106
|
{rows}
|
|
95
107
|
class={textareaClasses()}
|
|
96
108
|
oninput={handleInput}
|
|
109
|
+
aria-invalid={variant === "error" ? "true" : undefined}
|
|
110
|
+
aria-describedby={message ? `${textareaId}-message` : undefined}
|
|
97
111
|
{...restProps}
|
|
98
112
|
></textarea>
|
|
113
|
+
{#if message && variant !== "default"}
|
|
114
|
+
<p id={`${textareaId}-message`} class={messageClasses()} role="alert">
|
|
115
|
+
{#if getIcon()}
|
|
116
|
+
{@const Icon = getIcon()}
|
|
117
|
+
<Icon size={14} class="shrink-0" />
|
|
118
|
+
{/if}
|
|
119
|
+
<span>{message}</span>
|
|
120
|
+
</p>
|
|
121
|
+
{/if}
|
|
99
122
|
</div>
|
|
@@ -5,8 +5,8 @@ interface Props {
|
|
|
5
5
|
placeholder?: string;
|
|
6
6
|
disabled?: boolean;
|
|
7
7
|
rows?: number;
|
|
8
|
-
size?: "sm" | "md" | "lg";
|
|
9
8
|
variant?: "default" | "success" | "warning" | "error";
|
|
9
|
+
message?: string;
|
|
10
10
|
oninput?: (event: Event) => void;
|
|
11
11
|
}
|
|
12
12
|
declare const Textarea: import("svelte").Component<Props, {}, "">;
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
const baseClasses = "flex flex-col items-center justify-center overflow-clip relative rounded-[20px] shrink-0 transition-colors duration-200";
|
|
53
53
|
|
|
54
54
|
if (isActive) {
|
|
55
|
-
return `${baseClasses} bg-
|
|
55
|
+
return `${baseClasses} bg-action-primary-subtle-hover`;
|
|
56
56
|
}
|
|
57
57
|
return `${baseClasses}`;
|
|
58
58
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "zabi-components",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.14",
|
|
4
4
|
"description": "A modern Svelte 5 component library with TypeScript, Tailwind CSS v4, and 100% SSR-safe components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -80,7 +80,8 @@
|
|
|
80
80
|
"prepublishOnly": "npm run build:lib"
|
|
81
81
|
},
|
|
82
82
|
"devDependencies": {
|
|
83
|
-
"@storybook/
|
|
83
|
+
"@storybook/addon-docs": "^10.0.7",
|
|
84
|
+
"@storybook/sveltekit": "^10.0.7",
|
|
84
85
|
"@sveltejs/adapter-auto": "^7.0.0",
|
|
85
86
|
"@sveltejs/kit": "^2.47.2",
|
|
86
87
|
"@sveltejs/package": "^2.5.4",
|
|
@@ -91,7 +92,7 @@
|
|
|
91
92
|
"@types/react": "^19.2.2",
|
|
92
93
|
"autoprefixer": "^10.4.17",
|
|
93
94
|
"postcss": "^8.4.35",
|
|
94
|
-
"storybook": "^
|
|
95
|
+
"storybook": "^10.0.7",
|
|
95
96
|
"svelte": "^5.38.10",
|
|
96
97
|
"svelte-check": "^4.3.1",
|
|
97
98
|
"tailwindcss": "^4.1.13",
|