@hanzogui/kitchen-sink 3.0.5

package/src/usecases/StyledMediaQueryMerge.tsx

@@ -0,0 +1,95 @@
+import { XStack, YStack, styled, Text } from '@hanzo/gui'
+
+// Test styled component with media queries in definition
+const ContainerWithMedia = styled(XStack, {
+  $sm: {
+    pt: 100,
+    mx: 100,
+    height: 100,
+    width: 100,
+    background: 'red',
+  },
+})
+
+// Test styled component with pseudo selectors in definition
+const ContainerWithPseudo = styled(XStack, {
+  hoverStyle: {
+    background: 'yellow',
+    scale: 1.1,
+  },
+  pressStyle: {
+    background: 'orange',
+    scale: 0.9,
+  },
+})
+
+export const StyledMediaQueryMerge = () => (
+  <YStack p="$4">
+    <Text style={{ fontSize: 16, fontWeight: 'bold' }}>
+      Styled Media Query Merge Test
+    </Text>
+
+    <Text style={{ fontSize: 12, color: '#666' }}>
+      Testing that styled definition media queries and pseudo selectors are properly
+      merged with runtime props
+    </Text>
+
+    <YStack>
+      <Text style={{ fontSize: 14, fontWeight: 'bold' }}>Media Query Test:</Text>
+
+      {/* Test 1: $sm media query merge */}
+      <ContainerWithMedia id="test1" $sm={{ background: 'blue' }}>
+        <Text style={{ color: 'white' }}>
+          Should have pt: 100, mx: 100, height: 100, width: 100, background: blue
+        </Text>
+      </ContainerWithMedia>
+
+      {/* Test 2: $sm media query with different runtime override */}
+      <ContainerWithMedia id="test2" $sm={{ background: 'purple' }}>
+        <Text style={{ color: 'white' }}>
+          Should have pt: 100, mx: 100, height: 100, width: 100, background: purple
+        </Text>
+      </ContainerWithMedia>
+
+      {/* Test 3: $sm media query with runtime override */}
+      <ContainerWithMedia id="test3" $sm={{ background: 'blue' }}>
+        <Text style={{ color: 'white' }}>
+          Should merge $sm styled definition with runtime override
+        </Text>
+      </ContainerWithMedia>
+    </YStack>
+
+    <YStack>
+      <Text style={{ fontSize: 14, fontWeight: 'bold' }}>Pseudo Selector Test:</Text>
+
+      {/* Test 4: Pseudo selector merge */}
+      <ContainerWithPseudo
+        id="test4"
+        hoverStyle={{ background: 'cyan' }}
+        pressStyle={{ background: 'magenta' }}
+      >
+        <Text style={{ color: 'white' }}>
+          Hover: yellow + cyan, Press: orange + magenta
+        </Text>
+      </ContainerWithPseudo>
+    </YStack>
+
+    <YStack>
+      <Text style={{ fontSize: 14, fontWeight: 'bold' }}>
+        Direct Component Test (Control):
+      </Text>
+
+      {/* Test 5: Direct component for comparison */}
+      <XStack id="test5" $sm={{ pt: 50, mx: 50, background: 'brown' }}>
+        <Text style={{ color: 'white' }}>
+          Direct XStack: pt: 50, mx: 50, background: brown
+        </Text>
+      </XStack>
+    </YStack>
+
+    <Text style={{ fontSize: 12, color: '#666' }}>
+      Expected: All styled definition properties should be preserved and merged with
+      runtime properties
+    </Text>
+  </YStack>
+)

package/src/usecases/StyledOverridePsuedo.tsx

@@ -0,0 +1,26 @@
+import { Input, GuiProvider, YStack, styled } from '@hanzo/gui'
+
+const TransparentInput = styled(Input, {
+  borderColor: 'red',
+  borderWidth: 2,
+  outlineColor: 'transparent',
+  hoverStyle: {
+    borderColor: 'green',
+    outlineColor: 'transparent',
+    borderWidth: 5,
+  },
+  focusStyle: {
+    borderColor: 'blue',
+    outlineColor: 'transparent',
+    borderWidth: 0,
+  },
+})
+
+export function StyledOverridePsuedo() {
+  return (
+    <YStack gap="$4">
+      <TransparentInput placeholder="transparent border 0px" />
+      <Input placeholder="default input" />
+    </YStack>
+  )
+}

