{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "native-verified-badge-shadcnui",
  "type": "registry:component",
  "title": "Native Verified Badge",
  "description": "Verified badge component with multiple variants, sizes, and styles including outline and shield designs.",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/native/native-verified-badge-shadcnui.tsx",
      "content": "\"use client\";\n\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\nimport type { ReactNode } from \"react\";\n\ntype BadgeVariant = \"default\" | \"blue\" | \"gold\" | \"green\" | \"black\";\ntype BadgeSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\";\n\ninterface VerifiedBadgeProps {\n  variant?: BadgeVariant;\n  size?: BadgeSize;\n  className?: string;\n  showLabel?: boolean;\n  label?: string;\n  icon?: ReactNode;\n  tooltip?: string;\n}\n\nconst sizeClasses: Record<\n  BadgeSize,\n  { container: string; icon: string; text: string }\n> = {\n  sm: { container: \"size-4\", icon: \"size-2\", text: \"text-xs\" },\n  md: { container: \"size-5\", icon: \"size-2.5\", text: \"text-sm\" },\n  lg: { container: \"size-6\", icon: \"size-3\", text: \"text-base\" },\n  xl: { container: \"size-7\", icon: \"size-4\", text: \"text-lg\" },\n  xxl: { container: \"size-8\", icon: \"size-5\", text: \"text-xl\" },\n};\n\nconst variantClasses: Record<\n  BadgeVariant,\n  { bg: string; icon: string; shine: string }\n> = {\n  default: {\n    bg: \"bg-foreground\",\n    icon: \"text-background\",\n    shine: \"from-transparent via-white/40 to-transparent\",\n  },\n  blue: {\n    bg: \"bg-blue-500\",\n    icon: \"text-white\",\n    shine: \"from-transparent via-white/50 to-transparent\",\n  },\n  gold: {\n    bg: \"bg-amber-500\",\n    icon: \"text-white\",\n    shine: \"from-transparent via-white/50 to-transparent\",\n  },\n  green: {\n    bg: \"bg-emerald-500\",\n    icon: \"text-white\",\n    shine: \"from-transparent via-white/50 to-transparent\",\n  },\n  black: {\n    bg: \"bg-black\",\n    icon: \"text-white\",\n    shine: \"from-transparent via-white/50 to-transparent\",\n  },\n};\n\nfunction CheckIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={className}\n    >\n      <polyline points=\"20 6 9 17 4 12\" />\n    </svg>\n  );\n}\n\nfunction BadgeTooltip({\n  children,\n  content,\n}: {\n  children: ReactNode;\n  content?: string;\n}) {\n  if (!content) return <>{children}</>;\n\n  return (\n    <TooltipProvider delayDuration={100}>\n      <Tooltip>\n        <TooltipTrigger asChild>{children}</TooltipTrigger>\n        <TooltipContent>\n          <p>{content}</p>\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n\nexport function VerifiedBadge({\n  variant = \"default\",\n  size = \"md\",\n  className,\n  showLabel = false,\n  label = \"Verified\",\n  icon,\n  tooltip,\n}: VerifiedBadgeProps) {\n  const { bg, icon: iconColor, shine } = variantClasses[variant];\n  const { container, icon: iconSize, text } = sizeClasses[size];\n\n  return (\n    <BadgeTooltip content={tooltip}>\n      <span className={cn(\"group inline-flex items-center gap-1.5\", className)}>\n        <span\n          className={cn(\n            \"relative flex items-center justify-center rounded-full overflow-hidden\",\n            bg,\n            container\n          )}\n        >\n          {/* Shine effect on hover */}\n          <span\n            className={cn(\n              \"absolute inset-0 -translate-x-full\",\n              \"bg-gradient-to-r\",\n              shine,\n              \"group-hover:translate-x-full\",\n              \"transition-transform duration-500 ease-out\"\n            )}\n          />\n\n          {icon ? (\n            <span\n              className={cn(\n                \"relative z-10 flex items-center justify-center\",\n                iconSize,\n                iconColor\n              )}\n            >\n              {icon}\n            </span>\n          ) : (\n            <CheckIcon className={cn(\"relative z-10\", iconSize, iconColor)} />\n          )}\n        </span>\n\n        {showLabel && (\n          <span className={cn(\"font-medium text-foreground\", text)}>\n            {label}\n          </span>\n        )}\n      </span>\n    </BadgeTooltip>\n  );\n}\n\nexport function VerifiedBadgeOutline({\n  variant = \"default\",\n  size = \"md\",\n  className,\n  icon,\n  tooltip,\n}: Omit<VerifiedBadgeProps, \"showLabel\" | \"label\">) {\n  const { container, icon: iconSize } = sizeClasses[size];\n\n  const colorClasses: Record<BadgeVariant, { stroke: string; text: string }> = {\n    default: {\n      stroke: \"stroke-foreground\",\n      text: \"text-foreground\",\n    },\n    blue: {\n      stroke: \"stroke-blue-500\",\n      text: \"text-blue-500\",\n    },\n    gold: {\n      stroke: \"stroke-amber-500\",\n      text: \"text-amber-500\",\n    },\n    green: {\n      stroke: \"stroke-emerald-500\",\n      text: \"text-emerald-500\",\n    },\n    black: {\n      stroke: \"stroke-black\",\n      text: \"text-black\",\n    },\n  };\n\n  const { stroke, text } = colorClasses[variant];\n\n  return (\n    <BadgeTooltip content={tooltip}>\n      <span\n        className={cn(\n          \"group relative inline-flex items-center justify-center\",\n          container,\n          className\n        )}\n      >\n        <svg viewBox=\"0 0 24 24\" className=\"absolute inset-0 size-full\">\n          <circle\n            cx=\"12\"\n            cy=\"12\"\n            r=\"10\"\n            fill=\"none\"\n            strokeWidth=\"2\"\n            className={cn(stroke, \"transition-opacity\")}\n          />\n          <circle\n            cx=\"12\"\n            cy=\"12\"\n            r=\"10\"\n            fill=\"none\"\n            strokeWidth=\"2\"\n            className={cn(\n              stroke,\n              \"opacity-0 group-hover:opacity-100\",\n              \"[stroke-dasharray:63] [stroke-dashoffset:63]\",\n              \"group-hover:[stroke-dashoffset:0]\",\n              \"transition-all duration-500 ease-out\"\n            )}\n          />\n        </svg>\n        {icon ? (\n          <span\n            className={cn(\n              \"relative z-10 flex items-center justify-center\",\n              iconSize,\n              text\n            )}\n          >\n            {icon}\n          </span>\n        ) : (\n          <CheckIcon className={cn(\"relative z-10\", iconSize, text)} />\n        )}\n      </span>\n    </BadgeTooltip>\n  );\n}\n\nexport function VerifiedShieldBadge({\n  variant = \"default\",\n  size = \"md\",\n  className,\n  icon,\n  tooltip,\n}: Omit<VerifiedBadgeProps, \"showLabel\" | \"label\">) {\n  const { bg, icon: iconColor } = variantClasses[variant];\n  const { icon: iconSize } = sizeClasses[size];\n\n  const sizeMap: Record<BadgeSize, string> = {\n    sm: \"size-5\",\n    md: \"size-6\",\n    lg: \"size-7\",\n    xl: \"size-8\",\n    xxl: \"size-9\",\n  };\n\n  return (\n    <BadgeTooltip content={tooltip}>\n      <span\n        className={cn(\n          \"group relative inline-flex items-center justify-center\",\n          className\n        )}\n      >\n        <svg viewBox=\"0 0 24 28\" className={sizeMap[size]}>\n          <defs>\n            <clipPath id={`shield-clip-${size}`}>\n              <path d=\"M12 1L2 5v8c0 5.55 4.27 10.74 10 12 5.73-1.26 10-6.45 10-12V5L12 1z\" />\n            </clipPath>\n          </defs>\n          {/* Shield background */}\n          <path\n            d=\"M12 1L2 5v8c0 5.55 4.27 10.74 10 12 5.73-1.26 10-6.45 10-12V5L12 1z\"\n            className={cn(bg.replace(\"bg-\", \"fill-\"))}\n          />\n          {/* Shine effect */}\n          <rect\n            x=\"-24\"\n            y=\"0\"\n            width=\"24\"\n            height=\"28\"\n            className={cn(\n              \"fill-white/30\",\n              \"group-hover:translate-x-48\",\n              \"transition-transform duration-500 ease-out\"\n            )}\n            clipPath={`url(#shield-clip-${size})`}\n          />\n        </svg>\n        {icon ? (\n          <span\n            className={cn(\n              \"absolute z-10 flex items-center justify-center\",\n              iconSize,\n              iconColor\n            )}\n          >\n            {icon}\n          </span>\n        ) : (\n          <CheckIcon className={cn(\"absolute z-10\", iconSize, iconColor)} />\n        )}\n      </span>\n    </BadgeTooltip>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/native-verified-badge-shadcnui.tsx"
    }
  ]
}