@tamagui/demos 2.0.0-rc.8 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/demos",
-  "version": "2.0.0-rc.8",
+  "version": "2.0.0",
   "source": "demos/src/index.tsx",
   "files": [
     "src",
@@ -19,26 +19,21 @@
     "./photo/*": "./public/*.jpg",
     ".": {
       "types": "./src/index.tsx",
-      "react-native": {
-        "module": "./dist/esm/index.native.js",
-        "import": "./dist/esm/index.native.js",
-        "require": "./dist/cjs/index.native.js"
-      },
+      "react-native": "./dist/esm/index.native.js",
+      "browser": "./dist/esm/index.mjs",
       "module": "./dist/esm/index.mjs",
       "import": "./dist/esm/index.mjs",
       "require": "./dist/cjs/index.cjs",
-      "default": "./dist/cjs/index.native.js"
+      "default": "./dist/esm/index.mjs"
     },
     "./demo/*": {
       "types": "./types/*.d.ts",
-      "react-native": {
-        "module": "./dist/esm/*.native.js",
-        "import": "./dist/esm/*.native.js",
-        "require": "./dist/cjs/*.native.js"
-      },
+      "react-native": "./dist/esm/*.native.js",
+      "browser": "./dist/esm/*.mjs",
       "module": "./dist/esm/*.mjs",
       "import": "./dist/esm/*.mjs",
-      "require": "./dist/cjs/*.cjs"
+      "require": "./dist/cjs/*.cjs",
+      "default": "./dist/esm/*.mjs"
     }
   },
   "publishConfig": {
@@ -51,47 +46,46 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/animate-presence": "2.0.0-rc.8",
-    "@tamagui/avatar": "2.0.0-rc.8",
-    "@tamagui/button": "2.0.0-rc.8",
-    "@tamagui/checkbox": "2.0.0-rc.8",
-    "@tamagui/checkbox-headless": "2.0.0-rc.8",
-    "@tamagui/colors": "2.0.0-rc.8",
-    "@tamagui/config": "2.0.0-rc.8",
-    "@tamagui/context-menu": "2.0.0-rc.8",
-    "@tamagui/core": "2.0.0-rc.8",
-    "@tamagui/get-button-sized": "2.0.0-rc.8",
-    "@tamagui/image": "2.0.0-rc.8",
-    "@tamagui/input": "2.0.0-rc.8",
-    "@tamagui/linear-gradient": "2.0.0-rc.8",
-    "@tamagui/list-item": "2.0.0-rc.8",
-    "@tamagui/logo": "2.0.0-rc.8",
-    "@tamagui/lucide-icons": "2.0.0-rc.8",
-    "@tamagui/menu": "2.0.0-rc.8",
-    "@tamagui/popover": "2.0.0-rc.8",
-    "@tamagui/progress": "2.0.0-rc.8",
-    "@tamagui/radio-group": "2.0.0-rc.8",
-    "@tamagui/radio-headless": "2.0.0-rc.8",
-    "@tamagui/roving-focus": "2.0.0-rc.8",
-    "@tamagui/select": "2.0.0-rc.8",
-    "@tamagui/sheet": "2.0.0-rc.8",
-    "@tamagui/slider": "2.0.0-rc.8",
-    "@tamagui/stacks": "2.0.0-rc.8",
-    "@tamagui/switch": "2.0.0-rc.8",
-    "@tamagui/switch-headless": "2.0.0-rc.8",
-    "@tamagui/tabs": "2.0.0-rc.8",
-    "@tamagui/tamagui-dev-config": "2.0.0-rc.8",
-    "@tamagui/theme": "2.0.0-rc.8",
-    "@tamagui/toast": "2.0.0-rc.8",
-    "tamagui": "2.0.0-rc.8"
+    "@tamagui/animate-presence": "2.0.0",
+    "@tamagui/avatar": "2.0.0",
+    "@tamagui/button": "2.0.0",
+    "@tamagui/checkbox": "2.0.0",
+    "@tamagui/checkbox-headless": "2.0.0",
+    "@tamagui/colors": "2.0.0",
+    "@tamagui/config": "2.0.0",
+    "@tamagui/context-menu": "2.0.0",
+    "@tamagui/core": "2.0.0",
+    "@tamagui/get-button-sized": "2.0.0",
+    "@tamagui/image": "2.0.0",
+    "@tamagui/input": "2.0.0",
+    "@tamagui/linear-gradient": "2.0.0",
+    "@tamagui/list-item": "2.0.0",
+    "@tamagui/logo": "2.0.0",
+    "@tamagui/lucide-icons-2": "2.0.0",
+    "@tamagui/menu": "2.0.0",
+    "@tamagui/popover": "2.0.0",
+    "@tamagui/progress": "2.0.0",
+    "@tamagui/radio-group": "2.0.0",
+    "@tamagui/radio-headless": "2.0.0",
+    "@tamagui/roving-focus": "2.0.0",
+    "@tamagui/select": "2.0.0",
+    "@tamagui/sheet": "2.0.0",
+    "@tamagui/slider": "2.0.0",
+    "@tamagui/stacks": "2.0.0",
+    "@tamagui/switch": "2.0.0",
+    "@tamagui/switch-headless": "2.0.0",
+    "@tamagui/tabs": "2.0.0",
+    "@tamagui/tamagui-dev-config": "2.0.0",
+    "@tamagui/theme": "2.0.0",
+    "@tamagui/toast": "2.0.0",
+    "tamagui": "2.0.0"
   },
   "devDependencies": {
-    "@tamagui/build": "2.0.0-rc.8",
+    "@tamagui/build": "2.0.0",
     "react": ">=19",
-    "react-native": "0.81.5"
+    "react-native": "0.83.2"
   },
   "peerDependencies": {
-    "react": ">=19",
-    "react-native": "*"
+    "react": ">=19"
   }
 }

