@vaneui/ui 0.3.1-alpha.20250930162311.b66aed0 → 0.3.1-alpha.20251001131502.03a0ce2

package/dist/index.esm.js

@@ -751,64 +751,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);
@@ -3627,8 +3569,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) {
@@ -3710,29 +3651,122 @@ class ComponentTheme {
     }
 }
 
-class SizeTheme extends BaseTheme {
-    constructor(sizeMap, useDefaultKey = true) {
+class FontSizeTheme 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;
-        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 font size - text-xs (0.75rem = 6 * 0.125rem) */
+        this.xs = "[--fs-unit:6]";
+        /** Small font size - text-sm (0.875rem = 7 * 0.125rem) */
+        this.sm = "[--fs-unit:7]";
+        /** Medium font size - text-base (1rem = 8 * 0.125rem) */
+        this.md = "[--fs-unit:8]";
+        /** Large font size - text-lg (1.125rem = 9 * 0.125rem) */
+        this.lg = "[--fs-unit:9]";
+        /** Extra-large font size - text-xl (1.25rem = 10 * 0.125rem) */
+        this.xl = "[--fs-unit:10]";
+        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 fsUnitClass = this[extractedKeys.size];
+            return fsUnitClass ? [fsUnitClass, "text-(length:--fs)"] : [];
+        }
+        return [this.md, "text-(length:--fs)"];
+    }
+    // Static factory methods for different text size ranges
+    static createForPageTitle() {
+        return new FontSizeTheme({
+            xs: "[--fs-unit:15]", // text-3xl: 1.875rem = 15 * 0.125rem
+            sm: "[--fs-unit:18]", // text-4xl: 2.25rem = 18 * 0.125rem
+            md: "[--fs-unit:24]", // text-5xl: 3rem = 24 * 0.125rem
+            lg: "[--fs-unit:30]", // text-6xl: 3.75rem = 30 * 0.125rem
+            xl: "[--fs-unit:36]" // text-7xl: 4.5rem = 36 * 0.125rem
+        });
+    }
+    static createForSectionTitle() {
+        return new FontSizeTheme({
+            xs: "[--fs-unit:12]", // text-2xl: 1.5rem = 12 * 0.125rem
+            sm: "[--fs-unit:15]", // text-3xl: 1.875rem = 15 * 0.125rem
+            md: "[--fs-unit:18]", // text-4xl: 2.25rem = 18 * 0.125rem
+            lg: "[--fs-unit:24]", // text-5xl: 3rem = 24 * 0.125rem
+            xl: "[--fs-unit:30]" // text-6xl: 3.75rem = 30 * 0.125rem
         });
     }
+    static createForTitle() {
+        return new FontSizeTheme({
+            xs: "[--fs-unit:9]", // text-lg: 1.125rem = 9 * 0.125rem
+            sm: "[--fs-unit:10]", // text-xl: 1.25rem = 10 * 0.125rem
+            md: "[--fs-unit:12]", // text-2xl: 1.5rem = 12 * 0.125rem
+            lg: "[--fs-unit:15]", // text-3xl: 1.875rem = 15 * 0.125rem
+            xl: "[--fs-unit:18]" // text-4xl: 2.25rem = 18 * 0.125rem
+        });
+    }
+}
+
+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) {
-        var _a;
-        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]] : [''];
+        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 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
+        });
     }
 }
 
@@ -3809,11 +3843,11 @@ class RadiusTheme extends BaseTheme {
     }
     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]'
