@lepid-labs/ui-react 1.0.0 → 1.0.1

package/dist/ButtonGroup.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from "react";
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Stretch to the full row with equal-width segments. Maps to .ld-btn-group--block. */
+    block?: boolean;
+}
+/** One long track with `Button`s lined up inside it. The theme strips the
+ *  segments' own chrome, so children are plain `Button`s; name the group with
+ *  `aria-label`. For a toggle / segmented control set `aria-pressed` on each
+ *  `Button` — the theme lights the pressed segment from that attribute, and
+ *  which one is pressed stays the caller's state. With a single pressed segment
+ *  the theme slides one pill between segments; the group stamps `data-ld-dir`
+ *  so the pill's leading edge reaches the new segment first. */
+export declare function ButtonGroup({ block, className, ...rest }: ButtonGroupProps): import("react").JSX.Element;

package/dist/ButtonGroup.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { buttonGroupAttrs } from "./button-group.js";
+import { useSlideDir } from "./useSlideDir.js";
+/** One long track with `Button`s lined up inside it. The theme strips the
+ *  segments' own chrome, so children are plain `Button`s; name the group with
+ *  `aria-label`. For a toggle / segmented control set `aria-pressed` on each
+ *  `Button` — the theme lights the pressed segment from that attribute, and
+ *  which one is pressed stays the caller's state. With a single pressed segment
+ *  the theme slides one pill between segments; the group stamps `data-ld-dir`
+ *  so the pill's leading edge reaches the new segment first. */
+export function ButtonGroup({ block, className, ...rest }) {
+    const ref = useSlideDir('.ld-btn--active, [aria-pressed="true"]');
+    return _jsx("div", { ...buttonGroupAttrs(block, className), ...rest, ref: ref });
+}

package/dist/HoldButton.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import type { ButtonProps } from "./Button.js";
+export interface HoldButtonProps extends Omit<ButtonProps, "onClick"> {
+    /** Commitment window in ms. Defaults to the theme's --ld-hold-duration (300 ms). */
+    duration?: number;
+    /** Fires once when the hold completes. */
+    onConfirm: () => void;
+    /** Optional secondary text under the label (announced via aria-describedby). */
+    hint?: ReactNode;
+    /** Show the live percentage. Default true. */
+    showMeter?: boolean;
+    /** Content of the circular well the ring wraps — usually an icon. */
+    icon?: ReactNode;
+    /** Keyboard escape hatch: a plain Space/Enter tap fires immediately instead
+     * of requiring a held key. Pair with a confirm dialog in onConfirm. */
+    confirmOnKeyboardTap?: boolean;
+    /** Announced to assistive tech once the hold fires. Default "Confirmed". */
+    confirmedLabel?: string;
+}
+/** Hold-to-confirm button: the ring around the icon fills over the commitment
+ * window and the action fires only when it completes. Releasing early cancels.
+ * Renders .ld-btn.ld-btn--hold with the ring/body/meter subparts. */
+export declare function HoldButton({ duration, onConfirm, hint, showMeter, icon, confirmOnKeyboardTap, confirmedLabel, variant, size, className, style, children, disabled, onPointerDown, onPointerUp, onPointerCancel, onLostPointerCapture, onKeyDown, onKeyUp, onBlur, ...rest }: HoldButtonProps): import("react").JSX.Element;

