@usableapp/cardds 0.3.0 → 0.4.1

package/dist/lists/Row.d.ts

@@ -1,6 +1,6 @@
-import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
 import { type IconName } from '../type/Icon.js';
-export interface RowProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+export interface RowProps extends Omit<ComponentProps<'div'>, 'title'> {
     /** the leading visual: an Avatar, an AvatarStack, an Icon */
     lead?: ReactNode;
     /** an icon in the outlined 48px lead box (menu rows) */
@@ -23,295 +23,24 @@ export interface RowProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'>
     /** div (default), a link, a label wrapping a Check/Toggle, li */
     as?: 'div' | 'a' | 'label' | 'li';
     href?: string;
+    /** what the row EXPANDS to show under itself (who liked, the rest of a list): the row becomes a `<details>`' summary */
+    more?: ReactNode;
+    /** CONTROLLED (with `more`): expanded. Pair it with `onOpenChange` */
+    open?: boolean;
+    /** UNCONTROLLED: start expanded */
+    defaultOpen?: boolean;
+    /** the row was tapped: the state it asks for */
+    onOpenChange?: (open: boolean) => void;
 }
 /**
  * Row — a frameless row inside a card: lead · title + meta · end. 48px+ tall, a tap target.
  * Several go in Rows (hairlines between). A row that IS a card is `Card row`.
  * `done` is the checklist's finished line: ticked, muted, not tappable any more.
+ * `more` makes it expand: the row is the summary of a `<details class="row-expand">`, `more` comes out under it; `open` + `onOpenChange`, or `defaultOpen`.
+ * An `end` chevron turns when it is open — the app fetches whatever `more` lists; the row only shows it.
  */
