@tamagui/core 1.0.1-beta.114 → 1.0.1-beta.117

package/dist/esm/helpers/getStylesAtomic.js

@@ -126,9 +126,9 @@ function createDeclarationBlock(style, important = false) {
   for (const key in style) {
     const prop = hyphenateStyleName(key);
     const value = style[key];
-    declarations += `${prop}:${value}`;
+    declarations += `${prop}:${value}${important ? ` !important` : ""};`;
   }
-  return `{${declarations}${important ? ` !important` : ""};}`;
+  return `{${declarations}}`;
 }
 const pseudoSelectorPrefixes = (() => {
   const res = {};
@@ -148,6 +148,14 @@ function createAtomicRules(identifier, property, value, pseudo) {
       rules.push(`${selector}::placeholder${block}`);
       break;
     }
+    case "backgroundClip":
+    case "userSelect": {
+      const propertyCapitalized = `${property[0].toUpperCase()}${property.slice(1)}`;
+      const webkitProperty = `Webkit${propertyCapitalized}`;
+      const block = createDeclarationBlock({ [property]: value, [webkitProperty]: value }, important);
+      rules.push(`${selector}${block}`);
+      break;
+    }
     case "pointerEvents": {
       let finalValue = value;
       if (value === "auto" || value === "box-only") {

package/dist/esm/helpers/getStylesAtomic.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/getStylesAtomic.ts"],
-  "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 { reversedShorthands } from '../createTamagui'\nimport { defaultOffset } from './expandStyles'\nimport { normalizeValueWithProperty } from './normalizeValueWithProperty'\nimport { PseudoDescriptor, pseudoDescriptors } from './pseudoDescriptors'\n\n// refactor this file away next...\n\nexport type ViewStyleWithPseudos = ViewStyle & {\n  hoverStyle?: ViewStyle\n  pressStyle?: ViewStyle\n  focusStyle?: ViewStyle\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: ViewStyle, 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\nconst generateAtomicStyles = (\n  styleIn: ViewStyle & TextStyle,\n  pseudo?: PseudoDescriptor\n): StyleObject[] => {\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 = reversedShorthands[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\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 = `${offset.width} ${offset.height} ${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}`\n  }\n  return `{${declarations}${important ? ` !important` : ''};}`\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    // 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"],
-  "mappings": "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",
+  "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 { reversedShorthands } from '../createTamagui'\nimport { defaultOffset } from './expandStyles'\nimport { normalizeValueWithProperty } from './normalizeValueWithProperty'\nimport { PseudoDescriptor, pseudoDescriptors } from './pseudoDescriptors'\n\n// refactor this file away next...\n\nexport type ViewStyleWithPseudos = ViewStyle & {\n  hoverStyle?: ViewStyle\n  pressStyle?: ViewStyle\n  focusStyle?: ViewStyle\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: ViewStyle, 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\nconst generateAtomicStyles = (\n  styleIn: ViewStyle & TextStyle,\n  pseudo?: PseudoDescriptor\n): StyleObject[] => {\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 = reversedShorthands[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\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 = `${offset.width} ${offset.height} ${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"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/helpers/getVariantExtras.js

@@ -1,8 +1,13 @@
 import { getConfig } from "../conf";
-function getVariantExtras(props, theme, defaultProps, avoidDefaultProps = false) {
+const extrasCache = /* @__PURE__ */ new WeakMap();
+function getVariantExtras(props, languageContext, theme, defaultProps, avoidDefaultProps = false) {
   const conf = getConfig();
-  return {
-    fonts: conf.fontsParsed,
+  if (extrasCache.has(props)) {
+    return extrasCache.get(props);
+  }
+  const fonts = languageContext ? getFontsForLanguage(conf.fontsParsed, languageContext) : conf.fontsParsed;
+  const next = {
+    fonts,
     tokens: conf.tokensParsed,
     theme,
     props: avoidDefaultProps ? props : new Proxy(props, {
@@ -16,8 +21,29 @@ function getVariantExtras(props, theme, defaultProps, avoidDefaultProps = false)
       }
     })
   };
+  extrasCache.set(props, next);
+  return next;
+}
+const fontLanguageCache = /* @__PURE__ */ new WeakMap();
+function getFontsForLanguage(fonts, language) {
+  if (fontLanguageCache.has(language)) {
+    return fontLanguageCache.get(language);
+  }
+  const next = {
+    ...fonts,
+    ...Object.fromEntries(Object.entries(language).map(([name, lang]) => {
+      if (lang === "default") {
+        return [];
+      }
+      const langKey = `$${name}_${lang}`;
+      return [`$${name}`, fonts[langKey]];
+    }))
+  };
+  fontLanguageCache.set(language, next);
+  return next;
 }
 export {
+  getFontsForLanguage,
   getVariantExtras
 };
 //# sourceMappingURL=getVariantExtras.js.map

package/dist/esm/helpers/getVariantExtras.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/getVariantExtras.tsx"],
-  "sourcesContent": ["import { getConfig } from '../conf'\n\nexport function getVariantExtras(\n  props: any,\n  theme?: any,\n  defaultProps?: any,\n  avoidDefaultProps = false\n) {\n  const conf = getConfig()\n  return {\n    fonts: conf.fontsParsed,\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"],
-  "mappings": "AAAA;AAEO,0BACL,OACA,OACA,cACA,oBAAoB,OACpB;AACA,QAAM,OAAO,UAAU;AACvB,SAAO;AAAA,IACL,OAAO,KAAK;AAAA,IACZ,QAAQ,KAAK;AAAA,IACb;AAAA,IAGA,OAAO,oBACH,QACA,IAAI,MAAM,OAAO;AAAA,MACf,IAAI,QAAQ,KAAK;AACf,YAAI,QAAQ,IAAI,QAAQ,GAAG,GAAG;AAC5B,iBAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,QAChC;AAGA,YAAI,cAAc;AAChB,iBAAO,QAAQ,IAAI,cAAc,GAAG;AAAA,QACtC;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACP;AACF;",
+  "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"],
+  "mappings": "AAAA;AAIA,MAAM,cAAc,oBAAI,QAAQ;AAEzB,0BACL,OACA,iBACA,OACA,cACA,oBAAoB,OACpB;AACA,QAAM,OAAO,UAAU;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,MACf,IAAI,QAAQ,KAAK;AACf,YAAI,QAAQ,IAAI,QAAQ,GAAG,GAAG;AAC5B,iBAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,QAChC;AAGA,YAAI,cAAc;AAChB,iBAAO,QAAQ,IAAI,cAAc,GAAG;AAAA,QACtC;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;",
   "names": []
 }

package/dist/esm/helpers/isTamaguiComponent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/isTamaguiComponent.tsx"],
-  "sourcesContent": ["import { StaticConfig, StaticConfigParsed } from '../types'\n\nexport function isTamaguiComponent<A extends any>(\n  comp: A,\n  name?: string\n): comp is A & {\n  staticConfig: StaticConfig\n} {\n  const config = comp && (comp['staticConfig'] as StaticConfigParsed | undefined)\n  if (!config || !config.parsed) return false\n  if (name) {\n    return name === config.componentName\n  }\n  return true\n}\n"],
+  "sourcesContent": ["import { StaticConfig, StaticConfigParsed } from '../types'\n\nexport function isTamaguiComponent<A>(\n  comp: A,\n  name?: string\n): comp is A & {\n  staticConfig: StaticConfig\n} {\n  const config = comp && (comp['staticConfig'] as StaticConfigParsed | undefined)\n  if (!config || !config.parsed) return false\n  if (name) {\n    return name === config.componentName\n  }\n  return true\n}\n"],
   "mappings": "AAEO,4BACL,MACA,MAGA;AACA,QAAM,SAAS,QAAS,KAAK;AAC7B,MAAI,CAAC,UAAU,CAAC,OAAO;AAAQ,WAAO;AACtC,MAAI,MAAM;AACR,WAAO,SAAS,OAAO;AAAA,EACzB;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/helpers/isTamaguiElement.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/isTamaguiElement.tsx"],
-  "sourcesContent": ["import React, { isValidElement } from 'react'\n\nimport { isTamaguiComponent } from './isTamaguiComponent'\n\nexport const isTamaguiElement = (child: any, name?: string): child is React.ReactElement => {\n  return isValidElement(child) && isTamaguiComponent(child.type, name)\n}\n"],
-  "mappings": "AAAA;AAEA;AAEO,MAAM,mBAAmB,CAAC,OAAY,SAA+C;AAC1F,SAAO,eAAe,KAAK,KAAK,mBAAmB,MAAM,MAAM,IAAI;AACrE;",
+  "sourcesContent": ["import React, { isValidElement } from 'react'\n\nimport { StaticConfig } from '../types'\nimport { isTamaguiComponent } from './isTamaguiComponent'\n\nexport type TamaguiReactElement = React.ReactElement & {\n  type: {\n    staticConfig: StaticConfig\n  }\n}\n\nexport const isTamaguiElement = (child: any, name?: string): child is TamaguiReactElement => {\n  return isValidElement(child) && isTamaguiComponent(child.type, name)\n}\n"],
+  "mappings": "AAAA;AAGA;AAQO,MAAM,mBAAmB,CAAC,OAAY,SAAgD;AAC3F,SAAO,eAAe,KAAK,KAAK,mBAAmB,MAAM,MAAM,IAAI;AACrE;",
   "names": []
 }

