@tamagui/core 1.0.1-beta.54 → 1.0.1-beta.57

package/dist/esm/helpers/getStackSize.js

@@ -1,44 +1,18 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { getVariableValue, isVariable } from "../createVariable";
-const getSizeScaledToFont = /* @__PURE__ */ __name((val, { sizeX = 1, sizeY = 1 }, { tokens, props, fonts }) => {
-  var _a, _b, _c, _d, _e, _f;
-  const size = (_c = (_b = (_a = tokens.size[val]) != null ? _a : val) != null ? _b : tokens.size["$4"]) != null ? _c : 14;
-  const radius = (_e = (_d = tokens.radius[val]) != null ? _d : tokens.radius["$4"]) != null ? _e : size;
-  const sizePx = +(isVariable(size) ? size.val : size);
-  const scaleSize = isVariable(size) ? 2 : 1;
-  const px = Math.round(sizePx * sizeX);
-  const py = Math.round(sizePx * sizeY);
-  const font = fonts[props.fontFamily] || fonts["$body"];
-  const lineHeights = font.lineHeight;
-  const lineHeight = (_f = lineHeights[val]) != null ? _f : lineHeights["$4"];
-  const minHeight = Math.round(getVariableValue(lineHeight) + py * scaleSize);
-  return {
-    px,
-    py,
-    radius,
-    size,
-    lineHeight,
-    minHeight
-  };
-}, "getSizeScaledToFont");
-const createGetStackSize = /* @__PURE__ */ __name((scale) => (val, extras) => {
+import { getSize, stepTokenUpOrDown } from "./getSize";
+const getButtonSize = /* @__PURE__ */ __name((val, { tokens }) => {
   var _a;
-  const { props } = extras;
-  const { radius, minHeight, px, py } = getSizeScaledToFont(val, scale, extras);
+  const ySize = getSize(val, 0);
+  const xSize = stepTokenUpOrDown(tokens.space, val);
+  const radiusToken = (_a = tokens.radius[val]) != null ? _a : tokens.radius["$4"];
   return {
-    minHeight,
-    borderRadius: props.circular ? 1e5 : (_a = props.borderRadius) != null ? _a : radius,
-    paddingHorizontal: props.circular ? 0 : px,
-    paddingVertical: props.circular ? 0 : py
+    paddingHorizontal: xSize,
+    height: ySize,
+    borderRadius: radiusToken
   };
-}, "createGetStackSize");
-const buttonScaling = { sizeX: 0.75, sizeY: 0.333 };
-const getButtonSize = createGetStackSize(buttonScaling);
+}, "getButtonSize");
 export {
-  buttonScaling,
-  createGetStackSize,
-  getButtonSize,
-  getSizeScaledToFont
+  getButtonSize
 };
 //# sourceMappingURL=getStackSize.js.map

package/dist/esm/helpers/getStackSize.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/getStackSize.ts"],
-  "sourcesContent": ["import { getVariableValue, isVariable } from '../createVariable'\nimport { SizeTokens, VariantSpreadExtras } from '../types'\n\n// for use in sizable things\n\ntype ScaleProps = { sizeX: number; sizeY: number }\n\nexport type ScaleVariantExtras = Pick<VariantSpreadExtras<any>, 'tokens' | 'props' | 'fonts'>\n\nexport const getSizeScaledToFont = (\n  val: string | number,\n  { sizeX = 1, sizeY = 1 }: ScaleProps,\n  { tokens, props, fonts }: ScaleVariantExtras\n) => {\n  const size = tokens.size[val] ?? val ?? tokens.size['$4'] ?? 14\n  const radius = tokens.radius[val] ?? tokens.radius['$4'] ?? size\n  const sizePx = +(isVariable(size) ? size.val : size)\n  const scaleSize = isVariable(size) ? 2 : 1\n  const px = Math.round(sizePx * sizeX)\n  const py = Math.round(sizePx * sizeY)\n  // keep buttons height aligned to the font used\n  const font = fonts[props.fontFamily] || fonts['$body']\n  const lineHeights = font.lineHeight\n  const lineHeight = lineHeights[val] ?? lineHeights['$4']\n  const minHeight = Math.round(getVariableValue(lineHeight) + py * scaleSize)\n  return {\n    px,\n    py,\n    radius,\n    size,\n    lineHeight,\n    minHeight,\n  }\n}\n\nexport const createGetStackSize =\n  (scale: ScaleProps) => (val: SizeTokens | number, extras: VariantSpreadExtras<any>) => {\n    const { props } = extras\n    const { radius, minHeight, px, py } = getSizeScaledToFont(val, scale, extras)\n    return {\n      minHeight,\n      borderRadius: props.circular ? 100_000 : props.borderRadius ?? radius,\n      paddingHorizontal: props.circular ? 0 : px,\n      paddingVertical: props.circular ? 0 : py,\n    }\n  }\n\nexport const buttonScaling = { sizeX: 0.75, sizeY: 0.333 }\nexport const getButtonSize = createGetStackSize(buttonScaling)\n"],
-  "mappings": ";;AAAA;AASO,MAAM,sBAAsB,wBACjC,KACA,EAAE,QAAQ,GAAG,QAAQ,KACrB,EAAE,QAAQ,OAAO,YACd;AAbL;AAcE,QAAM,OAAO,yBAAO,KAAK,SAAZ,YAAoB,QAApB,YAA2B,OAAO,KAAK,UAAvC,YAAgD;AAC7D,QAAM,SAAS,mBAAO,OAAO,SAAd,YAAsB,OAAO,OAAO,UAApC,YAA6C;AAC5D,QAAM,SAAS,CAAE,YAAW,IAAI,IAAI,KAAK,MAAM;AAC/C,QAAM,YAAY,WAAW,IAAI,IAAI,IAAI;AACzC,QAAM,KAAK,KAAK,MAAM,SAAS,KAAK;AACpC,QAAM,KAAK,KAAK,MAAM,SAAS,KAAK;AAEpC,QAAM,OAAO,MAAM,MAAM,eAAe,MAAM;AAC9C,QAAM,cAAc,KAAK;AACzB,QAAM,aAAa,kBAAY,SAAZ,YAAoB,YAAY;AACnD,QAAM,YAAY,KAAK,MAAM,iBAAiB,UAAU,IAAI,KAAK,SAAS;AAC1E,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF,GAxBmC;AA0B5B,MAAM,qBACX,wBAAC,UAAsB,CAAC,KAA0B,WAAqC;AApCzF;AAqCI,QAAM,EAAE,UAAU;AAClB,QAAM,EAAE,QAAQ,WAAW,IAAI,OAAO,oBAAoB,KAAK,OAAO,MAAM;AAC5E,SAAO;AAAA,IACL;AAAA,IACA,cAAc,MAAM,WAAW,MAAU,YAAM,iBAAN,YAAsB;AAAA,IAC/D,mBAAmB,MAAM,WAAW,IAAI;AAAA,IACxC,iBAAiB,MAAM,WAAW,IAAI;AAAA,EACxC;AACF,GATA;AAWK,MAAM,gBAAgB,EAAE,OAAO,MAAM,OAAO,MAAM;AAClD,MAAM,gBAAgB,mBAAmB,aAAa;",
+  "sourcesContent": ["import { SizeTokens, VariantSpreadExtras } from '../types'\nimport { getSize, stepTokenUpOrDown } from './getSize'\n\nexport type ScaleVariantExtras = Pick<VariantSpreadExtras<any>, 'tokens' | 'props' | 'fonts'>\n\nexport const getButtonSize = (val: SizeTokens, { tokens }: VariantSpreadExtras<any>) => {\n  const ySize = getSize(val, 0)\n  const xSize = stepTokenUpOrDown(tokens.space, val)\n  const radiusToken = tokens.radius[val] ?? tokens.radius['$4']\n  return {\n    paddingHorizontal: xSize,\n    height: ySize,\n    borderRadius: radiusToken,\n  }\n}\n"],
+  "mappings": ";;AACA;AAIO,MAAM,gBAAgB,wBAAC,KAAiB,EAAE,aAAuC;AALxF;AAME,QAAM,QAAQ,QAAQ,KAAK,CAAC;AAC5B,QAAM,QAAQ,kBAAkB,OAAO,OAAO,GAAG;AACjD,QAAM,cAAc,aAAO,OAAO,SAAd,YAAsB,OAAO,OAAO;AACxD,SAAO;AAAA,IACL,mBAAmB;AAAA,IACnB,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AACF,GAT6B;",
   "names": []
 }

