@srcroot/ui 0.0.55 → 0.0.58

package/src/registry/ui/star-rating.tsx

@@ -1,134 +1,146 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-interface StarRatingProps {
-    /** Current rating value */
-    value?: number
-    /** Max number of stars */
-    max?: number
-    /** Callback when rating changes */
-    onValueChange?: (value: number) => void
-    /** Whether rating is readonly */
-    readonly?: boolean
-    /** Size of stars */
-    size?: "sm" | "default" | "lg"
-    className?: string
-}
-
-const sizeClasses = {
-    sm: "h-4 w-4",
-    default: "h-5 w-5",
-    lg: "h-6 w-6",
-}
-
-/**
- * Star rating component
- * 
- * @example
- * const [rating, setRating] = useState(0)
- * <StarRating value={rating} onValueChange={setRating} />
- * 
- * @example
- * <StarRating value={4.5} readonly />
- */
-const StarRating = React.forwardRef<HTMLDivElement, StarRatingProps>(
-    (
-        {
-            value = 0,
-            max = 5,
-            onValueChange,
-            readonly = false,
-            size = "default",
-            className,
-        },
-        ref
-    ) => {
-        const [hoverValue, setHoverValue] = React.useState<number | null>(null)
-
-        const displayValue = hoverValue !== null ? hoverValue : value
-
-        const handleClick = (starValue: number) => {
-            if (!readonly) {
-                onValueChange?.(starValue)
-            }
-        }
-
-        const handleKeyDown = (e: React.KeyboardEvent, starValue: number) => {
-            if (readonly) return
-
-            if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault()
-                onValueChange?.(starValue)
-            } else if (e.key === "ArrowRight") {
-                e.preventDefault()
-                onValueChange?.(Math.min(value + 1, max))
-            } else if (e.key === "ArrowLeft") {
-                e.preventDefault()
-                onValueChange?.(Math.max(value - 1, 0))
-            }
-        }
-
-        return (
-            <div
-                ref={ref}
-                role="radiogroup"
-                aria-label={`Rating: ${value} out of ${max} stars`}
-                className={cn("inline-flex gap-0.5", className)}
-                onMouseLeave={() => setHoverValue(null)}
-            >
-                {Array.from({ length: max }).map((_, index) => {
-                    const starValue = index + 1
-                    const isFilled = displayValue >= starValue
-                    const isHalfFilled = !isFilled && displayValue > index && displayValue < starValue
-
-                    return (
-                        <button
-                            key={index}
-                            type="button"
-                            role="radio"
-                            aria-checked={value >= starValue}
-                            aria-label={`${starValue} star${starValue > 1 ? "s" : ""}`}
-                            disabled={readonly}
-                            tabIndex={readonly ? -1 : starValue === Math.ceil(value) || (value === 0 && starValue === 1) ? 0 : -1}
-                            className={cn(
-                                "relative focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded",
-                                !readonly && "cursor-pointer hover:scale-110 transition-transform"
-                            )}
-                            onClick={() => handleClick(starValue)}
-                            onMouseEnter={() => !readonly && setHoverValue(starValue)}
-                            onKeyDown={(e) => handleKeyDown(e, starValue)}
-                        >
-                            {/* Empty star */}
-                            <svg
-                                className={cn(sizeClasses[size], "text-muted-foreground/30")}
-                                fill="currentColor"
-                                viewBox="0 0 24 24"
-                            >
-                                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
-                            </svg>
-
-                            {/* Filled star overlay */}
-                            <svg
-                                className={cn(
-                                    sizeClasses[size],
-                                    "absolute inset-0 text-yellow-400 transition-opacity",
-                                    isFilled ? "opacity-100" : isHalfFilled ? "opacity-50" : "opacity-0"
-                                )}
-                                fill="currentColor"
-                                viewBox="0 0 24 24"
-                            >
-                                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
-                            </svg>
-                        </button>
-                    )
-                })}
-            </div>
-        )
-    }
-)
-StarRating.displayName = "StarRating"
-
-export { StarRating }
-
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+interface StarRatingProps {
+  /** Current rating value */
+  value?: number;
+  /** Max number of stars */
+  max?: number;
+  /** Callback when rating changes */
+  onValueChange?: (value: number) => void;
+  /** Whether rating is readonly */
+  readonly?: boolean;
+  /** Size of stars */
+  size?: "sm" | "default" | "lg";
+  className?: string;
+}
+
+const sizeClasses = {
+  sm: "h-4 w-4",
+  default: "h-5 w-5",
+  lg: "h-6 w-6",
+};
+
+/**
+ * Star rating component
+ *
+ * @example
+ * const [rating, setRating] = useState(0)
+ * <StarRating value={rating} onValueChange={setRating} />
+ *
+ * @example
+ * <StarRating value={4.5} readonly />
+ */
+const StarRating = React.forwardRef<HTMLDivElement, StarRatingProps>(
+  (
+    {
+      value = 0,
+      max = 5,
+      onValueChange,
+      readonly = false,
+      size = "default",
+      className,
+    },
+    ref,
+  ) => {
+    const [hoverValue, setHoverValue] = React.useState<number | null>(null);
+
+    const displayValue = hoverValue !== null ? hoverValue : value;
+
+    const handleClick = (starValue: number) => {
+      if (!readonly) {
+        onValueChange?.(starValue);
+      }
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent, starValue: number) => {
+      if (readonly) return;
+
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onValueChange?.(starValue);
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        onValueChange?.(Math.min(value + 1, max));
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        onValueChange?.(Math.max(value - 1, 0));
+      }
+    };
+
+    return (
+      <div
+        ref={ref}
+        role="radiogroup"
+        aria-label={`Rating: ${value} out of ${max} stars`}
+        className={cn("inline-flex gap-0.5", className)}
+        onMouseLeave={() => setHoverValue(null)}
+      >
+        {Array.from({ length: max }).map((_, index) => {
+          const starValue = index + 1;
+          const isFilled = displayValue >= starValue;
+          const isHalfFilled =
+            !isFilled && displayValue > index && displayValue < starValue;
+
+          return (
+            <button
+              key={index}
+              type="button"
+              role="radio"
+              aria-checked={value >= starValue}
+              aria-label={`${starValue} star${starValue > 1 ? "s" : ""}`}
+              disabled={readonly}
+              tabIndex={
+                readonly
+                  ? -1
+                  : starValue === Math.ceil(value) ||
+                      (value === 0 && starValue === 1)
+                    ? 0
+                    : -1
+              }
+              className={cn(
+                "relative focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded",
+                !readonly &&
+                  "cursor-pointer hover:scale-110 transition-transform",
+              )}
+              onClick={() => handleClick(starValue)}
+              onMouseEnter={() => !readonly && setHoverValue(starValue)}
+              onKeyDown={(e) => handleKeyDown(e, starValue)}
+            >
+              {/* Empty star */}
+              <svg
+                className={cn(sizeClasses[size], "text-muted-foreground/30")}
+                fill="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+              </svg>
+
+              {/* Filled star overlay */}
+              <svg
+                className={cn(
+                  sizeClasses[size],
+                  "absolute inset-0 text-yellow-400 transition-opacity",
+                  isFilled
+                    ? "opacity-100"
+                    : isHalfFilled
+                      ? "opacity-50"
+                      : "opacity-0",
+                )}
+                fill="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+              </svg>
+            </button>
+          );
+        })}
+      </div>
+    );
+  },
+);
+StarRating.displayName = "StarRating";
+
+export { StarRating };

