ngp-accessibility 1.0.2 → 1.0.5

package/README.md

@@ -26,8 +26,8 @@ npm install ngp-accessibility
 ### Option 1: Toolbar (Horizontal)
 
 ```jsx
-import { AccessibilityProvider, AccessibilityToolbar } from 'ngp-accessibility';
-import 'ngp-accessibility/dist/styles.css';
+import { AccessibilityProvider, AccessibilityToolbar } from "ngp-accessibility";
+import "ngp-accessibility/dist/styles.css";
 
 function App() {
   return (
@@ -42,13 +42,16 @@ function App() {
 ### Option 2: Dropdown Button
 
 ```jsx
-import { AccessibilityProvider, AccessibilityDropdown } from 'ngp-accessibility';
-import 'ngp-accessibility/dist/styles.css';
+import {
+  AccessibilityProvider,
+  AccessibilityDropdown,
+} from "ngp-accessibility";
+import "ngp-accessibility/dist/styles.css";
 
 function App() {
   return (
     <AccessibilityProvider>
-      <div style={{ textAlign: 'right', padding: '10px' }}>
+      <div style={{ textAlign: "right", padding: "10px" }}>
         <AccessibilityDropdown />
       </div>
       <YourContent />
@@ -60,6 +63,7 @@ function App() {
 ## Voice Commands
 
 When voice command is enabled, you can use:
+
 - "increase text" / "palakihin"
 - "decrease text" / "paliitin"
 - "high contrast" / "mataas"
@@ -71,10 +75,13 @@ When voice command is enabled, you can use:
 ## API
 
 ### AccessibilityProvider
+
 Wrap your app with this provider.
 
 ### useAccessibility()
+
 Hook that returns:
+
 - `language`, `setLanguage(lang)`
 - `textSize`, `increaseText()`, `decreaseText()`
 - `highContrast`, `toggleHighContrast()`
@@ -86,11 +93,77 @@ Hook that returns:
 - `translate(key)` - Get translated text
 
 ### AccessibilityToolbar
+
 Pre-built toolbar component with all controls.
 
+## Redesign And Theming
+
+You can fully redesign the package UI in 3 ways:
+
+### 1. Override CSS variables (fastest)
+
+```css
+:root {
+  --ngp-a11y-bg: #101418;
+  --ngp-a11y-surface: #1b232c;
+  --ngp-a11y-surface-hover: #243241;
+  --ngp-a11y-text: #f2f6fa;
+  --ngp-a11y-border: #2d3a48;
+  --ngp-a11y-accent: #16a34a;
+  --ngp-a11y-accent-hover: #15803d;
+  --ngp-a11y-accent-text: #ffffff;
+  --ngp-a11y-radius: 999px;
+}
+```
+
+### 2. Pass custom classes to sub-elements
+
+```tsx
+<AccessibilityToolbar
+  className="my-toolbar"
+  classes={{
+    button: "my-btn",
+    activeButton: "my-btn-active",
+    select: "my-select",
+  }}
+/>
+```
+
+```tsx
+<AccessibilityDropdown
+  classes={{
+    toggle: "my-toggle",
+    menu: "my-menu",
+    section: "my-section",
+    button: "my-btn",
+    activeButton: "my-btn-active",
+  }}
+/>
+```
+
+### 3. Replace the dropdown trigger UI entirely
+
+```tsx
+<AccessibilityDropdown
+  renderTrigger={({ isOpen, toggle, className }) => (
+    <button className={`${className} custom-trigger`} onClick={toggle}>
+      {isOpen ? "Close Tools" : "Open Accessibility"}
+    </button>
+  )}
+/>
+```
+
+TypeScript users can import the prop types directly:
+
+- `AccessibilityToolbarProps`
+- `AccessibilityToolbarClasses`
+- `AccessibilityDropdownProps`
+- `AccessibilityDropdownClasses`
+
 ## Full Documentation
 
 For complete documentation including:
+
 - Full page translation guide
 - Custom toolbar examples
 - TypeScript support

package/dist/AccessibilityContext.d.ts

@@ -1,12 +1,16 @@
-import React, { ReactNode } from 'react';
-import { Language, TranslationKey } from './translations';
+import React, { ReactNode } from "react";
+import { Language, TranslationKey } from "./translations";
 interface AccessibilityState {
     language: Language;
     textSize: number;
+    textMagnifier: boolean;
+    pauseAnimations: boolean;
+    readingGuide: boolean;
     highContrast: boolean;
     negativeContrast: boolean;
     lightBackground: boolean;
     underlineLinks: boolean;
+    highlightTitles: boolean;
     readableFont: boolean;
     voiceEnabled: boolean;
 }
@@ -14,10 +18,14 @@ interface AccessibilityContextType extends AccessibilityState {
     setLanguage: (lang: Language) => void;
     increaseText: () => void;
     decreaseText: () => void;
+    toggleTextMagnifier: () => void;
+    togglePauseAnimations: () => void;
+    toggleReadingGuide: () => void;
     toggleHighContrast: () => void;
     toggleNegativeContrast: () => void;
     toggleLightBackground: () => void;
     toggleUnderlineLinks: () => void;
+    toggleHighlightTitles: () => void;
     toggleReadableFont: () => void;
     toggleVoice: () => void;
     translate: (key: TranslationKey) => string;
@@ -25,7 +33,7 @@ interface AccessibilityContextType extends AccessibilityState {
 }
 interface AccessibilityProviderProps {
     children: ReactNode;
-    translations?: Record<string, Record<string, any>>;
+    translations?: Partial<Record<Language, Record<string, string>>>;
 }
 export declare const AccessibilityProvider: React.FC<AccessibilityProviderProps>;
 export declare const useAccessibility: () => AccessibilityContextType;

package/dist/AccessibilityDropdown.d.ts

@@ -1,2 +1,21 @@
-import React from 'react';
-export declare const AccessibilityDropdown: React.FC;
+import React from "react";
+export interface AccessibilityDropdownClasses {
+    root?: string;
+    trigger?: string;
+    panel?: string;
+    panelHeader?: string;
+    closeButton?: string;
+}
+export interface AccessibilityDropdownRenderTriggerProps {
+    isOpen: boolean;
+    toggle: () => void;
+    className: string;
+}
+export interface AccessibilityDropdownProps {
+    className?: string;
+    style?: React.CSSProperties;
+    classes?: AccessibilityDropdownClasses;
+    triggerLabel?: string;
+    renderTrigger?: (props: AccessibilityDropdownRenderTriggerProps) => React.ReactNode;
+}
+export declare const AccessibilityDropdown: React.FC<AccessibilityDropdownProps>;

package/dist/AccessibilityToolbar.d.ts

@@ -1,2 +1,14 @@
-import React from 'react';
-export declare const AccessibilityToolbar: React.FC;
+import React from "react";
+export interface AccessibilityToolbarClasses {
+    root?: string;
+    select?: string;
+    button?: string;
+    activeButton?: string;
+    voiceButton?: string;
+}
+export interface AccessibilityToolbarProps {
+    className?: string;
+    style?: React.CSSProperties;
+    classes?: AccessibilityToolbarClasses;
+}
+export declare const AccessibilityToolbar: React.FC<AccessibilityToolbarProps>;

package/dist/index.d.ts

@@ -1,6 +1,8 @@
-export { AccessibilityProvider, useAccessibility } from './AccessibilityContext';
-export { AccessibilityToolbar } from './AccessibilityToolbar';
-export { AccessibilityDropdown } from './AccessibilityDropdown';
-export { T } from './T';
-export { translations, type Language, type TranslationKey } from './translations';
-export type { default as React } from 'react';
+export { AccessibilityProvider, useAccessibility, } from "./AccessibilityContext";
+export { AccessibilityToolbar } from "./AccessibilityToolbar";
+export { AccessibilityDropdown } from "./AccessibilityDropdown";
+export { T } from "./T";
+export { translations, type Language, type TranslationKey, } from "./translations";
+export type { AccessibilityToolbarProps, AccessibilityToolbarClasses, } from "./AccessibilityToolbar";
+export type { AccessibilityDropdownProps, AccessibilityDropdownClasses, } from "./AccessibilityDropdown";
+export type { default as React } from "react";