@hanzogui/kitchen-sink 3.0.5

package/src/usecases/StyledContextColor.tsx

@@ -0,0 +1,246 @@
+import {
+  Button,
+  type GetProps,
+  SizableText,
+  ThemeableStack,
+  createStyledContext,
+  styled,
+} from '@hanzo/gui'
+
+// Reproduce GitHub issue #3676 - Context Values Not Accessible in Children Styles
+// Parent component style properties like `color` cannot be accessed by child components
+
+// Create a custom button with styled context
+export const CustomButtonContext = createStyledContext<{
+  size?: any
+  color?: string
+}>({
+  size: '$4',
+  color: undefined,
+})
+
+const CustomButtonFrame = styled(ThemeableStack, {
+  name: 'CustomButton',
+  context: CustomButtonContext,
+  render: 'button',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: 'row',
+  cursor: 'pointer',
+  padding: '$3',
+  borderRadius: '$4',
+  backgroundColor: '$background',
+
+  variants: {
+    color: {
+      green: {
+        // This should propagate to children via context
+        color: 'green',
+      },
+      red: {
+        color: 'red',
+      },
+      blue: {
+        color: 'blue',
+      },
+    },
+  } as const,
+})
+
+const CustomButtonText = styled(SizableText, {
+  name: 'CustomButtonText',
+  context: CustomButtonContext,
+
+  variants: {
+    color: {
+      green: {
+        color: 'green',
+      },
+      red: {
+        color: 'red',
+      },
+      blue: {
+        color: 'blue',
+      },
+    },
+  } as const,
+})
+
+// This is the key pattern from issue #3676 - using $color to reference context value
+// The child should use $color to reference the parent's color value from context
+const ContextRefButtonFrame = styled(ThemeableStack, {
+  name: 'ContextRefButton',
+  context: CustomButtonContext,
+  render: 'button',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: 'row',
+  cursor: 'pointer',
+  padding: '$3',
+  borderRadius: '$4',
+  backgroundColor: '$background',
+
+  variants: {
+    variant: {
+      link: {
+        // Sets color in context via variant - this is the issue!
+        // The variant's color should propagate to context and children should receive it
+        color: 'green',
+        hoverStyle: { color: 'red' },
+      },
+      primary: {
+        color: 'blue',
+      },
+    },
+  } as const,
+})
+
+// Child that references parent's context color using $color syntax
+// This pattern mimics ButtonText which uses `color: '$color'` to inherit from parent
+const ContextRefButtonText = styled(SizableText, {
+  name: 'ContextRefButtonText',
+  context: CustomButtonContext,
+
+  variants: {
+    // Using unstyled pattern like ButtonText does
+    unstyled: {
+      false: {
+        // This $color should reference the parent's color value from context
+        color: '$color',
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: false,
+  },
+})
+
+type CustomButtonProps = GetProps<typeof CustomButtonFrame> & {
+  children?: React.ReactNode
+}
+
+const CustomButtonComponent = CustomButtonFrame.styleable<CustomButtonProps>(
+  function CustomButton(props, ref) {
+    const { children, ...rest } = props
+    return (
+      <CustomButtonFrame {...rest} ref={ref}>
+        <CustomButtonText>{children}</CustomButtonText>
+      </CustomButtonFrame>
+    )
+  }
+)
+
+type ContextRefButtonProps = GetProps<typeof ContextRefButtonFrame> & {
+  children?: React.ReactNode
+}
+
+const ContextRefButtonComponent = ContextRefButtonFrame.styleable<ContextRefButtonProps>(
+  function ContextRefButton(props, ref) {
+    const { children, ...rest } = props
+    return (
+      <ContextRefButtonFrame {...rest} ref={ref}>
+        <ContextRefButtonText>{children}</ContextRefButtonText>
+      </ContextRefButtonFrame>
+    )
+  }
+)
+
+// Issue #3670 - pressStyle color not propagating to children
+// Button with pressStyle that changes color - should propagate to text on press
+// Note: This only works with animation drivers that re-render on press (not CSS driver)
+const PressStyleButtonFrame = styled(ThemeableStack, {
+  name: 'PressStyleButton',
+  context: CustomButtonContext,
+  render: 'button',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: 'row',
+  cursor: 'pointer',
+  padding: '$3',
+  borderRadius: '$4',
+  backgroundColor: '$background',
+  color: 'green',
+
+  pressStyle: {
+    // @ts-ignore TODO
+    color: 'red',
+  },
+})
+
+const PressStyleButtonText = styled(SizableText, {
+  name: 'PressStyleButtonText',
+  context: CustomButtonContext,
+
+  variants: {
+    color: {
+      green: { color: 'green' },
+      red: { color: 'red' },
+    },
+  } as const,
+})
+
+type PressStyleButtonProps = GetProps<typeof PressStyleButtonFrame> & {
+  children?: React.ReactNode
+}
+
+const PressStyleButtonComponent = PressStyleButtonFrame.styleable<PressStyleButtonProps>(
+  function PressStyleButton(props, ref) {
+    const { children, ...rest } = props
+    return (
+      <PressStyleButtonFrame {...rest} ref={ref}>
+        <PressStyleButtonText>{children}</PressStyleButtonText>
+      </PressStyleButtonFrame>
+    )
+  }
+)
+
+export function StyledContextColor() {
+  return (
+    <>
+      {/* Test 1: Using the standard Button with color prop */}
+      <Button testID="standard-button-green">
+        <Button.Text color="green">Standard Button Green</Button.Text>
+      </Button>
+
+      {/* Test 2: Custom button with color variant - should propagate to text */}
+      <CustomButtonComponent testID="custom-button-green" color="green">
+        Custom Button Green
+      </CustomButtonComponent>
+
+      <CustomButtonComponent testID="custom-button-red" color="red">
+        Custom Button Red
+      </CustomButtonComponent>
+
+      {/* Test 3: Manual context provider */}
+      <CustomButtonContext.Provider color="blue">
+        <CustomButtonFrame testID="context-frame-blue">
+          <CustomButtonText testID="context-text-blue">
+            Context Provided Blue
+          </CustomButtonText>
+        </CustomButtonFrame>
+      </CustomButtonContext.Provider>
+
+      {/* Test 4: Issue #3676 - $color reference should get parent's color from context */}
+      {/* Direct color prop - this should work like Button */}
+      <CustomButtonContext.Provider color="green">
+        <ContextRefButtonFrame testID="context-ref-button-link">
+          <ContextRefButtonText testID="context-ref-text-link">
+            Context Ref Link Text (via Provider)
+          </ContextRefButtonText>
+        </ContextRefButtonFrame>
+      </CustomButtonContext.Provider>
+
+      {/* Using variant to set color - this is the problematic case */}
+      <ContextRefButtonComponent testID="context-ref-button-primary" variant="primary">
+        Context Ref Primary Button (via variant)
+      </ContextRefButtonComponent>
+
+      {/* Test 5: Issue #3670 - pressStyle color should propagate to children on press */}
+      {/* Note: Requires disableClassName to force runtime press handling */}
+      <PressStyleButtonComponent testID="press-style-button" disableClassName>
+        Press Style Button (green → red on press)
+      </PressStyleButtonComponent>
+    </>
+  )
+}

package/src/usecases/StyledContextTokens.tsx

@@ -0,0 +1,147 @@
+import { View, Text, createStyledContext, styled, useMedia } from '@hanzo/gui'
+
+/**
+ * Test case for styled context token preservation (issues #3670, #3676)
+ *
+ * This tests that when a parent component sets a context value via a variant,
+ * the child's functional variant receives the original token string (like '$4')
+ * instead of the resolved CSS variable (like 'var(--t-space-4)').
+ *
+ * The child uses a functional variant that looks up the gap token value
+ * to calculate width. If it receives 'var(--t-space-4)' instead of '$4',
+ * the token lookup fails.
+ */
+
+const GridContext = createStyledContext({
+  gap: '$4' as string,
+  columns: 2 as number,
+})
+
+const GridParent = styled(View, {
+  name: 'GridParent',
+  context: GridContext,
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+
+  variants: {
+    spacing: {
+      small: {
+        gap: '$2',
+      },
+      medium: {
+        gap: '$4',
+      },
+      large: {
+        gap: '$8',
+      },
+    },
+  } as const,
+})
+
+const GridChild = styled(View, {
+  name: 'GridChild',
+  context: GridContext,
+  height: 50,
+  backgroundColor: '$blue10',
+
+  variants: {
+    columns: {
+      // Functional variant that uses context props
+      ':number': (columns, { props, tokens }) => {
+        const gapToken = props.gap as string
+
+        // Test: gapToken should be '$2', '$4', or '$8' - NOT 'var(--t-space-X)'
+        // If it's a CSS variable, the token lookup below will fail
+        const isTokenString = gapToken?.startsWith('$')
+
+        // Try to get the gap value from tokens
+        let gapValue = 0
+        if (isTokenString && gapToken) {
+          const tokenKey = gapToken.slice(1) // remove '$'
+          const spaceToken = tokens.space[`$${tokenKey}`]
+          if (spaceToken) {
+            gapValue = typeof spaceToken.val === 'number' ? spaceToken.val : 0
+          }
+        }
+
+        // Calculate width based on columns and gap
+        // width = (100% / columns) - (gap * (columns - 1) / columns)
+        const widthPercent = 100 / columns
+        const gapAdjustment = (gapValue * (columns - 1)) / columns
+
+        return {
+          width: `calc(${widthPercent}% - ${gapAdjustment}px)`,
+        }
+      },
+    },
+  } as const,
+})
+
+// Component that displays debug info about the context props
+const DebugInfo = styled(Text, {
+  name: 'DebugInfo',
+  context: GridContext,
+  fontSize: 12,
+  fontFamily: '$mono',
+})
+
+function DebugDisplay({ id }: { id: string }) {
+  // Access context to show what values the child receives
+  const context = GridContext.useStyledContext()
+  const isToken = context.gap?.startsWith('$')
+
+  return (
+    <View id={id} padding="$2" backgroundColor={isToken ? '$green5' : '$red5'}>
+      <DebugInfo>gap: {context.gap}</DebugInfo>
+      <DebugInfo>isToken: {String(isToken)}</DebugInfo>
+      <DebugInfo id={`${id}-gap-value`}>{context.gap}</DebugInfo>
+    </View>
+  )
+}
+
+export function StyledContextTokens() {
+  const media = useMedia()
+
+  return (
+    <View padding="$4" gap="$4">
+      <Text fontWeight="bold">Styled Context Token Preservation Test</Text>
+
+      {/* Test 1: Variant sets gap to $2 */}
+      <View>
+        <Text>Test 1: spacing="small" should set gap="$2"</Text>
+        <GridParent spacing="small" id="test-small">
+          <DebugDisplay id="debug-small" />
+          <GridChild columns={2} id="child-small-1" />
+          <GridChild columns={2} id="child-small-2" />
+        </GridParent>
+      </View>
+
+      {/* Test 2: Variant sets gap to $8 */}
+      <View>
+        <Text>Test 2: spacing="large" should set gap="$8"</Text>
+        <GridParent spacing="large" id="test-large">
+          <DebugDisplay id="debug-large" />
+          <GridChild columns={2} id="child-large-1" />
+          <GridChild columns={2} id="child-large-2" />
+        </GridParent>
+      </View>
+
+      {/* Test 3: Default gap (no variant) */}
+      <View>
+        <Text>Test 3: no spacing prop, default gap="$4"</Text>
+        <GridParent id="test-default">
+          <DebugDisplay id="debug-default" />
+          <GridChild columns={2} id="child-default-1" />
+          <GridChild columns={2} id="child-default-2" />
+        </GridParent>
+      </View>
+
+      {/* Show current media state for debugging */}
+      <View padding="$2" backgroundColor="$gray5">
+        <Text fontSize={10}>
+          Media: sm={String(media.sm)} md={String(media.md)} lg={String(media.lg)}
+        </Text>
+      </View>
+    </View>
+  )
+}

package/src/usecases/StyledHOCNamed.tsx

@@ -0,0 +1,20 @@
+import { H1, Label, Text, styled } from '@hanzo/gui'
+
+const X1 = styled(Label, {
+  name: 'MyLabel',
+  color: '$color',
+})
+
+const X2 = styled(Text, {
+  name: 'MyLabel',
+  color: '$color',
+})
+
+export const StyledHOCNamed = () => {
+  return (
+    <>
+      <X1 testID="text-named">hi</X1>
+      <X2 testID="label-named">hi</X2>
+    </>
+  )
+}

package/src/usecases/StyledHtmlCase.tsx

@@ -0,0 +1,144 @@
+import { styled } from '@hanzogui/core'
+
+// Test: styled.a() with proper href typing
+const StyledAnchor = styled.a({
+  color: '$blue10',
+  textDecorationLine: 'underline',
+})
+
+// Test: styled.button() with proper type/disabled typing
+const StyledButton = styled.button({
+  padding: '$4',
+  backgroundColor: '$background',
+  borderRadius: '$4',
+  cursor: 'pointer',
+})
+
+// Test: styled.div() basic
+const StyledDiv = styled.div({
+  padding: '$2',
+  backgroundColor: '$backgroundHover',
+})
+
+// Test: styled.span() text-like element
+const StyledSpan = styled.span({
+  color: '$color',
+  fontWeight: 'bold',
+})
+
+// Test: styled.input() with proper input attributes
+const StyledInput = styled.input({
+  padding: '$2',
+  borderWidth: 1,
+  borderColor: '$borderColor',
+})
+
+// Test: styled.form() with proper form attributes
+const StyledForm = styled.form({
+  gap: '$3',
+})
+
+// Test: styled.label() with proper htmlFor typing
+const StyledLabel = styled.label({
+  fontSize: '$3',
+})
+
+// Test: styled.nav/main/section/article/footer semantic elements
+const StyledNav = styled.nav({
+  padding: '$2',
+})
+
+const StyledMain = styled.main({
+  padding: '$2',
+})
+
+const StyledSection = styled.section({
+  padding: '$3',
+})
+
+// Test: styled.a() with variants
+const StyledAnchorWithVariants = styled.a({
+  color: '$blue10',
+
+  variants: {
+    size: {
+      small: { fontSize: '$2' },
+      large: { fontSize: '$6' },
+    },
+    underline: {
+      true: { textDecorationLine: 'underline' },
+      false: { textDecorationLine: 'none' },
+    },
+  } as const,
+
+  defaultVariants: {
+    underline: true,
+  },
+})
+
+export function StyledHtmlCase() {
+  return (
+    <StyledDiv data-testid="styled-html-container">
+      {/* Test styled.a() */}
+      <StyledAnchor
+        data-testid="styled-a"
+        href="https://example.com"
+        target="_blank"
+        rel="noopener"
+      >
+        Anchor Link
+      </StyledAnchor>
+
+      {/* Test styled.button() */}
+      <StyledButton data-testid="styled-button" type="submit" disabled={false}>
+        Submit Button
+      </StyledButton>
+
+      {/* Test styled.div() */}
+      <StyledDiv data-testid="styled-div">Styled Div</StyledDiv>
+
+      {/* Test styled.span() */}
+      <StyledSpan data-testid="styled-span">Styled Span</StyledSpan>
+
+      {/* Test styled.input() */}
+      <StyledInput
+        data-testid="styled-input"
+        type="text"
+        placeholder="Enter text"
+        maxLength={100}
+      />
+
+      {/* Test styled.form() */}
+      <StyledForm data-testid="styled-form" action="/submit" method="post">
+        <StyledLabel data-testid="styled-label" htmlFor="test-input">
+          Label
+        </StyledLabel>
+      </StyledForm>
+
+      {/* Test semantic elements */}
+      <StyledNav data-testid="styled-nav">Navigation</StyledNav>
+
+      <StyledMain data-testid="styled-main">Main Content</StyledMain>
+
+      <StyledSection data-testid="styled-section">Section Content</StyledSection>
+
+      {/* Test styled.a() with variants */}
+      <StyledAnchorWithVariants
+        data-testid="styled-a-variants"
+        href="/internal"
+        size="large"
+        underline={false}
+      >
+        Large Link No Underline
+      </StyledAnchorWithVariants>
+
+      <StyledAnchorWithVariants
+        data-testid="styled-a-variants-small"
+        href="/small"
+        size="small"
+      >
+        Small Link With Underline
+      </StyledAnchorWithVariants>
+    </StyledDiv>
+  )
+}

package/src/usecases/StyledIconColor.tsx

@@ -0,0 +1,19 @@
+import { Check } from '@hanzogui/lucide-icons-2'
+import { styled, YStack } from '@hanzo/gui'
+
+const RedCheck = styled(Check, {
+  color: 'red',
+})
+
+const GreenCheck = styled(Check, {
+  color: 'green',
+})
+
+export const StyledIconColor = () => (
+  <YStack gap="$4" padding="$4">
+    <Check color="blue" testID="direct-blue" />
+    <RedCheck testID="styled-red" />
+    <GreenCheck testID="styled-green" />
+    <RedCheck color="purple" testID="override-purple" />
+  </YStack>
+)

package/src/usecases/StyledInputFocusStyle.tsx

@@ -0,0 +1,21 @@
+import { Input, styled } from '@hanzo/gui'
+
+const StyledInput = styled(Input, {
+  borderColor: 'red',
+  borderWidth: 5,
+
+  variants: {
+    test: {
+      true: {
+        focusStyle: {
+          borderWidth: 10,
+          borderColor: 'blue',
+        },
+      },
+    },
+  } as const,
+})
+
+export function StyledInputFocusStyle() {
+  return <StyledInput test />
+}

package/src/usecases/StyledInputOnFocus.tsx

@@ -0,0 +1,30 @@
+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,
+})
+
+export function StyledInputOnFocus() {
+  const [onFocus, setOnFocus] = React.useState(false)
+  return (
+    <StyledInput
+      test
+      data-onfocus={onFocus}
+      id="onFocus"
+      onFocus={() => setOnFocus(true)}
+    />
+  )
+}