@tamagui/core 1.0.0-alpha.9 → 1.0.0-beta.0

package/dist/{helpers → esm/helpers}/matchMedia.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/helpers/matchMedia.ts"],
+  "sources": ["../../../src/helpers/matchMedia.ts"],
   "sourcesContent": ["export const matchMedia =\n  (typeof window !== 'undefined' && window.matchMedia) ||\n  (function matchMediaFallback(query: string) {\n    return {\n      addListener() {\n        if (\n          process.env.NODE_ENV === 'development' &&\n          !process.env.IS_STATIC &&\n          process.env.TAMAGUI_TARGET !== 'web'\n        ) {\n          console.log('warning: matchMedia not loading! Is native picking up .native.js files?')\n        }\n      },\n      removeListener() {},\n      matches: false,\n    }\n  } as any)\n"],
-  "mappings": ";;AAAO,MAAM,aACV,OAAO,WAAW,eAAe,OAAO,cACxC,mDAA4B,OAAe;AAC1C,SAAO;AAAA,IACL,cAAc;AACZ,UACE,QAAQ,IAAI,aAAa,iBACzB,CAAC,QAAQ,IAAI,aACb,QAAQ,IAAI,mBAAmB,OAC/B;AACA,gBAAQ,IAAI;AAAA;AAAA;AAAA,IAGhB,iBAAiB;AAAA;AAAA,IACjB,SAAS;AAAA;AAAA,GAZZ;",
+  "mappings": ";;AAAO,MAAM,aACV,OAAO,WAAW,eAAe,OAAO,cACxC,mDAA4B,OAAe;AAC1C,SAAO;AAAA,IACL,cAAc;AACZ,UACE,QAAQ,IAAI,aAAa,iBACzB,CAAC,QAAQ,IAAI,aACb,QAAQ,IAAI,mBAAmB,OAC/B;AACA,gBAAQ,IAAI,yEAAyE;AAAA,MACvF;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,IAAC;AAAA,IAClB,SAAS;AAAA,EACX;AACF,GAdC;",
   "names": []
 }

package/dist/{helpers → esm/helpers}/matchMedia.native.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/helpers/matchMedia.native.ts"],
+  "sources": ["../../../src/helpers/matchMedia.native.ts"],
   "sourcesContent": ["import MediaQueryList from '@expo/match-media/build/MediaQueryList.js'\n\nexport const matchMedia = (media: string) => new MediaQueryList(media)\n\n// @ts-ignore\nglobalThis['matchMedia'] = matchMedia\n"],
-  "mappings": ";;AAAA;AAEO,MAAM,aAAa,wBAAC,UAAkB,IAAI,eAAe,QAAtC;AAG1B,WAAW,gBAAgB;",
+  "mappings": ";;AAAA;AAEO,MAAM,aAAa,wBAAC,UAAkB,IAAI,eAAe,KAAK,GAA3C;AAG1B,WAAW,gBAAgB;",
   "names": []
 }

package/dist/esm/helpers/proxyThemeVariables.js

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function proxyThemeVariables(obj) {
+  return new Proxy(obj, {
+    has(target, key) {
+      return Reflect.has(target, removeStarting$(key));
+    },
+    get(target, key) {
+      return Reflect.get(target, removeStarting$(key));
+    }
+  });
+}
+__name(proxyThemeVariables, "proxyThemeVariables");
+const removeStarting$ = /* @__PURE__ */ __name((str) => typeof str === "string" && str[0] === "$" ? str.slice(1) : str, "removeStarting$");
+export {
+  proxyThemeVariables
+};
+//# sourceMappingURL=proxyThemeVariables.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/proxyThemeVariables.tsx"],
+  "sourcesContent": ["export function proxyThemeVariables<A extends Object>(obj: A): A {\n  return new Proxy<A>(obj, {\n    has(target, key) {\n      return Reflect.has(target, removeStarting$(key))\n    },\n    get(target, key) {\n      return Reflect.get(target, removeStarting$(key))\n    },\n  })\n}\n\nconst removeStarting$ = (str: string | symbol) =>\n  typeof str === 'string' && str[0] === '$' ? str.slice(1) : str\n"],
+  "mappings": ";;AAAO,6BAA+C,KAAW;AAC/D,SAAO,IAAI,MAAS,KAAK;AAAA,IACvB,IAAI,QAAQ,KAAK;AACf,aAAO,QAAQ,IAAI,QAAQ,gBAAgB,GAAG,CAAC;AAAA,IACjD;AAAA,IACA,IAAI,QAAQ,KAAK;AACf,aAAO,QAAQ,IAAI,QAAQ,gBAAgB,GAAG,CAAC;AAAA,IACjD;AAAA,EACF,CAAC;AACH;AATgB;AAWhB,MAAM,kBAAkB,wBAAC,QACvB,OAAO,QAAQ,YAAY,IAAI,OAAO,MAAM,IAAI,MAAM,CAAC,IAAI,KADrC;",
+  "names": []
+}

