css-variants
Version:
A lightweight, flexible API for managing CSS class variants.
105 lines • 3.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.scv = void 0;
const cx_1 = require("./cx");
const merge_props_1 = require("./utils/merge-props");
/**
* Creates a slot-based class variant function that manages class names for multiple slots with variants.
*
* @param config - Configuration object for creating the variant function
* @returns A function that accepts variant props and returns class names for each slot
*
* @example
* ```typescript
* const button = scv({
* slots: ['root', 'icon'],
* base: {
* root: 'btn',
* icon: 'btn-icon'
* },
* variants: {
* size: {
* sm: {
* root: 'btn-sm',
* icon: 'icon-sm'
* },
* lg: {
* root: 'btn-lg',
* icon: 'icon-lg'
* }
* }
* },
* defaultVariants: {
* size: 'sm'
* }
* })
*
* // Usage
* const classes = button({ size: 'lg' })
* // Result: { root: 'btn btn-lg', icon: 'btn-icon icon-lg' }
* ```
*/
const scv = (config) => {
const { slots, base, variants, compoundVariants, defaultVariants, classNameResolver = cx_1.cx } = config;
if (!variants) {
return (props) => {
const result = {};
for (const slot of slots) {
result[slot] = classNameResolver(base?.[slot], props?.classNames?.[slot]);
}
return result;
};
}
return (props) => {
const { classNames, ...rest } = props ?? {};
const mergedProps = defaultVariants ? (0, merge_props_1.mergeProps)(defaultVariants, rest) : rest;
const slotClassValues = {};
for (const slot of slots) {
if (base?.[slot]) {
slotClassValues[slot] = Array.isArray(base[slot]) ? [...base[slot]] : [base[slot]];
}
else {
slotClassValues[slot] = [];
}
}
for (const key in mergedProps) {
const slotClassValue = variants[key]?.[mergedProps[key]];
if (slotClassValue) {
for (const slot in slotClassValue) {
slotClassValues[slot].push(slotClassValue[slot]);
}
}
}
if (compoundVariants) {
for (const { classNames: slotClassValue, ...compoundVariant } of compoundVariants) {
let matches = true;
for (const key in compoundVariant) {
const value = compoundVariant[key];
const propValue = mergedProps[key];
if (Array.isArray(value) ? !value.includes(propValue) : value !== propValue) {
matches = false;
break;
}
}
if (matches) {
for (const slot in slotClassValue) {
slotClassValues[slot].push(slotClassValue[slot]);
}
}
}
}
if (classNames) {
for (const slot in classNames) {
slotClassValues[slot].push(classNames[slot]);
}
}
const result = {};
for (const slot in slotClassValues) {
result[slot] = classNameResolver(slotClassValues[slot]);
}
return result;
};
};
exports.scv = scv;
exports.default = exports.scv;
//# sourceMappingURL=scv.js.map