@ekkolyth/ui 0.1.0 → 0.1.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/dist/catpuccin/frappe.css +35 -0
- package/dist/catpuccin/latte.css +35 -0
- package/dist/catpuccin/macchiato.css +35 -0
- package/dist/catpuccin/mocha.css +35 -0
- package/dist/convergence.css +70 -0
- package/dist/ekko-os.css +71 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +13 -7
- package/dist/tanstack.js +1 -1
- package/dist/themes.css +101 -0
- package/dist/tokyo-night.css +35 -0
- package/package.json +10 -2
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/* Catppuccin Frappe Theme - Dark Mode (Mauve accent) */
|
|
2
|
+
html[data-theme="frappe"] {
|
|
3
|
+
--radius: 0.625rem;
|
|
4
|
+
--background: hsl(229 18.64% 23.14%); /* base */
|
|
5
|
+
--foreground: hsl(227 70.15% 86.86%); /* text */
|
|
6
|
+
--card: hsl(229 18.64% 23.14%); /* base */
|
|
7
|
+
--card-foreground: hsl(227 70.15% 86.86%); /* text */
|
|
8
|
+
--popover: hsl(229 18.64% 23.14%); /* base */
|
|
9
|
+
--popover-foreground: hsl(227 70.15% 86.86%); /* text */
|
|
10
|
+
--primary: hsl(277 59.02% 76.08%); /* accent - Mauve */
|
|
11
|
+
--primary-foreground: hsl(229 18.64% 23.14%); /* base */
|
|
12
|
+
--secondary: hsl(230 15.58% 30.20%); /* surface0 */
|
|
13
|
+
--secondary-foreground: hsl(227 70.15% 86.86%); /* text */
|
|
14
|
+
--muted: hsl(230 15.58% 30.20%); /* surface0 */
|
|
15
|
+
--muted-foreground: hsl(227 43.69% 79.80%); /* subtext1 */
|
|
16
|
+
--accent: hsl(230 15.58% 30.20%); /* surface0 */
|
|
17
|
+
--accent-foreground: hsl(227 70.15% 86.86%); /* text */
|
|
18
|
+
--destructive: hsl(359 67.79% 70.78%); /* red */
|
|
19
|
+
--border: hsl(227 14.74% 37.25%); /* surface1 */
|
|
20
|
+
--input: hsl(227 14.74% 37.25%); /* surface1 */
|
|
21
|
+
--ring: hsl(227 70.15% 86.86%); /* text */
|
|
22
|
+
--chart-1: hsl(341 18.43% 40.00%); /* red */
|
|
23
|
+
--chart-2: hsl(191 18.43% 39.22%); /* teal */
|
|
24
|
+
--chart-3: hsl(224 23.53% 43.53%); /* blue */
|
|
25
|
+
--chart-4: hsl(31 9.41% 43.53%); /* yellow */
|
|
26
|
+
--chart-5: hsl(126 9.41% 41.18%); /* green */
|
|
27
|
+
--sidebar: hsl(229 18.82% 21.96%); /* mantle */
|
|
28
|
+
--sidebar-foreground: hsl(227 70.15% 86.86%); /* text */
|
|
29
|
+
--sidebar-primary: hsl(277 59.02% 76.08%); /* accent - Mauve */
|
|
30
|
+
--sidebar-primary-foreground: hsl(229 18.64% 23.14%); /* base */
|
|
31
|
+
--sidebar-accent: hsl(229 18.64% 23.14%); /* surface0 */
|
|
32
|
+
--sidebar-accent-foreground: hsl(227 70.15% 86.86%); /* text */
|
|
33
|
+
--sidebar-border: hsl(227 14.74% 37.25%); /* surface1 */
|
|
34
|
+
--sidebar-ring: hsl(227 14.74% 37.25%); /* surface1 */
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/* Catppuccin Latte Theme - Light Mode (Mauve accent) */
|
|
2
|
+
html[data-theme="latte"] {
|
|
3
|
+
--radius: 0.625rem;
|
|
4
|
+
--background: hsl(220 23.08% 94.90%); /* base */
|
|
5
|
+
--foreground: hsl(234 16.02% 35.49%); /* text */
|
|
6
|
+
--card: hsl(220 23.08% 94.90%); /* base */
|
|
7
|
+
--card-foreground: hsl(234 16.02% 35.49%); /* text */
|
|
8
|
+
--popover: hsl(220 23.08% 94.90%); /* base */
|
|
9
|
+
--popover-foreground: hsl(234 16.02% 35.49%); /* text */
|
|
10
|
+
--primary: hsl(266 85.05% 58.04%); /* accent - Mauve */
|
|
11
|
+
--primary-foreground: hsl(220 23.08% 94.90%); /* base */
|
|
12
|
+
--secondary: hsl(223 15.91% 82.75%); /* surface0 */
|
|
13
|
+
--secondary-foreground: hsl(234 16.02% 35.49%); /* text */
|
|
14
|
+
--muted: hsl(223 15.91% 82.75%); /* surface0 */
|
|
15
|
+
--muted-foreground: hsl(233 12.80% 41.37%); /* subtext1 */
|
|
16
|
+
--accent: hsl(223 15.91% 82.75%); /* surface0 */
|
|
17
|
+
--accent-foreground: hsl(234 16.02% 35.49%); /* text */
|
|
18
|
+
--destructive: hsl(347 86.67% 44.12%); /* red */
|
|
19
|
+
--border: hsl(225 13.56% 76.86%); /* surface1 */
|
|
20
|
+
--input: hsl(225 13.56% 76.86%); /* surface1 */
|
|
21
|
+
--ring: hsl(234 16.02% 35.49%); /* text */
|
|
22
|
+
--chart-1: hsl(345 57.65% 74.12%); /* red */
|
|
23
|
+
--chart-2: hsl(185 37.25% 70.59%); /* teal */
|
|
24
|
+
--chart-3: hsl(219 81.96% 78.43%); /* blue */
|
|
25
|
+
--chart-4: hsl(35 61.18% 76.86%); /* yellow */
|
|
26
|
+
--chart-5: hsl(113 32.94% 73.33%); /* green */
|
|
27
|
+
--sidebar: hsl(218 25.10% 93.73%); /* mantle */
|
|
28
|
+
--sidebar-foreground: hsl(234 16.02% 35.49%); /* text */
|
|
29
|
+
--sidebar-primary: hsl(266 85.05% 58.04%); /* accent - Mauve */
|
|
30
|
+
--sidebar-primary-foreground: hsl(220 23.08% 94.90%); /* base */
|
|
31
|
+
--sidebar-accent: hsl(220 23.08% 94.90%); /* surface0 */
|
|
32
|
+
--sidebar-accent-foreground: hsl(234 16.02% 35.49%); /* text */
|
|
33
|
+
--sidebar-border: hsl(225 13.56% 76.86%); /* surface1 */
|
|
34
|
+
--sidebar-ring: hsl(225 13.56% 76.86%); /* surface1 */
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/* Catppuccin Macchiato Theme - Dark Mode (Mauve accent) */
|
|
2
|
+
html[data-theme="macchiato"] {
|
|
3
|
+
--radius: 0.625rem;
|
|
4
|
+
--background: hsl(232 23.40% 18.43%); /* base */
|
|
5
|
+
--foreground: hsl(227 68.25% 87.65%); /* text */
|
|
6
|
+
--card: hsl(232 23.40% 18.43%); /* base */
|
|
7
|
+
--card-foreground: hsl(227 68.25% 87.65%); /* text */
|
|
8
|
+
--popover: hsl(232 23.40% 18.43%); /* base */
|
|
9
|
+
--popover-foreground: hsl(227 68.25% 87.65%); /* text */
|
|
10
|
+
--primary: hsl(267 82.69% 79.61%); /* accent - Mauve */
|
|
11
|
+
--primary-foreground: hsl(232 23.40% 18.43%); /* base */
|
|
12
|
+
--secondary: hsl(230 18.80% 26.08%); /* surface0 */
|
|
13
|
+
--secondary-foreground: hsl(227 68.25% 87.65%); /* text */
|
|
14
|
+
--muted: hsl(230 18.80% 26.08%); /* surface0 */
|
|
15
|
+
--muted-foreground: hsl(228 39.22% 80.00%); /* subtext1 */
|
|
16
|
+
--accent: hsl(230 18.80% 26.08%); /* surface0 */
|
|
17
|
+
--accent-foreground: hsl(227 68.25% 87.65%); /* text */
|
|
18
|
+
--destructive: hsl(351 73.91% 72.94%); /* red */
|
|
19
|
+
--border: hsl(231 15.61% 33.92%); /* surface1 */
|
|
20
|
+
--input: hsl(231 15.61% 33.92%); /* surface1 */
|
|
21
|
+
--ring: hsl(227 68.25% 87.65%); /* text */
|
|
22
|
+
--chart-1: hsl(333 20.78% 38.04%); /* red */
|
|
23
|
+
--chart-2: hsl(193 19.61% 38.04%); /* teal */
|
|
24
|
+
--chart-3: hsl(224 26.67% 41.18%); /* blue */
|
|
25
|
+
--chart-4: hsl(30 8.24% 42.35%); /* yellow */
|
|
26
|
+
--chart-5: hsl(139 10.98% 38.82%); /* green */
|
|
27
|
+
--sidebar: hsl(234 22.75% 17.25%); /* mantle */
|
|
28
|
+
--sidebar-foreground: hsl(227 68.25% 87.65%); /* text */
|
|
29
|
+
--sidebar-primary: hsl(267 82.69% 79.61%); /* accent - Mauve */
|
|
30
|
+
--sidebar-primary-foreground: hsl(232 23.40% 18.43%); /* base */
|
|
31
|
+
--sidebar-accent: hsl(232 23.40% 18.43%); /* surface0 */
|
|
32
|
+
--sidebar-accent-foreground: hsl(227 68.25% 87.65%); /* text */
|
|
33
|
+
--sidebar-border: hsl(231 15.61% 33.92%); /* surface1 */
|
|
34
|
+
--sidebar-ring: hsl(231 15.61% 33.92%); /* surface1 */
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/* Catppuccin Mocha Theme - Dark Mode (Mauve accent) */
|
|
2
|
+
html[data-theme="mocha"] {
|
|
3
|
+
--radius: 0.625rem;
|
|
4
|
+
--background: hsl(240 21.05% 14.90%); /* base */
|
|
5
|
+
--foreground: hsl(226 63.93% 88.04%); /* text */
|
|
6
|
+
--card: hsl(240 21.05% 14.90%); /* base */
|
|
7
|
+
--card-foreground: hsl(226 63.93% 88.04%); /* text */
|
|
8
|
+
--popover: hsl(240 21.05% 14.90%); /* base */
|
|
9
|
+
--popover-foreground: hsl(226 63.93% 88.04%); /* text */
|
|
10
|
+
--primary: hsl(267 83.51% 80.98%); /* accent - Mauve */
|
|
11
|
+
--primary-foreground: hsl(240 21.05% 14.90%); /* base */
|
|
12
|
+
--secondary: hsl(237 16.24% 22.94%); /* surface0 */
|
|
13
|
+
--secondary-foreground: hsl(226 63.93% 88.04%); /* text */
|
|
14
|
+
--muted: hsl(237 16.24% 22.94%); /* surface0 */
|
|
15
|
+
--muted-foreground: hsl(227 35.29% 80.00%); /* subtext1 */
|
|
16
|
+
--accent: hsl(237 16.24% 22.94%); /* surface0 */
|
|
17
|
+
--accent-foreground: hsl(226 63.93% 88.04%); /* text */
|
|
18
|
+
--destructive: hsl(343 81.25% 74.90%); /* red */
|
|
19
|
+
--border: hsl(234 13.21% 31.18%); /* surface1 */
|
|
20
|
+
--input: hsl(234 13.21% 31.18%); /* surface1 */
|
|
21
|
+
--ring: hsl(226 63.93% 88.04%); /* text */
|
|
22
|
+
--chart-1: hsl(329 21.57% 37.25%); /* red */
|
|
23
|
+
--chart-2: hsl(188 18.82% 37.25%); /* teal */
|
|
24
|
+
--chart-3: hsl(221 27.45% 39.61%); /* blue */
|
|
25
|
+
--chart-4: hsl(30 9.41% 42.35%); /* yellow */
|
|
26
|
+
--chart-5: hsl(139 12.94% 38.04%); /* green */
|
|
27
|
+
--sidebar: hsl(240 21.18% 14.12%); /* mantle */
|
|
28
|
+
--sidebar-foreground: hsl(226 63.93% 88.04%); /* text */
|
|
29
|
+
--sidebar-primary: hsl(267 83.51% 80.98%); /* accent - Mauve */
|
|
30
|
+
--sidebar-primary-foreground: hsl(240 21.05% 14.90%); /* base */
|
|
31
|
+
--sidebar-accent: hsl(240 21.05% 14.90%); /* surface0 */
|
|
32
|
+
--sidebar-accent-foreground: hsl(226 63.93% 88.04%); /* text */
|
|
33
|
+
--sidebar-border: hsl(234 13.21% 31.18%); /* surface1 */
|
|
34
|
+
--sidebar-ring: hsl(234 13.21% 31.18%); /* surface1 */
|
|
35
|
+
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
/* Convergence - Light */
|
|
2
|
+
html[data-theme="light"] {
|
|
3
|
+
--background: oklch(1 0 0);
|
|
4
|
+
--foreground: oklch(0.141 0.005 285.823);
|
|
5
|
+
--card: oklch(1 0 0);
|
|
6
|
+
--card-foreground: oklch(0.141 0.005 285.823);
|
|
7
|
+
--popover: oklch(1 0 0);
|
|
8
|
+
--popover-foreground: oklch(0.141 0.005 285.823);
|
|
9
|
+
--primary: oklch(0.51 0.23 277);
|
|
10
|
+
--primary-foreground: oklch(0.96 0.02 272);
|
|
11
|
+
--secondary: oklch(0.967 0.001 286.375);
|
|
12
|
+
--secondary-foreground: oklch(0.21 0.006 285.885);
|
|
13
|
+
--muted: oklch(0.967 0.001 286.375);
|
|
14
|
+
--muted-foreground: oklch(0.552 0.016 285.938);
|
|
15
|
+
--accent: oklch(0.967 0.001 286.375);
|
|
16
|
+
--accent-foreground: oklch(0.21 0.006 285.885);
|
|
17
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
18
|
+
--border: oklch(0.92 0.004 286.32);
|
|
19
|
+
--input: oklch(0.92 0.004 286.32);
|
|
20
|
+
--ring: oklch(0.705 0.015 286.067);
|
|
21
|
+
--chart-1: oklch(0.79 0.1 275);
|
|
22
|
+
--chart-2: oklch(0.68 0.16 277);
|
|
23
|
+
--chart-3: oklch(0.59 0.2 277);
|
|
24
|
+
--chart-4: oklch(0.51 0.23 277);
|
|
25
|
+
--chart-5: oklch(0.46 0.21 277);
|
|
26
|
+
--radius: 0.45rem;
|
|
27
|
+
--sidebar: oklch(0.985 0 0);
|
|
28
|
+
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
|
29
|
+
--sidebar-primary: oklch(0.51 0.23 277);
|
|
30
|
+
--sidebar-primary-foreground: oklch(0.96 0.02 272);
|
|
31
|
+
--sidebar-accent: oklch(0.967 0.001 286.375);
|
|
32
|
+
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
|
33
|
+
--sidebar-border: oklch(0.92 0.004 286.32);
|
|
34
|
+
--sidebar-ring: oklch(0.705 0.015 286.067);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* Convergence - Dark */
|
|
38
|
+
html[data-theme="dark"] {
|
|
39
|
+
--background: oklch(0.141 0.005 285.823);
|
|
40
|
+
--foreground: oklch(0.985 0 0);
|
|
41
|
+
--card: oklch(0.21 0.006 285.885);
|
|
42
|
+
--card-foreground: oklch(0.985 0 0);
|
|
43
|
+
--popover: oklch(0.21 0.006 285.885);
|
|
44
|
+
--popover-foreground: oklch(0.985 0 0);
|
|
45
|
+
--primary: oklch(0.59 0.2 277);
|
|
46
|
+
--primary-foreground: oklch(0.96 0.02 272);
|
|
47
|
+
--secondary: oklch(0.274 0.006 286.033);
|
|
48
|
+
--secondary-foreground: oklch(0.985 0 0);
|
|
49
|
+
--muted: oklch(0.274 0.006 286.033);
|
|
50
|
+
--muted-foreground: oklch(0.705 0.015 286.067);
|
|
51
|
+
--accent: oklch(0.274 0.006 286.033);
|
|
52
|
+
--accent-foreground: oklch(0.985 0 0);
|
|
53
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
54
|
+
--border: oklch(1 0 0 / 10%);
|
|
55
|
+
--input: oklch(1 0 0 / 15%);
|
|
56
|
+
--ring: oklch(0.552 0.016 285.938);
|
|
57
|
+
--chart-1: oklch(0.79 0.1 275);
|
|
58
|
+
--chart-2: oklch(0.68 0.16 277);
|
|
59
|
+
--chart-3: oklch(0.59 0.2 277);
|
|
60
|
+
--chart-4: oklch(0.51 0.23 277);
|
|
61
|
+
--chart-5: oklch(0.46 0.21 277);
|
|
62
|
+
--sidebar: oklch(0.21 0.006 285.885);
|
|
63
|
+
--sidebar-foreground: oklch(0.985 0 0);
|
|
64
|
+
--sidebar-primary: oklch(0.68 0.16 277);
|
|
65
|
+
--sidebar-primary-foreground: oklch(0.96 0.02 272);
|
|
66
|
+
--sidebar-accent: oklch(0.274 0.006 286.033);
|
|
67
|
+
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
68
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
69
|
+
--sidebar-ring: oklch(0.552 0.016 285.938);
|
|
70
|
+
}
|
package/dist/ekko-os.css
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/* EkkoOS - Light (from EkkoOS apps/web globals.css :root) */
|
|
2
|
+
html[data-theme="ekkoos-light"] {
|
|
3
|
+
--radius: 0.25rem;
|
|
4
|
+
--background: oklch(1 0 0);
|
|
5
|
+
--foreground: oklch(0.141 0.005 285.823);
|
|
6
|
+
--card: oklch(1 0 0);
|
|
7
|
+
--card-foreground: oklch(0.141 0.005 285.823);
|
|
8
|
+
--popover: oklch(1 0 0);
|
|
9
|
+
--popover-foreground: oklch(0.141 0.005 285.823);
|
|
10
|
+
--primary: oklch(0.21 0.006 285.885);
|
|
11
|
+
--primary-foreground: oklch(0.985 0 0);
|
|
12
|
+
--secondary: oklch(0.967 0.001 286.375);
|
|
13
|
+
--secondary-foreground: oklch(0.21 0.006 285.885);
|
|
14
|
+
--muted: oklch(0.967 0.001 286.375);
|
|
15
|
+
--muted-foreground: oklch(0.552 0.016 285.938);
|
|
16
|
+
--accent: oklch(0.967 0.001 286.375);
|
|
17
|
+
--accent-foreground: oklch(0.21 0.006 285.885);
|
|
18
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
19
|
+
--border: oklch(0.92 0.004 286.32);
|
|
20
|
+
--input: oklch(0.92 0.004 286.32);
|
|
21
|
+
--ring: oklch(0.705 0.015 286.067);
|
|
22
|
+
--chart-1: oklch(0.646 0.222 41.116);
|
|
23
|
+
--chart-2: oklch(0.6 0.118 184.704);
|
|
24
|
+
--chart-3: oklch(0.398 0.07 227.392);
|
|
25
|
+
--chart-4: oklch(0.828 0.189 84.429);
|
|
26
|
+
--chart-5: oklch(0.769 0.188 70.08);
|
|
27
|
+
--sidebar: oklch(0.985 0 0);
|
|
28
|
+
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
|
29
|
+
--sidebar-primary: oklch(0.21 0.006 285.885);
|
|
30
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
31
|
+
--sidebar-accent: oklch(0.967 0.001 286.375);
|
|
32
|
+
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
|
33
|
+
--sidebar-border: oklch(0.92 0.004 286.32);
|
|
34
|
+
--sidebar-ring: oklch(0.705 0.015 286.067);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* EkkoOS - Dark (from EkkoOS apps/web globals.css .dark - monochrome) */
|
|
38
|
+
html[data-theme="ekkoos-dark"] {
|
|
39
|
+
--radius: 0.25rem;
|
|
40
|
+
--background: oklch(0 0 0);
|
|
41
|
+
--foreground: oklch(1 0 0);
|
|
42
|
+
--card: oklch(0.05 0 0 / 0.8);
|
|
43
|
+
--card-foreground: oklch(1 0 0);
|
|
44
|
+
--popover: oklch(0.05 0 0);
|
|
45
|
+
--popover-foreground: oklch(1 0 0);
|
|
46
|
+
--primary: oklch(0.8 0 0);
|
|
47
|
+
--primary-foreground: oklch(0 0 0);
|
|
48
|
+
--secondary: oklch(0.1 0 0);
|
|
49
|
+
--secondary-foreground: oklch(0.9 0 0);
|
|
50
|
+
--muted: oklch(0.1 0 0);
|
|
51
|
+
--muted-foreground: oklch(0.6 0 0);
|
|
52
|
+
--accent: oklch(0.2 0 0);
|
|
53
|
+
--accent-foreground: oklch(1 0 0);
|
|
54
|
+
--destructive: oklch(0.62 0.25 29);
|
|
55
|
+
--border: oklch(0.15 0 0);
|
|
56
|
+
--input: oklch(0.08 0 0);
|
|
57
|
+
--ring: oklch(0.8 0 0);
|
|
58
|
+
--chart-1: oklch(0.9 0 0);
|
|
59
|
+
--chart-2: oklch(0.8 0 0);
|
|
60
|
+
--chart-3: oklch(0.7 0 0);
|
|
61
|
+
--chart-4: oklch(0.6 0 0);
|
|
62
|
+
--chart-5: oklch(0.5 0 0);
|
|
63
|
+
--sidebar: oklch(0 0 0);
|
|
64
|
+
--sidebar-foreground: oklch(1 0 0);
|
|
65
|
+
--sidebar-primary: oklch(0.8 0 0);
|
|
66
|
+
--sidebar-primary-foreground: oklch(0 0 0);
|
|
67
|
+
--sidebar-accent: oklch(0.2 0 0);
|
|
68
|
+
--sidebar-accent-foreground: oklch(0.9 0 0);
|
|
69
|
+
--sidebar-border: oklch(0.1 0 0);
|
|
70
|
+
--sidebar-ring: oklch(0.8 0 0);
|
|
71
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -446,7 +446,7 @@ declare function SelectValue({ ...props }: React$1.ComponentProps<typeof Select$
|
|
|
446
446
|
declare function SelectTrigger({ className, size, children, ...props }: React$1.ComponentProps<typeof Select$1.Trigger> & {
|
|
447
447
|
size?: "sm" | "default";
|
|
448
448
|
}): react_jsx_runtime.JSX.Element;
|
|
449
|
-
declare function SelectContent({ className, children, position, align, ...props }: React$1.ComponentProps<typeof Select$1.Content>): react_jsx_runtime.JSX.Element;
|
|
449
|
+
declare function SelectContent({ className, children, position, align, side, sideOffset, ...props }: React$1.ComponentProps<typeof Select$1.Content>): react_jsx_runtime.JSX.Element;
|
|
450
450
|
declare function SelectLabel({ className, ...props }: React$1.ComponentProps<typeof Select$1.Label>): react_jsx_runtime.JSX.Element;
|
|
451
451
|
declare function SelectItem({ className, children, ...props }: React$1.ComponentProps<typeof Select$1.Item>): react_jsx_runtime.JSX.Element;
|
|
452
452
|
declare function SelectSeparator({ className, ...props }: React$1.ComponentProps<typeof Select$1.Separator>): react_jsx_runtime.JSX.Element;
|
package/dist/index.js
CHANGED
|
@@ -214,7 +214,7 @@ function AlertAction(_a) {
|
|
|
214
214
|
);
|
|
215
215
|
}
|
|
216
216
|
var buttonVariants = cva(
|
|
217
|
-
"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] **:[svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 **:[svg]:pointer-events-none shrink-0 **:[svg]:shrink-0 outline-none group/button select-none",
|
|
217
|
+
"cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] **:[svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 **:[svg]:pointer-events-none shrink-0 **:[svg]:shrink-0 outline-none group/button select-none",
|
|
218
218
|
{
|
|
219
219
|
variants: {
|
|
220
220
|
variant: {
|
|
@@ -4394,7 +4394,7 @@ function SelectTrigger(_a) {
|
|
|
4394
4394
|
"data-slot": "select-trigger",
|
|
4395
4395
|
"data-size": size,
|
|
4396
4396
|
className: cn(
|
|
4397
|
-
"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 **:[svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center **:[svg]:pointer-events-none **:[svg]:shrink-0",
|
|
4397
|
+
"cursor-pointer border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 **:[svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center **:[svg]:pointer-events-none **:[svg]:shrink-0",
|
|
4398
4398
|
className
|
|
4399
4399
|
)
|
|
4400
4400
|
}, props), {
|
|
@@ -4409,13 +4409,17 @@ function SelectContent(_a) {
|
|
|
4409
4409
|
var _b = _a, {
|
|
4410
4410
|
className,
|
|
4411
4411
|
children,
|
|
4412
|
-
position = "
|
|
4413
|
-
align = "center"
|
|
4412
|
+
position = "popper",
|
|
4413
|
+
align = "center",
|
|
4414
|
+
side = "bottom",
|
|
4415
|
+
sideOffset = 4
|
|
4414
4416
|
} = _b, props = __objRest(_b, [
|
|
4415
4417
|
"className",
|
|
4416
4418
|
"children",
|
|
4417
4419
|
"position",
|
|
4418
|
-
"align"
|
|
4420
|
+
"align",
|
|
4421
|
+
"side",
|
|
4422
|
+
"sideOffset"
|
|
4419
4423
|
]);
|
|
4420
4424
|
return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsxs(
|
|
4421
4425
|
Select$1.Content,
|
|
@@ -4427,7 +4431,9 @@ function SelectContent(_a) {
|
|
|
4427
4431
|
className
|
|
4428
4432
|
),
|
|
4429
4433
|
position,
|
|
4430
|
-
align
|
|
4434
|
+
align,
|
|
4435
|
+
side,
|
|
4436
|
+
sideOffset
|
|
4431
4437
|
}, props), {
|
|
4432
4438
|
children: [
|
|
4433
4439
|
/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
|
|
@@ -4477,7 +4483,7 @@ function SelectItem(_a) {
|
|
|
4477
4483
|
__spreadProps(__spreadValues({
|
|
4478
4484
|
"data-slot": "select-item",
|
|
4479
4485
|
className: cn(
|
|
4480
|
-
"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm **:[svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full
|
|
4486
|
+
"cursor-pointer focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm **:[svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 **:[svg]:pointer-events-none **:[svg]:shrink-0",
|
|
4481
4487
|
className
|
|
4482
4488
|
)
|
|
4483
4489
|
}, props), {
|
package/dist/tanstack.js
CHANGED
|
@@ -2,7 +2,7 @@ import { createContext, useState, useEffect, useMemo, use } from 'react';
|
|
|
2
2
|
import { ScriptOnce } from '@tanstack/react-router';
|
|
3
3
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
4
|
|
|
5
|
-
// src/components/
|
|
5
|
+
// src/components/themes/providers/tanstack-theme-provider.tsx
|
|
6
6
|
var initialState = {
|
|
7
7
|
theme: "system",
|
|
8
8
|
resolvedTheme: "light",
|
package/dist/themes.css
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
@import "tw-animate-css";
|
|
3
|
+
@import "shadcn/tailwind.css";
|
|
4
|
+
|
|
5
|
+
/* Import all theme CSS files */
|
|
6
|
+
@import "./catpuccin/latte.css";
|
|
7
|
+
@import "./catpuccin/frappe.css";
|
|
8
|
+
@import "./catpuccin/macchiato.css";
|
|
9
|
+
@import "./catpuccin/mocha.css";
|
|
10
|
+
@import "./ekko-os.css";
|
|
11
|
+
@import "./tokyo-night.css";
|
|
12
|
+
@import "./convergence.css";
|
|
13
|
+
|
|
14
|
+
@custom-variant dark (&:is(.dark *));
|
|
15
|
+
|
|
16
|
+
@theme inline {
|
|
17
|
+
--color-background: var(--background);
|
|
18
|
+
--color-foreground: var(--foreground);
|
|
19
|
+
--font-sans: var(--font-sans);
|
|
20
|
+
--font-mono: var(--font-geist-mono);
|
|
21
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
22
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
23
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
24
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
25
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
26
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
27
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
28
|
+
--color-sidebar: var(--sidebar);
|
|
29
|
+
--color-chart-5: var(--chart-5);
|
|
30
|
+
--color-chart-4: var(--chart-4);
|
|
31
|
+
--color-chart-3: var(--chart-3);
|
|
32
|
+
--color-chart-2: var(--chart-2);
|
|
33
|
+
--color-chart-1: var(--chart-1);
|
|
34
|
+
--color-ring: var(--ring);
|
|
35
|
+
--color-input: var(--input);
|
|
36
|
+
--color-border: var(--border);
|
|
37
|
+
--color-destructive: var(--destructive);
|
|
38
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
39
|
+
--color-accent: var(--accent);
|
|
40
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
41
|
+
--color-muted: var(--muted);
|
|
42
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
43
|
+
--color-secondary: var(--secondary);
|
|
44
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
45
|
+
--color-primary: var(--primary);
|
|
46
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
47
|
+
--color-popover: var(--popover);
|
|
48
|
+
--color-card-foreground: var(--card-foreground);
|
|
49
|
+
--color-card: var(--card);
|
|
50
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
51
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
52
|
+
--radius-lg: var(--radius);
|
|
53
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
54
|
+
--radius-2xl: calc(var(--radius) + 8px);
|
|
55
|
+
--radius-3xl: calc(var(--radius) + 12px);
|
|
56
|
+
--radius-4xl: calc(var(--radius) + 16px);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
:root {
|
|
60
|
+
--background: oklch(1 0 0);
|
|
61
|
+
--foreground: oklch(0.141 0.005 285.823);
|
|
62
|
+
--card: oklch(1 0 0);
|
|
63
|
+
--card-foreground: oklch(0.141 0.005 285.823);
|
|
64
|
+
--popover: oklch(1 0 0);
|
|
65
|
+
--popover-foreground: oklch(0.141 0.005 285.823);
|
|
66
|
+
--primary: oklch(0.51 0.23 277);
|
|
67
|
+
--primary-foreground: oklch(0.96 0.02 272);
|
|
68
|
+
--secondary: oklch(0.967 0.001 286.375);
|
|
69
|
+
--secondary-foreground: oklch(0.21 0.006 285.885);
|
|
70
|
+
--muted: oklch(0.967 0.001 286.375);
|
|
71
|
+
--muted-foreground: oklch(0.552 0.016 285.938);
|
|
72
|
+
--accent: oklch(0.967 0.001 286.375);
|
|
73
|
+
--accent-foreground: oklch(0.21 0.006 285.885);
|
|
74
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
75
|
+
--border: oklch(0.92 0.004 286.32);
|
|
76
|
+
--input: oklch(0.92 0.004 286.32);
|
|
77
|
+
--ring: oklch(0.705 0.015 286.067);
|
|
78
|
+
--chart-1: oklch(0.79 0.1 275);
|
|
79
|
+
--chart-2: oklch(0.68 0.16 277);
|
|
80
|
+
--chart-3: oklch(0.59 0.2 277);
|
|
81
|
+
--chart-4: oklch(0.51 0.23 277);
|
|
82
|
+
--chart-5: oklch(0.46 0.21 277);
|
|
83
|
+
--radius: 0.45rem;
|
|
84
|
+
--sidebar: oklch(0.985 0 0);
|
|
85
|
+
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
|
86
|
+
--sidebar-primary: oklch(0.51 0.23 277);
|
|
87
|
+
--sidebar-primary-foreground: oklch(0.96 0.02 272);
|
|
88
|
+
--sidebar-accent: oklch(0.967 0.001 286.375);
|
|
89
|
+
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
|
90
|
+
--sidebar-border: oklch(0.92 0.004 286.32);
|
|
91
|
+
--sidebar-ring: oklch(0.705 0.015 286.067);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
@layer base {
|
|
95
|
+
* {
|
|
96
|
+
@apply border-border outline-ring/50;
|
|
97
|
+
}
|
|
98
|
+
body {
|
|
99
|
+
@apply bg-background text-foreground;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/* Tokyo Night Theme - Dark Mode */
|
|
2
|
+
html[data-theme="tokyo-night"] {
|
|
3
|
+
--radius: 0.625rem;
|
|
4
|
+
--background: hsl(233 16.00% 13.33%); /* #1a1b26 - dark blue-gray */
|
|
5
|
+
--foreground: hsl(228 23.53% 87.06%); /* #c0caf5 - light blue-gray */
|
|
6
|
+
--card: hsl(233 16.00% 13.33%); /* #1a1b26 */
|
|
7
|
+
--card-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
|
|
8
|
+
--popover: hsl(233 16.00% 13.33%); /* #1a1b26 */
|
|
9
|
+
--popover-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
|
|
10
|
+
--primary: hsl(217 91.67% 79.80%); /* #7aa2f7 - Tokyo Night blue */
|
|
11
|
+
--primary-foreground: hsl(233 16.00% 13.33%); /* #1a1b26 */
|
|
12
|
+
--secondary: hsl(233 18.18% 15.29%); /* #24283b - darker blue-gray */
|
|
13
|
+
--secondary-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
|
|
14
|
+
--muted: hsl(233 18.18% 15.29%); /* #24283b */
|
|
15
|
+
--muted-foreground: hsl(230 13.33% 66.67%); /* #565f89 - muted text */
|
|
16
|
+
--accent: hsl(233 18.18% 15.29%); /* #24283b */
|
|
17
|
+
--accent-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
|
|
18
|
+
--destructive: hsl(354 65.22% 78.24%); /* #f7768e - Tokyo Night red */
|
|
19
|
+
--border: hsl(233 18.18% 20.00%); /* #2f3549 - border color */
|
|
20
|
+
--input: hsl(233 18.18% 20.00%); /* #2f3549 */
|
|
21
|
+
--ring: hsl(217 91.67% 79.80%); /* #7aa2f7 - primary blue */
|
|
22
|
+
--chart-1: hsl(354 65.22% 78.24%); /* #f7768e - red */
|
|
23
|
+
--chart-2: hsl(158 64.00% 71.37%); /* #9ece6a - green */
|
|
24
|
+
--chart-3: hsl(217 91.67% 79.80%); /* #7aa2f7 - blue */
|
|
25
|
+
--chart-4: hsl(38 92.00% 72.16%); /* #e0af68 - yellow */
|
|
26
|
+
--chart-5: hsl(266 85.00% 78.24%); /* #bb9af7 - purple */
|
|
27
|
+
--sidebar: hsl(233 18.18% 12.94%); /* #16161e - darker background */
|
|
28
|
+
--sidebar-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
|
|
29
|
+
--sidebar-primary: hsl(217 91.67% 79.80%); /* #7aa2f7 */
|
|
30
|
+
--sidebar-primary-foreground: hsl(233 16.00% 13.33%); /* #1a1b26 */
|
|
31
|
+
--sidebar-accent: hsl(233 18.18% 15.29%); /* #24283b */
|
|
32
|
+
--sidebar-accent-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
|
|
33
|
+
--sidebar-border: hsl(233 18.18% 20.00%); /* #2f3549 */
|
|
34
|
+
--sidebar-ring: hsl(233 18.18% 20.00%); /* #2f3549 */
|
|
35
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ekkolyth/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Shared UI Library for my personal projects",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"theme",
|
|
@@ -36,7 +36,15 @@
|
|
|
36
36
|
"./providers/tanstack-theme": {
|
|
37
37
|
"types": "./dist/providers/tanstack-theme-provider.d.ts",
|
|
38
38
|
"import": "./dist/providers/tanstack-theme-provider.js"
|
|
39
|
-
}
|
|
39
|
+
},
|
|
40
|
+
"./themes": "./dist/themes.css",
|
|
41
|
+
"./catpuccin/latte": "./dist/catpuccin/latte.css",
|
|
42
|
+
"./catpuccin/frappe": "./dist/catpuccin/frappe.css",
|
|
43
|
+
"./catpuccin/macchiato": "./dist/catpuccin/macchiato.css",
|
|
44
|
+
"./catpuccin/mocha": "./dist/catpuccin/mocha.css",
|
|
45
|
+
"./ekko-os": "./dist/ekko-os.css",
|
|
46
|
+
"./tokyo-night": "./dist/tokyo-night.css",
|
|
47
|
+
"./convergence": "./dist/convergence.css"
|
|
40
48
|
},
|
|
41
49
|
"main": "./dist/index.js",
|
|
42
50
|
"types": "./dist/index.d.ts",
|