package/dist/{helpers → esm/helpers}/themeable.js

@@ -3,23 +3,25 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import React, { forwardRef } from "react";
 import { Theme } from "../views/Theme";
 import { ThemeInverse } from "../views/ThemeInverse";
-const themeable = /* @__PURE__ */ __name(function graphql(component) {
-  const withThemeComponent = forwardRef(/* @__PURE__ */ __name(function WithTheme({ themeInverse, ...rest }, ref) {
-    const el = React.createElement(component, { ...rest, ref });
+function themeable(component, opts) {
+  const withThemeComponent = forwardRef(/* @__PURE__ */ __name(function WithTheme({ themeInverse, theme, ...rest }, ref) {
+    const element = React.createElement(component, { ...rest, ref });
     if (themeInverse) {
-      return /* @__PURE__ */ React.createElement(ThemeInverse, null, el);
+      return /* @__PURE__ */ React.createElement(ThemeInverse, null, element);
     }
-    if (rest.theme) {
+    if (theme || opts) {
       return /* @__PURE__ */ React.createElement(Theme, {
-        name: rest.theme || null
-      }, el);
+        componentName: opts == null ? void 0 : opts.componentName,
+        name: theme || null
+      }, element);
     }
-    return el;
+    return element;
   }, "WithTheme"));
   const withTheme = withThemeComponent;
-  withTheme.displayName = `Themed(${component?.displayName || component?.name || "Anonymous"})`;
+  withTheme.displayName = `Themed(${(component == null ? void 0 : component.displayName) || (component == null ? void 0 : component.name) || "Anonymous"})`;
   return withTheme;
-}, "graphql");
+}
+__name(themeable, "themeable");
 export {
   themeable
 };

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/themeable.tsx"],
+  "sourcesContent": ["import React, { forwardRef } from 'react'\n\nimport { ThemeName } from '../types'\nimport { Theme } from '../views/Theme'\nimport { ThemeInverse } from '../views/ThemeInverse'\n\nexport type ThemeableProps = {\n  theme?: ThemeName | string | null\n  themeInverse?: boolean\n}\n\nexport function themeable<Component extends (props: any) => any>(\n  component: Component,\n  opts?: { componentName?: string }\n) {\n  const withThemeComponent = forwardRef(function WithTheme(\n    { themeInverse, theme, ...rest }: any,\n    ref\n  ) {\n    const element = React.createElement(component, { ...rest, ref } as any)\n    if (themeInverse) {\n      return <ThemeInverse>{element}</ThemeInverse>\n    }\n    if (theme || opts) {\n      return (\n        <Theme componentName={opts?.componentName} name={(theme as any) || null}>\n          {element}\n        </Theme>\n      )\n    }\n    return element\n  })\n\n  const withTheme: any = withThemeComponent\n  withTheme.displayName = `Themed(${\n    (component as any)?.displayName || (component as any)?.name || 'Anonymous'\n  })`\n\n  return withTheme as Component extends (props: infer P) => infer R\n    ? (\n        props: Omit<P, 'theme' | 'themeInverse'> & {\n          theme?: ThemeName | null\n          themeInverse?: boolean\n        }\n      ) => R\n    : unknown\n}\n"],
+  "mappings": ";;AAAA;AAGA;AACA;AAOO,mBACL,WACA,MACA;AACA,QAAM,qBAAqB,WAAW,0CACpC,EAAE,cAAc,UAAU,QAC1B,KACA;AACA,UAAM,UAAU,MAAM,cAAc,WAAW,KAAK,MAAM,IAAI,CAAQ;AACtE,QAAI,cAAc;AAChB,aAAO,oCAAC,oBAAc,OAAQ;AAAA,IAChC;AACA,QAAI,SAAS,MAAM;AACjB,aACE,oCAAC;AAAA,QAAM,eAAe,6BAAM;AAAA,QAAe,MAAO,SAAiB;AAAA,SAChE,OACH;AAAA,IAEJ;AACA,WAAO;AAAA,EACT,GAhBsC,YAgBrC;AAED,QAAM,YAAiB;AACvB,YAAU,cAAc,UACrB,wCAAmB,gBAAgB,wCAAmB,SAAQ;AAGjE,SAAO;AAQT;AAnCgB;",
+  "names": []
+}

package/dist/esm/helpers/validate.js

@@ -0,0 +1,76 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const { default: ow } = require("@tamagui/ow/dev-only");
+let Config;
+let Tokens;
+let FontRequired;
+let FontOptional;
+const validateConfig = /* @__PURE__ */ __name((conf) => {
+  if (!conf) {
+    console.warn("no conf?");
+    return;
+  }
+  try {
+    ow(conf, Config);
+  } catch (err) {
+    console.warn("Given config:\n", JSON.stringify(conf, null, 2), err);
+  }
+}, "validateConfig");
+const validateTokens = /* @__PURE__ */ __name((tokens) => {
+  try {
+    ow(tokens, Tokens);
+  } catch (err) {
+    console.warn("Given tokens:\n", JSON.stringify(tokens, null, 2), err);
+  }
+}, "validateTokens");
+const validateFont = /* @__PURE__ */ __name((font) => {
+  try {
+    const { style, transform, color, ...required } = font;
+    ow(required, FontRequired);
+    ow({ style, transform, color }, FontOptional);
+  } catch (err) {
+    console.warn("Given font:\n", JSON.stringify(font, null, 2), err);
+  }
+}, "validateFont");
+if (process.env.NODE_ENV === "development") {
+  const fontReq = {
+    family: ow.string,
+    size: ow.object.nonEmpty.valuesOfType(ow.number),
+    lineHeight: ow.object.nonEmpty.valuesOfType(ow.number),
+    weight: ow.object.nonEmpty.valuesOfType(ow.string),
+    letterSpacing: ow.object.nonEmpty.valuesOfType(ow.number)
+  };
+  const fontOpt = {
+    style: ow.optional.object.valuesOfType(ow.string),
+    transform: ow.optional.object.valuesOfType(ow.string),
+    color: ow.optional.object.valuesOfType(ow.string)
+  };
+  Config = ow.object.exactShape({
+    defaultTheme: ow.optional.string,
+    disableRootThemeClass: ow.optional.boolean,
+    shorthands: ow.optional.object.valuesOfType(ow.string),
+    themes: ow.object.valuesOfType(ow.object),
+    tokens: ow.object.valuesOfType(ow.object),
+    media: ow.object.valuesOfType(ow.object),
+    animations: ow.object.valuesOfType(ow.object),
+    fonts: ow.object.valuesOfType(ow.object.partialShape({
+      ...fontReq,
+      ...fontOpt
+    }))
+  });
+  FontRequired = ow.object.exactShape(fontReq);
+  FontOptional = ow.object.partialShape(fontOpt);
+  Tokens = ow.object.exactShape({
+    size: ow.object.nonEmpty.valuesOfType(ow.number),
+    space: ow.object.nonEmpty.valuesOfType(ow.number),
+    zIndex: ow.object.nonEmpty.valuesOfType(ow.number),
+    radius: ow.object.nonEmpty.valuesOfType(ow.number),
+    color: ow.object.nonEmpty.valuesOfType(ow.string)
+  });
+}
+export {
+  validateConfig,
+  validateFont,
+  validateTokens
+};
+//# sourceMappingURL=validate.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/validate.ts"],
+  "sourcesContent": ["// published a patched version that works on native\n// @ts-ignore\nconst { default: ow } = require('@tamagui/ow/dev-only')\n\nlet Config: any\nlet Tokens: any\nlet FontRequired: any\nlet FontOptional: any\n\nexport const validateConfig = (conf: any) => {\n  if (!conf) {\n    console.warn('no conf?')\n    return\n  }\n  try {\n    ow(conf, Config)\n  } catch (err: any) {\n    console.warn('Given config:\\n', JSON.stringify(conf, null, 2), err)\n  }\n}\n\nexport const validateTokens = (tokens: any) => {\n  try {\n    ow(tokens, Tokens)\n  } catch (err: any) {\n    console.warn('Given tokens:\\n', JSON.stringify(tokens, null, 2), err)\n  }\n}\n\nexport const validateFont = (font: any) => {\n  try {\n    const { style, transform, color, ...required } = font\n    ow(required, FontRequired)\n    ow({ style, transform, color }, FontOptional)\n  } catch (err: any) {\n    console.warn('Given font:\\n', JSON.stringify(font, null, 2), err)\n  }\n}\n\nif (process.env.NODE_ENV === 'development') {\n  const fontReq = {\n    family: ow.string,\n    size: ow.object.nonEmpty.valuesOfType(ow.number),\n    lineHeight: ow.object.nonEmpty.valuesOfType(ow.number),\n    weight: ow.object.nonEmpty.valuesOfType(ow.string),\n    letterSpacing: ow.object.nonEmpty.valuesOfType(ow.number),\n  }\n  const fontOpt = {\n    style: ow.optional.object.valuesOfType(ow.string),\n    transform: ow.optional.object.valuesOfType(ow.string),\n    color: ow.optional.object.valuesOfType(ow.string),\n  }\n\n  Config = ow.object.exactShape({\n    defaultTheme: ow.optional.string,\n    disableRootThemeClass: ow.optional.boolean,\n    shorthands: ow.optional.object.valuesOfType(ow.string),\n    themes: ow.object.valuesOfType(ow.object),\n    tokens: ow.object.valuesOfType(ow.object),\n    media: ow.object.valuesOfType(ow.object),\n    animations: ow.object.valuesOfType(ow.object),\n    fonts: ow.object.valuesOfType(\n      ow.object.partialShape({\n        ...fontReq,\n        ...fontOpt,\n      })\n    ),\n  })\n\n  FontRequired = ow.object.exactShape(fontReq)\n  FontOptional = ow.object.partialShape(fontOpt)\n\n  Tokens = ow.object.exactShape({\n    size: ow.object.nonEmpty.valuesOfType(ow.number),\n    space: ow.object.nonEmpty.valuesOfType(ow.number),\n    zIndex: ow.object.nonEmpty.valuesOfType(ow.number),\n    radius: ow.object.nonEmpty.valuesOfType(ow.number),\n    color: ow.object.nonEmpty.valuesOfType(ow.string),\n  })\n}\n"],
+  "mappings": ";;AAEA,MAAM,EAAE,SAAS,OAAO,QAAQ,sBAAsB;AAEtD,IAAI;AACJ,IAAI;AACJ,IAAI;AACJ,IAAI;AAEG,MAAM,iBAAiB,wBAAC,SAAc;AAC3C,MAAI,CAAC,MAAM;AACT,YAAQ,KAAK,UAAU;AACvB;AAAA,EACF;AACA,MAAI;AACF,OAAG,MAAM,MAAM;AAAA,EACjB,SAAS,KAAP;AACA,YAAQ,KAAK,mBAAmB,KAAK,UAAU,MAAM,MAAM,CAAC,GAAG,GAAG;AAAA,EACpE;AACF,GAV8B;AAYvB,MAAM,iBAAiB,wBAAC,WAAgB;AAC7C,MAAI;AACF,OAAG,QAAQ,MAAM;AAAA,EACnB,SAAS,KAAP;AACA,YAAQ,KAAK,mBAAmB,KAAK,UAAU,QAAQ,MAAM,CAAC,GAAG,GAAG;AAAA,EACtE;AACF,GAN8B;AAQvB,MAAM,eAAe,wBAAC,SAAc;AACzC,MAAI;AACF,UAAM,EAAE,OAAO,WAAW,UAAU,aAAa;AACjD,OAAG,UAAU,YAAY;AACzB,OAAG,EAAE,OAAO,WAAW,MAAM,GAAG,YAAY;AAAA,EAC9C,SAAS,KAAP;AACA,YAAQ,KAAK,iBAAiB,KAAK,UAAU,MAAM,MAAM,CAAC,GAAG,GAAG;AAAA,EAClE;AACF,GAR4B;AAU5B,IAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAM,UAAU;AAAA,IACd,QAAQ,GAAG;AAAA,IACX,MAAM,GAAG,OAAO,SAAS,aAAa,GAAG,MAAM;AAAA,IAC/C,YAAY,GAAG,OAAO,SAAS,aAAa,GAAG,MAAM;AAAA,IACrD,QAAQ,GAAG,OAAO,SAAS,aAAa,GAAG,MAAM;AAAA,IACjD,eAAe,GAAG,OAAO,SAAS,aAAa,GAAG,MAAM;AAAA,EAC1D;AACA,QAAM,UAAU;AAAA,IACd,OAAO,GAAG,SAAS,OAAO,aAAa,GAAG,MAAM;AAAA,IAChD,WAAW,GAAG,SAAS,OAAO,aAAa,GAAG,MAAM;AAAA,IACpD,OAAO,GAAG,SAAS,OAAO,aAAa,GAAG,MAAM;AAAA,EAClD;AAEA,WAAS,GAAG,OAAO,WAAW;AAAA,IAC5B,cAAc,GAAG,SAAS;AAAA,IAC1B,uBAAuB,GAAG,SAAS;AAAA,IACnC,YAAY,GAAG,SAAS,OAAO,aAAa,GAAG,MAAM;AAAA,IACrD,QAAQ,GAAG,OAAO,aAAa,GAAG,MAAM;AAAA,IACxC,QAAQ,GAAG,OAAO,aAAa,GAAG,MAAM;AAAA,IACxC,OAAO,GAAG,OAAO,aAAa,GAAG,MAAM;AAAA,IACvC,YAAY,GAAG,OAAO,aAAa,GAAG,MAAM;AAAA,IAC5C,OAAO,GAAG,OAAO,aACf,GAAG,OAAO,aAAa;AAAA,SAClB;AAAA,SACA;AAAA,IACL,CAAC,CACH;AAAA,EACF,CAAC;AAED,iBAAe,GAAG,OAAO,WAAW,OAAO;AAC3C,iBAAe,GAAG,OAAO,aAAa,OAAO;AAE7C,WAAS,GAAG,OAAO,WAAW;AAAA,IAC5B,MAAM,GAAG,OAAO,SAAS,aAAa,GAAG,MAAM;AAAA,IAC/C,OAAO,GAAG,OAAO,SAAS,aAAa,GAAG,MAAM;AAAA,IAChD,QAAQ,GAAG,OAAO,SAAS,aAAa,GAAG,MAAM;AAAA,IACjD,QAAQ,GAAG,OAAO,SAAS,aAAa,GAAG,MAAM;AAAA,IACjD,OAAO,GAAG,OAAO,SAAS,aAAa,GAAG,MAAM;AAAA,EAClD,CAAC;AACH;",
+  "names": []
+}

