@srcroot/ui 0.0.61 → 0.0.62

package/src/registry/ui/form-field.tsx

@@ -1,33 +1,35 @@
-import * as React from "react"
-import { Label } from "@/components/ui/label"
-import { cn } from "@/lib/utils"
+"use client";
+
+import * as React from "react";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
 
 export interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * The label for the field
-     */
-    label?: React.ReactNode
-    /**
-     * Helper text description
-     */
-    description?: React.ReactNode
-    /**
-     * Error message
-     */
-    error?: React.ReactNode
-    /**
-     * Whether the field is required (shows asterisk)
-     */
-    required?: boolean
-    /**
-     * The ID of the input element, used for label association
-     */
-    htmlFor?: string
+  /**
+   * The label for the field
+   */
+  label?: React.ReactNode;
+  /**
+   * Helper text description
+   */
+  description?: React.ReactNode;
+  /**
+   * Error message
+   */
+  error?: React.ReactNode;
+  /**
+   * Whether the field is required (shows asterisk)
+   */
+  required?: boolean;
+  /**
+   * The ID of the input element, used for label association
+   */
+  htmlFor?: string;
 }
 
 /**
  * FormField wrapper for consistent label and error placement
- * 
+ *
  * @example
  * <FormField
  *   label="Email"
@@ -39,53 +41,62 @@ export interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
  * </FormField>
  */
 const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>(
-    ({ className, label, description, error, required, htmlFor, children, ...props }, ref) => {
-        const id = htmlFor || React.useId()
+  (
+    {
+      className,
+      label,
+      description,
+      error,
+      required,
+      htmlFor,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const id = htmlFor || React.useId();
 
-        // Clone child to inject id and error state if it's a valid React element
-        const childWithProps = React.isValidElement(children)
-            ? React.cloneElement(children as React.ReactElement<any>, {
-                id: id,
-                error: !!error,
-                "aria-describedby": error ? `${id}-error` : description ? `${id}-desc` : undefined,
-            })
-            : children
+    // Clone child to inject id and error state if it's a valid React element
+    const childWithProps = React.isValidElement(children)
+      ? React.cloneElement(children as React.ReactElement<any>, {
+          id: id,
+          error: !!error,
+          "aria-describedby": error
+            ? `${id}-error`
+            : description
+              ? `${id}-desc`
+              : undefined,
+        })
+      : children;
 
-        return (
-            <div
-                ref={ref}
-                className={cn("space-y-2", className)}
-                {...props}
-            >
-                {label && (
-                    <Label htmlFor={id} required={required}>
-                        {label}
-                    </Label>
-                )}
+    return (
+      <div ref={ref} className={cn("space-y-2", className)} {...props}>
+        {label && (
+          <Label htmlFor={id} required={required}>
+            {label}
+          </Label>
+        )}
 
-                {childWithProps}
+        {childWithProps}
 
-                {description && !error && (
-                    <p
-                        id={`${id}-desc`}
-                        className="text-[0.8rem] text-muted-foreground"
-                    >
-                        {description}
-                    </p>
-                )}
+        {description && !error && (
+          <p id={`${id}-desc`} className="text-[0.8rem] text-muted-foreground">
+            {description}
+          </p>
+        )}
 
-                {error && (
-                    <p
-                        id={`${id}-error`}
-                        className="text-[0.8rem] font-medium text-destructive"
-                    >
-                        {error}
-                    </p>
-                )}
-            </div>
-        )
-    }
-)
-FormField.displayName = "FormField"
+        {error && (
+          <p
+            id={`${id}-error`}
+            className="text-[0.8rem] font-medium text-destructive"
+          >
+            {error}
+          </p>
+        )}
+      </div>
+    );
+  },
+);
+FormField.displayName = "FormField";
 
-export { FormField }
+export { FormField };

package/src/registry/ui/image.tsx

@@ -1,144 +1,152 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
 
 const imageVariants = cva("", {
-    variants: {
-        rounded: {
-            none: "rounded-none",
-            sm: "rounded-sm",
-            default: "rounded-md",
-            md: "rounded-md",
-            lg: "rounded-lg",
-            xl: "rounded-xl",
-            full: "rounded-full",
-        },
-        objectFit: {
-            cover: "object-cover",
-            contain: "object-contain",
-            fill: "object-fill",
-            none: "object-none",
-        },
+  variants: {
+    rounded: {
+      none: "rounded-none",
+      sm: "rounded-sm",
+      default: "rounded-md",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      xl: "rounded-xl",
+      full: "rounded-full",
     },
-    defaultVariants: {
-        rounded: "default",
-        objectFit: "cover",
+    objectFit: {
+      cover: "object-cover",
+      contain: "object-contain",
+      fill: "object-fill",
+      none: "object-none",
     },
-})
+  },
+  defaultVariants: {
+    rounded: "default",
+    objectFit: "cover",
+  },
+});
 
-type ImageVariants = VariantProps<typeof imageVariants>
+type ImageVariants = VariantProps<typeof imageVariants>;
 
 interface ImageProps
