tamagui 1.0.0-alpha.4 → 1.0.0-alpha.8

package/_jsx/index.js

@@ -1,10 +1,10 @@
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 export * from "@tamagui/helpers";
 export * from "@tamagui/core";
 export * from "./viewTypes";
 export * from "@tamagui/use-debounce";
 export * from "@tamagui/use-force-update";
 export * from "./hooks/useLayout";
-export * from "./hooks/useSafeAreaInsets";
 export * from "./hooks/useKeyboardDismissable";
 export * from "./views/BlurView";
 export * from "./views/Box";
@@ -32,4 +32,8 @@ export * from "./views/Tooltip";
 export * from "./views/TouchableOpacity";
 export * from "./views/Transitions";
 export * from "./views/VisuallyHidden";
+export * from "./views/SafeAreaProvider";
 export * from "./helpers/prevent";
+export {
+  useSafeAreaInsets
+};

package/_jsx/views/Button.js

@@ -1,5 +1,7 @@
-import { themeable } from "@tamagui/core";
-import React, { forwardRef } from "react";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { getTokens, themeable, useTheme } from "@tamagui/core";
+import React, { forwardRef, isValidElement } from "react";
 import { InteractiveFrame } from "./InteractiveFrame";
 import { SizableText } from "./SizableText";
 React["createElement"];
@@ -13,14 +15,33 @@ const Button = InteractiveFrame.extractable(themeable(forwardRef(({
   elevation,
   theme: themeName,
   size,
+  themeIcon,
   ...props
 }, ref) => {
-  return <InteractiveFrame size={size} space={space ?? size ?? "$2"} ref={ref} {...props}>
-    {icon}
+  const theme = themeIcon ? useTheme() : null;
+  const addTheme = /* @__PURE__ */ __name((el) => isValidElement(el) ? el : !!el ? React.createElement(el, theme ? { color: theme.color2, size: getIconSize(size, -1) } : {}) : null, "addTheme");
+  const themedIcon = icon ? addTheme(icon) : null;
+  const themedIconAfter = iconAfter ? addTheme(iconAfter) : null;
+  return <InteractiveFrame size={size} space={space ?? (() => {
+    const sizes = getTokens().size;
+    const sizeNames = Object.keys(sizes);
+    const sizeDown = sizes[sizeNames[Math.max(0, sizeNames.indexOf(size || "$4") - 3)]] || "$4";
+    return sizeDown;
+  })()} ref={ref} {...props}>
+    {themedIcon}
     {noTextWrap ? children : !children ? null : textProps ? <SizableText color="$color2" flexGrow={0} flexShrink={1} ellipse size={size} {...textProps}>{children}</SizableText> : <SizableText size={size} color="$color2" flexGrow={0} flexShrink={1} ellipse>{children}</SizableText>}
-    {iconAfter}
+    {themedIconAfter}
   </InteractiveFrame>;
 })));
+const getIconSize = /* @__PURE__ */ __name((size = "$4", sizeUpDown = 0) => {
+  const tokens = getTokens();
+  const fonts = Object.keys(tokens.font);
+  const fontSize = (tokens.font.body || tokens.font[fonts[0]]).size;
+  const fontSizeNames = Object.keys(fontSize);
+  const nameIndex = Math.max(1, fontSizeNames.indexOf(size) + sizeUpDown);
+  const sizedName = fontSizeNames[nameIndex];
+  return (sizeUpDown === 0 ? fontSize[size] : fontSize[sizedName]) ?? 16;
+}, "getIconSize");
 export {
   Button
 };

package/_jsx/views/InteractiveFrame.js

