@srcroot/ui 0.0.1 → 0.0.3

package/registry/slider.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
-interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+interface SliderProps {
     value?: number[]
     onValueChange?: (value: number[]) => void
     defaultValue?: number[]
@@ -9,14 +9,20 @@ interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChan
     max?: number
     step?: number
     disabled?: boolean
+    minStepsBetweenThumbs?: number
+    className?: string
 }
 
 /**
- * Slider component with keyboard support
+ * Slider component with support for multiple thumbs (range selection)
  * 
  * @example
- * const [value, setValue] = useState([50])
- * <Slider value={value} onValueChange={setValue} max={100} step={1} />
+ * // Single value
+ * <Slider value={[50]} onValueChange={setValue} max={100} step={1} />
+ * 
+ * @example
+ * // Range
+ * <Slider value={[25, 75]} onValueChange={setValue} max={100} step={1} />
  */
 const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
     ({
@@ -28,84 +34,157 @@ const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
         max = 100,
         step = 1,
         disabled,
+        minStepsBetweenThumbs = 0,
         ...props
     }, ref) => {
         const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)
+        const trackRef = React.useRef<HTMLDivElement>(null)
+        const activeThumbIndex = React.useRef<number | null>(null)
 
         const value = controlledValue !== undefined ? controlledValue : uncontrolledValue
-        const setValue = onValueChange || setUncontrolledValue
-        const currentValue = value[0] || 0
+        const setValue = (newValue: number[]) => {
+            if (controlledValue === undefined) {
+                setUncontrolledValue(newValue)
+            }
+            onValueChange?.(newValue)
+        }
+
+        const updateValue = (clientX: number, thumbIndex: number) => {
+            if (!trackRef.current) return
+
+            const rect = trackRef.current.getBoundingClientRect()
+            const percentage = (clientX - rect.left) / rect.width
+            const rawValue = min + percentage * (max - min)
+            const steppedValue = Math.round(rawValue / step) * step
+            const clampedValue = Math.min(Math.max(steppedValue, min), max)
+
+            const newValue = [...value]
+            newValue[thumbIndex] = clampedValue
 
-        const percentage = ((currentValue - min) / (max - min)) * 100
+            // Sort logic to prevent crossover if preferred, or just allow it but sorted
+            newValue.sort((a, b) => a - b)
+
+            setValue(newValue)
+        }
+
+        // Find closest thumb to a point
+        const getClosestThumbIndex = (clientX: number) => {
+            if (!trackRef.current) return 0
+            const rect = trackRef.current.getBoundingClientRect()
+            const percentage = (clientX - rect.left) / rect.width
+            const clickedValue = min + percentage * (max - min)
+
+            let closestIndex = 0
+            let minDiff = Infinity
+
+            value.forEach((val, index) => {
+                const diff = Math.abs(val - clickedValue)
+                if (diff < minDiff) {
+                    minDiff = diff
+                    closestIndex = index
+                }
+            })
+
+            return closestIndex
+        }
 
