Accordion

import { Accordion } from "@brijbyte/agentic-ui/accordion";
import "@brijbyte/agentic-ui/accordion.css";

const ITEMS = [
  {
    value: "what",
    header: "What is agentic-ui?",
    content:
      "A developer-focused design system built on @base-ui/react with a design loosely inspired by native UI and semantic design tokens.",
  },
  {
    value: "why",
    header: "Why monospace fonts for UI?",
    content: "Monospace fonts give a consistent, technical aesthetic that feels native in developer tools, terminals, and dashboards.",
  },
  {
    value: "parts",
    header: "What does 'generic styled parts' mean?",
    content:
      "Each component exports individual styled parts that are thin wrappers around base-ui primitives. Mix freely with raw base-ui components.",
  },
  { value: "disabled", header: "Disabled panel", content: "", disabled: true },
];

export default function HighLevelDemo() {
  return <Accordion items={ITEMS} />;
}

import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
import { AccordionItemPart, AccordionHeader, AccordionTrigger, AccordionPanel } from "@brijbyte/agentic-ui/accordion";
import "@brijbyte/agentic-ui/accordion.css";

export default function ComposedDemo() {
  return (
    <BaseAccordion.Root style={{ overflow: "hidden", borderRadius: "var(--radius-lg)", border: "1px solid var(--color-line)" }}>
      {["Alpha", "Beta", "Gamma"].map((name) => (
        <AccordionItemPart key={name} value={name}>
          <AccordionHeader>
            <AccordionTrigger>{name}</AccordionTrigger>
          </AccordionHeader>
          <AccordionPanel>
            <div
              style={{
                padding: "var(--space-2) var(--space-4) var(--space-4)",
                fontFamily: "var(--font-mono)",
                fontSize: "var(--font-size-sm)",
                color: "var(--color-secondary)",
              }}
            >
              Content for section {name}.
            </div>
          </AccordionPanel>
        </AccordionItemPart>
      ))}
    </BaseAccordion.Root>
  );
}