package/src/AccordionDemo.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown } from '@tamagui/lucide-icons'
+import { ChevronDown } from '@tamagui/lucide-icons-2'
 import { Accordion, Paragraph, Square } from 'tamagui'
 
 export function AccordionDemo() {

package/src/AnimationsDemo.tsx

@@ -1,5 +1,5 @@
 import { LogoIcon } from '@tamagui/logo'
-import { Play } from '@tamagui/lucide-icons'
+import { Play } from '@tamagui/lucide-icons-2'
 import { Button, isWeb, Square, useControllableState, Image, useEvent } from 'tamagui'
 
 export function AnimationsDemo(props) {

package/src/AnimationsPresenceDemo.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { AnimatePresence } from '@tamagui/animate-presence'
-import { ArrowLeft, ArrowRight } from '@tamagui/lucide-icons'
+import { ArrowLeft, ArrowRight } from '@tamagui/lucide-icons-2'
 
 import { Button, Image, XStack, YStack, styled } from 'tamagui'
 
@@ -11,7 +11,7 @@ import photo2 from '../../public/photo2.jpg'
 // @ts-ignore
 import photo3 from '../../public/photo3.jpg'
 
-export const images = [photo1, photo2, photo3].map((x) => x.src || x)
+export const images = [photo1, photo2, photo3].map((x) => (x as any).src || x)
 
 const GalleryItem = styled(YStack, {
   z: 1,

package/src/BoxShadowTokenDemo.tsx

@@ -0,0 +1,35 @@
+import { styled, View, Text, YStack } from 'tamagui'
+
+// styled() with boxShadow containing embedded $token
+// if web imports are picked up on native, this resolves to var(--shadowColor)
+// which crashes with: [ReanimatedError: Invalid color "var(--shadowColor)"]
+const StyledShadowBox = styled(View, {
+  width: 100,
+  height: 100,
+  backgroundColor: '$color5',
+  borderRadius: '$4',
+  boxShadow: '0px 2px 8px $shadowColor',
+})
+
+export function BoxShadowTokenDemo() {
+  return (
+    <YStack gap="$4" items="center" p="$4">
+      <Text testID="box-shadow-token-title">BoxShadow Token Test</Text>
+
+      {/* styled() definition - breaks if web imports leak to native */}
+      <StyledShadowBox testID="box-shadow-styled" />
+
+      {/* inline prop - should always work */}
+      <View
+        width={100}
+        height={100}
+        backgroundColor="$color5"
+        borderRadius="$4"
+        boxShadow="0px 2px 8px $shadowColor"
+        testID="box-shadow-prop"
+      />
+
+      <Text testID="box-shadow-token-ok">OK</Text>
+    </YStack>
+  )
+}

package/src/BuildAButtonDemo.tsx

@@ -1,4 +1,4 @@
-import { Drumstick, Hand } from '@tamagui/lucide-icons'
+import { Drumstick, Hand } from '@tamagui/lucide-icons-2'
 import type { ButtonProps, ThemeName } from 'tamagui'
 import { Button, XStack, YStack } from 'tamagui'
 

package/src/ButtonDemo.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@tamagui/button'
-import { Activity, Airplay } from '@tamagui/lucide-icons'
+import { Activity, Airplay } from '@tamagui/lucide-icons-2'
 import { Theme, XGroup, XStack, YStack } from 'tamagui'
 
 export function ButtonDemo() {

package/src/CheckboxDemo.tsx

@@ -1,4 +1,4 @@
-import { Check as CheckIcon } from '@tamagui/lucide-icons'
+import { Check as CheckIcon } from '@tamagui/lucide-icons-2'
 import type { CheckboxProps } from 'tamagui'
 import { Checkbox, Label, Theme, XStack, YStack } from 'tamagui'
 

package/src/CheckboxHeadlessDemo.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import type { CheckboxProps as CheckboxHeadlessProps } from '@tamagui/checkbox-headless'
 import { useCheckbox } from '@tamagui/checkbox-headless'
-import { Check, Minus } from '@tamagui/lucide-icons'
+import { Check, Minus } from '@tamagui/lucide-icons-2'
 
 import type { View } from 'react-native'
 import { Pressable } from 'react-native'

package/src/CheckboxUnstyledDemo.tsx

@@ -1,6 +1,6 @@
 import { createCheckbox } from '@tamagui/checkbox'
 import { View, styled } from '@tamagui/core'
-import { Check } from '@tamagui/lucide-icons'
+import { Check } from '@tamagui/lucide-icons-2'
 import { Label, XStack, YStack } from 'tamagui'
 
 const Frame = styled(View, {

package/src/ContextMenuDemo.tsx

@@ -1,5 +1,5 @@
 import { ContextMenu } from '@tamagui/context-menu'
-import { Calendar, Check, ChevronRight } from '@tamagui/lucide-icons'
+import { Calendar, Check, ChevronRight } from '@tamagui/lucide-icons-2'
 import React from 'react'
 import { Text, View, YStack } from 'tamagui'
 
@@ -16,7 +16,7 @@ export function ContextMenuDemo() {
   }
 
   return (
-    <ContextMenu allowFlip native={native} placement="bottom-start" offset={14}>
+    <ContextMenu native={native}>
       <ContextMenu.Trigger asChild>
         <View
           p="$4"
@@ -101,7 +101,7 @@ export function ContextMenuDemo() {
           </ContextMenu.Item>
           <ContextMenu.Separator />
           {/* Submenu */}
-          <ContextMenu.Sub placement="right-start">
+          <ContextMenu.Sub>
             <ContextMenu.SubTrigger
               key="actions-trigger"
               justify="space-between"

package/src/DialogDemo.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown, X } from '@tamagui/lucide-icons'
+import { ChevronDown, X } from '@tamagui/lucide-icons-2'
 import { useState } from 'react'
 import {
   Adapt,

package/src/GroupDemo.tsx

@@ -1,4 +1,4 @@
-import { Activity, Airplay } from '@tamagui/lucide-icons'
+import { Activity, Airplay } from '@tamagui/lucide-icons-2'
 import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from 'tamagui'
 
 export function GroupDemo() {

package/src/ListItemDemo.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight, Cloud, Moon, Star, Sun } from '@tamagui/lucide-icons'
+import { ChevronRight, Cloud, Moon, Star, Sun } from '@tamagui/lucide-icons-2'
 import { ListItem, Separator, Theme, XStack, YGroup } from 'tamagui'
 
 export function ListItemDemo() {
@@ -19,11 +19,13 @@ function ListItemDemo1() {
       borderWidth={1}
       borderColor="$borderColor"
       rounded="$4"
+      overflow="hidden"
       width={240}
       size="$4"
     >
       <YGroup.Item>
         <ListItem
+          gap="$3"
           icon={Star}
           title="Star"
           subTitle={<ListItem.Subtitle>Twinkles</ListItem.Subtitle>}
@@ -31,13 +33,19 @@ function ListItemDemo1() {
         />
       </YGroup.Item>
       <YGroup.Item>
-        <ListItem icon={Moon}>Moon</ListItem>
+        <ListItem gap="$3" icon={Moon}>
+          Moon
+        </ListItem>
       </YGroup.Item>
       <YGroup.Item>
-        <ListItem icon={Sun}>Sun</ListItem>
+        <ListItem gap="$3" icon={Sun}>
+          Sun
+        </ListItem>
       </YGroup.Item>
       <YGroup.Item>
-        <ListItem icon={Cloud}>Cloud</ListItem>
+        <ListItem gap="$3" icon={Cloud}>
+          Cloud
+        </ListItem>
       </YGroup.Item>
     </YGroup>
   )
@@ -50,15 +58,28 @@ function ListItemDemo2() {
       borderWidth={1}
       borderColor="$borderColor"
       rounded="$4"
+      overflow="hidden"
       width={240}
       size="$5"
     >
       <YGroup.Item>
-        <ListItem title="Star" subTitle="Subtitle" icon={Star} iconAfter={ChevronRight} />
+        <ListItem
+          gap="$3"
+          title="Star"
+          subTitle="Subtitle"
+          icon={Star}
+          iconAfter={ChevronRight}
+        />
       </YGroup.Item>
       <Separator />
       <YGroup.Item>
-        <ListItem title="Moon" subTitle="Subtitle" icon={Moon} iconAfter={ChevronRight} />
+        <ListItem
+          gap="$3"
+          title="Moon"
+          subTitle="Subtitle"
+          icon={Moon}
+          iconAfter={ChevronRight}
+        />
       </YGroup.Item>
     </YGroup>
   )

package/src/LucideIconsDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import * as LucideIcons from '@tamagui/lucide-icons'
+import * as LucideIcons from '@tamagui/lucide-icons-2'
 
 import { ScrollView } from 'react-native'
 import { Input, Paragraph, Spacer, YStack, useDebounceValue } from 'tamagui'