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

package/dist/esm/helpers/pseudoDescriptors.js

@@ -5,11 +5,22 @@ const pseudoDescriptors = {
   },
   pressStyle: {
     name: "active",
+    stateKey: "press",
     priority: 2
   },
   focusStyle: {
     name: "focus",
     priority: 3
+  },
+  enterStyle: {
+    name: "enter",
+    stateKey: "unmounted",
+    priority: 4
+  },
+  exitStyle: {
+    name: "exit",
+    stateKey: "isExiting",
+    priority: 5
   }
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/pseudoDescriptors.ts"],
-  "sourcesContent": ["// *0 order matches to *1\n\nexport const pseudoDescriptors = {\n  hoverStyle: {\n    name: 'hover',\n    priority: 1,\n  },\n  pressStyle: {\n    name: 'active',\n    priority: 2,\n  },\n  focusStyle: {\n    name: 'focus',\n    priority: 3,\n  },\n} as const\n\nexport type PseudoDescriptor = typeof pseudoDescriptors[keyof typeof pseudoDescriptors]\n"],
-  "mappings": "AAEO,MAAM,oBAAoB;AAAA,EAC/B,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AACF;",
+  "sourcesContent": ["// *0 order matches to *1\n\nexport const pseudoDescriptors: Record<\n  'hoverStyle' | 'pressStyle' | 'focusStyle' | 'enterStyle' | 'exitStyle',\n  PseudoDescriptor\n> = {\n  hoverStyle: {\n    name: 'hover',\n    priority: 1,\n  },\n  pressStyle: {\n    name: 'active',\n    stateKey: 'press',\n    priority: 2,\n  },\n  focusStyle: {\n    name: 'focus',\n    priority: 3,\n  },\n  enterStyle: {\n    name: 'enter',\n    stateKey: 'unmounted',\n    priority: 4,\n  },\n  exitStyle: {\n    name: 'exit',\n    stateKey: 'isExiting',\n    priority: 5,\n  },\n}\n\nexport type PseudoDescriptor = {\n  name: string\n  priority: number\n  stateKey?: string\n}\n\nexport type PseudoDescriptors = {\n  [Key in keyof typeof pseudoDescriptors]: PseudoDescriptor\n}\n"],
+  "mappings": "AAEO,MAAM,oBAGT;AAAA,EACF,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AAAA,EACA,WAAW;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AACF;",
   "names": []
 }

package/dist/esm/helpers/registerCSSVariable.js

@@ -1,15 +1,14 @@
 import { createCSSVariable } from "../createVariable";
 const registerCSSVariable = (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;
+};
+const variableToCSS = (v) => {
+  return `--${createCSSVariable(v.name, false)}:${typeof v.val === "number" ? `${v.val}px` : v.val}`;
 };
 const tokensValueToVariable = /* @__PURE__ */ new Map();
-const tokenRules = /* @__PURE__ */ new Set();
 export {
   registerCSSVariable,
-  tokenRules,
-  tokensValueToVariable
+  tokensValueToVariable,
+  variableToCSS
 };
 //# sourceMappingURL=registerCSSVariable.js.map

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

@@ -1,7 +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,CAAC,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;AAEO,MAAM,wBAAwB,oBAAI,IAAsB;AACxD,MAAM,aAAa,oBAAI,IAAY;",
+  "sourcesContent": ["import { Variable, createCSSVariable } from '../createVariable'\n\nexport const registerCSSVariable = (v: Variable) => {\n  tokensValueToVariable.set(v.val, v)\n}\n\nexport const variableToCSS = (v: Variable) => {\n  return `--${createCSSVariable(v.name, false)}:${typeof v.val === 'number' ? `${v.val}px` : v.val}`\n}\n\nexport const tokensValueToVariable = new Map<any, any>()\n"],
+  "mappings": "AAAA,SAAmB,yBAAyB;AAErC,MAAM,sBAAsB,CAAC,MAAgB;AAClD,wBAAsB,IAAI,EAAE,KAAK,CAAC;AACpC;AAEO,MAAM,gBAAgB,CAAC,MAAgB;AAC5C,SAAO,KAAK,kBAAkB,EAAE,MAAM,KAAK,KAAK,OAAO,EAAE,QAAQ,WAAW,GAAG,EAAE,UAAU,EAAE;AAC/F;AAEO,MAAM,wBAAwB,oBAAI,IAAc;",
   "names": []
 }

package/dist/esm/helpers/startTransition.js

@@ -0,0 +1,6 @@
+import React from "react";
+const startTransition = React.startTransition || ((cb) => cb());
+export {
+  startTransition
+};
+//# sourceMappingURL=startTransition.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/startTransition.ts"],
+  "sourcesContent": ["import React from 'react'\n\n// backwards compat\nexport const startTransition = React.startTransition || ((cb) => cb())\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAGX,MAAM,kBAAkB,MAAM,oBAAoB,CAAC,OAAO,GAAG;",
+  "names": []
+}

package/dist/esm/helpers/themeable.js

@@ -1,51 +1,19 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
+import { jsx } from "react/jsx-runtime";
 import React, { forwardRef } from "react";
 import { Theme } from "../views/Theme";