package/dist/esm/helpers/getTextSize.js

@@ -7,7 +7,7 @@ const getTextSize = /* @__PURE__ */ __name((val = "$4", { fonts, theme, props })
   const font = fonts[family] || fonts["$body"];
   if (!font) {
     console.warn("\u26A0\uFE0F no font found", { family, fontTokens: Object.keys(fonts), val });
-    return;
+    return {};
   }
   const fontFamily = font.family;
   const fontSize = props.fontSize || font.size[val];

package/dist/esm/helpers/getTextSize.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/getTextSize.tsx"],
-  "sourcesContent": ["import { getVariableValue } from '../createVariable'\nimport { FontSizeTokens, TextProps, VariantSpreadFunction } from '../types'\n\nexport const getTextSize: VariantSpreadFunction<TextProps, FontSizeTokens> = (\n  val = '$4',\n  { fonts, theme, props }\n) => {\n  const family = getVariableValue(props.fontFamily) || '$body'\n  const font = fonts[family] || fonts['$body']\n  if (!font) {\n    console.warn('\u26A0\uFE0F no font found', { family, fontTokens: Object.keys(fonts), val })\n    return\n  }\n  const fontFamily = font.family\n  const fontSize = props.fontSize || font.size[val]\n  const lineHeight = props.lineHeight || font.lineHeight[val]\n  const fontWeight = props.fontWeight || font.weight[val]\n  const letterSpacing = props.letterSpacing || font.letterSpacing[val]\n  const fontStyle = props.fontStyle || font.style?.[val]\n  const textTransform = props.textTransform || font.transform?.[val]\n  const color = props.color || font.color?.[val] || theme.color\n  return {\n    color,\n    fontStyle,\n    textTransform,\n    fontFamily,\n    fontWeight,\n    letterSpacing,\n    fontSize,\n    lineHeight,\n  } as any\n}\n"],
-  "mappings": ";;AAAA;AAGO,MAAM,cAAgE,wBAC3E,MAAM,MACN,EAAE,OAAO,OAAO,YACb;AANL;AAOE,QAAM,SAAS,iBAAiB,MAAM,UAAU,KAAK;AACrD,QAAM,OAAO,MAAM,WAAW,MAAM;AACpC,MAAI,CAAC,MAAM;AACT,YAAQ,KAAK,8BAAoB,EAAE,QAAQ,YAAY,OAAO,KAAK,KAAK,GAAG,IAAI,CAAC;AAChF;AAAA,EACF;AACA,QAAM,aAAa,KAAK;AACxB,QAAM,WAAW,MAAM,YAAY,KAAK,KAAK;AAC7C,QAAM,aAAa,MAAM,cAAc,KAAK,WAAW;AACvD,QAAM,aAAa,MAAM,cAAc,KAAK,OAAO;AACnD,QAAM,gBAAgB,MAAM,iBAAiB,KAAK,cAAc;AAChE,QAAM,YAAY,MAAM,aAAa,YAAK,UAAL,mBAAa;AAClD,QAAM,gBAAgB,MAAM,iBAAiB,YAAK,cAAL,mBAAiB;AAC9D,QAAM,QAAQ,MAAM,SAAS,YAAK,UAAL,mBAAa,SAAQ,MAAM;AACxD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF,GA5B6E;",
+  "sourcesContent": ["import { getVariableValue } from '../createVariable'\nimport { FontSizeTokens, TextProps, VariantSpreadFunction } from '../types'\n\nexport const getTextSize: VariantSpreadFunction<TextProps, FontSizeTokens> = (\n  val = '$4',\n  { fonts, theme, props }\n) => {\n  const family = getVariableValue(props.fontFamily) || '$body'\n  const font = fonts[family] || fonts['$body']\n  if (!font) {\n    console.warn('\u26A0\uFE0F no font found', { family, fontTokens: Object.keys(fonts), val })\n    return {} as any\n  }\n  const fontFamily = font.family\n  const fontSize = props.fontSize || font.size[val]\n  const lineHeight = props.lineHeight || font.lineHeight[val]\n  const fontWeight = props.fontWeight || font.weight[val]\n  const letterSpacing = props.letterSpacing || font.letterSpacing[val]\n  const fontStyle = props.fontStyle || font.style?.[val]\n  const textTransform = props.textTransform || font.transform?.[val]\n  const color = props.color || font.color?.[val] || theme.color\n  return {\n    color,\n    fontStyle,\n    textTransform,\n    fontFamily,\n    fontWeight,\n    letterSpacing,\n    fontSize,\n    lineHeight,\n  } as any\n}\n"],
+  "mappings": ";;AAAA;AAGO,MAAM,cAAgE,wBAC3E,MAAM,MACN,EAAE,OAAO,OAAO,YACb;AANL;AAOE,QAAM,SAAS,iBAAiB,MAAM,UAAU,KAAK;AACrD,QAAM,OAAO,MAAM,WAAW,MAAM;AACpC,MAAI,CAAC,MAAM;AACT,YAAQ,KAAK,8BAAoB,EAAE,QAAQ,YAAY,OAAO,KAAK,KAAK,GAAG,IAAI,CAAC;AAChF,WAAO,CAAC;AAAA,EACV;AACA,QAAM,aAAa,KAAK;AACxB,QAAM,WAAW,MAAM,YAAY,KAAK,KAAK;AAC7C,QAAM,aAAa,MAAM,cAAc,KAAK,WAAW;AACvD,QAAM,aAAa,MAAM,cAAc,KAAK,OAAO;AACnD,QAAM,gBAAgB,MAAM,iBAAiB,KAAK,cAAc;AAChE,QAAM,YAAY,MAAM,aAAa,YAAK,UAAL,mBAAa;AAClD,QAAM,gBAAgB,MAAM,iBAAiB,YAAK,cAAL,mBAAiB;AAC9D,QAAM,QAAQ,MAAM,SAAS,YAAK,UAAL,mBAAa,SAAQ,MAAM;AACxD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF,GA5B6E;",
   "names": []
 }

