@vaneui/ui 0.3.1-alpha.20250930203841.cec91ca → 0.3.1-alpha.20251001142553.9da86c7

package/dist/index.js

@@ -55,18 +55,16 @@ const BORDER_VALUES = [BORDER$1, BORDER_T, BORDER_B, BORDER_L, BORDER_R, BORDER_
 /** All border side keys (excluding noBorder since it doesn't have a CSS class) */
 const BORDER_KEYS = [BORDER$1, BORDER_T, BORDER_B, BORDER_L, BORDER_R, BORDER_X, BORDER_Y];
 
-/** Extra-small column breakpoint - responsive grid column sizing for xs screens */
-const XS_COL = 'xsCol';
-/** Small column breakpoint - responsive grid column sizing for sm screens */
-const SM_COL = 'smCol';
-/** Medium column breakpoint - responsive grid column sizing for md screens */
-const MD_COL = 'mdCol';
-/** Large column breakpoint - responsive grid column sizing for lg screens */
-const LG_COL = 'lgCol';
-/** Extra-large column breakpoint - responsive grid column sizing for xl screens */
-const XL_COL = 'xlCol';
+/** Mobile column breakpoint - switch to column layout on mobile devices (max-mobile: 20rem) */
+const MOBILE_COL = 'mobileCol';
+/** Tablet column breakpoint - switch to column layout on tablet devices (max-tablet: 40rem) */
+const TABLET_COL = 'tabletCol';
+/** Laptop column breakpoint - switch to column layout on laptop devices (max-laptop: 64rem) */
+const LAPTOP_COL = 'laptopCol';
+/** Desktop column breakpoint - switch to column layout on desktop devices (max-desktop: 80rem) */
+const DESKTOP_COL = 'desktopCol';
 /** All breakpoint property values */
-const BREAKPOINT_VALUES = [XS_COL, SM_COL, MD_COL, LG_COL, XL_COL];
+const BREAKPOINT_VALUES = [MOBILE_COL, TABLET_COL, LAPTOP_COL, DESKTOP_COL];
 
 /** Inline display - flows with text */
 const INLINE = 'inline';
@@ -148,18 +146,16 @@ const NO_GAP = 'noGap';
 /** All gap property values */
 const GAP_VALUES = [GAP, NO_GAP];
 
-/** Hide element on extra-small screens and up - visible only on mobile */
-const XS_HIDE = 'xsHide';
-/** Hide element on small screens and up - visible only on extra-small mobile */
-const SM_HIDE = 'smHide';
-/** Hide element on medium screens and up - visible only on small screens and below */
-const MD_HIDE = 'mdHide';
-/** Hide element on large screens and up - visible only on medium screens and below */
-const LG_HIDE = 'lgHide';
-/** Hide element on extra-large screens and up - visible only on large screens and below */
-const XL_HIDE = 'xlHide';
+/** Hide element on mobile devices and below (max-mobile: 20rem) */
+const MOBILE_HIDE = 'mobileHide';
+/** Hide element on tablet devices and below (max-tablet: 40rem) */
+const TABLET_HIDE = 'tabletHide';
+/** Hide element on laptop devices and below (max-laptop: 64rem) */
+const LAPTOP_HIDE = 'laptopHide';
+/** Hide element on desktop devices and below (max-desktop: 80rem) */
+const DESKTOP_HIDE = 'desktopHide';
 /** All hide property values */
-const HIDE_VALUES = [XS_HIDE, SM_HIDE, MD_HIDE, LG_HIDE, XL_HIDE];
+const HIDE_VALUES = [MOBILE_HIDE, TABLET_HIDE, LAPTOP_HIDE, DESKTOP_HIDE];
 
 /** Align items to the start of the cross axis */
 const ITEMS_START = 'itemsStart';
@@ -568,16 +564,14 @@ const ComponentCategories = {
 class HideTheme extends BaseTheme {
     constructor() {
         super(...arguments);
-        /** Hide element on extra-small screens and below */
-        this.xsHide = "max-xs:hidden";
-        /** Hide element on small screens and below */
-        this.smHide = "max-sm:hidden";
-        /** Hide element on medium screens and below */
-        this.mdHide = "max-md:hidden";
-        /** Hide element on large screens and below */
-        this.lgHide = "max-lg:hidden";
-        /** Hide element on extra-large screens and below */
-        this.xlHide = "max-xl:hidden";
+        /** Hide element on mobile devices and below (max-mobile: 20rem) */
+        this.mobileHide = "max-mobile:hidden";
+        /** Hide element on tablet devices and below (max-tablet: 40rem) */
+        this.tabletHide = "max-tablet:hidden";
+        /** Hide element on laptop devices and below (max-laptop: 64rem) */
+        this.laptopHide = "max-laptop:hidden";
+        /** Hide element on desktop devices and below (max-desktop: 80rem) */
+        this.desktopHide = "max-desktop:hidden";
     }
     getClasses(extractedKeys) {
         return [(extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.hide) ? this[extractedKeys.hide] : ''];
@@ -753,64 +747,6 @@ 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);
@@ -3629,8 +3565,7 @@ const defaultTypographyThemes = {
     fontStyle: new FontStyleTheme(),
     textDecoration: new TextDecorationTheme(),
     textTransform: new TextTransformTheme(),
-    textAlign: new TextAlignTheme(),
-    lineHeight: new LineHeightTheme()
+    textAlign: new TextAlignTheme()
 };
 class ComponentTheme {
     constructor(tag, base, themes, defaults = {}, categories, tagFunction) {
@@ -3736,9 +3671,9 @@ class FontSizeTheme extends BaseTheme {
     getClasses(extractedKeys) {
         if (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) {
             const fsUnitClass = this[extractedKeys.size];
-            return fsUnitClass ? [fsUnitClass, "text-(--fs)"] : [];
+            return fsUnitClass ? [fsUnitClass, "text-(length:--fs)"] : [];
         }
-        return [this.md, "text-(--fs)"];
+        return [this.md, "text-(length:--fs)"];
     }
     // Static factory methods for different text size ranges
     static createForPageTitle() {
@@ -3770,40 +3705,64 @@ class FontSizeTheme extends BaseTheme {
     }
 }
 
-class SizeTheme extends BaseTheme {
-    constructor(sizeMap, useDefaultKey = true) {
+class LineHeightTheme extends BaseTheme {
+    constructor(customMapping) {
         super();
-        /** Extra-small size variant */
-        this.xs = "";
-        /** Small size variant */
-        this.sm = "";
-        /** Medium size variant (default) */
-        this.md = "";
-        /** Large size variant */
-        this.lg = "";
-        /** Extra-large size variant */
-        this.xl = "";
-        this.useDefaultKey = useDefaultKey;
-        if (sizeMap instanceof FontSizeTheme) {
-            this.fontSizeTheme = sizeMap;
-            ComponentKeys.size.forEach((key) => {
-                this[key] = sizeMap[key];
-            });
-        }
-        else {
-            ComponentKeys.size.forEach((key) => {
-                var _a;
-                this[key] = (_a = sizeMap === null || sizeMap === void 0 ? void 0 : sizeMap[key]) !== null && _a !== void 0 ? _a : "";
-            });
+        /** 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) {
-        var _a;
-        if (this.fontSizeTheme) {
-            return this.fontSizeTheme.getClasses(extractedKeys);
+        if (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) {
+            const lhUnitClass = this[extractedKeys.size];
+            return lhUnitClass ? [lhUnitClass, "leading-(--lh)"] : [];
         }
-        const size = (_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) !== null && _a !== void 0 ? _a : (this.useDefaultKey ? 'md' : undefined);
-        return size ? [this[size]] : [''];
+        return [this.md, "leading-(--lh)"];
+    }
+    static createDefault() {
+        return new LineHeightTheme();
+    }
+    // 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
+        });
     }
 }
 
@@ -4026,9 +3985,9 @@ class PaddingTheme extends BaseTheme {
 
 /** Horizontal padding theme - controls left and right padding */
 class PxTheme extends PaddingTheme {
-    constructor(aspectRatioMap, isUIComponent = false) {
+    constructor(aspectRatio, isUIComponent = false) {
         super();
-        this.aspectRatioMap = aspectRatioMap;
+        this.aspectRatioMap = aspectRatio;
         this.isUIComponent = isUIComponent;
         // PxTheme should not set any padding classes - that's PyTheme's job
         // PxTheme only handles aspect-ratio
@@ -4732,6 +4691,7 @@ const themeDefaults = {
     container: {
         noRing: true,
         flex: true,
+        column: true,
         md: true,
         itemsCenter: true,
         gap: true,
@@ -4906,7 +4866,6 @@ 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
@@ -4919,7 +4878,14 @@ const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-poin
         px: new PxTheme(buttonAspectRatioClasses, true),
         py: new PyTheme(uiPaddingClasses, true),
         gap: new GapTheme(true),
-        text: new SizeTheme({ xs: 'text-xs', sm: 'text-sm', md: 'text-base', lg: 'text-lg', xl: 'text-xl' }),
+        text: new FontSizeTheme(),
+        lineHeight: new LineHeightTheme({
+            xs: "[--lh-unit:1.3]",
+            sm: "[--lh-unit:1.3]",
+            md: "[--lh-unit:1.3]",
+            lg: "[--lh-unit:1.3]",
+            xl: "[--lh-unit:1.3]"
+        }),
     },
     appearance: {
         background: GenericVariantTheme.createBgAppearanceTheme(),
@@ -4957,7 +4923,8 @@ const defaultBadgeTheme = new ComponentTheme("span", "w-fit h-fit transition-all
         px: new PxTheme(badgeAspectRatioClasses, true),
         py: new PyTheme(uiPaddingClasses, true),
         gap: new GapTheme(true),
-        text: new SizeTheme({ xs: 'text-xs', sm: 'text-sm', md: 'text-base', lg: 'text-lg', xl: 'text-xl' })
+        text: new FontSizeTheme(),
+        lineHeight: LineHeightTheme.createDefault()
     },
     appearance: {
         background: GenericVariantTheme.createSimpleUIElementBgAppearanceTheme(),
@@ -4999,7 +4966,8 @@ const defaultChipTheme = new ComponentTheme("span", "w-fit h-fit transition-all
     size: {
         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' }),
+        text: new FontSizeTheme(),
+        lineHeight: LineHeightTheme.createDefault(),
         gap: new GapTheme(true)
     },
     appearance: {
@@ -5042,7 +5010,8 @@ const defaultCodeTheme = new ComponentTheme("code", "", {
     size: {
         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' }),
+        text: new FontSizeTheme(),
+        lineHeight: LineHeightTheme.createDefault(),
         gap: new GapTheme(true)
     },
     appearance: {
@@ -5175,18 +5144,16 @@ class ListStyleTheme extends BaseTheme {
     }
 }
 
-const createTypographyComponentTheme = (tag, base = "text-balance", fontSizeTheme = new FontSizeTheme(), defaults = {}, lineHeightTheme) => {
-    const typographyThemes = lineHeightTheme
-        ? { ...defaultTypographyThemes, lineHeight: lineHeightTheme }
-        : defaultTypographyThemes;
+const createTypographyComponentTheme = (tag, base = "text-balance", fontSizeTheme = new FontSizeTheme(), defaults = {}, lineHeightTheme = LineHeightTheme.createDefault()) => {
     return new ComponentTheme(tag, base, {
         size: {
             text: fontSizeTheme,
+            lineHeight: lineHeightTheme,
         },
         appearance: {
             text: GenericVariantTheme.createTypographyTextTheme(),
         },
-        typography: typographyThemes,
+        typography: defaultTypographyThemes,
         layout: defaultLayoutsThemes,
     }, defaults, TYPOGRAPHY_CATEGORIES, (props) => {
         // Determine tag based on href prop
@@ -5246,16 +5213,14 @@ const listTheme = new ComponentTheme("ul", "list-inside", {
 class BreakpointTheme extends BaseTheme {
     constructor() {
         super(...arguments);
-        /** Switch to column layout on extra-small screens and below */
-        this.xsCol = "max-xs:flex-col";
-        /** Switch to column layout on small screens and below */
-        this.smCol = "max-sm:flex-col";
-        /** Switch to column layout on medium screens and below */
-        this.mdCol = "max-md:flex-col";
-        /** Switch to column layout on large screens and below */
-        this.lgCol = "max-lg:flex-col";
-        /** Switch to column layout on extra-large screens and below */
-        this.xlCol = "max-xl:flex-col";
+        /** Switch to column layout on mobile devices and below (max-mobile: 20rem) */
+        this.mobileCol = "max-mobile:flex-col";
+        /** Switch to column layout on tablet devices and below (max-tablet: 40rem) */
+        this.tabletCol = "max-tablet:flex-col";
+        /** Switch to column layout on laptop devices and below (max-laptop: 64rem) */
+        this.laptopCol = "max-laptop:flex-col";
+        /** Switch to column layout on desktop devices and below (max-desktop: 80rem) */
+        this.desktopCol = "max-desktop:flex-col";
     }
     getClasses(extractedKeys) {
         return (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.breakpoint) ? [this[extractedKeys.breakpoint] || ''] : [];
@@ -5264,9 +5229,22 @@ class BreakpointTheme extends BaseTheme {
 
 const defaultCardTheme = new ComponentTheme("div", "", {
     size: {
-        px: new PxTheme(),
-        py: new PyTheme(),
-        gap: new GapTheme(true),
+        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({
+            xs: "[--py-unit:2]",
+            sm: "[--py-unit:4]",
+            md: "[--py-unit:6]",
+            lg: "[--py-unit:8]",
+            xl: "[--py-unit:10]",
+        }),
+        lineHeight: LineHeightTheme.createDefault(),
+        gap: new GapTheme(false),
     },
     layout: {
         ...defaultLayoutsThemes,
@@ -5321,7 +5299,32 @@ const defaultDividerTheme = new ComponentTheme("div", "h-px w-full", {
     layout: defaultLayoutsThemes,
 }, themeDefaults.divider, DIVIDER_CATEGORIES);
 
-const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full", {
+class SizeTheme extends BaseTheme {
+    constructor(sizeMap) {
+        super();
+        /** Extra-small size variant */
+        this.xs = "";
+        /** Small size variant */
+        this.sm = "";
+        /** Medium size variant (default) */
+        this.md = "";
+        /** Large size variant */
+        this.lg = "";
+        /** Extra-large size variant */
+        this.xl = "";
+        ComponentKeys.size.forEach((key) => {
+            var _a;
+            this[key] = (_a = sizeMap === null || sizeMap === void 0 ? void 0 : sizeMap[key]) !== null && _a !== void 0 ? _a : "";
+        });
+    }
+    getClasses(extractedKeys) {
+        var _a;
+        const size = (_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) !== null && _a !== void 0 ? _a : 'md';
+        return size ? [this[size]] : [''];
+    }
+}
+
+const defaultContainerTheme = new ComponentTheme("div", "mx-auto w-full", {
     size: {
         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' }),
@@ -5388,22 +5391,21 @@ 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(sectionAspectRatioClasses),
+        px: new PxTheme({
+            xs: "[--aspect-ratio:2.5]",
+            sm: "[--aspect-ratio:2]",
+            md: "[--aspect-ratio:1.75]",
+            lg: "[--aspect-ratio:1.6]",
+            xl: "[--aspect-ratio:1.5]",
+        }),
         py: new PyTheme({
-            xs: "[--py-unit:4]",
-            sm: "[--py-unit:8]",
-            md: "[--py-unit:12]",
-            lg: "[--py-unit:16]",
-            xl: "[--py-unit:20]",
+            xs: "[--py-unit:4]  max-laptop:[--py-unit:3]  max-tablet:[--py-unit:2]",
+            sm: "[--py-unit:8]  max-laptop:[--py-unit:4]  max-tablet:[--py-unit:2]",
+            md: "[--py-unit:12] max-laptop:[--py-unit:6]  max-tablet:[--py-unit:2]",
+            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(),
         breakpoint: new BreakpointTheme(),
@@ -5508,6 +5510,7 @@ const defaultCheckboxWrapperTheme = new ComponentTheme("span", "", {
 const defaultLabelTheme = new ComponentTheme("label", "has-[input]:cursor-pointer cursor-default", {
     size: {
         text: new FontSizeTheme(),
+        lineHeight: LineHeightTheme.createDefault(),
         gap: new GapTheme(true),
     },
     appearance: {
@@ -5539,20 +5542,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(inputAspectRatioClasses, 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(uiPaddingClasses, true),
         gap: new GapTheme(true),
-        text: new SizeTheme({ xs: 'text-xs', sm: 'text-sm', md: 'text-base', lg: 'text-lg', xl: 'text-xl' }),
+        text: new FontSizeTheme(),
+        lineHeight: LineHeightTheme.createDefault(),
     },
     appearance: {
         background: GenericVariantTheme.createSimpleUIElementBgAppearanceTheme(),
@@ -5914,6 +5916,8 @@ exports.Container = Container;
 exports.DANGER = DANGER;
 exports.DECIMAL = DECIMAL;
 exports.DEFAULT = DEFAULT;
+exports.DESKTOP_COL = DESKTOP_COL;
+exports.DESKTOP_HIDE = DESKTOP_HIDE;
 exports.DISC = DISC;
 exports.DISPLAY_VALUES = DISPLAY_VALUES;
 exports.DIVIDER_CATEGORIES = DIVIDER_CATEGORIES;
@@ -5973,12 +5977,12 @@ exports.JUSTIFY_START = JUSTIFY_START;
 exports.JUSTIFY_STRETCH = JUSTIFY_STRETCH;
 exports.JUSTIFY_VALUES = JUSTIFY_VALUES;
 exports.LABEL_CATEGORIES = LABEL_CATEGORIES;
+exports.LAPTOP_COL = LAPTOP_COL;
+exports.LAPTOP_HIDE = LAPTOP_HIDE;
 exports.LAYOUT_CORE = LAYOUT_CORE;
 exports.LAYOUT_FLEX = LAYOUT_FLEX;
 exports.LAYOUT_FULL = LAYOUT_FULL;
 exports.LG = LG;
-exports.LG_COL = LG_COL;
-exports.LG_HIDE = LG_HIDE;
 exports.LIGHT = LIGHT;
 exports.LINE_THROUGH = LINE_THROUGH;
 exports.LINK = LINK;
@@ -5991,9 +5995,9 @@ exports.Link = Link;
 exports.List = List;
 exports.ListItem = ListItem;
 exports.MD = MD;
-exports.MD_COL = MD_COL;
-exports.MD_HIDE = MD_HIDE;
 exports.MEDIUM = MEDIUM;
+exports.MOBILE_COL = MOBILE_COL;
+exports.MOBILE_HIDE = MOBILE_HIDE;
 exports.MODE_VALUES = MODE_VALUES;
 exports.MONO = MONO;
 exports.ModeKeys = ModeKeys;
@@ -6053,8 +6057,6 @@ exports.SHAPE_VALUES = SHAPE_VALUES;
 exports.SHARP = SHARP;
 exports.SIZE_VALUES = SIZE_VALUES;
 exports.SM = SM;
-exports.SM_COL = SM_COL;
-exports.SM_HIDE = SM_HIDE;
 exports.STACK_CATEGORIES = STACK_CATEGORIES;
 exports.STATIC = STATIC;
 exports.STICKY = STICKY;
@@ -6063,6 +6065,8 @@ exports.Section = Section;
 exports.SectionTitle = SectionTitle;
 exports.Stack = Stack;
 exports.TABLE = TABLE;
+exports.TABLET_COL = TABLET_COL;
+exports.TABLET_HIDE = TABLET_HIDE;
 exports.TABLE_CELL = TABLE_CELL;
 exports.TERTIARY = TERTIARY;
 exports.TEXT_ALIGN_VALUES = TEXT_ALIGN_VALUES;
@@ -6093,11 +6097,7 @@ exports.VISUAL_LAYOUT = VISUAL_LAYOUT;
 exports.WARNING = WARNING;
 exports.WRAP_VALUES = WRAP_VALUES;
 exports.XL = XL;
-exports.XL_COL = XL_COL;
-exports.XL_HIDE = XL_HIDE;
 exports.XS = XS;
-exports.XS_COL = XS_COL;
-exports.XS_HIDE = XS_HIDE;
 exports.defaultTheme = defaultTheme;
 exports.themeDefaults = themeDefaults;
 exports.useTheme = useTheme;