@srcroot/ui 0.0.1 → 0.0.2

package/registry/hover-card.tsx

@@ -0,0 +1,165 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+// HoverCard Context
+interface HoverCardContextValue {
+    open: boolean
+    triggerRef: React.RefObject<HTMLDivElement>
+}
+
+const HoverCardContext = React.createContext<HoverCardContextValue | null>(null)
+
+function useHoverCard() {
+    const context = React.useContext(HoverCardContext)
+    if (!context) {
+        throw new Error("useHoverCard must be used within a HoverCard")
+    }
+    return context
+}
+
+// HoverCard Root
+interface HoverCardProps {
+    children: React.ReactNode
+    openDelay?: number
+    closeDelay?: number
+}
+
+const HoverCard = ({ children, openDelay = 200, closeDelay = 300 }: HoverCardProps) => {
+    const [open, setOpen] = React.useState(false)
+    const triggerRef = React.useRef<HTMLDivElement>(null)
+    const openTimeoutRef = React.useRef<NodeJS.Timeout | null>(null)
+    const closeTimeoutRef = React.useRef<NodeJS.Timeout | null>(null)
+
+    const handleMouseEnter = React.useCallback(() => {
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current)
+            closeTimeoutRef.current = null
+        }
+        openTimeoutRef.current = setTimeout(() => {
+            setOpen(true)
+        }, openDelay)
+    }, [openDelay])
+
+    const handleMouseLeave = React.useCallback(() => {
+        if (openTimeoutRef.current) {
+            clearTimeout(openTimeoutRef.current)
+            openTimeoutRef.current = null
+        }
+        closeTimeoutRef.current = setTimeout(() => {
+            setOpen(false)
+        }, closeDelay)
+    }, [closeDelay])
+
+    React.useEffect(() => {
+        return () => {
+            if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current)
+            if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current)
+        }
+    }, [])
+
+    return (
+        <HoverCardContext.Provider value={{ open, triggerRef }}>
+            <div
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+                className="inline-block"
+            >
+                {children}
+            </div>
+        </HoverCardContext.Provider>
+    )
+}
+
+// HoverCard Trigger
+interface HoverCardTriggerProps extends React.HTMLAttributes<HTMLDivElement> {
+    asChild?: boolean
+}
+
+const HoverCardTrigger = React.forwardRef<HTMLDivElement, HoverCardTriggerProps>(
+    ({ children, asChild, className, ...props }, ref) => {
+        const { triggerRef } = useHoverCard()
+
+        return (
+            <div
+                ref={triggerRef}
+                className={cn("inline-block cursor-pointer", className)}
+                {...props}
+            >
+                {children}
+            </div>
+        )
+    }
+)
+HoverCardTrigger.displayName = "HoverCardTrigger"
+
+// HoverCard Content
+interface HoverCardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    align?: "start" | "center" | "end"
+    side?: "top" | "bottom"
+    sideOffset?: number
+}
+
+const HoverCardContent = React.forwardRef<HTMLDivElement, HoverCardContentProps>(
+    ({ children, className, align = "center", side = "bottom", sideOffset = 8, ...props }, ref) => {
+        const { open, triggerRef } = useHoverCard()
+        const [position, setPosition] = React.useState({ top: 0, left: 0 })
+        const contentRef = React.useRef<HTMLDivElement>(null)
+
+        React.useEffect(() => {
+            if (!open || !triggerRef.current || !contentRef.current) return
+
+            const triggerRect = triggerRef.current.getBoundingClientRect()
+            const contentRect = contentRef.current.getBoundingClientRect()
+
+            let top = 0
+            let left = 0
+
+            // Calculate vertical position
+            if (side === "bottom") {
+                top = triggerRect.bottom + sideOffset
+            } else {
+                top = triggerRect.top - contentRect.height - sideOffset
+            }
+
+            // Calculate horizontal position
+            if (align === "start") {
+                left = triggerRect.left
+            } else if (align === "end") {
+                left = triggerRect.right - contentRect.width
+            } else {
+                left = triggerRect.left + (triggerRect.width - contentRect.width) / 2
+            }
+
+            // Clamp to viewport
+            left = Math.max(8, Math.min(left, window.innerWidth - contentRect.width - 8))
+            top = Math.max(8, Math.min(top, window.innerHeight - contentRect.height - 8))
+
+            setPosition({ top, left })
+        }, [open, triggerRef, align, side, sideOffset])
+
+        if (!open) return null
+
+        return (
+            <div
+                ref={contentRef}
+                className={cn(
+                    "fixed z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+                    "animate-in fade-in-0 zoom-in-95",
+                    className
+                )}
+                style={{
+                    top: position.top,
+                    left: position.left,
+                }}
+                {...props}
+            >
+                {children}
+            </div>
+        )
+    }
+)
+HoverCardContent.displayName = "HoverCardContent"
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