-import { ThemeInverse } from "../views/ThemeInverse";
 function themeable(component, opts) {
   const withThemeComponent = forwardRef(function WithTheme(props, ref) {
-    const _a = props, { themeInverse, theme } = _a, rest = __objRest(_a, ["themeInverse", "theme"]);
-    const element = React.createElement(component, __spreadProps(__spreadValues({}, rest), { ref }));
-    if (themeInverse) {
-      return /* @__PURE__ */ React.createElement(ThemeInverse, null, element);
-    }
-    if (theme || opts) {
-      return /* @__PURE__ */ React.createElement(Theme, {
-        componentName: opts == null ? void 0 : opts.componentName,
-        name: theme || null
-      }, element);
-    }
-    return element;
+    const { themeInverse, theme, componentName, reset, ...rest } = props;
+    const element = React.createElement(component, { ...rest, ref });
+    return /* @__PURE__ */ jsx(Theme, {
+      inverse: themeInverse,
+      componentName: componentName || (opts == null ? void 0 : opts.componentName),
+      name: theme || null,
+      "data-themeable": true,
+      debug: props.debug,
+      reset: props.reset,
+      children: element
+    });
   });
   const withTheme = withThemeComponent;
   withTheme.displayName = `Themed(${(component == null ? void 0 : component.displayName) || (component == null ? void 0 : component.name) || "Anonymous"})`;

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

@@ -1,7 +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(props: any, ref) {\n    const { themeInverse, theme, ...rest } = props\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,mBAAmB,OAAY,KAAK;AACxE,UAAyC,YAAjC,gBAAc,UAAmB,IAAT,iBAAS,IAAT,CAAxB,gBAAc;AACtB,UAAM,UAAU,MAAM,cAAc,WAAW,iCAAK,OAAL,EAAW,IAAI,EAAQ;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,CAAC;AAED,QAAM,YAAiB;AACvB,YAAU,cAAc,UACrB,wCAAmB,gBAAgB,wCAAmB,SAAQ;AAGjE,SAAO;AAQT;",
+  "sourcesContent": ["import React, { forwardRef, useId } from 'react'\n\nimport { ThemeName } from '../types'\nimport { Theme } from '../views/Theme'\n\nexport interface ThemeableProps {\n  theme?: ThemeName | null\n  themeInverse?: boolean\n  componentName?: string\n  debug?: boolean | 'verbose'\n  reset?: 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(props: ThemeableProps, ref) {\n    const { themeInverse, theme, componentName, reset, ...rest } = props\n    const element = React.createElement(component, { ...rest, ref } as any)\n\n    return (\n      <Theme\n        inverse={themeInverse}\n        componentName={componentName || opts?.componentName}\n        name={(theme as any) || null}\n        data-themeable\n        debug={props.debug}\n        reset={props.reset}\n      >\n        {element}\n      </Theme>\n    )\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    ? (props: Omit<P, 'theme' | 'themeInverse'> & ThemeableProps) => R\n    : unknown\n}\n"],
+  "mappings": "AAsBM;AAtBN,OAAO,SAAS,kBAAyB;AAGzC,SAAS,aAAa;AAUf,SAAS,UACd,WACA,MACA;AACA,QAAM,qBAAqB,WAAW,SAAS,UAAU,OAAuB,KAAK;AACnF,UAAM,EAAE,cAAc,OAAO,eAAe,UAAU,KAAK,IAAI;AAC/D,UAAM,UAAU,MAAM,cAAc,WAAW,EAAE,GAAG,MAAM,IAAI,CAAQ;AAEtE,WACE,oBAAC;AAAA,MACC,SAAS;AAAA,MACT,eAAe,kBAAiB,6BAAM;AAAA,MACtC,MAAO,SAAiB;AAAA,MACxB,kBAAc;AAAA,MACd,OAAO,MAAM;AAAA,MACb,OAAO,MAAM;AAAA,MAEZ;AAAA,KACH;AAAA,EAEJ,CAAC;AAED,QAAM,YAAiB;AACvB,YAAU,cAAc,WACrB,uCAAmB,iBAAgB,uCAAmB,SAAQ;AAGjE,SAAO;AAGT;",
   "names": []
 }

package/dist/esm/helpers/themes.js

@@ -0,0 +1,54 @@
+import { createVariable, isVariable } from "../createVariable";
+import { GetThemeUnwrapped } from "../hooks/getThemeUnwrapped";
+function ensureThemeVariable(theme, key) {
+  const val = theme[key];
+  const themeKey = key;
+  if (!isVariable(val)) {
+    theme[key] = createVariable({
+      key: themeKey,
+      name: themeKey,
+      val
+    });
+  } else {
+    if (val.name !== themeKey) {
+      theme[key] = createVariable({
+        key: val.name,
+        name: themeKey,
+        val: val.val
+      });
+    }
+  }
+}
+function proxyThemeToParents(themeName, theme, themes) {
+  const cur = [];
+  const parents = themeName.split("_").slice(0, -1).map((part) => {
+    cur.push(part);
+    return cur.join("_");
+  });
+  const hasParents = parents.length;
+  return new Proxy(theme, {
+    get(target, key) {
+      if (key === GetThemeUnwrapped) {
+        return theme;
+      }
+      if (!hasParents || Reflect.has(target, key)) {
+        return Reflect.get(target, key);
+      }
+      for (let i = parents.length - 1; i >= 0; i--) {
+        const parent = themes[parents[i]];
+        if (!parent) {
+          continue;
+        }
+        if (Reflect.has(parent, key)) {
+          return Reflect.get(parent, key);
+        }
+      }
+      return Reflect.get(target, key);
+    }
+  });
+}
+export {
+  ensureThemeVariable,
+  proxyThemeToParents
+};
+//# sourceMappingURL=themes.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/themes.ts"],
+  "sourcesContent": ["import { createVariable, isVariable } from '../createVariable'\nimport { GetThemeUnwrapped } from '../hooks/getThemeUnwrapped'\nimport { CreateTamaguiProps } from '../types'\n\n// mutates, freeze after\n// shared by createTamagui so extracted here\nexport function ensureThemeVariable(theme: any, key: string) {\n  const val = theme[key]\n  const themeKey = key\n  if (!isVariable(val)) {\n    theme[key] = createVariable({\n      key: themeKey,\n      name: themeKey,\n      val,\n    })\n  } else {\n    if (val.name !== themeKey) {\n      // rename to theme name\n      theme[key] = createVariable({\n        key: val.name,\n        name: themeKey,\n        val: val.val,\n      })\n    }\n  }\n}\n\nexport function proxyThemeToParents(\n  themeName: string,\n  theme: any,\n  themes: CreateTamaguiProps['themes']\n) {\n  // we could test if this is better as just a straight object spread or fancier proxy\n  const cur: string[] = []\n  // if theme is dark_blue_alt1_Button\n  // this will be the parent names in order: ['dark', 'dark_blue', 'dark_blue_alt1\"]\n  const parents = themeName\n    .split('_')\n    .slice(0, -1)\n    .map((part) => {\n      cur.push(part)\n      return cur.join('_')\n    })\n\n  const hasParents = parents.length\n\n  // proxy fallback values to parent theme values\n  return new Proxy(theme, {\n    get(target, key) {\n      if (key === GetThemeUnwrapped) {\n        return theme\n      }\n      if (!hasParents || Reflect.has(target, key)) {\n        return Reflect.get(target, key)\n      }\n      // check parents\n      for (let i = parents.length - 1; i >= 0; i--) {\n        const parent = themes[parents[i]]\n        if (!parent) {\n          continue\n        }\n        if (Reflect.has(parent, key)) {\n          return Reflect.get(parent, key)\n        }\n      }\n      return Reflect.get(target, key)\n    },\n  })\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB,kBAAkB;AAC3C,SAAS,yBAAyB;AAK3B,SAAS,oBAAoB,OAAY,KAAa;AAC3D,QAAM,MAAM,MAAM;AAClB,QAAM,WAAW;AACjB,MAAI,CAAC,WAAW,GAAG,GAAG;AACpB,UAAM,OAAO,eAAe;AAAA,MAC1B,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,OAAO;AACL,QAAI,IAAI,SAAS,UAAU;AAEzB,YAAM,OAAO,eAAe;AAAA,QAC1B,KAAK,IAAI;AAAA,QACT,MAAM;AAAA,QACN,KAAK,IAAI;AAAA,MACX,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAEO,SAAS,oBACd,WACA,OACA,QACA;AAEA,QAAM,MAAgB,CAAC;AAGvB,QAAM,UAAU,UACb,MAAM,GAAG,EACT,MAAM,GAAG,EAAE,EACX,IAAI,CAAC,SAAS;AACb,QAAI,KAAK,IAAI;AACb,WAAO,IAAI,KAAK,GAAG;AAAA,EACrB,CAAC;AAEH,QAAM,aAAa,QAAQ;AAG3B,SAAO,IAAI,MAAM,OAAO;AAAA,IACtB,IAAI,QAAQ,KAAK;AACf,UAAI,QAAQ,mBAAmB;AAC7B,eAAO;AAAA,MACT;AACA,UAAI,CAAC,cAAc,QAAQ,IAAI,QAAQ,GAAG,GAAG;AAC3C,eAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,MAChC;AAEA,eAAS,IAAI,QAAQ,SAAS,GAAG,KAAK,GAAG,KAAK;AAC5C,cAAM,SAAS,OAAO,QAAQ;AAC9B,YAAI,CAAC,QAAQ;AACX;AAAA,QACF;AACA,YAAI,QAAQ,IAAI,QAAQ,GAAG,GAAG;AAC5B,iBAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,QAChC;AAAA,MACF;AACA,aAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,IAChC;AAAA,EACF,CAAC;AACH;",
+  "names": []
+}

package/dist/esm/helpers/timer.js

@@ -0,0 +1,11 @@
+const timer = require("@tamagui/timer").timer();
+setTimeout(() => {
+  timer.print();
+}, 2e3);
+const time = timer.start({
+  quiet: true
+});
+export {
+  time
+};
+//# sourceMappingURL=timer.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/timer.ts"],
+  "sourcesContent": ["const timer = require('@tamagui/timer').timer()\n\nsetTimeout(() => {\n  timer.print()\n}, 2000)\n\nexport const time = timer.start({\n  quiet: true,\n})\n"],
+  "mappings": "AAAA,MAAM,QAAQ,QAAQ,gBAAgB,EAAE,MAAM;AAE9C,WAAW,MAAM;AACf,QAAM,MAAM;AACd,GAAG,GAAI;AAEA,MAAM,OAAO,MAAM,MAAM;AAAA,EAC9B,OAAO;AACT,CAAC;",
+  "names": []
+}

