@cueplusplus/ui 0.2.0 → 0.5.0

package/manifest/components/artifact-card.json

@@ -0,0 +1,81 @@
+{
+  "name": "ArtifactCard",
+  "slug": "artifact-card",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "A generated document as a tangible object, written live and versioned.",
+  "props": [
+    {
+      "name": "title",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Name of the generated artifact."
+    },
+    {
+      "name": "meta",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Resting meta line shown once generation finishes, for example kind, version, and\nrecency."
+    },
+    {
+      "name": "generating",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "While true the icon pulses and the meta line shows a live word count with a shimmer."
+    },
+    {
+      "name": "words",
+      "type": "number",
+      "required": false,
+      "defaultValue": "0",
+      "description": "Live word count shown while generating."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"title\" | \"meta\" | \"generating\" | \"words\"\n> & {\n  /** Name of the generated artifact. */\n  title: string;\n  /**\n   * Resting meta line shown once generation finishes, for example kind, version, and\n   * recency.\n   */\n  meta: string;\n  /** While true the icon pulses and the meta line shows a live word count with a shimmer. */\n  generating?: boolean;\n  /** Live word count shown while generating. */\n  words?: number;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-overlay",
+    "--cue-radius-surface",
+    "--cue-surface-1",
+    "--cue-text-body"
+  ],
+  "summary": "A generated document as a tangible object, written live and versioned.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { ArtifactCard } from \"@cueplusplus/ui/elements\";\n\n<ArtifactCard\n  title=\"Draft persistence RFC\"\n  meta=\"Document · v3 · just now\"\n  generating={isWriting}\n  words={wordCount}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/artifact-card",
+  "mdUrl": "/docs/components/artifact-card.md",
+  "jsonUrl": "/r/components/artifact-card.json",
+  "specimens": [
+    {
+      "title": "ArtifactCard",
+      "group": "elements-knowledge",
+      "components": [
+        "ArtifactCard"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"writing\">\n    <ArtifactCard title=\"Front truss — fixture spec\" meta=\"\" generating words={214} />\n  </Specimen>\n  <Specimen label=\"written\">\n    <ArtifactCard title=\"Front truss — fixture spec\" meta=\"1.4 KB · v3\" />\n  </Specimen>\n</Specimens>",
+      "note": "The document the answer produced, as an object you can pick up. While it is being written the icon pulses, the label shimmers and the word count climbs; when it lands, the meta line blurs in with its size and version. It is the handle — the document itself opens in a canvas.",
+      "interaction": "the whole card is the target and lifts a pixel under the pointer; the arrow only appears on hover, so a resting card is quiet."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/ask-box.json

@@ -0,0 +1,209 @@
+{
+  "name": "AskBox",
+  "slug": "ask-box",
+  "group": "chat",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "The human-in-the-loop question: an agent stops, asks, and waits.\n\nControlled by design. The box holds the *draft* answer while the user is\nchoosing, but it never holds the fact of having answered — that comes back as\nthe `answer` prop once the host has recorded it. Anything else and a\ncomponent's local state becomes the source of truth for a decision the run\ndepends on, which survives exactly until the pane unmounts.\n\nAnswered questions collapse to `question · answer ✓` and expand on click, so\na long thread reads as a decision log rather than a wall of settled forms.\n\nThe prompt is rendered verbatim, never parsed as markup: an approval prompt\ninterpolates model-controlled text, and a `![](url)` in a consent statement\nis an exfiltration channel.",
+  "props": [
+    {
+      "name": "question",
+      "type": "ReactNode",
+      "required": true,
+      "defaultValue": null,
+      "description": "The question, as text or nodes. Rendered verbatim — never parsed."
+    },
+    {
+      "name": "kind",
+      "type": "\"number\" | \"boolean\" | \"text\" | \"single\" | \"multi\"",
+      "required": false,
+      "defaultValue": "text",
+      "description": "Which widget to offer. Defaults to `\"text\"`."
+    },
+    {
+      "name": "options",
+      "type": "readonly AskOption[]",
+      "required": false,
+      "defaultValue": null,
+      "description": "Choices for a `single` or `multi` question."
+    },
+    {
+      "name": "onAnswer",
+      "type": "(value: AskAnswer) => void",
+      "required": true,
+      "defaultValue": null,
+      "description": "Fired once with the answer. The host is responsible for resuming the run."
+    },
+    {
+      "name": "answer",
+      "type": "AskAnswer",
+      "required": false,
+      "defaultValue": null,
+      "description": "The answer, once there is one. Present means answered: the box collapses to\na one-line summary and stops accepting input."
+    },
+    {
+      "name": "asker",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Slug of the agent asking, for the byline and the box's colour."
+    },
+    {
+      "name": "rootAgent",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Slug of the orchestrator, so its questions take the theme accent."
+    },
+    {
+      "name": "tool",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Tool this question is approving, if it is an approval."
+    },
+    {
+      "name": "danger",
+      "type": "\"low\" | \"high\" | \"critical\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "Risk rating for the tool call. Omit for a plain question."
+    },
+    {
+      "name": "defaultValue",
+      "type": "AskAnswer",
+      "required": false,
+      "defaultValue": null,
+      "description": "Initial widget value. A string for `text`/`single`, an array for `multi`, a number for `number`."
+    },
+    {
+      "name": "placeholder",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Placeholder for the `text` widget."
+    },
+    {
+      "name": "min",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "description": "Lower bound for the `number` widget."
+    },
+    {
+      "name": "max",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "description": "Upper bound for the `number` widget."
+    },
+    {
+      "name": "step",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "description": "Increment the `number` widget's stepper moves by."
+    },
+    {
+      "name": "unit",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Unit shown beside a number, and in the answered summary."
+    },
+    {
+      "name": "confirmLabel",
+      "type": "string",
+      "required": false,
+      "defaultValue": "Confirm",
+      "description": "Label on the affirmative half of a `boolean`. Defaults to `\"Confirm\"`."
+    },
+    {
+      "name": "rejectLabel",
+      "type": "string",
+      "required": false,
+      "defaultValue": "Reject",
+      "description": "Label on the negative half of a `boolean`. Defaults to `\"Reject\"`."
+    },
+    {
+      "name": "submitLabel",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": "Submit",
+      "description": "Label on the submit button. Defaults to `\"Submit\"`."
+    },
+    {
+      "name": "busy",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "The answer is in flight: locks the widget and says so."
+    },
+    {
+      "name": "defaultOpen",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Expand the answered summary from the start. Defaults to `false`."
+    },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Accessible name for the widget when `question` is not plain text."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"onSubmit\" | \"defaultValue\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-icon-sm",
+    "--cue-ok",
+    "--cue-radius-surface",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-4",
+    "--cue-surface-1",
+    "--cue-text-body",
+    "--cue-text-label",
+    "--cue-text-micro",
+    "--cue-text-ui"
+  ],
+  "summary": "The human-in-the-loop question: an agent stops, asks, and waits.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<AskBox question=\"Which merge mode?\" kind=\"single\" options={modes} onAnswer={resume} />\n<AskBox question=\"Delete the rig?\" kind=\"boolean\" tool=\"rig.delete\" danger=\"critical\" onAnswer={resume} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/ask-box",
+  "mdUrl": "/docs/components/ask-box.md",
+  "jsonUrl": "/r/components/ask-box.json",
+  "specimens": [
+    {
+      "title": "AskBox",
+      "group": "chat",
+      "components": [
+        "AskBox"
+      ],
+      "code": "<div className=\"grid w-full gap-(--cue-space-5) lg:grid-cols-2\">\n  <AskBox\n    question=\"Name the cue\"\n    kind=\"text\"\n    asker=\"cue-writer\"\n    placeholder=\"e.g. House to half\"\n    onAnswer={answer(\"text\")}\n    answer={answers[\"text\"]}\n  />\n  <AskBox\n    question=\"Which protocol should the bridge use?\"\n    kind=\"single\"\n    options={ASK_OPTIONS}\n    asker=\"patcher\"\n    onAnswer={answer(\"single\")}\n    answer={answers[\"single\"]}\n  />\n  <AskBox\n    question=\"Which universes should the archivist capture?\"\n    kind=\"multi\"\n    options={[\n      { value: \"1\", label: \"Universe 1\" },\n      { value: \"2\", label: \"Universe 2\" },\n      { value: \"3\", label: \"Universe 3\" },\n    ]}\n    asker=\"archivist\"\n    onAnswer={answer(\"multi\")}\n    answer={answers[\"multi\"]}\n  />\n  <AskBox\n    question=\"Unpatch every fixture on universe 4?\"\n    kind=\"boolean\"\n    danger=\"critical\"\n    tool=\"unpatch\"\n    asker=\"patcher\"\n    confirmLabel=\"Unpatch\"\n    rejectLabel=\"Keep\"\n    onAnswer={answer(\"boolean\")}\n    answer={answers[\"boolean\"]}\n  />\n  <AskBox\n    question=\"Fade time for cue 4\"\n    kind=\"number\"\n    min={0}\n    max={60}\n    step={0.5}\n    unit=\"s\"\n    defaultValue={12}\n    danger=\"low\"\n    asker=\"cue-writer\"\n    onAnswer={answer(\"number\")}\n    answer={answers[\"number\"]}\n  />\n  <AskBox\n    question=\"Overwrite the show file?\"\n    kind=\"boolean\"\n    danger=\"high\"\n    busy\n    asker=\"archivist\"\n    onAnswer={answer(\"busy\")}\n  />\n</div>",
+      "note": "The HITL question widget: five kinds, three danger levels, and a collapsed `question · answer ✓` summary once it is answered. Controlled through `onAnswer`, because the host owns the run.",
+      "interaction": "the danger chip is text as well as colour; an answered box collapses but stays expandable."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/audience-icon.json

@@ -0,0 +1,52 @@
+{
+  "name": "AudienceIcon",
+  "slug": "audience-icon",
+  "group": "icons",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "An audience: a named group of people something is published to.\n\nPeople, not an abstract shape. An audience is the one container in this set\nwhose members are humans rather than artefacts, and drawing it as a diamond\nor a tag would have filed it with the folders — which is exactly the mistake\na reader makes when deciding where to publish something.",
+  "props": [],
+  "typeReferences": [
+    "React.SVGProps<SVGSVGElement>"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-icon-",
+    "--cue-icon-md",
+    "--cue-icon-sm"
+  ],
+  "summary": "An audience: a named group of people something is published to.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/audience-icon",
+  "mdUrl": "/docs/components/audience-icon.md",
+  "jsonUrl": "/r/components/audience-icon.json",
+  "specimens": [
+    {
+      "title": "The container icon set",
+      "group": "icons",
+      "components": [
+        "CatalogueIcon",
+        "StackIcon",
+        "StacksMatrixIcon",
+        "AudienceIcon",
+        "ChannelReleasedIcon",
+        "ChannelBetaIcon",
+        "FolderIcon",
+        "McpServerIcon",
+        "CliToolIcon",
+        "SkillIcon"
+      ],
+      "code": "<Specimens>\n  {CONTAINERS.map(([label, name, Icon]) => (\n    <Specimen key={name} label={label}>\n      <Icon className=\"size-icon-md text-fg\" />\n    </Specimen>\n  ))}\n</Specimens>\n<Specimens>\n  <Specimen label=\"icon-sm\">\n    <SkillIcon className=\"size-icon-sm text-fg\" />\n  </Specimen>\n  <Specimen label=\"icon-md\">\n    <SkillIcon className=\"size-icon-md text-fg\" />\n  </Specimen>\n  <Specimen label=\"inherited\">\n    <SkillIcon className=\"size-icon-md\" />\n  </Specimen>\n  <Specimen label=\"muted\">\n    <SkillIcon className=\"size-icon-md text-fg-muted\" />\n  </Specimen>\n  <Specimen label=\"accent\">\n    <SkillIcon className=\"size-icon-md text-accent\" />\n  </Specimen>\n  <Specimen label=\"danger\">\n    <SkillIcon className=\"size-icon-md text-danger\" />\n  </Specimen>\n</Specimens>\n<Specimens>\n  <Specimen label=\"in a row\" wide>\n    <span className=\"inline-flex items-center gap-(--cue-space-2) font-mono text-(length:--cue-text-ui) text-fg-muted\">\n      <ChannelReleasedIcon className=\"size-icon-md shrink-0\" />\n      Our skills · released\n    </span>\n  </Specimen>\n  <Specimen label=\"current row\" wide>\n    <span className=\"inline-flex items-center gap-(--cue-space-2) font-mono text-(length:--cue-text-ui) text-fg\">\n      <ChannelBetaIcon className=\"size-icon-md shrink-0\" />\n      Our skills · beta\n    </span>\n  </Specimen>\n</Specimens>",
+      "note": "One grid and one weight across all ten, at size-icon-md — the size a navigation row draws them at. Each is a plain <svg> that takes every SVG prop.",
+      "interaction": "none. They are decorative by default: aria-hidden, announced by nothing, because the row they mark already carries its name."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/autocomplete.json

@@ -0,0 +1,197 @@
+{
+  "name": "Autocomplete",
+  "slug": "autocomplete",
+  "group": "forms",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A text field that suggests as you type — and accepts what you typed anyway.\n\nThe counterpart to {@link Combobox }: there the list *is* the set of legal\nvalues, here it is only a shortcut. Anything the user types survives blur, so\nthis is the right control for a name, a search term or a host — anywhere the\nsuggestions are a convenience rather than a constraint.\n\nSuggestions are plain strings for the same reason: an autocomplete has no\nseparate value/label axis, because the label *is* the value.\n\nThe popup is portalled through {@link useCuePortalProps}, so it carries the\ncaller's `data-theme` / `data-density` / `data-mode`.",
+  "props": [
+    {
+      "name": "items",
+      "type": "readonly string[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "The suggestions, filtered against what is typed."
+    },
+    {
+      "name": "value",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Current text. Use with `onValueChange` for a controlled field."
+    },
+    {
+      "name": "defaultValue",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Initial text for an uncontrolled field."
+    },
+    {
+      "name": "onValueChange",
+      "type": "((value: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Fired on every keystroke and when a suggestion is picked."
+    },
+    {
+      "name": "placeholder",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Shown while the field is empty."
+    },
+    {
+      "name": "emptyMessage",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": "No matches",
+      "description": "Shown in place of the list when the query matches nothing."
+    },
+    {
+      "name": "size",
+      "type": "\"sm\" | \"md\" | \"lg\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "Rung of the control ladder. Defaults to `\"md\"`."
+    },
+    {
+      "name": "autoHighlight",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Highlight the first match automatically so Enter accepts it."
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": null,
+      "description": "Prevent opening and grey the field out."
+    },
+    {
+      "name": "required",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": null,
+      "description": "Require text before the owning form submits."
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Name for the input, when the field is part of a form."
+    },
+    {
+      "name": "id",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Id forwarded to the input."
+    },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Accessible name for the input, when no {@link FieldLabel } names it."
+    },
+    {
+      "name": "aria-labelledby",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Id of the element naming the input."
+    },
+    {
+      "name": "clearLabel",
+      "type": "string",
+      "required": false,
+      "defaultValue": "Clear",
+      "description": "Accessible name for the clear button. Defaults to `\"Clear\"`."
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the field."
+    },
+    {
+      "name": "popupClassName",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the popup surface."
+    },
+    {
+      "name": "sideOffset",
+      "type": "number",
+      "required": false,
+      "defaultValue": "4",
+      "description": "Distance in px between the field and the popup. Defaults to `4`."
+    }
+  ],
+  "typeReferences": [],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-accent-soft",
+    "--cue-border",
+    "--cue-border-overlay",
+    "--cue-chip-h",
+    "--cue-control-lg",
+    "--cue-control-md",
+    "--cue-control-sm",
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-icon-sm",
+    "--cue-radius-control",
+    "--cue-radius-overlay",
+    "--cue-scrim",
+    "--cue-space-1",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-4",
+    "--cue-space-5",
+    "--cue-sunken",
+    "--cue-surface-2",
+    "--cue-text-body",
+    "--cue-text-emphasis",
+    "--cue-text-label",
+    "--cue-text-ui"
+  ],
+  "summary": "A text field that suggests as you type — and accepts what you typed anyway.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Autocomplete aria-label=\"Cue name\" items={recentCues} onValueChange={setName} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/autocomplete",
+  "mdUrl": "/docs/components/autocomplete.md",
+  "jsonUrl": "/r/components/autocomplete.json",
+  "specimens": [
+    {
+      "title": "Autocomplete",
+      "group": "forms",
+      "components": [
+        "Autocomplete"
+      ],
+      "code": "<div className=\"grid w-full gap-(--cue-space-5) lg:grid-cols-3\">\n  <Autocomplete aria-label=\"Protocol\" items={PROTOCOLS} placeholder=\"Protocol\" />\n  <Autocomplete\n    aria-label=\"Protocol, highlighted\"\n    items={PROTOCOLS}\n    defaultValue=\"Art\"\n    autoHighlight\n  />\n  <Autocomplete aria-label=\"Protocol, disabled\" items={PROTOCOLS} defaultValue=\"OSC\" disabled />\n</div>",
+      "note": "Suggestions over free text: the field keeps whatever was typed, and the list only offers.",
+      "interaction": "the list opens on input, not on focus; `autoHighlight` pre-selects the first match."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/avatar-group.json

@@ -0,0 +1,72 @@
+{
+  "name": "AvatarGroup",
+  "slug": "avatar-group",
+  "group": "primitives",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "An overlapping stack of {@link Avatar}s with a `+N` overflow chip.\n\nEach item after the first is pulled left by a negative inline-start margin\nand ringed in the page background colour, which is what reads as \"stacked\"\nrather than \"crowded\". Logical margins, so the stack flips correctly in RTL.",
+  "props": [
+    {
+      "name": "max",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "description": "Show at most this many avatars; the rest collapse into a `+N` chip. Omit for no limit."
+    },
+    {
+      "name": "size",
+      "type": "\"sm\" | \"md\" | \"lg\"",
+      "required": false,
+      "defaultValue": "md",
+      "description": "Size of the `+N` overflow chip. Match it to the avatars you pass in. Defaults to `\"md\"`."
+    }
+  ],
+  "typeReferences": [
+    "React.ComponentPropsWithoutRef<\"div\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-bg",
+    "--cue-border",
+    "--cue-control-lg",
+    "--cue-control-md",
+    "--cue-control-sm",
+    "--cue-fg-muted",
+    "--cue-font-mono",
+    "--cue-space-2",
+    "--cue-surface-2",
+    "--cue-surface-3",
+    "--cue-text-label",
+    "--cue-text-micro",
+    "--cue-text-ui"
+  ],
+  "summary": "An overlapping stack of {@link Avatar}s with a `+N` overflow chip.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<AvatarGroup max={3}>\n  {users.map((u) => <Avatar key={u.id} alt={u.name} src={u.avatar} />)}\n</AvatarGroup>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/avatar-group",
+  "mdUrl": "/docs/components/avatar-group.md",
+  "jsonUrl": "/r/components/avatar-group.json",
+  "specimens": [
+    {
+      "title": "AvatarGroup",
+      "group": "primitives",
+      "components": [
+        "AvatarGroup"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"default\">\n    <AvatarGroup>\n      <Avatar fallback=\"CR\" />\n      <Avatar fallback=\"JM\" />\n      <Avatar fallback=\"AP\" />\n    </AvatarGroup>\n  </Specimen>\n  <Specimen label=\"max 2\">\n    <AvatarGroup max={2}>\n      <Avatar fallback=\"CR\" />\n      <Avatar fallback=\"JM\" />\n      <Avatar fallback=\"AP\" />\n      <Avatar fallback=\"LS\" />\n    </AvatarGroup>\n  </Specimen>\n</Specimens>",
+      "note": "Overlapping faces with an overflow count.",
+      "interaction": "none."
+    }
+  ],
+  "todo": true
+}