@tamagui/core 1.0.0-alpha.28 → 1.0.0-alpha.32

package/dist/cjs/createComponent.js

@@ -70,8 +70,8 @@ var import_extendStaticConfig = __toModule(require("./helpers/extendStaticConfig
 var import_getSplitStyles = __toModule(require("./helpers/getSplitStyles"));
 var import_useFeatures = __toModule(require("./hooks/useFeatures"));
 var import_usePressable = __toModule(require("./hooks/usePressable"));
+var import_useTheme = __toModule(require("./hooks/useTheme"));
 var import_TextAncestorContext = __toModule(require("./views/TextAncestorContext"));
-var import_ThemeManagerContext = __toModule(require("./views/ThemeManagerContext"));
 const mouseUps = new Set();
 if (typeof document !== "undefined") {
   document.addEventListener("mouseup", () => {
@@ -79,6 +79,24 @@ if (typeof document !== "undefined") {
     mouseUps.clear();
   });
 }
+const defaultComponentState = {
+  hover: false,
+  press: false,
+  pressIn: false
+};
+function createShallowUpdate(setter) {
+  return (next) => {
+    setter((prev) => {
+      for (const key in next) {
+        if (prev[key] !== next[key]) {
+          return __spreadValues(__spreadValues({}, prev), next);
+        }
+      }
+      return prev;
+    });
+  };
+}
+__name(createShallowUpdate, "createShallowUpdate");
 function createComponent(configIn) {
   let staticConfig;
   if ("parsed" in configIn) {
@@ -97,21 +115,9 @@ function createComponent(configIn) {
     var _b;
     const forceUpdate = (0, import_use_force_update.useForceUpdate)();
     const features = (0, import_useFeatures.useFeatures)(props, { forceUpdate });
-    const manager = (0, import_react.useContext)(import_ThemeManagerContext.ThemeManagerContext);
-    const [state, set_] = (0, import_react.useState)(() => ({
-      hover: false,
-      press: false,
-      pressIn: false,
-      theme: manager.name
-    }));
-    const set = /* @__PURE__ */ __name((next) => set_((prev) => {
-      for (const key in next) {
-        if (prev[key] !== next[key]) {
-          return __spreadValues(__spreadValues({}, prev), next);
-        }
-      }
-      return prev;
-    }), "set");
+    const theme = (0, import_useTheme.useTheme)();
+    const [state, set_] = (0, import_react.useState)(defaultComponentState);
+    const set = createShallowUpdate(set_);
     if (process.env.NODE_ENV === "development" && !isText && import_platform.isWeb) {
       import_react.Children.toArray(props.children).forEach((item) => {
         if (typeof item === "string") {
@@ -121,7 +127,6 @@ function createComponent(configIn) {
     }
     const hasTextAncestor = import_platform.isWeb ? (0, import_react.useContext)(import_TextAncestorContext.TextAncestorContext) : false;
     const hostRef = (0, import_react.useRef)(null);
-    const theme = manager.theme || initialTheme;
     const {
       viewProps: viewPropsIn,
       pseudos,
@@ -227,7 +232,6 @@ function createComponent(configIn) {
         onStartShouldSetResponderCapture
       });
     }
-    const isTracking = (0, import_react.useRef)(false);
     const internal = (0, import_react.useRef)();
     if (!internal.current) {
       internal.current = {
@@ -236,18 +240,11 @@ function createComponent(configIn) {
     }
     (0, import_react.useEffect)(() => {
       internal.current.isMounted = true;
-      const dispose = manager == null ? void 0 : manager.onChangeTheme((name) => {
-        if (isTracking.current) {
-          set({ theme: name });
-        }
-      });
       return () => {
-        dispose();
         mouseUps.delete(unPress);
-        isTracking.current = false;
         internal.current.isMounted = false;
       };
-    }, [manager]);
+    }, []);
     const element = import_platform.isWeb ? !Component || typeof Component === "string" ? tag || Component : Component : Component;
     const ReactView = !import_platform.isWeb ? import_react_native.View : element || (hasTextAncestor ? "span" : "div");
     const ReactText = !import_platform.isWeb ? import_react_native.Text : element || "span";

package/dist/cjs/createComponent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/createComponent.tsx"],
-  "sourcesContent": ["import { concatClassName, stylePropsView } from '@tamagui/helpers'\nimport { useForceUpdate } from '@tamagui/use-force-update'\nimport React, {\n  Children,\n  Fragment,\n  createElement,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\nimport { StyleSheet, Text, View, ViewStyle } from 'react-native'\n\nimport { stackDefaultStyles } from './constants/constants'\nimport { isTouchDevice, isWeb } from './constants/platform'\nimport { rnw } from './constants/rnw'\nimport { onConfiguredOnce } from './createTamagui'\nimport { addStylesUsingClassname, useStylesAsClassname } from './helpers/addStylesUsingClassname'\nimport { extendStaticConfig, parseStaticConfig } from './helpers/extendStaticConfig'\nimport { getSplitStyles } from './helpers/getSplitStyles'\nimport { useFeatures } from './hooks/useFeatures'\nimport { usePressable } from './hooks/usePressable'\nimport {\n  SpaceTokens,\n  StaticComponent,\n  StaticConfig,\n  StaticConfigParsed,\n  TamaguiInternalConfig,\n} from './types'\nimport { TextAncestorContext } from './views/TextAncestorContext'\nimport { ThemeManagerContext } from './views/ThemeManagerContext'\n\nexport const mouseUps = new Set<Function>()\n\nif (typeof document !== 'undefined') {\n  document.addEventListener('mouseup', () => {\n    mouseUps.forEach((x) => x())\n    mouseUps.clear()\n  })\n}\n\ntype DefaultProps = {}\n\nexport function createComponent<A extends Object = DefaultProps>(\n  configIn: Partial<StaticConfig> | StaticConfigParsed\n) {\n  let staticConfig: StaticConfigParsed\n  if ('parsed' in configIn) {\n    staticConfig = configIn\n  } else {\n    staticConfig = parseStaticConfig(configIn)\n  }\n\n  const { Component, validStyles, isText, isZStack } = staticConfig\n  const validStyleProps = validStyles ?? stylePropsView\n\n  // split out default styles vs props so we can assign it to component.defaultProps\n  let defaultProps = null as any\n  let tamaguiConfig: TamaguiInternalConfig\n\n  // web uses className, native uses style\n  let defaultsStyle: any\n  let defaultsClassName = ''\n  let initialTheme: any\n\n  // see onConfiguredOnce below which attaches a name then to this component\n\n  const component = forwardRef<View, A>((props: any, forwardedRef) => {\n    const forceUpdate = useForceUpdate()\n    const features = useFeatures(props, { forceUpdate })\n    const manager = useContext(ThemeManagerContext)\n    const [state, set_] = useState(() => ({\n      hover: false,\n      press: false,\n      pressIn: false,\n      theme: manager.name,\n    }))\n    const set = (next: Partial<typeof state>) =>\n      set_((prev) => {\n        for (const key in next) {\n          if (prev[key] !== next[key]) {\n            return { ...prev, ...next }\n          }\n        }\n        return prev\n      })\n\n    // from react-native-web\n    if (process.env.NODE_ENV === 'development' && !isText && isWeb) {\n      Children.toArray(props.children).forEach((item) => {\n        if (typeof item === 'string') {\n          console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`)\n        }\n      })\n    }\n\n    const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false\n    const hostRef = useRef(null)\n\n    const theme = (manager.theme as any) || initialTheme\n\n    const {\n      viewProps: viewPropsIn,\n      pseudos,\n      style,\n      classNames,\n    } = getSplitStyles(props, staticConfig, theme)\n\n    const {\n      tag,\n      hitSlop,\n      children,\n      pointerEvents,\n      onPress,\n      onPressIn,\n      onPressOut,\n      onHoverIn,\n      onHoverOut,\n      space,\n      disabled,\n      onMouseEnter,\n      onMouseLeave,\n      hrefAttrs,\n      onMoveShouldSetResponder,\n      onMoveShouldSetResponderCapture,\n      onResponderEnd,\n      onResponderGrant,\n      onResponderMove,\n      onResponderReject,\n      onResponderRelease,\n      onResponderStart,\n      onResponderTerminate,\n      onResponderTerminationRequest,\n      onScrollShouldSetResponder,\n      onScrollShouldSetResponderCapture,\n      onSelectionChangeShouldSetResponder,\n      onSelectionChangeShouldSetResponderCapture,\n      onStartShouldSetResponder,\n      onStartShouldSetResponderCapture,\n      onMouseDown,\n      onClick,\n\n      accessible,\n      accessibilityRole,\n\n      // TODO feature load layout hook\n      onLayout,\n      ...viewProps\n    } = viewPropsIn\n\n    if (!isWeb) {\n      if (accessible) viewProps.accessible = accessible\n      if (accessibilityRole) viewProps.accessibilityRole = accessibilityRole\n    }\n\n    if (isWeb) {\n      // from react-native-web\n      rnw.useResponderEvents(hostRef, {\n        onMoveShouldSetResponder,\n        onMoveShouldSetResponderCapture,\n        onResponderEnd,\n        onResponderGrant,\n        onResponderMove,\n        onResponderReject,\n        onResponderRelease,\n        onResponderStart,\n        onResponderTerminate,\n        onResponderTerminationRequest,\n        onScrollShouldSetResponder,\n        onScrollShouldSetResponderCapture,\n        onSelectionChangeShouldSetResponder,\n        onSelectionChangeShouldSetResponderCapture,\n        onStartShouldSetResponder,\n        onStartShouldSetResponderCapture,\n      })\n    }\n\n    const isTracking = useRef(false)\n\n    // hasEverHadEvents prevents repareting if you remove onPress or similar...\n    const internal = useRef<{ isMounted: boolean; hasEverHadEvents?: boolean }>()\n    if (!internal.current) {\n      internal.current = {\n        isMounted: true,\n      }\n    }\n\n    useEffect(() => {\n      internal.current!.isMounted = true\n      const dispose = manager?.onChangeTheme((name) => {\n        if (isTracking.current) {\n          set({ theme: name })\n        }\n      })\n      return () => {\n        dispose()\n        mouseUps.delete(unPress)\n        isTracking.current = false\n        internal.current!.isMounted = false\n      }\n    }, [manager])\n\n    // element\n    const element = isWeb\n      ? !Component || typeof Component === 'string'\n        ? // default to tag, fallback to component (when both strings)\n          tag || Component\n        : Component\n      : Component\n    const ReactView = !isWeb ? View : element || (hasTextAncestor ? 'span' : 'div')\n    const ReactText = !isWeb ? Text : element || 'span'\n    const ViewComponent = isText ? ReactText : ReactView\n\n    // styles\n    const isHovering = !isTouchDevice && !disabled && pseudos && state.hover\n    const isPressing = !disabled && pseudos && state.press\n\n    const styles = [\n      // parity w react-native-web, only for text in text\n      // TODO this should be able to be done w css to replicate after extraction:\n      //  (.text .text { display: inline-flex; }) (but if they set display we'd need stronger precendence)\n      // isText && hasTextAncestor && isWeb ? { display: 'inline-flex' } : null,\n      style,\n      isHovering ? pseudos.hoverStyle || null : null,\n      isPressing ? pseudos.pressStyle || null : null,\n    ]\n\n    if (isWeb) {\n      const stylesClassNames = useStylesAsClassname(styles)\n      const classList = isText\n        ? [\n            defaultsClassName,\n            // hasTextAncestor === true && cssText.textHasAncestor,\n            // TODO MOVE TO VARIANTS [number] [any]\n            // numberOfLines != null && numberOfLines > 1 && cssText.textMultiLine,\n            classNames,\n            stylesClassNames,\n            props.className,\n          ]\n        : [defaultsClassName, props.className, classNames, stylesClassNames]\n\n      // @ts-ignore we are optimizing using arguments\n      const className = concatClassName(...classList)\n      if (process.env.NODE_ENV === 'development') {\n        if (props['debug']) {\n          // prettier-ignore\n          console.log('\uD83E\uDD5A className', { style, styles, classList, stylesClassNames, className })\n        }\n      }\n      viewProps.className = className\n    } else {\n      viewProps.style = styles\n    }\n\n    if (pointerEvents) {\n      viewProps.pointerEvents = pointerEvents\n    }\n\n    if (isWeb) {\n      // from react-native-web\n      const platformMethodsRef = rnw.usePlatformMethods(viewProps)\n      const setRef = rnw.useMergeRefs(hostRef, platformMethodsRef, forwardedRef)\n      viewProps.ref = setRef\n      if (props.href != null && hrefAttrs != null) {\n        const { download, rel, target } = hrefAttrs\n        if (download != null) {\n          viewProps.download = download\n        }\n        if (rel != null) {\n          viewProps.rel = rel\n        }\n        if (typeof target === 'string') {\n          viewProps.target = target.charAt(0) !== '_' ? '_' + target : target\n        }\n      }\n    } else {\n      if (forwardedRef) {\n        viewProps.ref = forwardedRef\n      }\n    }\n\n    const attachPress = !!(\n      (pseudos && pseudos.pressStyle) ||\n      onPress ||\n      onPressOut ||\n      onPressIn ||\n      onClick\n    )\n    const attachHover =\n      isWeb &&\n      !isTouchDevice &&\n      !!((pseudos && pseudos.hoverStyle) || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave)\n\n    // check presence to prevent reparenting bugs, allows for onPress={x ? function : undefined} usage\n    // while avoiding reparenting...\n    // once proper reparenting is supported, we can remove this and use that...\n    const shouldAttach =\n      internal.current.hasEverHadEvents ||\n      attachPress ||\n      attachHover ||\n      'pressStyle' in props ||\n      'onPress' in props ||\n      'onPressIn' in props ||\n      'onPressOut' in props ||\n      (isWeb &&\n        ('hoverStyle' in props ||\n          'onClick' in props ||\n          'onHoverIn' in props ||\n          'onHoverOut' in props ||\n          'onMouseEnter' in props ||\n          'onMouseLeave' in props))\n\n    // never remove events as we wrap in a div (for now, may be able to remove..)\n    if (shouldAttach) {\n      internal.current.hasEverHadEvents = true\n    }\n\n    const unPress = useCallback(() => {\n      if (!internal.current!.isMounted) return\n      set({\n        press: false,\n        pressIn: false,\n      })\n    }, [])\n\n    const events = shouldAttach\n      ? {\n          ...(!isWeb && {\n            // non web\n            onPressOut: (e) => {\n              unPress()\n              onPressOut?.(e)\n            },\n          }),\n          ...(isWeb &&\n            !isTouchDevice && {\n              onMouseEnter:\n                attachHover || attachPress\n                  ? (e) => {\n                      let next: Partial<typeof state> = {}\n                      if (attachHover) {\n                        next.hover = true\n                      }\n                      if (state.pressIn) {\n                        next.press = true\n                      }\n                      if (Object.keys(next).length) {\n                        set(next)\n                      }\n                      onHoverIn?.(e)\n                      onMouseEnter?.(e)\n                    }\n                  : undefined,\n              onMouseLeave:\n                attachHover || attachPress\n                  ? (e) => {\n                      let next: Partial<typeof state> = {}\n                      mouseUps.add(unPress)\n                      if (attachHover) {\n                        next.hover = false\n                      }\n                      if (state.pressIn) {\n                        next.press = false\n                        next.pressIn = false\n                      }\n                      if (Object.keys(next).length) {\n                        set(next)\n                      }\n                      onHoverOut?.(e)\n                      onMouseLeave?.(e)\n                    }\n                  : undefined,\n            }),\n          onMouseDown: attachPress\n            ? (e) => {\n                set({\n                  press: true,\n                  pressIn: true,\n                })\n                onPressIn?.(e)\n                onMouseDown?.(e)\n              }\n            : (onPressIn as any),\n          onClick: attachPress\n            ? (e) => {\n                // this caused issue with next.js passing href\n                // e.preventDefault()\n                onPress?.(e)\n                onClick?.(e)\n                unPress()\n                onPressOut?.(e)\n              }\n            : (onPressOut as any),\n        }\n      : null\n\n    if (events) {\n      if (typeof ViewComponent !== 'string') {\n        // TODO once we do the above we can then rely entirely on pressStyle returned here isntead of above pressStyle logic\n        const [pressProps] = usePressable({\n          disabled,\n          hitSlop,\n          onPressIn: events.onMouseDown,\n          onPressOut: events.onPressOut,\n          onPress: events.onClick,\n        })\n        Object.assign(viewProps, pressProps)\n      } else {\n        Object.assign(viewProps, events)\n      }\n    }\n\n    const childEls = spacedChildren({\n      children,\n      space,\n      flexDirection: props.flexDirection || defaultProps?.flexDirection,\n      isZStack: isZStack,\n    })\n\n    let content: any\n\n    // replicate react-native-web's `createElement`\n    if (isWeb && rnw) {\n      const domProps = rnw.createDOMProps(viewProps)\n      const className =\n        domProps.className && domProps.className !== viewProps.className\n          ? `${domProps.className} ${viewProps.className}`\n          : viewProps.className\n      Object.assign(viewProps, domProps)\n      viewProps.className = className\n      content = createElement(ViewComponent, viewProps, childEls)\n    } else {\n      content = createElement(ViewComponent, viewProps, childEls)\n    }\n\n    const shouldWrapTextAncestor = isWeb && isText && !hasTextAncestor\n    if (shouldWrapTextAncestor) {\n      // from react-native-web\n      // @ts-ignore\n      content = createElement(TextAncestorContext.Provider, { value: true }, content)\n    }\n\n    if (process.env.NODE_ENV === 'development') {\n      if (props['debug']) {\n        viewProps['debug'] = true\n        console.log('\uD83E\uDD5A props in:', props)\n        console.log('\uD83E\uDD5A props out:', viewProps)\n        console.log(props.onClick?.toString())\n        // prettier-ignore\n        console.log('\uD83E\uDD5A etc:', { shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls })\n        // only on browser because node expands it huge\n        if (isWeb) {\n          console.log('\uD83E\uDD5A component info', { staticConfig, tamaguiConfig })\n        }\n      }\n    }\n\n    return (\n      <>\n        {features}\n        {content}\n      </>\n    )\n  })\n\n  // Once configuration is run and all components are registered\n  // get default props + className and analyze styles\n  onConfiguredOnce((conf) => {\n    tamaguiConfig = conf\n    initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]\n    const next = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, true)\n    if (isWeb) {\n      if (next.classNames) {\n        defaultsClassName += next.classNames + ' '\n      }\n      defaultsClassName += addStylesUsingClassname([next.style, next.pseudos])\n    } else {\n      if (!hasWarnedOnce) {\n        hasWarnedOnce = true\n        console.log('\u26A0\uFE0F TODO account for default styles for media queries')\n      }\n    }\n    // @ts-ignore\n    component.defaultProps = {\n      ...next.viewProps,\n      ...component.defaultProps,\n    }\n    if (process.env.NODE_ENV === 'development') {\n      if (staticConfig.defaultProps?.debug) {\n        console.log('tamagui debug component:', next, defaultsClassName, component.defaultProps)\n      }\n    }\n  })\n\n  component['staticConfig'] = {\n    validStyles: validStyleProps,\n    ...staticConfig,\n  }\n\n  const res = component as any as StaticComponent<A, void>\n\n  // add extractable HoC\n  res['extractable'] = (Component: any, conf?: StaticConfig) => {\n    Component['staticConfig'] = extendStaticConfig(res, {\n      ...conf,\n      neverFlatten: true,\n      defaultProps: {\n        ...Component.defaultProps,\n        ...conf?.defaultProps,\n      },\n    })\n    return Component\n  }\n\n  return res\n}\n\nlet hasWarnedOnce = false\n\n// dont used styled() here to avoid circular deps\n// keep inline to avoid circular deps\n\nexport const Spacer = createComponent<{ size?: number | SpaceTokens; flex?: boolean | number }>({\n  defaultProps: {\n    ...stackDefaultStyles,\n    size: true,\n  },\n  variants: {\n    size: {\n      '...size': (size, { tokens }) => {\n        size = size == true ? '$true' : size\n        return {\n          width: tokens.size[size] ?? size,\n          height: tokens.size[size] ?? size,\n        }\n      },\n    },\n\n    direction: {\n      horizontal: {\n        height: 0,\n      },\n      vertical: {\n        width: 0,\n      },\n    },\n  },\n})\n\nexport function spacedChildren({\n  isZStack,\n  children,\n  space,\n  flexDirection,\n}: {\n  isZStack?: boolean\n  children: any\n  space?: any\n  flexDirection?: ViewStyle['flexDirection']\n}) {\n  if (!space && !isZStack) {\n    return children\n  }\n  const childrenList = Children.toArray(children)\n  const len = childrenList.length\n  if (len === 1) {\n    return children\n  }\n  const next: any[] = []\n  for (const [index, child] of childrenList.entries()) {\n    if (child === null || child === undefined) {\n      continue\n    }\n\n    const key = `${child?.['key'] ?? index}`\n\n    next.push(<Fragment key={key}>{isZStack ? <Absolute>{child}</Absolute> : child}</Fragment>)\n\n    // allows for custom visually hidden components that dont insert spacing\n    if (child?.['type']?.['isVisuallyHidden']) {\n      continue\n    }\n\n    if (index !== len - 1) {\n      if (space) {\n        next.push(\n          <Spacer\n            key={`${key}_spacer`}\n            // @ts-ignore TODO\n            direction={\n              flexDirection === 'row' || flexDirection === 'row-reverse' ? 'horizontal' : 'vertical'\n            }\n            size={space}\n          />\n        )\n      }\n    }\n  }\n  return next\n}\n\n// for now not so \"tamagui-y\"\nconst Absolute = ({ children }) => <View style={sheet.fullscreen}>{children}</View>\nconst sheet = StyleSheet.create({\n  fullscreen: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n  },\n})\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { concatClassName, stylePropsView } from '@tamagui/helpers'\nimport { useForceUpdate } from '@tamagui/use-force-update'\nimport React, {\n  Children,\n  Fragment,\n  createElement,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\nimport { StyleSheet, Text, View, ViewStyle } from 'react-native'\n\nimport { stackDefaultStyles } from './constants/constants'\nimport { isTouchDevice, isWeb } from './constants/platform'\nimport { rnw } from './constants/rnw'\nimport { onConfiguredOnce } from './createTamagui'\nimport { addStylesUsingClassname, useStylesAsClassname } from './helpers/addStylesUsingClassname'\nimport { extendStaticConfig, parseStaticConfig } from './helpers/extendStaticConfig'\nimport { getSplitStyles } from './helpers/getSplitStyles'\nimport { useFeatures } from './hooks/useFeatures'\nimport { usePressable } from './hooks/usePressable'\nimport { useTheme } from './hooks/useTheme'\nimport {\n  SpaceTokens,\n  StaticComponent,\n  StaticConfig,\n  StaticConfigParsed,\n  TamaguiInternalConfig,\n} from './types'\nimport { TextAncestorContext } from './views/TextAncestorContext'\n\nexport const mouseUps = new Set<Function>()\n\nif (typeof document !== 'undefined') {\n  document.addEventListener('mouseup', () => {\n    mouseUps.forEach((x) => x())\n    mouseUps.clear()\n  })\n}\n\ntype DefaultProps = {}\n\nconst defaultComponentState = {\n  hover: false,\n  press: false,\n  pressIn: false,\n}\n\ntype ComponentState = typeof defaultComponentState\n\nfunction createShallowUpdate(setter: React.Dispatch<React.SetStateAction<ComponentState>>) {\n  return (next: Partial<ComponentState>) => {\n    setter((prev) => {\n      for (const key in next) {\n        if (prev[key] !== next[key]) {\n          return { ...prev, ...next }\n        }\n      }\n      return prev\n    })\n  }\n}\n\nexport function createComponent<A extends Object = DefaultProps>(\n  configIn: Partial<StaticConfig> | StaticConfigParsed\n) {\n  let staticConfig: StaticConfigParsed\n  if ('parsed' in configIn) {\n    staticConfig = configIn\n  } else {\n    staticConfig = parseStaticConfig(configIn)\n  }\n\n  const { Component, validStyles, isText, isZStack } = staticConfig\n  const validStyleProps = validStyles ?? stylePropsView\n\n  // split out default styles vs props so we can assign it to component.defaultProps\n  let defaultProps = null as any\n  let tamaguiConfig: TamaguiInternalConfig\n\n  // web uses className, native uses style\n  let defaultsStyle: any\n  let defaultsClassName = ''\n  let initialTheme: any\n\n  // see onConfiguredOnce below which attaches a name then to this component\n\n  const component = forwardRef<View, A>((props: any, forwardedRef) => {\n    const forceUpdate = useForceUpdate()\n    const features = useFeatures(props, { forceUpdate })\n    const theme = useTheme()\n    const [state, set_] = useState<ComponentState>(defaultComponentState)\n    const set = createShallowUpdate(set_)\n\n    // from react-native-web\n    if (process.env.NODE_ENV === 'development' && !isText && isWeb) {\n      Children.toArray(props.children).forEach((item) => {\n        if (typeof item === 'string') {\n          console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`)\n        }\n      })\n    }\n\n    const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false\n    const hostRef = useRef(null)\n\n    const {\n      viewProps: viewPropsIn,\n      pseudos,\n      style,\n      classNames,\n    } = getSplitStyles(props, staticConfig, theme)\n\n    const {\n      tag,\n      hitSlop,\n      children,\n      pointerEvents,\n      onPress,\n      onPressIn,\n      onPressOut,\n      onHoverIn,\n      onHoverOut,\n      space,\n      disabled,\n      onMouseEnter,\n      onMouseLeave,\n      hrefAttrs,\n      onMoveShouldSetResponder,\n      onMoveShouldSetResponderCapture,\n      onResponderEnd,\n      onResponderGrant,\n      onResponderMove,\n      onResponderReject,\n      onResponderRelease,\n      onResponderStart,\n      onResponderTerminate,\n      onResponderTerminationRequest,\n      onScrollShouldSetResponder,\n      onScrollShouldSetResponderCapture,\n      onSelectionChangeShouldSetResponder,\n      onSelectionChangeShouldSetResponderCapture,\n      onStartShouldSetResponder,\n      onStartShouldSetResponderCapture,\n      onMouseDown,\n      onClick,\n\n      accessible,\n      accessibilityRole,\n\n      // TODO feature load layout hook\n      onLayout,\n      ...viewProps\n    } = viewPropsIn\n\n    if (!isWeb) {\n      if (accessible) viewProps.accessible = accessible\n      if (accessibilityRole) viewProps.accessibilityRole = accessibilityRole\n    }\n\n    if (isWeb) {\n      // from react-native-web\n      rnw.useResponderEvents(hostRef, {\n        onMoveShouldSetResponder,\n        onMoveShouldSetResponderCapture,\n        onResponderEnd,\n        onResponderGrant,\n        onResponderMove,\n        onResponderReject,\n        onResponderRelease,\n        onResponderStart,\n        onResponderTerminate,\n        onResponderTerminationRequest,\n        onScrollShouldSetResponder,\n        onScrollShouldSetResponderCapture,\n        onSelectionChangeShouldSetResponder,\n        onSelectionChangeShouldSetResponderCapture,\n        onStartShouldSetResponder,\n        onStartShouldSetResponderCapture,\n      })\n    }\n\n    // hasEverHadEvents prevents repareting if you remove onPress or similar...\n    const internal = useRef<{ isMounted: boolean; hasEverHadEvents?: boolean }>()\n    if (!internal.current) {\n      internal.current = {\n        isMounted: true,\n      }\n    }\n\n    useEffect(() => {\n      internal.current!.isMounted = true\n      return () => {\n        mouseUps.delete(unPress)\n        internal.current!.isMounted = false\n      }\n    }, [])\n\n    // element\n    const element = isWeb\n      ? !Component || typeof Component === 'string'\n        ? // default to tag, fallback to component (when both strings)\n          tag || Component\n        : Component\n      : Component\n    const ReactView = !isWeb ? View : element || (hasTextAncestor ? 'span' : 'div')\n    const ReactText = !isWeb ? Text : element || 'span'\n    const ViewComponent = isText ? ReactText : ReactView\n\n    // styles\n    const isHovering = !isTouchDevice && !disabled && pseudos && state.hover\n    const isPressing = !disabled && pseudos && state.press\n\n    const styles = [\n      // parity w react-native-web, only for text in text\n      // TODO this should be able to be done w css to replicate after extraction:\n      //  (.text .text { display: inline-flex; }) (but if they set display we'd need stronger precendence)\n      // isText && hasTextAncestor && isWeb ? { display: 'inline-flex' } : null,\n      style,\n      isHovering ? pseudos.hoverStyle || null : null,\n      isPressing ? pseudos.pressStyle || null : null,\n    ]\n\n    if (isWeb) {\n      const stylesClassNames = useStylesAsClassname(styles)\n      const classList = isText\n        ? [\n            defaultsClassName,\n            // hasTextAncestor === true && cssText.textHasAncestor,\n            // TODO MOVE TO VARIANTS [number] [any]\n            // numberOfLines != null && numberOfLines > 1 && cssText.textMultiLine,\n            classNames,\n            stylesClassNames,\n            props.className,\n          ]\n        : [defaultsClassName, props.className, classNames, stylesClassNames]\n\n      // @ts-ignore we are optimizing using arguments\n      const className = concatClassName(...classList)\n      if (process.env.NODE_ENV === 'development') {\n        if (props['debug']) {\n          // prettier-ignore\n          console.log('\uD83E\uDD5A className', { style, styles, classList, stylesClassNames, className })\n        }\n      }\n      viewProps.className = className\n    } else {\n      viewProps.style = styles\n    }\n\n    if (pointerEvents) {\n      viewProps.pointerEvents = pointerEvents\n    }\n\n    if (isWeb) {\n      // from react-native-web\n      const platformMethodsRef = rnw.usePlatformMethods(viewProps)\n      const setRef = rnw.useMergeRefs(hostRef, platformMethodsRef, forwardedRef)\n      viewProps.ref = setRef\n      if (props.href != null && hrefAttrs != null) {\n        const { download, rel, target } = hrefAttrs\n        if (download != null) {\n          viewProps.download = download\n        }\n        if (rel != null) {\n          viewProps.rel = rel\n        }\n        if (typeof target === 'string') {\n          viewProps.target = target.charAt(0) !== '_' ? '_' + target : target\n        }\n      }\n    } else {\n      if (forwardedRef) {\n        viewProps.ref = forwardedRef\n      }\n    }\n\n    const attachPress = !!(\n      (pseudos && pseudos.pressStyle) ||\n      onPress ||\n      onPressOut ||\n      onPressIn ||\n      onClick\n    )\n    const attachHover =\n      isWeb &&\n      !isTouchDevice &&\n      !!((pseudos && pseudos.hoverStyle) || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave)\n\n    // check presence to prevent reparenting bugs, allows for onPress={x ? function : undefined} usage\n    // while avoiding reparenting...\n    // once proper reparenting is supported, we can remove this and use that...\n    const shouldAttach =\n      internal.current.hasEverHadEvents ||\n      attachPress ||\n      attachHover ||\n      'pressStyle' in props ||\n      'onPress' in props ||\n      'onPressIn' in props ||\n      'onPressOut' in props ||\n      (isWeb &&\n        ('hoverStyle' in props ||\n          'onClick' in props ||\n          'onHoverIn' in props ||\n          'onHoverOut' in props ||\n          'onMouseEnter' in props ||\n          'onMouseLeave' in props))\n\n    // never remove events as we wrap in a div (for now, may be able to remove..)\n    if (shouldAttach) {\n      internal.current.hasEverHadEvents = true\n    }\n\n    const unPress = useCallback(() => {\n      if (!internal.current!.isMounted) return\n      set({\n        press: false,\n        pressIn: false,\n      })\n    }, [])\n\n    const events = shouldAttach\n      ? {\n          ...(!isWeb && {\n            // non web\n            onPressOut: (e) => {\n              unPress()\n              onPressOut?.(e)\n            },\n          }),\n          ...(isWeb &&\n            !isTouchDevice && {\n              onMouseEnter:\n                attachHover || attachPress\n                  ? (e) => {\n                      let next: Partial<typeof state> = {}\n                      if (attachHover) {\n                        next.hover = true\n                      }\n                      if (state.pressIn) {\n                        next.press = true\n                      }\n                      if (Object.keys(next).length) {\n                        set(next)\n                      }\n                      onHoverIn?.(e)\n                      onMouseEnter?.(e)\n                    }\n                  : undefined,\n              onMouseLeave:\n                attachHover || attachPress\n                  ? (e) => {\n                      let next: Partial<typeof state> = {}\n                      mouseUps.add(unPress)\n                      if (attachHover) {\n                        next.hover = false\n                      }\n                      if (state.pressIn) {\n                        next.press = false\n                        next.pressIn = false\n                      }\n                      if (Object.keys(next).length) {\n                        set(next)\n                      }\n                      onHoverOut?.(e)\n                      onMouseLeave?.(e)\n                    }\n                  : undefined,\n            }),\n          onMouseDown: attachPress\n            ? (e) => {\n                set({\n                  press: true,\n                  pressIn: true,\n                })\n                onPressIn?.(e)\n                onMouseDown?.(e)\n              }\n            : (onPressIn as any),\n          onClick: attachPress\n            ? (e) => {\n                // this caused issue with next.js passing href\n                // e.preventDefault()\n                onPress?.(e)\n                onClick?.(e)\n                unPress()\n                onPressOut?.(e)\n              }\n            : (onPressOut as any),\n        }\n      : null\n\n    if (events) {\n      if (typeof ViewComponent !== 'string') {\n        // TODO once we do the above we can then rely entirely on pressStyle returned here isntead of above pressStyle logic\n        const [pressProps] = usePressable({\n          disabled,\n          hitSlop,\n          onPressIn: events.onMouseDown,\n          onPressOut: events.onPressOut,\n          onPress: events.onClick,\n        })\n        Object.assign(viewProps, pressProps)\n      } else {\n        Object.assign(viewProps, events)\n      }\n    }\n\n    const childEls = spacedChildren({\n      children,\n      space,\n      flexDirection: props.flexDirection || defaultProps?.flexDirection,\n      isZStack: isZStack,\n    })\n\n    let content: any\n\n    // replicate react-native-web's `createElement`\n    if (isWeb && rnw) {\n      const domProps = rnw.createDOMProps(viewProps)\n      const className =\n        domProps.className && domProps.className !== viewProps.className\n          ? `${domProps.className} ${viewProps.className}`\n          : viewProps.className\n      Object.assign(viewProps, domProps)\n      viewProps.className = className\n      content = createElement(ViewComponent, viewProps, childEls)\n    } else {\n      content = createElement(ViewComponent, viewProps, childEls)\n    }\n\n    const shouldWrapTextAncestor = isWeb && isText && !hasTextAncestor\n    if (shouldWrapTextAncestor) {\n      // from react-native-web\n      // @ts-ignore\n      content = createElement(TextAncestorContext.Provider, { value: true }, content)\n    }\n\n    if (process.env.NODE_ENV === 'development') {\n      if (props['debug']) {\n        viewProps['debug'] = true\n        console.log('\uD83E\uDD5A props in:', props)\n        console.log('\uD83E\uDD5A props out:', viewProps)\n        console.log(props.onClick?.toString())\n        // prettier-ignore\n        console.log('\uD83E\uDD5A etc:', { shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls })\n        // only on browser because node expands it huge\n        if (isWeb) {\n          console.log('\uD83E\uDD5A component info', { staticConfig, tamaguiConfig })\n        }\n      }\n    }\n\n    return (\n      <>\n        {features}\n        {content}\n      </>\n    )\n  })\n\n  // Once configuration is run and all components are registered\n  // get default props + className and analyze styles\n  onConfiguredOnce((conf) => {\n    tamaguiConfig = conf\n    initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]\n    const next = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, true)\n    if (isWeb) {\n      if (next.classNames) {\n        defaultsClassName += next.classNames + ' '\n      }\n      defaultsClassName += addStylesUsingClassname([next.style, next.pseudos])\n    } else {\n      if (!hasWarnedOnce) {\n        hasWarnedOnce = true\n        console.log('\u26A0\uFE0F TODO account for default styles for media queries')\n      }\n    }\n    // @ts-ignore\n    component.defaultProps = {\n      ...next.viewProps,\n      ...component.defaultProps,\n    }\n    if (process.env.NODE_ENV === 'development') {\n      if (staticConfig.defaultProps?.debug) {\n        console.log('tamagui debug component:', next, defaultsClassName, component.defaultProps)\n      }\n    }\n  })\n\n  component['staticConfig'] = {\n    validStyles: validStyleProps,\n    ...staticConfig,\n  }\n\n  const res = component as any as StaticComponent<A, void>\n\n  // add extractable HoC\n  res['extractable'] = (Component: any, conf?: StaticConfig) => {\n    Component['staticConfig'] = extendStaticConfig(res, {\n      ...conf,\n      neverFlatten: true,\n      defaultProps: {\n        ...Component.defaultProps,\n        ...conf?.defaultProps,\n      },\n    })\n    return Component\n  }\n\n  return res\n}\n\nlet hasWarnedOnce = false\n\n// dont used styled() here to avoid circular deps\n// keep inline to avoid circular deps\n\nexport const Spacer = createComponent<{ size?: number | SpaceTokens; flex?: boolean | number }>({\n  defaultProps: {\n    ...stackDefaultStyles,\n    size: true,\n  },\n  variants: {\n    size: {\n      '...size': (size, { tokens }) => {\n        size = size == true ? '$true' : size\n        return {\n          width: tokens.size[size] ?? size,\n          height: tokens.size[size] ?? size,\n        }\n      },\n    },\n\n    direction: {\n      horizontal: {\n        height: 0,\n      },\n      vertical: {\n        width: 0,\n      },\n    },\n  },\n})\n\nexport function spacedChildren({\n  isZStack,\n  children,\n  space,\n  flexDirection,\n}: {\n  isZStack?: boolean\n  children: any\n  space?: any\n  flexDirection?: ViewStyle['flexDirection']\n}) {\n  if (!space && !isZStack) {\n    return children\n  }\n  const childrenList = Children.toArray(children)\n  const len = childrenList.length\n  if (len === 1) {\n    return children\n  }\n  const next: any[] = []\n  for (const [index, child] of childrenList.entries()) {\n    if (child === null || child === undefined) {\n      continue\n    }\n\n    const key = `${child?.['key'] ?? index}`\n\n    next.push(<Fragment key={key}>{isZStack ? <Absolute>{child}</Absolute> : child}</Fragment>)\n\n    // allows for custom visually hidden components that dont insert spacing\n    if (child?.['type']?.['isVisuallyHidden']) {\n      continue\n    }\n\n    if (index !== len - 1) {\n      if (space) {\n        next.push(\n          <Spacer\n            key={`${key}_spacer`}\n            // @ts-ignore TODO\n            direction={\n              flexDirection === 'row' || flexDirection === 'row-reverse' ? 'horizontal' : 'vertical'\n            }\n            size={space}\n          />\n        )\n      }\n    }\n  }\n  return next\n}\n\n// for now not so \"tamagui-y\"\nconst Absolute = ({ children }) => <View style={sheet.fullscreen}>{children}</View>\nconst sheet = StyleSheet.create({\n  fullscreen: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n  },\n})\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/createTamagui.js

@@ -49,9 +49,9 @@ __export(exports, {
   onConfiguredOnce: () => onConfiguredOnce
 });
 var import_helpers = __toModule(require("@tamagui/helpers"));
+var import_platform = __toModule(require("./constants/platform"));
 var import_createVariable = __toModule(require("./createVariable"));
 var import_createTamaguiProvider = __toModule(require("./helpers/createTamaguiProvider"));
-var import_validate = __toModule(require("./helpers/validate"));
 var import_useMedia = __toModule(require("./hooks/useMedia"));
 let conf;
 const getHasConfigured = /* @__PURE__ */ __name(() => !!conf, "getHasConfigured");
@@ -68,10 +68,8 @@ const onConfiguredOnce = /* @__PURE__ */ __name((cb) => {
 }, "onConfiguredOnce");
 const PREFIX = `theme--`;
 function createTamagui(config) {
-  if (process.env.NODE_ENV === "development") {
-    if (!config["parsed"]) {
-      (0, import_validate.validateConfig)(config);
-    }
+  if (config["parsed"]) {
+    return config;
   }
   if (conf) {
     console.warn("Called createTamagui twice! Should never do so");
@@ -81,62 +79,62 @@ function createTamagui(config) {
     defaultActive: config.mediaQueryDefaultActive
   });
   const themeConfig = (() => {
+    var _a;
     let cssRules = [];
-    let tokenRule = `:root {`;
     const varsByValue = new Map();
-    const addVar = /* @__PURE__ */ __name((v) => {
-      varsByValue[v.val] = v;
-      const rule = `--${v.name}:${typeof v.val === "number" ? `${v.val}px` : v.val};`;
-      tokenRule += rule;
-    }, "addVar");
-    for (const key in config.tokens) {
-      for (const skey in config.tokens[key]) {
-        const val = config.tokens[key][skey];
-        if (key === "font") {
-          for (const fkey in val) {
-            if (fkey === "family") {
-              addVar(val[fkey]);
-            } else {
-              for (const fskey in val[fkey]) {
-                addVar(val[fkey][fskey]);
+    if (import_platform.isWeb) {
+      let tokenRule = `:root {`;
+      const addVar = /* @__PURE__ */ __name((v) => {
+        varsByValue[v.val] = v;
+        const rule = `--${v.name}:${typeof v.val === "number" ? `${v.val}px` : v.val};`;
+        tokenRule += rule;
+      }, "addVar");
+      for (const key in config.tokens) {
+        for (const skey in config.tokens[key]) {
+          const val = config.tokens[key][skey];
+          if (key === "font") {
+            for (const fkey in val) {
+              if (fkey === "family") {
+                addVar(val[fkey]);
+              } else {
+                for (const fskey in val[fkey]) {
+                  addVar(val[fkey][fskey]);
+                }
               }
             }
+          } else {
+            addVar(val);
           }
-        } else {
-          addVar(val);
         }
       }
-    }
-    cssRules.push(`${tokenRule}
+      cssRules.push(`${tokenRule}
 }`);
+    }
     for (const themeName in config.themes) {
-      config.themes[themeName] = __spreadValues({}, config.themes[themeName]);
-      const theme = config.themes[themeName];
+      const theme = __spreadValues({}, config.themes[themeName]);
+      config.themes[themeName] = theme;
       let vars = "";
       for (const themeKey in theme) {
-        const val = theme[themeKey];
-        const getVariableCSS = /* @__PURE__ */ __name((inv) => {
-          const v = varsByValue[inv] ?? inv;
-          return (0, import_createVariable.isVariable)(v) ? `--${themeKey}:var(--${v.name});` : `--${themeKey}:${v};`;
-        }, "getVariableCSS");
-        vars += getVariableCSS(val);
-        if (!(0, import_createVariable.isVariable)(val)) {
-          theme[themeKey] = (0, import_createVariable.createVariable)({
-            name: themeKey,
-            val
-          });
+        if (import_platform.isWeb) {
+          const val = theme[themeKey];
+          const varName = val instanceof import_createVariable.Variable ? val.name : (_a = varsByValue[val]) == null ? void 0 : _a.name;
+          vars += `--${themeKey}:${varName ? `var(--${varName});` : `${val}`};`;
         }
+        ensureThemeVariable(theme, themeKey);
       }
-      const [themeClassName, parentName] = themeName.includes("-") ? themeName.split("-") : [themeName, ""];
-      const oppositeName = parentName === "dark" ? "light" : "dark";
-      const cssParentSel = parentName ? `.${PREFIX}${parentName}` : "";
-      const cssChildSel = `.${PREFIX}${themeClassName}`;
-      const cssSel = `${cssParentSel} ${cssChildSel}`;
-      const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} {
+      if (import_platform.isWeb) {
+        const [themeClassName, parentName] = themeName.includes("-") ? themeName.split("-") : [themeName, ""];
+        const oppositeName = parentName === "dark" ? "light" : "dark";
+        const cssParentSel = parentName ? `.${PREFIX}${parentName}` : "";
+        const cssChildSel = `.${PREFIX}${themeClassName}`;
+        const cssSel = `${cssParentSel} ${cssChildSel}`;
+        const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} {
 ${vars}
 }`;
-      cssRules.push(cssRule);
+        cssRules.push(cssRule);
+      }
     }
+    varsByValue.clear();
     Object.freeze(cssRules);
     return {
       cssRules,
@@ -205,4 +203,21 @@ const parseTokens = /* @__PURE__ */ __name((tokens) => {
   }
   return res;
 }, "parseTokens");
+function ensureThemeVariable(theme, key) {
+  const val = theme[key];
+  if (!(val instanceof import_createVariable.Variable)) {
+    theme[key] = (0, import_createVariable.createVariable)({
+      name: key,
+      val
+    });
+  } else {
+    if (val.name !== key) {
+      theme[key] = (0, import_createVariable.createVariable)({
+        name: key,
+        val: val.val
+      });
+    }
+  }
+}
+__name(ensureThemeVariable, "ensureThemeVariable");
 //# sourceMappingURL=createTamagui.js.map

package/dist/cjs/createTamagui.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/createTamagui.ts"],
-  "sourcesContent": ["import { getStyleRules } from '@tamagui/helpers'\n\nimport { Variable, createVariable, isVariable } from './createVariable'\nimport { createTamaguiProvider } from './helpers/createTamaguiProvider'\nimport { validateConfig } from './helpers/validate'\nimport { configureMedia } from './hooks/useMedia'\nimport {\n  CreateTamaguiConfig,\n  GenericTamaguiConfig,\n  MediaQueryKey,\n  TamaguiInternalConfig,\n  TamaguiProviderProps,\n} from './types'\n\nexport type CreateTamaguiProps = TamaguiProviderProps &\n  // we omit and re-declare it because we need to allow instantation types to be flexible\n  // user then re-defines the types after createTamagui returns the typed object they want\n  Omit<GenericTamaguiConfig, 'themes'> & {\n    themes: {\n      [key: string]: {\n        [key: string]: string | number | Variable\n      }\n    }\n    // for ssr/native, will default to active\n    mediaQueryDefaultActive?: MediaQueryKey[]\n  }\n\nlet conf: TamaguiInternalConfig | null\n\nexport const getHasConfigured = () => !!conf\n\nexport const getTamagui = () => conf!\nexport const getTokens = () => conf!.tokensParsed\nexport const getThemes = () => conf!.themes\n\ntype ConfigListener = (conf: TamaguiInternalConfig) => void\nconst configListeners = new Set<ConfigListener>()\nexport const onConfiguredOnce = (cb: ConfigListener) => {\n  if (conf) {\n    cb(conf)\n  } else {\n    configListeners.add(cb)\n  }\n}\n\nconst PREFIX = `theme--`\n\nexport function createTamagui<Conf extends CreateTamaguiProps>(\n  config: Conf\n): Conf extends CreateTamaguiConfig<infer A, infer B, infer C, infer D>\n  ? TamaguiInternalConfig<A, B, C, D>\n  : unknown {\n  if (process.env.NODE_ENV === 'development') {\n    // config is re-run by the @tamagui/static, dont double validate\n    if (!config['parsed']) {\n      validateConfig(config)\n    }\n  }\n  // test env loads a few times as it runs diff tests\n  if (conf) {\n    console.warn('Called createTamagui twice! Should never do so')\n    // throw new Error(`#000 createTamagui called twice`)\n  }\n\n  configureMedia({\n    queries: config.media as any,\n    defaultActive: config.mediaQueryDefaultActive,\n  })\n\n  // TODO can avoid some of this CSS creation on native\n  const themeConfig = (() => {\n    let cssRules: string[] = []\n\n    // tokens\n    let tokenRule = `:root {`\n    const varsByValue = new Map<string, Variable>()\n    const addVar = (v: Variable) => {\n      varsByValue[v.val] = v\n      const rule = `--${v.name}:${typeof v.val === 'number' ? `${v.val}px` : v.val};`\n      tokenRule += rule\n    }\n\n    for (const key in config.tokens) {\n      for (const skey in config.tokens[key]) {\n        const val = config.tokens[key][skey]\n        if (key === 'font') {\n          for (const fkey in val) {\n            if (fkey === 'family') {\n              addVar(val[fkey])\n            } else {\n              for (const fskey in val[fkey]) {\n                addVar(val[fkey][fskey])\n              }\n            }\n          }\n        } else {\n          addVar(val)\n        }\n      }\n    }\n    cssRules.push(`${tokenRule}\\n}`)\n\n    // themes\n    for (const themeName in config.themes) {\n      // to allow using the same theme with diff names, be sure we don't mutate!\n      config.themes[themeName] = { ...config.themes[themeName] }\n      const theme = config.themes[themeName]\n      let vars = ''\n      for (const themeKey in theme) {\n        const val = theme[themeKey]\n        const getVariableCSS = (inv: any) => {\n          const v = varsByValue[inv] ?? inv\n          return isVariable(v) ? `--${themeKey}:var(--${v.name});` : `--${themeKey}:${v};`\n        }\n        vars += getVariableCSS(val)\n        // TODO sanity check is necessary\n        // make everything a variable that gets put into css\n        if (!isVariable(val)) {\n          theme[themeKey] = createVariable({\n            name: themeKey,\n            val,\n          })\n        }\n      }\n\n      const [themeClassName, parentName] = themeName.includes('-')\n        ? themeName.split('-')\n        : [themeName, '']\n      // tiny hack for now assuming light/dark are typical parentName\n      const oppositeName = parentName === 'dark' ? 'light' : 'dark'\n      const cssParentSel = parentName ? `.${PREFIX}${parentName}` : ''\n      const cssChildSel = `.${PREFIX}${themeClassName}`\n      const cssSel = `${cssParentSel} ${cssChildSel}`\n      // we need to force specificity\n      const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} {\\n${vars}\\n}`\n      cssRules.push(cssRule)\n    }\n\n    Object.freeze(cssRules)\n\n    return {\n      cssRules,\n      css: cssRules.join('\\n'),\n    }\n  })()\n\n  // faster lookups token keys become $keys to match input\n  const tokensParsed: any = parseTokens(config.tokens)\n  // all themes should match key and we just need variable name\n  // TODO once w react native we'd want to have a reverse lookup back to value\n  const themeParsed: any = {}\n  const firstKey = Object.keys(config.themes)[0]\n  for (const key in config.themes[firstKey]) {\n    // themeParsed[`$${key}`] = config.themes[firstKey][key]\n    const val = config.themes[firstKey][key].val\n    themeParsed[`$${key}`] = new Variable({ val, name: key })\n  }\n\n  const next: TamaguiInternalConfig = {\n    // @ts-ignore\n    shorthands: {},\n    ...config,\n    Provider: createTamaguiProvider({\n      defaultTheme: 'light',\n      ...config,\n    }),\n    themeConfig,\n    themeParsed,\n    tokensParsed,\n    parsed: true,\n    getCSS() {\n      return `${themeConfig.css}\\n${[...getStyleRules()].join('\\n')}`\n    },\n  }\n  conf = next\n\n  if (configListeners.size) {\n    configListeners.forEach((cb) => cb(next))\n    configListeners.clear()\n  }\n\n  // @ts-expect-error\n  return next\n}\n\nexport function getThemeParentClassName(themeName?: string | null) {\n  return `theme-parent ${themeName ? `${PREFIX}${themeName}` : ''}`\n}\n\nconst parseTokens = (tokens: any) => {\n  const res: any = {}\n  for (const key in tokens) {\n    res[key] = {}\n    if (key === 'font') {\n      for (const family in tokens.font) {\n        const obj = {}\n        res.font[`$${family}`] = obj\n        for (const attrKey in tokens.font[family]) {\n          const attr = tokens.font[family][attrKey]\n          if (attrKey === 'family') {\n            obj[attrKey] = attr\n            continue\n          }\n          obj[attrKey] = Object.keys(attr).reduce((acc, cur) => {\n            acc[`$${cur}`] = attr[cur]\n            return acc\n          }, {})\n        }\n      }\n      continue\n    }\n    for (const skey in tokens[key]) {\n      res[key][`$${skey}`] = tokens[key][skey]\n    }\n  }\n\n  return res\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { getStyleRules } from '@tamagui/helpers'\n\nimport { isWeb } from './constants/platform'\nimport { Variable, createVariable } from './createVariable'\nimport { createTamaguiProvider } from './helpers/createTamaguiProvider'\nimport { configureMedia } from './hooks/useMedia'\nimport {\n  CreateTamaguiConfig,\n  GenericTamaguiConfig,\n  MediaQueryKey,\n  TamaguiInternalConfig,\n  TamaguiProviderProps,\n} from './types'\n\nexport type CreateTamaguiProps = TamaguiProviderProps &\n  // we omit and re-declare it because we need to allow instantation types to be flexible\n  // user then re-defines the types after createTamagui returns the typed object they want\n  Omit<GenericTamaguiConfig, 'themes'> & {\n    themes: {\n      [key: string]: {\n        [key: string]: string | number | Variable\n      }\n    }\n    // for ssr/native, will default to active\n    mediaQueryDefaultActive?: MediaQueryKey[]\n  }\n\nlet conf: TamaguiInternalConfig | null\n\nexport const getHasConfigured = () => !!conf\n\nexport const getTamagui = () => conf!\nexport const getTokens = () => conf!.tokensParsed\nexport const getThemes = () => conf!.themes\n\ntype ConfigListener = (conf: TamaguiInternalConfig) => void\nconst configListeners = new Set<ConfigListener>()\nexport const onConfiguredOnce = (cb: ConfigListener) => {\n  if (conf) {\n    cb(conf)\n  } else {\n    configListeners.add(cb)\n  }\n}\n\nconst PREFIX = `theme--`\n\nexport function createTamagui<Conf extends CreateTamaguiProps>(\n  config: Conf\n): Conf extends CreateTamaguiConfig<infer A, infer B, infer C, infer D>\n  ? TamaguiInternalConfig<A, B, C, D>\n  : unknown {\n  // config is re-run by the @tamagui/static, dont double validate\n  // but cheap to check and not much downside just returning here if parsed\n  if (config['parsed']) {\n    return config as any\n  }\n\n  // test env loads a few times as it runs diff tests\n  if (conf) {\n    console.warn('Called createTamagui twice! Should never do so')\n    // throw new Error(`#000 createTamagui called twice`)\n  }\n\n  configureMedia({\n    queries: config.media as any,\n    defaultActive: config.mediaQueryDefaultActive,\n  })\n\n  const themeConfig = (() => {\n    let cssRules: string[] = []\n    const varsByValue = new Map<string, Variable>()\n\n    if (isWeb) {\n      // tokens\n      let tokenRule = `:root {`\n      const addVar = (v: Variable) => {\n        varsByValue[v.val] = v\n        const rule = `--${v.name}:${typeof v.val === 'number' ? `${v.val}px` : v.val};`\n        tokenRule += rule\n      }\n\n      for (const key in config.tokens) {\n        for (const skey in config.tokens[key]) {\n          const val = config.tokens[key][skey]\n          if (key === 'font') {\n            for (const fkey in val) {\n              if (fkey === 'family') {\n                addVar(val[fkey])\n              } else {\n                for (const fskey in val[fkey]) {\n                  addVar(val[fkey][fskey])\n                }\n              }\n            }\n          } else {\n            addVar(val)\n          }\n        }\n      }\n      cssRules.push(`${tokenRule}\\n}`)\n    }\n\n    // themes\n    for (const themeName in config.themes) {\n      // to allow using the same theme with diff names, be sure we don't mutate!\n      const theme = { ...config.themes[themeName] }\n      config.themes[themeName] = theme\n\n      let vars = ''\n\n      for (const themeKey in theme) {\n        if (isWeb) {\n          const val = theme[themeKey]\n          // TODO sanity check is necessary\n          const varName = val instanceof Variable ? val.name : varsByValue[val]?.name\n          vars += `--${themeKey}:${varName ? `var(--${varName});` : `${val}`};`\n        }\n\n        // make sure properly names theme variables\n        ensureThemeVariable(theme, themeKey)\n      }\n\n      if (isWeb) {\n        const [themeClassName, parentName] = themeName.includes('-')\n          ? themeName.split('-')\n          : [themeName, '']\n        // tiny hack for now assuming light/dark are typical parentName\n        const oppositeName = parentName === 'dark' ? 'light' : 'dark'\n        const cssParentSel = parentName ? `.${PREFIX}${parentName}` : ''\n        const cssChildSel = `.${PREFIX}${themeClassName}`\n        const cssSel = `${cssParentSel} ${cssChildSel}`\n        // we need to force specificity\n        const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} {\\n${vars}\\n}`\n        cssRules.push(cssRule)\n      }\n    }\n\n    varsByValue.clear()\n    Object.freeze(cssRules)\n\n    return {\n      cssRules,\n      css: cssRules.join('\\n'),\n    }\n  })()\n\n  // faster lookups token keys become $keys to match input\n  const tokensParsed: any = parseTokens(config.tokens)\n\n  // we could do this above in theme loop\n  // all themes should match key and we just need variable name\n  // TODO once w react native we'd want to have a reverse lookup back to value\n  const themeParsed: any = {}\n  const firstKey = Object.keys(config.themes)[0]\n  for (const key in config.themes[firstKey]) {\n    // themeParsed[`$${key}`] = config.themes[firstKey][key]\n    const val = config.themes[firstKey][key].val\n    themeParsed[`$${key}`] = new Variable({ val, name: key })\n  }\n\n  const next: TamaguiInternalConfig = {\n    // @ts-ignore\n    shorthands: {},\n    ...config,\n    Provider: createTamaguiProvider({\n      defaultTheme: 'light',\n      ...config,\n    }),\n    themeConfig,\n    themeParsed,\n    tokensParsed,\n    parsed: true,\n    getCSS() {\n      return `${themeConfig.css}\\n${[...getStyleRules()].join('\\n')}`\n    },\n  }\n  conf = next\n\n  if (configListeners.size) {\n    configListeners.forEach((cb) => cb(next))\n    configListeners.clear()\n  }\n\n  // @ts-expect-error\n  return next\n}\n\nexport function getThemeParentClassName(themeName?: string | null) {\n  return `theme-parent ${themeName ? `${PREFIX}${themeName}` : ''}`\n}\n\nconst parseTokens = (tokens: any) => {\n  const res: any = {}\n  for (const key in tokens) {\n    res[key] = {}\n    if (key === 'font') {\n      for (const family in tokens.font) {\n        const obj = {}\n        res.font[`$${family}`] = obj\n        for (const attrKey in tokens.font[family]) {\n          const attr = tokens.font[family][attrKey]\n          if (attrKey === 'family') {\n            obj[attrKey] = attr\n            continue\n          }\n          obj[attrKey] = Object.keys(attr).reduce((acc, cur) => {\n            acc[`$${cur}`] = attr[cur]\n            return acc\n          }, {})\n        }\n      }\n      continue\n    }\n    for (const skey in tokens[key]) {\n      res[key][`$${skey}`] = tokens[key][skey]\n    }\n  }\n\n  return res\n}\n\n// mutates, freeze after\n// shared by createTamagui so extracted here\nfunction ensureThemeVariable(theme: any, key: string) {\n  const val = theme[key]\n  if (!(val instanceof Variable)) {\n    theme[key] = createVariable({\n      name: key,\n      val,\n    })\n  } else {\n    if (val.name !== key) {\n      // rename to theme name\n      theme[key] = createVariable({\n        name: key,\n        val: val.val,\n      })\n    }\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/createTheme.js

@@ -1,9 +1,4 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
@@ -11,34 +6,8 @@ var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
 __export(exports, {
   createTheme: () => createTheme
 });
-var import_createVariable = __toModule(require("./createVariable"));
-const createTheme = /* @__PURE__ */ __name((theme) => {
-  const res = {};
-  for (const key in theme) {
-    const val = theme[key];
-    if (!(val instanceof import_createVariable.Variable)) {
-      res[key] = (0, import_createVariable.createVariable)({
-        name: key,
-        val
-      });
-    } else {
-      res[key] = val;
-    }
-  }
-  return res;
-}, "createTheme");
+const createTheme = /* @__PURE__ */ __name((theme) => theme, "createTheme");
 //# sourceMappingURL=createTheme.js.map

package/dist/cjs/createTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/createTheme.ts"],
-  "sourcesContent": ["import { Variable, createVariable } from './createVariable'\n\nexport const createTheme = <Theme extends { [key: string]: string | Variable }>(\n  theme: Theme\n): {\n  // allow string | Variable\n  [key in keyof Theme]: Variable | string\n} => {\n  const res = {} as any\n  for (const key in theme) {\n    const val = theme[key]\n    if (!(val instanceof Variable)) {\n      res[key] = createVariable({\n        name: key,\n        val,\n      })\n    } else {\n      res[key] = val\n    }\n  }\n  return res\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,4BAAyC;AAElC,MAAM,cAAc,wBACzB,UAIG;AACH,QAAM,MAAM;AACZ,aAAW,OAAO,OAAO;AACvB,UAAM,MAAM,MAAM;AAClB,QAAI,CAAE,gBAAe,iCAAW;AAC9B,UAAI,OAAO,0CAAe;AAAA,QACxB,MAAM;AAAA,QACN;AAAA;AAAA,WAEG;AACL,UAAI,OAAO;AAAA;AAAA;AAGf,SAAO;AAAA,GAlBkB;",
+  "sourcesContent": ["import { Variable } from './createVariable'\n\ntype GenericTheme = { [key: string]: string | Variable }\n\nexport const createTheme = <Theme extends GenericTheme>(\n  theme: Theme\n): {\n  [K in keyof Theme]: Theme[K] | string | Variable\n} => theme\n"],
+  "mappings": ";;;;;;;;AAAA;AAAA;AAAA;AAIO,MAAM,cAAc,wBACzB,UAGG,OAJsB;",
   "names": []
 }

package/dist/cjs/hooks/useTheme.js

@@ -97,14 +97,20 @@ const useTheme = /* @__PURE__ */ __name(() => {
         const val = activeTheme[key];
         if (process.env.NODE_ENV === "development") {
           if (typeof val === "undefined") {
-            console.warn(`No theme value "${String(key)}" in: ${Object.keys(activeTheme)}`);
+            console.warn(`No theme value "${String(key)}" in`, activeTheme, themes);
             return null;
           }
+          if (!(val instanceof import_createVariable.Variable)) {
+            console.warn("Non variable!", val);
+          }
+          if (val.name !== key) {
+            console.warn("Non-matching name for variable to key", key, val.name);
+          }
         }
         if (state.current.isRendering) {
           state.current.keys.add(key);
         }
-        return new import_createVariable.Variable({ val: val.val, name: key });
+        return val;
       }
     });
   }, []);

package/dist/cjs/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, useEffect, useMemo, useRef, useState } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { Variable } from '../createVariable'\nimport { ThemeName, ThemeObject } from '../types'\nimport { ThemeContext } from '../views/ThemeContext'\nimport { ThemeManagerContext } from '../views/ThemeManagerContext'\nimport { GET_DEFAULT_THEME } from '../views/ThemeProvider'\n\ntype UseThemeState = {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nconst areEqualSets = (a: Set<string>, b: Set<string>) => {\n  if (a.size !== b.size) return false\n  for (const val in a) {\n    if (!b.has(val)) {\n      return false\n    }\n  }\n  return true\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent.name)\n\n  useIsomorphicLayoutEffect(() => {\n    return parent.onChangeTheme((next, manager) => {\n      setName(opts?.parent ? manager.parentName : next)\n    })\n  }, [parent])\n\n  return name || 'light'\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)[GET_DEFAULT_THEME] as any as ThemeName\n}\n\nexport const useTheme = (): ThemeObject => {\n  const forceUpdate = useForceUpdate()\n  const manager = useContext(ThemeManagerContext)\n  const themes = useContext(ThemeContext)\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 = manager.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      manager.track(st.uuid, st.keys)\n    }\n  })\n\n  useEffect(() => {\n    return manager.onUpdate(state.current.uuid, forceUpdate)\n  }, [])\n\n  const theme = (manager.name ? themes[manager.name] : themes.light) ?? themes.light\n\n  return useMemo(\n    () => {\n      return new Proxy(theme, {\n        get(_, key: string) {\n          const name = manager.name\n          if (!name) {\n            return Reflect.get(_, key)\n          }\n          let activeTheme = themes[name]\n          if (!activeTheme) {\n            console.error('No theme by name', name, 'only:', themes, 'keeping current theme')\n            activeTheme = theme\n          }\n          const val = activeTheme[key]\n          if (process.env.NODE_ENV === 'development') {\n            if (typeof val === 'undefined') {\n              console.warn(`No theme value \"${String(key)}\" in: ${Object.keys(activeTheme)}`)\n              return null\n            }\n          }\n          if (state.current.isRendering) {\n            state.current.keys.add(key)\n          }\n          // TODO costly, can make faster (we need name mapping to og name, but val pointing to new val)\n          // console.log('returning new variable', val, key)\n          return new Variable({ val: val.val, name: key })\n        },\n      })\n    },\n    [\n      /* if concurrent mode wanted put manager.name here */\n    ]\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA+B;AAC/B,mBAAwE;AAExE,sBAA0C;AAC1C,4BAAyB;AAEzB,0BAA6B;AAC7B,iCAAoC;AACpC,2BAAkC;AAQlC,MAAM,eAAe,wBAAC,GAAgB,MAAmB;AACvD,MAAI,EAAE,SAAS,EAAE;AAAM,WAAO;AAC9B,aAAW,OAAO,GAAG;AACnB,QAAI,CAAC,EAAE,IAAI,MAAM;AACf,aAAO;AAAA;AAAA;AAGX,SAAO;AAAA,GAPY;AAUd,MAAM,eAAe,wBAAC,SAA6B;AACxD,QAAM,SAAS,6BAAW;AAC1B,QAAM,CAAC,MAAM,WAAW,2BAAS,OAAO;AAExC,iDAA0B,MAAM;AAC9B,WAAO,OAAO,cAAc,CAAC,MAAM,YAAY;AAC7C,cAAQ,8BAAM,UAAS,QAAQ,aAAa;AAAA;AAAA,KAE7C,CAAC;AAEJ,SAAO,QAAQ;AAAA,GAVW;AAarB,MAAM,sBAAsB,6BAAM;AACvC,SAAO,6BAAW,kCAAc;AAAA,GADC;AAI5B,MAAM,WAAW,6BAAmB;AACzC,QAAM,cAAc;AACpB,QAAM,UAAU,6BAAW;AAC3B,QAAM,SAAS,6BAAW;AAC1B,QAAM,QAAQ;AACd,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,MAAM;AAAA,MACN,MAAM,IAAI;AAAA,MACV,aAAa;AAAA;AAAA;AAGjB,QAAM,QAAQ,cAAc;AAG5B,iDAA0B,MAAM;AAC9B,UAAM,KAAK,MAAM;AACjB,OAAG,cAAc;AACjB,UAAM,MAAM,QAAQ,KAAK,IAAI,GAAG;AAChC,QAAI,CAAC,OAAO,CAAC,aAAa,GAAG,MAAM,MAAM;AACvC,cAAQ,MAAM,GAAG,MAAM,GAAG;AAAA;AAAA;AAI9B,8BAAU,MAAM;AACd,WAAO,QAAQ,SAAS,MAAM,QAAQ,MAAM;AAAA,KAC3C;AAEH,QAAM,QAAS,SAAQ,OAAO,OAAO,QAAQ,QAAQ,OAAO,UAAU,OAAO;AAE7E,SAAO,0BACL,MAAM;AACJ,WAAO,IAAI,MAAM,OAAO;AAAA,MACtB,IAAI,GAAG,KAAa;AAClB,cAAM,OAAO,QAAQ;AACrB,YAAI,CAAC,MAAM;AACT,iBAAO,QAAQ,IAAI,GAAG;AAAA;AAExB,YAAI,cAAc,OAAO;AACzB,YAAI,CAAC,aAAa;AAChB,kBAAQ,MAAM,oBAAoB,MAAM,SAAS,QAAQ;AACzD,wBAAc;AAAA;AAEhB,cAAM,MAAM,YAAY;AACxB,YAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,cAAI,OAAO,QAAQ,aAAa;AAC9B,oBAAQ,KAAK,mBAAmB,OAAO,aAAa,OAAO,KAAK;AAChE,mBAAO;AAAA;AAAA;AAGX,YAAI,MAAM,QAAQ,aAAa;AAC7B,gBAAM,QAAQ,KAAK,IAAI;AAAA;AAIzB,eAAO,IAAI,+BAAS,EAAE,KAAK,IAAI,KAAK,MAAM;AAAA;AAAA;AAAA,KAIhD;AAAA,GA3DoB;",
+  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useEffect, useMemo, useRef, useState } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { Variable } from '../createVariable'\nimport { ThemeName, ThemeObject } from '../types'\nimport { ThemeContext } from '../views/ThemeContext'\nimport { ThemeManagerContext } from '../views/ThemeManagerContext'\nimport { GET_DEFAULT_THEME } from '../views/ThemeProvider'\n\ntype UseThemeState = {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nconst areEqualSets = (a: Set<string>, b: Set<string>) => {\n  if (a.size !== b.size) return false\n  for (const val in a) {\n    if (!b.has(val)) {\n      return false\n    }\n  }\n  return true\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent.name)\n\n  useIsomorphicLayoutEffect(() => {\n    return parent.onChangeTheme((next, manager) => {\n      setName(opts?.parent ? manager.parentName : next)\n    })\n  }, [parent])\n\n  return name || 'light'\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)[GET_DEFAULT_THEME] as any as ThemeName\n}\n\nexport const useTheme = (): ThemeObject => {\n  const forceUpdate = useForceUpdate()\n  const manager = useContext(ThemeManagerContext)\n  const themes = useContext(ThemeContext)\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 = manager.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      manager.track(st.uuid, st.keys)\n    }\n  })\n\n  useEffect(() => {\n    return manager.onUpdate(state.current.uuid, forceUpdate)\n  }, [])\n\n  const theme = (manager.name ? themes[manager.name] : themes.light) ?? themes.light\n\n  return useMemo(\n    () => {\n      return new Proxy(theme, {\n        get(_, key: string) {\n          const name = manager.name\n          if (!name) {\n            return Reflect.get(_, key)\n          }\n          let activeTheme = themes[name]\n          if (!activeTheme) {\n            console.error('No theme by name', name, 'only:', themes, 'keeping current theme')\n            activeTheme = theme\n          }\n          const val = activeTheme[key]\n          if (process.env.NODE_ENV === 'development') {\n            if (typeof val === 'undefined') {\n              console.warn(`No theme value \"${String(key)}\" in`, activeTheme, themes)\n              return null\n            }\n            if (!(val instanceof Variable)) {\n              console.warn('Non variable!', val)\n            }\n            if (val.name !== key) {\n              console.warn('Non-matching name for variable to key', key, val.name)\n            }\n          }\n          if (state.current.isRendering) {\n            state.current.keys.add(key)\n          }\n          return val\n        },\n      })\n    },\n    [\n      /* if concurrent mode wanted put manager.name here */\n    ]\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA+B;AAC/B,mBAAwE;AAExE,sBAA0C;AAC1C,4BAAyB;AAEzB,0BAA6B;AAC7B,iCAAoC;AACpC,2BAAkC;AAQlC,MAAM,eAAe,wBAAC,GAAgB,MAAmB;AACvD,MAAI,EAAE,SAAS,EAAE;AAAM,WAAO;AAC9B,aAAW,OAAO,GAAG;AACnB,QAAI,CAAC,EAAE,IAAI,MAAM;AACf,aAAO;AAAA;AAAA;AAGX,SAAO;AAAA,GAPY;AAUd,MAAM,eAAe,wBAAC,SAA6B;AACxD,QAAM,SAAS,6BAAW;AAC1B,QAAM,CAAC,MAAM,WAAW,2BAAS,OAAO;AAExC,iDAA0B,MAAM;AAC9B,WAAO,OAAO,cAAc,CAAC,MAAM,YAAY;AAC7C,cAAQ,8BAAM,UAAS,QAAQ,aAAa;AAAA;AAAA,KAE7C,CAAC;AAEJ,SAAO,QAAQ;AAAA,GAVW;AAarB,MAAM,sBAAsB,6BAAM;AACvC,SAAO,6BAAW,kCAAc;AAAA,GADC;AAI5B,MAAM,WAAW,6BAAmB;AACzC,QAAM,cAAc;AACpB,QAAM,UAAU,6BAAW;AAC3B,QAAM,SAAS,6BAAW;AAC1B,QAAM,QAAQ;AACd,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,MAAM;AAAA,MACN,MAAM,IAAI;AAAA,MACV,aAAa;AAAA;AAAA;AAGjB,QAAM,QAAQ,cAAc;AAG5B,iDAA0B,MAAM;AAC9B,UAAM,KAAK,MAAM;AACjB,OAAG,cAAc;AACjB,UAAM,MAAM,QAAQ,KAAK,IAAI,GAAG;AAChC,QAAI,CAAC,OAAO,CAAC,aAAa,GAAG,MAAM,MAAM;AACvC,cAAQ,MAAM,GAAG,MAAM,GAAG;AAAA;AAAA;AAI9B,8BAAU,MAAM;AACd,WAAO,QAAQ,SAAS,MAAM,QAAQ,MAAM;AAAA,KAC3C;AAEH,QAAM,QAAS,SAAQ,OAAO,OAAO,QAAQ,QAAQ,OAAO,UAAU,OAAO;AAE7E,SAAO,0BACL,MAAM;AACJ,WAAO,IAAI,MAAM,OAAO;AAAA,MACtB,IAAI,GAAG,KAAa;AAClB,cAAM,OAAO,QAAQ;AACrB,YAAI,CAAC,MAAM;AACT,iBAAO,QAAQ,IAAI,GAAG;AAAA;AAExB,YAAI,cAAc,OAAO;AACzB,YAAI,CAAC,aAAa;AAChB,kBAAQ,MAAM,oBAAoB,MAAM,SAAS,QAAQ;AACzD,wBAAc;AAAA;AAEhB,cAAM,MAAM,YAAY;AACxB,YAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,cAAI,OAAO,QAAQ,aAAa;AAC9B,oBAAQ,KAAK,mBAAmB,OAAO,YAAY,aAAa;AAChE,mBAAO;AAAA;AAET,cAAI,CAAE,gBAAe,iCAAW;AAC9B,oBAAQ,KAAK,iBAAiB;AAAA;AAEhC,cAAI,IAAI,SAAS,KAAK;AACpB,oBAAQ,KAAK,yCAAyC,KAAK,IAAI;AAAA;AAAA;AAGnE,YAAI,MAAM,QAAQ,aAAa;AAC7B,gBAAM,QAAQ,KAAK,IAAI;AAAA;AAEzB,eAAO;AAAA;AAAA;AAAA,KAIb;AAAA,GA/DoB;",
   "names": []
 }

package/dist/cjs/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.ts"],
-  "sourcesContent": ["import React from 'react'\n\nimport { createComponent } from './createComponent'\nimport { extendStaticConfig } from './helpers/extendStaticConfig'\nimport { MediaProps, StaticComponent, StaticConfig, TamaguiConfig, Themes, Tokens } from './types'\n\nexport function styled<\n  ParentComponent extends StaticComponent | React.Component<any>,\n  Variants extends GetVariants<ParentComponent>\n>(\n  Component: ParentComponent,\n  options?: GetProps<ParentComponent> & {\n    variants?: Variants\n  },\n  staticExtractionOptions?: StaticConfig\n) {\n  const staticConfigProps: StaticConfig = (() => {\n    if (options) {\n      const { variants, ...defaultProps } = options\n      return { ...staticExtractionOptions, variants, defaultProps }\n    }\n    return {}\n  })()\n  const config = extendStaticConfig(Component, staticConfigProps)\n  const component = createComponent(config!) // error is good here its on init\n  type VariantProps = GetVariantProps<Variants>\n  return component as StaticComponent<\n    Omit<GetProps<ParentComponent>, keyof VariantProps> & VariantProps & MediaProps<VariantProps>\n    // leave this out it was causing infinite recursion type issues\n    // VariantProps\n  >\n}\n\n// type ParentVariants = A extends StaticComponent<any, infer Variants> ? Variants : {}\n\nexport type GetProps<A> = A extends StaticComponent<infer Props>\n  ? Props\n  : A extends React.Component<infer Props>\n  ? Props\n  : {}\n\nexport type GetVariants<ParentComponent extends StaticComponent | React.Component<any>> = void | {\n  [key: string]: {\n    [key: string]:\n      | Partial<GetProps<ParentComponent>>\n      | ((\n          val: any,\n          config: {\n            tokens: TamaguiConfig['tokens']\n            theme: Themes extends { [key: string]: infer B } ? B : unknown\n            props: GetProps<ParentComponent>\n          }\n        ) => Partial<GetProps<ParentComponent>>)\n  }\n}\n\nexport type GetVariantProps<Variants> = Variants extends void\n  ? {}\n  : {\n      // ensure variants actually defined\n      [Key in keyof Variants]?: keyof Variants[Key] extends `...${infer VariantSpread}`\n        ? VariantSpread extends keyof Tokens\n          ? keyof Tokens[VariantSpread] extends string | number\n            ? `$${keyof Tokens[VariantSpread]}`\n            : unknown\n          : unknown\n        : keyof Variants[Key] extends 'true'\n        ? boolean\n        : keyof Exclude<Variants[Key], undefined>\n    }\n\n// type X = { ok: 1 }\n// type Y = { okk: 2; ok: 3 }\n// type Z = X & Y\n// type Z2 = Z\n\n// TODO get name\n// const displayName = `styled(Component)`\n// Object.defineProperty(component, 'name', {\n//   value: displayName,\n//   writable: false,\n// })\n"],
+  "sourcesContent": ["import React from 'react'\n\nimport { createComponent } from './createComponent'\nimport { extendStaticConfig } from './helpers/extendStaticConfig'\nimport { MediaProps, StaticComponent, StaticConfig, TamaguiConfig, Themes, Tokens } from './types'\n\nexport function styled<\n  ParentComponent extends StaticComponent | React.Component<any>,\n  Variants extends GetVariants<ParentComponent>\n>(\n  Component: ParentComponent,\n  options?: GetProps<ParentComponent> & {\n    variants?: Variants\n  },\n  staticExtractionOptions?: StaticConfig\n) {\n  const staticConfigProps: StaticConfig = (() => {\n    if (options) {\n      const { variants, ...defaultProps } = options\n      return { ...staticExtractionOptions, variants, defaultProps }\n    }\n    return {}\n  })()\n  const config = extendStaticConfig(Component, staticConfigProps)\n  const component = createComponent(config!) // error is good here its on init\n  type VariantProps = GetVariantProps<Variants>\n  return component as StaticComponent<\n    // if not options/variants passed just styled(Text):\n    keyof VariantProps extends never\n      ? GetProps<ParentComponent>\n      : // if options passed: styled(Text, { ... })\n        Omit<GetProps<ParentComponent>, keyof VariantProps> &\n          VariantProps &\n          MediaProps<VariantProps>,\n    void\n  >\n}\n\n// type ParentVariants = A extends StaticComponent<any, infer Variants> ? Variants : {}\n\nexport type GetProps<A> = A extends StaticComponent<infer Props>\n  ? Props\n  : A extends React.Component<infer Props>\n  ? Props\n  : {}\n\nexport type GetVariants<ParentComponent extends StaticComponent | React.Component<any>> = void | {\n  [key: string]: {\n    [key: string]:\n      | Partial<GetProps<ParentComponent>>\n      | ((\n          val: any,\n          config: {\n            tokens: TamaguiConfig['tokens']\n            theme: Themes extends { [key: string]: infer B } ? B : unknown\n            props: GetProps<ParentComponent>\n          }\n        ) => Partial<GetProps<ParentComponent>>)\n  }\n}\n\nexport type GetVariantProps<Variants> = Variants extends void\n  ? {}\n  : {\n      // ensure variants actually defined\n      [Key in keyof Variants]?: keyof Variants[Key] extends `...${infer VariantSpread}`\n        ? VariantSpread extends keyof Tokens\n          ? keyof Tokens[VariantSpread] extends string | number\n            ? `$${keyof Tokens[VariantSpread]}` | null\n            : unknown\n          : unknown\n        : keyof Variants[Key] extends 'true'\n        ? boolean | null\n        : keyof Exclude<Variants[Key], undefined>\n    }\n\n// type X = { ok: 1 }\n// type Y = { okk: 2; ok: 3 }\n// type Z = X & Y\n// type Z2 = Z\n\n// TODO get name\n// const displayName = `styled(Component)`\n// Object.defineProperty(component, 'name', {\n//   value: displayName,\n//   writable: false,\n// })\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAEA,6BAAgC;AAChC,gCAAmC;AAG5B,gBAIL,WACA,SAGA,yBACA;AACA,QAAM,oBAAmC,OAAM;AAC7C,QAAI,SAAS;AACX,YAAsC,cAA9B,eAA8B,IAAjB,yBAAiB,IAAjB,CAAb;AACR,aAAO,iCAAK,0BAAL,EAA8B,UAAU;AAAA;AAEjD,WAAO;AAAA;AAET,QAAM,SAAS,kDAAmB,WAAW;AAC7C,QAAM,YAAY,4CAAgB;AAElC,SAAO;AAAA;AApBO;",
   "names": []
 }