@hanzogui/kitchen-sink 3.0.5

package/src/usecases/StressPage.tsx

@@ -0,0 +1,301 @@
+/**
+ * Stress page for profiling Hanzo GUI component render performance.
+ *
+ * Renders a diverse set of components to simulate a realistic page:
+ * styled components with defaults + variants, token values, theme tokens,
+ * nested themes, text with font resolution, lists with many repeated items.
+ *
+ * Usage:
+ *   http://localhost:9000/?test=StressPage
+ *   http://localhost:9000/?test=StressPage&profile=true
+ *
+ * With profile=true:
+ *   - sets up @hanzogui/timer on globalThis.time so all internal
+ *     getSplitStyles / createComponent checkpoints are captured
+ *   - exposes window.__PERF_RESULT__ with wall-clock + breakdown data
+ */
+import { timer } from '@hanzogui/timer'
+import React from 'react'
+import {
+  Button,
+  Card,
+  H1,
+  H2,
+  H3,
+  Input,
+  Label,
+  Paragraph,
+  Separator,
+  SizableText,
+  Switch,
+  Theme,
+  View,
+  XStack,
+  YStack,
+  styled,
+} from '@hanzo/gui'
+
+const shouldProfile =
+  typeof window !== 'undefined' &&
+  new URLSearchParams(window.location.search).get('profile') === 'true'
+
+// set up the timer globally so createComponent/getSplitStyles checkpoints fire
+// (bypasses the broken require('@hanzogui/timer') in the built @hanzogui/web dist)
+if (shouldProfile) {
+  const t = timer()
+  ;(globalThis as any).time = t.start()
+  ;(globalThis as any).__TIMER__ = t
+}
+
+// styled components with variants
+const StyledCard = styled(Card, {
+  padding: '$4',
+  borderRadius: '$4',
+  backgroundColor: '$background',
+  borderWidth: 1,
+  borderColor: '$borderColor',
+  elevation: '$2',
+
+  variants: {
+    highlighted: {
+      true: {
+        backgroundColor: '$blue2',
+        borderColor: '$blue6',
+      },
+    },
+    size: {
+      sm: { padding: '$2' },
+      md: { padding: '$4' },
+      lg: { padding: '$6' },
+    },
+  } as const,
+})
+
+const Badge = styled(View, {
+  paddingHorizontal: '$2',
+  paddingVertical: '$1',
+  borderRadius: '$10',
+  backgroundColor: '$blue4',
+
+  variants: {
+    color: {
+      green: { backgroundColor: '$green4' },
+      red: { backgroundColor: '$red4' },
+      orange: { backgroundColor: '$orange4' },
+    },
+  } as const,
+})
+
+const StatBox = styled(YStack, {
+  padding: '$3',
+  borderRadius: '$3',
+  backgroundColor: '$backgroundHover',
+  gap: '$1',
+  flex: 1,
+})
+
+const items = Array.from({ length: 50 }, (_, i) => ({
+  id: i,
+  title: `Item ${i + 1}`,
+  desc: `Description for item ${i + 1} with some extra text`,
+  badge: (['green', 'red', 'orange'] as const)[i % 3],
+}))
+
+const stats = [
+  { label: 'Users', value: '12,345' },
+  { label: 'Revenue', value: '$98.7k' },
+  { label: 'Orders', value: '3,456' },
+  { label: 'Growth', value: '+23%' },
+]
+
+function Header() {
+  return (
+    <YStack gap="$2" padding="$4" backgroundColor="$background">
+      <H1 color="$color" fontWeight="800">
+        Dashboard
+      </H1>
+      <Paragraph color="$color8" size="$4">
+        Overview of your application metrics and recent activity
+      </Paragraph>
+      <XStack gap="$2" flexWrap="wrap">
+        {['All', 'Active', 'Pending', 'Archived'].map((tab) => (
+          <Button key={tab} size="$3" variant={tab === 'All' ? undefined : 'outlined'}>
+            {tab}
+          </Button>
+        ))}
+      </XStack>
+    </YStack>
+  )
+}
+
+function StatsRow() {
+  return (
+    <XStack gap="$3" paddingHorizontal="$4" flexWrap="wrap">
+      {stats.map((s) => (
+        <StatBox key={s.label}>
+          <SizableText size="$2" color="$color8">
+            {s.label}
+          </SizableText>
+          <SizableText size="$8" fontWeight="700" color="$color">
+            {s.value}
+          </SizableText>
+        </StatBox>
+      ))}
+    </XStack>
+  )
+}
+
+function ItemRow({ item }: { item: (typeof items)[0] }) {
+  return (
+    <XStack
+      padding="$3"
+      gap="$3"
+      alignItems="center"
+      borderBottomColor="$borderColor"
+      borderBottomWidth={1}
+      hoverStyle={{ backgroundColor: '$backgroundHover' }}
+    >
+      <View width={40} height={40} borderRadius="$10" backgroundColor="$blue5" />
+      <YStack flex={1} gap="$1">
+        <SizableText fontWeight="600" size="$4">
+          {item.title}
+        </SizableText>
+        <SizableText size="$2" color="$color8" numberOfLines={1}>
+          {item.desc}
+        </SizableText>
+      </YStack>
+      <Badge color={item.badge}>
+        <SizableText size="$1" color="white">
+          {item.badge}
+        </SizableText>
+      </Badge>
+    </XStack>
+  )
+}
+
+function ItemList() {
+  return (
+    <StyledCard size="md">
+      <H3 marginBottom="$2">Recent Activity</H3>
+      <YStack>
+        {items.map((item) => (
+          <ItemRow key={item.id} item={item} />
+        ))}
+      </YStack>
+    </StyledCard>
+  )
+}
+
+function FormSection() {
+  return (
+    <StyledCard highlighted size="md">
+      <H3 marginBottom="$3">Settings</H3>
+      <YStack gap="$3">
+        {['Name', 'Email', 'Company', 'Role'].map((field) => (
+          <YStack key={field} gap="$1">
+            <Label size="$3">{field}</Label>
+            <Input size="$3" placeholder={`Enter ${field.toLowerCase()}`} />
+          </YStack>
+        ))}
+        <XStack gap="$3" alignItems="center">
+          <Switch size="$3" />
+          <SizableText size="$3">Enable notifications</SizableText>
+        </XStack>
+        <Button size="$4">Save Changes</Button>
+      </YStack>
+    </StyledCard>
+  )
+}
+
+function ThemedSection() {
+  return (
+    <Theme name="blue">
+      <YStack gap="$3" padding="$4" backgroundColor="$background" borderRadius="$4">
+        <H2 color="$color">Themed Section</H2>
+        <XStack gap="$2" flexWrap="wrap">
+          {Array.from({ length: 12 }, (_, i) => (
+            <Theme key={i} name={i % 2 === 0 ? 'surface1' : 'surface2'}>
+              <View
+                width={80}
+                height={60}
+                borderRadius="$3"
+                backgroundColor="$background"
+                padding="$2"
+              >
+                <SizableText size="$1" color="$color">
+                  Card {i + 1}
+                </SizableText>
+              </View>
+            </Theme>
+          ))}
+        </XStack>
+      </YStack>
+    </Theme>
+  )
+}
+
+function Footer() {
+  return (
+    <XStack
+      padding="$4"
+      gap="$4"
+      justifyContent="space-between"
+      borderTopColor="$borderColor"
+      borderTopWidth={1}
+    >
+      {['About', 'Privacy', 'Terms', 'Contact', 'Help', 'Status'].map((link) => (
+        <SizableText key={link} size="$2" color="$color8" cursor="pointer">
+          {link}
+        </SizableText>
+      ))}
+    </XStack>
+  )
+}
+
+export function StressPage() {
+  // render profiling: mark start before React render, measure in effect after commit
+  if (shouldProfile) {
+    performance.mark('stress-render-start')
+  }
+
+  React.useEffect(() => {
+    if (!shouldProfile) return
+    performance.mark('stress-render-end')
+    performance.measure('stress-render', 'stress-render-start', 'stress-render-end')
+    const measure = performance.getEntriesByName('stress-render', 'measure')[0]
+
+    const t = (globalThis as any).__TIMER__
+    const profile = t?.profile()
+
+    const result = {
+      renderMs: Math.round(measure.duration * 100) / 100,
+      breakdown: profile?.timings,
+      runs: profile?.runs,
+      timestamp: Date.now(),
+    }
+
+    ;(window as any).__PERF_RESULT__ = result
+    t?.print()
+    console.log(`[StressPage] render: ${result.renderMs}ms`)
+  }, [])
+
+  return (
+    <YStack width="100%" maxWidth={900} gap="$4" paddingBottom="$6">
+      <Header />
+      <Separator />
+      <StatsRow />
+      <Separator />
+      <XStack gap="$4" paddingHorizontal="$4" flexWrap="wrap">
+        <YStack flex={2} minWidth={400} gap="$4">
+          <ItemList />
+        </YStack>
+        <YStack flex={1} minWidth={280} gap="$4">
+          <FormSection />
+          <ThemedSection />
+        </YStack>
+      </XStack>
+      <Separator />
+      <Footer />
+    </YStack>
+  )
+}