package/dist/esm/helpers/useShallowSetState.js

@@ -0,0 +1,25 @@
+import { useCallback } from "react";
+function useShallowSetState(setter, debug, debugName) {
+  return useCallback(
+    (next) => {
+      setter((prev) => {
+        for (const key in next) {
+          if (prev[key] !== next[key]) {
+            if (process.env.NODE_ENV === "development") {
+              if (debug === "verbose") {
+                console.log(` \u25B2 setState ${debugName}`, next);
+              }
+            }
+            return { ...prev, ...next };
+          }
+        }
+        return prev;
+      });
+    },
+    [setter]
+  );
+}
+export {
+  useShallowSetState
+};
+//# sourceMappingURL=useShallowSetState.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/useShallowSetState.tsx"],
+  "sourcesContent": ["import React, { useCallback } from 'react'\n\nimport { DebugProp } from '../types'\n\nexport function useShallowSetState<State extends Object>(\n  setter: React.Dispatch<React.SetStateAction<State>>,\n  debug?: DebugProp,\n  debugName?: string\n) {\n  return useCallback(\n    (next: Partial<State>) => {\n      setter((prev) => {\n        for (const key in next) {\n          if (prev[key] !== next[key]) {\n            if (process.env.NODE_ENV === 'development') {\n              if (debug === 'verbose') {\n                // eslint-disable-next-line no-console\n                console.log(` \u25B2 setState ${debugName}`, next)\n              }\n            }\n            return { ...prev, ...next }\n          }\n        }\n        return prev\n      })\n    },\n    [setter]\n  )\n}\n"],
+  "mappings": "AAAA,SAAgB,mBAAmB;AAI5B,SAAS,mBACd,QACA,OACA,WACA;AACA,SAAO;AAAA,IACL,CAAC,SAAyB;AACxB,aAAO,CAAC,SAAS;AACf,mBAAW,OAAO,MAAM;AACtB,cAAI,KAAK,SAAS,KAAK,MAAM;AAC3B,gBAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,kBAAI,UAAU,WAAW;AAEvB,wBAAQ,IAAI,oBAAe,aAAa,IAAI;AAAA,cAC9C;AAAA,YACF;AACA,mBAAO,EAAE,GAAG,MAAM,GAAG,KAAK;AAAA,UAC5B;AAAA,QACF;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AACF;",
+  "names": []
+}

