@hanzogui/kitchen-sink 3.0.5

package/src/usecases/SheetSnapPointsFitCase.tsx

@@ -0,0 +1,393 @@
+import { useState } from 'react'
+import { Adapt, Button, Dialog, Paragraph, Sheet, YStack } from '@hanzo/gui'
+
+/**
+ * Test case for Sheet with snapPointsMode="fit" adapted from Dialog
+ * This tests the fix for white flash on close (issue #3651)
+ */
+export function SheetSnapPointsFitCase() {
+  return (
+    <YStack padding="$4" gap="$4">
+      <AdaptedDialogSheet />
+      <StandaloneSheetFit />
+      <StandaloneSheetPercent />
+      <StandaloneSheetConstant />
+      <RapidOpenCloseSheet />
+      <DynamicContentSheet />
+    </YStack>
+  )
+}
+
+/**
+ * Dialog that adapts to Sheet with snapPointsMode="fit"
+ * This is the primary test case for the white flash fix
+ */
+function AdaptedDialogSheet() {
+  return (
+    <Dialog modal>
+      <Dialog.Trigger asChild>
+        <Button data-testid="adapted-dialog-trigger">Open Adapted Dialog/Sheet</Button>
+      </Dialog.Trigger>
+
+      <Adapt when="sm" platform="web">
+        <Sheet
+          transition="medium"
+          zIndex={200000}
+          modal
+          dismissOnSnapToBottom
+          snapPointsMode="fit"
+        >
+          <Sheet.Frame
+            data-testid="adapted-sheet-frame"
+            padding="$4"
+            justifyContent="center"
+            gap="$2"
+          >
+            <Sheet.Handle data-testid="adapted-sheet-handle" />
+            <Adapt.Contents />
+          </Sheet.Frame>
+          <Sheet.Overlay
+            data-testid="adapted-sheet-overlay"
+            transition="lazy"
+            bg="$color"
+            opacity={0.5}
+            enterStyle={{ opacity: 0 }}
+            exitStyle={{ opacity: 0 }}
+          />
+        </Sheet>
+      </Adapt>
+
+      <Dialog.Portal>
+        <Dialog.Overlay
+          key="overlay"
+          transition="quick"
+          bg="$color"
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+
+        <Dialog.Content
+          bordered
+          elevate
+          key="content"
+          transition="quick"
+          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
+          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
+          width={400}
+          padding="$6"
+          gap="$4"
+        >
+          <YStack data-testid="adapted-dialog-content" gap="$4">
+            <Dialog.Title>Adapted Dialog</Dialog.Title>
+            <Dialog.Description>
+              This dialog adapts to a sheet on small screens with snapPointsMode="fit".
+              The sheet should close smoothly without a white flash.
+            </Dialog.Description>
+            <Paragraph>Some content to give the sheet height when in fit mode.</Paragraph>
+            <Dialog.Close asChild>
+              <Button data-testid="adapted-dialog-close">Close</Button>
+            </Dialog.Close>
+          </YStack>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog>
+  )
+}
+
+/**
+ * Standalone Sheet with snapPointsMode="fit"
+ * This should not have any regression from the fix
+ */
+function StandaloneSheetFit() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <Button data-testid="standalone-fit-trigger" onPress={() => setOpen(true)}>
+        Open Standalone Sheet (fit)
+      </Button>
+      <Sheet
+        modal
+        open={open}
+        onOpenChange={setOpen}
+        snapPointsMode="fit"
+        dismissOnSnapToBottom
+        zIndex={100000}
+        transition="medium"
+      >
+        <Sheet.Overlay
+          data-testid="standalone-fit-overlay"
+          transition="lazy"
+          bg="$color"
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+        <Sheet.Handle data-testid="standalone-fit-handle" />
+        <Sheet.Frame
+          data-testid="standalone-fit-frame"
+          padding="$4"
+          justifyContent="center"
+          alignItems="center"
+          gap="$5"
+        >
+          <Paragraph>Standalone sheet with snapPointsMode="fit"</Paragraph>
+          <Button data-testid="standalone-fit-close" onPress={() => setOpen(false)}>
+            Close
+          </Button>
+        </Sheet.Frame>
+      </Sheet>
+    </>
+  )
+}
+
+/**
+ * Standalone Sheet with snapPointsMode="percent"
+ * This should not have any regression from the fix
+ */
+function StandaloneSheetPercent() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <Button data-testid="standalone-percent-trigger" onPress={() => setOpen(true)}>
+        Open Standalone Sheet (percent)
+      </Button>
+      <Sheet
+        modal
+        open={open}
+        onOpenChange={setOpen}
+        snapPoints={[50, 25]}
+        snapPointsMode="percent"
+        dismissOnSnapToBottom
+        zIndex={100000}
+        transition="medium"
+      >
+        <Sheet.Overlay
+          data-testid="standalone-percent-overlay"
+          transition="lazy"
+          bg="$color"
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+        <Sheet.Handle data-testid="standalone-percent-handle" />
+        <Sheet.Frame
+          data-testid="standalone-percent-frame"
+          padding="$4"
+          justifyContent="center"
+          alignItems="center"
+          gap="$5"
+        >
+          <Paragraph>Standalone sheet with snapPointsMode="percent" (50%, 25%)</Paragraph>
+          <Button data-testid="standalone-percent-close" onPress={() => setOpen(false)}>
+            Close
+          </Button>
+        </Sheet.Frame>
+      </Sheet>
+    </>
+  )
+}
+
+/**
+ * Standalone Sheet with snapPointsMode="constant"
+ * This should not have any regression from the fix
+ */
+function StandaloneSheetConstant() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <Button data-testid="standalone-constant-trigger" onPress={() => setOpen(true)}>
+        Open Standalone Sheet (constant)
+      </Button>
+      <Sheet
+        modal
+        open={open}
+        onOpenChange={setOpen}
+        snapPoints={[300, 200]}
+        snapPointsMode="constant"
+        dismissOnSnapToBottom
+        zIndex={100000}
+        transition="medium"
+      >
+        <Sheet.Overlay
+          data-testid="standalone-constant-overlay"
+          transition="lazy"
+          bg="$color"
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+        <Sheet.Handle data-testid="standalone-constant-handle" />
+        <Sheet.Frame
+          data-testid="standalone-constant-frame"
+          padding="$4"
+          justifyContent="center"
+          alignItems="center"
+          gap="$5"
+        >
+          <Paragraph>
+            Standalone sheet with snapPointsMode="constant" (300px, 200px)
+          </Paragraph>
+          <Button data-testid="standalone-constant-close" onPress={() => setOpen(false)}>
+            Close
+          </Button>
+        </Sheet.Frame>
+      </Sheet>
+    </>
+  )
+}
+
+/**
+ * Test rapid open/close interactions
+ */
+function RapidOpenCloseSheet() {
+  const [open, setOpen] = useState(false)
+  const [clickCount, setClickCount] = useState(0)
+
+  const handleRapidToggle = () => {
+    setClickCount((c) => c + 1)
+    setOpen((prev) => !prev)
+  }
+
+  return (
+    <>
+      <Button data-testid="rapid-toggle-trigger" onPress={handleRapidToggle}>
+        Rapid Toggle (count: {clickCount})
+      </Button>
+      <Sheet
+        modal
+        open={open}
+        onOpenChange={setOpen}
+        snapPointsMode="fit"
+        dismissOnSnapToBottom
+        zIndex={100000}
+        transition="medium"
+      >
+        <Sheet.Overlay
+          data-testid="rapid-overlay"
+          transition="lazy"
+          bg="$color"
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+        <Sheet.Handle data-testid="rapid-handle" />
+        <Sheet.Frame
+          data-testid="rapid-frame"
+          padding="$4"
+          justifyContent="center"
+          alignItems="center"
+          gap="$5"
+        >
+          <Paragraph>Rapid open/close test - count: {clickCount}</Paragraph>
+          <Button data-testid="rapid-close" onPress={() => setOpen(false)}>
+            Close
+          </Button>
+        </Sheet.Frame>
+      </Sheet>
+    </>
+  )
+}
+
+/**
+ * Test dynamic content changes while sheet is open
+ */
+function DynamicContentSheet() {
+  const [open, setOpen] = useState(false)
+  const [contentSize, setContentSize] = useState<'small' | 'medium' | 'large'>('small')
+
+  return (
+    <>
+      <Button data-testid="dynamic-content-trigger" onPress={() => setOpen(true)}>
+        Open Dynamic Content Sheet
+      </Button>
+      <Sheet
+        modal
+        open={open}
+        onOpenChange={setOpen}
+        snapPointsMode="fit"
+        dismissOnSnapToBottom
+        zIndex={100000}
+        transition="medium"
+      >
+        <Sheet.Overlay
+          data-testid="dynamic-content-overlay"
+          transition="lazy"
+          bg="$color"
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+        <Sheet.Handle data-testid="dynamic-content-handle" />
+        <Sheet.Frame
+          data-testid="dynamic-content-frame"
+          padding="$4"
+          justifyContent="center"
+          alignItems="center"
+          gap="$4"
+        >
+          <Paragraph data-testid="dynamic-content-size">
+            Current size: {contentSize}
+          </Paragraph>
+
+          {contentSize === 'small' && (
+            <Paragraph>Small content - just a little text.</Paragraph>
+          )}
+
+          {contentSize === 'medium' && (
+            <YStack gap="$2">
+              <Paragraph>Medium content with more text.</Paragraph>
+              <Paragraph>This adds more height to the sheet.</Paragraph>
+              <Paragraph>The sheet should adjust smoothly.</Paragraph>
+            </YStack>
+          )}
+
+          {contentSize === 'large' && (
+            <YStack gap="$2">
+              <Paragraph>Large content with lots of text.</Paragraph>
+              <Paragraph>This is line 2 of the large content.</Paragraph>
+              <Paragraph>This is line 3 of the large content.</Paragraph>
+              <Paragraph>This is line 4 of the large content.</Paragraph>
+              <Paragraph>This is line 5 of the large content.</Paragraph>
+              <Paragraph>The sheet height should be much larger now.</Paragraph>
+            </YStack>
+          )}
+
+          <YStack gap="$2" flexDirection="row" flexWrap="wrap" justifyContent="center">
+            <Button
+              data-testid="dynamic-content-small"
+              size="$3"
+              onPress={() => setContentSize('small')}
+              theme={contentSize === 'small' ? 'blue' : undefined}
+            >
+              Small
+            </Button>
+            <Button
+              data-testid="dynamic-content-medium"
+              size="$3"
+              onPress={() => setContentSize('medium')}
+              theme={contentSize === 'medium' ? 'blue' : undefined}
+            >
+              Medium
+            </Button>
+            <Button
+              data-testid="dynamic-content-large"
+              size="$3"
+              onPress={() => setContentSize('large')}
+              theme={contentSize === 'large' ? 'blue' : undefined}
+            >
+              Large
+            </Button>
+          </YStack>
+
+          <Button data-testid="dynamic-content-close" onPress={() => setOpen(false)}>
+            Close
+          </Button>
+        </Sheet.Frame>
+      </Sheet>
+    </>
+  )
+}

