{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "aurora-ai-suggestion",
  "title": "Aurora AI Suggestion",
  "author": "jmagar <https://github.com/jmagar>",
  "description": "Aurora-native suggestion parity surface from AI Elements.",
  "dependencies": [
    "lucide-react@^0.487.0"
  ],
  "registryDependencies": [
    "@aurora/aurora-tokens",
    "@aurora/aurora-ai-elements"
  ],
  "files": [
    {
      "path": "registry/aurora/blocks/ai/elements/suggestion.tsx",
      "content": "\"use client\"\n\n/**\n * Aurora Suggestion — suggested next steps as a stack of selectable actions.\n *\n * Each option renders as a full-width Aurora `Button` (neutral lit-outline) with\n * a cyan-tinted border + surface so the group reads as \"pick one of these\n * suggested paths\". Visual values are ported 1:1 from the Claude Design source:\n * 10px radius, `accent-primary 18%` border tint over the default border, an\n * `accent-primary 4%` wash over the medium panel, left-aligned title + optional\n * meta description + optional badge.\n *\n * Architecture stays shadcn: typed `SuggestionOption[]` API, `forwardRef`,\n * `displayName`, `React.memo`, and the existing `onClick`/`disabled` escape\n * hatches. Built on the Aurora `Button` (Radix `Slot`/cva) and `Badge`.\n */\n\nimport * as React from \"react\"\nimport { Lightbulb } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/registry/aurora/ui/badge\"\nimport { Button } from \"@/registry/aurora/ui/button\"\n\nexport interface SuggestionOption {\n  id: string\n  title: string\n  description?: string\n  badge?: string\n}\n\nexport interface SuggestionProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onClick\"> {\n  options?: SuggestionOption[]\n  disabled?: boolean\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n}\n\nconst Suggestion = ({ ref, className, style, options, children, onClick, disabled, ...props }: SuggestionProps & { ref?: React.Ref<HTMLDivElement> }) => (\n    <div\n      ref={ref}\n      className={cn(\"grid gap-2\", className)}\n      style={{ width: \"100%\", minWidth: 0, ...style }}\n      {...props}\n    >\n      {(\n        options ?? [\n          {\n            id: \"default\",\n            title: typeof children === \"string\" ? children : \"Suggested Next Step\",\n          },\n        ]\n      ).map((option) => (\n        <Button\n          key={option.id}\n          type=\"button\"\n          variant=\"neutral\"\n          disabled={disabled}\n          onClick={onClick}\n          iconLeft={<Lightbulb aria-hidden />}\n          className=\"h-auto min-w-0 justify-start whitespace-normal rounded-[10px] border px-3 py-3 text-left\"\n          style={{\n            borderColor:\n              \"color-mix(in srgb, var(--axon-orange) 24%, var(--aurora-border-default))\",\n            background:\n              \"color-mix(in srgb, var(--axon-orange) 6%, var(--aurora-panel-medium))\",\n            color: \"var(--aurora-text-primary)\",\n          }}\n        >\n          <span className=\"grid min-w-0 gap-1\">\n            <span className=\"flex min-w-0 flex-wrap items-center gap-2\">\n              <span\n                className=\"aurora-text-control\"\n                style={{ color: \"var(--aurora-text-primary)\" }}\n              >\n                {option.title}\n              </span>\n              {option.badge ? <Badge tone=\"warn\" shape=\"tag\">{option.badge}</Badge> : null}\n            </span>\n            {option.description ? (\n              <span className=\"aurora-text-meta\" style={{ minWidth: 0 }}>\n                {option.description}\n              </span>\n            ) : null}\n          </span>\n        </Button>\n      ))}\n    </div>\n  )\nSuggestion.displayName = \"Suggestion\"\n\nconst MemoSuggestion = React.memo(Suggestion)\nMemoSuggestion.displayName = \"Suggestion\"\n\nexport { MemoSuggestion as Suggestion }\nexport default MemoSuggestion\n",
      "type": "registry:component",
      "target": "@components/aurora/ai/suggestion.tsx"
    }
  ],
  "meta": {
    "namespace": "@aurora",
    "style": "aurora",
    "family": "block",
    "requiresTokens": true,
    "sourcePath": "registry/aurora/blocks/ai/elements/suggestion.tsx",
    "installTarget": "@components/aurora/ai/suggestion.tsx",
    "taxonomy": "ai"
  },
  "docs": "Aurora block that expects `aurora-tokens` to be installed first.\n\nDefault install target: `@components/aurora/ai/suggestion.tsx`.\n\nRegistry dependencies: `aurora-tokens`, `aurora-ai-elements`.",
  "categories": [
    "aurora",
    "block",
    "ai"
  ],
  "type": "registry:block"
}