@srcroot/ui 0.0.55 → 0.0.58

package/src/registry/ui/scroll-animation.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import { ReactNode, useRef } from "react"
+import gsap from "gsap"
+import { useGSAP } from "@gsap/react"
+import { ScrollTrigger } from "gsap/ScrollTrigger"
+
+gsap.registerPlugin(ScrollTrigger)
+
+interface ScrollAnimationProps {
+    children: ReactNode
+    className?: string
+    delay?: number
+}
+
+export function ScrollAnimation({ children, className = "", delay = 0 }: ScrollAnimationProps) {
+    const el = useRef<HTMLDivElement>(null)
+
+    useGSAP(() => {
+        gsap.fromTo(el.current, 
+            { 
+                opacity: 0, 
+                y: 50 
+            },
+            {
+                opacity: 1,
+                y: 0,
+                duration: 0.8,
+                delay: delay,
+                ease: "circ.out",
+                scrollTrigger: {
+                    trigger: el.current,
+                    start: "top 85%", // Trigger when top of element hits 85% of viewport height
+                    toggleActions: "play none none reverse"
+                }
+            }
+        )
+    }, { scope: el })
+
+    return (
+        <div ref={el} className={className}>
+            {children}
+        </div>
+    )
+}

package/src/registry/ui/scroll-area.tsx

@@ -1,122 +1,121 @@
-"use client"
-
-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 }
-
+"use client"
+
+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/src/registry/ui/search.tsx

@@ -1,150 +1,162 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-interface SearchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
-    /** Callback when search value changes */
-    onSearch?: (value: string) => void
-    /** Debounce delay in ms */
-    debounceMs?: number
-    /** Show clear button */
-    showClear?: boolean
-    /** Loading state */
-    loading?: boolean
-}
-
-/**
- * Search input with optional debounce and clear button
- * 
- * @example
- * <Search 
- *   placeholder="Search..." 
- *   onSearch={(value) => fetchResults(value)}
- *   debounceMs={300}
- * />
- */
-const Search = React.forwardRef<HTMLInputElement, SearchProps>(
-    (
-        {
-            className,
-            onSearch,
-            debounceMs = 0,
-            showClear = true,
-            loading,
-            defaultValue = "",
-            ...props
-        },
-        ref
-    ) => {
-        const [value, setValue] = React.useState(String(defaultValue))
-        const debounceRef = React.useRef<NodeJS.Timeout | null>(null)
-
-        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-            const newValue = e.target.value
-            setValue(newValue)
-
-            if (debounceMs > 0) {
-                if (debounceRef.current) clearTimeout(debounceRef.current)
-                debounceRef.current = setTimeout(() => {
-                    onSearch?.(newValue)
-                }, debounceMs)
-            } else {
-                onSearch?.(newValue)
-            }
-        }
-
-        const handleClear = () => {
-            setValue("")
-            onSearch?.("")
-        }
-
-        const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-            if (e.key === "Escape") {
-                handleClear()
-            }
-        }
-
-        React.useEffect(() => {
-            return () => {
-                if (debounceRef.current) clearTimeout(debounceRef.current)
-            }
-        }, [])
-
-        return (
-            <div className={cn("relative", className)}>
-                {/* Search Icon */}
-                <svg
-                    className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    strokeWidth={2}
-                >
-                    <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                    />
-                </svg>
-
-                <input
-                    ref={ref}
-                    type="search"
-                    role="searchbox"
-                    value={value}
-                    onChange={handleChange}
-                    onKeyDown={handleKeyDown}
-                    className={cn(
-                        "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",
-                        "[&::-webkit-search-cancel-button]:appearance-none"
-                    )}
-                    {...props}
-                />
-
-                {/* Loading or Clear */}
-                <div className="absolute right-3 top-1/2 -translate-y-1/2">
-                    {loading ? (
-                        <svg
-                            className="h-4 w-4 animate-spin text-muted-foreground"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                        >
-                            <circle
-                                className="opacity-25"
-                                cx="12"
-                                cy="12"
-                                r="10"
-                                stroke="currentColor"
-                                strokeWidth="4"
-                            />
-                            <path
-                                className="opacity-75"
-                                fill="currentColor"
-                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-                            />
-                        </svg>
-                    ) : showClear && value ? (
-                        <button
-                            type="button"
-                            onClick={handleClear}
-                            className="text-muted-foreground hover:text-foreground"
-                            aria-label="Clear search"
-                        >
-                            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-                            </svg>
-                        </button>
-                    ) : null}
-                </div>
-            </div>
-        )
-    }
-)
-Search.displayName = "Search"
-
-export { Search }
-
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+interface SearchProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "onChange"
+> {
+  /** Callback when search value changes */
+  onSearch?: (value: string) => void;
+  /** Debounce delay in ms */
+  debounceMs?: number;
+  /** Show clear button */
+  showClear?: boolean;
+  /** Loading state */
+  loading?: boolean;
+}
+
+/**
+ * Search input with optional debounce and clear button
+ *
+ * @example
+ * <Search
+ *   placeholder="Search..."
+ *   onSearch={(value) => fetchResults(value)}
+ *   debounceMs={300}
+ * />
+ */
+const Search = React.forwardRef<HTMLInputElement, SearchProps>(
+  (
+    {
+      className,
+      onSearch,
+      debounceMs = 0,
+      showClear = true,
+      loading,
+      defaultValue = "",
+      ...props
+    },
+    ref,
+  ) => {
+    const [value, setValue] = React.useState(String(defaultValue));
+    const debounceRef = React.useRef<NodeJS.Timeout | null>(null);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value;
+      setValue(newValue);
+
+      if (debounceMs > 0) {
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(() => {
+          onSearch?.(newValue);
+        }, debounceMs);
+      } else {
+        onSearch?.(newValue);
+      }
+    };
+
+    const handleClear = () => {
+      setValue("");
+      onSearch?.("");
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Escape") {
+        handleClear();
+      }
+    };
+
+    React.useEffect(() => {
+      return () => {
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+      };
+    }, []);
+
+    return (
+      <div className={cn("relative", className)}>
+        {/* Search Icon */}
+        <svg
+          className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          />
+        </svg>
+
+        <input
+          ref={ref}
+          type="search"
+          role="searchbox"
+          value={value}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          className={cn(
+            "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",
+            "[&::-webkit-search-cancel-button]:appearance-none",
+          )}
+          {...props}
+        />
+
+        {/* Loading or Clear */}
+        <div className="absolute right-3 top-1/2 -translate-y-1/2">
+          {loading ? (
+            <svg
+              className="h-4 w-4 animate-spin text-muted-foreground"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+              />
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+              />
+            </svg>
+          ) : showClear && value ? (
+            <button
+              type="button"
+              onClick={handleClear}
+              className="text-muted-foreground hover:text-foreground"
+              aria-label="Clear search"
+            >
+              <svg
+                className="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          ) : null}
+        </div>
+      </div>
+    );
+  },
+);
+Search.displayName = "Search";
+
+export { Search };