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