package/dist/esm/helpers/registerCSSVariable.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createCSSVariable } from "../createVariable";
+const registerCSSVariable = /* @__PURE__ */ __name((v) => {
+  tokensValueToVariable.set(v.val, v);
+  const val = `--${createCSSVariable(v.name, false)}:${typeof v.val === "number" ? `${v.val}px` : v.val}`;
+  tokenRules.add(val);
+  return val;
+}, "registerCSSVariable");
+const tokensValueToVariable = /* @__PURE__ */ new Map();
+const tokenRules = /* @__PURE__ */ new Set();
+export {
+  registerCSSVariable,
+  tokenRules,
+  tokensValueToVariable
+};
+//# sourceMappingURL=registerCSSVariable.js.map

package/dist/esm/helpers/registerCSSVariable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/registerCSSVariable.ts"],
+  "sourcesContent": ["import { Variable, createCSSVariable } from '../createVariable'\n\nexport const registerCSSVariable = (v: Variable) => {\n  tokensValueToVariable.set(v.val, v)\n  const val = `--${createCSSVariable(v.name, false)}:${\n    typeof v.val === 'number' ? `${v.val}px` : v.val\n  }`\n  tokenRules.add(val)\n  return val\n}\n\nexport const tokensValueToVariable = new Map<string, Variable>()\nexport const tokenRules = new Set<string>()\n"],
+  "mappings": ";;AAAA;AAEO,MAAM,sBAAsB,wBAAC,MAAgB;AAClD,wBAAsB,IAAI,EAAE,KAAK,CAAC;AAClC,QAAM,MAAM,KAAK,kBAAkB,EAAE,MAAM,KAAK,KAC9C,OAAO,EAAE,QAAQ,WAAW,GAAG,EAAE,UAAU,EAAE;AAE/C,aAAW,IAAI,GAAG;AAClB,SAAO;AACT,GAPmC;AAS5B,MAAM,wBAAwB,oBAAI,IAAsB;AACxD,MAAM,aAAa,oBAAI,IAAY;",
+  "names": []
+}