package/src/usecases/ShorthandVariables.tsx

@@ -0,0 +1,49 @@
+import { View } from '@hanzo/gui'
+
+export function ShorthandVariables() {
+  return (
+    <View gap="$4" padding="$4">
+      {/* boxShadow with $variable - works on web and native (RN 0.76+) */}
+      <View
+        testID="boxshadow-var"
+        id="boxshadow-var"
+        width={100}
+        height={100}
+        backgroundColor="$background"
+        boxShadow="0px 0px 10px $shadowColor"
+      />
+
+      {/* boxShadow with multiple $variables */}
+      <View
+        testID="boxshadow-multi"
+        id="boxshadow-multi"
+        width={100}
+        height={100}
+        backgroundColor="$background"
+        boxShadow="0px 0px 5px $shadowColor, 0px 0px 15px $color"
+      />
+
+      {/* border with $variable - use individual props for cross-platform */}
+      <View
+        testID="border-var"
+        id="border-var"
+        width={100}
+        height={100}
+        backgroundColor="$background"
+        borderWidth={2}
+        borderStyle="solid"
+        borderColor="$color"
+      />
+
+      {/* boxShadow without variables (passthrough) */}
+      <View
+        testID="boxshadow-plain"
+        id="boxshadow-plain"
+        width={100}
+        height={100}
+        backgroundColor="$background"
+        boxShadow="0px 0px 10px rgba(0, 0, 0, 0.2)"
+      />
+    </View>
+  )
+}

