@vaneui/ui 0.3.1-alpha.20250916140129.7475230 → 0.3.1-alpha.20250921204254.9cfeae4

package/dist/index.js

@@ -3680,11 +3680,25 @@ class SizeTheme extends BaseTheme {
 }
 
 const layoutGapClasses = {
-    xs: "gap-(--layout-gap-xs)",
-    sm: "gap-(--layout-gap-sm)",
-    md: "gap-(--layout-gap-md)",
-    lg: "gap-(--layout-gap-lg)",
-    xl: "gap-(--layout-gap-xl)",
+    xs: "[--gap-unit:2]",
+    sm: "[--gap-unit:3]",
+    md: "[--gap-unit:4]",
+    lg: "[--gap-unit:5]",
+    xl: "[--gap-unit:6]",
+};
+const layoutPaddingClasses = {
+    xs: "[--h-unit:2]",
+    sm: "[--h-unit:3]",
+    md: "[--h-unit:4]",
+    lg: "[--h-unit:5]",
+    xl: "[--h-unit:6]",
+};
+const sectionAspectRatioClasses = {
+    xs: "[--aspect-ratio:2.5]",
+    sm: "[--aspect-ratio:2]",
+    md: "[--aspect-ratio:1.75]",
+    lg: "[--aspect-ratio:1.6]",
+    xl: "[--aspect-ratio:1.5]",
 };
 
 class GapTheme extends BaseTheme {
@@ -3712,7 +3726,7 @@ class GapTheme extends BaseTheme {
         var _a;
         if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.gap) === 'gap') {
             const gapClass = this[(_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) !== null && _a !== void 0 ? _a : 'md'];
-            return gapClass ? [gapClass] : [];
+            return gapClass ? [gapClass, "gap-(--gap)"] : [];
         }
         return [];
     }
