@tamagui/core 1.0.1-beta.139 → 1.0.1-beta.142

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 './addTheme'\nexport * from './updateTheme'\nexport * from './styled'\nexport * from './types'\n\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 {\n  configureMedia,\n  getMedia,\n  mediaState,\n  useMedia,\n  mediaObjectToString,\n  addMediaQueryListener,\n  removeMediaQueryListener,\n  mediaQueryConfig,\n} from './hooks/useMedia'\nexport * from './hooks/usePressable'\nexport * from './hooks/useTheme'\nexport * from './hooks/useIsSSR'\nexport * from './hooks/useUnmountEffect'\nexport * from './hooks/useSafeRef'\n\nexport * from './views/Slot'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport { TextAncestorProvider, TextAncestorContext } from './contexts/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;AACA;AACA;AAIA;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;AACA;AACA;AACA;AACA;AAEA;AACA;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 './addTheme'\nexport * from './updateTheme'\nexport * from './styled'\nexport * from './types'\n\n// for type portability\nexport type { RNWTextProps, RNWViewProps } from './types-rnw'\nexport { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './config'\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/getAnimationDriver'\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 {\n  configureMedia,\n  getMedia,\n  mediaState,\n  useMedia,\n  mediaObjectToString,\n  addMediaQueryListener,\n  removeMediaQueryListener,\n  mediaQueryConfig,\n} from './hooks/useMedia'\nexport * from './hooks/usePressable'\nexport * from './hooks/useTheme'\nexport * from './hooks/useIsSSR'\nexport * from './hooks/useUnmountEffect'\nexport * from './hooks/useSafeRef'\n\nexport * from './views/Slot'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport { TextAncestorProvider, TextAncestorContext } from './contexts/TextAncestorContext'\nexport * from './views/Theme'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/ThemeReset'\nexport * from './views/FontLanguage'\nexport * from './views/TamaguiProvider'\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;AACA;AACA;AAIA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;",
   "names": []
 }

package/dist/esm/injectStyles.js

@@ -0,0 +1,16 @@
+const stylesheets = {};
+const injectStyles = ({ filePath, css }) => {
+  let stylesheet = stylesheets[filePath];
+  if (!stylesheet) {
+    const styleEl = document.createElement("style");
+    styleEl.setAttribute("data-file", filePath);
+    styleEl.setAttribute("type", "text/css");
+    stylesheet = stylesheets[filePath] = styleEl;
+    document.head.appendChild(styleEl);
+  }
+  stylesheet.innerHTML = css;
+};
+export {
+  injectStyles
+};
+//# sourceMappingURL=injectStyles.js.map

package/dist/esm/injectStyles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/injectStyles.ts"],
+  "sourcesContent": ["// for vite dev mode\n\nconst stylesheets: Record<string, HTMLElement> = {}\n\ninterface InjectStylesOptions {\n  filePath: string\n  css: string\n}\n\nexport const injectStyles = ({ filePath, css }: InjectStylesOptions) => {\n  let stylesheet = stylesheets[filePath]\n  if (!stylesheet) {\n    const styleEl = document.createElement('style')\n    styleEl.setAttribute('data-file', filePath)\n    styleEl.setAttribute('type', 'text/css')\n    stylesheet = stylesheets[filePath] = styleEl\n    document.head.appendChild(styleEl)\n  }\n  stylesheet.innerHTML = css\n}\n"],
+  "mappings": "AAEA,MAAM,cAA2C,CAAC;AAO3C,MAAM,eAAe,CAAC,EAAE,UAAU,UAA+B;AACtE,MAAI,aAAa,YAAY;AAC7B,MAAI,CAAC,YAAY;AACf,UAAM,UAAU,SAAS,cAAc,OAAO;AAC9C,YAAQ,aAAa,aAAa,QAAQ;AAC1C,YAAQ,aAAa,QAAQ,UAAU;AACvC,iBAAa,YAAY,YAAY;AACrC,aAAS,KAAK,YAAY,OAAO;AAAA,EACnC;AACA,aAAW,YAAY;AACzB;",
+  "names": []
+}

package/dist/esm/insertFont.js

