@usableapp/cardds 0.6.4 → 0.6.6
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/CHANGELOG.md +42 -0
- package/README.md +72 -26
- package/css/actions.css +15 -0
- package/css/base.css +9 -6
- package/css/card.css +4 -4
- package/css/choice.css +11 -0
- package/css/layover.css +3 -0
- package/css/lists.css +4 -0
- package/css/sheet.css +8 -1
- package/css/stack.css +55 -0
- package/css/step.css +43 -13
- package/css/tokens.css +2 -1
- package/dist/actions/Btn.d.ts +1 -1
- package/dist/actions/IconBtn.d.ts +1 -1
- package/dist/actions/Link.d.ts +3 -1
- package/dist/actions/Link.js +2 -2
- package/dist/cardds.css +154 -25
- package/dist/choice/Check.d.ts +6 -3
- package/dist/choice/Check.js +7 -4
- package/dist/index.d.ts +4 -1
- package/dist/index.js +4 -1
- package/dist/scaffold/ActionBar.d.ts +3 -2
- package/dist/scaffold/ActionBar.js +3 -2
- package/dist/scaffold/AppBar.d.ts +4 -1
- package/dist/scaffold/AppBar.js +4 -3
- package/dist/scaffold/Centre.d.ts +1 -1
- package/dist/scaffold/Centre.js +1 -1
- package/dist/scaffold/Page.d.ts +17 -0
- package/dist/scaffold/Page.js +24 -0
- package/dist/scaffold/Screen.d.ts +13 -8
- package/dist/scaffold/Screen.js +24 -7
- package/dist/sheets/SheetStack.d.ts +1 -1
- package/dist/sheets/SheetStack.js +6 -1
- package/dist/sheets/SheetStage.d.ts +4 -1
- package/dist/sheets/SheetStage.js +2 -2
- package/dist/sheets/StackBack.d.ts +2 -1
- package/dist/sheets/StackBack.js +3 -2
- package/dist/sheets/StackSheet.d.ts +35 -0
- package/dist/sheets/StackSheet.js +24 -0
- package/dist/sheets/Step.d.ts +4 -4
- package/dist/sheets/Step.js +4 -4
- package/dist/templates/Home.d.ts +48 -0
- package/dist/templates/Home.js +40 -0
- package/dist/templates/Walkthrough.d.ts +42 -0
- package/dist/templates/Walkthrough.js +35 -0
- package/dist/type/Text.d.ts +3 -1
- package/dist/type/Text.js +2 -2
- package/dist/type/icons.d.ts +1 -1
- package/dist/type/icons.js +2 -2
- package/icons.svg +2 -0
- package/package.json +1 -1
- package/dist/scaffold/BaseContent.d.ts +0 -17
- package/dist/scaffold/BaseContent.js +0 -18
package/icons.svg
CHANGED
|
@@ -43,6 +43,8 @@
|
|
|
43
43
|
<symbol id="image" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></symbol>
|
|
44
44
|
<symbol id="sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></symbol>
|
|
45
45
|
<symbol id="share" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></symbol>
|
|
46
|
+
<symbol id="megaphone" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/></symbol>
|
|
47
|
+
<symbol id="log-out" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></symbol>
|
|
46
48
|
<symbol id="wallet" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"/><path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"/></symbol>
|
|
47
49
|
<symbol id="ellipsis" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></symbol>
|
|
48
50
|
<symbol id="sliders" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="14" y1="4" y2="4"/><line x1="10" x2="3" y1="4" y2="4"/><line x1="21" x2="12" y1="12" y2="12"/><line x1="8" x2="3" y1="12" y2="12"/><line x1="21" x2="16" y1="20" y2="20"/><line x1="12" x2="3" y1="20" y2="20"/><line x1="14" x2="14" y1="2" y2="6"/><line x1="8" x2="8" y1="10" y2="14"/><line x1="16" x2="16" y1="18" y2="22"/></symbol>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@usableapp/cardds",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.6",
|
|
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,17 +0,0 @@
|
|
|
1
|
-
import type { ComponentProps } from 'react';
|
|
2
|
-
export interface BaseContentProps extends ComponentProps<'section'> {
|
|
3
|
-
}
|
|
4
|
-
/**
|
|
5
|
-
* BaseContent — words straight on the base, no card around them: a heading, a paragraph,
|
|
6
|
-
* maybe a CtaPack. Content has three homes (Card · Sheet · the base); this is the third one, named.
|
|
7
|
-
* Was Section (and, inside a Step, StepCard) until 2026-09-16 — one block, one name.
|
|
8
|
-
* In a Step it is the reading block (first child; the step's MOVE goes to the ActionBar, never here). It can move two ways
|
|
9
|
-
* (Lh 2026-09-20): several of them in a `Pages` = a walk of words the round pager turns (slideTo); or a CtaPack of WAYS IN
|
|
10
|
-
* (sign in · new phone · join) — plain `Btn`s; what each one opens (a `Sheet` holding that way's whole form) is the APP's wiring, not
|
|
11
|
-
* 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.
|
|
12
|
-
*/
|
|
13
|
-
export declare function BaseContent({ className, ...rest }: BaseContentProps): import("react").JSX.Element;
|
|
14
|
-
export interface CtaPackProps extends ComponentProps<'div'> {
|
|
15
|
-
}
|
|
16
|
-
/** 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. */
|
|
17
|
-
export declare function CtaPack({ className, ...rest }: CtaPackProps): import("react").JSX.Element;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { cx } from '../cx.js';
|
|
3
|
-
/**
|
|
4
|
-
* BaseContent — words straight on the base, no card around them: a heading, a paragraph,
|
|
5
|
-
* maybe a CtaPack. Content has three homes (Card · Sheet · the base); this is the third one, named.
|
|
6
|
-
* Was Section (and, inside a Step, StepCard) until 2026-09-16 — one block, one name.
|
|
7
|
-
* In a Step it is the reading block (first child; the step's MOVE goes to the ActionBar, never here). It can move two ways
|
|
8
|
-
* (Lh 2026-09-20): several of them in a `Pages` = a walk of words the round pager turns (slideTo); or a CtaPack of WAYS IN
|
|
9
|
-
* (sign in · new phone · join) — plain `Btn`s; what each one opens (a `Sheet` holding that way's whole form) is the APP's wiring, not
|
|
10
|
-
* 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.
|
|
11
|
-
*/
|
|
12
|
-
export function BaseContent({ className, ...rest }) {
|
|
13
|
-
return _jsx("section", { className: cx('base-content', className), ...rest });
|
|
14
|
-
}
|
|
15
|
-
/** 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. */
|
|
16
|
-
export function CtaPack({ className, ...rest }) {
|
|
17
|
-
return _jsx("div", { className: cx('cta-pack', className), ...rest });
|
|
18
|
-
}
|