@hanzogui/demos 2.0.0

package/src/ListItemDemo.tsx

@@ -0,0 +1,65 @@
+import { ChevronRight, Cloud, Moon, Star, Sun } from '@hanzogui/lucide-icons-2'
+import { ListItem, Separator, Theme, XStack, YGroup } from '@hanzo/gui'
+
+export function ListItemDemo() {
+  return (
+    <Theme name="surface1">
+      <XStack $maxMd={{ flexDirection: 'column' }} px="$4" gap="$4">
+        <ListItemDemo1 />
+        <ListItemDemo2 />
+      </XStack>
+    </Theme>
+  )
+}
+
+function ListItemDemo1() {
+  return (
+    <YGroup
+      self="center"
+      borderWidth={1}
+      borderColor="$borderColor"
+      rounded="$4"
+      width={240}
+      size="$4"
+    >
+      <YGroup.Item>
+        <ListItem
+          icon={Star}
+          title="Star"
+          subTitle={<ListItem.Subtitle>Twinkles</ListItem.Subtitle>}
+          iconAfter={ChevronRight}
+        />
+      </YGroup.Item>
+      <YGroup.Item>
+        <ListItem icon={Moon}>Moon</ListItem>
+      </YGroup.Item>
+      <YGroup.Item>
+        <ListItem icon={Sun}>Sun</ListItem>
+      </YGroup.Item>
+      <YGroup.Item>
+        <ListItem icon={Cloud}>Cloud</ListItem>
+      </YGroup.Item>
+    </YGroup>
+  )
+}
+
+function ListItemDemo2() {
+  return (
+    <YGroup
+      self="center"
+      borderWidth={1}
+      borderColor="$borderColor"
+      rounded="$4"
+      width={240}
+      size="$5"
+    >
+      <YGroup.Item>
+        <ListItem title="Star" subTitle="Subtitle" icon={Star} iconAfter={ChevronRight} />
+      </YGroup.Item>
+      <Separator />
+      <YGroup.Item>
+        <ListItem title="Moon" subTitle="Subtitle" icon={Moon} iconAfter={ChevronRight} />
+      </YGroup.Item>
+    </YGroup>
+  )
+}

package/src/LucideIconsDemo.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import * as LucideIcons from '@hanzogui/lucide-icons-2'
+
+import { ScrollView } from 'react-native'
+import { Input, Paragraph, Spacer, YStack, useDebounceValue } from '@hanzo/gui'
+
+import { Grid } from './Grid'
+
+const lucideIcons = Object.keys(
+  // vite tree shaking workaround
+  typeof LucideIcons !== 'undefined' ? LucideIcons : {}
+).map((name) => ({
+  key: name.toLowerCase(),
+  name,
+  Icon: LucideIcons[name],
+}))
+
+export function LucideIconsDemo() {
+  const [searchRaw, setSearch] = React.useState('')
+  const search = useDebounceValue(searchRaw, 400)
+
+  const size = 100
+
+  const iconsMemo = React.useMemo(
+    () =>
+      lucideIcons
+        .filter((x) => x.key.includes(search.toLowerCase()))
+        .map(({ Icon, name }) => (
+          <YStack height={size + 20} items="center" justify="center" key={name}>
+            <Icon size={size * 0.25} />
+            <Spacer />
+            <Paragraph
+              height="$6"
+              wordWrap="break-word"
+              maxW="100%"
+              text="center"
+              px="$2"
+              size="$1"
+              opacity={0.5}
+            >
+              {name}
+            </Paragraph>
+          </YStack>
+        )),
+    [search]
+  )
+
+  return (
+    <YStack minW="100%" p="$4" pb="$0" gap="$4">
+      <Input value={searchRaw} onChangeText={setSearch as any} placeholder="Search..." />
+
+      <YStack height={420}>
+        <ScrollView>
+          <Grid itemMinWidth={size}>{iconsMemo}</Grid>
+        </ScrollView>
+      </YStack>
+    </YStack>
+  )
+}

package/src/MenuDemo.tsx

