@hanzogui/kitchen-sink 3.0.5

package/src/usecases/GroupProp.tsx

@@ -0,0 +1,96 @@
+import { Square, View, XStack, styled } from '@hanzo/gui'
+
+const GroupTest = styled(View, {
+  group: 'testy',
+})
+
+const GroupChild = styled(View, {
+  width: 100,
+  height: 100,
+  backgroundColor: 'pink',
+
+  pressStyle: {
+    backgroundColor: 'black',
+  },
+
+  '$group-testy': {
+    backgroundColor: 'rgb(255,0,0)',
+
+    hoverStyle: {
+      backgroundColor: 'rgb(160, 32, 240)',
+    },
+
+    pressStyle: {
+      backgroundColor: 'rgb(255,255,0)',
+    },
+  },
+
+  '$group-testy-maxMd': {
+    backgroundColor: 'rgb(0,255,0)',
+
+    hoverStyle: {
+      backgroundColor: 'rgb(160, 32, 240)',
+    },
+
+    pressStyle: {
+      backgroundColor: 'rgb(255,255,0)',
+    },
+  },
+})
+
+const GroupChildMedia = styled(GroupChild, {
+  width: 100,
+  height: 100,
+  backgroundColor: 'rgb(0,0,255)',
+
+  '$group-testy': {
+    backgroundColor: 'rgb(255,0,0)',
+
+    hoverStyle: {
+      backgroundColor: 'rgb(160, 32, 240)',
+    },
+
+    pressStyle: {
+      backgroundColor: 'rgb(255,255,0)',
+    },
+  },
+
+  '$group-testy-maxMd': {
+    backgroundColor: 'rgb(0,255,0)',
+
+    hoverStyle: {
+      backgroundColor: 'rgb(160, 32, 240)',
+    },
+
+    pressStyle: {
+      backgroundColor: 'rgb(255,255,0)',
+    },
+  },
+})
+
+export function GroupProp() {
+  return (
+    <View margin={20}>
+      <GroupTest>
+        <GroupChild id="styled" />
+      </GroupTest>
+
+      <GroupTest width={1000}>
+        <GroupChildMedia id="styled-media-unmatched" />
+      </GroupTest>
+
+      <GroupTest width={200}>
+        <GroupChildMedia id="styled-media-matched" />
+      </GroupTest>
+
+      <XStack group="testy">
+        <Square
+          id="inline"
+          bg="rgb(255,0,0)"
+          $group-testy={{ bg: 'rgb(0,0,255)' }}
+          size={100}
+        />
+      </XStack>
+    </View>
+  )
+}

package/src/usecases/GroupPseudoVariantOverride.tsx

@@ -0,0 +1,56 @@
+import { View, styled } from '@hanzo/gui'
+
+// reproduces bug where variant's $group-<name>-press opacity
+// doesn't override the base $group-<name>-press opacity
+
+const Overlay = styled(View, {
+  position: 'absolute',
+  pointerEvents: 'none',
+  inset: 0,
+  backgroundColor: 'blue',
+  opacity: 1,
+
+  '$group-testy-hover': {
+    opacity: 0.4,
+  },
+
+  '$group-testy-press': {
+    opacity: 0.6,
+  },
+
+  variants: {
+    variant: {
+      action: {
+        backgroundColor: 'green',
+
+        '$group-testy-hover': {
+          opacity: 1,
+          backgroundColor: 'yellow',
+        },
+
+        '$group-testy-press': {
+          opacity: 1,
+          backgroundColor: 'red',
+        },
+      },
+    },
+  } as const,
+})
+
+export function GroupPseudoVariantOverride() {
+  return (
+    <View gap="$4" padding="$4">
+      {/* base: press should get opacity 0.6 */}
+      <View group="testy" id="base-group" padding="$4" backgroundColor="$gray5">
+        <Overlay id="base-overlay" />
+        <View height={40} />
+      </View>
+
+      {/* action variant: press should get opacity 1 (overriding base 0.6) */}
+      <View group="testy" id="action-group" padding="$4" backgroundColor="$gray5">
+        <Overlay id="action-overlay" variant="action" />
+        <View height={40} />
+      </View>
+    </View>
+  )
+}

package/src/usecases/GroupUseCases.tsx