package/src/usecases/StylePlatform.tsx

@@ -0,0 +1,30 @@
+import { View } from '@hanzo/gui'
+
+export function StylePlatform() {
+  return (
+    <>
+      <View
+        id="style-platform"
+        $platform-web={{
+          my: 10,
+          overflowY: 'scroll',
+          backgroundColor: 'red',
+        }}
+      />
+      <View
+        id="style-platform-hover"
+        width={100}
+        height={100}
+        backgroundColor="blue"
+        hoverStyle={{
+          backgroundColor: 'yellow',
+        }}
+        $platform-web={{
+          hoverStyle: {
+            backgroundColor: 'green',
+          },
+        }}
+      />
+    </>
+  )
+}

package/src/usecases/StyleProp.tsx

@@ -0,0 +1,29 @@
+import { View } from '@hanzogui/core'
+
+export function StyleProp(test) {
+  return (
+    <>
+      <View
+        testID="style-prop"
+        style={{
+          background: 'radial-gradient(var(--color9), transparent 70%)',
+        }}
+      />
+      <View
+        testID="class-name"
+        className="test-bg"
+        pointerEvents={!test ? 'none' : 'auto'}
+        cursor="pointer"
+        onPress={() => {}}
+        width={100}
+        height={100}
+      />
+      <style
+        type="text/css"
+        dangerouslySetInnerHTML={{
+          __html: `.test-bg { background: red; }`,
+        }}
+      ></style>
+    </>
+  )
+}

