@hanzogui/kitchen-sink 3.0.5

package/src/usecases/SelectAndroidOnPress.tsx

@@ -0,0 +1,129 @@
+/**
+ * Test case for issue #3436: Select onValueChange not firing on Android physical devices
+ * https://github.com/hanzoai/gui/issues/3436
+ *
+ * The bug: onPressIn and onPressOut fire, but onPress never does on physical Android devices.
+ * This causes Select items to not trigger onValueChange.
+ */
+
+import { Check, ChevronDown } from '@hanzogui/lucide-icons-2'
+import React from 'react'
+import { Adapt, Select, Sheet, Text, YStack } from '@hanzo/gui'
+
+const items = [
+  { name: 'Apple' },
+  { name: 'Pear' },
+  { name: 'Blackberry' },
+  { name: 'Peach' },
+]
+
+const getItemLabel = (value: string) =>
+  items.find((item) => item.name.toLowerCase() === value)?.name
+
+export function SelectAndroidOnPress() {
+  const [val, setVal] = React.useState('')
+  const [changeCount, setChangeCount] = React.useState(0)
+  const [lastAction, setLastAction] = React.useState('none')
+
+  const handleValueChange = (newVal: string) => {
+    console.info('[SelectAndroidOnPress] onValueChange fired:', newVal)
+    setVal(newVal)
+    setChangeCount((c) => c + 1)
+    setLastAction(`selected: ${newVal}`)
+  }
+
+  return (
+    <YStack padding="$4" gap="$4" flex={1}>
+      <Text testID="select-android-title" fontSize="$5" fontWeight="bold">
+        Select Android onPress Test (#3436)
+      </Text>
+
+      <Text testID="select-android-instructions" fontSize="$3" color="$gray11">
+        Tap the select, then tap an item. On physical Android devices, the selection may
+        not work due to onPress not firing.
+      </Text>
+
+      <Select
+        value={val}
+        onValueChange={handleValueChange}
+        disablePreventBodyScroll
+        renderValue={getItemLabel}
+        zIndex={200000}
+      >
+        <Select.Trigger
+          testID="select-android-trigger"
+          maxWidth={280}
+          iconAfter={ChevronDown}
+        >
+          <Select.Value placeholder="Select a fruit..." />
+        </Select.Trigger>
+
+        <Adapt when="maxMd" platform="touch">
+          <Sheet 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.Viewport minWidth={200}>
+            <Select.Group>
+              <Select.Label>Fruits</Select.Label>
+              {items.map((item, i) => (
+                <Select.Item
+                  index={i}
+                  key={item.name}
+                  value={item.name.toLowerCase()}
+                  testID={`select-android-item-${item.name.toLowerCase()}`}
+                >
+                  <Select.ItemText>{item.name}</Select.ItemText>
+                  <Select.ItemIndicator marginLeft="auto">
+                    <Check size={16} />
+                  </Select.ItemIndicator>
+                </Select.Item>
+              ))}
+            </Select.Group>
+          </Select.Viewport>
+        </Select.Content>
+      </Select>
+
+      {/* status display for test verification */}
+      <YStack gap="$2" padding="$3" bg="$backgroundHover" borderRadius="$2">
+        <Text testID="select-android-selected-value">
+          Selected value: {val || '(none)'}
+        </Text>
+        <Text testID="select-android-change-count">Change count: {changeCount}</Text>
+        <Text testID="select-android-last-action">Last action: {lastAction}</Text>
+      </YStack>
+
+      <YStack gap="$1" padding="$2" bg="$yellow3" borderRadius="$2">
+        <Text fontSize="$2" fontWeight="bold">
+          Expected behavior:
+        </Text>
+        <Text fontSize="$2">
+          • Tap trigger → sheet opens{'\n'}• Tap item → sheet closes, value updates{'\n'}•
+          Change count should increment
+        </Text>
+      </YStack>
+
+      <YStack gap="$1" padding="$2" bg="$red3" borderRadius="$2">
+        <Text fontSize="$2" fontWeight="bold">
+          Bug behavior (physical Android):
+        </Text>
+        <Text fontSize="$2">
+          • Tap trigger → sheet opens{'\n'}• Tap item → nothing happens{'\n'}•
+          onValueChange never fires
+        </Text>
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/SelectFocusScopeCase.tsx

@@ -0,0 +1,270 @@
+import React from 'react'
+import { Select, Label, YStack, XStack, Button } from '@hanzo/gui'
+import { ChevronDown } from '@hanzogui/lucide-icons-2'
+
+// Render value helpers for SSR support
+const fruitsAndVeggiesLabels: Record<string, string> = {
+  apple: 'Apple',
+  banana: 'Banana',
+  orange: 'Orange',
+  carrot: 'Carrot',
+  broccoli: 'Broccoli',
+}
+
+const colorLabels: Record<string, string> = {
+  red: 'Red',
+  green: 'Green',
+  blue: 'Blue',
+}
+
+const sizeLabels: Record<string, string> = {
+  small: 'Small',
+  medium: 'Medium',
+  large: 'Large',
+}
+
+export function SelectFocusScopeCase() {
+  const [value1, setValue1] = React.useState('')
+  const [value2, setValue2] = React.useState('')
+  const [value3, setValue3] = React.useState('')
+  // default value scenario - like the demo page
+  const [value4, setValue4] = React.useState('banana')
+  const [value5, setValue5] = React.useState('')
+
+  return (
+    <YStack padding="$4" gap="$4">
+      {/* Basic Select with Focus Trap */}
+      <YStack gap="$2">
+        <Label htmlFor="basic-select">Basic Select (Focus Trapped)</Label>
+        <Select
+          id="basic-select"
+          value={value1}
+          onValueChange={setValue1}
+          renderValue={(v) => fruitsAndVeggiesLabels[v]}
+        >
+          <Select.Trigger data-testid="basic-select-trigger" iconAfter={ChevronDown}>
+            <Select.Value placeholder="Select an option" />
+          </Select.Trigger>
+
+          <Select.Content data-testid="basic-select-content">
+            <Select.ScrollUpButton />
+            <Select.Viewport data-testid="basic-select-viewport">
+              <Select.Group>
+                <Select.Label>Fruits</Select.Label>
+                <Select.Item data-testid="select-apple" value="apple" index={0}>
+                  <Select.ItemText>Apple</Select.ItemText>
+                  <Select.ItemIndicator />
+                </Select.Item>
+                <Select.Item data-testid="select-banana" value="banana" index={1}>
+                  <Select.ItemText>Banana</Select.ItemText>
+                  <Select.ItemIndicator />
+                </Select.Item>
+                <Select.Item data-testid="select-orange" value="orange" index={2}>
+                  <Select.ItemText>Orange</Select.ItemText>
+                  <Select.ItemIndicator />
+                </Select.Item>
+              </Select.Group>
+
+              <Select.Group>
+                <Select.Label>Vegetables</Select.Label>
+                <Select.Item data-testid="select-carrot" value="carrot" index={3}>
+                  <Select.ItemText>Carrot</Select.ItemText>
+                  <Select.ItemIndicator />
+                </Select.Item>
+                <Select.Item data-testid="select-broccoli" value="broccoli" index={4}>
+                  <Select.ItemText>Broccoli</Select.ItemText>
+                  <Select.ItemIndicator />
+                </Select.Item>
+              </Select.Group>
+            </Select.Viewport>
+            <Select.ScrollDownButton />
+          </Select.Content>
+        </Select>
+      </YStack>
+
+      {/* Select with Custom Content */}
+      <YStack gap="$2">
+        <Label htmlFor="custom-select">Select with Custom Content</Label>
+        <Select
+          id="custom-select"
+          value={value2}
+          onValueChange={setValue2}
+          renderValue={(v) => colorLabels[v]}
+        >
+          <Select.Trigger data-testid="custom-select-trigger" iconAfter={ChevronDown}>
+            <Select.Value placeholder="Choose a color" />
+          </Select.Trigger>
+
+          <Select.Content data-testid="custom-select-content">
+            <Select.Viewport data-testid="custom-select-viewport">
+              <YStack padding="$2" gap="$2">
+                <Select.Item data-testid="select-red" value="red" index={0}>
+                  <XStack gap="$2" alignItems="center">
+                    <View
+                      width={20}
+                      height={20}
+                      backgroundColor="red"
+                      borderRadius="$2"
+                    />
+                    <Select.ItemText>Red</Select.ItemText>
+                  </XStack>
+                  <Select.ItemIndicator />
+                </Select.Item>
+                <Select.Item data-testid="select-green" value="green" index={1}>
+                  <XStack gap="$2" alignItems="center">
+                    <View
+                      width={20}
+                      height={20}
+                      backgroundColor="green"
+                      borderRadius="$2"
+                    />
+                    <Select.ItemText>Green</Select.ItemText>
+                  </XStack>
+                  <Select.ItemIndicator />
+                </Select.Item>
+                <Select.Item data-testid="select-blue" value="blue" index={2}>
+                  <XStack gap="$2" alignItems="center">
+                    <View
+                      width={20}
+                      height={20}
+                      backgroundColor="blue"
+                      borderRadius="$2"
+                    />
+                    <Select.ItemText>Blue</Select.ItemText>
+                  </XStack>
+                  <Select.ItemIndicator />
+                </Select.Item>
+              </YStack>
+            </Select.Viewport>
+          </Select.Content>
+        </Select>
+      </YStack>
+
+      {/* Multiple Selects for Tab Order Testing */}
+      <YStack gap="$2">
+        <Label>Multiple Selects</Label>
+        <XStack gap="$3" flexWrap="wrap">
+          <Select
+            value={value3}
+            onValueChange={setValue3}
+            size="$3"
+            renderValue={(v) => sizeLabels[v]}
+          >
+            <Select.Trigger data-testid="small-select-trigger" iconAfter={ChevronDown}>
+              <Select.Value placeholder="Size" />
+            </Select.Trigger>
+
+            <Select.Content data-testid="small-select-content">
+              <Select.Viewport>
+                <Select.Item data-testid="select-small" value="small" index={0}>
+                  <Select.ItemText>Small</Select.ItemText>
+                  <Select.ItemIndicator />
+                </Select.Item>
+                <Select.Item data-testid="select-medium" value="medium" index={1}>
+                  <Select.ItemText>Medium</Select.ItemText>
+                  <Select.ItemIndicator />
+                </Select.Item>
+                <Select.Item data-testid="select-large" value="large" index={2}>
+                  <Select.ItemText>Large</Select.ItemText>
+                  <Select.ItemIndicator />
+                </Select.Item>
+              </Select.Viewport>
+            </Select.Content>
+          </Select>
+
+          <Button data-testid="external-button">External Button</Button>
+        </XStack>
+      </YStack>
+
+      {/* Select with Default Value - tests keyboard nav with pre-selected item */}
+      <YStack gap="$2">
+        <Label htmlFor="default-value-select">Select with Default Value</Label>
+        <Select
+          id="default-value-select"
+          value={value4}
+          onValueChange={setValue4}
+          renderValue={(v) => fruitsAndVeggiesLabels[v]}
+        >
+          <Select.Trigger data-testid="default-select-trigger" iconAfter={ChevronDown}>
+            <Select.Value placeholder="Select an option" />
+          </Select.Trigger>
+
+          <Select.Content data-testid="default-select-content">
+            <Select.ScrollUpButton />
+            <Select.Viewport data-testid="default-select-viewport">
+              <Select.Group>
+                <Select.Label>Fruits</Select.Label>
+                <Select.Item data-testid="default-select-apple" value="apple" index={0}>
+                  <Select.ItemText>Apple</Select.ItemText>
+                  <Select.ItemIndicator />
+                </Select.Item>
+                <Select.Item data-testid="default-select-banana" value="banana" index={1}>
+                  <Select.ItemText>Banana</Select.ItemText>
+                  <Select.ItemIndicator />
+                </Select.Item>
+                <Select.Item data-testid="default-select-orange" value="orange" index={2}>
+                  <Select.ItemText>Orange</Select.ItemText>
+                  <Select.ItemIndicator />
+                </Select.Item>
+                <Select.Item data-testid="default-select-carrot" value="carrot" index={3}>
+                  <Select.ItemText>Carrot</Select.ItemText>
+                  <Select.ItemIndicator />
+                </Select.Item>
+                <Select.Item
+                  data-testid="default-select-broccoli"
+                  value="broccoli"
+                  index={4}
+                >
+                  <Select.ItemText>Broccoli</Select.ItemText>
+                  <Select.ItemIndicator />
+                </Select.Item>
+              </Select.Group>
+            </Select.Viewport>
+            <Select.ScrollDownButton />
+          </Select.Content>
+        </Select>
+      </YStack>
+
+      {/* Select with lazyMount - tests positioning with deferred rendering */}
+      <YStack gap="$2">
+        <Label htmlFor="lazy-select">Lazy Mount Select</Label>
+        <Select
+          id="lazy-select"
+          value={value5}
+          onValueChange={setValue5}
+          lazyMount
+          renderValue={(v) => fruitsAndVeggiesLabels[v]}
+        >
+          <Select.Trigger data-testid="lazy-select-trigger" iconAfter={ChevronDown}>
+            <Select.Value placeholder="Select an option" />
+          </Select.Trigger>
+
+          <Select.Content data-testid="lazy-select-content">
+            <Select.ScrollUpButton />
+            <Select.Viewport data-testid="lazy-select-viewport">
+              <Select.Group>
+                <Select.Label>Fruits</Select.Label>
+                <Select.Item data-testid="lazy-select-apple" value="apple" index={0}>
+                  <Select.ItemText>Apple</Select.ItemText>
+                  <Select.ItemIndicator />
+                </Select.Item>
+                <Select.Item data-testid="lazy-select-banana" value="banana" index={1}>
+                  <Select.ItemText>Banana</Select.ItemText>
+                  <Select.ItemIndicator />
+                </Select.Item>
+                <Select.Item data-testid="lazy-select-orange" value="orange" index={2}>
+                  <Select.ItemText>Orange</Select.ItemText>
+                  <Select.ItemIndicator />
+                </Select.Item>
+              </Select.Group>
+            </Select.Viewport>
+            <Select.ScrollDownButton />
+          </Select.Content>
+        </Select>
+      </YStack>
+    </YStack>
+  )
+}
+
+// Add missing import
+import { View } from '@hanzo/gui'

package/src/usecases/SelectRemount.tsx

@@ -0,0 +1,136 @@
+/**
+ * Test case for issue #1859: Select not working after remount
+ * https://github.com/hanzoai/gui/issues/1859
+ */
+
+import { Check, ChevronDown } from '@hanzogui/lucide-icons-2'
+import React from 'react'
+import { Adapt, Button, Select, Sheet, Text, XStack, YStack } from '@hanzo/gui'
+
+const items = [
+  { name: 'Apple' },
+  { name: 'Pear' },
+  { name: 'Blackberry' },
+  { name: 'Peach' },
+  { name: 'Apricot' },
+]
+
+// Helper to get item label from value - used by renderValue for SSR
+const getItemLabel = (value: string) =>
+  items.find((item) => item.name.toLowerCase() === value)?.name
+
+function SelectComponent({ id }: { id: string }) {
+  const [val, setVal] = React.useState('apple')
+
+  return (
+    <Select
+      value={val}
+      onValueChange={setVal}
+      disablePreventBodyScroll
+      renderValue={getItemLabel}
+      zIndex={200000}
+    >
+      <Select.Trigger
+        testID={`${id}-trigger`}
+        aria-label={`${id}-trigger`}
+        maxWidth={220}
+        iconAfter={ChevronDown}
+      >
+        <Select.Value placeholder="Select a fruit" />
+      </Select.Trigger>
+
+      <Adapt when={true} platform="touch">
+        <Sheet 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.Viewport minW={200}>
+          <Select.Group>
+            <Select.Label>Fruits</Select.Label>
+            {items.map((item, i) => (
+              <Select.Item
+                index={i}
+                key={item.name}
+                value={item.name.toLowerCase()}
+                testID={`${id}-option-${item.name.toLowerCase()}`}
+                aria-label={`${id}-option-${item.name.toLowerCase()}`}
+              >
+                <Select.ItemText>{item.name}</Select.ItemText>
+                <Select.ItemIndicator marginLeft="auto">
+                  <Check size={16} />
+                </Select.ItemIndicator>
+              </Select.Item>
+            ))}
+          </Select.Group>
+        </Select.Viewport>
+      </Select.Content>
+    </Select>
+  )
+}
+
+export function SelectRemount() {
+  const [mounted, setMounted] = React.useState(true)
+  const [key, setKey] = React.useState(0)
+
+  return (
+    <YStack padding="$4" gap="$4" flex={1}>
+      <XStack gap="$2">
+        <Button
+          testID="toggle-mount-button"
+          aria-label="toggle-mount-button"
+          onPress={() => setMounted((m) => !m)}
+          theme={mounted ? 'green' : 'red'}
+        >
+          {mounted ? 'Unmount' : 'Mount'}
+        </Button>
+
+        <Button
+          testID="remount-button"
+          aria-label="remount-button"
+          onPress={() => {
+            setMounted(false)
+            setTimeout(() => {
+              setKey((k) => k + 1)
+              setMounted(true)
+            }, 100)
+          }}
+        >
+          Remount
+        </Button>
+      </XStack>
+
+      {mounted && (
+        <YStack key={key} gap="$4">
+          <SelectComponent id="select-remount-test" />
+
+          {/* Second select to test multiple on same screen */}
+          <SelectComponent id="select-remount-test-2" />
+        </YStack>
+      )}
+
+      <YStack padding="$2" bg="$backgroundHover" borderRadius="$2">
+        <XStack gap="$2" width="100%">
+          <YStack
+            width={10}
+            height={10}
+            borderRadius={5}
+            bg={mounted ? '$green10' : '$red10'}
+          />
+          <Text>{mounted ? `Mounted (key: ${key})` : 'Unmounted'}</Text>
+        </XStack>
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/Shadows.tsx

@@ -0,0 +1,5 @@
+import { Square } from '@hanzo/gui'
+
+export function Shadows() {
+  return <Square id="shadowed" size={100} shadowColor="$shadowColor" shadowRadius="$10" />
+}