@hanzogui/demos 2.0.0

package/src/SliderDemo.tsx

@@ -0,0 +1,23 @@
+import type { SliderProps } from '@hanzo/gui'
+import { Slider, Theme, XStack } from '@hanzo/gui'
+
+export function SliderDemo() {
+  return (
+    <XStack height={200} items="center" gap="$8">
+      <SimpleSlider height={200} orientation="vertical" />
+      <SimpleSlider width={200} />
+    </XStack>
+  )
+}
+
+function SimpleSlider({ children, ...props }: SliderProps) {
+  return (
+    <Slider defaultValue={[50]} max={100} step={1} {...props}>
+      <Slider.Track>
+        <Slider.TrackActive />
+      </Slider.Track>
+      <Slider.Thumb theme="accent" size={30} borderRadius={100} />
+      {children}
+    </Slider>
+  )
+}

package/src/SpinnerDemo.tsx

@@ -0,0 +1,10 @@
+import { Spinner, YStack } from '@hanzo/gui'
+
+export function SpinnerDemo() {
+  return (
+    <YStack p="$3" gap="$4" items="center">
+      <Spinner size="small" color="$green10" />
+      <Spinner size="large" color="$yellow10" />
+    </YStack>
+  )
+}

package/src/StacksDemo.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { XStack, YStack, ZStack } from '@hanzo/gui'
+
+export function StacksDemo() {
+  return (
+    <XStack maxW={250} p="$2" self="center" gap="$2">
+      <YStack
+        flex={1}
+        flexBasis="auto"
+        borderWidth={2}
+        borderColor="$color"
+        rounded="$4"
+        gap="$2"
+        p="$2"
+      >
+        <YStack bg="$color" rounded="$3" p="$2" />
+        <YStack bg="$color" rounded="$3" p="$2" />
+        <YStack bg="$color" rounded="$3" p="$2" />
+      </YStack>
+
+      <XStack
+        flex={1}
+        flexBasis="auto"
+        borderWidth={2}
+        borderColor="$color"
+        rounded="$4"
+        gap="$2"
+        p="$2"
+      >
+        <YStack bg="$color" rounded="$3" p="$2" />
+        <YStack bg="$color" rounded="$3" p="$2" />
+        <YStack bg="$color" rounded="$3" p="$2" />
+      </XStack>
+
+      <ZStack flex={1} flexBasis="auto" maxW={50} maxH={85} width={100}>
+        <YStack fullscreen rounded="$4" p="$2" borderColor="$color" borderWidth={2} />
+        <YStack
+          borderColor="$color"
+          fullscreen
+          y={10}
+          x={10}
+          borderWidth={2}
+          rounded="$4"
+          p="$2"
+        />
+        <YStack
+          borderColor="$color"
+          fullscreen
+          y={20}
+          x={20}
+          borderWidth={2}
+          rounded="$4"
+          p="$2"
+        />
+      </ZStack>
+    </XStack>
+  )
+}

package/src/SwitchDemo.tsx

@@ -0,0 +1,52 @@
+import type { SizeTokens } from '@hanzo/gui'
+import { Label, Separator, Switch, Theme, XStack, YStack } from '@hanzo/gui'
+
+export function SwitchDemo() {
+  return (
+    <>
+      <YStack width={200} items="center" gap="$3">
+        <XStack gap="$3" $xs={{ flexDirection: 'column' }}>
+          <SwitchWithLabel size="$2" />
+          <SwitchWithLabel size="$2" defaultChecked />
+        </XStack>
+        <XStack gap="$3" $xs={{ flexDirection: 'column' }}>
+          <SwitchWithLabel size="$3" />
+          <SwitchWithLabel size="$3" defaultChecked />
+        </XStack>
+        <XStack gap="$3" $xs={{ flexDirection: 'column' }}>
+          <SwitchWithLabel size="$4" />
+          <SwitchWithLabel size="$4" defaultChecked />
+        </XStack>
+      </YStack>
+    </>
+  )
+}
+
+export function SwitchWithLabel(props: {
+  size: SizeTokens
+  defaultChecked?: boolean
+  activeStyle?: boolean
+}) {
+  const id = `switch-${props.size.toString().slice(1)}-${props.defaultChecked ?? ''}}`
+  return (
+    <XStack width={200} items="center" gap="$4">
+      <Label pr="$0" minW={90} justify="flex-end" size={props.size} htmlFor={id}>
+        Accept
+      </Label>
+      <Separator minH={20} vertical />
+      <Switch
+        id={id}
+        transition="300ms"
+        size={props.size}
+        defaultChecked={props.defaultChecked}
+        // use activeStyle to choose youra active color
+        // default to $backgroundActive unless "unstyled" boolean prop is on
+        activeStyle={{
+          backgroundColor: '$color6',
+        }}
+      >
+        <Switch.Thumb transition="quickest" />
+      </Switch>
+    </XStack>
+  )
+}

