ngp-accessibility 1.0.1 → 1.0.3

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

@@ -0,0 +1,32 @@
+import React, { ReactNode } from "react";
+import { Language, TranslationKey } from "./translations";
+interface AccessibilityState {
+    language: Language;
+    textSize: number;
+    highContrast: boolean;
+    negativeContrast: boolean;
+    lightBackground: boolean;
+    underlineLinks: boolean;
+    readableFont: boolean;
+    voiceEnabled: boolean;
+}
+interface AccessibilityContextType extends AccessibilityState {
+    setLanguage: (lang: Language) => void;
+    increaseText: () => void;
+    decreaseText: () => void;
+    toggleHighContrast: () => void;
+    toggleNegativeContrast: () => void;
+    toggleLightBackground: () => void;
+    toggleUnderlineLinks: () => void;
+    toggleReadableFont: () => void;
+    toggleVoice: () => void;
+    translate: (key: TranslationKey) => string;
+    t: (key: string) => string;
+}
+interface AccessibilityProviderProps {
+    children: ReactNode;
+    translations?: Partial<Record<Language, Record<string, string>>>;
+}
+export declare const AccessibilityProvider: React.FC<AccessibilityProviderProps>;
+export declare const useAccessibility: () => AccessibilityContextType;
+export {};

package/dist/AccessibilityDropdown.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+export interface AccessibilityDropdownClasses {
+    root?: string;
+    toggle?: string;
+    menu?: string;
+    section?: string;
+    label?: string;
+    select?: string;
+    button?: string;
+    activeButton?: string;
+    voiceButton?: string;
+}
+export interface AccessibilityDropdownProps {
+    className?: string;
+    style?: React.CSSProperties;
+    classes?: AccessibilityDropdownClasses;
+    triggerLabel?: React.ReactNode;
+    renderTrigger?: (params: {
+        isOpen: boolean;
+        toggle: () => void;
+        className: string;
+    }) => React.ReactNode;
+}
+export declare const AccessibilityDropdown: React.FC<AccessibilityDropdownProps>;

package/dist/AccessibilityToolbar.d.ts

@@ -0,0 +1,14 @@
+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/T.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TranslationKey } from './translations';
+interface TProps {
+    k: TranslationKey | string;
+    children?: React.ReactNode;
+}
+export declare const T: React.FC<TProps>;
+export {};

package/dist/index.d.ts

@@ -0,0 +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 { AccessibilityToolbarProps, AccessibilityToolbarClasses, } from "./AccessibilityToolbar";
+export type { AccessibilityDropdownProps, AccessibilityDropdownClasses, } from "./AccessibilityDropdown";
+export type { default as React } from "react";

package/dist/index.esm.js

