@usableapp/cardds 0.1.0

package/css/tokens.css

@@ -0,0 +1,177 @@
+/* ============================================================
+   cardds/tokens.css — structural tokens + WIREFRAME color defaults
+   Colors here are grayscale on purpose. Real color = palette.css.
+   Components reference ONLY these role tokens, never raw hex.
+
+   Every length is rem so the whole system scales with the root
+   font size (base.css steps it down on narrow phones and it follows
+   the user's text-size setting). Only borders, rules and focus
+   rings stay in px — they must stay crisp, not scale.
+   4pt grid: 1rem = 16px → --sp-1 = 4px.
+   ============================================================ */
+
+:root {
+  /* ---- layout ---- */
+  --screen-w: 25rem;      /* 400: mobile column — .screen, .action-bar, .sheet-stage */
+  --screen-centre: 40%;   /* the human centre of a screen: the middle of its top four fifths — the bottom fifth is the thumb's (Lh, 2026-09-10). .card--centre sits here */
+
+  /* ---- spacing (4pt grid) ---- */
+  --sp-0: 0.125rem;  /* 2  hairline gaps (title→meta) */
+  --sp-1: 0.25rem;   /* 4 */
+  --sp-2: 0.5rem;    /* 8 */
+  --sp-3: 0.75rem;   /* 12 */
+  --sp-4: 1rem;      /* 16 */
+  --sp-5: 1.25rem;   /* 20 */
+  --sp-6: 1.5rem;    /* 24 */
+  --sp-8: 2rem;      /* 32 */
+  --sp-10: 2.5rem;   /* 40 */
+  --sp-12: 3rem;     /* 48 */
+
+  /* ---- touch & control sizes ---- */
+  --tap: 3rem;        /* 48 primary touch target */
+  --tap-sm: 2.75rem;  /* 44 minimum touch target (Apple HIG floor) */
+  --tap-lg: 3.5rem;   /* 56 hero controls: track steps, send, field with action */
+  --btn-h: 3.25rem;   /* 52 button height */
+  --btn-xl-h: 5.5rem; /* 88 the one giant CTA */
+  --chip-h: 2.375rem; /* 38 chip height */
+  --bar-h: 4rem;      /* 64 float bar, day cell, deck actions */
+  --header-h: 3.75rem;/* 60 top bar — .topbar and .appbar alike */
+  --screen-pad: var(--sp-4); /* 16 the screen's inset — .sheet-stack cancels it */
+  --map-ring: 10rem;    /* the rough-area ring on a map (sheet.css .map__ring) — a neighbourhood, not a house */
+  --fab: 4.5rem;      /* 72 square floating action */
+  --badge: 1.625rem;  /* 26 count badge */
+  --dot: 0.625rem;    /* 10 signal dot */
+  --dot-xs: 0.375rem; /* 6  marker dot */
+
+  /* ---- icons (icons.svg sprite, Lucide) ---- */
+  --icon: 1.75rem;    /* 28 default */
+  --icon-sm: 1.75rem; /* one size everywhere; retune if small contexts appear */
+  --icon-lg: 2rem;    /* 32 empty states */
+  --icon-xs: 1rem;    /* 16 inline with captions/chips only (row meta, link arrows) */
+
+  /* ---- people & big elements ---- */
+  --avatar-sm: 2.5rem;  /* 40 row lead */
+  --avatar: 3.5rem;     /* 56 card head, person row */
+  --avatar-lg: 5rem;    /* 80 chooser row */
+  --avatar-xl: 6rem;    /* 96 sheet head icon ring */
+  --ring: 11rem;        /* 176 .ring gauge diameter */
+  --ring-w: 1.375rem;   /* 22 .ring stroke */
+  --tile-min: 7.5rem;   /* 120 .tile-grid column floor */
+  --tile-h: 8.25rem;    /* 132 tile / band height */
+
+  /* ---- radius ---- */
+  --r-chip: 999px;        /* pills, chips, buttons — always fully round */
+  --r-card: 2rem;         /* 32 the one card radius: every card, row, tile, menu, sheet, fab */
+  --r-media: 1rem;        /* 16 images inside cards */
+  --r-control: 0.875rem;  /* 14 fields, thumbs, menu rows */
+  --r-badge: 0.625rem;    /* 10 tile badge, bars */
+
+  /* ---- borders / rules / elevation (px on purpose: crisp at any scale) ---- */
+  --border-w: 1.5px;
+  --rule-w: 2px;                                   /* dotted connectors, picker rules */
+  --focus: 2px solid currentColor;                 /* :focus-visible ring */
+  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.06), 0 0.5rem 1.5rem rgb(0 0 0 / 0.08);
+  --shadow-float: 0 0.25rem 0.75rem rgb(0 0 0 / 0.14);
+  --shadow-sheet: 0 -0.5rem 2rem rgb(0 0 0 / 0.16); /* sheets, lifted cards */
+
+  /* ---- motion ---- */
+  --motion-sheet: 0.35s;
+  --motion-slide: 0.22s; /* a centred card sliding out and the next in (card.css) — quick, a page turn (Lh, 2026-09-12) */
+  --motion-flip: 0.45s;  /* a postcard turning over (media.css) — slow enough to read as a card in the hand */
+
+  /* ---- typography: one scale, rem so it follows the root ---- */
+  --font-ui: "PK Nonthaburi", -apple-system, system-ui, sans-serif; /* fonts.css ships it; the rest is the fallback while it loads */
+  --font-display: "FC Pride", var(--font-ui); /* the character face for headings and big numbers (fonts.css) */
+  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
+
+  --fs-xs: 0.6875rem;      /* 11 overline */
+  --fs-caption: 0.75rem;   /* 12 */
+  --fs-label: 0.8125rem;   /* 13 */
+  --fs-sm: 0.875rem;       /* 14 chips, segments */
+  --fs-body: 0.9375rem;    /* 15 */
+  --fs-md: 1rem;           /* 16 buttons */
+  --fs-title: 1.0625rem;   /* 17 */
+  --fs-lg: 1.25rem;        /* 20 day numbers, tile values */
+  --fs-h2: 1.375rem;       /* 22 */
+  --fs-2xl: 1.5rem;        /* 24 composer, small ring */
+  --fs-h1: 1.75rem;        /* 28 */
+  --fs-3xl: 2rem;          /* 32 xl button */
+  --fs-display: clamp(2.125rem, 9vw, 2.625rem); /* 34–42 */
+  --fs-stat: clamp(1.875rem, 8vw, 2.375rem);    /* 30–38 big numbers */
+  --fs-hero: 3.5rem;                            /* 56 the one number on a sheet */
+  --fs-giant: clamp(3rem, 15vw, 4rem);          /* 48–64 data bands */
+
+  /* level      weight size / line-height family */
+  --type-display: 800 var(--fs-display) / 1.15 var(--font-display); /* leading: Thai marks stack to 1.1em up and 0.3em down in FC Pride — 1.02 clipped them (2026-09-10) */
+  --track-display: -0.02em;
+  --type-h1:      900 var(--fs-h1) / 1.2 var(--font-display);
+  --track-h1: -0.015em;
+  --type-h2:      700 var(--fs-h2) / 1.25 var(--font-display);
+  --track-h2: -0.01em;
+  --type-title:   650 var(--fs-title) / 1.3 var(--font-ui);
+  --type-body:    400 var(--fs-body) / 1.5 var(--font-ui);
+  --type-label:   600 var(--fs-label) / 1.2 var(--font-ui);   /* chips, buttons */
+  --type-caption: 500 var(--fs-caption) / 1.35 var(--font-ui);
+  --type-overline:700 var(--fs-xs) / 1.2 var(--font-mono);     /* uppercase micro-labels */
+  --track-overline: 0.08em;
+  --type-stat:    800 var(--fs-stat) / 1.05 var(--font-display); /* big numbers */
+
+  /* ============================================================
+     COLOR ROLES — wireframe defaults (grayscale).
+     palette.css overrides these under [data-palette="…"].
+     ============================================================ */
+
+  /* app background ("earth-toned surface or shiny color, up to the app") */
+  --surface: #f2f2f0;
+  --on-surface: #141414;
+  --on-surface-muted: #6b6b6b;
+
+  /* card boundaries — 3 slots so stacked/adjacent cards can differ */
+  --card-1-bg: #ffffff;  --card-1-ink: #141414;
+  --card-2-bg: #e6e6e3;  --card-2-ink: #141414;
+  --card-3-bg: #141414;  --card-3-ink: #ffffff;
+
+  --card-border: #141414;      /* wireframe: visible outline; palettes may set transparent */
+  --card-muted: #6b6b6b;       /* secondary text inside cards (the default, tone-1 card) */
+  --card-2-muted: #5f5f5f;     /* the same text on the tone-2 card — 5.1:1 on its grey (#6b6b6b is 4.3:1, under AA);
+                                  a palette whose tone-2 ground is strong
+                                  sets this to its tone-2 ink — a muted shade cannot reach AA there (clay) */
+
+  /* actions */
+  --accent: #141414;           /* primary CTA fill */
+  --on-accent: #ffffff;
+  --action-bg: #ffffff;        /* neutral buttons/chips/inputs */
+  --action-ink: #141414;
+  --action-border: #141414;
+
+  /* signals (chip dots, deltas) */
+  --pos: #8a8a8a;
+  --neg: #3d3d3d;
+  --dot-a: #141414;
+  --dot-b: #8a8a8a;
+
+  /* derived tints — read the element's own ink, so they work on any slot */
+  --outline: var(--action-border);                                 /* control edges (palette.css softens) */
+  --hairline: color-mix(in srgb, currentColor 18%, transparent);   /* dividers inside cards */
+  --ink-tint: color-mix(in srgb, currentColor 12%, transparent);   /* hover, rails, rests */
+  --ink-rail: color-mix(in srgb, currentColor 30%, transparent);   /* todo steps, ghost edges */
+  --accent-soft: color-mix(in srgb, var(--accent) 22%, transparent); /* calendar marks */
+  --accent-mid: color-mix(in srgb, var(--accent) 50%, transparent);
+  --scrim: color-mix(in srgb, var(--card-3-bg) 50%, transparent);  /* dim stage, cover gradient */
+}
+
+/* ============================================================
+   REGISTERED TOKENS — the two sheet lengths are typed, so that
+   cardds.js can read them back RESOLVED: getComputedStyle returns a
+   registered <length> in px and a <number> as a number, where an
+   unregistered custom property only ever reads back as its text
+   ("calc(1.25rem + …)"). Drag-to-snap needs to know where the states
+   are; nothing else in the system reads a token from JS.
+   --sheet-half is a share of the sheet's own height (0.5 = half), a
+   number rather than a percentage so one token can serve both the
+   sheet's translate (× 100%) and its body's scroll-padding (× 100cqh).
+   sheet.css sets the values; these initial values are what a sheet
+   falls back to when its own declaration cannot resolve.
+   ============================================================ */
+@property --sheet-peek { syntax: "<length>"; inherits: true; initial-value: 0px; }
+@property --sheet-half { syntax: "<number>"; inherits: true; initial-value: 0.5; }

