@ciridae/ui 1.0.3 → 1.0.4

package/dist/components/skeletons.js

@@ -1,34 +1,75 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { css } from "#primitives/css";
+import { css, cx } from "#primitives/css";
 import { createTableColumns, Table } from "./data-grid.js";
 import { Cluster, MutedText, Stack, Text, Toolbar } from "./layout.js";
-import { Panel, PanelHeader } from "./panel.js";
+import { cardSurface, Panel, PanelHeader } from "./panel.js";
 import { Skeleton } from "./skeleton.js";
 // These placeholders stand in for product page chrome, so their spacing mirrors the page,
 // panel, and sidebar layouts a Crucible screen builds around them.
 /** Mirrors SidebarSection: its label's inset and the same gap between rows. */
-const sidebarSection = css({ display: "grid", gap: "layout.tightGap" });
+const sidebarSection = css({ display: "grid", gap: "control.trackInset" });
 const sidebarLabel = css({
     display: "flex",
     alignItems: "center",
     paddingInline: "control.compactInline",
-    marginBottom: "layout.controlGap",
-    fontSize: "body",
+    paddingTop: "layout.tightGap",
+    paddingBottom: "control.compactBlock",
+    fontSize: "code",
     lineHeight: "tight",
 });
 const sidebarRow = css({
     display: "flex",
     alignItems: "center",
-    gap: "control.iconGap",
-    height: "control.compact",
+    gap: "layout.controlGap",
+    height: "control.row",
     paddingInline: "control.compactInline",
 });
 const pageTitle = css({ fontSize: "heading.section" });
 const panelRow = css({
     paddingBlock: "control.block",
-    borderTop: "1px solid token(colors.border.subtle)",
+    borderTop: "1px solid token(colors.border.divider)",
     "&:first-of-type": { borderTop: "0" },
 });
