@srcroot/ui 0.0.61 → 0.0.63

package/src/registry/ui/container.tsx

@@ -1,44 +1,47 @@
-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 containerVariants = cva("mx-auto w-full px-4", {
-    variants: {
-        size: {
-            sm: "max-w-screen-sm",
-            md: "max-w-screen-md",
-            lg: "max-w-screen-lg",
-            xl: "max-w-screen-xl",
-            "2xl": "max-w-screen-2xl",
-            full: "max-w-full",
-        },
-    },
-    defaultVariants: {
-        size: "xl",
+  variants: {
+    size: {
+      sm: "max-w-screen-sm",
+      md: "max-w-screen-md",
+      lg: "max-w-screen-lg",
+      xl: "max-w-screen-xl",
+      "2xl": "max-w-screen-2xl",
+      full: "max-w-full",
     },
-})
+  },
+  defaultVariants: {
+    size: "xl",
+  },
+});
 
 interface ContainerProps
-    extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof containerVariants> { }
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof containerVariants> {}
 
 /**
  * Container for max-width layouts
- * 
+ *
  * @example
  * <Container size="lg">Content</Container>
  */
 const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
-    ({ className, size, ...props }, ref) => {
-        return (
-            <div
-                ref={ref}
-                className={cn(containerVariants({ size }), className)}
-                {...props}
-            />
-        )
-    }
-)
-Container.displayName = "Container"
+  ({ className, size, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(containerVariants({ size }), className)}
+        {...props}
+      />
+    );
+  },
+);
+Container.displayName = "Container";
 
-export { Container, containerVariants }
+export { Container, containerVariants };

package/src/registry/ui/empty-state.tsx

@@ -1,38 +1,40 @@
-import { cn } from "@/lib/utils"
+"use client";
+
+import { cn } from "@/lib/utils";
 
 interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
-    icon?: React.ElementType
-    title: string
-    description: string
-    action?: React.ReactNode
+  icon?: React.ElementType;
+  title: string;
+  description: string;
+  action?: React.ReactNode;
 }
 
 export function EmptyState({
-    icon: Icon,
-    title,
-    description,
-    action,
-    className,
-    ...props
+  icon: Icon,
+  title,
+  description,
+  action,
+  className,
+  ...props
 }: EmptyStateProps) {
-    return (
-        <div
-            className={cn(
-                "flex flex-col items-center justify-center py-12 text-center border-2 border-dashed rounded-lg bg-muted/5",
-                className
-            )}
-            {...props}
-        >
-            {Icon && (
-                <div className="flex h-20 w-20 items-center justify-center rounded-full bg-muted/50 mb-4">
-                    <Icon className="h-10 w-10 text-muted-foreground" />
-                </div>
-            )}
-            <h3 className="text-lg font-semibold tracking-tight">{title}</h3>
-            <p className="text-muted-foreground text-sm max-w-sm mt-2 mb-6">
-                {description}
-            </p>
-            {action && <div>{action}</div>}
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center py-12 text-center border-2 border-dashed rounded-lg bg-muted/5",
+        className,
+      )}
+      {...props}
+    >
+      {Icon && (
+        <div className="flex h-20 w-20 items-center justify-center rounded-full bg-muted/50 mb-4">
+          <Icon className="h-10 w-10 text-muted-foreground" />
         </div>
-    )
+      )}
+      <h3 className="text-lg font-semibold tracking-tight">{title}</h3>
+      <p className="text-muted-foreground text-sm max-w-sm mt-2 mb-6">
+        {description}
+      </p>
+      {action && <div>{action}</div>}
+    </div>
+  );
 }

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