react-cron-gen
Version:
[](https://github.com/italomaio/react-cron-gen/actions/workflows/publish.yaml) [
1,584 lines (1,572 loc) • 107 kB
JavaScript
import * as React from 'react';
import { useState, useMemo, useCallback, useEffect, forwardRef } from 'react';
import { jsxs, jsx } from 'react/jsx-runtime';
import * as RadixSelect from '@radix-ui/react-select';
var Locales = /*#__PURE__*/ function(Locales) {
Locales["PT_BR"] = "pt-BR";
Locales["EN_US"] = "en-US";
return Locales;
}({});
var months$1 = [
"Janeiro",
"Fevereiro",
"Março",
"Abril",
"Maio",
"Junho",
"Julho",
"Agosto",
"Setembro",
"Outubro",
"Novembro",
"Dezembro"
];
var weekDays$1 = [
"Domingo",
"Segunda-feira",
"Terça-feira",
"Quarta-feira",
"Quinta-feira",
"Sexta-feira",
"Sábado"
];
var frequencies$1 = {
minutely: "A cada x minuto(s)",
hourly: "A cada x hora(s)",
daily: "Diariamente",
weekly: "Semanalmente",
monthly: "Mensalmente"
};
var frequency$1 = "Frequencia";
var every$1 = "Todo";
var day$1 = "Dia";
var week$1 = "Semana";
var month$1 = "Mês";
var year$1 = "Ano";
var minutes$1 = "Minutos";
var hours$1 = "Horas";
var select$1 = "Selecione";
var weekDay$1 = "Dia da semana";
var monthDay$1 = "Dia do mês";
var selectFrequency$1 = "Selecione a frequência";
var selectMonth = "Selecione o mês";
var selectDayOfMonth$1 = "Selecione o dia do mês";
var selectDayOfWeek$1 = "Selecione o dia da semana";
var fillMinutes$1 = "Preencha os minutos";
var fillHours$1 = "Preencha as horas";
var pt = {
months: months$1,
weekDays: weekDays$1,
frequencies: frequencies$1,
frequency: frequency$1,
every: every$1,
day: day$1,
week: week$1,
month: month$1,
year: year$1,
minutes: minutes$1,
hours: hours$1,
select: select$1,
weekDay: weekDay$1,
monthDay: monthDay$1,
selectFrequency: selectFrequency$1,
selectMonth: selectMonth,
selectDayOfMonth: selectDayOfMonth$1,
selectDayOfWeek: selectDayOfWeek$1,
fillMinutes: fillMinutes$1,
fillHours: fillHours$1
};
var months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
var weekDays = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
];
var frequencies = {
minutely: "Minutely",
hourly: "Hourly",
daily: "Daily",
weekly: "Weekly",
monthly: "Monthly"
};
var frequency = "Frequency";
var every = "Every";
var day = "Day";
var week = "Week";
var month = "Month";
var year = "Year";
var minutes = "Minutes";
var hours = "Hours";
var select = "Select";
var weekDay = "Week day";
var monthDay = "Month day";
var selectFrequency = "Select frequency";
var selectDayOfMonth = "Select months day";
var selectDayOfWeek = "Select week day";
var fillMinutes = "Fill minutes";
var fillHours = "Fill hours";
var en = {
months: months,
weekDays: weekDays,
frequencies: frequencies,
frequency: frequency,
every: every,
day: day,
week: week,
month: month,
year: year,
minutes: minutes,
hours: hours,
select: select,
weekDay: weekDay,
monthDay: monthDay,
selectFrequency: selectFrequency,
selectDayOfMonth: selectDayOfMonth,
selectDayOfWeek: selectDayOfWeek,
fillMinutes: fillMinutes,
fillHours: fillHours
};
const getLocaleData = (locale)=>({
[Locales.PT_BR]: pt,
[Locales.EN_US]: en
})[locale];
class UnixFormatter {
constructor(){}
defaultValues = {
minute: "",
hour: "",
dayOfMonth: "",
month: "",
dayOfWeek: ""
};
format(values, frequency) {
const preventNullishOrEmpty = Object.entries({
...this.defaultValues,
...values
}).map(([key, value])=>[
key,
value || "*"
]);
const fieldsNotNulled = Object.fromEntries(preventNullishOrEmpty);
return [
frequency === "minutely" ? `*/${fieldsNotNulled.minute}` : fieldsNotNulled.minute,
frequency === "hourly" ? `*/${fieldsNotNulled.hour}` : fieldsNotNulled.hour,
fieldsNotNulled.dayOfMonth,
fieldsNotNulled.month,
fieldsNotNulled.dayOfWeek
].join(" ").trim();
}
}
class FormatterFactory {
static create(expressionType) {
const mapper = {
unix: new UnixFormatter(),
quartz: undefined
};
return mapper[expressionType];
}
}
const defaultValues = {
dayOfMonth: undefined,
hour: undefined,
dayOfWeek: undefined,
minute: undefined,
month: undefined,
second: undefined,
year: undefined
};
const useCronGen = ({ type = "unix", locale = "en-US" })=>{
const [state, setState] = useState({
expression: "",
frequency: "hourly",
values: defaultValues
});
const formatter = useMemo(()=>FormatterFactory.create(type), [
type
]);
const setField = useCallback((field, value)=>{
if (!field) return;
setState((prev)=>{
const values = {
...prev.values,
[field]: value
};
return {
...prev,
values,
expression: formatter.format(values, frequency)
};
});
}, [
state.values
]);
const setFrequency = useCallback((frequency)=>{
setState(()=>({
frequency,
values: {},
expression: formatter.format({})
}));
}, [
state
]);
const data = useMemo(()=>getLocaleData(locale), [
locale
]);
const frequency = useMemo(()=>state.frequency, [
state.frequency
]);
useEffect(()=>{
console.count("useCronGen Count: ");
console.log("useCronGen State: ", state);
}, [
state
]);
return {
data,
state,
frequency,
setField,
setFrequency
};
};
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
const CLASS_PART_SEPARATOR = '-';
const createClassGroupUtils = config => {
const classMap = createClassMap(config);
const {
conflictingClassGroups,
conflictingClassGroupModifiers
} = config;
const getClassGroupId = className => {
const classParts = className.split(CLASS_PART_SEPARATOR);
// Classes like `-inset-1` produce an empty string as first classPart. We assume that classes for negative values are used correctly and remove it from classParts.
if (classParts[0] === '' && classParts.length !== 1) {
classParts.shift();
}
return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className);
};
const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
const conflicts = conflictingClassGroups[classGroupId] || [];
if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]];
}
return conflicts;
};
return {
getClassGroupId,
getConflictingClassGroupIds
};
};
const getGroupRecursive = (classParts, classPartObject) => {
if (classParts.length === 0) {
return classPartObject.classGroupId;
}
const currentClassPart = classParts[0];
const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
const classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive(classParts.slice(1), nextClassPartObject) : undefined;
if (classGroupFromNextClassPart) {
return classGroupFromNextClassPart;
}
if (classPartObject.validators.length === 0) {
return undefined;
}
const classRest = classParts.join(CLASS_PART_SEPARATOR);
return classPartObject.validators.find(({
validator
}) => validator(classRest))?.classGroupId;
};
const arbitraryPropertyRegex = /^\[(.+)\]$/;
const getGroupIdForArbitraryProperty = className => {
if (arbitraryPropertyRegex.test(className)) {
const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
const property = arbitraryPropertyClassName?.substring(0, arbitraryPropertyClassName.indexOf(':'));
if (property) {
// I use two dots here because one dot is used as prefix for class groups in plugins
return 'arbitrary..' + property;
}
}
};
/**
* Exported for testing only
*/
const createClassMap = config => {
const {
theme,
classGroups
} = config;
const classMap = {
nextPart: new Map(),
validators: []
};
for (const classGroupId in classGroups) {
processClassesRecursively(classGroups[classGroupId], classMap, classGroupId, theme);
}
return classMap;
};
const processClassesRecursively = (classGroup, classPartObject, classGroupId, theme) => {
classGroup.forEach(classDefinition => {
if (typeof classDefinition === 'string') {
const classPartObjectToEdit = classDefinition === '' ? classPartObject : getPart(classPartObject, classDefinition);
classPartObjectToEdit.classGroupId = classGroupId;
return;
}
if (typeof classDefinition === 'function') {
if (isThemeGetter(classDefinition)) {
processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
return;
}
classPartObject.validators.push({
validator: classDefinition,
classGroupId
});
return;
}
Object.entries(classDefinition).forEach(([key, classGroup]) => {
processClassesRecursively(classGroup, getPart(classPartObject, key), classGroupId, theme);
});
});
};
const getPart = (classPartObject, path) => {
let currentClassPartObject = classPartObject;
path.split(CLASS_PART_SEPARATOR).forEach(pathPart => {
if (!currentClassPartObject.nextPart.has(pathPart)) {
currentClassPartObject.nextPart.set(pathPart, {
nextPart: new Map(),
validators: []
});
}
currentClassPartObject = currentClassPartObject.nextPart.get(pathPart);
});
return currentClassPartObject;
};
const isThemeGetter = func => func.isThemeGetter;
// LRU cache inspired from hashlru (https://github.com/dominictarr/hashlru/blob/v1.0.4/index.js) but object replaced with Map to improve performance
const createLruCache = maxCacheSize => {
if (maxCacheSize < 1) {
return {
get: () => undefined,
set: () => {}
};
}
let cacheSize = 0;
let cache = new Map();
let previousCache = new Map();
const update = (key, value) => {
cache.set(key, value);
cacheSize++;
if (cacheSize > maxCacheSize) {
cacheSize = 0;
previousCache = cache;
cache = new Map();
}
};
return {
get(key) {
let value = cache.get(key);
if (value !== undefined) {
return value;
}
if ((value = previousCache.get(key)) !== undefined) {
update(key, value);
return value;
}
},
set(key, value) {
if (cache.has(key)) {
cache.set(key, value);
} else {
update(key, value);
}
}
};
};
const IMPORTANT_MODIFIER = '!';
const MODIFIER_SEPARATOR = ':';
const MODIFIER_SEPARATOR_LENGTH = MODIFIER_SEPARATOR.length;
const createParseClassName = config => {
const {
prefix,
experimentalParseClassName
} = config;
/**
* Parse class name into parts.
*
* Inspired by `splitAtTopLevelOnly` used in Tailwind CSS
* @see https://github.com/tailwindlabs/tailwindcss/blob/v3.2.2/src/util/splitAtTopLevelOnly.js
*/
let parseClassName = className => {
const modifiers = [];
let bracketDepth = 0;
let parenDepth = 0;
let modifierStart = 0;
let postfixModifierPosition;
for (let index = 0; index < className.length; index++) {
let currentCharacter = className[index];
if (bracketDepth === 0 && parenDepth === 0) {
if (currentCharacter === MODIFIER_SEPARATOR) {
modifiers.push(className.slice(modifierStart, index));
modifierStart = index + MODIFIER_SEPARATOR_LENGTH;
continue;
}
if (currentCharacter === '/') {
postfixModifierPosition = index;
continue;
}
}
if (currentCharacter === '[') {
bracketDepth++;
} else if (currentCharacter === ']') {
bracketDepth--;
} else if (currentCharacter === '(') {
parenDepth++;
} else if (currentCharacter === ')') {
parenDepth--;
}
}
const baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.substring(modifierStart);
const baseClassName = stripImportantModifier(baseClassNameWithImportantModifier);
const hasImportantModifier = baseClassName !== baseClassNameWithImportantModifier;
const maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : undefined;
return {
modifiers,
hasImportantModifier,
baseClassName,
maybePostfixModifierPosition
};
};
if (prefix) {
const fullPrefix = prefix + MODIFIER_SEPARATOR;
const parseClassNameOriginal = parseClassName;
parseClassName = className => className.startsWith(fullPrefix) ? parseClassNameOriginal(className.substring(fullPrefix.length)) : {
isExternal: true,
modifiers: [],
hasImportantModifier: false,
baseClassName: className,
maybePostfixModifierPosition: undefined
};
}
if (experimentalParseClassName) {
const parseClassNameOriginal = parseClassName;
parseClassName = className => experimentalParseClassName({
className,
parseClassName: parseClassNameOriginal
});
}
return parseClassName;
};
const stripImportantModifier = baseClassName => {
if (baseClassName.endsWith(IMPORTANT_MODIFIER)) {
return baseClassName.substring(0, baseClassName.length - 1);
}
/**
* In Tailwind CSS v3 the important modifier was at the start of the base class name. This is still supported for legacy reasons.
* @see https://github.com/dcastil/tailwind-merge/issues/513#issuecomment-2614029864
*/
if (baseClassName.startsWith(IMPORTANT_MODIFIER)) {
return baseClassName.substring(1);
}
return baseClassName;
};
/**
* Sorts modifiers according to following schema:
* - Predefined modifiers are sorted alphabetically
* - When an arbitrary variant appears, it must be preserved which modifiers are before and after it
*/
const createSortModifiers = config => {
const orderSensitiveModifiers = Object.fromEntries(config.orderSensitiveModifiers.map(modifier => [modifier, true]));
const sortModifiers = modifiers => {
if (modifiers.length <= 1) {
return modifiers;
}
const sortedModifiers = [];
let unsortedModifiers = [];
modifiers.forEach(modifier => {
const isPositionSensitive = modifier[0] === '[' || orderSensitiveModifiers[modifier];
if (isPositionSensitive) {
sortedModifiers.push(...unsortedModifiers.sort(), modifier);
unsortedModifiers = [];
} else {
unsortedModifiers.push(modifier);
}
});
sortedModifiers.push(...unsortedModifiers.sort());
return sortedModifiers;
};
return sortModifiers;
};
const createConfigUtils = config => ({
cache: createLruCache(config.cacheSize),
parseClassName: createParseClassName(config),
sortModifiers: createSortModifiers(config),
...createClassGroupUtils(config)
});
const SPLIT_CLASSES_REGEX = /\s+/;
const mergeClassList = (classList, configUtils) => {
const {
parseClassName,
getClassGroupId,
getConflictingClassGroupIds,
sortModifiers
} = configUtils;
/**
* Set of classGroupIds in following format:
* `{importantModifier}{variantModifiers}{classGroupId}`
* @example 'float'
* @example 'hover:focus:bg-color'
* @example 'md:!pr'
*/
const classGroupsInConflict = [];
const classNames = classList.trim().split(SPLIT_CLASSES_REGEX);
let result = '';
for (let index = classNames.length - 1; index >= 0; index -= 1) {
const originalClassName = classNames[index];
const {
isExternal,
modifiers,
hasImportantModifier,
baseClassName,
maybePostfixModifierPosition
} = parseClassName(originalClassName);
if (isExternal) {
result = originalClassName + (result.length > 0 ? ' ' + result : result);
continue;
}
let hasPostfixModifier = !!maybePostfixModifierPosition;
let classGroupId = getClassGroupId(hasPostfixModifier ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName);
if (!classGroupId) {
if (!hasPostfixModifier) {
// Not a Tailwind class
result = originalClassName + (result.length > 0 ? ' ' + result : result);
continue;
}
classGroupId = getClassGroupId(baseClassName);
if (!classGroupId) {
// Not a Tailwind class
result = originalClassName + (result.length > 0 ? ' ' + result : result);
continue;
}
hasPostfixModifier = false;
}
const variantModifier = sortModifiers(modifiers).join(':');
const modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
const classId = modifierId + classGroupId;
if (classGroupsInConflict.includes(classId)) {
// Tailwind class omitted due to conflict
continue;
}
classGroupsInConflict.push(classId);
const conflictGroups = getConflictingClassGroupIds(classGroupId, hasPostfixModifier);
for (let i = 0; i < conflictGroups.length; ++i) {
const group = conflictGroups[i];
classGroupsInConflict.push(modifierId + group);
}
// Tailwind class not in conflict
result = originalClassName + (result.length > 0 ? ' ' + result : result);
}
return result;
};
/**
* The code in this file is copied from https://github.com/lukeed/clsx and modified to suit the needs of tailwind-merge better.
*
* Specifically:
* - Runtime code from https://github.com/lukeed/clsx/blob/v1.2.1/src/index.js
* - TypeScript types from https://github.com/lukeed/clsx/blob/v1.2.1/clsx.d.ts
*
* Original code has MIT license: Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)
*/
function twJoin() {
let index = 0;
let argument;
let resolvedValue;
let string = '';
while (index < arguments.length) {
if (argument = arguments[index++]) {
if (resolvedValue = toValue(argument)) {
string && (string += ' ');
string += resolvedValue;
}
}
}
return string;
}
const toValue = mix => {
if (typeof mix === 'string') {
return mix;
}
let resolvedValue;
let string = '';
for (let k = 0; k < mix.length; k++) {
if (mix[k]) {
if (resolvedValue = toValue(mix[k])) {
string && (string += ' ');
string += resolvedValue;
}
}
}
return string;
};
function createTailwindMerge(createConfigFirst, ...createConfigRest) {
let configUtils;
let cacheGet;
let cacheSet;
let functionToCall = initTailwindMerge;
function initTailwindMerge(classList) {
const config = createConfigRest.reduce((previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig), createConfigFirst());
configUtils = createConfigUtils(config);
cacheGet = configUtils.cache.get;
cacheSet = configUtils.cache.set;
functionToCall = tailwindMerge;
return tailwindMerge(classList);
}
function tailwindMerge(classList) {
const cachedResult = cacheGet(classList);
if (cachedResult) {
return cachedResult;
}
const result = mergeClassList(classList, configUtils);
cacheSet(classList, result);
return result;
}
return function callTailwindMerge() {
return functionToCall(twJoin.apply(null, arguments));
};
}
const fromTheme = key => {
const themeGetter = theme => theme[key] || [];
themeGetter.isThemeGetter = true;
return themeGetter;
};
const arbitraryValueRegex = /^\[(?:(\w[\w-]*):)?(.+)\]$/i;
const arbitraryVariableRegex = /^\((?:(\w[\w-]*):)?(.+)\)$/i;
const fractionRegex = /^\d+\/\d+$/;
const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
const lengthUnitRegex = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/;
const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/;
// Shadow always begins with x and y offset separated by underscore optionally prepended by inset
const shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
const isFraction = value => fractionRegex.test(value);
const isNumber = value => !!value && !Number.isNaN(Number(value));
const isInteger = value => !!value && Number.isInteger(Number(value));
const isPercent = value => value.endsWith('%') && isNumber(value.slice(0, -1));
const isTshirtSize = value => tshirtUnitRegex.test(value);
const isAny = () => true;
const isLengthOnly = value =>
// `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
// For example, `hsl(0 0% 0%)` would be classified as a length without this check.
// I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
lengthUnitRegex.test(value) && !colorFunctionRegex.test(value);
const isNever = () => false;
const isShadow = value => shadowRegex.test(value);
const isImage = value => imageRegex.test(value);
const isAnyNonArbitrary = value => !isArbitraryValue(value) && !isArbitraryVariable(value);
const isArbitrarySize = value => getIsArbitraryValue(value, isLabelSize, isNever);
const isArbitraryValue = value => arbitraryValueRegex.test(value);
const isArbitraryLength = value => getIsArbitraryValue(value, isLabelLength, isLengthOnly);
const isArbitraryNumber = value => getIsArbitraryValue(value, isLabelNumber, isNumber);
const isArbitraryPosition = value => getIsArbitraryValue(value, isLabelPosition, isNever);
const isArbitraryImage = value => getIsArbitraryValue(value, isLabelImage, isImage);
const isArbitraryShadow = value => getIsArbitraryValue(value, isLabelShadow, isShadow);
const isArbitraryVariable = value => arbitraryVariableRegex.test(value);
const isArbitraryVariableLength = value => getIsArbitraryVariable(value, isLabelLength);
const isArbitraryVariableFamilyName = value => getIsArbitraryVariable(value, isLabelFamilyName);
const isArbitraryVariablePosition = value => getIsArbitraryVariable(value, isLabelPosition);
const isArbitraryVariableSize = value => getIsArbitraryVariable(value, isLabelSize);
const isArbitraryVariableImage = value => getIsArbitraryVariable(value, isLabelImage);
const isArbitraryVariableShadow = value => getIsArbitraryVariable(value, isLabelShadow, true);
// Helpers
const getIsArbitraryValue = (value, testLabel, testValue) => {
const result = arbitraryValueRegex.exec(value);
if (result) {
if (result[1]) {
return testLabel(result[1]);
}
return testValue(result[2]);
}
return false;
};
const getIsArbitraryVariable = (value, testLabel, shouldMatchNoLabel = false) => {
const result = arbitraryVariableRegex.exec(value);
if (result) {
if (result[1]) {
return testLabel(result[1]);
}
return shouldMatchNoLabel;
}
return false;
};
// Labels
const isLabelPosition = label => label === 'position' || label === 'percentage';
const isLabelImage = label => label === 'image' || label === 'url';
const isLabelSize = label => label === 'length' || label === 'size' || label === 'bg-size';
const isLabelLength = label => label === 'length';
const isLabelNumber = label => label === 'number';
const isLabelFamilyName = label => label === 'family-name';
const isLabelShadow = label => label === 'shadow';
const getDefaultConfig = () => {
/**
* Theme getters for theme variable namespaces
* @see https://tailwindcss.com/docs/theme#theme-variable-namespaces
*/
/***/
const themeColor = fromTheme('color');
const themeFont = fromTheme('font');
const themeText = fromTheme('text');
const themeFontWeight = fromTheme('font-weight');
const themeTracking = fromTheme('tracking');
const themeLeading = fromTheme('leading');
const themeBreakpoint = fromTheme('breakpoint');
const themeContainer = fromTheme('container');
const themeSpacing = fromTheme('spacing');
const themeRadius = fromTheme('radius');
const themeShadow = fromTheme('shadow');
const themeInsetShadow = fromTheme('inset-shadow');
const themeTextShadow = fromTheme('text-shadow');
const themeDropShadow = fromTheme('drop-shadow');
const themeBlur = fromTheme('blur');
const themePerspective = fromTheme('perspective');
const themeAspect = fromTheme('aspect');
const themeEase = fromTheme('ease');
const themeAnimate = fromTheme('animate');
/**
* Helpers to avoid repeating the same scales
*
* We use functions that create a new array every time they're called instead of static arrays.
* This ensures that users who modify any scale by mutating the array (e.g. with `array.push(element)`) don't accidentally mutate arrays in other parts of the config.
*/
/***/
const scaleBreak = () => ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'];
const scalePosition = () => ['center', 'top', 'bottom', 'left', 'right', 'top-left',
// Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
'left-top', 'top-right',
// Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
'right-top', 'bottom-right',
// Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
'right-bottom', 'bottom-left',
// Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
'left-bottom'];
const scalePositionWithArbitrary = () => [...scalePosition(), isArbitraryVariable, isArbitraryValue];
const scaleOverflow = () => ['auto', 'hidden', 'clip', 'visible', 'scroll'];
const scaleOverscroll = () => ['auto', 'contain', 'none'];
const scaleUnambiguousSpacing = () => [isArbitraryVariable, isArbitraryValue, themeSpacing];
const scaleInset = () => [isFraction, 'full', 'auto', ...scaleUnambiguousSpacing()];
const scaleGridTemplateColsRows = () => [isInteger, 'none', 'subgrid', isArbitraryVariable, isArbitraryValue];
const scaleGridColRowStartAndEnd = () => ['auto', {
span: ['full', isInteger, isArbitraryVariable, isArbitraryValue]
}, isInteger, isArbitraryVariable, isArbitraryValue];
const scaleGridColRowStartOrEnd = () => [isInteger, 'auto', isArbitraryVariable, isArbitraryValue];
const scaleGridAutoColsRows = () => ['auto', 'min', 'max', 'fr', isArbitraryVariable, isArbitraryValue];
const scaleAlignPrimaryAxis = () => ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch', 'baseline', 'center-safe', 'end-safe'];
const scaleAlignSecondaryAxis = () => ['start', 'end', 'center', 'stretch', 'center-safe', 'end-safe'];
const scaleMargin = () => ['auto', ...scaleUnambiguousSpacing()];
const scaleSizing = () => [isFraction, 'auto', 'full', 'dvw', 'dvh', 'lvw', 'lvh', 'svw', 'svh', 'min', 'max', 'fit', ...scaleUnambiguousSpacing()];
const scaleColor = () => [themeColor, isArbitraryVariable, isArbitraryValue];
const scaleBgPosition = () => [...scalePosition(), isArbitraryVariablePosition, isArbitraryPosition, {
position: [isArbitraryVariable, isArbitraryValue]
}];
const scaleBgRepeat = () => ['no-repeat', {
repeat: ['', 'x', 'y', 'space', 'round']
}];
const scaleBgSize = () => ['auto', 'cover', 'contain', isArbitraryVariableSize, isArbitrarySize, {
size: [isArbitraryVariable, isArbitraryValue]
}];
const scaleGradientStopPosition = () => [isPercent, isArbitraryVariableLength, isArbitraryLength];
const scaleRadius = () => [
// Deprecated since Tailwind CSS v4.0.0
'', 'none', 'full', themeRadius, isArbitraryVariable, isArbitraryValue];
const scaleBorderWidth = () => ['', isNumber, isArbitraryVariableLength, isArbitraryLength];
const scaleLineStyle = () => ['solid', 'dashed', 'dotted', 'double'];
const scaleBlendMode = () => ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'];
const scaleMaskImagePosition = () => [isNumber, isPercent, isArbitraryVariablePosition, isArbitraryPosition];
const scaleBlur = () => [
// Deprecated since Tailwind CSS v4.0.0
'', 'none', themeBlur, isArbitraryVariable, isArbitraryValue];
const scaleRotate = () => ['none', isNumber, isArbitraryVariable, isArbitraryValue];
const scaleScale = () => ['none', isNumber, isArbitraryVariable, isArbitraryValue];
const scaleSkew = () => [isNumber, isArbitraryVariable, isArbitraryValue];
const scaleTranslate = () => [isFraction, 'full', ...scaleUnambiguousSpacing()];
return {
cacheSize: 500,
theme: {
animate: ['spin', 'ping', 'pulse', 'bounce'],
aspect: ['video'],
blur: [isTshirtSize],
breakpoint: [isTshirtSize],
color: [isAny],
container: [isTshirtSize],
'drop-shadow': [isTshirtSize],
ease: ['in', 'out', 'in-out'],
font: [isAnyNonArbitrary],
'font-weight': ['thin', 'extralight', 'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold', 'black'],
'inset-shadow': [isTshirtSize],
leading: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose'],
perspective: ['dramatic', 'near', 'normal', 'midrange', 'distant', 'none'],
radius: [isTshirtSize],
shadow: [isTshirtSize],
spacing: ['px', isNumber],
text: [isTshirtSize],
'text-shadow': [isTshirtSize],
tracking: ['tighter', 'tight', 'normal', 'wide', 'wider', 'widest']
},
classGroups: {
// --------------
// --- Layout ---
// --------------
/**
* Aspect Ratio
* @see https://tailwindcss.com/docs/aspect-ratio
*/
aspect: [{
aspect: ['auto', 'square', isFraction, isArbitraryValue, isArbitraryVariable, themeAspect]
}],
/**
* Container
* @see https://tailwindcss.com/docs/container
* @deprecated since Tailwind CSS v4.0.0
*/
container: ['container'],
/**
* Columns
* @see https://tailwindcss.com/docs/columns
*/
columns: [{
columns: [isNumber, isArbitraryValue, isArbitraryVariable, themeContainer]
}],
/**
* Break After
* @see https://tailwindcss.com/docs/break-after
*/
'break-after': [{
'break-after': scaleBreak()
}],
/**
* Break Before
* @see https://tailwindcss.com/docs/break-before
*/
'break-before': [{
'break-before': scaleBreak()
}],
/**
* Break Inside
* @see https://tailwindcss.com/docs/break-inside
*/
'break-inside': [{
'break-inside': ['auto', 'avoid', 'avoid-page', 'avoid-column']
}],
/**
* Box Decoration Break
* @see https://tailwindcss.com/docs/box-decoration-break
*/
'box-decoration': [{
'box-decoration': ['slice', 'clone']
}],
/**
* Box Sizing
* @see https://tailwindcss.com/docs/box-sizing
*/
box: [{
box: ['border', 'content']
}],
/**
* Display
* @see https://tailwindcss.com/docs/display
*/
display: ['block', 'inline-block', 'inline', 'flex', 'inline-flex', 'table', 'inline-table', 'table-caption', 'table-cell', 'table-column', 'table-column-group', 'table-footer-group', 'table-header-group', 'table-row-group', 'table-row', 'flow-root', 'grid', 'inline-grid', 'contents', 'list-item', 'hidden'],
/**
* Screen Reader Only
* @see https://tailwindcss.com/docs/display#screen-reader-only
*/
sr: ['sr-only', 'not-sr-only'],
/**
* Floats
* @see https://tailwindcss.com/docs/float
*/
float: [{
float: ['right', 'left', 'none', 'start', 'end']
}],
/**
* Clear
* @see https://tailwindcss.com/docs/clear
*/
clear: [{
clear: ['left', 'right', 'both', 'none', 'start', 'end']
}],
/**
* Isolation
* @see https://tailwindcss.com/docs/isolation
*/
isolation: ['isolate', 'isolation-auto'],
/**
* Object Fit
* @see https://tailwindcss.com/docs/object-fit
*/
'object-fit': [{
object: ['contain', 'cover', 'fill', 'none', 'scale-down']
}],
/**
* Object Position
* @see https://tailwindcss.com/docs/object-position
*/
'object-position': [{
object: scalePositionWithArbitrary()
}],
/**
* Overflow
* @see https://tailwindcss.com/docs/overflow
*/
overflow: [{
overflow: scaleOverflow()
}],
/**
* Overflow X
* @see https://tailwindcss.com/docs/overflow
*/
'overflow-x': [{
'overflow-x': scaleOverflow()
}],
/**
* Overflow Y
* @see https://tailwindcss.com/docs/overflow
*/
'overflow-y': [{
'overflow-y': scaleOverflow()
}],
/**
* Overscroll Behavior
* @see https://tailwindcss.com/docs/overscroll-behavior
*/
overscroll: [{
overscroll: scaleOverscroll()
}],
/**
* Overscroll Behavior X
* @see https://tailwindcss.com/docs/overscroll-behavior
*/
'overscroll-x': [{
'overscroll-x': scaleOverscroll()
}],
/**
* Overscroll Behavior Y
* @see https://tailwindcss.com/docs/overscroll-behavior
*/
'overscroll-y': [{
'overscroll-y': scaleOverscroll()
}],
/**
* Position
* @see https://tailwindcss.com/docs/position
*/
position: ['static', 'fixed', 'absolute', 'relative', 'sticky'],
/**
* Top / Right / Bottom / Left
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
inset: [{
inset: scaleInset()
}],
/**
* Right / Left
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
'inset-x': [{
'inset-x': scaleInset()
}],
/**
* Top / Bottom
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
'inset-y': [{
'inset-y': scaleInset()
}],
/**
* Start
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
start: [{
start: scaleInset()
}],
/**
* End
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
end: [{
end: scaleInset()
}],
/**
* Top
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
top: [{
top: scaleInset()
}],
/**
* Right
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
right: [{
right: scaleInset()
}],
/**
* Bottom
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
bottom: [{
bottom: scaleInset()
}],
/**
* Left
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
left: [{
left: scaleInset()
}],
/**
* Visibility
* @see https://tailwindcss.com/docs/visibility
*/
visibility: ['visible', 'invisible', 'collapse'],
/**
* Z-Index
* @see https://tailwindcss.com/docs/z-index
*/
z: [{
z: [isInteger, 'auto', isArbitraryVariable, isArbitraryValue]
}],
// ------------------------
// --- Flexbox and Grid ---
// ------------------------
/**
* Flex Basis
* @see https://tailwindcss.com/docs/flex-basis
*/
basis: [{
basis: [isFraction, 'full', 'auto', themeContainer, ...scaleUnambiguousSpacing()]
}],
/**
* Flex Direction
* @see https://tailwindcss.com/docs/flex-direction
*/
'flex-direction': [{
flex: ['row', 'row-reverse', 'col', 'col-reverse']
}],
/**
* Flex Wrap
* @see https://tailwindcss.com/docs/flex-wrap
*/
'flex-wrap': [{
flex: ['nowrap', 'wrap', 'wrap-reverse']
}],
/**
* Flex
* @see https://tailwindcss.com/docs/flex
*/
flex: [{
flex: [isNumber, isFraction, 'auto', 'initial', 'none', isArbitraryValue]
}],
/**
* Flex Grow
* @see https://tailwindcss.com/docs/flex-grow
*/
grow: [{
grow: ['', isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Flex Shrink
* @see https://tailwindcss.com/docs/flex-shrink
*/
shrink: [{
shrink: ['', isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Order
* @see https://tailwindcss.com/docs/order
*/
order: [{
order: [isInteger, 'first', 'last', 'none', isArbitraryVariable, isArbitraryValue]
}],
/**
* Grid Template Columns
* @see https://tailwindcss.com/docs/grid-template-columns
*/
'grid-cols': [{
'grid-cols': scaleGridTemplateColsRows()
}],
/**
* Grid Column Start / End
* @see https://tailwindcss.com/docs/grid-column
*/
'col-start-end': [{
col: scaleGridColRowStartAndEnd()
}],
/**
* Grid Column Start
* @see https://tailwindcss.com/docs/grid-column
*/
'col-start': [{
'col-start': scaleGridColRowStartOrEnd()
}],
/**
* Grid Column End
* @see https://tailwindcss.com/docs/grid-column
*/
'col-end': [{
'col-end': scaleGridColRowStartOrEnd()
}],
/**
* Grid Template Rows
* @see https://tailwindcss.com/docs/grid-template-rows
*/
'grid-rows': [{
'grid-rows': scaleGridTemplateColsRows()
}],
/**
* Grid Row Start / End
* @see https://tailwindcss.com/docs/grid-row
*/
'row-start-end': [{
row: scaleGridColRowStartAndEnd()
}],
/**
* Grid Row Start
* @see https://tailwindcss.com/docs/grid-row
*/
'row-start': [{
'row-start': scaleGridColRowStartOrEnd()
}],
/**
* Grid Row End
* @see https://tailwindcss.com/docs/grid-row
*/
'row-end': [{
'row-end': scaleGridColRowStartOrEnd()
}],
/**
* Grid Auto Flow
* @see https://tailwindcss.com/docs/grid-auto-flow
*/
'grid-flow': [{
'grid-flow': ['row', 'col', 'dense', 'row-dense', 'col-dense']
}],
/**
* Grid Auto Columns
* @see https://tailwindcss.com/docs/grid-auto-columns
*/
'auto-cols': [{
'auto-cols': scaleGridAutoColsRows()
}],
/**
* Grid Auto Rows
* @see https://tailwindcss.com/docs/grid-auto-rows
*/
'auto-rows': [{
'auto-rows': scaleGridAutoColsRows()
}],
/**
* Gap
* @see https://tailwindcss.com/docs/gap
*/
gap: [{
gap: scaleUnambiguousSpacing()
}],
/**
* Gap X
* @see https://tailwindcss.com/docs/gap
*/
'gap-x': [{
'gap-x': scaleUnambiguousSpacing()
}],
/**
* Gap Y
* @see https://tailwindcss.com/docs/gap
*/
'gap-y': [{
'gap-y': scaleUnambiguousSpacing()
}],
/**
* Justify Content
* @see https://tailwindcss.com/docs/justify-content
*/
'justify-content': [{
justify: [...scaleAlignPrimaryAxis(), 'normal']
}],
/**
* Justify Items
* @see https://tailwindcss.com/docs/justify-items
*/
'justify-items': [{
'justify-items': [...scaleAlignSecondaryAxis(), 'normal']
}],
/**
* Justify Self
* @see https://tailwindcss.com/docs/justify-self
*/
'justify-self': [{
'justify-self': ['auto', ...scaleAlignSecondaryAxis()]
}],
/**
* Align Content
* @see https://tailwindcss.com/docs/align-content
*/
'align-content': [{
content: ['normal', ...scaleAlignPrimaryAxis()]
}],
/**
* Align Items
* @see https://tailwindcss.com/docs/align-items
*/
'align-items': [{
items: [...scaleAlignSecondaryAxis(), {
baseline: ['', 'last']
}]
}],
/**
* Align Self
* @see https://tailwindcss.com/docs/align-self
*/
'align-self': [{
self: ['auto', ...scaleAlignSecondaryAxis(), {
baseline: ['', 'last']
}]
}],
/**
* Place Content
* @see https://tailwindcss.com/docs/place-content
*/
'place-content': [{
'place-content': scaleAlignPrimaryAxis()
}],
/**
* Place Items
* @see https://tailwindcss.com/docs/place-items
*/
'place-items': [{
'place-items': [...scaleAlignSecondaryAxis(), 'baseline']
}],
/**
* Place Self
* @see https://tailwindcss.com/docs/place-self
*/
'place-self': [{
'place-self': ['auto', ...scaleAlignSecondaryAxis()]
}],
// Spacing
/**
* Padding
* @see https://tailwindcss.com/docs/padding
*/
p: [{
p: scaleUnambiguousSpacing()
}],
/**
* Padding X
* @see https://tailwindcss.com/docs/padding
*/
px: [{
px: scaleUnambiguousSpacing()
}],
/**
* Padding Y
* @see https://tailwindcss.com/docs/padding
*/
py: [{
py: scaleUnambiguousSpacing()
}],
/**
* Padding Start
* @see https://tailwindcss.com/docs/padding
*/
ps: [{
ps: scaleUnambiguousSpacing()
}],
/**
* Padding End
* @see https://tailwindcss.com/docs/padding
*/
pe: [{
pe: scaleUnambiguousSpacing()
}],
/**
* Padding Top
* @see https://tailwindcss.com/docs/padding
*/
pt: [{
pt: scaleUnambiguousSpacing()
}],
/**
* Padding Right
* @see https://tailwindcss.com/docs/padding
*/
pr: [{
pr: scaleUnambiguousSpacing()
}],
/**
* Padding Bottom
* @see https://tailwindcss.com/docs/padding
*/
pb: [{
pb: scaleUnambiguousSpacing()
}],
/**
* Padding Left
* @see https://tailwindcss.com/docs/padding
*/
pl: [{
pl: scaleUnambiguousSpacing()
}],
/**
* Margin
* @see https://tailwindcss.com/docs/margin
*/
m: [{
m: scaleMargin()
}],
/**
* Margin X
* @see https://tailwindcss.com/docs/margin
*/
mx: [{
mx: scaleMargin()
}],
/**
* Margin Y
* @see https://tailwindcss.com/docs/margin
*/
my: [{
my: scaleMargin()
}],
/**
* Margin Start
* @see https://tailwindcss.com/docs/margin
*/
ms: [{
ms: scaleMargin()
}],
/**
* Margin End
* @see https://tailwindcss.com/docs/margin
*/
me: [{
me: scaleMargin()
}],
/**
* Margin Top
* @see https://tailwindcss.com/docs/margin
*/
mt: [{
mt: scaleMargin()
}],
/**
* Margin Right
* @see https://tailwindcss.com/docs/margin
*/
mr: [{
mr: scaleMargin()
}],
/**
* Margin Bottom
* @see https://tailwindcss.com/docs/margin
*/
mb: [{
mb: scaleMargin()
}],
/**
* Margin Left
* @see https://tailwindcss.com/docs/margin
*/
ml: [{
ml: scaleMargin()
}],
/**
* Space Between X
* @see https://tailwindcss.com/docs/margin#adding-space-between-children
*/
'space-x': [{
'space-x': scaleUnambiguousSpacing()
}],
/**
* Space Between X Reverse
* @see https://tailwindcss.com/docs/margin#adding-space-between-children
*/
'space-x-reverse': ['space-x-reverse'],
/**
* Space Between Y
* @see https://tailwindcss.com/docs/margin#adding-space-between-children
*/
'space-y': [{
'space-y': scaleUnambiguousSpacing()
}],
/**
* Space Between Y Reverse
* @see https://tailwindcss.com/docs/margin#adding-space-between-children
*/
'space-y-reverse': ['space-y-reverse'],
// --------------
// --- Sizing ---
// --------------
/**
* Size
* @see https://tailwindcss.com/docs/width#setting-both-width-and-height
*/
size: [{
size: scaleSizing()
}],
/**
* Width
* @see https://tailwindcss.com/docs/width
*/
w: [{
w: [themeContainer, 'screen', ...scaleSizing()]
}],
/**
* Min-Width
* @see https://tailwindcss.com/docs/min-width
*/
'min-w': [{
'min-w': [themeContainer, 'screen', /** Deprecated. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
'none', ...scaleSizing()]
}],
/**
* Max-Width
* @see https://tailwindcss.com/docs/max-width
*/
'max-w': [{
'max-w': [themeContainer, 'screen', 'none', /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
'prose', /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
{
screen: [themeBreakpoint]
}, ...scaleSizing()]
}],
/**
* Height
* @see https://tailwindcss.com/docs/height
*/
h: [{
h: ['screen', 'lh', ...scaleSizing()]
}],
/**
* Min-Height
* @see https://tailwindcss.com/docs/min-height
*/
'min-h': [{
'min-h': ['screen', 'lh', 'none', ...scaleSizing()]
}],
/**
* Max-Height
* @see https://tailwindcss.com/docs/max-height
*/
'max-h': [{
'max-h': ['screen', 'lh', ...scaleSizing()]
}],
// ------------------
// --- Typography ---
// ------------------
/**
* Font Size
* @see https://tailwindcss.com/docs/font-size
*/
'font-size': [{
text: ['base', themeText, isArbitraryVariableLength, isArbitraryLength]
}],
/**
* Font Smoothing
* @see https://tailwindcss.com/docs/font-smoothing
*/
'font-smoothing': ['antialiased', 'subpixel-antialiased'],
/**
* Font Style
* @see https://tailwindcss.com/docs/font-style
*/
'font-style': ['italic', 'not-italic'],
/**
* Font Weight
* @see https://tailwindcss.com/docs/font-weight
*/
'font-weight': [{
font: [themeFontWeight, isArbitraryVariable, isArbitraryNumber]
}],
/**
* Font Stretch
* @see https://tailwindcss.com/docs/font-stretch
*/
'font-stretch': [{
'font-stretch': ['ultra-condensed', 'extra-condensed', 'condensed', 'semi-condensed', 'normal', 'semi-expanded', 'expanded', 'extra-expanded', 'ultra-expanded', isPercent, isArbitraryValue]
}],
/**
* Font Family
* @see https://tailwindcss.com/docs/font-family
*/
'font-family': [{
font: [isArbitraryVariableFamilyName, isArbitraryValue, themeFont]
}],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
'fvn-normal': ['normal-nums'],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
'fvn-ordinal': ['ordinal'],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
'fvn-slashed-zero': ['slashed-zero'],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
'fvn-figure': ['lining-nums', 'oldstyle-nums'],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
'fvn-spacing': ['proportional-nums', 'tabular-nums'],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
'fvn-fraction': ['diagonal-fractions', 'stacked-fractions'],
/**
* Letter Spacing
* @see https://tailwindcss.com/docs/letter-spacing
*/
tracking: [{
tracking: [themeTracking, isArbitraryVariable, isArbitraryValue]
}],
/**
* Line Clamp
* @see https://tailwindcss.com/docs/line-clamp
*/
'line-clamp': [{
'line-clamp': [isNumber, 'none', isArbitraryVariable, isArbitraryNumber]
}],
/**
* Line Height
* @see https://tailwindcss.com/docs/line-height
*/
leading: [{
leading: [/** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
themeLeading, ...scaleUnambiguousSpacing()]
}],
/**
* List Style Image
* @see https://tailwindcss.com/docs