@uxbertlabs/reportly 1.0.22 → 1.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs.js CHANGED
@@ -10148,2963 +10148,12 @@ const X = createLucideIcon("x", __iconNode);
10148
10148
 
10149
10149
  function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
10150
10150
 
10151
- const CLASS_PART_SEPARATOR = '-';
10152
- const createClassGroupUtils = config => {
10153
- const classMap = createClassMap(config);
10154
- const {
10155
- conflictingClassGroups,
10156
- conflictingClassGroupModifiers
10157
- } = config;
10158
- const getClassGroupId = className => {
10159
- const classParts = className.split(CLASS_PART_SEPARATOR);
10160
- // Classes like `-inset-1` produce an empty string as first classPart. We assume that classes for negative values are used correctly and remove it from classParts.
10161
- if (classParts[0] === '' && classParts.length !== 1) {
10162
- classParts.shift();
10163
- }
10164
- return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className);
10165
- };
10166
- const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
10167
- const conflicts = conflictingClassGroups[classGroupId] || [];
10168
- if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
10169
- return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]];
10170
- }
10171
- return conflicts;
10172
- };
10173
- return {
10174
- getClassGroupId,
10175
- getConflictingClassGroupIds
10176
- };
10177
- };
10178
- const getGroupRecursive = (classParts, classPartObject) => {
10179
- if (classParts.length === 0) {
10180
- return classPartObject.classGroupId;
10181
- }
10182
- const currentClassPart = classParts[0];
10183
- const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
10184
- const classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive(classParts.slice(1), nextClassPartObject) : undefined;
10185
- if (classGroupFromNextClassPart) {
10186
- return classGroupFromNextClassPart;
10187
- }
10188
- if (classPartObject.validators.length === 0) {
10189
- return undefined;
10190
- }
10191
- const classRest = classParts.join(CLASS_PART_SEPARATOR);
10192
- return classPartObject.validators.find(({
10193
- validator
10194
- }) => validator(classRest))?.classGroupId;
10195
- };
10196
- const arbitraryPropertyRegex = /^\[(.+)\]$/;
10197
- const getGroupIdForArbitraryProperty = className => {
10198
- if (arbitraryPropertyRegex.test(className)) {
10199
- const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
10200
- const property = arbitraryPropertyClassName?.substring(0, arbitraryPropertyClassName.indexOf(':'));
10201
- if (property) {
10202
- // I use two dots here because one dot is used as prefix for class groups in plugins
10203
- return 'arbitrary..' + property;
10204
- }
10205
- }
10206
- };
10207
10151
  /**
10208
- * Exported for testing only
10152
+ * Combines class names without Tailwind merging
10153
+ * Use this for scoped CSS classes (uxbert-*)
10209
10154
  */
