@srcroot/ui 0.0.61 → 0.0.63

package/src/registry/ui/input-group.tsx

@@ -1,82 +1,88 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
 
 const InputGroup = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement> & { error?: boolean }
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { error?: boolean }
 >(({ className, children, error, ...props }, ref) => {
-    return (
-        <div
-            ref={ref}
-            className={cn(
-                "flex w-full items-center rounded-md",
-                "focus-within:ring-1 focus-within:ring-ring",
-                error && "focus-within:ring-destructive focus-within:border-destructive",
-                // First child: rounded-l only, remove right border if not last
-                "[&>*:first-child]:rounded-r-none",
-                // Last child: rounded-r only, remove left border if not first
-                "[&>*:last-child]:rounded-l-none",
-                // Middle children: no rounding
-                "[&>*:not(:first-child):not(:last-child)]:rounded-none",
-                // Negative margin to merge borders
-                "[&>*:not(:first-child)]:-ml-px",
-                // Bring hovered element to front
-                "[&>*:hover]:z-10",
-                className
-            )}
-            {...props}
-        >
-            {React.Children.map(children, (child) => {
-                if (!React.isValidElement(child)) return child
-                const element = child as React.ReactElement<{ className?: string, error?: boolean }>
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "flex w-full items-center rounded-md",
+        "focus-within:ring-1 focus-within:ring-ring",
+        error &&
+          "focus-within:ring-destructive focus-within:border-destructive",
+        // First child: rounded-l only, remove right border if not last
+        "[&>*:first-child]:rounded-r-none",
+        // Last child: rounded-r only, remove left border if not first
+        "[&>*:last-child]:rounded-l-none",
+        // Middle children: no rounding
+        "[&>*:not(:first-child):not(:last-child)]:rounded-none",
+        // Negative margin to merge borders
+        "[&>*:not(:first-child)]:-ml-px",
+        // Bring hovered element to front
+        "[&>*:hover]:z-10",
+        className,
+      )}
+      {...props}
+    >
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) return child;
+        const element = child as React.ReactElement<{
+          className?: string;
+          error?: boolean;
+        }>;
 
-                // Only pass error to custom components, not DOM elements
-                const additionalProps: { className: string; error?: boolean } = {
-                    className: cn(
-                        element.props.className,
-                        "focus-visible:ring-0 focus-visible:ring-offset-0",
-                        error && "border-destructive focus-visible:ring-destructive"
-                    )
-                }
+        // Only pass error to custom components, not DOM elements
+        const additionalProps: { className: string; error?: boolean } = {
+          className: cn(
+            element.props.className,
+            "focus-visible:ring-0 focus-visible:ring-offset-0",
+            error && "border-destructive focus-visible:ring-destructive",
+          ),
+        };
 
-                if (typeof element.type !== "string") {
-                    additionalProps.error = error
-                }
+        if (typeof element.type !== "string") {
+          additionalProps.error = error;
+        }
 
-                return React.cloneElement(element, additionalProps)
-            })}
-        </div>
-    )
-})
-InputGroup.displayName = "InputGroup"
+        return React.cloneElement(element, additionalProps);
+      })}
+    </div>
+  );
+});
+InputGroup.displayName = "InputGroup";
 
 const InputAddon = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement> & { error?: boolean }
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { error?: boolean }
 >(({ className, children, error, ...props }, ref) => {
-    return (
-        <div
-            ref={ref}
-            className={cn(
-                "flex h-9 items-center justify-center rounded-md border border-input bg-muted px-3 text-sm text-muted-foreground shadow-sm",
-                error && "border-destructive",
-                className
-            )}
-            {...props}
-        >
-            {React.Children.map(children, (child: React.ReactNode) => {
-                if (!React.isValidElement(child)) return child
-                const element = child as React.ReactElement<{ className?: string }>
-                return React.cloneElement(element, {
-                    className: cn(
-                        element.props.className,
-                        "focus-visible:ring-0 focus-visible:ring-offset-0"
-                    ),
-                })
-            })}
-        </div>
-    )
-})
-InputAddon.displayName = "InputAddon"
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "flex h-9 items-center justify-center rounded-md border border-input bg-muted px-3 text-sm text-muted-foreground shadow-sm",
+        error && "border-destructive",
+        className,
+      )}
+      {...props}
+    >
+      {React.Children.map(children, (child: React.ReactNode) => {
+        if (!React.isValidElement(child)) return child;
+        const element = child as React.ReactElement<{ className?: string }>;
+        return React.cloneElement(element, {
+          className: cn(
+            element.props.className,
+            "focus-visible:ring-0 focus-visible:ring-offset-0",
+          ),
+        });
+      })}
+    </div>
+  );
+});
+InputAddon.displayName = "InputAddon";
 
