@adres/mgda-ui 0.0.0-stage → 0.0.2

package/src/components/email-chips-input.tsx

@@ -0,0 +1,210 @@
+"use client"
+
+import * as React from "react"
+import { X } from "lucide-react"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip"
+import { cn } from "../lib/cn"
+
+function isValidEmail(email: string): boolean {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
+}
+
+// Splits a pasted blob into candidate addresses. Handles the shapes users
+// realistically paste: comma-, semicolon-, newline-, tab-, or whitespace-
+// separated lists (incl. mixed). Empty fragments are filtered out by callers.
+const SPLIT_RE = /[\s,;]+/
+
+export type EmailChipsInputVariant = "default" | "primary" | "destructive"
+
+export interface EmailChip {
+  value: string
+  valid: boolean
+}
+
+export interface EmailChipsInputProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  chips: EmailChip[]
+  onChange: (chips: EmailChip[]) => void
+  placeholder?: string
+  /** Fired when the user tries to add an address that's already in the
+   *  list. Useful for surfacing a non-blocking warning toast. */
+  onDuplicate?: () => void
+  /** Tone applied to valid chips. `default` is neutral, `primary` tints
+   *  brand, `destructive` tints destructive. Invalid chips always render in
+   *  destructive regardless of variant - the error signal stays distinct. */
+  variant?: EmailChipsInputVariant
+  /** Disables the input and chip-removal buttons. */
+  disabled?: boolean
+  /** Tints the wrapper border destructive and sets `aria-invalid` on the
+   *  inner input. Consumer-controlled - independent of per-chip validity. */
+  invalid?: boolean
+  /** id for the inner <input>, so a sibling <Label htmlFor> binds correctly. */
+  id?: string
+}
+
+// Valid-chip tint per variant. Invalid chips bypass this map and always
+// render in the destructive treatment so the error reads unambiguously.
+const VARIANT_VALID_CLASS: Record<EmailChipsInputVariant, string> = {
+  default:     "ax:bg-muted ax:dark:bg-neutral ax:text-foreground ax:dark:text-neutral-muted",
+  primary:     "ax:bg-primary-weakest ax:dark:bg-primary-strong ax:text-primary-foreground ax:dark:text-primary-muted",
+  destructive: "ax:bg-destructive-weakest ax:dark:bg-destructive-strong ax:text-destructive-foreground ax:dark:text-destructive-muted",
+}
+
+/** Multi-email input that turns each accepted entry into a chip. Adds on
+ *  `Enter` or `,`. Backspace on an empty input removes the last chip.
+ *  Pasting a `, ; \n \t`-separated list adds each address as a chip.
+ *
+ *  Validation is local (regex-based) and non-blocking: invalid chips
+ *  render in a destructive tint with a tooltip explaining why. Consumers
+ *  filter `chip.valid` before submitting. */
+export const EmailChipsInput = React.forwardRef<HTMLDivElement, EmailChipsInputProps>(
+  (
+    {
+      chips,
+      onChange,
+      placeholder = "Enter email and press Enter…",
+      onDuplicate,
+      variant = "default",
+      disabled = false,
+      invalid = false,
+      id,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [input, setInput] = React.useState("")
+    const inputRef = React.useRef<HTMLInputElement>(null)
+
+    function addChip(raw: string) {
+      const value = raw.trim().toLowerCase()
+      if (!value) return
+      if (chips.some((c) => c.value === value)) {
+        onDuplicate?.()
+        setInput("")
+        return
+      }
+      onChange([...chips, { value, valid: isValidEmail(value) }])
+      setInput("")
+    }
+
+    // Multi-add for paste: split, de-dupe against current chips AND against
+    // earlier entries in the same paste, then emit a single onChange update.
+    function addMany(raws: string[]) {
+      const next: EmailChip[] = [...chips]
+      const seen = new Set(chips.map((c) => c.value))
+      let duped = false
+
+      for (const raw of raws) {
+        const value = raw.trim().toLowerCase()
+        if (!value) continue
+        if (seen.has(value)) { duped = true; continue }
+        seen.add(value)
+        next.push({ value, valid: isValidEmail(value) })
+      }
+
+      if (next.length !== chips.length) onChange(next)
+      if (duped) onDuplicate?.()
+      setInput("")
+    }
+
+    function removeChip(index: number) {
+      if (disabled) return
+      onChange(chips.filter((_, i) => i !== index))
+    }
+
+    function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+      if (e.key === "Enter" || e.key === ",") {
+        e.preventDefault()
+        addChip(input)
+      } else if (e.key === "Backspace" && !input && chips.length > 0) {
+        removeChip(chips.length - 1)
+      }
+    }
+
+    function handlePaste(e: React.ClipboardEvent<HTMLInputElement>) {
+      const pasted = e.clipboardData.getData("text")
+      if (!pasted) return
+      // Only intercept if the paste looks list-shaped: single-address
+      // pastes still go through the native flow + Enter/blur.
+      if (SPLIT_RE.test(pasted)) {
+        e.preventDefault()
+        // Include any partial input the user already typed before pasting.
+        const combined = input ? [input, pasted].join(" ") : pasted
+        addMany(combined.split(SPLIT_RE))
+      }
+    }
+
+    return (
+      <TooltipProvider>
+        <div
+          ref={ref}
+          className={cn(
+            "ax:min-h-3xl ax:flex ax:flex-wrap ax:gap-xs ax:p-xs",
+            "ax:rounded-(--input-radius) ax:border ax:border-input ax:bg-background",
+            "ax:focus-within:ring-2 ax:focus-within:ring-ring ax:focus-within:ring-offset-0",
+            "ax:cursor-text",
+            invalid && "ax:border-destructive ax:focus-within:ring-destructive",
+            disabled && "ax:opacity-60 ax:cursor-not-allowed ax:bg-muted/30",
+            className,
+          )}
+          onClick={() => !disabled && inputRef.current?.focus()}
+          {...props}
+        >
+          {chips.map((chip, i) => (
+            <Tooltip key={`${chip.value}-${i}`}>
+              <TooltipTrigger asChild>
+                <span
+                  className={cn(
+                    "ax:inline-flex ax:items-center ax:gap-1 ax:px-xs ax:py-2xs ax:rounded-badge",
+                    "ax:t-label-sm ax:max-w-50",
+                    chip.valid
+                      ? VARIANT_VALID_CLASS[variant]
+                      : "ax:bg-destructive-weakest ax:dark:bg-destructive-strong ax:text-destructive-foreground ax:dark:text-destructive-muted",
+                  )}
+                >
+                  <span className="ax:truncate">{chip.value}</span>
+                  <button
+                    type="button"
+                    disabled={disabled}
+                    onClick={(e) => { e.stopPropagation(); removeChip(i) }}
+                    className={cn(
+                      "ax:shrink-0 ax:rounded-full ax:hover:bg-foreground/10",
+                      "ax:focus-visible:outline-none ax:focus-visible:ring-1 ax:focus-visible:ring-ring",
+                      "ax:disabled:pointer-events-none",
+                    )}
+                    aria-label={`Remove ${chip.value}`}
+                  >
+                    <X className="ax:size-3" />
+                  </button>
+                </span>
+              </TooltipTrigger>
+              {!chip.valid && (
+                <TooltipContent side="top">Invalid email address</TooltipContent>
+              )}
+            </Tooltip>
+          ))}
+
+          <input
+            ref={inputRef}
+            id={id}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onPaste={handlePaste}
+            onBlur={() => { if (input.trim()) addChip(input) }}
+            disabled={disabled}
+            aria-invalid={invalid || undefined}
+            placeholder={chips.length === 0 ? placeholder : ""}
+            className={cn(
+              "ax:flex-1 ax:min-w-40 ax:bg-transparent ax:outline-none",
+              "ax:t-body-sm ax:text-foreground ax:placeholder:text-muted-foreground",
+              "ax:disabled:cursor-not-allowed",
+            )}
+          />
+        </div>
+      </TooltipProvider>
+    )
+  },
+)
+EmailChipsInput.displayName = "EmailChipsInput"

