@hanzogui/kitchen-sink 3.0.5

package/src/usecases/OnLayoutStressCase.tsx

@@ -0,0 +1,353 @@
+import { memo, useCallback, useRef, useState, useMemo } from 'react'
+import { Button, Text, View, XStack, YStack, ScrollView } from '@hanzo/gui'
+
+type Stats = {
+  totalCallbacks: number
+  totalTime: number
+  maxTime: number
+  lastBatchSize: number
+  lastBatchTime: number
+}
+
+// deeply nested component tree
+const GRAY_COLORS = ['$gray2', '$gray3', '$gray4', '$gray5', '$gray6', '$gray7'] as const
+const GRID_COLORS = ['$red5', '$green5', '$blue5', '$purple5', '$orange5'] as const
+const SIBLING_COLORS = ['$red4', '$green4', '$blue4'] as const
+
+const DeepChild = memo(
+  ({
+    depth,
+    id,
+    onLayoutFired,
+  }: {
+    depth: number
+    id: string
+    onLayoutFired: () => void
+  }) => {
+    const handleLayout = useCallback(() => {
+      onLayoutFired()
+    }, [onLayoutFired])
+
+    if (depth === 0) {
+      return (
+        <View
+          testID={`deep-${id}`}
+          onLayout={handleLayout}
+          width={20 + (parseInt(id.split('-')[1] || '0') % 5) * 10}
+          height={15}
+          backgroundColor="$blue5"
+        />
+      )
+    }
+
+    return (
+      <View
+        testID={`deep-wrapper-${id}-${depth}`}
+        onLayout={handleLayout}
+        padding={2}
+        backgroundColor={GRAY_COLORS[Math.min(5, depth)] || '$gray5'}
+      >
+        <DeepChild depth={depth - 1} id={id} onLayoutFired={onLayoutFired} />
+      </View>
+    )
+  }
+)
+
+// grid item with variable sizes
+const GridItem = memo(
+  ({
+    id,
+    sizeMultiplier,
+    onLayoutFired,
+  }: {
+    id: number
+    sizeMultiplier: number
+    onLayoutFired: () => void
+  }) => {
+    const handleLayout = useCallback(() => {
+      onLayoutFired()
+    }, [onLayoutFired])
+
+    const baseSize = 30 + (id % 4) * 15
+    const size = baseSize * sizeMultiplier
+
+    return (
+      <View
+        testID={`grid-${id}`}
+        onLayout={handleLayout}
+        width={size}
+        height={size * 0.6}
+        backgroundColor={GRID_COLORS[id % 5]}
+        margin={2}
+      />
+    )
+  }
+)
+
+// list item that changes height
+const ListItem = memo(
+  ({
+    id,
+    expanded,
+    onLayoutFired,
+  }: {
+    id: number
+    expanded: boolean
+    onLayoutFired: () => void
+  }) => {
+    const handleLayout = useCallback(() => {
+      onLayoutFired()
+    }, [onLayoutFired])
+
+    return (
+      <View
+        testID={`list-${id}`}
+        onLayout={handleLayout}
+        width="100%"
+        height={expanded ? 60 : 30}
+        backgroundColor={id % 2 === 0 ? '$background' : '$backgroundHover'}
+        borderBottomWidth={1}
+        borderBottomColor="$borderColor"
+        padding="$2"
+      >
+        <Text fontSize={12}>Item {id}</Text>
+      </View>
+    )
+  }
+)
+
+// sibling groups that all need layout
+const SiblingGroup = memo(
+  ({
+    groupId,
+    count,
+    widthMultiplier,
+    onLayoutFired,
+  }: {
+    groupId: number
+    count: number
+    widthMultiplier: number
+    onLayoutFired: () => void
+  }) => {
+    return (
+      <XStack testID={`sibling-group-${groupId}`} flexWrap="wrap">
+        {Array.from({ length: count }, (_, i) => (
+          <View
+            key={i}
+            testID={`sibling-${groupId}-${i}`}
+            onLayout={onLayoutFired}
+            width={25 * widthMultiplier}
+            height={20}
+            backgroundColor={SIBLING_COLORS[i % 3]}
+            margin={1}
+          />
+        ))}
+      </XStack>
+    )
+  }
+)
+
+export function OnLayoutStressCase() {
+  const [stats, setStats] = useState<Stats>({
+    totalCallbacks: 0,
+    totalTime: 0,
+    maxTime: 0,
+    lastBatchSize: 0,
+    lastBatchTime: 0,
+  })
+  const [widthMultiplier, setWidthMultiplier] = useState(1)
+  const [expanded, setExpanded] = useState(false)
+  const [gridSize, setGridSize] = useState(1)
+  const [containerWidth, setContainerWidth] = useState(600)
+
+  // batch tracking
+  const batchStart = useRef(0)
+  const batchCount = useRef(0)
+  const batchTimeout = useRef<any>(null)
+
+  const onLayoutFired = useCallback(() => {
+    const now = performance.now()
+
+    if (batchCount.current === 0) {
+      batchStart.current = now
+    }
+    batchCount.current++
+
+    // debounce to capture full batch
+    if (batchTimeout.current) {
+      clearTimeout(batchTimeout.current)
+    }
+    batchTimeout.current = setTimeout(() => {
+      const batchTime = performance.now() - batchStart.current
+      const count = batchCount.current
+
+      setStats((s) => ({
+        totalCallbacks: s.totalCallbacks + count,
+        totalTime: s.totalTime + batchTime,
+        maxTime: Math.max(s.maxTime, batchTime),
+        lastBatchSize: count,
+        lastBatchTime: Math.round(batchTime),
+      }))
+
+      batchCount.current = 0
+    }, 100)
+  }, [])
+
+  const resetStats = useCallback(() => {
+    setStats({
+      totalCallbacks: 0,
+      totalTime: 0,
+      maxTime: 0,
+      lastBatchSize: 0,
+      lastBatchTime: 0,
+    })
+  }, [])
+
+  // create deep tree items
+  const deepItems = useMemo(
+    () =>
+      Array.from({ length: 10 }, (_, i) => (
+        <DeepChild key={i} depth={5} id={`deep-${i}`} onLayoutFired={onLayoutFired} />
+      )),
+    [onLayoutFired]
+  )
+
+  // create grid items (40 items)
+  const gridItems = useMemo(
+    () =>
+      Array.from({ length: 40 }, (_, i) => (
+        <GridItem
+          key={i}
+          id={i}
+          sizeMultiplier={gridSize}
+          onLayoutFired={onLayoutFired}
+        />
+      )),
+    [gridSize, onLayoutFired]
+  )
+
+  // create list items (20 items)
+  const listItems = useMemo(
+    () =>
+      Array.from({ length: 20 }, (_, i) => (
+        <ListItem key={i} id={i} expanded={expanded} onLayoutFired={onLayoutFired} />
+      )),
+    [expanded, onLayoutFired]
+  )
+
+  // create sibling groups (5 groups x 10 items = 50 items)
+  const siblingGroups = useMemo(
+    () =>
+      Array.from({ length: 5 }, (_, i) => (
+        <SiblingGroup
+          key={i}
+          groupId={i}
+          count={10}
+          widthMultiplier={widthMultiplier}
+          onLayoutFired={onLayoutFired}
+        />
+      )),
+    [widthMultiplier, onLayoutFired]
+  )
+
+  return (
+    <YStack flex={1} padding="$2">
+      {/* controls */}
+      <XStack gap="$2" flexWrap="wrap" padding="$2" backgroundColor="$background">
+        <Button
+          testID="btn-resize-width"
+          size="$2"
+          onPress={() => setWidthMultiplier((v) => (v === 1 ? 1.5 : 1))}
+        >
+          toggle width ({widthMultiplier}x)
+        </Button>
+        <Button
+          testID="btn-toggle-expand"
+          size="$2"
+          onPress={() => setExpanded((v) => !v)}
+        >
+          toggle expand ({expanded ? 'on' : 'off'})
+        </Button>
+        <Button
+          testID="btn-resize-grid"
+          size="$2"
+          onPress={() => setGridSize((v) => (v === 1 ? 1.3 : 1))}
+        >
+          toggle grid ({gridSize}x)
+        </Button>
+        <Button
+          testID="btn-resize-container"
+          size="$2"
+          onPress={() => setContainerWidth((v) => (v === 600 ? 400 : 600))}
+        >
+          container ({containerWidth}px)
+        </Button>
+        <Button testID="btn-reset-stats" size="$2" onPress={resetStats}>
+          reset stats
+        </Button>
+      </XStack>
+
+      {/* stats readout */}
+      <XStack gap="$3" padding="$2" backgroundColor="$backgroundHover" flexWrap="wrap">
+        <Text testID="stat-total" fontSize={11}>
+          total: {stats.totalCallbacks}
+        </Text>
+        <Text testID="stat-avg" fontSize={11}>
+          avg:{' '}
+          {stats.totalCallbacks > 0
+            ? Math.round((stats.totalTime / stats.totalCallbacks) * 100) / 100
+            : 0}
+          ms
+        </Text>
+        <Text testID="stat-max" fontSize={11}>
+          max: {Math.round(stats.maxTime)}ms
+        </Text>
+        <Text testID="stat-last-batch" fontSize={11}>
+          lastBatch: {stats.lastBatchSize}
+        </Text>
+        <Text testID="stat-last-time" fontSize={11}>
+          lastTime: {stats.lastBatchTime}ms
+        </Text>
+      </XStack>
+
+      {/* scrollable content */}
+      <ScrollView flex={1}>
+        <YStack testID="stress-container" width={containerWidth} gap="$3">
+          {/* section 1: deeply nested (10 items x 6 depth = ~60 onLayout nodes) */}
+          <YStack testID="section-deep">
+            <Text fontSize={12} fontWeight="bold">
+              Deep Nesting (10x6 depth)
+            </Text>
+            <XStack flexWrap="wrap" gap="$1">
+              {deepItems}
+            </XStack>
+          </YStack>
+
+          {/* section 2: grid layout (40 items) */}
+          <YStack testID="section-grid">
+            <Text fontSize={12} fontWeight="bold">
+              Grid (40 items)
+            </Text>
+            <XStack flexWrap="wrap">{gridItems}</XStack>
+          </YStack>
+
+          {/* section 3: list with varying heights (20 items) */}
+          <YStack testID="section-list">
+            <Text fontSize={12} fontWeight="bold">
+              List (20 items)
+            </Text>
+            <YStack>{listItems}</YStack>
+          </YStack>
+
+          {/* section 4: sibling groups (50 items) */}
+          <YStack testID="section-siblings">
+            <Text fontSize={12} fontWeight="bold">
+              Sibling Groups (5x10)
+            </Text>
+            <YStack gap="$2">{siblingGroups}</YStack>
+          </YStack>
+        </YStack>
+      </ScrollView>
+    </YStack>
+  )
+}