@@ -0,0 +1,94 @@
+import { Button, XGroup, YStack } from '@hanzo/gui'
+
+export function GroupUseCases() {
+  return (
+    <YStack gap="$4">
+      <XGroup testID="simple-api-group">
+        <Button>this</Button>
+        <Button>is</Button>
+        <Button>simple</Button>
+        <Button>api</Button>
+        <Button disabled testID="simple-api-disabled-button">
+          disabled
+        </Button>
+      </XGroup>
+
+      <XGroup disabled testID="simple-api-disabled-group">
+        <Button>this</Button>
+        <Button>is</Button>
+        <Button>simple</Button>
+        <Button disabled={false} testID="not-disabled">
+          active
+        </Button>
+        <Button>api</Button>
+      </XGroup>
+
+      <XGroup testID="simple-api-group-no-radius-pass">
+        <Button>this</Button>
+        <Button>is</Button>
+        <Button>simple</Button>
+        <Button>api</Button>
+      </XGroup>
+
+      <XGroup testID="composite-api-group">
+        <XGroup.Item>
+          <Button>this</Button>
+        </XGroup.Item>
+        <XGroup.Item>
+          <Button>is</Button>
+        </XGroup.Item>
+        <XGroup.Item forcePlacement="first">
+          <Button testID="composite-api-force-placement-first">first</Button>
+        </XGroup.Item>
+        <XGroup.Item forcePlacement="center">
+          <Button testID="composite-api-force-placement-center">center</Button>
+        </XGroup.Item>
+        <XGroup.Item forcePlacement="last">
+          <Button testID="composite-api-force-placement-last">last</Button>
+        </XGroup.Item>
+        <XGroup.Item>
+          <Button>composite</Button>
+        </XGroup.Item>
+        <Button testID="not-using-item">broken</Button>
+        <XGroup.Item>
+          <Button>api</Button>
+        </XGroup.Item>
+      </XGroup>
+
+      <XGroup disabled testID="composite-api-disabled-group">
+        <XGroup.Item>
+          <Button>this</Button>
+        </XGroup.Item>
+        <XGroup.Item>
+          <Button>is</Button>
+        </XGroup.Item>
+        <XGroup.Item>
+          <Button>composite</Button>
+        </XGroup.Item>
+        <XGroup.Item>
+          <Button disabled={false} testID="not-disabled">
+            disabled
+          </Button>
+        </XGroup.Item>
+        <XGroup.Item>
+          <Button>api</Button>
+        </XGroup.Item>
+      </XGroup>
+
+      <XGroup testID="composite-api-group-no-radius-pass">
+        <XGroup.Item>
+          <Button>this</Button>
+        </XGroup.Item>
+        <XGroup.Item>
+          <Button>is</Button>
+        </XGroup.Item>
+        <XGroup.Item>
+          <Button>composite</Button>
+        </XGroup.Item>
+        <XGroup.Item>
+          <Button>api</Button>
+        </XGroup.Item>
+      </XGroup>
+    </YStack>
+  )
+}

package/src/usecases/HeightMediaQueryOverrideCase.tsx

