{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-decorator",
  "type": "registry:ui",
  "title": "Card Decorator",
  "description": "A Card Decorator component for displaying a card with a decorator.",
  "files": [
    {
      "path": "src/registry/ui/card-decorator.tsx",
      "type": "registry:ui",
      "content": "import { cn } from \"@/lib/utils\";\n\nexport type CardDecoratorVariant = \"brackets\" | \"dashed\" | \"dots\" | \"glow\";\n\nexport type CardDecoratorProps = React.ComponentProps<\"div\"> & {\n  /** `\"default\"` is accepted as an alias of `\"brackets\"`. */\n  variant?: CardDecoratorVariant | \"default\";\n  /** Corner size in px. */\n  size?: number;\n};\n\nconst corners = [\n  { position: \"top-0 left-0\", rotate: 0 },\n  { position: \"top-0 right-0\", rotate: 90 },\n  { position: \"bottom-0 right-0\", rotate: 180 },\n  { position: \"bottom-0 left-0\", rotate: 270 },\n] as const;\n\n// Dot opacities for a 3x3 corner pattern, drawn for the top-left corner and rotated for the others.\nconst dotPattern = [\n  [1, 1, 1],\n  [1, 0.6, 0.3],\n  [1, 0.3, 0],\n];\n\n/**\n * Decorative corner accents. Place inside a `relative` container.\n * Colored with `currentColor` (defaults to `text-primary`); override with a text color class.\n */\nexport function CardDecorator({\n  variant = \"brackets\",\n  size = 12,\n  className,\n  ...props\n}: CardDecoratorProps) {\n  const kind = variant === \"default\" ? \"brackets\" : variant;\n\n  return (\n    <div\n      data-slot=\"card-decorator\"\n      data-variant={kind}\n      aria-hidden\n      className={cn(\"pointer-events-none absolute -inset-px text-primary\", className)}\n      {...props}\n    >\n      {kind === \"dashed\" && (\n        <div className=\"absolute inset-0 rounded-[inherit] border border-dashed border-current opacity-50\" />\n      )}\n\n      {corners.map(({ position, rotate }) => (\n        <span\n          key={position}\n          className={cn(\"absolute block\", position)}\n          style={{ width: size, height: size, transform: `rotate(${rotate}deg)` }}\n        >\n          {kind === \"dots\" ? (\n            <span className=\"grid size-full grid-cols-3 gap-[15%]\">\n              {dotPattern.flat().map((opacity, i) => (\n                <span\n                  key={i}\n                  className=\"rounded-full bg-current\"\n                  style={{ opacity }}\n                />\n              ))}\n            </span>\n          ) : (\n            <span\n              className={cn(\n                \"block size-full border-t-2 border-l-2 border-current\",\n                kind === \"glow\" &&\n                  \"drop-shadow-[0_0_4px_currentColor]\"\n              )}\n            />\n          )}\n        </span>\n      ))}\n    </div>\n  );\n}\n"
    }
  ]
}