division-ds 0.10.0 → 0.11.0

package/AGENTS.md

@@ -51,7 +51,7 @@ installs these rules into that project's `AGENTS.md`, `GEMINI.md` and Cursor rul
 `.claude/skills/` (Claude Code).
 
 An agent that supports MCP can have the docs and the same checks as tools instead:
-`claude mcp add division-ds -- npx -y division-ds@0.9.1 mcp` (`list_components`, `get_component`,
+`claude mcp add division-ds -- npx -y division-ds@0.10.0 mcp` (`list_components`, `get_component`,
 `search`, `get_tokens`, `validate_code`, `check_contrast`, `get_add_command`,
 `get_review_checklist`, and two that report back: `request_change` and `report_drift`, which open
 an issue on the public repository instead of patching the installed copy).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "division-ds",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Checks a project that uses Division DS components (raw colours, invented tokens, touching buttons, unknown props), and serves the docs and the same checks to agents over MCP.",
   "license": "MIT",
   "author": "Victor Ilioiu",

package/public/docs/components/progress.md

@@ -25,6 +25,7 @@ Paths are from the Division DS repository root. Installed with shadcn they start
 | `showValue` | `boolean` | `false` | Shows the percentage (or "In progress") as a readout. |
 | `tone` | `'signal' \| 'ok' \| 'warning' \| 'hostile'` | `'signal'` | The fill colour. signal paints accent.signal.indicator to match Slider. On the track in light theme that’s a 2.80:1 contrast ratio, below the 3:1 a bar needs when it’s the only sign of progress. So set showValue there. |
 | `allowOverMax` | `boolean` | `false` | Shows a value above max as it is instead of clamping it, for a budget at 112%. The track rescales to span the value, a marker shows where max sits, the part past it paints hostile, and the readout shows the real value (112%) in hostile. aria-valuenow is the real value, and aria-valuetext reads "112%, 12% over". |
+| `shape` | `'bar' \| 'ring'` | `'bar'` | ring draws a circular indicator with the readout in its centre and the label beneath, for a countdown or session timer. It takes the same value and max, It is not a live region, so a ticking timer stays quiet; announce milestones from your own status message. allowOverMax does not apply to it: the value is clamped. |
 | `className` | `string` |  | Merged with the outer wrapper’s classes. Later Tailwind utilities (Tailwind is the CSS framework the system is styled with) win. |
 | `ref` | `Ref<HTMLDivElement>` |  | Passed through to the Radix Progress root, which is the bar itself. Radix is the library of accessible building blocks this component sits on. |
 | `...rest` | `Omit<HTMLAttributes<HTMLDivElement>, 'children'>` |  | Every native div prop except children, spread onto the outer wrapper, so a molecule can attach a data-testid there. children is typed away because this component draws its own label row and track, and a children prop would be thrown away without any warning. |
@@ -85,6 +86,15 @@ Each is compiled and rendered on the docs page. Imports are omitted; see above.
 </div>
 ```
 
+### Ring
+
+```tsx
+<div className="flex gap-6">
+  <Progress shape="ring" label="Focus session" value={18} max={25} showValue />
+  <Progress shape="ring" label="Break" value={2} max={5} tone="ok" showValue />
+</div>
+```
+
 ## Keyboard
 
 Not focusable. No keyboard behaviour of its own.

package/public/manifest/components.json

@@ -1783,6 +1783,12 @@
           "default": "false",
           "description": "Shows a value above max as it is instead of clamping it, for a budget at 112%. The track rescales to span the value, a marker shows where max sits, the part past it paints hostile, and the readout shows the real value (112%) in hostile. aria-valuenow is the real value, and aria-valuetext reads \"112%, 12% over\"."
         },
+        {
+          "name": "shape",
+          "type": "'bar' | 'ring'",
+          "default": "'bar'",
+          "description": "ring draws a circular indicator with the readout in its centre and the label beneath, for a countdown or session timer. It takes the same value and max, It is not a live region, so a ticking timer stays quiet; announce milestones from your own status message. allowOverMax does not apply to it: the value is clamped."
+        },
         {
           "name": "className",
           "type": "string",
@@ -1858,6 +1864,10 @@
         {
           "caption": "Over the limit",
           "source": "<div className=\"flex flex-col gap-4 w-full max-w-sm\">\n  <Progress label=\"Groceries\" value={64} tone=\"ok\" allowOverMax showValue />\n  <Progress label=\"Eating out\" value={112} tone=\"ok\" allowOverMax showValue />\n</div>"
+        },
+        {
+          "caption": "Ring",
+          "source": "<div className=\"flex gap-6\">\n  <Progress shape=\"ring\" label=\"Focus session\" value={18} max={25} showValue />\n  <Progress shape=\"ring\" label=\"Break\" value={2} max={5} tone=\"ok\" showValue />\n</div>"
         }
       ],
       "closed": false