@momoi-labs/kiso-react 0.7.0 → 0.8.0

package/README.md

@@ -66,6 +66,8 @@ Data and structure
   primary action in the top bar and no sidebar rail.
 - Split, Pane, and Splitter, a list-detail layout with a resizable divider.
 - LogView, LogViewLine, LogViewTime, and LogViewLevel.
+- StepList, a run's steps with a state each, and StepBar, the same run as
+  one segment per step for a summary, a table cell, or a toast.
 - Stat, StatHeader, StatLabel, StatValue, StatFoot, and StatDelta.
 - KV, KVKey, and KVValue, a description list of fixed facts.
 - Separator, horizontal or vertical, and Dot and `dotVariants`.
@@ -82,6 +84,10 @@ Navigation
 - ThemeSelector, a controlled selector. The application owns theme persistence
   and applies `data-theme="light"` or `data-theme="dark"` to the document root.
   Remove the attribute for system mode.
+- AccentSelector, a controlled selector, plus the `accents` list and `Accent`
+  type. The application owns accent persistence and applies
+  `data-accent="<name>"` to the document root, or to any container that should
+  carry its own accent. No attribute means violet.
 
 Feedback
 

package/dist/accent-selector.d.ts

@@ -0,0 +1,9 @@
+export declare const accents: readonly ["violet", "terracotta", "teal", "cobalt", "nocturne"];
+export type Accent = (typeof accents)[number];
+export declare function AccentSelector({ accent, onChange, options, preview, }: {
+    accent: string;
+    onChange: (accent: Accent) => void;
+    options?: readonly Accent[];
+    /** Render the live preview of the selected accent below the pills. */
+    preview?: boolean;
+}): import("react").JSX.Element;

package/dist/accent-selector.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const accents = [
+    "violet",
+    "terracotta",
+    "teal",
+    "cobalt",
+    "nocturne",
+];
+const label = (accent) => `${accent[0].toUpperCase()}${accent.slice(1)}`;
+export function AccentSelector({ accent, onChange, options = accents, preview = true, }) {
+    return (_jsxs("div", { className: "accent-row", children: [_jsxs("div", { className: "theme-row", children: [_jsx("span", { className: "t-label", children: "Accent" }), _jsx("div", { className: "accent-pills", role: "group", "aria-label": "Accent", children: options.map((option) => (_jsxs("button", { type: "button", className: "accent-pill", "aria-pressed": accent === option, "data-accent": option, onClick: () => onChange(option), children: [_jsx("span", { className: "accent-dot", "aria-hidden": "true" }), label(option)] }, option))) })] }), preview && (_jsxs("div", { className: "accent-preview", "data-accent": accent, "aria-hidden": "true", children: [_jsxs("span", { className: "accent-preview-sidebar", children: [_jsx("i", {}), _jsx("i", {}), _jsx("i", {}), _jsx("i", {})] }), _jsxs("span", { className: "accent-preview-main", children: [_jsx("i", { className: "accent-preview-title" }), _jsx("i", { className: "accent-preview-text" }), _jsx("i", { className: "accent-preview-link" }), _jsxs("span", { className: "accent-preview-actions", children: [_jsx("i", { className: "accent-preview-primary" }), _jsx("i", { className: "accent-preview-secondary" })] }), _jsx("i", { className: "accent-preview-selected" })] })] }))] }));
+}

package/dist/form.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps, ReactNode } from "react";
+type FormProps = ComponentProps<"form">;
+declare function Form({ className, ...props }: FormProps): import("react").JSX.Element;
+type FormActionsProps = ComponentProps<"div"> & {
+    sticky?: boolean;
+    tone?: "neutral" | "warning" | "danger";
+    message?: ReactNode;
+};
+declare function FormActions({ className, sticky, tone, message, children, ...props }: FormActionsProps): import("react").JSX.Element;
+export { Form, FormActions };
+export type { FormProps, FormActionsProps };

package/dist/form.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+function Form({ className, ...props }) {
+    return _jsx("form", { "data-slot": "form", className: clsx("form", className), ...props });
+}
+function FormActions({ className, sticky = false, tone = "neutral", message, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "form-actions", "data-sticky": sticky || undefined, "data-tone": tone, className: clsx("form-actions", className), ...props, children: [_jsx("div", { className: "form-actions-message", role: "status", "aria-atomic": "true", children: message }), _jsx("div", { className: "form-actions-buttons", children: children })] }));
+}
+export { Form, FormActions };

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export * from "./drawer.js";
 export * from "./dropdown-menu.js";
 export * from "./empty-state.js";
 export * from "./form-field.js";
