@tamagui/core 1.0.1-beta.21 → 1.0.1-beta.210

package/dist/esm/views/ThemeReset.js

@@ -1,37 +1,38 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { isClient } from "@tamagui/constants";
 import React, { useContext, useLayoutEffect, useState } from "react";
-import { isWeb } from "../constants/platform";
-import { ThemeManagerContext } from "../ThemeManager";
+import { ThemeManagerContext } from "../helpers/ThemeManager";
 import { Theme } from "./Theme";
 React["createElement"];
-const ThemeReset = /* @__PURE__ */ __name((props) => {
-  const themeManager = useContext(ThemeManagerContext);
+const ThemeReset = (props) => {
+  const manager = useContext(ThemeManagerContext);
   const [name, setName] = useState(null);
-  if (!isWeb || typeof document !== "undefined") {
+  if (isClient) {
     useLayoutEffect(() => {
-      if (!themeManager)
+      if (!manager)
         return;
-      if (name !== themeManager.parentName) {
-        setName(themeManager.parentName);
+      if (name !== manager.parentName) {
+        setName(manager.parentName);
       }
-    }, [themeManager == null ? void 0 : themeManager.parentName]);
+    }, [name, manager, manager == null ? void 0 : manager.parentName]);
     useLayoutEffect(() => {
-      if (!themeManager)
+      if (!manager)
         return;
-      return themeManager.onChangeTheme(() => {
-        setName(themeManager.parentName);
+      return manager.onChangeTheme(() => {
+        setName(manager.parentName);
       });
-    }, []);
+    }, [manager]);
   }
-  if (!themeManager || !props.children) {
+  if (!manager || !props.children) {
     return props.children || null;
   }
-  return /* @__PURE__ */ React.createElement(Theme, {
+  return /* @__PURE__ */ jsx(Theme, {
     className: "tui-theme-reset",
-    name
-  }, props.children);
-}, "ThemeReset");
+    reset: true,
+    name,
+    children: props.children
+  });
+};
 export {
   ThemeReset
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeReset.tsx"],
-  "sourcesContent": ["import React, { useContext, useLayoutEffect, useState } from 'react'\n\nimport { isWeb } from '../constants/platform'\nimport { ThemeManagerContext } from '../ThemeManager'\nimport { Theme } from './Theme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\n// resets the theme to the parent theme\nexport const ThemeReset = (props: { children?: any }) => {\n  const themeManager = useContext(ThemeManagerContext)\n  const [name, setName] = useState<string | null>(null)\n\n  // this component doesn't work with SSR, so must run only client side\n  // we could at least prevent more flickering by having the ssr head script\n  // that changes to dark initially also go through and change all of these\n  if (!isWeb || typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      if (name !== themeManager.parentName) {\n        setName(themeManager.parentName)\n      }\n    }, [themeManager?.parentName])\n\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      return themeManager.onChangeTheme(() => {\n        setName(themeManager.parentName)\n      })\n    }, [])\n  }\n\n  if (!themeManager || !props.children) {\n    return props.children || null\n  }\n\n  return (\n    <Theme className=\"tui-theme-reset\" name={name}>\n      {props.children}\n    </Theme>\n  )\n}\n"],
-  "mappings": ";;AAAA;AAEA;AACA;AACA;AAGA,MAAM;AAGC,MAAM,aAAa,wBAAC,UAA8B;AACvD,QAAM,eAAe,WAAW,mBAAmB;AACnD,QAAM,CAAC,MAAM,WAAW,SAAwB,IAAI;AAKpD,MAAI,CAAC,SAAS,OAAO,aAAa,aAAa;AAC7C,oBAAgB,MAAM;AACpB,UAAI,CAAC;AAAc;AACnB,UAAI,SAAS,aAAa,YAAY;AACpC,gBAAQ,aAAa,UAAU;AAAA,MACjC;AAAA,IACF,GAAG,CAAC,6CAAc,UAAU,CAAC;AAE7B,oBAAgB,MAAM;AACpB,UAAI,CAAC;AAAc;AACnB,aAAO,aAAa,cAAc,MAAM;AACtC,gBAAQ,aAAa,UAAU;AAAA,MACjC,CAAC;AAAA,IACH,GAAG,CAAC,CAAC;AAAA,EACP;AAEA,MAAI,CAAC,gBAAgB,CAAC,MAAM,UAAU;AACpC,WAAO,MAAM,YAAY;AAAA,EAC3B;AAEA,SACE,oCAAC;AAAA,IAAM,WAAU;AAAA,IAAkB;AAAA,KAChC,MAAM,QACT;AAEJ,GAhC0B;",
+  "sourcesContent": ["import { isClient } from '@tamagui/constants'\nimport React, { useContext, useLayoutEffect, useState } from 'react'\n\nimport { ThemeManagerContext } from '../helpers/ThemeManager'\nimport { Theme } from './Theme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\n// resets the theme to the parent theme\nexport const ThemeReset = (props: { children?: any }) => {\n  const manager = useContext(ThemeManagerContext)\n  const [name, setName] = useState<string | null>(null)\n\n  // this component doesn't work with SSR, so must run only client side\n  // we could at least prevent more flickering by having the ssr head script\n  // that changes to dark initially also go through and change all of these\n  if (isClient) {\n    useLayoutEffect(() => {\n      if (!manager) return\n      if (name !== manager.parentName) {\n        setName(manager.parentName)\n      }\n    }, [name, manager, manager?.parentName])\n\n    useLayoutEffect(() => {\n      if (!manager) return\n      return manager.onChangeTheme(() => {\n        setName(manager.parentName)\n      })\n    }, [manager])\n  }\n\n  if (!manager || !props.children) {\n    return props.children || null\n  }\n\n  return (\n    <Theme className=\"tui-theme-reset\" reset name={name}>\n      {props.children}\n    </Theme>\n  )\n}\n"],
+  "mappings": "AAsCI;AAtCJ,SAAS,gBAAgB;AACzB,OAAO,SAAS,YAAY,iBAAiB,gBAAgB;AAE7D,SAAS,2BAA2B;AACpC,SAAS,aAAa;AAGtB,MAAM;AAGC,MAAM,aAAa,CAAC,UAA8B;AACvD,QAAM,UAAU,WAAW,mBAAmB;AAC9C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AAKpD,MAAI,UAAU;AACZ,oBAAgB,MAAM;AACpB,UAAI,CAAC;AAAS;AACd,UAAI,SAAS,QAAQ,YAAY;AAC/B,gBAAQ,QAAQ,UAAU;AAAA,MAC5B;AAAA,IACF,GAAG,CAAC,MAAM,SAAS,mCAAS,UAAU,CAAC;AAEvC,oBAAgB,MAAM;AACpB,UAAI,CAAC;AAAS;AACd,aAAO,QAAQ,cAAc,MAAM;AACjC,gBAAQ,QAAQ,UAAU;AAAA,MAC5B,CAAC;AAAA,IACH,GAAG,CAAC,OAAO,CAAC;AAAA,EACd;AAEA,MAAI,CAAC,WAAW,CAAC,MAAM,UAAU;AAC/B,WAAO,MAAM,YAAY;AAAA,EAC3B;AAEA,SACE,oBAAC;AAAA,IAAM,WAAU;AAAA,IAAkB,OAAK;AAAA,IAAC;AAAA,IACtC,gBAAM;AAAA,GACT;AAEJ;",
   "names": []
 }

package/package.json

@@ -1,44 +1,80 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.1-beta.21",
+  "version": "1.0.1-beta.210",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
-  "typings": "types",
+  "types": "./types/index.d.ts",
+  "license": "MIT",
+  "author": {
+    "name": "Nate Wienert"
+  },
   "sideEffects": [
     "*.css"
   ],
   "scripts": {
     "build": "tamagui-build",
     "watch": "tamagui-build --watch",
+    "lint": "eslint",
     "clean": "tamagui-build clean",
-    "clean:build": "tamagui-build clean:build"
+    "clean:build": "tamagui-build clean:build",
+    "test": "vitest --run --config ../vite-plugin-internal/src/vite.config.ts"
   },
   "files": [
     "types",
     "dist",
+    "src",
     "reset.css"
   ],
   "dependencies": {
     "@expo/match-media": "^0.3.0",
-    "@tamagui/helpers": "^1.0.1-beta.21",
-    "@tamagui/ow": "^0.28.1",
-    "@tamagui/use-debounce": "^1.0.1-beta.21",
-    "@tamagui/use-force-update": "^1.0.1-beta.21",
-    "expo-screen-orientation": "^4.2.0",
-    "react": "*",
-    "react-dom": "*"
+    "@tamagui/compose-refs": "^1.0.1-beta.210",
+    "@tamagui/constants": "^1.0.1-beta.210",
+    "@tamagui/helpers": "^1.0.1-beta.210",
+    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.210",
+    "@tamagui/react-native-use-pressable": "^1.0.1-beta.210",
+    "@tamagui/react-native-use-responder-events": "^1.0.1-beta.210",
+    "@tamagui/types-react-native": "^1.0.1-beta.210",
+    "@tamagui/use-did-finish-ssr": "^1.0.1-beta.210",
+    "@tamagui/use-event": "^1.0.1-beta.210",
+    "@tamagui/use-force-update": "^1.0.1-beta.210"
   },
   "peerDependencies": {
-    "react-native-web": "*"
+    "react": "*",
+    "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.21",
-    "@types/react": "^17.0.35",
+    "@tamagui/build": "^1.0.1-beta.210",
+    "@types/node": "^16.11.9",
+    "@types/react": "^18.0.15",
+    "@types/react-native": "^0.69.2",
     "csstype": "^3.0.10",
-    "esbuild": "^0.14.36",
-    "react-native-web": "^0.17.5",
-    "typescript": "^4.5.2"
+    "esbuild": "^0.15.11",
+    "react": "*",
+    "react-dom": "*",
+    "typescript": "^4.7.4",
+    "vitest": "^0.24.3"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    "./reset.css": "./reset.css",
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./inject-styles": {
+      "import": "./dist/esm/inject-styles.js",
+      "require": "./dist/cjs/inject-styles.js"
+    },
+    "./react-native": {
+      "import": "./dist/esm/react-native.js",
+      "require": "./dist/cjs/react-native.js"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tamagui/tamagui.git",
+    "directory": "packages/core"
   },
   "publishConfig": {
     "access": "public"

package/reset.css

@@ -1,3 +1,11 @@
+/* mimic the native viewport full width/height + flex */
+body, #root, #__next {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  min-width: 100vw;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -6,15 +14,28 @@ a {
   color: inherit;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  padding: 0;
+}
+
+li, select, input, button, [role="slider"], [role="listbox"] {
+  outline: none;
+}
+
 p,
 input,
 textarea,
-select,
 button,
 ul,
 ol,
 li,
-pre {
-  margin: 0;
-  padding: 0;
+pre,
+dialog {
+  all: unset;
+  box-sizing: border-box;
+}
+
+.is_Anchor:has(.is_Button) {
+  text-decoration: none;
 }

package/src/Tamagui.ts

@@ -0,0 +1,48 @@
+import * as Helpers from '@tamagui/helpers'
+
+import { getConfig } from './config'
+import { getAllRules, getAllSelectors, getAllTransforms } from './helpers/insertStyleRule'
+import { mediaState } from './hooks/useMedia'
+
+// easy introspection
+// only included in dev mode
+
+class TamaguiManager {
+  Helpers = Helpers
+
+  get mediaState() {
+    return { ...mediaState }
+  }
+
+  get config() {
+    return getConfig()
+  }
+
+  get insertedRules() {
+    return getAllRules()
+  }
+
+  get allSelectors() {
+    return getAllSelectors()
+  }
+
+  get allTransforms() {
+    return getAllTransforms()
+  }
+
+  get identifierToValue() {
+    return identifierToValue
+  }
+}
+
+export const Tamagui = new TamaguiManager()
+
+const identifierToValue = new Map<string, any>()
+
+export const getValueFromIdentifier = (identifier: string) => {
+  return identifierToValue.get(identifier)
+}
+
+export const setIdentifierValue = (identifier: string, value: any) => {
+  identifierToValue.set(identifier, value)
+}

package/src/addTheme.ts

@@ -0,0 +1,68 @@
+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'
+
+export function addTheme({
+  name: themeName,
+  theme: themeIn,
+  insertCSS,
+  update,
+}: {
+  name: string
+  theme: ThemeDefinition
+  insertCSS?: boolean
+  update?: boolean
+}) {
+  const config = getConfig()
+  if (process.env.NODE_ENV === 'development') {
+    if (!config) {
+      throw new Error(`Must run createTamagui once before loading theme`)
+    }
+    if (!update && config.themes[themeName]) {
+      throw new Error(`Already defined theme "${themeName}", use updateTheme to change values`)
+    }
+  }
+
+  const theme = { ...themeIn } as ThemeParsed
+  for (const key in theme) {
+    ensureThemeVariable(theme, key)
+  }
+
+  const themeProxied = proxyThemeToParents(themeName, theme, config.themes)
+  config.themes[themeName] = themeProxied
+
+  let cssRules: string[] = []
+
+  if (isWeb) {
+    if (insertCSS) {
+      cssRules = getThemeCSSRules({
+        // @ts-ignore this works but should be fixed types
+        config,
+        themeName,
+        names: [themeName],
+        theme,
+      })
+      const id = `tamagui_theme_style_${themeName}`
+      const existing = document.querySelector(`#${id}`)
+      const style = document.createElement('style')
+      style.id = id
+      style.appendChild(document.createTextNode(cssRules.join('\n')))
+      document.head.appendChild(style)
+      if (existing) {
+        existing.parentElement?.removeChild(existing)
+      }
+    }
+  }
+
+  updateConfig('themes', { ...config.themes, [themeName]: themeProxied })
+
+  // trigger updates in components
+
+  return {
+    theme: themeProxied,
+    cssRules,
+  }
+}

package/src/config.ts

@@ -0,0 +1,44 @@
+import { ConfigListener, TamaguiInternalConfig, ThemeParsed, Tokens } from './types'
+
+let conf: TamaguiInternalConfig | null
+
+export const setConfig = (next: TamaguiInternalConfig) => {
+  conf = next
+  if (configListeners.size) {
+    configListeners.forEach((cb) => cb(next))
+  }
+}
+
+export const setConfigFont = (name: string, font: any, fontParsed: any) => {
+  if (process.env.NODE_ENV === 'development') {
+    if (!conf) throw new Error(`Haven't called createTamagui yet`)
+  }
+  Object.assign(conf!.fonts, { [name]: font })
+  Object.assign(conf!.fontsParsed, { [`$${name}`]: fontParsed })
+}
+
+export const getHasConfigured = () => !!conf
+export const getConfig = () => conf!
+export const getTokens = (prefixed?: boolean): Tokens =>
+  prefixed ? conf!.tokensParsed : conf!.tokens
+
+/**
+ * Note: this is the same as `getTokens`
+ */
+export const useTokens = getTokens
+
+export const getThemes = () => conf!.themes
+
+export const configListeners = new Set<ConfigListener>()
+
+export const onConfiguredOnce = (cb: ConfigListener) => {
+  if (conf) {
+    cb(conf)
+  } else {
+    configListeners.add(cb)
+  }
+}
+
+export const updateConfig = (key: string, value: any) => {
+  Object.assign(key, value)
+}

package/src/constants/constants.ts

@@ -0,0 +1,19 @@
+import { isWeb } from '@tamagui/constants'
+
+export const THEME_NAME_SEPARATOR = '_'
+export const THEME_CLASSNAME_PREFIX = `t_`
+
+export const webOnlyDefaultStyles = {
+  display: 'flex',
+  flexBasis: 'auto',
+  boxSizing: 'border-box',
+  position: 'relative',
+  minHeight: 0,
+  minWidth: 0,
+}
+
+export const stackDefaultStyles = {
+  alignItems: 'stretch',
+  flexShrink: 0,
+  ...webOnlyDefaultStyles,
+}

package/src/constants/isDevTools.ts

@@ -0,0 +1,6 @@
+// for verbose logging outside node/cli
+
+export const isDevTools =
+  process.env.NODE_ENV === 'development'
+    ? new Function('try {return this===window;}catch(e){ return false;}')()
+    : false

package/src/contexts/ButtonInsideButtonContext.tsx

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

package/src/contexts/FontLanguageContext.tsx

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

package/src/contexts/TextAncestorContext.tsx

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

package/src/contexts/ThemeContext.tsx

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+import { ThemeName, Themes } from '../types'
+
+export const ThemeContext = createContext<{ themes: Themes; defaultTheme: ThemeName } | null>(null)