@srcroot/ui 0.0.1 → 0.0.2

package/registry/toggle-group.tsx

@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "./toggle"
+import { type VariantProps } from "class-variance-authority"
+
+// ToggleGroup Context
+interface ToggleGroupContextValue {
+    type: "single" | "multiple"
+    value: string[]
+    onValueChange: (value: string) => void
+    variant?: VariantProps<typeof toggleVariants>["variant"]
+    size?: VariantProps<typeof toggleVariants>["size"]
+}
+
+const ToggleGroupContext = React.createContext<ToggleGroupContextValue | null>(null)
+
+function useToggleGroup() {
+    const context = React.useContext(ToggleGroupContext)
+    if (!context) {
+        throw new Error("useToggleGroup must be used within a ToggleGroup")
+    }
+    return context
+}
+
+// ToggleGroup Props
+interface ToggleGroupSingleProps {
+    type: "single"
+    value?: string
+    defaultValue?: string
+    onValueChange?: (value: string) => void
+}
+
+interface ToggleGroupMultipleProps {
+    type: "multiple"
+    value?: string[]
+    defaultValue?: string[]
+    onValueChange?: (value: string[]) => void
+}
+
+type ToggleGroupProps = (ToggleGroupSingleProps | ToggleGroupMultipleProps) &
+    React.HTMLAttributes<HTMLDivElement> &
+    VariantProps<typeof toggleVariants>
+
+const ToggleGroup = React.forwardRef<HTMLDivElement, ToggleGroupProps>(
+    ({ className, type, value: controlledValue, defaultValue, onValueChange, variant, size, children, ...props }, ref) => {
+        // Handle both single and multiple types
+        const [uncontrolledValue, setUncontrolledValue] = React.useState<string[]>(() => {
+            if (type === "single") {
+                return defaultValue ? [defaultValue as string] : []
+            }
+            return (defaultValue as string[]) || []
+        })
+
+        const value = controlledValue !== undefined
+            ? (type === "single" ? [controlledValue as string] : controlledValue as string[])
+            : uncontrolledValue
+
+        const handleValueChange = (itemValue: string) => {
+            let newValue: string[]
+
+            if (type === "single") {
+                // Toggle off if clicking same value, otherwise set new value
+                newValue = value.includes(itemValue) ? [] : [itemValue]
+                if (controlledValue === undefined) {
+                    setUncontrolledValue(newValue)
+                }
+                ; (onValueChange as ((value: string) => void))?.(newValue[0] || "")
+            } else {
+                // Toggle item in array
+                newValue = value.includes(itemValue)
+                    ? value.filter(v => v !== itemValue)
+                    : [...value, itemValue]
+                if (controlledValue === undefined) {
+                    setUncontrolledValue(newValue)
+                }
+                ; (onValueChange as ((value: string[]) => void))?.(newValue)
+            }
+        }
+
+        return (
+            <ToggleGroupContext.Provider value={{ type, value, onValueChange: handleValueChange, variant, size }}>
+                <div
+                    ref={ref}
+                    role="group"
+                    className={cn("flex items-center justify-center gap-1", className)}
+                    {...props}
+                >
+                    {children}
+                </div>
+            </ToggleGroupContext.Provider>
+        )
+    }
+)
+ToggleGroup.displayName = "ToggleGroup"
+
+// ToggleGroupItem
+interface ToggleGroupItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string
+}
+
+const ToggleGroupItem = React.forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
+    ({ className, value, children, ...props }, ref) => {
+        const context = useToggleGroup()
+        const pressed = context.value.includes(value)
+
+        return (
+            <button
+                ref={ref}
+                type="button"
+                aria-pressed={pressed}
+                data-state={pressed ? "on" : "off"}
+                className={cn(
+                    toggleVariants({ variant: context.variant, size: context.size }),
+                    pressed && "bg-accent text-accent-foreground",
+                    className
+                )}
+                onClick={() => context.onValueChange(value)}
+                {...props}
+            >
+                {children}
+            </button>
+        )
+    }
+)
+ToggleGroupItem.displayName = "ToggleGroupItem"
+
+export { ToggleGroup, ToggleGroupItem }

