@vaneui/ui 0.3.1-alpha.20250916140129.7475230 → 0.3.1-alpha.20250921204254.9cfeae4

package/dist/ui.css

@@ -249,12 +249,12 @@
     --color-border-filled-warning: var(--color-yellow-600);
     --color-border-filled-info: var(--color-blue-600);
     --color-border-filled-link: var(--color-blue-600);
-    --ui-br-spacing: 0.125rem;
-    --ui-br-xs: calc(1 * var(--ui-br-spacing));
-    --ui-br-sm: calc(2 * var(--ui-br-spacing));
-    --ui-br-md: calc(3 * var(--ui-br-spacing));
-    --ui-br-lg: calc(4 * var(--ui-br-spacing));
-    --ui-br-xl: calc(5 * var(--ui-br-spacing));
+    --ui-br-unit: 0.125rem;
+    --ui-br-xs: calc(1 * var(--ui-br-unit));
+    --ui-br-sm: calc(2 * var(--ui-br-unit));
+    --ui-br-md: calc(3 * var(--ui-br-unit));
+    --ui-br-lg: calc(4 * var(--ui-br-unit));
+    --ui-br-xl: calc(5 * var(--ui-br-unit));
     --layout-br-spacing: 0.25rem;
     --layout-br-xs: calc(3 * var(--layout-br-spacing));
     --layout-br-sm: calc(4 * var(--layout-br-spacing));
@@ -262,11 +262,6 @@
     --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-gap-xs: calc(2 * var(--layout-spacing));