package/src/usecases/OpacityModifierCase.tsx

@@ -0,0 +1,113 @@
+import { useState } from 'react'
+import { Button, Text, View, XStack, YStack, styled } from '@hanzo/gui'
+
+const TransparentBox = styled(View, {
+  width: 100,
+  height: 100,
+
+  variants: {
+    faded: {
+      true: {
+        backgroundColor: '$customRed/50' as any,
+      },
+    },
+  } as const,
+})
+
+export function OpacityModifierCase() {
+  const [toggled, setToggled] = useState(false)
+
+  return (
+    <YStack gap="$4" padding="$4">
+      {/* static background colors with opacity modifiers */}
+      <XStack gap="$2">
+        <View
+          data-testid="opacity-bg-red-50"
+          backgroundColor={'$customRed/50' as any}
+          width={100}
+          height={100}
+        />
+        <View
+          data-testid="opacity-bg-blue-75"
+          backgroundColor={'$customBlue/75' as any}
+          width={100}
+          height={100}
+        />
+        <View
+          data-testid="opacity-bg-green-25"
+          backgroundColor={'$customGreen/25' as any}
+          width={100}
+          height={100}
+        />
+      </XStack>
+
+      {/* text color with opacity */}
+      <View data-testid="opacity-text-container">
+        <Text data-testid="opacity-text" color={'$customRed/50' as any} fontSize="$6">
+          50% red text
+        </Text>
+      </View>
+
+      {/* border color with opacity */}
+      <View
+        data-testid="opacity-border"
+        borderColor={'$customRed/30' as any}
+        borderWidth={2}
+        width={100}
+        height={100}
+      />
+
+      {/* $token/100 should be same as no modifier */}
+      <View
+        data-testid="opacity-bg-full"
+        backgroundColor={'$customRed/100' as any}
+        width={100}
+        height={100}
+      />
+
+      {/* $token/0 should be fully transparent */}
+      <View
+        data-testid="opacity-bg-zero"
+        backgroundColor={'$customRed/0' as any}
+        width={100}
+        height={100}
+      />
+
+      {/* variant with opacity modifier */}
+      <TransparentBox data-testid="opacity-variant" faded={true as any} />
+
+      {/* hover state with opacity modifier */}
+      <View
+        data-testid="opacity-hover"
+        backgroundColor={'$customBlue/100' as any}
+        hoverStyle={{
+          backgroundColor: '$customBlue/50' as any,
+        }}
+        width={100}
+        height={100}
+      />
+
+      {/* animated color with opacity modifier */}
+      <View
+        {...({
+          'data-testid': 'opacity-animated',
+          animation: '500ms',
+          backgroundColor: toggled ? '$customBlue/75' : '$customRed/50',
+          width: 100,
+          height: 100,
+        } as any)}
+      />
+      <Button data-testid="opacity-toggle" onPress={() => setToggled((v) => !v)}>
+        Toggle
+      </Button>
+
+      {/* theme value with opacity modifier */}
+      <View
+        data-testid="opacity-theme-bg"
+        backgroundColor={'$background/50' as any}
+        width={100}
+        height={100}
+      />
+    </YStack>
+  )
+}

