react-feedback-surveys 1.1.0 → 1.3.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.
- package/README.md +134 -2
- package/dist/index.css +1 -1
- package/dist/index.d.ts +9 -0
- package/dist/index.js +515 -501
- package/package.json +8 -7
package/README.md
CHANGED
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
* [CES7 (Customer Effort Score, 7-Point Scale)](#ces7-customer-effort-score-7-point-scale)
|
|
22
22
|
- [Layout Components](#layout-components)
|
|
23
23
|
* [Popup](#popup)
|
|
24
|
+
* [Surface](#surface)
|
|
24
25
|
- [Props](#props)
|
|
25
26
|
* [Shared Props](#shared-props)
|
|
26
27
|
* [Scale Style Options](#scale-style-options)
|
|
@@ -245,6 +246,39 @@ import 'react-feedback-surveys/index.css';
|
|
|
245
246
|
|
|
246
247
|
For more examples, check out the Storybook stories (e.g., `CSAT5Survey.stories.tsx`, `CSAT2Survey.stories.tsx`).
|
|
247
248
|
|
|
249
|
+
### Surface
|
|
250
|
+
|
|
251
|
+
The `<Surface>` component is a basic container wrapper that provides consistent styling for survey content. It's used internally by the Popup component and can be used standalone to display surveys with a card-like appearance.
|
|
252
|
+
|
|
253
|
+
The Surface component provides:
|
|
254
|
+
- Background color with depth/elevation (box shadow)
|
|
255
|
+
- Rounded corners (8px border radius)
|
|
256
|
+
- Responsive padding that adapts to mobile devices
|
|
257
|
+
|
|
258
|
+
#### Usage
|
|
259
|
+
|
|
260
|
+
```tsx
|
|
261
|
+
import { Surface, CSAT5Survey } from 'react-feedback-surveys';
|
|
262
|
+
import 'react-feedback-surveys/index.css';
|
|
263
|
+
|
|
264
|
+
<Surface className="custom-surface">
|
|
265
|
+
<CSAT5Survey
|
|
266
|
+
scaleStyle="stars"
|
|
267
|
+
question="How would you rate your satisfaction?"
|
|
268
|
+
onScoreSubmit={({ value }) => {/* ... */}}
|
|
269
|
+
/>
|
|
270
|
+
</Surface>
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
#### Props
|
|
274
|
+
|
|
275
|
+
| Prop | Type | Required | Default | Description |
|
|
276
|
+
|-------------|-------------------|----------|---------|----------------------------------------------------|
|
|
277
|
+
| `className` | `string` | - | - | Additional CSS class name for the surface container.|
|
|
278
|
+
| `children` | `React.ReactNode` | - | - | Content to render inside the surface. |
|
|
279
|
+
|
|
280
|
+
The Surface component uses the `--ft-surface-padding` and `--ft-surface-padding-mobile` CSS variables for responsive padding.
|
|
281
|
+
|
|
248
282
|
## Props
|
|
249
283
|
|
|
250
284
|
Most props are shared across all survey widgets. Each widget differs only in its `scaleStyle` values.
|
|
@@ -370,6 +404,12 @@ You can override colors and fonts via CSS variables:
|
|
|
370
404
|
|
|
371
405
|
/* Z-index for popup overlay positioning */
|
|
372
406
|
--ft-popup-z-index: 49;
|
|
407
|
+
|
|
408
|
+
/* Padding for Surface component container (desktop) */
|
|
409
|
+
--ft-surface-padding: 24px;
|
|
410
|
+
|
|
411
|
+
/* Padding for Surface component container on mobile devices (max-width: 400px) */
|
|
412
|
+
--ft-surface-padding-mobile: 20px;
|
|
373
413
|
}
|
|
374
414
|
|
|
375
415
|
/* Use with hsl() function: */
|
|
@@ -378,6 +418,100 @@ You can override colors and fonts via CSS variables:
|
|
|
378
418
|
/* box-shadow: 0 0 10px hsl(var(--ft-color-shadow) / 20%); */
|
|
379
419
|
```
|
|
380
420
|
|
|
421
|
+
#### Dark Theme Example
|
|
422
|
+
|
|
423
|
+
The library uses CSS variables for all colors, making it easy to implement custom themes including dark mode. The library itself is theme-agnostic - you control how to override the variables.
|
|
424
|
+
|
|
425
|
+
**Example dark theme color palette:**
|
|
426
|
+
|
|
427
|
+
Here's an example of dark theme colors that work well with the survey components:
|
|
428
|
+
|
|
429
|
+
```css
|
|
430
|
+
/* Example: Class-based dark theme */
|
|
431
|
+
.dark {
|
|
432
|
+
--ft-color-text: 210 11% 88%;
|
|
433
|
+
--ft-color-bg: 220 13% 13%;
|
|
434
|
+
--ft-color-muted: 214 10% 60%;
|
|
435
|
+
--ft-color-error: 14 90% 62%;
|
|
436
|
+
--ft-color-border: 217 10% 28%;
|
|
437
|
+
--ft-color-outline: 216 12% 45%;
|
|
438
|
+
--ft-color-shadow: 0 0% 0%;
|
|
439
|
+
--ft-color-control: 218 12% 19%;
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
/* Alternative: Using media query */
|
|
443
|
+
@media (prefers-color-scheme: dark) {
|
|
444
|
+
:root {
|
|
445
|
+
--ft-color-text: 210 11% 88%;
|
|
446
|
+
--ft-color-bg: 220 13% 13%;
|
|
447
|
+
/* ... other variables */
|
|
448
|
+
}
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
/* Alternative: Data attribute based */
|
|
452
|
+
[data-theme="dark"] {
|
|
453
|
+
--ft-color-text: 210 11% 88%;
|
|
454
|
+
--ft-color-bg: 220 13% 13%;
|
|
455
|
+
/* ... other variables */
|
|
456
|
+
}
|
|
457
|
+
```
|
|
458
|
+
|
|
459
|
+
**Implementation example with React:**
|
|
460
|
+
|
|
461
|
+
```tsx
|
|
462
|
+
import { CSAT5Survey } from 'react-feedback-surveys';
|
|
463
|
+
import 'react-feedback-surveys/index.css';
|
|
464
|
+
import { useEffect } from 'react';
|
|
465
|
+
|
|
466
|
+
function App() {
|
|
467
|
+
useEffect(() => {
|
|
468
|
+
// Example: Apply theme based on system preference
|
|
469
|
+
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
470
|
+
|
|
471
|
+
if (isDarkMode) {
|
|
472
|
+
document.documentElement.classList.add('dark');
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
// Listen for system preference changes
|
|
476
|
+
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
477
|
+
const handleChange = (e: MediaQueryListEvent) => {
|
|
478
|
+
document.documentElement.classList.toggle('dark', e.matches);
|
|
479
|
+
};
|
|
480
|
+
|
|
481
|
+
mediaQuery.addEventListener('change', handleChange);
|
|
482
|
+
return () => mediaQuery.removeEventListener('change', handleChange);
|
|
483
|
+
}, []);
|
|
484
|
+
|
|
485
|
+
return (
|
|
486
|
+
<CSAT5Survey
|
|
487
|
+
scaleStyle="emoji"
|
|
488
|
+
question="How satisfied are you with our product?"
|
|
489
|
+
onScoreSubmit={({ value }) => console.log('Score:', value)}
|
|
490
|
+
/>
|
|
491
|
+
);
|
|
492
|
+
}
|
|
493
|
+
```
|
|
494
|
+
|
|
495
|
+
**Manual theme toggle:**
|
|
496
|
+
|
|
497
|
+
```typescript
|
|
498
|
+
// Toggle between light and dark
|
|
499
|
+
function toggleTheme() {
|
|
500
|
+
document.documentElement.classList.toggle('dark');
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
// Set specific theme
|
|
504
|
+
function setTheme(theme: 'light' | 'dark') {
|
|
505
|
+
document.documentElement.classList.toggle('dark', theme === 'dark');
|
|
506
|
+
}
|
|
507
|
+
```
|
|
508
|
+
|
|
509
|
+
**Notes:**
|
|
510
|
+
- The library only uses CSS variables - how you define them is up to you
|
|
511
|
+
- Choose any approach: class-based, data attributes, media queries, or CSS-in-JS
|
|
512
|
+
- The example colors provide WCAG AA compliant contrast ratios
|
|
513
|
+
- Emoji and icon colors remain unchanged regardless of theme
|
|
514
|
+
|
|
381
515
|
Or wrap the survey in your own class and target the generated markup.
|
|
382
516
|
|
|
383
517
|
For deeper customization strategies, see the section below.
|
|
@@ -472,8 +606,6 @@ npm run build
|
|
|
472
606
|
## Roadmap
|
|
473
607
|
|
|
474
608
|
- [ ] Custom emoji & icon support
|
|
475
|
-
- [ ] Dark theme support
|
|
476
|
-
- [ ] RTL language support
|
|
477
609
|
|
|
478
610
|
## Changelog
|
|
479
611
|
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root,:host{--ft-color-text: 30 8% 14%;--ft-color-bg: 0 0% 100%;--ft-color-muted: 222 11% 46%;--ft-color-error: 32 95% 44%;--ft-color-border: 214 14% 83%;--ft-color-outline: 218 14% 65%;--ft-color-shadow: 0 0% 0%;--ft-color-control: 214 20% 96%;--ft-popup-z-index: 49}body{margin:0;box-sizing:border-box;padding:0}*,*:before,*:after{margin:0;box-sizing:border-box;padding:0}._base_e6url_1{position:fixed;margin:0;box-sizing:border-box;max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);padding:0;overflow:auto;background-color:hsl(var(--ft-color-bg)/100%);border-radius:8px;box-shadow:0 0 10px hsl(var(--ft-color-shadow)/20%);transform-origin:50% 100%;z-index:var(--ft-popup-z-index)}._animated_e6url_16{opacity:0;animation:_fadeForward_e6url_1 .12s ease-in-out forwards}@keyframes _fadeForward_e6url_1{0%{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}._topLeft_e6url_31{top:24px;left:24px}._top_e6url_31{top:24px}._topRight_e6url_40{top:24px;right:24px}._right_e6url_45{top:50%;right:24px;transform:translateY(-50%)}._bottomRight_e6url_51{right:24px;bottom:24px}._bottom_e6url_51{bottom:24px}._bottomLeft_e6url_60{bottom:24px;left:24px}._left_e6url_65{left:24px}._content_e6url_69{position:relative;padding:24px}@media(max-width:400px){._content_e6url_69{padding:20px}}._close_e6url_79{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._close_e6url_79:disabled{cursor:default}._close_e6url_79{position:absolute;top:24px;right:24px;width:24px;height:24px;color:hsl(var(--ft-color-outline)/100%);transition:color .15s}._close_e6url_79:hover{color:hsl(var(--ft-color-text)/100%)}@media(max-width:400px){._close_e6url_79{right:20px;top:20px}}._close_e6url_79:before,._close_e6url_79:after{position:absolute;top:50%;left:50%;content:"";background-color:currentcolor;border-radius:1px;transform:rotate(45deg)}._close_e6url_79:before{margin:-1px 0 0 -8px;width:16px;height:2px}._close_e6url_79:after{margin:-8px 0 0 -1px;width:2px;height:16px}._choices_1fbp9_1{margin:0 0 12px}._choice_1fbp9_1{display:flex}._choice_1fbp9_1+._choice_1fbp9_1{margin-top:12px}._label_1fbp9_12{position:relative;display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}._sr_1fbp9_21{position:absolute;margin:-1px;width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap;border-width:0;clip:rect(0,0,0,0)}._checkbox_1fbp9_33{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}._check_1fbp9_33{height:20px;min-width:20px;border:1px solid hsl(var(--ft-color-border)/100%);border-radius:4px}._label_1fbp9_12:hover ._check_1fbp9_33{border-color:hsl(var(--ft-color-text)/100%)}._checkbox_1fbp9_33:checked+._check_1fbp9_33{position:relative;background-color:hsl(var(--ft-color-text)/100%);border-color:hsl(var(--ft-color-text)/100%)}._checkbox_1fbp9_33:checked+._check_1fbp9_33:after{position:absolute;top:50%;left:50%;width:10px;height:7px;content:"";border:2px solid;border-color:transparent transparent hsl(var(--ft-color-bg)/100%) hsl(var(--ft-color-bg)/100%);transform:translate(-45%,-75%) rotate(-45deg);pointer-events:none}._input_1fbp9_70{margin-top:8px;height:32px}._textarea_1fbp9_75{height:192px}._input_1fbp9_70,._textarea_1fbp9_75{width:100%;padding:8px 12px;font-size:16px;line-height:1.5;background-color:hsl(var(--ft-color-bg)/100%);border:1px solid hsl(var(--ft-color-border)/100%);border-radius:8px;outline:0 solid hsl(var(--ft-color-outline)/14%);resize:none;transition:background-color .15s,border-color .15s,outline-width .2s}._input_1fbp9_70:focus,._textarea_1fbp9_75:focus{outline:4px solid hsl(var(--ft-color-outline)/14%)}._input_1fbp9_70._invalid_1fbp9_96,._textarea_1fbp9_75._invalid_1fbp9_96{border-color:hsl(var(--ft-color-error)/100%)}._submit_1fbp9_101{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._submit_1fbp9_101:disabled{cursor:default}._submit_1fbp9_101{padding:8px 32px;font-size:16px;font-weight:400;text-align:center;color:hsl(var(--ft-color-bg)/100%);background-color:hsl(var(--ft-color-text)/100%);border-radius:8px;transition:opacity .2s}._submit_1fbp9_101:hover{opacity:.85}._submit_1fbp9_101{margin-top:16px;width:100%}._success_1fbp9_133{padding:16px 0 32px;font-size:16px;font-weight:600;line-height:1.5;text-align:center}._base_1ilpx_1{padding:0 24px;text-align:center}._icon_1ilpx_6{display:inline-block}._base_rnauy_1{padding:0;font-family:Helvetica Neue,Arial Nova,Helvetica,Arial,sans-serif;color:hsl(var(--ft-color-text)/100%)}._head_rnauy_7{display:flex;gap:8px;padding:0 32px 20px 0}._title_rnauy_13{flex:1 0;font-family:inherit;font-size:16px;font-weight:500;font-style:normal;line-height:1.4}._base_1o2c3_1{margin:12px 0 0;display:flex;justify-content:space-between}._label_1o2c3_7{flex:0 0 50%;max-width:50%;font-size:14px;line-height:1.4286;color:hsl(var(--ft-color-muted)/100%)}._label_1o2c3_7:first-child{text-align:left}._label_1o2c3_7:last-child{text-align:right}._list_1kcla_1{display:flex;justify-content:center;gap:16px}._icon_1kcla_7{transition:transform .12s ease;transform:scale(1)}._button_1kcla_12{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1kcla_12:disabled{cursor:default}._button_1kcla_12{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--ft-color-control)/100%);border-radius:50%}@media(max-width:400px){._button_1kcla_12{width:48px;height:48px}}._button_1kcla_12:hover ._icon_1kcla_7{transform:scale(1.15)}._list_57k0i_1{display:flex;justify-content:center;gap:16px}._icon_57k0i_7{transition:transform .12s ease;transform:scale(1)}._button_57k0i_12{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_57k0i_12:disabled{cursor:default}._button_57k0i_12{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--ft-color-control)/100%);border-radius:50%}._button_57k0i_12:hover ._icon_57k0i_7{transform:scale(1.15)}._base_1oxyv_1{width:100%;max-width:310px}._list_13r41_1{display:flex;justify-content:space-between}._icon_13r41_6{transition:transform .12s ease;transform:scale(1)}._button_13r41_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_13r41_11:disabled{cursor:default}._button_13r41_11{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--ft-color-control)/100%);border-radius:50%}@media(max-width:400px){._button_13r41_11{width:48px;height:48px}}._button_13r41_11:hover ._icon_13r41_6{transform:scale(1.15)}._list_bzyvn_1{display:flex;justify-content:space-between}._button_bzyvn_6{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_bzyvn_6:disabled{cursor:default}._button_bzyvn_6{display:flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:18px;font-weight:700;color:hsl(var(--ft-color-muted)/100%);background-color:hsl(var(--ft-color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--ft-color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_bzyvn_6:hover{color:hsl(var(--ft-color-text)/100%);box-shadow:0 0 0 2px hsl(var(--ft-color-control)/100%)}._list_mtyej_1{display:flex;justify-content:space-between}._icon_mtyej_6{transition:transform .12s ease;transform:scale(1)}._button_mtyej_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_mtyej_11:disabled{cursor:default}._button_mtyej_11{display:flex;align-items:center;justify-content:center;width:40px;height:40px}._button_mtyej_11:hover ._icon_mtyej_6{transform:scale(1.1)}._base_14lcg_1{width:100%;max-width:320px}._list_1n6j6_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:575px){._list_1n6j6_1{flex-direction:column-reverse;gap:4px}}._button_1n6j6_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1n6j6_13:disabled{cursor:default}._button_1n6j6_13{display:inline-block;width:40px;height:40px;font-size:18px;font-weight:700;text-align:center;color:hsl(var(--ft-color-muted)/100%);background-color:hsl(var(--ft-color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--ft-color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_1n6j6_13:hover{color:hsl(var(--ft-color-text)/100%);box-shadow:0 0 0 2px hsl(var(--ft-color-control)/100%)}@media(max-width:575px){._button_1n6j6_13:hover{box-shadow:none}}._button_1n6j6_13 ._score_1n6j6_49{display:inline}._button_1n6j6_13 ._label_1n6j6_52{display:none}@media(max-width:575px){._button_1n6j6_13 ._label_1n6j6_52{display:inline}}@media(max-width:575px){._button_1n6j6_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:575px){._labels_1n6j6_72{display:none}}._base_cn8p7_1{width:100%;max-width:340px}._list_1cqoz_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:575px){._list_1cqoz_1{flex-direction:column-reverse;gap:4px}}._button_1cqoz_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1cqoz_13:disabled{cursor:default}._button_1cqoz_13{display:block;width:40px;height:40px;font-size:18px;font-weight:700;text-align:center;color:hsl(var(--ft-color-muted)/100%);background-color:hsl(var(--ft-color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--ft-color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_1cqoz_13:hover{color:hsl(var(--ft-color-text)/100%);box-shadow:0 0 0 2px hsl(var(--ft-color-control)/100%)}@media(max-width:575px){._button_1cqoz_13:hover{box-shadow:none}}._button_1cqoz_13 ._score_1cqoz_49{display:inline}._button_1cqoz_13 ._label_1cqoz_52{display:none}@media(max-width:575px){._button_1cqoz_13 ._label_1cqoz_52{display:inline}}@media(max-width:575px){._button_1cqoz_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:575px){._labels_1cqoz_72{display:none}}._base_1xgqd_1{width:100%;max-width:520px}
|
|
1
|
+
:root,:host{--ft-color-text: 30 8% 14%;--ft-color-bg: 0 0% 100%;--ft-color-muted: 222 11% 46%;--ft-color-error: 32 95% 44%;--ft-color-border: 214 14% 83%;--ft-color-outline: 218 14% 65%;--ft-color-shadow: 0 0% 0%;--ft-color-control: 214 20% 96%;--ft-popup-z-index: 49;--ft-surface-padding: 24px;--ft-surface-padding-mobile: 20px}body{margin:0;box-sizing:border-box;padding:0}*,*:before,*:after{margin:0;box-sizing:border-box;padding:0}._base_1nuw0_1{display:inline-block;position:relative;padding:var(--ft-surface-padding);overflow:auto;background-color:hsl(var(--ft-color-bg)/100%);border-radius:8px;box-shadow:0 0 10px hsl(var(--ft-color-shadow)/20%)}@media(max-width:400px){._base_1nuw0_1{padding:var(--ft-surface-padding-mobile)}}._base_xxwd2_1{position:fixed;margin:0;box-sizing:border-box;max-width:calc(100vw - var(--ft-surface-padding) * 2);max-height:calc(100vh - var(--ft-surface-padding) * 2);transform-origin:50% 100%;z-index:var(--ft-popup-z-index)}@media(max-width:400px){._base_xxwd2_1{max-width:calc(100vw - var(--ft-surface-padding-mobile) * 2);max-height:calc(100vh - var(--ft-surface-padding-mobile) * 2)}}._animated_xxwd2_17{opacity:0;animation:_fadeForward_xxwd2_1 .12s ease-in-out forwards}@keyframes _fadeForward_xxwd2_1{0%{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}._topLeft_xxwd2_32{top:24px;left:24px}._top_xxwd2_32{top:24px}._topRight_xxwd2_41{top:24px;right:24px}._right_xxwd2_46{top:50%;right:24px;transform:translateY(-50%)}._bottomRight_xxwd2_52{right:24px;bottom:24px}._bottom_xxwd2_52{bottom:24px}._bottomLeft_xxwd2_61{bottom:24px;left:24px}._left_xxwd2_66{left:24px}._close_xxwd2_70{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._close_xxwd2_70:disabled{cursor:default}._close_xxwd2_70{position:absolute;top:var(--ft-surface-padding);inset-inline-end:var(--ft-surface-padding);width:24px;height:24px;color:hsl(var(--ft-color-outline)/100%);transition:color .15s}@media(max-width:400px){._close_xxwd2_70{top:var(--ft-surface-padding-mobile);inset-inline-end:var(--ft-surface-padding-mobile)}}._close_xxwd2_70:hover{color:hsl(var(--ft-color-text)/100%)}._close_xxwd2_70:before,._close_xxwd2_70:after{position:absolute;top:50%;left:50%;content:"";background-color:currentcolor;border-radius:1px;transform:rotate(45deg)}._close_xxwd2_70:before{margin:-1px 0 0 -8px;width:16px;height:2px}._close_xxwd2_70:after{margin:-8px 0 0 -1px;width:2px;height:16px}._choices_1fbp9_1{margin:0 0 12px}._choice_1fbp9_1{display:flex}._choice_1fbp9_1+._choice_1fbp9_1{margin-top:12px}._label_1fbp9_12{position:relative;display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}._sr_1fbp9_21{position:absolute;margin:-1px;width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap;border-width:0;clip:rect(0,0,0,0)}._checkbox_1fbp9_33{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}._check_1fbp9_33{height:20px;min-width:20px;border:1px solid hsl(var(--ft-color-border)/100%);border-radius:4px}._label_1fbp9_12:hover ._check_1fbp9_33{border-color:hsl(var(--ft-color-text)/100%)}._checkbox_1fbp9_33:checked+._check_1fbp9_33{position:relative;background-color:hsl(var(--ft-color-text)/100%);border-color:hsl(var(--ft-color-text)/100%)}._checkbox_1fbp9_33:checked+._check_1fbp9_33:after{position:absolute;top:50%;left:50%;width:10px;height:7px;content:"";border:2px solid;border-color:transparent transparent hsl(var(--ft-color-bg)/100%) hsl(var(--ft-color-bg)/100%);transform:translate(-45%,-75%) rotate(-45deg);pointer-events:none}._input_1fbp9_70{margin-top:8px;height:32px}._textarea_1fbp9_75{height:192px}._input_1fbp9_70,._textarea_1fbp9_75{width:100%;padding:8px 12px;font-size:16px;line-height:1.5;background-color:hsl(var(--ft-color-bg)/100%);border:1px solid hsl(var(--ft-color-border)/100%);border-radius:8px;outline:0 solid hsl(var(--ft-color-outline)/14%);resize:none;transition:background-color .15s,border-color .15s,outline-width .2s}._input_1fbp9_70:focus,._textarea_1fbp9_75:focus{outline:4px solid hsl(var(--ft-color-outline)/14%)}._input_1fbp9_70._invalid_1fbp9_96,._textarea_1fbp9_75._invalid_1fbp9_96{border-color:hsl(var(--ft-color-error)/100%)}._submit_1fbp9_101{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._submit_1fbp9_101:disabled{cursor:default}._submit_1fbp9_101{padding:8px 32px;font-size:16px;font-weight:400;text-align:center;color:hsl(var(--ft-color-bg)/100%);background-color:hsl(var(--ft-color-text)/100%);border-radius:8px;transition:opacity .2s}._submit_1fbp9_101:hover{opacity:.85}._submit_1fbp9_101{margin-top:16px;width:100%}._success_1fbp9_133{padding:16px 0 32px;font-size:16px;font-weight:600;line-height:1.5;text-align:center}._base_1ilpx_1{padding:0 24px;text-align:center}._icon_1ilpx_6{display:inline-block}._base_1gt2q_1{padding:0;font-family:Helvetica Neue,Arial Nova,Helvetica,Arial,sans-serif;color:hsl(var(--ft-color-text)/100%)}._head_1gt2q_7{display:flex;gap:8px;padding-block:0 20px;padding-inline:0 32px}._title_1gt2q_14{flex:1 0;font-family:inherit;font-size:16px;font-weight:500;font-style:normal;line-height:1.4}._base_1qyw7_1{margin:12px 0 0;display:flex;justify-content:space-between}._label_1qyw7_7{flex:0 0 50%;max-width:50%;font-size:14px;line-height:1.4286;color:hsl(var(--ft-color-muted)/100%)}._label_1qyw7_7:first-child{text-align:start}._label_1qyw7_7:last-child{text-align:end}._list_asa83_1{display:flex;justify-content:center;gap:16px}._icon_asa83_7{transition:transform .12s ease;transform:scale(1)}._button_asa83_12{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_asa83_12:disabled{cursor:default}._button_asa83_12{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--ft-color-control)/100%);border-radius:50%}@media(max-width:400px){._button_asa83_12{width:48px;height:48px}}._button_asa83_12:hover ._icon_asa83_7{transform:scale(1.15)}._button_asa83_12:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._list_1exln_1{display:flex;justify-content:center;gap:16px}._icon_1exln_7{transition:transform .12s ease;transform:scale(1)}._button_1exln_12{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1exln_12:disabled{cursor:default}._button_1exln_12{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--ft-color-control)/100%);border-radius:50%}._button_1exln_12:hover ._icon_1exln_7{transform:scale(1.15)}._button_1exln_12:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._base_1oxyv_1{width:100%;max-width:310px}._list_t1g1q_1{display:flex;justify-content:space-between}._icon_t1g1q_6{transition:transform .12s ease;transform:scale(1)}._button_t1g1q_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_t1g1q_11:disabled{cursor:default}._button_t1g1q_11{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--ft-color-control)/100%);border-radius:50%}@media(max-width:400px){._button_t1g1q_11{width:48px;height:48px}}._button_t1g1q_11:hover ._icon_t1g1q_6{transform:scale(1.15)}._button_t1g1q_11:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._list_yy136_1{display:flex;justify-content:space-between}._button_yy136_6{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_yy136_6:disabled{cursor:default}._button_yy136_6{display:flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:18px;font-weight:700;color:hsl(var(--ft-color-muted)/100%);background-color:hsl(var(--ft-color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--ft-color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_yy136_6:hover{color:hsl(var(--ft-color-text)/100%);box-shadow:0 0 0 2px hsl(var(--ft-color-control)/100%)}._button_yy136_6:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._list_20ac1_1{display:flex;justify-content:space-between}._icon_20ac1_6{transition:transform .12s ease;transform:scale(1)}._button_20ac1_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_20ac1_11:disabled{cursor:default}._button_20ac1_11{display:flex;align-items:center;justify-content:center;width:40px;height:40px}._button_20ac1_11:hover ._icon_20ac1_6{transform:scale(1.1)}._button_20ac1_11:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._base_14lcg_1{width:100%;max-width:320px}._list_1rcbg_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:575px){._list_1rcbg_1{flex-direction:column-reverse;gap:4px}}._button_1rcbg_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1rcbg_13:disabled{cursor:default}._button_1rcbg_13{display:inline-block;width:40px;height:40px;font-size:18px;font-weight:700;text-align:center;color:hsl(var(--ft-color-muted)/100%);background-color:hsl(var(--ft-color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--ft-color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_1rcbg_13:hover{color:hsl(var(--ft-color-text)/100%);box-shadow:0 0 0 2px hsl(var(--ft-color-control)/100%)}@media(max-width:575px){._button_1rcbg_13:hover{box-shadow:none}}._button_1rcbg_13:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._button_1rcbg_13 ._score_1rcbg_52{display:inline}._button_1rcbg_13 ._label_1rcbg_55{display:none}@media(max-width:575px){._button_1rcbg_13 ._label_1rcbg_55{display:inline}}@media(max-width:575px){._button_1rcbg_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:575px){._labels_1rcbg_75{display:none}}._base_cn8p7_1{width:100%;max-width:340px}._list_1vd7e_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:575px){._list_1vd7e_1{flex-direction:column-reverse;gap:4px}}._button_1vd7e_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1vd7e_13:disabled{cursor:default}._button_1vd7e_13{display:block;width:40px;height:40px;font-size:18px;font-weight:700;text-align:center;color:hsl(var(--ft-color-muted)/100%);background-color:hsl(var(--ft-color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--ft-color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_1vd7e_13:hover{color:hsl(var(--ft-color-text)/100%);box-shadow:0 0 0 2px hsl(var(--ft-color-control)/100%)}@media(max-width:575px){._button_1vd7e_13:hover{box-shadow:none}}._button_1vd7e_13:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._button_1vd7e_13 ._score_1vd7e_52{display:inline}._button_1vd7e_13 ._label_1vd7e_55{display:none}@media(max-width:575px){._button_1vd7e_13 ._label_1vd7e_55{display:inline}}@media(max-width:575px){._button_1vd7e_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:575px){._labels_1vd7e_75{display:none}}._base_1xgqd_1{width:100%;max-width:520px}
|
package/dist/index.d.ts
CHANGED
|
@@ -86,6 +86,8 @@ export declare interface SharedSurveyProps {
|
|
|
86
86
|
base?: RootClassNames;
|
|
87
87
|
scale?: ScaleClassNames;
|
|
88
88
|
};
|
|
89
|
+
/** Text direction for RTL/LTR support */
|
|
90
|
+
dir?: 'ltr' | 'rtl' | 'auto';
|
|
89
91
|
/** Main survey question (screen 1) */
|
|
90
92
|
question: string;
|
|
91
93
|
/** Left label for the rating scale */
|
|
@@ -108,6 +110,13 @@ export declare interface SharedSurveyProps {
|
|
|
108
110
|
onFeedbackSubmit?: SurveyCallback;
|
|
109
111
|
}
|
|
110
112
|
|
|
113
|
+
export declare const Surface: React.FC<SurfaceProps>;
|
|
114
|
+
|
|
115
|
+
export declare interface SurfaceProps {
|
|
116
|
+
className?: string;
|
|
117
|
+
children?: React.ReactNode;
|
|
118
|
+
}
|
|
119
|
+
|
|
111
120
|
/**
|
|
112
121
|
* Callback function for survey submission
|
|
113
122
|
* @param payload - The survey data to submit
|