-    --layout-gap-sm: calc(3 * var(--layout-spacing));
-    --layout-gap-md: calc(4 * var(--layout-spacing));
-    --layout-gap-lg: calc(5 * var(--layout-spacing));
-    --layout-gap-xl: calc(6 * var(--layout-spacing));
   }
 }
 @layer base {
@@ -532,9 +527,6 @@
   .h-px {
     height: 1px;
   }
-  .w-1\/3 {
-    width: calc(1/3 * 100%);
-  }
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
@@ -664,20 +656,8 @@
   .justify-stretch {
     justify-content: stretch;
   }
-  .gap-\(--layout-gap-lg\) {
-    gap: var(--layout-gap-lg);
-  }
-  .gap-\(--layout-gap-md\) {
-    gap: var(--layout-gap-md);
-  }
-  .gap-\(--layout-gap-sm\) {
-    gap: var(--layout-gap-sm);
-  }
-  .gap-\(--layout-gap-xl\) {
-    gap: var(--layout-gap-xl);
-  }
-  .gap-\(--layout-gap-xs\) {
-    gap: var(--layout-gap-xs);
+  .gap-\(--gap\) {
+    gap: var(--gap);
   }
   .gap-0 {
     gap: calc(var(--spacing) * 0);
@@ -700,24 +680,6 @@
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
-  .gap-4 {
-    gap: calc(var(--spacing) * 4);
-  }
-  .gap-5 {
-    gap: calc(var(--spacing) * 5);
-  }
-  .gap-6 {
-    gap: calc(var(--spacing) * 6);
-  }
-  .gap-8 {
-    gap: calc(var(--spacing) * 8);
-  }
-  .gap-12 {
-    gap: calc(var(--spacing) * 12);
-  }
-  .gap-16 {
-    gap: calc(var(--spacing) * 16);
-  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1134,6 +1096,9 @@
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
+  .px-\(--px\) {
+    padding-inline: var(--px);
+  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
@@ -1161,17 +1126,8 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
-  .px-7 {
-    padding-inline: calc(var(--spacing) * 7);
-  }
-  .px-8 {
-    padding-inline: calc(var(--spacing) * 8);
-  }
-  .px-9 {
-    padding-inline: calc(var(--spacing) * 9);
-  }
-  .px-10 {
-    padding-inline: calc(var(--spacing) * 10);
+  .py-\(--py\) {
+    padding-block: var(--py);
   }
   .py-0 {
     padding-block: calc(var(--spacing) * 0);
@@ -1197,30 +1153,15 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
-  .py-5 {
-    padding-block: calc(var(--spacing) * 5);
-  }
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
-  .py-7 {
-    padding-block: calc(var(--spacing) * 7);
-  }
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
   .py-10 {
     padding-block: calc(var(--spacing) * 10);
   }
-  .py-12 {
-    padding-block: calc(var(--spacing) * 12);
-  }
-  .py-16 {
-    padding-block: calc(var(--spacing) * 16);
-  }
-  .py-20 {
-    padding-block: calc(var(--spacing) * 20);
-  }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
@@ -1667,6 +1608,72 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .\[--aspect-ratio\:1\.5\] {
+    --aspect-ratio: 1.5;
+  }
+  .\[--aspect-ratio\:1\.6\] {
+    --aspect-ratio: 1.6;
+  }
+  .\[--aspect-ratio\:1\.75\] {
+    --aspect-ratio: 1.75;
+  }
+  .\[--aspect-ratio\:2\.5\] {
+    --aspect-ratio: 2.5;
+  }
+  .\[--aspect-ratio\:2\] {
+    --aspect-ratio: 2;
+  }
+  .\[--gap-unit\:1\.5\] {
+    --gap-unit: 1.5;
+  }
+  .\[--gap-unit\:1\] {
+    --gap-unit: 1;
+  }
+  .\[--gap-unit\:2\.5\] {
+    --gap-unit: 2.5;
+  }
+  .\[--gap-unit\:2\] {
+    --gap-unit: 2;
+  }
+  .\[--gap-unit\:3\] {
+    --gap-unit: 3;
+  }
+  .\[--gap-unit\:4\] {
+    --gap-unit: 4;
+  }
+  .\[--gap-unit\:5\] {
+    --gap-unit: 5;
+  }
+  .\[--gap-unit\:6\] {
+    --gap-unit: 6;
+  }
+  .\[--h-unit\:2\] {
+    --h-unit: 2;
+  }
+  .\[--h-unit\:3\] {
+    --h-unit: 3;
+  }
+  .\[--h-unit\:4\] {
+    --h-unit: 4;
+  }
+  .\[--h-unit\:5\] {
+    --h-unit: 5;
+  }
+  .\[--h-unit\:6\] {
+    --h-unit: 6;
+  }
+  .\[--h-unit\:8\] {
+    --h-unit: 8;
+  }
+  .\[--h-unit\:12\] {
+    --h-unit: 12;
+  }
+  .\[--h-unit\:16\] {
+    --h-unit: 16;
+  }
+  .\[--h-unit\:20\] {
+    --h-unit: 20;
+  }
   .ring-inset {
     --tw-ring-inset: inset;
   }
@@ -2313,81 +2320,6 @@
       flex-direction: column;
     }
   }
-  .max-lg\:gap-2 {
-    @media (width < 64rem) {
-      gap: calc(var(--spacing) * 2);
-    }
-  }
-  .max-lg\:gap-3 {
-    @media (width < 64rem) {
-      gap: calc(var(--spacing) * 3);
-    }
-  }
-  .max-lg\:gap-4 {
-    @media (width < 64rem) {
-      gap: calc(var(--spacing) * 4);
-    }
-  }
-  .max-lg\:gap-5 {
-    @media (width < 64rem) {
-      gap: calc(var(--spacing) * 5);
-    }
-  }
-  .max-lg\:px-4 {
-    @media (width < 64rem) {
-      padding-inline: calc(var(--spacing) * 4);
-    }
-  }
-  .max-lg\:px-5 {
-    @media (width < 64rem) {
-      padding-inline: calc(var(--spacing) * 5);
-    }
-  }
-  .max-lg\:px-6 {
-    @media (width < 64rem) {
-      padding-inline: calc(var(--spacing) * 6);
-    }
-  }
-  .max-lg\:px-7 {
-    @media (width < 64rem) {
-      padding-inline: calc(var(--spacing) * 7);
-    }
-  }
-  .max-lg\:px-8 {
-    @media (width < 64rem) {
-      padding-inline: calc(var(--spacing) * 8);
-    }
-  }
-  .max-lg\:py-4 {
-    @media (width < 64rem) {
-      padding-block: calc(var(--spacing) * 4);
-    }
-  }
-  .max-lg\:py-5 {
-    @media (width < 64rem) {
-      padding-block: calc(var(--spacing) * 5);
-    }
-  }
-  .max-lg\:py-6 {
-    @media (width < 64rem) {
-      padding-block: calc(var(--spacing) * 6);
-    }
-  }
-  .max-lg\:py-7 {
-    @media (width < 64rem) {
-      padding-block: calc(var(--spacing) * 7);
-    }
-  }
-  .max-lg\:py-14 {
-    @media (width < 64rem) {
-      padding-block: calc(var(--spacing) * 14);
-    }
-  }
-  .max-lg\:py-16 {
-    @media (width < 64rem) {
-      padding-block: calc(var(--spacing) * 16);
-    }
-  }
   .max-lg\:text-2xl {
     @media (width < 64rem) {
       font-size: var(--text-2xl);
@@ -2434,61 +2366,6 @@
       flex-direction: column;
     }
   }
-  .max-md\:gap-3 {
-    @media (width < 48rem) {
-      gap: calc(var(--spacing) * 3);
-    }
-  }
-  .max-md\:gap-4 {
-    @media (width < 48rem) {
-      gap: calc(var(--spacing) * 4);
-    }
-  }
-  .max-md\:px-3 {
-    @media (width < 48rem) {
-      padding-inline: calc(var(--spacing) * 3);
-    }
-  }
-  .max-md\:px-4 {
-    @media (width < 48rem) {
-      padding-inline: calc(var(--spacing) * 4);
-    }
-  }
-  .max-md\:px-5 {
-    @media (width < 48rem) {
-      padding-inline: calc(var(--spacing) * 5);
-    }
-  }
-  .max-md\:px-6 {
-    @media (width < 48rem) {
-      padding-inline: calc(var(--spacing) * 6);
-    }
-  }
-  .max-md\:px-7 {
-    @media (width < 48rem) {
-      padding-inline: calc(var(--spacing) * 7);
-    }
-  }
-  .max-md\:py-3 {
-    @media (width < 48rem) {
-      padding-block: calc(var(--spacing) * 3);
-    }
-  }
-  .max-md\:py-5 {
-    @media (width < 48rem) {
-      padding-block: calc(var(--spacing) * 5);
-    }
-  }
-  .max-md\:py-6 {
-    @media (width < 48rem) {
-      padding-block: calc(var(--spacing) * 6);
-    }
-  }
-  .max-md\:py-12 {
-    @media (width < 48rem) {
-      padding-block: calc(var(--spacing) * 12);
-    }
-  }
   .max-md\:text-2xl {
     @media (width < 48rem) {
       font-size: var(--text-2xl);
@@ -2571,7 +2448,18 @@
     }
   }
 }
-@layer theme;
+@layer theme {
+  @layer base {
+    :where(*) {
+      --gap-unit: 1;
+      --gap: calc(var(--gap-unit) * var(--layout-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));
+    }
+  }
+}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;

package/dist/vars.css

@@ -1,4 +1,4 @@
-@theme inline {
+@theme {
     /* Text Colors */
     --color-text-default: var(--color-gray-900);
     --color-text-primary: var(--color-blue-600);
@@ -147,12 +147,12 @@
     --color-border-filled-link: var(--color-blue-600);
 
     /* UI Component Border Radius Sizes */
-    --ui-br-spacing: 0.125rem;
-    --ui-br-xs: calc(1 * var(--ui-br-spacing));
-    --ui-br-sm: calc(2 * var(--ui-br-spacing));
-    --ui-br-md: calc(3 * var(--ui-br-spacing));
-    --ui-br-lg: calc(4 * var(--ui-br-spacing));
-    --ui-br-xl: calc(5 * var(--ui-br-spacing));
+    --ui-br-unit: 0.125rem;
+    --ui-br-xs: calc(1 * var(--ui-br-unit));
+    --ui-br-sm: calc(2 * var(--ui-br-unit));
+    --ui-br-md: calc(3 * var(--ui-br-unit));
+    --ui-br-lg: calc(4 * var(--ui-br-unit));
+    --ui-br-xl: calc(5 * var(--ui-br-unit));
 
     /* Layout Component Border Radius Sizes */
     --layout-br-spacing: 0.25rem;
@@ -162,11 +162,18 @@
     --layout-br-lg: calc(6 * var(--layout-br-spacing));
     --layout-br-xl: calc(7 * var(--layout-br-spacing));
 
-    /* Layout Component Gap Sizes */
     --layout-spacing: clamp(0.1rem, 0.16rem + 0.4vw, 0.375rem);
-    --layout-gap-xs: calc(2 * var(--layout-spacing));
-    --layout-gap-sm: calc(3 * var(--layout-spacing));
-    --layout-gap-md: calc(4 * var(--layout-spacing));
-    --layout-gap-lg: calc(5 * var(--layout-spacing));
-    --layout-gap-xl: calc(6 * var(--layout-spacing));
 }
+
+@layer base {
+    :where(*) {
+        /* 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));
+
+        --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));
+    }
+}

package/package.json

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

package/dist/components/ui/classes/gapClasses.d.ts

@@ -1,3 +0,0 @@
-import { SizeKey } from "../props";
-export declare const layoutGapClasses: Record<SizeKey, string>;
-//# sourceMappingURL=gapClasses.d.ts.map

package/dist/components/ui/classes/gapClasses.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"gapClasses.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/classes/gapClasses.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAMpD,CAAC"}