@srcroot/ui 0.0.2 → 0.0.4

package/registry/sheet.tsx

@@ -18,20 +18,7 @@ interface SheetProps {
 }
 
 /**
- * Sheet (slide-in panel) component
- * 
- * @example
- * <Sheet>
- *   <SheetTrigger asChild>
- *     <Button>Open Sheet</Button>
- *   </SheetTrigger>
- *   <SheetContent side="right">
- *     <SheetHeader>
- *       <SheetTitle>Title</SheetTitle>
- *       <SheetDescription>Description</SheetDescription>
- *     </SheetHeader>
- *   </SheetContent>
- * </Sheet>
+ * Sheet (slide-in panel) component with smooth animations
  */
 function Sheet({ children, open: controlledOpen, onOpenChange, defaultOpen = false }: SheetProps) {
     const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
@@ -77,7 +64,7 @@ const SheetTrigger = React.forwardRef<HTMLButtonElement, SheetTriggerProps>(
 SheetTrigger.displayName = "SheetTrigger"
 
 const sheetVariants = cva(
-    "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out",
+    "fixed z-50 gap-4 bg-background p-6 shadow-lg",
     {
         variants: {
             side: {
@@ -93,6 +80,26 @@ const sheetVariants = cva(
     }
 )
 
+// Animation classes for each side
+const animationClasses = {
+    top: {
+        open: "translate-y-0",
+        closed: "-translate-y-full",
+    },
+    bottom: {
+        open: "translate-y-0",
+        closed: "translate-y-full",
+    },
+    left: {
+        open: "translate-x-0",
+        closed: "-translate-x-full",
+    },
+    right: {
+        open: "translate-x-0",
+        closed: "translate-x-full",
+    },
+}
+
 interface SheetContentProps
     extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof sheetVariants> { }
@@ -102,6 +109,29 @@ const SheetContent = React.forwardRef<HTMLDivElement, SheetContentProps>(
         const context = React.useContext(SheetContext)
         if (!context) throw new Error("SheetContent must be used within Sheet")
 
+        const [isVisible, setIsVisible] = React.useState(false)
+        const [isAnimating, setIsAnimating] = React.useState(false)
+
+        React.useEffect(() => {
+            if (context.open) {
+                // First make visible (off-screen)
+                setIsVisible(true)
+                // Use a small timeout to ensure the browser has painted the initial state
+                const timer = setTimeout(() => {
+                    setIsAnimating(true)
+                }, 10)
+                return () => clearTimeout(timer)
+            } else {
+                // Start close animation
+                setIsAnimating(false)
+                // Wait for animation to complete before hiding
+                const timer = setTimeout(() => {
+                    setIsVisible(false)
+                }, 300)
+                return () => clearTimeout(timer)
+            }
+        }, [context.open])
+
         React.useEffect(() => {
             const handleEscape = (e: KeyboardEvent) => {
                 if (e.key === "Escape") {
@@ -120,19 +150,33 @@ const SheetContent = React.forwardRef<HTMLDivElement, SheetContentProps>(
             }
         }, [context.open, context])
 
-        if (!context.open) return null
+        if (!isVisible) return null
+
+        const sideKey = side || "right"
 
         return (
             <>
+                {/* Overlay with fade animation */}
                 <div
-                    className="fixed inset-0 z-50 bg-black/80"
+                    className={cn(
+                        "fixed inset-0 z-50 bg-black/80 transition-opacity duration-300",
+                        isAnimating ? "opacity-100" : "opacity-0"
+                    )}
                     onClick={() => context.onOpenChange(false)}
                 />
+                {/* Sheet content with slide animation */}
                 <div
                     ref={ref}
                     role="dialog"
                     aria-modal="true"
-                    className={cn(sheetVariants({ side }), className)}
+                    className={cn(
+                        sheetVariants({ side }),
+                        "transition-transform duration-300 ease-out",
+                        isAnimating
+                            ? animationClasses[sideKey].open
+                            : animationClasses[sideKey].closed,
+                        className
+                    )}
                     {...props}
                 >
                     {children}

package/registry/sidebar.tsx

@@ -281,6 +281,13 @@ const SidebarInset = React.forwardRef<
             ref={ref}
             className={cn(
                 "relative flex min-h-svh flex-1 flex-col bg-background",
+                // Width calculation based on sidebar state
+                "w-full md:w-[calc(100%-var(--sidebar-width))]",
+                "md:peer-data-[state=collapsed]:w-[calc(100%-var(--sidebar-width-icon))]",
+                "md:peer-data-[collapsible=offcanvas]:peer-data-[state=collapsed]:w-full",
+                // Transition for smooth resize
+                "transition-[width] duration-200 ease-linear",
+                // Inset variant styles
                 "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
                 className
             )}

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