-export declare function Row({ lead, leadIcon, title, meta, body, end, endValue, endCaption, lg, done, as, href, className, children, ...rest }: RowProps): import("react").DetailedReactHTMLElement<{
-    slot?: string | undefined | undefined;
-    style?: import("react").CSSProperties | undefined;
-    suppressHydrationWarning?: boolean | undefined | undefined;
-    color?: string | undefined | undefined;
-    id?: string | undefined | undefined;
-    lang?: string | undefined | undefined;
-    nonce?: string | undefined | undefined;
-    part?: string | undefined | undefined;
-    role?: import("react").AriaRole | undefined;
-    tabIndex?: number | undefined | undefined;
-    "aria-activedescendant"?: string | undefined | undefined;
-    "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
-    "aria-braillelabel"?: string | undefined | undefined;
-    "aria-brailleroledescription"?: string | undefined | undefined;
-    "aria-busy"?: (boolean | "true" | "false") | undefined;
-    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-    "aria-colcount"?: number | undefined | undefined;
-    "aria-colindex"?: number | undefined | undefined;
-    "aria-colindextext"?: string | undefined | undefined;
-    "aria-colspan"?: number | undefined | undefined;
-    "aria-controls"?: string | undefined | undefined;
-    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
-    "aria-describedby"?: string | undefined | undefined;
-    "aria-description"?: string | undefined | undefined;
-    "aria-details"?: string | undefined | undefined;
-    "aria-disabled": (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
-    "aria-errormessage"?: string | undefined | undefined;
-    "aria-expanded"?: (boolean | "true" | "false") | undefined;
-    "aria-flowto"?: string | undefined | undefined;
-    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
-    "aria-hidden"?: (boolean | "true" | "false") | undefined;
-    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
-    "aria-keyshortcuts"?: string | undefined | undefined;
-    "aria-label"?: string | undefined | undefined;
-    "aria-labelledby"?: string | undefined | undefined;
-    "aria-level"?: number | undefined | undefined;
-    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
-    "aria-modal"?: (boolean | "true" | "false") | undefined;
-    "aria-multiline"?: (boolean | "true" | "false") | undefined;
-    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
-    "aria-owns"?: string | undefined | undefined;
-    "aria-placeholder"?: string | undefined | undefined;
-    "aria-posinset"?: number | undefined | undefined;
-    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-    "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
-    "aria-required"?: (boolean | "true" | "false") | undefined;
-    "aria-roledescription"?: string | undefined | undefined;
-    "aria-rowcount"?: number | undefined | undefined;
-    "aria-rowindex"?: number | undefined | undefined;
-    "aria-rowindextext"?: string | undefined | undefined;
-    "aria-rowspan"?: number | undefined | undefined;
-    "aria-selected"?: (boolean | "true" | "false") | undefined;
-    "aria-setsize"?: number | undefined | undefined;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
-    "aria-valuemax"?: number | undefined | undefined;
-    "aria-valuemin"?: number | undefined | undefined;
-    "aria-valuenow"?: number | undefined | undefined;
-    "aria-valuetext"?: string | undefined | undefined;
-    dangerouslySetInnerHTML?: {
-        __html: string | TrustedHTML;
-    } | undefined | undefined;
-    onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onChange?: import("react").ChangeEventHandler<HTMLDivElement, Element> | undefined;
-    onChangeCapture?: import("react").ChangeEventHandler<HTMLDivElement, Element> | undefined;
-    onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
-    onBeforeInputCapture?: import("react").InputEventHandler<HTMLDivElement> | undefined;
-    onInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
-    onInputCapture?: import("react").InputEventHandler<HTMLDivElement> | undefined;
-    onReset?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onResetCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSubmit?: import("react").SubmitEventHandler<HTMLDivElement> | undefined;
-    onSubmitCapture?: import("react").SubmitEventHandler<HTMLDivElement> | undefined;
-    onInvalid?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onInvalidCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onDrag?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragEnd?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragStart?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
-    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
-    onScrollEnd?: import("react").UIEventHandler<HTMLDivElement> | undefined;
-    onScrollEndCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
-    onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
-    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
-    onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
-    onBeforeToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
-    onTransitionCancel?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionRun?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionStart?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-    key?: import("react").Key | null | undefined;
-    defaultChecked?: boolean | undefined | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined | undefined;
-    accessKey?: string | undefined | undefined;
-    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
-    autoFocus?: boolean | undefined | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextMenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    hidden?: boolean | undefined | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
-    radioGroup?: string | undefined | undefined;
-    about?: string | undefined | undefined;
-    content?: string | undefined | undefined;
-    datatype?: string | undefined | undefined;
-    inlist?: any;
-    prefix?: string | undefined | undefined;
-    property?: string | undefined | undefined;
-    rel?: string | undefined | undefined;
-    resource?: string | undefined | undefined;
-    rev?: string | undefined | undefined;
-    typeof?: string | undefined | undefined;
-    vocab?: string | undefined | undefined;
-    autoCorrect?: string | undefined | undefined;
-    autoSave?: string | undefined | undefined;
-    itemProp?: string | undefined | undefined;
-    itemScope?: boolean | undefined | undefined;
-    itemType?: string | undefined | undefined;
-    itemID?: string | undefined | undefined;
-    itemRef?: string | undefined | undefined;
-    results?: number | undefined | undefined;
-    security?: string | undefined | undefined;
-    unselectable?: "on" | "off" | undefined | undefined;
-    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
-    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
-    popoverTarget?: string | undefined | undefined;
-    inert?: boolean | undefined | undefined;
-    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
-    is?: string | undefined | undefined;
-    exportparts?: string | undefined | undefined;
-    href: string | undefined;
-    className: string;
-}, HTMLElement>;
-export interface RowsProps extends ComponentPropsWithoutRef<'div'> {
+export declare function Row({ lead, leadIcon, title, meta, body, end, endValue, endCaption, lg, done, as, href, more, open, defaultOpen, onOpenChange, className, children, ...rest }: RowProps): import("react").JSX.Element;
+export interface RowsProps extends ComponentProps<'div'> {
 }
 /** Rows — a list of Rows separated by hairlines. */
 export declare function Rows({ className, ...rest }: RowsProps): import("react").JSX.Element;

package/dist/lists/Row.js

@@ -6,10 +6,17 @@ import { Icon } from '../type/Icon.js';
  * Row — a frameless row inside a card: lead · title + meta · end. 48px+ tall, a tap target.
  * Several go in Rows (hairlines between). A row that IS a card is `Card row`.
  * `done` is the checklist's finished line: ticked, muted, not tappable any more.
+ * `more` makes it expand: the row is the summary of a `<details class="row-expand">`, `more` comes out under it; `open` + `onOpenChange`, or `defaultOpen`.
+ * An `end` chevron turns when it is open — the app fetches whatever `more` lists; the row only shows it.
  */
-export function Row({ lead, leadIcon, title, meta, body, end, endValue, endCaption, lg, done, as, href, className, children, ...rest }) {
-    const el = as ?? (href ? 'a' : 'div');
-    return createElement(el, { href, className: cx('row', lg && 'row--lg', done && 'row--done', className), 'aria-disabled': done || undefined, ...rest }, leadIcon ? _jsx("span", { className: "row__lead", children: _jsx(Icon, { name: leadIcon }) }) : lead, (title != null || meta != null || body != null) && (_jsxs("div", { className: "row__body", children: [title != null && _jsx("span", { className: "row__title", children: title }), meta != null && _jsx("span", { className: "row__meta", children: meta }), body] })), children, (endValue != null || endCaption != null) && (_jsxs("span", { className: "row__end", children: [endValue != null && _jsx("span", { className: "t-title", children: endValue }), endCaption != null && _jsx("span", { className: "t-caption t-muted", children: endCaption })] })), end, done && _jsx("span", { className: "row__done", children: _jsx(Icon, { name: "check", size: "sm" }) }));
+export function Row({ lead, leadIcon, title, meta, body, end, endValue, endCaption, lg, done, as, href, more, open, defaultOpen, onOpenChange, className, children, ...rest }) {
+    const el = more !== undefined ? 'summary' : as ?? (href ? 'a' : 'div');
+    const row = createElement(el, { href, className: cx('row', lg && 'row--lg', done && 'row--done', className), 'aria-disabled': done || undefined, ...(more === undefined ? rest : {}) }, leadIcon ? _jsx("span", { className: "row__lead", children: _jsx(Icon, { name: leadIcon }) }) : lead, (title != null || meta != null || body != null) && (_jsxs("div", { className: "row__body", children: [title != null && _jsx("span", { className: "row__title", children: title }), meta != null && _jsx("span", { className: "row__meta", children: meta }), body] })), children, (endValue != null || endCaption != null) && (_jsxs("span", { className: "row__end", children: [endValue != null && _jsx("span", { className: "t-title", children: endValue }), endCaption != null && _jsx("span", { className: "t-caption t-muted", children: endCaption })] })), end, done && _jsx("span", { className: "row__done", children: _jsx(Icon, { name: "check", size: "sm" }) }));
+    if (more === undefined)
+        return row;
+    return (_jsxs("details", { className: "row-expand", open: open ?? defaultOpen, ...rest, onToggle: (e) => { const is = e.currentTarget.open; if (open !== undefined && is !== open)
+            e.currentTarget.open = open; if (is !== (open ?? !is))
+            onOpenChange?.(is); }, children: [row, _jsx("div", { className: "row-expand__more", children: more })] }));
 }
 /** Rows — a list of Rows separated by hairlines. */
 export function Rows({ className, ...rest }) {

package/dist/lists/Timeline.d.ts

@@ -1,9 +1,9 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-export interface TimelineProps extends ComponentPropsWithoutRef<'ol'> {
+import type { ComponentProps, ReactNode } from 'react';
+export interface TimelineProps extends ComponentProps<'ol'> {
 }
 /** Timeline — a hairline with accent dots, date marks and entries to the right; children are TimelineItems. */
 export declare function Timeline({ className, ...rest }: TimelineProps): import("react").JSX.Element;
-export interface TimelineItemProps extends ComponentPropsWithoutRef<'li'> {
+export interface TimelineItemProps extends ComponentProps<'li'> {
     /** the date chip ("Wed 14") */
     mark: ReactNode;
 }

package/dist/media/MapArea.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
-export interface MapAreaProps extends ComponentPropsWithoutRef<'div'> {
+import type { ComponentProps, ReactNode, Ref } from 'react';
+export interface MapAreaProps extends ComponentProps<'div'> {
     /** the words over the map, under the bar's line */
     hint?: ReactNode;
     /** the tile provider's credit, bottom right (OSM requires it) — a caption, never the engine's own control */

package/dist/media/Mosaic.d.ts

@@ -1,10 +1,10 @@
-import type { ComponentPropsWithoutRef } from 'react';
-export interface MosaicProps extends ComponentPropsWithoutRef<'div'> {
+import type { ComponentProps } from 'react';
+export interface MosaicProps extends ComponentProps<'div'> {
     label?: string;
 }
 /** Mosaic — one big photo + two small in a card (three Placeholders or imgs). */
 export declare function Mosaic({ label, className, ...rest }: MosaicProps): import("react").JSX.Element;
-export interface WaveProps extends ComponentPropsWithoutRef<'span'> {
+export interface WaveProps extends ComponentProps<'span'> {
     label?: string;
 }
 /** Wave — the waveform stand-in for a voice note, filling a Row's body. */

package/dist/media/Postcard.d.ts

@@ -1,24 +1,34 @@
-import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
-export interface PostcardProps extends ComponentPropsWithoutRef<'div'> {
+import { type ComponentProps, type ReactNode } from 'react';
+export interface PostcardProps extends ComponentProps<'div'> {
     /** the photo on the front; none = the wireframe box */
     photo?: string | null;
     alt?: string;
-    /** whose card it is — printed on both faces */
+    /** whose card it is — the big line of the band */
     name: ReactNode;
+    /** the line under the name (a place, a date, a one-liner) */
+    line?: ReactNode;
     /** the words on the back */
     caption?: ReactNode;
+    /** a voice note instead of words: the control to hear it, at the middle of the back — the APP plays it (an `IconBtn` with its `onClick`) */
+    voice?: ReactNode;
     /** CONTROLLED: the back is showing. The app owns it — pair it with `onFlip`. */
     flipped?: boolean;
     /** UNCONTROLLED: start turned over; the card then keeps its own side */
     defaultFlipped?: boolean;
     /** a face was tapped: the side it asks to show */
     onFlip?: (flipped: boolean) => void;
+    /** the heart in the band: the member's own like (the app owns it — the list of who liked comes from the app's data, shown OUTSIDE the card) */
+    liked?: boolean;
+    /** the heart was tapped: the state it asks for. No `liked` and no `onLike` = no heart */
+    onLike?: (liked: boolean) => void;
+    likeLabel?: string;
     frontLabel?: string;
     backLabel?: string;
 }
 /**
- * Postcard — a member's introduction as a card in the hand: the photo (or the wireframe box) with the name in front,
- * the caption on the back; a tap on either face turns it over (`--motion-flip`). Which side shows is a state: `flipped` + `onFlip`, or `defaultFlipped`.
- * A voice note, a like, a reply go OUTSIDE it, in a Row under it — a face is a button and holds no button.
+ * Postcard — a member's introduction, the shape of a cover card: the photo fills it (or the wireframe box), the band at the
+ * bottom holds the name, its line and the heart, and turns WITH the face; a tap on the photo turns it over (`--motion-flip`) to the back: the name a fifth down the paper, its line and the caption after it — or, for a voice note, `voice` (the play control) at the middle; the app plays it.
+ * Which side shows is a state: `flipped` + `onFlip`, or `defaultFlipped`. The heart is the member's own like: `liked` + `onLike`.
+ * Who else liked it, a voice note, a reply go OUTSIDE it — a Row under it (`Row more` expands the list).
  */
-export declare function Postcard({ photo, alt, name, caption, flipped, defaultFlipped, onFlip, frontLabel, backLabel, className, ...rest }: PostcardProps): import("react").JSX.Element;
+export declare function Postcard({ photo, alt, name, line, caption, voice, flipped, defaultFlipped, onFlip, liked, onLike, likeLabel, frontLabel, backLabel, className, ...rest }: PostcardProps): import("react").JSX.Element;

package/dist/media/Postcard.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { cx } from '../cx.js';
+import { IconBtn } from '../actions/IconBtn.js';
 /**
- * Postcard — a member's introduction as a card in the hand: the photo (or the wireframe box) with the name in front,
- * the caption on the back; a tap on either face turns it over (`--motion-flip`). Which side shows is a state: `flipped` + `onFlip`, or `defaultFlipped`.
- * A voice note, a like, a reply go OUTSIDE it, in a Row under it — a face is a button and holds no button.
+ * Postcard — a member's introduction, the shape of a cover card: the photo fills it (or the wireframe box), the band at the
+ * bottom holds the name, its line and the heart, and turns WITH the face; a tap on the photo turns it over (`--motion-flip`) to the back: the name a fifth down the paper, its line and the caption after it — or, for a voice note, `voice` (the play control) at the middle; the app plays it.
+ * Which side shows is a state: `flipped` + `onFlip`, or `defaultFlipped`. The heart is the member's own like: `liked` + `onLike`.
+ * Who else liked it, a voice note, a reply go OUTSIDE it — a Row under it (`Row more` expands the list).
  */
-export function Postcard({ photo, alt = '', name, caption, flipped, defaultFlipped = false, onFlip, frontLabel = 'พลิกดูด้านหลัง', backLabel = 'พลิกดูด้านหน้า', className, ...rest }) {
+export function Postcard({ photo, alt = '', name, line, caption, voice, flipped, defaultFlipped = false, onFlip, liked, onLike, likeLabel = 'ถูกใจ', frontLabel = 'พลิกดูด้านหลัง', backLabel = 'พลิกดูด้านหน้า', className, ...rest }) {
     const [inner, setInner] = useState(defaultFlipped);
     const back = flipped ?? inner;
     const turn = () => { if (flipped === undefined)
         setInner(!back); onFlip?.(!back); };
-    return (_jsxs("div", { className: cx('postcard', back && 'is-flipped', className), ...rest, children: [_jsxs("button", { className: "postcard__face postcard__front", type: "button", "aria-label": frontLabel, onClick: turn, children: [photo ? _jsx("img", { src: photo, alt: alt }) : alt ? _jsx("div", { className: "ph", role: "img", "aria-label": alt }) : _jsx("div", { className: "ph" }), _jsx("span", { className: "postcard__label", children: name })] }), _jsxs("button", { className: "postcard__face postcard__back", type: "button", "aria-label": backLabel, onClick: turn, children: [caption != null && _jsx("p", { className: "postcard__caption", children: caption }), _jsx("span", { className: "postcard__label", children: name })] })] }));
+    const words = (_jsxs("div", { className: "postcard__words", children: [_jsx("span", { className: "t-h1", children: name }), line != null && _jsx("span", { className: "t-body", children: line })] }));
+    return (_jsxs("div", { className: cx('postcard', back && 'is-flipped', className), ...rest, children: [_jsxs("div", { className: "postcard__face postcard__front", children: [_jsx("button", { className: "postcard__turn", type: "button", "aria-label": frontLabel, onClick: turn, children: photo ? _jsx("img", { src: photo, alt: alt }) : alt ? _jsx("div", { className: "ph", role: "img", "aria-label": alt }) : _jsx("div", { className: "ph" }) }), _jsxs("div", { className: "postcard__band", children: [words, (liked !== undefined || onLike) && _jsx(IconBtn, { invert: true, icon: "heart", label: likeLabel, "aria-pressed": !!liked, onClick: () => onLike?.(!liked) })] })] }), _jsxs("div", { className: "postcard__face postcard__back", children: [_jsxs("button", { className: "postcard__turn", type: "button", "aria-label": backLabel, onClick: turn, children: [words, caption != null && _jsx("p", { className: "postcard__caption", children: caption })] }), voice != null && _jsx("div", { className: "postcard__voice", children: voice })] })] }));
 }

package/dist/media/Quote.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-export interface QuoteProps extends ComponentPropsWithoutRef<'blockquote'> {
+import type { ComponentProps, ReactNode } from 'react';
+export interface QuoteProps extends ComponentProps<'blockquote'> {
     /** the words */
     text: ReactNode;
     /** the attribution */

package/dist/media/Tile.d.ts

@@ -1,13 +1,13 @@
-import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
 import { type IconName } from '../type/Icon.js';
-export interface TileGridProps extends ComponentPropsWithoutRef<'div'> {
+export interface TileGridProps extends ComponentProps<'div'> {
     /** three across on a phone (attachments, upload kinds) */
     cols3?: boolean;
     bleed?: boolean;
 }
 /** TileGrid — big square Tiles in a responsive grid. */
 export declare function TileGrid({ cols3, bleed, className, ...rest }: TileGridProps): import("react").JSX.Element;
-export interface TileProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+export interface TileProps extends Omit<ComponentProps<'div'>, 'onChange'> {
     /** the icon at the top */
     icon?: IconName;
     /** the label at the bottom */
@@ -272,6 +272,7 @@ export declare function Tile({ icon, label, value, sub, pick, type, name, checke
     onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionStart?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    ref?: import("react").Ref<HTMLDivElement> | undefined;
     key?: import("react").Key | null | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -317,4 +318,4 @@ export declare function Tile({ icon, label, value, sub, pick, type, name, checke
     exportparts?: string | undefined | undefined;
     type: string | undefined;
     className: string;
-}, HTMLElement>;
+}, HTMLDivElement>;

package/dist/numbers/Badge.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentPropsWithoutRef } from 'react';
-export interface BadgeProps extends ComponentPropsWithoutRef<'span'> {
+import type { ComponentProps } from 'react';
+export interface BadgeProps extends ComponentProps<'span'> {
     /** tinted instead of accent */
     soft?: boolean;
 }

package/dist/numbers/Band.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-export interface BandProps extends ComponentPropsWithoutRef<'article'> {
+import type { ComponentProps, ReactNode } from 'react';
+export interface BandProps extends ComponentProps<'article'> {
     /** the two-line label (use a `<br />` to break it) */
     label: ReactNode;
     /** the giant number; wrap a unit in `<small>` */
@@ -10,7 +10,7 @@ export interface BandProps extends ComponentPropsWithoutRef<'article'> {
 }
 /** Band — a data card: 2-line label · giant number · footnote. Stack several in a BandStack for one boundary with hairlines. */
 export declare function Band({ label, num, foot, tone, className, ...rest }: BandProps): import("react").JSX.Element;
-export interface BandStackProps extends ComponentPropsWithoutRef<'div'> {
+export interface BandStackProps extends ComponentProps<'div'> {
 }
 /** BandStack — several Bands as ONE card boundary, a hairline between each. */
 export declare function BandStack({ className, ...rest }: BandStackProps): import("react").JSX.Element;

package/dist/numbers/Bars.d.ts

@@ -1,11 +1,11 @@
-import type { ComponentPropsWithoutRef } from 'react';
-export interface BarsProps extends ComponentPropsWithoutRef<'div'> {
+import type { ComponentProps } from 'react';
+export interface BarsProps extends ComponentProps<'div'> {
     /** the value of the tallest bar */
     max: number;
 }
 /** Bars — three or four bars with a count on top, the glance chart; children are Bar. */
 export declare function Bars({ max, className, style, ...rest }: BarsProps): import("react").JSX.Element;
-export interface BarProps extends ComponentPropsWithoutRef<'div'> {
+export interface BarProps extends ComponentProps<'div'> {
     value: number;
     /** the highlighted bar (accent, its count in a pill) */
     on?: boolean;

package/dist/numbers/DotGrid.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentPropsWithoutRef } from 'react';
-export interface DotGridProps extends ComponentPropsWithoutRef<'div'> {
+import type { ComponentProps } from 'react';
+export interface DotGridProps extends ComponentProps<'div'> {
     /** how many dots */
     total: number;
     /** how many are done (filled, from the top-left) */

package/dist/numbers/Picker.d.ts

@@ -1,5 +1,5 @@
-import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
-export interface PickerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue'> {
+import { type ComponentProps, type ReactNode } from 'react';
+export interface PickerProps extends Omit<ComponentProps<'div'>, 'onChange' | 'defaultValue'> {
     /** CONTROLLED: the chosen PickerItem's `value`. The app owns it — pair it with `onChange`. */
     value?: string;
     /** UNCONTROLLED: the value it starts on; the picker then keeps its own */
@@ -17,7 +17,7 @@ export interface PickerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onCh
  * settled in the centre. The CSS lights the centred item by scroll position; the app never reads the DOM to know what was picked.
  */
 export declare function Picker({ value, defaultValue, onChange, unit, label, className, children, ...rest }: PickerProps): import("react").JSX.Element;
-export interface PickerItemProps extends Omit<ComponentPropsWithoutRef<'button'>, 'value'> {
+export interface PickerItemProps extends Omit<ComponentProps<'button'>, 'value'> {
     /** what choosing this item reports; default = its own text */
     value?: string;
 }

package/dist/numbers/Progress.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+export interface ProgressProps extends ComponentProps<'div'> {
+    /** the done share, 0–1 */
+    at: number;
+    /** accessible name */
+    label?: string;
+}
+/** Progress — one straight line: the done share solid, the rest faint. A voice note's timeline, a download; the app keeps the value. */
+export declare function Progress({ at, label, className, style, ...rest }: ProgressProps): import("react").JSX.Element;

package/dist/numbers/Progress.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../cx.js';
+/** Progress — one straight line: the done share solid, the rest faint. A voice note's timeline, a download; the app keeps the value. */
+export function Progress({ at, label, className, style, ...rest }) {
+    const v = Math.min(1, Math.max(0, at));
+    return _jsx("div", { className: cx('progress', className), role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 1, "aria-valuenow": v, style: { ...style, '--progress-at': v }, ...rest });
+}

package/dist/numbers/Ring.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-export interface RingProps extends ComponentPropsWithoutRef<'div'> {
+import type { ComponentProps, ReactNode } from 'react';
+export interface RingProps extends ComponentProps<'div'> {
     /** 0–100 */
     value: number;
     /** sm = an avatar-xl ring · xs = an inline counter in a head (2/3) */