accessibility-react-widget 2.0.0 → 2.0.2

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 (76) hide show
  1. package/README.md +35 -1
  2. package/dist/assets/index.css +1 -0
  3. package/dist/components/AccColors/AccColors.d.ts +3 -2
  4. package/dist/components/AccContent/AccContent.d.ts +3 -3
  5. package/dist/components/AccMenuContent/AccMenuContent.d.ts +4 -4
  6. package/dist/components/AccMenuContentBlock/AccMenuContentBlock.d.ts +4 -3
  7. package/dist/components/AccTools/AccTools.d.ts +3 -2
  8. package/dist/components/Accessibilik/index.d.ts +2 -1
  9. package/dist/components/AccessibilityMenu/AccessibilityMenu.d.ts +3 -3
  10. package/dist/components/Footer/Footer.d.ts +2 -1
  11. package/dist/components/Header/Header.d.ts +2 -1
  12. package/dist/components/Portal/Portal.d.ts +2 -1
  13. package/dist/components/RcSlider/RcSlider.d.ts +2 -1
  14. package/dist/components/buttons/AccButton/AccButton.d.ts +3 -2
  15. package/dist/components/buttons/AccValueControl/AccValueControl.d.ts +2 -1
  16. package/dist/components/buttons/AccValueControlButton/AccValueControlButton.d.ts +2 -1
  17. package/dist/components/buttons/AccessibilityButton/AccessibilityButton.d.ts +2 -1
  18. package/dist/components/buttons/colors/BlueLightFilterButton/BlueLightFilterButton.d.ts +3 -2
  19. package/dist/components/buttons/colors/BlueLightFilterButton/useBlueLightFilterButton.d.ts +1 -0
  20. package/dist/components/buttons/colors/BrightnessControl/BrightnessControl.d.ts +3 -2
  21. package/dist/components/buttons/colors/BrightnessControl/useBrightnessControl.d.ts +1 -0
  22. package/dist/components/buttons/colors/DarkContrastButton/DarkContrastButton.d.ts +3 -2
  23. package/dist/components/buttons/colors/DarkContrastButton/useDarkContrastButton.d.ts +1 -0
  24. package/dist/components/buttons/colors/HighContrastButton/HighContrastButton.d.ts +3 -2
  25. package/dist/components/buttons/colors/HighContrastButton/useHighContrastButton.d.ts +1 -0
  26. package/dist/components/buttons/colors/HighSaturationButton/HighSaturationButton.d.ts +3 -2
  27. package/dist/components/buttons/colors/HighSaturationButton/useHighSaturationButton.d.ts +1 -0
  28. package/dist/components/buttons/colors/LightContrastButton/LightContrastButton.d.ts +3 -2
  29. package/dist/components/buttons/colors/LightContrastButton/useLightContrastButton.d.ts +1 -0
  30. package/dist/components/buttons/colors/LowSaturationButton/LowSaturationButton.d.ts +3 -2
  31. package/dist/components/buttons/colors/LowSaturationButton/useLowSaturationButton.d.ts +1 -0
  32. package/dist/components/buttons/colors/MonochromeButton/MonochromeButton.d.ts +3 -2
  33. package/dist/components/buttons/colors/MonochromeButton/useMonochromeButton.d.ts +1 -0
  34. package/dist/components/buttons/colors/TextColorPickerButton/TextColorPickerButton.d.ts +3 -2
  35. package/dist/components/buttons/colors/TextColorPickerButton/useTextColorPickerButton.d.ts +1 -0
  36. package/dist/components/buttons/colors/VisualImpairmentButton/VisualImpairmentButton.d.ts +3 -2
  37. package/dist/components/buttons/colors/VisualImpairmentButton/useVisualImpairmentButton.d.ts +1 -0
  38. package/dist/components/buttons/content/AdjustFontSize/AdjustFontSize.d.ts +3 -3
  39. package/dist/components/buttons/content/AdjustFontSize/useAdjustFontSize.d.ts +1 -0
  40. package/dist/components/buttons/content/AlignTextButton/AlignTextButton.d.ts +5 -4
  41. package/dist/components/buttons/content/AlignTextButton/useAlignTextButton.d.ts +3 -0
  42. package/dist/components/buttons/content/DyslexiaFontButton/DyslexiaFontButton.d.ts +3 -2
  43. package/dist/components/buttons/content/DyslexiaFontButton/style.d.ts +1 -1
  44. package/dist/components/buttons/content/DyslexiaFontButton/useDyslexiaFontButton.d.ts +1 -0
  45. package/dist/components/buttons/content/FontWeightButton/FontWeightButton.d.ts +3 -2
  46. package/dist/components/buttons/content/FontWeightButton/useFontWeightButton.d.ts +1 -0
  47. package/dist/components/buttons/content/HighlightLinksButton/HighlightLinksButton.d.ts +3 -2
  48. package/dist/components/buttons/content/HighlightLinksButton/useHighlightLinksButton.d.ts +1 -0
  49. package/dist/components/buttons/content/HighlightTitlesButton/HighlightTitlesButton.d.ts +3 -2
  50. package/dist/components/buttons/content/HighlightTitlesButton/useHighlightTitlesButton.d.ts +1 -0
  51. package/dist/components/buttons/content/LetterSpacingButton/LetterSpacingButton.d.ts +3 -2
  52. package/dist/components/buttons/content/LetterSpacingButton/useLetterSpacingButton.d.ts +1 -0
  53. package/dist/components/buttons/content/LineHeightButton/LineHeightButton.d.ts +3 -2
  54. package/dist/components/buttons/content/LineHeightButton/useLineHeightButton.d.ts +4 -0
  55. package/dist/components/buttons/content/WordSpacingButton/WordSpacingButton.d.ts +3 -2
  56. package/dist/components/buttons/content/WordSpacingButton/useWordSpacingButton.d.ts +1 -0
  57. package/dist/components/buttons/content/ZoomButton/ZoomButton.d.ts +3 -2
  58. package/dist/components/buttons/content/ZoomButton/useZoomButton.d.ts +4 -0
  59. package/dist/components/buttons/tools/BigCursorButton/BigCursorButton.d.ts +3 -2
  60. package/dist/components/buttons/tools/BigCursorButton/useBigCursorButton.d.ts +1 -0
  61. package/dist/components/buttons/tools/ReadingGuide/ReadingGuide.d.ts +3 -2
  62. package/dist/components/buttons/tools/ReadingGuide/useReadingGuide.d.ts +1 -0
  63. package/dist/components/buttons/tools/TextToSpeech/TextToSpeech.d.ts +3 -2
  64. package/dist/config.d.ts +2 -1
  65. package/dist/constants.d.ts +1 -1
  66. package/dist/hooks/usePersistenceLayout/usePersistenceLayout.d.ts +9 -0
  67. package/dist/i18/locale/index.d.ts +1 -1
  68. package/dist/index-C2JfLlsg.js +5664 -0
  69. package/dist/main.d.ts +2 -1
  70. package/dist/main.min.js +2 -193
  71. package/dist/next.d.ts +1 -0
  72. package/dist/next.js +5 -0
  73. package/dist/types.d.ts +2 -3
  74. package/dist/utils.d.ts +3 -1
  75. package/package.json +17 -11
  76. package/dist/assets/main.css +0 -1
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  ![Banner Image](banner.png)
4
4
 