-        const handleKeyDown = (e: React.KeyboardEvent) => {
+        const handleMouseDown = (e: React.MouseEvent) => {
             if (disabled) return
+            const thumbIndex = getClosestThumbIndex(e.clientX)
+            activeThumbIndex.current = thumbIndex
 
-            let newValue = currentValue
-
-            switch (e.key) {
-                case "ArrowRight":
-                case "ArrowUp":
-                    newValue = Math.min(currentValue + step, max)
-                    break
-                case "ArrowLeft":
-                case "ArrowDown":
-                    newValue = Math.max(currentValue - step, min)
-                    break
-                case "Home":
-                    newValue = min
-                    break
-                case "End":
-                    newValue = max
-                    break
-                default:
-                    return
-            }
+            updateValue(e.clientX, thumbIndex)
 
-            e.preventDefault()
-            setValue([newValue])
+            document.addEventListener('mousemove', handleMouseMove)
+            document.addEventListener('mouseup', handleMouseUp)
+        }
+
+        const handleMouseMove = (e: MouseEvent) => {
+            if (activeThumbIndex.current === null) return
+            updateValue(e.clientX, activeThumbIndex.current)
         }
 
-        const handleTrackClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        const handleMouseUp = () => {
+            activeThumbIndex.current = null
+            document.removeEventListener('mousemove', handleMouseMove)
+            document.removeEventListener('mouseup', handleMouseUp)
+        }
+
+        const handleTouchStart = (e: React.TouchEvent) => {
             if (disabled) return
+            const thumbIndex = getClosestThumbIndex(e.touches[0].clientX)
+            activeThumbIndex.current = thumbIndex
+
+            updateValue(e.touches[0].clientX, thumbIndex)
 
-            const rect = e.currentTarget.getBoundingClientRect()
-            const clickPosition = (e.clientX - rect.left) / rect.width
-            const newValue = min + clickPosition * (max - min)
-            const steppedValue = Math.round(newValue / step) * step
-            setValue([Math.min(Math.max(steppedValue, min), max)])
+            document.addEventListener('touchmove', handleTouchMove)
+            document.addEventListener('touchend', handleTouchEnd)
+        }
+
+        const handleTouchMove = (e: TouchEvent) => {
+            if (activeThumbIndex.current === null) return
+            updateValue(e.touches[0].clientX, activeThumbIndex.current)
+            e.preventDefault()
+        }
+
+        const handleTouchEnd = () => {
+            activeThumbIndex.current = null
+            document.removeEventListener('touchmove', handleTouchMove)
+            document.removeEventListener('touchend', handleTouchEnd)
         }
 
         return (
             <div
                 ref={ref}
-                role="slider"
-                aria-valuenow={currentValue}
-                aria-valuemin={min}
-                aria-valuemax={max}
-                aria-disabled={disabled}
-                tabIndex={disabled ? -1 : 0}
+                role="group"
                 className={cn(
-                    "relative flex w-full touch-none select-none items-center",
+                    "relative flex w-full touch-none select-none items-center py-4 cursor-pointer",
                     disabled && "opacity-50 cursor-not-allowed",
                     className
                 )}
-                onKeyDown={handleKeyDown}
+                onMouseDown={handleMouseDown}
+                onTouchStart={handleTouchStart}
                 {...props}
             >
                 <div
-                    className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20 cursor-pointer"
-                    onClick={handleTrackClick}
+                    ref={trackRef}
+                    className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-secondary"
                 >
-                    <div
-                        className="absolute h-full bg-primary"
-                        style={{ width: `${percentage}%` }}
-                    />
+                    {/* Render active tracks between ranges if multiple, or from 0 if single */}
+                    {value.length > 1 ? (
+                        <div
+                            className="absolute h-full bg-primary transition-all duration-75"
+                            style={{
+                                left: `${((value[0] - min) / (max - min)) * 100}%`,
+                                right: `${100 - ((value[value.length - 1] - min) / (max - min)) * 100}%`,
+                            }}
+                        />
+                    ) : (
+                        <div
+                            className="absolute h-full bg-primary transition-all duration-75"
+                            style={{ width: `${((value[0] - min) / (max - min)) * 100}%` }}
+                        />
+                    )}
                 </div>
-                <div
-                    className="absolute block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
-                    style={{ left: `calc(${percentage}% - 8px)` }}
-                />
+
+                {value.map((val, index) => {
+                    const percentage = ((val - min) / (max - min)) * 100
+                    return (
+                        <div
+                            key={index}
+                            role="slider"
+                            aria-valuemin={min}
+                            aria-valuemax={max}
+                            aria-valuenow={val}
+                            tabIndex={disabled ? -1 : 0}
+                            className={cn(
+                                "absolute block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+                                "hover:bg-accent hover:border-primary"
+                            )}
+                            style={{ left: `calc(${percentage}% - 8px)` }}
+                        />
+                    )
+                })}
             </div>
         )
     }

package/registry/text.tsx

@@ -26,13 +26,14 @@ const textVariants = cva("", {
 
 type TextVariants = VariantProps<typeof textVariants>
 
-interface TextBaseProps extends TextVariants {
+interface TextProps extends TextVariants {
     className?: string
     children?: React.ReactNode
+    as?: "p" | "span" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label"
 }
 
 /**
- * Polymorphic Text component for typography
+ * Text component for typography
  * 
  * @example
  * // As a heading
@@ -44,22 +45,12 @@ interface TextBaseProps extends TextVariants {
  * // Muted text
  * <Text variant="muted">Secondary information</Text>
  */
-const Text = React.forwardRef(
-    <T extends React.ElementType = "p">(
-        {
-            as,
-            className,
-            variant,
-            ...props
-        }: TextBaseProps & { as?: T } & Omit<React.ComponentPropsWithoutRef<T>, keyof TextBaseProps | "as">,
-        ref: React.ForwardedRef<React.ElementRef<T>>
-    ) => {
-        const Comp = as || "p"
-
+const Text = React.forwardRef<HTMLElement, TextProps>(
+    ({ as: Component = "p", className, variant, ...props }, ref) => {
         return (
-            <Comp
+            <Component
                 ref={ref as any}
-                className={cn(textVariants({ variant, className }))}
+                className={cn(textVariants({ variant }), className)}
                 {...props}
             />
         )

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}