@usableapp/cardds 0.1.0

package/dist/choice/Slider.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { cx } from '../cx';
+/** Slider — one value along a hairline rail with a 48px knob; the whole range is thumb-tall. */
+export function Slider({ label, glyph, className, style, ...input }) {
+    const range = useRef(null);
+    // the knob's place is published by cardds.js on every input event; on mount it publishes once
+    // for the value the slider starts at, so a glyph sits on the knob before the first move
+    useEffect(() => {
+        if (glyph != null && range.current)
+            range.current.dispatchEvent(new Event('input', { bubbles: true }));
+    }, [glyph]);
+    return (_jsxs("label", { className: cx('slider', className), style: style, children: [label != null && _jsx("span", { className: "slider__label", children: label }), glyph != null && _jsx("span", { className: "slider__glyph", "aria-hidden": "true", children: glyph }), _jsx("input", { ref: range, className: "slider__range", type: "range", ...input })] }));
+}

package/dist/cx.d.ts

@@ -0,0 +1,2 @@
+/** joins class names, dropping the falsy ones — every component builds its class list with it */
+export declare const cx: (...parts: Array<string | false | null | undefined | 0>) => string;

package/dist/cx.js

@@ -0,0 +1,2 @@
+/** joins class names, dropping the falsy ones — every component builds its class list with it */
+export const cx = (...parts) => parts.filter(Boolean).join(' ');

package/dist/forms/AddRow.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export interface AddRowProps extends ComponentPropsWithoutRef<'button'> {
+}
+/** AddRow — the inline "+ add another" action under a list of fields. */
+export declare function AddRow({ className, children, ...rest }: AddRowProps): import("react").JSX.Element;

package/dist/forms/AddRow.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../cx';
+import { Icon } from '../type/Icon';
+/** AddRow — the inline "+ add another" action under a list of fields. */
+export function AddRow({ className, children, ...rest }) {
+    return (_jsxs("button", { type: "button", className: cx('add-row', className), ...rest, children: [_jsx("span", { className: "add-row__plus", children: _jsx(Icon, { name: "plus" }) }), " ", children] }));
+}