package/src/usecases/StyledRNW.tsx

@@ -0,0 +1,61 @@
+import { Platform } from 'react-native'
+import { Input as GuiInput, styled, useThemeName } from '@hanzo/gui'
+
+export function StyledRNW() {
+  return <Input id="styled-rnw-input" aria-label="ok" placeholder="search" />
+}
+
+// Input accepts text styles at runtime via validStyles but TS doesn't know
+const TextInput = styled(
+  GuiInput,
+  {
+    fontSize: 16,
+    fontFamily: '$silkscreen',
+    color: '$color5',
+    minWidth: 0,
+    borderWidth: 0,
+    borderColor: 'transparent',
+
+    variants: {
+      unset: {
+        false: {
+          borderWidth: 2,
+          py: 12,
+          px: 14,
+          borderRadius: 6,
+          bg: '$color3',
+          focusStyle: {
+            bg: '$color4',
+            margin: 0,
+          },
+        },
+      },
+    } as const,
+
+    defaultVariants: {
+      unset: false,
+    },
+  } as any,
+  {
+    inlineProps: new Set(['id', 'testID']),
+  }
+)
+
+export const Input = GuiInput.styleable(function MyInput({ ...props }, ref) {
+  const parentTheme = useThemeName()
+
+  return (
+    // @ts-ignore - complex type inference issue with styleable + styled combination
+    <TextInput
+      unstyled
+      keyboardAppearance={parentTheme?.includes('dark') ? 'dark' : 'default'}
+      {...props}
+      focusStyle={{ margin: 0, ...props.focusStyle }}
+      id={Platform.select({
+        // on native, this leads to duplicates?
+        web: props.id,
+      })}
+      ref={ref as any}
+    />
+  )
+})

package/src/usecases/StyledStyleableInputOnFocus.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Input, styled } from '@hanzo/gui'
+
+const StyledInput = styled(Input, {
+  borderColor: 'red',
+  borderWidth: 5,
+
+  variants: {
+    test: {
+      true: {
+        focusStyle: {
+          borderWidth: 10,
+          borderColor: 'blue',
+        },
+      },
+    },
+  } as const,
+})
+
+const MyComponent = StyledInput.styleable((props, ref) => (
+  <StyledInput ref={ref as any} {...props} />
+))
+
+export function StyledStyleableInputOnFocus() {
+  const [onFocus, setOnFocus] = React.useState(false)
+  return (
+    <MyComponent
+      test
+      data-onfocus={onFocus}
+      id="onFocus"
+      onFocus={() => setOnFocus(true)}
+    />
+  )
+}

package/src/usecases/StyledStyleableInputVariant.tsx

@@ -0,0 +1,48 @@
+import { Input as GuiInput, styled } from '@hanzo/gui'
+
+// Input accepts text styles at runtime via validStyles but TS doesn't know
+const TextInput2 = styled(GuiInput, {
+  unstyled: true,
+  name: 'bla',
+  height: '$5',
+  borderRadius: '$1',
+  borderWidth: 1,
+  fontSize: '$1',
+  keyboardAppearance: 'dark',
+  paddingHorizontal: '$2',
+  placeholderTextColor: 'rgba(255,255,255,0.3)',
+  color: 'green',
+
+  variants: {
+    gameplay: {
+      true: {
+        fontSize: 100,
+        lineHeight: '$5',
+        letterSpacing: '$5',
+        color: 'red',
+        borderRadius: 100,
+        borderWidth: 2,
+        borderColor: 'red',
+        cursor: 'pointer',
+
+        focusStyle: {
+          borderColor: 'green',
+        },
+      },
+    },
+    gameplayMobile: {
+      true: {
+        fontSize: '$3',
+        letterSpacing: '$3',
+        marginTop: -2.35,
+        marginBottom: -5.9,
+        lineHeight: '$3',
+      },
+    },
+  } as const,
+} as any)
+
+export function StyledStyleableInputVariant() {
+  // @ts-expect-error - gameplay variant exists but type is lost due to as any cast
+  return <TextInput2 id="input" gameplay />
+}