package/dist/esm/helpers/withStaticProperties.js

@@ -0,0 +1,10 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const withStaticProperties = /* @__PURE__ */ __name(function(component, staticProps) {
+  Object.assign(component, staticProps);
+  return component;
+}, "withStaticProperties");
+export {
+  withStaticProperties
+};
+//# sourceMappingURL=withStaticProperties.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/withStaticProperties.tsx"],
+  "sourcesContent": ["export const withStaticProperties = function <A extends Function, B>(\n  component: A,\n  staticProps: B\n): A & B {\n  Object.assign(component, staticProps)\n  return component as any\n}\n"],
+  "mappings": ";;AAAO,MAAM,uBAAuB,gCAClC,WACA,aACO;AACP,SAAO,OAAO,WAAW,WAAW;AACpC,SAAO;AACT,GANoC;",
+  "names": []
+}

package/dist/esm/helpers/wrapThemeManagerContext.js

@@ -0,0 +1,14 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import React from "react";
+import { ThemeManagerContext } from "../ThemeManager";
+function wrapThemeManagerContext(children, themeManager) {
+  return themeManager ? /* @__PURE__ */ React.createElement(ThemeManagerContext.Provider, {
+    value: themeManager
+  }, children) : children;
+}
+__name(wrapThemeManagerContext, "wrapThemeManagerContext");
+export {
+  wrapThemeManagerContext
+};
+//# sourceMappingURL=wrapThemeManagerContext.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/wrapThemeManagerContext.tsx"],
+  "sourcesContent": ["import React from 'react'\n\nimport { ThemeManager, ThemeManagerContext } from '../ThemeManager'\n\nexport function wrapThemeManagerContext(children: any, themeManager?: ThemeManager | null) {\n  return themeManager ? (\n    <ThemeManagerContext.Provider value={themeManager}>{children}</ThemeManagerContext.Provider>\n  ) : (\n    children\n  )\n}\n"],
+  "mappings": ";;AAAA;AAEA;AAEO,iCAAiC,UAAe,cAAoC;AACzF,SAAO,eACL,oCAAC,oBAAoB,UAApB;AAAA,IAA6B,OAAO;AAAA,KAAe,QAAS,IAE7D;AAEJ;AANgB;",
+  "names": []
+}