package/dist/forms/Composer.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface ComposerProps extends Omit<ComponentPropsWithoutRef<'textarea'>, 'className' | 'style'> {
+    /** the caption between the two buttons ("Your request is born") */
+    hint?: ReactNode;
+    /** the left button of the bar (an IconBtn — voice) */
+    lead?: ReactNode;
+    /** the right button of the bar (an `IconBtn invert` — send) */
+    send?: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/** Composer — a big write-in area (display type) with a bottom bar: icon · hint · send. The write-in step's sheet content. */
+export declare function Composer({ hint, lead, send, className, style, ...textarea }: ComposerProps): import("react").JSX.Element;

package/dist/forms/Composer.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../cx';
+/** Composer — a big write-in area (display type) with a bottom bar: icon · hint · send. The write-in step's sheet content. */
+export function Composer({ hint, lead, send, className, style, ...textarea }) {
+    return (_jsxs("div", { className: cx('composer', className), style: style, children: [_jsx("textarea", { className: "composer__input", ...textarea }), _jsxs("div", { className: "composer__bar", children: [lead, hint != null && _jsx("span", { className: "composer__hint", children: hint }), send] })] }));
+}

package/dist/forms/Field.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { type IconName } from '../type/Icon';
+export interface FieldProps extends Omit<ComponentPropsWithoutRef<'input'>, 'className' | 'style'> {
+    /** a leading icon (phone-call, plane, calendar-days) */
+    icon?: IconName;
+    /** an action inside the field, flush right — an `IconBtn sm invert` */
+    action?: ReactNode;
+    /** the accessible name when the placeholder is not enough */
+    label?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Field — the flat outlined input: the LABEL IS THE PLACEHOLDER. 48px tall (56px with an action inside).
+ * Fields belong in a Sheet (what the member acts on), 1–3 per step, never in a reading card.
+ */
+export declare function Field({ icon, action, label, className, style, ...input }: FieldProps): import("react").JSX.Element;

package/dist/forms/Field.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../cx';
+import { Icon } from '../type/Icon';
+/**
+ * Field — the flat outlined input: the LABEL IS THE PLACEHOLDER. 48px tall (56px with an action inside).
+ * Fields belong in a Sheet (what the member acts on), 1–3 per step, never in a reading card.
+ */
+export function Field({ icon, action, label, className, style, ...input }) {
+    return (_jsxs("label", { className: cx('field', action != null && 'field--action', className), style: style, children: [icon && _jsx(Icon, { name: icon, size: "sm" }), _jsx("input", { "aria-label": label, ...input }), action] }));
+}

package/dist/forms/FileBtn.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface FileBtnProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'className' | 'style' | 'children'> {
+    /** the filled accent button — the one forward move */
+    primary?: boolean;
+    /** ink on whatever it sits on, a faint outline */
+    quiet?: boolean;
+    /** full width */
+    block?: boolean;
+    /** the button's words (and an Icon, if any) */
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * FileBtn — a Btn that opens the device's file picker: the button IS the label of a hidden file input, so the
+ * whole button is the tap target and nothing is forwarded by script. `accept="image/*" capture="environment"`
+ * opens the camera; without `capture` the gallery. The picked file arrives in `onChange` like any input.
+ */
+export declare function FileBtn({ primary, quiet, block, className, children, ...input }: FileBtnProps): import("react").JSX.Element;

package/dist/forms/FileBtn.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../cx';
+/**
+ * FileBtn — a Btn that opens the device's file picker: the button IS the label of a hidden file input, so the
+ * whole button is the tap target and nothing is forwarded by script. `accept="image/*" capture="environment"`
+ * opens the camera; without `capture` the gallery. The picked file arrives in `onChange` like any input.
+ */
+export function FileBtn({ primary, quiet, block, className, children, ...input }) {
+    return (_jsxs("label", { className: cx('btn', primary && 'btn--primary', quiet && 'btn--quiet', block && 'btn--block', className), children: [_jsx("input", { type: "file", hidden: true, ...input }), children] }));
+}

package/dist/forms/Pin.d.ts

@@ -0,0 +1,19 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export interface PinProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+    /** how many digits (4 or 6) */
+    length?: number;
+    /** digits already typed, left to right ("03") */
+    value?: string;
+    /** accessible name prefix for each cell ("Digit" → "Digit 1") */
+    label?: string;
+    /** the code so far, after every keystroke; `complete` once every cell holds a digit */
+    onChange?: (code: string, complete: boolean) => void;
+    /** focus the first empty cell on mount */
+    autoFocus?: boolean;
+}
+/**
+ * Pin — big code entry, one digit per pill; a filled cell turns accent. Lives in a Sheet.
+ * Typing a digit moves to the next cell, Backspace in an empty cell moves back, a pasted code fills every cell
+ * (cardds.js, delegated — the cells stay plain inputs). The first cell takes the SMS one-time-code autofill.
+ */
+export declare function Pin({ length, value, label, onChange, autoFocus, className, ...rest }: PinProps): import("react").JSX.Element;

package/dist/forms/Pin.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { cx } from '../cx';
+/**
+ * Pin — big code entry, one digit per pill; a filled cell turns accent. Lives in a Sheet.
+ * Typing a digit moves to the next cell, Backspace in an empty cell moves back, a pasted code fills every cell
+ * (cardds.js, delegated — the cells stay plain inputs). The first cell takes the SMS one-time-code autofill.
+ */
+export function Pin({ length = 6, value = '', label = 'Digit', onChange, autoFocus, className, ...rest }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || !onChange)
+            return;
+        const on = (e) => { const d = e.detail; onChange(d.code, d.complete); };
+        el.addEventListener('cardds:pin', on);
+        return () => el.removeEventListener('cardds:pin', on);
+    }, [onChange]);
+    useEffect(() => {
+        if (!autoFocus)
+            return;
+        const cells = ref.current?.querySelectorAll('.pin__cell');
+        if (cells)
+            ([...cells].find((c) => !c.value) ?? cells[cells.length - 1])?.focus();
+    }, [autoFocus]);
+    return (_jsx("div", { ref: ref, className: cx('pin', className), ...rest, children: Array.from({ length }, (_, i) => (_jsx("input", { className: "pin__cell", inputMode: "numeric", pattern: "[0-9]*", placeholder: " ", defaultValue: value[i] ?? '', "aria-label": `${label} ${i + 1}`, autoComplete: i === 0 ? 'one-time-code' : 'off' }, i))) }));
+}

