@cueplusplus/ui 0.18.2 → 0.20.0

package/manifest/components/date-picker.json

@@ -230,12 +230,14 @@
     "--cue-paint-stroke-to",
     "--cue-paint-stroke-width",
     "--cue-radius-control",
+    "--cue-radius-scale",
     "--cue-space-2",
     "--cue-space-3",
     "--cue-space-4",
     "--cue-space-5",
     "--cue-style-body-weight",
     "--cue-style-check-edge",
+    "--cue-style-control-radius",
     "--cue-style-control-step-size",
     "--cue-style-disabled-edge",
     "--cue-style-disabled-fill",
@@ -244,6 +246,7 @@
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",
+    "--cue-style-field-radius",
     "--cue-style-focus-edge",
     "--cue-style-focus-width",
     "--cue-style-glyph-ink",

package/manifest/components/date-range-picker.json

@@ -230,12 +230,14 @@
     "--cue-paint-stroke-to",
     "--cue-paint-stroke-width",
     "--cue-radius-control",
+    "--cue-radius-scale",
     "--cue-space-2",
     "--cue-space-3",
     "--cue-space-4",
     "--cue-space-5",
     "--cue-style-body-weight",
     "--cue-style-check-edge",
+    "--cue-style-control-radius",
     "--cue-style-control-step-size",
     "--cue-style-disabled-edge",
     "--cue-style-disabled-fill",
@@ -244,6 +246,7 @@
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",
+    "--cue-style-field-radius",
     "--cue-style-focus-edge",
     "--cue-style-focus-width",
     "--cue-style-glyph-ink",

package/manifest/components/delegation-card.json

@@ -153,6 +153,7 @@
   "defaultVariants": {},
   "tokensUsed": [
     "--cue-border",
+    "--cue-border-strong",
     "--cue-danger",
     "--cue-fg-muted",
     "--cue-fg-subtle",
@@ -162,10 +163,15 @@
     "--cue-icon-sm",
     "--cue-ok",
     "--cue-radius-control",
+    "--cue-radius-scale",
     "--cue-space-2",
     "--cue-space-3",
     "--cue-space-4",
     "--cue-space-5",
+    "--cue-style-control-radius",
+    "--cue-style-field-hover-edge",
+    "--cue-style-field-pad",
+    "--cue-style-field-radius",
     "--cue-style-focus-width",
     "--cue-text-micro",
     "--cue-text-ui"

package/manifest/components/density.json

@@ -48,13 +48,14 @@
     },
     {
       "name": "styleSet",
-      "type": "\"console\" | \"editorial\" | \"marketing\" | \"graphite\" | \"tender\" | \"zine\" | \"kiln\" | \"porcelain\"",
+      "type": "\"command\" | \"console\" | \"editorial\" | \"marketing\" | \"graphite\" | \"tender\" | \"zine\" | \"kiln\" | \"porcelain\" | \"ledger\" | \"monolith\" | \"prism\"",
       "required": false,
       "defaultValue": null,
       "description": "A style set for this subtree: `console`, `editorial`, `marketing` or\n`graphite`.\n\nOptional, and **absent means inherit** — an island that names none stamps no\n`data-style` and passes the ambient set straight through, exactly as a bare\n`<Density>` does today. Naming one is what makes this the library's island\nform of the fourth axis, and there are two reasons to reach for it:\n\n- `console` inside a page that is not console. That is the whole job of the\n  default set: it restates the `:root` defaults, so a subtree stamped with\n  it renders the ordinary look inside a page under any other set.\n- Moving the band rhythm with the rung. `--cue-band-y` is\n  `calc(var(--cue-space-7) * 2)` declared on the `[data-style]` element, and\n  a custom property's `var()` references are substituted where they are\n  declared — so a nested density island moves `--cue-space-*` but inherits\n  the rhythm already resolved above it. Restating the set here re-resolves\n  it against this island's rung, which is how a denser island gets a\n  proportionally tighter band instead of the outer one's.\n\nThe library restates the set for you where an island changes what a set's\nvalues read besides the rung — the theme's inks, the pairing's faces: a\nnested `ThemeProvider` that names a theme or a mode, and a `Preview` stage\nwith a theme, a mode or a pairing, stamp the set and the pack in force\nbeside it. This island changes only the rung, so it does not, and the\nrhythm above stays the opt-in the second bullet describes.",
       "control": {
         "kind": "enum",
         "members": [
+          "command",
           "console",
           "editorial",
           "marketing",
@@ -62,7 +63,10 @@
           "tender",
           "zine",
           "kiln",
-          "porcelain"
+          "porcelain",
+          "ledger",
+          "monolith",
+          "prism"
         ]
       }
     },