package/registry/kbd.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface KbdProps extends React.HTMLAttributes<HTMLElement> {
+    /** Array of keys to display (e.g., ["Ctrl", "K"]) */
+    keys?: string[]
+}
+
+/**
+ * Kbd - Keyboard key display component
+ * 
+ * Usage:
+ * <Kbd>⌘</Kbd>
+ * <Kbd keys={["Ctrl", "Shift", "P"]} />
+ */
+const Kbd = React.forwardRef<HTMLElement, KbdProps>(
+    ({ className, children, keys, ...props }, ref) => {
+        // If keys array is provided, render each key
+        if (keys && keys.length > 0) {
+            return (
+                <span className="inline-flex items-center gap-1">
+                    {keys.map((key, index) => (
+                        <React.Fragment key={index}>
+                            <kbd
+                                ref={index === 0 ? ref : undefined}
+                                className={cn(
+                                    "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
+                                    className
+                                )}
+                                {...props}
+                            >
+                                {key}
+                            </kbd>
+                            {index < keys.length - 1 && (
+                                <span className="text-muted-foreground text-xs">+</span>
+                            )}
+                        </React.Fragment>
+                    ))}
+                </span>
+            )
+        }
+
+        // Single key rendering
+        return (
+            <kbd
+                ref={ref}
+                className={cn(
+                    "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </kbd>
+        )
+    }
+)
+Kbd.displayName = "Kbd"
+
+export { Kbd }

package/registry/menubar.tsx

@@ -0,0 +1,246 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+// Menubar Context
+interface MenubarContextValue {
+    activeMenu: string | null
+    setActiveMenu: (menu: string | null) => void
+}
+
+const MenubarContext = React.createContext<MenubarContextValue | null>(null)
+
+function useMenubar() {
+    const context = React.useContext(MenubarContext)
+    if (!context) {
+        throw new Error("useMenubar must be used within a Menubar")
+    }
+    return context
+}
+
+// MenubarMenu Context
+interface MenubarMenuContextValue {
+    menuId: string
+    triggerRef: React.RefObject<HTMLButtonElement>
+}
+
+const MenubarMenuContext = React.createContext<MenubarMenuContextValue | null>(null)
+
+function useMenubarMenu() {
+    const context = React.useContext(MenubarMenuContext)
+    if (!context) {
+        throw new Error("useMenubarMenu must be used within a MenubarMenu")
+    }
+    return context
+}
+
+// Menubar Root
+const Menubar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, children, ...props }, ref) => {
+        const [activeMenu, setActiveMenu] = React.useState<string | null>(null)
+
+        // Close on outside click
+        React.useEffect(() => {
+            if (!activeMenu) return
+            const handleClick = (e: MouseEvent) => {
+                const target = e.target as Element
+                if (!target.closest('[data-menubar]')) {
+                    setActiveMenu(null)
+                }
+            }
+            document.addEventListener("click", handleClick)
+            return () => document.removeEventListener("click", handleClick)
+        }, [activeMenu])
+
+        return (
+            <MenubarContext.Provider value={{ activeMenu, setActiveMenu }}>
+                <div
+                    ref={ref}
+                    data-menubar
+                    className={cn(
+                        "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
+                        className
+                    )}
+                    {...props}
+                >
+                    {children}
+                </div>
+            </MenubarContext.Provider>
+        )
+    }
+)
+Menubar.displayName = "Menubar"
+
+// MenubarMenu
+interface MenubarMenuProps {
+    children: React.ReactNode
+}
+
+const MenubarMenu = ({ children }: MenubarMenuProps) => {
+    const menuId = React.useId()
+    const triggerRef = React.useRef<HTMLButtonElement>(null)
+
+    return (
+        <MenubarMenuContext.Provider value={{ menuId, triggerRef }}>
+            <div className="relative">
+                {children}
+            </div>
+        </MenubarMenuContext.Provider>
+    )
+}
+MenubarMenu.displayName = "MenubarMenu"
+
+// MenubarTrigger
+const MenubarTrigger = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+    ({ className, children, ...props }, ref) => {
+        const { activeMenu, setActiveMenu } = useMenubar()
+        const { menuId, triggerRef } = useMenubarMenu()
+        const isOpen = activeMenu === menuId
+
+        const handleClick = () => {
+            setActiveMenu(isOpen ? null : menuId)
+        }
+
+        const handleMouseEnter = () => {
+            if (activeMenu && activeMenu !== menuId) {
+                setActiveMenu(menuId)
+            }
+        }
+
+        return (
+            <button
+                ref={triggerRef}
+                className={cn(
+                    "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none",
+                    "focus:bg-accent focus:text-accent-foreground",
+                    isOpen && "bg-accent text-accent-foreground",
+                    className
+                )}
+                onClick={handleClick}
+                onMouseEnter={handleMouseEnter}
+                {...props}
+            >
+                {children}
+            </button>
+        )
+    }
+)
+MenubarTrigger.displayName = "MenubarTrigger"
+
+// MenubarContent
+const MenubarContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, children, ...props }, ref) => {
+        const { activeMenu, setActiveMenu } = useMenubar()
+        const { menuId, triggerRef } = useMenubarMenu()
+        const isOpen = activeMenu === menuId
+        const [position, setPosition] = React.useState({ top: 0, left: 0 })
+        const contentRef = React.useRef<HTMLDivElement>(null)
+
+        React.useEffect(() => {
+            if (!isOpen || !triggerRef.current) return
+            const rect = triggerRef.current.getBoundingClientRect()
+            setPosition({
+                top: rect.bottom + 4,
+                left: rect.left,
+            })
+        }, [isOpen, triggerRef])
+
+        // Close on Escape
+        React.useEffect(() => {
+            if (!isOpen) return
+            const handleEscape = (e: KeyboardEvent) => {
+                if (e.key === "Escape") setActiveMenu(null)
+            }
+            document.addEventListener("keydown", handleEscape)
+            return () => document.removeEventListener("keydown", handleEscape)
+        }, [isOpen, setActiveMenu])
+
+        if (!isOpen) return null
+
+        return (
+            <div
+                ref={contentRef}
+                className={cn(
+                    "fixed z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+                    "animate-in fade-in-0 slide-in-from-top-2",
+                    className
+                )}
+                style={{
+                    top: position.top,
+                    left: position.left,
+                }}
+                {...props}
+            >
+                {children}
+            </div>
+        )
+    }
+)
+MenubarContent.displayName = "MenubarContent"
+
+// MenubarItem
+interface MenubarItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    inset?: boolean
+}
+
+const MenubarItem = React.forwardRef<HTMLButtonElement, MenubarItemProps>(
+    ({ className, inset, children, ...props }, ref) => {
+        const { setActiveMenu } = useMenubar()
+
+        return (
+            <button
+                ref={ref}
+                className={cn(
+                    "relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+                    "focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground",
+                    "disabled:pointer-events-none disabled:opacity-50",
+                    inset && "pl-8",
+                    className
+                )}
+                onClick={() => setActiveMenu(null)}
+                {...props}
+            >
+                {children}
+            </button>
+        )
+    }
+)
+MenubarItem.displayName = "MenubarItem"
+
+// MenubarSeparator
+const MenubarSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => (
+        <div ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+    )
+)
+MenubarSeparator.displayName = "MenubarSeparator"
+
+// MenubarLabel
+const MenubarLabel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & { inset?: boolean }>(
+    ({ className, inset, ...props }, ref) => (
+        <div
+            ref={ref}
+            className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+            {...props}
+        />
+    )
+)
+MenubarLabel.displayName = "MenubarLabel"
+
+// MenubarShortcut
+const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (
+    <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />
+)
+MenubarShortcut.displayName = "MenubarShortcut"
+
+export {
+    Menubar,
+    MenubarMenu,
+    MenubarTrigger,
+    MenubarContent,
+    MenubarItem,
+    MenubarSeparator,
+    MenubarLabel,
+    MenubarShortcut,
+}

