UNPKG

hotelier-lib

Version:

A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook

1,555 lines (1,535 loc) 3.16 MB
'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var React = require('react'); var ReactDOM = require('react-dom'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } function _interopNamespace(e) { if (e && e.__esModule) return e; var n = Object.create(null); if (e) { Object.keys(e).forEach(function (k) { if (k !== 'default') { var d = Object.getOwnPropertyDescriptor(e, k); Object.defineProperty(n, k, d.get ? d : { enumerable: true, get: function () { return e[k]; } }); } }); } n["default"] = e; return Object.freeze(n); } var React__namespace = /*#__PURE__*/_interopNamespace(React); var React__default = /*#__PURE__*/_interopDefaultLegacy(React); var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM); var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM); /****************************************************************************** Copyright (c) Microsoft Corporation. Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. ***************************************************************************** */ var __assign$2 = function() { __assign$2 = Object.assign || function __assign(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; return __assign$2.apply(this, arguments); }; function __rest$7(s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; } function __spreadArray$1(to, from, pack) { if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { if (ar || !(i in from)) { if (!ar) ar = Array.prototype.slice.call(from, 0, i); ar[i] = from[i]; } } return to.concat(ar || Array.prototype.slice.call(from)); } typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) { var e = new Error(message); return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e; }; function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); } /** * Set a given ref to a given value * This utility takes care of different types of refs: callback refs and RefObject(s) */ function $6ed0406888f73fc4$var$setRef$1(ref, value) { if (typeof ref === 'function') ref(value); else if (ref !== null && ref !== undefined) ref.current = value; } /** * A utility to compose multiple refs together * Accepts callback refs and RefObject(s) */ function $6ed0406888f73fc4$export$43e446d32b3d21af$1(...refs) { return (node)=>refs.forEach((ref)=>$6ed0406888f73fc4$var$setRef$1(ref, node) ) ; } /** * A custom hook that composes multiple refs * Accepts callback refs and RefObject(s) */ function $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(...refs) { // eslint-disable-next-line react-hooks/exhaustive-deps return React.useCallback($6ed0406888f73fc4$export$43e446d32b3d21af$1(...refs), refs); } /* ------------------------------------------------------------------------------------------------- * Slot * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$8c6ed5c666ac1360$1 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{ const { children: children , ...slotProps } = props; const childrenArray = React.Children.toArray(children); const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable$1); if (slottable) { // the new element to render is the one passed as a child of `Slottable` const newElement = slottable.props.children; const newChildren = childrenArray.map((child)=>{ if (child === slottable) { // because the new element will be the one rendered, we are only interested // in grabbing its children (`newElement.props.children`) if (React.Children.count(newElement) > 1) return React.Children.only(null); return /*#__PURE__*/ React.isValidElement(newElement) ? newElement.props.children : null; } else return child; }); return /*#__PURE__*/ React.createElement($5e63c961fc1ce211$var$SlotClone$1, _extends$o({}, slotProps, { ref: forwardedRef }), /*#__PURE__*/ React.isValidElement(newElement) ? /*#__PURE__*/ React.cloneElement(newElement, undefined, newChildren) : null); } return /*#__PURE__*/ React.createElement($5e63c961fc1ce211$var$SlotClone$1, _extends$o({}, slotProps, { ref: forwardedRef }), children); }); $5e63c961fc1ce211$export$8c6ed5c666ac1360$1.displayName = 'Slot'; /* ------------------------------------------------------------------------------------------------- * SlotClone * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$var$SlotClone$1 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{ const { children: children , ...slotProps } = props; if (/*#__PURE__*/ React.isValidElement(children)) return /*#__PURE__*/ React.cloneElement(children, { ...$5e63c961fc1ce211$var$mergeProps$1(slotProps, children.props), ref: forwardedRef ? $6ed0406888f73fc4$export$43e446d32b3d21af$1(forwardedRef, children.ref) : children.ref }); return React.Children.count(children) > 1 ? React.Children.only(null) : null; }); $5e63c961fc1ce211$var$SlotClone$1.displayName = 'SlotClone'; /* ------------------------------------------------------------------------------------------------- * Slottable * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$d9f1ccf0bdb05d45$1 = ({ children: children })=>{ return /*#__PURE__*/ React.createElement(React.Fragment, null, children); }; /* ---------------------------------------------------------------------------------------------- */ function $5e63c961fc1ce211$var$isSlottable$1(child) { return /*#__PURE__*/ React.isValidElement(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45$1; } function $5e63c961fc1ce211$var$mergeProps$1(slotProps, childProps) { // all child props should override const overrideProps = { ...childProps }; for(const propName in childProps){ const slotPropValue = slotProps[propName]; const childPropValue = childProps[propName]; const isHandler = /^on[A-Z]/.test(propName); if (isHandler) { // if the handler exists on both, we compose them if (slotPropValue && childPropValue) overrideProps[propName] = (...args)=>{ childPropValue(...args); slotPropValue(...args); }; else if (slotPropValue) overrideProps[propName] = slotPropValue; } else if (propName === 'style') overrideProps[propName] = { ...slotPropValue, ...childPropValue }; else if (propName === 'className') overrideProps[propName] = [ slotPropValue, childPropValue ].filter(Boolean).join(' '); } return { ...slotProps, ...overrideProps }; } function r$1(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r$1(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r$1(e))&&(n&&(n+=" "),n+=t);return n} const falsyToString = (value)=>typeof value === "boolean" ? "".concat(value) : value === 0 ? "0" : value; const cx = clsx; const cva = (base, config)=>{ return (props)=>{ var ref; if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className); const { variants , defaultVariants } = config; const getVariantClassNames = Object.keys(variants).map((variant)=>{ const variantProp = props === null || props === void 0 ? void 0 : props[variant]; const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant]; if (variantProp === null) return null; const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp); return variants[variant][variantKey]; }); const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param)=>{ let [key, value] = param; if (value === undefined) { return acc; } acc[key] = value; return acc; }, {}); const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (ref = config.compoundVariants) === null || ref === void 0 ? void 0 : ref.reduce((acc, param1)=>{ let { class: cvClass , className: cvClassName , ...compoundVariantOptions } = param1; return Object.entries(compoundVariantOptions).every((param)=>{ let [key, value] = param; return Array.isArray(value) ? value.includes({ ...defaultVariants, ...propsWithoutUndefined }[key]) : ({ ...defaultVariants, ...propsWithoutUndefined })[key] === value; }) ? [ ...acc, cvClass, cvClassName ] : acc; }, []); return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className); }; }; const CLASS_PART_SEPARATOR = '-'; function createClassUtils(config) { const classMap = createClassMap(config); const { conflictingClassGroups, conflictingClassGroupModifiers } = config; function getClassGroupId(className) { const classParts = className.split(CLASS_PART_SEPARATOR); // Classes like `-inset-1` produce an empty string as first classPart. We assume that classes for negative values are used correctly and remove it from classParts. if (classParts[0] === '' && classParts.length !== 1) { classParts.shift(); } return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className); } function getConflictingClassGroupIds(classGroupId, hasPostfixModifier) { const conflicts = conflictingClassGroups[classGroupId] || []; if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) { return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]]; } return conflicts; } return { getClassGroupId, getConflictingClassGroupIds }; } function getGroupRecursive(classParts, classPartObject) { if (classParts.length === 0) { return classPartObject.classGroupId; } const currentClassPart = classParts[0]; const nextClassPartObject = classPartObject.nextPart.get(currentClassPart); const classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive(classParts.slice(1), nextClassPartObject) : undefined; if (classGroupFromNextClassPart) { return classGroupFromNextClassPart; } if (classPartObject.validators.length === 0) { return undefined; } const classRest = classParts.join(CLASS_PART_SEPARATOR); return classPartObject.validators.find(({ validator }) => validator(classRest))?.classGroupId; } const arbitraryPropertyRegex = /^\[(.+)\]$/; function getGroupIdForArbitraryProperty(className) { if (arbitraryPropertyRegex.test(className)) { const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1]; const property = arbitraryPropertyClassName?.substring(0, arbitraryPropertyClassName.indexOf(':')); if (property) { // I use two dots here because one dot is used as prefix for class groups in plugins return 'arbitrary..' + property; } } } /** * Exported for testing only */ function createClassMap(config) { const { theme, prefix } = config; const classMap = { nextPart: new Map(), validators: [] }; const prefixedClassGroupEntries = getPrefixedClassGroupEntries(Object.entries(config.classGroups), prefix); prefixedClassGroupEntries.forEach(([classGroupId, classGroup]) => { processClassesRecursively(classGroup, classMap, classGroupId, theme); }); return classMap; } function processClassesRecursively(classGroup, classPartObject, classGroupId, theme) { classGroup.forEach(classDefinition => { if (typeof classDefinition === 'string') { const classPartObjectToEdit = classDefinition === '' ? classPartObject : getPart(classPartObject, classDefinition); classPartObjectToEdit.classGroupId = classGroupId; return; } if (typeof classDefinition === 'function') { if (isThemeGetter(classDefinition)) { processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme); return; } classPartObject.validators.push({ validator: classDefinition, classGroupId }); return; } Object.entries(classDefinition).forEach(([key, classGroup]) => { processClassesRecursively(classGroup, getPart(classPartObject, key), classGroupId, theme); }); }); } function getPart(classPartObject, path) { let currentClassPartObject = classPartObject; path.split(CLASS_PART_SEPARATOR).forEach(pathPart => { if (!currentClassPartObject.nextPart.has(pathPart)) { currentClassPartObject.nextPart.set(pathPart, { nextPart: new Map(), validators: [] }); } currentClassPartObject = currentClassPartObject.nextPart.get(pathPart); }); return currentClassPartObject; } function isThemeGetter(func) { return func.isThemeGetter; } function getPrefixedClassGroupEntries(classGroupEntries, prefix) { if (!prefix) { return classGroupEntries; } return classGroupEntries.map(([classGroupId, classGroup]) => { const prefixedClassGroup = classGroup.map(classDefinition => { if (typeof classDefinition === 'string') { return prefix + classDefinition; } if (typeof classDefinition === 'object') { return Object.fromEntries(Object.entries(classDefinition).map(([key, value]) => [prefix + key, value])); } return classDefinition; }); return [classGroupId, prefixedClassGroup]; }); } // LRU cache inspired from hashlru (https://github.com/dominictarr/hashlru/blob/v1.0.4/index.js) but object replaced with Map to improve performance function createLruCache(maxCacheSize) { if (maxCacheSize < 1) { return { get: () => undefined, set: () => {} }; } let cacheSize = 0; let cache = new Map(); let previousCache = new Map(); function update(key, value) { cache.set(key, value); cacheSize++; if (cacheSize > maxCacheSize) { cacheSize = 0; previousCache = cache; cache = new Map(); } } return { get(key) { let value = cache.get(key); if (value !== undefined) { return value; } if ((value = previousCache.get(key)) !== undefined) { update(key, value); return value; } }, set(key, value) { if (cache.has(key)) { cache.set(key, value); } else { update(key, value); } } }; } const IMPORTANT_MODIFIER = '!'; function createSplitModifiers(config) { const separator = config.separator; const isSeparatorSingleCharacter = separator.length === 1; const firstSeparatorCharacter = separator[0]; const separatorLength = separator.length; // splitModifiers inspired by https://github.com/tailwindlabs/tailwindcss/blob/v3.2.2/src/util/splitAtTopLevelOnly.js return function splitModifiers(className) { const modifiers = []; let bracketDepth = 0; let modifierStart = 0; let postfixModifierPosition; for (let index = 0; index < className.length; index++) { let currentCharacter = className[index]; if (bracketDepth === 0) { if (currentCharacter === firstSeparatorCharacter && (isSeparatorSingleCharacter || className.slice(index, index + separatorLength) === separator)) { modifiers.push(className.slice(modifierStart, index)); modifierStart = index + separatorLength; continue; } if (currentCharacter === '/') { postfixModifierPosition = index; continue; } } if (currentCharacter === '[') { bracketDepth++; } else if (currentCharacter === ']') { bracketDepth--; } } const baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.substring(modifierStart); const hasImportantModifier = baseClassNameWithImportantModifier.startsWith(IMPORTANT_MODIFIER); const baseClassName = hasImportantModifier ? baseClassNameWithImportantModifier.substring(1) : baseClassNameWithImportantModifier; const maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : undefined; return { modifiers, hasImportantModifier, baseClassName, maybePostfixModifierPosition }; }; } /** * Sorts modifiers according to following schema: * - Predefined modifiers are sorted alphabetically * - When an arbitrary variant appears, it must be preserved which modifiers are before and after it */ function sortModifiers(modifiers) { if (modifiers.length <= 1) { return modifiers; } const sortedModifiers = []; let unsortedModifiers = []; modifiers.forEach(modifier => { const isArbitraryVariant = modifier[0] === '['; if (isArbitraryVariant) { sortedModifiers.push(...unsortedModifiers.sort(), modifier); unsortedModifiers = []; } else { unsortedModifiers.push(modifier); } }); sortedModifiers.push(...unsortedModifiers.sort()); return sortedModifiers; } function createConfigUtils(config) { return { cache: createLruCache(config.cacheSize), splitModifiers: createSplitModifiers(config), ...createClassUtils(config) }; } const SPLIT_CLASSES_REGEX = /\s+/; function mergeClassList(classList, configUtils) { const { splitModifiers, getClassGroupId, getConflictingClassGroupIds } = configUtils; /** * Set of classGroupIds in following format: * `{importantModifier}{variantModifiers}{classGroupId}` * @example 'float' * @example 'hover:focus:bg-color' * @example 'md:!pr' */ const classGroupsInConflict = new Set(); return classList.trim().split(SPLIT_CLASSES_REGEX).map(originalClassName => { const { modifiers, hasImportantModifier, baseClassName, maybePostfixModifierPosition } = splitModifiers(originalClassName); let classGroupId = getClassGroupId(maybePostfixModifierPosition ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName); let hasPostfixModifier = Boolean(maybePostfixModifierPosition); if (!classGroupId) { if (!maybePostfixModifierPosition) { return { isTailwindClass: false, originalClassName }; } classGroupId = getClassGroupId(baseClassName); if (!classGroupId) { return { isTailwindClass: false, originalClassName }; } hasPostfixModifier = false; } const variantModifier = sortModifiers(modifiers).join(':'); const modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier; return { isTailwindClass: true, modifierId, classGroupId, originalClassName, hasPostfixModifier }; }).reverse() // Last class in conflict wins, so we need to filter conflicting classes in reverse order. .filter(parsed => { if (!parsed.isTailwindClass) { return true; } const { modifierId, classGroupId, hasPostfixModifier } = parsed; const classId = modifierId + classGroupId; if (classGroupsInConflict.has(classId)) { return false; } classGroupsInConflict.add(classId); getConflictingClassGroupIds(classGroupId, hasPostfixModifier).forEach(group => classGroupsInConflict.add(modifierId + group)); return true; }).reverse().map(parsed => parsed.originalClassName).join(' '); } /** * The code in this file is copied from https://github.com/lukeed/clsx and modified to suit the needs of tailwind-merge better. * * Specifically: * - Runtime code from https://github.com/lukeed/clsx/blob/v1.2.1/src/index.js * - TypeScript types from https://github.com/lukeed/clsx/blob/v1.2.1/clsx.d.ts * * Original code has MIT license: Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com) */ function twJoin() { let index = 0; let argument; let resolvedValue; let string = ''; while (index < arguments.length) { if (argument = arguments[index++]) { if (resolvedValue = toValue(argument)) { string && (string += ' '); string += resolvedValue; } } } return string; } function toValue(mix) { if (typeof mix === 'string') { return mix; } let resolvedValue; let string = ''; for (let k = 0; k < mix.length; k++) { if (mix[k]) { if (resolvedValue = toValue(mix[k])) { string && (string += ' '); string += resolvedValue; } } } return string; } function createTailwindMerge(createConfigFirst, ...createConfigRest) { let configUtils; let cacheGet; let cacheSet; let functionToCall = initTailwindMerge; function initTailwindMerge(classList) { const config = createConfigRest.reduce((previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig), createConfigFirst()); configUtils = createConfigUtils(config); cacheGet = configUtils.cache.get; cacheSet = configUtils.cache.set; functionToCall = tailwindMerge; return tailwindMerge(classList); } function tailwindMerge(classList) { const cachedResult = cacheGet(classList); if (cachedResult) { return cachedResult; } const result = mergeClassList(classList, configUtils); cacheSet(classList, result); return result; } return function callTailwindMerge() { return functionToCall(twJoin.apply(null, arguments)); }; } function fromTheme(key) { const themeGetter = theme => theme[key] || []; themeGetter.isThemeGetter = true; return themeGetter; } const arbitraryValueRegex = /^\[(?:([a-z-]+):)?(.+)\]$/i; const fractionRegex = /^\d+\/\d+$/; const stringLengths = /*#__PURE__*/new Set(['px', 'full', 'screen']); const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/; 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$/; // Shadow always begins with x and y offset separated by underscore const shadowRegex = /^-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/; const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/; function isLength$1(value) { return isNumber$2(value) || stringLengths.has(value) || fractionRegex.test(value); } function isArbitraryLength(value) { return getIsArbitraryValue(value, 'length', isLengthOnly); } function isNumber$2(value) { return Boolean(value) && !Number.isNaN(Number(value)); } function isArbitraryNumber(value) { return getIsArbitraryValue(value, 'number', isNumber$2); } function isInteger(value) { return Boolean(value) && Number.isInteger(Number(value)); } function isPercent$1(value) { return value.endsWith('%') && isNumber$2(value.slice(0, -1)); } function isArbitraryValue(value) { return arbitraryValueRegex.test(value); } function isTshirtSize(value) { return tshirtUnitRegex.test(value); } const sizeLabels = /*#__PURE__*/new Set(['length', 'size', 'percentage']); function isArbitrarySize(value) { return getIsArbitraryValue(value, sizeLabels, isNever); } function isArbitraryPosition(value) { return getIsArbitraryValue(value, 'position', isNever); } const imageLabels = /*#__PURE__*/new Set(['image', 'url']); function isArbitraryImage(value) { return getIsArbitraryValue(value, imageLabels, isImage); } function isArbitraryShadow(value) { return getIsArbitraryValue(value, '', isShadow); } function isAny() { return true; } function getIsArbitraryValue(value, label, testValue) { const result = arbitraryValueRegex.exec(value); if (result) { if (result[1]) { return typeof label === 'string' ? result[1] === label : label.has(result[1]); } return testValue(result[2]); } return false; } function isLengthOnly(value) { return lengthUnitRegex.test(value); } function isNever() { return false; } function isShadow(value) { return shadowRegex.test(value); } function isImage(value) { return imageRegex.test(value); } function getDefaultConfig() { const colors = fromTheme('colors'); const spacing = fromTheme('spacing'); const blur = fromTheme('blur'); const brightness = fromTheme('brightness'); const borderColor = fromTheme('borderColor'); const borderRadius = fromTheme('borderRadius'); const borderSpacing = fromTheme('borderSpacing'); const borderWidth = fromTheme('borderWidth'); const contrast = fromTheme('contrast'); const grayscale = fromTheme('grayscale'); const hueRotate = fromTheme('hueRotate'); const invert = fromTheme('invert'); const gap = fromTheme('gap'); const gradientColorStops = fromTheme('gradientColorStops'); const gradientColorStopPositions = fromTheme('gradientColorStopPositions'); const inset = fromTheme('inset'); const margin = fromTheme('margin'); const opacity = fromTheme('opacity'); const padding = fromTheme('padding'); const saturate = fromTheme('saturate'); const scale = fromTheme('scale'); const sepia = fromTheme('sepia'); const skew = fromTheme('skew'); const space = fromTheme('space'); const translate = fromTheme('translate'); const getOverscroll = () => ['auto', 'contain', 'none']; const getOverflow = () => ['auto', 'hidden', 'clip', 'visible', 'scroll']; const getSpacingWithAutoAndArbitrary = () => ['auto', isArbitraryValue, spacing]; const getSpacingWithArbitrary = () => [isArbitraryValue, spacing]; const getLengthWithEmptyAndArbitrary = () => ['', isLength$1, isArbitraryLength]; const getNumberWithAutoAndArbitrary = () => ['auto', isNumber$2, isArbitraryValue]; const getPositions = () => ['bottom', 'center', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top', 'top']; const getLineStyles = () => ['solid', 'dashed', 'dotted', 'double', 'none']; const getBlendModes = () => ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity', 'plus-lighter']; const getAlign = () => ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch']; const getZeroAndEmpty = () => ['', '0', isArbitraryValue]; const getBreaks = () => ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column']; const getNumber = () => [isNumber$2, isArbitraryNumber]; const getNumberAndArbitrary = () => [isNumber$2, isArbitraryValue]; return { cacheSize: 500, separator: ':', theme: { colors: [isAny], spacing: [isLength$1, isArbitraryLength], blur: ['none', '', isTshirtSize, isArbitraryValue], brightness: getNumber(), borderColor: [colors], borderRadius: ['none', '', 'full', isTshirtSize, isArbitraryValue], borderSpacing: getSpacingWithArbitrary(), borderWidth: getLengthWithEmptyAndArbitrary(), contrast: getNumber(), grayscale: getZeroAndEmpty(), hueRotate: getNumberAndArbitrary(), invert: getZeroAndEmpty(), gap: getSpacingWithArbitrary(), gradientColorStops: [colors], gradientColorStopPositions: [isPercent$1, isArbitraryLength], inset: getSpacingWithAutoAndArbitrary(), margin: getSpacingWithAutoAndArbitrary(), opacity: getNumber(), padding: getSpacingWithArbitrary(), saturate: getNumber(), scale: getNumber(), sepia: getZeroAndEmpty(), skew: getNumberAndArbitrary(), space: getSpacingWithArbitrary(), translate: getSpacingWithArbitrary() }, classGroups: { // Layout /** * Aspect Ratio * @see https://tailwindcss.com/docs/aspect-ratio */ aspect: [{ aspect: ['auto', 'square', 'video', isArbitraryValue] }], /** * Container * @see https://tailwindcss.com/docs/container */ container: ['container'], /** * Columns * @see https://tailwindcss.com/docs/columns */ columns: [{ columns: [isTshirtSize] }], /** * Break After * @see https://tailwindcss.com/docs/break-after */ 'break-after': [{ 'break-after': getBreaks() }], /** * Break Before * @see https://tailwindcss.com/docs/break-before */ 'break-before': [{ 'break-before': getBreaks() }], /** * Break Inside * @see https://tailwindcss.com/docs/break-inside */ 'break-inside': [{ 'break-inside': ['auto', 'avoid', 'avoid-page', 'avoid-column'] }], /** * Box Decoration Break * @see https://tailwindcss.com/docs/box-decoration-break */ 'box-decoration': [{ 'box-decoration': ['slice', 'clone'] }], /** * Box Sizing * @see https://tailwindcss.com/docs/box-sizing */ box: [{ box: ['border', 'content'] }], /** * Display * @see https://tailwindcss.com/docs/display */ 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'], /** * Floats * @see https://tailwindcss.com/docs/float */ float: [{ float: ['right', 'left', 'none'] }], /** * Clear * @see https://tailwindcss.com/docs/clear */ clear: [{ clear: ['left', 'right', 'both', 'none'] }], /** * Isolation * @see https://tailwindcss.com/docs/isolation */ isolation: ['isolate', 'isolation-auto'], /** * Object Fit * @see https://tailwindcss.com/docs/object-fit */ 'object-fit': [{ object: ['contain', 'cover', 'fill', 'none', 'scale-down'] }], /** * Object Position * @see https://tailwindcss.com/docs/object-position */ 'object-position': [{ object: [...getPositions(), isArbitraryValue] }], /** * Overflow * @see https://tailwindcss.com/docs/overflow */ overflow: [{ overflow: getOverflow() }], /** * Overflow X * @see https://tailwindcss.com/docs/overflow */ 'overflow-x': [{ 'overflow-x': getOverflow() }], /** * Overflow Y * @see https://tailwindcss.com/docs/overflow */ 'overflow-y': [{ 'overflow-y': getOverflow() }], /** * Overscroll Behavior * @see https://tailwindcss.com/docs/overscroll-behavior */ overscroll: [{ overscroll: getOverscroll() }], /** * Overscroll Behavior X * @see https://tailwindcss.com/docs/overscroll-behavior */ 'overscroll-x': [{ 'overscroll-x': getOverscroll() }], /** * Overscroll Behavior Y * @see https://tailwindcss.com/docs/overscroll-behavior */ 'overscroll-y': [{ 'overscroll-y': getOverscroll() }], /** * Position * @see https://tailwindcss.com/docs/position */ position: ['static', 'fixed', 'absolute', 'relative', 'sticky'], /** * Top / Right / Bottom / Left * @see https://tailwindcss.com/docs/top-right-bottom-left */ inset: [{ inset: [inset] }], /** * Right / Left * @see https://tailwindcss.com/docs/top-right-bottom-left */ 'inset-x': [{ 'inset-x': [inset] }], /** * Top / Bottom * @see https://tailwindcss.com/docs/top-right-bottom-left */ 'inset-y': [{ 'inset-y': [inset] }], /** * Start * @see https://tailwindcss.com/docs/top-right-bottom-left */ start: [{ start: [inset] }], /** * End * @see https://tailwindcss.com/docs/top-right-bottom-left */ end: [{ end: [inset] }], /** * Top * @see https://tailwindcss.com/docs/top-right-bottom-left */ top: [{ top: [inset] }], /** * Right * @see https://tailwindcss.com/docs/top-right-bottom-left */ right: [{ right: [inset] }], /** * Bottom * @see https://tailwindcss.com/docs/top-right-bottom-left */ bottom: [{ bottom: [inset] }], /** * Left * @see https://tailwindcss.com/docs/top-right-bottom-left */ left: [{ left: [inset] }], /** * Visibility * @see https://tailwindcss.com/docs/visibility */ visibility: ['visible', 'invisible', 'collapse'], /** * Z-Index * @see https://tailwindcss.com/docs/z-index */ z: [{ z: ['auto', isInteger, isArbitraryValue] }], // Flexbox and Grid /** * Flex Basis * @see https://tailwindcss.com/docs/flex-basis */ basis: [{ basis: getSpacingWithAutoAndArbitrary() }], /** * Flex Direction * @see https://tailwindcss.com/docs/flex-direction */ 'flex-direction': [{ flex: ['row', 'row-reverse', 'col', 'col-reverse'] }], /** * Flex Wrap * @see https://tailwindcss.com/docs/flex-wrap */ 'flex-wrap': [{ flex: ['wrap', 'wrap-reverse', 'nowrap'] }], /** * Flex * @see https://tailwindcss.com/docs/flex */ flex: [{ flex: ['1', 'auto', 'initial', 'none', isArbitraryValue] }], /** * Flex Grow * @see https://tailwindcss.com/docs/flex-grow */ grow: [{ grow: getZeroAndEmpty() }], /** * Flex Shrink * @see https://tailwindcss.com/docs/flex-shrink */ shrink: [{ shrink: getZeroAndEmpty() }], /** * Order * @see https://tailwindcss.com/docs/order */ order: [{ order: ['first', 'last', 'none', isInteger, isArbitraryValue] }], /** * Grid Template Columns * @see https://tailwindcss.com/docs/grid-template-columns */ 'grid-cols': [{ 'grid-cols': [isAny] }], /** * Grid Column Start / End * @see https://tailwindcss.com/docs/grid-column */ 'col-start-end': [{ col: ['auto', { span: ['full', isInteger, isArbitraryValue] }, isArbitraryValue] }], /** * Grid Column Start * @see https://tailwindcss.com/docs/grid-column */ 'col-start': [{ 'col-start': getNumberWithAutoAndArbitrary() }], /** * Grid Column End * @see https://tailwindcss.com/docs/grid-column */ 'col-end': [{ 'col-end': getNumberWithAutoAndArbitrary() }], /** * Grid Template Rows * @see https://tailwindcss.com/docs/grid-template-rows */ 'grid-rows': [{ 'grid-rows': [isAny] }], /** * Grid Row Start / End * @see https://tailwindcss.com/docs/grid-row */ 'row-start-end': [{ row: ['auto', { span: [isInteger, isArbitraryValue] }, isArbitraryValue] }], /** * Grid Row Start * @see https://tailwindcss.com/docs/grid-row */ 'row-start': [{ 'row-start': getNumberWithAutoAndArbitrary() }], /** * Grid Row End * @see https://tailwindcss.com/docs/grid-row */ 'row-end': [{ 'row-end': getNumberWithAutoAndArbitrary() }], /** * Grid Auto Flow * @see https://tailwindcss.com/docs/grid-auto-flow */ 'grid-flow': [{ 'grid-flow': ['row', 'col', 'dense', 'row-dense', 'col-dense'] }], /** * Grid Auto Columns * @see https://tailwindcss.com/docs/grid-auto-columns */ 'auto-cols': [{ 'auto-cols': ['auto', 'min', 'max', 'fr', isArbitraryValue] }], /** * Grid Auto Rows * @see https://tailwindcss.com/docs/grid-auto-rows */ 'auto-rows': [{ 'auto-rows': ['auto', 'min', 'max', 'fr', isArbitraryValue] }], /** * Gap * @see https://tailwindcss.com/docs/gap */ gap: [{ gap: [gap] }], /** * Gap X * @see https://tailwindcss.com/docs/gap */ 'gap-x': [{ 'gap-x': [gap] }], /** * Gap Y * @see https://tailwindcss.com/docs/gap */ 'gap-y': [{ 'gap-y': [gap] }], /** * Justify Content * @see https://tailwindcss.com/docs/justify-content */ 'justify-content': [{ justify: ['normal', ...getAlign()] }], /** * Justify Items * @see https://tailwindcss.com/docs/justify-items */ 'justify-items': [{ 'justify-items': ['start', 'end', 'center', 'stretch'] }], /** * Justify Self * @see https://tailwindcss.com/docs/justify-self */ 'justify-self': [{ 'justify-self': ['auto', 'start', 'end', 'center', 'stretch'] }], /** * Align Content * @see https://tailwindcss.com/docs/align-content */ 'align-content': [{ content: ['normal', ...getAlign(), 'baseline'] }], /** * Align Items * @see https://tailwindcss.com/docs/align-items */ 'align-items': [{ items: ['start', 'end', 'center', 'baseline', 'stretch'] }], /** * Align Self * @see https://tailwindcss.com/docs/align-self */ 'align-self': [{ self: ['auto', 'start', 'end', 'center', 'stretch', 'baseline'] }], /** * Place Content * @see https://tailwindcss.com/docs/place-content */ 'place-content': [{ 'place-content': [...getAlign(), 'baseline'] }], /** * Place Items * @see https://tailwindcss.com/docs/place-items */ 'place-items': [{ 'place-items': ['start', 'end', 'center', 'baseline', 'stretch'] }], /** * Place Self * @see https://tailwindcss.com/docs/place-self */ 'place-self': [{ 'place-self': ['auto', 'start', 'end', 'center', 'stretch'] }], // Spacing /** * Padding * @see https://tailwindcss.com/docs/padding */ p: [{ p: [padding] }], /** * Padding X * @see https://tailwindcss.com/docs/padding */ px: [{ px: [padding] }], /** * Padding Y * @see https://tailwindcss.com/docs/padding */ py: [{ py: [padding] }], /** * Padding Start * @see https://tailwindcss.com/docs/padding */ ps: [{ ps: [padding] }], /** * Padding End * @see https://tailwindcss.com/docs/padding */ pe: [{ pe: [padding] }], /** * Padding Top * @see https://tailwindcss.com/docs/padding */ pt: [{ pt: [padding] }], /** * Padding Right * @see https://tailwindcss.com/docs/padding */ pr: [{ pr: [padding] }], /** * Padding Bottom * @see https://tailwindcss.com/docs/padding */ pb: [{ pb: [padding] }], /** * Padding Left * @see https://tailwindcss.com/docs/padding */ pl: [{ pl: [padding] }], /** * Margin * @see https://tailwindcss.com/docs/margin */ m: [{ m: [margin] }], /** * Margin X * @see https://tailwindcss.com/docs/margin */ mx: [{ mx: [margin] }], /** * Margin Y * @see https://tailwindcss.com/docs/margin */ my: [{ my: [margin] }], /** * Margin Start * @see https://tailwindcss.com/docs/margin */ ms: [{ ms: [margin] }], /** * Margin End * @see https://tailwindcss.com/docs/margin */ me: [{ me: [margin] }], /** * Margin Top * @see https://tailwindcss.com/docs/margin */ mt: [{ mt: [margin] }], /** * Margin Right * @see https://tailwindcss.com/docs/margin */ mr: [{ mr: [margin] }], /** * Margin Bottom * @see https://tailwindcss.com/docs/margin */ mb: [{ mb: [margin] }], /** * Margin Left * @see https://tailwindcss.com/docs/margin */ ml: [{ ml: [margin] }], /** * Space Between X * @see https://tailwindcss.com/docs/space */ 'space-x': [{ 'space-x': [space] }], /** * Space Between X Reverse * @see https://tailwindcss.com/docs/space */ 'space-x-reverse': ['space-x-reverse'], /** * Space Between Y * @see https://tailwindcss.com/docs/space */ 'space-y': [{ 'space-y': [space] }], /** * Space Between Y Reverse * @see https://tailwindcss.com/docs/space */ 'space-y-reverse': ['space-y-reverse'], // Sizing /** * Width * @see https://tailwindcss.com/docs/width */ w: [{ w: ['auto', 'min', 'max', 'fit', isArbitraryValue, spacing] }], /** * Min-Width * @see https://tailwindcss.com/docs/min-width */ 'min-w': [{ 'min-w': ['min', 'max', 'fit', isArbitraryValue, isLength$1] }], /** * Max-Width * @see https://tailwindcss.com/docs/max-width */ 'max-w': [{ 'max-w': ['0', 'none', 'full', 'min', 'max', 'fit', 'prose', { screen: [isTshirtSize] }, isTshirtSize, isArbitraryValue] }], /** * Height * @see https://tailwindcss.com/docs/height */ h: [{ h: [isArbitraryValue, spacing, 'auto', 'min', 'max', 'fit'] }], /** * Min-Height * @see https://tailwindcss.com/docs/min-height */ 'min-h': [{ 'min-h': ['min', 'max', 'fit', isLength$1, isArbitraryValue] }], /** * Max-Height * @see https://tailwindcss.com/docs/max-height */ 'max-h': [{ 'max-h': [isArbitraryValue, spacing, 'min', 'max', 'fit'] }], // Typography /** * Font Size * @see https://tailwindcss.com/docs/font-size */ 'font-size': [{ text: ['base', isTshirtSize, isArbitraryLength] }], /** * Font Smoothing * @see https://tailwindcss.com/docs/font-smoothing */ 'font-smoothing': ['antialiased', 'subpixel-antialiased'], /** * Font Style * @see https://tailwindcss.com/docs/font-style */ 'font-style': ['italic', 'not-italic'], /** * Font Weight * @see https://tailwindcss.com/docs/font-weight */ 'font-weight': [{ font: ['thin', 'extralight', 'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold', 'black', isArbitraryNumber] }], /** * Font Family * @see https://tailwindcss.com/docs/font-family */ 'font-family': [{ font: [isAny] }], /** * Font Variant Numeric * @see https://tailwindcss.com/docs/font-variant-numeric */ 'fvn-normal': ['normal-nums'], /** * Font Variant Numeric * @see https://tailwindcss.com/docs/font-variant-numeric */ 'fvn-ordinal': ['ordinal'], /** * Font Variant Numeric * @see https://tailwindcss.com/docs/font-variant-numeric */ 'fvn-slashed-zero': ['slashed-zero'], /** * Font Variant Numeric * @see https://tailwindcss.com/docs/font-variant-numeric */ 'fvn-figure': ['lining-nums', 'oldstyle-nums'], /** * Font Variant Numeric * @see https://tailwindcss.com/docs/font-variant-numeric */ 'fvn-spacing': ['proportional-nums', 'tabular-nums'], /** * Font Variant Numeric * @see https://tailwindcss.com/docs/font-variant-numeric */ 'fvn-fraction': ['diagonal-fractions', 'stacked-fractons'], /** * Letter Spacing * @see https://tailwindcss.com/docs/letter-spacing */ tracking: [{ tracking: ['tighter', 'tight', 'normal', 'wide', 'wider', 'widest', isArbitraryValue] }], /** * Line Clamp * @see https://tailwindcss.com/docs/line-clamp */ 'line-clamp': [{ 'line-clamp': ['none', isNumber$2, isArbitraryNumber] }], /** * Line Height * @see https://tailwindcss.com/docs/line-height */ leading: [{ leading: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose', isLength$1, isArbitraryValue] }], /** * List Style Image * @see https://tailwindcss.com/docs/list-style-image */ 'list-image': [{ 'list-image': ['none', isArbitraryValue] }], /** * List Style Type * @see https://tailwindcss.com/docs/list-style-type */ 'list-style-type': [{ list: ['none', 'disc', 'decimal', isArbitraryValue] }], /** * List Style Position * @see https://tailwindcss.com/docs/list-style-position */ 'list-style-position': [{ list: ['inside', 'outside'] }], /** * Placeholder Color * @deprecated since Tailwind CSS v3.0.0 * @see https://tailwindcss.com/docs/placeholder-color */ 'placeholder-color': [{ placeholder: [colors] }], /** * Placeholder Opacity * @see https://tailwindcss.com/docs/placeholder-opacity */ 'placeholder-opacity': [{ 'placeholder-opacity': [opacity] }], /** * Text Alignment * @see https://tailwindcss.com/docs/text-align */ 'text-alignment': [{ text: ['left', 'center', 'right', 'justify', 'start', 'end'] }], /** * Text Color * @see https://tailwindcss.com/docs/text-color */ 'text-color': [{ text: [colors] }], /** * Text Opacity * @see https://tailwindcss.com/docs/text-opacity */ 'text-opacity': [{ 'text-opacity': [opacity] }], /** * Text Decoration * @see https://tailwindcss.com/docs/text-decoration */ 'text-decoration': ['underline', 'overline', 'line-through', 'no-underline'], /** * Text Decoration Style * @see https://tailwindcss.com/docs/text-decoration-style */ 'text-decoration-style': [{ decoration: [...getLineStyles(), 'wavy'] }], /** * Text Decoration Thickness * @see https://tailwindcss.com/docs/text-decoration-thickness */ 'text-decoration-thickness': [{ decora