@hanzogui/demos 2.0.0

package/src/RadioGroupHeadlessDemo.tsx

@@ -0,0 +1,129 @@
+import type {
+  RadioGroupContextValue,
+  RadioGroupItemContextValue,
+} from '@hanzogui/radio-headless'
+import {
+  useRadioGroup,
+  useRadioGroupItem,
+  useRadioGroupItemIndicator,
+} from '@hanzogui/radio-headless'
+import { RovingFocusGroup } from '@hanzogui/roving-focus'
+import React from 'react'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+import { isWeb, useTheme } from '@hanzo/gui'
+
+const RadioGroupContext = React.createContext<RadioGroupContextValue>({})
+const RadioGroupItemContext = React.createContext<RadioGroupItemContextValue>({
+  checked: false,
+  disabled: false,
+})
+
+export function RadioGroupHeadlessDemo() {
+  const { providerValue, frameAttrs, rovingFocusGroupAttrs } = useRadioGroup({
+    orientation: 'vertical',
+    name: 'form',
+    defaultValue: '3',
+  })
+  return (
+    <RadioGroupContext.Provider value={providerValue}>
+      <RovingFocusGroup {...rovingFocusGroupAttrs}>
+        <View style={styles.radioGroup} {...frameAttrs}>
+          <RadioGroupItem value="2" id="2" label="First Value" />
+          <RadioGroupItem value="3" id="3" label="Second Value" />
+          <RadioGroupItem value="4" id="4" label="Third Value" />
+        </View>
+      </RovingFocusGroup>
+    </RadioGroupContext.Provider>
+  )
+}
+
+function RadioGroupItem(props: { value: string; id: string; label: string }) {
+  const theme = useTheme()
+  const { value, id, label } = props
+  const {
+    providerValue,
+    native,
+    bubbleInput,
+    rovingFocusGroupAttrs,
+    frameAttrs,
+    isFormControl,
+    checked,
+  } = useRadioGroupItem({
+    radioGroupContext: RadioGroupContext,
+    value,
+    id,
+  })
+
+  return (
+    <RadioGroupItemContext.Provider value={providerValue}>
+      {isWeb && native ? (
+        bubbleInput
+      ) : (
+        <View style={styles.radioGroupItemContainer}>
+          <RovingFocusGroup.Item {...rovingFocusGroupAttrs}>
+            <Pressable
+              style={{
+                ...styles.radioGroupItem,
+                borderColor: theme.borderColor?.get(),
+                ...(checked
+                  ? { borderWidth: 4 }
+                  : { backgroundColor: theme.background?.get() }),
+              }}
+              {...frameAttrs}
+              onFocus={frameAttrs.onFocus as any}
+            >
+              <RadioGroupItemIndicator />
+            </Pressable>
+          </RovingFocusGroup.Item>
+          <Text style={{ color: theme.color?.get() }}>{label}</Text>
+          {isFormControl && bubbleInput}
+        </View>
+      )}
+    </RadioGroupItemContext.Provider>
+  )
+}
+
+function RadioGroupItemIndicator() {
+  const theme = useTheme()
+  const params = useRadioGroupItemIndicator({
+    radioGroupItemContext: RadioGroupItemContext,
+    disabled: false,
+  })
+  if (params.checked) {
+    return (
+      <View
+        style={{
+          ...styles.radioGroupItemIndicator,
+          backgroundColor: theme.color?.get(),
+        }}
+        {...params}
+      />
+    )
+  }
+  return null
+}
+
+const styles = StyleSheet.create({
+  radioGroup: {
+    flexDirection: 'column',
+    gap: 20,
+    alignItems: 'flex-start',
+  },
+  radioGroupItem: {
+    borderWidth: 2,
+    width: 30,
+    height: 30,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  radioGroupItemIndicator: {
+    width: '35%',
+    height: '35%',
+  },
+  radioGroupItemContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 12,
+  },
+})

package/src/RadioGroupUnstyledDemo.tsx

