@srcroot/ui 0.0.1 → 0.0.3

package/registry/scroll-area.tsx

@@ -0,0 +1,119 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Orientation of scrollbar */
+    orientation?: "vertical" | "horizontal"
+    /** Scrollbar size: "thin" (4px), "default" (8px), "thick" (12px) */
+    scrollbarSize?: "thin" | "default" | "thick"
+    /** Hide scrollbar until hover */
+    hideScrollbar?: boolean
+}
+
+// CSS for custom scrollbar styling
+const scrollbarStyles = {
+    thin: {
+        width: "4px",
+        height: "4px",
+    },
+    default: {
+        width: "8px",
+        height: "8px",
+    },
+    thick: {
+        width: "12px",
+        height: "12px",
+    },
+}
+
+/**
+ * ScrollArea - Custom scrollbar container
+ * 
+ * Provides a styled scrollbar that is thin and consistent across browsers.
+ * Supports customizable scrollbar size and orientation.
+ */
+const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
+    ({ className, children, orientation = "vertical", scrollbarSize = "thin", hideScrollbar = false, style, ...props }, ref) => {
+        const sizes = scrollbarStyles[scrollbarSize]
+
+        const scrollbarCSS: React.CSSProperties = {
+            ...style,
+            // Webkit browsers (Chrome, Safari, Edge)
+            // @ts-ignore - CSS custom properties for scrollbar
+            "--scrollbar-width": sizes.width,
+            "--scrollbar-height": sizes.height,
+        }
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    "relative",
+                    // Container overflow based on orientation
+                    orientation === "vertical" && "overflow-y-auto overflow-x-hidden",
+                    orientation === "horizontal" && "overflow-x-auto overflow-y-hidden",
+                    // Custom scrollbar classes
+                    "scrollbar-custom",
+                    hideScrollbar && "scrollbar-hide hover:scrollbar-show",
+                    className
+                )}
+                style={scrollbarCSS}
+                {...props}
+            >
+                <style>{`
+                    .scrollbar-custom::-webkit-scrollbar {
+                        width: var(--scrollbar-width, 4px);
+                        height: var(--scrollbar-height, 4px);
+                    }
+                    .scrollbar-custom::-webkit-scrollbar-track {
+                        background: transparent;
+                        border-radius: 9999px;
+                    }
+                    .scrollbar-custom::-webkit-scrollbar-thumb {
+                        background: hsl(var(--muted-foreground) / 0.3);
+                        border-radius: 9999px;
+                    }
+                    .scrollbar-custom::-webkit-scrollbar-thumb:hover {
+                        background: hsl(var(--muted-foreground) / 0.5);
+                    }
+                    .scrollbar-custom {
+                        scrollbar-width: thin;
+                        scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
+                    }
+                    .scrollbar-hide::-webkit-scrollbar {
+                        opacity: 0;
+                    }
+                    .scrollbar-hide:hover::-webkit-scrollbar,
+                    .scrollbar-show::-webkit-scrollbar {
+                        opacity: 1;
+                    }
+                `}</style>
+                {children}
+            </div>
+        )
+    }
+)
+ScrollArea.displayName = "ScrollArea"
+
+// ScrollBar component for explicit scrollbar styling reference (optional usage)
+interface ScrollBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: "vertical" | "horizontal"
+}
+
+const ScrollBar = React.forwardRef<HTMLDivElement, ScrollBarProps>(
+    ({ className, orientation = "vertical", ...props }, ref) => (
+        <div
+            ref={ref}
+            className={cn(
+                "flex touch-none select-none transition-colors",
+                orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+                orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+                className
+            )}
+            {...props}
+        />
+    )
+)
+ScrollBar.displayName = "ScrollBar"
+
+export { ScrollArea, ScrollBar }

package/registry/search.tsx

@@ -97,7 +97,8 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
                         "flex h-10 w-full rounded-md border border-input bg-transparent pl-10 pr-10 py-2 text-sm shadow-sm transition-colors",
                         "placeholder:text-muted-foreground",
                         "focus:outline-none focus:ring-1 focus:ring-ring",