package/dist/esm/helpers/registerCSSVariable.js

@@ -1,15 +1,14 @@
 import { createCSSVariable } from "../createVariable";
 const registerCSSVariable = (v) => {
   tokensValueToVariable.set(v.val, v);
-  const val = `--${createCSSVariable(v.name, false)}:${typeof v.val === "number" ? `${v.val}px` : v.val}`;
-  tokenRules.add(val);
-  return val;
+};
+const variableToCSS = (v) => {
+  return `--${createCSSVariable(v.name, false)}:${typeof v.val === "number" ? `${v.val}px` : v.val}`;
 };
 const tokensValueToVariable = /* @__PURE__ */ new Map();
-const tokenRules = /* @__PURE__ */ new Set();
 export {
   registerCSSVariable,
-  tokenRules,
-  tokensValueToVariable
+  tokensValueToVariable,
+  variableToCSS
 };
 //# sourceMappingURL=registerCSSVariable.js.map

package/dist/esm/helpers/registerCSSVariable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/registerCSSVariable.ts"],
-  "sourcesContent": ["import { Variable, createCSSVariable } from '../createVariable'\n\nexport const registerCSSVariable = (v: Variable) => {\n  tokensValueToVariable.set(v.val, v)\n  const val = `--${createCSSVariable(v.name, false)}:${\n    typeof v.val === 'number' ? `${v.val}px` : v.val\n  }`\n  tokenRules.add(val)\n  return val\n}\n\nexport const tokensValueToVariable = new Map<string, Variable>()\nexport const tokenRules = new Set<string>()\n"],
-  "mappings": "AAAA;AAEO,MAAM,sBAAsB,CAAC,MAAgB;AAClD,wBAAsB,IAAI,EAAE,KAAK,CAAC;AAClC,QAAM,MAAM,KAAK,kBAAkB,EAAE,MAAM,KAAK,KAC9C,OAAO,EAAE,QAAQ,WAAW,GAAG,EAAE,UAAU,EAAE;AAE/C,aAAW,IAAI,GAAG;AAClB,SAAO;AACT;AAEO,MAAM,wBAAwB,oBAAI,IAAsB;AACxD,MAAM,aAAa,oBAAI,IAAY;",
+  "sourcesContent": ["import { Variable, createCSSVariable } from '../createVariable'\n\nexport const registerCSSVariable = (v: Variable) => {\n  tokensValueToVariable.set(v.val, v)\n}\n\nexport const variableToCSS = (v: Variable) => {\n  return `--${createCSSVariable(v.name, false)}:${typeof v.val === 'number' ? `${v.val}px` : v.val}`\n}\n\nexport const tokensValueToVariable = new Map<string, Variable>()\n"],
+  "mappings": "AAAA;AAEO,MAAM,sBAAsB,CAAC,MAAgB;AAClD,wBAAsB,IAAI,EAAE,KAAK,CAAC;AACpC;AAEO,MAAM,gBAAgB,CAAC,MAAgB;AAC5C,SAAO,KAAK,kBAAkB,EAAE,MAAM,KAAK,KAAK,OAAO,EAAE,QAAQ,WAAW,GAAG,EAAE,UAAU,EAAE;AAC/F;AAEO,MAAM,wBAAwB,oBAAI,IAAsB;",
   "names": []
 }

package/dist/esm/hooks/useFeatures.js

