@hanzogui/kitchen-sink 3.0.5

package/src/usecases/RenderPropCase.tsx

@@ -0,0 +1,263 @@
+import { isWeb } from '@hanzogui/constants'
+import { Text, View, styled, GuiComponentState } from '@hanzogui/core'
+import { forwardRef } from 'react'
+
+// Test: render prop with string in styled()
+const StyledButton = styled(View, {
+  render: 'button',
+  padding: '$4',
+  backgroundColor: '$background',
+  borderRadius: '$4',
+  cursor: 'pointer',
+})
+
+// Test: styled.a() - styled-components style API with proper href typing
+const StyledAnchor = styled.a({
+  color: '$blue10',
+  textDecorationLine: 'underline',
+})
+
+// Test: render prop with semantic elements
+const StyledNav = styled(View, {
+  render: 'nav',
+  padding: '$2',
+  backgroundColor: '$backgroundHover',
+})
+
+const StyledMain = styled(View, {
+  render: 'main',
+  padding: '$4',
+  flex: 1,
+})
+
+const StyledSection = styled(View, {
+  render: 'section',
+  padding: '$3',
+  borderWidth: 1,
+  borderColor: '$borderColor',
+})
+
+const StyledArticle = styled(View, {
+  render: 'article',
+  padding: '$3',
+})
+
+const StyledFooter = styled(View, {
+  render: 'footer',
+  padding: '$2',
+  backgroundColor: '$backgroundPress',
+})
+
+// Test: render prop with form elements
+const StyledForm = styled(View, {
+  render: 'form',
+  gap: '$3',
+})
+
+const StyledLabel = styled(Text, {
+  render: 'label',
+  fontSize: '$3',
+})
+
+const StyledFieldset = styled(View, {
+  render: 'fieldset',
+  padding: '$3',
+  borderWidth: 1,
+  borderColor: '$borderColor',
+  borderRadius: '$2',
+})
+
+// Test: render prop with heading elements
+const StyledH1 = styled(Text, {
+  render: 'h1',
+  fontSize: '$9',
+  fontWeight: 'bold',
+})
+
+const StyledH2 = styled(Text, {
+  render: 'h2',
+  fontSize: '$7',
+  fontWeight: 'bold',
+})
+
+// Test: render prop with list elements
+const StyledUl = styled(View, {
+  render: 'ul',
+  paddingLeft: '$4',
+})
+
+const StyledLi = styled(View, {
+  render: 'li',
+  marginBottom: '$2',
+})
+
+// Test: render prop override at runtime
+const RuntimeOverrideView = styled(View, {
+  padding: '$2',
+  backgroundColor: '$background',
+})
+
+// Custom component for function render test
+const CustomButton = forwardRef<any, any>((props, ref) =>
+  isWeb ? (
+    <button ref={ref} {...props} data-custom-button="true" />
+  ) : (
+    <View ref={ref} {...props} aria-label="custom-button" />
+  )
+)
+CustomButton.displayName = 'CustomButton'
+
+export function RenderPropCase() {
+  return (
+    <View gap="$4" padding="$4" testID="render-prop-container">
+      {/* Test styled() render prop */}
+      <StyledButton testID="styled-button" data-testid="styled-button">
+        <Text testID="styled-button-text">Styled Button (render='button')</Text>
+      </StyledButton>
+
+      {/* href is now properly typed because styled.a() adds AnchorHTMLAttributes */}
+      <StyledAnchor data-testid="styled-anchor" href={isWeb ? '#' : undefined}>
+        Styled Anchor (styled.a())
+      </StyledAnchor>
+
+      {/* Test semantic elements */}
+      <StyledNav testID="styled-nav" data-testid="styled-nav">
+        <Text>Nav Element</Text>
+      </StyledNav>
+
+      <StyledMain testID="styled-main" data-testid="styled-main">
+        <Text>Main Element</Text>
+      </StyledMain>
+
+      <StyledSection testID="styled-section" data-testid="styled-section">
+        <Text>Section Element</Text>
+      </StyledSection>
+
+      <StyledArticle testID="styled-article" data-testid="styled-article">
+        <Text>Article Element</Text>
+      </StyledArticle>
+
+      <StyledFooter testID="styled-footer" data-testid="styled-footer">
+        <Text>Footer Element</Text>
+      </StyledFooter>
+
+      {/* Test form elements */}
+      <StyledForm data-testid="styled-form">
+        <StyledFieldset data-testid="styled-fieldset">
+          <StyledLabel data-testid="styled-label" htmlFor="test-input">
+            Label Element
+          </StyledLabel>
+        </StyledFieldset>
+      </StyledForm>
+
+      {/* Test heading elements */}
+      <StyledH1 data-testid="styled-h1">H1 Heading</StyledH1>
+      <StyledH2 data-testid="styled-h2">H2 Heading</StyledH2>
+
+      {/* Test list elements */}
+      <StyledUl data-testid="styled-ul">
+        <StyledLi data-testid="styled-li-1">
+          <Text>List Item 1</Text>
+        </StyledLi>
+        <StyledLi data-testid="styled-li-2">
+          <Text>List Item 2</Text>
+        </StyledLi>
+      </StyledUl>
+
+      {/* Test runtime render prop override */}
+      <RuntimeOverrideView data-testid="runtime-button" render="button">
+        <Text>Runtime Override to Button</Text>
+      </RuntimeOverrideView>
+
+      <RuntimeOverrideView data-testid="runtime-anchor" render="a">
+        <Text>Runtime Override to Anchor</Text>
+      </RuntimeOverrideView>
+
+      {/* Test Stack with runtime render */}
+      <View data-testid="stack-as-section" render="section" padding="$2">
+        <Text>Stack as Section</Text>
+      </View>
+
+      <View data-testid="stack-as-aside" render="aside" padding="$2">
+        <Text>Stack as Aside</Text>
+      </View>
+
+      {/* Test Text with runtime render */}
+      <Text data-testid="text-as-span" render="span">
+        Text as Span
+      </Text>
+
+      <Text data-testid="text-as-strong" render="strong">
+        Text as Strong
+      </Text>
+
+      <Text data-testid="text-as-em" render="em">
+        Text as Em
+      </Text>
+
+      {/* Test JSX element render prop */}
+      <View
+        data-testid="jsx-element-render"
+        render={<a href="/test-link" data-jsx-element="true" />}
+        padding="$2"
+        backgroundColor="$blue5"
+      >
+        <Text>JSX Element Render (anchor with href)</Text>
+      </View>
+
+      <View
+        data-testid="jsx-element-button"
+        render={<button type="submit" data-jsx-button="true" />}
+        padding="$3"
+        backgroundColor="$green5"
+      >
+        <Text>JSX Element Render (button with type)</Text>
+      </View>
+
+      {/* Test function render prop */}
+      <View
+        testID="function-render"
+        data-testid="function-render"
+        render={(props) => <CustomButton {...props} />}
+        padding="$2"
+        backgroundColor="$red5"
+      >
+        <Text testID="function-render-text">Function Render (CustomButton)</Text>
+      </View>
+
+      {isWeb ? (
+        <View
+          data-testid="function-render-with-state"
+          render={(props, state: GuiComponentState) => (
+            <button
+              {...props}
+              data-hover={state.hover ? 'true' : 'false'}
+              data-press={state.press ? 'true' : 'false'}
+            />
+          )}
+          padding="$3"
+          backgroundColor="$purple5"
+          hoverStyle={{ backgroundColor: '$purple7' }}
+          pressStyle={{ backgroundColor: '$purple9' }}
+        >
+          <Text>Function Render with State</Text>
+        </View>
+      ) : (
+        <View
+          testID="function-render-with-state"
+          render={(props, state: GuiComponentState) => (
+            <View
+              {...props}
+              aria-description={`hover:${state.hover},press:${state.press}`}
+            />
+          )}
+          padding="$3"
+          backgroundColor="$purple5"
+          pressStyle={{ backgroundColor: '$purple9' }}
+        >
+          <Text testID="function-render-state-text">Function Render with State</Text>
+        </View>
+      )}
+    </View>
+  )
+}

