@usableapp/cardds 0.4.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/css/layover.css +12 -15
- package/css/lists.css +9 -0
- package/css/media.css +67 -31
- package/css/numbers.css +16 -0
- package/css/sheet.css +8 -4
- package/css/stack.css +3 -3
- package/dist/cardds.css +115 -53
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/lists/Row.d.ts +11 -283
- package/dist/lists/Row.js +10 -3
- package/dist/media/Postcard.d.ts +15 -5
- package/dist/media/Postcard.js +8 -5
- package/dist/numbers/Progress.d.ts +9 -0
- package/dist/numbers/Progress.js +7 -0
- package/dist/sheets/Drawer.d.ts +2 -2
- package/dist/sheets/Drawer.js +1 -1
- package/dist/sheets/Sheet.d.ts +1 -3
- package/dist/sheets/Sheet.js +2 -2
- package/dist/sheets/SheetStack.d.ts +3 -3
- package/dist/sheets/SheetStack.js +3 -3
- package/dist/sheets/SheetStage.d.ts +3 -5
- package/dist/sheets/SheetStage.js +3 -3
- package/dist/sheets/StackBack.d.ts +7 -0
- package/dist/sheets/StackBack.js +7 -0
- package/package.json +1 -1
- package/dist/sheets/CardBack.d.ts +0 -7
- package/dist/sheets/CardBack.js +0 -7
|
@@ -3,9 +3,9 @@ import { cx } from '../cx.js';
|
|
|
3
3
|
/**
|
|
4
4
|
* SheetStage — a page-level overlay stage, its own 100dvh page: a Sheet over a map (or over a `hero` — one
|
|
5
5
|
* thing centred in the band a half sheet leaves open), the dim page sheet
|
|
6
|
-
* (`dim` +
|
|
6
|
+
* (`dim` + a `Modal`), the ask (`dim` + a `Modal`, which centres itself — or a Modal on a clean ground, no `dim`). Full stops under the top bar's line.
|
|
7
7
|
* NEVER inside a Step — an app screen where the member acts is a Step.
|
|
8
8
|
*/
|
|
9
|
-
export function SheetStage({ bg, hero, dim,
|
|
10
|
-
return (_jsxs("div", { className: cx('sheet-stage', dim && 'sheet-stage--dim',
|
|
9
|
+
export function SheetStage({ bg, hero, dim, foot, className, children, ...rest }) {
|
|
10
|
+
return (_jsxs("div", { className: cx('sheet-stage', dim && 'sheet-stage--dim', className), ...rest, children: [bg != null && _jsx("div", { className: "sheet-stage__bg", children: bg }), hero != null && _jsx("div", { className: "sheet-stage__hero", children: hero }), children, foot != null && _jsx("p", { className: "sheet-stage__foot", children: foot })] }));
|
|
11
11
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ComponentProps } from 'react';
|
|
2
|
+
export interface StackBackProps extends ComponentProps<'button'> {
|
|
3
|
+
/** accessible name */
|
|
4
|
+
label?: string;
|
|
5
|
+
}
|
|
6
|
+
/** StackBack — the back button a tapped stack sheet reveals in its head; first child of that sheet's CardHead. Hidden until the sheet is open. */
|
|
7
|
+
export declare function StackBack({ label, className, ...rest }: StackBackProps): import("react").JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cx } from '../cx.js';
|
|
3
|
+
import { Icon } from '../type/Icon.js';
|
|
4
|
+
/** StackBack — the back button a tapped stack sheet reveals in its head; first child of that sheet's CardHead. Hidden until the sheet is open. */
|
|
5
|
+
export function StackBack({ label = 'Back', className, ...rest }) {
|
|
6
|
+
return (_jsx("button", { type: "button", className: cx('icon-btn icon-btn--sm sheet-stack__back', className), "aria-label": label, ...rest, children: _jsx(Icon, { name: "arrow-left" }) }));
|
|
7
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@usableapp/cardds",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.1",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"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); gallery/ shows every story live (npm run dev), tests/ measures the geometry.",
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import type { ComponentProps } from 'react';
|
|
2
|
-
export interface CardBackProps extends ComponentProps<'button'> {
|
|
3
|
-
/** accessible name */
|
|
4
|
-
label?: string;
|
|
5
|
-
}
|
|
6
|
-
/** 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. */
|
|
7
|
-
export declare function CardBack({ label, className, ...rest }: CardBackProps): import("react").JSX.Element;
|
package/dist/sheets/CardBack.js
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { cx } from '../cx.js';
|
|
3
|
-
import { Icon } from '../type/Icon.js';
|
|
4
|
-
/** 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. */
|
|
5
|
-
export function CardBack({ label = 'Back', className, ...rest }) {
|
|
6
|
-
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" }) }));
|
|
7
|
-
}
|