slot-variants 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nicu Micleușanu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,662 @@
+# slot-variants
+
+A lightweight, zero-dependency, type-safe library for managing class name variants with slots support.
+
+## Installation
+
+```bash
+npm install slot-variants
+```
+
+## Overview
+
+`slot-variants` exports two functions:
+
+- **`sv()`** - creates variant-based class name generators with optional slots
+- **`cn()`** - a utility for conditionally merging class names
+
+## Quick Start
+
+```typescript
+import { sv } from 'slot-variants';
+
+const button = sv('btn font-medium rounded-lg', {
+  variants: {
+    size: {
+      sm: 'text-sm py-1 px-2',
+      md: 'text-base py-2 px-4',
+      lg: 'text-lg py-3 px-6'
+    },
+    intent: {
+      primary: 'bg-blue-500 text-white',
+      secondary: 'bg-gray-200 text-gray-800',
+      danger: 'bg-red-500 text-white'
+    }
+  },
+  defaultVariants: {
+    size: 'md',
+    intent: 'primary'
+  }
+});
+
+button();
+// 'btn font-medium rounded-lg text-base py-2 px-4 bg-blue-500 text-white'
+
+button({ size: 'lg', intent: 'danger' });
+// 'btn font-medium rounded-lg text-lg py-3 px-6 bg-red-500 text-white'
+```
+
+## `cn()` - Class Name Utility
+
+A utility for conditionally joining class names together.
+
+```typescript
+import { cn } from 'slot-variants';
+
+// Strings
+cn('foo', 'bar');                             // 'foo bar'
+
+// Arrays (including nested)
+cn(['foo', 'bar']);                           // 'foo bar'
+cn(['foo', ['bar', 'baz']]);                  // 'foo bar baz'
+
+// Objects (truthy values are included)
+cn({ foo: true, bar: false, baz: true });     // 'foo baz'
+
+// Mixed
+cn('base', ['responsive'], { active: true }); // 'base active responsive'
+
+// Falsy values are filtered out
+cn('foo', null, undefined, false, 'bar');     // 'foo bar'
+```
+
+### Supported Input Types
+
+| Type | Behavior |
+| --- | --- |
+| `string` | Included as-is |
+| `string[]` | Flattened recursively |
+| `Record<string, unknown>` | Keys with truthy values included |
+| `boolean`, `number`, `bigint` | Ignored |
+| `null`, `undefined` | Ignored |
+
+## `sv()` - Slot Variants
+
+### Base Only (No Config)
+
+When called without a config object, `sv()` processes the base classes through `cn()` and returns a string:
+
+```typescript
+sv('btn btn-primary');              // 'btn btn-primary'
+sv(['btn', 'btn-primary']);         // 'btn btn-primary'
+sv({ btn: true, disabled: false }); // 'btn'
+```
+
+### Variants
+
+When a config object is provided, `sv()` returns a function that accepts variant props and returns the computed class string.
+
+```typescript
+const badge = sv('badge', {
+  variants: {
+    color: {
+      gray: 'bg-gray-100 text-gray-800',
+      red: 'bg-red-100 text-red-800',
+      green: 'bg-green-100 text-green-800'
+    },
+    size: {
+      sm: 'text-xs px-2 py-0.5',
+      lg: 'text-base px-3 py-1'
+    }
+  }
+});
+
+badge({ color: 'green', size: 'sm' });
+// 'badge bg-green-100 text-green-800 text-xs px-2 py-0.5'
+```
+
+Variant values can be strings, arrays, or objects:
+
+```typescript
+const button = sv('btn', {
+  variants: {
+    size: {
+      sm: ['px-2', 'py-1', 'text-sm'],                    // array
+      lg: 'px-6 py-3 text-lg',                            // string
+      xl: { 'px-8': true, 'py-4': true, 'text-xl': true } // object
+    }
+  }
+});
+```
+
+### Boolean Variants
+
+Variants with `true`/`false` keys accept boolean prop values:
+
+```typescript
+const input = sv('input border', {
+  variants: {
+    disabled: {
+      true: 'opacity-50 cursor-not-allowed',
+      false: 'cursor-text'
+    },
+    error: {
+      true: 'border-red-500',
+      false: 'border-gray-300'
+    }
+  },
+  defaultVariants: {
+    disabled: false,
+    error: false
+  }
+});
+
+input({ disabled: true, error: true });
+// 'input border opacity-50 cursor-not-allowed border-red-500'
+```
+
+**Boolean shorthand** - provide a `ClassValue` directly instead of a `true`/`false` record. The value is applied when `true`, and nothing is applied when `false`:
+
+```typescript
+const button = sv('btn', {
+  variants: {
+    loading: 'animate-spin pointer-events-none',
+    disabled: 'opacity-50 cursor-not-allowed'
+  }
+});
+
+button({ loading: true, disabled: false });
+// 'btn animate-spin pointer-events-none'
+```
+
+### Numeric Variant Keys
+
+Variant keys can be numbers:
+
+```typescript
+const heading = sv('font-bold', {
+  variants: {
+    level: {
+      1: 'text-4xl',
+      2: 'text-3xl',
+      3: 'text-2xl'
+    }
+  }
+});
+
+heading({ level: 1 }); // 'font-bold text-4xl'
+```
+
+### Default Variants
+
+Set fallback values that are used when a variant prop is not provided:
+
+```typescript
+const button = sv('btn', {
+  variants: {
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg'
+    },
+    rounded: {
+      true: 'rounded-full',
+      false: 'rounded-md'
+    }
+  },
+  defaultVariants: {
+    size: 'md',
+    rounded: false
+  }
+});
+
+button();                   // 'btn text-base rounded-md'
+button({ size: 'lg' });     // 'btn text-lg rounded-md'
+button({ rounded: true });  // 'btn text-base rounded-full'
+```
+
+Passing `undefined` for a prop falls back to the default:
+
+```typescript
+button({ size: undefined }); // 'btn text-base rounded-md'
+```
+
+#### Function-Based Default Variants
+
+Default variants can be functions that receive the current props and return a value dynamically. Return `undefined` to skip the variant entirely:
+
+```typescript
+const button = sv('btn', {
+  variants: {
+    size: {
+      sm: 'text-sm',
+      lg: 'text-lg'
+    },
+    intent: {
+      primary: 'bg-blue-500',
+      danger: 'bg-red-500'
+    }
+  },
+  defaultVariants: {
+    size: 'sm',
+    intent: (props) => (props.size === 'lg' ? 'danger' : 'primary')
+  }
+});
+
+button();               // 'btn text-sm bg-blue-500'
+button({ size: 'lg' }); // 'btn text-lg bg-red-500'
+```
+
+### Compound Variants
+
+Apply additional classes when multiple variant conditions are met simultaneously:
+
+```typescript
+const button = sv('btn', {
+  variants: {
+    intent: {
+      primary: 'bg-blue-500',
+      secondary: 'bg-gray-200'
+    },
+    size: {
+      sm: 'text-sm',
+      lg: 'text-lg'
+    }
+  },
+  compoundVariants: [
+    {
+      intent: 'primary',
+      size: 'lg',
+      class: 'uppercase font-bold'
+    }
+  ]
+});
+
+button({ intent: 'primary', size: 'lg' });
+// 'btn bg-blue-500 text-lg uppercase font-bold'
+
+button({ intent: 'secondary', size: 'lg' });
+// 'btn bg-gray-200 text-lg'
+```
+
+Compound variant conditions support **array matching** (OR logic):
+
+```typescript
+compoundVariants: [
+  {
+    intent: ['primary', 'secondary'],
+    size: 'sm',
+    class: 'tracking-tight'
+  }
+]
+```
+
+Multiple compound variants can match simultaneously, and all matching classes are applied.
+
+Compound variants also support `className` as an alternative to `class`:
+
+```typescript
+compoundVariants: [
+  {
+    size: 'sm',
+    className: 'shadow-sm'
+  }
+]
+```
+
+### Required Variants
+
+Mark variants as required so they must be provided at call time. Required variants cannot have default values:
+
+```typescript
+const button = sv('btn', {
+  variants: {
+    size: {
+      sm: 'text-sm',
+      lg: 'text-lg'
+    },
+    intent: {
+      primary: 'bg-blue-500',
+      danger: 'bg-red-500'
+    }
+  },
+  requiredVariants: ['intent']
+});
+
+button({ intent: 'primary' });              // OK
+button({ intent: 'primary', size: 'lg' });  // OK
+button({ size: 'lg' });                     // Throws: Missing required variant: "intent"
+```
+
+### Slots
+
+Slots allow you to define multiple named class targets for multi-element components. When slots are defined, the returned function produces an object with `base` and each named slot as keys:
+
+```typescript
+const card = sv('card border rounded-lg', {
+  slots: {
+    header: 'card-header font-semibold',
+    body: 'card-body',
+    footer: 'card-footer border-t'
+  }
+});
+
+const { base, header, body, footer } = card();
+// base:   'card border rounded-lg'
+// header: 'card-header font-semibold'
+// body:   'card-body'
+// footer: 'card-footer border-t'
+```
+
+The `base` slot can also be defined explicitly in the slots config, and it merges with the first argument:
+
+```typescript
+const card = sv('border', {
+  slots: {
+    base: 'rounded-lg shadow-md',
+    header: 'font-bold'
+  }
+});
+
+card().base; // 'border rounded-lg shadow-md'
+```
+
+#### Slots with Variants
+
+Variant values can target specific slots by providing an object with slot keys:
+
+```typescript
+const card = sv('card border rounded-lg', {
+  slots: {
+    header: 'font-bold',
+    body: 'py-4',
+    footer: 'border-t'
+  },
+  variants: {
+    size: {
+      sm: {
+        base: 'p-2 text-sm',
+        header: 'pb-1',
+        body: 'py-1',
+        footer: 'pt-1'
+      },
+      lg: {
+        base: 'p-6 text-lg',
+        header: 'pb-4',
+        body: 'py-4',
+        footer: 'pt-4'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'sm'
+  }
+});
+
+const { base, header, body, footer } = card({ size: 'lg' });
+// base:   'card border rounded-lg p-6 text-lg'
+// header: 'font-bold pb-4'
+// body:   'py-4 py-4'
+// footer: 'border-t pt-4'
+```
+
+Variants don't need to target every slot - untargeted slots remain unchanged:
+
+```typescript
+variants: {
+  size: {
+    sm: { base: 'p-2', header: 'text-sm' }
+    // body and footer are unaffected
+  }
+}
+```
+
+#### Boolean Shorthand with Slots
+
+When using slots, a boolean shorthand variant can be a slot object:
+
+```typescript
+const card = sv('border rounded-lg', {
+  slots: {
+    header: 'font-bold',
+    body: 'py-4'
+  },
+  variants: {
+    highlighted: {
+      base: 'ring-2 ring-blue-500',
+      header: 'bg-blue-100'
+    }
+  }
+});
+
+card({ highlighted: true });
+// base:   'border rounded-lg ring-2 ring-blue-500'
+// header: 'font-bold bg-blue-100'
+
+card({ highlighted: false });
+// base:   'border rounded-lg'
+// header: 'font-bold'
+```
+
+### Compound Slots
+
+Apply classes to multiple slots at once, optionally conditioned on variant values:
+
+```typescript
+const dialog = sv('fixed inset-0', {
+  slots: {
+    overlay: 'bg-black/50',
+    content: 'bg-white rounded-lg',
+    title: 'text-lg font-bold',
+    actions: 'flex gap-2'
+  },
+  variants: {
+    size: {
+      sm: 'max-w-sm',
+      lg: 'max-w-lg'
+    }
+  },
+  compoundSlots: [
+    {
+      slots: ['content', 'title', 'actions'],
+      class: 'px-6'
+    },
+    {
+      size: 'sm',
+      slots: ['title', 'actions'],
+      class: 'text-sm'
+    }
+  ]
+});
+
+const result = dialog({ size: 'sm' });
+// base:    'fixed inset-0 max-w-sm'
+// overlay: 'bg-black/50'
+// content: 'bg-white rounded-lg px-6'
+// title:   'text-lg font-bold px-6 text-sm'
+// actions: 'flex gap-2 px-6 text-sm'
+```
+
+Compound slots support the same array matching as compound variants:
+
+```typescript
+compoundSlots: [
+  {
+    size: ['sm', 'md'],
+    slots: ['cell', 'header'],
+    class: 'px-3'
+  }
+]
+```
+
+### Class Override at Runtime
+
+Append additional classes at call time using `class` or `className`:
+
+```typescript
+const button = sv('btn', {
+  variants: {
+    size: {
+      sm: 'text-sm',
+      lg: 'text-lg'
+    }
+  }
+});
+
+// String
+button({ size: 'sm', class: 'mt-4 mx-auto' });
+// 'btn text-sm mt-4 mx-auto'
+
+// Array
+button({ size: 'sm', class: ['mt-4', 'mx-auto'] });
+// 'btn text-sm mt-4 mx-auto'
+
+// Object
+button({ size: 'sm', class: { 'mt-4': true, hidden: false } });
+// 'btn text-sm mt-4'
+```
+
+With slots, a string `class` appends to the base slot. Use a slot object to target specific slots:
+
+```typescript
+const card = sv('border', {
+  slots: {
+    header: 'font-bold',
+    body: 'py-4'
+  }
+});
+
+// String targets the base slot
+card({ class: 'shadow-xl' });
+// base: 'border shadow-xl', header: 'font-bold', body: 'py-4'
+
+// Object targets specific slots
+card({ class: { base: 'shadow-xl', header: 'text-blue-700', body: 'min-h-24' } });
+// base: 'border shadow-xl', header: 'font-bold text-blue-700', body: 'py-4 min-h-24'
+```
+
+Both `class` and `className` are supported, but `class` is prioritized when both are used in the same time.
+
+### Post-Processing
+
+Apply a custom transformation to the final class strings using `postProcess`. This is useful for integrating with libraries like `tailwind-merge`:
+
+```typescript
+import { sv } from 'slot-variants';
+import { twMerge } from 'tailwind-merge';
+
+const button = sv('px-4 py-2 bg-blue-500', {
+  variants: {
+    size: {
+      sm: 'px-2 py-1 text-sm',
+      lg: 'px-6 py-3 text-lg'
+    }
+  },
+  postProcess: twMerge
+});
+```
+
+The `postProcess` function is applied to each slot's final class string independently.
+
+### Caching
+
+Results are cached automatically for performance. The default cache size is **256** entries. Calls with `class` or `className` props bypass the cache.
+
+```typescript
+const button = sv('btn', {
+  variants: {
+    size: {
+      sm: 'text-sm',
+      lg: 'text-lg'
+    }
+  },
+  cacheSize: 512        // customize the cache size
+});
+
+button.getCacheSize();  // current number of cached entries
+button.clearCache();    // clear all cached entries
+```
+
+### Introspection
+
+The returned function exposes configuration properties for runtime introspection:
+
+```typescript
+const button = sv('btn', {
+  slots: {
+    icon: 'w-4 h-4'
+  },
+  variants: {
+    size: {
+      sm: 'text-sm',
+      lg: 'text-lg'
+    },
+    intent: {
+      primary: 'bg-blue-500',
+      danger: 'bg-red-500'
+    }
+  },
+  defaultVariants: {
+    size: 'sm'
+  },
+  requiredVariants: ['intent']
+});
+
+button.variantKeys;      // ['size', 'intent']
+button.variants;         // { size: { sm: 'text-sm', lg: 'text-lg' }, intent: { ... } }
+button.slotKeys;         // ['base', 'icon']
+button.slots;            // { icon: 'w-4 h-4' }
+button.defaultVariants;  // { size: 'sm' }
+button.requiredVariants; // ['intent']
+```
+
+## TypeScript
+
+`slot-variants` is fully typed. Variant props are inferred from your config:
+
+```typescript
+import { sv, type VariantProps } from 'slot-variants';
+
+const button = sv('btn', {
+  variants: {
+    size: {
+      sm: 'text-sm',
+      lg: 'text-lg'
+    },
+    intent: {
+      primary: 'bg-blue-500',
+      danger: 'bg-red-500'
+    }
+  },
+  requiredVariants: ['intent']
+});
+
+// Extract the variant props type (excludes class/className)
+type ButtonProps = VariantProps<typeof button>;
+// { size?: 'sm' | 'lg' | undefined; intent: 'primary' | 'danger' }
+```
+
+### Exported Types
+
+| Type | Description |
+| --- | --- |
+| `ClassValue` | Valid input types for `cn()` |
+| `VariantProps<T>` | Extracts variant props from an `sv()` return type |
+
+### Return Type
+
+- **Without slots** - the function returns a `string`
+- **With slots** - the function returns a `Record` with `base` and each slot name as keys, all typed as `string`
+
+## Config Reference
+
+| Option | Type | Description |
+| --- | --- | --- |
+| `variants` | `SVVariants` | Variant definitions mapping variant names to their possible values |
+| `slots` | `SVSlots` | Named slot definitions for multi-element components |
+| `compoundVariants` | `Array` | Additional classes applied when multiple variant conditions match |
+| `compoundSlots` | `Array` | Classes applied to multiple slots based on variant conditions |
+| `defaultVariants` | `Object` | Default values for variants (static values or functions) |
+| `requiredVariants` | `string[]` | Variant names that must be provided at call time |
+| `postProcess` | `(className: string) => string` | Custom transformation applied to final class strings |
+| `cacheSize` | `number` | Maximum number of cached results (default: `256`) |

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";var T=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var U=Object.prototype.hasOwnProperty;var G=(o,t)=>{for(var r in t)T(o,r,{get:t[r],enumerable:!0})},H=(o,t,r,V)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of M(t))!U.call(o,a)&&a!==r&&T(o,a,{get:()=>t[a],enumerable:!(V=I(t,a))||V.enumerable});return o};var J=o=>H(T({},"__esModule",{value:!0}),o);var X={};G(X,{cn:()=>x,sv:()=>j});module.exports=J(X);var{isArray:L}=Array,{keys:Q}=Object;function x(...o){let t=[...o],r=0,V="";for(;r<t.length;){let a=t[r];if(r++,!!a){if(typeof a=="string")V+=` ${a}`;else if(L(a))t.push(...a);else if(typeof a=="object")for(let y of Q(a))a[y]&&(V+=` ${y}`)}}return V.slice(1)}var{isArray:v}=Array,{assign:W,entries:R,keys:c}=Object,E=(o,t)=>o===t||`${o}`==`${t}`,z=(o,t)=>{for(let r of c(t)){if(r==="class"||r==="className"||r==="slots")continue;let V=t[r],a=o[r];if(v(V)){if(!V.some(y=>E(y,a)))return!1}else if(!E(V,a))return!1}return!0};function j(o,t){if(!t)return x(o);let{variants:r={},slots:V={},compoundVariants:a=[],compoundSlots:y=[],defaultVariants:C={},requiredVariants:K=[],cacheSize:N=256,postProcess:O}=t,f=new Map,h=(n,s)=>{if(n){if(f.size>=N){let i=f.keys().next().value;i&&f.delete(i)}f.set(n,s)}return s},{base:q,...w}=V,A=x(o,q),p=new Set(c(w)),g={};for(let[n,s]of R(r))if(s&&typeof s=="object"&&!v(s)){let i=c(s);p.size>0&&i.length>0&&i.every(S=>S==="base"||p.has(S))?g[n]={false:"",true:s}:i.every(S=>S==="true"||S==="false")?g[n]={true:"",false:"",...s}:g[n]=s}else g[n]={false:"",true:s};let D=R(g),k=new Set(c(g)),$=new Set(c(C)),F=n=>O?.(n)??n,B=n=>{if(!n||typeof n!="object"||v(n))return!1;for(let s of c(n))if(!(s==="base"||p.has(s)))return!1;return!0},b=(n,s)=>{if(B(s))for(let[i,u]of R(s))n[i]?.push(u);else n.base.push(s)};for(let n of K){if(!k.has(n))throw new Error(`Required variant "${n}" is not defined in variants`);if($.has(n))throw new Error(`Required variant "${n}" cannot have a default value`)}return W((n={})=>{let s=n.class??n.className,i={},u="";for(let e of k){let l=n[e];if(l===void 0){if($.has(e)){let d=C[e];typeof d=="function"?i[e]=d(n):i[e]=d,s||(u+=`${i[e]};`)}}else i[e]=l,s||(u+=`${l};`)}if(!s){let e=f.get(u);if(e)return e}for(let e of K)if(i[e]===void 0)throw new Error(`Missing required variant: "${e}"`);let S={base:[A]};for(let e of p)S[e]=[w[e]];for(let[e,l]of D){let d=i[e];if(d===void 0)continue;let P=l[String(d)];if(P===void 0)throw new Error(`Invalid value "${d}" for variant "${e}"`);P!==""&&b(S,P)}for(let e of a)z(i,e)&&b(S,e.class??e.className);for(let e of y)if(z(i,e)){let l=e.class??e.className;for(let d of e.slots)S[d]?.push(l)}s&&b(S,s);let m={base:""};for(let[e,l]of R(S))m[e]=F(x(l));return p.size===0?h(u,m.base):h(u,m)},{variants:r,variantKeys:c(r),slots:V,slotKeys:["base",...p],defaultVariants:C,requiredVariants:K,clearCache:()=>f.clear(),getCacheSize:()=>f.size})}0&&(module.exports={cn,sv});