+export * from "./form.js";
 export * from "./header.js";
 export * from "./input.js";
 export * from "./kv.js";
@@ -40,6 +41,7 @@ export * from "./tabs.js";
 export * from "./terminal-icon.js";
 export * from "./textarea.js";
 export * from "./theme-selector.js";
+export * from "./accent-selector.js";
 export * from "./toast.js";
 export * from "./tooltip.js";
 export * from "./validation-message.js";
@@ -50,3 +52,4 @@ export * from "./bar-gauge.js";
 export * from "./disclosure.js";
 export * from "./time-range-control.js";
 export * from "./dashboard-grid.js";
+export * from "./step-list.js";

package/dist/index.js

@@ -16,6 +16,7 @@ export * from "./drawer.js";
 export * from "./dropdown-menu.js";
 export * from "./empty-state.js";
 export * from "./form-field.js";
+export * from "./form.js";
 export * from "./header.js";
 export * from "./input.js";
 export * from "./kv.js";
@@ -41,6 +42,7 @@ export * from "./tabs.js";
 export * from "./terminal-icon.js";
 export * from "./textarea.js";
 export * from "./theme-selector.js";
+export * from "./accent-selector.js";
 export * from "./toast.js";
 export * from "./tooltip.js";
 export * from "./validation-message.js";
@@ -51,3 +53,4 @@ export * from "./bar-gauge.js";
 export * from "./disclosure.js";
 export * from "./time-range-control.js";
 export * from "./dashboard-grid.js";
+export * from "./step-list.js";

package/dist/step-list.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+export type StepState = "pending" | "running" | "done" | "skipped" | "failed";
+export type StepItem = {
+    key: string;
+    label: string;
+    state: StepState;
+    meta?: string;
+    detail?: React.ReactNode;
+};
+export type StepListProps = Omit<React.ComponentProps<"ol">, "children" | "onSelect"> & {
+    label: string;
+    steps: readonly StepItem[];
+    selected?: string | null;
+    onSelect?: (key: string) => void;
+};
+export declare function StepList({ label, steps, selected, onSelect, className, ...props }: StepListProps): React.JSX.Element;
+export type StepBarProps = Omit<React.ComponentProps<"div">, "children"> & {
+    label: string;
+    steps: readonly {
+        key: string;
+        label: string;
+        state: StepState;
+        progress?: number | null;
+    }[];
+};
+export declare function StepBar({ label, steps, className, ...props }: StepBarProps): React.JSX.Element;

package/dist/step-list.js

