@tamagui/web 1.5.6 → 1.5.8

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Text.tsx"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { stylePropsTextOnly, validStyles } from '@tamagui/helpers'\nimport type { Text as TextView } from 'react-native'\n\nimport { createComponent } from '../createComponent'\nimport { TextProps, TextPropsBase } from '../types'\n\nconst ellipseStyle = {\n  maxWidth: '100%',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}\n\nexport const Text = createComponent<TextProps, TextView, TextPropsBase>({\n  componentName: 'Text',\n  acceptsClassName: true,\n  isText: true,\n\n  defaultProps: {\n    // @ts-ignore\n    display: 'flex',\n    fontFamily: 'System',\n    ...(isWeb\n      ? {\n          display: 'inline',\n          boxSizing: 'border-box',\n          wordWrap: 'break-word',\n          margin: 0,\n        }\n      : {\n          suppressHighlighting: true,\n        }),\n  },\n\n  inlineWhenUnflattened: new Set(['fontFamily']),\n\n  variants: {\n    ...(isWeb && {\n      numberOfLines: {\n        1: ellipseStyle,\n\n        ':number': (numberOfLines) =>\n          numberOfLines >= 1\n            ? {\n                WebkitLineClamp: numberOfLines,\n                WebkitBoxOrient: 'vertical',\n                display: '-webkit-box',\n                overflow: 'hidden',\n              }\n            : null,\n      },\n    }),\n\n    // ??\n    ellipsizeMode: {\n      '...': () => null,\n    },\n\n    selectable: {\n      true: {\n        userSelect: 'text',\n        cursor: 'text',\n      },\n      false: {\n        userSelect: 'none',\n        cursor: 'default',\n      },\n    },\n\n    ellipse: {\n      true: isWeb\n        ? ellipseStyle\n        : {\n            numberOfLines: 1,\n            lineBreakMode: 'clip',\n          },\n    },\n  },\n\n  deoptProps: new Set(isWeb ? [] : ['ellipse']),\n\n  validStyles: {\n    ...validStyles,\n    ...stylePropsTextOnly,\n  },\n})\n"],
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { stylePropsTextOnly, validStyles } from '@tamagui/helpers'\nimport type { Text as TextView } from 'react-native'\n\nimport { createComponent } from '../createComponent.js'\nimport { TextProps, TextPropsBase } from '../types.js'\n\nconst ellipseStyle = {\n  maxWidth: '100%',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}\n\nexport const Text = createComponent<TextProps, TextView, TextPropsBase>({\n  componentName: 'Text',\n  acceptsClassName: true,\n  isText: true,\n\n  defaultProps: {\n    // @ts-ignore\n    display: 'flex',\n    fontFamily: 'System',\n    ...(isWeb\n      ? {\n          display: 'inline',\n          boxSizing: 'border-box',\n          wordWrap: 'break-word',\n          margin: 0,\n        }\n      : {\n          suppressHighlighting: true,\n        }),\n  },\n\n  inlineWhenUnflattened: new Set(['fontFamily']),\n\n  variants: {\n    ...(isWeb && {\n      numberOfLines: {\n        1: ellipseStyle,\n\n        ':number': (numberOfLines) =>\n          numberOfLines >= 1\n            ? {\n                WebkitLineClamp: numberOfLines,\n                WebkitBoxOrient: 'vertical',\n                display: '-webkit-box',\n                overflow: 'hidden',\n              }\n            : null,\n      },\n    }),\n\n    // ??\n    ellipsizeMode: {\n      '...': () => null,\n    },\n\n    selectable: {\n      true: {\n        userSelect: 'text',\n        cursor: 'text',\n      },\n      false: {\n        userSelect: 'none',\n        cursor: 'default',\n      },\n    },\n\n    ellipse: {\n      true: isWeb\n        ? ellipseStyle\n        : {\n            numberOfLines: 1,\n            lineBreakMode: 'clip',\n          },\n    },\n  },\n\n  deoptProps: new Set(isWeb ? [] : ['ellipse']),\n\n  validStyles: {\n    ...validStyles,\n    ...stylePropsTextOnly,\n  },\n})\n"],
   "mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,oBAAoB,mBAAmB;AAGhD,SAAS,uBAAuB;AAGhC,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AAEO,MAAM,OAAO,gBAAoD;AAAA,EACtE,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,QAAQ;AAAA,EAER,cAAc;AAAA;AAAA,IAEZ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,GAAI,QACA;AAAA,MACE,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,MACV,QAAQ;AAAA,IACV,IACA;AAAA,MACE,sBAAsB;AAAA,IACxB;AAAA,EACN;AAAA,EAEA,uBAAuB,oBAAI,IAAI,CAAC,YAAY,CAAC;AAAA,EAE7C,UAAU;AAAA,IACR,GAAI,SAAS;AAAA,MACX,eAAe;AAAA,QACb,GAAG;AAAA,QAEH,WAAW,CAAC,kBACV,iBAAiB,IACb;AAAA,UACE,iBAAiB;AAAA,UACjB,iBAAiB;AAAA,UACjB,SAAS;AAAA,UACT,UAAU;AAAA,QACZ,IACA;AAAA,MACR;AAAA,IACF;AAAA;AAAA,IAGA,eAAe;AAAA,MACb,OAAO,MAAM;AAAA,IACf;AAAA,IAEA,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,MACA,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IAEA,SAAS;AAAA,MACP,MAAM,QACF,eACA;AAAA,QACE,eAAe;AAAA,QACf,eAAe;AAAA,MACjB;AAAA,IACN;AAAA,EACF;AAAA,EAEA,YAAY,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;AAAA,EAE5C,aAAa;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF,CAAC;",
   "names": []
 }

package/dist/esm/views/Text.mjs

@@ -1,6 +1,6 @@
 import { isWeb } from "@tamagui/constants";
 import { stylePropsTextOnly, validStyles } from "@tamagui/helpers";
-import { createComponent } from "../createComponent";
+import { createComponent } from "../createComponent.js";
 const ellipseStyle = {
   maxWidth: "100%",
   overflow: "hidden",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Text.tsx"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { stylePropsTextOnly, validStyles } from '@tamagui/helpers'\nimport type { Text as TextView } from 'react-native'\n\nimport { createComponent } from '../createComponent'\nimport { TextProps, TextPropsBase } from '../types'\n\nconst ellipseStyle = {\n  maxWidth: '100%',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}\n\nexport const Text = createComponent<TextProps, TextView, TextPropsBase>({\n  componentName: 'Text',\n  acceptsClassName: true,\n  isText: true,\n\n  defaultProps: {\n    // @ts-ignore\n    display: 'flex',\n    fontFamily: 'System',\n    ...(isWeb\n      ? {\n          display: 'inline',\n          boxSizing: 'border-box',\n          wordWrap: 'break-word',\n          margin: 0,\n        }\n      : {\n          suppressHighlighting: true,\n        }),\n  },\n\n  inlineWhenUnflattened: new Set(['fontFamily']),\n\n  variants: {\n    ...(isWeb && {\n      numberOfLines: {\n        1: ellipseStyle,\n\n        ':number': (numberOfLines) =>\n          numberOfLines >= 1\n            ? {\n                WebkitLineClamp: numberOfLines,\n                WebkitBoxOrient: 'vertical',\n                display: '-webkit-box',\n                overflow: 'hidden',\n              }\n            : null,\n      },\n    }),\n\n    // ??\n    ellipsizeMode: {\n      '...': () => null,\n    },\n\n    selectable: {\n      true: {\n        userSelect: 'text',\n        cursor: 'text',\n      },\n      false: {\n        userSelect: 'none',\n        cursor: 'default',\n      },\n    },\n\n    ellipse: {\n      true: isWeb\n        ? ellipseStyle\n        : {\n            numberOfLines: 1,\n            lineBreakMode: 'clip',\n          },\n    },\n  },\n\n  deoptProps: new Set(isWeb ? [] : ['ellipse']),\n\n  validStyles: {\n    ...validStyles,\n    ...stylePropsTextOnly,\n  },\n})\n"],
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { stylePropsTextOnly, validStyles } from '@tamagui/helpers'\nimport type { Text as TextView } from 'react-native'\n\nimport { createComponent } from '../createComponent.js'\nimport { TextProps, TextPropsBase } from '../types.js'\n\nconst ellipseStyle = {\n  maxWidth: '100%',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}\n\nexport const Text = createComponent<TextProps, TextView, TextPropsBase>({\n  componentName: 'Text',\n  acceptsClassName: true,\n  isText: true,\n\n  defaultProps: {\n    // @ts-ignore\n    display: 'flex',\n    fontFamily: 'System',\n    ...(isWeb\n      ? {\n          display: 'inline',\n          boxSizing: 'border-box',\n          wordWrap: 'break-word',\n          margin: 0,\n        }\n      : {\n          suppressHighlighting: true,\n        }),\n  },\n\n  inlineWhenUnflattened: new Set(['fontFamily']),\n\n  variants: {\n    ...(isWeb && {\n      numberOfLines: {\n        1: ellipseStyle,\n\n        ':number': (numberOfLines) =>\n          numberOfLines >= 1\n            ? {\n                WebkitLineClamp: numberOfLines,\n                WebkitBoxOrient: 'vertical',\n                display: '-webkit-box',\n                overflow: 'hidden',\n              }\n            : null,\n      },\n    }),\n\n    // ??\n    ellipsizeMode: {\n      '...': () => null,\n    },\n\n    selectable: {\n      true: {\n        userSelect: 'text',\n        cursor: 'text',\n      },\n      false: {\n        userSelect: 'none',\n        cursor: 'default',\n      },\n    },\n\n    ellipse: {\n      true: isWeb\n        ? ellipseStyle\n        : {\n            numberOfLines: 1,\n            lineBreakMode: 'clip',\n          },\n    },\n  },\n\n  deoptProps: new Set(isWeb ? [] : ['ellipse']),\n\n  validStyles: {\n    ...validStyles,\n    ...stylePropsTextOnly,\n  },\n})\n"],
   "mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,oBAAoB,mBAAmB;AAGhD,SAAS,uBAAuB;AAGhC,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AAEO,MAAM,OAAO,gBAAoD;AAAA,EACtE,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,QAAQ;AAAA,EAER,cAAc;AAAA;AAAA,IAEZ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,GAAI,QACA;AAAA,MACE,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,MACV,QAAQ;AAAA,IACV,IACA;AAAA,MACE,sBAAsB;AAAA,IACxB;AAAA,EACN;AAAA,EAEA,uBAAuB,oBAAI,IAAI,CAAC,YAAY,CAAC;AAAA,EAE7C,UAAU;AAAA,IACR,GAAI,SAAS;AAAA,MACX,eAAe;AAAA,QACb,GAAG;AAAA,QAEH,WAAW,CAAC,kBACV,iBAAiB,IACb;AAAA,UACE,iBAAiB;AAAA,UACjB,iBAAiB;AAAA,UACjB,SAAS;AAAA,UACT,UAAU;AAAA,QACZ,IACA;AAAA,MACR;AAAA,IACF;AAAA;AAAA,IAGA,eAAe;AAAA,MACb,OAAO,MAAM;AAAA,IACf;AAAA,IAEA,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,MACA,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IAEA,SAAS;AAAA,MACP,MAAM,QACF,eACA;AAAA,QACE,eAAe;AAAA,QACf,eAAe;AAAA,MACjB;AAAA,IACN;AAAA,EACF;AAAA,EAEA,YAAY,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;AAAA,EAE5C,aAAa;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF,CAAC;",
   "names": []
 }

package/dist/esm/views/Theme.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { isWeb } from "@tamagui/constants";
 import { Children, cloneElement } from "react";
-import { variableToString } from "../createVariable";
-import { ThemeManagerContext } from "../helpers/ThemeManagerContext";
-import { useServerRef } from "../hooks/useServerHooks";
-import { useChangeThemeEffect } from "../hooks/useTheme";
+import { variableToString } from "../createVariable.js";
+import { ThemeManagerContext } from "../helpers/ThemeManagerContext.js";
+import { useServerRef } from "../hooks/useServerHooks.js";
+import { useChangeThemeEffect } from "../hooks/useTheme.js";
 function Theme(props) {
   if (props.disable)
     return props.children;

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 } from 'react'\n\nimport { variableToString } from '../createVariable'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext'\nimport { useServerRef } from '../hooks/useServerHooks'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeProps } from '../types'\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)\n}\n\nexport function useThemedChildren(\n  themeState: ChangedThemeResponse,\n  children: any,\n  options: { forceClassName?: boolean; shallow?: boolean }\n) {\n  const { themeManager, isNewTheme, className, theme } = themeState\n  const { shallow, forceClassName } = options\n\n  const hasEverThemed = useServerRef(false)\n  if (isNewTheme) {\n    hasEverThemed.current = true\n  }\n\n  // once a theme is set it always passes the context to avoid reparenting\n  // until then no context to avoid lots of context\n  if (!isNewTheme && !hasEverThemed.current && !forceClassName && !shallow) {\n    return children\n  }\n\n  // be sure to memoize shouldReset to avoid reparenting\n  let next = children\n\n  if (shallow && themeManager) {\n    next = Children.map(next, (child) => {\n      return cloneElement(\n        child,\n        undefined,\n        <Theme name={themeManager.state.parentName}>{child.props.children}</Theme>\n      )\n    })\n  }\n\n  next = (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {next}\n    </ThemeManagerContext.Provider>\n  )\n\n  if (isWeb) {\n    const enableClassName = forceClassName ?? (forceClassName !== false && isNewTheme)\n    return (\n      <span\n        className=\"_dsp_contents\"\n        {...(theme &&\n          enableClassName && {\n            className: `${className} _dsp_contents`,\n            style: {\n              // in order to provide currentColor, set color by default\n              color: variableToString(theme.color),\n            },\n          })}\n      >\n        {next}\n      </span>\n    )\n  }\n\n  return next\n}\n"],
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement } 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)\n}\n\nexport function useThemedChildren(\n  themeState: ChangedThemeResponse,\n  children: any,\n  options: { forceClassName?: boolean; shallow?: boolean }\n) {\n  const { themeManager, isNewTheme, className, theme } = themeState\n  const { shallow, forceClassName } = options\n\n  const hasEverThemed = useServerRef(false)\n  if (isNewTheme) {\n    hasEverThemed.current = true\n  }\n\n  // once a theme is set it always passes the context to avoid reparenting\n  // until then no context to avoid lots of context\n  if (!isNewTheme && !hasEverThemed.current && !forceClassName && !shallow) {\n    return children\n  }\n\n  // be sure to memoize shouldReset to avoid reparenting\n  let next = children\n\n  if (shallow && themeManager) {\n    next = Children.map(next, (child) => {\n      return cloneElement(\n        child,\n        undefined,\n        <Theme name={themeManager.state.parentName}>{child.props.children}</Theme>\n      )\n    })\n  }\n\n  next = (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {next}\n    </ThemeManagerContext.Provider>\n  )\n\n  if (isWeb) {\n    const enableClassName = forceClassName ?? (forceClassName !== false && isNewTheme)\n    return (\n      <span\n        className=\"_dsp_contents\"\n        {...(theme &&\n          enableClassName && {\n            className: `${className} _dsp_contents`,\n            style: {\n              // in order to provide currentColor, set color by default\n              color: variableToString(theme.color),\n            },\n          })}\n      >\n        {next}\n      </span>\n    )\n  }\n\n  return next\n}\n"],
   "mappings": "AAkDQ;AAlDR,SAAS,aAAa;AACtB,SAAS,UAAU,oBAAoB;AAEvC,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAA+B,4BAA4B;AAGpD,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM;AAAS,WAAO,MAAM;AAChC,QAAM,SAAS,CAAC,CAAC,MAAM,SAAS;AAChC,QAAM,aAAa,qBAAqB,OAAO,MAAM;AACrD,QAAM,WAAW,MAAM,gBAAgB,IACnC,SAAS;AAAA,IAAI,MAAM;AAAA,IAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,gBAAgB,GAAG,KAAK,CAAC;AAAA,EAClD,IACA,MAAM;AAEV,SAAO,kBAAkB,YAAY,UAAU,KAAK;AACtD;AAEO,SAAS,kBACd,YACA,UACA,SACA;AACA,QAAM,EAAE,cAAc,YAAY,WAAW,MAAM,IAAI;AACvD,QAAM,EAAE,SAAS,eAAe,IAAI;AAEpC,QAAM,gBAAgB,aAAa,KAAK;AACxC,MAAI,YAAY;AACd,kBAAc,UAAU;AAAA,EAC1B;AAIA,MAAI,CAAC,cAAc,CAAC,cAAc,WAAW,CAAC,kBAAkB,CAAC,SAAS;AACxE,WAAO;AAAA,EACT;AAGA,MAAI,OAAO;AAEX,MAAI,WAAW,cAAc;AAC3B,WAAO,SAAS,IAAI,MAAM,CAAC,UAAU;AACnC,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,oBAAC,SAAM,MAAM,aAAa,MAAM,YAAa,gBAAM,MAAM,UAAS;AAAA,MACpE;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SACE,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,cAClC,gBACH;AAGF,MAAI,OAAO;AACT,UAAM,kBAAkB,mBAAmB,mBAAmB,SAAS;AACvE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACT,GAAI,SACH,mBAAmB;AAAA,UACjB,WAAW,GAAG;AAAA,UACd,OAAO;AAAA;AAAA,YAEL,OAAO,iBAAiB,MAAM,KAAK;AAAA,UACrC;AAAA,QACF;AAAA,QAED;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/views/Theme.mjs

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { isWeb } from "@tamagui/constants";
 import { Children, cloneElement } from "react";
-import { variableToString } from "../createVariable";
-import { ThemeManagerContext } from "../helpers/ThemeManagerContext";
-import { useServerRef } from "../hooks/useServerHooks";
-import { useChangeThemeEffect } from "../hooks/useTheme";
+import { variableToString } from "../createVariable.js";
+import { ThemeManagerContext } from "../helpers/ThemeManagerContext.js";
+import { useServerRef } from "../hooks/useServerHooks.js";
+import { useChangeThemeEffect } from "../hooks/useTheme.js";
 function Theme(props) {
   if (props.disable)
     return props.children;

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 } from 'react'\n\nimport { variableToString } from '../createVariable'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext'\nimport { useServerRef } from '../hooks/useServerHooks'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeProps } from '../types'\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)\n}\n\nexport function useThemedChildren(\n  themeState: ChangedThemeResponse,\n  children: any,\n  options: { forceClassName?: boolean; shallow?: boolean }\n) {\n  const { themeManager, isNewTheme, className, theme } = themeState\n  const { shallow, forceClassName } = options\n\n  const hasEverThemed = useServerRef(false)\n  if (isNewTheme) {\n    hasEverThemed.current = true\n  }\n\n  // once a theme is set it always passes the context to avoid reparenting\n  // until then no context to avoid lots of context\n  if (!isNewTheme && !hasEverThemed.current && !forceClassName && !shallow) {\n    return children\n  }\n\n  // be sure to memoize shouldReset to avoid reparenting\n  let next = children\n\n  if (shallow && themeManager) {\n    next = Children.map(next, (child) => {\n      return cloneElement(\n        child,\n        undefined,\n        <Theme name={themeManager.state.parentName}>{child.props.children}</Theme>\n      )\n    })\n  }\n\n  next = (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {next}\n    </ThemeManagerContext.Provider>\n  )\n\n  if (isWeb) {\n    const enableClassName = forceClassName ?? (forceClassName !== false && isNewTheme)\n    return (\n      <span\n        className=\"_dsp_contents\"\n        {...(theme &&\n          enableClassName && {\n            className: `${className} _dsp_contents`,\n            style: {\n              // in order to provide currentColor, set color by default\n              color: variableToString(theme.color),\n            },\n          })}\n      >\n        {next}\n      </span>\n    )\n  }\n\n  return next\n}\n"],
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement } 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)\n}\n\nexport function useThemedChildren(\n  themeState: ChangedThemeResponse,\n  children: any,\n  options: { forceClassName?: boolean; shallow?: boolean }\n) {\n  const { themeManager, isNewTheme, className, theme } = themeState\n  const { shallow, forceClassName } = options\n\n  const hasEverThemed = useServerRef(false)\n  if (isNewTheme) {\n    hasEverThemed.current = true\n  }\n\n  // once a theme is set it always passes the context to avoid reparenting\n  // until then no context to avoid lots of context\n  if (!isNewTheme && !hasEverThemed.current && !forceClassName && !shallow) {\n    return children\n  }\n\n  // be sure to memoize shouldReset to avoid reparenting\n  let next = children\n\n  if (shallow && themeManager) {\n    next = Children.map(next, (child) => {\n      return cloneElement(\n        child,\n        undefined,\n        <Theme name={themeManager.state.parentName}>{child.props.children}</Theme>\n      )\n    })\n  }\n\n  next = (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {next}\n    </ThemeManagerContext.Provider>\n  )\n\n  if (isWeb) {\n    const enableClassName = forceClassName ?? (forceClassName !== false && isNewTheme)\n    return (\n      <span\n        className=\"_dsp_contents\"\n        {...(theme &&\n          enableClassName && {\n            className: `${className} _dsp_contents`,\n            style: {\n              // in order to provide currentColor, set color by default\n              color: variableToString(theme.color),\n            },\n          })}\n      >\n        {next}\n      </span>\n    )\n  }\n\n  return next\n}\n"],
   "mappings": "AAkDQ;AAlDR,SAAS,aAAa;AACtB,SAAS,UAAU,oBAAoB;AAEvC,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAA+B,4BAA4B;AAGpD,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM;AAAS,WAAO,MAAM;AAChC,QAAM,SAAS,CAAC,CAAC,MAAM,SAAS;AAChC,QAAM,aAAa,qBAAqB,OAAO,MAAM;AACrD,QAAM,WAAW,MAAM,gBAAgB,IACnC,SAAS;AAAA,IAAI,MAAM;AAAA,IAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,gBAAgB,GAAG,KAAK,CAAC;AAAA,EAClD,IACA,MAAM;AAEV,SAAO,kBAAkB,YAAY,UAAU,KAAK;AACtD;AAEO,SAAS,kBACd,YACA,UACA,SACA;AACA,QAAM,EAAE,cAAc,YAAY,WAAW,MAAM,IAAI;AACvD,QAAM,EAAE,SAAS,eAAe,IAAI;AAEpC,QAAM,gBAAgB,aAAa,KAAK;AACxC,MAAI,YAAY;AACd,kBAAc,UAAU;AAAA,EAC1B;AAIA,MAAI,CAAC,cAAc,CAAC,cAAc,WAAW,CAAC,kBAAkB,CAAC,SAAS;AACxE,WAAO;AAAA,EACT;AAGA,MAAI,OAAO;AAEX,MAAI,WAAW,cAAc;AAC3B,WAAO,SAAS,IAAI,MAAM,CAAC,UAAU;AACnC,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,oBAAC,SAAM,MAAM,aAAa,MAAM,YAAa,gBAAM,MAAM,UAAS;AAAA,MACpE;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SACE,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,cAClC,gBACH;AAGF,MAAI,OAAO;AACT,UAAM,kBAAkB,mBAAmB,mBAAmB,SAAS;AACvE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACT,GAAI,SACH,mBAAmB;AAAA,UACjB,WAAW,GAAG;AAAA,UACd,OAAO;AAAA;AAAA,YAEL,OAAO,iBAAiB,MAAM,KAAK;AAAA,UACrC;AAAA,QACF;AAAA,QAED;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/views/ThemeProvider.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { isClient } from "@tamagui/constants";
 import { createContext, useLayoutEffect, useMemo } from "react";
-import { THEME_CLASSNAME_PREFIX } from "../constants/constants";
-import { Theme } from "./Theme";
+import { THEME_CLASSNAME_PREFIX } from "../constants/constants.js";
+import { Theme } from "./Theme.js";
 const ThemeProviderRootContext = createContext(null);
 const ThemeProvider = (props) => {
   if (isClient) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeProvider.tsx"],
-  "sourcesContent": ["import { isClient } from '@tamagui/constants'\nimport { createContext, useLayoutEffect, useMemo } from 'react'\n\nimport { THEME_CLASSNAME_PREFIX } from '../constants/constants'\nimport { Theme } from './Theme'\n\nexport type ThemeProviderProps = {\n  className?: string\n  defaultTheme: string\n  disableRootThemeClass?: boolean\n  themeClassNameOnRoot?: boolean\n  children?: any\n  reset?: boolean\n}\n\nexport const ThemeProviderRootContext = createContext<Pick<\n  ThemeProviderProps,\n  'defaultTheme'\n> | null>(null)\n\nexport const ThemeProvider = (props: ThemeProviderProps) => {\n  // ensure theme is attached to root body node as well to work with modals by default\n  if (isClient) {\n    useLayoutEffect(() => {\n      if (props.disableRootThemeClass) return\n      const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`\n      const target = props.themeClassNameOnRoot ? document.documentElement : document.body\n      target.classList.add(cn)\n      return () => {\n        target.classList.remove(cn)\n      }\n    }, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot])\n  }\n\n  return (\n    <ThemeProviderRootContext.Provider\n      value={useMemo(() => {\n        return {\n          defaultTheme: props.defaultTheme,\n        }\n        // NOTE DON'T CHANGE THIS ITS ONLY USED BY useThemeName for SSR safety for now...\n      }, [])}\n    >\n      <Theme\n        className={props.className}\n        name={props.defaultTheme}\n        forceClassName={props.disableRootThemeClass ? false : undefined}\n        // @ts-expect-error\n        _isRoot\n      >\n        {props.children}\n      </Theme>\n    </ThemeProviderRootContext.Provider>\n  )\n}\n"],
+  "sourcesContent": ["import { isClient } from '@tamagui/constants'\nimport { createContext, useLayoutEffect, useMemo } from 'react'\n\nimport { THEME_CLASSNAME_PREFIX } from '../constants/constants.js'\nimport { Theme } from './Theme.js'\n\nexport type ThemeProviderProps = {\n  className?: string\n  defaultTheme: string\n  disableRootThemeClass?: boolean\n  themeClassNameOnRoot?: boolean\n  children?: any\n  reset?: boolean\n}\n\nexport const ThemeProviderRootContext = createContext<Pick<\n  ThemeProviderProps,\n  'defaultTheme'\n> | null>(null)\n\nexport const ThemeProvider = (props: ThemeProviderProps) => {\n  // ensure theme is attached to root body node as well to work with modals by default\n  if (isClient) {\n    useLayoutEffect(() => {\n      if (props.disableRootThemeClass) return\n      const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`\n      const target = props.themeClassNameOnRoot ? document.documentElement : document.body\n      target.classList.add(cn)\n      return () => {\n        target.classList.remove(cn)\n      }\n    }, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot])\n  }\n\n  return (\n    <ThemeProviderRootContext.Provider\n      value={useMemo(() => {\n        return {\n          defaultTheme: props.defaultTheme,\n        }\n        // NOTE DON'T CHANGE THIS ITS ONLY USED BY useThemeName for SSR safety for now...\n      }, [])}\n    >\n      <Theme\n        className={props.className}\n        name={props.defaultTheme}\n        forceClassName={props.disableRootThemeClass ? false : undefined}\n        // @ts-expect-error\n        _isRoot\n      >\n        {props.children}\n      </Theme>\n    </ThemeProviderRootContext.Provider>\n  )\n}\n"],
   "mappings": "AA2CM;AA3CN,SAAS,gBAAgB;AACzB,SAAS,eAAe,iBAAiB,eAAe;AAExD,SAAS,8BAA8B;AACvC,SAAS,aAAa;AAWf,MAAM,2BAA2B,cAG9B,IAAI;AAEP,MAAM,gBAAgB,CAAC,UAA8B;AAE1D,MAAI,UAAU;AACZ,oBAAgB,MAAM;AACpB,UAAI,MAAM;AAAuB;AACjC,YAAM,KAAK,GAAG,yBAAyB,MAAM;AAC7C,YAAM,SAAS,MAAM,uBAAuB,SAAS,kBAAkB,SAAS;AAChF,aAAO,UAAU,IAAI,EAAE;AACvB,aAAO,MAAM;AACX,eAAO,UAAU,OAAO,EAAE;AAAA,MAC5B;AAAA,IACF,GAAG,CAAC,MAAM,cAAc,MAAM,uBAAuB,MAAM,oBAAoB,CAAC;AAAA,EAClF;AAEA,SACE;AAAA,IAAC,yBAAyB;AAAA,IAAzB;AAAA,MACC,OAAO,QAAQ,MAAM;AACnB,eAAO;AAAA,UACL,cAAc,MAAM;AAAA,QACtB;AAAA,MAEF,GAAG,CAAC,CAAC;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,MAAM;AAAA,UACjB,MAAM,MAAM;AAAA,UACZ,gBAAgB,MAAM,wBAAwB,QAAQ;AAAA,UAEtD,SAAO;AAAA,UAEN,gBAAM;AAAA;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/views/ThemeProvider.mjs

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { isClient } from "@tamagui/constants";
 import { createContext, useLayoutEffect, useMemo } from "react";
-import { THEME_CLASSNAME_PREFIX } from "../constants/constants";
-import { Theme } from "./Theme";
+import { THEME_CLASSNAME_PREFIX } from "../constants/constants.js";
+import { Theme } from "./Theme.js";
 const ThemeProviderRootContext = createContext(null);
 const ThemeProvider = (props) => {
   if (isClient) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeProvider.tsx"],
-  "sourcesContent": ["import { isClient } from '@tamagui/constants'\nimport { createContext, useLayoutEffect, useMemo } from 'react'\n\nimport { THEME_CLASSNAME_PREFIX } from '../constants/constants'\nimport { Theme } from './Theme'\n\nexport type ThemeProviderProps = {\n  className?: string\n  defaultTheme: string\n  disableRootThemeClass?: boolean\n  themeClassNameOnRoot?: boolean\n  children?: any\n  reset?: boolean\n}\n\nexport const ThemeProviderRootContext = createContext<Pick<\n  ThemeProviderProps,\n  'defaultTheme'\n> | null>(null)\n\nexport const ThemeProvider = (props: ThemeProviderProps) => {\n  // ensure theme is attached to root body node as well to work with modals by default\n  if (isClient) {\n    useLayoutEffect(() => {\n      if (props.disableRootThemeClass) return\n      const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`\n      const target = props.themeClassNameOnRoot ? document.documentElement : document.body\n      target.classList.add(cn)\n      return () => {\n        target.classList.remove(cn)\n      }\n    }, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot])\n  }\n\n  return (\n    <ThemeProviderRootContext.Provider\n      value={useMemo(() => {\n        return {\n          defaultTheme: props.defaultTheme,\n        }\n        // NOTE DON'T CHANGE THIS ITS ONLY USED BY useThemeName for SSR safety for now...\n      }, [])}\n    >\n      <Theme\n        className={props.className}\n        name={props.defaultTheme}\n        forceClassName={props.disableRootThemeClass ? false : undefined}\n        // @ts-expect-error\n        _isRoot\n      >\n        {props.children}\n      </Theme>\n    </ThemeProviderRootContext.Provider>\n  )\n}\n"],
+  "sourcesContent": ["import { isClient } from '@tamagui/constants'\nimport { createContext, useLayoutEffect, useMemo } from 'react'\n\nimport { THEME_CLASSNAME_PREFIX } from '../constants/constants.js'\nimport { Theme } from './Theme.js'\n\nexport type ThemeProviderProps = {\n  className?: string\n  defaultTheme: string\n  disableRootThemeClass?: boolean\n  themeClassNameOnRoot?: boolean\n  children?: any\n  reset?: boolean\n}\n\nexport const ThemeProviderRootContext = createContext<Pick<\n  ThemeProviderProps,\n  'defaultTheme'\n> | null>(null)\n\nexport const ThemeProvider = (props: ThemeProviderProps) => {\n  // ensure theme is attached to root body node as well to work with modals by default\n  if (isClient) {\n    useLayoutEffect(() => {\n      if (props.disableRootThemeClass) return\n      const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`\n      const target = props.themeClassNameOnRoot ? document.documentElement : document.body\n      target.classList.add(cn)\n      return () => {\n        target.classList.remove(cn)\n      }\n    }, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot])\n  }\n\n  return (\n    <ThemeProviderRootContext.Provider\n      value={useMemo(() => {\n        return {\n          defaultTheme: props.defaultTheme,\n        }\n        // NOTE DON'T CHANGE THIS ITS ONLY USED BY useThemeName for SSR safety for now...\n      }, [])}\n    >\n      <Theme\n        className={props.className}\n        name={props.defaultTheme}\n        forceClassName={props.disableRootThemeClass ? false : undefined}\n        // @ts-expect-error\n        _isRoot\n      >\n        {props.children}\n      </Theme>\n    </ThemeProviderRootContext.Provider>\n  )\n}\n"],
   "mappings": "AA2CM;AA3CN,SAAS,gBAAgB;AACzB,SAAS,eAAe,iBAAiB,eAAe;AAExD,SAAS,8BAA8B;AACvC,SAAS,aAAa;AAWf,MAAM,2BAA2B,cAG9B,IAAI;AAEP,MAAM,gBAAgB,CAAC,UAA8B;AAE1D,MAAI,UAAU;AACZ,oBAAgB,MAAM;AACpB,UAAI,MAAM;AAAuB;AACjC,YAAM,KAAK,GAAG,yBAAyB,MAAM;AAC7C,YAAM,SAAS,MAAM,uBAAuB,SAAS,kBAAkB,SAAS;AAChF,aAAO,UAAU,IAAI,EAAE;AACvB,aAAO,MAAM;AACX,eAAO,UAAU,OAAO,EAAE;AAAA,MAC5B;AAAA,IACF,GAAG,CAAC,MAAM,cAAc,MAAM,uBAAuB,MAAM,oBAAoB,CAAC;AAAA,EAClF;AAEA,SACE;AAAA,IAAC,yBAAyB;AAAA,IAAzB;AAAA,MACC,OAAO,QAAQ,MAAM;AACnB,eAAO;AAAA,UACL,cAAc,MAAM;AAAA,QACtB;AAAA,MAEF,GAAG,CAAC,CAAC;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,MAAM;AAAA,UACjB,MAAM,MAAM;AAAA,UACZ,gBAAgB,MAAM,wBAAwB,QAAQ;AAAA,UAEtD,SAAO;AAAA,UAEN,gBAAM;AAAA;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/package.json

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

package/src/Tamagui.ts

@@ -1,8 +1,12 @@
 import * as Helpers from '@tamagui/helpers'
 
-import { getConfig } from './config'
-import { getAllRules, getAllSelectors, getAllTransforms } from './helpers/insertStyleRule'
-import { mediaState } from './hooks/useMedia'
+import { getConfig } from './config.js'
+import {
+  getAllRules,
+  getAllSelectors,
+  getAllTransforms,
+} from './helpers/insertStyleRule.js'
+import { mediaState } from './hooks/useMedia.js'
 
 // easy introspection
 // only included in dev mode

package/src/addTheme.ts

@@ -1,9 +1,9 @@
 import { isWeb } from '@tamagui/constants'
 
-import { getConfig, updateConfig } from './config'
-import { getThemeCSSRules } from './helpers/getThemeCSSRules'
-import { ensureThemeVariable, proxyThemeToParents } from './helpers/themes'
-import { ThemeDefinition, ThemeParsed } from './types'
+import { getConfig, updateConfig } from './config.js'
+import { getThemeCSSRules } from './helpers/getThemeCSSRules.js'
+import { ensureThemeVariable, proxyThemeToParents } from './helpers/themes.js'
+import { ThemeDefinition, ThemeParsed } from './types.js'
 
 export function addTheme(props: {
   name: string

package/src/config.ts

@@ -1,4 +1,4 @@
-import { ConfigListener, TamaguiInternalConfig, TokensMerged } from './types'
+import { ConfigListener, TamaguiInternalConfig, TokensMerged } from './types.js'
 
 let conf: TamaguiInternalConfig | null
 

package/src/contexts/FontLanguageContext.tsx

@@ -1,5 +1,5 @@
 import { createContext } from 'react'
 
-import { LanguageContextType } from '../views/FontLanguage.types'
+import type { LanguageContextType } from '../views/FontLanguage.types.js'
 
 export const FontLanguageContext = createContext<LanguageContextType | null>(null)

package/src/contexts/TextAncestorContext.tsx

@@ -1,3 +1,3 @@
-import React, { createContext } from 'react'
+import { createContext } from 'react'
 
 export const TextAncestorContext = createContext(false)

package/src/createComponent.tsx

@@ -13,21 +13,21 @@ import React, {
   useRef,
 } from 'react'
 
-import { onConfiguredOnce } from './config'
-import { stackDefaultStyles } from './constants/constants'
-import { FontLanguageContext } from './contexts/FontLanguageContext'
-import { TextAncestorContext } from './contexts/TextAncestorContext'
-import { didGetVariableValue, setDidGetVariableValue } from './createVariable'
-import { extendStaticConfig, parseStaticConfig } from './helpers/extendStaticConfig'
-import { useSplitStyles } from './helpers/getSplitStyles'
-import { getAllSelectors } from './helpers/insertStyleRule'
-import { mergeProps } from './helpers/mergeProps'
-import { proxyThemeVariables } from './helpers/proxyThemeVariables'
-import { useShallowSetState } from './helpers/useShallowSetState'
-import { setMediaShouldUpdate, useMedia } from './hooks/useMedia'
-import { useServerRef, useServerState } from './hooks/useServerHooks'
-import { useThemeWithState } from './hooks/useTheme'
-import { hooks } from './setupHooks'
+import { onConfiguredOnce } from './config.js'
+import { stackDefaultStyles } from './constants/constants.js'
+import { FontLanguageContext } from './contexts/FontLanguageContext.js'
+import { TextAncestorContext } from './contexts/TextAncestorContext.js'
+import { didGetVariableValue, setDidGetVariableValue } from './createVariable.js'
+import { extendStaticConfig, parseStaticConfig } from './helpers/extendStaticConfig.js'
+import { useSplitStyles } from './helpers/getSplitStyles.js'
+import { getAllSelectors } from './helpers/insertStyleRule.js'
+import { mergeProps } from './helpers/mergeProps.js'
+import { proxyThemeVariables } from './helpers/proxyThemeVariables.js'
+import { useShallowSetState } from './helpers/useShallowSetState.js'
+import { setMediaShouldUpdate, useMedia } from './hooks/useMedia.js'
+import { useServerRef, useServerState } from './hooks/useServerHooks.js'
+import { useThemeWithState } from './hooks/useTheme.js'
+import { hooks } from './setupHooks.js'
 import {
   DebugProp,
   SpaceDirection,
@@ -45,8 +45,8 @@ import {
   UseAnimationHook,
   UseAnimationProps,
 } from './types'
-import { Slot } from './views/Slot'
-import { useThemedChildren } from './views/Theme'
+import { Slot } from './views/Slot.js'
+import { useThemedChildren } from './views/Theme.js'
 
 // let t
 // import { timer } from '@tamagui/timer'

package/src/createFont.ts

@@ -1,4 +1,4 @@
-import { FontWeightSteps, GenericFont } from './types'
+import { FontWeightSteps, GenericFont } from './types.js'
 
 const fontWeights: FontWeightSteps[] = [
   '100',

package/src/createShorthands.ts

@@ -1,4 +1,4 @@
-import { CreateShorthands } from './types'
+import { CreateShorthands } from './types.js'
 
 // just a type helper util
 

package/src/createTamagui.ts

@@ -1,28 +1,28 @@
 import { isRSC, isWeb } from '@tamagui/constants'
 
-import { configListeners, setConfig } from './config'
-import { createVariables, tokensKeysOrdered } from './createVariables'
-import { getThemeCSSRules } from './helpers/getThemeCSSRules'
+import { configListeners, setConfig } from './config.js'
+import { createVariables, tokensKeysOrdered } from './createVariables.js'
+import { getThemeCSSRules } from './helpers/getThemeCSSRules.js'
 import {
   getAllRules,
   listenForSheetChanges,
   scanAllSheets,
-} from './helpers/insertStyleRule'
+} from './helpers/insertStyleRule.js'
 import {
   registerCSSVariable,
   tokensValueToVariable,
   variableToCSS,
-} from './helpers/registerCSSVariable'
-import { ensureThemeVariable, proxyThemeToParents } from './helpers/themes'
-import { configureMedia } from './hooks/useMedia'
-import { parseFont, registerFontVariables } from './insertFont'
-import { Tamagui } from './Tamagui'
+} from './helpers/registerCSSVariable.js'
+import { ensureThemeVariable, proxyThemeToParents } from './helpers/themes.js'
+import { configureMedia } from './hooks/useMedia.js'
+import { parseFont, registerFontVariables } from './insertFont.js'
+import { Tamagui } from './Tamagui.js'
 import {
   CreateTamaguiProps,
   InferTamaguiConfig,
   TamaguiInternalConfig,
   ThemeParsed,
-} from './types'
+} from './types.js'
 
 // config is re-run by the @tamagui/static, dont double validate
 const createdConfigs = new WeakMap<any, boolean>()

package/src/createTheme.ts

@@ -1,4 +1,4 @@
-import type { Variable } from './createVariable'
+import type { Variable } from './createVariable.js'
 
 type GenericTheme = { [key: string]: string | Variable }
 

package/src/createTokens.ts

@@ -1,6 +1,6 @@
-import { Variable } from './createVariable'
-import { createVariables } from './createVariables'
-import { CreateTokens } from './types'
+import { Variable } from './createVariable.js'
+import { createVariables } from './createVariables.js'
+import { CreateTokens } from './types.js'
 
 // tokens.color.dark.red ===> { var: `color-dark-red`, val: '' }
 export function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {

package/src/createVariable.ts

@@ -1,7 +1,7 @@
 import { isWeb } from '@tamagui/constants'
 import { simpleHash } from '@tamagui/helpers'
 
-import { getConfig } from './config'
+import { getConfig } from './config.js'
 
 /**
  * Should rename this to Token

package/src/createVariables.ts

@@ -1,6 +1,6 @@
 import { simpleHash } from '@tamagui/helpers'
 
-import { Variable, createVariable, isVariable } from './createVariable'
+import { Variable, createVariable, isVariable } from './createVariable.js'
 
 type DeepTokenObject<Val extends string | number = any> = {
   [key: string]: Val | DeepTokenObject<Val>

package/src/helpers/ThemeManager.tsx

@@ -1,7 +1,7 @@
-import { getThemes, getTokens } from '../config'
-import { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from '../constants/constants'
-import { getThemeUnwrapped } from '../hooks/getThemeUnwrapped'
-import { ThemeParsed, ThemeProps } from '../types'
+import { getThemes, getTokens } from '../config.js'
+import { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from '../constants/constants.js'
+import { getThemeUnwrapped } from '../hooks/getThemeUnwrapped.js'
+import { ThemeParsed, ThemeProps } from '../types.js'
 
 type ThemeListener = (name: string | null, themeManager: ThemeManager) => void
 
@@ -162,7 +162,13 @@ export class ThemeManager {
 function getNextThemeClassName(name: string, isInverting = false) {
   const next = `${THEME_CLASSNAME_PREFIX}${name}`
   if (isInverting) {
-    return next
+    return (
+      next +
+      // ensure you invert to base dark as well as specific dark
+      // ... logic should likely be elsewhere
+      (next.includes('dark_') ? ` t_dark` : '') +
+      (next.includes('light_') ? ` t_light` : '')
+    )
   }
   return next.replace('light_', '').replace('dark_', '')
 }

package/src/helpers/ThemeManagerContext.tsx

@@ -1,5 +1,5 @@
 import { createContext } from 'react'
 
-import { ThemeManager } from './ThemeManager'
+import { ThemeManager } from './ThemeManager.js'
 
 export const ThemeManagerContext = createContext<ThemeManager | null>(null)

package/src/helpers/createMediaStyle.ts

@@ -1,7 +1,7 @@
 import { StyleObject } from '@tamagui/helpers'
 
-import { mediaObjectToString } from '../hooks/useMedia'
-import { MediaQueries, PartialStyleObject } from '../types'
+import { mediaObjectToString } from '../hooks/useMedia.js'
+import type { MediaQueries, PartialStyleObject } from '../types.js'
 
 // TODO have this be used by extractMediaStyle in tamagui static
 // not synced to static/constants for now

package/src/helpers/createPropMapper.ts

@@ -1,9 +1,9 @@
 import { isWeb } from '@tamagui/constants'
 
-import { getConfig } from '../config'
-import { isDevTools } from '../constants/isDevTools'
-import { Variable, getVariableValue, isVariable } from '../createVariable'
-import {
+import { getConfig } from '../config.js'
+import { isDevTools } from '../constants/isDevTools.js'
+import { Variable, getVariableValue, isVariable } from '../createVariable.js'
+import type {
   DebugProp,
   GenericVariantDefinitions,
   PropMapper,
@@ -11,13 +11,13 @@ import {
   StaticConfigParsed,
   TamaguiInternalConfig,
   VariantSpreadFunction,
-} from '../types'
-import { LanguageContextType } from '../views/FontLanguage.types'
-import { expandStyle } from './expandStyle'
-import { expandStyles } from './expandStyles'
-import { getFontsForLanguage, getVariantExtras } from './getVariantExtras'
-import { isObj } from './isObj'
-import { mergeProps } from './mergeProps'
+} from '../types.js'
+import type { LanguageContextType } from '../views/FontLanguage.types.js'
+import { expandStyle } from './expandStyle.js'
+import { expandStyles } from './expandStyles.js'
+import { getFontsForLanguage, getVariantExtras } from './getVariantExtras.js'
+import { isObj } from './isObj.js'
+import { mergeProps } from './mergeProps.js'
 
 export type ResolveVariableTypes =
   | 'auto'
@@ -533,6 +533,8 @@ function resolveVariableValue(
   return valOrVar
 }
 
+// TODO move to validStyleProps to merge
+
 // just specificy the least costly, all else go to `space` (most keys - we can exclude)
 const tokenCategories = {
   radius: {

package/src/helpers/expandStyles.ts

@@ -1,8 +1,8 @@
-import { getConfig } from '../config'
-import { expandStyle } from './expandStyle'
-import { normalizeShadow } from './normalizeShadow'
+import { getConfig } from '../config.js'
+import { expandStyle } from './expandStyle.js'
+import { normalizeShadow } from './normalizeShadow.js'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty.js'
-import { pseudoDescriptors } from './pseudoDescriptors'
+import { pseudoDescriptors } from './pseudoDescriptors.js'
 
 let shorthands: Record<string, string> | null = null
 export const defaultOffset = { height: 0, width: 0 }

package/src/helpers/extendStaticConfig.ts

@@ -1,8 +1,8 @@
 import { stylePropsView } from '@tamagui/helpers'
 
-import { StaticConfig, StaticConfigParsed, StylableComponent } from '../types'
-import { createPropMapper } from './createPropMapper'
-import { mergeProps } from './mergeProps'
+import type { StaticConfig, StaticConfigParsed, StylableComponent } from '../types.js'
+import { createPropMapper } from './createPropMapper.js'
+import { mergeProps } from './mergeProps.js'
 
 export function extendStaticConfig(
   config: Partial<StaticConfig>,

package/src/helpers/getAnimationDriver.tsx

@@ -1,4 +1,4 @@
-import { getConfig } from '../config'
+import { getConfig } from '../config.js'
 
 export function getAnimationDriver() {
   return getConfig().animations

package/src/helpers/getExpandedShorthands.ts

@@ -1,14 +1,12 @@
-import { getConfig } from '../config'
-import { Shorthands } from '../types'
+import { getConfig } from '../config.js'
+import { Shorthands } from '../types.js'
 
 export function getExpandedShorthands<A extends Object>(
   props: A
 ): Omit<A, keyof Shorthands> {
   const shorthands = getConfig().shorthands
-  if (!shorthands) {
-    return props
-  }
-  const res: A = {} as any
+  if (!shorthands) return props
+  const res = {} as A
   for (const key in props) {
     // @ts-ignore
     res[shorthands[key] || key] = props[key]