@handled-ai/design-system 0.9.28 → 0.10.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 (64) hide show
  1. package/dist/components/badge.d.ts +1 -1
  2. package/dist/components/button.d.ts +1 -1
  3. package/dist/components/compliance-badge.d.ts +10 -0
  4. package/dist/components/compliance-badge.js +95 -0
  5. package/dist/components/compliance-badge.js.map +1 -0
  6. package/dist/components/contact-chip.d.ts +12 -0
  7. package/dist/components/contact-chip.js +98 -0
  8. package/dist/components/contact-chip.js.map +1 -0
  9. package/dist/components/empty-state.d.ts +11 -0
  10. package/dist/components/empty-state.js +46 -0
  11. package/dist/components/empty-state.js.map +1 -0
  12. package/dist/components/filter-chip.d.ts +9 -0
  13. package/dist/components/filter-chip.js +67 -0
  14. package/dist/components/filter-chip.js.map +1 -0
  15. package/dist/components/inline-banner.d.ts +10 -0
  16. package/dist/components/inline-banner.js +97 -0
  17. package/dist/components/inline-banner.js.map +1 -0
  18. package/dist/components/kbd-hint.d.ts +5 -0
  19. package/dist/components/kbd-hint.js +51 -0
  20. package/dist/components/kbd-hint.js.map +1 -0
  21. package/dist/components/rich-text-toolbar.d.ts +9 -0
  22. package/dist/components/rich-text-toolbar.js +103 -0
  23. package/dist/components/rich-text-toolbar.js.map +1 -0
  24. package/dist/components/step-timeline.d.ts +19 -0
  25. package/dist/components/step-timeline.js +134 -0
  26. package/dist/components/step-timeline.js.map +1 -0
  27. package/dist/components/sticky-action-bar.d.ts +10 -0
  28. package/dist/components/sticky-action-bar.js +56 -0
  29. package/dist/components/sticky-action-bar.js.map +1 -0
  30. package/dist/components/switch.d.ts +6 -0
  31. package/dist/components/switch.js +66 -0
  32. package/dist/components/switch.js.map +1 -0
  33. package/dist/components/tabs.d.ts +1 -1
  34. package/dist/components/variable-autocomplete.d.ts +21 -0
  35. package/dist/components/variable-autocomplete.js +171 -0
  36. package/dist/components/variable-autocomplete.js.map +1 -0
  37. package/dist/index.d.ts +12 -1
  38. package/dist/index.js +12 -1
  39. package/dist/index.js.map +1 -1
  40. package/package.json +2 -1
  41. package/src/components/__tests__/compliance-badge.test.tsx +88 -0
  42. package/src/components/__tests__/contact-chip.test.tsx +88 -0
  43. package/src/components/__tests__/empty-state.test.tsx +76 -0
  44. package/src/components/__tests__/filter-chip.test.tsx +73 -0
  45. package/src/components/__tests__/inline-banner.test.tsx +110 -0
  46. package/src/components/__tests__/kbd-hint.test.tsx +29 -0
  47. package/src/components/__tests__/rich-text-toolbar.test.tsx +92 -0
  48. package/src/components/__tests__/step-timeline.test.tsx +174 -0
  49. package/src/components/__tests__/sticky-action-bar.test.tsx +52 -0
  50. package/src/components/__tests__/switch.test.tsx +39 -0
  51. package/src/components/__tests__/variable-autocomplete.test.tsx +155 -0
  52. package/src/components/compliance-badge.tsx +68 -0
  53. package/src/components/contact-chip.tsx +68 -0
  54. package/src/components/empty-state.tsx +37 -0
  55. package/src/components/filter-chip.tsx +37 -0
  56. package/src/components/inline-banner.tsx +69 -0
  57. package/src/components/kbd-hint.tsx +21 -0
  58. package/src/components/rich-text-toolbar.tsx +90 -0
  59. package/src/components/step-timeline.tsx +149 -0
  60. package/src/components/sticky-action-bar.tsx +36 -0
  61. package/src/components/switch.tsx +29 -0
  62. package/src/components/variable-autocomplete.tsx +178 -0
  63. package/src/index.ts +12 -1
  64. package/src/styles/globals.css +60 -0
package/src/index.ts CHANGED
@@ -19,6 +19,8 @@ export * from "./components/avatar"
19
19
  export * from "./components/badge"
20
20
  export * from "./components/button"
21
21
  export * from "./components/card"
22
+ export * from "./components/compliance-badge"
23
+ export * from "./components/contact-chip"
22
24
  export * from "./components/contact-list"
23
25
  export * from "./components/dashboard-cards"
24
26
  export * from "./components/data-table"
@@ -29,15 +31,19 @@ export * from "./components/data-table-toolbar"
29
31
  export * from "./components/detail-view"
30
32
  export * from "./components/dialog"
31
33
  export * from "./components/dropdown-menu"
34
+ export * from "./components/empty-state"
32
35
  export * from "./components/entity-panel"
36
+ export * from "./components/filter-chip"
33
37
  export * from "./components/inbox-row"
34
38
  export * from "./components/inbox-toolbar"
39
+ export * from "./components/inline-banner"
35
40
  export * from "./components/input"
36
41
  export * from "./components/insights-filter-bar"
37
42
  export * from "./components/item-list"
38
43
  export * from "./components/item-list-display"
39
44
  export * from "./components/item-list-filter"
40
45
  export * from "./components/item-list-toolbar"
