@hanzogui/kitchen-sink 3.0.5

package/src/usecases/CustomStyledAnimatedTooltip.tsx

@@ -0,0 +1,72 @@
+import {
+  View,
+  Tooltip as GuiTooltip,
+  Text,
+  Theme,
+  styled,
+  withStaticProperties,
+} from '@hanzo/gui'
+
+const StyledTooltip = styled(GuiTooltip, {
+  delay: 0,
+  restMs: 0,
+  allowFlip: true,
+  stayInFrame: {
+    mainAxis: true,
+  },
+  placement: 'top',
+})
+
+export const Tooltip = withStaticProperties(StyledTooltip, {
+  ...GuiTooltip,
+  Content: styled(GuiTooltip.Content, {
+    padding: 0,
+    px: 8,
+    zIndex: 1_000_000,
+    rounded: 6,
+    bg: '$color1',
+    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,
+    transition: [
+      'quick',
+      {
+        opacity: {
+          overshootClamping: true,
+        },
+      },
+    ],
+  }),
+})
+
+const TriggerText = styled(Text, {
+  fontFamily: '$body',
+  bg: '$color3',
+  p: '$3',
+  color: '$color10',
+})
+
+export function CustomStyledAnimatedTooltip() {
+  return (
+    <View flex={1} items="center" justify="center" gap="$5">
+      <View theme="red">
+        <Tooltip>
+          <Tooltip.Trigger>
+            <TriggerText>No animation with styled()</TriggerText>
+          </Tooltip.Trigger>
+
+          <Theme name="accent">
+            <Tooltip.Content>
+              <Text theme="red" color="$color11">
+                Hey there!
+              </Text>
+            </Tooltip.Content>
+          </Theme>
+        </Tooltip>
+      </View>
+    </View>
+  )
+}