package/dist/index.d.ts

@@ -0,0 +1,81 @@
+/**
+ * Represents valid class name input types
+ */
+type ClassValue = string | ClassArray | ClassRecord | boolean | number | bigint | null | undefined;
+type ClassArray = ClassValue[];
+type ClassRecord = Record<string, unknown>;
+/**
+ * Constructs a class name string from various input types
+ */
+declare function cn(...args: ClassValue[]): string;
+
+type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type PartialUndefined<T> = {
+    [K in keyof T]?: T[K] | undefined;
+};
+type StringKeyof<T> = Extract<keyof T, string>;
+type SVClassValue<S extends SVSlots | undefined> = S extends SVSlots ? SlotsClassValue<S> | ClassValue : ClassValue;
+type ClassProp<S extends SVSlots | undefined = undefined> = {
+    class?: SVClassValue<S>;
+    className?: never;
+} | {
+    class?: never;
+    className?: SVClassValue<S>;
+};
+type SVSlots = {
+    base?: ClassValue;
+} & Record<string, ClassValue>;
+type BooleanString<T> = T extends 'true' | 'false' ? boolean : T;
+type SVSlotKey<S> = 'base' | StringKeyof<S>;
+type SlotsClassValue<S extends SVSlots> = Partial<Record<SVSlotKey<S>, ClassValue>>;
+type SVVariants<S extends SVSlots | undefined> = Record<string, Record<string | number, SVClassValue<S>> | SVClassValue<S>>;
+type SVVariantConditions<S extends SVSlots | undefined, V extends SVVariants<S> | undefined> = {
+    [K in StringKeyof<V>]?: SVVariantPropType<V[K], S> | SVVariantPropType<V[K], S>[] | undefined;
+};
+type SVCompoundVariants<S extends SVSlots | undefined, V extends SVVariants<S> | undefined> = (SVVariantConditions<S, V> & ClassProp<S>)[];
+type SVCompoundSlots<S extends SVSlots | undefined, V extends SVVariants<S> | undefined> = ({
+    slots: SVSlotKey<S>[];
+} & SVVariantConditions<S, V> & ClassProp<S>)[];
+type IsBooleanShorthand<T, S extends SVSlots | undefined> = T extends Record<string, unknown> ? [Extract<keyof T, number>] extends [never] ? S extends SVSlots ? StringKeyof<T> extends SVSlotKey<S> ? true : StringKeyof<T> extends 'true' | 'false' ? true : false : StringKeyof<T> extends 'true' | 'false' ? true : false : false : true;
+type SVVariantPropType<T, S extends SVSlots | undefined> = IsBooleanShorthand<T, S> extends true ? boolean : T extends Record<string | number, unknown> ? BooleanString<StringKeyof<T>> | Extract<keyof T, number> : boolean;
+type SVVariantProps<S extends SVSlots | undefined, V extends SVVariants<S> | undefined> = {
+    [K in StringKeyof<V>]: SVVariantPropType<V[K], S>;
+};
+type SVDefaultVariantFn<S extends SVSlots | undefined, V extends SVVariants<S> | undefined, K extends StringKeyof<V>> = (props: Partial<SVVariantProps<S, V>>) => SVVariantPropType<V[K], S> | undefined;
+type SVDefaultVariants<S extends SVSlots | undefined, V extends SVVariants<S> | undefined, RV extends StringKeyof<V>[]> = {
+    [K in StringKeyof<Omit<SVVariantProps<S, V>, RV[number]>>]?: SVVariantPropType<V[K], S> | SVDefaultVariantFn<S, V, K> | undefined;
+};
+type SVProps<S extends SVSlots | undefined, V extends SVVariants<S> | undefined, RV extends StringKeyof<V>[]> = V extends undefined ? ClassProp<S> : Prettify<Pick<SVVariantProps<S, V>, RV[number]> & Omit<PartialUndefined<SVVariantProps<S, V>>, RV[number]>> & ClassProp<S>;
+type SVConfig<S extends SVSlots | undefined, V extends SVVariants<S> | undefined, RV extends StringKeyof<V>[]> = {
+    variants?: V | undefined;
+    slots?: S | undefined;
+    compoundVariants?: SVCompoundVariants<S, V> | undefined;
+    compoundSlots?: SVCompoundSlots<S, V> | undefined;
+    defaultVariants?: SVDefaultVariants<S, V, RV> | undefined;
+    requiredVariants?: RV | undefined;
+    cacheSize?: number | undefined;
+    postProcess?: ((className: string) => string) | undefined;
+};
+type SVReturnValue<S extends SVSlots | undefined> = S extends undefined ? string : Prettify<Record<SVSlotKey<S>, string>>;
+type SVReturnFn<S extends SVSlots | undefined, V extends SVVariants<S> | undefined, RV extends StringKeyof<V>[]> = RV extends [] ? (props?: SVProps<S, V, RV> | undefined) => SVReturnValue<S> : (props: SVProps<S, V, RV>) => SVReturnValue<S>;
+type SVReturnType<S extends SVSlots | undefined, V extends SVVariants<S> | undefined, RV extends StringKeyof<V>[]> = SVReturnFn<S, V, RV> & {
+    variants: V;
+    variantKeys: StringKeyof<V>[];
+    slots: S;
+    slotKeys: S extends SVSlots ? SVSlotKey<S>[] : ['base'];
+    defaultVariants: SVDefaultVariants<S, V, RV>;
+    requiredVariants: RV;
+    clearCache: () => void;
+    getCacheSize: () => number;
+};
+type VariantProps<T extends (...args: any[]) => unknown> = Prettify<Omit<Exclude<Parameters<T>[0], undefined>, 'class' | 'className'>>;
+/**
+ * Creates variant-based class name generator with optional slots support.
+ * Inspired by CVA and tailwind-variants.
+ */
+declare function sv(base: ClassValue): string;
+declare function sv<S extends SVSlots | undefined = undefined, V extends SVVariants<S> | undefined = undefined, RV extends StringKeyof<V>[] | [] = []>(base: ClassValue, config: SVConfig<S, V, RV>): SVReturnType<S, V, RV>;
+
+export { type ClassValue, type VariantProps, cn, sv };