package/dist/index.d.ts

@@ -0,0 +1,72 @@
+import '../cardds.js';
+export { cx } from './cx';
+export * from './type/Icon';
+export { ICON_NAMES } from './type/icons';
+export * from './type/Text';
+export * from './scaffold/Screen';
+export * from './scaffold/AppBar';
+export * from './scaffold/TopBar';
+export * from './scaffold/ActionBar';
+export * from './scaffold/PagerAt';
+export * from './scaffold/FloatBar';
+export * from './scaffold/FilterRow';
+export * from './scaffold/Section';
+export * from './scaffold/EmptyState';
+export * from './scaffold/Centre';
+export * from './cards/Card';
+export * from './cards/CardHead';
+export * from './cards/CardFoot';
+export * from './cards/CardParts';
+export * from './cards/Stat';
+export * from './cards/Placeholder';
+export * from './sheets/SheetStack';
+export * from './sheets/CardBack';
+export * from './sheets/Sheet';
+export * from './sheets/SheetHead';
+export * from './sheets/SheetBody';
+export * from './sheets/SheetStage';
+export * from './sheets/Step';
+export * from './sheets/Drawer';
+export * from './actions/Btn';
+export * from './actions/IconBtn';
+export * from './actions/Chip';
+export * from './actions/Dot';
+export * from './actions/Dropdown';
+export * from './actions/Segment';
+export * from './actions/Fab';
+export * from './actions/BtnRow';
+export * from './actions/Link';
+export * from './forms/Field';
+export * from './forms/FileBtn';
+export * from './forms/AddRow';
+export * from './forms/Pin';
+export * from './forms/Composer';
+export * from './choice/Check';
+export * from './choice/DayStrip';
+export * from './choice/Calendar';
+export * from './choice/Mood';
+export * from './choice/Slider';
+export * from './numbers/Ring';
+export * from './numbers/Track';
+export * from './numbers/Band';
+export * from './numbers/DotGrid';
+export * from './numbers/Picker';
+export * from './numbers/Badge';
+export * from './numbers/Bars';
+export * from './people/Avatar';
+export * from './people/AvatarPick';
+export * from './lists/Row';
+export * from './lists/Kv';
+export * from './lists/Timeline';
+export * from './lists/Legend';
+export * from './media/Quote';
+export * from './media/Postcard';
+export * from './media/MapArea';
+export * from './media/Tile';
+export * from './media/Mosaic';
+export * from './layover/Banner';
+export * from './layover/Callout';
+export * from './layover/Deck';
+export * from './journey/Route';
+export * from './journey/TileBadge';
+export * from './journey/NoteRow';

package/dist/index.js