@@ -2,12 +2,6 @@ import { Variable } from "@tamagui/core";
 import { styled } from "@tamagui/core";
 import { XStack } from "./Stacks";
 const InteractiveFrame = styled(XStack, {
-  hitSlop: {
-    top: 5,
-    left: 5,
-    right: 5,
-    bottom: 5
-  },
   borderRadius: "$1",
   paddingVertical: "$2",
   paddingHorizontal: "$3",

package/_jsx/views/Popper.js

@@ -3,6 +3,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import { useOverlayPosition } from "@react-native-aria/overlays";
 import React, { createContext, useContext, useEffect, useRef } from "react";
 import { StyleSheet, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { YStack } from "./Stacks";
 const defaultArrowHeight = 15;
 const defaultArrowWidth = 15;
@@ -26,6 +27,7 @@ const PopperContent = React.forwardRef(({ children, style, ...rest }, ref) => {
     setOverlayRef
   } = context;
   const overlayRef = useRef(null);
+  const { top } = useSafeAreaInsets();
   const { overlayProps, rendered, arrowProps, placement } = useOverlayPosition({
     targetRef: triggerRef,
     overlayRef,

package/_jsx/views/SafeAreaProvider.js

@@ -0,0 +1,26 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { Platform } from "react-native";
+import {
+  SafeAreaProvider as RNSafeAreaProvider,
+  initialWindowMetrics as defaultInitialWindowMetrics
+} from "react-native-safe-area-context";
+let defaultMetrics = null;
+const SafeAreaProvider = /* @__PURE__ */ __name(({
+  initialWindowMetrics,
+  children
+}) => {
+  if (!initialWindowMetrics && !defaultMetrics) {
+    defaultMetrics = Platform.select({
+      web: {
+        frame: { x: 0, y: 0, width: 0, height: 0 },
+        insets: { top: 0, left: 0, right: 0, bottom: 0 }
+      },
+      default: defaultInitialWindowMetrics
+    });
+  }
+  return <RNSafeAreaProvider initialMetrics={initialWindowMetrics ?? defaultMetrics}>{children}</RNSafeAreaProvider>;
+}, "SafeAreaProvider");
+export {
+  SafeAreaProvider
+};

package/_jsx/views/Tooltip.js

@@ -1,12 +1,12 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { Text, Theme } from "@tamagui/core";
+import { Text, Theme, isTamaguiElement } from "@tamagui/core";
 import React from "react";
 import { HoverablePopover } from "./HoverablePopover";
 import { Paragraph } from "./Paragraph";
 import { YStack } from "./Stacks";
 const Tooltip = /* @__PURE__ */ __name(({ contents, tooltipFrameProps, ...props }) => {
-  return <HoverablePopover placement="bottom" delay={200} disableUntilSettled {...props} trigger={(triggerProps) => React.isValidElement(props.children) ? React.cloneElement(props.children, triggerProps) : <Text fontFamily="inherit" fontSize="inherit" {...triggerProps}>{props.children}</Text>}>{({ open }) => {
+  return <HoverablePopover placement="bottom" delay={200} disableUntilSettled {...props} trigger={(triggerProps) => isTamaguiElement(props.children) ? React.cloneElement(props.children, triggerProps) : <Text fontFamily="inherit" fontSize="inherit" {...triggerProps}>{props.children}</Text>}>{({ open }) => {
     return open ? <Theme name="dark"><YStack margin={10} backgroundColor="$bg2" paddingHorizontal="$2" paddingVertical="$2" maxWidth={400} borderRadius="$2" shadowColor="$shadowColor" shadowRadius={2} shadowOffset={{ height: 2, width: 0 }} {...tooltipFrameProps}><Paragraph textAlign="center" fontSize={14} color="$color">{contents}</Paragraph></YStack></Theme> : null;
   }}</HoverablePopover>;
 }, "Tooltip");

package/dist/cjs/helpers/normalizeColor.js

@@ -0,0 +1,57 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  normalizeColor: () => normalizeColor
+});
+var import_normalize_css_color = __toModule(require("normalize-css-color"));
+const normalizeColor = /* @__PURE__ */ __name((color, opacity = 1) => {
+  if (color == null)
+    return;
+  if (typeof color === "string" && isWebColor(color)) {
+    return color;
+  }
+  const colorInt = processColor(color);
+  if (colorInt != null) {
+    const r = colorInt >> 16 & 255;
+    const g = colorInt >> 8 & 255;
+    const b = colorInt & 255;
+    const a = (colorInt >> 24 & 255) / 255;
+    const alpha = (a * opacity).toFixed(2);
+    return `rgba(${r},${g},${b},${alpha})`;
+  }
+}, "normalizeColor");
+const isWebColor = /* @__PURE__ */ __name((color) => color === "currentcolor" || color === "currentColor" || color === "inherit" || color.indexOf("var(") === 0, "isWebColor");
+const processColor = /* @__PURE__ */ __name((color) => {
+  if (color === void 0 || color === null) {
+    return color;
+  }
+  let int32Color = (0, import_normalize_css_color.default)(color);
+  if (int32Color === void 0 || int32Color === null) {
+    return void 0;
+  }
+  int32Color = (int32Color << 24 | int32Color >>> 8) >>> 0;
+  return int32Color;
+}, "processColor");
+//# sourceMappingURL=normalizeColor.js.map

package/dist/cjs/helpers/normalizeColor.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/normalizeColor.tsx"],
+  "sourcesContent": ["import normalizeCSSColor from 'normalize-css-color'\n\nexport const normalizeColor = (color?: number | string, opacity = 1): void | string => {\n  if (color == null) return\n  if (typeof color === 'string' && isWebColor(color)) {\n    return color\n  }\n  const colorInt = processColor(color)\n  if (colorInt != null) {\n    const r = (colorInt >> 16) & 255\n    const g = (colorInt >> 8) & 255\n    const b = colorInt & 255\n    const a = ((colorInt >> 24) & 255) / 255\n    const alpha = (a * opacity).toFixed(2)\n    return `rgba(${r},${g},${b},${alpha})`\n  }\n}\n\nconst isWebColor = (color: string): boolean =>\n  color === 'currentcolor' ||\n  color === 'currentColor' ||\n  color === 'inherit' ||\n  color.indexOf('var(') === 0\n\nconst processColor = (color?: string | number): number | undefined => {\n  if (color === undefined || color === null) {\n    return color\n  }\n  // convert number and hex\n  let int32Color = normalizeCSSColor(color)\n  if (int32Color === undefined || int32Color === null) {\n    return undefined\n  }\n  // @ts-ignore\n  int32Color = ((int32Color << 24) | (int32Color >>> 8)) >>> 0\n  // @ts-ignore\n  return int32Color\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,iCAA8B;AAEvB,MAAM,iBAAiB,wBAAC,OAAyB,UAAU,MAAqB;AACrF,MAAI,SAAS;AAAM;AACnB,MAAI,OAAO,UAAU,YAAY,WAAW,QAAQ;AAClD,WAAO;AAAA;AAET,QAAM,WAAW,aAAa;AAC9B,MAAI,YAAY,MAAM;AACpB,UAAM,IAAK,YAAY,KAAM;AAC7B,UAAM,IAAK,YAAY,IAAK;AAC5B,UAAM,IAAI,WAAW;AACrB,UAAM,IAAM,aAAY,KAAM,OAAO;AACrC,UAAM,QAAS,KAAI,SAAS,QAAQ;AACpC,WAAO,QAAQ,KAAK,KAAK,KAAK;AAAA;AAAA,GAZJ;AAgB9B,MAAM,aAAa,wBAAC,UAClB,UAAU,kBACV,UAAU,kBACV,UAAU,aACV,MAAM,QAAQ,YAAY,GAJT;AAMnB,MAAM,eAAe,wBAAC,UAAgD;AACpE,MAAI,UAAU,UAAa,UAAU,MAAM;AACzC,WAAO;AAAA;AAGT,MAAI,aAAa,wCAAkB;AACnC,MAAI,eAAe,UAAa,eAAe,MAAM;AACnD,WAAO;AAAA;AAGT,eAAe,eAAc,KAAO,eAAe,OAAQ;AAE3D,SAAO;AAAA,GAZY;",
+  "names": []
+}

package/dist/cjs/helpers/prevent.js

@@ -0,0 +1,13 @@
+var __defProp = Object.defineProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+__export(exports, {
+  prevent: () => prevent
+});
+const prevent = /* @__PURE__ */ __name((e) => [e.preventDefault(), e.stopPropagation()], "prevent");
+//# sourceMappingURL=prevent.js.map

package/dist/cjs/helpers/prevent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/prevent.tsx"],
+  "sourcesContent": ["export const prevent = (e) => [e.preventDefault(), e.stopPropagation()]\n"],
+  "mappings": ";;;;;;;;AAAA;AAAA;AAAA;AAAO,MAAM,UAAU,wBAAC,MAAM,CAAC,EAAE,kBAAkB,EAAE,oBAA9B;",
+  "names": []
+}

package/dist/cjs/hooks/useControllableState.js

@@ -0,0 +1,51 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  useControllableProp: () => useControllableProp,
+  useControllableState: () => useControllableState
+});
+var import_react = __toModule(require("react"));
+function useControllableProp(prop, state) {
+  const { current: isControlled } = import_react.default.useRef(prop !== void 0);
+  const value = isControlled && typeof prop !== "undefined" ? prop : state;
+  return [isControlled, value];
+}
+__name(useControllableProp, "useControllableProp");
+function useControllableState(props) {
+  const { value: valueProp, defaultValue, onChange } = props;
+  const [valueState, setValue] = import_react.default.useState(defaultValue);
+  const isControlled = valueProp !== void 0;
+  const value = isControlled ? valueProp : valueState;
+  const updateValue = import_react.default.useCallback((next) => {
+    const nextValue = typeof next === "function" ? next(value) : next;
+    if (!isControlled) {
+      setValue(nextValue);
+    }
+    onChange && onChange(nextValue);
+  }, [isControlled, onChange, value]);
+  return [value, updateValue];
+}
+__name(useControllableState, "useControllableState");
+//# sourceMappingURL=useControllableState.js.map

package/dist/cjs/hooks/useControllableState.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useControllableState.ts"],
+  "sourcesContent": ["// forked from NativeBase\n// The MIT License (MIT)\n\n// Copyright (c) 2021 GeekyAnts India Pvt Ltd\n\n// Permission is hereby granted, free of charge, to any person obtaining a copy of\n// this software and associated documentation files (the \"Software\"), to deal in\n// the Software without restriction, including without limitation the rights to\n// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of\n// the Software, and to permit persons to whom the Software is furnished to do so,\n// subject to the following conditions:\n\n// The above copyright notice and this permission notice shall be included in all\n// copies or substantial portions of the Software.\n\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS\n// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR\n// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER\n// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\n// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\nimport React from 'react'\n\nexport function useControllableProp<T>(prop: T | undefined, state: T) {\n  const { current: isControlled } = React.useRef(prop !== undefined)\n  const value = isControlled && typeof prop !== 'undefined' ? prop : state\n  return [isControlled, value] as const\n}\n\nexport interface UseControllableStateProps<T> {\n  /**\n   * The value to used in controlled mode\n   */\n  value?: T\n  /**\n   * The initial value to be used, in uncontrolled mode\n   */\n  defaultValue?: T | (() => T)\n  /**\n   * The callback fired when the value changes\n   */\n  onChange?: (value: T) => void\n  /**\n   * The component name (for warnings)\n   */\n  name?: string\n}\n\n/**\n * React hook for using controlling component state.\n * @param props\n */\nexport function useControllableState<T>(props: UseControllableStateProps<T>) {\n  const { value: valueProp, defaultValue, onChange } = props\n\n  const [valueState, setValue] = React.useState(defaultValue as T)\n  const isControlled = valueProp !== undefined\n\n  const value = isControlled ? (valueProp as T) : valueState\n\n  const updateValue = React.useCallback(\n    (next: any) => {\n      const nextValue = typeof next === 'function' ? next(value) : next\n      if (!isControlled) {\n        setValue(nextValue)\n      }\n      onChange && onChange(nextValue)\n    },\n    [isControlled, onChange, value]\n  )\n\n  return [value, updateValue] as [T, React.Dispatch<React.SetStateAction<T>>]\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAsBA,mBAAkB;AAEX,6BAAgC,MAAqB,OAAU;AACpE,QAAM,EAAE,SAAS,iBAAiB,qBAAM,OAAO,SAAS;AACxD,QAAM,QAAQ,gBAAgB,OAAO,SAAS,cAAc,OAAO;AACnE,SAAO,CAAC,cAAc;AAAA;AAHR;AA6BT,8BAAiC,OAAqC;AAC3E,QAAM,EAAE,OAAO,WAAW,cAAc,aAAa;AAErD,QAAM,CAAC,YAAY,YAAY,qBAAM,SAAS;AAC9C,QAAM,eAAe,cAAc;AAEnC,QAAM,QAAQ,eAAgB,YAAkB;AAEhD,QAAM,cAAc,qBAAM,YACxB,CAAC,SAAc;AACb,UAAM,YAAY,OAAO,SAAS,aAAa,KAAK,SAAS;AAC7D,QAAI,CAAC,cAAc;AACjB,eAAS;AAAA;AAEX,gBAAY,SAAS;AAAA,KAEvB,CAAC,cAAc,UAAU;AAG3B,SAAO,CAAC,OAAO;AAAA;AAnBD;",
+  "names": []
+}

package/dist/cjs/hooks/useDebounce.js

@@ -0,0 +1,89 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  debounce: () => debounce,
+  useDebounce: () => useDebounce,
+  useDebounceValue: () => useDebounceValue
+});
+var import_react = __toModule(require("react"));
+function debounce(func, wait, leading) {
+  let timeout;
+  let isCancelled;
+  function debounced() {
+    isCancelled = false;
+    let context = this;
+    let args = arguments;
+    if (leading && !timeout) {
+      func.apply(context, args);
+    }
+    clearTimeout(timeout);
+    timeout = setTimeout(function() {
+      timeout = null;
+      if (!leading && !isCancelled) {
+        func.apply(context, args);
+      }
+      isCancelled = false;
+    }, wait);
+  }
+  __name(debounced, "debounced");
+  debounced.cancel = () => {
+    isCancelled = true;
+  };
+  return debounced;
+}
+__name(debounce, "debounce");
+const defaultOpts = { leading: false };
+function useDebounce(fn, wait, options = defaultOpts, mountArgs = []) {
+  const dbEffect = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      var _a;
+      (_a = dbEffect.current) == null ? void 0 : _a.cancel();
+    };
+  }, []);
+  return (0, import_react.useMemo)(() => {
+    dbEffect.current = debounce(fn, wait, options.leading);
+    return dbEffect.current;
+  }, [options.leading, ...mountArgs]);
+}
+__name(useDebounce, "useDebounce");
+function useDebounceValue(val, amt = 0) {
+  const [state, setState] = (0, import_react.useState)(val);
+  (0, import_react.useEffect)(() => {
+    let tm = setTimeout(() => {
+      setState((prev) => {
+        if (prev === val)
+          return prev;
+        return val;
+      });
+    }, amt);
+    return () => {
+      clearTimeout(tm);
+    };
+  }, [val]);
+  return state;
+}
+__name(useDebounceValue, "useDebounceValue");
+//# sourceMappingURL=useDebounce.js.map

