@hanzogui/kitchen-sink 3.0.5

package/src/TestNativeSheet.tsx

@@ -0,0 +1,100 @@
+import { ChevronDown, ChevronUp } from '@hanzogui/lucide-icons-2'
+import type { SheetProps } from '@hanzogui/sheet'
+import { Sheet } from '@hanzogui/sheet'
+import React from 'react'
+import { Button, H2, Input, Paragraph, XStack, YStack } from '@hanzo/gui'
+
+export const NativeSheetDemo = () => {
+  const [position, setPosition] = React.useState(0)
+  const [open, setOpen] = React.useState(false)
+  const [innerOpen, setInnerOpen] = React.useState(false)
+
+  return (
+    <>
+      <YStack gap="$4">
+        <XStack gap="$4" $sm={{ flexDirection: 'column', alignItems: 'center' }}>
+          <Button onPress={() => setOpen(true)}>Open</Button>
+        </XStack>
+      </YStack>
+
+      <Sheet
+        native
+        modal
+        open={open}
+        onOpenChange={setOpen}
+        snapPoints={[85, 50, 25]}
+        snapPointsMode="percent"
+        dismissOnSnapToBottom
+        position={position}
+        onPositionChange={setPosition}
+        zIndex={100_000}
+        transition="medium"
+      >
+        <Sheet.Overlay
+          transition="lazy"
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+
+        <Sheet.Handle />
+        <Sheet.Frame padding="$4" justifyContent="center" alignItems="center" gap="$5">
+          <Button size="$6" circular icon={ChevronDown} onPress={() => setOpen(false)} />
+          <Input width={200} />
+          <InnerSheet open={innerOpen} onOpenChange={setInnerOpen} />
+          <Button
+            size="$6"
+            circular
+            icon={ChevronUp}
+            onPress={() => setInnerOpen(true)}
+          />
+        </Sheet.Frame>
+      </Sheet>
+    </>
+  )
+}
+
+function InnerSheet(props: SheetProps) {
+  return (
+    <Sheet
+      native
+      transition="medium"
+      modal
+      snapPoints={[90]}
+      dismissOnSnapToBottom
+      {...props}
+    >
+      <Sheet.Overlay
+        transition="medium"
+        enterStyle={{ opacity: 0 }}
+        exitStyle={{ opacity: 0 }}
+      />
+
+      <Sheet.Handle />
+      <Sheet.Frame flex={1} justifyContent="center" alignItems="center" gap="$5">
+        <Sheet.ScrollView>
+          <YStack p="$5" gap="$8">
+            <Button
+              size="$6"
+              circular
+              alignSelf="center"
+              icon={ChevronDown}
+              onPress={() => props.onOpenChange?.(false)}
+            />
+
+            <H2>Hello world</H2>
+            {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
+              <Paragraph key={i} size="$8">
+                Eu officia sunt ipsum nisi dolore labore est laborum laborum in esse ad
+                pariatur. Dolor excepteur esse deserunt voluptate labore ea. Exercitation
+                ipsum deserunt occaecat cupidatat consequat est adipisicing velit
+                cupidatat ullamco veniam aliquip reprehenderit officia. Officia labore
+                culpa ullamco velit. In sit occaecat velit ipsum fugiat esse aliqua dolor
+                sint.
+              </Paragraph>
+            ))}
+          </YStack>
+        </Sheet.ScrollView>
+      </Sheet.Frame>
+    </Sheet>
+  )
+}

package/src/components/TimedRender.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+
+export function TimedRender(props) {
+  const [start] = React.useState(performance.now())
+  const [end, setEnd] = React.useState(0)
+
+  React.useLayoutEffect(() => {
+    setEnd(performance.now() - start)
+  }, [start])
+
+  return (
+    <View style={{ maxWidth: '100%' }}>
+      {!!end && <Text>Took {end}ms</Text>}
+      <View style={{ flexDirection: 'column' }}>{props.children}</View>
+    </View>
+  )
+}

package/src/constants/test-ids.ts