@@ -0,0 +1,75 @@
+// cardds — the React adapter over the CSS. Thin: every component emits the
+// markup contract the CSS documents, nothing more. cardds.js rides along for
+// the behaviours (sheet handle, stack open/close, dropdown value sync).
+import '../cardds.js';
+export { cx } from './cx';
+export * from './type/Icon';
+export { ICON_NAMES } from './type/icons';
+export * from './type/Text';
+export * from './scaffold/Screen';
+export * from './scaffold/AppBar';
+export * from './scaffold/TopBar';
+export * from './scaffold/ActionBar';
+export * from './scaffold/PagerAt';
+export * from './scaffold/FloatBar';
+export * from './scaffold/FilterRow';
+export * from './scaffold/Section';
+export * from './scaffold/EmptyState';
+export * from './scaffold/Centre';
+export * from './cards/Card';
+export * from './cards/CardHead';
+export * from './cards/CardFoot';
+export * from './cards/CardParts';
+export * from './cards/Stat';
+export * from './cards/Placeholder';
+export * from './sheets/SheetStack';
+export * from './sheets/CardBack';
+export * from './sheets/Sheet';
+export * from './sheets/SheetHead';
+export * from './sheets/SheetBody';
+export * from './sheets/SheetStage';
+export * from './sheets/Step';
+export * from './sheets/Drawer';
+export * from './actions/Btn';
+export * from './actions/IconBtn';
+export * from './actions/Chip';
+export * from './actions/Dot';
+export * from './actions/Dropdown';
+export * from './actions/Segment';
+export * from './actions/Fab';
+export * from './actions/BtnRow';
+export * from './actions/Link';
+export * from './forms/Field';
+export * from './forms/FileBtn';
+export * from './forms/AddRow';
+export * from './forms/Pin';
+export * from './forms/Composer';
+export * from './choice/Check';
+export * from './choice/DayStrip';
+export * from './choice/Calendar';
+export * from './choice/Mood';
+export * from './choice/Slider';
+export * from './numbers/Ring';
+export * from './numbers/Track';
+export * from './numbers/Band';
+export * from './numbers/DotGrid';
+export * from './numbers/Picker';
+export * from './numbers/Badge';
+export * from './numbers/Bars';
+export * from './people/Avatar';
+export * from './people/AvatarPick';
+export * from './lists/Row';
+export * from './lists/Kv';
+export * from './lists/Timeline';
+export * from './lists/Legend';
+export * from './media/Quote';
+export * from './media/Postcard';
+export * from './media/MapArea';
+export * from './media/Tile';
+export * from './media/Mosaic';
+export * from './layover/Banner';
+export * from './layover/Callout';
+export * from './layover/Deck';
+export * from './journey/Route';
+export * from './journey/TileBadge';
+export * from './journey/NoteRow';

package/dist/journey/NoteRow.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import { type IconName } from '../type/Icon';
+export interface NoteRowProps extends ComponentPropsWithoutRef<'div'> {
+    icon?: IconName;
+}
+/** NoteRow — icon + caption: transit hints, fine print. */
+export declare function NoteRow({ icon, className, children, ...rest }: NoteRowProps): import("react").JSX.Element;

package/dist/journey/NoteRow.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../cx';
+import { Icon } from '../type/Icon';
+/** NoteRow — icon + caption: transit hints, fine print. */
+export function NoteRow({ icon = 'clock', className, children, ...rest }) {
+    return (_jsxs("div", { className: cx('note-row', className), ...rest, children: [_jsx(Icon, { name: icon, size: "sm" }), " ", children] }));
+}

package/dist/journey/Route.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { type IconName } from '../type/Icon';
+export interface RoutePoint {
+    /** the place name (caption) */
+    place: ReactNode;
+    /** the code, big (DMK) */
+    code: ReactNode;
+    /** the time */
+    time: ReactNode;
+}
+export interface RouteProps extends ComponentPropsWithoutRef<'div'> {
+    from: RoutePoint;
+    to: RoutePoint;
+    /** the icon on the dotted connector (plane by default) */
+    via?: IconName;
+}
+/** Route — endpoint · dotted connector with an icon · endpoint: flights, buses, deliveries. */
+export declare function Route({ from, to, via, className, ...rest }: RouteProps): import("react").JSX.Element;

package/dist/journey/Route.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../cx';
+import { Icon } from '../type/Icon';
+/** Route — endpoint · dotted connector with an icon · endpoint: flights, buses, deliveries. */
+export function Route({ from, to, via = 'plane', className, ...rest }) {
+    const point = (p, end) => (_jsxs("div", { className: cx('route__point', end && 'route__point--end'), children: [_jsx("span", { className: "route__place", children: p.place }), _jsx("span", { className: "route__code", children: p.code }), _jsx("span", { className: "route__time", children: p.time })] }));
+    return (_jsxs("div", { className: cx('route', className), ...rest, children: [point(from), _jsx("span", { className: "route__via", children: _jsx(Icon, { name: via, size: "sm" }) }), point(to, true)] }));
+}

