@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.js
CHANGED
@@ -1,13 +1,14 @@
|
|
1
1
|
'use strict';
|
2
2
|
|
3
|
-
var React2 = require('react');
|
4
|
-
var reactSlot = require('@radix-ui/react-slot');
|
5
|
-
var classVarianceAuthority = require('class-variance-authority');
|
6
3
|
var clsx = require('clsx');
|
7
4
|
var tailwindMerge = require('tailwind-merge');
|
5
|
+
var React2 = require('react');
|
6
|
+
var nextThemes = require('next-themes');
|
8
7
|
var jsxRuntime = require('react/jsx-runtime');
|
9
|
-
var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
|
10
8
|
var iconsReact = require('@tabler/icons-react');
|
9
|
+
var reactSlot = require('@radix-ui/react-slot');
|
10
|
+
var classVarianceAuthority = require('class-variance-authority');
|
11
|
+
var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
|
11
12
|
var TogglePrimitive = require('@radix-ui/react-toggle');
|
12
13
|
var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
|
13
14
|
var SliderPrimitive = require('@radix-ui/react-slider');
|
@@ -17,7 +18,9 @@ var SheetPrimitive = require('@radix-ui/react-dialog');
|
|
17
18
|
var cmdk = require('cmdk');
|
18
19
|
var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
|
19
20
|
var ContextMenuPrimitive = require('@radix-ui/react-context-menu');
|
20
|
-
var
|
21
|
+
var dynamic = require('next/dynamic');
|
22
|
+
|
23
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
21
24
|
|
22
25
|
function _interopNamespace(e) {
|
23
26
|
if (e && e.__esModule) return e;
|
@@ -47,8 +50,17 @@ var HoverCardPrimitive__namespace = /*#__PURE__*/_interopNamespace(HoverCardPrim
|
|
47
50
|
var SheetPrimitive__namespace = /*#__PURE__*/_interopNamespace(SheetPrimitive);
|
48
51
|
var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
|
49
52
|
var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
|
53
|
+
var dynamic__default = /*#__PURE__*/_interopDefault(dynamic);
|
50
54
|
|
51
|
-
|
55
|
+
var __defProp = Object.defineProperty;
|
56
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
57
|
+
var __esm = (fn, res) => function __init() {
|
58
|
+
return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
|
59
|
+
};
|
60
|
+
var __export = (target, all) => {
|
61
|
+
for (var name in all)
|
62
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
63
|
+
};
|
52
64
|
function cn(...inputs) {
|
53
65
|
return tailwindMerge.twMerge(clsx.clsx(inputs));
|
54
66
|
}
|
@@ -64,6 +76,263 @@ function filterDOMProps(props, propNames) {
|
|
64
76
|
propNames.forEach((name) => delete result[name]);
|
65
77
|
return result;
|
66
78
|
}
|
79
|
+
var init_utils = __esm({
|
80
|
+
"src/lib/utils.ts"() {
|
81
|
+
}
|
82
|
+
});
|
83
|
+
|
84
|
+
// src/themes/theme-provider.tsx
|
85
|
+
var theme_provider_exports = {};
|
86
|
+
__export(theme_provider_exports, {
|
87
|
+
ThemeProvider: () => ThemeProvider,
|
88
|
+
ThemeProviderNoSSR: () => ThemeProviderNoSSR
|
89
|
+
});
|
90
|
+
function ThemeProvider({
|
91
|
+
children,
|
92
|
+
...props
|
93
|
+
}) {
|
94
|
+
if (typeof window === "undefined") {
|
95
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
|
96
|
+
}
|
97
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
98
|
+
nextThemes.ThemeProvider,
|
99
|
+
{
|
100
|
+
attribute: "class",
|
101
|
+
defaultTheme: "system",
|
102
|
+
enableSystem: true,
|
103
|
+
disableTransitionOnChange: true,
|
104
|
+
...props,
|
105
|
+
children
|
106
|
+
}
|
107
|
+
);
|
108
|
+
}
|
109
|
+
function ThemeProviderNoSSR({
|
110
|
+
children,
|
111
|
+
...props
|
112
|
+
}) {
|
113
|
+
const [mounted, setMounted] = React2__namespace.useState(false);
|
114
|
+
React2__namespace.useEffect(() => {
|
115
|
+
setMounted(true);
|
116
|
+
}, []);
|
117
|
+
if (!mounted) {
|
118
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
|
119
|
+
}
|
120
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { ...props, children });
|
121
|
+
}
|
122
|
+
var init_theme_provider = __esm({
|
123
|
+
"src/themes/theme-provider.tsx"() {
|
124
|
+
"use client";
|
125
|
+
}
|
126
|
+
});
|
127
|
+
|
128
|
+
// src/lib/theme-utils.ts
|
129
|
+
exports.mapColorToShadcnVariant = void 0; exports.mapVariantToShadcnVariant = void 0; exports.getColorVariantClasses = void 0; exports.isDarkTheme = void 0;
|
130
|
+
var init_theme_utils = __esm({
|
131
|
+
"src/lib/theme-utils.ts"() {
|
132
|
+
exports.mapColorToShadcnVariant = (color) => {
|
133
|
+
switch (color) {
|
134
|
+
case "brand":
|
135
|
+
return "default";
|
136
|
+
case "error":
|
137
|
+
return "destructive";
|
138
|
+
case "warning":
|
139
|
+
case "success":
|
140
|
+
return "secondary";
|
141
|
+
// Will need additional classes
|
142
|
+
default:
|
143
|
+
return "default";
|
144
|
+
}
|
145
|
+
};
|
146
|
+
exports.mapVariantToShadcnVariant = (variant) => {
|
147
|
+
switch (variant) {
|
148
|
+
case "primary":
|
149
|
+
return "default";
|
150
|
+
case "secondary":
|
151
|
+
return "outline";
|
152
|
+
case "tertiary":
|
153
|
+
return "ghost";
|
154
|
+
default:
|
155
|
+
return "default";
|
156
|
+
}
|
157
|
+
};
|
158
|
+
exports.getColorVariantClasses = (color, variant) => {
|
159
|
+
const colorVariantMap = {
|
160
|
+
primary: {
|
161
|
+
brand: "bg-brand-600 hover:bg-brand-700 text-white focus-visible:ring-brand-500",
|
162
|
+
error: "bg-error-600 hover:bg-error-700 text-white focus-visible:ring-error-500",
|
163
|
+
warning: "bg-warning-600 hover:bg-warning-700 text-white focus-visible:ring-warning-500",
|
164
|
+
success: "bg-success-600 hover:bg-success-700 text-white focus-visible:ring-success-500"
|
165
|
+
},
|
166
|
+
secondary: {
|
167
|
+
brand: "border-brand-300 text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500",
|
168
|
+
error: "border-error-300 text-error-700 hover:bg-error-50 focus-visible:ring-error-500",
|
169
|
+
warning: "border-warning-300 text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500",
|
170
|
+
success: "border-success-300 text-success-700 hover:bg-success-50 focus-visible:ring-success-500"
|
171
|
+
},
|
172
|
+
tertiary: {
|
173
|
+
brand: "text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500",
|
174
|
+
error: "text-error-700 hover:bg-error-50 focus-visible:ring-error-500",
|
175
|
+
warning: "text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500",
|
176
|
+
success: "text-success-700 hover:bg-success-50 focus-visible:ring-success-500"
|
177
|
+
}
|
178
|
+
};
|
179
|
+
return colorVariantMap[variant]?.[color] || "";
|
180
|
+
};
|
181
|
+
exports.isDarkTheme = (theme, systemTheme) => {
|
182
|
+
if (theme === "system") {
|
183
|
+
return systemTheme === "dark";
|
184
|
+
}
|
185
|
+
return theme === "dark";
|
186
|
+
};
|
187
|
+
}
|
188
|
+
});
|
189
|
+
function useTheme() {
|
190
|
+
if (typeof window === "undefined") {
|
191
|
+
return {
|
192
|
+
theme: "system",
|
193
|
+
setTheme: () => {
|
194
|
+
},
|
195
|
+
resolvedTheme: "light",
|
196
|
+
isDark: false
|
197
|
+
};
|
198
|
+
}
|
199
|
+
const { theme, setTheme, resolvedTheme, systemTheme } = nextThemes.useTheme();
|
200
|
+
const isDark = exports.isDarkTheme(theme, systemTheme);
|
201
|
+
return {
|
202
|
+
theme: theme || "system",
|
203
|
+
setTheme,
|
204
|
+
resolvedTheme: resolvedTheme || "light",
|
205
|
+
isDark
|
206
|
+
};
|
207
|
+
}
|
208
|
+
function useThemeServer() {
|
209
|
+
return {
|
210
|
+
theme: "system",
|
211
|
+
setTheme: () => {
|
212
|
+
},
|
213
|
+
resolvedTheme: "light",
|
214
|
+
isDark: false
|
215
|
+
};
|
216
|
+
}
|
217
|
+
function ThemeContextProvider({
|
218
|
+
children
|
219
|
+
}) {
|
220
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
|
221
|
+
}
|
222
|
+
var init_theme_context = __esm({
|
223
|
+
"src/themes/theme-context.tsx"() {
|
224
|
+
"use client";
|
225
|
+
init_theme_utils();
|
226
|
+
}
|
227
|
+
});
|
228
|
+
function ThemeToggle({
|
229
|
+
className,
|
230
|
+
variant = "icon",
|
231
|
+
size = "md",
|
232
|
+
...props
|
233
|
+
}) {
|
234
|
+
const { theme, setTheme, resolvedTheme } = useTheme();
|
235
|
+
const [mounted, setMounted] = React2__namespace.useState(false);
|
236
|
+
React2__namespace.useEffect(() => {
|
237
|
+
setMounted(true);
|
238
|
+
}, []);
|
239
|
+
if (!mounted) return null;
|
240
|
+
const toggleTheme = () => {
|
241
|
+
setTheme(resolvedTheme === "dark" ? "light" : "dark");
|
242
|
+
};
|
243
|
+
const iconSize = {
|
244
|
+
sm: 16,
|
245
|
+
md: 20,
|
246
|
+
lg: 24
|
247
|
+
};
|
248
|
+
const sizeClasses = {
|
249
|
+
sm: "h-8 w-8",
|
250
|
+
md: "h-10 w-10",
|
251
|
+
lg: "h-12 w-12"
|
252
|
+
};
|
253
|
+
const textSizeClasses = {
|
254
|
+
sm: "text-xs",
|
255
|
+
md: "text-sm",
|
256
|
+
lg: "text-base"
|
257
|
+
};
|
258
|
+
if (variant === "icon") {
|
259
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
260
|
+
"button",
|
261
|
+
{
|
262
|
+
type: "button",
|
263
|
+
onClick: toggleTheme,
|
264
|
+
className: cn(
|
265
|
+
"inline-flex items-center justify-center rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
266
|
+
sizeClasses[size],
|
267
|
+
className
|
268
|
+
),
|
269
|
+
"aria-label": resolvedTheme === "dark" ? "Switch to light theme" : "Switch to dark theme",
|
270
|
+
...props,
|
271
|
+
children: resolvedTheme === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconSun, { size: iconSize[size], stroke: 1.5 }) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconMoon, { size: iconSize[size], stroke: 1.5 })
|
272
|
+
}
|
273
|
+
);
|
274
|
+
}
|
275
|
+
if (variant === "button") {
|
276
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
277
|
+
"button",
|
278
|
+
{
|
279
|
+
type: "button",
|
280
|
+
onClick: toggleTheme,
|
281
|
+
className: cn(
|
282
|
+
"inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2",
|
283
|
+
textSizeClasses[size],
|
284
|
+
"hover:bg-accent hover:text-accent-foreground",
|
285
|
+
className
|
286
|
+
),
|
287
|
+
...props,
|
288
|
+
children: resolvedTheme === "dark" ? "Light Mode" : "Dark Mode"
|
289
|
+
}
|
290
|
+
);
|
291
|
+
}
|
292
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
293
|
+
"button",
|
294
|
+
{
|
295
|
+
type: "button",
|
296
|
+
onClick: toggleTheme,
|
297
|
+
className: cn(
|
298
|
+
"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",
|
299
|
+
textSizeClasses[size],
|
300
|
+
resolvedTheme === "dark" ? "bg-accent text-accent-foreground hover:bg-accent/80" : "bg-muted text-muted-foreground hover:bg-muted/80",
|
301
|
+
className
|
302
|
+
),
|
303
|
+
"aria-label": resolvedTheme === "dark" ? "Switch to light theme" : "Switch to dark theme",
|
304
|
+
...props,
|
305
|
+
children: resolvedTheme === "dark" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center", children: [
|
306
|
+
/* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconSun, { size: iconSize[size], stroke: 1.5, className: "mr-2" }),
|
307
|
+
"Light"
|
308
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center", children: [
|
309
|
+
/* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconMoon, { size: iconSize[size], stroke: 1.5, className: "mr-2" }),
|
310
|
+
"Dark"
|
311
|
+
] })
|
312
|
+
}
|
313
|
+
);
|
314
|
+
}
|
315
|
+
var init_theme_toggle = __esm({
|
316
|
+
"src/components/ui/theme-toggle/theme-toggle.tsx"() {
|
317
|
+
"use client";
|
318
|
+
init_theme_context();
|
319
|
+
init_utils();
|
320
|
+
}
|
321
|
+
});
|
322
|
+
|
323
|
+
// src/components/ui/theme-toggle/index.ts
|
324
|
+
var theme_toggle_exports = {};
|
325
|
+
__export(theme_toggle_exports, {
|
326
|
+
ThemeToggle: () => ThemeToggle
|
327
|
+
});
|
328
|
+
var init_theme_toggle2 = __esm({
|
329
|
+
"src/components/ui/theme-toggle/index.ts"() {
|
330
|
+
init_theme_toggle();
|
331
|
+
}
|
332
|
+
});
|
333
|
+
|
334
|
+
// src/components/ui/button.tsx
|
335
|
+
init_utils();
|
67
336
|
var buttonVariants = classVarianceAuthority.cva(
|
68
337
|
"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",
|
69
338
|
{
|
@@ -168,6 +437,9 @@ var Button = React2__namespace.forwardRef(
|
|
168
437
|
}
|
169
438
|
);
|
170
439
|
Button.displayName = "Button";
|
440
|
+
|
441
|
+
// src/components/ui/dropdown-menu/dropdown-menu.tsx
|
442
|
+
init_utils();
|
171
443
|
var DropdownMenuRoot = DropdownMenuPrimitive__namespace.Root;
|
172
444
|
var DropdownMenuTrigger = React2__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
173
445
|
DropdownMenuPrimitive__namespace.Trigger,
|
@@ -349,6 +621,9 @@ var DropdownMenu = {
|
|
349
621
|
SubContent: DropdownMenuSubContent,
|
350
622
|
SubTrigger: DropdownMenuSubTrigger
|
351
623
|
};
|
624
|
+
|
625
|
+
// src/components/typography/heading/heading.tsx
|
626
|
+
init_utils();
|
352
627
|
var Heading = React2__namespace.forwardRef(
|
353
628
|
({
|
354
629
|
level = 1,
|
@@ -417,6 +692,9 @@ var Heading = React2__namespace.forwardRef(
|
|
417
692
|
}
|
418
693
|
);
|
419
694
|
Heading.displayName = "Heading";
|
695
|
+
|
696
|
+
// src/components/typography/text/text.tsx
|
697
|
+
init_utils();
|
420
698
|
var Text = React2__namespace.forwardRef(
|
421
699
|
({
|
422
700
|
size = "md",
|
@@ -469,6 +747,9 @@ var Text = React2__namespace.forwardRef(
|
|
469
747
|
}
|
470
748
|
);
|
471
749
|
Text.displayName = "Text";
|
750
|
+
|
751
|
+
// src/components/ui/toggle.tsx
|
752
|
+
init_utils();
|
472
753
|
var Toggle = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
473
754
|
TogglePrimitive__namespace.Root,
|
474
755
|
{
|
@@ -481,6 +762,9 @@ var Toggle = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @
|
|
481
762
|
}
|
482
763
|
));
|
483
764
|
Toggle.displayName = TogglePrimitive__namespace.Root.displayName;
|
765
|
+
|
766
|
+
// src/components/ui/toggle-group.tsx
|
767
|
+
init_utils();
|
484
768
|
var ToggleGroup = React2__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
485
769
|
ToggleGroupPrimitive__namespace.Root,
|
486
770
|
{
|
@@ -503,6 +787,9 @@ var ToggleGroupItem = React2__namespace.forwardRef(({ className, ...props }, ref
|
|
503
787
|
}
|
504
788
|
));
|
505
789
|
ToggleGroupItem.displayName = ToggleGroupPrimitive__namespace.Item.displayName;
|
790
|
+
|
791
|
+
// src/components/ui/slider.tsx
|
792
|
+
init_utils();
|
506
793
|
var Slider = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
|
507
794
|
SliderPrimitive__namespace.Root,
|
508
795
|
{
|
@@ -519,6 +806,9 @@ var Slider = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @
|
|
519
806
|
}
|
520
807
|
));
|
521
808
|
Slider.displayName = SliderPrimitive__namespace.Root.displayName;
|
809
|
+
|
810
|
+
// src/components/ui/popover.tsx
|
811
|
+
init_utils();
|
522
812
|
var Popover = PopoverPrimitive__namespace.Root;
|
523
813
|
var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
|
524
814
|
var PopoverAnchor = PopoverPrimitive__namespace.Anchor;
|
@@ -536,6 +826,9 @@ var PopoverContent = React2__namespace.forwardRef(({ className, align = "center"
|
|
536
826
|
}
|
537
827
|
) }));
|
538
828
|
PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
|
829
|
+
|
830
|
+
// src/components/ui/hover-card.tsx
|
831
|
+
init_utils();
|
539
832
|
var HoverCard = HoverCardPrimitive__namespace.Root;
|
540
833
|
var HoverCardTrigger = HoverCardPrimitive__namespace.Trigger;
|
541
834
|
var HoverCardContent = React2__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
@@ -552,6 +845,9 @@ var HoverCardContent = React2__namespace.forwardRef(({ className, align = "cente
|
|
552
845
|
}
|
553
846
|
));
|
554
847
|
HoverCardContent.displayName = HoverCardPrimitive__namespace.Content.displayName;
|
848
|
+
|
849
|
+
// src/components/ui/sheet.tsx
|
850
|
+
init_utils();
|
555
851
|
var Sheet = SheetPrimitive__namespace.Root;
|
556
852
|
var SheetTrigger = SheetPrimitive__namespace.Trigger;
|
557
853
|
var SheetClose = SheetPrimitive__namespace.Close;
|
@@ -645,6 +941,12 @@ var SheetDescription = React2__namespace.forwardRef(({ className, ...props }, re
|
|
645
941
|
}
|
646
942
|
));
|
647
943
|
SheetDescription.displayName = SheetPrimitive__namespace.Description.displayName;
|
944
|
+
|
945
|
+
// src/components/ui/command.tsx
|
946
|
+
init_utils();
|
947
|
+
|
948
|
+
// src/components/ui/dialog.tsx
|
949
|
+
init_utils();
|
648
950
|
var Dialog = SheetPrimitive__namespace.Root;
|
649
951
|
var DialogPortal = SheetPrimitive__namespace.Portal;
|
650
952
|
var DialogOverlay = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
@@ -802,6 +1104,9 @@ CommandShortcut.displayName = "CommandShortcut";
|
|
802
1104
|
var Collapsible = CollapsiblePrimitive__namespace.Root;
|
803
1105
|
var CollapsibleTrigger2 = CollapsiblePrimitive__namespace.CollapsibleTrigger;
|
804
1106
|
var CollapsibleContent2 = CollapsiblePrimitive__namespace.CollapsibleContent;
|
1107
|
+
|
1108
|
+
// src/components/ui/context-menu.tsx
|
1109
|
+
init_utils();
|
805
1110
|
var ContextMenu = ContextMenuPrimitive__namespace.Root;
|
806
1111
|
var ContextMenuTrigger = ContextMenuPrimitive__namespace.Trigger;
|
807
1112
|
var ContextMenuGroup = ContextMenuPrimitive__namespace.Group;
|
@@ -1222,6 +1527,9 @@ var EmailFooter = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { styl
|
|
1222
1527
|
] })
|
1223
1528
|
] }) });
|
1224
1529
|
|
1530
|
+
// src/index.ts
|
1531
|
+
init_utils();
|
1532
|
+
|
1225
1533
|
// src/tokens/colors.ts
|
1226
1534
|
var colors = {
|
1227
1535
|
// Base colors
|
@@ -1493,182 +1801,46 @@ var tokens = {
|
|
1493
1801
|
radius,
|
1494
1802
|
shadows
|
1495
1803
|
};
|
1496
|
-
function ThemeProvider({
|
1497
|
-
children,
|
1498
|
-
...props
|
1499
|
-
}) {
|
1500
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
1501
|
-
nextThemes.ThemeProvider,
|
1502
|
-
{
|
1503
|
-
attribute: "class",
|
1504
|
-
defaultTheme: "system",
|
1505
|
-
enableSystem: true,
|
1506
|
-
disableTransitionOnChange: true,
|
1507
|
-
...props,
|
1508
|
-
children
|
1509
|
-
}
|
1510
|
-
);
|
1511
|
-
}
|
1512
1804
|
|
1513
|
-
// src/
|
1514
|
-
|
1515
|
-
|
1516
|
-
|
1517
|
-
|
1518
|
-
|
1519
|
-
|
1520
|
-
|
1521
|
-
|
1522
|
-
return "secondary";
|
1523
|
-
// Will need additional classes
|
1524
|
-
default:
|
1525
|
-
return "default";
|
1805
|
+
// src/themes/index.ts
|
1806
|
+
init_theme_provider();
|
1807
|
+
init_theme_context();
|
1808
|
+
init_theme_toggle2();
|
1809
|
+
var DynamicThemeProvider = dynamic__default.default(
|
1810
|
+
() => Promise.resolve().then(() => (init_theme_provider(), theme_provider_exports)).then((mod) => ({ default: mod.ThemeProvider })),
|
1811
|
+
{
|
1812
|
+
ssr: false,
|
1813
|
+
loading: () => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { visibility: "hidden" } })
|
1526
1814
|
}
|
1527
|
-
|
1528
|
-
var
|
1529
|
-
|
1530
|
-
|
1531
|
-
|
1532
|
-
|
1533
|
-
return "outline";
|
1534
|
-
case "tertiary":
|
1535
|
-
return "ghost";
|
1536
|
-
default:
|
1537
|
-
return "default";
|
1815
|
+
);
|
1816
|
+
var DynamicThemeProviderNoSSR = dynamic__default.default(
|
1817
|
+
() => Promise.resolve().then(() => (init_theme_provider(), theme_provider_exports)).then((mod) => ({ default: mod.ThemeProviderNoSSR })),
|
1818
|
+
{
|
1819
|
+
ssr: false,
|
1820
|
+
loading: () => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { visibility: "hidden" } })
|
1538
1821
|
}
|
1539
|
-
|
1540
|
-
var
|
1541
|
-
|
1542
|
-
|
1543
|
-
|
1544
|
-
|
1545
|
-
warning: "bg-warning-600 hover:bg-warning-700 text-white focus-visible:ring-warning-500",
|
1546
|
-
success: "bg-success-600 hover:bg-success-700 text-white focus-visible:ring-success-500"
|
1547
|
-
},
|
1548
|
-
secondary: {
|
1549
|
-
brand: "border-brand-300 text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500",
|
1550
|
-
error: "border-error-300 text-error-700 hover:bg-error-50 focus-visible:ring-error-500",
|
1551
|
-
warning: "border-warning-300 text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500",
|
1552
|
-
success: "border-success-300 text-success-700 hover:bg-success-50 focus-visible:ring-success-500"
|
1553
|
-
},
|
1554
|
-
tertiary: {
|
1555
|
-
brand: "text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500",
|
1556
|
-
error: "text-error-700 hover:bg-error-50 focus-visible:ring-error-500",
|
1557
|
-
warning: "text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500",
|
1558
|
-
success: "text-success-700 hover:bg-success-50 focus-visible:ring-success-500"
|
1559
|
-
}
|
1560
|
-
};
|
1561
|
-
return colorVariantMap[variant]?.[color] || "";
|
1562
|
-
};
|
1563
|
-
var isDarkTheme = (theme, systemTheme) => {
|
1564
|
-
if (theme === "system") {
|
1565
|
-
return systemTheme === "dark";
|
1822
|
+
);
|
1823
|
+
var DynamicThemeToggle = dynamic__default.default(
|
1824
|
+
() => Promise.resolve().then(() => (init_theme_toggle2(), theme_toggle_exports)).then((mod) => ({ default: mod.ThemeToggle })),
|
1825
|
+
{
|
1826
|
+
ssr: false,
|
1827
|
+
loading: () => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { visibility: "hidden" } })
|
1566
1828
|
}
|
1567
|
-
|
1568
|
-
|
1569
|
-
|
1570
|
-
|
1571
|
-
const isDark = isDarkTheme(theme, systemTheme);
|
1572
|
-
return {
|
1573
|
-
theme: theme || "system",
|
1574
|
-
setTheme,
|
1575
|
-
resolvedTheme: resolvedTheme || "light",
|
1576
|
-
isDark
|
1577
|
-
};
|
1578
|
-
}
|
1579
|
-
function ThemeContextProvider({
|
1580
|
-
children
|
1581
|
-
}) {
|
1582
|
-
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
|
1583
|
-
}
|
1584
|
-
function ThemeToggle({
|
1585
|
-
className,
|
1586
|
-
variant = "icon",
|
1587
|
-
size = "md",
|
1829
|
+
);
|
1830
|
+
function SafeThemeProvider({
|
1831
|
+
children,
|
1832
|
+
noSSR = false,
|
1588
1833
|
...props
|
1589
1834
|
}) {
|
1590
|
-
|
1591
|
-
|
1592
|
-
React2__namespace.useEffect(() => {
|
1593
|
-
setMounted(true);
|
1594
|
-
}, []);
|
1595
|
-
if (!mounted) return null;
|
1596
|
-
const toggleTheme = () => {
|
1597
|
-
setTheme(resolvedTheme === "dark" ? "light" : "dark");
|
1598
|
-
};
|
1599
|
-
const iconSize = {
|
1600
|
-
sm: 16,
|
1601
|
-
md: 20,
|
1602
|
-
lg: 24
|
1603
|
-
};
|
1604
|
-
const sizeClasses = {
|
1605
|
-
sm: "h-8 w-8",
|
1606
|
-
md: "h-10 w-10",
|
1607
|
-
lg: "h-12 w-12"
|
1608
|
-
};
|
1609
|
-
const textSizeClasses = {
|
1610
|
-
sm: "text-xs",
|
1611
|
-
md: "text-sm",
|
1612
|
-
lg: "text-base"
|
1613
|
-
};
|
1614
|
-
if (variant === "icon") {
|
1615
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
1616
|
-
"button",
|
1617
|
-
{
|
1618
|
-
type: "button",
|
1619
|
-
onClick: toggleTheme,
|
1620
|
-
className: cn(
|
1621
|
-
"inline-flex items-center justify-center rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
1622
|
-
sizeClasses[size],
|
1623
|
-
className
|
1624
|
-
),
|
1625
|
-
"aria-label": resolvedTheme === "dark" ? "Switch to light theme" : "Switch to dark theme",
|
1626
|
-
...props,
|
1627
|
-
children: resolvedTheme === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconSun, { size: iconSize[size], stroke: 1.5 }) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconMoon, { size: iconSize[size], stroke: 1.5 })
|
1628
|
-
}
|
1629
|
-
);
|
1835
|
+
if (noSSR) {
|
1836
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DynamicThemeProviderNoSSR, { ...props, children });
|
1630
1837
|
}
|
1631
|
-
|
1632
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
1633
|
-
"button",
|
1634
|
-
{
|
1635
|
-
type: "button",
|
1636
|
-
onClick: toggleTheme,
|
1637
|
-
className: cn(
|
1638
|
-
"inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2",
|
1639
|
-
textSizeClasses[size],
|
1640
|
-
"hover:bg-accent hover:text-accent-foreground",
|
1641
|
-
className
|
1642
|
-
),
|
1643
|
-
...props,
|
1644
|
-
children: resolvedTheme === "dark" ? "Light Mode" : "Dark Mode"
|
1645
|
-
}
|
1646
|
-
);
|
1647
|
-
}
|
1648
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
1649
|
-
"button",
|
1650
|
-
{
|
1651
|
-
type: "button",
|
1652
|
-
onClick: toggleTheme,
|
1653
|
-
className: cn(
|
1654
|
-
"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",
|
1655
|
-
textSizeClasses[size],
|
1656
|
-
resolvedTheme === "dark" ? "bg-accent text-accent-foreground hover:bg-accent/80" : "bg-muted text-muted-foreground hover:bg-muted/80",
|
1657
|
-
className
|
1658
|
-
),
|
1659
|
-
"aria-label": resolvedTheme === "dark" ? "Switch to light theme" : "Switch to dark theme",
|
1660
|
-
...props,
|
1661
|
-
children: resolvedTheme === "dark" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center", children: [
|
1662
|
-
/* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconSun, { size: iconSize[size], stroke: 1.5, className: "mr-2" }),
|
1663
|
-
"Light"
|
1664
|
-
] }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center", children: [
|
1665
|
-
/* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconMoon, { size: iconSize[size], stroke: 1.5, className: "mr-2" }),
|
1666
|
-
"Dark"
|
1667
|
-
] })
|
1668
|
-
}
|
1669
|
-
);
|
1838
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DynamicThemeProvider, { ...props, children });
|
1670
1839
|
}
|
1671
1840
|
|
1841
|
+
// src/themes/index.ts
|
1842
|
+
init_theme_utils();
|
1843
|
+
|
1672
1844
|
exports.Button = Button;
|
1673
1845
|
exports.Collapsible = Collapsible;
|
1674
1846
|
exports.CollapsibleContent = CollapsibleContent2;
|
@@ -1698,6 +1870,9 @@ exports.ContextMenuSubContent = ContextMenuSubContent;
|
|
1698
1870
|
exports.ContextMenuSubTrigger = ContextMenuSubTrigger;
|
1699
1871
|
exports.ContextMenuTrigger = ContextMenuTrigger;
|
1700
1872
|
exports.DropdownMenu = DropdownMenu;
|
1873
|
+
exports.DynamicThemeProvider = DynamicThemeProvider;
|
1874
|
+
exports.DynamicThemeProviderNoSSR = DynamicThemeProviderNoSSR;
|
1875
|
+
exports.DynamicThemeToggle = DynamicThemeToggle;
|
1701
1876
|
exports.EmailButton = EmailButton;
|
1702
1877
|
exports.EmailCaption = EmailCaption;
|
1703
1878
|
exports.EmailContainer = EmailContainer;
|
@@ -1715,6 +1890,7 @@ exports.Popover = Popover;
|
|
1715
1890
|
exports.PopoverAnchor = PopoverAnchor;
|
1716
1891
|
exports.PopoverContent = PopoverContent;
|
1717
1892
|
exports.PopoverTrigger = PopoverTrigger;
|
1893
|
+
exports.SafeThemeProvider = SafeThemeProvider;
|
1718
1894
|
exports.Sheet = Sheet;
|
1719
1895
|
exports.SheetClose = SheetClose;
|
1720
1896
|
exports.SheetContent = SheetContent;
|
@@ -1729,6 +1905,7 @@ exports.Slider = Slider;
|
|
1729
1905
|
exports.Text = Text;
|
1730
1906
|
exports.ThemeContextProvider = ThemeContextProvider;
|
1731
1907
|
exports.ThemeProvider = ThemeProvider;
|
1908
|
+
exports.ThemeProviderNoSSR = ThemeProviderNoSSR;
|
1732
1909
|
exports.ThemeToggle = ThemeToggle;
|
1733
1910
|
exports.Toggle = Toggle;
|
1734
1911
|
exports.ToggleGroup = ToggleGroup;
|
@@ -1738,16 +1915,13 @@ exports.cn = cn;
|
|
1738
1915
|
exports.colors = colors;
|
1739
1916
|
exports.filterDOMProps = filterDOMProps;
|
1740
1917
|
exports.generateId = generateId;
|
1741
|
-
exports.getColorVariantClasses = getColorVariantClasses;
|
1742
|
-
exports.isDarkTheme = isDarkTheme;
|
1743
1918
|
exports.isNotNullOrUndefined = isNotNullOrUndefined;
|
1744
|
-
exports.mapColorToShadcnVariant = mapColorToShadcnVariant;
|
1745
|
-
exports.mapVariantToShadcnVariant = mapVariantToShadcnVariant;
|
1746
1919
|
exports.radius = radius;
|
1747
1920
|
exports.shadows = shadows;
|
1748
1921
|
exports.spacing = spacing;
|
1749
1922
|
exports.tokens = tokens;
|
1750
1923
|
exports.typography = typography;
|
1751
1924
|
exports.useTheme = useTheme;
|
1925
|
+
exports.useThemeServer = useThemeServer;
|
1752
1926
|
//# sourceMappingURL=index.js.map
|
1753
1927
|
//# sourceMappingURL=index.js.map
|