@vaneui/md 0.9.0-alpha.20260105192120.1be78c6 → 0.9.0-alpha.20260106191130.bc0ea5f

package/dist/index.js

@@ -11804,24 +11804,21 @@ class ComponentTheme {
 }
 
 /**
- * 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.
+ * Font size theme - applies text size using pre-computed breakpoint variables.
+ * CSS computes --fs-desktop/tablet/mobile from --fs-unit (with fallbacks for responsive overrides).
  */
 class FontSizeTheme extends BaseTheme {
     constructor() {
         super(...arguments);
-        /** 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)";
+        /** Desktop: apply font size using --fs-desktop */
+        this.desktop = "text-(length:--fs-desktop)";
+        /** Tablet: apply font size using --fs-tablet */
+        this.tablet = "max-tablet:text-(length:--fs-tablet)";
+        /** Mobile: apply font size using --fs-mobile */
+        this.mobile = "max-mobile:text-(length:--fs-mobile)";
     }
     getClasses(_extractedKeys) {
-        return [this.desktop, this.tablet, this.mobile, this.fontSize];
+        return [this.desktop, this.tablet, this.mobile];
     }
 }
 
@@ -11842,25 +11839,22 @@ class LineHeightTheme extends BaseTheme {
 }
 
 /**
- * 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.
+ * Gap theme - applies gap using pre-computed breakpoint variables.
+ * CSS computes --gap-desktop/tablet/mobile from --gap-unit (with fallbacks for responsive overrides).
  */
 class GapTheme extends BaseTheme {
     constructor() {
         super(...arguments);
-        /** 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)";
+        /** Desktop: apply gap using --gap-desktop */
+        this.desktop = "gap-(--gap-desktop)";
+        /** Tablet: apply gap using --gap-tablet */
+        this.tablet = "max-tablet:gap-(--gap-tablet)";
+        /** Mobile: apply gap using --gap-mobile */
+        this.mobile = "max-mobile:gap-(--gap-mobile)";
     }
     getClasses(extractedKeys) {
         if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.gap) === 'gap') {
-            return [this.desktop, this.tablet, this.mobile, this.gap];
+            return [this.desktop, this.tablet, this.mobile];
         }
         return [];
     }
@@ -11978,52 +11972,44 @@ class FocusVisibleTheme extends BaseTheme {
 }
 
 /**
- * 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.
+ * Horizontal padding theme - applies px using pre-computed breakpoint variables.
+ * CSS computes --px-desktop/tablet/mobile from --py-unit and --aspect-ratio.
  */
 class PxTheme extends BaseTheme {
     constructor() {
         super(...arguments);
-        /** 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)";
+        /** Desktop: apply horizontal padding using --px-desktop */
+        this.desktop = "px-(--px-desktop)";
+        /** Tablet: apply horizontal padding using --px-tablet */
+        this.tablet = "max-tablet:px-(--px-tablet)";
+        /** Mobile: apply horizontal padding using --px-mobile */
+        this.mobile = "max-mobile:px-(--px-mobile)";
     }
     getClasses(extractedKeys) {
         if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === 'padding' || (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === undefined) {
-            // 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 [this.desktop, this.tablet, this.mobile];
         }
         return [];
     }
 }
 
 /**
- * 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.
+ * Vertical padding theme - applies py using pre-computed breakpoint variables.
+ * CSS computes --py-desktop/tablet/mobile from --py-unit (with fallbacks for responsive overrides).
  */
 class PyTheme extends BaseTheme {
     constructor() {
         super(...arguments);
-        /** 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)";
+        /** Desktop: apply vertical padding using --py-desktop */
+        this.desktop = "py-(--py-desktop)";
+        /** Tablet: apply vertical padding using --py-tablet */
+        this.tablet = "max-tablet:py-(--py-tablet)";
+        /** Mobile: apply vertical padding using --py-mobile */
+        this.mobile = "max-mobile:py-(--py-mobile)";
     }
     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.desktop, this.tablet, this.mobile, this.py];
+            return [this.desktop, this.tablet, this.mobile];
         }
         return [];
     }