package/src/usecases/SafeAreaCase.tsx

@@ -0,0 +1,236 @@
+// /**
+//  * Test case for $safeAreaTop, $safeAreaBottom, $safeAreaLeft, $safeAreaRight tokens
+//  * Tests that safe area tokens resolve correctly on native (via initialMetrics)
+//  */
+
+// import { Platform } from 'react-native'
+// import { Text, View, XStack, YStack, Square, isWeb } from '@hanzo/gui'
+// import { getSafeArea } from '@hanzogui/native'
+
+// function SafeAreaStatus() {
+//   const safeAreaState = getSafeArea().state
+//   const initialInsets = getSafeArea().getInsets()
+
+//   return (
+//     <YStack padding="$3" bg="$backgroundHover" borderRadius="$2" gap="$2">
+//       <Text fontWeight="bold">Safe Area Status:</Text>
+//       <XStack gap="$2" alignItems="center">
+//         <Square
+//           size={12}
+//           borderRadius={6}
+//           bg={safeAreaState.enabled ? '$green10' : '$red10'}
+//         />
+//         <Text testID="safe-area-status">
+//           {safeAreaState.enabled ? 'Enabled' : 'Not enabled'}
+//         </Text>
+//       </XStack>
+//       <Text fontSize="$2" color="$colorHover">
+//         platform: {Platform.OS}
+//       </Text>
+//       <Text fontSize="$2" color="$colorHover" testID="initial-insets">
+//         initial insets: top={initialInsets.top}, bottom={initialInsets.bottom},
+//         left={initialInsets.left}, right={initialInsets.right}
+//       </Text>
+//     </YStack>
+//   )
+// }
+
+// function TokenDemo() {
+//   // these use the $safeAreaTop/Bottom/Left/Right tokens
+//   // on native, they resolve to numeric values from initialMetrics
+//   // on web, they resolve to env(safe-area-inset-*) CSS values
+//   return (
+//     <YStack gap="$3">
+//       <Text fontWeight="bold">Safe Area Token Demo:</Text>
+//       <Text fontSize="$2" color="$colorHover">
+//         Using $safeAreaTop, $safeAreaBottom, $safeAreaLeft, $safeAreaRight tokens
+//       </Text>
+
+//       {/* paddingTop using $safeAreaTop token */}
+//       <View
+//         testID="token-padding-top"
+//         paddingTop="$safeAreaTop"
+//         bg="$red5"
+//         padding="$2"
+//       >
+//         <Text>paddingTop: $safeAreaTop</Text>
+//       </View>
+
+//       {/* paddingBottom using $safeAreaBottom token */}
+//       <View
+//         testID="token-padding-bottom"
+//         paddingBottom="$safeAreaBottom"
+//         bg="$blue5"
+//         padding="$2"
+//       >
+//         <Text>paddingBottom: $safeAreaBottom</Text>
+//       </View>
+
+//       {/* marginLeft using $safeAreaLeft token */}
+//       <View
+//         testID="token-margin-left"
+//         marginLeft="$safeAreaLeft"
+//         bg="$green5"
+//         padding="$2"
+//       >
+//         <Text>marginLeft: $safeAreaLeft</Text>
+//       </View>
+
+//       {/* marginRight using $safeAreaRight token */}
+//       <View
+//         testID="token-margin-right"
+//         marginRight="$safeAreaRight"
+//         bg="$yellow5"
+//         padding="$2"
+//       >
+//         <Text>marginRight: $safeAreaRight</Text>
+//       </View>
+
+//       {/* combined usage */}
+//       <View
+//         testID="token-combined"
+//         paddingTop="$safeAreaTop"
+//         paddingBottom="$safeAreaBottom"
+//         paddingLeft="$safeAreaLeft"
+//         paddingRight="$safeAreaRight"
+//         bg="$purple5"
+//         padding="$2"
+//       >
+//         <Text>all safe area tokens combined</Text>
+//       </View>
+//     </YStack>
+//   )
+// }
+
+// function EdgeToEdgeDemo() {
+//   const insets = getSafeArea().getInsets()
+
+//   return (
+//     <YStack gap="$2">
+//       <Text fontWeight="bold">Edge-to-Edge Demo:</Text>
+//       <Text fontSize="$2" color="$colorHover">
+//         Visual representation of safe area insets (from initialMetrics)
+//       </Text>
+
+//       {/* visual representation of safe areas */}
+//       <YStack
+//         position="relative"
+//         height={200}
+//         bg="$background"
+//         borderWidth={1}
+//         borderColor="$borderColor"
+//         borderRadius="$2"
+//         overflow="hidden"
+//       >
+//         {/* top safe area */}
+//         <Square
+//           testID="safe-area-top-bar"
+//           position="absolute"
+//           top={0}
+//           left={0}
+//           right={0}
+//           height={Math.max(insets.top, 20)}
+//           bg="$red10"
+//           opacity={0.5}
+//         />
+
+//         {/* bottom safe area */}
+//         <Square
+//           testID="safe-area-bottom-bar"
+//           position="absolute"
+//           bottom={0}
+//           left={0}
+//           right={0}
+//           height={Math.max(insets.bottom, 20)}
+//           bg="$blue10"
+//           opacity={0.5}
+//         />
+
+//         {/* left safe area */}
+//         <Square
+//           testID="safe-area-left-bar"
+//           position="absolute"
+//           top={0}
+//           bottom={0}
+//           left={0}
+//           width={Math.max(insets.left, 10)}
+//           bg="$green10"
+//           opacity={0.5}
+//         />
+
+//         {/* right safe area */}
+//         <Square
+//           testID="safe-area-right-bar"
+//           position="absolute"
+//           top={0}
+//           bottom={0}
+//           right={0}
+//           width={Math.max(insets.right, 10)}
+//           bg="$yellow10"
+//           opacity={0.5}
+//         />
+
+//         {/* content area */}
+//         <YStack
+//           position="absolute"
+//           top={Math.max(insets.top, 20)}
+//           bottom={Math.max(insets.bottom, 20)}
+//           left={Math.max(insets.left, 10)}
+//           right={Math.max(insets.right, 10)}
+//           alignItems="center"
+//           justifyContent="center"
+//         >
+//           <Text fontSize="$3" textAlign="center">
+//             Safe Content Area
+//           </Text>
+//         </YStack>
+//       </YStack>
+
+//       <XStack gap="$2" flexWrap="wrap">
+//         <XStack gap="$1" alignItems="center">
+//           <Square size={12} bg="$red10" borderRadius={2} />
+//           <Text fontSize="$2">Top</Text>
+//         </XStack>
+//         <XStack gap="$1" alignItems="center">
+//           <Square size={12} bg="$blue10" borderRadius={2} />
+//           <Text fontSize="$2">Bottom</Text>
+//         </XStack>
+//         <XStack gap="$1" alignItems="center">
+//           <Square size={12} bg="$green10" borderRadius={2} />
+//           <Text fontSize="$2">Left</Text>
+//         </XStack>
+//         <XStack gap="$1" alignItems="center">
+//           <Square size={12} bg="$yellow10" borderRadius={2} />
+//           <Text fontSize="$2">Right</Text>
+//         </XStack>
+//       </XStack>
+//     </YStack>
+//   )
+// }
+
+// export function SafeAreaCase() {
+//   return (
+//     <YStack padding="$4" gap="$4" flex={1} testID="safe-area-case">
+//       <Text fontWeight="bold" fontSize="$6">
+//         Safe Area Token Integration
+//       </Text>
+
+//       <SafeAreaStatus />
+//       <TokenDemo />
+//       <EdgeToEdgeDemo />
+
+//       {isWeb && (
+//         <YStack padding="$3" bg="$yellow2" borderRadius="$2" gap="$2">
+//           <Text fontWeight="bold" color="$yellow11">
+//             Web Note:
+//           </Text>
+//           <Text fontSize="$2" color="$yellow11">
+//             On web, $safeArea* tokens resolve to CSS env(safe-area-inset-*).
+//             The visual demo above uses getSafeArea().getInsets() which returns
+//             zeros on web (use CSS env() for actual web safe areas).
+//           </Text>
+//         </YStack>
+//       )}
+//     </YStack>
+//   )
+// }

