@tamagui/demos 2.7.7 → 3.0.0-beta.643.1

package/dist/esm/TabsAdvancedDemo.mjs

@@ -1,326 +1,289 @@
 import React from "react";
 import { AnimatePresence, Button, H5, SizableText, Tabs, XStack, YStack, styled } from "tamagui";
 import { Fragment, jsx, jsxs } from "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] = React.useState(0);
-  const demo = demos[demoIndex];
-  return /* @__PURE__ */jsxs(Fragment, {
-    children: [demo === "underline" ? /* @__PURE__ */jsx(TabsAdvancedUnderline, {}) : /* @__PURE__ */jsx(TabsAdvancedBackground, {}), /* @__PURE__ */jsx(XStack, {
-      items: "center",
-      gap: "$4",
-      position: "absolute",
-      b: "$3",
-      l: "$4",
-      $xxs: {
-        display: "none"
-      },
-      children: /* @__PURE__ */jsx(Button, {
-        size: "$2",
-        onPress: () => setDemoIndex(x => (x + 1) % demos.length),
-        children: demosTitle[demo]
-      })
-    })]
-  });
+	const [demoIndex, setDemoIndex] = React.useState(0);
+	const demo = demos[demoIndex];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [demo === "underline" ? /* @__PURE__ */ jsx(TabsAdvancedUnderline, {}) : /* @__PURE__ */ jsx(TabsAdvancedBackground, {}), /* @__PURE__ */ jsx(XStack, {
+		items: "center",
+		gap: "4",
+		position: "absolute",
+		b: "3",
+		l: "4",
+		display: "xxs:none",
+		children: /* @__PURE__ */ jsx(Button, {
+			size: "2",
+			onPress: () => setDemoIndex((x) => (x + 1) % demos.length),
+			children: demosTitle[demo]
+		})
+	})] });
 };
 const TabsAdvancedBackground = () => {
-  const [tabState, setTabState] = React.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__ */jsxs(Tabs, {
-    value: currentTab,
-    onValueChange: setCurrentTab,
-    orientation: "horizontal",
-    size: "$4",
-    p: "$2",
-    height: 150,
-    flexDirection: "column",
-    activationMode: "manual",
-    bg: "$background",
-    rounded: "$4",
-    children: [/* @__PURE__ */jsx(AnimatePresence, {
-      children: intentAt && /* @__PURE__ */jsx(TabsRovingIndicator, {
-        rounded: "$4",
-        width: intentAt.width,
-        height: intentAt.height,
-        x: intentAt.x,
-        y: intentAt.y
-      })
-    }), /* @__PURE__ */jsx(AnimatePresence, {
-      children: activeAt && /* @__PURE__ */jsx(TabsRovingIndicator, {
-        rounded: "$4",
-        theme: "accent",
-        width: activeAt.width,
-        height: activeAt.height,
-        x: activeAt.x,
-        y: activeAt.y
-      })
-    }), /* @__PURE__ */jsx(YStack, {
-      position: "relative",
-      children: /* @__PURE__ */jsxs(Tabs.List, {
-        loop: false,
-        "aria-label": "Manage your account",
-        gap: "$2",
-        backgroundColor: "transparent",
-        children: [/* @__PURE__ */jsx(Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab1",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */jsx(SizableText, {
-            children: "Profile"
-          })
-        }), /* @__PURE__ */jsx(Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab2",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */jsx(SizableText, {
-            children: "Connections"
-          })
-        }), /* @__PURE__ */jsx(Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab3",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */jsx(SizableText, {
-            children: "Notifications"
-          })
-        })]
-      })
-    }), /* @__PURE__ */jsx(AnimatePresence, {
-      exitBeforeEnter: true,
-      custom: {
-        direction
-      },
-      initial: false,
-      children: /* @__PURE__ */jsx(AnimatedYStack, {
-        children: /* @__PURE__ */jsx(Tabs.Content, {
-          value: currentTab,
-          forceMount: true,
-          flex: 1,
-          justify: "center",
-          children: /* @__PURE__ */jsx(H5, {
-            text: "center",
-            children: currentTab
-          })
-        })
-      }, currentTab)
-    })]
-  });
+	const [tabState, setTabState] = React.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__ */ jsxs(Tabs, {
+		value: currentTab,
+		onValueChange: setCurrentTab,
+		orientation: "horizontal",
+		size: "4",
+		p: "2",
+		height: 150,
+		flexDirection: "column",
+		bg: "background",
+		rounded: "4",
+		activationMode: "manual",
+		children: [
+			/* @__PURE__ */ jsx(AnimatePresence, { children: intentAt && /* @__PURE__ */ jsx(TabsRovingIndicator, {
+				rounded: "4",
+				width: intentAt.width,
+				height: intentAt.height,
+				x: intentAt.x,
+				y: intentAt.y
+			}) }),
+			/* @__PURE__ */ jsx(AnimatePresence, { children: activeAt && /* @__PURE__ */ jsx(TabsRovingIndicator, {
+				rounded: "4",
+				theme: "accent",
+				width: activeAt.width,
+				height: activeAt.height,
+				x: activeAt.x,
+				y: activeAt.y
+			}) }),
+			/* @__PURE__ */ jsx(YStack, {
+				position: "relative",
+				children: /* @__PURE__ */ jsxs(Tabs.List, {
+					loop: false,
+					"aria-label": "Manage your account",
+					gap: "2",
+					backgroundColor: "transparent",
+					children: [
+						/* @__PURE__ */ jsx(Tabs.Tab, {
+							unstyled: true,
+							paddingHorizontal: "3",
+							value: "tab1",
+							onInteraction: handleOnInteraction,
+							children: /* @__PURE__ */ jsx(SizableText, { children: "Profile" })
+						}),
+						/* @__PURE__ */ jsx(Tabs.Tab, {
+							unstyled: true,
+							paddingHorizontal: "3",
+							value: "tab2",
+							onInteraction: handleOnInteraction,
+							children: /* @__PURE__ */ jsx(SizableText, { children: "Connections" })
+						}),
+						/* @__PURE__ */ jsx(Tabs.Tab, {
+							unstyled: true,
+							paddingHorizontal: "3",
+							value: "tab3",
+							onInteraction: handleOnInteraction,
+							children: /* @__PURE__ */ jsx(SizableText, { children: "Notifications" })
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx(AnimatePresence, {
+				mode: "wait",
+				custom: { direction },
+				initial: false,
+				children: /* @__PURE__ */ jsx(AnimatedYStack, { children: /* @__PURE__ */ jsx(Tabs.Content, {
+					value: currentTab,
+					forceMount: true,
+					flex: 1,
+					justify: "center",
+					children: /* @__PURE__ */ jsx(H5, {
+						text: "center",
+						children: currentTab
+					})
+				}) }, currentTab)
+			})
+		]
+	});
 };
 const TabsAdvancedUnderline = () => {
-  const [tabState, setTabState] = React.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__ */jsxs(Tabs, {
-    value: currentTab,
-    onValueChange: setCurrentTab,
-    orientation: "horizontal",
-    size: "$4",
-    height: 150,
-    flexDirection: "column",
-    activationMode: "manual",
-    bg: "$background",
-    rounded: "$4",
-    children: [/* @__PURE__ */jsxs(YStack, {
-      position: "relative",
-      children: [/* @__PURE__ */jsx(AnimatePresence, {
-        children: intentAt && /* @__PURE__ */jsx(TabsRovingIndicator, {
-          width: intentAt.width,
-          height: "$0.5",
-          x: intentAt.x,
-          b: 0
-        })
-      }), /* @__PURE__ */jsx(AnimatePresence, {
-        children: activeAt && /* @__PURE__ */jsx(TabsRovingIndicator, {
-          theme: "accent",
-          active: true,
-          width: activeAt.width,
-          height: "$0.5",
-          x: activeAt.x,
-          b: 0
-        })
-      }), /* @__PURE__ */jsxs(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__ */jsx(Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab1",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */jsx(SizableText, {
-            select: "none",
-            cursor: "default",
-            children: "Profile"
-          })
-        }), /* @__PURE__ */jsx(Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab2",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */jsx(SizableText, {
-            select: "none",
-            cursor: "default",
-            children: "Connections"
-          })
-        }), /* @__PURE__ */jsx(Tabs.Tab, {
-          unstyled: true,
-          paddingHorizontal: "$3",
-          value: "tab3",
-          onInteraction: handleOnInteraction,
-          children: /* @__PURE__ */jsx(SizableText, {
-            select: "none",
-            cursor: "default",
-            children: "Notifications"
-          })
-        })]
-      })]
-    }), /* @__PURE__ */jsx(AnimatePresence, {
-      mode: "wait",
-      custom: {
-        direction
-      },
-      initial: false,
-      children: /* @__PURE__ */jsx(AnimatedYStack, {
-        children: /* @__PURE__ */jsx(Tabs.Content, {
-          value: currentTab,
-          forceMount: true,
-          flex: 1,
-          justify: "center",
-          flexBasis: "auto",
-          children: /* @__PURE__ */jsx(H5, {
-            text: "center",
-            children: currentTab
-          })
-        })
-      }, currentTab)
-    })]
-  });
+	const [tabState, setTabState] = React.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__ */ jsxs(Tabs, {
+		value: currentTab,
+		onValueChange: setCurrentTab,
+		orientation: "horizontal",
+		size: "4",
+		height: 150,
+		flexDirection: "column",
+		bg: "background",
+		rounded: "4",
+		activationMode: "manual",
+		children: [/* @__PURE__ */ jsxs(YStack, {
+			position: "relative",
+			children: [
+				/* @__PURE__ */ jsx(AnimatePresence, { children: intentAt && /* @__PURE__ */ jsx(TabsRovingIndicator, {
+					width: intentAt.width,
+					height: "0-5",
+					x: intentAt.x,
+					b: 0
+				}) }),
+				/* @__PURE__ */ jsx(AnimatePresence, { children: activeAt && /* @__PURE__ */ jsx(TabsRovingIndicator, {
+					theme: "accent",
+					active: true,
+					width: activeAt.width,
+					height: "0-5",
+					x: activeAt.x,
+					b: 0
+				}) }),
+				/* @__PURE__ */ jsxs(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__ */ jsx(Tabs.Tab, {
+							unstyled: true,
+							paddingHorizontal: "3",
+							value: "tab1",
+							onInteraction: handleOnInteraction,
+							children: /* @__PURE__ */ jsx(SizableText, {
+								select: "none",
+								cursor: "default",
+								children: "Profile"
+							})
+						}),
+						/* @__PURE__ */ jsx(Tabs.Tab, {
+							unstyled: true,
+							paddingHorizontal: "3",
+							value: "tab2",
+							onInteraction: handleOnInteraction,
+							children: /* @__PURE__ */ jsx(SizableText, {
+								select: "none",
+								cursor: "default",
+								children: "Connections"
+							})
+						}),
+						/* @__PURE__ */ jsx(Tabs.Tab, {
+							unstyled: true,
+							paddingHorizontal: "3",
+							value: "tab3",
+							onInteraction: handleOnInteraction,
+							children: /* @__PURE__ */ jsx(SizableText, {
+								select: "none",
+								cursor: "default",
+								children: "Notifications"
+							})
+						})
+					]
+				})
+			]
+		}), /* @__PURE__ */ jsx(AnimatePresence, {
+			mode: "wait",
+			custom: { direction },
+			initial: false,
+			children: /* @__PURE__ */ jsx(AnimatedYStack, { children: /* @__PURE__ */ jsx(Tabs.Content, {
+				value: currentTab,
+				forceMount: true,
+				flex: 1,
+				justify: "center",
+				flexBasis: "auto",
+				children: /* @__PURE__ */ jsx(H5, {
+					text: "center",
+					children: currentTab
+				})
+			}) }, currentTab)
+		})]
+	});
 };
-const TabsRovingIndicator = ({
-  active,
-  ...props
-}) => {
-  return /* @__PURE__ */jsx(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__ */ jsx(YStack, {
+		position: "absolute",
+		backgroundColor: "color5",
+		opacity: "0.7 enter:0 exit:0",
+		transition: "100ms",
+		...active && {
+			backgroundColor: "color5",
+			opacity: .6
+		},
+		...props
+	});
 };
 const AnimatedYStack = styled(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: { number: (direction) => ({
+		x: `enter:${direction > 0 ? -25 : 25}px exit:${direction < 0 ? -25 : 25}px`,
+		opacity: "enter:0 exit:0",
+		zIndex: "exit:0"
+	}) } }
 });
+
 export { TabsAdvancedDemo };
 //# sourceMappingURL=TabsAdvancedDemo.mjs.map