@hanzogui/demos 2.0.0

package/src/ToggleGroupDemo.tsx

@@ -0,0 +1,82 @@
+import { AlignCenter, AlignLeft, AlignRight } from '@hanzogui/lucide-icons-2'
+import { Label, ToggleGroup, XGroup, YGroup, XStack, YStack } from '@hanzo/gui'
+
+export function ToggleGroupDemo() {
+  return (
+    <YStack px="$4">
+      <XStack items="center" gap="$10">
+        <YStack items="center" gap="$6">
+          <ToggleGroupComponent type="single" orientation="horizontal" />
+          <ToggleGroupComponent type="multiple" orientation="horizontal" />
+        </YStack>
+        <XStack items="center" gap="$6" y={-28}>
+          <ToggleGroupComponent type="single" orientation="vertical" />
+          <ToggleGroupComponent type="multiple" orientation="vertical" />
+        </XStack>
+      </XStack>
+    </YStack>
+  )
+}
+
+function ToggleGroupComponent(props: {
+  type: 'single' | 'multiple'
+  orientation: 'vertical' | 'horizontal'
+}) {
+  const id = `switch-${props.type}`
+  const Group = props.orientation === 'horizontal' ? XGroup : YGroup
+
+  return (
+    <XStack
+      flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}
+      items="center"
+      justify="center"
+      gap="$4"
+    >
+      <Label pr="$0" justify="flex-end" size="$4" htmlFor={id}>
+        {props.type === 'single' ? 'Single' : 'Multiple'}
+      </Label>
+
+      <ToggleGroup
+        orientation={props.orientation}
+        id={id}
+        type={props.type as any}
+        disableDeactivation={props.type === 'single' ? true : undefined}
+      >
+        <Group>
+          <Group.Item>
+            <ToggleGroup.Item
+              value="left"
+              aria-label="Left aligned"
+              borderRadius="$4"
+              activeStyle={{ backgroundColor: '$color5' }}
+            >
+              <AlignLeft size={16} />
+            </ToggleGroup.Item>
+          </Group.Item>
+
+          <Group.Item>
+            <ToggleGroup.Item
+              value="center"
+              aria-label="Center aligned"
+              borderRadius="$4"
+              activeStyle={{ backgroundColor: '$color5' }}
+            >
+              <AlignCenter size={16} />
+            </ToggleGroup.Item>
+          </Group.Item>
+
+          <Group.Item>
+            <ToggleGroup.Item
+              value="right"
+              aria-label="Right aligned"
+              borderRadius="$4"
+              activeStyle={{ backgroundColor: '$color5' }}
+            >
+              <AlignRight size={16} />
+            </ToggleGroup.Item>
+          </Group.Item>
+        </Group>
+      </ToggleGroup>
+    </XStack>
+  )
+}

package/src/TokensDemo.tsx

