@tamagui/web 1.13.4 → 1.14.1

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement, isValidElement } from 'react'\n\nimport { variableToString } from '../createVariable.js'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'\nimport { useServerRef } from '../hooks/useServerHooks.js'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme.js'\nimport type { ThemeProps } from '../types.js'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error only for internal views\n  if (props.disable) return props.children\n  const isRoot = !!props['_isRoot']\n  const themeState = useChangeThemeEffect(props, isRoot)\n  const children = props['data-themeable']\n    ? Children.map(props.children, (child) =>\n        cloneElement(child, { ['data-themeable']: true })\n      )\n    : props.children\n\n  return useThemedChildren(themeState, children, props, isRoot)\n}\n\nexport function useThemedChildren(\n  themeState: ChangedThemeResponse,\n  children: any,\n  options: {\n    forceClassName?: boolean\n    shallow?: boolean\n    passPropsToChildren?: boolean\n  },\n  isRoot = false\n) {\n  const { themeManager, isNewTheme, className, theme } = themeState\n  const { shallow, forceClassName } = options\n  const hasEverThemed = useServerRef(false)\n  if (isNewTheme) {\n    hasEverThemed.current = true\n  }\n\n  if (isNewTheme || hasEverThemed.current || forceClassName || isRoot) {\n    // be sure to memoize shouldReset to avoid reparenting\n    let next = Children.toArray(children)\n\n    // each children of these children wont get the theme\n    if (shallow && themeManager) {\n      next = next.map((child) => {\n        return isValidElement(child)\n          ? cloneElement(\n              child,\n              undefined,\n              <Theme name={themeManager.state.parentName}>\n                {(child as any).props.children}\n              </Theme>\n            )\n          : child\n      })\n    }\n\n    // tried this but themes css doesn't fully like it\n    // if (shouldAttachClassName && options.passPropsToChildren) {\n    //   next = next.map((child: any) => {\n    //     const childStyle = child.props?.style\n    //     console.log('pass it down', className, child.props.className || '')\n    //     const newProps = {\n    //       className: (child.props.className || '') + ' ' + className,\n    //       style: Array.isArray(childStyle)\n    //         ? [colorStyle, ...childStyle]\n    //         : {\n    //             ...colorStyle,\n    //             ...childStyle,\n    //           },\n    //     }\n    //     return isValidElement(child) ? cloneElement(child as any, newProps) : child\n    //   })\n    // }\n\n    const wrapped = (\n      <ThemeManagerContext.Provider value={themeManager}>\n        {next}\n      </ThemeManagerContext.Provider>\n    )\n\n    if (forceClassName === false) {\n      return wrapped\n    }\n\n    if (isWeb && !options.passPropsToChildren) {\n      // in order to provide currentColor, set color by default\n      const themeColor = theme && isNewTheme ? variableToString(theme.color) : ''\n      const colorStyle = {\n        color: themeColor,\n      }\n\n      return (\n        <span className={`${className || ''} _dsp_contents`} style={colorStyle}>\n          {wrapped}\n        </span>\n      )\n    }\n\n    return wrapped\n  }\n\n  return children\n}\n"],
-  "mappings": "AAmDc,cAAAA,MAAA,oBAnDd,OAAS,SAAAC,MAAa,qBACtB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,kBAAAC,MAAsB,QAEvD,OAAS,oBAAAC,MAAwB,uBACjC,OAAS,uBAAAC,MAA2B,oCACpC,OAAS,gBAAAC,MAAoB,6BAC7B,OAA+B,wBAAAC,MAA4B,uBAGpD,SAASC,EAAMC,EAAmB,CAEvC,GAAIA,EAAM,QAAS,OAAOA,EAAM,SAChC,MAAMC,EAAS,CAAC,CAACD,EAAM,QACjBE,EAAaJ,EAAqBE,EAAOC,CAAM,EAC/CE,EAAWH,EAAM,gBAAgB,EACnCR,EAAS,IAAIQ,EAAM,SAAWI,GAC5BX,EAAaW,EAAO,CAAE,CAAC,gBAAgB,EAAG,EAAK,CAAC,CAClD,EACAJ,EAAM,SAEV,OAAOK,EAAkBH,EAAYC,EAAUH,EAAOC,CAAM,CAC9D,CAEO,SAASI,EACdH,EACAC,EACAG,EAKAL,EAAS,GACT,CACA,KAAM,CAAE,aAAAM,EAAc,WAAAC,EAAY,UAAAC,EAAW,MAAAC,CAAM,EAAIR,EACjD,CAAE,QAAAS,EAAS,eAAAC,CAAe,EAAIN,EAC9BO,EAAgBhB,EAAa,EAAK,EAKxC,GAJIW,IACFK,EAAc,QAAU,IAGtBL,GAAcK,EAAc,SAAWD,GAAkBX,EAAQ,CAEnE,IAAIa,EAAOtB,EAAS,QAAQW,CAAQ,EAGhCQ,GAAWJ,IACbO,EAAOA,EAAK,IAAKV,GACRV,EAAeU,CAAK,EACvBX,EACEW,EACA,OACAd,EAACS,EAAA,CAAM,KAAMQ,EAAa,MAAM,WAC5B,SAAAH,EAAc,MAAM,SACxB,CACF,EACAA,CACL,GAqBH,MAAMW,EACJzB,EAACM,EAAoB,SAApB,CAA6B,MAAOW,EAClC,SAAAO,EACH,EAGF,GAAIF,IAAmB,GACrB,OAAOG,EAGT,GAAIxB,GAAS,CAACe,EAAQ,oBAAqB,CAGzC,MAAMU,EAAa,CACjB,MAFiBN,GAASF,EAAab,EAAiBe,EAAM,KAAK,EAAI,EAGzE,EAEA,OACEpB,EAAC,QAAK,UAAW,GAAGmB,GAAa,mBAAoB,MAAOO,EACzD,SAAAD,EACH,CAEJ,CAEA,OAAOA,CACT,CAEA,OAAOZ,CACT",
-  "names": ["jsx", "isWeb", "Children", "cloneElement", "isValidElement", "variableToString", "ThemeManagerContext", "useServerRef", "useChangeThemeEffect", "Theme", "props", "isRoot", "themeState", "children", "child", "useThemedChildren", "options", "themeManager", "isNewTheme", "className", "theme", "shallow", "forceClassName", "hasEverThemed", "next", "wrapped", "colorStyle"]
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement, isValidElement, useEffect, useId, useMemo } from 'react'\n\nimport { variableToString } from '../createVariable.js'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'\nimport { useServerRef } from '../hooks/useServerHooks.js'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme.js'\nimport type { DebugProp, ThemeProps } from '../types.js'\nimport { ThemeDebug } from './ThemeDebug'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error only for internal views\n  if (props.disable) {\n    return props.children\n  }\n\n  const isRoot = !!props['_isRoot']\n  const themeState = useChangeThemeEffect(props, isRoot)\n\n  let children = props['data-themeable']\n    ? Children.map(props.children, (child) =>\n        cloneElement(child, { ['data-themeable']: true })\n      )\n    : props.children\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props['debug'] === 'visualize') {\n      children = (\n        <ThemeDebug themeState={themeState} themeProps={props}>\n          {children}\n        </ThemeDebug>\n      )\n    }\n  }\n\n  return useThemedChildren(themeState, children, props, isRoot)\n}\n\nexport function useThemedChildren(\n  themeState: ChangedThemeResponse,\n  children: any,\n  props: {\n    forceClassName?: boolean\n    shallow?: boolean\n    passPropsToChildren?: boolean\n    debug?: DebugProp\n  },\n  isRoot = false\n) {\n  const { themeManager, className, theme, isNewTheme } = themeState\n  const { shallow, forceClassName } = props\n  const hasEverThemed = useServerRef(false)\n  if (isNewTheme) {\n    hasEverThemed.current = true\n  }\n\n  const shouldRenderChildrenWithTheme =\n    isNewTheme || hasEverThemed.current || forceClassName || isRoot\n\n  return useMemo(() => {\n    if (!shouldRenderChildrenWithTheme) {\n      return children\n    }\n\n    // be sure to memoize shouldReset to avoid reparenting\n    let next = Children.toArray(children)\n\n    // each children of these children wont get the theme\n    if (shallow && themeManager) {\n      next = next.map((child) => {\n        return isValidElement(child)\n          ? cloneElement(\n              child,\n              undefined,\n              <Theme name={themeManager.state.parentName}>\n                {(child as any).props.children}\n              </Theme>\n            )\n          : child\n      })\n    }\n\n    const wrapped = (\n      <ThemeManagerContext.Provider value={themeManager}>\n        {next}\n      </ThemeManagerContext.Provider>\n    )\n\n    if (forceClassName === false) {\n      return wrapped\n    }\n\n    if (isWeb && !props.passPropsToChildren) {\n      // in order to provide currentColor, set color by default\n      const themeColor = theme && isNewTheme ? variableToString(theme.color) : ''\n      const colorStyle = {\n        color: themeColor,\n      }\n\n      return (\n        <span className={`${className || ''} _dsp_contents is_Theme`} style={colorStyle}>\n          {wrapped}\n        </span>\n      )\n    }\n\n    return wrapped\n  }, [\n    forceClassName,\n    props.passPropsToChildren,\n    shouldRenderChildrenWithTheme,\n    themeManager,\n    children,\n    theme,\n    isNewTheme,\n    className,\n  ])\n}\n"],
+  "mappings": "AA4BQ,cAAAA,MAAA,oBA5BR,OAAS,SAAAC,MAAa,qBACtB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,kBAAAC,EAAkC,WAAAC,MAAe,QAElF,OAAS,oBAAAC,MAAwB,uBACjC,OAAS,uBAAAC,MAA2B,oCACpC,OAAS,gBAAAC,MAAoB,6BAC7B,OAA+B,wBAAAC,MAA4B,uBAE3D,OAAS,cAAAC,MAAkB,eAEpB,SAASC,EAAMC,EAAmB,CAEvC,GAAIA,EAAM,QACR,OAAOA,EAAM,SAGf,MAAMC,EAAS,CAAC,CAACD,EAAM,QACjBE,EAAaL,EAAqBG,EAAOC,CAAM,EAErD,IAAIE,EAAWH,EAAM,gBAAgB,EACjCV,EAAS,IAAIU,EAAM,SAAWI,GAC5Bb,EAAaa,EAAO,CAAE,CAAC,gBAAgB,EAAG,EAAK,CAAC,CAClD,EACAJ,EAAM,SAEV,OAAI,QAAQ,IAAI,WAAa,eACvBA,EAAM,QAAa,cACrBG,EACEf,EAACU,EAAA,CAAW,WAAYI,EAAY,WAAYF,EAC7C,SAAAG,EACH,GAKCE,EAAkBH,EAAYC,EAAUH,EAAOC,CAAM,CAC9D,CAEO,SAASI,EACdH,EACAC,EACAH,EAMAC,EAAS,GACT,CACA,KAAM,CAAE,aAAAK,EAAc,UAAAC,EAAW,MAAAC,EAAO,WAAAC,CAAW,EAAIP,EACjD,CAAE,QAAAQ,EAAS,eAAAC,CAAe,EAAIX,EAC9BY,EAAgBhB,EAAa,EAAK,EACpCa,IACFG,EAAc,QAAU,IAG1B,MAAMC,EACJJ,GAAcG,EAAc,SAAWD,GAAkBV,EAE3D,OAAOR,EAAQ,IAAM,CACnB,GAAI,CAACoB,EACH,OAAOV,EAIT,IAAIW,EAAOxB,EAAS,QAAQa,CAAQ,EAGhCO,GAAWJ,IACbQ,EAAOA,EAAK,IAAKV,GACRZ,EAAeY,CAAK,EACvBb,EACEa,EACA,OACAhB,EAACW,EAAA,CAAM,KAAMO,EAAa,MAAM,WAC5B,SAAAF,EAAc,MAAM,SACxB,CACF,EACAA,CACL,GAGH,MAAMW,EACJ3B,EAACO,EAAoB,SAApB,CAA6B,MAAOW,EAClC,SAAAQ,EACH,EAGF,GAAIH,IAAmB,GACrB,OAAOI,EAGT,GAAI1B,GAAS,CAACW,EAAM,oBAAqB,CAGvC,MAAMgB,EAAa,CACjB,MAFiBR,GAASC,EAAaf,EAAiBc,EAAM,KAAK,EAAI,EAGzE,EAEA,OACEpB,EAAC,QAAK,UAAW,GAAGmB,GAAa,4BAA6B,MAAOS,EAClE,SAAAD,EACH,CAEJ,CAEA,OAAOA,CACT,EAAG,CACDJ,EACAX,EAAM,oBACNa,EACAP,EACAH,EACAK,EACAC,EACAF,CACF,CAAC,CACH",
+  "names": ["jsx", "isWeb", "Children", "cloneElement", "isValidElement", "useMemo", "variableToString", "ThemeManagerContext", "useServerRef", "useChangeThemeEffect", "ThemeDebug", "Theme", "props", "isRoot", "themeState", "children", "child", "useThemedChildren", "themeManager", "className", "theme", "isNewTheme", "shallow", "forceClassName", "hasEverThemed", "shouldRenderChildrenWithTheme", "next", "wrapped", "colorStyle"]
 }

package/dist/esm/views/Theme.mjs

@@ -1,2 +1,2 @@
-import{jsx as h}from"react/jsx-runtime";import{isWeb as b}from"@tamagui/constants";import{Children as d,cloneElement as u,isValidElement as g}from"react";import{variableToString as y}from"../createVariable.js";import{ThemeManagerContext as v}from"../helpers/ThemeManagerContext.js";import{useServerRef as N}from"../hooks/useServerHooks.js";import{useChangeThemeEffect as P}from"../hooks/useTheme.js";function R(e){if(e.disable)return e.children;const r=!!e._isRoot,n=P(e,r),a=e["data-themeable"]?d.map(e.children,t=>u(t,{["data-themeable"]:!0})):e.children;return w(n,a,e,r)}function w(e,r,n,a=!1){const{themeManager:t,isNewTheme:s,className:T,theme:i}=e,{shallow:p,forceClassName:f}=n,c=N(!1);if(s&&(c.current=!0),s||c.current||f||a){let m=d.toArray(r);p&&t&&(m=m.map(o=>g(o)?u(o,void 0,h(R,{name:t.state.parentName,children:o.props.children})):o));const l=h(v.Provider,{value:t,children:m});if(f===!1)return l;if(b&&!n.passPropsToChildren){const C={color:i&&s?y(i.color):""};return h("span",{className:`${T||""} _dsp_contents`,style:C,children:l})}return l}return r}export{R as Theme,w as useThemedChildren};
+import{jsx as m}from"react/jsx-runtime";import{isWeb as g}from"@tamagui/constants";import{Children as T,cloneElement as p,isValidElement as P,useMemo as v}from"react";import{variableToString as N}from"../createVariable.js";import{ThemeManagerContext as y}from"../helpers/ThemeManagerContext.js";import{useServerRef as E}from"../hooks/useServerHooks.js";import{useChangeThemeEffect as R}from"../hooks/useTheme.js";import{ThemeDebug as D}from"./ThemeDebug";function S(e){if(e.disable)return e.children;const t=!!e._isRoot,r=R(e,t);let n=e["data-themeable"]?T.map(e.children,o=>p(o,{["data-themeable"]:!0})):e.children;return process.env.NODE_ENV==="development"&&e.debug==="visualize"&&(n=m(D,{themeState:r,themeProps:e,children:n})),_(r,n,e,t)}function _(e,t,r,n=!1){const{themeManager:o,className:u,theme:l,isNewTheme:s}=e,{shallow:C,forceClassName:h}=r,d=E(!1);s&&(d.current=!0);const c=s||d.current||h||n;return v(()=>{if(!c)return t;let i=T.toArray(t);C&&o&&(i=i.map(a=>P(a)?p(a,void 0,m(S,{name:o.state.parentName,children:a.props.children})):a));const f=m(y.Provider,{value:o,children:i});if(h===!1)return f;if(g&&!r.passPropsToChildren){const b={color:l&&s?N(l.color):""};return m("span",{className:`${u||""} _dsp_contents is_Theme`,style:b,children:f})}return f},[h,r.passPropsToChildren,c,o,t,l,s,u])}export{S as Theme,_ as useThemedChildren};
 //# sourceMappingURL=Theme.mjs.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement, isValidElement } from 'react'\n\nimport { variableToString } from '../createVariable.js'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'\nimport { useServerRef } from '../hooks/useServerHooks.js'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme.js'\nimport type { ThemeProps } from '../types.js'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error only for internal views\n  if (props.disable) return props.children\n  const isRoot = !!props['_isRoot']\n  const themeState = useChangeThemeEffect(props, isRoot)\n  const children = props['data-themeable']\n    ? Children.map(props.children, (child) =>\n        cloneElement(child, { ['data-themeable']: true })\n      )\n    : props.children\n\n  return useThemedChildren(themeState, children, props, isRoot)\n}\n\nexport function useThemedChildren(\n  themeState: ChangedThemeResponse,\n  children: any,\n  options: {\n    forceClassName?: boolean\n    shallow?: boolean\n    passPropsToChildren?: boolean\n  },\n  isRoot = false\n) {\n  const { themeManager, isNewTheme, className, theme } = themeState\n  const { shallow, forceClassName } = options\n  const hasEverThemed = useServerRef(false)\n  if (isNewTheme) {\n    hasEverThemed.current = true\n  }\n\n  if (isNewTheme || hasEverThemed.current || forceClassName || isRoot) {\n    // be sure to memoize shouldReset to avoid reparenting\n    let next = Children.toArray(children)\n\n    // each children of these children wont get the theme\n    if (shallow && themeManager) {\n      next = next.map((child) => {\n        return isValidElement(child)\n          ? cloneElement(\n              child,\n              undefined,\n              <Theme name={themeManager.state.parentName}>\n                {(child as any).props.children}\n              </Theme>\n            )\n          : child\n      })\n    }\n\n    // tried this but themes css doesn't fully like it\n    // if (shouldAttachClassName && options.passPropsToChildren) {\n    //   next = next.map((child: any) => {\n    //     const childStyle = child.props?.style\n    //     console.log('pass it down', className, child.props.className || '')\n    //     const newProps = {\n    //       className: (child.props.className || '') + ' ' + className,\n    //       style: Array.isArray(childStyle)\n    //         ? [colorStyle, ...childStyle]\n    //         : {\n    //             ...colorStyle,\n    //             ...childStyle,\n    //           },\n    //     }\n    //     return isValidElement(child) ? cloneElement(child as any, newProps) : child\n    //   })\n    // }\n\n    const wrapped = (\n      <ThemeManagerContext.Provider value={themeManager}>\n        {next}\n      </ThemeManagerContext.Provider>\n    )\n\n    if (forceClassName === false) {\n      return wrapped\n    }\n\n    if (isWeb && !options.passPropsToChildren) {\n      // in order to provide currentColor, set color by default\n      const themeColor = theme && isNewTheme ? variableToString(theme.color) : ''\n      const colorStyle = {\n        color: themeColor,\n      }\n\n      return (\n        <span className={`${className || ''} _dsp_contents`} style={colorStyle}>\n          {wrapped}\n        </span>\n      )\n    }\n\n    return wrapped\n  }\n\n  return children\n}\n"],
-  "mappings": "AAmDc,cAAAA,MAAA,oBAnDd,OAAS,SAAAC,MAAa,qBACtB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,kBAAAC,MAAsB,QAEvD,OAAS,oBAAAC,MAAwB,uBACjC,OAAS,uBAAAC,MAA2B,oCACpC,OAAS,gBAAAC,MAAoB,6BAC7B,OAA+B,wBAAAC,MAA4B,uBAGpD,SAASC,EAAMC,EAAmB,CAEvC,GAAIA,EAAM,QAAS,OAAOA,EAAM,SAChC,MAAMC,EAAS,CAAC,CAACD,EAAM,QACjBE,EAAaJ,EAAqBE,EAAOC,CAAM,EAC/CE,EAAWH,EAAM,gBAAgB,EACnCR,EAAS,IAAIQ,EAAM,SAAWI,GAC5BX,EAAaW,EAAO,CAAE,CAAC,gBAAgB,EAAG,EAAK,CAAC,CAClD,EACAJ,EAAM,SAEV,OAAOK,EAAkBH,EAAYC,EAAUH,EAAOC,CAAM,CAC9D,CAEO,SAASI,EACdH,EACAC,EACAG,EAKAL,EAAS,GACT,CACA,KAAM,CAAE,aAAAM,EAAc,WAAAC,EAAY,UAAAC,EAAW,MAAAC,CAAM,EAAIR,EACjD,CAAE,QAAAS,EAAS,eAAAC,CAAe,EAAIN,EAC9BO,EAAgBhB,EAAa,EAAK,EAKxC,GAJIW,IACFK,EAAc,QAAU,IAGtBL,GAAcK,EAAc,SAAWD,GAAkBX,EAAQ,CAEnE,IAAIa,EAAOtB,EAAS,QAAQW,CAAQ,EAGhCQ,GAAWJ,IACbO,EAAOA,EAAK,IAAKV,GACRV,EAAeU,CAAK,EACvBX,EACEW,EACA,OACAd,EAACS,EAAA,CAAM,KAAMQ,EAAa,MAAM,WAC5B,SAAAH,EAAc,MAAM,SACxB,CACF,EACAA,CACL,GAqBH,MAAMW,EACJzB,EAACM,EAAoB,SAApB,CAA6B,MAAOW,EAClC,SAAAO,EACH,EAGF,GAAIF,IAAmB,GACrB,OAAOG,EAGT,GAAIxB,GAAS,CAACe,EAAQ,oBAAqB,CAGzC,MAAMU,EAAa,CACjB,MAFiBN,GAASF,EAAab,EAAiBe,EAAM,KAAK,EAAI,EAGzE,EAEA,OACEpB,EAAC,QAAK,UAAW,GAAGmB,GAAa,mBAAoB,MAAOO,EACzD,SAAAD,EACH,CAEJ,CAEA,OAAOA,CACT,CAEA,OAAOZ,CACT",
-  "names": ["jsx", "isWeb", "Children", "cloneElement", "isValidElement", "variableToString", "ThemeManagerContext", "useServerRef", "useChangeThemeEffect", "Theme", "props", "isRoot", "themeState", "children", "child", "useThemedChildren", "options", "themeManager", "isNewTheme", "className", "theme", "shallow", "forceClassName", "hasEverThemed", "next", "wrapped", "colorStyle"]
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement, isValidElement, useEffect, useId, useMemo } from 'react'\n\nimport { variableToString } from '../createVariable.js'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'\nimport { useServerRef } from '../hooks/useServerHooks.js'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme.js'\nimport type { DebugProp, ThemeProps } from '../types.js'\nimport { ThemeDebug } from './ThemeDebug'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error only for internal views\n  if (props.disable) {\n    return props.children\n  }\n\n  const isRoot = !!props['_isRoot']\n  const themeState = useChangeThemeEffect(props, isRoot)\n\n  let children = props['data-themeable']\n    ? Children.map(props.children, (child) =>\n        cloneElement(child, { ['data-themeable']: true })\n      )\n    : props.children\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props['debug'] === 'visualize') {\n      children = (\n        <ThemeDebug themeState={themeState} themeProps={props}>\n          {children}\n        </ThemeDebug>\n      )\n    }\n  }\n\n  return useThemedChildren(themeState, children, props, isRoot)\n}\n\nexport function useThemedChildren(\n  themeState: ChangedThemeResponse,\n  children: any,\n  props: {\n    forceClassName?: boolean\n    shallow?: boolean\n    passPropsToChildren?: boolean\n    debug?: DebugProp\n  },\n  isRoot = false\n) {\n  const { themeManager, className, theme, isNewTheme } = themeState\n  const { shallow, forceClassName } = props\n  const hasEverThemed = useServerRef(false)\n  if (isNewTheme) {\n    hasEverThemed.current = true\n  }\n\n  const shouldRenderChildrenWithTheme =\n    isNewTheme || hasEverThemed.current || forceClassName || isRoot\n\n  return useMemo(() => {\n    if (!shouldRenderChildrenWithTheme) {\n      return children\n    }\n\n    // be sure to memoize shouldReset to avoid reparenting\n    let next = Children.toArray(children)\n\n    // each children of these children wont get the theme\n    if (shallow && themeManager) {\n      next = next.map((child) => {\n        return isValidElement(child)\n          ? cloneElement(\n              child,\n              undefined,\n              <Theme name={themeManager.state.parentName}>\n                {(child as any).props.children}\n              </Theme>\n            )\n          : child\n      })\n    }\n\n    const wrapped = (\n      <ThemeManagerContext.Provider value={themeManager}>\n        {next}\n      </ThemeManagerContext.Provider>\n    )\n\n    if (forceClassName === false) {\n      return wrapped\n    }\n\n    if (isWeb && !props.passPropsToChildren) {\n      // in order to provide currentColor, set color by default\n      const themeColor = theme && isNewTheme ? variableToString(theme.color) : ''\n      const colorStyle = {\n        color: themeColor,\n      }\n\n      return (\n        <span className={`${className || ''} _dsp_contents is_Theme`} style={colorStyle}>\n          {wrapped}\n        </span>\n      )\n    }\n\n    return wrapped\n  }, [\n    forceClassName,\n    props.passPropsToChildren,\n    shouldRenderChildrenWithTheme,\n    themeManager,\n    children,\n    theme,\n    isNewTheme,\n    className,\n  ])\n}\n"],
+  "mappings": "AA4BQ,cAAAA,MAAA,oBA5BR,OAAS,SAAAC,MAAa,qBACtB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,kBAAAC,EAAkC,WAAAC,MAAe,QAElF,OAAS,oBAAAC,MAAwB,uBACjC,OAAS,uBAAAC,MAA2B,oCACpC,OAAS,gBAAAC,MAAoB,6BAC7B,OAA+B,wBAAAC,MAA4B,uBAE3D,OAAS,cAAAC,MAAkB,eAEpB,SAASC,EAAMC,EAAmB,CAEvC,GAAIA,EAAM,QACR,OAAOA,EAAM,SAGf,MAAMC,EAAS,CAAC,CAACD,EAAM,QACjBE,EAAaL,EAAqBG,EAAOC,CAAM,EAErD,IAAIE,EAAWH,EAAM,gBAAgB,EACjCV,EAAS,IAAIU,EAAM,SAAWI,GAC5Bb,EAAaa,EAAO,CAAE,CAAC,gBAAgB,EAAG,EAAK,CAAC,CAClD,EACAJ,EAAM,SAEV,OAAI,QAAQ,IAAI,WAAa,eACvBA,EAAM,QAAa,cACrBG,EACEf,EAACU,EAAA,CAAW,WAAYI,EAAY,WAAYF,EAC7C,SAAAG,EACH,GAKCE,EAAkBH,EAAYC,EAAUH,EAAOC,CAAM,CAC9D,CAEO,SAASI,EACdH,EACAC,EACAH,EAMAC,EAAS,GACT,CACA,KAAM,CAAE,aAAAK,EAAc,UAAAC,EAAW,MAAAC,EAAO,WAAAC,CAAW,EAAIP,EACjD,CAAE,QAAAQ,EAAS,eAAAC,CAAe,EAAIX,EAC9BY,EAAgBhB,EAAa,EAAK,EACpCa,IACFG,EAAc,QAAU,IAG1B,MAAMC,EACJJ,GAAcG,EAAc,SAAWD,GAAkBV,EAE3D,OAAOR,EAAQ,IAAM,CACnB,GAAI,CAACoB,EACH,OAAOV,EAIT,IAAIW,EAAOxB,EAAS,QAAQa,CAAQ,EAGhCO,GAAWJ,IACbQ,EAAOA,EAAK,IAAKV,GACRZ,EAAeY,CAAK,EACvBb,EACEa,EACA,OACAhB,EAACW,EAAA,CAAM,KAAMO,EAAa,MAAM,WAC5B,SAAAF,EAAc,MAAM,SACxB,CACF,EACAA,CACL,GAGH,MAAMW,EACJ3B,EAACO,EAAoB,SAApB,CAA6B,MAAOW,EAClC,SAAAQ,EACH,EAGF,GAAIH,IAAmB,GACrB,OAAOI,EAGT,GAAI1B,GAAS,CAACW,EAAM,oBAAqB,CAGvC,MAAMgB,EAAa,CACjB,MAFiBR,GAASC,EAAaf,EAAiBc,EAAM,KAAK,EAAI,EAGzE,EAEA,OACEpB,EAAC,QAAK,UAAW,GAAGmB,GAAa,4BAA6B,MAAOS,EAClE,SAAAD,EACH,CAEJ,CAEA,OAAOA,CACT,EAAG,CACDJ,EACAX,EAAM,oBACNa,EACAP,EACAH,EACAK,EACAC,EACAF,CACF,CAAC,CACH",
+  "names": ["jsx", "isWeb", "Children", "cloneElement", "isValidElement", "useMemo", "variableToString", "ThemeManagerContext", "useServerRef", "useChangeThemeEffect", "ThemeDebug", "Theme", "props", "isRoot", "themeState", "children", "child", "useThemedChildren", "themeManager", "className", "theme", "isNewTheme", "shallow", "forceClassName", "hasEverThemed", "shouldRenderChildrenWithTheme", "next", "wrapped", "colorStyle"]
 }

package/dist/esm/views/ThemeDebug.js

@@ -0,0 +1,2 @@
+import{jsxs as m}from"react/jsx-runtime";function h({themeState:e,themeProps:n,children:r,onChangeCount:p}){var a,s,o,i;return process.env.NODE_ENV==="development"?m("div",{style:{whiteSpace:"pre",background:"green",display:"inline",border:"1px solid #ccc",margin:20},children:[m("code",{children:["<Theme />\xA0",JSON.stringify({name:e.name,className:e.className,inverse:n.inverse,forceClassName:n.forceClassName,parent:(a=e.themeManager)==null?void 0:a.state.parentName,id:(s=e.themeManager)==null?void 0:s.id,parentId:(i=(o=e.themeManager)==null?void 0:o.parentManager)==null?void 0:i.id,isNew:e.isNewTheme,onChangeCount:p},null,2)]}),r]}):r}export{h as ThemeDebug};
+//# sourceMappingURL=ThemeDebug.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/views/ThemeDebug.tsx"],
+  "sourcesContent": ["import { ChangedThemeResponse } from '../hooks/useTheme.js'\nimport { ThemeProps } from '../types.js'\n\nexport function ThemeDebug({\n  themeState,\n  themeProps,\n  children,\n  onChangeCount,\n}: {\n  themeState: ChangedThemeResponse\n  themeProps: ThemeProps\n  onChangeCount?: number\n  children: any\n}) {\n  if (process.env.NODE_ENV === 'development') {\n    return (\n      <div\n        style={{\n          whiteSpace: 'pre',\n          background: 'green',\n          display: 'inline',\n          border: '1px solid #ccc',\n          margin: 20,\n        }}\n      >\n        <code>\n          &lt;Theme /&gt;&nbsp;\n          {JSON.stringify(\n            {\n              name: themeState.name,\n              className: themeState.className,\n              inverse: themeProps.inverse,\n              forceClassName: themeProps.forceClassName,\n              parent: themeState.themeManager?.state.parentName,\n              id: themeState.themeManager?.id,\n              parentId: themeState.themeManager?.parentManager?.id,\n              isNew: themeState.isNewTheme,\n              onChangeCount,\n            },\n            null,\n            2\n          )}\n        </code>\n        {children}\n      </div>\n    )\n  }\n  return children\n}\n"],
+  "mappings": "AAyBQ,eAAAA,MAAA,oBAtBD,SAASC,EAAW,CACzB,WAAAC,EACA,WAAAC,EACA,SAAAC,EACA,cAAAC,CACF,EAKG,CAbH,IAAAC,EAAAC,EAAAC,EAAAC,EAcE,OAAI,QAAQ,IAAI,WAAa,cAEzBT,EAAC,OACC,MAAO,CACL,WAAY,MACZ,WAAY,QACZ,QAAS,SACT,OAAQ,iBACR,OAAQ,EACV,EAEA,UAAAA,EAAC,QAAK,0BAEH,KAAK,UACJ,CACE,KAAME,EAAW,KACjB,UAAWA,EAAW,UACtB,QAASC,EAAW,QACpB,eAAgBA,EAAW,eAC3B,QAAQG,EAAAJ,EAAW,eAAX,YAAAI,EAAyB,MAAM,WACvC,IAAIC,EAAAL,EAAW,eAAX,YAAAK,EAAyB,GAC7B,UAAUE,GAAAD,EAAAN,EAAW,eAAX,YAAAM,EAAyB,gBAAzB,YAAAC,EAAwC,GAClD,MAAOP,EAAW,WAClB,cAAAG,CACF,EACA,KACA,CACF,GACF,EACCD,GACH,EAGGA,CACT",
+  "names": ["jsxs", "ThemeDebug", "themeState", "themeProps", "children", "onChangeCount", "_a", "_b", "_c", "_d"]
+}

package/dist/esm/views/ThemeDebug.mjs

@@ -0,0 +1,2 @@
+import{jsxs as m}from"react/jsx-runtime";function h({themeState:e,themeProps:n,children:r,onChangeCount:p}){var a,s,o,i;return process.env.NODE_ENV==="development"?m("div",{style:{whiteSpace:"pre",background:"green",display:"inline",border:"1px solid #ccc",margin:20},children:[m("code",{children:["<Theme />\xA0",JSON.stringify({name:e.name,className:e.className,inverse:n.inverse,forceClassName:n.forceClassName,parent:(a=e.themeManager)==null?void 0:a.state.parentName,id:(s=e.themeManager)==null?void 0:s.id,parentId:(i=(o=e.themeManager)==null?void 0:o.parentManager)==null?void 0:i.id,isNew:e.isNewTheme,onChangeCount:p},null,2)]}),r]}):r}export{h as ThemeDebug};
+//# sourceMappingURL=ThemeDebug.mjs.map

package/dist/esm/views/ThemeDebug.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/views/ThemeDebug.tsx"],
+  "sourcesContent": ["import { ChangedThemeResponse } from '../hooks/useTheme.js'\nimport { ThemeProps } from '../types.js'\n\nexport function ThemeDebug({\n  themeState,\n  themeProps,\n  children,\n  onChangeCount,\n}: {\n  themeState: ChangedThemeResponse\n  themeProps: ThemeProps\n  onChangeCount?: number\n  children: any\n}) {\n  if (process.env.NODE_ENV === 'development') {\n    return (\n      <div\n        style={{\n          whiteSpace: 'pre',\n          background: 'green',\n          display: 'inline',\n          border: '1px solid #ccc',\n          margin: 20,\n        }}\n      >\n        <code>\n          &lt;Theme /&gt;&nbsp;\n          {JSON.stringify(\n            {\n              name: themeState.name,\n              className: themeState.className,\n              inverse: themeProps.inverse,\n              forceClassName: themeProps.forceClassName,\n              parent: themeState.themeManager?.state.parentName,\n              id: themeState.themeManager?.id,\n              parentId: themeState.themeManager?.parentManager?.id,\n              isNew: themeState.isNewTheme,\n              onChangeCount,\n            },\n            null,\n            2\n          )}\n        </code>\n        {children}\n      </div>\n    )\n  }\n  return children\n}\n"],
+  "mappings": "AAyBQ,eAAAA,MAAA,oBAtBD,SAASC,EAAW,CACzB,WAAAC,EACA,WAAAC,EACA,SAAAC,EACA,cAAAC,CACF,EAKG,CAbH,IAAAC,EAAAC,EAAAC,EAAAC,EAcE,OAAI,QAAQ,IAAI,WAAa,cAEzBT,EAAC,OACC,MAAO,CACL,WAAY,MACZ,WAAY,QACZ,QAAS,SACT,OAAQ,iBACR,OAAQ,EACV,EAEA,UAAAA,EAAC,QAAK,0BAEH,KAAK,UACJ,CACE,KAAME,EAAW,KACjB,UAAWA,EAAW,UACtB,QAASC,EAAW,QACpB,eAAgBA,EAAW,eAC3B,QAAQG,EAAAJ,EAAW,eAAX,YAAAI,EAAyB,MAAM,WACvC,IAAIC,EAAAL,EAAW,eAAX,YAAAK,EAAyB,GAC7B,UAAUE,GAAAD,EAAAN,EAAW,eAAX,YAAAM,EAAyB,gBAAzB,YAAAC,EAAwC,GAClD,MAAOP,EAAW,WAClB,cAAAG,CACF,EACA,KACA,CACF,GACF,EACCD,GACH,EAGGA,CACT",
+  "names": ["jsxs", "ThemeDebug", "themeState", "themeProps", "children", "onChangeCount", "_a", "_b", "_c", "_d"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.13.4",
+  "version": "1.14.1",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,19 +27,19 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.13.4",
-    "@tamagui/constants": "1.13.4",
-    "@tamagui/helpers": "1.13.4",
-    "@tamagui/normalize-css-color": "1.13.4",
-    "@tamagui/use-did-finish-ssr": "1.13.4",
-    "@tamagui/use-event": "1.13.4",
-    "@tamagui/use-force-update": "1.13.4"
+    "@tamagui/compose-refs": "1.14.1",
+    "@tamagui/constants": "1.14.1",
+    "@tamagui/helpers": "1.14.1",
+    "@tamagui/normalize-css-color": "1.14.1",
+    "@tamagui/use-did-finish-ssr": "1.14.1",
+    "@tamagui/use-event": "1.14.1",
+    "@tamagui/use-force-update": "1.14.1"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.13.4",
+    "@tamagui/build": "1.14.1",
     "@testing-library/react": "^13.4.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",

package/src/createComponent.tsx

@@ -12,6 +12,7 @@ import React, {
   useEffect,
   useId,
   useRef,
+  useState,
 } from 'react'
 
 import { onConfiguredOnce } from './config.js'
@@ -50,6 +51,7 @@ import { Slot } from './views/Slot.js'
 import { Stack } from './views/Stack.js'
 import { Text } from './views/Text.js'
 import { useThemedChildren } from './views/Theme.js'
+import { ThemeDebug } from './views/ThemeDebug.js'
 
 // let t
 // import { timer } from '@tamagui/timer'
@@ -183,7 +185,9 @@ export function createComponent<
         didAccessThemeVariableValue?: boolean
       }
     )