-export { InputGroup, InputAddon }
+export { InputGroup, InputAddon };

package/src/registry/ui/kbd.tsx

@@ -1,60 +1,62 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
 
 interface KbdProps extends React.HTMLAttributes<HTMLElement> {
-    /** Array of keys to display (e.g., ["Ctrl", "K"]) */
-    keys?: string[]
+  /** Array of keys to display (e.g., ["Ctrl", "K"]) */
+  keys?: string[];
 }
 
 /**
  * Kbd - Keyboard key display component
- * 
+ *
  * Usage:
  * <Kbd>⌘</Kbd>
  * <Kbd keys={["Ctrl", "Shift", "P"]} />
  */
 const Kbd = React.forwardRef<HTMLElement, KbdProps>(
-    ({ className, children, keys, ...props }, ref) => {
-        // If keys array is provided, render each key
-        if (keys && keys.length > 0) {
-            return (
-                <span className="inline-flex items-center gap-1">
-                    {keys.map((key, index) => (
-                        <React.Fragment key={index}>
-                            <kbd
-                                ref={index === 0 ? ref : undefined}
-                                className={cn(
-                                    "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
-                                    className
-                                )}
-                                {...props}
-                            >
-                                {key}
-                            </kbd>
-                            {index < keys.length - 1 && (
-                                <span className="text-muted-foreground text-xs">+</span>
-                            )}
-                        </React.Fragment>
-                    ))}
-                </span>
-            )
-        }
-
-        // Single key rendering
-        return (
-            <kbd
-                ref={ref}
+  ({ className, children, keys, ...props }, ref) => {
+    // If keys array is provided, render each key
+    if (keys && keys.length > 0) {
+      return (
+        <span className="inline-flex items-center gap-1">
+          {keys.map((key, index) => (
+            <React.Fragment key={index}>
+              <kbd
+                ref={index === 0 ? ref : undefined}
                 className={cn(
-                    "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
-                    className
+                  "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
+                  className,
                 )}
                 {...props}
-            >
-                {children}
-            </kbd>
-        )
+              >
+                {key}
+              </kbd>
+              {index < keys.length - 1 && (
+                <span className="text-muted-foreground text-xs">+</span>
+              )}
+            </React.Fragment>
+          ))}
+        </span>
+      );
     }
-)
-Kbd.displayName = "Kbd"
 
-export { Kbd }
+    // Single key rendering
+    return (
+      <kbd
+        ref={ref}
+        className={cn(
+          "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </kbd>
+    );
+  },
+);
+Kbd.displayName = "Kbd";
+
+export { Kbd };

package/src/registry/ui/loading-spinner.tsx

@@ -1,108 +1,112 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
+"use client";
 
-const spinnerVariants = cva(
-    "animate-spin",
-    {
-        variants: {
-            size: {
-                xs: "h-3 w-3",
-                sm: "h-4 w-4",
-                default: "h-6 w-6",
-                lg: "h-8 w-8",
-                xl: "h-12 w-12",
-            },
-            variant: {
-                default: "text-primary",
-                muted: "text-muted-foreground",
-                white: "text-white",
-            },
-        },
-        defaultVariants: {
-            size: "default",
-            variant: "default",
-        },
-    }
-)
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
 
-type SpinnerVariants = VariantProps<typeof spinnerVariants>
+const spinnerVariants = cva("animate-spin", {
+  variants: {
+    size: {
+      xs: "h-3 w-3",
+      sm: "h-4 w-4",
+      default: "h-6 w-6",
+      lg: "h-8 w-8",
+      xl: "h-12 w-12",
+    },
+    variant: {
+      default: "text-primary",
+      muted: "text-muted-foreground",
+      white: "text-white",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+    variant: "default",
+  },
+});
+
+type SpinnerVariants = VariantProps<typeof spinnerVariants>;
 
 interface LoadingSpinnerProps extends SpinnerVariants {
-    className?: string
-    /** Accessible label for screen readers */
-    label?: string
+  className?: string;
+  /** Accessible label for screen readers */
+  label?: string;
 }
 
 /**
  * Loading spinner with size and color variants
- * 
+ *
  * @example
  * <LoadingSpinner />
  * <LoadingSpinner size="lg" variant="muted" />
  * <LoadingSpinner size="sm" label="Submitting..." />
  */
 const LoadingSpinner = React.forwardRef<SVGSVGElement, LoadingSpinnerProps>(
-    ({ className, size, variant, label = "Loading" }, ref) => (
-        <svg
-            ref={ref}
-            className={cn(spinnerVariants({ size, variant, className }))}
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            role="status"
-            aria-label={label}
-        >
-            <circle
-                className="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                strokeWidth="4"
-            />
-            <path
-                className="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            />
-        </svg>
-    )
-)
-LoadingSpinner.displayName = "LoadingSpinner"
+  ({ className, size, variant, label = "Loading" }, ref) => (
+    <svg
+      ref={ref}
+      className={cn(spinnerVariants({ size, variant, className }))}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      role="status"
+      aria-label={label}
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  ),
+);
+LoadingSpinner.displayName = "LoadingSpinner";
 
 interface LoadingOverlayProps extends SpinnerVariants {
-    className?: string
-    children?: React.ReactNode
-    /** Whether to show the loading state */
-    loading?: boolean
-    /** Text to display below spinner */
-    text?: string
+  className?: string;
+  children?: React.ReactNode;
+  /** Whether to show the loading state */
+  loading?: boolean;
+  /** Text to display below spinner */
+  text?: string;
 }
 
 /**
  * Full overlay loading state
- * 
+ *
  * @example
  * <LoadingOverlay loading={isLoading}>
  *   <YourContent />
  * </LoadingOverlay>
  */
 const LoadingOverlay = React.forwardRef<HTMLDivElement, LoadingOverlayProps>(
-    ({ className, children, loading = true, text, size = "lg", variant }, ref) => {
-        if (!loading) return <>{children}</>
+  (
+    { className, children, loading = true, text, size = "lg", variant },
+    ref,
+  ) => {
+    if (!loading) return <>{children}</>;
 
-        return (
-            <div ref={ref} className={cn("relative", className)}>
-                {children && <div className="opacity-50 pointer-events-none">{children}</div>}
-                <div className="absolute inset-0 flex flex-col items-center justify-center bg-background/80">
-                    <LoadingSpinner size={size} variant={variant} />
-                    {text && <p className="mt-2 text-sm text-muted-foreground">{text}</p>}
-                </div>
-            </div>
-        )
-    }
-)
-LoadingOverlay.displayName = "LoadingOverlay"
+    return (
+      <div ref={ref} className={cn("relative", className)}>
+        {children && (
+          <div className="opacity-50 pointer-events-none">{children}</div>
+        )}
+        <div className="absolute inset-0 flex flex-col items-center justify-center bg-background/80">
+          <LoadingSpinner size={size} variant={variant} />
+          {text && <p className="mt-2 text-sm text-muted-foreground">{text}</p>}
+        </div>
+      </div>
+    );
+  },
+);
+LoadingOverlay.displayName = "LoadingOverlay";
 
-export { LoadingSpinner, LoadingOverlay, spinnerVariants }
+export { LoadingSpinner, LoadingOverlay, spinnerVariants };

package/src/registry/ui/marquee.tsx

@@ -1,55 +1,53 @@
-"use client"
-
 "use client";
 
 import { cn } from "@/lib/utils";
 
 interface MarqueeProps {
-    className?: string;
-    reverse?: boolean;
-    pauseOnHover?: boolean;
-    children?: React.ReactNode;
-    vertical?: boolean;
-    repeat?: number;
-    [key: string]: any;
+  className?: string;
+  reverse?: boolean;
+  pauseOnHover?: boolean;
+  children?: React.ReactNode;
+  vertical?: boolean;
+  repeat?: number;
+  [key: string]: any;
 }
 
 export default function Marquee({
-    className,
-    reverse,
-    pauseOnHover = false,
-    children,
-    vertical = false,
-    repeat = 4,
-    ...props
+  className,
+  reverse,
+  pauseOnHover = false,
+  children,
+  vertical = false,
+  repeat = 4,
+  ...props
 }: MarqueeProps) {
-    return (
-        <div
-            {...props}
-            className={cn(
-                "group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]",
-                {
-                    "flex-row": !vertical,
-                    "flex-col": vertical,
-                },
-                className,
-            )}
-        >
-            {Array(repeat)
-                .fill(0)
-                .map((_, i) => (
-                    <div
-                        key={i}
-                        className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
-                            "animate-marquee flex-row": !vertical,
-                            "animate-marquee-vertical flex-col": vertical,
-                            "group-hover:[animation-play-state:paused]": pauseOnHover,
-                            "[animation-direction:reverse]": reverse,
-                        })}
-                    >
-                        {children}
-                    </div>
-                ))}
-        </div>
-    );
+  return (
+    <div
+      {...props}
+      className={cn(
+        "group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]",
+        {
+          "flex-row": !vertical,
+          "flex-col": vertical,
+        },
+        className,
+      )}
+    >
+      {Array(repeat)
+        .fill(0)
+        .map((_, i) => (
+          <div
+            key={i}
+            className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
+              "animate-marquee flex-row": !vertical,
+              "animate-marquee-vertical flex-col": vertical,
+              "group-hover:[animation-play-state:paused]": pauseOnHover,
+              "[animation-direction:reverse]": reverse,
+            })}
+          >
+            {children}
+          </div>
+        ))}
+    </div>
+  );
 }

