@vaneui/ui 0.3.1-alpha.20251002123640.8bde935 → 0.3.1-alpha.20251110144303.5af7508

package/dist/index.js

@@ -3766,42 +3766,25 @@ 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) {
         super();
         this.gapVarClass = isUIComponent ? "gap-(--ui-gap)" : "gap-(--gap)";
-        const gapClasses = isUIComponent ? uiGapClasses : layoutGapClasses;
+        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;
@@ -3987,7 +3970,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 +4007,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 +4029,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 {
@@ -4876,7 +4880,7 @@ 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),
+        py: PyTheme.createForUI(),
         gap: new GapTheme(true),
         text: new FontSizeTheme(),
         lineHeight: new LineHeightTheme({
@@ -4921,7 +4925,7 @@ 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),
+        py: PyTheme.createForUI(),
         gap: new GapTheme(true),
         text: new FontSizeTheme(),
         lineHeight: LineHeightTheme.createDefault()
@@ -4948,26 +4952,30 @@ const defaultBadgeTheme = new ComponentTheme("span", "w-fit h-fit transition-all
     return props.href ? "a" : "span";
 });
 
-const chipAspectRatioClasses = {
-    xs: "[--aspect-ratio:2]",
-    sm: "[--aspect-ratio:2]",
-    md: "[--aspect-ratio:2]",
-    lg: "[--aspect-ratio:2]",
-    xl: "[--aspect-ratio:2]",
-};
-const chipPyClasses = {
-    xs: "[--py-unit:0.5]",
-    sm: "[--py-unit:1]",
-    md: "[--py-unit:1.5]",
-    lg: "[--py-unit:2]",
-    xl: "[--py-unit:2.5]",
-};
 const defaultChipTheme = new ComponentTheme("span", "w-fit h-fit transition-all duration-200 whitespace-nowrap", {
     size: {
-        px: new PxTheme(chipAspectRatioClasses, true),
-        py: new PyTheme(chipPyClasses, true),
+        px: new PxTheme({
+            xs: "[--aspect-ratio:2]",
+            sm: "[--aspect-ratio:2]",
+            md: "[--aspect-ratio:2]",
+            lg: "[--aspect-ratio:2]",
+            xl: "[--aspect-ratio:2]",
+        }, true),
+        py: new PyTheme({
+            xs: "[--py-unit:0.5]",
+            sm: "[--py-unit:1]",
+            md: "[--py-unit:1.5]",
+            lg: "[--py-unit:2]",
+            xl: "[--py-unit:2.5]",
+        }, true),
         text: new FontSizeTheme(),
-        lineHeight: LineHeightTheme.createDefault(),
+        lineHeight: new LineHeightTheme({
+            xs: "[--lh:1.2]",
+            sm: "[--lh:1.2]",
+            md: "[--lh:1.2]",
+            lg: "[--lh:1.2]",
+            xl: "[--lh:1.2]"
+        }),
         gap: new GapTheme(true)
     },
     appearance: {
@@ -4992,26 +5000,30 @@ const defaultChipTheme = new ComponentTheme("span", "w-fit h-fit transition-all
     return props.href ? "a" : "span";
 });
 
-const codeAspectRatioClasses = {
-    xs: "[--aspect-ratio:1.5]",
-    sm: "[--aspect-ratio:1.5]",
-    md: "[--aspect-ratio:1.5]",
-    lg: "[--aspect-ratio:1.5]",
-    xl: "[--aspect-ratio:1.5]",
-};
-const codePyClasses = {
-    xs: "[--py-unit:0.5]",
-    sm: "[--py-unit:0.5]",
-    md: "[--py-unit:1]",
-    lg: "[--py-unit:1]",
-    xl: "[--py-unit:1]",
-};
 const defaultCodeTheme = new ComponentTheme("code", "", {
     size: {
-        px: new PxTheme(codeAspectRatioClasses, true),
-        py: new PyTheme(codePyClasses, true),
+        px: new PxTheme({
+            xs: "[--aspect-ratio:1.5]",
+            sm: "[--aspect-ratio:1.5]",
+            md: "[--aspect-ratio:1.5]",
+            lg: "[--aspect-ratio:1.5]",
+            xl: "[--aspect-ratio:1.5]",
+        }, true),
+        py: new PyTheme({
+            xs: "[--py-unit:1]",
+            sm: "[--py-unit:1.5]",
+            md: "[--py-unit:1.5]",
+            lg: "[--py-unit:2]",
+            xl: "[--py-unit:2]",
+        }, true),
         text: new FontSizeTheme(),
-        lineHeight: LineHeightTheme.createDefault(),
+        lineHeight: new LineHeightTheme({
+            xs: "[--lh:1.2]",
+            sm: "[--lh:1.2]",
+            md: "[--lh:1.2]",
+            lg: "[--lh:1.2]",
+            xl: "[--lh:1.2]"
+        }),
         gap: new GapTheme(true)
     },
     appearance: {
@@ -5369,7 +5381,13 @@ 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(),
         breakpoint: new BreakpointTheme(),
@@ -5551,7 +5569,7 @@ const defaultInputTheme = new ComponentTheme("input", "w-full transition-all dur
             lg: "[--aspect-ratio:2]",
             xl: "[--aspect-ratio:2]",
         }, true),
-        py: new PyTheme(uiPaddingClasses, true),
+        py: PyTheme.createForUI(),
         gap: new GapTheme(true),
         text: new FontSizeTheme(),
         lineHeight: LineHeightTheme.createDefault(),