{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inner-glow",
  "type": "registry:block",
  "title": "Inner glow",
  "description": "Inner glow",
  "files": [
    {
      "path": "components/usages/innerglowusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { InnerGlow } from \"@/registry/open-source/inner-glow\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<div className=\"grid relative mx-auto w-[300px] h-[300px] overflow-hidden bg-background rounded-md p-6 aspect-square place-items-center text-3xl font-medium\">\n\t\t\t\t<InnerGlow />\n\t\t\t\t<p>Inner Glow</p>\n\t\t\t</div>{\" \"}\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/innerglowusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { InnerGlow } from \"@/registry/open-source/inner-glow\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<div className=\"grid relative mx-auto w-[300px] h-[300px] overflow-hidden bg-background rounded-md p-6 aspect-square place-items-center text-3xl font-medium\">\n\t\t\t\t<InnerGlow />\n\t\t\t\t<p>Inner Glow</p>\n\t\t\t</div>{\" \"}\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/inner-glow.tsx",
      "content": "import { cn } from \"@/registry/utilities/cn\";\n\n// Credit:\n// https://starui.link/docs/components/inner-glow\n\n// add to scss file\n// @property --hue-rotation {\n//   syntax: \"<angle>\";\n//   initial-value: 0turn;\n//   inherits: false;\n// }\n\n// @theme {\n//   --animate-inner-glow: inner-glow 4s linear infinite;\n//   @keyframes inner-glow {\n//     from {\n//       --hue-rotation: 0turn;\n//     }\n//     to {\n//       --hue-rotation: 1turn;\n//     }\n//   }\n// }\ninterface InnerGlowProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nfunction InnerGlow({ className, ...props }: InnerGlowProps) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"absolute -inset-3 border-10 pointer-events-none blur-md [border-image:conic-gradient(from_var(--hue-rotation)_in_hsl_longer_hue,red-600,red-600)_1] animate-inner-glow\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { InnerGlow };\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}