@@ -0,0 +1,183 @@
+import { YStack, XStack, Text, Square, styled } from '@hanzo/gui'
+
+// styled component with scale in definition - test if this behaves differently
+const StyledBox = styled(YStack, {
+  width: 100,
+  height: 100,
+  bg: '$purple10',
+  scale: 1,
+  transformOrigin: 'left top',
+})
+
+// styled component with scale in definition (for runtime media override test)
+const StyledBoxWithMedia = styled(YStack, {
+  width: 100,
+  height: 100,
+  bg: '$yellow10',
+  scale: 1,
+  transformOrigin: 'left top',
+} as const)
+
+// EXACT match for ContainerLarge from chat app:
+// styled component with WIDTH media queries ($md, $lg) in definition
+// then used with $height-sm at runtime
+const ContainerLarge = styled(YStack, {
+  mx: 'auto',
+  px: '$6',
+  width: '100%',
+  position: 'relative',
+  maxWidth: 1200,
+  bg: '$blue10',
+
+  $md: {
+    px: '$8',
+  },
+
+  $lg: {
+    px: '$10',
+  },
+})
+
+/**
+ * Test case for height media query override
+ *
+ * Tests that $height-lg media query properly overrides base scale.
+ * height-lg breakpoint: minHeight 1280px
+ */
+
+export function HeightMediaQueryOverrideCase() {
+  return (
+    <YStack p="$4" gap="$6" flex={1} minH={0}>
+      <Text fontSize="$5" fontWeight="bold">
+        Height Media Query Override Test
+      </Text>
+      <Text fontSize="$2" color="$color10">
+        Resize window height to test. At $height-lg (height &gt;= 1280), scale should
+        change.
+      </Text>
+
+      {/* Test 1: scale=1 base with $height-sm override (user's exact case) */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">Test 1: scale=1 with $height-sm override</Text>
+        <Text fontSize="$2">Base: scale=1, $height-sm: scale=2 (minHeight: 640)</Text>
+        <XStack height={200} bg="$color3" alignItems="center" justifyContent="center">
+          <Square
+            testID="test-height-scale"
+            data-testid="test-height-scale"
+            size={100}
+            bg="$red10"
+            scale={1}
+            transformOrigin="left top"
+            $height-sm={{
+              scale: 2,
+            }}
+          />
+        </XStack>
+      </YStack>
+
+      {/* Test 1b: NO base scale, only $height-lg */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">Test 1b: NO base scale, only $height-lg</Text>
+        <Text fontSize="$2">$height-lg: scale=2</Text>
+        <XStack height={200} bg="$color3" alignItems="center" justifyContent="center">
+          <Square
+            testID="test-height-scale-no-base"
+            data-testid="test-height-scale-no-base"
+            size={100}
+            bg="$blue10"
+            transformOrigin="left top"
+            {...{
+              '$height-lg': {
+                scale: 2,
+              },
+            }}
+          />
+        </XStack>
+      </YStack>
+
+      {/* Test 2: comparison with $sm (width query) for scale */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">Test 2: Scale override with $sm (comparison)</Text>
+        <Text fontSize="$2">Base: scale=0.8 (blue), $sm: scale=1.5 (orange)</Text>
+        <Text fontSize="$2">
+          Expected: When width &gt;= 640px, box should be 1.5x larger and orange
+        </Text>
+        <XStack height={200} bg="$color3" alignItems="center" justifyContent="center">
+          <Square
+            testID="test-width-scale"
+            data-testid="test-width-scale"
+            size={100}
+            bg="$blue10"
+            scale={0.8}
+            transformOrigin="center center"
+            $sm={{
+              scale: 1.5,
+              bg: '$orange10',
+            }}
+          />
+        </XStack>
+      </YStack>
+
+      {/* Test 3: styled component with scale=1 in definition + $height-sm override */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">Test 3: Styled component with scale=1 in definition</Text>
+        <Text fontSize="$2">StyledBox has scale=1, runtime $height-sm: scale=2</Text>
+        <XStack height={200} bg="$color3" alignItems="center" justifyContent="center">
+          <StyledBox
+            testID="test-styled-scale"
+            data-testid="test-styled-scale"
+            {...{
+              '$height-sm': {
+                scale: 2,
+                bg: '$green10',
+              },
+            }}
+          />
+        </XStack>
+      </YStack>
+
+      {/* Test 4: styled component with scale in definition, override at runtime */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">
+          Test 4: Styled with scale in definition + runtime $height-sm override
+        </Text>
+        <Text fontSize="$2">Definition: scale=1. Runtime $height-sm: scale=2</Text>
+        <XStack height={200} bg="$color3" alignItems="center" justifyContent="center">
+          <StyledBoxWithMedia
+            testID="test-styled-media-override"
+            data-testid="test-styled-media-override"
+            {...{
+              '$height-sm': {
+                scale: 2,
+                bg: '$green10',
+              },
+            }}
+          />
+        </XStack>
+      </YStack>
+
+      {/* Test 5: EXACT ContainerLarge scenario from chat app */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">
+          Test 5: ContainerLarge with WIDTH queries + runtime $height-sm scale
+        </Text>
+        <Text fontSize="$2">
+          ContainerLarge has $md/$lg width queries. Runtime: scale=1, $height-sm: scale=2
+        </Text>
+        <XStack height={200} bg="$color3" alignItems="center" justifyContent="center">
+          <ContainerLarge
+            testID="test-container-large"
+            data-testid="test-container-large"
+            transformOrigin="left top"
+            scale={1}
+            $height-sm={{
+              scale: 2,
+            }}
+          >
+            <Square size={50} bg="$red10" />
+          </ContainerLarge>
+        </XStack>
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/InputAutoFocusAfterMenuCase.tsx

@@ -0,0 +1,105 @@
+import { Menu } from '@hanzogui/menu'
+import { Input } from '@hanzogui/input'
+import { Button, YStack, Text } from '@hanzo/gui'
+import { useState, useRef } from 'react'
+
+/**
+ * tests that Input autoFocus works both standalone and after a menu closes,
+ * and that onCloseAutoFocus with preventDefault properly prevents focus restoration.
+ */
+export function InputAutoFocusAfterMenuCase() {
+  const [showInput, setShowInput] = useState(false)
+  const [preventDefaultFocusTarget, setPreventDefaultFocusTarget] = useState('')
+  const customInputRef = useRef<HTMLInputElement>(null) as any
+
+  return (
+    <YStack padding="$4" gap="$4" alignItems="flex-start">
+      {/* standalone autoFocus test */}
+      <Input
+        data-testid="autofocus-input"
+        placeholder="Should be auto-focused"
+        autoFocus
+      />
+
+      {/* menu -> input transition test */}
+      <Menu placement="bottom-start">
+        <Menu.Trigger asChild>
+          <Button data-testid="menu-trigger">Open Menu</Button>
+        </Menu.Trigger>
+
+        <Menu.Portal zIndex={100}>
+          <Menu.Content
+            data-testid="menu-content"
+            p="$2"
+            minWidth={200}
+            borderWidth={1}
+            borderColor="$borderColor"
+            elevation="$3"
+          >
+            <Menu.Item
+              data-testid="menu-item-show-input"
+              key="show-input"
+              textValue="Show Input"
+              onPress={() => setShowInput(true)}
+            >
+              <Menu.ItemTitle>Show Input</Menu.ItemTitle>
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+
+      {showInput && (
+        <Input
+          data-testid="after-menu-input"
+          placeholder="Should focus after menu closes"
+          autoFocus
+        />
+      )}
+
+      {/* onCloseAutoFocus preventDefault test: prevent focus restore + manually focus a custom target */}
+      <Input
+        ref={customInputRef}
+        data-testid="custom-focus-target"
+        placeholder="Custom focus target"
+      />
+
+      <Menu placement="bottom-start">
+        <Menu.Trigger asChild>
+          <Button data-testid="prevent-default-trigger">
+            Open Menu (preventDefault)
+          </Button>
+        </Menu.Trigger>
+
+        <Menu.Portal zIndex={100}>
+          <Menu.Content
+            data-testid="prevent-default-menu-content"
+            p="$2"
+            minWidth={200}
+            borderWidth={1}
+            borderColor="$borderColor"
+            elevation="$3"
+            onCloseAutoFocus={(event) => {
+              event.preventDefault()
+              // manually focus a custom target instead of the trigger
+              customInputRef.current?.focus()
+              setPreventDefaultFocusTarget('custom-focused')
+            }}
+          >
+            <Menu.Item
+              data-testid="prevent-default-menu-item"
+              key="close"
+              textValue="Close"
+            >
+              <Menu.ItemTitle>Close & Focus Custom</Menu.ItemTitle>
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+
+      <Text data-testid="input-visible">
+        {showInput ? 'input-visible' : 'input-hidden'}
+      </Text>
+      <Text data-testid="prevent-default-status">{preventDefaultFocusTarget}</Text>
+    </YStack>
+  )
+}

package/src/usecases/InputAutoFocusStyledCase.tsx

@@ -0,0 +1,39 @@
+import { Input } from '@hanzogui/input'
+import { useState } from 'react'
+import { styled, Button, YStack } from '@hanzo/gui'
+
+const StyledInput = styled(Input, {
+  borderColor: '$blue8',
+  borderWidth: 2,
+})
+
+export function InputAutoFocusStyledCase() {
+  const [view, setView] = useState<'plain' | 'styled' | null>(null)
+
+  return (
+    <YStack padding="$4" gap="$4">
+      {view === null && (
+        <>
+          <Button data-testid="show-plain" onPress={() => setView('plain')}>
+            Show Plain
+          </Button>
+          <Button data-testid="show-styled" onPress={() => setView('styled')}>
+            Show Styled
+          </Button>
+        </>
+      )}
+
+      {view === 'plain' && (
+        <Input data-testid="plain-autofocus" placeholder="Plain autoFocus" autoFocus />
+      )}
+
+      {view === 'styled' && (
+        <StyledInput
+          data-testid="styled-autofocus"
+          placeholder="Styled autoFocus"
+          autoFocus
+        />
+      )}
+    </YStack>
+  )
+}