package/dist/esm/hooks/useFeatures.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useFeatures.tsx"],
-  "sourcesContent": ["import React, { RefObject } from 'react'\nimport { View, ViewStyle } from 'react-native'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getSubStyle } from '../helpers/getSplitStyles'\nimport {\n  PseudoStyles,\n  SplitStyleState,\n  StaticConfigParsed,\n  TamaguiComponentState,\n  UseAnimationHook,\n  UseAnimationProps,\n} from '../types'\nimport { addMediaQueryListener, mediaState, removeMediaQueryListener } from './useMedia'\n\ntype FeatureDefinition = {\n  isEnabled: (props: any) => boolean\n  Component: any\n}\n\ntype FeatureUtils = {\n  forceUpdate: Function\n  state: SplitStyleState\n  setStateShallow: (next: Partial<TamaguiComponentState>) => void\n  useAnimations?: UseAnimationHook\n  pseudos: PseudoStyles\n  style: ViewStyle | null | undefined\n  staticConfig: StaticConfigParsed\n  theme: any\n  onDidAnimate?: () => void\n  hostRef: RefObject<HTMLElement | View>\n}\n\nconst createDefinition = ({\n  Component,\n  propNames,\n}: {\n  Component: (props: { _utils: FeatureUtils; [key: string]: any }) => void\n  propNames: string[]\n}): FeatureDefinition => ({\n  isEnabled: (props: any) => propNames.some((name) => !!props[name]),\n  Component,\n})\n\nlet featureDefinitions: Record<string, FeatureDefinition> | null = null\n\ntype FeatureKeys = keyof ReturnType<typeof loadFeatures>\n\nexport const useFeatures = (props: any, utils?: FeatureUtils) => {\n  if (!featureDefinitions) {\n    featureDefinitions = loadFeatures()\n  }\n  const elements: JSX.Element[] = []\n  const enabled: { [key in FeatureKeys]?: boolean } = {}\n  for (const name in featureDefinitions) {\n    const { isEnabled, Component } = featureDefinitions[name]\n    if (isEnabled(props) && Component) {\n      enabled[name] = true\n      elements.push(<Component key={name} {...props} _utils={utils} />)\n    }\n  }\n  return {\n    elements,\n    enabled,\n  }\n}\n\nfunction loadFeatures() {\n  return {\n    // loads animations and sets state with the results\n    animation: loadAnimationFeature(),\n\n    // will update the parent whenever media query changes\n    // no need on web, media queries are inserted and run in css\n    mediaQuery: loadMediaQueryFeature(),\n  } as const\n}\n\nfunction loadAnimationFeature() {\n  return createDefinition({\n    Component: ({ _utils, ...props }) => {\n      const {\n        state,\n        useAnimations,\n        pseudos,\n        style: inStyle,\n        setStateShallow,\n        staticConfig,\n        theme,\n        onDidAnimate,\n      } = _utils\n\n      if (!useAnimations) {\n        console.error('no useAnimations hook provided')\n        return null\n      }\n\n      // const animatedStyleIn =\n\n      // we always have .animation set\n      const propsWithAnimation = props as UseAnimationProps\n\n      const res = useAnimations(propsWithAnimation, {\n        state,\n        pseudos,\n        onDidAnimate,\n        staticConfig,\n        getStyle({ isEntering, exitVariant, enterVariant } = {}) {\n          // we have to merge such that transforms keys all exist\n          const style = inStyle || {}\n\n          const enterStyle =\n            isEntering === true || state.mounted === false\n              ? enterVariant && staticConfig.variants?.[enterVariant]['true']\n                ? getSubStyle(\n                    staticConfig.variants?.[enterVariant]['true'],\n                    staticConfig,\n                    theme,\n                    props,\n                    state\n                  ) || pseudos.enterStyle\n                : null || pseudos.enterStyle\n              : null\n\n          const exitStyle =\n            isEntering === false\n              ? exitVariant && staticConfig.variants?.[exitVariant]['true']\n                ? getSubStyle(\n                    staticConfig.variants?.[exitVariant]['true'],\n                    staticConfig,\n                    theme,\n                    props,\n                    state\n                  ) || pseudos.exitStyle\n                : null || pseudos.exitStyle\n              : null\n\n          // if you have hoverStyle={{ scale: 1.1 }} and don't have scale set on the base style\n          // no animation will run! this is really confusing. this will look at all variants,\n          // and fill in base styles if they don't exist. eg:\n          // input:\n          //   base: {}\n          //   hoverStyle: { scale: 2 }\n          //   enterStyle: { x: 100 }\n          // output:\n          //   base: { x: 0, scale: 1 }\n          ensureBaseHasDefaults(\n            style,\n            enterStyle,\n            pseudos.hoverStyle,\n            pseudos.focusStyle,\n            pseudos.pressStyle,\n            pseudos.pressStyle\n          )\n\n          enterStyle && merge(style, enterStyle)\n          state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle)\n          state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle)\n          state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle)\n          exitStyle && merge(style, exitStyle)\n\n          return style\n        },\n        //, delay\n      })\n\n      useIsomorphicLayoutEffect(() => {\n        setStateShallow({\n          animation: res,\n        })\n      }, [res])\n\n      return null\n    },\n    propNames: ['animation'],\n  })\n}\n\nconst defaults = {\n  left: 0,\n  right: 0,\n  top: 0,\n  bottom: 0,\n  opacity: 1,\n  translateX: 0,\n  translateY: 0,\n  skew: 0,\n  skewX: 0,\n  skewY: 0,\n  scale: 1,\n  rotate: '0deg',\n  rotateY: '0deg',\n  rotateX: '0deg',\n}\n\nfunction ensureBaseHasDefaults(base: ViewStyle, ...pseudos: (ViewStyle | null | undefined)[]) {\n  for (const pseudo of pseudos) {\n    if (!pseudo) continue\n    for (const key in pseudo) {\n      const val = pseudo[key]\n      if (key === 'transform') {\n        for (const t of val) {\n          const tkey = Object.keys(t)[0]\n          const defaultVal = defaults[tkey]\n          const tDefaultVal = { [tkey]: defaultVal } as any\n          if (!base.transform) {\n            base.transform = [tDefaultVal]\n          } else {\n            if (!base.transform.find((x) => x[tkey])) {\n              base.transform.push(tDefaultVal)\n            }\n          }\n        }\n      } else {\n        if (!(key in base)) {\n          base[key] = defaults[key]\n        }\n      }\n    }\n  }\n}\n\nfunction merge(base: ViewStyle, next: ViewStyle) {\n  if (!next.transform || !base.transform) {\n    Object.assign(base, next)\n    return\n  }\n  const { transform, ...rest } = next\n  Object.assign(base, rest)\n  for (const t of transform) {\n    const key = Object.keys(t)[0]\n    const existing = base.transform.find((x) => key in x)\n    if (existing) {\n      existing[key] = t[key]\n    } else {\n      base.transform.push(t)\n    }\n  }\n}\n\nfunction loadMediaQueryFeature() {\n  const mediaPropNames = Object.keys(mediaState)\n\n  return createDefinition({\n    Component: (props: any) => {\n      const mediaKeys = mediaPropNames.filter((x) => x in props)\n\n      useIsomorphicLayoutEffect(() => {\n        for (const key of mediaKeys) {\n          addMediaQueryListener(key, props._utils.forceUpdate)\n        }\n        return () => {\n          for (const key of mediaKeys) {\n            removeMediaQueryListener(key, props._utils.forceUpdate)\n          }\n        }\n      }, [mediaKeys.join(',')])\n\n      return null\n    },\n    propNames: mediaPropNames,\n  })\n}\n\n// TODO\n// measureLayout: createDefinition({\n//   Component: (props) => {\n//     console.log('measure', props)\n//     return null\n//   },\n//   propNames: ['onLayout'],\n// }),\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { RefObject } from 'react'\nimport { View, ViewStyle } from 'react-native'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getSubStyle } from '../helpers/getSplitStyles'\nimport {\n  PseudoStyles,\n  SplitStyleState,\n  StaticConfigParsed,\n  TamaguiComponentState,\n  UseAnimationHook,\n  UseAnimationProps,\n} from '../types'\nimport { addMediaQueryListener, mediaState, removeMediaQueryListener } from './useMedia'\n\ntype FeatureDefinition = {\n  isEnabled: (props: any) => boolean\n  Component: any\n}\n\ntype FeatureUtils = {\n  forceUpdate: Function\n  state: SplitStyleState\n  setStateShallow: (next: Partial<TamaguiComponentState>) => void\n  useAnimations?: UseAnimationHook\n  pseudos: PseudoStyles\n  style: ViewStyle | null | undefined\n  staticConfig: StaticConfigParsed\n  theme: any\n  onDidAnimate?: () => void\n  hostRef: RefObject<HTMLElement | View>\n}\n\nconst createDefinition = ({\n  Component,\n  propNames,\n}: {\n  Component: (props: { _utils: FeatureUtils; [key: string]: any }) => void\n  propNames: string[]\n}): FeatureDefinition => ({\n  isEnabled: (props: any) => propNames.some((name) => !!props[name]),\n  Component,\n})\n\nlet featureDefinitions: Record<string, FeatureDefinition> | null = null\n\ntype FeatureKeys = keyof ReturnType<typeof loadFeatures>\n\nexport const useFeatures = (props: any, utils?: FeatureUtils) => {\n  if (!featureDefinitions) {\n    featureDefinitions = loadFeatures()\n  }\n  const elements: JSX.Element[] = []\n  const enabled: { [key in FeatureKeys]?: boolean } = {}\n  for (const name in featureDefinitions) {\n    const { isEnabled, Component } = featureDefinitions[name]\n    if (isEnabled(props) && Component) {\n      enabled[name] = true\n      elements.push(<Component key={name} {...props} _utils={utils} />)\n    }\n  }\n  return {\n    elements,\n    enabled,\n  }\n}\n\nfunction loadFeatures() {\n  return {\n    // loads animations and sets state with the results\n    animation: loadAnimationFeature(),\n\n    // will update the parent whenever media query changes\n    // no need on web, media queries are inserted and run in css\n    mediaQuery: loadMediaQueryFeature(),\n  } as const\n}\n\nfunction loadAnimationFeature() {\n  return createDefinition({\n    Component: ({ _utils, ...props }) => {\n      const {\n        state,\n        useAnimations,\n        pseudos,\n        style: inStyle,\n        setStateShallow,\n        staticConfig,\n        theme,\n        onDidAnimate,\n      } = _utils\n\n      if (!useAnimations) {\n        console.error('no useAnimations hook provided')\n        return null\n      }\n\n      // we always have .animation set\n      const propsWithAnimation = props as UseAnimationProps\n\n      const res = useAnimations(propsWithAnimation, {\n        state,\n        pseudos,\n        onDidAnimate,\n        staticConfig,\n        getStyle({ isEntering, exitVariant, enterVariant } = {}) {\n          // we have to merge such that transforms keys all exist\n          const style = inStyle || {}\n\n          const enterStyle =\n            isEntering === true || state.mounted === false\n              ? enterVariant && staticConfig.variants?.[enterVariant]['true']\n                ? getSubStyle(\n                    staticConfig.variants?.[enterVariant]['true'],\n                    staticConfig,\n                    theme,\n                    props,\n                    state\n                  ) || pseudos.enterStyle\n                : null || pseudos.enterStyle\n              : null\n\n          const exitStyle =\n            isEntering === false\n              ? exitVariant && staticConfig.variants?.[exitVariant]['true']\n                ? getSubStyle(\n                    staticConfig.variants?.[exitVariant]['true'],\n                    staticConfig,\n                    theme,\n                    props,\n                    state\n                  ) || pseudos.exitStyle\n                : null || pseudos.exitStyle\n              : null\n\n          // if you have hoverStyle={{ scale: 1.1 }} and don't have scale set on the base style\n          // no animation will run! this is really confusing. this will look at all variants,\n          // and fill in base styles if they don't exist. eg:\n          // input:\n          //   base: {}\n          //   hoverStyle: { scale: 2 }\n          //   enterStyle: { x: 100 }\n          // output:\n          //   base: { x: 0, scale: 1 }\n          ensureBaseHasDefaults(\n            style,\n            enterStyle,\n            pseudos.hoverStyle,\n            pseudos.focusStyle,\n            pseudos.pressStyle,\n            pseudos.pressStyle\n          )\n\n          enterStyle && merge(style, enterStyle)\n          state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle)\n          state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle)\n          state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle)\n          exitStyle && merge(style, exitStyle)\n\n          return style\n        },\n        //, delay\n      })\n\n      useIsomorphicLayoutEffect(() => {\n        setStateShallow({\n          animation: res,\n        })\n      }, [res])\n\n      return null\n    },\n    propNames: ['animation'],\n  })\n}\n\nconst defaults = {\n  left: 0,\n  right: 0,\n  top: 0,\n  bottom: 0,\n  opacity: 1,\n  translateX: 0,\n  translateY: 0,\n  skew: 0,\n  skewX: 0,\n  skewY: 0,\n  scale: 1,\n  rotate: '0deg',\n  rotateY: '0deg',\n  rotateX: '0deg',\n}\n\nfunction ensureBaseHasDefaults(base: ViewStyle, ...pseudos: (ViewStyle | null | undefined)[]) {\n  for (const pseudo of pseudos) {\n    if (!pseudo) continue\n    for (const key in pseudo) {\n      const val = pseudo[key]\n      if (key === 'transform') {\n        for (const t of val) {\n          const tkey = Object.keys(t)[0]\n          const defaultVal = defaults[tkey]\n          const tDefaultVal = { [tkey]: defaultVal } as any\n          if (!base.transform) {\n            base.transform = [tDefaultVal]\n          } else {\n            if (!base.transform.find((x) => x[tkey])) {\n              base.transform.push(tDefaultVal)\n            }\n          }\n        }\n      } else {\n        if (!(key in base)) {\n          base[key] = defaults[key]\n        }\n      }\n    }\n  }\n}\n\nfunction merge(base: ViewStyle, next: ViewStyle) {\n  if (!next.transform || !base.transform) {\n    Object.assign(base, next)\n    return\n  }\n  const { transform, ...rest } = next\n  Object.assign(base, rest)\n  for (const t of transform) {\n    const key = Object.keys(t)[0]\n    const existing = base.transform.find((x) => key in x)\n    if (existing) {\n      existing[key] = t[key]\n    } else {\n      base.transform.push(t)\n    }\n  }\n}\n\nfunction loadMediaQueryFeature() {\n  const mediaPropNames = Object.keys(mediaState)\n\n  return createDefinition({\n    Component: (props: any) => {\n      const mediaKeys = mediaPropNames.filter((x) => x in props)\n\n      useIsomorphicLayoutEffect(() => {\n        for (const key of mediaKeys) {\n          addMediaQueryListener(key, props._utils.forceUpdate)\n        }\n        return () => {\n          for (const key of mediaKeys) {\n            removeMediaQueryListener(key, props._utils.forceUpdate)\n          }\n        }\n      }, [mediaKeys.join(',')])\n\n      return null\n    },\n    propNames: mediaPropNames,\n  })\n}\n\n// TODO\n// measureLayout: createDefinition({\n//   Component: (props) => {\n//     console.log('measure', props)\n//     return null\n//   },\n//   propNames: ['onLayout'],\n// }),\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/hooks/useTheme.js

@@ -51,14 +51,11 @@ const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceU
       get(_, key) {
         if (!name || key === "__proto__" || typeof key === "symbol") {
           if (key === GetThemeManager) {
-            if (process.env.NODE_ENV === "development") {
-              if (props == null ? void 0 : props.debug) {
-                console.log("did change", { themeName, didChangeTheme, name, componentName }, themeManager == null ? void 0 : themeManager.parentName);
-              }
+            if (process.env.NODE_ENV === "development" && (props == null ? void 0 : props.debug)) {
+              console.log(">>", { themeName, didChangeTheme, name, componentName }, themeManager);
             }
-            if (!didChangeTheme) {
+            if (!didChangeTheme)
               return null;
-            }
             return themeManager;
           }
           return Reflect.get(_, key);
@@ -66,11 +63,6 @@ const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceU
         if (typeof key !== "string" || key === "$typeof") {
           return Reflect.get(_, key);
         }
-        if (process.env.NODE_ENV === "development") {
-          if (key === "__state") {
-            return state.current;
-          }
-        }
         if (key === "name") {
           return name;
         }
@@ -96,10 +88,6 @@ const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceU
           }
           return val;
         }
-        if (process.env.NODE_ENV === "development") {
-          console.log(`No theme value "${String(key)}" in ${name}`);
-        }
-        return Reflect.get(_, key);
       }
     });
   }, [name, theme, className, didChangeTheme]);