package/dist/HoldButton.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { cx } from "./cx.js";
+import { createHoldController } from "./hold.js";
+const SR_ONLY = {
+    position: "absolute",
+    width: 1,
+    height: 1,
+    margin: -1,
+    padding: 0,
+    overflow: "hidden",
+    clip: "rect(0 0 0 0)",
+    whiteSpace: "nowrap",
+    border: 0,
+};
+const HOLD_KEYS = new Set([" ", "Enter"]);
+/** Parse a CSS <time> ("300ms" | "0.3s") into ms; undefined if unparseable. */
+function parseCssTime(raw) {
+    const m = raw.trim().match(/^([\d.]+)\s*(ms|s)$/);
+    if (!m)
+        return undefined;
+    const n = Number(m[1]);
+    return m[2] === "s" ? n * 1000 : n;
+}
+/** Hold-to-confirm button: the ring around the icon fills over the commitment
+ * window and the action fires only when it completes. Releasing early cancels.
+ * Renders .ld-btn.ld-btn--hold with the ring/body/meter subparts. */
+export function HoldButton({ duration, onConfirm, hint, showMeter = true, icon, confirmOnKeyboardTap = false, confirmedLabel = "Confirmed", variant = "default", size = "md", className, style, children, disabled, onPointerDown, onPointerUp, onPointerCancel, onLostPointerCapture, onKeyDown, onKeyUp, onBlur, ...rest }) {
+    const ref = useRef(null);
+    const ctl = useRef(null);
+    const latest = useRef({ duration, onConfirm });
+    latest.current = { duration, onConfirm };
+    const hintId = useId();
+    const [progress, setProgress] = useState(0);
+    const [state, setState] = useState("idle");
+    useEffect(() => {
+        const c = createHoldController({
+            duration: () => {
+                const explicit = latest.current.duration;
+                if (explicit !== undefined)
+                    return explicit;
+                const el = ref.current;
+                const fromTheme = el && parseCssTime(getComputedStyle(el).getPropertyValue("--ld-hold-duration"));
+                return fromTheme ?? 300;
+            },
+            onProgress: setProgress,
+            onConfirm: () => latest.current.onConfirm(),
+            onStateChange: setState,
+        });
+        ctl.current = c;
+        return () => c.dispose();
+    }, []);
+    const start = useCallback(() => {
+        if (!disabled)
+            ctl.current?.start();
+    }, [disabled]);
+    const cancel = useCallback(() => ctl.current?.cancel(), []);
+    const handlePointerDown = (e) => {
+        onPointerDown?.(e);
+        if (e.defaultPrevented || e.button !== 0 || !e.isPrimary)
+            return;
+        e.currentTarget.setPointerCapture(e.pointerId);
+        start();
+    };
+    const handlePointerUp = (e) => {
+        onPointerUp?.(e);
+        cancel();
+    };
+    const handlePointerCancel = (e) => {
+        onPointerCancel?.(e);
+        cancel();
+    };
+    const handleLostCapture = (e) => {
+        onLostPointerCapture?.(e);
+        cancel();
+    };
+    const handleKeyDown = (e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented)
+            return;
+        if (e.key === "Escape") {
+            cancel();
+            return;
+        }
+        if (!HOLD_KEYS.has(e.key))
+            return;
+        e.preventDefault(); // suppress the native click that Space/Enter would synthesize
+        if (e.repeat)
+            return;
+        if (confirmOnKeyboardTap) {
+            if (!disabled)
+                ctl.current?.fire();
+        }
+        else {
+            start();
+        }
+    };
+    const handleKeyUp = (e) => {
+        onKeyUp?.(e);
+        if (HOLD_KEYS.has(e.key)) {
+            e.preventDefault();
+            cancel();
+        }
+    };
+    const handleBlur = (e) => {
+        onBlur?.(e);
+        cancel();
+    };
+    const percent = Math.round(progress * 100);
+    const classes = cx("ld-btn", "ld-btn--hold", variant !== "default" && `ld-btn--${variant}`, size === "sm" && "ld-btn--sm", className);
+    return (_jsxs("button", { ref: ref, type: "button", className: classes, style: { ...style, "--ld-hold": progress }, "data-ld-hold": state === "idle" ? undefined : state, "aria-describedby": hint !== undefined ? hintId : undefined, disabled: disabled, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerCancel: handlePointerCancel, onLostPointerCapture: handleLostCapture, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onBlur: handleBlur, ...rest, children: [_jsx("span", { className: "ld-btn__ring", "aria-hidden": "true", children: icon }), _jsxs("span", { className: "ld-btn__body", children: [_jsx("span", { className: "ld-btn__label", children: children }), hint !== undefined && (_jsx("span", { className: "ld-btn__hint", id: hintId, children: hint }))] }), showMeter && (_jsxs("span", { className: "ld-btn__meter", "aria-hidden": "true", children: [percent, "%"] })), _jsx("span", { style: SR_ONLY, "aria-live": "polite", children: state === "fired" ? confirmedLabel : "" })] }));
+}

