@hanzogui/demos 2.0.0

package/src/TabsDemo.tsx

@@ -0,0 +1,171 @@
+import React from 'react'
+import type { TabsContentProps } from '@hanzo/gui'
+import {
+  Button,
+  H5,
+  Separator,
+  SizableText,
+  Tabs,
+  XStack,
+  YStack,
+  isWeb,
+  useWindowDimensions,
+} from '@hanzo/gui'
+
+const demos = ['horizontal', 'vertical'] as const
+const demosTitle: Record<(typeof demos)[number], string> = {
+  horizontal: 'Horizontal',
+  vertical: 'Vertical',
+}
+
+export function TabsDemo() {
+  const [demoIndex, setDemoIndex] = React.useState(0)
+  const demo = demos[demoIndex]
+
+  return (
+    <YStack
+      px="$4"
+      {...(isWeb && {
+        position: 'unset' as any,
+      })}
+    >
+      {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}
+
+      <XStack
+        items="center"
+        gap="$4"
+        position="absolute"
+        b="$3"
+        l="$4"
+        $maxXs={{ display: 'none' }}
+      >
+        <Button size="$2" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>
+          {demosTitle[demo]}
+        </Button>
+      </XStack>
+    </YStack>
+  )
+}
+
+const HorizontalTabs = () => {
+  const { width } = useWindowDimensions()
+  return (
+    <Tabs
+      defaultValue="tab1"
+      orientation="horizontal"
+      flexDirection="column"
+      $maxMd={{ width: width - 32 }}
+      width={400}
+      height={150}
+      rounded="$4"
+      borderWidth="$0.25"
+      borderColor="$borderColor"
+    >
+      <Tabs.List aria-label="Manage your account">
+        <Tabs.Tab
+          activeStyle={{
+            backgroundColor: '$color3',
+          }}
+          flex={1}
+          value="tab1"
+        >
+          <SizableText fontFamily="$body" text="center" ellipsis>
+            Profile
+          </SizableText>
+        </Tabs.Tab>
+        <Tabs.Tab
+          activeStyle={{
+            backgroundColor: '$color3',
+          }}
+          flex={1}
+          value="tab2"
+        >
+          <SizableText fontFamily="$body" text="center" ellipsis>
+            Connections
+          </SizableText>
+        </Tabs.Tab>
+        <Tabs.Tab
+          activeStyle={{
+            backgroundColor: '$color3',
+          }}
+          flex={1}
+          value="tab3"
+        >
+          <SizableText fontFamily="$body" text="center" ellipsis>
+            Notifications
+          </SizableText>
+        </Tabs.Tab>
+      </Tabs.List>
+      <Separator />
+      <TabsContent value="tab1">
+        <H5>Profile</H5>
+      </TabsContent>
+
+      <TabsContent value="tab2">
+        <H5>Connections</H5>
+      </TabsContent>
+
+      <TabsContent value="tab3">
+        <H5>Notifications</H5>
+      </TabsContent>
+    </Tabs>
+  )
+}
+
+const VerticalTabs = () => {
+  return (
+    <Tabs
+      defaultValue="tab1"
+      flexDirection="row"
+      orientation="vertical"
+      width={400}
+      rounded="$4"
+      borderWidth="$0.25"
+      overflow="hidden"
+      borderColor="$borderColor"
+    >
+      <Tabs.List aria-label="Manage your account">
+        <Tabs.Tab activeStyle={{ backgroundColor: '$color3' }} value="tab1">
+          <SizableText>Profile</SizableText>
+        </Tabs.Tab>
+        <Tabs.Tab activeStyle={{ backgroundColor: '$color3' }} value="tab2">
+          <SizableText>Connections</SizableText>
+        </Tabs.Tab>
+        <Tabs.Tab activeStyle={{ backgroundColor: '$color3' }} value="tab3">
+          <SizableText>Notifications</SizableText>
+        </Tabs.Tab>
+      </Tabs.List>
+      <Separator vertical />
+      <TabsContent value="tab1">
+        <H5 text="center">Profile</H5>
+      </TabsContent>
+      <TabsContent value="tab2">
+        <H5 text="center">Connections</H5>
+      </TabsContent>
+      <TabsContent value="tab3">
+        <H5 text="center">Notifications</H5>
+      </TabsContent>
+    </Tabs>
+  )
+}
+
+const TabsContent = (props: TabsContentProps) => {
+  return (
+    <Tabs.Content
+      bg="$background"
+      key="tab3"
+      p="$2"
+      items="center"
+      justify="center"
+      flex={1}
+      borderColor="$background"
+      rounded="$2"
+      borderTopLeftRadius={0}
+      borderTopRightRadius={0}
+      borderWidth="$2"
+      {...props}
+    >
+      {props.children}
+    </Tabs.Content>
+  )
+}

