@vaneui/ui 0.3.1-alpha.20251001142553.9da86c7 → 0.3.1-alpha.20251002075149.f5b5fd6

package/dist/components/ui/theme/size/lineHeightTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lineHeightTheme.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/theme/size/lineHeightTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,qBAAa,eAAgB,SAAQ,SAAU,YAAW,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC;IAC/E,oEAAoE;IACpE,EAAE,EAAE,MAAM,CAAuB;IACjC,8DAA8D;IAC9D,EAAE,EAAE,MAAM,CAAuB;IACjC,iEAAiE;IACjE,EAAE,EAAE,MAAM,CAAqB;IAC/B,8DAA8D;IAC9D,EAAE,EAAE,MAAM,CAAuB;IACjC,oEAAoE;IACpE,EAAE,EAAE,MAAM,CAAqB;gBAEnB,aAAa,CAAC,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC;IAWnD,UAAU,CAAC,aAAa,EAAE,aAAa,GAAG,MAAM,EAAE;IAQlD,MAAM,CAAC,aAAa,IAAI,eAAe;IAKvC,MAAM,CAAC,qBAAqB,IAAI,eAAe;IAU/C,MAAM,CAAC,kBAAkB,IAAI,eAAe;IAU5C,MAAM,CAAC,cAAc,IAAI,eAAe;CASzC"}
+{"version":3,"file":"lineHeightTheme.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/theme/size/lineHeightTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,qBAAa,eAAgB,SAAQ,SAAU,YAAW,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC;IAC/E,oEAAoE;IACpE,EAAE,EAAE,MAAM,CAAkB;IAC5B,8DAA8D;IAC9D,EAAE,EAAE,MAAM,CAAkB;IAC5B,iEAAiE;IACjE,EAAE,EAAE,MAAM,CAAgB;IAC1B,8DAA8D;IAC9D,EAAE,EAAE,MAAM,CAAkB;IAC5B,oEAAoE;IACpE,EAAE,EAAE,MAAM,CAAgB;gBAEd,aAAa,CAAC,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC;IAWnD,UAAU,CAAC,aAAa,EAAE,aAAa,GAAG,MAAM,EAAE;IAQlD,MAAM,CAAC,aAAa,IAAI,eAAe;IAKvC,MAAM,CAAC,qBAAqB,IAAI,eAAe;IAU/C,MAAM,CAAC,kBAAkB,IAAI,eAAe;IAU5C,MAAM,CAAC,cAAc,IAAI,eAAe;CASzC"}

package/dist/index.esm.js

@@ -3676,29 +3676,29 @@ class FontSizeTheme extends BaseTheme {
     // 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
+            xs: "[--fs-unit:15] max-laptop:[--fs-unit:12] max-tablet:[--fs-unit:9]", // text-3xl: 1.875rem = 15 * 0.125rem
+            sm: "[--fs-unit:18] max-laptop:[--fs-unit:15] max-tablet:[--fs-unit:12]", // text-4xl: 2.25rem = 18 * 0.125rem
+            md: "[--fs-unit:24] max-laptop:[--fs-unit:21] max-tablet:[--fs-unit:18]", // text-5xl: 3rem = 24 * 0.125rem
+            lg: "[--fs-unit:30] max-laptop:[--fs-unit:27] max-tablet:[--fs-unit:24]", // text-6xl: 3.75rem = 30 * 0.125rem
+            xl: "[--fs-unit:36] max-laptop:[--fs-unit:33] max-tablet:[--fs-unit:30]" // 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
+            xs: "[--fs-unit:12] max-laptop:[--fs-unit:10] max-tablet:[--fs-unit:8]", // text-2xl: 1.5rem = 12 * 0.125rem
+            sm: "[--fs-unit:15] max-laptop:[--fs-unit:13] max-tablet:[--fs-unit:11]", // text-3xl: 1.875rem = 15 * 0.125rem
+            md: "[--fs-unit:18] max-laptop:[--fs-unit:16] max-tablet:[--fs-unit:14]", // text-4xl: 2.25rem = 18 * 0.125rem
+            lg: "[--fs-unit:24] max-laptop:[--fs-unit:22] max-tablet:[--fs-unit:20]", // text-5xl: 3rem = 24 * 0.125rem
+            xl: "[--fs-unit:30] max-laptop:[--fs-unit:28] max-tablet:[--fs-unit:26]" // 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
+            xs: "[--fs-unit:9]  max-laptop:[--fs-unit:8]  max-tablet:[--fs-unit:7]", // text-lg: 1.125rem = 9 * 0.125rem
+            sm: "[--fs-unit:10] max-laptop:[--fs-unit:9]  max-tablet:[--fs-unit:8]", // text-xl: 1.25rem = 10 * 0.125rem
+            md: "[--fs-unit:12] max-laptop:[--fs-unit:11] max-tablet:[--fs-unit:10]", // text-2xl: 1.5rem = 12 * 0.125rem
+            lg: "[--fs-unit:15] max-laptop:[--fs-unit:14] max-tablet:[--fs-unit:13]", // text-3xl: 1.875rem = 15 * 0.125rem
+            xl: "[--fs-unit:18] max-laptop:[--fs-unit:17] max-tablet:[--fs-unit:16]" // text-4xl: 2.25rem = 18 * 0.125rem
         });
     }
 }