@@ -0,0 +1,183 @@
+import {
+  Backpack,
+  Calendar,
+  Check,
+  ChevronRight,
+  FilePlus,
+  RefreshCw,
+  Trash2,
+} from '@hanzogui/lucide-icons-2'
+import { Menu } from '@hanzogui/menu'
+import React from 'react'
+import { Button } from '@hanzo/gui'
+
+/**
+ * Menu Demo using Hanzo GUI Menu component.
+ * Automatically uses native menus on iOS/Android, web menus on web.
+ * No configuration needed - it just works!
+ */
+
+/**
+ * Note: you'll want to use createMenu() to customize further.
+ */
+
+export function MenuDemo() {
+  const [bookmarksChecked, setBookmarksChecked] = React.useState(true)
+  const [native, setNative] = React.useState(true)
+  const [subMenuOpen, setSubMenuOpen] = React.useState(false)
+
+  // Note: `item` is the Event on web, undefined on native
+  const onSelect = (item) => {
+    console.info(`selected`, item)
+  }
+
+  return (
+    <>
+      <Menu offset={8}>
+        <Menu.Trigger asChild>
+          <Button size="$4" icon={Backpack}>
+            Open
+          </Button>
+        </Menu.Trigger>
+
+        <Menu.Portal zIndex={100}>
+          <Menu.Content
+            transition="100ms"
+            borderRadius="$4"
+            enterStyle={{ scale: 0.9, opacity: 0, y: -5 }}
+            exitStyle={{ scale: 0.95, opacity: 0, y: -3 }}
+            boxShadow="0 4px 5px $shadowColor"
+          >
+            <Menu.Arrow size="$4" borderWidth={1} borderColor="$borderColor" />
+
+            <Menu.ScrollView padding={5}>
+              <Menu.Item onSelect={onSelect} key="about-notes">
+                <Menu.ItemTitle>About Notes</Menu.ItemTitle>
+              </Menu.Item>
+
+              <Menu.Separator />
+
+              <Menu.Item onSelect={onSelect} key="settings">
+                <Menu.ItemTitle>Settings</Menu.ItemTitle>
+              </Menu.Item>
+              <Menu.Item
+                onSelect={onSelect}
+                key="accounts"
+                justify="space-between"
+                // when title is nested inside a React element then you need to use `textValue`
+                textValue="Calendar"
+              >
+                <Menu.ItemTitle>Calendar</Menu.ItemTitle>
+                <Menu.ItemIcon
+                  androidIconName="ic_menu_today"
+                  ios={{
+                    name: 'calendar',
+                    hierarchicalColor: '#000',
+                    // pointSize: 20,
+                  }}
+                >
+                  <Calendar color="gray" size={14} />
+                </Menu.ItemIcon>
+              </Menu.Item>
+
+              <Menu.Separator />
+
+              <Menu.Item onSelect={onSelect} key="close-notes" disabled>
+                <Menu.ItemTitle color="gray">Locked Notes</Menu.ItemTitle>
+              </Menu.Item>
+              <Menu.Item onSelect={onSelect} destructive key="delete-all">
+                <Menu.ItemTitle color="red">Delete all</Menu.ItemTitle>
+              </Menu.Item>
+
+              <Menu.Separator />
+
+              <Menu.Sub open={subMenuOpen} onOpenChange={setSubMenuOpen}>
+                <Menu.SubTrigger
+                  justify="space-between"
+                  key="actions-trigger"
+                  textValue="Actions"
+                >
+                  <Menu.ItemTitle>Actions</Menu.ItemTitle>
+                  <ChevronRight size={16} color="$color10" />
+                </Menu.SubTrigger>
+
+                <Menu.Portal zIndex={200}>
+                  <Menu.SubContent
+                    transition="100ms"
+                    borderRadius="$4"
+                    enterStyle={{ scale: 0.9, opacity: 0, y: -5 }}
+                    exitStyle={{ scale: 0.95, opacity: 0, y: -3 }}
+                    boxShadow="0 4px 5px $shadowColor"
+                    padding={5}
+                  >
+                    <Menu.Label padding={5} color="$color9" size="$3" select="none">
+                      Note settings
+                    </Menu.Label>
+                    <Menu.Item
+                      onSelect={onSelect}
+                      key="create-note"
+                      textValue="Create note"
+                      justify="space-between"
+                    >
+                      <Menu.ItemTitle>Create note</Menu.ItemTitle>
+                      <Menu.ItemIcon>
+                        <FilePlus size={14} color="$color10" />
+                      </Menu.ItemIcon>
+                    </Menu.Item>
+                    <Menu.Item
+                      onSelect={onSelect}
+                      key="delete-all-notes"
+                      textValue="Delete all notes"
+                      justify="space-between"
+                    >
+                      <Menu.ItemTitle>Delete all notes</Menu.ItemTitle>
+                      <Menu.ItemIcon>
+                        <Trash2 size={14} color="$color10" />
+                      </Menu.ItemIcon>
+                    </Menu.Item>
+                    <Menu.Item
+                      onSelect={onSelect}
+                      key="sync-all"
+                      textValue="Sync notes"
+                      justify="space-between"
+                    >
+                      <Menu.ItemTitle>Sync notes</Menu.ItemTitle>
+                      <Menu.ItemIcon>
+                        <RefreshCw size={14} color="$color10" />
+                      </Menu.ItemIcon>
+                    </Menu.Item>
+                  </Menu.SubContent>
+                </Menu.Portal>
+              </Menu.Sub>
+
+              <Menu.Separator />
+
+              <Menu.CheckboxItem
+                key="show-hidden"
+                checked={bookmarksChecked}
+                onCheckedChange={setBookmarksChecked}
+                justify="space-between"
+              >
+                <Menu.ItemTitle>Mark as read</Menu.ItemTitle>
+                <Menu.ItemIndicator>
+                  <Check size={12} color="$color10" />
+                </Menu.ItemIndicator>
+              </Menu.CheckboxItem>
+              <Menu.CheckboxItem
+                key="show-other-notes"
+                checked={native}
+                onCheckedChange={setNative}
+                justify="space-between"
+              >
+                <Menu.ItemTitle>Enable Native</Menu.ItemTitle>
+                <Menu.ItemIndicator>
+                  <Check size={12} color="$color10" />
+                </Menu.ItemIndicator>
+              </Menu.CheckboxItem>
+            </Menu.ScrollView>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+    </>
+  )
+}

