{"_id":"@_goodapps/react-a11y-widget","name":"@_goodapps/react-a11y-widget","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"@_goodapps/react-a11y-widget","version":"1.1.0","description":"Accessible, customizable accessibility widget for React apps. Includes font sizing, high contrast, dyslexia font, reading guide, animation control, and more.","author":{"name":"GoodApps"},"license":"MIT","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles":"./dist/styles.css"},"sideEffects":["**/*.css"],"scripts":{"build":"tsup","dev":"tsup --watch","lint":"tsc --noEmit","prepublishOnly":"npm run build"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","zustand":">=4.0.0"},"peerDependenciesMeta":{"zustand":{"optional":false}},"devDependencies":{"@types/react":"^19.0.0","@types/react-dom":"^19.0.0","react":"^19.0.0","react-dom":"^19.0.0","tsup":"^8.0.0","typescript":"^5.5.0","zustand":"^5.0.0"},"keywords":["react","accessibility","a11y","widget","wcag","high-contrast","dyslexia","font-size","reading-guide","goodapps"],"repository":{"type":"git","url":"git+https://github.com/goodappsvdr/react-a11y-widget.git"},"_id":"@_goodapps/react-a11y-widget@1.1.0","bugs":{"url":"https://github.com/goodappsvdr/react-a11y-widget/issues"},"homepage":"https://github.com/goodappsvdr/react-a11y-widget#readme","_nodeVersion":"25.1.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-VV4333Lux8hnoz3A4M1Lceo7X+MrH5i939eOZaVawjCsMX06oLm+GnbQc0qWHCPUDHhTmiwYQ62ZfTsGwE20pA==","shasum":"20559ea8d14b62f112005144e3ad9b2ef269fe95","tarball":"https://registry.npmjs.org/@_goodapps/react-a11y-widget/-/react-a11y-widget-1.1.0.tgz","fileCount":11,"unpackedSize":178330,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCW86tFmT0/STURTN8JrhWIG65k0VZJ/llLd1+QJvZAlAIgBxE+Y+UztRV+PD+BkCWGNKdXr8jLpRt4i/CAzxb8Xc0="}]},"_npmUser":{"name":"mateodev","email":"zavalamateo14@gmail.com"},"directories":{},"maintainers":[{"name":"mateodev","email":"zavalamateo14@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-a11y-widget_1.1.0_1772819768472_0.5980141126564942"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-06T17:56:08.342Z","1.1.0":"2026-03-06T17:56:08.633Z","modified":"2026-03-06T17:56:08.896Z"},"maintainers":[{"name":"mateodev","email":"zavalamateo14@gmail.com"}],"description":"Accessible, customizable accessibility widget for React apps. Includes font sizing, high contrast, dyslexia font, reading guide, animation control, and more.","homepage":"https://github.com/goodappsvdr/react-a11y-widget#readme","keywords":["react","accessibility","a11y","widget","wcag","high-contrast","dyslexia","font-size","reading-guide","goodapps"],"repository":{"type":"git","url":"git+https://github.com/goodappsvdr/react-a11y-widget.git"},"author":{"name":"GoodApps"},"bugs":{"url":"https://github.com/goodappsvdr/react-a11y-widget/issues"},"license":"MIT","readme":"# @goodapps/react-a11y-widget\r\n\r\n> Widget de accesibilidad para React — personalizable, persistente y listo para producción.\r\n\r\nUn componente flotante que agrega **9 herramientas de accesibilidad** a cualquier aplicación React. Las preferencias del usuario se guardan automáticamente en `localStorage` y se aplican como clases CSS en ``, haciendo tu app más inclusiva sin esfuerzo.\r\n\r\n![React](https://img.shields.io/badge/React-%E2%89%A518-blue?logo=react)\r\n![TypeScript](https://img.shields.io/badge/TypeScript-strict-blue?logo=typescript)\r\n![License](https://img.shields.io/badge/License-MIT-green)\r\n\r\n---\r\n\r\n## ✨ Features\r\n\r\n| Feature | Descripción |\r\n| ------------------------ | --------------------------------------------------- |\r\n| **Tamaño de fuente** | 3 niveles: Normal → Grande → Extra grande |\r\n| **Separación de texto** | Aumenta `letter-spacing` y `line-height` |\r\n| **Fuente para dislexia** | Activa OpenDyslexic (cargada auto. via CDN) |\r\n| **Alto contraste** | Fuerza fondo negro + texto blanco + bordes |\r\n| **Resaltar enlaces** | Subraya y colorea todos los `` visibles |\r\n| **Pausar animaciones** | Inyecta `* { animation: none !important }` |\r\n| **Cursor grande** | Agranda el puntero del mouse |\r\n| **Guía de lectura** | Línea horizontal que sigue al cursor (solo desktop) |\r\n| **Saturación** | 3 niveles: Normal → Gris → Vívido |\r\n\r\nExtras:\r\n\r\n- **Persistencia automática** — las preferencias se guardan en `localStorage`.\r\n- **Auto-detección** — detecta `prefers-reduced-motion` del SO.\r\n- **Touch-aware** — la guía de lectura se oculta en dispositivos táctiles.\r\n- **Dark mode** — soporte nativo para la clase `.dark` en ``.\r\n- **i18n** — todos los textos son customizables via prop `labels`.\r\n- **Accesible** — ARIA labels, foco con teclado, cierre con Escape.\r\n- **Zero dependencies** — solo peer deps: `react`, `react-dom`, `zustand`.\r\n- **SSR-safe** — incluye banner `\"use client\"` para Next.js / RSC.\r\n\r\n---\r\n\r\n## 📦 Instalación\r\n\r\n```bash\r\n# pnpm (recomendado)\r\npnpm add @goodapps/react-a11y-widget zustand\r\n\r\n# npm\r\nnpm install @goodapps/react-a11y-widget zustand\r\n\r\n# bun\r\nbun add @goodapps/react-a11y-widget zustand\r\n```\r\n\r\n> `zustand` es peer dependency. Si ya lo tenés instalado, no es necesario agregarlo de nuevo.\r\n\r\n---\r\n\r\n## 🚀 Uso Básico\r\n\r\n```tsx\r\nimport { AccessibilityWidget } from \"@goodapps/react-a11y-widget\";\r\nimport \"@goodapps/react-a11y-widget/styles\";\r\n\r\nfunction App() {\r\n return (\r\n <>\r\n \r\n \r\n \r\n );\r\n}\r\n```\r\n\r\nEso es todo. El widget aparece como un botón flotante en la esquina inferior izquierda. Al hacer clic se abre un panel con todas las opciones.\r\n\r\n---\r\n\r\n## ⚙️ Props\r\n\r\n```tsx\r\ninterface AccessibilityWidgetProps {\r\n /** Posición del widget (default: \"bottom-left\") */\r\n position?: \"bottom-left\" | \"bottom-right\" | \"top-left\" | \"top-right\";\r\n\r\n /** Features a mostrar — por defecto todas activas */\r\n features?: A11yFeatureFlags;\r\n\r\n /** Labels customizables para i18n */\r\n labels?: A11yLabels;\r\n\r\n /** Clase CSS adicional en el contenedor root */\r\n className?: string;\r\n\r\n /** Auto-detectar prefers-reduced-motion del SO (default: true) */\r\n autoDetectMotion?: boolean;\r\n\r\n /** Z-index del widget (default: 9999) */\r\n zIndex?: number;\r\n}\r\n```\r\n\r\n### `features` — Mostrar/ocultar opciones\r\n\r\n```tsx\r\n\r\n```\r\n\r\nPasá `false` en cualquier feature para ocultarla. Por ejemplo, para mostrar solo las opciones de texto:\r\n\r\n```tsx\r\n\r\n```\r\n\r\n### `labels` — Internacionalización (i18n)\r\n\r\nTodos los textos del widget son customizables. Pasá un objeto parcial y solo se sobreescribirán los textos que incluyas:\r\n\r\n```tsx\r\n\r\n```\r\n\r\n### `position` — Posición del widget\r\n\r\n```tsx\r\n\r\n\r\n\r\n```\r\n\r\n---\r\n\r\n## 🎨 Theming (CSS Variables)\r\n\r\nEl widget usa **CSS Custom Properties** prefijadas con `--ga11y-`. Sobreescribirlas permite adaptar la apariencia a tu brand sin tocar una sola línea de JS:\r\n\r\n```css\r\n:root {\r\n /* Core colors */\r\n --ga11y-primary: #172c3f;\r\n --ga11y-primary-fg: #ffffff;\r\n --ga11y-bg: #ffffff;\r\n --ga11y-fg: #0f172a;\r\n --ga11y-muted: #f1f5f9;\r\n --ga11y-muted-fg: #64748b;\r\n --ga11y-border: #e2e8f0;\r\n --ga11y-ring: #009ee3;\r\n\r\n /* Panel */\r\n --ga11y-panel-bg: rgba(255, 255, 255, 0.95);\r\n --ga11y-panel-backdrop: blur(12px);\r\n --ga11y-panel-shadow: 0 24px 64px rgba(0, 0, 0, 0.15);\r\n --ga11y-panel-radius: 1rem;\r\n --ga11y-panel-width: 320px;\r\n --ga11y-panel-max-height: 70vh;\r\n\r\n /* FAB (Floating Action Button) */\r\n --ga11y-fab-size: 48px;\r\n --ga11y-fab-radius: 50%;\r\n --ga11y-fab-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);\r\n\r\n /* Options */\r\n --ga11y-option-radius: 0.75rem;\r\n --ga11y-option-active-bg: rgba(23, 44, 63, 0.08);\r\n --ga11y-option-active-border: rgba(23, 44, 63, 0.25);\r\n\r\n /* Toggle */\r\n --ga11y-toggle-bg: rgba(100, 116, 139, 0.25);\r\n --ga11y-toggle-active-bg: var(--ga11y-primary);\r\n\r\n /* Typography */\r\n --ga11y-font: inherit;\r\n --ga11y-font-sm: 0.875rem;\r\n --ga11y-font-xs: 0.75rem;\r\n --ga11y-font-2xs: 0.6875rem;\r\n}\r\n```\r\n\r\n### Dark Mode\r\n\r\nEl CSS incluye overrides automáticos para la clase `.dark` en tu `` o ``:\r\n\r\n```css\r\n/* Ya incluido en los estilos — solo agregá .dark a tu */\r\n.dark {\r\n --ga11y-primary: #009ee3;\r\n --ga11y-bg: #172c3f;\r\n --ga11y-fg: #f8fafc;\r\n --ga11y-panel-bg: rgba(23, 44, 63, 0.95);\r\n /* ... */\r\n}\r\n```\r\n\r\n### Ejemplo: Brand verde\r\n\r\n```css\r\n:root {\r\n --ga11y-primary: #16a34a;\r\n --ga11y-ring: #22c55e;\r\n --ga11y-option-active-bg: rgba(22, 163, 74, 0.08);\r\n --ga11y-option-active-border: rgba(22, 163, 74, 0.25);\r\n}\r\n```\r\n\r\n---\r\n\r\n## 🔧 Uso Avanzado\r\n\r\n### Hook: `useA11y`\r\n\r\nEste hook sincroniza el store con clases CSS en ``. Se llama automáticamente dentro del widget, pero podés usarlo por separado si necesitás un layout custom:\r\n\r\n```tsx\r\nimport { useA11y } from \"@goodapps/react-a11y-widget\";\r\n\r\nfunction MyCustomLayout() {\r\n useA11y(); // Sincroniza las clases de accesibilidad\r\n\r\n return

...

;\r\n}\r\n```\r\n\r\n### Store: `useA11yStore`\r\n\r\nAcceso directo al store de Zustand para controlar las opciones programáticamente:\r\n\r\n```tsx\r\nimport { useA11yStore } from \"@goodapps/react-a11y-widget\";\r\n\r\nfunction MyToggle() {\r\n const { highContrast, toggleHighContrast, getActiveCount } = useA11yStore();\r\n\r\n return (\r\n

