@hanzogui/kitchen-sink 3.0.5

package/src/usecases/TooltipTriggerInlineCase.tsx

@@ -0,0 +1,60 @@
+import { Paragraph, Text, Tooltip, XStack, YStack } from '@hanzo/gui'
+
+export function TooltipTriggerInlineCase() {
+  return (
+    <YStack flex={1} gap="$4" p="$4" bg="$background">
+      <Paragraph>
+        This tests that{' '}
+        <Tooltip>
+          <Tooltip.Trigger display="inline" data-testid="inline-tooltip-trigger">
+            <Text
+              data-testid="inline-tooltip-text"
+              color="$blue10"
+              textDecorationLine="underline"
+            >
+              inline tooltip triggers
+            </Text>
+          </Tooltip.Trigger>
+          <Tooltip.Content>
+            <Paragraph data-testid="inline-tooltip-content">Tooltip content</Paragraph>
+          </Tooltip.Content>
+        </Tooltip>{' '}
+        work correctly within text.
+      </Paragraph>
+
+      <XStack gap="$2" flexWrap="wrap">
+        <Text>Words:</Text>
+        <Tooltip>
+          <Tooltip.Trigger display="inline" data-testid="inline-word-1">
+            <Text color="$green10" textDecorationLine="underline">
+              hover
+            </Text>
+          </Tooltip.Trigger>
+          <Tooltip.Content>
+            <Paragraph>Word 1 tooltip</Paragraph>
+          </Tooltip.Content>
+        </Tooltip>
+        <Tooltip>
+          <Tooltip.Trigger display="inline" data-testid="inline-word-2">
+            <Text color="$red10" textDecorationLine="underline">
+              over
+            </Text>
+          </Tooltip.Trigger>
+          <Tooltip.Content>
+            <Paragraph>Word 2 tooltip</Paragraph>
+          </Tooltip.Content>
+        </Tooltip>
+        <Tooltip>
+          <Tooltip.Trigger display="inline" data-testid="inline-word-3">
+            <Text color="$blue10" textDecorationLine="underline">
+              these
+            </Text>
+          </Tooltip.Trigger>
+          <Tooltip.Content>
+            <Paragraph>Word 3 tooltip</Paragraph>
+          </Tooltip.Content>
+        </Tooltip>
+      </XStack>
+    </YStack>
+  )
+}

package/src/usecases/TransformMediaQueryMerge.tsx