package/dist/esm/helpers/validate.js

@@ -1,99 +1 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-import { default as ow } from "@tamagui/ow/dev-only";
-let Config;
-let Tokens;
-let FontRequired;
-let FontOptional;
-const validateConfig = (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);
-  }
-};
-const validateTokens = (tokens) => {
-  try {
-    ow(tokens, Tokens);
-  } catch (err) {
-    console.warn("Given tokens:\n", JSON.stringify(tokens, null, 2), err);
-  }
-};
-const validateFont = (font) => {
-  try {
-    const _a = font, { style, transform, color } = _a, required = __objRest(_a, ["style", "transform", "color"]);
-    ow(required, FontRequired);
-    ow({ style, transform, color }, FontOptional);
-  } catch (err) {
-    console.warn("Given font:\n", JSON.stringify(font, null, 2), err);
-  }
-};
-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.any(ow.string, ow.object))
-  };
-  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(__spreadValues(__spreadValues({}, fontReq), fontOpt)))
-  });
-  FontRequired = ow.object.exactShape(fontReq);
-  FontOptional = ow.object.partialShape(fontOpt);
-  Tokens = ow.object.exactShape({
-    size: ow.object.nonEmpty.valuesOfType(ow.any(ow.number, ow.object)),
-    space: ow.object.nonEmpty.valuesOfType(ow.any(ow.number, ow.object)),
-    zIndex: ow.object.nonEmpty.valuesOfType(ow.any(ow.number, ow.object)),
-    radius: ow.object.nonEmpty.valuesOfType(ow.any(ow.number, ow.object)),
-    color: ow.object.nonEmpty.valuesOfType(ow.any(ow.string, ow.object))
-  });
-}
-export {
-  validateConfig,
-  validateFont,
-  validateTokens
-};
 //# sourceMappingURL=validate.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/helpers/validate.ts"],