package/src/NewInputsDemo.tsx

@@ -0,0 +1,28 @@
+import type { SizeTokens } from '@hanzo/gui'
+import { Button, Theme, XStack, YStack } from '@hanzo/gui'
+import { Input, TextArea } from '@hanzogui/input'
+
+export function NewInputsDemo() {
+  return (
+    <YStack width={200} minH={250} overflow="hidden" gap="$2" m="$3" p="$2">
+      <InputDemo size="$2" />
+      <InputDemo size="$3" />
+      <InputDemo size="$4" />
+      <TextArea theme="surface1" placeholder="Enter your details..." />
+    </YStack>
+  )
+}
+
+function InputDemo(props: { size: SizeTokens }) {
+  return (
+    <XStack items="center" gap="$2">
+      <Input
+        theme="surface1"
+        flex={1}
+        size={props.size}
+        placeholder={`Size ${props.size}...`}
+      />
+      <Button size={props.size}>Go</Button>
+    </XStack>
+  )
+}

package/src/PopoverDemo.tsx

@@ -0,0 +1,130 @@
+import {
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+} from '@hanzogui/lucide-icons-2'
+import { useState } from 'react'
+import type { PopoverProps } from '@hanzo/gui'
+import {
+  Adapt,
+  Button,
+  Input,
+  isWeb,
+  Label,
+  Popover,
+  Sheet,
+  styled,
+  XStack,
+  YStack,
+} from '@hanzo/gui'
+
+export function PopoverDemo() {
+  const [shouldAdapt, setShouldAdapt] = useState(true)
+
+  return (
+    <YStack gap="$4">
+      <XStack gap="$2" flex={1} justify="center" items="center">
+        <Demo
+          shouldAdapt={shouldAdapt}
+          placement="left"
+          Icon={ChevronLeft}
+          Name="left-popover"
+        />
+        <Demo
+          shouldAdapt={shouldAdapt}
+          placement="bottom"
+          Icon={ChevronDown}
+          Name="bottom-popover"
+        />
+        <Demo
+          shouldAdapt={shouldAdapt}
+          placement="top"
+          Icon={ChevronUp}
+          Name="top-popover"
+        />
+        <Demo
+          shouldAdapt={shouldAdapt}
+          placement="right"
+          Icon={ChevronRight}
+          Name="right-popover"
+        />
+      </XStack>
+
+      {!isWeb && (
+        <Button onPress={() => setShouldAdapt(!shouldAdapt)}>
+          Adapt to Sheet: {`${shouldAdapt}`}
+        </Button>
+      )}
+    </YStack>
+  )
+}
+
+export function Demo({
+  Icon,
+  Name,
+  shouldAdapt,
+  ...props
+}: PopoverProps & { Icon?: any; Name?: string; shouldAdapt?: boolean }) {
+  return (
+    <Popover size="$5" allowFlip stayInFrame offset={15} resize {...props}>
+      <Popover.Trigger asChild>
+        <Button icon={Icon} />
+      </Popover.Trigger>
+
+      {shouldAdapt && (
+        <Adapt when="maxMd" platform="touch">
+          <Sheet transition="medium" modal dismissOnSnapToBottom>
+            <Sheet.Frame p="$4">
+              <Adapt.Contents />
+            </Sheet.Frame>
+            <Sheet.Overlay
+              bg="$shadowColor"
+              transition="lazy"
+              enterStyle={{ opacity: 0 }}
+              exitStyle={{ opacity: 0 }}
+            />
+          </Sheet>
+        </Adapt>
+      )}
+
+      <Popover.Content
+        borderWidth={1}
+        borderColor="$borderColor"
+        width={300}
+        height={200}
+        enterStyle={{ y: -10, opacity: 0 }}
+        exitStyle={{ y: -10, opacity: 0 }}
+        boxShadow="0px 4px 8px rgba(0,0,0,0.1), 0px 12px 32px rgba(0,0,0,0.08)"
+        transition={[
+          'quick',
+          {
+            opacity: {
+              overshootClamping: true,
+            },
+          },
+        ]}
+      >
+        <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
+
+        <XStack gap="$3" mb="$3">
+          <Label size="$3" htmlFor={Name}>
+            Name
+          </Label>
+          <Input flex={1} size="$3" id={Name} />
+        </XStack>
+
+        <Popover.Close asChild>
+          <Button
+            size="$3"
+            onPress={() => {
+              /* Custom code goes here, does not interfere with popover closure */
+            }}
+          >
+            Submit
+          </Button>
+        </Popover.Close>
+      </Popover.Content>
+    </Popover>
+  )
+}