@@ -0,0 +1,33 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+const STATE_TEXT = {
+    pending: "Pending", running: "Running", done: "Done", skipped: "Skipped", failed: "Failed",
+};
+const DEFAULT_META = { running: "Running", skipped: "Not needed" };
+/* The rail is the progress: each connector takes the state of the step below
+   it, so the line fills as the run advances. Nothing else measures it. */
+export function StepList({ label, steps, selected, onSelect, className, ...props }) {
+    return _jsx("ol", { ...props, "aria-label": label, "data-slot": "step-list", className: cn("step-list", className), children: steps.map(step => {
+            const row = _jsxs(_Fragment, { children: [_jsx("span", { className: "step-label", children: step.label }), _jsx("span", { className: "step-meta", children: step.meta ?? DEFAULT_META[step.state] ?? "" })] });
+            return _jsxs("li", { "data-slot": "step", "data-state": step.state, className: "step", "aria-current": step.state === "running" ? "step" : undefined, children: [_jsx("span", { className: "step-rail", "aria-hidden": "true", children: _jsx("span", { className: "step-mark" }) }), _jsxs("div", { className: "step-body", children: [onSelect
+                                ? _jsx("button", { type: "button", className: "step-row", "aria-pressed": selected === step.key, "aria-label": `${step.label}, ${STATE_TEXT[step.state].toLowerCase()}`, onClick: () => onSelect(step.key), children: row })
+                                : _jsx("div", { className: "step-row", role: "img", "aria-label": `${step.label}, ${STATE_TEXT[step.state].toLowerCase()}`, children: row }), step.detail != null && _jsx("div", { className: "step-detail", children: step.detail })] })] }, step.key);
+        }) });
+}
+/* One segment per step, coloured by state. The product writes the count and
+   the current step beside it; the bar only names them for assistive tech. */
+export function StepBar({ label, steps, className, ...props }) {
+    const failed = steps.findIndex(step => step.state === "failed");
+    const running = steps.findIndex(step => step.state === "running");
+    const at = failed >= 0 ? failed : running;
+    const finished = steps.length > 0 && steps.every(step => step.state === "done" || step.state === "skipped");
+    const name = at >= 0
+        ? `${label}: ${failed >= 0 ? "failed at" : "running"} step ${at + 1} of ${steps.length}, ${steps[at].label}`
+        : finished ? `${label}: all ${steps.length} steps done` : `${label}: not started`;
+    return _jsx("div", { ...props, role: "img", "aria-label": name, "data-slot": "step-bar", className: cn("step-bar", className), children: steps.map(step => {
+            const progress = step.state === "running" && step.progress != null && Number.isFinite(step.progress)
+                ? `${Math.min(1, Math.max(0, step.progress)) * 100}%` : undefined;
+            return _jsx("span", { "data-state": step.state, title: step.label, style: progress !== undefined ? { "--step-progress": progress } : undefined }, step.key);
+        }) });
+}

package/dist/styles.css

@@ -21,6 +21,69 @@
   color: var(--color-foreground);
   box-shadow: var(--shadow-xs);
 }