package/src/usecases/SlowThemeReRender.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { View as GuiView, Theme } from '@hanzogui/core'
+
+import { Button, View as RNView } from 'react-native'
+
+const newArray = Array.from(Array(10).keys())
+
+export function SlowThemeReRender() {
+  const [theme, setTheme] = React.useState<'light' | 'dark'>('light')
+
+  const [type, setType] = React.useState<'Gui' | 'RN'>('Gui')
+  return (
+    <Theme name={theme}>
+      <Button
+        onPress={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+        title={`Toggle Theme ${theme}`}
+      ></Button>
+      <Button
+        onPress={() => setType(type === 'Gui' ? 'RN' : 'Gui')}
+        title={type === 'Gui' ? 'Using View from Gui' : 'Using View with inline styles'}
+      />
+
+      <RNView
+        style={{
+          rowGap: 4,
+          flexDirection: 'row',
+          columnGap: 4,
+          flexWrap: 'wrap',
+        }}
+      >
+        {type === 'Gui'
+          ? newArray.map((item) => (
+              <GuiView key={item} backgroundColor="$color" height={50} width={50} />
+            ))
+          : newArray.map((item) => (
+              <RNView
+                key={item}
+                style={{
+                  backgroundColor: theme === 'dark' ? 'red' : 'blue',
+                  height: 50,
+                  width: 50,
+                }}
+              />
+            ))}
+      </RNView>
+    </Theme>
+  )
+}

package/src/usecases/SpinnerCustomColors.tsx

@@ -0,0 +1,34 @@
+import { Spinner, YStack, H2, SizableText } from '@hanzo/gui'
+
+export const SpinnerCustomColors = () => {
+  return (
+    <YStack gap="$4" padding="$4">
+      <H2>Spinner with Custom Color Tokens</H2>
+
+      <YStack gap="$4">
+        <SizableText>Default Spinner</SizableText>
+        <Spinner id="spinner-default" />
+      </YStack>
+
+      <YStack gap="$4">
+        <SizableText>Custom Red Spinner</SizableText>
+        <Spinner id="spinner-custom-red" color="$customRed" />
+      </YStack>
+
+      <YStack gap="$4">
+        <SizableText>Custom Blue Spinner</SizableText>
+        <Spinner id="spinner-custom-blue" color="$customBlue" />
+      </YStack>
+
+      <YStack gap="$4">
+        <SizableText>Custom Green Spinner</SizableText>
+        <Spinner id="spinner-custom-green" color="$customGreen" />
+      </YStack>
+
+      <YStack gap="$4">
+        <SizableText>Test Something Different Color</SizableText>
+        <Spinner id="spinner-test-different" color="$testsomethingdifferent" />
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/StackZIndex.tsx

@@ -0,0 +1,82 @@
+import { Button, Dialog, Popover, YStack } from '@hanzo/gui'
+
+export function StackZIndex() {
+  return (
+    <>
+      {/* hardcoded */}
+      <Popover open size="$5" allowFlip>
+        <Popover.Trigger asChild>
+          <Button>toggle</Button>
+        </Popover.Trigger>
+
+        <Popover.Content zIndex={200_000} id="hardcoded-popover" bg="pink">
+          <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
+
+          <YStack gap="$3"></YStack>
+        </Popover.Content>
+      </Popover>
+
+      <Dialog modal open>
+        <Dialog.Portal zIndex={300_000}>
+          <Dialog.Content id="hardcoded-dialog" width={200} height={200} bg="black">
+            <Dialog.Title>hi</Dialog.Title>
+            <Dialog.Description>ok</Dialog.Description>
+
+            <Popover open size="$5" allowFlip>
+              <Popover.Trigger asChild>
+                <Button>toggle</Button>
+              </Popover.Trigger>
+
+              <Popover.Content
+                id="above-hardcoded-dialog"
+                bg="orange"
+                width={100}
+                height={100}
+              >
+                <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
+              </Popover.Content>
+            </Popover>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog>
+
+      {/* stacked */}
+      <Popover open size="$5" allowFlip>
+        <Popover.Trigger asChild>
+          <Button>toggle</Button>
+        </Popover.Trigger>
+
+        <Popover.Content
+          id="bottom-popover"
+          borderWidth={1}
+          bg="red"
+          width={500}
+          height={500}
+        >
+          <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
+
+          <YStack gap="$3"></YStack>
+        </Popover.Content>
+      </Popover>
+
+      <Dialog modal open>
+        <Dialog.Portal>
+          <Dialog.Content id="middle-dialog" width={500} height={500} bg="yellow">
+            <Dialog.Title>hi</Dialog.Title>
+            <Dialog.Description>ok</Dialog.Description>
+
+            <Popover open size="$5" allowFlip>
+              <Popover.Trigger asChild>
+                <Button>toggle</Button>
+              </Popover.Trigger>
+
+              <Popover.Content id="top-popover" bg="green" width={500} height={500}>
+                <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
+              </Popover.Content>
+            </Popover>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog>
+    </>
+  )
+}