@@ -0,0 +1,105 @@
+import type { Tokens } from '@hanzogui/core'
+import { getConfig } from '@hanzogui/core'
+import React from 'react'
+import { Button, H2, H3, H4, Square, XGroup, XStack, YStack } from '@hanzo/gui'
+
+type Section = 'spaceNegative' | keyof Tokens
+
+const sections: { name: string; key: Section }[] = [
+  {
+    name: `Size`,
+    key: `size`,
+  },
+  {
+    name: `Space`,
+    key: 'space',
+  },
+  {
+    name: `Space (-)`,
+    key: `spaceNegative`,
+  },
+  {
+    name: `Radius`,
+    key: `radius`,
+  },
+]
+
+export function TokensDemo() {
+  const [section, setSection] = React.useState<Section>('size')
+
+  return (
+    <YStack gap="$4">
+      <XGroup items="center" self="center">
+        {sections.map(({ name, key }) => {
+          return (
+            <XGroup.Item key={key}>
+              <Button
+                size="$3"
+                theme={section === key ? 'accent' : null}
+                onPress={() => setSection(key)}
+              >
+                {name}
+              </Button>
+            </XGroup.Item>
+          )
+        })}
+      </XGroup>
+
+      {(section === 'size' ||
+        section === 'spaceNegative' ||
+        section === 'space' ||
+        section === 'radius') && <SizeSection section={section} />}
+    </YStack>
+  )
+}
+
+function SizeSection({ section }: { section: Section }) {
+  const allTokens = getConfig().tokens
+  const tokens = allTokens[section.startsWith('space') ? 'space' : section]
+  const st = Object.keys(tokens).sort((a, b) =>
+    Number.parseFloat(a) > Number.parseFloat(b) ? 1 : -1
+  )
+  const spaceTokens = st.filter((t) => Number.parseFloat(t) >= 0)
+  const spaceTokensNegative = st
+    .filter((t) => Number.parseFloat(t) < 0)
+    .sort((a, b) => (Number.parseFloat(a) > Number.parseFloat(b) ? -1 : 1))
+
+  return (
+    <YStack flex={1} gap="$4">
+      <H2>Sizes</H2>
+      <YStack width="100%" gap="$2">
+        {(section === 'spaceNegative' ? spaceTokensNegative : spaceTokens).map(
+          (token) => {
+            return (
+              <XStack width="100%" items="center" key={token}>
+                <YStack width="25%">
+                  <H3 size="$6">${token}</H3>
+                </YStack>
+                <YStack width="20%">
+                  <H4 size="$5">{tokens[token]?.val}px</H4>
+                </YStack>
+                <Square
+                  size={tokens[token]?.val as any}
+                  backgroundColor="$color5"
+                  {...(section === 'spaceNegative' && {
+                    backgroundColor: '$red5',
+                    size:
+                      -tokens[
+                        spaceTokensNegative.find(
+                          (t) => Number.parseFloat(t) === -Number.parseFloat(token)
+                        ) ?? token
+                      ]?.val,
+                  })}
+                  {...(section === 'radius' && {
+                    size: allTokens.size[token]?.val as any,
+                    borderRadius: tokens[token]?.val as any,
+                  })}
+                />
+              </XStack>
+            )
+          }
+        )}
+      </YStack>
+    </YStack>
+  )
+}

package/src/TooltipDemo.tsx

@@ -0,0 +1,68 @@
+import {
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  Circle,
+} from '@hanzogui/lucide-icons-2'
+import type { TooltipProps } from '@hanzo/gui'
+import { Button, Paragraph, Theme, Tooltip, TooltipGroup, XStack, YStack } from '@hanzo/gui'
+
+export function TooltipDemo() {
+  return (
+    <Theme name="surface2">
+      <TooltipGroup delay={{ open: 300, close: 100 }}>
+        <YStack gap="$2" self="center">
+          <XStack gap="$2">
+            <Demo groupId="0" placement="top-end" Icon={Circle} />
+            <Demo groupId="1" placement="top" Icon={ChevronUp} />
+            <Demo groupId="2" placement="top-start" Icon={Circle} />
+          </XStack>
+          <XStack gap="$2">
+            <Demo groupId="3" placement="left" Icon={ChevronLeft} />
+            <YStack flex={1} />
+            <Demo groupId="4" placement="right" Icon={ChevronRight} />
+          </XStack>
+          <XStack gap="$2">
+            <Demo groupId="5" placement="bottom-end" Icon={Circle} />
+            <Demo groupId="6" placement="bottom" Icon={ChevronDown} />
+            <Demo groupId="7" placement="bottom-start" Icon={Circle} />
+          </XStack>
+        </YStack>
+      </TooltipGroup>
+    </Theme>
+  )
+}
+
+function Demo({ Icon, ...props }: TooltipProps & { Icon?: any }) {
+  return (
+    <Tooltip {...props}>
+      <Tooltip.Trigger asChild>
+        <Button icon={Icon} circular />
+      </Tooltip.Trigger>
+      <Tooltip.Content
+        enterStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
+        exitStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
+        scale={1}
+        x={0}
+        y={0}
+        opacity={1}
+        py="$2"
+        px="$3"
+        transition={[
+          'quick',
+          {
+            opacity: {
+              overshootClamping: true,
+            },
+          },
+        ]}
+      >
+        <Tooltip.Arrow />
+        <Paragraph size="$2" lineHeight="$1">
+          Hello world
+        </Paragraph>
+      </Tooltip.Content>
+    </Tooltip>
+  )
+}