package/dist/cjs/hooks/useDebounce.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useDebounce.ts"],
+  "sourcesContent": ["import { useEffect, useMemo, useRef, useState } from 'react'\n\ntype DebounceSettings = {\n  leading?: boolean\n}\n\nexport function debounce<A extends Function>(\n  func: A,\n  wait?: number,\n  leading?: boolean\n): A & {\n  cancel: Function\n} {\n  let timeout: any\n  let isCancelled\n  function debounced() {\n    isCancelled = false\n    // @ts-ignore\n    let context = this\n    let args = arguments\n    if (leading && !timeout) {\n      func.apply(context, args)\n    }\n    clearTimeout(timeout)\n    timeout = setTimeout(function () {\n      timeout = null\n      if (!leading && !isCancelled) {\n        func.apply(context, args)\n      }\n      isCancelled = false\n    }, wait)\n  }\n  debounced.cancel = () => {\n    isCancelled = true\n  }\n  return debounced as any\n}\n\nconst defaultOpts = { leading: false }\n\nexport function useDebounce<\n  A extends (...args: any) => any | undefined | null,\n  DebouncedFn extends A & {\n    cancel: () => void\n  }\n>(fn: A, wait: number, options: DebounceSettings = defaultOpts, mountArgs: any[] = []): DebouncedFn {\n  const dbEffect = useRef<DebouncedFn | null>(null)\n\n  useEffect(() => {\n    return () => {\n      dbEffect.current?.cancel()\n    }\n  }, [])\n\n  return useMemo(() => {\n    dbEffect.current = debounce(fn, wait, options.leading) as unknown as DebouncedFn\n    return dbEffect.current\n  }, [options.leading, ...mountArgs])\n}\n\n/**\n * Returns a value once it stops changing after \"amt\" time.\n * Note: you may need to memo or this will keep re-rendering\n */\nexport function useDebounceValue<A>(val: A, amt = 0): A {\n  const [state, setState] = useState(val)\n\n  useEffect(() => {\n    let tm = setTimeout(() => {\n      setState((prev) => {\n        if (prev === val) return prev\n        return val\n      })\n    }, amt)\n\n    return () => {\n      clearTimeout(tm)\n    }\n  }, [val])\n\n  return state\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqD;AAM9C,kBACL,MACA,MACA,SAGA;AACA,MAAI;AACJ,MAAI;AACJ,uBAAqB;AACnB,kBAAc;AAEd,QAAI,UAAU;AACd,QAAI,OAAO;AACX,QAAI,WAAW,CAAC,SAAS;AACvB,WAAK,MAAM,SAAS;AAAA;AAEtB,iBAAa;AACb,cAAU,WAAW,WAAY;AAC/B,gBAAU;AACV,UAAI,CAAC,WAAW,CAAC,aAAa;AAC5B,aAAK,MAAM,SAAS;AAAA;AAEtB,oBAAc;AAAA,OACb;AAAA;AAfI;AAiBT,YAAU,SAAS,MAAM;AACvB,kBAAc;AAAA;AAEhB,SAAO;AAAA;AA7BO;AAgChB,MAAM,cAAc,EAAE,SAAS;AAExB,qBAKL,IAAO,MAAc,UAA4B,aAAa,YAAmB,IAAiB;AAClG,QAAM,WAAW,yBAA2B;AAE5C,8BAAU,MAAM;AACd,WAAO,MAAM;AAjDjB;AAkDM,qBAAS,YAAT,mBAAkB;AAAA;AAAA,KAEnB;AAEH,SAAO,0BAAQ,MAAM;AACnB,aAAS,UAAU,SAAS,IAAI,MAAM,QAAQ;AAC9C,WAAO,SAAS;AAAA,KACf,CAAC,QAAQ,SAAS,GAAG;AAAA;AAjBV;AAwBT,0BAA6B,KAAQ,MAAM,GAAM;AACtD,QAAM,CAAC,OAAO,YAAY,2BAAS;AAEnC,8BAAU,MAAM;AACd,QAAI,KAAK,WAAW,MAAM;AACxB,eAAS,CAAC,SAAS;AACjB,YAAI,SAAS;AAAK,iBAAO;AACzB,eAAO;AAAA;AAAA,OAER;AAEH,WAAO,MAAM;AACX,mBAAa;AAAA;AAAA,KAEd,CAAC;AAEJ,SAAO;AAAA;AAhBO;",
+  "names": []
+}