46
+ export * from "./components/kbd-hint"
41
47
  export * from "./components/label"
42
48
  export * from "./components/message"
43
49
  export * from "./components/metric-card"
@@ -54,6 +60,7 @@ export {
54
60
  export * from "./components/quick-action-sidebar-nav"
55
61
  export * from "./components/recommended-actions-section"
56
62
  export * from "./components/report-card"
63
+ export * from "./components/rich-text-toolbar"
57
64
  export * from "./components/score-analysis-modal"
58
65
  export * from "./components/score-breakdown"
59
66
  export * from "./components/score-feedback"
@@ -65,17 +72,21 @@ export * from "./components/sheet"
65
72
  export * from "./components/sidebar"
66
73
  export * from "./components/signal-feedback-inline"
67
74
  export * from "./components/simple-data-table"
68
- export * from "./components/virtualized-data-table"
69
75
  export * from "./components/skeleton"
70
76
  export * from "./components/status-badge"
77
+ export * from "./components/step-timeline"
78
+ export * from "./components/sticky-action-bar"
71
79
  export * from "./components/styled-bar-list"
72
80
  export * from "./components/suggested-actions"
81
+ export * from "./components/switch"
73
82
  export * from "./components/table"
74
83
  export * from "./components/tabs"
75
84
  export * from "./components/textarea"
76
85
  export * from "./components/timeline-activity"
77
86
  export * from "./components/tooltip"
87
+ export * from "./components/variable-autocomplete"
78
88
  export * from "./components/view-mode-toggle"
89
+ export * from "./components/virtualized-data-table"
79
90
 
80
91
  // Charts (re-exported for backward compatibility with root imports)
81
92
  export * from "./charts/index"
package/src/styles/globals.css CHANGED
@@ -65,6 +65,28 @@
65
65
  /* Brand colors */
66
66
  --brand-purple: #6B5FCF;
67
67
 
68
+ /* Semantic status colors */
69
+ --status-active-bg: #ecfdf5;
70
+ --status-active-fg: #059669;
71
+ --status-active-border: #a7f3d0;
72
+
73
+ --status-pending-bg: #fffbeb;
74
+ --status-pending-fg: #d97706;
75
+ --status-pending-border: #fde68a;
76
+
77
+ /* Intentionally identical to status-pending — same visual, different semantic meaning */
78
+ --status-warning-bg: #fffbeb;
79
+ --status-warning-fg: #d97706;
80
+ --status-warning-border: #fde68a;
81
+
82
+ --status-info-bg: #eff6ff;
83
+ --status-info-fg: #2563eb;
84
+ --status-info-border: #bfdbfe;
85
+
86
+ --status-destructive-bg: #fef2f2;
87
+ --status-destructive-fg: #dc2626;
88
+ --status-destructive-border: #fecaca;
89
+
68
90
  --chart-1: var(--gray-900);
69
91
  --chart-2: var(--gray-700);
70
92
  --chart-3: var(--gray-500);
@@ -129,6 +151,28 @@
129
151
  /* Brand colors */
130
152
  --brand-purple: #6B5FCF;
131
153
 
154
+ /* Semantic status colors (dark) */
155
+ --status-active-bg: #022c22;
156
+ --status-active-fg: #34d399;
157
+ --status-active-border: #065f46;
158
+
159
+ --status-pending-bg: #451a03;
160
+ --status-pending-fg: #fbbf24;
161
+ --status-pending-border: #92400e;
162
+
163
+ /* Intentionally identical to status-pending — same visual, different semantic meaning */
164
+ --status-warning-bg: #451a03;
165
+ --status-warning-fg: #fbbf24;
166
+ --status-warning-border: #92400e;
167
+
168
+ --status-info-bg: #1e1b4b;
169
+ --status-info-fg: #60a5fa;
170
+ --status-info-border: #1e40af;
171
+
172
+ --status-destructive-bg: #450a0a;
173
+ --status-destructive-fg: #f87171;
174
+ --status-destructive-border: #991b1b;
175
+
132
176
  --chart-1: var(--gray-900);
133
177
  --chart-2: var(--gray-700);
134
178
  --chart-3: var(--gray-600);
@@ -196,6 +240,22 @@
196
240
 
197
241
  --color-brand-purple: var(--brand-purple);
198
242
 
243
+ --color-status-active-bg: var(--status-active-bg);
244
+ --color-status-active-fg: var(--status-active-fg);
245
+ --color-status-active-border: var(--status-active-border);
246
+ --color-status-pending-bg: var(--status-pending-bg);
247
+ --color-status-pending-fg: var(--status-pending-fg);
248
+ --color-status-pending-border: var(--status-pending-border);
249
+ --color-status-warning-bg: var(--status-warning-bg);
250
+ --color-status-warning-fg: var(--status-warning-fg);
251
+ --color-status-warning-border: var(--status-warning-border);
252
+ --color-status-info-bg: var(--status-info-bg);
253
+ --color-status-info-fg: var(--status-info-fg);
254
+ --color-status-info-border: var(--status-info-border);
255
+ --color-status-destructive-bg: var(--status-destructive-bg);
256
+ --color-status-destructive-fg: var(--status-destructive-fg);
257
+ --color-status-destructive-border: var(--status-destructive-border);
258
+
199
259
  --radius-sm: calc(var(--radius) - 4px);
200
260
  --radius-md: calc(var(--radius) - 2px);
201
261
  --radius-lg: var(--radius);