@theaccessibleteam/a11y-feedback-react 1.0.0

package/README.md

@@ -0,0 +1,147 @@
+# @theaccessibleteam/a11y-feedback-react
+
+React bindings for [a11y-feedback](https://www.npmjs.com/package/@theaccessibleteam/a11y-feedback) - the accessibility-first feedback library.
+
+## Installation
+
+```bash
+npm install @theaccessibleteam/a11y-feedback @theaccessibleteam/a11y-feedback-react
+```
+
+## Quick Start
+
+### Option 1: Using the Hook (Simple)
+
+```tsx
+import { useA11yFeedback } from '@theaccessibleteam/a11y-feedback-react'
+import { configureFeedback } from '@theaccessibleteam/a11y-feedback'
+
+// Configure once at app startup
+configureFeedback({ visual: true })
+
+function SaveButton() {
+  const feedback = useA11yFeedback()
+
+  const handleSave = async () => {
+    feedback.loading('Saving...', { id: 'save' })
+
+    try {
+      await saveData()
+      feedback.success('Saved!', { id: 'save' })
+    } catch (e) {
+      feedback.error('Failed to save', { id: 'save', focus: '#save-btn' })
+    }
+  }
+
+  return <button id="save-btn" onClick={handleSave}>Save</button>
+}
+```
+
+### Option 2: Using the Provider (Recommended for Apps)
+
+```tsx
+import { A11yFeedbackProvider, useA11yFeedbackContext } from '@theaccessibleteam/a11y-feedback-react'
+
+function App() {
+  return (
+    <A11yFeedbackProvider config={{ visual: true }} debug>
+      <MyApp />
+    </A11yFeedbackProvider>
+  )
+}
+
+function MyComponent() {
+  const { success, error } = useA11yFeedbackContext()
+
+  const handleAction = async () => {
+    try {
+      await performAction()
+      success('Action completed!')
+    } catch (e) {
+      error('Action failed')
+    }
+  }
+
+  return <button onClick={handleAction}>Do Something</button>
+}
+```
+
+## Hooks
+
+### `useA11yFeedback()`
+
+Main hook providing all feedback methods. Can be used without a provider.
+
+```tsx
+const { success, error, warning, info, loading, dismiss, dismissAll } = useA11yFeedback()
+```
+
+### `useA11yAnnounce()`
+
+Lightweight hook for screen reader announcements only.
+
+```tsx
+const { announcePolite, announceAssertive } = useA11yAnnounce()
+
+// Polite announcements wait for current speech to finish
+announcePolite('Results updated')
+
+// Assertive announcements interrupt immediately
+announceAssertive('Error: Please fix the form')
+```
+
+### `useFeedbackConfig()`
+
+Hook for managing configuration reactively.
+
+```tsx
+const { config, updateConfig, enableVisual, disableVisual } = useFeedbackConfig()
+```
+
+### `useA11yFeedbackContext()`
+
+Access the provider context. Must be used inside `A11yFeedbackProvider`.
+
+```tsx
+const ctx = useA11yFeedbackContext()
+```
+
+## API
+
+### `A11yFeedbackProvider`
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `config` | `Partial<FeedbackConfig>` | Configuration options |
+| `debug` | `boolean` | Enable debug mode |
+| `children` | `ReactNode` | Child components |
+
+### `useA11yFeedback()` Return
+
+| Method | Description |
+|--------|-------------|
+| `success(message, options?)` | Send success notification |
+| `error(message, options?)` | Send error notification |
+| `warning(message, options?)` | Send warning notification |
+| `info(message, options?)` | Send info notification |
+| `loading(message, options?)` | Send loading notification |
+| `dismiss(id)` | Dismiss specific notification |
+| `dismissAll()` | Dismiss all notifications |
+
+## TypeScript
+
+Full TypeScript support with exported types:
+
+```tsx
+import type { 
+  FeedbackType, 
+  FeedbackOptions, 
+  FeedbackEvent,
+  FeedbackConfig 
+} from '@theaccessibleteam/a11y-feedback-react'
+```
+
+## License
+
+MIT
+

package/dist/index.cjs

@@ -0,0 +1,215 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  A11yFeedbackProvider: () => A11yFeedbackProvider,
+  useA11yAnnounce: () => useA11yAnnounce,
+  useA11yFeedback: () => useA11yFeedback,
+  useA11yFeedbackContext: () => useA11yFeedbackContext,
+  useFeedbackConfig: () => useFeedbackConfig
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/provider.tsx
+var import_react = require("react");
+var import_a11y_feedback = require("@theaccessibleteam/a11y-feedback");
+var import_jsx_runtime = require("react/jsx-runtime");
+var A11yFeedbackContext = (0, import_react.createContext)(null);
+function A11yFeedbackProvider({
+  children,
+  config,
+  debug = false
+}) {
+  (0, import_react.useEffect)(() => {
+    if (config) {
+      (0, import_a11y_feedback.configureFeedback)(config);
+    }
+    if (debug) {
+      (0, import_a11y_feedback.enableFeedbackDebug)();
+    }
+    return () => {
+      (0, import_a11y_feedback.resetConfig)();
+      (0, import_a11y_feedback.disableFeedbackDebug)();
+      (0, import_a11y_feedback.dismissAllVisualFeedback)();
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (config) {
+      (0, import_a11y_feedback.configureFeedback)(config);
+    }
+  }, [config]);
+  (0, import_react.useEffect)(() => {
+    if (debug) {
+      (0, import_a11y_feedback.enableFeedbackDebug)();
+    } else {
+      (0, import_a11y_feedback.disableFeedbackDebug)();
+    }
+  }, [debug]);
+  const contextValue = (0, import_react.useMemo)(
+    () => ({
+      success: (message, options) => import_a11y_feedback.notify.success(message, options),
+      error: (message, options) => import_a11y_feedback.notify.error(message, options),
+      warning: (message, options) => import_a11y_feedback.notify.warning(message, options),
+      info: (message, options) => import_a11y_feedback.notify.info(message, options),
+      loading: (message, options) => import_a11y_feedback.notify.loading(message, options),
+      notify: import_a11y_feedback.notify,
+      dismissAll: import_a11y_feedback.dismissAllVisualFeedback,
+      getLog: () => [...(0, import_a11y_feedback.getFeedbackLog)()],
+      clearLog: import_a11y_feedback.clearFeedbackLog
+    }),
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(A11yFeedbackContext.Provider, { value: contextValue, children });
+}
+function useA11yFeedbackContext() {
+  const context = (0, import_react.useContext)(A11yFeedbackContext);
+  if (context === null) {
+    throw new Error(
+      "useA11yFeedbackContext must be used within an A11yFeedbackProvider"
+    );
+  }
+  return context;
+}
+
+// src/useA11yFeedback.ts
+var import_react2 = require("react");
+var import_a11y_feedback2 = require("@theaccessibleteam/a11y-feedback");
+function useA11yFeedback() {
+  const success = (0, import_react2.useCallback)(
+    (message, options) => import_a11y_feedback2.notify.success(message, options),
+    []
+  );
+  const error = (0, import_react2.useCallback)(
+    (message, options) => import_a11y_feedback2.notify.error(message, options),
+    []
+  );
+  const warning = (0, import_react2.useCallback)(
+    (message, options) => import_a11y_feedback2.notify.warning(message, options),
+    []
+  );
+  const info = (0, import_react2.useCallback)(
+    (message, options) => import_a11y_feedback2.notify.info(message, options),
+    []
+  );
+  const loading = (0, import_react2.useCallback)(
+    (message, options) => import_a11y_feedback2.notify.loading(message, options),
+    []
+  );
+  const dismiss = (0, import_react2.useCallback)((id) => {
+    (0, import_a11y_feedback2.dismissVisualFeedback)(id);
+  }, []);
+  const dismissAll = (0, import_react2.useCallback)(() => {
+    (0, import_a11y_feedback2.dismissAllVisualFeedback)();
+  }, []);
+  return (0, import_react2.useMemo)(
+    () => ({
+      success,
+      error,
+      warning,
+      info,
+      loading,
+      dismiss,
+      dismissAll
+    }),
+    [success, error, warning, info, loading, dismiss, dismissAll]
+  );
+}
+
+// src/useA11yAnnounce.ts
+var import_react3 = require("react");
+var import_a11y_feedback3 = require("@theaccessibleteam/a11y-feedback");
+function useA11yAnnounce() {
+  const announcePolite = (0, import_react3.useCallback)(
+    async (message, options) => {
+      await import_a11y_feedback3.notify.info(message, options);
+    },
+    []
+  );
+  const announceAssertive = (0, import_react3.useCallback)(
+    async (message, options) => {
+      await import_a11y_feedback3.notify.warning(message, options);
+    },
+    []
+  );
+  const announce = (0, import_react3.useCallback)(
+    async (message, politeness, options) => {
+      if (politeness === "assertive") {
+        await import_a11y_feedback3.notify.warning(message, options);
+      } else {
+        await import_a11y_feedback3.notify.info(message, options);
+      }
+    },
+    []
+  );
+  return (0, import_react3.useMemo)(
+    () => ({
+      announcePolite,
+      announceAssertive,
+      announce
+    }),
+    [announcePolite, announceAssertive, announce]
+  );
+}
+
+// src/useFeedbackConfig.ts
+var import_react4 = require("react");
+var import_a11y_feedback4 = require("@theaccessibleteam/a11y-feedback");
+function useFeedbackConfig() {
+  const [config, setConfig] = (0, import_react4.useState)(() => (0, import_a11y_feedback4.getConfig)());
+  const syncConfig = (0, import_react4.useCallback)(() => {
+    setConfig((0, import_a11y_feedback4.getConfig)());
+  }, []);
+  const updateConfig = (0, import_react4.useCallback)(
+    (updates) => {
+      (0, import_a11y_feedback4.configureFeedback)(updates);
+      syncConfig();
+    },
+    [syncConfig]
+  );
+  const reset = (0, import_react4.useCallback)(() => {
+    (0, import_a11y_feedback4.resetConfig)();
+    syncConfig();
+  }, [syncConfig]);
+  const enableVisual = (0, import_react4.useCallback)(() => {
+    updateConfig({ visual: true });
+  }, [updateConfig]);
+  const disableVisual = (0, import_react4.useCallback)(() => {
+    updateConfig({ visual: false });
+  }, [updateConfig]);
+  (0, import_react4.useEffect)(() => {
+    syncConfig();
+  }, [syncConfig]);
+  return {
+    config,
+    updateConfig,
+    resetConfig: reset,
+    enableVisual,
+    disableVisual
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  A11yFeedbackProvider,
+  useA11yAnnounce,
+  useA11yFeedback,
+  useA11yFeedbackContext,
+  useFeedbackConfig
+});

package/dist/index.d.cts

@@ -0,0 +1,241 @@
+import { ReactNode } from 'react';
+import { FeedbackConfig, FeedbackOptions, FeedbackEvent, notify, FeedbackLogEntry } from '@theaccessibleteam/a11y-feedback';
+export { FeedbackConfig, FeedbackEvent, FeedbackOptions, FeedbackType } from '@theaccessibleteam/a11y-feedback';
+
+/**
+ * React Context Provider for a11y-feedback
+ */
+
+/**
+ * Context value interface
+ */
+interface A11yFeedbackContextValue {
+    /** Send a success notification */
+    success: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send an error notification */
+    error: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send a warning notification */
+    warning: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send an info notification */
+    info: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send a loading notification */
+    loading: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Generic notify function */
+    notify: typeof notify;
+    /** Dismiss all visual feedback */
+    dismissAll: () => void;
+    /** Get the feedback log (when debug is enabled) */
+    getLog: () => FeedbackLogEntry[];
+    /** Clear the feedback log */
+    clearLog: () => void;
+}
+/**
+ * Provider props
+ */
+interface A11yFeedbackProviderProps {
+    /** React children */
+    children: ReactNode;
+    /** Configuration options */
+    config?: Partial<FeedbackConfig>;
+    /** Enable debug mode */
+    debug?: boolean;
+}
+/**
+ * Provider component for a11y-feedback
+ *
+ * @example
+ * ```tsx
+ * import { A11yFeedbackProvider } from '@theaccessibleteam/a11y-feedback-react'
+ *
+ * function App() {
+ *   return (
+ *     <A11yFeedbackProvider config={{ visual: true }}>
+ *       <MyApp />
+ *     </A11yFeedbackProvider>
+ *   )
+ * }
+ * ```
+ */
+declare function A11yFeedbackProvider({ children, config, debug, }: A11yFeedbackProviderProps): JSX.Element;
+/**
+ * Hook to access the a11y-feedback context
+ *
+ * @throws Error if used outside of A11yFeedbackProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { success, error } = useA11yFeedbackContext()
+ *
+ *   const handleSave = async () => {
+ *     try {
+ *       await saveData()
+ *       success('Data saved successfully')
+ *     } catch (e) {
+ *       error('Failed to save data')
+ *     }
+ *   }
+ *
+ *   return <button onClick={handleSave}>Save</button>
+ * }
+ * ```
+ */
+declare function useA11yFeedbackContext(): A11yFeedbackContextValue;
+
+/**
+ * Return type for useA11yFeedback hook
+ */
+interface UseA11yFeedbackReturn {
+    /** Send a success notification */
+    success: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send an error notification */
+    error: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send a warning notification */
+    warning: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send an info notification */
+    info: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send a loading notification */
+    loading: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Dismiss a specific visual feedback item */
+    dismiss: (id: string) => void;
+    /** Dismiss all visual feedback items */
+    dismissAll: () => void;
+}
+/**
+ * Main hook for sending accessible feedback notifications
+ *
+ * Can be used without a provider for simple use cases.
+ * For app-wide configuration, use with A11yFeedbackProvider.
+ *
+ * @example
+ * ```tsx
+ * function SaveButton() {
+ *   const feedback = useA11yFeedback()
+ *
+ *   const handleSave = async () => {
+ *     feedback.loading('Saving...', { id: 'save' })
+ *
+ *     try {
+ *       await saveData()
+ *       feedback.success('Saved successfully!', { id: 'save' })
+ *     } catch (e) {
+ *       feedback.error('Failed to save', { id: 'save', focus: '#save-btn' })
+ *     }
+ *   }
+ *
+ *   return <button id="save-btn" onClick={handleSave}>Save</button>
+ * }
+ * ```
+ */
+declare function useA11yFeedback(): UseA11yFeedbackReturn;
+
+/**
+ * Return type for useA11yAnnounce hook
+ */
+interface UseA11yAnnounceReturn {
+    /**
+     * Announce a message politely (for non-urgent updates)
+     * Screen reader will wait for current speech to finish
+     */
+    announcePolite: (message: string, options?: FeedbackOptions) => Promise<void>;
+    /**
+     * Announce a message assertively (for urgent updates)
+     * Screen reader will interrupt current speech
+     */
+    announceAssertive: (message: string, options?: FeedbackOptions) => Promise<void>;
+    /**
+     * Announce with custom options
+     */
+    announce: (message: string, politeness: 'polite' | 'assertive', options?: FeedbackOptions) => Promise<void>;
+}
+/**
+ * Simple hook for making screen reader announcements
+ *
+ * This is a lightweight alternative to useA11yFeedback when you only
+ * need to announce messages without visual feedback or complex options.
+ *
+ * @example
+ * ```tsx
+ * function SearchResults({ count }: { count: number }) {
+ *   const { announcePolite } = useA11yAnnounce()
+ *
+ *   useEffect(() => {
+ *     announcePolite(`Found ${count} results`)
+ *   }, [count, announcePolite])
+ *
+ *   return <div>{count} results found</div>
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * function Timer({ secondsLeft }: { secondsLeft: number }) {
+ *   const { announceAssertive } = useA11yAnnounce()
+ *
+ *   useEffect(() => {
+ *     if (secondsLeft <= 10) {
+ *       announceAssertive(`${secondsLeft} seconds remaining`)
+ *     }
+ *   }, [secondsLeft, announceAssertive])
+ *
+ *   return <div>{secondsLeft}s</div>
+ * }
+ * ```
+ */
+declare function useA11yAnnounce(): UseA11yAnnounceReturn;
+
+/**
+ * Return type for useFeedbackConfig hook
+ */
+interface UseFeedbackConfigReturn {
+    /** Current configuration */
+    config: FeedbackConfig;
+    /** Update configuration (merges with existing) */
+    updateConfig: (updates: Partial<FeedbackConfig>) => void;
+    /** Reset configuration to defaults */
+    resetConfig: () => void;
+    /** Enable visual feedback */
+    enableVisual: () => void;
+    /** Disable visual feedback */
+    disableVisual: () => void;
+}
+/**
+ * Hook for managing a11y-feedback configuration
+ *
+ * Provides reactive access to the configuration and methods to update it.
+ *
+ * @example
+ * ```tsx
+ * function SettingsPanel() {
+ *   const { config, updateConfig, enableVisual, disableVisual } = useFeedbackConfig()
+ *
+ *   return (
+ *     <div>
+ *       <label>
+ *         <input
+ *           type="checkbox"
+ *           checked={config.visual}
+ *           onChange={(e) =>
+ *             e.target.checked ? enableVisual() : disableVisual()
+ *           }
+ *         />
+ *         Show visual notifications
+ *       </label>
+ *
+ *       <select
+ *         value={config.visualPosition}
+ *         onChange={(e) =>
+ *           updateConfig({ visualPosition: e.target.value as any })
+ *         }
+ *       >
+ *         <option value="top-right">Top Right</option>
+ *         <option value="bottom-right">Bottom Right</option>
+ *       </select>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+declare function useFeedbackConfig(): UseFeedbackConfigReturn;
+
+export { A11yFeedbackProvider, useA11yAnnounce, useA11yFeedback, useA11yFeedbackContext, useFeedbackConfig };

package/dist/index.d.ts

@@ -0,0 +1,241 @@
+import { ReactNode } from 'react';
+import { FeedbackConfig, FeedbackOptions, FeedbackEvent, notify, FeedbackLogEntry } from '@theaccessibleteam/a11y-feedback';
+export { FeedbackConfig, FeedbackEvent, FeedbackOptions, FeedbackType } from '@theaccessibleteam/a11y-feedback';
+
+/**
+ * React Context Provider for a11y-feedback
+ */
+
+/**
+ * Context value interface
+ */
+interface A11yFeedbackContextValue {
+    /** Send a success notification */
+    success: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send an error notification */
+    error: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send a warning notification */
+    warning: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send an info notification */
+    info: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send a loading notification */
+    loading: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Generic notify function */
+    notify: typeof notify;
+    /** Dismiss all visual feedback */
+    dismissAll: () => void;
+    /** Get the feedback log (when debug is enabled) */
+    getLog: () => FeedbackLogEntry[];
+    /** Clear the feedback log */
+    clearLog: () => void;
+}
+/**
+ * Provider props
+ */
+interface A11yFeedbackProviderProps {
+    /** React children */
+    children: ReactNode;
+    /** Configuration options */
+    config?: Partial<FeedbackConfig>;
+    /** Enable debug mode */
+    debug?: boolean;
+}
+/**
+ * Provider component for a11y-feedback
+ *
+ * @example
+ * ```tsx
+ * import { A11yFeedbackProvider } from '@theaccessibleteam/a11y-feedback-react'
+ *
+ * function App() {
+ *   return (
+ *     <A11yFeedbackProvider config={{ visual: true }}>
+ *       <MyApp />
+ *     </A11yFeedbackProvider>
+ *   )
+ * }
+ * ```
+ */
+declare function A11yFeedbackProvider({ children, config, debug, }: A11yFeedbackProviderProps): JSX.Element;
+/**
+ * Hook to access the a11y-feedback context
+ *
+ * @throws Error if used outside of A11yFeedbackProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { success, error } = useA11yFeedbackContext()
+ *
+ *   const handleSave = async () => {
+ *     try {
+ *       await saveData()
+ *       success('Data saved successfully')
+ *     } catch (e) {
+ *       error('Failed to save data')
+ *     }
+ *   }
+ *
+ *   return <button onClick={handleSave}>Save</button>
+ * }
+ * ```
+ */
+declare function useA11yFeedbackContext(): A11yFeedbackContextValue;
+
+/**
+ * Return type for useA11yFeedback hook
+ */
+interface UseA11yFeedbackReturn {
+    /** Send a success notification */
+    success: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send an error notification */
+    error: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send a warning notification */
+    warning: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send an info notification */
+    info: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send a loading notification */
+    loading: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Dismiss a specific visual feedback item */
+    dismiss: (id: string) => void;
+    /** Dismiss all visual feedback items */
+    dismissAll: () => void;
+}
+/**
+ * Main hook for sending accessible feedback notifications
+ *
+ * Can be used without a provider for simple use cases.
+ * For app-wide configuration, use with A11yFeedbackProvider.
+ *
+ * @example
+ * ```tsx
+ * function SaveButton() {
+ *   const feedback = useA11yFeedback()
+ *
+ *   const handleSave = async () => {
+ *     feedback.loading('Saving...', { id: 'save' })
+ *
+ *     try {
+ *       await saveData()
+ *       feedback.success('Saved successfully!', { id: 'save' })
+ *     } catch (e) {
+ *       feedback.error('Failed to save', { id: 'save', focus: '#save-btn' })
+ *     }
+ *   }
+ *
+ *   return <button id="save-btn" onClick={handleSave}>Save</button>
+ * }
+ * ```
+ */
+declare function useA11yFeedback(): UseA11yFeedbackReturn;
+
+/**
+ * Return type for useA11yAnnounce hook
+ */
+interface UseA11yAnnounceReturn {
+    /**
+     * Announce a message politely (for non-urgent updates)
+     * Screen reader will wait for current speech to finish
+     */
+    announcePolite: (message: string, options?: FeedbackOptions) => Promise<void>;
+    /**
+     * Announce a message assertively (for urgent updates)
+     * Screen reader will interrupt current speech
+     */
+    announceAssertive: (message: string, options?: FeedbackOptions) => Promise<void>;
+    /**
+     * Announce with custom options
+     */
+    announce: (message: string, politeness: 'polite' | 'assertive', options?: FeedbackOptions) => Promise<void>;
+}
+/**
+ * Simple hook for making screen reader announcements
+ *
+ * This is a lightweight alternative to useA11yFeedback when you only
+ * need to announce messages without visual feedback or complex options.
+ *
+ * @example
+ * ```tsx
+ * function SearchResults({ count }: { count: number }) {
+ *   const { announcePolite } = useA11yAnnounce()
+ *
+ *   useEffect(() => {
+ *     announcePolite(`Found ${count} results`)
+ *   }, [count, announcePolite])
+ *
+ *   return <div>{count} results found</div>
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * function Timer({ secondsLeft }: { secondsLeft: number }) {
+ *   const { announceAssertive } = useA11yAnnounce()
+ *
+ *   useEffect(() => {
+ *     if (secondsLeft <= 10) {
+ *       announceAssertive(`${secondsLeft} seconds remaining`)
+ *     }
+ *   }, [secondsLeft, announceAssertive])
+ *
+ *   return <div>{secondsLeft}s</div>
+ * }
+ * ```
+ */
+declare function useA11yAnnounce(): UseA11yAnnounceReturn;
+
+/**
+ * Return type for useFeedbackConfig hook
+ */
+interface UseFeedbackConfigReturn {
+    /** Current configuration */
+    config: FeedbackConfig;
+    /** Update configuration (merges with existing) */
+    updateConfig: (updates: Partial<FeedbackConfig>) => void;
+    /** Reset configuration to defaults */
+    resetConfig: () => void;
+    /** Enable visual feedback */
+    enableVisual: () => void;
+    /** Disable visual feedback */
+    disableVisual: () => void;
+}
+/**
+ * Hook for managing a11y-feedback configuration
+ *
+ * Provides reactive access to the configuration and methods to update it.
+ *
+ * @example
+ * ```tsx
+ * function SettingsPanel() {
+ *   const { config, updateConfig, enableVisual, disableVisual } = useFeedbackConfig()
+ *
+ *   return (
+ *     <div>
+ *       <label>
+ *         <input
+ *           type="checkbox"
+ *           checked={config.visual}
+ *           onChange={(e) =>
+ *             e.target.checked ? enableVisual() : disableVisual()
+ *           }
+ *         />
+ *         Show visual notifications
+ *       </label>
+ *
+ *       <select
+ *         value={config.visualPosition}
+ *         onChange={(e) =>
+ *           updateConfig({ visualPosition: e.target.value as any })
+ *         }
+ *       >
+ *         <option value="top-right">Top Right</option>
+ *         <option value="bottom-right">Bottom Right</option>
+ *       </select>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+declare function useFeedbackConfig(): UseFeedbackConfigReturn;
+
+export { A11yFeedbackProvider, useA11yAnnounce, useA11yFeedback, useA11yFeedbackContext, useFeedbackConfig };

package/dist/index.js

@@ -0,0 +1,206 @@
+// src/provider.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo
+} from "react";
+import {
+  notify,
+  configureFeedback,
+  resetConfig,
+  enableFeedbackDebug,
+  disableFeedbackDebug,
+  getFeedbackLog,
+  clearFeedbackLog,
+  dismissAllVisualFeedback
+} from "@theaccessibleteam/a11y-feedback";
+import { jsx } from "react/jsx-runtime";
+var A11yFeedbackContext = createContext(null);
+function A11yFeedbackProvider({
+  children,
+  config,
+  debug = false
+}) {
+  useEffect(() => {
+    if (config) {
+      configureFeedback(config);
+    }
+    if (debug) {
+      enableFeedbackDebug();
+    }
+    return () => {
+      resetConfig();
+      disableFeedbackDebug();
+      dismissAllVisualFeedback();
+    };
+  }, []);
+  useEffect(() => {
+    if (config) {
+      configureFeedback(config);
+    }
+  }, [config]);
+  useEffect(() => {
+    if (debug) {
+      enableFeedbackDebug();
+    } else {
+      disableFeedbackDebug();
+    }
+  }, [debug]);
+  const contextValue = useMemo(
+    () => ({
+      success: (message, options) => notify.success(message, options),
+      error: (message, options) => notify.error(message, options),
+      warning: (message, options) => notify.warning(message, options),
+      info: (message, options) => notify.info(message, options),
+      loading: (message, options) => notify.loading(message, options),
+      notify,
+      dismissAll: dismissAllVisualFeedback,
+      getLog: () => [...getFeedbackLog()],
+      clearLog: clearFeedbackLog
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx(A11yFeedbackContext.Provider, { value: contextValue, children });
+}
+function useA11yFeedbackContext() {
+  const context = useContext(A11yFeedbackContext);
+  if (context === null) {
+    throw new Error(
+      "useA11yFeedbackContext must be used within an A11yFeedbackProvider"
+    );
+  }
+  return context;
+}
+
+// src/useA11yFeedback.ts
+import { useCallback, useMemo as useMemo2 } from "react";
+import {
+  notify as notify2,
+  dismissVisualFeedback,
+  dismissAllVisualFeedback as dismissAllVisualFeedback2
+} from "@theaccessibleteam/a11y-feedback";
+function useA11yFeedback() {
+  const success = useCallback(
+    (message, options) => notify2.success(message, options),
+    []
+  );
+  const error = useCallback(
+    (message, options) => notify2.error(message, options),
+    []
+  );
+  const warning = useCallback(
+    (message, options) => notify2.warning(message, options),
+    []
+  );
+  const info = useCallback(
+    (message, options) => notify2.info(message, options),
+    []
+  );
+  const loading = useCallback(
+    (message, options) => notify2.loading(message, options),
+    []
+  );
+  const dismiss = useCallback((id) => {
+    dismissVisualFeedback(id);
+  }, []);
+  const dismissAll = useCallback(() => {
+    dismissAllVisualFeedback2();
+  }, []);
+  return useMemo2(
+    () => ({
+      success,
+      error,
+      warning,
+      info,
+      loading,
+      dismiss,
+      dismissAll
+    }),
+    [success, error, warning, info, loading, dismiss, dismissAll]
+  );
+}
+
+// src/useA11yAnnounce.ts
+import { useCallback as useCallback2, useMemo as useMemo3 } from "react";
+import { notify as notify3 } from "@theaccessibleteam/a11y-feedback";
+function useA11yAnnounce() {
+  const announcePolite = useCallback2(
+    async (message, options) => {
+      await notify3.info(message, options);
+    },
+    []
+  );
+  const announceAssertive = useCallback2(
+    async (message, options) => {
+      await notify3.warning(message, options);
+    },
+    []
+  );
+  const announce = useCallback2(
+    async (message, politeness, options) => {
+      if (politeness === "assertive") {
+        await notify3.warning(message, options);
+      } else {
+        await notify3.info(message, options);
+      }
+    },
+    []
+  );
+  return useMemo3(
+    () => ({
+      announcePolite,
+      announceAssertive,
+      announce
+    }),
+    [announcePolite, announceAssertive, announce]
+  );
+}
+
+// src/useFeedbackConfig.ts
+import { useCallback as useCallback3, useEffect as useEffect2, useState } from "react";
+import {
+  configureFeedback as configureFeedback2,
+  getConfig,
+  resetConfig as resetConfig2
+} from "@theaccessibleteam/a11y-feedback";
+function useFeedbackConfig() {
+  const [config, setConfig] = useState(() => getConfig());
+  const syncConfig = useCallback3(() => {
+    setConfig(getConfig());
+  }, []);
+  const updateConfig = useCallback3(
+    (updates) => {
+      configureFeedback2(updates);
+      syncConfig();
+    },
+    [syncConfig]
+  );
+  const reset = useCallback3(() => {
+    resetConfig2();
+    syncConfig();
+  }, [syncConfig]);
+  const enableVisual = useCallback3(() => {
+    updateConfig({ visual: true });
+  }, [updateConfig]);
+  const disableVisual = useCallback3(() => {
+    updateConfig({ visual: false });
+  }, [updateConfig]);
+  useEffect2(() => {
+    syncConfig();
+  }, [syncConfig]);
+  return {
+    config,
+    updateConfig,
+    resetConfig: reset,
+    enableVisual,
+    disableVisual
+  };
+}
+export {
+  A11yFeedbackProvider,
+  useA11yAnnounce,
+  useA11yFeedback,
+  useA11yFeedbackContext,
+  useFeedbackConfig
+};

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@theaccessibleteam/a11y-feedback-react",
+  "version": "1.0.0",
+  "description": "React bindings for a11y-feedback - accessible notifications and screen reader announcements",
+  "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"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx"
+  },
+  "keywords": [
+    "react",
+    "accessibility",
+    "a11y",
+    "aria-live",
+    "screen-reader",
+    "hooks",
+    "notifications",
+    "toast"
+  ],
+  "author": "The Accessible Team <theaccessibleteam@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WOLFIEEEE/a11y-feedback.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/WOLFIEEEE/a11y-feedback/issues"
+  },
+  "homepage": "https://github.com/WOLFIEEEE/a11y-feedback/tree/main/packages/react#readme",
+  "peerDependencies": {
+    "@theaccessibleteam/a11y-feedback": "workspace:^",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0"
+  }
+}
+