diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..7259cda --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,28 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "name": "Next.js: debug server-side", + "type": "node-terminal", + "request": "launch", + "command": "yarn dev" + }, + { + "name": "Next.js: debug client-side", + "type": "chrome", + "request": "launch", + "url": "http://localhost:3000" + }, + { + "name": "Next.js: debug full stack", + "type": "node-terminal", + "request": "launch", + "command": "yarn dev", + "serverReadyAction": { + "pattern": "started server on .+, url: (https?://.+)", + "uriFormat": "%s", + "action": "debugWithChrome" + } + } + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..ffd2a5e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,17 @@ +{ + "breadcrumbs.enabled": true, + "editor.cursorBlinking": "smooth", + "editor.wordWrap": "on", + "editor.bracketPairColorization.enabled": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true, + "editor.codeActionsOnSave": { + "source.fixAll": "explicit", + "source.organizeImports": "explicit" + }, + "terminal.integrated.cursorBlinking": true, + "search.exclude": { + "**/*./node_modules": true, + "**/node_modules": false + } +} diff --git a/packages/avail-wallet/.gitignore b/packages/avail-wallet/.gitignore index 1521c8b..a547bf3 100644 --- a/packages/avail-wallet/.gitignore +++ b/packages/avail-wallet/.gitignore @@ -1 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/packages/avail-wallet/README.md b/packages/avail-wallet/README.md index 0395c5e..da98444 100644 --- a/packages/avail-wallet/README.md +++ b/packages/avail-wallet/README.md @@ -1,235 +1,54 @@ -# Avail Wallet Package +# React + TypeScript + Vite -## Overview -This package provides React components and hooks for integrating Avail wallets into your application. It includes both wallet connection functionality and styled UI components with all required fonts and assets bundled. +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. -## Installation -```bash -pnpm install avail-wallet -``` - -## Basic Usage -Here's how to properly set up your application with this package: - -### Next.js App Router Setup - -```tsx -// In your app/providers.tsx -"use client"; - -import { AvailWalletProvider } from 'avail-wallet'; -// Styles are automatically imported from the package -// No need to separately import CSS files or add fonts! - -export function Providers({ children }) { - return ( - - {children} - - ); -} - -// In your app/layout.tsx -import { Providers } from './providers'; -import './globals.css'; - -export default function RootLayout({ children }) { - return ( - - - - {children} - - - - ); -} -``` - -### Next.js Pages Router Setup - -```tsx -// In your _app.tsx or root component -import { AvailWalletProvider } from 'avail-wallet'; -// Styles are automatically imported from the package -import '../styles/globals.css'; - -function App({ Component, pageProps }) { - return ( - - - - ); -} - -export default App; -``` - -## Persistence -The wallet state is automatically persisted in your browser's localStorage. This means users will remain connected to their wallets between sessions without having to reconnect every time they visit your application. - -## Components - -### Wallet Components - -#### AvailWalletProvider -Provides the wallet context to your application with built-in localStorage persistence. - -#### AvailWalletConnect -A component for connecting to Avail wallets with a styled UI. - -#### AccountSelector -Allows users to select an account from their wallet with a styled UI. - -#### DisconnectWallet -Provides UI for disconnecting from a wallet. - -#### WalletSelector -Allows users to select which wallet provider to connect with. - -### UI Components - -The package includes several UI components that are used by the wallet components but can also be used independently: - -#### Button -A customizable button component with various styles and variants. - -#### Badge -A customizable badge component with different style variants. - -#### Dialog -A modal dialog component with header, footer, title, and description components. - -## Hooks - -### useAvailWallet -Access the wallet context, including connection state and API. +Currently, two official plugins are available: -### useAvailAccount -Access and manage the selected account. +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh -### useApi -Access the Avail API. +## Expanding the ESLint configuration -### MetaMask Hooks -The package also includes hooks for MetaMask integration: - -#### useMetaMask -Access the MetaMask wallet state. - -#### useMetaMaskContext -Access the MetaMask context. - -#### useRequestSnap -Request the Avail snap for MetaMask. - -#### useInvokeSnap -Invoke methods on the Avail snap for MetaMask. - -## Examples - -### Basic Wallet Connection -```tsx -import { useAvailWallet, AvailWalletConnect } from 'avail-wallet'; - -function MyComponent() { - const { isConnected, api } = useAvailWallet(); - - return ( -
- - {isConnected ? 'Connected to wallet' : 'Not connected'} -
- ); -} -``` - -### Using UI Components -```tsx -import { Button, Badge, Dialog, DialogContent, DialogHeader, DialogTitle } from 'avail-wallet'; - -function MyUIComponent() { - return ( -
- - Avail Network - - - - - Select a Wallet - - {/* Dialog content here */} - - -
- ); -} -``` - -## Styling Information - -### Included Assets -This package includes the following assets bundled and ready to use: - -- **Fonts**: All required fonts (PP Mori and THICCCBOI variants) -- **Images**: The availsnap.png image for MetaMask integration - -### Custom Styling -You can override the default styles by targeting the classes with higher specificity in your own CSS: - -```css -/* In your custom CSS file */ -.aw-button-primary { - background-color: #YOUR_CUSTOM_COLOR !important; -} -``` - -### Tailwind CSS -If you're using Tailwind CSS, ensure your content configuration includes the package components: +If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: ```js -// tailwind.config.js -module.exports = { - content: [ - // ...your other content paths - './node_modules/avail-wallet/**/*.{js,ts,jsx,tsx}' +export default tseslint.config({ + extends: [ + // Remove ...tseslint.configs.recommended and replace with this + ...tseslint.configs.recommendedTypeChecked, + // Alternatively, use this for stricter rules + ...tseslint.configs.strictTypeChecked, + // Optionally, add this for stylistic rules + ...tseslint.configs.stylisticTypeChecked, ], - // ...rest of your config -} -``` - -## TypeScript Support - -The package includes TypeScript types for all components and hooks: - -```tsx -import type { - UpdateMetadataParams, - WalletSelectionProps, - AccountSelectionProps, - DisconnectWalletProps, - ExtendedWalletAccount, - AvailWalletProviderProps, - AvailWalletConnectProps -} from 'avail-wallet'; + languageOptions: { + // other options... + parserOptions: { + project: ['./tsconfig.node.json', './tsconfig.app.json'], + tsconfigRootDir: import.meta.dirname, + }, + }, +}) ``` -## Utility Functions and Assets - -The package provides several utility functions and asset paths: - -### Utility Functions -- `updateMetadata`: Update metadata for wallet accounts -- `getInjectorMetadata`: Get metadata for wallet injectors -- `initApi`: Initialize the Avail API +You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: -### Asset Paths -Asset paths are exposed for advanced use cases if needed: - -```tsx -import { ASSETS_PATH } from 'avail-wallet'; - -console.log(ASSETS_PATH.fonts.PPMoriRegular); // Path to the PP Mori Regular font -console.log(ASSETS_PATH.images.availSnap); // Path to the Avail Snap image +```js +// eslint.config.js +import reactX from 'eslint-plugin-react-x' +import reactDom from 'eslint-plugin-react-dom' + +export default tseslint.config({ + plugins: { + // Add the react-x and react-dom plugins + 'react-x': reactX, + 'react-dom': reactDom, + }, + rules: { + // other rules... + // Enable its recommended typescript rules + ...reactX.configs['recommended-typescript'].rules, + ...reactDom.configs.recommended.rules, + }, +}) ``` diff --git a/packages/avail-wallet/components.json b/packages/avail-wallet/components.json new file mode 100644 index 0000000..d2fe84c --- /dev/null +++ b/packages/avail-wallet/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": false, + "tsx": true, + "tailwind": { + "config": "", + "css": "src/lib/index.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "iconLibrary": "lucide" +} \ No newline at end of file diff --git a/packages/avail-wallet/dist/index.d.ts b/packages/avail-wallet/dist/index.d.ts deleted file mode 100644 index 44281aa..0000000 --- a/packages/avail-wallet/dist/index.d.ts +++ /dev/null @@ -1,26 +0,0 @@ -export { Button } from "./components/ui/Button"; -export { Badge } from "./components/ui/Badge"; -export { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription, } from "./components/ui/Dialog"; -export { AvailWalletConnect } from "./components/wallets/AvailWalletConnect"; -export { AccountSelector } from "./components/wallets/AccountSelector"; -export { DisconnectWallet } from "./components/wallets/DisconnectWallet"; -export { WalletSelector } from "./components/wallets/WalletSelector"; -export { AvailWalletProvider, useAvailWallet, } from "./components/wallets/AvailWalletProvider"; -export { useAvailAccount } from "./stores/availwallet"; -export { useApi } from "./stores/api"; -export { MetaMaskContext, MetaMaskProvider, useMetaMaskContext, useInvokeSnap, useMetaMask, useRequestSnap, } from "./hooks/metamask"; -export declare const ASSETS_PATH: { - fonts: { - PPMoriRegular: string; - PPMoriSemiBold: string; - ThicccboiBold: string; - ThicccboiMedium: string; - ThicccboiRegular: string; - ThicccboiSemiBold: string; - }; - images: { - availSnap: string; - }; -}; -export type { UpdateMetadataParams, WalletSelectionProps, AccountSelectionProps, DisconnectWalletProps, ExtendedWalletAccount, AvailWalletProviderProps, AvailWalletConnectProps, } from "./types"; -export { updateMetadata, getInjectorMetadata, initApi } from "./utils"; diff --git a/packages/avail-wallet/dist/index.esm.js b/packages/avail-wallet/dist/index.esm.js deleted file mode 100644 index 67ff2fb..0000000 --- a/packages/avail-wallet/dist/index.esm.js +++ /dev/null @@ -1,5472 +0,0 @@ -import * as React from 'react'; -import React__default, { useState, forwardRef, createElement, createContext, useEffect, useContext, memo, useCallback } from 'react'; -import { jsx, Fragment, jsxs } from 'react/jsx-runtime'; -import { getWalletBySource, getWallets } from '@talismn/connect-wallets'; -import { initialize, disconnect } from 'avail-js-sdk'; -import * as ReactDOM from 'react-dom'; -import ReactDOM__default from 'react-dom'; -import { create } from 'zustand'; -import { persist, createJSONStorage } from 'zustand/middleware'; - -var availSnap = "07c9c16ad1b46de7.png"; - -// packages/react/compose-refs/src/composeRefs.tsx -function setRef(ref, value) { - if (typeof ref === "function") { - ref(value); - } else if (ref !== null && ref !== void 0) { - ref.current = value; - } -} -function composeRefs(...refs) { - return (node) => refs.forEach((ref) => setRef(ref, node)); -} -function useComposedRefs(...refs) { - return React.useCallback(composeRefs(...refs), refs); -} - -// packages/react/slot/src/Slot.tsx -var Slot = React.forwardRef((props, forwardedRef) => { - const { children, ...slotProps } = props; - const childrenArray = React.Children.toArray(children); - const slottable = childrenArray.find(isSlottable); - if (slottable) { - const newElement = slottable.props.children; - const newChildren = childrenArray.map((child) => { - if (child === slottable) { - if (React.Children.count(newElement) > 1) return React.Children.only(null); - return React.isValidElement(newElement) ? newElement.props.children : null; - } else { - return child; - } - }); - return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null }); - } - return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children }); -}); -Slot.displayName = "Slot"; -var SlotClone = React.forwardRef((props, forwardedRef) => { - const { children, ...slotProps } = props; - if (React.isValidElement(children)) { - const childrenRef = getElementRef$1(children); - return React.cloneElement(children, { - ...mergeProps(slotProps, children.props), - // @ts-ignore - ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef - }); - } - return React.Children.count(children) > 1 ? React.Children.only(null) : null; -}); -SlotClone.displayName = "SlotClone"; -var Slottable = ({ children }) => { - return /* @__PURE__ */ jsx(Fragment, { children }); -}; -function isSlottable(child) { - return React.isValidElement(child) && child.type === Slottable; -} -function mergeProps(slotProps, childProps) { - 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 (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 getElementRef$1(element) { - let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get; - let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning; - if (mayWarn) { - return element.ref; - } - getter = Object.getOwnPropertyDescriptor(element, "ref")?.get; - mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning; - if (mayWarn) { - return element.props.ref; - } - return element.props.ref || element.ref; -} - -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)){var o=e.length;for(t=0;ttypeof value === "boolean" ? `${value}` : value === 0 ? "0" : value; -const cx = clsx$1; -const cva = (base, config)=>(props)=>{ - var _config_compoundVariants; - 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 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param)=>{ - let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param; - 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); - }; - -function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t { - const classMap = createClassMap(config); - const { - conflictingClassGroups, - conflictingClassGroupModifiers - } = config; - const 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); - }; - const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => { - const conflicts = conflictingClassGroups[classGroupId] || []; - if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) { - return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]]; - } - return conflicts; - }; - return { - getClassGroupId, - getConflictingClassGroupIds - }; -}; -const 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 = /^\[(.+)\]$/; -const 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 - */ -const 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; -}; -const 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); - }); - }); -}; -const 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; -}; -const isThemeGetter = func => func.isThemeGetter; -const 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 -const createLruCache = maxCacheSize => { - if (maxCacheSize < 1) { - return { - get: () => undefined, - set: () => {} - }; - } - let cacheSize = 0; - let cache = new Map(); - let previousCache = new Map(); - const 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 = '!'; -const createParseClassName = config => { - const { - separator, - experimentalParseClassName - } = config; - const isSeparatorSingleCharacter = separator.length === 1; - const firstSeparatorCharacter = separator[0]; - const separatorLength = separator.length; - // parseClassName inspired by https://github.com/tailwindlabs/tailwindcss/blob/v3.2.2/src/util/splitAtTopLevelOnly.js - const parseClassName = 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 - }; - }; - if (experimentalParseClassName) { - return className => experimentalParseClassName({ - className, - parseClassName - }); - } - return parseClassName; -}; -/** - * 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 - */ -const 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; -}; -const createConfigUtils = config => ({ - cache: createLruCache(config.cacheSize), - parseClassName: createParseClassName(config), - ...createClassGroupUtils(config) -}); -const SPLIT_CLASSES_REGEX = /\s+/; -const mergeClassList = (classList, configUtils) => { - const { - parseClassName, - getClassGroupId, - getConflictingClassGroupIds - } = configUtils; - /** - * Set of classGroupIds in following format: - * `{importantModifier}{variantModifiers}{classGroupId}` - * @example 'float' - * @example 'hover:focus:bg-color' - * @example 'md:!pr' - */ - const classGroupsInConflict = []; - const classNames = classList.trim().split(SPLIT_CLASSES_REGEX); - let result = ''; - for (let index = classNames.length - 1; index >= 0; index -= 1) { - const originalClassName = classNames[index]; - const { - modifiers, - hasImportantModifier, - baseClassName, - maybePostfixModifierPosition - } = parseClassName(originalClassName); - let hasPostfixModifier = Boolean(maybePostfixModifierPosition); - let classGroupId = getClassGroupId(hasPostfixModifier ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName); - if (!classGroupId) { - if (!hasPostfixModifier) { - // Not a Tailwind class - result = originalClassName + (result.length > 0 ? ' ' + result : result); - continue; - } - classGroupId = getClassGroupId(baseClassName); - if (!classGroupId) { - // Not a Tailwind class - result = originalClassName + (result.length > 0 ? ' ' + result : result); - continue; - } - hasPostfixModifier = false; - } - const variantModifier = sortModifiers(modifiers).join(':'); - const modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier; - const classId = modifierId + classGroupId; - if (classGroupsInConflict.includes(classId)) { - // Tailwind class omitted due to conflict - continue; - } - classGroupsInConflict.push(classId); - const conflictGroups = getConflictingClassGroupIds(classGroupId, hasPostfixModifier); - for (let i = 0; i < conflictGroups.length; ++i) { - const group = conflictGroups[i]; - classGroupsInConflict.push(modifierId + group); - } - // Tailwind class not in conflict - result = originalClassName + (result.length > 0 ? ' ' + result : result); - } - return result; -}; - -/** - * 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 (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; -} -const 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)); - }; -} -const 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$/; -const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/; -// Shadow always begins with x and y offset separated by underscore optionally prepended by inset -const shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/; -const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/; -const isLength = value => isNumber(value) || stringLengths.has(value) || fractionRegex.test(value); -const isArbitraryLength = value => getIsArbitraryValue(value, 'length', isLengthOnly); -const isNumber = value => Boolean(value) && !Number.isNaN(Number(value)); -const isArbitraryNumber = value => getIsArbitraryValue(value, 'number', isNumber); -const isInteger = value => Boolean(value) && Number.isInteger(Number(value)); -const isPercent = value => value.endsWith('%') && isNumber(value.slice(0, -1)); -const isArbitraryValue = value => arbitraryValueRegex.test(value); -const isTshirtSize = value => tshirtUnitRegex.test(value); -const sizeLabels = /*#__PURE__*/new Set(['length', 'size', 'percentage']); -const isArbitrarySize = value => getIsArbitraryValue(value, sizeLabels, isNever); -const isArbitraryPosition = value => getIsArbitraryValue(value, 'position', isNever); -const imageLabels = /*#__PURE__*/new Set(['image', 'url']); -const isArbitraryImage = value => getIsArbitraryValue(value, imageLabels, isImage); -const isArbitraryShadow = value => getIsArbitraryValue(value, '', isShadow); -const isAny = () => true; -const 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; -}; -const isLengthOnly = value => -// `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths. -// For example, `hsl(0 0% 0%)` would be classified as a length without this check. -// I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough. -lengthUnitRegex.test(value) && !colorFunctionRegex.test(value); -const isNever = () => false; -const isShadow = value => shadowRegex.test(value); -const isImage = value => imageRegex.test(value); -const 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, isArbitraryLength]; - const getNumberWithAutoAndArbitrary = () => ['auto', isNumber, 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']; - 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 getNumberAndArbitrary = () => [isNumber, isArbitraryValue]; - return { - cacheSize: 500, - separator: ':', - theme: { - colors: [isAny], - spacing: [isLength, isArbitraryLength], - blur: ['none', '', isTshirtSize, isArbitraryValue], - brightness: getNumberAndArbitrary(), - borderColor: [colors], - borderRadius: ['none', '', 'full', isTshirtSize, isArbitraryValue], - borderSpacing: getSpacingWithArbitrary(), - borderWidth: getLengthWithEmptyAndArbitrary(), - contrast: getNumberAndArbitrary(), - grayscale: getZeroAndEmpty(), - hueRotate: getNumberAndArbitrary(), - invert: getZeroAndEmpty(), - gap: getSpacingWithArbitrary(), - gradientColorStops: [colors], - gradientColorStopPositions: [isPercent, isArbitraryLength], - inset: getSpacingWithAutoAndArbitrary(), - margin: getSpacingWithAutoAndArbitrary(), - opacity: getNumberAndArbitrary(), - padding: getSpacingWithArbitrary(), - saturate: getNumberAndArbitrary(), - scale: getNumberAndArbitrary(), - 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', 'start', 'end'] - }], - /** - * Clear - * @see https://tailwindcss.com/docs/clear - */ - clear: [{ - clear: ['left', 'right', 'both', 'none', 'start', 'end'] - }], - /** - * 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', 'svw', 'lvw', 'dvw', isArbitraryValue, spacing] - }], - /** - * Min-Width - * @see https://tailwindcss.com/docs/min-width - */ - 'min-w': [{ - 'min-w': [isArbitraryValue, spacing, 'min', 'max', 'fit'] - }], - /** - * Max-Width - * @see https://tailwindcss.com/docs/max-width - */ - 'max-w': [{ - 'max-w': [isArbitraryValue, spacing, 'none', 'full', 'min', 'max', 'fit', 'prose', { - screen: [isTshirtSize] - }, isTshirtSize] - }], - /** - * Height - * @see https://tailwindcss.com/docs/height - */ - h: [{ - h: [isArbitraryValue, spacing, 'auto', 'min', 'max', 'fit', 'svh', 'lvh', 'dvh'] - }], - /** - * Min-Height - * @see https://tailwindcss.com/docs/min-height - */ - 'min-h': [{ - 'min-h': [isArbitraryValue, spacing, 'min', 'max', 'fit', 'svh', 'lvh', 'dvh'] - }], - /** - * Max-Height - * @see https://tailwindcss.com/docs/max-height - */ - 'max-h': [{ - 'max-h': [isArbitraryValue, spacing, 'min', 'max', 'fit', 'svh', 'lvh', 'dvh'] - }], - /** - * Size - * @see https://tailwindcss.com/docs/size - */ - size: [{ - size: [isArbitraryValue, spacing, 'auto', '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, isArbitraryNumber] - }], - /** - * Line Height - * @see https://tailwindcss.com/docs/line-height - */ - leading: [{ - leading: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose', isLength, 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': [{ - decoration: ['auto', 'from-font', isLength, isArbitraryLength] - }], - /** - * Text Underline Offset - * @see https://tailwindcss.com/docs/text-underline-offset - */ - 'underline-offset': [{ - 'underline-offset': ['auto', isLength, isArbitraryValue] - }], - /** - * Text Decoration Color - * @see https://tailwindcss.com/docs/text-decoration-color - */ - 'text-decoration-color': [{ - decoration: [colors] - }], - /** - * Text Transform - * @see https://tailwindcss.com/docs/text-transform - */ - 'text-transform': ['uppercase', 'lowercase', 'capitalize', 'normal-case'], - /** - * Text Overflow - * @see https://tailwindcss.com/docs/text-overflow - */ - 'text-overflow': ['truncate', 'text-ellipsis', 'text-clip'], - /** - * Text Wrap - * @see https://tailwindcss.com/docs/text-wrap - */ - 'text-wrap': [{ - text: ['wrap', 'nowrap', 'balance', 'pretty'] - }], - /** - * Text Indent - * @see https://tailwindcss.com/docs/text-indent - */ - indent: [{ - indent: getSpacingWithArbitrary() - }], - /** - * Vertical Alignment - * @see https://tailwindcss.com/docs/vertical-align - */ - 'vertical-align': [{ - align: ['baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom', 'sub', 'super', isArbitraryValue] - }], - /** - * Whitespace - * @see https://tailwindcss.com/docs/whitespace - */ - whitespace: [{ - whitespace: ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'] - }], - /** - * Word Break - * @see https://tailwindcss.com/docs/word-break - */ - break: [{ - break: ['normal', 'words', 'all', 'keep'] - }], - /** - * Hyphens - * @see https://tailwindcss.com/docs/hyphens - */ - hyphens: [{ - hyphens: ['none', 'manual', 'auto'] - }], - /** - * Content - * @see https://tailwindcss.com/docs/content - */ - content: [{ - content: ['none', isArbitraryValue] - }], - // Backgrounds - /** - * Background Attachment - * @see https://tailwindcss.com/docs/background-attachment - */ - 'bg-attachment': [{ - bg: ['fixed', 'local', 'scroll'] - }], - /** - * Background Clip - * @see https://tailwindcss.com/docs/background-clip - */ - 'bg-clip': [{ - 'bg-clip': ['border', 'padding', 'content', 'text'] - }], - /** - * Background Opacity - * @deprecated since Tailwind CSS v3.0.0 - * @see https://tailwindcss.com/docs/background-opacity - */ - 'bg-opacity': [{ - 'bg-opacity': [opacity] - }], - /** - * Background Origin - * @see https://tailwindcss.com/docs/background-origin - */ - 'bg-origin': [{ - 'bg-origin': ['border', 'padding', 'content'] - }], - /** - * Background Position - * @see https://tailwindcss.com/docs/background-position - */ - 'bg-position': [{ - bg: [...getPositions(), isArbitraryPosition] - }], - /** - * Background Repeat - * @see https://tailwindcss.com/docs/background-repeat - */ - 'bg-repeat': [{ - bg: ['no-repeat', { - repeat: ['', 'x', 'y', 'round', 'space'] - }] - }], - /** - * Background Size - * @see https://tailwindcss.com/docs/background-size - */ - 'bg-size': [{ - bg: ['auto', 'cover', 'contain', isArbitrarySize] - }], - /** - * Background Image - * @see https://tailwindcss.com/docs/background-image - */ - 'bg-image': [{ - bg: ['none', { - 'gradient-to': ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'] - }, isArbitraryImage] - }], - /** - * Background Color - * @see https://tailwindcss.com/docs/background-color - */ - 'bg-color': [{ - bg: [colors] - }], - /** - * Gradient Color Stops From Position - * @see https://tailwindcss.com/docs/gradient-color-stops - */ - 'gradient-from-pos': [{ - from: [gradientColorStopPositions] - }], - /** - * Gradient Color Stops Via Position - * @see https://tailwindcss.com/docs/gradient-color-stops - */ - 'gradient-via-pos': [{ - via: [gradientColorStopPositions] - }], - /** - * Gradient Color Stops To Position - * @see https://tailwindcss.com/docs/gradient-color-stops - */ - 'gradient-to-pos': [{ - to: [gradientColorStopPositions] - }], - /** - * Gradient Color Stops From - * @see https://tailwindcss.com/docs/gradient-color-stops - */ - 'gradient-from': [{ - from: [gradientColorStops] - }], - /** - * Gradient Color Stops Via - * @see https://tailwindcss.com/docs/gradient-color-stops - */ - 'gradient-via': [{ - via: [gradientColorStops] - }], - /** - * Gradient Color Stops To - * @see https://tailwindcss.com/docs/gradient-color-stops - */ - 'gradient-to': [{ - to: [gradientColorStops] - }], - // Borders - /** - * Border Radius - * @see https://tailwindcss.com/docs/border-radius - */ - rounded: [{ - rounded: [borderRadius] - }], - /** - * Border Radius Start - * @see https://tailwindcss.com/docs/border-radius - */ - 'rounded-s': [{ - 'rounded-s': [borderRadius] - }], - /** - * Border Radius End - * @see https://tailwindcss.com/docs/border-radius - */ - 'rounded-e': [{ - 'rounded-e': [borderRadius] - }], - /** - * Border Radius Top - * @see https://tailwindcss.com/docs/border-radius - */ - 'rounded-t': [{ - 'rounded-t': [borderRadius] - }], - /** - * Border Radius Right - * @see https://tailwindcss.com/docs/border-radius - */ - 'rounded-r': [{ - 'rounded-r': [borderRadius] - }], - /** - * Border Radius Bottom - * @see https://tailwindcss.com/docs/border-radius - */ - 'rounded-b': [{ - 'rounded-b': [borderRadius] - }], - /** - * Border Radius Left - * @see https://tailwindcss.com/docs/border-radius - */ - 'rounded-l': [{ - 'rounded-l': [borderRadius] - }], - /** - * Border Radius Start Start - * @see https://tailwindcss.com/docs/border-radius - */ - 'rounded-ss': [{ - 'rounded-ss': [borderRadius] - }], - /** - * Border Radius Start End - * @see https://tailwindcss.com/docs/border-radius - */ - 'rounded-se': [{ - 'rounded-se': [borderRadius] - }], - /** - * Border Radius End End - * @see https://tailwindcss.com/docs/border-radius - */ - 'rounded-ee': [{ - 'rounded-ee': [borderRadius] - }], - /** - * Border Radius End Start - * @see https://tailwindcss.com/docs/border-radius - */ - 'rounded-es': [{ - 'rounded-es': [borderRadius] - }], - /** - * Border Radius Top Left - * @see https://tailwindcss.com/docs/border-radius - */ - 'rounded-tl': [{ - 'rounded-tl': [borderRadius] - }], - /** - * Border Radius Top Right - * @see https://tailwindcss.com/docs/border-radius - */ - 'rounded-tr': [{ - 'rounded-tr': [borderRadius] - }], - /** - * Border Radius Bottom Right - * @see https://tailwindcss.com/docs/border-radius - */ - 'rounded-br': [{ - 'rounded-br': [borderRadius] - }], - /** - * Border Radius Bottom Left - * @see https://tailwindcss.com/docs/border-radius - */ - 'rounded-bl': [{ - 'rounded-bl': [borderRadius] - }], - /** - * Border Width - * @see https://tailwindcss.com/docs/border-width - */ - 'border-w': [{ - border: [borderWidth] - }], - /** - * Border Width X - * @see https://tailwindcss.com/docs/border-width - */ - 'border-w-x': [{ - 'border-x': [borderWidth] - }], - /** - * Border Width Y - * @see https://tailwindcss.com/docs/border-width - */ - 'border-w-y': [{ - 'border-y': [borderWidth] - }], - /** - * Border Width Start - * @see https://tailwindcss.com/docs/border-width - */ - 'border-w-s': [{ - 'border-s': [borderWidth] - }], - /** - * Border Width End - * @see https://tailwindcss.com/docs/border-width - */ - 'border-w-e': [{ - 'border-e': [borderWidth] - }], - /** - * Border Width Top - * @see https://tailwindcss.com/docs/border-width - */ - 'border-w-t': [{ - 'border-t': [borderWidth] - }], - /** - * Border Width Right - * @see https://tailwindcss.com/docs/border-width - */ - 'border-w-r': [{ - 'border-r': [borderWidth] - }], - /** - * Border Width Bottom - * @see https://tailwindcss.com/docs/border-width - */ - 'border-w-b': [{ - 'border-b': [borderWidth] - }], - /** - * Border Width Left - * @see https://tailwindcss.com/docs/border-width - */ - 'border-w-l': [{ - 'border-l': [borderWidth] - }], - /** - * Border Opacity - * @see https://tailwindcss.com/docs/border-opacity - */ - 'border-opacity': [{ - 'border-opacity': [opacity] - }], - /** - * Border Style - * @see https://tailwindcss.com/docs/border-style - */ - 'border-style': [{ - border: [...getLineStyles(), 'hidden'] - }], - /** - * Divide Width X - * @see https://tailwindcss.com/docs/divide-width - */ - 'divide-x': [{ - 'divide-x': [borderWidth] - }], - /** - * Divide Width X Reverse - * @see https://tailwindcss.com/docs/divide-width - */ - 'divide-x-reverse': ['divide-x-reverse'], - /** - * Divide Width Y - * @see https://tailwindcss.com/docs/divide-width - */ - 'divide-y': [{ - 'divide-y': [borderWidth] - }], - /** - * Divide Width Y Reverse - * @see https://tailwindcss.com/docs/divide-width - */ - 'divide-y-reverse': ['divide-y-reverse'], - /** - * Divide Opacity - * @see https://tailwindcss.com/docs/divide-opacity - */ - 'divide-opacity': [{ - 'divide-opacity': [opacity] - }], - /** - * Divide Style - * @see https://tailwindcss.com/docs/divide-style - */ - 'divide-style': [{ - divide: getLineStyles() - }], - /** - * Border Color - * @see https://tailwindcss.com/docs/border-color - */ - 'border-color': [{ - border: [borderColor] - }], - /** - * Border Color X - * @see https://tailwindcss.com/docs/border-color - */ - 'border-color-x': [{ - 'border-x': [borderColor] - }], - /** - * Border Color Y - * @see https://tailwindcss.com/docs/border-color - */ - 'border-color-y': [{ - 'border-y': [borderColor] - }], - /** - * Border Color S - * @see https://tailwindcss.com/docs/border-color - */ - 'border-color-s': [{ - 'border-s': [borderColor] - }], - /** - * Border Color E - * @see https://tailwindcss.com/docs/border-color - */ - 'border-color-e': [{ - 'border-e': [borderColor] - }], - /** - * Border Color Top - * @see https://tailwindcss.com/docs/border-color - */ - 'border-color-t': [{ - 'border-t': [borderColor] - }], - /** - * Border Color Right - * @see https://tailwindcss.com/docs/border-color - */ - 'border-color-r': [{ - 'border-r': [borderColor] - }], - /** - * Border Color Bottom - * @see https://tailwindcss.com/docs/border-color - */ - 'border-color-b': [{ - 'border-b': [borderColor] - }], - /** - * Border Color Left - * @see https://tailwindcss.com/docs/border-color - */ - 'border-color-l': [{ - 'border-l': [borderColor] - }], - /** - * Divide Color - * @see https://tailwindcss.com/docs/divide-color - */ - 'divide-color': [{ - divide: [borderColor] - }], - /** - * Outline Style - * @see https://tailwindcss.com/docs/outline-style - */ - 'outline-style': [{ - outline: ['', ...getLineStyles()] - }], - /** - * Outline Offset - * @see https://tailwindcss.com/docs/outline-offset - */ - 'outline-offset': [{ - 'outline-offset': [isLength, isArbitraryValue] - }], - /** - * Outline Width - * @see https://tailwindcss.com/docs/outline-width - */ - 'outline-w': [{ - outline: [isLength, isArbitraryLength] - }], - /** - * Outline Color - * @see https://tailwindcss.com/docs/outline-color - */ - 'outline-color': [{ - outline: [colors] - }], - /** - * Ring Width - * @see https://tailwindcss.com/docs/ring-width - */ - 'ring-w': [{ - ring: getLengthWithEmptyAndArbitrary() - }], - /** - * Ring Width Inset - * @see https://tailwindcss.com/docs/ring-width - */ - 'ring-w-inset': ['ring-inset'], - /** - * Ring Color - * @see https://tailwindcss.com/docs/ring-color - */ - 'ring-color': [{ - ring: [colors] - }], - /** - * Ring Opacity - * @see https://tailwindcss.com/docs/ring-opacity - */ - 'ring-opacity': [{ - 'ring-opacity': [opacity] - }], - /** - * Ring Offset Width - * @see https://tailwindcss.com/docs/ring-offset-width - */ - 'ring-offset-w': [{ - 'ring-offset': [isLength, isArbitraryLength] - }], - /** - * Ring Offset Color - * @see https://tailwindcss.com/docs/ring-offset-color - */ - 'ring-offset-color': [{ - 'ring-offset': [colors] - }], - // Effects - /** - * Box Shadow - * @see https://tailwindcss.com/docs/box-shadow - */ - shadow: [{ - shadow: ['', 'inner', 'none', isTshirtSize, isArbitraryShadow] - }], - /** - * Box Shadow Color - * @see https://tailwindcss.com/docs/box-shadow-color - */ - 'shadow-color': [{ - shadow: [isAny] - }], - /** - * Opacity - * @see https://tailwindcss.com/docs/opacity - */ - opacity: [{ - opacity: [opacity] - }], - /** - * Mix Blend Mode - * @see https://tailwindcss.com/docs/mix-blend-mode - */ - 'mix-blend': [{ - 'mix-blend': [...getBlendModes(), 'plus-lighter', 'plus-darker'] - }], - /** - * Background Blend Mode - * @see https://tailwindcss.com/docs/background-blend-mode - */ - 'bg-blend': [{ - 'bg-blend': getBlendModes() - }], - // Filters - /** - * Filter - * @deprecated since Tailwind CSS v3.0.0 - * @see https://tailwindcss.com/docs/filter - */ - filter: [{ - filter: ['', 'none'] - }], - /** - * Blur - * @see https://tailwindcss.com/docs/blur - */ - blur: [{ - blur: [blur] - }], - /** - * Brightness - * @see https://tailwindcss.com/docs/brightness - */ - brightness: [{ - brightness: [brightness] - }], - /** - * Contrast - * @see https://tailwindcss.com/docs/contrast - */ - contrast: [{ - contrast: [contrast] - }], - /** - * Drop Shadow - * @see https://tailwindcss.com/docs/drop-shadow - */ - 'drop-shadow': [{ - 'drop-shadow': ['', 'none', isTshirtSize, isArbitraryValue] - }], - /** - * Grayscale - * @see https://tailwindcss.com/docs/grayscale - */ - grayscale: [{ - grayscale: [grayscale] - }], - /** - * Hue Rotate - * @see https://tailwindcss.com/docs/hue-rotate - */ - 'hue-rotate': [{ - 'hue-rotate': [hueRotate] - }], - /** - * Invert - * @see https://tailwindcss.com/docs/invert - */ - invert: [{ - invert: [invert] - }], - /** - * Saturate - * @see https://tailwindcss.com/docs/saturate - */ - saturate: [{ - saturate: [saturate] - }], - /** - * Sepia - * @see https://tailwindcss.com/docs/sepia - */ - sepia: [{ - sepia: [sepia] - }], - /** - * Backdrop Filter - * @deprecated since Tailwind CSS v3.0.0 - * @see https://tailwindcss.com/docs/backdrop-filter - */ - 'backdrop-filter': [{ - 'backdrop-filter': ['', 'none'] - }], - /** - * Backdrop Blur - * @see https://tailwindcss.com/docs/backdrop-blur - */ - 'backdrop-blur': [{ - 'backdrop-blur': [blur] - }], - /** - * Backdrop Brightness - * @see https://tailwindcss.com/docs/backdrop-brightness - */ - 'backdrop-brightness': [{ - 'backdrop-brightness': [brightness] - }], - /** - * Backdrop Contrast - * @see https://tailwindcss.com/docs/backdrop-contrast - */ - 'backdrop-contrast': [{ - 'backdrop-contrast': [contrast] - }], - /** - * Backdrop Grayscale - * @see https://tailwindcss.com/docs/backdrop-grayscale - */ - 'backdrop-grayscale': [{ - 'backdrop-grayscale': [grayscale] - }], - /** - * Backdrop Hue Rotate - * @see https://tailwindcss.com/docs/backdrop-hue-rotate - */ - 'backdrop-hue-rotate': [{ - 'backdrop-hue-rotate': [hueRotate] - }], - /** - * Backdrop Invert - * @see https://tailwindcss.com/docs/backdrop-invert - */ - 'backdrop-invert': [{ - 'backdrop-invert': [invert] - }], - /** - * Backdrop Opacity - * @see https://tailwindcss.com/docs/backdrop-opacity - */ - 'backdrop-opacity': [{ - 'backdrop-opacity': [opacity] - }], - /** - * Backdrop Saturate - * @see https://tailwindcss.com/docs/backdrop-saturate - */ - 'backdrop-saturate': [{ - 'backdrop-saturate': [saturate] - }], - /** - * Backdrop Sepia - * @see https://tailwindcss.com/docs/backdrop-sepia - */ - 'backdrop-sepia': [{ - 'backdrop-sepia': [sepia] - }], - // Tables - /** - * Border Collapse - * @see https://tailwindcss.com/docs/border-collapse - */ - 'border-collapse': [{ - border: ['collapse', 'separate'] - }], - /** - * Border Spacing - * @see https://tailwindcss.com/docs/border-spacing - */ - 'border-spacing': [{ - 'border-spacing': [borderSpacing] - }], - /** - * Border Spacing X - * @see https://tailwindcss.com/docs/border-spacing - */ - 'border-spacing-x': [{ - 'border-spacing-x': [borderSpacing] - }], - /** - * Border Spacing Y - * @see https://tailwindcss.com/docs/border-spacing - */ - 'border-spacing-y': [{ - 'border-spacing-y': [borderSpacing] - }], - /** - * Table Layout - * @see https://tailwindcss.com/docs/table-layout - */ - 'table-layout': [{ - table: ['auto', 'fixed'] - }], - /** - * Caption Side - * @see https://tailwindcss.com/docs/caption-side - */ - caption: [{ - caption: ['top', 'bottom'] - }], - // Transitions and Animation - /** - * Tranisition Property - * @see https://tailwindcss.com/docs/transition-property - */ - transition: [{ - transition: ['none', 'all', '', 'colors', 'opacity', 'shadow', 'transform', isArbitraryValue] - }], - /** - * Transition Duration - * @see https://tailwindcss.com/docs/transition-duration - */ - duration: [{ - duration: getNumberAndArbitrary() - }], - /** - * Transition Timing Function - * @see https://tailwindcss.com/docs/transition-timing-function - */ - ease: [{ - ease: ['linear', 'in', 'out', 'in-out', isArbitraryValue] - }], - /** - * Transition Delay - * @see https://tailwindcss.com/docs/transition-delay - */ - delay: [{ - delay: getNumberAndArbitrary() - }], - /** - * Animation - * @see https://tailwindcss.com/docs/animation - */ - animate: [{ - animate: ['none', 'spin', 'ping', 'pulse', 'bounce', isArbitraryValue] - }], - // Transforms - /** - * Transform - * @see https://tailwindcss.com/docs/transform - */ - transform: [{ - transform: ['', 'gpu', 'none'] - }], - /** - * Scale - * @see https://tailwindcss.com/docs/scale - */ - scale: [{ - scale: [scale] - }], - /** - * Scale X - * @see https://tailwindcss.com/docs/scale - */ - 'scale-x': [{ - 'scale-x': [scale] - }], - /** - * Scale Y - * @see https://tailwindcss.com/docs/scale - */ - 'scale-y': [{ - 'scale-y': [scale] - }], - /** - * Rotate - * @see https://tailwindcss.com/docs/rotate - */ - rotate: [{ - rotate: [isInteger, isArbitraryValue] - }], - /** - * Translate X - * @see https://tailwindcss.com/docs/translate - */ - 'translate-x': [{ - 'translate-x': [translate] - }], - /** - * Translate Y - * @see https://tailwindcss.com/docs/translate - */ - 'translate-y': [{ - 'translate-y': [translate] - }], - /** - * Skew X - * @see https://tailwindcss.com/docs/skew - */ - 'skew-x': [{ - 'skew-x': [skew] - }], - /** - * Skew Y - * @see https://tailwindcss.com/docs/skew - */ - 'skew-y': [{ - 'skew-y': [skew] - }], - /** - * Transform Origin - * @see https://tailwindcss.com/docs/transform-origin - */ - 'transform-origin': [{ - origin: ['center', 'top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left', isArbitraryValue] - }], - // Interactivity - /** - * Accent Color - * @see https://tailwindcss.com/docs/accent-color - */ - accent: [{ - accent: ['auto', colors] - }], - /** - * Appearance - * @see https://tailwindcss.com/docs/appearance - */ - appearance: [{ - appearance: ['none', 'auto'] - }], - /** - * Cursor - * @see https://tailwindcss.com/docs/cursor - */ - cursor: [{ - 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] - }], - /** - * Caret Color - * @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities - */ - 'caret-color': [{ - caret: [colors] - }], - /** - * Pointer Events - * @see https://tailwindcss.com/docs/pointer-events - */ - 'pointer-events': [{ - 'pointer-events': ['none', 'auto'] - }], - /** - * Resize - * @see https://tailwindcss.com/docs/resize - */ - resize: [{ - resize: ['none', 'y', 'x', ''] - }], - /** - * Scroll Behavior - * @see https://tailwindcss.com/docs/scroll-behavior - */ - 'scroll-behavior': [{ - scroll: ['auto', 'smooth'] - }], - /** - * Scroll Margin - * @see https://tailwindcss.com/docs/scroll-margin - */ - 'scroll-m': [{ - 'scroll-m': getSpacingWithArbitrary() - }], - /** - * Scroll Margin X - * @see https://tailwindcss.com/docs/scroll-margin - */ - 'scroll-mx': [{ - 'scroll-mx': getSpacingWithArbitrary() - }], - /** - * Scroll Margin Y - * @see https://tailwindcss.com/docs/scroll-margin - */ - 'scroll-my': [{ - 'scroll-my': getSpacingWithArbitrary() - }], - /** - * Scroll Margin Start - * @see https://tailwindcss.com/docs/scroll-margin - */ - 'scroll-ms': [{ - 'scroll-ms': getSpacingWithArbitrary() - }], - /** - * Scroll Margin End - * @see https://tailwindcss.com/docs/scroll-margin - */ - 'scroll-me': [{ - 'scroll-me': getSpacingWithArbitrary() - }], - /** - * Scroll Margin Top - * @see https://tailwindcss.com/docs/scroll-margin - */ - 'scroll-mt': [{ - 'scroll-mt': getSpacingWithArbitrary() - }], - /** - * Scroll Margin Right - * @see https://tailwindcss.com/docs/scroll-margin - */ - 'scroll-mr': [{ - 'scroll-mr': getSpacingWithArbitrary() - }], - /** - * Scroll Margin Bottom - * @see https://tailwindcss.com/docs/scroll-margin - */ - 'scroll-mb': [{ - 'scroll-mb': getSpacingWithArbitrary() - }], - /** - * Scroll Margin Left - * @see https://tailwindcss.com/docs/scroll-margin - */ - 'scroll-ml': [{ - 'scroll-ml': getSpacingWithArbitrary() - }], - /** - * Scroll Padding - * @see https://tailwindcss.com/docs/scroll-padding - */ - 'scroll-p': [{ - 'scroll-p': getSpacingWithArbitrary() - }], - /** - * Scroll Padding X - * @see https://tailwindcss.com/docs/scroll-padding - */ - 'scroll-px': [{ - 'scroll-px': getSpacingWithArbitrary() - }], - /** - * Scroll Padding Y - * @see https://tailwindcss.com/docs/scroll-padding - */ - 'scroll-py': [{ - 'scroll-py': getSpacingWithArbitrary() - }], - /** - * Scroll Padding Start - * @see https://tailwindcss.com/docs/scroll-padding - */ - 'scroll-ps': [{ - 'scroll-ps': getSpacingWithArbitrary() - }], - /** - * Scroll Padding End - * @see https://tailwindcss.com/docs/scroll-padding - */ - 'scroll-pe': [{ - 'scroll-pe': getSpacingWithArbitrary() - }], - /** - * Scroll Padding Top - * @see https://tailwindcss.com/docs/scroll-padding - */ - 'scroll-pt': [{ - 'scroll-pt': getSpacingWithArbitrary() - }], - /** - * Scroll Padding Right - * @see https://tailwindcss.com/docs/scroll-padding - */ - 'scroll-pr': [{ - 'scroll-pr': getSpacingWithArbitrary() - }], - /** - * Scroll Padding Bottom - * @see https://tailwindcss.com/docs/scroll-padding - */ - 'scroll-pb': [{ - 'scroll-pb': getSpacingWithArbitrary() - }], - /** - * Scroll Padding Left - * @see https://tailwindcss.com/docs/scroll-padding - */ - 'scroll-pl': [{ - 'scroll-pl': getSpacingWithArbitrary() - }], - /** - * Scroll Snap Align - * @see https://tailwindcss.com/docs/scroll-snap-align - */ - 'snap-align': [{ - snap: ['start', 'end', 'center', 'align-none'] - }], - /** - * Scroll Snap Stop - * @see https://tailwindcss.com/docs/scroll-snap-stop - */ - 'snap-stop': [{ - snap: ['normal', 'always'] - }], - /** - * Scroll Snap Type - * @see https://tailwindcss.com/docs/scroll-snap-type - */ - 'snap-type': [{ - snap: ['none', 'x', 'y', 'both'] - }], - /** - * Scroll Snap Type Strictness - * @see https://tailwindcss.com/docs/scroll-snap-type - */ - 'snap-strictness': [{ - snap: ['mandatory', 'proximity'] - }], - /** - * Touch Action - * @see https://tailwindcss.com/docs/touch-action - */ - touch: [{ - touch: ['auto', 'none', 'manipulation'] - }], - /** - * Touch Action X - * @see https://tailwindcss.com/docs/touch-action - */ - 'touch-x': [{ - 'touch-pan': ['x', 'left', 'right'] - }], - /** - * Touch Action Y - * @see https://tailwindcss.com/docs/touch-action - */ - 'touch-y': [{ - 'touch-pan': ['y', 'up', 'down'] - }], - /** - * Touch Action Pinch Zoom - * @see https://tailwindcss.com/docs/touch-action - */ - 'touch-pz': ['touch-pinch-zoom'], - /** - * User Select - * @see https://tailwindcss.com/docs/user-select - */ - select: [{ - select: ['none', 'text', 'all', 'auto'] - }], - /** - * Will Change - * @see https://tailwindcss.com/docs/will-change - */ - 'will-change': [{ - 'will-change': ['auto', 'scroll', 'contents', 'transform', isArbitraryValue] - }], - // SVG - /** - * Fill - * @see https://tailwindcss.com/docs/fill - */ - fill: [{ - fill: [colors, 'none'] - }], - /** - * Stroke Width - * @see https://tailwindcss.com/docs/stroke-width - */ - 'stroke-w': [{ - stroke: [isLength, isArbitraryLength, isArbitraryNumber] - }], - /** - * Stroke - * @see https://tailwindcss.com/docs/stroke - */ - stroke: [{ - stroke: [colors, 'none'] - }], - // Accessibility - /** - * Screen Readers - * @see https://tailwindcss.com/docs/screen-readers - */ - sr: ['sr-only', 'not-sr-only'], - /** - * Forced Color Adjust - * @see https://tailwindcss.com/docs/forced-color-adjust - */ - 'forced-color-adjust': [{ - 'forced-color-adjust': ['auto', 'none'] - }] - }, - conflictingClassGroups: { - overflow: ['overflow-x', 'overflow-y'], - overscroll: ['overscroll-x', 'overscroll-y'], - inset: ['inset-x', 'inset-y', 'start', 'end', 'top', 'right', 'bottom', 'left'], - 'inset-x': ['right', 'left'], - 'inset-y': ['top', 'bottom'], - flex: ['basis', 'grow', 'shrink'], - gap: ['gap-x', 'gap-y'], - p: ['px', 'py', 'ps', 'pe', 'pt', 'pr', 'pb', 'pl'], - px: ['pr', 'pl'], - py: ['pt', 'pb'], - m: ['mx', 'my', 'ms', 'me', 'mt', 'mr', 'mb', 'ml'], - mx: ['mr', 'ml'], - my: ['mt', 'mb'], - size: ['w', 'h'], - 'font-size': ['leading'], - 'fvn-normal': ['fvn-ordinal', 'fvn-slashed-zero', 'fvn-figure', 'fvn-spacing', 'fvn-fraction'], - 'fvn-ordinal': ['fvn-normal'], - 'fvn-slashed-zero': ['fvn-normal'], - 'fvn-figure': ['fvn-normal'], - 'fvn-spacing': ['fvn-normal'], - 'fvn-fraction': ['fvn-normal'], - 'line-clamp': ['display', 'overflow'], - 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'], - 'rounded-s': ['rounded-ss', 'rounded-es'], - 'rounded-e': ['rounded-se', 'rounded-ee'], - 'rounded-t': ['rounded-tl', 'rounded-tr'], - 'rounded-r': ['rounded-tr', 'rounded-br'], - 'rounded-b': ['rounded-br', 'rounded-bl'], - 'rounded-l': ['rounded-tl', 'rounded-bl'], - 'border-spacing': ['border-spacing-x', 'border-spacing-y'], - 'border-w': ['border-w-s', 'border-w-e', 'border-w-t', 'border-w-r', 'border-w-b', 'border-w-l'], - 'border-w-x': ['border-w-r', 'border-w-l'], - 'border-w-y': ['border-w-t', 'border-w-b'], - 'border-color': ['border-color-s', 'border-color-e', 'border-color-t', 'border-color-r', 'border-color-b', 'border-color-l'], - 'border-color-x': ['border-color-r', 'border-color-l'], - 'border-color-y': ['border-color-t', 'border-color-b'], - 'scroll-m': ['scroll-mx', 'scroll-my', 'scroll-ms', 'scroll-me', 'scroll-mt', 'scroll-mr', 'scroll-mb', 'scroll-ml'], - 'scroll-mx': ['scroll-mr', 'scroll-ml'], - 'scroll-my': ['scroll-mt', 'scroll-mb'], - 'scroll-p': ['scroll-px', 'scroll-py', 'scroll-ps', 'scroll-pe', 'scroll-pt', 'scroll-pr', 'scroll-pb', 'scroll-pl'], - 'scroll-px': ['scroll-pr', 'scroll-pl'], - 'scroll-py': ['scroll-pt', 'scroll-pb'], - touch: ['touch-x', 'touch-y', 'touch-pz'], - 'touch-x': ['touch'], - 'touch-y': ['touch'], - 'touch-pz': ['touch'] - }, - conflictingClassGroupModifiers: { - 'font-size': ['leading'] - } - }; -}; -const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig); - -/** - * @description Get injected metadata for extrinsic call - * - * @param api - * @returns injected metadata - */ -const getInjectorMetadata = (api) => { - return { - chain: api.runtimeChain.toString(), - specVersion: api.runtimeVersion.specVersion.toNumber(), - tokenDecimals: api.registry.chainDecimals[0] || 18, - tokenSymbol: api.registry.chainTokens[0] || "AVAIL", - genesisHash: api.genesisHash.toHex(), - ss58Format: typeof api.registry.chainSS58 === "number" ? api.registry.chainSS58 : 0, - chainType: "substrate", - icon: "substrate", - types: {}, - userExtensions: [], - }; -}; -async function updateMetadata({ api, account, metadataCookie, selectedWallet, setCookie, }) { - const injector = getWalletBySource(account.source); - if (!api || !api.isConnected || !(await api.isReady)) { - console.debug("API not ready, cannot update metadata"); - return; - } - if (injector && - (!metadataCookie || - (metadataCookie ? metadataCookie.wallet !== selectedWallet.title : true))) { - try { - const metadata = getInjectorMetadata(api); - await injector.extension.metadata.provide(metadata); - setCookie("metadataUpdated", { - wallet: selectedWallet.title, - updated: true, - }, {}); - } - catch (e) { - console.error("Failed to update metadata", e); - } - } -} -const initApi = async (rpcUrl, retries = 3) => { - try { - console.log(`Initializing API. Retries left: ${retries}`); - const initializedApi = await initialize(rpcUrl); - return initializedApi; - } - catch (error) { - disconnect(); - if (retries > 0) { - await new Promise((resolve) => setTimeout(resolve, 2000)); - console.debug(`Retrying to initialize API. Retries left: ${retries}`); - return initApi(rpcUrl, retries - 1); - } - else { - throw new Error(`RPC_INITIALIZE_ERROR: ${error}`); - } - } -}; -function cn(...inputs) { - return twMerge(clsx(inputs)); -} - -const buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-gray-950 dark:focus-visible:ring-gray-300", { - variants: { - variant: { - default: "bg-gray-900 text-gray-50 hover:bg-gray-900/90 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90", - destructive: "bg-red-500 text-gray-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/90", - outline: "border border-gray-200 bg-white hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50", - secondary: "bg-gray-100 text-gray-900 hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80", - ghost: "hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-50", - link: "text-gray-900 text-lg font-ppmori font-bold dark:text-gray-50", - primary: "rounded-full text-sm font-ppmori font-bold bg-gradient-to-r to-[#439FE7] from-[#2778E9] transform transition-transform hover:scale-[1.03] text-white", - }, - size: { - default: "h-10 px-4 py-2", - sm: "h-8 rounded-full px-3", - lg: "h-12 rounded-full px-8", - icon: "h-10 w-10", - }, - }, - defaultVariants: { - variant: "default", - size: "default", - }, -}); -const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : "button"; - return (React.createElement(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props })); -}); -Button.displayName = "Button"; - -const badgeVariants = cva("inline-flex !outline-none !focus:outline-none !focus:ring-0 !ring-0 items-center justify-center rounded-xl border border-gray-200 px-3 ml-2 py-[5.5px] text-sm font-semibold transition-colors dark:border-gray-800 space-x-2", { - variants: { - variant: { - default: "border-transparent bg-gray-900 text-gray-50 hover:bg-gray-900/80 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/80", - secondary: "border-transparent bg-gray-100 text-gray-900 hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80", - avail: "border-transparent !rounded-lg space-x-1 bg-[#3A3E4A] text-white dark:bg-gray-800 dark:text-gray-50 hover:bg-gray-900", - destructive: "border-transparent bg-red-500 text-gray-50 hover:bg-red-500/80 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/80", - outline: "text-gray-950 dark:text-gray-50", - }, - }, - defaultVariants: { - variant: "default", - }, -}); -function Badge({ className, variant, ...props }) { - return (React.createElement("div", { className: cn(badgeVariants({ variant }), className), ...props })); -} - -// packages/core/primitive/src/primitive.tsx -function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) { - return function handleEvent(event) { - originalEventHandler?.(event); - if (checkForDefaultPrevented === false || !event.defaultPrevented) { - return ourEventHandler?.(event); - } - }; -} - -// packages/react/context/src/createContext.tsx -function createContext2(rootComponentName, defaultContext) { - const Context = React.createContext(defaultContext); - const Provider = (props) => { - const { children, ...context } = props; - const value = React.useMemo(() => context, Object.values(context)); - return /* @__PURE__ */ jsx(Context.Provider, { value, children }); - }; - Provider.displayName = rootComponentName + "Provider"; - function useContext2(consumerName) { - const context = React.useContext(Context); - if (context) return context; - if (defaultContext !== void 0) return defaultContext; - throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``); - } - return [Provider, useContext2]; -} -function createContextScope(scopeName, createContextScopeDeps = []) { - let defaultContexts = []; - function createContext3(rootComponentName, defaultContext) { - const BaseContext = React.createContext(defaultContext); - const index = defaultContexts.length; - defaultContexts = [...defaultContexts, defaultContext]; - const Provider = (props) => { - const { scope, children, ...context } = props; - const Context = scope?.[scopeName]?.[index] || BaseContext; - const value = React.useMemo(() => context, Object.values(context)); - return /* @__PURE__ */ jsx(Context.Provider, { value, children }); - }; - Provider.displayName = rootComponentName + "Provider"; - function useContext2(consumerName, scope) { - const Context = scope?.[scopeName]?.[index] || BaseContext; - const context = React.useContext(Context); - if (context) return context; - if (defaultContext !== void 0) return defaultContext; - throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``); - } - return [Provider, useContext2]; - } - const createScope = () => { - const scopeContexts = defaultContexts.map((defaultContext) => { - return React.createContext(defaultContext); - }); - return function useScope(scope) { - const contexts = scope?.[scopeName] || scopeContexts; - return React.useMemo( - () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), - [scope, contexts] - ); - }; - }; - createScope.scopeName = scopeName; - return [createContext3, composeContextScopes(createScope, ...createContextScopeDeps)]; -} -function composeContextScopes(...scopes) { - const baseScope = scopes[0]; - if (scopes.length === 1) return baseScope; - const createScope = () => { - const scopeHooks = scopes.map((createScope2) => ({ - useScope: createScope2(), - scopeName: createScope2.scopeName - })); - return function useComposedScopes(overrideScopes) { - const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => { - const scopeProps = useScope(overrideScopes); - const currentScope = scopeProps[`__scope${scopeName}`]; - return { ...nextScopes2, ...currentScope }; - }, {}); - return React.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]); - }; - }; - createScope.scopeName = baseScope.scopeName; - return createScope; -} - -// packages/react/use-layout-effect/src/useLayoutEffect.tsx -var useLayoutEffect2 = Boolean(globalThis?.document) ? React.useLayoutEffect : () => { -}; - -// packages/react/id/src/id.tsx -var useReactId = React["useId".toString()] || (() => void 0); -var count$1 = 0; -function useId(deterministicId) { - const [id, setId] = React.useState(useReactId()); - useLayoutEffect2(() => { - if (!deterministicId) setId((reactId) => reactId ?? String(count$1++)); - }, [deterministicId]); - return deterministicId || (id ? `radix-${id}` : ""); -} - -// packages/react/use-callback-ref/src/useCallbackRef.tsx -function useCallbackRef$1(callback) { - const callbackRef = React.useRef(callback); - React.useEffect(() => { - callbackRef.current = callback; - }); - return React.useMemo(() => (...args) => callbackRef.current?.(...args), []); -} - -// packages/react/use-controllable-state/src/useControllableState.tsx -function useControllableState({ - prop, - defaultProp, - onChange = () => { - } -}) { - const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange }); - const isControlled = prop !== void 0; - const value = isControlled ? prop : uncontrolledProp; - const handleChange = useCallbackRef$1(onChange); - const setValue = React.useCallback( - (nextValue) => { - if (isControlled) { - const setter = nextValue; - const value2 = typeof nextValue === "function" ? setter(prop) : nextValue; - if (value2 !== prop) handleChange(value2); - } else { - setUncontrolledProp(nextValue); - } - }, - [isControlled, prop, setUncontrolledProp, handleChange] - ); - return [value, setValue]; -} -function useUncontrolledState({ - defaultProp, - onChange -}) { - const uncontrolledState = React.useState(defaultProp); - const [value] = uncontrolledState; - const prevValueRef = React.useRef(value); - const handleChange = useCallbackRef$1(onChange); - React.useEffect(() => { - if (prevValueRef.current !== value) { - handleChange(value); - prevValueRef.current = value; - } - }, [value, prevValueRef, handleChange]); - return uncontrolledState; -} - -// packages/react/primitive/src/Primitive.tsx -var NODES = [ - "a", - "button", - "div", - "form", - "h2", - "h3", - "img", - "input", - "label", - "li", - "nav", - "ol", - "p", - "span", - "svg", - "ul" -]; -var Primitive = NODES.reduce((primitive, node) => { - const Node = React.forwardRef((props, forwardedRef) => { - const { asChild, ...primitiveProps } = props; - const Comp = asChild ? Slot : node; - if (typeof window !== "undefined") { - window[Symbol.for("radix-ui")] = true; - } - return /* @__PURE__ */ jsx(Comp, { ...primitiveProps, ref: forwardedRef }); - }); - Node.displayName = `Primitive.${node}`; - return { ...primitive, [node]: Node }; -}, {}); -function dispatchDiscreteCustomEvent(target, event) { - if (target) ReactDOM.flushSync(() => target.dispatchEvent(event)); -} - -// packages/react/use-escape-keydown/src/useEscapeKeydown.tsx -function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) { - const onEscapeKeyDown = useCallbackRef$1(onEscapeKeyDownProp); - React.useEffect(() => { - const handleKeyDown = (event) => { - if (event.key === "Escape") { - onEscapeKeyDown(event); - } - }; - ownerDocument.addEventListener("keydown", handleKeyDown, { capture: true }); - return () => ownerDocument.removeEventListener("keydown", handleKeyDown, { capture: true }); - }, [onEscapeKeyDown, ownerDocument]); -} - -var DISMISSABLE_LAYER_NAME = "DismissableLayer"; -var CONTEXT_UPDATE = "dismissableLayer.update"; -var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside"; -var FOCUS_OUTSIDE = "dismissableLayer.focusOutside"; -var originalBodyPointerEvents; -var DismissableLayerContext = React.createContext({ - layers: /* @__PURE__ */ new Set(), - layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(), - branches: /* @__PURE__ */ new Set() -}); -var DismissableLayer = React.forwardRef( - (props, forwardedRef) => { - const { - disableOutsidePointerEvents = false, - onEscapeKeyDown, - onPointerDownOutside, - onFocusOutside, - onInteractOutside, - onDismiss, - ...layerProps - } = props; - const context = React.useContext(DismissableLayerContext); - const [node, setNode] = React.useState(null); - const ownerDocument = node?.ownerDocument ?? globalThis?.document; - const [, force] = React.useState({}); - const composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2)); - const layers = Array.from(context.layers); - const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1); - const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); - const index = node ? layers.indexOf(node) : -1; - const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0; - const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex; - const pointerDownOutside = usePointerDownOutside((event) => { - const target = event.target; - const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target)); - if (!isPointerEventsEnabled || isPointerDownOnBranch) return; - onPointerDownOutside?.(event); - onInteractOutside?.(event); - if (!event.defaultPrevented) onDismiss?.(); - }, ownerDocument); - const focusOutside = useFocusOutside((event) => { - const target = event.target; - const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target)); - if (isFocusInBranch) return; - onFocusOutside?.(event); - onInteractOutside?.(event); - if (!event.defaultPrevented) onDismiss?.(); - }, ownerDocument); - useEscapeKeydown((event) => { - const isHighestLayer = index === context.layers.size - 1; - if (!isHighestLayer) return; - onEscapeKeyDown?.(event); - if (!event.defaultPrevented && onDismiss) { - event.preventDefault(); - onDismiss(); - } - }, ownerDocument); - React.useEffect(() => { - if (!node) return; - if (disableOutsidePointerEvents) { - if (context.layersWithOutsidePointerEventsDisabled.size === 0) { - originalBodyPointerEvents = ownerDocument.body.style.pointerEvents; - ownerDocument.body.style.pointerEvents = "none"; - } - context.layersWithOutsidePointerEventsDisabled.add(node); - } - context.layers.add(node); - dispatchUpdate(); - return () => { - if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) { - ownerDocument.body.style.pointerEvents = originalBodyPointerEvents; - } - }; - }, [node, ownerDocument, disableOutsidePointerEvents, context]); - React.useEffect(() => { - return () => { - if (!node) return; - context.layers.delete(node); - context.layersWithOutsidePointerEventsDisabled.delete(node); - dispatchUpdate(); - }; - }, [node, context]); - React.useEffect(() => { - const handleUpdate = () => force({}); - document.addEventListener(CONTEXT_UPDATE, handleUpdate); - return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate); - }, []); - return /* @__PURE__ */ jsx( - Primitive.div, - { - ...layerProps, - ref: composedRefs, - style: { - pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0, - ...props.style - }, - onFocusCapture: composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture), - onBlurCapture: composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture), - onPointerDownCapture: composeEventHandlers( - props.onPointerDownCapture, - pointerDownOutside.onPointerDownCapture - ) - } - ); - } -); -DismissableLayer.displayName = DISMISSABLE_LAYER_NAME; -var BRANCH_NAME = "DismissableLayerBranch"; -var DismissableLayerBranch = React.forwardRef((props, forwardedRef) => { - const context = React.useContext(DismissableLayerContext); - const ref = React.useRef(null); - const composedRefs = useComposedRefs(forwardedRef, ref); - React.useEffect(() => { - const node = ref.current; - if (node) { - context.branches.add(node); - return () => { - context.branches.delete(node); - }; - } - }, [context.branches]); - return /* @__PURE__ */ jsx(Primitive.div, { ...props, ref: composedRefs }); -}); -DismissableLayerBranch.displayName = BRANCH_NAME; -function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) { - const handlePointerDownOutside = useCallbackRef$1(onPointerDownOutside); - const isPointerInsideReactTreeRef = React.useRef(false); - const handleClickRef = React.useRef(() => { - }); - React.useEffect(() => { - const handlePointerDown = (event) => { - if (event.target && !isPointerInsideReactTreeRef.current) { - let handleAndDispatchPointerDownOutsideEvent2 = function() { - handleAndDispatchCustomEvent( - POINTER_DOWN_OUTSIDE, - handlePointerDownOutside, - eventDetail, - { discrete: true } - ); - }; - const eventDetail = { originalEvent: event }; - if (event.pointerType === "touch") { - ownerDocument.removeEventListener("click", handleClickRef.current); - handleClickRef.current = handleAndDispatchPointerDownOutsideEvent2; - ownerDocument.addEventListener("click", handleClickRef.current, { once: true }); - } else { - handleAndDispatchPointerDownOutsideEvent2(); - } - } else { - ownerDocument.removeEventListener("click", handleClickRef.current); - } - isPointerInsideReactTreeRef.current = false; - }; - const timerId = window.setTimeout(() => { - ownerDocument.addEventListener("pointerdown", handlePointerDown); - }, 0); - return () => { - window.clearTimeout(timerId); - ownerDocument.removeEventListener("pointerdown", handlePointerDown); - ownerDocument.removeEventListener("click", handleClickRef.current); - }; - }, [ownerDocument, handlePointerDownOutside]); - return { - // ensures we check React component tree (not just DOM tree) - onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true - }; -} -function useFocusOutside(onFocusOutside, ownerDocument = globalThis?.document) { - const handleFocusOutside = useCallbackRef$1(onFocusOutside); - const isFocusInsideReactTreeRef = React.useRef(false); - React.useEffect(() => { - const handleFocus = (event) => { - if (event.target && !isFocusInsideReactTreeRef.current) { - const eventDetail = { originalEvent: event }; - handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, { - discrete: false - }); - } - }; - ownerDocument.addEventListener("focusin", handleFocus); - return () => ownerDocument.removeEventListener("focusin", handleFocus); - }, [ownerDocument, handleFocusOutside]); - return { - onFocusCapture: () => isFocusInsideReactTreeRef.current = true, - onBlurCapture: () => isFocusInsideReactTreeRef.current = false - }; -} -function dispatchUpdate() { - const event = new CustomEvent(CONTEXT_UPDATE); - document.dispatchEvent(event); -} -function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) { - const target = detail.originalEvent.target; - const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail }); - if (handler) target.addEventListener(name, handler, { once: true }); - if (discrete) { - dispatchDiscreteCustomEvent(target, event); - } else { - target.dispatchEvent(event); - } -} - -var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount"; -var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount"; -var EVENT_OPTIONS = { bubbles: false, cancelable: true }; -var FOCUS_SCOPE_NAME = "FocusScope"; -var FocusScope = React.forwardRef((props, forwardedRef) => { - const { - loop = false, - trapped = false, - onMountAutoFocus: onMountAutoFocusProp, - onUnmountAutoFocus: onUnmountAutoFocusProp, - ...scopeProps - } = props; - const [container, setContainer] = React.useState(null); - const onMountAutoFocus = useCallbackRef$1(onMountAutoFocusProp); - const onUnmountAutoFocus = useCallbackRef$1(onUnmountAutoFocusProp); - const lastFocusedElementRef = React.useRef(null); - const composedRefs = useComposedRefs(forwardedRef, (node) => setContainer(node)); - const focusScope = React.useRef({ - paused: false, - pause() { - this.paused = true; - }, - resume() { - this.paused = false; - } - }).current; - React.useEffect(() => { - if (trapped) { - let handleFocusIn2 = function(event) { - if (focusScope.paused || !container) return; - const target = event.target; - if (container.contains(target)) { - lastFocusedElementRef.current = target; - } else { - focus(lastFocusedElementRef.current, { select: true }); - } - }, handleFocusOut2 = function(event) { - if (focusScope.paused || !container) return; - const relatedTarget = event.relatedTarget; - if (relatedTarget === null) return; - if (!container.contains(relatedTarget)) { - focus(lastFocusedElementRef.current, { select: true }); - } - }, handleMutations2 = function(mutations) { - const focusedElement = document.activeElement; - if (focusedElement !== document.body) return; - for (const mutation of mutations) { - if (mutation.removedNodes.length > 0) focus(container); - } - }; - document.addEventListener("focusin", handleFocusIn2); - document.addEventListener("focusout", handleFocusOut2); - const mutationObserver = new MutationObserver(handleMutations2); - if (container) mutationObserver.observe(container, { childList: true, subtree: true }); - return () => { - document.removeEventListener("focusin", handleFocusIn2); - document.removeEventListener("focusout", handleFocusOut2); - mutationObserver.disconnect(); - }; - } - }, [trapped, container, focusScope.paused]); - React.useEffect(() => { - if (container) { - focusScopesStack.add(focusScope); - const previouslyFocusedElement = document.activeElement; - const hasFocusedCandidate = container.contains(previouslyFocusedElement); - if (!hasFocusedCandidate) { - const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS); - container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus); - container.dispatchEvent(mountEvent); - if (!mountEvent.defaultPrevented) { - focusFirst(removeLinks(getTabbableCandidates(container)), { select: true }); - if (document.activeElement === previouslyFocusedElement) { - focus(container); - } - } - } - return () => { - container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus); - setTimeout(() => { - const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS); - container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus); - container.dispatchEvent(unmountEvent); - if (!unmountEvent.defaultPrevented) { - focus(previouslyFocusedElement ?? document.body, { select: true }); - } - container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus); - focusScopesStack.remove(focusScope); - }, 0); - }; - } - }, [container, onMountAutoFocus, onUnmountAutoFocus, focusScope]); - const handleKeyDown = React.useCallback( - (event) => { - if (!loop && !trapped) return; - if (focusScope.paused) return; - const isTabKey = event.key === "Tab" && !event.altKey && !event.ctrlKey && !event.metaKey; - const focusedElement = document.activeElement; - if (isTabKey && focusedElement) { - const container2 = event.currentTarget; - const [first, last] = getTabbableEdges(container2); - const hasTabbableElementsInside = first && last; - if (!hasTabbableElementsInside) { - if (focusedElement === container2) event.preventDefault(); - } else { - if (!event.shiftKey && focusedElement === last) { - event.preventDefault(); - if (loop) focus(first, { select: true }); - } else if (event.shiftKey && focusedElement === first) { - event.preventDefault(); - if (loop) focus(last, { select: true }); - } - } - } - }, - [loop, trapped, focusScope.paused] - ); - return /* @__PURE__ */ jsx(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown }); -}); -FocusScope.displayName = FOCUS_SCOPE_NAME; -function focusFirst(candidates, { select = false } = {}) { - const previouslyFocusedElement = document.activeElement; - for (const candidate of candidates) { - focus(candidate, { select }); - if (document.activeElement !== previouslyFocusedElement) return; - } -} -function getTabbableEdges(container) { - const candidates = getTabbableCandidates(container); - const first = findVisible(candidates, container); - const last = findVisible(candidates.reverse(), container); - return [first, last]; -} -function getTabbableCandidates(container) { - const nodes = []; - const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, { - acceptNode: (node) => { - const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden"; - if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP; - return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP; - } - }); - while (walker.nextNode()) nodes.push(walker.currentNode); - return nodes; -} -function findVisible(elements, container) { - for (const element of elements) { - if (!isHidden(element, { upTo: container })) return element; - } -} -function isHidden(node, { upTo }) { - if (getComputedStyle(node).visibility === "hidden") return true; - while (node) { - if (upTo !== void 0 && node === upTo) return false; - if (getComputedStyle(node).display === "none") return true; - node = node.parentElement; - } - return false; -} -function isSelectableInput(element) { - return element instanceof HTMLInputElement && "select" in element; -} -function focus(element, { select = false } = {}) { - if (element && element.focus) { - const previouslyFocusedElement = document.activeElement; - element.focus({ preventScroll: true }); - if (element !== previouslyFocusedElement && isSelectableInput(element) && select) - element.select(); - } -} -var focusScopesStack = createFocusScopesStack(); -function createFocusScopesStack() { - let stack = []; - return { - add(focusScope) { - const activeFocusScope = stack[0]; - if (focusScope !== activeFocusScope) { - activeFocusScope?.pause(); - } - stack = arrayRemove(stack, focusScope); - stack.unshift(focusScope); - }, - remove(focusScope) { - stack = arrayRemove(stack, focusScope); - stack[0]?.resume(); - } - }; -} -function arrayRemove(array, item) { - const updatedArray = [...array]; - const index = updatedArray.indexOf(item); - if (index !== -1) { - updatedArray.splice(index, 1); - } - return updatedArray; -} -function removeLinks(items) { - return items.filter((item) => item.tagName !== "A"); -} - -var PORTAL_NAME$1 = "Portal"; -var Portal$1 = React.forwardRef((props, forwardedRef) => { - const { container: containerProp, ...portalProps } = props; - const [mounted, setMounted] = React.useState(false); - useLayoutEffect2(() => setMounted(true), []); - const container = containerProp || mounted && globalThis?.document?.body; - return container ? ReactDOM__default.createPortal(/* @__PURE__ */ jsx(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null; -}); -Portal$1.displayName = PORTAL_NAME$1; - -function useStateMachine(initialState, machine) { - return React.useReducer((state, event) => { - const nextState = machine[state][event]; - return nextState ?? state; - }, initialState); -} - -// packages/react/presence/src/Presence.tsx -var Presence = (props) => { - const { present, children } = props; - const presence = usePresence(present); - const child = typeof children === "function" ? children({ present: presence.isPresent }) : React.Children.only(children); - const ref = useComposedRefs(presence.ref, getElementRef(child)); - const forceMount = typeof children === "function"; - return forceMount || presence.isPresent ? React.cloneElement(child, { ref }) : null; -}; -Presence.displayName = "Presence"; -function usePresence(present) { - const [node, setNode] = React.useState(); - const stylesRef = React.useRef({}); - const prevPresentRef = React.useRef(present); - const prevAnimationNameRef = React.useRef("none"); - const initialState = present ? "mounted" : "unmounted"; - const [state, send] = useStateMachine(initialState, { - mounted: { - UNMOUNT: "unmounted", - ANIMATION_OUT: "unmountSuspended" - }, - unmountSuspended: { - MOUNT: "mounted", - ANIMATION_END: "unmounted" - }, - unmounted: { - MOUNT: "mounted" - } - }); - React.useEffect(() => { - const currentAnimationName = getAnimationName(stylesRef.current); - prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none"; - }, [state]); - useLayoutEffect2(() => { - const styles = stylesRef.current; - const wasPresent = prevPresentRef.current; - const hasPresentChanged = wasPresent !== present; - if (hasPresentChanged) { - const prevAnimationName = prevAnimationNameRef.current; - const currentAnimationName = getAnimationName(styles); - if (present) { - send("MOUNT"); - } else if (currentAnimationName === "none" || styles?.display === "none") { - send("UNMOUNT"); - } else { - const isAnimating = prevAnimationName !== currentAnimationName; - if (wasPresent && isAnimating) { - send("ANIMATION_OUT"); - } else { - send("UNMOUNT"); - } - } - prevPresentRef.current = present; - } - }, [present, send]); - useLayoutEffect2(() => { - if (node) { - let timeoutId; - const ownerWindow = node.ownerDocument.defaultView ?? window; - const handleAnimationEnd = (event) => { - const currentAnimationName = getAnimationName(stylesRef.current); - const isCurrentAnimation = currentAnimationName.includes(event.animationName); - if (event.target === node && isCurrentAnimation) { - send("ANIMATION_END"); - if (!prevPresentRef.current) { - const currentFillMode = node.style.animationFillMode; - node.style.animationFillMode = "forwards"; - timeoutId = ownerWindow.setTimeout(() => { - if (node.style.animationFillMode === "forwards") { - node.style.animationFillMode = currentFillMode; - } - }); - } - } - }; - const handleAnimationStart = (event) => { - if (event.target === node) { - prevAnimationNameRef.current = getAnimationName(stylesRef.current); - } - }; - node.addEventListener("animationstart", handleAnimationStart); - node.addEventListener("animationcancel", handleAnimationEnd); - node.addEventListener("animationend", handleAnimationEnd); - return () => { - ownerWindow.clearTimeout(timeoutId); - node.removeEventListener("animationstart", handleAnimationStart); - node.removeEventListener("animationcancel", handleAnimationEnd); - node.removeEventListener("animationend", handleAnimationEnd); - }; - } else { - send("ANIMATION_END"); - } - }, [node, send]); - return { - isPresent: ["mounted", "unmountSuspended"].includes(state), - ref: React.useCallback((node2) => { - if (node2) stylesRef.current = getComputedStyle(node2); - setNode(node2); - }, []) - }; -} -function getAnimationName(styles) { - return styles?.animationName || "none"; -} -function getElementRef(element) { - let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get; - let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning; - if (mayWarn) { - return element.ref; - } - getter = Object.getOwnPropertyDescriptor(element, "ref")?.get; - mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning; - if (mayWarn) { - return element.props.ref; - } - return element.props.ref || element.ref; -} - -var count = 0; -function useFocusGuards() { - React.useEffect(() => { - const edgeGuards = document.querySelectorAll("[data-radix-focus-guard]"); - document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard()); - document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard()); - count++; - return () => { - if (count === 1) { - document.querySelectorAll("[data-radix-focus-guard]").forEach((node) => node.remove()); - } - count--; - }; - }, []); -} -function createFocusGuard() { - const element = document.createElement("span"); - element.setAttribute("data-radix-focus-guard", ""); - element.tabIndex = 0; - element.style.outline = "none"; - element.style.opacity = "0"; - element.style.position = "fixed"; - element.style.pointerEvents = "none"; - return element; -} - -/****************************************************************************** -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. -***************************************************************************** */ -/* global Reflect, Promise, SuppressedError, Symbol, Iterator */ - - -var __assign = function() { - __assign = 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.apply(this, arguments); -}; - -function __rest(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(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; -}; - -var zeroRightClassName = 'right-scroll-bar-position'; -var fullWidthClassName = 'width-before-scroll-bar'; -var noScrollbarsClassName = 'with-scroll-bars-hidden'; -/** - * Name of a CSS variable containing the amount of "hidden" scrollbar - * ! might be undefined ! use will fallback! - */ -var removedBarSizeVariable = '--removed-body-scroll-bar-size'; - -/** - * Assigns a value for a given ref, no matter of the ref format - * @param {RefObject} ref - a callback function or ref object - * @param value - a new value - * - * @see https://github.com/theKashey/use-callback-ref#assignref - * @example - * const refObject = useRef(); - * const refFn = (ref) => {....} - * - * assignRef(refObject, "refValue"); - * assignRef(refFn, "refValue"); - */ -function assignRef(ref, value) { - if (typeof ref === 'function') { - ref(value); - } - else if (ref) { - ref.current = value; - } - return ref; -} - -/** - * creates a MutableRef with ref change callback - * @param initialValue - initial ref value - * @param {Function} callback - a callback to run when value changes - * - * @example - * const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue); - * ref.current = 1; - * // prints 0 -> 1 - * - * @see https://reactjs.org/docs/hooks-reference.html#useref - * @see https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref - * @returns {MutableRefObject} - */ -function useCallbackRef(initialValue, callback) { - var ref = useState(function () { return ({ - // value - value: initialValue, - // last callback - callback: callback, - // "memoized" public interface - facade: { - get current() { - return ref.value; - }, - set current(value) { - var last = ref.value; - if (last !== value) { - ref.value = value; - ref.callback(value, last); - } - }, - }, - }); })[0]; - // update callback - ref.callback = callback; - return ref.facade; -} - -var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect; -var currentValues = new WeakMap(); -/** - * Merges two or more refs together providing a single interface to set their value - * @param {RefObject|Ref} refs - * @returns {MutableRefObject} - a new ref, which translates all changes to {refs} - * - * @see {@link mergeRefs} a version without buit-in memoization - * @see https://github.com/theKashey/use-callback-ref#usemergerefs - * @example - * const Component = React.forwardRef((props, ref) => { - * const ownRef = useRef(); - * const domRef = useMergeRefs([ref, ownRef]); // 👈 merge together - * return
...
- * } - */ -function useMergeRefs(refs, defaultValue) { - var callbackRef = useCallbackRef(defaultValue || null, function (newValue) { - return refs.forEach(function (ref) { return assignRef(ref, newValue); }); - }); - // handle refs changes - added or removed - useIsomorphicLayoutEffect(function () { - var oldValue = currentValues.get(callbackRef); - if (oldValue) { - var prevRefs_1 = new Set(oldValue); - var nextRefs_1 = new Set(refs); - var current_1 = callbackRef.current; - prevRefs_1.forEach(function (ref) { - if (!nextRefs_1.has(ref)) { - assignRef(ref, null); - } - }); - nextRefs_1.forEach(function (ref) { - if (!prevRefs_1.has(ref)) { - assignRef(ref, current_1); - } - }); - } - currentValues.set(callbackRef, refs); - }, [refs]); - return callbackRef; -} - -function ItoI(a) { - return a; -} -function innerCreateMedium(defaults, middleware) { - if (middleware === void 0) { middleware = ItoI; } - var buffer = []; - var assigned = false; - var medium = { - read: function () { - if (assigned) { - throw new Error('Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.'); - } - if (buffer.length) { - return buffer[buffer.length - 1]; - } - return defaults; - }, - useMedium: function (data) { - var item = middleware(data, assigned); - buffer.push(item); - return function () { - buffer = buffer.filter(function (x) { return x !== item; }); - }; - }, - assignSyncMedium: function (cb) { - assigned = true; - while (buffer.length) { - var cbs = buffer; - buffer = []; - cbs.forEach(cb); - } - buffer = { - push: function (x) { return cb(x); }, - filter: function () { return buffer; }, - }; - }, - assignMedium: function (cb) { - assigned = true; - var pendingQueue = []; - if (buffer.length) { - var cbs = buffer; - buffer = []; - cbs.forEach(cb); - pendingQueue = buffer; - } - var executeQueue = function () { - var cbs = pendingQueue; - pendingQueue = []; - cbs.forEach(cb); - }; - var cycle = function () { return Promise.resolve().then(executeQueue); }; - cycle(); - buffer = { - push: function (x) { - pendingQueue.push(x); - cycle(); - }, - filter: function (filter) { - pendingQueue = pendingQueue.filter(filter); - return buffer; - }, - }; - }, - }; - return medium; -} -// eslint-disable-next-line @typescript-eslint/ban-types -function createSidecarMedium(options) { - if (options === void 0) { options = {}; } - var medium = innerCreateMedium(null); - medium.options = __assign({ async: true, ssr: false }, options); - return medium; -} - -var SideCar$1 = function (_a) { - var sideCar = _a.sideCar, rest = __rest(_a, ["sideCar"]); - if (!sideCar) { - throw new Error('Sidecar: please provide `sideCar` property to import the right car'); - } - var Target = sideCar.read(); - if (!Target) { - throw new Error('Sidecar medium not found'); - } - return React.createElement(Target, __assign({}, rest)); -}; -SideCar$1.isSideCarExport = true; -function exportSidecar(medium, exported) { - medium.useMedium(exported); - return SideCar$1; -} - -var effectCar = createSidecarMedium(); - -var nothing = function () { - return; -}; -/** - * Removes scrollbar from the page and contain the scroll within the Lock - */ -var RemoveScroll$1 = React.forwardRef(function (props, parentRef) { - var ref = React.useRef(null); - var _a = React.useState({ - onScrollCapture: nothing, - onWheelCapture: nothing, - onTouchMoveCapture: nothing, - }), callbacks = _a[0], setCallbacks = _a[1]; - var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container = _b === void 0 ? 'div' : _b, gapMode = props.gapMode, rest = __rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom", "as", "gapMode"]); - var SideCar = sideCar; - var containerRef = useMergeRefs([ref, parentRef]); - var containerProps = __assign(__assign({}, rest), callbacks); - return (React.createElement(React.Fragment, null, - enabled && (React.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode: gapMode })), - forwardProps ? (React.cloneElement(React.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef }))) : (React.createElement(Container, __assign({}, containerProps, { className: className, ref: containerRef }), children)))); -}); -RemoveScroll$1.defaultProps = { - enabled: true, - removeScrollBar: true, - inert: false, -}; -RemoveScroll$1.classNames = { - fullWidth: fullWidthClassName, - zeroRight: zeroRightClassName, -}; - -var currentNonce; -var getNonce = function () { - if (currentNonce) { - return currentNonce; - } - if (typeof __webpack_nonce__ !== 'undefined') { - return __webpack_nonce__; - } - return undefined; -}; - -function makeStyleTag() { - if (!document) - return null; - var tag = document.createElement('style'); - tag.type = 'text/css'; - var nonce = getNonce(); - if (nonce) { - tag.setAttribute('nonce', nonce); - } - return tag; -} -function injectStyles(tag, css) { - // @ts-ignore - if (tag.styleSheet) { - // @ts-ignore - tag.styleSheet.cssText = css; - } - else { - tag.appendChild(document.createTextNode(css)); - } -} -function insertStyleTag(tag) { - var head = document.head || document.getElementsByTagName('head')[0]; - head.appendChild(tag); -} -var stylesheetSingleton = function () { - var counter = 0; - var stylesheet = null; - return { - add: function (style) { - if (counter == 0) { - if ((stylesheet = makeStyleTag())) { - injectStyles(stylesheet, style); - insertStyleTag(stylesheet); - } - } - counter++; - }, - remove: function () { - counter--; - if (!counter && stylesheet) { - stylesheet.parentNode && stylesheet.parentNode.removeChild(stylesheet); - stylesheet = null; - } - }, - }; -}; - -/** - * creates a hook to control style singleton - * @see {@link styleSingleton} for a safer component version - * @example - * ```tsx - * const useStyle = styleHookSingleton(); - * /// - * useStyle('body { overflow: hidden}'); - */ -var styleHookSingleton = function () { - var sheet = stylesheetSingleton(); - return function (styles, isDynamic) { - React.useEffect(function () { - sheet.add(styles); - return function () { - sheet.remove(); - }; - }, [styles && isDynamic]); - }; -}; - -/** - * create a Component to add styles on demand - * - styles are added when first instance is mounted - * - styles are removed when the last instance is unmounted - * - changing styles in runtime does nothing unless dynamic is set. But with multiple components that can lead to the undefined behavior - */ -var styleSingleton = function () { - var useStyle = styleHookSingleton(); - var Sheet = function (_a) { - var styles = _a.styles, dynamic = _a.dynamic; - useStyle(styles, dynamic); - return null; - }; - return Sheet; -}; - -var zeroGap = { - left: 0, - top: 0, - right: 0, - gap: 0, -}; -var parse = function (x) { return parseInt(x || '', 10) || 0; }; -var getOffset = function (gapMode) { - var cs = window.getComputedStyle(document.body); - var left = cs[gapMode === 'padding' ? 'paddingLeft' : 'marginLeft']; - var top = cs[gapMode === 'padding' ? 'paddingTop' : 'marginTop']; - var right = cs[gapMode === 'padding' ? 'paddingRight' : 'marginRight']; - return [parse(left), parse(top), parse(right)]; -}; -var getGapWidth = function (gapMode) { - if (gapMode === void 0) { gapMode = 'margin'; } - if (typeof window === 'undefined') { - return zeroGap; - } - var offsets = getOffset(gapMode); - var documentWidth = document.documentElement.clientWidth; - var windowWidth = window.innerWidth; - return { - left: offsets[0], - top: offsets[1], - right: offsets[2], - gap: Math.max(0, windowWidth - documentWidth + offsets[2] - offsets[0]), - }; -}; - -var Style = styleSingleton(); -var lockAttribute = 'data-scroll-locked'; -// important tip - once we measure scrollBar width and remove them -// we could not repeat this operation -// thus we are using style-singleton - only the first "yet correct" style will be applied. -var getStyles = function (_a, allowRelative, gapMode, important) { - var left = _a.left, top = _a.top, right = _a.right, gap = _a.gap; - if (gapMode === void 0) { gapMode = 'margin'; } - return "\n .".concat(noScrollbarsClassName, " {\n overflow: hidden ").concat(important, ";\n padding-right: ").concat(gap, "px ").concat(important, ";\n }\n body[").concat(lockAttribute, "] {\n overflow: hidden ").concat(important, ";\n overscroll-behavior: contain;\n ").concat([ - allowRelative && "position: relative ".concat(important, ";"), - gapMode === 'margin' && - "\n padding-left: ".concat(left, "px;\n padding-top: ").concat(top, "px;\n padding-right: ").concat(right, "px;\n margin-left:0;\n margin-top:0;\n margin-right: ").concat(gap, "px ").concat(important, ";\n "), - gapMode === 'padding' && "padding-right: ".concat(gap, "px ").concat(important, ";"), - ] - .filter(Boolean) - .join(''), "\n }\n \n .").concat(zeroRightClassName, " {\n right: ").concat(gap, "px ").concat(important, ";\n }\n \n .").concat(fullWidthClassName, " {\n margin-right: ").concat(gap, "px ").concat(important, ";\n }\n \n .").concat(zeroRightClassName, " .").concat(zeroRightClassName, " {\n right: 0 ").concat(important, ";\n }\n \n .").concat(fullWidthClassName, " .").concat(fullWidthClassName, " {\n margin-right: 0 ").concat(important, ";\n }\n \n body[").concat(lockAttribute, "] {\n ").concat(removedBarSizeVariable, ": ").concat(gap, "px;\n }\n"); -}; -var getCurrentUseCounter = function () { - var counter = parseInt(document.body.getAttribute(lockAttribute) || '0', 10); - return isFinite(counter) ? counter : 0; -}; -var useLockAttribute = function () { - React.useEffect(function () { - document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString()); - return function () { - var newCounter = getCurrentUseCounter() - 1; - if (newCounter <= 0) { - document.body.removeAttribute(lockAttribute); - } - else { - document.body.setAttribute(lockAttribute, newCounter.toString()); - } - }; - }, []); -}; -/** - * Removes page scrollbar and blocks page scroll when mounted - */ -var RemoveScrollBar = function (_a) { - var noRelative = _a.noRelative, noImportant = _a.noImportant, _b = _a.gapMode, gapMode = _b === void 0 ? 'margin' : _b; - useLockAttribute(); - /* - gap will be measured on every component mount - however it will be used only by the "first" invocation - due to singleton nature of