@vaneui/ui 0.3.1-alpha.20251214141144.6dd59c5 → 0.3.1-alpha.20251215181324.24aaf05

package/dist/index.js

@@ -3625,26 +3625,23 @@ class PaddingTheme extends BaseTheme {
     }
 }
 
-/** Horizontal padding theme - controls left and right padding */
+/** Horizontal padding theme - controls left and right padding via aspect ratio */
 class PxTheme extends PaddingTheme {
     constructor(aspectRatio, isUIComponent = false) {
-        super();
-        this.aspectRatioMap = aspectRatio ? aspectRatio : {
-            xs: "[--aspect-ratio:1]",
-            sm: "[--aspect-ratio:1]",
-            md: "[--aspect-ratio:1]",
-            lg: "[--aspect-ratio:1]",
-            xl: "[--aspect-ratio:1]",
-        };
+        super(aspectRatio);
         this.isUIComponent = isUIComponent;
-        // PxTheme should not set any padding classes - that's PyTheme's job
-        // PxTheme only handles aspect-ratio
+        // Override with PxTheme's default aspect ratio classes if no custom map provided
+        if (!aspectRatio) {
+            ComponentKeys.size.forEach((key) => {
+                this[key] = "[--aspect-ratio:1]";
+            });
+        }
     }
     getClasses(extractedKeys) {
-        var _a, _b;
+        var _a;
         if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === 'padding' || (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === undefined) {
             const size = (_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) !== null && _a !== void 0 ? _a : 'md';
-            const aspectRatioClass = (_b = this.aspectRatioMap) === null || _b === void 0 ? void 0 : _b[size];
+            const aspectRatioClass = this[size];
             const classes = [];
             // Only add aspect-ratio class - no padding classes
             if (aspectRatioClass)
@@ -4525,11 +4522,11 @@ const themeDefaults = {
 };
 
 const buttonAspectRatioClasses = {
-    xs: "[--aspect-ratio:2]", // px-2 vs py-1 = 2
-    sm: "[--aspect-ratio:2]", // px-3 vs py-1.5 = 2
-    md: "[--aspect-ratio:2]", // px-4 vs py-2 = 2
-    lg: "[--aspect-ratio:2]", // px-5 vs py-2.5 = 2
-    xl: "[--aspect-ratio:2]", // px-6 vs py-3 = 2
+    xs: "[--aspect-ratio:2]",
+    sm: "[--aspect-ratio:2]",
+    md: "[--aspect-ratio:2]",
+    lg: "[--aspect-ratio:2]",
+    xl: "[--aspect-ratio:2]",
 };
 const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-pointer transition-all duration-200 whitespace-nowrap", {
     size: {