{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "native-badge-carbon",
  "type": "registry:component",
  "title": "Native Badge",
  "description": "Animated badge component with glass, glow, and outline variants for native feel.",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-carbon/src/components/native/native-badge-carbon.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { HTMLMotionProps, motion, MotionConfig } from \"framer-motion\";\nimport { Sparkles } from \"lucide-react\";\nimport React from \"react\";\n\nconst badgeVariants = cva(\n  \"inline-flex items-center rounded-full px-3 py-1 text-xs font-medium transition-[background-color,border-color,color,box-shadow,scale] duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border border-primary/20 bg-primary/10 text-primary hover:bg-primary/20 hover:border-primary/40 hover:shadow-[0_0_10px_color-mix(in_oklab,var(--primary)_10%,transparent)]\",\n        neutral:\n          \"border border-border/40 bg-card/50 text-muted-foreground backdrop-blur-sm hover:bg-card/80 hover:text-foreground hover:border-border/80\",\n        outline:\n          \"text-foreground border border-input bg-background/50 backdrop-blur-sm hover:bg-accent hover:text-accent-foreground\",\n        glass:\n          \"bg-white/10 dark:bg-black/10 backdrop-blur-md border border-white/20 dark:border-white/10 text-foreground shadow-sm hover:bg-white/20 dark:hover:bg-black/20\",\n        glow: \"bg-primary/10 text-primary border border-primary/20 shadow-[0_0_10px_color-mix(in_oklab,var(--primary)_20%,transparent)] hover:shadow-[0_0_20px_color-mix(in_oklab,var(--primary)_40%,transparent)] hover:bg-primary/20 motion-safe:hover:scale-[1.02]\",\n        animated:\n          \"group gap-2 tracking-widest uppercase border border-border/60 bg-card/70 text-muted-foreground backdrop-blur hover:border-primary/60 hover:bg-primary/15 hover:text-primary\",\n      },\n      size: {\n        sm: \"text-[10px] px-2 py-0.5\",\n        md: \"text-xs px-2.5 py-0.5\",\n        lg: \"text-sm px-3.5 py-1\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  }\n);\n\nexport interface NativeBadgeProps\n  extends Omit<HTMLMotionProps<\"div\">, \"ref\" | \"children\">,\n    VariantProps<typeof badgeVariants> {\n  /**\n   * Whether to animate the badge on mount.\n   * Default: true\n   */\n  animate?: boolean;\n  /**\n   * Optional label for the animated variant's secondary tag (e.g., \"new\", \"beta\").\n   * Only applies when variant=\"animated\".\n   */\n  tag?: string;\n  /**\n   * Optional icon for the animated variant. Defaults to Sparkles.\n   * Only applies when variant=\"animated\".\n   */\n  icon?: React.ReactNode;\n  /**\n   * Badge content.\n   */\n  children?: React.ReactNode;\n}\n\nfunction NativeBadge({\n  className,\n  variant,\n  size,\n  animate = true,\n  tag = \"new\",\n  icon,\n  children,\n  ...props\n}: NativeBadgeProps) {\n  const isAnimated = variant === \"animated\";\n  const IconElement = icon ?? <Sparkles className=\"h-3 w-3 text-primary\" />;\n\n  return (\n    <MotionConfig reducedMotion=\"user\">\n      <motion.div\n        initial={animate ? { opacity: 0, scale: 0.9 } : false}\n        animate={{ opacity: 1, scale: 1 }}\n        transition={{ type: \"spring\", stiffness: 260, damping: 20 }}\n        className={cn(badgeVariants({ variant, size }), className)}\n        {...props}\n      >\n        {isAnimated && (\n          <motion.span\n            animate={{ rotate: [0, 15, -15, 0], opacity: [0.6, 1, 0.6] }}\n            transition={{ duration: 2.2, repeat: Infinity, ease: \"easeInOut\" }}\n            className=\"inline-block\"\n            aria-hidden\n          >\n            {IconElement}\n          </motion.span>\n        )}\n        {children}\n        {isAnimated && tag && (\n          <span className=\"rounded-full border border-border/40 bg-white/5 px-2 py-0.5 text-[0.6rem] text-muted-foreground transition-colors duration-200 group-hover:border-primary/60 group-hover:bg-primary/25 group-hover:text-primary\">\n            {tag}\n          </span>\n        )}\n      </motion.div>\n    </MotionConfig>\n  );\n}\n\nexport { badgeVariants, NativeBadge };\n",
      "type": "registry:component",
      "target": "components/uitripled/native-badge-carbon.tsx"
    }
  ]
}