@k3-tech/react-kit 0.0.65 → 0.0.66
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/index.js +1804 -739
- package/dist/kit/layouts/admin/components/AdminLayout.d.ts.map +1 -1
- package/dist/kit/themes/base.css +1 -1
- package/dist/kit/themes/clean-slate.css +42 -20
- package/dist/kit/themes/default.css +64 -42
- package/dist/kit/themes/minimal-modern.css +42 -20
- package/dist/kit/themes/spotify.css +42 -20
- package/dist/shadcn/ui/form.d.ts +1 -1
- package/dist/shadcn/ui/form.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/kit/layouts/admin/components/AdminLayout.tsx +27 -11
- package/src/kit/themes/default.css +27 -22
- package/src/shadcn/ui/table.tsx +1 -1
|
@@ -92,6 +92,12 @@ function AdminLayoutContent({
|
|
|
92
92
|
const indentClassMap = ['', 'pl-6', 'pl-10', 'pl-14'] as const;
|
|
93
93
|
const indent = indentClassMap[Math.min(level, 3)];
|
|
94
94
|
|
|
95
|
+
// When a row is active its background is the (teal) sidebar-primary, so
|
|
96
|
+
// icon + label must flip to the contrasting foreground to stay readable.
|
|
97
|
+
const activeText = isActive
|
|
98
|
+
? 'text-sidebar-primary-foreground'
|
|
99
|
+
: 'text-sidebar-foreground group-hover:text-sidebar-accent-foreground';
|
|
100
|
+
|
|
95
101
|
const content = (
|
|
96
102
|
<SidebarMenuItem
|
|
97
103
|
key={item.id}
|
|
@@ -105,22 +111,24 @@ function AdminLayoutContent({
|
|
|
105
111
|
if (hasChildren) setOpen(item.id);
|
|
106
112
|
}}
|
|
107
113
|
disabled={item.disabled}
|
|
108
|
-
className={`group relative overflow-hidden rounded-lg transition-all duration-200 hover:bg-sidebar-accent/70 data-[active=true]:bg-primary data-[active=true]:text-primary-foreground ${indent}`}
|
|
114
|
+
className={`group relative overflow-hidden rounded-lg transition-all duration-200 hover:bg-sidebar-accent/70 data-[active=true]:bg-sidebar-primary data-[active=true]:text-sidebar-primary-foreground ${indent}`}
|
|
109
115
|
>
|
|
110
116
|
{item.url && !hasChildren ? (
|
|
111
117
|
<Link to={item.url} className="flex items-center gap-3 px-3">
|
|
112
118
|
{item.icon && (
|
|
113
119
|
<item.icon
|
|
114
|
-
className={`h-4 w-4 transition-colors ${
|
|
120
|
+
className={`h-4 w-4 transition-colors ${activeText}`}
|
|
115
121
|
/>
|
|
116
122
|
)}
|
|
117
123
|
<span
|
|
118
|
-
className={`font-medium transition-colors ${
|
|
124
|
+
className={`font-medium transition-colors ${activeText}`}
|
|
119
125
|
>
|
|
120
126
|
{item.title}
|
|
121
127
|
</span>
|
|
122
128
|
{item.badge && (
|
|
123
|
-
<span
|
|
129
|
+
<span
|
|
130
|
+
className={`ml-auto text-xs px-2 py-0.5 rounded-full ${isActive ? 'bg-white/20 text-sidebar-primary-foreground' : 'bg-sidebar-primary/10 text-sidebar-primary'}`}
|
|
131
|
+
>
|
|
124
132
|
{item.badge}
|
|
125
133
|
</span>
|
|
126
134
|
)}
|
|
@@ -129,28 +137,36 @@ function AdminLayoutContent({
|
|
|
129
137
|
<div className="flex items-center gap-3 px-3 py-2.5 w-full">
|
|
130
138
|
{hasChildren &&
|
|
131
139
|
(isOpen ? (
|
|
132
|
-
<ChevronDown
|
|
140
|
+
<ChevronDown
|
|
141
|
+
className={`h-3.5 w-3.5 ${isActive ? 'text-sidebar-primary-foreground' : 'text-muted-foreground'}`}
|
|
142
|
+
/>
|
|
133
143
|
) : (
|
|
134
|
-
<ChevronRight
|
|
144
|
+
<ChevronRight
|
|
145
|
+
className={`h-3.5 w-3.5 ${isActive ? 'text-sidebar-primary-foreground' : 'text-muted-foreground'}`}
|
|
146
|
+
/>
|
|
135
147
|
))}
|
|
136
148
|
{item.icon ? (
|
|
137
|
-
<item.icon className=
|
|
149
|
+
<item.icon className={`h-4 w-4 ${activeText}`} />
|
|
138
150
|
) : (
|
|
139
|
-
<FallbackIcon
|
|
151
|
+
<FallbackIcon
|
|
152
|
+
className={`h-3.5 w-3.5 ${isActive ? 'text-sidebar-primary-foreground' : 'text-muted-foreground'}`}
|
|
153
|
+
/>
|
|
140
154
|
)}
|
|
141
155
|
{item.url ? (
|
|
142
156
|
<Link to={item.url} className="flex-1 text-left">
|
|
143
|
-
<span className=
|
|
157
|
+
<span className={`font-medium ${activeText}`}>
|
|
144
158
|
{item.title}
|
|
145
159
|
</span>
|
|
146
160
|
</Link>
|
|
147
161
|
) : (
|
|
148
|
-
<span className=
|
|
162
|
+
<span className={`font-medium ${activeText} flex-1`}>
|
|
149
163
|
{item.title}
|
|
150
164
|
</span>
|
|
151
165
|
)}
|
|
152
166
|
{item.badge && (
|
|
153
|
-
<span
|
|
167
|
+
<span
|
|
168
|
+
className={`ml-auto text-xs px-2 py-0.5 rounded-full ${isActive ? 'bg-white/20 text-sidebar-primary-foreground' : 'bg-sidebar-primary/10 text-sidebar-primary'}`}
|
|
169
|
+
>
|
|
154
170
|
{item.badge}
|
|
155
171
|
</span>
|
|
156
172
|
)}
|
|
@@ -8,19 +8,23 @@
|
|
|
8
8
|
--card-foreground: oklch(0.1408 0.0044 285.8229);
|
|
9
9
|
--popover: oklch(1 0 0);
|
|
10
10
|
--popover-foreground: oklch(0.1408 0.0044 285.8229);
|
|
11
|
-
|
|
11
|
+
/* Design system: primary button = blue (--c-blue-600 #1976F2) */
|
|
12
|
+
--primary: #1976f2;
|
|
12
13
|
--primary-foreground: oklch(1 0 0);
|
|
13
14
|
--secondary: oklch(0.9674 0.0013 286.3752);
|
|
14
15
|
--secondary-foreground: oklch(0.1408 0.0044 285.8229);
|
|
15
16
|
--muted: oklch(0.9674 0.0013 286.3752);
|
|
16
17
|
--muted-foreground: oklch(0.5517 0.0138 285.9385);
|
|
17
|
-
|
|
18
|
-
--accent
|
|
19
|
-
--
|
|
18
|
+
/* Design system: subtle highlight/accent = teal (--c-teal-100 / --c-teal-700) */
|
|
19
|
+
--accent: #e0f2f1;
|
|
20
|
+
--accent-foreground: #0d9488;
|
|
21
|
+
/* Design system: danger = red (--c-red-600 #E84C3D) */
|
|
22
|
+
--destructive: #e84c3d;
|
|
20
23
|
--destructive-foreground: oklch(1 0 0);
|
|
21
|
-
|
|
24
|
+
/* Design system: border = --c-line #E5E7EB */
|
|
25
|
+
--border: #e5e7eb;
|
|
22
26
|
--input: oklch(1 0 0);
|
|
23
|
-
--ring:
|
|
27
|
+
--ring: #1976f2;
|
|
24
28
|
--chart-1: oklch(0.5234 0.1347 144.1672);
|
|
25
29
|
--chart-2: oklch(0.6731 0.1624 144.2083);
|
|
26
30
|
--chart-3: oklch(0.6423 0.1467 133.0145);
|
|
@@ -28,12 +32,13 @@
|
|
|
28
32
|
--chart-5: oklch(0.8253 0.1181 129.0007);
|
|
29
33
|
--sidebar: oklch(0.9851 0 0);
|
|
30
34
|
--sidebar-foreground: oklch(0.5517 0.0138 285.9385);
|
|
31
|
-
|
|
35
|
+
/* Design system: active sidebar/menu item = teal-700 (.sb-item.active) */
|
|
36
|
+
--sidebar-primary: #0d9488;
|
|
32
37
|
--sidebar-primary-foreground: oklch(1 0 0);
|
|
33
|
-
--sidebar-accent:
|
|
34
|
-
--sidebar-accent-foreground:
|
|
35
|
-
--sidebar-border:
|
|
36
|
-
--sidebar-ring:
|
|
38
|
+
--sidebar-accent: #e0f2f1;
|
|
39
|
+
--sidebar-accent-foreground: #0d9488;
|
|
40
|
+
--sidebar-border: #e5e7eb;
|
|
41
|
+
--sidebar-ring: #0d9488;
|
|
37
42
|
--radius: 0.5rem;
|
|
38
43
|
--shadow-2xs: 0px 4px 8px 0px hsl(0 0% 0% / 0.03);
|
|
39
44
|
--shadow-xs: 0px 4px 8px 0px hsl(0 0% 0% / 0.03);
|
|
@@ -69,19 +74,19 @@
|
|
|
69
74
|
--card-foreground: oklch(0.9851 0 0);
|
|
70
75
|
--popover: oklch(0.2103 0.0059 285.8852);
|
|
71
76
|
--popover-foreground: oklch(0.9851 0 0);
|
|
72
|
-
--primary:
|
|
73
|
-
--primary-foreground: oklch(0
|
|
77
|
+
--primary: #2196f3;
|
|
78
|
+
--primary-foreground: oklch(1 0 0);
|
|
74
79
|
--secondary: oklch(0.2739 0.0055 286.0326);
|
|
75
80
|
--secondary-foreground: oklch(0.9851 0 0);
|
|
76
81
|
--muted: oklch(0.2739 0.0055 286.0326);
|
|
77
82
|
--muted-foreground: oklch(0.7118 0.0129 286.0665);
|
|
78
|
-
--accent:
|
|
79
|
-
--accent-foreground:
|
|
80
|
-
--destructive:
|
|
83
|
+
--accent: #134e4a;
|
|
84
|
+
--accent-foreground: #5eead4;
|
|
85
|
+
--destructive: #e84c3d;
|
|
81
86
|
--destructive-foreground: oklch(0.9478 0.023 17.5647);
|
|
82
87
|
--border: oklch(0.2739 0.0055 286.0326);
|
|
83
88
|
--input: oklch(0.2739 0.0055 286.0326);
|
|
84
|
-
--ring:
|
|
89
|
+
--ring: #2196f3;
|
|
85
90
|
--chart-1: oklch(0.6731 0.1624 144.2083);
|
|
86
91
|
--chart-2: oklch(0.7536 0.1626 130.5022);
|
|
87
92
|
--chart-3: oklch(0.8555 0.1766 114.846);
|
|
@@ -89,12 +94,12 @@
|
|
|
89
94
|
--chart-5: oklch(0.7703 0.1741 64.0539);
|
|
90
95
|
--sidebar: oklch(0.2103 0.0059 285.8852);
|
|
91
96
|
--sidebar-foreground: oklch(0.7118 0.0129 286.0665);
|
|
92
|
-
--sidebar-primary:
|
|
93
|
-
--sidebar-primary-foreground: oklch(0
|
|
94
|
-
--sidebar-accent:
|
|
95
|
-
--sidebar-accent-foreground:
|
|
97
|
+
--sidebar-primary: #0d9488;
|
|
98
|
+
--sidebar-primary-foreground: oklch(1 0 0);
|
|
99
|
+
--sidebar-accent: #134e4a;
|
|
100
|
+
--sidebar-accent-foreground: #5eead4;
|
|
96
101
|
--sidebar-border: oklch(0.2739 0.0055 286.0326);
|
|
97
|
-
--sidebar-ring:
|
|
102
|
+
--sidebar-ring: #0d9488;
|
|
98
103
|
--radius: 0.5rem;
|
|
99
104
|
--shadow-2xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.05);
|
|
100
105
|
--shadow-xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.05);
|
package/src/shadcn/ui/table.tsx
CHANGED
|
@@ -70,7 +70,7 @@ function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
|
|
|
70
70
|
<th
|
|
71
71
|
data-slot="table-head"
|
|
72
72
|
className={cn(
|
|
73
|
-
'bg-
|
|
73
|
+
'bg-[#30A4A1] text-white h-10 px-2 text-left align-middle font-bold whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
|
|
74
74
|
className,
|
|
75
75
|
)}
|
|
76
76
|
{...props}
|