@hanzogui/kitchen-sink 3.0.5

package/src/usecases/MultiDriverAnimation.tsx

@@ -0,0 +1,118 @@
+import { useState } from 'react'
+import { Button, Square, YStack, XStack, Text, View } from '@hanzo/gui'
+
+/**
+ * Test case for multi-driver animation config.
+ * Tests that animatedBy prop correctly selects different drivers.
+ *
+ * With config: { default: motionDriver, css: cssDriver }
+ * - animatedBy="default" should use motion driver (JS-based, smooth)
+ * - animatedBy="css" should use CSS driver (CSS transitions)
+ * - no animatedBy should use default (motion)
+ * - $group-hover with transition should work with selected driver
+ */
+export function MultiDriverAnimation() {
+  const [active, setActive] = useState(false)
+
+  return (
+    <YStack gap="$4" padding="$4">
+      <XStack gap="$4">
+        {/* animatedBy="default" - uses motion driver */}
+        <YStack alignItems="center" gap="$2">
+          <Text fontSize="$2">default (motion)</Text>
+          <Square
+            testID="driver-default"
+            animatedBy="default"
+            size={80}
+            backgroundColor={active ? '$blue10' : '$red10'}
+            opacity={active ? 1 : 0.3}
+            transition="200ms"
+          />
+        </YStack>
+
+        {/* animatedBy="css" - uses CSS driver */}
+        <YStack alignItems="center" gap="$2">
+          <Text fontSize="$2">css</Text>
+          <Square
+            testID="driver-css"
+            animatedBy="css"
+            size={80}
+            backgroundColor={active ? '$green10' : '$purple10'}
+            opacity={active ? 1 : 0.3}
+            transition="200ms"
+          />
+        </YStack>
+
+        {/* no animatedBy - uses default (motion) */}
+        <YStack alignItems="center" gap="$2">
+          <Text fontSize="$2">no prop (default)</Text>
+          <Square
+            testID="driver-none"
+            size={80}
+            backgroundColor={active ? '$orange10' : '$pink10'}
+            opacity={active ? 1 : 0.3}
+            transition="200ms"
+          />
+        </YStack>
+      </XStack>
+
+      <Button testID="toggle-multi" onPress={() => setActive(!active)}>
+        Toggle Animation
+      </Button>
+
+      {/* group hover with different drivers */}
+      <Text fontSize="$3" fontWeight="bold">
+        Group hover transitions
+      </Text>
+      <XStack gap="$4">
+        {/* group with default (motion) driver */}
+        <View
+          testID="group-motion"
+          // @ts-expect-error - custom group name
+          group="motionGroup"
+          padding="$4"
+          backgroundColor="$gray5"
+          borderRadius="$4"
+        >
+          <Square
+            testID="group-motion-child"
+            size={60}
+            backgroundColor="$blue10"
+            opacity={0.5}
+            transition="500ms"
+            $group-motionGroup-hover={{
+              opacity: 1,
+              scale: 1.1,
+              transition: '100ms',
+            }}
+          />
+        </View>
+
+        {/* group with css driver */}
+        <View
+          testID="group-css"
+          // @ts-expect-error - custom group name
+          group="cssGroup"
+          animatedBy="css"
+          padding="$4"
+          backgroundColor="$gray5"
+          borderRadius="$4"
+        >
+          <Square
+            testID="group-css-child"
+            animatedBy="css"
+            size={60}
+            backgroundColor="$green10"
+            opacity={0.5}
+            transition="500ms"
+            $group-cssGroup-hover={{
+              opacity: 1,
+              scale: 1.1,
+              transition: '100ms',
+            }}
+          />
+        </View>
+      </XStack>
+    </YStack>
+  )
+}

package/src/usecases/NativePortalTest.tsx

