jasmincss 1.0.6 → 1.0.8

package/JASMINCSS-GUIDE.md

@@ -2,7 +2,7 @@
 
 > **Complete reference of all available utility classes and components**
 >
-> Generated automatically from JasminCSS v1.0.6
+> Generated automatically from JasminCSS v1.0.8
 
 ## Table of Contents
 
@@ -387,7 +387,7 @@
 | `aspect-auto` | `aspect-ratio: auto;` |
 | `aspect-square` | `aspect-ratio: 1 / 1;` |
 | `aspect-video` | `aspect-ratio: 16 / 9;` |
-| `aspect-4\/3` | `aspect-ratio: 4 / 3;` |
+| `aspect-4/3` | `aspect-ratio: 4 / 3;` |
 | `visible` | `visibility: visible;` |
 | `invisible` | `visibility: hidden;` |
 | `collapse` | `visibility: collapse;` |
@@ -1017,6 +1017,8 @@
 | `rounded-xl` | `border-radius: 1rem;` |
 | `rounded-2xl` | `border-radius: 1.5rem;` |
 | `rounded-full` | `border-radius: 9999px;` |
+| `rounded-buttons` | `border-radius: 0.5rem;` |
+| `rounded-inputs` | `border-radius: 0.5rem;` |
 | `rounded-t-none` | `border-top-left-radius: 0; border-top-right-radius: 0;` |
 | `rounded-r-none` | `border-top-right-radius: 0; border-bottom-right-radius: 0;` |
 | `rounded-b-none` | `border-bottom-left-radius: 0; border-bottom-right-radius: 0;` |
@@ -1129,6 +1131,34 @@
 | `rounded-se-full` | `border-start-end-radius: 9999px;` |
 | `rounded-ee-full` | `border-end-end-radius: 9999px;` |
 | `rounded-es-full` | `border-end-start-radius: 9999px;` |
+| `rounded-t-buttons` | `border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;` |
+| `rounded-r-buttons` | `border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;` |
+| `rounded-b-buttons` | `border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem;` |
+| `rounded-l-buttons` | `border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;` |
+| `rounded-tl-buttons` | `border-top-left-radius: 0.5rem;` |
+| `rounded-tr-buttons` | `border-top-right-radius: 0.5rem;` |
+| `rounded-br-buttons` | `border-bottom-right-radius: 0.5rem;` |
+| `rounded-bl-buttons` | `border-bottom-left-radius: 0.5rem;` |
+| `rounded-s-buttons` | `border-start-start-radius: 0.5rem; border-end-start-radius: 0.5rem;` |
+| `rounded-e-buttons` | `border-start-end-radius: 0.5rem; border-end-end-radius: 0.5rem;` |
+| `rounded-ss-buttons` | `border-start-start-radius: 0.5rem;` |
+| `rounded-se-buttons` | `border-start-end-radius: 0.5rem;` |
+| `rounded-ee-buttons` | `border-end-end-radius: 0.5rem;` |
+| `rounded-es-buttons` | `border-end-start-radius: 0.5rem;` |
+| `rounded-t-inputs` | `border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;` |
+| `rounded-r-inputs` | `border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;` |
+| `rounded-b-inputs` | `border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem;` |
+| `rounded-l-inputs` | `border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;` |
+| `rounded-tl-inputs` | `border-top-left-radius: 0.5rem;` |
+| `rounded-tr-inputs` | `border-top-right-radius: 0.5rem;` |
+| `rounded-br-inputs` | `border-bottom-right-radius: 0.5rem;` |
+| `rounded-bl-inputs` | `border-bottom-left-radius: 0.5rem;` |
+| `rounded-s-inputs` | `border-start-start-radius: 0.5rem; border-end-start-radius: 0.5rem;` |
+| `rounded-e-inputs` | `border-start-end-radius: 0.5rem; border-end-end-radius: 0.5rem;` |
+| `rounded-ss-inputs` | `border-start-start-radius: 0.5rem;` |
+| `rounded-se-inputs` | `border-start-end-radius: 0.5rem;` |
+| `rounded-ee-inputs` | `border-end-end-radius: 0.5rem;` |
+| `rounded-es-inputs` | `border-end-start-radius: 0.5rem;` |
 | `border-0` | `border-width: 0px;` |
 | `border` | `border-width: 1px;` |
 | `border-2` | `border-width: 2px;` |
@@ -2393,6 +2423,6 @@ export default withJasminCSS({});
 
 ---
 