@@ -67,8 +67,8 @@ function loadAnimationFeature() {
         getStyle({ isExiting, isEntering, exitVariant, enterVariant } = {}) {
           var _a, _b, _c, _d;
           const style = inStyle || {};
-          const enterStyle = isEntering ? enterVariant && ((_a = staticConfig.variants) == null ? void 0 : _a[enterVariant]["true"]) ? getSubStyle((_b = staticConfig.variants) == null ? void 0 : _b[enterVariant]["true"], staticConfig, theme, props, state, tamaguiConfig) || pseudos.enterStyle : pseudos.enterStyle : null;
-          const exitStyle = isExiting ? exitVariant && ((_c = staticConfig.variants) == null ? void 0 : _c[exitVariant]["true"]) ? getSubStyle((_d = staticConfig.variants) == null ? void 0 : _d[exitVariant]["true"], staticConfig, theme, props, state, tamaguiConfig) || pseudos.exitStyle : pseudos.exitStyle : null;
+          const enterStyle = isEntering ? enterVariant && ((_a = staticConfig.variants) == null ? void 0 : _a[enterVariant]["true"]) ? getSubStyle("", (_b = staticConfig.variants) == null ? void 0 : _b[enterVariant]["true"], staticConfig, theme, props, state, tamaguiConfig) || pseudos.enterStyle : pseudos.enterStyle : null;
+          const exitStyle = isExiting ? exitVariant && ((_c = staticConfig.variants) == null ? void 0 : _c[exitVariant]["true"]) ? getSubStyle("", (_d = staticConfig.variants) == null ? void 0 : _d[exitVariant]["true"], staticConfig, theme, props, state, tamaguiConfig) || pseudos.exitStyle : pseudos.exitStyle : null;
           ensureBaseHasDefaults(style, enterStyle, pseudos.hoverStyle, pseudos.focusStyle, pseudos.pressStyle, pseudos.pressStyle);
           enterStyle && merge(style, enterStyle);
           state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle);

package/dist/esm/hooks/useFeatures.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useFeatures.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { RefObject } from 'react'\nimport { View, ViewStyle } from 'react-native'\n\nimport { getConfig } from '../conf'\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getSubStyle } from '../helpers/getSplitStyles'\nimport {\n  PseudoStyles,\n  SplitStyleState,\n  StaticConfigParsed,\n  TamaguiComponentState,\n  TamaguiInternalConfig,\n  UseAnimationHook,\n  UseAnimationProps,\n} from '../types'\nimport { addMediaQueryListener, mediaState, removeMediaQueryListener } from './useMedia'\n\ntype FeatureDefinition = {\n  isEnabled: (props: any) => boolean\n  Component: any\n}\n\ntype FeatureUtils = {\n  forceUpdate: Function\n  state: SplitStyleState\n  setStateShallow: (next: Partial<TamaguiComponentState>) => void\n  useAnimations?: UseAnimationHook\n  pseudos: PseudoStyles\n  style: ViewStyle | null | undefined\n  staticConfig: StaticConfigParsed\n  theme: any\n  onDidAnimate?: () => void\n  hostRef: RefObject<HTMLElement | View>\n}\n\nconst createDefinition = ({\n  Component,\n  propNames,\n}: {\n  Component: (props: { _utils: FeatureUtils; [key: string]: any }) => void\n  propNames: string[]\n}): FeatureDefinition => ({\n  isEnabled: (props: any) => propNames.some((name) => !!props[name]),\n  Component,\n})\n\nlet featureDefinitions: Record<string, FeatureDefinition> | null = null\nlet tamaguiConfig: TamaguiInternalConfig\n\ntype FeatureKeys = keyof ReturnType<typeof loadFeatures>\n\nexport const useFeatures = (props: any, utils?: FeatureUtils) => {\n  if (!featureDefinitions) {\n    featureDefinitions = loadFeatures()\n  }\n  const elements: JSX.Element[] = []\n  const enabled: { [key in FeatureKeys]?: boolean } = {}\n  for (const name in featureDefinitions) {\n    const { isEnabled, Component } = featureDefinitions[name]\n    if (isEnabled(props) && Component) {\n      enabled[name] = true\n      elements.push(<Component key={name} {...props} _utils={utils} />)\n    }\n  }\n  return {\n    elements,\n    enabled,\n  }\n}\n\nfunction loadFeatures() {\n  return {\n    // loads animations and sets state with the results\n    animation: loadAnimationFeature(),\n\n    // will update the parent whenever media query changes\n    // no need on web, media queries are inserted and run in css\n    mediaQuery: loadMediaQueryFeature(),\n  } as const\n}\n\nfunction loadAnimationFeature() {\n  tamaguiConfig = tamaguiConfig || getConfig()\n\n  return createDefinition({\n    Component: ({ _utils, ...props }) => {\n      const {\n        state,\n        useAnimations,\n        pseudos,\n        style: inStyle,\n        setStateShallow,\n        staticConfig,\n        theme,\n        onDidAnimate,\n      } = _utils\n\n      if (!useAnimations) {\n        console.error('no useAnimations hook provided')\n        return null\n      }\n\n      // we always have .animation set\n      const propsWithAnimation = props as UseAnimationProps\n\n      const res = useAnimations(propsWithAnimation, {\n        state,\n        pseudos,\n        onDidAnimate,\n        staticConfig,\n        getStyle({ isExiting, isEntering, exitVariant, enterVariant } = {}) {\n          // we have to merge such that transforms keys all exist\n          const style = inStyle || {}\n\n          const enterStyle = isEntering\n            ? enterVariant && staticConfig.variants?.[enterVariant]['true']\n              ? getSubStyle(\n                  staticConfig.variants?.[enterVariant]['true'],\n                  staticConfig,\n                  theme,\n                  props,\n                  state,\n                  tamaguiConfig\n                ) || pseudos.enterStyle\n              : null || pseudos.enterStyle\n            : null\n\n          const exitStyle = isExiting\n            ? exitVariant && staticConfig.variants?.[exitVariant]['true']\n              ? getSubStyle(\n                  staticConfig.variants?.[exitVariant]['true'],\n                  staticConfig,\n                  theme,\n                  props,\n                  state,\n                  tamaguiConfig\n                ) || pseudos.exitStyle\n              : null || pseudos.exitStyle\n            : null\n\n          // if you have hoverStyle={{ scale: 1.1 }} and don't have scale set on the base style\n          // no animation will run! this is really confusing. this will look at all variants,\n          // and fill in base styles if they don't exist. eg:\n          // input:\n          //   base: {}\n          //   hoverStyle: { scale: 2 }\n          //   enterStyle: { x: 100 }\n          // output:\n          //   base: { x: 0, scale: 1 }\n          ensureBaseHasDefaults(\n            style,\n            enterStyle,\n            pseudos.hoverStyle,\n            pseudos.focusStyle,\n            pseudos.pressStyle,\n            pseudos.pressStyle\n          )\n\n          enterStyle && merge(style, enterStyle)\n          state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle)\n          state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle)\n          state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle)\n          exitStyle && merge(style, exitStyle)\n\n          return style\n        },\n        //, delay\n      })\n\n      useIsomorphicLayoutEffect(() => {\n        setStateShallow({\n          animation: res,\n        })\n      }, [res])\n\n      return null\n    },\n    propNames: ['animation'],\n  })\n}\n\nconst defaults = {\n  left: 0,\n  right: 0,\n  top: 0,\n  bottom: 0,\n  opacity: 1,\n  translateX: 0,\n  translateY: 0,\n  skew: 0,\n  skewX: 0,\n  skewY: 0,\n  scale: 1,\n  rotate: '0deg',\n  rotateY: '0deg',\n  rotateX: '0deg',\n}\n\nfunction ensureBaseHasDefaults(base: ViewStyle, ...pseudos: (ViewStyle | null | undefined)[]) {\n  for (const pseudo of pseudos) {\n    if (!pseudo) continue\n    for (const key in pseudo) {\n      const val = pseudo[key]\n      if (key === 'transform') {\n        for (const t of val) {\n          const tkey = Object.keys(t)[0]\n          const defaultVal = defaults[tkey]\n          const tDefaultVal = { [tkey]: defaultVal } as any\n          if (!base.transform) {\n            base.transform = [tDefaultVal]\n          } else {\n            if (!base.transform.find((x) => x[tkey])) {\n              base.transform.push(tDefaultVal)\n            }\n          }\n        }\n      } else {\n        if (!(key in base)) {\n          base[key] = defaults[key]\n        }\n      }\n    }\n  }\n}\n\nfunction merge(base: ViewStyle, next: ViewStyle) {\n  if (!next.transform || !base.transform) {\n    Object.assign(base, next)\n    return\n  }\n  const { transform, ...rest } = next\n  Object.assign(base, rest)\n  for (const t of transform) {\n    const key = Object.keys(t)[0]\n    const existing = base.transform.find((x) => key in x)\n    if (existing) {\n      existing[key] = t[key]\n    } else {\n      base.transform.push(t)\n    }\n  }\n}\n\nfunction loadMediaQueryFeature() {\n  const mediaPropNames = Object.keys(mediaState)\n\n  return createDefinition({\n    Component: (props: any) => {\n      const mediaKeys = mediaPropNames.filter((x) => x in props)\n\n      useIsomorphicLayoutEffect(() => {\n        for (const key of mediaKeys) {\n          addMediaQueryListener(key, props._utils.forceUpdate)\n        }\n        return () => {\n          for (const key of mediaKeys) {\n            removeMediaQueryListener(key, props._utils.forceUpdate)\n          }\n        }\n      }, [mediaKeys.join(',')])\n\n      return null\n    },\n    propNames: mediaPropNames,\n  })\n}\n\n// TODO\n// measureLayout: createDefinition({\n//   Component: (props) => {\n//     console.log('measure', props)\n//     return null\n//   },\n//   propNames: ['onLayout'],\n// }),\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from 'react'\nimport { RefObject } from 'react'\nimport { View, ViewStyle } from 'react-native'\n\nimport { getConfig } from '../conf'\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getSubStyle } from '../helpers/getSplitStyles'\nimport {\n  PseudoStyles,\n  SplitStyleState,\n  StaticConfigParsed,\n  TamaguiComponentState,\n  TamaguiInternalConfig,\n  UseAnimationHook,\n  UseAnimationProps,\n} from '../types'\nimport { addMediaQueryListener, mediaState, removeMediaQueryListener } from './useMedia'\n\ntype FeatureDefinition = {\n  isEnabled: (props: any) => boolean\n  Component: any\n}\n\ntype FeatureUtils = {\n  forceUpdate: Function\n  state: SplitStyleState\n  setStateShallow: (next: Partial<TamaguiComponentState>) => void\n  useAnimations?: UseAnimationHook\n  pseudos: PseudoStyles\n  style: ViewStyle | null | undefined\n  staticConfig: StaticConfigParsed\n  theme: any\n  onDidAnimate?: () => void\n  hostRef: RefObject<HTMLElement | View>\n}\n\nconst createDefinition = ({\n  Component,\n  propNames,\n}: {\n  Component: (props: { _utils: FeatureUtils; [key: string]: any }) => void\n  propNames: string[]\n}): FeatureDefinition => ({\n  isEnabled: (props: any) => propNames.some((name) => !!props[name]),\n  Component,\n})\n\nlet featureDefinitions: Record<string, FeatureDefinition> | null = null\nlet tamaguiConfig: TamaguiInternalConfig\n\ntype FeatureKeys = keyof ReturnType<typeof loadFeatures>\n\nexport const useFeatures = (props: any, utils?: FeatureUtils) => {\n  if (!featureDefinitions) {\n    featureDefinitions = loadFeatures()\n  }\n  const elements: JSX.Element[] = []\n  const enabled: { [key in FeatureKeys]?: boolean } = {}\n  for (const name in featureDefinitions) {\n    const { isEnabled, Component } = featureDefinitions[name]\n    if (isEnabled(props) && Component) {\n      enabled[name] = true\n      elements.push(<Component key={name} {...props} _utils={utils} />)\n    }\n  }\n  return {\n    elements,\n    enabled,\n  }\n}\n\nfunction loadFeatures() {\n  return {\n    // loads animations and sets state with the results\n    animation: loadAnimationFeature(),\n\n    // will update the parent whenever media query changes\n    // no need on web, media queries are inserted and run in css\n    mediaQuery: loadMediaQueryFeature(),\n  } as const\n}\n\nfunction loadAnimationFeature() {\n  tamaguiConfig = tamaguiConfig || getConfig()\n\n  return createDefinition({\n    Component: ({ _utils, ...props }) => {\n      const {\n        state,\n        useAnimations,\n        pseudos,\n        style: inStyle,\n        setStateShallow,\n        staticConfig,\n        theme,\n        onDidAnimate,\n      } = _utils\n\n      if (!useAnimations) {\n        console.error('no useAnimations hook provided')\n        return null\n      }\n\n      // we always have .animation set\n      const propsWithAnimation = props as UseAnimationProps\n\n      const res = useAnimations(propsWithAnimation, {\n        state,\n        pseudos,\n        onDidAnimate,\n        staticConfig,\n        getStyle({ isExiting, isEntering, exitVariant, enterVariant } = {}) {\n          // we have to merge such that transforms keys all exist\n          const style = inStyle || {}\n\n          const enterStyle = isEntering\n            ? enterVariant && staticConfig.variants?.[enterVariant]['true']\n              ? getSubStyle(\n                  '',\n                  staticConfig.variants?.[enterVariant]['true'],\n                  staticConfig,\n                  theme,\n                  props,\n                  state,\n                  tamaguiConfig\n                ) || pseudos.enterStyle\n              : null || pseudos.enterStyle\n            : null\n\n          const exitStyle = isExiting\n            ? exitVariant && staticConfig.variants?.[exitVariant]['true']\n              ? getSubStyle(\n                  '',\n                  staticConfig.variants?.[exitVariant]['true'],\n                  staticConfig,\n                  theme,\n                  props,\n                  state,\n                  tamaguiConfig\n                ) || pseudos.exitStyle\n              : null || pseudos.exitStyle\n            : null\n\n          // if you have hoverStyle={{ scale: 1.1 }} and don't have scale set on the base style\n          // no animation will run! this is really confusing. this will look at all variants,\n          // and fill in base styles if they don't exist. eg:\n          // input:\n          //   base: {}\n          //   hoverStyle: { scale: 2 }\n          //   enterStyle: { x: 100 }\n          // output:\n          //   base: { x: 0, scale: 1 }\n          ensureBaseHasDefaults(\n            style,\n            enterStyle,\n            pseudos.hoverStyle,\n            pseudos.focusStyle,\n            pseudos.pressStyle,\n            pseudos.pressStyle\n          )\n\n          enterStyle && merge(style, enterStyle)\n          state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle)\n          state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle)\n          state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle)\n          exitStyle && merge(style, exitStyle)\n\n          return style\n        },\n        //, delay\n      })\n\n      useIsomorphicLayoutEffect(() => {\n        setStateShallow({\n          animation: res,\n        })\n      }, [res])\n\n      return null\n    },\n    propNames: ['animation'],\n  })\n}\n\nconst defaults = {\n  left: 0,\n  right: 0,\n  top: 0,\n  bottom: 0,\n  opacity: 1,\n  translateX: 0,\n  translateY: 0,\n  skew: 0,\n  skewX: 0,\n  skewY: 0,\n  scale: 1,\n  rotate: '0deg',\n  rotateY: '0deg',\n  rotateX: '0deg',\n}\n\nfunction ensureBaseHasDefaults(base: ViewStyle, ...pseudos: (ViewStyle | null | undefined)[]) {\n  for (const pseudo of pseudos) {\n    if (!pseudo) continue\n    for (const key in pseudo) {\n      const val = pseudo[key]\n      if (key === 'transform') {\n        for (const t of val) {\n          const tkey = Object.keys(t)[0]\n          const defaultVal = defaults[tkey]\n          const tDefaultVal = { [tkey]: defaultVal } as any\n          if (!base.transform) {\n            base.transform = [tDefaultVal]\n          } else {\n            if (!base.transform.find((x) => x[tkey])) {\n              base.transform.push(tDefaultVal)\n            }\n          }\n        }\n      } else {\n        if (!(key in base)) {\n          base[key] = defaults[key]\n        }\n      }\n    }\n  }\n}\n\nfunction merge(base: ViewStyle, next: ViewStyle) {\n  if (!next.transform || !base.transform) {\n    Object.assign(base, next)\n    return\n  }\n  const { transform, ...rest } = next\n  Object.assign(base, rest)\n  for (const t of transform) {\n    const key = Object.keys(t)[0]\n    const existing = base.transform.find((x) => key in x)\n    if (existing) {\n      existing[key] = t[key]\n    } else {\n      base.transform.push(t)\n    }\n  }\n}\n\nfunction loadMediaQueryFeature() {\n  const mediaPropNames = Object.keys(mediaState)\n\n  return createDefinition({\n    Component: (props: any) => {\n      const mediaKeys = mediaPropNames.filter((x) => x in props)\n\n      useIsomorphicLayoutEffect(() => {\n        for (const key of mediaKeys) {\n          addMediaQueryListener(key, props._utils.forceUpdate)\n        }\n        return () => {\n          for (const key of mediaKeys) {\n            removeMediaQueryListener(key, props._utils.forceUpdate)\n          }\n        }\n      }, [mediaKeys.join(',')])\n\n      return null\n    },\n    propNames: mediaPropNames,\n  })\n}\n\n// TODO\n// measureLayout: createDefinition({\n//   Component: (props) => {\n//     console.log('measure', props)\n//     return null\n//   },\n//   propNames: ['onLayout'],\n// }),\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/hooks/useTheme.js

@@ -11,7 +11,7 @@ const useTheme = (themeName, componentName, props, forceUpdate) => {
   const { name, theme, themes, themeManager, className } = useChangeThemeEffect(themeName, componentName, props, forceUpdate);
   if (process.env.NODE_ENV === "development") {
     if ((props == null ? void 0 : props.debug) === "verbose") {
-      console.log("  \xBB useTheme", { themeName, componentName, name, className });
+      console.log("  \u{1F539} useTheme", { themeName, componentName, name, className });
     }
   }
   const state = useRef();
@@ -70,18 +70,13 @@ const useTheme = (themeName, componentName, props, forceUpdate) => {
         if (key[0] === "$") {
           key = key.slice(1);
         }
-        const val = themeManager.getValue(key);
-        if (val) {
-          if (state.current.isRendering) {
-            state.current.keys.add(key);
-            if (process.env.NODE_ENV === "development") {
-              if ((props == null ? void 0 : props["debug"]) === "verbose") {
-                console.log("  \xBB tracking theme key", key);
-              }
-            }
+        if (state.current.isRendering && !state.current.keys.has(key)) {
+          state.current.keys.add(key);
+          if (process.env.NODE_ENV === "development" && (props == null ? void 0 : props["debug"]) === "verbose") {
+            console.log("  \u{1F538} tracking theme", key);
           }
-          return val;
         }
+        return themeManager.getValue(key);
       }
     });
   }, [name, theme, className]);

package/dist/esm/hooks/useTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useTheme.tsx"],
-  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../conf'\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport { ThemeContext } from '../ThemeContext'\nimport { GetNextThemeProps, ThemeManager, ThemeManagerContext, emptyManager } from '../ThemeManager'\nimport { ThemeName, ThemeObject } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useConstant } from './useConstant'\n\nexport type ThemeProps = {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  reset?: boolean\n  debug?: boolean | 'verbose'\n}\n\ntype UseThemeState = {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useTheme = (\n  themeName?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdate?: any\n): ThemeObject => {\n  const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.debug === 'verbose') {\n      console.log('  \u00BB useTheme', { themeName, componentName, name, className })\n    }\n  }\n\n  const state = useRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = themeManager?.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      themeManager?.track(st.uuid, st.keys)\n    }\n  })\n\n  return useMemo(() => {\n    if (!theme) {\n      if (process.env.NODE_ENV === 'development') {\n        console.warn('No theme', { themeName, theme, componentName, className })\n      }\n      return themes[getConfig().defaultTheme || 'light' || Object.keys(themes)[0]]\n    }\n    return new Proxy(theme, {\n      has(_, key) {\n        if (typeof key === 'string') {\n          if (key[0] === '$') {\n            key = key.slice(1)\n          }\n        }\n        return Reflect.has(theme, key)\n      },\n      get(_, key) {\n        if (key === GetThemeUnwrapped) {\n          return theme\n        }\n        if (key === GetThemeManager) {\n          return themeManager\n        }\n        if (key === 'name') {\n          return name\n        }\n        if (key === 'className') {\n          return className\n        }\n        if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {\n          return Reflect.get(_, key)\n        }\n        if (!themeManager) {\n          console.error('No themeManager')\n          return\n        }\n        // auto convert variables to plain\n        if (key[0] === '$') {\n          key = key.slice(1)\n        }\n        const val = themeManager.getValue(key)\n        if (val) {\n          if (state.current.isRendering) {\n            state.current.keys.add(key)\n            if (process.env.NODE_ENV === 'development') {\n              if (props?.['debug'] === 'verbose') {\n                console.log('  \u00BB tracking theme key', key)\n              }\n            }\n          }\n          return val\n        }\n      },\n    })\n  }, [name, theme, className])\n}\n\nconst GetThemeManager = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined => {\n  if (!theme) return\n  return theme[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent?.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    return parent.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [parent])\n\n  return name\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdateProp?: any\n) => {\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const { themes } = useContext(ThemeContext)!\n  const reset = props?.reset || false\n  const getThemeProps: GetNextThemeProps = { name, componentName, themes, reset }\n  const next = parentManager.getNextTheme(getThemeProps, debug)\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n  const themeManager = useConstant<ThemeManager | null>(() => {\n    if (!next) return null\n    return new ThemeManager(next.name, next.theme, parentManager, reset)\n  })\n\n  if (!isWeb || typeof document !== 'undefined') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      if (next?.name) {\n        themeManager.update(next)\n      }\n      return parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme(getThemeProps, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          forceUpdate()\n        }\n      })\n    }, [themes, name, componentName, debug, next?.name])\n  }\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    themes,\n    themeManager,\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../conf'\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport { ThemeContext } from '../ThemeContext'\nimport { GetNextThemeProps, ThemeManager, ThemeManagerContext, emptyManager } from '../ThemeManager'\nimport { ThemeName, ThemeObject } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useConstant } from './useConstant'\n\nexport type ThemeProps = {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  reset?: boolean\n  debug?: boolean | 'verbose'\n}\n\ntype UseThemeState = {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useTheme = (\n  themeName?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdate?: any\n): ThemeObject => {\n  const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.debug === 'verbose') {\n      console.log('  \uD83D\uDD39 useTheme', { themeName, componentName, name, className })\n    }\n  }\n\n  const state = useRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = themeManager?.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      themeManager?.track(st.uuid, st.keys)\n    }\n  })\n\n  return useMemo(() => {\n    if (!theme) {\n      if (process.env.NODE_ENV === 'development') {\n        console.warn('No theme', { themeName, theme, componentName, className })\n      }\n      return themes[getConfig().defaultTheme || 'light' || Object.keys(themes)[0]]\n    }\n    return new Proxy(theme, {\n      has(_, key) {\n        if (typeof key === 'string') {\n          if (key[0] === '$') {\n            key = key.slice(1)\n          }\n        }\n        return Reflect.has(theme, key)\n      },\n      get(_, key) {\n        if (key === GetThemeUnwrapped) {\n          return theme\n        }\n        if (key === GetThemeManager) {\n          return themeManager\n        }\n        if (key === 'name') {\n          return name\n        }\n        if (key === 'className') {\n          return className\n        }\n        if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {\n          return Reflect.get(_, key)\n        }\n        if (!themeManager) {\n          console.error('No themeManager')\n          return\n        }\n        // auto convert variables to plain\n        if (key[0] === '$') {\n          key = key.slice(1)\n        }\n        if (state.current.isRendering && !state.current.keys.has(key)) {\n          state.current.keys.add(key)\n          if (process.env.NODE_ENV === 'development' && props?.['debug'] === 'verbose') {\n            console.log('  \uD83D\uDD38 tracking theme', key)\n          }\n        }\n        return themeManager.getValue(key)\n      },\n    })\n  }, [name, theme, className])\n}\n\nconst GetThemeManager = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined => {\n  if (!theme) return\n  return theme[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent?.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    return parent.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [parent])\n\n  return name\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdateProp?: any\n) => {\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const { themes } = useContext(ThemeContext)!\n  const reset = props?.reset || false\n  const getThemeProps: GetNextThemeProps = { name, componentName, themes, reset }\n  const next = parentManager.getNextTheme(getThemeProps, debug)\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n  const themeManager = useConstant<ThemeManager | null>(() => {\n    if (!next) return null\n    return new ThemeManager(next.name, next.theme, parentManager, reset)\n  })\n\n  if (!isWeb || typeof document !== 'undefined') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      if (next?.name) {\n        themeManager.update(next)\n      }\n      return parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme(getThemeProps, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          forceUpdate()\n        }\n      })\n    }, [themes, name, componentName, debug, next?.name])\n  }\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    themes,\n    themeManager,\n  }\n}\n"],
+  "mappings": "AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AAkBO,MAAM,WAAW,CACtB,WACA,eACA,OACA,gBACgB;AAChB,QAAM,EAAE,MAAM,OAAO,QAAQ,cAAc,cAAc,qBACvD,WACA,eACA,OACA,WACF;AAEA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,gCAAO,WAAU,WAAW;AAC9B,cAAQ,IAAI,wBAAiB,EAAE,WAAW,eAAe,MAAM,UAAU,CAAC;AAAA,IAC5E;AAAA,EACF;AAEA,QAAM,QAAQ,OAAO;AACrB,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,MAAM,CAAC;AAAA,MACP,MAAM,oBAAI,IAAI;AAAA,MACd,aAAa;AAAA,IACf;AAAA,EACF;AACA,QAAM,QAAQ,cAAc;AAG5B,4BAA0B,MAAM;AAC9B,UAAM,KAAK,MAAM;AACjB,OAAG,cAAc;AACjB,UAAM,MAAM,6CAAc,KAAK,IAAI,GAAG;AACtC,QAAI,CAAC,OAAO,CAAC,aAAa,GAAG,MAAM,GAAG,GAAG;AACvC,mDAAc,MAAM,GAAG,MAAM,GAAG;AAAA,IAClC;AAAA,EACF,CAAC;AAED,SAAO,QAAQ,MAAM;AACnB,QAAI,CAAC,OAAO;AACV,UAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,gBAAQ,KAAK,YAAY,EAAE,WAAW,OAAO,eAAe,UAAU,CAAC;AAAA,MACzE;AACA,aAAO,OAAO,UAAU,EAAE,gBAAgB;AAAA,IAC5C;AACA,WAAO,IAAI,MAAM,OAAO;AAAA,MACtB,IAAI,GAAG,KAAK;AACV,YAAI,OAAO,QAAQ,UAAU;AAC3B,cAAI,IAAI,OAAO,KAAK;AAClB,kBAAM,IAAI,MAAM,CAAC;AAAA,UACnB;AAAA,QACF;AACA,eAAO,QAAQ,IAAI,OAAO,GAAG;AAAA,MAC/B;AAAA,MACA,IAAI,GAAG,KAAK;AACV,YAAI,QAAQ,mBAAmB;AAC7B,iBAAO;AAAA,QACT;AACA,YAAI,QAAQ,iBAAiB;AAC3B,iBAAO;AAAA,QACT;AACA,YAAI,QAAQ,QAAQ;AAClB,iBAAO;AAAA,QACT;AACA,YAAI,QAAQ,aAAa;AACvB,iBAAO;AAAA,QACT;AACA,YAAI,CAAC,QAAQ,QAAQ,eAAe,OAAO,QAAQ,YAAY,QAAQ,WAAW;AAChF,iBAAO,QAAQ,IAAI,GAAG,GAAG;AAAA,QAC3B;AACA,YAAI,CAAC,cAAc;AACjB,kBAAQ,MAAM,iBAAiB;AAC/B;AAAA,QACF;AAEA,YAAI,IAAI,OAAO,KAAK;AAClB,gBAAM,IAAI,MAAM,CAAC;AAAA,QACnB;AACA,YAAI,MAAM,QAAQ,eAAe,CAAC,MAAM,QAAQ,KAAK,IAAI,GAAG,GAAG;AAC7D,gBAAM,QAAQ,KAAK,IAAI,GAAG;AAC1B,cAAI,QAAQ,IAAI,aAAa,iBAAiB,gCAAQ,cAAa,WAAW;AAC5E,oBAAQ,IAAI,8BAAuB,GAAG;AAAA,UACxC;AAAA,QACF;AACA,eAAO,aAAa,SAAS,GAAG;AAAA,MAClC;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,OAAO,SAAS,CAAC;AAC7B;AAEA,MAAM,kBAAkB,OAAO;AAExB,MAAM,kBAAkB,CAAC,UAAyC;AACvE,MAAI,CAAC;AAAO;AACZ,SAAO,MAAM;AACf;AAEO,MAAM,eAAe,CAAC,SAA6B;AACxD,QAAM,SAAS,WAAW,mBAAmB;AAC7C,QAAM,CAAC,MAAM,WAAW,SAAS,kCAAQ,SAAQ,EAAE;AAEnD,4BAA0B,MAAM;AAC9B,QAAI,CAAC;AAAQ;AACb,WAAO,OAAO,cAAc,CAAC,MAAM,YAAY;AAC7C,YAAM,QAAO,8BAAM,UAAS,QAAQ,cAAc,OAAO;AACzD,UAAI,CAAC;AAAM;AACX,cAAQ,KAAI;AAAA,IACd,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO;AACT;AAEO,MAAM,sBAAsB,MAAM;AA9IzC;AA+IE,SAAO,iBAAW,YAAY,MAAvB,mBAA0B;AACnC;AAEO,MAAM,uBAAuB,CAClC,MACA,eACA,OACA,oBACG;AACH,QAAM,QAAQ,SAAS,MAAM;AAC7B,QAAM,gBAAgB,WAAW,mBAAmB,KAAK;AACzD,QAAM,EAAE,WAAW,WAAW,YAAY;AAC1C,QAAM,QAAQ,gCAAO,UAAS;AAC9B,QAAM,gBAAmC,EAAE,MAAM,eAAe,QAAQ,MAAM;AAC9E,QAAM,OAAO,cAAc,aAAa,eAAe,KAAK;AAE5D,QAAM,cAAc,mBAAmB,eAAe;AACtD,QAAM,eAAe,YAAiC,MAAM;AAC1D,QAAI,CAAC;AAAM,aAAO;AAClB,WAAO,IAAI,aAAa,KAAK,MAAM,KAAK,OAAO,eAAe,KAAK;AAAA,EACrE,CAAC;AAED,MAAI,CAAC,SAAS,OAAO,aAAa,aAAa;AAE7C,oBAAgB,MAAM;AACpB,UAAI,CAAC;AAAc;AACnB,UAAI,6BAAM,MAAM;AACd,qBAAa,OAAO,IAAI;AAAA,MAC1B;AACA,aAAO,cAAc,cAAc,MAAM;AACvC,cAAM,QAAO,cAAc,aAAa,eAAe,KAAK;AAC5D,YAAI,CAAC;AAAM;AACX,YAAI,aAAa,OAAO,KAAI,GAAG;AAC7B,sBAAY;AAAA,QACd;AAAA,MACF,CAAC;AAAA,IACH,GAAG,CAAC,QAAQ,MAAM,eAAe,OAAO,6BAAM,IAAI,CAAC;AAAA,EACrD;AAEA,SAAO;AAAA,IACL,GAAI,iBAAiB;AAAA,MACnB,MAAM,cAAc;AAAA,MACpB,OAAO,cAAc;AAAA,IACvB;AAAA,IACA,GAAG;AAAA,IACH;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/index.js

@@ -51,6 +51,7 @@ export * from "./views/Theme";
 export * from "./views/ThemeInverse";
 export * from "./views/ThemeProvider";
 export * from "./views/ThemeReset";
+export * from "./views/FontLanguage";
 export * from "@tamagui/use-force-update";
 export * from "@tamagui/use-event";
 export * from "@tamagui/helpers";

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './Tamagui'\nexport * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createVariable'\nexport * from './createVariables'\nexport * from './insertFont'\nexport * from './styled'\nexport * from './types'\n// for type portability\nexport type { RNWTextProps, RNWViewProps } from './types-rnw'\nexport { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './conf'\n\nexport * from './constants/constants'\nexport * from './constants/platform'\nexport { createDOMProps } from '@tamagui/rnw'\n\nexport * from './helpers/calc'\nexport * from './helpers/createShallowUpdate'\nexport * from './helpers/getStackSize'\nexport * from './helpers/getVariantExtras'\nexport * from './helpers/getExpandedShorthands'\nexport * from './helpers/getSize'\nexport * from './helpers/getSplitStyles'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/pseudoDescriptors'\nexport * from './helpers/mergeProps'\nexport * from './helpers/expandStyles'\nexport * from './helpers/getFont'\nexport * from './helpers/isObj'\nexport * from './helpers/isTamaguiElement'\nexport * from './helpers/isTamaguiComponent'\nexport * from './helpers/matchMedia'\nexport * from './helpers/startTransition'\nexport * from './helpers/themeable'\nexport * from './helpers/withStaticProperties'\n\nexport * from './contexts/ButtonInsideButtonContext'\n\nexport * from './hooks/useConstant'\nexport * from './hooks/useId'\nexport * from './hooks/useIsMounted'\nexport * from './hooks/useIsTouchDevice'\nexport * from './hooks/useMedia'\nexport * from './hooks/usePressable'\nexport * from './hooks/useTheme'\nexport * from './hooks/useIsSSR'\nexport * from './hooks/useUnmountEffect'\n\nexport * from './views/Slot'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport { TextAncestorProvider, TextAncestorContext } from './views/TextAncestorContext'\nexport * from './views/Theme'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/ThemeReset'\n\nexport * from '@tamagui/use-force-update'\nexport * from '@tamagui/use-event'\nexport * from '@tamagui/helpers'\n"],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;",
+  "sourcesContent": ["export * from './Tamagui'\nexport * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createVariable'\nexport * from './createVariables'\nexport * from './insertFont'\nexport * from './styled'\nexport * from './types'\n// for type portability\nexport type { RNWTextProps, RNWViewProps } from './types-rnw'\nexport { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './conf'\n\nexport * from './constants/constants'\nexport * from './constants/platform'\nexport { createDOMProps } from '@tamagui/rnw'\n\nexport * from './helpers/calc'\nexport * from './helpers/createShallowUpdate'\nexport * from './helpers/getStackSize'\nexport * from './helpers/getVariantExtras'\nexport * from './helpers/getExpandedShorthands'\nexport * from './helpers/getSize'\nexport * from './helpers/getSplitStyles'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/pseudoDescriptors'\nexport * from './helpers/mergeProps'\nexport * from './helpers/expandStyles'\nexport * from './helpers/getFont'\nexport * from './helpers/isObj'\nexport * from './helpers/isTamaguiElement'\nexport * from './helpers/isTamaguiComponent'\nexport * from './helpers/matchMedia'\nexport * from './helpers/startTransition'\nexport * from './helpers/themeable'\nexport * from './helpers/withStaticProperties'\n\nexport * from './contexts/ButtonInsideButtonContext'\n\nexport * from './hooks/useConstant'\nexport * from './hooks/useId'\nexport * from './hooks/useIsMounted'\nexport * from './hooks/useIsTouchDevice'\nexport * from './hooks/useMedia'\nexport * from './hooks/usePressable'\nexport * from './hooks/useTheme'\nexport * from './hooks/useIsSSR'\nexport * from './hooks/useUnmountEffect'\n\nexport * from './views/Slot'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport { TextAncestorProvider, TextAncestorContext } from './views/TextAncestorContext'\nexport * from './views/Theme'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/ThemeReset'\nexport * from './views/FontLanguage'\n\nexport * from '@tamagui/use-force-update'\nexport * from '@tamagui/use-event'\nexport * from '@tamagui/helpers'\n"],
+  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;",
   "names": []
 }

package/dist/esm/insertFont.js

@@ -1,15 +1,15 @@
 import { setConfigFont } from "./conf";
 import { createFont } from "./createFont";
 import { createVariables } from "./createVariables";
-import { registerCSSVariable } from "./helpers/registerCSSVariable";
+import { registerCSSVariable, variableToCSS } from "./helpers/registerCSSVariable";
 function insertFont(name, fontIn) {
   const font = createFont(fontIn);
   const tokened = createVariables(font, name);
   const parsed = parseFont(tokened);
   if (process.env.TAMAGUI_TARGET === "web" && typeof document !== "undefined") {
-    const css = registerFontVariables(parsed, true);
+    const css = registerFontVariables(parsed);
     const style = document.createElement("style");
-    style.innerText = `:root {${css}}`;
+    style.innerText = `:root {${css.join(";")}}`;
     style.setAttribute("data-tamagui-font", name);
     document.head.appendChild(style);
   }
@@ -36,21 +36,21 @@ function parseFont(definition) {
   }
   return parsed;
 }
-function registerFontVariables(parsedFont, collect = false) {
-  let vals = "";
+function registerFontVariables(parsedFont) {
+  const vals = [];
   for (const fkey in parsedFont) {
     if (fkey === "family") {
-      const val = registerCSSVariable(parsedFont[fkey]);
-      if (collect)
-        vals += val + ";";
+      const val = parsedFont[fkey];
+      registerCSSVariable(val);
+      vals.push(variableToCSS(val));
     } else {
       for (const fskey in parsedFont[fkey]) {
         const fval = parsedFont[fkey][fskey];
         if (typeof fval === "string") {
         } else {
-          const val = registerCSSVariable(parsedFont[fkey][fskey]);
-          if (collect)
-            vals += val + ";";
+          const val = parsedFont[fkey][fskey];
+          registerCSSVariable(val);
+          vals.push(variableToCSS(val));
         }
       }
     }

package/dist/esm/insertFont.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/insertFont.ts"],
-  "sourcesContent": ["import { setConfigFont } from './conf'\nimport { createFont } from './createFont'\nimport { Variable } from './createVariable'\nimport { DeepVariableObject, createVariables } from './createVariables'\nimport { registerCSSVariable } from './helpers/registerCSSVariable'\nimport { GenericFont } from './types'\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 css = registerFontVariables(parsed, true)\n    const style = document.createElement('style')\n    style.innerText = `:root {${css}}`\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, collect = false) {\n  let vals = ''\n  for (const fkey in parsedFont) {\n    if (fkey === 'family') {\n      const val = registerCSSVariable(parsedFont[fkey])\n      if (collect) vals += 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 = registerCSSVariable(parsedFont[fkey][fskey])\n          if (collect) vals += val + ';'\n        }\n      }\n    }\n  }\n  return vals\n}\n"],
-  "mappings": "AAAA;AACA;AAEA;AACA;AAGO,oBAA2C,MAAc,QAAkC;AAChG,QAAM,OAAO,WAAW,MAAM;AAC9B,QAAM,UAAU,gBAAgB,MAAM,IAAI;AAC1C,QAAM,SAAS,UAAU,OAAO;AAChC,MAAI,QAAQ,IAAI,mBAAmB,SAAS,OAAO,aAAa,aAAa;AAC3E,UAAM,MAAM,sBAAsB,QAAQ,IAAI;AAC9C,UAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,UAAM,YAAY,UAAU;AAC5B,UAAM,aAAa,qBAAqB,IAAI;AAC5C,aAAS,KAAK,YAAY,KAAK;AAAA,EACjC;AACA,gBAAc,MAAM,SAAS,MAAM;AACnC,SAAO;AACT;AAEO,mBAA0C,YAAsC;AAtBvF;AAuBE,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,UAAU,OAAO;AACtE,MAAI,OAAO;AACX,aAAW,QAAQ,YAAY;AAC7B,QAAI,SAAS,UAAU;AACrB,YAAM,MAAM,oBAAoB,WAAW,KAAK;AAChD,UAAI;AAAS,gBAAQ,MAAM;AAAA,IAC7B,OAAO;AACL,iBAAW,SAAS,WAAW,OAAO;AACpC,cAAM,OAAO,WAAW,MAAM;AAC9B,YAAI,OAAO,SAAS,UAAU;AAAA,QAE9B,OAAO;AACL,gBAAM,MAAM,oBAAoB,WAAW,MAAM,MAAM;AACvD,cAAI;AAAS,oBAAQ,MAAM;AAAA,QAC7B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
+  "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 css = registerFontVariables(parsed)\n    const style = document.createElement('style')\n    style.innerText = `:root {${css.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 vals: string[] = []\n  for (const fkey in parsedFont) {\n    if (fkey === 'family') {\n      const val = parsedFont[fkey]\n      registerCSSVariable(val)\n      vals.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]\n          registerCSSVariable(val)\n          vals.push(variableToCSS(val))\n        }\n      }\n    }\n  }\n  return vals\n}\n"],
+  "mappings": "AAAA;AACA;AAEA;AACA;AAMO,oBAA2C,MAAc,QAAkC;AAChG,QAAM,OAAO,WAAW,MAAM;AAC9B,QAAM,UAAU,gBAAgB,MAAM,IAAI;AAC1C,QAAM,SAAS,UAAU,OAAO;AAChC,MAAI,QAAQ,IAAI,mBAAmB,SAAS,OAAO,aAAa,aAAa;AAC3E,UAAM,MAAM,sBAAsB,MAAM;AACxC,UAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,UAAM,YAAY,UAAU,IAAI,KAAK,GAAG;AACxC,UAAM,aAAa,qBAAqB,IAAI;AAC5C,aAAS,KAAK,YAAY,KAAK;AAAA,EACjC;AACA,gBAAc,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,OAAiB,CAAC;AACxB,aAAW,QAAQ,YAAY;AAC7B,QAAI,SAAS,UAAU;AACrB,YAAM,MAAM,WAAW;AACvB,0BAAoB,GAAG;AACvB,WAAK,KAAK,cAAc,GAAG,CAAC;AAAA,IAC9B,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,8BAAoB,GAAG;AACvB,eAAK,KAAK,cAAc,GAAG,CAAC;AAAA,QAC9B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/styled.js

@@ -3,15 +3,15 @@ import { createComponent } from "./createComponent";
 import { RNComponents } from "./helpers/RNComponents";
 function styled(Component, options, staticExtractionOptions) {
   const staticConfigProps = (() => {
-    var _a;
+    const parentStaticConfig = "staticConfig" in Component ? Component.staticConfig : null;
     if (options) {
       const { variants, name, defaultVariants, ...defaultProps } = options;
       if (defaultVariants) {
         Object.assign(defaultProps, defaultVariants);
       }
-      const isReactNativeWeb = "staticConfig" in Component ? Component.staticConfig.isReactNativeWeb : RNComponents.has(Component);
-      const reactNativeWebComponent = isReactNativeWeb ? ((_a = Component["staticConfig"]) == null ? void 0 : _a.reactNativeWebComponent) || Component : null;
-      const isTamagui = !isReactNativeWeb && "staticConfig" in Component;
+      const isReactNativeWeb = (parentStaticConfig == null ? void 0 : parentStaticConfig.isReactNativeWeb) || RNComponents.has(Component);
+      const reactNativeWebComponent = isReactNativeWeb ? (parentStaticConfig == null ? void 0 : parentStaticConfig.reactNativeWebComponent) || Component : null;
+      const isTamagui = !isReactNativeWeb && !!parentStaticConfig;
       const Comp = reactNativeWebComponent || Component;
       const isImage = !!(defaultProps.isImage || (!isTamagui ? Comp === Image : false));
       const isInput = !!(defaultProps.isInput || (!isTamagui ? Comp === TextInput : false));

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx"],
-  "sourcesContent": ["import { Image, Text, TextInput } from 'react-native'\n\nimport { createComponent } from './createComponent'\nimport { RNComponents } from './helpers/RNComponents'\nimport {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> = GetProps<ParentComponent> & {\n  name?: string\n  variants?: VariantDefinitions<ParentComponent> | undefined\n  defaultVariants?: { [key: string]: any }\n}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  Component: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  const staticConfigProps = (() => {\n    if (options) {\n      const { variants, name, defaultVariants, ...defaultProps } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n      const isReactNativeWeb =\n        'staticConfig' in Component\n          ? Component.staticConfig.isReactNativeWeb\n          : RNComponents.has(Component)\n      const reactNativeWebComponent = isReactNativeWeb\n        ? Component['staticConfig']?.reactNativeWebComponent || Component\n        : null\n      const isTamagui = !isReactNativeWeb && 'staticConfig' in Component\n      const Comp = reactNativeWebComponent || (Component as any)\n      const isImage = !!(defaultProps.isImage || (!isTamagui ? Comp === Image : false))\n      const isInput = !!(defaultProps.isInput || (!isTamagui ? Comp === TextInput : false))\n      const isText = !!(defaultProps.isText || (!isTamagui ? isInput || Comp === Text : false))\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        isTamagui,\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name,\n        isReactNativeWeb,\n        // for nesting multiple levels of rnw styled() need keep use the OG component\n        reactNativeWebComponent,\n        isInput,\n        isText,\n        isImage,\n      }\n\n      return conf\n    }\n    return {}\n  })()\n\n  const component = createComponent(staticConfigProps, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = ParentComponent extends TamaguiComponent<any, any, infer P>\n    ? P\n    : GetProps<ParentComponent>\n  type ParentVariants = ParentComponent extends TamaguiComponent<any, any, any, infer V> ? V : {}\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  return component as TamaguiComponent<\n    Props,\n    // TODO infer ref\n    any,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n}\n\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {}\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   }\n// })\n// type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
-  "mappings": "AAAA;AAEA;AACA;AAoBO,gBAIL,WAEA,SAMA,yBACA;AACA,QAAM,oBAAqB,OAAM;AArCnC;AAsCI,QAAI,SAAS;AACX,YAAM,EAAE,UAAU,MAAM,oBAAoB,iBAAiB;AAC7D,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AACA,YAAM,mBACJ,kBAAkB,YACd,UAAU,aAAa,mBACvB,aAAa,IAAI,SAAS;AAChC,YAAM,0BAA0B,mBAC5B,iBAAU,oBAAV,mBAA2B,4BAA2B,YACtD;AACJ,YAAM,YAAY,CAAC,oBAAoB,kBAAkB;AACzD,YAAM,OAAO,2BAA4B;AACzC,YAAM,UAAU,CAAC,CAAE,cAAa,WAAY,EAAC,YAAY,SAAS,QAAQ;AAC1E,YAAM,UAAU,CAAC,CAAE,cAAa,WAAY,EAAC,YAAY,SAAS,YAAY;AAC9E,YAAM,SAAS,CAAC,CAAE,cAAa,UAAW,EAAC,YAAY,WAAW,SAAS,OAAO;AAElF,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA,QACA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AACA,WAAO,CAAC;AAAA,EACV,GAAG;AAEH,QAAM,YAAY,gBAAgB,mBAAmB,SAAS;AA4B9D,SAAO;AAOT;",
+  "sourcesContent": ["import { Image, Text, TextInput } from 'react-native'\n\nimport { createComponent } from './createComponent'\nimport { RNComponents } from './helpers/RNComponents'\nimport {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> = GetProps<ParentComponent> & {\n  name?: string\n  variants?: VariantDefinitions<ParentComponent> | undefined\n  defaultVariants?: { [key: string]: any }\n}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  Component: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  const staticConfigProps = (() => {\n    const parentStaticConfig =\n      'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null\n    if (options) {\n      const { variants, name, defaultVariants, ...defaultProps } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n      const isReactNativeWeb = parentStaticConfig?.isReactNativeWeb || RNComponents.has(Component)\n      const reactNativeWebComponent = isReactNativeWeb\n        ? parentStaticConfig?.reactNativeWebComponent || Component\n        : null\n      const isTamagui = !isReactNativeWeb && !!parentStaticConfig\n      const Comp = reactNativeWebComponent || (Component as any)\n      const isImage = !!(defaultProps.isImage || (!isTamagui ? Comp === Image : false))\n      const isInput = !!(defaultProps.isInput || (!isTamagui ? Comp === TextInput : false))\n      const isText = !!(defaultProps.isText || (!isTamagui ? isInput || Comp === Text : false))\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        isTamagui,\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name,\n        isReactNativeWeb,\n        // for nesting multiple levels of rnw styled() need keep use the OG component\n        reactNativeWebComponent,\n        isInput,\n        isText,\n        isImage,\n      }\n\n      return conf\n    }\n    return {}\n  })()\n\n  const component = createComponent(staticConfigProps, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = ParentComponent extends TamaguiComponent<any, any, infer P>\n    ? P\n    : GetProps<ParentComponent>\n  type ParentVariants = ParentComponent extends TamaguiComponent<any, any, any, infer V> ? V : {}\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  return component as TamaguiComponent<\n    Props,\n    // TODO infer ref\n    any,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n}\n\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {}\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   }\n// })\n// type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
+  "mappings": "AAAA;AAEA;AACA;AAoBO,gBAIL,WAEA,SAMA,yBACA;AACA,QAAM,oBAAqB,OAAM;AAC/B,UAAM,qBACJ,kBAAkB,YAAa,UAAU,eAAgC;AAC3E,QAAI,SAAS;AACX,YAAM,EAAE,UAAU,MAAM,oBAAoB,iBAAiB;AAC7D,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AACA,YAAM,mBAAmB,0DAAoB,qBAAoB,aAAa,IAAI,SAAS;AAC3F,YAAM,0BAA0B,mBAC5B,0DAAoB,4BAA2B,YAC/C;AACJ,YAAM,YAAY,CAAC,oBAAoB,CAAC,CAAC;AACzC,YAAM,OAAO,2BAA4B;AACzC,YAAM,UAAU,CAAC,CAAE,cAAa,WAAY,EAAC,YAAY,SAAS,QAAQ;AAC1E,YAAM,UAAU,CAAC,CAAE,cAAa,WAAY,EAAC,YAAY,SAAS,YAAY;AAC9E,YAAM,SAAS,CAAC,CAAE,cAAa,UAAW,EAAC,YAAY,WAAW,SAAS,OAAO;AAElF,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA,QACA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AACA,WAAO,CAAC;AAAA,EACV,GAAG;AAEH,QAAM,YAAY,gBAAgB,mBAAmB,SAAS;AA4B9D,SAAO;AAOT;",
   "names": []
 }

package/dist/esm/views/FontLanguage.js

@@ -0,0 +1,13 @@
+import React from "react";
+const FontLanguage = ({ children, ...props }) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    style: {
+      display: "contents"
+    },
+    className: Object.entries(props).map(([name, language]) => `t_lang-${name}-${language}`).join(" ")
+  }, children);
+};
+export {
+  FontLanguage
+};
+//# sourceMappingURL=FontLanguage.js.map

package/dist/esm/views/FontLanguage.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/views/FontLanguage.tsx"],
+  "sourcesContent": ["import React from 'react'\n\nimport { FontLanguageProps } from './FontLanguage.types'\n\nexport const FontLanguage = ({ children, ...props }: FontLanguageProps) => {\n  return (\n    <div\n      style={{\n        display: 'contents',\n      }}\n      className={Object.entries(props)\n        .map(([name, language]) => `t_lang-${name}-${language}`)\n        .join(' ')}\n    >\n      {children}\n    </div>\n  )\n}\n"],
+  "mappings": "AAAA;AAIO,MAAM,eAAe,CAAC,EAAE,aAAa,YAA+B;AACzE,SACE,oCAAC;AAAA,IACC,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,WAAW,OAAO,QAAQ,KAAK,EAC5B,IAAI,CAAC,CAAC,MAAM,cAAc,UAAU,QAAQ,UAAU,EACtD,KAAK,GAAG;AAAA,KAEV,QACH;AAEJ;",
+  "names": []
+}

package/dist/esm/views/FontLanguage.native.js

@@ -0,0 +1,12 @@
+import React, { useMemo } from "react";
+import { FontLanguageContext } from "../contexts/FontLanguageContext";
+const FontLanguage = ({ children, ...props }) => {
+  const value = useMemo(() => props, [JSON.stringify(props)]);
+  return /* @__PURE__ */ React.createElement(FontLanguageContext.Provider, {
+    value
+  }, children);
+};
+export {
+  FontLanguage
+};
+//# sourceMappingURL=FontLanguage.native.js.map