package/dist/journey/TileBadge.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface TileBadgeProps extends ComponentPropsWithoutRef<'span'> {
+    /** the small label above ("Gate") */
+    label: ReactNode;
+    /** the big value ("21") */
+    value: ReactNode;
+    /** a second small label under the value ("Thu") */
+    sub?: ReactNode;
+    /** no fill: a date box beside a title (Jun / 18) */
+    plain?: boolean;
+    /** pinned to a CardMedia's corner (rating, price) */
+    corner?: boolean;
+}
+/** TileBadge — a tiny label over a big value: gate, seat, date, rating. */
+export declare function TileBadge({ label, value, sub, plain, corner, className, ...rest }: TileBadgeProps): import("react").JSX.Element;

package/dist/journey/TileBadge.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../cx';
+/** TileBadge — a tiny label over a big value: gate, seat, date, rating. */
+export function TileBadge({ label, value, sub, plain, corner, className, ...rest }) {
+    return (_jsxs("span", { className: cx('tile-badge', plain && 'tile-badge--plain', corner && 'tile-badge--corner', className), ...rest, children: [_jsx("span", { className: "tile-badge__label", children: label }), _jsx("span", { className: "tile-badge__value", children: value }), sub != null && _jsx("span", { className: "tile-badge__label", children: sub })] }));
+}

package/dist/layover/Banner.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface BannerProps extends ComponentPropsWithoutRef<'details'> {
+    /** the chip that opens it (a `Chip on` with a chevron Icon xs) */
+    summary: ReactNode;
+    /** the tone of the opened card */
+    tone?: 1 | 2 | 3;
+}
+/** Banner — a chip that expands into a tinted card, no JS (a native details). */
+export declare function Banner({ summary, tone, className, children, ...rest }: BannerProps): import("react").JSX.Element;

package/dist/layover/Banner.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../cx';
+/** Banner — a chip that expands into a tinted card, no JS (a native details). */
+export function Banner({ summary, tone = 3, className, children, ...rest }) {
+    return (_jsxs("details", { className: cx('banner', className), ...rest, children: [_jsx("summary", { children: summary }), _jsx("div", { className: cx('card banner__body', tone !== 1 && `card--${tone}`), children: children })] }));
+}

package/dist/layover/Callout.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface CalloutProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    title: ReactNode;
+    sub?: ReactNode;
+    /** position over the stage background (CSS lengths / percentages) */
+    top?: string;
+    left?: string;
+}
+/** Callout — a small card with a tail, pinned over a map or a media. */
+export declare function Callout({ title, sub, top, left, className, style, ...rest }: CalloutProps): import("react").JSX.Element;

package/dist/layover/Callout.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../cx';
+/** Callout — a small card with a tail, pinned over a map or a media. */
+export function Callout({ title, sub, top, left, className, style, ...rest }) {
+    return (_jsxs("div", { className: cx('callout', className), style: { top, left, translate: left ? '-50% 0' : undefined, ...style }, ...rest, children: [_jsx("span", { className: "callout__title", children: title }), sub != null && _jsx("span", { className: "callout__sub", children: sub })] }));
+}

package/dist/layover/Deck.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export interface DeckProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** Deck — swipe cards fanned behind each other; the LAST child is on top. Children are Cards (the front one may `fold`). */
+export declare function Deck({ className, ...rest }: DeckProps): import("react").JSX.Element;
+export interface DeckActionsProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** DeckActions — the two big round buttons under a Deck (skip · keep). */
+export declare function DeckActions({ className, ...rest }: DeckActionsProps): import("react").JSX.Element;

package/dist/layover/Deck.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../cx';
+/** Deck — swipe cards fanned behind each other; the LAST child is on top. Children are Cards (the front one may `fold`). */
+export function Deck({ className, ...rest }) {
+    return _jsx("div", { className: cx('deck', className), ...rest });
+}
+/** DeckActions — the two big round buttons under a Deck (skip · keep). */
+export function DeckActions({ className, ...rest }) {
+    return _jsx("div", { className: cx('deck__actions', className), ...rest });
+}