@@ -0,0 +1,52 @@
+export const TEST_IDS = {
+  themeInfo: 'theme-info',
+  staticSquare: 'static-square',
+  dynamicSquare: 'dynamic-square',
+  changeThemeButton: 'change-theme-button',
+  // Theme Reset test IDs
+  resetButton1: 'reset-button-1',
+  resetButton2: 'reset-button-2',
+  resetSquare1: 'reset-square-1',
+  resetSquare2: 'reset-square-2',
+  darkButton: 'dark-button',
+  // Nested Theme test IDs (Issue #3673)
+  nestedThemeDirect: 'nested-theme-direct',
+  nestedThemeNested: 'nested-theme-nested',
+  nestedThemeWithParent: 'nested-theme-with-parent',
+  nestedThemeRedDirect: 'nested-theme-red-direct',
+  nestedThemeRedNested: 'nested-theme-red-nested',
+  nestedThemeNoColor: 'nested-theme-no-color',
+  // Color Token Fallback test IDs (Issue #3620)
+  colorTokenFallbackThemeValue: 'color-token-fallback-theme-value',
+  colorTokenFallbackTokenValue: 'color-token-fallback-token-value',
+  // Theme Component Resolution test IDs (commit 5839319146 goals)
+  // Goal 1a: Explicit scheme override
+  themeExplicitSchemeDirect: 'theme-explicit-scheme-direct',
+  themeExplicitSchemeNested: 'theme-explicit-scheme-nested',
+  // Goal 1b: Inherit scheme for component
+  themeInheritSchemeDirect: 'theme-inherit-scheme-direct',
+  themeInheritSchemeNested: 'theme-inherit-scheme-nested',
+  // Goal 2: Component-only preserves sub-theme (no backtracking)
+  themeSurface1Direct: 'theme-surface1-direct',
+  themeSurface1WithComponent: 'theme-surface1-with-component',
+  // Nested Surface test IDs
+  nestedSurface1To3Direct: 'nested-surface-1-to-3-direct',
+  nestedSurface1To3Nested: 'nested-surface-1-to-3-nested',
+  // Theme Mutation test IDs (DynamicColorIOS force update fix)
+  themeMutationSquare: 'theme-mutation-square',
+  themeMutationButton: 'theme-mutation-button',
+  themeMutationColorText: 'theme-mutation-color-text',
+  // Theme Shallow test IDs
+  themeShallowNormal: 'theme-shallow-normal',
+  themeShallowEnabled: 'theme-shallow-enabled',
+  themeShallowContainer: 'theme-shallow-container',
+  themeShallowInner: 'theme-shallow-inner',
+  // V5 Theme Builder Accent test IDs
+  accentThemeBackground: 'accent-theme-background',
+  accentThemeColor: 'accent-theme-color',
+  accentThemeButton: 'accent-theme-button',
+  accentPropButton: 'accent-prop-button',
+  accentBgToken: 'accent-bg-token',
+  baseBackground: 'base-background',
+  baseButton: 'base-button',
+} as const

package/src/features/demos/demo-screen.tsx

@@ -0,0 +1,72 @@
+import * as Demos from '@hanzogui/demos'
+import { createParam } from 'solito'
+import { H1, Spacer, YStack } from '@hanzo/gui'
+
+const { useParam } = createParam<{ id: string }>()
+
+const nameMap = {
+  Inputs: 'Inputs',
+}
+
+const NativeDemos = {
+  ...Demos,
+  // DrawerDemo,
+  // no children
+  AnimationsDemo: (props) => (
+    <>
+      <Demos.AnimationsDemo {...props}>
+        <></>
+      </Demos.AnimationsDemo>
+      <Spacer />
+    </>
+  ),
+
+  AnimatePresenceDemo: (props) => {
+    return (
+      <Demos.AnimationsEnterDemo>
+        <></>
+      </Demos.AnimationsEnterDemo>
+    )
+  },
+
+  ThemesDemo: () => {
+    return (
+      <YStack gap="$4">
+        <Demos.AddThemeDemo />
+        <Demos.UpdateThemeDemo />
+      </YStack>
+    )
+  },
+}
+
+export function DemoScreen() {
+  const [id] = useParam('id')
+  const name = id!
+    .split('-')
+    .map((segment) => {
+      return segment[0].toUpperCase() + segment.slice(1)
+    })
+    .join('')
+
+  const demoName = `${nameMap[name] || name}Demo`
+  const DemoComponent = NativeDemos[demoName] ?? NotFound
+
+  return (
+    <YStack
+      outlineStyle="solid"
+      outlineColor="red"
+      outlineWidth="$2"
+      flex={1}
+      justify="center"
+      items="center"
+      bg="$background"
+      gap="$4"
+    >
+      <YStack minW={200} maxW={600} items="center" p="$10" rounded="$6">
+        <DemoComponent />
+      </YStack>
+    </YStack>
+  )
+}
+
+const NotFound = () => <H1>Not found!</H1>