package/src/SwitchHeadlessDemo.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import type { SwitchProps as SwitchHeadlessProps } from '@hanzogui/switch-headless'
+import { useSwitch } from '@hanzogui/switch-headless'
+
+import type { View } from 'react-native'
+import { Animated, Pressable } from 'react-native'
+import { Label, XStack, YStack } from '@hanzo/gui'
+
+export function SwitchHeadlessDemo() {
+  return (
+    <YStack width={200} items="center" gap="$3">
+      <XStack gap="$3" items="center">
+        <Label htmlFor="headless">Headless</Label>
+        <HeadlessSwitch defaultChecked id="headless" />
+      </XStack>
+    </YStack>
+  )
+}
+
+const HeadlessSwitch = React.forwardRef<View, SwitchHeadlessProps>((props, ref) => {
+  const [checked, setChecked] = React.useState(props.defaultChecked || false)
+  const { switchProps, switchRef, bubbleInput } = useSwitch(
+    props,
+    [checked, setChecked],
+    ref
+  )
+
+  const [animation] = React.useState(() => new Animated.Value(0))
+
+  React.useEffect(() => {
+    Animated.timing(animation, {
+      toValue: checked ? 1 : 0,
+      duration: 100,
+      useNativeDriver: true,
+    }).start()
+  }, [checked, animation])
+
+  const translateX = React.useMemo(
+    () =>
+      animation.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 20],
+      }),
+    [animation]
+  )
+
+  return (
+    <>
+      <Pressable
+        style={{
+          width: 40,
+          height: 20,
+          borderRadius: 100,
+          backgroundColor: checked ? 'lightblue' : 'silver',
+        }}
+        ref={switchRef}
+        {...switchProps}
+      >
+        <Animated.View
+          style={[
+            {
+              backgroundColor: 'black',
+              borderRadius: 100,
+              width: 20,
+              height: 20,
+            },
+            {
+              transform: [{ translateX }],
+            },
+          ]}
+        />
+      </Pressable>
+      {bubbleInput}
+    </>
+  )
+})

package/src/SwitchUnstyledDemo.tsx

@@ -0,0 +1,58 @@
+import { View, styled } from '@hanzogui/core'
+import { createSwitch } from '@hanzogui/switch'
+import { Label, XStack, YStack } from '@hanzo/gui'
+
+const Frame = styled(View, {
+  width: 40,
+  height: 20,
+  rounded: 20,
+  variants: {
+    checked: {
+      true: {
+        backgroundColor: 'lightblue',
+      },
+      false: {
+        backgroundColor: 'silver',
+      },
+    },
+  } as const,
+  defaultVariants: {
+    checked: false,
+  },
+})
+
+const Thumb = styled(View, {
+  width: 20,
+  height: 20,
+  bg: 'black',
+  rounded: 20,
+
+  variants: {
+    checked: {
+      true: {
+        opacity: 0.8,
+      },
+      false: {
+        opacity: 0.5,
+      },
+    },
+  } as const,
+})
+
+export const Switch = createSwitch({
+  Frame,
+  Thumb,
+})
+
+export function SwitchUnstyledDemo() {
+  return (
+    <YStack width={200} items="center" gap="$3">
+      <XStack gap="$3" items="center">
+        <Label htmlFor="unstyled-switch">Unstyled</Label>
+        <Switch defaultChecked id="unstyled-switch">
+          <Switch.Thumb transition="quickest" />
+        </Switch>
+      </XStack>
+    </YStack>
+  )
+}

package/src/TabsAdvancedDemo.tsx