package/dist/cjs/hooks/useKeyboardDismissable.js

@@ -0,0 +1,94 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  keyboardDismissHandlerManager: () => keyboardDismissHandlerManager,
+  useBackHandler: () => useBackHandler,
+  useKeyboardDismissable: () => useKeyboardDismissable
+});
+var import_core = __toModule(require("@tamagui/core"));
+var import_react = __toModule(require("react"));
+var import_react_native = __toModule(require("react-native"));
+let keyboardDismissHandlers = [];
+const keyboardDismissHandlerManager = {
+  push: (handler) => {
+    keyboardDismissHandlers.push(handler);
+    return () => {
+      keyboardDismissHandlers = keyboardDismissHandlers.filter((h) => h !== handler);
+    };
+  },
+  length: () => keyboardDismissHandlers.length,
+  pop: () => {
+    return keyboardDismissHandlers.pop();
+  }
+};
+const useKeyboardDismissable = /* @__PURE__ */ __name(({ enabled, callback }) => {
+  (0, import_react.useEffect)(() => {
+    let cleanupFn = /* @__PURE__ */ __name(() => {
+    }, "cleanupFn");
+    if (enabled) {
+      cleanupFn = keyboardDismissHandlerManager.push(callback);
+    } else {
+      cleanupFn();
+    }
+    return () => {
+      cleanupFn();
+    };
+  }, [enabled, callback]);
+  useBackHandler({ enabled, callback });
+}, "useKeyboardDismissable");
+const callbackOnEscape = /* @__PURE__ */ __name((callback) => (e) => {
+  if (e.key === "Escape") {
+    if (!(document.activeElement instanceof HTMLInputElement) && !(document.activeElement instanceof HTMLTextAreaElement)) {
+      e.preventDefault();
+      e.stopPropagation();
+      callback();
+    }
+  }
+}, "callbackOnEscape");
+function useBackHandler({ enabled, callback }) {
+  (0, import_react.useEffect)(() => {
+    let backHandler = /* @__PURE__ */ __name(() => {
+      callback();
+      return true;
+    }, "backHandler");
+    const keyHandler = callbackOnEscape(callback);
+    if (enabled) {
+      import_react_native.BackHandler.addEventListener("hardwareBackPress", backHandler);
+      if (import_core.isWeb) {
+        window.addEventListener("keydown", keyHandler);
+      }
+    } else {
+      import_react_native.BackHandler.removeEventListener("hardwareBackPress", backHandler);
+    }
+    return () => {
+      import_react_native.BackHandler.removeEventListener("hardwareBackPress", backHandler);
+      if (import_core.isWeb) {
+        window.removeEventListener("keydown", keyHandler);
+      }
+    };
+  }, [enabled, callback]);
+}
+__name(useBackHandler, "useBackHandler");
+//# sourceMappingURL=useKeyboardDismissable.js.map