package/src/usecases/DOMNodeAPIs.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useRef, useState } from 'react'
+import { ScrollView, Text, View, YStack, XStack, Input } from '@hanzo/gui'
+
+// exercises the RN 0.82 DOM Node APIs through hanzo-gui component refs
+// on web these are native DOM APIs, on native they're the new DOM-compatible shim
+
+type Results = Record<string, string>
+
+export function DOMNodeAPIs() {
+  const parentRef = useRef<HTMLElement>(null)
+  const childARef = useRef<HTMLElement>(null)
+  const childBRef = useRef<HTMLElement>(null)
+  const textRef = useRef<HTMLElement>(null)
+  const scrollRef = useRef<HTMLElement>(null)
+  const inputRef = useRef<HTMLElement>(null)
+  const [results, setResults] = useState<Results>({})
+
+  useEffect(() => {
+    // wait a frame so layout is settled
+    requestAnimationFrame(() => {
+      const parent = parentRef.current
+      const childA = childARef.current
+      const childB = childBRef.current
+      const textEl = textRef.current
+      const scrollEl = scrollRef.current
+      const inputEl = inputRef.current
+
+      if (!parent || !childA || !childB || !textEl || !scrollEl || !inputEl) {
+        setResults({ error: 'refs not attached' })
+        return
+      }
+
+      const r: Results = {}
+
+      // tree traversal
+      r['parentNode-exists'] = String(!!childA.parentNode)
+      r['parentElement-exists'] = String(!!childA.parentElement)
+      r['parent-contains-childA'] = String(parent.contains(childA))
+      r['parent-contains-childB'] = String(parent.contains(childB))
+      r['childA-contains-parent'] = String(childA.contains(parent))
+      r['hasChildNodes'] = String(parent.hasChildNodes())
+      r['childNodes-length'] = String(parent.childNodes.length)
+      r['children-length'] = String(parent.children.length)
+      r['firstChild-exists'] = String(!!parent.firstChild)
+      r['lastChild-exists'] = String(!!parent.lastChild)
+      r['firstElementChild-exists'] = String(!!parent.firstElementChild)
+      r['lastElementChild-exists'] = String(!!parent.lastElementChild)
+
+      // sibling traversal
+      r['childA-nextSibling-exists'] = String(!!childA.nextSibling)
+      r['childB-previousSibling-exists'] = String(!!childB.previousSibling)
+      r['childA-nextElementSibling-exists'] = String(!!childA.nextElementSibling)
+      r['childB-previousElementSibling-exists'] = String(!!childB.previousElementSibling)
+
+      // getBoundingClientRect
+      const rect = parent.getBoundingClientRect()
+      r['rect-has-width'] = String(rect.width > 0)
+      r['rect-has-height'] = String(rect.height > 0)
+      r['rect-has-x'] = String(typeof rect.x === 'number')
+      r['rect-has-y'] = String(typeof rect.y === 'number')
+      r['rect-has-top'] = String(typeof rect.top === 'number')
+      r['rect-has-left'] = String(typeof rect.left === 'number')
+      r['rect-has-right'] = String(typeof rect.right === 'number')
+      r['rect-has-bottom'] = String(typeof rect.bottom === 'number')
+
+      // document access
+      r['ownerDocument-exists'] = String(!!parent.ownerDocument)
+      r['isConnected'] = String(parent.isConnected)
+
+      // getElementById via ownerDocument
+      r['getElementById-works'] = String(
+        !!parent.ownerDocument.getElementById('dom-node-childA')
+      )
+
+      // compareDocumentPosition
+      const pos = parent.compareDocumentPosition(childA)
+      // DOCUMENT_POSITION_CONTAINED_BY = 16, DOCUMENT_POSITION_FOLLOWING = 4
+      r['compareDocumentPosition-contained'] = String((pos & 16) !== 0)
+
+      // nodeType / nodeName
+      r['parent-nodeType'] = String(parent.nodeType)
+      r['parent-nodeName-exists'] = String(!!parent.nodeName)
+
+      // textContent
+      r['text-textContent'] = textEl.textContent || ''
+
+      // offset properties
+      r['offsetWidth-positive'] = String(parent.offsetWidth > 0)
+      r['offsetHeight-positive'] = String(parent.offsetHeight > 0)
+      r['offsetParent-exists'] = String(!!parent.offsetParent)
+
+      // client properties
+      r['clientWidth-positive'] = String(parent.clientWidth > 0)
+      r['clientHeight-positive'] = String(parent.clientHeight > 0)
+
+      // childElementCount
+      r['childElementCount'] = String(parent.childElementCount)
+
+      // getRootNode
+      r['getRootNode-exists'] = String(!!parent.getRootNode())
+
+      // focus/blur (just verify they exist and don't throw)
+      try {
+        inputEl.focus()
+        r['focus-works'] = String(document.activeElement === inputEl)
+        inputEl.blur()
+        r['blur-works'] = String(document.activeElement !== inputEl)
+      } catch {
+        r['focus-works'] = 'false'
+        r['blur-works'] = 'false'
+      }
+
+      setResults(r)
+    })
+  }, [])
+
+  return (
+    <YStack padding="$4" gap="$2">
+      <View ref={parentRef as any} id="dom-node-parent" gap="$2">
+        <View
+          ref={childARef as any}
+          id="dom-node-childA"
+          width={100}
+          height={50}
+          backgroundColor="$blue5"
+        />
+        <View
+          ref={childBRef as any}
+          id="dom-node-childB"
+          width={100}
+          height={50}
+          backgroundColor="$red5"
+        />
+        <Text ref={textRef as any} id="dom-node-text">
+          hello dom
+        </Text>
+        <ScrollView ref={scrollRef as any} id="dom-node-scroll" height={60}>
+          <View height={200} />
+        </ScrollView>
+        <Input ref={inputRef as any} id="dom-node-input" placeholder="focusable" />
+      </View>
+
+      <YStack id="dom-node-results" gap="$1" paddingTop="$4">
+        {Object.entries(results).map(([key, value]) => (
+          <XStack key={key} gap="$2">
+            <Text fontSize="$2" fontFamily="$mono" data-testid={`result-${key}`}>
+              {key}={value}
+            </Text>
+          </XStack>
+        ))}
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/DialogFocusScopeCase.tsx

@@ -0,0 +1,277 @@
+import { Button, Dialog, Input, Label, XStack, YStack } from '@hanzo/gui'
+
+export function DialogFocusScopeCase() {
+  return (
+    <YStack padding="$4" gap="$4">
+      {/* Modal Dialog - Should trap focus */}
+      <Dialog modal>
+        <Dialog.Trigger asChild>
+          <Button data-testid="modal-dialog-trigger">Open Modal Dialog</Button>
+        </Dialog.Trigger>
+        <DialogContent
+          testId="modal"
+          title="Modal Dialog (Focus Trapped)"
+          description="Focus should be trapped within this dialog. Tab key should cycle through elements."
+        />
+      </Dialog>
+
+      {/* Non-Modal Dialog - Should NOT trap focus */}
+      <Dialog modal={false}>
+        <Dialog.Trigger asChild>
+          <Button data-testid="non-modal-dialog-trigger">Open Non-Modal Dialog</Button>
+        </Dialog.Trigger>
+        <DialogContent
+          testId="non-modal"
+          title="Non-Modal Dialog (Focus Not Trapped)"
+          description="Focus can leave this dialog. Click outside to close."
+        />
+      </Dialog>
+
+      {/* Nested Dialogs */}
+      <Dialog modal>
+        <Dialog.Trigger asChild>
+          <Button data-testid="parent-dialog-trigger">
+            Open Dialog with Nested Dialog
+          </Button>
+        </Dialog.Trigger>
+        <Dialog.Portal>
+          <Dialog.Overlay
+            key="parent-overlay"
+            transition="quick"
+            opacity={0.5}
+            enterStyle={{ opacity: 0 }}
+            exitStyle={{ opacity: 0 }}
+          />
+          <Dialog.Content
+            key="parent-content"
+            bordered
+            elevate
+            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 }}
+            width={500}
+            padding="$6"
+            gap="$4"
+          >
+            <YStack data-testid="parent-dialog-content" gap="$4">
+              <Dialog.Title>Parent Dialog</Dialog.Title>
+              <Dialog.Description>
+                This dialog contains another dialog. Focus should be managed correctly.
+              </Dialog.Description>
+
+              <YStack gap="$3">
+                <Label htmlFor="parent-input">Parent Input</Label>
+                <Input id="parent-input" placeholder="Type here..." />
+              </YStack>
+
+              {/* Nested Dialog */}
+              <Dialog modal>
+                <Dialog.Trigger asChild>
+                  <Button data-testid="nested-dialog-trigger">Open Nested Dialog</Button>
+                </Dialog.Trigger>
+                <Dialog.Portal>
+                  <Dialog.Overlay
+                    key="nested-overlay"
+                    transition="quick"
+                    opacity={0.5}
+                    enterStyle={{ opacity: 0 }}
+                    exitStyle={{ opacity: 0 }}
+                  />
+                  <Dialog.Content
+                    key="nested-content"
+                    bordered
+                    elevate
+                    transition="quick"
+                    enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
+                    exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
+                    width={400}
+                    padding="$6"
+                    gap="$4"
+                  >
+                    <YStack data-testid="nested-dialog-content" gap="$4">
+                      <Dialog.Title>Nested Dialog</Dialog.Title>
+                      <Dialog.Description>
+                        Focus should be trapped in this nested dialog.
+                      </Dialog.Description>
+
+                      <YStack gap="$3">
+                        <Label htmlFor="nested-input">Nested Input</Label>
+                        <Input
+                          id="nested-input"
+                          data-testid="nested-input"
+                          placeholder="Focus trapped here..."
+                        />
+                      </YStack>
+
+                      <XStack gap="$3" justifyContent="flex-end">
+                        <Dialog.Close asChild>
+                          <Button data-testid="nested-close-button">Close Nested</Button>
+                        </Dialog.Close>
+                      </XStack>
+                    </YStack>
+                  </Dialog.Content>
+                </Dialog.Portal>
+              </Dialog>
+
+              <XStack gap="$3" justifyContent="flex-end">
+                <Dialog.Close asChild>
+                  <Button variant="outlined" data-testid="parent-close-button">
+                    Close Parent
+                  </Button>
+                </Dialog.Close>
+              </XStack>
+            </YStack>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog>
+    </YStack>
+  )
+}
+
+function DialogContent({
+  testId,
+  title,
+  description,
+  disableOutsidePointerEvents,
+}: {
+  testId: string
+  title: string
+  description: string
+  disableOutsidePointerEvents?: boolean
+}) {
+  return (
+    <Dialog.Portal>
+      <Dialog.Overlay
+        key="overlay"
+        transition="quick"
+        opacity={0.5}
+        enterStyle={{ opacity: 0 }}
+        exitStyle={{ opacity: 0 }}
+      />
+      <Dialog.Content
+        key="content"
+        bordered
+        elevate
+        disableOutsidePointerEvents={disableOutsidePointerEvents}
+        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 }}
+        width={450}
+        maxHeight="$20"
+        padding="$6"
+        gap="$4"
+      >
+        <YStack data-testid={`${testId}-dialog-content`} gap="$4">
+          <Dialog.Title>{title}</Dialog.Title>
+          <Dialog.Description>{description}</Dialog.Description>
+
+          <YStack gap="$3" render="form">
+            <YStack gap="$3">
+              <Label htmlFor={`${testId}-first`}>First Name</Label>
+              <Input
+                id={`${testId}-first`}
+                data-testid={`first-input`}
+                placeholder="Enter your first name"
+                autoComplete="given-name"
+              />
+            </YStack>
+
+            <YStack gap="$3">
+              <Label htmlFor={`${testId}-second`}>Last Name</Label>
+              <Input
+                id={`${testId}-second`}
+                data-testid={`second-input`}
+                placeholder="Enter your last name"
+                autoComplete="family-name"
+              />
+            </YStack>
+
+            <YStack gap="$3">
+              <Label htmlFor={`${testId}-email`}>Email</Label>
+              <Input
+                id={`${testId}-email`}
+                data-testid={`email-input`}
+                placeholder="your@email.com"
+                autoComplete="email"
+              />
+            </YStack>
+
+            <YStack gap="$3">
+              <Label htmlFor={`${testId}-select`}>Country</Label>
+              <select
+                id={`${testId}-select`}
+                data-testid={`country-select`}
+                style={{
+                  padding: '8px',
+                  borderRadius: '4px',
+                  border: '1px solid #ccc',
+                  backgroundColor: 'transparent',
+                  fontSize: '14px',
+                }}
+              >
+                <option value="">Select a country</option>
+                <option value="us">United States</option>
+                <option value="uk">United Kingdom</option>
+                <option value="ca">Canada</option>
+              </select>
+            </YStack>
+
+            <YStack gap="$3">
+              <Label htmlFor={`${testId}-textarea`}>Comments</Label>
+              <textarea
+                id={`${testId}-textarea`}
+                data-testid={`comments-textarea`}
+                placeholder="Additional comments..."
+                rows={3}
+                style={{
+                  padding: '8px',
+                  borderRadius: '4px',
+                  border: '1px solid #ccc',
+                  backgroundColor: 'transparent',
+                  fontSize: '14px',
+                  resize: 'vertical',
+                }}
+              />
+            </YStack>
+
+            <XStack gap="$3" alignItems="center">
+              <input
+                type="checkbox"
+                id={`${testId}-checkbox`}
+                data-testid={`terms-checkbox`}
+              />
+              <Label htmlFor={`${testId}-checkbox`} size="$3">
+                I agree to the terms and conditions
+              </Label>
+            </XStack>
+          </YStack>
+
+          <XStack gap="$3" justifyContent="flex-end">
+            <Dialog.Close asChild>
+              <Button variant="outlined" data-testid={`cancel-button`}>
+                Cancel
+              </Button>
+            </Dialog.Close>
+            <Button theme="blue" data-testid={`save-button`}>
+              Save Changes
+            </Button>
+          </XStack>
+        </YStack>
+      </Dialog.Content>
+    </Dialog.Portal>
+  )
+}

