@hanzogui/kitchen-sink 3.0.5

package/src/usecases/SheetAnimationCase.tsx

@@ -0,0 +1,155 @@
+import { useState, useRef, useCallback } from 'react'
+import { Button, Paragraph, Sheet, YStack, XStack } from '@hanzo/gui'
+
+/**
+ * Test case for Sheet animation configurations
+ * Tests that different animation names and configs produce different animation speeds
+ */
+export function SheetAnimationCase() {
+  return (
+    <YStack gap="$4" padding="$4" flex={1}>
+      {/* Test 1: animation prop only - "quick" */}
+      <SheetTest testId="animation-quick" transition="quick" label='transition="quick"' />
+
+      {/* Test 2: animation prop only - "lazy" */}
+      <SheetTest testId="animation-lazy" transition="lazy" label='transition="lazy"' />
+
+      {/* Test 3: animation prop only - "slow" */}
+      <SheetTest testId="animation-slow" transition="slow" label='transition="slow"' />
+
+      {/* Test 4: transitionConfig prop only - fast timing */}
+      <SheetTest
+        testId="transitionConfig-only"
+        transitionConfig={{
+          type: 'timing',
+          duration: 100,
+        }}
+        label="transitionConfig only (100ms)"
+      />
+
+      {/* Test 5: transitionConfig prop only - slow timing */}
+      <SheetTest
+        testId="transitionConfig-slow"
+        transitionConfig={{
+          type: 'timing',
+          duration: 1000,
+        }}
+        label="transitionConfig only (1000ms)"
+      />
+
+      {/* Test 6: transition + transitionConfig override (config should win) */}
+      <SheetTest
+        testId="animation-plus-config"
+        transition="quick"
+        transitionConfig={{
+          type: 'timing',
+          duration: 1000,
+        }}
+        label='transition="quick" + transitionConfig (override to 1000ms)'
+      />
+    </YStack>
+  )
+}
+
+interface SheetTestProps {
+  testId: string
+  transition?: string
+  transitionConfig?: {
+    type: 'spring' | 'timing' | 'decay'
+    damping?: number
+    stiffness?: number
+    mass?: number
+    duration?: number
+  }
+  label: string
+}
+
+function SheetTest({ testId, transition, transitionConfig, label }: SheetTestProps) {
+  const [open, setOpen] = useState(false)
+  const [lastDuration, setLastDuration] = useState<number | null>(null)
+  const startTimeRef = useRef<number>(0)
+
+  const handleOpen = useCallback(() => {
+    startTimeRef.current = performance.now()
+    setOpen(true)
+  }, [])
+
+  const handleOpenChange = useCallback((isOpen: boolean) => {
+    if (!isOpen && startTimeRef.current > 0) {
+      // Sheet is closing, we already measured open duration
+    }
+    setOpen(isOpen)
+  }, [])
+
+  // Track when sheet frame enters viewport (animation complete)
+  const handleFrameLayout = useCallback(() => {
+    if (open && startTimeRef.current > 0) {
+      const duration = performance.now() - startTimeRef.current
+      setLastDuration(Math.round(duration))
+      startTimeRef.current = 0
+    }
+  }, [open])
+
+  return (
+    <XStack gap="$2" alignItems="center" flexWrap="wrap">
+      <Button
+        size="$3"
+        onPress={handleOpen}
+        testID={`${testId}-trigger`}
+        data-testid={`${testId}-trigger`}
+      >
+        {label}
+      </Button>
+      {lastDuration !== null && (
+        <Paragraph
+          size="$2"
+          testID={`${testId}-duration`}
+          data-testid={`${testId}-duration`}
+        >
+          {lastDuration}ms
+        </Paragraph>
+      )}
+
+      <Sheet
+        open={open}
+        onOpenChange={handleOpenChange}
+        transition={transition as any}
+        transitionConfig={transitionConfig as any}
+        modal
+        dismissOnSnapToBottom
+        snapPoints={[40]}
+      >
+        <Sheet.Overlay
+          transition={transition as any}
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+        <Sheet.Frame
+          padding="$4"
+          bg="$background"
+          testID={`${testId}-frame`}
+          data-testid={`${testId}-frame`}
+          onLayout={handleFrameLayout}
+        >
+          <YStack gap="$4">
+            <Paragraph testID={`${testId}-label`} data-testid={`${testId}-label`}>
+              {label}
+            </Paragraph>
+            <Paragraph size="$2" color="$color10">
+              Transition: {transition || 'none'}, Config:{' '}
+              {transitionConfig ? JSON.stringify(transitionConfig) : 'none'}
+            </Paragraph>
+            <Button
+              onPress={() => setOpen(false)}
+              testID={`${testId}-close`}
+              data-testid={`${testId}-close`}
+            >
+              Close
+            </Button>
+          </YStack>
+        </Sheet.Frame>
+      </Sheet>
+    </XStack>
+  )
+}

package/src/usecases/SheetDragCase.tsx

