@nyaruka/temba-components 0.158.1 → 0.159.0

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 (28) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/static/svg/index.svg +1 -1
  3. package/dist/temba-components.js +1458 -600
  4. package/dist/temba-components.js.map +1 -1
  5. package/package.json +1 -2
  6. package/src/Icons.ts +8 -1
  7. package/src/display/Button.ts +24 -14
  8. package/src/display/Thumbnail.ts +1 -1
  9. package/src/flow/nodes/split_by_resthook.ts +3 -3
  10. package/src/interfaces.ts +46 -2
  11. package/src/layout/PageHeader.ts +338 -0
  12. package/src/list/ContactList.ts +68 -52
  13. package/src/list/ContentList.ts +1461 -346
  14. package/src/list/FlowList.ts +20 -26
  15. package/src/list/MsgList.ts +169 -71
  16. package/src/live/ContactEvents.ts +880 -0
  17. package/src/styles/designTokens.ts +5 -2
  18. package/src/styles/pillVariants.ts +21 -6
  19. package/static/css/design-system.css +769 -0
  20. package/static/css/temba-components.css +16 -77
  21. package/static/svg/index.svg +1 -1
  22. package/static/svg/work/traced/chevron-down-double.svg +1 -0
  23. package/static/svg/work/traced/chevron-up-double.svg +1 -0
  24. package/static/svg/work/used/chevron-down-double.svg +3 -0
  25. package/static/svg/work/used/chevron-up-double.svg +3 -0
  26. package/temba-modules.ts +4 -2
  27. package/web-dev-server.config.mjs +9 -0
  28. package/src/live/ContactPending.ts +0 -247
package/static/css/temba-components.css CHANGED
@@ -1,3 +1,10 @@
1
+ /* The design-system tokens (--primary, --primary-rgb, --accent ramp,
2
+ neutrals, status, type, shape, density, shadows) live in their own
3
+ stylesheet; @import keeps temba-components.css consumers (npm hosts,
4
+ the in-repo demos, the test harness) from having to add a second
5
+ <link> manually. CSS @import must precede every other rule. */
6
+ @import url('./design-system.css');
7
+
1
8
  html.dragging * {
2
9
  user-select: none;
3
10
  pointer-events: none;
@@ -7,85 +14,17 @@
7
14
  html {
8
15
 
9
16
  /* ─── TextIt Design System tokens ─────────────────────────────────────
10
- Single source of truth. Cascades through Shadow DOM into every
11
- component. Legacy tokens below are aliased to these — keep both in
12
- sync if the design system evolves. */
13
-
14
- /* accent ramp — the primary color sits at 400 and the ramp is
15
- derived from it in both directions via sRGB mixing.
16
- The anchor reads from --primary-rgb so host pages can re-theme
17
- the entire ramp by setting e.g. --primary-rgb: 112, 0, 132. */
18
- --accent: rgb(var(--primary-rgb, 98, 147, 201));
19
- --accent-50: color-mix(in srgb, var(--accent) 6%, white);
20
- --accent-100: color-mix(in srgb, var(--accent) 16%, white);
21
- --accent-200: color-mix(in srgb, var(--accent) 32%, white);
22
- --accent-300: color-mix(in srgb, var(--accent) 60%, white);
23
- --accent-400: var(--accent);
24
- --accent-500: color-mix(in srgb, var(--accent) 90%, black);
25
- --accent-600: color-mix(in srgb, var(--accent) 80%, black);
26
- --accent-700: color-mix(in srgb, var(--accent) 65%, black);
27
- --accent-800: color-mix(in srgb, var(--accent) 50%, black);
28
- --accent-900: color-mix(in srgb, var(--accent) 35%, black);
29
-
30
- /* neutrals */
31
- --bg: #F6F7F9;
32
- --surface: #FFFFFF;
33
- --surface-note: #FFF9C2;
34
- --sunken: #F1F3F5;
35
- --border: #E6E8EC;
36
- --border-strong: #D2D6DC;
37
- --border-note: #EBDF6F;
38
- --text-1: #1A1F26;
39
- --text-2: #4D5664;
40
- --text-3: #7B8593;
41
- --text-4: #A2ABB8;
42
-
43
- /* status — full set */
44
- --success: #16A34A;
45
- --success-bg: #E8F6EE;
46
- --success-border: #BFE5CD;
47
- --info: #2563EB;
48
- --info-bg: #E8F0FE;
49
- --info-border: #C7D7F8;
50
- --warning: #B45309;
51
- --warning-bg: #FDF3E2;
52
- --warning-border: #F2D9A9;
53
- --danger: #D03F3F;
54
- --danger-bg: #FCEBEB;
55
- --danger-border: #F4C8C8;
56
- --neutral: #6B7280;
57
- --neutral-bg: #EEF0F3;
58
- --neutral-border: #D8DCE2;
59
-
60
- /* type */
61
- --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
62
- --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
63
- --w-regular: 400;
64
- --w-medium: 500;
65
- --w-semibold: 600;
66
- --w-bold: 600;
67
-
68
- /* shape */
69
- --r: 8px;
70
- --r-xs: 2px;
71
- --r-sm: 4px;
72
- --r-lg: 12px;
73
-
74
- /* density */
75
- --row-h: 36px;
76
- --input-h: 34px;
77
- --pad: 10px;
78
- --gap: 14px;
79
-
80
- /* shadows */
81
- --shadow-1: 0 1px 1px rgba(15, 22, 36, 0.04), 0 1px 2px rgba(15, 22, 36, 0.04);
82
- --shadow-2: 0 1px 1px rgba(15, 22, 36, 0.04), 0 4px 12px rgba(15, 22, 36, 0.06);
83
- --shadow-3: 0 6px 20px rgba(15, 22, 36, 0.10), 0 2px 6px rgba(15, 22, 36, 0.06);
84
-
85
- /* ─── legacy aliases — point at the DS tokens above ────────────────── */
17
+ Owned by /static/css/design-system.css — load that alongside this
18
+ file (rapidpro's frame.html already does, and so does the styleguide).
19
+ --primary-rgb, --accent / --accent-50..900, the neutrals, status,
20
+ type, shape, density and shadow tokens all live there now; the
21
+ legacy aliases below reference them by name. The shadow-DOM copy
22
+ in src/styles/designTokens.ts carries fallback values for hosts
23
+ that don't load design-system.css (e.g. component-only tests). */
24
+
25
+ /* ─── legacy aliases — point at the design-system tokens ──────────── */
86
26
 
87
27
  --font-family: var(--font);
88
- --primary-rgb: 58, 102, 150;
89
28
  --secondary-rgb: 140, 51, 140;
90
29
  --tertiary-rgb: 135, 202, 35;
91
30