@usableapp/cardds 0.7.14 → 0.7.16

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 (59) hide show
  1. package/CHANGELOG.md +43 -0
  2. package/README.md +6 -8
  3. package/css/actions.css +24 -1
  4. package/css/base.css +2 -2
  5. package/css/card.css +9 -13
  6. package/css/choice.css +2 -2
  7. package/css/journey.css +3 -3
  8. package/css/layover.css +5 -17
  9. package/css/media.css +6 -5
  10. package/css/numbers.css +4 -3
  11. package/css/palette.css +81 -40
  12. package/css/people.css +3 -2
  13. package/css/sheet.css +4 -6
  14. package/css/stack.css +6 -10
  15. package/css/step.css +3 -5
  16. package/css/theme.template.css +2 -1
  17. package/css/tokens.css +12 -1
  18. package/dist/actions/Dropdown.js +4 -5
  19. package/dist/cardds.css +164 -110
  20. package/dist/cards/Card.d.ts +3 -3
  21. package/dist/choice/Calendar.js +3 -5
  22. package/dist/choice/Mood.d.ts +10 -5
  23. package/dist/choice/Mood.js +4 -2
  24. package/dist/forms/Pin.js +7 -8
  25. package/dist/index.d.ts +1 -1
  26. package/dist/index.js +1 -1
  27. package/dist/lists/Row.d.ts +2 -1
  28. package/dist/lists/Row.js +2 -2
  29. package/dist/media/Postcard.js +3 -5
  30. package/dist/media/Tile.d.ts +1 -1
  31. package/dist/numbers/Band.d.ts +1 -1
  32. package/dist/numbers/Picker.js +4 -5
  33. package/dist/numbers/Track.d.ts +4 -2
  34. package/dist/numbers/Track.js +3 -3
  35. package/dist/people/AvatarPick.d.ts +3 -1
  36. package/dist/people/AvatarPick.js +2 -2
  37. package/dist/scaffold/Centre.d.ts +1 -1
  38. package/dist/scaffold/Centre.js +1 -1
  39. package/dist/scaffold/Screen.d.ts +1 -1
  40. package/dist/scaffold/Screen.js +3 -4
  41. package/dist/scaffold/TopBar.js +3 -5
  42. package/dist/sheets/Sheet.js +5 -7
  43. package/dist/sheets/SheetStack.js +4 -5
  44. package/dist/sheets/SheetSteps.js +5 -6
  45. package/dist/sheets/StackSheet.d.ts +1 -1
  46. package/dist/sheets/StackSheet.js +4 -5
  47. package/dist/state.d.ts +7 -0
  48. package/dist/state.js +17 -0
  49. package/dist/templates/CallSheet.js +3 -4
  50. package/dist/templates/Home.d.ts +1 -1
  51. package/dist/templates/Home.js +3 -4
  52. package/dist/templates/Splash.js +2 -1
  53. package/dist/templates/Walkthrough.js +4 -5
  54. package/dist/type/Icon.js +3 -5
  55. package/dist/type/textScale.d.ts +6 -0
  56. package/dist/type/textScale.js +12 -0
  57. package/package.json +1 -1
  58. package/dist/layover/Deck.d.ts +0 -9
  59. package/dist/layover/Deck.js +0 -10
package/dist/type/Icon.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { warnOnce } from '../state.js';
2
3
  import { cx } from '../cx.js';
3
4
  import { ICONS } from './icons.js';
4
5
  /* the stroke style every stock symbol shares (Lucide): a project's drawing takes it unless it brings its own attrs */
@@ -14,7 +15,6 @@ export function registerIcons(icons) {
14
15
  for (const [name, d] of Object.entries(icons))
15
16
  OWN.set(name, typeof d === 'string' ? { attrs: STROKE, body: d } : { attrs: { ...STROKE, ...d.attrs }, body: d.body });
16
17
  }
17
- const warned = new Set();
18
18
  /**
19
19
  * Icon — a stroke icon, inlined (no sprite file at runtime): one of the stock Lucide symbols, one of the project's OWN (`registerIcons`), or a
20
20
  * one-off drawn with `children`. The set is open — a project never comes to cardds for an icon.
@@ -23,10 +23,8 @@ const warned = new Set();
23
23
  */
24
24
  export function Icon({ name, children, size = 'md', label, className, ...rest }) {
25
25
  const icon = name === undefined ? undefined : OWN.get(name) ?? ICONS[name];
26
- if (name !== undefined && !icon && !warned.has(name)) {
27
- warned.add(name);
28
- console.warn(`cardds Icon: no icon named "${name}" — a stock name is misspelt, or the project has not registered it (registerIcons)`);
29
- }
26
+ if (name !== undefined && !icon)
27
+ warnOnce(`icon:${name}`, `cardds Icon: no icon named "${name}" — a stock name is misspelt, or the project has not registered it (registerIcons)`);
30
28
  const shared = { className: cx('icon', size !== 'md' && `icon--${size}`, className), role: label ? 'img' : undefined, 'aria-label': label, 'aria-hidden': label ? undefined : true };
31
29
  // an unknown name draws nothing but keeps its box — a missing icon never takes a screen down
32
30
  if (!icon)
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.14",
3
+ "version": "0.7.16",
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.",
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
- }