@tamagui/web 1.13.4 → 1.14.0

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 { ThemeProps } from '../types.js'\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        <div style={{ display: 'inline', border: '1px solid #ccc' }}>\n          <code>\n            <pre>\n              &lt;Theme /&gt;&nbsp;\n              {JSON.stringify({\n                name: themeState.themeManager?.state.name,\n                parent: themeState.themeManager?.state.parentName,\n                id: themeState.themeManager?.id,\n                parentId: themeState.themeManager?.parentManager?.id,\n                isNew: themeState.isNewTheme,\n              })}\n            </pre>\n          </code>\n          {children}\n        </div>\n      )\n    }\n  }\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, className, theme, isNewTheme } = themeState\n  const { shallow, forceClassName } = options\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    // console.warn(`re-render Theme`)\n\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 && !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 is_Theme`} style={colorStyle}>\n          {wrapped}\n        </span>\n      )\n    }\n\n    return wrapped\n  }, [\n    shouldRenderChildrenWithTheme,\n    themeManager,\n    children,\n    theme,\n    isNewTheme,\n    className,\n  ])\n}\n"],
+  "mappings": "AA4BU,cAAAA,EACE,QAAAC,MADF,oBA5BV,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,uBAGpD,SAASC,EAAMC,EAAmB,CATzC,IAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAWE,GAAIL,EAAM,QACR,OAAOA,EAAM,SAGf,MAAMM,EAAS,CAAC,CAACN,EAAM,QACjBO,EAAaT,EAAqBE,EAAOM,CAAM,EAErD,IAAIE,EAAWR,EAAM,gBAAgB,EACjCT,EAAS,IAAIS,EAAM,SAAWS,GAC5BjB,EAAaiB,EAAO,CAAE,CAAC,gBAAgB,EAAG,EAAK,CAAC,CAClD,EACAT,EAAM,SAEV,OAAI,QAAQ,IAAI,WAAa,eACvBA,EAAM,QAAa,cACrBQ,EACEnB,EAAC,OAAI,MAAO,CAAE,QAAS,SAAU,OAAQ,gBAAiB,EACxD,UAAAD,EAAC,QACC,SAAAC,EAAC,OAAI,0BAEF,KAAK,UAAU,CACd,MAAMY,EAAAM,EAAW,eAAX,YAAAN,EAAyB,MAAM,KACrC,QAAQC,EAAAK,EAAW,eAAX,YAAAL,EAAyB,MAAM,WACvC,IAAIC,EAAAI,EAAW,eAAX,YAAAJ,EAAyB,GAC7B,UAAUE,GAAAD,EAAAG,EAAW,eAAX,YAAAH,EAAyB,gBAAzB,YAAAC,EAAwC,GAClD,MAAOE,EAAW,UACpB,CAAC,GACH,EACF,EACCC,GACH,GAKCE,EAAkBH,EAAYC,EAAUR,EAAOM,CAAM,CAC9D,CAEO,SAASI,EACdH,EACAC,EACAG,EAKAL,EAAS,GACT,CACA,KAAM,CAAE,aAAAM,EAAc,UAAAC,EAAW,MAAAC,EAAO,WAAAC,CAAW,EAAIR,EACjD,CAAE,QAAAS,EAAS,eAAAC,CAAe,EAAIN,EAC9BO,EAAgBrB,EAAa,EAAK,EACpCkB,IACFG,EAAc,QAAU,IAG1B,MAAMC,EACJJ,GAAcG,EAAc,SAAWD,GAAkBX,EAE3D,OAAOZ,EAAQ,IAAM,CAGnB,GAAI,CAACyB,EACH,OAAOX,EAIT,IAAIY,EAAO7B,EAAS,QAAQiB,CAAQ,EAGhCQ,GAAWJ,IACbQ,EAAOA,EAAK,IAAKX,GACRhB,EAAegB,CAAK,EACvBjB,EACEiB,EACA,OACArB,EAACW,EAAA,CAAM,KAAMa,EAAa,MAAM,WAC5B,SAAAH,EAAc,MAAM,SACxB,CACF,EACAA,CACL,GAGH,MAAMY,EACJjC,EAACQ,EAAoB,SAApB,CAA6B,MAAOgB,EAClC,SAAAQ,EACH,EAGF,GAAIH,IAAmB,GACrB,OAAOI,EAGT,GAAI/B,GAAS,CAACqB,EAAQ,oBAAqB,CAGzC,MAAMW,EAAa,CACjB,MAFiBR,GAASC,EAAapB,EAAiBmB,EAAM,KAAK,EAAI,EAGzE,EAEA,OACE1B,EAAC,QAAK,UAAW,GAAGyB,GAAa,4BAA6B,MAAOS,EAClE,SAAAD,EACH,CAEJ,CAEA,OAAOA,CACT,EAAG,CACDF,EACAP,EACAJ,EACAM,EACAC,EACAF,CACF,CAAC,CACH",
+  "names": ["jsx", "jsxs", "isWeb", "Children", "cloneElement", "isValidElement", "useMemo", "variableToString", "ThemeManagerContext", "useServerRef", "useChangeThemeEffect", "Theme", "props", "_a", "_b", "_c", "_d", "_e", "isRoot", "themeState", "children", "child", "useThemedChildren", "options", "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 d,jsxs as C}from"react/jsx-runtime";import{isWeb as b}from"@tamagui/constants";import{Children as T,cloneElement as g,isValidElement as v,useMemo as y}from"react";import{variableToString as M}from"../createVariable.js";import{ThemeManagerContext as E}from"../helpers/ThemeManagerContext.js";import{useServerRef as w}from"../hooks/useServerHooks.js";import{useChangeThemeEffect as P}from"../hooks/useTheme.js";function R(e){var r,m,o,n,l;if(e.disable)return e.children;const a=!!e._isRoot,t=P(e,a);let s=e["data-themeable"]?T.map(e.children,h=>g(h,{["data-themeable"]:!0})):e.children;return process.env.NODE_ENV==="development"&&e.debug==="visualize"&&(s=C("div",{style:{display:"inline",border:"1px solid #ccc"},children:[d("code",{children:C("pre",{children:["<Theme />\xA0",JSON.stringify({name:(r=t.themeManager)==null?void 0:r.state.name,parent:(m=t.themeManager)==null?void 0:m.state.parentName,id:(o=t.themeManager)==null?void 0:o.id,parentId:(l=(n=t.themeManager)==null?void 0:n.parentManager)==null?void 0:l.id,isNew:t.isNewTheme})]})}),s]})),x(t,s,e,a)}function x(e,a,t,s=!1){const{themeManager:r,className:m,theme:o,isNewTheme:n}=e,{shallow:l,forceClassName:h}=t,u=w(!1);n&&(u.current=!0);const p=n||u.current||h||s;return y(()=>{if(!p)return a;let c=T.toArray(a);l&&r&&(c=c.map(i=>v(i)?g(i,void 0,d(R,{name:r.state.parentName,children:i.props.children})):i));const f=d(E.Provider,{value:r,children:c});if(h===!1)return f;if(b&&!t.passPropsToChildren){const N={color:o&&n?M(o.color):""};return d("span",{className:`${m||""} _dsp_contents is_Theme`,style:N,children:f})}return f},[p,r,a,o,n,m])}export{R as Theme,x 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 { ThemeProps } from '../types.js'\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        <div style={{ display: 'inline', border: '1px solid #ccc' }}>\n          <code>\n            <pre>\n              &lt;Theme /&gt;&nbsp;\n              {JSON.stringify({\n                name: themeState.themeManager?.state.name,\n                parent: themeState.themeManager?.state.parentName,\n                id: themeState.themeManager?.id,\n                parentId: themeState.themeManager?.parentManager?.id,\n                isNew: themeState.isNewTheme,\n              })}\n            </pre>\n          </code>\n          {children}\n        </div>\n      )\n    }\n  }\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, className, theme, isNewTheme } = themeState\n  const { shallow, forceClassName } = options\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    // console.warn(`re-render Theme`)\n\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 && !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 is_Theme`} style={colorStyle}>\n          {wrapped}\n        </span>\n      )\n    }\n\n    return wrapped\n  }, [\n    shouldRenderChildrenWithTheme,\n    themeManager,\n    children,\n    theme,\n    isNewTheme,\n    className,\n  ])\n}\n"],
+  "mappings": "AA4BU,cAAAA,EACE,QAAAC,MADF,oBA5BV,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,uBAGpD,SAASC,EAAMC,EAAmB,CATzC,IAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAWE,GAAIL,EAAM,QACR,OAAOA,EAAM,SAGf,MAAMM,EAAS,CAAC,CAACN,EAAM,QACjBO,EAAaT,EAAqBE,EAAOM,CAAM,EAErD,IAAIE,EAAWR,EAAM,gBAAgB,EACjCT,EAAS,IAAIS,EAAM,SAAWS,GAC5BjB,EAAaiB,EAAO,CAAE,CAAC,gBAAgB,EAAG,EAAK,CAAC,CAClD,EACAT,EAAM,SAEV,OAAI,QAAQ,IAAI,WAAa,eACvBA,EAAM,QAAa,cACrBQ,EACEnB,EAAC,OAAI,MAAO,CAAE,QAAS,SAAU,OAAQ,gBAAiB,EACxD,UAAAD,EAAC,QACC,SAAAC,EAAC,OAAI,0BAEF,KAAK,UAAU,CACd,MAAMY,EAAAM,EAAW,eAAX,YAAAN,EAAyB,MAAM,KACrC,QAAQC,EAAAK,EAAW,eAAX,YAAAL,EAAyB,MAAM,WACvC,IAAIC,EAAAI,EAAW,eAAX,YAAAJ,EAAyB,GAC7B,UAAUE,GAAAD,EAAAG,EAAW,eAAX,YAAAH,EAAyB,gBAAzB,YAAAC,EAAwC,GAClD,MAAOE,EAAW,UACpB,CAAC,GACH,EACF,EACCC,GACH,GAKCE,EAAkBH,EAAYC,EAAUR,EAAOM,CAAM,CAC9D,CAEO,SAASI,EACdH,EACAC,EACAG,EAKAL,EAAS,GACT,CACA,KAAM,CAAE,aAAAM,EAAc,UAAAC,EAAW,MAAAC,EAAO,WAAAC,CAAW,EAAIR,EACjD,CAAE,QAAAS,EAAS,eAAAC,CAAe,EAAIN,EAC9BO,EAAgBrB,EAAa,EAAK,EACpCkB,IACFG,EAAc,QAAU,IAG1B,MAAMC,EACJJ,GAAcG,EAAc,SAAWD,GAAkBX,EAE3D,OAAOZ,EAAQ,IAAM,CAGnB,GAAI,CAACyB,EACH,OAAOX,EAIT,IAAIY,EAAO7B,EAAS,QAAQiB,CAAQ,EAGhCQ,GAAWJ,IACbQ,EAAOA,EAAK,IAAKX,GACRhB,EAAegB,CAAK,EACvBjB,EACEiB,EACA,OACArB,EAACW,EAAA,CAAM,KAAMa,EAAa,MAAM,WAC5B,SAAAH,EAAc,MAAM,SACxB,CACF,EACAA,CACL,GAGH,MAAMY,EACJjC,EAACQ,EAAoB,SAApB,CAA6B,MAAOgB,EAClC,SAAAQ,EACH,EAGF,GAAIH,IAAmB,GACrB,OAAOI,EAGT,GAAI/B,GAAS,CAACqB,EAAQ,oBAAqB,CAGzC,MAAMW,EAAa,CACjB,MAFiBR,GAASC,EAAapB,EAAiBmB,EAAM,KAAK,EAAI,EAGzE,EAEA,OACE1B,EAAC,QAAK,UAAW,GAAGyB,GAAa,4BAA6B,MAAOS,EAClE,SAAAD,EACH,CAEJ,CAEA,OAAOA,CACT,EAAG,CACDF,EACAP,EACAJ,EACAM,EACAC,EACAF,CACF,CAAC,CACH",
+  "names": ["jsx", "jsxs", "isWeb", "Children", "cloneElement", "isValidElement", "useMemo", "variableToString", "ThemeManagerContext", "useServerRef", "useChangeThemeEffect", "Theme", "props", "_a", "_b", "_c", "_d", "_e", "isRoot", "themeState", "children", "child", "useThemedChildren", "options", "themeManager", "className", "theme", "isNewTheme", "shallow", "forceClassName", "hasEverThemed", "shouldRenderChildrenWithTheme", "next", "wrapped", "colorStyle"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.13.4",
+  "version": "1.14.0",
   "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.0",
+    "@tamagui/constants": "1.14.0",
+    "@tamagui/helpers": "1.14.0",
+    "@tamagui/normalize-css-color": "1.14.0",
+    "@tamagui/use-did-finish-ssr": "1.14.0",
+    "@tamagui/use-event": "1.14.0",
+    "@tamagui/use-force-update": "1.14.0"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.13.4",
+    "@tamagui/build": "1.14.0",
     "@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'
@@ -183,7 +184,9 @@ export function createComponent<
         didAccessThemeVariableValue?: boolean
       }
     )
-    stateRef.current ??= {}
+    stateRef.current ||= {}
+
+    const hostRef = useServerRef<TamaguiElement>(null)
 
     /**
      * Component state for tracking animations, pseudos
@@ -290,9 +293,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 +346,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 +732,37 @@ 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 = (
+          <>
+            {content}
+            <code>
+              <pre>
+                {JSON.stringify({
+                  name: themeState.themeManager?.state.name,
+                  parent: themeState.themeManager?.state.parentName,
+                  id: themeState.themeManager?.id,
+                  parentId: themeState.themeManager?.parentManager?.id,
+                  isNew: themeState.isNewTheme,
+                  onChangeCount,
+                })}
+              </pre>
+            </code>
+          </>
+        )
+      }
+    }
+
     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
       }
@@ -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,15 +265,11 @@ 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]),
@@ -277,8 +280,13 @@ function getState(
     }
   }
 
-  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)
   }