package/src/components/empty-state.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { FolderOpen } from "lucide-react"
+import { Button } from "./button"
+import { EmptyState } from "./empty-state"
+
+const meta: Meta<typeof EmptyState> = {
+  title: "Components/EmptyState",
+  component: EmptyState,
+  tags: ["autodocs"],
+  args: {
+    icon: <FolderOpen className="ax:size-6" />,
+    title: "No projects yet",
+    description: "Create your first project to get started.",
+    action: <Button>Create project</Button>,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof EmptyState>
+
+export const Default: Story = {}

package/src/components/empty-state.tsx

@@ -0,0 +1,35 @@
+import * as React from "react"
+import { cn } from "../lib/cn"
+
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  icon?: React.ReactNode
+  title: string
+  description?: string
+  action?: React.ReactNode
+}
+
+export function EmptyState({ className, icon, title, description, action, ...props }: EmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        "ax:flex ax:flex-col ax:items-center ax:justify-center ax:text-center",
+        "ax:py-5xl ax:px-xl ax:gap-md",
+        className
+      )}
+      {...props}
+    >
+      {icon && (
+        <div className="ax:size-4xl ax:rounded-full ax:bg-muted ax:flex ax:items-center ax:justify-center ax:text-muted-foreground">
+          {icon}
+        </div>
+      )}
+      <div className="ax:space-y-1.5 ax:max-w-md">
+        <h3 className="ax:t-h5 ax:text-foreground">{title}</h3>
+        {description && (
+          <p className="ax:t-body-sm ax:text-muted-foreground">{description}</p>
+        )}
+      </div>
+      {action && <div>{action}</div>}
+    </div>
+  )
+}