package/src/features/home/ColorSchemeListItem.tsx

@@ -0,0 +1,41 @@
+import type { ListItemProps } from '@hanzo/gui'
+import { ListItem, SizableText, View, XStack } from '@hanzo/gui'
+import { Pressable } from 'react-native'
+import { useThemeControl, type ThemeMode } from '../../useKitchenSinkTheme'
+
+const modes: ThemeMode[] = ['system', 'light', 'dark']
+const modeLabels: Record<ThemeMode, string> = {
+  system: '⚙️ System',
+  light: '☀️ Light',
+  dark: '🌙 Dark',
+}
+
+export const ColorSchemeListItem = (props: ListItemProps) => {
+  return (
+    <ListItem {...props} bg="$color1" paddingVertical={0}>
+      <ListItem.Text>Theme</ListItem.Text>
+      <View flex={1} />
+      <ColorSchemeToggle />
+    </ListItem>
+  )
+}
+
+export const ColorSchemeToggle = () => {
+  const { mode, set } = useThemeControl()
+
+  const cycleMode = () => {
+    const currentIndex = modes.indexOf(mode)
+    const nextIndex = (currentIndex + 1) % modes.length
+    set(modes[nextIndex])
+  }
+
+  return (
+    <Pressable onPress={cycleMode}>
+      <XStack items="center" px="$2" py="$1" rounded="$2">
+        <SizableText size="$3" fontWeight="600">
+          {modeLabels[mode]}
+        </SizableText>
+      </XStack>
+    </Pressable>
+  )
+}

package/src/features/home/TestBuildAButton.tsx

