@usableapp/cardds 0.7.15 → 0.7.17

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.
Files changed (77) hide show
  1. package/CHANGELOG.md +53 -0
  2. package/README.md +29 -28
  3. package/cardds.css +3 -3
  4. package/css/actions.css +67 -22
  5. package/css/base.css +44 -18
  6. package/css/card.css +25 -26
  7. package/css/choice.css +21 -33
  8. package/css/forms.css +0 -3
  9. package/css/journey.css +1 -3
  10. package/css/layover.css +19 -41
  11. package/css/lists.css +1 -6
  12. package/css/media.css +9 -18
  13. package/css/numbers.css +6 -21
  14. package/css/people.css +3 -9
  15. package/css/sheet.css +15 -19
  16. package/css/stack.css +21 -29
  17. package/css/step.css +7 -12
  18. package/css/theme.template.css +2 -1
  19. package/css/tokens.css +22 -4
  20. package/dist/actions/Btn.d.ts +1 -1
  21. package/dist/actions/Dropdown.js +3 -9
  22. package/dist/actions/Fab.d.ts +1 -1
  23. package/dist/actions/Fab.js +3 -2
  24. package/dist/cardds.css +264 -267
  25. package/dist/cards/Card.d.ts +24 -8
  26. package/dist/cards/Card.js +23 -8
  27. package/dist/cards/CardHead.d.ts +0 -1
  28. package/dist/cards/CardHead.js +1 -1
  29. package/dist/choice/Calendar.js +2 -5
  30. package/dist/choice/Mood.d.ts +10 -5
  31. package/dist/choice/Mood.js +4 -2
  32. package/dist/forms/Field.js +2 -3
  33. package/dist/forms/FileBtn.js +1 -1
  34. package/dist/forms/Pin.js +7 -12
  35. package/dist/index.d.ts +1 -1
  36. package/dist/index.js +3 -3
  37. package/dist/layover/Banner.d.ts +10 -3
  38. package/dist/layover/Banner.js +6 -3
  39. package/dist/lists/Row.d.ts +2 -1
  40. package/dist/lists/Row.js +5 -5
  41. package/dist/media/Postcard.js +3 -5
  42. package/dist/numbers/Band.d.ts +3 -1
  43. package/dist/numbers/Picker.js +3 -10
  44. package/dist/numbers/Track.d.ts +4 -2
  45. package/dist/numbers/Track.js +3 -3
  46. package/dist/people/AvatarPick.d.ts +3 -1
  47. package/dist/people/AvatarPick.js +2 -2
  48. package/dist/scaffold/ActionBar.d.ts +3 -3
  49. package/dist/scaffold/ActionBar.js +2 -2
  50. package/dist/scaffold/Centre.d.ts +2 -2
  51. package/dist/scaffold/Centre.js +2 -2
  52. package/dist/scaffold/PagerAt.d.ts +1 -1
  53. package/dist/scaffold/PagerAt.js +1 -1
  54. package/dist/scaffold/Screen.js +4 -7
  55. package/dist/scaffold/TopBar.js +3 -5
  56. package/dist/sheets/Drawer.js +3 -4
  57. package/dist/sheets/Sheet.js +9 -22
  58. package/dist/sheets/SheetStack.d.ts +2 -2
  59. package/dist/sheets/SheetStack.js +20 -13
  60. package/dist/sheets/SheetSteps.js +8 -11
  61. package/dist/sheets/StackBack.js +2 -1
  62. package/dist/sheets/StackSheet.d.ts +3 -2
  63. package/dist/sheets/StackSheet.js +7 -11
  64. package/dist/state.d.ts +24 -0
  65. package/dist/state.js +57 -0
  66. package/dist/templates/CallSheet.js +2 -4
  67. package/dist/templates/Home.d.ts +3 -2
  68. package/dist/templates/Home.js +2 -4
  69. package/dist/templates/Splash.js +3 -3
  70. package/dist/templates/Walkthrough.js +4 -5
  71. package/dist/type/Icon.js +3 -5
  72. package/dist/type/Text.d.ts +1 -1
  73. package/dist/type/textScale.d.ts +6 -0
  74. package/dist/type/textScale.js +12 -0
  75. package/package.json +7 -4
  76. package/dist/layover/Deck.d.ts +0 -9
  77. package/dist/layover/Deck.js +0 -10