package/src/components/entity-header.stories.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { EntityHeader } from "./entity-header"
+import { DataList, DataListItem, DataListLabel, DataListValue } from "./data-list"
+import { Button } from "./button"
+
+const DETAILS = [
+  { label: "Trade licence", value: "2120561384412A" },
+  { label: "Brokerage licence", value: "8812612491127" },
+  { label: "Licence expiry", value: "15 May 2028" },
+  { label: "Phone", value: "00 1098231807" },
+]
+
+const details = (
+  <DataList orientation="grid" columns={4} size="sm">
+    {DETAILS.map((detail) => (
+      <DataListItem key={detail.label}>
+        <DataListLabel>{detail.label}</DataListLabel>
+        <DataListValue>{detail.value}</DataListValue>
+      </DataListItem>
+    ))}
+  </DataList>
+)
+
+const meta: Meta<typeof EntityHeader> = {
+  title: "Components/EntityHeader",
+  component: EntityHeader,
+  tags: ["autodocs"],
+  args: { name: "Remax RealEstate", subtitle: "Remax Real Estate Brokerage L.L.C." },
+}
+
+export default meta
+type Story = StoryObj<typeof EntityHeader>
+
+export const Default: Story = {}
+
+export const WithDetails: Story = { args: { details } }
+
+export const WithActions: Story = {
+  args: { details, actions: <><Button variant="outline" size="sm">Edit details</Button><Button size="sm">Contact</Button></> },
+}
+
+export const Medium: Story = { args: { size: "md", name: "Omar Khalifa Real Estate", subtitle: "CN-1907642" } }

package/src/components/entity-header.test.tsx

@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest"
+import * as React from "react"
+import { renderToStaticMarkup } from "react-dom/server"
+import { EntityHeader, entityInitials } from "./entity-header"
+
+describe("entityInitials", () => {
+  it("takes the first letter of the first two words", () => {
+    expect(entityInitials("Remax RealEstate")).toBe("RR")
+    expect(entityInitials("  omar khalifa real estate ")).toBe("OK")
+    expect(entityInitials("Aldar")).toBe("A")
+  })
+})
+
+describe("EntityHeader", () => {
+  it("renders the name as a heading at the chosen level", () => {
+    expect(renderToStaticMarkup(<EntityHeader name="Remax RealEstate" />)).toMatch(/<h2[^>]*>Remax RealEstate<\/h2>/)
+    expect(renderToStaticMarkup(<EntityHeader name="Remax RealEstate" as="h1" />)).toMatch(/<h1[^>]*>Remax RealEstate<\/h1>/)
+  })
+
+  it("shows decorative initials without a logo, and the logo with its alt text when given", () => {
+    const initials = renderToStaticMarkup(<EntityHeader name="Remax RealEstate" />)
+    expect(initials).toMatch(/aria-hidden="true"[^>]*>RR</)
+    const logo = renderToStaticMarkup(<EntityHeader name="Remax RealEstate" logo={{ src: "/remax.webp", alt: "Remax logo" }} />)
+    expect(logo).toContain('alt="Remax logo"')
+    expect(logo).not.toContain(">RR<")
+  })
+
+  it("renders the details and actions slots only when provided", () => {
+    const aside = "ax:flex ax:min-w-0 ax:flex-col ax:gap-md ax:lg:items-end"
+    expect(renderToStaticMarkup(<EntityHeader name="A" />)).not.toContain(aside)
+    const withDetails = renderToStaticMarkup(<EntityHeader name="A" details={<span>Licence</span>} />)
+    expect(withDetails).toContain(aside)
+    expect(withDetails).toContain("Licence")
+  })
+})