package/src/TabsHeadlessDemo.tsx

@@ -0,0 +1,126 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  SizableStack,
+  ThemeableStack,
+  XStack,
+  YStack,
+  isWeb,
+  styled,
+} from '@hanzo/gui'
+import { createTabs } from '@hanzogui/tabs'
+import { getButtonSized } from '@hanzogui/get-button-sized'
+
+const demos = ['horizontal', 'vertical'] as const
+
+export const TabsFrame = styled(SizableStack, {
+  name: 'TabsFrame',
+})
+
+export const TabFrame = styled(ThemeableStack, {
+  name: 'TabsTrigger',
+  render: 'button',
+  cursor: 'pointer',
+  backgroundColor: 'transparent',
+  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,
+  p: '$6',
+  justify: 'center',
+  items: 'center',
+  bg: '$color4',
+  rounded: '$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
+      px="$4"
+      {...(isWeb && {
+        position: 'static',
+      })}
+    >
+      <TabsView flexDirection={demo === 'horizontal' ? 'row' : 'column'} />
+
+      <XStack
+        items="center"
+        gap="$4"
+        position="absolute"
+        b="$3"
+        l="$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}
+            activeStyle={{ backgroundColor: 'transparent' }}
+          >
+            {name}
+          </CustomTabs.Tab>
+        ))}
+      </CustomTabs.List>
+      {content.map((name, index) => (
+        <CustomTabs.Content key={index} value={name}>
+          {name}
+        </CustomTabs.Content>
+      ))}
+    </CustomTabs>
+  )
+}

package/src/TextDemo.tsx

@@ -0,0 +1,15 @@
+import { Em, Paragraph, SizableText, Span, Strong, YStack } from '@hanzo/gui'
+
+export function TextDemo() {
+  return (
+    <YStack gap="$2" items="center">
+      <SizableText size="$3">SizableText</SizableText>
+      <Paragraph size="$2" fontWeight="800">
+        Paragraph
+      </Paragraph>
+      <Paragraph>
+        <Strong>Strong</Strong>, <Em>Em</Em>, <Span>Span</Span>
+      </Paragraph>
+    </YStack>
+  )
+}

package/src/ThemeBuilderDemo.tsx

