@hanzogui/kitchen-sink 3.0.5

package/src/usecases/FocusVisibleButton.tsx

@@ -0,0 +1,14 @@
+import { Button } from '@hanzo/gui'
+
+export function FocusVisibleButton() {
+  return (
+    <Button
+      id="focus-visible-button"
+      borderColor="red"
+      borderWidth={1}
+      focusVisibleStyle={{
+        borderWidth: 2,
+      }}
+    />
+  )
+}

package/src/usecases/FocusVisibleButtonPointer.tsx

@@ -0,0 +1,13 @@
+import { Button } from '@hanzo/gui'
+
+export function FocusVisibleButtonPointer() {
+  return (
+    <Button
+      id="focus-visible-button"
+      borderWidth={1}
+      focusVisibleStyle={{
+        borderWidth: 2,
+      }}
+    />
+  )
+}

package/src/usecases/FocusVisibleButtonWithFocusStyle.tsx

@@ -0,0 +1,16 @@
+import { Button } from '@hanzo/gui'
+
+export function FocusVisibleButtonWithFocusStyle() {
+  return (
+    <Button
+      id="focus-visible-button"
+      borderWidth={1}
+      focusStyle={{
+        borderWidth: 2,
+      }}
+      focusVisibleStyle={{
+        borderWidth: 3,
+      }}
+    />
+  )
+}

package/src/usecases/FocusWithinCase.tsx

