tailwind-variants
Version:
🦄 Tailwindcss first-class variant API
274 lines (268 loc) • 10.7 kB
JavaScript
;
var chunk2JY7EID6_cjs = require('./chunk-2JY7EID6.cjs');
// src/config.js
var defaultConfig = {
twMerge: true,
twMergeConfig: {}
};
// src/state.js
function createState() {
let cachedTwMerge = null;
let cachedTwMergeConfig = {};
let didTwMergeConfigChange = false;
return {
get cachedTwMerge() {
return cachedTwMerge;
},
set cachedTwMerge(value) {
cachedTwMerge = value;
},
get cachedTwMergeConfig() {
return cachedTwMergeConfig;
},
set cachedTwMergeConfig(value) {
cachedTwMergeConfig = value;
},
get didTwMergeConfigChange() {
return didTwMergeConfigChange;
},
set didTwMergeConfigChange(value) {
didTwMergeConfigChange = value;
},
reset() {
cachedTwMerge = null;
cachedTwMergeConfig = {};
didTwMergeConfigChange = false;
}
};
}
var state = createState();
// src/core.js
var getTailwindVariants = (cn) => {
const tv = (options, configProp) => {
const {
extend = null,
slots: slotProps = {},
variants: variantsProps = {},
compoundVariants: compoundVariantsProps = [],
compoundSlots = [],
defaultVariants: defaultVariantsProps = {}
} = options;
const config = { ...defaultConfig, ...configProp };
const base = extend?.base ? chunk2JY7EID6_cjs.cx(extend.base, options?.base) : options?.base;
const variants = extend?.variants && !chunk2JY7EID6_cjs.isEmptyObject(extend.variants) ? chunk2JY7EID6_cjs.mergeObjects(variantsProps, extend.variants) : variantsProps;
const defaultVariants = extend?.defaultVariants && !chunk2JY7EID6_cjs.isEmptyObject(extend.defaultVariants) ? { ...extend.defaultVariants, ...defaultVariantsProps } : defaultVariantsProps;
if (!chunk2JY7EID6_cjs.isEmptyObject(config.twMergeConfig) && !chunk2JY7EID6_cjs.isEqual(config.twMergeConfig, state.cachedTwMergeConfig)) {
state.didTwMergeConfigChange = true;
state.cachedTwMergeConfig = config.twMergeConfig;
}
const isExtendedSlotsEmpty = chunk2JY7EID6_cjs.isEmptyObject(extend?.slots);
const componentSlots = !chunk2JY7EID6_cjs.isEmptyObject(slotProps) ? {
// add "base" to the slots object
base: chunk2JY7EID6_cjs.cx(options?.base, isExtendedSlotsEmpty && extend?.base),
...slotProps
} : {};
const slots = isExtendedSlotsEmpty ? componentSlots : chunk2JY7EID6_cjs.joinObjects(
{ ...extend?.slots },
chunk2JY7EID6_cjs.isEmptyObject(componentSlots) ? { base: options?.base } : componentSlots
);
const compoundVariants = chunk2JY7EID6_cjs.isEmptyObject(extend?.compoundVariants) ? compoundVariantsProps : chunk2JY7EID6_cjs.flatMergeArrays(extend?.compoundVariants, compoundVariantsProps);
const component = (props) => {
if (chunk2JY7EID6_cjs.isEmptyObject(variants) && chunk2JY7EID6_cjs.isEmptyObject(slotProps) && isExtendedSlotsEmpty) {
return cn(base, props?.class, props?.className)(config);
}
if (compoundVariants && !Array.isArray(compoundVariants)) {
throw new TypeError(
`The "compoundVariants" prop must be an array. Received: ${typeof compoundVariants}`
);
}
if (compoundSlots && !Array.isArray(compoundSlots)) {
throw new TypeError(
`The "compoundSlots" prop must be an array. Received: ${typeof compoundSlots}`
);
}
const getVariantValue = (variant, vrs = variants, _slotKey = null, slotProps2 = null) => {
const variantObj = vrs[variant];
if (!variantObj || chunk2JY7EID6_cjs.isEmptyObject(variantObj)) {
return null;
}
const variantProp = slotProps2?.[variant] ?? props?.[variant];
if (variantProp === null) return null;
const variantKey = chunk2JY7EID6_cjs.falsyToString(variantProp);
if (typeof variantKey === "object") {
return null;
}
const defaultVariantProp = defaultVariants?.[variant];
const key = variantKey != null ? variantKey : chunk2JY7EID6_cjs.falsyToString(defaultVariantProp);
const value = variantObj[key || "false"];
return value;
};
const getVariantClassNames = () => {
if (!variants) return null;
const keys = Object.keys(variants);
const result = [];
for (let i = 0; i < keys.length; i++) {
const value = getVariantValue(keys[i], variants);
if (value) result.push(value);
}
return result;
};
const getVariantClassNamesBySlotKey = (slotKey, slotProps2) => {
if (!variants || typeof variants !== "object") return null;
const result = [];
for (const variant in variants) {
const variantValue = getVariantValue(variant, variants, slotKey, slotProps2);
const value = slotKey === "base" && typeof variantValue === "string" ? variantValue : variantValue && variantValue[slotKey];
if (value) result.push(value);
}
return result;
};
const propsWithoutUndefined = {};
for (const prop in props) {
const value = props[prop];
if (value !== void 0) propsWithoutUndefined[prop] = value;
}
const getCompleteProps = (key, slotProps2) => {
const initialProp = typeof props?.[key] === "object" ? {
[key]: props[key]?.initial
} : {};
return {
...defaultVariants,
...propsWithoutUndefined,
...initialProp,
...slotProps2
};
};
const getCompoundVariantsValue = (cv = [], slotProps2) => {
const result = [];
const cvLength = cv.length;
for (let i = 0; i < cvLength; i++) {
const { class: tvClass, className: tvClassName, ...compoundVariantOptions } = cv[i];
let isValid = true;
const completeProps = getCompleteProps(null, slotProps2);
for (const key in compoundVariantOptions) {
const value = compoundVariantOptions[key];
const completePropsValue = completeProps[key];
if (Array.isArray(value)) {
if (!value.includes(completePropsValue)) {
isValid = false;
break;
}
} else {
if ((value == null || value === false) && (completePropsValue == null || completePropsValue === false))
continue;
if (completePropsValue !== value) {
isValid = false;
break;
}
}
}
if (isValid) {
if (tvClass) result.push(tvClass);
if (tvClassName) result.push(tvClassName);
}
}
return result;
};
const getCompoundVariantClassNamesBySlot = (slotProps2) => {
const compoundClassNames = getCompoundVariantsValue(compoundVariants, slotProps2);
if (!Array.isArray(compoundClassNames)) return compoundClassNames;
const result = {};
const cnFn = cn;
for (let i = 0; i < compoundClassNames.length; i++) {
const className = compoundClassNames[i];
if (typeof className === "string") {
result.base = cnFn(result.base, className)(config);
} else if (typeof className === "object") {
for (const slot in className) {
result[slot] = cnFn(result[slot], className[slot])(config);
}
}
}
return result;
};
const getCompoundSlotClassNameBySlot = (slotProps2) => {
if (compoundSlots.length < 1) return null;
const result = {};
const completeProps = getCompleteProps(null, slotProps2);
for (let i = 0; i < compoundSlots.length; i++) {
const {
slots: slots2 = [],
class: slotClass,
className: slotClassName,
...slotVariants
} = compoundSlots[i];
if (!chunk2JY7EID6_cjs.isEmptyObject(slotVariants)) {
let isValid = true;
for (const key in slotVariants) {
const completePropsValue = completeProps[key];
const slotVariantValue = slotVariants[key];
if (completePropsValue === void 0 || (Array.isArray(slotVariantValue) ? !slotVariantValue.includes(completePropsValue) : slotVariantValue !== completePropsValue)) {
isValid = false;
break;
}
}
if (!isValid) continue;
}
for (let j = 0; j < slots2.length; j++) {
const slotName = slots2[j];
if (!result[slotName]) result[slotName] = [];
result[slotName].push([slotClass, slotClassName]);
}
}
return result;
};
if (!chunk2JY7EID6_cjs.isEmptyObject(slotProps) || !isExtendedSlotsEmpty) {
const slotsFns = {};
if (typeof slots === "object" && !chunk2JY7EID6_cjs.isEmptyObject(slots)) {
const cnFn = cn;
for (const slotKey in slots) {
slotsFns[slotKey] = (slotProps2) => {
const compoundVariantClasses = getCompoundVariantClassNamesBySlot(slotProps2);
const compoundSlotClasses = getCompoundSlotClassNameBySlot(slotProps2);
return cnFn(
slots[slotKey],
getVariantClassNamesBySlotKey(slotKey, slotProps2),
compoundVariantClasses ? compoundVariantClasses[slotKey] : void 0,
compoundSlotClasses ? compoundSlotClasses[slotKey] : void 0,
slotProps2?.class,
slotProps2?.className
)(config);
};
}
}
return slotsFns;
}
return cn(
base,
getVariantClassNames(),
getCompoundVariantsValue(compoundVariants),
props?.class,
props?.className
)(config);
};
const getVariantKeys = () => {
if (!variants || typeof variants !== "object") return;
return Object.keys(variants);
};
component.variantKeys = getVariantKeys();
component.extend = extend;
component.base = base;
component.slots = slots;
component.variants = variants;
component.defaultVariants = defaultVariants;
component.compoundSlots = compoundSlots;
component.compoundVariants = compoundVariants;
return component;
};
const createTV = (configProp) => {
return (options, config) => tv(options, config ? chunk2JY7EID6_cjs.mergeObjects(configProp, config) : configProp);
};
return {
tv,
createTV
};
};
exports.defaultConfig = defaultConfig;
exports.getTailwindVariants = getTailwindVariants;
exports.state = state;