@@ -0,0 +1,124 @@
+import type { SquareProps, ThemeName } from '@hanzo/gui'
+import { Square, XStack, YStack } from '@hanzo/gui'
+
+export function ThemeBuilderDemo() {
+  return (
+    <YStack fullscreen overflow="hidden">
+      <XStack maxH={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" />
+      </XStack>
+    </YStack>
+  )
+}
+
+function Col(
+  props: SquareProps & {
+    subTheme?: any
+  }
+) {
+  const subTheme = props.subTheme ? `_${props.subTheme}` : ''
+  return (
+    <YStack p="$2.5" gap="$3.5">
+      <Square
+        rounded="$6"
+        size="$10"
+        theme={props.subTheme}
+        bg="$background"
+        {...props}
+      />
+      <Square
+        rounded="$6"
+        size="$10"
+        theme={('orange' + subTheme) as ThemeName}
+        bg="$background"
+        {...props}
+      />
+      <Square
+        rounded="$6"
+        size="$10"
+        theme={('yellow' + subTheme) as ThemeName}
+        bg="$background"
+        {...props}
+      />
+      <Square
+        rounded="$6"
+        size="$10"
+        theme={('green' + subTheme) as ThemeName}
+        bg="$background"
+        {...props}
+      />
+      <Square
+        rounded="$6"
+        size="$10"
+        theme={('blue' + subTheme) as ThemeName}
+        bg="$background"
+        {...props}
+      />
+      <Square
+        rounded="$6"
+        size="$10"
+        theme={('purple' + subTheme) as ThemeName}
+        bg="$background"
+        {...props}
+      />
+      <Square
+        rounded="$6"
+        size="$10"
+        theme={('pink' + subTheme) as ThemeName}
+        bg="$background"
+        {...props}
+      />
+      <Square
+        rounded="$6"
+        size="$10"
+        theme={('red' + subTheme) as ThemeName}
+        bg="$background"
+        {...props}
+      />
+      <Square
+        rounded="$6"
+        size="$10"
+        theme={props.subTheme}
+        bg="$background"
+        {...props}
+      />
+      <Square
+        rounded="$6"
+        size="$10"
+        theme={('orange' + subTheme) as ThemeName}
+        bg="$background"
+        {...props}
+      />
+      <Square
+        rounded="$6"
+        size="$10"
+        theme={('yellow' + subTheme) as ThemeName}
+        bg="$background"
+        {...props}
+      />
+      <Square
+        rounded="$6"
+        size="$10"
+        theme={('green' + subTheme) as ThemeName}
+        bg="$background"
+        {...props}
+      />
+    </YStack>
+  )
+}

package/src/ThemeInverseDemo.tsx

@@ -0,0 +1,37 @@
+import { Button, H5, Theme, XStack, YStack } from '@hanzo/gui'
+
+export function ThemeInverseDemo() {
+  return (
+    <XStack gap="$4" flexWrap="wrap">
+      <YStack elevation="$4" bg="$background" p="$4" rounded="$4" gap="$3">
+        <H5>Base Theme</H5>
+        <Button>Normal</Button>
+        <Button theme="accent">Accent</Button>
+      </YStack>
+
+      <Theme name="red">
+        <YStack elevation="$4" bg="$background" p="$4" rounded="$4" gap="$3">
+          <H5>Red Theme</H5>
+          <Button>Normal</Button>
+          <Button theme="accent">Accent</Button>
+        </YStack>
+      </Theme>
+
+      <Theme name="blue">
+        <YStack elevation="$4" bg="$background" p="$4" rounded="$4" gap="$3">
+          <H5>Blue Theme</H5>
+          <Button>Normal</Button>
+          <Button theme="accent">Accent</Button>
+        </YStack>
+      </Theme>
+
+      <Theme name="green">
+        <YStack elevation="$4" bg="$background" p="$4" rounded="$4" gap="$3">
+          <H5>Green Theme</H5>
+          <Button>Normal</Button>
+          <Button theme="accent">Accent</Button>
+        </YStack>
+      </Theme>
+    </XStack>
+  )
+}

package/src/ToastDemo.tsx

@@ -0,0 +1,121 @@
+import { Toast, useToastController, useToastState } from '@hanzogui/toast'
+import React from 'react'
+import { Button, Label, Switch, XStack, YStack } from '@hanzo/gui'
+
+/**
+ *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add:
+ *    - <ToastProvider> at the root
+ *    - <ToastViewport /> where you want to show the toasts
+ */
+export const ToastDemo = () => {
+  const [native, setNative] = React.useState(false)
+
+  return (
+    <YStack gap="$4" items="center">
+      <ToastControl native={native} />
+      <CurrentToast />
+
+      <NativeOptions native={native} setNative={setNative} />
+    </YStack>
+  )
+}
+
+const CurrentToast = () => {
+  const currentToast = useToastState()
+
+  if (!currentToast || currentToast.isHandledNatively) return null
+
+  return (
+    <Toast
+      key={currentToast.id}
+      duration={currentToast.duration}
+      viewportName={currentToast.viewportName}
+      enterStyle={{ opacity: 0, scale: 0.95, y: -80 }}
+      exitStyle={{ opacity: 0, scale: 0.95, y: -80 }}
+      opacity={1}
+      scale={1}
+      y={-50}
+      transition="quicker"
+      bg="$color2"
+      boxShadow="0px 2px 4px rgba(0,0,0,0.12), 0px 8px 24px rgba(0,0,0,0.08)"
+    >
+      <XStack gap="$5" items="center" justify="space-between">
+        <YStack gap="$0.5" flex={1}>
+          <Toast.Title>{currentToast.title}</Toast.Title>
+          {!!currentToast.message && (
+            <Toast.Description>{currentToast.message}</Toast.Description>
+          )}
+        </YStack>
+        <Toast.Action asChild altText="Dismiss toast">
+          <Button size="$2">Dismiss</Button>
+        </Toast.Action>
+      </XStack>
+    </Toast>
+  )
+}
+
+const ToastControl = ({ native }: { native: boolean }) => {
+  const toast = useToastController()
+
+  return (
+    <XStack gap="$2" justify="center">
+      <Button
+        onPress={() => {
+          toast.show('Successfully saved!', {
+            message: "Don't worry, we've got your data.",
+            native,
+            demo: true,
+          })
+        }}
+      >
+        Show
+      </Button>
+      <Button
+        onPress={() => {
+          toast.hide()
+        }}
+      >
+        Hide
+      </Button>
+    </XStack>
+  )
+}
+
+const NativeOptions = ({
+  native,
+  setNative,
+}: {
+  native: boolean
+  setNative: (native: boolean) => void
+}) => {
+  return (
+    <XStack gap="$3">
+      <Label size="$1" onPress={() => setNative(false)}>
+        Custom
+      </Label>
+      <Switch
+        theme="surface2"
+        id="native-toggle"
+        size="$1"
+        checked={!!native}
+        onCheckedChange={(val) => setNative(val)}
+      >
+        <Switch.Thumb
+          theme="accent"
+          transition={[
+            'quickest',
+            {
+              transform: {
+                overshootClamping: true,
+              },
+            },
+          ]}
+        />
+      </Switch>
+
+      <Label size="$1" onPress={() => setNative(true)}>
+        Native
+      </Label>
+    </XStack>
+  )
+}

package/src/ToastDuplicateDemo.tsx

@@ -0,0 +1,47 @@
+import { CheckCircle2 } from '@hanzogui/lucide-icons-2'
+import { Toast } from '@hanzogui/toast'
+import React from 'react'
+import { Button, XStack, YStack } from '@hanzo/gui'
+
+/**
+ *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add the ToastProvider and ToastViewport as well.
+ */
+export const ToastDuplicateDemo = () => {
+  const [savedCount, setSavedCount] = React.useState(0)
+
+  return (
+    <YStack items="center">
+      <Button
+        onPress={() => {
+          setSavedCount((old) => old + 1)
+        }}
+      >
+        Show toast
+      </Button>
+      {[...Array(savedCount)].map((_, index) => (
+        <Toast
+          viewportName="viewport-multiple" // Sends to a viewport that supports multiple toasts with the `multipleToasts` prop
+          key={index}
+          duration={4000}
+          enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}
+          exitStyle={{ opacity: 0, scale: 1, y: -20 }}
+          y={0}
+          opacity={1}
+          scale={1}
+          transition="100ms"
+        >
+          <XStack gap="$4" items="center">
+            <YStack>
+              <CheckCircle2 />
+            </YStack>
+
+            <YStack>
+              <Toast.Title>Successfully saved!</Toast.Title>
+              <Toast.Description>Don't worry... We've got your data.</Toast.Description>
+            </YStack>
+          </XStack>
+        </Toast>
+      ))}
+    </YStack>
+  )
+}