@tamagui/core 1.0.1-beta.128 → 1.0.1-beta.131
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/createComponent.js +15 -6
- package/dist/cjs/createComponent.js.map +2 -2
- package/dist/cjs/createTamagui.js +11 -15
- package/dist/cjs/createTamagui.js.map +2 -2
- package/dist/cjs/createVariables.js +8 -18
- package/dist/cjs/createVariables.js.map +2 -2
- package/dist/cjs/helpers/getFont.js +3 -1
- package/dist/cjs/helpers/getFont.js.map +2 -2
- package/dist/cjs/helpers/getSplitStyles.js +1 -1
- package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
- package/dist/cjs/helpers/getStylesAtomic.js +4 -2
- package/dist/cjs/helpers/getStylesAtomic.js.map +2 -2
- package/dist/cjs/helpers/getStylesAtomic.test.js +21 -0
- package/dist/cjs/helpers/getStylesAtomic.test.js.map +7 -0
- package/dist/cjs/helpers/getVariantExtras.js +10 -1
- package/dist/cjs/helpers/getVariantExtras.js.map +2 -2
- package/dist/cjs/insertFont.js +6 -6
- package/dist/cjs/insertFont.js.map +2 -2
- package/dist/cjs/types.js.map +1 -1
- package/dist/esm/createComponent.js +15 -6
- package/dist/esm/createComponent.js.map +2 -2
- package/dist/esm/createTamagui.js +10 -13
- package/dist/esm/createTamagui.js.map +2 -2
- package/dist/esm/createVariables.js +8 -18
- package/dist/esm/createVariables.js.map +2 -2
- package/dist/esm/helpers/getFont.js +3 -1
- package/dist/esm/helpers/getFont.js.map +2 -2
- package/dist/esm/helpers/getSplitStyles.js +1 -1
- package/dist/esm/helpers/getSplitStyles.js.map +2 -2
- package/dist/esm/helpers/getStylesAtomic.js +4 -2
- package/dist/esm/helpers/getStylesAtomic.js.map +2 -2
- package/dist/esm/helpers/getStylesAtomic.test.js +20 -0
- package/dist/esm/helpers/getStylesAtomic.test.js.map +7 -0
- package/dist/esm/helpers/getVariantExtras.js +10 -1
- package/dist/esm/helpers/getVariantExtras.js.map +2 -2
- package/dist/esm/insertFont.js +6 -6
- package/dist/esm/insertFont.js.map +2 -2
- package/package.json +10 -10
- package/types/createTamagui.d.ts +0 -1
- package/types/helpers/createTamaguiProvider.d.ts +0 -1
- package/types/helpers/getStylesAtomic.d.ts +7 -6
- package/types/helpers/getStylesAtomic.test.d.ts +2 -0
- package/types/types.d.ts +1 -0
|
@@ -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 '../conf'\nimport { isClient, 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 updateInserted,\n updateInsertedCache,\n} from './insertStyleRule'\nimport { mergeTransform } from './mergeTransform'\nimport { normalizeValueWithProperty } from './normalizeValueWithProperty'\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}\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 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 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 // loop backwards so we can skip already-used props\n for (let i = len - 1; i >= 0; i--) {\n const keyInit = propKeys[i]\n\n if (usedKeys.has(keyInit)) continue\n if (skipProps[keyInit]) continue\n if (!isWeb && keyInit.startsWith('data-')) continue\n\n const valInit = props[keyInit]\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 (staticConfig.defaultVariants && keyInit in staticConfig.defaultVariants) {\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 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 console.log(' \uD83D\uDD39 getSplitStyles 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 // TODO handle pseudo + media, not too hard just need to set up example case\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 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 console.log(' \uD83D\uDD39 getSplitStyles out', { style, pseudos, medias, classNames, viewProps, state, rulesToInsert })\n }\n }\n\n return {\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(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 ownKeys() {\n return [...new Set([...Object.keys(baseProps), ...Object.keys(specificProps)])]\n },\n has(_, key) {\n return key in specificProps || key in baseProps\n },\n get(_, key) {\n return 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(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 useInsertEffectCompat(() => {\n insertStyleRules(res.rulesToInsert)\n }, [res.rulesToInsert])\n\n return res\n}\n\nfunction addStyleToInsertRules(rulesToInsert: RulesToInsert, styleObject: PartialStyleObject) {\n if (process.env.TAMAGUI_TARGET === 'web') {\n // NOTE this is super tricky\n // for some reason, next.js dev SSR actually misses a lot of styles (pre-hydrate) with || !isClient\n // which doesn't really make sense, because that should strictly extract *more* css, but oh well\n // meanwhile, production builds *need* to always be truthy here for node, thus the cheat conditional\n if (\n styleObject.property === 'pointerEvents' ||\n updateInsertedCache(styleObject.identifier, styleObject.rules) ||\n (!isClient && process.env.NODE_ENV === 'production')\n ) {\n rulesToInsert.push(styleObject)\n }\n }\n}\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } from '@tamagui/helpers'\nimport { useInsertionEffect } from 'react'\nimport { ViewStyle } from 'react-native'\n\nimport { getConfig } from '../conf'\nimport { isClient, 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 updateInserted,\n updateInsertedCache,\n} from './insertStyleRule'\nimport { mergeTransform } from './mergeTransform'\nimport { normalizeValueWithProperty } from './normalizeValueWithProperty'\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}\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 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 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 // loop backwards so we can skip already-used props\n for (let i = len - 1; i >= 0; i--) {\n const keyInit = propKeys[i]\n\n if (usedKeys.has(keyInit)) continue\n if (skipProps[keyInit]) continue\n if (!isWeb && keyInit.startsWith('data-')) continue\n\n const valInit = props[keyInit]\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 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 console.log(' \uD83D\uDD39 getSplitStyles 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 // TODO handle pseudo + media, not too hard just need to set up example case\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 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 console.log(' \uD83D\uDD39 getSplitStyles out', { style, pseudos, medias, classNames, viewProps, state, rulesToInsert })\n }\n }\n\n return {\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(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 ownKeys() {\n return [...new Set([...Object.keys(baseProps), ...Object.keys(specificProps)])]\n },\n has(_, key) {\n return key in specificProps || key in baseProps\n },\n get(_, key) {\n return 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(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 useInsertEffectCompat(() => {\n insertStyleRules(res.rulesToInsert)\n }, [res.rulesToInsert])\n\n return res\n}\n\nfunction addStyleToInsertRules(rulesToInsert: RulesToInsert, styleObject: PartialStyleObject) {\n if (process.env.TAMAGUI_TARGET === 'web') {\n // NOTE this is super tricky\n // for some reason, next.js dev SSR actually misses a lot of styles (pre-hydrate) with || !isClient\n // which doesn't really make sense, because that should strictly extract *more* css, but oh well\n // meanwhile, production builds *need* to always be truthy here for node, thus the cheat conditional\n if (\n styleObject.property === 'pointerEvents' ||\n updateInsertedCache(styleObject.identifier, styleObject.rules) ||\n (!isClient && process.env.NODE_ENV === 'production')\n ) {\n rulesToInsert.push(styleObject)\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -28,7 +28,7 @@ __export(getStylesAtomic_exports, {
|
|
|
28
28
|
module.exports = __toCommonJS(getStylesAtomic_exports);
|
|
29
29
|
var import_helpers = require("@tamagui/helpers");
|
|
30
30
|
var import_hyphenate_style_name = __toESM(require("hyphenate-style-name"));
|
|
31
|
-
var
|
|
31
|
+
var import_conf = require("../conf");
|
|
32
32
|
var import_expandStyles = require("./expandStyles");
|
|
33
33
|
var import_normalizeValueWithProperty = require("./normalizeValueWithProperty");
|
|
34
34
|
var import_pseudoDescriptors = require("./pseudoDescriptors");
|
|
@@ -60,7 +60,9 @@ function getAtomicStyle(style, pseudo) {
|
|
|
60
60
|
}
|
|
61
61
|
return generateAtomicStyles(style, pseudo);
|
|
62
62
|
}
|
|
63
|
+
let conf;
|
|
63
64
|
const generateAtomicStyles = (styleIn, pseudo) => {
|
|
65
|
+
conf = conf || (0, import_conf.getConfig)();
|
|
64
66
|
const style = styleIn;
|
|
65
67
|
if (style.transform) {
|
|
66
68
|
if (Array.isArray(style.transform)) {
|
|
@@ -79,7 +81,7 @@ const generateAtomicStyles = (styleIn, pseudo) => {
|
|
|
79
81
|
} else {
|
|
80
82
|
const hash = presetHashes[value] ? value : typeof value === "string" ? (0, import_helpers.simpleHash)(value) : `${value}`.replace(".", "dot");
|
|
81
83
|
const pseudoPrefix = pseudo ? `0${pseudo.name}-` : "";
|
|
82
|
-
const shortProp =
|
|
84
|
+
const shortProp = conf.inverseShorthands[key] || key;
|
|
83
85
|
const identifier = `_${shortProp}-${pseudoPrefix}${hash}`;
|
|
84
86
|
const rules = createAtomicRules(identifier, key, value, pseudo);
|
|
85
87
|
const styleObject = {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/getStylesAtomic.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Some parts adapted from react-native-web\n * Copyright (c) Nicolas Gallagher licensed under the MIT license.\n */\n\nimport { StyleObject, simpleHash } from '@tamagui/helpers'\nimport hyphenateStyleName from 'hyphenate-style-name'\nimport { TextStyle, ViewStyle } from 'react-native'\n\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,qBAAwC;AACxC,kCAA+B;AAG/B,
|
|
4
|
+
"sourcesContent": ["/**\n * Some parts adapted from react-native-web\n * Copyright (c) Nicolas Gallagher licensed under the MIT license.\n */\n\nimport { StyleObject, simpleHash } from '@tamagui/helpers'\nimport hyphenateStyleName from 'hyphenate-style-name'\nimport { TextStyle, ViewStyle } from 'react-native'\n\nimport { getConfig } from '../conf'\nimport { TamaguiInternalConfig } from '../types'\nimport { defaultOffset } from './expandStyles'\nimport { normalizeValueWithProperty } from './normalizeValueWithProperty'\nimport { PseudoDescriptor, pseudoDescriptors } from './pseudoDescriptors'\n\n// refactor this file away next...\n\ntype ViewOrTextStyle = ViewStyle | TextStyle\n\nexport type ViewStyleWithPseudos = ViewOrTextStyle & {\n hoverStyle?: ViewOrTextStyle\n pressStyle?: ViewOrTextStyle\n focusStyle?: ViewOrTextStyle\n}\n\nconst pseudosOrdered = Object.values(pseudoDescriptors)\n\nexport function getStylesAtomic(stylesIn: ViewStyleWithPseudos) {\n // performance optimization\n if (!stylesIn.hoverStyle && !stylesIn.pressStyle && !stylesIn.focusStyle) {\n return getAtomicStyle(stylesIn)\n }\n\n // only for pseudos\n const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn\n let res: StyleObject[] = []\n // *1 order matched to *0\n for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {\n if (!style) continue\n const pseudo = pseudosOrdered[index]\n res = [...res, ...getAtomicStyle(style, pseudo)]\n }\n return res\n}\n\nexport function getAtomicStyle(style: ViewOrTextStyle, pseudo?: PseudoDescriptor): StyleObject[] {\n if (process.env.NODE_ENV === 'development') {\n if (!style || typeof style !== 'object') {\n throw new Error(`Wrong style type: \"${typeof style}\": ${style}`)\n }\n } else {\n if (!style) {\n console.warn(`Invalid style`)\n return []\n }\n }\n\n return generateAtomicStyles(style, pseudo)\n}\n\nlet conf: TamaguiInternalConfig\n\nconst generateAtomicStyles = (\n styleIn: ViewStyle & TextStyle,\n pseudo?: PseudoDescriptor\n): StyleObject[] => {\n conf = conf || getConfig()\n\n // were converting to css styles\n const style = styleIn as Record<string, string | null | undefined>\n\n // transform\n if (style.transform) {\n if (Array.isArray(style.transform)) {\n style.transform = style.transform.map(mapTransform).join(' ')\n }\n }\n\n styleToCSS(style)\n\n const out: StyleObject[] = []\n for (const key in style) {\n const value = style[key]\n if (value != null && value != undefined) {\n const uid = key + (pseudo?.name || '')\n const cachedResult = cache.get(uid, value)\n if (cachedResult != undefined) {\n out.push(cachedResult)\n } else {\n const hash = presetHashes[value]\n ? value\n : typeof value === 'string'\n ? simpleHash(value)\n : `${value}`.replace('.', 'dot')\n\n const pseudoPrefix = pseudo ? `0${pseudo.name}-` : ''\n const shortProp = conf.inverseShorthands[key] || key\n const identifier = `_${shortProp}-${pseudoPrefix}${hash}`\n const rules = createAtomicRules(identifier, key, value, pseudo)\n const styleObject: StyleObject = {\n property: key,\n pseudo: pseudo?.name,\n value,\n identifier,\n rules,\n }\n\n cache.set(uid, value, styleObject)\n out.push(styleObject)\n }\n }\n }\n return out\n}\n\nconst presetHashes = {\n none: true,\n}\n\nconst n = (val: any) => normalizeValueWithProperty(val)\n\nexport function styleToCSS(style: Record<string, any>) {\n // box-shadow\n const { shadowOffset, shadowRadius, shadowColor } = style\n if (style.shadowRadius !== undefined) {\n const offset = shadowOffset || defaultOffset\n const shadow = `${n(offset.width)} ${n(offset.height)} ${n(shadowRadius)} ${shadowColor}`\n style.boxShadow = style.boxShadow ? `${style.boxShadow}, ${shadow}` : shadow\n delete style.shadowOffset\n delete style.shadowRadius\n delete style.shadowColor\n }\n\n // text-shadow\n const { textShadowColor, textShadowOffset, textShadowRadius } = style\n if (textShadowColor || textShadowOffset || textShadowRadius) {\n const { height, width } = textShadowOffset || defaultOffset\n const radius = textShadowRadius || 0\n const color = normalizeValueWithProperty(textShadowColor, 'textShadowColor')\n if (color && (height !== 0 || width !== 0 || radius !== 0)) {\n const blurRadius = normalizeValueWithProperty(radius)\n const offsetX = normalizeValueWithProperty(width)\n const offsetY = normalizeValueWithProperty(height)\n style.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`\n }\n delete style.textShadowColor\n delete style.textShadowOffset\n delete style.textShadowRadius\n }\n}\n\n// { scale: 2 } => 'scale(2)'\n// { translateX: 20 } => 'translateX(20px)'\n// { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'\nconst mapTransform = (transform) => {\n const type = Object.keys(transform)[0]\n const value = transform[type]\n if (type === 'matrix' || type === 'matrix3d') {\n return `${type}(${value.join(',')})`\n } else {\n const normalizedValue = normalizeValueWithProperty(value, type)\n return `${type}(${normalizedValue})`\n }\n}\n\n// cache\ntype Value = Object | Array<any> | string | number\nexport type Style = { [key: string]: Value }\nclass Cache {\n values: Record<string, any> = {}\n\n get(key: string, valStr: string) {\n return this.values[key]?.[valStr]\n }\n\n set(key: string, valStr: string, object: any) {\n this.values[key] ??= {}\n this.values[key][valStr] = object\n }\n}\nconst cache = new Cache()\n\nfunction createDeclarationBlock(style: Style, important = false) {\n let declarations = ''\n for (const key in style) {\n const prop = hyphenateStyleName(key)\n const value = style[key]\n declarations += `${prop}:${value}${important ? ` !important` : ''};`\n }\n return `{${declarations}}`\n}\n\nconst pseudoSelectorPrefixes = (() => {\n const res: Record<string, string> = {}\n for (const key in pseudoDescriptors) {\n const pseudo = pseudoDescriptors[key]\n res[pseudo.name] = [...Array(pseudo.priority)].map(() => ':root').join('') + ' '\n }\n return res\n})()\n\nfunction createAtomicRules(\n identifier: string,\n property: string,\n value: any,\n pseudo?: PseudoDescriptor\n): string[] {\n const selector = pseudo\n ? `${pseudoSelectorPrefixes[pseudo.name]} .${identifier}:${pseudo.name}`\n : `.${identifier}`\n const important = !!pseudo\n\n let rules: string[] = []\n\n // Handle non-standard properties and object values that require multiple\n // CSS rules to be created.\n switch (property) {\n // Equivalent to using '::placeholder'\n case 'placeholderTextColor': {\n const block = createDeclarationBlock({ color: value, opacity: 1 }, important)\n rules.push(`${selector}::placeholder${block}`)\n break\n }\n\n // all webkit prefixed rules\n case 'backgroundClip':\n case 'userSelect': {\n const propertyCapitalized = `${property[0].toUpperCase()}${property.slice(1)}`\n const webkitProperty = `Webkit${propertyCapitalized}`\n const block = createDeclarationBlock(\n { [property]: value, [webkitProperty]: value },\n important\n )\n rules.push(`${selector}${block}`)\n break\n }\n\n // Polyfill for additional 'pointer-events' values\n // See d13f78622b233a0afc0c7a200c0a0792c8ca9e58\n case 'pointerEvents': {\n let finalValue = value\n if (value === 'auto' || value === 'box-only') {\n finalValue = 'auto'\n if (value === 'box-only') {\n rules.push(`${selector}>*${boxOnly}`)\n }\n } else if (value === 'none' || value === 'box-none') {\n finalValue = 'none'\n if (value === 'box-none') {\n rules.push(`${selector}>*${boxNone}`)\n }\n }\n const block = createDeclarationBlock({ pointerEvents: finalValue }, true)\n rules.push(`${selector}${block}`)\n break\n }\n\n // Polyfill for draft spec\n // https://drafts.csswg.org/css-scrollbars-1/\n case 'scrollbarWidth': {\n if (value === 'none') {\n rules.push(`${selector}::-webkit-scrollbar{display:none}`)\n }\n const block = createDeclarationBlock({ scrollbarWidth: value }, important)\n rules.push(`${selector}${block}`)\n break\n }\n\n default: {\n const block = createDeclarationBlock({ [property]: value }, important)\n rules.push(`${selector}${block}`)\n break\n }\n }\n\n // hover styles need to be conditional\n // perhaps this can be generalized but for now lets just shortcut\n // and hardcode for hover styles, if we need to later we can\n // WEIRD SYNTAX, SEE:\n // https://stackoverflow.com/questions/40532204/media-query-for-devices-supporting-hover\n if (pseudo && pseudo.name === 'hover') {\n rules = rules.map((r) => `@media not all and (hover: none) { ${r} }`)\n }\n\n return rules\n}\n\nconst boxNone = createDeclarationBlock({ pointerEvents: 'auto' }, true)\nconst boxOnly = createDeclarationBlock({ pointerEvents: 'none' }, true)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var import_vitest = require("vitest");
|
|
3
|
+
var import_getStylesAtomic = require("./getStylesAtomic");
|
|
4
|
+
(0, import_vitest.test)(`should expand webkit user-select`, () => {
|
|
5
|
+
(0, import_vitest.expect)((0, import_getStylesAtomic.getStylesAtomic)({
|
|
6
|
+
userSelect: "none"
|
|
7
|
+
})).toMatchInlineSnapshot(`
|
|
8
|
+
[
|
|
9
|
+
{
|
|
10
|
+
"identifier": "_userSelect-none",
|
|
11
|
+
"property": "userSelect",
|
|
12
|
+
"pseudo": undefined,
|
|
13
|
+
"rules": [
|
|
14
|
+
"._userSelect-none{user-select:none;-webkit-user-select:none;}",
|
|
15
|
+
],
|
|
16
|
+
"value": "none",
|
|
17
|
+
},
|
|
18
|
+
]
|
|
19
|
+
`);
|
|
20
|
+
});
|
|
21
|
+
//# sourceMappingURL=getStylesAtomic.test.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/helpers/getStylesAtomic.test.ts"],
|
|
4
|
+
"sourcesContent": ["import { expect, test } from 'vitest'\n\nimport { getStylesAtomic } from './getStylesAtomic'\n\ntest(`should expand webkit user-select`, () => {\n expect(\n getStylesAtomic({\n // @ts-ignore\n userSelect: 'none',\n })\n ).toMatchInlineSnapshot(`\n [\n {\n \"identifier\": \"_userSelect-none\",\n \"property\": \"userSelect\",\n \"pseudo\": undefined,\n \"rules\": [\n \"._userSelect-none{user-select:none;-webkit-user-select:none;}\",\n ],\n \"value\": \"none\",\n },\n ]\n `)\n})\n"],
|
|
5
|
+
"mappings": ";AAAA,oBAA6B;AAE7B,6BAAgC;AAEhC,wBAAK,oCAAoC,MAAM;AAC7C,4BACE,4CAAgB;AAAA,IAEd,YAAY;AAAA,EACd,CAAC,CACH,EAAE,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYvB;AACH,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -39,8 +39,17 @@ function getVariantExtras(props, languageContext, theme, defaultProps, avoidDefa
|
|
|
39
39
|
if (Reflect.has(target, key)) {
|
|
40
40
|
return Reflect.get(target, key);
|
|
41
41
|
}
|
|
42
|
+
const shorthand = conf.inverseShorthands[key];
|
|
43
|
+
if (shorthand && Reflect.has(target, shorthand)) {
|
|
44
|
+
return Reflect.get(target, shorthand);
|
|
45
|
+
}
|
|
42
46
|
if (defaultProps) {
|
|
43
|
-
|
|
47
|
+
if (Reflect.has(defaultProps, key)) {
|
|
48
|
+
return Reflect.get(defaultProps, key);
|
|
49
|
+
}
|
|
50
|
+
if (shorthand && Reflect.has(defaultProps, shorthand)) {
|
|
51
|
+
return Reflect.get(defaultProps, shorthand);
|
|
52
|
+
}
|
|
44
53
|
}
|
|
45
54
|
}
|
|
46
55
|
})
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/getVariantExtras.tsx"],
|
|
4
|
-
"sourcesContent": ["import { getConfig } from '../conf'\nimport { GenericFonts } from '../types'\nimport { LanguageContextType } from '../views/FontLanguage.types'\n\nconst extrasCache = new WeakMap()\n\nexport function getVariantExtras(\n props: any,\n languageContext?: LanguageContextType,\n theme?: any,\n defaultProps?: any,\n avoidDefaultProps = false\n) {\n const conf = getConfig()\n\n if (extrasCache.has(props)) {\n return extrasCache.get(props)\n }\n\n const fonts = languageContext\n ? getFontsForLanguage(conf.fontsParsed, languageContext)\n : conf.fontsParsed\n\n const next = {\n fonts,\n tokens: conf.tokensParsed,\n theme,\n // TODO do this in splitstlye\n // we avoid passing in default props for media queries because that would confuse things like SizableText.size:\n props: avoidDefaultProps\n ? props\n : new Proxy(props, {\n get(target, key) {\n if (Reflect.has(target, key)) {\n return Reflect.get(target, key)\n }\n // these props may be extracted into classNames, but we still want to access them\n // at runtime, so we proxy back to defaultProps but don't pass them\n if (defaultProps) {\n return Reflect.get(defaultProps, key)\n }\n },\n }),\n }\n\n extrasCache.set(props, next)\n\n return next\n}\n\nconst fontLanguageCache = new WeakMap()\n\nexport function getFontsForLanguage(fonts: GenericFonts, language: LanguageContextType) {\n if (fontLanguageCache.has(language)) {\n return fontLanguageCache.get(language)\n }\n const next = {\n ...fonts,\n ...Object.fromEntries(\n Object.entries(language).map(([name, lang]) => {\n if (lang === 'default') {\n return []\n }\n const langKey = `$${name}_${lang}`\n return [`$${name}`, fonts[langKey]]\n })\n ),\n }\n fontLanguageCache.set(language, next)\n return next\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA0B;AAI1B,MAAM,cAAc,oBAAI,QAAQ;AAEzB,0BACL,OACA,iBACA,OACA,cACA,oBAAoB,OACpB;AACA,QAAM,OAAO,2BAAU;AAEvB,MAAI,YAAY,IAAI,KAAK,GAAG;AAC1B,WAAO,YAAY,IAAI,KAAK;AAAA,EAC9B;AAEA,QAAM,QAAQ,kBACV,oBAAoB,KAAK,aAAa,eAAe,IACrD,KAAK;AAET,QAAM,OAAO;AAAA,IACX;AAAA,IACA,QAAQ,KAAK;AAAA,IACb;AAAA,IAGA,OAAO,oBACH,QACA,IAAI,MAAM,OAAO;AAAA,
|
|
4
|
+
"sourcesContent": ["import { getConfig } from '../conf'\nimport { GenericFonts } from '../types'\nimport { LanguageContextType } from '../views/FontLanguage.types'\n\nconst extrasCache = new WeakMap()\n\nexport function getVariantExtras(\n props: any,\n languageContext?: LanguageContextType,\n theme?: any,\n defaultProps?: any,\n avoidDefaultProps = false\n) {\n const conf = getConfig()\n\n if (extrasCache.has(props)) {\n return extrasCache.get(props)\n }\n\n const fonts = languageContext\n ? getFontsForLanguage(conf.fontsParsed, languageContext)\n : conf.fontsParsed\n\n const next = {\n fonts,\n tokens: conf.tokensParsed,\n theme,\n // TODO do this in splitstlye\n // we avoid passing in default props for media queries because that would confuse things like SizableText.size:\n props: avoidDefaultProps\n ? props\n : new Proxy(props, {\n // handles shorthands\n get(target, key) {\n if (Reflect.has(target, key)) {\n return Reflect.get(target, key)\n }\n const shorthand = conf.inverseShorthands[key as any]\n if (shorthand && Reflect.has(target, shorthand)) {\n return Reflect.get(target, shorthand)\n }\n // these props may be extracted into classNames, but we still want to access them\n // at runtime, so we proxy back to defaultProps but don't pass them\n if (defaultProps) {\n if (Reflect.has(defaultProps, key)) {\n return Reflect.get(defaultProps, key)\n }\n if (shorthand && Reflect.has(defaultProps, shorthand)) {\n return Reflect.get(defaultProps, shorthand)\n }\n }\n },\n }),\n }\n\n extrasCache.set(props, next)\n\n return next\n}\n\nconst fontLanguageCache = new WeakMap()\n\nexport function getFontsForLanguage(fonts: GenericFonts, language: LanguageContextType) {\n if (fontLanguageCache.has(language)) {\n return fontLanguageCache.get(language)\n }\n const next = {\n ...fonts,\n ...Object.fromEntries(\n Object.entries(language).map(([name, lang]) => {\n if (lang === 'default') {\n return []\n }\n const langKey = `$${name}_${lang}`\n return [`$${name}`, fonts[langKey]]\n })\n ),\n }\n fontLanguageCache.set(language, next)\n return next\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA0B;AAI1B,MAAM,cAAc,oBAAI,QAAQ;AAEzB,0BACL,OACA,iBACA,OACA,cACA,oBAAoB,OACpB;AACA,QAAM,OAAO,2BAAU;AAEvB,MAAI,YAAY,IAAI,KAAK,GAAG;AAC1B,WAAO,YAAY,IAAI,KAAK;AAAA,EAC9B;AAEA,QAAM,QAAQ,kBACV,oBAAoB,KAAK,aAAa,eAAe,IACrD,KAAK;AAET,QAAM,OAAO;AAAA,IACX;AAAA,IACA,QAAQ,KAAK;AAAA,IACb;AAAA,IAGA,OAAO,oBACH,QACA,IAAI,MAAM,OAAO;AAAA,MAEf,IAAI,QAAQ,KAAK;AACf,YAAI,QAAQ,IAAI,QAAQ,GAAG,GAAG;AAC5B,iBAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,QAChC;AACA,cAAM,YAAY,KAAK,kBAAkB;AACzC,YAAI,aAAa,QAAQ,IAAI,QAAQ,SAAS,GAAG;AAC/C,iBAAO,QAAQ,IAAI,QAAQ,SAAS;AAAA,QACtC;AAGA,YAAI,cAAc;AAChB,cAAI,QAAQ,IAAI,cAAc,GAAG,GAAG;AAClC,mBAAO,QAAQ,IAAI,cAAc,GAAG;AAAA,UACtC;AACA,cAAI,aAAa,QAAQ,IAAI,cAAc,SAAS,GAAG;AACrD,mBAAO,QAAQ,IAAI,cAAc,SAAS;AAAA,UAC5C;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACP;AAEA,cAAY,IAAI,OAAO,IAAI;AAE3B,SAAO;AACT;AAEA,MAAM,oBAAoB,oBAAI,QAAQ;AAE/B,6BAA6B,OAAqB,UAA+B;AACtF,MAAI,kBAAkB,IAAI,QAAQ,GAAG;AACnC,WAAO,kBAAkB,IAAI,QAAQ;AAAA,EACvC;AACA,QAAM,OAAO;AAAA,IACX,GAAG;AAAA,IACH,GAAG,OAAO,YACR,OAAO,QAAQ,QAAQ,EAAE,IAAI,CAAC,CAAC,MAAM,UAAU;AAC7C,UAAI,SAAS,WAAW;AACtB,eAAO,CAAC;AAAA,MACV;AACA,YAAM,UAAU,IAAI,QAAQ;AAC5B,aAAO,CAAC,IAAI,QAAQ,MAAM,QAAQ;AAAA,IACpC,CAAC,CACH;AAAA,EACF;AACA,oBAAkB,IAAI,UAAU,IAAI;AACpC,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/insertFont.js
CHANGED
|
@@ -32,9 +32,9 @@ function insertFont(name, fontIn) {
|
|
|
32
32
|
const tokened = (0, import_createVariables.createVariables)(font, name);
|
|
33
33
|
const parsed = parseFont(tokened);
|
|
34
34
|
if (process.env.TAMAGUI_TARGET === "web" && typeof document !== "undefined") {
|
|
35
|
-
const
|
|
35
|
+
const fontVars = registerFontVariables(parsed);
|
|
36
36
|
const style = document.createElement("style");
|
|
37
|
-
style.innerText = `:root {${
|
|
37
|
+
style.innerText = `:root .font_${name} {${fontVars.join(";")}}`;
|
|
38
38
|
style.setAttribute("data-tamagui-font", name);
|
|
39
39
|
document.head.appendChild(style);
|
|
40
40
|
}
|
|
@@ -62,12 +62,12 @@ function parseFont(definition) {
|
|
|
62
62
|
return parsed;
|
|
63
63
|
}
|
|
64
64
|
function registerFontVariables(parsedFont) {
|
|
65
|
-
const
|
|
65
|
+
const response = [];
|
|
66
66
|
for (const fkey in parsedFont) {
|
|
67
67
|
if (fkey === "family") {
|
|
68
68
|
const val = parsedFont[fkey];
|
|
69
69
|
(0, import_registerCSSVariable.registerCSSVariable)(val);
|
|
70
|
-
|
|
70
|
+
response.push((0, import_registerCSSVariable.variableToCSS)(val));
|
|
71
71
|
} else {
|
|
72
72
|
for (const fskey in parsedFont[fkey]) {
|
|
73
73
|
const fval = parsedFont[fkey][fskey];
|
|
@@ -75,12 +75,12 @@ function registerFontVariables(parsedFont) {
|
|
|
75
75
|
} else {
|
|
76
76
|
const val = parsedFont[fkey][fskey];
|
|
77
77
|
(0, import_registerCSSVariable.registerCSSVariable)(val);
|
|
78
|
-
|
|
78
|
+
response.push((0, import_registerCSSVariable.variableToCSS)(val));
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
|
-
return
|
|
83
|
+
return response;
|
|
84
84
|
}
|
|
85
85
|
// Annotate the CommonJS export names for ESM import in node:
|
|
86
86
|
0 && (module.exports = {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/insertFont.ts"],
|
|
4
|
-
"sourcesContent": ["import { setConfigFont } from './conf'\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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA8B;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,
|
|
4
|
+
"sourcesContent": ["import { setConfigFont } from './conf'\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 as Variable\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,kBAA8B;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,iCAAc,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,UAAU;AACxB,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?: MediaQueryKey[]\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 Provider: (props: TamaguiProviderProps) => any\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\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?: MediaQueryKey[]\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 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\nexport type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {\n avoidClasses?: boolean\n useAnimations: UseAnimationHook\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 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?: MediaQueryKey[]\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 Provider: (props: TamaguiProviderProps) => any\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?: MediaQueryKey[]\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 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\nexport type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {\n avoidClasses?: boolean\n useAnimations: UseAnimationHook\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"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|