package/dist/lists/Kv.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { type IconName } from '../type/Icon';
+export interface KvProps extends ComponentPropsWithoutRef<'dl'> {
+    /** hairlines between rows */
+    lined?: boolean;
+}
+/** Kv — key-value rows: label left, value right (Pay with · Time credits); children are KVRows. */
+export declare function Kv({ lined, className, ...rest }: KvProps): import("react").JSX.Element;
+export interface KvRowProps extends ComponentPropsWithoutRef<'div'> {
+    /** the key */
+    label: ReactNode;
+    /** the value */
+    children?: ReactNode;
+}
+/** KvRow — one key · value line (48px tall); the value may hold a Chip, an Avatar, an Icon. */
+export declare function KvRow({ label, className, children, ...rest }: KvRowProps): import("react").JSX.Element;
+export interface KvGridProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** KvGrid — value-over-label cells split by a rule (Sex | Weight); children are KVCells. */
+export declare function KvGrid({ className, ...rest }: KvGridProps): import("react").JSX.Element;
+export interface KvCellProps extends ComponentPropsWithoutRef<'div'> {
+    icon?: IconName;
+    value: ReactNode;
+    label: ReactNode;
+}
+/** KvCell — an icon, a big value, a caption label. */
+export declare function KvCell({ icon, value, label, className, ...rest }: KvCellProps): import("react").JSX.Element;

package/dist/lists/Kv.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../cx';
+import { Icon } from '../type/Icon';
+/** Kv — key-value rows: label left, value right (Pay with · Time credits); children are KVRows. */
+export function Kv({ lined, className, ...rest }) {
+    return _jsx("dl", { className: cx('kv', lined && 'kv--lined', className), ...rest });
+}
+/** KvRow — one key · value line (48px tall); the value may hold a Chip, an Avatar, an Icon. */
+export function KvRow({ label, className, children, ...rest }) {
+    return (_jsxs("div", { className: cx('kv__row', className), ...rest, children: [_jsx("dt", { className: "kv__key", children: label }), _jsx("dd", { className: "kv__val", children: children })] }));
+}
+/** KvGrid — value-over-label cells split by a rule (Sex | Weight); children are KVCells. */
+export function KvGrid({ className, ...rest }) {
+    return _jsx("div", { className: cx('kv-grid', className), ...rest });
+}
+/** KvCell — an icon, a big value, a caption label. */
+export function KvCell({ icon, value, label, className, ...rest }) {
+    return (_jsxs("div", { className: cx('kv-cell', className), ...rest, children: [icon && _jsx(Icon, { name: icon }), _jsx("span", { className: "kv-cell__val", children: value }), _jsx("span", { className: "kv-cell__key", children: label })] }));
+}

package/dist/lists/Legend.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export interface LegendProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** Legend — signal dots with captions under a chart; children are LegendItems. */
+export declare function Legend({ className, ...rest }: LegendProps): import("react").JSX.Element;
+export interface LegendItemProps extends ComponentPropsWithoutRef<'span'> {
+    /** which signal dot: `a` (default) or `b` */
+    dot?: 'a' | 'b';
+}
+/** LegendItem — a Dot and its caption. */
+export declare function LegendItem({ dot, className, children, ...rest }: LegendItemProps): import("react").JSX.Element;

package/dist/lists/Legend.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../cx';
+import { Dot } from '../actions/Dot';
+/** Legend — signal dots with captions under a chart; children are LegendItems. */
+export function Legend({ className, ...rest }) {
+    return _jsx("div", { className: cx('legend', className), ...rest });
+}
+/** LegendItem — a Dot and its caption. */
+export function LegendItem({ dot = 'a', className, children, ...rest }) {
+    return (_jsxs("span", { className: cx('legend__item', className), ...rest, children: [_jsx(Dot, { b: dot === 'b' }), " ", children] }));
+}