+            xs: '[--br-unit:2]',
+            sm: '[--br-unit:3]',
+            md: '[--br-unit:4]',
+            lg: '[--br-unit:5]',
+            xl: '[--br-unit:6]'
         }, true);
     }
     static createLayoutTheme() {
@@ -3955,9 +3989,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
@@ -4093,13 +4127,6 @@ const textAppearanceClasses = {
     info: "text-(--color-text-info)",
     transparent: "text-transparent",
 };
-const textSizeClasses = {
-    xs: "text-xs",
-    sm: "text-sm",
-    md: "text-base",
-    lg: "text-lg",
-    xl: "text-xl",
-};
 
 const filledBackgroundAppearanceClasses = {
     default: "bg-(--color-bg-filled-default)",
@@ -4842,7 +4869,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
@@ -4855,7 +4881,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(),
@@ -4893,7 +4926,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(),
@@ -4935,7 +4969,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: {
@@ -4978,7 +5013,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: {
@@ -5111,18 +5147,16 @@ class ListStyleTheme extends BaseTheme {
     }
 }
 
-const createTypographyComponentTheme = (tag, base = "text-balance", textSizeMap = textSizeClasses, 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: new SizeTheme(textSizeMap),
+            text: fontSizeTheme,
+            lineHeight: lineHeightTheme,
         },
         appearance: {
             text: GenericVariantTheme.createTypographyTextTheme(),
         },
-        typography: typographyThemes,
+        typography: defaultTypographyThemes,
         layout: defaultLayoutsThemes,
     }, defaults, TYPOGRAPHY_CATEGORIES, (props) => {
         // Determine tag based on href prop
@@ -5130,29 +5164,17 @@ const createTypographyComponentTheme = (tag, base = "text-balance", textSizeMap
     });
 };
 // Page title specific theme
-const pageTitleTheme = createTypographyComponentTheme("h1", "text-balance tracking-tight w-fit", {
-    xs: "text-3xl max-lg:text-2xl max-md:text-xl",
-    sm: "text-4xl max-lg:text-3xl max-md:text-2xl",
-    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 }), LineHeightTheme.createForPageTitle());
+const pageTitleTheme = createTypographyComponentTheme("h1", "text-balance tracking-tight w-fit", FontSizeTheme.createForPageTitle(), 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",
-    sm: "text-3xl max-lg:text-2xl max-md:text-xl",
-    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 }), LineHeightTheme.createForSectionTitle());
+const sectionTitleTheme = createTypographyComponentTheme("h2", "text-balance w-fit", FontSizeTheme.createForSectionTitle(), 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 }), LineHeightTheme.createForTitle());
+const titleTheme = createTypographyComponentTheme("h3", "text-balance w-fit", FontSizeTheme.createForTitle(), mergeDefaults(themeDefaults.title, { semibold: true }), LineHeightTheme.createForTitle());
 // Text specific theme
-const textTheme = createTypographyComponentTheme("p", "p-0 m-0 w-fit", textSizeClasses, themeDefaults.text);
+const textTheme = createTypographyComponentTheme("p", "p-0 m-0 w-fit", new FontSizeTheme(), themeDefaults.text);
 // Link specific theme
 const linkTheme = new ComponentTheme("a", "hover:underline w-fit cursor-pointer", {
     size: {
-        text: new SizeTheme(textSizeClasses, false),
+        text: new FontSizeTheme(),
     },
     appearance: {
         text: GenericVariantTheme.createTypographyTextTheme(),
@@ -5163,7 +5185,7 @@ const linkTheme = new ComponentTheme("a", "hover:underline w-fit cursor-pointer"
 // List specific theme
 const listItemTheme = new ComponentTheme("li", "", {
     size: {
-        text: new SizeTheme(textSizeClasses, false),
+        text: new FontSizeTheme(),
     },
     appearance: {
         text: GenericVariantTheme.createTypographyTextTheme(),
@@ -5174,7 +5196,7 @@ const listItemTheme = new ComponentTheme("li", "", {
 // List specific theme
 const listTheme = new ComponentTheme("ul", "list-inside", {
     size: {
-        text: new SizeTheme(textSizeClasses),
+        text: new FontSizeTheme(),
         paddingLeft: new PlTheme(),
     },
     appearance: {
@@ -5214,6 +5236,7 @@ const defaultCardTheme = new ComponentTheme("div", "", {
     size: {
         px: new PxTheme(),
         py: new PyTheme(),
+        lineHeight: LineHeightTheme.createDefault(),
         gap: new GapTheme(true),
     },
     layout: {
@@ -5269,6 +5292,31 @@ const defaultDividerTheme = new ComponentTheme("div", "h-px w-full", {
     layout: defaultLayoutsThemes,
 }, themeDefaults.divider, DIVIDER_CATEGORIES);
 
+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", "flex-col mx-auto w-full", {
     size: {
         gap: new GapTheme(),
@@ -5336,16 +5384,15 @@ 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]",
@@ -5403,7 +5450,7 @@ const defaultCheckboxTheme = new ComponentTheme("input", "peer col-start-1 row-s
             lg: 'h-4.5 w-4.5',
             xl: 'h-5 w-5'
         }),
-        text: new SizeTheme(textSizeClasses)
+        text: new FontSizeTheme()
     },
     layout: {
         ...defaultLayoutsThemes,
@@ -5455,7 +5502,8 @@ const defaultCheckboxWrapperTheme = new ComponentTheme("span", "", {
 
 const defaultLabelTheme = new ComponentTheme("label", "has-[input]:cursor-pointer cursor-default", {
     size: {
-        text: new SizeTheme(textSizeClasses),
+        text: new FontSizeTheme(),
+        lineHeight: LineHeightTheme.createDefault(),
         gap: new GapTheme(true),
     },
     appearance: {
@@ -5487,20 +5535,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(),