@hanzogui/kitchen-sink 3.0.5

package/src/usecases/KeyboardControllerTest.tsx

@@ -0,0 +1,146 @@
+/**
+ * Direct test of keyboard-controller's KeyboardAvoidingView
+ *
+ * Tests if KeyboardAvoidingView provides smooth keyboard animation
+ * without needing any special Sheet integration.
+ */
+import { useState } from 'react'
+import { TextInput, View, Text, StyleSheet, Platform } from 'react-native'
+
+// try to import keyboard-controller's KeyboardAvoidingView
+let KeyboardAvoidingView: any
+let KeyboardProvider: any
+let useReanimatedKeyboardAnimation: any
+let kbcAvailable = false
+
+try {
+  const rnkc = require('react-native-keyboard-controller')
+  KeyboardAvoidingView = rnkc.KeyboardAvoidingView
+  KeyboardProvider = rnkc.KeyboardProvider
+  useReanimatedKeyboardAnimation = rnkc.useReanimatedKeyboardAnimation
+  kbcAvailable = true
+} catch {
+  // keyboard-controller not available, use RN's built-in
+  KeyboardAvoidingView = require('react-native').KeyboardAvoidingView
+}
+
+// component to show animated keyboard height (if reanimated hook available)
+function KeyboardHeightDisplay() {
+  if (!useReanimatedKeyboardAnimation) {
+    return <Text style={styles.status}>useReanimatedKeyboardAnimation not available</Text>
+  }
+
+  try {
+    const { height, progress } = useReanimatedKeyboardAnimation()
+    // note: these are shared values, need Animated.Text to display
+    return (
+      <View style={styles.statusBox}>
+        <Text style={styles.status}>Reanimated hook available ✓</Text>
+        <Text style={styles.small}>(height/progress are Reanimated shared values)</Text>
+      </View>
+    )
+  } catch (e: any) {
+    return <Text style={styles.status}>Hook error: {e.message}</Text>
+  }
+}
+
+function TestContent() {
+  const [value, setValue] = useState('')
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+    >
+      <View style={styles.content}>
+        <Text style={styles.title}>KeyboardController Test</Text>
+
+        <Text style={[styles.status, { color: kbcAvailable ? 'green' : 'orange' }]}>
+          keyboard-controller: {kbcAvailable ? '✓ installed' : '✗ not found'}
+        </Text>
+
+        <KeyboardHeightDisplay />
+
+        <Text style={styles.instruction}>
+          Tap the input below - watch if the content moves smoothly with the keyboard.
+          {'\n\n'}
+          With keyboard-controller, this should be butter smooth (60/120 FPS). Without it,
+          you may see slight jank.
+        </Text>
+
+        <View style={styles.spacer} />
+
+        <View style={styles.inputContainer}>
+          <TextInput
+            style={styles.input}
+            placeholder="Tap here to show keyboard..."
+            value={value}
+            onChangeText={setValue}
+            testID="kbc-test-input"
+          />
+        </View>
+      </View>
+    </KeyboardAvoidingView>
+  )
+}
+
+export function KeyboardControllerTest() {
+  // wrap in KeyboardProvider if available
+  if (KeyboardProvider) {
+    return (
+      <KeyboardProvider>
+        <TestContent />
+      </KeyboardProvider>
+    )
+  }
+  return <TestContent />
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+  },
+  content: {
+    flex: 1,
+    padding: 20,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 16,
+  },
+  status: {
+    fontSize: 16,
+    marginBottom: 8,
+  },
+  statusBox: {
+    backgroundColor: '#e8f5e9',
+    padding: 12,
+    borderRadius: 8,
+    marginBottom: 16,
+  },
+  small: {
+    fontSize: 12,
+    color: '#666',
+  },
+  instruction: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 16,
+    lineHeight: 20,
+  },
+  spacer: {
+    flex: 1,
+  },
+  inputContainer: {
+    backgroundColor: 'white',
+    borderRadius: 8,
+    marginBottom: 20,
+  },
+  input: {
+    height: 50,
+    paddingHorizontal: 16,
+    fontSize: 16,
+  },
+})

package/src/usecases/ListItem.tsx