package/dist/index.js

@@ -0,0 +1 @@
+var{isArray:F}=Array,{keys:B}=Object;function x(...S){let o=[...S],a=0,V="";for(;a<o.length;){let r=o[a];if(a++,!!r){if(typeof r=="string")V+=` ${r}`;else if(F(r))o.push(...r);else if(typeof r=="object")for(let y of B(r))r[y]&&(V+=` ${y}`)}}return V.slice(1)}var{isArray:T}=Array,{assign:I,entries:R,keys:c}=Object,$=(S,o)=>S===o||`${S}`==`${o}`,E=(S,o)=>{for(let a of c(o)){if(a==="class"||a==="className"||a==="slots")continue;let V=o[a],r=S[a];if(T(V)){if(!V.some(y=>$(y,r)))return!1}else if(!$(V,r))return!1}return!0};function M(S,o){if(!o)return x(S);let{variants:a={},slots:V={},compoundVariants:r=[],compoundSlots:y=[],defaultVariants:C={},requiredVariants:K=[],cacheSize:z=256,postProcess:j}=o,f=new Map,v=(n,s)=>{if(n){if(f.size>=z){let t=f.keys().next().value;t&&f.delete(t)}f.set(n,s)}return s},{base:N,...h}=V,O=x(S,N),p=new Set(c(h)),g={};for(let[n,s]of R(a))if(s&&typeof s=="object"&&!T(s)){let t=c(s);p.size>0&&t.length>0&&t.every(i=>i==="base"||p.has(i))?g[n]={false:"",true:s}:t.every(i=>i==="true"||i==="false")?g[n]={true:"",false:"",...s}:g[n]=s}else g[n]={false:"",true:s};let q=R(g),w=new Set(c(g)),k=new Set(c(C)),A=n=>j?.(n)??n,D=n=>{if(!n||typeof n!="object"||T(n))return!1;for(let s of c(n))if(!(s==="base"||p.has(s)))return!1;return!0},b=(n,s)=>{if(D(s))for(let[t,u]of R(s))n[t]?.push(u);else n.base.push(s)};for(let n of K){if(!w.has(n))throw new Error(`Required variant "${n}" is not defined in variants`);if(k.has(n))throw new Error(`Required variant "${n}" cannot have a default value`)}return I((n={})=>{let s=n.class??n.className,t={},u="";for(let e of w){let l=n[e];if(l===void 0){if(k.has(e)){let d=C[e];typeof d=="function"?t[e]=d(n):t[e]=d,s||(u+=`${t[e]};`)}}else t[e]=l,s||(u+=`${l};`)}if(!s){let e=f.get(u);if(e)return e}for(let e of K)if(t[e]===void 0)throw new Error(`Missing required variant: "${e}"`);let i={base:[O]};for(let e of p)i[e]=[h[e]];for(let[e,l]of q){let d=t[e];if(d===void 0)continue;let P=l[String(d)];if(P===void 0)throw new Error(`Invalid value "${d}" for variant "${e}"`);P!==""&&b(i,P)}for(let e of r)E(t,e)&&b(i,e.class??e.className);for(let e of y)if(E(t,e)){let l=e.class??e.className;for(let d of e.slots)i[d]?.push(l)}s&&b(i,s);let m={base:""};for(let[e,l]of R(i))m[e]=A(x(l));return p.size===0?v(u,m.base):v(u,m)},{variants:a,variantKeys:c(a),slots:V,slotKeys:["base",...p],defaultVariants:C,requiredVariants:K,clearCache:()=>f.clear(),getCacheSize:()=>f.size})}export{x as cn,M as sv};