@@ -0,0 +1,351 @@
+import React from 'react'
+import type { ViewProps, TabLayout, TabsTabProps } from '@hanzo/gui'
+import {
+  AnimatePresence,
+  Button,
+  H5,
+  SizableText,
+  Tabs,
+  XStack,
+  YStack,
+  styled,
+} from '@hanzo/gui'
+
+const demos = ['background', 'underline'] as const
+const demosTitle: Record<(typeof demos)[number], string> = {
+  background: 'Background Indicator',
+  underline: 'Underline Indicator',
+}
+
+export const TabsAdvancedDemo = () => {
+  const [demoIndex, setDemoIndex] = React.useState(0)
+  const demo = demos[demoIndex]
+  return (
+    <>
+      {demo === 'underline' ? <TabsAdvancedUnderline /> : <TabsAdvancedBackground />}
+
+      <XStack
+        items="center"
+        gap="$4"
+        position="absolute"
+        b="$3"
+        l="$4"
+        $xxs={{ display: 'none' }}
+      >
+        <Button size="$2" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>
+          {demosTitle[demo]}
+        </Button>
+      </XStack>
+    </>
+  )
+}
+
+const TabsAdvancedBackground = () => {
+  const [tabState, setTabState] = React.useState<{
+    currentTab: string
+    /**
+     * Layout of the Tab user might intend to select (hovering / focusing)
+     */
+    intentAt: TabLayout | null
+    /**
+     * Layout of the Tab user selected
+     */
+    activeAt: TabLayout | null
+    /**
+     * Used to get the direction of activation for animating the active indicator
+     */
+    prevActiveAt: TabLayout | null
+  }>({
+    activeAt: null,
+    currentTab: 'tab1',
+    intentAt: null,
+    prevActiveAt: null,
+  })
+
+  const setCurrentTab = (currentTab: string) => setTabState({ ...tabState, currentTab })
+  const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt })
+  const setActiveIndicator = (activeAt) =>
+    setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })
+  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState
+
+  // 1 = right, 0 = nowhere, -1 = left
+  const direction = (() => {
+    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
+      return 0
+    }
+    return activeAt.x > prevActiveAt.x ? -1 : 1
+  })()
+
+  const handleOnInteraction: TabsTabProps['onInteraction'] = (type, layout) => {
+    if (type === 'select') {
+      setActiveIndicator(layout)
+    } else {
+      setIntentIndicator(layout)
+    }
+  }
+
+  return (
+    <Tabs
+      value={currentTab}
+      onValueChange={setCurrentTab}
+      orientation="horizontal"
+      size="$4"
+      p="$2"
+      height={150}
+      flexDirection="column"
+      activationMode="manual"
+      bg="$background"
+      rounded="$4"
+    >
+      <AnimatePresence>
+        {intentAt && (
+          <TabsRovingIndicator
+            rounded="$4"
+            width={intentAt.width}
+            height={intentAt.height}
+            x={intentAt.x}
+            y={intentAt.y}
+          />
+        )}
+      </AnimatePresence>
+      <AnimatePresence>
+        {activeAt && (
+          <TabsRovingIndicator
+            rounded="$4"
+            theme="accent"
+            width={activeAt.width}
+            height={activeAt.height}
+            x={activeAt.x}
+            y={activeAt.y}
+          />
+        )}
+      </AnimatePresence>
+      <YStack position="relative">
+        <Tabs.List
+          loop={false}
+          aria-label="Manage your account"
+          gap="$2"
+          backgroundColor="transparent"
+        >
+          <Tabs.Tab
+            unstyled
+            paddingVertical="$2"
+            paddingHorizontal="$3"
+            value="tab1"
+            onInteraction={handleOnInteraction}
+          >
+            <SizableText>Profile</SizableText>
+          </Tabs.Tab>
+          <Tabs.Tab
+            unstyled
+            paddingVertical="$2"
+            paddingHorizontal="$3"
+            value="tab2"
+            onInteraction={handleOnInteraction}
+          >
+            <SizableText>Connections</SizableText>
+          </Tabs.Tab>
+          <Tabs.Tab
+            unstyled
+            paddingVertical="$2"
+            paddingHorizontal="$3"
+            value="tab3"
+            onInteraction={handleOnInteraction}
+          >
+            <SizableText>Notifications</SizableText>
+          </Tabs.Tab>
+        </Tabs.List>
+      </YStack>
+
+      <AnimatePresence exitBeforeEnter custom={{ direction }} initial={false}>
+        <AnimatedYStack key={currentTab}>
+          <Tabs.Content value={currentTab} forceMount flex={1} justify="center">
+            <H5 text="center">{currentTab}</H5>
+          </Tabs.Content>
+        </AnimatedYStack>
+      </AnimatePresence>
+    </Tabs>
+  )
+}
+
+const TabsAdvancedUnderline = () => {
+  const [tabState, setTabState] = React.useState<{
+    currentTab: string
+    /**
+     * Layout of the Tab user might intend to select (hovering / focusing)
+     */
+    intentAt: TabLayout | null
+    /**
+     * Layout of the Tab user selected
+     */
+    activeAt: TabLayout | null
+    /**
+     * Used to get the direction of activation for animating the active indicator
+     */
+    prevActiveAt: TabLayout | null
+  }>({
+    activeAt: null,
+    currentTab: 'tab1',
+    intentAt: null,
+    prevActiveAt: null,
+  })
+
+  const setCurrentTab = (currentTab: string) => setTabState({ ...tabState, currentTab })
+  const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt })
+  const setActiveIndicator = (activeAt) =>
+    setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })
+  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState
+
+  // 1 = right, 0 = nowhere, -1 = left
+  const direction = (() => {
+    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
+      return 0
+    }
+    return activeAt.x > prevActiveAt.x ? -1 : 1
+  })()
+
+  const handleOnInteraction: TabsTabProps['onInteraction'] = (type, layout) => {
+    if (type === 'select') {
+      setActiveIndicator(layout)
+    } else {
+      setIntentIndicator(layout)
+    }
+  }
+
+  return (
+    <Tabs
+      value={currentTab}
+      onValueChange={setCurrentTab}
+      orientation="horizontal"
+      size="$4"
+      height={150}
+      flexDirection="column"
+      activationMode="manual"
+      bg="$background"
+      rounded="$4"
+    >
+      <YStack position="relative">
+        <AnimatePresence>
+          {intentAt && (
+            <TabsRovingIndicator
+              width={intentAt.width}
+              height="$0.5"
+              x={intentAt.x}
+              b={0}
+            />
+          )}
+        </AnimatePresence>
+        <AnimatePresence>
+          {activeAt && (
+            <TabsRovingIndicator
+              theme="accent"
+              active
+              width={activeAt.width}
+              height="$0.5"
+              x={activeAt.x}
+              b={0}
+            />
+          )}
+        </AnimatePresence>
+        <Tabs.List
+          loop={false}
+          aria-label="Manage your account"
+          borderBottomLeftRadius={0}
+          borderBottomRightRadius={0}
+          paddingBottom="$1.5"
+          borderColor="$color3"
+          borderBottomWidth="$0.5"
+          backgroundColor="transparent"
+        >
+          <Tabs.Tab
+            unstyled
+            paddingHorizontal="$3"
+            paddingVertical="$2"
+            value="tab1"
+            onInteraction={handleOnInteraction}
+          >
+            <SizableText>Profile</SizableText>
+          </Tabs.Tab>
+          <Tabs.Tab
+            unstyled
+            paddingHorizontal="$3"
+            paddingVertical="$2"
+            value="tab2"
+            onInteraction={handleOnInteraction}
+          >
+            <SizableText>Connections</SizableText>
+          </Tabs.Tab>
+          <Tabs.Tab
+            unstyled
+            paddingHorizontal="$3"
+            paddingVertical="$2"
+            value="tab3"
+            onInteraction={handleOnInteraction}
+          >
+            <SizableText>Notifications</SizableText>
+          </Tabs.Tab>
+        </Tabs.List>
+      </YStack>
+
+      <AnimatePresence exitBeforeEnter custom={{ direction }} initial={false}>
+        <AnimatedYStack key={currentTab}>
+          <Tabs.Content
+            value={currentTab}
+            forceMount
+            flex={1}
+            justify="center"
+            flexBasis="auto"
+          >
+            <H5 text="center">{currentTab}</H5>
+          </Tabs.Content>
+        </AnimatedYStack>
+      </AnimatePresence>
+    </Tabs>
+  )
+}
+
+const TabsRovingIndicator = ({ active, ...props }: { active?: boolean } & ViewProps) => {
+  return (
+    <YStack
+      position="absolute"
+      backgroundColor="$color5"
+      opacity={0.7}
+      transition="100ms"
+      enterStyle={{
+        opacity: 0,
+      }}
+      exitStyle={{
+        opacity: 0,
+      }}
+      {...(active && {
+        backgroundColor: '$color8',
+        opacity: 0.6,
+      })}
+      {...props}
+    />
+  )
+}
+
+const AnimatedYStack = styled(YStack, {
+  flex: 1,
+  x: 0,
+  opacity: 1,
+
+  transition: '100ms',
+  variants: {
+    // 1 = right, 0 = nowhere, -1 = left
+    direction: {
+      ':number': (direction) => ({
+        enterStyle: {
+          x: direction > 0 ? -25 : 25,
+          opacity: 0,
+        },
+        exitStyle: {
+          zIndex: 0,
+          x: direction < 0 ? -25 : 25,
+          opacity: 0,
+        },
+      }),
+    },
+  } as const,
+})