5
- [![NPM](https://img.shields.io/npm/v/accessibilik.svg)](https://www.npmjs.com/package/accessibilik)
5
+ [![NPM](https://img.shields.io/npm/v/accessibility-react-widget.svg)](https://www.npmjs.com/package/accessibility-react-widget)
6
6
  [![GitHub license](https://img.shields.io/github/license/RosenGray/accessibilik)](https://github.com/RosenGray/accessibilik/blob/master/LICENSE)
7
7
 
8
8
 
@@ -11,8 +11,16 @@ Accessibilik: A React-based web accessibility widget to enhance UI/UX for all us
11
11
 
12
12
  ```
13
13
  yarn add accessibility-react-widget
14
+ ```
15
+ Or
16
+ ```
14
17
  npm install accessibility-react-widget
15
18
  ```
19
+ Or
20
+ ```
21
+ <script defer src="https://acc-landing.vercel.app/accessibilik.min.js"></script>
22
+ ```
23
+
16
24
 
17
25
  Then use it in your app:
18
26
 
@@ -30,6 +38,32 @@ export default function App() {
30
38
  }
31
39
  ```
32
40
 
41
+ ### Next.js (App Router)
42
+
43
+ The widget runs only on the client and is compatible with Next.js App Router. The published bundle includes the `"use client"` directive, so you can import it directly in Server Components (e.g. `layout.tsx`); Next.js will treat it as a client boundary.
44
+
45
+ ```js
46
+ // app/layout.tsx
47
+ import Accessibilik from 'accessibility-react-widget';
48
+
49
+ export default function RootLayout({ children }) {
50
+ return (
51
+ <html>
52
+ <body>
53
+ {children}
54
+ <Accessibilik />
55
+ </body>
56
+ </html>
57
+ );
58
+ }
59
+ ```
60
+
61
+ Alternatively, use the dedicated Next.js entry for an explicit client-only import:
62
+
63
+ ```js
64
+ import Accessibilik from 'accessibility-react-widget/next';
65
+ ```
66
+
33
67
  ## 🔥 Features
34
68
 
35
69
  ## Content
@@ -0,0 +1 @@
1
+ ._AccessibilityIcon_w7tb4_1{background-color:var(--primary-color);width:70px;height:70px;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 15px #252c6126,0 2px 4px #5d649433;position:fixed;z-index:500000000000000000;inset-inline-start:20px;bottom:20px;transition:.3s;cursor:pointer}._AccessibilityIcon_w7tb4_1._showSpinner_w7tb4_16{cursor:auto;animation:_spin_w7tb4_1 2.5s linear infinite}._AccessibilityIcon_w7tb4_1:hover{transform:scale(1.2)}._AccessibilityIcon_w7tb4_1>svg{fill:var(--white);width:75%;z-index:1}._AccessibilityIcon_w7tb4_1:after{content:"";position:absolute;left:50%;top:50%;bottom:0;width:80%;height:80%;border:2px solid white;background-color:var(--primary-color);z-index:0;transform:translate(-50%,-50%)}@keyframes _spin_w7tb4_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._accHeader__resetBtn_edc9t_1,._accHeader__closeBtn_edc9t_1{background-color:transparent;border:none;outline:none;display:flex;align-items:center}._accHeader__resetBtn_edc9t_1 svg,._accHeader__closeBtn_edc9t_1 svg{fill:#fff;font-weight:700;font-size:2em;width:30px}._accHeader_edc9t_1{height:60px;background-color:#2c2639;display:flex;align-items:center;justify-content:space-between;padding:.5em}._accHeader__title_edc9t_23{color:#fff;margin:0;font-size:18px}._accHeader_edc9t_1>._acc-lang-select-container_edc9t_28{flex:1}._accFooter_1pk2r_1{height:30px;background-color:#2c2639;display:flex;align-items:center;justify-content:center;color:#fff}._accFooter_1pk2r_1>a{color:#fff}@media screen and (max-width: 540px){._accFooter_1pk2r_1{height:55px}}._accAccessibilityMenu__overlay_1yac1_1{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000}._accMenu_1yac1_10{position:fixed;inset-inline-start:20px;bottom:100px;border-radius:10px;box-shadow:0 0 20px #00000080;opacity:1;transition:.3s;z-index:500000000000000000;overflow:hidden;background:#f9f9f9;width:100%;max-width:500px;line-height:1;font-size:16px;letter-spacing:.015em;display:flex;flex-direction:column}._accMenu_1yac1_10 [class$=-control]{border-radius:0;border:.3px solid #2c2639}._accMenu_1yac1_10 [class$=-indicatorContainer] svg{fill:#2c2639}._accMenu_1yac1_10 [class$=-indicatorSeparator]{background-color:#2c2639}._accMenu_1yac1_10 [class$=-menu]{margin-top:0;z-index:100}@media screen and (max-width: 540px){._accMenu_1yac1_10{inset-inline-start:0;max-width:100%;top:0;border-radius:0}}._accMenuContentBlock_ba9px_1{border:.3px solid #2c2639;display:flex;align-items:center;flex-direction:column;max-height:calc(33.3333333333vh - 83px);justify-content:center;flex-grow:1;transition:max-height .3s linear;padding:10px 5px 5px;position:relative;cursor:pointer;overflow:hidden;z-index:10}._accMenuContentBlock_ba9px_1:focus{border:1px solid #2c2639}._accMenuContentBlock_ba9px_1._isExpanded_ba9px_19{cursor:auto;flex:1;max-height:100%;border:none}._accMenuContentBlock_ba9px_1._isAccMenuContentActive_ba9px_25:not(._isExpanded_ba9px_19){display:none}._accMenuContentBlock__titleContainer_ba9px_28{display:flex;flex-direction:column;align-items:center}._accMenuContentBlock__titleContainer_ba9px_28 svg{font-weight:700;width:30px;fill:#000}._accMenuContentBlock__title_ba9px_28{font-size:20px;font-weight:700;color:#000;text-transform:capitalize;margin:0;padding:.2em}._accMenuContentBlock__expendButtonContainer_ba9px_46{width:100%;display:flex;margin-bottom:10px}._accMenuContentBlock__expendButtonContainer_ba9px_46 button{font-size:30px;width:80%;margin:auto;inset-inline-start:5px;height:100%;border:none;outline:none;background-color:var(--primary-color);border-radius:10px}._accMenuContentBlock__expendButtonContainer_ba9px_46 button>svg{fill:#fff;width:24px}._accMenuContentBlock__expendButtonContainer_ba9px_46 button:hover{opacity:.8}._accMenuContentBlock__content_ba9px_69{display:grid;flex:1;grid-template-columns:repeat(3,1fr);grid-auto-rows:max-content;-moz-column-gap:.8em;column-gap:.8em;overflow:auto;row-gap:1.5em;align-self:baseline;width:100%}._accButton_gu4kw_1{aspect-ratio:6/5;border-radius:4px;display:flex;flex-direction:column;padding:5px;color:#000;background:#fff;border:1px solid #ccc;transition:all .5s ease;position:relative;cursor:pointer}._accButton_gu4kw_1:hover,._accButton_gu4kw_1:focus{border-color:var(--primary-color);outline:none}._accButton_gu4kw_1._isToggled_gu4kw_18{background-color:var(--primary-color);border-color:var(--primary-color);color:#fff}._accButton_gu4kw_1._isToggled_gu4kw_18 svg{fill:#fff}._accButton_gu4kw_1._isActive_gu4kw_26{border-color:var(--primary-color)}._accButton__title_gu4kw_29{font-size:15px;font-weight:400;text-align:center;width:100%;color:inherit;margin:10px auto auto}._accButton__icon_gu4kw_38{width:24px;margin-bottom:8px}._accButton__icon--help_gu4kw_42{position:absolute;inset-inline-end:0}._accButton__icon--help_gu4kw_42:hover{fill:red!important}._accButton__icon--help_gu4kw_42:hover+span[data-tooltip]:after{opacity:1;padding:8px;max-height:10000px;transition-duration:.3s}._accButton__content_gu4kw_55{align-self:flex-end;width:100%;margin-top:auto;flex:.8}._accButton__stats_gu4kw_61{color:var(--primary-color);font-weight:700;position:absolute;align-self:flex-end;font-size:14px}._accButton_gu4kw_1 span[data-tooltip]{position:absolute;left:0;right:0;bottom:0;cursor:help}._accButton_gu4kw_1 span[data-tooltip]:after{position:absolute;opacity:0;pointer-events:none;content:attr(data-tooltip);color:var(--primary-color);left:0;right:0;bottom:0;margin:auto;line-height:1.5;border-radius:3px;box-shadow:0 0 5px 2px #64646499;background-color:#fff;z-index:10;word-wrap:break-word;text-align:start;transform:translateY(100%);transition:all .15s cubic-bezier(.25,.8,.25,1)}._accValueControl_p53sg_1{height:100%;display:flex;align-items:center;justify-content:space-around}._accValueControlButton_1pw3b_1{padding:0;background-color:var(--primary-color);border:none;outline:none;width:28px;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center}._accValueControlButton_1pw3b_1 svg{fill:#fff;width:20px}._accValueControlButton_1pw3b_1:hover{opacity:.8}._accValueControlButton_1pw3b_1:focus{background-color:#fff;border:4px solid var(--primary-color)}._accValueControlButton_1pw3b_1:focus svg{fill:var(--primary-color)}._accLineHeightButton_n1tdk_1,._accZoomButton_1fl6t_1{height:100%;display:flex;align-items:center;justify-content:space-around}._accBrightnessControl_16gcc_1{height:100%;display:flex;align-items:center;justify-content:space-around;position:relative}.rc-slider{position:relative;width:100%;height:14px;padding:5px 0;border-radius:6px;touch-action:none;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider *{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-rail{position:absolute;width:100%;height:4px;background-color:#e9e9e9;border-radius:6px}.rc-slider-track,.rc-slider-tracks{position:absolute;height:4px;background-color:#abe2fb;border-radius:6px}.rc-slider-track-draggable{z-index:1;box-sizing:content-box;background-clip:content-box;border-top:5px solid rgba(0,0,0,0);border-bottom:5px solid rgba(0,0,0,0);transform:translateY(-5px)}.rc-slider-handle{position:absolute;z-index:1;width:14px;height:14px;margin-top:-5px;background-color:#fff;border:solid 2px #96dbfa;border-radius:50%;cursor:pointer;cursor:grab;opacity:.8;touch-action:pan-x}.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging{border-color:#57c5f7;box-shadow:0 0 0 5px #96dbfa}.rc-slider-handle:focus{outline:none;box-shadow:none}.rc-slider-handle:focus-visible{border-color:#2db7f5;box-shadow:0 0 0 3px #96dbfa}.rc-slider-handle-click-focused:focus{border-color:#96dbfa;box-shadow:unset}.rc-slider-handle:hover{border-color:#57c5f7}.rc-slider-handle:active{border-color:#57c5f7;box-shadow:0 0 5px #57c5f7;cursor:grabbing}.rc-slider-mark{position:absolute;top:18px;left:0;width:100%;font-size:12px}.rc-slider-mark-text{position:absolute;display:inline-block;color:#999;text-align:center;vertical-align:middle;cursor:pointer}.rc-slider-mark-text-active{color:#666}.rc-slider-step{position:absolute;width:100%;height:4px;background:transparent}.rc-slider-dot{position:absolute;bottom:-2px;width:8px;height:8px;vertical-align:middle;background-color:#fff;border:2px solid #e9e9e9;border-radius:50%;cursor:pointer}.rc-slider-dot-active{border-color:#96dbfa}.rc-slider-dot-reverse{margin-right:-4px}.rc-slider-disabled{background-color:#e9e9e9}.rc-slider-disabled .rc-slider-track{background-color:#ccc}.rc-slider-disabled .rc-slider-handle,.rc-slider-disabled .rc-slider-dot{background-color:#fff;border-color:#ccc;box-shadow:none;cursor:not-allowed}.rc-slider-disabled .rc-slider-mark-text,.rc-slider-disabled .rc-slider-dot{cursor:not-allowed!important}.rc-slider-vertical{width:14px;height:100%;padding:0 5px}.rc-slider-vertical .rc-slider-rail{width:4px;height:100%}.rc-slider-vertical .rc-slider-track{bottom:0;left:5px;width:4px}.rc-slider-vertical .rc-slider-track-draggable{border-top:0;border-bottom:0;border-right:5px solid rgba(0,0,0,0);border-left:5px solid rgba(0,0,0,0);transform:translate(-5px)}.rc-slider-vertical .rc-slider-handle{position:absolute;z-index:1;margin-top:0;margin-left:-5px;touch-action:pan-y}.rc-slider-vertical .rc-slider-mark{top:0;left:18px;height:100%}.rc-slider-vertical .rc-slider-step{width:4px;height:100%}.rc-slider-vertical .rc-slider-dot{margin-left:-2px}.rc-slider-tooltip-zoom-down-enter,.rc-slider-tooltip-zoom-down-appear,.rc-slider-tooltip-zoom-down-leave{display:block!important;animation-duration:.3s;animation-fill-mode:both;animation-play-state:paused}.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active{animation-name:rcSliderTooltipZoomDownIn;animation-play-state:running}.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active{animation-name:rcSliderTooltipZoomDownOut;animation-play-state:running}.rc-slider-tooltip-zoom-down-enter,.rc-slider-tooltip-zoom-down-appear{transform:scale(0);animation-timing-function:cubic-bezier(.23,1,.32,1)}.rc-slider-tooltip-zoom-down-leave{animation-timing-function:cubic-bezier(.755,.05,.855,.06)}@keyframes rcSliderTooltipZoomDownIn{0%{transform:scale(0);transform-origin:50% 100%;opacity:0}to{transform:scale(1);transform-origin:50% 100%}}@keyframes rcSliderTooltipZoomDownOut{0%{transform:scale(1);transform-origin:50% 100%}to{transform:scale(0);transform-origin:50% 100%;opacity:0}}.rc-slider-tooltip{position:absolute;top:-9999px;left:-9999px;visibility:visible;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-tooltip *{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-tooltip-hidden{display:none}.rc-slider-tooltip-placement-top{padding:4px 0 8px}.rc-slider-tooltip-inner{min-width:24px;height:24px;padding:6px 2px;color:#fff;font-size:12px;line-height:1;text-align:center;text-decoration:none;background-color:#6c6c6c;border-radius:6px;box-shadow:0 0 4px #d9d9d9}.rc-slider-tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow{bottom:4px;left:50%;margin-left:-4px;border-width:4px 4px 0;border-top-color:#6c6c6c}._accRcSlider_dhokk_1{position:absolute;left:0;right:0;bottom:-6px}._accRcSlider_dhokk_1 .rc-slider-rail{background-color:var(--primary-color)}._accRcSlider_dhokk_1 .rc-slider-handle{border:solid 2px var(--primary-color);background-color:red;opacity:1;width:22px;height:22px;margin-top:-9px}._accButtonTextColorPicker_dw9mu_1{grid-column:span 3;aspect-ratio:10/5}._accButtonTextColorPicker_dw9mu_1>h2{margin:0;position:absolute;display:inline-block;width:auto;inset-inline-end:5px}._accButtonTextColorPicker_dw9mu_1 [class^=_accButton__content]{flex:1}._accTextColorPicker_dw9mu_16{height:100%;display:flex;flex-direction:column;align-items:center}._accTextColorPicker__topContainer_dw9mu_22{width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:15px;gap:10px}._accTextColorPicker__inputText_dw9mu_30{text-align:center;font-weight:700;letter-spacing:1px}._accTextColorPicker__hexColorPicker_dw9mu_35{flex:1;width:100%!important}._accSelectVoicesContainer_1d5zn_1 .accSelectVoices__indicators{display:none}._accSelectVoicesContainer_1d5zn_1 .accSelectVoices__option{color:#333}._accMenuContent_1v82o_1{display:grid;height:calc(100vh - 250px);display:flex;flex-direction:column;overflow:hidden}:root{--primary-color: #222e8a;--highlight-color:#0048ff;--white:#fff}.acc-readingGuide{position:fixed;top:0;left:0;right:0;width:100%;height:0;pointer-events:none;background-color:#00000080;z-index:1000000}
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../types';
3
+
3
4
  interface AccColorsProps {
4
5
  accState: AccessibilikState;
5
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
@@ -1,7 +1,7 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../types';
3
+
3
4
  interface AccContentProps {
4
- nodeListUpdated: number;
5
5
  accState: AccessibilikState;
6
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
7
7
  }
@@ -1,8 +1,8 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../types";
3
- import { CollapsedState, CollapsedStateKeys } from "../../config";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../types';
3
+ import { CollapsedState, CollapsedStateKeys } from '../../config';
4
+
4
5
  interface AccMenuContentProps {
5
- nodeListUpdated: number;
6
6
  accState: AccessibilikState;
7
7
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
8
8
  onCollapse: (name: CollapsedStateKeys) => void;
@@ -1,6 +1,7 @@
1
- import { FC, ReactNode } from "react";
2
- import { IconSvgComponent } from "../../types";
3
- import { CollapsedStateKeys } from "../../config";
1
+ import { FC, ReactNode } from 'react';
2
+ import { IconSvgComponent } from '../../types';
3
+ import { CollapsedStateKeys } from '../../config';
4
+
4
5
  interface AccMenuContentBlockProps {
5
6
  children: ReactNode;
6
7
  name: CollapsedStateKeys;
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../types';
3
+
3
4
  interface AccToolsProps {
4
5
  accState: AccessibilikState;
5
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
@@ -1,3 +1,4 @@
1
- import { FC } from "react";
1
+ import { FC } from 'react';
2
+
2
3
  declare const Accessibilik: FC;
3
4
  export default Accessibilik;
@@ -1,7 +1,7 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../types';
3
+
3
4
  interface AccessibilityMenuProps {
4
- nodeListUpdated: number;
5
5
  display: string;
6
6
  accState: AccessibilikState;
7
7
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
@@ -1,3 +1,4 @@
1
- import { FC } from "react";
1
+ import { FC } from 'react';
2
+
2
3
  declare const Footer: FC;
3
4
  export default Footer;
@@ -1,4 +1,5 @@
1
- import { FC } from "react";
1
+ import { FC } from 'react';
2
+
2
3
  interface HeaderProps {
3
4
  onShow: () => void;
4
5
  onInit: () => void;
@@ -1,4 +1,5 @@
1
- import { ReactNode } from "react";
1
+ import { ReactNode } from 'react';
2
+
2
3
  interface PortalProps {
3
4
  children: ReactNode;
4
5
  wrapperElementId?: string;
@@ -1,4 +1,5 @@
1
- import { FC } from "react";
1
+ import { FC } from 'react';
2
+
2
3
  interface RcSliderProps {
3
4
  range?: boolean;
4
5
  min?: number;
@@ -1,5 +1,6 @@
1
- import { FC, ReactNode } from "react";
2
- import { IconSvgComponent } from "../../../types";
1
+ import { FC, ReactNode } from 'react';
2
+ import { IconSvgComponent } from '../../../types';
3
+
3
4
  interface AccButtonProps {
4
5
  Icon: IconSvgComponent;
5
6
  isToggled?: boolean;
@@ -1,4 +1,5 @@
1
- import { FC } from "react";
1
+ import { FC } from 'react';
2
+
2
3
  interface AccValueControlProps {
3
4
  onIncrease: () => void;
4
5
  onToggle: () => void;
@@ -1,4 +1,5 @@
1
- import { CSSProperties, FC } from "react";
1
+ import { CSSProperties, FC } from 'react';
2
+
2
3
  export type ValueControlType = "init" | "increase" | "decrease";
3
4
  interface AccValueControlButtonProps {
4
5
  controlType: ValueControlType;
@@ -1,4 +1,5 @@
1
- import { FC } from "react";
1
+ import { FC } from 'react';
2
+
2
3
  interface AccessibilityButtonProps {
3
4
  onShow?: () => void;
4
5
  showSpinner?: boolean;
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../../../types';
3
+
3
4
  interface BlueLightFilterButtonProps {
4
5
  accState: AccessibilikState;
5
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
@@ -0,0 +1 @@
1
+ export declare const useBlueLightFilterButton: (isBlueLightFilter: boolean, isGettingReady?: boolean) => void;
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../../../types';
3
+
3
4
  interface BrightnessControlProps {
4
5
  accState: AccessibilikState;
5
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
@@ -0,0 +1 @@
1
+ export declare const useBrightnessControl: (isBrightness: boolean, brightness: number, isGettingReady?: boolean) => void;
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../../../types';
3
+
3
4
  interface DarkContrastButtonProps {
4
5
  accState: AccessibilikState;
5
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
@@ -0,0 +1 @@
1
+ export declare const useDarkContrastButton: (isDarkContrast: boolean, isGettingReady: boolean) => void;
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../../../types';
3
+
3
4
  interface HighContrastButtonProps {
4
5
  accState: AccessibilikState;
5
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
@@ -0,0 +1 @@
1
+ export declare const useHighContrastButton: (isHighContrast: boolean, contrast: number, isGettingReady?: boolean) => void;
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../../../types';
3
+
3
4
  interface HighSaturationButtonProps {
4
5
  accState: AccessibilikState;
5
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
@@ -0,0 +1 @@
1
+ export declare const useHighSaturationButton: (isHighSaturation: boolean, saturation: number, isGettingReady?: boolean) => void;
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../../../types';
3
+
3
4
  interface LightContrastButtonProps {
4
5
  accState: AccessibilikState;
5
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
@@ -0,0 +1 @@
1
+ export declare const useLightContrastButton: (isLightContrast: boolean, isGettingReady: boolean) => void;
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../../../types';
3
+
3
4
  interface LowSaturationButtonProps {
4
5
  accState: AccessibilikState;
5
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
@@ -0,0 +1 @@
1
+ export declare const useLowSaturationButton: (isLowSaturation: boolean, saturation: number, isGettingReady?: boolean) => void;
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../../../types';
3
+
3
4
  interface MonochromeButtonProps {
4
5
  accState: AccessibilikState;
5
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
@@ -0,0 +1 @@
1
+ export declare const useMonochromeButton: (isMonochrome: boolean, isGettingReady: boolean) => void;
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../../../types';
3
+
3
4
  interface TextColorPickerButtonProps {
4
5
  accState: AccessibilikState;
5
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
@@ -0,0 +1 @@
1
+ export declare const useTextColorPickerButton: (color: string, isGettingReady: boolean) => void;
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../../../types';
3
+
3
4
  interface VisualImpairmentButtonProps {
4
5
  accState: AccessibilikState;
5
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
@@ -0,0 +1 @@
1
+ export declare const useVisualImpairmentButton: (isVisualImpairment: boolean, isGettingReady: boolean) => void;
@@ -1,7 +1,7 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../../../types';
3
+
3
4
  interface AdjustFontSizeProps {
4
- nodeListUpdated: number;
5
5
  accState: AccessibilikState;
6
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
7
7
  }
@@ -0,0 +1 @@
1
+ export declare const useAdjustFontSize: (adjustFontSizePercentage: number, nodeListUpdated: number, isGettingReady?: boolean) => void;
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
1
+ import { AccessibilikState, ChangeAccDraftHander } from '../../../../types';
2
+ import { default as React } from 'react';
3
+
3
4
  type Direction = "right" | "center" | "left";
4
5
  interface AlignTextButtonProps {
5
6
  direction: Direction;
@@ -7,5 +8,5 @@ interface AlignTextButtonProps {
7
8
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
8
9
  translationKey: string;
9
10
  }
10
- declare const AlignTextButton: FC<AlignTextButtonProps>;
11
- export default AlignTextButton;
11
+ declare const _default: React.NamedExoticComponent<AlignTextButtonProps>;
12
+ export default _default;
@@ -0,0 +1,3 @@
1
+ import { TextAlign } from '../../../../types';
2
+
3
+ export declare const useAlignTextButton: (textAlign: TextAlign, isGettingReady?: boolean) => void;
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../../../types';
3
+
3
4
  interface DyslexiaFontButtonProps {
4
5
  accState: AccessibilikState;
5
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
@@ -1,2 +1,2 @@
1
- declare const DYSLEXIA_FONT_STYLE = "\n @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300;400;700&display=swap');\n\n@font-face {\n font-family: 'OpenDyslexic';\n src: url('https://rosengray.github.io/static/fonts/OpenDyslexic-Bold.woff') format('woff');\n font-weight: bold;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'OpenDyslexic';\n src: url('https://rosengray.github.io/static/fonts/OpenDyslexic3-Bold.ttf') format('truetype');\n font-weight: bold;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'OpenDyslexic';\n src: url('https://rosengray.github.io/static/fonts/OpenDyslexic3-Regular.ttf') format('truetype');\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'OpenDyslexic';\n src: url('https://rosengray.github.io/static/fonts/OpenDyslexic-Regular.woff') format('woff');\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'OpenDyslexic';\n src: url('https://rosengray.github.io/static/fonts/OpenDyslexic-Regular.otf') format('opentype');\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'OpenDyslexic';\n src: url('https://rosengray.github.io/static/fonts/OpenDyslexic-Bold.otf') format('opentype');\n font-weight: bold;\n font-style: normal;\n}\n\n\nhtml{\n font-family: OpenDyslexic,Comic Neue,Arial,Helvetica,sans-serif !important\n \n}\n\nhtml *, *{\n font-family: OpenDyslexic,Comic Neue,Arial,Helvetica,sans-serif !important\n}\n\nhtml.acc-font-weight{\n font-family: OpenDyslexic,Comic Neue,Arial,Helvetica,sans-serif !important \n}\n\n\n";
1
+ declare const DYSLEXIA_FONT_STYLE = "\n @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300;400;700&display=swap');\n\n@font-face {\n font-family: 'OpenDyslexic';\n src: url('https://acc-landing.vercel.app/fonts/OpenDyslexic-Bold.woff') format('woff');\n font-weight: bold;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'OpenDyslexic';\n src: url('https://acc-landing.vercel.app/fonts/OpenDyslexic3-Bold.ttf') format('truetype');\n font-weight: bold;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'OpenDyslexic';\n src: url('https://acc-landing.vercel.app/fonts/OpenDyslexic3-Regular.ttf') format('truetype');\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'OpenDyslexic';\n src: url('https://acc-landing.vercel.app/fonts/OpenDyslexic-Regular.woff') format('woff');\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'OpenDyslexic';\n src: url('https://acc-landing.vercel.app/fonts/OpenDyslexic-Regular.otf') format('opentype');\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'OpenDyslexic';\n src: url('https://acc-landing.vercel.app/fonts/OpenDyslexic-Bold.otf') format('opentype');\n font-weight: bold;\n font-style: normal;\n}\n\n\nhtml{\n font-family: OpenDyslexic,Comic Neue,Arial,Helvetica,sans-serif !important\n \n}\n\nhtml *, *{\n font-family: OpenDyslexic,Comic Neue,Arial,Helvetica,sans-serif !important\n}\n\nhtml.acc-font-weight{\n font-family: OpenDyslexic,Comic Neue,Arial,Helvetica,sans-serif !important \n}\n\n\n";
2
2
  export default DYSLEXIA_FONT_STYLE;
@@ -0,0 +1 @@
1
+ export declare const useDyslexiaFontButton: (isDyslexiaFont: boolean, isGettingReady?: boolean) => void;
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../../../types';
3
+
3
4
  interface FontWeightButtonProps {
4
5
  accState: AccessibilikState;
5
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
@@ -0,0 +1 @@
1
+ export declare const useFontWeightButton: (isFontWeightBold: boolean, isGettingReady?: boolean) => void;
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../../../types';
3
+
3
4
  interface HighlightLinksButtonProps {
4
5
  accState: AccessibilikState;
5
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
@@ -0,0 +1 @@
1
+ export declare const useHighlightLinksButton: (highlightLinks: boolean, isGettingReady?: boolean) => void;
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../../../types';
3
+
3
4
  interface HighlightTitlesButtonProps {
4
5
  accState: AccessibilikState;
5
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
@@ -0,0 +1 @@
1
+ export declare const useHighlightTitlesButton: (highlightTitles: boolean, isGettingReady?: boolean) => void;
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../../../types';
3
+
3
4
  interface LetterSpacingButtonProps {
4
5
  accState: AccessibilikState;
5
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
@@ -0,0 +1 @@
1
+ export declare const useLetterSpacingButton: (letterSpacing: number, isGettingReady?: boolean) => void;
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../../../types';
3
+
3
4
  interface LineHeightButtonProps {
4
5
  accState: AccessibilikState;
5
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
@@ -0,0 +1,4 @@
1
+ export declare const useLineHeightButton: (lineHeightState: {
2
+ lineHeight: number;
3
+ isLineHeight: boolean;
4
+ }, isGettingReady?: boolean) => void;
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../../../types';
3
+
3
4
  interface WordSpacingButtonProps {
4
5
  accState: AccessibilikState;
5
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
@@ -0,0 +1 @@
1
+ export declare const useWordSpacingButton: (wordSpacing: number, isGettingReady?: boolean) => void;
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../../../types';
3
+
3
4
  interface ZoomButtonProps {
4
5
  accState: AccessibilikState;
5
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
@@ -0,0 +1,4 @@
1
+ export declare const useZoomButton: (zoomState: {
2
+ zoom: number;
3
+ isZoom: boolean;
4
+ }, isGettingReady?: boolean) => void;
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../../../types';
3
+
3
4
  interface BigCursorButtonProps {
4
5
  accState: AccessibilikState;
5
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
@@ -0,0 +1 @@
1
+ export declare const useBigCursorButton: (isBigCursor: boolean, isGettingReady?: boolean) => void;
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../../../types';
3
+
3
4
  interface ReadingGuideProps {
4
5
  rgGap?: number;
5
6
  accState: AccessibilikState;
@@ -0,0 +1 @@
1
+ export declare const useReadingGuide: (showReadingGuide: boolean, rgGap: number, isGettingReady?: boolean) => void;
@@ -1,5 +1,6 @@
1
- import { FC } from "react";
2
- import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
1
+ import { FC } from 'react';
2
+ import { AccessibilikState, ChangeAccDraftHander } from '../../../../types';
3
+
3
4
  interface TextToSpeechProps {
4
5
  accState: AccessibilikState;
5
6
  onChangeAccState: (fn: ChangeAccDraftHander) => void;
package/dist/config.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import { IconSvgComponent } from "./types";
1
+ import { IconSvgComponent } from './types';
2
+
2
3
  export declare const langOptions: {
3
4
  label: string;
4
5
  value: string;
@@ -1,4 +1,4 @@
1
1
  export declare const textTags: string[];
2
2
  export declare const ACC_MENU_CONTAINER_ID = "acc-accessibility-menu";
3
3
  export declare const APP_ID = "accessibilik";
4
- export declare const PORTAL_APP_ID = "portal-accessibilik";
4
+ export declare const PORTAL_APP_ID = "root-accessibilik";
@@ -0,0 +1,9 @@
1
+ import { AccessibilikState } from '../../types';
2
+
3
+ interface UsePersistenceLayoutProps {
4
+ accState: AccessibilikState;
5
+ isGettingReady: boolean;
6
+ nodeListUpdated: number;
7
+ }
8
+ declare const usePersistenceLayout: ({ accState, isGettingReady, nodeListUpdated, }: UsePersistenceLayoutProps) => void;
9
+ export default usePersistenceLayout;