@@ -1,4 +1,4 @@
-import { setConfigFont } from "./conf";
+import { setConfigFont } from "./config";
 import { createFont } from "./createFont";
 import { createVariables } from "./createVariables";
 import { registerCSSVariable, variableToCSS } from "./helpers/registerCSSVariable";

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, variableToCSS } from './helpers/registerCSSVariable'\nimport { GenericFont } from './types'\n\n/**\n * Runtime dynamic insert font\n */\nexport function insertFont<A extends GenericFont>(name: string, fontIn: A): DeepVariableObject<A> {\n  const font = createFont(fontIn)\n  const tokened = createVariables(font, name) as GenericFont\n  const parsed = parseFont(tokened) as DeepVariableObject<A>\n  if (process.env.TAMAGUI_TARGET === 'web' && typeof document !== 'undefined') {\n    const fontVars = registerFontVariables(parsed)\n    const style = document.createElement('style')\n    style.innerText = `:root .font_${name} {${fontVars.join(';')}}`\n    style.setAttribute('data-tamagui-font', name)\n    document.head.appendChild(style)\n  }\n  setConfigFont(name, tokened, parsed)\n  return parsed\n}\n\nexport function parseFont<A extends GenericFont>(definition: A): DeepVariableObject<A> {\n  const parsed: any = {}\n  for (const attrKey in definition) {\n    const attr = definition[attrKey]\n    if (attrKey === 'family') {\n      parsed[attrKey] = attr\n      continue\n    }\n    parsed[attrKey] = {}\n    for (const key in attr) {\n      let val = attr[key] as any as Variable\n      // is a theme reference\n      if (val.val?.[0] === '$') {\n        val = val.val\n      }\n      parsed[attrKey][`$${key}`] = val\n    }\n  }\n  return parsed\n}\n\nexport function registerFontVariables(parsedFont: any) {\n  const response: string[] = []\n\n  for (const fkey in parsedFont) {\n    if (fkey === 'family') {\n      const val = parsedFont[fkey] as Variable\n      registerCSSVariable(val)\n      response.push(variableToCSS(val))\n    } else {\n      for (const fskey in parsedFont[fkey]) {\n        const fval = parsedFont[fkey][fskey]\n        if (typeof fval === 'string') {\n          // no need to add its a theme reference like \"$borderColor\"\n        } else {\n          const val = parsedFont[fkey][fskey] as Variable\n          registerCSSVariable(val)\n          response.push(variableToCSS(val))\n        }\n      }\n    }\n  }\n  return response\n}\n"],
+  "sourcesContent": ["import { setConfigFont } from './config'\nimport { createFont } from './createFont'\nimport { Variable } from './createVariable'\nimport { DeepVariableObject, createVariables } from './createVariables'\nimport { registerCSSVariable, variableToCSS } from './helpers/registerCSSVariable'\nimport { GenericFont } from './types'\n\n/**\n * Runtime dynamic insert font\n */\nexport function insertFont<A extends GenericFont>(name: string, fontIn: A): DeepVariableObject<A> {\n  const font = createFont(fontIn)\n  const tokened = createVariables(font, name) as GenericFont\n  const parsed = parseFont(tokened) as DeepVariableObject<A>\n  if (process.env.TAMAGUI_TARGET === 'web' && typeof document !== 'undefined') {\n    const fontVars = registerFontVariables(parsed)\n    const style = document.createElement('style')\n    style.innerText = `:root .font_${name} {${fontVars.join(';')}}`\n    style.setAttribute('data-tamagui-font', name)\n    document.head.appendChild(style)\n  }\n  setConfigFont(name, tokened, parsed)\n  return parsed\n}\n\nexport function parseFont<A extends GenericFont>(definition: A): DeepVariableObject<A> {\n  const parsed: any = {}\n  for (const attrKey in definition) {\n    const attr = definition[attrKey]\n    if (attrKey === 'family') {\n      parsed[attrKey] = attr\n      continue\n    }\n    parsed[attrKey] = {}\n    for (const key in attr) {\n      let val = attr[key] as any\n      // is a theme reference\n      if (val.val?.[0] === '$') {\n        val = val.val\n      }\n      parsed[attrKey][`$${key}`] = val\n    }\n  }\n  return parsed\n}\n\nexport function registerFontVariables(parsedFont: any) {\n  const response: string[] = []\n\n  for (const fkey in parsedFont) {\n    if (fkey === 'family') {\n      const val = parsedFont[fkey] as Variable\n      registerCSSVariable(val)\n      response.push(variableToCSS(val))\n    } else {\n      for (const fskey in parsedFont[fkey]) {\n        const fval = parsedFont[fkey][fskey]\n        if (typeof fval === 'string') {\n          // no need to add its a theme reference like \"$borderColor\"\n        } else {\n          const val = parsedFont[fkey][fskey] as Variable\n          registerCSSVariable(val)\n          response.push(variableToCSS(val))\n        }\n      }\n    }\n  }\n  return response\n}\n"],
   "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,WAAW,sBAAsB,MAAM;AAC7C,UAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,UAAM,YAAY,eAAe,SAAS,SAAS,KAAK,GAAG;AAC3D,UAAM,aAAa,qBAAqB,IAAI;AAC5C,aAAS,KAAK,YAAY,KAAK;AAAA,EACjC;AACA,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,WAAqB,CAAC;AAE5B,aAAW,QAAQ,YAAY;AAC7B,QAAI,SAAS,UAAU;AACrB,YAAM,MAAM,WAAW;AACvB,0BAAoB,GAAG;AACvB,eAAS,KAAK,cAAc,GAAG,CAAC;AAAA,IAClC,OAAO;AACL,iBAAW,SAAS,WAAW,OAAO;AACpC,cAAM,OAAO,WAAW,MAAM;AAC9B,YAAI,OAAO,SAAS,UAAU;AAAA,QAE9B,OAAO;AACL,gBAAM,MAAM,WAAW,MAAM;AAC7B,8BAAoB,GAAG;AACvB,mBAAS,KAAK,cAAc,GAAG,CAAC;AAAA,QAClC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/styled.js

@@ -9,7 +9,17 @@ function styled(Component, options, staticExtractionOptions) {
       if (defaultVariants) {
         Object.assign(defaultProps, defaultVariants);
       }
-      const isReactNativeWeb = (parentStaticConfig == null ? void 0 : parentStaticConfig.isReactNativeWeb) || RNComponents.has(Component);
+      let isReactNativeWeb = (parentStaticConfig == null ? void 0 : parentStaticConfig.isReactNativeWeb) || RNComponents.has(Component);
+      if (!("staticConfig" in Component) && !isReactNativeWeb) {
+        if (RNComponents.has(Component["displayName"])) {
+          RNComponents.add(Component);
+          isReactNativeWeb = true;
+        } else {
+          if (process.env.NODE_ENV === "development") {
+            console.warn(`Invalid styled() component: Tamagui only accepts react-native Text, View, Image, TextInput, or another styled Tamagui view`);
+          }
+        }
+      }
       const reactNativeWebComponent = isReactNativeWeb ? (parentStaticConfig == null ? void 0 : parentStaticConfig.reactNativeWebComponent) || Component : null;
       const isTamagui = !isReactNativeWeb && !!parentStaticConfig;
       const Comp = reactNativeWebComponent || Component;

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    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;",
+  "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      let isReactNativeWeb = parentStaticConfig?.isReactNativeWeb || RNComponents.has(Component)\n      // this can happen due to smart-ness in fake-react-native, rough heuristic here to ensure we match (could be better..)\n      if (!('staticConfig' in Component) && !isReactNativeWeb) {\n        if (RNComponents.has(Component['displayName'])) {\n          RNComponents.add(Component)\n          isReactNativeWeb = true\n        } else {\n          if (process.env.NODE_ENV === 'development') {\n            // eslint-disable-next-line no-console\n            console.warn(\n              `Invalid styled() component: Tamagui only accepts react-native Text, View, Image, TextInput, or another styled Tamagui view`\n            )\n          }\n        }\n      }\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,UAAI,mBAAmB,0DAAoB,qBAAoB,aAAa,IAAI,SAAS;AAEzF,UAAI,CAAE,mBAAkB,cAAc,CAAC,kBAAkB;AACvD,YAAI,aAAa,IAAI,UAAU,cAAc,GAAG;AAC9C,uBAAa,IAAI,SAAS;AAC1B,6BAAmB;AAAA,QACrB,OAAO;AACL,cAAI,QAAQ,IAAI,aAAa,eAAe;AAE1C,oBAAQ,KACN,4HACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AACA,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/TamaguiProvider.js

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { isClient, isRSC, isSSR } from "../constants/platform";
+import { ButtonInsideButtonContext } from "../contexts/ButtonInsideButtonContext";
+import { TextAncestorProvider } from "../contexts/TextAncestorContext";
+import { useMediaQueryListeners } from "../hooks/useMedia";
+import { ThemeProvider } from "./ThemeProvider";
+function TamaguiProvider({
+  children,
+  disableInjectCSS,
+  config,
+  ...themePropsProvider
+}) {
+  if (isRSC) {
+    return /* @__PURE__ */ React.createElement("span", {
+      style: { display: "contents" },
+      className: `t_${config.defaultTheme || "light"}`
+    }, children);
+  }
+  if (!isSSR) {
+    useMediaQueryListeners();
+  }
+  if (isClient) {
+    React.useLayoutEffect(() => {
+      if (disableInjectCSS)
+        return;
+      const style = document.createElement("style");
+      style.appendChild(document.createTextNode(config.getCSS()));
+      document.head.appendChild(style);
+      return () => {
+        document.head.removeChild(style);
+      };
+    }, [config, disableInjectCSS]);
+  }
+  return /* @__PURE__ */ React.createElement(ButtonInsideButtonContext.Provider, {
+    value: false
+  }, /* @__PURE__ */ React.createElement(TextAncestorProvider, null, /* @__PURE__ */ React.createElement(ThemeProvider, {
+    defaultTheme: config.defaultTheme || "light",
+    themeClassNameOnRoot: config.themeClassNameOnRoot,
+    disableRootThemeClass: config.disableRootThemeClass,
+    ...themePropsProvider
+  }, children)));
+}
+export {
+  TamaguiProvider
+};
+//# sourceMappingURL=TamaguiProvider.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/views/TamaguiProvider.tsx"],
+  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport * as React from 'react'\n\nimport { isClient, isRSC, isSSR } from '../constants/platform'\nimport { ButtonInsideButtonContext } from '../contexts/ButtonInsideButtonContext'\nimport { TextAncestorProvider } from '../contexts/TextAncestorContext'\nimport { useMediaQueryListeners } from '../hooks/useMedia'\nimport type { TamaguiProviderProps } from '../types'\nimport { ThemeProvider } from './ThemeProvider'\n\nexport function TamaguiProvider({\n  children,\n  disableInjectCSS,\n  config,\n  ...themePropsProvider\n}: TamaguiProviderProps) {\n  if (isRSC) {\n    return (\n      <span style={{ display: 'contents' }} className={`t_${config.defaultTheme || 'light'}`}>\n        {children}\n      </span>\n    )\n  }\n\n  if (!isSSR) {\n    useMediaQueryListeners()\n  }\n\n  if (isClient) {\n    // inject CSS if asked to (not SSR compliant)\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useLayoutEffect(() => {\n      if (disableInjectCSS) return\n      const style = document.createElement('style')\n      style.appendChild(document.createTextNode(config.getCSS()))\n      document.head.appendChild(style)\n      return () => {\n        document.head.removeChild(style)\n      }\n    }, [config, disableInjectCSS])\n  }\n\n  return (\n    <ButtonInsideButtonContext.Provider value={false}>\n      <TextAncestorProvider>\n        <ThemeProvider\n          defaultTheme={config.defaultTheme || 'light'}\n          themeClassNameOnRoot={config.themeClassNameOnRoot}\n          disableRootThemeClass={config.disableRootThemeClass}\n          {...themePropsProvider}\n        >\n          {children}\n        </ThemeProvider>\n      </TextAncestorProvider>\n    </ButtonInsideButtonContext.Provider>\n  )\n}\n"],
+  "mappings": "AACA;AAEA;AACA;AACA;AACA;AAEA;AAEO,yBAAyB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,GACoB;AACvB,MAAI,OAAO;AACT,WACE,oCAAC;AAAA,MAAK,OAAO,EAAE,SAAS,WAAW;AAAA,MAAG,WAAW,KAAK,OAAO,gBAAgB;AAAA,OAC1E,QACH;AAAA,EAEJ;AAEA,MAAI,CAAC,OAAO;AACV,2BAAuB;AAAA,EACzB;AAEA,MAAI,UAAU;AAGZ,UAAM,gBAAgB,MAAM;AAC1B,UAAI;AAAkB;AACtB,YAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,YAAM,YAAY,SAAS,eAAe,OAAO,OAAO,CAAC,CAAC;AAC1D,eAAS,KAAK,YAAY,KAAK;AAC/B,aAAO,MAAM;AACX,iBAAS,KAAK,YAAY,KAAK;AAAA,MACjC;AAAA,IACF,GAAG,CAAC,QAAQ,gBAAgB,CAAC;AAAA,EAC/B;AAEA,SACE,oCAAC,0BAA0B,UAA1B;AAAA,IAAmC,OAAO;AAAA,KACzC,oCAAC,4BACC,oCAAC;AAAA,IACC,cAAc,OAAO,gBAAgB;AAAA,IACrC,sBAAsB,OAAO;AAAA,IAC7B,uBAAuB,OAAO;AAAA,IAC7B,GAAG;AAAA,KAEH,QACH,CACF,CACF;AAEJ;",
+  "names": []
+}

package/dist/esm/views/Theme.js

@@ -1,13 +1,14 @@
 import React, { memo, useMemo } from "react";
 import { isWeb } from "../constants/platform";
+import { variableToString } from "../createVariable";
 import { ThemeManagerContext } from "../helpers/ThemeManager";
 import { useChangeThemeEffect } from "../hooks/useTheme";
 React["createElement"];
 const Theme = memo(function Theme2(props) {
-  var _a, _b;
+  var _a;
   const { name, theme, themeManager, themes, className } = useChangeThemeEffect(props.name, props.componentName, props);
   const missingTheme = !themes || !name || !theme;
-  const contents = useMemo(() => missingTheme ? null : wrapThemeManagerContext(props.children, themeManager), [props.children, themeManager]);
+  const contents = useMemo(() => missingTheme ? null : wrapThemeManagerContext(props.children, themeManager), [missingTheme, props.children, themeManager]);
   if (missingTheme) {
     if (name && !theme && process.env.NODE_ENV === "development") {
       console.warn(`No theme found by name ${name}`);
@@ -19,7 +20,7 @@ const Theme = memo(function Theme2(props) {
       className: (!props.disableThemeClass ? [props.className, className].filter(Boolean) : []).join(" "),
       style: {
         display: "contents",
-        color: (_b = (_a = themes[name]) == null ? void 0 : _a.color) == null ? void 0 : _b.toString()
+        color: variableToString((_a = themes[name]) == null ? void 0 : _a.color)
       }
     }, contents);
   }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "sourcesContent": ["import React, { memo, useMemo } from 'react'\n\nimport { isWeb } from '../constants/platform'\nimport { ThemeManager, ThemeManagerContext } from '../helpers/ThemeManager'\nimport { ThemeProps, useChangeThemeEffect } from '../hooks/useTheme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nexport const Theme = memo(function Theme(props: ThemeProps) {\n  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(\n    props.name,\n    props.componentName,\n    props\n  )\n\n  const missingTheme = !themes || !name || !theme\n\n  // memo here, changing theme without re-rendering all children is a critical optimization\n  // may require some effort of end user to memoize but without this memo they'd have no option\n  const contents = useMemo(\n    () => (missingTheme ? null : wrapThemeManagerContext(props.children, themeManager)),\n    [props.children, themeManager]\n  )\n\n  if (missingTheme) {\n    if (name && !theme && process.env.NODE_ENV === 'development') {\n      console.warn(`No theme found by name ${name}`)\n    }\n    return props.children\n  }\n\n  if (isWeb) {\n    return (\n      <span\n        className={(!props.disableThemeClass\n          ? [props.className, className].filter(Boolean)\n          : []\n        ).join(' ')}\n        style={{\n          display: 'contents',\n          // in order to provide currentColor, set color by default\n          color: themes[name]?.color?.toString(),\n        }}\n      >\n        {contents}\n      </span>\n    )\n  }\n\n  return contents\n})\n\nexport function wrapThemeManagerContext(\n  children: any,\n  themeManager?: ThemeManager | null,\n  shouldSetChildrenThemeToParent?: boolean\n) {\n  return themeManager ? (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {shouldSetChildrenThemeToParent ? (\n        <Theme name={themeManager.parentName}>{children}</Theme>\n      ) : (\n        children\n      )}\n    </ThemeManagerContext.Provider>\n  ) : (\n    children\n  )\n}\n"],
-  "mappings": "AAAA;AAEA;AACA;AACA;AAGA,MAAM;AAEC,MAAM,QAAQ,KAAK,gBAAe,OAAmB;AAT5D;AAUE,QAAM,EAAE,MAAM,OAAO,cAAc,QAAQ,cAAc,qBACvD,MAAM,MACN,MAAM,eACN,KACF;AAEA,QAAM,eAAe,CAAC,UAAU,CAAC,QAAQ,CAAC;AAI1C,QAAM,WAAW,QACf,MAAO,eAAe,OAAO,wBAAwB,MAAM,UAAU,YAAY,GACjF,CAAC,MAAM,UAAU,YAAY,CAC/B;AAEA,MAAI,cAAc;AAChB,QAAI,QAAQ,CAAC,SAAS,QAAQ,IAAI,aAAa,eAAe;AAC5D,cAAQ,KAAK,0BAA0B,MAAM;AAAA,IAC/C;AACA,WAAO,MAAM;AAAA,EACf;AAEA,MAAI,OAAO;AACT,WACE,oCAAC;AAAA,MACC,WAAY,EAAC,MAAM,oBACf,CAAC,MAAM,WAAW,SAAS,EAAE,OAAO,OAAO,IAC3C,CAAC,GACH,KAAK,GAAG;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,QAET,OAAO,mBAAO,UAAP,mBAAc,UAAd,mBAAqB;AAAA,MAC9B;AAAA,OAEC,QACH;AAAA,EAEJ;AAEA,SAAO;AACT,CAAC;AAEM,iCACL,UACA,cACA,gCACA;AACA,SAAO,eACL,oCAAC,oBAAoB,UAApB;AAAA,IAA6B,OAAO;AAAA,KAClC,iCACC,oCAAC;AAAA,IAAM,MAAM,aAAa;AAAA,KAAa,QAAS,IAEhD,QAEJ,IAEA;AAEJ;",
+  "sourcesContent": ["import React, { memo, useMemo } from 'react'\n\nimport { isWeb } from '../constants/platform'\nimport { variableToString } from '../createVariable'\nimport { ThemeManager, ThemeManagerContext } from '../helpers/ThemeManager'\nimport { ThemeProps, useChangeThemeEffect } from '../hooks/useTheme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nexport const Theme = memo(function Theme(props: ThemeProps) {\n  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(\n    props.name,\n    props.componentName,\n    props\n  )\n\n  const missingTheme = !themes || !name || !theme\n\n  // memo here, changing theme without re-rendering all children is a critical optimization\n  // may require some effort of end user to memoize but without this memo they'd have no option\n  const contents = useMemo(\n    () => (missingTheme ? null : wrapThemeManagerContext(props.children, themeManager)),\n    [missingTheme, props.children, themeManager]\n  )\n\n  if (missingTheme) {\n    if (name && !theme && process.env.NODE_ENV === 'development') {\n      // eslint-disable-next-line no-console\n      console.warn(`No theme found by name ${name}`)\n    }\n    return props.children\n  }\n\n  if (isWeb) {\n    return (\n      <span\n        className={(!props.disableThemeClass\n          ? [props.className, className].filter(Boolean)\n          : []\n        ).join(' ')}\n        style={{\n          display: 'contents',\n          // in order to provide currentColor, set color by default\n          color: variableToString(themes[name]?.color),\n        }}\n      >\n        {contents}\n      </span>\n    )\n  }\n\n  return contents\n})\n\nexport function wrapThemeManagerContext(\n  children: any,\n  themeManager?: ThemeManager | null,\n  shouldSetChildrenThemeToParent?: boolean\n) {\n  return themeManager ? (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {shouldSetChildrenThemeToParent ? (\n        <Theme name={themeManager.parentName}>{children}</Theme>\n      ) : (\n        children\n      )}\n    </ThemeManagerContext.Provider>\n  ) : (\n    children\n  )\n}\n"],
+  "mappings": "AAAA;AAEA;AACA;AACA;AACA;AAGA,MAAM;AAEC,MAAM,QAAQ,KAAK,gBAAe,OAAmB;AAV5D;AAWE,QAAM,EAAE,MAAM,OAAO,cAAc,QAAQ,cAAc,qBACvD,MAAM,MACN,MAAM,eACN,KACF;AAEA,QAAM,eAAe,CAAC,UAAU,CAAC,QAAQ,CAAC;AAI1C,QAAM,WAAW,QACf,MAAO,eAAe,OAAO,wBAAwB,MAAM,UAAU,YAAY,GACjF,CAAC,cAAc,MAAM,UAAU,YAAY,CAC7C;AAEA,MAAI,cAAc;AAChB,QAAI,QAAQ,CAAC,SAAS,QAAQ,IAAI,aAAa,eAAe;AAE5D,cAAQ,KAAK,0BAA0B,MAAM;AAAA,IAC/C;AACA,WAAO,MAAM;AAAA,EACf;AAEA,MAAI,OAAO;AACT,WACE,oCAAC;AAAA,MACC,WAAY,EAAC,MAAM,oBACf,CAAC,MAAM,WAAW,SAAS,EAAE,OAAO,OAAO,IAC3C,CAAC,GACH,KAAK,GAAG;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,QAET,OAAO,iBAAiB,aAAO,UAAP,mBAAc,KAAK;AAAA,MAC7C;AAAA,OAEC,QACH;AAAA,EAEJ;AAEA,SAAO;AACT,CAAC;AAEM,iCACL,UACA,cACA,gCACA;AACA,SAAO,eACL,oCAAC,oBAAoB,UAApB;AAAA,IAA6B,OAAO;AAAA,KAClC,iCACC,oCAAC;AAAA,IAAM,MAAM,aAAa;AAAA,KAAa,QAAS,IAEhD,QAEJ,IAEA;AAEJ;",
   "names": []
 }

package/dist/esm/views/ThemeProvider.js

@@ -1,12 +1,14 @@
 import React, { useLayoutEffect, useMemo } from "react";
-import { getHasConfigured } from "../conf";
+import { getConfig, getHasConfigured } from "../config";
 import { THEME_CLASSNAME_PREFIX } from "../constants/constants";
 import { ThemeContext } from "../contexts/ThemeContext";
 import { Theme } from "./Theme";
 React["createElement"];
 const ThemeProvider = (props) => {
-  if (!getHasConfigured()) {
-    throw new Error(`Missing configureThemes() call, add to your root file`);
+  if (process.env.NODE_ENV === "development") {
+    if (!getHasConfigured()) {
+      throw new Error(`Missing configureThemes() call, add to your root file`);
+    }
   }
   if (typeof document !== "undefined") {
     useLayoutEffect(() => {
@@ -19,14 +21,16 @@ const ThemeProvider = (props) => {
       return () => {
         target.classList.remove(cn);
       };
-    }, [props.defaultTheme, props.disableRootThemeClass]);
+    }, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot]);
   }
   const themeContext = useMemo(() => {
     return {
-      themes: props.themes,
+      get themes() {
+        return getConfig().themes;
+      },
       defaultTheme: props.defaultTheme
     };
-  }, [props.themes]);
+  }, [props.defaultTheme]);
   return /* @__PURE__ */ React.createElement(ThemeContext.Provider, {
     value: themeContext
   }, /* @__PURE__ */ React.createElement(Theme, {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeProvider.tsx"],
-  "sourcesContent": ["import React, { useLayoutEffect, useMemo } from 'react'\n\nimport { getHasConfigured } from '../conf'\nimport { THEME_CLASSNAME_PREFIX } from '../constants/constants'\nimport { ThemeContext } from '../contexts/ThemeContext'\nimport { Theme } from './Theme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nexport type ThemeProviderProps = {\n  className?: string\n  themes: any\n  defaultTheme: string\n  disableRootThemeClass?: boolean\n  themeClassNameOnRoot?: boolean\n  children?: any\n  reset?: boolean\n}\n\nexport const ThemeProvider = (props: ThemeProviderProps) => {\n  if (!getHasConfigured()) {\n    throw new Error(`Missing configureThemes() call, add to your root file`)\n  }\n\n  // ensure theme is attached to root body node as well to work with modals by default\n  if (typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (props.disableRootThemeClass) {\n        return\n      }\n      const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`\n      const target = props.themeClassNameOnRoot ? document.documentElement : document.body\n      target.classList.add(cn)\n      return () => {\n        target.classList.remove(cn)\n      }\n    }, [props.defaultTheme, props.disableRootThemeClass])\n  }\n\n  const themeContext = useMemo(() => {\n    return {\n      themes: props.themes,\n      defaultTheme: props.defaultTheme,\n    }\n  }, [props.themes])\n\n  return (\n    <ThemeContext.Provider value={themeContext}>\n      <Theme\n        className={props.className}\n        name={props.defaultTheme}\n        disableThemeClass={props.disableRootThemeClass}\n      >\n        {props.children}\n      </Theme>\n    </ThemeContext.Provider>\n  )\n}\n"],
-  "mappings": "AAAA;AAEA;AACA;AACA;AACA;AAGA,MAAM;AAYC,MAAM,gBAAgB,CAAC,UAA8B;AAC1D,MAAI,CAAC,iBAAiB,GAAG;AACvB,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAGA,MAAI,OAAO,aAAa,aAAa;AACnC,oBAAgB,MAAM;AACpB,UAAI,MAAM,uBAAuB;AAC/B;AAAA,MACF;AACA,YAAM,KAAK,GAAG,yBAAyB,MAAM;AAC7C,YAAM,SAAS,MAAM,uBAAuB,SAAS,kBAAkB,SAAS;AAChF,aAAO,UAAU,IAAI,EAAE;AACvB,aAAO,MAAM;AACX,eAAO,UAAU,OAAO,EAAE;AAAA,MAC5B;AAAA,IACF,GAAG,CAAC,MAAM,cAAc,MAAM,qBAAqB,CAAC;AAAA,EACtD;AAEA,QAAM,eAAe,QAAQ,MAAM;AACjC,WAAO;AAAA,MACL,QAAQ,MAAM;AAAA,MACd,cAAc,MAAM;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,MAAM,MAAM,CAAC;AAEjB,SACE,oCAAC,aAAa,UAAb;AAAA,IAAsB,OAAO;AAAA,KAC5B,oCAAC;AAAA,IACC,WAAW,MAAM;AAAA,IACjB,MAAM,MAAM;AAAA,IACZ,mBAAmB,MAAM;AAAA,KAExB,MAAM,QACT,CACF;AAEJ;",
+  "sourcesContent": ["import React, { useLayoutEffect, useMemo } from 'react'\n\nimport { getConfig, getHasConfigured } from '../config'\nimport { THEME_CLASSNAME_PREFIX } from '../constants/constants'\nimport { ThemeContext } from '../contexts/ThemeContext'\nimport { Theme } from './Theme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nexport type ThemeProviderProps = {\n  className?: string\n  defaultTheme: string\n  disableRootThemeClass?: boolean\n  themeClassNameOnRoot?: boolean\n  children?: any\n  reset?: boolean\n}\n\nexport const ThemeProvider = (props: ThemeProviderProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (!getHasConfigured()) {\n      throw new Error(`Missing configureThemes() call, add to your root file`)\n    }\n  }\n\n  // ensure theme is attached to root body node as well to work with modals by default\n  if (typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (props.disableRootThemeClass) {\n        return\n      }\n      const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`\n      const target = props.themeClassNameOnRoot ? document.documentElement : document.body\n      target.classList.add(cn)\n      return () => {\n        target.classList.remove(cn)\n      }\n    }, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot])\n  }\n\n  const themeContext = useMemo(() => {\n    return {\n      get themes() {\n        return getConfig().themes\n      },\n      defaultTheme: props.defaultTheme,\n    }\n  }, [props.defaultTheme])\n\n  return (\n    <ThemeContext.Provider value={themeContext}>\n      <Theme\n        className={props.className}\n        name={props.defaultTheme}\n        disableThemeClass={props.disableRootThemeClass}\n      >\n        {props.children}\n      </Theme>\n    </ThemeContext.Provider>\n  )\n}\n"],
+  "mappings": "AAAA;AAEA;AACA;AACA;AACA;AAGA,MAAM;AAWC,MAAM,gBAAgB,CAAC,UAA8B;AAC1D,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,CAAC,iBAAiB,GAAG;AACvB,YAAM,IAAI,MAAM,uDAAuD;AAAA,IACzE;AAAA,EACF;AAGA,MAAI,OAAO,aAAa,aAAa;AACnC,oBAAgB,MAAM;AACpB,UAAI,MAAM,uBAAuB;AAC/B;AAAA,MACF;AACA,YAAM,KAAK,GAAG,yBAAyB,MAAM;AAC7C,YAAM,SAAS,MAAM,uBAAuB,SAAS,kBAAkB,SAAS;AAChF,aAAO,UAAU,IAAI,EAAE;AACvB,aAAO,MAAM;AACX,eAAO,UAAU,OAAO,EAAE;AAAA,MAC5B;AAAA,IACF,GAAG,CAAC,MAAM,cAAc,MAAM,uBAAuB,MAAM,oBAAoB,CAAC;AAAA,EAClF;AAEA,QAAM,eAAe,QAAQ,MAAM;AACjC,WAAO;AAAA,MACL,IAAI,SAAS;AACX,eAAO,UAAU,EAAE;AAAA,MACrB;AAAA,MACA,cAAc,MAAM;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,MAAM,YAAY,CAAC;AAEvB,SACE,oCAAC,aAAa,UAAb;AAAA,IAAsB,OAAO;AAAA,KAC5B,oCAAC;AAAA,IACC,WAAW,MAAM;AAAA,IACjB,MAAM,MAAM;AAAA,IACZ,mBAAmB,MAAM;AAAA,KAExB,MAAM,QACT,CACF;AAEJ;",
   "names": []
 }

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.1-beta.139",
+  "version": "1.0.1-beta.142",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
   "types": "./types/index.d.ts",
+  "license": "MIT",
+  "author": {
+    "name": "Nate Wienert"
+  },
   "sideEffects": [
     "*.css"
   ],
@@ -18,34 +22,52 @@
   "files": [
     "types",
     "dist",
+    "src",
     "reset.css"
   ],
   "dependencies": {
     "@expo/match-media": "^0.3.0",
-    "@tamagui/compose-refs": "^1.0.1-beta.139",
-    "@tamagui/helpers": "^1.0.1-beta.139",
-    "@tamagui/rnw": "^1.0.1-beta.139",
-    "@tamagui/use-debounce": "^1.0.1-beta.139",
-    "@tamagui/use-event": "^1.0.1-beta.139",
-    "@tamagui/use-force-update": "^1.0.1-beta.139",
+    "@tamagui/compose-refs": "^1.0.1-beta.142",
+    "@tamagui/helpers": "^1.0.1-beta.142",
+    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.142",
+    "@tamagui/rnw": "^1.0.1-beta.142",
+    "@tamagui/use-debounce": "^1.0.1-beta.142",
+    "@tamagui/use-event": "^1.0.1-beta.142",
+    "@tamagui/use-force-update": "^1.0.1-beta.142",
     "expo-screen-orientation": "^4.3.0",
-    "hyphenate-style-name": "^1.0.4",
-    "normalize-css-color": "^1.0.2",
-    "react": "*",
-    "react-dom": "*"
+    "hyphenate-style-name": "^1.0.4"
   },
   "peerDependencies": {
-    "react-native-web": "*"
+    "react": "*",
+    "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.139",
+    "@tamagui/build": "^1.0.1-beta.142",
     "@types/react": "^18.0.15",
     "csstype": "^3.0.10",
     "esbuild": "^0.14.49",
-    "react-native-web": "^0.18.3",
+    "react": "*",
+    "react-dom": "*",
     "typescript": "^4.7.4",
     "vitest": "^0.20.3"
   },
+  "exports": {
+    "./package.json": "./package.json",
+    "./reset.css": "./reset.css",
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./injectStyles": {
+      "import": "./dist/esm/injectStyles.js",
+      "require": "./dist/cjs/injectStyles.js"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tamagui/tamagui.git",
+    "directory": "packages/core"
+  },
   "publishConfig": {
     "access": "public"
   },

package/src/Tamagui.ts

@@ -0,0 +1,44 @@
+import * as Helpers from '@tamagui/helpers'
+import * as rnw from '@tamagui/rnw'
+
+import { getConfig } from './config'
+import { getAllRules, getAllSelectors, getAllTransforms } from './helpers/insertStyleRule'
+
+// serves a central store for state
+
+class TamaguiManager {
+  rnw = rnw
+  Helpers = Helpers
+
+  get config() {
+    return getConfig()
+  }
+
+  get insertedRules() {
+    return getAllRules()
+  }
+
+  get allSelectors() {
+    return getAllSelectors()
+  }
+
+  get allTransforms() {
+    return getAllTransforms()
+  }
+
+  get identifierToValue() {
+    return identifierToValue
+  }
+}
+
+export const Tamagui = new TamaguiManager()
+
+const identifierToValue = new Map<string, any>()
+
+export const getValueFromIdentifier = (identifier: string) => {
+  return identifierToValue.get(identifier)
+}
+
+export const setIdentifierValue = (identifier: string, value: any) => {
+  identifierToValue.set(identifier, value)
+}

package/src/addTheme.ts

@@ -0,0 +1,66 @@
+import { getConfig, updateConfig } from './config'
+import { isWeb } from './constants/platform'
+import { getThemeCSSRules } from './helpers/getThemeCSSRules'
+import { ensureThemeVariable, proxyThemeToParents } from './helpers/themes'
+import { ThemeObject } from './types'
+
+export function addTheme({
+  name: themeName,
+  theme: themeIn,
+  insertCSS,
+  update,
+}: {
+  name: string
+  theme: ThemeObject
+  insertCSS?: boolean
+  update?: boolean
+}) {
+  const config = getConfig()
+  if (process.env.NODE_ENV === 'development') {
+    if (!config) {
+      throw new Error(`Must run createTamagui once before loading theme`)
+    }
+    if (!update && config.themes[themeName]) {
+      throw new Error(`Already defined theme "${themeName}", use updateTheme to change values`)
+    }
+  }
+
+  const theme = { ...themeIn }
+  for (const key in theme) {
+    ensureThemeVariable(theme, key)
+  }
+
+  const themeProxied = proxyThemeToParents(themeName, theme, config.themes)
+  config.themes[themeName] = themeProxied
+
+  let cssRules: string[] = []
+
+  if (isWeb) {
+    if (insertCSS) {
+      cssRules = getThemeCSSRules({
+        config,
+        themeName,
+        names: [themeName],
+        theme,
+      })
+      const id = `tamagui_theme_style_${themeName}`
+      const existing = document.querySelector(`#${id}`)
+      const style = document.createElement('style')
+      style.id = id
+      style.appendChild(document.createTextNode(cssRules.join('\n')))
+      document.head.appendChild(style)
+      if (existing) {
+        existing.parentElement?.removeChild(existing)
+      }
+    }
+  }
+
+  updateConfig('themes', { ...config.themes, [themeName]: themeProxied })
+
+  // trigger updates in components
+
+  return {
+    theme: themeProxied,
+    cssRules,
+  }
+}

package/src/config.ts

@@ -0,0 +1,38 @@
+import { ConfigListener, TamaguiInternalConfig } from './types'
+
+let conf: TamaguiInternalConfig | null
+
+export const setConfig = (next: TamaguiInternalConfig) => {
+  conf = next
+  if (configListeners.size) {
+    configListeners.forEach((cb) => cb(conf!))
+    configListeners.clear()
+  }
+}
+
+export const setConfigFont = (name: string, font: any, fontParsed: any) => {
+  if (process.env.NODE_ENV === 'development') {
+    if (!conf) throw new Error(`Haven't called createTamagui yet`)
+  }
+  Object.assign(conf!.fonts, { [name]: font })
+  Object.assign(conf!.fontsParsed, { [`$${name}`]: fontParsed })
+}
+
+export const getHasConfigured = () => !!conf
+export const getConfig = () => conf!
+export const getTokens = () => conf!.tokensParsed
+export const getThemes = () => conf!.themes
+
+export const configListeners = new Set<ConfigListener>()
+
+export const onConfiguredOnce = (cb: ConfigListener) => {
+  if (conf) {
+    cb(conf!)
+  } else {
+    configListeners.add(cb)
+  }
+}
+
+export const updateConfig = (key: string, value: any) => {
+  Object.assign(key, value)
+}

package/src/constants/constants.ts

@@ -0,0 +1,15 @@
+import { isWeb } from './platform'
+
+export const THEME_NAME_SEPARATOR = '_'
+export const THEME_CLASSNAME_PREFIX = `t_`
+
+export const stackDefaultStyles = {
+  alignItems: 'stretch',
+  flexShrink: 0,
+  // more accurately match react-native defaults on web
+  ...(isWeb && {
+    display: 'flex',
+    flexBasis: 'auto',
+    boxSizing: 'border-box',
+  }),
+}