@columenlabs/lumen-ui 0.1.153 → 0.1.155

package/dist/index.d.ts

@@ -38,7 +38,7 @@ export { type CoverageBlock, type CoverageData, type CoverageFact, type Coverage
 export { type CalendarFact, LumenCoverageCalendarMap, type LumenCoverageCalendarMapProps, } from './coverage-calendar-map.js';
 export { DetailsTable, type DetailsTableProps, FactsTable } from './details-table.js';
 export { DrawerSection, type DrawerSectionProps } from './drawer-section.js';
-export { LumenDrawer, type LumenDrawerProps } from './lumen-drawer.js';
+export { type DrawerAction, 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';

package/dist/lumen-drawer.d.ts

@@ -1,4 +1,13 @@
 import { type ReactNode } from 'react';
+import { type IconButtonProps } from './icon-button.js';
+/**
+ * One of a drawer's actions, as data: the drawer draws it as an icon button with its name in the
+ * tooltip, so a drawer's actions are never text. Destructive ones go first, as the footer lists them.
+ */
+export type DrawerAction = Pick<IconButtonProps, 'icon' | 'label' | 'onClick' | 'busy' | 'disabled' | 'pressed' | 'to' | 'href'> & {
+    /** Delete, remove: drawn in the destructive colour. */
+    destructive?: boolean;
+};
 /** A drawer's width on desktop, as the resizable panel takes it ("32%", "320px"). */
 type Size = `${number}%` | `${number}px`;
 export interface LumenDrawerProps {
@@ -9,7 +18,9 @@ export interface LumenDrawerProps {
     description?: ReactNode;
     /** Stacked DrawerSections; the drawer pads and scrolls them. */
     children: ReactNode;
-    /** The footer's actions, right-aligned, icon first (`IconButton`, `SaveButton`); no footer when left out. */
+    /** The footer's actions as data, right-aligned in order, before `footer`: always icons. */
+    actions?: readonly DrawerAction[];
+    /** Last in the footer, after `actions`: the `SaveButton`. No footer when this, `actions` and `footerStart` are left out. */
     footer?: ReactNode;
     /** Left side of the footer: a count or status line ("12 releases"). */
     footerStart?: ReactNode;
@@ -34,5 +45,5 @@ export interface LumenDrawerProps {
  * phone it shows only when there are actions, as the sheet's X closes it). With `dock` it sits beside
  * the page on desktop instead (DockedDrawer), for a list whose rows each open it.
  */
-export declare function LumenDrawer({ open, onClose, title, description, children, footer, footerStart, defaultSize, minSize, maxSize, dock, }: LumenDrawerProps): import("react").JSX.Element | null;
+export declare function LumenDrawer({ open, onClose, title, description, children, actions, footer, footerStart, defaultSize, minSize, maxSize, dock, }: LumenDrawerProps): import("react").JSX.Element | null;
 export {};

package/dist/lumen-drawer.js

@@ -21,7 +21,7 @@ const DrawerPanels = lazyPart(() => loadPanels().then((m) => m.DrawerPanels));
  * phone it shows only when there are actions, as the sheet's X closes it). With `dock` it sits beside
  * the page on desktop instead (DockedDrawer), for a list whose rows each open it.
  */
-export function LumenDrawer({ open, onClose, title, description, children, footer, footerStart, defaultSize = '32%', minSize = '320px', maxSize = '60%', dock, }) {
+export function LumenDrawer({ open, onClose, title, description, children, actions, footer, footerStart, defaultSize = '32%', minSize = '320px', maxSize = '60%', dock, }) {
     const isMobile = useIsMobile();
     const slot = useDockSlot();
     // Fetched once the page is idle, so the first drawer opened on a desktop has its panels ready.
@@ -35,7 +35,8 @@ export function LumenDrawer({ open, onClose, title, description, children, foote
     const body = _jsx("div", { className: "flex flex-col px-4 pb-4", children: children });
     // A drawer with actions ends on a footer, styled like a dialog's: the body scrolls above it and
     // ends on a clear edge. Without actions it has none: the header's × already closes it.
-    const foot = (footer || footerStart) && (_jsxs("footer", { "data-slot": "drawer-footer", className: "flex shrink-0 items-center gap-2 border-t bg-muted/50 px-4 py-2.5", children: [footerStart && (_jsx("div", { className: "min-w-0 flex-1 truncate text-muted-foreground text-xs", children: footerStart })), _jsx("div", { className: "ml-auto flex items-center gap-2", children: footer })] }));
+    const acts = actions?.length ? actions : null;
+    const foot = (acts || footer || footerStart) && (_jsxs("footer", { "data-slot": "drawer-footer", className: "flex shrink-0 items-center gap-2 border-t bg-muted/50 px-4 py-2.5", children: [footerStart && (_jsx("div", { className: "min-w-0 flex-1 truncate text-muted-foreground text-xs", children: footerStart })), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [acts?.map(({ destructive, ...a }) => (_jsx(IconButton, { ...a, className: destructive ? 'text-destructive hover:text-destructive' : undefined }, a.label))), footer] })] }));
     if (dock && !isMobile && slot)
         return open
             ? createPortal(_jsx(DockedDrawer, { dock: dock, title: title, description: description, onClose: onClose, defaultSize: defaultSize, minSize: minSize, maxSize: maxSize, body: body, foot: foot }), slot)

package/dist/lumen-form.d.ts

@@ -9,7 +9,9 @@ export interface LumenFormField {
     /** `text` by default. `secret` hides what is typed; `select` and `multi` are LumenSelector. */
     kind?: 'text' | 'secret' | 'number' | 'date' | 'textarea' | 'select' | 'multi';
     required?: boolean;
-    /** A line under the field. */
+    /** More about the field, behind an (i) beside its label (`InfoTip`). Most fields need none. */
+    info?: ReactNode;
+    /** @deprecated Use `info`: drawn the same way, as an (i) beside the label, never a line under the field. */
     hint?: ReactNode;
     placeholder?: string;
     /** `select` and `multi`. */

package/dist/lumen-form.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // LumenForm:
-// a list of fields in, a laid-out form out. Label, input, hint and error sit the same way in every
+// a list of fields in, a laid-out form out. Label, (i), input and error sit the same way in every
 // app; each field's own check runs as the person types, and Save is LumenShell's SaveButton, which
 // lists what stands in the way and takes the person to it. A secret already saved shows masked and
 // is kept while its box stays empty. LumenForm only puts the kit's parts together.
+import { XIcon } from 'lucide-react';
 import { useId, useState } from 'react';
 import { SaveButton } from './form-issues.js';
+import { IconButton } from './icon-button.js';
+import { InfoTip } from './info-tip.js';
 import { LumenSelector } from './lumen-selector.js';
-import { Button } from './ui/button.js';
-import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel } from './ui/field.js';
+import { Field, FieldError, FieldGroup, FieldLabel } from './ui/field.js';
 import { Input } from './ui/input.js';
 import { Textarea } from './ui/textarea.js';
 const isEmpty = (v) => v === undefined || (Array.isArray(v) ? v.length === 0 : v.trim() === '');
@@ -76,6 +78,6 @@ export function LumenForm({ fields, initial, onSave, onCancel, saveLabel = 'Save
                 save();
         }, children: [_jsx(FieldGroup, { children: fields.map((f) => {
                     const invalid = touched.has(f.id) && !!errors[f.id];
-                    return (_jsxs(Field, { "data-invalid": invalid || undefined, children: [_jsxs(FieldLabel, { htmlFor: domId(f.id), children: [f.label, f.required && _jsx("span", { className: "font-normal text-muted-foreground", children: "required" })] }), input(f), f.hint && !invalid && _jsx(FieldDescription, { children: f.hint }), invalid && _jsx(FieldError, { children: errors[f.id] })] }, f.id));
-                }) }), _jsxs("div", { className: "flex items-center justify-end gap-2 border-t pt-3", children: [footer, _jsx("div", { className: "flex-1" }), onCancel && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onCancel, children: "Cancel" })), _jsx("span", { className: "contents", onClickCapture: touchAll, children: _jsx(SaveButton, { issues: issues, busy: busy, label: saveLabel, onSave: save }) })] })] }));
+                    return (_jsxs(Field, { "data-invalid": invalid || undefined, children: [_jsxs(FieldLabel, { htmlFor: domId(f.id), children: [f.label, f.required && _jsx("span", { className: "font-normal text-muted-foreground", children: "required" }), (f.info ?? f.hint) && (_jsx(InfoTip, { label: `About ${f.label}`, children: f.info ?? f.hint }))] }), input(f), invalid && _jsx(FieldError, { children: errors[f.id] })] }, f.id));
+                }) }), _jsxs("div", { className: "flex items-center justify-end gap-2 border-t pt-3", children: [footer, _jsx("div", { className: "flex-1" }), onCancel && _jsx(IconButton, { type: "button", icon: XIcon, label: "Cancel", onClick: onCancel }), _jsx("span", { className: "contents", onClickCapture: touchAll, children: _jsx(SaveButton, { issues: issues, busy: busy, label: saveLabel, onSave: save }) })] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.153",
+  "version": "0.1.155",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,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.153",
+    "@columenlabs/lumen-ui-types": "0.1.155",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",