@hanzogui/kitchen-sink 3.0.5

package/src/usecases/Benchmark.tsx

@@ -0,0 +1,148 @@
+import React from 'react'
+import { Button, StyleSheet, View } from 'react-native'
+import { View as GuiView, Text, styled } from '@hanzo/gui'
+import { ThemeProvider, createBox } from '@shopify/restyle'
+
+const Box = createBox<any>()
+
+import { TimedRender } from '../components/TimedRender'
+
+export const Benchmark = () => {
+  return (
+    <>
+      <GuiView
+        // debug="verbose"
+        style={[{ backgroundColor: 'red', width: 100, height: 100 }]}
+      />
+      <BenchStyled />
+    </>
+  )
+}
+
+const BenchStyled = () => {
+  return (
+    <>
+      <BenchRN />
+      <BenchTama />
+      <BenchRestyle />
+    </>
+  )
+}
+
+const StyledView = styled(GuiView, {
+  backgroundColor: 'red',
+  paddingTop: 5,
+  paddingBottom: 5,
+  width: 20,
+})
+
+const BenchmarkFrame = ({ name, children }) => {
+  const [x, setX] = React.useState(0)
+
+  return (
+    <>
+      <>
+        <Text style={{ marginTop: 20 }}>{name}</Text>
+        <Text>run: {x}</Text>
+        <Button title="Go" onPress={() => setX(Math.random())} />
+      </>
+
+      <TimedRender key={x}>{children}</TimedRender>
+    </>
+  )
+}
+
+const iterArr = new Array(1000).fill(0)
+
+const BenchTama = () => {
+  return (
+    <BenchmarkFrame name="@hanzo/gui">
+      <View style={{ flexDirection: 'row' }}>
+        {iterArr.map((_, i) => (
+          <StyledView key={i} />
+        ))}
+      </View>
+    </BenchmarkFrame>
+  )
+}
+
+const palette = {
+  purpleLight: '#8C6FF7',
+  purplePrimary: '#5A31F4',
+  purpleDark: '#3F22AB',
+
+  greenLight: '#56DCBA',
+  greenPrimary: '#0ECD9D',
+  greenDark: '#0A906E',
+
+  black: '#0B0B0B',
+  white: '#F0F2F3',
+}
+
+const theme = {
+  colors: {
+    red: 'red',
+    mainBackground: palette.white,
+    cardPrimaryBackground: palette.purplePrimary,
+  },
+  spacing: {
+    s: 5,
+    m: 16,
+    l: 24,
+    xl: 40,
+  },
+  textVariants: {
+    header: {
+      fontWeight: 'bold',
+      fontSize: 34,
+    },
+    body: {
+      fontSize: 16,
+      lineHeight: 24,
+    },
+    defaults: {
+      // We can define a default text variant here.
+    },
+  },
+}
+
+const BenchRestyle = () => {
+  return (
+    <ThemeProvider theme={theme}>
+      <BenchmarkFrame name="restyle">
+        <View style={{ flexDirection: 'row' }}>
+          {iterArr.map((_, i) => (
+            <Box
+              backgroundColor="red"
+              paddingTop="s"
+              paddingBottom="s"
+              width={20}
+              key={i}
+            />
+          ))}
+        </View>
+      </BenchmarkFrame>
+    </ThemeProvider>
+  )
+}
+
+const styles = StyleSheet.create({
+  style: {
+    backgroundColor: 'red',
+    paddingTop: 5,
+    paddingBottom: 5,
+    width: 20,
+  },
+})
+
+const BenchRN = () => {
+  return (
+    <BenchmarkFrame name="rn">
+      <View style={{ flexDirection: 'row' }}>
+        {iterArr.map((_, i) => (
+          <View style={styles.style} key={i} />
+        ))}
+      </View>
+    </BenchmarkFrame>
+  )
+}

package/src/usecases/BenchmarkSelect.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { SelectDemo } from '@hanzogui/demos'
+
+import { StyleSheet, View } from 'react-native'
+import { Button, ListItem, Text, XStack, YStack } from '@hanzo/gui'
+
+import { TimedRender } from '../components/TimedRender'
+
+export const BenchmarkSelect = () => {
+  const [x, setX] = React.useState(0)
+
+  return (
+    <>
+      <Button onPress={() => setX(Math.random())}>Go</Button>
+      <YStack overflow="hidden">
+        <XStack>
+          <BenchSelect key={x} />
+        </XStack>
+      </YStack>
+    </>
+  )
+}
+
+const BenchSelect = () => {
+  return (
+    <TimedRender>
+      <YStack width="100%">
+        {new Array(100).fill(0).map((_, i) => (
+          <ListItem key={i} title="Test" subTitle="test2"></ListItem>
+        ))}
+      </YStack>
+    </TimedRender>
+  )
+}

package/src/usecases/ButtonCircular.tsx

@@ -0,0 +1,3 @@
+import { Button } from '@hanzo/gui'
+
+export const ButtonCircular = () => <Button id="circular" circular />

