@usableapp/cardds 0.1.3 → 0.1.4

package/dist/actions/Btn.js

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * 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.

package/dist/actions/BtnRow.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** 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 });

package/dist/actions/Chip.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement } from 'react';
-import { cx } from '../cx';
-import { Dot } from './Dot';
+import { cx } from '../cx.js';
+import { Dot } from './Dot.js';
 /** Chip — a status or attribute tag (with an optional signal Dot), or a small tap target; `on` when it is the live one. For pickers use ChipToggle / ChipPick. */
 export function Chip({ on, dot, bubble, as, href, className, children, ...rest }) {
     const el = as ?? (href ? 'a' : 'span');

package/dist/actions/Dot.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Dot — the signal dot in chips, legends and row metas. */
 export function Dot({ b, className, ...rest }) {
     return _jsx("span", { className: cx('dot', b && 'dot--b', className), ...rest });

package/dist/actions/Dropdown.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { type IconName } from '../type/Icon';
+import { type IconName } from '../type/Icon.js';
 export interface DropdownProps extends ComponentPropsWithoutRef<'div'> {
     /** unique id — the popover menu's id the trigger targets */
     id: string;

package/dist/actions/Dropdown.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /**
  * Dropdown — THE select: a pill trigger + a Menu popover anchored under it (native popover: light dismiss, Esc).
  * Never a native `<select>`. Children are MenuItems; cardds.js copies the picked item's label into the pill

package/dist/actions/Fab.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithoutRef } from 'react';
-import { type IconName } from '../type/Icon';
+import { type IconName } from '../type/Icon.js';
 export interface FabProps extends ComponentPropsWithoutRef<'button'> {
     label: string;
     icon?: IconName;

package/dist/actions/Fab.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /** Fab — the square floating action at the bottom-right of a stage or screen (above the bar). */
 export function Fab({ label, icon = 'plus', invert = true, className, children, ...rest }) {
     return (_jsx("button", { type: "button", "aria-label": label, className: cx('icon-btn fab', invert && 'icon-btn--invert', className), ...rest, children: children ?? _jsx(Icon, { name: icon }) }));

package/dist/actions/IconBtn.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { type IconName } from '../type/Icon';
+import { type IconName } from '../type/Icon.js';
 export interface IconBtnProps extends ComponentPropsWithoutRef<'button'> {
     /** the accessible name — required, the button has no text */
     label: string;

package/dist/actions/IconBtn.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement } from 'react';
-import { Menu } from './Dropdown';
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { Menu } from './Dropdown.js';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /** IconBtn — the round icon button: `sm` in heads and bars, full size in rows and composers, `invert` for the one filled move.
  *  With `menu` it gives the member options the way a Dropdown does — an actions Menu (edit, share, remove…) for the card or sheet it sits in. */
 export function IconBtn({ label, icon, sm, invert, href, menu, menuId, menuStart, className, type, children, ...rest }) {

package/dist/actions/Link.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithoutRef } from 'react';
-import { type IconName } from '../type/Icon';
+import { type IconName } from '../type/Icon.js';
 export interface LinkProps extends ComponentPropsWithoutRef<'a'> {
     /** muted ink (Skip, "didn't get the code?") */
     muted?: boolean;

package/dist/actions/Link.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement } from 'react';
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /** Link — an inline text action big enough to tap (40px): "See all ↗" in a card head, "Skip" between pager buttons. */
 export function Link({ muted, icon, href, className, children, ...rest }) {
     return createElement(href ? 'a' : 'button', { href, type: href ? undefined : 'button', className: cx('link', muted && 'link--muted', className), ...rest }, children, icon && _jsx(Icon, { name: icon, size: "xs" }));

package/dist/actions/Segment.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Segment — a tab strip / day picker whose items share the width; children are SegmentItems. */
 export function Segment({ className, ...rest }) {
     return _jsx("div", { className: cx('segment', className), role: "tablist", ...rest });

package/dist/cards/Card.js

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * Card — ONE boundary: head · content · foot. Cards are content the system offers (the words, the thing to read).
  * Children: a CardHead first (heading left, contextual info far right), the content (frameless rows, kv, a ring,

package/dist/cards/CardFoot.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** CardFoot — the card's action buttons on one line: one takes the width, up to four share it evenly. Btns only. */
 export function CardFoot({ className, ...rest }) {
     return _jsx("div", { className: cx('card__foot', className), ...rest });

package/dist/cards/CardHead.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * CardHead — the card's head: the heading on the left takes the room, the contextual info hugs the far right.
  * Use `heading` (+ `overline`/`caption`) and `end` for the standard head, or pass children for a custom one

package/dist/cards/CardParts.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** CardMedia — rounded media inside a card (a Placeholder or img); a corner TileBadge pins to it. */
 export function CardMedia({ className, ...rest }) {
     return _jsx("div", { className: cx('card__media', className), ...rest });

package/dist/cards/Placeholder.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Placeholder — the wireframe's crossed box standing in for a photo or illustration (currentColor, survives any palette). */
 export function Placeholder({ size, label = 'Image', className, ...rest }) {
     return _jsx("div", { className: cx('ph', size && `ph--${size}`, className), role: "img", "aria-label": label, ...rest });

package/dist/cards/Stat.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Stat — an inline stat block: an overline, a big `Text level="stat"` number, a caption; StatRows put a Delta beside the label. */
 export function Stat({ grow, className, ...rest }) {
     return _jsx("div", { className: cx('stat', grow && 'grow', className), ...rest });

package/dist/choice/Calendar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
-import { IconBtn } from '../actions/IconBtn';
+import { cx } from '../cx.js';
+import { IconBtn } from '../actions/IconBtn.js';
 /** Calendar — a month grid of 44px round cells: one accent day, optional marks; prev/next in the head. */
 export function Calendar({ title, days = 30, start = 1, selected, marks = [], marks2 = [], disabled = [], weekdays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], nav, className, ...rest }) {
     return (_jsxs("div", { className: cx('calendar', className), ...rest, children: [_jsxs("div", { className: "calendar__head", children: [_jsx("span", { className: "t-title", children: title }), nav ?? (_jsxs("span", { className: "icon-row", children: [_jsx(IconBtn, { sm: true, icon: "chevron-left", label: "Previous" }), _jsx(IconBtn, { sm: true, icon: "chevron-right", label: "Next" })] }))] }), _jsxs("div", { className: "calendar__grid", children: [weekdays.map((d) => _jsx("span", { className: "calendar__wd", children: d }, d)), Array.from({ length: days }, (_, i) => i + 1).map((d) => (_jsx("button", { type: "button", className: cx('calendar__day', marks.includes(d) && 'calendar__day--mark', marks2.includes(d) && 'calendar__day--mark2'), "aria-selected": d === selected ? 'true' : undefined, disabled: disabled.includes(d), style: d === 1 ? { '--start': start } : undefined, children: d }, d)))] })] }));

package/dist/choice/Check.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Check — the round check circle at a Row's end (48px); the row's label wraps it. */
 export function Check({ sm, label, className, ...rest }) {
     return _jsx("input", { type: "checkbox", className: cx('check', sm && 'check--sm', className), "aria-label": label, ...rest });

package/dist/choice/DayStrip.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** DayStrip — a week of Days, one selected. */
 export function DayStrip({ className, ...rest }) {
     return _jsx("div", { className: cx('day-strip', className), role: "tablist", ...rest });

package/dist/choice/Mood.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Mood — five dots in a pill from bad to good; the picked one grows. */
 export function Mood({ name = 'mood', value, label = 'Mood', onChange, className, ...rest }) {
     return (_jsx("fieldset", { className: cx('mood', className), "aria-label": label, ...rest, children: [1, 2, 3, 4, 5].map((n) => (_jsxs("label", { className: "mood__opt", children: [_jsx("input", { type: "radio", name: name, value: n, defaultChecked: n === value, onChange: onChange }), _jsx("span", { className: "mood__dot" })] }, n))) }));

package/dist/choice/Slider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** 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);

package/dist/forms/AddRow.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /** 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.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** 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

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { type IconName } from '../type/Icon';
+import { type IconName } from '../type/Icon.js';
 export interface FieldProps extends Omit<ComponentPropsWithoutRef<'input'>, 'className' | 'style'> {
     /** a leading icon (phone-call, plane, calendar-days) */
     icon?: IconName;

package/dist/forms/Field.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /**
  * 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.

package/dist/forms/FileBtn.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * 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"`

package/dist/forms/Pin.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * 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

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/journey/NoteRow.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithoutRef } from 'react';
-import { type IconName } from '../type/Icon';
+import { type IconName } from '../type/Icon.js';
 export interface NoteRowProps extends ComponentPropsWithoutRef<'div'> {
     icon?: IconName;
 }

package/dist/journey/NoteRow.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /** 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

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { type IconName } from '../type/Icon';
+import { type IconName } from '../type/Icon.js';
 export interface RoutePoint {
     /** the place name (caption) */
     place: ReactNode;

package/dist/journey/Route.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /** 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 })] }));

package/dist/journey/TileBadge.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** 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.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** 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.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** 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.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** 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 });

package/dist/lists/Kv.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { type IconName } from '../type/Icon';
+import { type IconName } from '../type/Icon.js';
 export interface KvProps extends ComponentPropsWithoutRef<'dl'> {
     /** hairlines between rows */
     lined?: boolean;

package/dist/lists/Kv.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /** 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 });

package/dist/lists/Legend.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
-import { Dot } from '../actions/Dot';
+import { cx } from '../cx.js';
+import { Dot } from '../actions/Dot.js';
 /** Legend — signal dots with captions under a chart; children are LegendItems. */
 export function Legend({ className, ...rest }) {
     return _jsx("div", { className: cx('legend', className), ...rest });

package/dist/lists/Row.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { type IconName } from '../type/Icon';
+import { type IconName } from '../type/Icon.js';
 export interface RowProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /** the leading visual: an Avatar, an AvatarStack, an Icon */
     lead?: ReactNode;

package/dist/lists/Row.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement } from 'react';
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { cx } from '../cx.js';
+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`.

package/dist/lists/Timeline.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Timeline — a hairline with accent dots, date marks and entries to the right; children are TimelineItems. */
 export function Timeline({ className, ...rest }) {
     return _jsx("ol", { className: cx('timeline', className), ...rest });

package/dist/media/MapArea.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * MapArea — the box a map engine draws in, behind a stage sheet: the child is the engine's mount and fills it;
  * before tiles arrive (or offline) the box shows the wireframe street pattern, never a hole. The ring marks the

package/dist/media/Mosaic.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Mosaic — one big photo + two small in a card (three Placeholders or imgs). */
 export function Mosaic({ label = 'Photos', className, ...rest }) {
     return _jsx("div", { className: cx('mosaic', className), role: "img", "aria-label": label, ...rest });

package/dist/media/Postcard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.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 (cardds.js toggles `is-flipped`, `--motion-flip`).

package/dist/media/Quote.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Quote — a giant opening mark, big text, an overline attribution. */
 export function Quote({ text, by, sm, className, ...rest }) {
     return (_jsxs("blockquote", { className: cx('quote', sm && 'quote--sm', className), ...rest, children: [_jsx("p", { className: "quote__text", children: text }), by != null && _jsx("footer", { className: "quote__by", children: by })] }));

package/dist/media/Tile.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { type IconName } from '../type/Icon';
+import { type IconName } from '../type/Icon.js';
 export interface TileGridProps extends ComponentPropsWithoutRef<'div'> {
     /** three across on a phone (attachments, upload kinds) */
     cols3?: boolean;

package/dist/media/Tile.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement } from 'react';
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /** TileGrid — big square Tiles in a responsive grid. */
 export function TileGrid({ cols3, bleed, className, ...rest }) {
     return _jsx("div", { className: cx('tile-grid', cols3 && 'tile-grid--3', bleed && 'bleed', className), ...rest });

package/dist/numbers/Badge.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Badge — the tiny count beside a title or tab ("Leads +9"). */
 export function Badge({ soft, className, ...rest }) {
     return _jsx("span", { className: cx('badge', soft && 'badge--soft', className), ...rest });

package/dist/numbers/Band.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Band — a data card: 2-line label · giant number · footnote. Stack several in a BandStack for one boundary with hairlines. */
 export function Band({ label, num, foot, tone, className, ...rest }) {
     return (_jsxs("article", { className: cx('card card--band', tone && tone !== 1 && `card--${tone}`, className), ...rest, children: [_jsx("span", { className: "band__label", children: label }), _jsx("span", { className: "band__num", children: num }), foot != null && _jsx("span", { className: "band__foot", children: foot })] }));

package/dist/numbers/Bars.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Bars — three or four bars with a count on top, the glance chart; children are Bar. */
 export function Bars({ max, className, style, ...rest }) {
     return _jsx("div", { className: cx('bars', className), style: { ...style, '--max': max }, ...rest });

package/dist/numbers/DotGrid.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** DotGrid — progress over time as a grid of dots, one element and three numbers (`--total`, `--done`, `--cols`). */
 export function DotGrid({ total, done, cols, label, className, style, ...rest }) {
     return (_jsx("div", { className: cx('dotgrid', className), style: { ...style, '--total': total, '--done': done, ...(cols ? { '--cols': cols } : {}) }, role: "img", "aria-label": label ?? `${done} of ${total}`, ...rest }));

package/dist/numbers/Picker.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Picker — a horizontal snap picker, the centre value big between two accent rules; children are PickerItems. */
 export function Picker({ unit, label, className, children, ...rest }) {
     const rail = useRef(null);

package/dist/numbers/Ring.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Ring — the conic gauge with its value centred; data goes in as `--value`, the math lives in CSS. */
 export function Ring({ value, size, text, caption, label, className, style, children, ...rest }) {
     return (_jsxs("div", { className: cx('ring', size && `ring--${size}`, className), style: { ...style, '--value': value }, role: "img", "aria-label": label ?? `${value} percent`, ...rest, children: [text != null && _jsx("span", { className: "ring__value", children: text }), caption != null && _jsx("span", { className: "ring__label", children: caption }), children] }));

package/dist/numbers/Track.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Track — step progress in a dark pill: done · done · todo; children are TrackSteps holding an Icon each. */
 export function Track({ label = 'Progress', className, ...rest }) {
     return _jsx("ol", { className: cx('track', className), "aria-label": label, ...rest });

package/dist/people/Avatar.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { type IconName } from '../type/Icon';
+import { type IconName } from '../type/Icon.js';
 export interface AvatarProps extends ComponentPropsWithoutRef<'span'> {
     /** sm 32px · default 40px · lg 56px · xl 72px (a sheet head's icon ring) */
     size?: 'sm' | 'lg' | 'xl';

package/dist/people/Avatar.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement } from 'react';
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /** Avatar — initials by default, a photo or an Icon when there is one; sizes are the tokens. */
 export function Avatar({ size, outline, add, on, halo, center, src, alt = '', icon, as, href, className, children, ...rest }) {
     const el = as ?? (href ? 'a' : 'span');

package/dist/people/AvatarPick.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** AvatarPick — the chooser row: big heads with name and role under, scrolling sideways; children are AvatarPickItems. */
 export function AvatarPick({ bleed, label, className, ...rest }) {
     return _jsx("div", { className: cx('avatar-pick', bleed && 'bleed', className), "aria-label": label, ...rest });

package/dist/scaffold/ActionBar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * ActionBar — the screen's ONE move, fixed at the bottom, OUTSIDE the Screen/Step (a sibling after it).
  * Plain: one wide primary Btn (the step that commits). `pager`: Back + Next as peers — buttons only; where you are is the

package/dist/scaffold/AppBar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * AppBar — the app-context bar fixed at the very top: logo · two-line label · switcher.
  * It is fixed, so the Screen it sits in reserves its height (`--header-h`, 60px) automatically.

package/dist/scaffold/Centre.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { flushSync } from 'react-dom';
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * Centre — the centred group: ONE thing to read at the human centre of the screen, when that thing is not a lone
  * card: an EmptyState; a Card with its quiet second Btn and the PagerAt under it; a Deck with its DeckActions.

package/dist/scaffold/EmptyState.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** EmptyState — centred: a large icon, a heading, a line of body text, an optional CTA. On the surface (in a `Centre`)
  *  or inside a card's section ("nothing here yet" under a heading) — the ink follows the card it sits in. */
 export function EmptyState({ icon, title, action, level = 'h2', className, children, ...rest }) {

package/dist/scaffold/FilterRow.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** FilterRow — a row of Dropdowns sharing the width, under the TopBar (this week · USD). */
 export function FilterRow({ className, ...rest }) {
     return _jsx("div", { className: cx('filter-row', className), ...rest });

package/dist/scaffold/FloatBar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement } from 'react';
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * FloatBar — the glass pill navigation floating over content, plus one detached round button.
  * Children are FloatBarItems; fixed at the bottom (absolute inside a SheetStage). Use it instead of an ActionBar

package/dist/scaffold/PagerAt.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** PagerAt — the "where am I" dots, centred under the card that changes (a child of Centre): one accent dot at the current page. Never inside an ActionBar. */
 export function PagerAt({ at, of, label, className, ...rest }) {
     return (_jsx("span", { className: cx('pager__at', className), role: "img", "aria-label": label ?? `Page ${at} of ${of}`, ...rest, children: Array.from({ length: of }, (_, i) => _jsx("i", { className: i + 1 === at ? 'is-at' : undefined }, i)) }));

package/dist/scaffold/Screen.js

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * Screen — the mobile screen column: max 25rem wide, the standard horizontal inset, NO vertical padding
  * (bars reserve their own room). Every screen is base · top menu · bottom menu · content.

package/dist/scaffold/Section.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * Section — frameless on-surface content + a CTA: an overline, a display heading, a paragraph, a CtaPack.
  * NEVER a card: sections are what the base says; cards are content the system offers.

package/dist/scaffold/TopBar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * TopBar — the screen's title bar: back · TITLE · actions. Same 60px floor as the AppBar.
  * One per screen, first child of the Screen; a Step that follows it touches it.

package/dist/sheets/CardBack.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /** CardBack — the back button a tapped stack sheet reveals in its head; first child of that sheet's CardHead. Hidden until the sheet is open. */
 export function CardBack({ label = 'Back', className, ...rest }) {
     return (_jsx("button", { type: "button", className: cx('icon-btn icon-btn--sm card__back', className), "aria-label": label, ...rest, children: _jsx(Icon, { name: "arrow-left" }) }));

package/dist/sheets/Drawer.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, Fragment } from 'react';
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Lift — the page content card lifted above a Drawer on an `SheetStage ask`. */
 export function Lift({ className, ...rest }) {
     return _jsx("article", { className: cx('card lift', className), ...rest });

package/dist/sheets/Sheet.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * Sheet — the SINGLE sheet: one card as a bottom sheet holding what the member ACTS on (controls, or small `Card sm`
  * content cards). Always the full height of its box — a Step or a SheetStage — a state is only how far it slid.

package/dist/sheets/SheetBody.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** SheetBody — everything under a Sheet's head: the one thing that scrolls; its scroll padding keeps a focused control above the cut. Content never goes straight into the Sheet. */
 export function SheetBody({ className, ...rest }) {
     return _jsx("div", { className: cx('sheet__body', className), ...rest });

package/dist/sheets/SheetHead.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** SheetHead — the stage sheet's three-column head: round button · centred title + sub · round button. A step sheet uses a CardHead instead. */
 export function SheetHead({ lead, title, sub, trail, className, ...rest }) {
     return (_jsxs("div", { className: cx('sheet__head', className), ...rest, children: [lead ?? _jsx("span", {}), _jsxs("div", { children: [_jsx("h2", { className: "sheet__title", children: title }), sub != null && _jsx("span", { className: "sheet__sub", children: sub })] }), trail ?? _jsx("span", {})] }));

package/dist/sheets/SheetStack.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * SheetStack — the MENU: sheets stacked like paper at the middle of the home screen, every one a main section.
  * Children are Cards, direct children only, at most five: first = the back of the stack, last = the front (open) sheet.

package/dist/sheets/SheetStage.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * SheetStage — a page-level overlay stage, its own 100dvh page: a Sheet over a map (or over a `hero` — one
  * thing centred in the band a half sheet leaves open), the dim page sheet

package/dist/sheets/Step.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * Step — one screen, one task. Children: a StepCard first (what the member READS), an optional Sheet last
  * (what the member DOES); the ActionBar goes OUTSIDE, after the Step. It fills a `Screen fill` between the top bar

package/dist/type/Icon.d.ts

@@ -1,4 +1,4 @@
-import { type IconName } from './icons';
+import { type IconName } from './icons.js';
 export type { IconName };
 export interface IconProps extends Omit<React.ComponentPropsWithoutRef<'svg'>, 'children'> {
     /** one of the 57 Lucide symbols in icons.svg (arrow-left, bell, check, chevron-down, id-card, plus, x, …) */

package/dist/type/Icon.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
-import { ICONS } from './icons';
+import { cx } from '../cx.js';
+import { ICONS } from './icons.js';
 /**
  * Icon — a Lucide stroke icon from the cardds sprite, inlined (no icons.svg file needed at runtime).
  * Sizes are the tokens the CSS defines: `.icon` 28px, `--sm` 28px (a semantic size, same as md today), `--xs` 16px, `--lg` 32px.

package/dist/type/Text.js

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 const DEFAULT_AS = {
     display: 'h2', h1: 'h2', h2: 'h2', title: 'p', body: 'p', label: 'span', caption: 'span', overline: 'span', stat: 'p',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "license": "UNLICENSED",
   "type": "module",
   "description": "card-first mobile design system, React-first: the components in src/ are thin wrappers over the CSS contract (css/*.css stays the only truth), app/ is the Commons Time Bank PWA built from them, demo/ the CSS spec pages the acceptance tests (tests/) drive.",