Aurora AI Suggestion

1"use client"
2 
3/**
4 * Aurora Suggestion — suggested next steps as a stack of selectable actions.
5 *
6 * Each option renders as a full-width Aurora `Button` (neutral lit-outline) with
7 * a cyan-tinted border + surface so the group reads as "pick one of these
8 * suggested paths". Visual values are ported 1:1 from the Claude Design source:
9 * 10px radius, `accent-primary 18%` border tint over the default border, an
10 * `accent-primary 4%` wash over the medium panel, left-aligned title + optional
11 * meta description + optional badge.
12 *
13 * Architecture stays shadcn: typed `SuggestionOption[]` API, `forwardRef`,
14 * `displayName`, `React.memo`, and the existing `onClick`/`disabled` escape
15 * hatches. Built on the Aurora `Button` (Radix `Slot`/cva) and `Badge`.
16 */
17 
18import * as React from "react"
19import { Lightbulb } from "lucide-react"
20import { cn } from "@/lib/utils"
21import { Badge } from "@/registry/aurora/ui/badge"
22import { Button } from "@/registry/aurora/ui/button"
23 
24export interface SuggestionOption {
25  id: string
26  title: string
27  description?: string
28  badge?: string
29}
30 
31export interface SuggestionProps
32  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClick"> {
33  options?: SuggestionOption[]
34  disabled?: boolean
35  onClick?: React.MouseEventHandler<HTMLButtonElement>
36}
37 
38const Suggestion = ({ ref, className, style, options, children, onClick, disabled, ...props }: SuggestionProps & { ref?: React.Ref<HTMLDivElement> }) => (
39    <div
40      ref={ref}
41      className={cn("grid gap-2", className)}
42      style={{ width: "100%", minWidth: 0, ...style }}
43      {...props}
44    >
45      {(
46        options ?? [
47          {
48            id: "default",
49            title: typeof children === "string" ? children : "Suggested Next Step",
50          },
51        ]
52      ).map((option) => (
53        <Button
54          key={option.id}
55          type="button"
56          variant="neutral"
57          disabled={disabled}
58          onClick={onClick}
59          iconLeft={<Lightbulb aria-hidden />}
60          className="h-auto min-w-0 justify-start whitespace-normal rounded-[10px] border px-3 py-3 text-left"
61          style={{
62            borderColor:
63              "color-mix(in srgb, var(--axon-orange) 24%, var(--aurora-border-default))",
64            background:
65              "color-mix(in srgb, var(--axon-orange) 6%, var(--aurora-panel-medium))",
66            color: "var(--aurora-text-primary)",
67          }}
68        >
69          <span className="grid min-w-0 gap-1">
70// … truncated