@@ -3707,15 +3707,15 @@ 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
+        this.xs = "[--lh: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
+        this.sm = "[--lh: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
+        this.md = "[--lh: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
+        this.lg = "[--lh: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
+        this.xl = "[--lh:1.4]"; // calc(1.75 / 1.25) = 1.4
         if (customMapping) {
             this.xs = customMapping.xs || this.xs;
             this.sm = customMapping.sm || this.sm;
@@ -3737,29 +3737,29 @@ class LineHeightTheme extends BaseTheme {
     // 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
+            xs: "[--lh:1.333]", // text-2xl: calc(2 / 1.5) ≈ 1.333
+            sm: "[--lh:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
+            md: "[--lh:1.111]", // text-4xl: calc(2.5 / 2.25) ≈ 1.111
+            lg: "[--lh:1]", // text-5xl: 1
+            xl: "[--lh: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
+            xs: "[--lh:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
+            sm: "[--lh:1.111]", // text-4xl: calc(2.5 / 2.25) ≈ 1.111
+            md: "[--lh:1]", // text-5xl: 1
+            lg: "[--lh:1]", // text-6xl: 1
+            xl: "[--lh: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
+            xs: "[--lh:1.556]", // text-lg: calc(1.75 / 1.125) ≈ 1.556
+            sm: "[--lh:1.4]", // text-xl: calc(1.75 / 1.25) = 1.4
+            md: "[--lh:1.333]", // text-2xl: calc(2 / 1.5) ≈ 1.333
+            lg: "[--lh:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
+            xl: "[--lh:1.111]" // text-4xl: calc(2.5 / 2.25) ≈ 1.111
         });
     }
 }
@@ -4878,11 +4878,11 @@ const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-poin
         gap: new GapTheme(true),
         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]"