package/src/usecases/ButtonCustom.tsx

@@ -0,0 +1,33 @@
+import { Button, styled, type GetProps } from '@hanzo/gui'
+
+type ButtonProps = GetProps<typeof Button>
+
+const Frame = styled(Button.Frame, {
+  backgroundColor: 'red',
+})
+
+const Text = styled(Button.Text, {
+  fontSize: '$2',
+  lineHeight: '$3',
+  textTransform: 'uppercase',
+  marginTop: 0,
+  marginBottom: 0,
+})
+
+const ButtonStyled = styled(Button, {})
+
+export const ButtonCustom = Frame.styleable((props, ref) => {
+  return (
+    <>
+      <Frame ref={ref} {...props} />
+
+      {/* saw an issue where defaultProps gets merged back onto styled(styleable(styled())) causing flexDir column overwriting row */}
+      <Button testID="button" width={200}>
+        test
+      </Button>
+      <ButtonStyled testID="button-styled" width={200}>
+        test
+      </ButtonStyled>
+    </>
+  ) as any
+})

package/src/usecases/ButtonIconColor.tsx

@@ -0,0 +1,18 @@
+import { Moon } from '@hanzogui/lucide-icons-2'
+import { Button, ListItem, Theme, YStack } from '@hanzo/gui'
+
+export function ButtonIconColor() {
+  return (
+    <YStack gap="$4" padding="$4">
+      {/* button icon should get theme color */}
+      <Theme name="red">
+        <Button testID="button-themed" icon={Moon} />
+      </Theme>
+
+      {/* listitem icon should get theme color */}
+      <Theme name="red">
+        <ListItem testID="listitem-themed" icon={Moon} />
+      </Theme>
+    </YStack>
+  )
+}

package/src/usecases/ButtonInverse.tsx

@@ -0,0 +1,30 @@
+import { Button, Theme, XStack, YStack } from '@hanzo/gui'
+
+export const ButtonInverse = () => (
+  <YStack gap="$4">
+    <XStack gap="$2">
+      <Button>Normal</Button>
+      <Button theme="accent" id="accent">
+        Accent
+      </Button>
+    </XStack>
+
+    <Theme name="red">
+      <XStack gap="$2">
+        <Button>Red Normal</Button>
+        <Button theme="accent" id="red-accent">
+          Red Accent
+        </Button>
+      </XStack>
+    </Theme>
+
+    <Theme name="blue">
+      <XStack gap="$2">
+        <Button>Blue Normal</Button>
+        <Button theme="accent" id="blue-accent">
+          Blue Accent
+        </Button>
+      </XStack>
+    </Theme>
+  </YStack>
+)

package/src/usecases/ButtonUnstyled.tsx

@@ -0,0 +1,31 @@
+import { Button, styled } from '@hanzo/gui'
+
+const Unstyled = styled(Button, {
+  unstyled: true,
+})
+
+const UnstyledMerged = styled(Button, {
+  unstyled: true,
+
+  variants: {
+    // override one thing
+    unstyled: {
+      true: {
+        borderWidth: 2,
+        borderColor: 'green',
+      },
+    },
+  },
+})
+
+export const ButtonUnstyled = () => (
+  <>
+    <Button id="unstyled-inline" unstyled>
+      hi
+    </Button>
+
+    <Unstyled id="unstyled-styled">hi</Unstyled>
+
+    <UnstyledMerged id="unstyled-merged">hi</UnstyledMerged>
+  </>
+)

package/src/usecases/CheckboxDisabledOnPress.tsx

@@ -0,0 +1,62 @@
+import { Check as CheckIcon } from '@hanzogui/lucide-icons-2'
+import { useState } from 'react'
+import { Checkbox, Label, Paragraph, XStack, YStack } from '@hanzo/gui'
+
+/**
+ * Test case for issue #3267
+ * Checkbox disabled onPress should be consistent between web and native
+ * When disabled=true, onPress should NOT be called on either platform
+ */
+export function CheckboxDisabledOnPress() {
+  const [pressCount, setPressCount] = useState(0)
+  const [disabledPressCount, setDisabledPressCount] = useState(0)
+
+  return (
+    <YStack padding="$4" gap="$4">
+      <Paragraph>Test: Disabled checkbox should NOT trigger onPress</Paragraph>
+
+      {/* Enabled checkbox - onPress SHOULD work */}
+      <XStack gap="$4" alignItems="center">
+        <Checkbox
+          id="enabled-checkbox"
+          testID="enabled-checkbox"
+          size="$5"
+          onPress={() => setPressCount((c) => c + 1)}
+        >
+          <Checkbox.Indicator>
+            <CheckIcon />
+          </Checkbox.Indicator>
+        </Checkbox>
+        <Label htmlFor="enabled-checkbox">Enabled checkbox</Label>
+      </XStack>
+      <Paragraph testID="enabled-press-count">
+        Enabled press count: {pressCount}
+      </Paragraph>
+
+      {/* Disabled checkbox - onPress should NOT work */}
+      <XStack gap="$4" alignItems="center">
+        <Checkbox
+          id="disabled-checkbox"
+          testID="disabled-checkbox"
+          size="$5"
+          disabled
+          onPress={() => setDisabledPressCount((c) => c + 1)}
+        >
+          <Checkbox.Indicator>
+            <CheckIcon />
+          </Checkbox.Indicator>
+        </Checkbox>
+        <Label htmlFor="disabled-checkbox">Disabled checkbox</Label>
+      </XStack>
+      <Paragraph testID="disabled-press-count">
+        Disabled press count: {disabledPressCount}
+      </Paragraph>
+
+      <Paragraph color="$color10" fontSize="$2">
+        Expected: Clicking disabled checkbox should NOT increment the count.
+        {'\n'}
+        Bug: On native, the count was incrementing even when disabled.
+      </Paragraph>
+    </YStack>
+  )
+}

