@vertz/theme-shadcn 0.2.38 → 0.2.41

package/dist/base.d.ts

@@ -17,12 +17,11 @@ interface ThemeConfig {
 	radius?: "sm" | "md" | "lg";
 	/** Visual style preset. Default: 'nova'. */
 	style?: ThemeStyle;
-	/** Token overrides — deep-merged into the selected palette. */
-	overrides?: {
-		tokens?: {
-			colors?: Record<string, Record<string, string> | undefined>;
-		};
-	};
+	/**
+	* Color token overrides — deep-merged into the selected palette.
+	* @example colors: { primary: { DEFAULT: 'oklch(0.55 0.2 260)', _dark: 'oklch(0.65 0.25 260)' } }
+	*/
+	colors?: Record<string, Record<string, string> | undefined>;
 }
 /** Return type of configureThemeBase(). */
 interface ResolvedThemeBase {

package/dist/base.js

@@ -1,7 +1,7 @@
 import {
   RADIUS_VALUES,
   configureThemeBase
-} from "./shared/chunk-f0wk9320.js";
+} from "./shared/chunk-58ghrcqw.js";
 export {
   configureThemeBase,
   RADIUS_VALUES

package/dist/index.d.ts

@@ -20,12 +20,11 @@ interface ThemeConfig {
 	radius?: "sm" | "md" | "lg";
 	/** Visual style preset. Default: 'nova'. */
 	style?: ThemeStyle;
-	/** Token overrides — deep-merged into the selected palette. */
-	overrides?: {
-		tokens?: {
-			colors?: Record<string, Record<string, string> | undefined>;
-		};
-	};
+	/**
+	* Color token overrides — deep-merged into the selected palette.
+	* @example colors: { primary: { DEFAULT: 'oklch(0.55 0.2 260)', _dark: 'oklch(0.65 0.25 260)' } }
+	*/
+	colors?: Record<string, Record<string, string> | undefined>;
 }
 /** Return type of configureThemeBase(). */
 interface ResolvedThemeBase {
@@ -1212,7 +1211,7 @@ interface ResolvedTheme extends ResolvedThemeBase {
 /**
 * Configure the shadcn theme.
 *
-* Single entry point — selects palette, applies overrides, builds globals, styles, and components.
+* Single entry point — selects palette, applies color overrides, builds globals, styles, and components.
 *
 * For a lightweight alternative that only returns `{ theme, globals }` without
 * component styles, use `configureThemeBase()` from `@vertz/theme-shadcn/base`.

package/dist/index.js

@@ -10,7 +10,7 @@ import {
   RADIUS_VALUES,
   configureThemeBase,
   palettes
-} from "./shared/chunk-f0wk9320.js";
+} from "./shared/chunk-58ghrcqw.js";
 // src/configure.ts
 import { injectCSS as injectCSS2 } from "@vertz/ui";
 import {
@@ -3864,11 +3864,11 @@ function configureTheme(config) {
   function defineLazyStyle(key, factory) {
     Object.defineProperty(styles, key, {
       get() {
-        const result2 = getOrInit(key, factory);
-        const cssText = result2.css;
+        const result = getOrInit(key, factory);
+        const cssText = result.css;
         if (cssText)
           injectCSS2(cssText);
-        return result2;
+        return result;
       },
       enumerable: true,
       configurable: true
@@ -3919,56 +3919,21 @@ function configureTheme(config) {
   defineLazyStyle("scrollArea", createScrollAreaStyles);
   defineLazyStyle("toggle", createToggleStyles);
   defineLazyStyle("toggleGroup", createToggleGroupStyles);
-  let cachedComponents;
-  function buildComponents() {
-    const alertS = getOrInit("alert", createAlertStyles);
-    const buttonS = getOrInit("button", createButton);
-    const badgeS = getOrInit("badge", createBadge);
-    const cardS = getOrInit("card", createCard);
-    const inputS = getOrInit("input", createInput);
-    const textareaS = getOrInit("textarea", createTextarea);
-    const labelS = getOrInit("label", createLabel);
-    const separatorS = getOrInit("separator", createSeparator);
-    const formGroupS = getOrInit("formGroup", createFormGroup);
-    const breadcrumbS = getOrInit("breadcrumb", createBreadcrumbStyles);
-    const paginationS = getOrInit("pagination", createPaginationStyles);
-    const avatarS = getOrInit("avatar", createAvatarStyles);
-    const emptyStateS = getOrInit("emptyState", createEmptyStateStyles);
-    const skeletonS = getOrInit("skeleton", createSkeletonStyles);
-    const tableS = getOrInit("table", createTableStyles);
-    const dropdownMenuS = getOrInit("dropdownMenu", createDropdownMenuStyles);
-    const selectS = getOrInit("select", createSelectStyles);
-    const tabsS = getOrInit("tabs", createTabsStyles);
-    const checkboxS = getOrInit("checkbox", createCheckboxStyles);
-    const switchS = getOrInit("switch", createSwitchStyles);
-    const popoverS = getOrInit("popover", createPopoverStyles);
-    const progressS = getOrInit("progress", createProgressStyles);
-    const radioGroupS = getOrInit("radioGroup", createRadioGroupStyles);
-    const sliderS = getOrInit("slider", createSliderStyles);
-    const accordionS = getOrInit("accordion", createAccordionStyles);
-    const toastS = getOrInit("toast", createToastStyles);
-    const tooltipS = getOrInit("tooltip", createTooltipStyles);
-    const sheetS = getOrInit("sheet", createSheetStyles);
-    const calendarS = getOrInit("calendar", createCalendarStyles);
-    const carouselS = getOrInit("carousel", createCarouselStyles);
-    const collapsibleS = getOrInit("collapsible", createCollapsibleStyles);
-    const commandS = getOrInit("command", createCommandStyles);
-    const contextMenuS = getOrInit("contextMenu", createContextMenuStyles);
-    const datePickerS = getOrInit("datePicker", createDatePickerStyles);
-    const drawerS = getOrInit("drawer", createDrawerStyles);
-    const hoverCardS = getOrInit("hoverCard", createHoverCardStyles);
-    const listS = getOrInit("list", createListStyles);
-    const menubarS = getOrInit("menubar", createMenubarStyles);
-    const navigationMenuS = getOrInit("navigationMenu", createNavigationMenuStyles);
-    const resizablePanelS = getOrInit("resizablePanel", createResizablePanelStyles);
-    const scrollAreaS = getOrInit("scrollArea", createScrollAreaStyles);
-    const toggleS = getOrInit("toggle", createToggleStyles);
-    const toggleGroupS = getOrInit("toggleGroup", createToggleGroupStyles);
-    const badgeColorInlineStyles = {
-      blue: { backgroundColor: "oklch(0.55 0.15 250)", color: "#fff" },
-      green: { backgroundColor: "oklch(0.55 0.15 155)", color: "#fff" },
-      yellow: { backgroundColor: "oklch(0.75 0.15 85)", color: "oklch(0.25 0.05 85)" }
-    };
+  const components = {};
+  function lazyComp(key, factory) {
+    let cached;
+    Object.defineProperty(components, key, {
+      get() {
+        if (cached === undefined)
+          cached = factory();
+        return cached;
+      },
+      enumerable: true,
+      configurable: true
+    });
+  }
+  lazyComp("Alert", () => {
+    const alertS = styles.alert;
     const DefaultAlert = withStyles19(ComposedAlert, {
       root: alertS.root,
       title: alertS.title,
@@ -3982,137 +3947,168 @@ function configureTheme(config) {
     function ThemedAlert({ variant, ...rest }) {
       return (variant === "destructive" ? DestructiveAlert : DefaultAlert)(rest);
     }
-    const Alert = Object.assign(ThemedAlert, {
+    return Object.assign(ThemedAlert, {
       Title: ComposedAlert.Title,
       Description: ComposedAlert.Description
     });
-    return {
-      Alert,
-      Button: ({ intent, size, ...rest }) => ComposedButton({ ...rest, classes: { base: buttonS({ intent, size }) } }),
-      Badge: ({ color, ...rest }) => {
-        const style = color ? badgeColorInlineStyles[color] : undefined;
-        return ComposedBadge({ ...rest, classes: { base: badgeS({ color }) }, style });
-      },
-      Breadcrumb: withStyles19(ComposedBreadcrumb, {
-        nav: breadcrumbS.nav,
-        list: breadcrumbS.list,
-        item: breadcrumbS.item,
-        link: breadcrumbS.link,
-        page: breadcrumbS.page,
-        separator: breadcrumbS.separator
-      }),
-      Card: withStyles19(ComposedCard, {
-        root: cardS.root,
-        header: cardS.header,
-        title: cardS.title,
-        description: cardS.description,
-        content: cardS.content,
-        footer: cardS.footer,
-        action: cardS.action
-      }),
-      Input: withStyles19(ComposedInput, { base: inputS.base }),
-      Textarea: withStyles19(ComposedTextarea, { base: textareaS.base }),
-      Label: withStyles19(ComposedLabel, { base: labelS.base }),
-      Pagination: (props) => ComposedPagination({
-        ...props,
-        classes: {
-          nav: paginationS.nav,
-          list: paginationS.list,
-          item: paginationS.item,
-          link: paginationS.link,
-          linkActive: paginationS.linkActive,
-          navButton: paginationS.navButton,
-          ellipsis: paginationS.ellipsis
-        }
-      }),
-      Separator: withStyles19(ComposedSeparator, {
-        base: separatorS.base,
-        horizontal: separatorS.horizontal,
-        vertical: separatorS.vertical
-      }),
-      FormGroup: withStyles19(ComposedFormGroup, {
-        base: formGroupS.base,
-        error: formGroupS.error
-      }),
-      Avatar: withStyles19(ComposedAvatar, {
-        root: avatarS.root,
-        image: avatarS.image,
-        fallback: avatarS.fallback
-      }),
-      EmptyState: withStyles19(ComposedEmptyState, {
-        root: emptyStateS.root,
-        icon: emptyStateS.icon,
-        title: emptyStateS.title,
-        description: emptyStateS.description,
-        action: emptyStateS.action
-      }),
-      Skeleton: Object.assign(withStyles19(ComposedSkeleton, { root: skeletonS.root }), {
-        Text: withStyles19(ComposedSkeleton.Text, {
-          root: skeletonS.textRoot,
-          line: skeletonS.textLine
-        }),
-        Circle: withStyles19(ComposedSkeleton.Circle, {
-          root: skeletonS.circleRoot
-        })
-      }),
-      Table: withStyles19(ComposedTable, {
-        root: tableS.root,
-        header: tableS.header,
-        body: tableS.body,
-        row: tableS.row,
-        head: tableS.head,
-        cell: tableS.cell,
-        caption: tableS.caption,
-        footer: tableS.footer
-      }),
-      primitives: {
-        Dialog: createThemedDialog(),
-        DropdownMenu: createThemedDropdownMenu(dropdownMenuS),
-        Select: createThemedSelect(selectS),
-        Tabs: createThemedTabs(tabsS),
-        Checkbox: createThemedCheckbox(checkboxS),
-        Switch: createThemedSwitch(switchS),
-        Popover: createThemedPopover(popoverS),
-        Progress: createThemedProgress(progressS),
-        RadioGroup: createThemedRadioGroup(radioGroupS),
-        Slider: createThemedSlider(sliderS),
-        Accordion: createThemedAccordion(accordionS),
-        Toast: createThemedToast(toastS),
-        Tooltip: createThemedTooltip(tooltipS),
-        Sheet: createThemedSheet(sheetS),
-        Calendar: createThemedCalendar(calendarS),
-        Carousel: createThemedCarousel(carouselS),
-        Collapsible: createThemedCollapsible(collapsibleS),
-        Command: createThemedCommand(commandS),
-        ContextMenu: createThemedContextMenu(contextMenuS),
-        DatePicker: createThemedDatePicker(datePickerS, {
-          ...calendarS,
-          root: calendarS.rootNoBorder
-        }),
-        Drawer: createThemedDrawer(drawerS),
-        HoverCard: createThemedHoverCard(hoverCardS),
-        List: createThemedList(listS),
-        Menubar: createThemedMenubar(menubarS),
-        NavigationMenu: createThemedNavigationMenu(navigationMenuS),
-        ResizablePanel: createThemedResizablePanel(resizablePanelS),
-        ScrollArea: createThemedScrollArea(scrollAreaS),
-        Toggle: createThemedToggle(toggleS),
-        ToggleGroup: createThemedToggleGroup(toggleGroupS)
-      }
+  });
+  lazyComp("Button", () => {
+    const buttonS = styles.button;
+    return ({ intent, size, ...rest }) => ComposedButton({ ...rest, classes: { base: buttonS({ intent, size }) } });
+  });
+  lazyComp("Badge", () => {
+    const badgeS = styles.badge;
+    const badgeColorInlineStyles = {
+      blue: { backgroundColor: "oklch(0.55 0.15 250)", color: "#fff" },
+      green: { backgroundColor: "oklch(0.55 0.15 155)", color: "#fff" },
+      yellow: { backgroundColor: "oklch(0.75 0.15 85)", color: "oklch(0.25 0.05 85)" }
     };
-  }
-  const result = { theme, globals, styles };
-  Object.defineProperty(result, "components", {
-    get() {
-      if (cachedComponents === undefined) {
-        cachedComponents = buildComponents();
+    return ({ color, ...rest }) => {
+      const style = color ? badgeColorInlineStyles[color] : undefined;
+      return ComposedBadge({ ...rest, classes: { base: badgeS({ color }) }, style });
+    };
+  });
+  lazyComp("Breadcrumb", () => {
+    const s = styles.breadcrumb;
+    return withStyles19(ComposedBreadcrumb, {
+      nav: s.nav,
+      list: s.list,
+      item: s.item,
+      link: s.link,
+      page: s.page,
+      separator: s.separator
+    });
+  });
+  lazyComp("Card", () => {
+    const s = styles.card;
+    return withStyles19(ComposedCard, {
+      root: s.root,
+      header: s.header,
+      title: s.title,
+      description: s.description,
+      content: s.content,
+      footer: s.footer,
+      action: s.action
+    });
+  });
+  lazyComp("Input", () => withStyles19(ComposedInput, { base: styles.input.base }));
+  lazyComp("Textarea", () => withStyles19(ComposedTextarea, { base: styles.textarea.base }));
+  lazyComp("Label", () => withStyles19(ComposedLabel, { base: styles.label.base }));
+  lazyComp("Pagination", () => {
+    const s = styles.pagination;
+    return (props) => ComposedPagination({
+      ...props,
+      classes: {
+        nav: s.nav,
+        list: s.list,
+        item: s.item,
+        link: s.link,
+        linkActive: s.linkActive,
+        navButton: s.navButton,
+        ellipsis: s.ellipsis
       }
-      return cachedComponents;
-    },
+    });
+  });
+  lazyComp("Separator", () => {
+    const s = styles.separator;
+    return withStyles19(ComposedSeparator, {
+      base: s.base,
+      horizontal: s.horizontal,
+      vertical: s.vertical
+    });
+  });
+  lazyComp("FormGroup", () => {
+    const s = styles.formGroup;
+    return withStyles19(ComposedFormGroup, { base: s.base, error: s.error });
+  });
+  lazyComp("Avatar", () => {
+    const s = styles.avatar;
+    return withStyles19(ComposedAvatar, { root: s.root, image: s.image, fallback: s.fallback });
+  });
+  lazyComp("EmptyState", () => {
+    const s = styles.emptyState;
+    return withStyles19(ComposedEmptyState, {
+      root: s.root,
+      icon: s.icon,
+      title: s.title,
+      description: s.description,
+      action: s.action
+    });
+  });
+  lazyComp("Skeleton", () => {
+    const s = styles.skeleton;
+    return Object.assign(withStyles19(ComposedSkeleton, { root: s.root }), {
+      Text: withStyles19(ComposedSkeleton.Text, { root: s.textRoot, line: s.textLine }),
+      Circle: withStyles19(ComposedSkeleton.Circle, { root: s.circleRoot })
+    });
+  });
+  lazyComp("Table", () => {
+    const s = styles.table;
+    return withStyles19(ComposedTable, {
+      root: s.root,
+      header: s.header,
+      body: s.body,
+      row: s.row,
+      head: s.head,
+      cell: s.cell,
+      caption: s.caption,
+      footer: s.footer
+    });
+  });
+  const primitives = {};
+  function lazyPrim(key, factory) {
+    let cached;
+    Object.defineProperty(primitives, key, {
+      get() {
+        if (cached === undefined)
+          cached = factory();
+        return cached;
+      },
+      enumerable: true,
+      configurable: true
+    });
+  }
+  lazyPrim("Dialog", () => createThemedDialog());
+  lazyPrim("DropdownMenu", () => createThemedDropdownMenu(styles.dropdownMenu));
+  lazyPrim("Select", () => createThemedSelect(styles.select));
+  lazyPrim("Tabs", () => createThemedTabs(styles.tabs));
+  lazyPrim("Checkbox", () => createThemedCheckbox(styles.checkbox));
+  lazyPrim("Switch", () => createThemedSwitch(styles.switch));
+  lazyPrim("Popover", () => createThemedPopover(styles.popover));
+  lazyPrim("Progress", () => createThemedProgress(styles.progress));
+  lazyPrim("RadioGroup", () => createThemedRadioGroup(styles.radioGroup));
+  lazyPrim("Slider", () => createThemedSlider(styles.slider));
+  lazyPrim("Accordion", () => createThemedAccordion(styles.accordion));
+  lazyPrim("Toast", () => createThemedToast(styles.toast));
+  lazyPrim("Tooltip", () => createThemedTooltip(styles.tooltip));
+  lazyPrim("Sheet", () => createThemedSheet(styles.sheet));
+  lazyPrim("Calendar", () => createThemedCalendar(styles.calendar));
+  lazyPrim("Carousel", () => createThemedCarousel(styles.carousel));
+  lazyPrim("Collapsible", () => createThemedCollapsible(styles.collapsible));
+  lazyPrim("Command", () => createThemedCommand(styles.command));
+  lazyPrim("ContextMenu", () => createThemedContextMenu(styles.contextMenu));
+  lazyPrim("DatePicker", () => {
+    const calendarS = styles.calendar;
+    return createThemedDatePicker(styles.datePicker, {
+      ...calendarS,
+      root: calendarS.rootNoBorder
+    });
+  });
+  lazyPrim("Drawer", () => createThemedDrawer(styles.drawer));
+  lazyPrim("HoverCard", () => createThemedHoverCard(styles.hoverCard));
+  lazyPrim("List", () => createThemedList(styles.list));
+  lazyPrim("Menubar", () => createThemedMenubar(styles.menubar));
+  lazyPrim("NavigationMenu", () => createThemedNavigationMenu(styles.navigationMenu));
+  lazyPrim("ResizablePanel", () => createThemedResizablePanel(styles.resizablePanel));
+  lazyPrim("ScrollArea", () => createThemedScrollArea(styles.scrollArea));
+  lazyPrim("Toggle", () => createThemedToggle(styles.toggle));
+  lazyPrim("ToggleGroup", () => createThemedToggleGroup(styles.toggleGroup));
+  Object.defineProperty(components, "primitives", {
+    value: primitives,
     enumerable: true,
     configurable: true
   });
-  return result;
+  return { theme, globals, styles, components };
 }
 export {
   palettes,

package/dist/shared/{chunk-f0wk9320.js → chunk-58ghrcqw.js}

@@ -2,17 +2,17 @@
 import { defineTheme, globalCss } from "@vertz/ui";
 
 // src/merge.ts
-function deepMergeTokens(base, overrides) {
+function deepMergeTokens(base, colors) {
   const result = {};
   for (const [key, values] of Object.entries(base)) {
-    const override = overrides[key];
+    const override = colors[key];
     if (override) {
       result[key] = { ...values, ...override };
     } else {
       result[key] = { ...values };
     }
   }
-  for (const [key, values] of Object.entries(overrides)) {
+  for (const [key, values] of Object.entries(colors)) {
     if (!(key in result) && values) {
       result[key] = { ...values };
     }
@@ -356,7 +356,7 @@ function configureThemeBase(config) {
   const palette = config?.palette ?? "zinc";
   const radius = config?.radius ?? "md";
   const baseTokens = palettes[palette];
-  const colorOverrides = config?.overrides?.tokens?.colors ?? {};
+  const colorOverrides = config?.colors ?? {};
   const mergedTokens = deepMergeTokens(baseTokens, colorOverrides);
   const theme = defineTheme({ colors: mergedTokens });
   const globals = globalCss({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertz/theme-shadcn",
-  "version": "0.2.38",
+  "version": "0.2.41",
   "description": "Shadcn-inspired theme for Vertz — pre-built style definitions using variants() and css()",
   "license": "MIT",
   "repository": {
@@ -40,12 +40,12 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@vertz/ui": "^0.2.35",
-    "@vertz/ui-primitives": "^0.2.35"
+    "@vertz/ui": "^0.2.39",
+    "@vertz/ui-primitives": "^0.2.39"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.7.0",
-    "@vertz/ui-compiler": "^0.2.35",
+    "@vertz/ui-compiler": "^0.2.39",
     "bunup": "^0.16.31",
     "happy-dom": "^20.7.0",
     "typescript": "^5.7.0"