@@ -0,0 +1,179 @@
+/**
+ * Test case for native portal with react-native-teleport integration
+ * Tests that Portal/Sheet/Popover work correctly when using teleport
+ */
+
+import { Check, ChevronDown } from '@hanzogui/lucide-icons-2'
+import React from 'react'
+import { Adapt, Button, Popover, Select, Sheet, Text, XStack, YStack } from '@hanzo/gui'
+import { getPortal } from '@hanzogui/native'
+
+const items = [{ name: 'Apple' }, { name: 'Pear' }, { name: 'Blackberry' }]
+
+function SelectWithSheet({ id }: { id: string }) {
+  const [val, setVal] = React.useState('apple')
+
+  return (
+    <Select value={val} onValueChange={setVal} disablePreventBodyScroll zIndex={200000}>
+      <Select.Trigger testID={`${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()}`}
+              >
+                <Select.ItemText>{item.name}</Select.ItemText>
+                <Select.ItemIndicator marginLeft="auto">
+                  <Check size={16} />
+                </Select.ItemIndicator>
+              </Select.Item>
+            ))}
+          </Select.Group>
+        </Select.Viewport>
+      </Select.Content>
+    </Select>
+  )
+}
+
+function PopoverTest({ id }: { id: string }) {
+  return (
+    <Popover>
+      <Popover.Trigger asChild>
+        <Button testID={`${id}-trigger`}>Open Popover</Button>
+      </Popover.Trigger>
+
+      <Popover.Content
+        testID={`${id}-content`}
+        borderWidth={1}
+        borderColor="$borderColor"
+        enterStyle={{ y: -10, opacity: 0 }}
+        exitStyle={{ y: -10, opacity: 0 }}
+        elevate
+      >
+        <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
+        <YStack gap="$3" padding="$4">
+          <Text testID={`${id}-text`}>Popover content works!</Text>
+          <Popover.Close asChild>
+            <Button testID={`${id}-close`} size="$3">
+              Close
+            </Button>
+          </Popover.Close>
+        </YStack>
+      </Popover.Content>
+    </Popover>
+  )
+}
+
+function SheetTest({ id }: { id: string }) {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <>
+      <Button testID={`${id}-trigger`} onPress={() => setOpen(true)}>
+        Open Sheet
+      </Button>
+
+      <Sheet
+        modal
+        open={open}
+        onOpenChange={setOpen}
+        dismissOnSnapToBottom
+        transition="medium"
+      >
+        <Sheet.Overlay
+          bg="$shadowColor"
+          transition="lazy"
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+        <Sheet.Frame testID={`${id}-frame`} padding="$4">
+          <YStack gap="$4">
+            <Text testID={`${id}-text`}>Sheet content works!</Text>
+            <Button testID={`${id}-close`} onPress={() => setOpen(false)}>
+              Close Sheet
+            </Button>
+          </YStack>
+        </Sheet.Frame>
+      </Sheet>
+    </>
+  )
+}
+
+export function NativePortalTest() {
+  const portalState = getPortal().state
+
+  return (
+    <YStack padding="$4" gap="$4" flex={1}>
+      {/* status display */}
+      <YStack padding="$3" bg="$backgroundHover" borderRadius="$2" gap="$2">
+        <Text fontWeight="bold">Native Portal Status:</Text>
+        <XStack gap="$2" alignItems="center">
+          <YStack
+            width={12}
+            height={12}
+            borderRadius={6}
+            bg={
+              portalState.type === 'teleport'
+                ? '$green10'
+                : portalState.type === 'legacy'
+                  ? '$yellow10'
+                  : '$red10'
+            }
+          />
+          <Text testID="portal-status">
+            {portalState.type === 'teleport'
+              ? 'Using teleport (best)'
+              : portalState.type === 'legacy'
+                ? 'Using legacy RN shims'
+                : 'Not enabled (Gorhom fallback)'}
+          </Text>
+        </XStack>
+        <Text fontSize="$2" color="$colorHover">
+          enabled: {String(portalState.enabled)}, type: {portalState.type ?? 'null'}
+        </Text>
+      </YStack>
+
+      {/* test components */}
+      <YStack gap="$4">
+        <YStack gap="$2">
+          <Text fontWeight="bold">Select with Sheet:</Text>
+          <SelectWithSheet id="native-portal-select" />
+        </YStack>
+
+        <YStack gap="$2">
+          <Text fontWeight="bold">Popover:</Text>
+          <PopoverTest id="native-portal-popover" />
+        </YStack>
+
+        <YStack gap="$2">
+          <Text fontWeight="bold">Sheet:</Text>
+          <SheetTest id="native-portal-sheet" />
+        </YStack>
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/NewInputBasic.tsx

@@ -0,0 +1,16 @@
+import { Input, TextArea } from '@hanzogui/input'
+import { YStack } from '@hanzo/gui'
+
+export function NewInputBasic() {
+  return (
+    <YStack gap="$4" p="$4">
+      <Input data-testid="basic-input" placeholder="Basic input" />
+      <Input data-testid="password-input" type="password" placeholder="Password input" />
+      <Input data-testid="email-input" type="email" placeholder="Email input" />
+      <Input data-testid="number-input" type="number" placeholder="Number input" />
+      <Input data-testid="disabled-input" disabled placeholder="Disabled input" />
+      <Input data-testid="readonly-input" readOnly value="Read only value" />
+      <TextArea data-testid="basic-textarea" placeholder="Basic textarea" rows={3} />
+    </YStack>
+  )
+}

package/src/usecases/NewInputEvents.tsx

@@ -0,0 +1,29 @@
+import { useState } from 'react'
+import { Input } from '@hanzogui/input'
+import { Text, YStack } from '@hanzo/gui'
+
+export function NewInputEvents() {
+  const [value, setValue] = useState('')
+  const [changeCount, setChangeCount] = useState(0)
+  const [submitCount, setSubmitCount] = useState(0)
+
+  return (
+    <YStack gap="$4" p="$4">
+      <Input
+        data-testid="event-input"
+        placeholder="Type here..."
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value)
+          setChangeCount((c) => c + 1)
+        }}
+        onSubmitEditing={() => {
+          setSubmitCount((c) => c + 1)
+        }}
+      />
+      <Text data-testid="value-display">Value: {value}</Text>
+      <Text data-testid="change-count">Changes: {changeCount}</Text>
+      <Text data-testid="submit-count">Submits: {submitCount}</Text>
+    </YStack>
+  )
+}