package/src/ProgressDemo.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import { Button, Paragraph, Progress, Slider, Theme, XStack, YStack } from '@hanzo/gui'
+import { Play, RotateCcw } from '@hanzogui/lucide-icons-2'
+
+export function ProgressDemo() {
+  const [key, setKey] = React.useState(0)
+  const [progress, setProgress] = React.useState(60)
+  const [slider, setSlider] = React.useState<number[]>([60])
+
+  return (
+    <>
+      <YStack height={60} items="center" gap="$4">
+        <Paragraph height={30} opacity={0.5}>
+          Progress: {progress}
+        </Paragraph>
+
+        <Progress key={key} theme="surface2" value={progress}>
+          <Progress.Indicator
+            backgroundColor="$color"
+            transition={[
+              'quicker',
+              {
+                transform: {
+                  overshootClamping: true,
+                },
+              },
+            ]}
+          />
+        </Progress>
+      </YStack>
+
+      <XStack
+        items="center"
+        gap="$2"
+        position="absolute"
+        b="$3"
+        l="$4"
+        $xxs={{ display: 'none' }}
+      >
+        {/* <Slider
+          size="$2"
+          theme="surface2"
+          width={130}
+          value={slider}
+          min={0}
+          max={100}
+          step={1}
+          onValueChange={([val]) => {
+            setProgress(val)
+            setSlider([val])
+          }}
+        >
+          <Slider.Track borderWidth={1} borderColor="$color5">
+            <Slider.TrackActive />
+          </Slider.Track>
+          <Slider.Thumb theme="accent" circular index={0} />
+        </Slider> */}
+
+        <Button
+          size="$3"
+          icon={Play}
+          onPress={() => setProgress((prev) => (prev + 20) % 100)}
+        />
+        <Button
+          size="$3"
+          icon={RotateCcw}
+          onPress={() => {
+            setKey(Math.random())
+            setProgress(0)
+            setSlider([0])
+          }}
+        />
+      </XStack>
+    </>
+  )
+}

package/src/RadioGroupDemo.tsx

@@ -0,0 +1,35 @@
+import type { SizeTokens } from '@hanzo/gui'
+import { Label, RadioGroup, Theme, XStack, YStack } from '@hanzo/gui'
+
+export function RadioGroupDemo() {
+  return (
+    <Theme name="surface2">
+      <RadioGroup aria-labelledby="Select one item" defaultValue="3" name="form">
+        <YStack width={300} items="center" gap="$2">
+          <RadioGroupItemWithLabel size="$3" value="2" label="Second value" />
+          <RadioGroupItemWithLabel size="$4" value="3" label="Third value" />
+          <RadioGroupItemWithLabel size="$5" value="4" label="Fourth value" />
+        </YStack>
+      </RadioGroup>
+    </Theme>
+  )
+}
+
+export function RadioGroupItemWithLabel(props: {
+  size: SizeTokens
+  value: string
+  label: string
+}) {
+  const id = `radiogroup-${props.value}`
+  return (
+    <XStack width={300} items="center" gap="$4">
+      <RadioGroup.Item value={props.value} id={id} size={props.size}>
+        <RadioGroup.Indicator />
+      </RadioGroup.Item>
+
+      <Label size={props.size} htmlFor={id}>
+        {props.label}
+      </Label>
+    </XStack>
+  )
+}