react-feedback-surveys 1.1.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 +94 -1
  2. package/dist/index.css +1 -1
  3. package/dist/index.d.ts +2 -0
  4. package/dist/index.js +441 -432
  5. package/package.json +8 -7
package/README.md CHANGED
@@ -378,6 +378,100 @@ You can override colors and fonts via CSS variables:
378
378
  /* box-shadow: 0 0 10px hsl(var(--ft-color-shadow) / 20%); */
379
379
  ```
380
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');
466
+ }
467
+ ```
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
+
381
475
  Or wrap the survey in your own class and target the generated markup.
382
476
 
383
477
  For deeper customization strategies, see the section below.
@@ -472,7 +566,6 @@ npm run build
472
566
  ## Roadmap
473
567
 
474
568
  - [ ] Custom emoji & icon support
475
- - [ ] Dark theme support
476
569
  - [ ] RTL language support
477
570
 
478
571
  ## Changelog
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}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 */