@srcroot/ui 0.0.2 → 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,17 +9,21 @@ 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} />
  */
-export { Slider }
-
 const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
     ({
         className,
@@ -30,19 +34,22 @@ 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 isDragging = React.useRef(false)
+        const activeThumbIndex = React.useRef<number | null>(null)
 
         const value = controlledValue !== undefined ? controlledValue : uncontrolledValue
-        const setValue = onValueChange || setUncontrolledValue
-        const currentValue = value[0] || 0
-
-        const percentage = ((currentValue - min) / (max - min)) * 100
+        const setValue = (newValue: number[]) => {
+            if (controlledValue === undefined) {
+                setUncontrolledValue(newValue)
+            }
+            onValueChange?.(newValue)
+        }
 
-        const updateValue = (clientX: number) => {
+        const updateValue = (clientX: number, thumbIndex: number) => {
             if (!trackRef.current) return
 
             const rect = trackRef.current.getBoundingClientRect()
@@ -51,129 +58,137 @@ const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
             const steppedValue = Math.round(rawValue / step) * step
             const clampedValue = Math.min(Math.max(steppedValue, min), max)
 
-            setValue([clampedValue])
+            const newValue = [...value]
+            newValue[thumbIndex] = clampedValue
+
+            // 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 handleMouseDown = (e: React.MouseEvent) => {
             if (disabled) return
-            isDragging.current = true
-            updateValue(e.clientX)
+            const thumbIndex = getClosestThumbIndex(e.clientX)
+            activeThumbIndex.current = thumbIndex
+
+            updateValue(e.clientX, thumbIndex)
 
             document.addEventListener('mousemove', handleMouseMove)
             document.addEventListener('mouseup', handleMouseUp)
         }
 
         const handleMouseMove = (e: MouseEvent) => {
-            if (!isDragging.current) return
-            updateValue(e.clientX)
+            if (activeThumbIndex.current === null) return
+            updateValue(e.clientX, activeThumbIndex.current)
         }
 
         const handleMouseUp = () => {
-            isDragging.current = false
+            activeThumbIndex.current = null
             document.removeEventListener('mousemove', handleMouseMove)
             document.removeEventListener('mouseup', handleMouseUp)
         }
 
-        // Touch support
         const handleTouchStart = (e: React.TouchEvent) => {
             if (disabled) return
-            isDragging.current = true
-            updateValue(e.touches[0].clientX)
+            const thumbIndex = getClosestThumbIndex(e.touches[0].clientX)
+            activeThumbIndex.current = thumbIndex
+
+            updateValue(e.touches[0].clientX, thumbIndex)
 
             document.addEventListener('touchmove', handleTouchMove)
             document.addEventListener('touchend', handleTouchEnd)
         }
 
         const handleTouchMove = (e: TouchEvent) => {
-            if (!isDragging.current) return
-            updateValue(e.touches[0].clientX)
-            e.preventDefault() // Prevent scrolling while dragging
+            if (activeThumbIndex.current === null) return
+            updateValue(e.touches[0].clientX, activeThumbIndex.current)
+            e.preventDefault()
         }
 
         const handleTouchEnd = () => {
-            isDragging.current = false
+            activeThumbIndex.current = null
             document.removeEventListener('touchmove', handleTouchMove)
             document.removeEventListener('touchend', handleTouchEnd)
         }
 
-
-        const handleKeyDown = (e: React.KeyboardEvent) => {
-            if (disabled) return
-
-            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
-            }
-
-            if (newValue !== currentValue) {
-                e.preventDefault()
-                setValue([newValue])
-            }
-        }
-
-        // Cleanup on unmount
-        React.useEffect(() => {
-            return () => {
-                document.removeEventListener('mousemove', handleMouseMove)
-                document.removeEventListener('mouseup', handleMouseUp)
-                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 py-4 cursor-pointer", // Added vertical padding for easier touch area
+                    "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
                     ref={trackRef}
-                    className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20"
+                    className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-secondary"
                 >
-                    <div
-                        className="absolute h-full bg-primary transition-all duration-75 ease-out" // Added transition but very fast to feel responsive
-                        style={{ width: `${percentage}%` }}
-                    />
-                </div>
-                <div
-                    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" // Visual feedback
+                    {/* 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}%` }}
+                        />
                     )}
-                    style={{ left: `calc(${percentage}% - 8px)` }}
-                />
+                </div>
+
+                {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>
         )
     }
 )
 Slider.displayName = "Slider"
+
+export { Slider }

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}
             />
         )