@@ -0,0 +1,121 @@
+import { Label, XStack, YStack, styled } from '@hanzo/gui'
+
+import { createRadioGroup } from '@hanzogui/radio-group'
+
+const RADIO_GROUP_ITEM_NAME = 'RadioGroupItem'
+
+const RadioGroupItemFrame = styled(YStack, {
+  name: RADIO_GROUP_ITEM_NAME,
+  render: 'button',
+
+  rounded: 1000,
+  bg: '$background',
+  items: 'center',
+  justify: 'center',
+  borderWidth: 1,
+  borderColor: '$borderColor',
+  p: 0,
+
+  hoverStyle: {
+    borderColor: '$borderColorHover',
+    bg: '$backgroundHover',
+  },
+
+  focusStyle: {
+    borderColor: '$borderColorHover',
+    bg: '$backgroundHover',
+  },
+
+  focusVisibleStyle: {
+    outlineStyle: 'solid',
+    outlineWidth: 2,
+    outlineColor: '$outlineColor',
+  },
+
+  pressStyle: {
+    borderColor: '$borderColorFocus',
+    bg: '$backgroundFocus',
+  },
+
+  variants: {
+    disabled: {
+      true: {
+        pointerEvents: 'none',
+        userSelect: 'none',
+        cursor: 'not-allowed',
+
+        hoverStyle: {
+          borderColor: '$borderColor',
+          bg: '$background',
+        },
+
+        pressStyle: {
+          borderColor: '$borderColor',
+          bg: '$background',
+        },
+
+        focusVisibleStyle: {
+          outlineWidth: 0,
+        },
+      },
+    },
+  },
+} as const)
+
+const RADIO_GROUP_INDICATOR_NAME = 'RadioGroupIndicator'
+
+const RadioGroupIndicatorFrame = styled(YStack, {
+  name: RADIO_GROUP_INDICATOR_NAME,
+  width: '53%',
+  height: '53%',
+  rounded: 1000,
+  bg: '$color',
+})
+
+const RADIO_GROUP_NAME = 'RadioGroup'
+
+const RadioGroupFrame = styled(YStack, {
+  name: RADIO_GROUP_NAME,
+  variants: {
+    orientation: {
+      horizontal: {
+        flexDirection: 'row',
+        spaceDirection: 'horizontal',
+      },
+      vertical: {
+        flexDirection: 'column',
+        spaceDirection: 'vertical',
+      },
+    },
+  } as const,
+})
+
+const RadioGroup = createRadioGroup({
+  Frame: RadioGroupFrame,
+  Indicator: RadioGroupIndicatorFrame,
+  Item: RadioGroupItemFrame,
+})
+
+export function RadioGroupUnstyledDemo() {
+  return (
+    <RadioGroup aria-labelledby="Select one item" defaultValue="3" name="form">
+      <YStack width={200} items="center" gap="$2">
+        <RadioGroupItemWithLabel value="2" label="Option One" />
+        <RadioGroupItemWithLabel value="3" label="Option Two" />
+      </YStack>
+    </RadioGroup>
+  )
+}
+
+function RadioGroupItemWithLabel(props: { value: string; label: string }) {
+  const id = `radiogroup-${props.value}`
+  return (
+    <XStack width={300} items="center" gap="$4">
+      <RadioGroup.Item value={props.value} id={id}>
+        <RadioGroup.Indicator />
+      </RadioGroup.Item>
+
+      <Label htmlFor={id}>{props.label}</Label>
+    </XStack>
+  )
+}

package/src/ReplaceThemeDemo.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { addTheme, replaceTheme } from '@hanzogui/theme'
+
+import {
+  Button,
+  Square,
+  Theme,
+  XStack,
+  YStack,
+  useForceUpdate,
+  useIsomorphicLayoutEffect,
+} from '@hanzo/gui'
+
+export function ReplaceThemeDemo() {
+  const [theme, setTheme] = React.useState<any>()
+  const update = useForceUpdate()
+
+  useIsomorphicLayoutEffect(() => {
+    addTheme({
+      name: 'mytheme',
+      insertCSS: true,
+      theme: {
+        color: 'red',
+        color2: 'green',
+      },
+    })
+    setTheme('mytheme')
+  }, [])
+
+  return (
+    <YStack items="center" gap="$4">
+      <XStack gap="$5">
+        <Theme name={theme ?? null}>
+          <Square rounded="$8" size={100} bg="$color" />
+        </Theme>
+      </XStack>
+
+      <Button
+        onPress={() => {
+          replaceTheme({
+            name: 'mytheme',
+            theme: {
+              color: 'blue',
+            },
+          })
+          update()
+        }}
+      >
+        Replace theme to only have $color: blue
+      </Button>
+    </YStack>
+  )
+}

package/src/ScrollViewDemo.tsx

