chaincss 2.1.31 → 2.1.32

package/README.md

@@ -1,4 +1,4 @@
-<h1 align="center">⛓️ ChainCSS</h1>
+<h1 align="center">ChainCSS</h1>
 
 <p align="center">
   <strong>The first CSS-in-JS library with true auto-detection mixed mode.</strong><br>
@@ -20,7 +20,6 @@
   </a>
 </p>
 
----
 
 # What is ChainCSS?
 
@@ -47,7 +46,6 @@ const card = chain()
 
 **No CSS syntax. No template literals. No object literals. Just JavaScript.**
 
----
 
 # Installation
 
@@ -64,6 +62,7 @@ npm install chaincss
 | **Browser CDN** | `import { chain } from "https://cdn.jsdelivr.net/npm/chaincss/dist/browser.js"` |
 | **Browser + import map** | Map `"chaincss"` to `./node_modules/chaincss/dist/browser.js` |
 
+
 ## Vite Configuration
 
 ```ts
@@ -76,7 +75,6 @@ export default defineConfig({
 });
 ```
 
----
 
 # Core API
 
@@ -121,7 +119,6 @@ const heading = chain()
 injectChainStyles({ heading });
 ```
 
----
 
 # Feature Reference
 
@@ -145,6 +142,7 @@ chain()
   .pos("relative");
 ```
 
+
 ## Macros (57)
 
 ### Layout & Display
@@ -292,7 +290,7 @@ chain()
   .$el("responsive");
 ```
 
-**Built-in breakpoints:** `sm`, `md`, `lg`, `xl`, `2xl`, `mobile`, `tablet`, `desktop`, `portrait`, `landscape`, `dark`, `light`, `reducedMotion`, `highContrast`, `print`, `hover`, `no-hover`, `fine`, `coarse`
+**Built-in breakpoints (20):** `sm`, `md`, `lg`, `xl`, `2xl`, `mobile`, `tablet`, `desktop`, `portrait`, `landscape`, `dark`, `light`, `reducedMotion`, `highContrast`, `print`, `hover`, `no-hover`, `fine`, `coarse`
 
 ## Transform Methods
 
@@ -306,7 +304,7 @@ chain()
   .$el("transformed");
 ```
 
-### Math Helpers
+### Math Helpers (15)
 
 ```ts
 chain()
@@ -358,22 +356,33 @@ const theme = new Theme(light);
 theme.toCSSVariables("my-theme"); // -> :root { --my-theme-colors-primary: #3b82f6; ... }
 ```
 
-## Recipe System
+## Recipe System (Variants)
 
 ```ts
 import { recipe } from "chaincss";
 
 const button = recipe({
-  base: {
-    selectors: ["btn"],
-    display: "inline-flex",
-    borderRadius: "8px",
-    fontWeight: 600,
-  },
+base: { selectors: ["btn"], display: "inline-flex", borderRadius: "8px", fontWeight: 600 },
+variants: {
+size: {
+sm: { padding: "8px 16px", fontSize: "14px" },
+lg: { padding: "16px 32px", fontSize: "18px" },
+},
+color: {
+primary: { background: "#3b82f6", color: "white" },
+danger: { background: "#ef4444", color: "white" },
+},
+},
+defaultVariants: { size: "md", color: "primary" },
+compoundVariants: [
+{ variants: { size: "lg", color: "primary" }, style: { fontWeight: 800 } },
+],
 });
+
+const styles = button({ size: "lg", color: "danger" });
 ```
 
-### Animations
+### Animations (42 presets)
 
 ```ts
 chain().fadeIn().$el("el"); chain().slideInUp().$el("el");  chain().slideInUp().$el("el");
@@ -409,7 +418,6 @@ const diff = getStyleDiff(snapshotId1, snapshotId2);
 // -> { added: {...}, removed: {...}, modified: {...} }
 ```
 
----
 
 # CLI
 
@@ -422,7 +430,6 @@ chaincss cache stats
 chaincss timeline list
 ```
 
----
 
 # Configuration
 
@@ -455,7 +462,6 @@ export default {
 };
 ```
 
----
 
 # Framework Integration
 
@@ -484,11 +490,8 @@ function Card() {
 ```ts
 import { chain } from "chaincss";
 
-const styles = chain()
-  .display("grid")
-  .cols(3)
-  .gap(16)
-  .$el("grid");
+const styles = chain().display("grid").cols(3).gap(16).$el("grid");
+// <div :class="styles.selectors[0]">
 ```
 
 ## Svelte
@@ -496,10 +499,8 @@ const styles = chain()
 ```ts
 import { chain } from "chaincss";
 
-const styles = chain()
-  .flex()
-  .center()
-  .$el("centered");
+const styles = chain().flex().center().$el("centered");
+// <div class={styles.selectors[0]}>
 ```
 
 ### Vanilla JS
@@ -519,7 +520,6 @@ const styles = chain()
 </script>
 ```
 
----
 
 ## Complete Feature List
 
@@ -541,9 +541,6 @@ const styles = chain()
 | Dev Tools | 3 | Suggestions Engine, Timeline, Component Generator |
 | Tests | 258 | 18 test files, 0 failures |
 
----
-
----
 
 # Performance
 
@@ -553,7 +550,6 @@ const styles = chain()
 - LRU persistent caching
 - Shared property deduplication
 
----
 
 # Contributing
 
@@ -567,7 +563,6 @@ npm install
 npm test
 ```
 
----
 
 # License
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chaincss",
-  "version": "2.1.31",
-  "description": "ChainCSS v3.0 - The first CSS-in-JS library with true auto-detection mixed mode. Zero runtime by default, dynamic when you need it.",
+  "version": "2.1.32",
+  "description": "ChainCSS - The first CSS-in-JS library with true auto-detection mixed mode. Zero runtime by default, dynamic when you need it.",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",