{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logo",
  "title": "Logo",
  "author": "Poyraz Avsever",
  "description": "Poyraz Soft Glass logo component.",
  "dependencies": [
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "@poyraz/poyraz-utils",
    "@poyraz/poyraz-theme"
  ],
  "files": [
    {
      "path": "registry/poyraz/ui/phase5/atoms/logo.tsx",
      "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst logoVariants = cva(\n  \"poyraz-logo group relative isolate inline-flex overflow-hidden outline-none transition-[opacity,transform] duration-[var(--poyraz-motion-duration-base)] ease-[var(--poyraz-motion-ease-out)] focus-visible:ring-[3px] focus-visible:ring-ring/25\",\n  {\n    variants: {\n      effect: {\n        none: \"\",\n        shine: \"poyraz-logo-shine\",\n        \"shine-loop\": \"poyraz-logo-shine poyraz-logo-shine-loop\",\n      },\n      radius: {\n        none: \"rounded-none\",\n        sm: \"rounded-sm\",\n        md: \"rounded-md\",\n        lg: \"rounded-lg\",\n        xl: \"rounded-xl\",\n        full: \"rounded-full\",\n      },\n      interactive: {\n        true: \"cursor-pointer hover:shadow-md active:scale-[0.99]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: { effect: \"shine\", radius: \"lg\", interactive: true },\n  },\n);\n\nexport interface LogoProps\n  extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof logoVariants> {\n  href?: string;\n  src?: string;\n  width?: number;\n  height?: number;\n  alt?: string;\n}\n\nfunction Logo({\n  alt = \"Poyraz Logo\",\n  className,\n  effect = \"shine\",\n  height = 48,\n  href,\n  interactive = true,\n  radius = \"lg\",\n  src = \"/logo/logo.jpeg\",\n  style,\n  width = 48,\n  ...props\n}: LogoProps) {\n  const sharedProps = {\n    \"data-effect\": effect,\n    \"data-radius\": radius,\n    \"data-slot\": \"logo\",\n    className: cn(logoVariants({ effect, radius, interactive }), className),\n    style: { width, height, ...style },\n  };\n\n  const mark = (\n    <img\n      data-slot=\"logo-image\"\n      src={src}\n      alt={alt}\n      width={width}\n      height={height}\n      className=\"relative z-0 h-full w-full object-cover\"\n    />\n  );\n\n  if (href) {\n    return (\n      <a href={href} {...sharedProps} {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}>\n        {mark}\n      </a>\n    );\n  }\n\n  return (\n    <span {...sharedProps} {...props}>\n      {mark}\n    </span>\n  );\n}\nLogo.displayName = \"Logo\";\n\nexport { Logo, logoVariants };\n",
      "type": "registry:ui",
      "target": "@ui/atoms/logo.tsx"
    }
  ],
  "css": {
    ".poyraz-logo-shine::after": {
      "content": "\"\"",
      "position": "absolute",
      "z-index": "1",
      "inset": "-55% auto -55% -45%",
      "width": "30%",
      "background": "linear-gradient(90deg, transparent, rgb(255 255 255 / 0.78), transparent)",
      "filter": "blur(1px)",
      "transform": "translateX(-180%) skewX(-18deg)",
      "pointer-events": "none"
    },
    ".poyraz-logo-shine:hover::after, .poyraz-logo-shine-loop::after": {
      "animation": "poyraz-logo-shine 1.15s var(--poyraz-motion-ease-out)"
    },
    "@keyframes poyraz-logo-shine": {
      "from": {
        "transform": "translateX(-180%) skewX(-18deg)"
      },
      "to": {
        "transform": "translateX(700%) skewX(-18deg)"
      }
    },
    "@media (prefers-reduced-motion: reduce)": {
      ".poyraz-logo-shine::after": {
        "animation": "none !important",
        "display": "none"
      }
    }
  },
  "meta": {
    "category": "phase-5-foundation",
    "phase": "beta"
  },
  "type": "registry:ui"
}