package/src/usecases/OverlayStyled.tsx

@@ -0,0 +1,66 @@
+import { Button, XStack } from '@hanzo/gui'
+import { AlertDialog, styled } from '@hanzo/gui'
+
+export const MyOverlay = styled(AlertDialog.Overlay, {
+  transition: 'quick',
+  backgroundColor: 'gray',
+  opacity: 0.7,
+  enterStyle: { opacity: 0 },
+})
+
+export const MyAlert = AlertDialog
+
+export function OverlayStyled() {
+  return (
+    <XStack p="$10" gap="$4">
+      <WorkingExample />
+      <NotWorkingExample />
+    </XStack>
+  )
+}
+
+const WorkingExample = () => {
+  return (
+    <MyAlert>
+      <MyAlert.Trigger asChild>
+        <Button>Open working</Button>
+      </MyAlert.Trigger>
+      <MyAlert.Portal>
+        <MyAlert.Overlay
+          key="overlay"
+          transition="quick"
+          backgroundColor="gray"
+          opacity={0.7}
+          enterStyle={{ opacity: 0 }}
+        />
+        <MyAlert.Content>
+          <MyAlert.Title>Test</MyAlert.Title>
+          <MyAlert.Description>Lorem ipsum dolor sit amet</MyAlert.Description>
+          <MyAlert.Cancel asChild>
+            <Button>OK</Button>
+          </MyAlert.Cancel>
+        </MyAlert.Content>
+      </MyAlert.Portal>
+    </MyAlert>
+  )
+}
+
+const NotWorkingExample = () => {
+  return (
+    <MyAlert>
+      <MyAlert.Trigger asChild>
+        <Button>Open not working </Button>
+      </MyAlert.Trigger>
+      <MyAlert.Portal>
+        <MyOverlay key="overlay" />
+        <MyAlert.Content>
+          <MyAlert.Title>Test</MyAlert.Title>
+          <MyAlert.Description>Lorem ipsum dolor sit amet</MyAlert.Description>
+          <MyAlert.Cancel asChild>
+            <Button>OK</Button>
+          </MyAlert.Cancel>
+        </MyAlert.Content>
+      </MyAlert.Portal>
+    </MyAlert>
+  )
+}