package/dist/cjs/hooks/useKeyboardDismissable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useKeyboardDismissable.tsx"],
+  "sourcesContent": ["// forked from NativeBase\n// The MIT License (MIT)\n\n// Copyright (c) 2021 GeekyAnts India Pvt Ltd\n\n// Permission is hereby granted, free of charge, to any person obtaining a copy of\n// this software and associated documentation files (the \"Software\"), to deal in\n// the Software without restriction, including without limitation the rights to\n// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of\n// the Software, and to permit persons to whom the Software is furnished to do so,\n// subject to the following conditions:\n\n// The above copyright notice and this permission notice shall be included in all\n// copies or substantial portions of the Software.\n\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS\n// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR\n// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER\n// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\n// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\nimport { isWeb } from '@tamagui/core'\nimport { useEffect } from 'react'\nimport { BackHandler } from 'react-native'\n\ntype IParams = {\n  enabled?: boolean\n  callback: () => any\n}\n\nlet keyboardDismissHandlers: Array<() => any> = []\nexport const keyboardDismissHandlerManager = {\n  push: (handler: () => any) => {\n    keyboardDismissHandlers.push(handler)\n    return () => {\n      keyboardDismissHandlers = keyboardDismissHandlers.filter((h) => h !== handler)\n    }\n  },\n  length: () => keyboardDismissHandlers.length,\n  pop: () => {\n    return keyboardDismissHandlers.pop()\n  },\n}\n\nexport const useKeyboardDismissable = ({ enabled, callback }: IParams) => {\n  useEffect(() => {\n    let cleanupFn = () => {}\n    if (enabled) {\n      cleanupFn = keyboardDismissHandlerManager.push(callback)\n    } else {\n      cleanupFn()\n    }\n    return () => {\n      cleanupFn()\n    }\n  }, [enabled, callback])\n\n  useBackHandler({ enabled, callback })\n}\n\nconst callbackOnEscape = (callback) => (e) => {\n  if (e.key === 'Escape') {\n    if (\n      !(document.activeElement instanceof HTMLInputElement) &&\n      !(document.activeElement instanceof HTMLTextAreaElement)\n    ) {\n      e.preventDefault()\n      e.stopPropagation()\n      callback()\n    }\n  }\n}\n\nexport function useBackHandler({ enabled, callback }: IParams) {\n  useEffect(() => {\n    let backHandler = () => {\n      callback()\n      return true\n    }\n    const keyHandler = callbackOnEscape(callback)\n    if (enabled) {\n      BackHandler.addEventListener('hardwareBackPress', backHandler)\n      if (isWeb) {\n        window.addEventListener('keydown', keyHandler)\n      }\n    } else {\n      BackHandler.removeEventListener('hardwareBackPress', backHandler)\n    }\n    return () => {\n      BackHandler.removeEventListener('hardwareBackPress', backHandler)\n      if (isWeb) {\n        window.removeEventListener('keydown', keyHandler)\n      }\n    }\n  }, [enabled, callback])\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA,kBAAsB;AACtB,mBAA0B;AAC1B,0BAA4B;AAO5B,IAAI,0BAA4C;AACzC,MAAM,gCAAgC;AAAA,EAC3C,MAAM,CAAC,YAAuB;AAC5B,4BAAwB,KAAK;AAC7B,WAAO,MAAM;AACX,gCAA0B,wBAAwB,OAAO,CAAC,MAAM,MAAM;AAAA;AAAA;AAAA,EAG1E,QAAQ,MAAM,wBAAwB;AAAA,EACtC,KAAK,MAAM;AACT,WAAO,wBAAwB;AAAA;AAAA;AAI5B,MAAM,yBAAyB,wBAAC,EAAE,SAAS,eAAwB;AACxE,8BAAU,MAAM;AACd,QAAI,YAAY,6BAAM;AAAA,OAAN;AAChB,QAAI,SAAS;AACX,kBAAY,8BAA8B,KAAK;AAAA,WAC1C;AACL;AAAA;AAEF,WAAO,MAAM;AACX;AAAA;AAAA,KAED,CAAC,SAAS;AAEb,iBAAe,EAAE,SAAS;AAAA,GAbU;AAgBtC,MAAM,mBAAmB,wBAAC,aAAa,CAAC,MAAM;AAC5C,MAAI,EAAE,QAAQ,UAAU;AACtB,QACE,CAAE,UAAS,yBAAyB,qBACpC,CAAE,UAAS,yBAAyB,sBACpC;AACA,QAAE;AACF,QAAE;AACF;AAAA;AAAA;AAAA,GARmB;AAalB,wBAAwB,EAAE,SAAS,YAAqB;AAC7D,8BAAU,MAAM;AACd,QAAI,cAAc,6BAAM;AACtB;AACA,aAAO;AAAA,OAFS;AAIlB,UAAM,aAAa,iBAAiB;AACpC,QAAI,SAAS;AACX,sCAAY,iBAAiB,qBAAqB;AAClD,UAAI,mBAAO;AACT,eAAO,iBAAiB,WAAW;AAAA;AAAA,WAEhC;AACL,sCAAY,oBAAoB,qBAAqB;AAAA;AAEvD,WAAO,MAAM;AACX,sCAAY,oBAAoB,qBAAqB;AACrD,UAAI,mBAAO;AACT,eAAO,oBAAoB,WAAW;AAAA;AAAA;AAAA,KAGzC,CAAC,SAAS;AAAA;AArBC;",
+  "names": []
+}

