@swalha1999/a11y-react 1.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 (6) hide show
  1. package/README.md +266 -0
  2. package/dist/index.d.mts +181 -0
  3. package/dist/index.d.ts +181 -0
  4. package/dist/index.js +1144 -0
  5. package/dist/index.mjs +1097 -0
  6. package/package.json +47 -0
package/README.md ADDED
@@ -0,0 +1,266 @@
1
+ # @swalha1999/a11y-react
2
+
3
+ A beautifully designed, accessible, and i18n-ready accessibility widget for React applications.
4
+
5
+ ## Features
6
+
7
+ - **Professional Design** - Modern UI with smooth animations, gradients, and hover effects
8
+ - **Full TypeScript support** - Comprehensive type definitions
9
+ - **i18n support** - Pass your own translations object with RTL support
10
+ - **Customizable theming** - Primary color theming, inline styles, and class names
11
+ - **Fully Accessible** - ARIA attributes, keyboard navigation, focus trapping
12
+ - **Persistent settings** - Saves to localStorage (configurable)
13
+ - **Backdrop blur** - Modern overlay with blur effect
14
+ - **Organized sections** - Settings grouped into logical categories
15
+
16
+ ### Accessibility Features
17
+
18
+ - **Text Adjustments**: Text size, line spacing, letter spacing
19
+ - **Visual Adjustments**: Invert colors, grayscale, hide images
20
+ - **Navigation Aids**: Underline links, big cursor, reading guide
21
+
22
+ ## Installation
23
+
24
+ ```bash
25
+ npm install @swalha1999/a11y-react
26
+ # or
27
+ yarn add @swalha1999/a11y-react
28
+ # or
29
+ pnpm add @swalha1999/a11y-react
30
+ ```
31
+
32
+ ## Quick Start
33
+
34
+ ```tsx
35
+ import { AccessibilityWidget, en, injectAccessibilityStyles } from '@swalha1999/a11y-react';
36
+
37
+ // Inject global styles once at app initialization
38
+ injectAccessibilityStyles();
39
+
40
+ function App() {
41
+ return (
42
+ <div>
43
+ <AccessibilityWidget translations={en} />
44
+ {/* Your app content */}
45
+ </div>
46
+ );
47
+ }
48
+ ```
49
+
50
+ ## Usage with i18n
51
+
52
+ ```tsx
53
+ import { AccessibilityWidget, ar } from '@swalha1999/a11y-react';
54
+ import type { AccessibilityTranslations } from '@swalha1999/a11y-react';
55
+
56
+ // Use built-in Arabic translations with RTL
57
+ <AccessibilityWidget translations={ar} dir="rtl" />
58
+
59
+ // Or provide your own translations
60
+ const frTranslations: AccessibilityTranslations = {
61
+ title: 'Accessibilité',
62
+ textSize: 'Taille du texte',
63
+ lineSpacing: 'Interligne',
64
+ letterSpacing: 'Espacement des lettres',
65
+ invertColors: 'Inverser les couleurs',
66
+ grayscale: 'Niveaux de gris',
67
+ underlineLinks: 'Souligner les liens',
68
+ bigCursor: 'Grand curseur',
69
+ readingGuide: 'Guide de lecture',
70
+ hideImages: 'Masquer les images',
71
+ reset: 'Réinitialiser',
72
+ normal: 'Normal',
73
+ close: 'Fermer',
74
+ textAdjustments: 'Ajustements du texte',
75
+ visualAdjustments: 'Ajustements visuels',
76
+ navigationAids: 'Aides à la navigation',
77
+ };
78
+
79
+ <AccessibilityWidget translations={frTranslations} />
80
+ ```
81
+
82
+ ## Customization
83
+
84
+ ### Theme Color
85
+
86
+ ```tsx
87
+ <AccessibilityWidget
88
+ translations={en}
89
+ primaryColor="#007bff" // Blue theme
90
+ />
91
+
92
+ <AccessibilityWidget
93
+ translations={en}
94
+ primaryColor="#10b981" // Green theme
95
+ />
96
+
97
+ <AccessibilityWidget
98
+ translations={en}
99
+ primaryColor="#8b5cf6" // Purple theme
100
+ />
101
+ ```
102
+
103
+ ### Custom Styling
104
+
105
+ ```tsx
106
+ <AccessibilityWidget
107
+ translations={en}
108
+ primaryColor="#6366f1"
109
+ styles={{
110
+ button: { boxShadow: '0 4px 20px rgba(99, 102, 241, 0.5)' },
111
+ panel: { borderRadius: 16 },
112
+ settingItem: { background: '#f0f4ff' },
113
+ }}
114
+ classNames={{
115
+ button: 'my-a11y-button',
116
+ panel: 'my-a11y-panel',
117
+ }}
118
+ />
119
+ ```
120
+
121
+ ### Position
122
+
123
+ ```tsx
124
+ <AccessibilityWidget
125
+ translations={en}
126
+ position="bottom-left" // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
127
+ />
128
+ ```
129
+
130
+ ### Custom Button Icon
131
+
132
+ ```tsx
133
+ import { AccessibilityWidget, en } from '@swalha1999/a11y-react';
134
+
135
+ <AccessibilityWidget
136
+ translations={en}
137
+ buttonIcon={<MyCustomIcon />}
138
+ />
139
+ ```
140
+
141
+ ### Event Callbacks
142
+
143
+ ```tsx
144
+ <AccessibilityWidget
145
+ translations={en}
146
+ onSettingsChange={(settings) => {
147
+ console.log('Settings changed:', settings);
148
+ // Send to analytics, etc.
149
+ }}
150
+ />
151
+ ```
152
+
153
+ ### Default Settings
154
+
155
+ ```tsx
156
+ <AccessibilityWidget
157
+ translations={en}
158
+ defaultSettings={{
159
+ textSize: 1,
160
+ underlineLinks: true,
161
+ }}
162
+ />
163
+ ```
164
+
165
+ ### Disable Persistence
166
+
167
+ ```tsx
168
+ <AccessibilityWidget
169
+ translations={en}
170
+ disablePersistence // Don't save to localStorage
171
+ />
172
+ ```
173
+
174
+ ## Props
175
+
176
+ | Prop | Type | Default | Description |
177
+ |------|------|---------|-------------|
178
+ | `translations` | `AccessibilityTranslations` | **required** | Translation strings for the UI |
179
+ | `dir` | `'ltr' \| 'rtl'` | `'ltr'` | Text direction |
180
+ | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Button position |
181
+ | `primaryColor` | `string` | `'#6366f1'` | Primary theme color (indigo) |
182
+ | `zIndex` | `number` | `9999` | Z-index for the widget |
183
+ | `storageKey` | `string` | `'accessibility-settings'` | localStorage key |
184
+ | `disablePersistence` | `boolean` | `false` | Disable localStorage |
185
+ | `defaultSettings` | `Partial<AccessibilitySettings>` | `{}` | Initial settings override |
186
+ | `onSettingsChange` | `(settings) => void` | - | Callback when settings change |
187
+ | `buttonIcon` | `ReactNode` | Built-in icon | Custom button icon |
188
+ | `buttonAriaLabel` | `string` | Uses `translations.title` | Custom aria-label |
189
+ | `styles` | `AccessibilityWidgetStyles` | `{}` | Custom inline styles |
190
+ | `classNames` | `AccessibilityWidgetClassNames` | `{}` | Custom class names |
191
+
192
+ ## Advanced Usage
193
+
194
+ ### Using Hooks Directly
195
+
196
+ Build your own custom accessibility UI using the provided hooks:
197
+
198
+ ```tsx
199
+ import { useAccessibilitySettings, useReadingGuide } from '@swalha1999/a11y-react';
200
+
201
+ function MyCustomWidget() {
202
+ const { settings, toggleSetting, resetSettings } = useAccessibilitySettings({
203
+ storageKey: 'my-app-a11y',
204
+ onSettingsChange: (s) => console.log(s),
205
+ });
206
+
207
+ useReadingGuide(settings.readingGuide, '#ff0000');
208
+
209
+ return (
210
+ <div>
211
+ <button onClick={() => toggleSetting('grayscale')}>
212
+ Toggle Grayscale
213
+ </button>
214
+ <button onClick={() => toggleSetting('invertColors')}>
215
+ Toggle Invert
216
+ </button>
217
+ <button onClick={resetSettings}>
218
+ Reset
219
+ </button>
220
+ </div>
221
+ );
222
+ }
223
+ ```
224
+
225
+ ### Using CSS Instead of JS Injection
226
+
227
+ If you prefer to include styles in your CSS build:
228
+
229
+ ```tsx
230
+ import { accessibilityStylesCSS } from '@swalha1999/a11y-react';
231
+
232
+ // With styled-components
233
+ const GlobalStyles = createGlobalStyle`
234
+ ${accessibilityStylesCSS}
235
+ `;
236
+
237
+ // Or copy to your global CSS file
238
+ ```
239
+
240
+ ### Custom Icons
241
+
242
+ Use the exported icons for your own components:
243
+
244
+ ```tsx
245
+ import { AccessibilityIcon, GrayscaleIcon } from '@swalha1999/a11y-react';
246
+
247
+ function MyComponent() {
248
+ return (
249
+ <button>
250
+ <AccessibilityIcon size={24} />
251
+ <span>Settings</span>
252
+ </button>
253
+ );
254
+ }
255
+ ```
256
+
257
+ ## Browser Support
258
+
259
+ - Chrome (latest)
260
+ - Firefox (latest)
261
+ - Safari (latest)
262
+ - Edge (latest)
263
+
264
+ ## License
265
+
266
+ MIT
package/dist/index.d.mts ADDED
@@ -0,0 +1,181 @@
1
+ import React$1, { CSSProperties, RefObject } from 'react';
2
+
3
+ interface AccessibilityTranslations {
4
+ /** Widget title */
5
+ title: string;
6
+ /** Text size label */
7
+ textSize: string;
8
+ /** Line spacing label */
9
+ lineSpacing: string;
10
+ /** Letter spacing label */
11
+ letterSpacing: string;
12
+ /** Invert colors label */
13
+ invertColors: string;
14
+ /** Grayscale label */
15
+ grayscale: string;
16
+ /** Underline links label */
17
+ underlineLinks: string;
18
+ /** Big cursor label */
19
+ bigCursor: string;
20
+ /** Reading guide label */
21
+ readingGuide: string;
22
+ /** Hide images label */
23
+ hideImages: string;
24
+ /** Reset button label */
25
+ reset: string;
26
+ /** "Normal" value display */
27
+ normal: string;
28
+ /** Close button aria-label */
29
+ close: string;
30
+ /** Text adjustments section label */
31
+ textAdjustments?: string;
32
+ /** Visual adjustments section label */
33
+ visualAdjustments?: string;
34
+ /** Navigation aids section label */
35
+ navigationAids?: string;
36
+ }
37
+ interface AccessibilitySettings {
38
+ textSize: number;
39
+ lineHeight: number;
40
+ letterSpacing: number;
41
+ invertColors: boolean;
42
+ grayscale: boolean;
43
+ underlineLinks: boolean;
44
+ bigCursor: boolean;
45
+ readingGuide: boolean;
46
+ hideImages: boolean;
47
+ }
48
+ interface AccessibilityWidgetStyles {
49
+ /** Button styles */
50
+ button?: CSSProperties;
51
+ /** Button styles when on dark background */
52
+ buttonLight?: CSSProperties;
53
+ /** Button styles when on light background */
54
+ buttonDark?: CSSProperties;
55
+ /** Panel container styles */
56
+ panel?: CSSProperties;
57
+ /** Panel header styles */
58
+ panelHeader?: CSSProperties;
59
+ /** Panel content area styles */
60
+ panelContent?: CSSProperties;
61
+ /** Individual setting item styles */
62
+ settingItem?: CSSProperties;
63
+ /** Control button styles (+/-) */
64
+ controlButton?: CSSProperties;
65
+ /** Toggle switch track styles */
66
+ toggleTrack?: CSSProperties;
67
+ /** Toggle switch thumb styles */
68
+ toggleThumb?: CSSProperties;
69
+ /** Reset button styles */
70
+ resetButton?: CSSProperties;
71
+ /** Overlay styles */
72
+ overlay?: CSSProperties;
73
+ }
74
+ interface AccessibilityWidgetClassNames {
75
+ /** Button class name */
76
+ button?: string;
77
+ /** Panel container class name */
78
+ panel?: string;
79
+ /** Panel header class name */
80
+ panelHeader?: string;
81
+ /** Panel content area class name */
82
+ panelContent?: string;
83
+ /** Individual setting item class name */
84
+ settingItem?: string;
85
+ /** Control button class name (+/-) */
86
+ controlButton?: string;
87
+ /** Toggle switch class name */
88
+ toggle?: string;
89
+ /** Reset button class name */
90
+ resetButton?: string;
91
+ /** Overlay class name */
92
+ overlay?: string;
93
+ }
94
+ interface AccessibilityWidgetProps {
95
+ /** Translation strings for i18n */
96
+ translations: AccessibilityTranslations;
97
+ /** Text direction - 'ltr' or 'rtl' */
98
+ dir?: 'ltr' | 'rtl';
99
+ /** Custom inline styles */
100
+ styles?: AccessibilityWidgetStyles;
101
+ /** Custom class names */
102
+ classNames?: AccessibilityWidgetClassNames;
103
+ /** Position of the floating button */
104
+ position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
105
+ /** Storage key for persisting settings */
106
+ storageKey?: string;
107
+ /** Callback when settings change */
108
+ onSettingsChange?: (settings: AccessibilitySettings) => void;
109
+ /** Initial settings override */
110
+ defaultSettings?: Partial<AccessibilitySettings>;
111
+ /** Z-index for the widget */
112
+ zIndex?: number;
113
+ /** Disable local storage persistence */
114
+ disablePersistence?: boolean;
115
+ /** Custom button icon (React node) */
116
+ buttonIcon?: React.ReactNode;
117
+ /** Primary color for theming */
118
+ primaryColor?: string;
119
+ /** Aria label for the main button */
120
+ buttonAriaLabel?: string;
121
+ }
122
+
123
+ declare const AccessibilityWidget: React$1.FC<AccessibilityWidgetProps>;
124
+
125
+ declare const en: AccessibilityTranslations;
126
+
127
+ declare const ar: AccessibilityTranslations;
128
+
129
+ interface UseAccessibilitySettingsOptions {
130
+ storageKey?: string;
131
+ defaultSettings?: Partial<AccessibilitySettings>;
132
+ onSettingsChange?: (settings: AccessibilitySettings) => void;
133
+ disablePersistence?: boolean;
134
+ }
135
+ declare function useAccessibilitySettings({ storageKey, defaultSettings, onSettingsChange, disablePersistence, }?: UseAccessibilitySettingsOptions): {
136
+ settings: AccessibilitySettings;
137
+ updateSetting: <K extends keyof AccessibilitySettings>(key: K, value: AccessibilitySettings[K]) => void;
138
+ toggleSetting: (key: keyof AccessibilitySettings) => void;
139
+ resetSettings: () => void;
140
+ incrementSetting: (key: "textSize" | "lineHeight" | "letterSpacing", min?: number, max?: number) => void;
141
+ decrementSetting: (key: "textSize" | "lineHeight" | "letterSpacing", min?: number, max?: number) => void;
142
+ };
143
+
144
+ declare function useReadingGuide(enabled: boolean, primaryColor?: string): void;
145
+
146
+ declare function useBackgroundContrast(buttonRef: RefObject<HTMLButtonElement | null>): boolean;
147
+
148
+ /**
149
+ * Injects the global accessibility effect styles into the document.
150
+ * Call this once at the root of your application.
151
+ */
152
+ declare function injectAccessibilityStyles(): void;
153
+ /**
154
+ * Removes the global accessibility effect styles from the document.
155
+ */
156
+ declare function removeAccessibilityStyles(): void;
157
+ /**
158
+ * CSS string for the global accessibility effects.
159
+ * Use this if you prefer to include styles in your own CSS build process.
160
+ */
161
+ declare const accessibilityStylesCSS = "\n/* Accessibility Widget Global Styles */\n\n/* Text scaling - only when class is active */\nbody.a11y-text-scaled *:not([class*=\"a11y-widget\"]) {\n font-size: calc(1em * var(--a11y-text-scale, 1)) !important;\n}\n\n/* Line height - only when class is active */\nbody.a11y-line-height-active *:not([class*=\"a11y-widget\"]) {\n line-height: var(--a11y-line-height, 1.5) !important;\n}\n\n/* Letter spacing - only when class is active */\nbody.a11y-letter-spacing-active *:not([class*=\"a11y-widget\"]) {\n letter-spacing: var(--a11y-letter-spacing, normal) !important;\n}\n\n/* Invert colors - applied to content wrapper */\n#a11y-content-wrapper.a11y-invert {\n filter: invert(1) hue-rotate(180deg);\n}\n\n#a11y-content-wrapper.a11y-invert img:not(.a11y-widget-icon),\n#a11y-content-wrapper.a11y-invert video,\n#a11y-content-wrapper.a11y-invert [style*=\"background-image\"],\n#a11y-content-wrapper.a11y-invert canvas,\n#a11y-content-wrapper.a11y-invert svg:not(.a11y-widget-icon) {\n filter: invert(1) hue-rotate(180deg);\n}\n\n/* Grayscale - applied to content wrapper */\n#a11y-content-wrapper.a11y-grayscale {\n filter: grayscale(100%);\n}\n\n/* Underline links */\nbody.a11y-underline-links a {\n text-decoration: underline !important;\n text-decoration-thickness: 2px !important;\n text-underline-offset: 3px !important;\n}\n\n/* Big cursor */\nbody.a11y-big-cursor,\nbody.a11y-big-cursor * {\n cursor: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"><path fill=\"%232d2d2d\" stroke=\"white\" stroke-width=\"2\" d=\"M10 3l20 15-8 2-4 9-5-3 4-8-7-2z\"/></svg>') 8 8, auto !important;\n}\n\n/* Hide images */\nbody.a11y-hide-images img,\nbody.a11y-hide-images [role=\"img\"],\nbody.a11y-hide-images svg:not([class*=\"a11y\"]) {\n opacity: 0 !important;\n pointer-events: none !important;\n}\n";
162
+
163
+ interface IconProps {
164
+ size?: number;
165
+ className?: string;
166
+ 'aria-hidden'?: boolean;
167
+ }
168
+ declare const AccessibilityIcon: React$1.FC<IconProps>;
169
+ declare const TextSizeIcon: React$1.FC<IconProps>;
170
+ declare const LineHeightIcon: React$1.FC<IconProps>;
171
+ declare const LetterSpacingIcon: React$1.FC<IconProps>;
172
+ declare const InvertIcon: React$1.FC<IconProps>;
173
+ declare const GrayscaleIcon: React$1.FC<IconProps>;
174
+ declare const LinkIcon: React$1.FC<IconProps>;
175
+ declare const CursorIcon: React$1.FC<IconProps>;
176
+ declare const ReadingGuideIcon: React$1.FC<IconProps>;
177
+ declare const ImageIcon: React$1.FC<IconProps>;
178
+ declare const ResetIcon: React$1.FC<IconProps>;
179
+ declare const CloseIcon: React$1.FC<IconProps>;
180
+
181
+ export { AccessibilityIcon, type AccessibilitySettings, type AccessibilityTranslations, AccessibilityWidget, type AccessibilityWidgetClassNames, type AccessibilityWidgetProps, type AccessibilityWidgetStyles, CloseIcon, CursorIcon, GrayscaleIcon, ImageIcon, InvertIcon, LetterSpacingIcon, LineHeightIcon, LinkIcon, ReadingGuideIcon, ResetIcon, TextSizeIcon, accessibilityStylesCSS, ar, en, injectAccessibilityStyles, removeAccessibilityStyles, useAccessibilitySettings, useBackgroundContrast, useReadingGuide };
package/dist/index.d.ts ADDED
@@ -0,0 +1,181 @@
1
+ import React$1, { CSSProperties, RefObject } from 'react';
2
+
3
+ interface AccessibilityTranslations {
4
+ /** Widget title */
5
+ title: string;
6
+ /** Text size label */
7
+ textSize: string;
8
+ /** Line spacing label */
9
+ lineSpacing: string;
10
+ /** Letter spacing label */
11
+ letterSpacing: string;
12
+ /** Invert colors label */
13
+ invertColors: string;
14
+ /** Grayscale label */
15
+ grayscale: string;
16
+ /** Underline links label */
17
+ underlineLinks: string;
18
+ /** Big cursor label */
19
+ bigCursor: string;
20
+ /** Reading guide label */
21
+ readingGuide: string;
22
+ /** Hide images label */
23
+ hideImages: string;
24
+ /** Reset button label */
25
+ reset: string;
26
+ /** "Normal" value display */
27
+ normal: string;
28
+ /** Close button aria-label */
29
+ close: string;
30
+ /** Text adjustments section label */
31
+ textAdjustments?: string;
32
+ /** Visual adjustments section label */
33
+ visualAdjustments?: string;
34
+ /** Navigation aids section label */
35
+ navigationAids?: string;
36
+ }
37
+ interface AccessibilitySettings {
38
+ textSize: number;
39
+ lineHeight: number;
40
+ letterSpacing: number;
41
+ invertColors: boolean;
42
+ grayscale: boolean;
43
+ underlineLinks: boolean;
44
+ bigCursor: boolean;
45
+ readingGuide: boolean;
46
+ hideImages: boolean;
47
+ }
48
+ interface AccessibilityWidgetStyles {
49
+ /** Button styles */
50
+ button?: CSSProperties;
51
+ /** Button styles when on dark background */
52
+ buttonLight?: CSSProperties;
53
+ /** Button styles when on light background */
54
+ buttonDark?: CSSProperties;
55
+ /** Panel container styles */
56
+ panel?: CSSProperties;
57
+ /** Panel header styles */
58
+ panelHeader?: CSSProperties;
59
+ /** Panel content area styles */
60
+ panelContent?: CSSProperties;
61
+ /** Individual setting item styles */
62
+ settingItem?: CSSProperties;
63
+ /** Control button styles (+/-) */
64
+ controlButton?: CSSProperties;
65
+ /** Toggle switch track styles */
66
+ toggleTrack?: CSSProperties;
67
+ /** Toggle switch thumb styles */
68
+ toggleThumb?: CSSProperties;
69
+ /** Reset button styles */
70
+ resetButton?: CSSProperties;
71
+ /** Overlay styles */
72
+ overlay?: CSSProperties;
73
+ }
74
+ interface AccessibilityWidgetClassNames {
75
+ /** Button class name */
76
+ button?: string;
77
+ /** Panel container class name */
78
+ panel?: string;
79
+ /** Panel header class name */
80
+ panelHeader?: string;
81
+ /** Panel content area class name */
82
+ panelContent?: string;
83
+ /** Individual setting item class name */
84
+ settingItem?: string;
85
+ /** Control button class name (+/-) */
86
+ controlButton?: string;
87
+ /** Toggle switch class name */
88
+ toggle?: string;
89
+ /** Reset button class name */
90
+ resetButton?: string;
91
+ /** Overlay class name */
92
+ overlay?: string;
93
+ }
94
+ interface AccessibilityWidgetProps {
95
+ /** Translation strings for i18n */
96
+ translations: AccessibilityTranslations;
97
+ /** Text direction - 'ltr' or 'rtl' */
98
+ dir?: 'ltr' | 'rtl';
99
+ /** Custom inline styles */
100
+ styles?: AccessibilityWidgetStyles;
101
+ /** Custom class names */
102
+ classNames?: AccessibilityWidgetClassNames;
103
+ /** Position of the floating button */
104
+ position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
105
+ /** Storage key for persisting settings */
106
+ storageKey?: string;
107
+ /** Callback when settings change */
108
+ onSettingsChange?: (settings: AccessibilitySettings) => void;
109
+ /** Initial settings override */
110
+ defaultSettings?: Partial<AccessibilitySettings>;
111
+ /** Z-index for the widget */
112
+ zIndex?: number;
113
+ /** Disable local storage persistence */
114
+ disablePersistence?: boolean;
115
+ /** Custom button icon (React node) */
116
+ buttonIcon?: React.ReactNode;
117
+ /** Primary color for theming */
118
+ primaryColor?: string;
119
+ /** Aria label for the main button */
120
+ buttonAriaLabel?: string;
121
+ }
122
+
123
+ declare const AccessibilityWidget: React$1.FC<AccessibilityWidgetProps>;
124
+
125
+ declare const en: AccessibilityTranslations;
126
+
127
+ declare const ar: AccessibilityTranslations;
128
+
129
+ interface UseAccessibilitySettingsOptions {
130
+ storageKey?: string;
131
+ defaultSettings?: Partial<AccessibilitySettings>;
132
+ onSettingsChange?: (settings: AccessibilitySettings) => void;
133
+ disablePersistence?: boolean;
134
+ }
135
+ declare function useAccessibilitySettings({ storageKey, defaultSettings, onSettingsChange, disablePersistence, }?: UseAccessibilitySettingsOptions): {
136
+ settings: AccessibilitySettings;
137
+ updateSetting: <K extends keyof AccessibilitySettings>(key: K, value: AccessibilitySettings[K]) => void;
138
+ toggleSetting: (key: keyof AccessibilitySettings) => void;
139
+ resetSettings: () => void;
140
+ incrementSetting: (key: "textSize" | "lineHeight" | "letterSpacing", min?: number, max?: number) => void;
141
+ decrementSetting: (key: "textSize" | "lineHeight" | "letterSpacing", min?: number, max?: number) => void;
142
+ };
143
+
144
+ declare function useReadingGuide(enabled: boolean, primaryColor?: string): void;
145
+
146
+ declare function useBackgroundContrast(buttonRef: RefObject<HTMLButtonElement | null>): boolean;
147
+
148
+ /**
149
+ * Injects the global accessibility effect styles into the document.
150
+ * Call this once at the root of your application.
151
+ */
152
+ declare function injectAccessibilityStyles(): void;
153
+ /**
154
+ * Removes the global accessibility effect styles from the document.
155
+ */
156
+ declare function removeAccessibilityStyles(): void;
157
+ /**
158
+ * CSS string for the global accessibility effects.
159
+ * Use this if you prefer to include styles in your own CSS build process.
160
+ */
161
+ declare const accessibilityStylesCSS = "\n/* Accessibility Widget Global Styles */\n\n/* Text scaling - only when class is active */\nbody.a11y-text-scaled *:not([class*=\"a11y-widget\"]) {\n font-size: calc(1em * var(--a11y-text-scale, 1)) !important;\n}\n\n/* Line height - only when class is active */\nbody.a11y-line-height-active *:not([class*=\"a11y-widget\"]) {\n line-height: var(--a11y-line-height, 1.5) !important;\n}\n\n/* Letter spacing - only when class is active */\nbody.a11y-letter-spacing-active *:not([class*=\"a11y-widget\"]) {\n letter-spacing: var(--a11y-letter-spacing, normal) !important;\n}\n\n/* Invert colors - applied to content wrapper */\n#a11y-content-wrapper.a11y-invert {\n filter: invert(1) hue-rotate(180deg);\n}\n\n#a11y-content-wrapper.a11y-invert img:not(.a11y-widget-icon),\n#a11y-content-wrapper.a11y-invert video,\n#a11y-content-wrapper.a11y-invert [style*=\"background-image\"],\n#a11y-content-wrapper.a11y-invert canvas,\n#a11y-content-wrapper.a11y-invert svg:not(.a11y-widget-icon) {\n filter: invert(1) hue-rotate(180deg);\n}\n\n/* Grayscale - applied to content wrapper */\n#a11y-content-wrapper.a11y-grayscale {\n filter: grayscale(100%);\n}\n\n/* Underline links */\nbody.a11y-underline-links a {\n text-decoration: underline !important;\n text-decoration-thickness: 2px !important;\n text-underline-offset: 3px !important;\n}\n\n/* Big cursor */\nbody.a11y-big-cursor,\nbody.a11y-big-cursor * {\n cursor: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"><path fill=\"%232d2d2d\" stroke=\"white\" stroke-width=\"2\" d=\"M10 3l20 15-8 2-4 9-5-3 4-8-7-2z\"/></svg>') 8 8, auto !important;\n}\n\n/* Hide images */\nbody.a11y-hide-images img,\nbody.a11y-hide-images [role=\"img\"],\nbody.a11y-hide-images svg:not([class*=\"a11y\"]) {\n opacity: 0 !important;\n pointer-events: none !important;\n}\n";
162
+
163
+ interface IconProps {
164
+ size?: number;
165
+ className?: string;
166
+ 'aria-hidden'?: boolean;
167
+ }
168
+ declare const AccessibilityIcon: React$1.FC<IconProps>;
169
+ declare const TextSizeIcon: React$1.FC<IconProps>;
170
+ declare const LineHeightIcon: React$1.FC<IconProps>;
171
+ declare const LetterSpacingIcon: React$1.FC<IconProps>;
172
+ declare const InvertIcon: React$1.FC<IconProps>;
173
+ declare const GrayscaleIcon: React$1.FC<IconProps>;
174
+ declare const LinkIcon: React$1.FC<IconProps>;
175
+ declare const CursorIcon: React$1.FC<IconProps>;
176
+ declare const ReadingGuideIcon: React$1.FC<IconProps>;
177
+ declare const ImageIcon: React$1.FC<IconProps>;
178
+ declare const ResetIcon: React$1.FC<IconProps>;
179
+ declare const CloseIcon: React$1.FC<IconProps>;
180
+
181
+ export { AccessibilityIcon, type AccessibilitySettings, type AccessibilityTranslations, AccessibilityWidget, type AccessibilityWidgetClassNames, type AccessibilityWidgetProps, type AccessibilityWidgetStyles, CloseIcon, CursorIcon, GrayscaleIcon, ImageIcon, InvertIcon, LetterSpacingIcon, LineHeightIcon, LinkIcon, ReadingGuideIcon, ResetIcon, TextSizeIcon, accessibilityStylesCSS, ar, en, injectAccessibilityStyles, removeAccessibilityStyles, useAccessibilitySettings, useBackgroundContrast, useReadingGuide };