@tamagui/demos 2.7.7 → 3.0.0-beta.643.1

package/src/TooltipDemo.tsx

@@ -10,20 +10,20 @@ import { Button, Paragraph, Theme, Tooltip, TooltipGroup, XStack, YStack } from
 
 export function TooltipDemo() {
   return (
-    <Theme name="surface2">
+    <Theme name="level3">
       <TooltipGroup delay={{ open: 300, close: 100 }}>
-        <YStack gap="$2" self="center">
-          <XStack gap="$2">
+        <YStack gap="2" self="center">
+          <XStack gap="2">
             <Demo groupId="0" placement="top-end" Icon={Circle} />
             <Demo groupId="1" placement="top" Icon={ChevronUp} />
             <Demo groupId="2" placement="top-start" Icon={Circle} />
           </XStack>
-          <XStack gap="$2">
+          <XStack gap="2">
             <Demo groupId="3" placement="left" Icon={ChevronLeft} />
             <YStack flex={1} />
             <Demo groupId="4" placement="right" Icon={ChevronRight} />
           </XStack>
-          <XStack gap="$2">
+          <XStack gap="2">
             <Demo groupId="5" placement="bottom-end" Icon={Circle} />
             <Demo groupId="6" placement="bottom" Icon={ChevronDown} />
             <Demo groupId="7" placement="bottom-start" Icon={Circle} />
@@ -41,25 +41,19 @@ function Demo({ Icon, ...props }: TooltipProps & { Icon?: any }) {
         <Button icon={Icon} circular />
       </Tooltip.Trigger>
       <Tooltip.Content
-        enterStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
-        exitStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
-        scale={1}
-        x={0}
-        y={0}
-        opacity={1}
-        py="$2"
-        px="$3"
-        transition={[
-          'quick',
-          {
-            opacity: {
-              overshootClamping: true,
-            },
-          },
-        ]}
+        theme="Tooltip"
+        scale="1 enter:0.9 exit:0.9"
+        x="0 enter:0 exit:0"
+        y="0 enter:-5px exit:-5px"
+        opacity="1 enter:0 exit:0"
+        py="2"
+        px="3"
+        rounded
+        boxShadow="0 2px 4px shadow-color"
+        transition={['quick', { opacity: { overshootClamping: true } }]}
       >
-        <Tooltip.Arrow />
-        <Paragraph size="$2" lineHeight="$1">
+        <Tooltip.Arrow backgroundColor="background" borderColor="border-color" />
+        <Paragraph size="2" lineHeight="1">
           Hello world
         </Paragraph>
       </Tooltip.Content>

package/src/UpdateThemeDemo.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { config } from '@tamagui/config/v3'
 import { addTheme, updateTheme } from '@tamagui/theme'
 
 import {
@@ -8,13 +7,11 @@ import {
   Theme,
   XStack,
   YStack,
+  getTokens,
   getVariableValue,
   useIsomorphicLayoutEffect,
 } from 'tamagui'
 
-const colors = config.tokens.color
-const colorKeys = Object.keys(colors)
-
 export function UpdateThemeDemo() {
   const [theme, setTheme] = React.useState<any>()
 
@@ -30,15 +27,20 @@ export function UpdateThemeDemo() {
   }, [])
 
   return (
-    <YStack items="center" gap="$4">
-      <XStack gap={'$5'}>
+    <YStack items="center" gap="4">
+      <XStack gap="5">
         <Theme name={theme ?? null}>
-          <Square rounded="$8" size={100} bg="$color" />
+          <Square rounded="8" bg="color" size={100} />
         </Theme>
       </XStack>
 
       <Button
         onPress={() => {
+          // read the app's own palette rather than importing a config: pulling a
+          // config entry in here dragged its whole color graph into every
+          // consumer of this demo
+          const colors = getTokens().color
+          const colorKeys = Object.keys(colors)
           const randomColor = getVariableValue(
             colors[colorKeys[Math.floor(Math.random() * colorKeys.length)]]
           )

package/src/index.tsx

@@ -18,11 +18,11 @@ export * from './ThemeBuilderDemo'
 export * from './CardDemo'
 export * from './CheckboxDemo'
 export * from './CheckboxHeadlessDemo'
-export * from './CheckboxUnstyledDemo'
 export * from './ColorsDemo'
 export * from './ContextMenuDemo'
 export * from './MenuDemo'
 export * from './DialogDemo'
+export * from './FieldDemo'
 export * from './FormsDemo'
 export * from './GroupDemo'
 export * from './HeadingsDemo'
@@ -38,7 +38,7 @@ export * from './PopoverDemo'
 export * from './ProgressDemo'
 export * from './RadioGroupDemo'
 export * from './RadioGroupHeadlessDemo'
-export * from './RadioGroupUnstyledDemo'
+export * from './RadioGroupCustomDemo'
 export * from './ReplaceThemeDemo'
 export * from './ScrollViewDemo'
 export * from './SelectDemo'
@@ -50,17 +50,15 @@ export * from './SpinnerDemo'
 export * from './StacksDemo'
 export * from './SwitchDemo'
 export * from './SwitchHeadlessDemo'
-export * from './SwitchUnstyledDemo'
 export * from './TabsAdvancedDemo'
 export * from './TabsDemo'
 export * from './TextDemo'
 export * from './ThemeInverseDemo'
 export * from './ToastDemo'
 export * from './ToastDuplicateDemo'
-export * from './ToastV1Demo'
 export * from './ToggleGroupDemo'
 export * from './TokensDemo'
 export * from './TooltipDemo'
 export * from './UpdateThemeDemo'
 export * from './useOnIntersecting'
-export * from './TabsHeadlessDemo'
+export * from './TabsCustomDemo'

package/types/AccordionDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function AccordionDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AccordionDemo.d.ts.map

package/types/AddThemeDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function AddThemeDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AddThemeDemo.d.ts.map

package/types/AlertDialogDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function AlertDialogDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AlertDialogDemo.d.ts.map

package/types/AnimationsDelayDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function AnimationsDelayDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AnimationsDelayDemo.d.ts.map

package/types/AnimationsDemo.d.ts

@@ -0,0 +1,12 @@
+export declare function AnimationsDemo(props: any): import("react/jsx-runtime").JSX.Element;
+export declare const positions: ({
+    x: number;
+    y: number;
+    scale: number;
+    rotate: string;
+} | {
+    x: number;
+    y: number;
+    scale: string;
+    rotate: string;
+})[];

package/types/AnimationsEnterDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function AnimationsEnterDemo(props: any): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AnimationsEnterDemo.d.ts.map

package/types/AnimationsHoverDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function AnimationsHoverDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AnimationsHoverDemo.d.ts.map

package/types/AnimationsPresenceDemo.d.ts

@@ -0,0 +1,3 @@
+export declare const images: any[];
+export declare function AnimationsPresenceDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AnimationsPresenceDemo.d.ts.map

package/types/AnimationsTimingDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function AnimationsTimingDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AnimationsTimingDemo.d.ts.map

package/types/AvatarDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function AvatarDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AvatarDemo.d.ts.map

package/types/BoxShadowTokenDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function BoxShadowTokenDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BoxShadowTokenDemo.d.ts.map

package/types/BuildAButtonDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function BuildAButtonDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BuildAButtonDemo.d.ts.map

package/types/ButtonDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function ButtonDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ButtonDemo.d.ts.map

package/types/CardDemo.d.ts

@@ -0,0 +1,4 @@
+import type { CardProps } from 'tamagui';
+export declare function CardDemo(): import("react/jsx-runtime").JSX.Element;
+export declare function DemoCard(props: CardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CardDemo.d.ts.map

package/types/CheckboxDemo.d.ts

@@ -0,0 +1,6 @@
+import type { CheckboxProps } from 'tamagui';
+export declare function CheckboxDemo(): import("react/jsx-runtime").JSX.Element;
+export declare function CheckboxWithLabel({ size, label, disabled, ...checkboxProps }: CheckboxProps & {
+    label?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CheckboxDemo.d.ts.map

package/types/CheckboxHeadlessDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function CheckboxHeadlessDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CheckboxHeadlessDemo.d.ts.map

package/types/ColorsDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function ColorsDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ColorsDemo.d.ts.map

package/types/ContextMenuDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function ContextMenuDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ContextMenuDemo.d.ts.map

package/types/DialogDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function DialogDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DialogDemo.d.ts.map

package/types/FormsDemo.d.ts

@@ -0,0 +1,5 @@
+import type { SizeTokens } from 'tamagui';
+export declare function FormsDemo(props: {
+    size: SizeTokens;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FormsDemo.d.ts.map

package/types/Grid.d.ts

@@ -0,0 +1,8 @@
+export type GridProps = {
+    children?: any;
+    itemMinWidth?: number;
+    gap?: any;
+    columns?: number;
+};
+export declare function Grid({ children, columns, itemMinWidth, gap }: GridProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Grid.d.ts.map

package/types/GroupDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function GroupDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GroupDemo.d.ts.map

package/types/HeadingsDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function HeadingsDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HeadingsDemo.d.ts.map

package/types/ImageDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function ImageDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ImageDemo.d.ts.map

package/types/InputsDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function InputsDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InputsDemo.d.ts.map

package/types/LabelDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function LabelDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LabelDemo.d.ts.map

package/types/LinearGradientDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function LinearGradientDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LinearGradientDemo.d.ts.map

package/types/ListItemDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function ListItemDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ListItemDemo.d.ts.map

package/types/LucideIconsDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function LucideIconsDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LucideIconsDemo.d.ts.map

package/types/MenuDemo.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Menu Demo using Tamagui Menu component.
+ * Automatically uses native menus on iOS/Android, web menus on web.
+ * No configuration needed - it just works!
+ */
+export declare function MenuDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MenuDemo.d.ts.map

package/types/MenuSkins.d.ts

@@ -0,0 +1,5 @@
+import { ContextMenu as ContextMenuBehavior } from '@tamagui/context-menu';
+import { Menu as MenuBehavior } from '@tamagui/menu';
+export declare const Menu: typeof MenuBehavior;
+export declare const ContextMenu: typeof ContextMenuBehavior;
+//# sourceMappingURL=MenuSkins.d.ts.map

package/types/NewInputsDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function NewInputsDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NewInputsDemo.d.ts.map

package/types/PopoverDemo.d.ts

@@ -0,0 +1,8 @@
+import type { PopoverProps } from 'tamagui';
+export declare function PopoverDemo(): import("react/jsx-runtime").JSX.Element;
+export declare function Demo({ Icon, Name, shouldAdapt, ...props }: PopoverProps & {
+    Icon?: any;
+    Name?: string;
+    shouldAdapt?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PopoverDemo.d.ts.map

package/types/ProgressDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function ProgressDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProgressDemo.d.ts.map

package/types/RadioGroupCustomDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function RadioGroupCustomDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RadioGroupCustomDemo.d.ts.map

package/types/RadioGroupDemo.d.ts

@@ -0,0 +1,8 @@
+import type { SizeTokens } from 'tamagui';
+export declare function RadioGroupDemo(): import("react/jsx-runtime").JSX.Element;
+export declare function RadioGroupItemWithLabel(props: {
+    size: SizeTokens;
+    value: string;
+    label: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RadioGroupDemo.d.ts.map

package/types/RadioGroupHeadlessDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function RadioGroupHeadlessDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RadioGroupHeadlessDemo.d.ts.map

package/types/ReplaceThemeDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function ReplaceThemeDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ReplaceThemeDemo.d.ts.map

package/types/ScrollViewDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function ScrollViewDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ScrollViewDemo.d.ts.map

package/types/SelectDemo.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import type { SelectProps } from 'tamagui';
+export declare function SelectDemo(): import("react/jsx-runtime").JSX.Element;
+type SelectValue = Lowercase<(typeof items)[number]['name']>;
+export declare function SelectDemoContents(props: SelectProps<SelectValue> & {
+    trigger?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare const items: readonly [{
+    readonly name: "Apple";
+}, {
+    readonly name: "Pear";
+}, {
+    readonly name: "Blackberry";
+}, {
+    readonly name: "Peach";
+}, {
+    readonly name: "Apricot";
+}, {
+    readonly name: "Melon";
+}, {
+    readonly name: "Honeydew";
+}, {
+    readonly name: "Starfruit";
+}, {
+    readonly name: "Blueberry";
+}, {
+    readonly name: "Raspberry";
+}, {
+    readonly name: "Strawberry";
+}, {
+    readonly name: "Mango";
+}, {
+    readonly name: "Pineapple";
+}, {
+    readonly name: "Lime";
+}, {
+    readonly name: "Lemon";
+}, {
+    readonly name: "Coconut";
+}, {
+    readonly name: "Guava";
+}, {
+    readonly name: "Papaya";
+}, {
+    readonly name: "Orange";
+}, {
+    readonly name: "Grape";
+}, {
+    readonly name: "Jackfruit";
+}, {
+    readonly name: "Durian";
+}];
+export {};
+//# sourceMappingURL=SelectDemo.d.ts.map

package/types/SeparatorDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function SeparatorDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SeparatorDemo.d.ts.map

package/types/ShapesDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function ShapesDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ShapesDemo.d.ts.map

package/types/SheetDemo.d.ts

@@ -0,0 +1,2 @@
+export declare const SheetDemo: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SheetDemo.d.ts.map

package/types/SliderDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function SliderDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SliderDemo.d.ts.map

package/types/SpinnerDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function SpinnerDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SpinnerDemo.d.ts.map

package/types/StacksDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function StacksDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StacksDemo.d.ts.map

package/types/SwitchDemo.d.ts

@@ -0,0 +1,8 @@
+import type { SizeTokens } from 'tamagui';
+export declare function SwitchDemo(): import("react/jsx-runtime").JSX.Element;
+export declare function SwitchWithLabel(props: {
+    size: SizeTokens;
+    defaultChecked?: boolean;
+    activeStyle?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SwitchDemo.d.ts.map

package/types/SwitchHeadlessDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function SwitchHeadlessDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SwitchHeadlessDemo.d.ts.map

package/types/TabsAdvancedDemo.d.ts

@@ -0,0 +1,2 @@
+export declare const TabsAdvancedDemo: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TabsAdvancedDemo.d.ts.map