-**Total utility classes: 5,926**
+**Total utility classes: 5,956**
 
 Generated on 2026-01-16

package/dist/index.js

@@ -46,6 +46,7 @@ var import_fs2 = __toESM(require("fs"), 1);
 var import_fast_glob = __toESM(require("fast-glob"), 1);
 var import_postcss = __toESM(require("postcss"), 1);
 var import_cssnano = __toESM(require("cssnano"), 1);
+var import_picocolors = __toESM(require("picocolors"), 1);
 
 // src/config/loader.js
 var import_fs = __toESM(require("fs"), 1);
@@ -94,7 +95,12 @@ var defaultConfig = {
       lg: "0.75rem",
       xl: "1rem",
       "2xl": "1.5rem",
-      full: "9999px"
+      full: "9999px",
+      // Component-specific border radius
+      buttons: "0.5rem",
+      // Separate radius for buttons
+      inputs: "0.5rem"
+      // Separate radius for form inputs, cards, etc.
     },
     shadows: {
       sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -498,10 +504,10 @@ function generateLayoutUtilities(config) {
   });
   const spacing = config.spacing || {};
   Object.entries(spacing).forEach(([key, value]) => {
-    const safeName = key.replace(".", "\\.");
-    classes.push({ name: `gap-${safeName}`, css: `.gap-${safeName} { gap: ${value}; }` });
-    classes.push({ name: `gap-x-${safeName}`, css: `.gap-x-${safeName} { column-gap: ${value}; }` });
-    classes.push({ name: `gap-y-${safeName}`, css: `.gap-y-${safeName} { row-gap: ${value}; }` });
+    const safeName = key.replace(/\./g, "\\.");
+    classes.push({ name: `gap-${key}`, css: `.gap-${safeName} { gap: ${value}; }` });
+    classes.push({ name: `gap-x-${key}`, css: `.gap-x-${safeName} { column-gap: ${value}; }` });
+    classes.push({ name: `gap-y-${key}`, css: `.gap-y-${safeName} { row-gap: ${value}; }` });
   });
   for (let i = 1; i <= 12; i++) {
     classes.push({
@@ -555,20 +561,20 @@ function generateLayoutUtilities(config) {
   });
   const insetValues = { "0": "0", "auto": "auto", "full": "100%", "1/2": "50%", "1/3": "33.333333%", "2/3": "66.666667%", "1/4": "25%", "3/4": "75%" };
   Object.entries({ ...spacing, ...insetValues }).forEach(([key, value]) => {
-    const safeName = key.replace("/", "\\/").replace(".", "\\.");
-    classes.push({ name: `inset-${safeName}`, css: `.inset-${safeName} { inset: ${value}; }` });
-    classes.push({ name: `inset-x-${safeName}`, css: `.inset-x-${safeName} { left: ${value}; right: ${value}; }` });
-    classes.push({ name: `inset-y-${safeName}`, css: `.inset-y-${safeName} { top: ${value}; bottom: ${value}; }` });
-    classes.push({ name: `top-${safeName}`, css: `.top-${safeName} { top: ${value}; }` });
-    classes.push({ name: `right-${safeName}`, css: `.right-${safeName} { right: ${value}; }` });
-    classes.push({ name: `bottom-${safeName}`, css: `.bottom-${safeName} { bottom: ${value}; }` });
-    classes.push({ name: `left-${safeName}`, css: `.left-${safeName} { left: ${value}; }` });
+    const safeName = key.replace(/\//g, "\\/").replace(/\./g, "\\.");
+    classes.push({ name: `inset-${key}`, css: `.inset-${safeName} { inset: ${value}; }` });
+    classes.push({ name: `inset-x-${key}`, css: `.inset-x-${safeName} { left: ${value}; right: ${value}; }` });
+    classes.push({ name: `inset-y-${key}`, css: `.inset-y-${safeName} { top: ${value}; bottom: ${value}; }` });
+    classes.push({ name: `top-${key}`, css: `.top-${safeName} { top: ${value}; }` });
+    classes.push({ name: `right-${key}`, css: `.right-${safeName} { right: ${value}; }` });
+    classes.push({ name: `bottom-${key}`, css: `.bottom-${safeName} { bottom: ${value}; }` });
+    classes.push({ name: `left-${key}`, css: `.left-${safeName} { left: ${value}; }` });
     if (key !== "auto" && key !== "full" && !key.includes("/")) {
-      classes.push({ name: `-inset-${safeName}`, css: `.-inset-${safeName} { inset: -${value}; }` });
-      classes.push({ name: `-top-${safeName}`, css: `.-top-${safeName} { top: -${value}; }` });
-      classes.push({ name: `-right-${safeName}`, css: `.-right-${safeName} { right: -${value}; }` });
-      classes.push({ name: `-bottom-${safeName}`, css: `.-bottom-${safeName} { bottom: -${value}; }` });
-      classes.push({ name: `-left-${safeName}`, css: `.-left-${safeName} { left: -${value}; }` });
+      classes.push({ name: `-inset-${key}`, css: `.-inset-${safeName} { inset: -${value}; }` });
+      classes.push({ name: `-top-${key}`, css: `.-top-${safeName} { top: -${value}; }` });
+      classes.push({ name: `-right-${key}`, css: `.-right-${safeName} { right: -${value}; }` });
+      classes.push({ name: `-bottom-${key}`, css: `.-bottom-${safeName} { bottom: -${value}; }` });
+      classes.push({ name: `-left-${key}`, css: `.-left-${safeName} { left: -${value}; }` });
     }
   });
   ["auto", "0", "10", "20", "30", "40", "50"].forEach((z) => {
@@ -619,8 +625,8 @@ function generateLayoutUtilities(config) {
     "11/12": "91.666667%"
   };
   Object.entries({ ...spacing, ...widthSizes }).forEach(([key, value]) => {
-    const safeName = key.replace("/", "\\/").replace(".", "\\.");
-    classes.push({ name: `w-${safeName}`, css: `.w-${safeName} { width: ${value}; }` });
+    const safeName = key.replace(/\//g, "\\/").replace(/\./g, "\\.");
+    classes.push({ name: `w-${key}`, css: `.w-${safeName} { width: ${value}; }` });
   });
   const heightSizes = {
     "0": "0",
@@ -648,8 +654,8 @@ function generateLayoutUtilities(config) {
     "5/6": "83.333333%"
   };
   Object.entries({ ...spacing, ...heightSizes }).forEach(([key, value]) => {
-    const safeName = key.replace("/", "\\/").replace(".", "\\.");
-    classes.push({ name: `h-${safeName}`, css: `.h-${safeName} { height: ${value}; }` });
+    const safeName = key.replace(/\//g, "\\/").replace(/\./g, "\\.");
+    classes.push({ name: `h-${key}`, css: `.h-${safeName} { height: ${value}; }` });
   });
   const minMaxWidths = { "0": "0", "none": "none", "xs": "20rem", "sm": "24rem", "md": "28rem", "lg": "32rem", "xl": "36rem", "2xl": "42rem", "3xl": "48rem", "4xl": "56rem", "5xl": "64rem", "6xl": "72rem", "7xl": "80rem", "full": "100%", "min": "min-content", "max": "max-content", "fit": "fit-content", "prose": "65ch", "screen-sm": "640px", "screen-md": "768px", "screen-lg": "1024px", "screen-xl": "1280px", "screen-2xl": "1536px" };
   Object.entries(minMaxWidths).forEach(([key, value]) => {
@@ -662,14 +668,14 @@ function generateLayoutUtilities(config) {
     classes.push({ name: `max-h-${key}`, css: `.max-h-${key} { max-height: ${value}; }` });
   });
   Object.entries(spacing).forEach(([key, value]) => {
-    const safeName = key.replace(".", "\\.");
-    classes.push({ name: `min-h-${safeName}`, css: `.min-h-${safeName} { min-height: ${value}; }` });
-    classes.push({ name: `max-h-${safeName}`, css: `.max-h-${safeName} { max-height: ${value}; }` });
+    const safeName = key.replace(/\./g, "\\.");
+    classes.push({ name: `min-h-${key}`, css: `.min-h-${safeName} { min-height: ${value}; }` });
+    classes.push({ name: `max-h-${key}`, css: `.max-h-${safeName} { max-height: ${value}; }` });
   });
   Object.entries({ ...spacing, ...widthSizes }).forEach(([key, value]) => {
     if (key !== "screen" && key !== "svw" && key !== "lvw" && key !== "dvw") {
-      const safeName = key.replace("/", "\\/").replace(".", "\\.");
-      classes.push({ name: `size-${safeName}`, css: `.size-${safeName} { width: ${value}; height: ${value}; }` });
+      const safeName = key.replace(/\//g, "\\/").replace(/\./g, "\\.");
+      classes.push({ name: `size-${key}`, css: `.size-${safeName} { width: ${value}; height: ${value}; }` });
     }
   });
   ["auto", "hidden", "clip", "visible", "scroll"].forEach((o) => {
@@ -686,7 +692,7 @@ function generateLayoutUtilities(config) {
   classes.push({ name: "aspect-auto", css: ".aspect-auto { aspect-ratio: auto; }" });
   classes.push({ name: "aspect-square", css: ".aspect-square { aspect-ratio: 1 / 1; }" });
   classes.push({ name: "aspect-video", css: ".aspect-video { aspect-ratio: 16 / 9; }" });
-  classes.push({ name: "aspect-4\\/3", css: ".aspect-4\\/3 { aspect-ratio: 4 / 3; }" });
+  classes.push({ name: "aspect-4/3", css: ".aspect-4\\/3 { aspect-ratio: 4 / 3; }" });
   classes.push({ name: "visible", css: ".visible { visibility: visible; }" });
   classes.push({ name: "invisible", css: ".invisible { visibility: hidden; }" });
   classes.push({ name: "collapse", css: ".collapse { visibility: collapse; }" });
@@ -814,28 +820,28 @@ function generateSpacingUtilities(config, options = {}) {
   const spacing = config.spacing || {};
   const { usedClasses } = options;
   Object.entries(spacing).forEach(([key, value]) => {
-    const safeName = key.replace(".", "\\.");
-    classes.push({ name: `p-${safeName}`, css: `.p-${safeName} { padding: ${value}; }` });
-    classes.push({ name: `pt-${safeName}`, css: `.pt-${safeName} { padding-top: ${value}; }` });
-    classes.push({ name: `pr-${safeName}`, css: `.pr-${safeName} { padding-right: ${value}; }` });
-    classes.push({ name: `pb-${safeName}`, css: `.pb-${safeName} { padding-bottom: ${value}; }` });
-    classes.push({ name: `pl-${safeName}`, css: `.pl-${safeName} { padding-left: ${value}; }` });
-    classes.push({ name: `px-${safeName}`, css: `.px-${safeName} { padding-left: ${value}; padding-right: ${value}; }` });
-    classes.push({ name: `py-${safeName}`, css: `.py-${safeName} { padding-top: ${value}; padding-bottom: ${value}; }` });
-    classes.push({ name: `ps-${safeName}`, css: `.ps-${safeName} { padding-inline-start: ${value}; }` });
-    classes.push({ name: `pe-${safeName}`, css: `.pe-${safeName} { padding-inline-end: ${value}; }` });
+    const safeName = key.replace(/\./g, "\\.");
+    classes.push({ name: `p-${key}`, css: `.p-${safeName} { padding: ${value}; }` });
+    classes.push({ name: `pt-${key}`, css: `.pt-${safeName} { padding-top: ${value}; }` });
+    classes.push({ name: `pr-${key}`, css: `.pr-${safeName} { padding-right: ${value}; }` });
+    classes.push({ name: `pb-${key}`, css: `.pb-${safeName} { padding-bottom: ${value}; }` });
+    classes.push({ name: `pl-${key}`, css: `.pl-${safeName} { padding-left: ${value}; }` });
+    classes.push({ name: `px-${key}`, css: `.px-${safeName} { padding-left: ${value}; padding-right: ${value}; }` });
+    classes.push({ name: `py-${key}`, css: `.py-${safeName} { padding-top: ${value}; padding-bottom: ${value}; }` });
+    classes.push({ name: `ps-${key}`, css: `.ps-${safeName} { padding-inline-start: ${value}; }` });
+    classes.push({ name: `pe-${key}`, css: `.pe-${safeName} { padding-inline-end: ${value}; }` });
   });
   Object.entries(spacing).forEach(([key, value]) => {
-    const safeName = key.replace(".", "\\.");
-    classes.push({ name: `m-${safeName}`, css: `.m-${safeName} { margin: ${value}; }` });
-    classes.push({ name: `mt-${safeName}`, css: `.mt-${safeName} { margin-top: ${value}; }` });
-    classes.push({ name: `mr-${safeName}`, css: `.mr-${safeName} { margin-right: ${value}; }` });
-    classes.push({ name: `mb-${safeName}`, css: `.mb-${safeName} { margin-bottom: ${value}; }` });
-    classes.push({ name: `ml-${safeName}`, css: `.ml-${safeName} { margin-left: ${value}; }` });
-    classes.push({ name: `mx-${safeName}`, css: `.mx-${safeName} { margin-left: ${value}; margin-right: ${value}; }` });
-    classes.push({ name: `my-${safeName}`, css: `.my-${safeName} { margin-top: ${value}; margin-bottom: ${value}; }` });
-    classes.push({ name: `ms-${safeName}`, css: `.ms-${safeName} { margin-inline-start: ${value}; }` });
-    classes.push({ name: `me-${safeName}`, css: `.me-${safeName} { margin-inline-end: ${value}; }` });
+    const safeName = key.replace(/\./g, "\\.");
+    classes.push({ name: `m-${key}`, css: `.m-${safeName} { margin: ${value}; }` });
+    classes.push({ name: `mt-${key}`, css: `.mt-${safeName} { margin-top: ${value}; }` });
+    classes.push({ name: `mr-${key}`, css: `.mr-${safeName} { margin-right: ${value}; }` });
+    classes.push({ name: `mb-${key}`, css: `.mb-${safeName} { margin-bottom: ${value}; }` });
+    classes.push({ name: `ml-${key}`, css: `.ml-${safeName} { margin-left: ${value}; }` });
+    classes.push({ name: `mx-${key}`, css: `.mx-${safeName} { margin-left: ${value}; margin-right: ${value}; }` });
+    classes.push({ name: `my-${key}`, css: `.my-${safeName} { margin-top: ${value}; margin-bottom: ${value}; }` });
+    classes.push({ name: `ms-${key}`, css: `.ms-${safeName} { margin-inline-start: ${value}; }` });
+    classes.push({ name: `me-${key}`, css: `.me-${safeName} { margin-inline-end: ${value}; }` });
   });
   classes.push({ name: "m-auto", css: ".m-auto { margin: auto; }" });
   classes.push({ name: "mx-auto", css: ".mx-auto { margin-left: auto; margin-right: auto; }" });
@@ -849,32 +855,32 @@ function generateSpacingUtilities(config, options = {}) {
   Object.entries(spacing).forEach(([key, value]) => {
     if (key === "0" || key === "px")
       return;
-    const safeName = key.replace(".", "\\.");
-    classes.push({ name: `-m-${safeName}`, css: `.-m-${safeName} { margin: -${value}; }` });
-    classes.push({ name: `-mt-${safeName}`, css: `.-mt-${safeName} { margin-top: -${value}; }` });
-    classes.push({ name: `-mr-${safeName}`, css: `.-mr-${safeName} { margin-right: -${value}; }` });
-    classes.push({ name: `-mb-${safeName}`, css: `.-mb-${safeName} { margin-bottom: -${value}; }` });
-    classes.push({ name: `-ml-${safeName}`, css: `.-ml-${safeName} { margin-left: -${value}; }` });
-    classes.push({ name: `-mx-${safeName}`, css: `.-mx-${safeName} { margin-left: -${value}; margin-right: -${value}; }` });
-    classes.push({ name: `-my-${safeName}`, css: `.-my-${safeName} { margin-top: -${value}; margin-bottom: -${value}; }` });
+    const safeName = key.replace(/\./g, "\\.");
+    classes.push({ name: `-m-${key}`, css: `.-m-${safeName} { margin: -${value}; }` });
+    classes.push({ name: `-mt-${key}`, css: `.-mt-${safeName} { margin-top: -${value}; }` });
+    classes.push({ name: `-mr-${key}`, css: `.-mr-${safeName} { margin-right: -${value}; }` });
+    classes.push({ name: `-mb-${key}`, css: `.-mb-${safeName} { margin-bottom: -${value}; }` });
+    classes.push({ name: `-ml-${key}`, css: `.-ml-${safeName} { margin-left: -${value}; }` });
+    classes.push({ name: `-mx-${key}`, css: `.-mx-${safeName} { margin-left: -${value}; margin-right: -${value}; }` });
+    classes.push({ name: `-my-${key}`, css: `.-my-${safeName} { margin-top: -${value}; margin-bottom: -${value}; }` });
   });
   Object.entries(spacing).forEach(([key, value]) => {
-    const safeName = key.replace(".", "\\.");
+    const safeName = key.replace(/\./g, "\\.");
     classes.push({
-      name: `space-x-${safeName}`,
+      name: `space-x-${key}`,
       css: `.space-x-${safeName} > :not([hidden]) ~ :not([hidden]) { margin-left: ${value}; }`
     });
     classes.push({
-      name: `space-y-${safeName}`,
+      name: `space-y-${key}`,
       css: `.space-y-${safeName} > :not([hidden]) ~ :not([hidden]) { margin-top: ${value}; }`
     });
     if (key !== "0" && key !== "px") {
       classes.push({
-        name: `-space-x-${safeName}`,
+        name: `-space-x-${key}`,
         css: `.-space-x-${safeName} > :not([hidden]) ~ :not([hidden]) { margin-left: -${value}; }`
       });
       classes.push({
-        name: `-space-y-${safeName}`,
+        name: `-space-y-${key}`,
         css: `.-space-y-${safeName} > :not([hidden]) ~ :not([hidden]) { margin-top: -${value}; }`
       });
     }
@@ -1723,19 +1729,19 @@ function generateTransformUtilities(config) {
     "full": "100%"
   };
   Object.entries(translateValues).forEach(([key, value]) => {
-    const safeName = key.replace("/", "\\/").replace(".", "\\.");
-    classes.push({ name: `translate-x-${safeName}`, css: `.translate-x-${safeName} { --j-translate-x: ${value}; transform: translateX(${value}); }` });
-    classes.push({ name: `translate-y-${safeName}`, css: `.translate-y-${safeName} { --j-translate-y: ${value}; transform: translateY(${value}); }` });
+    const safeName = key.replace(/\//g, "\\/").replace(/\./g, "\\.");
+    classes.push({ name: `translate-x-${key}`, css: `.translate-x-${safeName} { --j-translate-x: ${value}; transform: translateX(${value}); }` });
+    classes.push({ name: `translate-y-${key}`, css: `.translate-y-${safeName} { --j-translate-y: ${value}; transform: translateY(${value}); }` });
     if (!key.includes("/")) {
-      classes.push({ name: `-translate-x-${safeName}`, css: `.-translate-x-${safeName} { --j-translate-x: -${value}; transform: translateX(-${value}); }` });
-      classes.push({ name: `-translate-y-${safeName}`, css: `.-translate-y-${safeName} { --j-translate-y: -${value}; transform: translateY(-${value}); }` });
+      classes.push({ name: `-translate-x-${key}`, css: `.-translate-x-${safeName} { --j-translate-x: -${value}; transform: translateX(-${value}); }` });
+      classes.push({ name: `-translate-y-${key}`, css: `.-translate-y-${safeName} { --j-translate-y: -${value}; transform: translateY(-${value}); }` });
     }
   });
   ["1/2", "1/3", "2/3", "1/4", "3/4", "full"].forEach((key) => {
     const value = translateValues[key];
-    const safeName = key.replace("/", "\\/");
-    classes.push({ name: `-translate-x-${safeName}`, css: `.-translate-x-${safeName} { --j-translate-x: -${value}; transform: translateX(-${value}); }` });
-    classes.push({ name: `-translate-y-${safeName}`, css: `.-translate-y-${safeName} { --j-translate-y: -${value}; transform: translateY(-${value}); }` });
+    const safeName = key.replace(/\//g, "\\/");
+    classes.push({ name: `-translate-x-${key}`, css: `.-translate-x-${safeName} { --j-translate-x: -${value}; transform: translateX(-${value}); }` });
+    classes.push({ name: `-translate-y-${key}`, css: `.-translate-y-${safeName} { --j-translate-y: -${value}; transform: translateY(-${value}); }` });
   });
   const skews = [0, 1, 2, 3, 6, 12];
   skews.forEach((s) => {
@@ -3540,12 +3546,13 @@ function generateResponsiveUtilities(config, selectedUtilities, usedClasses, inc
       const { classes } = generator(config);
       for (const cls of classes) {
         const escapedBp = escapeCssSelector(bp);
-        const escapedName = cls.name.replace(/\./g, "\\.");
+        const escapedName = cls.name.replace(/\//g, "\\/").replace(/\./g, "\\.");
         const responsiveClassName = `${escapedBp}\\:${escapedName}`;
         const shouldInclude = includeAll || !usedClasses || usedClasses.has(`${bp}:${cls.name}`);
         if (shouldInclude) {
+          const regexSafeName = escapedName.replace(/\\/g, "\\\\");
           bpClasses.push(cls.css.replace(
-            new RegExp(`\\.${escapeRegex(cls.name)}`, "g"),
+            new RegExp(`\\.${regexSafeName}(?=[^-\\w])`, "g"),
             `.${responsiveClassName}`
           ));
         }
@@ -3584,7 +3591,7 @@ function generateStateUtilities(config, selectedUtilities, usedClasses, includeA
       for (const cls of classes) {
         if (cls.css.includes("@media") || cls.css.includes("@keyframes"))
           continue;
-        const escapedName = cls.name.replace(/\./g, "\\.");
+        const escapedName = cls.name.replace(/\//g, "\\/").replace(/\./g, "\\.");
         const stateClassName = `${state}\\:${escapedName}`;
         const shouldInclude = includeAll || !usedClasses || usedClasses.has(`${state}:${cls.name}`);
         if (shouldInclude) {
@@ -3611,7 +3618,7 @@ function generateStateUtilities(config, selectedUtilities, usedClasses, includeA
     for (const cls of classes) {
       if (cls.css.includes("@media") || cls.css.includes("@keyframes"))
         continue;
-      const escapedName = cls.name.replace(/\./g, "\\.");
+      const escapedName = cls.name.replace(/\//g, "\\/").replace(/\./g, "\\.");
       const stateClassName = `group-hover\\:${escapedName}`;
       const shouldInclude = includeAll || !usedClasses || usedClasses.has(`group-hover:${cls.name}`);
       if (shouldInclude) {
@@ -3636,7 +3643,7 @@ function generateStateUtilities(config, selectedUtilities, usedClasses, includeA
       for (const cls of classes) {
         if (cls.css.includes("@media") || cls.css.includes("@keyframes"))
           continue;
-        const escapedName = cls.name.replace(/\./g, "\\.");
+        const escapedName = cls.name.replace(/\//g, "\\/").replace(/\./g, "\\.");
         const darkClassName = `dark\\:${escapedName}`;
         const shouldInclude = includeAll || !usedClasses || usedClasses.has(`dark:${cls.name}`);
         if (shouldInclude) {
@@ -3653,9 +3660,6 @@ function generateStateUtilities(config, selectedUtilities, usedClasses, includeA
   }
   return parts.join("\n");
 }
-function escapeRegex(string) {
-  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
 function escapeCssSelector(name) {
   if (/^\d/.test(name)) {
     const firstChar = name.charCodeAt(0).toString(16);
@@ -3676,7 +3680,7 @@ function generateButtonStyles(config) {
   font-size: 0.875rem;
   font-weight: 500;
   line-height: 1.25rem;
-  border-radius: var(--j-radius-default, 0.5rem);
+  border-radius: var(--j-radius-buttons, var(--j-radius-default, 0.5rem));
   border: 1px solid transparent;
   cursor: pointer;
   transition: all 150ms ease-in-out;
@@ -4434,7 +4438,7 @@ function generateFormStyles(config) {
   color: var(--j-text);
   background-color: var(--j-bg);
   border: 1px solid var(--j-border);
-  border-radius: var(--j-radius-default, 0.5rem);
+  border-radius: var(--j-radius-inputs, var(--j-radius-default, 0.5rem));
   transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   appearance: none;
 }
@@ -4818,7 +4822,7 @@ input[type="range"].form-control::-webkit-slider-thumb:hover {
 
 /* Square Switch */
 .form-switch-square .form-switch-input {
-  border-radius: var(--j-radius-default, 0.375rem);
+  border-radius: var(--j-radius-inputs, var(--j-radius-default, 0.375rem));
 }
 
 .form-switch-square .form-switch-input::before {
@@ -4864,12 +4868,12 @@ input[type="range"].form-control::-webkit-slider-thumb:hover {
 
 .input-group-text:first-child {
   border-right: none;
-  border-radius: var(--j-radius-default, 0.5rem) 0 0 var(--j-radius-default, 0.5rem);
+  border-radius: var(--j-radius-inputs, 0.5rem) 0 0 var(--j-radius-inputs, 0.5rem);
 }
 
 .input-group-text:last-child {
   border-left: none;
-  border-radius: 0 var(--j-radius-default, 0.5rem) var(--j-radius-default, 0.5rem) 0;
+  border-radius: 0 var(--j-radius-inputs, 0.5rem) var(--j-radius-inputs, 0.5rem) 0;
 }
 
 .input-group > .btn:first-child {
@@ -4906,7 +4910,7 @@ input[type="range"].form-control::-webkit-slider-thumb:hover {
 
 .form-floating > .form-control:focus ~ .form-label,
 .form-floating > .form-control:not(:placeholder-shown) ~ .form-label {
-  transform: scale(0.85) translateY(-0.5rem);
+  transform: scale(0.85) translateY(-0.5rem));
   color: var(--j-primary);
 }
 
@@ -4920,7 +4924,7 @@ input[type="range"].form-control::-webkit-slider-thumb:hover {
 /* Fieldset */
 fieldset {
   border: 1px solid var(--j-border);
-  border-radius: var(--j-radius-default, 0.5rem);
+  border-radius: var(--j-radius-inputs, var(--j-radius-default, 0.5rem));
   padding: 1.5rem;
   margin-bottom: 1.5rem;
 }
@@ -14741,9 +14745,81 @@ code, kbd, samp, pre {
 }
 
 // src/core/compiler.js
+var COMPONENT_CLASS_PREFIXES = {
+  "accordion": "accordion",
+  "alert": "alerts",
+  "avatar": "avatars",
+  "badge": "badges",
+  "btn": "buttons",
+  "card": "cards",
+  "carousel": "carousel",
+  "chip": "chips",
+  "command-palette": "command-palette",
+  "datepicker": "datepicker",
+  "calendar": "datepicker",
+  "dropdown": "dropdown",
+  "form-": "forms",
+  "input-group": "forms",
+  "modal": "modals",
+  "navbar": "navigation",
+  "nav-": "navigation",
+  "breadcrumb": "navigation",
+  "pagination": "navigation",
+  "tabs": "navigation",
+  "tab": "navigation",
+  "offcanvas": "offcanvas",
+  "popover": "popover",
+  "progress": "progress",
+  "rating": "rating",
+  "skeleton": "skeleton",
+  "spinner": "spinner",
+  "stepper": "stepper",
+  "table": "tables",
+  "timeline": "timeline",
+  "timepicker": "timepicker",
+  "tooltip": "tooltips",
+  "upload": "upload"
+};
+function detectUsedComponents(usedClasses) {
+  const detectedComponents = /* @__PURE__ */ new Set();
+  if (!usedClasses)
+    return detectedComponents;
+  for (const className of usedClasses) {
+    for (const [prefix, component] of Object.entries(COMPONENT_CLASS_PREFIXES)) {
+      if (className.startsWith(prefix) || className === prefix.replace(/-$/, "")) {
+        detectedComponents.add(component);
+      }
+    }
+  }
+  return detectedComponents;
+}
+function getMissingComponents(configComponents, detectedComponents) {
+  const missing = [];
+  for (const comp of detectedComponents) {
+    if (!configComponents || !configComponents.includes(comp)) {
+      missing.push(comp);
+    }
+  }
+  return missing;
+}
 async function compileCSS(config, options = {}) {
-  const { usedClasses, minify = false, includeAll = false } = options;
+  const { usedClasses, minify = false, includeAll = false, autoDetectComponents = true } = options;
   const resolvedConfig = resolveConfig(config);
+  let selectedComponents = config.components || [];
+  let detectedComponents = /* @__PURE__ */ new Set();
+  let missingComponents = [];
+  if (usedClasses && autoDetectComponents) {
+    detectedComponents = detectUsedComponents(usedClasses);
+    missingComponents = getMissingComponents(selectedComponents, detectedComponents);
+    if (missingComponents.length > 0) {
+      console.log(import_picocolors.default.yellow(`
+\u26A0\uFE0F  Auto-detected ${missingComponents.length} additional component(s):`));
+      console.log(import_picocolors.default.dim(`   ${missingComponents.join(", ")}`));
+      console.log(import_picocolors.default.dim(`   Adding them to this build automatically.
+`));
+      selectedComponents = [.../* @__PURE__ */ new Set([...selectedComponents, ...missingComponents])];
+    }
+  }
   const parts = [];
   parts.push(generateBase(resolvedConfig));
   const utilities = generateUtilities(resolvedConfig, {
@@ -14752,7 +14828,7 @@ async function compileCSS(config, options = {}) {
   });
   parts.push(utilities.css);
   const components2 = generateComponents(resolvedConfig, {
-    selected: config.components,
+    selected: selectedComponents,
     usedClasses,
     includeAll
   });
@@ -14775,7 +14851,9 @@ async function compileCSS(config, options = {}) {
     minified,
     stats: {
       utilities: utilities.count,
-      components: components2.count
+      components: components2.count,
+      autoDetected: missingComponents,
+      totalComponents: selectedComponents.length
     }
   };
 }