package/dist/{hooks → esm/hooks}/useConstant.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/hooks/useConstant.tsx"],
+  "sources": ["../../../src/hooks/useConstant.tsx"],
   "sourcesContent": ["import { useRef } from 'react'\n\ntype ResultBox<T> = { v: T }\nexport function useConstant<T>(fn: () => T): T {\n  const ref = useRef<ResultBox<T>>()\n  if (!ref.current) {\n    ref.current = { v: fn() }\n  }\n  return ref.current.v\n}\n"],
-  "mappings": ";;AAAA;AAGO,qBAAwB,IAAgB;AAC7C,QAAM,MAAM;AACZ,MAAI,CAAC,IAAI,SAAS;AAChB,QAAI,UAAU,EAAE,GAAG;AAAA;AAErB,SAAO,IAAI,QAAQ;AAAA;AALL;",
+  "mappings": ";;AAAA;AAGO,qBAAwB,IAAgB;AAC7C,QAAM,MAAM,OAAqB;AACjC,MAAI,CAAC,IAAI,SAAS;AAChB,QAAI,UAAU,EAAE,GAAG,GAAG,EAAE;AAAA,EAC1B;AACA,SAAO,IAAI,QAAQ;AACrB;AANgB;",
   "names": []
 }

package/dist/esm/hooks/useFeatures.js

