@hanzogui/kitchen-sink 3.0.5

package/src/usecases/PressStyleNative.tsx

@@ -0,0 +1,143 @@
+import { useState } from 'react'
+import { Text, View, XStack, YStack, styled } from '@hanzo/gui'
+
+/**
+ * Test cases for native press style behaviors:
+ *
+ * 1. pressStyle WITHOUT transition - tests fallback path in createComponent
+ * 2. pressStyle WITH transition - tests animation driver path
+ * 3. Press and drag off behavior - should unpress correctly
+ *
+ * Colors are chosen to be easily distinguishable in screenshots:
+ * - Default: pure blue (#0000ff-ish via $blue10)
+ * - Pressed: pure red (#ff0000-ish via $red10)
+ */
+
+// pressStyle WITHOUT transition - tests the fallback to normal re-render
+const ColorTestPressable = styled(View, {
+  name: 'ColorTestPressable',
+  width: 200,
+  height: 100,
+  backgroundColor: '$blue10',
+  alignItems: 'center',
+  justifyContent: 'center',
+
+  pressStyle: {
+    backgroundColor: '$red10',
+  },
+})
+
+// pressStyle WITH transition - tests animation driver path
+const ColorTestPressableAnimated = styled(View, {
+  name: 'ColorTestPressableAnimated',
+  width: 200,
+  height: 100,
+  backgroundColor: '$blue10',
+  alignItems: 'center',
+  justifyContent: 'center',
+  transition: 'quick',
+
+  pressStyle: {
+    backgroundColor: '$red10',
+  },
+})
+
+export function PressStyleNative() {
+  const [simplePressState, setSimplePressState] = useState({
+    pressInCount: 0,
+    pressOutCount: 0,
+    isPressed: false,
+  })
+
+  const [animatedPressState, setAnimatedPressState] = useState({
+    pressInCount: 0,
+    pressOutCount: 0,
+    isPressed: false,
+  })
+
+  return (
+    <YStack gap="$4" padding="$4" testID="press-style-native-root">
+      <Text fontSize="$5" fontWeight="bold">
+        Press Style Tests
+      </Text>
+
+      {/* test 1: pressStyle WITHOUT transition */}
+      <YStack gap="$2">
+        <Text fontSize="$3">1. No Transition</Text>
+        <Text fontSize="$2" color="$gray11">
+          Blue → Red (no animation)
+        </Text>
+        <ColorTestPressable
+          testID="color-test-pressable"
+          onPressIn={() => {
+            setSimplePressState((s) => ({
+              ...s,
+              pressInCount: s.pressInCount + 1,
+              isPressed: true,
+            }))
+          }}
+          onPressOut={() => {
+            setSimplePressState((s) => ({
+              ...s,
+              pressOutCount: s.pressOutCount + 1,
+              isPressed: false,
+            }))
+          }}
+        >
+          <Text color="white" fontWeight="bold">
+            PRESS ME
+          </Text>
+        </ColorTestPressable>
+        <XStack gap="$2">
+          <Text testID="simple-press-in-count">In: {simplePressState.pressInCount}</Text>
+          <Text testID="simple-press-out-count">
+            Out: {simplePressState.pressOutCount}
+          </Text>
+          <Text testID="simple-is-pressed">
+            Pressed: {simplePressState.isPressed ? 'YES' : 'NO'}
+          </Text>
+        </XStack>
+      </YStack>
+
+      {/* test 2: pressStyle WITH transition */}
+      <YStack gap="$2">
+        <Text fontSize="$3">2. With Transition</Text>
+        <Text fontSize="$2" color="$gray11">
+          Blue → Red (animated)
+        </Text>
+        <ColorTestPressableAnimated
+          testID="animated-color-test-pressable"
+          onPressIn={() => {
+            setAnimatedPressState((s) => ({
+              ...s,
+              pressInCount: s.pressInCount + 1,
+              isPressed: true,
+            }))
+          }}
+          onPressOut={() => {
+            setAnimatedPressState((s) => ({
+              ...s,
+              pressOutCount: s.pressOutCount + 1,
+              isPressed: false,
+            }))
+          }}
+        >
+          <Text color="white" fontWeight="bold">
+            ANIMATED
+          </Text>
+        </ColorTestPressableAnimated>
+        <XStack gap="$2">
+          <Text testID="animated-press-in-count">
+            In: {animatedPressState.pressInCount}
+          </Text>
+          <Text testID="animated-press-out-count">
+            Out: {animatedPressState.pressOutCount}
+          </Text>
+          <Text testID="animated-is-pressed">
+            Pressed: {animatedPressState.isPressed ? 'YES' : 'NO'}
+          </Text>
+        </XStack>
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/PseudoStyleMerge.tsx

@@ -0,0 +1,25 @@
+import { View, Text, YStack, styled } from '@hanzo/gui'
+
+const CustomYStack = styled(YStack, {
+  backgroundColor: 'yellow',
+  hoverStyle: {
+    backgroundColor: 'red',
+  },
+})
+
+export function PseudoStyleMerge() {
+  return (
+    <View flex={1} items="center" justify="center">
+      <CustomYStack
+        width={100}
+        height={100}
+        hoverStyle={{
+          scale: 2,
+        }}
+        transition="quick"
+      >
+        <Text>hi</Text>
+      </CustomYStack>
+    </View>
+  )
+}

package/src/usecases/PseudoTransitionCase.tsx

@@ -0,0 +1,174 @@
+import { Square, YStack, Text, XStack, View, styled } from '@hanzo/gui'
+
+/**
+ * PSEUDO TRANSITION TEST CASES
+ *
+ * Tests for transition prop inside pseudo-style props (hoverStyle, pressStyle, etc.)
+ * CSS semantics: enter uses pseudo's transition, exit uses base transition
+ *
+ * Test scenarios:
+ * 1. hoverStyle with transition - enter fast (200ms), exit slow (1000ms)
+ * 2. pressStyle with transition - press fast (200ms), release slow (1000ms)
+ * 3. Multiple pseudo states with different transitions
+ * 4. $group-hover with transition
+ */
+
+// styled component for group test
+const GroupHoverSquare = styled(Square, {
+  width: 100,
+  height: 100,
+  backgroundColor: '$blue10',
+  transition: '1000ms',
+
+  variants: {
+    groupHover: {
+      true: {
+        // this would be the $group-hover case - tested via props below
+      },
+    },
+  },
+})
+
+export function PseudoTransitionCase() {
+  return (
+    <YStack padding="$4" gap="$8">
+      <Text fontSize="$6" fontWeight="bold">
+        Pseudo Transition Tests
+      </Text>
+
+      {/* Scenario 1: hoverStyle transition */}
+      <YStack gap="$2">
+        <Text>Scenario 1: hover - enter 200ms, exit 1000ms</Text>
+        <Text color="$gray10" fontSize="$2">
+          Hover over the square. Enter should be fast, exit should be slow.
+        </Text>
+        <Square
+          data-testid="scenario-1-target"
+          width={100}
+          height={100}
+          backgroundColor="$blue10"
+          transition="1000ms"
+          hoverStyle={{
+            transition: '200ms',
+            backgroundColor: '$red10',
+          }}
+        />
+      </YStack>
+
+      {/* Scenario 2: pressStyle transition */}
+      <YStack gap="$2">
+        <Text>Scenario 2: press - enter 200ms, exit 1000ms</Text>
+        <Text color="$gray10" fontSize="$2">
+          Press and hold the square. Press should be fast, release should be slow.
+        </Text>
+        <Square
+          data-testid="scenario-2-target"
+          width={100}
+          height={100}
+          backgroundColor="$green10"
+          transition="1000ms"
+          pressStyle={{
+            transition: '200ms',
+            backgroundColor: '$purple10',
+          }}
+        />
+      </YStack>
+
+      {/* Scenario 3: hover and press with different transitions */}
+      <YStack gap="$2">
+        <Text>Scenario 3: hover 400ms, press 200ms (press takes priority)</Text>
+        <Text color="$gray10" fontSize="$2">
+          Hover uses 400ms, press uses 200ms. When both active, press wins.
+        </Text>
+        <Square
+          data-testid="scenario-3-target"
+          width={100}
+          height={100}
+          backgroundColor="$orange10"
+          transition="1000ms"
+          hoverStyle={{
+            transition: '400ms',
+            backgroundColor: '$yellow10',
+          }}
+          pressStyle={{
+            transition: '200ms',
+            backgroundColor: '$pink10',
+          }}
+        />
+      </YStack>
+
+      {/* Scenario 4: $group-hover with transition - uses opacity for simpler testing */}
+      <YStack gap="$2">
+        <Text>Scenario 4: group hover - enter 200ms, exit 1000ms</Text>
+        <Text color="$gray10" fontSize="$2">
+          Hover over the container. Child square opacity animates with group hover.
+        </Text>
+        <XStack
+          data-testid="scenario-4-container"
+          group="testy"
+          padding="$4"
+          backgroundColor="#eee"
+          borderRadius="$4"
+        >
+          <Square
+            data-testid="scenario-4-target"
+            width={100}
+            height={100}
+            backgroundColor="#06b6d4"
+            opacity={0.3}
+            transition="1000ms"
+            $group-testy-hover={{
+              transition: '200ms',
+              opacity: 1,
+            }}
+          />
+        </XStack>
+      </YStack>
+
+      {/* Scenario 5: focusStyle with transition */}
+      <YStack gap="$2">
+        <Text>Scenario 5: focus - enter 200ms, exit 1000ms</Text>
+        <Text color="$gray10" fontSize="$2">
+          Click to focus the square. Focus enter should be fast, blur should be slow.
+        </Text>
+        <View
+          data-testid="scenario-5-target"
+          tabIndex={0}
+          width={100}
+          height={100}
+          backgroundColor="$purple10"
+          transition="1000ms"
+          focusStyle={{
+            transition: '200ms',
+            backgroundColor: '$blue10',
+            outlineWidth: 2,
+            outlineColor: '$blue10',
+            outlineStyle: 'solid',
+          }}
+        />
+      </YStack>
+
+      {/* Scenario 6: opacity animation in hoverStyle */}
+      <YStack gap="$2">
+        <Text>Scenario 6: opacity - hover enter 200ms, exit 1000ms</Text>
+        <Text color="$gray10" fontSize="$2">
+          Opacity fades in fast (200ms) and fades out slow (1000ms).
+        </Text>
+        <Square
+          data-testid="scenario-6-target"
+          width={100}
+          height={100}
+          backgroundColor="$gray10"
+          opacity={0.3}
+          transition="1000ms"
+          hoverStyle={{
+            transition: '200ms',
+            opacity: 1,
+          }}
+        />
+      </YStack>
+    </YStack>
+  )
+}
+
+export default PseudoTransitionCase

package/src/usecases/RawAnimatedValueCase.tsx

@@ -0,0 +1,231 @@
+import { useEffect, useRef, useState } from 'react'
+import { Animated, View as RNView, Text as RNText, StyleSheet } from 'react-native'
+import { Button, Paragraph, YStack, XStack } from '@hanzo/gui'
+
+/**
+ * Test case for raw Animated.Value with Animated.createAnimatedComponent
+ *
+ * This tests the core react-native-web-lite animated implementation
+ * to verify AnimatedValue objects are properly consumed/interpolated.
+ *
+ * Key things being tested:
+ * 1. Animated.Value with direct numeric style (opacity)
+ * 2. Animated.Value with interpolation (color)
+ * 3. Animated.Value with transform
+ * 4. Animated.timing driving updates
+ */
+
+const AnimatedView = Animated.createAnimatedComponent(RNView)
+
+export function RawAnimatedValueCase() {
+  const opacity = useRef(new Animated.Value(0)).current
+  const translateY = useRef(new Animated.Value(50)).current
+  const scale = useRef(new Animated.Value(0.5)).current
+
+  const [isAnimated, setIsAnimated] = useState(false)
+  const [debugInfo, setDebugInfo] = useState<string>('')
+
+  // log the style value to debug
+  useEffect(() => {
+    const styleObj = {
+      opacity,
+      transform: [{ translateY }, { scale }],
+    }
+
+    // check what __getValue returns
+    // @ts-expect-error
+    const opacityValue = opacity.__getValue?.() ?? 'no __getValue'
+    // @ts-expect-error
+    const translateYValue = translateY.__getValue?.() ?? 'no __getValue'
+    // @ts-expect-error
+    const scaleValue = scale.__getValue?.() ?? 'no __getValue'
+
+    setDebugInfo(
+      JSON.stringify(
+        {
+          opacityValue,
+          translateYValue,
+          scaleValue,
+          opacityType: typeof opacity,
+          opacityConstructor: opacity?.constructor?.name,
+        },
+        null,
+        2
+      )
+    )
+
+    console.log('[RAW_ANIMATED] Initial values:', {
+      opacity: opacityValue,
+      translateY: translateYValue,
+      scale: scaleValue,
+    })
+  }, [opacity, translateY, scale])
+
+  const animateIn = () => {
+    console.log('[RAW_ANIMATED] Starting animation IN')
+    setIsAnimated(true)
+
+    Animated.parallel([
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: false,
+      }),
+      Animated.timing(translateY, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: false,
+      }),
+      Animated.timing(scale, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: false,
+      }),
+    ]).start(() => {
+      console.log('[RAW_ANIMATED] Animation IN complete')
+    })
+  }
+
+  const animateOut = () => {
+    console.log('[RAW_ANIMATED] Starting animation OUT')
+    setIsAnimated(false)
+
+    Animated.parallel([
+      Animated.timing(opacity, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: false,
+      }),
+      Animated.timing(translateY, {
+        toValue: 50,
+        duration: 300,
+        useNativeDriver: false,
+      }),
+      Animated.timing(scale, {
+        toValue: 0.5,
+        duration: 300,
+        useNativeDriver: false,
+      }),
+    ]).start(() => {
+      console.log('[RAW_ANIMATED] Animation OUT complete')
+    })
+  }
+
+  // interpolated color
+  const backgroundColor = opacity.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['rgb(255, 0, 0)', 'rgb(0, 255, 0)'],
+  })
+
+  return (
+    <YStack gap="$4" padding="$4" flex={1}>
+      <Paragraph fontWeight="bold">Raw Animated.Value Test</Paragraph>
+      <Paragraph size="$2" color="$color10">
+        Tests Animated.createAnimatedComponent with AnimatedValue styles
+      </Paragraph>
+
+      <XStack gap="$4">
+        <Button testID="animate-in-trigger" onPress={animateIn} disabled={isAnimated}>
+          Animate In
+        </Button>
+        <Button testID="animate-out-trigger" onPress={animateOut} disabled={!isAnimated}>
+          Animate Out
+        </Button>
+      </XStack>
+
+      {/* The animated box */}
+      <AnimatedView
+        testID="animated-box"
+        style={[
+          styles.box,
+          {
+            opacity,
+            backgroundColor,
+            transform: [{ translateY }, { scale }],
+          },
+        ]}
+      />
+
+      {/* Debug info */}
+      <YStack
+        backgroundColor="$background"
+        padding="$2"
+        borderRadius="$2"
+        borderWidth={1}
+        borderColor="$borderColor"
+      >
+        <Paragraph size="$1" fontFamily="$mono">
+          Debug Info:
+        </Paragraph>
+        <Paragraph testID="debug-info" size="$1" fontFamily="$mono" whiteSpace="pre">
+          {debugInfo}
+        </Paragraph>
+      </YStack>
+
+      {/* Display computed style for testing */}
+      <ComputedStyleDisplay targetId="animated-box" />
+    </YStack>
+  )
+}
+
+/**
+ * Component that polls and displays the computed style of a target element
+ */
+function ComputedStyleDisplay({ targetId }: { targetId: string }) {
+  const [computedStyles, setComputedStyles] = useState<string>('')
+
+  useEffect(() => {
+    let rafId: number
+    let running = true
+
+    const poll = () => {
+      if (!running) return
+
+      const el = document.querySelector(`[data-testid="${targetId}"]`) as HTMLElement
+      if (el) {
+        const style = getComputedStyle(el)
+        const info = {
+          opacity: style.opacity,
+          transform: style.transform,
+          backgroundColor: style.backgroundColor,
+        }
+
+        const newStyles = JSON.stringify(info, null, 2)
+        setComputedStyles((prev) => {
+          if (prev !== newStyles) {
+            console.log('[RAW_ANIMATED] Computed style changed:', info)
+          }
+          return newStyles
+        })
+      }
+
+      rafId = requestAnimationFrame(poll)
+    }
+
+    poll()
+
+    return () => {
+      running = false
+      cancelAnimationFrame(rafId)
+    }
+  }, [targetId])
+
+  return (
+    <YStack backgroundColor="$backgroundHover" padding="$2" borderRadius="$2">
+      <Paragraph size="$1" fontFamily="$mono">
+        Computed Styles:
+      </Paragraph>
+      <Paragraph testID="computed-styles" size="$1" fontFamily="$mono" whiteSpace="pre">
+        {computedStyles}
+      </Paragraph>
+    </YStack>
+  )
+}
+
+const styles = StyleSheet.create({
+  box: {
+    width: 100,
+    height: 100,
+    borderRadius: 8,
+  },
+})

