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

package/dist/ui.css

@@ -247,11 +247,11 @@
     --color-border-filled-warning: var(--color-yellow-600);
     --color-border-filled-info: var(--color-blue-600);
     --color-border-filled-link: var(--color-blue-600);
-    --layout-spacing: clamp(0.1rem, 0.16rem + 0.4vw, 0.3rem);
+    --layout-spacing: var(--spacing);
     --ui-spacing: var(--spacing);
-    --br-base: 0.25rem;
-    --ui-br-base: 0.125rem;
-    --fs-base: 0.125rem;
+    --br-base: var(--spacing);
+    --ui-br-base: calc(var(--spacing) * 0.5);
+    --fs-base: calc(var(--spacing) * 0.5);
   }
 }
 @layer base {
@@ -435,12 +435,24 @@
     @media (width >= 40rem) {
       max-width: 40rem;
     }
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
     @media (width >= 48rem) {
       max-width: 48rem;
     }
     @media (width >= 64rem) {
       max-width: 64rem;
     }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
     @media (width >= 80rem) {
       max-width: 80rem;
     }
@@ -1160,6 +1172,9 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\(length\:--fs\) {
+    font-size: var(--fs);
+  }
   .leading-\(--lh\) {
     --tw-leading: var(--lh);
     line-height: var(--lh);
@@ -1278,9 +1293,6 @@
   .text-\(--color-text-warning\) {
     color: var(--color-text-warning);
   }
-  .text-\(--fs\) {
-    color: var(--fs);
-  }
   .text-blue-200 {
     color: var(--color-blue-200);
   }
@@ -1539,6 +1551,9 @@
   .\[--aspect-ratio\:1\.75\] {
     --aspect-ratio: 1.75;
   }
+  .\[--aspect-ratio\:1\] {
+    --aspect-ratio: 1;
+  }
   .\[--aspect-ratio\:2\.5\] {
     --aspect-ratio: 2.5;
   }
@@ -1632,6 +1647,9 @@
   .\[--lh-unit\:1\.2\] {
     --lh-unit: 1.2;
   }
+  .\[--lh-unit\:1\.3\] {
+    --lh-unit: 1.3;
+  }
   .\[--lh-unit\:1\.4\] {
     --lh-unit: 1.4;
   }
@@ -1683,6 +1701,9 @@
   .\[--py-unit\:8\] {
     --py-unit: 8;
   }
+  .\[--py-unit\:10\] {
+    --py-unit: 10;
+  }
   .\[--py-unit\:12\] {
     --py-unit: 12;
   }
@@ -2318,42 +2339,77 @@
       cursor: pointer;
     }
   }
-  .max-xl\:hidden {
+  .max-desktop\:hidden {
     @media (width < 80rem) {
       display: none;
     }
   }
-  .max-xl\:flex-col {
+  .max-desktop\:flex-col {
     @media (width < 80rem) {
       flex-direction: column;
     }
   }
-  .max-lg\:hidden {
+  .max-laptop\:hidden {
     @media (width < 64rem) {
       display: none;
     }
   }
-  .max-lg\:flex-col {
+  .max-laptop\:flex-col {
     @media (width < 64rem) {
       flex-direction: column;
     }
   }
-  .max-md\:hidden {
+  .max-laptop\:\[--py-unit\:3\] {
+    @media (width < 64rem) {
+      --py-unit: 3;
+    }
+  }
+  .max-laptop\:\[--py-unit\:4\] {
+    @media (width < 64rem) {
+      --py-unit: 4;
+    }
+  }
+  .max-laptop\:\[--py-unit\:6\] {
+    @media (width < 64rem) {
+      --py-unit: 6;
+    }
+  }
+  .max-laptop\:\[--py-unit\:8\] {
+    @media (width < 64rem) {
+      --py-unit: 8;
+    }
+  }
+  .max-laptop\:\[--py-unit\:10\] {
+    @media (width < 64rem) {
+      --py-unit: 10;
+    }
+  }
+  .max-tablet\:hidden {
     @media (width < 48rem) {
       display: none;
     }
   }
-  .max-md\:flex-col {
+  .max-tablet\:flex-col {
     @media (width < 48rem) {
       flex-direction: column;
     }
   }
-  .max-sm\:hidden {
+  .max-tablet\:\[--py-unit\:2\] {
+    @media (width < 48rem) {
+      --py-unit: 2;
+    }
+  }
+  .max-tablet\:\[--py-unit\:4\] {
+    @media (width < 48rem) {
+      --py-unit: 4;
+    }
+  }
+  .max-mobile\:hidden {
     @media (width < 40rem) {
       display: none;
     }
   }
-  .max-sm\:flex-col {
+  .max-mobile\:flex-col {
     @media (width < 40rem) {
       flex-direction: column;
     }
@@ -2403,8 +2459,8 @@
       --aspect-ratio: 1;
       --py-unit: 1;
       --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--layout-spacing));
-      --py: calc(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));

package/dist/vars.css

@@ -146,12 +146,16 @@
     --color-border-filled-info: var(--color-blue-600);
     --color-border-filled-link: var(--color-blue-600);
 
-
-    --layout-spacing: clamp(0.1rem, 0.16rem + 0.4vw, 0.3rem);
+    --layout-spacing: var(--spacing);
     --ui-spacing: var(--spacing);
-    --br-base: 0.25rem;
-    --ui-br-base: 0.125rem;
-    --fs-base: 0.125rem;
+    --br-base: var(--spacing);
+    --ui-br-base: calc(var(--spacing) * 0.5);
+    --fs-base: calc(var(--spacing) * 0.5);
+
+    --breakpoint-mobile: 40rem;
+    --breakpoint-tablet: 48rem;
+    --breakpoint-laptop: 64rem;
+    --breakpoint-desktop: 80rem;
 }
 
 @layer base {
@@ -163,8 +167,8 @@
         --aspect-ratio: 1;
         --py-unit: 1;
         --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--layout-spacing));
-        --py: calc(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;

package/package.json

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

package/dist/components/ui/theme/typography/fontSizeTheme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"fontSizeTheme.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/theme/typography/fontSizeTheme.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,aAAc,SAAQ,SAAU,YAAW,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC;IAC7E,+DAA+D;IAC/D,EAAE,EAAE,MAAM,CAAmB;IAC7B,0DAA0D;IAC1D,EAAE,EAAE,MAAM,CAAmB;IAC7B,yDAAyD;IACzD,EAAE,EAAE,MAAM,CAAmB;IAC7B,0DAA0D;IAC1D,EAAE,EAAE,MAAM,CAAmB;IAC7B,gEAAgE;IAChE,EAAE,EAAE,MAAM,CAAoB;gBAElB,aAAa,CAAC,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC;IAWnD,UAAU,CAAC,aAAa,EAAE,aAAa,GAAG,MAAM,EAAE;IASlD,MAAM,CAAC,kBAAkB,IAAI,aAAa;IAU1C,MAAM,CAAC,qBAAqB,IAAI,aAAa;IAU7C,MAAM,CAAC,cAAc,IAAI,aAAa;CASvC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"lineHeightTheme.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/theme/typography/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;IASlD,MAAM,CAAC,qBAAqB,IAAI,eAAe;IAU/C,MAAM,CAAC,kBAAkB,IAAI,eAAe;IAU5C,MAAM,CAAC,cAAc,IAAI,eAAe;CASzC"}