@vaneui/ui 0.3.1-alpha.20251001131502.03a0ce2 → 0.3.1-alpha.20251001144233.cfeb345

package/dist/ui.css

@@ -432,9 +432,6 @@
   }
   .container {
     width: 100%;
-    @media (width >= 20rem) {
-      max-width: 20rem;
-    }
     @media (width >= 40rem) {
       max-width: 40rem;
     }
@@ -444,6 +441,9 @@
     @media (width >= 48rem) {
       max-width: 48rem;
     }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
     @media (width >= 64rem) {
       max-width: 64rem;
     }
@@ -1551,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;
   }
@@ -1698,6 +1701,9 @@
   .\[--py-unit\:8\] {
     --py-unit: 8;
   }
+  .\[--py-unit\:10\] {
+    --py-unit: 10;
+  }
   .\[--py-unit\:12\] {
     --py-unit: 12;
   }
@@ -2333,49 +2339,224 @@
       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\:\[--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;
+    }
+  }
+  .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 {
-    @media (width < 40rem) {
-      display: none;
+  .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-sm\:flex-col {
+  .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) {
-      flex-direction: column;
+      display: none;
     }
   }
-  .max-tablet\:bg-red-500 {
+  .max-mobile\:flex-col {
     @media (width < 40rem) {
-      background-color: var(--color-red-500);
+      flex-direction: column;
     }
   }
   .sm\:grid-cols-2 {
@@ -2423,8 +2604,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

@@ -152,8 +152,8 @@
     --ui-br-base: calc(var(--spacing) * 0.5);
     --fs-base: calc(var(--spacing) * 0.5);
 
-    --breakpoint-mobile: 20rem;
-    --breakpoint-tablet: 40rem;
+    --breakpoint-mobile: 40rem;
+    --breakpoint-tablet: 48rem;
     --breakpoint-laptop: 64rem;
     --breakpoint-desktop: 80rem;
 }
@@ -167,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.20251001131502.03a0ce2",
+  "version": "0.3.1-alpha.20251001144233.cfeb345",
   "description": "A simple and lightweight UI component library for React, built with Tailwind CSS.",
   "author": "",
   "license": "ISC",