@cueplusplus/ui 0.13.0

package/manifest/components/input-group.json

@@ -0,0 +1,112 @@
+{
+  "name": "InputGroup",
+  "slug": "input-group",
+  "group": "forms",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A control and its adornments, drawn as a single field.\n\nThe group — not the input — owns the chassis, so there is exactly one rim and\none fill however many affordances are bolted on. It publishes that fact\nthrough context: an {@link Input } rendered inside strips its own border,\nbackground, height and padding and inherits the group's font size.\n\nFocus feedback splits in two, because a `<div>` matches neither `:focus` nor\n`:focus-visible` itself. The rim strengthens on `:focus-within` — anything\nfocused inside, however it got there — while the ring waits for\n`:has(:focus-visible)`, so a mouse click into the field does not light the\nwhole cluster up. Both halves live on the wrapper; the inner control paints\nno ring of its own.",
+  "props": [
+    {
+      "name": "leading",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "Content pinned to the left gutter — a glyph, a unit prefix, a protocol.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "trailing",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "Content pinned to the right gutter — a unit suffix, a `Kbd`, a clear button.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "size",
+      "type": "\"sm\" | \"md\" | \"lg\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "Rung of the control ladder for the whole cluster. Defaults to `\"md\"`.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      }
+    },
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "required": true,
+      "defaultValue": null,
+      "description": "The control. An {@link Input } here renders bare and fills the middle.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    }
+  ],
+  "typeReferences": [
+    "React.ComponentPropsWithoutRef<\"div\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border",
+    "--cue-border-strong",
+    "--cue-control-lg",
+    "--cue-control-md",
+    "--cue-control-sm",
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-font-mono",
+    "--cue-radius-control",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-4",
+    "--cue-space-5",
+    "--cue-sunken",
+    "--cue-text-body",
+    "--cue-text-label",
+    "--cue-text-ui"
+  ],
+  "summary": "A control and its adornments, drawn as a single field.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<InputGroup leading={<Search />} trailing={<Kbd>⌘K</Kbd>}>\n  <Input aria-label=\"Search cues\" />\n</InputGroup>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/input-group",
+  "mdUrl": "/docs/components/input-group.md",
+  "jsonUrl": "/r/components/input-group.json",
+  "specimens": [
+    {
+      "title": "InputGroup",
+      "group": "forms",
+      "components": [
+        "InputGroup"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"leading\">\n    <InputGroup leading={<Plug aria-hidden=\"true\" className=\"size-icon-md\" />}>\n      <Input aria-label=\"Node address\" defaultValue=\"10.0.0.42\" />\n    </InputGroup>\n  </Specimen>\n  <Specimen label=\"trailing\">\n    <InputGroup trailing={<span className=\"font-mono text-fg-subtle\">%</span>}>\n      <Input aria-label=\"Level\" defaultValue=\"80\" />\n    </InputGroup>\n  </Specimen>\n  <Specimen label=\"both, sm\">\n    <InputGroup\n      size=\"sm\"\n      leading={<Ruler aria-hidden=\"true\" className=\"size-icon-sm\" />}\n      trailing={<span className=\"font-mono text-fg-subtle\">m</span>}\n    >\n      <Input aria-label=\"Throw distance\" defaultValue=\"7.5\" />\n    </InputGroup>\n  </Specimen>\n</Specimens>",
+      "note": "One rim around a control and its adornments, so the group focuses as a unit.",
+      "interaction": "any focus inside strengthens the whole rim; the ring waits for a keyboard-visible descendant, so a click on an adornment does not light the cluster up. The inner control never rings — the group owns the rim."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/input.json

@@ -0,0 +1,121 @@
+{
+  "name": "Input",
+  "slug": "input",
+  "group": "forms",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "The single-line text control.\n\nWraps Base UI's `Input`, so dropping one inside a {@link Field } wires up the\nlabel, the description and the validity state with no `id` plumbing. Rides\nthe recessed chassis: `bg-sunken` sets it into the panel rather than raising\nit off, which is how this system distinguishes \"you type here\" from \"you\npress here\".\n\nInside an {@link InputGroup } it renders bare — the group owns the rim — so the\ntwo compose without a doubled border.",
+  "props": [
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes, merged over the chassis.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Accessible name for the input, when no `FieldLabel` names it. Declared here\nrather than left to the inherited attribute so the props table carries the\nrow: a bare input outside a `Field` has no other way to be named.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "size",
+      "type": "\"sm\" | \"md\" | \"lg\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "Rung of the control ladder. Defaults to `\"md\"`. Shadows the native `size`\nattribute (a character count), which nothing in a token-driven layout wants.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      }
+    },
+    {
+      "name": "placeholder",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "An example of what goes in the field, shown while it is empty. Not a name:\nit disappears on the first keystroke, so pair it with `aria-label` or a\n`FieldLabel`. Declared for the props-table row, as `aria-label` is above.",
+      "control": {
+        "kind": "string"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<BaseInput.Props, \"className\" | \"size\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border",
+    "--cue-border-strong",
+    "--cue-control-lg",
+    "--cue-control-md",
+    "--cue-control-sm",
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-font-mono",
+    "--cue-radius-control",
+    "--cue-space-3",
+    "--cue-space-4",
+    "--cue-space-5",
+    "--cue-sunken",
+    "--cue-text-body",
+    "--cue-text-label",
+    "--cue-text-ui"
+  ],
+  "summary": "The single-line text control, recessed into its surface.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Input placeholder=\"e.g. Blackout\" />\n<Input type=\"number\" size=\"sm\" defaultValue={512} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/input",
+  "mdUrl": "/docs/components/input.md",
+  "jsonUrl": "/r/components/input.json",
+  "whenToUse": [
+    "Free text or a plain number the user types: names, addresses, ports, counts.",
+    "Inside a `Field`, which wires the label, the description and the error state with no id plumbing."
+  ],
+  "whenNotToUse": [
+    "A number the user adjusts by feel rather than types. Use `ScrubInput`, or `NumberField` where a stepper is expected.",
+    "A value from a known set. Use `Select`, `Combobox` or `RadioGroup`.",
+    "A search box with debounce and Escape-to-clear. Use `SearchInput`."
+  ],
+  "commonMistakes": [
+    "Expecting its own rim inside an `InputGroup`. The group owns the border; the input renders bare.",
+    "Using the placeholder as the label. A placeholder is gone the moment typing starts.",
+    "Adding a background utility. Inputs are sunken in this system, which is how a reader tells \"type here\" from \"press here\"."
+  ],
+  "specimens": [
+    {
+      "title": "Input",
+      "group": "forms",
+      "components": [
+        "Input"
+      ],
+      "code": "<Specimens>\n  {SIZES.map((size) => (\n    <Specimen key={size} label={size}>\n      <Input aria-label={`Cue label, ${size}`} size={size} defaultValue=\"1/12 @ 80%\" />\n    </Specimen>\n  ))}\n  <Specimen label=\"placeholder\">\n    <Input aria-label=\"Empty cue label\" placeholder=\"e.g. Blackout\" />\n  </Specimen>\n  <Specimen label=\"disabled\">\n    <Input aria-label=\"Disabled cue label\" defaultValue=\"Read-only\" disabled />\n  </Specimen>\n  <Specimen label=\"readonly\">\n    <Input aria-label=\"Read-only cue label\" defaultValue=\"1/12 @ 80%\" readOnly />\n  </Specimen>\n</Specimens>",
+      "note": "The recessed chassis: sunken fill, hairline rim, height from the density ladder.",
+      "interaction": "the rim strengthens one rung on focus and a single flush ring in the theme's focus colour sits just inside it — clicking in shows the same ring as tabbing in, because a typing surface is always focus-visible; `invalid` keeps the danger rim and the ring stays visible beside it."
+    }
+  ]
+}

package/manifest/components/inspector.json

@@ -0,0 +1,199 @@
+{
+  "name": "Inspector",
+  "slug": "inspector",
+  "group": "chrome",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "The shape a settings panel, a properties sidebar and a wrench menu share:\ntitled sections of label-and-control rows, with a footer.\n\nLayout and nothing else — the controls are the library's own. A section is\na group headed by a `SectionHeader`; a row is a label then its control, one\ncolumn in a narrow container and two from 18rem; the footer holds a quiet\nnote and one action.\n\n**Static markup — no hooks, no `\"use client\"`**, so a server page can draw\none. Labels are strings for the same reason: a row with no `htmlFor` lays its\nlabel on its control as `aria-label`, rather than pointing at an id nobody\nhas generated. The row itself carries no role.",
+  "props": [],
+  "typeReferences": [],
+  "subcomponents": [
+    "Root",
+    "Section",
+    "Row",
+    "Footer"
+  ],
+  "parts": [
+    {
+      "name": "Root",
+      "usage": "Inspector.Root",
+      "description": "The inspector's frame: a size container, so each row's columns follow the\ninspector's own width — a popover's, a sidebar's — and not the viewport's.\nIt holds the sections, then the footer.",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": null,
+          "description": "The sections, then the footer.",
+          "control": {
+            "kind": "node",
+            "fixture": "children.text"
+          }
+        }
+      ],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"div\">"
+      ]
+    },
+    {
+      "name": "Section",
+      "usage": "Inspector.Section",
+      "description": "One titled group of rows: a `SectionHeader` carrying its `label`, and a group named by the same words.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "required": true,
+          "defaultValue": null,
+          "description": "The section's title — \"Variants\", \"Stage\". Drawn by a `SectionHeader` and read as the group's name.",
+          "control": {
+            "kind": "string"
+          }
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": null,
+          "description": "The section's rows.",
+          "control": {
+            "kind": "node",
+            "fixture": "children.text"
+          }
+        }
+      ],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"div\">"
+      ]
+    },
+    {
+      "name": "Row",
+      "usage": "Inspector.Row",
+      "description": "One label and its control: one column in a narrow inspector, two from 18rem.\nWith `htmlFor` the label is a `<label>` for that control; without it the\nlabel is laid on the control as its `aria-label`, unless the control already\nnames itself. The row carries no role.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "required": true,
+          "defaultValue": null,
+          "description": "What the control sets — \"Size\", \"Theme\". Drawn before it, and read as its\nname: a `<label>` for it when `htmlFor` is given, and otherwise laid on\nthe control as `aria-label`, unless the control already names itself.",
+          "control": {
+            "kind": "string"
+          }
+        },
+        {
+          "name": "htmlFor",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "The control's `id`, when it takes one: the label then becomes a `<label>` for it.",
+          "control": {
+            "kind": "string"
+          }
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": null,
+          "description": "The control — one element, any of the library's own. A row names a single control.",
+          "control": {
+            "kind": "node",
+            "fixture": "children.text"
+          }
+        }
+      ],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"div\">"
+      ]
+    },
+    {
+      "name": "Footer",
+      "usage": "Inspector.Footer",
+      "description": "The inspector's closing strip: a quiet `note` on the left and one `action` on the right, each drawn only when given.",
+      "props": [
+        {
+          "name": "note",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": null,
+          "description": "A quiet line on the left: which preset this is, or that none matches.",
+          "control": {
+            "kind": "node",
+            "fixture": "children.text"
+          }
+        },
+        {
+          "name": "action",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": null,
+          "description": "The footer's one action, on the right — by convention a small `Button`.",
+          "control": {
+            "kind": "node",
+            "fixture": "children.text"
+          }
+        }
+      ],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"div\">"
+      ]
+    }
+  ],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-4",
+    "--cue-text-label",
+    "--cue-text-ui"
+  ],
+  "summary": "Titled sections of label-and-control rows, with a footer: the layout of a settings panel, a properties sidebar or a wrench menu.",
+  "examples": [
+    {
+      "title": "A wrench menu",
+      "code": "<Inspector.Root>\n  <Inspector.Section label=\"Variants\">\n    <Inspector.Row label=\"Size\">\n      <SegmentedControl aria-label=\"Size\" items={sizes} defaultValue=\"md\" />\n    </Inspector.Row>\n    <Inspector.Row label=\"Label\" htmlFor=\"label\">\n      <Input id=\"label\" defaultValue=\"Take cue\" />\n    </Inspector.Row>\n  </Inspector.Section>\n  <Inspector.Footer note=\"preset · button-hero\" action={<Button size=\"sm\">Reset</Button>} />\n</Inspector.Root>",
+      "language": "tsx"
+    },
+    {
+      "title": "Usage",
+      "code": "<Inspector.Root>\n  <Inspector.Section label=\"Variants\">\n    <Inspector.Row label=\"Size\"><SegmentedControl items={sizes} /></Inspector.Row>\n    <Inspector.Row label=\"Label\" htmlFor=\"label\"><Input id=\"label\" /></Inspector.Row>\n  </Inspector.Section>\n  <Inspector.Footer note=\"preset · button-hero\" action={<Button size=\"sm\">Reset</Button>} />\n</Inspector.Root>",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/inspector",
+  "mdUrl": "/docs/components/inspector.md",
+  "jsonUrl": "/r/components/inspector.json",
+  "whenToUse": [
+    "A popover or sidebar that edits several properties of one thing, grouped under a few headings.",
+    "Any panel whose rows are a label and a control — the controls stay the library's own; this lays them out."
+  ],
+  "whenNotToUse": [
+    "A form someone submits. That is `Field` and its family, which carry validation and descriptions an inspector row does not.",
+    "A list of records. That is `Panel` with `Row`."
+  ],
+  "commonMistakes": [
+    "Leaving a text input's row without `htmlFor`. The row then lays its words on the input as `aria-label`, which names it but gives it no `<label>` to click — give the input an `id` and the row `htmlFor`.",
+    "Putting two controls in one row. A row names one control; two controls are two rows.",
+    "Nesting sections. An inspector is one level of headings; a section inside a section is a second panel."
+  ],
+  "specimens": [
+    {
+      "title": "Inspector",
+      "group": "chrome",
+      "components": [
+        "Inspector"
+      ],
+      "code": "<div className=\"w-full max-w-[20rem] rounded-(--radius-surface) border border-border bg-surface-2\">\n  <Inspector.Root>\n    {/*\n      Data first, Variants second: `seedFromSpecimen` (`@repo/docgen`)\n      takes each prop's first tag-order value across the whole bench,\n      per prop name and not per row, so `defaults@Inspector.Row`'s\n      `label` and `htmlFor` have to come off the same row to name a\n      coherent pair — and `htmlFor` is only ever set on this one, the\n      only row whose control is a single labelable element. Putting\n      it first makes it that row for both props at once. Reordering\n      Size and Icon ahead of it would seed `label: \"Size\"` (the first\n      `Inspector.Row` tag) beside this row's `htmlFor`, pointing a\n      `<label for>` at an id that scope's control never renders.\n    */}\n    <Inspector.Section label=\"Data\">\n      <Inspector.Row label=\"Label\" htmlFor=\"inspector-bench-label\">\n        <Input id=\"inspector-bench-label\" defaultValue=\"Take cue\" />\n      </Inspector.Row>\n    </Inspector.Section>\n    <Inspector.Section label=\"Variants\">\n      <Inspector.Row label=\"Size\">\n        <SegmentedControl\n          aria-label=\"Size\"\n          size=\"sm\"\n          items={[\n            { value: \"sm\", label: \"sm\" },\n            { value: \"md\", label: \"md\" },\n            { value: \"lg\", label: \"lg\" },\n          ]}\n          defaultValue=\"md\"\n        />\n      </Inspector.Row>\n      <Inspector.Row label=\"Icon\">\n        <Switch aria-label=\"Icon\" defaultChecked />\n      </Inspector.Row>\n    </Inspector.Section>\n    <Inspector.Footer\n      note=\"preset · button-hero\"\n      action={\n        <Button size=\"sm\" variant=\"secondary\">\n          Reset\n        </Button>\n      }\n    />\n  </Inspector.Root>\n</div>",
+      "note": "Titled sections of label-and-control rows, with a footer — the shape of a settings panel, a properties sidebar and the docs' wrench menu. Layout only: the controls are the ones you already use.",
+      "interaction": "nothing of its own takes focus. Each row's control is a real one: a row given `htmlFor` labels its control with a `<label>`, and one without lays its label on the control as `aria-label`. A row is never a group of its own."
+    }
+  ]
+}

package/manifest/components/item.json

@@ -0,0 +1,163 @@
+{
+  "name": "Item",
+  "slug": "item",
+  "group": "layout",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "One thing in a list, with room for a glyph, a name, a line of detail and a\ncontrol — the shape a settings entry, a search hit and a device row all want.\n\nWhere `Row` is a line of a hairline table, `Item` is a self-contained object\nthat can stand alone, sit in a `Stack` or fill a `Grid` cell. It is a real\n`<button>` when interactive rather than a `<div>` with an `onClick`, so\nkeyboard users get it for free.\n\nStatic markup — no `\"use client\"`.",
+  "props": [
+    {
+      "name": "media",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "Leading slot: an icon, an avatar, a status dot.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "title",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "The item's name — one line, truncated rather than wrapped.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "description",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "One supporting line under the title, a rung smaller and muted.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "actions",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "Trailing slot: a value, a chip, a control.\n\nDo not combine with `interactive` — the whole item is then a `<button>`,\nand a button may not contain another one. Put the controls beside the item\ninstead, or drop `interactive` and make the title itself the link.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "variant",
+      "type": "\"plain\" | \"outline\" | \"soft\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "Which framing to paint. Defaults to `\"plain\"`.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "plain",
+          "outline",
+          "soft"
+        ]
+      }
+    },
+    {
+      "name": "interactive",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Render as a `<button>` with hover feedback and a focus ring instead of a\nstatic `<div>`. Use for items that select, open or toggle something.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": null,
+      "description": "Disable the interactive form. Ignored when `interactive` is not set.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra content between the text column and the action slot.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.HTMLAttributes<HTMLElement>, \"title\">",
+    "VariantProps<typeof itemVariants>"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {
+    "variant": [
+      "plain",
+      "outline",
+      "soft"
+    ],
+    "interactive": [
+      "true",
+      "false"
+    ]
+  },
+  "defaultVariants": {
+    "variant": "plain",
+    "interactive": "false"
+  },
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-font-mono",
+    "--cue-pad-row-x",
+    "--cue-pad-row-y",
+    "--cue-radius-control",
+    "--cue-space-1",
+    "--cue-space-2",
+    "--cue-space-4",
+    "--cue-surface-2",
+    "--cue-text-label",
+    "--cue-text-ui"
+  ],
+  "summary": "One thing in a list, with room for a glyph, a name, a line of detail and a control — the shape a settings entry, a search hit and a device row all want.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Item media={<StatusDot tone=\"ok\" />} title=\"Node 12\" description=\"10.0.0.12\" />\n<Item interactive variant=\"outline\" title=\"Front truss\" onClick={open} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/item",
+  "mdUrl": "/docs/components/item.md",
+  "jsonUrl": "/r/components/item.json",
+  "specimens": [
+    {
+      "title": "Item",
+      "group": "layout",
+      "components": [
+        "Item"
+      ],
+      "code": "<div className=\"flex w-full max-w-[36rem] flex-col gap-(--cue-space-3)\">\n  <Item\n    media={<Lightbulb aria-hidden=\"true\" className=\"size-icon-md text-fg-subtle\" />}\n    title=\"Source Four 26°\"\n    description=\"Universe 1, channels 12 to 19.\"\n    actions={<Chip tone=\"ok\">patched</Chip>}\n  />\n  <Item\n    variant=\"outline\"\n    title=\"MAC Viper Profile\"\n    description=\"Universe 2, channels 1 to 32.\"\n    actions={<Button size=\"sm\">Inspect</Button>}\n  />\n  <Item variant=\"soft\" interactive title=\"Sharpy Plus\" description=\"Unpatched.\" />\n  <Item variant=\"outline\" disabled title=\"Molefay 4-lite\" description=\"Profile missing.\" />\n</div>",
+      "note": "A media, title, description and actions row. Three variants, plus interactive and disabled.",
+      "interaction": "the interactive variant takes a hover ground and a focus ring; it is a button, so Enter and Space activate it."
+    }
+  ],
+  "todo": true
+}