package/src/usecases/ScrollViewRefCase.tsx

@@ -0,0 +1,88 @@
+import { useRef, useState } from 'react'
+import { ScrollView, type ScrollView as ScrollViewType } from '@hanzogui/scroll-view'
+import { Button, Text, YStack } from '@hanzo/gui'
+
+export function ScrollViewRefCase() {
+  const scrollRef = useRef<ScrollViewType>(null)
+  const [status, setStatus] = useState('ready')
+
+  const handleScrollTo = () => {
+    if (scrollRef.current?.scrollTo) {
+      scrollRef.current.scrollTo({ x: 0, y: 200, animated: false })
+      setStatus('scrolled-to-200')
+    } else {
+      setStatus('no-scrollTo-method')
+    }
+  }
+
+  const handleScrollToEnd = () => {
+    if (scrollRef.current?.scrollToEnd) {
+      scrollRef.current.scrollToEnd({ animated: false })
+      setStatus('scrolled-to-end')
+    } else {
+      setStatus('no-scrollToEnd-method')
+    }
+  }
+
+  const handleGetScrollableNode = () => {
+    if (scrollRef.current?.getScrollableNode) {
+      const node = scrollRef.current.getScrollableNode()
+      if (node && node instanceof HTMLElement) {
+        setStatus('got-scrollable-node')
+      } else {
+        setStatus('invalid-node')
+      }
+    } else {
+      setStatus('no-getScrollableNode-method')
+    }
+  }
+
+  return (
+    <YStack gap="$2" padding="$2" height={400}>
+      <Text id="status" testID="status">
+        {status}
+      </Text>
+
+      <YStack flexDirection="row" gap="$2">
+        <Button
+          id="scroll-to-btn"
+          testID="scroll-to-btn"
+          size="$2"
+          onPress={handleScrollTo}
+        >
+          scrollTo(200)
+        </Button>
+        <Button
+          id="scroll-to-end-btn"
+          testID="scroll-to-end-btn"
+          size="$2"
+          onPress={handleScrollToEnd}
+        >
+          scrollToEnd
+        </Button>
+        <Button
+          id="get-node-btn"
+          testID="get-node-btn"
+          size="$2"
+          onPress={handleGetScrollableNode}
+        >
+          getScrollableNode
+        </Button>
+      </YStack>
+
+      <ScrollView
+        ref={scrollRef}
+        id="test-scrollview"
+        testID="test-scrollview"
+        flex={1}
+        backgroundColor="$background"
+      >
+        {Array.from({ length: 50 }, (_, i) => (
+          <Text key={i} id={`item-${i}`} padding="$2">
+            Item {i}
+          </Text>
+        ))}
+      </ScrollView>
+    </YStack>
+  )
+}

package/src/usecases/SecondPage.tsx

@@ -0,0 +1,5 @@
+import { Square } from '@hanzo/gui'
+
+export function SecondPage() {
+  return <Square zIndex={100_001} />
+}