{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "decorated-text",
  "type": "registry:ui",
  "title": "Decorated Text",
  "description": "a decorative text frame with corner accents and a compact entrance effect.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [],
  "dependencies": ["motion", "clsx", "tailwind-merge"],
  "files": [
    {
      "type": "registry:ui",
      "path": "components/ui/decorated-text.tsx",
      "content": "import React from 'react';\nimport { motion } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\ninterface DecoratedTextProps {\n  text?: string;\n  children?: React.ReactNode;\n  className?: string;\n  bordered?: boolean;\n  showIcons?: boolean;\n  iconClassName?: string;\n  glowEffect?: boolean;\n  flicker?: boolean;\n}\n\nfunction DecoratedText({\n  text,\n  children,\n  className,\n  bordered = true,\n  showIcons = true,\n  iconClassName,\n  glowEffect = true,\n  flicker = true,\n}: DecoratedTextProps) {\n  const content = text || children;\n\n  return (\n    <motion.span\n      className={cn(\n        'group/decorated relative inline-block',\n        bordered && 'border border-black/20 dark:border-white/20',\n        className,\n      )}\n    >\n      {flicker && (\n        <motion.span\n          initial={{ opacity: 0 }}\n          animate={{ opacity: [0, 1, 0.4, 1, 0] }}\n          transition={{\n            duration: 0.45,\n            times: [0, 0.25, 0.5, 0.75, 1],\n            ease: 'easeOut',\n          }}\n          className='absolute inset-0 bg-black/10 dark:bg-white/10 pointer-events-none'\n        />\n      )}\n\n      <motion.span\n        initial={flicker ? { opacity: 0 } : false}\n        animate={flicker ? { opacity: [0, 1, 0.3, 1] } : { opacity: 1 }}\n        transition={\n          flicker\n            ? { duration: 1.5, ease: 'easeInOut', times: [0, 0.4, 0.65, 1] }\n            : undefined\n        }\n        className='relative z-10 inline-block leading-none'\n      >\n        {content}\n      </motion.span>\n\n      {showIcons && (\n        <>\n          <Icon\n            className={cn(\n              'absolute top-0 left-0 -translate-x-1/2 -translate-y-1/2 h-3 w-3 text-black dark:text-white',\n              iconClassName,\n            )}\n          />\n          <Icon\n            className={cn(\n              'absolute bottom-0 left-0 -translate-x-1/2 translate-y-1/2 h-3 w-3 text-black dark:text-white',\n              iconClassName,\n            )}\n          />\n          <Icon\n            className={cn(\n              'absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 h-3 w-3 text-black dark:text-white',\n              iconClassName,\n            )}\n          />\n          <Icon\n            className={cn(\n              'absolute bottom-0 right-0 translate-x-1/2 translate-y-1/2 h-3 w-3 text-black dark:text-white',\n              iconClassName,\n            )}\n          />\n        </>\n      )}\n\n      {glowEffect && (\n        <motion.span\n          className='absolute inset-0 bg-linear-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 opacity-0 blur-xl transition-opacity duration-500 rounded-sm group-hover/decorated:opacity-100 pointer-events-none'\n          initial={{ opacity: 0 }}\n          whileHover={{ opacity: 1 }}\n        />\n      )}\n    </motion.span>\n  );\n}\n\nfunction Icon({ className, ...props }: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      xmlns='http://www.w3.org/2000/svg'\n      fill='none'\n      viewBox='0 0 24 24'\n      strokeWidth='1.5'\n      stroke='currentColor'\n      className={className}\n      {...props}\n    >\n      <path strokeLinecap='round' strokeLinejoin='round' d='M12 6v12m6-6H6' />\n    </svg>\n  );\n}\n\nexport { DecoratedText };\n"
    },
    {
      "type": "registry:lib",
      "path": "lib/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}"
    }
  ]
}