@@ -0,0 +1,173 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import React from "react";
+import { useIsomorphicLayoutEffect } from "../constants/platform";
+import { getSubStyle } from "../helpers/getSplitStyles";
+import { addMediaQueryListener, mediaState, removeMediaQueryListener } from "./useMedia";
+const createDefinition = /* @__PURE__ */ __name(({
+  Component,
+  propNames
+}) => ({
+  isEnabled: (props) => propNames.some((name) => !!props[name]),
+  Component
+}), "createDefinition");
+let featureDefinitions = null;
+const useFeatures = /* @__PURE__ */ __name((props, utils) => {
+  if (!featureDefinitions) {
+    featureDefinitions = loadFeatures();
+  }
+  const features = [];
+  for (const name in featureDefinitions) {
+    const { isEnabled, Component } = featureDefinitions[name];
+    if (isEnabled(props) && Component) {
+      features.push(/* @__PURE__ */ React.createElement(Component, {
+        key: name,
+        ...props,
+        _utils: utils
+      }));
+    }
+  }
+  return features;
+}, "useFeatures");
+function loadFeatures() {
+  return {
+    animation: loadAnimationFeature(),
+    mediaQuery: loadMediaQueryFeature()
+  };
+}
+__name(loadFeatures, "loadFeatures");
+function loadAnimationFeature() {
+  return createDefinition({
+    Component: ({ _utils, ...props }) => {
+      const {
+        state,
+        useAnimations,
+        pseudos,
+        style: inStyle,
+        setStateShallow,
+        staticConfig,
+        theme,
+        onDidAnimate
+      } = _utils;
+      if (!useAnimations) {
+        console.error("no useAnimations hook provided");
+        return null;
+      }
+      const propsWithAnimation = props;
+      const res = useAnimations(propsWithAnimation, {
+        state,
+        pseudos,
+        onDidAnimate,
+        staticConfig,
+        getStyle({ isEntering, exitVariant, enterVariant } = {}) {
+          var _a, _b, _c, _d;
+          const style = inStyle || {};
+          const enterStyle = isEntering === true || state.mounted === false ? enterVariant && ((_a = staticConfig.variants) == null ? void 0 : _a[enterVariant]["true"]) ? getSubStyle((_b = staticConfig.variants) == null ? void 0 : _b[enterVariant]["true"], staticConfig, theme, props, state) || pseudos.enterStyle : pseudos.enterStyle : null;
+          const exitStyle = isEntering === false ? exitVariant && ((_c = staticConfig.variants) == null ? void 0 : _c[exitVariant]["true"]) ? getSubStyle((_d = staticConfig.variants) == null ? void 0 : _d[exitVariant]["true"], staticConfig, theme, props, state) || pseudos.exitStyle : pseudos.exitStyle : null;
+          ensureBaseHasDefaults(style, enterStyle, pseudos.hoverStyle, pseudos.focusStyle, pseudos.pressStyle, pseudos.pressStyle);
+          enterStyle && merge(style, enterStyle);
+          state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle);
+          state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle);
+          state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle);
+          exitStyle && merge(style, exitStyle);
+          return style;
+        }
+      });
+      useIsomorphicLayoutEffect(() => {
+        setStateShallow({
+          animation: res
+        });
+      }, [res]);
+      return null;
+    },
+    propNames: ["animation"]
+  });
+}
+__name(loadAnimationFeature, "loadAnimationFeature");
+const defaults = {
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  opacity: 1,
+  translateX: 0,
+  translateY: 0,
+  skew: 0,
+  skewX: 0,
+  skewY: 0,
+  scale: 1,
+  rotate: "0deg",
+  rotateY: "0deg",
+  rotateX: "0deg"
+};
+function ensureBaseHasDefaults(base, ...pseudos) {
+  for (const pseudo of pseudos) {
+    if (!pseudo)
+      continue;
+    for (const key in pseudo) {
+      const val = pseudo[key];
+      if (key === "transform") {
+        for (const t of val) {
+          const tkey = Object.keys(t)[0];
+          const defaultVal = defaults[tkey];
+          const tDefaultVal = { [tkey]: defaultVal };
+          if (!base.transform) {
+            base.transform = [tDefaultVal];
+          } else {
+            if (!base.transform.find((x) => x[tkey])) {
+              base.transform.push(tDefaultVal);
+            }
+          }
+        }
+      } else {
+        if (!(key in base)) {
+          base[key] = defaults[key];
+        }
+      }
+    }
+  }
+}
+__name(ensureBaseHasDefaults, "ensureBaseHasDefaults");
+function merge(base, next) {
+  if (!next.transform || !base.transform) {
+    Object.assign(base, next);
+    return;
+  }
+  const { transform, ...rest } = next;
+  Object.assign(base, rest);
+  for (const t of transform) {
+    const key = Object.keys(t)[0];
+    const existing = base.transform.find((x) => key in x);
+    if (existing) {
+      existing[key] = t[key];
+    } else {
+      base.transform.push(t);
+    }
+  }
+}
+__name(merge, "merge");
+function loadMediaQueryFeature() {
+  const mediaPropNames = Object.keys(mediaState);
+  return createDefinition({
+    Component: (props) => {
+      const keys = mediaPropNames.filter((x) => x in props);
+      useIsomorphicLayoutEffect(() => {
+        for (const key of keys) {
+          addMediaQueryListener(key, props._utils.forceUpdate);
+        }
+        return () => {
+          for (const key of keys) {
+            removeMediaQueryListener(key, props._utils.forceUpdate);
+          }
+        };
+      }, [keys.join(",")]);
+      return null;
+    },
+    propNames: mediaPropNames
+  });
+}
+__name(loadMediaQueryFeature, "loadMediaQueryFeature");
+export {
+  useFeatures
+};
+//# sourceMappingURL=useFeatures.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useFeatures.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { ViewStyle } from 'react-native'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getSubStyle } from '../helpers/getSplitStyles'\nimport { PseudoStyles, SplitStyleState } from '../types'\nimport {\n  StaticConfig,\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}\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\nexport const useFeatures = (props: any, utils?: FeatureUtils) => {\n  if (!featureDefinitions) {\n    featureDefinitions = loadFeatures()\n  }\n  const features: JSX.Element[] = []\n  for (const name in featureDefinitions) {\n    const { isEnabled, Component } = featureDefinitions[name]\n    if (isEnabled(props) && Component) {\n      features.push(<Component key={name} {...props} _utils={utils} />)\n    }\n  }\n  return features\n}\n\nfunction loadFeatures(): Record<string, FeatureDefinition> {\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  }\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 keys = mediaPropNames.filter((x) => x in props)\n\n      useIsomorphicLayoutEffect(() => {\n        for (const key of keys) {\n          addMediaQueryListener(key, props._utils.forceUpdate)\n        }\n        return () => {\n          for (const key of keys) {\n            removeMediaQueryListener(key, props._utils.forceUpdate)\n          }\n        }\n      }, [keys.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/useIsMounted.js