-    stateRef.current ??= {}
+    stateRef.current ||= {}
+
+    const hostRef = useServerRef<TamaguiElement>(null)
 
     /**
      * Component state for tracking animations, pseudos
@@ -290,9 +294,10 @@ export function createComponent<
       componentName,
       reset: props.reset,
       inverse: props.themeInverse,
-      // @ts-expect-error
+      // @ts-ignore this is internal use only
       disable: props['data-themeable'],
-      debug: props.debug,
+      debug:
+        process.env.NODE_ENV === 'development' && props.debug ? { hostRef } : undefined,
       shouldUpdate: () => !!stateRef.current.didAccessThemeVariableValue,
     })!
 
@@ -342,8 +347,6 @@ export function createComponent<
       keys: noClassNames && isMediaSpaced ? (splitStyles.hasMedia as any) : null,
     })
 
-    const hostRef = useServerRef<TamaguiElement>(null)
-
     // animation setup
     const isAnimatedReactNativeWeb = isAnimated && avoidClassesWhileAnimating
 
@@ -730,6 +733,29 @@ export function createComponent<
       // passPropsToChildren: true,
     })
 
+    if (process.env.NODE_ENV === 'development') {
+      if (props['debug'] === 'visualize') {
+        const [onChangeCount, setOnChangeCount] = useState(0)
+
+        useEffect(() => {
+          themeState.themeManager?.onChangeTheme((name, manager) => {
+            setOnChangeCount((p) => ++p)
+            console.warn(`🖤`, name)
+          })
+        }, [themeState.themeManager])
+
+        content = (
+          <ThemeDebug
+            themeState={themeState}
+            themeProps={props}
+            onChangeCount={onChangeCount}
+          >
+            {content}
+          </ThemeDebug>
+        )
+      }
+    }
+
     if (process.env.TAMAGUI_TARGET === 'web') {
       if (events || isAnimatedReactNativeWeb) {
         content = (

package/src/helpers/ThemeManager.tsx

@@ -26,7 +26,10 @@ export function hasNoThemeUpdatingProps(props: ThemeProps) {
   return !(props.name || props.componentName || props.inverse || props.reset)
 }
 
+let uid = 0
+
 export class ThemeManager {
+  id = uid++
   themeListeners = new Set<ThemeListener>()
   parentManager: ThemeManager | null = null
   state: ThemeManagerState = emptyState
@@ -41,26 +44,28 @@ export class ThemeManager {
     }
     if (!parentManager) {
       if (process.env.NODE_ENV !== 'production') {
-        console.trace()
-        throw new Error(`No parent manager given`)
+        throw new Error(
+          `No parent manager given, this is likely due to duplicated Tamagui dependencies. Check your lockfile for mis-matched versions.`
+        )
       }
       throw `❌`
     }
-    // copy over listeners
-    this.themeListeners = parentManager.themeListeners
 
     // no change no props
     if (hasNoThemeUpdatingProps(props)) {
       return parentManager
     }
+
     if (parentManager) {
       this.parentManager = parentManager
     }
+
     const updatedState = this.getStateIfChanged(props)
     if (updatedState) {
       this.state = updatedState
       return
     }
+
     return parentManager || this
   }
 
@@ -76,6 +81,7 @@ export class ThemeManager {
       }
       const nextState = this.getStateIfChanged(props)
       if (nextState) {
+        this.props = props
         this.state = nextState
         return true
       }
@@ -159,9 +165,9 @@ export class ThemeManager {
   }
 }
 
-function getNextThemeClassName(name: string, isInverting = false) {
+function getNextThemeClassName(name: string, props: ThemeProps) {
   const next = `t_sub_theme ${THEME_CLASSNAME_PREFIX}${name}`
-  if (isInverting) {
+  if (props.inverse || props.forceClassName) {
     return (
       next +
       // ensure you invert to base dark as well as specific dark
@@ -172,24 +178,20 @@ function getNextThemeClassName(name: string, isInverting = false) {
   return next.replace('light_', '').replace('dark_', '')
 }
 
-const cache = new WeakMap<ThemeProps, [ThemeManager, ThemeManagerState | null]>()
-
 function getState(
   props: ThemeProps,
   parentManager?: ThemeManager | null
 ): ThemeManagerState | null {
-  const cached = cache.get(props)
-  if (cached && cached[0] === parentManager) {
-    return cached[1]
-  }
-
   const themes = getThemes()
 
   if (props.name && props.reset) {
     throw new Error('Cannot reset + set new name')
   }
+
   if (props.reset && !parentManager?.parentManager) {
-    console.warn('Cannot reset no grandparent exists')
+    if (process.env.NODE_ENV === 'development') {
+      console.warn('Cannot reset no grandparent exists')
+    }
     return null
   }
 
@@ -204,12 +206,12 @@ function getState(
   // components look for most specific, fallback upwards
   const base = parentName.split(THEME_NAME_SEPARATOR)
   const lastSegment = base[base.length - 1]
-  const isParentAComponentTheme =
+  const isParentComponentTheme =
     parentName && lastSegment[0].toUpperCase() === lastSegment[0]
-  if (isParentAComponentTheme) {
+  if (isParentComponentTheme) {
     base.pop() // always remove componentName they can't nest
   }
-  const parentBaseTheme = isParentAComponentTheme
+  const parentBaseTheme = isParentComponentTheme
     ? base.slice(0, base.length).join(THEME_NAME_SEPARATOR)
     : parentName
   const max = base.length
@@ -218,9 +220,18 @@ function getState(
       ? max // component name only don't search upwards
       : 0
 
-  // prettier-ignore
   // eslint-disable-next-line no-console
-  if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') [ console.groupCollapsed('ThemeManager.getState()', props, { parentName,   parentBaseTheme,   base,   min,   max,   isParentAComponentTheme }), console.trace(), console.groupEnd() ]
+  if (process.env.NODE_ENV === 'development' && typeof props.debug === 'string') {
+    console.groupCollapsed('ThemeManager.getState()')
+    console.log({
+      parentName,
+      parentBaseTheme,
+      base,
+      min,
+      max,
+      isParentComponentTheme,
+    })
+  }
 
   for (let i = max; i >= min; i--) {
     let prefix = base.slice(0, i).join(THEME_NAME_SEPARATOR)
@@ -243,12 +254,8 @@ function getState(
     if (componentName) {
       // components only look for component themes
       if (nextName) {
-        potentials.push(
-          `${prefix.slice(
-            0,
-            prefix.indexOf(THEME_NAME_SEPARATOR)
-          )}_${nextName}_${componentName}`
-        )
+        const beforeSeparator = prefix.slice(0, prefix.indexOf(THEME_NAME_SEPARATOR))
+        potentials.push(`${beforeSeparator}_${nextName}_${componentName}`)
       }
       potentials.push(`${prefix}_${componentName}`)
       if (nextName) {
@@ -258,27 +265,28 @@ function getState(
 
     const found = potentials.find((t) => t in themes)
 
-    // eslint-disable-next-line no-console
-    if (process.env.NODE_ENV === 'development' && props.debug === 'verbose')
-      console.log('getState found', found, 'from', potentials, 'parentName', parentName)
+    if (process.env.NODE_ENV === 'development' && typeof props.debug === 'string') {
+      console.log(' - ', { found, potentials })
+    }
 
     if (found) {
-      // optimization return null if not changed
-      if (found === parentName) {
-        break
-      }
       result = {
         name: found,
         theme: getThemeUnwrapped(themes[found]),
-        className: getNextThemeClassName(found, props.inverse),
+        className: getNextThemeClassName(found, props),
         parentName,
       }
       break
     }
   }
 
-  if (parentManager) {
-    cache.set(props, [parentManager, result])
+  // eslint-disable-next-line no-console
+  if (process.env.NODE_ENV === 'development' && typeof props.debug === 'string') {
+    console.log({
+      result,
+    })
+    console.trace()
+    console.groupEnd()
   }
 
   return result

package/src/helpers/getSplitStyles.tsx

@@ -881,14 +881,6 @@ export const getSplitStyles: StyleSplitter = (
   // always do this at the very end to preserve the order strictly (animations, origin)
   // and allow proper merging of all pseudos before applying
   if (flatTransforms) {
-    if (process.env.NODE_ENV === 'development' && debug) {
-      // eslint-disable-next-line no-console
-      console.log(
-        'Merging flat transforms, transform before',
-        [...(style.transform || [])],
-        flatTransforms
-      )
-    }
     mergeTransforms(style, flatTransforms, true)
   }