package/src/UpdateThemeDemo.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { config } from '@hanzogui/config/v3'
+import { addTheme, updateTheme } from '@hanzogui/theme'
+
+import {
+  Button,
+  Square,
+  Theme,
+  XStack,
+  YStack,
+  getVariableValue,
+  useIsomorphicLayoutEffect,
+} from '@hanzo/gui'
+
+const colors = config.tokens.color
+const colorKeys = Object.keys(colors)
+
+export function UpdateThemeDemo() {
+  const [theme, setTheme] = React.useState<any>()
+
+  useIsomorphicLayoutEffect(() => {
+    addTheme({
+      name: 'custom',
+      insertCSS: true,
+      theme: {
+        color: 'red',
+      },
+    })
+    setTheme('custom')
+  }, [])
+
+  return (
+    <YStack items="center" gap="$4">
+      <XStack gap={'$5'}>
+        <Theme name={theme ?? null}>
+          <Square rounded="$8" size={100} bg="$color" />
+        </Theme>
+      </XStack>
+
+      <Button
+        onPress={() => {
+          const randomColor = getVariableValue(
+            colors[colorKeys[Math.floor(Math.random() * colorKeys.length)]]
+          )
+          updateTheme({
+            name: 'custom',
+            theme: {
+              color: randomColor,
+            },
+          })
+        }}
+      >
+        Set to random color
+      </Button>
+    </YStack>
+  )
+}

package/src/WebNativeImageDemo.tsx

@@ -0,0 +1,5 @@
+import { Image } from '@hanzogui/image'
+
+export function WebNativeImageDemo() {
+  return <Image src="https://picsum.photos/200/300" width={200} height={300} />
+}

package/src/gui.config.ts

@@ -0,0 +1,16 @@
+import { config } from '@hanzogui/dev-config'
+import { createGui } from '@hanzo/gui'
+
+const tamaConf = createGui(config)
+
+export type Conf = typeof tamaConf
+
+declare module '@hanzo/gui' {
+  interface GuiCustomConfig extends Conf {}
+
+  interface TypeOverride {
+    groupNames(): 'card' | 'takeoutBody' | 'content' | 'item'
+  }
+}
+
+export default tamaConf

package/src/index.tsx

@@ -0,0 +1,65 @@
+// Include gui config types for proper type checking
+import type {} from './gui.config'
+
+export * from './AccordionDemo'
+export * from './AddThemeDemo'
+export * from './AlertDialogDemo'
+export * from './AnimationsDelayDemo'
+export * from './AnimationsDemo'
+export * from './AnimationsEnterDemo'
+export * from './AnimationsHoverDemo'
+export * from './AnimationsPresenceDemo'
+export * from './AnimationsTimingDemo'
+export * from './AvatarDemo'
+export * from './BoxShadowTokenDemo'
+export * from './BuildAButtonDemo'
+export * from './ButtonDemo'
+export * from './ThemeBuilderDemo'
+export * from './CardDemo'
+export * from './CheckboxDemo'
+export * from './CheckboxHeadlessDemo'
+export * from './CheckboxUnstyledDemo'
+export * from './ColorsDemo'
+export * from './ContextMenuDemo'
+export * from './MenuDemo'
+export * from './DialogDemo'
+export * from './FormsDemo'
+export * from './GroupDemo'
+export * from './HeadingsDemo'
+export * from './ImageDemo'
+export * from './WebNativeImageDemo'
+export * from './InputsDemo'
+export * from './NewInputsDemo'
+export * from './LabelDemo'
+export * from './LinearGradientDemo'
+export * from './ListItemDemo'
+export * from './LucideIconsDemo'
+export * from './PopoverDemo'
+export * from './ProgressDemo'
+export * from './RadioGroupDemo'
+export * from './RadioGroupHeadlessDemo'
+export * from './RadioGroupUnstyledDemo'
+export * from './ReplaceThemeDemo'
+export * from './ScrollViewDemo'
+export * from './SelectDemo'
+export * from './SeparatorDemo'
+export * from './ShapesDemo'
+export * from './SheetDemo'
+export * from './SliderDemo'
+export * from './SpinnerDemo'
+export * from './StacksDemo'
+export * from './SwitchDemo'
+export * from './SwitchHeadlessDemo'
+export * from './SwitchUnstyledDemo'
+export * from './TabsAdvancedDemo'
+export * from './TabsDemo'
+export * from './TextDemo'
+export * from './ThemeInverseDemo'
+export * from './ToastDemo'
+export * from './ToastDuplicateDemo'
+export * from './ToggleGroupDemo'
+export * from './TokensDemo'
+export * from './TooltipDemo'
+export * from './UpdateThemeDemo'
+export * from './useOnIntersecting'
+export * from './TabsHeadlessDemo'