package/src/registry/ui/switch.tsx

@@ -1,73 +1,72 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
-    /**
-     * Whether the switch is on
-     */
-    checked?: boolean
-    /**
-     * Callback when the switch state changes
-     */
-    onCheckedChange?: (checked: boolean) => void
-    /**
-     * Whether the switch is disabled
-     */
-    disabled?: boolean
-}
-
-/**
- * Switch/Toggle component with keyboard accessibility
- * 
- * @example
- * const [enabled, setEnabled] = useState(false)
- * <Switch checked={enabled} onCheckedChange={setEnabled} />
- */
-const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
-    ({ className, checked = false, onCheckedChange, disabled, ...props }, ref) => {
-        const handleClick = () => {
-            if (!disabled) {
-                onCheckedChange?.(!checked)
-            }
-        }
-
-        const handleKeyDown = (e: React.KeyboardEvent) => {
-            if (e.key === " " || e.key === "Enter") {
-                e.preventDefault()
-                handleClick()
-            }
-        }
-
-        return (
-            <button
-                type="button"
-                role="switch"
-                aria-checked={checked}
-                aria-disabled={disabled}
-                disabled={disabled}
-                ref={ref}
-                className={cn(
-                    "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
-                    checked ? "bg-primary" : "bg-input",
-                    className
-                )}
-                onClick={handleClick}
-                onKeyDown={handleKeyDown}
-                {...props}
-            >
-                <span
-                    className={cn(
-                        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform",
-                        checked ? "translate-x-4" : "translate-x-0"
-                    )}
-                />
-            </button>
-        )
-    }
-)
-Switch.displayName = "Switch"
-
-export { Switch }
-
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+    /**
+     * Whether the switch is on
+     */
+    checked?: boolean
+    /**
+     * Callback when the switch state changes
+     */
+    onCheckedChange?: (checked: boolean) => void
+    /**
+     * Whether the switch is disabled
+     */
+    disabled?: boolean
+}
+
+/**
+ * Switch/Toggle component with keyboard accessibility
+ * 
+ * @example
+ * const [enabled, setEnabled] = useState(false)
+ * <Switch checked={enabled} onCheckedChange={setEnabled} />
+ */
+const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+    ({ className, checked = false, onCheckedChange, disabled, ...props }, ref) => {
+        const handleClick = () => {
+            if (!disabled) {
+                onCheckedChange?.(!checked)
+            }
+        }
+
+        const handleKeyDown = (e: React.KeyboardEvent) => {
+            if (e.key === " " || e.key === "Enter") {
+                e.preventDefault()
+                handleClick()
+            }
+        }
+
+        return (
+            <button
+                type="button"
+                role="switch"
+                aria-checked={checked}
+                aria-disabled={disabled}
+                disabled={disabled}
+                ref={ref}
+                className={cn(
+                    "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+                    checked ? "bg-primary" : "bg-input",
+                    className
+                )}
+                onClick={handleClick}
+                onKeyDown={handleKeyDown}
+                {...props}
+            >
+                <span
+                    className={cn(
+                        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform",
+                        checked ? "translate-x-4" : "translate-x-0"
+                    )}
+                />
+            </button>
+        )
+    }
+)
+Switch.displayName = "Switch"
+
+export { Switch }

