@kayord/ui 0.14.0 → 0.14.2
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
CHANGED
|
@@ -16,7 +16,7 @@ Pnpm command to install ui library.
|
|
|
16
16
|
|
|
17
17
|
```bash
|
|
18
18
|
# create a new project in the current directory
|
|
19
|
-
pnpm add -D @kayord/ui
|
|
19
|
+
pnpm add -D @kayord/ui
|
|
20
20
|
# install peer dependencies
|
|
21
21
|
pnpm add -D lucide-svelte zod sveltekit-superforms tailwindcss-animate
|
|
22
22
|
```
|
|
@@ -30,37 +30,170 @@ npx svelte-add@latest tailwindcss
|
|
|
30
30
|
pnpm i
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
-
###
|
|
33
|
+
### Add app.css and also include tailwindcss-animate
|
|
34
34
|
|
|
35
|
-
```
|
|
36
|
-
|
|
35
|
+
```css
|
|
36
|
+
@import "tailwindcss";
|
|
37
|
+
@import "./tailwindcss-animate.css";
|
|
37
38
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
39
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
40
|
+
|
|
41
|
+
/* Button Defaults */
|
|
42
|
+
@layer base {
|
|
43
|
+
button:not(:disabled),
|
|
44
|
+
[role="button"]:not(:disabled) {
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
:root {
|
|
50
|
+
--accent-foreground: 240 5.9% 10%;
|
|
51
|
+
--accent: 240 4.8% 95.9%;
|
|
52
|
+
--background: 0 0% 100%;
|
|
53
|
+
--border: 240 5.9% 90%;
|
|
54
|
+
--card-foreground: 240 10% 3.9%;
|
|
55
|
+
--card: 0 0% 100%;
|
|
56
|
+
--destructive-foreground: 0 0% 98%;
|
|
57
|
+
--destructive: 0 84.2% 60.2%;
|
|
58
|
+
--foreground: 240 10% 3.9%;
|
|
59
|
+
--input: 240 5.9% 90%;
|
|
60
|
+
--muted-foreground: 240 3.8% 46.1%;
|
|
61
|
+
--muted: 240 4.8% 95.9%;
|
|
62
|
+
--popover-foreground: 240 10% 3.9%;
|
|
63
|
+
--popover: 0 0% 100%;
|
|
64
|
+
--primary-foreground: 0 0% 98%;
|
|
65
|
+
--primary: 240 5.9% 10%;
|
|
66
|
+
--radius: 0.5rem;
|
|
67
|
+
--ring: 240 5.9% 10%;
|
|
68
|
+
--secondary-foreground: 240 5.9% 10%;
|
|
69
|
+
--secondary: 240 4.8% 95.9%;
|
|
70
|
+
--sidebar-accent-foreground: 240 5.9% 10%;
|
|
71
|
+
--sidebar-accent: 240 4.8% 95.9%;
|
|
72
|
+
--sidebar-background: 0 0% 98%;
|
|
73
|
+
--sidebar-border: 220 13% 91%;
|
|
74
|
+
--sidebar-foreground: 240 5.3% 26.1%;
|
|
75
|
+
--sidebar-primary-foreground: 0 0% 98%;
|
|
76
|
+
--sidebar-primary: 232 27% 35%;
|
|
77
|
+
--sidebar-ring: 217.2 91.2% 59.8%;
|
|
78
|
+
}
|
|
79
|
+
.dark {
|
|
80
|
+
--background: 240 10% 3.9%;
|
|
81
|
+
--foreground: 0 0% 98%;
|
|
82
|
+
--card: 240 10% 3.9%;
|
|
83
|
+
--card-foreground: 0 0% 98%;
|
|
84
|
+
--popover: 240 10% 3.9%;
|
|
85
|
+
--popover-foreground: 0 0% 98%;
|
|
86
|
+
--primary: 0 0% 98%;
|
|
87
|
+
--primary-foreground: 240 5.9% 10%;
|
|
88
|
+
--secondary: 240 3.7% 15.9%;
|
|
89
|
+
--secondary-foreground: 0 0% 98%;
|
|
90
|
+
--muted: 240 3.7% 15.9%;
|
|
91
|
+
--muted-foreground: 240 5% 64.9%;
|
|
92
|
+
--accent: 240 3.7% 15.9%;
|
|
93
|
+
--accent-foreground: 0 0% 98%;
|
|
94
|
+
--destructive: 0 62.8% 30.6%;
|
|
95
|
+
--destructive-foreground: 0 0% 98%;
|
|
96
|
+
--border: 240 3.7% 15.9%;
|
|
97
|
+
--input: 240 3.7% 15.9%;
|
|
98
|
+
--ring: 240 4.9% 83.9%;
|
|
99
|
+
--sidebar-background: 221, 40%, 8%;
|
|
100
|
+
--sidebar-foreground: 240 4.8% 95.9%;
|
|
101
|
+
--sidebar-primary: 232 27% 35%;
|
|
102
|
+
--sidebar-primary-foreground: 0 0% 100%;
|
|
103
|
+
--sidebar-accent: 221, 40%, 13%;
|
|
104
|
+
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
|
105
|
+
--sidebar-border: 240 3.7% 15.9%;
|
|
106
|
+
--sidebar-ring: 217.2 91.2% 59.8%;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
@theme inline {
|
|
110
|
+
/* Fonts */
|
|
111
|
+
--font-sans:
|
|
112
|
+
"Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
|
113
|
+
"Noto Color Emoji";
|
|
114
|
+
--font-mono:
|
|
115
|
+
"Source Code Pro Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
|
|
116
|
+
monospace;
|
|
117
|
+
|
|
118
|
+
/* Colors */
|
|
119
|
+
--color-border: hsl(var(--border));
|
|
120
|
+
--color-input: hsl(var(--input));
|
|
121
|
+
--color-ring: hsl(var(--ring));
|
|
122
|
+
--color-background: hsl(var(--background));
|
|
123
|
+
--color-foreground: hsl(var(--foreground));
|
|
124
|
+
--color-primary: hsl(var(--primary));
|
|
125
|
+
--color-primary-foreground: hsl(var(--primary-foreground));
|
|
126
|
+
--color-secondary: hsl(var(--secondary));
|
|
127
|
+
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
|
128
|
+
--color-destructive: hsl(var(--destructive));
|
|
129
|
+
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
|
130
|
+
--color-caution: var(--color-red-500);
|
|
131
|
+
--color-warning: var(--color-amber-500);
|
|
132
|
+
--color-info: var(--color-sky-500);
|
|
133
|
+
--color-muted: hsl(var(--muted));
|
|
134
|
+
--color-muted-foreground: hsl(var(--muted-foreground));
|
|
135
|
+
--color-accent: hsl(var(--accent));
|
|
136
|
+
--color-accent-foreground: hsl(var(--accent-foreground));
|
|
137
|
+
--color-popover: hsl(var(--popover));
|
|
138
|
+
--color-popover-foreground: hsl(var(--popover-foreground));
|
|
139
|
+
--color-card: hsl(var(--card));
|
|
140
|
+
--color-card-foreground: hsl(var(--card-foreground));
|
|
141
|
+
--color-sidebar: hsl(var(--sidebar-background));
|
|
142
|
+
--color-sidebar-foreground: hsl(var(--sidebar-foreground));
|
|
143
|
+
--color-sidebar-primary: hsl(var(--sidebar-primary));
|
|
144
|
+
--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
|
|
145
|
+
--color-sidebar-accent: hsl(var(--sidebar-accent));
|
|
146
|
+
--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
|
|
147
|
+
--color-sidebar-border: hsl(var(--sidebar-border));
|
|
148
|
+
--color-sidebar-ring: hsl(var(--sidebar-ring));
|
|
149
|
+
|
|
150
|
+
/* Border */
|
|
151
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
152
|
+
--radius-lg: var(--radius);
|
|
153
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
154
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
155
|
+
|
|
156
|
+
/* Animations */
|
|
157
|
+
--animate-accordion-down: 0.2s ease-out accordion-down;
|
|
158
|
+
--animate-accordion-up: 0.2s ease-out accordion-up;
|
|
159
|
+
--animate-caret-blink: 1.25s ease-out infinite caret-blink;
|
|
160
|
+
|
|
161
|
+
/* Keyframes */
|
|
162
|
+
@keyframes accordion-down {
|
|
163
|
+
from: {
|
|
164
|
+
height: 0;
|
|
165
|
+
}
|
|
166
|
+
to: {
|
|
167
|
+
height: var(--bits-accordion-content-height);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
@keyframes accordion-up {
|
|
171
|
+
from: {
|
|
172
|
+
height: var(--bits-accordion-content-height);
|
|
173
|
+
}
|
|
174
|
+
to: {
|
|
175
|
+
height: 0;
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
@keyframes caret-blink {
|
|
179
|
+
0%,
|
|
180
|
+
70%,
|
|
181
|
+
100% {
|
|
182
|
+
opacity: 1;
|
|
183
|
+
}
|
|
184
|
+
20%,
|
|
185
|
+
50% {
|
|
186
|
+
opacity: 0;
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
}
|
|
45
190
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
export default {
|
|
55
|
-
darkMode: ["class"],
|
|
56
|
-
content: ["./src/**/*.{html,js,svelte,ts}", "./node_modules/@kayord/ui/**/*.{html,js,svelte,ts}"],
|
|
57
|
-
theme: {
|
|
58
|
-
extend: {
|
|
59
|
-
fontFamily: {
|
|
60
|
-
sans: [...fontFamily.sans],
|
|
61
|
-
},
|
|
62
|
-
},
|
|
63
|
-
},
|
|
64
|
-
plugins: [kayordPlugin, tailwindcssAnimate],
|
|
65
|
-
} satisfies Config;
|
|
191
|
+
@layer base {
|
|
192
|
+
* {
|
|
193
|
+
@apply border-border;
|
|
194
|
+
}
|
|
195
|
+
body {
|
|
196
|
+
@apply bg-background text-foreground;
|
|
197
|
+
}
|
|
198
|
+
}
|
|
66
199
|
```
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
<Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
|
|
29
29
|
{/if}
|
|
30
30
|
<Skeleton
|
|
31
|
-
class="h-4 max-w-
|
|
31
|
+
class="h-4 max-w-(--skeleton-width) flex-1"
|
|
32
32
|
data-sidebar="menu-skeleton-text"
|
|
33
33
|
style="--skeleton-width: {width};"
|
|
34
34
|
/>
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
|
|
26
26
|
{#if collapsible === "none"}
|
|
27
27
|
<div
|
|
28
|
-
class={cn("bg-sidebar text-sidebar-foreground flex h-full w-
|
|
28
|
+
class={cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className)}
|
|
29
29
|
bind:this={ref}
|
|
30
30
|
{...restProps}
|
|
31
31
|
>
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
<Sheet.Content
|
|
37
37
|
data-sidebar="sidebar"
|
|
38
38
|
data-mobile="true"
|
|
39
|
-
class="bg-sidebar text-sidebar-foreground w-
|
|
39
|
+
class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
|
|
40
40
|
style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
|
|
41
41
|
{side}
|
|
42
42
|
>
|
|
@@ -57,24 +57,24 @@
|
|
|
57
57
|
<!-- This is what handles the sidebar gap on desktop -->
|
|
58
58
|
<div
|
|
59
59
|
class={cn(
|
|
60
|
-
"relative h-svh w-
|
|
60
|
+
"relative h-svh w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
|
|
61
61
|
"group-data-[collapsible=offcanvas]:w-0",
|
|
62
62
|
"group-data-[side=right]:rotate-180",
|
|
63
63
|
variant === "floating" || variant === "inset"
|
|
64
64
|
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
|
|
65
|
-
: "group-data-[collapsible=icon]:w-
|
|
65
|
+
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
|
|
66
66
|
)}
|
|
67
67
|
></div>
|
|
68
68
|
<div
|
|
69
69
|
class={cn(
|
|
70
|
-
"fixed inset-y-0 z-10 hidden h-svh w-
|
|
70
|
+
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
|
|
71
71
|
side === "left"
|
|
72
72
|
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
|
|
73
73
|
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
|
74
74
|
// Adjust the padding for floating and inset variants.
|
|
75
75
|
variant === "floating" || variant === "inset"
|
|
76
76
|
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
|
|
77
|
-
: "group-data-[collapsible=icon]:w-
|
|
77
|
+
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
|
|
78
78
|
className
|
|
79
79
|
)}
|
|
80
80
|
{...restProps}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kayord/ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.14.
|
|
4
|
+
"version": "0.14.2",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
@@ -46,29 +46,27 @@
|
|
|
46
46
|
"vaul-svelte": "1.0.0-next.6"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@kayord/tw-plugin": "^1.0.3",
|
|
50
49
|
"@sveltejs/adapter-auto": "^4.0.0",
|
|
51
|
-
"@sveltejs/kit": "^2.17.
|
|
50
|
+
"@sveltejs/kit": "^2.17.3",
|
|
52
51
|
"@sveltejs/package": "^2.3.10",
|
|
53
52
|
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
|
54
|
-
"@tailwindcss/vite": "^4.0.
|
|
53
|
+
"@tailwindcss/vite": "^4.0.9",
|
|
55
54
|
"@testing-library/jest-dom": "^6.6.3",
|
|
56
55
|
"@testing-library/svelte": "^5.2.7",
|
|
57
56
|
"@typescript-eslint/eslint-plugin": "^8.25.0",
|
|
58
57
|
"@typescript-eslint/parser": "^8.25.0",
|
|
59
58
|
"eslint": "^9.21.0",
|
|
60
|
-
"eslint-config-prettier": "^10.0.
|
|
61
|
-
"eslint-plugin-svelte": "^
|
|
59
|
+
"eslint-config-prettier": "^10.0.2",
|
|
60
|
+
"eslint-plugin-svelte": "^3.0.2",
|
|
62
61
|
"happy-dom": "^17.1.8",
|
|
63
|
-
"lucide-svelte": "^0.
|
|
62
|
+
"lucide-svelte": "^0.476.0",
|
|
64
63
|
"prettier": "^3.5.2",
|
|
65
64
|
"prettier-plugin-svelte": "^3.3.3",
|
|
66
65
|
"prettier-plugin-tailwindcss": "^0.6.11",
|
|
67
66
|
"publint": "^0.3.6",
|
|
68
|
-
"svelte": "^5.20.
|
|
67
|
+
"svelte": "^5.20.5",
|
|
69
68
|
"svelte-check": "^4.1.4",
|
|
70
|
-
"tailwindcss": "^4.0.
|
|
71
|
-
"tailwindcss-animate": "^1.0.7",
|
|
69
|
+
"tailwindcss": "^4.0.9",
|
|
72
70
|
"tslib": "^2.8.1",
|
|
73
71
|
"typescript": "^5.7.3",
|
|
74
72
|
"vite": "^6.2.0",
|
|
@@ -91,7 +89,7 @@
|
|
|
91
89
|
"lint": "prettier --check . && eslint .",
|
|
92
90
|
"format": "prettier --write .",
|
|
93
91
|
"test:unit": "vitest",
|
|
94
|
-
"lib": "pnpm dlx shadcn-svelte@next add -a -y -o --no-deps && pnpm format && pnpm version --no-git-tag-version patch",
|
|
92
|
+
"lib": "pnpm dlx shadcn-svelte@next add -a -y -o --no-deps && pnpm format && pnpm version --no-git-tag-version patch && ./tw.sh",
|
|
95
93
|
"next": "./next.sh"
|
|
96
94
|
}
|
|
97
95
|
}
|