package/src/usecases/StyledStyledStyleableInputOnFocus.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Input, styled } from '@hanzo/gui'
+
+const StyledInput = styled(Input, {
+  borderColor: 'red',
+  borderWidth: 5,
+
+  variants: {
+    test: {
+      true: {
+        focusStyle: {
+          borderWidth: 10,
+          borderColor: 'blue',
+        },
+      },
+    },
+  } as const,
+})
+
+const AnotherStyled = styled(StyledInput, {})
+
+const MyComponent = AnotherStyled.styleable((props, ref) => (
+  <StyledInput ref={ref as any} {...props} />
+))
+
+export function StyledStyledStyleableInputOnFocus() {
+  const [onFocus, setOnFocus] = React.useState(false)
+  return (
+    <MyComponent
+      test
+      data-onfocus={onFocus}
+      id="onFocus"
+      onFocus={() => setOnFocus(true)}
+    />
+  )
+}

package/src/usecases/StyledVariantTextColor.tsx

@@ -0,0 +1,25 @@
+import { Tag, Theme } from '@hanzogui/sandbox-ui'
+
+// test with flattening and without!
+
+export function StyledVariantTextColor() {
+  return (
+    <>
+      <Theme name="blue">
+        <Tag testID="default-flat">default-flat</Tag>
+        <Tag testID="active-flat" active>
+          active-flat
+        </Tag>
+
+        {/* @ts-ignore */}
+        <Tag forceNoFlat testID="default">
+          default
+        </Tag>
+        {/* @ts-ignore */}
+        <Tag forceNoFlat testID="active" active>
+          active
+        </Tag>
+      </Theme>
+    </>
+  )
+}

package/src/usecases/StyledViewOnFocus.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { View, styled } from '@hanzo/gui'
+
+const StyledView = styled(View, {
+  borderColor: 'red',
+  borderWidth: 5,
+
+  variants: {
+    testVariant: {
+      true: {
+        focusStyle: {
+          borderWidth: 10,
+          borderColor: 'blue',
+        },
+      },
+    },
+  } as const,
+})
+
+export function StyledViewOnFocus() {
+  const [onFocus, setOnFocus] = React.useState(false)
+  return (
+    <StyledView
+      focusable
+      testVariant
+      data-onfocus={onFocus}
+      id="onFocus"
+      onFocus={() => setOnFocus(true)}
+      tabIndex={0}
+    />
+  )
+}

package/src/usecases/TabHoverAnimationCase.tsx