package/registry/toggle.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+    "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+    {
+        variants: {
+            variant: {
+                default: "bg-transparent",
+                outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+            },
+            size: {
+                default: "h-10 px-3",
+                sm: "h-9 px-2.5",
+                lg: "h-11 px-5",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    }
+)
+
+export interface ToggleProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof toggleVariants> {
+    /** Controlled pressed state */
+    pressed?: boolean
+    /** Default pressed state for uncontrolled usage */
+    defaultPressed?: boolean
+    /** Callback when pressed state changes */
+    onPressedChange?: (pressed: boolean) => void
+}
+
+const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
+    ({ className, variant, size, pressed: controlledPressed, defaultPressed = false, onPressedChange, ...props }, ref) => {
+        const [uncontrolledPressed, setUncontrolledPressed] = React.useState(defaultPressed)
+        const pressed = controlledPressed ?? uncontrolledPressed
+
+        const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+            const newPressed = !pressed
+            if (controlledPressed === undefined) {
+                setUncontrolledPressed(newPressed)
+            }
+            onPressedChange?.(newPressed)
+            props.onClick?.(e)
+        }
+
+        return (
+            <button
+                ref={ref}
+                type="button"
+                aria-pressed={pressed}
+                data-state={pressed ? "on" : "off"}
+                className={cn(
+                    toggleVariants({ variant, size }),
+                    pressed && "bg-accent text-accent-foreground",
+                    className
+                )}
+                onClick={handleClick}
+                {...props}
+            />
+        )
+    }
+)
+Toggle.displayName = "Toggle"
+
+export { Toggle, toggleVariants }

package/registry/tooltip.tsx

@@ -4,6 +4,8 @@ import { cn } from "@/lib/utils"
 interface TooltipContextValue {
     open: boolean
     setOpen: (open: boolean) => void
+    mousePosition: { x: number; y: number }
+    setMousePosition: (pos: { x: number; y: number }) => void
 }
 
 const TooltipContext = React.createContext<TooltipContextValue | null>(null)
@@ -28,7 +30,7 @@ interface TooltipProps {
 }
 
 /**
- * Tooltip component for hover hints
+ * Tooltip component for hover hints - appears at mouse cursor position
  * 
  * @example
  * <TooltipProvider>
@@ -40,12 +42,13 @@ interface TooltipProps {
  */
 function Tooltip({ children, open: controlledOpen, onOpenChange, defaultOpen = false }: TooltipProps) {
     const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
+    const [mousePosition, setMousePosition] = React.useState({ x: 0, y: 0 })
 
     const open = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen
     const setOpen = onOpenChange || setUncontrolledOpen
 
     return (
-        <TooltipContext.Provider value={{ open, setOpen }}>
+        <TooltipContext.Provider value={{ open, setOpen, mousePosition, setMousePosition }}>
             <span className="relative inline-block">
                 {children}
             </span>
@@ -64,6 +67,9 @@ const TooltipTrigger = React.forwardRef<HTMLSpanElement, TooltipTriggerProps>(
 
         const handleMouseEnter = () => context.setOpen(true)
         const handleMouseLeave = () => context.setOpen(false)
+        const handleMouseMove = (e: React.MouseEvent) => {
+            context.setMousePosition({ x: e.clientX, y: e.clientY })
+        }
         const handleFocus = () => context.setOpen(true)
         const handleBlur = () => context.setOpen(false)
 
@@ -71,6 +77,7 @@ const TooltipTrigger = React.forwardRef<HTMLSpanElement, TooltipTriggerProps>(
             return React.cloneElement(children as React.ReactElement<any>, {
                 onMouseEnter: handleMouseEnter,
                 onMouseLeave: handleMouseLeave,
+                onMouseMove: handleMouseMove,
                 onFocus: handleFocus,
                 onBlur: handleBlur,
                 ref,
@@ -82,6 +89,7 @@ const TooltipTrigger = React.forwardRef<HTMLSpanElement, TooltipTriggerProps>(
                 ref={ref}
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
+                onMouseMove={handleMouseMove}
                 onFocus={handleFocus}
                 onBlur={handleBlur}
                 tabIndex={0}
@@ -103,12 +111,22 @@ const TooltipContent = React.forwardRef<
 
     if (!context.open) return null
 
+    // Offset from cursor (slightly above and to the right)
+    const offsetX = 10
+    const offsetY = -10
+
     return (
         <div
             ref={ref}
             role="tooltip"
+            style={{
+                position: 'fixed',
+                left: context.mousePosition.x + offsetX,
+                top: context.mousePosition.y + offsetY,
+                transform: 'translateY(-100%)',
+            }}
             className={cn(
-                "absolute left-1/2 bottom-full z-50 mb-2 -translate-x-1/2 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95",
+                "z-[9999] overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 pointer-events-none whitespace-nowrap",
                 className
             )}
             {...props}