@lepid-labs/ui-react 1.0.0 → 1.0.2

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/table-state.d.ts

@@ -0,0 +1,28 @@
+/** Descendants that own their own click/keys; a row never double-fires for them. */
+export declare const ROW_NESTED_CONTROLS = "a[href], button, input, select, textarea, summary, label, [role=\"button\"], [role=\"link\"], [contenteditable=\"true\"]";
+export interface TableOptions {
+    /** Rows are clickable: pointer cursor, focus ring, selected state. */
+    interactive?: boolean;
+    className?: string;
+}
+/** Class list for the `<table>`. */
+export declare function tableAttrs({ interactive, className }: TableOptions): {
+    className: string;
+};
+export interface TableRowOptions {
+    /** The row has an activation handler, so it joins the tab order. */
+    activatable?: boolean;
+    /** Selected state; omitted leaves aria-selected off entirely. */
+    selected?: boolean;
+}
+export interface TableRowAttrs {
+    tabIndex?: 0;
+    "aria-selected"?: boolean;
+}
+/** Focus and selection ARIA for a body row. */
+export declare function tableRowAttrs({ activatable, selected }: TableRowOptions): TableRowAttrs;
+/** Enter or Space on the focused row itself (not a control inside it) activates it. */
+export declare function isRowActivationKey(key: string, fromRow: boolean): boolean;
+/** A click activates the row unless it landed on a nested control (`hit` is the
+ *  closest ROW_NESTED_CONTROLS match inside the row) or finished a text selection. */
+export declare function isRowActivationClick(hitNestedControl: boolean, selectedText: string): boolean;

package/dist/table-state.js

@@ -0,0 +1,29 @@
+// Pure attribute and activation logic behind Table / TableRow, 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 .js specifiers).
+/** Descendants that own their own click/keys; a row never double-fires for them. */
+export const ROW_NESTED_CONTROLS = 'a[href], button, input, select, textarea, summary, label, [role="button"], [role="link"], [contenteditable="true"]';
+/** Class list for the `<table>`. */
+export function tableAttrs({ interactive, className }) {
+    return {
+        className: ["ld-table", interactive && "ld-table--interactive", className].filter(Boolean).join(" "),
+    };
+}
+/** Focus and selection ARIA for a body row. */
+export function tableRowAttrs({ activatable, selected }) {
+    const attrs = {};
+    if (activatable)
+        attrs.tabIndex = 0;
+    if (selected !== undefined)
+        attrs["aria-selected"] = selected;
+    return attrs;
+}
+/** Enter or Space on the focused row itself (not a control inside it) activates it. */
+export function isRowActivationKey(key, fromRow) {
+    return fromRow && (key === "Enter" || key === " ");
+}
+/** A click activates the row unless it landed on a nested control (`hit` is the
+ *  closest ROW_NESTED_CONTROLS match inside the row) or finished a text selection. */
+export function isRowActivationClick(hitNestedControl, selectedText) {
+    return !hitNestedControl && selectedText === "";
+}

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.2",
   "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"