@tamagui/demos 1.125.34 → 1.126.0

package/src/ListItemDemo.tsx

@@ -3,7 +3,7 @@ import { ListItem, Separator, XStack, YGroup } from 'tamagui'
 
 export function ListItemDemo() {
   return (
-    <XStack $sm={{ flexDirection: 'column' }} paddingHorizontal="$4" space>
+    <XStack $maxMd={{ flexDirection: 'column' }} paddingHorizontal="$4" space>
       <ListItemDemo1 />
       <ListItemDemo2 />
     </XStack>

package/src/PopoverDemo.tsx

@@ -57,7 +57,7 @@ export function Demo({
       </Popover.Trigger>
 
       {shouldAdapt && (
-        <Adapt when="sm" platform="touch">
+        <Adapt when="maxMd" platform="touch">
           <Popover.Sheet animation="medium" modal dismissOnSnapToBottom>
             <Popover.Sheet.Frame padding="$4">
               <Adapt.Contents />

package/src/SelectDemo.tsx

@@ -8,15 +8,15 @@ import { LinearGradient } from 'tamagui/linear-gradient'
 export function SelectDemo() {
   return (
     <YStack gap="$4">
-      <XStack ai="center" gap="$4">
-        <Label htmlFor="select-demo-1" f={1} miw={80}>
+      <XStack w={'100%'} ai="center" gap="$4">
+        <Label htmlFor="select-demo-1" flex={1} miw={80}>
           Custom
         </Label>
         <SelectDemoItem id="select-demo-1" />
       </XStack>
 
-      <XStack ai="center" gap="$4">
-        <Label htmlFor="select-demo-2" f={1} miw={80}>
+      <XStack w={'100%'} ai="center" gap="$4">
+        <Label htmlFor="select-demo-2" flex={1} miw={80}>
           Native
         </Label>
         <SelectDemoItem id="select-demo-2" native />
@@ -30,11 +30,11 @@ export function SelectDemoItem(props: SelectProps) {
 
   return (
     <Select value={val} onValueChange={setVal} disablePreventBodyScroll {...props}>
-      <Select.Trigger width={220} iconAfter={ChevronDown}>
+      <Select.Trigger maxWidth={220} iconAfter={ChevronDown}>
         <Select.Value placeholder="Something" />
       </Select.Trigger>
 
-      <Adapt when="sm" platform="touch">
+      <Adapt when="maxMd" platform="touch">
         <Sheet native={!!props.native} modal dismissOnSnapToBottom animation="medium">
           <Sheet.Frame>
             <Sheet.ScrollView>

package/src/SeparatorDemo.tsx

@@ -3,15 +3,15 @@ import { Paragraph, Separator, XStack, YStack } from 'tamagui'
 
 export function SeparatorDemo() {
   return (
-    <YStack width="100%" maxWidth={300} marginHorizontal={15}>
+    <YStack width="100%" maxWidth={300} mx={16}>
       <Paragraph fontWeight="800">Tamagui</Paragraph>
       <Paragraph>A cross-platform component library.</Paragraph>
       <Separator marginVertical={15} />
       <XStack height={20} alignItems="center">
         <Paragraph>Blog</Paragraph>
-        <Separator alignSelf="stretch" vertical marginHorizontal={15} />
+        <Separator alignSelf="stretch" vertical mx={16} />
         <Paragraph>Docs</Paragraph>
-        <Separator alignSelf="stretch" vertical marginHorizontal={15} />
+        <Separator alignSelf="stretch" vertical mx={16} />
         <Paragraph>Source</Paragraph>
       </XStack>
     </YStack>

package/src/SheetDemo.tsx

@@ -32,7 +32,7 @@ export const SheetDemo = () => {
   return (
     <>
       <YStack gap="$4">
-        <XStack gap="$4" $sm={{ flexDirection: 'column', alignItems: 'center' }}>
+        <XStack gap="$4" $maxMd={{ flexDirection: 'column', alignItems: 'center' }}>
           <Button onPress={() => setOpen(true)}>Open</Button>
           <Button onPress={() => setModal((x) => !x)}>
             {modal ? 'Type: Modal' : 'Type: Inline'}

package/src/TabsDemo.tsx

@@ -28,7 +28,7 @@ export function TabsDemo() {
         position="absolute"
         bottom="$3"
         left="$4"
-        $xxs={{ display: 'none' }}
+        $maxXs={{ display: 'none' }}
       >
         <Button size="$2" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>
           {demosTitle[demo]}
@@ -44,6 +44,7 @@ const HorizontalTabs = () => {
       defaultValue="tab1"
       orientation="horizontal"
       flexDirection="column"
+      $maxMd={{ width: 300 }}
       width={400}
       height={150}
       borderRadius="$4"
@@ -63,7 +64,9 @@ const HorizontalTabs = () => {
           flex={1}
           value="tab1"
         >
-          <SizableText fontFamily="$body">Profile ne</SizableText>
+          <SizableText fontFamily="$body" textAlign="center">
+            Profile
+          </SizableText>
         </Tabs.Tab>
         <Tabs.Tab
           focusStyle={{
@@ -72,7 +75,9 @@ const HorizontalTabs = () => {
           flex={1}
           value="tab2"
         >
-          <SizableText fontFamily="$body">Connections</SizableText>
+          <SizableText fontFamily="$body" textAlign="center">
+            Connections
+          </SizableText>
         </Tabs.Tab>
         <Tabs.Tab
           focusStyle={{
@@ -81,7 +86,9 @@ const HorizontalTabs = () => {
           flex={1}
           value="tab3"
         >
-          <SizableText fontFamily="$body">Notifications</SizableText>
+          <SizableText fontFamily="$body" textAlign="center">
+            Notifications
+          </SizableText>
         </Tabs.Tab>
       </Tabs.List>
       <Separator />

package/src/TabsHeadlessDemo.tsx

@@ -0,0 +1,122 @@
+import React, { useState } from 'react'
+import type { TabsContentProps } from 'tamagui'
+import {
+  Button,
+  SizableStack,
+  ThemeableStack,
+  XStack,
+  YStack,
+  isWeb,
+  styled,
+} from 'tamagui'
+import { createTabs } from '@tamagui/tabs'
+import { getButtonSized } from '@tamagui/get-button-sized'
+
+const demos = ['horizontal', 'vertical'] as const
+
+export const TabsFrame = styled(SizableStack, {
+  name: 'TabsFrame',
+})
+
+export const TabFrame = styled(ThemeableStack, {
+  name: 'TabsTrigger',
+  tag: 'button',
+  cursor: 'pointer',
+  variants: {
+    size: {
+      '...size': getButtonSized,
+    },
+
+    disabled: {
+      true: {
+        pointerEvents: 'none',
+      },
+    },
+
+    active: {
+      true: {
+        hoverStyle: {
+          backgroundColor: '$background',
+        },
+
+        focusStyle: {
+          backgroundColor: '$background',
+        },
+      },
+    },
+  } as const,
+})
+
+const CONTENT_NAME = 'TabsContent'
+
+export const ContentFrame = styled(ThemeableStack, {
+  name: CONTENT_NAME,
+  flex: 1,
+  padding: '$6',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: '$color4',
+  borderRadius: '$4',
+})
+
+export const CustomTabs = createTabs({
+  TabsFrame,
+  TabFrame,
+  ContentFrame,
+})
+
+export function TabsHeadlessDemo() {
+  const [demo, setDemo] = useState<(typeof demos)[number]>(demos[0])
+
+  return (
+    // web only fix for position relative
+    <YStack
+      paddingHorizontal="$4"
+      {...(isWeb && {
+        position: 'unset' as any,
+      })}
+    >
+      <TabsView flexDirection={demo === 'horizontal' ? 'row' : 'column'} />
+
+      <XStack
+        alignItems="center"
+        space
+        position="absolute"
+        bottom="$3"
+        left="$4"
+        $xxs={{ display: 'none' }}
+      >
+        <Button
+          size="$2"
+          onPress={() => setDemo(demo === 'horizontal' ? 'vertical' : 'horizontal')}
+        >
+          <Button.Text textTransform="capitalize">{demo}</Button.Text>
+        </Button>
+      </XStack>
+    </YStack>
+  )
+}
+
+const content = ['Home', 'Profile', 'Settings']
+
+const TabsView = ({ flexDirection = 'row' }: { flexDirection: 'row' | 'column' }) => {
+  return (
+    <CustomTabs
+      flexDirection={flexDirection === 'column' ? 'row' : 'column'}
+      defaultValue={content[0]}
+    >
+      <CustomTabs.List flexDirection={flexDirection}>
+        {content.map((name, index) => (
+          <CustomTabs.Tab key={index} value={name}>
+            {name}
+          </CustomTabs.Tab>
+        ))}
+      </CustomTabs.List>
+      {content.map((name, index) => (
+        <CustomTabs.Content key={index} value={name}>
+          {name}
+        </CustomTabs.Content>
+      ))}
+    </CustomTabs>
+  )
+}

package/src/TooltipDemo.tsx

@@ -45,6 +45,7 @@ function Demo({ Icon, ...props }: TooltipProps & { Icon?: any }) {
         x={0}
         y={0}
         opacity={1}
+        py="$2"
         animation={[
           'quick',
           {

package/src/index.tsx

@@ -55,3 +55,4 @@ export * from './TokensDemo'
 export * from './TooltipDemo'
 export * from './UpdateThemeDemo'
 export * from './useOnIntersecting'
+export * from './TabsHeadlessDemo'