@handled-ai/design-system 0.9.28 → 0.11.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 (74) hide show
  1. package/dist/components/account-contacts-popover.d.ts +22 -0
  2. package/dist/components/account-contacts-popover.js +180 -0
  3. package/dist/components/account-contacts-popover.js.map +1 -0
  4. package/dist/components/badge.d.ts +1 -1
  5. package/dist/components/button.d.ts +2 -2
  6. package/dist/components/compliance-badge.d.ts +10 -0
  7. package/dist/components/compliance-badge.js +95 -0
  8. package/dist/components/compliance-badge.js.map +1 -0
  9. package/dist/components/contact-chip.d.ts +12 -0
  10. package/dist/components/contact-chip.js +98 -0
  11. package/dist/components/contact-chip.js.map +1 -0
  12. package/dist/components/draft-feedback-inline.d.ts +11 -0
  13. package/dist/components/draft-feedback-inline.js +153 -0
  14. package/dist/components/draft-feedback-inline.js.map +1 -0
  15. package/dist/components/empty-state.d.ts +11 -0
  16. package/dist/components/empty-state.js +46 -0
  17. package/dist/components/empty-state.js.map +1 -0
  18. package/dist/components/filter-chip.d.ts +9 -0
  19. package/dist/components/filter-chip.js +67 -0
  20. package/dist/components/filter-chip.js.map +1 -0
  21. package/dist/components/inline-banner.d.ts +10 -0
  22. package/dist/components/inline-banner.js +97 -0
  23. package/dist/components/inline-banner.js.map +1 -0
  24. package/dist/components/kbd-hint.d.ts +5 -0
  25. package/dist/components/kbd-hint.js +51 -0
  26. package/dist/components/kbd-hint.js.map +1 -0
  27. package/dist/components/rich-text-toolbar.d.ts +9 -0
  28. package/dist/components/rich-text-toolbar.js +103 -0
  29. package/dist/components/rich-text-toolbar.js.map +1 -0
  30. package/dist/components/step-timeline.d.ts +19 -0
  31. package/dist/components/step-timeline.js +134 -0
  32. package/dist/components/step-timeline.js.map +1 -0
  33. package/dist/components/sticky-action-bar.d.ts +10 -0
  34. package/dist/components/sticky-action-bar.js +56 -0
  35. package/dist/components/sticky-action-bar.js.map +1 -0
  36. package/dist/components/suggested-actions.js +2 -304
  37. package/dist/components/suggested-actions.js.map +1 -1
  38. package/dist/components/switch.d.ts +6 -0
  39. package/dist/components/switch.js +66 -0
  40. package/dist/components/switch.js.map +1 -0
  41. package/dist/components/variable-autocomplete.d.ts +21 -0
  42. package/dist/components/variable-autocomplete.js +171 -0
  43. package/dist/components/variable-autocomplete.js.map +1 -0
  44. package/dist/index.d.ts +14 -1
  45. package/dist/index.js +17 -1
  46. package/dist/index.js.map +1 -1
  47. package/package.json +2 -1
  48. package/src/components/__tests__/compliance-badge.test.tsx +88 -0
  49. package/src/components/__tests__/contact-chip.test.tsx +88 -0
  50. package/src/components/__tests__/empty-state.test.tsx +76 -0
  51. package/src/components/__tests__/filter-chip.test.tsx +73 -0
  52. package/src/components/__tests__/inline-banner.test.tsx +110 -0
  53. package/src/components/__tests__/kbd-hint.test.tsx +29 -0
  54. package/src/components/__tests__/rich-text-toolbar.test.tsx +92 -0
  55. package/src/components/__tests__/step-timeline.test.tsx +174 -0
  56. package/src/components/__tests__/sticky-action-bar.test.tsx +52 -0
  57. package/src/components/__tests__/switch.test.tsx +39 -0
  58. package/src/components/__tests__/variable-autocomplete.test.tsx +155 -0
  59. package/src/components/account-contacts-popover.tsx +192 -0
  60. package/src/components/compliance-badge.tsx +68 -0
  61. package/src/components/contact-chip.tsx +68 -0
  62. package/src/components/draft-feedback-inline.tsx +193 -0
  63. package/src/components/empty-state.tsx +37 -0
  64. package/src/components/filter-chip.tsx +37 -0
  65. package/src/components/inline-banner.tsx +69 -0
  66. package/src/components/kbd-hint.tsx +21 -0
  67. package/src/components/rich-text-toolbar.tsx +90 -0
  68. package/src/components/step-timeline.tsx +149 -0
  69. package/src/components/sticky-action-bar.tsx +36 -0
  70. package/src/components/suggested-actions.tsx +2 -363
  71. package/src/components/switch.tsx +29 -0
  72. package/src/components/variable-autocomplete.tsx +178 -0
  73. package/src/index.ts +16 -1
  74. package/src/styles/globals.css +60 -0
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);