@godxjp/ui 13.16.4 → 13.17.1

package/dist/components/data-display/timeline.d.ts

@@ -1,12 +1,27 @@
 import type { ReactNode } from "react";
+import { type LucideIcon } from "lucide-react";
+export type TimelineStatus = "done" | "current" | "pending";
+export type TimelineVariant = "icon" | "ordinal" | "status";
 export type TimelineItem = {
     title: ReactNode;
     location?: ReactNode;
     time?: ReactNode;
     note?: ReactNode;
+    /** Shorthand for `status: "current"`. `status` wins when both are set. */
     current?: boolean;
+    /** Explicit 3-state. Resolves as `status ?? (current ? "current" : <legacy>)`. */
+    status?: TimelineStatus;
+    /** Per-item glyph override; wins over the variant/status auto-glyph. */
+    icon?: LucideIcon;
 };
 export type TimelineProps = {
     items: TimelineItem[];
+    /**
+     * Rail glyph strategy. `icon` (default) keeps the legacy look (Plane for the
+     * current step, CheckCircle2 otherwise). `ordinal` numbers every step
+     * (1,2,3…) and lets status drive colour only. `status` picks the glyph by
+     * status: done → check, current → filled dot, pending → the step number.
+     */
+    variant?: TimelineVariant;
 };
-export declare function Timeline({ items }: TimelineProps): import("react/jsx-runtime").JSX.Element;
+export declare function Timeline({ items, variant }: TimelineProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-display/timeline.js

@@ -1,22 +1,72 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CheckCircle2, Plane } from "lucide-react";
-function Timeline({ items }) {
-  return /* @__PURE__ */ jsx("ol", { className: "ui-timeline", children: items.map((item, index) => {
-    const Icon = item.current ? Plane : CheckCircle2;
+import { Check, CheckCircle2, Plane } from "lucide-react";
+const SR_PREFIX = {
+  done: "Completed: ",
+  current: "Current: ",
+  pending: "Upcoming: "
+};
+function resolveStatus(item) {
+  if (item.status) {
+    return item.status;
+  }
+  if (item.current) {
+    return "current";
+  }
+  return "done";
+}
+function Timeline({ items, variant = "icon" }) {
+  return /* @__PURE__ */ jsx("ol", { className: "ui-timeline", "data-variant": variant, children: items.map((item, index) => {
+    const status = resolveStatus(item);
+    const isCurrent = status === "current";
+    const ordinal = index + 1;
+    const lineCompleted = status === "done" || status === "current";
+    let glyph;
+    if (item.icon) {
+      const Icon = item.icon;
+      glyph = /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" });
+    } else if (variant === "ordinal") {
+      glyph = /* @__PURE__ */ jsx("span", { className: "ui-timeline-ordinal", children: ordinal });
+    } else if (variant === "status") {
+      if (status === "done") {
+        glyph = /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" });
+      } else if (status === "current") {
+        glyph = /* @__PURE__ */ jsx("span", { className: "ui-timeline-pip", "aria-hidden": "true" });
+      } else {
+        glyph = /* @__PURE__ */ jsx("span", { className: "ui-timeline-ordinal", children: ordinal });
+      }
+    } else {
+      const Icon = isCurrent ? Plane : CheckCircle2;
+      glyph = /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" });
+    }
     return /* @__PURE__ */ jsxs(
       "li",
       {
         className: "ui-timeline-item",
-        "aria-current": item.current ? "step" : void 0,
+        "data-status": status,
+        "aria-current": isCurrent ? "step" : void 0,
         children: [
           /* @__PURE__ */ jsxs("div", { className: "ui-timeline-rail", children: [
-            /* @__PURE__ */ jsx("span", { className: "ui-timeline-dot", "data-current": item.current ? "true" : void 0, children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }) }),
-            index !== items.length - 1 ? /* @__PURE__ */ jsx("span", { className: "ui-timeline-line" }) : null
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "ui-timeline-dot",
+                "data-status": status,
+                "data-current": isCurrent ? "true" : void 0,
+                children: glyph
+              }
+            ),
+            index !== items.length - 1 ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "ui-timeline-line",
+                "data-completed": lineCompleted ? "true" : void 0
+              }
+            ) : null
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "ui-timeline-body", children: [
             /* @__PURE__ */ jsxs("div", { className: "ui-timeline-head", children: [
-              /* @__PURE__ */ jsxs("span", { className: "ui-timeline-title", children: [
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: item.current ? "Current: " : "Completed: " }),
+              /* @__PURE__ */ jsxs("span", { className: "ui-timeline-title", "data-current": isCurrent ? "true" : void 0, children: [
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: SR_PREFIX[status] }),
                 item.title
               ] }),
               item.time ? /* @__PURE__ */ jsx("span", { className: "ui-timeline-time", children: item.time }) : null

package/dist/styles/data-display-layout.css

@@ -149,14 +149,34 @@
     width: 1.5rem;
     height: 1.5rem;
     place-items: center;
+    border: 1px solid transparent;
     border-radius: var(--radius-pill);
     background: hsl(var(--success));
     color: hsl(var(--success-foreground));
+    font-size: var(--timeline-note-font-size);
+    font-weight: var(--font-weight-medium);
+    line-height: 1;
+  }
+
+  /* done → success fill. */
+  .ui-timeline-dot[data-status="done"] {
+    background: hsl(var(--success));
+    color: hsl(var(--success-foreground));
   }
 
+  /* current → primary fill + ring (also the legacy data-current shorthand). */
+  .ui-timeline-dot[data-status="current"],
   .ui-timeline-dot[data-current="true"] {
     background: hsl(var(--primary));
     color: hsl(var(--primary-foreground));
+    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.18);
+  }
+
+  /* pending → muted outline on the surface (no fill). */
+  .ui-timeline-dot[data-status="pending"] {
+    border-color: hsl(var(--border));
+    background: hsl(var(--background));
+    color: hsl(var(--muted-foreground));
   }
 
   .ui-timeline-dot svg {
@@ -164,6 +184,15 @@
     height: 0.75rem;
   }
 
+  /* current pip glyph for variant="status" (filled inner dot). */
+  .ui-timeline-pip {
+    display: block;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: var(--radius-pill);
+    background: currentColor;
+  }
+
   .ui-timeline-line {
     width: 1px;
     min-height: 2.25rem;
@@ -171,6 +200,11 @@
     background: hsl(var(--border));
   }
 
+  /* The segment below a done/current step reads as travelled (completed). */
+  .ui-timeline-line[data-completed="true"] {
+    background: hsl(var(--primary));
+  }
+
   .ui-timeline-head {
     display: flex;
     align-items: center;
@@ -182,6 +216,11 @@
     font-weight: var(--font-weight-medium);
   }
 
+  .ui-timeline-title[data-current="true"] {
+    color: hsl(var(--primary));
+    font-weight: var(--font-weight-semibold);
+  }
+
   .ui-timeline-time,
   .ui-timeline-location,
   .ui-timeline-note {

package/dist/styles/form-layout.css

@@ -20,6 +20,12 @@
   .ui-form-field {
     display: grid;
     gap: var(--field-label-gap);
+    /* Never stretch to a taller grid-row sibling (e.g. a field carrying a
+     * helper/error). Stretching would let .ui-form-field-control's
+     * align-content:center vertically centre the control, so a field WITHOUT a
+     * helper sits lower than one WITH a helper in the same ResponsiveGrid row.
+     * Hugging content keeps every control top-aligned across the row. */
+    align-self: start;
   }
 
   .ui-form-field-label {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/ui",
-  "version": "13.16.4",
+  "version": "13.17.1",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,