@@ -0,0 +1,19 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useIsomorphicLayoutEffect } from "@tamagui/core";
+import { useRef } from "react";
+function useIsMounted() {
+  const isMounted = useRef(false);
+  useIsomorphicLayoutEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+  return isMounted;
+}
+__name(useIsMounted, "useIsMounted");
+export {
+  useIsMounted
+};
+//# sourceMappingURL=useIsMounted.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useIsMounted.ts"],
+  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/core'\nimport { useRef } from 'react'\n\nexport function useIsMounted() {\n  const isMounted = useRef(false)\n\n  useIsomorphicLayoutEffect(() => {\n    isMounted.current = true\n\n    return () => {\n      isMounted.current = false\n    }\n  }, [])\n\n  return isMounted\n}\n"],
+  "mappings": ";;AAAA;AACA;AAEO,wBAAwB;AAC7B,QAAM,YAAY,OAAO,KAAK;AAE9B,4BAA0B,MAAM;AAC9B,cAAU,UAAU;AAEpB,WAAO,MAAM;AACX,gBAAU,UAAU;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;AAZgB;",
+  "names": []
+}

package/dist/esm/hooks/useIsTouchDevice.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useEffect, useState } from "react";
+import { isTouchDevice } from "../constants/platform";
+const useIsTouchDevice = /* @__PURE__ */ __name(() => {
+  const [touchOnly, setTouchOnly] = useState(false);
+  if (isTouchDevice) {
+    useEffect(() => {
+      setTouchOnly(true);
+    }, []);
+  }
+  return touchOnly;
+}, "useIsTouchDevice");
+export {
+  useIsTouchDevice
+};
+//# sourceMappingURL=useIsTouchDevice.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useIsTouchDevice.tsx"],
+  "sourcesContent": ["import { useEffect, useState } from 'react'\n\nimport { isTouchDevice } from '../constants/platform'\n\n// ssr friendly\n\nexport const useIsTouchDevice = () => {\n  const [touchOnly, setTouchOnly] = useState(false)\n\n  if (isTouchDevice) {\n    useEffect(() => {\n      setTouchOnly(true)\n    }, [])\n  }\n\n  return touchOnly\n}\n"],
+  "mappings": ";;AAAA;AAEA;AAIO,MAAM,mBAAmB,6BAAM;AACpC,QAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;AAEhD,MAAI,eAAe;AACjB,cAAU,MAAM;AACd,mBAAa,IAAI;AAAA,IACnB,GAAG,CAAC,CAAC;AAAA,EACP;AAEA,SAAO;AACT,GAVgC;",
+  "names": []
+}