package/src/components/entity-header.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+import { tv, type VariantProps } from "tailwind-variants"
+import { Heading, type HeadingAs, type HeadingSize } from "./heading"
+import { cn } from "../lib/cn"
+
+export type EntityHeaderSize = "md" | "lg"
+
+/** Up to two initials from the name's first words, e.g. "Remax RealEstate" -> "RR". */
+export function entityInitials(name: string) {
+  return name
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((word) => word.charAt(0).toUpperCase())
+    .join("")
+}
+
+export const entityHeaderVariants = tv({
+  slots: {
+    root: "ax:flex ax:flex-col ax:gap-lg ax:lg:flex-row ax:lg:items-end ax:lg:justify-between",
+    identity: "ax:flex ax:min-w-0 ax:items-center ax:gap-md",
+    mark: "ax:flex ax:shrink-0 ax:items-center ax:justify-center ax:overflow-hidden ax:rounded-md ax:bg-primary-weaker ax:font-bold ax:text-primary-foreground ax:dark:bg-primary-strong ax:dark:text-primary-weaker",
+    text: "ax:flex ax:min-w-0 ax:flex-col",
+    subtitle: "ax:t-caption ax:text-muted-foreground",
+    aside: "ax:flex ax:min-w-0 ax:flex-col ax:gap-md ax:lg:items-end",
+  },
+  variants: {
+    size: {
+      md: { mark: "ax:size-12 ax:t-body-lg" },
+      lg: { mark: "ax:size-14 ax:t-body-xl" },
+    },
+  },
+  defaultVariants: { size: "lg" },
+}, { twMerge: false })
+
+const NAME_SIZE: Record<EntityHeaderSize, HeadingSize> = { md: "h3", lg: "h2" }
+
+export interface EntityHeaderProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">,
+    VariantProps<typeof entityHeaderVariants> {
+  /** Organisation, company or property name. */
+  name: string
+  /** Secondary line, e.g. the legal name or a registration number. */
+  subtitle?: React.ReactNode
+  /** Logo image. Without it the mark shows initials from `name`. */
+  logo?: { src: string; alt: string }
+  /** Heading level for the name. Defaults to `h2`. */
+  as?: HeadingAs
+  /** Key facts beside the identity, typically `<DataList orientation="grid">`. */
+  details?: React.ReactNode
+  /** Actions such as Edit or Contact, aligned with the details. */
+  actions?: React.ReactNode
+}
+
+/**
+ * EntityHeader - the identity block for an organisation, brokerage or
+ * property: a logo (or initials) mark, the name as a heading, a secondary
+ * line, and slots for key details and actions. Stacks on small screens and
+ * sits in a row, bottom-aligned, from `lg` up.
+ *
+ * @example
+ *   <EntityHeader
+ *     name="Remax RealEstate"
+ *     subtitle="Remax Real Estate Brokerage L.L.C."
+ *     details={<DataList orientation="grid" columns={4} size="sm">…</DataList>}
+ *   />
+ */
+export const EntityHeader = React.forwardRef<HTMLDivElement, EntityHeaderProps>(
+  ({ className, name, subtitle, logo, as = "h2", size, details, actions, ...props }, ref) => {
+    const styles = entityHeaderVariants({ size })
+    return (
+      <div ref={ref} data-slot="entity-header" className={cn(styles.root(), className)} {...props}>
+        <div className={styles.identity()}>
+          <span className={styles.mark()} aria-hidden={logo ? undefined : true}>
+            {logo ? <img src={logo.src} alt={logo.alt} className="ax:size-full ax:object-contain" /> : entityInitials(name)}
+          </span>
+          <div className={styles.text()}>
+            <Heading as={as} size={NAME_SIZE[size ?? "lg"]} truncate>{name}</Heading>
+            {subtitle && <p className={styles.subtitle()}>{subtitle}</p>}
+          </div>
+        </div>
+        {(details || actions) && (
+          <div className={styles.aside()}>
+            {details}
+            {actions && <div className="ax:flex ax:flex-wrap ax:gap-xs">{actions}</div>}
+          </div>
+        )}
+      </div>
+    )
+  },
+)
+EntityHeader.displayName = "EntityHeader"