package/src/usecases/NonGuiTextStyledType.tsx

@@ -0,0 +1,23 @@
+import { GetBaseStyles, GetVariantProps, styled } from '@hanzogui/web'
+
+const SomeNonGuiTextComponent = (props: {}) => {
+  return null
+}
+
+export const SomeTextComponent = styled(
+  SomeNonGuiTextComponent,
+  {
+    color: '$background',
+
+    variants: {
+      foo: {
+        true: {
+          // making sure this has color
+          color: '$background',
+        },
+      },
+    } as const,
+  },
+
+  { isText: true }
+)

package/src/usecases/OnLayoutCase.tsx

@@ -0,0 +1,134 @@
+import { useCallback, useRef, useState } from 'react'
+import { Button, Text, View, XStack, YStack } from '@hanzo/gui'
+
+type LayoutEvent = any
+
+type LayoutData = {
+  x: number
+  y: number
+  width: number
+  height: number
+  count: number
+}
+
+const empty: LayoutData = { x: 0, y: 0, width: 0, height: 0, count: 0 }
+
+export function OnLayoutCase() {
+  const [boxA, setBoxA] = useState<LayoutData>(empty)
+  const [boxB, setBoxB] = useState<LayoutData>(empty)
+  const [moved, setMoved] = useState(false)
+  const [resized, setResized] = useState(false)
+  const [parentResized, setParentResized] = useState(false)
+  const [mounted, setMounted] = useState(true)
+  const [swapped, setSwapped] = useState(false)
+  const countA = useRef(0)
+  const countB = useRef(0)
+
+  const handleLayoutA = useCallback((e: LayoutEvent) => {
+    const { x, y, width, height } = e.nativeEvent.layout
+    countA.current++
+    setBoxA({
+      x: Math.round(x),
+      y: Math.round(y),
+      width: Math.round(width),
+      height: Math.round(height),
+      count: countA.current,
+    })
+  }, [])
+
+  const handleLayoutB = useCallback((e: LayoutEvent) => {
+    const { x, y, width, height } = e.nativeEvent.layout
+    countB.current++
+    setBoxB({
+      x: Math.round(x),
+      y: Math.round(y),
+      width: Math.round(width),
+      height: Math.round(height),
+      count: countB.current,
+    })
+  }, [])
+
+  return (
+    <YStack padding="$4" gap="$3">
+      {/* controls */}
+      <XStack gap="$2" flexWrap="wrap">
+        <Button testID="btn-move" size="$2" onPress={() => setMoved((v) => !v)}>
+          toggle move
+        </Button>
+        <Button testID="btn-resize" size="$2" onPress={() => setResized((v) => !v)}>
+          toggle resize
+        </Button>
+        <Button
+          testID="btn-parent-resize"
+          size="$2"
+          onPress={() => setParentResized((v) => !v)}
+        >
+          toggle parent
+        </Button>
+        <Button testID="btn-toggle-mount" size="$2" onPress={() => setMounted((v) => !v)}>
+          toggle mount
+        </Button>
+        <Button testID="btn-swap" size="$2" onPress={() => setSwapped((v) => !v)}>
+          toggle swap
+        </Button>
+      </XStack>
+
+      {/* readout */}
+      <Text testID="layout-a" fontSize={12}>
+        {`A:${boxA.width}x${boxA.height}@${boxA.x},${boxA.y}#${boxA.count}`}
+      </Text>
+      <Text testID="layout-b" fontSize={12}>
+        {`B:${boxB.width}x${boxB.height}@${boxB.x},${boxB.y}#${boxB.count}`}
+      </Text>
+
+      {/* box A: the main test target */}
+      <View
+        testID="parent-a"
+        width={parentResized ? 300 : 500}
+        height={200}
+        backgroundColor="$backgroundHover"
+        position="relative"
+      >
+        {mounted &&
+          (swapped ? (
+            <View
+              testID="box-a"
+              key="box-a-alt"
+              onLayout={handleLayoutA}
+              width={resized ? 180 : 120}
+              height={resized ? 80 : 60}
+              marginLeft={moved ? 100 : 0}
+              backgroundColor="$blue8"
+            />
+          ) : (
+            <View
+              testID="box-a"
+              key="box-a-default"
+              onLayout={handleLayoutA}
+              width={resized ? 180 : 120}
+              height={resized ? 80 : 60}
+              marginLeft={moved ? 100 : 0}
+              backgroundColor="$red8"
+            />
+          ))}
+      </View>
+
+      {/* box B: second instance for cross-contamination test */}
+      <View
+        testID="parent-b"
+        width={400}
+        height={150}
+        backgroundColor="$backgroundHover"
+        position="relative"
+      >
+        <View
+          testID="box-b"
+          onLayout={handleLayoutB}
+          width={200}
+          height={50}
+          backgroundColor="$green8"
+        />
+      </View>
+    </YStack>
+  )
+}