package/package.json

@@ -0,0 +1,52 @@
+{
+	"name": "slot-variants",
+	"version": "1.0.0",
+	"description": "Type-safe class name variants with slots",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"require": "./dist/index.cjs"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"build": "tsup src/index.ts && rm dist/index.d.cts",
+		"test": "tap --show-full-coverage test/*.test.ts",
+		"bench": "jiti bench/cn.ts && jiti bench/cva.ts && jiti bench/tv.ts",
+		"lint": "eslint src",
+		"format": "prettier --write src",
+		"format:check": "prettier --check src",
+		"prepublishOnly": "npm run build"
+	},
+	"keywords": [],
+	"author": "",
+	"license": "MIT",
+	"devDependencies": {
+		"@eslint/js": "9.39.2",
+		"@stylistic/eslint-plugin": "^5.7.1",
+		"class-variance-authority": "^0.7.1",
+		"classnames": "^2.5.1",
+		"eslint": "9.39.2",
+		"jiti": "2.6.1",
+		"prettier": "3.8.1",
+		"tailwind-merge": "^3.4.0",
+		"tailwind-variants": "^3.2.2",
+		"tap": "21.5.0",
+		"tinybench": "^6.0.0",
+		"tsup": "8.5.1",
+		"typescript": "5.9.3",
+		"typescript-eslint": "8.54.0"
+	},
+	"tsup": {
+		"dts": true,
+		"format": [
+			"cjs",
+			"esm"
+		],
+		"minify": true
+	}
+}