@vaneui/ui 0.3.1-alpha.20250925201320.8b6a424 → 0.3.1-alpha.20250927164620.fec55bc

package/dist/index.esm.js

@@ -751,6 +751,64 @@ class TextAlignTheme extends BaseTheme {
     }
 }
 
+class LineHeightTheme extends BaseTheme {
+    constructor(customMapping) {
+        super();
+        /** Extra-small line height - matches text-xs default line height */
+        this.xs = "[--lh-unit:1.333]"; // calc(1 / 0.75) ≈ 1.333
+        /** Small line height - matches text-sm default line height */
+        this.sm = "[--lh-unit:1.429]"; // calc(1.25 / 0.875) ≈ 1.429
+        /** Medium line height - matches text-base default line height */
+        this.md = "[--lh-unit:1.5]"; // calc(1.5 / 1) = 1.5
+        /** Large line height - matches text-lg default line height */
+        this.lg = "[--lh-unit:1.556]"; // calc(1.75 / 1.125) ≈ 1.556
+        /** Extra-large line height - matches text-xl default line height */
+        this.xl = "[--lh-unit:1.4]"; // calc(1.75 / 1.25) = 1.4
+        if (customMapping) {
+            this.xs = customMapping.xs || this.xs;
+            this.sm = customMapping.sm || this.sm;
+            this.md = customMapping.md || this.md;
+            this.lg = customMapping.lg || this.lg;
+            this.xl = customMapping.xl || this.xl;
+        }
+    }
+    getClasses(extractedKeys) {
+        if (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) {
+            const lhUnitClass = this[extractedKeys.size];
+            return lhUnitClass ? [lhUnitClass, "leading-(--lh)"] : [];
+        }
+        return [this.md, "leading-(--lh)"];
+    }
+    // Static factory methods for different text size ranges
+    static createForSectionTitle() {
+        return new LineHeightTheme({
+            xs: "[--lh-unit:1.333]", // text-2xl: calc(2 / 1.5) ≈ 1.333
+            sm: "[--lh-unit:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
+            md: "[--lh-unit:1.111]", // text-4xl: calc(2.5 / 2.25) ≈ 1.111
+            lg: "[--lh-unit:1]", // text-5xl: 1
+            xl: "[--lh-unit:1]" // text-6xl+: 1
+        });
+    }
+    static createForPageTitle() {
+        return new LineHeightTheme({
+            xs: "[--lh-unit:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
+            sm: "[--lh-unit:1.111]", // text-4xl: calc(2.5 / 2.25) ≈ 1.111
+            md: "[--lh-unit:1]", // text-5xl: 1
+            lg: "[--lh-unit:1]", // text-6xl: 1
+            xl: "[--lh-unit:1]" // text-7xl: 1
+        });
+    }
+    static createForTitle() {
+        return new LineHeightTheme({
+            xs: "[--lh-unit:1.556]", // text-lg: calc(1.75 / 1.125) ≈ 1.556
+            sm: "[--lh-unit:1.4]", // text-xl: calc(1.75 / 1.25) = 1.4
+            md: "[--lh-unit:1.333]", // text-2xl: calc(2 / 1.5) ≈ 1.333
+            lg: "[--lh-unit:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
+            xl: "[--lh-unit:1.111]" // text-4xl: calc(2.5 / 2.25) ≈ 1.111
+        });
+    }
+}
+
 class DisplayTheme extends BaseTheme {
     constructor() {
         super(...arguments);
@@ -3569,7 +3627,8 @@ const defaultTypographyThemes = {
     fontStyle: new FontStyleTheme(),
     textDecoration: new TextDecorationTheme(),
     textTransform: new TextTransformTheme(),
-    textAlign: new TextAlignTheme()
+    textAlign: new TextAlignTheme(),
+    lineHeight: new LineHeightTheme()
 };
 class ComponentTheme {
     constructor(tag, base, themes, defaults = {}, categories, tagFunction) {
@@ -3677,6 +3736,7 @@ class SizeTheme extends BaseTheme {
     }
 }
 
+// Reusable layout classes used by multiple components
 const layoutGapClasses = {
     xs: "[--gap-unit:2]",
     sm: "[--gap-unit:3]",
@@ -3691,14 +3751,7 @@ const layoutPaddingClasses = {
     lg: "[--py-unit:5]",
     xl: "[--py-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]",
-};
-// UI component classes
+// Reusable UI component classes used by multiple components
 const uiPaddingClasses = {
     xs: "[--py-unit:1]",
     sm: "[--py-unit:1.5]",
@@ -3706,123 +3759,72 @@ const uiPaddingClasses = {
     lg: "[--py-unit:2.5]",
     xl: "[--py-unit:3]",
 };
-// Button-specific aspect ratios (px-2,3,4,5,6 vs py-1,1.5,2,2.5,3)
-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
-};
-// Badge aspect ratios (same as button)
-const badgeAspectRatioClasses = {
-    xs: "[--aspect-ratio:2]",
-    sm: "[--aspect-ratio:2]",
-    md: "[--aspect-ratio:2]",
-    lg: "[--aspect-ratio:2]",
-    xl: "[--aspect-ratio:2]",
-};
-// Input aspect ratios (same as button)
-const inputAspectRatioClasses = {
-    xs: "[--aspect-ratio:2]",
-    sm: "[--aspect-ratio:2]",
-    md: "[--aspect-ratio:2]",
-    lg: "[--aspect-ratio:2]",
-    xl: "[--aspect-ratio:2]",
-};
-// Code-specific classes (px-1,1.5,1.5,2,2 vs py-0,0.5,1,1,1)
-const codeAspectRatioClasses = {
-    xs: "[--aspect-ratio:1]", // px-1 vs py-0 (but py-0 is 0, so use py-unit but ratio for px)
-    sm: "[--aspect-ratio:3]", // px-1.5 vs py-0.5 = 3  
-    md: "[--aspect-ratio:1.5]", // px-1.5 vs py-1 = 1.5
-    lg: "[--aspect-ratio:2]", // px-2 vs py-1 = 2
-    xl: "[--aspect-ratio:2]", // px-2 vs py-1 = 2
-};
-const codePyClasses = {
-    xs: "[--py-unit:0]",
-    sm: "[--py-unit:0.5]",
-    md: "[--py-unit:1]",
-    lg: "[--py-unit:1]",
-    xl: "[--py-unit:1]",
-};
-// Chip-specific classes (px-2,2.5,3,3.5,4 vs py-0.5,1,1.5,2,2.5)
-const chipAspectRatioClasses = {
-    xs: "[--aspect-ratio:4]", // px-2 vs py-0.5 = 4
-    sm: "[--aspect-ratio:2.5]", // px-2.5 vs py-1 = 2.5
-    md: "[--aspect-ratio:2]", // px-3 vs py-1.5 = 2
-    lg: "[--aspect-ratio:1.75]", // px-3.5 vs py-2 = 1.75
-    xl: "[--aspect-ratio:1.6]", // px-4 vs py-2.5 = 1.6
-};
-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 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(sizeMap, isUIComponent = false) {
+    constructor(isUIComponent = false) {
         super();
-        /** Extra-small gap - uses CSS variable --layout-gap-xs */
-        this.xs = layoutGapClasses.xs;
-        /** Small gap - uses CSS variable --layout-gap-sm */
-        this.sm = layoutGapClasses.sm;
-        /** Medium gap - uses CSS variable --layout-gap-md */
-        this.md = layoutGapClasses.md;
-        /** Large gap - uses CSS variable --layout-gap-lg */
-        this.lg = layoutGapClasses.lg;
-        /** Extra-large gap - uses CSS variable --layout-gap-xl */
-        this.xl = layoutGapClasses.xl;
-        this.isUIComponent = isUIComponent;
-        if (sizeMap) {
-            ComponentKeys.size.forEach((key) => {
-                if (sizeMap[key] !== undefined) {
-                    this[key] = sizeMap[key];
-                }
-            });
-        }
+        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;
+        this.lg = gapClasses.lg;
+        this.xl = gapClasses.xl;
     }
     getClasses(extractedKeys) {
         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'];
-            const gapVar = this.isUIComponent ? "gap-(--ui-gap)" : "gap-(--gap)";
-            return gapClass ? [gapClass, gapVar] : [];
+            return gapClass ? [gapClass, this.gapVarClass] : [];
         }
         return [];
     }
 }
 
-const uiBorderRadiusClasses = {
-    xs: "rounded-(--ui-br-xs)",
-    sm: "rounded-(--ui-br-sm)",
-    md: "rounded-(--ui-br-md)",
-    lg: "rounded-(--ui-br-lg)",
-    xl: "rounded-(--ui-br-xl)",
-};
-const layoutBorderRadiusClasses = {
-    xs: "rounded-(--layout-br-xs)",
-    sm: "rounded-(--layout-br-sm)",
-    md: "rounded-(--layout-br-md)",
-    lg: "rounded-(--layout-br-lg)",
-    xl: "rounded-(--layout-br-xl)",
-};
-
 class RadiusTheme extends BaseTheme {
-    constructor(roundedClasses) {
+    constructor(roundedClasses, isUIComponent = false) {
         super();
         /** Pill shape - fully rounded corners */
         this.pill = "rounded-full";
         /** Sharp shape - no rounded corners */
         this.sharp = "rounded-none";
         this.rounded = roundedClasses;
+        this.isUIComponent = isUIComponent;
     }
-    static createUITheme(customRounded) {
-        return new RadiusTheme(customRounded || uiBorderRadiusClasses);
+    static createCheckboxTheme() {
+        return new RadiusTheme({
+            xs: '[--br-unit:1]',
+            sm: '[--br-unit:1.5]',
+            md: '[--br-unit:2]',
+            lg: '[--br-unit:2.5]',
+            xl: '[--br-unit:3]'
+        }, true);
+    }
+    static createUITheme() {
+        return new RadiusTheme({
+            xs: '[--br-unit:1]',
+            sm: '[--br-unit:2]',
+            md: '[--br-unit:3]',
+            lg: '[--br-unit:4]',
+            xl: '[--br-unit:5]'
+        }, true);
     }
     static createLayoutTheme() {
-        return new RadiusTheme(layoutBorderRadiusClasses);
+        const brUnitClasses = {
+            xs: '[--br-unit:3]',
+            sm: '[--br-unit:4]',
+            md: '[--br-unit:5]',
+            lg: '[--br-unit:6]',
+            xl: '[--br-unit:7]'
+        };
+        return new RadiusTheme(brUnitClasses, false);
     }
     getClasses(extractedKeys) {
         var _a, _b;
@@ -3834,8 +3836,9 @@ class RadiusTheme extends BaseTheme {
             case 'sharp':
                 return [this.sharp];
             case 'rounded': {
-                const roundedClass = this.rounded[size];
-                return roundedClass ? [roundedClass] : [];
+                const brUnitClass = this.rounded[size];
+                const roundedVar = this.isUIComponent ? "rounded-(--ui-br)" : "rounded-(--br)";
+                return brUnitClass ? [brUnitClass, roundedVar] : [];
             }
             default:
                 return [];
@@ -3952,32 +3955,26 @@ class PaddingTheme extends BaseTheme {
 
 /** Horizontal padding theme - controls left and right padding */
 class PxTheme extends PaddingTheme {
-    constructor(sizeMap, aspectRatioMap, isUIComponent = false) {
-        super(sizeMap);
+    constructor(aspectRatioMap, isUIComponent = false) {
+        super();
         this.aspectRatioMap = aspectRatioMap;
         this.isUIComponent = isUIComponent;
-        // Override with PxTheme's default classes if no custom sizeMap provided
-        if (!sizeMap) {
-            ComponentKeys.size.forEach((key) => {
-                this[key] = layoutPaddingClasses[key];
-            });
-        }
+        // PxTheme should not set any padding classes - that's PyTheme's job
+        // PxTheme only handles aspect-ratio
     }
     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);
+            // Only add aspect-ratio class - no padding classes
             if (aspectRatioClass)
                 classes.push(aspectRatioClass);
             // Use UI or layout CSS variables based on component type
             const cssVar = this.isUIComponent ? "px-(--ui-px)" : "px-(--px)";
             classes.push(cssVar);
-            return classes.length > 1 ? classes : [];
+            return classes;
         }
         return [];
     }
@@ -4845,11 +4842,19 @@ const themeDefaults = {
     },
 };
 
+// Button-specific aspect ratios (px-2,3,4,5,6 vs py-1,1.5,2,2.5,3)
+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
+};
 const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-pointer transition-all duration-200 whitespace-nowrap", {
     size: {
-        px: new PxTheme(uiPaddingClasses, buttonAspectRatioClasses, true),
+        px: new PxTheme(buttonAspectRatioClasses, true),
         py: new PyTheme(uiPaddingClasses, true),
-        gap: 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),
+        gap: new GapTheme(true),
         text: new SizeTheme({ xs: 'text-xs', sm: 'text-sm', md: 'text-base', lg: 'text-lg', xl: 'text-xl' }),
     },
     appearance: {
@@ -4875,11 +4880,19 @@ const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-poin
     return props.href ? "a" : "button";
 });
 
+// Badge aspect ratios (same as button)
+const badgeAspectRatioClasses = {
+    xs: "[--aspect-ratio:2]",
+    sm: "[--aspect-ratio:2]",
+    md: "[--aspect-ratio:2]",
+    lg: "[--aspect-ratio:2]",
+    xl: "[--aspect-ratio:2]",
+};
 const defaultBadgeTheme = new ComponentTheme("span", "w-fit h-fit transition-all duration-200 whitespace-nowrap", {
     size: {
-        px: new PxTheme(uiPaddingClasses, badgeAspectRatioClasses, true),
+        px: new PxTheme(badgeAspectRatioClasses, true),
         py: new PyTheme(uiPaddingClasses, true),
-        gap: 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),
+        gap: new GapTheme(true),
         text: new SizeTheme({ xs: 'text-xs', sm: 'text-sm', md: 'text-base', lg: 'text-lg', xl: 'text-xl' })
     },
     appearance: {
@@ -4904,12 +4917,26 @@ 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(chipPyClasses, chipAspectRatioClasses, true),
+        px: new PxTheme(chipAspectRatioClasses, true),
         py: new PyTheme(chipPyClasses, true),
         text: new SizeTheme({ xs: 'text-xs', sm: 'text-sm', md: 'text-base', lg: 'text-lg', xl: 'text-xl' }),
-        gap: 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)
+        gap: new GapTheme(true)
     },
     appearance: {
         background: GenericVariantTheme.createSimpleUIElementBgAppearanceTheme(),
@@ -4933,12 +4960,26 @@ 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(codePyClasses, codeAspectRatioClasses, true),
+        px: new PxTheme(codeAspectRatioClasses, true),
         py: new PyTheme(codePyClasses, true),
         text: new SizeTheme({ xs: 'text-xs', sm: 'text-sm', md: 'text-sm', lg: 'text-base', xl: 'text-lg' }),
-        gap: new GapTheme({ xs: '[--gap-unit:0.5]', sm: '[--gap-unit:1]', md: '[--gap-unit:1.5]', lg: '[--gap-unit:2]', xl: '[--gap-unit:2.5]' }, true)
+        gap: new GapTheme(true)
     },
     appearance: {
         background: GenericVariantTheme.createSimpleUIElementBgAppearanceTheme(),
@@ -5070,7 +5111,10 @@ class ListStyleTheme extends BaseTheme {
     }
 }
 
-const createTypographyComponentTheme = (tag, base = "text-balance", textSizeMap = textSizeClasses, defaults = {}) => {
+const createTypographyComponentTheme = (tag, base = "text-balance", textSizeMap = textSizeClasses, defaults = {}, lineHeightTheme) => {
+    const typographyThemes = lineHeightTheme
+        ? { ...defaultTypographyThemes, lineHeight: lineHeightTheme }
+        : defaultTypographyThemes;
     return new ComponentTheme(tag, base, {
         size: {
             text: new SizeTheme(textSizeMap),
@@ -5078,7 +5122,7 @@ const createTypographyComponentTheme = (tag, base = "text-balance", textSizeMap
         appearance: {
             text: GenericVariantTheme.createTypographyTextTheme(),
         },
-        typography: defaultTypographyThemes,
+        typography: typographyThemes,
         layout: defaultLayoutsThemes,
     }, defaults, TYPOGRAPHY_CATEGORIES, (props) => {
         // Determine tag based on href prop
@@ -5092,7 +5136,7 @@ const pageTitleTheme = createTypographyComponentTheme("h1", "text-balance tracki
     md: "text-5xl max-lg:text-4xl max-md:text-3xl",
     lg: "text-6xl max-lg:text-5xl max-md:text-4xl",
     xl: "text-7xl max-lg:text-6xl max-md:text-5xl"
-}, mergeDefaults(themeDefaults.pageTitle, { semibold: true }));
+}, mergeDefaults(themeDefaults.pageTitle, { semibold: true }), LineHeightTheme.createForPageTitle());
 // Section title specific theme
 const sectionTitleTheme = createTypographyComponentTheme("h2", "text-balance w-fit", {
     xs: "text-2xl max-lg:text-xl  max-md:text-lg",
@@ -5100,9 +5144,9 @@ const sectionTitleTheme = createTypographyComponentTheme("h2", "text-balance w-f
     md: "text-4xl max-lg:text-3xl max-md:text-2xl",
     lg: "text-5xl max-lg:text-4xl max-md:text-3xl",
     xl: "text-6xl max-lg:text-5xl max-md:text-4xl"
-}, mergeDefaults(themeDefaults.sectionTitle, { semibold: true }));
+}, mergeDefaults(themeDefaults.sectionTitle, { semibold: true }), LineHeightTheme.createForSectionTitle());
 // Title specific theme
-const titleTheme = createTypographyComponentTheme("h3", "text-balance w-fit", { xs: "text-lg", sm: "text-xl", md: "text-2xl", lg: "text-3xl", xl: "text-4xl" }, mergeDefaults(themeDefaults.title, { semibold: true }));
+const titleTheme = createTypographyComponentTheme("h3", "text-balance w-fit", { xs: "text-lg", sm: "text-xl", md: "text-2xl", lg: "text-3xl", xl: "text-4xl" }, mergeDefaults(themeDefaults.title, { semibold: true }), LineHeightTheme.createForTitle());
 // Text specific theme
 const textTheme = createTypographyComponentTheme("p", "p-0 m-0 w-fit", textSizeClasses, themeDefaults.text);
 // Link specific theme
@@ -5125,6 +5169,7 @@ const listItemTheme = new ComponentTheme("li", "", {
         text: GenericVariantTheme.createTypographyTextTheme(),
     },
     typography: defaultTypographyThemes,
+    layout: defaultLayoutsThemes,
 }, themeDefaults.listItem, TYPOGRAPHY_CATEGORIES);
 // List specific theme
 const listTheme = new ComponentTheme("ul", "list-inside", {
@@ -5169,13 +5214,7 @@ const defaultCardTheme = new ComponentTheme("div", "", {
     size: {
         px: new PxTheme(),
         py: new PyTheme(),
-        gap: new GapTheme({
-            xs: "[--gap-unit:1]",
-            sm: "[--gap-unit:1.5]",
-            md: "[--gap-unit:2]",
-            lg: "[--gap-unit:2.5]",
-            xl: "[--gap-unit:3]",
-        }),
+        gap: new GapTheme(true),
     },
     layout: {
         ...defaultLayoutsThemes,
@@ -5198,13 +5237,7 @@ const defaultCardTheme = new ComponentTheme("div", "", {
 
 const defaultRowTheme = new ComponentTheme("div", "", {
     size: {
-        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(),
         breakpoint: new BreakpointTheme(),
     },
     layout: {
@@ -5238,13 +5271,7 @@ const defaultDividerTheme = new ComponentTheme("div", "h-px w-full", {
 
 const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full", {
     size: {
-        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(),
         maxWidth: new SizeTheme({ xs: 'max-w-3xl', sm: 'max-w-4xl', md: 'max-w-5xl', lg: 'max-w-6xl', xl: 'max-w-7xl' }),
     },
     layout: {
@@ -5266,13 +5293,7 @@ const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full
 
 const defaultColTheme = new ComponentTheme("div", "", {
     size: {
-        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(),
     },
     layout: {
         ...defaultLayoutsThemes,
@@ -5295,13 +5316,7 @@ const defaultStackTheme = new ComponentTheme("div", "", {
     size: {
         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]",
-        }),
+        gap: new GapTheme(),
         breakpoint: new BreakpointTheme(),
     },
     layout: {
@@ -5321,9 +5336,16 @@ const defaultStackTheme = new ComponentTheme("div", "", {
     }
 }, themeDefaults.stack, STACK_CATEGORIES);
 
+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]",
+};
 const defaultSectionTheme = new ComponentTheme("div", "w-full", {
     size: {
-        px: new PxTheme(layoutPaddingClasses, sectionAspectRatioClasses),
+        px: new PxTheme(sectionAspectRatioClasses),
         py: new PyTheme({
             xs: "[--py-unit:4]",
             sm: "[--py-unit:8]",
@@ -5331,13 +5353,7 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full", {
             lg: "[--py-unit:16]",
             xl: "[--py-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(),
         breakpoint: new BreakpointTheme(),
     },
     appearance: {
@@ -5359,13 +5375,7 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full", {
 
 const gridSubThemes = {
     size: {
-        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(),
     },
     appearance: {
         background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
@@ -5400,13 +5410,7 @@ const defaultCheckboxTheme = new ComponentTheme("input", "peer col-start-1 row-s
         border: new BorderTheme(),
         ring: new RingTheme(),
         focusVisible: new FocusVisibleTheme(),
-        radius: RadiusTheme.createUITheme({
-            xs: 'rounded-(--ui-br-xs)',
-            sm: 'rounded-(--ui-br-xs)',
-            md: 'rounded-(--ui-br-sm)',
-            lg: 'rounded-(--ui-br-sm)',
-            xl: 'rounded-(--ui-br-md)'
-        }),
+        radius: RadiusTheme.createCheckboxTheme(),
     },
     appearance: {
         accent: GenericVariantTheme.createAccentColorAppearanceTheme(),
@@ -5452,7 +5456,7 @@ const defaultCheckboxWrapperTheme = new ComponentTheme("span", "", {
 const defaultLabelTheme = new ComponentTheme("label", "has-[input]:cursor-pointer cursor-default", {
     size: {
         text: new SizeTheme(textSizeClasses),
-        gap: new GapTheme({ xs: 'gap-1.5', sm: 'gap-2', md: 'gap-2.5', lg: 'gap-3', xl: 'gap-3' }),
+        gap: new GapTheme(true),
     },
     appearance: {
         text: GenericVariantTheme.createTypographyTextTheme(),
@@ -5483,11 +5487,19 @@ const defaultImgTheme = new ComponentTheme("img", "object-cover", // Default to
     }
 }, themeDefaults.img, IMG_CATEGORIES);
 
+// Input aspect ratios (same as button)
+const inputAspectRatioClasses = {
+    xs: "[--aspect-ratio:2]",
+    sm: "[--aspect-ratio:2]",
+    md: "[--aspect-ratio:2]",
+    lg: "[--aspect-ratio:2]",
+    xl: "[--aspect-ratio:2]",
+};
 const defaultInputTheme = new ComponentTheme("input", "w-full transition-all duration-200", {
     size: {
-        px: new PxTheme(uiPaddingClasses, inputAspectRatioClasses, true),
+        px: new PxTheme(inputAspectRatioClasses, true),
         py: new PyTheme(uiPaddingClasses, true),
-        gap: 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),
+        gap: new GapTheme(true),
         text: new SizeTheme({ xs: 'text-xs', sm: 'text-sm', md: 'text-base', lg: 'text-lg', xl: 'text-xl' }),
     },
     appearance: {