@@ -0,0 +1,183 @@
+import { useState } from 'react'
+import { Button, Paragraph, Sheet, YStack } from '@hanzo/gui'
+
+/**
+ * Test case for Sheet drag/swipe interactions
+ * Tests dragging between snap points and dismissing via drag
+ */
+export function SheetDragCase() {
+  return (
+    <YStack padding="$4" gap="$4">
+      <DraggableSheetPercent />
+      <DraggableSheetConstant />
+      <DismissOnDragSheet />
+    </YStack>
+  )
+}
+
+/**
+ * Sheet with percent snap points - draggable between 80% and 40%
+ */
+function DraggableSheetPercent() {
+  const [open, setOpen] = useState(false)
+  const [position, setPosition] = useState(0)
+
+  return (
+    <>
+      <Button data-testid="drag-percent-trigger" onPress={() => setOpen(true)}>
+        Open Draggable Sheet (percent: 80%, 40%)
+      </Button>
+      <Paragraph data-testid="drag-percent-position">Position: {position}</Paragraph>
+      <Sheet
+        modal
+        open={open}
+        onOpenChange={setOpen}
+        snapPoints={[80, 40]}
+        snapPointsMode="percent"
+        position={position}
+        onPositionChange={setPosition}
+        dismissOnSnapToBottom
+        zIndex={100000}
+        transition="medium"
+      >
+        <Sheet.Overlay
+          data-testid="drag-percent-overlay"
+          transition="lazy"
+          bg="$color"
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+        <Sheet.Handle data-testid="drag-percent-handle" />
+        <Sheet.Frame data-testid="drag-percent-frame" padding="$4" gap="$4">
+          <Paragraph data-testid="drag-percent-snap-indicator">
+            Current snap point index: {position}
+          </Paragraph>
+          <Paragraph>
+            Drag the handle to move between snap points (80% and 40% of viewport)
+          </Paragraph>
+          <Paragraph>Drag past 40% to dismiss the sheet</Paragraph>
+          <YStack flex={1} justifyContent="center" alignItems="center">
+            <Paragraph opacity={0.5}>Sheet content area</Paragraph>
+          </YStack>
+          <Button data-testid="drag-percent-close" onPress={() => setOpen(false)}>
+            Close
+          </Button>
+        </Sheet.Frame>
+      </Sheet>
+    </>
+  )
+}
+
+/**
+ * Sheet with constant pixel snap points - 500px and 250px
+ */
+function DraggableSheetConstant() {
+  const [open, setOpen] = useState(false)
+  const [position, setPosition] = useState(0)
+
+  return (
+    <>
+      <Button data-testid="drag-constant-trigger" onPress={() => setOpen(true)}>
+        Open Draggable Sheet (constant: 500px, 250px)
+      </Button>
+      <Paragraph data-testid="drag-constant-position">Position: {position}</Paragraph>
+      <Sheet
+        modal
+        open={open}
+        onOpenChange={setOpen}
+        snapPoints={[500, 250]}
+        snapPointsMode="constant"
+        position={position}
+        onPositionChange={setPosition}
+        dismissOnSnapToBottom
+        zIndex={100000}
+        transition="medium"
+      >
+        <Sheet.Overlay
+          data-testid="drag-constant-overlay"
+          transition="lazy"
+          bg="$color"
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+        <Sheet.Handle data-testid="drag-constant-handle" />
+        <Sheet.Frame data-testid="drag-constant-frame" padding="$4" gap="$4">
+          <Paragraph data-testid="drag-constant-snap-indicator">
+            Current snap point index: {position}
+          </Paragraph>
+          <Paragraph>
+            Drag the handle to move between snap points (500px and 250px)
+          </Paragraph>
+          <YStack flex={1} justifyContent="center" alignItems="center">
+            <Paragraph opacity={0.5}>Sheet content area</Paragraph>
+          </YStack>
+          <Button data-testid="drag-constant-close" onPress={() => setOpen(false)}>
+            Close
+          </Button>
+        </Sheet.Frame>
+      </Sheet>
+    </>
+  )
+}
+
+/**
+ * Sheet that can be dismissed by dragging down
+ * Uses dismissOnSnapToBottom with a single snap point
+ */
+function DismissOnDragSheet() {
+  const [open, setOpen] = useState(false)
+  const [dismissCount, setDismissCount] = useState(0)
+
+  return (
+    <>
+      <Button data-testid="dismiss-drag-trigger" onPress={() => setOpen(true)}>
+        Open Dismissable Sheet (drag to dismiss)
+      </Button>
+      <Paragraph data-testid="dismiss-drag-count">
+        Dismiss count: {dismissCount}
+      </Paragraph>
+      <Sheet
+        modal
+        open={open}
+        onOpenChange={(isOpen: boolean) => {
+          setOpen(isOpen)
+          if (!isOpen) {
+            setDismissCount((c) => c + 1)
+          }
+        }}
+        snapPoints={[50]}
+        snapPointsMode="percent"
+        dismissOnSnapToBottom
+        zIndex={100000}
+        transition="medium"
+      >
+        <Sheet.Overlay
+          data-testid="dismiss-drag-overlay"
+          transition="lazy"
+          bg="$color"
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+        <Sheet.Handle data-testid="dismiss-drag-handle" />
+        <Sheet.Frame
+          data-testid="dismiss-drag-frame"
+          padding="$4"
+          justifyContent="center"
+          alignItems="center"
+          gap="$4"
+        >
+          <Paragraph>Drag down on the handle to dismiss this sheet</Paragraph>
+          <Paragraph opacity={0.5}>
+            The sheet will close when dragged past the bottom threshold
+          </Paragraph>
+          <Button data-testid="dismiss-drag-close" onPress={() => setOpen(false)}>
+            Close via button
+          </Button>
+        </Sheet.Frame>
+      </Sheet>
+    </>
+  )
+}