@vaneui/ui 0.3.1-alpha.20251002075149.f5b5fd6 → 0.3.1-alpha.20251002123640.8bde935

package/dist/index.esm.js

@@ -5446,14 +5446,14 @@ const defaultGrid5Theme = new ComponentTheme("div", "grid-cols-1 sm:grid-cols-2
 const defaultGrid6Theme = new ComponentTheme("div", "grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6", gridSubThemes, themeDefaults.grid6, GRID_CATEGORIES);
 
 var _a, _b, _c;
-const defaultCheckboxTheme = new ComponentTheme("input", "peer col-start-1 row-start-1 cursor-pointer appearance-none ring-transparent", {
+const defaultCheckboxTheme = new ComponentTheme("input", "peer col-start-1 row-start-1 cursor-pointer appearance-none ring-transparent size-(--ui-size)", {
     size: {
         size: new SizeTheme({
-            xs: 'h-3 w-3',
-            sm: 'h-3.5 w-3.5',
-            md: 'h-4 w-4',
-            lg: 'h-4.5 w-4.5',
-            xl: 'h-5 w-5'
+            xs: '[--size-unit:3]',
+            sm: '[--size-unit:3.5]',
+            md: '[--size-unit:4]',
+            lg: '[--size-unit:4.5]',
+            xl: '[--size-unit:5]'
         }),
         text: new FontSizeTheme()
     },

package/dist/index.js

@@ -5448,14 +5448,14 @@ const defaultGrid5Theme = new ComponentTheme("div", "grid-cols-1 sm:grid-cols-2
 const defaultGrid6Theme = new ComponentTheme("div", "grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6", gridSubThemes, themeDefaults.grid6, GRID_CATEGORIES);
 
 var _a, _b, _c;
-const defaultCheckboxTheme = new ComponentTheme("input", "peer col-start-1 row-start-1 cursor-pointer appearance-none ring-transparent", {
+const defaultCheckboxTheme = new ComponentTheme("input", "peer col-start-1 row-start-1 cursor-pointer appearance-none ring-transparent size-(--ui-size)", {
     size: {
         size: new SizeTheme({
-            xs: 'h-3 w-3',
-            sm: 'h-3.5 w-3.5',
-            md: 'h-4 w-4',
-            lg: 'h-4.5 w-4.5',
-            xl: 'h-5 w-5'
+            xs: '[--size-unit:3]',
+            sm: '[--size-unit:3.5]',
+            md: '[--size-unit:4]',
+            lg: '[--size-unit:4.5]',
+            xl: '[--size-unit:5]'
         }),
         text: new FontSizeTheme()
     },

package/dist/ui.css

@@ -258,6 +258,7 @@
     --aspect-ratio: 1;
     --py-unit: 1;
     --br-unit: 1;
+    --size-unit: 1;
   }
 }
 @layer base {
@@ -508,20 +509,9 @@
   .aspect-ratio {
     aspect-ratio: var(--aspect-ratio);
   }
-  .h-3 {
-    height: calc(var(--spacing) * 3);
-  }
-  .h-3\.5 {
-    height: calc(var(--spacing) * 3.5);
-  }
-  .h-4 {
-    height: calc(var(--spacing) * 4);
-  }
-  .h-4\.5 {
-    height: calc(var(--spacing) * 4.5);
-  }
-  .h-5 {
-    height: calc(var(--spacing) * 5);
+  .size-\(--ui-size\) {
+    width: var(--ui-size);
+    height: var(--ui-size);
   }
   .h-\[calc\(var\(--lh\)\*var\(--fs\)\)\] {
     height: calc(var(--lh) * var(--fs));
@@ -532,21 +522,6 @@
   .h-px {
     height: 1px;
   }
-  .w-3 {
-    width: calc(var(--spacing) * 3);
-  }
-  .w-3\.5 {
-    width: calc(var(--spacing) * 3.5);
-  }
-  .w-4 {
-    width: calc(var(--spacing) * 4);
-  }
-  .w-4\.5 {
-    width: calc(var(--spacing) * 4.5);
-  }
-  .w-5 {
-    width: calc(var(--spacing) * 5);
-  }
   .w-fit {
     width: fit-content;
   }
@@ -1719,6 +1694,21 @@
   .\[--py-unit\:20\] {
     --py-unit: 20;
   }
+  .\[--size-unit\:3\.5\] {
+    --size-unit: 3.5;
+  }
+  .\[--size-unit\:3\] {
+    --size-unit: 3;
+  }
+  .\[--size-unit\:4\.5\] {
+    --size-unit: 4.5;
+  }
+  .\[--size-unit\:4\] {
+    --size-unit: 4;
+  }
+  .\[--size-unit\:5\] {
+    --size-unit: 5;
+  }
   .ring-inset {
     --tw-ring-inset: inset;
   }
@@ -2610,6 +2600,7 @@
       --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));
+      --ui-size: calc(var(--size-unit) * var(--ui-spacing));
       --br: calc(var(--br-unit) * var(--br-base));
       --ui-br: calc(var(--br-unit) * var(--ui-br-base));
       --fs: calc(var(--fs-unit) * var(--fs-base));

package/dist/vars.css

@@ -163,6 +163,7 @@
     --aspect-ratio: 1;
     --py-unit: 1;
     --br-unit: 1;
+    --size-unit: 1;
 }
 
 @layer base {
@@ -174,6 +175,7 @@
         --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));
+        --ui-size: calc(var(--size-unit) * var(--ui-spacing));
 
         --br: calc(var(--br-unit) * var(--br-base));
         --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.20251002075149.f5b5fd6",
+  "version": "0.3.1-alpha.20251002123640.8bde935",
   "description": "A simple and lightweight UI component library for React, built with Tailwind CSS.",
   "author": "",
   "license": "ISC",