@vaneui/ui 0.3.1-alpha.20250916140129.7475230 → 0.3.1-alpha.20250917170051.b819c80

package/dist/ui.css

@@ -267,6 +267,26 @@
     --layout-gap-md: calc(4 * var(--layout-spacing));
     --layout-gap-lg: calc(5 * var(--layout-spacing));
     --layout-gap-xl: calc(6 * var(--layout-spacing));
+    --layout-px-xs: calc(2 * var(--layout-spacing));
+    --layout-px-sm: calc(3 * var(--layout-spacing));
+    --layout-px-md: calc(4 * var(--layout-spacing));
+    --layout-px-lg: calc(5 * var(--layout-spacing));
+    --layout-px-xl: calc(6 * var(--layout-spacing));
+    --layout-py-xs: calc(2 * var(--layout-spacing));
+    --layout-py-sm: calc(3 * var(--layout-spacing));
+    --layout-py-md: calc(4 * var(--layout-spacing));
+    --layout-py-lg: calc(5 * var(--layout-spacing));
+    --layout-py-xl: calc(6 * var(--layout-spacing));
+    --section-px-xs: calc(5 * var(--layout-spacing));
+    --section-px-sm: calc(6 * var(--layout-spacing));
+    --section-px-md: calc(7 * var(--layout-spacing));
+    --section-px-lg: calc(8 * var(--layout-spacing));
+    --section-px-xl: calc(9 * var(--layout-spacing));
+    --section-py-xs: calc(4 * var(--layout-spacing));
+    --section-py-sm: calc(8 * var(--layout-spacing));
+    --section-py-md: calc(12 * var(--layout-spacing));
+    --section-py-lg: calc(16 * var(--layout-spacing));
+    --section-py-xl: calc(20 * var(--layout-spacing));
   }
 }
 @layer base {
@@ -709,15 +729,6 @@
   .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 +1145,36 @@
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
+  .px-\(--layout-px-lg\) {
+    padding-inline: var(--layout-px-lg);
+  }
+  .px-\(--layout-px-md\) {
+    padding-inline: var(--layout-px-md);
+  }
+  .px-\(--layout-px-sm\) {
+    padding-inline: var(--layout-px-sm);
+  }
+  .px-\(--layout-px-xl\) {
+    padding-inline: var(--layout-px-xl);
+  }
+  .px-\(--layout-px-xs\) {
+    padding-inline: var(--layout-px-xs);
+  }
+  .px-\(--section-px-lg\) {
+    padding-inline: var(--section-px-lg);
+  }
+  .px-\(--section-px-md\) {
+    padding-inline: var(--section-px-md);
+  }
+  .px-\(--section-px-sm\) {
+    padding-inline: var(--section-px-sm);
+  }
+  .px-\(--section-px-xl\) {
+    padding-inline: var(--section-px-xl);
+  }
+  .px-\(--section-px-xs\) {
+    padding-inline: var(--section-px-xs);
+  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
@@ -1161,18 +1202,42 @@
   .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-\(--layout-py-lg\) {
+    padding-block: var(--layout-py-lg);
+  }
+  .py-\(--layout-py-md\) {
+    padding-block: var(--layout-py-md);
+  }
+  .py-\(--layout-py-sm\) {
+    padding-block: var(--layout-py-sm);
+  }
+  .py-\(--layout-py-xl\) {
+    padding-block: var(--layout-py-xl);
+  }
+  .py-\(--layout-py-xs\) {
+    padding-block: var(--layout-py-xs);
+  }
+  .py-\(--section-py-lg\) {
+    padding-block: var(--section-py-lg);
+  }
+  .py-\(--section-py-md\) {
+    padding-block: var(--section-py-md);
+  }
+  .py-\(--section-py-sm\) {
+    padding-block: var(--section-py-sm);
+  }
+  .py-\(--section-py-xl\) {
+    padding-block: var(--section-py-xl);
+  }
+  .py-\(--section-py-xs\) {
+    padding-block: var(--section-py-xs);
+  }
   .py-0 {
     padding-block: calc(var(--spacing) * 0);
   }
@@ -1197,30 +1262,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);
   }
@@ -2313,81 +2363,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 +2409,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);

package/dist/vars.css

@@ -169,4 +169,32 @@
     --layout-gap-md: calc(4 * var(--layout-spacing));
     --layout-gap-lg: calc(5 * var(--layout-spacing));
     --layout-gap-xl: calc(6 * var(--layout-spacing));
+
+    /* Layout Component Horizontal Padding Sizes */
+    --layout-px-xs: calc(2 * var(--layout-spacing));
+    --layout-px-sm: calc(3 * var(--layout-spacing));
+    --layout-px-md: calc(4 * var(--layout-spacing));
+    --layout-px-lg: calc(5 * var(--layout-spacing));
+    --layout-px-xl: calc(6 * var(--layout-spacing));
+
+    /* Layout Component Vertical Padding Sizes */
+    --layout-py-xs: calc(2 * var(--layout-spacing));
+    --layout-py-sm: calc(3 * var(--layout-spacing));
+    --layout-py-md: calc(4 * var(--layout-spacing));
+    --layout-py-lg: calc(5 * var(--layout-spacing));
+    --layout-py-xl: calc(6 * var(--layout-spacing));
+
+    /* Section Component Horizontal Padding Sizes */
+    --section-px-xs: calc(5 * var(--layout-spacing));
+    --section-px-sm: calc(6 * var(--layout-spacing));
+    --section-px-md: calc(7 * var(--layout-spacing));
+    --section-px-lg: calc(8 * var(--layout-spacing));
+    --section-px-xl: calc(9 * var(--layout-spacing));
+
+    /* Section Component Vertical Padding Sizes */
+    --section-py-xs: calc(4 * var(--layout-spacing));
+    --section-py-sm: calc(8 * var(--layout-spacing));
+    --section-py-md: calc(12 * var(--layout-spacing));
+    --section-py-lg: calc(16 * var(--layout-spacing));
+    --section-py-xl: calc(20 * 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.20250917170051.b819c80",
   "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"}