@hanzogui/demos 2.0.0

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@hanzogui/demos",
+  "version": "2.0.0",
+  "source": "demos/src/index.tsx",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "types": "./src",
+  "exports": {
+    "./package.json": "./package.json",
+    "./photo/*": "./public/*.jpg",
+    ".": {
+      "types": "./src/index.tsx",
+      "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/esm/index.mjs"
+    },
+    "./demo/*": {
+      "types": "./types/*.d.ts",
+      "react-native": "./dist/esm/*.native.js",
+      "browser": "./dist/esm/*.mjs",
+      "module": "./dist/esm/*.mjs",
+      "import": "./dist/esm/*.mjs",
+      "require": "./dist/cjs/*.cjs",
+      "default": "./dist/esm/*.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "hanzo-gui-build --skip-types",
+    "watch": "hanzo-gui-build --skip-types --watch",
+    "clean": "hanzo-gui-build clean",
+    "clean:build": "hanzo-gui-build clean:build"
+  },
+  "dependencies": {
+    "@hanzogui/colors": "workspace:*",
+    "@hanzogui/config": "workspace:*",
+    "@hanzogui/core": "workspace:*",
+    "@hanzogui/get-button-sized": "workspace:*",
+    "@hanzogui/logo": "workspace:*",
+    "@hanzogui/lucide-icons-2": "workspace:*",
+    "@hanzogui/dev-config": "workspace:*",
+    "@hanzogui/theme": "workspace:*",
+    "@hanzo/gui": "workspace:*"
+  },
+  "devDependencies": {
+    "@hanzogui/build": "workspace:*",
+    "react": ">=19",
+    "react-native": "0.83.2"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-native": "*"
+  }
+}

package/src/AccordionDemo.tsx

@@ -0,0 +1,73 @@
+import { ChevronDown } from '@hanzogui/lucide-icons-2'
+import { Accordion, Paragraph, Square } from '@hanzo/gui'
+
+export function AccordionDemo() {
+  return (
+    <Accordion overflow="hidden" width="$20" type="multiple">
+      {/* negative margin prevents double border between items */}
+      <Accordion.Item value="a1" mb={-1}>
+        <Accordion.Trigger
+          flexDirection="row"
+          justify="space-between"
+          borderWidth={1}
+          borderColor="$borderColor"
+        >
+          {({ open }: { open: boolean }) => (
+            <>
+              <Paragraph>1. Take a cold shower</Paragraph>
+              <Square transparent transition="quick" rotate={open ? '180deg' : '0deg'}>
+                <ChevronDown size="$1" color="$color" />
+              </Square>
+            </>
+          )}
+        </Accordion.Trigger>
+        <Accordion.HeightAnimator transition="300ms">
+          <Accordion.Content
+            transition="300ms"
+            exitStyle={{ opacity: 0 }}
+            borderWidth={1}
+            borderTopWidth={0}
+            borderColor="$borderColor"
+          >
+            <Paragraph>
+              Cold showers can help reduce inflammation, relieve pain, improve
+              circulation, lower stress levels, and reduce muscle soreness and fatigue.
+            </Paragraph>
+          </Accordion.Content>
+        </Accordion.HeightAnimator>
+      </Accordion.Item>
+
+      <Accordion.Item value="a2">
+        <Accordion.Trigger
+          flexDirection="row"
+          justify="space-between"
+          borderWidth={1}
+          borderColor="$borderColor"
+        >
+          {({ open }: { open: boolean }) => (
+            <>
+              <Paragraph>2. Eat 4 eggs</Paragraph>
+              <Square transparent transition="quick" rotate={open ? '180deg' : '0deg'}>
+                <ChevronDown size="$1" color="$color" />
+              </Square>
+            </>
+          )}
+        </Accordion.Trigger>
+        <Accordion.HeightAnimator transition="300ms">
+          <Accordion.Content
+            transition="300ms"
+            exitStyle={{ opacity: 0 }}
+            borderWidth={1}
+            borderTopWidth={0}
+            borderColor="$borderColor"
+          >
+            <Paragraph>
+              Eggs have been a dietary staple since time immemorial and there's good
+              reason for their continued presence in our menus and meals.
+            </Paragraph>
+          </Accordion.Content>
+        </Accordion.HeightAnimator>
+      </Accordion.Item>
+    </Accordion>
+  )
+}