@@ -0,0 +1,212 @@
+import { memo, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  AnimatePresence,
+  Button,
+  Paragraph,
+  Popover,
+  SizableText,
+  styled,
+  XStack,
+  YStack,
+} from '@hanzo/gui'
+
+const TABS = ['Tab A', 'Tab B', 'Tab C', 'Tab D', 'Tab E']
+
+function useHoverableFromParams() {
+  return useMemo(() => {
+    if (typeof window === 'undefined') return true
+    const params = new URLSearchParams(window.location.search)
+    const delay = params.get('hoverDelay')
+    const restMs = params.get('restMs')
+    if (!delay && !restMs) return true
+    const config: any = {}
+    if (delay) config.delay = Number(delay)
+    if (restMs) config.restMs = Number(restMs)
+    return config
+  }, [])
+}
+
+export function TabHoverAnimationCase() {
+  const [open, setOpen] = useState(false)
+  const [activeTab, setActiveTab] = useState<string | null>(null)
+  const [prevActiveTab, setPrevActiveTab] = useState<string | null>(null)
+  const [going, setGoing] = useState(0)
+  const hoverable = useHoverableFromParams()
+
+  const displayTab = useLastValueIf(activeTab, !!activeTab) ?? activeTab
+
+  // compute going synchronously during render (not in useEffect)
+  // so exitStyle has the correct direction immediately
+  if (activeTab && prevActiveTab && activeTab !== prevActiveTab) {
+    const prevIdx = TABS.indexOf(prevActiveTab)
+    const nextIdx = TABS.indexOf(activeTab)
+    const nextGoing = nextIdx > prevIdx ? 1 : -1
+    if (nextGoing !== going && prevIdx >= 0 && nextIdx >= 0) {
+      setGoing(nextGoing)
+    }
+  }
+
+  useEffect(() => {
+    if (activeTab) {
+      setPrevActiveTab(activeTab)
+    }
+  }, [activeTab])
+
+  // track close events for test instrumentation
+  const closeCountRef = useRef(0)
+  const handleOpenChange = (val: boolean) => {
+    if (!val && open) {
+      closeCountRef.current++
+      if (typeof window !== 'undefined') {
+        ;(window as any).__popoverCloseCount = closeCountRef.current
+      }
+    }
+    setOpen(val)
+  }
+
+  return (
+    <YStack gap="$4" padding="$4">
+      <SizableText id="going-direction" data-going={going}>
+        Direction: {going}
+      </SizableText>
+
+      <Popover
+        scope="tab-hover-test"
+        open={open}
+        onOpenChange={handleOpenChange}
+        hoverable={hoverable}
+        placement="top"
+        offset={8}
+      >
+        <XStack gap="$2">
+          {TABS.map((tab) => (
+            <Popover.Trigger
+              key={tab}
+              scope="tab-hover-test"
+              asChild="except-style"
+              onMouseEnter={() => setActiveTab(tab)}
+            >
+              <Button
+                id={`tab-${tab.replace(' ', '-').toLowerCase()}`}
+                data-testid={`tab-${tab.replace(' ', '-').toLowerCase()}`}
+                size="$3"
+                theme={activeTab === tab ? 'blue' : undefined}
+              >
+                {tab}
+              </Button>
+            </Popover.Trigger>
+          ))}
+        </XStack>
+
+        <Popover.Content
+          id="hover-content"
+          data-testid="hover-content"
+          animatePosition
+          unstyled
+          disableFocusScope
+          animateOnly={['transform', 'opacity']}
+          opacity={1}
+          enterStyle={{ opacity: 0, y: -4 }}
+          exitStyle={{ opacity: 0, y: 6 }}
+          transition="500ms"
+        >
+          <YStack
+            width={250}
+            height={120}
+            rounded="$4"
+            bg="$color3"
+            elevation="$4"
+            overflow="hidden"
+          >
+            <AnimatePresence initial={false} custom={{ going }}>
+              {open && !!displayTab && (
+                <SlideFrame
+                  key={displayTab}
+                  going={going}
+                  id="slide-content"
+                  data-testid="slide-content"
+                  data-tab={displayTab}
+                  data-going={going}
+                  transition="200ms"
+                >
+                  <TabContent tab={displayTab} />
+                </SlideFrame>
+              )}
+            </AnimatePresence>
+          </YStack>
+        </Popover.Content>
+      </Popover>
+
+      <ExitTracker />
+    </YStack>
+  )
+}
+
+const TabContent = memo(({ tab }: { tab: string }) => (
+  <YStack gap="$2" padding="$2">
+    <SizableText fontWeight="bold" data-testid="tab-content-title">
+      {tab}
+    </SizableText>
+    <Paragraph size="$2">Preview content for {tab}</Paragraph>
+  </YStack>
+))
+
+const SlideFrame = styled(YStack, {
+  position: 'absolute',
+  inset: 0,
+  z: 1,
+  x: 0,
+  opacity: 1,
+
+  variants: {
+    going: {
+      ':number': (going: number) => ({
+        enterStyle: {
+          x: going === 0 ? 0 : going > 0 ? 100 : -100,
+          opacity: 0,
+        },
+        exitStyle: {
+          x: going === 0 ? 0 : going < 0 ? 100 : -100,
+          opacity: 0,
+        },
+      }),
+    },
+  } as const,
+})
+
+// tracks exit completions for test assertions
+function ExitTracker() {
+  const [exitCount, setExitCount] = useState(0)
+  const [lastExitTime, setLastExitTime] = useState(0)
+
+  useEffect(() => {
+    const handler = () => {
+      setExitCount((c) => c + 1)
+      setLastExitTime(Date.now())
+    }
+    window.addEventListener('tab-hover-exit-complete', handler)
+    return () => window.removeEventListener('tab-hover-exit-complete', handler)
+  }, [])
+
+  return (
+    <YStack>
+      <SizableText
+        id="exit-count"
+        data-testid="exit-count"
+        data-count={exitCount}
+        data-last-time={lastExitTime}
+      >
+        Exits: {exitCount}
+      </SizableText>
+    </YStack>
+  )
+}
+
+// keeps the last truthy value
+function useLastValueIf<T>(value: T, condition: boolean): T {
+  const ref = useRef(value)
+  if (condition) {
+    ref.current = value
+  }
+  return ref.current
+}

