{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"sources","type":"registry:ui","title":"Sources","description":"Tailark Base UI Sources component","registryDependencies":["@tailark/core-utils","@tailark/hover-card"],"files":[{"path":"ui/sources.tsx","type":"registry:ui","target":"@ui/sources.tsx","content":"'use client'\n\nimport Image from 'next/image'\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'\nimport { cn } from '@/lib/utils'\nimport { createContext, useContext, useMemo, type ReactNode } from 'react'\n\nconst SourceContext = createContext<{\n    href: string\n    domain: string\n} | null>(null)\n\nfunction useSourceContext() {\n    const ctx = useContext(SourceContext)\n    if (!ctx) throw new Error('Source.* must be used inside <Source>')\n    return ctx\n}\n\nexport type SourceProps = {\n    href: string\n    children: ReactNode\n}\n\nexport function Source({ href, children }: SourceProps) {\n    let domain = ''\n    try {\n        domain = new URL(href).hostname\n    } catch {\n        domain = href.split('/').pop() || href\n    }\n    const contextValue = useMemo(() => ({ href, domain }), [href, domain])\n\n    return (\n        <SourceContext.Provider value={contextValue}>\n            <HoverCard>{children}</HoverCard>\n        </SourceContext.Provider>\n    )\n}\n\nexport type SourceTriggerProps = {\n    label?: string | number\n    showFavicon?: boolean\n    className?: string\n}\n\nexport function SourceTrigger({ label, showFavicon = false, className }: SourceTriggerProps) {\n    const { href, domain } = useSourceContext()\n    const labelToShow = label ?? domain.replace('www.', '')\n\n    return (\n        <HoverCardTrigger\n            delay={150}\n            closeDelay={0}\n            render={\n                <a\n                    href={href}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    className={cn(\n                        'bg-muted text-muted-foreground hover:bg-foreground/5 hover:text-primary inline-flex h-6 max-w-32 items-center gap-1 overflow-hidden rounded-full py-0 text-xs leading-none no-underline transition-colors duration-150',\n                        showFavicon ? 'pl-1 pr-2' : 'px-1',\n                        className\n                    )}>\n                    {showFavicon ? (\n                        <Image\n                            src={`https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(href)}`}\n                            alt=\"favicon\"\n                            width={14}\n                            height={14}\n                            className=\"size-3.5\"\n                        />\n                    ) : null}\n                    <span className=\"truncate text-center font-normal\">{labelToShow}</span>\n                </a>\n            }\n        />\n    )\n}\n\nexport type SourceContentProps = {\n    title: string\n    description: string\n    className?: string\n}\n\nexport function SourceContent({ title, description, className }: SourceContentProps) {\n    const { href, domain } = useSourceContext()\n\n    return (\n        <HoverCardContent className={cn('ring-border-illustration w-80 rounded-lg border-transparent p-0 shadow-lg ring-1', className)}>\n            <a\n                href={href}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"flex flex-col gap-2 p-3\">\n                <div className=\"flex items-center gap-1.5\">\n                    <Image\n                        src={`https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(href)}`}\n                        alt=\"favicon\"\n                        className=\"size-4\"\n                        width={16}\n                        height={16}\n                    />\n                    <div className=\"text-primary truncate text-sm\">{domain.replace('www.', '')}</div>\n                </div>\n                <div className=\"text-foreground line-clamp-2 text-sm font-medium\">{title}</div>\n                <div className=\"text-muted-foreground line-clamp-2 text-sm\">{description}</div>\n            </a>\n        </HoverCardContent>\n    )\n}\n"}]}