@srcroot/ui 0.0.55 → 0.0.58

package/src/registry/ui/image.tsx

@@ -1,147 +1,144 @@
-"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",
-        },
-    },
-    defaultVariants: {
-        rounded: "default",
-        objectFit: "cover",
-    },
-})
-
-type ImageVariants = VariantProps<typeof imageVariants>
-
-interface ImageProps
-    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
-}
-
-/**
- * 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")
-
-        React.useEffect(() => {
-            setStatus("loading")
-        }, [src])
-
-        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}</>
-        }
-
-        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 }
-
+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",
+        },
+    },
+    defaultVariants: {
+        rounded: "default",
+        objectFit: "cover",
+    },
+})
+
+type ImageVariants = VariantProps<typeof imageVariants>
+
+interface ImageProps
+    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
+}
+
+/**
+ * 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")
+
+        React.useEffect(() => {
+            setStatus("loading")
+        }, [src])
+
+        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}</>
+        }
+
+        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,85 +1,82 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-const InputGroup = React.forwardRef<
-    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 }>
-
-                // 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
-                }
-
-                return React.cloneElement(element, additionalProps)
-            })}
-        </div>
-    )
-})
-InputGroup.displayName = "InputGroup"
-
-const InputAddon = React.forwardRef<
-    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"
-
-export { InputGroup, InputAddon }
-
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const InputGroup = React.forwardRef<
+    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 }>
+
+                // 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
+                }
+
+                return React.cloneElement(element, additionalProps)
+            })}
+        </div>
+    )
+})
+InputGroup.displayName = "InputGroup"
+
+const InputAddon = React.forwardRef<
+    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"
+
+export { InputGroup, InputAddon }