@@ -0,0 +1,123 @@
+import { H5, ListItem, Separator, View, Theme } from '@hanzo/gui'
+import { ChevronRight, Star, Trash } from '@hanzogui/lucide-icons-2'
+
+export const ThemedListItem = () => (
+  <View gap="$4">
+    <H5>Should change:</H5>
+
+    <ListItem
+      id="themed-list-item-default"
+      title="Default"
+      subTitle="Default list item"
+      icon={ChevronRight}
+      size="$3"
+      borderRadius="$3"
+    />
+
+    <Theme name="accent">
+      <ListItem
+        id="themed-list-item-accent"
+        title="Accent"
+        subTitle="Accent (contrasting) list item"
+        icon={ChevronRight}
+        size="$3"
+        borderRadius="$3"
+      />
+    </Theme>
+
+    <Separator />
+
+    <H5>Are fixed:</H5>
+
+    <Theme name="light">
+      <ListItem
+        id="themed-list-item-light"
+        title='<Theme ="light"/>'
+        subTitle="Forcing light theme"
+        icon={ChevronRight}
+        size="$3"
+        borderRadius="$3"
+        onPress={() => console.info('Light theme list item pressed')}
+      />
+    </Theme>
+
+    <Theme name="dark">
+      <ListItem
+        id="themed-list-item-dark"
+        title='<Theme ="dark"/>'
+        subTitle="Forcing dark theme"
+        icon={ChevronRight}
+        size="$3"
+        borderRadius="$3"
+        onPress={() => console.info('Dark theme list item pressed')}
+      />
+    </Theme>
+
+    <Theme name="light">
+      <Theme name="accent">
+        <ListItem
+          id="themed-list-item-light-accent"
+          title='<Theme name="accent">'
+          subTitle="light + accent = light_accent (contrasting)"
+          icon={ChevronRight}
+          size="$3"
+          borderRadius="$3"
+          onPress={() => console.info('Light theme accent list item pressed')}
+        />
+      </Theme>
+    </Theme>
+
+    <Theme name="dark">
+      <Theme name="accent">
+        <ListItem
+          id="themed-list-item-dark-accent"
+          title='<Theme name="accent">'
+          subTitle="dark + accent = dark_accent (contrasting)"
+          icon={ChevronRight}
+          size="$3"
+          borderRadius="$3"
+          onPress={() => console.info('Dark theme accent list item pressed')}
+        />
+      </Theme>
+    </Theme>
+
+    <Separator />
+
+    <H5>Variant (outlined):</H5>
+
+    <ListItem
+      id="themed-list-item-outlined"
+      variant="outlined"
+      title="Outlined"
+      subTitle="Using variant prop"
+      icon={Star}
+      size="$3"
+      borderRadius="$3"
+    />
+
+    <Separator />
+
+    <H5>Apply (context):</H5>
+
+    <ListItem.Apply color="$red10">
+      <ListItem
+        id="themed-list-item-apply-color"
+        title="With Apply color"
+        subTitle="Icon inherits color from context"
+        icon={Trash}
+        size="$3"
+        borderRadius="$3"
+      />
+    </ListItem.Apply>
+
+    <ListItem.Apply variant="outlined" size="$2">
+      <ListItem
+        id="themed-list-item-apply-variant"
+        title="With Apply variant"
+        subTitle="Outlined via context"
+        icon={Star}
+        borderRadius="$3"
+      />
+    </ListItem.Apply>
+  </View>
+)

package/src/usecases/MediaQueriesV5.tsx