\r\n

Opciones activas: {getActiveCount()}

\r\n \r\n

\r\n );\r\n}\r\n```\r\n\r\n### Acciones disponibles en el store\r\n\r\n```tsx\r\ninterface A11yActions {\r\n setFontSize: (level: number) => void; // 0 | 1 | 2\r\n toggleHighContrast: () => void;\r\n toggleHighlightLinks: () => void;\r\n togglePauseAnimations: () => void;\r\n toggleDyslexiaFont: () => void;\r\n toggleBigCursor: () => void;\r\n toggleReadingGuide: () => void;\r\n toggleTextSpacing: () => void;\r\n setSaturation: (level: number) => void; // 0 | 1 | 2\r\n resetAll: () => void;\r\n getActiveCount: () => number;\r\n}\r\n```\r\n\r\n---\r\n\r\n## 📐 Clases CSS inyectadas\r\n\r\nEl hook agrega/quita estas clases en `` automáticamente. Podés usarlas en tu CSS para estilos condicionales:\r\n\r\n| Clase | Cuándo se aplica |\r\n| ----------------------- | ---------------------------------- |\r\n| `a11y-font-lg` | Fuente nivel 1 (grande) |\r\n| `a11y-font-xl` | Fuente nivel 2 (extra grande) |\r\n| `a11y-text-spacing` | Separación de texto activa |\r\n| `a11y-dyslexia-font` | Fuente OpenDyslexic activa |\r\n| `a11y-high-contrast` | Alto contraste activo |\r\n| `a11y-highlight-links` | Resaltado de enlaces activo |\r\n| `a11y-pause-animations` | Animaciones pausadas |\r\n| `a11y-big-cursor` | Cursor grande activo |\r\n| `a11y-reading-guide` | Guía de lectura activa |\r\n| `a11y-saturation-low` | Saturación baja (escala de grises) |\r\n| `a11y-saturation-high` | Saturación alta (vívido) |\r\n\r\nLos estilos para estas clases ya están incluidos en `@goodapps/react-a11y-widget/styles`. Si querés mayor control, podés importar solo el widget y manejar tus propios estilos basándote en estas clases.\r\n\r\n---\r\n\r\n## 📁 Estructura del paquete\r\n\r\n```\r\ndist/\r\n├── index.js # ESM\r\n├── index.cjs # CommonJS\r\n├── index.d.ts # TypeScript declarations\r\n├── index.d.cts # CTS declarations\r\n└── styles.css # Stylesheet\r\n```\r\n\r\n### Exports\r\n\r\n```json\r\n{\r\n \".\": {\r\n \"import\": \"./dist/index.js\",\r\n \"require\": \"./dist/index.cjs\"\r\n },\r\n \"./styles\": \"./dist/styles.css\"\r\n}\r\n```\r\n\r\n---\r\n\r\n## 🧩 Compatibilidad\r\n\r\n| Requisito | Versión |\r\n| ---------- | --------------------------------------------------- |\r\n| React | ≥ 18.0.0 |\r\n| React DOM | ≥ 18.0.0 |\r\n| Zustand | ≥ 4.0.0 |\r\n| TypeScript | ≥ 5.0 (opcional) |\r\n| Browsers | Todos los evergreen (Chrome, Firefox, Safari, Edge) |\r\n\r\nFunciona con: **Vite**, **Next.js** (App Router y Pages Router), **Remix**, **CRA**, **Astro** (React islands), y cualquier setup que soporte React.\r\n\r\n---\r\n\r\n## 📄 Licencia\r\n\r\n[MIT](./LICENSE) — GoodApps\r\n","readmeFilename":"README.md","_rev":"1-2319d7ef843a0993bd99c0ddc23d7e40"}