@@ -0,0 +1,196 @@
+import React, { createContext, useState, useEffect, useContext } from 'react';
+
+const translations = {
+    en: {
+        increaseText: 'Increase Text',
+        decreaseText: 'Decrease Text',
+        highContrast: 'High Contrast',
+        negativeContrast: 'Negative Contrast',
+        lightBackground: 'Light Background',
+        underlineLinks: 'Underline Links',
+        readableFont: 'Readable Font',
+        voiceCommand: 'Voice Command',
+    },
+    tl: {
+        increaseText: 'Palakihin ang Teksto',
+        decreaseText: 'Paliitin ang Teksto',
+        highContrast: 'Mataas na Contrast',
+        negativeContrast: 'Negatibong Contrast',
+        lightBackground: 'Maliwanag na Background',
+        underlineLinks: 'May Guhit na Links',
+        readableFont: 'Madaling Basahin na Font',
+        voiceCommand: 'Voice Command',
+    },
+    ceb: {
+        increaseText: 'Padak-on ang Teksto',
+        decreaseText: 'Pagamay-on ang Teksto',
+        highContrast: 'Taas nga Contrast',
+        negativeContrast: 'Negatibo nga Contrast',
+        lightBackground: 'Hayag nga Background',
+        underlineLinks: 'Linya sa Ubos sa Links',
+        readableFont: 'Sayon Basahon nga Font',
+        voiceCommand: 'Voice Command',
+    },
+};
+
+const AccessibilityContext = createContext(undefined);
+const AccessibilityProvider = ({ children, translations: customTranslations, }) => {
+    const [state, setState] = useState({
+        language: "en",
+        textSize: 100,
+        highContrast: false,
+        negativeContrast: false,
+        lightBackground: false,
+        underlineLinks: false,
+        readableFont: false,
+        voiceEnabled: false,
+    });
+    const allTranslations = customTranslations || translations;
+    useEffect(() => {
+        const root = document.documentElement;
+        root.style.fontSize = `${state.textSize}%`;
+        root.classList.toggle("high-contrast", state.highContrast);
+        root.classList.toggle("negative-contrast", state.negativeContrast);
+        root.classList.toggle("light-background", state.lightBackground);
+        root.classList.toggle("underline-links", state.underlineLinks);
+        root.classList.toggle("readable-font", state.readableFont);
+    }, [state]);
+    useEffect(() => {
+        if (!state.voiceEnabled ||
+            !("webkitSpeechRecognition" in window || "SpeechRecognition" in window))
+            return;
+        const SpeechRecognition = window.SpeechRecognition ||
+            window.webkitSpeechRecognition;
+        const recognition = new SpeechRecognition();
+        recognition.continuous = true;
+        recognition.lang =
+            state.language === "tl"
+                ? "tl-PH"
+                : state.language === "ceb"
+                    ? "ceb-PH"
+                    : "en-US";
+        recognition.onresult = (event) => {
+            const transcript = event.results[event.results.length - 1][0].transcript.toLowerCase();
+            if (transcript.includes("increase text") ||
+                transcript.includes("palakihin"))
+                increaseText();
+            if (transcript.includes("decrease text") ||
+                transcript.includes("paliitin"))
+                decreaseText();
+            if (transcript.includes("high contrast") || transcript.includes("mataas"))
+                toggleHighContrast();
+            if (transcript.includes("negative contrast") ||
+                transcript.includes("negatibo"))
+                toggleNegativeContrast();
+            if (transcript.includes("light background") ||
+                transcript.includes("maliwanag"))
+                toggleLightBackground();
+            if (transcript.includes("underline") || transcript.includes("guhit"))
+                toggleUnderlineLinks();
+            if (transcript.includes("readable font") ||
+                transcript.includes("madaling"))
+                toggleReadableFont();
+        };
+        recognition.start();
+        return () => recognition.stop();
+    }, [state.voiceEnabled, state.language]);
+    const setLanguage = (lang) => setState((s) => (Object.assign(Object.assign({}, s), { language: lang })));
+    const increaseText = () => setState((s) => (Object.assign(Object.assign({}, s), { textSize: Math.min(s.textSize + 10, 200) })));
+    const decreaseText = () => setState((s) => (Object.assign(Object.assign({}, s), { textSize: Math.max(s.textSize - 10, 80) })));
+    const toggleHighContrast = () => setState((s) => (Object.assign(Object.assign({}, s), { highContrast: !s.highContrast, negativeContrast: false })));
+    const toggleNegativeContrast = () => setState((s) => (Object.assign(Object.assign({}, s), { negativeContrast: !s.negativeContrast, highContrast: false })));
+    const toggleLightBackground = () => setState((s) => (Object.assign(Object.assign({}, s), { lightBackground: !s.lightBackground })));
+    const toggleUnderlineLinks = () => setState((s) => (Object.assign(Object.assign({}, s), { underlineLinks: !s.underlineLinks })));
+    const toggleReadableFont = () => setState((s) => (Object.assign(Object.assign({}, s), { readableFont: !s.readableFont })));
+    const toggleVoice = () => setState((s) => (Object.assign(Object.assign({}, s), { voiceEnabled: !s.voiceEnabled })));
+    const translate = (key) => translations[state.language][key];
+    const t = (key) => { var _a; return ((_a = allTranslations[state.language]) === null || _a === void 0 ? void 0 : _a[key]) || key; };
+    return (React.createElement(AccessibilityContext.Provider, { value: Object.assign(Object.assign({}, state), { setLanguage,
+            increaseText,
+            decreaseText,
+            toggleHighContrast,
+            toggleNegativeContrast,
+            toggleLightBackground,
+            toggleUnderlineLinks,
+            toggleReadableFont,
+            toggleVoice,
+            translate,
+            t }) }, children));
+};
+const useAccessibility = () => {
+    const context = useContext(AccessibilityContext);
+    if (!context)
+        throw new Error("useAccessibility must be used within AccessibilityProvider");
+    return context;
+};
+
+const cn$1 = (...parts) => parts.filter(Boolean).join(" ");
+const AccessibilityToolbar = ({ className, style, classes, }) => {
+    const { language, setLanguage, increaseText, decreaseText, toggleHighContrast, toggleNegativeContrast, toggleLightBackground, toggleUnderlineLinks, toggleReadableFont, toggleVoice, translate, highContrast, negativeContrast, lightBackground, underlineLinks, readableFont, voiceEnabled, } = useAccessibility();
+    return (React.createElement("div", { className: cn$1("accessibility-toolbar", classes === null || classes === void 0 ? void 0 : classes.root, className), style: style },
+        React.createElement("select", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.select), value: language, onChange: (e) => setLanguage(e.target.value) },
+            React.createElement("option", { value: "en" }, "English"),
+            React.createElement("option", { value: "tl" }, "Tagalog"),
+            React.createElement("option", { value: "ceb" }, "Cebuano")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button), onClick: increaseText },
+            "+ ",
+            translate("increaseText")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button), onClick: decreaseText },
+            "- ",
+            translate("decreaseText")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, highContrast && "active", highContrast && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": highContrast, onClick: toggleHighContrast }, translate("highContrast")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, negativeContrast && "active", negativeContrast && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": negativeContrast, onClick: toggleNegativeContrast }, translate("negativeContrast")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, lightBackground && "active", lightBackground && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": lightBackground, onClick: toggleLightBackground }, translate("lightBackground")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, underlineLinks && "active", underlineLinks && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": underlineLinks, onClick: toggleUnderlineLinks }, translate("underlineLinks")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, readableFont && "active", readableFont && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": readableFont, onClick: toggleReadableFont }, translate("readableFont")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, classes === null || classes === void 0 ? void 0 : classes.voiceButton, voiceEnabled && "active", voiceEnabled && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": voiceEnabled, onClick: toggleVoice },
+            "\uD83C\uDFA4 ",
+            translate("voiceCommand"))));
+};
+
+const cn = (...parts) => parts.filter(Boolean).join(" ");
+const AccessibilityDropdown = ({ className, style, classes, triggerLabel = "♿ Accessibility", renderTrigger, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const { language, setLanguage, increaseText, decreaseText, toggleHighContrast, toggleNegativeContrast, toggleLightBackground, toggleUnderlineLinks, toggleReadableFont, toggleVoice, translate, highContrast, negativeContrast, lightBackground, underlineLinks, readableFont, voiceEnabled, } = useAccessibility();
+    const toggle = () => setIsOpen(!isOpen);
+    return (React.createElement("div", { className: cn("accessibility-dropdown", classes === null || classes === void 0 ? void 0 : classes.root, className), style: style },
+        renderTrigger ? (renderTrigger({
+            isOpen,
+            toggle,
+            className: cn("accessibility-dropdown-toggle", classes === null || classes === void 0 ? void 0 : classes.toggle),
+        })) : (React.createElement("button", { className: cn("accessibility-dropdown-toggle", classes === null || classes === void 0 ? void 0 : classes.toggle), onClick: toggle }, triggerLabel)),
+        isOpen && (React.createElement("div", { className: cn("accessibility-dropdown-menu", classes === null || classes === void 0 ? void 0 : classes.menu) },
+            React.createElement("div", { className: cn("accessibility-dropdown-section", classes === null || classes === void 0 ? void 0 : classes.section) },
+                React.createElement("label", { className: cn(classes === null || classes === void 0 ? void 0 : classes.label) }, "Language:"),
+                React.createElement("select", { className: cn(classes === null || classes === void 0 ? void 0 : classes.select), value: language, onChange: (e) => setLanguage(e.target.value) },
+                    React.createElement("option", { value: "en" }, "English"),
+                    React.createElement("option", { value: "tl" }, "Tagalog"),
+                    React.createElement("option", { value: "ceb" }, "Cebuano"))),
+            React.createElement("div", { className: cn("accessibility-dropdown-section", classes === null || classes === void 0 ? void 0 : classes.section) },
+                React.createElement("button", { className: cn(classes === null || classes === void 0 ? void 0 : classes.button), onClick: increaseText },
+                    "+ ",
+                    translate("increaseText")),
+                React.createElement("button", { className: cn(classes === null || classes === void 0 ? void 0 : classes.button), onClick: decreaseText },
+                    "- ",
+                    translate("decreaseText"))),
+            React.createElement("div", { className: cn("accessibility-dropdown-section", classes === null || classes === void 0 ? void 0 : classes.section) },
+                React.createElement("button", { className: cn(classes === null || classes === void 0 ? void 0 : classes.button, highContrast && "active", highContrast && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": highContrast, onClick: toggleHighContrast }, translate("highContrast")),
+                React.createElement("button", { className: cn(classes === null || classes === void 0 ? void 0 : classes.button, negativeContrast && "active", negativeContrast && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": negativeContrast, onClick: toggleNegativeContrast }, translate("negativeContrast")),
+                React.createElement("button", { className: cn(classes === null || classes === void 0 ? void 0 : classes.button, lightBackground && "active", lightBackground && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": lightBackground, onClick: toggleLightBackground }, translate("lightBackground")),
+                React.createElement("button", { className: cn(classes === null || classes === void 0 ? void 0 : classes.button, underlineLinks && "active", underlineLinks && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": underlineLinks, onClick: toggleUnderlineLinks }, translate("underlineLinks")),
+                React.createElement("button", { className: cn(classes === null || classes === void 0 ? void 0 : classes.button, readableFont && "active", readableFont && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": readableFont, onClick: toggleReadableFont }, translate("readableFont")),
+                React.createElement("button", { className: cn(classes === null || classes === void 0 ? void 0 : classes.button, classes === null || classes === void 0 ? void 0 : classes.voiceButton, voiceEnabled && "active", voiceEnabled && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": voiceEnabled, onClick: toggleVoice },
+                    "\uD83C\uDFA4 ",
+                    translate("voiceCommand")))))));
+};
+
+const T = ({ k, children }) => {
+    const { translate, language } = useAccessibility();
+    if (children && typeof children === 'string') {
+        return React.createElement(React.Fragment, null, children);
+    }
+    return React.createElement(React.Fragment, null, translate(k));
+};
+
+export { AccessibilityDropdown, AccessibilityProvider, AccessibilityToolbar, T, translations, useAccessibility };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/translations.ts","../src/AccessibilityContext.tsx","../src/AccessibilityToolbar.tsx","../src/AccessibilityDropdown.tsx","../src/T.tsx"],"sourcesContent":["export const translations = {\n  en: {\n    increaseText: 'Increase Text',\n    decreaseText: 'Decrease Text',\n    highContrast: 'High Contrast',\n    negativeContrast: 'Negative Contrast',\n    lightBackground: 'Light Background',\n    underlineLinks: 'Underline Links',\n    readableFont: 'Readable Font',\n    voiceCommand: 'Voice Command',\n  },\n  tl: {\n    increaseText: 'Palakihin ang Teksto',\n    decreaseText: 'Paliitin ang Teksto',\n    highContrast: 'Mataas na Contrast',\n    negativeContrast: 'Negatibong Contrast',\n    lightBackground: 'Maliwanag na Background',\n    underlineLinks: 'May Guhit na Links',\n    readableFont: 'Madaling Basahin na Font',\n    voiceCommand: 'Voice Command',\n  },\n  ceb: {\n    increaseText: 'Padak-on ang Teksto',\n    decreaseText: 'Pagamay-on ang Teksto',\n    highContrast: 'Taas nga Contrast',\n    negativeContrast: 'Negatibo nga Contrast',\n    lightBackground: 'Hayag nga Background',\n    underlineLinks: 'Linya sa Ubos sa Links',\n    readableFont: 'Sayon Basahon nga Font',\n    voiceCommand: 'Voice Command',\n  },\n};\n\nexport type Language = keyof typeof translations;\nexport type TranslationKey = keyof typeof translations.en;\n","import React, {\n  createContext,\n  useContext,\n  useState,\n  useEffect,\n  ReactNode,\n} from \"react\";\nimport { Language, translations, TranslationKey } from \"./translations\";\n\ninterface AccessibilityState {\n  language: Language;\n  textSize: number;\n  highContrast: boolean;\n  negativeContrast: boolean;\n  lightBackground: boolean;\n  underlineLinks: boolean;\n  readableFont: boolean;\n  voiceEnabled: boolean;\n}\n\ninterface AccessibilityContextType extends AccessibilityState {\n  setLanguage: (lang: Language) => void;\n  increaseText: () => void;\n  decreaseText: () => void;\n  toggleHighContrast: () => void;\n  toggleNegativeContrast: () => void;\n  toggleLightBackground: () => void;\n  toggleUnderlineLinks: () => void;\n  toggleReadableFont: () => void;\n  toggleVoice: () => void;\n  translate: (key: TranslationKey) => string;\n  t: (key: string) => string;\n}\n\nconst AccessibilityContext = createContext<\n  AccessibilityContextType | undefined\n>(undefined);\n\ninterface AccessibilityProviderProps {\n  children: ReactNode;\n  translations?: Partial<Record<Language, Record<string, string>>>;\n}\n\nexport const AccessibilityProvider: React.FC<AccessibilityProviderProps> = ({\n  children,\n  translations: customTranslations,\n}) => {\n  const [state, setState] = useState<AccessibilityState>({\n    language: \"en\",\n    textSize: 100,\n    highContrast: false,\n    negativeContrast: false,\n    lightBackground: false,\n    underlineLinks: false,\n    readableFont: false,\n    voiceEnabled: false,\n  });\n\n  const allTranslations: Partial<Record<Language, Record<string, string>>> =\n    customTranslations || translations;\n\n  useEffect(() => {\n    const root = document.documentElement;\n    root.style.fontSize = `${state.textSize}%`;\n\n    root.classList.toggle(\"high-contrast\", state.highContrast);\n    root.classList.toggle(\"negative-contrast\", state.negativeContrast);\n    root.classList.toggle(\"light-background\", state.lightBackground);\n    root.classList.toggle(\"underline-links\", state.underlineLinks);\n    root.classList.toggle(\"readable-font\", state.readableFont);\n  }, [state]);\n\n  useEffect(() => {\n    if (\n      !state.voiceEnabled ||\n      !(\"webkitSpeechRecognition\" in window || \"SpeechRecognition\" in window)\n    )\n      return;\n\n    const SpeechRecognition =\n      (window as any).SpeechRecognition ||\n      (window as any).webkitSpeechRecognition;\n    const recognition = new SpeechRecognition();\n    recognition.continuous = true;\n    recognition.lang =\n      state.language === \"tl\"\n        ? \"tl-PH\"\n        : state.language === \"ceb\"\n          ? \"ceb-PH\"\n          : \"en-US\";\n\n    recognition.onresult = (event: any) => {\n      const transcript =\n        event.results[event.results.length - 1][0].transcript.toLowerCase();\n\n      if (\n        transcript.includes(\"increase text\") ||\n        transcript.includes(\"palakihin\")\n      )\n        increaseText();\n      if (\n        transcript.includes(\"decrease text\") ||\n        transcript.includes(\"paliitin\")\n      )\n        decreaseText();\n      if (transcript.includes(\"high contrast\") || transcript.includes(\"mataas\"))\n        toggleHighContrast();\n      if (\n        transcript.includes(\"negative contrast\") ||\n        transcript.includes(\"negatibo\")\n      )\n        toggleNegativeContrast();\n      if (\n        transcript.includes(\"light background\") ||\n        transcript.includes(\"maliwanag\")\n      )\n        toggleLightBackground();\n      if (transcript.includes(\"underline\") || transcript.includes(\"guhit\"))\n        toggleUnderlineLinks();\n      if (\n        transcript.includes(\"readable font\") ||\n        transcript.includes(\"madaling\")\n      )\n        toggleReadableFont();\n    };\n\n    recognition.start();\n    return () => recognition.stop();\n  }, [state.voiceEnabled, state.language]);\n\n  const setLanguage = (lang: Language) =>\n    setState((s) => ({ ...s, language: lang }));\n  const increaseText = () =>\n    setState((s) => ({ ...s, textSize: Math.min(s.textSize + 10, 200) }));\n  const decreaseText = () =>\n    setState((s) => ({ ...s, textSize: Math.max(s.textSize - 10, 80) }));\n  const toggleHighContrast = () =>\n    setState((s) => ({\n      ...s,\n      highContrast: !s.highContrast,\n      negativeContrast: false,\n    }));\n  const toggleNegativeContrast = () =>\n    setState((s) => ({\n      ...s,\n      negativeContrast: !s.negativeContrast,\n      highContrast: false,\n    }));\n  const toggleLightBackground = () =>\n    setState((s) => ({ ...s, lightBackground: !s.lightBackground }));\n  const toggleUnderlineLinks = () =>\n    setState((s) => ({ ...s, underlineLinks: !s.underlineLinks }));\n  const toggleReadableFont = () =>\n    setState((s) => ({ ...s, readableFont: !s.readableFont }));\n  const toggleVoice = () =>\n    setState((s) => ({ ...s, voiceEnabled: !s.voiceEnabled }));\n  const translate = (key: TranslationKey) => translations[state.language][key];\n  const t = (key: string) => allTranslations[state.language]?.[key] || key;\n\n  return (\n    <AccessibilityContext.Provider\n      value={{\n        ...state,\n        setLanguage,\n        increaseText,\n        decreaseText,\n        toggleHighContrast,\n        toggleNegativeContrast,\n        toggleLightBackground,\n        toggleUnderlineLinks,\n        toggleReadableFont,\n        toggleVoice,\n        translate,\n        t,\n      }}\n    >\n      {children}\n    </AccessibilityContext.Provider>\n  );\n};\n\nexport const useAccessibility = () => {\n  const context = useContext(AccessibilityContext);\n  if (!context)\n    throw new Error(\n      \"useAccessibility must be used within AccessibilityProvider\",\n    );\n  return context;\n};\n","import React from \"react\";\nimport { useAccessibility } from \"./AccessibilityContext\";\n\nexport interface AccessibilityToolbarClasses {\n  root?: string;\n  select?: string;\n  button?: string;\n  activeButton?: string;\n  voiceButton?: string;\n}\n\nexport interface AccessibilityToolbarProps {\n  className?: string;\n  style?: React.CSSProperties;\n  classes?: AccessibilityToolbarClasses;\n}\n\nconst cn = (...parts: Array<string | false | undefined>) =>\n  parts.filter(Boolean).join(\" \");\n\nexport const AccessibilityToolbar: React.FC<AccessibilityToolbarProps> = ({\n  className,\n  style,\n  classes,\n}) => {\n  const {\n    language,\n    setLanguage,\n    increaseText,\n    decreaseText,\n    toggleHighContrast,\n    toggleNegativeContrast,\n    toggleLightBackground,\n    toggleUnderlineLinks,\n    toggleReadableFont,\n    toggleVoice,\n    translate,\n    highContrast,\n    negativeContrast,\n    lightBackground,\n    underlineLinks,\n    readableFont,\n    voiceEnabled,\n  } = useAccessibility();\n\n  return (\n    <div\n      className={cn(\"accessibility-toolbar\", classes?.root, className)}\n      style={style}\n    >\n      <select\n        className={cn(classes?.select)}\n        value={language}\n        onChange={(e) => setLanguage(e.target.value as any)}\n      >\n        <option value=\"en\">English</option>\n        <option value=\"tl\">Tagalog</option>\n        <option value=\"ceb\">Cebuano</option>\n      </select>\n      <button className={cn(classes?.button)} onClick={increaseText}>\n        + {translate(\"increaseText\")}\n      </button>\n      <button className={cn(classes?.button)} onClick={decreaseText}>\n        - {translate(\"decreaseText\")}\n      </button>\n      <button\n        className={cn(\n          classes?.button,\n          highContrast && \"active\",\n          highContrast && classes?.activeButton,\n        )}\n        data-active={highContrast}\n        onClick={toggleHighContrast}\n      >\n        {translate(\"highContrast\")}\n      </button>\n      <button\n        className={cn(\n          classes?.button,\n          negativeContrast && \"active\",\n          negativeContrast && classes?.activeButton,\n        )}\n        data-active={negativeContrast}\n        onClick={toggleNegativeContrast}\n      >\n        {translate(\"negativeContrast\")}\n      </button>\n      <button\n        className={cn(\n          classes?.button,\n          lightBackground && \"active\",\n          lightBackground && classes?.activeButton,\n        )}\n        data-active={lightBackground}\n        onClick={toggleLightBackground}\n      >\n        {translate(\"lightBackground\")}\n      </button>\n      <button\n        className={cn(\n          classes?.button,\n          underlineLinks && \"active\",\n          underlineLinks && classes?.activeButton,\n        )}\n        data-active={underlineLinks}\n        onClick={toggleUnderlineLinks}\n      >\n        {translate(\"underlineLinks\")}\n      </button>\n      <button\n        className={cn(\n          classes?.button,\n          readableFont && \"active\",\n          readableFont && classes?.activeButton,\n        )}\n        data-active={readableFont}\n        onClick={toggleReadableFont}\n      >\n        {translate(\"readableFont\")}\n      </button>\n      <button\n        className={cn(\n          classes?.button,\n          classes?.voiceButton,\n          voiceEnabled && \"active\",\n          voiceEnabled && classes?.activeButton,\n        )}\n        data-active={voiceEnabled}\n        onClick={toggleVoice}\n      >\n        🎤 {translate(\"voiceCommand\")}\n      </button>\n    </div>\n  );\n};\n","import React, { useState } from \"react\";\nimport { useAccessibility } from \"./AccessibilityContext\";\n\nexport interface AccessibilityDropdownClasses {\n  root?: string;\n  toggle?: string;\n  menu?: string;\n  section?: string;\n  label?: string;\n  select?: string;\n  button?: string;\n  activeButton?: string;\n  voiceButton?: string;\n}\n\nexport interface AccessibilityDropdownProps {\n  className?: string;\n  style?: React.CSSProperties;\n  classes?: AccessibilityDropdownClasses;\n  triggerLabel?: React.ReactNode;\n  renderTrigger?: (params: {\n    isOpen: boolean;\n    toggle: () => void;\n    className: string;\n  }) => React.ReactNode;\n}\n\nconst cn = (...parts: Array<string | false | undefined>) =>\n  parts.filter(Boolean).join(\" \");\n\nexport const AccessibilityDropdown: React.FC<AccessibilityDropdownProps> = ({\n  className,\n  style,\n  classes,\n  triggerLabel = \"♿ Accessibility\",\n  renderTrigger,\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    language,\n    setLanguage,\n    increaseText,\n    decreaseText,\n    toggleHighContrast,\n    toggleNegativeContrast,\n    toggleLightBackground,\n    toggleUnderlineLinks,\n    toggleReadableFont,\n    toggleVoice,\n    translate,\n    highContrast,\n    negativeContrast,\n    lightBackground,\n    underlineLinks,\n    readableFont,\n    voiceEnabled,\n  } = useAccessibility();\n\n  const toggle = () => setIsOpen(!isOpen);\n\n  return (\n    <div\n      className={cn(\"accessibility-dropdown\", classes?.root, className)}\n      style={style}\n    >\n      {renderTrigger ? (\n        renderTrigger({\n          isOpen,\n          toggle,\n          className: cn(\"accessibility-dropdown-toggle\", classes?.toggle),\n        })\n      ) : (\n        <button\n          className={cn(\"accessibility-dropdown-toggle\", classes?.toggle)}\n          onClick={toggle}\n        >\n          {triggerLabel}\n        </button>\n      )}\n\n      {isOpen && (\n        <div className={cn(\"accessibility-dropdown-menu\", classes?.menu)}>\n          <div\n            className={cn(\"accessibility-dropdown-section\", classes?.section)}\n          >\n            <label className={cn(classes?.label)}>Language:</label>\n            <select\n              className={cn(classes?.select)}\n              value={language}\n              onChange={(e) => setLanguage(e.target.value as any)}\n            >\n              <option value=\"en\">English</option>\n              <option value=\"tl\">Tagalog</option>\n              <option value=\"ceb\">Cebuano</option>\n            </select>\n          </div>\n\n          <div\n            className={cn(\"accessibility-dropdown-section\", classes?.section)}\n          >\n            <button className={cn(classes?.button)} onClick={increaseText}>\n              + {translate(\"increaseText\")}\n            </button>\n            <button className={cn(classes?.button)} onClick={decreaseText}>\n              - {translate(\"decreaseText\")}\n            </button>\n          </div>\n\n          <div\n            className={cn(\"accessibility-dropdown-section\", classes?.section)}\n          >\n            <button\n              className={cn(\n                classes?.button,\n                highContrast && \"active\",\n                highContrast && classes?.activeButton,\n              )}\n              data-active={highContrast}\n              onClick={toggleHighContrast}\n            >\n              {translate(\"highContrast\")}\n            </button>\n            <button\n              className={cn(\n                classes?.button,\n                negativeContrast && \"active\",\n                negativeContrast && classes?.activeButton,\n              )}\n              data-active={negativeContrast}\n              onClick={toggleNegativeContrast}\n            >\n              {translate(\"negativeContrast\")}\n            </button>\n            <button\n              className={cn(\n                classes?.button,\n                lightBackground && \"active\",\n                lightBackground && classes?.activeButton,\n              )}\n              data-active={lightBackground}\n              onClick={toggleLightBackground}\n            >\n              {translate(\"lightBackground\")}\n            </button>\n            <button\n              className={cn(\n                classes?.button,\n                underlineLinks && \"active\",\n                underlineLinks && classes?.activeButton,\n              )}\n              data-active={underlineLinks}\n              onClick={toggleUnderlineLinks}\n            >\n              {translate(\"underlineLinks\")}\n            </button>\n            <button\n              className={cn(\n                classes?.button,\n                readableFont && \"active\",\n                readableFont && classes?.activeButton,\n              )}\n              data-active={readableFont}\n              onClick={toggleReadableFont}\n            >\n              {translate(\"readableFont\")}\n            </button>\n            <button\n              className={cn(\n                classes?.button,\n                classes?.voiceButton,\n                voiceEnabled && \"active\",\n                voiceEnabled && classes?.activeButton,\n              )}\n              data-active={voiceEnabled}\n              onClick={toggleVoice}\n            >\n              🎤 {translate(\"voiceCommand\")}\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n","import React from 'react';\nimport { useAccessibility } from './AccessibilityContext';\nimport { TranslationKey } from './translations';\n\ninterface TProps {\n  k: TranslationKey | string;\n  children?: React.ReactNode;\n}\n\nexport const T: React.FC<TProps> = ({ k, children }) => {\n  const { translate, language } = useAccessibility();\n  \n  if (children && typeof children === 'string') {\n    return <>{children}</>;\n  }\n  \n  return <>{translate(k as TranslationKey)}</>;\n};\n"],"names":["cn"],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,203 @@
+'use strict';
+
+var React = require('react');
+
+const translations = {
+    en: {
+        increaseText: 'Increase Text',
+        decreaseText: 'Decrease Text',
+        highContrast: 'High Contrast',
+        negativeContrast: 'Negative Contrast',
+        lightBackground: 'Light Background',
+        underlineLinks: 'Underline Links',
+        readableFont: 'Readable Font',
+        voiceCommand: 'Voice Command',
+    },
+    tl: {
+        increaseText: 'Palakihin ang Teksto',
+        decreaseText: 'Paliitin ang Teksto',
+        highContrast: 'Mataas na Contrast',
+        negativeContrast: 'Negatibong Contrast',
+        lightBackground: 'Maliwanag na Background',
+        underlineLinks: 'May Guhit na Links',
+        readableFont: 'Madaling Basahin na Font',
+        voiceCommand: 'Voice Command',
+    },
+    ceb: {
+        increaseText: 'Padak-on ang Teksto',
+        decreaseText: 'Pagamay-on ang Teksto',
+        highContrast: 'Taas nga Contrast',
+        negativeContrast: 'Negatibo nga Contrast',
+        lightBackground: 'Hayag nga Background',
+        underlineLinks: 'Linya sa Ubos sa Links',
+        readableFont: 'Sayon Basahon nga Font',
+        voiceCommand: 'Voice Command',
+    },
+};
+
+const AccessibilityContext = React.createContext(undefined);
+const AccessibilityProvider = ({ children, translations: customTranslations, }) => {
+    const [state, setState] = React.useState({
+        language: "en",
+        textSize: 100,
+        highContrast: false,
+        negativeContrast: false,
+        lightBackground: false,
+        underlineLinks: false,
+        readableFont: false,
+        voiceEnabled: false,
+    });
+    const allTranslations = customTranslations || translations;
+    React.useEffect(() => {
+        const root = document.documentElement;
+        root.style.fontSize = `${state.textSize}%`;
+        root.classList.toggle("high-contrast", state.highContrast);
+        root.classList.toggle("negative-contrast", state.negativeContrast);
+        root.classList.toggle("light-background", state.lightBackground);
+        root.classList.toggle("underline-links", state.underlineLinks);
+        root.classList.toggle("readable-font", state.readableFont);
+    }, [state]);
+    React.useEffect(() => {
+        if (!state.voiceEnabled ||
+            !("webkitSpeechRecognition" in window || "SpeechRecognition" in window))
+            return;
+        const SpeechRecognition = window.SpeechRecognition ||
+            window.webkitSpeechRecognition;
+        const recognition = new SpeechRecognition();
+        recognition.continuous = true;
+        recognition.lang =
+            state.language === "tl"
+                ? "tl-PH"
+                : state.language === "ceb"
+                    ? "ceb-PH"
+                    : "en-US";
+        recognition.onresult = (event) => {
+            const transcript = event.results[event.results.length - 1][0].transcript.toLowerCase();
+            if (transcript.includes("increase text") ||
+                transcript.includes("palakihin"))
+                increaseText();
+            if (transcript.includes("decrease text") ||
+                transcript.includes("paliitin"))
+                decreaseText();
+            if (transcript.includes("high contrast") || transcript.includes("mataas"))
+                toggleHighContrast();
+            if (transcript.includes("negative contrast") ||
+                transcript.includes("negatibo"))
+                toggleNegativeContrast();
+            if (transcript.includes("light background") ||
+                transcript.includes("maliwanag"))
+                toggleLightBackground();
+            if (transcript.includes("underline") || transcript.includes("guhit"))
+                toggleUnderlineLinks();
+            if (transcript.includes("readable font") ||
+                transcript.includes("madaling"))
+                toggleReadableFont();
+        };
+        recognition.start();
+        return () => recognition.stop();
+    }, [state.voiceEnabled, state.language]);
+    const setLanguage = (lang) => setState((s) => (Object.assign(Object.assign({}, s), { language: lang })));
+    const increaseText = () => setState((s) => (Object.assign(Object.assign({}, s), { textSize: Math.min(s.textSize + 10, 200) })));
+    const decreaseText = () => setState((s) => (Object.assign(Object.assign({}, s), { textSize: Math.max(s.textSize - 10, 80) })));
+    const toggleHighContrast = () => setState((s) => (Object.assign(Object.assign({}, s), { highContrast: !s.highContrast, negativeContrast: false })));
+    const toggleNegativeContrast = () => setState((s) => (Object.assign(Object.assign({}, s), { negativeContrast: !s.negativeContrast, highContrast: false })));
+    const toggleLightBackground = () => setState((s) => (Object.assign(Object.assign({}, s), { lightBackground: !s.lightBackground })));
+    const toggleUnderlineLinks = () => setState((s) => (Object.assign(Object.assign({}, s), { underlineLinks: !s.underlineLinks })));
+    const toggleReadableFont = () => setState((s) => (Object.assign(Object.assign({}, s), { readableFont: !s.readableFont })));
+    const toggleVoice = () => setState((s) => (Object.assign(Object.assign({}, s), { voiceEnabled: !s.voiceEnabled })));
+    const translate = (key) => translations[state.language][key];
+    const t = (key) => { var _a; return ((_a = allTranslations[state.language]) === null || _a === void 0 ? void 0 : _a[key]) || key; };
+    return (React.createElement(AccessibilityContext.Provider, { value: Object.assign(Object.assign({}, state), { setLanguage,
+            increaseText,
+            decreaseText,
+            toggleHighContrast,
+            toggleNegativeContrast,
+            toggleLightBackground,
+            toggleUnderlineLinks,
+            toggleReadableFont,
+            toggleVoice,
+            translate,
+            t }) }, children));
+};
+const useAccessibility = () => {
+    const context = React.useContext(AccessibilityContext);
+    if (!context)
+        throw new Error("useAccessibility must be used within AccessibilityProvider");
+    return context;
+};
+
+const cn$1 = (...parts) => parts.filter(Boolean).join(" ");
+const AccessibilityToolbar = ({ className, style, classes, }) => {
+    const { language, setLanguage, increaseText, decreaseText, toggleHighContrast, toggleNegativeContrast, toggleLightBackground, toggleUnderlineLinks, toggleReadableFont, toggleVoice, translate, highContrast, negativeContrast, lightBackground, underlineLinks, readableFont, voiceEnabled, } = useAccessibility();
+    return (React.createElement("div", { className: cn$1("accessibility-toolbar", classes === null || classes === void 0 ? void 0 : classes.root, className), style: style },
+        React.createElement("select", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.select), value: language, onChange: (e) => setLanguage(e.target.value) },
+            React.createElement("option", { value: "en" }, "English"),
+            React.createElement("option", { value: "tl" }, "Tagalog"),
+            React.createElement("option", { value: "ceb" }, "Cebuano")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button), onClick: increaseText },
+            "+ ",
+            translate("increaseText")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button), onClick: decreaseText },
+            "- ",
+            translate("decreaseText")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, highContrast && "active", highContrast && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": highContrast, onClick: toggleHighContrast }, translate("highContrast")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, negativeContrast && "active", negativeContrast && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": negativeContrast, onClick: toggleNegativeContrast }, translate("negativeContrast")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, lightBackground && "active", lightBackground && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": lightBackground, onClick: toggleLightBackground }, translate("lightBackground")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, underlineLinks && "active", underlineLinks && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": underlineLinks, onClick: toggleUnderlineLinks }, translate("underlineLinks")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, readableFont && "active", readableFont && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": readableFont, onClick: toggleReadableFont }, translate("readableFont")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, classes === null || classes === void 0 ? void 0 : classes.voiceButton, voiceEnabled && "active", voiceEnabled && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": voiceEnabled, onClick: toggleVoice },
+            "\uD83C\uDFA4 ",
+            translate("voiceCommand"))));
+};
+
+const cn = (...parts) => parts.filter(Boolean).join(" ");
+const AccessibilityDropdown = ({ className, style, classes, triggerLabel = "♿ Accessibility", renderTrigger, }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const { language, setLanguage, increaseText, decreaseText, toggleHighContrast, toggleNegativeContrast, toggleLightBackground, toggleUnderlineLinks, toggleReadableFont, toggleVoice, translate, highContrast, negativeContrast, lightBackground, underlineLinks, readableFont, voiceEnabled, } = useAccessibility();
+    const toggle = () => setIsOpen(!isOpen);
+    return (React.createElement("div", { className: cn("accessibility-dropdown", classes === null || classes === void 0 ? void 0 : classes.root, className), style: style },
+        renderTrigger ? (renderTrigger({
+            isOpen,
+            toggle,
+            className: cn("accessibility-dropdown-toggle", classes === null || classes === void 0 ? void 0 : classes.toggle),
+        })) : (React.createElement("button", { className: cn("accessibility-dropdown-toggle", classes === null || classes === void 0 ? void 0 : classes.toggle), onClick: toggle }, triggerLabel)),
+        isOpen && (React.createElement("div", { className: cn("accessibility-dropdown-menu", classes === null || classes === void 0 ? void 0 : classes.menu) },
+            React.createElement("div", { className: cn("accessibility-dropdown-section", classes === null || classes === void 0 ? void 0 : classes.section) },
+                React.createElement("label", { className: cn(classes === null || classes === void 0 ? void 0 : classes.label) }, "Language:"),
+                React.createElement("select", { className: cn(classes === null || classes === void 0 ? void 0 : classes.select), value: language, onChange: (e) => setLanguage(e.target.value) },
+                    React.createElement("option", { value: "en" }, "English"),
+                    React.createElement("option", { value: "tl" }, "Tagalog"),
+                    React.createElement("option", { value: "ceb" }, "Cebuano"))),
+            React.createElement("div", { className: cn("accessibility-dropdown-section", classes === null || classes === void 0 ? void 0 : classes.section) },
+                React.createElement("button", { className: cn(classes === null || classes === void 0 ? void 0 : classes.button), onClick: increaseText },
+                    "+ ",
+                    translate("increaseText")),
+                React.createElement("button", { className: cn(classes === null || classes === void 0 ? void 0 : classes.button), onClick: decreaseText },
+                    "- ",
+                    translate("decreaseText"))),
+            React.createElement("div", { className: cn("accessibility-dropdown-section", classes === null || classes === void 0 ? void 0 : classes.section) },
+                React.createElement("button", { className: cn(classes === null || classes === void 0 ? void 0 : classes.button, highContrast && "active", highContrast && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": highContrast, onClick: toggleHighContrast }, translate("highContrast")),
+                React.createElement("button", { className: cn(classes === null || classes === void 0 ? void 0 : classes.button, negativeContrast && "active", negativeContrast && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": negativeContrast, onClick: toggleNegativeContrast }, translate("negativeContrast")),
+                React.createElement("button", { className: cn(classes === null || classes === void 0 ? void 0 : classes.button, lightBackground && "active", lightBackground && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": lightBackground, onClick: toggleLightBackground }, translate("lightBackground")),
+                React.createElement("button", { className: cn(classes === null || classes === void 0 ? void 0 : classes.button, underlineLinks && "active", underlineLinks && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": underlineLinks, onClick: toggleUnderlineLinks }, translate("underlineLinks")),
+                React.createElement("button", { className: cn(classes === null || classes === void 0 ? void 0 : classes.button, readableFont && "active", readableFont && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": readableFont, onClick: toggleReadableFont }, translate("readableFont")),
+                React.createElement("button", { className: cn(classes === null || classes === void 0 ? void 0 : classes.button, classes === null || classes === void 0 ? void 0 : classes.voiceButton, voiceEnabled && "active", voiceEnabled && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": voiceEnabled, onClick: toggleVoice },
+                    "\uD83C\uDFA4 ",
+                    translate("voiceCommand")))))));
+};
+
+const T = ({ k, children }) => {
+    const { translate, language } = useAccessibility();
+    if (children && typeof children === 'string') {
+        return React.createElement(React.Fragment, null, children);
+    }
+    return React.createElement(React.Fragment, null, translate(k));
+};
+
+exports.AccessibilityDropdown = AccessibilityDropdown;
+exports.AccessibilityProvider = AccessibilityProvider;
+exports.AccessibilityToolbar = AccessibilityToolbar;
+exports.T = T;
+exports.translations = translations;
+exports.useAccessibility = useAccessibility;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/translations.ts","../src/AccessibilityContext.tsx","../src/AccessibilityToolbar.tsx","../src/AccessibilityDropdown.tsx","../src/T.tsx"],"sourcesContent":["export const translations = {\n  en: {\n    increaseText: 'Increase Text',\n    decreaseText: 'Decrease Text',\n    highContrast: 'High Contrast',\n    negativeContrast: 'Negative Contrast',\n    lightBackground: 'Light Background',\n    underlineLinks: 'Underline Links',\n    readableFont: 'Readable Font',\n    voiceCommand: 'Voice Command',\n  },\n  tl: {\n    increaseText: 'Palakihin ang Teksto',\n    decreaseText: 'Paliitin ang Teksto',\n    highContrast: 'Mataas na Contrast',\n    negativeContrast: 'Negatibong Contrast',\n    lightBackground: 'Maliwanag na Background',\n    underlineLinks: 'May Guhit na Links',\n    readableFont: 'Madaling Basahin na Font',\n    voiceCommand: 'Voice Command',\n  },\n  ceb: {\n    increaseText: 'Padak-on ang Teksto',\n    decreaseText: 'Pagamay-on ang Teksto',\n    highContrast: 'Taas nga Contrast',\n    negativeContrast: 'Negatibo nga Contrast',\n    lightBackground: 'Hayag nga Background',\n    underlineLinks: 'Linya sa Ubos sa Links',\n    readableFont: 'Sayon Basahon nga Font',\n    voiceCommand: 'Voice Command',\n  },\n};\n\nexport type Language = keyof typeof translations;\nexport type TranslationKey = keyof typeof translations.en;\n","import React, {\n  createContext,\n  useContext,\n  useState,\n  useEffect,\n  ReactNode,\n} from \"react\";\nimport { Language, translations, TranslationKey } from \"./translations\";\n\ninterface AccessibilityState {\n  language: Language;\n  textSize: number;\n  highContrast: boolean;\n  negativeContrast: boolean;\n  lightBackground: boolean;\n  underlineLinks: boolean;\n  readableFont: boolean;\n  voiceEnabled: boolean;\n}\n\ninterface AccessibilityContextType extends AccessibilityState {\n  setLanguage: (lang: Language) => void;\n  increaseText: () => void;\n  decreaseText: () => void;\n  toggleHighContrast: () => void;\n  toggleNegativeContrast: () => void;\n  toggleLightBackground: () => void;\n  toggleUnderlineLinks: () => void;\n  toggleReadableFont: () => void;\n  toggleVoice: () => void;\n  translate: (key: TranslationKey) => string;\n  t: (key: string) => string;\n}\n\nconst AccessibilityContext = createContext<\n  AccessibilityContextType | undefined\n>(undefined);\n\ninterface AccessibilityProviderProps {\n  children: ReactNode;\n  translations?: Partial<Record<Language, Record<string, string>>>;\n}\n\nexport const AccessibilityProvider: React.FC<AccessibilityProviderProps> = ({\n  children,\n  translations: customTranslations,\n}) => {\n  const [state, setState] = useState<AccessibilityState>({\n    language: \"en\",\n    textSize: 100,\n    highContrast: false,\n    negativeContrast: false,\n    lightBackground: false,\n    underlineLinks: false,\n    readableFont: false,\n    voiceEnabled: false,\n  });\n\n  const allTranslations: Partial<Record<Language, Record<string, string>>> =\n    customTranslations || translations;\n\n  useEffect(() => {\n    const root = document.documentElement;\n    root.style.fontSize = `${state.textSize}%`;\n\n    root.classList.toggle(\"high-contrast\", state.highContrast);\n    root.classList.toggle(\"negative-contrast\", state.negativeContrast);\n    root.classList.toggle(\"light-background\", state.lightBackground);\n    root.classList.toggle(\"underline-links\", state.underlineLinks);\n    root.classList.toggle(\"readable-font\", state.readableFont);\n  }, [state]);\n\n  useEffect(() => {\n    if (\n      !state.voiceEnabled ||\n      !(\"webkitSpeechRecognition\" in window || \"SpeechRecognition\" in window)\n    )\n      return;\n\n    const SpeechRecognition =\n      (window as any).SpeechRecognition ||\n      (window as any).webkitSpeechRecognition;\n    const recognition = new SpeechRecognition();\n    recognition.continuous = true;\n    recognition.lang =\n      state.language === \"tl\"\n        ? \"tl-PH\"\n        : state.language === \"ceb\"\n          ? \"ceb-PH\"\n          : \"en-US\";\n\n    recognition.onresult = (event: any) => {\n      const transcript =\n        event.results[event.results.length - 1][0].transcript.toLowerCase();\n\n      if (\n        transcript.includes(\"increase text\") ||\n        transcript.includes(\"palakihin\")\n      )\n        increaseText();\n      if (\n        transcript.includes(\"decrease text\") ||\n        transcript.includes(\"paliitin\")\n      )\n        decreaseText();\n      if (transcript.includes(\"high contrast\") || transcript.includes(\"mataas\"))\n        toggleHighContrast();\n      if (\n        transcript.includes(\"negative contrast\") ||\n        transcript.includes(\"negatibo\")\n      )\n        toggleNegativeContrast();\n      if (\n        transcript.includes(\"light background\") ||\n        transcript.includes(\"maliwanag\")\n      )\n        toggleLightBackground();\n      if (transcript.includes(\"underline\") || transcript.includes(\"guhit\"))\n        toggleUnderlineLinks();\n      if (\n        transcript.includes(\"readable font\") ||\n        transcript.includes(\"madaling\")\n      )\n        toggleReadableFont();\n    };\n\n    recognition.start();\n    return () => recognition.stop();\n  }, [state.voiceEnabled, state.language]);\n\n  const setLanguage = (lang: Language) =>\n    setState((s) => ({ ...s, language: lang }));\n  const increaseText = () =>\n    setState((s) => ({ ...s, textSize: Math.min(s.textSize + 10, 200) }));\n  const decreaseText = () =>\n    setState((s) => ({ ...s, textSize: Math.max(s.textSize - 10, 80) }));\n  const toggleHighContrast = () =>\n    setState((s) => ({\n      ...s,\n      highContrast: !s.highContrast,\n      negativeContrast: false,\n    }));\n  const toggleNegativeContrast = () =>\n    setState((s) => ({\n      ...s,\n      negativeContrast: !s.negativeContrast,\n      highContrast: false,\n    }));\n  const toggleLightBackground = () =>\n    setState((s) => ({ ...s, lightBackground: !s.lightBackground }));\n  const toggleUnderlineLinks = () =>\n    setState((s) => ({ ...s, underlineLinks: !s.underlineLinks }));\n  const toggleReadableFont = () =>\n    setState((s) => ({ ...s, readableFont: !s.readableFont }));\n  const toggleVoice = () =>\n    setState((s) => ({ ...s, voiceEnabled: !s.voiceEnabled }));\n  const translate = (key: TranslationKey) => translations[state.language][key];\n  const t = (key: string) => allTranslations[state.language]?.[key] || key;\n\n  return (\n    <AccessibilityContext.Provider\n      value={{\n        ...state,\n        setLanguage,\n        increaseText,\n        decreaseText,\n        toggleHighContrast,\n        toggleNegativeContrast,\n        toggleLightBackground,\n        toggleUnderlineLinks,\n        toggleReadableFont,\n        toggleVoice,\n        translate,\n        t,\n      }}\n    >\n      {children}\n    </AccessibilityContext.Provider>\n  );\n};\n\nexport const useAccessibility = () => {\n  const context = useContext(AccessibilityContext);\n  if (!context)\n    throw new Error(\n      \"useAccessibility must be used within AccessibilityProvider\",\n    );\n  return context;\n};\n","import React from \"react\";\nimport { useAccessibility } from \"./AccessibilityContext\";\n\nexport interface AccessibilityToolbarClasses {\n  root?: string;\n  select?: string;\n  button?: string;\n  activeButton?: string;\n  voiceButton?: string;\n}\n\nexport interface AccessibilityToolbarProps {\n  className?: string;\n  style?: React.CSSProperties;\n  classes?: AccessibilityToolbarClasses;\n}\n\nconst cn = (...parts: Array<string | false | undefined>) =>\n  parts.filter(Boolean).join(\" \");\n\nexport const AccessibilityToolbar: React.FC<AccessibilityToolbarProps> = ({\n  className,\n  style,\n  classes,\n}) => {\n  const {\n    language,\n    setLanguage,\n    increaseText,\n    decreaseText,\n    toggleHighContrast,\n    toggleNegativeContrast,\n    toggleLightBackground,\n    toggleUnderlineLinks,\n    toggleReadableFont,\n    toggleVoice,\n    translate,\n    highContrast,\n    negativeContrast,\n    lightBackground,\n    underlineLinks,\n    readableFont,\n    voiceEnabled,\n  } = useAccessibility();\n\n  return (\n    <div\n      className={cn(\"accessibility-toolbar\", classes?.root, className)}\n      style={style}\n    >\n      <select\n        className={cn(classes?.select)}\n        value={language}\n        onChange={(e) => setLanguage(e.target.value as any)}\n      >\n        <option value=\"en\">English</option>\n        <option value=\"tl\">Tagalog</option>\n        <option value=\"ceb\">Cebuano</option>\n      </select>\n      <button className={cn(classes?.button)} onClick={increaseText}>\n        + {translate(\"increaseText\")}\n      </button>\n      <button className={cn(classes?.button)} onClick={decreaseText}>\n        - {translate(\"decreaseText\")}\n      </button>\n      <button\n        className={cn(\n          classes?.button,\n          highContrast && \"active\",\n          highContrast && classes?.activeButton,\n        )}\n        data-active={highContrast}\n        onClick={toggleHighContrast}\n      >\n        {translate(\"highContrast\")}\n      </button>\n      <button\n        className={cn(\n          classes?.button,\n          negativeContrast && \"active\",\n          negativeContrast && classes?.activeButton,\n        )}\n        data-active={negativeContrast}\n        onClick={toggleNegativeContrast}\n      >\n        {translate(\"negativeContrast\")}\n      </button>\n      <button\n        className={cn(\n          classes?.button,\n          lightBackground && \"active\",\n          lightBackground && classes?.activeButton,\n        )}\n        data-active={lightBackground}\n        onClick={toggleLightBackground}\n      >\n        {translate(\"lightBackground\")}\n      </button>\n      <button\n        className={cn(\n          classes?.button,\n          underlineLinks && \"active\",\n          underlineLinks && classes?.activeButton,\n        )}\n        data-active={underlineLinks}\n        onClick={toggleUnderlineLinks}\n      >\n        {translate(\"underlineLinks\")}\n      </button>\n      <button\n        className={cn(\n          classes?.button,\n          readableFont && \"active\",\n          readableFont && classes?.activeButton,\n        )}\n        data-active={readableFont}\n        onClick={toggleReadableFont}\n      >\n        {translate(\"readableFont\")}\n      </button>\n      <button\n        className={cn(\n          classes?.button,\n          classes?.voiceButton,\n          voiceEnabled && \"active\",\n          voiceEnabled && classes?.activeButton,\n        )}\n        data-active={voiceEnabled}\n        onClick={toggleVoice}\n      >\n        🎤 {translate(\"voiceCommand\")}\n      </button>\n    </div>\n  );\n};\n","import React, { useState } from \"react\";\nimport { useAccessibility } from \"./AccessibilityContext\";\n\nexport interface AccessibilityDropdownClasses {\n  root?: string;\n  toggle?: string;\n  menu?: string;\n  section?: string;\n  label?: string;\n  select?: string;\n  button?: string;\n  activeButton?: string;\n  voiceButton?: string;\n}\n\nexport interface AccessibilityDropdownProps {\n  className?: string;\n  style?: React.CSSProperties;\n  classes?: AccessibilityDropdownClasses;\n  triggerLabel?: React.ReactNode;\n  renderTrigger?: (params: {\n    isOpen: boolean;\n    toggle: () => void;\n    className: string;\n  }) => React.ReactNode;\n}\n\nconst cn = (...parts: Array<string | false | undefined>) =>\n  parts.filter(Boolean).join(\" \");\n\nexport const AccessibilityDropdown: React.FC<AccessibilityDropdownProps> = ({\n  className,\n  style,\n  classes,\n  triggerLabel = \"♿ Accessibility\",\n  renderTrigger,\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    language,\n    setLanguage,\n    increaseText,\n    decreaseText,\n    toggleHighContrast,\n    toggleNegativeContrast,\n    toggleLightBackground,\n    toggleUnderlineLinks,\n    toggleReadableFont,\n    toggleVoice,\n    translate,\n    highContrast,\n    negativeContrast,\n    lightBackground,\n    underlineLinks,\n    readableFont,\n    voiceEnabled,\n  } = useAccessibility();\n\n  const toggle = () => setIsOpen(!isOpen);\n\n  return (\n    <div\n      className={cn(\"accessibility-dropdown\", classes?.root, className)}\n      style={style}\n    >\n      {renderTrigger ? (\n        renderTrigger({\n          isOpen,\n          toggle,\n          className: cn(\"accessibility-dropdown-toggle\", classes?.toggle),\n        })\n      ) : (\n        <button\n          className={cn(\"accessibility-dropdown-toggle\", classes?.toggle)}\n          onClick={toggle}\n        >\n          {triggerLabel}\n        </button>\n      )}\n\n      {isOpen && (\n        <div className={cn(\"accessibility-dropdown-menu\", classes?.menu)}>\n          <div\n            className={cn(\"accessibility-dropdown-section\", classes?.section)}\n          >\n            <label className={cn(classes?.label)}>Language:</label>\n            <select\n              className={cn(classes?.select)}\n              value={language}\n              onChange={(e) => setLanguage(e.target.value as any)}\n            >\n              <option value=\"en\">English</option>\n              <option value=\"tl\">Tagalog</option>\n              <option value=\"ceb\">Cebuano</option>\n            </select>\n          </div>\n\n          <div\n            className={cn(\"accessibility-dropdown-section\", classes?.section)}\n          >\n            <button className={cn(classes?.button)} onClick={increaseText}>\n              + {translate(\"increaseText\")}\n            </button>\n            <button className={cn(classes?.button)} onClick={decreaseText}>\n              - {translate(\"decreaseText\")}\n            </button>\n          </div>\n\n          <div\n            className={cn(\"accessibility-dropdown-section\", classes?.section)}\n          >\n            <button\n              className={cn(\n                classes?.button,\n                highContrast && \"active\",\n                highContrast && classes?.activeButton,\n              )}\n              data-active={highContrast}\n              onClick={toggleHighContrast}\n            >\n              {translate(\"highContrast\")}\n            </button>\n            <button\n              className={cn(\n                classes?.button,\n                negativeContrast && \"active\",\n                negativeContrast && classes?.activeButton,\n              )}\n              data-active={negativeContrast}\n              onClick={toggleNegativeContrast}\n            >\n              {translate(\"negativeContrast\")}\n            </button>\n            <button\n              className={cn(\n                classes?.button,\n                lightBackground && \"active\",\n                lightBackground && classes?.activeButton,\n              )}\n              data-active={lightBackground}\n              onClick={toggleLightBackground}\n            >\n              {translate(\"lightBackground\")}\n            </button>\n            <button\n              className={cn(\n                classes?.button,\n                underlineLinks && \"active\",\n                underlineLinks && classes?.activeButton,\n              )}\n              data-active={underlineLinks}\n              onClick={toggleUnderlineLinks}\n            >\n              {translate(\"underlineLinks\")}\n            </button>\n            <button\n              className={cn(\n                classes?.button,\n                readableFont && \"active\",\n                readableFont && classes?.activeButton,\n              )}\n              data-active={readableFont}\n              onClick={toggleReadableFont}\n            >\n              {translate(\"readableFont\")}\n            </button>\n            <button\n              className={cn(\n                classes?.button,\n                classes?.voiceButton,\n                voiceEnabled && \"active\",\n                voiceEnabled && classes?.activeButton,\n              )}\n              data-active={voiceEnabled}\n              onClick={toggleVoice}\n            >\n              🎤 {translate(\"voiceCommand\")}\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n","import React from 'react';\nimport { useAccessibility } from './AccessibilityContext';\nimport { TranslationKey } from './translations';\n\ninterface TProps {\n  k: TranslationKey | string;\n  children?: React.ReactNode;\n}\n\nexport const T: React.FC<TProps> = ({ k, children }) => {\n  const { translate, language } = useAccessibility();\n  \n  if (children && typeof children === 'string') {\n    return <>{children}</>;\n  }\n  \n  return <>{translate(k as TranslationKey)}</>;\n};\n"],"names":["createContext","useState","useEffect","useContext","cn"],"mappings":"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"}

package/dist/styles.css

@@ -0,0 +1,145 @@
+:root {
+  --ngp-a11y-gap: 8px;
+  --ngp-a11y-padding: 12px;
+  --ngp-a11y-radius: 4px;
+  --ngp-a11y-font-size: 14px;
+  --ngp-a11y-border: #ccc;
+  --ngp-a11y-bg: #f5f5f5;
+  --ngp-a11y-surface: #ffffff;
+  --ngp-a11y-surface-hover: #f5f5f5;
+  --ngp-a11y-text: #111111;
+  --ngp-a11y-accent: #007bff;
+  --ngp-a11y-accent-hover: #0056b3;
+  --ngp-a11y-accent-text: #ffffff;
+  --ngp-a11y-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.accessibility-toolbar {
+  display: flex;
+  gap: var(--ngp-a11y-gap);
+  padding: var(--ngp-a11y-padding);
+  background: var(--ngp-a11y-bg);
+  border-bottom: 1px solid var(--ngp-a11y-border);
+  flex-wrap: wrap;
+}
+
+.accessibility-toolbar button,
+.accessibility-toolbar select {
+  padding: 8px 12px;
+  border: 1px solid var(--ngp-a11y-border);
+  background: var(--ngp-a11y-surface);
+  color: var(--ngp-a11y-text);
+  cursor: pointer;
+  border-radius: var(--ngp-a11y-radius);
+  font-size: var(--ngp-a11y-font-size);
+}
+
+.accessibility-toolbar button:hover {
+  background: var(--ngp-a11y-surface-hover);
+}
+
+.accessibility-toolbar button.active {
+  background: var(--ngp-a11y-accent);
+  color: var(--ngp-a11y-accent-text);
+  border-color: var(--ngp-a11y-accent);
+}
+
+/* Dropdown Styles */
+.accessibility-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.accessibility-dropdown-toggle {
+  padding: 10px 16px;
+  background: var(--ngp-a11y-accent);
+  color: var(--ngp-a11y-accent-text);
+  border: none;
+  border-radius: var(--ngp-a11y-radius);
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.accessibility-dropdown-toggle:hover {
+  background: var(--ngp-a11y-accent-hover);
+}
+
+.accessibility-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 8px;
+  background: var(--ngp-a11y-surface);
+  border: 1px solid var(--ngp-a11y-border);
+  border-radius: var(--ngp-a11y-radius);
+  box-shadow: var(--ngp-a11y-shadow);
+  min-width: 280px;
+  z-index: 1000;
+  padding: 12px;
+}
+
+.accessibility-dropdown-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ngp-a11y-gap);
+  padding: 8px 0;
+  border-bottom: 1px solid var(--ngp-a11y-border);
+}
+
+.accessibility-dropdown-section:last-child {
+  border-bottom: none;
+}
+
+.accessibility-dropdown-section label {
+  font-weight: 500;
+  font-size: 14px;
+  margin-bottom: 4px;
+}
+
+.accessibility-dropdown-section button,
+.accessibility-dropdown-section select {
+  padding: 8px 12px;
+  border: 1px solid var(--ngp-a11y-border);
+  background: var(--ngp-a11y-surface);
+  color: var(--ngp-a11y-text);
+  cursor: pointer;
+  border-radius: var(--ngp-a11y-radius);
+  font-size: var(--ngp-a11y-font-size);
+  text-align: left;
+}
+
+.accessibility-dropdown-section button:hover {
+  background: var(--ngp-a11y-surface-hover);
+}
+
+.accessibility-dropdown-section button.active {
+  background: var(--ngp-a11y-accent);
+  color: var(--ngp-a11y-accent-text);
+  border-color: var(--ngp-a11y-accent);
+}
+
+.high-contrast {
+  filter: contrast(2);
+}
+
+.negative-contrast {
+  filter: invert(1) hue-rotate(180deg);
+}
+
+.light-background,
+.light-background body {
+  background: #ffffff !important;
+  color: #000000 !important;
+}
+
+.underline-links a {
+  text-decoration: underline !important;
+}
+
+.readable-font,
+.readable-font * {
+  font-family: "Arial", "Helvetica", sans-serif !important;
+  letter-spacing: 0.05em !important;
+  line-height: 1.6 !important;
+}

package/dist/translations.d.ts

@@ -0,0 +1,34 @@
+export declare const translations: {
+    en: {
+        increaseText: string;
+        decreaseText: string;
+        highContrast: string;
+        negativeContrast: string;
+        lightBackground: string;
+        underlineLinks: string;
+        readableFont: string;
+        voiceCommand: string;
+    };
+    tl: {
+        increaseText: string;
+        decreaseText: string;
+        highContrast: string;
+        negativeContrast: string;
+        lightBackground: string;
+        underlineLinks: string;
+        readableFont: string;
+        voiceCommand: string;
+    };
+    ceb: {
+        increaseText: string;
+        decreaseText: string;
+        highContrast: string;
+        negativeContrast: string;
+        lightBackground: string;
+        underlineLinks: string;
+        readableFont: string;
+        voiceCommand: string;
+    };
+};
+export type Language = keyof typeof translations;
+export type TranslationKey = keyof typeof translations.en;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngp-accessibility",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "React accessibility package with translation, text sizing, contrast modes, and voice commands",
   "author": {
     "name": "Rodolfo Miclat Jr."
@@ -12,7 +12,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "rollup -c",
+    "build": "rollup -c && cp src/styles.css dist/styles.css",
     "dev": "rollup -c -w"
   },
   "keywords": [
@@ -32,6 +32,7 @@
     "@rollup/plugin-typescript": "^11.0.0",
     "@types/react": "^18.0.0",
     "rollup": "^3.0.0",
+    "tslib": "^2.6.0",
     "typescript": "^5.0.0"
   },
   "license": "MIT"