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