@@ -3876,17 +3890,32 @@ class PaddingTheme extends BaseTheme {
 
 /** Horizontal padding theme - controls left and right padding */
 class PxTheme extends PaddingTheme {
-    constructor(sizeMap) {
+    constructor(sizeMap, aspectRatioMap) {
         super(sizeMap);
+        this.aspectRatioMap = aspectRatioMap;
         // Override with PxTheme's default classes if no custom sizeMap provided
         if (!sizeMap) {
             ComponentKeys.size.forEach((key) => {
-                this[key] = {
-                    xs: "px-2", sm: "px-4", md: "px-6", lg: "px-8", xl: "px-10"
-                }[key];
+                this[key] = layoutPaddingClasses[key];
             });
         }
     }
+    getClasses(extractedKeys) {
+        var _a, _b;
+        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 paddingClass = this[size];
+            const aspectRatioClass = (_b = this.aspectRatioMap) === null || _b === void 0 ? void 0 : _b[size];
+            const classes = [];
+            if (paddingClass)
+                classes.push(paddingClass);
+            if (aspectRatioClass)
+                classes.push(aspectRatioClass);
+            classes.push("px-(--px)");
+            return classes.length > 1 ? classes : [];
+        }
+        return [];
+    }
 }
 
 /** Vertical padding theme - controls top and bottom padding */
@@ -3896,12 +3925,18 @@ class PyTheme extends PaddingTheme {
         // Override with PyTheme's default classes if no custom sizeMap provided
         if (!sizeMap) {
             ComponentKeys.size.forEach((key) => {
-                this[key] = {
-                    xs: "py-2", sm: "py-4", md: "py-6", lg: "py-8", xl: "py-10"
-                }[key];
+                this[key] = layoutPaddingClasses[key];
             });
         }
     }
+    getClasses(extractedKeys) {
+        var _a;
+        if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === 'padding' || (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === undefined) {
+            const paddingClass = this[(_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) !== null && _a !== void 0 ? _a : 'md'];
+            return paddingClass ? [paddingClass, "py-(--py)"] : [];
+        }
+        return [];
+    }
 }
 
 class AppearanceTheme extends BaseTheme {
@@ -4741,9 +4776,7 @@ const themeDefaults = {
 
 const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-pointer transition-all duration-200 whitespace-nowrap", {
     size: {
-        px: new PxTheme({
-            xs: 'px-2', sm: 'px-3', md: 'px-4', lg: 'px-5', xl: 'px-6',
-        }),
+        px: new PxTheme({ xs: 'px-2', sm: 'px-3', md: 'px-4', lg: 'px-5', xl: 'px-6', }),
         py: new PyTheme({ xs: 'py-1', sm: 'py-1.5', md: 'py-2', lg: 'py-2.5', xl: 'py-3' }),
         gap: new GapTheme({ xs: 'gap-1', sm: 'gap-1.5', md: 'gap-2', lg: 'gap-2.5', xl: 'gap-3' }),
         text: new SizeTheme({ xs: 'text-xs', sm: 'text-sm', md: 'text-base', lg: 'text-lg', xl: 'text-xl' }),
@@ -5063,26 +5096,14 @@ class BreakpointTheme extends BaseTheme {
 
 const defaultCardTheme = new ComponentTheme("div", "", {
     size: {
-        px: new PxTheme({
-            xs: "px-4",
-            sm: "px-5 max-lg:px-4",
-            md: "px-6 max-lg:px-5",
-            lg: "px-7 max-lg:px-6 max-md:px-5",
-            xl: "px-8 max-lg:px-7 max-md:px-6"
-        }),
-        py: new PyTheme({
-            xs: "py-4",
-            sm: "py-5 max-lg:py-4",
-            md: "py-6 max-lg:py-5",
-            lg: "py-7 max-lg:py-6 max-md:py-5",
-            xl: "py-8 max-lg:py-7 max-md:py-6"
-        }),
+        px: new PxTheme(),
+        py: new PyTheme(),
         gap: new GapTheme({
-            xs: "gap-2",
-            sm: "gap-3 max-lg:gap-2",
-            md: "gap-4 max-lg:gap-3",
-            lg: "gap-5 max-lg:gap-4 max-md:gap-3",
-            xl: "gap-6 max-lg:gap-5 max-md:gap-4"
+            xs: "[--gap-unit:1]",
+            sm: "[--gap-unit:1.5]",
+            md: "[--gap-unit:2]",
+            lg: "[--gap-unit:2.5]",
+            xl: "[--gap-unit:3]",
         }),
     },
     layout: {
@@ -5106,7 +5127,13 @@ const defaultCardTheme = new ComponentTheme("div", "", {
 
 const defaultRowTheme = new ComponentTheme("div", "", {
     size: {
-        gap: new GapTheme(),
+        gap: new GapTheme({
+            xs: "[--gap-unit:2]",
+            sm: "[--gap-unit:3]",
+            md: "[--gap-unit:4]",
+            lg: "[--gap-unit:5]",
+            xl: "[--gap-unit:6]",
+        }),
         breakpoint: new BreakpointTheme(),
     },
     layout: {
@@ -5140,7 +5167,13 @@ const defaultDividerTheme = new ComponentTheme("div", "h-px w-full", {
 
 const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full", {
     size: {
-        gap: new GapTheme(),
+        gap: new GapTheme({
+            xs: "[--gap-unit:2]",
+            sm: "[--gap-unit:3]",
+            md: "[--gap-unit:4]",
+            lg: "[--gap-unit:5]",
+            xl: "[--gap-unit:6]",
+        }),
         maxWidth: new SizeTheme({ xs: 'max-w-3xl', sm: 'max-w-4xl', md: 'max-w-5xl', lg: 'max-w-6xl', xl: 'max-w-7xl' }),
     },
     layout: {
@@ -5162,7 +5195,13 @@ const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full
 
 const defaultColTheme = new ComponentTheme("div", "", {
     size: {
-        gap: new GapTheme(),
+        gap: new GapTheme({
+            xs: "[--gap-unit:2]",
+            sm: "[--gap-unit:3]",
+            md: "[--gap-unit:4]",
+            lg: "[--gap-unit:5]",
+            xl: "[--gap-unit:6]",
+        }),
     },
     layout: {
         ...defaultLayoutsThemes,
@@ -5183,9 +5222,15 @@ const defaultColTheme = new ComponentTheme("div", "", {
 
 const defaultStackTheme = new ComponentTheme("div", "", {
     size: {
-        px: new PxTheme({ xs: 'px-2', sm: 'px-3', md: 'px-4', lg: 'px-5', xl: 'px-6' }),
-        py: new PyTheme({ xs: 'py-2', sm: 'py-3', md: 'py-4', lg: 'py-5', xl: 'py-6' }),
-        gap: new GapTheme(),
+        px: new PxTheme(),
+        py: new PyTheme(),
+        gap: new GapTheme({
+            xs: "[--gap-unit:2]",
+            sm: "[--gap-unit:3]",
+            md: "[--gap-unit:4]",
+            lg: "[--gap-unit:5]",
+            xl: "[--gap-unit:6]",
+        }),
         breakpoint: new BreakpointTheme(),
     },
     layout: {
@@ -5207,21 +5252,21 @@ const defaultStackTheme = new ComponentTheme("div", "", {
 
 const defaultSectionTheme = new ComponentTheme("div", "w-full flex-col", {
     size: {
-        px: new PxTheme({
-            xs: 'px-5 max-lg:px-4 max-md:px-3',
-            sm: 'px-6 max-lg:px-5 max-md:px-4',
-            md: 'px-7 max-lg:px-6 max-md:px-5',
-            lg: 'px-8 max-lg:px-7 max-md:px-6',
-            xl: 'px-9 max-lg:px-8 max-md:px-7',
-        }),
+        px: new PxTheme(layoutPaddingClasses, sectionAspectRatioClasses),
         py: new PyTheme({
-            xs: 'py-4 max-md:py-3',
-            sm: 'py-8 max-md:py-6',
-            md: 'py-12 max-md:py-6',
-            lg: 'py-16 max-lg:py-14 max-md:py-12',
-            xl: 'py-20 max-lg:py-16 max-md:py-12',
+            xs: "[--h-unit:4]",
+            sm: "[--h-unit:8]",
+            md: "[--h-unit:12]",
+            lg: "[--h-unit:16]",
+            xl: "[--h-unit:20]",
+        }),
+        gap: new GapTheme({
+            xs: "[--gap-unit:2]",
+            sm: "[--gap-unit:3]",
+            md: "[--gap-unit:4]",
+            lg: "[--gap-unit:5]",
+            xl: "[--gap-unit:6]",
         }),
-        gap: new GapTheme({ xs: 'gap-4', sm: 'gap-6', md: 'gap-8', lg: 'gap-12', xl: 'gap-16' }),
         breakpoint: new BreakpointTheme(),
     },
     appearance: {
@@ -5243,7 +5288,13 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex-col", {
 
 const gridSubThemes = {
     size: {
-        gap: new GapTheme(),
+        gap: new GapTheme({
+            xs: "[--gap-unit:2]",
+            sm: "[--gap-unit:3]",
+            md: "[--gap-unit:4]",
+            lg: "[--gap-unit:5]",
+            xl: "[--gap-unit:6]",
+        }),
     },
     appearance: {
         background: GenericVariantTheme.createLayoutBgAppearanceTheme(),