package/dist/StatusCard.d.ts

@@ -0,0 +1,42 @@
+import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import { type StatusTone } from "./status-card.js";
+export interface StatusCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "prefix"> {
+    title: ReactNode;
+    /** Renders the title as a link. */
+    href?: string;
+    /** Open `href` in a new tab (adds the noopener/noreferrer rel). */
+    external?: boolean;
+    /** Faint lead-in before the title — an owner, group, or namespace. */
+    prefix?: ReactNode;
+    /** Colors the left status edge. */
+    tone?: StatusTone;
+    /** Outline + glow ring calling for action; `true` means warning. */
+    attention?: boolean | StatusTone;
+    /** Bump (e.g. `Date.now()`) whenever the card's data changes to replay the flash. */
+    changedAt?: number;
+    /** Faint icon in the top-left corner (a lock, a pin). */
+    watermark?: ReactNode;
+    /** Right side of the head: badges, icon links. */
+    meta?: ReactNode;
+    /** Faint trailing text after `meta` — typically a relative time. */
+    note?: ReactNode;
+}
+export declare function StatusCard({ title, href, external, prefix, tone, attention, changedAt, watermark, meta, note, className, children, ...rest }: StatusCardProps): import("react").JSX.Element;
+/** `<ul>` of rows — the card's list body. */
+export declare function StatusCardRows({ className, ...rest }: HTMLAttributes<HTMLUListElement>): import("react").JSX.Element;
+export interface StatusCardRowProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "prefix"> {
+    /** Narrow right-aligned lead column — an id, a number. */
+    leading?: ReactNode;
+    /** Compact trailing cluster — badges, counts, icons. */
+    trailing?: ReactNode;
+    external?: boolean;
+}
+/** One row: `<li>` wrapping an `<a>` when `href` is set, else a `<div>`. */
+export declare function StatusCardRow({ leading, trailing, external, href, className, children, ...rest }: StatusCardRowProps): import("react").JSX.Element;
+export interface StatusCardFooterProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    external?: boolean;
+}
+/** Faint footer line — an overflow link ("4 more…") or a plain summary. */
+export declare function StatusCardFooter({ external, href, className, ...rest }: StatusCardFooterProps): import("react").JSX.Element;
+/** Empty-state line under the head ("No open issues"). */
+export declare function StatusCardEmpty({ className, ...rest }: HTMLAttributes<HTMLParagraphElement>): import("react").JSX.Element;

package/dist/StatusCard.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cx } from "./cx.js";
+import { replayFlash, statusCardAttrs } from "./status-card.js";
+export function StatusCard({ title, href, external, prefix, tone, attention, changedAt, watermark, meta, note, className, children, ...rest }) {
+    const root = useRef(null);
+    useEffect(() => {
+        if (changedAt && root.current)
+            replayFlash(root.current);
+    }, [changedAt]);
+    const heading = (_jsxs(_Fragment, { children: [prefix !== undefined && _jsx("span", { className: "ld-status-card__prefix", children: prefix }), title] }));
+    return (_jsxs("div", { ref: root, ...statusCardAttrs(tone, attention, className), ...rest, children: [watermark !== undefined && (_jsx("span", { className: "ld-status-card__watermark", "aria-hidden": "true", children: watermark })), _jsxs("div", { className: "ld-status-card__head", children: [href ? (_jsx("a", { className: "ld-status-card__title", href: href, ...linkTarget(external), children: heading })) : (_jsx("span", { className: "ld-status-card__title", children: heading })), (meta !== undefined || note !== undefined) && (_jsxs("div", { className: "ld-status-card__meta", children: [meta, note !== undefined && _jsx("span", { className: "ld-status-card__note", children: note })] }))] }), children] }));
+}
+/** `<ul>` of rows — the card's list body. */
+export function StatusCardRows({ className, ...rest }) {
+    return _jsx("ul", { className: cx("ld-status-card__rows", className), ...rest });
+}
+/** One row: `<li>` wrapping an `<a>` when `href` is set, else a `<div>`. */
+export function StatusCardRow({ leading, trailing, external, href, className, children, ...rest }) {
+    const body = (_jsxs(_Fragment, { children: [leading !== undefined && _jsx("span", { className: "ld-status-card__row-lead", children: leading }), _jsx("span", { className: "ld-status-card__row-main", children: children }), trailing !== undefined && _jsx("span", { className: "ld-status-card__row-trail", children: trailing })] }));
+    const cls = cx("ld-status-card__row", className);
+    return (_jsx("li", { children: href ? (_jsx("a", { className: cls, href: href, ...linkTarget(external), ...rest, children: body })) : (_jsx("div", { className: cls, ...rest, children: body })) }));
+}
+/** Faint footer line — an overflow link ("4 more…") or a plain summary. */
+export function StatusCardFooter({ external, href, className, ...rest }) {
+    const cls = cx("ld-status-card__footer", className);
+    return href ? (_jsx("a", { className: cls, href: href, ...linkTarget(external), ...rest })) : (_jsx("div", { className: cls, ...rest }));
+}
+/** Empty-state line under the head ("No open issues"). */
+export function StatusCardEmpty({ className, ...rest }) {
+    return _jsx("p", { className: cx("ld-status-card__empty", className), ...rest });
+}
+function linkTarget(external) {
+    return external ? { target: "_blank", rel: "noopener noreferrer" } : {};
+}

