infinity-ui-elements 1.1.2 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -2,3300 +2,30 @@
2
2
 
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
4
  var React = require('react');
5
+ var reactSlot = require('@radix-ui/react-slot');
6
+ var classVarianceAuthority = require('class-variance-authority');
7
+ var reactSpinners = require('react-spinners');
8
+ var clsx = require('clsx');
9
+ var tailwindMerge = require('tailwind-merge');
5
10
 
6
11
  function _interopNamespaceDefault(e) {
7
- var n = Object.create(null);
8
- if (e) {
9
- Object.keys(e).forEach(function (k) {
10
- if (k !== 'default') {
11
- var d = Object.getOwnPropertyDescriptor(e, k);
12
- Object.defineProperty(n, k, d.get ? d : {
13
- enumerable: true,
14
- get: function () { return e[k]; }
15
- });
16
- }
17
- });
18
- }
19
- n.default = e;
20
- return Object.freeze(n);
21
- }
22
-
23
- var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
24
-
25
- // packages/react/compose-refs/src/compose-refs.tsx
26
- function setRef(ref, value) {
27
- if (typeof ref === "function") {
28
- return ref(value);
29
- } else if (ref !== null && ref !== void 0) {
30
- ref.current = value;
31
- }
32
- }
33
- function composeRefs(...refs) {
34
- return (node) => {
35
- let hasCleanup = false;
36
- const cleanups = refs.map((ref) => {
37
- const cleanup = setRef(ref, node);
38
- if (!hasCleanup && typeof cleanup == "function") {
39
- hasCleanup = true;
40
- }
41
- return cleanup;
42
- });
43
- if (hasCleanup) {
44
- return () => {
45
- for (let i = 0; i < cleanups.length; i++) {
46
- const cleanup = cleanups[i];
47
- if (typeof cleanup == "function") {
48
- cleanup();
49
- } else {
50
- setRef(refs[i], null);
51
- }
52
- }
53
- };
54
- }
55
- };
56
- }
57
-
58
- // src/slot.tsx
59
- // @__NO_SIDE_EFFECTS__
60
- function createSlot(ownerName) {
61
- const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
62
- const Slot2 = React__namespace.forwardRef((props, forwardedRef) => {
63
- const { children, ...slotProps } = props;
64
- const childrenArray = React__namespace.Children.toArray(children);
65
- const slottable = childrenArray.find(isSlottable);
66
- if (slottable) {
67
- const newElement = slottable.props.children;
68
- const newChildren = childrenArray.map((child) => {
69
- if (child === slottable) {
70
- if (React__namespace.Children.count(newElement) > 1) return React__namespace.Children.only(null);
71
- return React__namespace.isValidElement(newElement) ? newElement.props.children : null;
72
- } else {
73
- return child;
74
- }
75
- });
76
- return /* @__PURE__ */ jsxRuntime.jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React__namespace.isValidElement(newElement) ? React__namespace.cloneElement(newElement, void 0, newChildren) : null });
77
- }
78
- return /* @__PURE__ */ jsxRuntime.jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
79
- });
80
- Slot2.displayName = `${ownerName}.Slot`;
81
- return Slot2;
82
- }
83
- var Slot = /* @__PURE__ */ createSlot("Slot");
84
- // @__NO_SIDE_EFFECTS__
85
- function createSlotClone(ownerName) {
86
- const SlotClone = React__namespace.forwardRef((props, forwardedRef) => {
87
- const { children, ...slotProps } = props;
88
- if (React__namespace.isValidElement(children)) {
89
- const childrenRef = getElementRef(children);
90
- const props2 = mergeProps(slotProps, children.props);
91
- if (children.type !== React__namespace.Fragment) {
92
- props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
93
- }
94
- return React__namespace.cloneElement(children, props2);
95
- }
96
- return React__namespace.Children.count(children) > 1 ? React__namespace.Children.only(null) : null;
97
- });
98
- SlotClone.displayName = `${ownerName}.SlotClone`;
99
- return SlotClone;
100
- }
101
- var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
102
- function isSlottable(child) {
103
- return React__namespace.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
104
- }
105
- function mergeProps(slotProps, childProps) {
106
- const overrideProps = { ...childProps };
107
- for (const propName in childProps) {
108
- const slotPropValue = slotProps[propName];
109
- const childPropValue = childProps[propName];
110
- const isHandler = /^on[A-Z]/.test(propName);
111
- if (isHandler) {
112
- if (slotPropValue && childPropValue) {
113
- overrideProps[propName] = (...args) => {
114
- const result = childPropValue(...args);
115
- slotPropValue(...args);
116
- return result;
117
- };
118
- } else if (slotPropValue) {
119
- overrideProps[propName] = slotPropValue;
120
- }
121
- } else if (propName === "style") {
122
- overrideProps[propName] = { ...slotPropValue, ...childPropValue };
123
- } else if (propName === "className") {
124
- overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
125
- }
126
- }
127
- return { ...slotProps, ...overrideProps };
128
- }
129
- function getElementRef(element) {
130
- let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
131
- let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
132
- if (mayWarn) {
133
- return element.ref;
134
- }
135
- getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
136
- mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
137
- if (mayWarn) {
138
- return element.props.ref;
139
- }
140
- return element.props.ref || element.ref;
141
- }
142
-
143
- 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}
144
-
145
- const falsyToString = (value)=>typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
146
- const cx = clsx;
147
- const cva = (base, config)=>(props)=>{
148
- var _config_compoundVariants;
149
- if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
150
- const { variants, defaultVariants } = config;
151
- const getVariantClassNames = Object.keys(variants).map((variant)=>{
152
- const variantProp = props === null || props === void 0 ? void 0 : props[variant];
153
- const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
154
- if (variantProp === null) return null;
155
- const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
156
- return variants[variant][variantKey];
157
- });
158
- const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param)=>{
159
- let [key, value] = param;
160
- if (value === undefined) {
161
- return acc;
12
+ var n = Object.create(null);
13
+ if (e) {
14
+ Object.keys(e).forEach(function (k) {
15
+ if (k !== 'default') {
16
+ var d = Object.getOwnPropertyDescriptor(e, k);
17
+ Object.defineProperty(n, k, d.get ? d : {
18
+ enumerable: true,
19
+ get: function () { return e[k]; }
20
+ });
162
21
  }
163
- acc[key] = value;
164
- return acc;
165
- }, {});
166
- const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param)=>{
167
- let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
168
- return Object.entries(compoundVariantOptions).every((param)=>{
169
- let [key, value] = param;
170
- return Array.isArray(value) ? value.includes({
171
- ...defaultVariants,
172
- ...propsWithoutUndefined
173
- }[key]) : ({
174
- ...defaultVariants,
175
- ...propsWithoutUndefined
176
- })[key] === value;
177
- }) ? [
178
- ...acc,
179
- cvClass,
180
- cvClassName
181
- ] : acc;
182
- }, []);
183
- return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
184
- };
185
-
186
- var cssUnit = {
187
- cm: true,
188
- mm: true,
189
- in: true,
190
- px: true,
191
- pt: true,
192
- pc: true,
193
- em: true,
194
- ex: true,
195
- ch: true,
196
- rem: true,
197
- vw: true,
198
- vh: true,
199
- vmin: true,
200
- vmax: true,
201
- "%": true,
202
- };
203
- /**
204
- * If size is a number, append px to the value as default unit.
205
- * If size is a string, validate against list of valid units.
206
- * If unit is valid, return size as is.
207
- * If unit is invalid, console warn issue, replace with px as the unit.
208
- *
209
- * @param {(number | string)} size
210
- * @return {LengthObject} LengthObject
211
- */
212
- function parseLengthAndUnit(size) {
213
- if (typeof size === "number") {
214
- return {
215
- value: size,
216
- unit: "px",
217
- };
218
- }
219
- var value;
220
- var valueString = (size.match(/^[0-9.]*/) || "").toString();
221
- if (valueString.includes(".")) {
222
- value = parseFloat(valueString);
223
- }
224
- else {
225
- value = parseInt(valueString, 10);
226
- }
227
- var unit = (size.match(/[^0-9]*$/) || "").toString();
228
- if (cssUnit[unit]) {
229
- return {
230
- value: value,
231
- unit: unit,
232
- };
233
- }
234
- console.warn("React Spinners: ".concat(size, " is not a valid css value. Defaulting to ").concat(value, "px."));
235
- return {
236
- value: value,
237
- unit: "px",
238
- };
239
- }
240
- /**
241
- * Take value as an input and return valid css value
242
- *
243
- * @param {(number | string)} value
244
- * @return {string} valid css value
245
- */
246
- function cssValue(value) {
247
- var lengthWithunit = parseLengthAndUnit(value);
248
- return "".concat(lengthWithunit.value).concat(lengthWithunit.unit);
249
- }
250
-
251
- var createAnimation = function (loaderName, frames, suffix) {
252
- var animationName = "react-spinners-".concat(loaderName, "-").concat(suffix);
253
- if (typeof window == "undefined" || !window.document) {
254
- return animationName;
255
- }
256
- var styleEl = document.createElement("style");
257
- document.head.appendChild(styleEl);
258
- var styleSheet = styleEl.sheet;
259
- var keyFrames = "\n @keyframes ".concat(animationName, " {\n ").concat(frames, "\n }\n ");
260
- if (styleSheet) {
261
- styleSheet.insertRule(keyFrames, 0);
262
- }
263
- return animationName;
264
- };
265
-
266
- var __assign$1 = (undefined && undefined.__assign) || function () {
267
- __assign$1 = Object.assign || function(t) {
268
- for (var s, i = 1, n = arguments.length; i < n; i++) {
269
- s = arguments[i];
270
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
271
- t[p] = s[p];
272
- }
273
- return t;
274
- };
275
- return __assign$1.apply(this, arguments);
276
- };
277
- var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
278
- var t = {};
279
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
280
- t[p] = s[p];
281
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
282
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
283
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
284
- t[p[i]] = s[p[i]];
285
- }
286
- return t;
287
- };
288
- var clip = createAnimation("ClipLoader", "0% {transform: rotate(0deg) scale(1)} 50% {transform: rotate(180deg) scale(0.8)} 100% {transform: rotate(360deg) scale(1)}", "clip");
289
- function ClipLoader(_a) {
290
- var _b = _a.loading, loading = _b === void 0 ? true : _b, _c = _a.color, color = _c === void 0 ? "#000000" : _c, _d = _a.speedMultiplier, speedMultiplier = _d === void 0 ? 1 : _d, _e = _a.cssOverride, cssOverride = _e === void 0 ? {} : _e, _f = _a.size, size = _f === void 0 ? 35 : _f, additionalprops = __rest$1(_a, ["loading", "color", "speedMultiplier", "cssOverride", "size"]);
291
- var style = __assign$1({ background: "transparent !important", width: cssValue(size), height: cssValue(size), borderRadius: "100%", border: "2px solid", borderTopColor: color, borderBottomColor: "transparent", borderLeftColor: color, borderRightColor: color, display: "inline-block", animation: "".concat(clip, " ").concat(0.75 / speedMultiplier, "s 0s infinite linear"), animationFillMode: "both" }, cssOverride);
292
- if (!loading) {
293
- return null;
294
- }
295
- return React__namespace.createElement("span", __assign$1({ style: style }, additionalprops));
296
- }
297
-
298
- var __assign = (undefined && undefined.__assign) || function () {
299
- __assign = Object.assign || function(t) {
300
- for (var s, i = 1, n = arguments.length; i < n; i++) {
301
- s = arguments[i];
302
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
303
- t[p] = s[p];
304
- }
305
- return t;
306
- };
307
- return __assign.apply(this, arguments);
308
- };
309
- var __rest = (undefined && undefined.__rest) || function (s, e) {
310
- var t = {};
311
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
312
- t[p] = s[p];
313
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
314
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
315
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
316
- t[p[i]] = s[p[i]];
317
- }
318
- return t;
319
- };
320
- var pulse = createAnimation("PulseLoader", "0% {transform: scale(1); opacity: 1} 45% {transform: scale(0.1); opacity: 0.7} 80% {transform: scale(1); opacity: 1}", "pulse");
321
- function PulseLoader(_a) {
322
- var _b = _a.loading, loading = _b === void 0 ? true : _b, _c = _a.color, color = _c === void 0 ? "#000000" : _c, _d = _a.speedMultiplier, speedMultiplier = _d === void 0 ? 1 : _d, _e = _a.cssOverride, cssOverride = _e === void 0 ? {} : _e, _f = _a.size, size = _f === void 0 ? 15 : _f, _g = _a.margin, margin = _g === void 0 ? 2 : _g, additionalprops = __rest(_a, ["loading", "color", "speedMultiplier", "cssOverride", "size", "margin"]);
323
- var wrapper = __assign({ display: "inherit" }, cssOverride);
324
- var style = function (i) {
325
- return {
326
- backgroundColor: color,
327
- width: cssValue(size),
328
- height: cssValue(size),
329
- margin: cssValue(margin),
330
- borderRadius: "100%",
331
- display: "inline-block",
332
- animation: "".concat(pulse, " ").concat(0.75 / speedMultiplier, "s ").concat((i * 0.12) / speedMultiplier, "s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)"),
333
- animationFillMode: "both",
334
- };
335
- };
336
- if (!loading) {
337
- return null;
22
+ });
338
23
  }
339
- return (React__namespace.createElement("span", __assign({ style: wrapper }, additionalprops),
340
- React__namespace.createElement("span", { style: style(1) }),
341
- React__namespace.createElement("span", { style: style(2) }),
342
- React__namespace.createElement("span", { style: style(3) })));
24
+ n.default = e;
25
+ return Object.freeze(n);
343
26
  }
344
27
 
