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