package/src/useOnIntersecting.tsx

@@ -0,0 +1,89 @@
+import type { RefObject } from 'react'
+import { useEffect, useState } from 'react'
+import { isWeb, useEvent } from '@hanzo/gui'
+
+type DisposeFn = () => void
+
+type IntersectCallback = (
+  props: (IntersectionObserverEntry | null)[],
+  didResize?: boolean
+) => DisposeFn | void | null
+
+type HTMLRef = RefObject<HTMLElement | null>
+
+export function useIsIntersecting<Ref extends HTMLRef | HTMLRef[]>(
+  refs: Ref,
+  { once, ...opts }: IntersectionObserverInit & { once?: boolean } = {}
+): Ref extends any[] ? boolean[] : boolean {
+  const [values, setValues] = useState<boolean[]>([])
+
+  useOnIntersecting(
+    refs,
+    (entries) => {
+      if (!isWeb) return
+      const intersecting = entries.some((x) => x?.isIntersecting)
+      if (once && !intersecting) return
+      setValues((prev) => {
+        const next = entries.map((e) => e?.isIntersecting ?? false)
+        if (prev.length === next.length && prev.every((e, i) => e === next[i])) {
+          return prev
+        }
+        return next
+      })
+    },
+    opts
+  )
+
+  return (Array.isArray(refs) ? values : values[0]) as any
+}
+
+export function useOnIntersecting<Ref extends HTMLRef | HTMLRef[]>(
+  refsIn: Ref,
+  incomingCbRaw: IntersectCallback,
+  { threshold = 0, root, rootMargin }: IntersectionObserverInit = {},
+  mountArgs: any[] = []
+) {
+  const onIntersectEvent = useEvent(incomingCbRaw)
+
+  useEffect(() => {
+    if (!isWeb) return
+    const refs = (Array.isArray(refsIn) ? refsIn : [refsIn]) as HTMLRef[]
+    if (!refs.length) return
+
+    let dispose: DisposeFn | null = null
+    let currentEntries: (IntersectionObserverEntry | null)[] = []
+    const options = {
+      threshold,
+      root,
+      rootMargin,
+    }
+    const io = new IntersectionObserver((entries) => {
+      currentEntries = refs.map((ref, index) => {
+        return (
+          entries.find((x) => x.target === ref.current) ?? currentEntries[index] ?? null
+        )
+      })
+      dispose?.()
+      dispose = onIntersectEvent(currentEntries) || null
+    }, options)
+
+    for (const ref of refs) {
+      if (ref.current) {
+        io.observe(ref.current)
+      }
+    }
+
+    return () => {
+      dispose?.()
+      io.disconnect()
+    }
+  }, [
+    onIntersectEvent,
+    refsIn,
+    root,
+    rootMargin,
+    threshold,
+
+    ...mountArgs,
+  ])
+}