package/registry/native-select.tsx

@@ -0,0 +1,49 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> { }
+
+/**
+ * NativeSelect - Styled browser-native select element
+ * 
+ * Uses the browser's native <select> for accessibility and mobile UX,
+ * with custom styling to match the design system.
+ */
+const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
+    ({ className, children, ...props }, ref) => {
+        return (
+            <div className="relative">
+                <select
+                    ref={ref}
+                    className={cn(
+                        "flex h-10 w-full appearance-none rounded-md border border-input bg-background px-3 py-2 pr-8 text-sm ring-offset-background",
+                        "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                        "disabled:cursor-not-allowed disabled:opacity-50",
+                        className
+                    )}
+                    {...props}
+                >
+                    {children}
+                </select>
+                {/* Custom chevron icon */}
+                <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                    <svg
+                        className="h-4 w-4 opacity-50"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    >
+                        <path d="m6 9 6 6 6-6" />
+                    </svg>
+                </div>
+            </div>
+        )
+    }
+)
+NativeSelect.displayName = "NativeSelect"
+
+export { NativeSelect }

package/registry/pagination.tsx

@@ -58,6 +58,9 @@ PaginationItem.displayName = "PaginationItem"
 interface PaginationLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     isActive?: boolean
     size?: "default" | "sm" | "lg" | "icon"
+    children?: React.ReactNode
+    className?: string
+    href?: string
 }
 
 const PaginationLink = ({