{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "suggestion-banner",
  "title": "Suggestion Banner",
  "description": "An inline AI suggestion with apply and dismiss.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "components/spectrumui/blocks/ai-assistants/suggestion-banner.tsx",
      "content": "'use client';\n\nimport { useState } from 'react';\nimport { Check, Sparkles, X } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nconst KEYFRAMES = `\n@keyframes su-pop { 0% { opacity: 0; transform: scale(0.85) } 100% { opacity: 1; transform: none } }\n@keyframes su-msg-in { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }\n`;\n\nexport type SuggestionState = 'open' | 'applied' | 'dismissed';\n\nexport type SuggestionBannerVariant = 'Inline' | 'Floating';\n\nexport interface SuggestionBannerProps {\n  suggestion?: string;\n  detail?: string;\n  applyLabel?: string;\n  state?: SuggestionState;\n  onApply?: () => void;\n  onDismiss?: () => void;\n  variant?: SuggestionBannerVariant;\n  className?: string;\n}\n\nexport function SuggestionBanner({\n  suggestion = 'Flag Meridian Lines in the weekly carrier report',\n  detail = 'Based on the SLA breach found on the Rotterdam–Felixstowe lane.',\n  applyLabel = 'Apply',\n  state: stateProp,\n  onApply,\n  onDismiss,\n  variant = 'Inline',\n  className,\n}: SuggestionBannerProps) {\n  const [stateState, setStateState] = useState<SuggestionState>('open');\n  const state = stateProp !== undefined ? stateProp : stateState;\n\n  function apply() {\n    setStateState('applied');\n    onApply?.();\n  }\n  function dismiss() {\n    setStateState('dismissed');\n    onDismiss?.();\n  }\n\n  if (state === 'dismissed') return null;\n\n  if (state === 'applied') {\n    return (\n      <div\n        role=\"status\"\n        className={cn(\n          'flex w-fit items-center gap-2 rounded-full bg-emerald-500/10 px-3 py-1.5 text-[12.5px] font-medium text-emerald-700 motion-safe:animate-[su-msg-in_240ms_cubic-bezier(0.23,1,0.32,1)_both] dark:text-emerald-400',\n          className,\n        )}\n      >\n        <style dangerouslySetInnerHTML={{ __html: KEYFRAMES }} />\n        <Check className=\"size-3.5 motion-safe:animate-[su-pop_200ms_cubic-bezier(0.23,1,0.32,1)_both]\" strokeWidth={2.5} />\n        Applied — {suggestion.charAt(0).toLowerCase() + suggestion.slice(1)}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex w-full max-w-[480px] items-start gap-2.5 rounded-xl border border-black/[0.08] bg-white py-2.5 pl-3 pr-2 dark:border-white/[0.09] dark:bg-[#0B0B0D]',\n        variant === 'Floating' && 'shadow-lg',\n        className,\n      )}\n    >\n      <style dangerouslySetInnerHTML={{ __html: KEYFRAMES }} />\n      <Sparkles className=\"mt-0.5 size-3.5 shrink-0 text-neutral-400 dark:text-neutral-500\" />\n\n      <div className=\"min-w-0 flex-1\">\n        <p className=\"text-[12.5px] font-medium leading-snug text-neutral-900 dark:text-neutral-100\">\n          {suggestion}\n        </p>\n        {detail && (\n          <p className=\"mt-0.5 text-[11.5px] leading-[1.55] text-neutral-500 dark:text-neutral-400\">\n            {detail}\n          </p>\n        )}\n      </div>\n\n      <div className=\"flex shrink-0 items-center gap-1\">\n        <button\n          type=\"button\"\n          aria-label=\"Dismiss suggestion\"\n          onClick={dismiss}\n          className=\"grid size-7 place-items-center rounded-md text-neutral-400 transition-[color,background-color,transform] duration-150 hover:bg-black/[0.04] hover:text-neutral-700 active:scale-[0.9] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-400 dark:hover:bg-white/[0.06] dark:hover:text-neutral-200\"\n        >\n          <X className=\"size-3.5\" />\n        </button>\n        <button\n          type=\"button\"\n          onClick={apply}\n          className=\"rounded-lg bg-neutral-900 px-2.5 py-1.5 text-[12px] font-medium text-white transition-transform duration-[160ms] ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.96] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-400 dark:bg-neutral-100 dark:text-neutral-900\"\n        >\n          {applyLabel}\n        </button>\n      </div>\n    </div>\n  );\n}\n\nexport default SuggestionBanner;\n",
      "type": "registry:block",
      "target": "components/spectrumui/blocks/ai-assistants/suggestion-banner.tsx"
    }
  ],
  "type": "registry:block"
}