-    extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "onLoad" | "onError">,
+  extends
+    Omit<React.ImgHTMLAttributes<HTMLImageElement>, "onLoad" | "onError">,
     ImageVariants {
-    /** Fallback content or URL when image fails to load */
-    fallback?: React.ReactNode | string
-    /** Show skeleton loading state */
-    showSkeleton?: boolean
-    /** Aspect ratio (width/height) */
-    aspectRatio?: number
+  /** Fallback content or URL when image fails to load */
+  fallback?: React.ReactNode | string;
+  /** Show skeleton loading state */
+  showSkeleton?: boolean;
+  /** Aspect ratio (width/height) */
+  aspectRatio?: number;
 }
 
 /**
  * Enhanced Image with loading states and fallback
- * 
+ *
  * @example
  * <Image src="/photo.jpg" alt="Photo" aspectRatio={16/9} />
  * <Image src="/avatar.jpg" alt="User" rounded="full" fallback="JD" />
  */
 const Image = React.forwardRef<HTMLImageElement, ImageProps>(
-    (
-        {
-            className,
-            src,
-            alt,
-            fallback,
-            showSkeleton = true,
-            aspectRatio,
-            rounded,
-            objectFit,
-            style,
-            ...props
-        },
-        ref
-    ) => {
-        const [status, setStatus] = React.useState<"loading" | "loaded" | "error">("loading")
+  (
+    {
+      className,
+      src,
+      alt,
+      fallback,
+      showSkeleton = true,
+      aspectRatio,
+      rounded,
+      objectFit,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const [status, setStatus] = React.useState<"loading" | "loaded" | "error">(
+      "loading",
+    );
 
-        React.useEffect(() => {
-            setStatus("loading")
-        }, [src])
+    React.useEffect(() => {
+      setStatus("loading");
+    }, [src]);
 
-        const containerStyle: React.CSSProperties = aspectRatio
-            ? { paddingBottom: `${100 / aspectRatio}%`, ...(style || {}) }
-            : (style || {})
+    const containerStyle: React.CSSProperties = aspectRatio
+      ? { paddingBottom: `${100 / aspectRatio}%`, ...(style || {}) }
+      : style || {};
 
-        // Render fallback
-        if (status === "error" && fallback) {
-            if (typeof fallback === "string") {
-                // If fallback is a string, check if it's a URL or initials
-                if (fallback.startsWith("http") || fallback.startsWith("/")) {
-                    return (
-                        <img
-                            ref={ref}
-                            src={fallback}
-                            alt={alt}
-                            className={cn(imageVariants({ rounded, objectFit }), className)}
-                            style={style}
-                            {...props}
-                        />
-                    )
-                }
-                // Initials fallback
-                return (
-                    <div
-                        className={cn(
-                            "flex items-center justify-center bg-muted text-muted-foreground font-medium",
-                            imageVariants({ rounded }),
-                            className
-                        )}
-                        style={containerStyle}
-                    >
-                        {fallback}
-                    </div>
-                )
-            }
-            return <>{fallback}</>
+    // Render fallback
+    if (status === "error" && fallback) {
+      if (typeof fallback === "string") {
+        // If fallback is a string, check if it's a URL or initials
+        if (fallback.startsWith("http") || fallback.startsWith("/")) {
+          return (
+            <img
+              ref={ref}
+              src={fallback}
+              alt={alt}
+              className={cn(imageVariants({ rounded, objectFit }), className)}
+              style={style}
+              {...props}
+            />
+          );
         }
-
+        // Initials fallback
         return (
-            <div
-                className={cn("relative overflow-hidden", aspectRatio && "w-full")}
-                style={aspectRatio ? { paddingBottom: `${100 / aspectRatio}%` } : undefined}
-            >
-                {/* Skeleton */}
-                {status === "loading" && showSkeleton && (
-                    <div
-                        className={cn(
-                            "absolute inset-0 animate-pulse bg-muted",
-                            imageVariants({ rounded })
-                        )}
-                    />
-                )}
-
-                <img
-                    ref={ref}
-                    src={src}
-                    alt={alt}
-                    className={cn(
-                        imageVariants({ rounded, objectFit }),
-                        aspectRatio && "absolute inset-0 h-full w-full",
-                        status === "loading" && "opacity-0",
-                        status === "loaded" && "opacity-100 transition-opacity duration-300",
-                        className
-                    )}
-                    onLoad={() => setStatus("loaded")}
-                    onError={() => setStatus("error")}
-                    {...props}
-                />
-            </div>
-        )
+          <div
+            className={cn(
+              "flex items-center justify-center bg-muted text-muted-foreground font-medium",
+              imageVariants({ rounded }),
+              className,
+            )}
+            style={containerStyle}
+          >
+            {fallback}
+          </div>
+        );
+      }
+      return <>{fallback}</>;
     }
-)
-Image.displayName = "Image"
 
-export { Image, imageVariants }
+    return (
+      <div
+        className={cn("relative overflow-hidden", aspectRatio && "w-full")}
+        style={
+          aspectRatio ? { paddingBottom: `${100 / aspectRatio}%` } : undefined
+        }
+      >
+        {/* Skeleton */}
+        {status === "loading" && showSkeleton && (
+          <div
+            className={cn(
+              "absolute inset-0 animate-pulse bg-muted",
+              imageVariants({ rounded }),
+            )}
+          />
+        )}
+
+        <img
+          ref={ref}
+          src={src}
+          alt={alt}
+          className={cn(
+            imageVariants({ rounded, objectFit }),
+            aspectRatio && "absolute inset-0 h-full w-full",
+            status === "loading" && "opacity-0",
+            status === "loaded" &&
+              "opacity-100 transition-opacity duration-300",
+            className,
+          )}
+          onLoad={() => setStatus("loaded")}
+          onError={() => setStatus("error")}
+          {...props}
+        />
+      </div>
+    );
+  },
+);
+Image.displayName = "Image";
+
+export { Image, imageVariants };

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 };