@@ -0,0 +1,55 @@
+import { useRef } from 'react'
+import { Input, Text, YStack, styled } from '@hanzo/gui'
+
+const FocusWithinContainer = styled(YStack, {
+  borderColor: '#ddd',
+  borderWidth: 1,
+  padding: 20,
+  focusWithinStyle: { borderColor: 'blue', borderWidth: 2 },
+})
+
+function RenderCounter({ id }: { id: string }) {
+  const count = useRef(0)
+  count.current++
+  return <Text data-testid={`${id}-renders`}>{count.current}</Text>
+}
+
+export function FocusWithinCase() {
+  return (
+    <YStack gap={20}>
+      {/* direct prop path */}
+      <YStack
+        data-testid="direct-parent"
+        focusWithinStyle={{ borderColor: 'red', borderWidth: 2 }}
+        padding={20}
+        borderColor="#ddd"
+        borderWidth={1}
+      >
+        <RenderCounter id="direct" />
+        <Text>Direct prop</Text>
+        <Input data-testid="direct-input" placeholder="Focus me" />
+      </YStack>
+
+      {/* styled() path — exercises pseudos?.focusWithinStyle condition */}
+      <FocusWithinContainer data-testid="styled-parent">
+        <RenderCounter id="styled" />
+        <Text>Styled component</Text>
+        <Input data-testid="styled-input" placeholder="Focus me" />
+      </FocusWithinContainer>
+
+      {/* animated path — exercises JS state via animation driver */}
+      <YStack
+        data-testid="animated-parent"
+        focusWithinStyle={{ borderColor: 'green', borderWidth: 2 }}
+        padding={20}
+        borderColor="#ddd"
+        borderWidth={1}
+        transition="quick"
+      >
+        <RenderCounter id="animated" />
+        <Text>Animated</Text>
+        <Input data-testid="animated-input" placeholder="Focus me" />
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/FontTokensInVariants.tsx

@@ -0,0 +1,14 @@
+import { Text as GuiText, styled } from '@hanzo/gui'
+
+export const FontTokensInVariants = styled(GuiText, {
+  borderRadius: 100_000_000,
+
+  variants: {
+    type: {
+      H1: {
+        fontFamily: '$mono',
+        fontSize: '$1',
+      },
+    },
+  } as const,
+})

package/src/usecases/FormButtonTypeCase.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react'
+import { Button, Form, Input, Text, YStack } from '@hanzo/gui'
+
+export function FormButtonTypeCase() {
+  const [submitted, setSubmitted] = useState(false)
+  const [buttonClicked, setButtonClicked] = useState(false)
+
+  return (
+    <YStack gap="$4" padding="$4">
+      <Form
+        onSubmit={() => {
+          setSubmitted(true)
+        }}
+      >
+        <YStack gap="$2">
+          <Input data-testid="form-input" placeholder="Press enter to submit" />
+
+          <Button data-testid="regular-button" onPress={() => setButtonClicked(true)}>
+            Regular Button (type=button)
+          </Button>
+
+          <Form.Trigger data-testid="submit-button">
+            Submit Button (type=submit)
+          </Form.Trigger>
+        </YStack>
+      </Form>
+
+      <Text data-testid="submit-status">{submitted ? 'submitted' : 'not-submitted'}</Text>
+      <Text data-testid="button-status">
+        {buttonClicked ? 'button-clicked' : 'button-not-clicked'}
+      </Text>
+    </YStack>
+  )
+}

package/src/usecases/GlobalScopedTriggerIsolationCase.tsx

@@ -0,0 +1,178 @@
+import { Menu } from '@hanzogui/menu'
+import { memo, useRef, useState } from 'react'
+import {
+  Button,
+  Paragraph,
+  Popover,
+  SizableText,
+  Text,
+  View,
+  XStack,
+  YStack,
+} from '@hanzo/gui'
+
+const SharedPopoverTrigger = memo(function SharedPopoverTrigger({
+  scope,
+  triggerTestId,
+  countTestId,
+  label,
+  setActiveLabel,
+}: {
+  scope: string
+  triggerTestId: string
+  countTestId: string
+  label: string
+  setActiveLabel: (label: string) => void
+}) {
+  const renderCountRef = useRef(0)
+  renderCountRef.current++
+
+  return (
+    <View gap="$1.5" items="center">
+      <Popover.Trigger scope={scope} asChild onMouseEnter={() => setActiveLabel(label)}>
+        <Button data-testid={triggerTestId}>{label}</Button>
+      </Popover.Trigger>
+      <Text data-testid={countTestId} fontSize="$1" textAlign="center">
+        renders: {renderCountRef.current}
+      </Text>
+    </View>
+  )
+})
+
+const SharedMenuTrigger = memo(function SharedMenuTrigger({
+  triggerTestId,
+  countTestId,
+  label,
+}: {
+  triggerTestId: string
+  countTestId: string
+  label: string
+}) {
+  const renderCountRef = useRef(0)
+  renderCountRef.current++
+
+  return (
+    <View gap="$1.5" items="center">
+      <Menu.Trigger asChild>
+        <Button data-testid={triggerTestId}>{label}</Button>
+      </Menu.Trigger>
+      <Text data-testid={countTestId} fontSize="$1" textAlign="center">
+        renders: {renderCountRef.current}
+      </Text>
+    </View>
+  )
+})
+
+export function GlobalScopedTriggerIsolationCase() {
+  const [activePopoverLabel, setActivePopoverLabel] = useState('Popover 1')
+  const [menuOpen, setMenuOpen] = useState(false)
+
+  return (
+    <YStack flex={1} gap="$8" p="$6" bg="$background">
+      <YStack gap="$2">
+        <SizableText fontWeight="bold" data-testid="global-popover-label">
+          Controlled global popover with memoized triggers
+        </SizableText>
+
+        <Popover
+          scope="global-shared-popover"
+          open={!!activePopoverLabel}
+          onOpenChange={(open) => {
+            if (!open) {
+              setActivePopoverLabel('')
+            }
+          }}
+          hoverable={{ delay: 0, restMs: 0 }}
+          placement="bottom-start"
+          offset={8}
+        >
+          <XStack gap="$4">
+            <SharedPopoverTrigger
+              scope="global-shared-popover"
+              triggerTestId="global-popover-trigger-1"
+              countTestId="global-popover-trigger-1-renders"
+              label="Popover 1"
+              setActiveLabel={setActivePopoverLabel}
+            />
+            <SharedPopoverTrigger
+              scope="global-shared-popover"
+              triggerTestId="global-popover-trigger-2"
+              countTestId="global-popover-trigger-2-renders"
+              label="Popover 2"
+              setActiveLabel={setActivePopoverLabel}
+            />
+            <SharedPopoverTrigger
+              scope="global-shared-popover"
+              triggerTestId="global-popover-trigger-3"
+              countTestId="global-popover-trigger-3-renders"
+              label="Popover 3"
+              setActiveLabel={setActivePopoverLabel}
+            />
+          </XStack>
+
+          <Popover.Content
+            scope="global-shared-popover"
+            data-testid="global-popover-content"
+            disableFocusScope
+            p="$3"
+            minWidth={180}
+            enterStyle={{ y: -8, opacity: 0 }}
+            exitStyle={{ y: -8, opacity: 0 }}
+          >
+            <Popover.Arrow scope="global-shared-popover" />
+            <Paragraph>{activePopoverLabel || 'Shared hoverable popover'}</Paragraph>
+          </Popover.Content>
+        </Popover>
+      </YStack>
+
+      <YStack gap="$2">
+        <SizableText fontWeight="bold" data-testid="global-menu-label">
+          Chat-style global menu context with memoized triggers
+        </SizableText>
+
+        <Menu
+          open={menuOpen}
+          onOpenChange={setMenuOpen}
+          placement="bottom-start"
+          offset={8}
+        >
+          <XStack gap="$4">
+            <SharedMenuTrigger
+              triggerTestId="global-menu-trigger-1"
+              countTestId="global-menu-trigger-1-renders"
+              label="Menu 1"
+            />
+            <SharedMenuTrigger
+              triggerTestId="global-menu-trigger-2"
+              countTestId="global-menu-trigger-2-renders"
+              label="Menu 2"
+            />
+            <SharedMenuTrigger
+              triggerTestId="global-menu-trigger-3"
+              countTestId="global-menu-trigger-3-renders"
+              label="Menu 3"
+            />
+          </XStack>
+
+          <Menu.Portal>
+            <Menu.Content
+              data-testid="global-menu-content"
+              p="$2"
+              minWidth={180}
+              borderWidth={1}
+              borderColor="$borderColor"
+              elevation="$3"
+            >
+              <Menu.Item key="alpha" textValue="Alpha">
+                <Menu.ItemTitle>Alpha</Menu.ItemTitle>
+              </Menu.Item>
+              <Menu.Item key="beta" textValue="Beta">
+                <Menu.ItemTitle>Beta</Menu.ItemTitle>
+              </Menu.Item>
+            </Menu.Content>
+          </Menu.Portal>
+        </Menu>
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/GroupHoverMobile.tsx

@@ -0,0 +1,39 @@
+import { View, Text, XStack, styled } from '@hanzo/gui'
+import { Star } from '@hanzogui/lucide-icons-2'
+
+const GroupContainer = styled(View, {
+  group: 'testy',
+  padding: '$4',
+  backgroundColor: '$background',
+  borderRadius: '$4',
+  cursor: 'pointer',
+})
+
+const GroupText = styled(Text, {
+  color: 'rgb(0, 0, 0)',
+
+  '$group-testy-hover': {
+    color: 'rgb(255, 0, 0)',
+  },
+})
+
+const GroupIcon = styled(Star, {
+  color: 'rgb(0, 0, 0)',
+
+  '$group-testy-hover': {
+    color: 'rgb(255, 0, 0)',
+  },
+})
+
+export function GroupHoverMobile() {
+  return (
+    <View padding="$4" gap="$4">
+      <GroupContainer id="group-hover-container">
+        <XStack gap="$2" alignItems="center">
+          <GroupIcon id="group-hover-icon" size={24} />
+          <GroupText id="group-hover-text">Hover me</GroupText>
+        </XStack>
+      </GroupContainer>
+    </View>
+  )
+}

package/src/usecases/GroupPressInVariant.tsx

@@ -0,0 +1,92 @@
+import { Text, YStack, styled } from '@hanzo/gui'
+
+// Issue #3613: $group-press not applied when in variant
+// This tests that $group-press works inside variants
+
+const GroupPressText = styled(Text, {
+  name: 'GroupPressText',
+  color: 'rgb(0, 0, 0)',
+
+  variants: {
+    variant: {
+      primary: {
+        color: 'rgb(0, 0, 255)',
+        '$group-press': {
+          color: 'rgb(255, 0, 0)',
+        },
+      },
+      secondary: {
+        color: 'rgb(0, 128, 0)',
+        '$group-press': {
+          color: 'rgb(255, 255, 0)',
+        },
+      },
+    },
+  } as const,
+})
+
+// Also test with a named group
+const GroupPressTextNamed = styled(Text, {
+  name: 'GroupPressTextNamed',
+  color: 'rgb(0, 0, 0)',
+
+  variants: {
+    variant: {
+      primary: {
+        color: 'rgb(0, 0, 255)',
+        '$group-testgroup-press': {
+          color: 'rgb(255, 0, 0)',
+        },
+      },
+    },
+  } as const,
+})
+
+// Test $group-press at root level for comparison (this should already work)
+const GroupPressTextRoot = styled(Text, {
+  name: 'GroupPressTextRoot',
+  color: 'rgb(0, 0, 255)',
+  '$group-press': {
+    color: 'rgb(255, 0, 0)',
+  },
+})
+
+export function GroupPressInVariant() {
+  return (
+    <YStack gap="$4" padding="$4">
+      {/* Test 1: $group-press in variant with unnamed group */}
+      <YStack group id="test-unnamed-group" backgroundColor="$gray5" padding="$4">
+        <GroupPressText id="test-variant-primary" variant="primary">
+          Primary variant - should turn red on press
+        </GroupPressText>
+      </YStack>
+
+      {/* Test 2: $group-press in variant with named group */}
+      <YStack
+        // @ts-expect-error - testing named group feature
+        group="testgroup"
+        id="test-named-group"
+        backgroundColor="$gray5"
+        padding="$4"
+      >
+        <GroupPressTextNamed id="test-variant-named" variant="primary">
+          Named group variant - should turn red on press
+        </GroupPressTextNamed>
+      </YStack>
+
+      {/* Test 3: $group-press at root level (comparison - this should work) */}
+      <YStack group id="test-root-group" backgroundColor="$gray5" padding="$4">
+        <GroupPressTextRoot id="test-root-press">
+          Root level $group-press - should turn red on press
+        </GroupPressTextRoot>
+      </YStack>
+
+      {/* Test 4: secondary variant */}
+      <YStack group id="test-secondary-group" backgroundColor="$gray5" padding="$4">
+        <GroupPressText id="test-variant-secondary" variant="secondary">
+          Secondary variant - should turn yellow on press
+        </GroupPressText>
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/GroupPressNative.tsx

@@ -0,0 +1,200 @@
+import { useState } from 'react'
+import { Text, View, XStack, YStack, styled } from '@hanzo/gui'
+
+/**
+ * Test cases for native group press style behaviors:
+ *
+ * 1. $group-press WITHOUT transition
+ * 2. $group-press WITH transition
+ * 3. Named group ($group-testy-press)
+ * 4. Press and drag off behavior - should unpress correctly
+ *
+ * Colors:
+ * - Default: blue (#0000ff via $blue10)
+ * - Pressed: red (#ff0000 via $red10)
+ */
+
+// child that reacts to group press WITHOUT transition
+const GroupPressChild = styled(View, {
+  name: 'GroupPressChild',
+  width: 150,
+  height: 60,
+  backgroundColor: '$blue10',
+  alignItems: 'center',
+  justifyContent: 'center',
+
+  '$group-press': {
+    backgroundColor: '$red10',
+  },
+})
+
+// child that reacts to group press WITH transition
+const GroupPressChildAnimated = styled(View, {
+  name: 'GroupPressChildAnimated',
+  width: 150,
+  height: 60,
+  backgroundColor: '$blue10',
+  alignItems: 'center',
+  justifyContent: 'center',
+  transition: 'quick',
+
+  '$group-press': {
+    backgroundColor: '$red10',
+  },
+})
+
+// child that reacts to named group press
+const NamedGroupPressChild = styled(View, {
+  name: 'NamedGroupPressChild',
+  width: 150,
+  height: 60,
+  backgroundColor: '$blue10',
+  alignItems: 'center',
+  justifyContent: 'center',
+
+  '$group-testy-press': {
+    backgroundColor: '$red10',
+  },
+})
+
+// child with named group + transition
+const NamedGroupPressChildAnimated = styled(View, {
+  name: 'NamedGroupPressChildAnimated',
+  width: 150,
+  height: 60,
+  backgroundColor: '$blue10',
+  alignItems: 'center',
+  justifyContent: 'center',
+  transition: 'quick',
+
+  '$group-testy-press': {
+    backgroundColor: '$red10',
+  },
+})
+
+export function GroupPressNative() {
+  const [state1, setState1] = useState({ pressIn: 0, pressOut: 0, isPressed: false })
+  const [state2, setState2] = useState({ pressIn: 0, pressOut: 0, isPressed: false })
+  const [state3, setState3] = useState({ pressIn: 0, pressOut: 0, isPressed: false })
+  const [state4, setState4] = useState({ pressIn: 0, pressOut: 0, isPressed: false })
+
+  return (
+    <YStack gap="$3" padding="$3" testID="group-press-native-root">
+      <Text fontSize="$4" fontWeight="bold">
+        Group Press Tests
+      </Text>
+
+      {/* test 1: $group-press WITHOUT transition */}
+      <YStack gap="$1">
+        <Text fontSize="$2">1. Group (no transition)</Text>
+        <YStack
+          group
+          testID="group-no-transition"
+          backgroundColor="$gray5"
+          padding="$2"
+          onPressIn={() =>
+            setState1((s) => ({ ...s, pressIn: s.pressIn + 1, isPressed: true }))
+          }
+          onPressOut={() =>
+            setState1((s) => ({ ...s, pressOut: s.pressOut + 1, isPressed: false }))
+          }
+        >
+          <GroupPressChild testID="group-child-no-transition">
+            <Text color="white" fontSize="$2">
+              CHILD
+            </Text>
+          </GroupPressChild>
+        </YStack>
+        <XStack gap="$2">
+          <Text testID="group1-press-in">In: {state1.pressIn}</Text>
+          <Text testID="group1-press-out">Out: {state1.pressOut}</Text>
+          <Text testID="group1-is-pressed">P: {state1.isPressed ? 'Y' : 'N'}</Text>
+        </XStack>
+      </YStack>
+
+      {/* test 2: $group-press WITH transition */}
+      <YStack gap="$1">
+        <Text fontSize="$2">2. Group (with transition)</Text>
+        <YStack
+          group
+          testID="group-with-transition"
+          backgroundColor="$gray5"
+          padding="$2"
+          onPressIn={() =>
+            setState2((s) => ({ ...s, pressIn: s.pressIn + 1, isPressed: true }))
+          }
+          onPressOut={() =>
+            setState2((s) => ({ ...s, pressOut: s.pressOut + 1, isPressed: false }))
+          }
+        >
+          <GroupPressChildAnimated testID="group-child-with-transition">
+            <Text color="white" fontSize="$2">
+              ANIMATED
+            </Text>
+          </GroupPressChildAnimated>
+        </YStack>
+        <XStack gap="$2">
+          <Text testID="group2-press-in">In: {state2.pressIn}</Text>
+          <Text testID="group2-press-out">Out: {state2.pressOut}</Text>
+          <Text testID="group2-is-pressed">P: {state2.isPressed ? 'Y' : 'N'}</Text>
+        </XStack>
+      </YStack>
+
+      {/* test 3: named $group-testy-press WITHOUT transition */}
+      <YStack gap="$1">
+        <Text fontSize="$2">3. Named group (no transition)</Text>
+        <YStack
+          group="testy"
+          testID="named-group-no-transition"
+          backgroundColor="$gray5"
+          padding="$2"
+          onPressIn={() =>
+            setState3((s) => ({ ...s, pressIn: s.pressIn + 1, isPressed: true }))
+          }
+          onPressOut={() =>
+            setState3((s) => ({ ...s, pressOut: s.pressOut + 1, isPressed: false }))
+          }
+        >
+          <NamedGroupPressChild testID="named-group-child-no-transition">
+            <Text color="white" fontSize="$2">
+              NAMED
+            </Text>
+          </NamedGroupPressChild>
+        </YStack>
+        <XStack gap="$2">
+          <Text testID="group3-press-in">In: {state3.pressIn}</Text>
+          <Text testID="group3-press-out">Out: {state3.pressOut}</Text>
+          <Text testID="group3-is-pressed">P: {state3.isPressed ? 'Y' : 'N'}</Text>
+        </XStack>
+      </YStack>
+
+      {/* test 4: named $group-testy-press WITH transition */}
+      <YStack gap="$1">
+        <Text fontSize="$2">4. Named group (with transition)</Text>
+        <YStack
+          group="testy"
+          testID="named-group-with-transition"
+          backgroundColor="$gray5"
+          padding="$2"
+          onPressIn={() =>
+            setState4((s) => ({ ...s, pressIn: s.pressIn + 1, isPressed: true }))
+          }
+          onPressOut={() =>
+            setState4((s) => ({ ...s, pressOut: s.pressOut + 1, isPressed: false }))
+          }
+        >
+          <NamedGroupPressChildAnimated testID="named-group-child-with-transition">
+            <Text color="white" fontSize="$2">
+              NAMED+ANIM
+            </Text>
+          </NamedGroupPressChildAnimated>
+        </YStack>
+        <XStack gap="$2">
+          <Text testID="group4-press-in">In: {state4.pressIn}</Text>
+          <Text testID="group4-press-out">Out: {state4.pressOut}</Text>
+          <Text testID="group4-is-pressed">P: {state4.isPressed ? 'Y' : 'N'}</Text>
+        </XStack>
+      </YStack>
+    </YStack>
+  )
+}