@cueplusplus/ui 0.2.0 → 0.5.0

package/manifest/components/search-input.json

@@ -0,0 +1,134 @@
+{
+  "name": "SearchInput",
+  "slug": "search-input",
+  "group": "forms",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A filter box: leading magnifier, Escape to clear, and a debounced change\ncallback for whatever the query drives.\n\nEscape-to-clear is the reason this is a component and not a recipe. It is the\nbehaviour every console filter needs and the one every hand-rolled search box\nforgets, and getting it right means also stopping the key from bubbling into a\ndialog that would otherwise close underneath the user.\n\nDebouncing is deliberately separate from `onValueChange`: the input stays\nresponsive on every keystroke while the expensive work waits for the typing to\nstop. Clearing flushes the debounce rather than scheduling it.",
+  "props": [
+    {
+      "name": "defaultValue",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Initial query for an uncontrolled input."
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the group that wraps the icon, the input and the clear button."
+    },
+    {
+      "name": "size",
+      "type": "\"sm\" | \"md\" | \"lg\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "Rung of the control ladder. Defaults to `\"md\"`."
+    },
+    {
+      "name": "debounce",
+      "type": "number",
+      "required": false,
+      "defaultValue": "250",
+      "description": "Quiet period in ms before {@link SearchInputProps.onDebouncedChange} fires.\nDefaults to `250`. `0` fires it synchronously with every keystroke."
+    },
+    {
+      "name": "value",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Current query. Supply it with `onValueChange` for a controlled input."
+    },
+    {
+      "name": "onValueChange",
+      "type": "((value: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Fired on every keystroke, and with `\"\"` when the query is cleared."
+    },
+    {
+      "name": "icon",
+      "type": "ElementType<any, keyof IntrinsicElements>",
+      "required": false,
+      "defaultValue": "SearchGlyph",
+      "description": "Leading glyph component. Defaults to a magnifier."
+    },
+    {
+      "name": "clearLabel",
+      "type": "string",
+      "required": false,
+      "defaultValue": "Clear search",
+      "description": "Accessible name for the clear button. Defaults to `\"Clear search\"`."
+    },
+    {
+      "name": "onDebouncedChange",
+      "type": "((value: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Fired once the user stops typing for `debounce` ms — the callback to hang a\nquery or a filter recomputation on. Clearing flushes it immediately, because\n\"show me everything again\" should never wait."
+    },
+    {
+      "name": "onClear",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Fired when the query is cleared, by Escape or by the clear button."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n    InputProps,\n    \"type\" | \"size\" | \"value\" | \"defaultValue\" | \"onValueChange\" | \"children\"\n  >"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-control-lg",
+    "--cue-control-md",
+    "--cue-control-sm",
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-icon-md",
+    "--cue-icon-sm",
+    "--cue-radius-control",
+    "--cue-space-3",
+    "--cue-space-4",
+    "--cue-space-5",
+    "--cue-sunken",
+    "--cue-text-body",
+    "--cue-text-label",
+    "--cue-text-ui"
+  ],
+  "summary": "A filter box: leading magnifier, Escape to clear, and a debounced change callback for whatever the query drives.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<SearchInput aria-label=\"Filter cues\" onDebouncedChange={setQuery} />\n<SearchInput value={q} onValueChange={setQ} debounce={0} size=\"sm\" />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/search-input",
+  "mdUrl": "/docs/components/search-input.md",
+  "jsonUrl": "/r/components/search-input.json",
+  "specimens": [
+    {
+      "title": "SearchInput",
+      "group": "forms",
+      "components": [
+        "SearchInput"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"empty\">\n    <SearchInput aria-label=\"Search fixtures\" placeholder=\"Search fixtures\" />\n  </Specimen>\n  <Specimen label=\"with value\">\n    <SearchInput aria-label=\"Search cues\" defaultValue=\"blackout\" />\n  </Specimen>\n  <Specimen label=\"debounced 200ms\">\n    <SearchInput aria-label=\"Search patch\" defaultValue=\"viper\" debounce={200} />\n  </Specimen>\n  <Specimen label=\"disabled\">\n    <SearchInput aria-label=\"Search, disabled\" defaultValue=\"viper\" disabled />\n  </Specimen>\n</Specimens>",
+      "note": "A magnifier, a clear button that appears once there is something to clear, and an optional debounce.",
+      "interaction": "Escape clears; the clear button is a real button with a name, not an icon glued to the rim."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/section-header.json

@@ -0,0 +1,112 @@
+{
+  "name": "SectionHeader",
+  "slug": "section-header",
+  "group": "chrome",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A faint label with a rule running off it — the heading for a group of rows.\n\nA label and a hairline, deliberately, not a bordered box: a heading that is\nitself a panel competes with the panels underneath it and reads as another\nobject rather than as their title (the quotamate `AccountGroup` ruling). The\nrule is a `flex-1` block, so it always fills exactly the space the label and\nthe count leave behind.",
+  "props": [
+    {
+      "name": "label",
+      "type": "ReactNode",
+      "required": true,
+      "defaultValue": null,
+      "description": "The group's name. Rendered uppercase in the smallest mono label type."
+    },
+    {
+      "name": "count",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "description": "Optional count shown after the label — how many things are in the group."
+    },
+    {
+      "name": "action",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "Right-hand slot. Rendered *outside* the collapse toggle so clicking an\naction never folds the section shut under the user's cursor."
+    },
+    {
+      "name": "collapsible",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Turn the label into a disclosure button that shows and hides `children`."
+    },
+    {
+      "name": "defaultOpen",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "true",
+      "description": "Initial open state when uncontrolled. Defaults to `true`."
+    },
+    {
+      "name": "open",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": null,
+      "description": "Open state when controlled. Pass with `onOpenChange`."
+    },
+    {
+      "name": "onOpenChange",
+      "type": "((open: boolean) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the next open state whenever the toggle is pressed."
+    },
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "The section body. Hidden while a collapsible section is closed."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"onToggle\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-icon-sm",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-4",
+    "--cue-text-label"
+  ],
+  "summary": "A faint label with a rule running off it — the heading for a group of rows.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<SectionHeader label=\"Universes\" count={4} />\n<SectionHeader label=\"Scenes\" collapsible action={<IconButton aria-label=\"Add\" icon={Plus} />}>\n  <SeamList>{scenes.map((s) => <Row seam key={s.id}>{s.name}</Row>)}</SeamList>\n</SectionHeader>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/section-header",
+  "mdUrl": "/docs/components/section-header.md",
+  "jsonUrl": "/r/components/section-header.json",
+  "specimens": [
+    {
+      "title": "SectionHeader",
+      "group": "chrome",
+      "components": [
+        "SectionHeader"
+      ],
+      "code": "<div className=\"flex w-full max-w-[36rem] flex-col gap-(--cue-space-5)\">\n  <SectionHeader label=\"Fixtures\" />\n  <SectionHeader label=\"Fixtures\" count={48} />\n  <SectionHeader\n    label=\"Fixtures\"\n    count={48}\n    action={<IconButton aria-label=\"Add fixture\" icon={Plus} size=\"sm\" />}\n  />\n  <SectionHeader label=\"Advanced\" collapsible defaultOpen={false}>\n    <p className=\"font-mono text-(length:--cue-text-ui) text-fg-muted\">\n      Hidden until asked for.\n    </p>\n  </SectionHeader>\n</div>",
+      "note": "A label, a rule, an optional count and an action slot. Collapsible when the section under it is.",
+      "interaction": "the collapsible variant is a button: hover tints the label, Enter and Space toggle."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/segmented-control.json

@@ -0,0 +1,138 @@
+{
+  "name": "SegmentedControl",
+  "slug": "segmented-control",
+  "group": "chrome",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A one-of-N switch drawn as a row of segments: the console's view picker.\n\nBuilt on Base UI's `ToggleGroup`, so arrow-key roving focus and the\npressed-state ARIA come from the primitive. Two rules are added on top:\n\n1. **It cannot be emptied.** A toggle group lets you unpress the pressed\n   item; a segmented control is a choice between N things, so clicking the\n   active segment is a no-op rather than a way to end up with nothing\n   selected. This is why the underlying group is always controlled here, even\n   when the wrapper is not.\n2. **The active segment is tinted, not filled** — see {@link ITEM_CLASSES}.\n\nGive the group an `aria-label`: on its own it is an unnamed group of buttons.",
+  "props": [
+    {
+      "name": "defaultValue",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "The initially picked value when uncontrolled."
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the group frame."
+    },
+    {
+      "name": "previousLabel",
+      "type": "string",
+      "required": false,
+      "defaultValue": "Show earlier segments",
+      "description": "Accessible name for the chevron that reveals segments off the leading edge."
+    },
+    {
+      "name": "nextLabel",
+      "type": "string",
+      "required": false,
+      "defaultValue": "Show later segments",
+      "description": "Accessible name for the chevron that reveals segments off the trailing edge."
+    },
+    {
+      "name": "overflow",
+      "type": "\"clip\" | \"scroll\"",
+      "required": false,
+      "defaultValue": "scroll",
+      "description": "What the control does when its segments do not fit. Defaults to `\"scroll\"`.\n\nThe same behaviour `Toolbar` has, from the same module, for the same\nreason: a switcher with five segments in a page header's actions slot runs\noff a phone-width screen, and wrapping it would turn a one-rung control\ninto a two-row block that no longer reads as one switch. `\"scroll\"` keeps\nthe rim and the height, scrolls the segments inside them, fades the\noverflowing edge and offers a pager chevron there.\n\n`\"clip\"` is the old behaviour, for a control already inside something that\nscrolls."
+    },
+    {
+      "name": "size",
+      "type": "\"sm\" | \"md\" | \"lg\"",
+      "required": false,
+      "defaultValue": "md",
+      "description": "Which rung of the control ladder to sit on. Defaults to `\"md\"`."
+    },
+    {
+      "name": "value",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "The picked value when controlled. Pass with `onValueChange`."
+    },
+    {
+      "name": "onValueChange",
+      "type": "((value: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the newly picked value. Never called with `undefined`."
+    },
+    {
+      "name": "items",
+      "type": "readonly SegmentedControlItem[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "The segments, in display order."
+    },
+    {
+      "name": "itemClassName",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for every segment."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n    ToggleGroup.Props<string>,\n    \"value\" | \"defaultValue\" | \"onValueChange\" | \"multiple\" | \"className\" | \"children\"\n  >"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-accent-soft",
+    "--cue-border",
+    "--cue-chrome-toolbar",
+    "--cue-control-lg",
+    "--cue-control-md",
+    "--cue-control-sm",
+    "--cue-edge-fade",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-font-mono",
+    "--cue-icon-md",
+    "--cue-icon-sm",
+    "--cue-radius-control",
+    "--cue-space-1",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-4",
+    "--cue-space-5",
+    "--cue-surface-1",
+    "--cue-text-body",
+    "--cue-text-label",
+    "--cue-text-ui"
+  ],
+  "summary": "A one-of-N switch drawn as a row of segments: the console's view picker.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<SegmentedControl\n  aria-label=\"View\"\n  value={view}\n  onValueChange={setView}\n  items={[{ value: \"beams\", label: \"Beams\" }, { value: \"patch\", label: \"Patch\" }]}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/segmented-control",
+  "mdUrl": "/docs/components/segmented-control.md",
+  "jsonUrl": "/r/components/segmented-control.json",
+  "specimens": [
+    {
+      "title": "SegmentedControl",
+      "group": "chrome",
+      "components": [
+        "SegmentedControl"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"sm\">\n    <SegmentedControl\n      aria-label=\"Console mode, small\"\n      items={MODE_ITEMS}\n      value={mode}\n      onValueChange={setMode}\n      size=\"sm\"\n    />\n  </Specimen>\n  <Specimen label=\"md\">\n    <SegmentedControl\n      aria-label=\"Console mode\"\n      items={MODE_ITEMS}\n      value={mode}\n      onValueChange={setMode}\n    />\n  </Specimen>\n  <Specimen label=\"with icons\">\n    <SegmentedControl\n      aria-label=\"Console mode, icons\"\n      items={[\n        { value: \"patch\", label: \"Patch\", icon: Lightbulb },\n        { value: \"cues\", label: \"Cues\", icon: List },\n        { value: \"live\", label: \"Live\", icon: Monitor, disabled: true },\n      ]}\n      value={mode}\n      onValueChange={setMode}\n      size=\"lg\"\n    />\n  </Specimen>\n  <Specimen label=\"overflowing\" wide>\n    <div className=\"w-full max-w-[15rem]\">\n      <SegmentedControl\n        aria-label=\"Page state\"\n        items={STATE_ITEMS}\n        value={state}\n        onValueChange={setState}\n        size=\"sm\"\n      />\n    </div>\n  </Specimen>\n</Specimens>",
+      "note": "Three sizes. The active segment is `accent-soft`, on the same ruling as the active tab. The last specimen is five segments in 15rem: the rim and the height hold, the segments scroll inside them — the same overflow behaviour Toolbar and AppBar have, from the same module.",
+      "interaction": "arrow keys move the selection and reach the segments off-screen; the whole control is one tab stop. A chevron appears at whichever edge still hides one."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/select.json

@@ -0,0 +1,194 @@
+{
+  "name": "Select",
+  "slug": "select",
+  "group": "forms",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A dropdown for choosing one of a known set of values.\n\nThe trigger rides the recessed control chassis so a select lines up with the\n{@link Input }s beside it; the popup wears the overlay surface\n(`surface-2` + `border-overlay` + the overlay radius) that every floating\nelement in this system shares. Rows are one `control-sm` tall — the list is\nmeant to show a dozen options without scrolling.\n\nThe popup is portalled through {@link useCuePortalProps}, so it carries the\ncaller's `data-theme` / `data-density` / `data-mode` even though it mounts at\nthe end of `<body>`. Without that a select opened inside an ultra-compact\nisland would render at the page's density.",
+  "props": [
+    {
+      "name": "items",
+      "type": "readonly SelectOption[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "The rows, in display order."
+    },
+    {
+      "name": "value",
+      "type": "string | null",
+      "required": false,
+      "defaultValue": null,
+      "description": "Selected value. Use with `onValueChange` for a controlled select."
+    },
+    {
+      "name": "defaultValue",
+      "type": "string | null",
+      "required": false,
+      "defaultValue": null,
+      "description": "Initially selected value for an uncontrolled select."
+    },
+    {
+      "name": "onValueChange",
+      "type": "((value: string | null) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the newly selected value (`null` when cleared)."
+    },
+    {
+      "name": "placeholder",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "Shown in the trigger while nothing is selected."
+    },
+    {
+      "name": "size",
+      "type": "\"sm\" | \"md\" | \"lg\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "Rung of the control ladder for the trigger. Defaults to `\"md\"`."
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": null,
+      "description": "Prevent opening and grey the trigger out."
+    },
+    {
+      "name": "required",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": null,
+      "description": "Require a value before the owning form submits."
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Name for the hidden input, when the select is part of a form."
+    },
+    {
+      "name": "id",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Id forwarded to the select's hidden input."
+    },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Accessible name for the trigger, when no {@link FieldLabel } names it."
+    },
+    {
+      "name": "aria-labelledby",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Id of the element naming the trigger."
+    },
+    {
+      "name": "modal",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": null,
+      "description": "Lock interaction to the popup while it is open. Defaults to `true`, matching\nBase UI; set `false` inside a canvas or a drag surface that must keep\nreceiving pointer events."
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the trigger."
+    },
+    {
+      "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 trigger and the popup. Defaults to `4`."
+    }
+  ],
+  "typeReferences": [],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-accent-soft",
+    "--cue-border",
+    "--cue-border-overlay",
+    "--cue-border-strong",
+    "--cue-control-lg",
+    "--cue-control-md",
+    "--cue-control-sm",
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-icon-md",
+    "--cue-icon-sm",
+    "--cue-radius-control",
+    "--cue-radius-overlay",
+    "--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-label",
+    "--cue-text-ui"
+  ],
+  "summary": "A dropdown for one value out of a known, short set.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Select\n  aria-label=\"Blend mode\"\n  items={[{ value: \"htp\", label: \"HTP\" }, { value: \"ltp\", label: \"LTP\" }]}\n  value={mode}\n  onValueChange={setMode}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/select",
+  "mdUrl": "/docs/components/select.md",
+  "jsonUrl": "/r/components/select.json",
+  "whenToUse": [
+    "Picking one of roughly three to twelve options that are all known ahead of time.",
+    "Anywhere the trigger has to line up with the inputs beside it: it rides the same recessed chassis."
+  ],
+  "whenNotToUse": [
+    "A long or open-ended list the user should type into. Use `Combobox` or `Autocomplete`.",
+    "Two or three options that fit on screen. Use `SegmentedControl` or `RadioGroup`.",
+    "More than one value at a time. Use `MultiSelect`."
+  ],
+  "commonMistakes": [
+    "Shipping without an accessible name. Pass `aria-label`, or wrap it in a `Field` with a `FieldLabel`.",
+    "Hand-rolling the popup with a raw Base UI portal, which loses the theme and density stamps the portal contract puts on it."
+  ],
+  "specimens": [
+    {
+      "title": "Select",
+      "group": "forms",
+      "components": [
+        "Select"
+      ],
+      "code": "<Specimens>\n  {SIZES.map((size) => (\n    <Specimen key={size} label={size}>\n      <Select\n        aria-label={`Blend mode, ${size}`}\n        items={[...BLEND_MODES]}\n        defaultValue=\"htp\"\n        size={size}\n      />\n    </Specimen>\n  ))}\n  <Specimen label=\"placeholder\">\n    <Select aria-label=\"Blend mode, empty\" items={[...BLEND_MODES]} placeholder=\"Choose\" />\n  </Specimen>\n  <Specimen label=\"disabled\">\n    <Select\n      aria-label=\"Blend mode, disabled\"\n      items={[...BLEND_MODES]}\n      defaultValue=\"ltp\"\n      disabled\n    />\n  </Specimen>\n</Specimens>",
+      "note": "A listbox, not a native select: the popup is portalled through the stamping contract, so it keeps the density of the island it was opened from.",
+      "interaction": "type-ahead jumps to a matching item; Escape closes and returns focus to the trigger."
+    }
+  ]
+}

package/manifest/components/separator.json

@@ -0,0 +1,53 @@
+{
+  "name": "Separator",
+  "slug": "separator",
+  "group": "primitives",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "A hairline rule that screen readers can see.\n\nWraps Base UI's `Separator`, which contributes `role=\"separator\"` and\n`aria-orientation`. The line itself is a 1px block painted with the `border`\ntoken rather than an actual CSS border: a bordered zero-height box collapses\nunpredictably inside flex rows, while a `h-px` block never does.\n\nStatic markup — no `\"use client\"`.",
+  "props": [
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes, merged over the hairline defaults."
+    }
+  ],
+  "typeReferences": [
+    "Omit<BaseSeparator.Props, \"className\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border"
+  ],
+  "summary": "A hairline rule that screen readers can see.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Separator />\n<div className=\"flex items-center gap-2\">a <Separator orientation=\"vertical\" /> b</div>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/separator",
+  "mdUrl": "/docs/components/separator.md",
+  "jsonUrl": "/r/components/separator.json",
+  "specimens": [
+    {
+      "title": "Separator",
+      "group": "primitives",
+      "components": [
+        "Separator"
+      ],
+      "code": "<div className=\"flex w-full max-w-[28rem] flex-col gap-(--cue-space-4)\">\n  <Separator />\n  <div className=\"flex h-8 items-center gap-(--cue-space-4)\">\n    <span className=\"font-mono text-(length:--cue-text-ui) text-fg-muted\">Cue 1</span>\n    <Separator orientation=\"vertical\" />\n    <span className=\"font-mono text-(length:--cue-text-ui) text-fg-muted\">3.0s</span>\n    <Separator orientation=\"vertical\" />\n    <span className=\"font-mono text-(length:--cue-text-ui) text-fg-muted\">HTP</span>\n  </div>\n</div>",
+      "note": "A hairline in either orientation.",
+      "interaction": "none."
+    }
+  ],
+  "todo": true
+}