@@ -0,0 +1,102 @@
+import { getSize, getSpace } from '@hanzogui/get-token'
+import { Moon } from '@hanzogui/lucide-icons-2'
+import type { GetProps, SizeTokens } from '@hanzogui/web'
+import {
+  View,
+  Text,
+  createStyledContext,
+  styled,
+  useTheme,
+  withStaticProperties,
+} from '@hanzogui/web'
+import React from 'react'
+
+export const TestBuildAButton = () => {
+  return (
+    <>
+      {new Array(1).fill(0).map((i) => (
+        <Button2 key={i}>
+          <Button2.Text>hi</Button2.Text>
+          <Button2.Icon>
+            <Moon />
+          </Button2.Icon>
+        </Button2>
+      ))}
+    </>
+  )
+}
+
+export const ButtonContext = createStyledContext({
+  size: '$4' as SizeTokens,
+})
+
+export const ButtonFrame = styled(View, {
+  name: 'Button',
+  context: ButtonContext,
+  backgroundColor: '$background',
+  alignItems: 'center',
+  flexDirection: 'row',
+
+  hoverStyle: {
+    backgroundColor: '$backgroundHover',
+  },
+
+  pressStyle: {
+    backgroundColor: '$backgroundPress',
+  },
+
+  variants: {
+    size: {
+      '...size': (name, { tokens }) => {
+        return {
+          height: tokens.size[name],
+          borderRadius: tokens.radius[name],
+          gap: tokens.space[name].val * 0.2,
+          paddingHorizontal: getSpace(name, {
+            shift: -1,
+          }),
+        }
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    size: '$4',
+  },
+})
+
+type ButtonProps = GetProps<typeof ButtonFrame>
+
+export const ButtonText = styled(Text, {
+  name: 'ButtonText',
+  context: ButtonContext,
+  color: '$color',
+  userSelect: 'none',
+
+  variants: {
+    size: {
+      '...fontSize': (name, { font }) => ({
+        fontSize: font?.size[name],
+      }),
+    },
+  } as const,
+})
+
+const ButtonIcon = (props: { children: any }) => {
+  // @ts-ignore
+  const { size } = React.useContext(ButtonContext)
+  const smaller = getSize(size, {
+    shift: -2,
+  })
+  const theme = useTheme()
+  return React.cloneElement(props.children, {
+    size: smaller.val * 0.5,
+    color: theme.color.get(),
+  })
+}
+
+export const Button2 = withStaticProperties(ButtonFrame, {
+  Props: ButtonContext.Provider,
+  Text: ButtonText,
+  Icon: ButtonIcon,
+})

package/src/features/home/screen.tsx

@@ -0,0 +1,285 @@
+import { ChevronRight } from '@hanzogui/lucide-icons-2'
+import { getGestureHandler } from '@hanzogui/native'
+import { useState } from 'react'
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native'
+import type { UseLinkProps } from 'solito/link'
+import { useLink } from 'solito/link'
+import type { ListItemProps } from '@hanzo/gui'
+import { Button, H1, ListItem, Paragraph, YGroup, YStack } from '@hanzo/gui'
+import * as TestCases from '../../usecases'
+
+const testCaseNames = Object.keys(TestCases)
+
+// grid of test case buttons for fast detox navigation
+// uses 44x44 buttons (iOS recommended min tap target) for reliable tap detection
+const BUTTON_SIZE = 44
+const BUTTONS_PER_ROW = 8
+
+function QuickNavItem({ name, index }: { name: string; index: number }) {
+  const linkProps = useLink({ href: `/test/${name}` })
+  // alternate colors for visibility
+  const colors = ['#93c5fd', '#86efac', '#fdba74', '#c4b5fd', '#f9a8d4', '#fde047']
+  const bg = colors[index % colors.length]
+
+  return (
+    <TouchableOpacity
+      testID={`detox-nav-${name}`}
+      style={{
+        width: BUTTON_SIZE,
+        height: BUTTON_SIZE,
+        backgroundColor: bg,
+        borderWidth: 1,
+        borderColor: 'rgba(0,0,0,0.1)',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+      onPress={linkProps.onPress}
+      activeOpacity={0.7}
+    >
+      <Text style={{ fontSize: 16, fontWeight: '700', color: '#333' }}>{index + 1}</Text>
+    </TouchableOpacity>
+  )
+}
+
+function TestCasesSection() {
+  const [expanded, setExpanded] = useState(false)
+
+  return (
+    <YStack gap="$2">
+      <Button
+        testID="toggle-test-cases"
+        size="$3"
+        onPress={() => {
+          setExpanded(!expanded)
+        }}
+        theme="gray"
+      >
+        {`${expanded ? 'Hide' : 'Show'} Quick Test Links (${testCaseNames.length})`}
+      </Button>
+
+      {expanded && (
+        <View
+          testID="detox-quick-nav"
+          style={{
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            width: BUTTONS_PER_ROW * BUTTON_SIZE,
+          }}
+        >
+          {testCaseNames.map((name, index) => (
+            <QuickNavItem key={name} name={name} index={index} />
+          ))}
+        </View>
+      )}
+    </YStack>
+  )
+}
+
+export function HomeScreen() {
+  const gestureHandlerEnabled = getGestureHandler().isEnabled
+
+  return (
+    <ScrollView testID="home-scroll-view">
+      <YStack bg="$color2" p="$3" pt="$6" pb="$8" flex={1} gap="$4">
+        <H1 fontFamily="$heading" size="$9">
+          Kitchen Sink
+        </H1>
+
+        <Paragraph size="$2" color={gestureHandlerEnabled ? '$green10' : '$red10'}>
+          RNGH: {gestureHandlerEnabled ? '✓ enabled' : '✗ disabled'}
+        </Paragraph>
+
+        {/* Collapsible quick access to test cases for Detox */}
+        <TestCasesSection />
+
+        {/* Quick access to RNGH test case */}
+        <YGroup size="$4">
+          <YGroup.Item>
+            <LinkListItem
+              bg="$blue3"
+              href="/test/SheetScrollableDrag"
+              pressStyle={{ backgroundColor: '$blue4' }}
+              size="$5"
+              testID="home-sheet-scroll-test"
+            >
+              🧪 Sheet + ScrollView Test (RNGH)
+            </LinkListItem>
+          </YGroup.Item>
+          <YGroup.Item>
+            <LinkListItem
+              bg="$green3"
+              href="/test/SheetKeyboardDragCase"
+              pressStyle={{ backgroundColor: '$green4' }}
+              size="$5"
+              testID="home-sheet-keyboard-test"
+            >
+              ⌨️ Sheet + Keyboard Test
+            </LinkListItem>
+          </YGroup.Item>
+          <YGroup.Item>
+            <LinkListItem
+              bg="$purple3"
+              href="/test/ActionsSheetComparison"
+              pressStyle={{ backgroundColor: '$purple4' }}
+              size="$5"
+            >
+              🔄 Actions Sheet Comparison
+            </LinkListItem>
+          </YGroup.Item>
+        </YGroup>
+
+        <YStack gap="$4" maxW={600}>
+          {demos.map(({ pages }, i) => {
+            return (
+              <YGroup key={i} size="$4">
+                {pages.map((page) => {
+                  const route = page?.route
+
+                  if (!route) return null
+
+                  return (
+                    <YGroup.Item key={route}>
+                      <LinkListItem
+                        bg="$color1"
+                        href={route}
+                        pressStyle={{ backgroundColor: '$color2' }}
+                        size="$4"
+                        testID={(page as any).testID}
+                      >
+                        {page.title}
+                      </LinkListItem>
+                    </YGroup.Item>
+                  )
+                })}
+              </YGroup>
+            )
+          })}
+        </YStack>
+      </YStack>
+    </ScrollView>
+  )
+}
+
+const LinkListItem = ({
+  children,
+  href,
+  as,
+  shallow,
+  ...props
+}: UseLinkProps & ListItemProps) => {
+  const linkProps = useLink({ href, as, shallow })
+
+  const handlePress = () => {
+    const onPress = linkProps?.onPress
+    if (onPress) {
+      try {
+        onPress()
+      } catch (error) {
+        console.info('error: ', error)
+      }
+    }
+  }
+
+  return (
+    <ListItem
+      {...linkProps}
+      onPress={handlePress}
+      {...props}
+      iconAfter={<ChevronRight color="$color10" />}
+    >
+      {children}
+    </ListItem>
+  )
+}
+
+const demos = [
+  {
+    pages: [
+      { title: 'Sandbox', route: '/sandbox' },
+      { title: 'Benchmark', route: '/test/Benchmark' },
+      {
+        title: 'Test Cases',
+        route: '/tests',
+        testID: 'home-test-cases-link',
+      },
+    ],
+  },
+  {
+    pages: [
+      { title: 'XStack, YStack', route: '/demo/stacks' },
+      { title: 'Headings', route: '/demo/headings' },
+      { title: 'Paragraph', route: '/demo/text' },
+      { title: 'Animations', route: '/demo/animations' },
+      { title: 'Animate Presence', route: '/demo/animate-presence' },
+      { title: 'Animations Delay', route: '/demo/animations-delay' },
+      { title: 'Themes', route: '/demo/themes' },
+    ],
+  },
+
+  {
+    label: 'Menus',
+    pages: [
+      { title: 'Menu', route: '/demo/menu' },
+      { title: 'ContextMenu', route: '/demo/context-menu' },
+    ],
+  },
+
+  {
+    label: 'Panels',
+    pages: [
+      { title: 'AlertDialog', route: '/demo/alert-dialog' },
+      { title: 'Dialog', route: '/demo/dialog' },
+      { title: 'Popover', route: '/demo/popover' },
+      { title: 'Sheet', route: '/demo/sheet' },
+      { title: 'Toast', route: '/demo/toast' },
+    ],
+  },
+
+  {
+    label: 'Forms',
+    pages: [
+      { title: 'Button', route: '/demo/button' },
+      { title: 'Checkbox', route: '/demo/checkbox' },
+      { title: 'Form', route: '/demo/forms' },
+      { title: 'Input + Textarea', route: '/demo/inputs' },
+      { title: 'New Input + Textarea', route: '/demo/new-inputs' },
+      { title: 'Label', route: '/demo/label' },
+      { title: 'Progress', route: '/demo/progress' },
+      { title: 'Select', route: '/demo/select' },
+      { title: 'Slider', route: '/demo/slider' },
+      { title: 'Switch', route: '/demo/switch' },
+      { title: 'RadioGroup', route: '/demo/radio-group' },
+      { title: 'ToggleGroup', route: '/demo/toggle-group' },
+    ],
+  },
+
+  {
+    label: 'Content',
+    pages: [
+      { title: 'Avatar', route: '/demo/avatar' },
+      { title: 'Card', route: '/demo/card' },
+      { title: 'Group', route: '/demo/group' },
+      { title: 'Image', route: '/demo/image' },
+      { title: 'ListItem', route: '/demo/list-item' },
+      { title: 'Tabs', route: '/demo/tabs' },
+      { title: 'Tabs Advanced', route: '/demo/tabs-advanced' },
+    ],
+  },
+
+  {
+    label: 'Visual',
+    pages: [
+      { title: 'LinearGradient', route: '/demo/linear-gradient' },
+      { title: 'Separator', route: '/demo/separator' },
+      { title: 'Square + Circle', route: '/demo/shapes' },
+    ],
+  },
+
+  {
+    label: 'Etc',
+    pages: [
+      { title: 'Spinner', route: '/demo/spinner' },
+      { title: 'ScrollView', route: '/demo/scroll-view' },
+    ],
+  },
+]