@welshare/questionnaire 0.1.1 → 0.2.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 (96) hide show
  1. package/README.md +151 -0
  2. package/dist/esm/components/bmi-form.d.ts +68 -0
  3. package/dist/esm/components/bmi-form.d.ts.map +1 -0
  4. package/dist/esm/components/bmi-form.js +138 -0
  5. package/dist/esm/components/question-renderer.d.ts +6 -1
  6. package/dist/esm/components/question-renderer.d.ts.map +1 -1
  7. package/dist/esm/components/question-renderer.js +49 -14
  8. package/dist/esm/components/questions/decimal-question.d.ts +8 -1
  9. package/dist/esm/components/questions/decimal-question.d.ts.map +1 -1
  10. package/dist/esm/components/questions/decimal-question.js +19 -1
  11. package/dist/esm/components/questions/multiple-choice-question.d.ts.map +1 -1
  12. package/dist/esm/components/questions/multiple-choice-question.js +2 -2
  13. package/dist/esm/contexts/questionnaire-context.d.ts.map +1 -1
  14. package/dist/esm/contexts/questionnaire-context.js +3 -2
  15. package/dist/esm/index.d.ts +6 -2
  16. package/dist/esm/index.d.ts.map +1 -1
  17. package/dist/esm/index.js +5 -1
  18. package/dist/esm/lib/bmi-helpers.d.ts +50 -0
  19. package/dist/esm/lib/bmi-helpers.d.ts.map +1 -0
  20. package/dist/esm/lib/bmi-helpers.js +69 -0
  21. package/dist/esm/lib/constants.d.ts +94 -0
  22. package/dist/esm/lib/constants.d.ts.map +1 -0
  23. package/dist/esm/lib/constants.js +93 -0
  24. package/dist/esm/lib/questionnaire-utils.d.ts +21 -1
  25. package/dist/esm/lib/questionnaire-utils.d.ts.map +1 -1
  26. package/dist/esm/lib/questionnaire-utils.js +85 -4
  27. package/dist/esm/types/fhir.d.ts +1 -0
  28. package/dist/esm/types/fhir.d.ts.map +1 -1
  29. package/dist/esm/types/index.d.ts +25 -0
  30. package/dist/esm/types/index.d.ts.map +1 -1
  31. package/dist/styles.css +108 -0
  32. package/package.json +17 -6
  33. package/dist/node_modules/@welshare/questionnaire/.tshy/build.json +0 -8
  34. package/dist/node_modules/@welshare/questionnaire/.tshy/esm.json +0 -16
  35. package/dist/node_modules/@welshare/questionnaire/LICENSE +0 -7
  36. package/dist/node_modules/@welshare/questionnaire/README.md +0 -173
  37. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/debug-section.d.ts +0 -44
  38. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/debug-section.d.ts.map +0 -1
  39. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/debug-section.js +0 -28
  40. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/question-renderer.d.ts +0 -80
  41. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/question-renderer.d.ts.map +0 -1
  42. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/question-renderer.js +0 -159
  43. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/questions/boolean-question.d.ts +0 -15
  44. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/questions/boolean-question.d.ts.map +0 -1
  45. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/questions/boolean-question.js +0 -19
  46. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/questions/choice-question.d.ts +0 -19
  47. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/questions/choice-question.d.ts.map +0 -1
  48. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/questions/choice-question.js +0 -23
  49. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/questions/decimal-question.d.ts +0 -12
  50. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/questions/decimal-question.d.ts.map +0 -1
  51. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/questions/decimal-question.js +0 -7
  52. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/questions/integer-question.d.ts +0 -18
  53. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/questions/integer-question.d.ts.map +0 -1
  54. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/questions/integer-question.js +0 -24
  55. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/questions/multiple-choice-question.d.ts +0 -20
  56. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/questions/multiple-choice-question.d.ts.map +0 -1
  57. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/questions/multiple-choice-question.js +0 -39
  58. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/questions/string-question.d.ts +0 -12
  59. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/questions/string-question.d.ts.map +0 -1
  60. package/dist/node_modules/@welshare/questionnaire/dist/esm/components/questions/string-question.js +0 -7
  61. package/dist/node_modules/@welshare/questionnaire/dist/esm/contexts/questionnaire-context.d.ts +0 -41
  62. package/dist/node_modules/@welshare/questionnaire/dist/esm/contexts/questionnaire-context.d.ts.map +0 -1
  63. package/dist/node_modules/@welshare/questionnaire/dist/esm/contexts/questionnaire-context.js +0 -350
  64. package/dist/node_modules/@welshare/questionnaire/dist/esm/index.d.ts +0 -7
  65. package/dist/node_modules/@welshare/questionnaire/dist/esm/index.d.ts.map +0 -1
  66. package/dist/node_modules/@welshare/questionnaire/dist/esm/index.js +0 -6
  67. package/dist/node_modules/@welshare/questionnaire/dist/esm/lib/questionnaire-utils.d.ts +0 -33
  68. package/dist/node_modules/@welshare/questionnaire/dist/esm/lib/questionnaire-utils.d.ts.map +0 -1
  69. package/dist/node_modules/@welshare/questionnaire/dist/esm/lib/questionnaire-utils.js +0 -99
  70. package/dist/node_modules/@welshare/questionnaire/dist/esm/package.json +0 -3
  71. package/dist/node_modules/@welshare/questionnaire/dist/esm/types/fhir.d.ts +0 -117
  72. package/dist/node_modules/@welshare/questionnaire/dist/esm/types/fhir.d.ts.map +0 -1
  73. package/dist/node_modules/@welshare/questionnaire/dist/esm/types/fhir.js +0 -3
  74. package/dist/node_modules/@welshare/questionnaire/dist/esm/types/index.d.ts +0 -51
  75. package/dist/node_modules/@welshare/questionnaire/dist/esm/types/index.d.ts.map +0 -1
  76. package/dist/node_modules/@welshare/questionnaire/dist/esm/types/index.js +0 -1
  77. package/dist/node_modules/@welshare/questionnaire/dist/styles.css +0 -467
  78. package/dist/node_modules/@welshare/questionnaire/dist/tokens.css +0 -130
  79. package/dist/node_modules/@welshare/questionnaire/package.json +0 -85
  80. package/dist/node_modules/@welshare/questionnaire/src/components/debug-section.tsx +0 -116
  81. package/dist/node_modules/@welshare/questionnaire/src/components/question-renderer.tsx +0 -368
  82. package/dist/node_modules/@welshare/questionnaire/src/components/questionnaire-styles.css +0 -467
  83. package/dist/node_modules/@welshare/questionnaire/src/components/questionnaire-tokens.css +0 -130
  84. package/dist/node_modules/@welshare/questionnaire/src/components/questions/boolean-question.tsx +0 -72
  85. package/dist/node_modules/@welshare/questionnaire/src/components/questions/choice-question.tsx +0 -68
  86. package/dist/node_modules/@welshare/questionnaire/src/components/questions/decimal-question.tsx +0 -32
  87. package/dist/node_modules/@welshare/questionnaire/src/components/questions/integer-question.tsx +0 -87
  88. package/dist/node_modules/@welshare/questionnaire/src/components/questions/multiple-choice-question.tsx +0 -119
  89. package/dist/node_modules/@welshare/questionnaire/src/components/questions/string-question.tsx +0 -31
  90. package/dist/node_modules/@welshare/questionnaire/src/contexts/questionnaire-context.tsx +0 -499
  91. package/dist/node_modules/@welshare/questionnaire/src/index.ts +0 -41
  92. package/dist/node_modules/@welshare/questionnaire/src/lib/__tests__/questionnaire-utils.test.ts +0 -578
  93. package/dist/node_modules/@welshare/questionnaire/src/lib/questionnaire-utils.ts +0 -122
  94. package/dist/node_modules/@welshare/questionnaire/src/types/fhir.ts +0 -126
  95. package/dist/node_modules/@welshare/questionnaire/src/types/index.ts +0 -44
  96. package/dist/node_modules/@welshare/questionnaire/tsconfig.json +0 -16