package/dist/{hooks → esm/hooks}/useMedia.js

@@ -8,74 +8,59 @@ import { useConstant } from "./useConstant";
 const mediaState = {};
 const mediaQueryListeners = {};
 const addMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
-  mediaQueryListeners[key] = mediaQueryListeners[key] || new Set();
+  mediaQueryListeners[key] = mediaQueryListeners[key] || /* @__PURE__ */ new Set();
   mediaQueryListeners[key].add(cb);
 }, "addMediaQueryListener");
 const removeMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
-  mediaQueryListeners[key].delete(cb);
+  var _a;
+  (_a = mediaQueryListeners[key]) == null ? void 0 : _a.delete(cb);
 }, "removeMediaQueryListener");
-let conf = null;
-const mediaQueryConfig = new Proxy({}, {
-  get(target, key) {
-    if (!conf) {
-      throw new Error(`Be sure to run configureMedia before accessing mediaQueryConfig`);
-    }
-    return Reflect.get(conf, key);
-  },
-  ownKeys() {
-    if (!conf) {
-      throw new Error(`Be sure to run configureMedia before accessing mediaQueryConfig`);
-    }
-    return Object.keys(conf);
-  },
-  getOwnPropertyDescriptor() {
-    return {
-      enumerable: true,
-      configurable: true
-    };
-  }
-});
+let hasConfigured = false;
+const mediaQueryConfig = {};
 const getMedia = /* @__PURE__ */ __name(() => {
-  if (!conf) {
-    throw new Error(`not configured yet`);
-  }
   return mediaState;
 }, "getMedia");
 const configureMedia = /* @__PURE__ */ __name(({
   queries,
   defaultActive = ["sm", "xs"]
 } = {}) => {
-  if (conf) {
+  var _a;
+  if (hasConfigured) {
     console.warn(`Already configured mediaQueries once (you may have called getMedia() before configureMedia())`);
   }
   if (queries) {
-    conf = queries;
+    Object.assign(mediaQueryConfig, queries);
+    hasConfigured = true;
   }
   for (const key in queries) {
     const str = mediaObjectToString(queries[key]);
+    const propKey = `$${key}`;
     try {
-      const getMatch = /* @__PURE__ */ __name(() => matchMedia(str), "getMatch");
-      const match = getMatch();
-      if (!match || typeof match.addListener !== "function") {
-        throw new Error("\u26A0\uFE0F No match (seeing this in RN sometimes)");
-      }
-      mediaState[key] = !!match.matches;
-      match.addListener(() => {
+      let update = function() {
         const next = !!getMatch().matches;
-        if (next === mediaState[key])
+        if (next === mediaState[propKey])
           return;
-        mediaState[key] = next;
-        const listeners = mediaQueryListeners[key];
-        if (listeners?.size) {
+        mediaState[propKey] = next;
+        const listeners = mediaQueryListeners[propKey];
+        if (listeners == null ? void 0 : listeners.size) {
           for (const cb of [...listeners]) {
             cb();
           }
         }
-      });
+      };
+      __name(update, "update");
+      const getMatch = /* @__PURE__ */ __name(() => matchMedia(str), "getMatch");
+      const match = getMatch();
+      if (!match || typeof match.addListener !== "function") {
+        throw new Error("\u26A0\uFE0F No match (seeing this in RN sometimes)");
+      }
+      mediaState[propKey] = !!match.matches;
+      match.addListener(update);
+      update();
     } catch (err) {
       console.error("Error running media query", str, err.message, err.stack);
-      const isDefaultActive = defaultActive?.includes(key) ?? true;
-      mediaState[key] = isDefaultActive;
+      const isDefaultActive = (_a = defaultActive == null ? void 0 : defaultActive.includes(key)) != null ? _a : true;
+      mediaState[propKey] = isDefaultActive;
     }
   }
 }, "configureMedia");
@@ -101,6 +86,7 @@ const useMedia = /* @__PURE__ */ __name(() => {
     }
     for (const key in st.nextSelections) {
       if (!(key in st.selections)) {
+        console.log("lsiten", key);
         addMediaQueryListener(key, forceUpdate);
       }
     }
@@ -122,6 +108,9 @@ const useMedia = /* @__PURE__ */ __name(() => {
     const st = state.current;
     return new Proxy(mediaState, {
       get(target, key) {
+        if (key[0] !== "$") {
+          key = `$${key}`;
+        }
         if (!(key in mediaState)) {
           return Reflect.get(target, key);
         }