10210
- const createClassMap = config => {
10211
- const {
10212
- theme,
10213
- classGroups
10214
- } = config;
10215
- const classMap = {
10216
- nextPart: new Map(),
10217
- validators: []
10218
- };
10219
- for (const classGroupId in classGroups) {
10220
- processClassesRecursively(classGroups[classGroupId], classMap, classGroupId, theme);
10221
- }
10222
- return classMap;
10223
- };
10224
- const processClassesRecursively = (classGroup, classPartObject, classGroupId, theme) => {
10225
- classGroup.forEach(classDefinition => {
10226
- if (typeof classDefinition === 'string') {
10227
- const classPartObjectToEdit = classDefinition === '' ? classPartObject : getPart(classPartObject, classDefinition);
10228
- classPartObjectToEdit.classGroupId = classGroupId;
10229
- return;
10230
- }
10231
- if (typeof classDefinition === 'function') {
10232
- if (isThemeGetter(classDefinition)) {
10233
- processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
10234
- return;
10235
- }
10236
- classPartObject.validators.push({
10237
- validator: classDefinition,
10238
- classGroupId
10239
- });
10240
- return;
10241
- }
10242
- Object.entries(classDefinition).forEach(([key, classGroup]) => {
10243
- processClassesRecursively(classGroup, getPart(classPartObject, key), classGroupId, theme);
10244
- });
10245
- });
10246
- };
10247
- const getPart = (classPartObject, path) => {
10248
- let currentClassPartObject = classPartObject;
10249
- path.split(CLASS_PART_SEPARATOR).forEach(pathPart => {
10250
- if (!currentClassPartObject.nextPart.has(pathPart)) {
10251
- currentClassPartObject.nextPart.set(pathPart, {
10252
- nextPart: new Map(),
10253
- validators: []
10254
- });
10255
- }
10256
- currentClassPartObject = currentClassPartObject.nextPart.get(pathPart);
10257
- });
10258
- return currentClassPartObject;
10259
- };
10260
- const isThemeGetter = func => func.isThemeGetter;
10261
-
10262
- // LRU cache inspired from hashlru (https://github.com/dominictarr/hashlru/blob/v1.0.4/index.js) but object replaced with Map to improve performance
10263
- const createLruCache = maxCacheSize => {
10264
- if (maxCacheSize < 1) {
10265
- return {
10266
- get: () => undefined,
10267
- set: () => {}
10268
- };
10269
- }
10270
- let cacheSize = 0;
10271
- let cache = new Map();
10272
- let previousCache = new Map();
10273
- const update = (key, value) => {
10274
- cache.set(key, value);
10275
- cacheSize++;
10276
- if (cacheSize > maxCacheSize) {
10277
- cacheSize = 0;
10278
- previousCache = cache;
10279
- cache = new Map();
10280
- }
10281
- };
10282
- return {
10283
- get(key) {
10284
- let value = cache.get(key);
10285
- if (value !== undefined) {
10286
- return value;
10287
- }
10288
- if ((value = previousCache.get(key)) !== undefined) {
10289
- update(key, value);
10290
- return value;
10291
- }
10292
- },
10293
- set(key, value) {
10294
- if (cache.has(key)) {
10295
- cache.set(key, value);
10296
- } else {
10297
- update(key, value);
10298
- }
10299
- }
10300
- };
10301
- };
10302
- const IMPORTANT_MODIFIER = '!';
10303
- const MODIFIER_SEPARATOR = ':';
10304
- const MODIFIER_SEPARATOR_LENGTH = MODIFIER_SEPARATOR.length;
10305
- const createParseClassName = config => {
10306
- const {
10307
- prefix,
10308
- experimentalParseClassName
10309
- } = config;
10310
- /**
10311
- * Parse class name into parts.
10312
- *
10313
- * Inspired by `splitAtTopLevelOnly` used in Tailwind CSS
10314
- * @see https://github.com/tailwindlabs/tailwindcss/blob/v3.2.2/src/util/splitAtTopLevelOnly.js
10315
- */
10316
- let parseClassName = className => {
10317
- const modifiers = [];
10318
- let bracketDepth = 0;
10319
- let parenDepth = 0;
10320
- let modifierStart = 0;
10321
- let postfixModifierPosition;
10322
- for (let index = 0; index < className.length; index++) {
10323
- let currentCharacter = className[index];
10324
- if (bracketDepth === 0 && parenDepth === 0) {
10325
- if (currentCharacter === MODIFIER_SEPARATOR) {
10326
- modifiers.push(className.slice(modifierStart, index));
10327
- modifierStart = index + MODIFIER_SEPARATOR_LENGTH;
10328
- continue;
10329
- }
10330
- if (currentCharacter === '/') {
10331
- postfixModifierPosition = index;
10332
- continue;
10333
- }
10334
- }
10335
- if (currentCharacter === '[') {
10336
- bracketDepth++;
10337
- } else if (currentCharacter === ']') {
10338
- bracketDepth--;
10339
- } else if (currentCharacter === '(') {
10340
- parenDepth++;
10341
- } else if (currentCharacter === ')') {
10342
- parenDepth--;
10343
- }
10344
- }
10345
- const baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.substring(modifierStart);
10346
- const baseClassName = stripImportantModifier(baseClassNameWithImportantModifier);
10347
- const hasImportantModifier = baseClassName !== baseClassNameWithImportantModifier;
10348
- const maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : undefined;
10349
- return {
10350
- modifiers,
10351
- hasImportantModifier,
10352
- baseClassName,
10353
- maybePostfixModifierPosition
10354
- };
10355
- };
10356
- if (prefix) {
10357
- const fullPrefix = prefix + MODIFIER_SEPARATOR;
10358
- const parseClassNameOriginal = parseClassName;
10359
- parseClassName = className => className.startsWith(fullPrefix) ? parseClassNameOriginal(className.substring(fullPrefix.length)) : {
10360
- isExternal: true,
10361
- modifiers: [],
10362
- hasImportantModifier: false,
10363
- baseClassName: className,
10364
- maybePostfixModifierPosition: undefined
10365
- };
10366
- }
10367
- if (experimentalParseClassName) {
10368
- const parseClassNameOriginal = parseClassName;
10369
- parseClassName = className => experimentalParseClassName({
10370
- className,
10371
- parseClassName: parseClassNameOriginal
10372
- });
10373
- }
10374
- return parseClassName;
10375
- };
10376
- const stripImportantModifier = baseClassName => {
10377
- if (baseClassName.endsWith(IMPORTANT_MODIFIER)) {
10378
- return baseClassName.substring(0, baseClassName.length - 1);
10379
- }
10380
- /**
10381
- * In Tailwind CSS v3 the important modifier was at the start of the base class name. This is still supported for legacy reasons.
10382
- * @see https://github.com/dcastil/tailwind-merge/issues/513#issuecomment-2614029864
10383
- */
10384
- if (baseClassName.startsWith(IMPORTANT_MODIFIER)) {
10385
- return baseClassName.substring(1);
10386
- }
10387
- return baseClassName;
10388
- };
10389
-
10390
- /**
10391
- * Sorts modifiers according to following schema:
10392
- * - Predefined modifiers are sorted alphabetically
10393
- * - When an arbitrary variant appears, it must be preserved which modifiers are before and after it
10394
- */
10395
- const createSortModifiers = config => {
10396
- const orderSensitiveModifiers = Object.fromEntries(config.orderSensitiveModifiers.map(modifier => [modifier, true]));
10397
- const sortModifiers = modifiers => {
10398
- if (modifiers.length <= 1) {
10399
- return modifiers;
10400
- }
10401
- const sortedModifiers = [];
10402
- let unsortedModifiers = [];
10403
- modifiers.forEach(modifier => {
10404
- const isPositionSensitive = modifier[0] === '[' || orderSensitiveModifiers[modifier];
10405
- if (isPositionSensitive) {
10406
- sortedModifiers.push(...unsortedModifiers.sort(), modifier);
10407
- unsortedModifiers = [];
10408
- } else {
10409
- unsortedModifiers.push(modifier);
10410
- }
10411
- });
10412
- sortedModifiers.push(...unsortedModifiers.sort());
10413
- return sortedModifiers;
10414
- };
10415
- return sortModifiers;
10416
- };
10417
- const createConfigUtils = config => ({
10418
- cache: createLruCache(config.cacheSize),
10419
- parseClassName: createParseClassName(config),
10420
- sortModifiers: createSortModifiers(config),
10421
- ...createClassGroupUtils(config)
10422
- });
10423
- const SPLIT_CLASSES_REGEX = /\s+/;
10424
- const mergeClassList = (classList, configUtils) => {
10425
- const {
10426
- parseClassName,
10427
- getClassGroupId,
10428
- getConflictingClassGroupIds,
10429
- sortModifiers
10430
- } = configUtils;
10431
- /**
10432
- * Set of classGroupIds in following format:
10433
- * `{importantModifier}{variantModifiers}{classGroupId}`
10434
- * @example 'float'
10435
- * @example 'hover:focus:bg-color'
10436
- * @example 'md:!pr'
10437
- */
10438
- const classGroupsInConflict = [];
10439
- const classNames = classList.trim().split(SPLIT_CLASSES_REGEX);
10440
- let result = '';
10441
- for (let index = classNames.length - 1; index >= 0; index -= 1) {
10442
- const originalClassName = classNames[index];
10443
- const {
10444
- isExternal,
10445
- modifiers,
10446
- hasImportantModifier,
10447
- baseClassName,
10448
- maybePostfixModifierPosition
10449
- } = parseClassName(originalClassName);
10450
- if (isExternal) {
10451
- result = originalClassName + (result.length > 0 ? ' ' + result : result);
10452
- continue;
10453
- }
10454
- let hasPostfixModifier = !!maybePostfixModifierPosition;
10455
- let classGroupId = getClassGroupId(hasPostfixModifier ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName);
10456
- if (!classGroupId) {
10457
- if (!hasPostfixModifier) {
10458
- // Not a Tailwind class
10459
- result = originalClassName + (result.length > 0 ? ' ' + result : result);
10460
- continue;
10461
- }
10462
- classGroupId = getClassGroupId(baseClassName);
10463
- if (!classGroupId) {
10464
- // Not a Tailwind class
10465
- result = originalClassName + (result.length > 0 ? ' ' + result : result);
10466
- continue;
10467
- }
10468
- hasPostfixModifier = false;
10469
- }
10470
- const variantModifier = sortModifiers(modifiers).join(':');
10471
- const modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
10472
- const classId = modifierId + classGroupId;
10473
- if (classGroupsInConflict.includes(classId)) {
10474
- // Tailwind class omitted due to conflict
10475
- continue;
10476
- }
10477
- classGroupsInConflict.push(classId);
10478
- const conflictGroups = getConflictingClassGroupIds(classGroupId, hasPostfixModifier);
10479
- for (let i = 0; i < conflictGroups.length; ++i) {
10480
- const group = conflictGroups[i];
10481
- classGroupsInConflict.push(modifierId + group);
10482
- }
10483
- // Tailwind class not in conflict
10484
- result = originalClassName + (result.length > 0 ? ' ' + result : result);
10485
- }
10486
- return result;
10487
- };
10488
-
10489
- /**
10490
- * The code in this file is copied from https://github.com/lukeed/clsx and modified to suit the needs of tailwind-merge better.
10491
- *
10492
- * Specifically:
10493
- * - Runtime code from https://github.com/lukeed/clsx/blob/v1.2.1/src/index.js
10494
- * - TypeScript types from https://github.com/lukeed/clsx/blob/v1.2.1/clsx.d.ts
10495
- *
10496
- * Original code has MIT license: Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)
10497
- */
10498
- function twJoin() {
10499
- let index = 0;
10500
- let argument;
10501
- let resolvedValue;
10502
- let string = '';
10503
- while (index < arguments.length) {
10504
- if (argument = arguments[index++]) {
10505
- if (resolvedValue = toValue(argument)) {
10506
- string && (string += ' ');
10507
- string += resolvedValue;
10508
- }
10509
- }
10510
- }
10511
- return string;
10512
- }
10513
- const toValue = mix => {
10514
- if (typeof mix === 'string') {
10515
- return mix;
10516
- }
10517
- let resolvedValue;
10518
- let string = '';
10519
- for (let k = 0; k < mix.length; k++) {
10520
- if (mix[k]) {
10521
- if (resolvedValue = toValue(mix[k])) {
10522
- string && (string += ' ');
10523
- string += resolvedValue;
10524
- }
10525
- }
10526
- }
10527
- return string;
10528
- };
10529
- function createTailwindMerge(createConfigFirst, ...createConfigRest) {
10530
- let configUtils;
10531
- let cacheGet;
10532
- let cacheSet;
10533
- let functionToCall = initTailwindMerge;
10534
- function initTailwindMerge(classList) {
10535
- const config = createConfigRest.reduce((previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig), createConfigFirst());
10536
- configUtils = createConfigUtils(config);
10537
- cacheGet = configUtils.cache.get;
10538
- cacheSet = configUtils.cache.set;
10539
- functionToCall = tailwindMerge;
10540
- return tailwindMerge(classList);
10541
- }
10542
- function tailwindMerge(classList) {
10543
- const cachedResult = cacheGet(classList);
10544
- if (cachedResult) {
10545
- return cachedResult;
10546
- }
10547
- const result = mergeClassList(classList, configUtils);
10548
- cacheSet(classList, result);
10549
- return result;
10550
- }
10551
- return function callTailwindMerge() {
10552
- return functionToCall(twJoin.apply(null, arguments));
10553
- };
10554
- }
10555
- const fromTheme = key => {
10556
- const themeGetter = theme => theme[key] || [];
10557
- themeGetter.isThemeGetter = true;
10558
- return themeGetter;
10559
- };
10560
- const arbitraryValueRegex = /^\[(?:(\w[\w-]*):)?(.+)\]$/i;
10561
- const arbitraryVariableRegex = /^\((?:(\w[\w-]*):)?(.+)\)$/i;
10562
- const fractionRegex = /^\d+\/\d+$/;
10563
- const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
10564
- 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$/;
10565
- const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/;
10566
- // Shadow always begins with x and y offset separated by underscore optionally prepended by inset
10567
- const shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
10568
- const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
10569
- const isFraction = value => fractionRegex.test(value);
10570
- const isNumber = value => !!value && !Number.isNaN(Number(value));
10571
- const isInteger = value => !!value && Number.isInteger(Number(value));
10572
- const isPercent = value => value.endsWith('%') && isNumber(value.slice(0, -1));
10573
- const isTshirtSize = value => tshirtUnitRegex.test(value);
10574
- const isAny = () => true;
10575
- const isLengthOnly = value =>
10576
- // `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
10577
- // For example, `hsl(0 0% 0%)` would be classified as a length without this check.
10578
- // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
10579
- lengthUnitRegex.test(value) && !colorFunctionRegex.test(value);
10580
- const isNever = () => false;
10581
- const isShadow = value => shadowRegex.test(value);
10582
- const isImage = value => imageRegex.test(value);
10583
- const isAnyNonArbitrary = value => !isArbitraryValue(value) && !isArbitraryVariable(value);
10584
- const isArbitrarySize = value => getIsArbitraryValue(value, isLabelSize, isNever);
10585
- const isArbitraryValue = value => arbitraryValueRegex.test(value);
10586
- const isArbitraryLength = value => getIsArbitraryValue(value, isLabelLength, isLengthOnly);
10587
- const isArbitraryNumber = value => getIsArbitraryValue(value, isLabelNumber, isNumber);
10588
- const isArbitraryPosition = value => getIsArbitraryValue(value, isLabelPosition, isNever);
10589
- const isArbitraryImage = value => getIsArbitraryValue(value, isLabelImage, isImage);
10590
- const isArbitraryShadow = value => getIsArbitraryValue(value, isLabelShadow, isShadow);
10591
- const isArbitraryVariable = value => arbitraryVariableRegex.test(value);
10592
- const isArbitraryVariableLength = value => getIsArbitraryVariable(value, isLabelLength);
10593
- const isArbitraryVariableFamilyName = value => getIsArbitraryVariable(value, isLabelFamilyName);
10594
- const isArbitraryVariablePosition = value => getIsArbitraryVariable(value, isLabelPosition);
10595
- const isArbitraryVariableSize = value => getIsArbitraryVariable(value, isLabelSize);
10596
- const isArbitraryVariableImage = value => getIsArbitraryVariable(value, isLabelImage);
10597
- const isArbitraryVariableShadow = value => getIsArbitraryVariable(value, isLabelShadow, true);
10598
- // Helpers
10599
- const getIsArbitraryValue = (value, testLabel, testValue) => {
10600
- const result = arbitraryValueRegex.exec(value);
10601
- if (result) {
10602
- if (result[1]) {
10603
- return testLabel(result[1]);
10604
- }
10605
- return testValue(result[2]);
10606
- }
10607
- return false;
10608
- };
10609
- const getIsArbitraryVariable = (value, testLabel, shouldMatchNoLabel = false) => {
10610
- const result = arbitraryVariableRegex.exec(value);
10611
- if (result) {
10612
- if (result[1]) {
10613
- return testLabel(result[1]);
10614
- }
10615
- return shouldMatchNoLabel;
10616
- }
10617
- return false;
10618
- };
10619
- // Labels
10620
- const isLabelPosition = label => label === 'position' || label === 'percentage';
10621
- const isLabelImage = label => label === 'image' || label === 'url';
10622
- const isLabelSize = label => label === 'length' || label === 'size' || label === 'bg-size';
10623
- const isLabelLength = label => label === 'length';
10624
- const isLabelNumber = label => label === 'number';
10625
- const isLabelFamilyName = label => label === 'family-name';
10626
- const isLabelShadow = label => label === 'shadow';
10627
- const getDefaultConfig = () => {
10628
- /**
10629
- * Theme getters for theme variable namespaces
10630
- * @see https://tailwindcss.com/docs/theme#theme-variable-namespaces
10631
- */
10632
- /***/
10633
- const themeColor = fromTheme('color');
10634
- const themeFont = fromTheme('font');
10635
- const themeText = fromTheme('text');
10636
- const themeFontWeight = fromTheme('font-weight');
10637
- const themeTracking = fromTheme('tracking');
10638
- const themeLeading = fromTheme('leading');
10639
- const themeBreakpoint = fromTheme('breakpoint');
10640
- const themeContainer = fromTheme('container');
10641
- const themeSpacing = fromTheme('spacing');
10642
- const themeRadius = fromTheme('radius');
10643
- const themeShadow = fromTheme('shadow');
10644
- const themeInsetShadow = fromTheme('inset-shadow');
10645
- const themeTextShadow = fromTheme('text-shadow');
10646
- const themeDropShadow = fromTheme('drop-shadow');
10647
- const themeBlur = fromTheme('blur');
10648
- const themePerspective = fromTheme('perspective');
10649
- const themeAspect = fromTheme('aspect');
10650
- const themeEase = fromTheme('ease');
10651
- const themeAnimate = fromTheme('animate');
10652
- /**
10653
- * Helpers to avoid repeating the same scales
10654
- *
10655
- * We use functions that create a new array every time they're called instead of static arrays.
10656
- * This ensures that users who modify any scale by mutating the array (e.g. with `array.push(element)`) don't accidentally mutate arrays in other parts of the config.
10657
- */
10658
- /***/
10659
- const scaleBreak = () => ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'];
10660
- const scalePosition = () => ['center', 'top', 'bottom', 'left', 'right', 'top-left',
10661
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
10662
- 'left-top', 'top-right',
10663
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
10664
- 'right-top', 'bottom-right',
10665
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
10666
- 'right-bottom', 'bottom-left',
10667
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
10668
- 'left-bottom'];
10669
- const scalePositionWithArbitrary = () => [...scalePosition(), isArbitraryVariable, isArbitraryValue];
10670
- const scaleOverflow = () => ['auto', 'hidden', 'clip', 'visible', 'scroll'];
10671
- const scaleOverscroll = () => ['auto', 'contain', 'none'];
10672
- const scaleUnambiguousSpacing = () => [isArbitraryVariable, isArbitraryValue, themeSpacing];
10673
- const scaleInset = () => [isFraction, 'full', 'auto', ...scaleUnambiguousSpacing()];
10674
- const scaleGridTemplateColsRows = () => [isInteger, 'none', 'subgrid', isArbitraryVariable, isArbitraryValue];
10675
- const scaleGridColRowStartAndEnd = () => ['auto', {
10676
- span: ['full', isInteger, isArbitraryVariable, isArbitraryValue]
10677
- }, isInteger, isArbitraryVariable, isArbitraryValue];
10678
- const scaleGridColRowStartOrEnd = () => [isInteger, 'auto', isArbitraryVariable, isArbitraryValue];
10679
- const scaleGridAutoColsRows = () => ['auto', 'min', 'max', 'fr', isArbitraryVariable, isArbitraryValue];
10680
- const scaleAlignPrimaryAxis = () => ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch', 'baseline', 'center-safe', 'end-safe'];
10681
- const scaleAlignSecondaryAxis = () => ['start', 'end', 'center', 'stretch', 'center-safe', 'end-safe'];
10682
- const scaleMargin = () => ['auto', ...scaleUnambiguousSpacing()];
10683
- const scaleSizing = () => [isFraction, 'auto', 'full', 'dvw', 'dvh', 'lvw', 'lvh', 'svw', 'svh', 'min', 'max', 'fit', ...scaleUnambiguousSpacing()];
10684
- const scaleColor = () => [themeColor, isArbitraryVariable, isArbitraryValue];
10685
- const scaleBgPosition = () => [...scalePosition(), isArbitraryVariablePosition, isArbitraryPosition, {
10686
- position: [isArbitraryVariable, isArbitraryValue]
10687
- }];
10688
- const scaleBgRepeat = () => ['no-repeat', {
10689
- repeat: ['', 'x', 'y', 'space', 'round']
10690
- }];
10691
- const scaleBgSize = () => ['auto', 'cover', 'contain', isArbitraryVariableSize, isArbitrarySize, {
10692
- size: [isArbitraryVariable, isArbitraryValue]
10693
- }];
10694
- const scaleGradientStopPosition = () => [isPercent, isArbitraryVariableLength, isArbitraryLength];
10695
- const scaleRadius = () => [
10696
- // Deprecated since Tailwind CSS v4.0.0
10697
- '', 'none', 'full', themeRadius, isArbitraryVariable, isArbitraryValue];
10698
- const scaleBorderWidth = () => ['', isNumber, isArbitraryVariableLength, isArbitraryLength];
10699
- const scaleLineStyle = () => ['solid', 'dashed', 'dotted', 'double'];
10700
- const scaleBlendMode = () => ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'];
10701
- const scaleMaskImagePosition = () => [isNumber, isPercent, isArbitraryVariablePosition, isArbitraryPosition];
10702
- const scaleBlur = () => [
10703
- // Deprecated since Tailwind CSS v4.0.0
10704
- '', 'none', themeBlur, isArbitraryVariable, isArbitraryValue];
10705
- const scaleRotate = () => ['none', isNumber, isArbitraryVariable, isArbitraryValue];
10706
- const scaleScale = () => ['none', isNumber, isArbitraryVariable, isArbitraryValue];
10707
- const scaleSkew = () => [isNumber, isArbitraryVariable, isArbitraryValue];
10708
- const scaleTranslate = () => [isFraction, 'full', ...scaleUnambiguousSpacing()];
10709
- return {
10710
- cacheSize: 500,
10711
- theme: {
10712
- animate: ['spin', 'ping', 'pulse', 'bounce'],
10713
- aspect: ['video'],
10714
- blur: [isTshirtSize],
10715
- breakpoint: [isTshirtSize],
10716
- color: [isAny],
10717
- container: [isTshirtSize],
10718
- 'drop-shadow': [isTshirtSize],
10719
- ease: ['in', 'out', 'in-out'],
10720
- font: [isAnyNonArbitrary],
10721
- 'font-weight': ['thin', 'extralight', 'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold', 'black'],
10722
- 'inset-shadow': [isTshirtSize],
10723
- leading: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose'],
10724
- perspective: ['dramatic', 'near', 'normal', 'midrange', 'distant', 'none'],
10725
- radius: [isTshirtSize],
10726
- shadow: [isTshirtSize],
10727
- spacing: ['px', isNumber],
10728
- text: [isTshirtSize],
10729
- 'text-shadow': [isTshirtSize],
10730
- tracking: ['tighter', 'tight', 'normal', 'wide', 'wider', 'widest']
10731
- },
10732
- classGroups: {
10733
- // --------------
10734
- // --- Layout ---
10735
- // --------------
10736
- /**
10737
- * Aspect Ratio
10738
- * @see https://tailwindcss.com/docs/aspect-ratio
10739
- */
10740
- aspect: [{
10741
- aspect: ['auto', 'square', isFraction, isArbitraryValue, isArbitraryVariable, themeAspect]
10742
- }],
10743
- /**
10744
- * Container
10745
- * @see https://tailwindcss.com/docs/container
10746
- * @deprecated since Tailwind CSS v4.0.0
10747
- */
10748
- container: ['container'],
10749
- /**
10750
- * Columns
10751
- * @see https://tailwindcss.com/docs/columns
10752
- */
10753
- columns: [{
10754
- columns: [isNumber, isArbitraryValue, isArbitraryVariable, themeContainer]
10755
- }],
10756
- /**
10757
- * Break After
10758
- * @see https://tailwindcss.com/docs/break-after
10759
- */
10760
- 'break-after': [{
10761
- 'break-after': scaleBreak()
10762
- }],
10763
- /**
10764
- * Break Before
10765
- * @see https://tailwindcss.com/docs/break-before
10766
- */
10767
- 'break-before': [{
10768
- 'break-before': scaleBreak()
10769
- }],
10770
- /**
10771
- * Break Inside
10772
- * @see https://tailwindcss.com/docs/break-inside
10773
- */
10774
- 'break-inside': [{
10775
- 'break-inside': ['auto', 'avoid', 'avoid-page', 'avoid-column']
10776
- }],
10777
- /**
10778
- * Box Decoration Break
10779
- * @see https://tailwindcss.com/docs/box-decoration-break
10780
- */
10781
- 'box-decoration': [{
10782
- 'box-decoration': ['slice', 'clone']
10783
- }],
10784
- /**
10785
- * Box Sizing
10786
- * @see https://tailwindcss.com/docs/box-sizing
10787
- */
10788
- box: [{
10789
- box: ['border', 'content']
10790
- }],
10791
- /**
10792
- * Display
10793
- * @see https://tailwindcss.com/docs/display
10794
- */
10795
- 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'],
10796
- /**
10797
- * Screen Reader Only
10798
- * @see https://tailwindcss.com/docs/display#screen-reader-only
10799
- */
10800
- sr: ['sr-only', 'not-sr-only'],
10801
- /**
10802
- * Floats
10803
- * @see https://tailwindcss.com/docs/float
10804
- */
10805
- float: [{
10806
- float: ['right', 'left', 'none', 'start', 'end']
10807
- }],
10808
- /**
10809
- * Clear
10810
- * @see https://tailwindcss.com/docs/clear
10811
- */
10812
- clear: [{
10813
- clear: ['left', 'right', 'both', 'none', 'start', 'end']
10814
- }],
10815
- /**
10816
- * Isolation
10817
- * @see https://tailwindcss.com/docs/isolation
10818
- */
10819
- isolation: ['isolate', 'isolation-auto'],
10820
- /**
10821
- * Object Fit
10822
- * @see https://tailwindcss.com/docs/object-fit
10823
- */
10824
- 'object-fit': [{
10825
- object: ['contain', 'cover', 'fill', 'none', 'scale-down']
10826
- }],
10827
- /**
10828
- * Object Position
10829
- * @see https://tailwindcss.com/docs/object-position
10830
- */
10831
- 'object-position': [{
10832
- object: scalePositionWithArbitrary()
10833
- }],
10834
- /**
10835
- * Overflow
10836
- * @see https://tailwindcss.com/docs/overflow
10837
- */
10838
- overflow: [{
10839
- overflow: scaleOverflow()
10840
- }],
10841
- /**
10842
- * Overflow X
10843
- * @see https://tailwindcss.com/docs/overflow
10844
- */
10845
- 'overflow-x': [{
10846
- 'overflow-x': scaleOverflow()
10847
- }],
10848
- /**
10849
- * Overflow Y
10850
- * @see https://tailwindcss.com/docs/overflow
10851
- */
10852
- 'overflow-y': [{
10853
- 'overflow-y': scaleOverflow()
10854
- }],
10855
- /**
10856
- * Overscroll Behavior
10857
- * @see https://tailwindcss.com/docs/overscroll-behavior
10858
- */
10859
- overscroll: [{
10860
- overscroll: scaleOverscroll()
10861
- }],
10862
- /**
10863
- * Overscroll Behavior X
10864
- * @see https://tailwindcss.com/docs/overscroll-behavior
10865
- */
10866
- 'overscroll-x': [{
10867
- 'overscroll-x': scaleOverscroll()
10868
- }],
10869
- /**
10870
- * Overscroll Behavior Y
10871
- * @see https://tailwindcss.com/docs/overscroll-behavior
10872
- */
10873
- 'overscroll-y': [{
10874
- 'overscroll-y': scaleOverscroll()
10875
- }],
10876
- /**
10877
- * Position
10878
- * @see https://tailwindcss.com/docs/position
10879
- */
10880
- position: ['static', 'fixed', 'absolute', 'relative', 'sticky'],
10881
- /**
10882
- * Top / Right / Bottom / Left
10883
- * @see https://tailwindcss.com/docs/top-right-bottom-left
10884
- */
10885
- inset: [{
10886
- inset: scaleInset()
10887
- }],
10888
- /**
10889
- * Right / Left
10890
- * @see https://tailwindcss.com/docs/top-right-bottom-left
10891
- */
10892
- 'inset-x': [{
10893
- 'inset-x': scaleInset()
10894
- }],
10895
- /**
10896
- * Top / Bottom
10897
- * @see https://tailwindcss.com/docs/top-right-bottom-left
10898
- */
10899
- 'inset-y': [{
10900
- 'inset-y': scaleInset()
10901
- }],
10902
- /**
10903
- * Start
10904
- * @see https://tailwindcss.com/docs/top-right-bottom-left
10905
- */
10906
- start: [{
10907
- start: scaleInset()
10908
- }],
10909
- /**
10910
- * End
10911
- * @see https://tailwindcss.com/docs/top-right-bottom-left
10912
- */
10913
- end: [{
10914
- end: scaleInset()
10915
- }],
10916
- /**
10917
- * Top
10918
- * @see https://tailwindcss.com/docs/top-right-bottom-left
10919
- */
10920
- top: [{
10921
- top: scaleInset()
10922
- }],
10923
- /**
10924
- * Right
10925
- * @see https://tailwindcss.com/docs/top-right-bottom-left
10926
- */
10927
- right: [{
10928
- right: scaleInset()
10929
- }],
10930
- /**
10931
- * Bottom
10932
- * @see https://tailwindcss.com/docs/top-right-bottom-left
10933
- */
10934
- bottom: [{
10935
- bottom: scaleInset()
10936
- }],
10937
- /**
10938
- * Left
10939
- * @see https://tailwindcss.com/docs/top-right-bottom-left
10940
- */
10941
- left: [{
10942
- left: scaleInset()
10943
- }],
10944
- /**
10945
- * Visibility
10946
- * @see https://tailwindcss.com/docs/visibility
10947
- */
10948
- visibility: ['visible', 'invisible', 'collapse'],
10949
- /**
10950
- * Z-Index
10951
- * @see https://tailwindcss.com/docs/z-index
10952
- */
10953
- z: [{
10954
- z: [isInteger, 'auto', isArbitraryVariable, isArbitraryValue]
10955
- }],
10956
- // ------------------------
10957
- // --- Flexbox and Grid ---
10958
- // ------------------------
10959
- /**
10960
- * Flex Basis
10961
- * @see https://tailwindcss.com/docs/flex-basis
10962
- */
10963
- basis: [{
10964
- basis: [isFraction, 'full', 'auto', themeContainer, ...scaleUnambiguousSpacing()]
10965
- }],
10966
- /**
10967
- * Flex Direction
10968
- * @see https://tailwindcss.com/docs/flex-direction
10969
- */
10970
- 'flex-direction': [{
10971
- flex: ['row', 'row-reverse', 'col', 'col-reverse']
10972
- }],
10973
- /**
10974
- * Flex Wrap
10975
- * @see https://tailwindcss.com/docs/flex-wrap
10976
- */
10977
- 'flex-wrap': [{
10978
- flex: ['nowrap', 'wrap', 'wrap-reverse']
10979
- }],
10980
- /**
10981
- * Flex
10982
- * @see https://tailwindcss.com/docs/flex
10983
- */
10984
- flex: [{
10985
- flex: [isNumber, isFraction, 'auto', 'initial', 'none', isArbitraryValue]
10986
- }],
10987
- /**
10988
- * Flex Grow
10989
- * @see https://tailwindcss.com/docs/flex-grow
10990
- */
10991
- grow: [{
10992
- grow: ['', isNumber, isArbitraryVariable, isArbitraryValue]
10993
- }],
10994
- /**
10995
- * Flex Shrink
10996
- * @see https://tailwindcss.com/docs/flex-shrink
10997
- */
10998
- shrink: [{
10999
- shrink: ['', isNumber, isArbitraryVariable, isArbitraryValue]
11000
- }],
11001
- /**
11002
- * Order
11003
- * @see https://tailwindcss.com/docs/order
11004
- */
11005
- order: [{
11006
- order: [isInteger, 'first', 'last', 'none', isArbitraryVariable, isArbitraryValue]
11007
- }],
11008
- /**
11009
- * Grid Template Columns
11010
- * @see https://tailwindcss.com/docs/grid-template-columns
11011
- */
11012
- 'grid-cols': [{
11013
- 'grid-cols': scaleGridTemplateColsRows()
11014
- }],
11015
- /**
11016
- * Grid Column Start / End
11017
- * @see https://tailwindcss.com/docs/grid-column
11018
- */
11019
- 'col-start-end': [{
11020
- col: scaleGridColRowStartAndEnd()
11021
- }],
11022
- /**
11023
- * Grid Column Start
11024
- * @see https://tailwindcss.com/docs/grid-column
11025
- */
11026
- 'col-start': [{
11027
- 'col-start': scaleGridColRowStartOrEnd()
11028
- }],
11029
- /**
11030
- * Grid Column End
11031
- * @see https://tailwindcss.com/docs/grid-column
11032
- */
11033
- 'col-end': [{
11034
- 'col-end': scaleGridColRowStartOrEnd()
11035
- }],
11036
- /**
11037
- * Grid Template Rows
11038
- * @see https://tailwindcss.com/docs/grid-template-rows
11039
- */
11040
- 'grid-rows': [{
11041
- 'grid-rows': scaleGridTemplateColsRows()
11042
- }],
11043
- /**
11044
- * Grid Row Start / End
11045
- * @see https://tailwindcss.com/docs/grid-row
11046
- */
11047
- 'row-start-end': [{
11048
- row: scaleGridColRowStartAndEnd()
11049
- }],
11050
- /**
11051
- * Grid Row Start
11052
- * @see https://tailwindcss.com/docs/grid-row
11053
- */
11054
- 'row-start': [{
11055
- 'row-start': scaleGridColRowStartOrEnd()
11056
- }],
11057
- /**
11058
- * Grid Row End
11059
- * @see https://tailwindcss.com/docs/grid-row
11060
- */
11061
- 'row-end': [{
11062
- 'row-end': scaleGridColRowStartOrEnd()
11063
- }],
11064
- /**
11065
- * Grid Auto Flow
11066
- * @see https://tailwindcss.com/docs/grid-auto-flow
11067
- */
11068
- 'grid-flow': [{
11069
- 'grid-flow': ['row', 'col', 'dense', 'row-dense', 'col-dense']
11070
- }],
11071
- /**
11072
- * Grid Auto Columns
11073
- * @see https://tailwindcss.com/docs/grid-auto-columns
11074
- */
11075
- 'auto-cols': [{
11076
- 'auto-cols': scaleGridAutoColsRows()
11077
- }],
11078
- /**
11079
- * Grid Auto Rows
11080
- * @see https://tailwindcss.com/docs/grid-auto-rows
11081
- */
11082
- 'auto-rows': [{
11083
- 'auto-rows': scaleGridAutoColsRows()
11084
- }],
11085
- /**
11086
- * Gap
11087
- * @see https://tailwindcss.com/docs/gap
11088
- */
11089
- gap: [{
11090
- gap: scaleUnambiguousSpacing()
11091
- }],
11092
- /**
11093
- * Gap X
11094
- * @see https://tailwindcss.com/docs/gap
11095
- */
11096
- 'gap-x': [{
11097
- 'gap-x': scaleUnambiguousSpacing()
11098
- }],
11099
- /**
11100
- * Gap Y
11101
- * @see https://tailwindcss.com/docs/gap
11102
- */
11103
- 'gap-y': [{
11104
- 'gap-y': scaleUnambiguousSpacing()
11105
- }],
11106
- /**
11107
- * Justify Content
11108
- * @see https://tailwindcss.com/docs/justify-content
11109
- */
11110
- 'justify-content': [{
11111
- justify: [...scaleAlignPrimaryAxis(), 'normal']
11112
- }],
11113
- /**
11114
- * Justify Items
11115
- * @see https://tailwindcss.com/docs/justify-items
11116
- */
11117
- 'justify-items': [{
11118
- 'justify-items': [...scaleAlignSecondaryAxis(), 'normal']
11119
- }],
11120
- /**
11121
- * Justify Self
11122
- * @see https://tailwindcss.com/docs/justify-self
11123
- */
11124
- 'justify-self': [{
11125
- 'justify-self': ['auto', ...scaleAlignSecondaryAxis()]
11126
- }],
11127
- /**
11128
- * Align Content
11129
- * @see https://tailwindcss.com/docs/align-content
11130
- */
11131
- 'align-content': [{
11132
- content: ['normal', ...scaleAlignPrimaryAxis()]
11133
- }],
11134
- /**
11135
- * Align Items
11136
- * @see https://tailwindcss.com/docs/align-items
11137
- */
11138
- 'align-items': [{
11139
- items: [...scaleAlignSecondaryAxis(), {
11140
- baseline: ['', 'last']
11141
- }]
11142
- }],
11143
- /**
11144
- * Align Self
11145
- * @see https://tailwindcss.com/docs/align-self
11146
- */
11147
- 'align-self': [{
11148
- self: ['auto', ...scaleAlignSecondaryAxis(), {
11149
- baseline: ['', 'last']
11150
- }]
11151
- }],
11152
- /**
11153
- * Place Content
11154
- * @see https://tailwindcss.com/docs/place-content
11155
- */
11156
- 'place-content': [{
11157
- 'place-content': scaleAlignPrimaryAxis()
11158
- }],
11159
- /**
11160
- * Place Items
11161
- * @see https://tailwindcss.com/docs/place-items
11162
- */
11163
- 'place-items': [{
11164
- 'place-items': [...scaleAlignSecondaryAxis(), 'baseline']
11165
- }],
11166
- /**
11167
- * Place Self
11168
- * @see https://tailwindcss.com/docs/place-self
11169
- */
11170
- 'place-self': [{
11171
- 'place-self': ['auto', ...scaleAlignSecondaryAxis()]
11172
- }],
11173
- // Spacing
11174
- /**
11175
- * Padding
11176
- * @see https://tailwindcss.com/docs/padding
11177
- */
11178
- p: [{
11179
- p: scaleUnambiguousSpacing()
11180
- }],
11181
- /**
11182
- * Padding X
11183
- * @see https://tailwindcss.com/docs/padding
11184
- */
11185
- px: [{
11186
- px: scaleUnambiguousSpacing()
11187
- }],
11188
- /**
11189
- * Padding Y
11190
- * @see https://tailwindcss.com/docs/padding
11191
- */
11192
- py: [{
11193
- py: scaleUnambiguousSpacing()
11194
- }],
11195
- /**
11196
- * Padding Start
11197
- * @see https://tailwindcss.com/docs/padding
11198
- */
11199
- ps: [{
11200
- ps: scaleUnambiguousSpacing()
11201
- }],
11202
- /**
11203
- * Padding End
11204
- * @see https://tailwindcss.com/docs/padding
11205
- */
11206
- pe: [{
11207
- pe: scaleUnambiguousSpacing()
11208
- }],
11209
- /**
11210
- * Padding Top
11211
- * @see https://tailwindcss.com/docs/padding
11212
- */
11213
- pt: [{
11214
- pt: scaleUnambiguousSpacing()
11215
- }],
11216
- /**
11217
- * Padding Right
11218
- * @see https://tailwindcss.com/docs/padding
11219
- */
11220
- pr: [{
11221
- pr: scaleUnambiguousSpacing()
11222
- }],
11223
- /**
11224
- * Padding Bottom
11225
- * @see https://tailwindcss.com/docs/padding
11226
- */
11227
- pb: [{
11228
- pb: scaleUnambiguousSpacing()
11229
- }],
11230
- /**
11231
- * Padding Left
11232
- * @see https://tailwindcss.com/docs/padding
11233
- */
11234
- pl: [{
11235
- pl: scaleUnambiguousSpacing()
11236
- }],
11237
- /**
11238
- * Margin
11239
- * @see https://tailwindcss.com/docs/margin
11240
- */
11241
- m: [{
11242
- m: scaleMargin()
11243
- }],
11244
- /**
11245
- * Margin X
11246
- * @see https://tailwindcss.com/docs/margin
11247
- */
11248
- mx: [{
11249
- mx: scaleMargin()
11250
- }],
11251
- /**
11252
- * Margin Y
11253
- * @see https://tailwindcss.com/docs/margin
11254
- */
11255
- my: [{
11256
- my: scaleMargin()
11257
- }],
11258
- /**
11259
- * Margin Start
11260
- * @see https://tailwindcss.com/docs/margin
11261
- */
11262
- ms: [{
11263
- ms: scaleMargin()
11264
- }],
11265
- /**
11266
- * Margin End
11267
- * @see https://tailwindcss.com/docs/margin
11268
- */
11269
- me: [{
11270
- me: scaleMargin()
11271
- }],
11272
- /**
11273
- * Margin Top
11274
- * @see https://tailwindcss.com/docs/margin
11275
- */
11276
- mt: [{
11277
- mt: scaleMargin()
11278
- }],
11279
- /**
11280
- * Margin Right
11281
- * @see https://tailwindcss.com/docs/margin
11282
- */
11283
- mr: [{
11284
- mr: scaleMargin()
11285
- }],
11286
- /**
11287
- * Margin Bottom
11288
- * @see https://tailwindcss.com/docs/margin
11289
- */
11290
- mb: [{
11291
- mb: scaleMargin()
11292
- }],
11293
- /**
11294
- * Margin Left
11295
- * @see https://tailwindcss.com/docs/margin
11296
- */
11297
- ml: [{
11298
- ml: scaleMargin()
11299
- }],
11300
- /**
11301
- * Space Between X
11302
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
11303
- */
11304
- 'space-x': [{
11305
- 'space-x': scaleUnambiguousSpacing()
11306
- }],
11307
- /**
11308
- * Space Between X Reverse
11309
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
11310
- */
11311
- 'space-x-reverse': ['space-x-reverse'],
11312
- /**
11313
- * Space Between Y
11314
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
11315
- */
11316
- 'space-y': [{
11317
- 'space-y': scaleUnambiguousSpacing()
11318
- }],
11319
- /**
11320
- * Space Between Y Reverse
11321
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
11322
- */
11323
- 'space-y-reverse': ['space-y-reverse'],
11324
- // --------------
11325
- // --- Sizing ---
11326
- // --------------
11327
- /**
11328
- * Size
11329
- * @see https://tailwindcss.com/docs/width#setting-both-width-and-height
11330
- */
11331
- size: [{
11332
- size: scaleSizing()
11333
- }],
11334
- /**
11335
- * Width
11336
- * @see https://tailwindcss.com/docs/width
11337
- */
11338
- w: [{
11339
- w: [themeContainer, 'screen', ...scaleSizing()]
11340
- }],
11341
- /**
11342
- * Min-Width
11343
- * @see https://tailwindcss.com/docs/min-width
11344
- */
11345
- 'min-w': [{
11346
- 'min-w': [themeContainer, 'screen', /** Deprecated. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
11347
- 'none', ...scaleSizing()]
11348
- }],
11349
- /**
11350
- * Max-Width
11351
- * @see https://tailwindcss.com/docs/max-width
11352
- */
11353
- 'max-w': [{
11354
- 'max-w': [themeContainer, 'screen', 'none', /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
11355
- 'prose', /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
11356
- {
11357
- screen: [themeBreakpoint]
11358
- }, ...scaleSizing()]
11359
- }],
11360
- /**
11361
- * Height
11362
- * @see https://tailwindcss.com/docs/height
11363
- */
11364
- h: [{
11365
- h: ['screen', 'lh', ...scaleSizing()]
11366
- }],
11367
- /**
11368
- * Min-Height
11369
- * @see https://tailwindcss.com/docs/min-height
11370
- */
11371
- 'min-h': [{
11372
- 'min-h': ['screen', 'lh', 'none', ...scaleSizing()]
11373
- }],
11374
- /**
11375
- * Max-Height
11376
- * @see https://tailwindcss.com/docs/max-height
11377
- */
11378
- 'max-h': [{
11379
- 'max-h': ['screen', 'lh', ...scaleSizing()]
11380
- }],
11381
- // ------------------
11382
- // --- Typography ---
11383
- // ------------------
11384
- /**
11385
- * Font Size
11386
- * @see https://tailwindcss.com/docs/font-size
11387
- */
11388
- 'font-size': [{
11389
- text: ['base', themeText, isArbitraryVariableLength, isArbitraryLength]
11390
- }],
11391
- /**
11392
- * Font Smoothing
11393
- * @see https://tailwindcss.com/docs/font-smoothing
11394
- */
11395
- 'font-smoothing': ['antialiased', 'subpixel-antialiased'],
11396
- /**
11397
- * Font Style
11398
- * @see https://tailwindcss.com/docs/font-style
11399
- */
11400
- 'font-style': ['italic', 'not-italic'],
11401
- /**
11402
- * Font Weight
11403
- * @see https://tailwindcss.com/docs/font-weight
11404
- */
11405
- 'font-weight': [{
11406
- font: [themeFontWeight, isArbitraryVariable, isArbitraryNumber]
11407
- }],
11408
- /**
11409
- * Font Stretch
11410
- * @see https://tailwindcss.com/docs/font-stretch
11411
- */
11412
- 'font-stretch': [{
11413
- 'font-stretch': ['ultra-condensed', 'extra-condensed', 'condensed', 'semi-condensed', 'normal', 'semi-expanded', 'expanded', 'extra-expanded', 'ultra-expanded', isPercent, isArbitraryValue]
11414
- }],
11415
- /**
11416
- * Font Family
11417
- * @see https://tailwindcss.com/docs/font-family
11418
- */
11419
- 'font-family': [{
11420
- font: [isArbitraryVariableFamilyName, isArbitraryValue, themeFont]
11421
- }],
11422
- /**
11423
- * Font Variant Numeric
11424
- * @see https://tailwindcss.com/docs/font-variant-numeric
11425
- */
11426
- 'fvn-normal': ['normal-nums'],
11427
- /**
11428
- * Font Variant Numeric
11429
- * @see https://tailwindcss.com/docs/font-variant-numeric
11430
- */
11431
- 'fvn-ordinal': ['ordinal'],
11432
- /**
11433
- * Font Variant Numeric
11434
- * @see https://tailwindcss.com/docs/font-variant-numeric
11435
- */
11436
- 'fvn-slashed-zero': ['slashed-zero'],
11437
- /**
11438
- * Font Variant Numeric
11439
- * @see https://tailwindcss.com/docs/font-variant-numeric
11440
- */
11441
- 'fvn-figure': ['lining-nums', 'oldstyle-nums'],
11442
- /**
11443
- * Font Variant Numeric
11444
- * @see https://tailwindcss.com/docs/font-variant-numeric
11445
- */
11446
- 'fvn-spacing': ['proportional-nums', 'tabular-nums'],
11447
- /**
11448
- * Font Variant Numeric
11449
- * @see https://tailwindcss.com/docs/font-variant-numeric
11450
- */
11451
- 'fvn-fraction': ['diagonal-fractions', 'stacked-fractions'],
11452
- /**
11453
- * Letter Spacing
11454
- * @see https://tailwindcss.com/docs/letter-spacing
11455
- */
11456
- tracking: [{
11457
- tracking: [themeTracking, isArbitraryVariable, isArbitraryValue]
11458
- }],
11459
- /**
11460
- * Line Clamp
11461
- * @see https://tailwindcss.com/docs/line-clamp
11462
- */
11463
- 'line-clamp': [{
11464
- 'line-clamp': [isNumber, 'none', isArbitraryVariable, isArbitraryNumber]
11465
- }],
11466
- /**
11467
- * Line Height
11468
- * @see https://tailwindcss.com/docs/line-height
11469
- */
11470
- leading: [{
11471
- leading: [/** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
11472
- themeLeading, ...scaleUnambiguousSpacing()]
11473
- }],
11474
- /**
11475
- * List Style Image
11476
- * @see https://tailwindcss.com/docs/list-style-image
11477
- */
11478
- 'list-image': [{
11479
- 'list-image': ['none', isArbitraryVariable, isArbitraryValue]
11480
- }],
11481
- /**
11482
- * List Style Position
11483
- * @see https://tailwindcss.com/docs/list-style-position
11484
- */
11485
- 'list-style-position': [{
11486
- list: ['inside', 'outside']
11487
- }],
11488
- /**
11489
- * List Style Type
11490
- * @see https://tailwindcss.com/docs/list-style-type
11491
- */
11492
- 'list-style-type': [{
11493
- list: ['disc', 'decimal', 'none', isArbitraryVariable, isArbitraryValue]
11494
- }],
11495
- /**
11496
- * Text Alignment
11497
- * @see https://tailwindcss.com/docs/text-align
11498
- */
11499
- 'text-alignment': [{
11500
- text: ['left', 'center', 'right', 'justify', 'start', 'end']
11501
- }],
11502
- /**
11503
- * Placeholder Color
11504
- * @deprecated since Tailwind CSS v3.0.0
11505
- * @see https://v3.tailwindcss.com/docs/placeholder-color
11506
- */
11507
- 'placeholder-color': [{
11508
- placeholder: scaleColor()
11509
- }],
11510
- /**
11511
- * Text Color
11512
- * @see https://tailwindcss.com/docs/text-color
11513
- */
11514
- 'text-color': [{
11515
- text: scaleColor()
11516
- }],
11517
- /**
11518
- * Text Decoration
11519
- * @see https://tailwindcss.com/docs/text-decoration
11520
- */
11521
- 'text-decoration': ['underline', 'overline', 'line-through', 'no-underline'],
11522
- /**
11523
- * Text Decoration Style
11524
- * @see https://tailwindcss.com/docs/text-decoration-style
11525
- */
11526
- 'text-decoration-style': [{
11527
- decoration: [...scaleLineStyle(), 'wavy']
11528
- }],
11529
- /**
11530
- * Text Decoration Thickness
11531
- * @see https://tailwindcss.com/docs/text-decoration-thickness
11532
- */
11533
- 'text-decoration-thickness': [{
11534
- decoration: [isNumber, 'from-font', 'auto', isArbitraryVariable, isArbitraryLength]
11535
- }],
11536
- /**
11537
- * Text Decoration Color
11538
- * @see https://tailwindcss.com/docs/text-decoration-color
11539
- */
11540
- 'text-decoration-color': [{
11541
- decoration: scaleColor()
11542
- }],
11543
- /**
11544
- * Text Underline Offset
11545
- * @see https://tailwindcss.com/docs/text-underline-offset
11546
- */
11547
- 'underline-offset': [{
11548
- 'underline-offset': [isNumber, 'auto', isArbitraryVariable, isArbitraryValue]
11549
- }],
11550
- /**
11551
- * Text Transform
11552
- * @see https://tailwindcss.com/docs/text-transform
11553
- */
11554
- 'text-transform': ['uppercase', 'lowercase', 'capitalize', 'normal-case'],
11555
- /**
11556
- * Text Overflow
11557
- * @see https://tailwindcss.com/docs/text-overflow
11558
- */
11559
- 'text-overflow': ['truncate', 'text-ellipsis', 'text-clip'],
11560
- /**
11561
- * Text Wrap
11562
- * @see https://tailwindcss.com/docs/text-wrap
11563
- */
11564
- 'text-wrap': [{
11565
- text: ['wrap', 'nowrap', 'balance', 'pretty']
11566
- }],
11567
- /**
11568
- * Text Indent
11569
- * @see https://tailwindcss.com/docs/text-indent
11570
- */
11571
- indent: [{
11572
- indent: scaleUnambiguousSpacing()
11573
- }],
11574
- /**
11575
- * Vertical Alignment
11576
- * @see https://tailwindcss.com/docs/vertical-align
11577
- */
11578
- 'vertical-align': [{
11579
- align: ['baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom', 'sub', 'super', isArbitraryVariable, isArbitraryValue]
11580
- }],
11581
- /**
11582
- * Whitespace
11583
- * @see https://tailwindcss.com/docs/whitespace
11584
- */
11585
- whitespace: [{
11586
- whitespace: ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces']
11587
- }],
11588
- /**
11589
- * Word Break
11590
- * @see https://tailwindcss.com/docs/word-break
11591
- */
11592
- break: [{
11593
- break: ['normal', 'words', 'all', 'keep']
11594
- }],
11595
- /**
11596
- * Overflow Wrap
11597
- * @see https://tailwindcss.com/docs/overflow-wrap
11598
- */
11599
- wrap: [{
11600
- wrap: ['break-word', 'anywhere', 'normal']
11601
- }],
11602
- /**
11603
- * Hyphens
11604
- * @see https://tailwindcss.com/docs/hyphens
11605
- */
11606
- hyphens: [{
11607
- hyphens: ['none', 'manual', 'auto']
11608
- }],
11609
- /**
11610
- * Content
11611
- * @see https://tailwindcss.com/docs/content
11612
- */
11613
- content: [{
11614
- content: ['none', isArbitraryVariable, isArbitraryValue]
11615
- }],
11616
- // -------------------
11617
- // --- Backgrounds ---
11618
- // -------------------
11619
- /**
11620
- * Background Attachment
11621
- * @see https://tailwindcss.com/docs/background-attachment
11622
- */
11623
- 'bg-attachment': [{
11624
- bg: ['fixed', 'local', 'scroll']
11625
- }],
11626
- /**
11627
- * Background Clip
11628
- * @see https://tailwindcss.com/docs/background-clip
11629
- */
11630
- 'bg-clip': [{
11631
- 'bg-clip': ['border', 'padding', 'content', 'text']
11632
- }],
11633
- /**
11634
- * Background Origin
11635
- * @see https://tailwindcss.com/docs/background-origin
11636
- */
11637
- 'bg-origin': [{
11638
- 'bg-origin': ['border', 'padding', 'content']
11639
- }],
11640
- /**
11641
- * Background Position
11642
- * @see https://tailwindcss.com/docs/background-position
11643
- */
11644
- 'bg-position': [{
11645
- bg: scaleBgPosition()
11646
- }],
11647
- /**
11648
- * Background Repeat
11649
- * @see https://tailwindcss.com/docs/background-repeat
11650
- */
11651
- 'bg-repeat': [{
11652
- bg: scaleBgRepeat()
11653
- }],
11654
- /**
11655
- * Background Size
11656
- * @see https://tailwindcss.com/docs/background-size
11657
- */
11658
- 'bg-size': [{
11659
- bg: scaleBgSize()
11660
- }],
11661
- /**
11662
- * Background Image
11663
- * @see https://tailwindcss.com/docs/background-image
11664
- */
11665
- 'bg-image': [{
11666
- bg: ['none', {
11667
- linear: [{
11668
- to: ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl']
11669
- }, isInteger, isArbitraryVariable, isArbitraryValue],
11670
- radial: ['', isArbitraryVariable, isArbitraryValue],
11671
- conic: [isInteger, isArbitraryVariable, isArbitraryValue]
11672
- }, isArbitraryVariableImage, isArbitraryImage]
11673
- }],
11674
- /**
11675
- * Background Color
11676
- * @see https://tailwindcss.com/docs/background-color
11677
- */
11678
- 'bg-color': [{
11679
- bg: scaleColor()
11680
- }],
11681
- /**
11682
- * Gradient Color Stops From Position
11683
- * @see https://tailwindcss.com/docs/gradient-color-stops
11684
- */
11685
- 'gradient-from-pos': [{
11686
- from: scaleGradientStopPosition()
11687
- }],
11688
- /**
11689
- * Gradient Color Stops Via Position
11690
- * @see https://tailwindcss.com/docs/gradient-color-stops
11691
- */
11692
- 'gradient-via-pos': [{
11693
- via: scaleGradientStopPosition()
11694
- }],
11695
- /**
11696
- * Gradient Color Stops To Position
11697
- * @see https://tailwindcss.com/docs/gradient-color-stops
11698
- */
11699
- 'gradient-to-pos': [{
11700
- to: scaleGradientStopPosition()
11701
- }],
11702
- /**
11703
- * Gradient Color Stops From
11704
- * @see https://tailwindcss.com/docs/gradient-color-stops
11705
- */
11706
- 'gradient-from': [{
11707
- from: scaleColor()
11708
- }],
11709
- /**
11710
- * Gradient Color Stops Via
11711
- * @see https://tailwindcss.com/docs/gradient-color-stops
11712
- */
11713
- 'gradient-via': [{
11714
- via: scaleColor()
11715
- }],
11716
- /**
11717
- * Gradient Color Stops To
11718
- * @see https://tailwindcss.com/docs/gradient-color-stops
11719
- */
11720
- 'gradient-to': [{
11721
- to: scaleColor()
11722
- }],
11723
- // ---------------
11724
- // --- Borders ---
11725
- // ---------------
11726
- /**
11727
- * Border Radius
11728
- * @see https://tailwindcss.com/docs/border-radius
11729
- */
11730
- rounded: [{
11731
- rounded: scaleRadius()
11732
- }],
11733
- /**
11734
- * Border Radius Start
11735
- * @see https://tailwindcss.com/docs/border-radius
11736
- */
11737
- 'rounded-s': [{
11738
- 'rounded-s': scaleRadius()
11739
- }],
11740
- /**
11741
- * Border Radius End
11742
- * @see https://tailwindcss.com/docs/border-radius
11743
- */
11744
- 'rounded-e': [{
11745
- 'rounded-e': scaleRadius()
11746
- }],
11747
- /**
11748
- * Border Radius Top
11749
- * @see https://tailwindcss.com/docs/border-radius
11750
- */
11751
- 'rounded-t': [{
11752
- 'rounded-t': scaleRadius()
11753
- }],
11754
- /**
11755
- * Border Radius Right
11756
- * @see https://tailwindcss.com/docs/border-radius
11757
- */
11758
- 'rounded-r': [{
11759
- 'rounded-r': scaleRadius()
11760
- }],
11761
- /**
11762
- * Border Radius Bottom
11763
- * @see https://tailwindcss.com/docs/border-radius
11764
- */
11765
- 'rounded-b': [{
11766
- 'rounded-b': scaleRadius()
11767
- }],
11768
- /**
11769
- * Border Radius Left
11770
- * @see https://tailwindcss.com/docs/border-radius
11771
- */
11772
- 'rounded-l': [{
11773
- 'rounded-l': scaleRadius()
11774
- }],
11775
- /**
11776
- * Border Radius Start Start
11777
- * @see https://tailwindcss.com/docs/border-radius
11778
- */
11779
- 'rounded-ss': [{
11780
- 'rounded-ss': scaleRadius()
11781
- }],
11782
- /**
11783
- * Border Radius Start End
11784
- * @see https://tailwindcss.com/docs/border-radius
11785
- */
11786
- 'rounded-se': [{
11787
- 'rounded-se': scaleRadius()
11788
- }],
11789
- /**
11790
- * Border Radius End End
11791
- * @see https://tailwindcss.com/docs/border-radius
11792
- */
11793
- 'rounded-ee': [{
11794
- 'rounded-ee': scaleRadius()
11795
- }],
11796
- /**
11797
- * Border Radius End Start
11798
- * @see https://tailwindcss.com/docs/border-radius
11799
- */
11800
- 'rounded-es': [{
11801
- 'rounded-es': scaleRadius()
11802
- }],
11803
- /**
11804
- * Border Radius Top Left
11805
- * @see https://tailwindcss.com/docs/border-radius
11806
- */
11807
- 'rounded-tl': [{
11808
- 'rounded-tl': scaleRadius()
11809
- }],
11810
- /**
11811
- * Border Radius Top Right
11812
- * @see https://tailwindcss.com/docs/border-radius
11813
- */
11814
- 'rounded-tr': [{
11815
- 'rounded-tr': scaleRadius()
11816
- }],
11817
- /**
11818
- * Border Radius Bottom Right
11819
- * @see https://tailwindcss.com/docs/border-radius
11820
- */
11821
- 'rounded-br': [{
11822
- 'rounded-br': scaleRadius()
11823
- }],
11824
- /**
11825
- * Border Radius Bottom Left
11826
- * @see https://tailwindcss.com/docs/border-radius
11827
- */
11828
- 'rounded-bl': [{
11829
- 'rounded-bl': scaleRadius()
11830
- }],
11831
- /**
11832
- * Border Width
11833
- * @see https://tailwindcss.com/docs/border-width
11834
- */
11835
- 'border-w': [{
11836
- border: scaleBorderWidth()
11837
- }],
11838
- /**
11839
- * Border Width X
11840
- * @see https://tailwindcss.com/docs/border-width
11841
- */
11842
- 'border-w-x': [{
11843
- 'border-x': scaleBorderWidth()
11844
- }],
11845
- /**
11846
- * Border Width Y
11847
- * @see https://tailwindcss.com/docs/border-width
11848
- */
11849
- 'border-w-y': [{
11850
- 'border-y': scaleBorderWidth()
11851
- }],
11852
- /**
11853
- * Border Width Start
11854
- * @see https://tailwindcss.com/docs/border-width
11855
- */
11856
- 'border-w-s': [{
11857
- 'border-s': scaleBorderWidth()
11858
- }],
11859
- /**
11860
- * Border Width End
11861
- * @see https://tailwindcss.com/docs/border-width
11862
- */
11863
- 'border-w-e': [{
11864
- 'border-e': scaleBorderWidth()
11865
- }],
11866
- /**
11867
- * Border Width Top
11868
- * @see https://tailwindcss.com/docs/border-width
11869
- */
11870
- 'border-w-t': [{
11871
- 'border-t': scaleBorderWidth()
11872
- }],
11873
- /**
11874
- * Border Width Right
11875
- * @see https://tailwindcss.com/docs/border-width
11876
- */
11877
- 'border-w-r': [{
11878
- 'border-r': scaleBorderWidth()
11879
- }],
11880
- /**
11881
- * Border Width Bottom
11882
- * @see https://tailwindcss.com/docs/border-width
11883
- */
11884
- 'border-w-b': [{
11885
- 'border-b': scaleBorderWidth()
11886
- }],
11887
- /**
11888
- * Border Width Left
11889
- * @see https://tailwindcss.com/docs/border-width
11890
- */
11891
- 'border-w-l': [{
11892
- 'border-l': scaleBorderWidth()
11893
- }],
11894
- /**
11895
- * Divide Width X
11896
- * @see https://tailwindcss.com/docs/border-width#between-children
11897
- */
11898
- 'divide-x': [{
11899
- 'divide-x': scaleBorderWidth()
11900
- }],
11901
- /**
11902
- * Divide Width X Reverse
11903
- * @see https://tailwindcss.com/docs/border-width#between-children
11904
- */
11905
- 'divide-x-reverse': ['divide-x-reverse'],
11906
- /**
11907
- * Divide Width Y
11908
- * @see https://tailwindcss.com/docs/border-width#between-children
11909
- */
11910
- 'divide-y': [{
11911
- 'divide-y': scaleBorderWidth()
11912
- }],
11913
- /**
11914
- * Divide Width Y Reverse
11915
- * @see https://tailwindcss.com/docs/border-width#between-children
11916
- */
11917
- 'divide-y-reverse': ['divide-y-reverse'],
11918
- /**
11919
- * Border Style
11920
- * @see https://tailwindcss.com/docs/border-style
11921
- */
11922
- 'border-style': [{
11923
- border: [...scaleLineStyle(), 'hidden', 'none']
11924
- }],
11925
- /**
11926
- * Divide Style
11927
- * @see https://tailwindcss.com/docs/border-style#setting-the-divider-style
11928
- */
11929
- 'divide-style': [{
11930
- divide: [...scaleLineStyle(), 'hidden', 'none']
11931
- }],
11932
- /**
11933
- * Border Color
11934
- * @see https://tailwindcss.com/docs/border-color
11935
- */
11936
- 'border-color': [{
11937
- border: scaleColor()
11938
- }],
11939
- /**
11940
- * Border Color X
11941
- * @see https://tailwindcss.com/docs/border-color
11942
- */
11943
- 'border-color-x': [{
11944
- 'border-x': scaleColor()
11945
- }],
11946
- /**
11947
- * Border Color Y
11948
- * @see https://tailwindcss.com/docs/border-color
11949
- */
11950
- 'border-color-y': [{
11951
- 'border-y': scaleColor()
11952
- }],
11953
- /**
11954
- * Border Color S
11955
- * @see https://tailwindcss.com/docs/border-color
11956
- */
11957
- 'border-color-s': [{
11958
- 'border-s': scaleColor()
11959
- }],
11960
- /**
11961
- * Border Color E
11962
- * @see https://tailwindcss.com/docs/border-color
11963
- */
11964
- 'border-color-e': [{
11965
- 'border-e': scaleColor()
11966
- }],
11967
- /**
11968
- * Border Color Top
11969
- * @see https://tailwindcss.com/docs/border-color
11970
- */
11971
- 'border-color-t': [{
11972
- 'border-t': scaleColor()
11973
- }],
11974
- /**
11975
- * Border Color Right
11976
- * @see https://tailwindcss.com/docs/border-color
11977
- */
11978
- 'border-color-r': [{
11979
- 'border-r': scaleColor()
11980
- }],
11981
- /**
11982
- * Border Color Bottom
11983
- * @see https://tailwindcss.com/docs/border-color
11984
- */
11985
- 'border-color-b': [{
11986
- 'border-b': scaleColor()
11987
- }],
11988
- /**
11989
- * Border Color Left
11990
- * @see https://tailwindcss.com/docs/border-color
11991
- */
11992
- 'border-color-l': [{
11993
- 'border-l': scaleColor()
11994
- }],
11995
- /**
11996
- * Divide Color
11997
- * @see https://tailwindcss.com/docs/divide-color
11998
- */
11999
- 'divide-color': [{
12000
- divide: scaleColor()
12001
- }],
12002
- /**
12003
- * Outline Style
12004
- * @see https://tailwindcss.com/docs/outline-style
12005
- */
12006
- 'outline-style': [{
12007
- outline: [...scaleLineStyle(), 'none', 'hidden']
12008
- }],
12009
- /**
12010
- * Outline Offset
12011
- * @see https://tailwindcss.com/docs/outline-offset
12012
- */
12013
- 'outline-offset': [{
12014
- 'outline-offset': [isNumber, isArbitraryVariable, isArbitraryValue]
12015
- }],
12016
- /**
12017
- * Outline Width
12018
- * @see https://tailwindcss.com/docs/outline-width
12019
- */
12020
- 'outline-w': [{
12021
- outline: ['', isNumber, isArbitraryVariableLength, isArbitraryLength]
12022
- }],
12023
- /**
12024
- * Outline Color
12025
- * @see https://tailwindcss.com/docs/outline-color
12026
- */
12027
- 'outline-color': [{
12028
- outline: scaleColor()
12029
- }],
12030
- // ---------------
12031
- // --- Effects ---
12032
- // ---------------
12033
- /**
12034
- * Box Shadow
12035
- * @see https://tailwindcss.com/docs/box-shadow
12036
- */
12037
- shadow: [{
12038
- shadow: [
12039
- // Deprecated since Tailwind CSS v4.0.0
12040
- '', 'none', themeShadow, isArbitraryVariableShadow, isArbitraryShadow]
12041
- }],
12042
- /**
12043
- * Box Shadow Color
12044
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-shadow-color
12045
- */
12046
- 'shadow-color': [{
12047
- shadow: scaleColor()
12048
- }],
12049
- /**
12050
- * Inset Box Shadow
12051
- * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-shadow
12052
- */
12053
- 'inset-shadow': [{
12054
- 'inset-shadow': ['none', themeInsetShadow, isArbitraryVariableShadow, isArbitraryShadow]
12055
- }],
12056
- /**
12057
- * Inset Box Shadow Color
12058
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-shadow-color
12059
- */
12060
- 'inset-shadow-color': [{
12061
- 'inset-shadow': scaleColor()
12062
- }],
12063
- /**
12064
- * Ring Width
12065
- * @see https://tailwindcss.com/docs/box-shadow#adding-a-ring
12066
- */
12067
- 'ring-w': [{
12068
- ring: scaleBorderWidth()
12069
- }],
12070
- /**
12071
- * Ring Width Inset
12072
- * @see https://v3.tailwindcss.com/docs/ring-width#inset-rings
12073
- * @deprecated since Tailwind CSS v4.0.0
12074
- * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
12075
- */
12076
- 'ring-w-inset': ['ring-inset'],
12077
- /**
12078
- * Ring Color
12079
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-ring-color
12080
- */
12081
- 'ring-color': [{
12082
- ring: scaleColor()
12083
- }],
12084
- /**
12085
- * Ring Offset Width
12086
- * @see https://v3.tailwindcss.com/docs/ring-offset-width
12087
- * @deprecated since Tailwind CSS v4.0.0
12088
- * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
12089
- */
12090
- 'ring-offset-w': [{
12091
- 'ring-offset': [isNumber, isArbitraryLength]
12092
- }],
12093
- /**
12094
- * Ring Offset Color
12095
- * @see https://v3.tailwindcss.com/docs/ring-offset-color
12096
- * @deprecated since Tailwind CSS v4.0.0
12097
- * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
12098
- */
12099
- 'ring-offset-color': [{
12100
- 'ring-offset': scaleColor()
12101
- }],
12102
- /**
12103
- * Inset Ring Width
12104
- * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-ring
12105
- */
12106
- 'inset-ring-w': [{
12107
- 'inset-ring': scaleBorderWidth()
12108
- }],
12109
- /**
12110
- * Inset Ring Color
12111
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-ring-color
12112
- */
12113
- 'inset-ring-color': [{
12114
- 'inset-ring': scaleColor()
12115
- }],
12116
- /**
12117
- * Text Shadow
12118
- * @see https://tailwindcss.com/docs/text-shadow
12119
- */
12120
- 'text-shadow': [{
12121
- 'text-shadow': ['none', themeTextShadow, isArbitraryVariableShadow, isArbitraryShadow]
12122
- }],
12123
- /**
12124
- * Text Shadow Color
12125
- * @see https://tailwindcss.com/docs/text-shadow#setting-the-shadow-color
12126
- */
12127
- 'text-shadow-color': [{
12128
- 'text-shadow': scaleColor()
12129
- }],
12130
- /**
12131
- * Opacity
12132
- * @see https://tailwindcss.com/docs/opacity
12133
- */
12134
- opacity: [{
12135
- opacity: [isNumber, isArbitraryVariable, isArbitraryValue]
12136
- }],
12137
- /**
12138
- * Mix Blend Mode
12139
- * @see https://tailwindcss.com/docs/mix-blend-mode
12140
- */
12141
- 'mix-blend': [{
12142
- 'mix-blend': [...scaleBlendMode(), 'plus-darker', 'plus-lighter']
12143
- }],
12144
- /**
12145
- * Background Blend Mode
12146
- * @see https://tailwindcss.com/docs/background-blend-mode
12147
- */
12148
- 'bg-blend': [{
12149
- 'bg-blend': scaleBlendMode()
12150
- }],
12151
- /**
12152
- * Mask Clip
12153
- * @see https://tailwindcss.com/docs/mask-clip
12154
- */
12155
- 'mask-clip': [{
12156
- 'mask-clip': ['border', 'padding', 'content', 'fill', 'stroke', 'view']
12157
- }, 'mask-no-clip'],
12158
- /**
12159
- * Mask Composite
12160
- * @see https://tailwindcss.com/docs/mask-composite
12161
- */
12162
- 'mask-composite': [{
12163
- mask: ['add', 'subtract', 'intersect', 'exclude']
12164
- }],
12165
- /**
12166
- * Mask Image
12167
- * @see https://tailwindcss.com/docs/mask-image
12168
- */
12169
- 'mask-image-linear-pos': [{
12170
- 'mask-linear': [isNumber]
12171
- }],
12172
- 'mask-image-linear-from-pos': [{
12173
- 'mask-linear-from': scaleMaskImagePosition()
12174
- }],
12175
- 'mask-image-linear-to-pos': [{
12176
- 'mask-linear-to': scaleMaskImagePosition()
12177
- }],
12178
- 'mask-image-linear-from-color': [{
12179
- 'mask-linear-from': scaleColor()
12180
- }],
12181
- 'mask-image-linear-to-color': [{
12182
- 'mask-linear-to': scaleColor()
12183
- }],
12184
- 'mask-image-t-from-pos': [{
12185
- 'mask-t-from': scaleMaskImagePosition()
12186
- }],
12187
- 'mask-image-t-to-pos': [{
12188
- 'mask-t-to': scaleMaskImagePosition()
12189
- }],
12190
- 'mask-image-t-from-color': [{
12191
- 'mask-t-from': scaleColor()
12192
- }],
12193
- 'mask-image-t-to-color': [{
12194
- 'mask-t-to': scaleColor()
12195
- }],
12196
- 'mask-image-r-from-pos': [{
12197
- 'mask-r-from': scaleMaskImagePosition()
12198
- }],
12199
- 'mask-image-r-to-pos': [{
12200
- 'mask-r-to': scaleMaskImagePosition()
12201
- }],
12202
- 'mask-image-r-from-color': [{
12203
- 'mask-r-from': scaleColor()
12204
- }],
12205
- 'mask-image-r-to-color': [{
12206
- 'mask-r-to': scaleColor()
12207
- }],
12208
- 'mask-image-b-from-pos': [{
12209
- 'mask-b-from': scaleMaskImagePosition()
12210
- }],
12211
- 'mask-image-b-to-pos': [{
12212
- 'mask-b-to': scaleMaskImagePosition()
12213
- }],
12214
- 'mask-image-b-from-color': [{
12215
- 'mask-b-from': scaleColor()
12216
- }],
12217
- 'mask-image-b-to-color': [{
12218
- 'mask-b-to': scaleColor()
12219
- }],
12220
- 'mask-image-l-from-pos': [{
12221
- 'mask-l-from': scaleMaskImagePosition()
12222
- }],
12223
- 'mask-image-l-to-pos': [{
12224
- 'mask-l-to': scaleMaskImagePosition()
12225
- }],
12226
- 'mask-image-l-from-color': [{
12227
- 'mask-l-from': scaleColor()
12228
- }],
12229
- 'mask-image-l-to-color': [{
12230
- 'mask-l-to': scaleColor()
12231
- }],
12232
- 'mask-image-x-from-pos': [{
12233
- 'mask-x-from': scaleMaskImagePosition()
12234
- }],
12235
- 'mask-image-x-to-pos': [{
12236
- 'mask-x-to': scaleMaskImagePosition()
12237
- }],
12238
- 'mask-image-x-from-color': [{
12239
- 'mask-x-from': scaleColor()
12240
- }],
12241
- 'mask-image-x-to-color': [{
12242
- 'mask-x-to': scaleColor()
12243
- }],
12244
- 'mask-image-y-from-pos': [{
12245
- 'mask-y-from': scaleMaskImagePosition()
12246
- }],
12247
- 'mask-image-y-to-pos': [{
12248
- 'mask-y-to': scaleMaskImagePosition()
12249
- }],
12250
- 'mask-image-y-from-color': [{
12251
- 'mask-y-from': scaleColor()
12252
- }],
12253
- 'mask-image-y-to-color': [{
12254
- 'mask-y-to': scaleColor()
12255
- }],
12256
- 'mask-image-radial': [{
12257
- 'mask-radial': [isArbitraryVariable, isArbitraryValue]
12258
- }],
12259
- 'mask-image-radial-from-pos': [{
12260
- 'mask-radial-from': scaleMaskImagePosition()
12261
- }],
12262
- 'mask-image-radial-to-pos': [{
12263
- 'mask-radial-to': scaleMaskImagePosition()
12264
- }],
12265
- 'mask-image-radial-from-color': [{
12266
- 'mask-radial-from': scaleColor()
12267
- }],
12268
- 'mask-image-radial-to-color': [{
12269
- 'mask-radial-to': scaleColor()
12270
- }],
12271
- 'mask-image-radial-shape': [{
12272
- 'mask-radial': ['circle', 'ellipse']
12273
- }],
12274
- 'mask-image-radial-size': [{
12275
- 'mask-radial': [{
12276
- closest: ['side', 'corner'],
12277
- farthest: ['side', 'corner']
12278
- }]
12279
- }],
12280
- 'mask-image-radial-pos': [{
12281
- 'mask-radial-at': scalePosition()
12282
- }],
12283
- 'mask-image-conic-pos': [{
12284
- 'mask-conic': [isNumber]
12285
- }],
12286
- 'mask-image-conic-from-pos': [{
12287
- 'mask-conic-from': scaleMaskImagePosition()
12288
- }],
12289
- 'mask-image-conic-to-pos': [{
12290
- 'mask-conic-to': scaleMaskImagePosition()
12291
- }],
12292
- 'mask-image-conic-from-color': [{
12293
- 'mask-conic-from': scaleColor()
12294
- }],
12295
- 'mask-image-conic-to-color': [{
12296
- 'mask-conic-to': scaleColor()
12297
- }],
12298
- /**
12299
- * Mask Mode
12300
- * @see https://tailwindcss.com/docs/mask-mode
12301
- */
12302
- 'mask-mode': [{
12303
- mask: ['alpha', 'luminance', 'match']
12304
- }],
12305
- /**
12306
- * Mask Origin
12307
- * @see https://tailwindcss.com/docs/mask-origin
12308
- */
12309
- 'mask-origin': [{
12310
- 'mask-origin': ['border', 'padding', 'content', 'fill', 'stroke', 'view']
12311
- }],
12312
- /**
12313
- * Mask Position
12314
- * @see https://tailwindcss.com/docs/mask-position
12315
- */
12316
- 'mask-position': [{
12317
- mask: scaleBgPosition()
12318
- }],
12319
- /**
12320
- * Mask Repeat
12321
- * @see https://tailwindcss.com/docs/mask-repeat
12322
- */
12323
- 'mask-repeat': [{
12324
- mask: scaleBgRepeat()
12325
- }],
12326
- /**
12327
- * Mask Size
12328
- * @see https://tailwindcss.com/docs/mask-size
12329
- */
12330
- 'mask-size': [{
12331
- mask: scaleBgSize()
12332
- }],
12333
- /**
12334
- * Mask Type
12335
- * @see https://tailwindcss.com/docs/mask-type
12336
- */
12337
- 'mask-type': [{
12338
- 'mask-type': ['alpha', 'luminance']
12339
- }],
12340
- /**
12341
- * Mask Image
12342
- * @see https://tailwindcss.com/docs/mask-image
12343
- */
12344
- 'mask-image': [{
12345
- mask: ['none', isArbitraryVariable, isArbitraryValue]
12346
- }],
12347
- // ---------------
12348
- // --- Filters ---
12349
- // ---------------
12350
- /**
12351
- * Filter
12352
- * @see https://tailwindcss.com/docs/filter
12353
- */
12354
- filter: [{
12355
- filter: [
12356
- // Deprecated since Tailwind CSS v3.0.0
12357
- '', 'none', isArbitraryVariable, isArbitraryValue]
12358
- }],
12359
- /**
12360
- * Blur
12361
- * @see https://tailwindcss.com/docs/blur
12362
- */
12363
- blur: [{
12364
- blur: scaleBlur()
12365
- }],
12366
- /**
12367
- * Brightness
12368
- * @see https://tailwindcss.com/docs/brightness
12369
- */
12370
- brightness: [{
12371
- brightness: [isNumber, isArbitraryVariable, isArbitraryValue]
12372
- }],
12373
- /**
12374
- * Contrast
12375
- * @see https://tailwindcss.com/docs/contrast
12376
- */
12377
- contrast: [{
12378
- contrast: [isNumber, isArbitraryVariable, isArbitraryValue]
12379
- }],
12380
- /**
12381
- * Drop Shadow
12382
- * @see https://tailwindcss.com/docs/drop-shadow
12383
- */
12384
- 'drop-shadow': [{
12385
- 'drop-shadow': [
12386
- // Deprecated since Tailwind CSS v4.0.0
12387
- '', 'none', themeDropShadow, isArbitraryVariableShadow, isArbitraryShadow]
12388
- }],
12389
- /**
12390
- * Drop Shadow Color
12391
- * @see https://tailwindcss.com/docs/filter-drop-shadow#setting-the-shadow-color
12392
- */
12393
- 'drop-shadow-color': [{
12394
- 'drop-shadow': scaleColor()
12395
- }],
12396
- /**
12397
- * Grayscale
12398
- * @see https://tailwindcss.com/docs/grayscale
12399
- */
12400
- grayscale: [{
12401
- grayscale: ['', isNumber, isArbitraryVariable, isArbitraryValue]
12402
- }],
12403
- /**
12404
- * Hue Rotate
12405
- * @see https://tailwindcss.com/docs/hue-rotate
12406
- */
12407
- 'hue-rotate': [{
12408
- 'hue-rotate': [isNumber, isArbitraryVariable, isArbitraryValue]
12409
- }],
12410
- /**
12411
- * Invert
12412
- * @see https://tailwindcss.com/docs/invert
12413
- */
12414
- invert: [{
12415
- invert: ['', isNumber, isArbitraryVariable, isArbitraryValue]
12416
- }],
12417
- /**
12418
- * Saturate
12419
- * @see https://tailwindcss.com/docs/saturate
12420
- */
12421
- saturate: [{
12422
- saturate: [isNumber, isArbitraryVariable, isArbitraryValue]
12423
- }],
12424
- /**
12425
- * Sepia
12426
- * @see https://tailwindcss.com/docs/sepia
12427
- */
12428
- sepia: [{
12429
- sepia: ['', isNumber, isArbitraryVariable, isArbitraryValue]
12430
- }],
12431
- /**
12432
- * Backdrop Filter
12433
- * @see https://tailwindcss.com/docs/backdrop-filter
12434
- */
12435
- 'backdrop-filter': [{
12436
- 'backdrop-filter': [
12437
- // Deprecated since Tailwind CSS v3.0.0
12438
- '', 'none', isArbitraryVariable, isArbitraryValue]
12439
- }],
12440
- /**
12441
- * Backdrop Blur
12442
- * @see https://tailwindcss.com/docs/backdrop-blur
12443
- */
12444
- 'backdrop-blur': [{
12445
- 'backdrop-blur': scaleBlur()
12446
- }],
12447
- /**
12448
- * Backdrop Brightness
12449
- * @see https://tailwindcss.com/docs/backdrop-brightness
12450
- */
12451
- 'backdrop-brightness': [{
12452
- 'backdrop-brightness': [isNumber, isArbitraryVariable, isArbitraryValue]
12453
- }],
12454
- /**
12455
- * Backdrop Contrast
12456
- * @see https://tailwindcss.com/docs/backdrop-contrast
12457
- */
12458
- 'backdrop-contrast': [{
12459
- 'backdrop-contrast': [isNumber, isArbitraryVariable, isArbitraryValue]
12460
- }],
12461
- /**
12462
- * Backdrop Grayscale
12463
- * @see https://tailwindcss.com/docs/backdrop-grayscale
12464
- */
12465
- 'backdrop-grayscale': [{
12466
- 'backdrop-grayscale': ['', isNumber, isArbitraryVariable, isArbitraryValue]
12467
- }],
12468
- /**
12469
- * Backdrop Hue Rotate
12470
- * @see https://tailwindcss.com/docs/backdrop-hue-rotate
12471
- */
12472
- 'backdrop-hue-rotate': [{
12473
- 'backdrop-hue-rotate': [isNumber, isArbitraryVariable, isArbitraryValue]
12474
- }],
12475
- /**
12476
- * Backdrop Invert
12477
- * @see https://tailwindcss.com/docs/backdrop-invert
12478
- */
12479
- 'backdrop-invert': [{
12480
- 'backdrop-invert': ['', isNumber, isArbitraryVariable, isArbitraryValue]
12481
- }],
12482
- /**
12483
- * Backdrop Opacity
12484
- * @see https://tailwindcss.com/docs/backdrop-opacity
12485
- */
12486
- 'backdrop-opacity': [{
12487
- 'backdrop-opacity': [isNumber, isArbitraryVariable, isArbitraryValue]
12488
- }],
12489
- /**
12490
- * Backdrop Saturate
12491
- * @see https://tailwindcss.com/docs/backdrop-saturate
12492
- */
12493
- 'backdrop-saturate': [{
12494
- 'backdrop-saturate': [isNumber, isArbitraryVariable, isArbitraryValue]
12495
- }],
12496
- /**
12497
- * Backdrop Sepia
12498
- * @see https://tailwindcss.com/docs/backdrop-sepia
12499
- */
12500
- 'backdrop-sepia': [{
12501
- 'backdrop-sepia': ['', isNumber, isArbitraryVariable, isArbitraryValue]
12502
- }],
12503
- // --------------
12504
- // --- Tables ---
12505
- // --------------
12506
- /**
12507
- * Border Collapse
12508
- * @see https://tailwindcss.com/docs/border-collapse
12509
- */
12510
- 'border-collapse': [{
12511
- border: ['collapse', 'separate']
12512
- }],
12513
- /**
12514
- * Border Spacing
12515
- * @see https://tailwindcss.com/docs/border-spacing
12516
- */
12517
- 'border-spacing': [{
12518
- 'border-spacing': scaleUnambiguousSpacing()
12519
- }],
12520
- /**
12521
- * Border Spacing X
12522
- * @see https://tailwindcss.com/docs/border-spacing
12523
- */
12524
- 'border-spacing-x': [{
12525
- 'border-spacing-x': scaleUnambiguousSpacing()
12526
- }],
12527
- /**
12528
- * Border Spacing Y
12529
- * @see https://tailwindcss.com/docs/border-spacing
12530
- */
12531
- 'border-spacing-y': [{
12532
- 'border-spacing-y': scaleUnambiguousSpacing()
12533
- }],
12534
- /**
12535
- * Table Layout
12536
- * @see https://tailwindcss.com/docs/table-layout
12537
- */
12538
- 'table-layout': [{
12539
- table: ['auto', 'fixed']
12540
- }],
12541
- /**
12542
- * Caption Side
12543
- * @see https://tailwindcss.com/docs/caption-side
12544
- */
12545
- caption: [{
12546
- caption: ['top', 'bottom']
12547
- }],
12548
- // ---------------------------------
12549
- // --- Transitions and Animation ---
12550
- // ---------------------------------
12551
- /**
12552
- * Transition Property
12553
- * @see https://tailwindcss.com/docs/transition-property
12554
- */
12555
- transition: [{
12556
- transition: ['', 'all', 'colors', 'opacity', 'shadow', 'transform', 'none', isArbitraryVariable, isArbitraryValue]
12557
- }],
12558
- /**
12559
- * Transition Behavior
12560
- * @see https://tailwindcss.com/docs/transition-behavior
12561
- */
12562
- 'transition-behavior': [{
12563
- transition: ['normal', 'discrete']
12564
- }],
12565
- /**
12566
- * Transition Duration
12567
- * @see https://tailwindcss.com/docs/transition-duration
12568
- */
12569
- duration: [{
12570
- duration: [isNumber, 'initial', isArbitraryVariable, isArbitraryValue]
12571
- }],
12572
- /**
12573
- * Transition Timing Function
12574
- * @see https://tailwindcss.com/docs/transition-timing-function
12575
- */
12576
- ease: [{
12577
- ease: ['linear', 'initial', themeEase, isArbitraryVariable, isArbitraryValue]
12578
- }],
12579
- /**
12580
- * Transition Delay
12581
- * @see https://tailwindcss.com/docs/transition-delay
12582
- */
12583
- delay: [{
12584
- delay: [isNumber, isArbitraryVariable, isArbitraryValue]
12585
- }],
12586
- /**
12587
- * Animation
12588
- * @see https://tailwindcss.com/docs/animation
12589
- */
12590
- animate: [{
12591
- animate: ['none', themeAnimate, isArbitraryVariable, isArbitraryValue]
12592
- }],
12593
- // ------------------
12594
- // --- Transforms ---
12595
- // ------------------
12596
- /**
12597
- * Backface Visibility
12598
- * @see https://tailwindcss.com/docs/backface-visibility
12599
- */
12600
- backface: [{
12601
- backface: ['hidden', 'visible']
12602
- }],
12603
- /**
12604
- * Perspective
12605
- * @see https://tailwindcss.com/docs/perspective
12606
- */
12607
- perspective: [{
12608
- perspective: [themePerspective, isArbitraryVariable, isArbitraryValue]
12609
- }],
12610
- /**
12611
- * Perspective Origin
12612
- * @see https://tailwindcss.com/docs/perspective-origin
12613
- */
12614
- 'perspective-origin': [{
12615
- 'perspective-origin': scalePositionWithArbitrary()
12616
- }],
12617
- /**
12618
- * Rotate
12619
- * @see https://tailwindcss.com/docs/rotate
12620
- */
12621
- rotate: [{
12622
- rotate: scaleRotate()
12623
- }],
12624
- /**
12625
- * Rotate X
12626
- * @see https://tailwindcss.com/docs/rotate
12627
- */
12628
- 'rotate-x': [{
12629
- 'rotate-x': scaleRotate()
12630
- }],
12631
- /**
12632
- * Rotate Y
12633
- * @see https://tailwindcss.com/docs/rotate
12634
- */
12635
- 'rotate-y': [{
12636
- 'rotate-y': scaleRotate()
12637
- }],
12638
- /**
12639
- * Rotate Z
12640
- * @see https://tailwindcss.com/docs/rotate
12641
- */
12642
- 'rotate-z': [{
12643
- 'rotate-z': scaleRotate()
12644
- }],
12645
- /**
12646
- * Scale
12647
- * @see https://tailwindcss.com/docs/scale
12648
- */
12649
- scale: [{
12650
- scale: scaleScale()
12651
- }],
12652
- /**
12653
- * Scale X
12654
- * @see https://tailwindcss.com/docs/scale
12655
- */
12656
- 'scale-x': [{
12657
- 'scale-x': scaleScale()
12658
- }],
12659
- /**
12660
- * Scale Y
12661
- * @see https://tailwindcss.com/docs/scale
12662
- */
12663
- 'scale-y': [{
12664
- 'scale-y': scaleScale()
12665
- }],
12666
- /**
12667
- * Scale Z
12668
- * @see https://tailwindcss.com/docs/scale
12669
- */
12670
- 'scale-z': [{
12671
- 'scale-z': scaleScale()
12672
- }],
12673
- /**
12674
- * Scale 3D
12675
- * @see https://tailwindcss.com/docs/scale
12676
- */
12677
- 'scale-3d': ['scale-3d'],
12678
- /**
12679
- * Skew
12680
- * @see https://tailwindcss.com/docs/skew
12681
- */
12682
- skew: [{
12683
- skew: scaleSkew()
12684
- }],
12685
- /**
12686
- * Skew X
12687
- * @see https://tailwindcss.com/docs/skew
12688
- */
12689
- 'skew-x': [{
12690
- 'skew-x': scaleSkew()
12691
- }],
12692
- /**
12693
- * Skew Y
12694
- * @see https://tailwindcss.com/docs/skew
12695
- */
12696
- 'skew-y': [{
12697
- 'skew-y': scaleSkew()
12698
- }],
12699
- /**
12700
- * Transform
12701
- * @see https://tailwindcss.com/docs/transform
12702
- */
12703
- transform: [{
12704
- transform: [isArbitraryVariable, isArbitraryValue, '', 'none', 'gpu', 'cpu']
12705
- }],
12706
- /**
12707
- * Transform Origin
12708
- * @see https://tailwindcss.com/docs/transform-origin
12709
- */
12710
- 'transform-origin': [{
12711
- origin: scalePositionWithArbitrary()
12712
- }],
12713
- /**
12714
- * Transform Style
12715
- * @see https://tailwindcss.com/docs/transform-style
12716
- */
12717
- 'transform-style': [{
12718
- transform: ['3d', 'flat']
12719
- }],
12720
- /**
12721
- * Translate
12722
- * @see https://tailwindcss.com/docs/translate
12723
- */
12724
- translate: [{
12725
- translate: scaleTranslate()
12726
- }],
12727
- /**
12728
- * Translate X
12729
- * @see https://tailwindcss.com/docs/translate
12730
- */
12731
- 'translate-x': [{
12732
- 'translate-x': scaleTranslate()
12733
- }],
12734
- /**
12735
- * Translate Y
12736
- * @see https://tailwindcss.com/docs/translate
12737
- */
12738
- 'translate-y': [{
12739
- 'translate-y': scaleTranslate()
12740
- }],
12741
- /**
12742
- * Translate Z
12743
- * @see https://tailwindcss.com/docs/translate
12744
- */
12745
- 'translate-z': [{
12746
- 'translate-z': scaleTranslate()
12747
- }],
12748
- /**
12749
- * Translate None
12750
- * @see https://tailwindcss.com/docs/translate
12751
- */
12752
- 'translate-none': ['translate-none'],
12753
- // ---------------------
12754
- // --- Interactivity ---
12755
- // ---------------------
12756
- /**
12757
- * Accent Color
12758
- * @see https://tailwindcss.com/docs/accent-color
12759
- */
12760
- accent: [{
12761
- accent: scaleColor()
12762
- }],
12763
- /**
12764
- * Appearance
12765
- * @see https://tailwindcss.com/docs/appearance
12766
- */
12767
- appearance: [{
12768
- appearance: ['none', 'auto']
12769
- }],
12770
- /**
12771
- * Caret Color
12772
- * @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities
12773
- */
12774
- 'caret-color': [{
12775
- caret: scaleColor()
12776
- }],
12777
- /**
12778
- * Color Scheme
12779
- * @see https://tailwindcss.com/docs/color-scheme
12780
- */
12781
- 'color-scheme': [{
12782
- scheme: ['normal', 'dark', 'light', 'light-dark', 'only-dark', 'only-light']
12783
- }],
12784
- /**
12785
- * Cursor
12786
- * @see https://tailwindcss.com/docs/cursor
12787
- */
12788
- cursor: [{
12789
- 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]
12790
- }],
12791
- /**
12792
- * Field Sizing
12793
- * @see https://tailwindcss.com/docs/field-sizing
12794
- */
12795
- 'field-sizing': [{
12796
- 'field-sizing': ['fixed', 'content']
12797
- }],
12798
- /**
12799
- * Pointer Events
12800
- * @see https://tailwindcss.com/docs/pointer-events
12801
- */
12802
- 'pointer-events': [{
12803
- 'pointer-events': ['auto', 'none']
12804
- }],
12805
- /**
12806
- * Resize
12807
- * @see https://tailwindcss.com/docs/resize
12808
- */
12809
- resize: [{
12810
- resize: ['none', '', 'y', 'x']
12811
- }],
12812
- /**
12813
- * Scroll Behavior
12814
- * @see https://tailwindcss.com/docs/scroll-behavior
12815
- */
12816
- 'scroll-behavior': [{
12817
- scroll: ['auto', 'smooth']
12818
- }],
12819
- /**
12820
- * Scroll Margin
12821
- * @see https://tailwindcss.com/docs/scroll-margin
12822
- */
12823
- 'scroll-m': [{
12824
- 'scroll-m': scaleUnambiguousSpacing()
12825
- }],
12826
- /**
12827
- * Scroll Margin X
12828
- * @see https://tailwindcss.com/docs/scroll-margin
12829
- */
12830
- 'scroll-mx': [{
12831
- 'scroll-mx': scaleUnambiguousSpacing()
12832
- }],
12833
- /**
12834
- * Scroll Margin Y
12835
- * @see https://tailwindcss.com/docs/scroll-margin
12836
- */
12837
- 'scroll-my': [{
12838
- 'scroll-my': scaleUnambiguousSpacing()
12839
- }],
12840
- /**
12841
- * Scroll Margin Start
12842
- * @see https://tailwindcss.com/docs/scroll-margin
12843
- */
12844
- 'scroll-ms': [{
12845
- 'scroll-ms': scaleUnambiguousSpacing()
12846
- }],
12847
- /**
12848
- * Scroll Margin End
12849
- * @see https://tailwindcss.com/docs/scroll-margin
12850
- */
12851
- 'scroll-me': [{
12852
- 'scroll-me': scaleUnambiguousSpacing()
12853
- }],
12854
- /**
12855
- * Scroll Margin Top
12856
- * @see https://tailwindcss.com/docs/scroll-margin
12857
- */
12858
- 'scroll-mt': [{
12859
- 'scroll-mt': scaleUnambiguousSpacing()
12860
- }],
12861
- /**
12862
- * Scroll Margin Right
12863
- * @see https://tailwindcss.com/docs/scroll-margin
12864
- */
12865
- 'scroll-mr': [{
12866
- 'scroll-mr': scaleUnambiguousSpacing()
12867
- }],
12868
- /**
12869
- * Scroll Margin Bottom
12870
- * @see https://tailwindcss.com/docs/scroll-margin
12871
- */
12872
- 'scroll-mb': [{
12873
- 'scroll-mb': scaleUnambiguousSpacing()
12874
- }],
12875
- /**
12876
- * Scroll Margin Left
12877
- * @see https://tailwindcss.com/docs/scroll-margin
12878
- */
12879
- 'scroll-ml': [{
12880
- 'scroll-ml': scaleUnambiguousSpacing()
12881
- }],
12882
- /**
12883
- * Scroll Padding
12884
- * @see https://tailwindcss.com/docs/scroll-padding
12885
- */
12886
- 'scroll-p': [{
12887
- 'scroll-p': scaleUnambiguousSpacing()
12888
- }],
12889
- /**
12890
- * Scroll Padding X
12891
- * @see https://tailwindcss.com/docs/scroll-padding
12892
- */
12893
- 'scroll-px': [{
12894
- 'scroll-px': scaleUnambiguousSpacing()
12895
- }],
12896
- /**
12897
- * Scroll Padding Y
12898
- * @see https://tailwindcss.com/docs/scroll-padding
12899
- */
12900
- 'scroll-py': [{
12901
- 'scroll-py': scaleUnambiguousSpacing()
12902
- }],
12903
- /**
12904
- * Scroll Padding Start
12905
- * @see https://tailwindcss.com/docs/scroll-padding
12906
- */
12907
- 'scroll-ps': [{
12908
- 'scroll-ps': scaleUnambiguousSpacing()
12909
- }],
12910
- /**
12911
- * Scroll Padding End
12912
- * @see https://tailwindcss.com/docs/scroll-padding
12913
- */
12914
- 'scroll-pe': [{
12915
- 'scroll-pe': scaleUnambiguousSpacing()
12916
- }],
12917
- /**
12918
- * Scroll Padding Top
12919
- * @see https://tailwindcss.com/docs/scroll-padding
12920
- */
12921
- 'scroll-pt': [{
12922
- 'scroll-pt': scaleUnambiguousSpacing()
12923
- }],
12924
- /**
12925
- * Scroll Padding Right
12926
- * @see https://tailwindcss.com/docs/scroll-padding
12927
- */
12928
- 'scroll-pr': [{
12929
- 'scroll-pr': scaleUnambiguousSpacing()
12930
- }],
12931
- /**
12932
- * Scroll Padding Bottom
12933
- * @see https://tailwindcss.com/docs/scroll-padding
12934
- */
12935
- 'scroll-pb': [{
12936
- 'scroll-pb': scaleUnambiguousSpacing()
12937
- }],
12938
- /**
12939
- * Scroll Padding Left
12940
- * @see https://tailwindcss.com/docs/scroll-padding
12941
- */
12942
- 'scroll-pl': [{
12943
- 'scroll-pl': scaleUnambiguousSpacing()
12944
- }],
12945
- /**
12946
- * Scroll Snap Align
12947
- * @see https://tailwindcss.com/docs/scroll-snap-align
12948
- */
12949
- 'snap-align': [{
12950
- snap: ['start', 'end', 'center', 'align-none']
12951
- }],
12952
- /**
12953
- * Scroll Snap Stop
12954
- * @see https://tailwindcss.com/docs/scroll-snap-stop
12955
- */
12956
- 'snap-stop': [{
12957
- snap: ['normal', 'always']
12958
- }],
12959
- /**
12960
- * Scroll Snap Type
12961
- * @see https://tailwindcss.com/docs/scroll-snap-type
12962
- */
12963
- 'snap-type': [{
12964
- snap: ['none', 'x', 'y', 'both']
12965
- }],
12966
- /**
12967
- * Scroll Snap Type Strictness
12968
- * @see https://tailwindcss.com/docs/scroll-snap-type
12969
- */
12970
- 'snap-strictness': [{
12971
- snap: ['mandatory', 'proximity']
12972
- }],
12973
- /**
12974
- * Touch Action
12975
- * @see https://tailwindcss.com/docs/touch-action
12976
- */
12977
- touch: [{
12978
- touch: ['auto', 'none', 'manipulation']
12979
- }],
12980
- /**
12981
- * Touch Action X
12982
- * @see https://tailwindcss.com/docs/touch-action
12983
- */
12984
- 'touch-x': [{
12985
- 'touch-pan': ['x', 'left', 'right']
12986
- }],
12987
- /**
12988
- * Touch Action Y
12989
- * @see https://tailwindcss.com/docs/touch-action
12990
- */
12991
- 'touch-y': [{
12992
- 'touch-pan': ['y', 'up', 'down']
12993
- }],
12994
- /**
12995
- * Touch Action Pinch Zoom
12996
- * @see https://tailwindcss.com/docs/touch-action
12997
- */
12998
- 'touch-pz': ['touch-pinch-zoom'],
12999
- /**
13000
- * User Select
13001
- * @see https://tailwindcss.com/docs/user-select
13002
- */
13003
- select: [{
13004
- select: ['none', 'text', 'all', 'auto']
13005
- }],
13006
- /**
13007
- * Will Change
13008
- * @see https://tailwindcss.com/docs/will-change
13009
- */
13010
- 'will-change': [{
13011
- 'will-change': ['auto', 'scroll', 'contents', 'transform', isArbitraryVariable, isArbitraryValue]
13012
- }],
13013
- // -----------
13014
- // --- SVG ---
13015
- // -----------
13016
- /**
13017
- * Fill
13018
- * @see https://tailwindcss.com/docs/fill
13019
- */
13020
- fill: [{
13021
- fill: ['none', ...scaleColor()]
13022
- }],
13023
- /**
13024
- * Stroke Width
13025
- * @see https://tailwindcss.com/docs/stroke-width
13026
- */
13027
- 'stroke-w': [{
13028
- stroke: [isNumber, isArbitraryVariableLength, isArbitraryLength, isArbitraryNumber]
13029
- }],
13030
- /**
13031
- * Stroke
13032
- * @see https://tailwindcss.com/docs/stroke
13033
- */
13034
- stroke: [{
13035
- stroke: ['none', ...scaleColor()]
13036
- }],
13037
- // ---------------------
13038
- // --- Accessibility ---
13039
- // ---------------------
13040
- /**
13041
- * Forced Color Adjust
13042
- * @see https://tailwindcss.com/docs/forced-color-adjust
13043
- */
13044
- 'forced-color-adjust': [{
13045
- 'forced-color-adjust': ['auto', 'none']
13046
- }]
13047
- },
13048
- conflictingClassGroups: {
13049
- overflow: ['overflow-x', 'overflow-y'],
13050
- overscroll: ['overscroll-x', 'overscroll-y'],
13051
- inset: ['inset-x', 'inset-y', 'start', 'end', 'top', 'right', 'bottom', 'left'],
13052
- 'inset-x': ['right', 'left'],
13053
- 'inset-y': ['top', 'bottom'],
13054
- flex: ['basis', 'grow', 'shrink'],
13055
- gap: ['gap-x', 'gap-y'],
13056
- p: ['px', 'py', 'ps', 'pe', 'pt', 'pr', 'pb', 'pl'],
13057
- px: ['pr', 'pl'],
13058
- py: ['pt', 'pb'],
13059
- m: ['mx', 'my', 'ms', 'me', 'mt', 'mr', 'mb', 'ml'],
13060
- mx: ['mr', 'ml'],
13061
- my: ['mt', 'mb'],
13062
- size: ['w', 'h'],
13063
- 'font-size': ['leading'],
13064
- 'fvn-normal': ['fvn-ordinal', 'fvn-slashed-zero', 'fvn-figure', 'fvn-spacing', 'fvn-fraction'],
13065
- 'fvn-ordinal': ['fvn-normal'],
13066
- 'fvn-slashed-zero': ['fvn-normal'],
13067
- 'fvn-figure': ['fvn-normal'],
13068
- 'fvn-spacing': ['fvn-normal'],
13069
- 'fvn-fraction': ['fvn-normal'],
13070
- 'line-clamp': ['display', 'overflow'],
13071
- 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'],
13072
- 'rounded-s': ['rounded-ss', 'rounded-es'],
13073
- 'rounded-e': ['rounded-se', 'rounded-ee'],
13074
- 'rounded-t': ['rounded-tl', 'rounded-tr'],
13075
- 'rounded-r': ['rounded-tr', 'rounded-br'],
13076
- 'rounded-b': ['rounded-br', 'rounded-bl'],
13077
- 'rounded-l': ['rounded-tl', 'rounded-bl'],
13078
- 'border-spacing': ['border-spacing-x', 'border-spacing-y'],
13079
- 'border-w': ['border-w-x', 'border-w-y', 'border-w-s', 'border-w-e', 'border-w-t', 'border-w-r', 'border-w-b', 'border-w-l'],
13080
- 'border-w-x': ['border-w-r', 'border-w-l'],
13081
- 'border-w-y': ['border-w-t', 'border-w-b'],
13082
- 'border-color': ['border-color-x', 'border-color-y', 'border-color-s', 'border-color-e', 'border-color-t', 'border-color-r', 'border-color-b', 'border-color-l'],
13083
- 'border-color-x': ['border-color-r', 'border-color-l'],
13084
- 'border-color-y': ['border-color-t', 'border-color-b'],
13085
- translate: ['translate-x', 'translate-y', 'translate-none'],
13086
- 'translate-none': ['translate', 'translate-x', 'translate-y', 'translate-z'],
13087
- 'scroll-m': ['scroll-mx', 'scroll-my', 'scroll-ms', 'scroll-me', 'scroll-mt', 'scroll-mr', 'scroll-mb', 'scroll-ml'],
13088
- 'scroll-mx': ['scroll-mr', 'scroll-ml'],
13089
- 'scroll-my': ['scroll-mt', 'scroll-mb'],
13090
- 'scroll-p': ['scroll-px', 'scroll-py', 'scroll-ps', 'scroll-pe', 'scroll-pt', 'scroll-pr', 'scroll-pb', 'scroll-pl'],
13091
- 'scroll-px': ['scroll-pr', 'scroll-pl'],
13092
- 'scroll-py': ['scroll-pt', 'scroll-pb'],
13093
- touch: ['touch-x', 'touch-y', 'touch-pz'],
13094
- 'touch-x': ['touch'],
13095
- 'touch-y': ['touch'],
13096
- 'touch-pz': ['touch']
13097
- },
13098
- conflictingClassGroupModifiers: {
13099
- 'font-size': ['leading']
13100
- },
13101
- orderSensitiveModifiers: ['*', '**', 'after', 'backdrop', 'before', 'details-content', 'file', 'first-letter', 'first-line', 'marker', 'placeholder', 'selection']
13102
- };
13103
- };
13104
- const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
13105
-
13106
10155
  function cn(...inputs) {
13107
- return twMerge(clsx(inputs));
10156
+ return clsx(inputs);
13108
10157
  }
13109
10158
 
13110
10159
  function FloatingButton({
@@ -13121,16 +10170,14 @@ function FloatingButton({
13121
10170
  return null;
13122
10171
  }
13123
10172
  const positionClasses = {
13124
- "bottom-right": "bottom-6 right-6",
13125
- "bottom-left": "bottom-6 left-6",
13126
- "top-right": "top-6 right-6",
13127
- "top-left": "top-6 left-6"
10173
+ "bottom-right": "position-bottom-right",
10174
+ "bottom-left": "position-bottom-left",
10175
+ "top-right": "position-top-right",
10176
+ "top-left": "position-top-left"
13128
10177
  };
13129
10178
  return /*#__PURE__*/React.createElement("button", {
13130
- className: cn("cursor-pointer", "fixed flex items-center justify-center w-14 h-14 rounded-full shadow-lg", "bg-foreground text-background hover:bg-foreground/90", "transition-all duration-200 ease-in-out", "hover:scale-110 active:scale-95", "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", positionClasses[config.ui.position], className),
13131
- style: {
13132
- zIndex: "var(--uxbert-z-button)"
13133
- },
10179
+ "data-uxbert-reportly": true,
10180
+ className: cn("uxbert-floating-button", positionClasses[config.ui.position], className),
13134
10181
  onClick: startAnnotation,
13135
10182
  title: "Report an issue",
13136
10183
  "aria-label": "Report an issue"
@@ -13187,12 +10234,10 @@ function IssueModal({
13187
10234
  }));
13188
10235
  }, []);
13189
10236
  const handleClose = React.useCallback(() => {
13190
- // Check if there's any data that would be lost
13191
10237
  const hasData = state.screenshot !== null || formData.title.trim() !== "" || formData.description.trim() !== "";
13192
10238
  if (hasData) {
13193
10239
  const confirmed = window.confirm("Are you sure you want to close? All unsaved data (screenshot, title, description) will be lost.");
13194
10240
  if (confirmed) {
13195
- // Clear all data
13196
10241
  reset();
13197
10242
  setFormData({
13198
10243
  title: "",
@@ -13203,7 +10248,6 @@ function IssueModal({
13203
10248
  closeModal();
13204
10249
  }
13205
10250
  } else {
13206
- // No data to lose, just close
13207
10251
  closeModal();
13208
10252
  }
13209
10253
  }, [state.screenshot, formData.title, formData.description, reset, closeModal]);
@@ -13236,7 +10280,6 @@ function IssueModal({
13236
10280
  try {
13237
10281
  setIsSubmitting(true);
13238
10282
  submitIssue(formData);
13239
- // Form data is cleared by the submitIssue function which calls reset()
13240
10283
  setFormData({
13241
10284
  title: "",
13242
10285
  description: "",
@@ -13282,32 +10325,30 @@ function IssueModal({
13282
10325
  }, [formData, state.screenshot, submitToN8n]);
13283
10326
  if (!state.isOpen) return null;
13284
10327
  return /*#__PURE__*/React.createElement("div", {
13285
- className: cn("fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 animate-fade-in", className),
13286
- style: {
13287
- zIndex: "var(--uxbert-z-modal)"
13288
- }
10328
+ "data-uxbert-reportly": true,
10329
+ className: cn("uxbert-modal-overlay", className)
13289
10330
  }, /*#__PURE__*/React.createElement("div", {
13290
- className: cn("bg-background rounded-lg shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto", "animate-slide-up border border-border")
10331
+ className: "uxbert-modal-container"
13291
10332
  }, /*#__PURE__*/React.createElement("div", {
13292
- className: "p-6 border-b border-border"
10333
+ className: "uxbert-modal-header"
13293
10334
  }, /*#__PURE__*/React.createElement("div", {
13294
- className: "p-3 pb-6 flex items-center justify-center"
10335
+ className: "uxbert-logo-container"
13295
10336
  }, /*#__PURE__*/React.createElement(Logo, null)), /*#__PURE__*/React.createElement("div", {
13296
- className: "flex items-center justify-between "
10337
+ className: "uxbert-modal-header-content"
13297
10338
  }, /*#__PURE__*/React.createElement("div", {
13298
- className: "flex items-center gap-3"
10339
+ className: "uxbert-modal-title-wrapper"
13299
10340
  }, /*#__PURE__*/React.createElement("div", {
13300
- className: "w-10 h-10 rounded-full bg-foreground/10 flex items-center justify-center"
10341
+ className: "uxbert-modal-icon"
13301
10342
  }, /*#__PURE__*/React.createElement(Camera, {
13302
10343
  className: "w-5 h-5",
13303
10344
  style: {
13304
10345
  color: "currentColor"
13305
10346
  }
13306
10347
  })), /*#__PURE__*/React.createElement("h2", {
13307
- className: "text-xl font-semibold"
10348
+ className: "uxbert-modal-title"
13308
10349
  }, "Report Issue")), /*#__PURE__*/React.createElement("button", {
13309
10350
  onClick: handleClose,
13310
- className: "p-2 rounded-md hover:bg-muted transition-colors cursor-pointer",
10351
+ className: "uxbert-modal-close",
13311
10352
  "aria-label": "Close"
13312
10353
  }, /*#__PURE__*/React.createElement(X, {
13313
10354
  className: "w-5 h-5",
@@ -13315,50 +10356,50 @@ function IssueModal({
13315
10356
  color: "currentColor"
13316
10357
  }
13317
10358
  })))), /*#__PURE__*/React.createElement("div", {
13318
- className: "p-6"
10359
+ className: "uxbert-modal-body"
13319
10360
  }, !state.screenshot ? (/*#__PURE__*/React.createElement("div", {
13320
- className: "text-center py-8"
10361
+ className: "uxbert-capture-section"
13321
10362
  }, /*#__PURE__*/React.createElement("div", {
13322
- className: "w-16 h-16 bg-muted rounded-full flex items-center justify-center mx-auto mb-4"
10363
+ className: "uxbert-capture-icon"
13323
10364
  }, /*#__PURE__*/React.createElement(Camera, {
13324
- className: "w-8 h-8 text-muted-foreground",
10365
+ className: "w-8 h-8",
13325
10366
  style: {
13326
- color: "currentColor"
10367
+ color: "var(--uxbert-color-muted-foreground)"
13327
10368
  }
13328
10369
  })), /*#__PURE__*/React.createElement("h3", {
13329
- className: "text-lg font-medium mb-2"
10370
+ className: "uxbert-capture-title"
13330
10371
  }, "Capture Screenshot"), /*#__PURE__*/React.createElement("p", {
13331
- className: "text-sm text-muted-foreground mb-6"
10372
+ className: "uxbert-capture-description"
13332
10373
  }, "Choose what to capture before reporting your issue"), /*#__PURE__*/React.createElement("div", {
13333
- className: "flex flex-col gap-3 max-w-xs mx-auto mb-6"
10374
+ className: "uxbert-capture-modes"
13334
10375
  }, /*#__PURE__*/React.createElement("label", {
13335
- className: cn("flex items-center gap-3 p-4 rounded-lg border-2 cursor-pointer transition-all", captureMode === "viewport" ? "border-foreground bg-foreground/5" : "border-border hover:border-foreground/50")
10376
+ className: cn("uxbert-capture-mode-option", captureMode === "viewport" && "active")
13336
10377
  }, /*#__PURE__*/React.createElement("input", {
13337
10378
  type: "radio",
13338
10379
  name: "captureMode",
13339
10380
  value: "viewport",
13340
10381
  checked: captureMode === "viewport",
13341
10382
  onChange: e => setCaptureMode(e.target.value),
13342
- className: "w-4 h-4"
10383
+ className: "uxbert-capture-mode-radio"
13343
10384
  }), /*#__PURE__*/React.createElement("span", {
13344
- className: "text-sm font-medium"
10385
+ className: "uxbert-capture-mode-label"
13345
10386
  }, "Current viewport only")), /*#__PURE__*/React.createElement("label", {
13346
- className: cn("flex items-center gap-3 p-4 rounded-lg border-2 cursor-pointer transition-all", captureMode === "fullpage" ? "border-foreground bg-foreground/5" : "border-border hover:border-foreground/50")
10387
+ className: cn("uxbert-capture-mode-option", captureMode === "fullpage" && "active")
13347
10388
  }, /*#__PURE__*/React.createElement("input", {
13348
10389
  type: "radio",
13349
10390
  name: "captureMode",
13350
10391
  value: "fullpage",
13351
10392
  checked: captureMode === "fullpage",
13352
10393
  onChange: e => setCaptureMode(e.target.value),
13353
- className: "w-4 h-4"
10394
+ className: "uxbert-capture-mode-radio"
13354
10395
  }), /*#__PURE__*/React.createElement("span", {
13355
- className: "text-sm font-medium"
10396
+ className: "uxbert-capture-mode-label"
13356
10397
  }, "Full page"))), /*#__PURE__*/React.createElement("button", {
13357
10398
  onClick: handleCapture,
13358
10399
  disabled: state.isCapturing,
13359
- className: cn("inline-flex items-center gap-2 px-6 py-3 rounded-md font-medium transition-all cursor-pointer", "bg-foreground text-background hover:bg-foreground/90", "disabled:opacity-50 disabled:cursor-not-allowed")
10400
+ className: cn("uxbert-button", "uxbert-button-primary")
13360
10401
  }, state.isCapturing ? (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoaderCircle, {
13361
- className: "w-4 h-4 animate-spin",
10402
+ className: "w-4 h-4 uxbert-spinner",
13362
10403
  style: {
13363
10404
  color: "currentColor"
13364
10405
  }
@@ -13368,25 +10409,25 @@ function IssueModal({
13368
10409
  color: "currentColor"
13369
10410
  }
13370
10411
  }), "Capture Screenshot"))))) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
13371
- className: "mb-6"
10412
+ className: "uxbert-screenshot-section"
13372
10413
  }, /*#__PURE__*/React.createElement("h3", {
13373
- className: "text-sm font-medium mb-3 flex items-center gap-2"
10414
+ className: "uxbert-screenshot-header"
13374
10415
  }, /*#__PURE__*/React.createElement(Camera, {
13375
10416
  className: "w-4 h-4",
13376
10417
  style: {
13377
10418
  color: "currentColor"
13378
10419
  }
13379
10420
  }), "Screenshot Preview"), /*#__PURE__*/React.createElement("div", {
13380
- className: "border border-border rounded-lg overflow-hidden bg-muted"
10421
+ className: "uxbert-screenshot-preview"
13381
10422
  }, /*#__PURE__*/React.createElement("img", {
13382
10423
  src: state.screenshot,
13383
10424
  alt: "Screenshot preview",
13384
- className: "w-full h-auto max-h-72 object-contain"
10425
+ className: "uxbert-screenshot-image"
13385
10426
  })), /*#__PURE__*/React.createElement("div", {
13386
- className: "flex gap-2 mt-3"
10427
+ className: "uxbert-screenshot-actions"
13387
10428
  }, /*#__PURE__*/React.createElement("button", {
13388
10429
  onClick: handleRetake,
13389
- className: "flex items-center gap-2 px-4 py-2 text-sm rounded-md border border-border hover:bg-muted transition-colors cursor-pointer"
10430
+ className: cn("uxbert-button", "uxbert-button-secondary")
13390
10431
  }, /*#__PURE__*/React.createElement(RotateCcw, {
13391
10432
  className: "w-4 h-4",
13392
10433
  style: {
@@ -13394,7 +10435,7 @@ function IssueModal({
13394
10435
  }
13395
10436
  }), "Retake"), /*#__PURE__*/React.createElement("button", {
13396
10437
  onClick: startAnnotation,
13397
- className: "flex items-center gap-2 px-4 py-2 text-sm rounded-md border border-border hover:bg-muted transition-colors cursor-pointer"
10438
+ className: cn("uxbert-button", "uxbert-button-secondary")
13398
10439
  }, /*#__PURE__*/React.createElement(PenLine, {
13399
10440
  className: "w-4 h-4",
13400
10441
  style: {
@@ -13402,14 +10443,14 @@ function IssueModal({
13402
10443
  }
13403
10444
  }), "Annotate"))), /*#__PURE__*/React.createElement("form", {
13404
10445
  onSubmit: handleSubmit,
13405
- className: "space-y-5"
10446
+ className: "uxbert-form"
13406
10447
  }, /*#__PURE__*/React.createElement("div", {
13407
- className: "space-y-2"
10448
+ className: "uxbert-form-group"
13408
10449
  }, /*#__PURE__*/React.createElement("label", {
13409
10450
  htmlFor: "issue-title",
13410
- className: "text-sm font-medium block"
10451
+ className: "uxbert-form-label"
13411
10452
  }, "Issue Title ", /*#__PURE__*/React.createElement("span", {
13412
- className: "text-destructive"
10453
+ className: "uxbert-form-required"
13413
10454
  }, "*")), /*#__PURE__*/React.createElement("input", {
13414
10455
  id: "issue-title",
13415
10456
  type: "text",
@@ -13417,31 +10458,31 @@ function IssueModal({
13417
10458
  onChange: e => handleInputChange("title", e.target.value),
13418
10459
  placeholder: "Brief description of the issue",
13419
10460
  required: true,
13420
- className: cn("w-full px-4 py-2.5 rounded-md border border-input bg-background", "focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent", "placeholder:text-muted-foreground transition-colors")
10461
+ className: "uxbert-form-input"
13421
10462
  })), /*#__PURE__*/React.createElement("div", {
13422
- className: "space-y-2"
10463
+ className: "uxbert-form-group"
13423
10464
  }, /*#__PURE__*/React.createElement("label", {
13424
10465
  htmlFor: "issue-description",
13425
- className: "text-sm font-medium block"
10466
+ className: "uxbert-form-label"
13426
10467
  }, "Description"), /*#__PURE__*/React.createElement("textarea", {
13427
10468
  id: "issue-description",
13428
10469
  value: formData.description,
13429
10470
  onChange: e => handleInputChange("description", e.target.value),
13430
10471
  placeholder: "Detailed description of the issue (optional)",
13431
10472
  rows: 4,
13432
- className: cn("w-full px-4 py-2.5 rounded-md border border-input bg-background resize-none", "focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent", "placeholder:text-muted-foreground transition-colors")
10473
+ className: "uxbert-form-textarea"
13433
10474
  })), /*#__PURE__*/React.createElement("div", {
13434
- className: "grid grid-cols-2 gap-4"
10475
+ className: "uxbert-form-grid"
13435
10476
  }, /*#__PURE__*/React.createElement("div", {
13436
- className: "space-y-2"
10477
+ className: "uxbert-form-group"
13437
10478
  }, /*#__PURE__*/React.createElement("label", {
13438
10479
  htmlFor: "issue-priority",
13439
- className: "text-sm font-medium block"
10480
+ className: "uxbert-form-label"
13440
10481
  }, "Priority"), /*#__PURE__*/React.createElement("select", {
13441
10482
  id: "issue-priority",
13442
10483
  value: formData.priority,
13443
10484
  onChange: e => handleInputChange("priority", e.target.value),
13444
- className: cn("w-full px-4 py-2.5 rounded-md border border-input bg-background", "focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent", "transition-colors cursor-pointer")
10485
+ className: "uxbert-form-select"
13445
10486
  }, /*#__PURE__*/React.createElement("option", {
13446
10487
  value: "Low"
13447
10488
  }, "Low"), /*#__PURE__*/React.createElement("option", {
@@ -13451,42 +10492,42 @@ function IssueModal({
13451
10492
  }, "High"), /*#__PURE__*/React.createElement("option", {
13452
10493
  value: "Critical"
13453
10494
  }, "Critical"))), /*#__PURE__*/React.createElement("div", {
13454
- className: "space-y-2"
10495
+ className: "uxbert-form-group"
13455
10496
  }, /*#__PURE__*/React.createElement("label", {
13456
10497
  htmlFor: "device-type",
13457
- className: "text-sm font-medium block"
10498
+ className: "uxbert-form-label"
13458
10499
  }, "Device Type"), /*#__PURE__*/React.createElement("select", {
13459
10500
  id: "device-type",
13460
10501
  value: formData.deviceType,
13461
10502
  onChange: e => handleInputChange("deviceType", e.target.value),
13462
- className: cn("w-full px-4 py-2.5 rounded-md border border-input bg-background", "focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent", "transition-colors cursor-pointer")
10503
+ className: "uxbert-form-select"
13463
10504
  }, /*#__PURE__*/React.createElement("option", {
13464
10505
  value: "desktop"
13465
10506
  }, "Desktop"), /*#__PURE__*/React.createElement("option", {
13466
10507
  value: "mobile"
13467
10508
  }, "Mobile")))), /*#__PURE__*/React.createElement("div", {
13468
- className: "flex gap-3 pt-4"
10509
+ className: "uxbert-button-actions"
13469
10510
  }, /*#__PURE__*/React.createElement("button", {
13470
10511
  type: "submit",
13471
10512
  disabled: isSubmitting,
13472
- className: cn("flex-1 inline-flex items-center justify-center gap-2 px-6 py-3 rounded-md font-medium transition-all cursor-pointer", "bg-foreground text-background hover:bg-foreground/90", "disabled:opacity-50 disabled:cursor-not-allowed")
10513
+ className: cn("uxbert-button", "uxbert-button-primary", "uxbert-button-full")
13473
10514
  }, isSubmitting ? (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoaderCircle, {
13474
- className: "w-4 h-4 animate-spin",
10515
+ className: "w-4 h-4 uxbert-spinner",
13475
10516
  style: {
13476
- color: "var(--background)"
10517
+ color: "var(--uxbert-color-background)"
13477
10518
  }
13478
10519
  }), "Downloading...")) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Download, {
13479
10520
  className: "w-4 h-4",
13480
10521
  style: {
13481
- color: "var(--background)"
10522
+ color: "var(--uxbert-color-background)"
13482
10523
  }
13483
10524
  }), "Download JSON"))), state.config.integrations?.n8n?.enabled && (/*#__PURE__*/React.createElement("button", {
13484
10525
  type: "button",
13485
10526
  onClick: handleN8nSubmit,
13486
10527
  disabled: isSubmittingN8n,
13487
- className: cn("flex-1 inline-flex items-center justify-center gap-2 px-6 py-3 rounded-md font-medium transition-all cursor-pointer", "bg-foreground text-background hover:bg-foreground/90", "disabled:opacity-50 disabled:cursor-not-allowed")
10528
+ className: cn("uxbert-button", "uxbert-button-primary", "uxbert-button-full")
13488
10529
  }, isSubmittingN8n ? (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoaderCircle, {
13489
- className: "w-4 h-4 animate-spin",
10530
+ className: "w-4 h-4 uxbert-spinner",
13490
10531
  style: {
13491
10532
  color: "currentColor"
13492
10533
  }
@@ -13566,40 +10607,38 @@ function AnnotationToolbar({
13566
10607
  }
13567
10608
  };
13568
10609
  return /*#__PURE__*/React.createElement("div", {
13569
- className: cn("fixed top-1/2 right-6 -translate-y-1/2", "bg-background border border-border rounded-lg shadow-xl", "p-4 space-y-6 min-w-[200px] max-w-[220px]", className),
13570
- style: {
13571
- zIndex: "var(--uxbert-z-toolbar)"
13572
- }
10610
+ "data-uxbert-reportly": true,
10611
+ className: cn("uxbert-toolbar", className)
13573
10612
  }, /*#__PURE__*/React.createElement("div", {
13574
- className: "space-y-3"
10613
+ className: "uxbert-toolbar-section"
13575
10614
  }, /*#__PURE__*/React.createElement("h4", {
13576
- className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide"
10615
+ className: "uxbert-toolbar-heading"
13577
10616
  }, "Tools"), /*#__PURE__*/React.createElement("div", {
13578
- className: "grid grid-cols-2 gap-2"
10617
+ className: "uxbert-toolbar-tools"
13579
10618
  }, tools.map(({
13580
10619
  id,
13581
10620
  label,
13582
10621
  Icon
13583
10622
  }) => (/*#__PURE__*/React.createElement("button", {
13584
10623
  key: id,
13585
- className: cn("flex items-center justify-center p-3 rounded-md border-2 transition-all", "hover:bg-muted", state.currentTool === id ? "border-foreground bg-foreground text-background" : "border-border bg-background"),
10624
+ className: cn("uxbert-toolbar-tool", state.currentTool === id && "active"),
13586
10625
  onClick: () => setTool(id),
13587
10626
  title: label,
13588
10627
  "aria-label": label
13589
10628
  }, /*#__PURE__*/React.createElement(Icon, {
13590
- className: "w-5 h-5 text-current"
10629
+ className: "w-5 h-5"
13591
10630
  })))))), /*#__PURE__*/React.createElement("div", {
13592
- className: "space-y-3"
10631
+ className: "uxbert-toolbar-section"
13593
10632
  }, /*#__PURE__*/React.createElement("h4", {
13594
- className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide"
10633
+ className: "uxbert-toolbar-heading"
13595
10634
  }, "Colors"), /*#__PURE__*/React.createElement("div", {
13596
- className: "grid grid-cols-4 gap-2"
10635
+ className: "uxbert-toolbar-colors"
13597
10636
  }, colors.map(({
13598
10637
  hex,
13599
10638
  name
13600
10639
  }) => (/*#__PURE__*/React.createElement("button", {
13601
10640
  key: hex,
13602
- className: cn("w-8 h-8 rounded-full border-3 transition-all hover:scale-110", state.currentColor === hex ? "border-foreground scale-110 ring-2 ring-foreground ring-offset-2 ring-offset-background" : "border-transparent"),
10641
+ className: cn("uxbert-toolbar-color", state.currentColor === hex && "active"),
13603
10642
  style: {
13604
10643
  backgroundColor: hex
13605
10644
  },
@@ -13607,13 +10646,13 @@ function AnnotationToolbar({
13607
10646
  title: name,
13608
10647
  "aria-label": `Color: ${name}`
13609
10648
  }))))), /*#__PURE__*/React.createElement("div", {
13610
- className: "space-y-3"
10649
+ className: "uxbert-toolbar-section"
13611
10650
  }, /*#__PURE__*/React.createElement("h4", {
13612
- className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide"
10651
+ className: "uxbert-toolbar-heading"
13613
10652
  }, "Actions"), /*#__PURE__*/React.createElement("div", {
13614
- className: "space-y-2"
10653
+ className: "uxbert-toolbar-actions"
13615
10654
  }, /*#__PURE__*/React.createElement("button", {
13616
- className: cn("w-full flex items-center justify-center gap-2 px-3 py-2.5 text-sm rounded-md", "border border-border hover:bg-muted transition-colors"),
10655
+ className: "uxbert-toolbar-action",
13617
10656
  onClick: onUndo,
13618
10657
  title: "Undo last action",
13619
10658
  "aria-label": "Undo"
@@ -13623,7 +10662,7 @@ function AnnotationToolbar({
13623
10662
  color: "currentColor"
13624
10663
  }
13625
10664
  }), "Undo"), /*#__PURE__*/React.createElement("button", {
13626
- className: cn("w-full flex items-center justify-center gap-2 px-3 py-2.5 text-sm rounded-md", "border border-destructive/50 text-destructive hover:bg-destructive/10 transition-colors"),
10665
+ className: cn("uxbert-toolbar-action", "destructive"),
13627
10666
  onClick: onClear,
13628
10667
  title: "Clear all annotations",
13629
10668
  "aria-label": "Clear all"
@@ -13633,9 +10672,11 @@ function AnnotationToolbar({
13633
10672
  color: "currentColor"
13634
10673
  }
13635
10674
  }), "Clear"))), /*#__PURE__*/React.createElement("div", {
13636
- className: "space-y-2 pt-4 border-t border-border"
10675
+ className: cn("uxbert-toolbar-section", "uxbert-toolbar-divider")
10676
+ }, /*#__PURE__*/React.createElement("div", {
10677
+ className: "uxbert-toolbar-actions"
13637
10678
  }, /*#__PURE__*/React.createElement("button", {
13638
- className: cn("w-full flex items-center justify-center gap-2 px-3 py-2.5 text-sm rounded-md", "border border-border hover:bg-muted transition-colors"),
10679
+ className: "uxbert-toolbar-action",
13639
10680
  onClick: handleExit,
13640
10681
  title: "Exit without saving",
13641
10682
  "aria-label": "Exit"
@@ -13645,7 +10686,7 @@ function AnnotationToolbar({
13645
10686
  color: "currentColor"
13646
10687
  }
13647
10688
  }), "Exit"), /*#__PURE__*/React.createElement("button", {
13648
- className: cn("w-full flex items-center justify-center gap-2 px-3 py-2.5 text-sm rounded-md font-medium", "bg-foreground text-background hover:bg-foreground/90 transition-colors"),
10689
+ className: cn("uxbert-toolbar-action", "uxbert-toolbar-action-primary"),
13649
10690
  onClick: handleDone,
13650
10691
  title: "Finish and save annotations",
13651
10692
  "aria-label": "Done"
@@ -13654,7 +10695,7 @@ function AnnotationToolbar({
13654
10695
  style: {
13655
10696
  color: "currentColor"
13656
10697
  }
13657
- }), "Done")));
10698
+ }), "Done"))));
13658
10699
  }
13659
10700
 
13660
10701
  class AnnotationManager {
@@ -14327,6 +11368,7 @@ function ReportlyInner() {
14327
11368
  endAnnotation();
14328
11369
  };
14329
11370
  return /*#__PURE__*/React.createElement("div", {
11371
+ "data-uxbert-reportly": true,
14330
11372
  "data-theme": state.config.ui?.theme || "light"
14331
11373
  }, /*#__PURE__*/React.createElement(FloatingButton, null), /*#__PURE__*/React.createElement(IssueModal, null), /*#__PURE__*/React.createElement(AnnotationToolbar, {
14332
11374
  onUndo: handleUndo,