@@ -0,0 +1,18 @@
+import { Circle, ScrollView, Square, XStack } from '@hanzo/gui'
+
+export function ScrollViewDemo() {
+  return (
+    <ScrollView maxH={250} width="75%" bg="$background" p="$4" rounded="$4">
+      <XStack flexWrap="wrap" items="center" justify="center">
+        <Square m="$4" size={120} bg="$color5" />
+        <Circle m="$4" size={120} bg="$color6" />
+        <Square m="$4" size={120} bg="$color7" />
+        <Circle m="$4" size={120} bg="$color8" />
+        <Square m="$4" size={120} bg="$color9" />
+        <Circle m="$4" size={120} bg="$color10" />
+        <Square m="$4" size={120} bg="$color11" />
+        <Circle m="$4" size={120} bg="$color12" />
+      </XStack>
+    </ScrollView>
+  )
+}

package/src/SelectDemo.tsx

@@ -0,0 +1,189 @@
+import { Check, ChevronDown, ChevronUp } from '@hanzogui/lucide-icons-2'
+import React from 'react'
+
+import type { FontSizeTokens, SelectProps } from '@hanzo/gui'
+import { Adapt, Label, Select, Sheet, Theme, XStack, YStack, getFontSize } from '@hanzo/gui'
+import { LinearGradient } from 'gui/linear-gradient'
+
+export function SelectDemo() {
+  return (
+    <Theme name="surface1">
+      <YStack gap="$4">
+        <XStack width="100%" items="center" gap="$4">
+          <Label htmlFor="select-demo-1" flex={1} minW={80}>
+            Custom
+          </Label>
+          <SelectDemoContents id="select-demo-1" />
+        </XStack>
+
+        <XStack width="100%" items="center" gap="$4">
+          <Label htmlFor="select-demo-2" flex={1} minW={80}>
+            Native
+          </Label>
+          <SelectDemoContents id="select-demo-2" native />
+        </XStack>
+      </YStack>
+    </Theme>
+  )
+}
+
+type SelectValue = Lowercase<(typeof items)[number]['name']>
+
+// Helper to get item label from value - used by renderValue for SSR
+const getItemLabel = (value: string) =>
+  items.find((item) => item.name.toLowerCase() === value)?.name
+
+export function SelectDemoContents(
+  props: SelectProps<SelectValue> & { trigger?: React.ReactNode }
+) {
+  const [val, setVal] = React.useState<SelectValue>('apple')
+
+  return (
+    <Select
+      value={val}
+      onValueChange={setVal}
+      disablePreventBodyScroll
+      {...props}
+      // renderValue enables SSR support by providing the label synchronously
+      renderValue={getItemLabel}
+    >
+      {props?.trigger || (
+        <Select.Trigger
+          maxWidth={220}
+          iconAfter={ChevronDown}
+          borderRadius="$4"
+          backgroundColor="$background"
+        >
+          <Select.Value placeholder="Something" />
+        </Select.Trigger>
+      )}
+
+      <Adapt when="maxMd" platform="touch">
+        <Sheet native={!!props.native} modal dismissOnSnapToBottom transition="medium">
+          <Sheet.Frame>
+            <Sheet.ScrollView>
+              <Adapt.Contents />
+            </Sheet.ScrollView>
+          </Sheet.Frame>
+          <Sheet.Overlay
+            bg="$shadowColor"
+            transition="lazy"
+            enterStyle={{ opacity: 0 }}
+            exitStyle={{ opacity: 0 }}
+          />
+        </Sheet>
+      </Adapt>
+
+      <Select.Content>
+        <Select.ScrollUpButton
+          items="center"
+          justify="center"
+          position="relative"
+          width="100%"
+          height="$3"
+        >
+          <YStack z={10}>
+            <ChevronUp size={20} />
+          </YStack>
+          <LinearGradient
+            start={[0, 0]}
+            end={[0, 1]}
+            fullscreen
+            colors={['$background', 'transparent']}
+            rounded="$4"
+          />
+        </Select.ScrollUpButton>
+        <Select.Viewport
+          minW={200}
+          bg="$background"
+          rounded="$4"
+          borderWidth={1}
+          borderColor="$borderColor"
+        >
+          <Select.Group>
+            <Select.Label fontWeight="700">Fruits</Select.Label>
+            {/* for longer lists memoizing these is useful */}
+            {React.useMemo(
+              () =>
+                items.map((item, i) => {
+                  return (
+                    <Select.Item
+                      index={i}
+                      key={item.name}
+                      value={item.name.toLowerCase()}
+                    >
+                      <Select.ItemText>{item.name}</Select.ItemText>
+                      <Select.ItemIndicator marginLeft="auto">
+                        <Check size={16} />
+                      </Select.ItemIndicator>
+                    </Select.Item>
+                  )
+                }),
+              [items]
+            )}
+          </Select.Group>
+          {/* Native gets an extra icon */}
+          {props.native && (
+            <YStack
+              position="absolute"
+              r={0}
+              t={16}
+              items="center"
+              justify="center"
+              width={'$4'}
+              pointerEvents="none"
+            >
+              <ChevronDown
+                size={getFontSize((props.size as FontSizeTokens) ?? '$true')}
+              />
+            </YStack>
+          )}
+        </Select.Viewport>
+
+        <Select.ScrollDownButton
+          items="center"
+          justify="center"
+          position="relative"
+          width="100%"
+          height="$3"
+        >
+          <YStack z={10}>
+            <ChevronDown size={20} />
+          </YStack>
+          <LinearGradient
+            start={[0, 0]}
+            end={[0, 1]}
+            fullscreen
+            colors={['transparent', '$background']}
+            rounded="$4"
+          />
+        </Select.ScrollDownButton>
+      </Select.Content>
+    </Select>
+  )
+}
+
+const items = [
+  { name: 'Apple' },
+  { name: 'Pear' },
+  { name: 'Blackberry' },
+  { name: 'Peach' },
+  { name: 'Apricot' },
+  { name: 'Melon' },
+  { name: 'Honeydew' },
+  { name: 'Starfruit' },
+  { name: 'Blueberry' },
+  { name: 'Raspberry' },
+  { name: 'Strawberry' },
+  { name: 'Mango' },
+  { name: 'Pineapple' },
+  { name: 'Lime' },
+  { name: 'Lemon' },
+  { name: 'Coconut' },
+  { name: 'Guava' },
+  { name: 'Papaya' },
+  { name: 'Orange' },
+  { name: 'Grape' },
+  { name: 'Jackfruit' },
+  { name: 'Durian' },
+] as const