345
- const CLASS_PART_SEPARATOR = '-';
346
- const createClassGroupUtils = config => {
347
- const classMap = createClassMap(config);
348
- const {
349
- conflictingClassGroups,
350
- conflictingClassGroupModifiers
351
- } = config;
352
- const getClassGroupId = className => {
353
- const classParts = className.split(CLASS_PART_SEPARATOR);
354
- // 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.
355
- if (classParts[0] === '' && classParts.length !== 1) {
356
- classParts.shift();
357
- }
358
- return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className);
359
- };
360
- const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
361
- const conflicts = conflictingClassGroups[classGroupId] || [];
362
- if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
363
- return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]];
364
- }
365
- return conflicts;
366
- };
367
- return {
368
- getClassGroupId,
369
- getConflictingClassGroupIds
370
- };
371
- };
372
- const getGroupRecursive = (classParts, classPartObject) => {
373
- if (classParts.length === 0) {
374
- return classPartObject.classGroupId;
375
- }
376
- const currentClassPart = classParts[0];
377
- const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
378
- const classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive(classParts.slice(1), nextClassPartObject) : undefined;
379
- if (classGroupFromNextClassPart) {
380
- return classGroupFromNextClassPart;
381
- }
382
- if (classPartObject.validators.length === 0) {
383
- return undefined;
384
- }
385
- const classRest = classParts.join(CLASS_PART_SEPARATOR);
386
- return classPartObject.validators.find(({
387
- validator
388
- }) => validator(classRest))?.classGroupId;
389
- };
390
- const arbitraryPropertyRegex = /^\[(.+)\]$/;
391
- const getGroupIdForArbitraryProperty = className => {
392
- if (arbitraryPropertyRegex.test(className)) {
393
- const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
394
- const property = arbitraryPropertyClassName?.substring(0, arbitraryPropertyClassName.indexOf(':'));
395
- if (property) {
396
- // I use two dots here because one dot is used as prefix for class groups in plugins
397
- return 'arbitrary..' + property;
398
- }
399
- }
400
- };
401
- /**
402
- * Exported for testing only
403
- */
404
- const createClassMap = config => {
405
- const {
406
- theme,
407
- classGroups
408
- } = config;
409
- const classMap = {
410
- nextPart: new Map(),
411
- validators: []
412
- };
413
- for (const classGroupId in classGroups) {
414
- processClassesRecursively(classGroups[classGroupId], classMap, classGroupId, theme);
415
- }
416
- return classMap;
417
- };
418
- const processClassesRecursively = (classGroup, classPartObject, classGroupId, theme) => {
419
- classGroup.forEach(classDefinition => {
420
- if (typeof classDefinition === 'string') {
421
- const classPartObjectToEdit = classDefinition === '' ? classPartObject : getPart(classPartObject, classDefinition);
422
- classPartObjectToEdit.classGroupId = classGroupId;
423
- return;
424
- }
425
- if (typeof classDefinition === 'function') {
426
- if (isThemeGetter(classDefinition)) {
427
- processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
428
- return;
429
- }
430
- classPartObject.validators.push({
431
- validator: classDefinition,
432
- classGroupId
433
- });
434
- return;
435
- }
436
- Object.entries(classDefinition).forEach(([key, classGroup]) => {
437
- processClassesRecursively(classGroup, getPart(classPartObject, key), classGroupId, theme);
438
- });
439
- });
440
- };
441
- const getPart = (classPartObject, path) => {
442
- let currentClassPartObject = classPartObject;
443
- path.split(CLASS_PART_SEPARATOR).forEach(pathPart => {
444
- if (!currentClassPartObject.nextPart.has(pathPart)) {
445
- currentClassPartObject.nextPart.set(pathPart, {
446
- nextPart: new Map(),
447
- validators: []
448
- });
449
- }
450
- currentClassPartObject = currentClassPartObject.nextPart.get(pathPart);
451
- });
452
- return currentClassPartObject;
453
- };
454
- const isThemeGetter = func => func.isThemeGetter;
455
-
456
- // LRU cache inspired from hashlru (https://github.com/dominictarr/hashlru/blob/v1.0.4/index.js) but object replaced with Map to improve performance
457
- const createLruCache = maxCacheSize => {
458
- if (maxCacheSize < 1) {
459
- return {
460
- get: () => undefined,
461
- set: () => {}
462
- };
463
- }
464
- let cacheSize = 0;
465
- let cache = new Map();
466
- let previousCache = new Map();
467
- const update = (key, value) => {
468
- cache.set(key, value);
469
- cacheSize++;
470
- if (cacheSize > maxCacheSize) {
471
- cacheSize = 0;
472
- previousCache = cache;
473
- cache = new Map();
474
- }
475
- };
476
- return {
477
- get(key) {
478
- let value = cache.get(key);
479
- if (value !== undefined) {
480
- return value;
481
- }
482
- if ((value = previousCache.get(key)) !== undefined) {
483
- update(key, value);
484
- return value;
485
- }
486
- },
487
- set(key, value) {
488
- if (cache.has(key)) {
489
- cache.set(key, value);
490
- } else {
491
- update(key, value);
492
- }
493
- }
494
- };
495
- };
496
- const IMPORTANT_MODIFIER = '!';
497
- const MODIFIER_SEPARATOR = ':';
498
- const MODIFIER_SEPARATOR_LENGTH = MODIFIER_SEPARATOR.length;
499
- const createParseClassName = config => {
500
- const {
501
- prefix,
502
- experimentalParseClassName
503
- } = config;
504
- /**
505
- * Parse class name into parts.
506
- *
507
- * Inspired by `splitAtTopLevelOnly` used in Tailwind CSS
508
- * @see https://github.com/tailwindlabs/tailwindcss/blob/v3.2.2/src/util/splitAtTopLevelOnly.js
509
- */
510
- let parseClassName = className => {
511
- const modifiers = [];
512
- let bracketDepth = 0;
513
- let parenDepth = 0;
514
- let modifierStart = 0;
515
- let postfixModifierPosition;
516
- for (let index = 0; index < className.length; index++) {
517
- let currentCharacter = className[index];
518
- if (bracketDepth === 0 && parenDepth === 0) {
519
- if (currentCharacter === MODIFIER_SEPARATOR) {
520
- modifiers.push(className.slice(modifierStart, index));
521
- modifierStart = index + MODIFIER_SEPARATOR_LENGTH;
522
- continue;
523
- }
524
- if (currentCharacter === '/') {
525
- postfixModifierPosition = index;
526
- continue;
527
- }
528
- }
529
- if (currentCharacter === '[') {
530
- bracketDepth++;
531
- } else if (currentCharacter === ']') {
532
- bracketDepth--;
533
- } else if (currentCharacter === '(') {
534
- parenDepth++;
535
- } else if (currentCharacter === ')') {
536
- parenDepth--;
537
- }
538
- }
539
- const baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.substring(modifierStart);
540
- const baseClassName = stripImportantModifier(baseClassNameWithImportantModifier);
541
- const hasImportantModifier = baseClassName !== baseClassNameWithImportantModifier;
542
- const maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : undefined;
543
- return {
544
- modifiers,
545
- hasImportantModifier,
546
- baseClassName,
547
- maybePostfixModifierPosition
548
- };
549
- };
550
- if (prefix) {
551
- const fullPrefix = prefix + MODIFIER_SEPARATOR;
552
- const parseClassNameOriginal = parseClassName;
553
- parseClassName = className => className.startsWith(fullPrefix) ? parseClassNameOriginal(className.substring(fullPrefix.length)) : {
554
- isExternal: true,
555
- modifiers: [],
556
- hasImportantModifier: false,
557
- baseClassName: className,
558
- maybePostfixModifierPosition: undefined
559
- };
560
- }
561
- if (experimentalParseClassName) {
562
- const parseClassNameOriginal = parseClassName;
563
- parseClassName = className => experimentalParseClassName({
564
- className,
565
- parseClassName: parseClassNameOriginal
566
- });
567
- }
568
- return parseClassName;
569
- };
570
- const stripImportantModifier = baseClassName => {
571
- if (baseClassName.endsWith(IMPORTANT_MODIFIER)) {
572
- return baseClassName.substring(0, baseClassName.length - 1);
573
- }
574
- /**
575
- * In Tailwind CSS v3 the important modifier was at the start of the base class name. This is still supported for legacy reasons.
576
- * @see https://github.com/dcastil/tailwind-merge/issues/513#issuecomment-2614029864
577
- */
578
- if (baseClassName.startsWith(IMPORTANT_MODIFIER)) {
579
- return baseClassName.substring(1);
580
- }
581
- return baseClassName;
582
- };
583
-
584
- /**
585
- * Sorts modifiers according to following schema:
586
- * - Predefined modifiers are sorted alphabetically
587
- * - When an arbitrary variant appears, it must be preserved which modifiers are before and after it
588
- */
589
- const createSortModifiers = config => {
590
- const orderSensitiveModifiers = Object.fromEntries(config.orderSensitiveModifiers.map(modifier => [modifier, true]));
591
- const sortModifiers = modifiers => {
592
- if (modifiers.length <= 1) {
593
- return modifiers;
594
- }
595
- const sortedModifiers = [];
596
- let unsortedModifiers = [];
597
- modifiers.forEach(modifier => {
598
- const isPositionSensitive = modifier[0] === '[' || orderSensitiveModifiers[modifier];
599
- if (isPositionSensitive) {
600
- sortedModifiers.push(...unsortedModifiers.sort(), modifier);
601
- unsortedModifiers = [];
602
- } else {
603
- unsortedModifiers.push(modifier);
604
- }
605
- });
606
- sortedModifiers.push(...unsortedModifiers.sort());
607
- return sortedModifiers;
608
- };
609
- return sortModifiers;
610
- };
611
- const createConfigUtils = config => ({
612
- cache: createLruCache(config.cacheSize),
613
- parseClassName: createParseClassName(config),
614
- sortModifiers: createSortModifiers(config),
615
- ...createClassGroupUtils(config)
616
- });
617
- const SPLIT_CLASSES_REGEX = /\s+/;
618
- const mergeClassList = (classList, configUtils) => {
619
- const {
620
- parseClassName,
621
- getClassGroupId,
622
- getConflictingClassGroupIds,
623
- sortModifiers
624
- } = configUtils;
625
- /**
626
- * Set of classGroupIds in following format:
627
- * `{importantModifier}{variantModifiers}{classGroupId}`
628
- * @example 'float'
629
- * @example 'hover:focus:bg-color'
630
- * @example 'md:!pr'
631
- */
632
- const classGroupsInConflict = [];
633
- const classNames = classList.trim().split(SPLIT_CLASSES_REGEX);
634
- let result = '';
635
- for (let index = classNames.length - 1; index >= 0; index -= 1) {
636
- const originalClassName = classNames[index];
637
- const {
638
- isExternal,
639
- modifiers,
640
- hasImportantModifier,
641
- baseClassName,
642
- maybePostfixModifierPosition
643
- } = parseClassName(originalClassName);
644
- if (isExternal) {
645
- result = originalClassName + (result.length > 0 ? ' ' + result : result);
646
- continue;
647
- }
648
- let hasPostfixModifier = !!maybePostfixModifierPosition;
649
- let classGroupId = getClassGroupId(hasPostfixModifier ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName);
650
- if (!classGroupId) {
651
- if (!hasPostfixModifier) {
652
- // Not a Tailwind class
653
- result = originalClassName + (result.length > 0 ? ' ' + result : result);
654
- continue;
655
- }
656
- classGroupId = getClassGroupId(baseClassName);
657
- if (!classGroupId) {
658
- // Not a Tailwind class
659
- result = originalClassName + (result.length > 0 ? ' ' + result : result);
660
- continue;
661
- }
662
- hasPostfixModifier = false;
663
- }
664
- const variantModifier = sortModifiers(modifiers).join(':');
665
- const modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
666
- const classId = modifierId + classGroupId;
667
- if (classGroupsInConflict.includes(classId)) {
668
- // Tailwind class omitted due to conflict
669
- continue;
670
- }
671
- classGroupsInConflict.push(classId);
672
- const conflictGroups = getConflictingClassGroupIds(classGroupId, hasPostfixModifier);
673
- for (let i = 0; i < conflictGroups.length; ++i) {
674
- const group = conflictGroups[i];
675
- classGroupsInConflict.push(modifierId + group);
676
- }
677
- // Tailwind class not in conflict
678
- result = originalClassName + (result.length > 0 ? ' ' + result : result);
679
- }
680
- return result;
681
- };
682
-
683
- /**
684
- * The code in this file is copied from https://github.com/lukeed/clsx and modified to suit the needs of tailwind-merge better.
685
- *
686
- * Specifically:
687
- * - Runtime code from https://github.com/lukeed/clsx/blob/v1.2.1/src/index.js
688
- * - TypeScript types from https://github.com/lukeed/clsx/blob/v1.2.1/clsx.d.ts
689
- *
690
- * Original code has MIT license: Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)
691
- */
692
- function twJoin() {
693
- let index = 0;
694
- let argument;
695
- let resolvedValue;
696
- let string = '';
697
- while (index < arguments.length) {
698
- if (argument = arguments[index++]) {
699
- if (resolvedValue = toValue(argument)) {
700
- string && (string += ' ');
701
- string += resolvedValue;
702
- }
703
- }
704
- }
705
- return string;
706
- }
707
- const toValue = mix => {
708
- if (typeof mix === 'string') {
709
- return mix;
710
- }
711
- let resolvedValue;
712
- let string = '';
713
- for (let k = 0; k < mix.length; k++) {
714
- if (mix[k]) {
715
- if (resolvedValue = toValue(mix[k])) {
716
- string && (string += ' ');
717
- string += resolvedValue;
718
- }
719
- }
720
- }
721
- return string;
722
- };
723
- function createTailwindMerge(createConfigFirst, ...createConfigRest) {
724
- let configUtils;
725
- let cacheGet;
726
- let cacheSet;
727
- let functionToCall = initTailwindMerge;
728
- function initTailwindMerge(classList) {
729
- const config = createConfigRest.reduce((previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig), createConfigFirst());
730
- configUtils = createConfigUtils(config);
731
- cacheGet = configUtils.cache.get;
732
- cacheSet = configUtils.cache.set;
733
- functionToCall = tailwindMerge;
734
- return tailwindMerge(classList);
735
- }
736
- function tailwindMerge(classList) {
737
- const cachedResult = cacheGet(classList);
738
- if (cachedResult) {
739
- return cachedResult;
740
- }
741
- const result = mergeClassList(classList, configUtils);
742
- cacheSet(classList, result);
743
- return result;
744
- }
745
- return function callTailwindMerge() {
746
- return functionToCall(twJoin.apply(null, arguments));
747
- };
748
- }
749
- const fromTheme = key => {
750
- const themeGetter = theme => theme[key] || [];
751
- themeGetter.isThemeGetter = true;
752
- return themeGetter;
753
- };
754
- const arbitraryValueRegex = /^\[(?:(\w[\w-]*):)?(.+)\]$/i;
755
- const arbitraryVariableRegex = /^\((?:(\w[\w-]*):)?(.+)\)$/i;
756
- const fractionRegex = /^\d+\/\d+$/;
757
- const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
758
- 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$/;
759
- const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/;
760
- // Shadow always begins with x and y offset separated by underscore optionally prepended by inset
761
- const shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
762
- const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
763
- const isFraction = value => fractionRegex.test(value);
764
- const isNumber = value => !!value && !Number.isNaN(Number(value));
765
- const isInteger = value => !!value && Number.isInteger(Number(value));
766
- const isPercent = value => value.endsWith('%') && isNumber(value.slice(0, -1));
767
- const isTshirtSize = value => tshirtUnitRegex.test(value);
768
- const isAny = () => true;
769
- const isLengthOnly = value =>
770
- // `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
771
- // For example, `hsl(0 0% 0%)` would be classified as a length without this check.
772
- // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
773
- lengthUnitRegex.test(value) && !colorFunctionRegex.test(value);
774
- const isNever = () => false;
775
- const isShadow = value => shadowRegex.test(value);
776
- const isImage = value => imageRegex.test(value);
777
- const isAnyNonArbitrary = value => !isArbitraryValue(value) && !isArbitraryVariable(value);
778
- const isArbitrarySize = value => getIsArbitraryValue(value, isLabelSize, isNever);
779
- const isArbitraryValue = value => arbitraryValueRegex.test(value);
780
- const isArbitraryLength = value => getIsArbitraryValue(value, isLabelLength, isLengthOnly);
781
- const isArbitraryNumber = value => getIsArbitraryValue(value, isLabelNumber, isNumber);
782
- const isArbitraryPosition = value => getIsArbitraryValue(value, isLabelPosition, isNever);
783
- const isArbitraryImage = value => getIsArbitraryValue(value, isLabelImage, isImage);
784
- const isArbitraryShadow = value => getIsArbitraryValue(value, isLabelShadow, isShadow);
785
- const isArbitraryVariable = value => arbitraryVariableRegex.test(value);
786
- const isArbitraryVariableLength = value => getIsArbitraryVariable(value, isLabelLength);
787
- const isArbitraryVariableFamilyName = value => getIsArbitraryVariable(value, isLabelFamilyName);
788
- const isArbitraryVariablePosition = value => getIsArbitraryVariable(value, isLabelPosition);
789
- const isArbitraryVariableSize = value => getIsArbitraryVariable(value, isLabelSize);
790
- const isArbitraryVariableImage = value => getIsArbitraryVariable(value, isLabelImage);
791
- const isArbitraryVariableShadow = value => getIsArbitraryVariable(value, isLabelShadow, true);
792
- // Helpers
793
- const getIsArbitraryValue = (value, testLabel, testValue) => {
794
- const result = arbitraryValueRegex.exec(value);
795
- if (result) {
796
- if (result[1]) {
797
- return testLabel(result[1]);
798
- }
799
- return testValue(result[2]);
800
- }
801
- return false;
802
- };
803
- const getIsArbitraryVariable = (value, testLabel, shouldMatchNoLabel = false) => {
804
- const result = arbitraryVariableRegex.exec(value);
805
- if (result) {
806
- if (result[1]) {
807
- return testLabel(result[1]);
808
- }
809
- return shouldMatchNoLabel;
810
- }
811
- return false;
812
- };
813
- // Labels
814
- const isLabelPosition = label => label === 'position' || label === 'percentage';
815
- const isLabelImage = label => label === 'image' || label === 'url';
816
- const isLabelSize = label => label === 'length' || label === 'size' || label === 'bg-size';
817
- const isLabelLength = label => label === 'length';
818
- const isLabelNumber = label => label === 'number';
819
- const isLabelFamilyName = label => label === 'family-name';
820
- const isLabelShadow = label => label === 'shadow';
821
- const getDefaultConfig = () => {
822
- /**
823
- * Theme getters for theme variable namespaces
824
- * @see https://tailwindcss.com/docs/theme#theme-variable-namespaces
825
- */
826
- /***/
827
- const themeColor = fromTheme('color');
828
- const themeFont = fromTheme('font');
829
- const themeText = fromTheme('text');
830
- const themeFontWeight = fromTheme('font-weight');
831
- const themeTracking = fromTheme('tracking');
832
- const themeLeading = fromTheme('leading');
833
- const themeBreakpoint = fromTheme('breakpoint');
834
- const themeContainer = fromTheme('container');
835
- const themeSpacing = fromTheme('spacing');
836
- const themeRadius = fromTheme('radius');
837
- const themeShadow = fromTheme('shadow');
838
- const themeInsetShadow = fromTheme('inset-shadow');
839
- const themeTextShadow = fromTheme('text-shadow');
840
- const themeDropShadow = fromTheme('drop-shadow');
841
- const themeBlur = fromTheme('blur');
842
- const themePerspective = fromTheme('perspective');
843
- const themeAspect = fromTheme('aspect');
844
- const themeEase = fromTheme('ease');
845
- const themeAnimate = fromTheme('animate');
846
- /**
847
- * Helpers to avoid repeating the same scales
848
- *
849
- * We use functions that create a new array every time they're called instead of static arrays.
850
- * 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.
851
- */
852
- /***/
853
- const scaleBreak = () => ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'];
854
- const scalePosition = () => ['center', 'top', 'bottom', 'left', 'right', 'top-left',
855
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
856
- 'left-top', 'top-right',
857
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
858
- 'right-top', 'bottom-right',
859
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
860
- 'right-bottom', 'bottom-left',
861
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
862
- 'left-bottom'];
863
- const scalePositionWithArbitrary = () => [...scalePosition(), isArbitraryVariable, isArbitraryValue];
864
- const scaleOverflow = () => ['auto', 'hidden', 'clip', 'visible', 'scroll'];
865
- const scaleOverscroll = () => ['auto', 'contain', 'none'];
866
- const scaleUnambiguousSpacing = () => [isArbitraryVariable, isArbitraryValue, themeSpacing];
867
- const scaleInset = () => [isFraction, 'full', 'auto', ...scaleUnambiguousSpacing()];
868
- const scaleGridTemplateColsRows = () => [isInteger, 'none', 'subgrid', isArbitraryVariable, isArbitraryValue];
869
- const scaleGridColRowStartAndEnd = () => ['auto', {
870
- span: ['full', isInteger, isArbitraryVariable, isArbitraryValue]
871
- }, isInteger, isArbitraryVariable, isArbitraryValue];
872
- const scaleGridColRowStartOrEnd = () => [isInteger, 'auto', isArbitraryVariable, isArbitraryValue];
873
- const scaleGridAutoColsRows = () => ['auto', 'min', 'max', 'fr', isArbitraryVariable, isArbitraryValue];
874
- const scaleAlignPrimaryAxis = () => ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch', 'baseline', 'center-safe', 'end-safe'];
875
- const scaleAlignSecondaryAxis = () => ['start', 'end', 'center', 'stretch', 'center-safe', 'end-safe'];
876
- const scaleMargin = () => ['auto', ...scaleUnambiguousSpacing()];
877
- const scaleSizing = () => [isFraction, 'auto', 'full', 'dvw', 'dvh', 'lvw', 'lvh', 'svw', 'svh', 'min', 'max', 'fit', ...scaleUnambiguousSpacing()];
878
- const scaleColor = () => [themeColor, isArbitraryVariable, isArbitraryValue];
879
- const scaleBgPosition = () => [...scalePosition(), isArbitraryVariablePosition, isArbitraryPosition, {
880
- position: [isArbitraryVariable, isArbitraryValue]
881
- }];
882
- const scaleBgRepeat = () => ['no-repeat', {
883
- repeat: ['', 'x', 'y', 'space', 'round']
884
- }];
885
- const scaleBgSize = () => ['auto', 'cover', 'contain', isArbitraryVariableSize, isArbitrarySize, {
886
- size: [isArbitraryVariable, isArbitraryValue]
887
- }];
888
- const scaleGradientStopPosition = () => [isPercent, isArbitraryVariableLength, isArbitraryLength];
889
- const scaleRadius = () => [
890
- // Deprecated since Tailwind CSS v4.0.0
891
- '', 'none', 'full', themeRadius, isArbitraryVariable, isArbitraryValue];
892
- const scaleBorderWidth = () => ['', isNumber, isArbitraryVariableLength, isArbitraryLength];
893
- const scaleLineStyle = () => ['solid', 'dashed', 'dotted', 'double'];
894
- const scaleBlendMode = () => ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'];
895
- const scaleMaskImagePosition = () => [isNumber, isPercent, isArbitraryVariablePosition, isArbitraryPosition];
896
- const scaleBlur = () => [
897
- // Deprecated since Tailwind CSS v4.0.0
898
- '', 'none', themeBlur, isArbitraryVariable, isArbitraryValue];
899
- const scaleRotate = () => ['none', isNumber, isArbitraryVariable, isArbitraryValue];
900
- const scaleScale = () => ['none', isNumber, isArbitraryVariable, isArbitraryValue];
901
- const scaleSkew = () => [isNumber, isArbitraryVariable, isArbitraryValue];
902
- const scaleTranslate = () => [isFraction, 'full', ...scaleUnambiguousSpacing()];
903
- return {
904
- cacheSize: 500,
905
- theme: {
906
- animate: ['spin', 'ping', 'pulse', 'bounce'],
907
- aspect: ['video'],
908
- blur: [isTshirtSize],
909
- breakpoint: [isTshirtSize],
910
- color: [isAny],
911
- container: [isTshirtSize],
912
- 'drop-shadow': [isTshirtSize],
913
- ease: ['in', 'out', 'in-out'],
914
- font: [isAnyNonArbitrary],
915
- 'font-weight': ['thin', 'extralight', 'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold', 'black'],
916
- 'inset-shadow': [isTshirtSize],
917
- leading: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose'],
918
- perspective: ['dramatic', 'near', 'normal', 'midrange', 'distant', 'none'],
919
- radius: [isTshirtSize],
920
- shadow: [isTshirtSize],
921
- spacing: ['px', isNumber],
922
- text: [isTshirtSize],
923
- 'text-shadow': [isTshirtSize],
924
- tracking: ['tighter', 'tight', 'normal', 'wide', 'wider', 'widest']
925
- },
926
- classGroups: {
927
- // --------------
928
- // --- Layout ---
929
- // --------------
930
- /**
931
- * Aspect Ratio
932
- * @see https://tailwindcss.com/docs/aspect-ratio
933
- */
934
- aspect: [{
935
- aspect: ['auto', 'square', isFraction, isArbitraryValue, isArbitraryVariable, themeAspect]
936
- }],
937
- /**
938
- * Container
939
- * @see https://tailwindcss.com/docs/container
940
- * @deprecated since Tailwind CSS v4.0.0
941
- */
942
- container: ['container'],
943
- /**
944
- * Columns
945
- * @see https://tailwindcss.com/docs/columns
946
- */
947
- columns: [{
948
- columns: [isNumber, isArbitraryValue, isArbitraryVariable, themeContainer]
949
- }],
950
- /**
951
- * Break After
952
- * @see https://tailwindcss.com/docs/break-after
953
- */
954
- 'break-after': [{
955
- 'break-after': scaleBreak()
956
- }],
957
- /**
958
- * Break Before
959
- * @see https://tailwindcss.com/docs/break-before
960
- */
961
- 'break-before': [{
962
- 'break-before': scaleBreak()
963
- }],
964
- /**
965
- * Break Inside
966
- * @see https://tailwindcss.com/docs/break-inside
967
- */
968
- 'break-inside': [{
969
- 'break-inside': ['auto', 'avoid', 'avoid-page', 'avoid-column']
970
- }],
971
- /**
972
- * Box Decoration Break
973
- * @see https://tailwindcss.com/docs/box-decoration-break
974
- */
975
- 'box-decoration': [{
976
- 'box-decoration': ['slice', 'clone']
977
- }],
978
- /**
979
- * Box Sizing
980
- * @see https://tailwindcss.com/docs/box-sizing
981
- */
982
- box: [{
983
- box: ['border', 'content']
984
- }],
985
- /**
986
- * Display
987
- * @see https://tailwindcss.com/docs/display
988
- */
989
- 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'],
990
- /**
991
- * Screen Reader Only
992
- * @see https://tailwindcss.com/docs/display#screen-reader-only
993
- */
994
- sr: ['sr-only', 'not-sr-only'],
995
- /**
996
- * Floats
997
- * @see https://tailwindcss.com/docs/float
998
- */
999
- float: [{
1000
- float: ['right', 'left', 'none', 'start', 'end']
1001
- }],
1002
- /**
1003
- * Clear
1004
- * @see https://tailwindcss.com/docs/clear
1005
- */
1006
- clear: [{
1007
- clear: ['left', 'right', 'both', 'none', 'start', 'end']
1008
- }],
1009
- /**
1010
- * Isolation
1011
- * @see https://tailwindcss.com/docs/isolation
1012
- */
1013
- isolation: ['isolate', 'isolation-auto'],
1014
- /**
1015
- * Object Fit
1016
- * @see https://tailwindcss.com/docs/object-fit
1017
- */
1018
- 'object-fit': [{
1019
- object: ['contain', 'cover', 'fill', 'none', 'scale-down']
1020
- }],
1021
- /**
1022
- * Object Position
1023
- * @see https://tailwindcss.com/docs/object-position
1024
- */
1025
- 'object-position': [{
1026
- object: scalePositionWithArbitrary()
1027
- }],
1028
- /**
1029
- * Overflow
1030
- * @see https://tailwindcss.com/docs/overflow
1031
- */
1032
- overflow: [{
1033
- overflow: scaleOverflow()
1034
- }],
1035
- /**
1036
- * Overflow X
1037
- * @see https://tailwindcss.com/docs/overflow
1038
- */
1039
- 'overflow-x': [{
1040
- 'overflow-x': scaleOverflow()
1041
- }],
1042
- /**
1043
- * Overflow Y
1044
- * @see https://tailwindcss.com/docs/overflow
1045
- */
1046
- 'overflow-y': [{
1047
- 'overflow-y': scaleOverflow()
1048
- }],
1049
- /**
1050
- * Overscroll Behavior
1051
- * @see https://tailwindcss.com/docs/overscroll-behavior
1052
- */
1053
- overscroll: [{
1054
- overscroll: scaleOverscroll()
1055
- }],
1056
- /**
1057
- * Overscroll Behavior X
1058
- * @see https://tailwindcss.com/docs/overscroll-behavior
1059
- */
1060
- 'overscroll-x': [{
1061
- 'overscroll-x': scaleOverscroll()
1062
- }],
1063
- /**
1064
- * Overscroll Behavior Y
1065
- * @see https://tailwindcss.com/docs/overscroll-behavior
1066
- */
1067
- 'overscroll-y': [{
1068
- 'overscroll-y': scaleOverscroll()
1069
- }],
1070
- /**
1071
- * Position
1072
- * @see https://tailwindcss.com/docs/position
1073
- */
1074
- position: ['static', 'fixed', 'absolute', 'relative', 'sticky'],
1075
- /**
1076
- * Top / Right / Bottom / Left
1077
- * @see https://tailwindcss.com/docs/top-right-bottom-left
1078
- */
1079
- inset: [{
1080
- inset: scaleInset()
1081
- }],
1082
- /**
1083
- * Right / Left
1084
- * @see https://tailwindcss.com/docs/top-right-bottom-left
1085
- */
1086
- 'inset-x': [{
1087
- 'inset-x': scaleInset()
1088
- }],
1089
- /**
1090
- * Top / Bottom
1091
- * @see https://tailwindcss.com/docs/top-right-bottom-left
1092
- */
1093
- 'inset-y': [{
1094
- 'inset-y': scaleInset()
1095
- }],
1096
- /**
1097
- * Start
1098
- * @see https://tailwindcss.com/docs/top-right-bottom-left
1099
- */
1100
- start: [{
1101
- start: scaleInset()
1102
- }],
1103
- /**
1104
- * End
1105
- * @see https://tailwindcss.com/docs/top-right-bottom-left
1106
- */
1107
- end: [{
1108
- end: scaleInset()
1109
- }],
1110
- /**
1111
- * Top
1112
- * @see https://tailwindcss.com/docs/top-right-bottom-left
1113
- */
1114
- top: [{
1115
- top: scaleInset()
1116
- }],
1117
- /**
1118
- * Right
1119
- * @see https://tailwindcss.com/docs/top-right-bottom-left
1120
- */
1121
- right: [{
1122
- right: scaleInset()
1123
- }],
1124
- /**
1125
- * Bottom
1126
- * @see https://tailwindcss.com/docs/top-right-bottom-left
1127
- */
1128
- bottom: [{
1129
- bottom: scaleInset()
1130
- }],
1131
- /**
1132
- * Left
1133
- * @see https://tailwindcss.com/docs/top-right-bottom-left
1134
- */
1135
- left: [{
1136
- left: scaleInset()
1137
- }],
1138
- /**
1139
- * Visibility
1140
- * @see https://tailwindcss.com/docs/visibility
1141
- */
1142
- visibility: ['visible', 'invisible', 'collapse'],
1143
- /**
1144
- * Z-Index
1145
- * @see https://tailwindcss.com/docs/z-index
1146
- */
1147
- z: [{
1148
- z: [isInteger, 'auto', isArbitraryVariable, isArbitraryValue]
1149
- }],
1150
- // ------------------------
1151
- // --- Flexbox and Grid ---
1152
- // ------------------------
1153
- /**
1154
- * Flex Basis
1155
- * @see https://tailwindcss.com/docs/flex-basis
1156
- */
1157
- basis: [{
1158
- basis: [isFraction, 'full', 'auto', themeContainer, ...scaleUnambiguousSpacing()]
1159
- }],
1160
- /**
1161
- * Flex Direction
1162
- * @see https://tailwindcss.com/docs/flex-direction
1163
- */
1164
- 'flex-direction': [{
1165
- flex: ['row', 'row-reverse', 'col', 'col-reverse']
1166
- }],
1167
- /**
1168
- * Flex Wrap
1169
- * @see https://tailwindcss.com/docs/flex-wrap
1170
- */
1171
- 'flex-wrap': [{
1172
- flex: ['nowrap', 'wrap', 'wrap-reverse']
1173
- }],
1174
- /**
1175
- * Flex
1176
- * @see https://tailwindcss.com/docs/flex
1177
- */
1178
- flex: [{
1179
- flex: [isNumber, isFraction, 'auto', 'initial', 'none', isArbitraryValue]
1180
- }],
1181
- /**
1182
- * Flex Grow
1183
- * @see https://tailwindcss.com/docs/flex-grow
1184
- */
1185
- grow: [{
1186
- grow: ['', isNumber, isArbitraryVariable, isArbitraryValue]
1187
- }],
1188
- /**
1189
- * Flex Shrink
1190
- * @see https://tailwindcss.com/docs/flex-shrink
1191
- */
1192
- shrink: [{
1193
- shrink: ['', isNumber, isArbitraryVariable, isArbitraryValue]
1194
- }],
1195
- /**
1196
- * Order
1197
- * @see https://tailwindcss.com/docs/order
1198
- */
1199
- order: [{
1200
- order: [isInteger, 'first', 'last', 'none', isArbitraryVariable, isArbitraryValue]
1201
- }],
1202
- /**
1203
- * Grid Template Columns
1204
- * @see https://tailwindcss.com/docs/grid-template-columns
1205
- */
1206
- 'grid-cols': [{
1207
- 'grid-cols': scaleGridTemplateColsRows()
1208
- }],
1209
- /**
1210
- * Grid Column Start / End
1211
- * @see https://tailwindcss.com/docs/grid-column
1212
- */
1213
- 'col-start-end': [{
1214
- col: scaleGridColRowStartAndEnd()
1215
- }],
1216
- /**
1217
- * Grid Column Start
1218
- * @see https://tailwindcss.com/docs/grid-column
1219
- */
1220
- 'col-start': [{
1221
- 'col-start': scaleGridColRowStartOrEnd()
1222
- }],
1223
- /**
1224
- * Grid Column End
1225
- * @see https://tailwindcss.com/docs/grid-column
1226
- */
1227
- 'col-end': [{
1228
- 'col-end': scaleGridColRowStartOrEnd()
1229
- }],
1230
- /**
1231
- * Grid Template Rows
1232
- * @see https://tailwindcss.com/docs/grid-template-rows
1233
- */
1234
- 'grid-rows': [{
1235
- 'grid-rows': scaleGridTemplateColsRows()
1236
- }],
1237
- /**
1238
- * Grid Row Start / End
1239
- * @see https://tailwindcss.com/docs/grid-row
1240
- */
1241
- 'row-start-end': [{
1242
- row: scaleGridColRowStartAndEnd()
1243
- }],
1244
- /**
1245
- * Grid Row Start
1246
- * @see https://tailwindcss.com/docs/grid-row
1247
- */
1248
- 'row-start': [{
1249
- 'row-start': scaleGridColRowStartOrEnd()
1250
- }],
1251
- /**
1252
- * Grid Row End
1253
- * @see https://tailwindcss.com/docs/grid-row
1254
- */
1255
- 'row-end': [{
1256
- 'row-end': scaleGridColRowStartOrEnd()
1257
- }],
1258
- /**
1259
- * Grid Auto Flow
1260
- * @see https://tailwindcss.com/docs/grid-auto-flow
1261
- */
1262
- 'grid-flow': [{
1263
- 'grid-flow': ['row', 'col', 'dense', 'row-dense', 'col-dense']
1264
- }],
1265
- /**
1266
- * Grid Auto Columns
1267
- * @see https://tailwindcss.com/docs/grid-auto-columns
1268
- */
1269
- 'auto-cols': [{
1270
- 'auto-cols': scaleGridAutoColsRows()
1271
- }],
1272
- /**
1273
- * Grid Auto Rows
1274
- * @see https://tailwindcss.com/docs/grid-auto-rows
1275
- */
1276
- 'auto-rows': [{
1277
- 'auto-rows': scaleGridAutoColsRows()
1278
- }],
1279
- /**
1280
- * Gap
1281
- * @see https://tailwindcss.com/docs/gap
1282
- */
1283
- gap: [{
1284
- gap: scaleUnambiguousSpacing()
1285
- }],
1286
- /**
1287
- * Gap X
1288
- * @see https://tailwindcss.com/docs/gap
1289
- */
1290
- 'gap-x': [{
1291
- 'gap-x': scaleUnambiguousSpacing()
1292
- }],
1293
- /**
1294
- * Gap Y
1295
- * @see https://tailwindcss.com/docs/gap
1296
- */
1297
- 'gap-y': [{
1298
- 'gap-y': scaleUnambiguousSpacing()
1299
- }],
1300
- /**
1301
- * Justify Content
1302
- * @see https://tailwindcss.com/docs/justify-content
1303
- */
1304
- 'justify-content': [{
1305
- justify: [...scaleAlignPrimaryAxis(), 'normal']
1306
- }],
1307
- /**
1308
- * Justify Items
1309
- * @see https://tailwindcss.com/docs/justify-items
1310
- */
1311
- 'justify-items': [{
1312
- 'justify-items': [...scaleAlignSecondaryAxis(), 'normal']
1313
- }],
1314
- /**
1315
- * Justify Self
1316
- * @see https://tailwindcss.com/docs/justify-self
1317
- */
1318
- 'justify-self': [{
1319
- 'justify-self': ['auto', ...scaleAlignSecondaryAxis()]
1320
- }],
1321
- /**
1322
- * Align Content
1323
- * @see https://tailwindcss.com/docs/align-content
1324
- */
1325
- 'align-content': [{
1326
- content: ['normal', ...scaleAlignPrimaryAxis()]
1327
- }],
1328
- /**
1329
- * Align Items
1330
- * @see https://tailwindcss.com/docs/align-items
1331
- */
1332
- 'align-items': [{
1333
- items: [...scaleAlignSecondaryAxis(), {
1334
- baseline: ['', 'last']
1335
- }]
1336
- }],
1337
- /**
1338
- * Align Self
1339
- * @see https://tailwindcss.com/docs/align-self
1340
- */
1341
- 'align-self': [{
1342
- self: ['auto', ...scaleAlignSecondaryAxis(), {
1343
- baseline: ['', 'last']
1344
- }]
1345
- }],
1346
- /**
1347
- * Place Content
1348
- * @see https://tailwindcss.com/docs/place-content
1349
- */
1350
- 'place-content': [{
1351
- 'place-content': scaleAlignPrimaryAxis()
1352
- }],
1353
- /**
1354
- * Place Items
1355
- * @see https://tailwindcss.com/docs/place-items
1356
- */
1357
- 'place-items': [{
1358
- 'place-items': [...scaleAlignSecondaryAxis(), 'baseline']
1359
- }],
1360
- /**
1361
- * Place Self
1362
- * @see https://tailwindcss.com/docs/place-self
1363
- */
1364
- 'place-self': [{
1365
- 'place-self': ['auto', ...scaleAlignSecondaryAxis()]
1366
- }],
1367
- // Spacing
1368
- /**
1369
- * Padding
1370
- * @see https://tailwindcss.com/docs/padding
1371
- */
1372
- p: [{
1373
- p: scaleUnambiguousSpacing()
1374
- }],
1375
- /**
1376
- * Padding X
1377
- * @see https://tailwindcss.com/docs/padding
1378
- */
1379
- px: [{
1380
- px: scaleUnambiguousSpacing()
1381
- }],
1382
- /**
1383
- * Padding Y
1384
- * @see https://tailwindcss.com/docs/padding
1385
- */
1386
- py: [{
1387
- py: scaleUnambiguousSpacing()
1388
- }],
1389
- /**
1390
- * Padding Start
1391
- * @see https://tailwindcss.com/docs/padding
1392
- */
1393
- ps: [{
1394
- ps: scaleUnambiguousSpacing()
1395
- }],
1396
- /**
1397
- * Padding End
1398
- * @see https://tailwindcss.com/docs/padding
1399
- */
1400
- pe: [{
1401
- pe: scaleUnambiguousSpacing()
1402
- }],
1403
- /**
1404
- * Padding Top
1405
- * @see https://tailwindcss.com/docs/padding
1406
- */
1407
- pt: [{
1408
- pt: scaleUnambiguousSpacing()
1409
- }],
1410
- /**
1411
- * Padding Right
1412
- * @see https://tailwindcss.com/docs/padding
1413
- */
1414
- pr: [{
1415
- pr: scaleUnambiguousSpacing()
1416
- }],
1417
- /**
1418
- * Padding Bottom
1419
- * @see https://tailwindcss.com/docs/padding
1420
- */
1421
- pb: [{
1422
- pb: scaleUnambiguousSpacing()
1423
- }],
1424
- /**
1425
- * Padding Left
1426
- * @see https://tailwindcss.com/docs/padding
1427
- */
1428
- pl: [{
1429
- pl: scaleUnambiguousSpacing()
1430
- }],
1431
- /**
1432
- * Margin
1433
- * @see https://tailwindcss.com/docs/margin
1434
- */
1435
- m: [{
1436
- m: scaleMargin()
1437
- }],
1438
- /**
1439
- * Margin X
1440
- * @see https://tailwindcss.com/docs/margin
1441
- */
1442
- mx: [{
1443
- mx: scaleMargin()
1444
- }],
1445
- /**
1446
- * Margin Y
1447
- * @see https://tailwindcss.com/docs/margin
1448
- */
1449
- my: [{
1450
- my: scaleMargin()
1451
- }],
1452
- /**
1453
- * Margin Start
1454
- * @see https://tailwindcss.com/docs/margin
1455
- */
1456
- ms: [{
1457
- ms: scaleMargin()
1458
- }],
1459
- /**
1460
- * Margin End
1461
- * @see https://tailwindcss.com/docs/margin
1462
- */
1463
- me: [{
1464
- me: scaleMargin()
1465
- }],
1466
- /**
1467
- * Margin Top
1468
- * @see https://tailwindcss.com/docs/margin
1469
- */
1470
- mt: [{
1471
- mt: scaleMargin()
1472
- }],
1473
- /**
1474
- * Margin Right
1475
- * @see https://tailwindcss.com/docs/margin
1476
- */
1477
- mr: [{
1478
- mr: scaleMargin()
1479
- }],
1480
- /**
1481
- * Margin Bottom
1482
- * @see https://tailwindcss.com/docs/margin
1483
- */
1484
- mb: [{
1485
- mb: scaleMargin()
1486
- }],
1487
- /**
1488
- * Margin Left
1489
- * @see https://tailwindcss.com/docs/margin
1490
- */
1491
- ml: [{
1492
- ml: scaleMargin()
1493
- }],
1494
- /**
1495
- * Space Between X
1496
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
1497
- */
1498
- 'space-x': [{
1499
- 'space-x': scaleUnambiguousSpacing()
1500
- }],
1501
- /**
1502
- * Space Between X Reverse
1503
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
1504
- */
1505
- 'space-x-reverse': ['space-x-reverse'],
1506
- /**
1507
- * Space Between Y
1508
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
1509
- */
1510
- 'space-y': [{
1511
- 'space-y': scaleUnambiguousSpacing()
1512
- }],
1513
- /**
1514
- * Space Between Y Reverse
1515
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
1516
- */
1517
- 'space-y-reverse': ['space-y-reverse'],
1518
- // --------------
1519
- // --- Sizing ---
1520
- // --------------
1521
- /**
1522
- * Size
1523
- * @see https://tailwindcss.com/docs/width#setting-both-width-and-height
1524
- */
1525
- size: [{
1526
- size: scaleSizing()
1527
- }],
1528
- /**
1529
- * Width
1530
- * @see https://tailwindcss.com/docs/width
1531
- */
1532
- w: [{
1533
- w: [themeContainer, 'screen', ...scaleSizing()]
1534
- }],
1535
- /**
1536
- * Min-Width
1537
- * @see https://tailwindcss.com/docs/min-width
1538
- */
1539
- 'min-w': [{
1540
- 'min-w': [themeContainer, 'screen', /** Deprecated. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
1541
- 'none', ...scaleSizing()]
1542
- }],
1543
- /**
1544
- * Max-Width
1545
- * @see https://tailwindcss.com/docs/max-width
1546
- */
1547
- 'max-w': [{
1548
- 'max-w': [themeContainer, 'screen', 'none', /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
1549
- 'prose', /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
1550
- {
1551
- screen: [themeBreakpoint]
1552
- }, ...scaleSizing()]
1553
- }],
1554
- /**
1555
- * Height
1556
- * @see https://tailwindcss.com/docs/height
1557
- */
1558
- h: [{
1559
- h: ['screen', 'lh', ...scaleSizing()]
1560
- }],
1561
- /**
1562
- * Min-Height
1563
- * @see https://tailwindcss.com/docs/min-height
1564
- */
1565
- 'min-h': [{
1566
- 'min-h': ['screen', 'lh', 'none', ...scaleSizing()]
1567
- }],
1568
- /**
1569
- * Max-Height
1570
- * @see https://tailwindcss.com/docs/max-height
1571
- */
1572
- 'max-h': [{
1573
- 'max-h': ['screen', 'lh', ...scaleSizing()]
1574
- }],
1575
- // ------------------
1576
- // --- Typography ---
1577
- // ------------------
1578
- /**
1579
- * Font Size
1580
- * @see https://tailwindcss.com/docs/font-size
1581
- */
1582
- 'font-size': [{
1583
- text: ['base', themeText, isArbitraryVariableLength, isArbitraryLength]
1584
- }],
1585
- /**
1586
- * Font Smoothing
1587
- * @see https://tailwindcss.com/docs/font-smoothing
1588
- */
1589
- 'font-smoothing': ['antialiased', 'subpixel-antialiased'],
1590
- /**
1591
- * Font Style
1592
- * @see https://tailwindcss.com/docs/font-style
1593
- */
1594
- 'font-style': ['italic', 'not-italic'],
1595
- /**
1596
- * Font Weight
1597
- * @see https://tailwindcss.com/docs/font-weight
1598
- */
1599
- 'font-weight': [{
1600
- font: [themeFontWeight, isArbitraryVariable, isArbitraryNumber]
1601
- }],
1602
- /**
1603
- * Font Stretch
1604
- * @see https://tailwindcss.com/docs/font-stretch
1605
- */
1606
- 'font-stretch': [{
1607
- 'font-stretch': ['ultra-condensed', 'extra-condensed', 'condensed', 'semi-condensed', 'normal', 'semi-expanded', 'expanded', 'extra-expanded', 'ultra-expanded', isPercent, isArbitraryValue]
1608
- }],
1609
- /**
1610
- * Font Family
1611
- * @see https://tailwindcss.com/docs/font-family
1612
- */
1613
- 'font-family': [{
1614
- font: [isArbitraryVariableFamilyName, isArbitraryValue, themeFont]
1615
- }],
1616
- /**
1617
- * Font Variant Numeric
1618
- * @see https://tailwindcss.com/docs/font-variant-numeric
1619
- */
1620
- 'fvn-normal': ['normal-nums'],
1621
- /**
1622
- * Font Variant Numeric
1623
- * @see https://tailwindcss.com/docs/font-variant-numeric
1624
- */
1625
- 'fvn-ordinal': ['ordinal'],
1626
- /**
1627
- * Font Variant Numeric
1628
- * @see https://tailwindcss.com/docs/font-variant-numeric
1629
- */
1630
- 'fvn-slashed-zero': ['slashed-zero'],
1631
- /**
1632
- * Font Variant Numeric
1633
- * @see https://tailwindcss.com/docs/font-variant-numeric
1634
- */
1635
- 'fvn-figure': ['lining-nums', 'oldstyle-nums'],
1636
- /**
1637
- * Font Variant Numeric
1638
- * @see https://tailwindcss.com/docs/font-variant-numeric
1639
- */
1640
- 'fvn-spacing': ['proportional-nums', 'tabular-nums'],
1641
- /**
1642
- * Font Variant Numeric
1643
- * @see https://tailwindcss.com/docs/font-variant-numeric
1644
- */
1645
- 'fvn-fraction': ['diagonal-fractions', 'stacked-fractions'],
1646
- /**
1647
- * Letter Spacing
1648
- * @see https://tailwindcss.com/docs/letter-spacing
1649
- */
1650
- tracking: [{
1651
- tracking: [themeTracking, isArbitraryVariable, isArbitraryValue]
1652
- }],
1653
- /**
1654
- * Line Clamp
1655
- * @see https://tailwindcss.com/docs/line-clamp
1656
- */
1657
- 'line-clamp': [{
1658
- 'line-clamp': [isNumber, 'none', isArbitraryVariable, isArbitraryNumber]
1659
- }],
1660
- /**
1661
- * Line Height
1662
- * @see https://tailwindcss.com/docs/line-height
1663
- */
1664
- leading: [{
1665
- leading: [/** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
1666
- themeLeading, ...scaleUnambiguousSpacing()]
1667
- }],
1668
- /**
1669
- * List Style Image
1670
- * @see https://tailwindcss.com/docs/list-style-image
1671
- */
1672
- 'list-image': [{
1673
- 'list-image': ['none', isArbitraryVariable, isArbitraryValue]
1674
- }],
1675
- /**
1676
- * List Style Position
1677
- * @see https://tailwindcss.com/docs/list-style-position
1678
- */
1679
- 'list-style-position': [{
1680
- list: ['inside', 'outside']
1681
- }],
1682
- /**
1683
- * List Style Type
1684
- * @see https://tailwindcss.com/docs/list-style-type
1685
- */
1686
- 'list-style-type': [{
1687
- list: ['disc', 'decimal', 'none', isArbitraryVariable, isArbitraryValue]
1688
- }],
1689
- /**
1690
- * Text Alignment
1691
- * @see https://tailwindcss.com/docs/text-align
1692
- */
1693
- 'text-alignment': [{
1694
- text: ['left', 'center', 'right', 'justify', 'start', 'end']
1695
- }],
1696
- /**
1697
- * Placeholder Color
1698
- * @deprecated since Tailwind CSS v3.0.0
1699
- * @see https://v3.tailwindcss.com/docs/placeholder-color
1700
- */
1701
- 'placeholder-color': [{
1702
- placeholder: scaleColor()
1703
- }],
1704
- /**
1705
- * Text Color
1706
- * @see https://tailwindcss.com/docs/text-color
1707
- */
1708
- 'text-color': [{
1709
- text: scaleColor()
1710
- }],
1711
- /**
1712
- * Text Decoration
1713
- * @see https://tailwindcss.com/docs/text-decoration
1714
- */
1715
- 'text-decoration': ['underline', 'overline', 'line-through', 'no-underline'],
1716
- /**
1717
- * Text Decoration Style
1718
- * @see https://tailwindcss.com/docs/text-decoration-style
1719
- */
1720
- 'text-decoration-style': [{
1721
- decoration: [...scaleLineStyle(), 'wavy']
1722
- }],
1723
- /**
1724
- * Text Decoration Thickness
1725
- * @see https://tailwindcss.com/docs/text-decoration-thickness
1726
- */
1727
- 'text-decoration-thickness': [{
1728
- decoration: [isNumber, 'from-font', 'auto', isArbitraryVariable, isArbitraryLength]
1729
- }],
1730
- /**
1731
- * Text Decoration Color
1732
- * @see https://tailwindcss.com/docs/text-decoration-color
1733
- */
1734
- 'text-decoration-color': [{
1735
- decoration: scaleColor()
1736
- }],
1737
- /**
1738
- * Text Underline Offset
1739
- * @see https://tailwindcss.com/docs/text-underline-offset
1740
- */
1741
- 'underline-offset': [{
1742
- 'underline-offset': [isNumber, 'auto', isArbitraryVariable, isArbitraryValue]
1743
- }],
1744
- /**
1745
- * Text Transform
1746
- * @see https://tailwindcss.com/docs/text-transform
1747
- */
1748
- 'text-transform': ['uppercase', 'lowercase', 'capitalize', 'normal-case'],
1749
- /**
1750
- * Text Overflow
1751
- * @see https://tailwindcss.com/docs/text-overflow
1752
- */
1753
- 'text-overflow': ['truncate', 'text-ellipsis', 'text-clip'],
1754
- /**
1755
- * Text Wrap
1756
- * @see https://tailwindcss.com/docs/text-wrap
1757
- */
1758
- 'text-wrap': [{
1759
- text: ['wrap', 'nowrap', 'balance', 'pretty']
1760
- }],
1761
- /**
1762
- * Text Indent
1763
- * @see https://tailwindcss.com/docs/text-indent
1764
- */
1765
- indent: [{
1766
- indent: scaleUnambiguousSpacing()
1767
- }],
1768
- /**
1769
- * Vertical Alignment
1770
- * @see https://tailwindcss.com/docs/vertical-align
1771
- */
1772
- 'vertical-align': [{
1773
- align: ['baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom', 'sub', 'super', isArbitraryVariable, isArbitraryValue]
1774
- }],
1775
- /**
1776
- * Whitespace
1777
- * @see https://tailwindcss.com/docs/whitespace
1778
- */
1779
- whitespace: [{
1780
- whitespace: ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces']
1781
- }],
1782
- /**
1783
- * Word Break
1784
- * @see https://tailwindcss.com/docs/word-break
1785
- */
1786
- break: [{
1787
- break: ['normal', 'words', 'all', 'keep']
1788
- }],
1789
- /**
1790
- * Overflow Wrap
1791
- * @see https://tailwindcss.com/docs/overflow-wrap
1792
- */
1793
- wrap: [{
1794
- wrap: ['break-word', 'anywhere', 'normal']
1795
- }],
1796
- /**
1797
- * Hyphens
1798
- * @see https://tailwindcss.com/docs/hyphens
1799
- */
1800
- hyphens: [{
1801
- hyphens: ['none', 'manual', 'auto']
1802
- }],
1803
- /**
1804
- * Content
1805
- * @see https://tailwindcss.com/docs/content
1806
- */
1807
- content: [{
1808
- content: ['none', isArbitraryVariable, isArbitraryValue]
1809
- }],
1810
- // -------------------
1811
- // --- Backgrounds ---
1812
- // -------------------
1813
- /**
1814
- * Background Attachment
1815
- * @see https://tailwindcss.com/docs/background-attachment
1816
- */
1817
- 'bg-attachment': [{
1818
- bg: ['fixed', 'local', 'scroll']
1819
- }],
1820
- /**
1821
- * Background Clip
1822
- * @see https://tailwindcss.com/docs/background-clip
1823
- */
1824
- 'bg-clip': [{
1825
- 'bg-clip': ['border', 'padding', 'content', 'text']
1826
- }],
1827
- /**
1828
- * Background Origin
1829
- * @see https://tailwindcss.com/docs/background-origin
1830
- */
1831
- 'bg-origin': [{
1832
- 'bg-origin': ['border', 'padding', 'content']
1833
- }],
1834
- /**
1835
- * Background Position
1836
- * @see https://tailwindcss.com/docs/background-position
1837
- */
1838
- 'bg-position': [{
1839
- bg: scaleBgPosition()
1840
- }],
1841
- /**
1842
- * Background Repeat
1843
- * @see https://tailwindcss.com/docs/background-repeat
1844
- */
1845
- 'bg-repeat': [{
1846
- bg: scaleBgRepeat()
1847
- }],
1848
- /**
1849
- * Background Size
1850
- * @see https://tailwindcss.com/docs/background-size
1851
- */
1852
- 'bg-size': [{
1853
- bg: scaleBgSize()
1854
- }],
1855
- /**
1856
- * Background Image
1857
- * @see https://tailwindcss.com/docs/background-image
1858
- */
1859
- 'bg-image': [{
1860
- bg: ['none', {
1861
- linear: [{
1862
- to: ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl']
1863
- }, isInteger, isArbitraryVariable, isArbitraryValue],
1864
- radial: ['', isArbitraryVariable, isArbitraryValue],
1865
- conic: [isInteger, isArbitraryVariable, isArbitraryValue]
1866
- }, isArbitraryVariableImage, isArbitraryImage]
1867
- }],
1868
- /**
1869
- * Background Color
1870
- * @see https://tailwindcss.com/docs/background-color
1871
- */
1872
- 'bg-color': [{
1873
- bg: scaleColor()
1874
- }],
1875
- /**
1876
- * Gradient Color Stops From Position
1877
- * @see https://tailwindcss.com/docs/gradient-color-stops
1878
- */
1879
- 'gradient-from-pos': [{
1880
- from: scaleGradientStopPosition()
1881
- }],
1882
- /**
1883
- * Gradient Color Stops Via Position
1884
- * @see https://tailwindcss.com/docs/gradient-color-stops
1885
- */
1886
- 'gradient-via-pos': [{
1887
- via: scaleGradientStopPosition()
1888
- }],
1889
- /**
1890
- * Gradient Color Stops To Position
1891
- * @see https://tailwindcss.com/docs/gradient-color-stops
1892
- */
1893
- 'gradient-to-pos': [{
1894
- to: scaleGradientStopPosition()
1895
- }],
1896
- /**
1897
- * Gradient Color Stops From
1898
- * @see https://tailwindcss.com/docs/gradient-color-stops
1899
- */
1900
- 'gradient-from': [{
1901
- from: scaleColor()
1902
- }],
1903
- /**
1904
- * Gradient Color Stops Via
1905
- * @see https://tailwindcss.com/docs/gradient-color-stops
1906
- */
1907
- 'gradient-via': [{
1908
- via: scaleColor()
1909
- }],
1910
- /**
1911
- * Gradient Color Stops To
1912
- * @see https://tailwindcss.com/docs/gradient-color-stops
1913
- */
1914
- 'gradient-to': [{
1915
- to: scaleColor()
1916
- }],
1917
- // ---------------
1918
- // --- Borders ---
1919
- // ---------------
1920
- /**
1921
- * Border Radius
1922
- * @see https://tailwindcss.com/docs/border-radius
1923
- */
1924
- rounded: [{
1925
- rounded: scaleRadius()
1926
- }],
1927
- /**
1928
- * Border Radius Start
1929
- * @see https://tailwindcss.com/docs/border-radius
1930
- */
1931
- 'rounded-s': [{
1932
- 'rounded-s': scaleRadius()
1933
- }],
1934
- /**
1935
- * Border Radius End
1936
- * @see https://tailwindcss.com/docs/border-radius
1937
- */
1938
- 'rounded-e': [{
1939
- 'rounded-e': scaleRadius()
1940
- }],
1941
- /**
1942
- * Border Radius Top
1943
- * @see https://tailwindcss.com/docs/border-radius
1944
- */
1945
- 'rounded-t': [{
1946
- 'rounded-t': scaleRadius()
1947
- }],
1948
- /**
1949
- * Border Radius Right
1950
- * @see https://tailwindcss.com/docs/border-radius
1951
- */
1952
- 'rounded-r': [{
1953
- 'rounded-r': scaleRadius()
1954
- }],
1955
- /**
1956
- * Border Radius Bottom
1957
- * @see https://tailwindcss.com/docs/border-radius
1958
- */
1959
- 'rounded-b': [{
1960
- 'rounded-b': scaleRadius()
1961
- }],
1962
- /**
1963
- * Border Radius Left
1964
- * @see https://tailwindcss.com/docs/border-radius
1965
- */
1966
- 'rounded-l': [{
1967
- 'rounded-l': scaleRadius()
1968
- }],
1969
- /**
1970
- * Border Radius Start Start
1971
- * @see https://tailwindcss.com/docs/border-radius
1972
- */
1973
- 'rounded-ss': [{
1974
- 'rounded-ss': scaleRadius()
1975
- }],
1976
- /**
1977
- * Border Radius Start End
1978
- * @see https://tailwindcss.com/docs/border-radius
1979
- */
1980
- 'rounded-se': [{
1981
- 'rounded-se': scaleRadius()
1982
- }],
1983
- /**
1984
- * Border Radius End End
1985
- * @see https://tailwindcss.com/docs/border-radius
1986
- */
1987
- 'rounded-ee': [{
1988
- 'rounded-ee': scaleRadius()
1989
- }],
1990
- /**
1991
- * Border Radius End Start
1992
- * @see https://tailwindcss.com/docs/border-radius
1993
- */
1994
- 'rounded-es': [{
1995
- 'rounded-es': scaleRadius()
1996
- }],
1997
- /**
1998
- * Border Radius Top Left
1999
- * @see https://tailwindcss.com/docs/border-radius
2000
- */
2001
- 'rounded-tl': [{
2002
- 'rounded-tl': scaleRadius()
2003
- }],
2004
- /**
2005
- * Border Radius Top Right
2006
- * @see https://tailwindcss.com/docs/border-radius
2007
- */
2008
- 'rounded-tr': [{
2009
- 'rounded-tr': scaleRadius()
2010
- }],
2011
- /**
2012
- * Border Radius Bottom Right
2013
- * @see https://tailwindcss.com/docs/border-radius
2014
- */
2015
- 'rounded-br': [{
2016
- 'rounded-br': scaleRadius()
2017
- }],
2018
- /**
2019
- * Border Radius Bottom Left
2020
- * @see https://tailwindcss.com/docs/border-radius
2021
- */
2022
- 'rounded-bl': [{
2023
- 'rounded-bl': scaleRadius()
2024
- }],
2025
- /**
2026
- * Border Width
2027
- * @see https://tailwindcss.com/docs/border-width
2028
- */
2029
- 'border-w': [{
2030
- border: scaleBorderWidth()
2031
- }],
2032
- /**
2033
- * Border Width X
2034
- * @see https://tailwindcss.com/docs/border-width
2035
- */
2036
- 'border-w-x': [{
2037
- 'border-x': scaleBorderWidth()
2038
- }],
2039
- /**
2040
- * Border Width Y
2041
- * @see https://tailwindcss.com/docs/border-width
2042
- */
2043
- 'border-w-y': [{
2044
- 'border-y': scaleBorderWidth()
2045
- }],
2046
- /**
2047
- * Border Width Start
2048
- * @see https://tailwindcss.com/docs/border-width
2049
- */
2050
- 'border-w-s': [{
2051
- 'border-s': scaleBorderWidth()
2052
- }],
2053
- /**
2054
- * Border Width End
2055
- * @see https://tailwindcss.com/docs/border-width
2056
- */
2057
- 'border-w-e': [{
2058
- 'border-e': scaleBorderWidth()
2059
- }],
2060
- /**
2061
- * Border Width Top
2062
- * @see https://tailwindcss.com/docs/border-width
2063
- */
2064
- 'border-w-t': [{
2065
- 'border-t': scaleBorderWidth()
2066
- }],
2067
- /**
2068
- * Border Width Right
2069
- * @see https://tailwindcss.com/docs/border-width
2070
- */
2071
- 'border-w-r': [{
2072
- 'border-r': scaleBorderWidth()
2073
- }],
2074
- /**
2075
- * Border Width Bottom
2076
- * @see https://tailwindcss.com/docs/border-width
2077
- */
2078
- 'border-w-b': [{
2079
- 'border-b': scaleBorderWidth()
2080
- }],
2081
- /**
2082
- * Border Width Left
2083
- * @see https://tailwindcss.com/docs/border-width
2084
- */
2085
- 'border-w-l': [{
2086
- 'border-l': scaleBorderWidth()
2087
- }],
2088
- /**
2089
- * Divide Width X
2090
- * @see https://tailwindcss.com/docs/border-width#between-children
2091
- */
2092
- 'divide-x': [{
2093
- 'divide-x': scaleBorderWidth()
2094
- }],
2095
- /**
2096
- * Divide Width X Reverse
2097
- * @see https://tailwindcss.com/docs/border-width#between-children
2098
- */
2099
- 'divide-x-reverse': ['divide-x-reverse'],
2100
- /**
2101
- * Divide Width Y
2102
- * @see https://tailwindcss.com/docs/border-width#between-children
2103
- */
2104
- 'divide-y': [{
2105
- 'divide-y': scaleBorderWidth()
2106
- }],
2107
- /**
2108
- * Divide Width Y Reverse
2109
- * @see https://tailwindcss.com/docs/border-width#between-children
2110
- */
2111
- 'divide-y-reverse': ['divide-y-reverse'],
2112
- /**
2113
- * Border Style
2114
- * @see https://tailwindcss.com/docs/border-style
2115
- */
2116
- 'border-style': [{
2117
- border: [...scaleLineStyle(), 'hidden', 'none']
2118
- }],
2119
- /**
2120
- * Divide Style
2121
- * @see https://tailwindcss.com/docs/border-style#setting-the-divider-style
2122
- */
2123
- 'divide-style': [{
2124
- divide: [...scaleLineStyle(), 'hidden', 'none']
2125
- }],
2126
- /**
2127
- * Border Color
2128
- * @see https://tailwindcss.com/docs/border-color
2129
- */
2130
- 'border-color': [{
2131
- border: scaleColor()
2132
- }],
2133
- /**
2134
- * Border Color X
2135
- * @see https://tailwindcss.com/docs/border-color
2136
- */
2137
- 'border-color-x': [{
2138
- 'border-x': scaleColor()
2139
- }],
2140
- /**
2141
- * Border Color Y
2142
- * @see https://tailwindcss.com/docs/border-color
2143
- */
2144
- 'border-color-y': [{
2145
- 'border-y': scaleColor()
2146
- }],
2147
- /**
2148
- * Border Color S
2149
- * @see https://tailwindcss.com/docs/border-color
2150
- */
2151
- 'border-color-s': [{
2152
- 'border-s': scaleColor()
2153
- }],
2154
- /**
2155
- * Border Color E
2156
- * @see https://tailwindcss.com/docs/border-color
2157
- */
2158
- 'border-color-e': [{
2159
- 'border-e': scaleColor()
2160
- }],
2161
- /**
2162
- * Border Color Top
2163
- * @see https://tailwindcss.com/docs/border-color
2164
- */
2165
- 'border-color-t': [{
2166
- 'border-t': scaleColor()
2167
- }],
2168
- /**
2169
- * Border Color Right
2170
- * @see https://tailwindcss.com/docs/border-color
2171
- */
2172
- 'border-color-r': [{
2173
- 'border-r': scaleColor()
2174
- }],
2175
- /**
2176
- * Border Color Bottom
2177
- * @see https://tailwindcss.com/docs/border-color
2178
- */
2179
- 'border-color-b': [{
2180
- 'border-b': scaleColor()
2181
- }],
2182
- /**
2183
- * Border Color Left
2184
- * @see https://tailwindcss.com/docs/border-color
2185
- */
2186
- 'border-color-l': [{
2187
- 'border-l': scaleColor()
2188
- }],
2189
- /**
2190
- * Divide Color
2191
- * @see https://tailwindcss.com/docs/divide-color
2192
- */
2193
- 'divide-color': [{
2194
- divide: scaleColor()
2195
- }],
2196
- /**
2197
- * Outline Style
2198
- * @see https://tailwindcss.com/docs/outline-style
2199
- */
2200
- 'outline-style': [{
2201
- outline: [...scaleLineStyle(), 'none', 'hidden']
2202
- }],
2203
- /**
2204
- * Outline Offset
2205
- * @see https://tailwindcss.com/docs/outline-offset
2206
- */
2207
- 'outline-offset': [{
2208
- 'outline-offset': [isNumber, isArbitraryVariable, isArbitraryValue]
2209
- }],
2210
- /**
2211
- * Outline Width
2212
- * @see https://tailwindcss.com/docs/outline-width
2213
- */
2214
- 'outline-w': [{
2215
- outline: ['', isNumber, isArbitraryVariableLength, isArbitraryLength]
2216
- }],
2217
- /**
2218
- * Outline Color
2219
- * @see https://tailwindcss.com/docs/outline-color
2220
- */
2221
- 'outline-color': [{
2222
- outline: scaleColor()
2223
- }],
2224
- // ---------------
2225
- // --- Effects ---
2226
- // ---------------
2227
- /**
2228
- * Box Shadow
2229
- * @see https://tailwindcss.com/docs/box-shadow
2230
- */
2231
- shadow: [{
2232
- shadow: [
2233
- // Deprecated since Tailwind CSS v4.0.0
2234
- '', 'none', themeShadow, isArbitraryVariableShadow, isArbitraryShadow]
2235
- }],
2236
- /**
2237
- * Box Shadow Color
2238
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-shadow-color
2239
- */
2240
- 'shadow-color': [{
2241
- shadow: scaleColor()
2242
- }],
2243
- /**
2244
- * Inset Box Shadow
2245
- * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-shadow
2246
- */
2247
- 'inset-shadow': [{
2248
- 'inset-shadow': ['none', themeInsetShadow, isArbitraryVariableShadow, isArbitraryShadow]
2249
- }],
2250
- /**
2251
- * Inset Box Shadow Color
2252
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-shadow-color
2253
- */
2254
- 'inset-shadow-color': [{
2255
- 'inset-shadow': scaleColor()
2256
- }],
2257
- /**
2258
- * Ring Width
2259
- * @see https://tailwindcss.com/docs/box-shadow#adding-a-ring
2260
- */
2261
- 'ring-w': [{
2262
- ring: scaleBorderWidth()
2263
- }],
2264
- /**
2265
- * Ring Width Inset
2266
- * @see https://v3.tailwindcss.com/docs/ring-width#inset-rings
2267
- * @deprecated since Tailwind CSS v4.0.0
2268
- * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
2269
- */
2270
- 'ring-w-inset': ['ring-inset'],
2271
- /**
2272
- * Ring Color
2273
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-ring-color
2274
- */
2275
- 'ring-color': [{
2276
- ring: scaleColor()
2277
- }],
2278
- /**
2279
- * Ring Offset Width
2280
- * @see https://v3.tailwindcss.com/docs/ring-offset-width
2281
- * @deprecated since Tailwind CSS v4.0.0
2282
- * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
2283
- */
2284
- 'ring-offset-w': [{
2285
- 'ring-offset': [isNumber, isArbitraryLength]
2286
- }],
2287
- /**
2288
- * Ring Offset Color
2289
- * @see https://v3.tailwindcss.com/docs/ring-offset-color
2290
- * @deprecated since Tailwind CSS v4.0.0
2291
- * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
2292
- */
2293
- 'ring-offset-color': [{
2294
- 'ring-offset': scaleColor()
2295
- }],
2296
- /**
2297
- * Inset Ring Width
2298
- * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-ring
2299
- */
2300
- 'inset-ring-w': [{
2301
- 'inset-ring': scaleBorderWidth()
2302
- }],
2303
- /**
2304
- * Inset Ring Color
2305
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-ring-color
2306
- */
2307
- 'inset-ring-color': [{
2308
- 'inset-ring': scaleColor()
2309
- }],
2310
- /**
2311
- * Text Shadow
2312
- * @see https://tailwindcss.com/docs/text-shadow
2313
- */
2314
- 'text-shadow': [{
2315
- 'text-shadow': ['none', themeTextShadow, isArbitraryVariableShadow, isArbitraryShadow]
2316
- }],
2317
- /**
2318
- * Text Shadow Color
2319
- * @see https://tailwindcss.com/docs/text-shadow#setting-the-shadow-color
2320
- */
2321
- 'text-shadow-color': [{
2322
- 'text-shadow': scaleColor()
2323
- }],
2324
- /**
2325
- * Opacity
2326
- * @see https://tailwindcss.com/docs/opacity
2327
- */
2328
- opacity: [{
2329
- opacity: [isNumber, isArbitraryVariable, isArbitraryValue]
2330
- }],
2331
- /**
2332
- * Mix Blend Mode
2333
- * @see https://tailwindcss.com/docs/mix-blend-mode
2334
- */
2335
- 'mix-blend': [{
2336
- 'mix-blend': [...scaleBlendMode(), 'plus-darker', 'plus-lighter']
2337
- }],
2338
- /**
2339
- * Background Blend Mode
2340
- * @see https://tailwindcss.com/docs/background-blend-mode
2341
- */
2342
- 'bg-blend': [{
2343
- 'bg-blend': scaleBlendMode()
2344
- }],
2345
- /**
2346
- * Mask Clip
2347
- * @see https://tailwindcss.com/docs/mask-clip
2348
- */
2349
- 'mask-clip': [{
2350
- 'mask-clip': ['border', 'padding', 'content', 'fill', 'stroke', 'view']
2351
- }, 'mask-no-clip'],
2352
- /**
2353
- * Mask Composite
2354
- * @see https://tailwindcss.com/docs/mask-composite
2355
- */
2356
- 'mask-composite': [{
2357
- mask: ['add', 'subtract', 'intersect', 'exclude']
2358
- }],
2359
- /**
2360
- * Mask Image
2361
- * @see https://tailwindcss.com/docs/mask-image
2362
- */
2363
- 'mask-image-linear-pos': [{
2364
- 'mask-linear': [isNumber]
2365
- }],
2366
- 'mask-image-linear-from-pos': [{
2367
- 'mask-linear-from': scaleMaskImagePosition()
2368
- }],
2369
- 'mask-image-linear-to-pos': [{
2370
- 'mask-linear-to': scaleMaskImagePosition()
2371
- }],
2372
- 'mask-image-linear-from-color': [{
2373
- 'mask-linear-from': scaleColor()
2374
- }],
2375
- 'mask-image-linear-to-color': [{
2376
- 'mask-linear-to': scaleColor()
2377
- }],
2378
- 'mask-image-t-from-pos': [{
2379
- 'mask-t-from': scaleMaskImagePosition()
2380
- }],
2381
- 'mask-image-t-to-pos': [{
2382
- 'mask-t-to': scaleMaskImagePosition()
2383
- }],
2384
- 'mask-image-t-from-color': [{
2385
- 'mask-t-from': scaleColor()
2386
- }],
2387
- 'mask-image-t-to-color': [{
2388
- 'mask-t-to': scaleColor()
2389
- }],
2390
- 'mask-image-r-from-pos': [{
2391
- 'mask-r-from': scaleMaskImagePosition()
2392
- }],
2393
- 'mask-image-r-to-pos': [{
2394
- 'mask-r-to': scaleMaskImagePosition()
2395
- }],
2396
- 'mask-image-r-from-color': [{
2397
- 'mask-r-from': scaleColor()
2398
- }],
2399
- 'mask-image-r-to-color': [{
2400
- 'mask-r-to': scaleColor()
2401
- }],
2402
- 'mask-image-b-from-pos': [{
2403
- 'mask-b-from': scaleMaskImagePosition()
2404
- }],
2405
- 'mask-image-b-to-pos': [{
2406
- 'mask-b-to': scaleMaskImagePosition()
2407
- }],
2408
- 'mask-image-b-from-color': [{
2409
- 'mask-b-from': scaleColor()
2410
- }],
2411
- 'mask-image-b-to-color': [{
2412
- 'mask-b-to': scaleColor()
2413
- }],
2414
- 'mask-image-l-from-pos': [{
2415
- 'mask-l-from': scaleMaskImagePosition()
2416
- }],
2417
- 'mask-image-l-to-pos': [{
2418
- 'mask-l-to': scaleMaskImagePosition()
2419
- }],
2420
- 'mask-image-l-from-color': [{
2421
- 'mask-l-from': scaleColor()
2422
- }],
2423
- 'mask-image-l-to-color': [{
2424
- 'mask-l-to': scaleColor()
2425
- }],
2426
- 'mask-image-x-from-pos': [{
2427
- 'mask-x-from': scaleMaskImagePosition()
2428
- }],
2429
- 'mask-image-x-to-pos': [{
2430
- 'mask-x-to': scaleMaskImagePosition()
2431
- }],
2432
- 'mask-image-x-from-color': [{
2433
- 'mask-x-from': scaleColor()
2434
- }],
2435
- 'mask-image-x-to-color': [{
2436
- 'mask-x-to': scaleColor()
2437
- }],
2438
- 'mask-image-y-from-pos': [{
2439
- 'mask-y-from': scaleMaskImagePosition()
2440
- }],
2441
- 'mask-image-y-to-pos': [{
2442
- 'mask-y-to': scaleMaskImagePosition()
2443
- }],
2444
- 'mask-image-y-from-color': [{
2445
- 'mask-y-from': scaleColor()
2446
- }],
2447
- 'mask-image-y-to-color': [{
2448
- 'mask-y-to': scaleColor()
2449
- }],
2450
- 'mask-image-radial': [{
2451
- 'mask-radial': [isArbitraryVariable, isArbitraryValue]
2452
- }],
2453
- 'mask-image-radial-from-pos': [{
2454
- 'mask-radial-from': scaleMaskImagePosition()
2455
- }],
2456
- 'mask-image-radial-to-pos': [{
2457
- 'mask-radial-to': scaleMaskImagePosition()
2458
- }],
2459
- 'mask-image-radial-from-color': [{
2460
- 'mask-radial-from': scaleColor()
2461
- }],
2462
- 'mask-image-radial-to-color': [{
2463
- 'mask-radial-to': scaleColor()
2464
- }],
2465
- 'mask-image-radial-shape': [{
2466
- 'mask-radial': ['circle', 'ellipse']
2467
- }],
2468
- 'mask-image-radial-size': [{
2469
- 'mask-radial': [{
2470
- closest: ['side', 'corner'],
2471
- farthest: ['side', 'corner']
2472
- }]
2473
- }],
2474
- 'mask-image-radial-pos': [{
2475
- 'mask-radial-at': scalePosition()
2476
- }],
2477
- 'mask-image-conic-pos': [{
2478
- 'mask-conic': [isNumber]
2479
- }],
2480
- 'mask-image-conic-from-pos': [{
2481
- 'mask-conic-from': scaleMaskImagePosition()
2482
- }],
2483
- 'mask-image-conic-to-pos': [{
2484
- 'mask-conic-to': scaleMaskImagePosition()
2485
- }],
2486
- 'mask-image-conic-from-color': [{
2487
- 'mask-conic-from': scaleColor()
2488
- }],
2489
- 'mask-image-conic-to-color': [{
2490
- 'mask-conic-to': scaleColor()
2491
- }],
2492
- /**
2493
- * Mask Mode
2494
- * @see https://tailwindcss.com/docs/mask-mode
2495
- */
2496
- 'mask-mode': [{
2497
- mask: ['alpha', 'luminance', 'match']
2498
- }],
2499
- /**
2500
- * Mask Origin
2501
- * @see https://tailwindcss.com/docs/mask-origin
2502
- */
2503
- 'mask-origin': [{
2504
- 'mask-origin': ['border', 'padding', 'content', 'fill', 'stroke', 'view']
2505
- }],
2506
- /**
2507
- * Mask Position
2508
- * @see https://tailwindcss.com/docs/mask-position
2509
- */
2510
- 'mask-position': [{
2511
- mask: scaleBgPosition()
2512
- }],
2513
- /**
2514
- * Mask Repeat
2515
- * @see https://tailwindcss.com/docs/mask-repeat
2516
- */
2517
- 'mask-repeat': [{
2518
- mask: scaleBgRepeat()
2519
- }],
2520
- /**
2521
- * Mask Size
2522
- * @see https://tailwindcss.com/docs/mask-size
2523
- */
2524
- 'mask-size': [{
2525
- mask: scaleBgSize()
2526
- }],
2527
- /**
2528
- * Mask Type
2529
- * @see https://tailwindcss.com/docs/mask-type
2530
- */
2531
- 'mask-type': [{
2532
- 'mask-type': ['alpha', 'luminance']
2533
- }],
2534
- /**
2535
- * Mask Image
2536
- * @see https://tailwindcss.com/docs/mask-image
2537
- */
2538
- 'mask-image': [{
2539
- mask: ['none', isArbitraryVariable, isArbitraryValue]
2540
- }],
2541
- // ---------------
2542
- // --- Filters ---
2543
- // ---------------
2544
- /**
2545
- * Filter
2546
- * @see https://tailwindcss.com/docs/filter
2547
- */
2548
- filter: [{
2549
- filter: [
2550
- // Deprecated since Tailwind CSS v3.0.0
2551
- '', 'none', isArbitraryVariable, isArbitraryValue]
2552
- }],
2553
- /**
2554
- * Blur
2555
- * @see https://tailwindcss.com/docs/blur
2556
- */
2557
- blur: [{
2558
- blur: scaleBlur()
2559
- }],
2560
- /**
2561
- * Brightness
2562
- * @see https://tailwindcss.com/docs/brightness
2563
- */
2564
- brightness: [{
2565
- brightness: [isNumber, isArbitraryVariable, isArbitraryValue]
2566
- }],
2567
- /**
2568
- * Contrast
2569
- * @see https://tailwindcss.com/docs/contrast
2570
- */
2571
- contrast: [{
2572
- contrast: [isNumber, isArbitraryVariable, isArbitraryValue]
2573
- }],
2574
- /**
2575
- * Drop Shadow
2576
- * @see https://tailwindcss.com/docs/drop-shadow
2577
- */
2578
- 'drop-shadow': [{
2579
- 'drop-shadow': [
2580
- // Deprecated since Tailwind CSS v4.0.0
2581
- '', 'none', themeDropShadow, isArbitraryVariableShadow, isArbitraryShadow]
2582
- }],
2583
- /**
2584
- * Drop Shadow Color
2585
- * @see https://tailwindcss.com/docs/filter-drop-shadow#setting-the-shadow-color
2586
- */
2587
- 'drop-shadow-color': [{
2588
- 'drop-shadow': scaleColor()
2589
- }],
2590
- /**
2591
- * Grayscale
2592
- * @see https://tailwindcss.com/docs/grayscale
2593
- */
2594
- grayscale: [{
2595
- grayscale: ['', isNumber, isArbitraryVariable, isArbitraryValue]
2596
- }],
2597
- /**
2598
- * Hue Rotate
2599
- * @see https://tailwindcss.com/docs/hue-rotate
2600
- */
2601
- 'hue-rotate': [{
2602
- 'hue-rotate': [isNumber, isArbitraryVariable, isArbitraryValue]
2603
- }],
2604
- /**
2605
- * Invert
2606
- * @see https://tailwindcss.com/docs/invert
2607
- */
2608
- invert: [{
2609
- invert: ['', isNumber, isArbitraryVariable, isArbitraryValue]
2610
- }],
2611
- /**
2612
- * Saturate
2613
- * @see https://tailwindcss.com/docs/saturate
2614
- */
2615
- saturate: [{
2616
- saturate: [isNumber, isArbitraryVariable, isArbitraryValue]
2617
- }],
2618
- /**
2619
- * Sepia
2620
- * @see https://tailwindcss.com/docs/sepia
2621
- */
2622
- sepia: [{
2623
- sepia: ['', isNumber, isArbitraryVariable, isArbitraryValue]
2624
- }],
2625
- /**
2626
- * Backdrop Filter
2627
- * @see https://tailwindcss.com/docs/backdrop-filter
2628
- */
2629
- 'backdrop-filter': [{
2630
- 'backdrop-filter': [
2631
- // Deprecated since Tailwind CSS v3.0.0
2632
- '', 'none', isArbitraryVariable, isArbitraryValue]
2633
- }],
2634
- /**
2635
- * Backdrop Blur
2636
- * @see https://tailwindcss.com/docs/backdrop-blur
2637
- */
2638
- 'backdrop-blur': [{
2639
- 'backdrop-blur': scaleBlur()
2640
- }],
2641
- /**
2642
- * Backdrop Brightness
2643
- * @see https://tailwindcss.com/docs/backdrop-brightness
2644
- */
2645
- 'backdrop-brightness': [{
2646
- 'backdrop-brightness': [isNumber, isArbitraryVariable, isArbitraryValue]
2647
- }],
2648
- /**
2649
- * Backdrop Contrast
2650
- * @see https://tailwindcss.com/docs/backdrop-contrast
2651
- */
2652
- 'backdrop-contrast': [{
2653
- 'backdrop-contrast': [isNumber, isArbitraryVariable, isArbitraryValue]
2654
- }],
2655
- /**
2656
- * Backdrop Grayscale
2657
- * @see https://tailwindcss.com/docs/backdrop-grayscale
2658
- */
2659
- 'backdrop-grayscale': [{
2660
- 'backdrop-grayscale': ['', isNumber, isArbitraryVariable, isArbitraryValue]
2661
- }],
2662
- /**
2663
- * Backdrop Hue Rotate
2664
- * @see https://tailwindcss.com/docs/backdrop-hue-rotate
2665
- */
2666
- 'backdrop-hue-rotate': [{
2667
- 'backdrop-hue-rotate': [isNumber, isArbitraryVariable, isArbitraryValue]
2668
- }],
2669
- /**
2670
- * Backdrop Invert
2671
- * @see https://tailwindcss.com/docs/backdrop-invert
2672
- */
2673
- 'backdrop-invert': [{
2674
- 'backdrop-invert': ['', isNumber, isArbitraryVariable, isArbitraryValue]
2675
- }],
2676
- /**
2677
- * Backdrop Opacity
2678
- * @see https://tailwindcss.com/docs/backdrop-opacity
2679
- */
2680
- 'backdrop-opacity': [{
2681
- 'backdrop-opacity': [isNumber, isArbitraryVariable, isArbitraryValue]
2682
- }],
2683
- /**
2684
- * Backdrop Saturate
2685
- * @see https://tailwindcss.com/docs/backdrop-saturate
2686
- */
2687
- 'backdrop-saturate': [{
2688
- 'backdrop-saturate': [isNumber, isArbitraryVariable, isArbitraryValue]
2689
- }],
2690
- /**
2691
- * Backdrop Sepia
2692
- * @see https://tailwindcss.com/docs/backdrop-sepia
2693
- */
2694
- 'backdrop-sepia': [{
2695
- 'backdrop-sepia': ['', isNumber, isArbitraryVariable, isArbitraryValue]
2696
- }],
2697
- // --------------
2698
- // --- Tables ---
2699
- // --------------
2700
- /**
2701
- * Border Collapse
2702
- * @see https://tailwindcss.com/docs/border-collapse
2703
- */
2704
- 'border-collapse': [{
2705
- border: ['collapse', 'separate']
2706
- }],
2707
- /**
2708
- * Border Spacing
2709
- * @see https://tailwindcss.com/docs/border-spacing
2710
- */
2711
- 'border-spacing': [{
2712
- 'border-spacing': scaleUnambiguousSpacing()
2713
- }],
2714
- /**
2715
- * Border Spacing X
2716
- * @see https://tailwindcss.com/docs/border-spacing
2717
- */
2718
- 'border-spacing-x': [{
2719
- 'border-spacing-x': scaleUnambiguousSpacing()
2720
- }],
2721
- /**
2722
- * Border Spacing Y
2723
- * @see https://tailwindcss.com/docs/border-spacing
2724
- */
2725
- 'border-spacing-y': [{
2726
- 'border-spacing-y': scaleUnambiguousSpacing()
2727
- }],
2728
- /**
2729
- * Table Layout
2730
- * @see https://tailwindcss.com/docs/table-layout
2731
- */
2732
- 'table-layout': [{
2733
- table: ['auto', 'fixed']
2734
- }],
2735
- /**
2736
- * Caption Side
2737
- * @see https://tailwindcss.com/docs/caption-side
2738
- */
2739
- caption: [{
2740
- caption: ['top', 'bottom']
2741
- }],
2742
- // ---------------------------------
2743
- // --- Transitions and Animation ---
2744
- // ---------------------------------
2745
- /**
2746
- * Transition Property
2747
- * @see https://tailwindcss.com/docs/transition-property
2748
- */
2749
- transition: [{
2750
- transition: ['', 'all', 'colors', 'opacity', 'shadow', 'transform', 'none', isArbitraryVariable, isArbitraryValue]
2751
- }],
2752
- /**
2753
- * Transition Behavior
2754
- * @see https://tailwindcss.com/docs/transition-behavior
2755
- */
2756
- 'transition-behavior': [{
2757
- transition: ['normal', 'discrete']
2758
- }],
2759
- /**
2760
- * Transition Duration
2761
- * @see https://tailwindcss.com/docs/transition-duration
2762
- */
2763
- duration: [{
2764
- duration: [isNumber, 'initial', isArbitraryVariable, isArbitraryValue]
2765
- }],
2766
- /**
2767
- * Transition Timing Function
2768
- * @see https://tailwindcss.com/docs/transition-timing-function
2769
- */
2770
- ease: [{
2771
- ease: ['linear', 'initial', themeEase, isArbitraryVariable, isArbitraryValue]
2772
- }],
2773
- /**
2774
- * Transition Delay
2775
- * @see https://tailwindcss.com/docs/transition-delay
2776
- */
2777
- delay: [{
2778
- delay: [isNumber, isArbitraryVariable, isArbitraryValue]
2779
- }],
2780
- /**
2781
- * Animation
2782
- * @see https://tailwindcss.com/docs/animation
2783
- */
2784
- animate: [{
2785
- animate: ['none', themeAnimate, isArbitraryVariable, isArbitraryValue]
2786
- }],
2787
- // ------------------
2788
- // --- Transforms ---
2789
- // ------------------
2790
- /**
2791
- * Backface Visibility
2792
- * @see https://tailwindcss.com/docs/backface-visibility
2793
- */
2794
- backface: [{
2795
- backface: ['hidden', 'visible']
2796
- }],
2797
- /**
2798
- * Perspective
2799
- * @see https://tailwindcss.com/docs/perspective
2800
- */
2801
- perspective: [{
2802
- perspective: [themePerspective, isArbitraryVariable, isArbitraryValue]
2803
- }],
2804
- /**
2805
- * Perspective Origin
2806
- * @see https://tailwindcss.com/docs/perspective-origin
2807
- */
2808
- 'perspective-origin': [{
2809
- 'perspective-origin': scalePositionWithArbitrary()
2810
- }],
2811
- /**
2812
- * Rotate
2813
- * @see https://tailwindcss.com/docs/rotate
2814
- */
2815
- rotate: [{
2816
- rotate: scaleRotate()
2817
- }],
2818
- /**
2819
- * Rotate X
2820
- * @see https://tailwindcss.com/docs/rotate
2821
- */
2822
- 'rotate-x': [{
2823
- 'rotate-x': scaleRotate()
2824
- }],
2825
- /**
2826
- * Rotate Y
2827
- * @see https://tailwindcss.com/docs/rotate
2828
- */
2829
- 'rotate-y': [{
2830
- 'rotate-y': scaleRotate()
2831
- }],
2832
- /**
2833
- * Rotate Z
2834
- * @see https://tailwindcss.com/docs/rotate
2835
- */
2836
- 'rotate-z': [{
2837
- 'rotate-z': scaleRotate()
2838
- }],
2839
- /**
2840
- * Scale
2841
- * @see https://tailwindcss.com/docs/scale
2842
- */
2843
- scale: [{
2844
- scale: scaleScale()
2845
- }],
2846
- /**
2847
- * Scale X
2848
- * @see https://tailwindcss.com/docs/scale
2849
- */
2850
- 'scale-x': [{
2851
- 'scale-x': scaleScale()
2852
- }],
2853
- /**
2854
- * Scale Y
2855
- * @see https://tailwindcss.com/docs/scale
2856
- */
2857
- 'scale-y': [{
2858
- 'scale-y': scaleScale()
2859
- }],
2860
- /**
2861
- * Scale Z
2862
- * @see https://tailwindcss.com/docs/scale
2863
- */
2864
- 'scale-z': [{
2865
- 'scale-z': scaleScale()
2866
- }],
2867
- /**
2868
- * Scale 3D
2869
- * @see https://tailwindcss.com/docs/scale
2870
- */
2871
- 'scale-3d': ['scale-3d'],
2872
- /**
2873
- * Skew
2874
- * @see https://tailwindcss.com/docs/skew
2875
- */
2876
- skew: [{
2877
- skew: scaleSkew()
2878
- }],
2879
- /**
2880
- * Skew X
2881
- * @see https://tailwindcss.com/docs/skew
2882
- */
2883
- 'skew-x': [{
2884
- 'skew-x': scaleSkew()
2885
- }],
2886
- /**
2887
- * Skew Y
2888
- * @see https://tailwindcss.com/docs/skew
2889
- */
2890
- 'skew-y': [{
2891
- 'skew-y': scaleSkew()
2892
- }],
2893
- /**
2894
- * Transform
2895
- * @see https://tailwindcss.com/docs/transform
2896
- */
2897
- transform: [{
2898
- transform: [isArbitraryVariable, isArbitraryValue, '', 'none', 'gpu', 'cpu']
2899
- }],
2900
- /**
2901
- * Transform Origin
2902
- * @see https://tailwindcss.com/docs/transform-origin
2903
- */
2904
- 'transform-origin': [{
2905
- origin: scalePositionWithArbitrary()
2906
- }],
2907
- /**
2908
- * Transform Style
2909
- * @see https://tailwindcss.com/docs/transform-style
2910
- */
2911
- 'transform-style': [{
2912
- transform: ['3d', 'flat']
2913
- }],
2914
- /**
2915
- * Translate
2916
- * @see https://tailwindcss.com/docs/translate
2917
- */
2918
- translate: [{
2919
- translate: scaleTranslate()
2920
- }],
2921
- /**
2922
- * Translate X
2923
- * @see https://tailwindcss.com/docs/translate
2924
- */
2925
- 'translate-x': [{
2926
- 'translate-x': scaleTranslate()
2927
- }],
2928
- /**
2929
- * Translate Y
2930
- * @see https://tailwindcss.com/docs/translate
2931
- */
2932
- 'translate-y': [{
2933
- 'translate-y': scaleTranslate()
2934
- }],
2935
- /**
2936
- * Translate Z
2937
- * @see https://tailwindcss.com/docs/translate
2938
- */
2939
- 'translate-z': [{
2940
- 'translate-z': scaleTranslate()
2941
- }],
2942
- /**
2943
- * Translate None
2944
- * @see https://tailwindcss.com/docs/translate
2945
- */
2946
- 'translate-none': ['translate-none'],
2947
- // ---------------------
2948
- // --- Interactivity ---
2949
- // ---------------------
2950
- /**
2951
- * Accent Color
2952
- * @see https://tailwindcss.com/docs/accent-color
2953
- */
2954
- accent: [{
2955
- accent: scaleColor()
2956
- }],
2957
- /**
2958
- * Appearance
2959
- * @see https://tailwindcss.com/docs/appearance
2960
- */
2961
- appearance: [{
2962
- appearance: ['none', 'auto']
2963
- }],
2964
- /**
2965
- * Caret Color
2966
- * @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities
2967
- */
2968
- 'caret-color': [{
2969
- caret: scaleColor()
2970
- }],
2971
- /**
2972
- * Color Scheme
2973
- * @see https://tailwindcss.com/docs/color-scheme
2974
- */
2975
- 'color-scheme': [{
2976
- scheme: ['normal', 'dark', 'light', 'light-dark', 'only-dark', 'only-light']
2977
- }],
2978
- /**
2979
- * Cursor
2980
- * @see https://tailwindcss.com/docs/cursor
2981
- */
2982
- cursor: [{
2983
- cursor: ['auto', 'default', 'pointer', 'wait', 'text', 'move', 'help', 'not-allowed', 'none', 'context-menu', 'progress', 'cell', 'crosshair', 'vertical-text', 'alias', 'copy', 'no-drop', 'grab', 'grabbing', 'all-scroll', 'col-resize', 'row-resize', 'n-resize', 'e-resize', 's-resize', 'w-resize', 'ne-resize', 'nw-resize', 'se-resize', 'sw-resize', 'ew-resize', 'ns-resize', 'nesw-resize', 'nwse-resize', 'zoom-in', 'zoom-out', isArbitraryVariable, isArbitraryValue]
2984
- }],
2985
- /**
2986
- * Field Sizing
2987
- * @see https://tailwindcss.com/docs/field-sizing
2988
- */
2989
- 'field-sizing': [{
2990
- 'field-sizing': ['fixed', 'content']
2991
- }],
2992
- /**
2993
- * Pointer Events
2994
- * @see https://tailwindcss.com/docs/pointer-events
2995
- */
2996
- 'pointer-events': [{
2997
- 'pointer-events': ['auto', 'none']
2998
- }],
2999
- /**
3000
- * Resize
3001
- * @see https://tailwindcss.com/docs/resize
3002
- */
3003
- resize: [{
3004
- resize: ['none', '', 'y', 'x']
3005
- }],
3006
- /**
3007
- * Scroll Behavior
3008
- * @see https://tailwindcss.com/docs/scroll-behavior
3009
- */
3010
- 'scroll-behavior': [{
3011
- scroll: ['auto', 'smooth']
3012
- }],
3013
- /**
3014
- * Scroll Margin
3015
- * @see https://tailwindcss.com/docs/scroll-margin
3016
- */
3017
- 'scroll-m': [{
3018
- 'scroll-m': scaleUnambiguousSpacing()
3019
- }],
3020
- /**
3021
- * Scroll Margin X
3022
- * @see https://tailwindcss.com/docs/scroll-margin
3023
- */
3024
- 'scroll-mx': [{
3025
- 'scroll-mx': scaleUnambiguousSpacing()
3026
- }],
3027
- /**
3028
- * Scroll Margin Y
3029
- * @see https://tailwindcss.com/docs/scroll-margin
3030
- */
3031
- 'scroll-my': [{
3032
- 'scroll-my': scaleUnambiguousSpacing()
3033
- }],
3034
- /**
3035
- * Scroll Margin Start
3036
- * @see https://tailwindcss.com/docs/scroll-margin
3037
- */
3038
- 'scroll-ms': [{
3039
- 'scroll-ms': scaleUnambiguousSpacing()
3040
- }],
3041
- /**
3042
- * Scroll Margin End
3043
- * @see https://tailwindcss.com/docs/scroll-margin
3044
- */
3045
- 'scroll-me': [{
3046
- 'scroll-me': scaleUnambiguousSpacing()
3047
- }],
3048
- /**
3049
- * Scroll Margin Top
3050
- * @see https://tailwindcss.com/docs/scroll-margin
3051
- */
3052
- 'scroll-mt': [{
3053
- 'scroll-mt': scaleUnambiguousSpacing()
3054
- }],
3055
- /**
3056
- * Scroll Margin Right
3057
- * @see https://tailwindcss.com/docs/scroll-margin
3058
- */
3059
- 'scroll-mr': [{
3060
- 'scroll-mr': scaleUnambiguousSpacing()
3061
- }],
3062
- /**
3063
- * Scroll Margin Bottom
3064
- * @see https://tailwindcss.com/docs/scroll-margin
3065
- */
3066
- 'scroll-mb': [{
3067
- 'scroll-mb': scaleUnambiguousSpacing()
3068
- }],
3069
- /**
3070
- * Scroll Margin Left
3071
- * @see https://tailwindcss.com/docs/scroll-margin
3072
- */
3073
- 'scroll-ml': [{
3074
- 'scroll-ml': scaleUnambiguousSpacing()
3075
- }],
3076
- /**
3077
- * Scroll Padding
3078
- * @see https://tailwindcss.com/docs/scroll-padding
3079
- */
3080
- 'scroll-p': [{
3081
- 'scroll-p': scaleUnambiguousSpacing()
3082
- }],
3083
- /**
3084
- * Scroll Padding X
3085
- * @see https://tailwindcss.com/docs/scroll-padding
3086
- */
3087
- 'scroll-px': [{
3088
- 'scroll-px': scaleUnambiguousSpacing()
3089
- }],
3090
- /**
3091
- * Scroll Padding Y
3092
- * @see https://tailwindcss.com/docs/scroll-padding
3093
- */
3094
- 'scroll-py': [{
3095
- 'scroll-py': scaleUnambiguousSpacing()
3096
- }],
3097
- /**
3098
- * Scroll Padding Start
3099
- * @see https://tailwindcss.com/docs/scroll-padding
3100
- */
3101
- 'scroll-ps': [{
3102
- 'scroll-ps': scaleUnambiguousSpacing()
3103
- }],
3104
- /**
3105
- * Scroll Padding End
3106
- * @see https://tailwindcss.com/docs/scroll-padding
3107
- */
3108
- 'scroll-pe': [{
3109
- 'scroll-pe': scaleUnambiguousSpacing()
3110
- }],
3111
- /**
3112
- * Scroll Padding Top
3113
- * @see https://tailwindcss.com/docs/scroll-padding
3114
- */
3115
- 'scroll-pt': [{
3116
- 'scroll-pt': scaleUnambiguousSpacing()
3117
- }],
3118
- /**
3119
- * Scroll Padding Right
3120
- * @see https://tailwindcss.com/docs/scroll-padding
3121
- */
3122
- 'scroll-pr': [{
3123
- 'scroll-pr': scaleUnambiguousSpacing()
3124
- }],
3125
- /**
3126
- * Scroll Padding Bottom
3127
- * @see https://tailwindcss.com/docs/scroll-padding
3128
- */
3129
- 'scroll-pb': [{
3130
- 'scroll-pb': scaleUnambiguousSpacing()
3131
- }],
3132
- /**
3133
- * Scroll Padding Left
3134
- * @see https://tailwindcss.com/docs/scroll-padding
3135
- */
3136
- 'scroll-pl': [{
3137
- 'scroll-pl': scaleUnambiguousSpacing()
3138
- }],
3139
- /**
3140
- * Scroll Snap Align
3141
- * @see https://tailwindcss.com/docs/scroll-snap-align
3142
- */
3143
- 'snap-align': [{
3144
- snap: ['start', 'end', 'center', 'align-none']
3145
- }],
3146
- /**
3147
- * Scroll Snap Stop
3148
- * @see https://tailwindcss.com/docs/scroll-snap-stop
3149
- */
3150
- 'snap-stop': [{
3151
- snap: ['normal', 'always']
3152
- }],
3153
- /**
3154
- * Scroll Snap Type
3155
- * @see https://tailwindcss.com/docs/scroll-snap-type
3156
- */
3157
- 'snap-type': [{
3158
- snap: ['none', 'x', 'y', 'both']
3159
- }],
3160
- /**
3161
- * Scroll Snap Type Strictness
3162
- * @see https://tailwindcss.com/docs/scroll-snap-type
3163
- */
3164
- 'snap-strictness': [{
3165
- snap: ['mandatory', 'proximity']
3166
- }],
3167
- /**
3168
- * Touch Action
3169
- * @see https://tailwindcss.com/docs/touch-action
3170
- */
3171
- touch: [{
3172
- touch: ['auto', 'none', 'manipulation']
3173
- }],
3174
- /**
3175
- * Touch Action X
3176
- * @see https://tailwindcss.com/docs/touch-action
3177
- */
3178
- 'touch-x': [{
3179
- 'touch-pan': ['x', 'left', 'right']
3180
- }],
3181
- /**
3182
- * Touch Action Y
3183
- * @see https://tailwindcss.com/docs/touch-action
3184
- */
3185
- 'touch-y': [{
3186
- 'touch-pan': ['y', 'up', 'down']
3187
- }],
3188
- /**
3189
- * Touch Action Pinch Zoom
3190
- * @see https://tailwindcss.com/docs/touch-action
3191
- */
3192
- 'touch-pz': ['touch-pinch-zoom'],
3193
- /**
3194
- * User Select
3195
- * @see https://tailwindcss.com/docs/user-select
3196
- */
3197
- select: [{
3198
- select: ['none', 'text', 'all', 'auto']
3199
- }],
3200
- /**
3201
- * Will Change
3202
- * @see https://tailwindcss.com/docs/will-change
3203
- */
3204
- 'will-change': [{
3205
- 'will-change': ['auto', 'scroll', 'contents', 'transform', isArbitraryVariable, isArbitraryValue]
3206
- }],
3207
- // -----------
3208
- // --- SVG ---
3209
- // -----------
3210
- /**
3211
- * Fill
3212
- * @see https://tailwindcss.com/docs/fill
3213
- */
3214
- fill: [{
3215
- fill: ['none', ...scaleColor()]
3216
- }],
3217
- /**
3218
- * Stroke Width
3219
- * @see https://tailwindcss.com/docs/stroke-width
3220
- */
3221
- 'stroke-w': [{
3222
- stroke: [isNumber, isArbitraryVariableLength, isArbitraryLength, isArbitraryNumber]
3223
- }],
3224
- /**
3225
- * Stroke
3226
- * @see https://tailwindcss.com/docs/stroke
3227
- */
3228
- stroke: [{
3229
- stroke: ['none', ...scaleColor()]
3230
- }],
3231
- // ---------------------
3232
- // --- Accessibility ---
3233
- // ---------------------
3234
- /**
3235
- * Forced Color Adjust
3236
- * @see https://tailwindcss.com/docs/forced-color-adjust
3237
- */
3238
- 'forced-color-adjust': [{
3239
- 'forced-color-adjust': ['auto', 'none']
3240
- }]
3241
- },
3242
- conflictingClassGroups: {
3243
- overflow: ['overflow-x', 'overflow-y'],
3244
- overscroll: ['overscroll-x', 'overscroll-y'],
3245
- inset: ['inset-x', 'inset-y', 'start', 'end', 'top', 'right', 'bottom', 'left'],
3246
- 'inset-x': ['right', 'left'],
3247
- 'inset-y': ['top', 'bottom'],
3248
- flex: ['basis', 'grow', 'shrink'],
3249
- gap: ['gap-x', 'gap-y'],
3250
- p: ['px', 'py', 'ps', 'pe', 'pt', 'pr', 'pb', 'pl'],
3251
- px: ['pr', 'pl'],
3252
- py: ['pt', 'pb'],
3253
- m: ['mx', 'my', 'ms', 'me', 'mt', 'mr', 'mb', 'ml'],
3254
- mx: ['mr', 'ml'],
3255
- my: ['mt', 'mb'],
3256
- size: ['w', 'h'],
3257
- 'font-size': ['leading'],
3258
- 'fvn-normal': ['fvn-ordinal', 'fvn-slashed-zero', 'fvn-figure', 'fvn-spacing', 'fvn-fraction'],
3259
- 'fvn-ordinal': ['fvn-normal'],
3260
- 'fvn-slashed-zero': ['fvn-normal'],
3261
- 'fvn-figure': ['fvn-normal'],
3262
- 'fvn-spacing': ['fvn-normal'],
3263
- 'fvn-fraction': ['fvn-normal'],
3264
- 'line-clamp': ['display', 'overflow'],
3265
- rounded: ['rounded-s', 'rounded-e', 'rounded-t', 'rounded-r', 'rounded-b', 'rounded-l', 'rounded-ss', 'rounded-se', 'rounded-ee', 'rounded-es', 'rounded-tl', 'rounded-tr', 'rounded-br', 'rounded-bl'],
3266
- 'rounded-s': ['rounded-ss', 'rounded-es'],
3267
- 'rounded-e': ['rounded-se', 'rounded-ee'],
3268
- 'rounded-t': ['rounded-tl', 'rounded-tr'],
3269
- 'rounded-r': ['rounded-tr', 'rounded-br'],
3270
- 'rounded-b': ['rounded-br', 'rounded-bl'],
3271
- 'rounded-l': ['rounded-tl', 'rounded-bl'],
3272
- 'border-spacing': ['border-spacing-x', 'border-spacing-y'],
3273
- 'border-w': ['border-w-x', 'border-w-y', 'border-w-s', 'border-w-e', 'border-w-t', 'border-w-r', 'border-w-b', 'border-w-l'],
3274
- 'border-w-x': ['border-w-r', 'border-w-l'],
3275
- 'border-w-y': ['border-w-t', 'border-w-b'],
3276
- 'border-color': ['border-color-x', 'border-color-y', 'border-color-s', 'border-color-e', 'border-color-t', 'border-color-r', 'border-color-b', 'border-color-l'],
3277
- 'border-color-x': ['border-color-r', 'border-color-l'],
3278
- 'border-color-y': ['border-color-t', 'border-color-b'],
3279
- translate: ['translate-x', 'translate-y', 'translate-none'],
3280
- 'translate-none': ['translate', 'translate-x', 'translate-y', 'translate-z'],
3281
- 'scroll-m': ['scroll-mx', 'scroll-my', 'scroll-ms', 'scroll-me', 'scroll-mt', 'scroll-mr', 'scroll-mb', 'scroll-ml'],
3282
- 'scroll-mx': ['scroll-mr', 'scroll-ml'],
3283
- 'scroll-my': ['scroll-mt', 'scroll-mb'],
3284
- 'scroll-p': ['scroll-px', 'scroll-py', 'scroll-ps', 'scroll-pe', 'scroll-pt', 'scroll-pr', 'scroll-pb', 'scroll-pl'],
3285
- 'scroll-px': ['scroll-pr', 'scroll-pl'],
3286
- 'scroll-py': ['scroll-pt', 'scroll-pb'],
3287
- touch: ['touch-x', 'touch-y', 'touch-pz'],
3288
- 'touch-x': ['touch'],
3289
- 'touch-y': ['touch'],
3290
- 'touch-pz': ['touch']
3291
- },
3292
- conflictingClassGroupModifiers: {
3293
- 'font-size': ['leading']
3294
- },
3295
- orderSensitiveModifiers: ['*', '**', 'after', 'backdrop', 'before', 'details-content', 'file', 'first-letter', 'first-line', 'marker', 'placeholder', 'selection']
3296
- };
3297
- };
3298
- const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
28
+ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
3299
29
 
3300
30
  // Define patterns for custom classes that should be preserved
3301
31
  // This approach is more scalable than hardcoding individual class names
@@ -3314,17 +44,17 @@ function isCustomClass(className) {
3314
44
  }
3315
45
  function cn(...inputs) {
3316
46
  // Use clsx first to combine classes, then use twMerge for standard Tailwind classes
3317
- const combined = clsx(inputs);
47
+ const combined = clsx.clsx(inputs);
3318
48
  // Split classes and filter out our custom classes before merging
3319
49
  const classes = combined.split(" ");
3320
50
  const customClasses = classes.filter((cls) => isCustomClass(cls));
3321
51
  const standardClasses = classes.filter((cls) => !isCustomClass(cls));
3322
52
  // Merge standard classes and add back custom classes
3323
- const mergedStandard = twMerge(standardClasses.join(" "));
3324
- return clsx(mergedStandard, customClasses);
53
+ const mergedStandard = tailwindMerge.twMerge(standardClasses.join(" "));
54
+ return clsx.clsx(mergedStandard, customClasses);
3325
55
  }
3326
56
 
3327
- const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none", {
57
+ const buttonVariants = classVarianceAuthority.cva("items-center gap-3 justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none", {
3328
58
  variants: {
3329
59
  variant: {
3330
60
  primary: "bg-action-fill-primary-default text-action-ink-on-primary-normal hover:bg-action-fill-primary-hover",
@@ -3534,9 +264,9 @@ const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap
3534
264
  },
3535
265
  });
3536
266
  const Button = React__namespace.forwardRef(({ className, variant = "primary", color = "primary", size, isIconOnly, isLoading, asChild = false, leadingIcon, trailingIcon, isFullWidth = false, children, disabled, ...props }, ref) => {
3537
- const Comp = asChild ? Slot : "button";
267
+ const Comp = asChild ? reactSlot.Slot : "button";
3538
268
  const isDisabled = disabled || isLoading || false;
3539
- const buttonContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isLoading && !isIconOnly && (jsxRuntime.jsx(PulseLoader, { color: `var(--color-action-ink-${color}-normal)`, size: 10 })), isLoading && isIconOnly && (jsxRuntime.jsx(ClipLoader, { color: `var(--color-action-ink-${color}-normal)`, size: 20 })), !isLoading && leadingIcon && (jsxRuntime.jsx("span", { className: "mr-2", children: leadingIcon })), !isIconOnly && !isLoading && children, isIconOnly && !isLoading && children, !isLoading && trailingIcon && jsxRuntime.jsx("span", { children: trailingIcon })] }));
269
+ const buttonContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isLoading && !isIconOnly && (jsxRuntime.jsx(reactSpinners.PulseLoader, { color: `var(--color-action-ink-${color}-normal)`, size: 10 })), isLoading && isIconOnly && (jsxRuntime.jsx(reactSpinners.ClipLoader, { color: `var(--color-action-ink-${color}-normal)`, size: 20 })), !isLoading && leadingIcon && (jsxRuntime.jsx("span", { className: "mr-2", children: leadingIcon })), !isIconOnly && !isLoading && children, isIconOnly && !isLoading && children, !isLoading && trailingIcon && jsxRuntime.jsx("span", { children: trailingIcon })] }));
3540
270
  return (jsxRuntime.jsx(Comp, { className: cn(buttonVariants({
3541
271
  variant,
3542
272
  color,
@@ -3549,7 +279,7 @@ const Button = React__namespace.forwardRef(({ className, variant = "primary", co
3549
279
  });
3550
280
  Button.displayName = "Button";
3551
281
 
3552
- const textVariants = cva("", {
282
+ const textVariants = classVarianceAuthority.cva("", {
3553
283
  variants: {
3554
284
  variant: {
3555
285
  display: "font-functional font-medium",
@@ -3576,6 +306,7 @@ const textVariants = cva("", {
3576
306
  muted: "text-surface-ink-neutral-muted",
3577
307
  disabled: "text-surface-ink-neutral-disabled",
3578
308
  primary: "text-surface-ink-primary-normal",
309
+ onPrimary: "text-action-ink-on-primary-normal",
3579
310
  },
3580
311
  as: {
3581
312
  h1: "",
@@ -3716,9 +447,105 @@ const Text = React__namespace.forwardRef(({ className, variant, size, weight, co
3716
447
  });
3717
448
  Text.displayName = "Text";
3718
449
 
450
+ const tooltipVariants = classVarianceAuthority.cva("absolute z-50 bg-popup-fill-intense text-action-ink-on-primary-normal rounded-medium shadow-lg border border-popup-outline-subtle flex flex-col gap-2 p-4 rounded-xlarge min-w-[200px] max-w-[300px] transition-opacity duration-200", {
451
+ variants: {
452
+ placement: {
453
+ "top-start": "bottom-full left-0 mb-2",
454
+ top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
455
+ "top-end": "bottom-full right-0 mb-2",
456
+ "bottom-start": "top-full left-0 mt-2",
457
+ bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
458
+ "bottom-end": "top-full right-0 mt-2",
459
+ },
460
+ isVisible: {
461
+ true: "opacity-100 pointer-events-auto",
462
+ false: "opacity-0 pointer-events-none",
463
+ },
464
+ },
465
+ defaultVariants: {
466
+ placement: "top",
467
+ isVisible: false,
468
+ },
469
+ });
470
+ const tooltipArrowVariants = classVarianceAuthority.cva("absolute w-0 h-0 border-solid border-[6px]", {
471
+ variants: {
472
+ placement: {
473
+ "top-start": "top-full left-4 border-t-popup-fill-intense border-x-transparent border-b-transparent",
474
+ top: "top-full left-1/2 -translate-x-1/2 border-t-popup-fill-intense border-x-transparent border-b-transparent",
475
+ "top-end": "top-full right-4 border-t-popup-fill-intense border-x-transparent border-b-transparent",
476
+ "bottom-start": "bottom-full left-4 border-b-popup-fill-intense border-x-transparent border-t-transparent",
477
+ bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-popup-fill-intense border-x-transparent border-t-transparent",
478
+ "bottom-end": "bottom-full right-4 border-b-popup-fill-intense border-x-transparent border-t-transparent",
479
+ },
480
+ },
481
+ defaultVariants: {
482
+ placement: "top",
483
+ },
484
+ });
485
+ const Tooltip = React__namespace.forwardRef(({ children, heading, description, placement = "top", showArrow = true, className, delay = 200, disabled = false, }, ref) => {
486
+ const [isVisible, setIsVisible] = React__namespace.useState(false);
487
+ const timeoutRef = React__namespace.useRef(null);
488
+ const containerRef = React__namespace.useRef(null);
489
+ const handleMouseEnter = () => {
490
+ if (disabled)
491
+ return;
492
+ if (timeoutRef.current) {
493
+ clearTimeout(timeoutRef.current);
494
+ }
495
+ timeoutRef.current = setTimeout(() => {
496
+ setIsVisible(true);
497
+ }, delay);
498
+ };
499
+ const handleMouseLeave = () => {
500
+ if (timeoutRef.current) {
501
+ clearTimeout(timeoutRef.current);
502
+ }
503
+ setIsVisible(false);
504
+ };
505
+ const handleFocus = () => {
506
+ if (disabled)
507
+ return;
508
+ setIsVisible(true);
509
+ };
510
+ const handleBlur = () => {
511
+ setIsVisible(false);
512
+ };
513
+ React__namespace.useEffect(() => {
514
+ return () => {
515
+ if (timeoutRef.current) {
516
+ clearTimeout(timeoutRef.current);
517
+ }
518
+ };
519
+ }, []);
520
+ // Clone the child element and add event handlers
521
+ const trigger = React__namespace.cloneElement(children, {
522
+ onMouseEnter: (e) => {
523
+ handleMouseEnter();
524
+ children.props.onMouseEnter?.(e);
525
+ },
526
+ onMouseLeave: (e) => {
527
+ handleMouseLeave();
528
+ children.props.onMouseLeave?.(e);
529
+ },
530
+ onFocus: (e) => {
531
+ handleFocus();
532
+ children.props.onFocus?.(e);
533
+ },
534
+ onBlur: (e) => {
535
+ handleBlur();
536
+ children.props.onBlur?.(e);
537
+ },
538
+ "aria-describedby": isVisible ? "tooltip-content" : undefined,
539
+ });
540
+ return (jsxRuntime.jsxs("div", { ref: containerRef, className: "relative inline-block", style: { position: "relative" }, children: [trigger, jsxRuntime.jsxs("div", { ref: ref, id: "tooltip-content", role: "tooltip", className: cn(tooltipVariants({ placement, isVisible }), className), "aria-hidden": !isVisible, children: [showArrow && (jsxRuntime.jsx("div", { className: cn(tooltipArrowVariants({ placement })) })), jsxRuntime.jsxs("div", { className: "relative", children: [heading && (jsxRuntime.jsx(Text, { variant: "body", size: "medium", weight: "semibold", color: "onPrimary", children: heading })), jsxRuntime.jsx(Text, { variant: "body", size: "small", weight: "regular", color: "onPrimary", children: description })] })] })] }));
541
+ });
542
+ Tooltip.displayName = "Tooltip";
543
+
3719
544
  exports.Button = Button;
3720
545
  exports.Text = Text;
546
+ exports.Tooltip = Tooltip;
3721
547
  exports.buttonVariants = buttonVariants;
3722
548
  exports.cn = cn;
3723
549
  exports.textVariants = textVariants;
550
+ exports.tooltipVariants = tooltipVariants;
3724
551
  //# sourceMappingURL=index.js.map