@tamagui/demos 1.123.17 → 1.124.1

package/dist/esm/ThemeBuilderDemo.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Users/n8/tamagui/code/demos/src/ThemeBuilderDemo.tsx"],
-  "mappings": "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",
-  "names": ["Square", "XStack", "YStack", "ThemeBuilderDemo", "fullscreen", "ov", "mah", "y", "x", "rotate", "Col", "bg", "size", "props", "subTheme", "padding", "space", "br", "theme"]
+  "mappings": "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",
+  "names": ["Square", "XStack", "YStack", "ThemeBuilderDemo", "fullscreen", "overflow", "maxHeight", "y", "x", "rotate", "Col", "backgroundColor", "size", "props", "subTheme", "padding", "space", "borderRadius", "theme"]
 }

package/dist/esm/ToastDemo.js

@@ -64,7 +64,7 @@ const ToastDemo = () => {
     {
       id: "native-toggle",
       nativeID: "native-toggle",
-      theme: "active",
+      theme: "accent",
       size: "$1",
       checked: !!native,
       onCheckedChange: (val) => setNative(val),

package/dist/esm/ToastDemo.mjs

@@ -78,7 +78,7 @@ const ToastDemo = () => {
     }), /* @__PURE__ */jsx(Switch, {
       id: "native-toggle",
       nativeID: "native-toggle",
-      theme: "active",
+      theme: "accent",
       size: "$1",
       checked: !!native,
       onCheckedChange: val => setNative(val),

package/dist/esm/ToastDemo.native.js

@@ -86,7 +86,7 @@ var ToastDemo = function() {
       /* @__PURE__ */ _jsx(Switch, {
         id: "native-toggle",
         nativeID: "native-toggle",
-        theme: "active",
+        theme: "accent",
         size: "$1",
         checked: !!native,
         onCheckedChange: function(val) {

package/dist/esm/TokensDemo.js

@@ -27,7 +27,7 @@ function TokensDemo() {
       Button,
       {
         size: "$3",
-        theme: section === key ? "active" : null,
+        theme: section === key ? "accent" : null,
         fontFamily: "$silkscreen",
         onPress: () => setSection(key),
         children: name

package/dist/esm/TokensDemo.mjs

@@ -28,7 +28,7 @@ function TokensDemo() {
       }) => /* @__PURE__ */jsx(XGroup.Item, {
         children: /* @__PURE__ */jsx(Button, {
           size: "$3",
-          theme: section === key ? "active" : null,
+          theme: section === key ? "accent" : null,
           fontFamily: "$silkscreen",
           onPress: () => setSection(key),
           children: name

package/dist/esm/TokensDemo.native.js

@@ -33,7 +33,7 @@ function TokensDemo() {
           return /* @__PURE__ */ _jsx(XGroup.Item, {
             children: /* @__PURE__ */ _jsx(Button, {
               size: "$3",
-              theme: section === key ? "active" : null,
+              theme: section === key ? "accent" : null,
               fontFamily: "$silkscreen",
               onPress: function() {
                 return setSection(key);

package/dist/esm/tamagui.config.js

@@ -1,10 +1,8 @@
-import { config } from "@tamagui/config/v3";
 import { createTamagui } from "tamagui";
-import { config as config2 } from "@tamagui/config/v3";
-const conf = createTamagui(config);
-var tamagui_config_default = conf;
+import { config } from "@tamagui/tamagui-dev-config";
+const tamaConf = createTamagui(config);
+var tamagui_config_default = tamaConf;
 export {
-  config2 as config,
   tamagui_config_default as default
 };
 //# sourceMappingURL=tamagui.config.js.map

package/dist/esm/tamagui.config.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/tamagui.config.ts"],
-  "mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,UAAAA,eAAc;AAEvB,MAAM,OAAO,cAAc,MAAM;AAEjC,IAAO,yBAAQ;",
-  "names": ["config"]
+  "mappings": "AAAA,SAAS,qBAAqB;AAC9B,SAAS,cAAc;AAEvB,MAAM,WAAW,cAAc,MAAM;AAYrC,IAAO,yBAAQ;",
+  "names": []
 }

package/dist/esm/tamagui.config.mjs

@@ -1,7 +1,6 @@
-import { config } from "@tamagui/config/v3";
 import { createTamagui } from "tamagui";
-import { config as config2 } from "@tamagui/config/v3";
-const conf = createTamagui(config);
-var tamagui_config_default = conf;
-export { config2 as config, tamagui_config_default as default };
+import { config } from "@tamagui/tamagui-dev-config";
+const tamaConf = createTamagui(config);
+var tamagui_config_default = tamaConf;
+export { tamagui_config_default as default };
 //# sourceMappingURL=tamagui.config.mjs.map

package/dist/esm/tamagui.config.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["config","createTamagui","config2","conf","tamagui_config_default"],"sources":["../../src/tamagui.config.ts"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,QAAc;AACvB,SAASC,aAAA,QAAqB;AAE9B,SAASD,MAAA,IAAAE,OAAA,QAAc;AAEvB,MAAMC,IAAA,GAAOF,aAAA,CAAcD,MAAM;AAEjC,IAAOI,sBAAA,GAAQD,IAAA","ignoreList":[]}
+{"version":3,"names":["createTamagui","config","tamaConf","tamagui_config_default"],"sources":["../../src/tamagui.config.ts"],"sourcesContent":[null],"mappings":"AAAA,SAASA,aAAA,QAAqB;AAC9B,SAASC,MAAA,QAAc;AAEvB,MAAMC,QAAA,GAAWF,aAAA,CAAcC,MAAM;AAYrC,IAAOE,sBAAA,GAAQD,QAAA","ignoreList":[]}

package/dist/esm/tamagui.config.native.js

@@ -1,9 +1,7 @@
-import { config } from "@tamagui/config/v3";
 import { createTamagui } from "tamagui";
-import { config as config2 } from "@tamagui/config/v3";
-var conf = createTamagui(config), tamagui_config_default = conf;
+import { config } from "@tamagui/tamagui-dev-config";
+var tamaConf = createTamagui(config), tamagui_config_default = tamaConf;
 export {
-  config2 as config,
   tamagui_config_default as default
 };
 //# sourceMappingURL=tamagui.config.js.map

package/dist/esm/tamagui.config.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Users/n8/tamagui/code/demos/src/tamagui.config.ts"],
-  "mappings": "AAAA,SAASA,cAAc;AACvB,SAASC,qBAAqB;AAE9B,SAASD,UAAAA,eAAc;AAEvB,IAAME,OAAOD,cAAcD,MAAAA,GAE3B,yBAAeE;",
-  "names": ["config", "createTamagui", "conf"]
+  "mappings": "AAAA,SAASA,qBAAqB;AAC9B,SAASC,cAAc;AAEvB,IAAMC,WAAWF,cAAcC,MAAAA,GAY/B,yBAAeC;",
+  "names": ["createTamagui", "config", "tamaConf"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/demos",
-  "version": "1.123.17",
+  "version": "1.124.1",
   "sideEffects": [
     "*.css"
   ],
@@ -45,29 +45,30 @@
     }
   },
   "dependencies": {
-    "@tamagui/avatar": "1.123.17",
-    "@tamagui/button": "1.123.17",
-    "@tamagui/config": "1.123.17",
-    "@tamagui/core": "1.123.17",
-    "@tamagui/list-item": "1.123.17",
-    "@tamagui/logo": "1.123.17",
-    "@tamagui/lucide-icons": "1.123.17",
-    "@tamagui/menu": "1.123.17",
-    "@tamagui/popover": "1.123.17",
-    "@tamagui/progress": "1.123.17",
-    "@tamagui/radio-group": "1.123.17",
-    "@tamagui/select": "1.123.17",
-    "@tamagui/sheet": "1.123.17",
-    "@tamagui/slider": "1.123.17",
-    "@tamagui/stacks": "1.123.17",
-    "@tamagui/toast": "1.123.17",
-    "tamagui": "1.123.17"
+    "@tamagui/avatar": "1.124.1",
+    "@tamagui/button": "1.124.1",
+    "@tamagui/config": "1.124.1",
+    "@tamagui/core": "1.124.1",
+    "@tamagui/list-item": "1.124.1",
+    "@tamagui/logo": "1.124.1",
+    "@tamagui/lucide-icons": "1.124.1",
+    "@tamagui/menu": "1.124.1",
+    "@tamagui/popover": "1.124.1",
+    "@tamagui/progress": "1.124.1",
+    "@tamagui/radio-group": "1.124.1",
+    "@tamagui/select": "1.124.1",
+    "@tamagui/sheet": "1.124.1",
+    "@tamagui/slider": "1.124.1",
+    "@tamagui/stacks": "1.124.1",
+    "@tamagui/tamagui-dev-config": "1.124.1",
+    "@tamagui/toast": "1.124.1",
+    "tamagui": "1.124.1"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.123.17",
+    "@tamagui/build": "1.124.1",
     "react": "*"
   },
   "publishConfig": {

package/src/AlertDialogDemo.tsx

@@ -34,7 +34,7 @@ export function AlertDialogDemo() {
           opacity={1}
           y={0}
         >
-          <YStack space>
+          <YStack gap="$4">
             <AlertDialog.Title>Accept</AlertDialog.Title>
             <AlertDialog.Description>
               By pressing yes, you accept our terms and conditions.
@@ -45,7 +45,7 @@ export function AlertDialogDemo() {
                 <Button>Cancel</Button>
               </AlertDialog.Cancel>
               <AlertDialog.Action asChild>
-                <Button theme="active">Accept</Button>
+                <Button theme="accent">Accept</Button>
               </AlertDialog.Action>
             </XStack>
           </YStack>

package/src/AnimationsPresenceDemo.tsx

@@ -66,7 +66,7 @@ export function AnimationsPresenceDemo() {
       </AnimatePresence>
 
       <Button
-        accessibilityLabel="Carousel left"
+        aria-label="Carousel left"
         icon={ArrowLeft}
         size="$5"
         position="absolute"
@@ -74,11 +74,11 @@ export function AnimationsPresenceDemo() {
         circular
         elevate
         onPress={() => paginate(-1)}
-        zi={100}
+        zIndex={100}
       />
 
       <Button
-        accessibilityLabel="Carousel right"
+        aria-label="Carousel right"
         icon={ArrowRight}
         size="$5"
         position="absolute"
@@ -86,7 +86,7 @@ export function AnimationsPresenceDemo() {
         circular
         elevate
         onPress={() => paginate(1)}
-        zi={100}
+        zIndex={100}
       />
     </XStack>
   )

package/src/ButtonDemo.tsx

@@ -9,7 +9,7 @@ export function ButtonDemo(props) {
         Large
       </Button>
       <XStack gap="$2" justifyContent="center">
-        <Button size="$3" theme="active">
+        <Button size="$3" theme="accent">
           Active
         </Button>
         <Button size="$3" variant="outlined">

package/src/DialogDemo.tsx

@@ -12,7 +12,6 @@ import {
   Unspaced,
   View,
   XStack,
-  YStack,
 } from 'tamagui'
 import { SelectDemoItem } from './SelectDemo'
 
@@ -39,6 +38,7 @@ function DialogInstance({ disableAdapt }: { disableAdapt?: boolean }) {
               <Adapt.Contents />
             </Sheet.Frame>
             <Sheet.Overlay
+              backgroundColor="$shadow6"
               animation="lazy"
               enterStyle={{ opacity: 0 }}
               exitStyle={{ opacity: 0 }}
@@ -50,8 +50,8 @@ function DialogInstance({ disableAdapt }: { disableAdapt?: boolean }) {
       <Dialog.Portal>
         <Dialog.Overlay
           key="overlay"
+          backgroundColor="$shadow6"
           animation="slow"
-          opacity={0.5}
           enterStyle={{ opacity: 0 }}
           exitStyle={{ opacity: 0 }}
         />
@@ -96,7 +96,7 @@ function DialogInstance({ disableAdapt }: { disableAdapt?: boolean }) {
             <DialogInstance />
 
             <Dialog.Close displayWhenAdapted asChild>
-              <Button theme="active" aria-label="Close">
+              <Button disabled theme="accent" aria-label="Close">
                 Save changes
               </Button>
             </Dialog.Close>

package/src/ScrollViewDemo.tsx

@@ -13,7 +13,7 @@ export function ScrollViewDemo() {
         <Square margin="$4" size={120} backgroundColor="$red9" />
         <Circle margin="$4" size={120} backgroundColor="$orange9" />
         <Square margin="$4" size={120} backgroundColor="$yellow9" />
-        <Circle margin="$4" size={120} backgroundColor="$green9" />
+        <Circle margin="$4" size={120} backgroundColor="$red9" />
         <Square margin="$4" size={120} backgroundColor="$blue9" />
         <Circle margin="$4" size={120} backgroundColor="$purple9" />
         <Square margin="$4" size={120} backgroundColor="$pink9" />

package/src/SelectDemo.tsx

@@ -42,7 +42,7 @@ export function SelectDemoItem(props: SelectProps) {
             </Sheet.ScrollView>
           </Sheet.Frame>
           <Sheet.Overlay
-            bg="$shadowColor"
+            backgroundColor="$shadowColor"
             animation="lazy"
             enterStyle={{ opacity: 0 }}
             exitStyle={{ opacity: 0 }}

package/src/SheetDemo.tsx

@@ -79,6 +79,7 @@ export const SheetDemo = () => {
       >
         <Sheet.Overlay
           animation="lazy"
+          backgroundColor="$shadow6"
           enterStyle={{ opacity: 0 }}
           exitStyle={{ opacity: 0 }}
         />
@@ -127,7 +128,7 @@ function InnerSheet(props: SheetProps) {
       <Sheet.Handle />
       <Sheet.Frame flex={1} justifyContent="center" alignItems="center" gap="$5">
         <Sheet.ScrollView>
-          <YStack p="$5" gap="$8">
+          <YStack padding="$5" gap="$8">
             <Button
               size="$6"
               circular

package/src/TabsAdvancedDemo.tsx

@@ -114,7 +114,7 @@ const TabsAdvancedBackground = () => {
           {activeAt && (
             <TabsRovingIndicator
               borderRadius="$4"
-              theme="active"
+              theme="accent"
               width={activeAt.width}
               height={activeAt.height}
               x={activeAt.x}
@@ -241,7 +241,7 @@ const TabsAdvancedUnderline = () => {
         <AnimatePresence>
           {activeAt && (
             <TabsRovingIndicator
-              theme="active"
+              theme="accent"
               active
               width={activeAt.width}
               height="$0.5"

package/src/ThemeBuilderDemo.tsx

@@ -3,25 +3,25 @@ import { Square, XStack, YStack } from 'tamagui'
 
 export function ThemeBuilderDemo() {
   return (
-    <YStack fullscreen ov="hidden">
-      <XStack mah={200} y={-100} x={-50} rotate="-10deg">
-        <Col y={35} bg="$color9" />
-        <Col size="$8" y={30} bg="$color7" />
-        <Col size="$6" y={-50} bg="$color5" />
-        <Col size="$4" bg="$color3" />
-        <Col size="$2" bg="$color1" />
-        <Col size="$4" y={50} bg="$color3" />
-        <Col size="$6" y={80} bg="$color5" />
-        <Col size="$8" bg="$color7" />
-        <Col bg="$color9" />
-        <Col size="$8" bg="$color7" />
-        <Col size="$6" y={80} bg="$color5" />
-        <Col size="$4" y={50} bg="$color3" />
-        <Col size="$2" bg="$color1" />
-        <Col size="$4" bg="$color3" />
-        <Col size="$6" y={-50} bg="$color5" />
-        <Col size="$8" y={30} bg="$color7" />
-        <Col y={35} bg="$color9" />
+    <YStack fullscreen overflow="hidden">
+      <XStack maxHeight={200} y={-100} x={-50} rotate="-10deg">
+        <Col y={35} backgroundColor="$color9" />
+        <Col size="$8" y={30} backgroundColor="$color7" />
+        <Col size="$6" y={-50} backgroundColor="$color5" />
+        <Col size="$4" backgroundColor="$color3" />
+        <Col size="$2" backgroundColor="$color1" />
+        <Col size="$4" y={50} backgroundColor="$color3" />
+        <Col size="$6" y={80} backgroundColor="$color5" />
+        <Col size="$8" backgroundColor="$color7" />
+        <Col backgroundColor="$color9" />
+        <Col size="$8" backgroundColor="$color7" />
+        <Col size="$6" y={80} backgroundColor="$color5" />
+        <Col size="$4" y={50} backgroundColor="$color3" />
+        <Col size="$2" backgroundColor="$color1" />
+        <Col size="$4" backgroundColor="$color3" />
+        <Col size="$6" y={-50} backgroundColor="$color5" />
+        <Col size="$8" y={30} backgroundColor="$color7" />
+        <Col y={35} backgroundColor="$color9" />
       </XStack>
     </YStack>
   )
@@ -35,76 +35,88 @@ function Col(
   const subTheme = props.subTheme ? `_${props.subTheme}` : ''
   return (
     <YStack padding="$2.5" space="$3.5">
-      <Square br="$6" size="$10" theme={props.subTheme} bg="$background" {...props} />
       <Square
-        br="$6"
+        borderRadius="$6"
+        size="$10"
+        theme={props.subTheme}
+        backgroundColor="$background"
+        {...props}
+      />
+      <Square
+        borderRadius="$6"
         size="$10"
         theme={('orange' + subTheme) as ThemeName}
-        bg="$background"
+        backgroundColor="$background"
         {...props}
       />
       <Square
-        br="$6"
+        borderRadius="$6"
         size="$10"
         theme={('yellow' + subTheme) as ThemeName}
-        bg="$background"
+        backgroundColor="$background"
         {...props}
       />
       <Square
-        br="$6"
+        borderRadius="$6"
         size="$10"
         theme={('green' + subTheme) as ThemeName}
-        bg="$background"
+        backgroundColor="$background"
         {...props}
       />
       <Square
-        br="$6"
+        borderRadius="$6"
         size="$10"
         theme={('blue' + subTheme) as ThemeName}
-        bg="$background"
+        backgroundColor="$background"
         {...props}
       />
       <Square
-        br="$6"
+        borderRadius="$6"
         size="$10"
         theme={('purple' + subTheme) as ThemeName}
-        bg="$background"
+        backgroundColor="$background"
         {...props}
       />
       <Square
-        br="$6"
+        borderRadius="$6"
         size="$10"
         theme={('pink' + subTheme) as ThemeName}
-        bg="$background"
+        backgroundColor="$background"
         {...props}
       />
       <Square
-        br="$6"
+        borderRadius="$6"
         size="$10"
         theme={('red' + subTheme) as ThemeName}
-        bg="$background"
+        backgroundColor="$background"
+        {...props}
+      />
+      <Square
+        borderRadius="$6"
+        size="$10"
+        theme={props.subTheme}
+        backgroundColor="$background"
         {...props}
       />
-      <Square br="$6" size="$10" theme={props.subTheme} bg="$background" {...props} />
       <Square
-        br="$6"
+        borderRadius="$6"
         size="$10"
         theme={('orange' + subTheme) as ThemeName}
-        bg="$background"
+        backgroundColor="$background"
         {...props}
       />
       <Square
-        br="$6"
+        borderRadius="$6"
         size="$10"
         theme={('yellow' + subTheme) as ThemeName}
-        bg="$background"
+        backgroundColor="$background"
         {...props}
       />
       <Square
-        br="$6"
+        borderRadius="$6"
         size="$10"
         theme={('green' + subTheme) as ThemeName}
-        bg="$background"
+        backgroundColor="$background"
         {...props}
       />
     </YStack>

package/src/ToastDemo.tsx

@@ -86,7 +86,7 @@ const NativeOptions = ({
       <Switch
         id="native-toggle"
         nativeID="native-toggle"
-        theme="active"
+        theme="accent"
         size="$1"
         checked={!!native}
         onCheckedChange={(val) => setNative(val)}

package/src/TokensDemo.tsx

@@ -36,7 +36,7 @@ export function TokensDemo() {
             <XGroup.Item key={key}>
               <Button
                 size="$3"
-                theme={section === key ? 'active' : null}
+                theme={section === key ? 'accent' : null}
                 fontFamily="$silkscreen"
                 onPress={() => setSection(key)}
               >

package/src/tamagui.config.ts

@@ -1,14 +1,16 @@
-import { config } from '@tamagui/config/v3'
 import { createTamagui } from 'tamagui'
+import { config } from '@tamagui/tamagui-dev-config'
 
-export { config } from '@tamagui/config/v3'
+const tamaConf = createTamagui(config)
 
-const conf = createTamagui(config)
-
-export default conf
-
-export type Conf = typeof conf
+export type Conf = typeof tamaConf
 
 declare module 'tamagui' {
   interface TamaguiCustomConfig extends Conf {}
+
+  interface TypeOverride {
+    groupNames(): 'card' | 'takeoutBody' | 'content' | 'item'
+  }
 }
+
+export default tamaConf