package/dist/actions/Btn.d.ts

@@ -0,0 +1,311 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export interface BtnProps extends ComponentPropsWithoutRef<'button'> {
+    /** 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 one giant call to action in a tinted card ("Taxi!") */
+    xl?: boolean;
+    /** a link styled as a button */
+    href?: string;
+}
+/**
+ * Btn — the pill button (48px+ tall). Plain by default; `primary` for the one move; `quiet` on tinted cards.
+ * In a CardFoot up to four share the line; in an ActionBar it takes the width. An Icon xs may lead or trail the label.
+ */
+export declare function Btn({ primary, quiet, block, xl, href, className, type, ...rest }: BtnProps): import("react").DetailedReactHTMLElement<{
+    form?: string | undefined | undefined;
+    slot?: string | undefined | undefined;
+    style?: import("react").CSSProperties | undefined;
+    title?: string | undefined | undefined;
+    suppressHydrationWarning?: boolean | undefined | undefined;
+    color?: string | undefined | undefined;
+    id?: string | undefined | undefined;
+    lang?: string | undefined | undefined;
+    name?: 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;
+    children?: import("react").ReactNode;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
+    onChange?: import("react").ChangeEventHandler<HTMLButtonElement, Element> | undefined;
+    onChangeCapture?: import("react").ChangeEventHandler<HTMLButtonElement, Element> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLButtonElement> | undefined;
+    onBeforeInputCapture?: import("react").InputEventHandler<HTMLButtonElement> | undefined;
+    onInput?: import("react").InputEventHandler<HTMLButtonElement> | undefined;
+    onInputCapture?: import("react").InputEventHandler<HTMLButtonElement> | undefined;
+    onReset?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onResetCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSubmit?: import("react").SubmitEventHandler<HTMLButtonElement> | undefined;
+    onSubmitCapture?: import("react").SubmitEventHandler<HTMLButtonElement> | undefined;
+    onInvalid?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onInvalidCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onDrag?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragEnd?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragStart?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
+    onScrollEnd?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
+    onScrollEndCapture?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLButtonElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLButtonElement> | undefined;
+    onAnimationStart?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onToggle?: import("react").ToggleEventHandler<HTMLButtonElement> | undefined;
+    onBeforeToggle?: import("react").ToggleEventHandler<HTMLButtonElement> | undefined;
+    onTransitionCancel?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionRun?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionStart?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | 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;
+    disabled?: boolean | undefined | undefined;
+    formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
+    formEncType?: string | undefined | undefined;
+    formMethod?: string | undefined | undefined;
+    formNoValidate?: boolean | undefined | undefined;
+    formTarget?: string | undefined | undefined;
+    value?: string | number | readonly string[] | undefined;
+    href: string | undefined;
+    type: "button" | "reset" | "submit" | undefined;
+    className: string;
+}, HTMLElement>;

package/dist/actions/Btn.js

@@ -0,0 +1,14 @@
+import { createElement } from 'react';
+import { cx } from '../cx';
+/**
+ * Btn — the pill button (48px+ tall). Plain by default; `primary` for the one move; `quiet` on tinted cards.
+ * In a CardFoot up to four share the line; in an ActionBar it takes the width. An Icon xs may lead or trail the label.
+ */
+export function Btn({ primary, quiet, block, xl, href, className, type, ...rest }) {
+    return createElement(href ? 'a' : 'button', {
+        href,
+        type: href ? undefined : type ?? 'button',
+        className: cx('btn', primary && 'btn--primary', quiet && 'btn--quiet', block && 'btn--block', xl && 'btn--xl', className),
+        ...rest,
+    });
+}

package/dist/actions/BtnRow.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export interface BtnRowProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** BtnRow — twin CTAs inside a card's content sharing the width (Log time · Offer). In a foot use CardFoot instead. */
+export declare function BtnRow({ className, ...rest }: BtnRowProps): import("react").JSX.Element;

package/dist/actions/BtnRow.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../cx';
+/** BtnRow — twin CTAs inside a card's content sharing the width (Log time · Offer). In a foot use CardFoot instead. */
+export function BtnRow({ className, ...rest }) {
+    return _jsx("div", { className: cx('btn-row', className), ...rest });
+}