@bryancheru/chat-widget 1.0.0
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/README.md +361 -0
- package/dist/App.d.ts +6 -0
- package/dist/App.d.ts.map +1 -0
- package/dist/index.cjs +2 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +3282 -0
- package/dist/index.js.map +1 -0
- package/dist/types.d.ts +6 -0
- package/dist/types.d.ts.map +1 -0
- package/package.json +65 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,3282 @@
|
|
|
1
|
+
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useRef, useCallback, useEffect, useMemo } from "react";
|
|
3
|
+
function r(e) {
|
|
4
|
+
var t, f, n = "";
|
|
5
|
+
if ("string" == typeof e || "number" == typeof e) n += e;
|
|
6
|
+
else if ("object" == typeof e) if (Array.isArray(e)) {
|
|
7
|
+
var o = e.length;
|
|
8
|
+
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
9
|
+
} else for (f in e) e[f] && (n && (n += " "), n += f);
|
|
10
|
+
return n;
|
|
11
|
+
}
|
|
12
|
+
function clsx() {
|
|
13
|
+
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
14
|
+
return n;
|
|
15
|
+
}
|
|
16
|
+
const CLASS_PART_SEPARATOR = "-";
|
|
17
|
+
const createClassGroupUtils = (config) => {
|
|
18
|
+
const classMap = createClassMap(config);
|
|
19
|
+
const {
|
|
20
|
+
conflictingClassGroups,
|
|
21
|
+
conflictingClassGroupModifiers
|
|
22
|
+
} = config;
|
|
23
|
+
const getClassGroupId = (className) => {
|
|
24
|
+
const classParts = className.split(CLASS_PART_SEPARATOR);
|
|
25
|
+
if (classParts[0] === "" && classParts.length !== 1) {
|
|
26
|
+
classParts.shift();
|
|
27
|
+
}
|
|
28
|
+
return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className);
|
|
29
|
+
};
|
|
30
|
+
const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
|
|
31
|
+
const conflicts = conflictingClassGroups[classGroupId] || [];
|
|
32
|
+
if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
|
|
33
|
+
return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]];
|
|
34
|
+
}
|
|
35
|
+
return conflicts;
|
|
36
|
+
};
|
|
37
|
+
return {
|
|
38
|
+
getClassGroupId,
|
|
39
|
+
getConflictingClassGroupIds
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
const getGroupRecursive = (classParts, classPartObject) => {
|
|
43
|
+
var _a;
|
|
44
|
+
if (classParts.length === 0) {
|
|
45
|
+
return classPartObject.classGroupId;
|
|
46
|
+
}
|
|
47
|
+
const currentClassPart = classParts[0];
|
|
48
|
+
const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
|
|
49
|
+
const classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive(classParts.slice(1), nextClassPartObject) : void 0;
|
|
50
|
+
if (classGroupFromNextClassPart) {
|
|
51
|
+
return classGroupFromNextClassPart;
|
|
52
|
+
}
|
|
53
|
+
if (classPartObject.validators.length === 0) {
|
|
54
|
+
return void 0;
|
|
55
|
+
}
|
|
56
|
+
const classRest = classParts.join(CLASS_PART_SEPARATOR);
|
|
57
|
+
return (_a = classPartObject.validators.find(({
|
|
58
|
+
validator
|
|
59
|
+
}) => validator(classRest))) == null ? void 0 : _a.classGroupId;
|
|
60
|
+
};
|
|
61
|
+
const arbitraryPropertyRegex = /^\[(.+)\]$/;
|
|
62
|
+
const getGroupIdForArbitraryProperty = (className) => {
|
|
63
|
+
if (arbitraryPropertyRegex.test(className)) {
|
|
64
|
+
const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
|
|
65
|
+
const property = arbitraryPropertyClassName == null ? void 0 : arbitraryPropertyClassName.substring(0, arbitraryPropertyClassName.indexOf(":"));
|
|
66
|
+
if (property) {
|
|
67
|
+
return "arbitrary.." + property;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
const createClassMap = (config) => {
|
|
72
|
+
const {
|
|
73
|
+
theme,
|
|
74
|
+
prefix
|
|
75
|
+
} = config;
|
|
76
|
+
const classMap = {
|
|
77
|
+
nextPart: /* @__PURE__ */ new Map(),
|
|
78
|
+
validators: []
|
|
79
|
+
};
|
|
80
|
+
const prefixedClassGroupEntries = getPrefixedClassGroupEntries(Object.entries(config.classGroups), prefix);
|
|
81
|
+
prefixedClassGroupEntries.forEach(([classGroupId, classGroup]) => {
|
|
82
|
+
processClassesRecursively(classGroup, classMap, classGroupId, theme);
|
|
83
|
+
});
|
|
84
|
+
return classMap;
|
|
85
|
+
};
|
|
86
|
+
const processClassesRecursively = (classGroup, classPartObject, classGroupId, theme) => {
|
|
87
|
+
classGroup.forEach((classDefinition) => {
|
|
88
|
+
if (typeof classDefinition === "string") {
|
|
89
|
+
const classPartObjectToEdit = classDefinition === "" ? classPartObject : getPart(classPartObject, classDefinition);
|
|
90
|
+
classPartObjectToEdit.classGroupId = classGroupId;
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
if (typeof classDefinition === "function") {
|
|
94
|
+
if (isThemeGetter(classDefinition)) {
|
|
95
|
+
processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
|
|
96
|
+
return;
|
|
97
|
+
}
|
|
98
|
+
classPartObject.validators.push({
|
|
99
|
+
validator: classDefinition,
|
|
100
|
+
classGroupId
|
|
101
|
+
});
|
|
102
|
+
return;
|
|
103
|
+
}
|
|
104
|
+
Object.entries(classDefinition).forEach(([key, classGroup2]) => {
|
|
105
|
+
processClassesRecursively(classGroup2, getPart(classPartObject, key), classGroupId, theme);
|
|
106
|
+
});
|
|
107
|
+
});
|
|
108
|
+
};
|
|
109
|
+
const getPart = (classPartObject, path) => {
|
|
110
|
+
let currentClassPartObject = classPartObject;
|
|
111
|
+
path.split(CLASS_PART_SEPARATOR).forEach((pathPart) => {
|
|
112
|
+
if (!currentClassPartObject.nextPart.has(pathPart)) {
|
|
113
|
+
currentClassPartObject.nextPart.set(pathPart, {
|
|
114
|
+
nextPart: /* @__PURE__ */ new Map(),
|
|
115
|
+
validators: []
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
currentClassPartObject = currentClassPartObject.nextPart.get(pathPart);
|
|
119
|
+
});
|
|
120
|
+
return currentClassPartObject;
|
|
121
|
+
};
|
|
122
|
+
const isThemeGetter = (func) => func.isThemeGetter;
|
|
123
|
+
const getPrefixedClassGroupEntries = (classGroupEntries, prefix) => {
|
|
124
|
+
if (!prefix) {
|
|
125
|
+
return classGroupEntries;
|
|
126
|
+
}
|
|
127
|
+
return classGroupEntries.map(([classGroupId, classGroup]) => {
|
|
128
|
+
const prefixedClassGroup = classGroup.map((classDefinition) => {
|
|
129
|
+
if (typeof classDefinition === "string") {
|
|
130
|
+
return prefix + classDefinition;
|
|
131
|
+
}
|
|
132
|
+
if (typeof classDefinition === "object") {
|
|
133
|
+
return Object.fromEntries(Object.entries(classDefinition).map(([key, value]) => [prefix + key, value]));
|
|
134
|
+
}
|
|
135
|
+
return classDefinition;
|
|
136
|
+
});
|
|
137
|
+
return [classGroupId, prefixedClassGroup];
|
|
138
|
+
});
|
|
139
|
+
};
|
|
140
|
+
const createLruCache = (maxCacheSize) => {
|
|
141
|
+
if (maxCacheSize < 1) {
|
|
142
|
+
return {
|
|
143
|
+
get: () => void 0,
|
|
144
|
+
set: () => {
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
}
|
|
148
|
+
let cacheSize = 0;
|
|
149
|
+
let cache = /* @__PURE__ */ new Map();
|
|
150
|
+
let previousCache = /* @__PURE__ */ new Map();
|
|
151
|
+
const update = (key, value) => {
|
|
152
|
+
cache.set(key, value);
|
|
153
|
+
cacheSize++;
|
|
154
|
+
if (cacheSize > maxCacheSize) {
|
|
155
|
+
cacheSize = 0;
|
|
156
|
+
previousCache = cache;
|
|
157
|
+
cache = /* @__PURE__ */ new Map();
|
|
158
|
+
}
|
|
159
|
+
};
|
|
160
|
+
return {
|
|
161
|
+
get(key) {
|
|
162
|
+
let value = cache.get(key);
|
|
163
|
+
if (value !== void 0) {
|
|
164
|
+
return value;
|
|
165
|
+
}
|
|
166
|
+
if ((value = previousCache.get(key)) !== void 0) {
|
|
167
|
+
update(key, value);
|
|
168
|
+
return value;
|
|
169
|
+
}
|
|
170
|
+
},
|
|
171
|
+
set(key, value) {
|
|
172
|
+
if (cache.has(key)) {
|
|
173
|
+
cache.set(key, value);
|
|
174
|
+
} else {
|
|
175
|
+
update(key, value);
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
};
|
|
179
|
+
};
|
|
180
|
+
const IMPORTANT_MODIFIER = "!";
|
|
181
|
+
const createParseClassName = (config) => {
|
|
182
|
+
const {
|
|
183
|
+
separator,
|
|
184
|
+
experimentalParseClassName
|
|
185
|
+
} = config;
|
|
186
|
+
const isSeparatorSingleCharacter = separator.length === 1;
|
|
187
|
+
const firstSeparatorCharacter = separator[0];
|
|
188
|
+
const separatorLength = separator.length;
|
|
189
|
+
const parseClassName = (className) => {
|
|
190
|
+
const modifiers = [];
|
|
191
|
+
let bracketDepth = 0;
|
|
192
|
+
let modifierStart = 0;
|
|
193
|
+
let postfixModifierPosition;
|
|
194
|
+
for (let index = 0; index < className.length; index++) {
|
|
195
|
+
let currentCharacter = className[index];
|
|
196
|
+
if (bracketDepth === 0) {
|
|
197
|
+
if (currentCharacter === firstSeparatorCharacter && (isSeparatorSingleCharacter || className.slice(index, index + separatorLength) === separator)) {
|
|
198
|
+
modifiers.push(className.slice(modifierStart, index));
|
|
199
|
+
modifierStart = index + separatorLength;
|
|
200
|
+
continue;
|
|
201
|
+
}
|
|
202
|
+
if (currentCharacter === "/") {
|
|
203
|
+
postfixModifierPosition = index;
|
|
204
|
+
continue;
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
if (currentCharacter === "[") {
|
|
208
|
+
bracketDepth++;
|
|
209
|
+
} else if (currentCharacter === "]") {
|
|
210
|
+
bracketDepth--;
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
const baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.substring(modifierStart);
|
|
214
|
+
const hasImportantModifier = baseClassNameWithImportantModifier.startsWith(IMPORTANT_MODIFIER);
|
|
215
|
+
const baseClassName = hasImportantModifier ? baseClassNameWithImportantModifier.substring(1) : baseClassNameWithImportantModifier;
|
|
216
|
+
const maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : void 0;
|
|
217
|
+
return {
|
|
218
|
+
modifiers,
|
|
219
|
+
hasImportantModifier,
|
|
220
|
+
baseClassName,
|
|
221
|
+
maybePostfixModifierPosition
|
|
222
|
+
};
|
|
223
|
+
};
|
|
224
|
+
if (experimentalParseClassName) {
|
|
225
|
+
return (className) => experimentalParseClassName({
|
|
226
|
+
className,
|
|
227
|
+
parseClassName
|
|
228
|
+
});
|
|
229
|
+
}
|
|
230
|
+
return parseClassName;
|
|
231
|
+
};
|
|
232
|
+
const sortModifiers = (modifiers) => {
|
|
233
|
+
if (modifiers.length <= 1) {
|
|
234
|
+
return modifiers;
|
|
235
|
+
}
|
|
236
|
+
const sortedModifiers = [];
|
|
237
|
+
let unsortedModifiers = [];
|
|
238
|
+
modifiers.forEach((modifier) => {
|
|
239
|
+
const isArbitraryVariant = modifier[0] === "[";
|
|
240
|
+
if (isArbitraryVariant) {
|
|
241
|
+
sortedModifiers.push(...unsortedModifiers.sort(), modifier);
|
|
242
|
+
unsortedModifiers = [];
|
|
243
|
+
} else {
|
|
244
|
+
unsortedModifiers.push(modifier);
|
|
245
|
+
}
|
|
246
|
+
});
|
|
247
|
+
sortedModifiers.push(...unsortedModifiers.sort());
|
|
248
|
+
return sortedModifiers;
|
|
249
|
+
};
|
|
250
|
+
const createConfigUtils = (config) => ({
|
|
251
|
+
cache: createLruCache(config.cacheSize),
|
|
252
|
+
parseClassName: createParseClassName(config),
|
|
253
|
+
...createClassGroupUtils(config)
|
|
254
|
+
});
|
|
255
|
+
const SPLIT_CLASSES_REGEX = /\s+/;
|
|
256
|
+
const mergeClassList = (classList, configUtils) => {
|
|
257
|
+
const {
|
|
258
|
+
parseClassName,
|
|
259
|
+
getClassGroupId,
|
|
260
|
+
getConflictingClassGroupIds
|
|
261
|
+
} = configUtils;
|
|
262
|
+
const classGroupsInConflict = [];
|
|
263
|
+
const classNames = classList.trim().split(SPLIT_CLASSES_REGEX);
|
|
264
|
+
let result = "";
|
|
265
|
+
for (let index = classNames.length - 1; index >= 0; index -= 1) {
|
|
266
|
+
const originalClassName = classNames[index];
|
|
267
|
+
const {
|
|
268
|
+
modifiers,
|
|
269
|
+
hasImportantModifier,
|
|
270
|
+
baseClassName,
|
|
271
|
+
maybePostfixModifierPosition
|
|
272
|
+
} = parseClassName(originalClassName);
|
|
273
|
+
let hasPostfixModifier = Boolean(maybePostfixModifierPosition);
|
|
274
|
+
let classGroupId = getClassGroupId(hasPostfixModifier ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName);
|
|
275
|
+
if (!classGroupId) {
|
|
276
|
+
if (!hasPostfixModifier) {
|
|
277
|
+
result = originalClassName + (result.length > 0 ? " " + result : result);
|
|
278
|
+
continue;
|
|
279
|
+
}
|
|
280
|
+
classGroupId = getClassGroupId(baseClassName);
|
|
281
|
+
if (!classGroupId) {
|
|
282
|
+
result = originalClassName + (result.length > 0 ? " " + result : result);
|
|
283
|
+
continue;
|
|
284
|
+
}
|
|
285
|
+
hasPostfixModifier = false;
|
|
286
|
+
}
|
|
287
|
+
const variantModifier = sortModifiers(modifiers).join(":");
|
|
288
|
+
const modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
|
|
289
|
+
const classId = modifierId + classGroupId;
|
|
290
|
+
if (classGroupsInConflict.includes(classId)) {
|
|
291
|
+
continue;
|
|
292
|
+
}
|
|
293
|
+
classGroupsInConflict.push(classId);
|
|
294
|
+
const conflictGroups = getConflictingClassGroupIds(classGroupId, hasPostfixModifier);
|
|
295
|
+
for (let i = 0; i < conflictGroups.length; ++i) {
|
|
296
|
+
const group = conflictGroups[i];
|
|
297
|
+
classGroupsInConflict.push(modifierId + group);
|
|
298
|
+
}
|
|
299
|
+
result = originalClassName + (result.length > 0 ? " " + result : result);
|
|
300
|
+
}
|
|
301
|
+
return result;
|
|
302
|
+
};
|
|
303
|
+
function twJoin() {
|
|
304
|
+
let index = 0;
|
|
305
|
+
let argument;
|
|
306
|
+
let resolvedValue;
|
|
307
|
+
let string = "";
|
|
308
|
+
while (index < arguments.length) {
|
|
309
|
+
if (argument = arguments[index++]) {
|
|
310
|
+
if (resolvedValue = toValue(argument)) {
|
|
311
|
+
string && (string += " ");
|
|
312
|
+
string += resolvedValue;
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
return string;
|
|
317
|
+
}
|
|
318
|
+
const toValue = (mix) => {
|
|
319
|
+
if (typeof mix === "string") {
|
|
320
|
+
return mix;
|
|
321
|
+
}
|
|
322
|
+
let resolvedValue;
|
|
323
|
+
let string = "";
|
|
324
|
+
for (let k = 0; k < mix.length; k++) {
|
|
325
|
+
if (mix[k]) {
|
|
326
|
+
if (resolvedValue = toValue(mix[k])) {
|
|
327
|
+
string && (string += " ");
|
|
328
|
+
string += resolvedValue;
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
}
|
|
332
|
+
return string;
|
|
333
|
+
};
|
|
334
|
+
function createTailwindMerge(createConfigFirst, ...createConfigRest) {
|
|
335
|
+
let configUtils;
|
|
336
|
+
let cacheGet;
|
|
337
|
+
let cacheSet;
|
|
338
|
+
let functionToCall = initTailwindMerge;
|
|
339
|
+
function initTailwindMerge(classList) {
|
|
340
|
+
const config = createConfigRest.reduce((previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig), createConfigFirst());
|
|
341
|
+
configUtils = createConfigUtils(config);
|
|
342
|
+
cacheGet = configUtils.cache.get;
|
|
343
|
+
cacheSet = configUtils.cache.set;
|
|
344
|
+
functionToCall = tailwindMerge;
|
|
345
|
+
return tailwindMerge(classList);
|
|
346
|
+
}
|
|
347
|
+
function tailwindMerge(classList) {
|
|
348
|
+
const cachedResult = cacheGet(classList);
|
|
349
|
+
if (cachedResult) {
|
|
350
|
+
return cachedResult;
|
|
351
|
+
}
|
|
352
|
+
const result = mergeClassList(classList, configUtils);
|
|
353
|
+
cacheSet(classList, result);
|
|
354
|
+
return result;
|
|
355
|
+
}
|
|
356
|
+
return function callTailwindMerge() {
|
|
357
|
+
return functionToCall(twJoin.apply(null, arguments));
|
|
358
|
+
};
|
|
359
|
+
}
|
|
360
|
+
const fromTheme = (key) => {
|
|
361
|
+
const themeGetter = (theme) => theme[key] || [];
|
|
362
|
+
themeGetter.isThemeGetter = true;
|
|
363
|
+
return themeGetter;
|
|
364
|
+
};
|
|
365
|
+
const arbitraryValueRegex = /^\[(?:([a-z-]+):)?(.+)\]$/i;
|
|
366
|
+
const fractionRegex = /^\d+\/\d+$/;
|
|
367
|
+
const stringLengths = /* @__PURE__ */ new Set(["px", "full", "screen"]);
|
|
368
|
+
const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
|
|
369
|
+
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$/;
|
|
370
|
+
const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/;
|
|
371
|
+
const shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
|
|
372
|
+
const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
|
|
373
|
+
const isLength = (value) => isNumber(value) || stringLengths.has(value) || fractionRegex.test(value);
|
|
374
|
+
const isArbitraryLength = (value) => getIsArbitraryValue(value, "length", isLengthOnly);
|
|
375
|
+
const isNumber = (value) => Boolean(value) && !Number.isNaN(Number(value));
|
|
376
|
+
const isArbitraryNumber = (value) => getIsArbitraryValue(value, "number", isNumber);
|
|
377
|
+
const isInteger = (value) => Boolean(value) && Number.isInteger(Number(value));
|
|
378
|
+
const isPercent = (value) => value.endsWith("%") && isNumber(value.slice(0, -1));
|
|
379
|
+
const isArbitraryValue = (value) => arbitraryValueRegex.test(value);
|
|
380
|
+
const isTshirtSize = (value) => tshirtUnitRegex.test(value);
|
|
381
|
+
const sizeLabels = /* @__PURE__ */ new Set(["length", "size", "percentage"]);
|
|
382
|
+
const isArbitrarySize = (value) => getIsArbitraryValue(value, sizeLabels, isNever);
|
|
383
|
+
const isArbitraryPosition = (value) => getIsArbitraryValue(value, "position", isNever);
|
|
384
|
+
const imageLabels = /* @__PURE__ */ new Set(["image", "url"]);
|
|
385
|
+
const isArbitraryImage = (value) => getIsArbitraryValue(value, imageLabels, isImage);
|
|
386
|
+
const isArbitraryShadow = (value) => getIsArbitraryValue(value, "", isShadow);
|
|
387
|
+
const isAny = () => true;
|
|
388
|
+
const getIsArbitraryValue = (value, label, testValue) => {
|
|
389
|
+
const result = arbitraryValueRegex.exec(value);
|
|
390
|
+
if (result) {
|
|
391
|
+
if (result[1]) {
|
|
392
|
+
return typeof label === "string" ? result[1] === label : label.has(result[1]);
|
|
393
|
+
}
|
|
394
|
+
return testValue(result[2]);
|
|
395
|
+
}
|
|
396
|
+
return false;
|
|
397
|
+
};
|
|
398
|
+
const isLengthOnly = (value) => (
|
|
399
|
+
// `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
|
|
400
|
+
// For example, `hsl(0 0% 0%)` would be classified as a length without this check.
|
|
401
|
+
// I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
|
|
402
|
+
lengthUnitRegex.test(value) && !colorFunctionRegex.test(value)
|
|
403
|
+
);
|
|
404
|
+
const isNever = () => false;
|
|
405
|
+
const isShadow = (value) => shadowRegex.test(value);
|
|
406
|
+
const isImage = (value) => imageRegex.test(value);
|
|
407
|
+
const getDefaultConfig = () => {
|
|
408
|
+
const colors = fromTheme("colors");
|
|
409
|
+
const spacing = fromTheme("spacing");
|
|
410
|
+
const blur = fromTheme("blur");
|
|
411
|
+
const brightness = fromTheme("brightness");
|
|
412
|
+
const borderColor = fromTheme("borderColor");
|
|
413
|
+
const borderRadius = fromTheme("borderRadius");
|
|
414
|
+
const borderSpacing = fromTheme("borderSpacing");
|
|
415
|
+
const borderWidth = fromTheme("borderWidth");
|
|
416
|
+
const contrast = fromTheme("contrast");
|
|
417
|
+
const grayscale = fromTheme("grayscale");
|
|
418
|
+
const hueRotate = fromTheme("hueRotate");
|
|
419
|
+
const invert = fromTheme("invert");
|
|
420
|
+
const gap = fromTheme("gap");
|
|
421
|
+
const gradientColorStops = fromTheme("gradientColorStops");
|
|
422
|
+
const gradientColorStopPositions = fromTheme("gradientColorStopPositions");
|
|
423
|
+
const inset = fromTheme("inset");
|
|
424
|
+
const margin = fromTheme("margin");
|
|
425
|
+
const opacity = fromTheme("opacity");
|
|
426
|
+
const padding = fromTheme("padding");
|
|
427
|
+
const saturate = fromTheme("saturate");
|
|
428
|
+
const scale = fromTheme("scale");
|
|
429
|
+
const sepia = fromTheme("sepia");
|
|
430
|
+
const skew = fromTheme("skew");
|
|
431
|
+
const space = fromTheme("space");
|
|
432
|
+
const translate = fromTheme("translate");
|
|
433
|
+
const getOverscroll = () => ["auto", "contain", "none"];
|
|
434
|
+
const getOverflow = () => ["auto", "hidden", "clip", "visible", "scroll"];
|
|
435
|
+
const getSpacingWithAutoAndArbitrary = () => ["auto", isArbitraryValue, spacing];
|
|
436
|
+
const getSpacingWithArbitrary = () => [isArbitraryValue, spacing];
|
|
437
|
+
const getLengthWithEmptyAndArbitrary = () => ["", isLength, isArbitraryLength];
|
|
438
|
+
const getNumberWithAutoAndArbitrary = () => ["auto", isNumber, isArbitraryValue];
|
|
439
|
+
const getPositions = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"];
|
|
440
|
+
const getLineStyles = () => ["solid", "dashed", "dotted", "double", "none"];
|
|
441
|
+
const getBlendModes = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
|
|
442
|
+
const getAlign = () => ["start", "end", "center", "between", "around", "evenly", "stretch"];
|
|
443
|
+
const getZeroAndEmpty = () => ["", "0", isArbitraryValue];
|
|
444
|
+
const getBreaks = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"];
|
|
445
|
+
const getNumberAndArbitrary = () => [isNumber, isArbitraryValue];
|
|
446
|
+
return {
|
|
447
|
+
cacheSize: 500,
|
|
448
|
+
separator: ":",
|
|
449
|
+
theme: {
|
|
450
|
+
colors: [isAny],
|
|
451
|
+
spacing: [isLength, isArbitraryLength],
|
|
452
|
+
blur: ["none", "", isTshirtSize, isArbitraryValue],
|
|
453
|
+
brightness: getNumberAndArbitrary(),
|
|
454
|
+
borderColor: [colors],
|
|
455
|
+
borderRadius: ["none", "", "full", isTshirtSize, isArbitraryValue],
|
|
456
|
+
borderSpacing: getSpacingWithArbitrary(),
|
|
457
|
+
borderWidth: getLengthWithEmptyAndArbitrary(),
|
|
458
|
+
contrast: getNumberAndArbitrary(),
|
|
459
|
+
grayscale: getZeroAndEmpty(),
|
|
460
|
+
hueRotate: getNumberAndArbitrary(),
|
|
461
|
+
invert: getZeroAndEmpty(),
|
|
462
|
+
gap: getSpacingWithArbitrary(),
|
|
463
|
+
gradientColorStops: [colors],
|
|
464
|
+
gradientColorStopPositions: [isPercent, isArbitraryLength],
|
|
465
|
+
inset: getSpacingWithAutoAndArbitrary(),
|
|
466
|
+
margin: getSpacingWithAutoAndArbitrary(),
|
|
467
|
+
opacity: getNumberAndArbitrary(),
|
|
468
|
+
padding: getSpacingWithArbitrary(),
|
|
469
|
+
saturate: getNumberAndArbitrary(),
|
|
470
|
+
scale: getNumberAndArbitrary(),
|
|
471
|
+
sepia: getZeroAndEmpty(),
|
|
472
|
+
skew: getNumberAndArbitrary(),
|
|
473
|
+
space: getSpacingWithArbitrary(),
|
|
474
|
+
translate: getSpacingWithArbitrary()
|
|
475
|
+
},
|
|
476
|
+
classGroups: {
|
|
477
|
+
// Layout
|
|
478
|
+
/**
|
|
479
|
+
* Aspect Ratio
|
|
480
|
+
* @see https://tailwindcss.com/docs/aspect-ratio
|
|
481
|
+
*/
|
|
482
|
+
aspect: [{
|
|
483
|
+
aspect: ["auto", "square", "video", isArbitraryValue]
|
|
484
|
+
}],
|
|
485
|
+
/**
|
|
486
|
+
* Container
|
|
487
|
+
* @see https://tailwindcss.com/docs/container
|
|
488
|
+
*/
|
|
489
|
+
container: ["container"],
|
|
490
|
+
/**
|
|
491
|
+
* Columns
|
|
492
|
+
* @see https://tailwindcss.com/docs/columns
|
|
493
|
+
*/
|
|
494
|
+
columns: [{
|
|
495
|
+
columns: [isTshirtSize]
|
|
496
|
+
}],
|
|
497
|
+
/**
|
|
498
|
+
* Break After
|
|
499
|
+
* @see https://tailwindcss.com/docs/break-after
|
|
500
|
+
*/
|
|
501
|
+
"break-after": [{
|
|
502
|
+
"break-after": getBreaks()
|
|
503
|
+
}],
|
|
504
|
+
/**
|
|
505
|
+
* Break Before
|
|
506
|
+
* @see https://tailwindcss.com/docs/break-before
|
|
507
|
+
*/
|
|
508
|
+
"break-before": [{
|
|
509
|
+
"break-before": getBreaks()
|
|
510
|
+
}],
|
|
511
|
+
/**
|
|
512
|
+
* Break Inside
|
|
513
|
+
* @see https://tailwindcss.com/docs/break-inside
|
|
514
|
+
*/
|
|
515
|
+
"break-inside": [{
|
|
516
|
+
"break-inside": ["auto", "avoid", "avoid-page", "avoid-column"]
|
|
517
|
+
}],
|
|
518
|
+
/**
|
|
519
|
+
* Box Decoration Break
|
|
520
|
+
* @see https://tailwindcss.com/docs/box-decoration-break
|
|
521
|
+
*/
|
|
522
|
+
"box-decoration": [{
|
|
523
|
+
"box-decoration": ["slice", "clone"]
|
|
524
|
+
}],
|
|
525
|
+
/**
|
|
526
|
+
* Box Sizing
|
|
527
|
+
* @see https://tailwindcss.com/docs/box-sizing
|
|
528
|
+
*/
|
|
529
|
+
box: [{
|
|
530
|
+
box: ["border", "content"]
|
|
531
|
+
}],
|
|
532
|
+
/**
|
|
533
|
+
* Display
|
|
534
|
+
* @see https://tailwindcss.com/docs/display
|
|
535
|
+
*/
|
|
536
|
+
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"],
|
|
537
|
+
/**
|
|
538
|
+
* Floats
|
|
539
|
+
* @see https://tailwindcss.com/docs/float
|
|
540
|
+
*/
|
|
541
|
+
float: [{
|
|
542
|
+
float: ["right", "left", "none", "start", "end"]
|
|
543
|
+
}],
|
|
544
|
+
/**
|
|
545
|
+
* Clear
|
|
546
|
+
* @see https://tailwindcss.com/docs/clear
|
|
547
|
+
*/
|
|
548
|
+
clear: [{
|
|
549
|
+
clear: ["left", "right", "both", "none", "start", "end"]
|
|
550
|
+
}],
|
|
551
|
+
/**
|
|
552
|
+
* Isolation
|
|
553
|
+
* @see https://tailwindcss.com/docs/isolation
|
|
554
|
+
*/
|
|
555
|
+
isolation: ["isolate", "isolation-auto"],
|
|
556
|
+
/**
|
|
557
|
+
* Object Fit
|
|
558
|
+
* @see https://tailwindcss.com/docs/object-fit
|
|
559
|
+
*/
|
|
560
|
+
"object-fit": [{
|
|
561
|
+
object: ["contain", "cover", "fill", "none", "scale-down"]
|
|
562
|
+
}],
|
|
563
|
+
/**
|
|
564
|
+
* Object Position
|
|
565
|
+
* @see https://tailwindcss.com/docs/object-position
|
|
566
|
+
*/
|
|
567
|
+
"object-position": [{
|
|
568
|
+
object: [...getPositions(), isArbitraryValue]
|
|
569
|
+
}],
|
|
570
|
+
/**
|
|
571
|
+
* Overflow
|
|
572
|
+
* @see https://tailwindcss.com/docs/overflow
|
|
573
|
+
*/
|
|
574
|
+
overflow: [{
|
|
575
|
+
overflow: getOverflow()
|
|
576
|
+
}],
|
|
577
|
+
/**
|
|
578
|
+
* Overflow X
|
|
579
|
+
* @see https://tailwindcss.com/docs/overflow
|
|
580
|
+
*/
|
|
581
|
+
"overflow-x": [{
|
|
582
|
+
"overflow-x": getOverflow()
|
|
583
|
+
}],
|
|
584
|
+
/**
|
|
585
|
+
* Overflow Y
|
|
586
|
+
* @see https://tailwindcss.com/docs/overflow
|
|
587
|
+
*/
|
|
588
|
+
"overflow-y": [{
|
|
589
|
+
"overflow-y": getOverflow()
|
|
590
|
+
}],
|
|
591
|
+
/**
|
|
592
|
+
* Overscroll Behavior
|
|
593
|
+
* @see https://tailwindcss.com/docs/overscroll-behavior
|
|
594
|
+
*/
|
|
595
|
+
overscroll: [{
|
|
596
|
+
overscroll: getOverscroll()
|
|
597
|
+
}],
|
|
598
|
+
/**
|
|
599
|
+
* Overscroll Behavior X
|
|
600
|
+
* @see https://tailwindcss.com/docs/overscroll-behavior
|
|
601
|
+
*/
|
|
602
|
+
"overscroll-x": [{
|
|
603
|
+
"overscroll-x": getOverscroll()
|
|
604
|
+
}],
|
|
605
|
+
/**
|
|
606
|
+
* Overscroll Behavior Y
|
|
607
|
+
* @see https://tailwindcss.com/docs/overscroll-behavior
|
|
608
|
+
*/
|
|
609
|
+
"overscroll-y": [{
|
|
610
|
+
"overscroll-y": getOverscroll()
|
|
611
|
+
}],
|
|
612
|
+
/**
|
|
613
|
+
* Position
|
|
614
|
+
* @see https://tailwindcss.com/docs/position
|
|
615
|
+
*/
|
|
616
|
+
position: ["static", "fixed", "absolute", "relative", "sticky"],
|
|
617
|
+
/**
|
|
618
|
+
* Top / Right / Bottom / Left
|
|
619
|
+
* @see https://tailwindcss.com/docs/top-right-bottom-left
|
|
620
|
+
*/
|
|
621
|
+
inset: [{
|
|
622
|
+
inset: [inset]
|
|
623
|
+
}],
|
|
624
|
+
/**
|
|
625
|
+
* Right / Left
|
|
626
|
+
* @see https://tailwindcss.com/docs/top-right-bottom-left
|
|
627
|
+
*/
|
|
628
|
+
"inset-x": [{
|
|
629
|
+
"inset-x": [inset]
|
|
630
|
+
}],
|
|
631
|
+
/**
|
|
632
|
+
* Top / Bottom
|
|
633
|
+
* @see https://tailwindcss.com/docs/top-right-bottom-left
|
|
634
|
+
*/
|
|
635
|
+
"inset-y": [{
|
|
636
|
+
"inset-y": [inset]
|
|
637
|
+
}],
|
|
638
|
+
/**
|
|
639
|
+
* Start
|
|
640
|
+
* @see https://tailwindcss.com/docs/top-right-bottom-left
|
|
641
|
+
*/
|
|
642
|
+
start: [{
|
|
643
|
+
start: [inset]
|
|
644
|
+
}],
|
|
645
|
+
/**
|
|
646
|
+
* End
|
|
647
|
+
* @see https://tailwindcss.com/docs/top-right-bottom-left
|
|
648
|
+
*/
|
|
649
|
+
end: [{
|
|
650
|
+
end: [inset]
|
|
651
|
+
}],
|
|
652
|
+
/**
|
|
653
|
+
* Top
|
|
654
|
+
* @see https://tailwindcss.com/docs/top-right-bottom-left
|
|
655
|
+
*/
|
|
656
|
+
top: [{
|
|
657
|
+
top: [inset]
|
|
658
|
+
}],
|
|
659
|
+
/**
|
|
660
|
+
* Right
|
|
661
|
+
* @see https://tailwindcss.com/docs/top-right-bottom-left
|
|
662
|
+
*/
|
|
663
|
+
right: [{
|
|
664
|
+
right: [inset]
|
|
665
|
+
}],
|
|
666
|
+
/**
|
|
667
|
+
* Bottom
|
|
668
|
+
* @see https://tailwindcss.com/docs/top-right-bottom-left
|
|
669
|
+
*/
|
|
670
|
+
bottom: [{
|
|
671
|
+
bottom: [inset]
|
|
672
|
+
}],
|
|
673
|
+
/**
|
|
674
|
+
* Left
|
|
675
|
+
* @see https://tailwindcss.com/docs/top-right-bottom-left
|
|
676
|
+
*/
|
|
677
|
+
left: [{
|
|
678
|
+
left: [inset]
|
|
679
|
+
}],
|
|
680
|
+
/**
|
|
681
|
+
* Visibility
|
|
682
|
+
* @see https://tailwindcss.com/docs/visibility
|
|
683
|
+
*/
|
|
684
|
+
visibility: ["visible", "invisible", "collapse"],
|
|
685
|
+
/**
|
|
686
|
+
* Z-Index
|
|
687
|
+
* @see https://tailwindcss.com/docs/z-index
|
|
688
|
+
*/
|
|
689
|
+
z: [{
|
|
690
|
+
z: ["auto", isInteger, isArbitraryValue]
|
|
691
|
+
}],
|
|
692
|
+
// Flexbox and Grid
|
|
693
|
+
/**
|
|
694
|
+
* Flex Basis
|
|
695
|
+
* @see https://tailwindcss.com/docs/flex-basis
|
|
696
|
+
*/
|
|
697
|
+
basis: [{
|
|
698
|
+
basis: getSpacingWithAutoAndArbitrary()
|
|
699
|
+
}],
|
|
700
|
+
/**
|
|
701
|
+
* Flex Direction
|
|
702
|
+
* @see https://tailwindcss.com/docs/flex-direction
|
|
703
|
+
*/
|
|
704
|
+
"flex-direction": [{
|
|
705
|
+
flex: ["row", "row-reverse", "col", "col-reverse"]
|
|
706
|
+
}],
|
|
707
|
+
/**
|
|
708
|
+
* Flex Wrap
|
|
709
|
+
* @see https://tailwindcss.com/docs/flex-wrap
|
|
710
|
+
*/
|
|
711
|
+
"flex-wrap": [{
|
|
712
|
+
flex: ["wrap", "wrap-reverse", "nowrap"]
|
|
713
|
+
}],
|
|
714
|
+
/**
|
|
715
|
+
* Flex
|
|
716
|
+
* @see https://tailwindcss.com/docs/flex
|
|
717
|
+
*/
|
|
718
|
+
flex: [{
|
|
719
|
+
flex: ["1", "auto", "initial", "none", isArbitraryValue]
|
|
720
|
+
}],
|
|
721
|
+
/**
|
|
722
|
+
* Flex Grow
|
|
723
|
+
* @see https://tailwindcss.com/docs/flex-grow
|
|
724
|
+
*/
|
|
725
|
+
grow: [{
|
|
726
|
+
grow: getZeroAndEmpty()
|
|
727
|
+
}],
|
|
728
|
+
/**
|
|
729
|
+
* Flex Shrink
|
|
730
|
+
* @see https://tailwindcss.com/docs/flex-shrink
|
|
731
|
+
*/
|
|
732
|
+
shrink: [{
|
|
733
|
+
shrink: getZeroAndEmpty()
|
|
734
|
+
}],
|
|
735
|
+
/**
|
|
736
|
+
* Order
|
|
737
|
+
* @see https://tailwindcss.com/docs/order
|
|
738
|
+
*/
|
|
739
|
+
order: [{
|
|
740
|
+
order: ["first", "last", "none", isInteger, isArbitraryValue]
|
|
741
|
+
}],
|
|
742
|
+
/**
|
|
743
|
+
* Grid Template Columns
|
|
744
|
+
* @see https://tailwindcss.com/docs/grid-template-columns
|
|
745
|
+
*/
|
|
746
|
+
"grid-cols": [{
|
|
747
|
+
"grid-cols": [isAny]
|
|
748
|
+
}],
|
|
749
|
+
/**
|
|
750
|
+
* Grid Column Start / End
|
|
751
|
+
* @see https://tailwindcss.com/docs/grid-column
|
|
752
|
+
*/
|
|
753
|
+
"col-start-end": [{
|
|
754
|
+
col: ["auto", {
|
|
755
|
+
span: ["full", isInteger, isArbitraryValue]
|
|
756
|
+
}, isArbitraryValue]
|
|
757
|
+
}],
|
|
758
|
+
/**
|
|
759
|
+
* Grid Column Start
|
|
760
|
+
* @see https://tailwindcss.com/docs/grid-column
|
|
761
|
+
*/
|
|
762
|
+
"col-start": [{
|
|
763
|
+
"col-start": getNumberWithAutoAndArbitrary()
|
|
764
|
+
}],
|
|
765
|
+
/**
|
|
766
|
+
* Grid Column End
|
|
767
|
+
* @see https://tailwindcss.com/docs/grid-column
|
|
768
|
+
*/
|
|
769
|
+
"col-end": [{
|
|
770
|
+
"col-end": getNumberWithAutoAndArbitrary()
|
|
771
|
+
}],
|
|
772
|
+
/**
|
|
773
|
+
* Grid Template Rows
|
|
774
|
+
* @see https://tailwindcss.com/docs/grid-template-rows
|
|
775
|
+
*/
|
|
776
|
+
"grid-rows": [{
|
|
777
|
+
"grid-rows": [isAny]
|
|
778
|
+
}],
|
|
779
|
+
/**
|
|
780
|
+
* Grid Row Start / End
|
|
781
|
+
* @see https://tailwindcss.com/docs/grid-row
|
|
782
|
+
*/
|
|
783
|
+
"row-start-end": [{
|
|
784
|
+
row: ["auto", {
|
|
785
|
+
span: [isInteger, isArbitraryValue]
|
|
786
|
+
}, isArbitraryValue]
|
|
787
|
+
}],
|
|
788
|
+
/**
|
|
789
|
+
* Grid Row Start
|
|
790
|
+
* @see https://tailwindcss.com/docs/grid-row
|
|
791
|
+
*/
|
|
792
|
+
"row-start": [{
|
|
793
|
+
"row-start": getNumberWithAutoAndArbitrary()
|
|
794
|
+
}],
|
|
795
|
+
/**
|
|
796
|
+
* Grid Row End
|
|
797
|
+
* @see https://tailwindcss.com/docs/grid-row
|
|
798
|
+
*/
|
|
799
|
+
"row-end": [{
|
|
800
|
+
"row-end": getNumberWithAutoAndArbitrary()
|
|
801
|
+
}],
|
|
802
|
+
/**
|
|
803
|
+
* Grid Auto Flow
|
|
804
|
+
* @see https://tailwindcss.com/docs/grid-auto-flow
|
|
805
|
+
*/
|
|
806
|
+
"grid-flow": [{
|
|
807
|
+
"grid-flow": ["row", "col", "dense", "row-dense", "col-dense"]
|
|
808
|
+
}],
|
|
809
|
+
/**
|
|
810
|
+
* Grid Auto Columns
|
|
811
|
+
* @see https://tailwindcss.com/docs/grid-auto-columns
|
|
812
|
+
*/
|
|
813
|
+
"auto-cols": [{
|
|
814
|
+
"auto-cols": ["auto", "min", "max", "fr", isArbitraryValue]
|
|
815
|
+
}],
|
|
816
|
+
/**
|
|
817
|
+
* Grid Auto Rows
|
|
818
|
+
* @see https://tailwindcss.com/docs/grid-auto-rows
|
|
819
|
+
*/
|
|
820
|
+
"auto-rows": [{
|
|
821
|
+
"auto-rows": ["auto", "min", "max", "fr", isArbitraryValue]
|
|
822
|
+
}],
|
|
823
|
+
/**
|
|
824
|
+
* Gap
|
|
825
|
+
* @see https://tailwindcss.com/docs/gap
|
|
826
|
+
*/
|
|
827
|
+
gap: [{
|
|
828
|
+
gap: [gap]
|
|
829
|
+
}],
|
|
830
|
+
/**
|
|
831
|
+
* Gap X
|
|
832
|
+
* @see https://tailwindcss.com/docs/gap
|
|
833
|
+
*/
|
|
834
|
+
"gap-x": [{
|
|
835
|
+
"gap-x": [gap]
|
|
836
|
+
}],
|
|
837
|
+
/**
|
|
838
|
+
* Gap Y
|
|
839
|
+
* @see https://tailwindcss.com/docs/gap
|
|
840
|
+
*/
|
|
841
|
+
"gap-y": [{
|
|
842
|
+
"gap-y": [gap]
|
|
843
|
+
}],
|
|
844
|
+
/**
|
|
845
|
+
* Justify Content
|
|
846
|
+
* @see https://tailwindcss.com/docs/justify-content
|
|
847
|
+
*/
|
|
848
|
+
"justify-content": [{
|
|
849
|
+
justify: ["normal", ...getAlign()]
|
|
850
|
+
}],
|
|
851
|
+
/**
|
|
852
|
+
* Justify Items
|
|
853
|
+
* @see https://tailwindcss.com/docs/justify-items
|
|
854
|
+
*/
|
|
855
|
+
"justify-items": [{
|
|
856
|
+
"justify-items": ["start", "end", "center", "stretch"]
|
|
857
|
+
}],
|
|
858
|
+
/**
|
|
859
|
+
* Justify Self
|
|
860
|
+
* @see https://tailwindcss.com/docs/justify-self
|
|
861
|
+
*/
|
|
862
|
+
"justify-self": [{
|
|
863
|
+
"justify-self": ["auto", "start", "end", "center", "stretch"]
|
|
864
|
+
}],
|
|
865
|
+
/**
|
|
866
|
+
* Align Content
|
|
867
|
+
* @see https://tailwindcss.com/docs/align-content
|
|
868
|
+
*/
|
|
869
|
+
"align-content": [{
|
|
870
|
+
content: ["normal", ...getAlign(), "baseline"]
|
|
871
|
+
}],
|
|
872
|
+
/**
|
|
873
|
+
* Align Items
|
|
874
|
+
* @see https://tailwindcss.com/docs/align-items
|
|
875
|
+
*/
|
|
876
|
+
"align-items": [{
|
|
877
|
+
items: ["start", "end", "center", "baseline", "stretch"]
|
|
878
|
+
}],
|
|
879
|
+
/**
|
|
880
|
+
* Align Self
|
|
881
|
+
* @see https://tailwindcss.com/docs/align-self
|
|
882
|
+
*/
|
|
883
|
+
"align-self": [{
|
|
884
|
+
self: ["auto", "start", "end", "center", "stretch", "baseline"]
|
|
885
|
+
}],
|
|
886
|
+
/**
|
|
887
|
+
* Place Content
|
|
888
|
+
* @see https://tailwindcss.com/docs/place-content
|
|
889
|
+
*/
|
|
890
|
+
"place-content": [{
|
|
891
|
+
"place-content": [...getAlign(), "baseline"]
|
|
892
|
+
}],
|
|
893
|
+
/**
|
|
894
|
+
* Place Items
|
|
895
|
+
* @see https://tailwindcss.com/docs/place-items
|
|
896
|
+
*/
|
|
897
|
+
"place-items": [{
|
|
898
|
+
"place-items": ["start", "end", "center", "baseline", "stretch"]
|
|
899
|
+
}],
|
|
900
|
+
/**
|
|
901
|
+
* Place Self
|
|
902
|
+
* @see https://tailwindcss.com/docs/place-self
|
|
903
|
+
*/
|
|
904
|
+
"place-self": [{
|
|
905
|
+
"place-self": ["auto", "start", "end", "center", "stretch"]
|
|
906
|
+
}],
|
|
907
|
+
// Spacing
|
|
908
|
+
/**
|
|
909
|
+
* Padding
|
|
910
|
+
* @see https://tailwindcss.com/docs/padding
|
|
911
|
+
*/
|
|
912
|
+
p: [{
|
|
913
|
+
p: [padding]
|
|
914
|
+
}],
|
|
915
|
+
/**
|
|
916
|
+
* Padding X
|
|
917
|
+
* @see https://tailwindcss.com/docs/padding
|
|
918
|
+
*/
|
|
919
|
+
px: [{
|
|
920
|
+
px: [padding]
|
|
921
|
+
}],
|
|
922
|
+
/**
|
|
923
|
+
* Padding Y
|
|
924
|
+
* @see https://tailwindcss.com/docs/padding
|
|
925
|
+
*/
|
|
926
|
+
py: [{
|
|
927
|
+
py: [padding]
|
|
928
|
+
}],
|
|
929
|
+
/**
|
|
930
|
+
* Padding Start
|
|
931
|
+
* @see https://tailwindcss.com/docs/padding
|
|
932
|
+
*/
|
|
933
|
+
ps: [{
|
|
934
|
+
ps: [padding]
|
|
935
|
+
}],
|
|
936
|
+
/**
|
|
937
|
+
* Padding End
|
|
938
|
+
* @see https://tailwindcss.com/docs/padding
|
|
939
|
+
*/
|
|
940
|
+
pe: [{
|
|
941
|
+
pe: [padding]
|
|
942
|
+
}],
|
|
943
|
+
/**
|
|
944
|
+
* Padding Top
|
|
945
|
+
* @see https://tailwindcss.com/docs/padding
|
|
946
|
+
*/
|
|
947
|
+
pt: [{
|
|
948
|
+
pt: [padding]
|
|
949
|
+
}],
|
|
950
|
+
/**
|
|
951
|
+
* Padding Right
|
|
952
|
+
* @see https://tailwindcss.com/docs/padding
|
|
953
|
+
*/
|
|
954
|
+
pr: [{
|
|
955
|
+
pr: [padding]
|
|
956
|
+
}],
|
|
957
|
+
/**
|
|
958
|
+
* Padding Bottom
|
|
959
|
+
* @see https://tailwindcss.com/docs/padding
|
|
960
|
+
*/
|
|
961
|
+
pb: [{
|
|
962
|
+
pb: [padding]
|
|
963
|
+
}],
|
|
964
|
+
/**
|
|
965
|
+
* Padding Left
|
|
966
|
+
* @see https://tailwindcss.com/docs/padding
|
|
967
|
+
*/
|
|
968
|
+
pl: [{
|
|
969
|
+
pl: [padding]
|
|
970
|
+
}],
|
|
971
|
+
/**
|
|
972
|
+
* Margin
|
|
973
|
+
* @see https://tailwindcss.com/docs/margin
|
|
974
|
+
*/
|
|
975
|
+
m: [{
|
|
976
|
+
m: [margin]
|
|
977
|
+
}],
|
|
978
|
+
/**
|
|
979
|
+
* Margin X
|
|
980
|
+
* @see https://tailwindcss.com/docs/margin
|
|
981
|
+
*/
|
|
982
|
+
mx: [{
|
|
983
|
+
mx: [margin]
|
|
984
|
+
}],
|
|
985
|
+
/**
|
|
986
|
+
* Margin Y
|
|
987
|
+
* @see https://tailwindcss.com/docs/margin
|
|
988
|
+
*/
|
|
989
|
+
my: [{
|
|
990
|
+
my: [margin]
|
|
991
|
+
}],
|
|
992
|
+
/**
|
|
993
|
+
* Margin Start
|
|
994
|
+
* @see https://tailwindcss.com/docs/margin
|
|
995
|
+
*/
|
|
996
|
+
ms: [{
|
|
997
|
+
ms: [margin]
|
|
998
|
+
}],
|
|
999
|
+
/**
|
|
1000
|
+
* Margin End
|
|
1001
|
+
* @see https://tailwindcss.com/docs/margin
|
|
1002
|
+
*/
|
|
1003
|
+
me: [{
|
|
1004
|
+
me: [margin]
|
|
1005
|
+
}],
|
|
1006
|
+
/**
|
|
1007
|
+
* Margin Top
|
|
1008
|
+
* @see https://tailwindcss.com/docs/margin
|
|
1009
|
+
*/
|
|
1010
|
+
mt: [{
|
|
1011
|
+
mt: [margin]
|
|
1012
|
+
}],
|
|
1013
|
+
/**
|
|
1014
|
+
* Margin Right
|
|
1015
|
+
* @see https://tailwindcss.com/docs/margin
|
|
1016
|
+
*/
|
|
1017
|
+
mr: [{
|
|
1018
|
+
mr: [margin]
|
|
1019
|
+
}],
|
|
1020
|
+
/**
|
|
1021
|
+
* Margin Bottom
|
|
1022
|
+
* @see https://tailwindcss.com/docs/margin
|
|
1023
|
+
*/
|
|
1024
|
+
mb: [{
|
|
1025
|
+
mb: [margin]
|
|
1026
|
+
}],
|
|
1027
|
+
/**
|
|
1028
|
+
* Margin Left
|
|
1029
|
+
* @see https://tailwindcss.com/docs/margin
|
|
1030
|
+
*/
|
|
1031
|
+
ml: [{
|
|
1032
|
+
ml: [margin]
|
|
1033
|
+
}],
|
|
1034
|
+
/**
|
|
1035
|
+
* Space Between X
|
|
1036
|
+
* @see https://tailwindcss.com/docs/space
|
|
1037
|
+
*/
|
|
1038
|
+
"space-x": [{
|
|
1039
|
+
"space-x": [space]
|
|
1040
|
+
}],
|
|
1041
|
+
/**
|
|
1042
|
+
* Space Between X Reverse
|
|
1043
|
+
* @see https://tailwindcss.com/docs/space
|
|
1044
|
+
*/
|
|
1045
|
+
"space-x-reverse": ["space-x-reverse"],
|
|
1046
|
+
/**
|
|
1047
|
+
* Space Between Y
|
|
1048
|
+
* @see https://tailwindcss.com/docs/space
|
|
1049
|
+
*/
|
|
1050
|
+
"space-y": [{
|
|
1051
|
+
"space-y": [space]
|
|
1052
|
+
}],
|
|
1053
|
+
/**
|
|
1054
|
+
* Space Between Y Reverse
|
|
1055
|
+
* @see https://tailwindcss.com/docs/space
|
|
1056
|
+
*/
|
|
1057
|
+
"space-y-reverse": ["space-y-reverse"],
|
|
1058
|
+
// Sizing
|
|
1059
|
+
/**
|
|
1060
|
+
* Width
|
|
1061
|
+
* @see https://tailwindcss.com/docs/width
|
|
1062
|
+
*/
|
|
1063
|
+
w: [{
|
|
1064
|
+
w: ["auto", "min", "max", "fit", "svw", "lvw", "dvw", isArbitraryValue, spacing]
|
|
1065
|
+
}],
|
|
1066
|
+
/**
|
|
1067
|
+
* Min-Width
|
|
1068
|
+
* @see https://tailwindcss.com/docs/min-width
|
|
1069
|
+
*/
|
|
1070
|
+
"min-w": [{
|
|
1071
|
+
"min-w": [isArbitraryValue, spacing, "min", "max", "fit"]
|
|
1072
|
+
}],
|
|
1073
|
+
/**
|
|
1074
|
+
* Max-Width
|
|
1075
|
+
* @see https://tailwindcss.com/docs/max-width
|
|
1076
|
+
*/
|
|
1077
|
+
"max-w": [{
|
|
1078
|
+
"max-w": [isArbitraryValue, spacing, "none", "full", "min", "max", "fit", "prose", {
|
|
1079
|
+
screen: [isTshirtSize]
|
|
1080
|
+
}, isTshirtSize]
|
|
1081
|
+
}],
|
|
1082
|
+
/**
|
|
1083
|
+
* Height
|
|
1084
|
+
* @see https://tailwindcss.com/docs/height
|
|
1085
|
+
*/
|
|
1086
|
+
h: [{
|
|
1087
|
+
h: [isArbitraryValue, spacing, "auto", "min", "max", "fit", "svh", "lvh", "dvh"]
|
|
1088
|
+
}],
|
|
1089
|
+
/**
|
|
1090
|
+
* Min-Height
|
|
1091
|
+
* @see https://tailwindcss.com/docs/min-height
|
|
1092
|
+
*/
|
|
1093
|
+
"min-h": [{
|
|
1094
|
+
"min-h": [isArbitraryValue, spacing, "min", "max", "fit", "svh", "lvh", "dvh"]
|
|
1095
|
+
}],
|
|
1096
|
+
/**
|
|
1097
|
+
* Max-Height
|
|
1098
|
+
* @see https://tailwindcss.com/docs/max-height
|
|
1099
|
+
*/
|
|
1100
|
+
"max-h": [{
|
|
1101
|
+
"max-h": [isArbitraryValue, spacing, "min", "max", "fit", "svh", "lvh", "dvh"]
|
|
1102
|
+
}],
|
|
1103
|
+
/**
|
|
1104
|
+
* Size
|
|
1105
|
+
* @see https://tailwindcss.com/docs/size
|
|
1106
|
+
*/
|
|
1107
|
+
size: [{
|
|
1108
|
+
size: [isArbitraryValue, spacing, "auto", "min", "max", "fit"]
|
|
1109
|
+
}],
|
|
1110
|
+
// Typography
|
|
1111
|
+
/**
|
|
1112
|
+
* Font Size
|
|
1113
|
+
* @see https://tailwindcss.com/docs/font-size
|
|
1114
|
+
*/
|
|
1115
|
+
"font-size": [{
|
|
1116
|
+
text: ["base", isTshirtSize, isArbitraryLength]
|
|
1117
|
+
}],
|
|
1118
|
+
/**
|
|
1119
|
+
* Font Smoothing
|
|
1120
|
+
* @see https://tailwindcss.com/docs/font-smoothing
|
|
1121
|
+
*/
|
|
1122
|
+
"font-smoothing": ["antialiased", "subpixel-antialiased"],
|
|
1123
|
+
/**
|
|
1124
|
+
* Font Style
|
|
1125
|
+
* @see https://tailwindcss.com/docs/font-style
|
|
1126
|
+
*/
|
|
1127
|
+
"font-style": ["italic", "not-italic"],
|
|
1128
|
+
/**
|
|
1129
|
+
* Font Weight
|
|
1130
|
+
* @see https://tailwindcss.com/docs/font-weight
|
|
1131
|
+
*/
|
|
1132
|
+
"font-weight": [{
|
|
1133
|
+
font: ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", isArbitraryNumber]
|
|
1134
|
+
}],
|
|
1135
|
+
/**
|
|
1136
|
+
* Font Family
|
|
1137
|
+
* @see https://tailwindcss.com/docs/font-family
|
|
1138
|
+
*/
|
|
1139
|
+
"font-family": [{
|
|
1140
|
+
font: [isAny]
|
|
1141
|
+
}],
|
|
1142
|
+
/**
|
|
1143
|
+
* Font Variant Numeric
|
|
1144
|
+
* @see https://tailwindcss.com/docs/font-variant-numeric
|
|
1145
|
+
*/
|
|
1146
|
+
"fvn-normal": ["normal-nums"],
|
|
1147
|
+
/**
|
|
1148
|
+
* Font Variant Numeric
|
|
1149
|
+
* @see https://tailwindcss.com/docs/font-variant-numeric
|
|
1150
|
+
*/
|
|
1151
|
+
"fvn-ordinal": ["ordinal"],
|
|
1152
|
+
/**
|
|
1153
|
+
* Font Variant Numeric
|
|
1154
|
+
* @see https://tailwindcss.com/docs/font-variant-numeric
|
|
1155
|
+
*/
|
|
1156
|
+
"fvn-slashed-zero": ["slashed-zero"],
|
|
1157
|
+
/**
|
|
1158
|
+
* Font Variant Numeric
|
|
1159
|
+
* @see https://tailwindcss.com/docs/font-variant-numeric
|
|
1160
|
+
*/
|
|
1161
|
+
"fvn-figure": ["lining-nums", "oldstyle-nums"],
|
|
1162
|
+
/**
|
|
1163
|
+
* Font Variant Numeric
|
|
1164
|
+
* @see https://tailwindcss.com/docs/font-variant-numeric
|
|
1165
|
+
*/
|
|
1166
|
+
"fvn-spacing": ["proportional-nums", "tabular-nums"],
|
|
1167
|
+
/**
|
|
1168
|
+
* Font Variant Numeric
|
|
1169
|
+
* @see https://tailwindcss.com/docs/font-variant-numeric
|
|
1170
|
+
*/
|
|
1171
|
+
"fvn-fraction": ["diagonal-fractions", "stacked-fractions"],
|
|
1172
|
+
/**
|
|
1173
|
+
* Letter Spacing
|
|
1174
|
+
* @see https://tailwindcss.com/docs/letter-spacing
|
|
1175
|
+
*/
|
|
1176
|
+
tracking: [{
|
|
1177
|
+
tracking: ["tighter", "tight", "normal", "wide", "wider", "widest", isArbitraryValue]
|
|
1178
|
+
}],
|
|
1179
|
+
/**
|
|
1180
|
+
* Line Clamp
|
|
1181
|
+
* @see https://tailwindcss.com/docs/line-clamp
|
|
1182
|
+
*/
|
|
1183
|
+
"line-clamp": [{
|
|
1184
|
+
"line-clamp": ["none", isNumber, isArbitraryNumber]
|
|
1185
|
+
}],
|
|
1186
|
+
/**
|
|
1187
|
+
* Line Height
|
|
1188
|
+
* @see https://tailwindcss.com/docs/line-height
|
|
1189
|
+
*/
|
|
1190
|
+
leading: [{
|
|
1191
|
+
leading: ["none", "tight", "snug", "normal", "relaxed", "loose", isLength, isArbitraryValue]
|
|
1192
|
+
}],
|
|
1193
|
+
/**
|
|
1194
|
+
* List Style Image
|
|
1195
|
+
* @see https://tailwindcss.com/docs/list-style-image
|
|
1196
|
+
*/
|
|
1197
|
+
"list-image": [{
|
|
1198
|
+
"list-image": ["none", isArbitraryValue]
|
|
1199
|
+
}],
|
|
1200
|
+
/**
|
|
1201
|
+
* List Style Type
|
|
1202
|
+
* @see https://tailwindcss.com/docs/list-style-type
|
|
1203
|
+
*/
|
|
1204
|
+
"list-style-type": [{
|
|
1205
|
+
list: ["none", "disc", "decimal", isArbitraryValue]
|
|
1206
|
+
}],
|
|
1207
|
+
/**
|
|
1208
|
+
* List Style Position
|
|
1209
|
+
* @see https://tailwindcss.com/docs/list-style-position
|
|
1210
|
+
*/
|
|
1211
|
+
"list-style-position": [{
|
|
1212
|
+
list: ["inside", "outside"]
|
|
1213
|
+
}],
|
|
1214
|
+
/**
|
|
1215
|
+
* Placeholder Color
|
|
1216
|
+
* @deprecated since Tailwind CSS v3.0.0
|
|
1217
|
+
* @see https://tailwindcss.com/docs/placeholder-color
|
|
1218
|
+
*/
|
|
1219
|
+
"placeholder-color": [{
|
|
1220
|
+
placeholder: [colors]
|
|
1221
|
+
}],
|
|
1222
|
+
/**
|
|
1223
|
+
* Placeholder Opacity
|
|
1224
|
+
* @see https://tailwindcss.com/docs/placeholder-opacity
|
|
1225
|
+
*/
|
|
1226
|
+
"placeholder-opacity": [{
|
|
1227
|
+
"placeholder-opacity": [opacity]
|
|
1228
|
+
}],
|
|
1229
|
+
/**
|
|
1230
|
+
* Text Alignment
|
|
1231
|
+
* @see https://tailwindcss.com/docs/text-align
|
|
1232
|
+
*/
|
|
1233
|
+
"text-alignment": [{
|
|
1234
|
+
text: ["left", "center", "right", "justify", "start", "end"]
|
|
1235
|
+
}],
|
|
1236
|
+
/**
|
|
1237
|
+
* Text Color
|
|
1238
|
+
* @see https://tailwindcss.com/docs/text-color
|
|
1239
|
+
*/
|
|
1240
|
+
"text-color": [{
|
|
1241
|
+
text: [colors]
|
|
1242
|
+
}],
|
|
1243
|
+
/**
|
|
1244
|
+
* Text Opacity
|
|
1245
|
+
* @see https://tailwindcss.com/docs/text-opacity
|
|
1246
|
+
*/
|
|
1247
|
+
"text-opacity": [{
|
|
1248
|
+
"text-opacity": [opacity]
|
|
1249
|
+
}],
|
|
1250
|
+
/**
|
|
1251
|
+
* Text Decoration
|
|
1252
|
+
* @see https://tailwindcss.com/docs/text-decoration
|
|
1253
|
+
*/
|
|
1254
|
+
"text-decoration": ["underline", "overline", "line-through", "no-underline"],
|
|
1255
|
+
/**
|
|
1256
|
+
* Text Decoration Style
|
|
1257
|
+
* @see https://tailwindcss.com/docs/text-decoration-style
|
|
1258
|
+
*/
|
|
1259
|
+
"text-decoration-style": [{
|
|
1260
|
+
decoration: [...getLineStyles(), "wavy"]
|
|
1261
|
+
}],
|
|
1262
|
+
/**
|
|
1263
|
+
* Text Decoration Thickness
|
|
1264
|
+
* @see https://tailwindcss.com/docs/text-decoration-thickness
|
|
1265
|
+
*/
|
|
1266
|
+
"text-decoration-thickness": [{
|
|
1267
|
+
decoration: ["auto", "from-font", isLength, isArbitraryLength]
|
|
1268
|
+
}],
|
|
1269
|
+
/**
|
|
1270
|
+
* Text Underline Offset
|
|
1271
|
+
* @see https://tailwindcss.com/docs/text-underline-offset
|
|
1272
|
+
*/
|
|
1273
|
+
"underline-offset": [{
|
|
1274
|
+
"underline-offset": ["auto", isLength, isArbitraryValue]
|
|
1275
|
+
}],
|
|
1276
|
+
/**
|
|
1277
|
+
* Text Decoration Color
|
|
1278
|
+
* @see https://tailwindcss.com/docs/text-decoration-color
|
|
1279
|
+
*/
|
|
1280
|
+
"text-decoration-color": [{
|
|
1281
|
+
decoration: [colors]
|
|
1282
|
+
}],
|
|
1283
|
+
/**
|
|
1284
|
+
* Text Transform
|
|
1285
|
+
* @see https://tailwindcss.com/docs/text-transform
|
|
1286
|
+
*/
|
|
1287
|
+
"text-transform": ["uppercase", "lowercase", "capitalize", "normal-case"],
|
|
1288
|
+
/**
|
|
1289
|
+
* Text Overflow
|
|
1290
|
+
* @see https://tailwindcss.com/docs/text-overflow
|
|
1291
|
+
*/
|
|
1292
|
+
"text-overflow": ["truncate", "text-ellipsis", "text-clip"],
|
|
1293
|
+
/**
|
|
1294
|
+
* Text Wrap
|
|
1295
|
+
* @see https://tailwindcss.com/docs/text-wrap
|
|
1296
|
+
*/
|
|
1297
|
+
"text-wrap": [{
|
|
1298
|
+
text: ["wrap", "nowrap", "balance", "pretty"]
|
|
1299
|
+
}],
|
|
1300
|
+
/**
|
|
1301
|
+
* Text Indent
|
|
1302
|
+
* @see https://tailwindcss.com/docs/text-indent
|
|
1303
|
+
*/
|
|
1304
|
+
indent: [{
|
|
1305
|
+
indent: getSpacingWithArbitrary()
|
|
1306
|
+
}],
|
|
1307
|
+
/**
|
|
1308
|
+
* Vertical Alignment
|
|
1309
|
+
* @see https://tailwindcss.com/docs/vertical-align
|
|
1310
|
+
*/
|
|
1311
|
+
"vertical-align": [{
|
|
1312
|
+
align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", isArbitraryValue]
|
|
1313
|
+
}],
|
|
1314
|
+
/**
|
|
1315
|
+
* Whitespace
|
|
1316
|
+
* @see https://tailwindcss.com/docs/whitespace
|
|
1317
|
+
*/
|
|
1318
|
+
whitespace: [{
|
|
1319
|
+
whitespace: ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces"]
|
|
1320
|
+
}],
|
|
1321
|
+
/**
|
|
1322
|
+
* Word Break
|
|
1323
|
+
* @see https://tailwindcss.com/docs/word-break
|
|
1324
|
+
*/
|
|
1325
|
+
break: [{
|
|
1326
|
+
break: ["normal", "words", "all", "keep"]
|
|
1327
|
+
}],
|
|
1328
|
+
/**
|
|
1329
|
+
* Hyphens
|
|
1330
|
+
* @see https://tailwindcss.com/docs/hyphens
|
|
1331
|
+
*/
|
|
1332
|
+
hyphens: [{
|
|
1333
|
+
hyphens: ["none", "manual", "auto"]
|
|
1334
|
+
}],
|
|
1335
|
+
/**
|
|
1336
|
+
* Content
|
|
1337
|
+
* @see https://tailwindcss.com/docs/content
|
|
1338
|
+
*/
|
|
1339
|
+
content: [{
|
|
1340
|
+
content: ["none", isArbitraryValue]
|
|
1341
|
+
}],
|
|
1342
|
+
// Backgrounds
|
|
1343
|
+
/**
|
|
1344
|
+
* Background Attachment
|
|
1345
|
+
* @see https://tailwindcss.com/docs/background-attachment
|
|
1346
|
+
*/
|
|
1347
|
+
"bg-attachment": [{
|
|
1348
|
+
bg: ["fixed", "local", "scroll"]
|
|
1349
|
+
}],
|
|
1350
|
+
/**
|
|
1351
|
+
* Background Clip
|
|
1352
|
+
* @see https://tailwindcss.com/docs/background-clip
|
|
1353
|
+
*/
|
|
1354
|
+
"bg-clip": [{
|
|
1355
|
+
"bg-clip": ["border", "padding", "content", "text"]
|
|
1356
|
+
}],
|
|
1357
|
+
/**
|
|
1358
|
+
* Background Opacity
|
|
1359
|
+
* @deprecated since Tailwind CSS v3.0.0
|
|
1360
|
+
* @see https://tailwindcss.com/docs/background-opacity
|
|
1361
|
+
*/
|
|
1362
|
+
"bg-opacity": [{
|
|
1363
|
+
"bg-opacity": [opacity]
|
|
1364
|
+
}],
|
|
1365
|
+
/**
|
|
1366
|
+
* Background Origin
|
|
1367
|
+
* @see https://tailwindcss.com/docs/background-origin
|
|
1368
|
+
*/
|
|
1369
|
+
"bg-origin": [{
|
|
1370
|
+
"bg-origin": ["border", "padding", "content"]
|
|
1371
|
+
}],
|
|
1372
|
+
/**
|
|
1373
|
+
* Background Position
|
|
1374
|
+
* @see https://tailwindcss.com/docs/background-position
|
|
1375
|
+
*/
|
|
1376
|
+
"bg-position": [{
|
|
1377
|
+
bg: [...getPositions(), isArbitraryPosition]
|
|
1378
|
+
}],
|
|
1379
|
+
/**
|
|
1380
|
+
* Background Repeat
|
|
1381
|
+
* @see https://tailwindcss.com/docs/background-repeat
|
|
1382
|
+
*/
|
|
1383
|
+
"bg-repeat": [{
|
|
1384
|
+
bg: ["no-repeat", {
|
|
1385
|
+
repeat: ["", "x", "y", "round", "space"]
|
|
1386
|
+
}]
|
|
1387
|
+
}],
|
|
1388
|
+
/**
|
|
1389
|
+
* Background Size
|
|
1390
|
+
* @see https://tailwindcss.com/docs/background-size
|
|
1391
|
+
*/
|
|
1392
|
+
"bg-size": [{
|
|
1393
|
+
bg: ["auto", "cover", "contain", isArbitrarySize]
|
|
1394
|
+
}],
|
|
1395
|
+
/**
|
|
1396
|
+
* Background Image
|
|
1397
|
+
* @see https://tailwindcss.com/docs/background-image
|
|
1398
|
+
*/
|
|
1399
|
+
"bg-image": [{
|
|
1400
|
+
bg: ["none", {
|
|
1401
|
+
"gradient-to": ["t", "tr", "r", "br", "b", "bl", "l", "tl"]
|
|
1402
|
+
}, isArbitraryImage]
|
|
1403
|
+
}],
|
|
1404
|
+
/**
|
|
1405
|
+
* Background Color
|
|
1406
|
+
* @see https://tailwindcss.com/docs/background-color
|
|
1407
|
+
*/
|
|
1408
|
+
"bg-color": [{
|
|
1409
|
+
bg: [colors]
|
|
1410
|
+
}],
|
|
1411
|
+
/**
|
|
1412
|
+
* Gradient Color Stops From Position
|
|
1413
|
+
* @see https://tailwindcss.com/docs/gradient-color-stops
|
|
1414
|
+
*/
|
|
1415
|
+
"gradient-from-pos": [{
|
|
1416
|
+
from: [gradientColorStopPositions]
|
|
1417
|
+
}],
|
|
1418
|
+
/**
|
|
1419
|
+
* Gradient Color Stops Via Position
|
|
1420
|
+
* @see https://tailwindcss.com/docs/gradient-color-stops
|
|
1421
|
+
*/
|
|
1422
|
+
"gradient-via-pos": [{
|
|
1423
|
+
via: [gradientColorStopPositions]
|
|
1424
|
+
}],
|
|
1425
|
+
/**
|
|
1426
|
+
* Gradient Color Stops To Position
|
|
1427
|
+
* @see https://tailwindcss.com/docs/gradient-color-stops
|
|
1428
|
+
*/
|
|
1429
|
+
"gradient-to-pos": [{
|
|
1430
|
+
to: [gradientColorStopPositions]
|
|
1431
|
+
}],
|
|
1432
|
+
/**
|
|
1433
|
+
* Gradient Color Stops From
|
|
1434
|
+
* @see https://tailwindcss.com/docs/gradient-color-stops
|
|
1435
|
+
*/
|
|
1436
|
+
"gradient-from": [{
|
|
1437
|
+
from: [gradientColorStops]
|
|
1438
|
+
}],
|
|
1439
|
+
/**
|
|
1440
|
+
* Gradient Color Stops Via
|
|
1441
|
+
* @see https://tailwindcss.com/docs/gradient-color-stops
|
|
1442
|
+
*/
|
|
1443
|
+
"gradient-via": [{
|
|
1444
|
+
via: [gradientColorStops]
|
|
1445
|
+
}],
|
|
1446
|
+
/**
|
|
1447
|
+
* Gradient Color Stops To
|
|
1448
|
+
* @see https://tailwindcss.com/docs/gradient-color-stops
|
|
1449
|
+
*/
|
|
1450
|
+
"gradient-to": [{
|
|
1451
|
+
to: [gradientColorStops]
|
|
1452
|
+
}],
|
|
1453
|
+
// Borders
|
|
1454
|
+
/**
|
|
1455
|
+
* Border Radius
|
|
1456
|
+
* @see https://tailwindcss.com/docs/border-radius
|
|
1457
|
+
*/
|
|
1458
|
+
rounded: [{
|
|
1459
|
+
rounded: [borderRadius]
|
|
1460
|
+
}],
|
|
1461
|
+
/**
|
|
1462
|
+
* Border Radius Start
|
|
1463
|
+
* @see https://tailwindcss.com/docs/border-radius
|
|
1464
|
+
*/
|
|
1465
|
+
"rounded-s": [{
|
|
1466
|
+
"rounded-s": [borderRadius]
|
|
1467
|
+
}],
|
|
1468
|
+
/**
|
|
1469
|
+
* Border Radius End
|
|
1470
|
+
* @see https://tailwindcss.com/docs/border-radius
|
|
1471
|
+
*/
|
|
1472
|
+
"rounded-e": [{
|
|
1473
|
+
"rounded-e": [borderRadius]
|
|
1474
|
+
}],
|
|
1475
|
+
/**
|
|
1476
|
+
* Border Radius Top
|
|
1477
|
+
* @see https://tailwindcss.com/docs/border-radius
|
|
1478
|
+
*/
|
|
1479
|
+
"rounded-t": [{
|
|
1480
|
+
"rounded-t": [borderRadius]
|
|
1481
|
+
}],
|
|
1482
|
+
/**
|
|
1483
|
+
* Border Radius Right
|
|
1484
|
+
* @see https://tailwindcss.com/docs/border-radius
|
|
1485
|
+
*/
|
|
1486
|
+
"rounded-r": [{
|
|
1487
|
+
"rounded-r": [borderRadius]
|
|
1488
|
+
}],
|
|
1489
|
+
/**
|
|
1490
|
+
* Border Radius Bottom
|
|
1491
|
+
* @see https://tailwindcss.com/docs/border-radius
|
|
1492
|
+
*/
|
|
1493
|
+
"rounded-b": [{
|
|
1494
|
+
"rounded-b": [borderRadius]
|
|
1495
|
+
}],
|
|
1496
|
+
/**
|
|
1497
|
+
* Border Radius Left
|
|
1498
|
+
* @see https://tailwindcss.com/docs/border-radius
|
|
1499
|
+
*/
|
|
1500
|
+
"rounded-l": [{
|
|
1501
|
+
"rounded-l": [borderRadius]
|
|
1502
|
+
}],
|
|
1503
|
+
/**
|
|
1504
|
+
* Border Radius Start Start
|
|
1505
|
+
* @see https://tailwindcss.com/docs/border-radius
|
|
1506
|
+
*/
|
|
1507
|
+
"rounded-ss": [{
|
|
1508
|
+
"rounded-ss": [borderRadius]
|
|
1509
|
+
}],
|
|
1510
|
+
/**
|
|
1511
|
+
* Border Radius Start End
|
|
1512
|
+
* @see https://tailwindcss.com/docs/border-radius
|
|
1513
|
+
*/
|
|
1514
|
+
"rounded-se": [{
|
|
1515
|
+
"rounded-se": [borderRadius]
|
|
1516
|
+
}],
|
|
1517
|
+
/**
|
|
1518
|
+
* Border Radius End End
|
|
1519
|
+
* @see https://tailwindcss.com/docs/border-radius
|
|
1520
|
+
*/
|
|
1521
|
+
"rounded-ee": [{
|
|
1522
|
+
"rounded-ee": [borderRadius]
|
|
1523
|
+
}],
|
|
1524
|
+
/**
|
|
1525
|
+
* Border Radius End Start
|
|
1526
|
+
* @see https://tailwindcss.com/docs/border-radius
|
|
1527
|
+
*/
|
|
1528
|
+
"rounded-es": [{
|
|
1529
|
+
"rounded-es": [borderRadius]
|
|
1530
|
+
}],
|
|
1531
|
+
/**
|
|
1532
|
+
* Border Radius Top Left
|
|
1533
|
+
* @see https://tailwindcss.com/docs/border-radius
|
|
1534
|
+
*/
|
|
1535
|
+
"rounded-tl": [{
|
|
1536
|
+
"rounded-tl": [borderRadius]
|
|
1537
|
+
}],
|
|
1538
|
+
/**
|
|
1539
|
+
* Border Radius Top Right
|
|
1540
|
+
* @see https://tailwindcss.com/docs/border-radius
|
|
1541
|
+
*/
|
|
1542
|
+
"rounded-tr": [{
|
|
1543
|
+
"rounded-tr": [borderRadius]
|
|
1544
|
+
}],
|
|
1545
|
+
/**
|
|
1546
|
+
* Border Radius Bottom Right
|
|
1547
|
+
* @see https://tailwindcss.com/docs/border-radius
|
|
1548
|
+
*/
|
|
1549
|
+
"rounded-br": [{
|
|
1550
|
+
"rounded-br": [borderRadius]
|
|
1551
|
+
}],
|
|
1552
|
+
/**
|
|
1553
|
+
* Border Radius Bottom Left
|
|
1554
|
+
* @see https://tailwindcss.com/docs/border-radius
|
|
1555
|
+
*/
|
|
1556
|
+
"rounded-bl": [{
|
|
1557
|
+
"rounded-bl": [borderRadius]
|
|
1558
|
+
}],
|
|
1559
|
+
/**
|
|
1560
|
+
* Border Width
|
|
1561
|
+
* @see https://tailwindcss.com/docs/border-width
|
|
1562
|
+
*/
|
|
1563
|
+
"border-w": [{
|
|
1564
|
+
border: [borderWidth]
|
|
1565
|
+
}],
|
|
1566
|
+
/**
|
|
1567
|
+
* Border Width X
|
|
1568
|
+
* @see https://tailwindcss.com/docs/border-width
|
|
1569
|
+
*/
|
|
1570
|
+
"border-w-x": [{
|
|
1571
|
+
"border-x": [borderWidth]
|
|
1572
|
+
}],
|
|
1573
|
+
/**
|
|
1574
|
+
* Border Width Y
|
|
1575
|
+
* @see https://tailwindcss.com/docs/border-width
|
|
1576
|
+
*/
|
|
1577
|
+
"border-w-y": [{
|
|
1578
|
+
"border-y": [borderWidth]
|
|
1579
|
+
}],
|
|
1580
|
+
/**
|
|
1581
|
+
* Border Width Start
|
|
1582
|
+
* @see https://tailwindcss.com/docs/border-width
|
|
1583
|
+
*/
|
|
1584
|
+
"border-w-s": [{
|
|
1585
|
+
"border-s": [borderWidth]
|
|
1586
|
+
}],
|
|
1587
|
+
/**
|
|
1588
|
+
* Border Width End
|
|
1589
|
+
* @see https://tailwindcss.com/docs/border-width
|
|
1590
|
+
*/
|
|
1591
|
+
"border-w-e": [{
|
|
1592
|
+
"border-e": [borderWidth]
|
|
1593
|
+
}],
|
|
1594
|
+
/**
|
|
1595
|
+
* Border Width Top
|
|
1596
|
+
* @see https://tailwindcss.com/docs/border-width
|
|
1597
|
+
*/
|
|
1598
|
+
"border-w-t": [{
|
|
1599
|
+
"border-t": [borderWidth]
|
|
1600
|
+
}],
|
|
1601
|
+
/**
|
|
1602
|
+
* Border Width Right
|
|
1603
|
+
* @see https://tailwindcss.com/docs/border-width
|
|
1604
|
+
*/
|
|
1605
|
+
"border-w-r": [{
|
|
1606
|
+
"border-r": [borderWidth]
|
|
1607
|
+
}],
|
|
1608
|
+
/**
|
|
1609
|
+
* Border Width Bottom
|
|
1610
|
+
* @see https://tailwindcss.com/docs/border-width
|
|
1611
|
+
*/
|
|
1612
|
+
"border-w-b": [{
|
|
1613
|
+
"border-b": [borderWidth]
|
|
1614
|
+
}],
|
|
1615
|
+
/**
|
|
1616
|
+
* Border Width Left
|
|
1617
|
+
* @see https://tailwindcss.com/docs/border-width
|
|
1618
|
+
*/
|
|
1619
|
+
"border-w-l": [{
|
|
1620
|
+
"border-l": [borderWidth]
|
|
1621
|
+
}],
|
|
1622
|
+
/**
|
|
1623
|
+
* Border Opacity
|
|
1624
|
+
* @see https://tailwindcss.com/docs/border-opacity
|
|
1625
|
+
*/
|
|
1626
|
+
"border-opacity": [{
|
|
1627
|
+
"border-opacity": [opacity]
|
|
1628
|
+
}],
|
|
1629
|
+
/**
|
|
1630
|
+
* Border Style
|
|
1631
|
+
* @see https://tailwindcss.com/docs/border-style
|
|
1632
|
+
*/
|
|
1633
|
+
"border-style": [{
|
|
1634
|
+
border: [...getLineStyles(), "hidden"]
|
|
1635
|
+
}],
|
|
1636
|
+
/**
|
|
1637
|
+
* Divide Width X
|
|
1638
|
+
* @see https://tailwindcss.com/docs/divide-width
|
|
1639
|
+
*/
|
|
1640
|
+
"divide-x": [{
|
|
1641
|
+
"divide-x": [borderWidth]
|
|
1642
|
+
}],
|
|
1643
|
+
/**
|
|
1644
|
+
* Divide Width X Reverse
|
|
1645
|
+
* @see https://tailwindcss.com/docs/divide-width
|
|
1646
|
+
*/
|
|
1647
|
+
"divide-x-reverse": ["divide-x-reverse"],
|
|
1648
|
+
/**
|
|
1649
|
+
* Divide Width Y
|
|
1650
|
+
* @see https://tailwindcss.com/docs/divide-width
|
|
1651
|
+
*/
|
|
1652
|
+
"divide-y": [{
|
|
1653
|
+
"divide-y": [borderWidth]
|
|
1654
|
+
}],
|
|
1655
|
+
/**
|
|
1656
|
+
* Divide Width Y Reverse
|
|
1657
|
+
* @see https://tailwindcss.com/docs/divide-width
|
|
1658
|
+
*/
|
|
1659
|
+
"divide-y-reverse": ["divide-y-reverse"],
|
|
1660
|
+
/**
|
|
1661
|
+
* Divide Opacity
|
|
1662
|
+
* @see https://tailwindcss.com/docs/divide-opacity
|
|
1663
|
+
*/
|
|
1664
|
+
"divide-opacity": [{
|
|
1665
|
+
"divide-opacity": [opacity]
|
|
1666
|
+
}],
|
|
1667
|
+
/**
|
|
1668
|
+
* Divide Style
|
|
1669
|
+
* @see https://tailwindcss.com/docs/divide-style
|
|
1670
|
+
*/
|
|
1671
|
+
"divide-style": [{
|
|
1672
|
+
divide: getLineStyles()
|
|
1673
|
+
}],
|
|
1674
|
+
/**
|
|
1675
|
+
* Border Color
|
|
1676
|
+
* @see https://tailwindcss.com/docs/border-color
|
|
1677
|
+
*/
|
|
1678
|
+
"border-color": [{
|
|
1679
|
+
border: [borderColor]
|
|
1680
|
+
}],
|
|
1681
|
+
/**
|
|
1682
|
+
* Border Color X
|
|
1683
|
+
* @see https://tailwindcss.com/docs/border-color
|
|
1684
|
+
*/
|
|
1685
|
+
"border-color-x": [{
|
|
1686
|
+
"border-x": [borderColor]
|
|
1687
|
+
}],
|
|
1688
|
+
/**
|
|
1689
|
+
* Border Color Y
|
|
1690
|
+
* @see https://tailwindcss.com/docs/border-color
|
|
1691
|
+
*/
|
|
1692
|
+
"border-color-y": [{
|
|
1693
|
+
"border-y": [borderColor]
|
|
1694
|
+
}],
|
|
1695
|
+
/**
|
|
1696
|
+
* Border Color S
|
|
1697
|
+
* @see https://tailwindcss.com/docs/border-color
|
|
1698
|
+
*/
|
|
1699
|
+
"border-color-s": [{
|
|
1700
|
+
"border-s": [borderColor]
|
|
1701
|
+
}],
|
|
1702
|
+
/**
|
|
1703
|
+
* Border Color E
|
|
1704
|
+
* @see https://tailwindcss.com/docs/border-color
|
|
1705
|
+
*/
|
|
1706
|
+
"border-color-e": [{
|
|
1707
|
+
"border-e": [borderColor]
|
|
1708
|
+
}],
|
|
1709
|
+
/**
|
|
1710
|
+
* Border Color Top
|
|
1711
|
+
* @see https://tailwindcss.com/docs/border-color
|
|
1712
|
+
*/
|
|
1713
|
+
"border-color-t": [{
|
|
1714
|
+
"border-t": [borderColor]
|
|
1715
|
+
}],
|
|
1716
|
+
/**
|
|
1717
|
+
* Border Color Right
|
|
1718
|
+
* @see https://tailwindcss.com/docs/border-color
|
|
1719
|
+
*/
|
|
1720
|
+
"border-color-r": [{
|
|
1721
|
+
"border-r": [borderColor]
|
|
1722
|
+
}],
|
|
1723
|
+
/**
|
|
1724
|
+
* Border Color Bottom
|
|
1725
|
+
* @see https://tailwindcss.com/docs/border-color
|
|
1726
|
+
*/
|
|
1727
|
+
"border-color-b": [{
|
|
1728
|
+
"border-b": [borderColor]
|
|
1729
|
+
}],
|
|
1730
|
+
/**
|
|
1731
|
+
* Border Color Left
|
|
1732
|
+
* @see https://tailwindcss.com/docs/border-color
|
|
1733
|
+
*/
|
|
1734
|
+
"border-color-l": [{
|
|
1735
|
+
"border-l": [borderColor]
|
|
1736
|
+
}],
|
|
1737
|
+
/**
|
|
1738
|
+
* Divide Color
|
|
1739
|
+
* @see https://tailwindcss.com/docs/divide-color
|
|
1740
|
+
*/
|
|
1741
|
+
"divide-color": [{
|
|
1742
|
+
divide: [borderColor]
|
|
1743
|
+
}],
|
|
1744
|
+
/**
|
|
1745
|
+
* Outline Style
|
|
1746
|
+
* @see https://tailwindcss.com/docs/outline-style
|
|
1747
|
+
*/
|
|
1748
|
+
"outline-style": [{
|
|
1749
|
+
outline: ["", ...getLineStyles()]
|
|
1750
|
+
}],
|
|
1751
|
+
/**
|
|
1752
|
+
* Outline Offset
|
|
1753
|
+
* @see https://tailwindcss.com/docs/outline-offset
|
|
1754
|
+
*/
|
|
1755
|
+
"outline-offset": [{
|
|
1756
|
+
"outline-offset": [isLength, isArbitraryValue]
|
|
1757
|
+
}],
|
|
1758
|
+
/**
|
|
1759
|
+
* Outline Width
|
|
1760
|
+
* @see https://tailwindcss.com/docs/outline-width
|
|
1761
|
+
*/
|
|
1762
|
+
"outline-w": [{
|
|
1763
|
+
outline: [isLength, isArbitraryLength]
|
|
1764
|
+
}],
|
|
1765
|
+
/**
|
|
1766
|
+
* Outline Color
|
|
1767
|
+
* @see https://tailwindcss.com/docs/outline-color
|
|
1768
|
+
*/
|
|
1769
|
+
"outline-color": [{
|
|
1770
|
+
outline: [colors]
|
|
1771
|
+
}],
|
|
1772
|
+
/**
|
|
1773
|
+
* Ring Width
|
|
1774
|
+
* @see https://tailwindcss.com/docs/ring-width
|
|
1775
|
+
*/
|
|
1776
|
+
"ring-w": [{
|
|
1777
|
+
ring: getLengthWithEmptyAndArbitrary()
|
|
1778
|
+
}],
|
|
1779
|
+
/**
|
|
1780
|
+
* Ring Width Inset
|
|
1781
|
+
* @see https://tailwindcss.com/docs/ring-width
|
|
1782
|
+
*/
|
|
1783
|
+
"ring-w-inset": ["ring-inset"],
|
|
1784
|
+
/**
|
|
1785
|
+
* Ring Color
|
|
1786
|
+
* @see https://tailwindcss.com/docs/ring-color
|
|
1787
|
+
*/
|
|
1788
|
+
"ring-color": [{
|
|
1789
|
+
ring: [colors]
|
|
1790
|
+
}],
|
|
1791
|
+
/**
|
|
1792
|
+
* Ring Opacity
|
|
1793
|
+
* @see https://tailwindcss.com/docs/ring-opacity
|
|
1794
|
+
*/
|
|
1795
|
+
"ring-opacity": [{
|
|
1796
|
+
"ring-opacity": [opacity]
|
|
1797
|
+
}],
|
|
1798
|
+
/**
|
|
1799
|
+
* Ring Offset Width
|
|
1800
|
+
* @see https://tailwindcss.com/docs/ring-offset-width
|
|
1801
|
+
*/
|
|
1802
|
+
"ring-offset-w": [{
|
|
1803
|
+
"ring-offset": [isLength, isArbitraryLength]
|
|
1804
|
+
}],
|
|
1805
|
+
/**
|
|
1806
|
+
* Ring Offset Color
|
|
1807
|
+
* @see https://tailwindcss.com/docs/ring-offset-color
|
|
1808
|
+
*/
|
|
1809
|
+
"ring-offset-color": [{
|
|
1810
|
+
"ring-offset": [colors]
|
|
1811
|
+
}],
|
|
1812
|
+
// Effects
|
|
1813
|
+
/**
|
|
1814
|
+
* Box Shadow
|
|
1815
|
+
* @see https://tailwindcss.com/docs/box-shadow
|
|
1816
|
+
*/
|
|
1817
|
+
shadow: [{
|
|
1818
|
+
shadow: ["", "inner", "none", isTshirtSize, isArbitraryShadow]
|
|
1819
|
+
}],
|
|
1820
|
+
/**
|
|
1821
|
+
* Box Shadow Color
|
|
1822
|
+
* @see https://tailwindcss.com/docs/box-shadow-color
|
|
1823
|
+
*/
|
|
1824
|
+
"shadow-color": [{
|
|
1825
|
+
shadow: [isAny]
|
|
1826
|
+
}],
|
|
1827
|
+
/**
|
|
1828
|
+
* Opacity
|
|
1829
|
+
* @see https://tailwindcss.com/docs/opacity
|
|
1830
|
+
*/
|
|
1831
|
+
opacity: [{
|
|
1832
|
+
opacity: [opacity]
|
|
1833
|
+
}],
|
|
1834
|
+
/**
|
|
1835
|
+
* Mix Blend Mode
|
|
1836
|
+
* @see https://tailwindcss.com/docs/mix-blend-mode
|
|
1837
|
+
*/
|
|
1838
|
+
"mix-blend": [{
|
|
1839
|
+
"mix-blend": [...getBlendModes(), "plus-lighter", "plus-darker"]
|
|
1840
|
+
}],
|
|
1841
|
+
/**
|
|
1842
|
+
* Background Blend Mode
|
|
1843
|
+
* @see https://tailwindcss.com/docs/background-blend-mode
|
|
1844
|
+
*/
|
|
1845
|
+
"bg-blend": [{
|
|
1846
|
+
"bg-blend": getBlendModes()
|
|
1847
|
+
}],
|
|
1848
|
+
// Filters
|
|
1849
|
+
/**
|
|
1850
|
+
* Filter
|
|
1851
|
+
* @deprecated since Tailwind CSS v3.0.0
|
|
1852
|
+
* @see https://tailwindcss.com/docs/filter
|
|
1853
|
+
*/
|
|
1854
|
+
filter: [{
|
|
1855
|
+
filter: ["", "none"]
|
|
1856
|
+
}],
|
|
1857
|
+
/**
|
|
1858
|
+
* Blur
|
|
1859
|
+
* @see https://tailwindcss.com/docs/blur
|
|
1860
|
+
*/
|
|
1861
|
+
blur: [{
|
|
1862
|
+
blur: [blur]
|
|
1863
|
+
}],
|
|
1864
|
+
/**
|
|
1865
|
+
* Brightness
|
|
1866
|
+
* @see https://tailwindcss.com/docs/brightness
|
|
1867
|
+
*/
|
|
1868
|
+
brightness: [{
|
|
1869
|
+
brightness: [brightness]
|
|
1870
|
+
}],
|
|
1871
|
+
/**
|
|
1872
|
+
* Contrast
|
|
1873
|
+
* @see https://tailwindcss.com/docs/contrast
|
|
1874
|
+
*/
|
|
1875
|
+
contrast: [{
|
|
1876
|
+
contrast: [contrast]
|
|
1877
|
+
}],
|
|
1878
|
+
/**
|
|
1879
|
+
* Drop Shadow
|
|
1880
|
+
* @see https://tailwindcss.com/docs/drop-shadow
|
|
1881
|
+
*/
|
|
1882
|
+
"drop-shadow": [{
|
|
1883
|
+
"drop-shadow": ["", "none", isTshirtSize, isArbitraryValue]
|
|
1884
|
+
}],
|
|
1885
|
+
/**
|
|
1886
|
+
* Grayscale
|
|
1887
|
+
* @see https://tailwindcss.com/docs/grayscale
|
|
1888
|
+
*/
|
|
1889
|
+
grayscale: [{
|
|
1890
|
+
grayscale: [grayscale]
|
|
1891
|
+
}],
|
|
1892
|
+
/**
|
|
1893
|
+
* Hue Rotate
|
|
1894
|
+
* @see https://tailwindcss.com/docs/hue-rotate
|
|
1895
|
+
*/
|
|
1896
|
+
"hue-rotate": [{
|
|
1897
|
+
"hue-rotate": [hueRotate]
|
|
1898
|
+
}],
|
|
1899
|
+
/**
|
|
1900
|
+
* Invert
|
|
1901
|
+
* @see https://tailwindcss.com/docs/invert
|
|
1902
|
+
*/
|
|
1903
|
+
invert: [{
|
|
1904
|
+
invert: [invert]
|
|
1905
|
+
}],
|
|
1906
|
+
/**
|
|
1907
|
+
* Saturate
|
|
1908
|
+
* @see https://tailwindcss.com/docs/saturate
|
|
1909
|
+
*/
|
|
1910
|
+
saturate: [{
|
|
1911
|
+
saturate: [saturate]
|
|
1912
|
+
}],
|
|
1913
|
+
/**
|
|
1914
|
+
* Sepia
|
|
1915
|
+
* @see https://tailwindcss.com/docs/sepia
|
|
1916
|
+
*/
|
|
1917
|
+
sepia: [{
|
|
1918
|
+
sepia: [sepia]
|
|
1919
|
+
}],
|
|
1920
|
+
/**
|
|
1921
|
+
* Backdrop Filter
|
|
1922
|
+
* @deprecated since Tailwind CSS v3.0.0
|
|
1923
|
+
* @see https://tailwindcss.com/docs/backdrop-filter
|
|
1924
|
+
*/
|
|
1925
|
+
"backdrop-filter": [{
|
|
1926
|
+
"backdrop-filter": ["", "none"]
|
|
1927
|
+
}],
|
|
1928
|
+
/**
|
|
1929
|
+
* Backdrop Blur
|
|
1930
|
+
* @see https://tailwindcss.com/docs/backdrop-blur
|
|
1931
|
+
*/
|
|
1932
|
+
"backdrop-blur": [{
|
|
1933
|
+
"backdrop-blur": [blur]
|
|
1934
|
+
}],
|
|
1935
|
+
/**
|
|
1936
|
+
* Backdrop Brightness
|
|
1937
|
+
* @see https://tailwindcss.com/docs/backdrop-brightness
|
|
1938
|
+
*/
|
|
1939
|
+
"backdrop-brightness": [{
|
|
1940
|
+
"backdrop-brightness": [brightness]
|
|
1941
|
+
}],
|
|
1942
|
+
/**
|
|
1943
|
+
* Backdrop Contrast
|
|
1944
|
+
* @see https://tailwindcss.com/docs/backdrop-contrast
|
|
1945
|
+
*/
|
|
1946
|
+
"backdrop-contrast": [{
|
|
1947
|
+
"backdrop-contrast": [contrast]
|
|
1948
|
+
}],
|
|
1949
|
+
/**
|
|
1950
|
+
* Backdrop Grayscale
|
|
1951
|
+
* @see https://tailwindcss.com/docs/backdrop-grayscale
|
|
1952
|
+
*/
|
|
1953
|
+
"backdrop-grayscale": [{
|
|
1954
|
+
"backdrop-grayscale": [grayscale]
|
|
1955
|
+
}],
|
|
1956
|
+
/**
|
|
1957
|
+
* Backdrop Hue Rotate
|
|
1958
|
+
* @see https://tailwindcss.com/docs/backdrop-hue-rotate
|
|
1959
|
+
*/
|
|
1960
|
+
"backdrop-hue-rotate": [{
|
|
1961
|
+
"backdrop-hue-rotate": [hueRotate]
|
|
1962
|
+
}],
|
|
1963
|
+
/**
|
|
1964
|
+
* Backdrop Invert
|
|
1965
|
+
* @see https://tailwindcss.com/docs/backdrop-invert
|
|
1966
|
+
*/
|
|
1967
|
+
"backdrop-invert": [{
|
|
1968
|
+
"backdrop-invert": [invert]
|
|
1969
|
+
}],
|
|
1970
|
+
/**
|
|
1971
|
+
* Backdrop Opacity
|
|
1972
|
+
* @see https://tailwindcss.com/docs/backdrop-opacity
|
|
1973
|
+
*/
|
|
1974
|
+
"backdrop-opacity": [{
|
|
1975
|
+
"backdrop-opacity": [opacity]
|
|
1976
|
+
}],
|
|
1977
|
+
/**
|
|
1978
|
+
* Backdrop Saturate
|
|
1979
|
+
* @see https://tailwindcss.com/docs/backdrop-saturate
|
|
1980
|
+
*/
|
|
1981
|
+
"backdrop-saturate": [{
|
|
1982
|
+
"backdrop-saturate": [saturate]
|
|
1983
|
+
}],
|
|
1984
|
+
/**
|
|
1985
|
+
* Backdrop Sepia
|
|
1986
|
+
* @see https://tailwindcss.com/docs/backdrop-sepia
|
|
1987
|
+
*/
|
|
1988
|
+
"backdrop-sepia": [{
|
|
1989
|
+
"backdrop-sepia": [sepia]
|
|
1990
|
+
}],
|
|
1991
|
+
// Tables
|
|
1992
|
+
/**
|
|
1993
|
+
* Border Collapse
|
|
1994
|
+
* @see https://tailwindcss.com/docs/border-collapse
|
|
1995
|
+
*/
|
|
1996
|
+
"border-collapse": [{
|
|
1997
|
+
border: ["collapse", "separate"]
|
|
1998
|
+
}],
|
|
1999
|
+
/**
|
|
2000
|
+
* Border Spacing
|
|
2001
|
+
* @see https://tailwindcss.com/docs/border-spacing
|
|
2002
|
+
*/
|
|
2003
|
+
"border-spacing": [{
|
|
2004
|
+
"border-spacing": [borderSpacing]
|
|
2005
|
+
}],
|
|
2006
|
+
/**
|
|
2007
|
+
* Border Spacing X
|
|
2008
|
+
* @see https://tailwindcss.com/docs/border-spacing
|
|
2009
|
+
*/
|
|
2010
|
+
"border-spacing-x": [{
|
|
2011
|
+
"border-spacing-x": [borderSpacing]
|
|
2012
|
+
}],
|
|
2013
|
+
/**
|
|
2014
|
+
* Border Spacing Y
|
|
2015
|
+
* @see https://tailwindcss.com/docs/border-spacing
|
|
2016
|
+
*/
|
|
2017
|
+
"border-spacing-y": [{
|
|
2018
|
+
"border-spacing-y": [borderSpacing]
|
|
2019
|
+
}],
|
|
2020
|
+
/**
|
|
2021
|
+
* Table Layout
|
|
2022
|
+
* @see https://tailwindcss.com/docs/table-layout
|
|
2023
|
+
*/
|
|
2024
|
+
"table-layout": [{
|
|
2025
|
+
table: ["auto", "fixed"]
|
|
2026
|
+
}],
|
|
2027
|
+
/**
|
|
2028
|
+
* Caption Side
|
|
2029
|
+
* @see https://tailwindcss.com/docs/caption-side
|
|
2030
|
+
*/
|
|
2031
|
+
caption: [{
|
|
2032
|
+
caption: ["top", "bottom"]
|
|
2033
|
+
}],
|
|
2034
|
+
// Transitions and Animation
|
|
2035
|
+
/**
|
|
2036
|
+
* Tranisition Property
|
|
2037
|
+
* @see https://tailwindcss.com/docs/transition-property
|
|
2038
|
+
*/
|
|
2039
|
+
transition: [{
|
|
2040
|
+
transition: ["none", "all", "", "colors", "opacity", "shadow", "transform", isArbitraryValue]
|
|
2041
|
+
}],
|
|
2042
|
+
/**
|
|
2043
|
+
* Transition Duration
|
|
2044
|
+
* @see https://tailwindcss.com/docs/transition-duration
|
|
2045
|
+
*/
|
|
2046
|
+
duration: [{
|
|
2047
|
+
duration: getNumberAndArbitrary()
|
|
2048
|
+
}],
|
|
2049
|
+
/**
|
|
2050
|
+
* Transition Timing Function
|
|
2051
|
+
* @see https://tailwindcss.com/docs/transition-timing-function
|
|
2052
|
+
*/
|
|
2053
|
+
ease: [{
|
|
2054
|
+
ease: ["linear", "in", "out", "in-out", isArbitraryValue]
|
|
2055
|
+
}],
|
|
2056
|
+
/**
|
|
2057
|
+
* Transition Delay
|
|
2058
|
+
* @see https://tailwindcss.com/docs/transition-delay
|
|
2059
|
+
*/
|
|
2060
|
+
delay: [{
|
|
2061
|
+
delay: getNumberAndArbitrary()
|
|
2062
|
+
}],
|
|
2063
|
+
/**
|
|
2064
|
+
* Animation
|
|
2065
|
+
* @see https://tailwindcss.com/docs/animation
|
|
2066
|
+
*/
|
|
2067
|
+
animate: [{
|
|
2068
|
+
animate: ["none", "spin", "ping", "pulse", "bounce", isArbitraryValue]
|
|
2069
|
+
}],
|
|
2070
|
+
// Transforms
|
|
2071
|
+
/**
|
|
2072
|
+
* Transform
|
|
2073
|
+
* @see https://tailwindcss.com/docs/transform
|
|
2074
|
+
*/
|
|
2075
|
+
transform: [{
|
|
2076
|
+
transform: ["", "gpu", "none"]
|
|
2077
|
+
}],
|
|
2078
|
+
/**
|
|
2079
|
+
* Scale
|
|
2080
|
+
* @see https://tailwindcss.com/docs/scale
|
|
2081
|
+
*/
|
|
2082
|
+
scale: [{
|
|
2083
|
+
scale: [scale]
|
|
2084
|
+
}],
|
|
2085
|
+
/**
|
|
2086
|
+
* Scale X
|
|
2087
|
+
* @see https://tailwindcss.com/docs/scale
|
|
2088
|
+
*/
|
|
2089
|
+
"scale-x": [{
|
|
2090
|
+
"scale-x": [scale]
|
|
2091
|
+
}],
|
|
2092
|
+
/**
|
|
2093
|
+
* Scale Y
|
|
2094
|
+
* @see https://tailwindcss.com/docs/scale
|
|
2095
|
+
*/
|
|
2096
|
+
"scale-y": [{
|
|
2097
|
+
"scale-y": [scale]
|
|
2098
|
+
}],
|
|
2099
|
+
/**
|
|
2100
|
+
* Rotate
|
|
2101
|
+
* @see https://tailwindcss.com/docs/rotate
|
|
2102
|
+
*/
|
|
2103
|
+
rotate: [{
|
|
2104
|
+
rotate: [isInteger, isArbitraryValue]
|
|
2105
|
+
}],
|
|
2106
|
+
/**
|
|
2107
|
+
* Translate X
|
|
2108
|
+
* @see https://tailwindcss.com/docs/translate
|
|
2109
|
+
*/
|
|
2110
|
+
"translate-x": [{
|
|
2111
|
+
"translate-x": [translate]
|
|
2112
|
+
}],
|
|
2113
|
+
/**
|
|
2114
|
+
* Translate Y
|
|
2115
|
+
* @see https://tailwindcss.com/docs/translate
|
|
2116
|
+
*/
|
|
2117
|
+
"translate-y": [{
|
|
2118
|
+
"translate-y": [translate]
|
|
2119
|
+
}],
|
|
2120
|
+
/**
|
|
2121
|
+
* Skew X
|
|
2122
|
+
* @see https://tailwindcss.com/docs/skew
|
|
2123
|
+
*/
|
|
2124
|
+
"skew-x": [{
|
|
2125
|
+
"skew-x": [skew]
|
|
2126
|
+
}],
|
|
2127
|
+
/**
|
|
2128
|
+
* Skew Y
|
|
2129
|
+
* @see https://tailwindcss.com/docs/skew
|
|
2130
|
+
*/
|
|
2131
|
+
"skew-y": [{
|
|
2132
|
+
"skew-y": [skew]
|
|
2133
|
+
}],
|
|
2134
|
+
/**
|
|
2135
|
+
* Transform Origin
|
|
2136
|
+
* @see https://tailwindcss.com/docs/transform-origin
|
|
2137
|
+
*/
|
|
2138
|
+
"transform-origin": [{
|
|
2139
|
+
origin: ["center", "top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left", "top-left", isArbitraryValue]
|
|
2140
|
+
}],
|
|
2141
|
+
// Interactivity
|
|
2142
|
+
/**
|
|
2143
|
+
* Accent Color
|
|
2144
|
+
* @see https://tailwindcss.com/docs/accent-color
|
|
2145
|
+
*/
|
|
2146
|
+
accent: [{
|
|
2147
|
+
accent: ["auto", colors]
|
|
2148
|
+
}],
|
|
2149
|
+
/**
|
|
2150
|
+
* Appearance
|
|
2151
|
+
* @see https://tailwindcss.com/docs/appearance
|
|
2152
|
+
*/
|
|
2153
|
+
appearance: [{
|
|
2154
|
+
appearance: ["none", "auto"]
|
|
2155
|
+
}],
|
|
2156
|
+
/**
|
|
2157
|
+
* Cursor
|
|
2158
|
+
* @see https://tailwindcss.com/docs/cursor
|
|
2159
|
+
*/
|
|
2160
|
+
cursor: [{
|
|
2161
|
+
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", isArbitraryValue]
|
|
2162
|
+
}],
|
|
2163
|
+
/**
|
|
2164
|
+
* Caret Color
|
|
2165
|
+
* @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities
|
|
2166
|
+
*/
|
|
2167
|
+
"caret-color": [{
|
|
2168
|
+
caret: [colors]
|
|
2169
|
+
}],
|
|
2170
|
+
/**
|
|
2171
|
+
* Pointer Events
|
|
2172
|
+
* @see https://tailwindcss.com/docs/pointer-events
|
|
2173
|
+
*/
|
|
2174
|
+
"pointer-events": [{
|
|
2175
|
+
"pointer-events": ["none", "auto"]
|
|
2176
|
+
}],
|
|
2177
|
+
/**
|
|
2178
|
+
* Resize
|
|
2179
|
+
* @see https://tailwindcss.com/docs/resize
|
|
2180
|
+
*/
|
|
2181
|
+
resize: [{
|
|
2182
|
+
resize: ["none", "y", "x", ""]
|
|
2183
|
+
}],
|
|
2184
|
+
/**
|
|
2185
|
+
* Scroll Behavior
|
|
2186
|
+
* @see https://tailwindcss.com/docs/scroll-behavior
|
|
2187
|
+
*/
|
|
2188
|
+
"scroll-behavior": [{
|
|
2189
|
+
scroll: ["auto", "smooth"]
|
|
2190
|
+
}],
|
|
2191
|
+
/**
|
|
2192
|
+
* Scroll Margin
|
|
2193
|
+
* @see https://tailwindcss.com/docs/scroll-margin
|
|
2194
|
+
*/
|
|
2195
|
+
"scroll-m": [{
|
|
2196
|
+
"scroll-m": getSpacingWithArbitrary()
|
|
2197
|
+
}],
|
|
2198
|
+
/**
|
|
2199
|
+
* Scroll Margin X
|
|
2200
|
+
* @see https://tailwindcss.com/docs/scroll-margin
|
|
2201
|
+
*/
|
|
2202
|
+
"scroll-mx": [{
|
|
2203
|
+
"scroll-mx": getSpacingWithArbitrary()
|
|
2204
|
+
}],
|
|
2205
|
+
/**
|
|
2206
|
+
* Scroll Margin Y
|
|
2207
|
+
* @see https://tailwindcss.com/docs/scroll-margin
|
|
2208
|
+
*/
|
|
2209
|
+
"scroll-my": [{
|
|
2210
|
+
"scroll-my": getSpacingWithArbitrary()
|
|
2211
|
+
}],
|
|
2212
|
+
/**
|
|
2213
|
+
* Scroll Margin Start
|
|
2214
|
+
* @see https://tailwindcss.com/docs/scroll-margin
|
|
2215
|
+
*/
|
|
2216
|
+
"scroll-ms": [{
|
|
2217
|
+
"scroll-ms": getSpacingWithArbitrary()
|
|
2218
|
+
}],
|
|
2219
|
+
/**
|
|
2220
|
+
* Scroll Margin End
|
|
2221
|
+
* @see https://tailwindcss.com/docs/scroll-margin
|
|
2222
|
+
*/
|
|
2223
|
+
"scroll-me": [{
|
|
2224
|
+
"scroll-me": getSpacingWithArbitrary()
|
|
2225
|
+
}],
|
|
2226
|
+
/**
|
|
2227
|
+
* Scroll Margin Top
|
|
2228
|
+
* @see https://tailwindcss.com/docs/scroll-margin
|
|
2229
|
+
*/
|
|
2230
|
+
"scroll-mt": [{
|
|
2231
|
+
"scroll-mt": getSpacingWithArbitrary()
|
|
2232
|
+
}],
|
|
2233
|
+
/**
|
|
2234
|
+
* Scroll Margin Right
|
|
2235
|
+
* @see https://tailwindcss.com/docs/scroll-margin
|
|
2236
|
+
*/
|
|
2237
|
+
"scroll-mr": [{
|
|
2238
|
+
"scroll-mr": getSpacingWithArbitrary()
|
|
2239
|
+
}],
|
|
2240
|
+
/**
|
|
2241
|
+
* Scroll Margin Bottom
|
|
2242
|
+
* @see https://tailwindcss.com/docs/scroll-margin
|
|
2243
|
+
*/
|
|
2244
|
+
"scroll-mb": [{
|
|
2245
|
+
"scroll-mb": getSpacingWithArbitrary()
|
|
2246
|
+
}],
|
|
2247
|
+
/**
|
|
2248
|
+
* Scroll Margin Left
|
|
2249
|
+
* @see https://tailwindcss.com/docs/scroll-margin
|
|
2250
|
+
*/
|
|
2251
|
+
"scroll-ml": [{
|
|
2252
|
+
"scroll-ml": getSpacingWithArbitrary()
|
|
2253
|
+
}],
|
|
2254
|
+
/**
|
|
2255
|
+
* Scroll Padding
|
|
2256
|
+
* @see https://tailwindcss.com/docs/scroll-padding
|
|
2257
|
+
*/
|
|
2258
|
+
"scroll-p": [{
|
|
2259
|
+
"scroll-p": getSpacingWithArbitrary()
|
|
2260
|
+
}],
|
|
2261
|
+
/**
|
|
2262
|
+
* Scroll Padding X
|
|
2263
|
+
* @see https://tailwindcss.com/docs/scroll-padding
|
|
2264
|
+
*/
|
|
2265
|
+
"scroll-px": [{
|
|
2266
|
+
"scroll-px": getSpacingWithArbitrary()
|
|
2267
|
+
}],
|
|
2268
|
+
/**
|
|
2269
|
+
* Scroll Padding Y
|
|
2270
|
+
* @see https://tailwindcss.com/docs/scroll-padding
|
|
2271
|
+
*/
|
|
2272
|
+
"scroll-py": [{
|
|
2273
|
+
"scroll-py": getSpacingWithArbitrary()
|
|
2274
|
+
}],
|
|
2275
|
+
/**
|
|
2276
|
+
* Scroll Padding Start
|
|
2277
|
+
* @see https://tailwindcss.com/docs/scroll-padding
|
|
2278
|
+
*/
|
|
2279
|
+
"scroll-ps": [{
|
|
2280
|
+
"scroll-ps": getSpacingWithArbitrary()
|
|
2281
|
+
}],
|
|
2282
|
+
/**
|
|
2283
|
+
* Scroll Padding End
|
|
2284
|
+
* @see https://tailwindcss.com/docs/scroll-padding
|
|
2285
|
+
*/
|
|
2286
|
+
"scroll-pe": [{
|
|
2287
|
+
"scroll-pe": getSpacingWithArbitrary()
|
|
2288
|
+
}],
|
|
2289
|
+
/**
|
|
2290
|
+
* Scroll Padding Top
|
|
2291
|
+
* @see https://tailwindcss.com/docs/scroll-padding
|
|
2292
|
+
*/
|
|
2293
|
+
"scroll-pt": [{
|
|
2294
|
+
"scroll-pt": getSpacingWithArbitrary()
|
|
2295
|
+
}],
|
|
2296
|
+
/**
|
|
2297
|
+
* Scroll Padding Right
|
|
2298
|
+
* @see https://tailwindcss.com/docs/scroll-padding
|
|
2299
|
+
*/
|
|
2300
|
+
"scroll-pr": [{
|
|
2301
|
+
"scroll-pr": getSpacingWithArbitrary()
|
|
2302
|
+
}],
|
|
2303
|
+
/**
|
|
2304
|
+
* Scroll Padding Bottom
|
|
2305
|
+
* @see https://tailwindcss.com/docs/scroll-padding
|
|
2306
|
+
*/
|
|
2307
|
+
"scroll-pb": [{
|
|
2308
|
+
"scroll-pb": getSpacingWithArbitrary()
|
|
2309
|
+
}],
|
|
2310
|
+
/**
|
|
2311
|
+
* Scroll Padding Left
|
|
2312
|
+
* @see https://tailwindcss.com/docs/scroll-padding
|
|
2313
|
+
*/
|
|
2314
|
+
"scroll-pl": [{
|
|
2315
|
+
"scroll-pl": getSpacingWithArbitrary()
|
|
2316
|
+
}],
|
|
2317
|
+
/**
|
|
2318
|
+
* Scroll Snap Align
|
|
2319
|
+
* @see https://tailwindcss.com/docs/scroll-snap-align
|
|
2320
|
+
*/
|
|
2321
|
+
"snap-align": [{
|
|
2322
|
+
snap: ["start", "end", "center", "align-none"]
|
|
2323
|
+
}],
|
|
2324
|
+
/**
|
|
2325
|
+
* Scroll Snap Stop
|
|
2326
|
+
* @see https://tailwindcss.com/docs/scroll-snap-stop
|
|
2327
|
+
*/
|
|
2328
|
+
"snap-stop": [{
|
|
2329
|
+
snap: ["normal", "always"]
|
|
2330
|
+
}],
|
|
2331
|
+
/**
|
|
2332
|
+
* Scroll Snap Type
|
|
2333
|
+
* @see https://tailwindcss.com/docs/scroll-snap-type
|
|
2334
|
+
*/
|
|
2335
|
+
"snap-type": [{
|
|
2336
|
+
snap: ["none", "x", "y", "both"]
|
|
2337
|
+
}],
|
|
2338
|
+
/**
|
|
2339
|
+
* Scroll Snap Type Strictness
|
|
2340
|
+
* @see https://tailwindcss.com/docs/scroll-snap-type
|
|
2341
|
+
*/
|
|
2342
|
+
"snap-strictness": [{
|
|
2343
|
+
snap: ["mandatory", "proximity"]
|
|
2344
|
+
}],
|
|
2345
|
+
/**
|
|
2346
|
+
* Touch Action
|
|
2347
|
+
* @see https://tailwindcss.com/docs/touch-action
|
|
2348
|
+
*/
|
|
2349
|
+
touch: [{
|
|
2350
|
+
touch: ["auto", "none", "manipulation"]
|
|
2351
|
+
}],
|
|
2352
|
+
/**
|
|
2353
|
+
* Touch Action X
|
|
2354
|
+
* @see https://tailwindcss.com/docs/touch-action
|
|
2355
|
+
*/
|
|
2356
|
+
"touch-x": [{
|
|
2357
|
+
"touch-pan": ["x", "left", "right"]
|
|
2358
|
+
}],
|
|
2359
|
+
/**
|
|
2360
|
+
* Touch Action Y
|
|
2361
|
+
* @see https://tailwindcss.com/docs/touch-action
|
|
2362
|
+
*/
|
|
2363
|
+
"touch-y": [{
|
|
2364
|
+
"touch-pan": ["y", "up", "down"]
|
|
2365
|
+
}],
|
|
2366
|
+
/**
|
|
2367
|
+
* Touch Action Pinch Zoom
|
|
2368
|
+
* @see https://tailwindcss.com/docs/touch-action
|
|
2369
|
+
*/
|
|
2370
|
+
"touch-pz": ["touch-pinch-zoom"],
|
|
2371
|
+
/**
|
|
2372
|
+
* User Select
|
|
2373
|
+
* @see https://tailwindcss.com/docs/user-select
|
|
2374
|
+
*/
|
|
2375
|
+
select: [{
|
|
2376
|
+
select: ["none", "text", "all", "auto"]
|
|
2377
|
+
}],
|
|
2378
|
+
/**
|
|
2379
|
+
* Will Change
|
|
2380
|
+
* @see https://tailwindcss.com/docs/will-change
|
|
2381
|
+
*/
|
|
2382
|
+
"will-change": [{
|
|
2383
|
+
"will-change": ["auto", "scroll", "contents", "transform", isArbitraryValue]
|
|
2384
|
+
}],
|
|
2385
|
+
// SVG
|
|
2386
|
+
/**
|
|
2387
|
+
* Fill
|
|
2388
|
+
* @see https://tailwindcss.com/docs/fill
|
|
2389
|
+
*/
|
|
2390
|
+
fill: [{
|
|
2391
|
+
fill: [colors, "none"]
|
|
2392
|
+
}],
|
|
2393
|
+
/**
|
|
2394
|
+
* Stroke Width
|
|
2395
|
+
* @see https://tailwindcss.com/docs/stroke-width
|
|
2396
|
+
*/
|
|
2397
|
+
"stroke-w": [{
|
|
2398
|
+
stroke: [isLength, isArbitraryLength, isArbitraryNumber]
|
|
2399
|
+
}],
|
|
2400
|
+
/**
|
|
2401
|
+
* Stroke
|
|
2402
|
+
* @see https://tailwindcss.com/docs/stroke
|
|
2403
|
+
*/
|
|
2404
|
+
stroke: [{
|
|
2405
|
+
stroke: [colors, "none"]
|
|
2406
|
+
}],
|
|
2407
|
+
// Accessibility
|
|
2408
|
+
/**
|
|
2409
|
+
* Screen Readers
|
|
2410
|
+
* @see https://tailwindcss.com/docs/screen-readers
|
|
2411
|
+
*/
|
|
2412
|
+
sr: ["sr-only", "not-sr-only"],
|
|
2413
|
+
/**
|
|
2414
|
+
* Forced Color Adjust
|
|
2415
|
+
* @see https://tailwindcss.com/docs/forced-color-adjust
|
|
2416
|
+
*/
|
|
2417
|
+
"forced-color-adjust": [{
|
|
2418
|
+
"forced-color-adjust": ["auto", "none"]
|
|
2419
|
+
}]
|
|
2420
|
+
},
|
|
2421
|
+
conflictingClassGroups: {
|
|
2422
|
+
overflow: ["overflow-x", "overflow-y"],
|
|
2423
|
+
overscroll: ["overscroll-x", "overscroll-y"],
|
|
2424
|
+
inset: ["inset-x", "inset-y", "start", "end", "top", "right", "bottom", "left"],
|
|
2425
|
+
"inset-x": ["right", "left"],
|
|
2426
|
+
"inset-y": ["top", "bottom"],
|
|
2427
|
+
flex: ["basis", "grow", "shrink"],
|
|
2428
|
+
gap: ["gap-x", "gap-y"],
|
|
2429
|
+
p: ["px", "py", "ps", "pe", "pt", "pr", "pb", "pl"],
|
|
2430
|
+
px: ["pr", "pl"],
|
|
2431
|
+
py: ["pt", "pb"],
|
|
2432
|
+
m: ["mx", "my", "ms", "me", "mt", "mr", "mb", "ml"],
|
|
2433
|
+
mx: ["mr", "ml"],
|
|
2434
|
+
my: ["mt", "mb"],
|
|
2435
|
+
size: ["w", "h"],
|
|
2436
|
+
"font-size": ["leading"],
|
|
2437
|
+
"fvn-normal": ["fvn-ordinal", "fvn-slashed-zero", "fvn-figure", "fvn-spacing", "fvn-fraction"],
|
|
2438
|
+
"fvn-ordinal": ["fvn-normal"],
|
|
2439
|
+
"fvn-slashed-zero": ["fvn-normal"],
|
|
2440
|
+
"fvn-figure": ["fvn-normal"],
|
|
2441
|
+
"fvn-spacing": ["fvn-normal"],
|
|
2442
|
+
"fvn-fraction": ["fvn-normal"],
|
|
2443
|
+
"line-clamp": ["display", "overflow"],
|
|
2444
|
+
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"],
|
|
2445
|
+
"rounded-s": ["rounded-ss", "rounded-es"],
|
|
2446
|
+
"rounded-e": ["rounded-se", "rounded-ee"],
|
|
2447
|
+
"rounded-t": ["rounded-tl", "rounded-tr"],
|
|
2448
|
+
"rounded-r": ["rounded-tr", "rounded-br"],
|
|
2449
|
+
"rounded-b": ["rounded-br", "rounded-bl"],
|
|
2450
|
+
"rounded-l": ["rounded-tl", "rounded-bl"],
|
|
2451
|
+
"border-spacing": ["border-spacing-x", "border-spacing-y"],
|
|
2452
|
+
"border-w": ["border-w-s", "border-w-e", "border-w-t", "border-w-r", "border-w-b", "border-w-l"],
|
|
2453
|
+
"border-w-x": ["border-w-r", "border-w-l"],
|
|
2454
|
+
"border-w-y": ["border-w-t", "border-w-b"],
|
|
2455
|
+
"border-color": ["border-color-s", "border-color-e", "border-color-t", "border-color-r", "border-color-b", "border-color-l"],
|
|
2456
|
+
"border-color-x": ["border-color-r", "border-color-l"],
|
|
2457
|
+
"border-color-y": ["border-color-t", "border-color-b"],
|
|
2458
|
+
"scroll-m": ["scroll-mx", "scroll-my", "scroll-ms", "scroll-me", "scroll-mt", "scroll-mr", "scroll-mb", "scroll-ml"],
|
|
2459
|
+
"scroll-mx": ["scroll-mr", "scroll-ml"],
|
|
2460
|
+
"scroll-my": ["scroll-mt", "scroll-mb"],
|
|
2461
|
+
"scroll-p": ["scroll-px", "scroll-py", "scroll-ps", "scroll-pe", "scroll-pt", "scroll-pr", "scroll-pb", "scroll-pl"],
|
|
2462
|
+
"scroll-px": ["scroll-pr", "scroll-pl"],
|
|
2463
|
+
"scroll-py": ["scroll-pt", "scroll-pb"],
|
|
2464
|
+
touch: ["touch-x", "touch-y", "touch-pz"],
|
|
2465
|
+
"touch-x": ["touch"],
|
|
2466
|
+
"touch-y": ["touch"],
|
|
2467
|
+
"touch-pz": ["touch"]
|
|
2468
|
+
},
|
|
2469
|
+
conflictingClassGroupModifiers: {
|
|
2470
|
+
"font-size": ["leading"]
|
|
2471
|
+
}
|
|
2472
|
+
};
|
|
2473
|
+
};
|
|
2474
|
+
const twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
|
|
2475
|
+
const MessageCircleIcon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }) });
|
|
2476
|
+
const XIcon = ({ size = 20 }) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
2477
|
+
/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
|
|
2478
|
+
/* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
|
|
2479
|
+
] });
|
|
2480
|
+
const SendIcon = () => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
2481
|
+
/* @__PURE__ */ jsx("path", { d: "m22 2-7 20-4-9-9-4Z" }),
|
|
2482
|
+
/* @__PURE__ */ jsx("path", { d: "M22 2 11 13" })
|
|
2483
|
+
] });
|
|
2484
|
+
const SparklesIcon = () => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
2485
|
+
/* @__PURE__ */ jsx("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }),
|
|
2486
|
+
/* @__PURE__ */ jsx("path", { d: "M5 3v4" }),
|
|
2487
|
+
/* @__PURE__ */ jsx("path", { d: "M3 5h4" }),
|
|
2488
|
+
/* @__PURE__ */ jsx("path", { d: "M19 17v4" }),
|
|
2489
|
+
/* @__PURE__ */ jsx("path", { d: "M17 19h4" })
|
|
2490
|
+
] });
|
|
2491
|
+
const ThumbsUpIcon = ({ filled }) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: filled ? "currentColor" : "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
2492
|
+
/* @__PURE__ */ jsx("path", { d: "M7 10v12" }),
|
|
2493
|
+
/* @__PURE__ */ jsx("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" })
|
|
2494
|
+
] });
|
|
2495
|
+
const ThumbsDownIcon = ({ filled }) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: filled ? "currentColor" : "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
2496
|
+
/* @__PURE__ */ jsx("path", { d: "M17 14V2" }),
|
|
2497
|
+
/* @__PURE__ */ jsx("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z" })
|
|
2498
|
+
] });
|
|
2499
|
+
function cn(...inputs) {
|
|
2500
|
+
return twMerge(clsx(inputs));
|
|
2501
|
+
}
|
|
2502
|
+
function extractYouTubeId(url) {
|
|
2503
|
+
const patterns = [
|
|
2504
|
+
/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/,
|
|
2505
|
+
/youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/
|
|
2506
|
+
];
|
|
2507
|
+
for (const pattern of patterns) {
|
|
2508
|
+
const match = url.match(pattern);
|
|
2509
|
+
if (match) return match[1];
|
|
2510
|
+
}
|
|
2511
|
+
return null;
|
|
2512
|
+
}
|
|
2513
|
+
function YouTubeEmbed({ videoId }) {
|
|
2514
|
+
return /* @__PURE__ */ jsx("div", { className: "mt-2 rounded-lg overflow-hidden aspect-video", children: /* @__PURE__ */ jsx(
|
|
2515
|
+
"iframe",
|
|
2516
|
+
{
|
|
2517
|
+
width: "100%",
|
|
2518
|
+
height: "100%",
|
|
2519
|
+
src: `https://www.youtube.com/embed/${videoId}?rel=0`,
|
|
2520
|
+
title: "YouTube video",
|
|
2521
|
+
frameBorder: "0",
|
|
2522
|
+
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
|
|
2523
|
+
allowFullScreen: true,
|
|
2524
|
+
className: "w-full h-full"
|
|
2525
|
+
}
|
|
2526
|
+
) });
|
|
2527
|
+
}
|
|
2528
|
+
function MessageContent({ content, enableYouTube, isDark }) {
|
|
2529
|
+
const parts = useMemo(() => {
|
|
2530
|
+
if (!enableYouTube) return [{ type: "text", content }];
|
|
2531
|
+
const urlRegex = /(https?:\/\/[^\s]+)/g;
|
|
2532
|
+
const segments = [];
|
|
2533
|
+
let lastIndex = 0;
|
|
2534
|
+
let match;
|
|
2535
|
+
while ((match = urlRegex.exec(content)) !== null) {
|
|
2536
|
+
if (match.index > lastIndex) {
|
|
2537
|
+
segments.push({ type: "text", content: content.slice(lastIndex, match.index) });
|
|
2538
|
+
}
|
|
2539
|
+
const url = match[0];
|
|
2540
|
+
const videoId = extractYouTubeId(url);
|
|
2541
|
+
if (videoId) {
|
|
2542
|
+
segments.push({ type: "youtube", content: url, videoId });
|
|
2543
|
+
} else {
|
|
2544
|
+
segments.push({ type: "link", content: url });
|
|
2545
|
+
}
|
|
2546
|
+
lastIndex = match.index + url.length;
|
|
2547
|
+
}
|
|
2548
|
+
if (lastIndex < content.length) {
|
|
2549
|
+
segments.push({ type: "text", content: content.slice(lastIndex) });
|
|
2550
|
+
}
|
|
2551
|
+
return segments.length > 0 ? segments : [{ type: "text", content }];
|
|
2552
|
+
}, [content, enableYouTube]);
|
|
2553
|
+
return /* @__PURE__ */ jsx(Fragment, { children: parts.map((part, i) => {
|
|
2554
|
+
if (part.type === "youtube" && part.videoId) {
|
|
2555
|
+
return /* @__PURE__ */ jsx(YouTubeEmbed, { videoId: part.videoId }, i);
|
|
2556
|
+
}
|
|
2557
|
+
if (part.type === "link") {
|
|
2558
|
+
return /* @__PURE__ */ jsx(
|
|
2559
|
+
"a",
|
|
2560
|
+
{
|
|
2561
|
+
href: part.content,
|
|
2562
|
+
target: "_blank",
|
|
2563
|
+
rel: "noopener noreferrer",
|
|
2564
|
+
className: cn(
|
|
2565
|
+
"underline",
|
|
2566
|
+
isDark ? "text-cyan-400 hover:text-cyan-300" : "text-blue-600 hover:text-blue-800"
|
|
2567
|
+
),
|
|
2568
|
+
children: part.content
|
|
2569
|
+
},
|
|
2570
|
+
i
|
|
2571
|
+
);
|
|
2572
|
+
}
|
|
2573
|
+
return /* @__PURE__ */ jsx("span", { children: part.content }, i);
|
|
2574
|
+
}) });
|
|
2575
|
+
}
|
|
2576
|
+
const defaultQuickActions = [
|
|
2577
|
+
{ label: "🕒 Save Time", text: "I am looking to save time by automating customer support." },
|
|
2578
|
+
{ label: "💰 Get More Leads", text: "I want to get more qualified leads. Show me the sales features." },
|
|
2579
|
+
{ label: "💬 WhatsApp Demo", text: "I want to see how the WhatsApp integration works." }
|
|
2580
|
+
];
|
|
2581
|
+
function CalModal({
|
|
2582
|
+
calLink,
|
|
2583
|
+
onClose,
|
|
2584
|
+
prefill
|
|
2585
|
+
}) {
|
|
2586
|
+
useEffect(() => {
|
|
2587
|
+
const script = document.createElement("script");
|
|
2588
|
+
script.src = "https://app.cal.com/embed/embed.js";
|
|
2589
|
+
script.async = true;
|
|
2590
|
+
script.onload = () => {
|
|
2591
|
+
const Cal = window.Cal;
|
|
2592
|
+
if (Cal) {
|
|
2593
|
+
Cal("init", { origin: "https://cal.com" });
|
|
2594
|
+
let url = calLink;
|
|
2595
|
+
const params = new URLSearchParams();
|
|
2596
|
+
if (prefill == null ? void 0 : prefill.name) params.append("name", prefill.name);
|
|
2597
|
+
if (prefill == null ? void 0 : prefill.email) params.append("email", prefill.email);
|
|
2598
|
+
const paramString = params.toString();
|
|
2599
|
+
if (paramString) url += (url.includes("?") ? "&" : "?") + paramString;
|
|
2600
|
+
Cal("modal", {
|
|
2601
|
+
calLink: url,
|
|
2602
|
+
config: {
|
|
2603
|
+
layout: "month_view"
|
|
2604
|
+
}
|
|
2605
|
+
});
|
|
2606
|
+
}
|
|
2607
|
+
};
|
|
2608
|
+
document.head.appendChild(script);
|
|
2609
|
+
const handleMessage = (e) => {
|
|
2610
|
+
var _a;
|
|
2611
|
+
if (((_a = e.data) == null ? void 0 : _a.type) === "CAL:bookingSuccessful") {
|
|
2612
|
+
console.log("Booking successful:", e.data);
|
|
2613
|
+
onClose();
|
|
2614
|
+
}
|
|
2615
|
+
};
|
|
2616
|
+
window.addEventListener("message", handleMessage);
|
|
2617
|
+
return () => {
|
|
2618
|
+
document.head.removeChild(script);
|
|
2619
|
+
window.removeEventListener("message", handleMessage);
|
|
2620
|
+
const Cal = window.Cal;
|
|
2621
|
+
if (Cal) {
|
|
2622
|
+
try {
|
|
2623
|
+
Cal("close");
|
|
2624
|
+
} catch {
|
|
2625
|
+
}
|
|
2626
|
+
}
|
|
2627
|
+
};
|
|
2628
|
+
}, [calLink, prefill, onClose]);
|
|
2629
|
+
return null;
|
|
2630
|
+
}
|
|
2631
|
+
function App({ config }) {
|
|
2632
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
|
|
2633
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
2634
|
+
const [isCalOpen, setIsCalOpen] = useState(false);
|
|
2635
|
+
const [messages, setMessages] = useState([]);
|
|
2636
|
+
const [input, setInput] = useState("");
|
|
2637
|
+
const [isLoading, setIsLoading] = useState(false);
|
|
2638
|
+
const [showNudge, setShowNudge] = useState(false);
|
|
2639
|
+
const [nudgeDismissed, setNudgeDismissed] = useState(false);
|
|
2640
|
+
const [showPreChatForm, setShowPreChatForm] = useState(((_a = config.preChatForm) == null ? void 0 : _a.enabled) ?? false);
|
|
2641
|
+
const [preChatData, setPreChatData] = useState({});
|
|
2642
|
+
const [_lastError, setLastError] = useState(null);
|
|
2643
|
+
const messagesEndRef = useRef(null);
|
|
2644
|
+
const [streamingContent, setStreamingContent] = useState("");
|
|
2645
|
+
const streamingIdRef = useRef(null);
|
|
2646
|
+
const sessionIdRef = useRef(null);
|
|
2647
|
+
const emitEvent = useCallback((type, data) => {
|
|
2648
|
+
const event = { type, timestamp: (/* @__PURE__ */ new Date()).toISOString(), ...data };
|
|
2649
|
+
if (window.__imaraEmitEvent) {
|
|
2650
|
+
window.__imaraEmitEvent(event);
|
|
2651
|
+
}
|
|
2652
|
+
}, []);
|
|
2653
|
+
useEffect(() => {
|
|
2654
|
+
if (isOpen) {
|
|
2655
|
+
emitEvent("chat:opened");
|
|
2656
|
+
}
|
|
2657
|
+
}, [isOpen, emitEvent]);
|
|
2658
|
+
const messageCountRef = useRef(0);
|
|
2659
|
+
useEffect(() => {
|
|
2660
|
+
messageCountRef.current = messages.length;
|
|
2661
|
+
}, [messages.length]);
|
|
2662
|
+
const isDarkTheme = config.theme === "dark";
|
|
2663
|
+
const PRIMARY_COLOR = config.primaryColor || (isDarkTheme ? "#06b6d4" : "#000000");
|
|
2664
|
+
const themeStyles = useMemo(() => ({
|
|
2665
|
+
// Container
|
|
2666
|
+
container: isDarkTheme ? "bg-gray-900 ring-gray-700" : "bg-white ring-black/5",
|
|
2667
|
+
// Header - gradient for dark theme
|
|
2668
|
+
header: isDarkTheme ? `bg-gradient-to-r from-cyan-500 to-blue-600` : "",
|
|
2669
|
+
headerStyle: isDarkTheme ? {} : { backgroundColor: PRIMARY_COLOR },
|
|
2670
|
+
// Messages area
|
|
2671
|
+
messagesArea: isDarkTheme ? "bg-gray-950" : "bg-slate-50",
|
|
2672
|
+
// User message
|
|
2673
|
+
userMessage: isDarkTheme ? "bg-gradient-to-r from-cyan-500 to-blue-600 text-white" : "bg-slate-900 text-white",
|
|
2674
|
+
userMessageStyle: isDarkTheme ? {} : { backgroundColor: PRIMARY_COLOR },
|
|
2675
|
+
// Bot message
|
|
2676
|
+
botMessage: isDarkTheme ? "bg-gray-800 text-gray-100" : "bg-white text-slate-800",
|
|
2677
|
+
// Input area
|
|
2678
|
+
inputArea: isDarkTheme ? "border-gray-700 bg-gray-900" : "border-slate-100 bg-white",
|
|
2679
|
+
// Input field
|
|
2680
|
+
input: isDarkTheme ? "border-gray-700 bg-gray-800 text-gray-100 placeholder:text-gray-500 focus:border-cyan-500" : "border-slate-200 bg-slate-50 focus:border-slate-400",
|
|
2681
|
+
// Quick action button
|
|
2682
|
+
quickAction: isDarkTheme ? "border-gray-700 bg-gray-800 text-gray-300 hover:border-cyan-500 hover:text-cyan-400 hover:bg-gray-700" : "border-slate-200 bg-white text-slate-700 hover:border-purple-500 hover:text-purple-600",
|
|
2683
|
+
// Typing indicator
|
|
2684
|
+
typingBg: isDarkTheme ? "bg-gray-800" : "bg-white",
|
|
2685
|
+
typingDot: isDarkTheme ? "bg-cyan-400" : "bg-slate-400",
|
|
2686
|
+
// Rating buttons
|
|
2687
|
+
ratingInactive: isDarkTheme ? "text-gray-600 hover:text-gray-400" : "text-slate-300 hover:text-slate-500",
|
|
2688
|
+
// Footer text
|
|
2689
|
+
footerText: isDarkTheme ? "text-gray-500" : "text-slate-400",
|
|
2690
|
+
footerLink: isDarkTheme ? "hover:text-gray-300" : "hover:text-slate-600"
|
|
2691
|
+
}), [isDarkTheme, PRIMARY_COLOR]);
|
|
2692
|
+
if (sessionIdRef.current === null) {
|
|
2693
|
+
const STORAGE_KEY = "imara_session_id";
|
|
2694
|
+
try {
|
|
2695
|
+
const stored = localStorage.getItem(STORAGE_KEY);
|
|
2696
|
+
if (stored) {
|
|
2697
|
+
sessionIdRef.current = stored;
|
|
2698
|
+
} else {
|
|
2699
|
+
const newId = crypto.randomUUID();
|
|
2700
|
+
localStorage.setItem(STORAGE_KEY, newId);
|
|
2701
|
+
sessionIdRef.current = newId;
|
|
2702
|
+
}
|
|
2703
|
+
} catch {
|
|
2704
|
+
sessionIdRef.current = crypto.randomUUID();
|
|
2705
|
+
}
|
|
2706
|
+
}
|
|
2707
|
+
const API_URL = config.apiUrl || "https://imara-logic.vercel.app";
|
|
2708
|
+
const handlePreChatSubmit = useCallback((e) => {
|
|
2709
|
+
e.preventDefault();
|
|
2710
|
+
setShowPreChatForm(false);
|
|
2711
|
+
console.log("Pre-chat data collected:", preChatData);
|
|
2712
|
+
}, [preChatData]);
|
|
2713
|
+
const rateMessage = useCallback(async (messageId, rating) => {
|
|
2714
|
+
setMessages((prev) => prev.map(
|
|
2715
|
+
(msg) => msg.id === messageId ? { ...msg, rating } : msg
|
|
2716
|
+
));
|
|
2717
|
+
try {
|
|
2718
|
+
await fetch(`${API_URL}/api/chat/rate`, {
|
|
2719
|
+
method: "POST",
|
|
2720
|
+
headers: { "Content-Type": "application/json" },
|
|
2721
|
+
body: JSON.stringify({
|
|
2722
|
+
sessionId: sessionIdRef.current,
|
|
2723
|
+
messageId,
|
|
2724
|
+
rating,
|
|
2725
|
+
apiKey: config.apiKey
|
|
2726
|
+
})
|
|
2727
|
+
});
|
|
2728
|
+
} catch (error) {
|
|
2729
|
+
console.warn("Failed to submit rating:", error);
|
|
2730
|
+
}
|
|
2731
|
+
}, [API_URL, config.apiKey]);
|
|
2732
|
+
const MESSAGES_STORAGE_KEY = `imara_messages_${config.apiKey || "demo"}`;
|
|
2733
|
+
useEffect(() => {
|
|
2734
|
+
if (messages.length > 1) {
|
|
2735
|
+
try {
|
|
2736
|
+
localStorage.setItem(MESSAGES_STORAGE_KEY, JSON.stringify(messages));
|
|
2737
|
+
} catch {
|
|
2738
|
+
}
|
|
2739
|
+
}
|
|
2740
|
+
}, [messages, MESSAGES_STORAGE_KEY]);
|
|
2741
|
+
useEffect(() => {
|
|
2742
|
+
try {
|
|
2743
|
+
const stored = localStorage.getItem(MESSAGES_STORAGE_KEY);
|
|
2744
|
+
if (stored) {
|
|
2745
|
+
const parsed = JSON.parse(stored);
|
|
2746
|
+
if (parsed.length > 0) {
|
|
2747
|
+
setMessages(parsed);
|
|
2748
|
+
return;
|
|
2749
|
+
}
|
|
2750
|
+
}
|
|
2751
|
+
} catch {
|
|
2752
|
+
}
|
|
2753
|
+
if (config.initialMessage) {
|
|
2754
|
+
setMessages([{
|
|
2755
|
+
id: "init",
|
|
2756
|
+
role: "assistant",
|
|
2757
|
+
content: config.initialMessage
|
|
2758
|
+
}]);
|
|
2759
|
+
}
|
|
2760
|
+
}, []);
|
|
2761
|
+
const proactiveEnabled = ((_b = config.proactivePopup) == null ? void 0 : _b.enabled) !== false;
|
|
2762
|
+
const proactiveDelay = ((_c = config.proactivePopup) == null ? void 0 : _c.delay) ?? 3e3;
|
|
2763
|
+
const [contextMessage, setContextMessage] = useState("");
|
|
2764
|
+
const [hasScrolled, setHasScrolled] = useState(false);
|
|
2765
|
+
useEffect(() => {
|
|
2766
|
+
const getContextMessage = () => {
|
|
2767
|
+
const path = window.location.pathname.toLowerCase();
|
|
2768
|
+
const hash = window.location.hash.toLowerCase();
|
|
2769
|
+
if (path.includes("pricing") || hash.includes("pricing")) {
|
|
2770
|
+
return "Need help choosing a plan? 💬";
|
|
2771
|
+
}
|
|
2772
|
+
if (path.includes("demo") || hash.includes("demo") || hash.includes("see-imara")) {
|
|
2773
|
+
return "Want to see Imara in action? 🚀";
|
|
2774
|
+
}
|
|
2775
|
+
if (path.includes("solution") || path.includes("industr")) {
|
|
2776
|
+
return "Questions about your industry? 🏢";
|
|
2777
|
+
}
|
|
2778
|
+
if (path.includes("contact") || path.includes("about") || hash.includes("about")) {
|
|
2779
|
+
return "Let's chat! I'm here to help 👋";
|
|
2780
|
+
}
|
|
2781
|
+
if (hasScrolled) {
|
|
2782
|
+
return "Have questions about what you've seen? 🤔";
|
|
2783
|
+
}
|
|
2784
|
+
return "Curious how Imara works? ✨";
|
|
2785
|
+
};
|
|
2786
|
+
setContextMessage(getContextMessage());
|
|
2787
|
+
}, [hasScrolled]);
|
|
2788
|
+
useEffect(() => {
|
|
2789
|
+
const handleScroll = () => {
|
|
2790
|
+
const scrollPercent = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight) * 100;
|
|
2791
|
+
if (scrollPercent > 30 && !hasScrolled) {
|
|
2792
|
+
setHasScrolled(true);
|
|
2793
|
+
}
|
|
2794
|
+
};
|
|
2795
|
+
window.addEventListener("scroll", handleScroll, { passive: true });
|
|
2796
|
+
return () => window.removeEventListener("scroll", handleScroll);
|
|
2797
|
+
}, [hasScrolled]);
|
|
2798
|
+
const nudgeMessage = ((_d = config.proactivePopup) == null ? void 0 : _d.message) || contextMessage || "Curious how Imara works? ✨";
|
|
2799
|
+
useEffect(() => {
|
|
2800
|
+
if (!proactiveEnabled || nudgeDismissed || isOpen) return;
|
|
2801
|
+
const timer = setTimeout(() => {
|
|
2802
|
+
if (!isOpen && !nudgeDismissed) {
|
|
2803
|
+
setShowNudge(true);
|
|
2804
|
+
}
|
|
2805
|
+
}, proactiveDelay);
|
|
2806
|
+
return () => clearTimeout(timer);
|
|
2807
|
+
}, [isOpen, nudgeDismissed, proactiveEnabled, proactiveDelay]);
|
|
2808
|
+
useEffect(() => {
|
|
2809
|
+
if (isOpen) {
|
|
2810
|
+
setShowNudge(false);
|
|
2811
|
+
}
|
|
2812
|
+
}, [isOpen]);
|
|
2813
|
+
const scrollToBottom = useCallback(() => {
|
|
2814
|
+
if (isOpen && messagesEndRef.current) {
|
|
2815
|
+
messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
|
|
2816
|
+
}
|
|
2817
|
+
}, [isOpen]);
|
|
2818
|
+
useEffect(() => {
|
|
2819
|
+
scrollToBottom();
|
|
2820
|
+
}, [messages.length, streamingContent, scrollToBottom]);
|
|
2821
|
+
const handleSubmit = useCallback(async (e, retryCount = 0) => {
|
|
2822
|
+
var _a2;
|
|
2823
|
+
e.preventDefault();
|
|
2824
|
+
if (!input.trim() || isLoading) return;
|
|
2825
|
+
const userMessage = {
|
|
2826
|
+
id: Date.now().toString(),
|
|
2827
|
+
role: "user",
|
|
2828
|
+
content: input
|
|
2829
|
+
};
|
|
2830
|
+
if (retryCount === 0) {
|
|
2831
|
+
setMessages((prev) => [...prev, userMessage]);
|
|
2832
|
+
setInput("");
|
|
2833
|
+
emitEvent("message:sent", { message: userMessage.content });
|
|
2834
|
+
}
|
|
2835
|
+
setIsLoading(true);
|
|
2836
|
+
setLastError(null);
|
|
2837
|
+
const botMessageId = (Date.now() + 1).toString();
|
|
2838
|
+
streamingIdRef.current = botMessageId;
|
|
2839
|
+
setStreamingContent("");
|
|
2840
|
+
const payload = {
|
|
2841
|
+
apiKey: config.apiKey,
|
|
2842
|
+
messages: [...messages, userMessage].map((m) => ({ role: m.role, content: m.content })),
|
|
2843
|
+
sessionId: sessionIdRef.current
|
|
2844
|
+
};
|
|
2845
|
+
if (config.userContext) {
|
|
2846
|
+
payload.userContext = config.userContext;
|
|
2847
|
+
}
|
|
2848
|
+
try {
|
|
2849
|
+
const response = await fetch(`${API_URL}/api/chat`, {
|
|
2850
|
+
method: "POST",
|
|
2851
|
+
headers: { "Content-Type": "application/json" },
|
|
2852
|
+
body: JSON.stringify(payload)
|
|
2853
|
+
});
|
|
2854
|
+
if (!response.ok) {
|
|
2855
|
+
const errorText = await response.text().catch(() => "Unknown error");
|
|
2856
|
+
let errorData = {};
|
|
2857
|
+
try {
|
|
2858
|
+
errorData = JSON.parse(errorText);
|
|
2859
|
+
} catch {
|
|
2860
|
+
}
|
|
2861
|
+
if (response.status >= 500 && retryCount < 2) {
|
|
2862
|
+
console.warn(`[ChatBot] Retrying request (attempt ${retryCount + 2}/3)`);
|
|
2863
|
+
await new Promise((r2) => setTimeout(r2, 1e3 * (retryCount + 1)));
|
|
2864
|
+
return handleSubmit(e, retryCount + 1);
|
|
2865
|
+
}
|
|
2866
|
+
const errorMsg = errorData.error || `Request failed (${response.status})`;
|
|
2867
|
+
throw new Error(errorMsg);
|
|
2868
|
+
}
|
|
2869
|
+
if (!response.body) throw new Error("No response body");
|
|
2870
|
+
const reader = response.body.getReader();
|
|
2871
|
+
const decoder = new TextDecoder();
|
|
2872
|
+
let botContent = "";
|
|
2873
|
+
let buffer = "";
|
|
2874
|
+
while (true) {
|
|
2875
|
+
const { done, value } = await reader.read();
|
|
2876
|
+
if (done) break;
|
|
2877
|
+
const chunk = decoder.decode(value, { stream: true });
|
|
2878
|
+
buffer += chunk;
|
|
2879
|
+
const lines = buffer.split("\n");
|
|
2880
|
+
buffer = lines.pop() || "";
|
|
2881
|
+
for (const line of lines) {
|
|
2882
|
+
if (!line.trim()) continue;
|
|
2883
|
+
const colonIndex = line.indexOf(":");
|
|
2884
|
+
if (colonIndex === -1) continue;
|
|
2885
|
+
const typeCode = line.substring(0, colonIndex);
|
|
2886
|
+
const jsonData = line.substring(colonIndex + 1);
|
|
2887
|
+
try {
|
|
2888
|
+
if (typeCode === "0") {
|
|
2889
|
+
const text = JSON.parse(jsonData);
|
|
2890
|
+
if (typeof text === "string") {
|
|
2891
|
+
if (text.includes("[TRIGGER_BOOKING]") || text.includes("[TRIGGER_CALENDLY_MODAL]")) {
|
|
2892
|
+
setIsCalOpen(true);
|
|
2893
|
+
emitEvent("intent:booking", { calLink: (_a2 = config.booking) == null ? void 0 : _a2.calLink });
|
|
2894
|
+
const cleanText = text.replace("[TRIGGER_BOOKING]", "").replace("[TRIGGER_CALENDLY_MODAL]", "");
|
|
2895
|
+
botContent += cleanText;
|
|
2896
|
+
} else if (text.includes("[TRIGGER_SUBSCRIBE]")) {
|
|
2897
|
+
emitEvent("intent:subscribe", { productId: void 0 });
|
|
2898
|
+
botContent += text.replace("[TRIGGER_SUBSCRIBE]", "");
|
|
2899
|
+
} else {
|
|
2900
|
+
botContent += text;
|
|
2901
|
+
}
|
|
2902
|
+
setStreamingContent(botContent);
|
|
2903
|
+
}
|
|
2904
|
+
} else if (typeCode === "e") {
|
|
2905
|
+
const errorData = JSON.parse(jsonData);
|
|
2906
|
+
console.error("Stream error:", errorData);
|
|
2907
|
+
emitEvent("error", { message: errorData.message || "Stream error", code: "STREAM_ERROR" });
|
|
2908
|
+
}
|
|
2909
|
+
} catch {
|
|
2910
|
+
}
|
|
2911
|
+
}
|
|
2912
|
+
}
|
|
2913
|
+
setMessages((prev) => [
|
|
2914
|
+
...prev,
|
|
2915
|
+
{ id: botMessageId, role: "assistant", content: botContent }
|
|
2916
|
+
]);
|
|
2917
|
+
setStreamingContent("");
|
|
2918
|
+
streamingIdRef.current = null;
|
|
2919
|
+
emitEvent("message:received", { message: botContent });
|
|
2920
|
+
const emailMatch = userMessage.content.match(/\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}\b/);
|
|
2921
|
+
const phoneMatch = userMessage.content.match(/(?:\+?1[-.\s]?)?\(?[0-9]{3}\)?[-.\s]?[0-9]{3}[-.\s]?[0-9]{4}/);
|
|
2922
|
+
if (emailMatch || phoneMatch) {
|
|
2923
|
+
emitEvent("lead:created", {
|
|
2924
|
+
email: emailMatch == null ? void 0 : emailMatch[0],
|
|
2925
|
+
phone: phoneMatch == null ? void 0 : phoneMatch[0]
|
|
2926
|
+
});
|
|
2927
|
+
}
|
|
2928
|
+
} catch (error) {
|
|
2929
|
+
const errorMessage = error instanceof Error ? error.message : "Unknown error";
|
|
2930
|
+
console.error("Chat error:", error);
|
|
2931
|
+
setStreamingContent("");
|
|
2932
|
+
streamingIdRef.current = null;
|
|
2933
|
+
setLastError(errorMessage);
|
|
2934
|
+
emitEvent("error", { message: errorMessage, code: "CHAT_ERROR" });
|
|
2935
|
+
setMessages((prev) => [
|
|
2936
|
+
...prev,
|
|
2937
|
+
{ id: Date.now().toString(), role: "assistant", content: `Sorry, something went wrong: ${errorMessage}. Please try again.` }
|
|
2938
|
+
]);
|
|
2939
|
+
} finally {
|
|
2940
|
+
setIsLoading(false);
|
|
2941
|
+
}
|
|
2942
|
+
}, [input, isLoading, messages, API_URL, config.apiKey, config.userContext, (_e = config.booking) == null ? void 0 : _e.calLink, emitEvent]);
|
|
2943
|
+
const toggleChat = useCallback(() => {
|
|
2944
|
+
setIsOpen((prev) => {
|
|
2945
|
+
const newState = !prev;
|
|
2946
|
+
if (!newState) {
|
|
2947
|
+
emitEvent("chat:closed", { messageCount: messageCountRef.current });
|
|
2948
|
+
}
|
|
2949
|
+
return newState;
|
|
2950
|
+
});
|
|
2951
|
+
}, [emitEvent]);
|
|
2952
|
+
return /* @__PURE__ */ jsxs("div", { className: cn(
|
|
2953
|
+
"fixed bottom-4 right-4 z-[9999] font-sans",
|
|
2954
|
+
isDarkTheme ? "text-gray-100" : "text-slate-900"
|
|
2955
|
+
), children: [
|
|
2956
|
+
isOpen && /* @__PURE__ */ jsxs(
|
|
2957
|
+
"div",
|
|
2958
|
+
{
|
|
2959
|
+
className: cn(
|
|
2960
|
+
"mb-4 flex h-[600px] w-[380px] flex-col overflow-hidden rounded-2xl shadow-2xl ring-1 animate-chat-open",
|
|
2961
|
+
themeStyles.container
|
|
2962
|
+
),
|
|
2963
|
+
children: [
|
|
2964
|
+
/* @__PURE__ */ jsxs(
|
|
2965
|
+
"div",
|
|
2966
|
+
{
|
|
2967
|
+
className: cn(
|
|
2968
|
+
"flex items-center justify-between px-4 py-3 text-white",
|
|
2969
|
+
themeStyles.header
|
|
2970
|
+
),
|
|
2971
|
+
style: themeStyles.headerStyle,
|
|
2972
|
+
children: [
|
|
2973
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
2974
|
+
/* @__PURE__ */ jsx("div", { className: cn(
|
|
2975
|
+
"flex h-8 w-8 items-center justify-center rounded-full",
|
|
2976
|
+
isDarkTheme ? "bg-white/20 animate-bounce" : "bg-white/20"
|
|
2977
|
+
), children: isDarkTheme ? /* @__PURE__ */ jsx("span", { className: "text-lg", children: "🤖" }) : /* @__PURE__ */ jsx(SparklesIcon, {}) }),
|
|
2978
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
2979
|
+
/* @__PURE__ */ jsx("h3", { className: "text-sm font-bold", children: config.botName || "AI Assistant" }),
|
|
2980
|
+
/* @__PURE__ */ jsx("p", { className: "text-xs opacity-90", children: config.headerSubtitle || "Powered by Imaralogic" })
|
|
2981
|
+
] })
|
|
2982
|
+
] }),
|
|
2983
|
+
/* @__PURE__ */ jsx(
|
|
2984
|
+
"button",
|
|
2985
|
+
{
|
|
2986
|
+
onClick: toggleChat,
|
|
2987
|
+
className: "rounded-full p-1 hover:bg-white/20 transition-colors",
|
|
2988
|
+
"aria-label": "Close chat",
|
|
2989
|
+
children: /* @__PURE__ */ jsx(XIcon, { size: 20 })
|
|
2990
|
+
}
|
|
2991
|
+
)
|
|
2992
|
+
]
|
|
2993
|
+
}
|
|
2994
|
+
),
|
|
2995
|
+
showPreChatForm && ((_f = config.preChatForm) == null ? void 0 : _f.fields) && /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto bg-slate-50 p-4", children: /* @__PURE__ */ jsxs("form", { onSubmit: handlePreChatSubmit, className: "space-y-4", children: [
|
|
2996
|
+
/* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
|
|
2997
|
+
/* @__PURE__ */ jsx("h4", { className: "text-lg font-semibold text-slate-800", children: config.preChatForm.title || "Before we chat..." }),
|
|
2998
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Please tell us a bit about yourself" })
|
|
2999
|
+
] }),
|
|
3000
|
+
config.preChatForm.fields.map((field) => {
|
|
3001
|
+
var _a2;
|
|
3002
|
+
return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
|
|
3003
|
+
/* @__PURE__ */ jsxs("label", { className: "text-sm font-medium text-slate-700", children: [
|
|
3004
|
+
field.label,
|
|
3005
|
+
field.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
|
|
3006
|
+
] }),
|
|
3007
|
+
field.type === "select" ? /* @__PURE__ */ jsxs(
|
|
3008
|
+
"select",
|
|
3009
|
+
{
|
|
3010
|
+
className: "w-full rounded-lg border border-slate-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-900/20",
|
|
3011
|
+
required: field.required,
|
|
3012
|
+
value: preChatData[field.name] || "",
|
|
3013
|
+
onChange: (e) => setPreChatData((prev) => ({ ...prev, [field.name]: e.target.value })),
|
|
3014
|
+
children: [
|
|
3015
|
+
/* @__PURE__ */ jsx("option", { value: "", children: field.placeholder || "Select..." }),
|
|
3016
|
+
(_a2 = field.options) == null ? void 0 : _a2.map((opt) => /* @__PURE__ */ jsx("option", { value: opt, children: opt }, opt))
|
|
3017
|
+
]
|
|
3018
|
+
}
|
|
3019
|
+
) : /* @__PURE__ */ jsx(
|
|
3020
|
+
"input",
|
|
3021
|
+
{
|
|
3022
|
+
type: field.type,
|
|
3023
|
+
className: "w-full rounded-lg border border-slate-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-900/20",
|
|
3024
|
+
placeholder: field.placeholder,
|
|
3025
|
+
required: field.required,
|
|
3026
|
+
value: preChatData[field.name] || "",
|
|
3027
|
+
onChange: (e) => setPreChatData((prev) => ({ ...prev, [field.name]: e.target.value }))
|
|
3028
|
+
}
|
|
3029
|
+
)
|
|
3030
|
+
] }, field.name);
|
|
3031
|
+
}),
|
|
3032
|
+
/* @__PURE__ */ jsx(
|
|
3033
|
+
"button",
|
|
3034
|
+
{
|
|
3035
|
+
type: "submit",
|
|
3036
|
+
className: "w-full rounded-lg py-2.5 text-sm font-semibold text-white transition-colors hover:opacity-90",
|
|
3037
|
+
style: { backgroundColor: PRIMARY_COLOR },
|
|
3038
|
+
children: "Start Chatting"
|
|
3039
|
+
}
|
|
3040
|
+
)
|
|
3041
|
+
] }) }),
|
|
3042
|
+
!showPreChatForm && /* @__PURE__ */ jsxs("div", { className: cn("flex-1 overflow-y-auto p-4 space-y-4", themeStyles.messagesArea), children: [
|
|
3043
|
+
messages.map((msg) => /* @__PURE__ */ jsxs("div", { className: cn(
|
|
3044
|
+
"flex flex-col gap-1",
|
|
3045
|
+
msg.role === "user" ? "items-end" : "items-start"
|
|
3046
|
+
), children: [
|
|
3047
|
+
/* @__PURE__ */ jsx(
|
|
3048
|
+
"div",
|
|
3049
|
+
{
|
|
3050
|
+
className: cn(
|
|
3051
|
+
"w-max max-w-[80%] rounded-2xl px-4 py-2 text-sm shadow-sm",
|
|
3052
|
+
msg.role === "user" ? themeStyles.userMessage : themeStyles.botMessage
|
|
3053
|
+
),
|
|
3054
|
+
style: msg.role === "user" ? themeStyles.userMessageStyle : {},
|
|
3055
|
+
children: /* @__PURE__ */ jsx(
|
|
3056
|
+
MessageContent,
|
|
3057
|
+
{
|
|
3058
|
+
content: msg.content,
|
|
3059
|
+
enableYouTube: config.enableYouTubeEmbed,
|
|
3060
|
+
isDark: isDarkTheme
|
|
3061
|
+
}
|
|
3062
|
+
)
|
|
3063
|
+
}
|
|
3064
|
+
),
|
|
3065
|
+
msg.role === "assistant" && msg.id !== "init" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 mt-1 ml-1", children: [
|
|
3066
|
+
/* @__PURE__ */ jsx(
|
|
3067
|
+
"button",
|
|
3068
|
+
{
|
|
3069
|
+
onClick: () => rateMessage(msg.id, "positive"),
|
|
3070
|
+
className: cn(
|
|
3071
|
+
"p-1 rounded transition-colors",
|
|
3072
|
+
msg.rating === "positive" ? "text-green-600" : themeStyles.ratingInactive
|
|
3073
|
+
),
|
|
3074
|
+
"aria-label": "Helpful",
|
|
3075
|
+
title: "Helpful",
|
|
3076
|
+
children: /* @__PURE__ */ jsx(ThumbsUpIcon, { filled: msg.rating === "positive" })
|
|
3077
|
+
}
|
|
3078
|
+
),
|
|
3079
|
+
/* @__PURE__ */ jsx(
|
|
3080
|
+
"button",
|
|
3081
|
+
{
|
|
3082
|
+
onClick: () => rateMessage(msg.id, "negative"),
|
|
3083
|
+
className: cn(
|
|
3084
|
+
"p-1 rounded transition-colors",
|
|
3085
|
+
msg.rating === "negative" ? "text-red-500" : themeStyles.ratingInactive
|
|
3086
|
+
),
|
|
3087
|
+
"aria-label": "Not helpful",
|
|
3088
|
+
title: "Not helpful",
|
|
3089
|
+
children: /* @__PURE__ */ jsx(ThumbsDownIcon, { filled: msg.rating === "negative" })
|
|
3090
|
+
}
|
|
3091
|
+
)
|
|
3092
|
+
] })
|
|
3093
|
+
] }, msg.id)),
|
|
3094
|
+
streamingContent && /* @__PURE__ */ jsx("div", { className: cn(
|
|
3095
|
+
"flex w-max max-w-[80%] flex-col gap-1 rounded-2xl px-4 py-2 text-sm shadow-sm",
|
|
3096
|
+
themeStyles.botMessage
|
|
3097
|
+
), children: /* @__PURE__ */ jsx(
|
|
3098
|
+
MessageContent,
|
|
3099
|
+
{
|
|
3100
|
+
content: streamingContent,
|
|
3101
|
+
enableYouTube: config.enableYouTubeEmbed,
|
|
3102
|
+
isDark: isDarkTheme
|
|
3103
|
+
}
|
|
3104
|
+
) }),
|
|
3105
|
+
isLoading && !streamingContent && /* @__PURE__ */ jsx("div", { className: cn(
|
|
3106
|
+
"flex w-max items-center gap-1 rounded-2xl px-4 py-3 text-sm shadow-sm",
|
|
3107
|
+
themeStyles.typingBg
|
|
3108
|
+
), children: /* @__PURE__ */ jsxs("div", { className: cn("typing-indicator", isDarkTheme && "typing-dark"), children: [
|
|
3109
|
+
/* @__PURE__ */ jsx("span", {}),
|
|
3110
|
+
/* @__PURE__ */ jsx("span", {}),
|
|
3111
|
+
/* @__PURE__ */ jsx("span", {})
|
|
3112
|
+
] }) }),
|
|
3113
|
+
/* @__PURE__ */ jsx("div", { ref: messagesEndRef })
|
|
3114
|
+
] }),
|
|
3115
|
+
!showPreChatForm && /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: cn("p-4", themeStyles.inputArea), children: [
|
|
3116
|
+
(config.quickActions && config.quickActions.length > 0 ? config.quickActions : defaultQuickActions).length > 0 && /* @__PURE__ */ jsx("div", { className: cn(
|
|
3117
|
+
"flex gap-2 overflow-x-auto pb-3 scrollbar-hide",
|
|
3118
|
+
isDarkTheme ? "border-b border-gray-700 mb-3" : "border-b border-slate-200 mb-3"
|
|
3119
|
+
), children: (config.quickActions && config.quickActions.length > 0 ? config.quickActions : defaultQuickActions).map((action, idx) => /* @__PURE__ */ jsx(
|
|
3120
|
+
"button",
|
|
3121
|
+
{
|
|
3122
|
+
type: "button",
|
|
3123
|
+
onClick: () => {
|
|
3124
|
+
setInput(action.text);
|
|
3125
|
+
setTimeout(() => {
|
|
3126
|
+
const inputElement = document.querySelector('input[type="text"]');
|
|
3127
|
+
inputElement == null ? void 0 : inputElement.focus();
|
|
3128
|
+
}, 50);
|
|
3129
|
+
},
|
|
3130
|
+
className: cn(
|
|
3131
|
+
"text-xs px-3 py-2 rounded-full whitespace-nowrap transition-all duration-200",
|
|
3132
|
+
isDarkTheme ? "bg-gray-800 hover:bg-gray-700 text-gray-200 hover:scale-105" : "bg-gray-100 hover:bg-gray-200 text-gray-700 hover:scale-105"
|
|
3133
|
+
),
|
|
3134
|
+
disabled: isLoading,
|
|
3135
|
+
children: action.label
|
|
3136
|
+
},
|
|
3137
|
+
idx
|
|
3138
|
+
)) }),
|
|
3139
|
+
/* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
|
|
3140
|
+
/* @__PURE__ */ jsx(
|
|
3141
|
+
"input",
|
|
3142
|
+
{
|
|
3143
|
+
value: input,
|
|
3144
|
+
onChange: (e) => setInput(e.target.value),
|
|
3145
|
+
placeholder: "Type a message...",
|
|
3146
|
+
className: cn(
|
|
3147
|
+
"flex-1 rounded-full border py-3 px-5 text-sm focus:outline-none focus:ring-2",
|
|
3148
|
+
isDarkTheme ? "bg-gray-800 text-white border-gray-700 placeholder-gray-500 focus:ring-cyan-500" : "bg-white text-slate-900 border-slate-200 placeholder-gray-400 focus:ring-blue-500"
|
|
3149
|
+
)
|
|
3150
|
+
}
|
|
3151
|
+
),
|
|
3152
|
+
/* @__PURE__ */ jsx(
|
|
3153
|
+
"button",
|
|
3154
|
+
{
|
|
3155
|
+
type: "submit",
|
|
3156
|
+
disabled: isLoading || !input.trim(),
|
|
3157
|
+
className: cn(
|
|
3158
|
+
"rounded-full p-3 transition-all duration-200 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed text-white",
|
|
3159
|
+
isDarkTheme ? "bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-700 hover:to-blue-700 disabled:from-gray-700 disabled:to-gray-700" : "disabled:bg-gray-200"
|
|
3160
|
+
),
|
|
3161
|
+
style: !isDarkTheme && input.trim() ? { backgroundColor: PRIMARY_COLOR } : void 0,
|
|
3162
|
+
"aria-label": "Send message",
|
|
3163
|
+
children: /* @__PURE__ */ jsx(SendIcon, {})
|
|
3164
|
+
}
|
|
3165
|
+
)
|
|
3166
|
+
] }),
|
|
3167
|
+
((_g = config.booking) == null ? void 0 : _g.enabled) && (((_h = config.booking) == null ? void 0 : _h.calLink) || ((_i = config.booking) == null ? void 0 : _i.calendlyUrl)) && /* @__PURE__ */ jsxs(
|
|
3168
|
+
"button",
|
|
3169
|
+
{
|
|
3170
|
+
type: "button",
|
|
3171
|
+
onClick: () => setIsCalOpen(true),
|
|
3172
|
+
className: cn(
|
|
3173
|
+
"mt-2 w-full rounded-lg py-2 text-sm font-medium text-white transition-colors hover:opacity-90",
|
|
3174
|
+
isDarkTheme && "bg-gradient-to-r from-cyan-500 to-blue-600"
|
|
3175
|
+
),
|
|
3176
|
+
style: isDarkTheme ? {} : { backgroundColor: PRIMARY_COLOR },
|
|
3177
|
+
children: [
|
|
3178
|
+
"📅 ",
|
|
3179
|
+
config.booking.buttonText || "Book a Meeting"
|
|
3180
|
+
]
|
|
3181
|
+
}
|
|
3182
|
+
),
|
|
3183
|
+
/* @__PURE__ */ jsxs("div", { className: cn("mt-2 text-center text-[10px]", themeStyles.footerText), children: [
|
|
3184
|
+
"Powered by ",
|
|
3185
|
+
/* @__PURE__ */ jsx("a", { href: "https://imaralogic.co.ke?ref=widget", target: "_blank", rel: "noopener noreferrer", className: cn("underline font-medium", themeStyles.footerLink), children: "Imara AI" }),
|
|
3186
|
+
" · ",
|
|
3187
|
+
/* @__PURE__ */ jsx("a", { href: "https://imaralogic.co.ke/terms", target: "_blank", rel: "noopener noreferrer", className: cn("underline", themeStyles.footerLink), children: "Terms" })
|
|
3188
|
+
] })
|
|
3189
|
+
] })
|
|
3190
|
+
]
|
|
3191
|
+
}
|
|
3192
|
+
),
|
|
3193
|
+
showNudge && !isOpen && /* @__PURE__ */ jsx("div", { className: "absolute bottom-16 right-0 mb-2 animate-nudge-in", children: /* @__PURE__ */ jsxs("div", { className: cn(
|
|
3194
|
+
"relative flex items-center gap-2 rounded-full px-4 py-2.5 shadow-lg ring-1",
|
|
3195
|
+
isDarkTheme ? "bg-gray-800 ring-gray-700" : "bg-white ring-black/5"
|
|
3196
|
+
), children: [
|
|
3197
|
+
/* @__PURE__ */ jsx(
|
|
3198
|
+
"button",
|
|
3199
|
+
{
|
|
3200
|
+
onClick: (e) => {
|
|
3201
|
+
e.stopPropagation();
|
|
3202
|
+
setShowNudge(false);
|
|
3203
|
+
setNudgeDismissed(true);
|
|
3204
|
+
},
|
|
3205
|
+
className: cn(
|
|
3206
|
+
"absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full transition-colors",
|
|
3207
|
+
isDarkTheme ? "bg-gray-700 text-gray-400 hover:bg-gray-600 hover:text-gray-200" : "bg-slate-100 text-slate-400 hover:bg-slate-200 hover:text-slate-600"
|
|
3208
|
+
),
|
|
3209
|
+
"aria-label": "Dismiss",
|
|
3210
|
+
children: /* @__PURE__ */ jsx(XIcon, { size: 10 })
|
|
3211
|
+
}
|
|
3212
|
+
),
|
|
3213
|
+
/* @__PURE__ */ jsx(
|
|
3214
|
+
"span",
|
|
3215
|
+
{
|
|
3216
|
+
className: cn(
|
|
3217
|
+
"flex h-6 w-6 items-center justify-center rounded-full text-white",
|
|
3218
|
+
isDarkTheme && "bg-gradient-to-r from-cyan-500 to-blue-600"
|
|
3219
|
+
),
|
|
3220
|
+
style: isDarkTheme ? {} : { backgroundColor: PRIMARY_COLOR },
|
|
3221
|
+
children: /* @__PURE__ */ jsx(SparklesIcon, {})
|
|
3222
|
+
}
|
|
3223
|
+
),
|
|
3224
|
+
/* @__PURE__ */ jsx("span", { className: cn(
|
|
3225
|
+
"text-sm font-medium whitespace-nowrap pr-2",
|
|
3226
|
+
isDarkTheme ? "text-gray-200" : "text-slate-700"
|
|
3227
|
+
), children: nudgeMessage }),
|
|
3228
|
+
/* @__PURE__ */ jsx(
|
|
3229
|
+
"div",
|
|
3230
|
+
{
|
|
3231
|
+
className: cn(
|
|
3232
|
+
"absolute -bottom-1.5 right-6 h-3 w-3 rotate-45 ring-1",
|
|
3233
|
+
isDarkTheme ? "bg-gray-800 ring-gray-700" : "bg-white ring-black/5"
|
|
3234
|
+
),
|
|
3235
|
+
style: { clipPath: "polygon(100% 0, 0 100%, 100% 100%)" }
|
|
3236
|
+
}
|
|
3237
|
+
)
|
|
3238
|
+
] }) }),
|
|
3239
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
|
|
3240
|
+
!isOpen && !showNudge && /* @__PURE__ */ jsx(
|
|
3241
|
+
"div",
|
|
3242
|
+
{
|
|
3243
|
+
className: cn(
|
|
3244
|
+
"rounded-full px-3 py-1.5 text-xs font-medium shadow-lg ring-1 animate-fade-in max-w-[200px] text-center leading-tight",
|
|
3245
|
+
isDarkTheme ? "bg-gray-800 ring-gray-700 shadow-gray-900/30" : "bg-white ring-black/5 shadow-slate-900/10"
|
|
3246
|
+
),
|
|
3247
|
+
style: { color: PRIMARY_COLOR },
|
|
3248
|
+
children: nudgeMessage
|
|
3249
|
+
}
|
|
3250
|
+
),
|
|
3251
|
+
/* @__PURE__ */ jsx(
|
|
3252
|
+
"button",
|
|
3253
|
+
{
|
|
3254
|
+
onClick: toggleChat,
|
|
3255
|
+
className: cn(
|
|
3256
|
+
"flex h-14 w-14 items-center justify-center rounded-full text-white shadow-lg transition-all duration-200 hover:scale-105 active:scale-95",
|
|
3257
|
+
showNudge && !isOpen && "animate-pulse-ring",
|
|
3258
|
+
isDarkTheme ? "bg-gradient-to-r from-cyan-500 to-blue-600 shadow-cyan-500/30 animate-glow-pulse" : "shadow-slate-900/20"
|
|
3259
|
+
),
|
|
3260
|
+
style: isDarkTheme ? {} : { backgroundColor: PRIMARY_COLOR },
|
|
3261
|
+
"aria-label": isOpen ? "Close chat" : "Open chat",
|
|
3262
|
+
children: isOpen ? /* @__PURE__ */ jsx(XIcon, { size: 24 }) : /* @__PURE__ */ jsx(MessageCircleIcon, {})
|
|
3263
|
+
}
|
|
3264
|
+
)
|
|
3265
|
+
] }),
|
|
3266
|
+
isCalOpen && (((_j = config.booking) == null ? void 0 : _j.calLink) || ((_k = config.booking) == null ? void 0 : _k.calendlyUrl)) && /* @__PURE__ */ jsx(
|
|
3267
|
+
CalModal,
|
|
3268
|
+
{
|
|
3269
|
+
calLink: config.booking.calLink || config.booking.calendlyUrl || "",
|
|
3270
|
+
onClose: () => setIsCalOpen(false),
|
|
3271
|
+
prefill: preChatData.email ? {
|
|
3272
|
+
email: preChatData.email,
|
|
3273
|
+
name: preChatData.name || ""
|
|
3274
|
+
} : void 0
|
|
3275
|
+
}
|
|
3276
|
+
)
|
|
3277
|
+
] });
|
|
3278
|
+
}
|
|
3279
|
+
export {
|
|
3280
|
+
App as ChatWidget
|
|
3281
|
+
};
|
|
3282
|
+
//# sourceMappingURL=index.js.map
|