package/src/SeparatorDemo.tsx

@@ -0,0 +1,18 @@
+import { Paragraph, Separator, XStack, YStack } from '@hanzo/gui'
+
+export function SeparatorDemo() {
+  return (
+    <YStack width="100%" maxW={300} mx={16}>
+      <Paragraph fontWeight="800">Gui</Paragraph>
+      <Paragraph>A cross-platform component library.</Paragraph>
+      <Separator my={15} />
+      <XStack height={20} items="center">
+        <Paragraph>Blog</Paragraph>
+        <Separator self="stretch" vertical mx={16} />
+        <Paragraph>Docs</Paragraph>
+        <Separator self="stretch" vertical mx={16} />
+        <Paragraph>Source</Paragraph>
+      </XStack>
+    </YStack>
+  )
+}

package/src/ShapesDemo.tsx

@@ -0,0 +1,10 @@
+import { Circle, Square, XStack } from '@hanzo/gui'
+
+export function ShapesDemo() {
+  return (
+    <XStack p="$2" gap="$4">
+      <Square size={100} bg="$color" elevation="$4" />
+      <Circle size={100} bg="$color" elevation="$4" />
+    </XStack>
+  )
+}

package/src/SheetDemo.tsx

@@ -0,0 +1,156 @@
+import { ChevronDown, ChevronUp } from '@hanzogui/lucide-icons-2'
+import type { SheetProps } from '@hanzogui/sheet'
+import { Sheet } from '@hanzogui/sheet'
+import React, { memo } from 'react'
+import { Button, H2, Input, Paragraph, XStack, YStack } from '@hanzo/gui'
+
+const spModes = ['percent', 'constant', 'fit', 'mixed'] as const
+
+export const SheetDemo = () => {
+  const [position, setPosition] = React.useState(0)
+  const [open, setOpen] = React.useState(false)
+  const [modal, setModal] = React.useState(true)
+  const [innerOpen, setInnerOpen] = React.useState(false)
+  const [snapPointsMode, setSnapPointsMode] =
+    React.useState<(typeof spModes)[number]>('percent')
+  const [mixedFitDemo, setMixedFitDemo] = React.useState(false)
+
+  const isPercent = snapPointsMode === 'percent'
+  const isConstant = snapPointsMode === 'constant'
+  const isFit = snapPointsMode === 'fit'
+  const isMixed = snapPointsMode === 'mixed'
+  const snapPoints = isPercent
+    ? [85, 50, 25]
+    : isConstant
+      ? [256, 190]
+      : isFit
+        ? undefined
+        : mixedFitDemo
+          ? ['fit', 110]
+          : ['80%', 256, 190]
+
+  return (
+    <>
+      <YStack gap="$4">
+        <XStack gap="$4" $maxMd={{ flexDirection: 'column', items: 'center' }}>
+          <Button onPress={() => setOpen(true)}>Open</Button>
+          <Button onPress={() => setModal((x) => !x)}>
+            {modal ? 'Type: Modal' : 'Type: Inline'}
+          </Button>
+          <Button
+            onPress={() =>
+              setSnapPointsMode(
+                (prev) => spModes[(spModes.indexOf(prev) + 1) % spModes.length]
+              )
+            }
+          >
+            {`Mode: ${
+              { percent: 'Percentage', constant: 'Constant', fit: 'Fit', mixed: 'Mixed' }[
+                snapPointsMode
+              ]
+            }`}
+          </Button>
+        </XStack>
+        {isMixed ? (
+          <Button onPress={() => setMixedFitDemo((x) => !x)}>
+            {`Snap Points: ${JSON.stringify(snapPoints)}`}
+          </Button>
+        ) : (
+          <XStack py="$2.5" justify="center">
+            <Paragraph>
+              {`Snap Points: ${isFit ? '(none)' : JSON.stringify(snapPoints)}`}
+            </Paragraph>
+          </XStack>
+        )}
+      </YStack>
+
+      <Sheet
+        modal={modal}
+        open={open}
+        onOpenChange={setOpen}
+        snapPoints={snapPoints}
+        snapPointsMode={snapPointsMode}
+        dismissOnSnapToBottom
+        position={position}
+        onPositionChange={setPosition}
+        zIndex={100_000}
+        transition="medium"
+      >
+        <Sheet.Overlay
+          transition="lazy"
+          bg="$shadow6"
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+
+        <Sheet.Handle />
+        <Sheet.Frame p="$4" justify="center" items="center" gap="$5">
+          <SheetContents {...{ modal, isPercent, innerOpen, setInnerOpen, setOpen }} />
+        </Sheet.Frame>
+      </Sheet>
+    </>
+  )
+}
+
+// in general good to memoize the contents to avoid expensive renders during animations
+const SheetContents = memo(
+  ({ modal, isPercent, innerOpen, setInnerOpen, setOpen }: any) => {
+    return (
+      <>
+        <Button size="$6" circular icon={ChevronDown} onPress={() => setOpen(false)} />
+        <Input width={200} />
+        {modal && isPercent && (
+          <>
+            <InnerSheet open={innerOpen} onOpenChange={setInnerOpen} />
+            <Button
+              size="$6"
+              circular
+              icon={ChevronUp}
+              onPress={() => setInnerOpen(true)}
+            />
+          </>
+        )}
+      </>
+    )
+  }
+)
+
+function InnerSheet(props: SheetProps) {
+  return (
+    <Sheet transition="medium" modal snapPoints={[90]} dismissOnSnapToBottom {...props}>
+      <Sheet.Overlay
+        transition="medium"
+        bg="$shadow2"
+        enterStyle={{ opacity: 0 }}
+        exitStyle={{ opacity: 0 }}
+      />
+
+      <Sheet.Handle />
+      <Sheet.Frame flex={1} justify="center" items="center" gap="$5">
+        <Sheet.ScrollView>
+          <YStack p="$5" gap="$8">
+            <Button
+              size="$6"
+              circular
+              self="center"
+              icon={ChevronDown}
+              onPress={() => props.onOpenChange?.(false)}
+            />
+
+            <H2>Hello world</H2>
+            {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
+              <Paragraph key={i} size="$8">
+                Eu officia sunt ipsum nisi dolore labore est laborum laborum in esse ad
+                pariatur. Dolor excepteur esse deserunt voluptate labore ea. Exercitation
+                ipsum deserunt occaecat cupidatat consequat est adipisicing velit
+                cupidatat ullamco veniam aliquip reprehenderit officia. Officia labore
+                culpa ullamco velit. In sit occaecat velit ipsum fugiat esse aliqua dolor
+                sint.
+              </Paragraph>
+            ))}
+          </YStack>
+        </Sheet.ScrollView>
+      </Sheet.Frame>
+    </Sheet>
+  )
+}