package/manifest/components/dialog.json

@@ -166,7 +166,6 @@
     "--cue-control-sm",
     "--cue-fg",
     "--cue-fg-muted",
-    "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
@@ -195,6 +194,7 @@
     "--cue-style-body-size",
     "--cue-style-body-weight",
     "--cue-style-control-face",
+    "--cue-style-control-radius",
     "--cue-style-dialog-pad",
     "--cue-style-dialog-radius",
     "--cue-style-display-variation",

package/manifest/components/dmx-bar.json

@@ -64,7 +64,6 @@
     "--cue-data-ground",
     "--cue-fg",
     "--cue-fg-muted",
-    "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
@@ -91,6 +90,7 @@
     "--cue-style-body-size",
     "--cue-style-body-weight",
     "--cue-style-control-face",
+    "--cue-style-control-radius",
     "--cue-style-display-variation",
     "--cue-style-group-label-ink",
     "--cue-style-group-label-pad",

package/manifest/components/dmx-strip.json

@@ -74,7 +74,6 @@
     "--cue-data-ground",
     "--cue-fg",
     "--cue-fg-muted",
-    "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
@@ -101,6 +100,7 @@
     "--cue-style-body-size",
     "--cue-style-body-weight",
     "--cue-style-control-face",
+    "--cue-style-control-radius",
     "--cue-style-display-variation",
     "--cue-style-group-label-ink",
     "--cue-style-group-label-pad",

package/manifest/components/drawer.json

@@ -160,7 +160,6 @@
     "--cue-control-sm",
     "--cue-fg",
     "--cue-fg-muted",
-    "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
@@ -189,6 +188,7 @@
     "--cue-style-body-size",
     "--cue-style-body-weight",
     "--cue-style-control-face",
+    "--cue-style-control-radius",
     "--cue-style-dialog-radius",
     "--cue-style-display-variation",
     "--cue-style-group-label-ink",

package/manifest/components/dropdown-menu.json

@@ -248,6 +248,7 @@
     "--cue-style-body-size",
     "--cue-style-body-weight",
     "--cue-style-control-face",
+    "--cue-style-control-radius",
     "--cue-style-display-variation",
     "--cue-style-group-label-ink",
     "--cue-style-group-label-pad",

package/manifest/components/env-var-input.json

@@ -167,12 +167,14 @@
     "--cue-paint-stroke-to",
     "--cue-paint-stroke-width",
     "--cue-radius-control",
+    "--cue-radius-scale",
     "--cue-space-2",
     "--cue-space-3",
     "--cue-space-4",
     "--cue-space-5",
     "--cue-style-body-weight",
     "--cue-style-check-edge",
+    "--cue-style-control-radius",
     "--cue-style-control-step-size",
     "--cue-style-disabled-edge",
     "--cue-style-disabled-fill",
@@ -181,6 +183,7 @@
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",
+    "--cue-style-field-radius",
     "--cue-style-focus-edge",
     "--cue-style-focus-width",
     "--cue-style-input-face",

package/manifest/components/file-upload.json

@@ -167,11 +167,16 @@
     "--cue-icon-sm",
     "--cue-ok",
     "--cue-radius-control",
+    "--cue-radius-scale",
     "--cue-space-1",
     "--cue-space-2",
     "--cue-space-3",
     "--cue-space-4",
     "--cue-space-5",
+    "--cue-style-control-radius",
+    "--cue-style-field-hover-edge",
+    "--cue-style-field-pad",
+    "--cue-style-field-radius",
     "--cue-style-focus-width",
     "--cue-sunken",
     "--cue-surface-2",

package/manifest/components/font-scope.json

