@tamagui/demos 2.7.7 → 3.0.0-beta.1091.1

package/dist/cjs/TabsAdvancedDemo.cjs

@@ -5,358 +5,310 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
 };
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
 }) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var TabsAdvancedDemo_exports = {};
-__export(TabsAdvancedDemo_exports, {
-  TabsAdvancedDemo: () => TabsAdvancedDemo
-});
+__export(TabsAdvancedDemo_exports, { TabsAdvancedDemo: () => TabsAdvancedDemo });
 module.exports = __toCommonJS(TabsAdvancedDemo_exports);
 var import_react = __toESM(require("react"), 1);
 var import_tamagui = require("tamagui");
 var import_jsx_runtime = require("react/jsx-runtime");
 const demos = ["background", "underline"];
 const demosTitle = {
-  background: "Background Indicator",
-  underline: "Underline Indicator"
+	background: "Background Indicator",
+	underline: "Underline Indicator"
 };
 const TabsAdvancedDemo = () => {
-  const [demoIndex, setDemoIndex] = import_react.default.useState(0);
-  const demo = demos[demoIndex];
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-    children: [demo === "underline" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsAdvancedUnderline, {}) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsAdvancedBackground, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-      items: "center",
-      gap: "$4",
-      position: "absolute",
-      b: "$3",
-      l: "$4",
-      $xxs: {
-        display: "none"
-      },
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
-        size: "$2",
-        onPress: () => setDemoIndex(x => (x + 1) % demos.length),
-        children: demosTitle[demo]
-      })
-    })]
-  });
+	const [demoIndex, setDemoIndex] = import_react.default.useState(0);
+	const demo = demos[demoIndex];
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [demo === "underline" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsAdvancedUnderline, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsAdvancedBackground, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+		items: "center",
+		gap: "4",
+		position: "absolute",
+		b: "3",
+		l: "4",
+		display: "xxs:none",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+			size: "2",
+			onPress: () => setDemoIndex((x) => (x + 1) % demos.length),
+			children: demosTitle[demo]
+		})
+	})] });
 };
 const TabsAdvancedBackground = () => {
-  const [tabState, setTabState] = import_react.default.useState({
-    activeAt: null,
-    currentTab: "tab1",
-    intentAt: null,
-    prevActiveAt: null
-  });
-  const setCurrentTab = currentTab2 => setTabState({
-    ...tabState,
-    currentTab: currentTab2
-  });
-  const setIntentIndicator = intentAt2 => setTabState({
-    ...tabState,
-    intentAt: intentAt2
-  });
-  const setActiveIndicator = activeAt2 => setTabState({
-    ...tabState,
-    prevActiveAt: tabState.activeAt,
-    activeAt: activeAt2
-  });
-  const {
-    activeAt,
-    intentAt,
-    prevActiveAt,
-    currentTab
-  } = tabState;
-  const direction = (() => {
-    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
-      return 0;
-    }
-    return activeAt.x > prevActiveAt.x ? -1 : 1;
-  })();
-  const handleOnInteraction = (type, layout) => {
-    if (type === "select") {
-      setActiveIndicator(layout);
-    } else {
-      setIntentIndicator(layout);
-    }
-  };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
-    value: currentTab,
-    onValueChange: setCurrentTab,
-    orientation: "horizontal",
-    size: "$4",
-    p: "$2",
-    height: 150,
-    flexDirection: "column",
-    activationMode: "manual",
-    bg: "$background",
-    rounded: "$4",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
-      children: intentAt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
-        rounded: "$4",
-        width: intentAt.width,
-        height: intentAt.height,
-        x: intentAt.x,
-        y: intentAt.y
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
-      children: activeAt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
-        rounded: "$4",
-        theme: "accent",
-        width: activeAt.width,
-        height: activeAt.height,
-        x: activeAt.x,
-        y: activeAt.y
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-      position: "relative",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, {
-        loop: false,
-        "aria-label": "Manage your account",
-        gap: "$2",
-        backgroundColor: "transparent",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab1",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-            children: "Profile"
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab2",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-            children: "Connections"
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab3",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-            children: "Notifications"
-          })
-        })]
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
-      exitBeforeEnter: true,
-      custom: {
-        direction
-      },
-      initial: false,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedYStack, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, {
-          value: currentTab,
-          forceMount: true,
-          flex: 1,
-          justify: "center",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H5, {
-            text: "center",
-            children: currentTab
-          })
-        })
-      }, currentTab)
-    })]
-  });
+	const [tabState, setTabState] = import_react.default.useState({
+		activeAt: null,
+		currentTab: "tab1",
+		intentAt: null,
+		prevActiveAt: null
+	});
+	const setCurrentTab = (currentTab2) => setTabState({
+		...tabState,
+		currentTab: currentTab2
+	});
+	const setIntentIndicator = (intentAt2) => setTabState({
+		...tabState,
+		intentAt: intentAt2
+	});
+	const setActiveIndicator = (activeAt2) => setTabState({
+		...tabState,
+		prevActiveAt: tabState.activeAt,
+		activeAt: activeAt2
+	});
+	const { activeAt, intentAt, prevActiveAt, currentTab } = tabState;
+	const direction = (() => {
+		if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
+			return 0;
+		}
+		return activeAt.x > prevActiveAt.x ? -1 : 1;
+	})();
+	const handleOnInteraction = (type, layout) => {
+		if (type === "select") {
+			setActiveIndicator(layout);
+		} else {
+			setIntentIndicator(layout);
+		}
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
+		value: currentTab,
+		onValueChange: setCurrentTab,
+		orientation: "horizontal",
+		size: "4",
+		p: "2",
+		height: 150,
+		flexDirection: "column",
+		bg: "background",
+		rounded: "4",
+		activationMode: "manual",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, { children: intentAt && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
+				rounded: "4",
+				width: intentAt.width,
+				height: intentAt.height,
+				x: intentAt.x,
+				y: intentAt.y
+			}) }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, { children: activeAt && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
+				rounded: "4",
+				theme: "accent",
+				width: activeAt.width,
+				height: activeAt.height,
+				x: activeAt.x,
+				y: activeAt.y
+			}) }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+				position: "relative",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, {
+					loop: false,
+					"aria-label": "Manage your account",
+					gap: "2",
+					backgroundColor: "transparent",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+							unstyled: true,
+							paddingHorizontal: "3",
+							value: "tab1",
+							onInteraction: handleOnInteraction,
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { children: "Profile" })
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+							unstyled: true,
+							paddingHorizontal: "3",
+							value: "tab2",
+							onInteraction: handleOnInteraction,
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { children: "Connections" })
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+							unstyled: true,
+							paddingHorizontal: "3",
+							value: "tab3",
+							onInteraction: handleOnInteraction,
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { children: "Notifications" })
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
+				mode: "wait",
+				custom: { direction },
+				initial: false,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatedYStack, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, {
+					value: currentTab,
+					forceMount: true,
+					flex: 1,
+					justify: "center",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, {
+						text: "center",
+						children: currentTab
+					})
+				}) }, currentTab)
+			})
+		]
+	});
 };
 const TabsAdvancedUnderline = () => {
-  const [tabState, setTabState] = import_react.default.useState({
-    activeAt: null,
-    currentTab: "tab1",
-    intentAt: null,
-    prevActiveAt: null
-  });
-  const setCurrentTab = currentTab2 => setTabState({
-    ...tabState,
-    currentTab: currentTab2
-  });
-  const setIntentIndicator = intentAt2 => setTabState({
-    ...tabState,
-    intentAt: intentAt2
-  });
-  const setActiveIndicator = activeAt2 => setTabState({
-    ...tabState,
-    prevActiveAt: tabState.activeAt,
-    activeAt: activeAt2
-  });
-  const {
-    activeAt,
-    intentAt,
-    prevActiveAt,
-    currentTab
-  } = tabState;
-  const direction = (() => {
-    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
-      return 0;
-    }
-    return activeAt.x > prevActiveAt.x ? -1 : 1;
-  })();
-  const handleOnInteraction = (type, layout) => {
-    if (type === "select") {
-      setActiveIndicator(layout);
-    } else {
-      setIntentIndicator(layout);
-    }
-  };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
-    value: currentTab,
-    onValueChange: setCurrentTab,
-    orientation: "horizontal",
-    size: "$4",
-    height: 150,
-    flexDirection: "column",
-    activationMode: "manual",
-    bg: "$background",
-    rounded: "$4",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-      position: "relative",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
-        children: intentAt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
-          width: intentAt.width,
-          height: "$0.5",
-          x: intentAt.x,
-          b: 0
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
-        children: activeAt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
-          theme: "accent",
-          active: true,
-          width: activeAt.width,
-          height: "$0.5",
-          x: activeAt.x,
-          b: 0
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, {
-        loop: false,
-        "aria-label": "Manage your account",
-        borderBottomLeftRadius: 0,
-        borderBottomRightRadius: 0,
-        paddingBottom: "$1.5",
-        borderColor: "$color3",
-        borderBottomWidth: "$0.5",
-        backgroundColor: "transparent",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab1",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-            select: "none",
-            cursor: "default",
-            children: "Profile"
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab2",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-            select: "none",
-            cursor: "default",
-            children: "Connections"
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab3",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-            select: "none",
-            cursor: "default",
-            children: "Notifications"
-          })
-        })]
-      })]
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
-      mode: "wait",
-      custom: {
-        direction
-      },
-      initial: false,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedYStack, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, {
-          value: currentTab,
-          forceMount: true,
-          flex: 1,
-          justify: "center",
-          flexBasis: "auto",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H5, {
-            text: "center",
-            children: currentTab
-          })
-        })
-      }, currentTab)
-    })]
-  });
+	const [tabState, setTabState] = import_react.default.useState({
+		activeAt: null,
+		currentTab: "tab1",
+		intentAt: null,
+		prevActiveAt: null
+	});
+	const setCurrentTab = (currentTab2) => setTabState({
+		...tabState,
+		currentTab: currentTab2
+	});
+	const setIntentIndicator = (intentAt2) => setTabState({
+		...tabState,
+		intentAt: intentAt2
+	});
+	const setActiveIndicator = (activeAt2) => setTabState({
+		...tabState,
+		prevActiveAt: tabState.activeAt,
+		activeAt: activeAt2
+	});
+	const { activeAt, intentAt, prevActiveAt, currentTab } = tabState;
+	const direction = (() => {
+		if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
+			return 0;
+		}
+		return activeAt.x > prevActiveAt.x ? -1 : 1;
+	})();
+	const handleOnInteraction = (type, layout) => {
+		if (type === "select") {
+			setActiveIndicator(layout);
+		} else {
+			setIntentIndicator(layout);
+		}
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
+		value: currentTab,
+		onValueChange: setCurrentTab,
+		orientation: "horizontal",
+		size: "4",
+		height: 150,
+		flexDirection: "column",
+		bg: "background",
+		rounded: "4",
+		activationMode: "manual",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+			position: "relative",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, { children: intentAt && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
+					width: intentAt.width,
+					height: "0-5",
+					x: intentAt.x,
+					b: 0
+				}) }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, { children: activeAt && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
+					theme: "accent",
+					active: true,
+					width: activeAt.width,
+					height: "0-5",
+					x: activeAt.x,
+					b: 0
+				}) }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, {
+					loop: false,
+					"aria-label": "Manage your account",
+					borderBottomLeftRadius: 0,
+					borderBottomRightRadius: 0,
+					paddingBottom: "1-5",
+					borderColor: "color3",
+					borderBottomWidth: "0-5",
+					backgroundColor: "transparent",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+							unstyled: true,
+							paddingHorizontal: "3",
+							value: "tab1",
+							onInteraction: handleOnInteraction,
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+								select: "none",
+								cursor: "default",
+								children: "Profile"
+							})
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+							unstyled: true,
+							paddingHorizontal: "3",
+							value: "tab2",
+							onInteraction: handleOnInteraction,
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+								select: "none",
+								cursor: "default",
+								children: "Connections"
+							})
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+							unstyled: true,
+							paddingHorizontal: "3",
+							value: "tab3",
+							onInteraction: handleOnInteraction,
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+								select: "none",
+								cursor: "default",
+								children: "Notifications"
+							})
+						})
+					]
+				})
+			]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
+			mode: "wait",
+			custom: { direction },
+			initial: false,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatedYStack, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, {
+				value: currentTab,
+				forceMount: true,
+				flex: 1,
+				justify: "center",
+				flexBasis: "auto",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, {
+					text: "center",
+					children: currentTab
+				})
+			}) }, currentTab)
+		})]
+	});
 };