-                        "disabled:cursor-not-allowed disabled:opacity-50"
+                        "disabled:cursor-not-allowed disabled:opacity-50",
+                        "[&::-webkit-search-cancel-button]:appearance-none"
                     )}
                     {...props}
                 />

package/registry/sheet.tsx

@@ -1,3 +1,4 @@
+'use client'
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
@@ -17,20 +18,7 @@ interface SheetProps {
 }
 
 /**
- * Sheet (slide-in panel) component
- * 
- * @example
- * <Sheet>
- *   <SheetTrigger asChild>
- *     <Button>Open Sheet</Button>
- *   </SheetTrigger>
- *   <SheetContent side="right">
- *     <SheetHeader>
- *       <SheetTitle>Title</SheetTitle>
- *       <SheetDescription>Description</SheetDescription>
- *     </SheetHeader>
- *   </SheetContent>
- * </Sheet>
+ * Sheet (slide-in panel) component with smooth animations
  */
 function Sheet({ children, open: controlledOpen, onOpenChange, defaultOpen = false }: SheetProps) {
     const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
@@ -76,7 +64,7 @@ const SheetTrigger = React.forwardRef<HTMLButtonElement, SheetTriggerProps>(
 SheetTrigger.displayName = "SheetTrigger"
 
 const sheetVariants = cva(
-    "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out",
+    "fixed z-50 gap-4 bg-background p-6 shadow-lg",
     {
         variants: {
             side: {
@@ -92,6 +80,26 @@ const sheetVariants = cva(
     }
 )
 
+// Animation classes for each side
+const animationClasses = {
+    top: {
+        open: "translate-y-0",
+        closed: "-translate-y-full",
+    },
+    bottom: {
+        open: "translate-y-0",
+        closed: "translate-y-full",
+    },
+    left: {
+        open: "translate-x-0",
+        closed: "-translate-x-full",
+    },
+    right: {
+        open: "translate-x-0",
+        closed: "translate-x-full",
+    },
+}
+
 interface SheetContentProps
     extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof sheetVariants> { }
@@ -101,6 +109,29 @@ const SheetContent = React.forwardRef<HTMLDivElement, SheetContentProps>(
         const context = React.useContext(SheetContext)
         if (!context) throw new Error("SheetContent must be used within Sheet")
 
+        const [isVisible, setIsVisible] = React.useState(false)
+        const [isAnimating, setIsAnimating] = React.useState(false)
+
+        React.useEffect(() => {
+            if (context.open) {
+                // First make visible (off-screen)
+                setIsVisible(true)
+                // Use a small timeout to ensure the browser has painted the initial state
+                const timer = setTimeout(() => {
+                    setIsAnimating(true)
+                }, 10)
+                return () => clearTimeout(timer)
+            } else {
+                // Start close animation
+                setIsAnimating(false)
+                // Wait for animation to complete before hiding
+                const timer = setTimeout(() => {
+                    setIsVisible(false)
+                }, 300)
+                return () => clearTimeout(timer)
+            }
+        }, [context.open])
+
         React.useEffect(() => {
             const handleEscape = (e: KeyboardEvent) => {
                 if (e.key === "Escape") {
@@ -119,19 +150,33 @@ const SheetContent = React.forwardRef<HTMLDivElement, SheetContentProps>(
             }
         }, [context.open, context])
 
-        if (!context.open) return null
+        if (!isVisible) return null
+
+        const sideKey = side || "right"
 
         return (
             <>
+                {/* Overlay with fade animation */}
                 <div
-                    className="fixed inset-0 z-50 bg-black/80"
+                    className={cn(
+                        "fixed inset-0 z-50 bg-black/80 transition-opacity duration-300",
+                        isAnimating ? "opacity-100" : "opacity-0"
+                    )}
                     onClick={() => context.onOpenChange(false)}
                 />
+                {/* Sheet content with slide animation */}
                 <div
                     ref={ref}
                     role="dialog"
                     aria-modal="true"
-                    className={cn(sheetVariants({ side }), className)}
+                    className={cn(
+                        sheetVariants({ side }),
+                        "transition-transform duration-300 ease-out",
+                        isAnimating
+                            ? animationClasses[sideKey].open
+                            : animationClasses[sideKey].closed,
+                        className
+                    )}
                     {...props}
                 >
                     {children}