@@ -0,0 +1,137 @@
+import { Text, useMedia, YStack, XStack } from '@hanzo/gui'
+
+/**
+ * Test case for v5 media queries
+ *
+ * v5 uses mobile-first (minWidth) for base queries and desktop-first (maxWidth) for max-* queries
+ *
+ * Breakpoints:
+ * - xxxs: 260, xxs: 340, xs: 460, sm: 640, md: 768, lg: 1024, xl: 1280, xxl: 1536
+ *
+ * Width queries (mobile-first, minWidth):
+ * - $sm, $md, $lg, etc. - apply at minWidth and above
+ * - Larger breakpoints override smaller ones
+ *
+ * Max-width queries (desktop-first, maxWidth):
+ * - $max-sm, $max-md, $max-lg, etc. - apply at maxWidth and below
+ * - Smaller breakpoints override larger ones
+ *
+ * Height queries (minHeight):
+ * - $height-sm, $height-md, $height-lg, etc.
+ */
+export const MediaQueriesV5 = () => {
+  const media = useMedia()
+
+  return (
+    <YStack p="$4" gap="$4">
+      <Text fontWeight="bold">v5 Media Query Test</Text>
+      <Text fontSize={12} color="$color10">
+        Use ?v5config in URL to test with v5 config
+      </Text>
+
+      {/* Display current media state */}
+      <YStack gap="$1">
+        <Text testID="media-sm">{`sm (≥640): ${media.sm}`}</Text>
+        <Text testID="media-md">{`md (≥768): ${media.md}`}</Text>
+        <Text testID="media-lg">{`lg (≥1024): ${media.lg}`}</Text>
+        <Text testID="media-max-sm">{`max-sm (≤640): ${media['max-sm']}`}</Text>
+        <Text testID="media-max-md">{`max-md (≤768): ${media['max-md']}`}</Text>
+        <Text testID="media-max-lg">{`max-lg (≤1024): ${media['max-lg']}`}</Text>
+      </YStack>
+
+      {/* Test 1: Mobile-first (minWidth) - larger should win */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">Test 1: Mobile-first (larger wins)</Text>
+        <Text fontSize={12}>On large screen: should be green ($lg wins over $sm)</Text>
+        <YStack
+          testID="test-mobile-first"
+          height={60}
+          width={100}
+          backgroundColor="red"
+          $sm={{ backgroundColor: 'yellow' }}
+          $md={{ backgroundColor: 'orange' }}
+          $lg={{ backgroundColor: 'green' }}
+        />
+      </YStack>
+
+      {/* Test 2: Desktop-first (maxWidth) - smaller should win */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">Test 2: Desktop-first (smaller wins)</Text>
+        <Text fontSize={12}>
+          On small screen: should be yellow ($max-sm wins over $max-lg)
+        </Text>
+        <YStack
+          testID="test-desktop-first"
+          height={60}
+          width={100}
+          backgroundColor="red"
+          {...{
+            '$max-lg': { backgroundColor: 'green' },
+            '$max-md': { backgroundColor: 'orange' },
+            '$max-sm': { backgroundColor: 'yellow' },
+          }}
+        />
+      </YStack>
+
+      {/* Test 3: Height queries */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">Test 3: Height queries</Text>
+        <Text fontSize={12}>Taller screens get larger breakpoints</Text>
+        <YStack
+          testID="test-height"
+          height={60}
+          width={100}
+          backgroundColor="red"
+          {...{
+            '$height-xs': { backgroundColor: 'yellow' },
+            '$height-sm': { backgroundColor: 'orange' },
+            '$height-md': { backgroundColor: 'green' },
+          }}
+        />
+      </YStack>
+
+      {/* Test 4: Combined width queries */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">Test 4: All breakpoints</Text>
+        <XStack gap="$2" flexWrap="wrap">
+          <YStack
+            testID="test-sm-only"
+            height={40}
+            width={40}
+            backgroundColor="gray"
+            $sm={{ backgroundColor: 'green' }}
+          >
+            <Text fontSize={10}>sm</Text>
+          </YStack>
+          <YStack
+            testID="test-md-only"
+            height={40}
+            width={40}
+            backgroundColor="gray"
+            $md={{ backgroundColor: 'green' }}
+          >
+            <Text fontSize={10}>md</Text>
+          </YStack>
+          <YStack
+            testID="test-lg-only"
+            height={40}
+            width={40}
+            backgroundColor="gray"
+            $lg={{ backgroundColor: 'green' }}
+          >
+            <Text fontSize={10}>lg</Text>
+          </YStack>
+          <YStack
+            testID="test-xl-only"
+            height={40}
+            width={40}
+            backgroundColor="gray"
+            $xl={{ backgroundColor: 'green' }}
+          >
+            <Text fontSize={10}>xl</Text>
+          </YStack>
+        </XStack>
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/MediaQueryGtMd.tsx

@@ -0,0 +1,73 @@
+import { Text, useMedia, YStack } from '@hanzo/gui'
+
+/**
+ * Test case for media query regression bug (started in 1.132.17)
+ *
+ * Bug: On small screens (iPhone), $gtMd styles incorrectly apply when they shouldn't.
+ * The $md styles should apply on mobile, NOT the $gtMd styles.
+ *
+ * Breakpoints (from @hanzogui/config):
+ * - md: maxWidth 1020 (matches when width <= 1020)
+ * - gtMd: minWidth 1021 (matches when width > 1020)
+ *
+ * Expected behavior on iPhone (~390px width):
+ * - Test 1: backgroundColor should be 'yellow' from $md (gtMd doesn't match)
+ * - Test 2: backgroundColor should be 'red' (gtMd doesn't match, stays default)
+ * - Test 3: backgroundColor should be 'yellow' from $md
+ * - Test 4: backgroundColor should be 'yellow' from $md (md has higher priority than sm)
+ */
+export const MediaQueryGtMd = () => {
+  const media = useMedia()
+
+  return (
+    <YStack p="$4" gap="$4">
+      {/* Display current media state for Detox verification */}
+      <Text testID="media-state-sm">{`sm: ${media.sm}`}</Text>
+      <Text testID="media-state-md">{`md: ${media.md}`}</Text>
+      <Text testID="media-state-gtMd">{`gtMd: ${media.gtMd}`}</Text>
+
+      {/* Test 1: Both $md and $gtMd - should respect breakpoint boundaries */}
+      <YStack
+        id="media-test-both"
+        testID="media-test-both"
+        height={100}
+        width={100}
+        backgroundColor="red"
+        $md={{ backgroundColor: 'yellow' }}
+        $gtMd={{ backgroundColor: 'green' }}
+      />
+
+      {/* Test 2: Only $gtMd - should NOT apply on small screens */}
+      <YStack
+        id="media-test-gtmd-only"
+        testID="media-test-gtmd-only"
+        height={100}
+        width={100}
+        backgroundColor="red"
+        $gtMd={{ backgroundColor: 'green' }}
+      />
+
+      {/* Test 3: Only $md - should apply on small screens */}
+      <YStack
+        id="media-test-md-only"
+        testID="media-test-md-only"
+        height={100}
+        width={100}
+        backgroundColor="red"
+        $md={{ backgroundColor: 'yellow' }}
+      />
+
+      {/* Test 4: $sm, $md, and $gtMd together */}
+      <YStack
+        id="media-test-all"
+        testID="media-test-all"
+        height={100}
+        width={100}
+        backgroundColor="red"
+        $sm={{ backgroundColor: 'blue' }}
+        $md={{ backgroundColor: 'yellow' }}
+        $gtMd={{ backgroundColor: 'green' }}
+      />
+    </YStack>
+  )
+}

package/src/usecases/MenuAboveDialogCase.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react'
+import { Button, Dialog, Paragraph, YStack, XStack } from '@hanzo/gui'
+import { Menu } from '@hanzogui/menu'
+
+// tests that Menu renders above Dialog when opened from inside Dialog
+export function MenuAboveDialogCase() {
+  const [dialogOpen, setDialogOpen] = useState(false)
+
+  return (
+    <YStack padding="$4" gap="$4">
+      <Paragraph>
+        Test: Open dialog, then open menu from inside. Menu should appear above dialog
+        overlay.
+      </Paragraph>
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <Dialog.Trigger asChild>
+          <Button testID="dialog-trigger">Open Dialog</Button>
+        </Dialog.Trigger>
+
+        <Dialog.Portal>
+          <Dialog.Overlay testID="dialog-overlay" key="overlay" opacity={0.5} />
+          <Dialog.Content testID="dialog-content" bordered elevate key="content">
+            <YStack gap="$3" padding="$4" minWidth={300}>
+              <Dialog.Title>Dialog with Menu</Dialog.Title>
+              <Dialog.Description>
+                Click the menu below. It should appear above this dialog.
+              </Dialog.Description>
+
+              <Menu>
+                <Menu.Trigger asChild>
+                  <Button testID="menu-trigger">Open Menu</Button>
+                </Menu.Trigger>
+
+                <Menu.Portal>
+                  <Menu.Content
+                    testID="menu-content"
+                    p="$2"
+                    minWidth={180}
+                    bg="$background"
+                    borderWidth={1}
+                    borderColor="$borderColor"
+                    elevation="$4"
+                  >
+                    <Menu.Item testID="menu-item-1">
+                      <Menu.ItemTitle>Item 1</Menu.ItemTitle>
+                    </Menu.Item>
+                    <Menu.Item testID="menu-item-2">
+                      <Menu.ItemTitle>Item 2</Menu.ItemTitle>
+                    </Menu.Item>
+                    <Menu.Item testID="menu-item-3">
+                      <Menu.ItemTitle>Item 3</Menu.ItemTitle>
+                    </Menu.Item>
+                  </Menu.Content>
+                </Menu.Portal>
+              </Menu>
+
+              <XStack gap="$3" justifyContent="flex-end">
+                <Dialog.Close asChild>
+                  <Button testID="dialog-close">Close</Button>
+                </Dialog.Close>
+              </XStack>
+            </YStack>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog>
+
+      <YStack gap="$2">
+        <Paragraph testID="dialog-status">
+          Dialog: {dialogOpen ? 'open' : 'closed'}
+        </Paragraph>
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/MenuAccessibilityCase.tsx

@@ -0,0 +1,133 @@
+import { ChevronRight, FilePlus, Settings, Trash2 } from '@hanzogui/lucide-icons-2'
+import { Menu } from '@hanzogui/menu'
+import React from 'react'
+import { Button, YStack } from '@hanzo/gui'
+
+/**
+ * Menu accessibility test case
+ * Tests:
+ * - Trigger is focusable via tab
+ * - Menu opens on Enter/Space and focuses first item
+ * - Arrow keys navigate between items
+ * - Escape closes menu and returns focus to trigger
+ * - Submenu escape closes only submenu first
+ */
+
+export function MenuAccessibilityCase() {
+  const [subMenuOpen, setSubMenuOpen] = React.useState(false)
+
+  return (
+    <YStack padding="$4" gap="$4">
+      {/* focusable element before menu to test tab order */}
+      <Button data-testid="before-button">Before</Button>
+
+      <Menu placement="bottom-start">
+        <Menu.Trigger asChild>
+          <Button data-testid="menu-trigger" size="$4">
+            Open Menu
+          </Button>
+        </Menu.Trigger>
+
+        <Menu.Portal zIndex={100}>
+          <Menu.Content
+            data-testid="menu-content"
+            p="$2"
+            minW={200}
+            borderWidth={1}
+            borderColor="$borderColor"
+            elevation="$3"
+          >
+            <Menu.Item
+              data-testid="menu-item-1"
+              key="item-1"
+              textValue="Settings"
+              style={{ paddingHorizontal: 8, paddingVertical: 6, borderRadius: 4 }}
+              focusStyle={{ bg: '$backgroundHover' }}
+            >
+              <Settings size={14} />
+              <Menu.ItemTitle marginLeft="$2">Settings</Menu.ItemTitle>
+            </Menu.Item>
+
+            <Menu.Item
+              data-testid="menu-item-2"
+              key="item-2"
+              textValue="Profile"
+              style={{ paddingHorizontal: 8, paddingVertical: 6, borderRadius: 4 }}
+              focusStyle={{ bg: '$backgroundHover' }}
+            >
+              <Menu.ItemTitle>Profile</Menu.ItemTitle>
+            </Menu.Item>
+
+            <Menu.Item
+              data-testid="menu-item-3"
+              key="item-3"
+              textValue="Preferences"
+              style={{ paddingHorizontal: 8, paddingVertical: 6, borderRadius: 4 }}
+              focusStyle={{ bg: '$backgroundHover' }}
+            >
+              <Menu.ItemTitle>Preferences</Menu.ItemTitle>
+            </Menu.Item>
+
+            <Menu.Separator />
+
+            {/* submenu for testing nested escape behavior */}
+            <Menu.Sub
+              open={subMenuOpen}
+              onOpenChange={setSubMenuOpen}
+              placement="right-start"
+            >
+              <Menu.SubTrigger
+                data-testid="submenu-trigger"
+                key="actions"
+                justify="space-between"
+                textValue="Actions"
+                style={{ paddingHorizontal: 8, paddingVertical: 6, borderRadius: 4 }}
+                focusStyle={{ bg: '$backgroundHover' }}
+              >
+                <Menu.ItemTitle>Actions</Menu.ItemTitle>
+                <ChevronRight size={12} color="$color10" />
+              </Menu.SubTrigger>
+
+              <Menu.Portal zIndex={200}>
+                <Menu.SubContent
+                  data-testid="submenu-content"
+                  elevation="$3"
+                  minW={160}
+                  bg="$background"
+                  p="$2"
+                  borderWidth={1}
+                  borderColor="$borderColor"
+                >
+                  <Menu.Item
+                    data-testid="submenu-item-1"
+                    key="create"
+                    textValue="Create new"
+                    style={{ paddingHorizontal: 8, paddingVertical: 6, borderRadius: 4 }}
+                    focusStyle={{ bg: '$backgroundHover' }}
+                  >
+                    <FilePlus size={14} />
+                    <Menu.ItemTitle marginLeft="$2">Create new</Menu.ItemTitle>
+                  </Menu.Item>
+
+                  <Menu.Item
+                    data-testid="submenu-item-2"
+                    key="delete"
+                    textValue="Delete all"
+                    style={{ paddingHorizontal: 8, paddingVertical: 6, borderRadius: 4 }}
+                    focusStyle={{ bg: '$backgroundHover' }}
+                  >
+                    <Trash2 size={14} />
+                    <Menu.ItemTitle marginLeft="$2">Delete all</Menu.ItemTitle>
+                  </Menu.Item>
+                </Menu.SubContent>
+              </Menu.Portal>
+            </Menu.Sub>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+
+      {/* focusable element after menu to test tab order */}
+      <Button data-testid="after-button">After</Button>
+    </YStack>
+  )
+}