package/src/AddThemeDemo.tsx

@@ -0,0 +1,35 @@
+import { addTheme } from '@hanzogui/theme'
+import React from 'react'
+
+import { Button, H3, Theme, View, YStack } from '@hanzo/gui'
+
+export function AddThemeDemo() {
+  const [theme, setTheme] = React.useState<any>()
+
+  return (
+    <YStack items="center" gap="$4">
+      <H3>Theme: {theme ?? 'none'}</H3>
+
+      <Theme name={theme ?? 'red'}>
+        <View rounded="$8" width={100} height={100} bg="$color" />
+      </Theme>
+
+      <Button
+        disabled={theme === 'superblue'}
+        onPress={() => {
+          addTheme({
+            name: 'superblue',
+            insertCSS: true,
+            theme: {
+              background: '#000',
+              color: 'blue',
+            },
+          })
+          setTheme('superblue')
+        }}
+      >
+        Add superblue theme
+      </Button>
+    </YStack>
+  )
+}

package/src/AlertDialogDemo.tsx

@@ -0,0 +1,56 @@
+import { AlertDialog, Button, XStack, YStack } from '@hanzo/gui'
+
+export function AlertDialogDemo() {
+  return (
+    <AlertDialog native>
+      <AlertDialog.Trigger asChild>
+        <Button>Show Alert</Button>
+      </AlertDialog.Trigger>
+
+      <AlertDialog.Portal>
+        <AlertDialog.Overlay
+          key="overlay"
+          transition="quick"
+          opacity={0.5}
+          backgroundColor="$background"
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+        <AlertDialog.Content
+          elevate
+          key="content"
+          transition={[
+            'quick',
+            {
+              opacity: {
+                overshootClamping: true,
+              },
+            },
+          ]}
+          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
+          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
+          x={0}
+          scale={1}
+          opacity={1}
+          y={0}
+        >
+          <YStack gap="$4">
+            <AlertDialog.Title>Accept</AlertDialog.Title>
+            <AlertDialog.Description>
+              By pressing yes, you accept our terms and conditions.
+            </AlertDialog.Description>
+
+            <XStack gap="$3" justify="flex-end">
+              <AlertDialog.Cancel asChild>
+                <Button>Cancel</Button>
+              </AlertDialog.Cancel>
+              <AlertDialog.Action asChild>
+                <Button theme="accent">Accept</Button>
+              </AlertDialog.Action>
+            </XStack>
+          </YStack>
+        </AlertDialog.Content>
+      </AlertDialog.Portal>
+    </AlertDialog>
+  )
+}

package/src/AnimationsDelayDemo.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { AnimatePresence, Button, Square, XStack, YStack, isWeb } from '@hanzo/gui'
+
+import { useIsIntersecting } from './useOnIntersecting'
+
+const colors = ['$color9', '$color10', '$color11', '$color12'] as const
+
+export function AnimationsDelayDemo() {
+  const ref = React.useRef<HTMLElement>(null)
+  const hasIntersected = useIsIntersecting(ref, { once: true })
+  const [show, setShow] = React.useState(true)
+
+  if (isWeb && !hasIntersected) {
+    return <YStack ref={ref as any} height={150} />
+  }
+
+  return (
+    <YStack gap="$4" items="center">
+      <XStack gap="$3" height={100} items="center" justify="center">
+        <AnimatePresence>
+          {show &&
+            colors.map((color, i) => (
+              <Square
+                key={color}
+                transition={['200ms', { delay: i * 100 }]}
+                enterStyle={{
+                  opacity: 0,
+                  scale: 0.5,
+                  y: 20,
+                }}
+                exitStyle={{
+                  opacity: 0,
+                  scale: 0,
+                  y: 20,
+                }}
+                size={60}
+                bg={color}
+                rounded="$4"
+              />
+            ))}
+        </AnimatePresence>
+      </XStack>
+
+      <Button size="$3" onPress={() => setShow(!show)}>
+        {show ? 'Hide' : 'Show'}
+      </Button>
+    </YStack>
+  )
+}