package/src/usecases/OnLayoutScaleCase.tsx

@@ -0,0 +1,88 @@
+import { useState, useCallback } from 'react'
+import type { LayoutChangeEvent, LayoutRectangle } from 'react-native'
+import { Button, Square, Text, YStack } from '@hanzo/gui'
+
+/**
+ * test case for onLayout with CSS scale transform.
+ *
+ * when a CSS scale transform is applied, getBoundingClientRect()
+ * returns the transformed (scaled) dimensions, but the expected behavior
+ * (matching React Native) is to return the pre-transform dimensions.
+ *
+ * for example:
+ * - element has width: 100px, height: 100px
+ * - CSS scale(0.5) is applied
+ * - getBoundingClientRect() returns width: 50, height: 50 (transformed)
+ * - offsetWidth/offsetHeight return 100, 100 (pre-transform, expected)
+ *
+ * enable HANZO_GUI_ONLAYOUT_PRETRANSFORM=1 to test the fix
+ *
+ * see: https://github.com/hanzoai/gui/pull/2329
+ */
+export function OnLayoutScaleCase() {
+  const [layoutWithoutScale, setLayoutWithoutScale] = useState<LayoutRectangle | null>(
+    null
+  )
+  const [layoutWithScale, setLayoutWithScale] = useState<LayoutRectangle | null>(null)
+
+  const handleLayoutWithoutScale = useCallback((e: LayoutChangeEvent) => {
+    setLayoutWithoutScale(e.nativeEvent.layout)
+  }, [])
+
+  const handleLayoutWithScale = useCallback((e: LayoutChangeEvent) => {
+    setLayoutWithScale(e.nativeEvent.layout)
+  }, [])
+
+  const [triggerReLayout, setTriggerReLayout] = useState(0)
+
+  return (
+    <YStack gap="$4" padding="$4">
+      {/* box without scale - should report 200x200 */}
+      <Square
+        testID="box-no-scale"
+        size={200}
+        backgroundColor="$blue10"
+        onLayout={handleLayoutWithoutScale}
+        key={`no-scale-${triggerReLayout}`}
+      />
+
+      <Text testID="layout-no-scale">
+        No Scale:{' '}
+        {layoutWithoutScale
+          ? `${layoutWithoutScale.width}x${layoutWithoutScale.height}`
+          : 'waiting...'}
+      </Text>
+
+      {/* box with scale(0.5) - should STILL report 200x200 (pre-transform size) */}
+      <Square
+        testID="box-with-scale"
+        size={200}
+        backgroundColor="$red10"
+        scale={0.5}
+        onLayout={handleLayoutWithScale}
+        key={`with-scale-${triggerReLayout}`}
+      />
+
+      <Text testID="layout-with-scale">
+        With Scale:{' '}
+        {layoutWithScale
+          ? `${layoutWithScale.width}x${layoutWithScale.height}`
+          : 'waiting...'}
+      </Text>
+
+      <Button testID="trigger-relayout" onPress={() => setTriggerReLayout((n) => n + 1)}>
+        Trigger Re-layout
+      </Button>
+
+      {/* debug info */}
+      <YStack gap="$2">
+        <Text fontSize="$3" color="$gray10">
+          Expected: Both boxes should report 200x200
+        </Text>
+        <Text fontSize="$3" color="$gray10">
+          Bug: Scaled box may report 100x100 (transformed size)
+        </Text>
+      </YStack>
+    </YStack>
+  )
+}