@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/ui/accordion/accordion.test.tsx

@@ -0,0 +1,320 @@
+import { readFileSync } from "node:fs"
+import { dirname, resolve } from "node:path"
+import { fileURLToPath } from "node:url"
+import { describe, it, expect, vi } from "vitest"
+import { render, screen, fireEvent, act, within } from "@testing-library/react"
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  type AccordionProps,
+} from "./accordion"
+import { Avatar } from "../avatar/avatar"
+
+/**
+ * What these tests can and cannot prove.
+ *
+ * jsdom has no layout engine and no style resolution: it matches neither
+ * `:hover` nor `:focus-visible`, runs no transitions and measures every box
+ * at zero. So the visual tests assert **class presence only**: that the right
+ * utility lands on the right element. Row heights, padding, the ring's inset,
+ * the underline, the open and close animation and the tokens in Light and
+ * Dark were measured in a real browser, in both directions.
+ */
+
+const ITEMS = ["one", "two", "three"]
+
+function Example(props: Partial<AccordionProps>) {
+  return (
+    <Accordion {...props}>
+      {ITEMS.map((v) => (
+        <AccordionItem key={v} value={v}>
+          <AccordionTrigger>Question {v}</AccordionTrigger>
+          <AccordionContent>Answer {v}</AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  )
+}
+
+const trigger = (name: string) => screen.getByRole("button", { name })
+const click = async (element: HTMLElement) => {
+  await act(async () => {
+    fireEvent.click(element)
+  })
+}
+
+describe("Accordion behaviour (Base UI)", () => {
+  it("renders each heading as a button inside a heading, collapsed by default", () => {
+    render(<Example />)
+    expect(screen.getAllByRole("heading", { level: 3 })).toHaveLength(3)
+    for (const v of ITEMS) {
+      expect(trigger(`Question ${v}`)).toHaveAttribute("aria-expanded", "false")
+    }
+    expect(screen.queryByRole("region")).toBeNull()
+  })
+
+  it("links an open trigger and its region both ways", () => {
+    render(<Example defaultValue={["two"]} />)
+    const button = trigger("Question two")
+    const region = screen.getByRole("region")
+    expect(button).toHaveAttribute("aria-expanded", "true")
+    expect(button).toHaveAttribute("aria-controls", region.id)
+    expect(region).toHaveAttribute("aria-labelledby", button.id)
+    expect(region).toHaveTextContent("Answer two")
+  })
+
+  it("opens one item at a time by default, and closes the open one again", async () => {
+    const onValueChange = vi.fn()
+    render(<Example onValueChange={onValueChange} />)
+
+    await click(trigger("Question one"))
+    expect(trigger("Question one")).toHaveAttribute("aria-expanded", "true")
+
+    await click(trigger("Question two"))
+    expect(trigger("Question one")).toHaveAttribute("aria-expanded", "false")
+    expect(trigger("Question two")).toHaveAttribute("aria-expanded", "true")
+    expect(onValueChange).toHaveBeenLastCalledWith(["two"], expect.anything())
+
+    await click(trigger("Question two"))
+    expect(trigger("Question two")).toHaveAttribute("aria-expanded", "false")
+  })
+
+  it("keeps several items open with `multiple`", async () => {
+    render(<Example multiple />)
+    await click(trigger("Question one"))
+    await click(trigger("Question three"))
+    expect(trigger("Question one")).toHaveAttribute("aria-expanded", "true")
+    expect(trigger("Question three")).toHaveAttribute("aria-expanded", "true")
+  })
+
+  it("follows a controlled value", () => {
+    const { rerender } = render(<Example value={["one"]} />)
+    expect(trigger("Question one")).toHaveAttribute("aria-expanded", "true")
+    rerender(<Example value={["three"]} />)
+    expect(trigger("Question one")).toHaveAttribute("aria-expanded", "false")
+    expect(trigger("Question three")).toHaveAttribute("aria-expanded", "true")
+  })
+
+  it("is a native button, so Enter and Space need no handler of ours", () => {
+    render(<Example />)
+    const button = trigger("Question one")
+    expect(button.tagName).toBe("BUTTON")
+    expect(button).toHaveAttribute("type", "button")
+  })
+
+  it("nests: an accordion inside content works on its own", async () => {
+    render(
+      <Accordion defaultValue={["parent"]}>
+        <AccordionItem value="parent">
+          <AccordionTrigger>Parent</AccordionTrigger>
+          <AccordionContent>
+            <Accordion>
+              <AccordionItem value="child">
+                <AccordionTrigger>Child</AccordionTrigger>
+                <AccordionContent>Child answer</AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    )
+    await click(trigger("Child"))
+    expect(trigger("Child")).toHaveAttribute("aria-expanded", "true")
+    expect(trigger("Parent")).toHaveAttribute("aria-expanded", "true")
+    expect(screen.getByText("Child answer")).toBeInTheDocument()
+  })
+})
+
+describe("Accordion variants", () => {
+  const root = (container: HTMLElement) => container.querySelector("[data-slot=accordion]")!
+  const items = (container: HTMLElement) => [...container.querySelectorAll("[data-slot=accordion-item]")]
+
+  it("default: dividers between items, none after the last, no inset", () => {
+    const { container } = render(<Example />)
+    expect(root(container)).toHaveAttribute("data-variant", "default")
+    for (const item of items(container)) {
+      expect(item).toHaveClass("border-b", "border-border", "last:border-b-0")
+      expect(item).not.toHaveClass("px-5")
+    }
+  })
+
+  it("split: card items with shadow-md, 8px apart, 20px inset, 8px radius", () => {
+    const { container } = render(<Example variant="split" />)
+    expect(root(container)).toHaveClass("gap-2")
+    for (const item of items(container)) {
+      expect(item).toHaveClass("bg-card", "shadow-md", "px-5", "rounded-[var(--radius-md)]")
+      expect(item).not.toHaveClass("border", "border-b")
+      // Forced colours drop the fill and shadow; the outline keeps the card.
+      expect(item).toHaveClass("forced-colors:outline", "forced-colors:outline-1")
+    }
+  })
+
+  it("outline: a border round each item, 8px apart, and 16px rows", () => {
+    const { container } = render(<Example variant="outline" />)
+    expect(root(container)).toHaveClass("gap-2")
+    for (const item of items(container)) {
+      expect(item).toHaveClass("border", "border-border", "px-5", "rounded-[var(--radius-md)]")
+    }
+    expect(trigger("Question one")).toHaveClass("py-4")
+  })
+
+  it("table: one box round the group, dividers inside, 20px inset", () => {
+    const { container } = render(<Example variant="table" />)
+    expect(root(container)).toHaveClass("rounded-lg", "border", "border-border")
+    for (const item of items(container)) {
+      expect(item).toHaveClass("border-b", "px-5", "last:border-b-0")
+    }
+  })
+
+  it.each(["default", "split", "table"] as const)("%s rows are 12px above and below the title", (variant) => {
+    render(<Example variant={variant} />)
+    expect(trigger("Question one")).toHaveClass("py-3")
+  })
+})
+
+describe("Accordion indicator", () => {
+  const indicator = (name: string) => trigger(name).querySelector("[data-slot=accordion-indicator]")!
+
+  it("defaults to one chevron that turns while open", () => {
+    render(<Example defaultValue={["one"]} />)
+    const svgs = indicator("Question one").querySelectorAll("svg")
+    expect(svgs).toHaveLength(1)
+    expect(svgs[0]).toHaveClass("lucide-chevron-down", "group-data-[panel-open]/trigger:rotate-180")
+    expect(trigger("Question one")).toHaveAttribute("data-panel-open")
+  })
+
+  it("plus swaps Plus for Minus while open", () => {
+    render(<Example indicator="plus" />)
+    const [plus, minus] = [...indicator("Question one").querySelectorAll("svg")]
+    expect(plus).toHaveClass("lucide-plus", "group-data-[panel-open]/trigger:hidden")
+    expect(minus).toHaveClass("lucide-minus", "hidden", "group-data-[panel-open]/trigger:block")
+  })
+
+  it("draws Figma's 1px stroke and sits at the inline end, hidden from assistive tech", () => {
+    render(<Example />)
+    const box = indicator("Question one")
+    expect(box).toHaveAttribute("aria-hidden", "true")
+    expect(box).toHaveClass("ms-auto", "size-4")
+    expect(box.querySelector("svg")).toHaveAttribute("stroke-width", "1.5")
+  })
+
+  it("leaves the trigger's accessible name to the title", () => {
+    render(<Example indicator="plus" />)
+    expect(trigger("Question one")).toHaveAccessibleName("Question one")
+  })
+})
+
+describe("Accordion trigger look", () => {
+  it("wraps bare text in one span, so the hover underline has an element and no gap splits it", () => {
+    // `Question {v}` is two strings to React: they must share one span, not
+    // become two flex items 12px apart.
+    render(<Example />)
+    const titles = trigger("Question one").querySelectorAll("[data-slot=accordion-title]")
+    expect(titles).toHaveLength(1)
+    expect(titles[0]).toHaveTextContent(/^Question one$/)
+  })
+
+  it("keeps text either side of an element in separate spans, in order", () => {
+    render(
+      <Accordion>
+        <AccordionItem value="a">
+          <AccordionTrigger>
+            Before <b>bold</b> after
+          </AccordionTrigger>
+        </AccordionItem>
+      </Accordion>
+    )
+    const parts = [...screen.getByRole("button").children].map((c) => c.textContent)
+    expect(parts.slice(0, 3)).toEqual(["Before ", "bold", " after"])
+  })
+
+  it("underlines the title on hover, never the indicator, an icon or an avatar", () => {
+    render(<Example />)
+    // The row sets the variable on hover; only the title children read it.
+    const button = trigger("Question one")
+    expect(button).toHaveClass("hover:[--accordion-title-decoration:underline]")
+    expect(button.className).toContain(
+      "[&>:not([data-slot=accordion-indicator]):not([data-slot=avatar]):not(svg)]:[text-decoration-line:var(--accordion-title-decoration,none)]"
+    )
+    // Never `hover:[&>…]`: in Tailwind 3 that hovers the child, not the row.
+    expect(button.className).not.toMatch(/hover:\[&/)
+  })
+
+  it("draws the focus ring on the trigger: 2px of ring, 1px inside top and bottom, 6px past each side", () => {
+    render(<Example />)
+    expect(trigger("Question one")).toHaveClass(
+      "relative",
+      "[outline:none]",
+      "after:border-2",
+      "after:border-ring",
+      "after:inset-y-px",
+      "after:-inset-x-1.5",
+      "after:rounded-[var(--radius-sm)]",
+      "after:hidden",
+      "focus-visible:after:block"
+    )
+  })
+
+  it("keeps an avatar and an icon in the row, and the avatar out of the underline", () => {
+    render(
+      <Accordion>
+        <AccordionItem value="a">
+          <AccordionTrigger>
+            <Avatar name="Huda Salem" />
+            <span>Huda Salem</span>
+          </AccordionTrigger>
+          <AccordionContent>Body</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    )
+    const button = screen.getByRole("button")
+    const avatar = within(button).getByText("HS").closest("[data-slot=avatar]")
+    expect(avatar?.parentElement).toBe(button)
+  })
+})
+
+describe("Accordion content", () => {
+  it("puts className and the 16px bottom padding on the inner box", () => {
+    render(
+      <Accordion defaultValue={["a"]}>
+        <AccordionItem value="a">
+          <AccordionTrigger>Title</AccordionTrigger>
+          <AccordionContent className="ps-11">Body</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    )
+    const region = screen.getByRole("region")
+    const inner = screen.getByText("Body")
+    expect(inner).toHaveClass("pb-4", "ps-11")
+    expect(region).not.toHaveClass("ps-11")
+    expect(region).toHaveClass("text-sm", "text-muted-foreground", "overflow-y-clip", "overflow-x-visible")
+  })
+
+  it("animates height from Base UI's measurement, and not under reduced motion", () => {
+    render(<Example defaultValue={["one"]} />)
+    expect(screen.getByRole("region")).toHaveClass(
+      "h-[var(--accordion-panel-height)]",
+      "transition-[height]",
+      "data-[starting-style]:h-0",
+      "data-[ending-style]:h-0",
+      "motion-reduce:transition-none"
+    )
+  })
+})
+
+describe("Accordion source", () => {
+  const source = readFileSync(resolve(dirname(fileURLToPath(import.meta.url)), "accordion.tsx"), "utf8")
+  const classes = [...source.matchAll(/"([^"]*)"/g)].map((m) => m[1]!).join(" ")
+
+  it("uses logical properties only, so RTL needs no class of its own", () => {
+    expect(classes).not.toMatch(/(^|\s|:)-?(ml|mr|pl|pr|left|right|inset-l|inset-r|rounded-[lr]|border-[lr])-/)
+    expect(classes).not.toMatch(/text-(left|right)\b/)
+    expect(classes).not.toMatch(/\brtl:/)
+  })
+
+  it("never mirrors the indicator with a transform", () => {
+    expect(classes).not.toMatch(/scale-x|-scale-x/)
+  })
+})

package/registry/ui/accordion/accordion.tsx

@@ -0,0 +1,353 @@
+"use client"
+
+import * as React from "react"
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+import { cva } from "class-variance-authority"
+import { ChevronDownIcon, MinusIcon, PlusIcon } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Accordion` (15217:41213) and its row, `Accordion Item` (324:856).
+ *
+ * Built on Base UI's Accordion, which owns the behaviour: the button and
+ * region roles and the ids that link them, `aria-expanded`, single or
+ * multiple open items, Enter and Space, and the panel height it measures for
+ * the open and close animation. There is no keyboard logic here; Tab moves
+ * between the headings, as the WAI-ARIA pattern now recommends. This file
+ * owns the look.
+ *
+ * Figma axis → code:
+ *  - `Variants` Default / Split / Outline / Table Accordion → `variant`
+ *    ("default" | "split" | "outline" | "table") on `Accordion`.
+ *  - `Variants` Plus Minus → `indicator="plus"`. It is the Default layout with
+ *    Lucide Plus and Minus in place of the chevron, so it works on every
+ *    variant.
+ *  - `Variants` Avatar, Icons and Multi-level are compositions, not props: an
+ *    Avatar or icon inside `AccordionTrigger`, a second Accordion inside
+ *    `AccordionContent`.
+ *  - Item `Opened` → `value` / `defaultValue`; `State` → real hover and
+ *    keyboard focus; `Direction` → the page's `dir`, never a prop.
+ *
+ * Figma draws every stroke inside its frame, overlapping the padding. Here
+ * the dividers and outlines are ordinary borders outside it, so the padding
+ * is Figma's and each bordered row is 1px taller than its frame.
+ */
+
+type AccordionVariant = "default" | "split" | "outline" | "table"
+type AccordionIndicator = "chevron" | "plus"
+
+const AccordionContext = React.createContext<{
+  variant: AccordionVariant
+  indicator: AccordionIndicator
+}>({ variant: "default", indicator: "chevron" })
+
+/**
+ * The group.
+ *
+ *  - default: items stacked flush.
+ *  - split, outline: an 8px gap (Figma `spacing/2`), each item its own card.
+ *  - table: one 1px `border` box round the whole group, at Figma's
+ *    `border radius/box` 10px — `rounded-lg`, the project's `--radius`, as
+ *    Tabs uses for the same step.
+ */
+const accordionVariants = cva("flex w-full flex-col", {
+  variants: {
+    variant: {
+      default: "",
+      split: "gap-2",
+      outline: "gap-2",
+      table: "rounded-lg border border-border",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})
+
+/**
+ * One item.
+ *
+ *  - default, table: a 1px `border` divider under every item but the last.
+ *    Table insets the row 20px (Figma `spacing/5`) from its box.
+ *  - split: a `card` surface with Figma's `shadow/md` — exactly Tailwind 3's
+ *    `shadow-md` — and no stroke, 20px inset.
+ *  - outline: a 1px `border` all round, 20px inset.
+ *
+ * Split and outline round each item to Figma's `rounded-field`, 8px:
+ * `--radius-md`, which is 8px in both apps where no Tailwind class is.
+ */
+const accordionItemVariants = cva("", {
+  variants: {
+    variant: {
+      default: "border-b border-border last:border-b-0",
+      // Forced colours drop both the fill and the shadow, so the card gets
+      // an outline there instead; outline takes no room, so nothing moves.
+      split: "rounded-[var(--radius-md)] bg-card px-5 shadow-md forced-colors:outline forced-colors:outline-1",
+      outline: "rounded-[var(--radius-md)] border border-border px-5",
+      table: "border-b border-border px-5 last:border-b-0",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})
+
+/**
+ * The heading row. Geist (Cairo in Arabic) Medium 14px in `foreground`, a
+ * 12px gap between whatever it holds, and the indicator pushed to the inline
+ * end, which is the right in English and the left in Arabic. The type ramp
+ * gives Arabic its own 24px line, so its rows are 4px taller with no class
+ * here knowing about it.
+ *
+ * Rows are 12px above and below the title (Figma `spacing/3`); Outline's are
+ * 16px (`spacing/4`).
+ *
+ * Hover underlines the title, never an avatar or icon beside it: a text
+ * decoration set on the row would reach an avatar's initials, and nothing
+ * below can take it off again, so the underline goes on each child that is
+ * not the indicator, an avatar or an icon. Bare text is wrapped in a span for
+ * it. Hovering the row sets `--accordion-title-decoration` and those
+ * children read it, so the whole row underlines its title, wherever the
+ * pointer is in it. (`[&:hover>…]` would do the same, but Storybook's
+ * pseudo-states addon cannot force a `:hover` written inside a class name;
+ * Tailwind 3's `hover:[&>…]` hovers the child, not the row.) The thickness,
+ * position and ink-skipping follow the font, as Figma's underline does.
+ *
+ * Keyboard focus draws Figma's ring: 2px of `ring` at `--radius-sm` (6px,
+ * Figma `rounded-md`). It is a pseudo-element, so it adds no size, inset 1px
+ * from the row's top and bottom edges so it never meets the content or the
+ * divider, and 6px past each side so it clears the title and the indicator.
+ * The browser's own outline is removed outright: Tailwind 3's `outline-none`
+ * leaves a transparent one that forced colours paint round every row, while
+ * the ring's border shows there in the system colour on focus.
+ */
+const accordionTriggerVariants = cva(
+  [
+    "group/trigger relative flex w-full flex-1 cursor-pointer items-center gap-3 text-start text-sm font-medium text-foreground [outline:none] [overflow-wrap:anywhere]",
+    "hover:[--accordion-title-decoration:underline]",
+    "[&>:not([data-slot=accordion-indicator]):not([data-slot=avatar]):not(svg)]:[text-decoration-line:var(--accordion-title-decoration,none)]",
+    "[&>*]:decoration-from-font [text-decoration-skip-ink:none] [text-underline-position:from-font]",
+    "after:pointer-events-none after:absolute after:-inset-x-1.5 after:inset-y-px after:hidden after:rounded-[var(--radius-sm)] after:border-2 after:border-ring",
+    "focus-visible:after:block",
+    "[&>svg]:size-4 [&>svg]:shrink-0",
+  ],
+  {
+    variants: {
+      variant: {
+        default: "py-3",
+        split: "py-3",
+        outline: "py-4",
+        table: "py-3",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+/**
+ * Open and close, at the motion presets' `base` duration (180ms) and
+ * `standard` easing, since CSS cannot read the Framer Motion presets
+ * themselves. Base UI writes the panel's measured height to
+ * `--accordion-panel-height` and holds it at 0 on its starting and ending
+ * styles; once open, the height returns to `auto`, so a nested accordion can
+ * still grow its parent. Reduced motion opens and closes at once.
+ *
+ * The panel clips only vertically, which is all the animation needs.
+ * `overflow: hidden` would also cut off anything reaching sideways out of
+ * the content: a nested accordion's focus ring, 6px past its row, or a
+ * nested group pulled out to the edges of a Split or Table item.
+ */
+const accordionContentVariants = cva([
+  "h-[var(--accordion-panel-height)] overflow-x-visible overflow-y-clip text-sm text-muted-foreground",
+  "transition-[height] duration-[180ms] ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none",
+  "data-[starting-style]:h-0 data-[ending-style]:h-0",
+])
+
+export interface AccordionProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>, "className" | "orientation" | "loopFocus"> {
+  /**
+   * How the items look. `default` separates them with a line. `split` shows
+   * each item as a raised card, with a gap between them. `outline` draws a
+   * border round each item, with a gap between them. `table` puts the whole
+   * group in one bordered box.
+   */
+  variant?: AccordionVariant
+  /**
+   * The mark at the end of each heading. `chevron` points down and turns up
+   * while the item is open. `plus` turns into a minus while it is open.
+   */
+  indicator?: AccordionIndicator
+  /**
+   * Lets several items stay open at once. Off by default, so opening one item
+   * closes the one that was open.
+   */
+  multiple?: boolean
+  className?: string
+}
+
+const Accordion =React.forwardRef<HTMLDivElement, AccordionProps>(
+  ({ className, variant = "default", indicator = "chevron", ...props }, ref) => {
+    const context = React.useMemo(() => ({ variant, indicator }), [variant, indicator])
+
+    return (
+      <AccordionContext.Provider value={context}>
+        <AccordionPrimitive.Root
+          ref={ref}
+          data-slot="accordion"
+          data-variant={variant}
+          className={cn(accordionVariants({ variant }), className)}
+          {...props}
+        />
+      </AccordionContext.Provider>
+    )
+  }
+)
+Accordion.displayName = "Accordion"
+
+export interface AccordionItemProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>, "className"> {
+  className?: string
+}
+
+const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
+  ({ className, ...props }, ref) => {
+    const { variant } = React.useContext(AccordionContext)
+
+    return (
+      <AccordionPrimitive.Item
+        ref={ref}
+        data-slot="accordion-item"
+        className={cn(accordionItemVariants({ variant }), className)}
+        {...props}
+      />
+    )
+  }
+)
+AccordionItem.displayName = "AccordionItem"
+
+/**
+ * The open and closed mark, 16px of Figma's own Lucide glyphs at their 1px
+ * stroke (1.5 on Lucide's 24px grid). The chevron points down and turns to
+ * point up while open; it is symmetrical, so turning it needs no RTL case.
+ * Plus swaps for Minus.
+ */
+function AccordionIndicatorIcon({ indicator }: { indicator: AccordionIndicator }) {
+  return (
+    <span
+      aria-hidden="true"
+      data-slot="accordion-indicator"
+      className="ms-auto flex size-4 shrink-0 items-center justify-center [&_svg]:size-4 [&_svg]:shrink-0"
+    >
+      {indicator === "plus" ? (
+        <>
+          <PlusIcon strokeWidth={1.5} className="group-data-[panel-open]/trigger:hidden" />
+          <MinusIcon strokeWidth={1.5} className="hidden group-data-[panel-open]/trigger:block" />
+        </>
+      ) : (
+        <ChevronDownIcon
+          strokeWidth={1.5}
+          className="transition-transform duration-[180ms] ease-[cubic-bezier(0.2,0,0,1)] group-data-[panel-open]/trigger:rotate-180 motion-reduce:transition-none"
+        />
+      )}
+    </span>
+  )
+}
+
+/**
+ * Bare text becomes a span, so the hover underline has an element to go on.
+ * Neighbouring runs share one span: `Question {n}` is two strings to React,
+ * and as two flex items they would sit a 12px gap apart.
+ */
+function wrapText(children: React.ReactNode) {
+  const out: React.ReactNode[] = []
+  let text: string[] = []
+  const flush = () => {
+    if (text.length === 0) return
+    out.push(
+      <span key={`title-${out.length}`} data-slot="accordion-title">
+        {text.join("")}
+      </span>
+    )
+    text = []
+  }
+  // toArray drops empty children and keys the rest.
+  for (const child of React.Children.toArray(children)) {
+    if (typeof child === "string" || typeof child === "number") {
+      text.push(String(child))
+    } else {
+      flush()
+      out.push(child)
+    }
+  }
+  flush()
+  return out
+}
+
+export interface AccordionTriggerProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>, "className"> {
+  className?: string
+}
+
+/**
+ * The heading's button, inside Base UI's heading element, an `h3` as in
+ * shadcn. Put a 16px icon or an Avatar before the title and the row spaces
+ * it; the indicator is added for you.
+ */
+const AccordionTrigger = React.forwardRef<HTMLButtonElement, AccordionTriggerProps>(
+  ({ className, children, ...props }, ref) => {
+    const { variant, indicator } = React.useContext(AccordionContext)
+
+    return (
+      <AccordionPrimitive.Header data-slot="accordion-header" className="flex">
+        <AccordionPrimitive.Trigger
+          ref={ref}
+          data-slot="accordion-trigger"
+          className={cn(accordionTriggerVariants({ variant }), className)}
+          {...props}
+        >
+          {wrapText(children)}
+          <AccordionIndicatorIcon indicator={indicator} />
+        </AccordionPrimitive.Trigger>
+      </AccordionPrimitive.Header>
+    )
+  }
+)
+AccordionTrigger.displayName = "AccordionTrigger"
+
+export interface AccordionContentProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Panel>, "className"> {
+  /** Goes on the inner box, which holds the padding, so the panel can close to 0. */
+  className?: string
+}
+
+/**
+ * The revealed body: 14px `muted-foreground` text and 16px below it (Figma
+ * `spacing/4`). The panel animates; the box inside it holds the padding and
+ * takes `className`, so indenting the body under an avatar is a `ps-*` here.
+ */
+const AccordionContent = React.forwardRef<HTMLDivElement, AccordionContentProps>(
+  ({ className, children, ...props }, ref) => (
+    <AccordionPrimitive.Panel
+      ref={ref}
+      data-slot="accordion-content"
+      className={accordionContentVariants()}
+      {...props}
+    >
+      <div className={cn("pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Panel>
+  )
+)
+AccordionContent.displayName = "AccordionContent"
+
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  accordionVariants,
+  accordionItemVariants,
+  accordionTriggerVariants,
+}
+export type { AccordionVariant, AccordionIndicator }

package/registry/ui/accordion/index.ts

@@ -0,0 +1,15 @@
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  accordionVariants,
+  accordionItemVariants,
+  accordionTriggerVariants,
+  type AccordionProps,
+  type AccordionItemProps,
+  type AccordionTriggerProps,
+  type AccordionContentProps,
+  type AccordionVariant,
+  type AccordionIndicator,
+} from "./accordion"