@columenlabs/lumen-ui 0.1.74 → 0.1.76

package/dist/index.d.ts

@@ -40,6 +40,7 @@ export { LumenDrawer, type LumenDrawerProps } from './lumen-drawer.js';
 export { LumenCode, type LumenCodeProps, langOfPath } from './lumen-code.js';
 export { LumenCodeEditor, type LumenCodeEditorProps, type LumenCodeLang, } from './lumen-code-editor.js';
 export { RenameField, type RenameFieldProps } from './rename-field.js';
+export { LumenStackedList, type LumenStackedListProps, LumenStackedRow, type LumenStackedRowProps, type StackedColumn, } from './lumen-stacked-list.js';
 export { ResetButton, type ResetButtonProps } from './reset-button.js';
 export { type ChartBand, type ChartMarker, GrowthChart, KEY_DATE_KINDS, KeyDateChips, type KeyDateKind, type KeyDateMarker, PALETTE, type Scale, type Series, benchColour, keyDateMarkers, paletteAt, } from './growth-chart.js';
 export { FoldGroup, NavGroup, type NavItem, type SectionItem, type SectionSubItem, SidebarSection, } from './nav.js';

package/dist/index.js

@@ -47,6 +47,7 @@ export { LumenDrawer } from './lumen-drawer.js';
 export { LumenCode, langOfPath } from './lumen-code.js';
 export { LumenCodeEditor, } from './lumen-code-editor.js';
 export { RenameField } from './rename-field.js';
+export { LumenStackedList, LumenStackedRow, } from './lumen-stacked-list.js';
 export { ResetButton } from './reset-button.js';
 export { GrowthChart, KEY_DATE_KINDS, KeyDateChips, PALETTE, benchColour, keyDateMarkers, paletteAt, } from './growth-chart.js';
 export { FoldGroup, NavGroup, SidebarSection, } from './nav.js';

package/dist/lumen-stacked-list.d.ts

@@ -0,0 +1,47 @@
+import { type ReactNode } from 'react';
+export interface StackedColumn {
+    key: string;
+    /** The header over the column; the list draws a header row when any column or `lead` has one. */
+    label?: string;
+    /** Any CSS track size: `9rem`, `minmax(6rem, auto)`. */
+    width: string;
+    /** `end` for numbers and controls, so header, values and totals share one edge. */
+    align?: 'start' | 'end';
+    /** Shown on a phone, stacked at the row's end; other columns are left out there. */
+    phone?: boolean;
+}
+export interface LumenStackedListProps {
+    columns: StackedColumn[];
+    /** The header over the names. */
+    lead?: string;
+    /** One level that never folds (a short list in a card): no chevron space, compact rows. */
+    flat?: boolean;
+    children: ReactNode;
+    'aria-label'?: string;
+    className?: string;
+}
+export declare function LumenStackedList({ columns, lead, flat, children, className, ...aria }: LumenStackedListProps): import("react").JSX.Element;
+export interface LumenStackedRowProps {
+    /** The row's name: drawn on one line (an ellipsis past `--lead-col-max`) and its accessible name. */
+    name: string;
+    /** Drawn instead of `name`, such as a rename field; `name` stays the accessible name. */
+    title?: ReactNode;
+    /** Right after the name: a source chip, a ✎ mark. */
+    adornments?: ReactNode;
+    /** One muted line under the name. */
+    meta?: ReactNode;
+    /** One value per column, by `StackedColumn.key`. */
+    cells?: Record<string, ReactNode>;
+    /** Icons after the name, shown on hover or focus only. */
+    actions?: ReactNode;
+    /** What needs the person (a sign-in that broke): shown at the top while the row is open. */
+    notice?: ReactNode;
+    /** Rows under this one: LumenStackedRows. */
+    children?: ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** `muted` dims the row (an item that is off). */
+    tone?: 'default' | 'muted';
+}
+export declare function LumenStackedRow({ name, title, adornments, meta, cells, actions, notice, children, defaultOpen, open: openProp, onOpenChange, tone, }: LumenStackedRowProps): import("react").JSX.Element;

