@tamagui/core 1.0.0-alpha.0 → 1.0.0-alpha.12

package/dist/createTamagui.js

@@ -3,10 +3,12 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import { getStyleRules } from "@tamagui/helpers";
 import { Variable, createVariable, isVariable } from "./createVariable";
 import { createTamaguiProvider } from "./helpers/createTamaguiProvider";
+import { validateConfig } from "./helpers/validate";
 import { configureMedia } from "./hooks/useMedia";
 let conf;
 const getHasConfigured = /* @__PURE__ */ __name(() => !!conf, "getHasConfigured");
-const getTamaguiConfig = /* @__PURE__ */ __name(() => conf, "getTamaguiConfig");
+const getTamagui = /* @__PURE__ */ __name(() => conf, "getTamagui");
+const getTokens = /* @__PURE__ */ __name(() => conf.tokensParsed, "getTokens");
 const configListeners = new Set();
 const onConfiguredOnce = /* @__PURE__ */ __name((cb) => {
   if (conf) {
@@ -17,6 +19,11 @@ const onConfiguredOnce = /* @__PURE__ */ __name((cb) => {
 }, "onConfiguredOnce");
 const PREFIX = `theme--`;
 function createTamagui(config) {
+  if (process.env.NODE_ENV === "development") {
+    if (!config["parsed"]) {
+      validateConfig(config);
+    }
+  }
   if (conf) {
     console.warn("Called createTamagui twice! Should never do so");
   }
@@ -104,6 +111,7 @@ ${vars}
     themeConfig,
     themeParsed,
     tokensParsed,
+    parsed: true,
     getCSS() {
       return `${themeConfig.css}
 ${[...getStyleRules()].join("\n")}`;
@@ -152,8 +160,9 @@ const parseTokens = /* @__PURE__ */ __name((tokens) => {
 export {
   createTamagui,
   getHasConfigured,
-  getTamaguiConfig,
+  getTamagui,
   getThemeParentClassName,
+  getTokens,
   onConfiguredOnce
 };
 //# sourceMappingURL=createTamagui.js.map

package/dist/createTamagui.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/createTamagui.ts"],
-  "sourcesContent": ["import { getStyleRules } from '@tamagui/helpers'\n\nimport { Variable, createVariable, isVariable } from './createVariable'\nimport { createTamaguiProvider } from './helpers/createTamaguiProvider'\nimport { configureMedia } from './hooks/useMedia'\nimport {\n  CreateTamaguiConfig,\n  GenericTamaguiConfig,\n  MediaQueryKey,\n  TamaguiInternalConfig,\n  TamaguiProviderProps,\n} from './types'\n\nexport type CreateTamaguiProps = TamaguiProviderProps &\n  // we omit and re-declare it because we need to allow instantation types to be flexible\n  // user then re-defines the types after createTamagui returns the typed object they want\n  Omit<GenericTamaguiConfig, 'themes'> & {\n    themes: {\n      [key: string]: {\n        [key: string]: string | number | Variable\n      }\n    }\n    // for ssr/native, will default to active\n    mediaQueryDefaultActive?: MediaQueryKey[]\n  }\n\nlet conf: TamaguiInternalConfig | null\n\nexport const getHasConfigured = () => !!conf\nexport const getTamaguiConfig = () => conf!\n\ntype ConfigListener = (conf: TamaguiInternalConfig) => void\nconst configListeners = new Set<ConfigListener>()\nexport const onConfiguredOnce = (cb: ConfigListener) => {\n  if (conf) {\n    cb(conf)\n  } else {\n    configListeners.add(cb)\n  }\n}\n\nconst PREFIX = `theme--`\n\nexport function createTamagui<Conf extends CreateTamaguiProps>(\n  config: Conf\n): Conf extends CreateTamaguiConfig<infer A, infer B, infer C, infer D>\n  ? TamaguiInternalConfig<A, B, C, D>\n  : unknown {\n  // test env loads a few times as it runs diff tests\n  if (conf) {\n    console.warn('Called createTamagui twice! Should never do so')\n    // throw new Error(`#000 createTamagui called twice`)\n  }\n\n  configureMedia({\n    queries: config.media as any,\n    defaultActive: config.mediaQueryDefaultActive,\n  })\n\n  // TODO can avoid some of this CSS creation on native\n  const themeConfig = (() => {\n    let cssRules: string[] = []\n\n    // tokens\n    let tokenRule = `:root {`\n    const varsByValue = new Map<string, Variable>()\n    const addVar = (v: Variable) => {\n      varsByValue[v.val] = v\n      const rule = `--${v.name}:${typeof v.val === 'number' ? `${v.val}px` : v.val};`\n      tokenRule += rule\n    }\n\n    for (const key in config.tokens) {\n      for (const skey in config.tokens[key]) {\n        const val = config.tokens[key][skey]\n        if (key === 'font') {\n          for (const fkey in val) {\n            if (fkey === 'family') {\n              addVar(val[fkey])\n            } else {\n              for (const fskey in val[fkey]) {\n                addVar(val[fkey][fskey])\n              }\n            }\n          }\n        } else {\n          addVar(val)\n        }\n      }\n    }\n    cssRules.push(`${tokenRule}\\n}`)\n\n    // themes\n    for (const themeName in config.themes) {\n      // to allow using the same theme with diff names, be sure we don't mutate!\n      config.themes[themeName] = { ...config.themes[themeName] }\n      const theme = config.themes[themeName]\n      let vars = ''\n      for (const themeKey in theme) {\n        const val = theme[themeKey]\n        const getVariableCSS = (inv: any) => {\n          const v = varsByValue[inv] ?? inv\n          return isVariable(v) ? `--${themeKey}:var(--${v.name});` : `--${themeKey}:${v};`\n        }\n        vars += getVariableCSS(val)\n        // TODO sanity check is necessary\n        // make everything a variable that gets put into css\n        if (!isVariable(val)) {\n          theme[themeKey] = createVariable({\n            name: themeKey,\n            val,\n          })\n        }\n      }\n\n      const [themeClassName, parentName] = themeName.includes('-')\n        ? themeName.split('-')\n        : [themeName, '']\n      // tiny hack for now assuming light/dark are typical parentName\n      const oppositeName = parentName === 'dark' ? 'light' : 'dark'\n      const cssParentSel = parentName ? `.${PREFIX}${parentName}` : ''\n      const cssChildSel = `.${PREFIX}${themeClassName}`\n      const cssSel = `${cssParentSel} ${cssChildSel}`\n      // we need to force specificity\n      const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} {\\n${vars}\\n}`\n      cssRules.push(cssRule)\n    }\n\n    Object.freeze(cssRules)\n\n    return {\n      cssRules,\n      css: cssRules.join('\\n'),\n    }\n  })()\n\n  // faster lookups token keys become $keys to match input\n  const tokensParsed: any = parseTokens(config.tokens)\n  // all themes should match key and we just need variable name\n  // TODO once w react native we'd want to have a reverse lookup back to value\n  const themeParsed: any = {}\n  const firstKey = Object.keys(config.themes)[0]\n  for (const key in config.themes[firstKey]) {\n    // themeParsed[`$${key}`] = config.themes[firstKey][key]\n    const val = config.themes[firstKey][key].val\n    themeParsed[`$${key}`] = new Variable({ val, name: key })\n  }\n\n  const next: TamaguiInternalConfig = {\n    // @ts-ignore\n    shorthands: {},\n    ...config,\n    Provider: createTamaguiProvider({\n      defaultTheme: 'light',\n      ...config,\n    }),\n    themeConfig,\n    themeParsed,\n    tokensParsed,\n    getCSS() {\n      return `${themeConfig.css}\\n${[...getStyleRules()].join('\\n')}`\n    },\n  }\n  conf = next\n\n  if (configListeners.size) {\n    configListeners.forEach((cb) => cb(next))\n    configListeners.clear()\n  }\n\n  // @ts-expect-error\n  return next\n}\n\nexport function getThemeParentClassName(themeName?: string | null) {\n  return `theme-parent ${themeName ? `${PREFIX}${themeName}` : ''}`\n}\n\nconst parseTokens = (tokens: any) => {\n  const res: any = {}\n  for (const key in tokens) {\n    res[key] = {}\n    if (key === 'font') {\n      for (const family in tokens.font) {\n        const obj = {}\n        res.font[`$${family}`] = obj\n        for (const attrKey in tokens.font[family]) {\n          const attr = tokens.font[family][attrKey]\n          if (attrKey === 'family') {\n            obj[attrKey] = attr\n            continue\n          }\n          obj[attrKey] = Object.keys(attr).reduce((acc, cur) => {\n            acc[`$${cur}`] = attr[cur]\n            return acc\n          }, {})\n        }\n      }\n      continue\n    }\n    for (const skey in tokens[key]) {\n      res[key][`$${skey}`] = tokens[key][skey]\n    }\n  }\n\n  return res\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { getStyleRules } from '@tamagui/helpers'\n\nimport { Variable, createVariable, isVariable } from './createVariable'\nimport { createTamaguiProvider } from './helpers/createTamaguiProvider'\nimport { validateConfig } from './helpers/validate'\nimport { configureMedia } from './hooks/useMedia'\nimport {\n  CreateTamaguiConfig,\n  GenericTamaguiConfig,\n  MediaQueryKey,\n  TamaguiInternalConfig,\n  TamaguiProviderProps,\n} from './types'\n\nexport type CreateTamaguiProps = TamaguiProviderProps &\n  // we omit and re-declare it because we need to allow instantation types to be flexible\n  // user then re-defines the types after createTamagui returns the typed object they want\n  Omit<GenericTamaguiConfig, 'themes'> & {\n    themes: {\n      [key: string]: {\n        [key: string]: string | number | Variable\n      }\n    }\n    // for ssr/native, will default to active\n    mediaQueryDefaultActive?: MediaQueryKey[]\n  }\n\nlet conf: TamaguiInternalConfig | null\n\nexport const getHasConfigured = () => !!conf\n\nexport const getTamagui = () => conf!\nexport const getTokens = () => conf!.tokensParsed\n\ntype ConfigListener = (conf: TamaguiInternalConfig) => void\nconst configListeners = new Set<ConfigListener>()\nexport const onConfiguredOnce = (cb: ConfigListener) => {\n  if (conf) {\n    cb(conf)\n  } else {\n    configListeners.add(cb)\n  }\n}\n\nconst PREFIX = `theme--`\n\nexport function createTamagui<Conf extends CreateTamaguiProps>(\n  config: Conf\n): Conf extends CreateTamaguiConfig<infer A, infer B, infer C, infer D>\n  ? TamaguiInternalConfig<A, B, C, D>\n  : unknown {\n  if (process.env.NODE_ENV === 'development') {\n    // config is re-run by the @tamagui/static, dont double validate\n    if (!config['parsed']) {\n      validateConfig(config)\n    }\n  }\n  // test env loads a few times as it runs diff tests\n  if (conf) {\n    console.warn('Called createTamagui twice! Should never do so')\n    // throw new Error(`#000 createTamagui called twice`)\n  }\n\n  configureMedia({\n    queries: config.media as any,\n    defaultActive: config.mediaQueryDefaultActive,\n  })\n\n  // TODO can avoid some of this CSS creation on native\n  const themeConfig = (() => {\n    let cssRules: string[] = []\n\n    // tokens\n    let tokenRule = `:root {`\n    const varsByValue = new Map<string, Variable>()\n    const addVar = (v: Variable) => {\n      varsByValue[v.val] = v\n      const rule = `--${v.name}:${typeof v.val === 'number' ? `${v.val}px` : v.val};`\n      tokenRule += rule\n    }\n\n    for (const key in config.tokens) {\n      for (const skey in config.tokens[key]) {\n        const val = config.tokens[key][skey]\n        if (key === 'font') {\n          for (const fkey in val) {\n            if (fkey === 'family') {\n              addVar(val[fkey])\n            } else {\n              for (const fskey in val[fkey]) {\n                addVar(val[fkey][fskey])\n              }\n            }\n          }\n        } else {\n          addVar(val)\n        }\n      }\n    }\n    cssRules.push(`${tokenRule}\\n}`)\n\n    // themes\n    for (const themeName in config.themes) {\n      // to allow using the same theme with diff names, be sure we don't mutate!\n      config.themes[themeName] = { ...config.themes[themeName] }\n      const theme = config.themes[themeName]\n      let vars = ''\n      for (const themeKey in theme) {\n        const val = theme[themeKey]\n        const getVariableCSS = (inv: any) => {\n          const v = varsByValue[inv] ?? inv\n          return isVariable(v) ? `--${themeKey}:var(--${v.name});` : `--${themeKey}:${v};`\n        }\n        vars += getVariableCSS(val)\n        // TODO sanity check is necessary\n        // make everything a variable that gets put into css\n        if (!isVariable(val)) {\n          theme[themeKey] = createVariable({\n            name: themeKey,\n            val,\n          })\n        }\n      }\n\n      const [themeClassName, parentName] = themeName.includes('-')\n        ? themeName.split('-')\n        : [themeName, '']\n      // tiny hack for now assuming light/dark are typical parentName\n      const oppositeName = parentName === 'dark' ? 'light' : 'dark'\n      const cssParentSel = parentName ? `.${PREFIX}${parentName}` : ''\n      const cssChildSel = `.${PREFIX}${themeClassName}`\n      const cssSel = `${cssParentSel} ${cssChildSel}`\n      // we need to force specificity\n      const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} {\\n${vars}\\n}`\n      cssRules.push(cssRule)\n    }\n\n    Object.freeze(cssRules)\n\n    return {\n      cssRules,\n      css: cssRules.join('\\n'),\n    }\n  })()\n\n  // faster lookups token keys become $keys to match input\n  const tokensParsed: any = parseTokens(config.tokens)\n  // all themes should match key and we just need variable name\n  // TODO once w react native we'd want to have a reverse lookup back to value\n  const themeParsed: any = {}\n  const firstKey = Object.keys(config.themes)[0]\n  for (const key in config.themes[firstKey]) {\n    // themeParsed[`$${key}`] = config.themes[firstKey][key]\n    const val = config.themes[firstKey][key].val\n    themeParsed[`$${key}`] = new Variable({ val, name: key })\n  }\n\n  const next: TamaguiInternalConfig = {\n    // @ts-ignore\n    shorthands: {},\n    ...config,\n    Provider: createTamaguiProvider({\n      defaultTheme: 'light',\n      ...config,\n    }),\n    themeConfig,\n    themeParsed,\n    tokensParsed,\n    parsed: true,\n    getCSS() {\n      return `${themeConfig.css}\\n${[...getStyleRules()].join('\\n')}`\n    },\n  }\n  conf = next\n\n  if (configListeners.size) {\n    configListeners.forEach((cb) => cb(next))\n    configListeners.clear()\n  }\n\n  // @ts-expect-error\n  return next\n}\n\nexport function getThemeParentClassName(themeName?: string | null) {\n  return `theme-parent ${themeName ? `${PREFIX}${themeName}` : ''}`\n}\n\nconst parseTokens = (tokens: any) => {\n  const res: any = {}\n  for (const key in tokens) {\n    res[key] = {}\n    if (key === 'font') {\n      for (const family in tokens.font) {\n        const obj = {}\n        res.font[`$${family}`] = obj\n        for (const attrKey in tokens.font[family]) {\n          const attr = tokens.font[family][attrKey]\n          if (attrKey === 'family') {\n            obj[attrKey] = attr\n            continue\n          }\n          obj[attrKey] = Object.keys(attr).reduce((acc, cur) => {\n            acc[`$${cur}`] = attr[cur]\n            return acc\n          }, {})\n        }\n      }\n      continue\n    }\n    for (const skey in tokens[key]) {\n      res[key][`$${skey}`] = tokens[key][skey]\n    }\n  }\n\n  return res\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/createTokens.js

@@ -1,7 +1,11 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { createVariable } from "./createVariable";
+import { validateTokens } from "./helpers/validate";
 function createTokens(tokens) {
+  if (process.env.NODE_ENV === "development") {
+    validateTokens(tokens);
+  }
   return setupTokens(tokens);
 }
 __name(createTokens, "createTokens");

package/dist/createTokens.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/createTokens.ts"],
-  "sourcesContent": ["import { Variable, createVariable } from './createVariable'\nimport { CreateTokens } from './types'\n\n// tokens.color.dark.red ===>{ var: `color-dark-red`, val: '' }\n\nexport function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {\n  return setupTokens(tokens) as any\n}\n\nfunction setupTokens(tokens: any) {\n  return mapTokensToVariables(tokens)\n}\n\nexport const mapTokensToVariables = (\n  tokens: CreateTokens,\n  parentPath = ''\n): CreateTokens<Variable> => {\n  const res = {}\n  for (const key in tokens) {\n    const val = tokens[key]\n    const name = parentPath ? `${parentPath}-${key}` : key\n    if (val && typeof val === 'object') {\n      res[key] = mapTokensToVariables(tokens[key], name)\n    } else {\n      res[key] = createVariable({ val, name })\n    }\n  }\n  // @ts-expect-error\n  return res\n}\n\n// verbose but gives us nice types...\ntype MakeTokens<T> = T extends {\n  font: {\n    [key in infer A]: {\n      size: infer B\n      lineHeight: infer C\n      letterSpacing: infer D\n      weight: infer Z\n      family: infer Y\n    }\n  }\n  color: infer E\n  space: infer F\n  size: infer G\n  radius: infer H\n  zIndex: infer J\n}\n  ? {\n      font: {\n        [key in A]: {\n          size: {\n            [key in keyof B]: Variable\n          }\n          lineHeight: {\n            [key in keyof C]: Variable\n          }\n          letterSpacing: {\n            [key in keyof D]: Variable\n          }\n          weight: {\n            [key in keyof Z]: Variable\n          }\n          family: Y\n        }\n      }\n      color: {\n        [key in keyof E]: Variable\n      }\n      space: {\n        [key in keyof F]: Variable\n      }\n      size: {\n        [key in keyof G]: Variable\n      }\n      radius: {\n        [key in keyof H]: Variable\n      }\n      zIndex: {\n        [key in keyof J]: Variable\n      }\n    }\n  : never\n"],
-  "mappings": ";;AAAA;AAKO,sBAA8C,QAA0B;AAC7E,SAAO,YAAY;AAAA;AADL;AAIhB,qBAAqB,QAAa;AAChC,SAAO,qBAAqB;AAAA;AADrB;AAIF,MAAM,uBAAuB,wBAClC,QACA,aAAa,OACc;AAC3B,QAAM,MAAM;AACZ,aAAW,OAAO,QAAQ;AACxB,UAAM,MAAM,OAAO;AACnB,UAAM,OAAO,aAAa,GAAG,cAAc,QAAQ;AACnD,QAAI,OAAO,OAAO,QAAQ,UAAU;AAClC,UAAI,OAAO,qBAAqB,OAAO,MAAM;AAAA,WACxC;AACL,UAAI,OAAO,eAAe,EAAE,KAAK;AAAA;AAAA;AAIrC,SAAO;AAAA,GAf2B;",
+  "sourcesContent": ["import { Variable, createVariable } from './createVariable'\nimport { validateTokens } from './helpers/validate'\nimport { CreateTokens } from './types'\n\n// tokens.color.dark.red ===> { var: `color-dark-red`, val: '' }\n\nexport function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {\n  if (process.env.NODE_ENV === 'development') {\n    validateTokens(tokens)\n  }\n\n  return setupTokens(tokens) as any\n}\n\nfunction setupTokens(tokens: any) {\n  return mapTokensToVariables(tokens)\n}\n\nexport const mapTokensToVariables = (\n  tokens: CreateTokens,\n  parentPath = ''\n): CreateTokens<Variable> => {\n  const res = {}\n  for (const key in tokens) {\n    const val = tokens[key]\n    const name = parentPath ? `${parentPath}-${key}` : key\n    if (val && typeof val === 'object') {\n      res[key] = mapTokensToVariables(tokens[key], name)\n    } else {\n      res[key] = createVariable({ val, name })\n    }\n  }\n  // @ts-expect-error\n  return res\n}\n\n// verbose but gives us nice types...\ntype MakeTokens<T> = T extends {\n  font: {\n    [key in infer A]: {\n      size: infer B\n      lineHeight: infer C\n      letterSpacing: infer D\n      weight: infer Z\n      family: infer Y\n    }\n  }\n  color: infer E\n  space: infer F\n  size: infer G\n  radius: infer H\n  zIndex: infer J\n}\n  ? {\n      font: {\n        [key in A]: {\n          size: {\n            [key in keyof B]: Variable\n          }\n          lineHeight: {\n            [key in keyof C]: Variable\n          }\n          letterSpacing: {\n            [key in keyof D]: Variable\n          }\n          weight: {\n            [key in keyof Z]: Variable\n          }\n          family: Y\n        }\n      }\n      color: {\n        [key in keyof E]: Variable\n      }\n      space: {\n        [key in keyof F]: Variable\n      }\n      size: {\n        [key in keyof G]: Variable\n      }\n      radius: {\n        [key in keyof H]: Variable\n      }\n      zIndex: {\n        [key in keyof J]: Variable\n      }\n    }\n  : never\n"],
+  "mappings": ";;AAAA;AACA;AAKO,sBAA8C,QAA0B;AAC7E,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,mBAAe;AAAA;AAGjB,SAAO,YAAY;AAAA;AALL;AAQhB,qBAAqB,QAAa;AAChC,SAAO,qBAAqB;AAAA;AADrB;AAIF,MAAM,uBAAuB,wBAClC,QACA,aAAa,OACc;AAC3B,QAAM,MAAM;AACZ,aAAW,OAAO,QAAQ;AACxB,UAAM,MAAM,OAAO;AACnB,UAAM,OAAO,aAAa,GAAG,cAAc,QAAQ;AACnD,QAAI,OAAO,OAAO,QAAQ,UAAU;AAClC,UAAI,OAAO,qBAAqB,OAAO,MAAM;AAAA,WACxC;AACL,UAAI,OAAO,eAAe,EAAE,KAAK;AAAA;AAAA;AAIrC,SAAO;AAAA,GAf2B;",
   "names": []
 }

package/dist/createVariable.js

@@ -7,6 +7,9 @@ class Variable {
     this.name = name;
     this.variable = isWeb ? `var(--${name})` : this.val;
   }
+  toString() {
+    return isWeb ? this.variable : this.val;
+  }
 }
 __name(Variable, "Variable");
 const createVariable = /* @__PURE__ */ __name((props) => new Variable(props), "createVariable");

package/dist/createVariable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/createVariable.ts"],
-  "sourcesContent": ["import { isWeb } from './constants/platform'\n\nexport class Variable {\n  name: string\n  val: string | number\n  variable: string | number\n\n  constructor({ val, name }: VariableIn) {\n    // converting to px breaks rn\n    this.val = val //typeof val === 'string' ? val : `${val}px`\n    this.name = name\n    this.variable = isWeb ? `var(--${name})` : this.val\n  }\n}\n\ntype VariableIn = { val: string | number; name: string }\n\nexport const createVariable = (props: VariableIn) => new Variable(props)\n\nexport function isVariable(v: Variable | any): v is Variable {\n  return v instanceof Variable\n}\n"],
-  "mappings": ";;AAAA;AAEO,eAAe;AAAA,EAKpB,YAAY,EAAE,KAAK,QAAoB;AAErC,SAAK,MAAM;AACX,SAAK,OAAO;AACZ,SAAK,WAAW,QAAQ,SAAS,UAAU,KAAK;AAAA;AAAA;AAT7C;AAeA,MAAM,iBAAiB,wBAAC,UAAsB,IAAI,SAAS,QAApC;AAEvB,oBAAoB,GAAkC;AAC3D,SAAO,aAAa;AAAA;AADN;",
+  "sourcesContent": ["import { isWeb } from './constants/platform'\n\nexport class Variable {\n  name: string\n  val: string | number\n  variable: string | number\n\n  constructor({ val, name }: VariableIn) {\n    // converting to px breaks rn\n    this.val = val //typeof val === 'string' ? val : `${val}px`\n    this.name = name\n    this.variable = isWeb ? `var(--${name})` : this.val\n  }\n\n  toString() {\n    return isWeb ? this.variable : this.val\n  }\n}\n\ntype VariableIn = { val: string | number; name: string }\n\nexport const createVariable = (props: VariableIn) => new Variable(props)\n\nexport function isVariable(v: Variable | any): v is Variable {\n  return v instanceof Variable\n}\n"],
+  "mappings": ";;AAAA;AAEO,eAAe;AAAA,EAKpB,YAAY,EAAE,KAAK,QAAoB;AAErC,SAAK,MAAM;AACX,SAAK,OAAO;AACZ,SAAK,WAAW,QAAQ,SAAS,UAAU,KAAK;AAAA;AAAA,EAGlD,WAAW;AACT,WAAO,QAAQ,KAAK,WAAW,KAAK;AAAA;AAAA;AAbjC;AAmBA,MAAM,iBAAiB,wBAAC,UAAsB,IAAI,SAAS,QAApC;AAEvB,oBAAoB,GAAkC;AAC3D,SAAO,aAAa;AAAA;AADN;",
   "names": []
 }

package/{_ → dist/esm}/constants/constants.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/constants/constants.ts"],
+  "sources": ["../../../src/constants/constants.ts"],
   "sourcesContent": ["import { isWeb } from './platform'\n\nexport const stackDefaultStyles = {\n  alignItems: 'stretch',\n  flexShrink: 0,\n  // more accurately match react-native defaults on web\n  ...(isWeb && {\n    display: 'flex',\n    flexBasis: 'auto',\n    boxSizing: 'border-box',\n  }),\n}\n"],
   "mappings": "AAAA;AAEO,MAAM,qBAAqB;AAAA,EAChC,YAAY;AAAA,EACZ,YAAY;AAAA,KAER,SAAS;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA;AAAA;",
   "names": []

package/{_ → dist/esm}/constants/platform.js

@@ -1,7 +1,6 @@
-var _a;
 import { useEffect, useLayoutEffect } from "react";
 import { Platform } from "react-native";
-const isWeb = process.env.TAMAGUI_TARGET === "web" || ((_a = Platform) == null ? void 0 : _a.OS) === "web";
+const isWeb = process.env.TAMAGUI_TARGET === "web" ? true : Platform?.OS === "web";
 const isSSR = isWeb && typeof window === "undefined";
 const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;
 const isChrome = typeof navigator !== "undefined" && /Chrome/.test(navigator.userAgent || "");

package/dist/esm/constants/platform.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/constants/platform.ts"],
+  "sourcesContent": ["import { useEffect, useLayoutEffect } from 'react'\nimport { Platform } from 'react-native'\n\nexport const isWeb = process.env.TAMAGUI_TARGET === 'web' ? true : Platform?.OS === 'web'\nexport const isSSR = isWeb && typeof window === 'undefined'\nexport const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect\nexport const isChrome = typeof navigator !== 'undefined' && /Chrome/.test(navigator.userAgent || '')\nexport const supportsTouchWeb = typeof window !== 'undefined' && 'ontouchstart' in window\nexport const isTouchDevice = !isWeb || supportsTouchWeb\nexport const isWebIOS =\n  isWeb &&\n  typeof navigator !== 'undefined' &&\n  (/iPad|iPhone|iPod/.test(navigator.platform) ||\n    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&\n  !window['MSStream']\n"],
+  "mappings": "AAAA;AACA;AAEO,MAAM,QAAQ,QAAQ,IAAI,mBAAmB,QAAQ,OAAO,UAAU,OAAO;AAC7E,MAAM,QAAQ,SAAS,OAAO,WAAW;AACzC,MAAM,4BAA4B,QAAQ,YAAY;AACtD,MAAM,WAAW,OAAO,cAAc,eAAe,SAAS,KAAK,UAAU,aAAa;AAC1F,MAAM,mBAAmB,OAAO,WAAW,eAAe,kBAAkB;AAC5E,MAAM,gBAAgB,CAAC,SAAS;AAChC,MAAM,WACX,SACA,OAAO,cAAc,eACpB,oBAAmB,KAAK,UAAU,aAChC,UAAU,aAAa,cAAc,UAAU,iBAAiB,MACnE,CAAC,OAAO;",
+  "names": []
+}

package/{_ → dist/esm}/constants/pseudos.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/constants/pseudos.ts"],
+  "sources": ["../../../src/constants/pseudos.ts"],
   "sourcesContent": ["export const pseudos = {\n  focusStyle: {\n    name: 'focus',\n    priority: 3,\n  },\n  pressStyle: {\n    name: 'active',\n    priority: 2,\n  },\n  hoverStyle: {\n    name: 'hover',\n    priority: 1,\n  },\n}\n"],
   "mappings": "AAAO,MAAM,UAAU;AAAA,EACrB,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA;AAAA,EAEZ,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA;AAAA,EAEZ,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA;AAAA;",
   "names": []

package/{_ → dist/esm}/constants/rnw.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/constants/rnw.tsx"],
+  "sources": ["../../../src/constants/rnw.tsx"],
   "sourcesContent": ["const interopRequire = (src: any) => ('default' in src ? src.default : src)\n\nexport const rnw: Record<string, any> = {}\n\n// in static mode, require them directly since we can't import react-native-web at all (it has flow stuff in it)\nif (process.env.IS_STATIC === 'is_static') {\n  const createCompileableStyle = require('react-native-web/dist/cjs/exports/StyleSheet/createCompileableStyle')\n  const createReactDOMStyle = require('react-native-web/dist/cjs/exports/StyleSheet/createReactDOMStyle')\n  const i18Style = require('react-native-web/dist/cjs/exports/StyleSheet/i18nStyle')\n  const atomic = require('react-native-web/dist/cjs/exports/StyleSheet/compile').atomic\n  Object.assign(rnw, {\n    createCompileableStyle,\n    createReactDOMStyle,\n    i18Style,\n    atomic,\n  })\n} else if (process.env.TAMAGUI_TARGET === 'web') {\n  // when targeting web (client) import it like so\n  Object.assign(rnw, interopRequire(require('react-native-web').TamaguiExports))\n}\n"],
   "mappings": ";;AAAA,MAAM,iBAAiB,wBAAC,QAAc,aAAa,MAAM,IAAI,UAAU,KAAhD;AAEhB,MAAM,MAA2B;AAGxC,IAAI,QAAQ,IAAI,cAAc,aAAa;AACzC,QAAM,yBAAyB,QAAQ;AACvC,QAAM,sBAAsB,QAAQ;AACpC,QAAM,WAAW,QAAQ;AACzB,QAAM,SAAS,QAAQ,wDAAwD;AAC/E,SAAO,OAAO,KAAK;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,WAEO,QAAQ,IAAI,mBAAmB,OAAO;AAE/C,SAAO,OAAO,KAAK,eAAe,QAAQ,oBAAoB;AAAA;",
   "names": []

package/{_ → dist/esm}/createComponent.js

@@ -1,6 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { concatClassName, stylePropsView } from "@tamagui/helpers";
+import { useForceUpdate } from "@tamagui/use-force-update";
 import React, {
   Children,
   Fragment,
@@ -12,16 +13,15 @@ import React, {
   useRef,
   useState
 } from "react";
-import { Text, View } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
 import { stackDefaultStyles } from "./constants/constants";
 import { isTouchDevice, isWeb } from "./constants/platform";
 import { rnw } from "./constants/rnw";
 import { onConfiguredOnce } from "./createTamagui";
-import { addStylesUsingClassname } from "./helpers/addStylesUsingClassname";
+import { addStylesUsingClassname, useStylesAsClassname } from "./helpers/addStylesUsingClassname";
 import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
 import { getSplitStyles } from "./helpers/getSplitStyles";
 import { useFeatures } from "./hooks/useFeatures";
-import { useForceUpdate } from "./hooks/useForceUpdate";
 import { usePressable } from "./hooks/usePressable";
 import { TextAncestorContext } from "./views/TextAncestorContext";
 import { ThemeManagerContext } from "./views/ThemeManagerContext";
@@ -39,15 +39,47 @@ function createComponent(configIn) {
   } else {
     staticConfig = parseStaticConfig(configIn);
   }
-  const { Component, validStyles, isText } = staticConfig;
-  const validStyleProps = validStyles != null ? validStyles : stylePropsView;
+  const { Component, validStyles, isText, isZStack } = staticConfig;
+  const validStyleProps = validStyles ?? stylePropsView;
   let defaultProps = null;
   let tamaguiConfig;
   let defaultsStyle;
   let defaultsClassName = "";
   let initialTheme;
   const component = forwardRef((props, forwardedRef) => {
-    var _a;
+    const forceUpdate = useForceUpdate();
+    const features = useFeatures(props, { forceUpdate });
+    const manager = useContext(ThemeManagerContext);
+    const [state, set_] = useState(() => ({
+      hover: false,
+      press: false,
+      pressIn: false,
+      theme: manager.name
+    }));
+    const set = /* @__PURE__ */ __name((next) => set_((prev) => {
+      for (const key in next) {
+        if (prev[key] !== next[key]) {
+          return { ...prev, ...next };
+        }
+      }
+      return prev;
+    }), "set");
+    if (process.env.NODE_ENV === "development" && !isText && isWeb) {
+      Children.toArray(props.children).forEach((item) => {
+        if (typeof item === "string") {
+          console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
+        }
+      });
+    }
+    const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false;
+    const hostRef = useRef(null);
+    const theme = manager.theme || initialTheme;
+    const {
+      viewProps: viewPropsIn,
+      pseudos,
+      style,
+      classNames
+    } = getSplitStyles(props, staticConfig, theme);
     const {
       tag,
       hitSlop,
@@ -81,34 +113,17 @@ function createComponent(configIn) {
       onStartShouldSetResponderCapture,
       onMouseDown,
       onClick,
-      onLayout
-    } = props;
-    const forceUpdate = useForceUpdate();
-    const features = useFeatures(props, { forceUpdate });
-    const manager = useContext(ThemeManagerContext);
-    const [state, set_] = useState(() => ({
-      hover: false,
-      press: false,
-      pressIn: false,
-      theme: manager.name
-    }));
-    const set = /* @__PURE__ */ __name((next) => set_((prev) => {
-      for (const key in next) {
-        if (prev[key] !== next[key]) {
-          return { ...prev, ...next };
-        }
-      }
-      return prev;
-    }), "set");
-    if (process.env.NODE_ENV === "development" && !isText && isWeb) {
-      Children.toArray(props.children).forEach((item) => {
-        if (typeof item === "string") {
-          console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
-        }
-      });
+      accessible,
+      accessibilityRole,
+      onLayout,
+      ...viewProps
+    } = viewPropsIn;
+    if (!isWeb) {
+      if (accessible)
+        viewProps.accessible = accessible;
+      if (accessibilityRole)
+        viewProps.accessibilityRole = accessibilityRole;
     }
-    const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false;
-    const hostRef = useRef(null);
     if (isWeb) {
       rnw.useResponderEvents(hostRef, {
         onMoveShouldSetResponder,
@@ -130,7 +145,6 @@ function createComponent(configIn) {
       });
     }
     const isTracking = useRef(false);
-    const { viewProps, pseudos, style, classNames } = getSplitStyles(props, staticConfig, manager.theme || initialTheme);
     const internal = useRef();
     if (!internal.current) {
       internal.current = {
@@ -139,7 +153,7 @@ function createComponent(configIn) {
     }
     useEffect(() => {
       internal.current.isMounted = true;
-      const dispose = manager == null ? void 0 : manager.onChangeTheme((name) => {
+      const dispose = manager?.onChangeTheme((name) => {
         if (isTracking.current) {
           set({ theme: name });
         }
@@ -163,18 +177,17 @@ function createComponent(configIn) {
       isPressing ? pseudos.pressStyle || null : null
     ];
     if (isWeb) {
-      const stylesClassNames = addStylesUsingClassname(styles);
-      const classList = staticConfig.isText ? [
+      const stylesClassNames = useStylesAsClassname(styles);
+      const classList = isText ? [
         defaultsClassName,
         classNames,
         stylesClassNames,
         props.className
       ] : [defaultsClassName, props.className, classNames, stylesClassNames];
-      const classListFlat = classList.flat(1).filter(Boolean).join(" ");
-      const className = concatClassName(classListFlat);
+      const className = concatClassName(...classList);
       if (process.env.NODE_ENV === "development") {
         if (props["debug"]) {
-          console.log("\u{1F95A} className", { style, styles, stylesClassNames, classListFlat: classListFlat.split(" "), className });
+          console.log("\u{1F95A} className", { style, styles, classList, stylesClassNames, className });
         }
       }
       viewProps.className = className;
@@ -223,7 +236,7 @@ function createComponent(configIn) {
       ...!isWeb && {
         onPressOut: (e) => {
           unPress();
-          onPressOut == null ? void 0 : onPressOut(e);
+          onPressOut?.(e);
         }
       },
       ...isWeb && !isTouchDevice && {
@@ -238,8 +251,8 @@ function createComponent(configIn) {
           if (Object.keys(next).length) {
             set(next);
           }
-          onHoverIn == null ? void 0 : onHoverIn(e);
-          onMouseEnter == null ? void 0 : onMouseEnter(e);
+          onHoverIn?.(e);
+          onMouseEnter?.(e);
         } : void 0,
         onMouseLeave: attachHover || attachPress ? (e) => {
           let next = {};
@@ -254,8 +267,8 @@ function createComponent(configIn) {
           if (Object.keys(next).length) {
             set(next);
           }
-          onHoverOut == null ? void 0 : onHoverOut(e);
-          onMouseLeave == null ? void 0 : onMouseLeave(e);
+          onHoverOut?.(e);
+          onMouseLeave?.(e);
         } : void 0
       },
       onMouseDown: attachPress ? (e) => {
@@ -263,14 +276,14 @@ function createComponent(configIn) {
           press: true,
           pressIn: true
         });
-        onPressIn == null ? void 0 : onPressIn(e);
-        onMouseDown == null ? void 0 : onMouseDown(e);
+        onPressIn?.(e);
+        onMouseDown?.(e);
       } : onPressIn,
       onClick: attachPress ? (e) => {
-        onPress == null ? void 0 : onPress(e);
-        onClick == null ? void 0 : onClick(e);
+        onPress?.(e);
+        onClick?.(e);
         unPress();
-        onPressOut == null ? void 0 : onPressOut(e);
+        onPressOut?.(e);
       } : onPressOut
     } : null;
     if (events) {
@@ -287,10 +300,11 @@ function createComponent(configIn) {
         Object.assign(viewProps, events);
       }
     }
-    const spacedChildrenEl = spacedChildren({
+    const childEls = spacedChildren({
       children,
       space,
-      flexDirection: props.flexDirection || (defaultProps == null ? void 0 : defaultProps.flexDirection)
+      flexDirection: props.flexDirection || defaultProps?.flexDirection,
+      isZStack
     });
     let content;
     if (isWeb && rnw) {
@@ -298,11 +312,11 @@ function createComponent(configIn) {
       const className = domProps.className && domProps.className !== viewProps.className ? `${domProps.className} ${viewProps.className}` : viewProps.className;
       Object.assign(viewProps, domProps);
       viewProps.className = className;
-      content = createElement(ViewComponent, viewProps, spacedChildrenEl);
+      content = createElement(ViewComponent, viewProps, childEls);
     } else {
-      content = createElement(ViewComponent, viewProps, spacedChildrenEl);
+      content = createElement(ViewComponent, viewProps, childEls);
     }
-    const shouldWrapTextAncestor = isWeb && staticConfig.isText && !hasTextAncestor;
+    const shouldWrapTextAncestor = isWeb && isText && !hasTextAncestor;
     if (shouldWrapTextAncestor) {
       content = createElement(TextAncestorContext.Provider, { value: true }, content);
     }
@@ -311,8 +325,8 @@ function createComponent(configIn) {
         viewProps["debug"] = true;
         console.log("\u{1F95A} props in:", props);
         console.log("\u{1F95A} props out:", viewProps);
-        console.log((_a = props.onClick) == null ? void 0 : _a.toString());
-        console.log("\u{1F95A} etc:", { shouldAttach, ViewComponent, viewProps, styles, pseudos, content, spacedChildrenEl });
+        console.log(props.onClick?.toString());
+        console.log("\u{1F95A} etc:", { shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls });
         if (isWeb) {
           console.log("\u{1F95A} component info", { staticConfig, tamaguiConfig });
         }
@@ -321,7 +335,6 @@ function createComponent(configIn) {
     return /* @__PURE__ */ React.createElement(React.Fragment, null, features, content);
   });
   onConfiguredOnce((conf) => {
-    var _a;
     tamaguiConfig = conf;
     initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]];
     const next = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, true);
@@ -331,14 +344,17 @@ function createComponent(configIn) {
       }
       defaultsClassName += addStylesUsingClassname([next.style, next.pseudos]);
     } else {
-      console.log("we need to account for default styles for media queries", next);
+      if (!hasWarnedOnce) {
+        hasWarnedOnce = true;
+        console.log("\u26A0\uFE0F TODO account for default styles for media queries");
+      }
     }
     component.defaultProps = {
       ...next.viewProps,
       ...component.defaultProps
     };
     if (process.env.NODE_ENV === "development") {
-      if ((_a = staticConfig.defaultProps) == null ? void 0 : _a.debug) {
+      if (staticConfig.defaultProps?.debug) {
         console.log("tamagui debug component:", next, defaultsClassName, component.defaultProps);
       }
     }
@@ -348,25 +364,33 @@ function createComponent(configIn) {
     ...staticConfig
   };
   const res = component;
-  res["extractable"] = (Component2) => {
+  res["extractable"] = (Component2, conf) => {
     Component2["staticConfig"] = extendStaticConfig(res, {
+      ...conf,
       neverFlatten: true,
-      defaultProps: Component2.defaultProps
+      defaultProps: {
+        ...Component2.defaultProps,
+        ...conf?.defaultProps
+      }
     });
     return Component2;
   };
   return res;
 }
 __name(createComponent, "createComponent");
+let hasWarnedOnce = false;
 const Spacer = createComponent({
-  defaultProps: stackDefaultStyles,
+  defaultProps: {
+    ...stackDefaultStyles,
+    size: true
+  },
   variants: {
     size: {
       "...size": (size, { tokens }) => {
-        var _a, _b;
+        size = size == true ? "$true" : size;
         return {
-          width: (_a = tokens.size[size]) != null ? _a : size,
-          height: (_b = tokens.size[size]) != null ? _b : size
+          width: tokens.size[size] ?? size,
+          height: tokens.size[size] ?? size
         };
       }
     },
@@ -381,12 +405,12 @@ const Spacer = createComponent({
   }
 });
 function spacedChildren({
+  isZStack,
   children,
   space,
   flexDirection
 }) {
-  var _a, _b;
-  if (!space) {
+  if (!space && !isZStack) {
     return children;
   }
   const childrenList = Children.toArray(children);
@@ -399,25 +423,38 @@ function spacedChildren({
     if (child === null || child === void 0) {
       continue;
     }
-    const key = `${(_a = child == null ? void 0 : child["key"]) != null ? _a : index}`;
+    const key = `${child?.["key"] ?? index}`;
     next.push(/* @__PURE__ */ React.createElement(Fragment, {
       key
-    }, child));
-    if ((_b = child == null ? void 0 : child["type"]) == null ? void 0 : _b["isVisuallyHidden"]) {
+    }, isZStack ? /* @__PURE__ */ React.createElement(Absolute, null, child) : child));
+    if (child?.["type"]?.["isVisuallyHidden"]) {
       continue;
     }
-    if (index === len - 1) {
-      break;
+    if (index !== len - 1) {
+      if (space) {
+        next.push(/* @__PURE__ */ React.createElement(Spacer, {
+          key: `${key}_spacer`,
+          direction: flexDirection === "row" || flexDirection === "row-reverse" ? "horizontal" : "vertical",
+          size: space
+        }));
+      }
     }
-    next.push(/* @__PURE__ */ React.createElement(Spacer, {
-      key: `${key}_spacer`,
-      direction: flexDirection === "row" || flexDirection === "row-reverse" ? "horizontal" : "vertical",
-      size: space
-    }));
   }
   return next;
 }
 __name(spacedChildren, "spacedChildren");
+const Absolute = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ React.createElement(View, {
+  style: sheet.fullscreen
+}, children), "Absolute");
+const sheet = StyleSheet.create({
+  fullscreen: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  }
+});
 export {
   Spacer,
   createComponent,