+            xs: "[--lh:1.3]",
+            sm: "[--lh:1.3]",
+            md: "[--lh:1.3]",
+            lg: "[--lh:1.3]",
+            xl: "[--lh:1.3]"
         }),
     },
     appearance: {
@@ -5488,11 +5488,11 @@ const defaultCheckTheme = new ComponentTheme("span", "invisible col-start-1 row-
 const defaultCheckboxWrapperTheme = new ComponentTheme("span", "", {
     size: {
         height: new SizeTheme({
-            xs: 'h-4',
-            sm: 'h-5',
-            md: 'h-6',
-            lg: 'h-7',
-            xl: 'h-7'
+            xs: 'h-[calc(var(--lh)*var(--fs))]',
+            sm: 'h-[calc(var(--lh)*var(--fs))]',
+            md: 'h-[calc(var(--lh)*var(--fs))]',
+            lg: 'h-[calc(var(--lh)*var(--fs))]',
+            xl: 'h-[calc(var(--lh)*var(--fs))]'
         })
     },
     layout: {

package/dist/index.js

@@ -3678,29 +3678,29 @@ class FontSizeTheme extends BaseTheme {
     // 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
+            xs: "[--fs-unit:15] max-laptop:[--fs-unit:12] max-tablet:[--fs-unit:9]", // text-3xl: 1.875rem = 15 * 0.125rem
+            sm: "[--fs-unit:18] max-laptop:[--fs-unit:15] max-tablet:[--fs-unit:12]", // text-4xl: 2.25rem = 18 * 0.125rem
+            md: "[--fs-unit:24] max-laptop:[--fs-unit:21] max-tablet:[--fs-unit:18]", // text-5xl: 3rem = 24 * 0.125rem
+            lg: "[--fs-unit:30] max-laptop:[--fs-unit:27] max-tablet:[--fs-unit:24]", // text-6xl: 3.75rem = 30 * 0.125rem
+            xl: "[--fs-unit:36] max-laptop:[--fs-unit:33] max-tablet:[--fs-unit:30]" // 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
+            xs: "[--fs-unit:12] max-laptop:[--fs-unit:10] max-tablet:[--fs-unit:8]", // text-2xl: 1.5rem = 12 * 0.125rem
+            sm: "[--fs-unit:15] max-laptop:[--fs-unit:13] max-tablet:[--fs-unit:11]", // text-3xl: 1.875rem = 15 * 0.125rem
+            md: "[--fs-unit:18] max-laptop:[--fs-unit:16] max-tablet:[--fs-unit:14]", // text-4xl: 2.25rem = 18 * 0.125rem
+            lg: "[--fs-unit:24] max-laptop:[--fs-unit:22] max-tablet:[--fs-unit:20]", // text-5xl: 3rem = 24 * 0.125rem
+            xl: "[--fs-unit:30] max-laptop:[--fs-unit:28] max-tablet:[--fs-unit:26]" // 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
+            xs: "[--fs-unit:9]  max-laptop:[--fs-unit:8]  max-tablet:[--fs-unit:7]", // text-lg: 1.125rem = 9 * 0.125rem
+            sm: "[--fs-unit:10] max-laptop:[--fs-unit:9]  max-tablet:[--fs-unit:8]", // text-xl: 1.25rem = 10 * 0.125rem
+            md: "[--fs-unit:12] max-laptop:[--fs-unit:11] max-tablet:[--fs-unit:10]", // text-2xl: 1.5rem = 12 * 0.125rem
+            lg: "[--fs-unit:15] max-laptop:[--fs-unit:14] max-tablet:[--fs-unit:13]", // text-3xl: 1.875rem = 15 * 0.125rem
+            xl: "[--fs-unit:18] max-laptop:[--fs-unit:17] max-tablet:[--fs-unit:16]" // text-4xl: 2.25rem = 18 * 0.125rem
         });
     }
 }
@@ -3709,15 +3709,15 @@ 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
+        this.xs = "[--lh: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
+        this.sm = "[--lh: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
+        this.md = "[--lh: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
+        this.lg = "[--lh: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
+        this.xl = "[--lh:1.4]"; // calc(1.75 / 1.25) = 1.4
         if (customMapping) {
             this.xs = customMapping.xs || this.xs;
             this.sm = customMapping.sm || this.sm;
@@ -3739,29 +3739,29 @@ class LineHeightTheme extends BaseTheme {
     // 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
+            xs: "[--lh:1.333]", // text-2xl: calc(2 / 1.5) ≈ 1.333
+            sm: "[--lh:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
+            md: "[--lh:1.111]", // text-4xl: calc(2.5 / 2.25) ≈ 1.111
+            lg: "[--lh:1]", // text-5xl: 1
+            xl: "[--lh: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
+            xs: "[--lh:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
+            sm: "[--lh:1.111]", // text-4xl: calc(2.5 / 2.25) ≈ 1.111
+            md: "[--lh:1]", // text-5xl: 1
+            lg: "[--lh:1]", // text-6xl: 1
+            xl: "[--lh: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
+            xs: "[--lh:1.556]", // text-lg: calc(1.75 / 1.125) ≈ 1.556
+            sm: "[--lh:1.4]", // text-xl: calc(1.75 / 1.25) = 1.4
+            md: "[--lh:1.333]", // text-2xl: calc(2 / 1.5) ≈ 1.333
+            lg: "[--lh:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
+            xl: "[--lh:1.111]" // text-4xl: calc(2.5 / 2.25) ≈ 1.111
         });
     }
 }
