@vaneui/ui 0.3.1-alpha.20251110140105.0a5a63e → 0.3.1-alpha.20251110155311.4ef4158

package/dist/index.js

@@ -3766,42 +3766,10 @@ class LineHeightTheme extends BaseTheme {
     }
 }
 
-// Reusable layout classes used by multiple components
-const layoutGapClasses = {
-    xs: "[--gap-unit:2]",
-    sm: "[--gap-unit:3]",
-    md: "[--gap-unit:4]",
-    lg: "[--gap-unit:5]",
-    xl: "[--gap-unit:6]",
-};
-const layoutPaddingClasses = {
-    xs: "[--py-unit:2]",
-    sm: "[--py-unit:3]",
-    md: "[--py-unit:4]",
-    lg: "[--py-unit:5]",
-    xl: "[--py-unit:6]",
-};
-// Reusable UI component classes used by multiple components
-const uiPaddingClasses = {
-    xs: "[--py-unit:1]",
-    sm: "[--py-unit:1.5]",
-    md: "[--py-unit:2]",
-    lg: "[--py-unit:2.5]",
-    xl: "[--py-unit:3]",
-};
-const uiGapClasses = {
-    xs: "[--gap-unit:1]",
-    sm: "[--gap-unit:1.5]",
-    md: "[--gap-unit:2]",
-    lg: "[--gap-unit:2.5]",
-    xl: "[--gap-unit:3]",
-};
-
 class GapTheme extends BaseTheme {
-    constructor(isUIComponent = false) {
+    constructor(gapClasses, isUIComponent = false) {
         super();
         this.gapVarClass = isUIComponent ? "gap-(--ui-gap)" : "gap-(--gap)";
-        const gapClasses = isUIComponent ? uiGapClasses : layoutGapClasses;
         this.xs = gapClasses.xs;
         this.sm = gapClasses.sm;
         this.md = gapClasses.md;
@@ -3816,6 +3784,24 @@ class GapTheme extends BaseTheme {
         }
         return [];
     }
+    static createForUI() {
+        return new GapTheme({
+            xs: "[--gap-unit:1]",
+            sm: "[--gap-unit:1.5]",
+            md: "[--gap-unit:2]",
+            lg: "[--gap-unit:2.5]",
+            xl: "[--gap-unit:3]",
+        }, true);
+    }
+    static createForLayout() {
+        return new GapTheme({
+            xs: "[--gap-unit:2]",
+            sm: "[--gap-unit:3]",
+            md: "[--gap-unit:4]",
+            lg: "[--gap-unit:5]",
+            xl: "[--gap-unit:6]",
+        }, false);
+    }
 }
 
 class RadiusTheme extends BaseTheme {
@@ -3857,22 +3843,25 @@ class RadiusTheme extends BaseTheme {
         return new RadiusTheme(brUnitClasses, false);
     }
     getClasses(extractedKeys) {
-        var _a, _b;
+        var _a;
         const size = (_a = extractedKeys.size) !== null && _a !== void 0 ? _a : 'md';
-        const shape = (_b = extractedKeys.shape) !== null && _b !== void 0 ? _b : 'rounded';
-        switch (shape) {
-            case 'pill':
-                return [this.pill];
-            case 'sharp':
-                return [this.sharp];
-            case 'rounded': {
-                const brUnitClass = this.rounded[size];
-                const roundedVar = this.isUIComponent ? "rounded-(--ui-br)" : "rounded-(--br)";
-                return brUnitClass ? [brUnitClass, roundedVar] : [];
+        const shape = extractedKeys.shape;
+        if (shape) {
+            switch (shape) {
+                case 'pill':
+                    return [this.pill];
+                case 'sharp':
+                    return [this.sharp];
+                case 'rounded': {
+                    const brUnitClass = this.rounded[size];
+                    const roundedVar = this.isUIComponent ? "rounded-(--ui-br)" : "rounded-(--br)";
+                    return brUnitClass ? [brUnitClass, roundedVar] : [];
+                }
+                default:
+                    return [];
             }
-            default:
-                return [];
         }
+        return [];
     }
 }
 
@@ -3987,7 +3976,13 @@ class PaddingTheme extends BaseTheme {
 class PxTheme extends PaddingTheme {
     constructor(aspectRatio, isUIComponent = false) {
         super();
-        this.aspectRatioMap = aspectRatio;
+        this.aspectRatioMap = aspectRatio ? aspectRatio : {
+            xs: "[--aspect-ratio:1]",
+            sm: "[--aspect-ratio:1]",
+            md: "[--aspect-ratio:1]",
+            lg: "[--aspect-ratio:1]",
+            xl: "[--aspect-ratio:1]",
+        };
         this.isUIComponent = isUIComponent;
         // PxTheme should not set any padding classes - that's PyTheme's job
         // PxTheme only handles aspect-ratio
@@ -4018,7 +4013,13 @@ class PyTheme extends PaddingTheme {
         // Override with PyTheme's default classes if no custom sizeMap provided
         if (!sizeMap) {
             ComponentKeys.size.forEach((key) => {
-                this[key] = layoutPaddingClasses[key];
+                this[key] = {
+                    xs: "[--py-unit:2]",
+                    sm: "[--py-unit:3]",
+                    md: "[--py-unit:4]",
+                    lg: "[--py-unit:5]",
+                    xl: "[--py-unit:6]",
+                }[key];
             });
         }
     }
@@ -4034,6 +4035,15 @@ class PyTheme extends PaddingTheme {
         }
         return [];
     }
+    static createForUI() {
+        return new PyTheme({
+            xs: "[--py-unit:1]",
+            sm: "[--py-unit:1.5]",
+            md: "[--py-unit:2]",
+            lg: "[--py-unit:2.5]",
+            xl: "[--py-unit:3]",
+        }, true);
+    }
 }
 
 class AppearanceTheme extends BaseTheme {
@@ -4695,7 +4705,6 @@ const themeDefaults = {
         md: true,
         itemsCenter: true,
         gap: true,
-        sharp: true,
     },
     section: {
         md: true,
@@ -4708,7 +4717,6 @@ const themeDefaults = {
         noBorder: true,
         noRing: true,
         noShadow: true,
-        sharp: true,
     },
     stack: {
         md: true,
@@ -4719,7 +4727,6 @@ const themeDefaults = {
         padding: true,
         noBorder: true,
         noRing: true,
-        sharp: true,
     },
     row: {
         row: true,
@@ -4729,7 +4736,6 @@ const themeDefaults = {
         gap: true,
         noBorder: true,
         noRing: true,
-        sharp: true,
     },
     col: {
         column: true,
@@ -4738,7 +4744,6 @@ const themeDefaults = {
         gap: true,
         noBorder: true,
         noRing: true,
-        sharp: true,
     },
     grid2: {
         md: true,
@@ -4876,8 +4881,8 @@ const buttonAspectRatioClasses = {
 const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-pointer transition-all duration-200 whitespace-nowrap", {
     size: {
         px: new PxTheme(buttonAspectRatioClasses, true),
-        py: new PyTheme(uiPaddingClasses, true),
-        gap: new GapTheme(true),
+        py: PyTheme.createForUI(),
+        gap: GapTheme.createForUI(),
         text: new FontSizeTheme(),
         lineHeight: new LineHeightTheme({
             xs: "[--lh:1.3]",
@@ -4921,8 +4926,8 @@ const badgeAspectRatioClasses = {
 const defaultBadgeTheme = new ComponentTheme("span", "w-fit h-fit transition-all duration-200 whitespace-nowrap", {
     size: {
         px: new PxTheme(badgeAspectRatioClasses, true),
-        py: new PyTheme(uiPaddingClasses, true),
-        gap: new GapTheme(true),
+        py: PyTheme.createForUI(),
+        gap: GapTheme.createForUI(),
         text: new FontSizeTheme(),
         lineHeight: LineHeightTheme.createDefault()
     },
@@ -4972,7 +4977,7 @@ const defaultChipTheme = new ComponentTheme("span", "w-fit h-fit transition-all
             lg: "[--lh:1.2]",
             xl: "[--lh:1.2]"
         }),
-        gap: new GapTheme(true)
+        gap: GapTheme.createForUI()
     },
     appearance: {
         background: GenericVariantTheme.createSimpleUIElementBgAppearanceTheme(),
@@ -5020,7 +5025,7 @@ const defaultCodeTheme = new ComponentTheme("code", "", {
             lg: "[--lh:1.2]",
             xl: "[--lh:1.2]"
         }),
-        gap: new GapTheme(true)
+        gap: GapTheme.createForUI()
     },
     appearance: {
         background: GenericVariantTheme.createSimpleUIElementBgAppearanceTheme(),
@@ -5252,7 +5257,7 @@ const defaultCardTheme = new ComponentTheme("div", "", {
             xl: "[--py-unit:10]",
         }),
         lineHeight: LineHeightTheme.createDefault(),
-        gap: new GapTheme(false),
+        gap: GapTheme.createForLayout(),
     },
     layout: {
         ...defaultLayoutsThemes,
@@ -5275,7 +5280,7 @@ const defaultCardTheme = new ComponentTheme("div", "", {
 
 const defaultRowTheme = new ComponentTheme("div", "", {
     size: {
-        gap: new GapTheme(),
+        gap: GapTheme.createForLayout(),
         breakpoint: new BreakpointTheme(),
     },
     layout: {
@@ -5334,7 +5339,7 @@ class SizeTheme extends BaseTheme {
 
 const defaultContainerTheme = new ComponentTheme("div", "mx-auto w-full", {
     size: {
-        gap: new GapTheme(),
+        gap: GapTheme.createForLayout(),
         maxWidth: new SizeTheme({ xs: 'max-w-3xl', sm: 'max-w-4xl', md: 'max-w-5xl', lg: 'max-w-6xl', xl: 'max-w-7xl' }),
     },
     layout: {
@@ -5356,7 +5361,7 @@ const defaultContainerTheme = new ComponentTheme("div", "mx-auto w-full", {
 
 const defaultColTheme = new ComponentTheme("div", "", {
     size: {
-        gap: new GapTheme(),
+        gap: GapTheme.createForLayout(),
     },
     layout: {
         ...defaultLayoutsThemes,
@@ -5377,9 +5382,15 @@ const defaultColTheme = new ComponentTheme("div", "", {
 
 const defaultStackTheme = new ComponentTheme("div", "", {
     size: {
-        px: new PxTheme(),
+        px: new PxTheme({
+            xs: "[--aspect-ratio:1]",
+            sm: "[--aspect-ratio:1]",
+            md: "[--aspect-ratio:1]",
+            lg: "[--aspect-ratio:1]",
+            xl: "[--aspect-ratio:1]",
+        }),
         py: new PyTheme(),
-        gap: new GapTheme(),
+        gap: GapTheme.createForLayout(),
         breakpoint: new BreakpointTheme(),
     },
     layout: {
@@ -5415,7 +5426,13 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full", {
             lg: "[--py-unit:16] max-laptop:[--py-unit:8]  max-tablet:[--py-unit:2]",
             xl: "[--py-unit:20] max-laptop:[--py-unit:10] max-tablet:[--py-unit:4]",
         }),
-        gap: new GapTheme(),
+        gap: new GapTheme({
+            xs: "[--gap-unit:4]  max-laptop:[--gap-unit:3]  max-tablet:[--gap-unit:2]",
+            sm: "[--gap-unit:6]  max-laptop:[--gap-unit:5]  max-tablet:[--gap-unit:4]",
+            md: "[--gap-unit:8]  max-laptop:[--gap-unit:6]  max-tablet:[--gap-unit:4]",
+            lg: "[--gap-unit:10] max-laptop:[--gap-unit:8]  max-tablet:[--gap-unit:6]",
+            xl: "[--gap-unit:12] max-laptop:[--gap-unit:10] max-tablet:[--gap-unit:8]",
+        }),
         breakpoint: new BreakpointTheme(),
     },
     appearance: {
@@ -5437,7 +5454,7 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full", {
 
 const gridSubThemes = {
     size: {
-        gap: new GapTheme(),
+        gap: GapTheme.createForLayout(),
     },
     appearance: {
         background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
@@ -5519,7 +5536,7 @@ const defaultLabelTheme = new ComponentTheme("label", "has-[input]:cursor-pointe
     size: {
         text: new FontSizeTheme(),
         lineHeight: LineHeightTheme.createDefault(),
-        gap: new GapTheme(true),
+        gap: GapTheme.createForUI(),
     },
     appearance: {
         text: GenericVariantTheme.createTypographyTextTheme(),
@@ -5559,8 +5576,8 @@ const defaultInputTheme = new ComponentTheme("input", "w-full transition-all dur
             lg: "[--aspect-ratio:2]",
             xl: "[--aspect-ratio:2]",
         }, true),
-        py: new PyTheme(uiPaddingClasses, true),
-        gap: new GapTheme(true),
+        py: PyTheme.createForUI(),
+        gap: GapTheme.createForUI(),
         text: new FontSizeTheme(),
         lineHeight: LineHeightTheme.createDefault(),
     },