@vaneui/md 0.9.0-alpha.20260105111433.5364a62 → 0.9.0-alpha.20260105192120.1be78c6

package/dist/index.esm.js

@@ -8560,10 +8560,8 @@ const LAYOUT_FLEX = ['wrap', 'gap', 'flexDirection', 'reverse'];
 const PADDING = ['padding'];
 /** Responsive breakpoint properties for different screen sizes */
 const BREAKPOINT = ['breakpoint'];
-/** Responsive CSS variable switching for automatic breakpoint adaptation */
-const RESPONSIVE = ['responsive'];
 /** Core visual properties including appearance colors and transparency */
-const VISUAL_CORE = ['appearance', 'transparent'];
+const VISUAL_CORE = ['appearance'];
 /** Border properties for visual decoration */
 const BORDER = ['border'];
 /** Visual decoration properties for shadows and focus rings */
@@ -8617,8 +8615,6 @@ const ComponentKeys = {
     padding: ['padding', 'noPadding'],
     /** CSS positioning: relative, absolute, fixed, sticky, static */
     position: ['relative', 'absolute', 'fixed', 'sticky', 'static'],
-    /** Responsive CSS variable switching: responsive (enabled) */
-    responsive: ['responsive'],
     /** Reverse the order of flex items */
     reverse: ['reverse'],
     /** Focus ring visibility: ring (show) or noRing (hide) */
@@ -8637,8 +8633,6 @@ const ComponentKeys = {
     textDecoration: ['underline', 'lineThrough', 'noUnderline', 'overline'],
     /** Text case transformation: UPPERCASE, lowercase, Capitalize, normalCase */
     textTransform: ['uppercase', 'lowercase', 'capitalize', 'normalCase'],
-    /** Make background (layout/UI) or text (typography) transparent */
-    transparent: ['transparent'],
     /** Style variant: filled (solid background) or outline (border only) */
     variant: ['filled', 'outline'],
     /** Flex item wrapping behavior: wrap, no-wrap, or wrap-reverse */
@@ -8667,7 +8661,7 @@ const CHIP_CATEGORIES = INTERACTIVE_CATEGORIES;
 const CODE_CATEGORIES = INTERACTIVE_CATEGORIES;
 /** Typography component categories */
 /** Categories for typography components like Text, Title, Link */
-const TYPOGRAPHY_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_CORE, ...VISUAL_CORE, ...VARIANT, ...RESPONSIVE];
+const TYPOGRAPHY_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_CORE, ...VISUAL_CORE, ...VARIANT];
 /** Categories for list components with typography and list-specific styling */
 const LIST_CATEGORIES = [...TYPOGRAPHY_FULL, ...LIST_STYLE, ...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING, ...VARIANT];
 /** Layout component categories */
@@ -8686,7 +8680,7 @@ const CARD_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...BREAKPOINT, ...V
 /** Categories for divider components with basic layout and visual properties */
 const DIVIDER_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING, ...VARIANT];
 /** Categories for section layout components with full responsive support */
-const SECTION_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_LAYOUT, ...PADDING, ...BREAKPOINT, ...VARIANT, ...RESPONSIVE];
+const SECTION_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_LAYOUT, ...PADDING, ...BREAKPOINT, ...VARIANT];
 /** Form component categories */
 /** Categories for checkbox form components */
 const CHECKBOX_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...BORDER, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
