@tamagui/demos 1.125.6 → 1.125.7

package/dist/esm/TabsAdvancedDemo.native.js

@@ -1,18 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { AnimatePresence, Button, H5, SizableText, Tabs, XStack, YStack, styled } from "tamagui";
-var demos = [
-  "background",
-  "underline"
-], demosTitle = {
-  background: "Background Indicator",
-  underline: "Underline Indicator"
-}, TabsAdvancedDemo = function() {
-  var [demoIndex, setDemoIndex] = React.useState(0), demo = demos[demoIndex];
-  return /* @__PURE__ */ _jsxs(_Fragment, {
-    children: [
-      demo === "underline" ? /* @__PURE__ */ _jsx(TabsAdvancedUnderline, {}) : /* @__PURE__ */ _jsx(TabsAdvancedBackground, {}),
-      /* @__PURE__ */ _jsx(XStack, {
+var demos = ["background", "underline"],
+  demosTitle = {
+    background: "Background Indicator",
+    underline: "Underline Indicator"
+  },
+  TabsAdvancedDemo = function () {
+    var [demoIndex, setDemoIndex] = React.useState(0),
+      demo = demos[demoIndex];
+    return /* @__PURE__ */_jsxs(_Fragment, {
+      children: [demo === "underline" ? /* @__PURE__ */_jsx(TabsAdvancedUnderline, {}) : /* @__PURE__ */_jsx(TabsAdvancedBackground, {}), /* @__PURE__ */_jsx(XStack, {
         alignItems: "center",
         gap: "$4",
         position: "absolute",
@@ -21,331 +19,333 @@ var demos = [
         $xxs: {
           display: "none"
         },
-        children: /* @__PURE__ */ _jsx(Button, {
+        children: /* @__PURE__ */_jsx(Button, {
           size: "$2",
-          onPress: function() {
-            return setDemoIndex(function(x) {
+          onPress: function () {
+            return setDemoIndex(function (x) {
               return (x + 1) % demos.length;
             });
           },
           children: demosTitle[demo]
         })
-      })
-    ]
-  });
-}, TabsAdvancedBackground = function() {
-  var [tabState, setTabState] = React.useState(
-    /**
-    * Layout of the Tab user might intend to select (hovering / focusing)
-    */
-    /**
-    * Layout of the Tab user selected
-    */
-    /**
-    * Used to get the direction of activation for animating the active indicator
-    */
-    {
-      activeAt: null,
-      currentTab: "tab1",
-      intentAt: null,
-      prevActiveAt: null
-    }
-  ), setCurrentTab = function(currentTab2) {
-    return setTabState({
-      ...tabState,
-      currentTab: currentTab2
-    });
-  }, setIntentIndicator = function(intentAt2) {
-    return setTabState({
-      ...tabState,
-      intentAt: intentAt2
-    });
-  }, setActiveIndicator = function(activeAt2) {
-    return setTabState({
-      ...tabState,
-      prevActiveAt: tabState.activeAt,
-      activeAt: activeAt2
+      })]
     });
-  }, { activeAt, intentAt, prevActiveAt, currentTab } = tabState, direction = function() {
-    return !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1;
-  }(), handleOnInteraction = function(type, layout) {
-    type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
-  };
-  return /* @__PURE__ */ _jsxs(Tabs, {
-    value: currentTab,
-    onValueChange: setCurrentTab,
-    orientation: "horizontal",
-    size: "$4",
-    padding: "$2",
-    height: 150,
-    flexDirection: "column",
-    activationMode: "manual",
-    backgroundColor: "$background",
-    borderRadius: "$4",
-    position: "relative",
-    children: [
-      /* @__PURE__ */ _jsxs(YStack, {
-        children: [
-          /* @__PURE__ */ _jsx(AnimatePresence, {
-            children: intentAt && /* @__PURE__ */ _jsx(TabsRovingIndicator, {
-              borderRadius: "$4",
-              width: intentAt.width,
-              height: intentAt.height,
-              x: intentAt.x,
-              y: intentAt.y
+  },
+  TabsAdvancedBackground = function () {
+    var [tabState, setTabState] = React.useState(
+      /**
+      * Layout of the Tab user might intend to select (hovering / focusing)
+      */
+      /**
+      * Layout of the Tab user selected
+      */
+      /**
+      * Used to get the direction of activation for animating the active indicator
+      */
+      {
+        activeAt: null,
+        currentTab: "tab1",
+        intentAt: null,
+        prevActiveAt: null
+      }),
+      setCurrentTab = function (currentTab2) {
+        return setTabState({
+          ...tabState,
+          currentTab: currentTab2
+        });
+      },
+      setIntentIndicator = function (intentAt2) {
+        return setTabState({
+          ...tabState,
+          intentAt: intentAt2
+        });
+      },
+      setActiveIndicator = function (activeAt2) {
+        return setTabState({
+          ...tabState,
+          prevActiveAt: tabState.activeAt,
+          activeAt: activeAt2
+        });
+      },
+      {
+        activeAt,
+        intentAt,
+        prevActiveAt,
+        currentTab
+      } = tabState,
+      direction = function () {
+        return !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1;
+      }(),
+      handleOnInteraction = function (type, layout) {
+        type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
+      };
+    return /* @__PURE__ */_jsxs(Tabs, {
+      value: currentTab,
+      onValueChange: setCurrentTab,
+      orientation: "horizontal",
+      size: "$4",
+      padding: "$2",
+      height: 150,
+      flexDirection: "column",
+      activationMode: "manual",
+      backgroundColor: "$background",
+      borderRadius: "$4",
+      position: "relative",
+      children: [/* @__PURE__ */_jsxs(YStack, {
+        children: [/* @__PURE__ */_jsx(AnimatePresence, {
+          children: intentAt && /* @__PURE__ */_jsx(TabsRovingIndicator, {
+            borderRadius: "$4",
+            width: intentAt.width,
+            height: intentAt.height,
+            x: intentAt.x,
+            y: intentAt.y
+          })
+        }), /* @__PURE__ */_jsx(AnimatePresence, {
+          children: activeAt && /* @__PURE__ */_jsx(TabsRovingIndicator, {
+            borderRadius: "$4",
+            theme: "accent",
+            width: activeAt.width,
+            height: activeAt.height,
+            x: activeAt.x,
+            y: activeAt.y
+          })
+        }), /* @__PURE__ */_jsxs(Tabs.List, {
+          disablePassBorderRadius: !0,
+          loop: !1,
+          "aria-label": "Manage your account",
+          gap: "$2",
+          backgroundColor: "transparent",
+          children: [/* @__PURE__ */_jsx(Tabs.Tab, {
+            unstyled: !0,
+            paddingVertical: "$2",
+            paddingHorizontal: "$3",
+            value: "tab1",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */_jsx(SizableText, {
+              children: "Profile"
             })
-          }),
-          /* @__PURE__ */ _jsx(AnimatePresence, {
-            children: activeAt && /* @__PURE__ */ _jsx(TabsRovingIndicator, {
-              borderRadius: "$4",
-              theme: "accent",
-              width: activeAt.width,
-              height: activeAt.height,
-              x: activeAt.x,
-              y: activeAt.y
+          }), /* @__PURE__ */_jsx(Tabs.Tab, {
+            unstyled: !0,
+            paddingVertical: "$2",
+            paddingHorizontal: "$3",
+            value: "tab2",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */_jsx(SizableText, {
+              children: "Connections"
             })
-          }),
-          /* @__PURE__ */ _jsxs(Tabs.List, {
-            disablePassBorderRadius: !0,
-            loop: !1,
-            "aria-label": "Manage your account",
-            gap: "$2",
-            backgroundColor: "transparent",
-            children: [
-              /* @__PURE__ */ _jsx(Tabs.Tab, {
-                unstyled: !0,
-                paddingVertical: "$2",
-                paddingHorizontal: "$3",
-                value: "tab1",
-                onInteraction: handleOnInteraction,
-                children: /* @__PURE__ */ _jsx(SizableText, {
-                  children: "Profile"
-                })
-              }),
-              /* @__PURE__ */ _jsx(Tabs.Tab, {
-                unstyled: !0,
-                paddingVertical: "$2",
-                paddingHorizontal: "$3",
-                value: "tab2",
-                onInteraction: handleOnInteraction,
-                children: /* @__PURE__ */ _jsx(SizableText, {
-                  children: "Connections"
-                })
-              }),
-              /* @__PURE__ */ _jsx(Tabs.Tab, {
-                unstyled: !0,
-                paddingVertical: "$2",
-                paddingHorizontal: "$3",
-                value: "tab3",
-                onInteraction: handleOnInteraction,
-                children: /* @__PURE__ */ _jsx(SizableText, {
-                  children: "Notifications"
-                })
-              })
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ _jsx(AnimatePresence, {
+          }), /* @__PURE__ */_jsx(Tabs.Tab, {
+            unstyled: !0,
+            paddingVertical: "$2",
+            paddingHorizontal: "$3",
+            value: "tab3",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */_jsx(SizableText, {
+              children: "Notifications"
+            })
+          })]
+        })]
+      }), /* @__PURE__ */_jsx(AnimatePresence, {
         exitBeforeEnter: !0,
         custom: {
           direction
         },
         initial: !1,
-        children: /* @__PURE__ */ _jsx(AnimatedYStack, {
-          children: /* @__PURE__ */ _jsx(Tabs.Content, {
+        children: /* @__PURE__ */_jsx(AnimatedYStack, {
+          children: /* @__PURE__ */_jsx(Tabs.Content, {
             value: currentTab,
             forceMount: !0,
             flex: 1,
             justifyContent: "center",
-            children: /* @__PURE__ */ _jsx(H5, {
+            children: /* @__PURE__ */_jsx(H5, {
               textAlign: "center",
               children: currentTab
             })
           })
         }, currentTab)
-      })
-    ]
-  });
-}, TabsAdvancedUnderline = function() {
-  var [tabState, setTabState] = React.useState(
-    /**
-    * Layout of the Tab user might intend to select (hovering / focusing)
-    */
-    /**
-    * Layout of the Tab user selected
-    */
-    /**
-    * Used to get the direction of activation for animating the active indicator
-    */
-    {
-      activeAt: null,
-      currentTab: "tab1",
-      intentAt: null,
-      prevActiveAt: null
-    }
-  ), setCurrentTab = function(currentTab2) {
-    return setTabState({
-      ...tabState,
-      currentTab: currentTab2
-    });
-  }, setIntentIndicator = function(intentAt2) {
-    return setTabState({
-      ...tabState,
-      intentAt: intentAt2
-    });
-  }, setActiveIndicator = function(activeAt2) {
-    return setTabState({
-      ...tabState,
-      prevActiveAt: tabState.activeAt,
-      activeAt: activeAt2
+      })]
     });
-  }, { activeAt, intentAt, prevActiveAt, currentTab } = tabState, direction = function() {
-    return !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1;
-  }(), handleOnInteraction = function(type, layout) {
-    type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
-  };
-  return /* @__PURE__ */ _jsxs(Tabs, {
-    value: currentTab,
-    onValueChange: setCurrentTab,
-    orientation: "horizontal",
-    size: "$4",
-    height: 150,
-    flexDirection: "column",
-    activationMode: "manual",
-    backgroundColor: "$background",
-    borderRadius: "$4",
-    children: [
-      /* @__PURE__ */ _jsxs(YStack, {
-        children: [
-          /* @__PURE__ */ _jsx(AnimatePresence, {
-            children: intentAt && /* @__PURE__ */ _jsx(TabsRovingIndicator, {
-              width: intentAt.width,
-              height: "$0.5",
-              x: intentAt.x,
-              bottom: 0
+  },
+  TabsAdvancedUnderline = function () {
+    var [tabState, setTabState] = React.useState(
+      /**
+      * Layout of the Tab user might intend to select (hovering / focusing)
+      */
+      /**
+      * Layout of the Tab user selected
+      */
+      /**
+      * Used to get the direction of activation for animating the active indicator
+      */
+      {
+        activeAt: null,
+        currentTab: "tab1",
+        intentAt: null,
+        prevActiveAt: null
+      }),
+      setCurrentTab = function (currentTab2) {
+        return setTabState({
+          ...tabState,
+          currentTab: currentTab2
+        });
+      },
+      setIntentIndicator = function (intentAt2) {
+        return setTabState({
+          ...tabState,
+          intentAt: intentAt2
+        });
+      },
+      setActiveIndicator = function (activeAt2) {
+        return setTabState({
+          ...tabState,
+          prevActiveAt: tabState.activeAt,
+          activeAt: activeAt2
+        });
+      },
+      {
+        activeAt,
+        intentAt,
+        prevActiveAt,
+        currentTab
+      } = tabState,
+      direction = function () {
+        return !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1;
+      }(),
+      handleOnInteraction = function (type, layout) {
+        type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
+      };
+    return /* @__PURE__ */_jsxs(Tabs, {
+      value: currentTab,
+      onValueChange: setCurrentTab,
+      orientation: "horizontal",
+      size: "$4",
+      height: 150,
+      flexDirection: "column",
+      activationMode: "manual",
+      backgroundColor: "$background",
+      borderRadius: "$4",
+      children: [/* @__PURE__ */_jsxs(YStack, {
+        children: [/* @__PURE__ */_jsx(AnimatePresence, {
+          children: intentAt && /* @__PURE__ */_jsx(TabsRovingIndicator, {
+            width: intentAt.width,
+            height: "$0.5",
+            x: intentAt.x,
+            bottom: 0
+          })
+        }), /* @__PURE__ */_jsx(AnimatePresence, {
+          children: activeAt && /* @__PURE__ */_jsx(TabsRovingIndicator, {
+            theme: "accent",
+            active: !0,
+            width: activeAt.width,
+            height: "$0.5",
+            x: activeAt.x,
+            bottom: 0
+          })
+        }), /* @__PURE__ */_jsxs(Tabs.List, {
+          disablePassBorderRadius: !0,
+          loop: !1,
+          "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: !0,
+            paddingHorizontal: "$3",
+            paddingVertical: "$2",
+            value: "tab1",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */_jsx(SizableText, {
+              children: "Profile"
             })
-          }),
-          /* @__PURE__ */ _jsx(AnimatePresence, {
-            children: activeAt && /* @__PURE__ */ _jsx(TabsRovingIndicator, {
-              theme: "accent",
-              active: !0,
-              width: activeAt.width,
-              height: "$0.5",
-              x: activeAt.x,
-              bottom: 0
+          }), /* @__PURE__ */_jsx(Tabs.Tab, {
+            unstyled: !0,
+            paddingHorizontal: "$3",
+            paddingVertical: "$2",
+            value: "tab2",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */_jsx(SizableText, {
+              children: "Connections"
             })
-          }),
-          /* @__PURE__ */ _jsxs(Tabs.List, {
-            disablePassBorderRadius: !0,
-            loop: !1,
-            "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: !0,
-                paddingHorizontal: "$3",
-                paddingVertical: "$2",
-                value: "tab1",
-                onInteraction: handleOnInteraction,
-                children: /* @__PURE__ */ _jsx(SizableText, {
-                  children: "Profile"
-                })
-              }),
-              /* @__PURE__ */ _jsx(Tabs.Tab, {
-                unstyled: !0,
-                paddingHorizontal: "$3",
-                paddingVertical: "$2",
-                value: "tab2",
-                onInteraction: handleOnInteraction,
-                children: /* @__PURE__ */ _jsx(SizableText, {
-                  children: "Connections"
-                })
-              }),
-              /* @__PURE__ */ _jsx(Tabs.Tab, {
-                unstyled: !0,
-                paddingHorizontal: "$3",
-                paddingVertical: "$2",
-                value: "tab3",
-                onInteraction: handleOnInteraction,
-                children: /* @__PURE__ */ _jsx(SizableText, {
-                  children: "Notifications"
-                })
-              })
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ _jsx(AnimatePresence, {
+          }), /* @__PURE__ */_jsx(Tabs.Tab, {
+            unstyled: !0,
+            paddingHorizontal: "$3",
+            paddingVertical: "$2",
+            value: "tab3",
+            onInteraction: handleOnInteraction,
+            children: /* @__PURE__ */_jsx(SizableText, {
+              children: "Notifications"
+            })
+          })]
+        })]
+      }), /* @__PURE__ */_jsx(AnimatePresence, {
         exitBeforeEnter: !0,
         custom: {
           direction
         },
         initial: !1,
-        children: /* @__PURE__ */ _jsx(AnimatedYStack, {
-          children: /* @__PURE__ */ _jsx(Tabs.Content, {
+        children: /* @__PURE__ */_jsx(AnimatedYStack, {
+          children: /* @__PURE__ */_jsx(Tabs.Content, {
             value: currentTab,
             forceMount: !0,
             flex: 1,
             justifyContent: "center",
-            children: /* @__PURE__ */ _jsx(H5, {
+            children: /* @__PURE__ */_jsx(H5, {
               textAlign: "center",
               children: currentTab
             })
           })
         }, currentTab)
-      })
-    ]
-  });
-}, TabsRovingIndicator = function(param) {
-  var { active, ...props } = param;
-  return /* @__PURE__ */ _jsx(YStack, {
-    position: "absolute",
-    backgroundColor: "$color5",
-    opacity: 0.7,
+      })]
+    });
+  },
+  TabsRovingIndicator = function (param) {
+    var {
+      active,
+      ...props
+    } = param;
+    return /* @__PURE__ */_jsx(YStack, {
+      position: "absolute",
+      backgroundColor: "$color5",
+      opacity: 0.7,
+      animation: "100ms",
+      enterStyle: {
+        opacity: 0
+      },
+      exitStyle: {
+        opacity: 0
+      },
+      ...(active && {
+        backgroundColor: "$color8",
+        opacity: 0.6
+      }),
+      ...props
+    });
+  },
+  AnimatedYStack = styled(YStack, {
+    flex: 1,
+    x: 0,
+    opacity: 1,
     animation: "100ms",
-    enterStyle: {
-      opacity: 0
-    },
-    exitStyle: {
-      opacity: 0
-    },
-    ...active && {
-      backgroundColor: "$color8",
-      opacity: 0.6
-    },
-    ...props
-  });
-}, AnimatedYStack = styled(YStack, {
-  flex: 1,
-  x: 0,
-  opacity: 1,
-  animation: "100ms",
-  variants: {
-    // 1 = right, 0 = nowhere, -1 = left
-    direction: {
-      ":number": function(direction) {
-        return {
-          enterStyle: {
-            x: direction > 0 ? -25 : 25,
-            opacity: 0
-          },
-          exitStyle: {
-            zIndex: 0,
-            x: direction < 0 ? -25 : 25,
-            opacity: 0
-          }
-        };
+    variants: {
+      // 1 = right, 0 = nowhere, -1 = left
+      direction: {
+        ":number": function (direction) {
+          return {
+            enterStyle: {
+              x: direction > 0 ? -25 : 25,
+              opacity: 0
+            },
+            exitStyle: {
+              zIndex: 0,
+              x: direction < 0 ? -25 : 25,
+              opacity: 0
+            }
+          };
+        }
       }
     }
-  }
-});
-export {
-  TabsAdvancedDemo
-};
-//# sourceMappingURL=TabsAdvancedDemo.js.map
+  });
+export { TabsAdvancedDemo };
+//# sourceMappingURL=TabsAdvancedDemo.native.js.map