css-variants 2.0.7 → 2.0.8

package/README.md

@@ -1,5 +1,3 @@
-![Logo](.github/assets/logo.png)
-
 [![test](https://github.com/timphandev/css-variants/actions/workflows/ci.yml/badge.svg)](https://github.com/timphandev/css-variants/actions/workflows/ci.yml)
 [![license](https://img.shields.io/github/license/timphandev/css-variants)](https://github.com/timphandev/css-variants/blob/main/LICENSE)
 [![npm](https://img.shields.io/npm/dm/css-variants)](https://npmjs.com/package/css-variants)
@@ -38,12 +36,13 @@ pnpm add css-variants
 
 css-variants provides four main utilities:
 
-- [cv](./src/cv.ts) - Class Variants for managing single component class names
-- [sv](./src/sv.ts) - Style Variants for managing single component inline styles
-- [scv](./src/scv.ts) - Slot Class Variants for managing multiple slot class names
-- [ssv](./src/ssv.ts) - Slot Style Variants for managing multiple slot inline styles
+- [cv](#class-variants-cv) - Class Variants for managing single component class names
+- [sv](#style-variants-sv) - Style Variants for managing single component inline styles
+- [scv](#slot-class-variants-scv) - Slot Class Variants for managing multiple slot class names
+- [ssv](#slot-style-variants-ssv) - Slot Style Variants for managing multiple slot inline styles
+- [cx](#class-merger-cx) - Utility for composing class names conditionally.
 
-### Class Variants (cv)
+### Class Variants ([cv](./src/cv.ts))
 For managing class names for a single component:
 
 ```ts
@@ -76,10 +75,13 @@ const button = cv({
 
 // Usage
 button() // => 'font-bold rounded-lg bg-blue-500 text-white text-sm px-2 py-1'
+
 button({ size: 'lg' }) // => 'font-bold rounded-lg bg-blue-500 text-white text-lg px-4 py-2 uppercase'
+
+button({ size: 'lg', className: 'custom' }) // => 'font-bold rounded-lg bg-blue-500 text-white text-lg px-4 py-2 uppercase custom'
 ```
 
-### Style Variants (sv)
+### Style Variants ([sv](./src/sv.ts))
 
 For managing inline styles:
 
@@ -105,11 +107,18 @@ const button = sv({
   }
 })
 
+// Usage
 button({ color: 'primary' })
 // => { fontWeight: 'bold', borderRadius: '8px', backgroundColor: 'blue', color: 'white' }
+
+button({
+  color: 'secondary',
+  style: { padding: '4px' },
+})
+// => { fontWeight: 'bold', borderRadius: '8px', backgroundColor: 'gray', color: 'white', padding: '4px' }
 ```
 
-### Slot Class Variants (scv)
+### Slot Class Variants ([scv](./src/scv.ts))
 
 For managing class names across multiple slots/elements:
 
@@ -144,9 +153,21 @@ card({ size: 'sm' })
 //   title: 'text-xl font-bold text-base',
 //   content: 'mt-2'
 // }
+
+card({
+  size: 'lg',
+  classNames: {
+    content: 'custom',
+  },
+})
+// => {
+//   root: 'rounded-lg shadow p-6',
+//   title: 'text-xl font-bold text-2xl',
+//   content: 'mt-2 custom'
+// }
 ```
 
-### Slot Style Variants (ssv)
+### Slot Style Variants ([ssv](./src/ssv.ts))
 
 For managing inline styles across multiple slots:
 
@@ -173,11 +194,57 @@ const card = ssv({
   }
 })
 
+// Usage
 card({ size: 'sm' })
 // => {
 //   root: { padding: '1rem', maxWidth: '300px' },
 //   title: { fontWeight: 'bold', fontSize: '14px' }
 // }
+
+card({
+  size: 'lg',
+  styles: {
+    title: {
+      color: 'red',
+    },
+  },
+})
+// => {
+//   root: { padding: '1rem', maxWidth: '600px' },
+//   title: { fontWeight: 'bold', fontSize: '18px', color: 'red' }
+// }
+```
+
+### Class Merger ([cx](./src/cx.ts))
+
+Similar to `clsx/classnames` but with better TypeScript support.
+
+```tsx
+import { cx } from 'css-variants'
+
+// Basic usage
+cx('foo', 'bar') // => 'foo bar'
+
+// With conditions
+cx('foo', { 
+  'bar': true,
+  'baz': false 
+}) // => 'foo bar'
+
+// With arrays
+cx('foo', ['bar', 'baz']) // => 'foo bar baz'
+
+// With nested structures
+cx('foo', {
+  bar: true,
+  baz: [
+    'qux',
+    { quux: true }
+  ]
+}) // => 'foo bar qux quux'
+
+// With falsy values (they're ignored)
+cx('foo', null, undefined, false, 0, '') // => 'foo'
 ```
 
 ## Advanced Features
@@ -226,6 +293,8 @@ const button = cv({
     }
   ]
 })
+
+button({ color: 'danger', size: 'lg' }) // => 'bg-red-500 text-lg animate-pulse'
 ```
 
 ### Default Variants

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-variants",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "A lightweight, flexible API for managing CSS class variants.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",