@@ -4880,11 +4880,11 @@ const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-poin
         gap: new GapTheme(true),
         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]"
+            xs: "[--lh:1.3]",
+            sm: "[--lh:1.3]",
+            md: "[--lh:1.3]",
+            lg: "[--lh:1.3]",
+            xl: "[--lh:1.3]"
         }),
     },
     appearance: {
@@ -5490,11 +5490,11 @@ const defaultCheckTheme = new ComponentTheme("span", "invisible col-start-1 row-
 const defaultCheckboxWrapperTheme = new ComponentTheme("span", "", {
     size: {
         height: new SizeTheme({
-            xs: 'h-4',
-            sm: 'h-5',
-            md: 'h-6',
-            lg: 'h-7',
-            xl: 'h-7'
+            xs: 'h-[calc(var(--lh)*var(--fs))]',
+            sm: 'h-[calc(var(--lh)*var(--fs))]',
+            md: 'h-[calc(var(--lh)*var(--fs))]',
+            lg: 'h-[calc(var(--lh)*var(--fs))]',
+            xl: 'h-[calc(var(--lh)*var(--fs))]'
         })
     },
     layout: {

package/dist/ui.css

@@ -252,6 +252,12 @@
     --br-base: var(--spacing);
     --ui-br-base: calc(var(--spacing) * 0.5);
     --fs-base: calc(var(--spacing) * 0.5);
+    --lh: 1;
+    --fs-unit: 8;
+    --gap-unit: 1;
+    --aspect-ratio: 1;
+    --py-unit: 1;
+    --br-unit: 1;
   }
 }
 @layer base {
@@ -499,6 +505,9 @@
   .table-cell {
     display: table-cell;
   }
+  .aspect-ratio {
+    aspect-ratio: var(--aspect-ratio);
+  }
   .h-3 {
     height: calc(var(--spacing) * 3);
   }
@@ -514,11 +523,8 @@
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
-  .h-6 {
-    height: calc(var(--spacing) * 6);
-  }
-  .h-7 {
-    height: calc(var(--spacing) * 7);
+  .h-\[calc\(var\(--lh\)\*var\(--fs\)\)\] {
+    height: calc(var(--lh) * var(--fs));
   }
   .h-fit {
     height: fit-content;
@@ -1644,32 +1650,32 @@
   .\[--gap-unit\:6\] {
     --gap-unit: 6;
   }
-  .\[--lh-unit\:1\.2\] {
-    --lh-unit: 1.2;
+  .\[--lh\:1\.2\] {
+    --lh: 1.2;
   }
-  .\[--lh-unit\:1\.3\] {
-    --lh-unit: 1.3;
+  .\[--lh\:1\.3\] {
+    --lh: 1.3;
   }
-  .\[--lh-unit\:1\.4\] {
-    --lh-unit: 1.4;
+  .\[--lh\:1\.4\] {
+    --lh: 1.4;
   }
-  .\[--lh-unit\:1\.5\] {
-    --lh-unit: 1.5;
+  .\[--lh\:1\.5\] {
+    --lh: 1.5;
   }
-  .\[--lh-unit\:1\.111\] {
-    --lh-unit: 1.111;
+  .\[--lh\:1\.111\] {
+    --lh: 1.111;
   }
-  .\[--lh-unit\:1\.333\] {
-    --lh-unit: 1.333;
+  .\[--lh\:1\.333\] {
+    --lh: 1.333;
   }
-  .\[--lh-unit\:1\.429\] {
-    --lh-unit: 1.429;
+  .\[--lh\:1\.429\] {
+    --lh: 1.429;
   }
-  .\[--lh-unit\:1\.556\] {
-    --lh-unit: 1.556;
+  .\[--lh\:1\.556\] {
+    --lh: 1.556;
   }
-  .\[--lh-unit\:1\] {
-    --lh-unit: 1;
+  .\[--lh\:1\] {
+    --lh: 1;
   }
   .\[--py-unit\:0\.5\] {
     --py-unit: 0.5;
@@ -2359,6 +2365,81 @@
       flex-direction: column;
     }
   }
+  .max-laptop\:\[--fs-unit\:8\] {
+    @media (width < 64rem) {
+      --fs-unit: 8;
+    }
+  }
+  .max-laptop\:\[--fs-unit\:9\] {
+    @media (width < 64rem) {
+      --fs-unit: 9;
+    }
+  }
+  .max-laptop\:\[--fs-unit\:10\] {
+    @media (width < 64rem) {
+      --fs-unit: 10;
+    }
+  }
+  .max-laptop\:\[--fs-unit\:11\] {
+    @media (width < 64rem) {
+      --fs-unit: 11;
+    }
+  }
+  .max-laptop\:\[--fs-unit\:12\] {
+    @media (width < 64rem) {
+      --fs-unit: 12;
+    }
+  }
+  .max-laptop\:\[--fs-unit\:13\] {
+    @media (width < 64rem) {
+      --fs-unit: 13;
+    }
+  }
+  .max-laptop\:\[--fs-unit\:14\] {
+    @media (width < 64rem) {
+      --fs-unit: 14;
+    }
+  }
+  .max-laptop\:\[--fs-unit\:15\] {
+    @media (width < 64rem) {
+      --fs-unit: 15;
+    }
+  }
+  .max-laptop\:\[--fs-unit\:16\] {
+    @media (width < 64rem) {
+      --fs-unit: 16;
+    }
+  }
+  .max-laptop\:\[--fs-unit\:17\] {
+    @media (width < 64rem) {
+      --fs-unit: 17;
+    }
+  }
+  .max-laptop\:\[--fs-unit\:21\] {
+    @media (width < 64rem) {
+      --fs-unit: 21;
+    }
+  }
+  .max-laptop\:\[--fs-unit\:22\] {
+    @media (width < 64rem) {
+      --fs-unit: 22;
+    }
+  }
+  .max-laptop\:\[--fs-unit\:27\] {
+    @media (width < 64rem) {
+      --fs-unit: 27;
+    }
+  }
+  .max-laptop\:\[--fs-unit\:28\] {
+    @media (width < 64rem) {
+      --fs-unit: 28;
+    }
+  }
+  .max-laptop\:\[--fs-unit\:33\] {
+    @media (width < 64rem) {
+      --fs-unit: 33;
+    }
+  }
   .max-laptop\:\[--py-unit\:3\] {
     @media (width < 64rem) {
       --py-unit: 3;
@@ -2394,6 +2475,76 @@
       flex-direction: column;
     }
   }
+  .max-tablet\:\[--fs-unit\:7\] {
+    @media (width < 48rem) {
+      --fs-unit: 7;
+    }
+  }
+  .max-tablet\:\[--fs-unit\:8\] {
+    @media (width < 48rem) {
+      --fs-unit: 8;
+    }
+  }
+  .max-tablet\:\[--fs-unit\:9\] {
+    @media (width < 48rem) {
+      --fs-unit: 9;
+    }
+  }
+  .max-tablet\:\[--fs-unit\:10\] {
+    @media (width < 48rem) {
+      --fs-unit: 10;
+    }
+  }
+  .max-tablet\:\[--fs-unit\:11\] {
+    @media (width < 48rem) {
+      --fs-unit: 11;
+    }
+  }
+  .max-tablet\:\[--fs-unit\:12\] {
+    @media (width < 48rem) {
+      --fs-unit: 12;
+    }
+  }
+  .max-tablet\:\[--fs-unit\:13\] {
+    @media (width < 48rem) {
+      --fs-unit: 13;
+    }
+  }
+  .max-tablet\:\[--fs-unit\:14\] {
+    @media (width < 48rem) {
+      --fs-unit: 14;
+    }
+  }
+  .max-tablet\:\[--fs-unit\:16\] {
+    @media (width < 48rem) {
+      --fs-unit: 16;
+    }
+  }
+  .max-tablet\:\[--fs-unit\:18\] {
+    @media (width < 48rem) {
+      --fs-unit: 18;
+    }
+  }
+  .max-tablet\:\[--fs-unit\:20\] {
+    @media (width < 48rem) {
+      --fs-unit: 20;
+    }
+  }
+  .max-tablet\:\[--fs-unit\:24\] {
+    @media (width < 48rem) {
+      --fs-unit: 24;
+    }
+  }
+  .max-tablet\:\[--fs-unit\:26\] {
+    @media (width < 48rem) {
+      --fs-unit: 26;
+    }
+  }
+  .max-tablet\:\[--fs-unit\:30\] {
+    @media (width < 48rem) {
+      --fs-unit: 30;
+    }
+  }
   .max-tablet\:\[--py-unit\:2\] {
     @media (width < 48rem) {
       --py-unit: 2;
@@ -2453,21 +2604,14 @@
 @layer theme {
   @layer base {
     :where(*) {
-      --gap-unit: 1;
       --gap: calc(var(--gap-unit) * var(--layout-spacing));
       --ui-gap: calc(var(--gap-unit) * var(--ui-spacing));
-      --aspect-ratio: 1;
-      --py-unit: 1;
       --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--layout-spacing));
       --ui-px: calc(var(--aspect-ratio) * var(--py-unit) * var(--ui-spacing));
       --py: calc(var(--py-unit) * var(--layout-spacing));
       --ui-py: calc(var(--py-unit) * var(--ui-spacing));
-      --br-unit: 1;
       --br: calc(var(--br-unit) * var(--br-base));
       --ui-br: calc(var(--br-unit) * var(--ui-br-base));
-      --lh-unit: 1.5;
-      --lh: var(--lh-unit);
-      --fs-unit: 8;
       --fs: calc(var(--fs-unit) * var(--fs-base));
     }
   }

package/dist/vars.css

@@ -156,29 +156,28 @@
     --breakpoint-tablet: 48rem;
     --breakpoint-laptop: 64rem;
     --breakpoint-desktop: 80rem;
+
+    --lh: 1;
+    --fs-unit: 8; /* Default to text-base (1rem = 8 * 0.125rem) */
+    --gap-unit: 1;
+    --aspect-ratio: 1;
+    --py-unit: 1;
+    --br-unit: 1;
 }
 
 @layer base {
     :where(*) {
-        --gap-unit: 1;
         --gap: calc(var(--gap-unit) * var(--layout-spacing));
         --ui-gap: calc(var(--gap-unit) * var(--ui-spacing));
 
-        --aspect-ratio: 1;
-        --py-unit: 1;
         --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--layout-spacing));
         --ui-px: calc(var(--aspect-ratio) * var(--py-unit) * var(--ui-spacing));
         --py: calc(var(--py-unit) * var(--layout-spacing));
         --ui-py: calc(var(--py-unit) * var(--ui-spacing));
 
-        --br-unit: 1;
         --br: calc(var(--br-unit) * var(--br-base));
         --ui-br: calc(var(--br-unit) * var(--ui-br-base));
 
-        --lh-unit: 1.5;
-        --lh: var(--lh-unit);
-
-        --fs-unit: 8; /* Default to text-base (1rem = 8 * 0.125rem) */
         --fs: calc(var(--fs-unit) * var(--fs-base));
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaneui/ui",
-  "version": "0.3.1-alpha.20251001142553.9da86c7",
+  "version": "0.3.1-alpha.20251002075149.f5b5fd6",
   "description": "A simple and lightweight UI component library for React, built with Tailwind CSS.",
   "author": "",
   "license": "ISC",