package/dist/cjs/hooks/useLayout.js

@@ -0,0 +1,79 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  useLayout: () => useLayout
+});
+var import_core = __toModule(require("@tamagui/core"));
+var import_react = __toModule(require("react"));
+const useLayout = /* @__PURE__ */ __name((props = {}) => {
+  const [layout, setLayout] = (0, import_react.useState)(null);
+  if (!import_core.isWeb) {
+    return {
+      layout,
+      onLayout: props.onLayout
+    };
+  }
+  const ref = (0, import_react.useRef)(null);
+  (0, import_core.useIsomorphicLayoutEffect)(() => {
+    const node = ref.current;
+    if (!node)
+      return;
+    let last = null;
+    const getNextAndCallback = /* @__PURE__ */ __name((rect) => {
+      var _a;
+      let next;
+      const width = Math.max(1, Math.round(rect.width));
+      const height = Math.max(1, Math.round(rect.height));
+      if (!last || width !== last.width || height !== last.height) {
+        next = { width, height };
+      }
+      if (next) {
+        (_a = props.onLayout) == null ? void 0 : _a.call(props, { nativeEvent: { layout: next } });
+        last = next;
+        return next;
+      }
+      return last;
+    }, "getNextAndCallback");
+    const update = /* @__PURE__ */ __name((rect) => {
+      if (props.stateless) {
+        getNextAndCallback(rect);
+      } else {
+        setLayout((p) => getNextAndCallback(rect));
+      }
+    }, "update");
+    const ro = new ResizeObserver(([{ contentRect }] = []) => {
+      update(contentRect);
+    });
+    ro.observe(node);
+    return () => {
+      ro.disconnect();
+    };
+  }, [ref]);
+  return {
+    layout,
+    ref
+  };
+}, "useLayout");
+//# sourceMappingURL=useLayout.js.map