package/src/usecases/StyledAnchor.tsx

@@ -0,0 +1,27 @@
+import { Anchor, styled } from '@hanzo/gui'
+
+const StyledAnchor1 = styled(Anchor, {
+  color: 'red',
+})
+
+const StyledAnchor2 = styled(Anchor, {
+  target: '_blank',
+})
+
+export function StyledAnchor() {
+  return (
+    <>
+      <StyledAnchor1
+        testID="test-anchor"
+        href="https://gui.hanzo.ai/test-link"
+        target="_blank"
+      >
+        hi
+      </StyledAnchor1>
+
+      <StyledAnchor2 testID="test-anchor2" href="https://gui.hanzo.ai/test-link">
+        hi
+      </StyledAnchor2>
+    </>
+  )
+}

package/src/usecases/StyledButtonAnimationAuto.tsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import { getSize, getSpace } from '@hanzogui/get-token'
+import type { GetProps, SizeTokens } from '@hanzogui/web'
+import {
+  View,
+  Text,
+  createStyledContext,
+  styled,
+  useTheme,
+  withStaticProperties,
+} from '@hanzogui/web'
+
+export const ButtonContext = createStyledContext({
+  size: '$md' as SizeTokens,
+})
+export const ButtonFrame = styled(View, {
+  name: 'Button',
+  context: ButtonContext,
+  backgroundColor: '$background',
+  alignItems: 'center',
+  flexDirection: 'row',
+
+  // Here is the issue: <---------------------------------------------------
+  height: 'auto',
+  transition: 'bouncy',
+  pressStyle: {
+    scale: 0.97,
+    opacity: 0.9,
+  },
+
+  variants: {
+    size: {
+      '...size': (name, { tokens }) => {
+        return {
+          height: tokens.size[name],
+
+          borderRadius: tokens.radius[name],
+
+          // note the getSpace and getSize helpers will let you shift down/up token sizes
+
+          // whereas with gap we just multiply by 0.2
+
+          // this is a stylistic choice, and depends on your design system values
+
+          gap: tokens.space[name].val * 0.2,
+
+          paddingHorizontal: getSpace(name, {
+            shift: -1,
+          }),
+        }
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    size: '$5',
+  },
+})
+type ButtonProps = GetProps<typeof ButtonFrame>
+export const ButtonText = styled(Text, {
+  name: 'ButtonText',
+  context: ButtonContext,
+  color: '$color',
+  userSelect: 'none',
+  variants: {
+    size: {
+      '...fontSize': (name, { font }) => ({
+        fontSize: font?.size[name],
+      }),
+    },
+  } as const,
+})
+
+const ButtonIcon = (props: { children: any }) => {
+  const { size } = React.useContext(ButtonContext.context)
+
+  const smaller = getSize(size, {
+    shift: -2,
+  })
+
+  const theme = useTheme()
+
+  return React.cloneElement(props.children, {
+    size: smaller.val * 0.5,
+    color: theme.color.get(),
+  })
+}
+
+const Button = withStaticProperties(ButtonFrame, {
+  Props: ButtonContext.Provider,
+  Text: ButtonText,
+  Icon: ButtonIcon,
+})
+
+export const StyledButtonAnimationAuto = () => (
+  <Button id="test">
+    <Button.Text>test</Button.Text>
+  </Button>
+)

package/src/usecases/StyledButtonTheme.tsx

@@ -0,0 +1,63 @@
+import type { GetProps, ButtonProps as GuiButtonProps } from '@hanzo/gui'
+import { Button, styled, useTheme, useThemeName } from '@hanzo/gui'
+
+const CustomButtonFrame = styled(Button.Frame, {})
+
+const CustomButtonText = styled(Button.Text, {
+  // ...
+})
+
+type CustomButtonFrameProps = GetProps<typeof CustomButtonFrame>
+type CustomButtonTextProps = GetProps<typeof CustomButtonText>
+
+export type CustomButtonProps = GuiButtonProps &
+  CustomButtonFrameProps &
+  CustomButtonTextProps
+
+export const CustomButton = CustomButtonFrame.styleable<CustomButtonProps>(
+  (propsIn, ref) => {
+    return (
+      <CustomButtonFrame {...propsIn} ref={ref}>
+        <CustomButtonText>{propsIn.children}</CustomButtonText>
+      </CustomButtonFrame>
+    )
+  }
+)
+
+const CustomButtonFrame2 = styled(Button.Frame, {
+  name: 'Test123',
+  backgroundColor: 'black',
+})
+
+const CustomButtonText2 = styled(Button.Text, {
+  // ...
+})
+
+type CustomButtonFrameProps2 = GetProps<typeof CustomButtonFrame>
+type CustomButtonTextProps2 = GetProps<typeof CustomButtonText>
+
+export type CustomButtonProps2 = GuiButtonProps &
+  CustomButtonFrameProps2 &
+  CustomButtonTextProps2
+
+export const CustomButton2 = CustomButtonFrame2.styleable<CustomButtonProps2>(
+  (propsIn, ref) => {
+    return (
+      <CustomButtonFrame2 {...propsIn} ref={ref}>
+        <CustomButtonText2>{propsIn.children}</CustomButtonText2>
+      </CustomButtonFrame2>
+    )
+  }
+)
+
+export const StyledButtonTheme = () => (
+  <>
+    <CustomButton id="test" theme="green">
+      test2
+    </CustomButton>
+
+    <CustomButton2 id="test2" theme="green">
+      test2
+    </CustomButton2>
+  </>
+)

package/src/usecases/StyledButtonVariantPseudo.tsx

@@ -0,0 +1,25 @@
+import { Button, styled } from '@hanzo/gui'
+
+const StyledButton = styled(Button, {
+  variants: {
+    reddish: {
+      true: {
+        backgroundColor: 'yellow',
+
+        pressStyle: {
+          backgroundColor: 'red',
+        },
+
+        hoverStyle: {
+          backgroundColor: 'green',
+        },
+      },
+    },
+  } as const,
+})
+
+export const StyledButtonVariantPseudo = () => (
+  <StyledButton id="test" reddish>
+    test
+  </StyledButton>
+)

package/src/usecases/StyledButtonVariantPseudoMerge.tsx

@@ -0,0 +1,77 @@
+import { Button, Theme, YStack, styled } from '@hanzo/gui'
+
+const StyledButton = styled(Button, {
+  pressStyle: {
+    scale: 0.5,
+  },
+
+  variants: {
+    reddish: {
+      true: {
+        pressStyle: {
+          backgroundColor: 'red',
+        },
+      },
+    },
+
+    bigGreen: {
+      true: {
+        pressStyle: {
+          backgroundColor: 'green',
+          scale: 1.2,
+        },
+      },
+    },
+  } as const,
+})
+
+const DoubleStyledButtonNoVariants = styled(StyledButton, {})
+
+const StyledButtonVariantTheme = styled(Button, {
+  pressStyle: {
+    scale: 0.5,
+  },
+
+  variants: {
+    testVariant: {
+      true: {
+        backgroundColor: '$background',
+      },
+    },
+  } as const,
+})
+
+export const StyledButtonVariantPseudoMerge = () => (
+  <>
+    <StyledButton id="test" reddish>
+      test
+    </StyledButton>
+
+    <StyledButton id="animated" reddish transition="quick">
+      animated
+    </StyledButton>
+
+    <StyledButton id="variant-merge">variant-merge</StyledButton>
+    <StyledButton id="variant-merge-red" reddish>
+      variant-merge-red
+    </StyledButton>
+    <StyledButton id="variant-merge-green" reddish bigGreen>
+      variant-merge-green
+    </StyledButton>
+    <StyledButton id="variant-merge-green-red" bigGreen reddish>
+      variant-merge-green-red
+    </StyledButton>
+
+    <DoubleStyledButtonNoVariants reddish id="double-styled">
+      double-styled
+    </DoubleStyledButtonNoVariants>
+
+    <Theme name="light">
+      <YStack theme="green">
+        <StyledButtonVariantTheme id="variant-theme" testVariant>
+          variant-theme
+        </StyledButtonVariantTheme>
+      </YStack>
+    </Theme>
+  </>
+)

package/src/usecases/StyledCheckboxTheme.tsx

@@ -0,0 +1,23 @@
+import { Check } from '@hanzogui/lucide-icons-2'
+import { Checkbox as GuiCheckbox, styled, withStaticProperties } from '@hanzo/gui'
+
+export const Checkbox = withStaticProperties(
+  styled(GuiCheckbox, {
+    theme: 'green',
+  }),
+  {
+    Indicator() {
+      return (
+        <GuiCheckbox.Indicator>
+          <Check color="$color12" />
+        </GuiCheckbox.Indicator>
+      )
+    },
+  }
+)
+
+export const StyledCheckboxTheme = () => (
+  <Checkbox defaultChecked={true} theme="green">
+    <Checkbox.Indicator />
+  </Checkbox>
+)