@@ -0,0 +1,82 @@
+{
+  "name": "FontScope",
+  "slug": "font-scope",
+  "group": "system",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A subtree set in another type pairing — and everything it opens with it.\n\n`ThemeProvider`'s `font` is root-level only: the pairing has no island, and a\nnested provider forwards it to the root. `data-font` on a `<div>` is enough\nfor the subtree's own tokens, and nothing more: a dialog or menu opened inside\nit mounts on `<body>`, stamped from the root's pairing, and unclassed text\nkeeps the family `<body>` computed, because a computed family does not follow\na token. `FontScope` does all three: it stamps `data-font`, asks for the\nfamily again on its own element, and republishes the pairing so every portal\nopened inside it is stamped with it and asks for the family too. It is what\n`Preview` does for a stage that names a pairing, as a component of its own.\n\nIt never calls `setFont`, so the root's pairing — and the visitor's stored\none — never moves. A gallery frame that draws a page in a Look of its own is\nthe case it exists for (structural Looks, spec 2026-10-02 §6.2).\n\nThe set and pack in force around it are restated beside `data-font`, once it\nmay restate, because their names read the pairing and a custom property's\n`var()`s are substituted where it is declared.",
+  "props": [
+    {
+      "name": "font",
+      "type": "\"source\" | \"system\" | \"geist\" | \"geist-mono\" | \"inter\" | \"plex\" | \"roboto\" | \"apple\" | \"office\" | \"inter-source\" | \"dm\" | \"calsans\" | \"fraunces-mono\" | \"jetbrains-mono\"",
+      "required": true,
+      "defaultValue": null,
+      "description": "The pairing this subtree is set in.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "source",
+          "system",
+          "geist",
+          "geist-mono",
+          "inter",
+          "plex",
+          "roboto",
+          "apple",
+          "office",
+          "inter-source",
+          "dm",
+          "calsans",
+          "fraunces-mono",
+          "jetbrains-mono"
+        ]
+      }
+    },
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "required": true,
+      "defaultValue": null,
+      "description": "What is set in it. Every overlay opened inside it is set in it too.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-font-sans"
+  ],
+  "summary": "A subtree set in another type pairing, and every dialog or menu it opens with it, without moving the root's.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<FontScope font=\"inter-source\">\n  <Dialog.Root>…</Dialog.Root>\n</FontScope>",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/font-scope",
+  "mdUrl": "/docs/components/font-scope.md",
+  "jsonUrl": "/r/components/font-scope.json",
+  "whenToUse": [
+    "A frame or specimen that draws a page in a Look of its own, where the pairing has to reach its overlays too.",
+    "A picker row or a comparison that shows one pairing beside the page's."
+  ],
+  "whenNotToUse": [
+    "Changing the page's own pairing. That is `ThemeProvider`'s `font`, at the root, or its `setFont`.",
+    "A heading in another face. A class on the element is enough; a scope re-sets everything under it."
+  ],
+  "commonMistakes": [
+    "Stamping `data-font` on a `<div>` and expecting a dialog opened inside it to follow. The dialog mounts on `<body>`; only the scope carries the pairing to it.",
+    "Passing `font` to a nested `ThemeProvider`. The pairing is root-level there, and a nested provider forwards it to the root."
+  ]
+}

package/manifest/components/footer.json

@@ -69,7 +69,6 @@
     "--cue-band-y",
     "--cue-border",
     "--cue-fg-muted",
-    "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-space-3",
     "--cue-space-5",

package/manifest/components/gloss-object.json

@@ -0,0 +1,81 @@
+{
+  "name": "GlossObject",
+  "slug": "gloss-object",
+  "group": "brand",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "A glossy, iridescent object for a marketing hero — the chrome-ring and gloss\nlettermark look (spec 2026-10-02 §3.4). Drawn with layered radial and linear\ngradients of the theme's accent against the foreground's mix, plus a specular\nhighlight in the accent's own ink (`--cue-accent-fg`), so it is the Look's own colour and never a copied render.\nDecorative: hidden from assistive technology.\n\nStatic markup — no `\"use client\"`.",
+  "props": [
+    {
+      "name": "shape",
+      "type": "\"mark\" | \"torus\" | \"knot\"",
+      "required": false,
+      "defaultValue": "torus",
+      "description": "The object: a ring, a knot of two rings, or a rounded mark. Defaults to `\"torus\"`.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "mark",
+          "torus",
+          "knot"
+        ]
+      }
+    },
+    {
+      "name": "seed",
+      "type": "number",
+      "required": false,
+      "defaultValue": "1",
+      "description": "Tilts the highlight. Defaults to `1`.",
+      "control": {
+        "kind": "number"
+      }
+    }
+  ],
+  "typeReferences": [
+    "React.SVGProps<SVGSVGElement>"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-accent-fg",
+    "--cue-fg"
+  ],
+  "summary": "A glossy, iridescent object — a ring, two rings or a rounded mark — in the theme's accent.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<GlossObject shape=\"knot\" className=\"h-48 w-48\" />",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/gloss-object",
+  "mdUrl": "/docs/components/gloss-object.md",
+  "jsonUrl": "/r/components/gloss-object.json",
+  "whenToUse": [
+    "A marketing hero's centrepiece, or art between sections."
+  ],
+  "whenNotToUse": [
+    "Icons or small UI marks. It is a hero-scale decoration."
+  ],
+  "commonMistakes": [
+    "Expecting a 3D render. It is layered gradients, drawn in the Look's own colour."
+  ],
+  "specimens": [
+    {
+      "title": "GlossObject",
+      "group": "brand",
+      "components": [
+        "GlossObject"
+      ],
+      "code": "<Specimens>\n  {([\"torus\", \"knot\", \"mark\"] as const).map((shape) => (\n    <Specimen key={shape} label={shape}>\n      <GlossObject shape={shape} className=\"size-40\" />\n    </Specimen>\n  ))}\n</Specimens>",
+      "note": "A glossy object of layered gradients over an authored outline, lit in the accent.",
+      "interaction": "none."
+    }
+  ]
+}