package/src/usecases/ClickDuringEnterCase.tsx

@@ -0,0 +1,59 @@
+import { useState } from 'react'
+import { AnimatePresence } from '@hanzogui/animate-presence'
+import { Button, Square, XStack, YStack, Paragraph } from '@hanzo/gui'
+
+/**
+ * Test case for clicking to close while enter animation is still playing.
+ * Uses separate show/hide buttons so we can trigger them independently.
+ *
+ * The element uses enterStyle + exitStyle with opacity, y, and scale
+ * to match a real popover-like animation.
+ */
+export function ClickDuringEnterCase() {
+  const [show, setShow] = useState(false)
+
+  return (
+    <YStack gap="$4" padding="$4">
+      <Paragraph fontWeight="bold" fontSize="$5">
+        Click During Enter Animation
+      </Paragraph>
+
+      <XStack gap="$2">
+        <Button testID="click-enter-show" onPress={() => setShow(true)}>
+          Show
+        </Button>
+        <Button testID="click-enter-hide" onPress={() => setShow(false)}>
+          Hide
+        </Button>
+      </XStack>
+
+      <XStack height={120} items="center" justify="center">
+        <AnimatePresence>
+          {show ? (
+            <Square
+              key="click-enter-square"
+              testID="click-enter-target"
+              transition="medium"
+              animateOnly={['transform', 'opacity']}
+              size={80}
+              bg="$blue10"
+              opacity={1}
+              scale={1}
+              y={0}
+              enterStyle={{
+                opacity: 0,
+                y: -10,
+                scale: 0.93,
+              }}
+              exitStyle={{
+                opacity: 0,
+                y: 5,
+                scale: 0.93,
+              }}
+            />
+          ) : null}
+        </AnimatePresence>
+      </XStack>
+    </YStack>
+  )
+}

package/src/usecases/CodeExamplesInput.tsx

@@ -0,0 +1,9 @@
+import { SandboxHeading, View } from '@hanzogui/sandbox-ui'
+
+export const CodeExamplesInput = (props) => (
+  <View px="$2" width={550} $gtSm={{ px: '$6' }}>
+    <SandboxHeading size={props.big ? 'large' : 'small'}>
+      Lorem ipsum dolor.
+    </SandboxHeading>
+  </View>
+)

package/src/usecases/ColorTokenFallback.tsx

@@ -0,0 +1,52 @@
+import { Square, Theme, YStack, Text } from '@hanzo/gui'
+
+import { TEST_IDS } from '../constants/test-ids'
+
+/**
+ * Test case for GitHub issue #3620: Theme switching broken after v1.132.15
+ *
+ * Color tokens should act as fallbacks - if a theme defines a value for the same key,
+ * the theme value should take precedence over the color token.
+ *
+ * The bug was that Object.assign(theme, colorTokens) was overwriting theme values
+ * with color token values instead of the other way around.
+ */
+export function ColorTokenFallback() {
+  return (
+    <YStack gap="$4" padding="$4">
+      <Text fontWeight="bold" fontSize="$6">
+        Color Token Fallback Test (Issue #3620)
+      </Text>
+
+      {/* Test Case 1: Theme overrides color token */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">
+          Theme value should override color token (customRed should be green #00ff00)
+        </Text>
+        {/* @ts-expect-error - custom test theme */}
+        <Theme name="light_ColorTokenTest">
+          <Square
+            id={TEST_IDS.colorTokenFallbackThemeValue}
+            backgroundColor="$customRed"
+            size={100}
+          />
+        </Theme>
+      </YStack>
+
+      {/* Test Case 2: Color token used as fallback when theme doesn't define it */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">
+          Color token as fallback (customBlue should be blue #0000ff)
+        </Text>
+        {/* @ts-expect-error - custom test theme */}
+        <Theme name="light_ColorTokenTest">
+          <Square
+            id={TEST_IDS.colorTokenFallbackTokenValue}
+            backgroundColor="$customBlue"
+            size={100}
+          />
+        </Theme>
+      </YStack>
+    </YStack>
+  )
+}