-const TabsRovingIndicator = ({
-  active,
-  ...props
-}) => {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-    position: "absolute",
-    backgroundColor: "$color5",
-    opacity: 0.7,
-    transition: "100ms",
-    enterStyle: {
-      opacity: 0
-    },
-    exitStyle: {
-      opacity: 0
-    },
-    ...(active && {
-      backgroundColor: "$color5",
-      opacity: 0.6
-    }),
-    ...props
-  });
+const TabsRovingIndicator = ({ active, ...props }) => {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+		position: "absolute",
+		backgroundColor: "color5",
+		opacity: "0.7 enter:0 exit:0",
+		transition: "100ms",
+		...active && {
+			backgroundColor: "color5",
+			opacity: .6
+		},
+		...props
+	});
 };
 const AnimatedYStack = (0, import_tamagui.styled)(import_tamagui.YStack, {
-  flex: 1,
-  x: 0,
-  opacity: 1,
-  transition: "100ms",
-  variants: {
-    // 1 = right, 0 = nowhere, -1 = left
-    direction: {
-      ":number": direction => ({
-        enterStyle: {
-          x: direction > 0 ? -25 : 25,
-          opacity: 0
-        },
-        exitStyle: {
-          zIndex: 0,
-          x: direction < 0 ? -25 : 25,
-          opacity: 0
-        }
-      })
-    }
-  }
-});
+	flex: 1,
+	x: 0,
+	opacity: 1,
+	transition: "100ms",
+	variants: { direction: import_tamagui.styled.dynamic((direction) => ({
+		x: `enter:${direction > 0 ? -25 : 25}px exit:${direction < 0 ? -25 : 25}px`,
+		opacity: "enter:0 exit:0",
+		zIndex: "exit:0"
+	})) }
+});