package/dist/type/Text.d.ts CHANGED
@@ -14,12 +14,12 @@ export interface TextProps extends React.HTMLAttributes<HTMLElement> {
14
14
  grow?: boolean;
15
15
  /** uppercase */
16
16
  caps?: boolean;
17
- /** the element; defaults per level (h2 for display/h1/h2, p for title/body/stat, span for the rest) */
18
17
  /** READ, NOT SHOWN: the words stay in the page for a screen reader (a page's h1 that the design does not show), and take no room */
19
18
  sr?: boolean;
20
19
  /** the member may select and copy these words (a code, an address, a reference number) — everything else in a Screen is not
21
20
  * selectable, like a native app (Lh 2026-09-25) */
22
21
  selectable?: boolean;
22
+ /** the element; defaults per level (h2 for display/h1/h2, p for title/body/stat, span for the rest) */
23
23
  as?: 'h1' | 'h2' | 'h3' | 'p' | 'span' | 'strong' | 'div';
24
24
  }
25
25
  /**
package/dist/type/textScale.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ /**
2
+ * The member's text size: `--fs-base` on <html> as a share of the theme's own base (100 = as the theme set it).
3
+ * Words grow, things keep their size. The base is read from the CSS (cardds's default or the project's theme.css) — never
4
+ * copied into app code. Keeping the choice (localStorage, an account) is the app's.
5
+ */
6
+ export declare function setTextScale(percent: number, root?: HTMLElement): void;
package/dist/type/textScale.js ADDED
@@ -0,0 +1,12 @@
1
+ /**
2
+ * The member's text size: `--fs-base` on <html> as a share of the theme's own base (100 = as the theme set it).
3
+ * Words grow, things keep their size. The base is read from the CSS (cardds's default or the project's theme.css) — never
4
+ * copied into app code. Keeping the choice (localStorage, an account) is the app's.
5
+ */
6
+ export function setTextScale(percent, root = document.documentElement) {
7
+ root.style.removeProperty('--fs-base');
8
+ if (percent === 100)
9
+ return;
10
+ const base = parseFloat(getComputedStyle(root).getPropertyValue('--fs-base')) || 1.375; // rem
11
+ root.style.setProperty('--fs-base', `${(base * percent) / 100}rem`);
12
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@usableapp/cardds",
3
- "version": "0.7.15",
3
+ "version": "0.7.17",
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.",
@@ -14,7 +14,10 @@
14
14
  "test": "playwright test",
15
15
  "validate:inbox": "node scripts/validate-inbox.mjs",
16
16
  "prepack": "npm run build",
17
- "knobs": "node scripts/knobs.mjs"
17
+ "knobs": "node scripts/knobs.mjs",
18
+ "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p gallery/tsconfig.json --noEmit",
19
+ "snapshot:write": "CARDDS_SNAPSHOT=write playwright test tests/style-snapshot.spec.js",
20
+ "snapshot:check": "CARDDS_SNAPSHOT=check playwright test tests/style-snapshot.spec.js"
18
21
  },
19
22
  "devDependencies": {
20
23
  "@playwright/test": "1.58.2",
@@ -52,8 +55,8 @@
52
55
  "CHANGELOG.md"
53
56
  ],
54
57
  "peerDependencies": {
55
- "react": ">=18",
56
- "react-dom": ">=18"
58
+ "react": ">=19",
59
+ "react-dom": ">=19"
57
60
  },
58
61
  "publishConfig": {
59
62
  "access": "public"
package/dist/layover/Deck.d.ts DELETED
@@ -1,9 +0,0 @@
1
- import type { ComponentProps } from 'react';
2
- export interface DeckProps extends ComponentProps<'div'> {
3
- }
4
- /** Deck — swipe cards fanned behind each other; the LAST child is on top. Children are Cards (the front one may `fold`). */
5
- export declare function Deck({ className, ...rest }: DeckProps): import("react").JSX.Element;
6
- export interface DeckActionsProps extends ComponentProps<'div'> {
7
- }
8
- /** DeckActions — the two big round buttons under a Deck (skip · keep). */
9
- export declare function DeckActions({ className, ...rest }: DeckActionsProps): import("react").JSX.Element;
package/dist/layover/Deck.js DELETED
@@ -1,10 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { cx } from '../cx.js';
3
- /** Deck — swipe cards fanned behind each other; the LAST child is on top. Children are Cards (the front one may `fold`). */
4
- export function Deck({ className, ...rest }) {
5
- return _jsx("div", { className: cx('deck', className), ...rest });
6
- }
7
- /** DeckActions — the two big round buttons under a Deck (skip · keep). */
8
- export function DeckActions({ className, ...rest }) {
9
- return _jsx("div", { className: cx('deck__actions', className), ...rest });
10
- }