@tydavidson/design-system 1.1.7 → 1.1.8
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.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +351 -177
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +343 -174
- package/dist/index.mjs.map +1 -1
- package/dist/themes/index.d.mts +40 -1
- package/dist/themes/index.d.ts +40 -1
- package/dist/themes/index.js +192 -60
- package/dist/themes/index.js.map +1 -1
- package/dist/themes/index.mjs +183 -56
- package/dist/themes/index.mjs.map +1 -1
- package/docs/setup-guide.md +101 -4
- package/docs/troubleshooting.md +22 -4
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import * as React2 from 'react';
|
|
2
|
-
import { Slot } from '@radix-ui/react-slot';
|
|
3
|
-
import { cva } from 'class-variance-authority';
|
|
4
1
|
import { clsx } from 'clsx';
|
|
5
2
|
import { twMerge } from 'tailwind-merge';
|
|
3
|
+
import * as React2 from 'react';
|
|
4
|
+
import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1 } from 'next-themes';
|
|
6
5
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
7
|
-
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
8
6
|
import { IconCheck, IconPointFilled, IconChevronRight, IconX, IconSearch, IconSun, IconMoon } from '@tabler/icons-react';
|
|
7
|
+
import { Slot } from '@radix-ui/react-slot';
|
|
8
|
+
import { cva } from 'class-variance-authority';
|
|
9
|
+
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
9
10
|
import * as TogglePrimitive from '@radix-ui/react-toggle';
|
|
10
11
|
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
|
|
11
12
|
import * as SliderPrimitive from '@radix-ui/react-slider';
|
|
@@ -15,9 +16,17 @@ import * as SheetPrimitive from '@radix-ui/react-dialog';
|
|
|
15
16
|
import { Command as Command$1 } from 'cmdk';
|
|
16
17
|
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
|
|
17
18
|
import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
|
|
18
|
-
import
|
|
19
|
+
import dynamic from 'next/dynamic';
|
|
19
20
|
|
|
20
|
-
|
|
21
|
+
var __defProp = Object.defineProperty;
|
|
22
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
23
|
+
var __esm = (fn, res) => function __init() {
|
|
24
|
+
return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
|
|
25
|
+
};
|
|
26
|
+
var __export = (target, all) => {
|
|
27
|
+
for (var name in all)
|
|
28
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
29
|
+
};
|
|
21
30
|
function cn(...inputs) {
|
|
22
31
|
return twMerge(clsx(inputs));
|
|
23
32
|
}
|
|
@@ -33,6 +42,263 @@ function filterDOMProps(props, propNames) {
|
|
|
33
42
|
propNames.forEach((name) => delete result[name]);
|
|
34
43
|
return result;
|
|
35
44
|
}
|
|
45
|
+
var init_utils = __esm({
|
|
46
|
+
"src/lib/utils.ts"() {
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
// src/themes/theme-provider.tsx
|
|
51
|
+
var theme_provider_exports = {};
|
|
52
|
+
__export(theme_provider_exports, {
|
|
53
|
+
ThemeProvider: () => ThemeProvider,
|
|
54
|
+
ThemeProviderNoSSR: () => ThemeProviderNoSSR
|
|
55
|
+
});
|
|
56
|
+
function ThemeProvider({
|
|
57
|
+
children,
|
|
58
|
+
...props
|
|
59
|
+
}) {
|
|
60
|
+
if (typeof window === "undefined") {
|
|
61
|
+
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
62
|
+
}
|
|
63
|
+
return /* @__PURE__ */ jsx(
|
|
64
|
+
ThemeProvider$1,
|
|
65
|
+
{
|
|
66
|
+
attribute: "class",
|
|
67
|
+
defaultTheme: "system",
|
|
68
|
+
enableSystem: true,
|
|
69
|
+
disableTransitionOnChange: true,
|
|
70
|
+
...props,
|
|
71
|
+
children
|
|
72
|
+
}
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
function ThemeProviderNoSSR({
|
|
76
|
+
children,
|
|
77
|
+
...props
|
|
78
|
+
}) {
|
|
79
|
+
const [mounted, setMounted] = React2.useState(false);
|
|
80
|
+
React2.useEffect(() => {
|
|
81
|
+
setMounted(true);
|
|
82
|
+
}, []);
|
|
83
|
+
if (!mounted) {
|
|
84
|
+
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
85
|
+
}
|
|
86
|
+
return /* @__PURE__ */ jsx(ThemeProvider, { ...props, children });
|
|
87
|
+
}
|
|
88
|
+
var init_theme_provider = __esm({
|
|
89
|
+
"src/themes/theme-provider.tsx"() {
|
|
90
|
+
"use client";
|
|
91
|
+
}
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
// src/lib/theme-utils.ts
|
|
95
|
+
var mapColorToShadcnVariant, mapVariantToShadcnVariant, getColorVariantClasses, isDarkTheme;
|
|
96
|
+
var init_theme_utils = __esm({
|
|
97
|
+
"src/lib/theme-utils.ts"() {
|
|
98
|
+
mapColorToShadcnVariant = (color) => {
|
|
99
|
+
switch (color) {
|
|
100
|
+
case "brand":
|
|
101
|
+
return "default";
|
|
102
|
+
case "error":
|
|
103
|
+
return "destructive";
|
|
104
|
+
case "warning":
|
|
105
|
+
case "success":
|
|
106
|
+
return "secondary";
|
|
107
|
+
// Will need additional classes
|
|
108
|
+
default:
|
|
109
|
+
return "default";
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
mapVariantToShadcnVariant = (variant) => {
|
|
113
|
+
switch (variant) {
|
|
114
|
+
case "primary":
|
|
115
|
+
return "default";
|
|
116
|
+
case "secondary":
|
|
117
|
+
return "outline";
|
|
118
|
+
case "tertiary":
|
|
119
|
+
return "ghost";
|
|
120
|
+
default:
|
|
121
|
+
return "default";
|
|
122
|
+
}
|
|
123
|
+
};
|
|
124
|
+
getColorVariantClasses = (color, variant) => {
|
|
125
|
+
const colorVariantMap = {
|
|
126
|
+
primary: {
|
|
127
|
+
brand: "bg-brand-600 hover:bg-brand-700 text-white focus-visible:ring-brand-500",
|
|
128
|
+
error: "bg-error-600 hover:bg-error-700 text-white focus-visible:ring-error-500",
|
|
129
|
+
warning: "bg-warning-600 hover:bg-warning-700 text-white focus-visible:ring-warning-500",
|
|
130
|
+
success: "bg-success-600 hover:bg-success-700 text-white focus-visible:ring-success-500"
|
|
131
|
+
},
|
|
132
|
+
secondary: {
|
|
133
|
+
brand: "border-brand-300 text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500",
|
|
134
|
+
error: "border-error-300 text-error-700 hover:bg-error-50 focus-visible:ring-error-500",
|
|
135
|
+
warning: "border-warning-300 text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500",
|
|
136
|
+
success: "border-success-300 text-success-700 hover:bg-success-50 focus-visible:ring-success-500"
|
|
137
|
+
},
|
|
138
|
+
tertiary: {
|
|
139
|
+
brand: "text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500",
|
|
140
|
+
error: "text-error-700 hover:bg-error-50 focus-visible:ring-error-500",
|
|
141
|
+
warning: "text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500",
|
|
142
|
+
success: "text-success-700 hover:bg-success-50 focus-visible:ring-success-500"
|
|
143
|
+
}
|
|
144
|
+
};
|
|
145
|
+
return colorVariantMap[variant]?.[color] || "";
|
|
146
|
+
};
|
|
147
|
+
isDarkTheme = (theme, systemTheme) => {
|
|
148
|
+
if (theme === "system") {
|
|
149
|
+
return systemTheme === "dark";
|
|
150
|
+
}
|
|
151
|
+
return theme === "dark";
|
|
152
|
+
};
|
|
153
|
+
}
|
|
154
|
+
});
|
|
155
|
+
function useTheme() {
|
|
156
|
+
if (typeof window === "undefined") {
|
|
157
|
+
return {
|
|
158
|
+
theme: "system",
|
|
159
|
+
setTheme: () => {
|
|
160
|
+
},
|
|
161
|
+
resolvedTheme: "light",
|
|
162
|
+
isDark: false
|
|
163
|
+
};
|
|
164
|
+
}
|
|
165
|
+
const { theme, setTheme, resolvedTheme, systemTheme } = useTheme$1();
|
|
166
|
+
const isDark = isDarkTheme(theme, systemTheme);
|
|
167
|
+
return {
|
|
168
|
+
theme: theme || "system",
|
|
169
|
+
setTheme,
|
|
170
|
+
resolvedTheme: resolvedTheme || "light",
|
|
171
|
+
isDark
|
|
172
|
+
};
|
|
173
|
+
}
|
|
174
|
+
function useThemeServer() {
|
|
175
|
+
return {
|
|
176
|
+
theme: "system",
|
|
177
|
+
setTheme: () => {
|
|
178
|
+
},
|
|
179
|
+
resolvedTheme: "light",
|
|
180
|
+
isDark: false
|
|
181
|
+
};
|
|
182
|
+
}
|
|
183
|
+
function ThemeContextProvider({
|
|
184
|
+
children
|
|
185
|
+
}) {
|
|
186
|
+
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
187
|
+
}
|
|
188
|
+
var init_theme_context = __esm({
|
|
189
|
+
"src/themes/theme-context.tsx"() {
|
|
190
|
+
"use client";
|
|
191
|
+
init_theme_utils();
|
|
192
|
+
}
|
|
193
|
+
});
|
|
194
|
+
function ThemeToggle({
|
|
195
|
+
className,
|
|
196
|
+
variant = "icon",
|
|
197
|
+
size = "md",
|
|
198
|
+
...props
|
|
199
|
+
}) {
|
|
200
|
+
const { theme, setTheme, resolvedTheme } = useTheme();
|
|
201
|
+
const [mounted, setMounted] = React2.useState(false);
|
|
202
|
+
React2.useEffect(() => {
|
|
203
|
+
setMounted(true);
|
|
204
|
+
}, []);
|
|
205
|
+
if (!mounted) return null;
|
|
206
|
+
const toggleTheme = () => {
|
|
207
|
+
setTheme(resolvedTheme === "dark" ? "light" : "dark");
|
|
208
|
+
};
|
|
209
|
+
const iconSize = {
|
|
210
|
+
sm: 16,
|
|
211
|
+
md: 20,
|
|
212
|
+
lg: 24
|
|
213
|
+
};
|
|
214
|
+
const sizeClasses = {
|
|
215
|
+
sm: "h-8 w-8",
|
|
216
|
+
md: "h-10 w-10",
|
|
217
|
+
lg: "h-12 w-12"
|
|
218
|
+
};
|
|
219
|
+
const textSizeClasses = {
|
|
220
|
+
sm: "text-xs",
|
|
221
|
+
md: "text-sm",
|
|
222
|
+
lg: "text-base"
|
|
223
|
+
};
|
|
224
|
+
if (variant === "icon") {
|
|
225
|
+
return /* @__PURE__ */ jsx(
|
|
226
|
+
"button",
|
|
227
|
+
{
|
|
228
|
+
type: "button",
|
|
229
|
+
onClick: toggleTheme,
|
|
230
|
+
className: cn(
|
|
231
|
+
"inline-flex items-center justify-center rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
|
232
|
+
sizeClasses[size],
|
|
233
|
+
className
|
|
234
|
+
),
|
|
235
|
+
"aria-label": resolvedTheme === "dark" ? "Switch to light theme" : "Switch to dark theme",
|
|
236
|
+
...props,
|
|
237
|
+
children: resolvedTheme === "dark" ? /* @__PURE__ */ jsx(IconSun, { size: iconSize[size], stroke: 1.5 }) : /* @__PURE__ */ jsx(IconMoon, { size: iconSize[size], stroke: 1.5 })
|
|
238
|
+
}
|
|
239
|
+
);
|
|
240
|
+
}
|
|
241
|
+
if (variant === "button") {
|
|
242
|
+
return /* @__PURE__ */ jsx(
|
|
243
|
+
"button",
|
|
244
|
+
{
|
|
245
|
+
type: "button",
|
|
246
|
+
onClick: toggleTheme,
|
|
247
|
+
className: cn(
|
|
248
|
+
"inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2",
|
|
249
|
+
textSizeClasses[size],
|
|
250
|
+
"hover:bg-accent hover:text-accent-foreground",
|
|
251
|
+
className
|
|
252
|
+
),
|
|
253
|
+
...props,
|
|
254
|
+
children: resolvedTheme === "dark" ? "Light Mode" : "Dark Mode"
|
|
255
|
+
}
|
|
256
|
+
);
|
|
257
|
+
}
|
|
258
|
+
return /* @__PURE__ */ jsx(
|
|
259
|
+
"button",
|
|
260
|
+
{
|
|
261
|
+
type: "button",
|
|
262
|
+
onClick: toggleTheme,
|
|
263
|
+
className: cn(
|
|
264
|
+
"inline-flex items-center justify-center rounded-md px-3 py-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
265
|
+
textSizeClasses[size],
|
|
266
|
+
resolvedTheme === "dark" ? "bg-accent text-accent-foreground hover:bg-accent/80" : "bg-muted text-muted-foreground hover:bg-muted/80",
|
|
267
|
+
className
|
|
268
|
+
),
|
|
269
|
+
"aria-label": resolvedTheme === "dark" ? "Switch to light theme" : "Switch to dark theme",
|
|
270
|
+
...props,
|
|
271
|
+
children: resolvedTheme === "dark" ? /* @__PURE__ */ jsxs("span", { className: "flex items-center", children: [
|
|
272
|
+
/* @__PURE__ */ jsx(IconSun, { size: iconSize[size], stroke: 1.5, className: "mr-2" }),
|
|
273
|
+
"Light"
|
|
274
|
+
] }) : /* @__PURE__ */ jsxs("span", { className: "flex items-center", children: [
|
|
275
|
+
/* @__PURE__ */ jsx(IconMoon, { size: iconSize[size], stroke: 1.5, className: "mr-2" }),
|
|
276
|
+
"Dark"
|
|
277
|
+
] })
|
|
278
|
+
}
|
|
279
|
+
);
|
|
280
|
+
}
|
|
281
|
+
var init_theme_toggle = __esm({
|
|
282
|
+
"src/components/ui/theme-toggle/theme-toggle.tsx"() {
|
|
283
|
+
"use client";
|
|
284
|
+
init_theme_context();
|
|
285
|
+
init_utils();
|
|
286
|
+
}
|
|
287
|
+
});
|
|
288
|
+
|
|
289
|
+
// src/components/ui/theme-toggle/index.ts
|
|
290
|
+
var theme_toggle_exports = {};
|
|
291
|
+
__export(theme_toggle_exports, {
|
|
292
|
+
ThemeToggle: () => ThemeToggle
|
|
293
|
+
});
|
|
294
|
+
var init_theme_toggle2 = __esm({
|
|
295
|
+
"src/components/ui/theme-toggle/index.ts"() {
|
|
296
|
+
init_theme_toggle();
|
|
297
|
+
}
|
|
298
|
+
});
|
|
299
|
+
|
|
300
|
+
// src/components/ui/button.tsx
|
|
301
|
+
init_utils();
|
|
36
302
|
var buttonVariants = cva(
|
|
37
303
|
"float-button inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[4px] text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
38
304
|
{
|
|
@@ -137,6 +403,9 @@ var Button = React2.forwardRef(
|
|
|
137
403
|
}
|
|
138
404
|
);
|
|
139
405
|
Button.displayName = "Button";
|
|
406
|
+
|
|
407
|
+
// src/components/ui/dropdown-menu/dropdown-menu.tsx
|
|
408
|
+
init_utils();
|
|
140
409
|
var DropdownMenuRoot = DropdownMenuPrimitive.Root;
|
|
141
410
|
var DropdownMenuTrigger = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
142
411
|
DropdownMenuPrimitive.Trigger,
|
|
@@ -318,6 +587,9 @@ var DropdownMenu = {
|
|
|
318
587
|
SubContent: DropdownMenuSubContent,
|
|
319
588
|
SubTrigger: DropdownMenuSubTrigger
|
|
320
589
|
};
|
|
590
|
+
|
|
591
|
+
// src/components/typography/heading/heading.tsx
|
|
592
|
+
init_utils();
|
|
321
593
|
var Heading = React2.forwardRef(
|
|
322
594
|
({
|
|
323
595
|
level = 1,
|
|
@@ -386,6 +658,9 @@ var Heading = React2.forwardRef(
|
|
|
386
658
|
}
|
|
387
659
|
);
|
|
388
660
|
Heading.displayName = "Heading";
|
|
661
|
+
|
|
662
|
+
// src/components/typography/text/text.tsx
|
|
663
|
+
init_utils();
|
|
389
664
|
var Text = React2.forwardRef(
|
|
390
665
|
({
|
|
391
666
|
size = "md",
|
|
@@ -438,6 +713,9 @@ var Text = React2.forwardRef(
|
|
|
438
713
|
}
|
|
439
714
|
);
|
|
440
715
|
Text.displayName = "Text";
|
|
716
|
+
|
|
717
|
+
// src/components/ui/toggle.tsx
|
|
718
|
+
init_utils();
|
|
441
719
|
var Toggle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
442
720
|
TogglePrimitive.Root,
|
|
443
721
|
{
|
|
@@ -450,6 +728,9 @@ var Toggle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
|
450
728
|
}
|
|
451
729
|
));
|
|
452
730
|
Toggle.displayName = TogglePrimitive.Root.displayName;
|
|
731
|
+
|
|
732
|
+
// src/components/ui/toggle-group.tsx
|
|
733
|
+
init_utils();
|
|
453
734
|
var ToggleGroup = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
454
735
|
ToggleGroupPrimitive.Root,
|
|
455
736
|
{
|
|
@@ -472,6 +753,9 @@ var ToggleGroupItem = React2.forwardRef(({ className, ...props }, ref) => /* @__
|
|
|
472
753
|
}
|
|
473
754
|
));
|
|
474
755
|
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
|
|
756
|
+
|
|
757
|
+
// src/components/ui/slider.tsx
|
|
758
|
+
init_utils();
|
|
475
759
|
var Slider = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
476
760
|
SliderPrimitive.Root,
|
|
477
761
|
{
|
|
@@ -488,6 +772,9 @@ var Slider = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
|
488
772
|
}
|
|
489
773
|
));
|
|
490
774
|
Slider.displayName = SliderPrimitive.Root.displayName;
|
|
775
|
+
|
|
776
|
+
// src/components/ui/popover.tsx
|
|
777
|
+
init_utils();
|
|
491
778
|
var Popover = PopoverPrimitive.Root;
|
|
492
779
|
var PopoverTrigger = PopoverPrimitive.Trigger;
|
|
493
780
|
var PopoverAnchor = PopoverPrimitive.Anchor;
|
|
@@ -505,6 +792,9 @@ var PopoverContent = React2.forwardRef(({ className, align = "center", sideOffse
|
|
|
505
792
|
}
|
|
506
793
|
) }));
|
|
507
794
|
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
|
795
|
+
|
|
796
|
+
// src/components/ui/hover-card.tsx
|
|
797
|
+
init_utils();
|
|
508
798
|
var HoverCard = HoverCardPrimitive.Root;
|
|
509
799
|
var HoverCardTrigger = HoverCardPrimitive.Trigger;
|
|
510
800
|
var HoverCardContent = React2.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
@@ -521,6 +811,9 @@ var HoverCardContent = React2.forwardRef(({ className, align = "center", sideOff
|
|
|
521
811
|
}
|
|
522
812
|
));
|
|
523
813
|
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
|
|
814
|
+
|
|
815
|
+
// src/components/ui/sheet.tsx
|
|
816
|
+
init_utils();
|
|
524
817
|
var Sheet = SheetPrimitive.Root;
|
|
525
818
|
var SheetTrigger = SheetPrimitive.Trigger;
|
|
526
819
|
var SheetClose = SheetPrimitive.Close;
|
|
@@ -614,6 +907,12 @@ var SheetDescription = React2.forwardRef(({ className, ...props }, ref) => /* @_
|
|
|
614
907
|
}
|
|
615
908
|
));
|
|
616
909
|
SheetDescription.displayName = SheetPrimitive.Description.displayName;
|
|
910
|
+
|
|
911
|
+
// src/components/ui/command.tsx
|
|
912
|
+
init_utils();
|
|
913
|
+
|
|
914
|
+
// src/components/ui/dialog.tsx
|
|
915
|
+
init_utils();
|
|
617
916
|
var Dialog = SheetPrimitive.Root;
|
|
618
917
|
var DialogPortal = SheetPrimitive.Portal;
|
|
619
918
|
var DialogOverlay = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
@@ -771,6 +1070,9 @@ CommandShortcut.displayName = "CommandShortcut";
|
|
|
771
1070
|
var Collapsible = CollapsiblePrimitive.Root;
|
|
772
1071
|
var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
|
|
773
1072
|
var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
|
|
1073
|
+
|
|
1074
|
+
// src/components/ui/context-menu.tsx
|
|
1075
|
+
init_utils();
|
|
774
1076
|
var ContextMenu = ContextMenuPrimitive.Root;
|
|
775
1077
|
var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
|
|
776
1078
|
var ContextMenuGroup = ContextMenuPrimitive.Group;
|
|
@@ -1191,6 +1493,9 @@ var EmailFooter = ({ children }) => /* @__PURE__ */ jsx("div", { style: {
|
|
|
1191
1493
|
] })
|
|
1192
1494
|
] }) });
|
|
1193
1495
|
|
|
1496
|
+
// src/index.ts
|
|
1497
|
+
init_utils();
|
|
1498
|
+
|
|
1194
1499
|
// src/tokens/colors.ts
|
|
1195
1500
|
var colors = {
|
|
1196
1501
|
// Base colors
|
|
@@ -1462,182 +1767,46 @@ var tokens = {
|
|
|
1462
1767
|
radius,
|
|
1463
1768
|
shadows
|
|
1464
1769
|
};
|
|
1465
|
-
function ThemeProvider({
|
|
1466
|
-
children,
|
|
1467
|
-
...props
|
|
1468
|
-
}) {
|
|
1469
|
-
return /* @__PURE__ */ jsx(
|
|
1470
|
-
ThemeProvider$1,
|
|
1471
|
-
{
|
|
1472
|
-
attribute: "class",
|
|
1473
|
-
defaultTheme: "system",
|
|
1474
|
-
enableSystem: true,
|
|
1475
|
-
disableTransitionOnChange: true,
|
|
1476
|
-
...props,
|
|
1477
|
-
children
|
|
1478
|
-
}
|
|
1479
|
-
);
|
|
1480
|
-
}
|
|
1481
1770
|
|
|
1482
|
-
// src/
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
return "secondary";
|
|
1492
|
-
// Will need additional classes
|
|
1493
|
-
default:
|
|
1494
|
-
return "default";
|
|
1771
|
+
// src/themes/index.ts
|
|
1772
|
+
init_theme_provider();
|
|
1773
|
+
init_theme_context();
|
|
1774
|
+
init_theme_toggle2();
|
|
1775
|
+
var DynamicThemeProvider = dynamic(
|
|
1776
|
+
() => Promise.resolve().then(() => (init_theme_provider(), theme_provider_exports)).then((mod) => ({ default: mod.ThemeProvider })),
|
|
1777
|
+
{
|
|
1778
|
+
ssr: false,
|
|
1779
|
+
loading: () => /* @__PURE__ */ jsx("div", { style: { visibility: "hidden" } })
|
|
1495
1780
|
}
|
|
1496
|
-
|
|
1497
|
-
var
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
return "outline";
|
|
1503
|
-
case "tertiary":
|
|
1504
|
-
return "ghost";
|
|
1505
|
-
default:
|
|
1506
|
-
return "default";
|
|
1781
|
+
);
|
|
1782
|
+
var DynamicThemeProviderNoSSR = dynamic(
|
|
1783
|
+
() => Promise.resolve().then(() => (init_theme_provider(), theme_provider_exports)).then((mod) => ({ default: mod.ThemeProviderNoSSR })),
|
|
1784
|
+
{
|
|
1785
|
+
ssr: false,
|
|
1786
|
+
loading: () => /* @__PURE__ */ jsx("div", { style: { visibility: "hidden" } })
|
|
1507
1787
|
}
|
|
1508
|
-
|
|
1509
|
-
var
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
warning: "bg-warning-600 hover:bg-warning-700 text-white focus-visible:ring-warning-500",
|
|
1515
|
-
success: "bg-success-600 hover:bg-success-700 text-white focus-visible:ring-success-500"
|
|
1516
|
-
},
|
|
1517
|
-
secondary: {
|
|
1518
|
-
brand: "border-brand-300 text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500",
|
|
1519
|
-
error: "border-error-300 text-error-700 hover:bg-error-50 focus-visible:ring-error-500",
|
|
1520
|
-
warning: "border-warning-300 text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500",
|
|
1521
|
-
success: "border-success-300 text-success-700 hover:bg-success-50 focus-visible:ring-success-500"
|
|
1522
|
-
},
|
|
1523
|
-
tertiary: {
|
|
1524
|
-
brand: "text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500",
|
|
1525
|
-
error: "text-error-700 hover:bg-error-50 focus-visible:ring-error-500",
|
|
1526
|
-
warning: "text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500",
|
|
1527
|
-
success: "text-success-700 hover:bg-success-50 focus-visible:ring-success-500"
|
|
1528
|
-
}
|
|
1529
|
-
};
|
|
1530
|
-
return colorVariantMap[variant]?.[color] || "";
|
|
1531
|
-
};
|
|
1532
|
-
var isDarkTheme = (theme, systemTheme) => {
|
|
1533
|
-
if (theme === "system") {
|
|
1534
|
-
return systemTheme === "dark";
|
|
1788
|
+
);
|
|
1789
|
+
var DynamicThemeToggle = dynamic(
|
|
1790
|
+
() => Promise.resolve().then(() => (init_theme_toggle2(), theme_toggle_exports)).then((mod) => ({ default: mod.ThemeToggle })),
|
|
1791
|
+
{
|
|
1792
|
+
ssr: false,
|
|
1793
|
+
loading: () => /* @__PURE__ */ jsx("div", { style: { visibility: "hidden" } })
|
|
1535
1794
|
}
|
|
1536
|
-
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
const isDark = isDarkTheme(theme, systemTheme);
|
|
1541
|
-
return {
|
|
1542
|
-
theme: theme || "system",
|
|
1543
|
-
setTheme,
|
|
1544
|
-
resolvedTheme: resolvedTheme || "light",
|
|
1545
|
-
isDark
|
|
1546
|
-
};
|
|
1547
|
-
}
|
|
1548
|
-
function ThemeContextProvider({
|
|
1549
|
-
children
|
|
1550
|
-
}) {
|
|
1551
|
-
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
1552
|
-
}
|
|
1553
|
-
function ThemeToggle({
|
|
1554
|
-
className,
|
|
1555
|
-
variant = "icon",
|
|
1556
|
-
size = "md",
|
|
1795
|
+
);
|
|
1796
|
+
function SafeThemeProvider({
|
|
1797
|
+
children,
|
|
1798
|
+
noSSR = false,
|
|
1557
1799
|
...props
|
|
1558
1800
|
}) {
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
React2.useEffect(() => {
|
|
1562
|
-
setMounted(true);
|
|
1563
|
-
}, []);
|
|
1564
|
-
if (!mounted) return null;
|
|
1565
|
-
const toggleTheme = () => {
|
|
1566
|
-
setTheme(resolvedTheme === "dark" ? "light" : "dark");
|
|
1567
|
-
};
|
|
1568
|
-
const iconSize = {
|
|
1569
|
-
sm: 16,
|
|
1570
|
-
md: 20,
|
|
1571
|
-
lg: 24
|
|
1572
|
-
};
|
|
1573
|
-
const sizeClasses = {
|
|
1574
|
-
sm: "h-8 w-8",
|
|
1575
|
-
md: "h-10 w-10",
|
|
1576
|
-
lg: "h-12 w-12"
|
|
1577
|
-
};
|
|
1578
|
-
const textSizeClasses = {
|
|
1579
|
-
sm: "text-xs",
|
|
1580
|
-
md: "text-sm",
|
|
1581
|
-
lg: "text-base"
|
|
1582
|
-
};
|
|
1583
|
-
if (variant === "icon") {
|
|
1584
|
-
return /* @__PURE__ */ jsx(
|
|
1585
|
-
"button",
|
|
1586
|
-
{
|
|
1587
|
-
type: "button",
|
|
1588
|
-
onClick: toggleTheme,
|
|
1589
|
-
className: cn(
|
|
1590
|
-
"inline-flex items-center justify-center rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
|
1591
|
-
sizeClasses[size],
|
|
1592
|
-
className
|
|
1593
|
-
),
|
|
1594
|
-
"aria-label": resolvedTheme === "dark" ? "Switch to light theme" : "Switch to dark theme",
|
|
1595
|
-
...props,
|
|
1596
|
-
children: resolvedTheme === "dark" ? /* @__PURE__ */ jsx(IconSun, { size: iconSize[size], stroke: 1.5 }) : /* @__PURE__ */ jsx(IconMoon, { size: iconSize[size], stroke: 1.5 })
|
|
1597
|
-
}
|
|
1598
|
-
);
|
|
1801
|
+
if (noSSR) {
|
|
1802
|
+
return /* @__PURE__ */ jsx(DynamicThemeProviderNoSSR, { ...props, children });
|
|
1599
1803
|
}
|
|
1600
|
-
|
|
1601
|
-
return /* @__PURE__ */ jsx(
|
|
1602
|
-
"button",
|
|
1603
|
-
{
|
|
1604
|
-
type: "button",
|
|
1605
|
-
onClick: toggleTheme,
|
|
1606
|
-
className: cn(
|
|
1607
|
-
"inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2",
|
|
1608
|
-
textSizeClasses[size],
|
|
1609
|
-
"hover:bg-accent hover:text-accent-foreground",
|
|
1610
|
-
className
|
|
1611
|
-
),
|
|
1612
|
-
...props,
|
|
1613
|
-
children: resolvedTheme === "dark" ? "Light Mode" : "Dark Mode"
|
|
1614
|
-
}
|
|
1615
|
-
);
|
|
1616
|
-
}
|
|
1617
|
-
return /* @__PURE__ */ jsx(
|
|
1618
|
-
"button",
|
|
1619
|
-
{
|
|
1620
|
-
type: "button",
|
|
1621
|
-
onClick: toggleTheme,
|
|
1622
|
-
className: cn(
|
|
1623
|
-
"inline-flex items-center justify-center rounded-md px-3 py-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
1624
|
-
textSizeClasses[size],
|
|
1625
|
-
resolvedTheme === "dark" ? "bg-accent text-accent-foreground hover:bg-accent/80" : "bg-muted text-muted-foreground hover:bg-muted/80",
|
|
1626
|
-
className
|
|
1627
|
-
),
|
|
1628
|
-
"aria-label": resolvedTheme === "dark" ? "Switch to light theme" : "Switch to dark theme",
|
|
1629
|
-
...props,
|
|
1630
|
-
children: resolvedTheme === "dark" ? /* @__PURE__ */ jsxs("span", { className: "flex items-center", children: [
|
|
1631
|
-
/* @__PURE__ */ jsx(IconSun, { size: iconSize[size], stroke: 1.5, className: "mr-2" }),
|
|
1632
|
-
"Light"
|
|
1633
|
-
] }) : /* @__PURE__ */ jsxs("span", { className: "flex items-center", children: [
|
|
1634
|
-
/* @__PURE__ */ jsx(IconMoon, { size: iconSize[size], stroke: 1.5, className: "mr-2" }),
|
|
1635
|
-
"Dark"
|
|
1636
|
-
] })
|
|
1637
|
-
}
|
|
1638
|
-
);
|
|
1804
|
+
return /* @__PURE__ */ jsx(DynamicThemeProvider, { ...props, children });
|
|
1639
1805
|
}
|
|
1640
1806
|
|
|
1641
|
-
|
|
1807
|
+
// src/themes/index.ts
|
|
1808
|
+
init_theme_utils();
|
|
1809
|
+
|
|
1810
|
+
export { Button, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DropdownMenu, DynamicThemeProvider, DynamicThemeProviderNoSSR, DynamicThemeToggle, EmailButton, EmailCaption, EmailContainer, EmailFooter, EmailHeader, EmailHeading, EmailLayout, EmailMuted, EmailText, Heading, HoverCard, HoverCardContent, HoverCardTrigger, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, SafeThemeProvider, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Slider, Text, ThemeContextProvider, ThemeProvider, ThemeProviderNoSSR, ThemeToggle, Toggle, ToggleGroup, ToggleGroupItem, buttonVariants, cn, colors, filterDOMProps, generateId, getColorVariantClasses, isDarkTheme, isNotNullOrUndefined, mapColorToShadcnVariant, mapVariantToShadcnVariant, radius, shadows, spacing, tokens, typography, useTheme, useThemeServer };
|
|
1642
1811
|
//# sourceMappingURL=index.mjs.map
|
|
1643
1812
|
//# sourceMappingURL=index.mjs.map
|