package/dist/cjs/hooks/useLayout.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useLayout.tsx"],
+  "sourcesContent": ["import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport { useRef, useState } from 'react'\nimport { LayoutChangeEvent, LayoutRectangle } from 'react-native'\n\nexport const useLayout = (props: { stateless?: boolean; onLayout?: (rect: LayoutChangeEvent) => void } = {}) => {\n  const [layout, setLayout] = useState<LayoutRectangle | null>(null)\n\n  if (!isWeb) {\n    return {\n      layout,\n      onLayout: props.onLayout,\n    }\n  }\n\n  const ref = useRef<any>(null)\n\n  useIsomorphicLayoutEffect(() => {\n    const node = ref.current\n    if (!node) return\n    // let hasUpdatedOnce = false\n    let last: LayoutRectangle | null = null\n\n    const getNextAndCallback = (rect: LayoutRectangle) => {\n      let next\n      const width = Math.max(1, Math.round(rect.width))\n      const height = Math.max(1, Math.round(rect.height))\n      // don't set new layout state unless the layout has actually changed\n      if (!last || width !== last.width || height !== last.height) {\n        next = { width, height }\n      }\n      if (next) {\n        // @ts-expect-error\n        props.onLayout?.({ nativeEvent: { layout: next } })\n        last = next\n        return next\n      }\n      return last\n    }\n\n    const update = (rect: LayoutRectangle) => {\n      if (props.stateless) {\n        getNextAndCallback(rect)\n      } else {\n        setLayout((p) => getNextAndCallback(rect))\n      }\n    }\n\n    const ro = new ResizeObserver(([{ contentRect }] = []) => {\n      update(contentRect)\n    })\n    ro.observe(node)\n\n    return () => {\n      ro.disconnect()\n    }\n  }, [ref])\n\n  return {\n    layout,\n    ref,\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,kBAAiD;AACjD,mBAAiC;AAG1B,MAAM,YAAY,wBAAC,QAA+E,OAAO;AAC9G,QAAM,CAAC,QAAQ,aAAa,2BAAiC;AAE7D,MAAI,CAAC,mBAAO;AACV,WAAO;AAAA,MACL;AAAA,MACA,UAAU,MAAM;AAAA;AAAA;AAIpB,QAAM,MAAM,yBAAY;AAExB,6CAA0B,MAAM;AAC9B,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC;AAAM;AAEX,QAAI,OAA+B;AAEnC,UAAM,qBAAqB,wBAAC,SAA0B;AAtB1D;AAuBM,UAAI;AACJ,YAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK;AAC1C,YAAM,SAAS,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK;AAE3C,UAAI,CAAC,QAAQ,UAAU,KAAK,SAAS,WAAW,KAAK,QAAQ;AAC3D,eAAO,EAAE,OAAO;AAAA;AAElB,UAAI,MAAM;AAER,oBAAM,aAAN,+BAAiB,EAAE,aAAa,EAAE,QAAQ;AAC1C,eAAO;AACP,eAAO;AAAA;AAET,aAAO;AAAA,OAdkB;AAiB3B,UAAM,SAAS,wBAAC,SAA0B;AACxC,UAAI,MAAM,WAAW;AACnB,2BAAmB;AAAA,aACd;AACL,kBAAU,CAAC,MAAM,mBAAmB;AAAA;AAAA,OAJzB;AAQf,UAAM,KAAK,IAAI,eAAe,CAAC,CAAC,EAAE,iBAAiB,OAAO;AACxD,aAAO;AAAA;AAET,OAAG,QAAQ;AAEX,WAAO,MAAM;AACX,SAAG;AAAA;AAAA,KAEJ,CAAC;AAEJ,SAAO;AAAA,IACL;AAAA,IACA;AAAA;AAAA,GAvDqB;",
+  "names": []
+}