+// A list row: two lines of copy over each other, then a status chip at the end.
+const listRow = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.contentGap",
+    padding: "control.block",
+    lineHeight: "tight",
+});
+const listRowCopy = css({ display: "grid", gap: "control.iconGap", flex: "1", minWidth: "0" });
+// A stat tile's and a card's placeholders wear the card they stand in for.
+const statTile = css(cardSurface, {
+    display: "grid",
+    alignContent: "start",
+    justifyItems: "start",
+    gap: "skeleton.tileGap",
+    minHeight: "tile.minimum",
+    paddingBlock: "tile.block",
+    paddingInline: "tile.inline",
+    lineHeight: "tight",
+});
+const card = css(cardSurface, {
+    display: "grid",
+    alignContent: "start",
+    gap: "layout.clusterGap",
+    minHeight: "skeleton.card",
+    padding: "panel.card",
+    lineHeight: "tight",
+});
+const cardHeader = css({ display: "grid", gap: "layout.controlGap" });
+const cardBars = css({
+    display: "grid",
+    alignContent: "center",
+    gap: "layout.contentGap",
+    minHeight: "skeleton.cardBody",
+});
+const cardBar = css({ display: "flex", alignItems: "center", gap: "layout.controlGap" });
+const cardTakeaway = css({
+    paddingTop: "panel.default",
+    borderTop: "1px solid token(colors.border.divider)",
+});
 const textWidths = ["72%", "54%", "64%", "46%"];
 /** Stands in for a labelled group of sidebar rows: a section label, then icon-and-name rows. */
 export function SidebarRowsSkeleton({ rows = 3 }) {
@@ -42,6 +83,28 @@ export function PageHeaderSkeleton({ avatar = false, actions = 0, }) {
 export function PanelSkeleton({ rows = 4 }) {
     return (_jsxs(Panel, { tone: "outline", children: [_jsx(PanelHeader, { level: 2, title: _jsx(Skeleton, { shape: "text", style: { width: 120 } }) }), _jsx("div", { children: Array.from({ length: rows }, (_, index) => (_jsxs(Toolbar, { justify: "between", className: panelRow, children: [_jsx(Skeleton, { shape: "text", style: { width: 80 } }), _jsx(Skeleton, { shape: "text", style: { width: 96 + (index % 3) * 24 } })] }, index))) })] }));
 }
+/* Each placeholder row varies its bars' widths, so a column of them does not read as a grid. */
+const listRowWidths = [
+    [220, 90],
+    [180, 120],
+    [200, 70],
+];
+/** Stands in for list rows: a line of text over a line of small print, then a status chip. */
+export function ListRowsSkeleton({ rows = 3 }) {
+    return (_jsx("div", { children: Array.from({ length: rows }, (_, index) => {
+            const [text, caption] = listRowWidths[index % listRowWidths.length];
+            return (_jsxs("div", { className: listRow, children: [_jsxs("div", { className: listRowCopy, children: [_jsx(Skeleton, { shape: "text", height: "line", style: { maxWidth: text } }), _jsx(Skeleton, { shape: "text", height: "smallLine", style: { maxWidth: caption } })] }), _jsx(Skeleton, { shape: "pill", width: "short" })] }, index));
+        }) }));
+}
+/** Stands in for a stat tile: its label, a small badge for the figure, and a line of small print. */
+export function StatTileSkeleton({ className }) {
+    return (_jsxs("div", { className: cx(statTile, className), children: [_jsx(Skeleton, { shape: "text", height: "line", style: { width: 100 } }), _jsx(Skeleton, { shape: "pill", height: "badge", style: { width: 48 } }), _jsx(Skeleton, { shape: "text", height: "smallLine", style: { width: 120 } })] }));
+}
+const cardBarWidths = ["35%", "46%", "60%", "23%"];
+/** Stands in for a card: a title and its meta line, labelled bars, and a takeaway under a rule. */
+export function CardSkeleton({ bars = 4 }) {
+    return (_jsxs("div", { className: card, children: [_jsxs("div", { className: cardHeader, children: [_jsx(Skeleton, { shape: "text", height: "line", style: { width: 170 } }), _jsx(Skeleton, { shape: "text", height: "smallLine", style: { maxWidth: 220 } })] }), _jsx("div", { className: cardBars, children: Array.from({ length: bars }, (_, index) => (_jsxs("div", { className: cardBar, children: [_jsx(Skeleton, { shape: "text", height: "smallLine", style: { width: 56 } }), _jsx(Skeleton, { height: "bar", width: cardBarWidths[index % cardBarWidths.length] })] }, index))) }), _jsx("div", { className: cardTakeaway, children: _jsx(Skeleton, { shape: "text", height: "smallLine", style: { maxWidth: 200 } }) })] }));
+}
 /** Placeholder for a row's compact edit and delete icon buttons. */
 export function RowActionsSkeleton() {
     return (_jsxs(Cluster, { gap: "12", render: _jsx("span", {}), children: [_jsx(Skeleton, { shape: "circle", style: { width: 24 } }), _jsx(Skeleton, { shape: "circle", style: { width: 24 } })] }));

package/dist/components/stages.d.ts

@@ -1,6 +1,5 @@
-import { type MenuItem } from "./menu.js";
 import type { Tone } from "./badge.js";
-import type { ComponentProps, ReactNode } from "react";
+import type { ComponentProps, ReactElement, ReactNode } from "react";
 /**
  * Where a step stands: `done`; `current`, the reader's to do; `waiting` on someone else; `agent`,
  * an agent is on it; `blocked`; `locked` until an earlier step lands; `todo`, ahead.
@@ -10,7 +9,7 @@ export type StepDotProps = Omit<ComponentProps<"span">, "children"> & {
     status: StepStatus;
     /** `medium` 16px, `small` 14px on rows and the strip, `chip` 12px inside chips. */
     size?: "chip" | "small" | "medium";
-    /** Drawn in place of the status icon, such as a count. */
+    /** Drawn in place of the status mark, such as a count. */
     children?: ReactNode;
 };
 /** A step's status as a dot; decorative, so the text beside it says the status. */
@@ -30,7 +29,7 @@ export type StageStripProps = Omit<ComponentProps<"ol">, "children" | "defaultVa
     value?: string;
     defaultValue?: string;
     onValueChange?: (id: string) => void;
-    /** Past this many stages the strip windows itself around the current one. Defaults to 7. */
+    /** Past this many stages the strip folds the finished ones and the tail. Defaults to 7. */
     maxVisible?: number;
 };
 export declare function StageStrip({ stages, value, defaultValue, onValueChange, maxVisible, className, ...props }: StageStripProps): import("react").JSX.Element;
@@ -45,6 +44,23 @@ export type StepAction = {
         content: ReactNode;
     };
 };