package/src/AnimationsDemo.tsx

@@ -0,0 +1,85 @@
+import { LogoIcon } from '@hanzogui/logo'
+import { Play } from '@hanzogui/lucide-icons-2'
+import { Button, isWeb, Square, useControllableState, Image, useEvent } from '@hanzo/gui'
+
+export function AnimationsDemo(props) {
+  const [positionI, setPositionI] = useControllableState({
+    strategy: 'most-recent-wins',
+    prop: props.position,
+    defaultProp: 0,
+  })
+  const position = positions[positionI]
+  const onPress = useEvent(() => {
+    setPositionI((x) => {
+      return (x + 1) % positions.length
+    })
+  })
+
+  return (
+    <>
+      <Square
+        transition={props.animation ?? 'bouncy'}
+        animateOnly={['transform']}
+        onPress={onPress}
+        size={104}
+        borderColor="$borderColor"
+        borderWidth={1}
+        rounded="$9"
+        bg="$color9"
+        hoverStyle={{
+          scale: 1.01,
+        }}
+        pressStyle={{
+          scale: 0.9,
+        }}
+        {...position}
+      >
+        {isWeb && <LogoIcon downscale={0.75} />}
+      </Square>
+
+      <Button
+        position="absolute"
+        b={20}
+        l={20}
+        icon={Play}
+        theme={props.tint ?? 'surface2'}
+        size="$5"
+        circular
+        onPress={onPress}
+      />
+    </>
+  )
+}
+
+export const positions = [
+  {
+    x: 0,
+    y: 0,
+    scale: 1,
+    rotate: '0deg',
+  },
+  {
+    x: -50,
+    y: -50,
+    scale: 0.5,
+    rotate: '-45deg',
+    hoverStyle: {
+      scale: 0.6,
+    },
+    pressStyle: {
+      scale: 0.4,
+    },
+  },
+  {
+    x: 50,
+    y: 50,
+    scale: 1,
+    rotate: '180deg',
+    hoverStyle: {
+      scale: 1.1,
+    },
+    pressStyle: {
+      scale: 0.9,
+    },
+  },
+]

package/src/AnimationsEnterDemo.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { LogoIcon } from '@hanzogui/logo'
+
+import { Button, Square, YStack, isWeb } from '@hanzo/gui'
+
+import { useIsIntersecting } from './useOnIntersecting'
+
+export function AnimationsEnterDemo(props: any) {
+  const ref = React.useRef<HTMLElement>(null)
+  const [key, setKey] = React.useState(0)
+  const hasIntersected = useIsIntersecting(ref, { once: true })
+
+  if (isWeb && !hasIntersected) {
+    return <YStack ref={ref as any} />
+  }
+
+  return (
+    <>
+      <Square
+        key={key}
+        enterStyle={{
+          scale: 1.5,
+          y: -10,
+          opacity: 0,
+        }}
+        transition="bouncy"
+        elevation="$4"
+        size={110}
+        opacity={1}
+        scale={1}
+        y={0}
+        bg="$color9"
+        rounded="$9"
+      >
+        {props.children ?? <LogoIcon downscale={0.75} />}
+      </Square>
+
+      <Button size="$3" mt="$4" onPress={() => setKey(Math.random())}>
+        Re-mount
+      </Button>
+    </>
+  )
+}

