@wakastellar/ui 2.0.0 → 2.1.1

package/src/components/waka-bottom-sheet/index.tsx

@@ -0,0 +1,495 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../utils/cn"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type SnapPoint = number | "content" | "full"
+
+export interface WakaBottomSheetProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onDragStart" | "onDragEnd">,
+    VariantProps<typeof bottomSheetVariants> {
+  /** Whether the sheet is open */
+  open: boolean
+  /** Callback when open state changes */
+  onOpenChange: (open: boolean) => void
+  /** Snap points as percentages (0-100) or special values */
+  snapPoints?: SnapPoint[]
+  /** Default snap point index */
+  defaultSnapPoint?: number
+  /** Current snap point index (controlled) */
+  snapPoint?: number
+  /** Callback when snap point changes */
+  onSnapPointChange?: (index: number) => void
+  /** Whether to show backdrop */
+  showBackdrop?: boolean
+  /** Whether clicking backdrop closes sheet */
+  closeOnBackdropClick?: boolean
+  /** Whether to show drag handle */
+  showHandle?: boolean
+  /** Whether to block scroll when open */
+  blockScroll?: boolean
+  /** Enable haptic feedback */
+  hapticFeedback?: boolean
+  /** Custom header content */
+  header?: React.ReactNode
+  /** Custom footer content */
+  footer?: React.ReactNode
+  /** Main content */
+  children: React.ReactNode
+  /** Callback when drag starts */
+  onDragStart?: () => void
+  /** Callback when drag ends */
+  onDragEnd?: (snapPointIndex: number) => void
+  /** Animation duration in ms */
+  animationDuration?: number
+  /** Enable keyboard escape to close */
+  closeOnEscape?: boolean
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const bottomSheetVariants = cva(
+  "fixed inset-x-0 bottom-0 z-50 flex flex-col bg-background touch-none",
+  {
+    variants: {
+      variant: {
+        default: "rounded-t-2xl shadow-2xl border-t border-border",
+        flat: "shadow-lg",
+        glass: "rounded-t-2xl bg-background/80 backdrop-blur-xl border-t border-white/20",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const backdropVariants = cva(
+  "fixed inset-0 z-40 transition-opacity",
+  {
+    variants: {
+      variant: {
+        default: "bg-black/50",
+        blur: "bg-black/30 backdrop-blur-sm",
+        none: "bg-transparent pointer-events-none",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const handleVariants = cva(
+  "mx-auto mt-3 mb-2 rounded-full bg-muted transition-colors",
+  {
+    variants: {
+      size: {
+        sm: "w-8 h-1",
+        default: "w-12 h-1.5",
+        lg: "w-16 h-2",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+// ============================================================================
+// Utility functions
+// ============================================================================
+
+function triggerHaptic(type: "light" | "medium" | "heavy" = "light") {
+  if (typeof window !== "undefined" && "vibrate" in navigator) {
+    const patterns = { light: 10, medium: 20, heavy: 30 }
+    navigator.vibrate(patterns[type])
+  }
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max)
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export const WakaBottomSheet = React.forwardRef<HTMLDivElement, WakaBottomSheetProps>(
+  (
+    {
+      open,
+      onOpenChange,
+      snapPoints = [25, 50, 90],
+      defaultSnapPoint = 0,
+      snapPoint: controlledSnapPoint,
+      onSnapPointChange,
+      showBackdrop = true,
+      closeOnBackdropClick = true,
+      showHandle = true,
+      blockScroll = true,
+      hapticFeedback = true,
+      header,
+      footer,
+      children,
+      onDragStart,
+      onDragEnd,
+      animationDuration = 300,
+      closeOnEscape = true,
+      variant,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const sheetRef = React.useRef<HTMLDivElement>(null)
+    const contentRef = React.useRef<HTMLDivElement>(null)
+    const [internalSnapPoint, setInternalSnapPoint] = React.useState(defaultSnapPoint)
+    const [isDragging, setIsDragging] = React.useState(false)
+    const [dragStart, setDragStart] = React.useState({ y: 0, height: 0 })
+    const [currentHeight, setCurrentHeight] = React.useState(0)
+    const [windowHeight, setWindowHeight] = React.useState(0)
+    const [isAnimating, setIsAnimating] = React.useState(false)
+
+    // Controlled vs uncontrolled snap point
+    const snapPointIndex = controlledSnapPoint ?? internalSnapPoint
+    const setSnapPointIndex = React.useCallback((index: number) => {
+      setInternalSnapPoint(index)
+      onSnapPointChange?.(index)
+    }, [onSnapPointChange])
+
+    // Combine refs
+    React.useImperativeHandle(ref, () => sheetRef.current!)
+
+    // Calculate snap point heights
+    const getSnapPointHeight = React.useCallback((point: SnapPoint): number => {
+      if (point === "full") return windowHeight
+      if (point === "content") {
+        return contentRef.current?.scrollHeight ?? windowHeight * 0.5
+      }
+      return (point / 100) * windowHeight
+    }, [windowHeight])
+
+    const snapPointHeights = React.useMemo(
+      () => snapPoints.map(getSnapPointHeight),
+      [snapPoints, getSnapPointHeight]
+    )
+
+    // Initialize window height
+    React.useEffect(() => {
+      const updateHeight = () => setWindowHeight(window.innerHeight)
+      updateHeight()
+      window.addEventListener("resize", updateHeight)
+      return () => window.removeEventListener("resize", updateHeight)
+    }, [])
+
+    // Set initial height when opening
+    React.useEffect(() => {
+      if (open && windowHeight > 0) {
+        const targetHeight = snapPointHeights[snapPointIndex] ?? snapPointHeights[0]
+        setCurrentHeight(targetHeight)
+      }
+    }, [open, windowHeight, snapPointHeights, snapPointIndex])
+
+    // Block scroll when open
+    React.useEffect(() => {
+      if (blockScroll && open) {
+        const originalOverflow = document.body.style.overflow
+        document.body.style.overflow = "hidden"
+        return () => {
+          document.body.style.overflow = originalOverflow
+        }
+      }
+    }, [blockScroll, open])
+
+    // Handle escape key
+    React.useEffect(() => {
+      if (!closeOnEscape || !open) return
+
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === "Escape") {
+          onOpenChange(false)
+        }
+      }
+
+      document.addEventListener("keydown", handleKeyDown)
+      return () => document.removeEventListener("keydown", handleKeyDown)
+    }, [closeOnEscape, open, onOpenChange])
+
+    // Find nearest snap point
+    const findNearestSnapPoint = React.useCallback((height: number): number => {
+      let nearestIndex = 0
+      let minDistance = Infinity
+
+      snapPointHeights.forEach((snapHeight, index) => {
+        const distance = Math.abs(height - snapHeight)
+        if (distance < minDistance) {
+          minDistance = distance
+          nearestIndex = index
+        }
+      })
+
+      return nearestIndex
+    }, [snapPointHeights])
+
+    // Drag handlers
+    const handleDragStart = React.useCallback((clientY: number) => {
+      if (isAnimating) return
+
+      setIsDragging(true)
+      setDragStart({ y: clientY, height: currentHeight })
+      onDragStart?.()
+    }, [isAnimating, currentHeight, onDragStart])
+
+    const handleDragMove = React.useCallback((clientY: number) => {
+      if (!isDragging) return
+
+      const diff = dragStart.y - clientY
+      const newHeight = clamp(
+        dragStart.height + diff,
+        0,
+        windowHeight
+      )
+      setCurrentHeight(newHeight)
+    }, [isDragging, dragStart, windowHeight])
+
+    const handleDragEnd = React.useCallback(() => {
+      if (!isDragging) return
+
+      setIsDragging(false)
+
+      // Find nearest snap point or close if dragged below minimum
+      const minHeight = snapPointHeights[0] * 0.5
+
+      if (currentHeight < minHeight) {
+        // Close the sheet
+        setIsAnimating(true)
+        setCurrentHeight(0)
+        setTimeout(() => {
+          onOpenChange(false)
+          setIsAnimating(false)
+        }, animationDuration)
+        onDragEnd?.(-1)
+        return
+      }
+
+      const nearestIndex = findNearestSnapPoint(currentHeight)
+      const targetHeight = snapPointHeights[nearestIndex]
+
+      if (hapticFeedback && nearestIndex !== snapPointIndex) {
+        triggerHaptic("light")
+      }
+
+      setIsAnimating(true)
+      setCurrentHeight(targetHeight)
+      setSnapPointIndex(nearestIndex)
+
+      setTimeout(() => {
+        setIsAnimating(false)
+      }, animationDuration)
+
+      onDragEnd?.(nearestIndex)
+    }, [isDragging, currentHeight, snapPointHeights, findNearestSnapPoint, hapticFeedback, snapPointIndex, animationDuration, onOpenChange, onDragEnd, setSnapPointIndex])
+
+    // Touch event handlers
+    const handleTouchStart = React.useCallback((e: React.TouchEvent) => {
+      handleDragStart(e.touches[0].clientY)
+    }, [handleDragStart])
+
+    const handleTouchMove = React.useCallback((e: React.TouchEvent) => {
+      handleDragMove(e.touches[0].clientY)
+    }, [handleDragMove])
+
+    const handleTouchEnd = React.useCallback(() => {
+      handleDragEnd()
+    }, [handleDragEnd])
+
+    // Mouse event handlers (for desktop testing)
+    const handleMouseDown = React.useCallback((e: React.MouseEvent) => {
+      handleDragStart(e.clientY)
+      e.preventDefault()
+    }, [handleDragStart])
+
+    React.useEffect(() => {
+      if (!isDragging) return
+
+      const handleMouseMove = (e: MouseEvent) => {
+        handleDragMove(e.clientY)
+      }
+
+      const handleMouseUp = () => {
+        handleDragEnd()
+      }
+
+      document.addEventListener("mousemove", handleMouseMove)
+      document.addEventListener("mouseup", handleMouseUp)
+
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove)
+        document.removeEventListener("mouseup", handleMouseUp)
+      }
+    }, [isDragging, handleDragMove, handleDragEnd])
+
+    // Backdrop click handler
+    const handleBackdropClick = React.useCallback(() => {
+      if (closeOnBackdropClick) {
+        onOpenChange(false)
+      }
+    }, [closeOnBackdropClick, onOpenChange])
+
+    // Snap to specific point
+    const snapTo = React.useCallback((index: number) => {
+      if (index < 0 || index >= snapPoints.length) return
+
+      const targetHeight = snapPointHeights[index]
+      setIsAnimating(true)
+      setCurrentHeight(targetHeight)
+      setSnapPointIndex(index)
+
+      if (hapticFeedback) triggerHaptic("light")
+
+      setTimeout(() => {
+        setIsAnimating(false)
+      }, animationDuration)
+    }, [snapPoints.length, snapPointHeights, hapticFeedback, animationDuration, setSnapPointIndex])
+
+    // Backdrop opacity based on sheet height
+    const backdropOpacity = open ? clamp(currentHeight / (windowHeight * 0.5), 0, 1) : 0
+
+    if (!open && currentHeight === 0) return null
+
+    return (
+      <>
+        {/* Backdrop */}
+        {showBackdrop && (
+          <div
+            className={cn(backdropVariants({ variant: "default" }))}
+            style={{
+              opacity: backdropOpacity,
+              transition: isAnimating || !isDragging ? `opacity ${animationDuration}ms ease-out` : "none",
+            }}
+            onClick={handleBackdropClick}
+            aria-hidden="true"
+          />
+        )}
+
+        {/* Sheet */}
+        <div
+          ref={sheetRef}
+          role="dialog"
+          aria-modal="true"
+          className={cn(bottomSheetVariants({ variant }), className)}
+          style={{
+            height: currentHeight,
+            maxHeight: windowHeight,
+            transition: isAnimating || !isDragging ? `height ${animationDuration}ms ease-out` : "none",
+          }}
+          {...props}
+        >
+          {/* Handle */}
+          {showHandle && (
+            <div
+              className="flex-shrink-0 cursor-grab active:cursor-grabbing"
+              onTouchStart={handleTouchStart}
+              onTouchMove={handleTouchMove}
+              onTouchEnd={handleTouchEnd}
+              onTouchCancel={handleTouchEnd}
+              onMouseDown={handleMouseDown}
+            >
+              <div className={cn(handleVariants({ size: "default" }))} />
+            </div>
+          )}
+
+          {/* Header */}
+          {header && (
+            <div className="flex-shrink-0 px-4 pb-2 border-b border-border">
+              {header}
+            </div>
+          )}
+
+          {/* Content */}
+          <div
+            ref={contentRef}
+            className="flex-1 overflow-auto overscroll-contain px-4 py-2"
+          >
+            {children}
+          </div>
+
+          {/* Footer */}
+          {footer && (
+            <div className="flex-shrink-0 px-4 pt-2 pb-4 border-t border-border safe-area-inset-bottom">
+              {footer}
+            </div>
+          )}
+        </div>
+      </>
+    )
+  }
+)
+
+WakaBottomSheet.displayName = "WakaBottomSheet"
+
+// ============================================================================
+// Hook for programmatic control
+// ============================================================================
+
+export interface UseBottomSheetOptions {
+  defaultOpen?: boolean
+  defaultSnapPoint?: number
+  onOpenChange?: (open: boolean) => void
+  onSnapPointChange?: (index: number) => void
+}
+
+export function useBottomSheet(options: UseBottomSheetOptions = {}) {
+  const {
+    defaultOpen = false,
+    defaultSnapPoint = 0,
+    onOpenChange: onOpenChangeProp,
+    onSnapPointChange: onSnapPointChangeProp,
+  } = options
+
+  const [open, setOpen] = React.useState(defaultOpen)
+  const [snapPoint, setSnapPoint] = React.useState(defaultSnapPoint)
+
+  const onOpenChange = React.useCallback((newOpen: boolean) => {
+    setOpen(newOpen)
+    onOpenChangeProp?.(newOpen)
+  }, [onOpenChangeProp])
+
+  const onSnapPointChange = React.useCallback((index: number) => {
+    setSnapPoint(index)
+    onSnapPointChangeProp?.(index)
+  }, [onSnapPointChangeProp])
+
+  const openSheet = React.useCallback((snapPointIndex?: number) => {
+    if (snapPointIndex !== undefined) {
+      setSnapPoint(snapPointIndex)
+    }
+    setOpen(true)
+  }, [])
+
+  const closeSheet = React.useCallback(() => {
+    setOpen(false)
+  }, [])
+
+  const toggleSheet = React.useCallback(() => {
+    setOpen(prev => !prev)
+  }, [])
+
+  return {
+    open,
+    snapPoint,
+    onOpenChange,
+    onSnapPointChange,
+    openSheet,
+    closeSheet,
+    toggleSheet,
+  }
+}