+/** One way forward from a stuck step. */
+export type HelpOption = {
+    label: string;
+    /** What choosing it does, in a line. */
+    detail?: string;
+    icon?: ReactNode;
+    onSelect?: () => void;
+};
+export type HelpMenuProps = {
+    trigger: ReactElement;
+    /** The header, such as "Stuck on this?". */
+    title: ReactNode;
+    /** Under the header, such as what changes once an option is chosen. */
+    detail?: ReactNode;
+    options: readonly HelpOption[];
+};
+export declare function HelpMenu({ trigger, title, detail, options }: HelpMenuProps): import("react").JSX.Element;
 export type CurrentStepProps = Omit<ComponentProps<"div">, "title"> & {
     /**
      * What the step asks of the reader: `warning` theirs to do, `success` ready or landing,
@@ -57,8 +73,8 @@ export type CurrentStepProps = Omit<ComponentProps<"div">, "title"> & {
     description?: ReactNode;
     primary?: StepAction;
     secondary?: StepAction;
-    /** A "Not sure?" menu beside the actions. */
-    help?: readonly MenuItem[];
+    /** A "Not sure?" help menu beside the actions. */
+    help?: Omit<HelpMenuProps, "trigger">;
     /** Something is under way: a spinner replaces the dot. */
     busy?: boolean;
     expanded?: boolean;
@@ -78,10 +94,21 @@ export type ConfirmationRowProps = Omit<ComponentProps<"div">, "children"> & {
 };
 /** A move that just landed, with when and an undo. */
 export declare function ConfirmationRow({ message, at, onUndo, labels: ownLabels, className, ...props }: ConfirmationRowProps): import("react").JSX.Element;
+export type RequirementProps = Omit<ComponentProps<"span">, "children"> & {
+    status: StepStatus;
+    children: ReactNode;
+    meta?: ReactNode;
+    nested?: boolean;
+};
+export declare function Requirement({ status, meta, nested, children, className, ...props }: RequirementProps): import("react").JSX.Element;
 export type ChecklistStep = {
     id?: string;
     label: ReactNode;
     status: StepStatus;
+    /** After the label, such as who it waits on or when it landed. */
+    meta?: ReactNode;
+    /** Depends on the step before it, and indents under it. */
+    nested?: boolean;
 };
 export type ChecklistGroup = {
     id: string;
@@ -95,3 +122,48 @@ export type StageChecklistProps = Omit<ComponentProps<"div">, "children"> & {
 };
 /** Checklists side by side, each under its label with its meta or how many of its steps are done. */
 export declare function StageChecklist({ groups, className, ...props }: StageChecklistProps): import("react").JSX.Element;
+export type StepChipStatus = "done" | "current" | "todo" | "agent";
+export type StepChipProps = Omit<ComponentProps<"span">, "children"> & {
+    status: StepChipStatus;
+    children: ReactNode;
+};
+export declare function StepChip({ status, children, className, ...props }: StepChipProps): import("react").JSX.Element;
+export type StepChainStep = {
+    id: string;
+    label: ReactNode;
+    status: StepChipStatus;
+};
+export type StepChainProps = Omit<ComponentProps<"div">, "children"> & {
+    lead: {
+        label: ReactNode;
+        status: "done" | "current" | "todo";
+    };
+    steps: readonly StepChainStep[];
+};
+export declare function StepChain({ lead, steps, className, ...props }: StepChainProps): import("react").JSX.Element;
+export type ParallelActor = {
+    kind: "person";
+    avatar: ReactNode;
+} | {
+    kind: "agent" | "system";
+};
+export type ParallelChipProps = Omit<ComponentProps<"span">, "children"> & {
+    actor: ParallelActor;
+    who: ReactNode;
+    doing: ReactNode;
+    action?: {
+        label: ReactNode;
+        onClick: () => void;
+    };
+};
+export declare function ParallelChip({ actor, who, doing, action, className, ...props }: ParallelChipProps): import("react").JSX.Element;
+export type PartState = "done" | "needsYou" | "notStarted";
+export type PartsRollupProps = Omit<ComponentProps<"div">, "children"> & {
+    /** How many parts, in words, such as "3 parts". */
+    label: ReactNode;
+    /** Each part's state, in the parts' order. */
+    parts: readonly PartState[];
+    /** The counts in plain words, such as "1 done · 1 needs you · 1 not started". */
+    legend: ReactNode;
+};
+export declare function PartsRollup({ label, parts, legend, className, ...props }: PartsRollupProps): import("react").JSX.Element;