package/src/AnimationsHoverDemo.tsx

@@ -0,0 +1,23 @@
+import { LogoIcon } from '@hanzogui/logo'
+import { Square } from '@hanzo/gui'
+
+export function AnimationsHoverDemo() {
+  return (
+    <Square
+      borderColor="$borderColor"
+      transition="bouncy"
+      elevation="$4"
+      bg="$color9"
+      size={104}
+      rounded="$9"
+      hoverStyle={{
+        scale: 1.2,
+      }}
+      pressStyle={{
+        scale: 0.9,
+      }}
+    >
+      <LogoIcon downscale={0.75} />
+    </Square>
+  )
+}

package/src/AnimationsPresenceDemo.tsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import { AnimatePresence } from '@hanzogui/animate-presence'
+import { ArrowLeft, ArrowRight } from '@hanzogui/lucide-icons-2'
+
+import { Button, Image, XStack, YStack, styled } from '@hanzo/gui'
+
+// @ts-ignore
+import photo1 from '../../public/photo1.jpg'
+// @ts-ignore
+import photo2 from '../../public/photo2.jpg'
+// @ts-ignore
+import photo3 from '../../public/photo3.jpg'
+
+export const images = [photo1, photo2, photo3].map((x) => (x as any).src || x)
+
+const GalleryItem = styled(YStack, {
+  z: 1,
+  x: 0,
+  opacity: 1,
+  fullscreen: true,
+
+  variants: {
+    // 1 = right, 0 = nowhere, -1 = left
+    going: {
+      ':number': (going) => ({
+        enterStyle: {
+          x: going > 0 ? 1000 : -1000,
+          opacity: 0,
+        },
+        exitStyle: {
+          zIndex: 0,
+          x: going < 0 ? 1000 : -1000,
+          opacity: 0,
+        },
+      }),
+    },
+  } as const,
+})
+
+const wrap = (min: number, max: number, v: number) => {
+  const rangeSize = max - min
+  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min
+}
+
+export function AnimationsPresenceDemo() {
+  const [[page, going], setPage] = React.useState([0, 0])
+
+  const imageIndex = wrap(0, images.length, page)
+  const paginate = (going: number) => {
+    setPage([page + going, going])
+  }
+
+  return (
+    <XStack
+      overflow="hidden"
+      bg="#000"
+      position="relative"
+      height={300}
+      width="100%"
+      items="center"
+    >
+      <AnimatePresence initial={false} custom={{ going }}>
+        <GalleryItem key={page} transition="slow" going={going}>
+          <Image src={images[imageIndex]} width={820} height={300} objectFit="cover" />
+        </GalleryItem>
+      </AnimatePresence>
+
+      <Button
+        aria-label="Carousel left"
+        icon={ArrowLeft}
+        size="$5"
+        position="absolute"
+        l="$4"
+        circular
+        onPress={() => paginate(-1)}
+        boxShadow="0 0 10px rgba(0,0,0,0.5)"
+        z={100}
+      />
+
+      <Button
+        aria-label="Carousel right"
+        icon={ArrowRight}
+        size="$5"
+        position="absolute"
+        r="$4"
+        circular
+        onPress={() => paginate(1)}
+        boxShadow="0 0 10px rgba(0,0,0,0.5)"
+        z={100}
+      />
+    </XStack>
+  )
+}

package/src/AnimationsTimingDemo.tsx

@@ -0,0 +1,22 @@
+import { LogoIcon } from '@hanzogui/logo'
+import { Square } from '@hanzo/gui'
+
+export function AnimationsTimingDemo() {
+  return (
+    <Square
+      bg="$color9"
+      transition="100ms"
+      elevation="$4"
+      size={110}
+      rounded="$9"
+      hoverStyle={{
+        scale: 1.2,
+      }}
+      pressStyle={{
+        scale: 0.9,
+      }}
+    >
+      <LogoIcon downscale={0.75} />
+    </Square>
+  )
+}