package/dist/Stepper.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface StepItem {
+    id: string;
+    label: ReactNode;
+    /** Icon inside the node. Defaults to a check mark once complete, else the step number. */
+    icon?: ReactNode;
+}
+export interface StepperProps extends HTMLAttributes<HTMLOListElement> {
+    steps: StepItem[];
+    /** Index of the step in progress. Earlier steps are complete, later ones upcoming;
+     *  pass `steps.length` when everything is done. */
+    current: number;
+    /** Extra class for every step `<li>`. */
+    stepClassName?: string;
+}
+/** Horizontal milestone rail: labelled step nodes on a progress track. The
+ *  theme CSS fills the rail up to the current node from the state modifiers,
+ *  so `current` is the only piece of state. */
+export declare function Stepper({ steps, current, stepClassName, className, ...rest }: StepperProps): import("react").JSX.Element;

package/dist/Stepper.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+import { stepAttrs, stepState } from "./stepper-state.js";
+/** Horizontal milestone rail: labelled step nodes on a progress track. The
+ *  theme CSS fills the rail up to the current node from the state modifiers,
+ *  so `current` is the only piece of state. */
+export function Stepper({ steps, current, stepClassName, className, ...rest }) {
+    return (_jsx("ol", { className: cx("ld-stepper", className), ...rest, children: steps.map((step, index) => (_jsxs("li", { ...stepAttrs(index, current, stepClassName), children: [_jsx("span", { className: "ld-stepper__node", "aria-hidden": "true", children: step.icon ?? (stepState(index, current) === "complete" ? _jsx(CheckIcon, {}) : index + 1) }), _jsx("span", { className: "ld-stepper__label", children: step.label })] }, step.id))) }));
+}
+function CheckIcon() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M3 8.5l3 3 7-7" }) }));
+}

package/dist/Tabs.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { cx } from "./cx.js";
+import { useSlideDir } from "./useSlideDir.js";
 export function Tabs({ items, active, defaultActive, onChange }) {
     const [internal, setInternal] = useState(defaultActive ?? items[0]?.id);
     const current = active ?? internal;
@@ -9,5 +10,7 @@ export function Tabs({ items, active, defaultActive, onChange }) {
         onChange?.(id);
     };
     const activeItem = items.find((t) => t.id === current);
-    return (_jsxs("div", { children: [_jsx("div", { role: "tablist", className: "ld-tabs", children: items.map((t) => (_jsx("button", { role: "tab", type: "button", "aria-selected": t.id === current, className: cx("ld-tab", t.id === current && "ld-tab--active"), onClick: () => select(t.id), children: t.label }, t.id))) }), _jsx("div", { role: "tabpanel", className: "ld-tabpanel", children: activeItem?.content })] }));
+    // data-ld-dir for the theme's sliding underline: which edge leads
+    const tablist = useSlideDir('[aria-selected="true"]');
+    return (_jsxs("div", { children: [_jsx("div", { ref: tablist, role: "tablist", className: "ld-tabs", children: items.map((t) => (_jsx("button", { role: "tab", type: "button", "aria-selected": t.id === current, className: cx("ld-tab", t.id === current && "ld-tab--active"), onClick: () => select(t.id), children: t.label }, t.id))) }), _jsx("div", { role: "tabpanel", className: "ld-tabpanel", children: activeItem?.content })] }));
 }