package/src/usecases/ParagraphSpanFontInheritance.tsx

@@ -0,0 +1,53 @@
+import { Paragraph, SizableText, Span, Text } from '@hanzo/gui'
+
+// Test case: Span inside Paragraph should inherit fontFamily
+// Issue: When Span is nested inside Paragraph with fontFamily="$mono",
+// the Span does not inherit the mono font family
+
+export function ParagraphSpanFontInheritance() {
+  return (
+    <>
+      {/* Test 1: Span should inherit $mono fontFamily from Paragraph */}
+      <Paragraph testID="parent-mono" fontFamily="$mono">
+        mono paragraph with <Span testID="nested-span-mono">span text</Span> inside
+      </Paragraph>
+
+      {/* Test 2: Span should inherit $body fontFamily from Paragraph */}
+      <Paragraph testID="parent-body" fontFamily="$body">
+        body paragraph with <Span testID="nested-span-body">span text</Span> inside
+      </Paragraph>
+
+      {/* Test 3: Text inside Text (for comparison) */}
+      <Text testID="parent-text-mono" fontFamily="$mono">
+        mono text with <Text testID="nested-text-mono">nested text</Text> inside
+      </Text>
+
+      {/* Test 4: Span with explicit fontFamily override */}
+      <Paragraph testID="parent-mono-override" fontFamily="$mono">
+        mono paragraph with{' '}
+        <Span testID="nested-span-override" fontFamily="$body">
+          span with body font
+        </Span>{' '}
+        inside
+      </Paragraph>
+
+      {/* Test 5: SizableText (which explicitly sets fontFamily) should keep its explicit font */}
+      <Text testID="parent-mono-sizable" fontFamily="$mono">
+        mono text with{' '}
+        <SizableText testID="nested-sizable-body">
+          sizable text with body font
+        </SizableText>{' '}
+        inside
+      </Text>
+
+      {/* Test 6: Text (like Link) inside Paragraph should inherit fontFamily */}
+      <Paragraph testID="parent-para-link" fontFamily="$mono">
+        mono paragraph with{' '}
+        <Text testID="nested-link-text" render="a" cursor="pointer">
+          link text
+        </Text>{' '}
+        inside
+      </Paragraph>
+    </>
+  )
+}