package/src/registry/ui/native-select.tsx

@@ -1,49 +1,51 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
+"use client";
 
-export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> { }
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}
 
 /**
  * NativeSelect - Styled browser-native select element
- * 
+ *
  * Uses the browser's native <select> for accessibility and mobile UX,
  * with custom styling to match the design system.
  */
 const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
-    ({ className, children, ...props }, ref) => {
-        return (
-            <div className="relative">
-                <select
-                    ref={ref}
-                    className={cn(
-                        "flex h-10 w-full appearance-none rounded-md border border-input bg-background px-3 py-2 pr-8 text-sm ring-offset-background",
-                        "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-                        "disabled:cursor-not-allowed disabled:opacity-50",
-                        className
-                    )}
-                    {...props}
-                >
-                    {children}
-                </select>
-                {/* Custom chevron icon */}
-                <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                    <svg
-                        className="h-4 w-4 opacity-50"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                    >
-                        <path d="m6 9 6 6 6-6" />
-                    </svg>
-                </div>
-            </div>
-        )
-    }
-)
-NativeSelect.displayName = "NativeSelect"
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div className="relative">
+        <select
+          ref={ref}
+          className={cn(
+            "flex h-10 w-full appearance-none rounded-md border border-input bg-background px-3 py-2 pr-8 text-sm ring-offset-background",
+            "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </select>
+        {/* Custom chevron icon */}
+        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+          <svg
+            className="h-4 w-4 opacity-50"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        </div>
+      </div>
+    );
+  },
+);
+NativeSelect.displayName = "NativeSelect";
 
-export { NativeSelect }
+export { NativeSelect };