@vertz/theme-shadcn 0.2.36 → 0.2.37

package/dist/index.js

@@ -12,6 +12,7 @@ import {
   palettes
 } from "./shared/chunk-f0wk9320.js";
 // src/configure.ts
+import { injectCSS as injectCSS2 } from "@vertz/ui";
 import {
   ComposedAlert,
   ComposedAvatar,
@@ -3850,234 +3851,268 @@ function createTooltipStyles() {
 // src/configure.ts
 function configureTheme(config) {
   const { theme, globals } = configureThemeBase(config);
-  const buttonStyles = createButton();
-  const badgeStyles = createBadge();
-  const cardStyles = createCard();
-  const inputStyles = createInput();
-  const labelStyles = createLabel();
-  const separatorStyles = createSeparator();
-  const formGroupStyles = createFormGroup();
-  const dialogStyles = createDialogStyles();
   createDialogGlobalStyles();
-  const dropdownMenuStyles = createDropdownMenuStyles();
-  const selectStyles = createSelectStyles();
-  const tabsStyles = createTabsStyles();
-  const checkboxStyles = createCheckboxStyles();
-  const switchStyles = createSwitchStyles();
-  const popoverStyles = createPopoverStyles();
-  const progressStyles = createProgressStyles();
-  const radioGroupStyles = createRadioGroupStyles();
-  const sliderStyles = createSliderStyles();
-  const alertStyles = createAlertStyles();
-  const accordionStyles = createAccordionStyles();
-  const textareaStyles = createTextarea();
-  const toastStyles = createToastStyles();
-  const tooltipStyles = createTooltipStyles();
-  const avatarStyles = createAvatarStyles();
-  const emptyStateStyles = createEmptyStateStyles();
-  const skeletonStyles = createSkeletonStyles();
-  const tableStyles = createTableStyles();
-  const sheetStyles = createSheetStyles();
-  const breadcrumbStyles = createBreadcrumbStyles();
-  const calendarStyles = createCalendarStyles();
-  const carouselStyles = createCarouselStyles();
-  const collapsibleStyles = createCollapsibleStyles();
-  const commandStyles = createCommandStyles();
-  const contextMenuStyles = createContextMenuStyles();
-  const datePickerStyles = createDatePickerStyles();
-  const drawerStyles = createDrawerStyles();
-  const hoverCardStyles = createHoverCardStyles();
-  const listStyles = createListStyles();
-  const menubarStyles = createMenubarStyles();
-  const navigationMenuStyles = createNavigationMenuStyles();
-  const paginationStyles = createPaginationStyles();
-  const resizablePanelStyles = createResizablePanelStyles();
-  const scrollAreaStyles = createScrollAreaStyles();
-  const toggleStyles = createToggleStyles();
-  const toggleGroupStyles = createToggleGroupStyles();
-  const styles = {
-    alert: alertStyles,
-    button: buttonStyles,
-    badge: badgeStyles,
-    card: cardStyles,
-    input: inputStyles,
-    textarea: textareaStyles,
-    label: labelStyles,
-    separator: separatorStyles,
-    formGroup: formGroupStyles,
-    dialog: dialogStyles,
-    dropdownMenu: dropdownMenuStyles,
-    select: selectStyles,
-    tabs: tabsStyles,
-    checkbox: checkboxStyles,
-    switch: switchStyles,
-    popover: popoverStyles,
-    progress: progressStyles,
-    radioGroup: radioGroupStyles,
-    slider: sliderStyles,
-    accordion: accordionStyles,
-    toast: toastStyles,
-    tooltip: tooltipStyles,
-    avatar: avatarStyles,
-    emptyState: emptyStateStyles,
-    skeleton: skeletonStyles,
-    table: tableStyles,
-    sheet: sheetStyles,
-    breadcrumb: breadcrumbStyles,
-    calendar: calendarStyles,
-    carousel: carouselStyles,
-    collapsible: collapsibleStyles,
-    command: commandStyles,
-    contextMenu: contextMenuStyles,
-    datePicker: datePickerStyles,
-    drawer: drawerStyles,
-    hoverCard: hoverCardStyles,
-    list: listStyles,
-    menubar: menubarStyles,
-    navigationMenu: navigationMenuStyles,
-    pagination: paginationStyles,
-    resizablePanel: resizablePanelStyles,
-    scrollArea: scrollAreaStyles,
-    toggle: toggleStyles,
-    toggleGroup: toggleGroupStyles
-  };
-  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 DefaultAlert = withStyles19(ComposedAlert, {
-    root: alertStyles.root,
-    title: alertStyles.title,
-    description: alertStyles.description
-  });
-  const DestructiveAlert = withStyles19(ComposedAlert, {
-    root: [alertStyles.root, alertStyles.destructive].join(" "),
-    title: alertStyles.title,
-    description: alertStyles.description
-  });
-  function ThemedAlert({ variant, ...rest }) {
-    return (variant === "destructive" ? DestructiveAlert : DefaultAlert)(rest);
+  const styleCache = new Map;
+  function getOrInit(key, factory) {
+    let value = styleCache.get(key);
+    if (value === undefined) {
+      value = factory();
+      styleCache.set(key, value);
+    }
+    return value;
   }
-  const Alert = Object.assign(ThemedAlert, {
-    Title: ComposedAlert.Title,
-    Description: ComposedAlert.Description
-  });
-  const components = {
-    Alert,
-    Button: ({ intent, size, ...rest }) => ComposedButton({ ...rest, classes: { base: buttonStyles({ intent, size }) } }),
-    Badge: ({ color, ...rest }) => {
-      const style = color ? badgeColorInlineStyles[color] : undefined;
-      return ComposedBadge({ ...rest, classes: { base: badgeStyles({ color }) }, style });
-    },
-    Breadcrumb: withStyles19(ComposedBreadcrumb, {
-      nav: breadcrumbStyles.nav,
-      list: breadcrumbStyles.list,
-      item: breadcrumbStyles.item,
-      link: breadcrumbStyles.link,
-      page: breadcrumbStyles.page,
-      separator: breadcrumbStyles.separator
-    }),
-    Card: withStyles19(ComposedCard, {
-      root: cardStyles.root,
-      header: cardStyles.header,
-      title: cardStyles.title,
-      description: cardStyles.description,
-      content: cardStyles.content,
-      footer: cardStyles.footer,
-      action: cardStyles.action
-    }),
-    Input: withStyles19(ComposedInput, { base: inputStyles.base }),
-    Textarea: withStyles19(ComposedTextarea, { base: textareaStyles.base }),
-    Label: withStyles19(ComposedLabel, { base: labelStyles.base }),
-    Pagination: (props) => ComposedPagination({
-      ...props,
-      classes: {
-        nav: paginationStyles.nav,
-        list: paginationStyles.list,
-        item: paginationStyles.item,
-        link: paginationStyles.link,
-        linkActive: paginationStyles.linkActive,
-        navButton: paginationStyles.navButton,
-        ellipsis: paginationStyles.ellipsis
-      }
-    }),
-    Separator: withStyles19(ComposedSeparator, {
-      base: separatorStyles.base,
-      horizontal: separatorStyles.horizontal,
-      vertical: separatorStyles.vertical
-    }),
-    FormGroup: withStyles19(ComposedFormGroup, {
-      base: formGroupStyles.base,
-      error: formGroupStyles.error
-    }),
-    Avatar: withStyles19(ComposedAvatar, {
-      root: avatarStyles.root,
-      image: avatarStyles.image,
-      fallback: avatarStyles.fallback
-    }),
-    EmptyState: withStyles19(ComposedEmptyState, {
-      root: emptyStateStyles.root,
-      icon: emptyStateStyles.icon,
-      title: emptyStateStyles.title,
-      description: emptyStateStyles.description,
-      action: emptyStateStyles.action
-    }),
-    Skeleton: Object.assign(withStyles19(ComposedSkeleton, { root: skeletonStyles.root }), {
-      Text: withStyles19(ComposedSkeleton.Text, {
-        root: skeletonStyles.textRoot,
-        line: skeletonStyles.textLine
+  function defineLazyStyle(key, factory) {
+    Object.defineProperty(styles, key, {
+      get() {
+        const result2 = getOrInit(key, factory);
+        const cssText = result2.css;
+        if (cssText)
+          injectCSS2(cssText);
+        return result2;
+      },
+      enumerable: true,
+      configurable: true
+    });
+  }
+  const styles = {};
+  defineLazyStyle("alert", createAlertStyles);
+  defineLazyStyle("button", createButton);
+  defineLazyStyle("badge", createBadge);
+  defineLazyStyle("card", createCard);
+  defineLazyStyle("input", createInput);
+  defineLazyStyle("textarea", createTextarea);
+  defineLazyStyle("label", createLabel);
+  defineLazyStyle("separator", createSeparator);
+  defineLazyStyle("formGroup", createFormGroup);
+  defineLazyStyle("dialog", createDialogStyles);
+  defineLazyStyle("dropdownMenu", createDropdownMenuStyles);
+  defineLazyStyle("select", createSelectStyles);
+  defineLazyStyle("tabs", createTabsStyles);
+  defineLazyStyle("checkbox", createCheckboxStyles);
+  defineLazyStyle("switch", createSwitchStyles);
+  defineLazyStyle("popover", createPopoverStyles);
+  defineLazyStyle("progress", createProgressStyles);
+  defineLazyStyle("radioGroup", createRadioGroupStyles);
+  defineLazyStyle("slider", createSliderStyles);
+  defineLazyStyle("accordion", createAccordionStyles);
+  defineLazyStyle("toast", createToastStyles);
+  defineLazyStyle("tooltip", createTooltipStyles);
+  defineLazyStyle("avatar", createAvatarStyles);
+  defineLazyStyle("emptyState", createEmptyStateStyles);
+  defineLazyStyle("skeleton", createSkeletonStyles);
+  defineLazyStyle("table", createTableStyles);
+  defineLazyStyle("sheet", createSheetStyles);
+  defineLazyStyle("breadcrumb", createBreadcrumbStyles);
+  defineLazyStyle("calendar", createCalendarStyles);
+  defineLazyStyle("carousel", createCarouselStyles);
+  defineLazyStyle("collapsible", createCollapsibleStyles);
+  defineLazyStyle("command", createCommandStyles);
+  defineLazyStyle("contextMenu", createContextMenuStyles);
+  defineLazyStyle("datePicker", createDatePickerStyles);
+  defineLazyStyle("drawer", createDrawerStyles);
+  defineLazyStyle("hoverCard", createHoverCardStyles);
+  defineLazyStyle("list", createListStyles);
+  defineLazyStyle("menubar", createMenubarStyles);
+  defineLazyStyle("navigationMenu", createNavigationMenuStyles);
+  defineLazyStyle("pagination", createPaginationStyles);
+  defineLazyStyle("resizablePanel", createResizablePanelStyles);
+  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 DefaultAlert = withStyles19(ComposedAlert, {
+      root: alertS.root,
+      title: alertS.title,
+      description: alertS.description
+    });
+    const DestructiveAlert = withStyles19(ComposedAlert, {
+      root: [alertS.root, alertS.destructive].join(" "),
+      title: alertS.title,
+      description: alertS.description
+    });
+    function ThemedAlert({ variant, ...rest }) {
+      return (variant === "destructive" ? DestructiveAlert : DefaultAlert)(rest);
+    }
+    const Alert = 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
       }),
-      Circle: withStyles19(ComposedSkeleton.Circle, {
-        root: skeletonStyles.circleRoot
-      })
-    }),
-    Table: withStyles19(ComposedTable, {
-      root: tableStyles.root,
-      header: tableStyles.header,
-      body: tableStyles.body,
-      row: tableStyles.row,
-      head: tableStyles.head,
-      cell: tableStyles.cell,
-      caption: tableStyles.caption,
-      footer: tableStyles.footer
-    }),
-    primitives: {
-      Dialog: createThemedDialog(),
-      DropdownMenu: createThemedDropdownMenu(dropdownMenuStyles),
-      Select: createThemedSelect(selectStyles),
-      Tabs: createThemedTabs(tabsStyles),
-      Checkbox: createThemedCheckbox(checkboxStyles),
-      Switch: createThemedSwitch(switchStyles),
-      Popover: createThemedPopover(popoverStyles),
-      Progress: createThemedProgress(progressStyles),
-      RadioGroup: createThemedRadioGroup(radioGroupStyles),
-      Slider: createThemedSlider(sliderStyles),
-      Accordion: createThemedAccordion(accordionStyles),
-      Toast: createThemedToast(toastStyles),
-      Tooltip: createThemedTooltip(tooltipStyles),
-      Sheet: createThemedSheet(sheetStyles),
-      Calendar: createThemedCalendar(calendarStyles),
-      Carousel: createThemedCarousel(carouselStyles),
-      Collapsible: createThemedCollapsible(collapsibleStyles),
-      Command: createThemedCommand(commandStyles),
-      ContextMenu: createThemedContextMenu(contextMenuStyles),
-      DatePicker: createThemedDatePicker(datePickerStyles, {
-        ...calendarStyles,
-        root: calendarStyles.rootNoBorder
+      Card: withStyles19(ComposedCard, {
+        root: cardS.root,
+        header: cardS.header,
+        title: cardS.title,
+        description: cardS.description,
+        content: cardS.content,
+        footer: cardS.footer,
+        action: cardS.action
       }),
-      Drawer: createThemedDrawer(drawerStyles),
-      HoverCard: createThemedHoverCard(hoverCardStyles),
-      List: createThemedList(listStyles),
-      Menubar: createThemedMenubar(menubarStyles),
-      NavigationMenu: createThemedNavigationMenu(navigationMenuStyles),
-      ResizablePanel: createThemedResizablePanel(resizablePanelStyles),
-      ScrollArea: createThemedScrollArea(scrollAreaStyles),
-      Toggle: createThemedToggle(toggleStyles),
-      ToggleGroup: createThemedToggleGroup(toggleGroupStyles)
-    }
-  };
-  return { theme, globals, styles, components };
+      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)
+      }
+    };
+  }
+  const result = { theme, globals, styles };
+  Object.defineProperty(result, "components", {
+    get() {
+      if (cachedComponents === undefined) {
+        cachedComponents = buildComponents();
+      }
+      return cachedComponents;
+    },
+    enumerable: true,
+    configurable: true
+  });
+  return result;
 }
 export {
   palettes,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertz/theme-shadcn",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "description": "Shadcn-inspired theme for Vertz — pre-built style definitions using variants() and css()",
   "license": "MIT",
   "repository": {