jasmincss 1.0.7 → 1.0.9

package/JASMINCSS-GUIDE.md

@@ -2,7 +2,7 @@
 
 > **Complete reference of all available utility classes and components**
 >
-> Generated automatically from JasminCSS v1.0.7
+> Generated automatically from JasminCSS v1.0.9
 
 ## Table of Contents
 
@@ -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)",
@@ -3674,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;
@@ -4432,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;
 }
@@ -4816,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 {
@@ -4862,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 {
@@ -4904,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);
 }
 
@@ -4918,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;
 }
@@ -14557,6 +14563,14 @@ a {
 
 button, [role="button"] {
   cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  background: transparent;
+  border: none;
+}
+
+button:focus {
+  outline: none;
 }
 
 :disabled {
@@ -14739,9 +14753,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, {
@@ -14750,7 +14836,7 @@ async function compileCSS(config, options = {}) {
   });
   parts.push(utilities.css);
   const components2 = generateComponents(resolvedConfig, {
-    selected: config.components,
+    selected: selectedComponents,
     usedClasses,
     includeAll
   });
@@ -14773,7 +14859,9 @@ async function compileCSS(config, options = {}) {
     minified,
     stats: {
       utilities: utilities.count,
-      components: components2.count
+      components: components2.count,
+      autoDetected: missingComponents,
+      totalComponents: selectedComponents.length
     }
   };
 }

package/dist/index.mjs

@@ -3,6 +3,7 @@ import fs2 from "fs";
 import fg from "fast-glob";
 import postcss from "postcss";
 import cssnano from "cssnano";
+import pc from "picocolors";
 
 // src/config/loader.js
 import fs from "fs";
@@ -51,7 +52,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)",
@@ -3631,7 +3637,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;
@@ -4389,7 +4395,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;
 }
@@ -4773,7 +4779,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 {
@@ -4819,12 +4825,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 {
@@ -4861,7 +4867,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);
 }
 
@@ -4875,7 +4881,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;
 }
@@ -14514,6 +14520,14 @@ a {
 
 button, [role="button"] {
   cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  background: transparent;
+  border: none;
+}
+
+button:focus {
+  outline: none;
 }
 
 :disabled {
@@ -14696,9 +14710,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(pc.yellow(`
+\u26A0\uFE0F  Auto-detected ${missingComponents.length} additional component(s):`));
+      console.log(pc.dim(`   ${missingComponents.join(", ")}`));
+      console.log(pc.dim(`   Adding them to this build automatically.
+`));
+      selectedComponents = [.../* @__PURE__ */ new Set([...selectedComponents, ...missingComponents])];
+    }
+  }
   const parts = [];
   parts.push(generateBase(resolvedConfig));
   const utilities = generateUtilities(resolvedConfig, {
@@ -14707,7 +14793,7 @@ async function compileCSS(config, options = {}) {
   });
   parts.push(utilities.css);
   const components2 = generateComponents(resolvedConfig, {
-    selected: config.components,
+    selected: selectedComponents,
     usedClasses,
     includeAll
   });
@@ -14730,7 +14816,9 @@ async function compileCSS(config, options = {}) {
     minified,
     stats: {
       utilities: utilities.count,
-      components: components2.count
+      components: components2.count,
+      autoDetected: missingComponents,
+      totalComponents: selectedComponents.length
     }
   };
 }