@@ -0,0 +1,98 @@
+import { YStack, XStack, Text, Square, styled } from '@hanzo/gui'
+
+/**
+ * Test case for transform media query merging bug
+ *
+ * Bug: When a media query like $sm sets transform props like `x`, it should OVERWRITE
+ * the base value, not be CUMULATIVE (added together).
+ *
+ * Example:
+ * - Base: x={-100}
+ * - $sm: { x: 50 }
+ * - Expected at $sm: x = 50
+ * - Actual bug: x = -100 + 50 = -50 (cumulative)
+ */
+
+// Styled component with transform in media query definition
+const TransformBox = styled(Square, {
+  size: 100,
+  bg: '$blue10',
+  x: -100, // base: shifted left 100px
+
+  $sm: {
+    x: 50, // at $sm: should be shifted right 50px (OVERWRITE, not cumulative)
+    bg: '$green10',
+  },
+})
+
+export function TransformMediaQueryMerge() {
+  return (
+    <YStack p="$4" gap="$6">
+      <Text fontSize="$5" fontWeight="bold">
+        Transform Media Query Merge Test
+      </Text>
+      <Text fontSize="$2" color="$color10">
+        Resize window to test. At $sm breakpoint, x should OVERWRITE not be cumulative.
+      </Text>
+
+      {/* Test 1: styled() component with transform in definition */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">Test 1: styled() component</Text>
+        <Text fontSize="$2">Base: x=-100, $sm: x=50</Text>
+        <Text fontSize="$2">
+          Expected at $sm: x=50 (overwrite), NOT x=-50 (cumulative)
+        </Text>
+        <XStack
+          height={150}
+          bg="$color3"
+          alignItems="center"
+          justifyContent="center"
+          position="relative"
+        >
+          <YStack position="absolute" left={0} top={0} bottom={0} width={1} bg="$red10" />
+          <Text position="absolute" left={5} top={5} fontSize="$1">
+            x=0 line
+          </Text>
+          <TransformBox testID="test1" data-testid="test1" />
+        </XStack>
+      </YStack>
+
+      {/* Test 3: Runtime prop with media query */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">Test 3: Runtime prop with $sm</Text>
+        <Text fontSize="$2">Base: x=-75, $sm: x=75</Text>
+        <Text fontSize="$2">Expected at $sm: x=75 (overwrite), NOT x=0 (cumulative)</Text>
+        <XStack
+          height={150}
+          bg="$color3"
+          alignItems="center"
+          justifyContent="center"
+          position="relative"
+        >
+          <YStack
+            position="absolute"
+            left="50%"
+            top={0}
+            bottom={0}
+            width={1}
+            bg="$red10"
+          />
+          <Text position="absolute" left={5} top={5} fontSize="$1">
+            center line
+          </Text>
+          <Square
+            testID="test3"
+            data-testid="test3"
+            size={100}
+            bg="$red10"
+            x={-75}
+            $sm={{
+              x: 75,
+              bg: '$blue10',
+            }}
+          />
+        </XStack>
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/UseCases.tsx

@@ -0,0 +1,409 @@
+import React from 'react'
+import '@hanzogui/polyfill-dev'
+
+import {
+  Button,
+  H1,
+  Header,
+  SizableText,
+  Square,
+  GuiProvider,
+  Theme,
+  YStack,
+  getMedia,
+  styled,
+  useThemeName,
+} from '@hanzo/gui'
+
+import config from '../gui.config'
+
+// import '@hanzogui/core/reset.css'
+
+// webpack fix..
+if (typeof require !== 'undefined') {
+  globalThis['React'] = require('react')
+}
+
+// TODO: extract the use cases
+export function UseCases() {
+  const [theme, setTheme] = React.useState('blue')
+
+  const memoized = React.useMemo(() => <Square size={100} bg="$background" />, [])
+
+  return (
+    <Theme name={theme as any}>
+      <YStack>
+        <Button
+          onPress={() => {
+            setTheme((prev) => {
+              return prev === 'blue' ? 'red' : 'blue'
+            })
+          }}
+        >
+          Change ({theme})
+        </Button>
+
+        {memoized}
+      </YStack>
+    </Theme>
+  )
+}
+
+const CustomButtonFrame = styled(Button.Frame, {
+  variants: {
+    backgrounded: {
+      true: {
+        // not intellisensing...
+        backgroundColor: '$background',
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    // <---- none of these are applied as default variants
+    // big: true,
+    // primary: true,
+  },
+})
+function AnimationChangeTest() {
+  const [transition, setTransition] = React.useState<'lazy' | 'quick'>('lazy')
+  return (
+    <>
+      <Square
+        transition={transition}
+        size={100}
+        borderColor="red"
+        hoverStyle={{ scale: 2 }}
+      />
+      <Button onPress={() => setTransition(transition === 'lazy' ? 'quick' : 'lazy')}>
+        {transition}
+      </Button>
+    </>
+  )
+}
+
+export const StyledSizableText = styled(SizableText, {
+  name: 'TextSizableText',
+  variants: {
+    muted: {
+      true: {
+        color: 'red',
+      },
+    },
+  } as const,
+})
+
+export const Sandbox = () => {
+  // const scheme = useColorScheme()
+  const [theme, setTheme] = React.useState('light')
+
+  const [x, setX] = React.useState(0)
+
+  return (
+    <GuiProvider config={config} defaultTheme={theme}>
+      <link href="/fonts/inter.css" rel="stylesheet" />
+      {/* {getStyleElement()} */}
+
+      <button
+        style={{
+          position: 'absolute',
+          top: 30,
+          left: 20,
+        }}
+        onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+      >
+        Scheme
+      </button>
+
+      <style
+        type="text/css"
+        dangerouslySetInnerHTML={{
+          __html: `html, body { overflow: hidden; height: 100vh; width: 100vw; }`,
+        }}
+      />
+
+      <div style={{ overflow: 'scroll', maxHeight: '100vh' }}>
+        <div
+          style={{
+            // test scrolling
+            pointerEvents: 'auto',
+            display: 'flex',
+            flexDirection: 'column',
+            background: 'var(--background)',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minHeight: '120vh',
+            overflow: 'hidden',
+          }}
+        >
+          {/* <SelectDemo /> */}
+
+          <Header data-hello="world">
+            <StyledSizableText>ok</StyledSizableText>
+          </Header>
+
+          {/* <Button accessibilityRole="link">hi</Button> */}
+
+          {/* <TooltipDemo /> */}
+
+          {/* <XStack
+             $gtSm={{
+               space: 50,
+             }}
+             $gtLg={{
+               space: 200,
+             }}
+            >
+             <Square size={100} bc="red" />
+             <Square size={100} bc="red" />
+             <Square size={100} bc="red" />
+            </XStack> */}
+
+          {/* <AnimationsHoverDemo /> */}
+
+          {/* <AnimationChangeTest /> */}
+
+          {/* <Square bc="red" size={100} style={{ filter: 'blur(10px)' }} /> */}
+
+          {/* <AlertDialogDemo /> */}
+
+          {/* <InputsDemo /> */}
+
+          {/* <DialogDemo /> */}
+
+          {/* <SheetDemo /> */}
+
+          {/* <ThemeChangeRenderTest /> */}
+
+          <Button
+            onPress={async () => {
+              await import('./SecondPage')
+            }}
+          >
+            Load Second Page
+          </Button>
+
+          {/* <Input  placeholder="hello" /> */}
+
+          {/* <>make sure enterStyle works without scale set on defaults</>
+            <Square
+             size={100}
+             bc="red"
+             transition="bouncy"
+             
+             // scale={1}
+             enterStyle={{
+               scale: 2,
+             }}
+            /> */}
+          {/* <AnimationsPresenceDemo /> */}
+          {/* <Square size={100} bc="red" transition="bouncy" /> */}
+          {/* <AnimationsPresenceDemo /> */}
+          {/* <SandboxExample /> */}
+          {/* <SelectDemo /> */}
+          {/* <PopoverDemo /> */}
+          {/* <DialogDemo /> */}
+          {/* <SheetDemo /> */}
+
+          {/* <PopoverDemo /> */}
+          {/* <SheetDemo /> */}
+
+          {/* <ButtonDemo /> */}
+
+          {/* <UseThemeNameTest /> */}
+          {/* <ThemeInverseReverseTest /> */}
+          {/* <PerformanceTest /> */}
+
+          {/* <CustomButtonFrame >
+             <Paragraph>hihi</Paragraph>
+            </CustomButtonFrame> */}
+
+          {/* <Button>hi</Button> */}
+
+          {/* <Input /> */}
+
+          {/* <TooltipDemo /> */}
+
+          {/* <SelectDemo /> */}
+
+          {/* <DialogDemo /> */}
+
+          {/* <StyledInput  /> */}
+
+          {/* <SheetDemo /> */}
+
+          {/* space */}
+          {/* <YStack  gap="$2" $gtSm={{ gap: '$10' }}>
+             <Circle bc="red" size="$10" />
+             <Circle bc="red" size="$10" />
+             <Circle bc="red" size="$10" />
+            </YStack> */}
+
+          {/* <LabelDemo /> */}
+          {/* <SelectDemo /> */}
+
+          {/* <Square size={100} bc="red" /> */}
+          {/* <SheetDemo /> */}
+          {/* <Input placeholder="hi" /> */}
+
+          {/* <AnimationsDemo /> */}
+          {/* <AnimationsPresenceDemo /> */}
+
+          {/* <SliderDemo /> */}
+
+          {/* <TestFontTokensInVariants type="H1" size="large">
+            Hello world
+            </TestFontTokensInVariants> */}
+
+          {/* <Button size="$2" $sm={{ size: '$8' }} >
+            test
+            </Button> */}
+
+          {/* <Button pressStyle={{ backgroundColor: 'blue' }}>hi</Button> */}
+
+          {/* <GroupDemo /> */}
+
+          {/* <Animated.View style={style} /> */}
+          {/* <AlertDialogDemo /> */}
+          {/* <AddThemeDemo /> */}
+          {/* <AnimationsDemo /> */}
+          {/* <SheetDemo /> */}
+          {/* <DialogDemo /> */}
+          {/* <InputsDemo /> */}
+          {/* <SelectDemo /> */}
+          {/* <ScrollView bc="yellow" p="$1" $gtXs={{ bg: 'blue', p: '$4' }} maxHeight={200}>
+            <Square bc="red" size={100} />
+            <Square bc="red" size={100} />
+            <Square bc="red" size={100} />
+            <Square bc="red" size={100} />
+            <Square bc="red" size={100} />
+            <Square bc="red" size={100} />
+            </ScrollView> */}
+          {/* <PopoverDemo /> */}
+          {/* <TooltipDemo /> */}
+          {/* <SwitchDemo /> */}
+          {/* <SheetDemo2 /> */}
+          {/* <SheetDemo /> */}
+          {/* <SwitchDemo /> */}
+          {/* <XStack gap="$4">
+            <Square size={50} bc="red" />
+            <Square $sm={{ display: 'none' }} size={50} bc="red" />
+            <Square size={50} bc="red" />
+            <Square disp="none" size={50} bc="red" />
+            <Square size={50} bc="red" />
+            </XStack> */}
+        </div>
+      </div>
+    </GuiProvider>
+  )
+}
+
+// function Test() {
+//   return null
+// }
+
+// function FontLanguageDemo() {
+//   return (
+//     <FontLanguage heading="default" body="cn">
+//       <Paragraph fos="$4" fontFamily="$body">
+//         hello 🇨🇳
+//       </Paragraph>
+//       <FontLanguage body="default">
+//         <Paragraph fos="$4" fontFamily="$body">
+//           hi again
+//         </Paragraph>
+//       </FontLanguage>
+//     </FontLanguage>
+//   )
+// }
+
+// function SheetDemo2() {
+//   const [open, setOpen] = useState(false)
+//   const [position, setPosition] = useState(0)
+//   return (
+//     <>
+//       <Button size="$6" circular onPress={() => setOpen((x) => !x)} />
+//       <Sheet
+//         modal
+//         open={open}
+//         onOpenChange={setOpen}
+//         snapPoints={[80]}
+//         position={position}
+//         onPositionChange={setPosition}
+//         dismissOnSnapToBottom
+//       >
+//         <Sheet.Overlay />
+//         <Sheet.Frame ai="center" jc="center">
+//           <Sheet.Handle />
+//           <Button
+//             size="$6"
+//             circular
+//             onPress={() => {
+//               setOpen(false)
+//             }}
+//           />
+//         </Sheet.Frame>
+//       </Sheet>
+//     </>
+//   )
+// }
+
+// const Frame = styled(ButtonFrame, {
+//   variants: {
+//     square: {
+//       ':number': (size, { tokens }) => {
+//         return {
+//           width: tokens.size[size] ?? size,
+//           p: 0,
+//         }
+//       },
+//     },
+//   } as const,
+// })
+
+// const StyledInput = styled(Input, {
+//   debug: 'verbose',
+//   backgroundColor: 'red',
+//   hoverStyle: {
+//     backgroundColor: 'blue',
+//   },
+// })
+
+// const StyledText = styled(Text, {
+//   fontFamily: '$alternative',
+
+//   variants: {
+//     cool: {
+//       true: {
+//         fontFamily: '',
+//       },
+//     },
+//   },
+// })
+
+function PerformanceTest() {
+  const [t, setT] = React.useState('pink' as any)
+  return (
+    <YStack theme={t}>
+      <Square onPress={() => setT('blue')} size={100} bg="$color10" />
+    </YStack>
+  )
+}
+
+function UseThemeNameTest() {
+  const [name, setname] = React.useState('blue')
+
+  return (
+    <Theme name={name as any}>
+      <Button onPress={() => setname('red')}>Change</Button>
+      <Square accessibilityElementsHidden bg="$background" />
+      <UseThemeNameChildTest />
+    </Theme>
+  )
+}
+
+function UseThemeNameChildTest() {
+  const name = useThemeName()
+
+  return <H1>{name}</H1>
+}

package/src/usecases/UseTheme.tsx

@@ -0,0 +1,41 @@
+import { Text, useTheme } from '@hanzogui/core'
+import { YStack } from '@hanzo/gui'
+
+export function UseTheme() {
+  const x = useTheme()
+  console.info({
+    label: 'usecases/UseTheme',
+    test1: x.background.get(),
+    test2: x.background.val,
+    test3: x.blue1.get(),
+    test4: x.blue1.val,
+  })
+  return (
+    <YStack gap="$4">
+      <YStack>
+        <Text>x.background.get():</Text>
+        <Text id="theme-get" fontFamily="$mono">
+          {x.background.get()}
+        </Text>
+      </YStack>
+      <YStack>
+        <Text>x.background.val:</Text>
+        <Text id="theme-val" fontFamily="$mono">
+          {x.background.val}
+        </Text>
+      </YStack>
+      <YStack>
+        <Text>x.blue1.get():</Text>
+        <Text id="token-get" fontFamily="$mono">
+          {x.blue1.get()}
+        </Text>
+      </YStack>
+      <YStack>
+        <Text>x.blue1.val:</Text>
+        <Text id="token-val" fontFamily="$mono">
+          {x.blue1.val}
+        </Text>
+      </YStack>
+    </YStack>
+  )
+}