package/src/AvatarDemo.tsx

@@ -0,0 +1,23 @@
+import { Avatar, XStack } from '@hanzo/gui'
+
+export function AvatarDemo() {
+  return (
+    <XStack items="center" gap="$6">
+      <Avatar circular size="$10">
+        <Avatar.Image
+          aria-label="Cam"
+          src="https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80"
+        />
+        <Avatar.Fallback bg="$blue10" />
+      </Avatar>
+
+      <Avatar circular size="$8">
+        <Avatar.Image
+          aria-label="Nate Wienert"
+          src="https://images.unsplash.com/photo-1531384441138-2736e62e0919?&w=100&h=100&dpr=2&q=80"
+        />
+        <Avatar.Fallback delayMs={600} bg="$blue10" />
+      </Avatar>
+    </XStack>
+  )
+}

package/src/BoxShadowTokenDemo.tsx

@@ -0,0 +1,35 @@
+import { styled, View, Text, YStack } from '@hanzo/gui'
+
+// 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

@@ -0,0 +1,72 @@
+import { Drumstick, Hand } from '@hanzogui/lucide-icons-2'
+import type { ButtonProps, ThemeName } from '@hanzo/gui'
+import { Button, XStack, YStack } from '@hanzo/gui'
+
+const outlined = {
+  bg: 'transparent',
+  borderWidth: 2,
+  borderColor: '$background',
+  rounded: '$10',
+
+  hoverStyle: {
+    bg: 'transparent',
+    borderColor: '$backgroundPress',
+  },
+}
+
+export function BuildAButtonDemo() {
+  return (
+    <YStack fullscreen overflow="hidden">
+      <XStack maxH={200} y={-100} x={-40} rotate="-10deg">
+        <ButtonCol y={35} size="$2" {...outlined} subTheme="surface1" borderWidth={1} />
+        <ButtonCol y={30} />
+        <ButtonCol y={-50} {...outlined} />
+        <ButtonCol {...outlined} icon={<Hand />} />
+        <ButtonCol size="$6" subTheme="surface2" />
+        <ButtonCol size="$6" subTheme="surface2" {...outlined} />
+        <ButtonCol
+          size="$8"
+          subTheme="surface2"
+          iconAfter={<Drumstick />}
+          {...outlined}
+        />
+        <ButtonCol size="$10" subTheme="surface1" />
+        <ButtonCol size="$8" subTheme="surface2" {...outlined} rounded={0} />
+      </XStack>
+    </YStack>
+  )
+}
+
+function ButtonCol(props: any) {
+  const { subTheme, ...buttonProps } = props
+  const subThemeSuffix = subTheme ? `_${subTheme}` : ''
+
+  return (
+    <YStack p="$2" gap="$3">
+      <Button theme={props.subTheme} {...props}>
+        Hello
+      </Button>
+      <Button theme={('orange' + subThemeSuffix) as ThemeName} {...buttonProps}>
+        Hello
+      </Button>
+      <Button theme={('yellow' + subThemeSuffix) as ThemeName} {...buttonProps}>
+        Hello
+      </Button>
+      <Button theme={('green' + subThemeSuffix) as ThemeName} {...buttonProps}>
+        Hello
+      </Button>
+      <Button theme={('blue' + subThemeSuffix) as ThemeName} {...buttonProps}>
+        Hello
+      </Button>
+      <Button theme={('purple' + subThemeSuffix) as ThemeName} {...buttonProps}>
+        Hello
+      </Button>
+      <Button theme={('pink' + subThemeSuffix) as ThemeName} {...buttonProps}>
+        Hello
+      </Button>
+      <Button theme={('red' + subThemeSuffix) as ThemeName} {...buttonProps}>
+        Hello
+      </Button>
+    </YStack>
+  )
+}