package/src/registry/ui/table-of-contents.tsx

@@ -1,96 +1,96 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-export interface HeadingInfo {
-    id: string
-    text: string
-    level: number
-    children?: HeadingInfo[]
-}
-
-interface TableOfContentsProps {
-    headings?: HeadingInfo[]
-    activeSection?: string | null
-    className?: string
-    onSectionClick?: (id: string) => void
-}
-
-export function TableOfContents({
-    headings = [],
-    activeSection,
-    className,
-    onSectionClick,
-}: TableOfContentsProps) {
-
-    const scrollToHeading = React.useCallback((headingId: string) => {
-        if (onSectionClick) {
-            onSectionClick(headingId)
-            return
-        }
-
-        const element = document.getElementById(headingId)
-        if (element) {
-            const offset = 80
-            const elementPosition =
-                element.getBoundingClientRect().top + window.pageYOffset
-            window.scrollTo({
-                top: elementPosition - offset,
-                behavior: "smooth",
-            })
-        }
-    }, [onSectionClick])
-
-    // Flatten all headings without hierarchy for simplicity
-    const flattenedHeadings = React.useMemo(() => {
-        const flatten = (headings: HeadingInfo[]): HeadingInfo[] => {
-            return headings.flatMap((heading) => [
-                heading,
-                ...(heading.children ? flatten(heading.children) : []),
-            ])
-        }
-        return flatten(headings)
-    }, [headings])
-
-    if (flattenedHeadings.length === 0) return null
-
-    return (
-        <div
-            className={cn(
-                "hidden lg:block sticky top-16 right-0 h-[calc(100vh-4rem)] w-full bg-background justify-self-end lg:max-w-64",
-                className
-            )}
-        >
-            <div className="flex flex-col h-full">
-                <div className="flex items-center justify-between p-4">
-                    <span className="font-medium text-foreground text-sm">
-                        On this page
-                    </span>
-                </div>
-
-                <nav className="flex-1 overflow-y-auto p-4 scrollbar-thin">
-                    <div className="space-y-1">
-                        {flattenedHeadings.map((heading) => (
-                            <button
-                                key={heading.id}
-                                onClick={() => scrollToHeading(heading.id)}
-                                className={cn(
-                                    "w-full text-left px-2 py-1.5 rounded text-xs transition-colors duration-200",
-                                    activeSection === heading.id
-                                        ? "text-primary bg-accent font-medium"
-                                        : "text-muted-foreground hover:text-foreground",
-                                )}
-                                style={{
-                                    paddingLeft: `${(heading.level - 1) * 12 + 8}px`,
-                                }}
-                            >
-                                {heading.text}
-                            </button>
-                        ))}
-                    </div>
-                </nav>
-            </div>
-        </div>
-    )
-}
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface HeadingInfo {
+    id: string
+    text: string
+    level: number
+    children?: HeadingInfo[]
+}
+
+interface TableOfContentsProps {
+    headings?: HeadingInfo[]
+    activeSection?: string | null
+    className?: string
+    onSectionClick?: (id: string) => void
+}
+
+export function TableOfContents({
+    headings = [],
+    activeSection,
+    className,
+    onSectionClick,
+}: TableOfContentsProps) {
+
+    const scrollToHeading = React.useCallback((headingId: string) => {
+        if (onSectionClick) {
+            onSectionClick(headingId)
+            return
+        }
+
+        const element = document.getElementById(headingId)
+        if (element) {
+            const offset = 80
+            const elementPosition =
+                element.getBoundingClientRect().top + window.pageYOffset
+            window.scrollTo({
+                top: elementPosition - offset,
+                behavior: "smooth",
+            })
+        }
+    }, [onSectionClick])
+
+    // Flatten all headings without hierarchy for simplicity
+    const flattenedHeadings = React.useMemo(() => {
+        const flatten = (headings: HeadingInfo[]): HeadingInfo[] => {
+            return headings.flatMap((heading) => [
+                heading,
+                ...(heading.children ? flatten(heading.children) : []),
+            ])
+        }
+        return flatten(headings)
+    }, [headings])
+
+    if (flattenedHeadings.length === 0) return null
+
+    return (
+        <div
+            className={cn(
+                "hidden lg:block sticky top-16 right-0 h-[calc(100vh-4rem)] w-full bg-background justify-self-end lg:max-w-64",
+                className
+            )}
+        >
+            <div className="flex flex-col h-full">
+                <div className="flex items-center justify-between p-4">
+                    <span className="font-medium text-foreground text-sm">
+                        On this page
+                    </span>
+                </div>
+
+                <nav className="flex-1 overflow-y-auto p-4 scrollbar-thin">
+                    <div className="space-y-1">
+                        {flattenedHeadings.map((heading) => (
+                            <button
+                                key={heading.id}
+                                onClick={() => scrollToHeading(heading.id)}
+                                className={cn(
+                                    "w-full text-left px-2 py-1.5 rounded text-xs transition-colors duration-200",
+                                    activeSection === heading.id
+                                        ? "text-primary bg-accent font-medium"
+                                        : "text-muted-foreground hover:text-foreground",
+                                )}
+                                style={{
+                                    paddingLeft: `${(heading.level - 1) * 12 + 8}px`,
+                                }}
+                            >
+                                {heading.text}
+                            </button>
+                        ))}
+                    </div>
+                </nav>
+            </div>
+        </div>
+    )
+}