@godxjp/ui-mcp 13.16.4 → 13.17.1

package/dist/index.js

@@ -1624,18 +1624,23 @@ import { ResponsiveGrid } from "@godxjp/ui/layout";
   {
     name: "Timeline",
     group: "data-display",
-    tagline: "Vertical event list with an icon rail. Current item gets a highlighted glyph.",
+    tagline: "Vertical event list with an icon rail. Current item gets a highlighted glyph. `variant` switches the rail to numbered (ordinal) or status-driven glyphs, and each item carries a 3-state `status` (done/current/pending) plus an optional per-item `icon`.",
     props: [
       {
         name: "items",
         type: "TimelineItem[]",
         required: true,
-        description: "Array of { title, location?, time?, note?, current? }."
+        description: "Array of `{ title, location?, time?, note?, current?, status?, icon? }`. `status` is the explicit 3-state ('done' | 'current' | 'pending'); `current: true` is shorthand for `status: 'current'`. `icon` (a LucideIcon) overrides the auto-glyph for that item."
+      },
+      {
+        name: "variant",
+        type: '"icon" | "ordinal" | "status"',
+        description: "Rail glyph strategy (default 'icon'). 'icon' = legacy look (Plane for current, CheckCircle2 otherwise). 'ordinal' = every glyph is its 1-based step number; status sets colour only. 'status' = glyph by status (done \u2192 check, current \u2192 filled dot, pending \u2192 step number)."
       }
     ],
     usage: [
-      "DO pass an array of `TimelineItem` objects to `items` \u2014 this is the ONLY prop; there are no sub-components to compose. Each item is `{ title, location?, time?, note?, current? }`. All fields except `title` are optional.",
-      "DO mark exactly one item with `current: true` to highlight the in-progress event. The component renders a `Plane` icon for the current item and a `CheckCircle2` icon for all past items \u2014 do NOT try to pass a custom icon; the icon is determined entirely by the `current` flag.",
+      "DO pass an array of `TimelineItem` objects to `items`. Each item is `{ title, location?, time?, note?, current?, status?, icon? }`. All fields except `title` are optional. The only other prop is `variant`.",
+      "DO mark the in-progress event with `current: true` (or `status: 'current'`). In the default `variant='icon'`, the current item renders a `Plane` icon and every other item a `CheckCircle2`. Use `variant='ordinal'` for a numbered route stepper (1,2,3\u2026) or `variant='status'` for a done\u2192check / current\u2192dot / pending\u2192number tracker. Pass `status: 'done' | 'current' | 'pending'` per item to drive colour and (in the status variant) the glyph; pass `icon` (a LucideIcon) to override the glyph for a single item.",
       "DO pass `ReactNode` to `title`, `location`, `time`, and `note` \u2014 you can embed formatted text, `<Badge>`, `<Badge>`, or `<span>` inside those fields. Use `formatDate` to pre-format timestamps before passing them as `time`.",
       "DO NOT hand-roll a vertical event list with divs, icons, and connector lines \u2014 that is exactly what Timeline ships. Do not apply extra padding or wrapping outside the component; it manages its own rail and spacing internally.",
       "DO NOT use Timeline for user-facing wizard progress (steps the user must complete in order) \u2014 use `Steps` for that. Timeline is read-only historical/status display; it has no interactive state, no `onClick`, and no concept of 'go to step'.",
@@ -1657,10 +1662,24 @@ import { ResponsiveGrid } from "@godxjp/ui/layout";
     ],
     example: `import { Timeline } from "@godxjp/ui/data-display";
 
+// Default icon variant
 <Timeline items={[
   { title: "\u6CE8\u6587\u53D7\u4ED8", time: "2024-06-01 10:00" },
   { title: "\u767A\u9001\u6E96\u5099\u4E2D", time: "2024-06-01 14:00" },
   { title: "\u914D\u9001\u4E2D", current: true },
+]} />
+
+// Numbered route stepper (Pattern A)
+<Timeline variant="ordinal" items={[
+  { title: "\u96C6\u8377", location: "\u6771\u4EAC \u2192 \u540D\u53E4\u5C4B", status: "pending" },
+  { title: "\u5E79\u7DDA\u8F38\u9001", location: "\u540D\u53E4\u5C4B \u2192 \u5927\u962A", status: "pending" },
+]} />
+
+// Status tracker (Pattern B): done \u2192 check, current \u2192 dot, pending \u2192 number
+<Timeline variant="status" items={[
+  { title: "\u8ACB\u6C42\u66F8\u3092\u767A\u884C", status: "done" },
+  { title: "\u627F\u8A8D\u5F85\u3061", status: "current" },
+  { title: "\u6D88\u8CBB\u7A0E\u3092\u8A08\u4E0A", status: "pending" },
 ]} />`,
     storyPath: "data-display/Timeline.stories.tsx",
     rules: []
@@ -11693,7 +11712,7 @@ ${c.example}
 // package.json
 var package_default = {
   name: "@godxjp/ui-mcp",
-  version: "13.16.4",
+  version: "13.17.1",
   description: "Model Context Protocol server for @godxjp/ui \u2014 gives Claude Code / Codex CLI / Cursor / any MCP-aware agent live access to the component catalog, prop vocabulary, design tokens, 45 cardinal rules, copy-paste-ready patterns, 12 design / taste skills synthesised from Leonxlnx/taste-skill, 20+ anti-AI-tell patterns, and a 50-check redesign audit \u2014 token-efficient (list \u2192 drill-down).",
   type: "module",
   main: "./dist/index.js",