@vertz/theme-shadcn 0.2.38 → 0.2.42
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/base.d.ts +5 -6
- package/dist/base.js +1 -1
- package/dist/index.d.ts +6 -7
- package/dist/index.js +225 -256
- package/dist/shared/{chunk-f0wk9320.js → chunk-58ghrcqw.js} +4 -4
- package/package.json +4 -4
package/dist/base.d.ts
CHANGED
|
@@ -17,12 +17,11 @@ interface ThemeConfig {
|
|
|
17
17
|
radius?: "sm" | "md" | "lg";
|
|
18
18
|
/** Visual style preset. Default: 'nova'. */
|
|
19
19
|
style?: ThemeStyle;
|
|
20
|
-
/**
|
|
21
|
-
overrides
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
};
|
|
20
|
+
/**
|
|
21
|
+
* Color token overrides — deep-merged into the selected palette.
|
|
22
|
+
* @example colors: { primary: { DEFAULT: 'oklch(0.55 0.2 260)', _dark: 'oklch(0.65 0.25 260)' } }
|
|
23
|
+
*/
|
|
24
|
+
colors?: Record<string, Record<string, string> | undefined>;
|
|
26
25
|
}
|
|
27
26
|
/** Return type of configureThemeBase(). */
|
|
28
27
|
interface ResolvedThemeBase {
|
package/dist/base.js
CHANGED
package/dist/index.d.ts
CHANGED
|
@@ -20,12 +20,11 @@ interface ThemeConfig {
|
|
|
20
20
|
radius?: "sm" | "md" | "lg";
|
|
21
21
|
/** Visual style preset. Default: 'nova'. */
|
|
22
22
|
style?: ThemeStyle;
|
|
23
|
-
/**
|
|
24
|
-
overrides
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
};
|
|
23
|
+
/**
|
|
24
|
+
* Color token overrides — deep-merged into the selected palette.
|
|
25
|
+
* @example colors: { primary: { DEFAULT: 'oklch(0.55 0.2 260)', _dark: 'oklch(0.65 0.25 260)' } }
|
|
26
|
+
*/
|
|
27
|
+
colors?: Record<string, Record<string, string> | undefined>;
|
|
29
28
|
}
|
|
30
29
|
/** Return type of configureThemeBase(). */
|
|
31
30
|
interface ResolvedThemeBase {
|
|
@@ -1212,7 +1211,7 @@ interface ResolvedTheme extends ResolvedThemeBase {
|
|
|
1212
1211
|
/**
|
|
1213
1212
|
* Configure the shadcn theme.
|
|
1214
1213
|
*
|
|
1215
|
-
* Single entry point — selects palette, applies overrides, builds globals, styles, and components.
|
|
1214
|
+
* Single entry point — selects palette, applies color overrides, builds globals, styles, and components.
|
|
1216
1215
|
*
|
|
1217
1216
|
* For a lightweight alternative that only returns `{ theme, globals }` without
|
|
1218
1217
|
* component styles, use `configureThemeBase()` from `@vertz/theme-shadcn/base`.
|
package/dist/index.js
CHANGED
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
RADIUS_VALUES,
|
|
11
11
|
configureThemeBase,
|
|
12
12
|
palettes
|
|
13
|
-
} from "./shared/chunk-
|
|
13
|
+
} from "./shared/chunk-58ghrcqw.js";
|
|
14
14
|
// src/configure.ts
|
|
15
15
|
import { injectCSS as injectCSS2 } from "@vertz/ui";
|
|
16
16
|
import {
|
|
@@ -266,7 +266,7 @@ function createThemedDialog() {
|
|
|
266
266
|
}
|
|
267
267
|
|
|
268
268
|
// src/components/primitives/drawer.tsx
|
|
269
|
-
import {
|
|
269
|
+
import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
|
|
270
270
|
import { resolveChildren } from "@vertz/ui";
|
|
271
271
|
import { ComposedSheet } from "@vertz/ui-primitives";
|
|
272
272
|
var PANEL_CLASS_MAP = {
|
|
@@ -276,86 +276,59 @@ var PANEL_CLASS_MAP = {
|
|
|
276
276
|
bottom: "panelBottom"
|
|
277
277
|
};
|
|
278
278
|
function createThemedDrawer(styles) {
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
close: styles.close
|
|
294
|
-
}
|
|
295
|
-
});
|
|
296
|
-
}, DrawerHeader = function({ children, className: cls, class: classProp }) {
|
|
297
|
-
const effectiveCls = cls ?? classProp;
|
|
298
|
-
const combined = [styles.header, effectiveCls].filter(Boolean).join(" ");
|
|
299
|
-
const resolved = resolveChildren(children);
|
|
300
|
-
return (() => {
|
|
301
|
-
const __el0 = __element("div");
|
|
302
|
-
__el0.setAttribute("data-slot", "drawer-header");
|
|
303
|
-
{
|
|
304
|
-
const __v = combined;
|
|
305
|
-
if (__v != null && __v !== false)
|
|
306
|
-
__el0.setAttribute("class", __v === true ? "" : __v);
|
|
307
|
-
}
|
|
308
|
-
__enterChildren(__el0);
|
|
309
|
-
__insert(__el0, resolved);
|
|
310
|
-
__exitChildren();
|
|
311
|
-
return __el0;
|
|
312
|
-
})();
|
|
313
|
-
}, DrawerFooter = function({ children, className: cls, class: classProp }) {
|
|
314
|
-
const effectiveCls = cls ?? classProp;
|
|
315
|
-
const combined = [styles.footer, effectiveCls].filter(Boolean).join(" ");
|
|
316
|
-
const resolved = resolveChildren(children);
|
|
317
|
-
return (() => {
|
|
318
|
-
const __el1 = __element("div");
|
|
319
|
-
__el1.setAttribute("data-slot", "drawer-footer");
|
|
320
|
-
{
|
|
321
|
-
const __v = combined;
|
|
322
|
-
if (__v != null && __v !== false)
|
|
323
|
-
__el1.setAttribute("class", __v === true ? "" : __v);
|
|
324
|
-
}
|
|
325
|
-
__enterChildren(__el1);
|
|
326
|
-
__insert(__el1, resolved);
|
|
327
|
-
__exitChildren();
|
|
328
|
-
return __el1;
|
|
329
|
-
})();
|
|
330
|
-
}, DrawerHandle = function({ className: cls, class: classProp }) {
|
|
331
|
-
const effectiveCls = cls ?? classProp;
|
|
332
|
-
const combined = [styles.handle, effectiveCls].filter(Boolean).join(" ");
|
|
333
|
-
return (() => {
|
|
334
|
-
const __el2 = __element("div");
|
|
335
|
-
__el2.setAttribute("data-slot", "drawer-handle");
|
|
336
|
-
{
|
|
337
|
-
const __v = combined;
|
|
338
|
-
if (__v != null && __v !== false)
|
|
339
|
-
__el2.setAttribute("class", __v === true ? "" : __v);
|
|
340
|
-
}
|
|
341
|
-
return __el2;
|
|
342
|
-
})();
|
|
343
|
-
};
|
|
344
|
-
const __mfResult0 = Object.assign(DrawerRoot, {
|
|
345
|
-
Trigger: ComposedSheet.Trigger,
|
|
346
|
-
Content: ComposedSheet.Content,
|
|
347
|
-
Header: DrawerHeader,
|
|
348
|
-
Title: ComposedSheet.Title,
|
|
349
|
-
Description: ComposedSheet.Description,
|
|
350
|
-
Footer: DrawerFooter,
|
|
351
|
-
Handle: DrawerHandle
|
|
279
|
+
function DrawerRoot({ children, side, onOpenChange }) {
|
|
280
|
+
const resolvedSide = side ?? "bottom";
|
|
281
|
+
const panelClass = styles[PANEL_CLASS_MAP[resolvedSide]];
|
|
282
|
+
return ComposedSheet({
|
|
283
|
+
children,
|
|
284
|
+
side: resolvedSide,
|
|
285
|
+
onOpenChange,
|
|
286
|
+
classes: {
|
|
287
|
+
overlay: styles.overlay,
|
|
288
|
+
content: panelClass,
|
|
289
|
+
title: styles.title,
|
|
290
|
+
description: styles.description,
|
|
291
|
+
close: styles.close
|
|
292
|
+
}
|
|
352
293
|
});
|
|
353
|
-
__flushMountFrame();
|
|
354
|
-
return __mfResult0;
|
|
355
|
-
} catch (__mfErr) {
|
|
356
|
-
__discardMountFrame(__mfDepth);
|
|
357
|
-
throw __mfErr;
|
|
358
294
|
}
|
|
295
|
+
function DrawerHeader({ children, className: cls, class: classProp }) {
|
|
296
|
+
const effectiveCls = cls ?? classProp;
|
|
297
|
+
const combined = [styles.header, effectiveCls].filter(Boolean).join(" ");
|
|
298
|
+
const resolved = resolveChildren(children);
|
|
299
|
+
return jsxDEV_7x81h0kn("div", {
|
|
300
|
+
"data-slot": "drawer-header",
|
|
301
|
+
class: combined,
|
|
302
|
+
children: [...resolved]
|
|
303
|
+
}, undefined, true, undefined, this);
|
|
304
|
+
}
|
|
305
|
+
function DrawerFooter({ children, className: cls, class: classProp }) {
|
|
306
|
+
const effectiveCls = cls ?? classProp;
|
|
307
|
+
const combined = [styles.footer, effectiveCls].filter(Boolean).join(" ");
|
|
308
|
+
const resolved = resolveChildren(children);
|
|
309
|
+
return jsxDEV_7x81h0kn("div", {
|
|
310
|
+
"data-slot": "drawer-footer",
|
|
311
|
+
class: combined,
|
|
312
|
+
children: [...resolved]
|
|
313
|
+
}, undefined, true, undefined, this);
|
|
314
|
+
}
|
|
315
|
+
function DrawerHandle({ className: cls, class: classProp }) {
|
|
316
|
+
const effectiveCls = cls ?? classProp;
|
|
317
|
+
const combined = [styles.handle, effectiveCls].filter(Boolean).join(" ");
|
|
318
|
+
return jsxDEV_7x81h0kn("div", {
|
|
319
|
+
"data-slot": "drawer-handle",
|
|
320
|
+
class: combined
|
|
321
|
+
}, undefined, false, undefined, this);
|
|
322
|
+
}
|
|
323
|
+
return Object.assign(DrawerRoot, {
|
|
324
|
+
Trigger: ComposedSheet.Trigger,
|
|
325
|
+
Content: ComposedSheet.Content,
|
|
326
|
+
Header: DrawerHeader,
|
|
327
|
+
Title: ComposedSheet.Title,
|
|
328
|
+
Description: ComposedSheet.Description,
|
|
329
|
+
Footer: DrawerFooter,
|
|
330
|
+
Handle: DrawerHandle
|
|
331
|
+
});
|
|
359
332
|
}
|
|
360
333
|
|
|
361
334
|
// src/components/primitives/dropdown-menu.ts
|
|
@@ -3864,11 +3837,11 @@ function configureTheme(config) {
|
|
|
3864
3837
|
function defineLazyStyle(key, factory) {
|
|
3865
3838
|
Object.defineProperty(styles, key, {
|
|
3866
3839
|
get() {
|
|
3867
|
-
const
|
|
3868
|
-
const cssText =
|
|
3840
|
+
const result = getOrInit(key, factory);
|
|
3841
|
+
const cssText = result.css;
|
|
3869
3842
|
if (cssText)
|
|
3870
3843
|
injectCSS2(cssText);
|
|
3871
|
-
return
|
|
3844
|
+
return result;
|
|
3872
3845
|
},
|
|
3873
3846
|
enumerable: true,
|
|
3874
3847
|
configurable: true
|
|
@@ -3919,56 +3892,21 @@ function configureTheme(config) {
|
|
|
3919
3892
|
defineLazyStyle("scrollArea", createScrollAreaStyles);
|
|
3920
3893
|
defineLazyStyle("toggle", createToggleStyles);
|
|
3921
3894
|
defineLazyStyle("toggleGroup", createToggleGroupStyles);
|
|
3922
|
-
|
|
3923
|
-
function
|
|
3924
|
-
|
|
3925
|
-
|
|
3926
|
-
|
|
3927
|
-
|
|
3928
|
-
|
|
3929
|
-
|
|
3930
|
-
|
|
3931
|
-
|
|
3932
|
-
|
|
3933
|
-
|
|
3934
|
-
|
|
3935
|
-
|
|
3936
|
-
const
|
|
3937
|
-
const skeletonS = getOrInit("skeleton", createSkeletonStyles);
|
|
3938
|
-
const tableS = getOrInit("table", createTableStyles);
|
|
3939
|
-
const dropdownMenuS = getOrInit("dropdownMenu", createDropdownMenuStyles);
|
|
3940
|
-
const selectS = getOrInit("select", createSelectStyles);
|
|
3941
|
-
const tabsS = getOrInit("tabs", createTabsStyles);
|
|
3942
|
-
const checkboxS = getOrInit("checkbox", createCheckboxStyles);
|
|
3943
|
-
const switchS = getOrInit("switch", createSwitchStyles);
|
|
3944
|
-
const popoverS = getOrInit("popover", createPopoverStyles);
|
|
3945
|
-
const progressS = getOrInit("progress", createProgressStyles);
|
|
3946
|
-
const radioGroupS = getOrInit("radioGroup", createRadioGroupStyles);
|
|
3947
|
-
const sliderS = getOrInit("slider", createSliderStyles);
|
|
3948
|
-
const accordionS = getOrInit("accordion", createAccordionStyles);
|
|
3949
|
-
const toastS = getOrInit("toast", createToastStyles);
|
|
3950
|
-
const tooltipS = getOrInit("tooltip", createTooltipStyles);
|
|
3951
|
-
const sheetS = getOrInit("sheet", createSheetStyles);
|
|
3952
|
-
const calendarS = getOrInit("calendar", createCalendarStyles);
|
|
3953
|
-
const carouselS = getOrInit("carousel", createCarouselStyles);
|
|
3954
|
-
const collapsibleS = getOrInit("collapsible", createCollapsibleStyles);
|
|
3955
|
-
const commandS = getOrInit("command", createCommandStyles);
|
|
3956
|
-
const contextMenuS = getOrInit("contextMenu", createContextMenuStyles);
|
|
3957
|
-
const datePickerS = getOrInit("datePicker", createDatePickerStyles);
|
|
3958
|
-
const drawerS = getOrInit("drawer", createDrawerStyles);
|
|
3959
|
-
const hoverCardS = getOrInit("hoverCard", createHoverCardStyles);
|
|
3960
|
-
const listS = getOrInit("list", createListStyles);
|
|
3961
|
-
const menubarS = getOrInit("menubar", createMenubarStyles);
|
|
3962
|
-
const navigationMenuS = getOrInit("navigationMenu", createNavigationMenuStyles);
|
|
3963
|
-
const resizablePanelS = getOrInit("resizablePanel", createResizablePanelStyles);
|
|
3964
|
-
const scrollAreaS = getOrInit("scrollArea", createScrollAreaStyles);
|
|
3965
|
-
const toggleS = getOrInit("toggle", createToggleStyles);
|
|
3966
|
-
const toggleGroupS = getOrInit("toggleGroup", createToggleGroupStyles);
|
|
3967
|
-
const badgeColorInlineStyles = {
|
|
3968
|
-
blue: { backgroundColor: "oklch(0.55 0.15 250)", color: "#fff" },
|
|
3969
|
-
green: { backgroundColor: "oklch(0.55 0.15 155)", color: "#fff" },
|
|
3970
|
-
yellow: { backgroundColor: "oklch(0.75 0.15 85)", color: "oklch(0.25 0.05 85)" }
|
|
3971
|
-
};
|
|
3895
|
+
const components = {};
|
|
3896
|
+
function lazyComp(key, factory) {
|
|
3897
|
+
let cached;
|
|
3898
|
+
Object.defineProperty(components, key, {
|
|
3899
|
+
get() {
|
|
3900
|
+
if (cached === undefined)
|
|
3901
|
+
cached = factory();
|
|
3902
|
+
return cached;
|
|
3903
|
+
},
|
|
3904
|
+
enumerable: true,
|
|
3905
|
+
configurable: true
|
|
3906
|
+
});
|
|
3907
|
+
}
|
|
3908
|
+
lazyComp("Alert", () => {
|
|
3909
|
+
const alertS = styles.alert;
|
|
3972
3910
|
const DefaultAlert = withStyles19(ComposedAlert, {
|
|
3973
3911
|
root: alertS.root,
|
|
3974
3912
|
title: alertS.title,
|
|
@@ -3982,137 +3920,168 @@ function configureTheme(config) {
|
|
|
3982
3920
|
function ThemedAlert({ variant, ...rest }) {
|
|
3983
3921
|
return (variant === "destructive" ? DestructiveAlert : DefaultAlert)(rest);
|
|
3984
3922
|
}
|
|
3985
|
-
|
|
3923
|
+
return Object.assign(ThemedAlert, {
|
|
3986
3924
|
Title: ComposedAlert.Title,
|
|
3987
3925
|
Description: ComposedAlert.Description
|
|
3988
3926
|
});
|
|
3989
|
-
|
|
3990
|
-
|
|
3991
|
-
|
|
3992
|
-
|
|
3993
|
-
|
|
3994
|
-
|
|
3995
|
-
|
|
3996
|
-
|
|
3997
|
-
|
|
3998
|
-
|
|
3999
|
-
|
|
4000
|
-
link: breadcrumbS.link,
|
|
4001
|
-
page: breadcrumbS.page,
|
|
4002
|
-
separator: breadcrumbS.separator
|
|
4003
|
-
}),
|
|
4004
|
-
Card: withStyles19(ComposedCard, {
|
|
4005
|
-
root: cardS.root,
|
|
4006
|
-
header: cardS.header,
|
|
4007
|
-
title: cardS.title,
|
|
4008
|
-
description: cardS.description,
|
|
4009
|
-
content: cardS.content,
|
|
4010
|
-
footer: cardS.footer,
|
|
4011
|
-
action: cardS.action
|
|
4012
|
-
}),
|
|
4013
|
-
Input: withStyles19(ComposedInput, { base: inputS.base }),
|
|
4014
|
-
Textarea: withStyles19(ComposedTextarea, { base: textareaS.base }),
|
|
4015
|
-
Label: withStyles19(ComposedLabel, { base: labelS.base }),
|
|
4016
|
-
Pagination: (props) => ComposedPagination({
|
|
4017
|
-
...props,
|
|
4018
|
-
classes: {
|
|
4019
|
-
nav: paginationS.nav,
|
|
4020
|
-
list: paginationS.list,
|
|
4021
|
-
item: paginationS.item,
|
|
4022
|
-
link: paginationS.link,
|
|
4023
|
-
linkActive: paginationS.linkActive,
|
|
4024
|
-
navButton: paginationS.navButton,
|
|
4025
|
-
ellipsis: paginationS.ellipsis
|
|
4026
|
-
}
|
|
4027
|
-
}),
|
|
4028
|
-
Separator: withStyles19(ComposedSeparator, {
|
|
4029
|
-
base: separatorS.base,
|
|
4030
|
-
horizontal: separatorS.horizontal,
|
|
4031
|
-
vertical: separatorS.vertical
|
|
4032
|
-
}),
|
|
4033
|
-
FormGroup: withStyles19(ComposedFormGroup, {
|
|
4034
|
-
base: formGroupS.base,
|
|
4035
|
-
error: formGroupS.error
|
|
4036
|
-
}),
|
|
4037
|
-
Avatar: withStyles19(ComposedAvatar, {
|
|
4038
|
-
root: avatarS.root,
|
|
4039
|
-
image: avatarS.image,
|
|
4040
|
-
fallback: avatarS.fallback
|
|
4041
|
-
}),
|
|
4042
|
-
EmptyState: withStyles19(ComposedEmptyState, {
|
|
4043
|
-
root: emptyStateS.root,
|
|
4044
|
-
icon: emptyStateS.icon,
|
|
4045
|
-
title: emptyStateS.title,
|
|
4046
|
-
description: emptyStateS.description,
|
|
4047
|
-
action: emptyStateS.action
|
|
4048
|
-
}),
|
|
4049
|
-
Skeleton: Object.assign(withStyles19(ComposedSkeleton, { root: skeletonS.root }), {
|
|
4050
|
-
Text: withStyles19(ComposedSkeleton.Text, {
|
|
4051
|
-
root: skeletonS.textRoot,
|
|
4052
|
-
line: skeletonS.textLine
|
|
4053
|
-
}),
|
|
4054
|
-
Circle: withStyles19(ComposedSkeleton.Circle, {
|
|
4055
|
-
root: skeletonS.circleRoot
|
|
4056
|
-
})
|
|
4057
|
-
}),
|
|
4058
|
-
Table: withStyles19(ComposedTable, {
|
|
4059
|
-
root: tableS.root,
|
|
4060
|
-
header: tableS.header,
|
|
4061
|
-
body: tableS.body,
|
|
4062
|
-
row: tableS.row,
|
|
4063
|
-
head: tableS.head,
|
|
4064
|
-
cell: tableS.cell,
|
|
4065
|
-
caption: tableS.caption,
|
|
4066
|
-
footer: tableS.footer
|
|
4067
|
-
}),
|
|
4068
|
-
primitives: {
|
|
4069
|
-
Dialog: createThemedDialog(),
|
|
4070
|
-
DropdownMenu: createThemedDropdownMenu(dropdownMenuS),
|
|
4071
|
-
Select: createThemedSelect(selectS),
|
|
4072
|
-
Tabs: createThemedTabs(tabsS),
|
|
4073
|
-
Checkbox: createThemedCheckbox(checkboxS),
|
|
4074
|
-
Switch: createThemedSwitch(switchS),
|
|
4075
|
-
Popover: createThemedPopover(popoverS),
|
|
4076
|
-
Progress: createThemedProgress(progressS),
|
|
4077
|
-
RadioGroup: createThemedRadioGroup(radioGroupS),
|
|
4078
|
-
Slider: createThemedSlider(sliderS),
|
|
4079
|
-
Accordion: createThemedAccordion(accordionS),
|
|
4080
|
-
Toast: createThemedToast(toastS),
|
|
4081
|
-
Tooltip: createThemedTooltip(tooltipS),
|
|
4082
|
-
Sheet: createThemedSheet(sheetS),
|
|
4083
|
-
Calendar: createThemedCalendar(calendarS),
|
|
4084
|
-
Carousel: createThemedCarousel(carouselS),
|
|
4085
|
-
Collapsible: createThemedCollapsible(collapsibleS),
|
|
4086
|
-
Command: createThemedCommand(commandS),
|
|
4087
|
-
ContextMenu: createThemedContextMenu(contextMenuS),
|
|
4088
|
-
DatePicker: createThemedDatePicker(datePickerS, {
|
|
4089
|
-
...calendarS,
|
|
4090
|
-
root: calendarS.rootNoBorder
|
|
4091
|
-
}),
|
|
4092
|
-
Drawer: createThemedDrawer(drawerS),
|
|
4093
|
-
HoverCard: createThemedHoverCard(hoverCardS),
|
|
4094
|
-
List: createThemedList(listS),
|
|
4095
|
-
Menubar: createThemedMenubar(menubarS),
|
|
4096
|
-
NavigationMenu: createThemedNavigationMenu(navigationMenuS),
|
|
4097
|
-
ResizablePanel: createThemedResizablePanel(resizablePanelS),
|
|
4098
|
-
ScrollArea: createThemedScrollArea(scrollAreaS),
|
|
4099
|
-
Toggle: createThemedToggle(toggleS),
|
|
4100
|
-
ToggleGroup: createThemedToggleGroup(toggleGroupS)
|
|
4101
|
-
}
|
|
3927
|
+
});
|
|
3928
|
+
lazyComp("Button", () => {
|
|
3929
|
+
const buttonS = styles.button;
|
|
3930
|
+
return ({ intent, size, ...rest }) => ComposedButton({ ...rest, classes: { base: buttonS({ intent, size }) } });
|
|
3931
|
+
});
|
|
3932
|
+
lazyComp("Badge", () => {
|
|
3933
|
+
const badgeS = styles.badge;
|
|
3934
|
+
const badgeColorInlineStyles = {
|
|
3935
|
+
blue: { backgroundColor: "oklch(0.55 0.15 250)", color: "#fff" },
|
|
3936
|
+
green: { backgroundColor: "oklch(0.55 0.15 155)", color: "#fff" },
|
|
3937
|
+
yellow: { backgroundColor: "oklch(0.75 0.15 85)", color: "oklch(0.25 0.05 85)" }
|
|
4102
3938
|
};
|
|
4103
|
-
|
|
4104
|
-
|
|
4105
|
-
|
|
4106
|
-
|
|
4107
|
-
|
|
4108
|
-
|
|
3939
|
+
return ({ color, ...rest }) => {
|
|
3940
|
+
const style = color ? badgeColorInlineStyles[color] : undefined;
|
|
3941
|
+
return ComposedBadge({ ...rest, classes: { base: badgeS({ color }) }, style });
|
|
3942
|
+
};
|
|
3943
|
+
});
|
|
3944
|
+
lazyComp("Breadcrumb", () => {
|
|
3945
|
+
const s = styles.breadcrumb;
|
|
3946
|
+
return withStyles19(ComposedBreadcrumb, {
|
|
3947
|
+
nav: s.nav,
|
|
3948
|
+
list: s.list,
|
|
3949
|
+
item: s.item,
|
|
3950
|
+
link: s.link,
|
|
3951
|
+
page: s.page,
|
|
3952
|
+
separator: s.separator
|
|
3953
|
+
});
|
|
3954
|
+
});
|
|
3955
|
+
lazyComp("Card", () => {
|
|
3956
|
+
const s = styles.card;
|
|
3957
|
+
return withStyles19(ComposedCard, {
|
|
3958
|
+
root: s.root,
|
|
3959
|
+
header: s.header,
|
|
3960
|
+
title: s.title,
|
|
3961
|
+
description: s.description,
|
|
3962
|
+
content: s.content,
|
|
3963
|
+
footer: s.footer,
|
|
3964
|
+
action: s.action
|
|
3965
|
+
});
|
|
3966
|
+
});
|
|
3967
|
+
lazyComp("Input", () => withStyles19(ComposedInput, { base: styles.input.base }));
|
|
3968
|
+
lazyComp("Textarea", () => withStyles19(ComposedTextarea, { base: styles.textarea.base }));
|
|
3969
|
+
lazyComp("Label", () => withStyles19(ComposedLabel, { base: styles.label.base }));
|
|
3970
|
+
lazyComp("Pagination", () => {
|
|
3971
|
+
const s = styles.pagination;
|
|
3972
|
+
return (props) => ComposedPagination({
|
|
3973
|
+
...props,
|
|
3974
|
+
classes: {
|
|
3975
|
+
nav: s.nav,
|
|
3976
|
+
list: s.list,
|
|
3977
|
+
item: s.item,
|
|
3978
|
+
link: s.link,
|
|
3979
|
+
linkActive: s.linkActive,
|
|
3980
|
+
navButton: s.navButton,
|
|
3981
|
+
ellipsis: s.ellipsis
|
|
4109
3982
|
}
|
|
4110
|
-
|
|
4111
|
-
|
|
3983
|
+
});
|
|
3984
|
+
});
|
|
3985
|
+
lazyComp("Separator", () => {
|
|
3986
|
+
const s = styles.separator;
|
|
3987
|
+
return withStyles19(ComposedSeparator, {
|
|
3988
|
+
base: s.base,
|
|
3989
|
+
horizontal: s.horizontal,
|
|
3990
|
+
vertical: s.vertical
|
|
3991
|
+
});
|
|
3992
|
+
});
|
|
3993
|
+
lazyComp("FormGroup", () => {
|
|
3994
|
+
const s = styles.formGroup;
|
|
3995
|
+
return withStyles19(ComposedFormGroup, { base: s.base, error: s.error });
|
|
3996
|
+
});
|
|
3997
|
+
lazyComp("Avatar", () => {
|
|
3998
|
+
const s = styles.avatar;
|
|
3999
|
+
return withStyles19(ComposedAvatar, { root: s.root, image: s.image, fallback: s.fallback });
|
|
4000
|
+
});
|
|
4001
|
+
lazyComp("EmptyState", () => {
|
|
4002
|
+
const s = styles.emptyState;
|
|
4003
|
+
return withStyles19(ComposedEmptyState, {
|
|
4004
|
+
root: s.root,
|
|
4005
|
+
icon: s.icon,
|
|
4006
|
+
title: s.title,
|
|
4007
|
+
description: s.description,
|
|
4008
|
+
action: s.action
|
|
4009
|
+
});
|
|
4010
|
+
});
|
|
4011
|
+
lazyComp("Skeleton", () => {
|
|
4012
|
+
const s = styles.skeleton;
|
|
4013
|
+
return Object.assign(withStyles19(ComposedSkeleton, { root: s.root }), {
|
|
4014
|
+
Text: withStyles19(ComposedSkeleton.Text, { root: s.textRoot, line: s.textLine }),
|
|
4015
|
+
Circle: withStyles19(ComposedSkeleton.Circle, { root: s.circleRoot })
|
|
4016
|
+
});
|
|
4017
|
+
});
|
|
4018
|
+
lazyComp("Table", () => {
|
|
4019
|
+
const s = styles.table;
|
|
4020
|
+
return withStyles19(ComposedTable, {
|
|
4021
|
+
root: s.root,
|
|
4022
|
+
header: s.header,
|
|
4023
|
+
body: s.body,
|
|
4024
|
+
row: s.row,
|
|
4025
|
+
head: s.head,
|
|
4026
|
+
cell: s.cell,
|
|
4027
|
+
caption: s.caption,
|
|
4028
|
+
footer: s.footer
|
|
4029
|
+
});
|
|
4030
|
+
});
|
|
4031
|
+
const primitives = {};
|
|
4032
|
+
function lazyPrim(key, factory) {
|
|
4033
|
+
let cached;
|
|
4034
|
+
Object.defineProperty(primitives, key, {
|
|
4035
|
+
get() {
|
|
4036
|
+
if (cached === undefined)
|
|
4037
|
+
cached = factory();
|
|
4038
|
+
return cached;
|
|
4039
|
+
},
|
|
4040
|
+
enumerable: true,
|
|
4041
|
+
configurable: true
|
|
4042
|
+
});
|
|
4043
|
+
}
|
|
4044
|
+
lazyPrim("Dialog", () => createThemedDialog());
|
|
4045
|
+
lazyPrim("DropdownMenu", () => createThemedDropdownMenu(styles.dropdownMenu));
|
|
4046
|
+
lazyPrim("Select", () => createThemedSelect(styles.select));
|
|
4047
|
+
lazyPrim("Tabs", () => createThemedTabs(styles.tabs));
|
|
4048
|
+
lazyPrim("Checkbox", () => createThemedCheckbox(styles.checkbox));
|
|
4049
|
+
lazyPrim("Switch", () => createThemedSwitch(styles.switch));
|
|
4050
|
+
lazyPrim("Popover", () => createThemedPopover(styles.popover));
|
|
4051
|
+
lazyPrim("Progress", () => createThemedProgress(styles.progress));
|
|
4052
|
+
lazyPrim("RadioGroup", () => createThemedRadioGroup(styles.radioGroup));
|
|
4053
|
+
lazyPrim("Slider", () => createThemedSlider(styles.slider));
|
|
4054
|
+
lazyPrim("Accordion", () => createThemedAccordion(styles.accordion));
|
|
4055
|
+
lazyPrim("Toast", () => createThemedToast(styles.toast));
|
|
4056
|
+
lazyPrim("Tooltip", () => createThemedTooltip(styles.tooltip));
|
|
4057
|
+
lazyPrim("Sheet", () => createThemedSheet(styles.sheet));
|
|
4058
|
+
lazyPrim("Calendar", () => createThemedCalendar(styles.calendar));
|
|
4059
|
+
lazyPrim("Carousel", () => createThemedCarousel(styles.carousel));
|
|
4060
|
+
lazyPrim("Collapsible", () => createThemedCollapsible(styles.collapsible));
|
|
4061
|
+
lazyPrim("Command", () => createThemedCommand(styles.command));
|
|
4062
|
+
lazyPrim("ContextMenu", () => createThemedContextMenu(styles.contextMenu));
|
|
4063
|
+
lazyPrim("DatePicker", () => {
|
|
4064
|
+
const calendarS = styles.calendar;
|
|
4065
|
+
return createThemedDatePicker(styles.datePicker, {
|
|
4066
|
+
...calendarS,
|
|
4067
|
+
root: calendarS.rootNoBorder
|
|
4068
|
+
});
|
|
4069
|
+
});
|
|
4070
|
+
lazyPrim("Drawer", () => createThemedDrawer(styles.drawer));
|
|
4071
|
+
lazyPrim("HoverCard", () => createThemedHoverCard(styles.hoverCard));
|
|
4072
|
+
lazyPrim("List", () => createThemedList(styles.list));
|
|
4073
|
+
lazyPrim("Menubar", () => createThemedMenubar(styles.menubar));
|
|
4074
|
+
lazyPrim("NavigationMenu", () => createThemedNavigationMenu(styles.navigationMenu));
|
|
4075
|
+
lazyPrim("ResizablePanel", () => createThemedResizablePanel(styles.resizablePanel));
|
|
4076
|
+
lazyPrim("ScrollArea", () => createThemedScrollArea(styles.scrollArea));
|
|
4077
|
+
lazyPrim("Toggle", () => createThemedToggle(styles.toggle));
|
|
4078
|
+
lazyPrim("ToggleGroup", () => createThemedToggleGroup(styles.toggleGroup));
|
|
4079
|
+
Object.defineProperty(components, "primitives", {
|
|
4080
|
+
value: primitives,
|
|
4112
4081
|
enumerable: true,
|
|
4113
4082
|
configurable: true
|
|
4114
4083
|
});
|
|
4115
|
-
return
|
|
4084
|
+
return { theme, globals, styles, components };
|
|
4116
4085
|
}
|
|
4117
4086
|
export {
|
|
4118
4087
|
palettes,
|
|
@@ -2,17 +2,17 @@
|
|
|
2
2
|
import { defineTheme, globalCss } from "@vertz/ui";
|
|
3
3
|
|
|
4
4
|
// src/merge.ts
|
|
5
|
-
function deepMergeTokens(base,
|
|
5
|
+
function deepMergeTokens(base, colors) {
|
|
6
6
|
const result = {};
|
|
7
7
|
for (const [key, values] of Object.entries(base)) {
|
|
8
|
-
const override =
|
|
8
|
+
const override = colors[key];
|
|
9
9
|
if (override) {
|
|
10
10
|
result[key] = { ...values, ...override };
|
|
11
11
|
} else {
|
|
12
12
|
result[key] = { ...values };
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
|
-
for (const [key, values] of Object.entries(
|
|
15
|
+
for (const [key, values] of Object.entries(colors)) {
|
|
16
16
|
if (!(key in result) && values) {
|
|
17
17
|
result[key] = { ...values };
|
|
18
18
|
}
|
|
@@ -356,7 +356,7 @@ function configureThemeBase(config) {
|
|
|
356
356
|
const palette = config?.palette ?? "zinc";
|
|
357
357
|
const radius = config?.radius ?? "md";
|
|
358
358
|
const baseTokens = palettes[palette];
|
|
359
|
-
const colorOverrides = config?.
|
|
359
|
+
const colorOverrides = config?.colors ?? {};
|
|
360
360
|
const mergedTokens = deepMergeTokens(baseTokens, colorOverrides);
|
|
361
361
|
const theme = defineTheme({ colors: mergedTokens });
|
|
362
362
|
const globals = globalCss({
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vertz/theme-shadcn",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.42",
|
|
4
4
|
"description": "Shadcn-inspired theme for Vertz — pre-built style definitions using variants() and css()",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -40,12 +40,12 @@
|
|
|
40
40
|
"typecheck": "tsc --noEmit"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@vertz/ui": "^0.2.
|
|
44
|
-
"@vertz/ui-primitives": "^0.2.
|
|
43
|
+
"@vertz/ui": "^0.2.41",
|
|
44
|
+
"@vertz/ui-primitives": "^0.2.41"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@happy-dom/global-registrator": "^20.7.0",
|
|
48
|
-
"@vertz/ui-
|
|
48
|
+
"@vertz/ui-server": "^0.2.41",
|
|
49
49
|
"bunup": "^0.16.31",
|
|
50
50
|
"happy-dom": "^20.7.0",
|
|
51
51
|
"typescript": "^5.7.0"
|