package/dist/esm/hooks/useTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useTheme.tsx"],
-  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../conf'\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport { ThemeContext } from '../ThemeContext'\nimport { GetNextThemeProps, ThemeManager, ThemeManagerContext, emptyManager } from '../ThemeManager'\nimport { ThemeName, ThemeObject } from '../types'\nimport { useConstant } from './useConstant'\n\nexport type ThemeProps = {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  reset?: boolean\n  debug?: boolean | 'verbose'\n}\n\ntype UseThemeState = {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useTheme = (\n  themeName?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdate?: any\n): ThemeObject => {\n  const { name, theme, themes, themeManager, className, didChangeTheme } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.debug === 'verbose') {\n      console.log('  \u00BB useTheme', { themeName, componentName, name, className })\n    }\n  }\n\n  const state = useRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = themeManager?.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      themeManager?.track(st.uuid, st.keys)\n    }\n  })\n\n  return useMemo(() => {\n    if (!theme) {\n      if (process.env.NODE_ENV === 'development') {\n        console.warn('No theme', { themeName, theme, componentName, className })\n      }\n      return themes[getConfig().defaultTheme || 'light' || Object.keys(themes)[0]]\n    }\n    return new Proxy(theme, {\n      has(_, key) {\n        if (typeof key === 'string') {\n          if (key[0] === '$') {\n            key = key.slice(1)\n          }\n        }\n        return Reflect.has(theme, key)\n      },\n      get(_, key) {\n        if (!name || key === '__proto__' || typeof key === 'symbol') {\n          // TODO make this pattern better\n          if (key === GetThemeManager) {\n            if (process.env.NODE_ENV === 'development') {\n              if (props?.debug) {\n                // prettier-ignore\n                console.log('did change', { themeName, didChangeTheme, name, componentName }, themeManager?.parentName)\n              }\n            }\n            if (!didChangeTheme) {\n              return null\n            }\n            return themeManager\n          }\n          return Reflect.get(_, key)\n        }\n        if (typeof key !== 'string' || key === '$typeof') {\n          return Reflect.get(_, key)\n        }\n        if (process.env.NODE_ENV === 'development') {\n          if (key === '__state') {\n            return state.current\n          }\n        }\n        if (key === 'name') {\n          return name\n        }\n        if (key === 'className') {\n          return className\n        }\n        if (!themeManager) {\n          console.error('No themeManager')\n          return\n        }\n        // auto convert variables to plain\n        if (key[0] === '$') {\n          key = key.slice(1)\n        }\n        const val = themeManager.getValue(key)\n        if (val) {\n          if (state.current.isRendering) {\n            state.current.keys.add(key)\n            if (process.env.NODE_ENV === 'development') {\n              if (props?.['debug'] === 'verbose') {\n                console.log('  \u00BB tracking theme key', key)\n              }\n            }\n          }\n          return val\n        }\n        // react native debuger uses toJSON\n        if (process.env.NODE_ENV === 'development') {\n          console.log(`No theme value \"${String(key)}\" in ${name}`)\n        }\n        return Reflect.get(_, key)\n      },\n    })\n  }, [name, theme, className, didChangeTheme])\n}\n\nconst GetThemeManager = Symbol('GetThemeManager')\n\nexport const getThemeManagerIfChanged = (theme: any) => {\n  return theme?.[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent?.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    return parent.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [parent])\n\n  return name\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdateProp?: any\n) => {\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const { themes } = useContext(ThemeContext)!\n  const reset = props?.reset || false\n  const getThemeProps: GetNextThemeProps = { name, componentName, themes, reset }\n  const next = parentManager.getNextTheme(getThemeProps, debug)\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n  const themeManager = useConstant<ThemeManager | null>(() => {\n    if (!next) return null\n    return new ThemeManager(next.name, next.theme, parentManager, reset)\n  })\n\n  if (typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      if (next?.name) {\n        themeManager.update(next)\n      }\n      return parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme(getThemeProps, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          forceUpdate()\n        }\n      })\n    }, [themes, name, componentName, debug, next?.name])\n  }\n\n  const didChangeTheme = next && parentManager && next.name !== parentManager.fullName\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    didChangeTheme,\n    themes,\n    themeManager,\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../conf'\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport { ThemeContext } from '../ThemeContext'\nimport { GetNextThemeProps, ThemeManager, ThemeManagerContext, emptyManager } from '../ThemeManager'\nimport { ThemeName, ThemeObject } from '../types'\nimport { useConstant } from './useConstant'\n\nexport type ThemeProps = {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  reset?: boolean\n  debug?: boolean | 'verbose'\n}\n\ntype UseThemeState = {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useTheme = (\n  themeName?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdate?: any\n): ThemeObject => {\n  const { name, theme, themes, themeManager, className, didChangeTheme } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.debug === 'verbose') {\n      console.log('  \u00BB useTheme', { themeName, componentName, name, className })\n    }\n  }\n\n  const state = useRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = themeManager?.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      themeManager?.track(st.uuid, st.keys)\n    }\n  })\n\n  return useMemo(() => {\n    if (!theme) {\n      if (process.env.NODE_ENV === 'development') {\n        console.warn('No theme', { themeName, theme, componentName, className })\n      }\n      return themes[getConfig().defaultTheme || 'light' || Object.keys(themes)[0]]\n    }\n    return new Proxy(theme, {\n      has(_, key) {\n        if (typeof key === 'string') {\n          if (key[0] === '$') {\n            key = key.slice(1)\n          }\n        }\n        return Reflect.has(theme, key)\n      },\n      get(_, key) {\n        if (!name || key === '__proto__' || typeof key === 'symbol') {\n          // TODO make this pattern better\n          if (key === GetThemeManager) {\n            if (process.env.NODE_ENV === 'development' && props?.debug) {\n              console.log('>>', { themeName, didChangeTheme, name, componentName }, themeManager)\n            }\n            if (!didChangeTheme) return null\n            return themeManager\n          }\n          return Reflect.get(_, key)\n        }\n        if (typeof key !== 'string' || key === '$typeof') {\n          return Reflect.get(_, key)\n        }\n        if (key === 'name') {\n          return name\n        }\n        if (key === 'className') {\n          return className\n        }\n        if (!themeManager) {\n          console.error('No themeManager')\n          return\n        }\n        // auto convert variables to plain\n        if (key[0] === '$') {\n          key = key.slice(1)\n        }\n        const val = themeManager.getValue(key)\n        if (val) {\n          if (state.current.isRendering) {\n            state.current.keys.add(key)\n            if (process.env.NODE_ENV === 'development') {\n              if (props?.['debug'] === 'verbose') {\n                console.log('  \u00BB tracking theme key', key)\n              }\n            }\n          }\n          return val\n        }\n      },\n    })\n  }, [name, theme, className, didChangeTheme])\n}\n\nconst GetThemeManager = Symbol('GetThemeManager')\n\nexport const getThemeManagerIfChanged = (theme: any) => {\n  return theme?.[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent?.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    return parent.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [parent])\n\n  return name\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdateProp?: any\n) => {\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const { themes } = useContext(ThemeContext)!\n  const reset = props?.reset || false\n  const getThemeProps: GetNextThemeProps = { name, componentName, themes, reset }\n  const next = parentManager.getNextTheme(getThemeProps, debug)\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n  const themeManager = useConstant<ThemeManager | null>(() => {\n    if (!next) return null\n    return new ThemeManager(next.name, next.theme, parentManager, reset)\n  })\n\n  if (typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      if (next?.name) {\n        themeManager.update(next)\n      }\n      return parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme(getThemeProps, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          forceUpdate()\n        }\n      })\n    }, [themes, name, componentName, debug, next?.name])\n  }\n\n  const didChangeTheme = next && parentManager && next.name !== parentManager.fullName\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    didChangeTheme,\n    themes,\n    themeManager,\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/index.js

@@ -7,6 +7,7 @@ export * from "./createFont";
 export * from "./createTokens";
 export * from "./createVariable";
 export * from "./createVariables";
+export * from "./insertFont";
 export * from "./styled";
 export * from "./types";
 import { RNWTextProps, RNWViewProps } from "./types-rnw";
@@ -14,6 +15,7 @@ import { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } f
 export * from "./constants/constants";
 export * from "./constants/platform";
 export * from "./constants/rnw";
+export * from "./helpers/calc";
 export * from "./helpers/createShallowUpdate";
 export * from "./helpers/getStackSize";
 export * from "./helpers/getVariantExtras";

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './Tamagui'\nexport * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createVariable'\nexport * from './createVariables'\nexport * from './styled'\nexport * from './types'\n// for type portability\nexport { RNWTextProps, RNWViewProps } from './types-rnw'\nexport { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './conf'\n\nexport * from './constants/constants'\nexport * from './constants/platform'\nexport * from './constants/rnw'\n\nexport * from './helpers/createShallowUpdate'\nexport * from './helpers/getStackSize'\nexport * from './helpers/getVariantExtras'\nexport * from './helpers/getExpandedShorthands'\nexport * from './helpers/getSize'\nexport * from './helpers/getSplitStyles'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/getTextSize'\nexport * from './helpers/isObj'\nexport * from './helpers/isTamaguiElement'\nexport * from './helpers/matchMedia'\nexport * from './helpers/themeable'\nexport * from './helpers/withStaticProperties'\n\nexport * from './contexts/ButtonInsideButtonContext'\n\nexport * from './hooks/useConstant'\nexport * from './hooks/useId'\nexport * from './hooks/useIsMounted'\nexport * from './hooks/useIsTouchDevice'\nexport * from './hooks/useMedia'\nexport * from './hooks/usePressable'\nexport * from './hooks/useTheme'\nexport * from './hooks/useUnmountEffect'\n\nexport * from './views/Slot'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport * from './views/TextAncestorContext'\nexport * from './views/Theme'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/ThemeReset'\n\nexport * from '@tamagui/use-force-update'\nexport * from '@tamagui/helpers'\n"],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;",
+  "sourcesContent": ["export * from './Tamagui'\nexport * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createVariable'\nexport * from './createVariables'\nexport * from './insertFont'\nexport * from './styled'\nexport * from './types'\n// for type portability\nexport { RNWTextProps, RNWViewProps } from './types-rnw'\nexport { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './conf'\n\nexport * from './constants/constants'\nexport * from './constants/platform'\nexport * from './constants/rnw'\n\nexport * from './helpers/calc'\nexport * from './helpers/createShallowUpdate'\nexport * from './helpers/getStackSize'\nexport * from './helpers/getVariantExtras'\nexport * from './helpers/getExpandedShorthands'\nexport * from './helpers/getSize'\nexport * from './helpers/getSplitStyles'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/getTextSize'\nexport * from './helpers/isObj'\nexport * from './helpers/isTamaguiElement'\nexport * from './helpers/matchMedia'\nexport * from './helpers/themeable'\nexport * from './helpers/withStaticProperties'\n\nexport * from './contexts/ButtonInsideButtonContext'\n\nexport * from './hooks/useConstant'\nexport * from './hooks/useId'\nexport * from './hooks/useIsMounted'\nexport * from './hooks/useIsTouchDevice'\nexport * from './hooks/useMedia'\nexport * from './hooks/usePressable'\nexport * from './hooks/useTheme'\nexport * from './hooks/useUnmountEffect'\n\nexport * from './views/Slot'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport * from './views/TextAncestorContext'\nexport * from './views/Theme'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/ThemeReset'\n\nexport * from '@tamagui/use-force-update'\nexport * from '@tamagui/helpers'\n"],
+  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;",
   "names": []
 }

package/dist/esm/insertFont.js

@@ -0,0 +1,57 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { setConfigFont } from "./conf";
+import { createFont } from "./createFont";
+import { createVariables } from "./createVariables";
+import { registerCSSVariable } from "./helpers/registerCSSVariable";
+function insertFont(name, fontIn) {
+  const font = createFont(fontIn);
+  const tokened = createVariables(font, name);
+  const parsed = parseFont(tokened);
+  registerFontVariables(parsed);
+  setConfigFont(name, parsed);
+  return parsed;
+}
+__name(insertFont, "insertFont");
+function parseFont(definition) {
+  const parsed = {};
+  for (const attrKey in definition) {
+    const attr = definition[attrKey];
+    if (attrKey === "family") {
+      parsed[attrKey] = attr;
+      continue;
+    }
+    parsed[attrKey] = {};
+    for (const key in attr) {
+      let val = attr[key];
+      if (val.val[0] === "$") {
+        val = val.val;
+      }
+      parsed[attrKey][`$${key}`] = val;
+    }
+  }
+  return parsed;
+}
+__name(parseFont, "parseFont");
+function registerFontVariables(parsedFont) {
+  for (const fkey in parsedFont) {
+    if (fkey === "family") {
+      registerCSSVariable(parsedFont[fkey]);
+    } else {
+      for (const fskey in parsedFont[fkey]) {
+        const fval = parsedFont[fkey][fskey];
+        if (typeof fval === "string") {
+        } else {
+          registerCSSVariable(parsedFont[fkey][fskey]);
+        }
+      }
+    }
+  }
+}
+__name(registerFontVariables, "registerFontVariables");
+export {
+  insertFont,
+  parseFont,
+  registerFontVariables
+};
+//# sourceMappingURL=insertFont.js.map

package/dist/esm/insertFont.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/insertFont.ts"],
+  "sourcesContent": ["import { setConfigFont } from './conf'\nimport { createFont } from './createFont'\nimport { Variable } from './createVariable'\nimport { DeepVariableObject, createVariables } from './createVariables'\nimport { registerCSSVariable } from './helpers/registerCSSVariable'\nimport { GenericFont } from './types'\n\nexport function insertFont<A extends GenericFont>(name: string, fontIn: A): DeepVariableObject<A> {\n  const font = createFont(fontIn)\n  const tokened = createVariables(font, name) as GenericFont\n  const parsed = parseFont(tokened) as DeepVariableObject<A>\n  registerFontVariables(parsed)\n  setConfigFont(name, parsed)\n  return parsed\n}\n\nexport function parseFont<A extends GenericFont>(definition: A): DeepVariableObject<A> {\n  const parsed: any = {}\n  for (const attrKey in definition) {\n    const attr = definition[attrKey]\n    if (attrKey === 'family') {\n      parsed[attrKey] = attr\n      continue\n    }\n    parsed[attrKey] = {}\n    for (const key in attr) {\n      let val = attr[key] as any as Variable\n      // is a theme reference\n      if (val.val[0] === '$') {\n        val = val.val\n      }\n      parsed[attrKey][`$${key}`] = val\n    }\n  }\n  return parsed\n}\n\nexport function registerFontVariables(parsedFont: any) {\n  for (const fkey in parsedFont) {\n    if (fkey === 'family') {\n      registerCSSVariable(parsedFont[fkey])\n    } else {\n      for (const fskey in parsedFont[fkey]) {\n        const fval = parsedFont[fkey][fskey]\n        if (typeof fval === 'string') {\n          // no need to add its a theme reference\n          // tokenRules.add(`--var()`)\n        } else {\n          registerCSSVariable(parsedFont[fkey][fskey])\n        }\n      }\n    }\n  }\n}\n"],
+  "mappings": ";;AAAA;AACA;AAEA;AACA;AAGO,oBAA2C,MAAc,QAAkC;AAChG,QAAM,OAAO,WAAW,MAAM;AAC9B,QAAM,UAAU,gBAAgB,MAAM,IAAI;AAC1C,QAAM,SAAS,UAAU,OAAO;AAChC,wBAAsB,MAAM;AAC5B,gBAAc,MAAM,MAAM;AAC1B,SAAO;AACT;AAPgB;AAST,mBAA0C,YAAsC;AACrF,QAAM,SAAc,CAAC;AACrB,aAAW,WAAW,YAAY;AAChC,UAAM,OAAO,WAAW;AACxB,QAAI,YAAY,UAAU;AACxB,aAAO,WAAW;AAClB;AAAA,IACF;AACA,WAAO,WAAW,CAAC;AACnB,eAAW,OAAO,MAAM;AACtB,UAAI,MAAM,KAAK;AAEf,UAAI,IAAI,IAAI,OAAO,KAAK;AACtB,cAAM,IAAI;AAAA,MACZ;AACA,aAAO,SAAS,IAAI,SAAS;AAAA,IAC/B;AAAA,EACF;AACA,SAAO;AACT;AAnBgB;AAqBT,+BAA+B,YAAiB;AACrD,aAAW,QAAQ,YAAY;AAC7B,QAAI,SAAS,UAAU;AACrB,0BAAoB,WAAW,KAAK;AAAA,IACtC,OAAO;AACL,iBAAW,SAAS,WAAW,OAAO;AACpC,cAAM,OAAO,WAAW,MAAM;AAC9B,YAAI,OAAO,SAAS,UAAU;AAAA,QAG9B,OAAO;AACL,8BAAoB,WAAW,MAAM,MAAM;AAAA,QAC7C;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAhBgB;",
+  "names": []
+}

package/dist/esm/registerCSSVariable.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createCSSVariable } from "./createVariable";
+const registerCSSVariable = /* @__PURE__ */ __name((v) => {
+  tokensValueToVariable.set(v.val, v);
+  const val = `--${createCSSVariable(v.name, false)}:${typeof v.val === "number" ? `${v.val}px` : v.val}`;
+  tokenRules.add(val);
+  return val;
+}, "registerCSSVariable");
+const tokensValueToVariable = /* @__PURE__ */ new Map();
+const tokenRules = /* @__PURE__ */ new Set();
+export {
+  registerCSSVariable,
+  tokenRules,
+  tokensValueToVariable
+};
+//# sourceMappingURL=registerCSSVariable.js.map

package/dist/esm/registerCSSVariable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/registerCSSVariable.ts"],
+  "sourcesContent": ["import { Variable, createCSSVariable } from './createVariable'\n\nexport const registerCSSVariable = (v: Variable) => {\n  tokensValueToVariable.set(v.val, v)\n  const val = `--${createCSSVariable(v.name, false)}:${\n    typeof v.val === 'number' ? `${v.val}px` : v.val\n  }`\n  tokenRules.add(val)\n  return val\n}\n\nexport const tokensValueToVariable = new Map<string, Variable>()\nexport const tokenRules = new Set<string>()\n"],
+  "mappings": ";;AAAA;AAEO,MAAM,sBAAsB,wBAAC,MAAgB;AAClD,wBAAsB,IAAI,EAAE,KAAK,CAAC;AAClC,QAAM,MAAM,KAAK,kBAAkB,EAAE,MAAM,KAAK,KAC9C,OAAO,EAAE,QAAQ,WAAW,GAAG,EAAE,UAAU,EAAE;AAE/C,aAAW,IAAI,GAAG;AAClB,SAAO;AACT,GAPmC;AAS5B,MAAM,wBAAwB,oBAAI,IAAsB;AACxD,MAAM,aAAa,oBAAI,IAAY;",
+  "names": []
+}

package/dist/jsx/conf.js

@@ -8,6 +8,13 @@ const setConfig = /* @__PURE__ */ __name((next) => {
     configListeners.clear();
   }
 }, "setConfig");
+const setConfigFont = /* @__PURE__ */ __name((name, font) => {
+  if (process.env.NODE_ENV === "development") {
+    if (!conf)
+      throw new Error(`Haven't called createTamagui yet`);
+  }
+  Object.assign(conf.fonts, { [name]: font });
+}, "setConfigFont");
 const getHasConfigured = /* @__PURE__ */ __name(() => !!conf, "getHasConfigured");
 const getConfig = /* @__PURE__ */ __name(() => conf, "getConfig");
 const getTokens = /* @__PURE__ */ __name(() => conf.tokensParsed, "getTokens");
@@ -27,5 +34,6 @@ export {
   getThemes,
   getTokens,
   onConfiguredOnce,
-  setConfig
+  setConfig,
+  setConfigFont
 };

package/dist/jsx/createComponent.js

@@ -13,12 +13,7 @@ import React, {
   useRef,
   useState
 } from "react";
-import {
-  StyleSheet,
-  Text,
-  TouchableWithoutFeedback,
-  View
-} from "react-native";
+import { StyleSheet, Text, TouchableWithoutFeedback, View } from "react-native";
 import { onConfiguredOnce } from "./conf";
 import { stackDefaultStyles } from "./constants/constants";
 import { isWeb, useIsomorphicLayoutEffect } from "./constants/platform";
@@ -130,12 +125,13 @@ function createComponent(configIn, ParentComponent) {
     const isAnimated = !!(useAnimations && props.animation);
     const hasEnterStyle = !!props.enterStyle;
     const hostRef = useRef(null);
+    const animationFeatureStylesIn = props.animation ? { ...defaultNativeStyle, ...style } : null;
     const features = useFeatures(props, {
       forceUpdate,
       setStateShallow,
       useAnimations,
       state,
-      style: props.animation ? { ...defaultNativeStyle, ...style } : null,
+      style: animationFeatureStylesIn,
       pseudos,
       staticConfig,
       theme,
@@ -153,6 +149,7 @@ function createComponent(configIn, ParentComponent) {
       onHoverIn,
       onHoverOut,
       space: spaceProp,
+      spaceDirection: _spaceDirection,
       disabled: disabledProp,
       onMouseDown,
       onMouseEnter,
@@ -535,7 +532,7 @@ function createComponent(configIn, ParentComponent) {
     }
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
-        console.log("  \xBB ", { propsIn: { ...props }, propsOut: { ...viewProps }, state, splitStyles, animationStyles, isStringElement, classNamesIn: (_b = props.className) == null ? void 0 : _b.split(" "), classNamesOut: (_c = viewProps.className) == null ? void 0 : _c.split(" "), events, shouldAttach, ViewComponent: elementType, viewProps, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, initialSplitStyles, ...typeof window !== "undefined" ? { theme, themeState: theme.__state, themeClassName: theme.className, staticConfig, tamaguiConfig } : null });
+        console.log("  \xBB ", { propsIn: { ...props }, propsOut: { ...viewProps }, state, splitStyles, animationStyles, isStringElement, classNamesIn: (_b = props.className) == null ? void 0 : _b.split(" "), classNamesOut: (_c = viewProps.className) == null ? void 0 : _c.split(" "), events, shouldAttach, ViewComponent: elementType, viewProps, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, initialSplitStyles, ...typeof window !== "undefined" ? { theme, themeClassName: theme.className, staticConfig, tamaguiConfig } : null });
       }
     }
     if (features.elements.length) {