@tamagui/core 1.0.1-beta.148 → 1.0.1-beta.151
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/constants/platform.js.map +2 -2
- package/dist/cjs/createComponent.js +161 -52
- package/dist/cjs/createComponent.js.map +2 -2
- package/dist/cjs/createFont.js +2 -1
- package/dist/cjs/createFont.js.map +2 -2
- package/dist/cjs/helpers/getSplitStyles.js +60 -50
- package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
- package/dist/cjs/helpers/mergeTransform.js.map +2 -2
- package/dist/cjs/hooks/useFeatures.js +0 -120
- package/dist/cjs/hooks/useFeatures.js.map +2 -2
- package/dist/cjs/insertFont.js +1 -1
- package/dist/cjs/insertFont.js.map +2 -2
- package/dist/cjs/types.js.map +1 -1
- package/dist/esm/constants/platform.js.map +2 -2
- package/dist/esm/createComponent.js +169 -55
- package/dist/esm/createComponent.js.map +2 -2
- package/dist/esm/createFont.js +2 -1
- package/dist/esm/createFont.js.map +2 -2
- package/dist/esm/helpers/getSplitStyles.js +60 -50
- package/dist/esm/helpers/getSplitStyles.js.map +2 -2
- package/dist/esm/helpers/mergeTransform.js.map +2 -2
- package/dist/esm/hooks/useFeatures.js +0 -120
- package/dist/esm/hooks/useFeatures.js.map +2 -2
- package/dist/esm/insertFont.js +1 -1
- package/dist/esm/insertFont.js.map +2 -2
- package/package.json +10 -9
- package/src/constants/platform.ts +1 -0
- package/src/createComponent.tsx +246 -57
- package/src/createFont.ts +4 -1
- package/src/helpers/getSplitStyles.tsx +73 -65
- package/src/helpers/mergeTransform.ts +2 -0
- package/src/insertFont.ts +1 -1
- package/src/types.tsx +7 -5
- package/types/helpers/getSplitStyles.d.ts +1 -0
- package/types/hooks/useFeatures.d.ts +0 -1
- package/types/types.d.ts +11 -3
- package/src/hooks/useFeatures.tsx +0 -289
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/getSplitStyles.tsx"],
|
|
4
|
-
"sourcesContent": ["import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } from '@tamagui/helpers'\nimport { useInsertionEffect } from 'react'\nimport { ViewStyle } from 'react-native'\n\nimport { getConfig } from '../config'\nimport { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { mediaQueryConfig, mediaState } from '../hooks/useMedia'\nimport type {\n DebugProp,\n MediaQueryKey,\n PseudoPropKeys,\n PseudoStyles,\n SplitStyleState,\n StackProps,\n StaticConfigParsed,\n TamaguiInternalConfig,\n ThemeObject,\n} from '../types'\nimport { FontLanguageProps, LanguageContextType } from '../views/FontLanguage.types'\nimport { createMediaStyle } from './createMediaStyle'\nimport { fixStyles } from './expandStyles'\nimport { getAtomicStyle, getStylesAtomic, styleToCSS } from './getStylesAtomic'\nimport {\n PartialStyleObject,\n RulesToInsert,\n insertStyleRules,\n insertedTransforms,\n shouldInsertStyleRules,\n updateInserted,\n updateRules,\n} from './insertStyleRule'\nimport { mergeTransform } from './mergeTransform'\nimport { normalizeValueWithProperty } from './normalizeValueWithProperty.js'\nimport { pseudoDescriptors } from './pseudoDescriptors'\n\nexport type SplitStyles = ReturnType<typeof getSplitStyles>\nexport type ClassNamesObject = Record<string, string>\nexport type SplitStyleResult = ReturnType<typeof getSplitStyles>\n\nconst skipProps = {\n animation: true,\n animateOnly: true,\n debug: true,\n componentName: true,\n\n ...(!isWeb && {\n tag: true,\n whiteSpace: true,\n wordWrap: true,\n textOverflow: true,\n textDecorationDistance: true,\n userSelect: true,\n selectable: true,\n cursor: true,\n contain: true,\n boxSizing: true,\n boxShadow: true,\n }),\n}\n\ntype TransformNamespaceKey = 'transform' | PseudoPropKeys | MediaQueryKey\n\nlet conf: TamaguiInternalConfig\n\ntype StyleSplitter = (\n props: { [key: string]: any },\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n state: SplitStyleState,\n defaultClassNames?: any,\n languageContext?: LanguageContextType,\n debug?: DebugProp\n) => {\n pseudos: PseudoStyles\n medias: Record<MediaQueryKey, ViewStyle>\n style: ViewStyle\n classNames: ClassNamesObject\n rulesToInsert: RulesToInsert\n viewProps: StackProps\n fontFamily: string | undefined\n}\n\nexport const PROP_SPLIT = '-'\n\n// this is how compiler outputs psueodo identifier\n// TODO remove in next refactor\nexport const pseudoCNInverse = {\n hover: 'hoverStyle',\n focus: 'focusStyle',\n press: 'pressStyle',\n}\n\n// loop props backwards\n// track used keys:\n// const keys = new Set<string>()\n// keep classnames and styles separate:\n// const styles = {}\n// const classNames = {}\n\nexport const getSplitStyles: StyleSplitter = (\n props,\n staticConfig,\n theme,\n state,\n defaultClassNames,\n languageContext,\n debug\n) => {\n conf = conf || getConfig()\n const validStyleProps = staticConfig.isText ? stylePropsText : validStyles\n const viewProps: StackProps = {}\n const pseudos: PseudoStyles = {}\n const medias: Record<MediaQueryKey, ViewStyle> = {}\n const usedKeys = new Set<string>()\n const propKeys = Object.keys(props)\n const shouldDoClasses = (isWeb || process.env.IS_STATIC === 'is_static') && !state.noClassNames\n const len = propKeys.length\n const rulesToInsert: RulesToInsert = []\n const style: ViewStyle = {}\n // TODO make this CSS, not compile-friendly\n if (state.hasTextAncestor) {\n // parity with react-native-web\n style.display = 'inline-flex' as any\n }\n let classNames: ClassNamesObject = {}\n // we need to gather these specific to each media query / pseudo\n // value is [hash, val], so [\"-jnjad-asdnjk\", \"scaleX(1) rotate(10deg)\"]\n let transforms = null as Record<TransformNamespaceKey, [string, string]> | null\n\n function mergeClassName(key: string, val: string, isMediaOrPseudo = false) {\n if (process.env.TAMAGUI_TARGET === 'web') {\n // empty classnames passed by compiler sometimes\n if (!val) return\n if (val.startsWith('_transform-')) {\n const namespace: TransformNamespaceKey = isMediaOrPseudo ? key : 'transform'\n\n let transform = insertedTransforms[val]\n if (isClient) {\n if (!transform) {\n // HMR or loaded a new chunk\n updateInserted()\n transform = insertedTransforms[val]\n if (process.env.NODE_ENV === 'development') {\n if (!transform) {\n // eslint-disable-next-line no-console\n console.warn('no transform found', { insertedTransforms, val })\n }\n }\n }\n if (!transform) {\n if (isWeb && val[0] !== '_') {\n // runtime insert\n transform = val\n }\n }\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n // prettier-ignore\n // eslint-disable-next-line no-console\n console.log(' \uD83D\uDD39 getSplitStyles mergeClassName transform', { key, val, namespace, transform, insertedTransforms })\n }\n }\n transforms = transforms || {}\n transforms[namespace] = transforms[namespace] || ['', '']\n const identifier = val.replace('_transform', '')\n transforms[namespace][0] += identifier\n // ssr doesn't need to do anything just make the right classname\n if (transform) {\n transforms[namespace][1] += transform\n }\n } else {\n classNames[key] = val\n }\n }\n }\n\n // fontFamily is our special baby, ensure we grab the latest set one always\n let fontFamily: string | undefined\n\n // loop backwards so we can skip already-used props\n for (let i = len - 1; i >= 0; i--) {\n let keyInit = propKeys[i]\n const valInit = props[keyInit]\n\n // normalize shorthands up front\n const expandedKey = conf.shorthands[keyInit]\n if (expandedKey) {\n keyInit = expandedKey\n }\n\n if (keyInit === 'fontFamily' && fontFamily === undefined) {\n fontFamily = valInit\n }\n\n if (usedKeys.has(keyInit)) continue\n if (skipProps[keyInit]) continue\n if (!isWeb && keyInit.startsWith('data-')) continue\n\n if (keyInit === 'style' || keyInit.startsWith('_style')) {\n if (!valInit) continue\n for (const key in valInit) {\n if (usedKeys.has(key)) continue\n if (valInit && typeof valInit === 'object') {\n // newer react native versions return a full object instead of ID\n for (const skey in valInit) {\n if (usedKeys.has(skey)) continue\n usedKeys.add(skey)\n style[skey] = valInit[skey]\n }\n } else {\n usedKeys.add(key)\n style[key] = valInit\n }\n }\n continue\n }\n\n if (process.env.TAMAGUI_TARGET === 'web') {\n if (keyInit === 'className') {\n let nonTamaguis = ''\n if (!valInit) continue\n for (const cn of valInit.split(' ')) {\n if (cn[0] === '_') {\n // tamagui, merge it expanded on key, eventually this will go away with better compiler\n const [shorthand, mediaOrPseudo] = cn.slice(1).split('-')\n const isMedia = mediaOrPseudo[0] === '_'\n const isPseudo = mediaOrPseudo[0] === '0'\n const isMediaOrPseudo = isMedia || isPseudo\n let fullKey = conf.shorthands[shorthand]\n if (isMedia) {\n // is media\n let mediaShortKey = mediaOrPseudo.slice(1)\n mediaShortKey = mediaShortKey.slice(0, mediaShortKey.indexOf('_'))\n fullKey += `${PROP_SPLIT}${mediaShortKey}`\n } else if (isPseudo) {\n // is pseudo\n const pseudoShortKey = mediaOrPseudo.slice(1)\n fullKey += `${PROP_SPLIT}${pseudoShortKey}`\n }\n usedKeys.add(fullKey)\n mergeClassName(fullKey, cn, isMediaOrPseudo)\n } else {\n nonTamaguis += ' ' + cn\n }\n }\n if (nonTamaguis) {\n usedKeys.add(keyInit)\n mergeClassName(keyInit, nonTamaguis)\n }\n continue\n }\n\n if (valInit && valInit[0] === '_') {\n // if valid style key (or pseudo like color-hover):\n // this conditional and esp the pseudo check rarely runs so not a perf issue\n const isValidClassName = validStyles[keyInit]\n const isMediaOrPseudo =\n !isValidClassName &&\n keyInit.includes(PROP_SPLIT) &&\n validStyles[keyInit.split(PROP_SPLIT)[0]]\n if (isValidClassName || isMediaOrPseudo) {\n usedKeys.add(keyInit)\n mergeClassName(keyInit, valInit, isMediaOrPseudo)\n continue\n }\n }\n }\n\n if (state.keepVariantsAsProps) {\n if (\n (staticConfig.defaultVariants && keyInit in staticConfig.defaultVariants) ||\n // may want to just: not compile styled() into classnames, always do this, and always pass in all values in extras.props\n // but we'd want to add styled({ extracted: true }) or something at compile time to save on parsing a bit...\n (staticConfig.variants && keyInit in staticConfig.variants)\n ) {\n viewProps[keyInit] = valInit\n }\n }\n\n /**\n * There's (some) reason to this madness: we want to allow returning media/pseudo from variants\n * Say you have a variant hoverable: { true: { hoverStyle: {} } }\n * We run propMapper first to expand variant, then we run the inner loop and look again\n * for if there's a pseudo/media returned from it.\n */\n\n let isMedia = keyInit[0] === '$'\n let isPseudo = validPseudoKeys[keyInit]\n let isMediaOrPseudo = isMedia || isPseudo\n\n if (\n !isMedia &&\n !isPseudo &&\n !staticConfig.variants?.[keyInit] &&\n !validStyleProps[keyInit] &&\n !conf.shorthands[keyInit]\n ) {\n usedKeys.add(keyInit)\n viewProps[keyInit] = valInit\n continue\n }\n\n const expanded =\n isMedia || isPseudo\n ? [[keyInit, valInit]]\n : staticConfig.propMapper(\n keyInit,\n valInit,\n theme,\n props,\n state,\n languageContext,\n undefined,\n debug\n )\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n // eslint-disable-next-line no-console\n console.log(' \uD83D\uDD39 getSplitStyles', keyInit, valInit, expanded)\n }\n\n if (!expanded) {\n continue\n }\n\n for (const [key, val] of expanded) {\n if (val === undefined) continue\n\n isMedia = key[0] === '$'\n isPseudo = validPseudoKeys[key]\n isMediaOrPseudo = isMedia || isPseudo\n\n if (!isMediaOrPseudo) {\n if (usedKeys.has(key)) continue\n }\n\n if (\n (staticConfig.deoptProps && staticConfig.deoptProps.has(key)) ||\n (staticConfig.inlineProps && staticConfig.inlineProps.has(key)) ||\n (staticConfig.inlineWhenUnflattened && staticConfig.inlineWhenUnflattened.has(key))\n ) {\n usedKeys.add(key)\n viewProps[key] = props[key] ?? val\n }\n\n // pseudo\n if (isPseudo) {\n if (!val) continue\n if (key === 'enterStyle' && state.mounted) {\n // once mounted we can ignore enterStyle\n continue\n }\n pseudos[key] = pseudos[key] || {}\n pseudos[key] = getSubStyle(\n key,\n val,\n staticConfig,\n theme,\n props,\n state,\n conf,\n languageContext,\n true\n )\n if (shouldDoClasses) {\n const pseudoStyles = getAtomicStyle(pseudos[key], pseudoDescriptors[key])\n for (const style of pseudoStyles) {\n const postfix = pseudoDescriptors[key]?.name || key // exitStyle/enterStyle dont have pseudoDescriptors\n const fullKey = `${style.property}${PROP_SPLIT}${postfix}`\n if (!usedKeys.has(fullKey)) {\n usedKeys.add(fullKey)\n addStyleToInsertRules(rulesToInsert, style)\n mergeClassName(fullKey, style.identifier, isMediaOrPseudo)\n }\n }\n }\n continue\n }\n\n // media\n if (isMedia) {\n const mediaKey = key\n const mediaKeyShort = mediaKey.slice(1)\n\n if (!mediaQueryConfig[mediaKeyShort]) {\n if (!usedKeys.has(key)) {\n // this isn't a media key, pass through\n viewProps[key] = val\n }\n continue\n }\n\n // dont check if media is active, we just apply *all* media styles\n // we combine the media props on top regular props, could proxy this\n // TODO test proxy here instead of merge\n // THIS USED TO PROXY BACK TO REGULAR PROPS BUT THAT IS THE WRONG BEHAVIOR\n // we avoid passing in default props for media queries because that would confuse things like SizableText.size:\n const mediaStyle = getSubStyle(\n key,\n val,\n staticConfig,\n theme,\n props,\n state,\n conf,\n languageContext\n )\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n // prettier-ignore\n // eslint-disable-next-line no-console\n console.log(' \uD83D\uDD39 mediaStyle', { mediaKey, mediaStyle, props, shouldDoClasses })\n }\n\n if (shouldDoClasses) {\n const mediaStyles = getStylesAtomic(mediaStyle)\n for (const style of mediaStyles) {\n const out = createMediaStyle(style, mediaKeyShort, mediaQueryConfig)\n const fullKey = `${style.property}${PROP_SPLIT}${mediaKeyShort}`\n if (!usedKeys.has(fullKey)) {\n usedKeys.add(fullKey)\n addStyleToInsertRules(rulesToInsert, out)\n mergeClassName(fullKey, out.identifier, true)\n }\n }\n } else {\n if (mediaState[mediaKey]) {\n if (process.env.NODE_ENV === 'development' && debug) {\n // eslint-disable-next-line no-console\n console.log('apply media style', mediaKey, mediaState)\n }\n Object.assign(shouldDoClasses ? medias : style, mediaStyle)\n }\n }\n continue\n }\n\n if (!isWeb && key === 'pointerEvents') {\n usedKeys.add(key)\n viewProps[key] = val\n continue\n }\n\n if (validStyleProps[key]) {\n usedKeys.add(key)\n if (val && val[0] === '_') {\n classNames[key] = val\n } else if (key in stylePropsTransform) {\n mergeTransform(style, key, val, true)\n } else {\n // if (key === 'pointerEvents') {\n // // pointer events can be box-none which requires css\n // addStyleToInsertRules(out.identifier, out.styleRule)\n // mergeClassName(fullKey, out.identifier, true)\n // } else {\n style[key] = normalizeValueWithProperty(val, key)\n // }\n }\n continue\n }\n\n // pass to view props\n if (!staticConfig.variants || !(key in staticConfig.variants)) {\n if (!skipProps[key]) {\n viewProps[key] = val\n usedKeys.add(key)\n }\n }\n }\n }\n\n fixStyles(style)\n if (isWeb) {\n styleToCSS(style)\n }\n\n // add in defaults if not set:\n if (defaultClassNames) {\n classNames = {\n ...defaultClassNames,\n ...classNames,\n }\n }\n\n if (shouldDoClasses) {\n const atomic = getStylesAtomic(style)\n for (const atomicStyle of atomic) {\n const key = atomicStyle.property\n // pointerEvents box-none must be CSS-ified\n // should probably have a few more exceptions here!\n if (key === 'pointerEvents' || !state.dynamicStylesInline) {\n addStyleToInsertRules(rulesToInsert, atomicStyle)\n mergeClassName(key, atomicStyle.identifier)\n } else {\n style[key] = atomicStyle.value\n }\n }\n } else {\n if (classNames && state.resolveVariablesAs === 'value') {\n // getting real values for colors for animations (reverse mapped from CSS)\n // this isn't beautiful, but will do relatively fine performance for now\n // has a bug still - try adding <Switch theme=\"bouncy\" /> should animate bg color on active\n // const selectors = getAllSelectors()\n // for (const key in classNames) {\n // if (key.endsWith('Color')) {\n // const selector = classNames[key]\n // let value = selectorValuesCache[selector]\n // if (!value) {\n // const css = selectors[selector]\n // value = css.replace(/.*:/, '').replace(/;.*/, '')\n // if (value) {\n // const themeUnwrapped = getThemeUnwrapped(theme)\n // const map = themeToVariableToValueMap.get(themeUnwrapped)\n // if (map && value.startsWith('var(')) {\n // value = map[value]\n // }\n // if (value) {\n // selectorValuesCache[selector] = value\n // }\n // } else {\n // // err\n // continue\n // }\n // }\n // if (value) {\n // style[key] = value\n // }\n // }\n // }\n }\n }\n\n if (process.env.TAMAGUI_TARGET === 'web') {\n if (transforms) {\n for (const namespace in transforms) {\n if (!transforms[namespace]) {\n if (process.env.NODE_ENV === 'development') {\n console.warn('Error no transform', transforms, namespace)\n }\n continue\n }\n const [hash, val] = transforms[namespace]\n const identifier = `_transform${hash}`\n if (isClient) {\n if (!insertedTransforms[identifier]) {\n const rule = `.${identifier} { transform: ${val}; }`\n addStyleToInsertRules(rulesToInsert, {\n identifier,\n rules: [rule],\n property: namespace,\n })\n }\n }\n classNames[namespace] = identifier\n }\n }\n }\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n if (typeof document !== 'undefined') {\n // prettier-ignore\n // eslint-disable-next-line no-console\n console.log(' \uD83D\uDD39 getSplitStyles out', { style, pseudos, medias, classNames, viewProps, state, rulesToInsert })\n }\n }\n\n return {\n fontFamily,\n viewProps,\n style,\n medias,\n pseudos,\n classNames,\n rulesToInsert,\n }\n}\n\n/**\n * getSubStyle calls propMapper with props\n * those should be specific to the substyle, but fallback to the base props\n * so given props:\n *\n * { fontSize: 12, color: 'red', $sm: { color: 'blue' } }\n *\n * getSubStyle props should be a proxy that ends up like:\n *\n * { fontSize: 12, color: 'blue' }\n *\n * and to avoid re-creating it over and over, use a WeakMap\n */\nconst propProxies = new WeakMap()\nfunction getSubStyleProxiedProps(defaultProps: Object, baseProps: Object, specificProps: Object) {\n if (!specificProps) {\n // functional variants may want to eventually do something like:\n // have a hooks-like rule (no conditionals)\n // then we run them once on compile with a proxy to capture the keys accessed\n // then add those keys to `inlineProps` so we know we must inline them\n // for now this will trigger because compiled away\n // right now also we don't pass in any pre-extracted styled() props but we should pass them in..\n return baseProps\n }\n // can cache based only on specific it's always referentially consistent with base\n if (propProxies.has(specificProps)) {\n return propProxies.get(specificProps)\n }\n const next = new Proxy(specificProps, {\n has(_, key) {\n return key in defaultProps || key in specificProps || key in baseProps\n },\n get(_, key) {\n return defaultProps[key] ?? specificProps[key] ?? baseProps[key]\n },\n })\n propProxies.set(specificProps, next)\n return next\n}\n\nexport const getSubStyle = (\n subKey: string,\n styleIn: Object,\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n props: any,\n state: SplitStyleState,\n conf: TamaguiInternalConfig,\n languageContext?: FontLanguageProps,\n avoidDefaultProps?: boolean\n): ViewStyle => {\n const styleOut: ViewStyle = {}\n for (let key in styleIn) {\n const val = styleIn[key]\n key = conf.shorthands[key] || key\n const expanded = staticConfig.propMapper(\n key,\n val,\n theme,\n getSubStyleProxiedProps(staticConfig.defaultProps, props, props[subKey]),\n state,\n languageContext,\n avoidDefaultProps\n )\n if (!expanded) continue\n for (const [skey, sval] of expanded) {\n if (skey in stylePropsTransform) {\n mergeTransform(styleOut, skey, sval)\n } else {\n styleOut[skey] = normalizeValueWithProperty(sval, key)\n }\n }\n }\n\n fixStyles(styleOut)\n\n return styleOut\n}\n\nexport const insertSplitStyles: StyleSplitter = (...args) => {\n const res = getSplitStyles(...args)\n insertStyleRules(res.rulesToInsert)\n return res\n}\n\n// on native no need to insert any css\nconst useInsertEffectCompat = isWeb ? useInsertionEffect || useIsomorphicLayoutEffect : () => {}\n\nexport const useSplitStyles: StyleSplitter = (...args) => {\n const res = getSplitStyles(...args)\n\n if (!isRSC) {\n useInsertEffectCompat(() => {\n insertStyleRules(res.rulesToInsert)\n }, [res.rulesToInsert])\n }\n\n return res\n}\n\nfunction addStyleToInsertRules(rulesToInsert: RulesToInsert, styleObject: PartialStyleObject) {\n if (process.env.TAMAGUI_TARGET === 'web') {\n if (!shouldInsertStyleRules(styleObject)) {\n return\n }\n updateRules(styleObject.identifier, styleObject.rules)\n rulesToInsert.push(styleObject)\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAkF;AAClF,mBAAmC;AAGnC,oBAA0B;AAC1B,sBAAkE;AAClE,sBAA6C;AAa7C,8BAAiC;AACjC,0BAA0B;AAC1B,6BAA4D;AAC5D,6BAQO;AACP,4BAA+B;AAC/B,wCAA2C;AAC3C,+BAAkC;AAMlC,MAAM,YAAY;AAAA,EAChB,WAAW;AAAA,EACX,aAAa;AAAA,EACb,OAAO;AAAA,EACP,eAAe;AAAA,EAEf,GAAI,CAAC,yBAAS;AAAA,IACZ,KAAK;AAAA,IACL,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,cAAc;AAAA,IACd,wBAAwB;AAAA,IACxB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AACF;AAIA,IAAI;
|
|
4
|
+
"sourcesContent": ["import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } from '@tamagui/helpers'\nimport { useInsertionEffect } from 'react'\nimport { ViewStyle } from 'react-native'\n\nimport { getConfig } from '../config'\nimport { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { mediaQueryConfig, mediaState } from '../hooks/useMedia'\nimport type {\n DebugProp,\n MediaQueryKey,\n PseudoPropKeys,\n PseudoStyles,\n SplitStyleState,\n StackProps,\n StaticConfigParsed,\n TamaguiInternalConfig,\n ThemeObject,\n} from '../types'\nimport { FontLanguageProps, LanguageContextType } from '../views/FontLanguage.types'\nimport { createMediaStyle } from './createMediaStyle'\nimport { fixStyles } from './expandStyles'\nimport { getAtomicStyle, getStylesAtomic, styleToCSS } from './getStylesAtomic'\nimport {\n PartialStyleObject,\n RulesToInsert,\n insertStyleRules,\n insertedTransforms,\n shouldInsertStyleRules,\n updateInserted,\n updateRules,\n} from './insertStyleRule'\nimport { mergeTransform } from './mergeTransform'\nimport { normalizeValueWithProperty } from './normalizeValueWithProperty.js'\nimport { pseudoDescriptors } from './pseudoDescriptors'\n\nexport type SplitStyles = ReturnType<typeof getSplitStyles>\nexport type ClassNamesObject = Record<string, string>\nexport type SplitStyleResult = ReturnType<typeof getSplitStyles>\n\nconst skipProps = {\n animation: true,\n animateOnly: true,\n debug: true,\n componentName: true,\n\n ...(!isWeb && {\n tag: true,\n whiteSpace: true,\n wordWrap: true,\n textOverflow: true,\n textDecorationDistance: true,\n userSelect: true,\n selectable: true,\n cursor: true,\n contain: true,\n boxSizing: true,\n boxShadow: true,\n }),\n}\n\ntype TransformNamespaceKey = 'transform' | PseudoPropKeys | MediaQueryKey\n\nlet conf: TamaguiInternalConfig\n\ntype StyleSplitter = (\n props: { [key: string]: any },\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n state: SplitStyleState,\n defaultClassNames?: any,\n languageContext?: LanguageContextType,\n debug?: DebugProp\n) => {\n pseudos: PseudoStyles\n medias: Record<MediaQueryKey, ViewStyle>\n style: ViewStyle\n classNames: ClassNamesObject\n rulesToInsert: RulesToInsert\n viewProps: StackProps\n fontFamily: string | undefined\n mediaKeys: string[]\n}\n\nexport const PROP_SPLIT = '-'\n\n// this is how compiler outputs psueodo identifier\n// TODO remove in next refactor\nexport const pseudoCNInverse = {\n hover: 'hoverStyle',\n focus: 'focusStyle',\n press: 'pressStyle',\n}\n\n// loop props backwards\n// track used keys:\n// const keys = new Set<string>()\n// keep classnames and styles separate:\n// const styles = {}\n// const classNames = {}\n\nexport const getSplitStyles: StyleSplitter = (\n props,\n staticConfig,\n theme,\n state,\n defaultClassNames,\n languageContext,\n debug\n) => {\n conf = conf || getConfig()\n const validStyleProps = staticConfig.isText ? stylePropsText : validStyles\n const mediaKeys: string[] = []\n const viewProps: StackProps = {}\n const pseudos: PseudoStyles = {}\n const medias: Record<MediaQueryKey, ViewStyle> = {}\n const usedKeys = new Set<string>()\n const propKeys = Object.keys(props)\n const shouldDoClasses =\n (isWeb || process.env.IS_STATIC === 'is_static') && !state.noClassNames && !props.animation\n const len = propKeys.length\n const rulesToInsert: RulesToInsert = []\n const style: ViewStyle = {}\n // TODO make this CSS, not compile-friendly\n if (state.hasTextAncestor) {\n // parity with react-native-web\n style.display = 'inline-flex' as any\n }\n let classNames: ClassNamesObject = {}\n // we need to gather these specific to each media query / pseudo\n // value is [hash, val], so [\"-jnjad-asdnjk\", \"scaleX(1) rotate(10deg)\"]\n const transforms: Record<TransformNamespaceKey, [string, string]> = {}\n // fontFamily is our special baby, ensure we grab the latest set one always\n let fontFamily: string | undefined\n\n // loop backwards so we can skip already-used props\n for (let i = len - 1; i >= 0; i--) {\n let keyInit = propKeys[i]\n const valInit = props[keyInit]\n\n // normalize shorthands up front\n const expandedKey = conf.shorthands[keyInit]\n if (expandedKey) {\n keyInit = expandedKey\n }\n\n if (keyInit === 'fontFamily' && fontFamily === undefined) {\n fontFamily = valInit\n }\n\n if (usedKeys.has(keyInit)) continue\n if (skipProps[keyInit]) continue\n if (!isWeb && keyInit.startsWith('data-')) continue\n\n if (keyInit === 'style' || keyInit.startsWith('_style')) {\n if (!valInit) continue\n for (const key in valInit) {\n if (usedKeys.has(key)) continue\n if (valInit && typeof valInit === 'object') {\n // newer react native versions return a full object instead of ID\n for (const skey in valInit) {\n if (usedKeys.has(skey)) continue\n usedKeys.add(skey)\n style[skey] = valInit[skey]\n }\n } else {\n usedKeys.add(key)\n style[key] = valInit\n }\n }\n continue\n }\n\n if (process.env.TAMAGUI_TARGET === 'web') {\n if (keyInit === 'className') {\n let nonTamaguis = ''\n if (!valInit) continue\n for (const cn of valInit.split(' ')) {\n if (cn[0] === '_') {\n // tamagui, merge it expanded on key, eventually this will go away with better compiler\n const [shorthand, mediaOrPseudo] = cn.slice(1).split('-')\n const isMedia = mediaOrPseudo[0] === '_'\n const isPseudo = mediaOrPseudo[0] === '0'\n const isMediaOrPseudo = isMedia || isPseudo\n let fullKey = conf.shorthands[shorthand]\n if (isMedia) {\n // is media\n let mediaShortKey = mediaOrPseudo.slice(1)\n mediaShortKey = mediaShortKey.slice(0, mediaShortKey.indexOf('_'))\n fullKey += `${PROP_SPLIT}${mediaShortKey}`\n } else if (isPseudo) {\n // is pseudo\n const pseudoShortKey = mediaOrPseudo.slice(1)\n fullKey += `${PROP_SPLIT}${pseudoShortKey}`\n }\n usedKeys.add(fullKey)\n mergeClassName(transforms, classNames, fullKey, cn, isMediaOrPseudo)\n } else {\n nonTamaguis += ' ' + cn\n }\n }\n if (nonTamaguis) {\n usedKeys.add(keyInit)\n mergeClassName(transforms, classNames, keyInit, nonTamaguis)\n }\n continue\n }\n\n if (valInit && valInit[0] === '_') {\n // if valid style key (or pseudo like color-hover):\n // this conditional and esp the pseudo check rarely runs so not a perf issue\n const isValidClassName = validStyles[keyInit]\n const isMediaOrPseudo =\n !isValidClassName &&\n keyInit.includes(PROP_SPLIT) &&\n validStyles[keyInit.split(PROP_SPLIT)[0]]\n if (isValidClassName || isMediaOrPseudo) {\n usedKeys.add(keyInit)\n mergeClassName(transforms, classNames, keyInit, valInit, isMediaOrPseudo)\n continue\n }\n }\n }\n\n if (state.keepVariantsAsProps) {\n if (\n (staticConfig.defaultVariants && keyInit in staticConfig.defaultVariants) ||\n // may want to just: not compile styled() into classnames, always do this, and always pass in all values in extras.props\n // but we'd want to add styled({ extracted: true }) or something at compile time to save on parsing a bit...\n (staticConfig.variants && keyInit in staticConfig.variants)\n ) {\n viewProps[keyInit] = valInit\n }\n }\n\n /**\n * There's (some) reason to this madness: we want to allow returning media/pseudo from variants\n * Say you have a variant hoverable: { true: { hoverStyle: {} } }\n * We run propMapper first to expand variant, then we run the inner loop and look again\n * for if there's a pseudo/media returned from it.\n */\n\n let isMedia = keyInit[0] === '$'\n let isPseudo = validPseudoKeys[keyInit]\n let isMediaOrPseudo = isMedia || isPseudo\n\n if (\n !isMedia &&\n !isPseudo &&\n !staticConfig.variants?.[keyInit] &&\n !validStyleProps[keyInit] &&\n !conf.shorthands[keyInit]\n ) {\n usedKeys.add(keyInit)\n viewProps[keyInit] = valInit\n continue\n }\n\n const expanded =\n isMedia || isPseudo\n ? [[keyInit, valInit]]\n : staticConfig.propMapper(\n keyInit,\n valInit,\n theme,\n props,\n state,\n languageContext,\n undefined,\n debug\n )\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n // eslint-disable-next-line no-console\n console.log(' \uD83D\uDD39 getSplitStyles', keyInit, valInit, expanded)\n }\n\n if (!expanded) {\n continue\n }\n\n for (const [key, val] of expanded) {\n if (val === undefined) continue\n\n isMedia = key[0] === '$'\n isPseudo = validPseudoKeys[key]\n isMediaOrPseudo = isMedia || isPseudo\n\n if (!isMediaOrPseudo) {\n if (usedKeys.has(key)) continue\n }\n\n if (\n (staticConfig.deoptProps && staticConfig.deoptProps.has(key)) ||\n (staticConfig.inlineProps && staticConfig.inlineProps.has(key)) ||\n (staticConfig.inlineWhenUnflattened && staticConfig.inlineWhenUnflattened.has(key))\n ) {\n usedKeys.add(key)\n viewProps[key] = props[key] ?? val\n }\n\n // pseudo\n if (isPseudo) {\n if (!val) continue\n if (key === 'enterStyle' && state.mounted) {\n // once mounted we can ignore enterStyle\n continue\n }\n pseudos[key] = pseudos[key] || {}\n const pseudoStyleObject = getSubStyle(\n key,\n val,\n staticConfig,\n theme,\n props,\n state,\n conf,\n languageContext,\n true\n )\n pseudos[key] = pseudoStyleObject\n if (shouldDoClasses && key !== 'enterStyle' && key !== 'exitStyle') {\n const pseudoStyles = getAtomicStyle(pseudoStyleObject, pseudoDescriptors[key])\n for (const style of pseudoStyles) {\n const postfix = pseudoDescriptors[key]?.name || key // exitStyle/enterStyle dont have pseudoDescriptors\n const fullKey = `${style.property}${PROP_SPLIT}${postfix}`\n if (!usedKeys.has(fullKey)) {\n usedKeys.add(fullKey)\n addStyleToInsertRules(rulesToInsert, style)\n mergeClassName(transforms, classNames, fullKey, style.identifier, isMediaOrPseudo)\n }\n }\n }\n continue\n }\n\n // media\n if (isMedia) {\n const mediaKey = key\n mediaKeys.push(key)\n const mediaKeyShort = mediaKey.slice(1)\n\n if (!mediaQueryConfig[mediaKeyShort]) {\n if (!usedKeys.has(key)) {\n // this isn't a media key, pass through\n viewProps[key] = val\n }\n continue\n }\n\n // dont check if media is active, we just apply *all* media styles\n // we combine the media props on top regular props, could proxy this\n // TODO test proxy here instead of merge\n // THIS USED TO PROXY BACK TO REGULAR PROPS BUT THAT IS THE WRONG BEHAVIOR\n // we avoid passing in default props for media queries because that would confuse things like SizableText.size:\n const mediaStyle = getSubStyle(\n key,\n val,\n staticConfig,\n theme,\n props,\n state,\n conf,\n languageContext\n )\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n // prettier-ignore\n // eslint-disable-next-line no-console\n console.log(' \uD83D\uDD39 mediaStyle', { mediaKey, mediaStyle, props, shouldDoClasses })\n }\n\n if (shouldDoClasses) {\n const mediaStyles = getStylesAtomic(mediaStyle)\n for (const style of mediaStyles) {\n const out = createMediaStyle(style, mediaKeyShort, mediaQueryConfig)\n const fullKey = `${style.property}${PROP_SPLIT}${mediaKeyShort}`\n if (!usedKeys.has(fullKey)) {\n usedKeys.add(fullKey)\n addStyleToInsertRules(rulesToInsert, out)\n mergeClassName(transforms, classNames, fullKey, out.identifier, true)\n }\n }\n } else {\n if (mediaState[mediaKey]) {\n if (process.env.NODE_ENV === 'development' && debug) {\n // eslint-disable-next-line no-console\n console.log('apply media style', mediaKey, mediaState)\n }\n if (shouldDoClasses) {\n Object.assign(medias, mediaStyle)\n } else {\n for (const key in mediaStyle) {\n usedKeys.add(key)\n style[key] = mediaStyle[key]\n if (key === 'fontFamily') {\n fontFamily = mediaStyle[key]\n }\n }\n }\n }\n }\n continue\n }\n\n if (!isWeb && key === 'pointerEvents') {\n usedKeys.add(key)\n viewProps[key] = val\n continue\n }\n\n if (validStyleProps[key]) {\n usedKeys.add(key)\n if (val && val[0] === '_') {\n classNames[key] = val\n } else if (key in stylePropsTransform) {\n mergeTransform(style, key, val, true)\n } else {\n style[key] = normalizeValueWithProperty(val, key)\n }\n continue\n }\n\n // pass to view props\n if (!staticConfig.variants || !(key in staticConfig.variants)) {\n if (!skipProps[key]) {\n viewProps[key] = val\n usedKeys.add(key)\n }\n }\n }\n }\n\n fixStyles(style)\n if (isWeb) {\n styleToCSS(style)\n }\n\n // add in defaults if not set:\n if (defaultClassNames) {\n classNames = {\n ...defaultClassNames,\n ...classNames,\n }\n }\n\n if (shouldDoClasses) {\n const atomic = getStylesAtomic(style)\n for (const atomicStyle of atomic) {\n const key = atomicStyle.property\n // pointerEvents box-none must be CSS-ified\n // should probably have a few more exceptions here!\n if (key === 'pointerEvents' || !state.dynamicStylesInline) {\n addStyleToInsertRules(rulesToInsert, atomicStyle)\n mergeClassName(transforms, classNames, key, atomicStyle.identifier)\n } else {\n style[key] = atomicStyle.value\n }\n }\n } else {\n if (classNames && state.resolveVariablesAs === 'value') {\n // getting real values for colors for animations (reverse mapped from CSS)\n // this isn't beautiful, but will do relatively fine performance for now\n // has a bug still - try adding <Switch theme=\"bouncy\" /> should animate bg color on active\n // const selectors = getAllSelectors()\n // for (const key in classNames) {\n // if (key.endsWith('Color')) {\n // const selector = classNames[key]\n // let value = selectorValuesCache[selector]\n // if (!value) {\n // const css = selectors[selector]\n // value = css.replace(/.*:/, '').replace(/;.*/, '')\n // if (value) {\n // const themeUnwrapped = getThemeUnwrapped(theme)\n // const map = themeToVariableToValueMap.get(themeUnwrapped)\n // if (map && value.startsWith('var(')) {\n // value = map[value]\n // }\n // if (value) {\n // selectorValuesCache[selector] = value\n // }\n // } else {\n // // err\n // continue\n // }\n // }\n // if (value) {\n // style[key] = value\n // }\n // }\n // }\n }\n }\n\n if (process.env.TAMAGUI_TARGET === 'web') {\n if (transforms) {\n for (const namespace in transforms) {\n if (!transforms[namespace]) {\n if (process.env.NODE_ENV === 'development') {\n console.warn('Error no transform', transforms, namespace)\n }\n continue\n }\n const [hash, val] = transforms[namespace]\n const identifier = `_transform${hash}`\n if (isClient) {\n if (!insertedTransforms[identifier]) {\n const rule = `.${identifier} { transform: ${val}; }`\n addStyleToInsertRules(rulesToInsert, {\n identifier,\n rules: [rule],\n property: namespace,\n })\n }\n }\n classNames[namespace] = identifier\n }\n }\n }\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n if (typeof document !== 'undefined') {\n // prettier-ignore\n // eslint-disable-next-line no-console\n console.log(' \uD83D\uDD39 getSplitStyles out', { style, pseudos, medias, classNames, viewProps, state, rulesToInsert })\n }\n }\n\n return {\n fontFamily,\n viewProps,\n style,\n medias,\n mediaKeys,\n pseudos,\n classNames,\n rulesToInsert,\n }\n}\n\nfunction mergeClassName(\n transforms: Record<string, any[]>,\n classNames: Record<string, string>,\n key: string,\n val: string,\n isMediaOrPseudo = false\n) {\n if (process.env.TAMAGUI_TARGET === 'web') {\n // empty classnames passed by compiler sometimes\n if (!val) return\n if (val.startsWith('_transform-')) {\n const namespace: TransformNamespaceKey = isMediaOrPseudo ? key : 'transform'\n let transform = insertedTransforms[val]\n if (isClient) {\n if (!transform) {\n // HMR or loaded a new chunk\n updateInserted()\n transform = insertedTransforms[val]\n if (process.env.NODE_ENV === 'development') {\n if (!transform) {\n // eslint-disable-next-line no-console\n console.warn('no transform found', { insertedTransforms, val })\n }\n }\n }\n if (!transform) {\n if (isWeb && val[0] !== '_') {\n // runtime insert\n transform = val\n }\n }\n }\n transforms[namespace] = transforms[namespace] || ['', '']\n const identifier = val.replace('_transform', '')\n transforms[namespace][0] += identifier\n // ssr doesn't need to do anything just make the right classname\n if (transform) {\n transforms[namespace][1] += transform\n }\n } else {\n classNames[key] = val\n }\n }\n}\n\n/**\n * getSubStyle calls propMapper with props\n * those should be specific to the substyle, but fallback to the base props\n * so given props:\n *\n * { fontSize: 12, color: 'red', $sm: { color: 'blue' } }\n *\n * getSubStyle props should be a proxy that ends up like:\n *\n * { fontSize: 12, color: 'blue' }\n *\n * and to avoid re-creating it over and over, use a WeakMap\n */\nconst propProxies = new WeakMap()\nfunction getSubStyleProxiedProps(defaultProps: Object, baseProps: Object, specificProps: Object) {\n if (!specificProps) {\n // functional variants may want to eventually do something like:\n // have a hooks-like rule (no conditionals)\n // then we run them once on compile with a proxy to capture the keys accessed\n // then add those keys to `inlineProps` so we know we must inline them\n // for now this will trigger because compiled away\n // right now also we don't pass in any pre-extracted styled() props but we should pass them in..\n return baseProps\n }\n // can cache based only on specific it's always referentially consistent with base\n if (propProxies.has(specificProps)) {\n return propProxies.get(specificProps)\n }\n const next = new Proxy(specificProps, {\n has(_, key) {\n return key in defaultProps || key in specificProps || key in baseProps\n },\n get(_, key) {\n return defaultProps[key] ?? specificProps[key] ?? baseProps[key]\n },\n })\n propProxies.set(specificProps, next)\n return next\n}\n\nexport const getSubStyle = (\n subKey: string,\n styleIn: Object,\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n props: any,\n state: SplitStyleState,\n conf: TamaguiInternalConfig,\n languageContext?: FontLanguageProps,\n avoidDefaultProps?: boolean\n): ViewStyle => {\n const styleOut: ViewStyle = {}\n for (let key in styleIn) {\n const val = styleIn[key]\n key = conf.shorthands[key] || key\n const expanded = staticConfig.propMapper(\n key,\n val,\n theme,\n getSubStyleProxiedProps(staticConfig.defaultProps, props, props[subKey]),\n state,\n languageContext,\n avoidDefaultProps\n )\n if (!expanded) continue\n for (const [skey, sval] of expanded) {\n if (skey in stylePropsTransform) {\n mergeTransform(styleOut, skey, sval)\n } else {\n styleOut[skey] = normalizeValueWithProperty(sval, key)\n }\n }\n }\n\n fixStyles(styleOut)\n\n return styleOut\n}\n\nexport const insertSplitStyles: StyleSplitter = (...args) => {\n const res = getSplitStyles(...args)\n insertStyleRules(res.rulesToInsert)\n return res\n}\n\n// on native no need to insert any css\nconst useInsertEffectCompat = isWeb ? useInsertionEffect || useIsomorphicLayoutEffect : () => {}\n\nexport const useSplitStyles: StyleSplitter = (...args) => {\n const res = getSplitStyles(...args)\n\n if (!isRSC) {\n useInsertEffectCompat(() => {\n insertStyleRules(res.rulesToInsert)\n }, [res.rulesToInsert])\n }\n\n return res\n}\n\nfunction addStyleToInsertRules(rulesToInsert: RulesToInsert, styleObject: PartialStyleObject) {\n if (process.env.TAMAGUI_TARGET === 'web') {\n if (!shouldInsertStyleRules(styleObject)) {\n return\n }\n updateRules(styleObject.identifier, styleObject.rules)\n rulesToInsert.push(styleObject)\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/mergeTransform.ts"],
|
|
4
|
-
"sourcesContent": ["import { ViewStyle } from 'react-native'\n\nexport const mergeTransform = (obj: ViewStyle, key: string, val: any, backwards = false) => {\n obj.transform ||= []\n obj.transform[backwards ? 'unshift' : 'push']({ [mapTransformKeys[key] || key]: val } as any)\n}\nconst mapTransformKeys = {\n x: 'translateX',\n y: 'translateY',\n}\nexport const invertMapTransformKeys = {\n translateX: 'x',\n translateY: 'y',\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,iBAAiB,CAAC,KAAgB,KAAa,KAAU,YAAY,UAAU;AAC1F,MAAI,aAAJ,KAAI,YAAc,CAAC;AACnB,MAAI,UAAU,YAAY,YAAY,QAAQ,EAAE,CAAC,iBAAiB,QAAQ,MAAM,IAAI,CAAQ;AAC9F;
|
|
4
|
+
"sourcesContent": ["import { ViewStyle } from 'react-native'\n\nexport const mergeTransform = (obj: ViewStyle, key: string, val: any, backwards = false) => {\n obj.transform ||= []\n obj.transform[backwards ? 'unshift' : 'push']({ [mapTransformKeys[key] || key]: val } as any)\n}\n\nconst mapTransformKeys = {\n x: 'translateX',\n y: 'translateY',\n}\n\nexport const invertMapTransformKeys = {\n translateX: 'x',\n translateY: 'y',\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,iBAAiB,CAAC,KAAgB,KAAa,KAAU,YAAY,UAAU;AAC1F,MAAI,aAAJ,KAAI,YAAc,CAAC;AACnB,MAAI,UAAU,YAAY,YAAY,QAAQ,EAAE,CAAC,iBAAiB,QAAQ,MAAM,IAAI,CAAQ;AAC9F;AAEA,MAAM,mBAAmB;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,yBAAyB;AAAA,EACpC,YAAY;AAAA,EACZ,YAAY;AACd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -25,9 +25,7 @@ __export(useFeatures_exports, {
|
|
|
25
25
|
});
|
|
26
26
|
module.exports = __toCommonJS(useFeatures_exports);
|
|
27
27
|
var import_react = __toESM(require("react"));
|
|
28
|
-
var import_config = require("../config");
|
|
29
28
|
var import_platform = require("../constants/platform");
|
|
30
|
-
var import_getSplitStyles = require("../helpers/getSplitStyles");
|
|
31
29
|
var import_useMedia = require("./useMedia");
|
|
32
30
|
const createDefinition = ({
|
|
33
31
|
Component,
|
|
@@ -37,7 +35,6 @@ const createDefinition = ({
|
|
|
37
35
|
Component
|
|
38
36
|
});
|
|
39
37
|
let featureDefinitions = null;
|
|
40
|
-
let tamaguiConfig;
|
|
41
38
|
const useFeatures = (props, utils) => {
|
|
42
39
|
if (!featureDefinitions) {
|
|
43
40
|
featureDefinitions = loadFeatures();
|
|
@@ -62,126 +59,9 @@ const useFeatures = (props, utils) => {
|
|
|
62
59
|
};
|
|
63
60
|
function loadFeatures() {
|
|
64
61
|
return {
|
|
65
|
-
animation: loadAnimationFeature(),
|
|
66
62
|
mediaQuery: loadMediaQueryFeature()
|
|
67
63
|
};
|
|
68
64
|
}
|
|
69
|
-
function loadAnimationFeature() {
|
|
70
|
-
tamaguiConfig = tamaguiConfig || (0, import_config.getConfig)();
|
|
71
|
-
return createDefinition({
|
|
72
|
-
Component: ({ _utils, ...props }) => {
|
|
73
|
-
const {
|
|
74
|
-
state,
|
|
75
|
-
useAnimations,
|
|
76
|
-
pseudos,
|
|
77
|
-
style: inStyle,
|
|
78
|
-
setStateShallow,
|
|
79
|
-
staticConfig,
|
|
80
|
-
theme,
|
|
81
|
-
onDidAnimate
|
|
82
|
-
} = _utils;
|
|
83
|
-
if (!useAnimations) {
|
|
84
|
-
console.error("no useAnimations hook provided");
|
|
85
|
-
return null;
|
|
86
|
-
}
|
|
87
|
-
const propsWithAnimation = props;
|
|
88
|
-
const res = useAnimations(propsWithAnimation, {
|
|
89
|
-
state,
|
|
90
|
-
pseudos,
|
|
91
|
-
onDidAnimate,
|
|
92
|
-
staticConfig,
|
|
93
|
-
getStyle({ isExiting, isEntering, exitVariant, enterVariant } = {}) {
|
|
94
|
-
var _a, _b, _c, _d;
|
|
95
|
-
const style = inStyle || {};
|
|
96
|
-
const enterStyle = isEntering ? enterVariant && ((_a = staticConfig.variants) == null ? void 0 : _a[enterVariant]["true"]) ? (0, import_getSplitStyles.getSubStyle)("", (_b = staticConfig.variants) == null ? void 0 : _b[enterVariant]["true"], staticConfig, theme, props, state, tamaguiConfig) || pseudos.enterStyle : pseudos.enterStyle : null;
|
|
97
|
-
const exitStyle = isExiting ? exitVariant && ((_c = staticConfig.variants) == null ? void 0 : _c[exitVariant]["true"]) ? (0, import_getSplitStyles.getSubStyle)("", (_d = staticConfig.variants) == null ? void 0 : _d[exitVariant]["true"], staticConfig, theme, props, state, tamaguiConfig) || pseudos.exitStyle : pseudos.exitStyle : null;
|
|
98
|
-
ensureBaseHasDefaults(style, enterStyle, pseudos.hoverStyle, pseudos.focusStyle, pseudos.pressStyle, pseudos.pressStyle);
|
|
99
|
-
enterStyle && merge(style, enterStyle);
|
|
100
|
-
state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle);
|
|
101
|
-
state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle);
|
|
102
|
-
state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle);
|
|
103
|
-
exitStyle && merge(style, exitStyle);
|
|
104
|
-
if (process.env.NODE_ENV === "development") {
|
|
105
|
-
if (props["debug"]) {
|
|
106
|
-
console.log("animation style", style);
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
return style;
|
|
110
|
-
}
|
|
111
|
-
});
|
|
112
|
-
(0, import_platform.useIsomorphicLayoutEffect)(() => {
|
|
113
|
-
setStateShallow({
|
|
114
|
-
animation: res
|
|
115
|
-
});
|
|
116
|
-
}, [res]);
|
|
117
|
-
return null;
|
|
118
|
-
},
|
|
119
|
-
propNames: ["animation"]
|
|
120
|
-
});
|
|
121
|
-
}
|
|
122
|
-
const defaults = {
|
|
123
|
-
left: 0,
|
|
124
|
-
right: 0,
|
|
125
|
-
top: 0,
|
|
126
|
-
bottom: 0,
|
|
127
|
-
opacity: 1,
|
|
128
|
-
translateX: 0,
|
|
129
|
-
translateY: 0,
|
|
130
|
-
skew: 0,
|
|
131
|
-
skewX: 0,
|
|
132
|
-
skewY: 0,
|
|
133
|
-
scale: 1,
|
|
134
|
-
rotate: "0deg",
|
|
135
|
-
rotateY: "0deg",
|
|
136
|
-
rotateX: "0deg"
|
|
137
|
-
};
|
|
138
|
-
function ensureBaseHasDefaults(base, ...pseudos) {
|
|
139
|
-
for (const pseudo of pseudos) {
|
|
140
|
-
if (!pseudo)
|
|
141
|
-
continue;
|
|
142
|
-
for (const key in pseudo) {
|
|
143
|
-
const val = pseudo[key];
|
|
144
|
-
if (key === "transform") {
|
|
145
|
-
if (typeof val === "string") {
|
|
146
|
-
continue;
|
|
147
|
-
}
|
|
148
|
-
for (const t of val) {
|
|
149
|
-
const tkey = Object.keys(t)[0];
|
|
150
|
-
const defaultVal = defaults[tkey];
|
|
151
|
-
const tDefaultVal = { [tkey]: defaultVal };
|
|
152
|
-
if (!base.transform) {
|
|
153
|
-
base.transform = [tDefaultVal];
|
|
154
|
-
} else {
|
|
155
|
-
if (!base.transform.find((x) => x[tkey])) {
|
|
156
|
-
base.transform.push(tDefaultVal);
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
} else {
|
|
161
|
-
if (!(key in base)) {
|
|
162
|
-
base[key] = defaults[key];
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
function merge(base, next) {
|
|
169
|
-
if (!next.transform || !base.transform) {
|
|
170
|
-
Object.assign(base, next);
|
|
171
|
-
return;
|
|
172
|
-
}
|
|
173
|
-
const { transform, ...rest } = next;
|
|
174
|
-
Object.assign(base, rest);
|
|
175
|
-
for (const t of transform) {
|
|
176
|
-
const key = Object.keys(t)[0];
|
|
177
|
-
const existing = base.transform.find((x) => key in x);
|
|
178
|
-
if (existing) {
|
|
179
|
-
existing[key] = t[key];
|
|
180
|
-
} else {
|
|
181
|
-
base.transform.push(t);
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
65
|
function loadMediaQueryFeature() {
|
|
186
66
|
const mediaPropNames = Object.keys(import_useMedia.mediaState);
|
|
187
67
|
return createDefinition({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useFeatures.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { RefObject } from 'react'\nimport { View, ViewStyle } from 'react-native'\n\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAIlB,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { RefObject } from 'react'\nimport { View, ViewStyle } from 'react-native'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport {\n PseudoStyles,\n SplitStyleState,\n StaticConfigParsed,\n TamaguiComponentState,\n UseAnimationHook,\n} from '../types'\nimport { addMediaQueryListener, mediaState, removeMediaQueryListener } from './useMedia'\n\ntype FeatureDefinition = {\n isEnabled: (props: any) => boolean\n Component: any\n}\n\ntype FeatureUtils = {\n forceUpdate: Function\n state: SplitStyleState\n setStateShallow: (next: Partial<TamaguiComponentState>) => void\n useAnimations?: UseAnimationHook\n pseudos: PseudoStyles\n style: ViewStyle | null | undefined\n staticConfig: StaticConfigParsed\n theme: any\n onDidAnimate?: () => void\n hostRef: RefObject<HTMLElement | View>\n}\n\nconst createDefinition = ({\n Component,\n propNames,\n}: {\n Component: (props: { _utils: FeatureUtils; [key: string]: any }) => void\n propNames: string[]\n}): FeatureDefinition => ({\n isEnabled: (props: any) => propNames.some((name) => !!props[name]),\n Component,\n})\n\nlet featureDefinitions: Record<string, FeatureDefinition> | null = null\n\ntype FeatureKeys = keyof ReturnType<typeof loadFeatures>\n\nexport const useFeatures = (props: any, utils?: FeatureUtils) => {\n if (!featureDefinitions) {\n featureDefinitions = loadFeatures()\n }\n const elements: JSX.Element[] = []\n const enabled: { [key in FeatureKeys]?: boolean } = {}\n for (const name in featureDefinitions) {\n const { isEnabled, Component } = featureDefinitions[name]\n if (isEnabled(props) && Component) {\n enabled[name] = true\n elements.push(<Component key={name} {...props} _utils={utils} />)\n }\n }\n return {\n elements,\n enabled,\n }\n}\n\nfunction loadFeatures() {\n return {\n // loads animations and sets state with the results\n // animation: loadAnimationFeature(),\n\n // will update the parent whenever media query changes\n // no need on web, media queries are inserted and run in css\n mediaQuery: loadMediaQueryFeature(),\n } as const\n}\n\nfunction loadMediaQueryFeature() {\n const mediaPropNames = Object.keys(mediaState)\n\n return createDefinition({\n Component: (props: any) => {\n const mediaKeys = mediaPropNames.filter((x) => x in props)\n\n useIsomorphicLayoutEffect(() => {\n for (const key of mediaKeys) {\n addMediaQueryListener(key, props._utils.forceUpdate)\n }\n return () => {\n for (const key of mediaKeys) {\n removeMediaQueryListener(key, props._utils.forceUpdate)\n }\n }\n }, [mediaKeys.join(',')])\n\n return null\n },\n propNames: mediaPropNames,\n })\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAIlB,sBAA0C;AAQ1C,sBAA4E;AAoB5E,MAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,MAIwB;AAAA,EACxB,WAAW,CAAC,UAAe,UAAU,KAAK,CAAC,SAAS,CAAC,CAAC,MAAM,KAAK;AAAA,EACjE;AACF;AAEA,IAAI,qBAA+D;AAI5D,MAAM,cAAc,CAAC,OAAY,UAAyB;AAC/D,MAAI,CAAC,oBAAoB;AACvB,yBAAqB,aAAa;AAAA,EACpC;AACA,QAAM,WAA0B,CAAC;AACjC,QAAM,UAA8C,CAAC;AACrD,aAAW,QAAQ,oBAAoB;AACrC,UAAM,EAAE,WAAW,cAAc,mBAAmB;AACpD,QAAI,UAAU,KAAK,KAAK,WAAW;AACjC,cAAQ,QAAQ;AAChB,eAAS,KAAK,mDAAC;AAAA,QAAU,KAAK;AAAA,QAAO,GAAG;AAAA,QAAO,QAAQ;AAAA,OAAO,CAAE;AAAA,IAClE;AAAA,EACF;AACA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AAEA,wBAAwB;AACtB,SAAO;AAAA,IAML,YAAY,sBAAsB;AAAA,EACpC;AACF;AAEA,iCAAiC;AAC/B,QAAM,iBAAiB,OAAO,KAAK,0BAAU;AAE7C,SAAO,iBAAiB;AAAA,IACtB,WAAW,CAAC,UAAe;AACzB,YAAM,YAAY,eAAe,OAAO,CAAC,MAAM,KAAK,KAAK;AAEzD,qDAA0B,MAAM;AAC9B,mBAAW,OAAO,WAAW;AAC3B,qDAAsB,KAAK,MAAM,OAAO,WAAW;AAAA,QACrD;AACA,eAAO,MAAM;AACX,qBAAW,OAAO,WAAW;AAC3B,0DAAyB,KAAK,MAAM,OAAO,WAAW;AAAA,UACxD;AAAA,QACF;AAAA,MACF,GAAG,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC;AAExB,aAAO;AAAA,IACT;AAAA,IACA,WAAW;AAAA,EACb,CAAC;AACH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/insertFont.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/insertFont.ts"],
|
|
4
|
-
"sourcesContent": ["import { setConfigFont } from './config'\nimport { createFont } from './createFont'\nimport { Variable } from './createVariable'\nimport { DeepVariableObject, createVariables } from './createVariables'\nimport { registerCSSVariable, variableToCSS } from './helpers/registerCSSVariable'\nimport { GenericFont } from './types'\n\n/**\n * Runtime dynamic insert font\n */\nexport function insertFont<A extends GenericFont>(name: string, fontIn: A): DeepVariableObject<A> {\n const font = createFont(fontIn)\n const tokened = createVariables(font, name) as GenericFont\n const parsed = parseFont(tokened) as DeepVariableObject<A>\n if (process.env.TAMAGUI_TARGET === 'web' && typeof document !== 'undefined') {\n const fontVars = registerFontVariables(parsed)\n const style = document.createElement('style')\n style.innerText = `:root .font_${name} {${fontVars.join(';')}}`\n style.setAttribute('data-tamagui-font', name)\n document.head.appendChild(style)\n }\n setConfigFont(name, tokened, parsed)\n return parsed\n}\n\nexport function parseFont<A extends GenericFont>(definition: A): DeepVariableObject<A> {\n const parsed: any = {}\n for (const attrKey in definition) {\n const attr = definition[attrKey]\n if (attrKey === 'family') {\n parsed[attrKey] = attr\n continue\n }\n parsed[attrKey] = {}\n for (const key in attr) {\n let val = attr[key] as any\n // is a theme reference\n if (val.val?.[0] === '$') {\n val = val.val\n }\n parsed[attrKey][`$${key}`] = val\n }\n }\n return parsed\n}\n\nexport function registerFontVariables(parsedFont: any) {\n const response: string[] = []\n\n for (const fkey in parsedFont) {\n if (fkey === 'family') {\n const val = parsedFont[fkey] as Variable\n registerCSSVariable(val)\n response.push(variableToCSS(val))\n } else {\n for (const fskey in parsedFont[fkey]) {\n const fval = parsedFont[fkey][fskey]\n if (typeof fval === 'string') {\n // no need to add its a theme reference like \"$borderColor\"\n } else {\n const val = parsedFont[fkey][fskey] as Variable\n registerCSSVariable(val)\n response.push(variableToCSS(val))\n }\n }\n }\n }\n return response\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA8B;AAC9B,wBAA2B;AAE3B,6BAAoD;AACpD,iCAAmD;AAM5C,oBAA2C,MAAc,QAAkC;AAChG,QAAM,OAAO,kCAAW,MAAM;AAC9B,QAAM,UAAU,4CAAgB,MAAM,IAAI;AAC1C,QAAM,SAAS,UAAU,OAAO;AAChC,MAAI,QAAQ,IAAI,mBAAmB,SAAS,OAAO,aAAa,aAAa;AAC3E,UAAM,WAAW,sBAAsB,MAAM;AAC7C,UAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,UAAM,YAAY,eAAe,SAAS,SAAS,KAAK,GAAG;AAC3D,UAAM,aAAa,qBAAqB,IAAI;AAC5C,aAAS,KAAK,YAAY,KAAK;AAAA,EACjC;AACA,mCAAc,MAAM,SAAS,MAAM;AACnC,SAAO;AACT;AAEO,mBAA0C,YAAsC;AAzBvF;AA0BE,QAAM,SAAc,CAAC;AACrB,aAAW,WAAW,YAAY;AAChC,UAAM,OAAO,WAAW;AACxB,QAAI,YAAY,
|
|
4
|
+
"sourcesContent": ["import { setConfigFont } from './config'\nimport { createFont } from './createFont'\nimport { Variable } from './createVariable'\nimport { DeepVariableObject, createVariables } from './createVariables'\nimport { registerCSSVariable, variableToCSS } from './helpers/registerCSSVariable'\nimport { GenericFont } from './types'\n\n/**\n * Runtime dynamic insert font\n */\nexport function insertFont<A extends GenericFont>(name: string, fontIn: A): DeepVariableObject<A> {\n const font = createFont(fontIn)\n const tokened = createVariables(font, name) as GenericFont\n const parsed = parseFont(tokened) as DeepVariableObject<A>\n if (process.env.TAMAGUI_TARGET === 'web' && typeof document !== 'undefined') {\n const fontVars = registerFontVariables(parsed)\n const style = document.createElement('style')\n style.innerText = `:root .font_${name} {${fontVars.join(';')}}`\n style.setAttribute('data-tamagui-font', name)\n document.head.appendChild(style)\n }\n setConfigFont(name, tokened, parsed)\n return parsed\n}\n\nexport function parseFont<A extends GenericFont>(definition: A): DeepVariableObject<A> {\n const parsed: any = {}\n for (const attrKey in definition) {\n const attr = definition[attrKey]\n if (attrKey === 'family' || attrKey === 'face') {\n parsed[attrKey] = attr\n continue\n }\n parsed[attrKey] = {}\n for (const key in attr) {\n let val = attr[key] as any\n // is a theme reference\n if (val.val?.[0] === '$') {\n val = val.val\n }\n parsed[attrKey][`$${key}`] = val\n }\n }\n return parsed\n}\n\nexport function registerFontVariables(parsedFont: any) {\n const response: string[] = []\n\n for (const fkey in parsedFont) {\n if (fkey === 'family') {\n const val = parsedFont[fkey] as Variable\n registerCSSVariable(val)\n response.push(variableToCSS(val))\n } else {\n for (const fskey in parsedFont[fkey]) {\n const fval = parsedFont[fkey][fskey]\n if (typeof fval === 'string') {\n // no need to add its a theme reference like \"$borderColor\"\n } else {\n const val = parsedFont[fkey][fskey] as Variable\n registerCSSVariable(val)\n response.push(variableToCSS(val))\n }\n }\n }\n }\n return response\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA8B;AAC9B,wBAA2B;AAE3B,6BAAoD;AACpD,iCAAmD;AAM5C,oBAA2C,MAAc,QAAkC;AAChG,QAAM,OAAO,kCAAW,MAAM;AAC9B,QAAM,UAAU,4CAAgB,MAAM,IAAI;AAC1C,QAAM,SAAS,UAAU,OAAO;AAChC,MAAI,QAAQ,IAAI,mBAAmB,SAAS,OAAO,aAAa,aAAa;AAC3E,UAAM,WAAW,sBAAsB,MAAM;AAC7C,UAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,UAAM,YAAY,eAAe,SAAS,SAAS,KAAK,GAAG;AAC3D,UAAM,aAAa,qBAAqB,IAAI;AAC5C,aAAS,KAAK,YAAY,KAAK;AAAA,EACjC;AACA,mCAAc,MAAM,SAAS,MAAM;AACnC,SAAO;AACT;AAEO,mBAA0C,YAAsC;AAzBvF;AA0BE,QAAM,SAAc,CAAC;AACrB,aAAW,WAAW,YAAY;AAChC,UAAM,OAAO,WAAW;AACxB,QAAI,YAAY,YAAY,YAAY,QAAQ;AAC9C,aAAO,WAAW;AAClB;AAAA,IACF;AACA,WAAO,WAAW,CAAC;AACnB,eAAW,OAAO,MAAM;AACtB,UAAI,MAAM,KAAK;AAEf,UAAI,WAAI,QAAJ,mBAAU,QAAO,KAAK;AACxB,cAAM,IAAI;AAAA,MACZ;AACA,aAAO,SAAS,IAAI,SAAS;AAAA,IAC/B;AAAA,EACF;AACA,SAAO;AACT;AAEO,+BAA+B,YAAiB;AACrD,QAAM,WAAqB,CAAC;AAE5B,aAAW,QAAQ,YAAY;AAC7B,QAAI,SAAS,UAAU;AACrB,YAAM,MAAM,WAAW;AACvB,0DAAoB,GAAG;AACvB,eAAS,KAAK,8CAAc,GAAG,CAAC;AAAA,IAClC,OAAO;AACL,iBAAW,SAAS,WAAW,OAAO;AACpC,cAAM,OAAO,WAAW,MAAM;AAC9B,YAAI,OAAO,SAAS,UAAU;AAAA,QAE9B,OAAO;AACL,gBAAM,MAAM,WAAW,MAAM;AAC7B,8DAAoB,GAAG;AACvB,mBAAS,KAAK,8CAAc,GAAG,CAAC;AAAA,QAClC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/types.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/types.tsx"],
|
|
4
|
-
"sourcesContent": ["// TODO split this into own package @tamagui/types to share with animations packages\n\nimport { Properties } from 'csstype'\nimport React from 'react'\nimport {\n GestureResponderEvent,\n Image,\n PressableProps,\n TextProps as ReactTextProps,\n Text,\n TextInput,\n TextStyle,\n View,\n ViewProps,\n ViewStyle,\n} from 'react-native'\n\nimport { Variable } from './createVariable'\nimport { ResolveVariableTypes } from './helpers/createPropMapper'\nimport { RNWTextProps, RNWViewProps } from './types-rnw'\nimport { FontLanguageProps } from './views/FontLanguage.types'\nimport { ThemeProviderProps } from './views/ThemeProvider'\n\nexport type SpaceDirection = 'vertical' | 'horizontal' | 'both'\n\nexport type TamaguiElement = HTMLElement | View\n\nexport type DebugProp = boolean | 'break' | 'verbose'\n\n//\n// base props that are accepted by createComponent (additional to react-native-web)\n//\nexport type TamaguiComponentPropsBase = {\n hitSlop?: PressableProps['hitSlop']\n asChild?: boolean\n space?: SpaceTokens | null\n spaceDirection?: SpaceDirection\n separator?: React.ReactNode\n dangerouslySetInnerHTML?: { __html: string }\n animation?: AnimationProp\n animateOnly?: string[]\n children?: any | any[]\n debug?: DebugProp\n disabled?: boolean\n className?: string\n themeShallow?: boolean\n id?: string\n tag?: string\n theme?: ThemeName | null\n componentName?: string\n forceStyle?: 'hover' | 'press' | 'focus'\n onHoverIn?: (e: MouseEvent) => any\n onHoverOut?: (e: MouseEvent) => any\n onPress?: (e: GestureResponderEvent) => any\n onPressIn?: (e: GestureResponderEvent) => any\n onPressOut?: (e: GestureResponderEvent) => any\n // WEB ONLY\n onMouseEnter?: (e: MouseEvent) => any\n onMouseLeave?: (e: MouseEvent) => any\n onMouseDown?: (e: MouseEvent) => any\n // WEB STYLES\n userSelect?: Properties['userSelect']\n cursor?: Properties['cursor']\n}\n\nexport type ReactComponentWithRef<Props, Ref> = React.ForwardRefExoticComponent<\n Props & React.RefAttributes<Ref>\n>\n\nexport type ConfigListener = (conf: TamaguiInternalConfig) => void\n\n// to prevent things from going circular, hoisting some types in this file\n// to generally order them as building up towards TamaguiConfig\n\nexport type VariableVal = number | string | Variable\nexport type VariableColorVal = string | Variable\n\ntype GenericKey = string | number | symbol\n\nexport interface CreateTokens<Val extends VariableVal = VariableVal> {\n color: { [key: GenericKey]: Val }\n space: { [key: GenericKey]: Val }\n size: { [key: GenericKey]: Val }\n radius: { [key: GenericKey]: Val }\n zIndex: { [key: GenericKey]: Val }\n}\n\nexport type TamaguiBaseTheme = {\n // defined for our tamagui kit , we could do this inside `tamagui`\n // but maybe helpful to have some sort of universally shared things +\n // + enforce if they want their own, redefine in their design sys\n background: VariableColorVal\n backgroundHover: VariableColorVal\n backgroundPress: VariableColorVal\n backgroundFocus: VariableColorVal\n color: VariableColorVal\n colorHover: VariableColorVal\n colorPress: VariableColorVal\n colorFocus: VariableColorVal\n borderColor: VariableColorVal\n borderColorHover: VariableColorVal\n borderColorPress: VariableColorVal\n borderColorFocus: VariableColorVal\n shadowColor: VariableColorVal\n shadowColorHover: VariableColorVal\n shadowColorPress: VariableColorVal\n shadowColorFocus: VariableColorVal\n}\n\ntype GenericTokens = CreateTokens\ntype GenericThemes = {\n [key: string]:\n | Partial<TamaguiBaseTheme> & {\n [key: string]: VariableVal\n }\n}\n\ntype GenericShorthands = {}\n\n// sm: { minWidth: 100 }\ntype GenericMedia = {\n [key: string]: {\n [key: string]: number | string\n }\n}\n\nexport type GenericFonts = Record<string, GenericFont>\n\ntype GenericAnimations = {\n [key: string]:\n | string\n | {\n [key: string]: any\n }\n}\n\n// this is the \"main\" typed object, which users re-define\n// (internal) keep all types directly on this object and reference them from elsewhere\n//\n// const config = createTamagui(...)\n// type MyConfig = typeof config\n// declare module 'tamagui' {\n// export interface TamaguiCustomConfig extends MyConfig {}\n// }\n// now your whole app/kit should be typed correctly\n//\nexport interface TamaguiCustomConfig {}\n\nexport interface TamaguiConfig\n extends Omit<GenericTamaguiConfig, keyof TamaguiCustomConfig>,\n TamaguiCustomConfig {}\n\nexport type CreateTamaguiConfig<\n A extends GenericTokens,\n B extends GenericThemes,\n C extends GenericShorthands = GenericShorthands,\n D extends GenericMedia = GenericMedia,\n E extends GenericAnimations = GenericAnimations,\n F extends GenericFonts = GenericFonts\n> = {\n fonts: RemoveLanguagePostfixes<F>\n fontLanguages: GetLanguagePostfixes<F> extends never ? string[] : GetLanguagePostfixes<F>[]\n tokens: A\n themes: B\n shorthands: C\n media: D\n animations: AnimationDriver<E>\n}\n\ntype GetLanguagePostfix<Set> = Set extends string\n ? Set extends `${string}_${infer Postfix}`\n ? Postfix\n : never\n : never\n\ntype OmitLanguagePostfix<Set> = Set extends string\n ? Set extends `${infer Prefix}_${string}`\n ? Prefix\n : Set\n : never\n\ntype RemoveLanguagePostfixes<F extends GenericFonts> = {\n [Key in OmitLanguagePostfix<keyof F>]: F[Key]\n}\n\ntype GetLanguagePostfixes<F extends GenericFonts> = GetLanguagePostfix<keyof F>\n\n// test RemoveLanguagePostfixes\n// type x = CreateTamaguiConfig<any, any, any, any, any, {\n// body: any,\n// body_en: any\n// }>['fonts']\n\ntype ConfProps<\n A extends GenericTokens,\n B extends GenericThemes,\n C extends GenericShorthands = GenericShorthands,\n D extends GenericMedia = GenericMedia,\n E extends GenericAnimations = GenericAnimations,\n F extends GenericFonts = GenericFonts\n> = {\n tokens: A\n themes: B\n shorthands?: C\n media?: D\n animations?: AnimationDriver<E>\n fonts: F\n}\n\nexport type InferTamaguiConfig<Conf> = Conf extends ConfProps<\n infer A,\n infer B,\n infer C,\n infer D,\n infer E,\n infer F\n>\n ? TamaguiInternalConfig<A, B, C, D, E, F>\n : unknown\n\n// for use in creation functions so it doesnt get overwrtitten\nexport type GenericTamaguiConfig = CreateTamaguiConfig<\n GenericTokens,\n GenericThemes,\n GenericShorthands,\n GenericMedia,\n GenericAnimations,\n GenericFonts\n>\n\n// since TamaguiConfig will be re-declared, these will all be typed globally\nexport type ThemeObject = TamaguiConfig['themes'][keyof TamaguiConfig['themes']]\nexport type Tokens = TamaguiConfig['tokens']\nexport type Shorthands = TamaguiConfig['shorthands']\nexport type Media = TamaguiConfig['media']\nexport type Themes = TamaguiConfig['themes']\nexport type ThemeName = GetAltThemeNames<keyof Themes>\nexport type ThemeKeys = keyof ThemeObject\nexport type ThemeTokens = `$${ThemeKeys}`\nexport type AnimationKeys = Omit<GetAnimationKeys<TamaguiConfig>, number>\nexport type FontLanguages = ArrayIntersection<TamaguiConfig['fontLanguages']>\n\ntype ArrayIntersection<A extends any[]> = A[keyof A]\n\ntype GetAltThemeNames<S> = (S extends `${string}_${infer Alt}` ? GetAltThemeNames<Alt> : S) | S\n\nexport type SpacerProps = Omit<StackProps, 'flex' | 'direction' | 'size'> & {\n size?: number | SpaceTokens | null\n flex?: boolean | number\n direction?: SpaceDirection\n}\n\nexport type CreateTamaguiProps = {\n shorthands?: GenericTamaguiConfig['shorthands']\n media?: GenericTamaguiConfig['media']\n animations?: AnimationDriver<any>\n fonts: GenericTamaguiConfig['fonts']\n tokens: GenericTamaguiConfig['tokens']\n themes: {\n [key: string]: {\n [key: string]: string | number | Variable\n }\n }\n\n defaultTheme?: string\n disableRootThemeClass?: boolean\n\n defaultProps?: Record<string, any> & {\n Stack?: StackProps\n Text?: TextProps\n Spacer?: SpacerProps\n }\n\n // for the first render, determines which media queries are true\n // useful for SSR\n mediaQueryDefaultActive?: Record<MediaQueryKey, boolean>\n\n // what's between each CSS style rule, set to \"\\n\" to be easier to read\n // defaults: \"\\n\" when NODE_ENV=development, \"\" otherwise\n cssStyleSeparator?: string\n\n // (Advanced)\n // on the web, tamagui treats `dark` and `light` themes as special and\n // generates extra CSS to avoid having to re-render the entire page.\n // this CSS relies on specificity hacks that multiply by your sub-themes.\n // this sets the maxiumum number of nested dark/light themes you can do\n // defaults to 3 for a balance, but can be higher if you nest them deeply.\n maxDarkLightNesting?: number\n\n // adds @media(prefers-color-scheme) media queries for dark/light\n shouldAddPrefersColorThemes?: boolean\n\n // only if you put the theme classname on the html element we have to generate diff\n themeClassNameOnRoot?: boolean\n}\n\n// this is the config generated via createTamagui()\nexport type TamaguiInternalConfig<\n A extends GenericTokens = GenericTokens,\n B extends GenericThemes = GenericThemes,\n C extends GenericShorthands = GenericShorthands,\n D extends GenericMedia = GenericMedia,\n E extends GenericAnimations = GenericAnimations,\n F extends GenericFonts = GenericFonts\n> = Omit<CreateTamaguiProps, keyof GenericTamaguiConfig> &\n CreateTamaguiConfig<A, B, C, D, E, F> & {\n // TODO need to make it this but this breaks types, revisit\n // animations: E //AnimationDriver<E>\n // with $ prefixes for fast lookups (one time cost at startup vs every render)\n tokensParsed: CreateTokens<Variable>\n themeConfig: any\n fontsParsed: GenericFonts\n getCSS: () => string\n parsed: boolean\n inverseShorthands: Record<string, string>\n\n // just passed in from CreateTamaguiProps\n themeClassNameOnRoot?: boolean\n }\n\nexport type GetAnimationKeys<A extends GenericTamaguiConfig> = keyof A['animations']['animations']\n\n// prevents const intersections from being clobbered into string, keeping the consts\nexport type UnionableString = string & {}\nexport type UnionableNumber = number & {}\nexport type PropTypes<A extends TamaguiComponent> = A extends React.FunctionComponent<infer Props>\n ? Props\n : unknown\n\nexport type GenericFont<Key extends number | string = number | string> = {\n size: { [key in Key]: number | Variable }\n lineHeight: Partial<{ [key in Key]: number | Variable }>\n letterSpacing: Partial<{ [key in Key]: number | Variable }>\n weight: Partial<{ [key in Key]: number | string | Variable }>\n family: string | Variable\n style?: Partial<{ [key in Key]: TextStyle['fontStyle'] | Variable }>\n transform?: Partial<{ [key in Key]: TextStyle['textTransform'] | Variable }>\n color?: Partial<{ [key in Key]: string | Variable }>\n}\n\n// media\nexport type MediaQueryObject = { [key: string]: string | number | string }\nexport type MediaQueryKey = keyof Media\nexport type MediaPropKeys = `$${MediaQueryKey}`\nexport type MediaQueryState = { [key in MediaPropKeys]: boolean }\nexport type MediaProps<A> = {\n [key in MediaPropKeys]?: A\n}\nexport type MediaQueries = {\n [key in MediaQueryKey]: MediaQueryObject\n}\nexport type ConfigureMediaQueryOptions = {\n queries?: MediaQueries\n defaultActive?: Record<MediaQueryKey, boolean>\n}\n\nexport type TransformStyleProps = {\n x?: number\n y?: number\n perspective?: number\n scale?: number\n scaleX?: number\n scaleY?: number\n skewX?: string\n skewY?: string\n matrix?: number[]\n rotate?: string\n rotateY?: string\n rotateX?: string\n rotateZ?: string\n}\n\n// createComponent props helpers\n\n// animation=\"bouncy\"\n// animation={['bouncy', { }]}\n// { all: 'name' }\n\n// TODO can override for better types\nexport type AnimationConfigType = any\n\nexport type AnimationProp =\n | AnimationKeys\n | {\n [key: string]:\n | AnimationKeys\n | {\n type: AnimationKeys\n [key: string]: any\n }\n }\n | [\n AnimationKeys,\n {\n [key: string]:\n | AnimationKeys\n | {\n type?: AnimationKeys\n [key: string]: any\n }\n }\n ]\n\ntype GetTokenFontKeysFor<\n A extends\n | 'size'\n | 'weight'\n | 'letterSpacing'\n | 'family'\n | 'lineHeight'\n | 'transform'\n | 'style'\n | 'color'\n> = keyof TamaguiConfig['fonts']['body'][A]\n\ntype GetTokenString<A> = A extends string | number ? `$${A}` : `$${string}`\n\n// base tokens\nexport type SizeTokens = GetTokenString<keyof Tokens['size']> | number\nexport type SpaceTokens = GetTokenString<keyof Tokens['space']> | number | boolean\nexport type ColorTokens =\n | GetTokenString<keyof Tokens['color']>\n | GetTokenString<keyof ThemeObject>\n | CSSColorNames\nexport type ZIndexTokens = GetTokenString<keyof Tokens['zIndex']> | number\nexport type RadiusTokens = GetTokenString<keyof Tokens['radius']> | number\n\n// font tokens\nexport type FontTokens = GetTokenString<keyof TamaguiConfig['fonts']>\nexport type FontSizeTokens = GetTokenString<GetTokenFontKeysFor<'size'>> | number\nexport type FontLineHeightTokens = `$${GetTokenFontKeysFor<'lineHeight'>}` | number\nexport type FontWeightTokens =\n | `$${GetTokenFontKeysFor<'weight'>}`\n | `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`\nexport type FontColorTokens = `$${GetTokenFontKeysFor<'color'>}` | number\nexport type FontLetterSpacingTokens = `$${GetTokenFontKeysFor<'letterSpacing'>}` | number\nexport type FontStyleTokens = `$${GetTokenFontKeysFor<'style'>}` | TextStyle['fontStyle']\nexport type FontTransformTokens =\n | `$${GetTokenFontKeysFor<'transform'>}`\n | TextStyle['textTransform']\n\n//\n// adds theme short values to relevant props\n//\n\nexport type ThemeValueByCategory<K extends string | number | symbol> = K extends 'theme'\n ? ThemeTokens\n : K extends 'size'\n ? SizeTokens\n : K extends 'font'\n ? FontTokens\n : K extends 'fontSize'\n ? FontSizeTokens\n : K extends 'space'\n ? SpaceTokens\n : K extends 'color'\n ? ColorTokens\n : K extends 'zIndex'\n ? ZIndexTokens\n : K extends 'lineHeight'\n ? FontLineHeightTokens\n : K extends 'fontWeight'\n ? FontWeightTokens\n : K extends 'letterSpacing'\n ? FontLetterSpacingTokens\n : {}\n\ntype FontKeys = 'fontFamily'\ntype FontSizeKeys = 'fontSize'\ntype FontWeightKeys = 'fontWeight'\ntype FontLetterSpacingKeys = 'letterSpacing'\ntype LineHeightKeys = 'lineHeight'\ntype ZIndexKeys = 'zIndex'\n\nexport type ThemeValueGet<K extends string | number | symbol> = K extends 'theme'\n ? ThemeTokens\n : K extends SizeKeys\n ? SizeTokens\n : K extends FontKeys\n ? FontTokens\n : K extends FontSizeKeys\n ? FontSizeTokens\n : K extends SpaceKeys\n ? K extends 'shadowOffset'\n ? { width: SpaceTokens; height: SpaceTokens }\n : SpaceTokens\n : K extends ColorKeys\n ? ColorTokens\n : K extends ZIndexKeys\n ? ZIndexTokens\n : K extends LineHeightKeys\n ? FontLineHeightTokens\n : K extends FontWeightKeys\n ? FontWeightTokens\n : K extends FontLetterSpacingKeys\n ? FontLetterSpacingTokens\n : never\n\nexport type ThemeValueFallback = UnionableString | Variable\n\nexport type WithThemeValues<T extends object> = {\n [K in keyof T]: ThemeValueGet<K> extends never\n ? T[K]\n : ThemeValueGet<K> | Exclude<T[K], string> | ThemeValueFallback\n}\n\n// adds shorthand props\nexport type WithShorthands<StyleProps> = {\n [Key in keyof Shorthands]?: Shorthands[Key] extends keyof StyleProps\n ? StyleProps[Shorthands[Key]] | null\n : undefined\n}\n\n// adds pseudo props\nexport type PseudoProps<A> = {\n hoverStyle?: A | null\n pressStyle?: A | null\n focusStyle?: A | null\n exitStyle?: A | null\n enterStyle?: A | null\n}\n\nexport type PseudoPropKeys = keyof PseudoProps<any>\n\nexport type PseudoStyles = {\n hoverStyle?: ViewStyle\n pressStyle?: ViewStyle\n focusStyle?: ViewStyle\n enterStyle?: ViewStyle\n exitStyle?: ViewStyle\n}\n\n//\n// add both theme and shorthands\n//\ntype WithThemeAndShorthands<A extends object> = WithThemeValues<A> &\n WithShorthands<WithThemeValues<A>>\n\n//\n// combines all of theme, shorthands, pseudos...\n//\ntype WithThemeShorthandsAndPseudos<A extends object> =\n | WithThemeAndShorthands<A> & PseudoProps<WithThemeAndShorthands<A>>\n\n//\n// ... media queries and animations\n//\ntype WithThemeShorthandsPseudosMediaAnimation<A extends object> = WithThemeShorthandsAndPseudos<A> &\n MediaProps<WithThemeShorthandsAndPseudos<A>>\n\n//\n// Stack\n//\n\ntype WebOnlyStyleProps = {\n // WEB ONLY\n cursor?: string\n // WEB ONLY\n contain?: 'none' | 'strict' | 'content' | 'size' | 'layout' | 'paint' | string\n // WEB ONLY values: inherit, inline, block, content\n display?: 'inherit' | 'none' | 'inline' | 'block' | 'contents' | 'flex' | 'inline-flex'\n // WEB ONLY pointerEvents can be a style prop\n pointerEvents?: ViewProps['pointerEvents']\n}\n\nexport type StackStylePropsBase = Omit<ViewStyle, 'display' | 'backfaceVisibility' | 'elevation'> &\n TransformStyleProps &\n WebOnlyStyleProps\n\nexport type StackPropsBaseShared = Omit<ViewProps, 'display' | 'children'> &\n RNWViewProps &\n TamaguiComponentPropsBase\n\nexport type StackStyleProps = WithThemeShorthandsPseudosMediaAnimation<StackStylePropsBase>\nexport type StackPropsBase = StackPropsBaseShared & WithThemeAndShorthands<StackStylePropsBase>\nexport type StackProps = StackPropsBaseShared & StackStyleProps\n\nexport type GestureReponderEvent = Exclude<View['props']['onResponderMove'], void> extends (\n event: infer Event\n) => void\n ? Event\n : never\n\n//\n// Text props\n//\n\nexport type TextStylePropsBase = Omit<TextStyle, 'display' | 'backfaceVisibility'> &\n TransformStyleProps &\n WebOnlyStyleProps & {\n ellipse?: boolean\n selectable?: boolean\n textDecorationDistance?: number\n textOverflow?: Properties['textOverflow']\n whiteSpace?: Properties['whiteSpace']\n wordWrap?: Properties['wordWrap']\n }\n\nexport type TextPropsBaseShared = Omit<ReactTextProps, 'children'> &\n RNWTextProps &\n TamaguiComponentPropsBase\nexport type TextPropsBase = TextPropsBaseShared & WithThemeAndShorthands<TextStylePropsBase>\nexport type TextStyleProps = WithThemeShorthandsPseudosMediaAnimation<TextStylePropsBase>\nexport type TextProps = TextPropsBaseShared & TextStyleProps\n\n// could actually infer from parent\nexport type ViewOrTextProps = WithThemeShorthandsPseudosMediaAnimation<\n Omit<TextStylePropsBase, keyof StackStylePropsBase> & StackStylePropsBase\n>\n\n//\n// StaticComponent\n//\n\nexport type TamaguiComponent<\n Props = any,\n Ref = any,\n BaseProps = {},\n VariantProps = {}\n> = ReactComponentWithRef<Props, Ref> & StaticComponentObject\n\ntype StaticComponentObject = {\n staticConfig: StaticConfig\n /*\n * Only needed for more complex components\n * If you create a styled frame component this is a HoC to extract\n * styles from all parents.\n */\n extractable: <X>(a: X, opts?: Partial<StaticConfig>) => X\n}\n\nexport type TamaguiProviderProps = Partial<Omit<ThemeProviderProps, 'children'>> & {\n config: TamaguiInternalConfig\n disableInjectCSS?: boolean\n children?: React.ReactNode\n}\n\nexport type PropMapper = (\n key: string,\n value: any,\n theme: ThemeObject,\n props: Record<string, any>,\n state: Partial<SplitStyleState>,\n languageContext?: FontLanguageProps,\n avoidDefaultProps?: boolean,\n debug?: DebugProp\n) => undefined | [string, any][]\n\nexport type StaticConfigParsed = StaticConfig & {\n parsed: true\n propMapper: PropMapper\n variantsParsed?: {\n [key: string]: {\n [key: string]: any\n }\n }\n}\n\nexport type GenericVariantDefinitions = {\n [key: string]: {\n [key: string]:\n | ((a: any, b: any) => any)\n | {\n [key: string]: any\n }\n }\n}\n\nexport type StaticConfig = {\n Component?: React.FunctionComponent<any> & StaticComponentObject\n\n variants?: GenericVariantDefinitions\n\n /**\n * Used for applying sub theme style\n */\n componentName?: string\n\n /**\n * (compiler) If you need to pass context or something, prevents from ever\n * flattening. The 'jsx' option means it will never flatten. if you\n * pass JSX as a children (if its purely string, it will still flatten).\n */\n neverFlatten?: boolean | 'jsx'\n\n /**\n * Determines ultimate output tag (Text vs View)\n */\n isText?: boolean\n\n /**\n * Attempts to attach focus styles at runtime (useful for native)\n */\n isInput?: boolean\n\n /**\n * React native web images need special handling for className support\n */\n isImage?: boolean\n\n /**\n * Which style keys are allowed to be extracted.\n */\n validStyles?: { [key: string]: boolean }\n\n /**\n * Same as React.defaultProps, be sure to sync\n */\n defaultProps: Record<string, any>\n\n /**\n * (compiler) If these props are encountered, bail on all optimization.\n */\n deoptProps?: Set<string>\n\n /**\n * (compiler) If these props are encountered, leave them un-extracted.\n */\n inlineProps?: Set<string>\n\n /**\n * (compiler) If not flattening, leave this prop as original value.\n * Only applies to style attributes\n */\n inlineWhenUnflattened?: Set<string>\n\n /**\n * (compiler) A bit odd, only for more advanced heirarchies.\n * Indicates that the component will set this prop so the\n * static extraction can ensure it sets them to ={undefined}\n * so they get overriddent. In the future, this can be smarter.\n */\n ensureOverriddenProp?: { [key: string]: boolean }\n\n /**\n * Auto-detected, but can ovverride. Wraps children to space them on top\n */\n isZStack?: boolean\n\n /**\n * Merges into defaultProps later on, used internally yonly\n */\n defaultVariants?: { [key: string]: any }\n\n /**\n * Auto-detect, but can ovverride, passes styles properly to react-native-web\n */\n isReactNativeWeb?: boolean\n\n /**\n * Used internally to keep reference to the original rnw component\n */\n reactNativeWebComponent?: any\n\n /**\n * Memoize the component\n */\n memo?: boolean\n\n /**\n * Auto-detect, but can ovverride, passes styles properly to react-native-web\n */\n isTamagui?: boolean\n\n /**\n * Used internally to handle extractable HoC separate\n */\n isExtractable?: boolean\n\n /**\n * Used insternally to attach default props to names\n */\n parentNames?: string[]\n}\n\n/**\n * --------------------------------------------\n * variants\n * --------------------------------------------\n */\n\nexport type StylableComponent =\n | TamaguiComponent\n | React.Component\n | React.ForwardRefExoticComponent<any>\n | ReactComponentWithRef<any, any>\n | (new (props: any) => any)\n | typeof View\n | typeof Text\n | typeof TextInput\n | typeof Image\n\nexport type GetStyledVariants<A extends TamaguiComponent> = A extends TamaguiComponent<\n any,\n any,\n any,\n infer Variants\n>\n ? Variants\n : never\n\nexport type GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n any,\n any,\n infer BaseProps\n>\n ? BaseProps\n : never\n\nexport type GetProps<A extends StylableComponent> = A extends TamaguiComponent<infer Props>\n ? Props\n : A extends React.Component<infer Props>\n ? GetGenericComponentTamaguiProps<Props>\n : A extends new (props: infer Props) => any\n ? GetGenericComponentTamaguiProps<Props>\n : {}\n\ntype GetGenericComponentTamaguiProps<P> = P &\n Omit<'textAlign' extends keyof P ? TextProps : StackProps, keyof P>\n\nexport type SpreadKeys =\n | '...fontSize'\n | '...fontStyle'\n | '...fontTransform'\n | '...lineHeight'\n | '...letterSpacing'\n | '...size'\n | '...space'\n | '...color'\n | '...zIndex'\n | '...theme'\n | '...radius'\n\nexport type VariantDefinitions<\n Parent extends StylableComponent = TamaguiComponent,\n MyProps extends Object = GetProps<Parent>,\n Val = any\n> = VariantDefinitionFromProps<MyProps, Val>\n\nexport type VariantDefinitionFromProps<MyProps, Val> = MyProps extends Object\n ? {\n [propName: string]:\n | VariantSpreadFunction<MyProps, Val>\n | ({\n [Key in SpreadKeys]?: Key extends '...fontSize'\n ? FontSizeVariantSpreadFunction<MyProps>\n : Key extends '...size'\n ? SizeVariantSpreadFunction<MyProps>\n : Key extends '...space'\n ? SpaceVariantSpreadFunction<MyProps>\n : Key extends '...color'\n ? ColorVariantSpreadFunction<MyProps>\n : Key extends '...lineHeight'\n ? FontLineHeightVariantSpreadFunction<MyProps>\n : Key extends '...fontTransform'\n ? FontTransformVariantSpreadFunction<MyProps>\n : Key extends '...fontStyle'\n ? FontStyleVariantSpreadFunction<MyProps>\n : Key extends '...letterSpacing'\n ? FontLetterSpacingVariantSpreadFunction<MyProps>\n : Key extends '...zIndex'\n ? ZIndexVariantSpreadFunction<MyProps>\n : Key extends '...radius'\n ? RadiusVariantSpreadFunction<MyProps>\n : Key extends '...theme'\n ? ThemeVariantSpreadFunction<MyProps>\n : never\n } & {\n [Key in string | number | 'true' | 'false']?:\n | MyProps\n | VariantSpreadFunction<MyProps, Val>\n } & {\n [Key in VariantTypeKeys]?: Key extends ':number'\n ? VariantSpreadFunction<MyProps, number>\n : Key extends ':boolean'\n ? VariantSpreadFunction<MyProps, boolean>\n : Key extends ':string'\n ? VariantSpreadFunction<MyProps, string>\n : never\n })\n }\n : never\n\nexport type GenericStackVariants = VariantDefinitionFromProps<StackProps, any>\nexport type GenericTextVariants = VariantDefinitionFromProps<StackProps, any>\n\nexport type GetVariantProps<Variants> = {\n [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>\n ? Val\n : GetVariantValues<keyof Variants[Key]>\n}\n\nexport type VariantSpreadExtras<Props> = {\n fonts: TamaguiConfig['fonts']\n tokens: TamaguiConfig['tokens']\n theme: Themes extends { [key: string]: infer B } ? B : unknown\n props: Props\n}\n\ntype PropLike = { [key: string]: any }\n\nexport type VariantSpreadFunction<Props extends PropLike, Val = any> = (\n val: Val,\n config: VariantSpreadExtras<Props>\n) =>\n | {\n [Key in keyof Props]: Props[Key] | Variable\n }\n | null\n | undefined\n\nexport type VariantTypeKeys = ':string' | ':boolean' | ':number'\n\nexport type GetVariantValues<Key> = Key extends `...${infer VariantSpread}`\n ? ThemeValueByCategory<VariantSpread>\n : Key extends 'true' | 'false'\n ? boolean\n : Key extends ':string'\n ? string\n : Key extends ':boolean'\n ? boolean\n : Key extends ':number'\n ? number\n : Key\n\nexport type FontSizeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n A,\n FontSizeTokens\n>\nexport type SizeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, SizeTokens>\nexport type SpaceVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, SpaceTokens>\nexport type ColorVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, ColorTokens>\nexport type FontLineHeightVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n A,\n FontLineHeightTokens\n>\nexport type FontLetterSpacingVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n A,\n FontLetterSpacingTokens\n>\nexport type FontStyleVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n A,\n FontStyleTokens\n>\nexport type FontTransformVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n A,\n FontTransformTokens\n>\nexport type ZIndexVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, ZIndexTokens>\nexport type RadiusVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, RadiusTokens>\nexport type ThemeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, ThemeTokens>\n\n/**\n * --------------------------------------------\n * end variants\n * --------------------------------------------\n */\n\ntype SizeKeys =\n | 'width'\n | 'height'\n | 'minWidth'\n | 'minHeight'\n | 'maxWidth'\n | 'maxHeight'\n | 'shadowRadius'\n\ntype ColorKeys =\n | 'color'\n | 'backgroundColor'\n | 'borderColor'\n | 'borderBottomColor'\n | 'borderTopColor'\n | 'borderLeftColor'\n | 'borderRightColor'\n | 'shadowColor'\n | 'textShadowColor'\n\ntype SpaceKeys =\n | 'space'\n | 'padding'\n | 'paddingHorizontal'\n | 'paddingVertical'\n | 'paddingLeft'\n | 'paddingTop'\n | 'paddingBottom'\n | 'paddingLeft'\n | 'paddingRight'\n | 'paddingEnd'\n | 'paddingStart'\n | 'margin'\n | 'marginHorizontal'\n | 'marginVertical'\n | 'marginLeft'\n | 'marginTop'\n | 'marginBottom'\n | 'marginLeft'\n | 'marginRight'\n | 'marginEnd'\n | 'marginStart'\n | 'x'\n | 'y'\n | 'scale'\n | 'scaleX'\n | 'scaleY'\n | 'borderTopEndRadius'\n | 'borderTopLeftRadius'\n | 'borderTopRightRadius'\n | 'borderTopStartRadius'\n | 'borderBottomEndRadius'\n | 'borderBottomLeftRadius'\n | 'borderBottomRightRadius'\n | 'borderBottomStartRadius'\n | 'borderBottomWidth'\n | 'borderLeftWidth'\n | 'borderRadius'\n | 'borderRightWidth'\n | 'borderTopEndRadius'\n | 'borderTopLeftRadius'\n | 'borderTopRightRadius'\n | 'borderEndWidth'\n | 'borderStartWidth'\n | 'borderTopStartRadius'\n | 'borderTopWidth'\n | 'borderWidth'\n | 'left'\n | 'top'\n | 'right'\n | 'bottom'\n | 'shadowOffset'\n\ntype CSSColorNames =\n | 'aliceblue'\n | 'antiquewhite'\n | 'aqua'\n | 'aquamarine'\n | 'azure'\n | 'beige'\n | 'bisque'\n | 'black'\n | 'blanchedalmond'\n | 'blue'\n | 'blueviolet'\n | 'brown'\n | 'burlywood'\n | 'cadetblue'\n | 'chartreuse'\n | 'chocolate'\n | 'coral'\n | 'cornflowerblue'\n | 'cornsilk'\n | 'crimson'\n | 'cyan'\n | 'darkblue'\n | 'darkcyan'\n | 'darkgoldenrod'\n | 'darkgray'\n | 'darkgreen'\n | 'darkkhaki'\n | 'darkmagenta'\n | 'darkolivegreen'\n | 'darkorange'\n | 'darkorchid'\n | 'darkred'\n | 'darksalmon'\n | 'darkseagreen'\n | 'darkslateblue'\n | 'darkslategray'\n | 'darkturquoise'\n | 'darkviolet'\n | 'deeppink'\n | 'deepskyblue'\n | 'dimgray'\n | 'dodgerblue'\n | 'firebrick'\n | 'floralwhite'\n | 'forestgreen'\n | 'fuchsia'\n | 'gainsboro'\n | 'ghostwhite'\n | 'gold'\n | 'goldenrod'\n | 'gray'\n | 'green'\n | 'greenyellow'\n | 'honeydew'\n | 'hotpink'\n | 'indianred '\n | 'indigo '\n | 'ivory'\n | 'khaki'\n | 'lavender'\n | 'lavenderblush'\n | 'lawngreen'\n | 'lemonchiffon'\n | 'lightblue'\n | 'lightcoral'\n | 'lightcyan'\n | 'lightgoldenrodyellow'\n | 'lightgrey'\n | 'lightgreen'\n | 'lightpink'\n | 'lightsalmon'\n | 'lightseagreen'\n | 'lightskyblue'\n | 'lightslategray'\n | 'lightsteelblue'\n | 'lightyellow'\n | 'lime'\n | 'limegreen'\n | 'linen'\n | 'magenta'\n | 'maroon'\n | 'mediumaquamarine'\n | 'mediumblue'\n | 'mediumorchid'\n | 'mediumpurple'\n | 'mediumseagreen'\n | 'mediumslateblue'\n | 'mediumspringgreen'\n | 'mediumturquoise'\n | 'mediumvioletred'\n | 'midnightblue'\n | 'mintcream'\n | 'mistyrose'\n | 'moccasin'\n | 'navajowhite'\n | 'navy'\n | 'oldlace'\n | 'olive'\n | 'olivedrab'\n | 'orange'\n | 'orangered'\n | 'orchid'\n | 'palegoldenrod'\n | 'palegreen'\n | 'paleturquoise'\n | 'palevioletred'\n | 'papayawhip'\n | 'peachpuff'\n | 'peru'\n | 'pink'\n | 'plum'\n | 'powderblue'\n | 'purple'\n | 'red'\n | 'rosybrown'\n | 'royalblue'\n | 'saddlebrown'\n | 'salmon'\n | 'sandybrown'\n | 'seagreen'\n | 'seashell'\n | 'sienna'\n | 'silver'\n | 'skyblue'\n | 'slateblue'\n | 'slategray'\n | 'snow'\n | 'springgreen'\n | 'steelblue'\n | 'tan'\n | 'teal'\n | 'thistle'\n | 'tomato'\n | 'turquoise'\n | 'violet'\n | 'wheat'\n | 'white'\n | 'whitesmoke'\n | 'yellow'\n | 'yellowgreen'\n\nexport type TamaguiComponentState = {\n hover: boolean\n press: boolean\n pressIn: boolean\n focus: boolean\n mounted: boolean\n animation?: null | {\n style?: any\n avoidClasses?: boolean\n }\n}\n\nexport type SplitStyleState = TamaguiComponentState & {\n noClassNames?: boolean\n dynamicStylesInline?: boolean\n resolveVariablesAs?: ResolveVariableTypes\n fallbackProps?: Record<string, any>\n keepVariantsAsProps?: boolean\n hasTextAncestor?: boolean\n}\n\n// Animations:\n\ntype AnimationConfig = {\n [key: string]: any\n}\n\n// includes a very limited adapter between various impls for number => style\n// this is useful only in limited scenarios like `Sheet`, but necessary in those cases\n\nexport type AnimatedNumberStrategy =\n // only values shared between reanimated/react-native for now\n | {\n type: 'spring'\n stiffness?: number\n damping?: number\n mass?: number\n overshootClamping?: boolean\n restSpeedThreshold?: number\n restDisplacementThreshold?: number\n }\n | { type: 'timing'; duration: number }\n | { type: 'direct' }\n\nexport type UniversalAnimatedNumber<A> = {\n getInstance(): A\n getValue(): number\n setValue(next: number, config?: AnimatedNumberStrategy): void\n stop(): void\n}\n\nexport type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {\n avoidClasses?: boolean\n useAnimations: UseAnimationHook\n useAnimatedNumber: (initial: number) => UniversalAnimatedNumber<any>\n useAnimatedNumberStyle: <V extends UniversalAnimatedNumber<any>>(\n val: V,\n getStyle: (current: any) => any\n ) => void\n useAnimatedNumberReaction: (\n val: UniversalAnimatedNumber<any>,\n onValue: (current: number) => void\n ) => void\n animations: A\n View?: any\n Text?: any\n}\n\nexport type UseAnimationProps = TamaguiComponentPropsBase & Record<string, any>\n\nexport type UseAnimationHelpers = {\n staticConfig: StaticConfigParsed\n getStyle: (props?: {\n isEntering?: boolean\n isExiting?: boolean\n exitVariant?: string | null\n enterVariant?: string | null\n }) => ViewStyle\n state: SplitStyleState\n pseudos: PseudoProps<ViewStyle>\n // style: ViewStyle | null | undefined\n // isMounted: boolean\n // exitStyle?: ViewStyle | null\n onDidAnimate?: any\n delay?: number\n // mergedStyles(props?: { isExiting?: boolean }): ViewStyle\n}\n\nexport type UseAnimationHook = (\n props: UseAnimationProps,\n helpers: UseAnimationHelpers\n) => {\n style?: StackStylePropsBase | StackStylePropsBase[]\n}\n"],
|
|
4
|
+
"sourcesContent": ["// TODO split this into own package @tamagui/types to share with animations packages\n\nimport { Properties } from 'csstype'\nimport React, { RefObject } from 'react'\nimport {\n GestureResponderEvent,\n Image,\n PressableProps,\n TextProps as ReactTextProps,\n Text,\n TextInput,\n TextStyle,\n View,\n ViewProps,\n ViewStyle,\n} from 'react-native'\n\nimport { Variable } from './createVariable'\nimport { ResolveVariableTypes } from './helpers/createPropMapper'\nimport { RNWTextProps, RNWViewProps } from './types-rnw'\nimport { FontLanguageProps } from './views/FontLanguage.types'\nimport { ThemeProviderProps } from './views/ThemeProvider'\n\nexport type SpaceDirection = 'vertical' | 'horizontal' | 'both'\n\nexport type TamaguiElement = HTMLElement | View\n\nexport type DebugProp = boolean | 'break' | 'verbose'\n\n//\n// base props that are accepted by createComponent (additional to react-native-web)\n//\nexport type TamaguiComponentPropsBase = {\n hitSlop?: PressableProps['hitSlop']\n asChild?: boolean\n space?: SpaceTokens | null\n spaceDirection?: SpaceDirection\n separator?: React.ReactNode\n dangerouslySetInnerHTML?: { __html: string }\n animation?: AnimationProp\n animateOnly?: string[]\n children?: any | any[]\n debug?: DebugProp\n disabled?: boolean\n className?: string\n themeShallow?: boolean\n id?: string\n tag?: string\n theme?: ThemeName | null\n componentName?: string\n forceStyle?: 'hover' | 'press' | 'focus'\n onHoverIn?: (e: MouseEvent) => any\n onHoverOut?: (e: MouseEvent) => any\n onPress?: (e: GestureResponderEvent) => any\n onPressIn?: (e: GestureResponderEvent) => any\n onPressOut?: (e: GestureResponderEvent) => any\n // WEB ONLY\n onMouseEnter?: (e: MouseEvent) => any\n onMouseLeave?: (e: MouseEvent) => any\n onMouseDown?: (e: MouseEvent) => any\n // WEB STYLES\n userSelect?: Properties['userSelect']\n cursor?: Properties['cursor']\n}\n\nexport type ReactComponentWithRef<Props, Ref> = React.ForwardRefExoticComponent<\n Props & React.RefAttributes<Ref>\n>\n\nexport type ConfigListener = (conf: TamaguiInternalConfig) => void\n\n// to prevent things from going circular, hoisting some types in this file\n// to generally order them as building up towards TamaguiConfig\n\nexport type VariableVal = number | string | Variable\nexport type VariableColorVal = string | Variable\n\ntype GenericKey = string | number | symbol\n\nexport interface CreateTokens<Val extends VariableVal = VariableVal> {\n color: { [key: GenericKey]: Val }\n space: { [key: GenericKey]: Val }\n size: { [key: GenericKey]: Val }\n radius: { [key: GenericKey]: Val }\n zIndex: { [key: GenericKey]: Val }\n}\n\nexport type TamaguiBaseTheme = {\n // defined for our tamagui kit , we could do this inside `tamagui`\n // but maybe helpful to have some sort of universally shared things +\n // + enforce if they want their own, redefine in their design sys\n background: VariableColorVal\n backgroundHover: VariableColorVal\n backgroundPress: VariableColorVal\n backgroundFocus: VariableColorVal\n color: VariableColorVal\n colorHover: VariableColorVal\n colorPress: VariableColorVal\n colorFocus: VariableColorVal\n borderColor: VariableColorVal\n borderColorHover: VariableColorVal\n borderColorPress: VariableColorVal\n borderColorFocus: VariableColorVal\n shadowColor: VariableColorVal\n shadowColorHover: VariableColorVal\n shadowColorPress: VariableColorVal\n shadowColorFocus: VariableColorVal\n}\n\ntype GenericTokens = CreateTokens\ntype GenericThemes = {\n [key: string]:\n | Partial<TamaguiBaseTheme> & {\n [key: string]: VariableVal\n }\n}\n\ntype GenericShorthands = {}\n\n// sm: { minWidth: 100 }\ntype GenericMedia = {\n [key: string]: {\n [key: string]: number | string\n }\n}\n\nexport type GenericFonts = Record<string, GenericFont>\n\ntype GenericAnimations = {\n [key: string]:\n | string\n | {\n [key: string]: any\n }\n}\n\n// this is the \"main\" typed object, which users re-define\n// (internal) keep all types directly on this object and reference them from elsewhere\n//\n// const config = createTamagui(...)\n// type MyConfig = typeof config\n// declare module 'tamagui' {\n// export interface TamaguiCustomConfig extends MyConfig {}\n// }\n// now your whole app/kit should be typed correctly\n//\nexport interface TamaguiCustomConfig {}\n\nexport interface TamaguiConfig\n extends Omit<GenericTamaguiConfig, keyof TamaguiCustomConfig>,\n TamaguiCustomConfig {}\n\nexport type CreateTamaguiConfig<\n A extends GenericTokens,\n B extends GenericThemes,\n C extends GenericShorthands = GenericShorthands,\n D extends GenericMedia = GenericMedia,\n E extends GenericAnimations = GenericAnimations,\n F extends GenericFonts = GenericFonts\n> = {\n fonts: RemoveLanguagePostfixes<F>\n fontLanguages: GetLanguagePostfixes<F> extends never ? string[] : GetLanguagePostfixes<F>[]\n tokens: A\n themes: B\n shorthands: C\n media: D\n animations: AnimationDriver<E>\n}\n\ntype GetLanguagePostfix<Set> = Set extends string\n ? Set extends `${string}_${infer Postfix}`\n ? Postfix\n : never\n : never\n\ntype OmitLanguagePostfix<Set> = Set extends string\n ? Set extends `${infer Prefix}_${string}`\n ? Prefix\n : Set\n : never\n\ntype RemoveLanguagePostfixes<F extends GenericFonts> = {\n [Key in OmitLanguagePostfix<keyof F>]: F[Key]\n}\n\ntype GetLanguagePostfixes<F extends GenericFonts> = GetLanguagePostfix<keyof F>\n\n// test RemoveLanguagePostfixes\n// type x = CreateTamaguiConfig<any, any, any, any, any, {\n// body: any,\n// body_en: any\n// }>['fonts']\n\ntype ConfProps<\n A extends GenericTokens,\n B extends GenericThemes,\n C extends GenericShorthands = GenericShorthands,\n D extends GenericMedia = GenericMedia,\n E extends GenericAnimations = GenericAnimations,\n F extends GenericFonts = GenericFonts\n> = {\n tokens: A\n themes: B\n shorthands?: C\n media?: D\n animations?: AnimationDriver<E>\n fonts: F\n}\n\nexport type InferTamaguiConfig<Conf> = Conf extends ConfProps<\n infer A,\n infer B,\n infer C,\n infer D,\n infer E,\n infer F\n>\n ? TamaguiInternalConfig<A, B, C, D, E, F>\n : unknown\n\n// for use in creation functions so it doesnt get overwrtitten\nexport type GenericTamaguiConfig = CreateTamaguiConfig<\n GenericTokens,\n GenericThemes,\n GenericShorthands,\n GenericMedia,\n GenericAnimations,\n GenericFonts\n>\n\n// since TamaguiConfig will be re-declared, these will all be typed globally\nexport type ThemeObject = TamaguiConfig['themes'][keyof TamaguiConfig['themes']]\nexport type Tokens = TamaguiConfig['tokens']\nexport type Shorthands = TamaguiConfig['shorthands']\nexport type Media = TamaguiConfig['media']\nexport type Themes = TamaguiConfig['themes']\nexport type ThemeName = GetAltThemeNames<keyof Themes>\nexport type ThemeKeys = keyof ThemeObject\nexport type ThemeTokens = `$${ThemeKeys}`\nexport type AnimationKeys = Omit<GetAnimationKeys<TamaguiConfig>, number>\nexport type FontLanguages = ArrayIntersection<TamaguiConfig['fontLanguages']>\n\ntype ArrayIntersection<A extends any[]> = A[keyof A]\n\ntype GetAltThemeNames<S> = (S extends `${string}_${infer Alt}` ? GetAltThemeNames<Alt> : S) | S\n\nexport type SpacerProps = Omit<StackProps, 'flex' | 'direction' | 'size'> & {\n size?: number | SpaceTokens | null\n flex?: boolean | number\n direction?: SpaceDirection\n}\n\nexport type CreateTamaguiProps = {\n shorthands?: GenericTamaguiConfig['shorthands']\n media?: GenericTamaguiConfig['media']\n animations?: AnimationDriver<any>\n fonts: GenericTamaguiConfig['fonts']\n tokens: GenericTamaguiConfig['tokens']\n themes: {\n [key: string]: {\n [key: string]: string | number | Variable\n }\n }\n\n defaultTheme?: string\n disableRootThemeClass?: boolean\n\n defaultProps?: Record<string, any> & {\n Stack?: StackProps\n Text?: TextProps\n Spacer?: SpacerProps\n }\n\n // for the first render, determines which media queries are true\n // useful for SSR\n mediaQueryDefaultActive?: Record<MediaQueryKey, boolean>\n\n // what's between each CSS style rule, set to \"\\n\" to be easier to read\n // defaults: \"\\n\" when NODE_ENV=development, \"\" otherwise\n cssStyleSeparator?: string\n\n // (Advanced)\n // on the web, tamagui treats `dark` and `light` themes as special and\n // generates extra CSS to avoid having to re-render the entire page.\n // this CSS relies on specificity hacks that multiply by your sub-themes.\n // this sets the maxiumum number of nested dark/light themes you can do\n // defaults to 3 for a balance, but can be higher if you nest them deeply.\n maxDarkLightNesting?: number\n\n // adds @media(prefers-color-scheme) media queries for dark/light\n shouldAddPrefersColorThemes?: boolean\n\n // only if you put the theme classname on the html element we have to generate diff\n themeClassNameOnRoot?: boolean\n}\n\n// this is the config generated via createTamagui()\nexport type TamaguiInternalConfig<\n A extends GenericTokens = GenericTokens,\n B extends GenericThemes = GenericThemes,\n C extends GenericShorthands = GenericShorthands,\n D extends GenericMedia = GenericMedia,\n E extends GenericAnimations = GenericAnimations,\n F extends GenericFonts = GenericFonts\n> = Omit<CreateTamaguiProps, keyof GenericTamaguiConfig> &\n CreateTamaguiConfig<A, B, C, D, E, F> & {\n // TODO need to make it this but this breaks types, revisit\n // animations: E //AnimationDriver<E>\n // with $ prefixes for fast lookups (one time cost at startup vs every render)\n tokensParsed: CreateTokens<Variable>\n themeConfig: any\n fontsParsed: GenericFonts\n getCSS: () => string\n parsed: boolean\n inverseShorthands: Record<string, string>\n\n // just passed in from CreateTamaguiProps\n themeClassNameOnRoot?: boolean\n }\n\nexport type GetAnimationKeys<A extends GenericTamaguiConfig> = keyof A['animations']['animations']\n\n// prevents const intersections from being clobbered into string, keeping the consts\nexport type UnionableString = string & {}\nexport type UnionableNumber = number & {}\nexport type PropTypes<A extends TamaguiComponent> = A extends React.FunctionComponent<infer Props>\n ? Props\n : unknown\n\nexport type GenericFont<Key extends number | string = number | string> = {\n size: { [key in Key]: number | Variable }\n lineHeight: Partial<{ [key in Key]: number | Variable }>\n letterSpacing: Partial<{ [key in Key]: number | Variable }>\n weight: Partial<{ [key in Key]: number | string | Variable }>\n family: string | Variable\n style?: Partial<{ [key in Key]: TextStyle['fontStyle'] | Variable }>\n transform?: Partial<{ [key in Key]: TextStyle['textTransform'] | Variable }>\n color?: Partial<{ [key in Key]: string | Variable }>\n // for native use only, lets you map to alternative fonts\n face?: { [key in FontWeightSteps]: { normal?: string; italic?: string } }\n}\n\n// media\nexport type MediaQueryObject = { [key: string]: string | number | string }\nexport type MediaQueryKey = keyof Media\nexport type MediaPropKeys = `$${MediaQueryKey}`\nexport type MediaQueryState = { [key in MediaPropKeys]: boolean }\nexport type MediaProps<A> = {\n [key in MediaPropKeys]?: A\n}\nexport type MediaQueries = {\n [key in MediaQueryKey]: MediaQueryObject\n}\nexport type ConfigureMediaQueryOptions = {\n queries?: MediaQueries\n defaultActive?: Record<MediaQueryKey, boolean>\n}\n\nexport type TransformStyleProps = {\n x?: number\n y?: number\n perspective?: number\n scale?: number\n scaleX?: number\n scaleY?: number\n skewX?: string\n skewY?: string\n matrix?: number[]\n rotate?: string\n rotateY?: string\n rotateX?: string\n rotateZ?: string\n}\n\n// createComponent props helpers\n\n// animation=\"bouncy\"\n// animation={['bouncy', { }]}\n// { all: 'name' }\n\n// TODO can override for better types\nexport type AnimationConfigType = any\n\nexport type AnimationProp =\n | AnimationKeys\n | {\n [key: string]:\n | AnimationKeys\n | {\n type: AnimationKeys\n [key: string]: any\n }\n }\n | [\n AnimationKeys,\n {\n [key: string]:\n | AnimationKeys\n | {\n type?: AnimationKeys\n [key: string]: any\n }\n }\n ]\n\ntype GetTokenFontKeysFor<\n A extends\n | 'size'\n | 'weight'\n | 'letterSpacing'\n | 'family'\n | 'lineHeight'\n | 'transform'\n | 'style'\n | 'color'\n> = keyof TamaguiConfig['fonts']['body'][A]\n\ntype GetTokenString<A> = A extends string | number ? `$${A}` : `$${string}`\n\n// base tokens\nexport type SizeTokens = GetTokenString<keyof Tokens['size']> | number\nexport type SpaceTokens = GetTokenString<keyof Tokens['space']> | number | boolean\nexport type ColorTokens =\n | GetTokenString<keyof Tokens['color']>\n | GetTokenString<keyof ThemeObject>\n | CSSColorNames\nexport type ZIndexTokens = GetTokenString<keyof Tokens['zIndex']> | number\nexport type RadiusTokens = GetTokenString<keyof Tokens['radius']> | number\n\n// font tokens\nexport type FontTokens = GetTokenString<keyof TamaguiConfig['fonts']>\nexport type FontSizeTokens = GetTokenString<GetTokenFontKeysFor<'size'>> | number\nexport type FontLineHeightTokens = `$${GetTokenFontKeysFor<'lineHeight'>}` | number\nexport type FontWeightSteps = `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`\nexport type FontWeightTokens = `$${GetTokenFontKeysFor<'weight'>}` | FontWeightSteps\nexport type FontColorTokens = `$${GetTokenFontKeysFor<'color'>}` | number\nexport type FontLetterSpacingTokens = `$${GetTokenFontKeysFor<'letterSpacing'>}` | number\nexport type FontStyleTokens = `$${GetTokenFontKeysFor<'style'>}` | TextStyle['fontStyle']\nexport type FontTransformTokens =\n | `$${GetTokenFontKeysFor<'transform'>}`\n | TextStyle['textTransform']\n\n//\n// adds theme short values to relevant props\n//\n\nexport type ThemeValueByCategory<K extends string | number | symbol> = K extends 'theme'\n ? ThemeTokens\n : K extends 'size'\n ? SizeTokens\n : K extends 'font'\n ? FontTokens\n : K extends 'fontSize'\n ? FontSizeTokens\n : K extends 'space'\n ? SpaceTokens\n : K extends 'color'\n ? ColorTokens\n : K extends 'zIndex'\n ? ZIndexTokens\n : K extends 'lineHeight'\n ? FontLineHeightTokens\n : K extends 'fontWeight'\n ? FontWeightTokens\n : K extends 'letterSpacing'\n ? FontLetterSpacingTokens\n : {}\n\ntype FontKeys = 'fontFamily'\ntype FontSizeKeys = 'fontSize'\ntype FontWeightKeys = 'fontWeight'\ntype FontLetterSpacingKeys = 'letterSpacing'\ntype LineHeightKeys = 'lineHeight'\ntype ZIndexKeys = 'zIndex'\n\nexport type ThemeValueGet<K extends string | number | symbol> = K extends 'theme'\n ? ThemeTokens\n : K extends SizeKeys\n ? SizeTokens\n : K extends FontKeys\n ? FontTokens\n : K extends FontSizeKeys\n ? FontSizeTokens\n : K extends SpaceKeys\n ? K extends 'shadowOffset'\n ? { width: SpaceTokens; height: SpaceTokens }\n : SpaceTokens\n : K extends ColorKeys\n ? ColorTokens\n : K extends ZIndexKeys\n ? ZIndexTokens\n : K extends LineHeightKeys\n ? FontLineHeightTokens\n : K extends FontWeightKeys\n ? FontWeightTokens\n : K extends FontLetterSpacingKeys\n ? FontLetterSpacingTokens\n : never\n\nexport type ThemeValueFallback = UnionableString | Variable\n\nexport type WithThemeValues<T extends object> = {\n [K in keyof T]: ThemeValueGet<K> extends never\n ? T[K]\n : ThemeValueGet<K> | Exclude<T[K], string> | ThemeValueFallback\n}\n\n// adds shorthand props\nexport type WithShorthands<StyleProps> = {\n [Key in keyof Shorthands]?: Shorthands[Key] extends keyof StyleProps\n ? StyleProps[Shorthands[Key]] | null\n : undefined\n}\n\n// adds pseudo props\nexport type PseudoProps<A> = {\n hoverStyle?: A | null\n pressStyle?: A | null\n focusStyle?: A | null\n exitStyle?: A | null\n enterStyle?: A | null\n}\n\nexport type PseudoPropKeys = keyof PseudoProps<any>\n\nexport type PseudoStyles = {\n hoverStyle?: ViewStyle\n pressStyle?: ViewStyle\n focusStyle?: ViewStyle\n enterStyle?: ViewStyle\n exitStyle?: ViewStyle\n}\n\n//\n// add both theme and shorthands\n//\ntype WithThemeAndShorthands<A extends object> = WithThemeValues<A> &\n WithShorthands<WithThemeValues<A>>\n\n//\n// combines all of theme, shorthands, pseudos...\n//\ntype WithThemeShorthandsAndPseudos<A extends object> =\n | WithThemeAndShorthands<A> & PseudoProps<WithThemeAndShorthands<A>>\n\n//\n// ... media queries and animations\n//\ntype WithThemeShorthandsPseudosMediaAnimation<A extends object> = WithThemeShorthandsAndPseudos<A> &\n MediaProps<WithThemeShorthandsAndPseudos<A>>\n\n//\n// Stack\n//\n\ntype WebOnlyStyleProps = {\n // WEB ONLY\n cursor?: string\n // WEB ONLY\n contain?: 'none' | 'strict' | 'content' | 'size' | 'layout' | 'paint' | string\n // WEB ONLY values: inherit, inline, block, content\n display?: 'inherit' | 'none' | 'inline' | 'block' | 'contents' | 'flex' | 'inline-flex'\n // WEB ONLY pointerEvents can be a style prop\n pointerEvents?: ViewProps['pointerEvents']\n}\n\nexport type StackStylePropsBase = Omit<ViewStyle, 'display' | 'backfaceVisibility' | 'elevation'> &\n TransformStyleProps &\n WebOnlyStyleProps\n\nexport type StackPropsBaseShared = Omit<ViewProps, 'display' | 'children'> &\n RNWViewProps &\n TamaguiComponentPropsBase\n\nexport type StackStyleProps = WithThemeShorthandsPseudosMediaAnimation<StackStylePropsBase>\nexport type StackPropsBase = StackPropsBaseShared & WithThemeAndShorthands<StackStylePropsBase>\nexport type StackProps = StackPropsBaseShared & StackStyleProps\n\nexport type GestureReponderEvent = Exclude<View['props']['onResponderMove'], void> extends (\n event: infer Event\n) => void\n ? Event\n : never\n\n//\n// Text props\n//\n\nexport type TextStylePropsBase = Omit<TextStyle, 'display' | 'backfaceVisibility'> &\n TransformStyleProps &\n WebOnlyStyleProps & {\n ellipse?: boolean\n selectable?: boolean\n textDecorationDistance?: number\n textOverflow?: Properties['textOverflow']\n whiteSpace?: Properties['whiteSpace']\n wordWrap?: Properties['wordWrap']\n }\n\nexport type TextPropsBaseShared = Omit<ReactTextProps, 'children'> &\n RNWTextProps &\n TamaguiComponentPropsBase\nexport type TextPropsBase = TextPropsBaseShared & WithThemeAndShorthands<TextStylePropsBase>\nexport type TextStyleProps = WithThemeShorthandsPseudosMediaAnimation<TextStylePropsBase>\nexport type TextProps = TextPropsBaseShared & TextStyleProps\n\n// could actually infer from parent\nexport type ViewOrTextProps = WithThemeShorthandsPseudosMediaAnimation<\n Omit<TextStylePropsBase, keyof StackStylePropsBase> & StackStylePropsBase\n>\n\n//\n// StaticComponent\n//\n\nexport type TamaguiComponent<\n Props = any,\n Ref = any,\n BaseProps = {},\n VariantProps = {}\n> = ReactComponentWithRef<Props, Ref> & StaticComponentObject\n\ntype StaticComponentObject = {\n staticConfig: StaticConfig\n /*\n * Only needed for more complex components\n * If you create a styled frame component this is a HoC to extract\n * styles from all parents.\n */\n extractable: <X>(a: X, opts?: Partial<StaticConfig>) => X\n}\n\nexport type TamaguiProviderProps = Partial<Omit<ThemeProviderProps, 'children'>> & {\n config: TamaguiInternalConfig\n disableInjectCSS?: boolean\n children?: React.ReactNode\n}\n\nexport type PropMapper = (\n key: string,\n value: any,\n theme: ThemeObject,\n props: Record<string, any>,\n state: Partial<SplitStyleState>,\n languageContext?: FontLanguageProps,\n avoidDefaultProps?: boolean,\n debug?: DebugProp\n) => undefined | [string, any][]\n\nexport type StaticConfigParsed = StaticConfig & {\n parsed: true\n propMapper: PropMapper\n variantsParsed?: {\n [key: string]: {\n [key: string]: any\n }\n }\n}\n\nexport type GenericVariantDefinitions = {\n [key: string]: {\n [key: string]:\n | ((a: any, b: any) => any)\n | {\n [key: string]: any\n }\n }\n}\n\nexport type StaticConfig = {\n Component?: React.FunctionComponent<any> & StaticComponentObject\n\n variants?: GenericVariantDefinitions\n\n /**\n * Used for applying sub theme style\n */\n componentName?: string\n\n /**\n * (compiler) If you need to pass context or something, prevents from ever\n * flattening. The 'jsx' option means it will never flatten. if you\n * pass JSX as a children (if its purely string, it will still flatten).\n */\n neverFlatten?: boolean | 'jsx'\n\n /**\n * Determines ultimate output tag (Text vs View)\n */\n isText?: boolean\n\n /**\n * Attempts to attach focus styles at runtime (useful for native)\n */\n isInput?: boolean\n\n /**\n * React native web images need special handling for className support\n */\n isImage?: boolean\n\n /**\n * Which style keys are allowed to be extracted.\n */\n validStyles?: { [key: string]: boolean }\n\n /**\n * Same as React.defaultProps, be sure to sync\n */\n defaultProps: Record<string, any>\n\n /**\n * (compiler) If these props are encountered, bail on all optimization.\n */\n deoptProps?: Set<string>\n\n /**\n * (compiler) If these props are encountered, leave them un-extracted.\n */\n inlineProps?: Set<string>\n\n /**\n * (compiler) If not flattening, leave this prop as original value.\n * Only applies to style attributes\n */\n inlineWhenUnflattened?: Set<string>\n\n /**\n * (compiler) A bit odd, only for more advanced heirarchies.\n * Indicates that the component will set this prop so the\n * static extraction can ensure it sets them to ={undefined}\n * so they get overriddent. In the future, this can be smarter.\n */\n ensureOverriddenProp?: { [key: string]: boolean }\n\n /**\n * Auto-detected, but can ovverride. Wraps children to space them on top\n */\n isZStack?: boolean\n\n /**\n * Merges into defaultProps later on, used internally yonly\n */\n defaultVariants?: { [key: string]: any }\n\n /**\n * Auto-detect, but can ovverride, passes styles properly to react-native-web\n */\n isReactNativeWeb?: boolean\n\n /**\n * Used internally to keep reference to the original rnw component\n */\n reactNativeWebComponent?: any\n\n /**\n * Memoize the component\n */\n memo?: boolean\n\n /**\n * Auto-detect, but can ovverride, passes styles properly to react-native-web\n */\n isTamagui?: boolean\n\n /**\n * Used internally to handle extractable HoC separate\n */\n isExtractable?: boolean\n\n /**\n * Used insternally to attach default props to names\n */\n parentNames?: string[]\n}\n\n/**\n * --------------------------------------------\n * variants\n * --------------------------------------------\n */\n\nexport type StylableComponent =\n | TamaguiComponent\n | React.Component\n | React.ForwardRefExoticComponent<any>\n | ReactComponentWithRef<any, any>\n | (new (props: any) => any)\n | typeof View\n | typeof Text\n | typeof TextInput\n | typeof Image\n\nexport type GetStyledVariants<A extends TamaguiComponent> = A extends TamaguiComponent<\n any,\n any,\n any,\n infer Variants\n>\n ? Variants\n : never\n\nexport type GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n any,\n any,\n infer BaseProps\n>\n ? BaseProps\n : never\n\nexport type GetProps<A extends StylableComponent> = A extends TamaguiComponent<infer Props>\n ? Props\n : A extends React.Component<infer Props>\n ? GetGenericComponentTamaguiProps<Props>\n : A extends new (props: infer Props) => any\n ? GetGenericComponentTamaguiProps<Props>\n : {}\n\ntype GetGenericComponentTamaguiProps<P> = P &\n Omit<'textAlign' extends keyof P ? TextProps : StackProps, keyof P>\n\nexport type SpreadKeys =\n | '...fontSize'\n | '...fontStyle'\n | '...fontTransform'\n | '...lineHeight'\n | '...letterSpacing'\n | '...size'\n | '...space'\n | '...color'\n | '...zIndex'\n | '...theme'\n | '...radius'\n\nexport type VariantDefinitions<\n Parent extends StylableComponent = TamaguiComponent,\n MyProps extends Object = GetProps<Parent>,\n Val = any\n> = VariantDefinitionFromProps<MyProps, Val>\n\nexport type VariantDefinitionFromProps<MyProps, Val> = MyProps extends Object\n ? {\n [propName: string]:\n | VariantSpreadFunction<MyProps, Val>\n | ({\n [Key in SpreadKeys]?: Key extends '...fontSize'\n ? FontSizeVariantSpreadFunction<MyProps>\n : Key extends '...size'\n ? SizeVariantSpreadFunction<MyProps>\n : Key extends '...space'\n ? SpaceVariantSpreadFunction<MyProps>\n : Key extends '...color'\n ? ColorVariantSpreadFunction<MyProps>\n : Key extends '...lineHeight'\n ? FontLineHeightVariantSpreadFunction<MyProps>\n : Key extends '...fontTransform'\n ? FontTransformVariantSpreadFunction<MyProps>\n : Key extends '...fontStyle'\n ? FontStyleVariantSpreadFunction<MyProps>\n : Key extends '...letterSpacing'\n ? FontLetterSpacingVariantSpreadFunction<MyProps>\n : Key extends '...zIndex'\n ? ZIndexVariantSpreadFunction<MyProps>\n : Key extends '...radius'\n ? RadiusVariantSpreadFunction<MyProps>\n : Key extends '...theme'\n ? ThemeVariantSpreadFunction<MyProps>\n : never\n } & {\n [Key in string | number | 'true' | 'false']?:\n | MyProps\n | VariantSpreadFunction<MyProps, Val>\n } & {\n [Key in VariantTypeKeys]?: Key extends ':number'\n ? VariantSpreadFunction<MyProps, number>\n : Key extends ':boolean'\n ? VariantSpreadFunction<MyProps, boolean>\n : Key extends ':string'\n ? VariantSpreadFunction<MyProps, string>\n : never\n })\n }\n : never\n\nexport type GenericStackVariants = VariantDefinitionFromProps<StackProps, any>\nexport type GenericTextVariants = VariantDefinitionFromProps<StackProps, any>\n\nexport type GetVariantProps<Variants> = {\n [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>\n ? Val\n : GetVariantValues<keyof Variants[Key]>\n}\n\nexport type VariantSpreadExtras<Props> = {\n fonts: TamaguiConfig['fonts']\n tokens: TamaguiConfig['tokens']\n theme: Themes extends { [key: string]: infer B } ? B : unknown\n props: Props\n}\n\ntype PropLike = { [key: string]: any }\n\nexport type VariantSpreadFunction<Props extends PropLike, Val = any> = (\n val: Val,\n config: VariantSpreadExtras<Props>\n) =>\n | {\n [Key in keyof Props]: Props[Key] | Variable\n }\n | null\n | undefined\n\nexport type VariantTypeKeys = ':string' | ':boolean' | ':number'\n\nexport type GetVariantValues<Key> = Key extends `...${infer VariantSpread}`\n ? ThemeValueByCategory<VariantSpread>\n : Key extends 'true' | 'false'\n ? boolean\n : Key extends ':string'\n ? string\n : Key extends ':boolean'\n ? boolean\n : Key extends ':number'\n ? number\n : Key\n\nexport type FontSizeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n A,\n FontSizeTokens\n>\nexport type SizeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, SizeTokens>\nexport type SpaceVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, SpaceTokens>\nexport type ColorVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, ColorTokens>\nexport type FontLineHeightVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n A,\n FontLineHeightTokens\n>\nexport type FontLetterSpacingVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n A,\n FontLetterSpacingTokens\n>\nexport type FontStyleVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n A,\n FontStyleTokens\n>\nexport type FontTransformVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n A,\n FontTransformTokens\n>\nexport type ZIndexVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, ZIndexTokens>\nexport type RadiusVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, RadiusTokens>\nexport type ThemeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, ThemeTokens>\n\n/**\n * --------------------------------------------\n * end variants\n * --------------------------------------------\n */\n\ntype SizeKeys =\n | 'width'\n | 'height'\n | 'minWidth'\n | 'minHeight'\n | 'maxWidth'\n | 'maxHeight'\n | 'shadowRadius'\n\ntype ColorKeys =\n | 'color'\n | 'backgroundColor'\n | 'borderColor'\n | 'borderBottomColor'\n | 'borderTopColor'\n | 'borderLeftColor'\n | 'borderRightColor'\n | 'shadowColor'\n | 'textShadowColor'\n\ntype SpaceKeys =\n | 'space'\n | 'padding'\n | 'paddingHorizontal'\n | 'paddingVertical'\n | 'paddingLeft'\n | 'paddingTop'\n | 'paddingBottom'\n | 'paddingLeft'\n | 'paddingRight'\n | 'paddingEnd'\n | 'paddingStart'\n | 'margin'\n | 'marginHorizontal'\n | 'marginVertical'\n | 'marginLeft'\n | 'marginTop'\n | 'marginBottom'\n | 'marginLeft'\n | 'marginRight'\n | 'marginEnd'\n | 'marginStart'\n | 'x'\n | 'y'\n | 'scale'\n | 'scaleX'\n | 'scaleY'\n | 'borderTopEndRadius'\n | 'borderTopLeftRadius'\n | 'borderTopRightRadius'\n | 'borderTopStartRadius'\n | 'borderBottomEndRadius'\n | 'borderBottomLeftRadius'\n | 'borderBottomRightRadius'\n | 'borderBottomStartRadius'\n | 'borderBottomWidth'\n | 'borderLeftWidth'\n | 'borderRadius'\n | 'borderRightWidth'\n | 'borderTopEndRadius'\n | 'borderTopLeftRadius'\n | 'borderTopRightRadius'\n | 'borderEndWidth'\n | 'borderStartWidth'\n | 'borderTopStartRadius'\n | 'borderTopWidth'\n | 'borderWidth'\n | 'left'\n | 'top'\n | 'right'\n | 'bottom'\n | 'shadowOffset'\n\ntype CSSColorNames =\n | 'aliceblue'\n | 'antiquewhite'\n | 'aqua'\n | 'aquamarine'\n | 'azure'\n | 'beige'\n | 'bisque'\n | 'black'\n | 'blanchedalmond'\n | 'blue'\n | 'blueviolet'\n | 'brown'\n | 'burlywood'\n | 'cadetblue'\n | 'chartreuse'\n | 'chocolate'\n | 'coral'\n | 'cornflowerblue'\n | 'cornsilk'\n | 'crimson'\n | 'cyan'\n | 'darkblue'\n | 'darkcyan'\n | 'darkgoldenrod'\n | 'darkgray'\n | 'darkgreen'\n | 'darkkhaki'\n | 'darkmagenta'\n | 'darkolivegreen'\n | 'darkorange'\n | 'darkorchid'\n | 'darkred'\n | 'darksalmon'\n | 'darkseagreen'\n | 'darkslateblue'\n | 'darkslategray'\n | 'darkturquoise'\n | 'darkviolet'\n | 'deeppink'\n | 'deepskyblue'\n | 'dimgray'\n | 'dodgerblue'\n | 'firebrick'\n | 'floralwhite'\n | 'forestgreen'\n | 'fuchsia'\n | 'gainsboro'\n | 'ghostwhite'\n | 'gold'\n | 'goldenrod'\n | 'gray'\n | 'green'\n | 'greenyellow'\n | 'honeydew'\n | 'hotpink'\n | 'indianred '\n | 'indigo '\n | 'ivory'\n | 'khaki'\n | 'lavender'\n | 'lavenderblush'\n | 'lawngreen'\n | 'lemonchiffon'\n | 'lightblue'\n | 'lightcoral'\n | 'lightcyan'\n | 'lightgoldenrodyellow'\n | 'lightgrey'\n | 'lightgreen'\n | 'lightpink'\n | 'lightsalmon'\n | 'lightseagreen'\n | 'lightskyblue'\n | 'lightslategray'\n | 'lightsteelblue'\n | 'lightyellow'\n | 'lime'\n | 'limegreen'\n | 'linen'\n | 'magenta'\n | 'maroon'\n | 'mediumaquamarine'\n | 'mediumblue'\n | 'mediumorchid'\n | 'mediumpurple'\n | 'mediumseagreen'\n | 'mediumslateblue'\n | 'mediumspringgreen'\n | 'mediumturquoise'\n | 'mediumvioletred'\n | 'midnightblue'\n | 'mintcream'\n | 'mistyrose'\n | 'moccasin'\n | 'navajowhite'\n | 'navy'\n | 'oldlace'\n | 'olive'\n | 'olivedrab'\n | 'orange'\n | 'orangered'\n | 'orchid'\n | 'palegoldenrod'\n | 'palegreen'\n | 'paleturquoise'\n | 'palevioletred'\n | 'papayawhip'\n | 'peachpuff'\n | 'peru'\n | 'pink'\n | 'plum'\n | 'powderblue'\n | 'purple'\n | 'red'\n | 'rosybrown'\n | 'royalblue'\n | 'saddlebrown'\n | 'salmon'\n | 'sandybrown'\n | 'seagreen'\n | 'seashell'\n | 'sienna'\n | 'silver'\n | 'skyblue'\n | 'slateblue'\n | 'slategray'\n | 'snow'\n | 'springgreen'\n | 'steelblue'\n | 'tan'\n | 'teal'\n | 'thistle'\n | 'tomato'\n | 'turquoise'\n | 'violet'\n | 'wheat'\n | 'white'\n | 'whitesmoke'\n | 'yellow'\n | 'yellowgreen'\n\nexport type TamaguiComponentState = {\n hover: boolean\n press: boolean\n pressIn: boolean\n focus: boolean\n mounted: boolean\n animation?: null | {\n style?: any\n avoidClasses?: boolean\n }\n}\n\nexport type SplitStyleState = TamaguiComponentState & {\n noClassNames?: boolean\n dynamicStylesInline?: boolean\n resolveVariablesAs?: ResolveVariableTypes\n fallbackProps?: Record<string, any>\n keepVariantsAsProps?: boolean\n hasTextAncestor?: boolean\n}\n\n// Animations:\n\ntype AnimationConfig = {\n [key: string]: any\n}\n\n// includes a very limited adapter between various impls for number => style\n// this is useful only in limited scenarios like `Sheet`, but necessary in those cases\n\nexport type AnimatedNumberStrategy =\n // only values shared between reanimated/react-native for now\n | {\n type: 'spring'\n stiffness?: number\n damping?: number\n mass?: number\n overshootClamping?: boolean\n restSpeedThreshold?: number\n restDisplacementThreshold?: number\n }\n | { type: 'timing'; duration: number }\n | { type: 'direct' }\n\nexport type UniversalAnimatedNumber<A> = {\n getInstance(): A\n getValue(): number\n setValue(next: number, config?: AnimatedNumberStrategy): void\n stop(): void\n}\n\nexport type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {\n avoidClasses?: boolean\n useAnimations: UseAnimationHook\n useAnimatedNumber: (initial: number) => UniversalAnimatedNumber<any>\n useAnimatedNumberStyle: <V extends UniversalAnimatedNumber<any>>(\n val: V,\n getStyle: (current: any) => any\n ) => void\n useAnimatedNumberReaction: (\n val: UniversalAnimatedNumber<any>,\n onValue: (current: number) => void\n ) => void\n animations: A\n View?: any\n Text?: any\n}\n\nexport type UseAnimationProps = TamaguiComponentPropsBase & Record<string, any>\n\nexport type UseAnimationHelpers = {\n hostRef: RefObject<HTMLElement | View>\n staticConfig: StaticConfigParsed\n getStyle: (props?: {\n isEntering?: boolean\n isExiting?: boolean\n exitVariant?: string | null\n enterVariant?: string | null\n }) => ViewStyle\n state: SplitStyleState\n pseudos: PseudoProps<ViewStyle>\n // style: ViewStyle | null | undefined\n // isMounted: boolean\n // exitStyle?: ViewStyle | null\n onDidAnimate?: any\n delay?: number\n // mergedStyles(props?: { isExiting?: boolean }): ViewStyle\n}\n\nexport type UseAnimationHook = (\n props: UseAnimationProps,\n helpers: UseAnimationHelpers\n) => null | {\n style?: StackStylePropsBase | StackStylePropsBase[]\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|