@tamagui/demos 1.7.6 → 1.7.7

package/dist/jsx/TabsHighlightedDemo.mjs

@@ -75,16 +75,15 @@ const HighlightTabs = () => {
     onValueChange={setCurrentTab}
     orientation="horizontal"
     br="$4"
-    p="$2"
     height={150}
     flexDirection="column"
     activationMode="manual"
   >
     <Tabs.List
+      scrollable
       loop={false}
       aria-label="Manage your account"
       disablePassBorderRadius
-      overflow="visible"
     >
       {intentIndicatorLayout && <TabsRovingIndicator
         width={intentIndicatorLayout.width}
@@ -96,15 +95,14 @@ const HighlightTabs = () => {
         theme="active"
         active
         width={selectionIndicatorLayout.width}
-        height={2}
+        height={selectionIndicatorLayout.height}
         x={selectionIndicatorLayout.x}
-        y={40}
+        y={selectionIndicatorLayout.y}
       />}
       <Tabs.Trigger
         unstyled
         color="$color12"
         value="tab1"
-        size="$3"
         onSelectedLayoutChange={handleUpdateSelectionIndicator}
         onHoveredLayoutChange={setHoverIndicatorLayout}
         onFocusedLayoutChange={setFocusIndicatorLayout}
@@ -112,7 +110,6 @@ const HighlightTabs = () => {
       <Tabs.Trigger
         unstyled
         color="$color12"
-        size="$3"
         value="tab2"
         onSelectedLayoutChange={handleUpdateSelectionIndicator}
         onHoveredLayoutChange={setHoverIndicatorLayout}
@@ -121,18 +118,17 @@ const HighlightTabs = () => {
       <Tabs.Trigger
         unstyled
         color="$color12"
-        size="$3"
         value="tab3"
         onSelectedLayoutChange={handleUpdateSelectionIndicator}
         onHoveredLayoutChange={setHoverIndicatorLayout}
         onFocusedLayoutChange={setFocusIndicatorLayout}
       >Notifications</Tabs.Trigger>
     </Tabs.List>
-    <YStack f={1}><AnimatePresence
+    <AnimatePresence
       exitBeforeEnter
       enterVariant={enterVariant}
       exitVariant={exitVariant}
-    ><AnimatedYStack key={currentTab} animation="100ms" x={0} o={1} f={1}><Tabs.Content value={currentTab} forceMount p="$2" f={1} jc="center"><H5 ta="center">{currentTab}</H5></Tabs.Content></AnimatedYStack></AnimatePresence></YStack>
+    ><AnimatedYStack key={currentTab} animation="100ms" x={0} o={1}><Tabs.Content value={currentTab} forceMount p="$2"><H5 ta="center">{currentTab}</H5></Tabs.Content></AnimatedYStack></AnimatePresence>
   </Tabs>;
 };
 export {

package/dist/jsx/TabsHighlightedDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/TabsHighlightedDemo.tsx"],
-  "sourcesContent": ["import { useMemo, useRef, useState } from 'react'\nimport {\n  AnimatePresence,\n  H5,\n  Stack,\n  TabTriggerLayout,\n  Tabs,\n  XStack,\n  YStack,\n  styled,\n} from 'tamagui'\n\nexport function TabsHighlightedDemo() {\n  return (\n    <XStack maxHeight=\"100%\" maxWidth=\"100%\" justifyContent=\"flex-start\" px=\"$4\">\n      <HighlightTabs />\n    </XStack>\n  )\n}\n\nconst TabsRovingIndicator = styled(Stack, {\n  name: 'TabsRovingIndicator',\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$color8',\n      },\n    },\n    variants: {\n      active: {\n        true: {\n          backgroundColor: '$color8',\n        },\n      },\n      enter: {\n        true: {\n          opacity: 0,\n        },\n      },\n      exit: {\n        true: {\n          opacity: 0,\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    position: 'absolute',\n    backgroundColor: '$color5',\n    opacity: 1,\n    animation: '100ms',\n    borderRadius: '$4',\n  },\n})\n\nconst AnimatedYStack = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -25, opacity: 0 } },\n    isRight: { true: { x: 25, opacity: 0 } },\n  } as const,\n})\n\nconst HighlightTabs = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n  const [focusIndicatorLayout, setFocusIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const [hoverIndicatorLayout, setHoverIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const [selectionIndicatorLayout, setSelectionIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const prevSelectionIndicatorLayout = useRef<TabTriggerLayout | null>(null)\n  const handleUpdateSelectionIndicator = (newSize: TabTriggerLayout | null) => {\n    prevSelectionIndicatorLayout.current = selectionIndicatorLayout\n    setSelectionIndicatorLayout(newSize)\n  }\n\n  const intentIndicatorLayout = hoverIndicatorLayout || focusIndicatorLayout\n\n  /**\n   * -1: from left\n   * 0: n/a\n   * 1: from right\n   */\n  const direction = useMemo(() => {\n    if (\n      !selectionIndicatorLayout ||\n      !prevSelectionIndicatorLayout.current ||\n      selectionIndicatorLayout.x === prevSelectionIndicatorLayout.current.x\n    ) {\n      return 0\n    }\n    return selectionIndicatorLayout.x > prevSelectionIndicatorLayout.current.x ? 1 : -1\n  }, [selectionIndicatorLayout])\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : undefined\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : undefined\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      br=\"$4\"\n      p=\"$2\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n    >\n      <Tabs.List\n        loop={false}\n        aria-label=\"Manage your account\"\n        disablePassBorderRadius\n        overflow=\"visible\"\n      >\n        {intentIndicatorLayout && (\n          <TabsRovingIndicator\n            width={intentIndicatorLayout.width}\n            height={intentIndicatorLayout.height}\n            x={intentIndicatorLayout.x}\n            y={intentIndicatorLayout.y}\n          />\n        )}\n\n        {selectionIndicatorLayout && (\n          <TabsRovingIndicator\n            theme=\"active\"\n            active\n            width={selectionIndicatorLayout.width}\n            height={2}\n            x={selectionIndicatorLayout.x}\n            y={40}\n          />\n        )}\n\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          value=\"tab1\"\n          size=\"$3\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Profile\n        </Tabs.Trigger>\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          size=\"$3\"\n          value=\"tab2\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Connections\n        </Tabs.Trigger>\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          size=\"$3\"\n          value=\"tab3\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Notifications\n        </Tabs.Trigger>\n      </Tabs.List>\n\n      <YStack f={1}>\n        <AnimatePresence\n          exitBeforeEnter\n          enterVariant={enterVariant}\n          exitVariant={exitVariant}\n        >\n          <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} o={1} f={1}>\n            <Tabs.Content value={currentTab} forceMount p=\"$2\" f={1} jc=\"center\">\n              <H5 ta=\"center\">{currentTab}</H5>\n            </Tabs.Content>\n          </AnimatedYStack>\n        </AnimatePresence>\n      </YStack>\n    </Tabs>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useMemo, useRef, useState } from 'react'\nimport {\n  AnimatePresence,\n  H5,\n  Stack,\n  TabTriggerLayout,\n  Tabs,\n  XStack,\n  YStack,\n  styled,\n} from 'tamagui'\n\nexport function TabsHighlightedDemo() {\n  return (\n    <XStack maxHeight=\"100%\" maxWidth=\"100%\" justifyContent=\"flex-start\" px=\"$4\">\n      <HighlightTabs />\n    </XStack>\n  )\n}\n\nconst TabsRovingIndicator = styled(Stack, {\n  name: 'TabsRovingIndicator',\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$color8',\n      },\n    },\n    variants: {\n      active: {\n        true: {\n          backgroundColor: '$color8',\n        },\n      },\n      enter: {\n        true: {\n          opacity: 0,\n        },\n      },\n      exit: {\n        true: {\n          opacity: 0,\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    position: 'absolute',\n    backgroundColor: '$color5',\n    opacity: 1,\n    animation: '100ms',\n    borderRadius: '$4',\n  },\n})\n\nconst AnimatedYStack = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -25, opacity: 0 } },\n    isRight: { true: { x: 25, opacity: 0 } },\n  } as const,\n})\n\nconst HighlightTabs = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n  const [focusIndicatorLayout, setFocusIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const [hoverIndicatorLayout, setHoverIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const [selectionIndicatorLayout, setSelectionIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const prevSelectionIndicatorLayout = useRef<TabTriggerLayout | null>(null)\n  const handleUpdateSelectionIndicator = (newSize: TabTriggerLayout | null) => {\n    prevSelectionIndicatorLayout.current = selectionIndicatorLayout\n    setSelectionIndicatorLayout(newSize)\n  }\n\n  const intentIndicatorLayout = hoverIndicatorLayout || focusIndicatorLayout\n\n  /**\n   * -1: from left\n   * 0: n/a\n   * 1: from right\n   */\n  const direction = useMemo(() => {\n    if (\n      !selectionIndicatorLayout ||\n      !prevSelectionIndicatorLayout.current ||\n      selectionIndicatorLayout.x === prevSelectionIndicatorLayout.current.x\n    ) {\n      return 0\n    }\n    return selectionIndicatorLayout.x > prevSelectionIndicatorLayout.current.x ? 1 : -1\n  }, [selectionIndicatorLayout])\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : undefined\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : undefined\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      br=\"$4\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n    >\n      <Tabs.List\n        scrollable\n        loop={false}\n        aria-label=\"Manage your account\"\n        disablePassBorderRadius\n      >\n        {intentIndicatorLayout && (\n          <TabsRovingIndicator\n            width={intentIndicatorLayout.width}\n            height={intentIndicatorLayout.height}\n            x={intentIndicatorLayout.x}\n            y={intentIndicatorLayout.y}\n          />\n        )}\n        {selectionIndicatorLayout && (\n          <TabsRovingIndicator\n            theme=\"active\"\n            active\n            width={selectionIndicatorLayout.width}\n            height={selectionIndicatorLayout.height}\n            x={selectionIndicatorLayout.x}\n            y={selectionIndicatorLayout.y}\n          />\n        )}\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          value=\"tab1\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Profile\n        </Tabs.Trigger>\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          value=\"tab2\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Connections\n        </Tabs.Trigger>\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          value=\"tab3\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Notifications\n        </Tabs.Trigger>\n      </Tabs.List>\n\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} o={1}>\n          <Tabs.Content value={currentTab} forceMount p=\"$2\">\n            <H5 ta=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/demos",
-  "version": "1.7.6",
+  "version": "1.7.7",
   "sideEffects": [
     "*.css"
   ],
@@ -28,28 +28,28 @@
     }
   },
   "dependencies": {
-    "@tamagui/avatar": "1.7.6",
-    "@tamagui/button": "1.7.6",
-    "@tamagui/config": "1.7.6",
-    "@tamagui/core": "1.7.6",
-    "@tamagui/list-item": "1.7.6",
-    "@tamagui/logo": "1.7.6",
-    "@tamagui/menu": "1.7.6",
-    "@tamagui/popover": "1.7.6",
-    "@tamagui/progress": "1.7.6",
-    "@tamagui/radio-group": "1.7.6",
-    "@tamagui/select": "1.7.6",
-    "@tamagui/sheet": "1.7.6",
-    "@tamagui/slider": "1.7.6",
-    "@tamagui/stacks": "1.7.6",
-    "tamagui": "1.7.6"
+    "@tamagui/avatar": "1.7.7",
+    "@tamagui/button": "1.7.7",
+    "@tamagui/config": "1.7.7",
+    "@tamagui/core": "1.7.7",
+    "@tamagui/list-item": "1.7.7",
+    "@tamagui/logo": "1.7.7",
+    "@tamagui/menu": "1.7.7",
+    "@tamagui/popover": "1.7.7",
+    "@tamagui/progress": "1.7.7",
+    "@tamagui/radio-group": "1.7.7",
+    "@tamagui/select": "1.7.7",
+    "@tamagui/sheet": "1.7.7",
+    "@tamagui/slider": "1.7.7",
+    "@tamagui/stacks": "1.7.7",
+    "tamagui": "1.7.7"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.7.6",
+    "@tamagui/build": "1.7.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },