@srcroot/ui 0.0.1 → 0.0.3

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 | null>
+}
+
+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 = ({

package/registry/resizable.tsx

@@ -0,0 +1,251 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+// Resizable Context
+interface ResizablePanelGroupContextValue {
+    direction: "horizontal" | "vertical"
+    sizes: number[]
+    setSizes: React.Dispatch<React.SetStateAction<number[]>>
+    registerPanel: () => number
+    getPanelCount: () => number
+}
+
+const ResizablePanelGroupContext = React.createContext<ResizablePanelGroupContextValue | null>(null)
+
+function useResizablePanelGroup() {
+    const context = React.useContext(ResizablePanelGroupContext)
+    if (!context) {
+        throw new Error("useResizablePanelGroup must be used within a ResizablePanelGroup")
+    }
+    return context
+}
+
+// ResizablePanelGroup
+interface ResizablePanelGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    direction?: "horizontal" | "vertical"
+    onLayout?: (sizes: number[]) => void
+}
+
+const ResizablePanelGroup = React.forwardRef<HTMLDivElement, ResizablePanelGroupProps>(
+    ({ className, direction = "horizontal", children, onLayout, ...props }, ref) => {
+        const [sizes, setSizes] = React.useState<number[]>([])
+        const panelCountRef = React.useRef(0)
+
+        // Reset panel count on each render to handle re-renders properly
+        React.useLayoutEffect(() => {
+            panelCountRef.current = 0
+        })
+
+        const registerPanel = React.useCallback(() => {
+            const index = panelCountRef.current
+            panelCountRef.current += 1
+            return index
+        }, [])
+
+        const getPanelCount = React.useCallback(() => {
+            return panelCountRef.current
+        }, [])
+
+        // Notify layout changes
+        React.useEffect(() => {
+            if (sizes.length > 0) {
+                onLayout?.(sizes)
+            }
+        }, [sizes, onLayout])
+
+        return (
+            <ResizablePanelGroupContext.Provider value={{ direction, sizes, setSizes, registerPanel, getPanelCount }}>
+                <div
+                    ref={ref}
+                    data-panel-group
+                    data-direction={direction}
+                    className={cn(
+                        "flex h-full w-full",
+                        direction === "horizontal" ? "flex-row" : "flex-col",
+                        className
+                    )}
+                    {...props}
+                >
+                    {children}
+                </div>
+            </ResizablePanelGroupContext.Provider>
+        )
+    }
+)
+ResizablePanelGroup.displayName = "ResizablePanelGroup"
+
+// ResizablePanel
+interface ResizablePanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    defaultSize?: number
+    minSize?: number
+    maxSize?: number
+}
+
+const ResizablePanel = React.forwardRef<HTMLDivElement, ResizablePanelProps>(
+    ({ className, defaultSize = 50, minSize = 10, maxSize = 90, children, style, ...props }, ref) => {
+        const { direction, sizes, setSizes, registerPanel } = useResizablePanelGroup()
+        const [index] = React.useState(() => registerPanel())
+
+        // Initialize size
+        React.useLayoutEffect(() => {
+            setSizes(prev => {
+                const newSizes = [...prev]
+                if (newSizes[index] === undefined) {
+                    newSizes[index] = defaultSize
+                }
+                return newSizes
+            })
+        }, [index, defaultSize, setSizes])
+
+        const size = sizes[index] ?? defaultSize
+
+        return (
+            <div
+                ref={ref}
+                data-panel
+                data-panel-index={index}
+                className={cn("overflow-hidden", className)}
+                style={{
+                    ...style,
+                    flex: `0 0 ${size}%`,
+                }}
+                {...props}
+            >
+                {children}
+            </div>
+        )
+    }
+)
+ResizablePanel.displayName = "ResizablePanel"
+
+// ResizableHandle
+interface ResizableHandleProps extends React.HTMLAttributes<HTMLDivElement> {
+    withHandle?: boolean
+}
+
+const ResizableHandle = React.forwardRef<HTMLDivElement, ResizableHandleProps>(
+    ({ className, withHandle = false, ...props }, ref) => {
+        const { direction, setSizes } = useResizablePanelGroup()
+        const [isDragging, setIsDragging] = React.useState(false)
+        const handleRef = React.useRef<HTMLDivElement>(null)
+
+        const handleMouseDown = (e: React.MouseEvent) => {
+            e.preventDefault()
+            setIsDragging(true)
+
+            const startPos = direction === "horizontal" ? e.clientX : e.clientY
+            const handle = handleRef.current
+            if (!handle) return
+
+            // Find adjacent panels
+            const prevPanel = handle.previousElementSibling as HTMLElement
+            const nextPanel = handle.nextElementSibling as HTMLElement
+            if (!prevPanel || !nextPanel) return
+
+            const prevIndex = parseInt(prevPanel.dataset.panelIndex || "0")
+            const nextIndex = parseInt(nextPanel.dataset.panelIndex || "1")
+
+            // Get current sizes
+            const prevRect = prevPanel.getBoundingClientRect()
+            const nextRect = nextPanel.getBoundingClientRect()
+            const totalSize = direction === "horizontal"
+                ? prevRect.width + nextRect.width
+                : prevRect.height + nextRect.height
+
+            const handleMouseMove = (moveEvent: MouseEvent) => {
+                const currentPos = direction === "horizontal" ? moveEvent.clientX : moveEvent.clientY
+                const delta = currentPos - startPos
+                const deltaPercent = (delta / totalSize) * 100
+
+                setSizes(prev => {
+                    const newSizes = [...prev]
+                    const prevSize = prev[prevIndex] ?? 50
+                    const nextSize = prev[nextIndex] ?? 50
+
+                    // Calculate new sizes with constraints
+                    let newPrevSize = prevSize + deltaPercent
+                    let newNextSize = nextSize - deltaPercent
+
+                    // Apply min/max constraints
+                    if (newPrevSize < 10) {
+                        newPrevSize = 10
+                        newNextSize = prevSize + nextSize - 10
+                    }
+                    if (newNextSize < 10) {
+                        newNextSize = 10
+                        newPrevSize = prevSize + nextSize - 10
+                    }
+                    if (newPrevSize > 90) {
+                        newPrevSize = 90
+                        newNextSize = prevSize + nextSize - 90
+                    }
+                    if (newNextSize > 90) {
+                        newNextSize = 90
+                        newPrevSize = prevSize + nextSize - 90
+                    }
+
+                    newSizes[prevIndex] = newPrevSize
+                    newSizes[nextIndex] = newNextSize
+                    return newSizes
+                })
+            }
+
+            const handleMouseUp = () => {
+                setIsDragging(false)
+                document.removeEventListener("mousemove", handleMouseMove)
+                document.removeEventListener("mouseup", handleMouseUp)
+            }
+
+            document.addEventListener("mousemove", handleMouseMove)
+            document.addEventListener("mouseup", handleMouseUp)
+        }
+
+        return (
+            <div
+                ref={handleRef}
+                data-panel-resize-handle
+                className={cn(
+                    "relative flex items-center justify-center bg-border",
+                    direction === "horizontal"
+                        ? "w-px cursor-col-resize hover:w-1 hover:bg-primary/50"
+                        : "h-px cursor-row-resize hover:h-1 hover:bg-primary/50",
+                    isDragging && (direction === "horizontal" ? "w-1 bg-primary" : "h-1 bg-primary"),
+                    "transition-all",
+                    className
+                )}
+                onMouseDown={handleMouseDown}
+                {...props}
+            >
+                {withHandle && (
+                    <div
+                        className={cn(
+                            "z-10 flex items-center justify-center rounded-sm border bg-border",
+                            direction === "horizontal" ? "h-4 w-3" : "h-3 w-4"
+                        )}
+                    >
+                        <svg
+                            className={cn(
+                                "h-2.5 w-2.5 text-muted-foreground",
+                                direction === "vertical" && "rotate-90"
+                            )}
+                            viewBox="0 0 6 10"
+                            fill="currentColor"
+                        >
+                            <circle cx="1" cy="2" r="1" />
+                            <circle cx="1" cy="5" r="1" />
+                            <circle cx="1" cy="8" r="1" />
+                            <circle cx="5" cy="2" r="1" />
+                            <circle cx="5" cy="5" r="1" />
+                            <circle cx="5" cy="8" r="1" />
+                        </svg>
+                    </div>
+                )}
+            </div>
+        )
+    }
+)
+ResizableHandle.displayName = "ResizableHandle"
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }