@usableapp/cardds 0.3.0 → 0.4.0

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,5 +1,5 @@
-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;

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/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) */

package/dist/numbers/Track.d.ts

@@ -1,10 +1,10 @@
-import type { ComponentPropsWithoutRef } from 'react';
-export interface TrackProps extends ComponentPropsWithoutRef<'ol'> {
+import type { ComponentProps } from 'react';
+export interface TrackProps extends ComponentProps<'ol'> {
     label?: string;
 }
 /** Track — step progress in a dark pill: done · done · todo; children are TrackSteps holding an Icon each. */
 export declare function Track({ label, className, ...rest }: TrackProps): import("react").JSX.Element;
-export interface TrackStepProps extends ComponentPropsWithoutRef<'li'> {
+export interface TrackStepProps extends ComponentProps<'li'> {
     /** this step (and the connector into it) is done */
     done?: boolean;
 }

package/dist/people/Avatar.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 AvatarProps extends ComponentPropsWithoutRef<'span'> {
+export interface AvatarProps extends ComponentProps<'span'> {
     /** sm 32px · default 40px · lg 56px · xl 72px (a sheet head's icon ring) */
     size?: 'sm' | 'lg' | 'xl';
     /** no fill, an edge — an icon in a ring */
@@ -25,73 +25,118 @@ export interface AvatarProps extends ComponentPropsWithoutRef<'span'> {
 }
 /** Avatar — initials by default, a photo or an Icon when there is one; sizes are the tokens. */
 export declare function Avatar({ size, outline, add, on, halo, center, src, alt, icon, as, href, className, children, ...rest }: AvatarProps): import("react").DetailedReactHTMLElement<{
-    slot?: string | undefined | undefined;
+    ref?: import("react").Ref<HTMLSpanElement> | undefined;
+    key?: import("react").Key | null | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+    autoFocus?: boolean | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    slot?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | 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;
-    nonce?: string | undefined | undefined;
-    part?: string | undefined | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
-    tabIndex?: number | undefined | undefined;
-    "aria-activedescendant"?: string | undefined | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+    popoverTarget?: string | undefined;
+    inert?: boolean | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+    is?: string | undefined;
+    exportparts?: string | undefined;
+    part?: string | undefined;
+    "aria-activedescendant"?: string | 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-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | 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-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
-    "aria-errormessage"?: string | undefined | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
-    "aria-flowto"?: string | undefined | undefined;
+    "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | 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-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | 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-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | 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-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | 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-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | 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;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
-    } | undefined | undefined;
+    } | undefined;
     onCopy?: import("react").ClipboardEventHandler<HTMLSpanElement> | undefined;
     onCopyCapture?: import("react").ClipboardEventHandler<HTMLSpanElement> | undefined;
     onCut?: import("react").ClipboardEventHandler<HTMLSpanElement> | undefined;
@@ -260,55 +305,11 @@ export declare function Avatar({ size, outline, add, on, halo, center, src, alt,
     onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
     onTransitionStart?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
     onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | 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;
     type: string | undefined;
     className: string;
-}, HTMLElement>;
-export interface AvatarStackProps extends ComponentPropsWithoutRef<'span'> {
+}, HTMLSpanElement>;
+export interface AvatarStackProps extends ComponentProps<'span'> {
 }
 /** AvatarStack — overlapping small Avatars with an optional `on` "+N" tail. */
 export declare function AvatarStack({ className, ...rest }: AvatarStackProps): import("react").JSX.Element;

package/dist/people/AvatarPick.d.ts

@@ -1,12 +1,12 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-export interface AvatarPickProps extends ComponentPropsWithoutRef<'div'> {
+import type { ComponentProps, ReactNode } from 'react';
+export interface AvatarPickProps extends ComponentProps<'div'> {
     /** run the strip to the card's edges */
     bleed?: boolean;
     label?: string;
 }
 /** AvatarPick — the chooser row: big heads with name and role under, scrolling sideways; children are AvatarPickItems. */
 export declare function AvatarPick({ bleed, label, className, ...rest }: AvatarPickProps): import("react").JSX.Element;
-export interface AvatarPickItemProps extends Omit<ComponentPropsWithoutRef<'button'>, 'name' | 'role'> {
+export interface AvatarPickItemProps extends Omit<ComponentProps<'button'>, 'name' | 'role'> {
     /** the name under the head */
     name: ReactNode;
     /** the role under the name */

package/dist/scaffold/ActionBar.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentPropsWithoutRef } from 'react';
-export interface ActionBarProps extends ComponentPropsWithoutRef<'div'> {
+import type { ComponentProps } from 'react';
+export interface ActionBarProps extends ComponentProps<'div'> {
     /** `pager`: previous / next as two equal buttons at the edges (a Link may sit between them; the PagerAt dots never do — they go under the card) · `tiers`: rows stacked — a control tier above the buttons */
     variant?: 'pager' | 'tiers';
     /** render in flow instead of fixed to the viewport bottom (for a preview or a mock frame); the real bar is fixed */
@@ -13,7 +13,7 @@ export interface ActionBarProps extends ComponentPropsWithoutRef<'div'> {
  * The parent hosting the bar reserves its room (`--bar-reserve`); never pad a screen for it by hand.
  */
 export declare function ActionBar({ variant, inline, className, style, ...rest }: ActionBarProps): import("react").JSX.Element;
-export interface ActionBarTierProps extends ComponentPropsWithoutRef<'div'> {
+export interface ActionBarTierProps extends ComponentProps<'div'> {
     /** the tier that holds the round pager (two IconBtns at the edges) */
     pager?: boolean;
 }

package/dist/scaffold/AppBar.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-export interface AppBarProps extends Omit<ComponentPropsWithoutRef<'header'>, 'title'> {
+import type { ComponentProps, ReactNode } from 'react';
+export interface AppBarProps extends Omit<ComponentProps<'header'>, 'title'> {
     /** the app or brand mark on the left (an Icon) */
     icon?: ReactNode;
     /** the context: which app, which place, which account */

package/dist/scaffold/BaseContent.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentPropsWithoutRef } from 'react';
-export interface BaseContentProps extends ComponentPropsWithoutRef<'section'> {
+import type { ComponentProps } from 'react';
+export interface BaseContentProps extends ComponentProps<'section'> {
 }
 /**
  * BaseContent — words straight on the base, no card around them: an overline, a heading, a paragraph,
@@ -11,7 +11,7 @@ export interface BaseContentProps extends ComponentPropsWithoutRef<'section'> {
  * cardds's. The base itself carries no control; a form is never taken apart across it. Never both: a pager never works beside a sheet.
  */
 export declare function BaseContent({ className, ...rest }: BaseContentProps): import("react").JSX.Element;
-export interface CtaPackProps extends ComponentPropsWithoutRef<'div'> {
+export interface CtaPackProps extends ComponentProps<'div'> {
 }
 /** CtaPack — the buttons under a BaseContent's words, wrapping on one line. In a Step it holds ways in (each opens a sheet — the app wires that); the Step's own move is never here. */
 export declare function CtaPack({ className, ...rest }: CtaPackProps): import("react").JSX.Element;

package/dist/scaffold/Centre.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentPropsWithoutRef } from 'react';
-export interface CentreProps extends ComponentPropsWithoutRef<'div'> {
+import type { ComponentProps } from 'react';
+export interface CentreProps extends ComponentProps<'div'> {
 }
 /**
  * Centre — the centred group: ONE thing to read at the human centre of the screen, when that thing is not a lone
@@ -11,7 +11,7 @@ export interface CentreProps extends ComponentPropsWithoutRef<'div'> {
  * Put it after the TopBar; the ActionBar, if any, stays outside the Screen.
  */
 export declare function Centre({ className, ...rest }: CentreProps): import("react").JSX.Element;
-export interface PagesProps extends ComponentPropsWithoutRef<'div'> {
+export interface PagesProps extends ComponentProps<'div'> {
 }
 /**
  * Pages — the pages of a walk, all one height: every page is rendered, stacked in one cell as tall as the

package/dist/scaffold/EmptyState.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-export interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+import type { ComponentProps, ReactNode } from 'react';
+export interface EmptyStateProps extends Omit<ComponentProps<'div'>, 'title'> {
     /** the big icon above the words (an `<Icon size="lg" />`) */
     icon?: ReactNode;
     /** the heading */

package/dist/scaffold/FilterRow.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentPropsWithoutRef } from 'react';
-export interface FilterRowProps extends ComponentPropsWithoutRef<'div'> {
+import type { ComponentProps } from 'react';
+export interface FilterRowProps extends ComponentProps<'div'> {
 }
 /** FilterRow — a row of Dropdowns sharing the width, under the TopBar (this week · USD). */
 export declare function FilterRow({ className, ...rest }: FilterRowProps): import("react").JSX.Element;