{
  "$schema": "https://ethereal-ui.saefulrohman.dev/schema/registry-item.json",
  "name": "announcement",
  "title": "Announcement",
  "type": "registry:primitives",
  "description": "A compact pill banner with a highlight badge and directional arrow for product launches and changelogs.",
  "dependencies": [
    "lucide-react"
  ],
  "usage": "import { Announcement } from \"@etherealui/react\"\n\nexport function AnnouncementDemo() {\n  return (\n    <Announcement\n      tag=\"New\"\n      title=\"Introducing 35+ light & dark mode components\"\n      href=\"/components/avatar\"\n    />\n  )\n}",
  "files": [
    {
      "path": "packages/ui/src/primitives/dialog.tsx",
      "target": "components/ui/announcement.tsx",
      "type": "registry:primitives",
      "content": "import * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { X, ChevronDown, ChevronRight, ArrowRight, ChevronLeft } from \"lucide-react\"\nimport { cn } from \"../utils/cn\"\n\nconst Dialog = DialogPrimitive.Root\nconst DialogTrigger = DialogPrimitive.Trigger\nconst DialogPortal = DialogPrimitive.Portal\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/50 backdrop-blur-xs transition-opacity\",\n      className\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-2xl border border-zinc-200 bg-white p-6 text-zinc-900 shadow-2xl focus:outline-none dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-lg p-1.5 text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-700 focus:outline-none dark:hover:bg-zinc-800 dark:hover:text-zinc-200 cursor-pointer\">\n        <X className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"flex flex-col space-y-1.5 text-left\", className)}\n    {...props}\n  />\n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 pt-3 border-t border-zinc-200 dark:border-zinc-800\",\n      className\n    )}\n    {...props}\n  />\n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\"text-base font-semibold leading-none tracking-tight text-zinc-900 dark:text-zinc-100\", className)}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed\", className)}\n    {...props}\n  />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\n// Accordion Primitive\nexport interface AccordionItemData {\n  id: string\n  title: string\n  content: string\n}\n\nexport const Accordion: React.FC<{\n  items: AccordionItemData[]\n  defaultOpenId?: string\n  className?: string\n}> = ({ items, defaultOpenId, className }) => {\n  const [openId, setOpenId] = React.useState<string | null>(\n    defaultOpenId ?? items[0]?.id ?? null\n  )\n  return (\n    <div\n      className={cn(\n        \"w-full divide-y divide-zinc-200 rounded-xl border border-zinc-200 bg-white dark:divide-zinc-800 dark:border-zinc-800 dark:bg-zinc-900\",\n        className\n      )}\n    >\n      {items.map((item) => {\n        const isOpen = openId === item.id\n        return (\n          <div key={item.id}>\n            <button\n              type=\"button\"\n              onClick={() => setOpenId(isOpen ? null : item.id)}\n              className=\"flex w-full items-center justify-between px-4 py-3.5 text-left text-xs font-medium text-zinc-900 hover:bg-zinc-50 dark:text-zinc-100 dark:hover:bg-zinc-800/50 cursor-pointer\"\n            >\n              <span>{item.title}</span>\n              <ChevronDown\n                className={cn(\n                  \"h-4 w-4 text-zinc-400 transition-transform\",\n                  isOpen && \"rotate-180\"\n                )}\n              />\n            </button>\n            {isOpen && (\n              <div className=\"px-4 pb-3.5 text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed\">\n                {item.content}\n              </div>\n            )}\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\n// Announcement Pill Primitive\nexport const Announcement: React.FC<{\n  tag?: string\n  title: string\n  href?: string\n  className?: string\n}> = ({ tag = \"New\", title, href = \"#\", className }) => (\n  <a\n    href={href}\n    className={cn(\n      \"inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white px-3 py-1 text-xs text-zinc-700 shadow-2xs transition-colors hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800\",\n      className\n    )}\n  >\n    <span className=\"rounded-full bg-blue-100 px-2 py-0.5 text-[10px] font-semibold text-blue-700 dark:bg-blue-500/20 dark:text-blue-300\">\n      {tag}\n    </span>\n    <span className=\"font-medium\">{title}</span>\n    <ArrowRight className=\"h-3 w-3 text-zinc-400\" />\n  </a>\n)\n\n// Breadcrumb Primitive\nexport const Breadcrumb: React.FC<{\n  items: Array<{ label: string; href?: string }>\n  className?: string\n}> = ({ items, className }) => (\n  <nav aria-label=\"Breadcrumb\" className={cn(\"flex items-center gap-1.5 text-xs\", className)}>\n    {items.map((item, idx) => {\n      const isLast = idx === items.length - 1\n      return (\n        <React.Fragment key={item.label}>\n          {idx > 0 && <ChevronRight className=\"h-3.5 w-3.5 text-zinc-400 shrink-0\" />}\n          {item.href && !isLast ? (\n            <a\n              href={item.href}\n              className=\"text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors\"\n            >\n              {item.label}\n            </a>\n          ) : (\n            <span className=\"font-medium text-zinc-900 dark:text-zinc-100\">\n              {item.label}\n            </span>\n          )}\n        </React.Fragment>\n      )\n    })}\n  </nav>\n)\n\n// Divider Primitive\nexport const Divider: React.FC<{ label?: string; className?: string }> = ({\n  label,\n  className,\n}) => {\n  if (!label) {\n    return <hr className={cn(\"border-t border-zinc-200 dark:border-zinc-800\", className)} />\n  }\n  return (\n    <div className={cn(\"relative flex items-center py-2\", className)}>\n      <div className=\"grow border-t border-zinc-200 dark:border-zinc-800\" />\n      <span className=\"mx-3 shrink text-[11px] font-medium text-zinc-400 uppercase tracking-wider\">\n        {label}\n      </span>\n      <div className=\"grow border-t border-zinc-200 dark:border-zinc-800\" />\n    </div>\n  )\n}\n\n// Pagination Primitive\nexport const Pagination: React.FC<{\n  totalPages?: number\n  initialPage?: number\n  className?: string\n}> = ({ totalPages = 5, initialPage = 1, className }) => {\n  const [page, setPage] = React.useState(initialPage)\n  return (\n    <div className={cn(\"inline-flex items-center gap-1\", className)}>\n      <button\n        type=\"button\"\n        disabled={page <= 1}\n        onClick={() => setPage((p) => Math.max(1, p - 1))}\n        className=\"inline-flex h-8 w-8 items-center justify-center rounded-lg border border-zinc-200 bg-white text-zinc-600 hover:bg-zinc-50 disabled:opacity-40 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800 cursor-pointer\"\n      >\n        <ChevronLeft className=\"h-3.5 w-3.5\" />\n      </button>\n      {Array.from({ length: totalPages }).map((_, idx) => {\n        const num = idx + 1\n        const active = num === page\n        return (\n          <button\n            key={num}\n            type=\"button\"\n            onClick={() => setPage(num)}\n            className={cn(\n              \"inline-flex h-8 w-8 items-center justify-center rounded-lg text-xs font-medium transition-colors cursor-pointer\",\n              active\n                ? \"bg-blue-600 text-white\"\n                : \"border border-zinc-200 bg-white text-zinc-600 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800\"\n            )}\n          >\n            {num}\n          </button>\n        )\n      })}\n      <button\n        type=\"button\"\n        disabled={page >= totalPages}\n        onClick={() => setPage((p) => Math.min(totalPages, p + 1))}\n        className=\"inline-flex h-8 w-8 items-center justify-center rounded-lg border border-zinc-200 bg-white text-zinc-600 hover:bg-zinc-50 disabled:opacity-40 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800 cursor-pointer\"\n      >\n        <ChevronRight className=\"h-3.5 w-3.5\" />\n      </button>\n    </div>\n  )\n}\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n"
    }
  ]
}