package/src/usecases/RemoveScrollCase.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { Select, H2, Paragraph, YStack } from '@hanzo/gui'
+import { ChevronDown } from '@hanzogui/lucide-icons-2'
+
+const items = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'orange', label: 'Orange' },
+  { value: 'grape', label: 'Grape' },
+]
+
+export function RemoveScrollCase() {
+  const [value, setValue] = React.useState('')
+
+  return (
+    <YStack $platform-web={{ minHeight: '200vh' }} padding="$4" gap="$4">
+      <H2>RemoveScroll Test</H2>
+
+      <Paragraph data-testid="scroll-marker">
+        Scroll down to find the select. This page is tall enough to scroll.
+      </Paragraph>
+
+      {Array.from({ length: 10 }).map((_, i) => (
+        <Paragraph key={i}>
+          Filler paragraph {i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing
+          elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </Paragraph>
+      ))}
+
+      <Select
+        value={value}
+        onValueChange={setValue}
+        renderValue={(v) => items.find((item) => item.value === v)?.label}
+      >
+        <Select.Trigger data-testid="rs-select-trigger" iconAfter={ChevronDown}>
+          <Select.Value placeholder="Pick a fruit" />
+        </Select.Trigger>
+
+        <Select.Content data-testid="rs-select-content">
+          <Select.Viewport data-testid="rs-select-viewport">
+            <Select.Group>
+              {items.map((item, i) => (
+                <Select.Item
+                  key={item.value}
+                  data-testid={`rs-select-${item.value}`}
+                  value={item.value}
+                  index={i}
+                >
+                  <Select.ItemText>{item.label}</Select.ItemText>
+                  <Select.ItemIndicator />
+                </Select.Item>
+              ))}
+            </Select.Group>
+          </Select.Viewport>
+        </Select.Content>
+      </Select>
+
+      {Array.from({ length: 20 }).map((_, i) => (
+        <Paragraph key={`after-${i}`}>
+          After-select paragraph {i + 1}. Ut enim ad minim veniam, quis nostrud
+          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </Paragraph>
+      ))}
+    </YStack>
+  )
+}