{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"avatar","title":"Avatar","type":"registry:ui","description":"An image element with a fallback for representing the user.","dependencies":["@radix-ui/react-avatar","class-variance-authority"],"registryDependencies":["utils","https://fysk.dev/r/fysk-provider.json"],"files":[{"path":"fysk/avatar.tsx","type":"registry:ui","content":"\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { useFyskConfig } from \"@/components/fysk-provider\"\r\n\r\nconst avatarVariants = cva(\r\n    \"relative flex shrink-0 overflow-hidden rounded-full transition-all duration-150 active:scale-[0.98]\",\r\n    {\r\n        variants: {\r\n            size: {\r\n                xs: \"h-7 w-7 text-[10px]\",\r\n                sm: \"h-8 w-8 text-xs\",\r\n                md: \"h-9 w-9 text-xs\",\r\n                lg: \"h-10 w-10 text-sm\",\r\n                xl: \"h-12 w-12 text-base\",\r\n                \"2xl\": \"h-16 w-16 text-xl\",\r\n            },\r\n            variant: {\r\n                default: \"border border-border\",\r\n                outline: \"border-2 border-border bg-transparent\",\r\n                ghost: \"border-none bg-transparent\",\r\n                glass: \"bg-foreground/5 backdrop-blur-md border border-border/50 shadow-xs\",\r\n            }\r\n        },\r\n        defaultVariants: {\r\n            size: \"md\",\r\n            variant: \"default\",\r\n        },\r\n    }\r\n)\r\n\r\nexport interface AvatarProps\r\n    extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\r\n    VariantProps<typeof avatarVariants> {\r\n    src?: string\r\n    alt?: string\r\n    fallback?: React.ReactNode\r\n    state?: \"idle\" | \"loading\" | \"error\"\r\n    iconLoading?: React.ReactNode\r\n    iconError?: React.ReactNode\r\n}\r\n\r\nconst Avatar = React.forwardRef<\r\n    React.ComponentRef<typeof AvatarPrimitive.Root>,\r\n    AvatarProps\r\n>(({ className, src, alt, fallback, size, variant, state = \"idle\", iconLoading: propIconLoading, iconError: propIconError, ...props }, ref) => {\r\n    const config = useFyskConfig()\r\n\r\n    const isLoading = state === \"loading\"\r\n    const isError = state === \"error\"\r\n\r\n    const finalIconLoading = propIconLoading || config.icons?.loading\r\n    const finalIconError = propIconError || config.icons?.error\r\n\r\n    const getInitials = (name?: string) => {\r\n        if (!name) return \"FY\"\r\n        return name\r\n            .split(\" \")\r\n            .map((n) => n[0])\r\n            .join(\"\")\r\n            .toUpperCase()\r\n            .slice(0, 2)\r\n    }\r\n\r\n    return (\r\n        <AvatarPrimitive.Root\r\n            ref={ref}\r\n            className={cn(avatarVariants({ size, variant, className }))}\r\n            {...props}\r\n        >\r\n            <AvatarPrimitive.Image\r\n                src={src}\r\n                alt={alt}\r\n                className={cn(\"aspect-square h-full w-full object-cover grayscale-0 transition-all duration-300\", (isLoading || isError) && \"opacity-50 grayscale\")}\r\n            />\r\n            <AvatarPrimitive.Fallback\r\n                className=\"flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground font-medium\"\r\n            >\r\n                {fallback || getInitials(alt)}\r\n            </AvatarPrimitive.Fallback>\r\n\r\n            {isLoading && (\r\n                <div className=\"absolute inset-0 flex items-center justify-center bg-background/60 rounded-full backdrop-blur-xs text-primary\">\r\n                    <span className=\"[&_svg]:size-1/3 [&_svg]:shrink-0 flex items-center justify-center w-full h-full\">\r\n                        {finalIconLoading}\r\n                    </span>\r\n                </div>\r\n            )}\r\n\r\n            {isError && (\r\n                <div className=\"absolute inset-0 flex items-center justify-center bg-background/80 rounded-full backdrop-blur-xs text-destructive\">\r\n                    <span className=\"[&_svg]:size-1/3 [&_svg]:shrink-0 flex items-center justify-center w-full h-full\">\r\n                        {finalIconError}\r\n                    </span>\r\n                </div>\r\n            )}\r\n        </AvatarPrimitive.Root>\r\n    )\r\n})\r\nAvatar.displayName = AvatarPrimitive.Root.displayName\r\n\r\nexport { Avatar }"}]}