whatsapp-ui-react 0.0.2 → 0.0.4

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.cjs CHANGED
@@ -154,3193 +154,8 @@ function StickerIcon({ className }) {
154
154
  )
155
155
  ] });
156
156
  }
157
- function r(e) {
158
- var t, f, n = "";
159
- if ("string" == typeof e || "number" == typeof e) n += e;
160
- else if ("object" == typeof e) if (Array.isArray(e)) {
161
- var o = e.length;
162
- for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
163
- } else for (f in e) e[f] && (n && (n += " "), n += f);
164
- return n;
165
- }
166
- function clsx() {
167
- for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
168
- return n;
169
- }
170
- const concatArrays = (array1, array2) => {
171
- const combinedArray = new Array(array1.length + array2.length);
172
- for (let i = 0; i < array1.length; i++) {
173
- combinedArray[i] = array1[i];
174
- }
175
- for (let i = 0; i < array2.length; i++) {
176
- combinedArray[array1.length + i] = array2[i];
177
- }
178
- return combinedArray;
179
- };
180
- const createClassValidatorObject = (classGroupId, validator) => ({
181
- classGroupId,
182
- validator
183
- });
184
- const createClassPartObject = (nextPart = /* @__PURE__ */ new Map(), validators = null, classGroupId) => ({
185
- nextPart,
186
- validators,
187
- classGroupId
188
- });
189
- const CLASS_PART_SEPARATOR = "-";
190
- const EMPTY_CONFLICTS = [];
191
- const ARBITRARY_PROPERTY_PREFIX = "arbitrary..";
192
- const createClassGroupUtils = (config) => {
193
- const classMap = createClassMap(config);
194
- const {
195
- conflictingClassGroups,
196
- conflictingClassGroupModifiers
197
- } = config;
198
- const getClassGroupId = (className) => {
199
- if (className.startsWith("[") && className.endsWith("]")) {
200
- return getGroupIdForArbitraryProperty(className);
201
- }
202
- const classParts = className.split(CLASS_PART_SEPARATOR);
203
- const startIndex = classParts[0] === "" && classParts.length > 1 ? 1 : 0;
204
- return getGroupRecursive(classParts, startIndex, classMap);
205
- };
206
- const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
207
- if (hasPostfixModifier) {
208
- const modifierConflicts = conflictingClassGroupModifiers[classGroupId];
209
- const baseConflicts = conflictingClassGroups[classGroupId];
210
- if (modifierConflicts) {
211
- if (baseConflicts) {
212
- return concatArrays(baseConflicts, modifierConflicts);
213
- }
214
- return modifierConflicts;
215
- }
216
- return baseConflicts || EMPTY_CONFLICTS;
217
- }
218
- return conflictingClassGroups[classGroupId] || EMPTY_CONFLICTS;
219
- };
220
- return {
221
- getClassGroupId,
222
- getConflictingClassGroupIds
223
- };
224
- };
225
- const getGroupRecursive = (classParts, startIndex, classPartObject) => {
226
- const classPathsLength = classParts.length - startIndex;
227
- if (classPathsLength === 0) {
228
- return classPartObject.classGroupId;
229
- }
230
- const currentClassPart = classParts[startIndex];
231
- const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
232
- if (nextClassPartObject) {
233
- const result = getGroupRecursive(classParts, startIndex + 1, nextClassPartObject);
234
- if (result) return result;
235
- }
236
- const validators = classPartObject.validators;
237
- if (validators === null) {
238
- return void 0;
239
- }
240
- const classRest = startIndex === 0 ? classParts.join(CLASS_PART_SEPARATOR) : classParts.slice(startIndex).join(CLASS_PART_SEPARATOR);
241
- const validatorsLength = validators.length;
242
- for (let i = 0; i < validatorsLength; i++) {
243
- const validatorObj = validators[i];
244
- if (validatorObj.validator(classRest)) {
245
- return validatorObj.classGroupId;
246
- }
247
- }
248
- return void 0;
249
- };
250
- const getGroupIdForArbitraryProperty = (className) => className.slice(1, -1).indexOf(":") === -1 ? void 0 : (() => {
251
- const content = className.slice(1, -1);
252
- const colonIndex = content.indexOf(":");
253
- const property = content.slice(0, colonIndex);
254
- return property ? ARBITRARY_PROPERTY_PREFIX + property : void 0;
255
- })();
256
- const createClassMap = (config) => {
257
- const {
258
- theme,
259
- classGroups
260
- } = config;
261
- return processClassGroups(classGroups, theme);
262
- };
263
- const processClassGroups = (classGroups, theme) => {
264
- const classMap = createClassPartObject();
265
- for (const classGroupId in classGroups) {
266
- const group = classGroups[classGroupId];
267
- processClassesRecursively(group, classMap, classGroupId, theme);
268
- }
269
- return classMap;
270
- };
271
- const processClassesRecursively = (classGroup, classPartObject, classGroupId, theme) => {
272
- const len = classGroup.length;
273
- for (let i = 0; i < len; i++) {
274
- const classDefinition = classGroup[i];
275
- processClassDefinition(classDefinition, classPartObject, classGroupId, theme);
276
- }
277
- };
278
- const processClassDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
279
- if (typeof classDefinition === "string") {
280
- processStringDefinition(classDefinition, classPartObject, classGroupId);
281
- return;
282
- }
283
- if (typeof classDefinition === "function") {
284
- processFunctionDefinition(classDefinition, classPartObject, classGroupId, theme);
285
- return;
286
- }
287
- processObjectDefinition(classDefinition, classPartObject, classGroupId, theme);
288
- };
289
- const processStringDefinition = (classDefinition, classPartObject, classGroupId) => {
290
- const classPartObjectToEdit = classDefinition === "" ? classPartObject : getPart(classPartObject, classDefinition);
291
- classPartObjectToEdit.classGroupId = classGroupId;
292
- };
293
- const processFunctionDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
294
- if (isThemeGetter(classDefinition)) {
295
- processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
296
- return;
297
- }
298
- if (classPartObject.validators === null) {
299
- classPartObject.validators = [];
300
- }
301
- classPartObject.validators.push(createClassValidatorObject(classGroupId, classDefinition));
302
- };
303
- const processObjectDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
304
- const entries = Object.entries(classDefinition);
305
- const len = entries.length;
306
- for (let i = 0; i < len; i++) {
307
- const [key, value] = entries[i];
308
- processClassesRecursively(value, getPart(classPartObject, key), classGroupId, theme);
309
- }
310
- };
311
- const getPart = (classPartObject, path) => {
312
- let current = classPartObject;
313
- const parts = path.split(CLASS_PART_SEPARATOR);
314
- const len = parts.length;
315
- for (let i = 0; i < len; i++) {
316
- const part = parts[i];
317
- let next = current.nextPart.get(part);
318
- if (!next) {
319
- next = createClassPartObject();
320
- current.nextPart.set(part, next);
321
- }
322
- current = next;
323
- }
324
- return current;
325
- };
326
- const isThemeGetter = (func) => "isThemeGetter" in func && func.isThemeGetter === true;
327
- const createLruCache = (maxCacheSize) => {
328
- if (maxCacheSize < 1) {
329
- return {
330
- get: () => void 0,
331
- set: () => {
332
- }
333
- };
334
- }
335
- let cacheSize = 0;
336
- let cache = /* @__PURE__ */ Object.create(null);
337
- let previousCache = /* @__PURE__ */ Object.create(null);
338
- const update = (key, value) => {
339
- cache[key] = value;
340
- cacheSize++;
341
- if (cacheSize > maxCacheSize) {
342
- cacheSize = 0;
343
- previousCache = cache;
344
- cache = /* @__PURE__ */ Object.create(null);
345
- }
346
- };
347
- return {
348
- get(key) {
349
- let value = cache[key];
350
- if (value !== void 0) {
351
- return value;
352
- }
353
- if ((value = previousCache[key]) !== void 0) {
354
- update(key, value);
355
- return value;
356
- }
357
- },
358
- set(key, value) {
359
- if (key in cache) {
360
- cache[key] = value;
361
- } else {
362
- update(key, value);
363
- }
364
- }
365
- };
366
- };
367
- const IMPORTANT_MODIFIER = "!";
368
- const MODIFIER_SEPARATOR = ":";
369
- const EMPTY_MODIFIERS = [];
370
- const createResultObject = (modifiers, hasImportantModifier, baseClassName, maybePostfixModifierPosition, isExternal) => ({
371
- modifiers,
372
- hasImportantModifier,
373
- baseClassName,
374
- maybePostfixModifierPosition,
375
- isExternal
376
- });
377
- const createParseClassName = (config) => {
378
- const {
379
- prefix,
380
- experimentalParseClassName
381
- } = config;
382
- let parseClassName = (className) => {
383
- const modifiers = [];
384
- let bracketDepth = 0;
385
- let parenDepth = 0;
386
- let modifierStart = 0;
387
- let postfixModifierPosition;
388
- const len = className.length;
389
- for (let index = 0; index < len; index++) {
390
- const currentCharacter = className[index];
391
- if (bracketDepth === 0 && parenDepth === 0) {
392
- if (currentCharacter === MODIFIER_SEPARATOR) {
393
- modifiers.push(className.slice(modifierStart, index));
394
- modifierStart = index + 1;
395
- continue;
396
- }
397
- if (currentCharacter === "/") {
398
- postfixModifierPosition = index;
399
- continue;
400
- }
401
- }
402
- if (currentCharacter === "[") bracketDepth++;
403
- else if (currentCharacter === "]") bracketDepth--;
404
- else if (currentCharacter === "(") parenDepth++;
405
- else if (currentCharacter === ")") parenDepth--;
406
- }
407
- const baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.slice(modifierStart);
408
- let baseClassName = baseClassNameWithImportantModifier;
409
- let hasImportantModifier = false;
410
- if (baseClassNameWithImportantModifier.endsWith(IMPORTANT_MODIFIER)) {
411
- baseClassName = baseClassNameWithImportantModifier.slice(0, -1);
412
- hasImportantModifier = true;
413
- } else if (
414
- /**
415
- * In Tailwind CSS v3 the important modifier was at the start of the base class name. This is still supported for legacy reasons.
416
- * @see https://github.com/dcastil/tailwind-merge/issues/513#issuecomment-2614029864
417
- */
418
- baseClassNameWithImportantModifier.startsWith(IMPORTANT_MODIFIER)
419
- ) {
420
- baseClassName = baseClassNameWithImportantModifier.slice(1);
421
- hasImportantModifier = true;
422
- }
423
- const maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : void 0;
424
- return createResultObject(modifiers, hasImportantModifier, baseClassName, maybePostfixModifierPosition);
425
- };
426
- if (prefix) {
427
- const fullPrefix = prefix + MODIFIER_SEPARATOR;
428
- const parseClassNameOriginal = parseClassName;
429
- parseClassName = (className) => className.startsWith(fullPrefix) ? parseClassNameOriginal(className.slice(fullPrefix.length)) : createResultObject(EMPTY_MODIFIERS, false, className, void 0, true);
430
- }
431
- if (experimentalParseClassName) {
432
- const parseClassNameOriginal = parseClassName;
433
- parseClassName = (className) => experimentalParseClassName({
434
- className,
435
- parseClassName: parseClassNameOriginal
436
- });
437
- }
438
- return parseClassName;
439
- };
440
- const createSortModifiers = (config) => {
441
- const modifierWeights = /* @__PURE__ */ new Map();
442
- config.orderSensitiveModifiers.forEach((mod, index) => {
443
- modifierWeights.set(mod, 1e6 + index);
444
- });
445
- return (modifiers) => {
446
- const result = [];
447
- let currentSegment = [];
448
- for (let i = 0; i < modifiers.length; i++) {
449
- const modifier = modifiers[i];
450
- const isArbitrary = modifier[0] === "[";
451
- const isOrderSensitive = modifierWeights.has(modifier);
452
- if (isArbitrary || isOrderSensitive) {
453
- if (currentSegment.length > 0) {
454
- currentSegment.sort();
455
- result.push(...currentSegment);
456
- currentSegment = [];
457
- }
458
- result.push(modifier);
459
- } else {
460
- currentSegment.push(modifier);
461
- }
462
- }
463
- if (currentSegment.length > 0) {
464
- currentSegment.sort();
465
- result.push(...currentSegment);
466
- }
467
- return result;
468
- };
469
- };
470
- const createConfigUtils = (config) => ({
471
- cache: createLruCache(config.cacheSize),
472
- parseClassName: createParseClassName(config),
473
- sortModifiers: createSortModifiers(config),
474
- ...createClassGroupUtils(config)
475
- });
476
- const SPLIT_CLASSES_REGEX = /\s+/;
477
- const mergeClassList = (classList, configUtils) => {
478
- const {
479
- parseClassName,
480
- getClassGroupId,
481
- getConflictingClassGroupIds,
482
- sortModifiers
483
- } = configUtils;
484
- const classGroupsInConflict = [];
485
- const classNames = classList.trim().split(SPLIT_CLASSES_REGEX);
486
- let result = "";
487
- for (let index = classNames.length - 1; index >= 0; index -= 1) {
488
- const originalClassName = classNames[index];
489
- const {
490
- isExternal,
491
- modifiers,
492
- hasImportantModifier,
493
- baseClassName,
494
- maybePostfixModifierPosition
495
- } = parseClassName(originalClassName);
496
- if (isExternal) {
497
- result = originalClassName + (result.length > 0 ? " " + result : result);
498
- continue;
499
- }
500
- let hasPostfixModifier = !!maybePostfixModifierPosition;
501
- let classGroupId = getClassGroupId(hasPostfixModifier ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName);
502
- if (!classGroupId) {
503
- if (!hasPostfixModifier) {
504
- result = originalClassName + (result.length > 0 ? " " + result : result);
505
- continue;
506
- }
507
- classGroupId = getClassGroupId(baseClassName);
508
- if (!classGroupId) {
509
- result = originalClassName + (result.length > 0 ? " " + result : result);
510
- continue;
511
- }
512
- hasPostfixModifier = false;
513
- }
514
- const variantModifier = modifiers.length === 0 ? "" : modifiers.length === 1 ? modifiers[0] : sortModifiers(modifiers).join(":");
515
- const modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
516
- const classId = modifierId + classGroupId;
517
- if (classGroupsInConflict.indexOf(classId) > -1) {
518
- continue;
519
- }
520
- classGroupsInConflict.push(classId);
521
- const conflictGroups = getConflictingClassGroupIds(classGroupId, hasPostfixModifier);
522
- for (let i = 0; i < conflictGroups.length; ++i) {
523
- const group = conflictGroups[i];
524
- classGroupsInConflict.push(modifierId + group);
525
- }
526
- result = originalClassName + (result.length > 0 ? " " + result : result);
527
- }
528
- return result;
529
- };
530
- const twJoin = (...classLists) => {
531
- let index = 0;
532
- let argument;
533
- let resolvedValue;
534
- let string = "";
535
- while (index < classLists.length) {
536
- if (argument = classLists[index++]) {
537
- if (resolvedValue = toValue(argument)) {
538
- string && (string += " ");
539
- string += resolvedValue;
540
- }
541
- }
542
- }
543
- return string;
544
- };
545
- const toValue = (mix) => {
546
- if (typeof mix === "string") {
547
- return mix;
548
- }
549
- let resolvedValue;
550
- let string = "";
551
- for (let k = 0; k < mix.length; k++) {
552
- if (mix[k]) {
553
- if (resolvedValue = toValue(mix[k])) {
554
- string && (string += " ");
555
- string += resolvedValue;
556
- }
557
- }
558
- }
559
- return string;
560
- };
561
- const createTailwindMerge = (createConfigFirst, ...createConfigRest) => {
562
- let configUtils;
563
- let cacheGet;
564
- let cacheSet;
565
- let functionToCall;
566
- const initTailwindMerge = (classList) => {
567
- const config = createConfigRest.reduce((previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig), createConfigFirst());
568
- configUtils = createConfigUtils(config);
569
- cacheGet = configUtils.cache.get;
570
- cacheSet = configUtils.cache.set;
571
- functionToCall = tailwindMerge;
572
- return tailwindMerge(classList);
573
- };
574
- const tailwindMerge = (classList) => {
575
- const cachedResult = cacheGet(classList);
576
- if (cachedResult) {
577
- return cachedResult;
578
- }
579
- const result = mergeClassList(classList, configUtils);
580
- cacheSet(classList, result);
581
- return result;
582
- };
583
- functionToCall = initTailwindMerge;
584
- return (...args) => functionToCall(twJoin(...args));
585
- };
586
- const fallbackThemeArr = [];
587
- const fromTheme = (key) => {
588
- const themeGetter = (theme) => theme[key] || fallbackThemeArr;
589
- themeGetter.isThemeGetter = true;
590
- return themeGetter;
591
- };
592
- const arbitraryValueRegex = /^\[(?:(\w[\w-]*):)?(.+)\]$/i;
593
- const arbitraryVariableRegex = /^\((?:(\w[\w-]*):)?(.+)\)$/i;
594
- const fractionRegex = /^\d+(?:\.\d+)?\/\d+(?:\.\d+)?$/;
595
- const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
596
- 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$/;
597
- const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/;
598
- const shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
599
- const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
600
- const isFraction = (value) => fractionRegex.test(value);
601
- const isNumber = (value) => !!value && !Number.isNaN(Number(value));
602
- const isInteger = (value) => !!value && Number.isInteger(Number(value));
603
- const isPercent = (value) => value.endsWith("%") && isNumber(value.slice(0, -1));
604
- const isTshirtSize = (value) => tshirtUnitRegex.test(value);
605
- const isAny = () => true;
606
- const isLengthOnly = (value) => (
607
- // `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
608
- // For example, `hsl(0 0% 0%)` would be classified as a length without this check.
609
- // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
610
- lengthUnitRegex.test(value) && !colorFunctionRegex.test(value)
611
- );
612
- const isNever = () => false;
613
- const isShadow = (value) => shadowRegex.test(value);
614
- const isImage = (value) => imageRegex.test(value);
615
- const isAnyNonArbitrary = (value) => !isArbitraryValue(value) && !isArbitraryVariable(value);
616
- const isArbitrarySize = (value) => getIsArbitraryValue(value, isLabelSize, isNever);
617
- const isArbitraryValue = (value) => arbitraryValueRegex.test(value);
618
- const isArbitraryLength = (value) => getIsArbitraryValue(value, isLabelLength, isLengthOnly);
619
- const isArbitraryNumber = (value) => getIsArbitraryValue(value, isLabelNumber, isNumber);
620
- const isArbitraryWeight = (value) => getIsArbitraryValue(value, isLabelWeight, isAny);
621
- const isArbitraryFamilyName = (value) => getIsArbitraryValue(value, isLabelFamilyName, isNever);
622
- const isArbitraryPosition = (value) => getIsArbitraryValue(value, isLabelPosition, isNever);
623
- const isArbitraryImage = (value) => getIsArbitraryValue(value, isLabelImage, isImage);
624
- const isArbitraryShadow = (value) => getIsArbitraryValue(value, isLabelShadow, isShadow);
625
- const isArbitraryVariable = (value) => arbitraryVariableRegex.test(value);
626
- const isArbitraryVariableLength = (value) => getIsArbitraryVariable(value, isLabelLength);
627
- const isArbitraryVariableFamilyName = (value) => getIsArbitraryVariable(value, isLabelFamilyName);
628
- const isArbitraryVariablePosition = (value) => getIsArbitraryVariable(value, isLabelPosition);
629
- const isArbitraryVariableSize = (value) => getIsArbitraryVariable(value, isLabelSize);
630
- const isArbitraryVariableImage = (value) => getIsArbitraryVariable(value, isLabelImage);
631
- const isArbitraryVariableShadow = (value) => getIsArbitraryVariable(value, isLabelShadow, true);
632
- const isArbitraryVariableWeight = (value) => getIsArbitraryVariable(value, isLabelWeight, true);
633
- const getIsArbitraryValue = (value, testLabel, testValue) => {
634
- const result = arbitraryValueRegex.exec(value);
635
- if (result) {
636
- if (result[1]) {
637
- return testLabel(result[1]);
638
- }
639
- return testValue(result[2]);
640
- }
641
- return false;
642
- };
643
- const getIsArbitraryVariable = (value, testLabel, shouldMatchNoLabel = false) => {
644
- const result = arbitraryVariableRegex.exec(value);
645
- if (result) {
646
- if (result[1]) {
647
- return testLabel(result[1]);
648
- }
649
- return shouldMatchNoLabel;
650
- }
651
- return false;
652
- };
653
- const isLabelPosition = (label) => label === "position" || label === "percentage";
654
- const isLabelImage = (label) => label === "image" || label === "url";
655
- const isLabelSize = (label) => label === "length" || label === "size" || label === "bg-size";
656
- const isLabelLength = (label) => label === "length";
657
- const isLabelNumber = (label) => label === "number";
658
- const isLabelFamilyName = (label) => label === "family-name";
659
- const isLabelWeight = (label) => label === "number" || label === "weight";
660
- const isLabelShadow = (label) => label === "shadow";
661
- const getDefaultConfig = () => {
662
- const themeColor = fromTheme("color");
663
- const themeFont = fromTheme("font");
664
- const themeText = fromTheme("text");
665
- const themeFontWeight = fromTheme("font-weight");
666
- const themeTracking = fromTheme("tracking");
667
- const themeLeading = fromTheme("leading");
668
- const themeBreakpoint = fromTheme("breakpoint");
669
- const themeContainer = fromTheme("container");
670
- const themeSpacing = fromTheme("spacing");
671
- const themeRadius = fromTheme("radius");
672
- const themeShadow = fromTheme("shadow");
673
- const themeInsetShadow = fromTheme("inset-shadow");
674
- const themeTextShadow = fromTheme("text-shadow");
675
- const themeDropShadow = fromTheme("drop-shadow");
676
- const themeBlur = fromTheme("blur");
677
- const themePerspective = fromTheme("perspective");
678
- const themeAspect = fromTheme("aspect");
679
- const themeEase = fromTheme("ease");
680
- const themeAnimate = fromTheme("animate");
681
- const scaleBreak = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"];
682
- const scalePosition = () => [
683
- "center",
684
- "top",
685
- "bottom",
686
- "left",
687
- "right",
688
- "top-left",
689
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
690
- "left-top",
691
- "top-right",
692
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
693
- "right-top",
694
- "bottom-right",
695
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
696
- "right-bottom",
697
- "bottom-left",
698
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
699
- "left-bottom"
700
- ];
701
- const scalePositionWithArbitrary = () => [...scalePosition(), isArbitraryVariable, isArbitraryValue];
702
- const scaleOverflow = () => ["auto", "hidden", "clip", "visible", "scroll"];
703
- const scaleOverscroll = () => ["auto", "contain", "none"];
704
- const scaleUnambiguousSpacing = () => [isArbitraryVariable, isArbitraryValue, themeSpacing];
705
- const scaleInset = () => [isFraction, "full", "auto", ...scaleUnambiguousSpacing()];
706
- const scaleGridTemplateColsRows = () => [isInteger, "none", "subgrid", isArbitraryVariable, isArbitraryValue];
707
- const scaleGridColRowStartAndEnd = () => ["auto", {
708
- span: ["full", isInteger, isArbitraryVariable, isArbitraryValue]
709
- }, isInteger, isArbitraryVariable, isArbitraryValue];
710
- const scaleGridColRowStartOrEnd = () => [isInteger, "auto", isArbitraryVariable, isArbitraryValue];
711
- const scaleGridAutoColsRows = () => ["auto", "min", "max", "fr", isArbitraryVariable, isArbitraryValue];
712
- const scaleAlignPrimaryAxis = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"];
713
- const scaleAlignSecondaryAxis = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"];
714
- const scaleMargin = () => ["auto", ...scaleUnambiguousSpacing()];
715
- const scaleSizing = () => [isFraction, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...scaleUnambiguousSpacing()];
716
- const scaleSizingInline = () => [isFraction, "screen", "full", "dvw", "lvw", "svw", "min", "max", "fit", ...scaleUnambiguousSpacing()];
717
- const scaleSizingBlock = () => [isFraction, "screen", "full", "lh", "dvh", "lvh", "svh", "min", "max", "fit", ...scaleUnambiguousSpacing()];
718
- const scaleColor = () => [themeColor, isArbitraryVariable, isArbitraryValue];
719
- const scaleBgPosition = () => [...scalePosition(), isArbitraryVariablePosition, isArbitraryPosition, {
720
- position: [isArbitraryVariable, isArbitraryValue]
721
- }];
722
- const scaleBgRepeat = () => ["no-repeat", {
723
- repeat: ["", "x", "y", "space", "round"]
724
- }];
725
- const scaleBgSize = () => ["auto", "cover", "contain", isArbitraryVariableSize, isArbitrarySize, {
726
- size: [isArbitraryVariable, isArbitraryValue]
727
- }];
728
- const scaleGradientStopPosition = () => [isPercent, isArbitraryVariableLength, isArbitraryLength];
729
- const scaleRadius = () => [
730
- // Deprecated since Tailwind CSS v4.0.0
731
- "",
732
- "none",
733
- "full",
734
- themeRadius,
735
- isArbitraryVariable,
736
- isArbitraryValue
737
- ];
738
- const scaleBorderWidth = () => ["", isNumber, isArbitraryVariableLength, isArbitraryLength];
739
- const scaleLineStyle = () => ["solid", "dashed", "dotted", "double"];
740
- const scaleBlendMode = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
741
- const scaleMaskImagePosition = () => [isNumber, isPercent, isArbitraryVariablePosition, isArbitraryPosition];
742
- const scaleBlur = () => [
743
- // Deprecated since Tailwind CSS v4.0.0
744
- "",
745
- "none",
746
- themeBlur,
747
- isArbitraryVariable,
748
- isArbitraryValue
749
- ];
750
- const scaleRotate = () => ["none", isNumber, isArbitraryVariable, isArbitraryValue];
751
- const scaleScale = () => ["none", isNumber, isArbitraryVariable, isArbitraryValue];
752
- const scaleSkew = () => [isNumber, isArbitraryVariable, isArbitraryValue];
753
- const scaleTranslate = () => [isFraction, "full", ...scaleUnambiguousSpacing()];
754
- return {
755
- cacheSize: 500,
756
- theme: {
757
- animate: ["spin", "ping", "pulse", "bounce"],
758
- aspect: ["video"],
759
- blur: [isTshirtSize],
760
- breakpoint: [isTshirtSize],
761
- color: [isAny],
762
- container: [isTshirtSize],
763
- "drop-shadow": [isTshirtSize],
764
- ease: ["in", "out", "in-out"],
765
- font: [isAnyNonArbitrary],
766
- "font-weight": ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"],
767
- "inset-shadow": [isTshirtSize],
768
- leading: ["none", "tight", "snug", "normal", "relaxed", "loose"],
769
- perspective: ["dramatic", "near", "normal", "midrange", "distant", "none"],
770
- radius: [isTshirtSize],
771
- shadow: [isTshirtSize],
772
- spacing: ["px", isNumber],
773
- text: [isTshirtSize],
774
- "text-shadow": [isTshirtSize],
775
- tracking: ["tighter", "tight", "normal", "wide", "wider", "widest"]
776
- },
777
- classGroups: {
778
- // --------------
779
- // --- Layout ---
780
- // --------------
781
- /**
782
- * Aspect Ratio
783
- * @see https://tailwindcss.com/docs/aspect-ratio
784
- */
785
- aspect: [{
786
- aspect: ["auto", "square", isFraction, isArbitraryValue, isArbitraryVariable, themeAspect]
787
- }],
788
- /**
789
- * Container
790
- * @see https://tailwindcss.com/docs/container
791
- * @deprecated since Tailwind CSS v4.0.0
792
- */
793
- container: ["container"],
794
- /**
795
- * Columns
796
- * @see https://tailwindcss.com/docs/columns
797
- */
798
- columns: [{
799
- columns: [isNumber, isArbitraryValue, isArbitraryVariable, themeContainer]
800
- }],
801
- /**
802
- * Break After
803
- * @see https://tailwindcss.com/docs/break-after
804
- */
805
- "break-after": [{
806
- "break-after": scaleBreak()
807
- }],
808
- /**
809
- * Break Before
810
- * @see https://tailwindcss.com/docs/break-before
811
- */
812
- "break-before": [{
813
- "break-before": scaleBreak()
814
- }],
815
- /**
816
- * Break Inside
817
- * @see https://tailwindcss.com/docs/break-inside
818
- */
819
- "break-inside": [{
820
- "break-inside": ["auto", "avoid", "avoid-page", "avoid-column"]
821
- }],
822
- /**
823
- * Box Decoration Break
824
- * @see https://tailwindcss.com/docs/box-decoration-break
825
- */
826
- "box-decoration": [{
827
- "box-decoration": ["slice", "clone"]
828
- }],
829
- /**
830
- * Box Sizing
831
- * @see https://tailwindcss.com/docs/box-sizing
832
- */
833
- box: [{
834
- box: ["border", "content"]
835
- }],
836
- /**
837
- * Display
838
- * @see https://tailwindcss.com/docs/display
839
- */
840
- 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"],
841
- /**
842
- * Screen Reader Only
843
- * @see https://tailwindcss.com/docs/display#screen-reader-only
844
- */
845
- sr: ["sr-only", "not-sr-only"],
846
- /**
847
- * Floats
848
- * @see https://tailwindcss.com/docs/float
849
- */
850
- float: [{
851
- float: ["right", "left", "none", "start", "end"]
852
- }],
853
- /**
854
- * Clear
855
- * @see https://tailwindcss.com/docs/clear
856
- */
857
- clear: [{
858
- clear: ["left", "right", "both", "none", "start", "end"]
859
- }],
860
- /**
861
- * Isolation
862
- * @see https://tailwindcss.com/docs/isolation
863
- */
864
- isolation: ["isolate", "isolation-auto"],
865
- /**
866
- * Object Fit
867
- * @see https://tailwindcss.com/docs/object-fit
868
- */
869
- "object-fit": [{
870
- object: ["contain", "cover", "fill", "none", "scale-down"]
871
- }],
872
- /**
873
- * Object Position
874
- * @see https://tailwindcss.com/docs/object-position
875
- */
876
- "object-position": [{
877
- object: scalePositionWithArbitrary()
878
- }],
879
- /**
880
- * Overflow
881
- * @see https://tailwindcss.com/docs/overflow
882
- */
883
- overflow: [{
884
- overflow: scaleOverflow()
885
- }],
886
- /**
887
- * Overflow X
888
- * @see https://tailwindcss.com/docs/overflow
889
- */
890
- "overflow-x": [{
891
- "overflow-x": scaleOverflow()
892
- }],
893
- /**
894
- * Overflow Y
895
- * @see https://tailwindcss.com/docs/overflow
896
- */
897
- "overflow-y": [{
898
- "overflow-y": scaleOverflow()
899
- }],
900
- /**
901
- * Overscroll Behavior
902
- * @see https://tailwindcss.com/docs/overscroll-behavior
903
- */
904
- overscroll: [{
905
- overscroll: scaleOverscroll()
906
- }],
907
- /**
908
- * Overscroll Behavior X
909
- * @see https://tailwindcss.com/docs/overscroll-behavior
910
- */
911
- "overscroll-x": [{
912
- "overscroll-x": scaleOverscroll()
913
- }],
914
- /**
915
- * Overscroll Behavior Y
916
- * @see https://tailwindcss.com/docs/overscroll-behavior
917
- */
918
- "overscroll-y": [{
919
- "overscroll-y": scaleOverscroll()
920
- }],
921
- /**
922
- * Position
923
- * @see https://tailwindcss.com/docs/position
924
- */
925
- position: ["static", "fixed", "absolute", "relative", "sticky"],
926
- /**
927
- * Inset
928
- * @see https://tailwindcss.com/docs/top-right-bottom-left
929
- */
930
- inset: [{
931
- inset: scaleInset()
932
- }],
933
- /**
934
- * Inset Inline
935
- * @see https://tailwindcss.com/docs/top-right-bottom-left
936
- */
937
- "inset-x": [{
938
- "inset-x": scaleInset()
939
- }],
940
- /**
941
- * Inset Block
942
- * @see https://tailwindcss.com/docs/top-right-bottom-left
943
- */
944
- "inset-y": [{
945
- "inset-y": scaleInset()
946
- }],
947
- /**
948
- * Inset Inline Start
949
- * @see https://tailwindcss.com/docs/top-right-bottom-left
950
- * @todo class group will be renamed to `inset-s` in next major release
951
- */
952
- start: [{
953
- "inset-s": scaleInset(),
954
- /**
955
- * @deprecated since Tailwind CSS v4.2.0 in favor of `inset-s-*` utilities.
956
- * @see https://github.com/tailwindlabs/tailwindcss/pull/19613
957
- */
958
- start: scaleInset()
959
- }],
960
- /**
961
- * Inset Inline End
962
- * @see https://tailwindcss.com/docs/top-right-bottom-left
963
- * @todo class group will be renamed to `inset-e` in next major release
964
- */
965
- end: [{
966
- "inset-e": scaleInset(),
967
- /**
968
- * @deprecated since Tailwind CSS v4.2.0 in favor of `inset-e-*` utilities.
969
- * @see https://github.com/tailwindlabs/tailwindcss/pull/19613
970
- */
971
- end: scaleInset()
972
- }],
973
- /**
974
- * Inset Block Start
975
- * @see https://tailwindcss.com/docs/top-right-bottom-left
976
- */
977
- "inset-bs": [{
978
- "inset-bs": scaleInset()
979
- }],
980
- /**
981
- * Inset Block End
982
- * @see https://tailwindcss.com/docs/top-right-bottom-left
983
- */
984
- "inset-be": [{
985
- "inset-be": scaleInset()
986
- }],
987
- /**
988
- * Top
989
- * @see https://tailwindcss.com/docs/top-right-bottom-left
990
- */
991
- top: [{
992
- top: scaleInset()
993
- }],
994
- /**
995
- * Right
996
- * @see https://tailwindcss.com/docs/top-right-bottom-left
997
- */
998
- right: [{
999
- right: scaleInset()
1000
- }],
1001
- /**
1002
- * Bottom
1003
- * @see https://tailwindcss.com/docs/top-right-bottom-left
1004
- */
1005
- bottom: [{
1006
- bottom: scaleInset()
1007
- }],
1008
- /**
1009
- * Left
1010
- * @see https://tailwindcss.com/docs/top-right-bottom-left
1011
- */
1012
- left: [{
1013
- left: scaleInset()
1014
- }],
1015
- /**
1016
- * Visibility
1017
- * @see https://tailwindcss.com/docs/visibility
1018
- */
1019
- visibility: ["visible", "invisible", "collapse"],
1020
- /**
1021
- * Z-Index
1022
- * @see https://tailwindcss.com/docs/z-index
1023
- */
1024
- z: [{
1025
- z: [isInteger, "auto", isArbitraryVariable, isArbitraryValue]
1026
- }],
1027
- // ------------------------
1028
- // --- Flexbox and Grid ---
1029
- // ------------------------
1030
- /**
1031
- * Flex Basis
1032
- * @see https://tailwindcss.com/docs/flex-basis
1033
- */
1034
- basis: [{
1035
- basis: [isFraction, "full", "auto", themeContainer, ...scaleUnambiguousSpacing()]
1036
- }],
1037
- /**
1038
- * Flex Direction
1039
- * @see https://tailwindcss.com/docs/flex-direction
1040
- */
1041
- "flex-direction": [{
1042
- flex: ["row", "row-reverse", "col", "col-reverse"]
1043
- }],
1044
- /**
1045
- * Flex Wrap
1046
- * @see https://tailwindcss.com/docs/flex-wrap
1047
- */
1048
- "flex-wrap": [{
1049
- flex: ["nowrap", "wrap", "wrap-reverse"]
1050
- }],
1051
- /**
1052
- * Flex
1053
- * @see https://tailwindcss.com/docs/flex
1054
- */
1055
- flex: [{
1056
- flex: [isNumber, isFraction, "auto", "initial", "none", isArbitraryValue]
1057
- }],
1058
- /**
1059
- * Flex Grow
1060
- * @see https://tailwindcss.com/docs/flex-grow
1061
- */
1062
- grow: [{
1063
- grow: ["", isNumber, isArbitraryVariable, isArbitraryValue]
1064
- }],
1065
- /**
1066
- * Flex Shrink
1067
- * @see https://tailwindcss.com/docs/flex-shrink
1068
- */
1069
- shrink: [{
1070
- shrink: ["", isNumber, isArbitraryVariable, isArbitraryValue]
1071
- }],
1072
- /**
1073
- * Order
1074
- * @see https://tailwindcss.com/docs/order
1075
- */
1076
- order: [{
1077
- order: [isInteger, "first", "last", "none", isArbitraryVariable, isArbitraryValue]
1078
- }],
1079
- /**
1080
- * Grid Template Columns
1081
- * @see https://tailwindcss.com/docs/grid-template-columns
1082
- */
1083
- "grid-cols": [{
1084
- "grid-cols": scaleGridTemplateColsRows()
1085
- }],
1086
- /**
1087
- * Grid Column Start / End
1088
- * @see https://tailwindcss.com/docs/grid-column
1089
- */
1090
- "col-start-end": [{
1091
- col: scaleGridColRowStartAndEnd()
1092
- }],
1093
- /**
1094
- * Grid Column Start
1095
- * @see https://tailwindcss.com/docs/grid-column
1096
- */
1097
- "col-start": [{
1098
- "col-start": scaleGridColRowStartOrEnd()
1099
- }],
1100
- /**
1101
- * Grid Column End
1102
- * @see https://tailwindcss.com/docs/grid-column
1103
- */
1104
- "col-end": [{
1105
- "col-end": scaleGridColRowStartOrEnd()
1106
- }],
1107
- /**
1108
- * Grid Template Rows
1109
- * @see https://tailwindcss.com/docs/grid-template-rows
1110
- */
1111
- "grid-rows": [{
1112
- "grid-rows": scaleGridTemplateColsRows()
1113
- }],
1114
- /**
1115
- * Grid Row Start / End
1116
- * @see https://tailwindcss.com/docs/grid-row
1117
- */
1118
- "row-start-end": [{
1119
- row: scaleGridColRowStartAndEnd()
1120
- }],
1121
- /**
1122
- * Grid Row Start
1123
- * @see https://tailwindcss.com/docs/grid-row
1124
- */
1125
- "row-start": [{
1126
- "row-start": scaleGridColRowStartOrEnd()
1127
- }],
1128
- /**
1129
- * Grid Row End
1130
- * @see https://tailwindcss.com/docs/grid-row
1131
- */
1132
- "row-end": [{
1133
- "row-end": scaleGridColRowStartOrEnd()
1134
- }],
1135
- /**
1136
- * Grid Auto Flow
1137
- * @see https://tailwindcss.com/docs/grid-auto-flow
1138
- */
1139
- "grid-flow": [{
1140
- "grid-flow": ["row", "col", "dense", "row-dense", "col-dense"]
1141
- }],
1142
- /**
1143
- * Grid Auto Columns
1144
- * @see https://tailwindcss.com/docs/grid-auto-columns
1145
- */
1146
- "auto-cols": [{
1147
- "auto-cols": scaleGridAutoColsRows()
1148
- }],
1149
- /**
1150
- * Grid Auto Rows
1151
- * @see https://tailwindcss.com/docs/grid-auto-rows
1152
- */
1153
- "auto-rows": [{
1154
- "auto-rows": scaleGridAutoColsRows()
1155
- }],
1156
- /**
1157
- * Gap
1158
- * @see https://tailwindcss.com/docs/gap
1159
- */
1160
- gap: [{
1161
- gap: scaleUnambiguousSpacing()
1162
- }],
1163
- /**
1164
- * Gap X
1165
- * @see https://tailwindcss.com/docs/gap
1166
- */
1167
- "gap-x": [{
1168
- "gap-x": scaleUnambiguousSpacing()
1169
- }],
1170
- /**
1171
- * Gap Y
1172
- * @see https://tailwindcss.com/docs/gap
1173
- */
1174
- "gap-y": [{
1175
- "gap-y": scaleUnambiguousSpacing()
1176
- }],
1177
- /**
1178
- * Justify Content
1179
- * @see https://tailwindcss.com/docs/justify-content
1180
- */
1181
- "justify-content": [{
1182
- justify: [...scaleAlignPrimaryAxis(), "normal"]
1183
- }],
1184
- /**
1185
- * Justify Items
1186
- * @see https://tailwindcss.com/docs/justify-items
1187
- */
1188
- "justify-items": [{
1189
- "justify-items": [...scaleAlignSecondaryAxis(), "normal"]
1190
- }],
1191
- /**
1192
- * Justify Self
1193
- * @see https://tailwindcss.com/docs/justify-self
1194
- */
1195
- "justify-self": [{
1196
- "justify-self": ["auto", ...scaleAlignSecondaryAxis()]
1197
- }],
1198
- /**
1199
- * Align Content
1200
- * @see https://tailwindcss.com/docs/align-content
1201
- */
1202
- "align-content": [{
1203
- content: ["normal", ...scaleAlignPrimaryAxis()]
1204
- }],
1205
- /**
1206
- * Align Items
1207
- * @see https://tailwindcss.com/docs/align-items
1208
- */
1209
- "align-items": [{
1210
- items: [...scaleAlignSecondaryAxis(), {
1211
- baseline: ["", "last"]
1212
- }]
1213
- }],
1214
- /**
1215
- * Align Self
1216
- * @see https://tailwindcss.com/docs/align-self
1217
- */
1218
- "align-self": [{
1219
- self: ["auto", ...scaleAlignSecondaryAxis(), {
1220
- baseline: ["", "last"]
1221
- }]
1222
- }],
1223
- /**
1224
- * Place Content
1225
- * @see https://tailwindcss.com/docs/place-content
1226
- */
1227
- "place-content": [{
1228
- "place-content": scaleAlignPrimaryAxis()
1229
- }],
1230
- /**
1231
- * Place Items
1232
- * @see https://tailwindcss.com/docs/place-items
1233
- */
1234
- "place-items": [{
1235
- "place-items": [...scaleAlignSecondaryAxis(), "baseline"]
1236
- }],
1237
- /**
1238
- * Place Self
1239
- * @see https://tailwindcss.com/docs/place-self
1240
- */
1241
- "place-self": [{
1242
- "place-self": ["auto", ...scaleAlignSecondaryAxis()]
1243
- }],
1244
- // Spacing
1245
- /**
1246
- * Padding
1247
- * @see https://tailwindcss.com/docs/padding
1248
- */
1249
- p: [{
1250
- p: scaleUnambiguousSpacing()
1251
- }],
1252
- /**
1253
- * Padding Inline
1254
- * @see https://tailwindcss.com/docs/padding
1255
- */
1256
- px: [{
1257
- px: scaleUnambiguousSpacing()
1258
- }],
1259
- /**
1260
- * Padding Block
1261
- * @see https://tailwindcss.com/docs/padding
1262
- */
1263
- py: [{
1264
- py: scaleUnambiguousSpacing()
1265
- }],
1266
- /**
1267
- * Padding Inline Start
1268
- * @see https://tailwindcss.com/docs/padding
1269
- */
1270
- ps: [{
1271
- ps: scaleUnambiguousSpacing()
1272
- }],
1273
- /**
1274
- * Padding Inline End
1275
- * @see https://tailwindcss.com/docs/padding
1276
- */
1277
- pe: [{
1278
- pe: scaleUnambiguousSpacing()
1279
- }],
1280
- /**
1281
- * Padding Block Start
1282
- * @see https://tailwindcss.com/docs/padding
1283
- */
1284
- pbs: [{
1285
- pbs: scaleUnambiguousSpacing()
1286
- }],
1287
- /**
1288
- * Padding Block End
1289
- * @see https://tailwindcss.com/docs/padding
1290
- */
1291
- pbe: [{
1292
- pbe: scaleUnambiguousSpacing()
1293
- }],
1294
- /**
1295
- * Padding Top
1296
- * @see https://tailwindcss.com/docs/padding
1297
- */
1298
- pt: [{
1299
- pt: scaleUnambiguousSpacing()
1300
- }],
1301
- /**
1302
- * Padding Right
1303
- * @see https://tailwindcss.com/docs/padding
1304
- */
1305
- pr: [{
1306
- pr: scaleUnambiguousSpacing()
1307
- }],
1308
- /**
1309
- * Padding Bottom
1310
- * @see https://tailwindcss.com/docs/padding
1311
- */
1312
- pb: [{
1313
- pb: scaleUnambiguousSpacing()
1314
- }],
1315
- /**
1316
- * Padding Left
1317
- * @see https://tailwindcss.com/docs/padding
1318
- */
1319
- pl: [{
1320
- pl: scaleUnambiguousSpacing()
1321
- }],
1322
- /**
1323
- * Margin
1324
- * @see https://tailwindcss.com/docs/margin
1325
- */
1326
- m: [{
1327
- m: scaleMargin()
1328
- }],
1329
- /**
1330
- * Margin Inline
1331
- * @see https://tailwindcss.com/docs/margin
1332
- */
1333
- mx: [{
1334
- mx: scaleMargin()
1335
- }],
1336
- /**
1337
- * Margin Block
1338
- * @see https://tailwindcss.com/docs/margin
1339
- */
1340
- my: [{
1341
- my: scaleMargin()
1342
- }],
1343
- /**
1344
- * Margin Inline Start
1345
- * @see https://tailwindcss.com/docs/margin
1346
- */
1347
- ms: [{
1348
- ms: scaleMargin()
1349
- }],
1350
- /**
1351
- * Margin Inline End
1352
- * @see https://tailwindcss.com/docs/margin
1353
- */
1354
- me: [{
1355
- me: scaleMargin()
1356
- }],
1357
- /**
1358
- * Margin Block Start
1359
- * @see https://tailwindcss.com/docs/margin
1360
- */
1361
- mbs: [{
1362
- mbs: scaleMargin()
1363
- }],
1364
- /**
1365
- * Margin Block End
1366
- * @see https://tailwindcss.com/docs/margin
1367
- */
1368
- mbe: [{
1369
- mbe: scaleMargin()
1370
- }],
1371
- /**
1372
- * Margin Top
1373
- * @see https://tailwindcss.com/docs/margin
1374
- */
1375
- mt: [{
1376
- mt: scaleMargin()
1377
- }],
1378
- /**
1379
- * Margin Right
1380
- * @see https://tailwindcss.com/docs/margin
1381
- */
1382
- mr: [{
1383
- mr: scaleMargin()
1384
- }],
1385
- /**
1386
- * Margin Bottom
1387
- * @see https://tailwindcss.com/docs/margin
1388
- */
1389
- mb: [{
1390
- mb: scaleMargin()
1391
- }],
1392
- /**
1393
- * Margin Left
1394
- * @see https://tailwindcss.com/docs/margin
1395
- */
1396
- ml: [{
1397
- ml: scaleMargin()
1398
- }],
1399
- /**
1400
- * Space Between X
1401
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
1402
- */
1403
- "space-x": [{
1404
- "space-x": scaleUnambiguousSpacing()
1405
- }],
1406
- /**
1407
- * Space Between X Reverse
1408
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
1409
- */
1410
- "space-x-reverse": ["space-x-reverse"],
1411
- /**
1412
- * Space Between Y
1413
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
1414
- */
1415
- "space-y": [{
1416
- "space-y": scaleUnambiguousSpacing()
1417
- }],
1418
- /**
1419
- * Space Between Y Reverse
1420
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
1421
- */
1422
- "space-y-reverse": ["space-y-reverse"],
1423
- // --------------
1424
- // --- Sizing ---
1425
- // --------------
1426
- /**
1427
- * Size
1428
- * @see https://tailwindcss.com/docs/width#setting-both-width-and-height
1429
- */
1430
- size: [{
1431
- size: scaleSizing()
1432
- }],
1433
- /**
1434
- * Inline Size
1435
- * @see https://tailwindcss.com/docs/width
1436
- */
1437
- "inline-size": [{
1438
- inline: ["auto", ...scaleSizingInline()]
1439
- }],
1440
- /**
1441
- * Min-Inline Size
1442
- * @see https://tailwindcss.com/docs/min-width
1443
- */
1444
- "min-inline-size": [{
1445
- "min-inline": ["auto", ...scaleSizingInline()]
1446
- }],
1447
- /**
1448
- * Max-Inline Size
1449
- * @see https://tailwindcss.com/docs/max-width
1450
- */
1451
- "max-inline-size": [{
1452
- "max-inline": ["none", ...scaleSizingInline()]
1453
- }],
1454
- /**
1455
- * Block Size
1456
- * @see https://tailwindcss.com/docs/height
1457
- */
1458
- "block-size": [{
1459
- block: ["auto", ...scaleSizingBlock()]
1460
- }],
1461
- /**
1462
- * Min-Block Size
1463
- * @see https://tailwindcss.com/docs/min-height
1464
- */
1465
- "min-block-size": [{
1466
- "min-block": ["auto", ...scaleSizingBlock()]
1467
- }],
1468
- /**
1469
- * Max-Block Size
1470
- * @see https://tailwindcss.com/docs/max-height
1471
- */
1472
- "max-block-size": [{
1473
- "max-block": ["none", ...scaleSizingBlock()]
1474
- }],
1475
- /**
1476
- * Width
1477
- * @see https://tailwindcss.com/docs/width
1478
- */
1479
- w: [{
1480
- w: [themeContainer, "screen", ...scaleSizing()]
1481
- }],
1482
- /**
1483
- * Min-Width
1484
- * @see https://tailwindcss.com/docs/min-width
1485
- */
1486
- "min-w": [{
1487
- "min-w": [
1488
- themeContainer,
1489
- "screen",
1490
- /** Deprecated. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
1491
- "none",
1492
- ...scaleSizing()
1493
- ]
1494
- }],
1495
- /**
1496
- * Max-Width
1497
- * @see https://tailwindcss.com/docs/max-width
1498
- */
1499
- "max-w": [{
1500
- "max-w": [
1501
- themeContainer,
1502
- "screen",
1503
- "none",
1504
- /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
1505
- "prose",
1506
- /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
1507
- {
1508
- screen: [themeBreakpoint]
1509
- },
1510
- ...scaleSizing()
1511
- ]
1512
- }],
1513
- /**
1514
- * Height
1515
- * @see https://tailwindcss.com/docs/height
1516
- */
1517
- h: [{
1518
- h: ["screen", "lh", ...scaleSizing()]
1519
- }],
1520
- /**
1521
- * Min-Height
1522
- * @see https://tailwindcss.com/docs/min-height
1523
- */
1524
- "min-h": [{
1525
- "min-h": ["screen", "lh", "none", ...scaleSizing()]
1526
- }],
1527
- /**
1528
- * Max-Height
1529
- * @see https://tailwindcss.com/docs/max-height
1530
- */
1531
- "max-h": [{
1532
- "max-h": ["screen", "lh", ...scaleSizing()]
1533
- }],
1534
- // ------------------
1535
- // --- Typography ---
1536
- // ------------------
1537
- /**
1538
- * Font Size
1539
- * @see https://tailwindcss.com/docs/font-size
1540
- */
1541
- "font-size": [{
1542
- text: ["base", themeText, isArbitraryVariableLength, isArbitraryLength]
1543
- }],
1544
- /**
1545
- * Font Smoothing
1546
- * @see https://tailwindcss.com/docs/font-smoothing
1547
- */
1548
- "font-smoothing": ["antialiased", "subpixel-antialiased"],
1549
- /**
1550
- * Font Style
1551
- * @see https://tailwindcss.com/docs/font-style
1552
- */
1553
- "font-style": ["italic", "not-italic"],
1554
- /**
1555
- * Font Weight
1556
- * @see https://tailwindcss.com/docs/font-weight
1557
- */
1558
- "font-weight": [{
1559
- font: [themeFontWeight, isArbitraryVariableWeight, isArbitraryWeight]
1560
- }],
1561
- /**
1562
- * Font Stretch
1563
- * @see https://tailwindcss.com/docs/font-stretch
1564
- */
1565
- "font-stretch": [{
1566
- "font-stretch": ["ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "normal", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded", isPercent, isArbitraryValue]
1567
- }],
1568
- /**
1569
- * Font Family
1570
- * @see https://tailwindcss.com/docs/font-family
1571
- */
1572
- "font-family": [{
1573
- font: [isArbitraryVariableFamilyName, isArbitraryFamilyName, themeFont]
1574
- }],
1575
- /**
1576
- * Font Feature Settings
1577
- * @see https://tailwindcss.com/docs/font-feature-settings
1578
- */
1579
- "font-features": [{
1580
- "font-features": [isArbitraryValue]
1581
- }],
1582
- /**
1583
- * Font Variant Numeric
1584
- * @see https://tailwindcss.com/docs/font-variant-numeric
1585
- */
1586
- "fvn-normal": ["normal-nums"],
1587
- /**
1588
- * Font Variant Numeric
1589
- * @see https://tailwindcss.com/docs/font-variant-numeric
1590
- */
1591
- "fvn-ordinal": ["ordinal"],
1592
- /**
1593
- * Font Variant Numeric
1594
- * @see https://tailwindcss.com/docs/font-variant-numeric
1595
- */
1596
- "fvn-slashed-zero": ["slashed-zero"],
1597
- /**
1598
- * Font Variant Numeric
1599
- * @see https://tailwindcss.com/docs/font-variant-numeric
1600
- */
1601
- "fvn-figure": ["lining-nums", "oldstyle-nums"],
1602
- /**
1603
- * Font Variant Numeric
1604
- * @see https://tailwindcss.com/docs/font-variant-numeric
1605
- */
1606
- "fvn-spacing": ["proportional-nums", "tabular-nums"],
1607
- /**
1608
- * Font Variant Numeric
1609
- * @see https://tailwindcss.com/docs/font-variant-numeric
1610
- */
1611
- "fvn-fraction": ["diagonal-fractions", "stacked-fractions"],
1612
- /**
1613
- * Letter Spacing
1614
- * @see https://tailwindcss.com/docs/letter-spacing
1615
- */
1616
- tracking: [{
1617
- tracking: [themeTracking, isArbitraryVariable, isArbitraryValue]
1618
- }],
1619
- /**
1620
- * Line Clamp
1621
- * @see https://tailwindcss.com/docs/line-clamp
1622
- */
1623
- "line-clamp": [{
1624
- "line-clamp": [isNumber, "none", isArbitraryVariable, isArbitraryNumber]
1625
- }],
1626
- /**
1627
- * Line Height
1628
- * @see https://tailwindcss.com/docs/line-height
1629
- */
1630
- leading: [{
1631
- leading: [
1632
- /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
1633
- themeLeading,
1634
- ...scaleUnambiguousSpacing()
1635
- ]
1636
- }],
1637
- /**
1638
- * List Style Image
1639
- * @see https://tailwindcss.com/docs/list-style-image
1640
- */
1641
- "list-image": [{
1642
- "list-image": ["none", isArbitraryVariable, isArbitraryValue]
1643
- }],
1644
- /**
1645
- * List Style Position
1646
- * @see https://tailwindcss.com/docs/list-style-position
1647
- */
1648
- "list-style-position": [{
1649
- list: ["inside", "outside"]
1650
- }],
1651
- /**
1652
- * List Style Type
1653
- * @see https://tailwindcss.com/docs/list-style-type
1654
- */
1655
- "list-style-type": [{
1656
- list: ["disc", "decimal", "none", isArbitraryVariable, isArbitraryValue]
1657
- }],
1658
- /**
1659
- * Text Alignment
1660
- * @see https://tailwindcss.com/docs/text-align
1661
- */
1662
- "text-alignment": [{
1663
- text: ["left", "center", "right", "justify", "start", "end"]
1664
- }],
1665
- /**
1666
- * Placeholder Color
1667
- * @deprecated since Tailwind CSS v3.0.0
1668
- * @see https://v3.tailwindcss.com/docs/placeholder-color
1669
- */
1670
- "placeholder-color": [{
1671
- placeholder: scaleColor()
1672
- }],
1673
- /**
1674
- * Text Color
1675
- * @see https://tailwindcss.com/docs/text-color
1676
- */
1677
- "text-color": [{
1678
- text: scaleColor()
1679
- }],
1680
- /**
1681
- * Text Decoration
1682
- * @see https://tailwindcss.com/docs/text-decoration
1683
- */
1684
- "text-decoration": ["underline", "overline", "line-through", "no-underline"],
1685
- /**
1686
- * Text Decoration Style
1687
- * @see https://tailwindcss.com/docs/text-decoration-style
1688
- */
1689
- "text-decoration-style": [{
1690
- decoration: [...scaleLineStyle(), "wavy"]
1691
- }],
1692
- /**
1693
- * Text Decoration Thickness
1694
- * @see https://tailwindcss.com/docs/text-decoration-thickness
1695
- */
1696
- "text-decoration-thickness": [{
1697
- decoration: [isNumber, "from-font", "auto", isArbitraryVariable, isArbitraryLength]
1698
- }],
1699
- /**
1700
- * Text Decoration Color
1701
- * @see https://tailwindcss.com/docs/text-decoration-color
1702
- */
1703
- "text-decoration-color": [{
1704
- decoration: scaleColor()
1705
- }],
1706
- /**
1707
- * Text Underline Offset
1708
- * @see https://tailwindcss.com/docs/text-underline-offset
1709
- */
1710
- "underline-offset": [{
1711
- "underline-offset": [isNumber, "auto", isArbitraryVariable, isArbitraryValue]
1712
- }],
1713
- /**
1714
- * Text Transform
1715
- * @see https://tailwindcss.com/docs/text-transform
1716
- */
1717
- "text-transform": ["uppercase", "lowercase", "capitalize", "normal-case"],
1718
- /**
1719
- * Text Overflow
1720
- * @see https://tailwindcss.com/docs/text-overflow
1721
- */
1722
- "text-overflow": ["truncate", "text-ellipsis", "text-clip"],
1723
- /**
1724
- * Text Wrap
1725
- * @see https://tailwindcss.com/docs/text-wrap
1726
- */
1727
- "text-wrap": [{
1728
- text: ["wrap", "nowrap", "balance", "pretty"]
1729
- }],
1730
- /**
1731
- * Text Indent
1732
- * @see https://tailwindcss.com/docs/text-indent
1733
- */
1734
- indent: [{
1735
- indent: scaleUnambiguousSpacing()
1736
- }],
1737
- /**
1738
- * Vertical Alignment
1739
- * @see https://tailwindcss.com/docs/vertical-align
1740
- */
1741
- "vertical-align": [{
1742
- align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", isArbitraryVariable, isArbitraryValue]
1743
- }],
1744
- /**
1745
- * Whitespace
1746
- * @see https://tailwindcss.com/docs/whitespace
1747
- */
1748
- whitespace: [{
1749
- whitespace: ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces"]
1750
- }],
1751
- /**
1752
- * Word Break
1753
- * @see https://tailwindcss.com/docs/word-break
1754
- */
1755
- break: [{
1756
- break: ["normal", "words", "all", "keep"]
1757
- }],
1758
- /**
1759
- * Overflow Wrap
1760
- * @see https://tailwindcss.com/docs/overflow-wrap
1761
- */
1762
- wrap: [{
1763
- wrap: ["break-word", "anywhere", "normal"]
1764
- }],
1765
- /**
1766
- * Hyphens
1767
- * @see https://tailwindcss.com/docs/hyphens
1768
- */
1769
- hyphens: [{
1770
- hyphens: ["none", "manual", "auto"]
1771
- }],
1772
- /**
1773
- * Content
1774
- * @see https://tailwindcss.com/docs/content
1775
- */
1776
- content: [{
1777
- content: ["none", isArbitraryVariable, isArbitraryValue]
1778
- }],
1779
- // -------------------
1780
- // --- Backgrounds ---
1781
- // -------------------
1782
- /**
1783
- * Background Attachment
1784
- * @see https://tailwindcss.com/docs/background-attachment
1785
- */
1786
- "bg-attachment": [{
1787
- bg: ["fixed", "local", "scroll"]
1788
- }],
1789
- /**
1790
- * Background Clip
1791
- * @see https://tailwindcss.com/docs/background-clip
1792
- */
1793
- "bg-clip": [{
1794
- "bg-clip": ["border", "padding", "content", "text"]
1795
- }],
1796
- /**
1797
- * Background Origin
1798
- * @see https://tailwindcss.com/docs/background-origin
1799
- */
1800
- "bg-origin": [{
1801
- "bg-origin": ["border", "padding", "content"]
1802
- }],
1803
- /**
1804
- * Background Position
1805
- * @see https://tailwindcss.com/docs/background-position
1806
- */
1807
- "bg-position": [{
1808
- bg: scaleBgPosition()
1809
- }],
1810
- /**
1811
- * Background Repeat
1812
- * @see https://tailwindcss.com/docs/background-repeat
1813
- */
1814
- "bg-repeat": [{
1815
- bg: scaleBgRepeat()
1816
- }],
1817
- /**
1818
- * Background Size
1819
- * @see https://tailwindcss.com/docs/background-size
1820
- */
1821
- "bg-size": [{
1822
- bg: scaleBgSize()
1823
- }],
1824
- /**
1825
- * Background Image
1826
- * @see https://tailwindcss.com/docs/background-image
1827
- */
1828
- "bg-image": [{
1829
- bg: ["none", {
1830
- linear: [{
1831
- to: ["t", "tr", "r", "br", "b", "bl", "l", "tl"]
1832
- }, isInteger, isArbitraryVariable, isArbitraryValue],
1833
- radial: ["", isArbitraryVariable, isArbitraryValue],
1834
- conic: [isInteger, isArbitraryVariable, isArbitraryValue]
1835
- }, isArbitraryVariableImage, isArbitraryImage]
1836
- }],
1837
- /**
1838
- * Background Color
1839
- * @see https://tailwindcss.com/docs/background-color
1840
- */
1841
- "bg-color": [{
1842
- bg: scaleColor()
1843
- }],
1844
- /**
1845
- * Gradient Color Stops From Position
1846
- * @see https://tailwindcss.com/docs/gradient-color-stops
1847
- */
1848
- "gradient-from-pos": [{
1849
- from: scaleGradientStopPosition()
1850
- }],
1851
- /**
1852
- * Gradient Color Stops Via Position
1853
- * @see https://tailwindcss.com/docs/gradient-color-stops
1854
- */
1855
- "gradient-via-pos": [{
1856
- via: scaleGradientStopPosition()
1857
- }],
1858
- /**
1859
- * Gradient Color Stops To Position
1860
- * @see https://tailwindcss.com/docs/gradient-color-stops
1861
- */
1862
- "gradient-to-pos": [{
1863
- to: scaleGradientStopPosition()
1864
- }],
1865
- /**
1866
- * Gradient Color Stops From
1867
- * @see https://tailwindcss.com/docs/gradient-color-stops
1868
- */
1869
- "gradient-from": [{
1870
- from: scaleColor()
1871
- }],
1872
- /**
1873
- * Gradient Color Stops Via
1874
- * @see https://tailwindcss.com/docs/gradient-color-stops
1875
- */
1876
- "gradient-via": [{
1877
- via: scaleColor()
1878
- }],
1879
- /**
1880
- * Gradient Color Stops To
1881
- * @see https://tailwindcss.com/docs/gradient-color-stops
1882
- */
1883
- "gradient-to": [{
1884
- to: scaleColor()
1885
- }],
1886
- // ---------------
1887
- // --- Borders ---
1888
- // ---------------
1889
- /**
1890
- * Border Radius
1891
- * @see https://tailwindcss.com/docs/border-radius
1892
- */
1893
- rounded: [{
1894
- rounded: scaleRadius()
1895
- }],
1896
- /**
1897
- * Border Radius Start
1898
- * @see https://tailwindcss.com/docs/border-radius
1899
- */
1900
- "rounded-s": [{
1901
- "rounded-s": scaleRadius()
1902
- }],
1903
- /**
1904
- * Border Radius End
1905
- * @see https://tailwindcss.com/docs/border-radius
1906
- */
1907
- "rounded-e": [{
1908
- "rounded-e": scaleRadius()
1909
- }],
1910
- /**
1911
- * Border Radius Top
1912
- * @see https://tailwindcss.com/docs/border-radius
1913
- */
1914
- "rounded-t": [{
1915
- "rounded-t": scaleRadius()
1916
- }],
1917
- /**
1918
- * Border Radius Right
1919
- * @see https://tailwindcss.com/docs/border-radius
1920
- */
1921
- "rounded-r": [{
1922
- "rounded-r": scaleRadius()
1923
- }],
1924
- /**
1925
- * Border Radius Bottom
1926
- * @see https://tailwindcss.com/docs/border-radius
1927
- */
1928
- "rounded-b": [{
1929
- "rounded-b": scaleRadius()
1930
- }],
1931
- /**
1932
- * Border Radius Left
1933
- * @see https://tailwindcss.com/docs/border-radius
1934
- */
1935
- "rounded-l": [{
1936
- "rounded-l": scaleRadius()
1937
- }],
1938
- /**
1939
- * Border Radius Start Start
1940
- * @see https://tailwindcss.com/docs/border-radius
1941
- */
1942
- "rounded-ss": [{
1943
- "rounded-ss": scaleRadius()
1944
- }],
1945
- /**
1946
- * Border Radius Start End
1947
- * @see https://tailwindcss.com/docs/border-radius
1948
- */
1949
- "rounded-se": [{
1950
- "rounded-se": scaleRadius()
1951
- }],
1952
- /**
1953
- * Border Radius End End
1954
- * @see https://tailwindcss.com/docs/border-radius
1955
- */
1956
- "rounded-ee": [{
1957
- "rounded-ee": scaleRadius()
1958
- }],
1959
- /**
1960
- * Border Radius End Start
1961
- * @see https://tailwindcss.com/docs/border-radius
1962
- */
1963
- "rounded-es": [{
1964
- "rounded-es": scaleRadius()
1965
- }],
1966
- /**
1967
- * Border Radius Top Left
1968
- * @see https://tailwindcss.com/docs/border-radius
1969
- */
1970
- "rounded-tl": [{
1971
- "rounded-tl": scaleRadius()
1972
- }],
1973
- /**
1974
- * Border Radius Top Right
1975
- * @see https://tailwindcss.com/docs/border-radius
1976
- */
1977
- "rounded-tr": [{
1978
- "rounded-tr": scaleRadius()
1979
- }],
1980
- /**
1981
- * Border Radius Bottom Right
1982
- * @see https://tailwindcss.com/docs/border-radius
1983
- */
1984
- "rounded-br": [{
1985
- "rounded-br": scaleRadius()
1986
- }],
1987
- /**
1988
- * Border Radius Bottom Left
1989
- * @see https://tailwindcss.com/docs/border-radius
1990
- */
1991
- "rounded-bl": [{
1992
- "rounded-bl": scaleRadius()
1993
- }],
1994
- /**
1995
- * Border Width
1996
- * @see https://tailwindcss.com/docs/border-width
1997
- */
1998
- "border-w": [{
1999
- border: scaleBorderWidth()
2000
- }],
2001
- /**
2002
- * Border Width Inline
2003
- * @see https://tailwindcss.com/docs/border-width
2004
- */
2005
- "border-w-x": [{
2006
- "border-x": scaleBorderWidth()
2007
- }],
2008
- /**
2009
- * Border Width Block
2010
- * @see https://tailwindcss.com/docs/border-width
2011
- */
2012
- "border-w-y": [{
2013
- "border-y": scaleBorderWidth()
2014
- }],
2015
- /**
2016
- * Border Width Inline Start
2017
- * @see https://tailwindcss.com/docs/border-width
2018
- */
2019
- "border-w-s": [{
2020
- "border-s": scaleBorderWidth()
2021
- }],
2022
- /**
2023
- * Border Width Inline End
2024
- * @see https://tailwindcss.com/docs/border-width
2025
- */
2026
- "border-w-e": [{
2027
- "border-e": scaleBorderWidth()
2028
- }],
2029
- /**
2030
- * Border Width Block Start
2031
- * @see https://tailwindcss.com/docs/border-width
2032
- */
2033
- "border-w-bs": [{
2034
- "border-bs": scaleBorderWidth()
2035
- }],
2036
- /**
2037
- * Border Width Block End
2038
- * @see https://tailwindcss.com/docs/border-width
2039
- */
2040
- "border-w-be": [{
2041
- "border-be": scaleBorderWidth()
2042
- }],
2043
- /**
2044
- * Border Width Top
2045
- * @see https://tailwindcss.com/docs/border-width
2046
- */
2047
- "border-w-t": [{
2048
- "border-t": scaleBorderWidth()
2049
- }],
2050
- /**
2051
- * Border Width Right
2052
- * @see https://tailwindcss.com/docs/border-width
2053
- */
2054
- "border-w-r": [{
2055
- "border-r": scaleBorderWidth()
2056
- }],
2057
- /**
2058
- * Border Width Bottom
2059
- * @see https://tailwindcss.com/docs/border-width
2060
- */
2061
- "border-w-b": [{
2062
- "border-b": scaleBorderWidth()
2063
- }],
2064
- /**
2065
- * Border Width Left
2066
- * @see https://tailwindcss.com/docs/border-width
2067
- */
2068
- "border-w-l": [{
2069
- "border-l": scaleBorderWidth()
2070
- }],
2071
- /**
2072
- * Divide Width X
2073
- * @see https://tailwindcss.com/docs/border-width#between-children
2074
- */
2075
- "divide-x": [{
2076
- "divide-x": scaleBorderWidth()
2077
- }],
2078
- /**
2079
- * Divide Width X Reverse
2080
- * @see https://tailwindcss.com/docs/border-width#between-children
2081
- */
2082
- "divide-x-reverse": ["divide-x-reverse"],
2083
- /**
2084
- * Divide Width Y
2085
- * @see https://tailwindcss.com/docs/border-width#between-children
2086
- */
2087
- "divide-y": [{
2088
- "divide-y": scaleBorderWidth()
2089
- }],
2090
- /**
2091
- * Divide Width Y Reverse
2092
- * @see https://tailwindcss.com/docs/border-width#between-children
2093
- */
2094
- "divide-y-reverse": ["divide-y-reverse"],
2095
- /**
2096
- * Border Style
2097
- * @see https://tailwindcss.com/docs/border-style
2098
- */
2099
- "border-style": [{
2100
- border: [...scaleLineStyle(), "hidden", "none"]
2101
- }],
2102
- /**
2103
- * Divide Style
2104
- * @see https://tailwindcss.com/docs/border-style#setting-the-divider-style
2105
- */
2106
- "divide-style": [{
2107
- divide: [...scaleLineStyle(), "hidden", "none"]
2108
- }],
2109
- /**
2110
- * Border Color
2111
- * @see https://tailwindcss.com/docs/border-color
2112
- */
2113
- "border-color": [{
2114
- border: scaleColor()
2115
- }],
2116
- /**
2117
- * Border Color Inline
2118
- * @see https://tailwindcss.com/docs/border-color
2119
- */
2120
- "border-color-x": [{
2121
- "border-x": scaleColor()
2122
- }],
2123
- /**
2124
- * Border Color Block
2125
- * @see https://tailwindcss.com/docs/border-color
2126
- */
2127
- "border-color-y": [{
2128
- "border-y": scaleColor()
2129
- }],
2130
- /**
2131
- * Border Color Inline Start
2132
- * @see https://tailwindcss.com/docs/border-color
2133
- */
2134
- "border-color-s": [{
2135
- "border-s": scaleColor()
2136
- }],
2137
- /**
2138
- * Border Color Inline End
2139
- * @see https://tailwindcss.com/docs/border-color
2140
- */
2141
- "border-color-e": [{
2142
- "border-e": scaleColor()
2143
- }],
2144
- /**
2145
- * Border Color Block Start
2146
- * @see https://tailwindcss.com/docs/border-color
2147
- */
2148
- "border-color-bs": [{
2149
- "border-bs": scaleColor()
2150
- }],
2151
- /**
2152
- * Border Color Block End
2153
- * @see https://tailwindcss.com/docs/border-color
2154
- */
2155
- "border-color-be": [{
2156
- "border-be": scaleColor()
2157
- }],
2158
- /**
2159
- * Border Color Top
2160
- * @see https://tailwindcss.com/docs/border-color
2161
- */
2162
- "border-color-t": [{
2163
- "border-t": scaleColor()
2164
- }],
2165
- /**
2166
- * Border Color Right
2167
- * @see https://tailwindcss.com/docs/border-color
2168
- */
2169
- "border-color-r": [{
2170
- "border-r": scaleColor()
2171
- }],
2172
- /**
2173
- * Border Color Bottom
2174
- * @see https://tailwindcss.com/docs/border-color
2175
- */
2176
- "border-color-b": [{
2177
- "border-b": scaleColor()
2178
- }],
2179
- /**
2180
- * Border Color Left
2181
- * @see https://tailwindcss.com/docs/border-color
2182
- */
2183
- "border-color-l": [{
2184
- "border-l": scaleColor()
2185
- }],
2186
- /**
2187
- * Divide Color
2188
- * @see https://tailwindcss.com/docs/divide-color
2189
- */
2190
- "divide-color": [{
2191
- divide: scaleColor()
2192
- }],
2193
- /**
2194
- * Outline Style
2195
- * @see https://tailwindcss.com/docs/outline-style
2196
- */
2197
- "outline-style": [{
2198
- outline: [...scaleLineStyle(), "none", "hidden"]
2199
- }],
2200
- /**
2201
- * Outline Offset
2202
- * @see https://tailwindcss.com/docs/outline-offset
2203
- */
2204
- "outline-offset": [{
2205
- "outline-offset": [isNumber, isArbitraryVariable, isArbitraryValue]
2206
- }],
2207
- /**
2208
- * Outline Width
2209
- * @see https://tailwindcss.com/docs/outline-width
2210
- */
2211
- "outline-w": [{
2212
- outline: ["", isNumber, isArbitraryVariableLength, isArbitraryLength]
2213
- }],
2214
- /**
2215
- * Outline Color
2216
- * @see https://tailwindcss.com/docs/outline-color
2217
- */
2218
- "outline-color": [{
2219
- outline: scaleColor()
2220
- }],
2221
- // ---------------
2222
- // --- Effects ---
2223
- // ---------------
2224
- /**
2225
- * Box Shadow
2226
- * @see https://tailwindcss.com/docs/box-shadow
2227
- */
2228
- shadow: [{
2229
- shadow: [
2230
- // Deprecated since Tailwind CSS v4.0.0
2231
- "",
2232
- "none",
2233
- themeShadow,
2234
- isArbitraryVariableShadow,
2235
- isArbitraryShadow
2236
- ]
2237
- }],
2238
- /**
2239
- * Box Shadow Color
2240
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-shadow-color
2241
- */
2242
- "shadow-color": [{
2243
- shadow: scaleColor()
2244
- }],
2245
- /**
2246
- * Inset Box Shadow
2247
- * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-shadow
2248
- */
2249
- "inset-shadow": [{
2250
- "inset-shadow": ["none", themeInsetShadow, isArbitraryVariableShadow, isArbitraryShadow]
2251
- }],
2252
- /**
2253
- * Inset Box Shadow Color
2254
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-shadow-color
2255
- */
2256
- "inset-shadow-color": [{
2257
- "inset-shadow": scaleColor()
2258
- }],
2259
- /**
2260
- * Ring Width
2261
- * @see https://tailwindcss.com/docs/box-shadow#adding-a-ring
2262
- */
2263
- "ring-w": [{
2264
- ring: scaleBorderWidth()
2265
- }],
2266
- /**
2267
- * Ring Width Inset
2268
- * @see https://v3.tailwindcss.com/docs/ring-width#inset-rings
2269
- * @deprecated since Tailwind CSS v4.0.0
2270
- * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
2271
- */
2272
- "ring-w-inset": ["ring-inset"],
2273
- /**
2274
- * Ring Color
2275
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-ring-color
2276
- */
2277
- "ring-color": [{
2278
- ring: scaleColor()
2279
- }],
2280
- /**
2281
- * Ring Offset Width
2282
- * @see https://v3.tailwindcss.com/docs/ring-offset-width
2283
- * @deprecated since Tailwind CSS v4.0.0
2284
- * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
2285
- */
2286
- "ring-offset-w": [{
2287
- "ring-offset": [isNumber, isArbitraryLength]
2288
- }],
2289
- /**
2290
- * Ring Offset Color
2291
- * @see https://v3.tailwindcss.com/docs/ring-offset-color
2292
- * @deprecated since Tailwind CSS v4.0.0
2293
- * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
2294
- */
2295
- "ring-offset-color": [{
2296
- "ring-offset": scaleColor()
2297
- }],
2298
- /**
2299
- * Inset Ring Width
2300
- * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-ring
2301
- */
2302
- "inset-ring-w": [{
2303
- "inset-ring": scaleBorderWidth()
2304
- }],
2305
- /**
2306
- * Inset Ring Color
2307
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-ring-color
2308
- */
2309
- "inset-ring-color": [{
2310
- "inset-ring": scaleColor()
2311
- }],
2312
- /**
2313
- * Text Shadow
2314
- * @see https://tailwindcss.com/docs/text-shadow
2315
- */
2316
- "text-shadow": [{
2317
- "text-shadow": ["none", themeTextShadow, isArbitraryVariableShadow, isArbitraryShadow]
2318
- }],
2319
- /**
2320
- * Text Shadow Color
2321
- * @see https://tailwindcss.com/docs/text-shadow#setting-the-shadow-color
2322
- */
2323
- "text-shadow-color": [{
2324
- "text-shadow": scaleColor()
2325
- }],
2326
- /**
2327
- * Opacity
2328
- * @see https://tailwindcss.com/docs/opacity
2329
- */
2330
- opacity: [{
2331
- opacity: [isNumber, isArbitraryVariable, isArbitraryValue]
2332
- }],
2333
- /**
2334
- * Mix Blend Mode
2335
- * @see https://tailwindcss.com/docs/mix-blend-mode
2336
- */
2337
- "mix-blend": [{
2338
- "mix-blend": [...scaleBlendMode(), "plus-darker", "plus-lighter"]
2339
- }],
2340
- /**
2341
- * Background Blend Mode
2342
- * @see https://tailwindcss.com/docs/background-blend-mode
2343
- */
2344
- "bg-blend": [{
2345
- "bg-blend": scaleBlendMode()
2346
- }],
2347
- /**
2348
- * Mask Clip
2349
- * @see https://tailwindcss.com/docs/mask-clip
2350
- */
2351
- "mask-clip": [{
2352
- "mask-clip": ["border", "padding", "content", "fill", "stroke", "view"]
2353
- }, "mask-no-clip"],
2354
- /**
2355
- * Mask Composite
2356
- * @see https://tailwindcss.com/docs/mask-composite
2357
- */
2358
- "mask-composite": [{
2359
- mask: ["add", "subtract", "intersect", "exclude"]
2360
- }],
2361
- /**
2362
- * Mask Image
2363
- * @see https://tailwindcss.com/docs/mask-image
2364
- */
2365
- "mask-image-linear-pos": [{
2366
- "mask-linear": [isNumber]
2367
- }],
2368
- "mask-image-linear-from-pos": [{
2369
- "mask-linear-from": scaleMaskImagePosition()
2370
- }],
2371
- "mask-image-linear-to-pos": [{
2372
- "mask-linear-to": scaleMaskImagePosition()
2373
- }],
2374
- "mask-image-linear-from-color": [{
2375
- "mask-linear-from": scaleColor()
2376
- }],
2377
- "mask-image-linear-to-color": [{
2378
- "mask-linear-to": scaleColor()
2379
- }],
2380
- "mask-image-t-from-pos": [{
2381
- "mask-t-from": scaleMaskImagePosition()
2382
- }],
2383
- "mask-image-t-to-pos": [{
2384
- "mask-t-to": scaleMaskImagePosition()
2385
- }],
2386
- "mask-image-t-from-color": [{
2387
- "mask-t-from": scaleColor()
2388
- }],
2389
- "mask-image-t-to-color": [{
2390
- "mask-t-to": scaleColor()
2391
- }],
2392
- "mask-image-r-from-pos": [{
2393
- "mask-r-from": scaleMaskImagePosition()
2394
- }],
2395
- "mask-image-r-to-pos": [{
2396
- "mask-r-to": scaleMaskImagePosition()
2397
- }],
2398
- "mask-image-r-from-color": [{
2399
- "mask-r-from": scaleColor()
2400
- }],
2401
- "mask-image-r-to-color": [{
2402
- "mask-r-to": scaleColor()
2403
- }],
2404
- "mask-image-b-from-pos": [{
2405
- "mask-b-from": scaleMaskImagePosition()
2406
- }],
2407
- "mask-image-b-to-pos": [{
2408
- "mask-b-to": scaleMaskImagePosition()
2409
- }],
2410
- "mask-image-b-from-color": [{
2411
- "mask-b-from": scaleColor()
2412
- }],
2413
- "mask-image-b-to-color": [{
2414
- "mask-b-to": scaleColor()
2415
- }],
2416
- "mask-image-l-from-pos": [{
2417
- "mask-l-from": scaleMaskImagePosition()
2418
- }],
2419
- "mask-image-l-to-pos": [{
2420
- "mask-l-to": scaleMaskImagePosition()
2421
- }],
2422
- "mask-image-l-from-color": [{
2423
- "mask-l-from": scaleColor()
2424
- }],
2425
- "mask-image-l-to-color": [{
2426
- "mask-l-to": scaleColor()
2427
- }],
2428
- "mask-image-x-from-pos": [{
2429
- "mask-x-from": scaleMaskImagePosition()
2430
- }],
2431
- "mask-image-x-to-pos": [{
2432
- "mask-x-to": scaleMaskImagePosition()
2433
- }],
2434
- "mask-image-x-from-color": [{
2435
- "mask-x-from": scaleColor()
2436
- }],
2437
- "mask-image-x-to-color": [{
2438
- "mask-x-to": scaleColor()
2439
- }],
2440
- "mask-image-y-from-pos": [{
2441
- "mask-y-from": scaleMaskImagePosition()
2442
- }],
2443
- "mask-image-y-to-pos": [{
2444
- "mask-y-to": scaleMaskImagePosition()
2445
- }],
2446
- "mask-image-y-from-color": [{
2447
- "mask-y-from": scaleColor()
2448
- }],
2449
- "mask-image-y-to-color": [{
2450
- "mask-y-to": scaleColor()
2451
- }],
2452
- "mask-image-radial": [{
2453
- "mask-radial": [isArbitraryVariable, isArbitraryValue]
2454
- }],
2455
- "mask-image-radial-from-pos": [{
2456
- "mask-radial-from": scaleMaskImagePosition()
2457
- }],
2458
- "mask-image-radial-to-pos": [{
2459
- "mask-radial-to": scaleMaskImagePosition()
2460
- }],
2461
- "mask-image-radial-from-color": [{
2462
- "mask-radial-from": scaleColor()
2463
- }],
2464
- "mask-image-radial-to-color": [{
2465
- "mask-radial-to": scaleColor()
2466
- }],
2467
- "mask-image-radial-shape": [{
2468
- "mask-radial": ["circle", "ellipse"]
2469
- }],
2470
- "mask-image-radial-size": [{
2471
- "mask-radial": [{
2472
- closest: ["side", "corner"],
2473
- farthest: ["side", "corner"]
2474
- }]
2475
- }],
2476
- "mask-image-radial-pos": [{
2477
- "mask-radial-at": scalePosition()
2478
- }],
2479
- "mask-image-conic-pos": [{
2480
- "mask-conic": [isNumber]
2481
- }],
2482
- "mask-image-conic-from-pos": [{
2483
- "mask-conic-from": scaleMaskImagePosition()
2484
- }],
2485
- "mask-image-conic-to-pos": [{
2486
- "mask-conic-to": scaleMaskImagePosition()
2487
- }],
2488
- "mask-image-conic-from-color": [{
2489
- "mask-conic-from": scaleColor()
2490
- }],
2491
- "mask-image-conic-to-color": [{
2492
- "mask-conic-to": scaleColor()
2493
- }],
2494
- /**
2495
- * Mask Mode
2496
- * @see https://tailwindcss.com/docs/mask-mode
2497
- */
2498
- "mask-mode": [{
2499
- mask: ["alpha", "luminance", "match"]
2500
- }],
2501
- /**
2502
- * Mask Origin
2503
- * @see https://tailwindcss.com/docs/mask-origin
2504
- */
2505
- "mask-origin": [{
2506
- "mask-origin": ["border", "padding", "content", "fill", "stroke", "view"]
2507
- }],
2508
- /**
2509
- * Mask Position
2510
- * @see https://tailwindcss.com/docs/mask-position
2511
- */
2512
- "mask-position": [{
2513
- mask: scaleBgPosition()
2514
- }],
2515
- /**
2516
- * Mask Repeat
2517
- * @see https://tailwindcss.com/docs/mask-repeat
2518
- */
2519
- "mask-repeat": [{
2520
- mask: scaleBgRepeat()
2521
- }],
2522
- /**
2523
- * Mask Size
2524
- * @see https://tailwindcss.com/docs/mask-size
2525
- */
2526
- "mask-size": [{
2527
- mask: scaleBgSize()
2528
- }],
2529
- /**
2530
- * Mask Type
2531
- * @see https://tailwindcss.com/docs/mask-type
2532
- */
2533
- "mask-type": [{
2534
- "mask-type": ["alpha", "luminance"]
2535
- }],
2536
- /**
2537
- * Mask Image
2538
- * @see https://tailwindcss.com/docs/mask-image
2539
- */
2540
- "mask-image": [{
2541
- mask: ["none", isArbitraryVariable, isArbitraryValue]
2542
- }],
2543
- // ---------------
2544
- // --- Filters ---
2545
- // ---------------
2546
- /**
2547
- * Filter
2548
- * @see https://tailwindcss.com/docs/filter
2549
- */
2550
- filter: [{
2551
- filter: [
2552
- // Deprecated since Tailwind CSS v3.0.0
2553
- "",
2554
- "none",
2555
- isArbitraryVariable,
2556
- isArbitraryValue
2557
- ]
2558
- }],
2559
- /**
2560
- * Blur
2561
- * @see https://tailwindcss.com/docs/blur
2562
- */
2563
- blur: [{
2564
- blur: scaleBlur()
2565
- }],
2566
- /**
2567
- * Brightness
2568
- * @see https://tailwindcss.com/docs/brightness
2569
- */
2570
- brightness: [{
2571
- brightness: [isNumber, isArbitraryVariable, isArbitraryValue]
2572
- }],
2573
- /**
2574
- * Contrast
2575
- * @see https://tailwindcss.com/docs/contrast
2576
- */
2577
- contrast: [{
2578
- contrast: [isNumber, isArbitraryVariable, isArbitraryValue]
2579
- }],
2580
- /**
2581
- * Drop Shadow
2582
- * @see https://tailwindcss.com/docs/drop-shadow
2583
- */
2584
- "drop-shadow": [{
2585
- "drop-shadow": [
2586
- // Deprecated since Tailwind CSS v4.0.0
2587
- "",
2588
- "none",
2589
- themeDropShadow,
2590
- isArbitraryVariableShadow,
2591
- isArbitraryShadow
2592
- ]
2593
- }],
2594
- /**
2595
- * Drop Shadow Color
2596
- * @see https://tailwindcss.com/docs/filter-drop-shadow#setting-the-shadow-color
2597
- */
2598
- "drop-shadow-color": [{
2599
- "drop-shadow": scaleColor()
2600
- }],
2601
- /**
2602
- * Grayscale
2603
- * @see https://tailwindcss.com/docs/grayscale
2604
- */
2605
- grayscale: [{
2606
- grayscale: ["", isNumber, isArbitraryVariable, isArbitraryValue]
2607
- }],
2608
- /**
2609
- * Hue Rotate
2610
- * @see https://tailwindcss.com/docs/hue-rotate
2611
- */
2612
- "hue-rotate": [{
2613
- "hue-rotate": [isNumber, isArbitraryVariable, isArbitraryValue]
2614
- }],
2615
- /**
2616
- * Invert
2617
- * @see https://tailwindcss.com/docs/invert
2618
- */
2619
- invert: [{
2620
- invert: ["", isNumber, isArbitraryVariable, isArbitraryValue]
2621
- }],
2622
- /**
2623
- * Saturate
2624
- * @see https://tailwindcss.com/docs/saturate
2625
- */
2626
- saturate: [{
2627
- saturate: [isNumber, isArbitraryVariable, isArbitraryValue]
2628
- }],
2629
- /**
2630
- * Sepia
2631
- * @see https://tailwindcss.com/docs/sepia
2632
- */
2633
- sepia: [{
2634
- sepia: ["", isNumber, isArbitraryVariable, isArbitraryValue]
2635
- }],
2636
- /**
2637
- * Backdrop Filter
2638
- * @see https://tailwindcss.com/docs/backdrop-filter
2639
- */
2640
- "backdrop-filter": [{
2641
- "backdrop-filter": [
2642
- // Deprecated since Tailwind CSS v3.0.0
2643
- "",
2644
- "none",
2645
- isArbitraryVariable,
2646
- isArbitraryValue
2647
- ]
2648
- }],
2649
- /**
2650
- * Backdrop Blur
2651
- * @see https://tailwindcss.com/docs/backdrop-blur
2652
- */
2653
- "backdrop-blur": [{
2654
- "backdrop-blur": scaleBlur()
2655
- }],
2656
- /**
2657
- * Backdrop Brightness
2658
- * @see https://tailwindcss.com/docs/backdrop-brightness
2659
- */
2660
- "backdrop-brightness": [{
2661
- "backdrop-brightness": [isNumber, isArbitraryVariable, isArbitraryValue]
2662
- }],
2663
- /**
2664
- * Backdrop Contrast
2665
- * @see https://tailwindcss.com/docs/backdrop-contrast
2666
- */
2667
- "backdrop-contrast": [{
2668
- "backdrop-contrast": [isNumber, isArbitraryVariable, isArbitraryValue]
2669
- }],
2670
- /**
2671
- * Backdrop Grayscale
2672
- * @see https://tailwindcss.com/docs/backdrop-grayscale
2673
- */
2674
- "backdrop-grayscale": [{
2675
- "backdrop-grayscale": ["", isNumber, isArbitraryVariable, isArbitraryValue]
2676
- }],
2677
- /**
2678
- * Backdrop Hue Rotate
2679
- * @see https://tailwindcss.com/docs/backdrop-hue-rotate
2680
- */
2681
- "backdrop-hue-rotate": [{
2682
- "backdrop-hue-rotate": [isNumber, isArbitraryVariable, isArbitraryValue]
2683
- }],
2684
- /**
2685
- * Backdrop Invert
2686
- * @see https://tailwindcss.com/docs/backdrop-invert
2687
- */
2688
- "backdrop-invert": [{
2689
- "backdrop-invert": ["", isNumber, isArbitraryVariable, isArbitraryValue]
2690
- }],
2691
- /**
2692
- * Backdrop Opacity
2693
- * @see https://tailwindcss.com/docs/backdrop-opacity
2694
- */
2695
- "backdrop-opacity": [{
2696
- "backdrop-opacity": [isNumber, isArbitraryVariable, isArbitraryValue]
2697
- }],
2698
- /**
2699
- * Backdrop Saturate
2700
- * @see https://tailwindcss.com/docs/backdrop-saturate
2701
- */
2702
- "backdrop-saturate": [{
2703
- "backdrop-saturate": [isNumber, isArbitraryVariable, isArbitraryValue]
2704
- }],
2705
- /**
2706
- * Backdrop Sepia
2707
- * @see https://tailwindcss.com/docs/backdrop-sepia
2708
- */
2709
- "backdrop-sepia": [{
2710
- "backdrop-sepia": ["", isNumber, isArbitraryVariable, isArbitraryValue]
2711
- }],
2712
- // --------------
2713
- // --- Tables ---
2714
- // --------------
2715
- /**
2716
- * Border Collapse
2717
- * @see https://tailwindcss.com/docs/border-collapse
2718
- */
2719
- "border-collapse": [{
2720
- border: ["collapse", "separate"]
2721
- }],
2722
- /**
2723
- * Border Spacing
2724
- * @see https://tailwindcss.com/docs/border-spacing
2725
- */
2726
- "border-spacing": [{
2727
- "border-spacing": scaleUnambiguousSpacing()
2728
- }],
2729
- /**
2730
- * Border Spacing X
2731
- * @see https://tailwindcss.com/docs/border-spacing
2732
- */
2733
- "border-spacing-x": [{
2734
- "border-spacing-x": scaleUnambiguousSpacing()
2735
- }],
2736
- /**
2737
- * Border Spacing Y
2738
- * @see https://tailwindcss.com/docs/border-spacing
2739
- */
2740
- "border-spacing-y": [{
2741
- "border-spacing-y": scaleUnambiguousSpacing()
2742
- }],
2743
- /**
2744
- * Table Layout
2745
- * @see https://tailwindcss.com/docs/table-layout
2746
- */
2747
- "table-layout": [{
2748
- table: ["auto", "fixed"]
2749
- }],
2750
- /**
2751
- * Caption Side
2752
- * @see https://tailwindcss.com/docs/caption-side
2753
- */
2754
- caption: [{
2755
- caption: ["top", "bottom"]
2756
- }],
2757
- // ---------------------------------
2758
- // --- Transitions and Animation ---
2759
- // ---------------------------------
2760
- /**
2761
- * Transition Property
2762
- * @see https://tailwindcss.com/docs/transition-property
2763
- */
2764
- transition: [{
2765
- transition: ["", "all", "colors", "opacity", "shadow", "transform", "none", isArbitraryVariable, isArbitraryValue]
2766
- }],
2767
- /**
2768
- * Transition Behavior
2769
- * @see https://tailwindcss.com/docs/transition-behavior
2770
- */
2771
- "transition-behavior": [{
2772
- transition: ["normal", "discrete"]
2773
- }],
2774
- /**
2775
- * Transition Duration
2776
- * @see https://tailwindcss.com/docs/transition-duration
2777
- */
2778
- duration: [{
2779
- duration: [isNumber, "initial", isArbitraryVariable, isArbitraryValue]
2780
- }],
2781
- /**
2782
- * Transition Timing Function
2783
- * @see https://tailwindcss.com/docs/transition-timing-function
2784
- */
2785
- ease: [{
2786
- ease: ["linear", "initial", themeEase, isArbitraryVariable, isArbitraryValue]
2787
- }],
2788
- /**
2789
- * Transition Delay
2790
- * @see https://tailwindcss.com/docs/transition-delay
2791
- */
2792
- delay: [{
2793
- delay: [isNumber, isArbitraryVariable, isArbitraryValue]
2794
- }],
2795
- /**
2796
- * Animation
2797
- * @see https://tailwindcss.com/docs/animation
2798
- */
2799
- animate: [{
2800
- animate: ["none", themeAnimate, isArbitraryVariable, isArbitraryValue]
2801
- }],
2802
- // ------------------
2803
- // --- Transforms ---
2804
- // ------------------
2805
- /**
2806
- * Backface Visibility
2807
- * @see https://tailwindcss.com/docs/backface-visibility
2808
- */
2809
- backface: [{
2810
- backface: ["hidden", "visible"]
2811
- }],
2812
- /**
2813
- * Perspective
2814
- * @see https://tailwindcss.com/docs/perspective
2815
- */
2816
- perspective: [{
2817
- perspective: [themePerspective, isArbitraryVariable, isArbitraryValue]
2818
- }],
2819
- /**
2820
- * Perspective Origin
2821
- * @see https://tailwindcss.com/docs/perspective-origin
2822
- */
2823
- "perspective-origin": [{
2824
- "perspective-origin": scalePositionWithArbitrary()
2825
- }],
2826
- /**
2827
- * Rotate
2828
- * @see https://tailwindcss.com/docs/rotate
2829
- */
2830
- rotate: [{
2831
- rotate: scaleRotate()
2832
- }],
2833
- /**
2834
- * Rotate X
2835
- * @see https://tailwindcss.com/docs/rotate
2836
- */
2837
- "rotate-x": [{
2838
- "rotate-x": scaleRotate()
2839
- }],
2840
- /**
2841
- * Rotate Y
2842
- * @see https://tailwindcss.com/docs/rotate
2843
- */
2844
- "rotate-y": [{
2845
- "rotate-y": scaleRotate()
2846
- }],
2847
- /**
2848
- * Rotate Z
2849
- * @see https://tailwindcss.com/docs/rotate
2850
- */
2851
- "rotate-z": [{
2852
- "rotate-z": scaleRotate()
2853
- }],
2854
- /**
2855
- * Scale
2856
- * @see https://tailwindcss.com/docs/scale
2857
- */
2858
- scale: [{
2859
- scale: scaleScale()
2860
- }],
2861
- /**
2862
- * Scale X
2863
- * @see https://tailwindcss.com/docs/scale
2864
- */
2865
- "scale-x": [{
2866
- "scale-x": scaleScale()
2867
- }],
2868
- /**
2869
- * Scale Y
2870
- * @see https://tailwindcss.com/docs/scale
2871
- */
2872
- "scale-y": [{
2873
- "scale-y": scaleScale()
2874
- }],
2875
- /**
2876
- * Scale Z
2877
- * @see https://tailwindcss.com/docs/scale
2878
- */
2879
- "scale-z": [{
2880
- "scale-z": scaleScale()
2881
- }],
2882
- /**
2883
- * Scale 3D
2884
- * @see https://tailwindcss.com/docs/scale
2885
- */
2886
- "scale-3d": ["scale-3d"],
2887
- /**
2888
- * Skew
2889
- * @see https://tailwindcss.com/docs/skew
2890
- */
2891
- skew: [{
2892
- skew: scaleSkew()
2893
- }],
2894
- /**
2895
- * Skew X
2896
- * @see https://tailwindcss.com/docs/skew
2897
- */
2898
- "skew-x": [{
2899
- "skew-x": scaleSkew()
2900
- }],
2901
- /**
2902
- * Skew Y
2903
- * @see https://tailwindcss.com/docs/skew
2904
- */
2905
- "skew-y": [{
2906
- "skew-y": scaleSkew()
2907
- }],
2908
- /**
2909
- * Transform
2910
- * @see https://tailwindcss.com/docs/transform
2911
- */
2912
- transform: [{
2913
- transform: [isArbitraryVariable, isArbitraryValue, "", "none", "gpu", "cpu"]
2914
- }],
2915
- /**
2916
- * Transform Origin
2917
- * @see https://tailwindcss.com/docs/transform-origin
2918
- */
2919
- "transform-origin": [{
2920
- origin: scalePositionWithArbitrary()
2921
- }],
2922
- /**
2923
- * Transform Style
2924
- * @see https://tailwindcss.com/docs/transform-style
2925
- */
2926
- "transform-style": [{
2927
- transform: ["3d", "flat"]
2928
- }],
2929
- /**
2930
- * Translate
2931
- * @see https://tailwindcss.com/docs/translate
2932
- */
2933
- translate: [{
2934
- translate: scaleTranslate()
2935
- }],
2936
- /**
2937
- * Translate X
2938
- * @see https://tailwindcss.com/docs/translate
2939
- */
2940
- "translate-x": [{
2941
- "translate-x": scaleTranslate()
2942
- }],
2943
- /**
2944
- * Translate Y
2945
- * @see https://tailwindcss.com/docs/translate
2946
- */
2947
- "translate-y": [{
2948
- "translate-y": scaleTranslate()
2949
- }],
2950
- /**
2951
- * Translate Z
2952
- * @see https://tailwindcss.com/docs/translate
2953
- */
2954
- "translate-z": [{
2955
- "translate-z": scaleTranslate()
2956
- }],
2957
- /**
2958
- * Translate None
2959
- * @see https://tailwindcss.com/docs/translate
2960
- */
2961
- "translate-none": ["translate-none"],
2962
- // ---------------------
2963
- // --- Interactivity ---
2964
- // ---------------------
2965
- /**
2966
- * Accent Color
2967
- * @see https://tailwindcss.com/docs/accent-color
2968
- */
2969
- accent: [{
2970
- accent: scaleColor()
2971
- }],
2972
- /**
2973
- * Appearance
2974
- * @see https://tailwindcss.com/docs/appearance
2975
- */
2976
- appearance: [{
2977
- appearance: ["none", "auto"]
2978
- }],
2979
- /**
2980
- * Caret Color
2981
- * @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities
2982
- */
2983
- "caret-color": [{
2984
- caret: scaleColor()
2985
- }],
2986
- /**
2987
- * Color Scheme
2988
- * @see https://tailwindcss.com/docs/color-scheme
2989
- */
2990
- "color-scheme": [{
2991
- scheme: ["normal", "dark", "light", "light-dark", "only-dark", "only-light"]
2992
- }],
2993
- /**
2994
- * Cursor
2995
- * @see https://tailwindcss.com/docs/cursor
2996
- */
2997
- cursor: [{
2998
- 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]
2999
- }],
3000
- /**
3001
- * Field Sizing
3002
- * @see https://tailwindcss.com/docs/field-sizing
3003
- */
3004
- "field-sizing": [{
3005
- "field-sizing": ["fixed", "content"]
3006
- }],
3007
- /**
3008
- * Pointer Events
3009
- * @see https://tailwindcss.com/docs/pointer-events
3010
- */
3011
- "pointer-events": [{
3012
- "pointer-events": ["auto", "none"]
3013
- }],
3014
- /**
3015
- * Resize
3016
- * @see https://tailwindcss.com/docs/resize
3017
- */
3018
- resize: [{
3019
- resize: ["none", "", "y", "x"]
3020
- }],
3021
- /**
3022
- * Scroll Behavior
3023
- * @see https://tailwindcss.com/docs/scroll-behavior
3024
- */
3025
- "scroll-behavior": [{
3026
- scroll: ["auto", "smooth"]
3027
- }],
3028
- /**
3029
- * Scroll Margin
3030
- * @see https://tailwindcss.com/docs/scroll-margin
3031
- */
3032
- "scroll-m": [{
3033
- "scroll-m": scaleUnambiguousSpacing()
3034
- }],
3035
- /**
3036
- * Scroll Margin Inline
3037
- * @see https://tailwindcss.com/docs/scroll-margin
3038
- */
3039
- "scroll-mx": [{
3040
- "scroll-mx": scaleUnambiguousSpacing()
3041
- }],
3042
- /**
3043
- * Scroll Margin Block
3044
- * @see https://tailwindcss.com/docs/scroll-margin
3045
- */
3046
- "scroll-my": [{
3047
- "scroll-my": scaleUnambiguousSpacing()
3048
- }],
3049
- /**
3050
- * Scroll Margin Inline Start
3051
- * @see https://tailwindcss.com/docs/scroll-margin
3052
- */
3053
- "scroll-ms": [{
3054
- "scroll-ms": scaleUnambiguousSpacing()
3055
- }],
3056
- /**
3057
- * Scroll Margin Inline End
3058
- * @see https://tailwindcss.com/docs/scroll-margin
3059
- */
3060
- "scroll-me": [{
3061
- "scroll-me": scaleUnambiguousSpacing()
3062
- }],
3063
- /**
3064
- * Scroll Margin Block Start
3065
- * @see https://tailwindcss.com/docs/scroll-margin
3066
- */
3067
- "scroll-mbs": [{
3068
- "scroll-mbs": scaleUnambiguousSpacing()
3069
- }],
3070
- /**
3071
- * Scroll Margin Block End
3072
- * @see https://tailwindcss.com/docs/scroll-margin
3073
- */
3074
- "scroll-mbe": [{
3075
- "scroll-mbe": scaleUnambiguousSpacing()
3076
- }],
3077
- /**
3078
- * Scroll Margin Top
3079
- * @see https://tailwindcss.com/docs/scroll-margin
3080
- */
3081
- "scroll-mt": [{
3082
- "scroll-mt": scaleUnambiguousSpacing()
3083
- }],
3084
- /**
3085
- * Scroll Margin Right
3086
- * @see https://tailwindcss.com/docs/scroll-margin
3087
- */
3088
- "scroll-mr": [{
3089
- "scroll-mr": scaleUnambiguousSpacing()
3090
- }],
3091
- /**
3092
- * Scroll Margin Bottom
3093
- * @see https://tailwindcss.com/docs/scroll-margin
3094
- */
3095
- "scroll-mb": [{
3096
- "scroll-mb": scaleUnambiguousSpacing()
3097
- }],
3098
- /**
3099
- * Scroll Margin Left
3100
- * @see https://tailwindcss.com/docs/scroll-margin
3101
- */
3102
- "scroll-ml": [{
3103
- "scroll-ml": scaleUnambiguousSpacing()
3104
- }],
3105
- /**
3106
- * Scroll Padding
3107
- * @see https://tailwindcss.com/docs/scroll-padding
3108
- */
3109
- "scroll-p": [{
3110
- "scroll-p": scaleUnambiguousSpacing()
3111
- }],
3112
- /**
3113
- * Scroll Padding Inline
3114
- * @see https://tailwindcss.com/docs/scroll-padding
3115
- */
3116
- "scroll-px": [{
3117
- "scroll-px": scaleUnambiguousSpacing()
3118
- }],
3119
- /**
3120
- * Scroll Padding Block
3121
- * @see https://tailwindcss.com/docs/scroll-padding
3122
- */
3123
- "scroll-py": [{
3124
- "scroll-py": scaleUnambiguousSpacing()
3125
- }],
3126
- /**
3127
- * Scroll Padding Inline Start
3128
- * @see https://tailwindcss.com/docs/scroll-padding
3129
- */
3130
- "scroll-ps": [{
3131
- "scroll-ps": scaleUnambiguousSpacing()
3132
- }],
3133
- /**
3134
- * Scroll Padding Inline End
3135
- * @see https://tailwindcss.com/docs/scroll-padding
3136
- */
3137
- "scroll-pe": [{
3138
- "scroll-pe": scaleUnambiguousSpacing()
3139
- }],
3140
- /**
3141
- * Scroll Padding Block Start
3142
- * @see https://tailwindcss.com/docs/scroll-padding
3143
- */
3144
- "scroll-pbs": [{
3145
- "scroll-pbs": scaleUnambiguousSpacing()
3146
- }],
3147
- /**
3148
- * Scroll Padding Block End
3149
- * @see https://tailwindcss.com/docs/scroll-padding
3150
- */
3151
- "scroll-pbe": [{
3152
- "scroll-pbe": scaleUnambiguousSpacing()
3153
- }],
3154
- /**
3155
- * Scroll Padding Top
3156
- * @see https://tailwindcss.com/docs/scroll-padding
3157
- */
3158
- "scroll-pt": [{
3159
- "scroll-pt": scaleUnambiguousSpacing()
3160
- }],
3161
- /**
3162
- * Scroll Padding Right
3163
- * @see https://tailwindcss.com/docs/scroll-padding
3164
- */
3165
- "scroll-pr": [{
3166
- "scroll-pr": scaleUnambiguousSpacing()
3167
- }],
3168
- /**
3169
- * Scroll Padding Bottom
3170
- * @see https://tailwindcss.com/docs/scroll-padding
3171
- */
3172
- "scroll-pb": [{
3173
- "scroll-pb": scaleUnambiguousSpacing()
3174
- }],
3175
- /**
3176
- * Scroll Padding Left
3177
- * @see https://tailwindcss.com/docs/scroll-padding
3178
- */
3179
- "scroll-pl": [{
3180
- "scroll-pl": scaleUnambiguousSpacing()
3181
- }],
3182
- /**
3183
- * Scroll Snap Align
3184
- * @see https://tailwindcss.com/docs/scroll-snap-align
3185
- */
3186
- "snap-align": [{
3187
- snap: ["start", "end", "center", "align-none"]
3188
- }],
3189
- /**
3190
- * Scroll Snap Stop
3191
- * @see https://tailwindcss.com/docs/scroll-snap-stop
3192
- */
3193
- "snap-stop": [{
3194
- snap: ["normal", "always"]
3195
- }],
3196
- /**
3197
- * Scroll Snap Type
3198
- * @see https://tailwindcss.com/docs/scroll-snap-type
3199
- */
3200
- "snap-type": [{
3201
- snap: ["none", "x", "y", "both"]
3202
- }],
3203
- /**
3204
- * Scroll Snap Type Strictness
3205
- * @see https://tailwindcss.com/docs/scroll-snap-type
3206
- */
3207
- "snap-strictness": [{
3208
- snap: ["mandatory", "proximity"]
3209
- }],
3210
- /**
3211
- * Touch Action
3212
- * @see https://tailwindcss.com/docs/touch-action
3213
- */
3214
- touch: [{
3215
- touch: ["auto", "none", "manipulation"]
3216
- }],
3217
- /**
3218
- * Touch Action X
3219
- * @see https://tailwindcss.com/docs/touch-action
3220
- */
3221
- "touch-x": [{
3222
- "touch-pan": ["x", "left", "right"]
3223
- }],
3224
- /**
3225
- * Touch Action Y
3226
- * @see https://tailwindcss.com/docs/touch-action
3227
- */
3228
- "touch-y": [{
3229
- "touch-pan": ["y", "up", "down"]
3230
- }],
3231
- /**
3232
- * Touch Action Pinch Zoom
3233
- * @see https://tailwindcss.com/docs/touch-action
3234
- */
3235
- "touch-pz": ["touch-pinch-zoom"],
3236
- /**
3237
- * User Select
3238
- * @see https://tailwindcss.com/docs/user-select
3239
- */
3240
- select: [{
3241
- select: ["none", "text", "all", "auto"]
3242
- }],
3243
- /**
3244
- * Will Change
3245
- * @see https://tailwindcss.com/docs/will-change
3246
- */
3247
- "will-change": [{
3248
- "will-change": ["auto", "scroll", "contents", "transform", isArbitraryVariable, isArbitraryValue]
3249
- }],
3250
- // -----------
3251
- // --- SVG ---
3252
- // -----------
3253
- /**
3254
- * Fill
3255
- * @see https://tailwindcss.com/docs/fill
3256
- */
3257
- fill: [{
3258
- fill: ["none", ...scaleColor()]
3259
- }],
3260
- /**
3261
- * Stroke Width
3262
- * @see https://tailwindcss.com/docs/stroke-width
3263
- */
3264
- "stroke-w": [{
3265
- stroke: [isNumber, isArbitraryVariableLength, isArbitraryLength, isArbitraryNumber]
3266
- }],
3267
- /**
3268
- * Stroke
3269
- * @see https://tailwindcss.com/docs/stroke
3270
- */
3271
- stroke: [{
3272
- stroke: ["none", ...scaleColor()]
3273
- }],
3274
- // ---------------------
3275
- // --- Accessibility ---
3276
- // ---------------------
3277
- /**
3278
- * Forced Color Adjust
3279
- * @see https://tailwindcss.com/docs/forced-color-adjust
3280
- */
3281
- "forced-color-adjust": [{
3282
- "forced-color-adjust": ["auto", "none"]
3283
- }]
3284
- },
3285
- conflictingClassGroups: {
3286
- overflow: ["overflow-x", "overflow-y"],
3287
- overscroll: ["overscroll-x", "overscroll-y"],
3288
- inset: ["inset-x", "inset-y", "inset-bs", "inset-be", "start", "end", "top", "right", "bottom", "left"],
3289
- "inset-x": ["right", "left"],
3290
- "inset-y": ["top", "bottom"],
3291
- flex: ["basis", "grow", "shrink"],
3292
- gap: ["gap-x", "gap-y"],
3293
- p: ["px", "py", "ps", "pe", "pbs", "pbe", "pt", "pr", "pb", "pl"],
3294
- px: ["pr", "pl"],
3295
- py: ["pt", "pb"],
3296
- m: ["mx", "my", "ms", "me", "mbs", "mbe", "mt", "mr", "mb", "ml"],
3297
- mx: ["mr", "ml"],
3298
- my: ["mt", "mb"],
3299
- size: ["w", "h"],
3300
- "font-size": ["leading"],
3301
- "fvn-normal": ["fvn-ordinal", "fvn-slashed-zero", "fvn-figure", "fvn-spacing", "fvn-fraction"],
3302
- "fvn-ordinal": ["fvn-normal"],
3303
- "fvn-slashed-zero": ["fvn-normal"],
3304
- "fvn-figure": ["fvn-normal"],
3305
- "fvn-spacing": ["fvn-normal"],
3306
- "fvn-fraction": ["fvn-normal"],
3307
- "line-clamp": ["display", "overflow"],
3308
- 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"],
3309
- "rounded-s": ["rounded-ss", "rounded-es"],
3310
- "rounded-e": ["rounded-se", "rounded-ee"],
3311
- "rounded-t": ["rounded-tl", "rounded-tr"],
3312
- "rounded-r": ["rounded-tr", "rounded-br"],
3313
- "rounded-b": ["rounded-br", "rounded-bl"],
3314
- "rounded-l": ["rounded-tl", "rounded-bl"],
3315
- "border-spacing": ["border-spacing-x", "border-spacing-y"],
3316
- "border-w": ["border-w-x", "border-w-y", "border-w-s", "border-w-e", "border-w-bs", "border-w-be", "border-w-t", "border-w-r", "border-w-b", "border-w-l"],
3317
- "border-w-x": ["border-w-r", "border-w-l"],
3318
- "border-w-y": ["border-w-t", "border-w-b"],
3319
- "border-color": ["border-color-x", "border-color-y", "border-color-s", "border-color-e", "border-color-bs", "border-color-be", "border-color-t", "border-color-r", "border-color-b", "border-color-l"],
3320
- "border-color-x": ["border-color-r", "border-color-l"],
3321
- "border-color-y": ["border-color-t", "border-color-b"],
3322
- translate: ["translate-x", "translate-y", "translate-none"],
3323
- "translate-none": ["translate", "translate-x", "translate-y", "translate-z"],
3324
- "scroll-m": ["scroll-mx", "scroll-my", "scroll-ms", "scroll-me", "scroll-mbs", "scroll-mbe", "scroll-mt", "scroll-mr", "scroll-mb", "scroll-ml"],
3325
- "scroll-mx": ["scroll-mr", "scroll-ml"],
3326
- "scroll-my": ["scroll-mt", "scroll-mb"],
3327
- "scroll-p": ["scroll-px", "scroll-py", "scroll-ps", "scroll-pe", "scroll-pbs", "scroll-pbe", "scroll-pt", "scroll-pr", "scroll-pb", "scroll-pl"],
3328
- "scroll-px": ["scroll-pr", "scroll-pl"],
3329
- "scroll-py": ["scroll-pt", "scroll-pb"],
3330
- touch: ["touch-x", "touch-y", "touch-pz"],
3331
- "touch-x": ["touch"],
3332
- "touch-y": ["touch"],
3333
- "touch-pz": ["touch"]
3334
- },
3335
- conflictingClassGroupModifiers: {
3336
- "font-size": ["leading"]
3337
- },
3338
- orderSensitiveModifiers: ["*", "**", "after", "backdrop", "before", "details-content", "file", "first-letter", "first-line", "marker", "placeholder", "selection"]
3339
- };
3340
- };
3341
- const twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
3342
157
  function cn(...inputs) {
3343
- return twMerge(clsx(inputs));
158
+ return inputs.filter(Boolean).join(" ");
3344
159
  }
3345
160
  const MessageContext = React.createContext({
3346
161
  direction: "in",
@@ -3360,7 +175,7 @@ function StatusIcon({ status, className }) {
3360
175
  return /* @__PURE__ */ jsxRuntime.jsx(
3361
176
  StatusDoubleCheckIcon,
3362
177
  {
3363
- className: cn("size-4", status === "read" && "text-wa-read", className)
178
+ className: cn("size-4", status === "read" && "text-[#53bdeb]", className)
3364
179
  }
3365
180
  );
3366
181
  }
@@ -3377,7 +192,7 @@ function Message({
3377
192
  status
3378
193
  }) {
3379
194
  const isOut = direction === "out";
3380
- const TimeRow = () => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5 text-xs font-medium text-wa-text-secondary", children: [
195
+ const TimeRow = () => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5 text-xs font-medium text-[#8696a0]", children: [
3381
196
  time,
3382
197
  isOut && status !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { status })
3383
198
  ] });
@@ -3387,7 +202,7 @@ function Message({
3387
202
  "aria-hidden": "true",
3388
203
  className: cn(
3389
204
  "pointer-events-none absolute top-0",
3390
- isOut ? "-right-2 text-wa-bubble-out" : "-left-2 scale-x-[-1] text-wa-bubble-in"
205
+ isOut ? "-right-2 text-[#144d37]" : "-left-2 scale-x-[-1] text-[#202c33]"
3391
206
  ),
3392
207
  children: /* @__PURE__ */ jsxRuntime.jsx(BubbleTailIcon, {})
3393
208
  }
@@ -3396,8 +211,8 @@ function Message({
3396
211
  "div",
3397
212
  {
3398
213
  className: cn(
3399
- "relative w-fit rounded-wa-bubble px-3 py-1.5 shadow-md",
3400
- isOut ? "bg-wa-bubble-out text-wa-text-primary" : "bg-wa-bubble-in text-wa-text-primary",
214
+ "relative w-fit rounded-[0.525rem] px-3 py-1.5 shadow-md",
215
+ isOut ? "bg-[#144d37] text-[#e9edef]" : "bg-[#202c33] text-[#e9edef]",
3401
216
  top && isOut && "rounded-tr-none",
3402
217
  top && !isOut && "rounded-tl-none"
3403
218
  ),
@@ -3415,7 +230,7 @@ function Message({
3415
230
  {
3416
231
  className: cn(
3417
232
  "mt-[5px] self-end rounded-full px-1.5 py-0.5",
3418
- isOut ? "bg-wa-bubble-out" : "bg-wa-bubble-in"
233
+ isOut ? "bg-[#144d37]" : "bg-[#202c33]"
3419
234
  ),
3420
235
  children: /* @__PURE__ */ jsxRuntime.jsx(TimeRow, {})
3421
236
  }
@@ -3446,9 +261,9 @@ function Message({
3446
261
  top && group && !isOut && /* @__PURE__ */ jsxRuntime.jsx(
3447
262
  "span",
3448
263
  {
3449
- className: "absolute -left-10 top-2 flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-wa-avatar",
264
+ className: "absolute -left-10 top-2 flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[#2a3942]",
3450
265
  "aria-hidden": "true",
3451
- children: avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: avatarUrl, alt: "", className: "size-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx(AvatarPlaceholderIcon, { className: "size-5 text-wa-text-secondary" })
266
+ children: avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: avatarUrl, alt: "", className: "size-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx(AvatarPlaceholderIcon, { className: "size-5 text-[#8696a0]" })
3452
267
  }
3453
268
  ),
3454
269
  mode === "neutral" && renderNeutral(),
@@ -3629,8 +444,8 @@ function fmtTime(seconds) {
3629
444
  const s = Math.floor(seconds % 60);
3630
445
  return `${String(m)}:${String(s).padStart(2, "0")}`;
3631
446
  }
3632
- function roundRect(ctx, x, y, w, h, r2) {
3633
- const rr = Math.min(r2, w / 2, h / 2);
447
+ function roundRect(ctx, x, y, w, h, r) {
448
+ const rr = Math.min(r, w / 2, h / 2);
3634
449
  ctx.beginPath();
3635
450
  ctx.moveTo(x + rr, y);
3636
451
  ctx.lineTo(x + w - rr, y);
@@ -3652,9 +467,9 @@ function Audio({ src, duration, fileName }) {
3652
467
  if (progress > 0) setHasPlayed(true);
3653
468
  }, [progress]);
3654
469
  const displayDuration = totalDuration > 0 ? fmtTime(remaining) : duration ?? "0:00";
3655
- const trackColor = isOut ? "bg-wa-waveform-out" : "bg-wa-waveform-in";
3656
- const trackColorFaint = isOut ? "bg-wa-waveform-out/40" : "bg-wa-waveform-in/40";
3657
- const dotColor = hasPlayed || isOut ? "bg-wa-waveform-out" : "bg-wa-waveform-in";
470
+ const trackColor = isOut ? "bg-[#53bdeb]" : "bg-[#8696a0]";
471
+ const trackColorFaint = isOut ? "bg-[#53bdeb]/40" : "bg-[#8696a0]/40";
472
+ const dotColor = hasPlayed || isOut ? "bg-[#53bdeb]" : "bg-[#8696a0]";
3658
473
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3659
474
  /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: audioRef, src, preload: "metadata" }),
3660
475
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-13.75 w-84 min-w-84 shrink-0 items-center", children: [
@@ -3673,7 +488,7 @@ function Audio({ src, duration, fileName }) {
3673
488
  type: "button",
3674
489
  onClick: toggle,
3675
490
  "aria-label": playing ? "Pause" : "Play",
3676
- className: "shrink-0 text-wa-text-secondary transition-opacity hover:opacity-70",
491
+ className: "shrink-0 text-[#8696a0] transition-opacity hover:opacity-70",
3677
492
  children: playing ? /* @__PURE__ */ jsxRuntime.jsx(PauseIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(PlayIcon, {})
3678
493
  }
3679
494
  ),
@@ -3729,7 +544,7 @@ function Audio({ src, duration, fileName }) {
3729
544
  /* @__PURE__ */ jsxRuntime.jsx(
3730
545
  "span",
3731
546
  {
3732
- className: "pointer-events-none absolute bottom-1 left-28 text-xs font-medium text-wa-text-secondary",
547
+ className: "pointer-events-none absolute bottom-1 left-28 text-xs font-medium text-[#8696a0]",
3733
548
  "aria-hidden": "true",
3734
549
  children: displayDuration
3735
550
  }
@@ -3741,9 +556,12 @@ const CANVAS_HEIGHT = 30;
3741
556
  const BAR_MAX_HEIGHT = 26;
3742
557
  const BAR_WIDTH = 3;
3743
558
  const SLOT_WIDTH = CANVAS_WIDTH / BAR_COUNT;
3744
- function readCssVar(name) {
3745
- return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
3746
- }
559
+ const COLORS = {
560
+ waveformOut: "#53bdeb",
561
+ waveformIn: "#8696a0",
562
+ waveformOutFaint: "rgba(83, 189, 235, 0.4)",
563
+ waveformInFaint: "rgba(134, 150, 160, 0.4)"
564
+ };
3747
565
  function Waveform({ bars, progress, isOut, hasPlayed, seek }) {
3748
566
  const canvasRef = React.useRef(null);
3749
567
  React.useEffect(() => {
@@ -3752,8 +570,8 @@ function Waveform({ bars, progress, isOut, hasPlayed, seek }) {
3752
570
  const ctx = canvas.getContext("2d");
3753
571
  if (!ctx) return;
3754
572
  ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
3755
- const colorPlayed = isOut ? readCssVar("--color-wa-waveform-out") : readCssVar("--color-wa-waveform-in");
3756
- const colorUnplayed = isOut ? readCssVar("--color-wa-waveform-out-faint") : readCssVar("--color-wa-waveform-in-faint");
573
+ const colorPlayed = isOut ? COLORS.waveformOut : COLORS.waveformIn;
574
+ const colorUnplayed = isOut ? COLORS.waveformOutFaint : COLORS.waveformInFaint;
3757
575
  bars.forEach((amplitude, i) => {
3758
576
  const level = Math.max(1, amplitude);
3759
577
  const barHeight = Math.round(level / 10 * BAR_MAX_HEIGHT);
@@ -3781,7 +599,7 @@ function Waveform({ bars, progress, isOut, hasPlayed, seek }) {
3781
599
  "aria-hidden": "true",
3782
600
  className: cn(
3783
601
  "pointer-events-none absolute top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full",
3784
- hasPlayed || isOut ? "bg-wa-waveform-out" : "bg-wa-waveform-in"
602
+ hasPlayed || isOut ? "bg-[#53bdeb]" : "bg-[#8696a0]"
3785
603
  ),
3786
604
  style: { left: `${progress * 100}%` }
3787
605
  }
@@ -3829,8 +647,8 @@ function Voice({ src, duration, avatarUrl: avatarProp }) {
3829
647
  "span",
3830
648
  {
3831
649
  "aria-hidden": "true",
3832
- className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-wa-avatar",
3833
- children: avatar ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: avatar, alt: "", className: "size-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx(AvatarPlaceholderIcon, { className: "size-6 text-wa-text-secondary" })
650
+ className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[#2a3942]",
651
+ children: avatar ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: avatar, alt: "", className: "size-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx(AvatarPlaceholderIcon, { className: "size-6 text-[#8696a0]" })
3834
652
  }
3835
653
  ),
3836
654
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-5.5 shrink-0" }),
@@ -3840,7 +658,7 @@ function Voice({ src, duration, avatarUrl: avatarProp }) {
3840
658
  type: "button",
3841
659
  onClick: toggle,
3842
660
  "aria-label": playing ? "Pause" : "Play",
3843
- className: "shrink-0 text-wa-text-secondary transition-opacity hover:opacity-70",
661
+ className: "shrink-0 text-[#8696a0] transition-opacity hover:opacity-70",
3844
662
  children: playing ? /* @__PURE__ */ jsxRuntime.jsx(PauseIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(PlayIcon, {})
3845
663
  }
3846
664
  ),
@@ -3854,12 +672,12 @@ function Voice({ src, duration, avatarUrl: avatarProp }) {
3854
672
  hasPlayed,
3855
673
  seek
3856
674
  }
3857
- ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-xs text-wa-text-secondary", children: "No audio source" })
675
+ ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-xs text-[#8696a0]", children: "No audio source" })
3858
676
  ] }),
3859
677
  /* @__PURE__ */ jsxRuntime.jsx(
3860
678
  "span",
3861
679
  {
3862
- className: "pointer-events-none absolute bottom-1 left-28 text-xs font-medium text-wa-text-secondary",
680
+ className: "pointer-events-none absolute bottom-1 left-28 text-xs font-medium text-[#8696a0]",
3863
681
  "aria-hidden": "true",
3864
682
  children: displayDuration
3865
683
  }
@@ -3899,7 +717,7 @@ function Gif({ className }) {
3899
717
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-[336px]", className) });
3900
718
  }
3901
719
  function Image({ src, alt = "", className }) {
3902
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-[336px]", className), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, className: "w-full rounded-wa-bubble object-cover" }) });
720
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-[336px]", className), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, className: "w-full rounded-[0.525rem] object-cover" }) });
3903
721
  }
3904
722
  let _counter = 0;
3905
723
  function uid() {
@@ -3929,14 +747,14 @@ function ChatHeader({ className, name, avatarUrl, subtitle }) {
3929
747
  "div",
3930
748
  {
3931
749
  className: cn(
3932
- "flex items-center gap-3 bg-wa-header px-4 py-3 shadow-[0_1px_4px_rgba(0,0,0,0.15)]",
750
+ "flex items-center gap-3 bg-[#161717] px-4 py-3 shadow-[0_1px_4px_rgba(0,0,0,0.15)]",
3933
751
  className
3934
752
  ),
3935
753
  children: [
3936
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: avatarUrl, alt: name, className: "size-10 rounded-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 items-center justify-center rounded-full bg-wa-avatar text-sm font-medium text-wa-text-primary", children: initials }) }),
754
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: avatarUrl, alt: name, className: "size-10 rounded-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 items-center justify-center rounded-full bg-[#2a3942] text-sm font-medium text-[#e9edef]", children: initials }) }),
3937
755
  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
3938
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[15px] font-medium text-wa-text-primary", children: name }),
3939
- subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs text-wa-text-secondary", children: subtitle })
756
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[15px] font-medium text-[#e9edef]", children: name }),
757
+ subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs text-[#8696a0]", children: subtitle })
3940
758
  ] })
3941
759
  ]
3942
760
  }
@@ -3953,7 +771,7 @@ function ActionButton({
3953
771
  type: "button",
3954
772
  onClick,
3955
773
  "aria-label": label,
3956
- className: "inline-flex size-8 shrink-0 items-center justify-center rounded-full text-wa-icon transition-colors hover:text-wa-text-primary",
774
+ className: "inline-flex size-8 shrink-0 items-center justify-center rounded-full text-[#aebac1] transition-colors hover:text-[#e9edef]",
3957
775
  children
3958
776
  }
3959
777
  );
@@ -3969,7 +787,7 @@ function InputfieldActions({
3969
787
  onSendClick,
3970
788
  sendDisabled = false
3971
789
  }) {
3972
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full items-end", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-10.5 flex-1 items-center gap-1 rounded-full bg-wa-input px-3", children: [
790
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full items-end", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-10.5 flex-1 items-center gap-1 rounded-full bg-[#242626] px-3", children: [
3973
791
  /* @__PURE__ */ jsxRuntime.jsx(ActionButton, { label: "Attachments", ...onAttachClick ? { onClick: onAttachClick } : {}, children: /* @__PURE__ */ jsxRuntime.jsx(AttachIcon, { className: "size-6" }) }),
3974
792
  /* @__PURE__ */ jsxRuntime.jsx(ActionButton, { label: "Sticker", ...onEmojiClick ? { onClick: onEmojiClick } : {}, children: /* @__PURE__ */ jsxRuntime.jsx(StickerIcon, { className: "size-6" }) }),
3975
793
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center px-2", children: textareaSlot }),
@@ -3980,7 +798,7 @@ function InputfieldActions({
3980
798
  onClick: onSendClick,
3981
799
  disabled: sendDisabled,
3982
800
  "aria-label": "Send message",
3983
- className: "inline-flex size-8 shrink-0 items-center justify-center rounded-full bg-wa-send text-white transition-colors hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50",
801
+ className: "inline-flex size-8 shrink-0 items-center justify-center rounded-full bg-[#21c063] text-white transition-colors hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50",
3984
802
  children: /* @__PURE__ */ jsxRuntime.jsx(SendIcon, { className: "ml-0.5 size-4" })
3985
803
  }
3986
804
  ) : /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3989,7 +807,7 @@ function InputfieldActions({
3989
807
  type: "button",
3990
808
  onClick: onMicClick,
3991
809
  "aria-label": "Record voice message",
3992
- className: "group inline-flex size-8 shrink-0 items-center justify-center rounded-full text-wa-icon transition-colors hover:bg-wa-teal hover:text-black",
810
+ className: "group inline-flex size-8 shrink-0 items-center justify-center rounded-full text-[#aebac1] transition-colors hover:bg-[#00a884] hover:text-black",
3993
811
  children: [
3994
812
  /* @__PURE__ */ jsxRuntime.jsx(MicOutlineIcon, { className: "size-5 group-hover:hidden" }),
3995
813
  /* @__PURE__ */ jsxRuntime.jsx(MicFillIcon, { className: "hidden size-5 group-hover:block" })
@@ -4067,7 +885,7 @@ function Inputfield({
4067
885
  placeholder,
4068
886
  rows: 1,
4069
887
  className: cn(
4070
- "min-h-5 w-full resize-none bg-transparent px-1 py-0 text-sm text-wa-text-body outline-none placeholder:font-medium placeholder:text-wa-icon/70",
888
+ "min-h-5 w-full resize-none bg-transparent px-1 py-0 text-sm text-[#d1d7db] outline-none placeholder:font-medium placeholder:text-[#aebac1]/70",
4071
889
  textareaClassName
4072
890
  )
4073
891
  }
@@ -4114,7 +932,7 @@ function getDisplayDate(date) {
4114
932
  }
4115
933
  function DayDivider({ className, date }) {
4116
934
  const displayDate = getDisplayDate(date.toISOString());
4117
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-center py-3", className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-wa-divider bg-wa-divider px-3 py-1 text-[13px] font-medium text-wa-text-secondary shadow-sm", children: displayDate }) });
935
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-center py-3", className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-[0.325rem] bg-[#182229] px-3 py-1 text-[13px] font-medium text-[#8696a0] shadow-sm", children: displayDate }) });
4118
936
  }
4119
937
  function MessageList({ className, messages }) {
4120
938
  const dayGroups = groupMessagesByDay(messages);
@@ -4161,11 +979,17 @@ const Chat$1 = React.forwardRef(function Chat2({
4161
979
  }, ref) {
4162
980
  const [messages, setMessages] = React.useState(messageHistory ?? []);
4163
981
  const scrollRef = React.useRef(null);
982
+ const contentRef = React.useRef(null);
4164
983
  React.useEffect(() => {
4165
- if (scrollRef.current) {
4166
- scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
4167
- }
4168
- }, [messages]);
984
+ const content = contentRef.current;
985
+ const scroll = scrollRef.current;
986
+ if (!content || !scroll) return;
987
+ const ro = new ResizeObserver(() => {
988
+ scroll.scrollTop = scroll.scrollHeight;
989
+ });
990
+ ro.observe(content);
991
+ return () => ro.disconnect();
992
+ }, []);
4169
993
  function sendMessage(text) {
4170
994
  const trimmed = text.trim();
4171
995
  if (!trimmed) return;
@@ -4201,7 +1025,7 @@ const Chat$1 = React.forwardRef(function Chat2({
4201
1025
  return /* @__PURE__ */ jsxRuntime.jsx(ChatReplyContext.Provider, { value: { messages, sendMessage, addMessage, provided: true }, children: /* @__PURE__ */ jsxRuntime.jsxs(
4202
1026
  "div",
4203
1027
  {
4204
- className: cn("flex h-full min-h-0 flex-col", isDefaultBg ? "bg-wa-bg" : "", className),
1028
+ className: cn("flex h-full min-h-0 flex-col", isDefaultBg ? "bg-[#161717]" : "", className),
4205
1029
  style: isDefaultBg ? void 0 : bgStyle,
4206
1030
  children: [
4207
1031
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4220,7 +1044,17 @@ const Chat$1 = React.forwardRef(function Chat2({
4220
1044
  style: { backgroundImage: `url(${backgroundUrl})` }
4221
1045
  }
4222
1046
  ),
4223
- /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: "scrollbar-wa flex-1 overflow-y-auto py-2 px-12", children: messages.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(MessageList, { messages }) : children }),
1047
+ /* @__PURE__ */ jsxRuntime.jsx(
1048
+ "div",
1049
+ {
1050
+ ref: scrollRef,
1051
+ className: "flex-1 overflow-y-auto py-2 px-12 [scrollbar-width:thin] [scrollbar-color:rgba(255,255,255,0.1)_transparent] [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-[rgba(255,255,255,0.18)] [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:hover]:bg-[rgba(255,255,255,0.3)]",
1052
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: contentRef, children: [
1053
+ children,
1054
+ messages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(MessageList, { messages })
1055
+ ] })
1056
+ }
1057
+ ),
4224
1058
  showInputfield && /* @__PURE__ */ jsxRuntime.jsx(
4225
1059
  Inputfield,
4226
1060
  {
@@ -4252,6 +1086,114 @@ const ChatParts = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePro
4252
1086
  Root: Chat$1
4253
1087
  }, Symbol.toStringTag, { value: "Module" }));
4254
1088
  const Chat = Object.assign(Chat$1, ChatParts);
1089
+ function Animated({ delay = 0, children, className }) {
1090
+ const [mounted, setMounted] = React.useState(delay === 0);
1091
+ const [visible, setVisible] = React.useState(false);
1092
+ React.useEffect(() => {
1093
+ if (delay === 0) {
1094
+ const raf = requestAnimationFrame(() => setVisible(true));
1095
+ return () => cancelAnimationFrame(raf);
1096
+ }
1097
+ const timer = setTimeout(() => setMounted(true), delay);
1098
+ return () => clearTimeout(timer);
1099
+ }, [delay]);
1100
+ React.useLayoutEffect(() => {
1101
+ if (mounted && delay !== 0) {
1102
+ const raf = requestAnimationFrame(() => setVisible(true));
1103
+ return () => cancelAnimationFrame(raf);
1104
+ }
1105
+ }, [mounted, delay]);
1106
+ if (!mounted) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
1107
+ return /* @__PURE__ */ jsxRuntime.jsx(
1108
+ "div",
1109
+ {
1110
+ className: cn(
1111
+ "transition-all duration-300 ease-out",
1112
+ visible ? "translate-y-0 opacity-100" : "translate-y-2 opacity-0",
1113
+ className
1114
+ ),
1115
+ children
1116
+ }
1117
+ );
1118
+ }
1119
+ function History({ children, className }) {
1120
+ const childArray = React.Children.toArray(children ?? []);
1121
+ const result = [];
1122
+ let lastGroupKey = void 0;
1123
+ let lastDate = null;
1124
+ const today = /* @__PURE__ */ new Date();
1125
+ let hasAnyMessage = false;
1126
+ function extractMessageInfo(node) {
1127
+ if (!React.isValidElement(node)) return null;
1128
+ const el = node;
1129
+ if (el.type === Message) {
1130
+ return {
1131
+ msgProps: el.props,
1132
+ isAnimated: false,
1133
+ msgEl: el
1134
+ };
1135
+ }
1136
+ if (el.type === Animated) {
1137
+ const innerChildren = React.Children.toArray(
1138
+ el.props.children ?? []
1139
+ );
1140
+ const innerMsg = innerChildren.find(
1141
+ (c) => React.isValidElement(c) && c.type === Message
1142
+ );
1143
+ if (innerMsg) {
1144
+ return {
1145
+ msgProps: innerMsg.props,
1146
+ isAnimated: true,
1147
+ animatedEl: el,
1148
+ msgEl: innerMsg
1149
+ };
1150
+ }
1151
+ }
1152
+ return null;
1153
+ }
1154
+ for (const child of childArray) {
1155
+ const info = extractMessageInfo(child);
1156
+ if (!info) {
1157
+ result.push(child);
1158
+ continue;
1159
+ }
1160
+ hasAnyMessage = true;
1161
+ const { msgProps, isAnimated } = info;
1162
+ const groupKey = msgProps.senderId ?? msgProps.direction;
1163
+ const currentDate = toDate(msgProps.timestamp);
1164
+ const isNewDay = currentDate !== null && (lastDate === null || !isSameCalendarDay(currentDate, lastDate));
1165
+ if (isNewDay && currentDate) {
1166
+ result.push(/* @__PURE__ */ jsxRuntime.jsx(DayDivider, { date: currentDate }, `divider-${currentDate.toISOString()}`));
1167
+ }
1168
+ const isNewGroup = lastGroupKey === void 0 || groupKey !== lastGroupKey || isNewDay;
1169
+ if (isAnimated) {
1170
+ const { animatedEl, msgEl } = info;
1171
+ const newMsg = React.cloneElement(msgEl, {
1172
+ top: isNewGroup
1173
+ });
1174
+ result.push(
1175
+ React.cloneElement(animatedEl, {
1176
+ children: newMsg
1177
+ })
1178
+ );
1179
+ } else {
1180
+ result.push(
1181
+ React.cloneElement(info.msgEl, {
1182
+ top: isNewGroup
1183
+ })
1184
+ );
1185
+ }
1186
+ lastGroupKey = groupKey;
1187
+ if (currentDate) lastDate = currentDate;
1188
+ }
1189
+ if (!hasAnyMessage) {
1190
+ result.push(/* @__PURE__ */ jsxRuntime.jsx(DayDivider, { date: today }, "history-today-divider"));
1191
+ }
1192
+ if (className) {
1193
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(className), children: result });
1194
+ }
1195
+ return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: result });
1196
+ }
4255
1197
  function extractTextFromNode(node) {
4256
1198
  if (node === null || node === void 0) return "";
4257
1199
  if (typeof node === "string") return node;
@@ -4304,6 +1246,7 @@ function useMessages(callback) {
4304
1246
  for (const m of newMessages) callbackRef.current(m);
4305
1247
  }, [messages]);
4306
1248
  }
1249
+ exports.Animated = Animated;
4307
1250
  exports.Audio = Audio;
4308
1251
  exports.Chat = Chat;
4309
1252
  exports.Contact = Contact;
@@ -4311,6 +1254,7 @@ exports.Emoji = Emoji;
4311
1254
  exports.Event = Event;
4312
1255
  exports.File = File;
4313
1256
  exports.Gif = Gif;
1257
+ exports.History = History;
4314
1258
  exports.Image = Image;
4315
1259
  exports.Location = Location;
4316
1260
  exports.Message = Message;