package/src/components/feature-grid.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Sparkles, Shield, Zap } from "lucide-react"
+import { FeatureGrid } from "./feature-grid"
+
+const meta: Meta<typeof FeatureGrid> = {
+  title: "Components/FeatureGrid",
+  component: FeatureGrid,
+  tags: ["autodocs"],
+  args: {
+    eyebrow: "Features",
+    title: "Everything you need to ship faster",
+    description: "Composable primitives with brand-aware styling.",
+    features: [
+      { icon: <Zap className="ax:size-5" />, title: "Fast", description: "Optimized for performance." },
+      { icon: <Shield className="ax:size-5" />, title: "Accessible", description: "Built on Radix primitives." },
+      { icon: <Sparkles className="ax:size-5" />, title: "Beautiful", description: "Polished defaults out of the box." },
+    ],
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof FeatureGrid>
+
+export const Default: Story = {}

package/src/components/feature-grid.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from "react"
+import { motion } from "motion/react"
+import { cn } from "../lib/cn"
+import { useReducedMotion } from "../hooks/use-reduced-motion"
+import { stagger, variants, viewport as defaultViewport } from "../lib/motion"
+
+export interface Feature {
+  icon?: React.ReactNode
+  title: React.ReactNode
+  description: React.ReactNode
+}
+
+export interface FeatureGridProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: React.ReactNode
+  title?: React.ReactNode
+  description?: React.ReactNode
+  features: Feature[]
+  /** Number of columns at the largest breakpoint. Default 3. */
+  columns?: 2 | 3 | 4
+}
+
+/**
+ * FeatureGrid - marketing feature showcase.
+ * Mobile-first: 1 column. Tablet: 2. Desktop: 3 (or 2/4 via prop).
+ */
+export const FeatureGrid = React.forwardRef<HTMLElement, FeatureGridProps>(
+  ({ className, eyebrow, title, description, features, columns = 3, ...props }, ref) => {
+    const reduce = useReducedMotion()
+
+    const colClass =
+      columns === 2 ? "ax:md:grid-cols-2" : columns === 4 ? "ax:md:grid-cols-2 ax:lg:grid-cols-4" : "ax:md:grid-cols-2 ax:lg:grid-cols-3"
+
+    return (
+      <section ref={ref} className={cn("ax:w-full ax:px-xl ax:md:px-3xl ax:py-5xl ax:md:py-6xl", className)} {...props}>
+        <div className="ax:mx-auto ax:max-w-420">
+          {(eyebrow || title || description) && (
+            <div className="ax:max-w-3xl ax:mb-4xl ax:md:mb-5xl">
+              {eyebrow && (
+                <span className="ax:inline-block ax:t-overline ax:text-primary ax:mb-sm">
+                  {eyebrow}
+                </span>
+              )}
+              {title && (
+                <h2 className="ax:t-display-md ax:md:t-display-lg ax:text-foreground ax:[text-wrap:balance]">
+                  {title}
+                </h2>
+              )}
+              {description && (
+                <p className="ax:mt-md ax:t-body-md ax:md:t-body-lg ax:text-muted-foreground ax:[text-wrap:pretty]">
+                  {description}
+                </p>
+              )}
+            </div>
+          )}
+          <motion.ul
+            className={cn("ax:grid ax:grid-cols-1 ax:gap-x-2xl ax:gap-y-3xl", colClass)}
+            {...(reduce ? {} : {
+              variants: stagger(),
+              initial: "hidden",
+              whileInView: "visible",
+              viewport: defaultViewport,
+            })}
+          >
+            {features.map((feature, i) => (
+              <motion.li
+                key={i}
+                {...(reduce ? {} : { variants: variants.fadeUp })}
+                className="ax:flex ax:flex-col ax:gap-sm"
+              >
+                {feature.icon && (
+                  <div className="ax:size-3xl ax:rounded-md ax:bg-primary/10 ax:text-primary ax:flex ax:items-center ax:justify-center ax:[&>svg]:size-5">
+                    {feature.icon}
+                  </div>
+                )}
+                <h3 className="ax:t-h3 ax:text-foreground">{feature.title}</h3>
+                <p className="ax:t-body-sm ax:text-muted-foreground">{feature.description}</p>
+              </motion.li>
+            ))}
+          </motion.ul>
+        </div>
+      </section>
+    )
+  }
+)
+FeatureGrid.displayName = "FeatureGrid"

package/src/components/feedback-bar.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Sparkles } from "lucide-react"
+import { FeedbackBar } from "./feedback-bar"
+
+const meta: Meta<typeof FeedbackBar> = {
+  title: "Components/FeedbackBar",
+  component: FeedbackBar,
+  tags: ["autodocs"],
+  args: {
+    title: "Was this helpful?",
+    onHelpful: () => undefined,
+    onNotHelpful: () => undefined,
+    onClose: () => undefined,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof FeedbackBar>
+
+export const Default: Story = {}
+
+export const WithIcon: Story = { args: { icon: <Sparkles /> } }
+
+export const WithoutClose: Story = { args: { onClose: undefined } }

package/src/components/feedback-bar.test.tsx

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest"
+import * as React from "react"
+import { renderToStaticMarkup } from "react-dom/server"
+import { FeedbackBar } from "./feedback-bar"
+
+describe("FeedbackBar", () => {
+  it("names the group by its title and labels both ratings", () => {
+    const html = renderToStaticMarkup(<FeedbackBar title="Was this helpful?" />)
+    expect(html).toContain('role="group"')
+    expect(html).toContain('aria-label="Was this helpful?"')
+    expect(html).toContain('aria-label="Helpful"')
+    expect(html).toContain('aria-label="Not helpful"')
+  })
+
+  it("shows the close button only when onClose is passed", () => {
+    expect(renderToStaticMarkup(<FeedbackBar title="Was this helpful?" />)).not.toContain('aria-label="Close"')
+    expect(renderToStaticMarkup(<FeedbackBar title="Was this helpful?" onClose={() => undefined} />)).toContain('aria-label="Close"')
+  })
+
+  it("hides the decorative icon from assistive tech", () => {
+    const html = renderToStaticMarkup(<FeedbackBar title="Was this helpful?" icon={<svg data-testid="logo" />} />)
+    expect(html).toMatch(/<span[^>]*aria-hidden="true"[^>]*><svg data-testid="logo"/)
+  })
+})

package/src/components/feedback-bar.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from "react"
+import { ThumbsDown, ThumbsUp, X } from "lucide-react"
+import { cn } from "../lib/cn"
+import { Button } from "./button"
+
+export interface FeedbackBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The question, e.g. "Was this helpful?". Also names the group. */
+  title: string
+  /** Optional mark before the title, such as the assistant's logo. */
+  icon?: React.ReactNode
+  onHelpful?: () => void
+  onNotHelpful?: () => void
+  /** Shows the close button. Hide the bar yourself when it fires. */
+  onClose?: () => void
+}
+
+/**
+ * FeedbackBar - a compact "Was this helpful?" prompt: a title, thumbs up and
+ * down, and an optional close. Use it once at the end of a conversation or
+ * page; for the actions under each answer use AnswerActions.
+ *
+ * @example
+ *   <FeedbackBar title="Was this helpful?" onHelpful={up} onNotHelpful={down} onClose={hide} />
+ */
+export const FeedbackBar = React.forwardRef<HTMLDivElement, FeedbackBarProps>(
+  ({ title, icon, onHelpful, onNotHelpful, onClose, className, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="group"
+      aria-label={title}
+      data-slot="feedback-bar"
+      className={cn(
+        "ax:inline-flex ax:items-stretch ax:rounded-lg ax:border ax:border-border ax:bg-background ax:t-body-sm",
+        className,
+      )}
+      {...props}
+    >
+      <div className="ax:flex ax:flex-1 ax:items-center ax:gap-sm ax:py-sm ax:ps-md">
+        {icon && <span className="ax:inline-flex ax:shrink-0 ax:[&_svg]:size-4" aria-hidden>{icon}</span>}
+        <span className="ax:font-medium ax:text-foreground">{title}</span>
+      </div>
+      <div className="ax:flex ax:items-center ax:gap-2xs ax:px-sm">
+        <Button variant="ghost" size="icon-sm" className="ax:text-muted-foreground ax:hover:text-foreground" aria-label="Helpful" onClick={onHelpful}>
+          <ThumbsUp />
+        </Button>
+        <Button variant="ghost" size="icon-sm" className="ax:text-muted-foreground ax:hover:text-foreground" aria-label="Not helpful" onClick={onNotHelpful}>
+          <ThumbsDown />
+        </Button>
+      </div>
+      {onClose && (
+        <div className="ax:flex ax:items-center ax:border-s ax:border-border ax:px-2xs">
+          <Button variant="ghost" size="icon-sm" className="ax:text-muted-foreground ax:hover:text-foreground" aria-label="Close" onClick={onClose}>
+            <X />
+          </Button>
+        </div>
+      )}
+    </div>
+  ),
+)
+FeedbackBar.displayName = "FeedbackBar"