@tamagui/core 1.0.1-beta.98 → 1.0.1-rc.0

package/dist/cjs/views/Slot.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Slot.tsx"],
-  "sourcesContent": ["// via radix\n\nimport { composeRefs } from '@tamagui/compose-refs'\nimport * as React from 'react'\n\nimport { isWeb } from '../constants/platform'\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * -----------------------------------------------------------------------------------------------*/\n\nexport type SlotProps = {\n  children?: React.ReactNode\n}\n\nexport const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {\n  const { children, ...slotProps } = props\n  return (\n    <SlotClone {...slotProps} ref={forwardedRef}>\n      {children}\n    </SlotClone>\n  )\n})\n\nSlot.displayName = 'Slot'\n\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotCloneProps {\n  children: React.ReactNode\n}\n\nconst SlotClone = React.forwardRef<any, SlotCloneProps>((props, forwardedRef) => {\n  const { children, ...slotProps } = props\n\n  if (React.isValidElement(children)) {\n    const childProps = {\n      ...mergeProps(children, slotProps),\n      ref: composeRefs(forwardedRef, (children as any).ref),\n    }\n    return React.cloneElement(children, childProps)\n  }\n\n  return React.Children.count(children) > 1 ? React.Children.only(null) : null\n})\n\nSlotClone.displayName = 'SlotClone'\n\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Slottable = ({ children }: { children: React.ReactNode }) => {\n  return <>{children}</>\n}\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype AnyProps = Record<string, any>\n\n// function isSlottable(child: React.ReactNode): child is React.ReactElement {\n//   return React.isValidElement(child)\n// }\n\nconst pressMap = isWeb\n  ? {\n      onPress: 'onClick',\n      onPressOut: 'onMouseUp',\n      onPressIn: 'onMouseDown',\n    }\n  : {}\n\nfunction mergeProps(child: any, slotProps: AnyProps) {\n  const childProps = child.props\n\n  // all child props should override\n  const overrideProps = { ...childProps }\n  const isHTMLChild = typeof child.type === 'string'\n\n  if (isHTMLChild) {\n    for (const key in pressMap) {\n      if (key in slotProps) {\n        slotProps[pressMap[key]] = slotProps[key]\n        delete slotProps[key]\n      }\n    }\n  }\n\n  for (let propName in childProps) {\n    const slotPropValue = slotProps[propName]\n    const childPropValue = childProps[propName]\n\n    if (isHTMLChild && pressMap[propName]) {\n      propName = pressMap[propName]\n      delete overrideProps[propName]\n    }\n\n    const isHandler = handleRegex.test(propName)\n    // if it's a handler, modify the override by composing the base handler\n    if (isHandler) {\n      overrideProps[propName] = mergeEvent(childPropValue, slotPropValue)\n    }\n    // if it's `style`, we merge them\n    else if (propName === 'style') {\n      overrideProps[propName] = { ...slotPropValue, ...childPropValue }\n    } else if (propName === 'className') {\n      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ')\n    }\n  }\n\n  return { ...slotProps, ...overrideProps }\n}\n\nconst handleRegex = /^on[A-Z]/\n\nexport function mergeEvent(a?: Function, b?: Function) {\n  return (...args: unknown[]) => {\n    a?.(...args)\n    b?.(...args)\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,0BAA4B;AAC5B,YAAuB;AAEvB,sBAAsB;AAUf,MAAM,OAAO,MAAM,WAAmC,CAAC,OAAO,iBAAiB;AACpF,QAAmC,YAA3B,eAA2B,IAAd,sBAAc,IAAd,CAAb;AACR,SACE,oCAAC,4CAAc,YAAd;AAAA,IAAyB,KAAK;AAAA,MAC5B,QACH;AAEJ,CAAC;AAED,KAAK,cAAc;AAUnB,MAAM,YAAY,MAAM,WAAgC,CAAC,OAAO,iBAAiB;AAC/E,QAAmC,YAA3B,eAA2B,IAAd,sBAAc,IAAd,CAAb;AAER,MAAI,MAAM,eAAe,QAAQ,GAAG;AAClC,UAAM,aAAa,iCACd,WAAW,UAAU,SAAS,IADhB;AAAA,MAEjB,KAAK,qCAAY,cAAe,SAAiB,GAAG;AAAA,IACtD;AACA,WAAO,MAAM,aAAa,UAAU,UAAU;AAAA,EAChD;AAEA,SAAO,MAAM,SAAS,MAAM,QAAQ,IAAI,IAAI,MAAM,SAAS,KAAK,IAAI,IAAI;AAC1E,CAAC;AAED,UAAU,cAAc;AAMjB,MAAM,YAAY,CAAC,EAAE,eAA8C;AACxE,SAAO,0DAAG,QAAS;AACrB;AAUA,MAAM,WAAW,wBACb;AAAA,EACE,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,WAAW;AACb,IACA,CAAC;AAEL,oBAAoB,OAAY,WAAqB;AACnD,QAAM,aAAa,MAAM;AAGzB,QAAM,gBAAgB,mBAAK;AAC3B,QAAM,cAAc,OAAO,MAAM,SAAS;AAE1C,MAAI,aAAa;AACf,eAAW,OAAO,UAAU;AAC1B,UAAI,OAAO,WAAW;AACpB,kBAAU,SAAS,QAAQ,UAAU;AACrC,eAAO,UAAU;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAEA,WAAS,YAAY,YAAY;AAC/B,UAAM,gBAAgB,UAAU;AAChC,UAAM,iBAAiB,WAAW;AAElC,QAAI,eAAe,SAAS,WAAW;AACrC,iBAAW,SAAS;AACpB,aAAO,cAAc;AAAA,IACvB;AAEA,UAAM,YAAY,YAAY,KAAK,QAAQ;AAE3C,QAAI,WAAW;AACb,oBAAc,YAAY,WAAW,gBAAgB,aAAa;AAAA,IACpE,WAES,aAAa,SAAS;AAC7B,oBAAc,YAAY,kCAAK,gBAAkB;AAAA,IACnD,WAAW,aAAa,aAAa;AACnC,oBAAc,YAAY,CAAC,eAAe,cAAc,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,IACpF;AAAA,EACF;AAEA,SAAO,kCAAK,YAAc;AAC5B;AAEA,MAAM,cAAc;AAEb,oBAAoB,GAAc,GAAc;AACrD,SAAO,IAAI,SAAoB;AAC7B,2BAAI,GAAG;AACP,2BAAI,GAAG;AAAA,EACT;AACF;",
+  "sourcesContent": ["// via radix\n\nimport { composeRefs } from '@tamagui/compose-refs'\nimport { isWeb } from '@tamagui/constants'\nimport { Children, ReactElement, ReactNode, cloneElement, forwardRef, isValidElement } from 'react'\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * -----------------------------------------------------------------------------------------------*/\n\nexport type SlotProps = {\n  children?: ReactNode\n}\n\nexport const Slot = forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {\n  const { children, ...slotProps } = props\n  const childrenArray = Children.toArray(children)\n  const slottable = childrenArray.find(isSlottable)\n\n  if (slottable) {\n    // the new element to render is the one passed as a child of `Slottable`\n    const newElement = slottable.props.children as ReactNode\n\n    const newChildren = childrenArray.map((child) => {\n      if (child === slottable) {\n        // because the new element will be the one rendered, we are only interested\n        // in grabbing its children (`newElement.props.children`)\n        if (Children.count(newElement) > 1) return Children.only(null)\n        return isValidElement(newElement) ? (newElement.props.children as ReactNode) : null\n      } else {\n        return child\n      }\n    })\n\n    return (\n      <SlotClone {...slotProps} ref={forwardedRef}>\n        {isValidElement(newElement) ? cloneElement(newElement, undefined, newChildren) : null}\n      </SlotClone>\n    )\n  }\n\n  return (\n    <SlotClone {...slotProps} ref={forwardedRef}>\n      {children}\n    </SlotClone>\n  )\n})\n\nSlot.displayName = 'Slot'\n\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotCloneProps {\n  children: ReactNode\n}\n\nconst SlotClone = forwardRef<any, SlotCloneProps>((props, forwardedRef) => {\n  const { children, ...slotProps } = props\n\n  if (isValidElement(children)) {\n    const childProps = {\n      ...mergeSlotProps(children, slotProps),\n      ref: composeRefs(forwardedRef, (children as any).ref),\n    }\n    return cloneElement(children, childProps)\n  }\n\n  return Children.count(children) > 1 ? Children.only(null) : null\n})\n\nSlotClone.displayName = 'SlotClone'\n\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Slottable = ({ children }: { children: ReactNode }) => {\n  return <>{children}</>\n}\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype AnyProps = Record<string, any>\n\nfunction isSlottable(child: ReactNode): child is ReactElement {\n  return isValidElement(child) && child.type === Slottable\n}\n\nconst pressMap = isWeb\n  ? {\n      onPress: 'onClick',\n      onPressOut: 'onMouseUp',\n      onPressIn: 'onMouseDown',\n    }\n  : {}\n\nfunction mergeSlotProps(child: any, slotProps: AnyProps) {\n  const childProps = child.props\n\n  // all child props should override\n  const overrideProps = { ...childProps }\n  const isHTMLChild = typeof child.type === 'string'\n\n  if (isHTMLChild) {\n    for (const key in pressMap) {\n      if (key in slotProps) {\n        slotProps[pressMap[key]] = slotProps[key]\n        delete slotProps[key]\n      }\n    }\n  }\n\n  for (let propName in childProps) {\n    const slotPropValue = slotProps[propName]\n    const childPropValue = childProps[propName]\n\n    if (isHTMLChild && pressMap[propName]) {\n      propName = pressMap[propName]\n      delete overrideProps[propName]\n    }\n\n    const isHandler = handleRegex.test(propName)\n    // if it's a handler, modify the override by composing the base handler\n    if (isHandler) {\n      overrideProps[propName] = mergeEvent(childPropValue, slotPropValue)\n    }\n    // if it's `style`, we merge them\n    else if (propName === 'style') {\n      overrideProps[propName] = { ...slotPropValue, ...childPropValue }\n    } else if (propName === 'className') {\n      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ')\n    }\n  }\n\n  return { ...slotProps, ...overrideProps }\n}\n\nconst handleRegex = /^on[A-Z]/\n\nexport function mergeEvent(a?: Function, b?: Function) {\n  return (...args: unknown[]) => {\n    a?.(...args)\n    b?.(...args)\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCM;AAjCN,0BAA4B;AAC5B,uBAAsB;AACtB,mBAA4F;AAUrF,MAAM,WAAO,yBAAmC,CAAC,OAAO,iBAAiB;AAC9E,QAAM,EAAE,aAAa,UAAU,IAAI;AACnC,QAAM,gBAAgB,sBAAS,QAAQ,QAAQ;AAC/C,QAAM,YAAY,cAAc,KAAK,WAAW;AAEhD,MAAI,WAAW;AAEb,UAAM,aAAa,UAAU,MAAM;AAEnC,UAAM,cAAc,cAAc,IAAI,CAAC,UAAU;AAC/C,UAAI,UAAU,WAAW;AAGvB,YAAI,sBAAS,MAAM,UAAU,IAAI;AAAG,iBAAO,sBAAS,KAAK,IAAI;AAC7D,mBAAO,6BAAe,UAAU,IAAK,WAAW,MAAM,WAAyB;AAAA,MACjF,OAAO;AACL,eAAO;AAAA,MACT;AAAA,IACF,CAAC;AAED,WACE,4CAAC;AAAA,MAAW,GAAG;AAAA,MAAW,KAAK;AAAA,MAC5B,2CAAe,UAAU,QAAI,2BAAa,YAAY,QAAW,WAAW,IAAI;AAAA,KACnF;AAAA,EAEJ;AAEA,SACE,4CAAC;AAAA,IAAW,GAAG;AAAA,IAAW,KAAK;AAAA,IAC5B;AAAA,GACH;AAEJ,CAAC;AAED,KAAK,cAAc;AAUnB,MAAM,gBAAY,yBAAgC,CAAC,OAAO,iBAAiB;AACzE,QAAM,EAAE,aAAa,UAAU,IAAI;AAEnC,UAAI,6BAAe,QAAQ,GAAG;AAC5B,UAAM,aAAa;AAAA,MACjB,GAAG,eAAe,UAAU,SAAS;AAAA,MACrC,SAAK,iCAAY,cAAe,SAAiB,GAAG;AAAA,IACtD;AACA,eAAO,2BAAa,UAAU,UAAU;AAAA,EAC1C;AAEA,SAAO,sBAAS,MAAM,QAAQ,IAAI,IAAI,sBAAS,KAAK,IAAI,IAAI;AAC9D,CAAC;AAED,UAAU,cAAc;AAMjB,MAAM,YAAY,CAAC,EAAE,SAAS,MAA+B;AAClE,SAAO;AAAA,IAAG;AAAA,GAAS;AACrB;AAMA,SAAS,YAAY,OAAyC;AAC5D,aAAO,6BAAe,KAAK,KAAK,MAAM,SAAS;AACjD;AAEA,MAAM,WAAW,yBACb;AAAA,EACE,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,WAAW;AACb,IACA,CAAC;AAEL,SAAS,eAAe,OAAY,WAAqB;AACvD,QAAM,aAAa,MAAM;AAGzB,QAAM,gBAAgB,EAAE,GAAG,WAAW;AACtC,QAAM,cAAc,OAAO,MAAM,SAAS;AAE1C,MAAI,aAAa;AACf,eAAW,OAAO,UAAU;AAC1B,UAAI,OAAO,WAAW;AACpB,kBAAU,SAAS,QAAQ,UAAU;AACrC,eAAO,UAAU;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAEA,WAAS,YAAY,YAAY;AAC/B,UAAM,gBAAgB,UAAU;AAChC,UAAM,iBAAiB,WAAW;AAElC,QAAI,eAAe,SAAS,WAAW;AACrC,iBAAW,SAAS;AACpB,aAAO,cAAc;AAAA,IACvB;AAEA,UAAM,YAAY,YAAY,KAAK,QAAQ;AAE3C,QAAI,WAAW;AACb,oBAAc,YAAY,WAAW,gBAAgB,aAAa;AAAA,IACpE,WAES,aAAa,SAAS;AAC7B,oBAAc,YAAY,EAAE,GAAG,eAAe,GAAG,eAAe;AAAA,IAClE,WAAW,aAAa,aAAa;AACnC,oBAAc,YAAY,CAAC,eAAe,cAAc,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,IACpF;AAAA,EACF;AAEA,SAAO,EAAE,GAAG,WAAW,GAAG,cAAc;AAC1C;AAEA,MAAM,cAAc;AAEb,SAAS,WAAW,GAAc,GAAc;AACrD,SAAO,IAAI,SAAoB;AAC7B,2BAAI,GAAG;AACP,2BAAI,GAAG;AAAA,EACT;AACF;",
   "names": []
 }

package/dist/cjs/views/Stack.js

@@ -1,24 +1,8 @@
+"use strict";
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -41,9 +25,10 @@ var import_constants = require("../constants/constants");
 var import_createComponent = require("../createComponent");
 const Stack = (0, import_createComponent.createComponent)({
   componentName: "Stack",
-  defaultProps: __spreadProps(__spreadValues({}, import_constants.stackDefaultStyles), {
+  defaultProps: {
+    ...import_constants.stackDefaultStyles,
     flexDirection: "column"
-  })
+  }
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/views/Stack.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Stack.tsx"],
-  "sourcesContent": ["import { View } from 'react-native'\n\nimport { stackDefaultStyles } from '../constants/constants'\nimport { createComponent } from '../createComponent'\nimport { StackProps, StackPropsBase } from '../types'\n\nexport const Stack = createComponent<StackProps, View, StackPropsBase>({\n  componentName: 'Stack',\n  defaultProps: {\n    ...stackDefaultStyles,\n    flexDirection: 'column',\n  },\n})\n\n// test types\n// export const YStack = styled(Stack, {\n//   flexDirection: 'column',\n// })\n// // test types\n// const x00 = <Stack missing={0} /> // should err\n// const x0 = <YStack missing={0} /> // should err\n// const x1 = (props: StackProps) => <YStack {...props} />\n// type ys = typeof YStack\n// type ysv = ys extends StaticComponent<any, infer V> ? V : unknown\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,uBAAmC;AACnC,6BAAgC;AAGzB,MAAM,QAAQ,4CAAkD;AAAA,EACrE,eAAe;AAAA,EACf,cAAc,iCACT,sCADS;AAAA,IAEZ,eAAe;AAAA,EACjB;AACF,CAAC;",
+  "sourcesContent": ["import type { View } from '@tamagui/types-react-native'\n\nimport { stackDefaultStyles } from '../constants/constants'\nimport { createComponent } from '../createComponent'\nimport { StackProps, StackPropsBase } from '../types'\n\nexport const Stack = createComponent<StackProps, View, StackPropsBase>({\n  componentName: 'Stack',\n  defaultProps: {\n    ...stackDefaultStyles,\n    flexDirection: 'column',\n  },\n})\n\n// test types\n// export const YStack = styled(Stack, {\n//   flexDirection: 'column',\n// })\n// // test types\n// const x00 = <Stack missing={0} /> // should err\n// const x0 = <YStack missing={0} /> // should err\n// const x1 = (props: StackProps) => <YStack {...props} />\n// type ys = typeof YStack\n// type ysv = ys extends StaticComponent<any, infer V> ? V : unknown\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,uBAAmC;AACnC,6BAAgC;AAGzB,MAAM,YAAQ,wCAAkD;AAAA,EACrE,eAAe;AAAA,EACf,cAAc;AAAA,IACZ,GAAG;AAAA,IACH,eAAe;AAAA,EACjB;AACF,CAAC;",
   "names": []
 }

package/dist/cjs/views/TamaguiProvider.js

@@ -0,0 +1,83 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TamaguiProvider_exports = {};
+__export(TamaguiProvider_exports, {
+  TamaguiProvider: () => TamaguiProvider
+});
+module.exports = __toCommonJS(TamaguiProvider_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_constants = require("@tamagui/constants");
+var React = __toESM(require("react"));
+var import_ButtonNestingContext = require("../contexts/ButtonNestingContext");
+var import_TextAncestorContext = require("../contexts/TextAncestorContext");
+var import_useMedia = require("../hooks/useMedia");
+var import_ThemeProvider = require("./ThemeProvider");
+function TamaguiProvider({
+  children,
+  disableInjectCSS,
+  config,
+  ...themePropsProvider
+}) {
+  if (import_constants.isRSC) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+      style: { display: "contents" },
+      className: `t_${Object.keys(config.themes)[0] || "light"}`,
+      children
+    });
+  }
+  if (!import_constants.isWeb || !import_constants.isServer) {
+    (0, import_useMedia.useMediaListeners)(config);
+  }
+  if (import_constants.isClient) {
+    React.useLayoutEffect(() => {
+      if (disableInjectCSS)
+        return;
+      const style = document.createElement("style");
+      style.appendChild(document.createTextNode(config.getCSS()));
+      document.head.appendChild(style);
+      return () => {
+        document.head.removeChild(style);
+      };
+    }, [config, disableInjectCSS]);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ButtonNestingContext.ButtonNestingContext.Provider, {
+    value: false,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextAncestorContext.TextAncestorContext.Provider, {
+      value: false,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeProvider.ThemeProvider, {
+        themeClassNameOnRoot: config.themeClassNameOnRoot,
+        disableRootThemeClass: config.disableRootThemeClass,
+        ...themePropsProvider,
+        defaultTheme: themePropsProvider.defaultTheme ?? Object.keys(config.themes)[0],
+        children
+      })
+    })
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TamaguiProvider
+});
+//# sourceMappingURL=TamaguiProvider.js.map

package/dist/cjs/views/TamaguiProvider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/views/TamaguiProvider.tsx"],
+  "sourcesContent": ["import { isClient, isRSC, isServer, isWeb } from '@tamagui/constants'\nimport * as React from 'react'\n\nimport { ButtonNestingContext } from '../contexts/ButtonNestingContext'\nimport { TextAncestorContext } from '../contexts/TextAncestorContext'\nimport { useMediaListeners } from '../hooks/useMedia'\nimport type { TamaguiProviderProps } from '../types'\nimport { ThemeProvider } from './ThemeProvider'\n\nexport function TamaguiProvider({\n  children,\n  disableInjectCSS,\n  config,\n  ...themePropsProvider\n}: TamaguiProviderProps) {\n  if (isRSC) {\n    return (\n      <span\n        style={{ display: 'contents' }}\n        className={`t_${Object.keys(config.themes)[0] || 'light'}`}\n      >\n        {children}\n      </span>\n    )\n  }\n\n  if (!isWeb || !isServer) {\n    useMediaListeners(config)\n  }\n\n  if (isClient) {\n    // inject CSS if asked to (not SSR compliant)\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useLayoutEffect(() => {\n      if (disableInjectCSS) return\n      const style = document.createElement('style')\n      style.appendChild(document.createTextNode(config.getCSS()))\n      document.head.appendChild(style)\n      return () => {\n        document.head.removeChild(style)\n      }\n    }, [config, disableInjectCSS])\n  }\n\n  return (\n    <ButtonNestingContext.Provider value={false}>\n      <TextAncestorContext.Provider value={false}>\n        <ThemeProvider\n          themeClassNameOnRoot={config.themeClassNameOnRoot}\n          disableRootThemeClass={config.disableRootThemeClass}\n          {...themePropsProvider}\n          defaultTheme={themePropsProvider.defaultTheme ?? Object.keys(config.themes)[0]}\n        >\n          {children}\n        </ThemeProvider>\n      </TextAncestorContext.Provider>\n    </ButtonNestingContext.Provider>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBM;AAjBN,uBAAiD;AACjD,YAAuB;AAEvB,kCAAqC;AACrC,iCAAoC;AACpC,sBAAkC;AAElC,2BAA8B;AAEvB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACL,GAAyB;AACvB,MAAI,wBAAO;AACT,WACE,4CAAC;AAAA,MACC,OAAO,EAAE,SAAS,WAAW;AAAA,MAC7B,WAAW,KAAK,OAAO,KAAK,OAAO,MAAM,EAAE,MAAM;AAAA,MAEhD;AAAA,KACH;AAAA,EAEJ;AAEA,MAAI,CAAC,0BAAS,CAAC,2BAAU;AACvB,2CAAkB,MAAM;AAAA,EAC1B;AAEA,MAAI,2BAAU;AAGZ,UAAM,gBAAgB,MAAM;AAC1B,UAAI;AAAkB;AACtB,YAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,YAAM,YAAY,SAAS,eAAe,OAAO,OAAO,CAAC,CAAC;AAC1D,eAAS,KAAK,YAAY,KAAK;AAC/B,aAAO,MAAM;AACX,iBAAS,KAAK,YAAY,KAAK;AAAA,MACjC;AAAA,IACF,GAAG,CAAC,QAAQ,gBAAgB,CAAC;AAAA,EAC/B;AAEA,SACE,4CAAC,iDAAqB,UAArB;AAAA,IAA8B,OAAO;AAAA,IACpC,sDAAC,+CAAoB,UAApB;AAAA,MAA6B,OAAO;AAAA,MACnC,sDAAC;AAAA,QACC,sBAAsB,OAAO;AAAA,QAC7B,uBAAuB,OAAO;AAAA,QAC7B,GAAG;AAAA,QACJ,cAAc,mBAAmB,gBAAgB,OAAO,KAAK,OAAO,MAAM,EAAE;AAAA,QAE3E;AAAA,OACH;AAAA,KACF;AAAA,GACF;AAEJ;",
+  "names": []
+}

package/dist/cjs/views/Text.js

@@ -1,21 +1,8 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -34,8 +21,8 @@ __export(Text_exports, {
   Text: () => Text
 });
 module.exports = __toCommonJS(Text_exports);
+var import_constants = require("@tamagui/constants");
 var import_helpers = require("@tamagui/helpers");
-var import_platform = require("../constants/platform");
 var import_createComponent = require("../createComponent");
 const ellipseStyle = {
   maxWidth: "100%",
@@ -46,18 +33,31 @@ const ellipseStyle = {
 const Text = (0, import_createComponent.createComponent)({
   componentName: "Text",
   isText: true,
-  defaultProps: __spreadValues({
+  defaultProps: {
     display: "flex",
-    fontFamily: "System"
-  }, import_platform.isWeb && {
-    display: "inline",
-    boxSizing: "border-box",
-    wordWrap: "break-word"
-  }),
+    fontFamily: "System",
+    ...import_constants.isWeb && {
+      display: "inline",
+      boxSizing: "border-box",
+      wordWrap: "break-word",
+      margin: 0
+    }
+  },
+  inlineWhenUnflattened: /* @__PURE__ */ new Set(["fontFamily"]),
   variants: {
-    numberOfLines: {
-      1: import_platform.isWeb ? ellipseStyle : { numberOfLines: 1 },
-      ":number": (numberOfLines) => import_platform.isWeb ? numberOfLines >= 1 ? { WebkitLineClamp: numberOfLines } : null : { numberOfLines }
+    ...import_constants.isWeb && {
+      numberOfLines: {
+        1: ellipseStyle,
+        ":number": (numberOfLines) => numberOfLines >= 1 ? {
+          WebkitLineClamp: numberOfLines,
+          WebkitBoxOrient: "vertical",
+          display: "-webkit-box",
+          overflow: "hidden"
+        } : null
+      }
+    },
+    ellipsizeMode: {
+      "...": () => null
     },
     selectable: {
       true: {
@@ -66,7 +66,7 @@ const Text = (0, import_createComponent.createComponent)({
       },
       false: {
         userSelect: "none",
-        cursor: "inherit"
+        cursor: "default"
       }
     },
     pressable: {
@@ -75,14 +75,17 @@ const Text = (0, import_createComponent.createComponent)({
       }
     },
     ellipse: {
-      true: import_platform.isWeb ? ellipseStyle : {
+      true: import_constants.isWeb ? ellipseStyle : {
         numberOfLines: 1,
         lineBreakMode: "clip"
       }
     }
   },
-  deoptProps: new Set(import_platform.isWeb ? [] : ["ellipse"]),
-  validStyles: __spreadValues(__spreadValues({}, import_helpers.validStyles), import_helpers.stylePropsTextOnly)
+  deoptProps: new Set(import_constants.isWeb ? [] : ["ellipse"]),
+  validStyles: {
+    ...import_helpers.validStyles,
+    ...import_helpers.stylePropsTextOnly
+  }
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Text.tsx"],
-  "sourcesContent": ["import { stylePropsTextOnly, validStyles } from '@tamagui/helpers'\nimport { Text as TextView } from 'react-native'\n\nimport { isWeb } from '../constants/platform'\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  isText: true,\n\n  defaultProps: {\n    display: 'flex',\n    fontFamily: 'System',\n    ...(isWeb && {\n      display: 'inline',\n      boxSizing: 'border-box',\n      wordWrap: 'break-word',\n    }),\n  },\n\n  variants: {\n    numberOfLines: {\n      1: isWeb ? ellipseStyle : { numberOfLines: 1 },\n\n      ':number': (numberOfLines) =>\n        isWeb\n          ? numberOfLines >= 1\n            ? { WebkitLineClamp: numberOfLines }\n            : null\n          : { numberOfLines },\n    },\n\n    selectable: {\n      true: {\n        userSelect: 'text',\n        cursor: 'text',\n      },\n      false: {\n        userSelect: 'none',\n        cursor: 'inherit',\n      },\n    },\n\n    pressable: {\n      true: {\n        cursor: 'pointer',\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;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAgD;AAGhD,sBAAsB;AACtB,6BAAgC;AAGhC,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AAEO,MAAM,OAAO,4CAAoD;AAAA,EACtE,eAAe;AAAA,EACf,QAAQ;AAAA,EAER,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,KACR,yBAAS;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,EACZ;AAAA,EAGF,UAAU;AAAA,IACR,eAAe;AAAA,MACb,GAAG,wBAAQ,eAAe,EAAE,eAAe,EAAE;AAAA,MAE7C,WAAW,CAAC,kBACV,wBACI,iBAAiB,IACf,EAAE,iBAAiB,cAAc,IACjC,OACF,EAAE,cAAc;AAAA,IACxB;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,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IAEA,SAAS;AAAA,MACP,MAAM,wBACF,eACA;AAAA,QACE,eAAe;AAAA,QACf,eAAe;AAAA,MACjB;AAAA,IACN;AAAA,EACF;AAAA,EAEA,YAAY,IAAI,IAAI,wBAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;AAAA,EAE5C,aAAa,kCACR,6BACA;AAEP,CAAC;",
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { stylePropsTextOnly, validStyles } from '@tamagui/helpers'\nimport type { Text as TextView } from '@tamagui/types-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  isText: true,\n\n  defaultProps: {\n    display: 'flex',\n    fontFamily: 'System',\n    ...(isWeb && {\n      display: 'inline',\n      boxSizing: 'border-box',\n      wordWrap: 'break-word',\n      margin: 0,\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    pressable: {\n      true: {\n        cursor: 'pointer',\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;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAsB;AACtB,qBAAgD;AAGhD,6BAAgC;AAGhC,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AAEO,MAAM,WAAO,wCAAoD;AAAA,EACtE,eAAe;AAAA,EACf,QAAQ;AAAA,EAER,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,GAAI,0BAAS;AAAA,MACX,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,MACV,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EAEA,uBAAuB,oBAAI,IAAI,CAAC,YAAY,CAAC;AAAA,EAE7C,UAAU;AAAA,IACR,GAAI,0BAAS;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,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,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IAEA,SAAS;AAAA,MACP,MAAM,yBACF,eACA;AAAA,QACE,eAAe;AAAA,QACf,eAAe;AAAA,MACjB;AAAA,IACN;AAAA,EACF;AAAA,EAEA,YAAY,IAAI,IAAI,yBAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;AAAA,EAE5C,aAAa;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF,CAAC;",
   "names": []
 }

package/dist/cjs/views/Theme.js

@@ -1,3 +1,4 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -16,42 +17,73 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Theme_exports = {};
 __export(Theme_exports, {
-  Theme: () => Theme
+  Theme: () => Theme,
+  wrapThemeManagerContext: () => wrapThemeManagerContext
 });
 module.exports = __toCommonJS(Theme_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_constants = require("@tamagui/constants");
 var import_react = __toESM(require("react"));
-var import_platform = require("../constants/platform");
-var import_wrapThemeManagerContext = require("../helpers/wrapThemeManagerContext");
+var import_createVariable = require("../createVariable");
+var import_ThemeManagerContext = require("../helpers/ThemeManagerContext");
 var import_useTheme = require("../hooks/useTheme");
-import_react.default["createElement"];
-const Theme = (0, import_react.memo)(function Theme2(props) {
-  var _a, _b;
-  const { name, theme, themeManager, themes, className } = (0, import_useTheme.useChangeThemeEffect)(props.name, props.componentName, props);
-  const missingTheme = !themes || !name || !theme;
-  const contents = (0, import_react.useMemo)(() => missingTheme ? null : (0, import_wrapThemeManagerContext.wrapThemeManagerContext)(props.children, themeManager), [props.children, themeManager]);
-  if (missingTheme) {
-    if (name && !theme && process.env.NODE_ENV === "development") {
-      console.warn(`No theme found by name ${name}`);
-    }
+function Theme(props) {
+  if (props.disable) {
     return props.children;
   }
-  if (import_platform.isWeb) {
-    return /* @__PURE__ */ import_react.default.createElement("span", {
-      className: (!props.disableThemeClass ? [props.className, className].filter(Boolean) : []).join(" "),
+  const isRoot = !!props["_isRoot"];
+  const { name, theme, themeManager, isNewTheme, className } = (0, import_useTheme.useChangeThemeEffect)(props, isRoot);
+  const disableThemeClass = props.disableThemeClass;
+  const missingTheme = !name || !theme;
+  let contents = (0, import_react.useMemo)(() => {
+    const next = props["data-themeable"] ? import_react.default.cloneElement(props.children, { ["data-themeable"]: true }) : props.children;
+    return missingTheme ? next : wrapThemeManagerContext(next, themeManager);
+  }, [missingTheme, props.children, themeManager]);
+  if (process.env.NODE_ENV === "development" && missingTheme) {
+    name && !theme && console.warn(`No theme found by name ${name}`);
+    return props.children;
+  }
+  if (disableThemeClass || missingTheme) {
+    return contents;
+  }
+  if (import_constants.isWeb) {
+    const cn = [props.className, className, "_dsp_contents"].filter(Boolean).join(" ");
+    contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+      className: cn,
       style: {
-        display: "contents",
-        color: (_b = (_a = themes[name]) == null ? void 0 : _a.color) == null ? void 0 : _b.toString()
-      }
-    }, contents);
+        color: (0, import_createVariable.variableToString)(theme == null ? void 0 : theme.color)
+      },
+      children: contents
+    });
   }
   return contents;
-});
+}
+function wrapThemeManagerContext(children, themeManager, shouldReset) {
+  if (!themeManager) {
+    return children;
+  }
+  let next = children;
+  if (shouldReset && themeManager) {
+    next = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Theme, {
+      name: themeManager.state.parentName,
+      children: next
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeManagerContext.ThemeManagerContext.Provider, {
+    value: themeManager,
+    children: next
+  });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Theme
+  Theme,
+  wrapThemeManagerContext
 });
 //# sourceMappingURL=Theme.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "sourcesContent": ["import React, { memo, useEffect, useMemo, useRef } from 'react'\n\nimport { isWeb } from '../constants/platform'\nimport { wrapThemeManagerContext } from '../helpers/wrapThemeManagerContext'\nimport { useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeProps } from '../hooks/useTheme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nexport const Theme = memo(function Theme(props: ThemeProps) {\n  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(\n    props.name,\n    props.componentName,\n    props\n  )\n\n  const missingTheme = !themes || !name || !theme\n\n  // memo here, changing theme without re-rendering all children is a critical optimization\n  // may require some effort of end user to memoize but without this memo they'd have no option\n  const contents = useMemo(\n    () => (missingTheme ? null : wrapThemeManagerContext(props.children, themeManager)),\n    [props.children, themeManager]\n  )\n\n  if (missingTheme) {\n    if (name && !theme && process.env.NODE_ENV === 'development') {\n      console.warn(`No theme found by name ${name}`)\n    }\n    return props.children\n  }\n\n  if (isWeb) {\n    return (\n      <span\n        className={(!props.disableThemeClass\n          ? [props.className, className].filter(Boolean)\n          : []\n        ).join(' ')}\n        style={{\n          display: 'contents',\n          // in order to provide currentColor, set color by default\n          color: themes[name]?.color?.toString(),\n        }}\n      >\n        {contents}\n      </span>\n    )\n  }\n\n  return contents\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwD;AAExD,sBAAsB;AACtB,qCAAwC;AACxC,sBAAqC;AAIrC,qBAAM;AAEC,MAAM,QAAQ,uBAAK,gBAAe,OAAmB;AAV5D;AAWE,QAAM,EAAE,MAAM,OAAO,cAAc,QAAQ,cAAc,0CACvD,MAAM,MACN,MAAM,eACN,KACF;AAEA,QAAM,eAAe,CAAC,UAAU,CAAC,QAAQ,CAAC;AAI1C,QAAM,WAAW,0BACf,MAAO,eAAe,OAAO,4DAAwB,MAAM,UAAU,YAAY,GACjF,CAAC,MAAM,UAAU,YAAY,CAC/B;AAEA,MAAI,cAAc;AAChB,QAAI,QAAQ,CAAC,SAAS,QAAQ,IAAI,aAAa,eAAe;AAC5D,cAAQ,KAAK,0BAA0B,MAAM;AAAA,IAC/C;AACA,WAAO,MAAM;AAAA,EACf;AAEA,MAAI,uBAAO;AACT,WACE,mDAAC;AAAA,MACC,WAAY,EAAC,MAAM,oBACf,CAAC,MAAM,WAAW,SAAS,EAAE,OAAO,OAAO,IAC3C,CAAC,GACH,KAAK,GAAG;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,QAET,OAAO,mBAAO,UAAP,mBAAc,UAAd,mBAAqB;AAAA,MAC9B;AAAA,OAEC,QACH;AAAA,EAEJ;AAEA,SAAO;AACT,CAAC;",
-  "names": []
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport React, { useMemo } from 'react'\n\nimport { variableToString } from '../createVariable'\nimport { ThemeManager } from '../helpers/ThemeManager'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext'\nimport { useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeProps } from '../types'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error its a permanent prop meant for internal views\n  if (props.disable) {\n    return props.children\n  }\n\n  const isRoot = !!props['_isRoot']\n  const { name, theme, themeManager, isNewTheme, className } = useChangeThemeEffect(props, isRoot)\n\n  const disableThemeClass = props.disableThemeClass\n  const missingTheme = !name || !theme\n\n  // memo here, changing theme without re-rendering all children is a critical optimization\n  // may require some effort of end user to memoize but without this memo they'd have no option\n  let contents = useMemo(() => {\n    const next = props['data-themeable']\n      ? React.cloneElement(props.children, { ['data-themeable']: true })\n      : props.children\n\n    return missingTheme ? next : wrapThemeManagerContext(next, themeManager)\n  }, [missingTheme, props.children, themeManager])\n\n  if (process.env.NODE_ENV === 'development' && missingTheme) {\n    // eslint-disable-next-line no-console\n    name && !theme && console.warn(`No theme found by name ${name}`)\n    return props.children\n  }\n\n  if (disableThemeClass || missingTheme) {\n    return contents\n  }\n\n  if (isWeb) {\n    const cn = [props.className, className, '_dsp_contents'].filter(Boolean).join(' ')\n    contents = (\n      <span\n        className={cn}\n        style={{\n          // in order to provide currentColor, set color by default\n          color: variableToString(theme?.color),\n        }}\n      >\n        {contents}\n      </span>\n    )\n  }\n\n  return contents\n}\n\nexport function wrapThemeManagerContext(\n  children: any,\n  themeManager?: ThemeManager | null,\n  shouldReset?: boolean\n) {\n  // be sure to memoize themeManager to avoid reparenting\n  if (!themeManager) {\n    return children\n  }\n  // be sure to memoize shouldReset to avoid reparenting\n  let next = children\n  // TODO likely not necessary if we do reset logic now in useTheme?\n  // reset to parent theme\n  if (shouldReset && themeManager) {\n    next = <Theme name={themeManager.state.parentName}>{next}</Theme>\n  }\n  return <ThemeManagerContext.Provider value={themeManager}>{next}</ThemeManagerContext.Provider>\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4CM;AA5CN,uBAAsB;AACtB,mBAA+B;AAE/B,4BAAiC;AAEjC,iCAAoC;AACpC,sBAAqC;AAG9B,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM,SAAS;AACjB,WAAO,MAAM;AAAA,EACf;AAEA,QAAM,SAAS,CAAC,CAAC,MAAM;AACvB,QAAM,EAAE,MAAM,OAAO,cAAc,YAAY,UAAU,QAAI,sCAAqB,OAAO,MAAM;AAE/F,QAAM,oBAAoB,MAAM;AAChC,QAAM,eAAe,CAAC,QAAQ,CAAC;AAI/B,MAAI,eAAW,sBAAQ,MAAM;AAC3B,UAAM,OAAO,MAAM,oBACf,aAAAA,QAAM,aAAa,MAAM,UAAU,EAAE,CAAC,mBAAmB,KAAK,CAAC,IAC/D,MAAM;AAEV,WAAO,eAAe,OAAO,wBAAwB,MAAM,YAAY;AAAA,EACzE,GAAG,CAAC,cAAc,MAAM,UAAU,YAAY,CAAC;AAE/C,MAAI,QAAQ,IAAI,aAAa,iBAAiB,cAAc;AAE1D,YAAQ,CAAC,SAAS,QAAQ,KAAK,0BAA0B,MAAM;AAC/D,WAAO,MAAM;AAAA,EACf;AAEA,MAAI,qBAAqB,cAAc;AACrC,WAAO;AAAA,EACT;AAEA,MAAI,wBAAO;AACT,UAAM,KAAK,CAAC,MAAM,WAAW,WAAW,eAAe,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACjF,eACE,4CAAC;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,QAEL,WAAO,wCAAiB,+BAAO,KAAK;AAAA,MACtC;AAAA,MAEC;AAAA,KACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAEO,SAAS,wBACd,UACA,cACA,aACA;AAEA,MAAI,CAAC,cAAc;AACjB,WAAO;AAAA,EACT;AAEA,MAAI,OAAO;AAGX,MAAI,eAAe,cAAc;AAC/B,WAAO,4CAAC;AAAA,MAAM,MAAM,aAAa,MAAM;AAAA,MAAa;AAAA,KAAK;AAAA,EAC3D;AACA,SAAO,4CAAC,+CAAoB,UAApB;AAAA,IAA6B,OAAO;AAAA,IAAe;AAAA,GAAK;AAClE;",
+  "names": ["React"]
 }

package/dist/cjs/views/ThemeInverse.js

@@ -1,8 +1,7 @@
-var __create = Object.create;
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,39 +15,42 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var ThemeInverse_exports = {};
 __export(ThemeInverse_exports, {
-  ThemeInverse: () => ThemeInverse,
-  setThemeInversions: () => setThemeInversions
+  ThemeInverse: () => ThemeInverse
 });
 module.exports = __toCommonJS(ThemeInverse_exports);
-var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_platform = require("../constants/platform");
 var import_useTheme = require("../hooks/useTheme");
 var import_Theme = require("./Theme");
-let inversions = {
-  light: "dark",
-  dark: "light"
-};
-function setThemeInversions(next) {
-  inversions = next;
-}
-const ThemeInverse = (props) => {
+const ThemeInverse = ({
+  children,
+  disable
+}) => {
   const themeName = (0, import_useTheme.useThemeName)();
   const defaultTheme = (0, import_useTheme.useDefaultThemeName)();
   const [name, setName] = (0, import_react.useState)(null);
   (0, import_platform.useIsomorphicLayoutEffect)(() => {
-    setName(inversions[themeName] || inversions[defaultTheme || ""] || null);
+    if (themeName.startsWith("dark")) {
+      setName("light");
+    }
+    if (themeName.startsWith("light")) {
+      setName("dark");
+    }
   }, [defaultTheme, themeName]);
-  return /* @__PURE__ */ import_react.default.createElement(import_Theme.Theme, {
-    name
-  }, props.children);
+  if (disable) {
+    return children;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.Theme, {
+    name,
+    children
+  });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ThemeInverse,
-  setThemeInversions
+  ThemeInverse
 });
 //# sourceMappingURL=ThemeInverse.js.map

package/dist/cjs/views/ThemeInverse.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeInverse.tsx"],
-  "sourcesContent": ["import React, { useState } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { useDefaultThemeName, useThemeName } from '../hooks/useTheme'\nimport { Theme } from './Theme'\n\ntype StringRecord = { [key: string]: string }\n\nlet inversions: StringRecord = {\n  light: 'dark',\n  dark: 'light',\n}\n\nexport function setThemeInversions(next: StringRecord) {\n  inversions = next\n}\n\nexport const ThemeInverse = (props: { children: any }) => {\n  const themeName = useThemeName()\n  const defaultTheme = useDefaultThemeName()\n  const [name, setName] = useState<null | string>(null)\n\n  // ssr\n  useIsomorphicLayoutEffect(() => {\n    setName(inversions[themeName] || inversions[defaultTheme || ''] || null)\n  }, [defaultTheme, themeName])\n\n  return <Theme name={name}>{props.children}</Theme>\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAEhC,sBAA0C;AAC1C,sBAAkD;AAClD,mBAAsB;AAItB,IAAI,aAA2B;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AACR;AAEO,4BAA4B,MAAoB;AACrD,eAAa;AACf;AAEO,MAAM,eAAe,CAAC,UAA6B;AACxD,QAAM,YAAY,kCAAa;AAC/B,QAAM,eAAe,yCAAoB;AACzC,QAAM,CAAC,MAAM,WAAW,2BAAwB,IAAI;AAGpD,iDAA0B,MAAM;AAC9B,YAAQ,WAAW,cAAc,WAAW,gBAAgB,OAAO,IAAI;AAAA,EACzE,GAAG,CAAC,cAAc,SAAS,CAAC;AAE5B,SAAO,mDAAC;AAAA,IAAM;AAAA,KAAa,MAAM,QAAS;AAC5C;",
+  "sourcesContent": ["import React, { useState } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { useDefaultThemeName, useThemeName } from '../hooks/useTheme'\nimport { Theme } from './Theme'\n\nexport const ThemeInverse = ({\n  children,\n  disable,\n}: {\n  children: React.ReactNode\n  disable?: boolean\n}) => {\n  const themeName = useThemeName()\n  const defaultTheme = useDefaultThemeName()\n  const [name, setName] = useState<null | string>(null)\n\n  // ssr\n  useIsomorphicLayoutEffect(() => {\n    if (themeName.startsWith('dark')) {\n      setName('light')\n    }\n    if (themeName.startsWith('light')) {\n      setName('dark')\n    }\n  }, [defaultTheme, themeName])\n\n  if (disable) {\n    return children as JSX.Element\n  }\n\n  return <Theme name={name}>{children}</Theme>\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BS;AA/BT,mBAAgC;AAEhC,sBAA0C;AAC1C,sBAAkD;AAClD,mBAAsB;AAEf,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AACF,MAGM;AACJ,QAAM,gBAAY,8BAAa;AAC/B,QAAM,mBAAe,qCAAoB;AACzC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAwB,IAAI;AAGpD,iDAA0B,MAAM;AAC9B,QAAI,UAAU,WAAW,MAAM,GAAG;AAChC,cAAQ,OAAO;AAAA,IACjB;AACA,QAAI,UAAU,WAAW,OAAO,GAAG;AACjC,cAAQ,MAAM;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,SAAS,CAAC;AAE5B,MAAI,SAAS;AACX,WAAO;AAAA,EACT;AAEA,SAAO,4CAAC;AAAA,IAAM;AAAA,IAAa;AAAA,GAAS;AACtC;",
   "names": []
 }

package/dist/cjs/views/ThemeProvider.js

@@ -1,8 +1,7 @@
-var __create = Object.create;
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,49 +15,37 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var ThemeProvider_exports = {};
 __export(ThemeProvider_exports, {
   ThemeProvider: () => ThemeProvider
 });
 module.exports = __toCommonJS(ThemeProvider_exports);
-var import_react = __toESM(require("react"));
-var import_conf = require("../conf");
-var import_constants = require("../constants/constants");
-var import_ThemeContext = require("../ThemeContext");
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_constants = require("@tamagui/constants");
+var import_react = require("react");
+var import_constants2 = require("../constants/constants");
 var import_Theme = require("./Theme");
-import_react.default["createElement"];
 const ThemeProvider = (props) => {
-  if (!(0, import_conf.getHasConfigured)()) {
-    throw new Error(`Missing configureThemes() call, add to your root file`);
-  }
-  if (typeof document !== "undefined") {
+  if (import_constants.isClient) {
     (0, import_react.useLayoutEffect)(() => {
-      if (props.disableRootThemeClass) {
+      if (props.disableRootThemeClass)
         return;
-      }
-      const cn = `${import_constants.THEME_CLASSNAME_PREFIX}${props.defaultTheme}`;
+      const cn = `${import_constants2.THEME_CLASSNAME_PREFIX}${props.defaultTheme}`;
       const target = props.themeClassNameOnRoot ? document.documentElement : document.body;
       target.classList.add(cn);
       return () => {
         target.classList.remove(cn);
       };
-    }, [props.defaultTheme, props.disableRootThemeClass]);
+    }, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot]);
   }
-  const themeContext = (0, import_react.useMemo)(() => {
-    return {
-      themes: props.themes,
-      defaultTheme: props.defaultTheme
-    };
-  }, [props.themes]);
-  return /* @__PURE__ */ import_react.default.createElement(import_ThemeContext.ThemeContext.Provider, {
-    value: themeContext
-  }, /* @__PURE__ */ import_react.default.createElement(import_Theme.Theme, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.Theme, {
     className: props.className,
     name: props.defaultTheme,
-    disableThemeClass: props.disableRootThemeClass
-  }, props.children));
+    disableThemeClass: props.disableRootThemeClass,
+    _isRoot: true,
+    children: props.children
+  });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeProvider.tsx"],
-  "sourcesContent": ["import React, { useLayoutEffect, useMemo } from 'react'\n\nimport { getHasConfigured } from '../conf'\nimport { THEME_CLASSNAME_PREFIX } from '../constants/constants'\nimport { ThemeContext } from '../ThemeContext'\nimport { Theme } from './Theme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nexport type ThemeProviderProps = {\n  className?: string\n  themes: any\n  defaultTheme: string\n  disableRootThemeClass?: boolean\n  themeClassNameOnRoot?: boolean\n  children?: any\n  reset?: boolean\n}\n\nexport const ThemeProvider = (props: ThemeProviderProps) => {\n  if (!getHasConfigured()) {\n    throw new Error(`Missing configureThemes() call, add to your root file`)\n  }\n\n  // ensure theme is attached to root body node as well to work with modals by default\n  if (typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (props.disableRootThemeClass) {\n        return\n      }\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])\n  }\n\n  const themeContext = useMemo(() => {\n    return {\n      themes: props.themes,\n      defaultTheme: props.defaultTheme,\n    }\n  }, [props.themes])\n\n  return (\n    <ThemeContext.Provider value={themeContext}>\n      <Theme\n        className={props.className}\n        name={props.defaultTheme}\n        disableThemeClass={props.disableRootThemeClass}\n      >\n        {props.children}\n      </Theme>\n    </ThemeContext.Provider>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgD;AAEhD,kBAAiC;AACjC,uBAAuC;AACvC,0BAA6B;AAC7B,mBAAsB;AAGtB,qBAAM;AAYC,MAAM,gBAAgB,CAAC,UAA8B;AAC1D,MAAI,CAAC,kCAAiB,GAAG;AACvB,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAGA,MAAI,OAAO,aAAa,aAAa;AACnC,sCAAgB,MAAM;AACpB,UAAI,MAAM,uBAAuB;AAC/B;AAAA,MACF;AACA,YAAM,KAAK,GAAG,0CAAyB,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,qBAAqB,CAAC;AAAA,EACtD;AAEA,QAAM,eAAe,0BAAQ,MAAM;AACjC,WAAO;AAAA,MACL,QAAQ,MAAM;AAAA,MACd,cAAc,MAAM;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,MAAM,MAAM,CAAC;AAEjB,SACE,mDAAC,iCAAa,UAAb;AAAA,IAAsB,OAAO;AAAA,KAC5B,mDAAC;AAAA,IACC,WAAW,MAAM;AAAA,IACjB,MAAM,MAAM;AAAA,IACZ,mBAAmB,MAAM;AAAA,KAExB,MAAM,QACT,CACF;AAEJ;",
-  "names": []
+  "sourcesContent": ["import { isClient } from '@tamagui/constants'\nimport { useLayoutEffect } 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 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    <Theme\n      className={props.className}\n      name={props.defaultTheme}\n      disableThemeClass={props.disableRootThemeClass}\n      // @ts-expect-error\n      _isRoot\n    >\n      {props.children}\n    </Theme>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BI;AA9BJ,uBAAyB;AACzB,mBAAgC;AAEhC,IAAAA,oBAAuC;AACvC,mBAAsB;AAWf,MAAM,gBAAgB,CAAC,UAA8B;AAE1D,MAAI,2BAAU;AACZ,sCAAgB,MAAM;AACpB,UAAI,MAAM;AAAuB;AACjC,YAAM,KAAK,GAAG,2CAAyB,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,4CAAC;AAAA,IACC,WAAW,MAAM;AAAA,IACjB,MAAM,MAAM;AAAA,IACZ,mBAAmB,MAAM;AAAA,IAEzB,SAAO;AAAA,IAEN,gBAAM;AAAA,GACT;AAEJ;",
+  "names": ["import_constants"]
 }