-  "sourcesContent": ["// published a patched version that works on native\n// @ts-ignore\nimport { default as ow } from '@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.any(ow.string, ow.object)),\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.any(ow.number, ow.object)),\n    space: ow.object.nonEmpty.valuesOfType(ow.any(ow.number, ow.object)),\n    zIndex: ow.object.nonEmpty.valuesOfType(ow.any(ow.number, ow.object)),\n    radius: ow.object.nonEmpty.valuesOfType(ow.any(ow.number, ow.object)),\n    color: ow.object.nonEmpty.valuesOfType(ow.any(ow.string, ow.object)),\n  })\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AAEA,IAAI;AACJ,IAAI;AACJ,IAAI;AACJ,IAAI;AAEG,MAAM,iBAAiB,CAAC,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;AAEO,MAAM,iBAAiB,CAAC,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;AAEO,MAAM,eAAe,CAAC,SAAc;AACzC,MAAI;AACF,UAAiD,WAAzC,SAAO,WAAW,UAAuB,IAAb,qBAAa,IAAb,CAA5B,SAAO,aAAW;AAC1B,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;AAEA,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,IAAI,GAAG,QAAQ,GAAG,MAAM,CAAC;AAAA,EACrE;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,kCAClB,UACA,QACJ,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,IAAI,GAAG,QAAQ,GAAG,MAAM,CAAC;AAAA,IAClE,OAAO,GAAG,OAAO,SAAS,aAAa,GAAG,IAAI,GAAG,QAAQ,GAAG,MAAM,CAAC;AAAA,IACnE,QAAQ,GAAG,OAAO,SAAS,aAAa,GAAG,IAAI,GAAG,QAAQ,GAAG,MAAM,CAAC;AAAA,IACpE,QAAQ,GAAG,OAAO,SAAS,aAAa,GAAG,IAAI,GAAG,QAAQ,GAAG,MAAM,CAAC;AAAA,IACpE,OAAO,GAAG,OAAO,SAAS,aAAa,GAAG,IAAI,GAAG,QAAQ,GAAG,MAAM,CAAC;AAAA,EACrE,CAAC;AACH;",
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
   "names": []
 }

package/dist/esm/hooks/getThemeUnwrapped.js

@@ -0,0 +1,12 @@
+const getThemeUnwrapped = (theme) => {
+  if (!theme)
+    return null;
+  const first = theme[GetThemeUnwrapped];
+  return first || theme;
+};
+const GetThemeUnwrapped = Symbol();
+export {
+  GetThemeUnwrapped,
+  getThemeUnwrapped
+};
+//# sourceMappingURL=getThemeUnwrapped.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/getThemeUnwrapped.tsx"],
+  "sourcesContent": ["export const getThemeUnwrapped = (theme: any) => {\n  if (!theme) return null\n  const first = theme[GetThemeUnwrapped]\n  return first || theme\n}\n\nexport const GetThemeUnwrapped = Symbol()\n"],
+  "mappings": "AAAO,MAAM,oBAAoB,CAAC,UAAe;AAC/C,MAAI,CAAC;AAAO,WAAO;AACnB,QAAM,QAAQ,MAAM;AACpB,SAAO,SAAS;AAClB;AAEO,MAAM,oBAAoB,OAAO;",
+  "names": []
+}

package/dist/esm/hooks/useConstant.js

