@blakfy/accessibility-widget-react 2.0.0-alpha.10

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tarık Tunç
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,54 @@
+import { Locale } from '@blakfy/a11y-core';
+import { Position } from '@blakfy/a11y-core';
+import { Preferences } from '@blakfy/a11y-core';
+import { Theme } from '@blakfy/a11y-core';
+import { WidgetOptions } from '@blakfy/a11y-core';
+
+/**
+ * Mounts the Blakfy accessibility widget into the DOM.
+ * Renders nothing — the widget manages its own DOM elements.
+ *
+ * @example
+ * ```tsx
+ * // app/App.tsx or main entry
+ * import { A11yWidget } from '@blakfy/accessibility-widget-react';
+ *
+ * export default function App() {
+ *   return (
+ *     <>
+ *       <A11yWidget locale="tr" theme="auto" position="bottom-right" />
+ *       <RouterOutlet />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare function A11yWidget(props: A11yWidgetProps): null;
+
+export declare type A11yWidgetProps = Partial<WidgetOptions>;
+
+export { Locale }
+
+export { Position }
+
+export { Preferences }
+
+export { Theme }
+
+/**
+ * Returns the current accessibility preferences and re-renders whenever
+ * the user changes a preference in the widget panel.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const prefs = useA11yPreferences();
+ *   return <p style={{ fontSize: prefs.fontScale === 125 ? '1.25rem' : '1rem' }}>Hello</p>;
+ * }
+ * ```
+ */
+export declare function useA11yPreferences(): Preferences;
+
+export { WidgetOptions }
+
+export { }

package/dist/index.js

@@ -0,0 +1,24 @@
+import { useEffect as o, useState as f } from "react";
+import { mount as i } from "@blakfy/accessibility-widget";
+import { getPreferences as c, EVENT_NAMES as n } from "@blakfy/a11y-core";
+function p(e) {
+  return o(() => {
+    const { unmount: r } = i(e);
+    return r;
+  }, []), null;
+}
+function A() {
+  const [e, r] = f(c);
+  return o(() => {
+    function t(s) {
+      const u = s.detail;
+      r(u.prefs);
+    }
+    return window.addEventListener(n.CHANGE, t), () => window.removeEventListener(n.CHANGE, t);
+  }, []), e;
+}
+export {
+  p as A11yWidget,
+  A as useA11yPreferences
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/A11yWidget.tsx","../src/useA11yPreferences.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { mount } from '@blakfy/accessibility-widget';\nimport type { WidgetOptions } from '@blakfy/a11y-core';\n\nexport type A11yWidgetProps = Partial<WidgetOptions>;\n\n/**\n * Mounts the Blakfy accessibility widget into the DOM.\n * Renders nothing — the widget manages its own DOM elements.\n *\n * @example\n * ```tsx\n * // app/App.tsx or main entry\n * import { A11yWidget } from '@blakfy/accessibility-widget-react';\n *\n * export default function App() {\n *   return (\n *     <>\n *       <A11yWidget locale=\"tr\" theme=\"auto\" position=\"bottom-right\" />\n *       <RouterOutlet />\n *     </>\n *   );\n * }\n * ```\n */\nexport function A11yWidget(props: A11yWidgetProps) {\n  useEffect(() => {\n    const { unmount } = mount(props);\n    return unmount;\n  }, []);\n\n  return null;\n}\n","import { useState, useEffect } from 'react';\nimport { getPreferences, EVENT_NAMES } from '@blakfy/a11y-core';\nimport type { Preferences, PreferencesRecord } from '@blakfy/a11y-core';\n\n/**\n * Returns the current accessibility preferences and re-renders whenever\n * the user changes a preference in the widget panel.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const prefs = useA11yPreferences();\n *   return <p style={{ fontSize: prefs.fontScale === 125 ? '1.25rem' : '1rem' }}>Hello</p>;\n * }\n * ```\n */\nexport function useA11yPreferences(): Preferences {\n  const [prefs, setPrefs] = useState<Preferences>(getPreferences);\n\n  useEffect(() => {\n    function handler(e: Event) {\n      const record = (e as CustomEvent<PreferencesRecord>).detail;\n      setPrefs(record.prefs);\n    }\n    window.addEventListener(EVENT_NAMES.CHANGE, handler);\n    return () => window.removeEventListener(EVENT_NAMES.CHANGE, handler);\n  }, []);\n\n  return prefs;\n}\n"],"names":["A11yWidget","props","useEffect","unmount","mount","useA11yPreferences","prefs","setPrefs","useState","getPreferences","handler","e","record","EVENT_NAMES"],"mappings":";;;AAyBO,SAASA,EAAWC,GAAwB;AACjD,SAAAC,EAAU,MAAM;AACd,UAAM,EAAE,SAAAC,EAAA,IAAYC,EAAMH,CAAK;AAC/B,WAAOE;AAAA,EACT,GAAG,CAAA,CAAE,GAEE;AACT;AChBO,SAASE,IAAkC;AAChD,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAsBC,CAAc;AAE9D,SAAAP,EAAU,MAAM;AACd,aAASQ,EAAQC,GAAU;AACzB,YAAMC,IAAUD,EAAqC;AACrD,MAAAJ,EAASK,EAAO,KAAK;AAAA,IACvB;AACA,kBAAO,iBAAiBC,EAAY,QAAQH,CAAO,GAC5C,MAAM,OAAO,oBAAoBG,EAAY,QAAQH,CAAO;AAAA,EACrE,GAAG,CAAA,CAAE,GAEEJ;AACT;"}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@blakfy/accessibility-widget-react",
+  "version": "2.0.0-alpha.10",
+  "description": "React wrapper for @blakfy/accessibility-widget — A11yWidget component and useA11yPreferences hook",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "dependencies": {
+    "@blakfy/a11y-core": "2.0.0-alpha.10",
+    "@blakfy/accessibility-widget": "2.0.0-alpha.10"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.3.12",
+    "jsdom": "^25.0.1",
+    "react": "^18.3.1",
+    "vite": "^5.4.10",
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^2.1.4"
+  },
+  "keywords": [
+    "accessibility",
+    "a11y",
+    "wcag",
+    "react",
+    "hook",
+    "blakfy"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "api:check": "api-extractor run",
+    "api:update": "api-extractor run --local"
+  }
+}