{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "announcement",
  "type": "registry:ui",
  "dependencies": [
    "class-variance-authority",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "announcement.tsx",
      "target": "components/ui/announcement.tsx",
      "type": "registry:ui",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst badgeTone = cva(\"\", {\n  variants: {\n    tone: {\n      live: \"bg-live text-on-accent\",\n      accent: \"bg-accent text-on-accent\",\n      \"accent-alt\": \"bg-accent-alt text-on-accent\",\n      success: \"bg-success text-on-accent\",\n      warning: \"bg-warning text-on-accent\",\n      danger: \"bg-danger text-on-accent\",\n    },\n  },\n  defaultVariants: { tone: \"live\" },\n});\n\nexport type AnnouncementTone = NonNullable<\n  VariantProps<typeof badgeTone>[\"tone\"]\n>;\n\ninterface AnnouncementOwnProps {\n  /** Text of the solid leading badge, e.g. \"NEW\". */\n  badge: React.ReactNode;\n  /** Color of the leading badge. Defaults to the live green. */\n  tone?: AnnouncementTone;\n  /** Render as a link. When set, a trailing arrow and hover glow appear. */\n  href?: string;\n}\n\nexport type AnnouncementProps = AnnouncementOwnProps &\n  Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"href\"> &\n  React.HTMLAttributes<HTMLElement>;\n\nexport const Announcement = React.forwardRef<HTMLElement, AnnouncementProps>(\n  ({ className, badge, tone = \"live\", href, children, ...props }, ref) => {\n    const interactive = href != null;\n    const shell = cn(\n      \"group inline-flex h-9 items-center gap-2.5 rounded-full border border-border bg-surface-2/60 pr-4 pl-1 text-sm text-muted\",\n      \"transition-control duration-base ease-soft motion-reduce:transition-none\",\n      \"hover:border-border-strong hover:text-ink hover:glow-accent\",\n      interactive && \"outline-none focus-visible:ring-focus\",\n      className,\n    );\n\n    const inner = (\n      <>\n        <span\n          className={cn(\n            \"inline-flex h-7 items-center rounded-full px-2.5 font-semibold text-[0.6875rem] uppercase leading-none tracking-[0.08em]\",\n            \"transition-control duration-base ease-soft group-hover:scale-[1.04] motion-reduce:transition-none motion-reduce:transform-none\",\n            badgeTone({ tone }),\n          )}\n        >\n          {badge}\n        </span>\n        <span className=\"truncate\">{children}</span>\n        {interactive ? (\n          <ArrowIcon className=\"text-muted transition-control duration-base ease-soft group-hover:translate-x-0.5 group-hover:text-ink motion-reduce:transition-none\" />\n        ) : null}\n      </>\n    );\n\n    if (interactive) {\n      return (\n        <a\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          href={href}\n          className={shell}\n          {...props}\n        >\n          {inner}\n        </a>\n      );\n    }\n\n    return (\n      <span\n        ref={ref as React.Ref<HTMLSpanElement>}\n        className={shell}\n        {...props}\n      >\n        {inner}\n      </span>\n    );\n  },\n);\nAnnouncement.displayName = \"Announcement\";\n\nfunction ArrowIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={1.5}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={cn(\"h-3.5 w-3.5 shrink-0\", className)}\n      aria-hidden=\"true\"\n    >\n      <path d=\"M6 3.5 10.5 8 6 12.5\" />\n    </svg>\n  );\n}\n"
    }
  ]
}