package/manifest/components/grid.json

@@ -9,17 +9,17 @@
   "props": [
     {
       "name": "cols",
-      "type": "4 | 1 | 2 | 3 | 5 | 6",
+      "type": "1 | 2 | 4 | 3 | 5 | 6",
       "required": false,
       "defaultValue": "1",
       "description": "How many equal columns. Defaults to `1`. Ignored when `minItemWidth` is set.",
       "control": {
         "kind": "enum",
         "members": [
-          4,
           1,
           2,
           3,
+          4,
           5,
           6
         ],
@@ -29,7 +29,7 @@
     },
     {
       "name": "gap",
-      "type": "0 | 4 | 8 | 1 | 2 | 3 | 5 | 6 | 7",
+      "type": "0 | 1 | 2 | 4 | 8 | 3 | 5 | 6 | 7",
       "required": false,
       "defaultValue": "4",
       "description": "Which rung of the density space ladder to spend between cells. Defaults to `4`.",
@@ -37,14 +37,14 @@
         "kind": "enum",
         "members": [
           0,
-          4,
-          8,
           1,
           2,
           3,
+          4,
           5,
           6,
-          7
+          7,
+          8
         ],
         "min": 0,
         "max": 8

package/manifest/components/halftone.json

@@ -0,0 +1,79 @@
+{
+  "name": "Halftone",
+  "slug": "halftone",
+  "group": "brand",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "A halftone dot screen over a generated form — the engraved, printed look of a\ndeveloper-tool landing page (spec 2026-10-02 §3.4). Every dot's size is the\nform's density at that cell, so the picture is drawn by the screen itself\nrather than filtered from an image, and nothing is fetched. Dots are the\nforeground ink. Decorative: hidden from assistive technology.\n\nStatic markup — no `\"use client\"`.",
+  "props": [
+    {
+      "name": "shape",
+      "type": "\"wave\" | \"orb\" | \"ridge\"",
+      "required": false,
+      "defaultValue": "ridge",
+      "description": "The generated form the dots describe. Defaults to `\"ridge\"`.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "wave",
+          "orb",
+          "ridge"
+        ]
+      }
+    },
+    {
+      "name": "seed",
+      "type": "number",
+      "required": false,
+      "defaultValue": "1",
+      "description": "Which variant of the form. Defaults to `1`.",
+      "control": {
+        "kind": "number"
+      }
+    }
+  ],
+  "typeReferences": [
+    "React.SVGProps<SVGSVGElement>"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg"
+  ],
+  "summary": "A halftone dot screen over a generated form: the engraved, printed developer-tool motif.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Halftone shape=\"orb\" className=\"h-72 w-72\" />",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/halftone",
+  "mdUrl": "/docs/components/halftone.md",
+  "jsonUrl": "/r/components/halftone.json",
+  "whenToUse": [
+    "Hero art on a developer-tool or documentation landing page."
+  ],
+  "whenNotToUse": [
+    "Turning a photograph into halftone. It draws only its generated forms and fetches nothing."
+  ],
+  "commonMistakes": [
+    "Using it at a few pixels. The dot screen needs room; below ~120px the form is lost."
+  ],
+  "specimens": [
+    {
+      "title": "Halftone",
+      "group": "brand",
+      "components": [
+        "Halftone"
+      ],
+      "code": "<Specimens>\n  {([\"ridge\", \"wave\", \"orb\"] as const).map((shape) => (\n    <Specimen key={shape} label={shape}>\n      <Halftone shape={shape} className=\"size-40\" />\n    </Specimen>\n  ))}\n</Specimens>",
+      "note": "A dot screen over a generated form, drawn by the screen itself rather than filtered from an image. Nothing is fetched.",
+      "interaction": "none."
+    }
+  ]
+}