package/src/usecases/TextNestedInheritance.tsx

@@ -0,0 +1,80 @@
+import { Text as CoreText } from '@hanzogui/core'
+import { H1, Text, styled } from '@hanzo/gui'
+
+// Test case for GitHub issue #3789: Nested Text breaks inheritance of some styles/props
+
+const BoldText = styled(Text, {
+  fontWeight: 'bold',
+})
+
+export function TextNestedInheritance() {
+  return (
+    <>
+      <H1>text inheritence</H1>
+
+      {/* Test 1: numberOfLines should apply to nested text */}
+      <Text testID="parent-number-of-lines" numberOfLines={1} width={200} color="red">
+        This is a very long text that should be truncated with an ellipsis and
+        <Text testID="nested-in-number-of-lines" fontWeight="bold">
+          {' '}
+          this nested bold text
+        </Text>{' '}
+        should also be truncated
+      </Text>
+
+      {/* Test 2: hanzo-gui Text sets color: '$color', so nested Text should NOT inherit */}
+      <Text testID="parent-color" color="blue">
+        Parent blue text with
+        <Text testID="nested-color" fontWeight="bold">
+          {' '}
+          nested bold text (should be theme color, not blue)
+        </Text>
+      </Text>
+
+      {/* Test 3: core Text does NOT set color, so it should inherit via CSS */}
+      <Text testID="parent-core-color" color="blue">
+        Parent blue text with
+        <CoreText testID="nested-core-color" fontWeight="bold">
+          {' '}
+          nested core text (should inherit blue)
+        </CoreText>
+      </Text>
+
+      {/* Test 4: whiteSpace should inherit (important for numberOfLines) */}
+      <Text testID="parent-whitespace" whiteSpace="nowrap" width={200} overflow="hidden">
+        Long text that should not wrap because whiteSpace is nowrap and
+        <Text testID="nested-whitespace" fontWeight="bold">
+          {' '}
+          nested text should inherit nowrap
+        </Text>
+      </Text>
+
+      {/* Test 5: letterSpacing should inherit */}
+      <Text testID="parent-letter-spacing" letterSpacing={5}>
+        Spaced text with
+        <Text testID="nested-letter-spacing" fontWeight="bold">
+          {' '}
+          nested text
+        </Text>
+      </Text>
+
+      {/* Test 6: Using styled component for nested text - also sets color */}
+      <Text testID="parent-styled" color="green">
+        Parent green with
+        <BoldText testID="nested-styled">
+          {' '}
+          styled bold child (theme color, not green)
+        </BoldText>
+      </Text>
+
+      {/* Test 7: Explicit override should still work */}
+      <Text testID="parent-override" color="purple">
+        Parent purple with
+        <Text testID="nested-override" color="orange">
+          {' '}
+          nested orange (explicit override)
+        </Text>
+      </Text>
+    </>
+  )
+}