@@ -1,51 +0,0 @@
1
- /**
2
- * Props for rendering a radio button option
3
- */
4
- export interface RadioInputProps {
5
- /** The linkId of the question item */
6
- linkId: string;
7
- /** The option's value coding */
8
- valueCoding?: {
9
- system?: string;
10
- code?: string;
11
- display?: string;
12
- };
13
- /** The option's integer value (if applicable) */
14
- valueInteger?: number;
15
- /** Whether this option is currently selected */
16
- checked: boolean;
17
- /** Whether this option is disabled */
18
- disabled?: boolean;
19
- /** Callback when the option is selected */
20
- onChange: () => void;
21
- /** The display text for this option */
22
- label: string;
23
- /** The index of this option in the list */
24
- index: number;
25
- }
26
- /**
27
- * Props for rendering a checkbox option
28
- */
29
- export interface CheckboxInputProps {
30
- /** The linkId of the question item */
31
- linkId: string;
32
- /** The option's value coding */
33
- valueCoding?: {
34
- system?: string;
35
- code?: string;
36
- display?: string;
37
- };
38
- /** The option's integer value (if applicable) */
39
- valueInteger?: number;
40
- /** Whether this option is currently selected */
41
- checked: boolean;
42
- /** Whether this option is disabled */
43
- disabled?: boolean;
44
- /** Callback when the option is toggled */
45
- onChange: () => void;
46
- /** The display text for this option */
47
- label: string;
48
- /** The index of this option in the list */
49
- index: number;
50
- }
51
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnE,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gDAAgD;IAChD,OAAO,EAAE,OAAO,CAAC;IACjB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;CACf;AAGD;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnE,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gDAAgD;IAChD,OAAO,EAAE,OAAO,CAAC;IACjB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;CACf"}
@@ -1,467 +0,0 @@
1
- /**
2
- * Welshare Questionnaire Styles
3
- *
4
- * Scoped styles using .wq- prefix to avoid conflicts with other CSS systems.
5
- * Uses CSS custom properties from questionnaire-tokens.css for easy customization.
6
- *
7
- * Import both files in your application:
8
- * import '@welshare/react/questionnaire-tokens.css';
9
- * import '@welshare/react/questionnaire-styles.css';
10
- */
11
-
12
- /* === Question Container === */
13
- .wq-question-container {
14
- margin-bottom: var(--wq-question-gap);
15
- padding: var(--wq-space-lg);
16
- border-radius: var(--wq-radius-md);
17
- transition: all var(--wq-transition-base);
18
- }
19
-
20
- .wq-question-container.wq-has-error {
21
- border: var(--wq-border-width) solid var(--wq-color-error-border);
22
- background-color: var(--wq-color-error-bg);
23
- }
24
-
25
- /* === Question Text === */
26
- .wq-question-text {
27
- font-size: var(--wq-font-size-lg);
28
- font-weight: var(--wq-font-weight-medium);
29
- margin-bottom: var(--wq-space-md);
30
- color: var(--wq-color-text-primary);
31
- line-height: 1.5;
32
- }
33
-
34
- .wq-required-indicator {
35
- color: var(--wq-color-error);
36
- margin-left: var(--wq-space-xs);
37
- font-weight: var(--wq-font-weight-semibold);
38
- }
39
-
40
- /* === Choice Inputs (Radio/Checkbox) === */
41
- .wq-question-choice {
42
- display: flex;
43
- flex-direction: column;
44
- gap: var(--wq-space-md);
45
- }
46
-
47
- .wq-choice-option {
48
- display: flex;
49
- align-items: center;
50
- padding: var(--wq-choice-padding-y) var(--wq-choice-padding-x);
51
- border: var(--wq-border-width) solid var(--wq-color-border);
52
- border-radius: var(--wq-radius-md);
53
- cursor: pointer;
54
- transition: all var(--wq-transition-fast);
55
- background-color: var(--wq-color-surface);
56
- }
57
-
58
- .wq-choice-option:hover:not(.wq-disabled) {
59
- border-color: var(--wq-color-border-hover);
60
- background-color: var(--wq-color-background);
61
- }
62
-
63
- .wq-choice-option.wq-selected {
64
- border-color: var(--wq-color-selected-border);
65
- background-color: var(--wq-color-selected);
66
- }
67
-
68
- .wq-choice-option.wq-disabled {
69
- opacity: 0.5;
70
- cursor: not-allowed;
71
- }
72
-
73
- /* === Default Input Styling (for backward compatibility) === */
74
- /* Note: When using custom renderers, these styles won't apply */
75
- .wq-choice-option input[type="radio"],
76
- .wq-choice-option input[type="checkbox"] {
77
- margin-right: var(--wq-space-md);
78
- width: 1.25rem;
79
- height: 1.25rem;
80
- cursor: pointer;
81
- flex-shrink: 0;
82
- }
83
-
84
- .wq-choice-option.wq-disabled input[type="radio"],
85
- .wq-choice-option.wq-disabled input[type="checkbox"] {
86
- cursor: not-allowed;
87
- opacity: 0.5;
88
- }
89
-
90
- .wq-choice-label {
91
- flex: 1;
92
- font-size: var(--wq-font-size-base);
93
- color: var(--wq-color-text-secondary);
94
- line-height: 1.5;
95
- }
96
-
97
- .wq-choice-option.wq-selected .wq-choice-label {
98
- color: var(--wq-color-text-primary);
99
- font-weight: var(--wq-font-weight-medium);
100
- }
101
-
102
- .wq-max-answers-hint {
103
- font-size: var(--wq-font-size-sm);
104
- color: var(--wq-color-text-tertiary);
105
- margin-top: var(--wq-space-sm);
106
- font-weight: var(--wq-font-weight-normal);
107
- }
108
-
109
- /* === Text Inputs === */
110
- .wq-question-input {
111
- width: 100%;
112
- padding: var(--wq-input-padding-y) var(--wq-input-padding-x);
113
- border: var(--wq-border-width) solid var(--wq-color-border);
114
- border-radius: var(--wq-radius-md);
115
- font-size: var(--wq-font-size-base);
116
- color: var(--wq-color-text-primary);
117
- background-color: var(--wq-color-surface);
118
- transition: all var(--wq-transition-fast);
119
- min-height: var(--wq-input-height);
120
- line-height: 1.5;
121
- }
122
-
123
- .wq-question-input:hover {
124
- border-color: var(--wq-color-border-hover);
125
- }
126
-
127
- .wq-question-input:focus {
128
- outline: none;
129
- border-color: var(--wq-color-border-focus);
130
- box-shadow: var(--wq-shadow-focus);
131
- }
132
-
133
- .wq-question-input::placeholder {
134
- color: var(--wq-color-text-placeholder);
135
- }
136
-
137
- .wq-question-input:disabled {
138
- opacity: 0.6;
139
- cursor: not-allowed;
140
- background-color: var(--wq-color-background);
141
- }
142
-
143
- /* === Slider Inputs === */
144
- .wq-question-slider {
145
- padding: var(--wq-space-lg) 0;
146
- }
147
-
148
- .wq-slider-input {
149
- width: 100%;
150
- height: var(--wq-slider-height);
151
- border-radius: var(--wq-radius-sm);
152
- background: var(--wq-color-border);
153
- outline: none;
154
- -webkit-appearance: none;
155
- appearance: none;
156
- cursor: pointer;
157
- margin-bottom: 1rem;
158
-
159
- }
160
-
161
- .wq-slider-input::-webkit-slider-thumb {
162
- -webkit-appearance: none;
163
- appearance: none;
164
- width: var(--wq-slider-thumb-size);
165
- height: var(--wq-slider-thumb-size);
166
- border-radius: var(--wq-radius-full);
167
- background: var(--wq-color-primary);
168
- cursor: pointer;
169
- transition: all var(--wq-transition-fast);
170
- box-shadow: var(--wq-shadow-sm);
171
- }
172
-
173
- .wq-slider-input::-webkit-slider-thumb:hover {
174
- background: var(--wq-color-primary-hover);
175
- transform: scale(1.1);
176
- }
177
-
178
- .wq-slider-input::-webkit-slider-thumb:active {
179
- transform: scale(0.95);
180
- }
181
-
182
- .wq-slider-input::-moz-range-thumb {
183
- width: var(--wq-slider-thumb-size);
184
- height: var(--wq-slider-thumb-size);
185
- border-radius: var(--wq-radius-full);
186
- background: var(--wq-color-primary);
187
- cursor: pointer;
188
- border: none;
189
- transition: all var(--wq-transition-fast);
190
- box-shadow: var(--wq-shadow-sm);
191
- }
192
-
193
- .wq-slider-input::-moz-range-thumb:hover {
194
- background: var(--wq-color-primary-hover);
195
- transform: scale(1.1);
196
- }
197
-
198
- .wq-slider-input::-moz-range-thumb:active {
199
- transform: scale(0.95);
200
- }
201
-
202
- .wq-slider-input:focus {
203
- outline: none;
204
- }
205
-
206
- .wq-slider-input:focus::-webkit-slider-thumb {
207
- box-shadow: var(--wq-shadow-focus);
208
- }
209
-
210
- .wq-slider-input:focus::-moz-range-thumb {
211
- box-shadow: var(--wq-shadow-focus);
212
- }
213
-
214
- .wq-slider-value-display {
215
- text-align: center;
216
- margin-top: var(--wq-space-lg);
217
- font-size: var(--wq-font-size-xl);
218
- font-weight: var(--wq-font-weight-semibold);
219
- color: var(--wq-color-text-primary);
220
- border: 2px solid var(--wq-color-border);
221
- border-radius: var(--wq-radius-md);
222
- }
223
-
224
- .wq-slider-value {
225
- font-size: 2rem;
226
- font-weight: 700;
227
- color: var(--wq-color-primary);
228
- font-variant-numeric: tabular-nums;
229
- }
230
-
231
- .wq-slider-unit {
232
- font-size: var(--wq-font-size-base);
233
- font-weight: var(--wq-font-weight-normal);
234
- color: var(--wq-color-text-tertiary);
235
- margin-left: var(--wq-space-sm);
236
- }
237
-
238
- .wq-slider-range-labels {
239
- display: flex;
240
- justify-content: space-between;
241
- margin-top: var(--wq-space-sm);
242
- font-size: var(--wq-font-size-sm);
243
- color: var(--wq-color-text-tertiary);
244
- }
245
-
246
- .wq-slider-min,
247
- .wq-slider-max {
248
- font-weight: var(--wq-font-weight-medium);
249
- }
250
-
251
- /* === Unsupported Type === */
252
- .wq-unsupported-type {
253
- padding: var(--wq-space-lg);
254
- background-color: var(--wq-color-warning-50);
255
- border: var(--wq-border-width) solid var(--wq-color-warning-500);
256
- border-radius: var(--wq-radius-md);
257
- color: var(--wq-color-warning-800);
258
- font-weight: var(--wq-font-weight-medium);
259
- font-size: var(--wq-font-size-base);
260
- }
261
-
262
- /* === Progress Bar === */
263
- .wq-progress-bar {
264
- width: 100%;
265
- height: var(--wq-progress-height);
266
- background-color: var(--wq-color-border);
267
- border-radius: var(--wq-radius-sm);
268
- overflow: hidden;
269
- margin-bottom: var(--wq-space-lg);
270
- }
271
-
272
- .wq-progress-fill {
273
- height: 100%;
274
- background-color: var(--wq-color-primary);
275
- transition: width var(--wq-transition-slow);
276
- }
277
-
278
- /* === Loading and Error States === */
279
- .wq-loading,
280
- .wq-error {
281
- display: flex;
282
- justify-content: center;
283
- align-items: center;
284
- min-height: 20rem;
285
- font-size: var(--wq-font-size-lg);
286
- color: var(--wq-color-text-tertiary);
287
- }
288
-
289
- .wq-error {
290
- color: var(--wq-color-error);
291
- font-weight: var(--wq-font-weight-medium);
292
- }
293
-
294
- /* === Accessibility === */
295
- .wq-question-input:focus-visible,
296
- .wq-choice-option:focus-within {
297
- outline: var(--wq-border-width) solid var(--wq-color-border-focus);
298
- outline-offset: 2px;
299
- }
300
-
301
- /* === Responsive Design === */
302
- @media (max-width: 640px) {
303
- .wq-question-container {
304
- padding: var(--wq-space-md);
305
- }
306
-
307
- .wq-question-text {
308
- font-size: var(--wq-font-size-base);
309
- }
310
-
311
- .wq-choice-option {
312
- padding: var(--wq-space-sm) var(--wq-space-md);
313
- }
314
-
315
- .wq-slider-value-display {
316
- font-size: var(--wq-font-size-lg);
317
- }
318
- }
319
-
320
- /* === Print Styles === */
321
- @media print {
322
- .wq-question-container {
323
- page-break-inside: avoid;
324
- break-inside: avoid;
325
- }
326
-
327
- .wq-choice-option.wq-selected {
328
- border-color: #000;
329
- background-color: #f0f0f0;
330
- }
331
- }
332
-
333
-
334
- /* Debug Section Styles
335
- * These styles are designed to work with the questionnaire library's CSS variables
336
- * and can be easily moved to the shared package.
337
- */
338
-
339
- .wq-debug-section {
340
- margin-top: 1.5rem;
341
- padding: 1rem;
342
- background-color: var(--wq-color-background);
343
- border: 1px solid var(--wq-color-border);
344
- border-radius: var(--wq-radius-md);
345
- }
346
-
347
- .wq-loinc-link-section {
348
- margin-bottom: 1rem;
349
- padding: 0.75rem;
350
- }
351
-
352
- .wq-loinc-link {
353
- color: var(--wq-color-primary);
354
- text-decoration: none;
355
- font-weight: 600;
356
- font-size: 0.9rem;
357
- display: inline-flex;
358
- align-items: center;
359
- gap: 0.5rem;
360
- transition: all 0.2s ease;
361
- }
362
-
363
- .wq-loinc-link:hover {
364
- text-decoration: underline;
365
- }
366
-
367
- .wq-loinc-link::after {
368
- content: "↗";
369
- font-size: 1rem;
370
- }
371
-
372
- .wq-debug-title {
373
- font-size: 0.85rem;
374
- font-weight: 600;
375
- color: var(--wq-color-primary);
376
- margin-bottom: 0.5rem;
377
- text-transform: uppercase;
378
- letter-spacing: 0.5px;
379
- }
380
-
381
- .wq-debug-json {
382
- margin: 0;
383
- padding: 0.75rem;
384
- background: rgba(0, 0, 0, 0.6);
385
- border: 1px solid rgba(255, 255, 255, 0.35);
386
- border-radius: 4px;
387
- font-family: 'Courier New', Courier, monospace;
388
- font-size: 0.85rem;
389
- color: #e0e0e0;
390
- overflow-x: auto;
391
- white-space: pre;
392
- line-height: 1.5;
393
- margin-bottom: 1rem;
394
- }
395
-
396
- .wq-debug-json:last-child {
397
- margin-bottom: 0;
398
- }
399
-
400
- /* Collapsible Debug Section Styles */
401
- .wq-debug-collapsible {
402
- margin-bottom: 0.75rem;
403
- }
404
-
405
- .wq-debug-collapsible:last-child {
406
- margin-bottom: 0;
407
- }
408
-
409
- .wq-debug-collapsible-header {
410
- width: 100%;
411
- display: flex;
412
- align-items: center;
413
- gap: 0.5rem;
414
- padding: 0.75rem;
415
- background: rgba(255, 165, 0, 0.15);
416
- border: 1px solid rgba(255, 165, 0, 0.3);
417
- border-radius: var(--wq-radius-md);
418
- cursor: pointer;
419
- transition: all 0.2s ease;
420
- font-family: inherit;
421
- font-size: 0.85rem;
422
- color: var(--wq-color-text-primary);
423
- text-align: left;
424
- }
425
-
426
- .wq-debug-collapsible-header:hover {
427
- background: rgba(255, 165, 0, 0.25);
428
- border-color: rgba(255, 165, 0, 0.5);
429
- }
430
-
431
- .wq-debug-collapsible-header:active {
432
- transform: scale(0.98);
433
- }
434
-
435
- .wq-debug-collapsible-header .chevron {
436
- font-size: 0.7rem;
437
- color: var(--wq-color-primary);
438
- transition: transform 0.2s ease;
439
- display: inline-block;
440
- }
441
-
442
- .wq-debug-collapsible-header .chevron.open {
443
- transform: rotate(90deg);
444
- }
445
-
446
- .wq-debug-collapsible-header .debug-title {
447
- margin: 0;
448
- flex: 1;
449
- }
450
-
451
- .wq-debug-collapsible .debug-json {
452
- margin-top: 0.5rem;
453
- margin-bottom: 0;
454
- animation: wq-slideDown 0.2s ease-out;
455
- }
456
-
457
- @keyframes wq-slideDown {
458
- from {
459
- opacity: 0;
460
- transform: translateY(-10px);
461
- }
462
- to {
463
- opacity: 1;
464
- transform: translateY(0);
465
- }
466
- }
467
-
@@ -1,130 +0,0 @@
1
- /**
2
- * Welshare Questionnaire Design Tokens
3
- *
4
- * These CSS custom properties can be overridden to customize the questionnaire appearance.
5
- * Compatible with design token frameworks and theme systems.
6
- */
7
-
8
- :root {
9
- /* === Spacing === */
10
- --wq-space-xs: 0.25rem;
11
- --wq-space-sm: 0.5rem;
12
- --wq-space-md: 0.75rem;
13
- --wq-space-lg: 1rem;
14
- --wq-space-xl: 1.5rem;
15
- --wq-space-2xl: 2rem;
16
-
17
- /* === Font Sizes === */
18
- --wq-font-size-sm: 0.875rem;
19
- --wq-font-size-base: 1rem;
20
- --wq-font-size-lg: 1.125rem;
21
- --wq-font-size-xl: 1.5rem;
22
-
23
- /* === Font Weights === */
24
- --wq-font-weight-normal: 400;
25
- --wq-font-weight-medium: 500;
26
- --wq-font-weight-semibold: 600;
27
- --wq-font-weight-bold: 700;
28
-
29
- /* === Border Radius === */
30
- --wq-radius-sm: 0.25rem;
31
- --wq-radius-md: 0.5rem;
32
- --wq-radius-lg: 0.75rem;
33
- --wq-radius-full: 9999px;
34
-
35
- /* === Border Widths === */
36
- --wq-border-width: 2px;
37
-
38
- /* === Transitions === */
39
- --wq-transition-fast: 150ms ease;
40
- --wq-transition-base: 200ms ease;
41
- --wq-transition-slow: 300ms ease;
42
-
43
- /* === Colors - Neutral === */
44
- --wq-color-gray-50: #f9fafb;
45
- --wq-color-gray-100: #f3f4f6;
46
- --wq-color-gray-200: #e5e7eb;
47
- --wq-color-gray-300: #d1d5db;
48
- --wq-color-gray-400: #9ca3af;
49
- --wq-color-gray-500: #6b7280;
50
- --wq-color-gray-600: #4b5563;
51
- --wq-color-gray-700: #374151;
52
- --wq-color-gray-800: #1f2937;
53
- --wq-color-gray-900: #111827;
54
-
55
- /* === Colors - Primary === */
56
- --wq-color-primary-50: #eff6ff;
57
- --wq-color-primary-100: #dbeafe;
58
- --wq-color-primary-200: #bfdbfe;
59
- --wq-color-primary-500: #3b82f6;
60
- --wq-color-primary-600: #2563eb;
61
- --wq-color-primary-700: #1d4ed8;
62
-
63
- /* === Colors - Error === */
64
- --wq-color-error-50: #fef2f2;
65
- --wq-color-error-500: #ef4444;
66
- --wq-color-error-600: #dc2626;
67
-
68
- /* === Colors - Warning === */
69
- --wq-color-warning-50: #fef3c7;
70
- --wq-color-warning-500: #f59e0b;
71
- --wq-color-warning-800: #92400e;
72
-
73
- /* === Semantic Colors === */
74
- --wq-color-background: var(--wq-color-gray-50);
75
- --wq-color-surface: #ffffff;
76
- --wq-color-border: var(--wq-color-gray-200);
77
- --wq-color-border-hover: var(--wq-color-gray-400);
78
- --wq-color-border-focus: var(--wq-color-primary-500);
79
-
80
- --wq-color-text-primary: var(--wq-color-gray-900);
81
- --wq-color-text-secondary: var(--wq-color-gray-700);
82
- --wq-color-text-tertiary: var(--wq-color-gray-500);
83
- --wq-color-text-disabled: var(--wq-color-gray-400);
84
- --wq-color-text-placeholder: var(--wq-color-gray-400);
85
-
86
- --wq-color-primary: var(--wq-color-primary-500);
87
- --wq-color-primary-hover: var(--wq-color-primary-600);
88
- --wq-color-primary-focus: var(--wq-color-primary-50);
89
-
90
- --wq-color-error: var(--wq-color-error-500);
91
- --wq-color-error-bg: var(--wq-color-error-50);
92
- --wq-color-error-border: var(--wq-color-error-500);
93
-
94
- --wq-color-selected: var(--wq-color-primary-50);
95
- --wq-color-selected-border: var(--wq-color-primary-500);
96
-
97
- /* === Shadows === */
98
- --wq-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
99
- --wq-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
100
- --wq-shadow-focus: 0 0 0 3px var(--wq-color-primary-focus);
101
-
102
- /* === Component Specific === */
103
- --wq-input-height: 2.5rem;
104
- --wq-input-padding-x: var(--wq-space-lg);
105
- --wq-input-padding-y: var(--wq-space-md);
106
-
107
- --wq-choice-padding-x: var(--wq-space-lg);
108
- --wq-choice-padding-y: var(--wq-space-md);
109
-
110
- --wq-question-gap: var(--wq-space-xl);
111
-
112
- --wq-slider-height: 0.5rem;
113
- --wq-slider-thumb-size: 1.5rem;
114
-
115
- --wq-progress-height: 0.5rem;
116
- }
117
-
118
- /* Dark mode support (optional) */
119
- @media (prefers-color-scheme: dark) {
120
- :root {
121
- --wq-color-background: var(--wq-color-gray-900);
122
- --wq-color-surface: var(--wq-color-gray-800);
123
- --wq-color-border: var(--wq-color-gray-700);
124
- --wq-color-border-hover: var(--wq-color-gray-600);
125
-
126
- --wq-color-text-primary: var(--wq-color-gray-100);
127
- --wq-color-text-secondary: var(--wq-color-gray-300);
128
- --wq-color-text-tertiary: var(--wq-color-gray-400);
129
- }
130
- }