@@ -1,5 +1,8 @@
-import { useRef } from "react";
+import { useMemo, useRef } from "react";
 function useConstant(fn) {
+  if (typeof document === "undefined") {
+    return useMemo(() => fn(), []);
+  }
   const ref = useRef();
   if (!ref.current) {
     ref.current = { v: fn() };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "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,OAAqB;AACjC,MAAI,CAAC,IAAI,SAAS;AAChB,QAAI,UAAU,EAAE,GAAG,GAAG,EAAE;AAAA,EAC1B;AACA,SAAO,IAAI,QAAQ;AACrB;",
+  "sourcesContent": ["import { useMemo, useRef } from 'react'\n\ntype ResultBox<T> = { v: T }\n\nexport function useConstant<T>(fn: () => T): T {\n  // RSC compat\n  if (typeof document === 'undefined') {\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    return useMemo(() => fn(), [])\n  }\n\n  const ref = useRef<ResultBox<T>>()\n\n  if (!ref.current) {\n    ref.current = { v: fn() }\n  }\n\n  return ref.current.v\n}\n"],
+  "mappings": "AAAA,SAAS,SAAS,cAAc;AAIzB,SAAS,YAAe,IAAgB;AAE7C,MAAI,OAAO,aAAa,aAAa;AAEnC,WAAO,QAAQ,MAAM,GAAG,GAAG,CAAC,CAAC;AAAA,EAC/B;AAEA,QAAM,MAAM,OAAqB;AAEjC,MAAI,CAAC,IAAI,SAAS;AAChB,QAAI,UAAU,EAAE,GAAG,GAAG,EAAE;AAAA,EAC1B;AAEA,SAAO,IAAI,QAAQ;AACrB;",
   "names": []
 }

package/dist/esm/hooks/useElementLayout.js

@@ -0,0 +1,59 @@
+import { useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { useEvent } from "@tamagui/use-event";
+import { getBoundingClientRect } from "../helpers/getBoundingClientRect";
+import { getRect } from "../helpers/getRect";
+const LayoutHandlers = /* @__PURE__ */ new WeakMap();
+let resizeObserver = null;
+if (typeof window !== "undefined" && "ResizeObserver" in window) {
+  resizeObserver = new ResizeObserver((entries) => {
+    for (const { target } of entries) {
+      const onLayout = LayoutHandlers.get(target);
+      if (typeof onLayout !== "function")
+        return;
+      measureLayout(target, null, (x, y, width, height, left, top) => {
+        onLayout({
+          nativeEvent: {
+            layout: { x, y, width, height, left, top },
+            target
+          },
+          timeStamp: Date.now()
+        });
+      });
+    }
+  });
+}
+const measureLayout = (node, relativeTo, callback) => {
+  const relativeNode = relativeTo || (node == null ? void 0 : node.parentNode);
+  if (relativeNode instanceof HTMLElement) {
+    setTimeout(() => {
+      const relativeRect = getBoundingClientRect(relativeNode);
+      const { height, left, top, width } = getRect(node);
+      const x = left - relativeRect.left;
+      const y = top - relativeRect.top;
+      callback(x, y, width, height, left, top);
+    }, 0);
+  }
+};
+const idFn = () => {
+};
+function useElementLayout(ref, onLayout) {
+  const hasLayoutEvent = !!onLayout;
+  const onLayoutEvent = useEvent(onLayout || idFn);
+  useIsomorphicLayoutEffect(() => {
+    if (!resizeObserver || !hasLayoutEvent)
+      return;
+    const node = ref.current;
+    if (!node)
+      return;
+    LayoutHandlers.set(node, onLayoutEvent);
+    resizeObserver.observe(node);
+    return () => {
+      resizeObserver == null ? void 0 : resizeObserver.unobserve(node);
+    };
+  }, [ref, hasLayoutEvent]);
+}
+export {
+  measureLayout,
+  useElementLayout
+};
+//# sourceMappingURL=useElementLayout.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useElementLayout.tsx"],
+  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { useEvent } from '@tamagui/use-event'\nimport { RefObject } from 'react'\n\nimport { getBoundingClientRect } from '../helpers/getBoundingClientRect'\nimport { getRect } from '../helpers/getRect'\n\nconst LayoutHandlers = new WeakMap<Element, Function>()\n\nexport type LayoutValue = {\n  x: number\n  y: number\n  width: number\n  height: number\n  left: number\n  top: number\n}\n\nexport type LayoutEvent = {\n  nativeEvent: {\n    layout: LayoutValue\n    target: any\n  }\n  timeStamp: number\n}\n\nlet resizeObserver: ResizeObserver | null = null\n\nif (typeof window !== 'undefined' && 'ResizeObserver' in window) {\n  resizeObserver = new ResizeObserver((entries) => {\n    for (const { target } of entries) {\n      const onLayout = LayoutHandlers.get(target)\n      if (typeof onLayout !== 'function') return\n      measureLayout(target as HTMLElement, null, (x, y, width, height, left, top) => {\n        onLayout({\n          nativeEvent: {\n            layout: { x, y, width, height, left, top },\n            target,\n          },\n          timeStamp: Date.now(),\n        })\n      })\n    }\n  })\n}\n\nexport const measureLayout = (\n  node: HTMLElement,\n  relativeTo: HTMLElement | null,\n  callback: Function\n) => {\n  const relativeNode = relativeTo || node?.parentNode\n  if (relativeNode instanceof HTMLElement) {\n    setTimeout(() => {\n      const relativeRect = getBoundingClientRect(relativeNode)!\n      const { height, left, top, width } = getRect(node)!\n      const x = left - relativeRect.left\n      const y = top - relativeRect.top\n      callback(x, y, width, height, left, top)\n    }, 0)\n  }\n}\n\nconst idFn = () => {}\n\nexport function useElementLayout(\n  ref: RefObject<Element>,\n  onLayout?: ((e: LayoutEvent) => void) | null\n) {\n  const hasLayoutEvent = !!onLayout\n  const onLayoutEvent = useEvent(onLayout || idFn)\n\n  // Observing is done in a separate effect to avoid this effect running\n  // when 'onLayout' changes.\n  useIsomorphicLayoutEffect(() => {\n    if (!resizeObserver || !hasLayoutEvent) return\n    const node = ref.current\n    if (!node) return\n    LayoutHandlers.set(node, onLayoutEvent)\n    resizeObserver.observe(node)\n    return () => {\n      resizeObserver?.unobserve(node)\n    }\n  }, [ref, hasLayoutEvent])\n}\n"],
+  "mappings": "AAAA,SAAS,iCAAiC;AAC1C,SAAS,gBAAgB;AAGzB,SAAS,6BAA6B;AACtC,SAAS,eAAe;AAExB,MAAM,iBAAiB,oBAAI,QAA2B;AAmBtD,IAAI,iBAAwC;AAE5C,IAAI,OAAO,WAAW,eAAe,oBAAoB,QAAQ;AAC/D,mBAAiB,IAAI,eAAe,CAAC,YAAY;AAC/C,eAAW,EAAE,OAAO,KAAK,SAAS;AAChC,YAAM,WAAW,eAAe,IAAI,MAAM;AAC1C,UAAI,OAAO,aAAa;AAAY;AACpC,oBAAc,QAAuB,MAAM,CAAC,GAAG,GAAG,OAAO,QAAQ,MAAM,QAAQ;AAC7E,iBAAS;AAAA,UACP,aAAa;AAAA,YACX,QAAQ,EAAE,GAAG,GAAG,OAAO,QAAQ,MAAM,IAAI;AAAA,YACzC;AAAA,UACF;AAAA,UACA,WAAW,KAAK,IAAI;AAAA,QACtB,CAAC;AAAA,MACH,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AACH;AAEO,MAAM,gBAAgB,CAC3B,MACA,YACA,aACG;AACH,QAAM,eAAe,eAAc,6BAAM;AACzC,MAAI,wBAAwB,aAAa;AACvC,eAAW,MAAM;AACf,YAAM,eAAe,sBAAsB,YAAY;AACvD,YAAM,EAAE,QAAQ,MAAM,KAAK,MAAM,IAAI,QAAQ,IAAI;AACjD,YAAM,IAAI,OAAO,aAAa;AAC9B,YAAM,IAAI,MAAM,aAAa;AAC7B,eAAS,GAAG,GAAG,OAAO,QAAQ,MAAM,GAAG;AAAA,IACzC,GAAG,CAAC;AAAA,EACN;AACF;AAEA,MAAM,OAAO,MAAM;AAAC;AAEb,SAAS,iBACd,KACA,UACA;AACA,QAAM,iBAAiB,CAAC,CAAC;AACzB,QAAM,gBAAgB,SAAS,YAAY,IAAI;AAI/C,4BAA0B,MAAM;AAC9B,QAAI,CAAC,kBAAkB,CAAC;AAAgB;AACxC,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC;AAAM;AACX,mBAAe,IAAI,MAAM,aAAa;AACtC,mBAAe,QAAQ,IAAI;AAC3B,WAAO,MAAM;AACX,uDAAgB,UAAU;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,KAAK,cAAc,CAAC;AAC1B;",
+  "names": []
+}

package/dist/esm/hooks/useId.js

@@ -1,31 +1,4 @@
-import * as React from "react";
-import { isWeb, useIsomorphicLayoutEffect } from "../constants/platform";
-let serverHandoffComplete = false;
-let id = 0;
-function genId() {
-  return ++id;
-}
-function useId(providedId) {
-  if (isWeb) {
-    if (typeof React.useId === "function") {
-      let id3 = React.useId();
-      return providedId != null ? providedId : id3;
-    }
-  }
-  let initialId = providedId ?? (serverHandoffComplete ? genId() : null);
-  let [id2, setId] = React.useState(initialId);
-  useIsomorphicLayoutEffect(() => {
-    if (id2 === null) {
-      setId(genId());
-    }
-  }, []);
-  React.useEffect(() => {
-    if (serverHandoffComplete === false) {
-      serverHandoffComplete = true;
-    }
-  }, []);
-  return providedId ?? id2 ?? void 0;
-}
+import { useId } from "react";
 export {
   useId
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useId.tsx"],
-  "sourcesContent": ["/*\n * Welcome to @reach/auto-id!\n\n * Let's see if we can make sense of why this hook exists and its\n * implementation.\n *\n * Some background:\n *   1. Accessibility APIs rely heavily on element IDs\n *   2. Requiring developers to put IDs on every element in Reach UI is both\n *      cumbersome and error-prone\n *   3. With a component model, we can generate IDs for them!\n *\n * Solution 1: Generate random IDs.\n *\n * This works great as long as you don't server render your app. When React (in\n * the client) tries to reuse the markup from the server, the IDs won't match\n * and React will then recreate the entire DOM tree.\n *\n * Solution 2: Increment an integer\n *\n * This sounds great. Since we're rendering the exact same tree on the server\n * and client, we can increment a counter and get a deterministic result between\n * client and server. Also, JS integers can go up to nine-quadrillion. I'm\n * pretty sure the tab will be closed before an app never needs\n * 10 quadrillion IDs!\n *\n * Problem solved, right?\n *\n * Ah, but there's a catch! React's concurrent rendering makes this approach\n * non-deterministic. While the client and server will end up with the same\n * elements in the end, depending on suspense boundaries (and possibly some user\n * input during the initial render) the incrementing integers won't always match\n * up.\n *\n * Solution 3: Don't use IDs at all on the server; patch after first render.\n *\n * What we've done here is solution 2 with some tricks. With this approach, the\n * ID returned is an empty string on the first render. This way the server and\n * client have the same markup no matter how wild the concurrent rendering may\n * have gotten.\n *\n * After the render, we patch up the components with an incremented ID. This\n * causes a double render on any components with `useId`. Shouldn't be a problem\n * since the components using this hook should be small, and we're only updating\n * the ID attribute on the DOM, nothing big is happening.\n *\n * It doesn't have to be an incremented number, though--we could do generate\n * random strings instead, but incrementing a number is probably the cheapest\n * thing we can do.\n *\n * Additionally, we only do this patchup on the very first client render ever.\n * Any calls to `useId` that happen dynamically in the client will be\n * populated immediately with a value. So, we only get the double render after\n * server hydration and never again, SO BACK OFF ALRIGHT?\n */\n\nimport * as React from 'react'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\n\nlet serverHandoffComplete = false\nlet id = 0\nfunction genId() {\n  return ++id\n}\n\n/* eslint-disable react-hooks/rules-of-hooks */\n\n/**\n * useId\n *\n * Autogenerate IDs to facilitate WAI-ARIA and server rendering.\n *\n * Note: The returned ID will initially be `null` and will update after a\n * component mounts. Users may need to supply their own ID if they need\n * consistent values for SSR.\n *\n * @see Docs https://reach.tech/auto-id\n */\nfunction useId(idFromProps: string): string\nfunction useId(idFromProps: number): number\nfunction useId(idFromProps: string | number): string | number\nfunction useId(idFromProps: string | undefined | null): string | undefined\nfunction useId(idFromProps: number | undefined | null): number | undefined\nfunction useId(idFromProps: string | number | undefined | null): string | number | undefined\nfunction useId(): string | undefined\n\nfunction useId(providedId?: number | string | undefined | null) {\n  // TODO: Remove error flag when updating internal deps to React 18. None of\n  // our tricks will play well with concurrent rendering anyway.\n\n  // native doesn't support until next react-native version, need to remove eventually\n  if (isWeb) {\n    if (typeof React.useId === 'function') {\n      let id = React.useId()\n      return providedId != null ? providedId : id\n    }\n  }\n\n  // If this instance isn't part of the initial render, we don't have to do the\n  // double render/patch-up dance. We can just generate the ID and return it.\n  let initialId = providedId ?? (serverHandoffComplete ? genId() : null)\n  let [id, setId] = React.useState(initialId)\n\n  useIsomorphicLayoutEffect(() => {\n    if (id === null) {\n      // Patch the ID after render. We do this in `useLayoutEffect` to avoid any\n      // rendering flicker, though it'll make the first render slower (unlikely\n      // to matter, but you're welcome to measure your app and let us know if\n      // it's a problem).\n      setId(genId())\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  React.useEffect(() => {\n    if (serverHandoffComplete === false) {\n      // Flag all future uses of `useId` to skip the update dance. This is in\n      // `useEffect` because it goes after `useLayoutEffect`, ensuring we don't\n      // accidentally bail out of the patch-up dance prematurely.\n      serverHandoffComplete = true\n    }\n  }, [])\n\n  return providedId ?? id ?? undefined\n}\n\nexport { useId }\n"],
-  "mappings": "AAwDA;AAEA;AAEA,IAAI,wBAAwB;AAC5B,IAAI,KAAK;AACT,iBAAiB;AACf,SAAO,EAAE;AACX;AAuBA,eAAe,YAAiD;AAK9D,MAAI,OAAO;AACT,QAAI,OAAO,MAAM,UAAU,YAAY;AACrC,UAAI,MAAK,MAAM,MAAM;AACrB,aAAO,cAAc,OAAO,aAAa;AAAA,IAC3C;AAAA,EACF;AAIA,MAAI,YAAY,cAAe,yBAAwB,MAAM,IAAI;AACjE,MAAI,CAAC,KAAI,SAAS,MAAM,SAAS,SAAS;AAE1C,4BAA0B,MAAM;AAC9B,QAAI,QAAO,MAAM;AAKf,YAAM,MAAM,CAAC;AAAA,IACf;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,MAAM;AACpB,QAAI,0BAA0B,OAAO;AAInC,8BAAwB;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,cAAc,OAAM;AAC7B;",
+  "sourcesContent": ["export { useId } from 'react'\n"],
+  "mappings": "AAAA,SAAS,aAAa;",
   "names": []
 }

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/hooks/useIsMounted.ts"],
   "sourcesContent": ["import { useRef } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\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;AAEA;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;",
+  "mappings": "AAAA,SAAS,cAAc;AAEvB,SAAS,iCAAiC;AAEnC,SAAS,eAAe;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;",
   "names": []
 }

package/dist/esm/hooks/useIsSSR.js

@@ -0,0 +1,22 @@
+import { useState } from "react";
+import { isServer, isWeb, useIsomorphicLayoutEffect } from "../constants/platform";
+import { startTransition } from "../helpers/startTransition";
+const useIsSSR = (props) => {
+  const [val, setVal] = useState(true);
+  useIsomorphicLayoutEffect(() => {
+    if (isWeb && !isServer) {
+      if (props == null ? void 0 : props.immediate) {
+        setVal(false);
+      } else {
+        startTransition(() => {
+          setVal(false);
+        });
+      }
+    }
+  }, []);
+  return val;
+};
+export {
+  useIsSSR
+};
+//# sourceMappingURL=useIsSSR.js.map