package/dist/button-group.d.ts

@@ -0,0 +1,7 @@
+export interface ButtonGroupAttrs {
+    className: string;
+    role: "group";
+}
+/** Root class list and role for the group track. `block` stretches it to the
+ *  row with equal-width segments. */
+export declare function buttonGroupAttrs(block?: boolean, className?: string): ButtonGroupAttrs;

package/dist/button-group.js

@@ -0,0 +1,11 @@
+// Pure attribute logic behind ButtonGroup, kept DOM-free so it can be tested
+// under node:test without a renderer (so it imports nothing — Node runs the
+// .ts source and cannot resolve the .js specifiers the build uses).
+/** Root class list and role for the group track. `block` stretches it to the
+ *  row with equal-width segments. */
+export function buttonGroupAttrs(block, className) {
+    return {
+        className: ["ld-btn-group", block && "ld-btn-group--block", className].filter(Boolean).join(" "),
+        role: "group",
+    };
+}

package/dist/feedback.d.ts

@@ -2,8 +2,12 @@ import type { HTMLAttributes, ReactNode } from "react";
 export type SemanticVariant = "info" | "success" | "warning" | "danger";
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     variant?: SemanticVariant | "primary";
+    /** `sm` is the 9px dashboard pill used in StatusCard meta rows. */
+    size?: "sm";
+    /** Solid warning fill with a breathing glow — the one call to action. */
+    pulse?: boolean;
 }
-export declare function Badge({ variant, className, ...rest }: BadgeProps): import("react").JSX.Element;
+export declare function Badge({ variant, size, pulse, className, ...rest }: BadgeProps): import("react").JSX.Element;
 export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     variant?: SemanticVariant;
     title?: ReactNode;

