@vaneui/ui 0.3.1-alpha.20250921204254.9cfeae4 → 0.3.1-alpha.20250926201820.1b8c4ca

package/dist/ui.css

@@ -261,7 +261,8 @@
     --layout-br-md: calc(5 * var(--layout-br-spacing));
     --layout-br-lg: calc(6 * var(--layout-br-spacing));
     --layout-br-xl: calc(7 * var(--layout-br-spacing));
-    --layout-spacing: clamp(0.1rem, 0.16rem + 0.4vw, 0.375rem);
+    --layout-spacing: clamp(0.1rem, 0.16rem + 0.4vw, 0.3rem);
+    --ui-spacing: var(--spacing);
   }
 }
 @layer base {
@@ -521,6 +522,9 @@
   .h-7 {
     height: calc(var(--spacing) * 7);
   }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
   .h-fit {
     height: fit-content;
   }
@@ -659,27 +663,12 @@
   .gap-\(--gap\) {
     gap: var(--gap);
   }
+  .gap-\(--ui-gap\) {
+    gap: var(--ui-gap);
+  }
   .gap-0 {
     gap: calc(var(--spacing) * 0);
   }
-  .gap-0\.5 {
-    gap: calc(var(--spacing) * 0.5);
-  }
-  .gap-1 {
-    gap: calc(var(--spacing) * 1);
-  }
-  .gap-1\.5 {
-    gap: calc(var(--spacing) * 1.5);
-  }
-  .gap-2 {
-    gap: calc(var(--spacing) * 2);
-  }
-  .gap-2\.5 {
-    gap: calc(var(--spacing) * 2.5);
-  }
-  .gap-3 {
-    gap: calc(var(--spacing) * 3);
-  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -742,6 +731,9 @@
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-\(--br\) {
+    border-radius: var(--br);
+  }
   .rounded-\(--layout-br-lg\) {
     border-radius: var(--layout-br-lg);
   }
@@ -757,6 +749,9 @@
   .rounded-\(--layout-br-xs\) {
     border-radius: var(--layout-br-xs);
   }
+  .rounded-\(--ui-br\) {
+    border-radius: var(--ui-br);
+  }
   .rounded-\(--ui-br-lg\) {
     border-radius: var(--ui-br-lg);
   }
@@ -1099,6 +1094,9 @@
   .px-\(--px\) {
     padding-inline: var(--px);
   }
+  .px-\(--ui-px\) {
+    padding-inline: var(--ui-px);
+  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
@@ -1129,6 +1127,9 @@
   .py-\(--py\) {
     padding-block: var(--py);
   }
+  .py-\(--ui-py\) {
+    padding-block: var(--ui-py);
+  }
   .py-0 {
     padding-block: calc(var(--spacing) * 0);
   }
@@ -1617,12 +1618,45 @@
   .\[--aspect-ratio\:1\.75\] {
     --aspect-ratio: 1.75;
   }
+  .\[--aspect-ratio\:1\] {
+    --aspect-ratio: 1;
+  }
   .\[--aspect-ratio\:2\.5\] {
     --aspect-ratio: 2.5;
   }
   .\[--aspect-ratio\:2\] {
     --aspect-ratio: 2;
   }
+  .\[--aspect-ratio\:3\] {
+    --aspect-ratio: 3;
+  }
+  .\[--aspect-ratio\:4\] {
+    --aspect-ratio: 4;
+  }
+  .\[--br-unit\:1\] {
+    --br-unit: 1;
+  }
+  .\[--br-unit\:2\] {
+    --br-unit: 2;
+  }
+  .\[--br-unit\:3\] {
+    --br-unit: 3;
+  }
+  .\[--br-unit\:4\] {
+    --br-unit: 4;
+  }
+  .\[--br-unit\:5\] {
+    --br-unit: 5;
+  }
+  .\[--br-unit\:6\] {
+    --br-unit: 6;
+  }
+  .\[--br-unit\:7\] {
+    --br-unit: 7;
+  }
+  .\[--gap-unit\:0\.5\] {
+    --gap-unit: 0.5;
+  }
   .\[--gap-unit\:1\.5\] {
     --gap-unit: 1.5;
   }
@@ -1647,32 +1681,47 @@
   .\[--gap-unit\:6\] {
     --gap-unit: 6;
   }
-  .\[--h-unit\:2\] {
-    --h-unit: 2;
+  .\[--py-unit\:0\.5\] {
+    --py-unit: 0.5;
+  }
+  .\[--py-unit\:0\] {
+    --py-unit: 0;
+  }
+  .\[--py-unit\:1\.5\] {
+    --py-unit: 1.5;
+  }
+  .\[--py-unit\:1\] {
+    --py-unit: 1;
+  }
+  .\[--py-unit\:2\.5\] {
+    --py-unit: 2.5;
+  }
+  .\[--py-unit\:2\] {
+    --py-unit: 2;
   }
-  .\[--h-unit\:3\] {
-    --h-unit: 3;
+  .\[--py-unit\:3\] {
+    --py-unit: 3;
   }
-  .\[--h-unit\:4\] {
-    --h-unit: 4;
+  .\[--py-unit\:4\] {
+    --py-unit: 4;
   }
-  .\[--h-unit\:5\] {
-    --h-unit: 5;
+  .\[--py-unit\:5\] {
+    --py-unit: 5;
   }
-  .\[--h-unit\:6\] {
-    --h-unit: 6;
+  .\[--py-unit\:6\] {
+    --py-unit: 6;
   }
-  .\[--h-unit\:8\] {
-    --h-unit: 8;
+  .\[--py-unit\:8\] {
+    --py-unit: 8;
   }
-  .\[--h-unit\:12\] {
-    --h-unit: 12;
+  .\[--py-unit\:12\] {
+    --py-unit: 12;
   }
-  .\[--h-unit\:16\] {
-    --h-unit: 16;
+  .\[--py-unit\:16\] {
+    --py-unit: 16;
   }
-  .\[--h-unit\:20\] {
-    --h-unit: 20;
+  .\[--py-unit\:20\] {
+    --py-unit: 20;
   }
   .ring-inset {
     --tw-ring-inset: inset;
@@ -2453,10 +2502,18 @@
     :where(*) {
       --gap-unit: 1;
       --gap: calc(var(--gap-unit) * var(--layout-spacing));
+      --ui-gap: calc(var(--gap-unit) * var(--ui-spacing));
       --aspect-ratio: 1;
-      --px: calc(var(--aspect-ratio) * var(--h-unit) * var(--layout-spacing));
-      --h-unit: 1;
-      --py: calc(var(--h-unit) * var(--layout-spacing));
+      --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));
+      --ui-py: calc(var(--py-unit) * var(--ui-spacing));
+      --br-unit: 1;
+      --br-base: 0.25rem;
+      --br: calc(var(--br-unit) * var(--br-base));
+      --ui-br-base: 0.125rem;
+      --ui-br: calc(var(--br-unit) * var(--ui-br-base));
     }
   }
 }

package/dist/vars.css

@@ -162,7 +162,8 @@
     --layout-br-lg: calc(6 * var(--layout-br-spacing));
     --layout-br-xl: calc(7 * var(--layout-br-spacing));
 
-    --layout-spacing: clamp(0.1rem, 0.16rem + 0.4vw, 0.375rem);
+    --layout-spacing: clamp(0.1rem, 0.16rem + 0.4vw, 0.3rem);
+    --ui-spacing: var(--spacing);
 }
 
 @layer base {
@@ -170,10 +171,22 @@
         /* Layout Gap: the --gap-unit variable is set depending on component and it's size */
         --gap-unit: 1;
         --gap: calc(var(--gap-unit) * var(--layout-spacing));
+        --ui-gap: calc(var(--gap-unit) * var(--ui-spacing));
 
         --aspect-ratio: 1;
-        --px: calc(var(--aspect-ratio) * var(--h-unit) * var(--layout-spacing));
-        --h-unit: 1;
-        --py: calc(var(--h-unit) * var(--layout-spacing));
+        --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));
+        --ui-py: calc(var(--py-unit) * var(--ui-spacing));
+
+        --br-unit: 1;
+        --br-base: 0.25rem;
+        --br: calc(var(--br-unit) * var(--br-base));
+
+        --ui-br-base: 0.125rem;
+        --ui-br: calc(var(--br-unit) * var(--ui-br-base));
     }
 }

package/package.json

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