@tamagui/web 1.14.0 → 1.14.1

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, 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"]
+  "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.14.0",
+  "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.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"
+    "@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.14.0",
+    "@tamagui/build": "1.14.1",
     "@testing-library/react": "^13.4.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",

package/src/createComponent.tsx

@@ -51,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'
@@ -744,21 +745,13 @@ export function createComponent<
         }, [themeState.themeManager])
 
         content = (
-          <>
+          <ThemeDebug
+            themeState={themeState}
+            themeProps={props}
+            onChangeCount={onChangeCount}
+          >
             {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>
-          </>
+          </ThemeDebug>
         )
       }
     }

package/src/helpers/ThemeManager.tsx

@@ -165,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
@@ -273,7 +273,7 @@ function getState(
       result = {
         name: found,
         theme: getThemeUnwrapped(themes[found]),
-        className: getNextThemeClassName(found, props.inverse),
+        className: getNextThemeClassName(found, props),
         parentName,
       }
       break

package/src/views/Theme.tsx

@@ -5,7 +5,8 @@ import { variableToString } from '../createVariable.js'
 import { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'
 import { useServerRef } from '../hooks/useServerHooks.js'
 import { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme.js'
-import type { ThemeProps } from '../types.js'
+import type { DebugProp, ThemeProps } from '../types.js'
+import { ThemeDebug } from './ThemeDebug'
 
 export function Theme(props: ThemeProps) {
   // @ts-expect-error only for internal views
@@ -25,21 +26,9 @@ export function Theme(props: ThemeProps) {
   if (process.env.NODE_ENV === 'development') {
     if (props['debug'] === 'visualize') {
       children = (
-        <div style={{ display: 'inline', border: '1px solid #ccc' }}>
-          <code>
-            <pre>
-              &lt;Theme /&gt;&nbsp;
-              {JSON.stringify({
-                name: themeState.themeManager?.state.name,
-                parent: themeState.themeManager?.state.parentName,
-                id: themeState.themeManager?.id,
-                parentId: themeState.themeManager?.parentManager?.id,
-                isNew: themeState.isNewTheme,
-              })}
-            </pre>
-          </code>
+        <ThemeDebug themeState={themeState} themeProps={props}>
           {children}
-        </div>
+        </ThemeDebug>
       )
     }
   }
@@ -50,15 +39,16 @@ export function Theme(props: ThemeProps) {
 export function useThemedChildren(
   themeState: ChangedThemeResponse,
   children: any,
-  options: {
+  props: {
     forceClassName?: boolean
     shallow?: boolean
     passPropsToChildren?: boolean
+    debug?: DebugProp
   },
   isRoot = false
 ) {
   const { themeManager, className, theme, isNewTheme } = themeState
-  const { shallow, forceClassName } = options
+  const { shallow, forceClassName } = props
   const hasEverThemed = useServerRef(false)
   if (isNewTheme) {
     hasEverThemed.current = true
@@ -68,8 +58,6 @@ export function useThemedChildren(
     isNewTheme || hasEverThemed.current || forceClassName || isRoot
 
   return useMemo(() => {
-    // console.warn(`re-render Theme`)
-
     if (!shouldRenderChildrenWithTheme) {
       return children
     }
@@ -102,7 +90,7 @@ export function useThemedChildren(
       return wrapped
     }
 
-    if (isWeb && !options.passPropsToChildren) {
+    if (isWeb && !props.passPropsToChildren) {
       // in order to provide currentColor, set color by default
       const themeColor = theme && isNewTheme ? variableToString(theme.color) : ''
       const colorStyle = {
@@ -118,6 +106,8 @@ export function useThemedChildren(
 
     return wrapped
   }, [
+    forceClassName,
+    props.passPropsToChildren,
     shouldRenderChildrenWithTheme,
     themeManager,
     children,

package/src/views/ThemeDebug.tsx

@@ -0,0 +1,49 @@
+import { ChangedThemeResponse } from '../hooks/useTheme.js'
+import { ThemeProps } from '../types.js'
+
+export function ThemeDebug({
+  themeState,
+  themeProps,
+  children,
+  onChangeCount,
+}: {
+  themeState: ChangedThemeResponse
+  themeProps: ThemeProps
+  onChangeCount?: number
+  children: any
+}) {
+  if (process.env.NODE_ENV === 'development') {
+    return (
+      <div
+        style={{
+          whiteSpace: 'pre',
+          background: 'green',
+          display: 'inline',
+          border: '1px solid #ccc',
+          margin: 20,
+        }}
+      >
+        <code>
+          &lt;Theme /&gt;&nbsp;
+          {JSON.stringify(
+            {
+              name: themeState.name,
+              className: themeState.className,
+              inverse: themeProps.inverse,
+              forceClassName: themeProps.forceClassName,
+              parent: themeState.themeManager?.state.parentName,
+              id: themeState.themeManager?.id,
+              parentId: themeState.themeManager?.parentManager?.id,
+              isNew: themeState.isNewTheme,
+              onChangeCount,
+            },
+            null,
+            2
+          )}
+        </code>
+        {children}
+      </div>
+    )
+  }
+  return children
+}

package/types/createComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAYN,MAAM,OAAO,CAAA;AAiBd,OAAO,EACL,SAAS,EACT,cAAc,EACd,WAAW,EACX,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAEhB,qBAAqB,EAErB,cAAc,EAIf,MAAM,SAAS,CAAA;AAqBhB,eAAO,MAAM,qBAAqB,EAAE,qBAMnC,CAAA;AAeD,eAAO,MAAM,QAAQ,eAAsB,CAAA;AA8B3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,GAAG,EAAE,EACtC,GAAG,GAAG,cAAc,EACpB,SAAS,GAAG,KAAK,EAEjB,QAAQ,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,EACpD,eAAe,CAAC,EAAE,iBAAiB,4DAsyBpC;AAGD,eAAO,MAAM,QAAQ;YAAW;QAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;KAAE;;CAAmB,CAAA;AAMrE,eAAO,MAAM,MAAM,0DA8CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAiGxD"}
+{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAYN,MAAM,OAAO,CAAA;AAiBd,OAAO,EACL,SAAS,EACT,cAAc,EACd,WAAW,EACX,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAEhB,qBAAqB,EAErB,cAAc,EAIf,MAAM,SAAS,CAAA;AAsBhB,eAAO,MAAM,qBAAqB,EAAE,qBAMnC,CAAA;AAeD,eAAO,MAAM,QAAQ,eAAsB,CAAA;AA8B3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,GAAG,EAAE,EACtC,GAAG,GAAG,cAAc,EACpB,SAAS,GAAG,KAAK,EAEjB,QAAQ,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,EACpD,eAAe,CAAC,EAAE,iBAAiB,4DA8xBpC;AAGD,eAAO,MAAM,QAAQ;YAAW;QAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;KAAE;;CAAmB,CAAA;AAMrE,eAAO,MAAM,MAAM,0DA8CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAiGxD"}

package/types/views/Theme.d.ts

@@ -1,9 +1,10 @@
 import { ChangedThemeResponse } from '../hooks/useTheme.js';
-import type { ThemeProps } from '../types.js';
+import type { DebugProp, ThemeProps } from '../types.js';
 export declare function Theme(props: ThemeProps): any;
-export declare function useThemedChildren(themeState: ChangedThemeResponse, children: any, options: {
+export declare function useThemedChildren(themeState: ChangedThemeResponse, children: any, props: {
     forceClassName?: boolean;
     shallow?: boolean;
     passPropsToChildren?: boolean;
+    debug?: DebugProp;
 }, isRoot?: boolean): any;
 //# sourceMappingURL=Theme.d.ts.map

package/types/views/Theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/views/Theme.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAwB,MAAM,sBAAsB,CAAA;AACjF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAE7C,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,OAsCtC;AAED,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,oBAAoB,EAChC,QAAQ,EAAE,GAAG,EACb,OAAO,EAAE;IACP,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B,EACD,MAAM,UAAQ,OAsEf"}
+{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/views/Theme.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAwB,MAAM,sBAAsB,CAAA;AACjF,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAGxD,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,OA0BtC;AAED,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,oBAAoB,EAChC,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE;IACL,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,EACD,MAAM,UAAQ,OAsEf"}

package/types/views/ThemeDebug.d.ts

@@ -0,0 +1,9 @@
+import { ChangedThemeResponse } from '../hooks/useTheme.js';
+import { ThemeProps } from '../types.js';
+export declare function ThemeDebug({ themeState, themeProps, children, onChangeCount, }: {
+    themeState: ChangedThemeResponse;
+    themeProps: ThemeProps;
+    onChangeCount?: number;
+    children: any;
+}): any;
+//# sourceMappingURL=ThemeDebug.d.ts.map

package/types/views/ThemeDebug.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeDebug.d.ts","sourceRoot":"","sources":["../../src/views/ThemeDebug.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAExC,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,UAAU,EACV,QAAQ,EACR,aAAa,GACd,EAAE;IACD,UAAU,EAAE,oBAAoB,CAAA;IAChC,UAAU,EAAE,UAAU,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,EAAE,GAAG,CAAA;CACd,OAmCA"}