package/dist/lumen-stacked-list.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// LumenStackedList: rows that nest and fold, with columns that line up at every level (a source,
+// the groups inside it, the items inside those). Each row is one line: a name (with chips or a mark
+// after it) over an optional muted meta line, then the list's columns. A row with children or a
+// notice has a chevron and starts folded; its notice (what needs the person) shows only while it is
+// open. Row actions sit after the name and show on hover or focus only (DESIGN.md, Actions: icon
+// first). Nothing about what the rows mean lives here: an app fills names, cells and actions.
+// On a phone the columns marked `phone` stack at the row's end and the rest are left out.
+import { ChevronRightIcon } from 'lucide-react';
+import { createContext, useContext, useMemo, useState, } from 'react';
+import { cn } from './lib/utils.js';
+import { Collapsible, CollapsibleContent } from './ui/collapsible.js';
+const Ctx = createContext(null);
+export function LumenStackedList({ columns, lead, flat = false, children, className, ...aria }) {
+    const ctx = useMemo(() => ({ columns, depth: 0, flat }), [columns, flat]);
+    const style = {
+        '--stack-cols': `minmax(0,1fr) ${columns.map((c) => c.width).join(' ')}`,
+    };
+    const head = lead !== undefined || columns.some((c) => c.label);
+    return (_jsx(Ctx.Provider, { value: ctx, children: _jsxs("div", { className: cn('flex min-w-0 flex-col text-sm', className), style: style, children: [head && (_jsxs("div", { "aria-hidden": true, className: "grid grid-cols-(--stack-cols) items-center gap-x-3 px-3 pb-1.5 text-xs font-medium text-muted-foreground max-sm:hidden", children: [_jsx("span", { className: cn(!flat && 'pl-7.5'), children: lead }), _jsx(Cells, { columns: columns, cells: Object.fromEntries(columns.map((c) => [c.key, c.label])) })] })), _jsx("ul", { className: "flex flex-col [&>li:first-child>[data-stack-row]]:border-t-0", ...aria, children: children })] }) }));
+}
+function Cells({ columns, cells, }) {
+    return (_jsx("div", { className: "contents max-sm:flex max-sm:flex-col max-sm:items-end max-sm:gap-0.5", children: columns.map((c) => (_jsx("div", { className: cn('flex min-w-0 items-center', c.align === 'end' && 'justify-end text-right', !c.phone && 'max-sm:hidden'), children: cells?.[c.key] }, c.key))) }));
+}
+const isControl = (t) => t instanceof Element &&
+    t.closest('button, a, input, select, [role="button"], [role="combobox"], [data-stack-skip]') !==
+        null;
+export function LumenStackedRow({ name, title, adornments, meta, cells, actions, notice, children, defaultOpen = false, open: openProp, onOpenChange, tone = 'default', }) {
+    const ctx = useContext(Ctx);
+    if (!ctx)
+        throw new Error('LumenStackedRow outside LumenStackedList');
+    const { columns, depth, flat } = ctx;
+    const [own, setOwn] = useState(defaultOpen);
+    const open = openProp ?? own;
+    const setOpen = (o) => {
+        if (openProp === undefined)
+            setOwn(o);
+        onOpenChange?.(o);
+    };
+    const has = Boolean(children) || Boolean(notice);
+    const inner = useMemo(() => ({ columns, depth: depth + 1, flat }), [columns, depth, flat]);
+    const indent = { paddingInlineStart: `calc(${depth} * var(--spacing) * 6)` };
+    const line = (_jsxs("div", { "data-stack-row": true, className: cn('group/stack grid grid-cols-(--stack-cols) items-center gap-x-3 border-t px-3 max-sm:grid-cols-[minmax(0,1fr)_auto]', depth === 0 && !flat ? 'min-h-14 py-2' : 'min-h-10 py-1.5', depth === 1 && 'bg-muted/40', has && 'cursor-pointer', tone === 'muted' && 'text-muted-foreground'), onClick: has ? (e) => !isControl(e.target) && setOpen(!open) : undefined, children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1.5", style: indent, children: [has ? (_jsx("button", { type: "button", "aria-expanded": open, "aria-label": `${open ? 'Fold' : 'Unfold'} ${name}`, className: "grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-muted", onClick: () => setOpen(!open), children: _jsx(ChevronRightIcon, { className: cn('size-4 transition-transform', open && 'rotate-90') }) })) : flat ? null : (_jsx("span", { className: "w-6 shrink-0", "aria-hidden": true })), _jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [title ?? (_jsx("span", { title: name, className: cn('max-w-(--lead-col-max) truncate', depth < 2 && 'font-medium'), children: name })), adornments, actions && (_jsx("span", { className: "flex shrink-0 items-center opacity-0 transition-opacity group-focus-within/stack:opacity-100 group-hover/stack:opacity-100", children: actions }))] }), meta && _jsx("div", { className: "truncate text-xs text-muted-foreground", children: meta })] })] }), _jsx(Cells, { columns: columns, cells: cells })] }));
+    if (!has)
+        return _jsx("li", { children: line });
+    return (_jsx("li", { children: _jsxs(Collapsible, { open: open, onOpenChange: setOpen, children: [line, _jsxs(CollapsibleContent, { children: [notice && (_jsx("div", { className: "border-t px-3 py-2", style: {
+                                paddingInlineStart: `calc(${depth + 1} * var(--spacing) * 6 + var(--spacing) * 3)`,
+                            }, children: notice })), children && (_jsx(Ctx.Provider, { value: inner, children: _jsx("ul", { className: "flex flex-col", children: children }) }))] })] }) }));
+}

package/dist/rename-field.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // A name renamed in place (for a broker link accounts; shared so
 // An app's bank accounts rename the same way): Enter or leaving the field saves, Escape undoes,
-// empty or ↺ goes back to the source's own name, shown as the placeholder.
+// empty or ↺ goes back to the source's own name, shown as the placeholder. Quiet at rest
+// (DESIGN.md, Actions: icon first): a renamed name keeps a ✎ mark, the rest shows on hover or focus.
 import { PencilIcon, RotateCcwIcon } from 'lucide-react';
 import { useState } from 'react';
+import { cn } from './lib/utils.js';
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from './ui/input-group.js';
 export function RenameField({ value, original, originLabel, onSave }) {
     const [typed, setTyped] = useState(value);
@@ -22,5 +24,5 @@ export function RenameField({ value, original, originLabel, onSave }) {
                         setTyped(value);
                         requestAnimationFrame(() => e.currentTarget?.blur());
                     }
-                }, className: "field-sizing-content min-w-0 px-2 text-sm" }), _jsxs(InputGroupAddon, { align: "inline-end", children: [_jsx(PencilIcon, { className: "size-3" }), value !== original && (_jsx(InputGroupButton, { size: "icon-xs", "aria-label": `Reset to ${original}`, title: `Reset to ${original}`, onClick: () => onSave(null), children: _jsx(RotateCcwIcon, {}) }))] })] }));
+                }, className: "field-sizing-content min-w-0 px-2 text-sm" }), _jsxs(InputGroupAddon, { align: "inline-end", children: [_jsx(PencilIcon, { className: cn('size-3 group-focus-within/input-group:opacity-100 group-hover/input-group:opacity-100', value === original && 'opacity-0') }), value !== original && (_jsx(InputGroupButton, { className: "opacity-0 group-focus-within/input-group:opacity-100 group-hover/input-group:opacity-100", size: "icon-xs", "aria-label": `Reset to ${original}`, title: `Reset to ${original}`, onClick: () => onSave(null), children: _jsx(RotateCcwIcon, {}) }))] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.74",
+  "version": "0.1.76",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -45,7 +45,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.74",
+    "@columenlabs/lumen-ui-types": "0.1.76",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",