@vaneui/ui 0.3.1-alpha.20251110144303.5af7508 → 0.3.1-alpha.20251110155311.4ef4158

package/dist/index.js

@@ -3767,24 +3767,9 @@ class LineHeightTheme extends BaseTheme {
 }
 
 class GapTheme extends BaseTheme {
-    constructor(isUIComponent = false) {
+    constructor(gapClasses, isUIComponent = false) {
         super();
         this.gapVarClass = isUIComponent ? "gap-(--ui-gap)" : "gap-(--gap)";
-        const gapClasses = isUIComponent
-            ? {
-                xs: "[--gap-unit:1]",
-                sm: "[--gap-unit:1.5]",
-                md: "[--gap-unit:2]",
-                lg: "[--gap-unit:2.5]",
-                xl: "[--gap-unit:3]",
-            }
-            : {
-                xs: "[--gap-unit:2]",
-                sm: "[--gap-unit:3]",
-                md: "[--gap-unit:4]",
-                lg: "[--gap-unit:5]",
-                xl: "[--gap-unit:6]",
-            };
         this.xs = gapClasses.xs;
         this.sm = gapClasses.sm;
         this.md = gapClasses.md;
@@ -3799,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 {
@@ -3840,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 [];
     }
 }
 
@@ -4699,7 +4705,6 @@ const themeDefaults = {
         md: true,
         itemsCenter: true,
         gap: true,
-        sharp: true,
     },
     section: {
         md: true,
@@ -4712,7 +4717,6 @@ const themeDefaults = {
         noBorder: true,
         noRing: true,
         noShadow: true,
-        sharp: true,
     },
     stack: {
         md: true,
@@ -4723,7 +4727,6 @@ const themeDefaults = {
         padding: true,
         noBorder: true,
         noRing: true,
-        sharp: true,
     },
     row: {
         row: true,
@@ -4733,7 +4736,6 @@ const themeDefaults = {
         gap: true,
         noBorder: true,
         noRing: true,
-        sharp: true,
     },
     col: {
         column: true,
@@ -4742,7 +4744,6 @@ const themeDefaults = {
         gap: true,
         noBorder: true,
         noRing: true,
-        sharp: true,
     },
     grid2: {
         md: true,
@@ -4881,7 +4882,7 @@ const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-poin
     size: {
         px: new PxTheme(buttonAspectRatioClasses, true),
         py: PyTheme.createForUI(),
-        gap: new GapTheme(true),
+        gap: GapTheme.createForUI(),
         text: new FontSizeTheme(),
         lineHeight: new LineHeightTheme({
             xs: "[--lh:1.3]",
@@ -4926,7 +4927,7 @@ const defaultBadgeTheme = new ComponentTheme("span", "w-fit h-fit transition-all
     size: {
         px: new PxTheme(badgeAspectRatioClasses, true),
         py: PyTheme.createForUI(),
-        gap: new GapTheme(true),
+        gap: GapTheme.createForUI(),
         text: new FontSizeTheme(),
         lineHeight: LineHeightTheme.createDefault()
     },
@@ -4976,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(),
@@ -5024,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(),
@@ -5256,7 +5257,7 @@ const defaultCardTheme = new ComponentTheme("div", "", {
             xl: "[--py-unit:10]",
         }),
         lineHeight: LineHeightTheme.createDefault(),
-        gap: new GapTheme(false),
+        gap: GapTheme.createForLayout(),
     },
     layout: {
         ...defaultLayoutsThemes,
@@ -5279,7 +5280,7 @@ const defaultCardTheme = new ComponentTheme("div", "", {
 
 const defaultRowTheme = new ComponentTheme("div", "", {
     size: {
-        gap: new GapTheme(),
+        gap: GapTheme.createForLayout(),
         breakpoint: new BreakpointTheme(),
     },
     layout: {
@@ -5338,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: {
@@ -5360,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,
@@ -5389,7 +5390,7 @@ const defaultStackTheme = new ComponentTheme("div", "", {
             xl: "[--aspect-ratio:1]",
         }),
         py: new PyTheme(),
-        gap: new GapTheme(),
+        gap: GapTheme.createForLayout(),
         breakpoint: new BreakpointTheme(),
     },
     layout: {
@@ -5425,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: {
@@ -5447,7 +5454,7 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full", {
 
 const gridSubThemes = {
     size: {
-        gap: new GapTheme(),
+        gap: GapTheme.createForLayout(),
     },
     appearance: {
         background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
@@ -5529,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(),
@@ -5570,7 +5577,7 @@ const defaultInputTheme = new ComponentTheme("input", "w-full transition-all dur
             xl: "[--aspect-ratio:2]",
         }, true),
         py: PyTheme.createForUI(),
-        gap: new GapTheme(true),
+        gap: GapTheme.createForUI(),
         text: new FontSizeTheme(),
         lineHeight: LineHeightTheme.createDefault(),
     },