package/dist/feedback.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from "./cx.js";
-export function Badge({ variant, className, ...rest }) {
-    return _jsx("span", { className: cx("ld-badge", variant && `ld-badge--${variant}`, className), ...rest });
+export function Badge({ variant, size, pulse, className, ...rest }) {
+    return (_jsx("span", { className: cx("ld-badge", variant && `ld-badge--${variant}`, size && `ld-badge--${size}`, pulse && "ld-badge--pulse", className), ...rest }));
 }
 export function Alert({ variant = "info", title, className, children, ...rest }) {
     return (_jsxs("div", { role: "alert", className: cx("ld-alert", `ld-alert--${variant}`, className), ...rest, children: [title !== undefined && _jsx("span", { className: "ld-alert__title", children: title }), children] }));

package/dist/hold.d.ts

@@ -0,0 +1,31 @@
+/** Hold-to-confirm state machine, framework-free so it can be unit-tested
+ * without a DOM. HoldButton drives it from pointer/keyboard events. */
+export type HoldState = "idle" | "holding" | "fired";
+export interface HoldOptions {
+    /** Commitment window in ms, resolved at the moment a hold starts. */
+    duration: () => number;
+    /** Called with progress in [0, 1] on every frame, and with 0 on reset. */
+    onProgress: (progress: number) => void;
+    /** Fires exactly once per completed hold. */
+    onConfirm: () => void;
+    onStateChange?: (state: HoldState) => void;
+    /** How long the "fired" state lingers before returning to idle (ms). */
+    firedFor?: number;
+    now?: () => number;
+    requestFrame?: (cb: () => void) => number;
+    cancelFrame?: (id: number) => void;
+    setTimer?: (cb: () => void, ms: number) => number;
+    clearTimer?: (id: number) => void;
+}
+export interface HoldController {
+    readonly state: HoldState;
+    /** Begin a hold. Ignored unless idle. */
+    start(): void;
+    /** Abort an in-progress hold without firing. Ignored unless holding. */
+    cancel(): void;
+    /** Skip the hold and fire immediately (keyboard-tap escape hatch). */
+    fire(): void;
+    /** Cancel everything and drop pending timers. */
+    dispose(): void;
+}
+export declare function createHoldController(opts: HoldOptions): HoldController;

package/dist/hold.js

@@ -0,0 +1,82 @@
+/** Hold-to-confirm state machine, framework-free so it can be unit-tested
+ * without a DOM. HoldButton drives it from pointer/keyboard events. */
+export function createHoldController(opts) {
+    const now = opts.now ?? (() => performance.now());
+    const requestFrame = opts.requestFrame ?? ((cb) => requestAnimationFrame(cb));
+    const cancelFrame = opts.cancelFrame ?? ((id) => cancelAnimationFrame(id));
+    const setTimer = opts.setTimer ?? ((cb, ms) => setTimeout(cb, ms));
+    const clearTimer = opts.clearTimer ?? ((id) => clearTimeout(id));
+    const firedFor = opts.firedFor ?? 600;
+    let state = "idle";
+    let startedAt = 0;
+    let duration = 0;
+    let frame;
+    let timer;
+    const setState = (next) => {
+        if (state === next)
+            return;
+        state = next;
+        opts.onStateChange?.(next);
+    };
+    const stopFrame = () => {
+        if (frame !== undefined)
+            cancelFrame(frame);
+        frame = undefined;
+    };
+    const fire = () => {
+        stopFrame();
+        setState("fired");
+        opts.onProgress(1);
+        opts.onConfirm();
+        timer = setTimer(() => {
+            timer = undefined;
+            setState("idle");
+            opts.onProgress(0);
+        }, firedFor);
+    };
+    const tick = () => {
+        frame = undefined;
+        if (state !== "holding")
+            return;
+        const elapsed = now() - startedAt;
+        if (elapsed >= duration) {
+            fire();
+            return;
+        }
+        opts.onProgress(Math.max(0, elapsed / duration));
+        frame = requestFrame(tick);
+    };
+    return {
+        get state() {
+            return state;
+        },
+        start() {
+            if (state !== "idle")
+                return;
+            duration = Math.max(0, opts.duration());
+            startedAt = now();
+            setState("holding");
+            opts.onProgress(0);
+            frame = requestFrame(tick);
+        },
+        cancel() {
+            if (state !== "holding")
+                return;
+            stopFrame();
+            setState("idle");
+            opts.onProgress(0);
+        },
+        fire() {
+            if (state === "fired")
+                return;
+            fire();
+        },
+        dispose() {
+            stopFrame();
+            if (timer !== undefined)
+                clearTimer(timer);
+            timer = undefined;
+            state = "idle";
+        },
+    };
+}

package/dist/index.d.ts

@@ -1,8 +1,18 @@
 export { Button, type ButtonProps } from "./Button.js";
+export { ButtonGroup, type ButtonGroupProps } from "./ButtonGroup.js";
+export { buttonGroupAttrs } from "./button-group.js";
+export { HoldButton, type HoldButtonProps } from "./HoldButton.js";
+export { createHoldController, type HoldController, type HoldOptions, type HoldState } from "./hold.js";
 export { Card, type CardProps } from "./Card.js";
+export { StatusCard, StatusCardRows, StatusCardRow, StatusCardFooter, StatusCardEmpty, type StatusCardProps, type StatusCardRowProps, type StatusCardFooterProps, } from "./StatusCard.js";
+export { attentionTone, statusCardAttrs, type StatusTone } from "./status-card.js";
+export { Stepper, type StepperProps, type StepItem } from "./Stepper.js";
+export { stepAttrs, stepState, type StepState } from "./stepper-state.js";
 export { NavLink, type NavLinkProps } from "./NavLink.js";
 export { Input, Textarea, Select, Label, Field, Checkbox, Radio, Switch, type InputProps, type TextareaProps, type SelectProps, type LabelProps, } from "./form.js";
 export { Badge, Alert, Progress, Spinner, type BadgeProps, type AlertProps, type ProgressProps, type SemanticVariant, } from "./feedback.js";
 export { Dialog, type DialogProps } from "./Dialog.js";
 export { Tabs, type TabsProps, type TabItem } from "./Tabs.js";
+export { slideDir, type SlideDir } from "./slide-dir.js";
+export { useSlideDir } from "./useSlideDir.js";
 export { cx } from "./cx.js";

package/dist/index.js

@@ -1,8 +1,18 @@
 export { Button } from "./Button.js";
+export { ButtonGroup } from "./ButtonGroup.js";
+export { buttonGroupAttrs } from "./button-group.js";
+export { HoldButton } from "./HoldButton.js";
+export { createHoldController } from "./hold.js";
 export { Card } from "./Card.js";
+export { StatusCard, StatusCardRows, StatusCardRow, StatusCardFooter, StatusCardEmpty, } from "./StatusCard.js";
+export { attentionTone, statusCardAttrs } from "./status-card.js";
+export { Stepper } from "./Stepper.js";
+export { stepAttrs, stepState } from "./stepper-state.js";
 export { NavLink } from "./NavLink.js";
 export { Input, Textarea, Select, Label, Field, Checkbox, Radio, Switch, } from "./form.js";
 export { Badge, Alert, Progress, Spinner, } from "./feedback.js";
 export { Dialog } from "./Dialog.js";
 export { Tabs } from "./Tabs.js";
+export { slideDir } from "./slide-dir.js";
+export { useSlideDir } from "./useSlideDir.js";
 export { cx } from "./cx.js";

package/dist/slide-dir.d.ts

@@ -0,0 +1,5 @@
+export type SlideDir = "forward" | "back";
+/** Which way the active item moved between two child indexes. `undefined` when
+ *  there is no travel to describe — nothing was active before or after (-1),
+ *  or the index did not change — so the caller leaves the last direction alone. */
+export declare function slideDir(prev: number, next: number): SlideDir | undefined;

package/dist/slide-dir.js

@@ -0,0 +1,12 @@
+// Pure direction logic behind the sliding indicator (Tabs underline,
+// ButtonGroup pill), kept DOM-free so it can be tested under node:test without
+// a renderer (so it imports nothing — Node runs the .ts source and cannot
+// resolve the .js specifiers the build uses).
+/** Which way the active item moved between two child indexes. `undefined` when
+ *  there is no travel to describe — nothing was active before or after (-1),
+ *  or the index did not change — so the caller leaves the last direction alone. */
+export function slideDir(prev, next) {
+    if (prev < 0 || next < 0 || prev === next)
+        return undefined;
+    return next > prev ? "forward" : "back";
+}

package/dist/status-card.d.ts

@@ -0,0 +1,15 @@
+export type StatusTone = "info" | "success" | "warning" | "danger";
+/** `true` means "warning" — the default call-to-action ring. */
+export declare function attentionTone(attention: boolean | StatusTone | undefined): StatusTone | undefined;
+export interface StatusCardAttrs {
+    className: string;
+    "data-ld-attention"?: StatusTone;
+}
+/** Root class list and data attributes for a given tone/attention state. */
+export declare function statusCardAttrs(tone: StatusTone | undefined, attention: boolean | StatusTone | undefined, className?: string): StatusCardAttrs;
+/** Restart the change flash on `el`: drop the attribute, reflow, set it again. */
+export declare function replayFlash(el: {
+    removeAttribute(name: string): void;
+    setAttribute(name: string, value: string): void;
+    readonly offsetWidth: number;
+}): void;

package/dist/status-card.js

@@ -0,0 +1,27 @@
+// Pure attribute logic behind StatusCard, kept DOM-free so it can be tested
+// under node:test without a renderer (so it imports nothing — Node runs the
+// .ts source and cannot resolve the .js specifiers the build uses).
+/** `true` means "warning" — the default call-to-action ring. */
+export function attentionTone(attention) {
+    if (attention === true)
+        return "warning";
+    if (!attention)
+        return undefined;
+    return attention;
+}
+/** Root class list and data attributes for a given tone/attention state. */
+export function statusCardAttrs(tone, attention, className) {
+    const attrs = {
+        className: ["ld-status-card", tone && `ld-status-card--${tone}`, className].filter(Boolean).join(" "),
+    };
+    const ring = attentionTone(attention);
+    if (ring)
+        attrs["data-ld-attention"] = ring;
+    return attrs;
+}
+/** Restart the change flash on `el`: drop the attribute, reflow, set it again. */
+export function replayFlash(el) {
+    el.removeAttribute("data-ld-changed");
+    void el.offsetWidth;
+    el.setAttribute("data-ld-changed", "");
+}

package/dist/stepper-state.d.ts

@@ -0,0 +1,12 @@
+export type StepState = "complete" | "current" | "upcoming";
+/** Where step `index` sits relative to `current`: before it is complete, at it
+ *  is current, after it is upcoming. A `current` past the last step therefore
+ *  reads as "all complete"; a negative one as "all upcoming". */
+export declare function stepState(index: number, current: number): StepState;
+export interface StepAttrs {
+    className: string;
+    "aria-current"?: "step";
+}
+/** Class list and aria attributes for step `index`. The theme CSS derives
+ *  the rail fill from the state modifiers, so nothing else is written. */
+export declare function stepAttrs(index: number, current: number, className?: string): StepAttrs;

package/dist/stepper-state.js

@@ -0,0 +1,24 @@
+// Pure state logic behind Stepper, kept DOM-free so it can be tested under
+// node:test without a renderer (so it imports nothing — Node runs the .ts
+// source and cannot resolve the .js specifiers the build uses).
+/** Where step `index` sits relative to `current`: before it is complete, at it
+ *  is current, after it is upcoming. A `current` past the last step therefore
+ *  reads as "all complete"; a negative one as "all upcoming". */
+export function stepState(index, current) {
+    if (index < current)
+        return "complete";
+    if (index === current)
+        return "current";
+    return "upcoming";
+}
+/** Class list and aria attributes for step `index`. The theme CSS derives
+ *  the rail fill from the state modifiers, so nothing else is written. */
+export function stepAttrs(index, current, className) {
+    const state = stepState(index, current);
+    const attrs = {
+        className: ["ld-stepper__step", `ld-stepper__step--${state}`, className].filter(Boolean).join(" "),
+    };
+    if (state === "current")
+        attrs["aria-current"] = "step";
+    return attrs;
+}

package/dist/useSlideDir.d.ts

@@ -0,0 +1,7 @@
+import type { RefObject } from "react";
+/** Ref for an indicator track (`.ld-tabs`, `.ld-btn-group`). After every render
+ *  it finds the child matching `activeSelector` and, when that moved, stamps
+ *  `data-ld-dir="forward" | "back"` on the track — the theme reads it to pick
+ *  which edge of the sliding indicator leads. Read from the DOM, so it works
+ *  when the active state lives in the children (`aria-pressed` on `Button`s). */
+export declare function useSlideDir<T extends HTMLElement>(activeSelector: string): RefObject<T | null>;

package/dist/useSlideDir.js

@@ -0,0 +1,26 @@
+import { useEffect, useLayoutEffect, useRef } from "react";
+import { slideDir } from "./slide-dir.js";
+// Layout effect on the client so data-ld-dir lands in the same frame as the
+// selection change (a transition reads its timing when it starts); plain
+// effect on the server, where React 18 warns about layout effects.
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/** Ref for an indicator track (`.ld-tabs`, `.ld-btn-group`). After every render
+ *  it finds the child matching `activeSelector` and, when that moved, stamps
+ *  `data-ld-dir="forward" | "back"` on the track — the theme reads it to pick
+ *  which edge of the sliding indicator leads. Read from the DOM, so it works
+ *  when the active state lives in the children (`aria-pressed` on `Button`s). */
+export function useSlideDir(activeSelector) {
+    const ref = useRef(null);
+    const prev = useRef(-1);
+    useIsomorphicLayoutEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const next = Array.from(el.children).findIndex((c) => c.matches(activeSelector));
+        const dir = slideDir(prev.current, next);
+        if (dir)
+            el.dataset.ldDir = dir;
+        prev.current = next;
+    });
+    return ref;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lepid-labs/ui-react",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Shared React components styled by @lepid-labs/styles themes.",
   "license": "MIT",
   "repository": {
@@ -23,7 +23,8 @@
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",
-    "typecheck": "tsc -p tsconfig.json --noEmit"
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "node --test"
   },
   "peerDependencies": {
     "react": ">=18"