+/* AccentSelector: a pill row that chooses, and one preview that answers.
+   Each pill and the preview carry their own data-accent, so their colours
+   resolve under that accent without any inline values. */
+.accent-row { display: grid; gap: var(--spacing-sm); }
+/* Only the variant with a preview is a block-level settings row and can be a
+   size container; inline-size containment would collapse the preview-less
+   variant to zero width inside a toolbar's flex row. */
+.accent-row:has(.accent-preview) { container-type: inline-size; }
+.accent-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--spacing-xs); }
+/* Narrow hosts (a sidebar footer) stack the label over a two-column grid of
+   pills instead of wrapping them ragged beside it. */
+@container (width < 360px) {
+  .accent-row .theme-row { flex-direction: column; align-items: stretch; }
+  .accent-pills { display: grid; grid-template-columns: 1fr 1fr; }
+  .accent-pill { justify-content: center; }
+}
+.accent-pill {
+  display: inline-flex; align-items: center; gap: var(--spacing-xs);
+  height: var(--size-control-xs);
+  padding-inline: var(--spacing-xs) var(--spacing-sm);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-full);
+  background: var(--color-card);
+  color: var(--color-muted-foreground);
+  font: inherit; font-size: var(--type-size-label);
+  cursor: pointer;
+  transition: background var(--motion-duration-fast) var(--motion-easing-standard),
+    border-color var(--motion-duration-fast) var(--motion-easing-standard);
+}
+.accent-pill:hover { background: var(--color-accent-surface); color: var(--color-foreground); }
+.accent-pill[aria-pressed="true"] {
+  border-color: var(--color-primary);
+  background: var(--color-accent-surface);
+  color: var(--color-foreground);
+  font-weight: var(--type-weight-medium);
+}
+.accent-dot { width: var(--spacing-md); height: var(--spacing-md); border-radius: var(--radius-full); background: var(--color-primary); }
+
+.accent-preview {
+  display: grid; grid-template-columns: 1fr 3fr;
+  height: 120px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--color-background);
+}
+.accent-preview i { display: block; border-radius: var(--radius-sm); }
+.accent-preview-sidebar {
+  display: grid; align-content: start; gap: var(--spacing-sm);
+  padding: var(--spacing-md) var(--spacing-sm);
+  background: var(--color-sidebar);
+  border-inline-end: 1px solid var(--color-border);
+}
+.accent-preview-sidebar i { height: var(--spacing-xs); width: 70%; background: var(--color-border-strong); }
+.accent-preview-sidebar i:nth-child(2) { width: 85%; background: var(--color-link); }
+.accent-preview-main { display: grid; align-content: start; gap: var(--spacing-sm); padding: var(--spacing-md); }
+.accent-preview-title { height: var(--spacing-sm); width: 55%; background: var(--color-foreground); opacity: .8; }
+.accent-preview-text { height: var(--spacing-xs); width: 80%; background: var(--color-muted-foreground); }
+.accent-preview-link { height: var(--spacing-xs); width: 40%; background: var(--color-link); }
+.accent-preview-actions { display: flex; gap: var(--spacing-sm); }
+.accent-preview-primary { height: var(--spacing-lg); width: 56px; background: var(--color-primary); }
+.accent-preview-secondary { height: var(--spacing-lg); width: 44px; border: 1px solid var(--color-border-strong); background: var(--color-card); }
+.accent-preview-selected { height: var(--spacing-md); background: var(--color-selected); }
 
 .kiso-checkbox {
   position: relative;

package/dist/time-range-control.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { clsx as cn } from "clsx";
 import { Button } from "./button.js";
+import { Form, FormActions } from "./form.js";
 import { Input } from "./input.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 const defaultPresets = [
@@ -40,7 +41,7 @@ function TimeRangeForm({ value, bounds, onApply }) {
     const [from, setFrom] = React.useState(dateInput(value.from));
     const [to, setTo] = React.useState(dateInput(value.to));
     const [error, setError] = React.useState("");
-    return _jsxs("form", { className: "stack-sm", onSubmit: event => {
+    return _jsxs(Form, { className: "stack-sm", onSubmit: event => {
             event.preventDefault();
             const range = { from: Date.parse(`${from}Z`), to: Date.parse(`${to}Z`) };
             if (!validRange(range) || range.from < bounds.from || range.to > bounds.to) {
@@ -48,5 +49,5 @@ function TimeRangeForm({ value, bounds, onApply }) {
                 return;
             }
             onApply(range);
-        }, children: [_jsx("label", { htmlFor: `${id}-from`, children: "From (UTC)" }), _jsx(Input, { id: `${id}-from`, type: "datetime-local", step: "0.001", required: true, value: from, min: dateInput(bounds.from), max: dateInput(bounds.to), onChange: event => { setFrom(event.target.value); setError(""); }, "aria-invalid": !!error, "aria-describedby": error ? `${id}-error` : undefined }), _jsx("label", { htmlFor: `${id}-to`, children: "To (UTC)" }), _jsx(Input, { id: `${id}-to`, type: "datetime-local", step: "0.001", required: true, value: to, min: dateInput(bounds.from), max: dateInput(bounds.to), onChange: event => { setTo(event.target.value); setError(""); }, "aria-invalid": !!error, "aria-describedby": error ? `${id}-error` : undefined }), error && _jsx("p", { id: `${id}-error`, role: "alert", className: "field-error", children: error }), _jsx(Button, { type: "submit", variant: "primary", children: "Apply range" })] });
+        }, children: [_jsx("label", { htmlFor: `${id}-from`, children: "From (UTC)" }), _jsx(Input, { id: `${id}-from`, type: "datetime-local", step: "0.001", required: true, value: from, min: dateInput(bounds.from), max: dateInput(bounds.to), onChange: event => { setFrom(event.target.value); setError(""); }, "aria-invalid": !!error, "aria-describedby": error ? `${id}-error` : undefined }), _jsx("label", { htmlFor: `${id}-to`, children: "To (UTC)" }), _jsx(Input, { id: `${id}-to`, type: "datetime-local", step: "0.001", required: true, value: to, min: dateInput(bounds.from), max: dateInput(bounds.to), onChange: event => { setTo(event.target.value); setError(""); }, "aria-invalid": !!error, "aria-describedby": error ? `${id}-error` : undefined }), error && _jsx("p", { id: `${id}-error`, role: "alert", className: "field-error", children: error }), _jsx(FormActions, { children: _jsx(Button, { type: "submit", variant: "primary", children: "Apply range" }) })] });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momoi-labs/kiso-react",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Kiso React components built with shadcn/ui and Radix",
   "type": "module",
   "license": "MIT",
@@ -32,7 +32,7 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@momoi-labs/kiso": "^0.10.0",
+    "@momoi-labs/kiso": "^0.11.0",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "radix-ui": "1.6.7",