react-feedback-surveys 1.0.0 → 1.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 (5) hide show
  1. package/README.md +132 -7
  2. package/dist/index.css +1 -1
  3. package/dist/index.d.ts +2 -0
  4. package/dist/index.js +564 -549
  5. package/package.json +18 -17
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  [![npm version](https://img.shields.io/npm/v/react-feedback-surveys.svg?style=flat-square)](https://www.npmjs.com/package/react-feedback-surveys)
4
4
  [![npm downloads](https://img.shields.io/npm/dm/react-feedback-surveys.svg?style=flat-square)](https://www.npmjs.com/package/react-feedback-surveys)
5
- [![license](https://img.shields.io/npm/l/react-feedback-surveys.svg?style=flat-square)](https://github.com/your-org/feedback-tools/blob/main/LICENSE)
5
+ [![license](https://img.shields.io/npm/l/react-feedback-surveys.svg?style=flat-square)](https://github.com/feedback-tools-platform/react-feedback-surveys/blob/main/LICENSE)
6
6
  [![bundle size](https://img.shields.io/bundlephobia/minzip/react-feedback-surveys?style=flat-square)](https://bundlephobia.com/package/react-feedback-surveys)
7
7
 
8
8
  > Lightweight, customizable survey widgets to collect user feedback in React apps.
@@ -38,6 +38,7 @@
38
38
  * [Production build](#production-build)
39
39
  - [Roadmap](#roadmap)
40
40
  - [Changelog](#changelog)
41
+ - [Credits](#credits)
41
42
  - [License](#license)
42
43
 
43
44
 
@@ -277,7 +278,7 @@ Invoked immediately when the user selects a score on the rating scale — this c
277
278
  Use it to persist the rating instantly.
278
279
  The actual `value` returned depends on the survey type:
279
280
 
280
- - **CSAT2:** `1–2`
281
+ - **CSAT2:** `0–1`
281
282
  - **CSAT5:** `1–5`
282
283
  - **CES7:** `1–7`
283
284
  - **NPS10:** `0–10`
@@ -343,13 +344,134 @@ You can override colors and fonts via CSS variables:
343
344
 
344
345
  ```css
345
346
  :root {
346
- --ft-color-text: #272522;
347
- --ft-color-muted: #667085;
348
- --ft-control-bg: #F2F4F7;
349
- --ft-shadow-color: rgba(0, 0, 0, 0.2);
347
+ /* Main text color for headings and body text */
348
+ --ft-color-text: 30 8% 14%;
349
+
350
+ /* Background color for survey widgets */
351
+ --ft-color-bg: 0 0% 100%;
352
+
353
+ /* Muted text color for labels and secondary content */
354
+ --ft-color-muted: 222 11% 46%;
355
+
356
+ /* Error color for validation messages */
357
+ --ft-color-error: 32 95% 44%;
358
+
359
+ /* Border color for inputs and containers */
360
+ --ft-color-border: 214 14% 83%;
361
+
362
+ /* Outline color for focused interactive elements */
363
+ --ft-color-outline: 218 14% 65%;
364
+
365
+ /* Shadow color for depth and elevation effects */
366
+ --ft-color-shadow: 0 0% 0%;
367
+
368
+ /* Background color for input controls and buttons */
369
+ --ft-color-control: 214 20% 96%;
370
+
371
+ /* Z-index for popup overlay positioning */
372
+ --ft-popup-z-index: 49;
373
+ }
374
+
375
+ /* Use with hsl() function: */
376
+ /* color: hsl(var(--ft-color-text)); */
377
+ /* background: hsl(var(--ft-color-bg)); */
378
+ /* box-shadow: 0 0 10px hsl(var(--ft-color-shadow) / 20%); */
379
+ ```
380
+
381
+ #### Dark Theme Example
382
+
383
+ 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.
384
+
385
+ **Example dark theme color palette:**
386
+
387
+ Here's an example of dark theme colors that work well with the survey components:
388
+
389
+ ```css
390
+ /* Example: Class-based dark theme */
391
+ .dark {
392
+ --ft-color-text: 210 11% 88%;
393
+ --ft-color-bg: 220 13% 13%;
394
+ --ft-color-muted: 214 10% 60%;
395
+ --ft-color-error: 14 90% 62%;
396
+ --ft-color-border: 217 10% 28%;
397
+ --ft-color-outline: 216 12% 45%;
398
+ --ft-color-shadow: 0 0% 0%;
399
+ --ft-color-control: 218 12% 19%;
400
+ }
401
+
402
+ /* Alternative: Using media query */
403
+ @media (prefers-color-scheme: dark) {
404
+ :root {
405
+ --ft-color-text: 210 11% 88%;
406
+ --ft-color-bg: 220 13% 13%;
407
+ /* ... other variables */
408
+ }
409
+ }
410
+
411
+ /* Alternative: Data attribute based */
412
+ [data-theme="dark"] {
413
+ --ft-color-text: 210 11% 88%;
414
+ --ft-color-bg: 220 13% 13%;
415
+ /* ... other variables */
416
+ }
417
+ ```
418
+
419
+ **Implementation example with React:**
420
+
421
+ ```typescript
422
+ import { CSAT5Survey } from 'react-feedback-surveys';
423
+ import 'react-feedback-surveys/index.css';
424
+ import { useEffect } from 'react';
425
+
426
+ function App() {
427
+ useEffect(() => {
428
+ // Example: Apply theme based on system preference
429
+ const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
430
+
431
+ if (isDarkMode) {
432
+ document.documentElement.classList.add('dark');
433
+ }
434
+
435
+ // Listen for system preference changes
436
+ const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
437
+ const handleChange = (e: MediaQueryListEvent) => {
438
+ document.documentElement.classList.toggle('dark', e.matches);
439
+ };
440
+
441
+ mediaQuery.addEventListener('change', handleChange);
442
+ return () => mediaQuery.removeEventListener('change', handleChange);
443
+ }, []);
444
+
445
+ return (
446
+ <CSAT5Survey
447
+ scaleStyle="emoji"
448
+ question="How satisfied are you with our product?"
449
+ onScoreSubmit={({ value }) => console.log('Score:', value)}
450
+ />
451
+ );
452
+ }
453
+ ```
454
+
455
+ **Manual theme toggle:**
456
+
457
+ ```typescript
458
+ // Toggle between light and dark
459
+ function toggleTheme() {
460
+ document.documentElement.classList.toggle('dark');
461
+ }
462
+
463
+ // Set specific theme
464
+ function setTheme(theme: 'light' | 'dark') {
465
+ document.documentElement.classList.toggle('dark', theme === 'dark');
350
466
  }
351
467
  ```
352
468
 
469
+ **Notes:**
470
+ - The library only uses CSS variables - how you define them is up to you
471
+ - Choose any approach: class-based, data attributes, media queries, or CSS-in-JS
472
+ - The example colors provide WCAG AA compliant contrast ratios
473
+ - Emoji and icon colors remain unchanged regardless of theme
474
+
353
475
  Or wrap the survey in your own class and target the generated markup.
354
476
 
355
477
  For deeper customization strategies, see the section below.
@@ -444,13 +566,16 @@ npm run build
444
566
  ## Roadmap
445
567
 
446
568
  - [ ] Custom emoji & icon support
447
- - [ ] Dark theme support
448
569
  - [ ] RTL language support
449
570
 
450
571
  ## Changelog
451
572
 
452
573
  For a detailed history of changes, see the [Changelog](https://feedback.tools/react-feedback-surveys/changelog).
453
574
 
575
+ ## Credits
576
+
577
+ Emoji icons used in this package are from [Sensa Emoji](https://sensa.co/emoji) — thanks to the Sensa team for creating such a great set of expressive icons.
578
+
454
579
  ## License
455
580
 
456
581
  MIT © [feedback.tools](https://feedback.tools)
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- :root,:host{--ft-color-text: #272522;--ft-color-bg: #FFF;--ft-color-muted: #667085;--ft-control-bg: #F2F4F7;--ft-shadow-color: rgb(0 0 0 / 20%)}body{margin:0;box-sizing:border-box;padding:0}*,*:before,*:after{margin:0;box-sizing:border-box;padding:0}._base_1xl92_1{position:fixed;margin:0;box-sizing:border-box;max-height:calc(100vh - 48px);padding:0;overflow:auto;background-color:var(--ft-color-bg);border-radius:8px;box-shadow:0 0 10px var(--ft-shadow-color);transform-origin:50% 100%}._animated_1xl92_14{opacity:0;animation:_fadeForward_1xl92_1 .12s ease-in-out forwards}@keyframes _fadeForward_1xl92_1{0%{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}._topLeft_1xl92_29{top:24px;left:24px}._top_1xl92_29{top:24px}._topRight_1xl92_38{top:24px;right:24px}._right_1xl92_43{top:50%;right:24px;transform:translateY(-50%)}._bottomRight_1xl92_49{right:24px;bottom:24px}._bottom_1xl92_49{bottom:24px}._bottomLeft_1xl92_58{bottom:24px;left:24px}._left_1xl92_63{left:24px}._content_1xl92_67{position:relative;padding:24px}._close_1xl92_72{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._close_1xl92_72:disabled{cursor:default}._close_1xl92_72{position:absolute;top:24px;right:24px;width:24px;height:24px;color:#98a2b3;transition:color .15s}._close_1xl92_72:hover{color:var(--ft-color-text)}._close_1xl92_72:before,._close_1xl92_72:after{position:absolute;top:50%;left:50%;content:"";background-color:currentcolor;border-radius:1px;transform:rotate(45deg)}._close_1xl92_72:before{margin:-1px 0 0 -8px;width:16px;height:2px}._close_1xl92_72:after{margin:-8px 0 0 -1px;width:2px;height:16px}._choices_1y2fs_1{margin:0 0 12px}._choice_1y2fs_1{display:flex}._choice_1y2fs_1+._choice_1y2fs_1{margin-top:12px}._label_1y2fs_12{position:relative;display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}._sr_1y2fs_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_1y2fs_33{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}._check_1y2fs_33{height:20px;min-width:20px;border:1px solid #aaa;border-radius:4px}._label_1y2fs_12:hover ._check_1y2fs_33{border-color:var(--ft-color-text)}._checkbox_1y2fs_33:checked+._check_1y2fs_33{position:relative;background-color:var(--ft-color-text);border-color:var(--ft-color-text)}._checkbox_1y2fs_33:checked+._check_1y2fs_33:after{position:absolute;top:50%;left:50%;width:10px;height:7px;content:"";border:2px solid;border-color:transparent transparent var(--ft-color-bg) var(--ft-color-bg);transform:translate(-45%,-75%) rotate(-45deg);pointer-events:none}._input_1y2fs_70{margin-top:8px;height:32px}._textarea_1y2fs_75{height:192px}._input_1y2fs_70,._textarea_1y2fs_75{width:100%;padding:8px 12px;font-size:16px;line-height:1.5;background-color:var(--ft-color-bg);border:1px solid #D0D5DD;border-radius:8px;outline:0 solid rgba(152,162,179,.14);resize:none;transition:background-color .15s,border-color .15s,outline-width .2s}._input_1y2fs_70:focus,._textarea_1y2fs_75:focus{outline:4px solid rgba(152,162,179,.14)}._submit_1y2fs_97{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._submit_1y2fs_97:disabled{cursor:default}._submit_1y2fs_97{padding:8px 32px;font-size:16px;font-weight:600;text-align:center;color:var(--ft-color-bg);background-color:var(--ft-color-text);border-radius:8px;transition:opacity .2s}._submit_1y2fs_97:hover{opacity:.85}._submit_1y2fs_97{margin-top:16px;width:100%}._success_1y2fs_129{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_1mrao_1{padding:0;font-family:Helvetica Neue,Arial Nova,Helvetica,Arial,sans-serif;color:var(--ft-color-text)}._head_1mrao_7{display:flex;gap:8px;padding:0 32px 20px 0}._title_1mrao_13{flex:1 0;font-family:inherit;font-size:16px;font-weight:500;font-style:normal;line-height:1.4}._base_15ezr_1{margin:10px 0 0;display:flex;justify-content:space-between}._label_15ezr_7{flex:0 0 50%;max-width:50%;font-size:14px;line-height:1.4286;color:#475467}._label_15ezr_7:first-child{text-align:left}._label_15ezr_7:last-child{text-align:right}._list_dm3po_1{display:flex;justify-content:center;gap:16px}._icon_dm3po_7{transition:transform .12s ease;transform:scale(1)}._button_dm3po_12{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_dm3po_12:disabled{cursor:default}._button_dm3po_12{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:#f9fafb;border-radius:50%}._button_dm3po_12:hover ._icon_dm3po_7{transform:scale(1.15)}._base_1uh9h_1{width:100vw;max-width:310px}._list_1j2mw_1{display:flex;justify-content:space-between}._icon_1j2mw_6{transition:transform .12s ease;transform:scale(1)}._button_1j2mw_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1j2mw_11:disabled{cursor:default}._button_1j2mw_11{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:#f9fafb;border-radius:50%}._button_1j2mw_11:hover ._icon_1j2mw_6{transform:scale(1.15)}._list_f45j5_1{display:flex;justify-content:space-between}._button_f45j5_6{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_f45j5_6:disabled{cursor:default}._button_f45j5_6{display:flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:18px;font-weight:700;color:var(--ft-color-muted);background-color:var(--ft-control-bg);border-radius:50%;transition:color .12s ease,transform .12s ease}._button_f45j5_6:hover{color:var(--ft-color-text);transform:scale(1.1)}._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_1r0wo_1{width:100vw;max-width:320px}._list_1t0bv_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:575px){._list_1t0bv_1{flex-direction:column-reverse;gap:4px}}._button_1t0bv_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1t0bv_13:disabled{cursor:default}._button_1t0bv_13{display:inline-block;width:40px;height:40px;font-size:18px;font-weight:700;text-align:center;color:var(--ft-color-muted);background-color:var(--ft-control-bg);border-radius:50%;transition:color .12s ease,transform .12s ease;transform:scale(1)}._button_1t0bv_13:hover{color:var(--ft-color-text);transform:scale(1.1)}@media(max-width:575px){._button_1t0bv_13:hover{transform:none}}._button_1t0bv_13 ._score_1t0bv_49{display:inline}._button_1t0bv_13 ._label_1t0bv_52{display:none}@media(max-width:575px){._button_1t0bv_13 ._label_1t0bv_52{display:inline}}@media(max-width:575px){._button_1t0bv_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:575px){._labels_1t0bv_72{display:none}}._base_aftyp_1{width:100vw;max-width:340px}._list_1s7yb_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:575px){._list_1s7yb_1{flex-direction:column-reverse;gap:4px}}._button_1s7yb_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1s7yb_13:disabled{cursor:default}._button_1s7yb_13{display:block;width:40px;height:40px;font-size:18px;font-weight:700;text-align:center;color:var(--ft-color-muted);background-color:var(--ft-control-bg);border-radius:50%;transition:color .12s ease,transform .12s ease;transform:scale(1)}._button_1s7yb_13:hover{color:var(--ft-color-text);transform:scale(1.1)}@media(max-width:575px){._button_1s7yb_13:hover{transform:none}}._button_1s7yb_13 ._score_1s7yb_49{display:inline}._button_1s7yb_13 ._label_1s7yb_52{display:none}@media(max-width:575px){._button_1s7yb_13 ._label_1s7yb_52{display:inline}}@media(max-width:575px){._button_1s7yb_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:575px){._labels_1s7yb_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}body{margin:0;box-sizing:border-box;padding:0}*,*:before,*:after{margin:0;box-sizing:border-box;padding:0}._base_qoj98_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_qoj98_16{opacity:0;animation:_fadeForward_qoj98_1 .12s ease-in-out forwards}@keyframes _fadeForward_qoj98_1{0%{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}._topLeft_qoj98_31{top:24px;left:24px}._top_qoj98_31{top:24px}._topRight_qoj98_40{top:24px;right:24px}._right_qoj98_45{top:50%;right:24px;transform:translateY(-50%)}._bottomRight_qoj98_51{right:24px;bottom:24px}._bottom_qoj98_51{bottom:24px}._bottomLeft_qoj98_60{bottom:24px;left:24px}._left_qoj98_65{left:24px}._content_qoj98_69{position:relative;padding:24px}@media(max-width:400px){._content_qoj98_69{padding:20px}}._close_qoj98_79{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._close_qoj98_79:disabled{cursor:default}._close_qoj98_79{position:absolute;top:24px;inset-inline-end:24px;width:24px;height:24px;color:hsl(var(--ft-color-outline)/100%);transition:color .15s}._close_qoj98_79:hover{color:hsl(var(--ft-color-text)/100%)}@media(max-width:400px){._close_qoj98_79{inset-inline-end:20px;top:20px}}._close_qoj98_79:before,._close_qoj98_79:after{position:absolute;top:50%;left:50%;content:"";background-color:currentcolor;border-radius:1px;transform:rotate(45deg)}._close_qoj98_79:before{margin:-1px 0 0 -8px;width:16px;height:2px}._close_qoj98_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_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_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}
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 */