@@ -11703,13 +11697,14 @@ const defaultTypographyThemes = {
     textAlign: new TextAlignTheme()
 };
 class ComponentTheme {
-    constructor(tag, base, themes, defaults = {}, categories, tagFunction) {
+    constructor(tag, base, themes, defaults = {}, categories, tagFunction, vaneType) {
         this.tag = tag;
         this.base = base;
         this.defaults = defaults;
         this.extraClasses = {};
         this.categories = categories;
         this.tagFunction = tagFunction;
+        this.vaneType = vaneType;
         // Type assertion: we trust that all default themes provide complete objects
         this.themes = themes;
     }
@@ -11728,7 +11723,7 @@ class ComponentTheme {
             }
         }
         // No need for border/noBorder mutual exclusion logic anymore
-        // since noBorder is now part of the border category and 
+        // since noBorder is now part of the border category and
         // pickFirstTruthyKeyByCategory handles the priority naturally
         const walk = (map) => {
             for (const key of Object.keys(map)) {
@@ -11786,6 +11781,9 @@ class ComponentTheme {
         const finalClasses = twMerge(...themeGeneratedClasses, className);
         // Build data attributes for key categories
         const dataAttributes = {};
+        if (this.vaneType) {
+            dataAttributes['data-vane-type'] = this.vaneType;
+        }
         if (extractedKeys.size) {
             dataAttributes['data-size'] = extractedKeys.size;
         }
@@ -11795,9 +11793,6 @@ class ComponentTheme {
         if (extractedKeys.variant) {
             dataAttributes['data-variant'] = extractedKeys.variant;
         }
-        if (extractedKeys.transparent) {
-            dataAttributes['data-transparent'] = 'true';
-        }
         return {
             Tag: componentTag,
             finalClasses,
@@ -11807,35 +11802,24 @@ class ComponentTheme {
 }
 
 /**
- * Font size theme - outputs the consumer class text-(length:--fs).
- * CSS variable values (--fs-unit) are set via CSS rules in vars.css
- * using semantic classes and data attributes.
- *
- * When the 'responsive' prop is set, adds Tailwind classes to switch
- * between breakpoint-specific variables for automatic size adaptation.
+ * Font size theme - switches --fs-unit via breakpoint classes.
+ * CSS variable values (--fs-unit-desktop/tablet/mobile) are set in vars.css.
+ * The formula --fs = --fs-unit * --fs-base is computed once in CSS.
  */
 class FontSizeTheme extends BaseTheme {
     constructor() {
         super(...arguments);
-        /** Consumer class for font size */
+        /** Desktop breakpoint unit switch */
+        this.desktop = "[--fs-unit:var(--fs-unit-desktop)]";
+        /** Tablet breakpoint unit switch */
+        this.tablet = "max-tablet:[--fs-unit:var(--fs-unit-tablet)]";
+        /** Mobile breakpoint unit switch */
+        this.mobile = "max-mobile:[--fs-unit:var(--fs-unit-mobile)]";
+        /** Consumer class */
         this.fontSize = "text-(length:--fs)";
-        /** Responsive desktop unit class */
-        this.responsiveDesktop = "[--fs-unit:var(--fs-unit-desktop)]";
-        /** Responsive laptop unit class */
-        this.responsiveTablet = "max-tablet:[--fs-unit:var(--fs-unit-tablet)]";
-        /** Responsive tablet unit class */
-        this.responsiveMobile = "max-mobile:[--fs-unit:var(--fs-unit-mobile)]";
     }
-    getClasses(extractedKeys) {
-        if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.responsive) === 'responsive') {
-            return [
-                this.responsiveDesktop,
-                this.responsiveTablet,
-                this.responsiveMobile,
-                this.fontSize
-            ];
-        }
-        return [this.fontSize];
+    getClasses(_extractedKeys) {
+        return [this.desktop, this.tablet, this.mobile, this.fontSize];
     }
 }
 
@@ -11856,36 +11840,25 @@ class LineHeightTheme extends BaseTheme {
 }
 
 /**
- * Gap theme - outputs the consumer class gap-(--gap).
- * CSS variable values (--gap-unit) are set via CSS rules in vars.css
- * using semantic classes and data attributes.
- *
- * When the 'responsive' prop is set, adds Tailwind classes to switch
- * between breakpoint-specific variables for automatic size adaptation.
+ * Gap theme - switches --gap-unit via breakpoint classes.
+ * CSS variable values (--gap-unit-desktop/tablet/mobile) are set in vars.css.
+ * The formula --gap = --gap-unit * --spacing is computed once in CSS.
  */
 class GapTheme extends BaseTheme {
     constructor() {
         super(...arguments);
-        /** Consumer class for gap spacing */
+        /** Desktop breakpoint unit switch */
+        this.desktop = "[--gap-unit:var(--gap-unit-desktop)]";
+        /** Tablet breakpoint unit switch */
+        this.tablet = "max-tablet:[--gap-unit:var(--gap-unit-tablet)]";
+        /** Mobile breakpoint unit switch */
+        this.mobile = "max-mobile:[--gap-unit:var(--gap-unit-mobile)]";
+        /** Consumer class */
         this.gap = "gap-(--gap)";
-        /** Responsive desktop unit class */
-        this.responsiveDesktop = "[--gap-unit:var(--gap-unit-desktop)]";
-        /** Responsive laptop unit class */
-        this.responsiveTablet = "max-tablet:[--gap-unit:var(--gap-unit-tablet)]";
-        /** Responsive tablet unit class */
-        this.responsiveMobile = "max-mobile:[--gap-unit:var(--gap-unit-mobile)]";
     }
     getClasses(extractedKeys) {
         if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.gap) === 'gap') {
-            if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.responsive) === 'responsive') {
-                return [
-                    this.responsiveDesktop,
-                    this.responsiveTablet,
-                    this.responsiveMobile,
-                    this.gap
-                ];
-            }
-            return [this.gap];
+            return [this.desktop, this.tablet, this.mobile, this.gap];
         }
         return [];
     }
@@ -12003,55 +11976,52 @@ class FocusVisibleTheme extends BaseTheme {
 }
 
 /**
- * Horizontal padding theme - only outputs the consumer class px-(--px).
- * CSS variable values (--aspect-ratio, --py-unit) are now set via CSS rules
- * in vars.css using semantic classes and data attributes.
+ * Horizontal padding theme - switches --py-unit via breakpoint classes.
+ * The formula --px = --aspect-ratio * --py-unit * --spacing is computed in CSS.
+ * Uses same --py-unit as PyTheme since px is derived from py.
  */
 class PxTheme extends BaseTheme {
     constructor() {
         super(...arguments);
-        /** Consumer class for horizontal padding */
+        /** Desktop breakpoint unit switch */
+        this.desktop = "[--py-unit:var(--py-unit-desktop)]";
+        /** Tablet breakpoint unit switch */
+        this.tablet = "max-tablet:[--py-unit:var(--py-unit-tablet)]";
+        /** Mobile breakpoint unit switch */
+        this.mobile = "max-mobile:[--py-unit:var(--py-unit-mobile)]";
+        /** Consumer class */
         this.px = "px-(--px)";
     }
     getClasses(extractedKeys) {
         if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === 'padding' || (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === undefined) {
-            return [this.px];
+            // Note: unit switching classes are same as py, but we still emit them
+            // in case px is used without py. twMerge will dedupe if both are used.
+            return [this.desktop, this.tablet, this.mobile, this.px];
         }
         return [];
     }
 }
 
 /**
- * Vertical padding theme - outputs the consumer class py-(--py).
- * CSS variable values (--py-unit) are set via CSS rules in vars.css
- * using semantic classes and data attributes.
- *
- * When the 'responsive' prop is set, adds Tailwind classes to switch
- * between breakpoint-specific variables for automatic size adaptation.
+ * Vertical padding theme - switches --py-unit via breakpoint classes.
+ * CSS variable values (--py-unit-desktop/tablet/mobile) are set in vars.css.
+ * The formula --py = --py-unit * --spacing is computed once in CSS.
  */
 class PyTheme extends BaseTheme {
     constructor() {
         super(...arguments);
-        /** Consumer class for vertical padding */
+        /** Desktop breakpoint unit switch */
+        this.desktop = "[--py-unit:var(--py-unit-desktop)]";
+        /** Tablet breakpoint unit switch */
+        this.tablet = "max-tablet:[--py-unit:var(--py-unit-tablet)]";
+        /** Mobile breakpoint unit switch */
+        this.mobile = "max-mobile:[--py-unit:var(--py-unit-mobile)]";
+        /** Consumer class */
         this.py = "py-(--py)";
-        /** Responsive desktop unit class */
-        this.responsiveDesktop = "[--py-unit:var(--py-unit-desktop)]";
-        /** Responsive laptop unit class */
-        this.responsiveTablet = "max-tablet:[--py-unit:var(--py-unit-tablet)]";
-        /** Responsive tablet unit class */
-        this.responsiveMobile = "max-mobile:[--py-unit:var(--py-unit-mobile)]";
     }
     getClasses(extractedKeys) {
         if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === 'padding' || (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === undefined) {
-            if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.responsive) === 'responsive') {
-                return [
-                    this.responsiveDesktop,
-                    this.responsiveTablet,
-                    this.responsiveMobile,
-                    this.py
-                ];
-            }
-            return [this.py];
+            return [this.desktop, this.tablet, this.mobile, this.py];
         }
         return [];
     }
@@ -12100,8 +12070,8 @@ class SimpleConsumerTheme extends BaseTheme {
         if (this.category === 'focusVisible' && (extractedKeys.focusVisible === 'noFocusVisible' || extractedKeys.focusVisible === undefined)) {
             return [];
         }
-        // Only output classes if an appearance or transparent is set (unless alwaysOutput is true)
-        if (!this.alwaysOutput && !(extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.appearance) && !(extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.transparent)) {
+        // Only output classes if an appearance is set (unless alwaysOutput is true)
+        if (!this.alwaysOutput && !(extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.appearance)) {
             return [];
         }
         const classes = [];
@@ -12121,43 +12091,42 @@ class SimpleConsumerTheme extends BaseTheme {
     }
 }
 
+/**
+ * Shadow theme using CSS variables for customizable shadows.
+ *
+ * Shadow variables (--shadow-base, --shadow-hover) are set via CSS rules in vars.css
+ * based on data-vane-type and data-size attributes.
+ * This theme only outputs the consumer classes that use those variables.
+ * - UI: shadow-(--shadow-base) + hover:shadow-(--shadow-hover) (interactive with hover)
+ * - Layout: shadow-(--shadow-base) (static, no hover)
+ */
 class ShadowAppearanceTheme extends BaseTheme {
-    constructor(initial) {
+    constructor(shadowClasses) {
         super();
-        ComponentKeys.appearance.forEach((key) => {
-            this[key] = initial;
-        });
+        this.shadowClasses = shadowClasses;
     }
     getClasses(extractedKeys) {
-        var _a, _b;
-        const appearance = (_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.appearance) !== null && _a !== void 0 ? _a : 'primary';
-        const size = (_b = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) !== null && _b !== void 0 ? _b : 'md';
         const shadow = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.shadow;
         return shadow === undefined || shadow === 'noShadow'
             ? []
-            : ModeKeys.mode.map(mode => { var _a, _b, _c; return (_c = (_b = (_a = this[appearance]) === null || _a === void 0 ? void 0 : _a[size]) === null || _b === void 0 ? void 0 : _b[mode]) !== null && _c !== void 0 ? _c : ""; });
+            : this.shadowClasses;
     }
     static createUITheme() {
-        return new ShadowAppearanceTheme(ShadowAppearanceTheme.defaultUIShadow);
+        return new ShadowAppearanceTheme(ShadowAppearanceTheme.uiShadowClasses);
     }
     static createLayoutTheme() {
-        return new ShadowAppearanceTheme(ShadowAppearanceTheme.defaultLayoutShadow);
+        return new ShadowAppearanceTheme(ShadowAppearanceTheme.layoutShadowClasses);
     }
 }
-ShadowAppearanceTheme.defaultUIShadow = {
-    xs: { base: "shadow-2xs", hover: "hover:shadow-xs", active: "", focus: "", focusVisible: "" },
-    sm: { base: "shadow-xs", hover: "hover:shadow-sm", active: "", focus: "", focusVisible: "" },
-    md: { base: "shadow-sm", hover: "hover:shadow-md", active: "", focus: "", focusVisible: "" },
-    lg: { base: "shadow-md", hover: "hover:shadow-lg", active: "", focus: "", focusVisible: "" },
-    xl: { base: "shadow-lg", hover: "hover:shadow-xl", active: "", focus: "", focusVisible: "" }
-};
-ShadowAppearanceTheme.defaultLayoutShadow = {
-    xs: { base: "shadow-2xs", hover: "", active: "", focus: "", focusVisible: "" },
-    sm: { base: "shadow-xs", hover: "", active: "", focus: "", focusVisible: "" },
-    md: { base: "shadow-sm", hover: "", active: "", focus: "", focusVisible: "" },
-    lg: { base: "shadow-md", hover: "", active: "", focus: "", focusVisible: "" },
-    xl: { base: "shadow-lg", hover: "", active: "", focus: "", focusVisible: "" }
-};
+// UI shadows: consumer classes (CSS sets variables based on data-vane-type + data-size)
+ShadowAppearanceTheme.uiShadowClasses = [
+    "shadow-(--shadow-base)",
+    "hover:shadow-(--shadow-hover)"
+];
+// Layout shadows: consumer class only (no hover)
+ShadowAppearanceTheme.layoutShadowClasses = [
+    "shadow-(--shadow-base)"
+];
 
 class WrapTheme extends BaseTheme {
     constructor() {
@@ -12282,7 +12251,6 @@ const themeDefaults = {
         noBorder: true,
         noRing: true,
         noShadow: true,
-        responsive: true,
         sharp: true,
     },
     stack: {
@@ -12403,7 +12371,6 @@ const themeDefaults = {
         sans: true,
         semibold: true,
         textLeft: true,
-        responsive: true,
         outline: true,
         primary: true,
     },
@@ -12412,7 +12379,6 @@ const themeDefaults = {
         sans: true,
         semibold: true,
         textLeft: true,
-        responsive: true,
         outline: true,
         primary: true,
     },
@@ -12421,7 +12387,6 @@ const themeDefaults = {
         sans: true,
         semibold: true,
         textLeft: true,
-        responsive: true,
         outline: true,
         primary: true,
     },
@@ -12462,7 +12427,6 @@ const themeDefaults = {
             filled: true,
         },
         wrapper: {
-            transparent: true,
             md: true,
             inlineGrid: true,
             itemsCenter: true,
@@ -12538,7 +12502,7 @@ const defaultButtonTheme = new ComponentTheme("button", "vane-button w-fit h-fit
 }, themeDefaults.button, BUTTON_CATEGORIES, (props) => {
     // Determine tag based on href prop
     return props.href ? "a" : "button";
-});
+}, 'ui');
 
 const defaultBadgeTheme = new ComponentTheme("span", "vane-badge w-fit h-fit transition-all duration-200 whitespace-nowrap", {
     size: {
@@ -12568,7 +12532,7 @@ const defaultBadgeTheme = new ComponentTheme("span", "vane-badge w-fit h-fit tra
     typography: defaultTypographyThemes,
 }, themeDefaults.badge, BADGE_CATEGORIES, (props) => {
     return props.href ? "a" : "span";
-});
+}, 'ui');
 
 const defaultChipTheme = new ComponentTheme("span", "vane-chip w-fit h-fit transition-all duration-200 whitespace-nowrap", {
     size: {
@@ -12598,7 +12562,7 @@ const defaultChipTheme = new ComponentTheme("span", "vane-chip w-fit h-fit trans
     typography: defaultTypographyThemes,
 }, themeDefaults.chip, CHIP_CATEGORIES, (props) => {
     return props.href ? "a" : "span";
-});
+}, 'ui');
 
 const defaultCodeTheme = new ComponentTheme("code", "vane-code", {
     size: {
@@ -12626,7 +12590,7 @@ const defaultCodeTheme = new ComponentTheme("code", "vane-code", {
         flexDirection: new DirectionTheme(),
     },
     typography: defaultTypographyThemes,
-}, themeDefaults.code, CODE_CATEGORIES);
+}, themeDefaults.code, CODE_CATEGORIES, undefined, 'ui');
 
 /**
  * Link-specific variant theme that handles text colors
@@ -12828,7 +12792,7 @@ const defaultCardTheme = new ComponentTheme("div", "vane-card", {
         ring: new SimpleConsumerTheme({ base: ringConsumerClass }, 'ring'),
     },
     typography: defaultTypographyThemes,
-}, themeDefaults.card, CARD_CATEGORIES);
+}, themeDefaults.card, CARD_CATEGORIES, undefined, 'layout');
 
 const defaultRowTheme = new ComponentTheme("div", "vane-row", {
     size: {
@@ -12850,7 +12814,7 @@ const defaultRowTheme = new ComponentTheme("div", "vane-row", {
         ring: new SimpleConsumerTheme({ base: ringConsumerClass }, 'ring'),
         shadow: ShadowAppearanceTheme.createLayoutTheme(),
     }
-}, themeDefaults.row, ROW_CATEGORIES);
+}, themeDefaults.row, ROW_CATEGORIES, undefined, 'layout');
 
 const defaultDividerTheme = new ComponentTheme("div", "vane-divider h-(--bw) w-full", {
     size: {
@@ -12861,7 +12825,7 @@ const defaultDividerTheme = new ComponentTheme("div", "vane-divider h-(--bw) w-f
         background: new SimpleConsumerTheme({ base: '[background:var(--border-color)]' }, 'bg'),
     },
     layout: defaultLayoutsThemes,
-}, themeDefaults.divider, DIVIDER_CATEGORIES);
+}, themeDefaults.divider, DIVIDER_CATEGORIES, undefined, 'layout');
 
 /**
  * Size theme - can operate in two modes:
@@ -12922,7 +12886,7 @@ const defaultContainerTheme = new ComponentTheme("div", "vane-container mx-auto
         ring: new SimpleConsumerTheme({ base: ringConsumerClass }, 'ring'),
         shadow: ShadowAppearanceTheme.createLayoutTheme(),
     }
-}, themeDefaults.container, CONTAINER_CATEGORIES);
+}, themeDefaults.container, CONTAINER_CATEGORIES, undefined, 'layout');
 
 const defaultColTheme = new ComponentTheme("div", "vane-col", {
     size: {
@@ -12943,7 +12907,7 @@ const defaultColTheme = new ComponentTheme("div", "vane-col", {
         ring: new SimpleConsumerTheme({ base: ringConsumerClass }, 'ring'),
         shadow: ShadowAppearanceTheme.createLayoutTheme(),
     }
-}, themeDefaults.col, COL_CATEGORIES);
+}, themeDefaults.col, COL_CATEGORIES, undefined, 'layout');
 
 const defaultStackTheme = new ComponentTheme("div", "vane-stack", {
     size: {
@@ -12967,7 +12931,7 @@ const defaultStackTheme = new ComponentTheme("div", "vane-stack", {
         ring: new SimpleConsumerTheme({ base: ringConsumerClass }, 'ring'),
         shadow: ShadowAppearanceTheme.createLayoutTheme(),
     }
-}, themeDefaults.stack, STACK_CATEGORIES);
+}, themeDefaults.stack, STACK_CATEGORIES, undefined, 'layout');
 
 const defaultSectionTheme = new ComponentTheme("div", "vane-section w-full", {
     size: {
@@ -12991,7 +12955,7 @@ const defaultSectionTheme = new ComponentTheme("div", "vane-section w-full", {
         ring: new RingTheme(),
         radius: new RadiusTheme(),
     },
-}, themeDefaults.section, SECTION_CATEGORIES);
+}, themeDefaults.section, SECTION_CATEGORIES, undefined, 'layout');
 
 const gridSubThemes = {
     size: {
@@ -13010,7 +12974,7 @@ const gridSubThemes = {
         border: new BorderTheme(),
     },
 };
-const defaultGrid2Theme = new ComponentTheme("div", "vane-grid vane-grid-2 grid-cols-1 md:grid-cols-2", gridSubThemes, themeDefaults.grid2, GRID_CATEGORIES);
+const defaultGrid2Theme = new ComponentTheme("div", "vane-grid vane-grid-2 grid-cols-1 md:grid-cols-2", gridSubThemes, themeDefaults.grid2, GRID_CATEGORIES, undefined, 'layout');
 const defaultGrid3Theme = new ComponentTheme("div", "vane-grid vane-grid-3 grid-cols-1 md:grid-cols-3", gridSubThemes, themeDefaults.grid3, GRID_CATEGORIES);
 const defaultGrid4Theme = new ComponentTheme("div", "vane-grid vane-grid-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4", gridSubThemes, themeDefaults.grid4, GRID_CATEGORIES);
 const defaultGrid5Theme = new ComponentTheme("div", "vane-grid vane-grid-5 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5", gridSubThemes, themeDefaults.grid5, GRID_CATEGORIES);
@@ -13038,7 +13002,7 @@ const defaultCheckboxTheme = new ComponentTheme("input", "vane-checkbox peer col
         check: new SimpleConsumerTheme({ base: checkedBgConsumerClass }, 'bg'),
         shadow: ShadowAppearanceTheme.createUITheme(),
     }
-}, ((_a = themeDefaults.checkbox) === null || _a === void 0 ? void 0 : _a.input) || {}, CHECKBOX_CATEGORIES);
+}, ((_a = themeDefaults.checkbox) === null || _a === void 0 ? void 0 : _a.input) || {}, CHECKBOX_CATEGORIES, undefined, 'ui');
 const defaultCheckTheme = new ComponentTheme("span", "invisible col-start-1 row-start-1 peer-checked:visible", {
     checkElement: () => jsx("svg", { viewBox: "0 0 14 14", fill: "none", children: jsx("path", { d: "M3 8L6 11L11 3.5", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", stroke: "currentColor" }) }),
     appearance: {
@@ -13085,7 +13049,7 @@ const defaultLabelTheme = new ComponentTheme("label", "vane-label has-[input]:cu
         wrap: new WrapTheme(),
         flexDirection: new DirectionTheme(),
     },
-}, themeDefaults.label, LABEL_CATEGORIES);
+}, themeDefaults.label, LABEL_CATEGORIES, undefined, 'ui');
 
 const defaultImgTheme = new ComponentTheme("img", "vane-img object-cover", // Default to cover for better image display
 {
@@ -13103,7 +13067,7 @@ const defaultImgTheme = new ComponentTheme("img", "vane-img object-cover", // De
         focusVisible: new SimpleConsumerTheme({ base: focusVisibleConsumerClass }, 'focusVisible'),
         shadow: ShadowAppearanceTheme.createLayoutTheme()
     }
-}, themeDefaults.img, IMG_CATEGORIES);
+}, themeDefaults.img, IMG_CATEGORIES, undefined, 'layout');
 
 const defaultInputTheme = new ComponentTheme("input", "vane-input w-full transition-all duration-200", {
     size: {
@@ -13131,7 +13095,7 @@ const defaultInputTheme = new ComponentTheme("input", "vane-input w-full transit
         flexDirection: new DirectionTheme(),
     },
     typography: defaultTypographyThemes,
-}, themeDefaults.input, INPUT_CATEGORIES, () => "input");
+}, themeDefaults.input, INPUT_CATEGORIES, () => "input", 'ui');
 
 const defaultTheme = {
     button: defaultButtonTheme,
@@ -13414,7 +13378,7 @@ const Checkbox = forwardRef(function Checkbox(props, ref) {
     // Size props
     xs, sm, md, lg, xl, 
     // Appearance props
-    primary, brand, accent, secondary, tertiary, success, danger, warning, info, transparent, 
+    primary, brand, accent, secondary, tertiary, success, danger, warning, info, 
     // Variant props
     filled, outline, 
     // Shape props
@@ -13425,7 +13389,7 @@ const Checkbox = forwardRef(function Checkbox(props, ref) {
     id, className, tabIndex, 'aria-label': ariaLabel, ...remainingProps } = props;
     const themeProps = {
         xs, sm, md, lg, xl,
-        primary, brand, accent, secondary, tertiary, success, danger, warning, info, transparent,
+        primary, brand, accent, secondary, tertiary, success, danger, warning, info,
         filled, outline,
         pill, sharp, rounded
     };