package/src/usecases/DialogFocusScopeDebug.tsx

@@ -0,0 +1,85 @@
+import { Button, Dialog, Input, YStack } from '@hanzo/gui'
+import React from 'react'
+
+export function DialogFocusScopeDebug() {
+  const [open, setOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    // Log focus changes
+    const handleFocus = (e: FocusEvent) => {
+      console.info(
+        '[DEBUG] Focus changed to:',
+        e.target,
+        (e.target as any)?.tagName,
+        (e.target as any)?.id
+      )
+    }
+
+    document.addEventListener('focusin', handleFocus, true)
+    return () => document.removeEventListener('focusin', handleFocus, true)
+  }, [])
+
+  return (
+    <YStack padding="$4" gap="$4">
+      <Button
+        onPress={() => {
+          console.info('[DEBUG] Opening dialog')
+          setOpen(true)
+        }}
+      >
+        Open Dialog (Check Console)
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen} modal>
+        <Dialog.Portal>
+          <Dialog.Overlay
+            key="overlay"
+            transition="quick"
+            opacity={0.5}
+            enterStyle={{ opacity: 0 }}
+            exitStyle={{ opacity: 0 }}
+          />
+          <Dialog.Content
+            key="content"
+            bordered
+            elevate
+            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 }}
+            width={400}
+            padding="$6"
+            gap="$4"
+          >
+            <YStack gap="$4">
+              <Dialog.Title>Debug Dialog</Dialog.Title>
+              <Dialog.Description>Check console for focus logs</Dialog.Description>
+
+              <Input
+                id="test-input-1"
+                placeholder="First input - should auto-focus"
+                onFocus={() => console.info('[DEBUG] First input focused')}
+              />
+
+              <Input
+                id="test-input-2"
+                placeholder="Second input"
+                onFocus={() => console.info('[DEBUG] Second input focused')}
+              />
+
+              <Dialog.Close asChild>
+                <Button>Close</Button>
+              </Dialog.Close>
+            </YStack>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog>
+    </YStack>
+  )
+}