package/src/usecases/PlaceholderTextColor.tsx

@@ -0,0 +1,20 @@
+import { Input, Text, YStack } from '@hanzo/gui'
+
+export const PlaceholderTextColor = () => (
+  <YStack gap="$3" p="$4">
+    <Text>Token "$red10":</Text>
+    <Input placeholder="should be red" placeholderTextColor="$red10" />
+
+    <Text>Token "$green10":</Text>
+    <Input placeholder="should be green" placeholderTextColor="$green10" />
+
+    <Text>Token "$color10":</Text>
+    <Input placeholder="should be $color10" placeholderTextColor="$color10" />
+
+    <Text>Token "$blue10":</Text>
+    <Input placeholder="should be blue" placeholderTextColor="$blue10" />
+
+    <Text>No placeholderTextColor (default):</Text>
+    <Input placeholder="default placeholder color" />
+  </YStack>
+)

package/src/usecases/PointerEventsCase.tsx

@@ -0,0 +1,100 @@
+import { useState } from 'react'
+import { Square, Text, XStack, YStack } from '@hanzo/gui'
+
+export function PointerEventsCase() {
+  const [counts, setCounts] = useState({
+    down: 0,
+    up: 0,
+    move: 0,
+    cancel: 0,
+    enter: 0,
+    leave: 0,
+  })
+
+  // separate counters for capture test
+  const [captureMove, setCaptureMove] = useState(0)
+
+  // box-none test counters
+  const [boxNoneCounts, setBoxNoneCounts] = useState({
+    parent: 0,
+    child: 0,
+    behind: 0,
+  })
+
+  return (
+    <YStack testID="pointer-events-root" padding="$4" gap="$4">
+      <Square
+        testID="pointer-target"
+        size={200}
+        backgroundColor="$blue5"
+        onPointerDown={() => setCounts((c) => ({ ...c, down: c.down + 1 }))}
+        onPointerUp={() => setCounts((c) => ({ ...c, up: c.up + 1 }))}
+        onPointerMove={() => setCounts((c) => ({ ...c, move: c.move + 1 }))}
+        onPointerCancel={() => setCounts((c) => ({ ...c, cancel: c.cancel + 1 }))}
+        onPointerEnter={() => setCounts((c) => ({ ...c, enter: c.enter + 1 }))}
+        onPointerLeave={() => setCounts((c) => ({ ...c, leave: c.leave + 1 }))}
+      />
+
+      {/* capture test: should receive moves outside bounds when captured */}
+      <Square
+        testID="capture-target"
+        size={200}
+        backgroundColor="$green5"
+        onPointerDown={(e: any) => {
+          e.target.setPointerCapture(e.pointerId)
+        }}
+        onPointerMove={() => setCaptureMove((c) => c + 1)}
+        onPointerUp={(e: any) => {
+          e.target.releasePointerCapture(e.pointerId)
+        }}
+      />
+
+      {/* box-none test: parent should not receive clicks, but child and element behind should */}
+      <YStack position="relative" width={300} height={200}>
+        {/* element behind the box-none parent */}
+        <Square
+          testID="box-none-behind"
+          position="absolute"
+          top={20}
+          left={20}
+          size={100}
+          backgroundColor="$red5"
+          onPress={() => setBoxNoneCounts((c) => ({ ...c, behind: c.behind + 1 }))}
+        />
+        {/* box-none parent covering part of behind element */}
+        <XStack
+          testID="box-none-parent"
+          pointerEvents="box-none"
+          position="absolute"
+          top={0}
+          left={0}
+          width={200}
+          height={150}
+          backgroundColor="$purple5"
+          opacity={0.5}
+          onPress={() => setBoxNoneCounts((c) => ({ ...c, parent: c.parent + 1 }))}
+        >
+          {/* child inside box-none parent */}
+          <Square
+            testID="box-none-child"
+            size={60}
+            backgroundColor="$green5"
+            onPress={() => setBoxNoneCounts((c) => ({ ...c, child: c.child + 1 }))}
+          />
+        </XStack>
+      </YStack>
+
+      <XStack gap="$2" flexWrap="wrap">
+        <Text testID="down-count">Down: {counts.down}</Text>
+        <Text testID="up-count">Up: {counts.up}</Text>
+        <Text testID="move-count">Move: {counts.move}</Text>
+        <Text testID="enter-count">Enter: {counts.enter}</Text>
+        <Text testID="leave-count">Leave: {counts.leave}</Text>
+        <Text testID="capture-move-count">CapMove: {captureMove}</Text>
+        <Text testID="box-none-parent-count">BoxNoneParent: {boxNoneCounts.parent}</Text>
+        <Text testID="box-none-child-count">BoxNoneChild: {boxNoneCounts.child}</Text>
+        <Text testID="box-none-behind-count">BoxNoneBehind: {boxNoneCounts.behind}</Text>
+      </XStack>
+    </YStack>
+  )
+}