@tamagui/demos 1.113.1 → 1.114.0

package/dist/esm/TabsAdvancedDemo.native.js

@@ -1,16 +1,18 @@
 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",
@@ -19,333 +21,331 @@ var demos = ["background", "underline"],
         $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
     });
-  },
-  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: "active",
-            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(Tabs.Tab, {
-            unstyled: !0,
-            paddingVertical: "$2",
-            paddingHorizontal: "$3",
-            value: "tab2",
-            onInteraction: handleOnInteraction,
-            children: /* @__PURE__ */_jsx(SizableText, {
-              children: "Connections"
+  }, 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(Tabs.Tab, {
-            unstyled: !0,
-            paddingVertical: "$2",
-            paddingHorizontal: "$3",
-            value: "tab3",
-            onInteraction: handleOnInteraction,
-            children: /* @__PURE__ */_jsx(SizableText, {
-              children: "Notifications"
+          }),
+          /* @__PURE__ */ _jsx(AnimatePresence, {
+            children: activeAt && /* @__PURE__ */ _jsx(TabsRovingIndicator, {
+              borderRadius: "$4",
+              theme: "active",
+              width: activeAt.width,
+              height: activeAt.height,
+              x: activeAt.x,
+              y: activeAt.y
             })
-          })]
-        })]
-      }), /* @__PURE__ */_jsx(AnimatePresence, {
+          }),
+          /* @__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, {
         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
     });
-  },
-  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: "active",
-            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(Tabs.Tab, {
-            unstyled: !0,
-            paddingHorizontal: "$3",
-            paddingVertical: "$2",
-            value: "tab2",
-            onInteraction: handleOnInteraction,
-            children: /* @__PURE__ */_jsx(SizableText, {
-              children: "Connections"
+  }, 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(Tabs.Tab, {
-            unstyled: !0,
-            paddingHorizontal: "$3",
-            paddingVertical: "$2",
-            value: "tab3",
-            onInteraction: handleOnInteraction,
-            children: /* @__PURE__ */_jsx(SizableText, {
-              children: "Notifications"
+          }),
+          /* @__PURE__ */ _jsx(AnimatePresence, {
+            children: activeAt && /* @__PURE__ */ _jsx(TabsRovingIndicator, {
+              theme: "active",
+              active: !0,
+              width: activeAt.width,
+              height: "$0.5",
+              x: activeAt.x,
+              bottom: 0
             })
-          })]
-        })]
-      }), /* @__PURE__ */_jsx(AnimatePresence, {
+          }),
+          /* @__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, {
         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,
-      animation: "100ms",
-      enterStyle: {
-        opacity: 0
-      },
-      exitStyle: {
-        opacity: 0
-      },
-      ...(active && {
-        backgroundColor: "$color8",
-        opacity: 0.6
-      }),
-      ...props
-    });
-  },
-  AnimatedYStack = styled(YStack, {
-    flex: 1,
-    x: 0,
-    opacity: 1,
+      })
+    ]
+  });
+}, TabsRovingIndicator = function(param) {
+  var { active, ...props } = param;
+  return /* @__PURE__ */ _jsx(YStack, {
+    position: "absolute",
+    backgroundColor: "$color5",
+    opacity: 0.7,
     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
-            }
-          };
-        }
+    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
+          }
+        };
       }
     }
-  });
-export { TabsAdvancedDemo };
-//# sourceMappingURL=TabsAdvancedDemo.native.js.map
+  }
+});
+export {
+  TabsAdvancedDemo
+};
+//# sourceMappingURL=TabsAdvancedDemo.js.map