@a11y-core/react 0.1.0-alpha.0

package/README.md

@@ -0,0 +1,252 @@
+# @a11y-core/react
+
+Accessible React components that just work.
+
+## Installation
+
+```bash
+npm install @a11y-core/react
+```
+
+## Components
+
+### Dialog
+
+```tsx
+import { Dialog } from '@a11y-core/react';
+
+function ConfirmDialog({ open, onClose, onConfirm }) {
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <Dialog.Title>Confirm Delete</Dialog.Title>
+      <Dialog.Description>
+        Are you sure you want to delete this item?
+      </Dialog.Description>
+      <Dialog.Actions>
+        <button onClick={onClose}>Cancel</button>
+        <button onClick={onConfirm}>Delete</button>
+      </Dialog.Actions>
+    </Dialog>
+  );
+}
+```
+
+### Menu
+
+```tsx
+import { Menu } from '@a11y-core/react';
+
+function ActionMenu() {
+  return (
+    <Menu>
+      <Menu.Trigger>Actions</Menu.Trigger>
+      <Menu.Content>
+        <Menu.Item onSelect={() => console.log('Edit')}>Edit</Menu.Item>
+        <Menu.Item onSelect={() => console.log('Copy')}>Copy</Menu.Item>
+        <Menu.Separator />
+        <Menu.Item onSelect={() => console.log('Delete')}>Delete</Menu.Item>
+      </Menu.Content>
+    </Menu>
+  );
+}
+```
+
+### Tabs
+
+```tsx
+import { Tabs } from '@a11y-core/react';
+
+function SettingsTabs() {
+  return (
+    <Tabs defaultValue="general">
+      <Tabs.List>
+        <Tabs.Tab value="general">General</Tabs.Tab>
+        <Tabs.Tab value="security">Security</Tabs.Tab>
+        <Tabs.Tab value="notifications">Notifications</Tabs.Tab>
+      </Tabs.List>
+      <Tabs.Panel value="general">General settings...</Tabs.Panel>
+      <Tabs.Panel value="security">Security settings...</Tabs.Panel>
+      <Tabs.Panel value="notifications">Notification settings...</Tabs.Panel>
+    </Tabs>
+  );
+}
+```
+
+### Toast
+
+```tsx
+import {
+  ToastProvider,
+  ToastViewport,
+  useToastHelpers,
+} from '@a11y-core/react';
+
+function App() {
+  return (
+    <ToastProvider>
+      <Content />
+      <ToastViewport position="bottom-right" />
+    </ToastProvider>
+  );
+}
+
+function Content() {
+  const { success, error } = useToastHelpers();
+
+  return <button onClick={() => success('Settings saved!')}>Save</button>;
+}
+```
+
+### Combobox
+
+```tsx
+import { Combobox } from '@a11y-core/react';
+
+const countries = [
+  { value: 'us', label: 'United States' },
+  { value: 'uk', label: 'United Kingdom' },
+  { value: 'ca', label: 'Canada' },
+];
+
+function CountrySelect() {
+  const [value, setValue] = useState(null);
+
+  return (
+    <Combobox
+      options={countries}
+      value={value}
+      onValueChange={setValue}
+      aria-label="Select country"
+    >
+      <Combobox.Input placeholder="Choose a country..." clearable />
+      <Combobox.Listbox emptyMessage="No countries found" />
+    </Combobox>
+  );
+}
+```
+
+## Hooks
+
+### useFocusTrap
+
+```tsx
+import { useFocusTrap } from '@a11y-core/react';
+
+function Modal({ isOpen }) {
+  const trapRef = useFocusTrap({ active: isOpen });
+
+  return (
+    <div ref={trapRef} role="dialog">
+      <button>Close</button>
+    </div>
+  );
+}
+```
+
+### useAnnouncer
+
+```tsx
+import { useAnnouncer } from '@a11y-core/react';
+
+function SearchResults({ count }) {
+  const { announce } = useAnnouncer();
+
+  useEffect(() => {
+    announce(`Found ${count} results`);
+  }, [count, announce]);
+}
+```
+
+### useKeyboard
+
+```tsx
+import { useKeyboard } from '@a11y-core/react';
+
+function CustomList() {
+  const keyboardProps = useKeyboard({
+    ArrowDown: () => focusNext(),
+    ArrowUp: () => focusPrevious(),
+    Enter: () => selectItem(),
+  });
+
+  return <ul {...keyboardProps}>...</ul>;
+}
+```
+
+### useFocusVisible
+
+```tsx
+import { useFocusVisible } from '@a11y-core/react';
+
+function Button({ children }) {
+  const { isFocusVisible, focusProps } = useFocusVisible();
+
+  return (
+    <button {...focusProps} className={isFocusVisible ? 'focus-ring' : ''}>
+      {children}
+    </button>
+  );
+}
+```
+
+### useRovingTabindex
+
+```tsx
+import { useRovingTabindex } from '@a11y-core/react';
+
+function Toolbar() {
+  const { getItemProps } = useRovingTabindex({
+    itemCount: 3,
+    orientation: 'horizontal',
+  });
+
+  return (
+    <div role="toolbar">
+      <button {...getItemProps(0)}>Cut</button>
+      <button {...getItemProps(1)}>Copy</button>
+      <button {...getItemProps(2)}>Paste</button>
+    </div>
+  );
+}
+```
+
+## Styling
+
+All components are unstyled. Use `data-*` attributes for state-based styling:
+
+```css
+/* Dialog */
+[data-a11y-core-dialog-overlay] {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+[data-a11y-core-dialog] {
+  background: white;
+  padding: 1.5rem;
+  border-radius: 8px;
+}
+
+/* Menu */
+[data-a11y-core-menu-content] {
+  background: white;
+  border: 1px solid #e0e0e0;
+}
+
+[data-a11y-core-menu-item][data-highlighted='true'] {
+  background: #f0f0f0;
+}
+
+/* Tabs */
+[data-a11y-core-tab][data-selected='true'] {
+  border-bottom: 2px solid blue;
+}
+
+/* Combobox */
+[data-a11y-core-combobox-option][data-highlighted='true'] {
+  background: #f0f0f0;
+}
+```
+
+## License
+
+MIT

package/dist/chunk-3WBTHTVK.js

@@ -0,0 +1,41 @@
+import { useId as useId$1, useMemo } from 'react';
+
+// src/hooks/use-id.ts
+function useId(prefix) {
+  const reactId = useId$1();
+  return useMemo(() => {
+    const cleanId = reactId.replace(/:/g, "");
+    return prefix ? `a11y-core-${prefix}-${cleanId}` : `a11y-core-${cleanId}`;
+  }, [reactId, prefix]);
+}
+function useIds(parts, prefix) {
+  const baseId = useId(prefix);
+  return useMemo(() => {
+    const ids = {};
+    for (const part of parts) {
+      ids[part] = `${baseId}-${part}`;
+    }
+    return ids;
+  }, [baseId, parts]);
+}
+function useIdScope(componentName) {
+  const scopeId = useId(componentName);
+  return useMemo(
+    () => ({
+      id: scopeId,
+      generate: (suffix) => `${scopeId}-${suffix}`,
+      generateMultiple: (parts) => {
+        const ids = {};
+        for (const part of parts) {
+          ids[part] = `${scopeId}-${part}`;
+        }
+        return ids;
+      }
+    }),
+    [scopeId]
+  );
+}
+
+export { useId, useIdScope, useIds };
+//# sourceMappingURL=chunk-3WBTHTVK.js.map
+//# sourceMappingURL=chunk-3WBTHTVK.js.map

package/dist/chunk-3WBTHTVK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-id.ts"],"names":["useReactId"],"mappings":";;;AAOO,SAAS,MAAM,MAAA,EAAyB;AAE7C,EAAA,MAAM,UAAUA,OAAA,EAAW;AAE3B,EAAA,OAAO,QAAQ,MAAM;AAEnB,IAAA,MAAM,OAAA,GAAU,OAAA,CAAQ,OAAA,CAAQ,IAAA,EAAM,EAAE,CAAA;AACxC,IAAA,OAAO,SAAS,CAAA,UAAA,EAAa,MAAM,IAAI,OAAO,CAAA,CAAA,GAAK,aAAa,OAAO,CAAA,CAAA;AAAA,EACzE,CAAA,EAAG,CAAC,OAAA,EAAS,MAAM,CAAC,CAAA;AACtB;AAKO,SAAS,MAAA,CACd,OACA,MAAA,EAC2B;AAC3B,EAAA,MAAM,MAAA,GAAS,MAAM,MAAM,CAAA;AAE3B,EAAA,OAAO,QAAQ,MAAM;AACnB,IAAA,MAAM,MAAM,EAAC;AACb,IAAA,KAAA,MAAW,QAAQ,KAAA,EAAO;AACxB,MAAA,GAAA,CAAI,IAAI,CAAA,GAAI,CAAA,EAAG,MAAM,IAAI,IAAI,CAAA,CAAA;AAAA,IAC/B;AACA,IAAA,OAAO,GAAA;AAAA,EACT,CAAA,EAAG,CAAC,MAAA,EAAQ,KAAK,CAAC,CAAA;AACpB;AAKO,SAAS,WAAW,aAAA,EAAuB;AAChD,EAAA,MAAM,OAAA,GAAU,MAAM,aAAa,CAAA;AAEnC,EAAA,OAAO,OAAA;AAAA,IACL,OAAO;AAAA,MACL,EAAA,EAAI,OAAA;AAAA,MACJ,UAAU,CAAC,MAAA,KAAmB,CAAA,EAAG,OAAO,IAAI,MAAM,CAAA,CAAA;AAAA,MAClD,gBAAA,EAAkB,CAA8B,KAAA,KAAa;AAC3D,QAAA,MAAM,MAAM,EAAC;AACb,QAAA,KAAA,MAAW,QAAQ,KAAA,EAAO;AACxB,UAAA,GAAA,CAAI,IAAI,CAAA,GAAI,CAAA,EAAG,OAAO,IAAI,IAAI,CAAA,CAAA;AAAA,QAChC;AACA,QAAA,OAAO,GAAA;AAAA,MACT;AAAA,KACF,CAAA;AAAA,IACA,CAAC,OAAO;AAAA,GACV;AACF","file":"chunk-3WBTHTVK.js","sourcesContent":["import { useId as useReactId, useMemo } from 'react';\n\n/**\n * Generate a unique ID for accessibility purposes\n *\n * Uses React's useId when available, with a fallback for SSR\n */\nexport function useId(prefix?: string): string {\n  // Use React 18's useId as the base\n  const reactId = useReactId();\n\n  return useMemo(() => {\n    // Clean up React's ID format (removes colons)\n    const cleanId = reactId.replace(/:/g, '');\n    return prefix ? `a11y-core-${prefix}-${cleanId}` : `a11y-core-${cleanId}`;\n  }, [reactId, prefix]);\n}\n\n/**\n * Generate multiple related IDs for a component\n */\nexport function useIds<T extends readonly string[]>(\n  parts: T,\n  prefix?: string\n): Record<T[number], string> {\n  const baseId = useId(prefix);\n\n  return useMemo(() => {\n    const ids = {} as Record<string, string>;\n    for (const part of parts) {\n      ids[part] = `${baseId}-${part}`;\n    }\n    return ids as Record<T[number], string>;\n  }, [baseId, parts]);\n}\n\n/**\n * Create a scoped ID generator for complex components\n */\nexport function useIdScope(componentName: string) {\n  const scopeId = useId(componentName);\n\n  return useMemo(\n    () => ({\n      id: scopeId,\n      generate: (suffix: string) => `${scopeId}-${suffix}`,\n      generateMultiple: <T extends readonly string[]>(parts: T) => {\n        const ids = {} as Record<string, string>;\n        for (const part of parts) {\n          ids[part] = `${scopeId}-${part}`;\n        }\n        return ids as Record<T[number], string>;\n      },\n    }),\n    [scopeId]\n  );\n}\n"]}

package/dist/chunk-47MFBHV6.js

@@ -0,0 +1,85 @@
+import { useEffect, useCallback, useRef } from 'react';
+import { initAnnouncer, announce, announcePolite, announceAssertive, queueAnnouncement, clearAnnouncements } from '@a11y-core/core';
+
+// src/hooks/use-announcer.ts
+function useAnnouncer() {
+  useEffect(() => {
+    const cleanup = initAnnouncer();
+    return cleanup;
+  }, []);
+  const announceMessage = useCallback(
+    (message, options) => {
+      announce(message, options);
+    },
+    []
+  );
+  const polite = useCallback(
+    (message, options) => {
+      announcePolite(message, options);
+    },
+    []
+  );
+  const assertive = useCallback(
+    (message, options) => {
+      announceAssertive(message, options);
+    },
+    []
+  );
+  const queue = useCallback(
+    (message, options) => {
+      queueAnnouncement(message, options);
+    },
+    []
+  );
+  const clear = useCallback(() => {
+    clearAnnouncements();
+  }, []);
+  return {
+    announce: announceMessage,
+    polite,
+    assertive,
+    queue,
+    clear
+  };
+}
+function useAnnounceOnChange(value, getMessage, options) {
+  const { skipInitial = true, ...announceOptions } = options ?? {};
+  const isFirstRender = useRef(true);
+  const previousValue = useRef(value);
+  useEffect(() => {
+    if (isFirstRender.current && skipInitial) {
+      isFirstRender.current = false;
+      previousValue.current = value;
+      return;
+    }
+    if (previousValue.current !== value) {
+      announce(getMessage(value), announceOptions);
+      previousValue.current = value;
+    }
+  }, [value, getMessage, announceOptions]);
+}
+function useAnnounceLoading(isLoading, options = {}) {
+  const {
+    loadingMessage = "Loading...",
+    loadedMessage = "Content loaded",
+    errorMessage = "An error occurred",
+    error
+  } = options;
+  const wasLoading = useRef(false);
+  useEffect(() => {
+    if (isLoading && !wasLoading.current) {
+      announcePolite(loadingMessage);
+    } else if (!isLoading && wasLoading.current) {
+      if (error) {
+        announceAssertive(errorMessage);
+      } else {
+        announcePolite(loadedMessage);
+      }
+    }
+    wasLoading.current = isLoading;
+  }, [isLoading, error, loadingMessage, loadedMessage, errorMessage]);
+}
+
+export { useAnnounceLoading, useAnnounceOnChange, useAnnouncer };
+//# sourceMappingURL=chunk-47MFBHV6.js.map
+//# sourceMappingURL=chunk-47MFBHV6.js.map

package/dist/chunk-47MFBHV6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-announcer.ts"],"names":[],"mappings":";;;;AA2BO,SAAS,YAAA,GAAe;AAE7B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,aAAA,EAAc;AAC9B,IAAA,OAAO,OAAA;AAAA,EACT,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,eAAA,GAAkB,WAAA;AAAA,IACtB,CAAC,SAAiB,OAAA,KAA+B;AAC/C,MAAA,QAAA,CAAS,SAAS,OAAO,CAAA;AAAA,IAC3B,CAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,MAAA,GAAS,WAAA;AAAA,IACb,CAAC,SAAiB,OAAA,KAAmD;AACnE,MAAA,cAAA,CAAe,SAAS,OAAO,CAAA;AAAA,IACjC,CAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,SAAA,GAAY,WAAA;AAAA,IAChB,CAAC,SAAiB,OAAA,KAAmD;AACnE,MAAA,iBAAA,CAAkB,SAAS,OAAO,CAAA;AAAA,IACpC,CAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,KAAA,GAAQ,WAAA;AAAA,IACZ,CAAC,SAAiB,OAAA,KAAuD;AACvE,MAAA,iBAAA,CAAkB,SAAS,OAAO,CAAA;AAAA,IACpC,CAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,KAAA,GAAQ,YAAY,MAAM;AAC9B,IAAA,kBAAA,EAAmB;AAAA,EACrB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO;AAAA,IACL,QAAA,EAAU,eAAA;AAAA,IACV,MAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA;AAAA,GACF;AACF;AAaO,SAAS,mBAAA,CACd,KAAA,EACA,UAAA,EACA,OAAA,EACM;AACN,EAAA,MAAM,EAAE,WAAA,GAAc,IAAA,EAAM,GAAG,eAAA,EAAgB,GAAI,WAAW,EAAC;AAC/D,EAAA,MAAM,aAAA,GAAgB,OAAO,IAAI,CAAA;AACjC,EAAA,MAAM,aAAA,GAAgB,OAAO,KAAK,CAAA;AAElC,EAAA,SAAA,CAAU,MAAM;AAEd,IAAA,IAAI,aAAA,CAAc,WAAW,WAAA,EAAa;AACxC,MAAA,aAAA,CAAc,OAAA,GAAU,KAAA;AACxB,MAAA,aAAA,CAAc,OAAA,GAAU,KAAA;AACxB,MAAA;AAAA,IACF;AAGA,IAAA,IAAI,aAAA,CAAc,YAAY,KAAA,EAAO;AACnC,MAAA,QAAA,CAAS,UAAA,CAAW,KAAK,CAAA,EAAG,eAAe,CAAA;AAC3C,MAAA,aAAA,CAAc,OAAA,GAAU,KAAA;AAAA,IAC1B;AAAA,EACF,CAAA,EAAG,CAAC,KAAA,EAAO,UAAA,EAAY,eAAe,CAAC,CAAA;AACzC;AAiBO,SAAS,kBAAA,CACd,SAAA,EACA,OAAA,GAKI,EAAC,EACC;AACN,EAAA,MAAM;AAAA,IACJ,cAAA,GAAiB,YAAA;AAAA,IACjB,aAAA,GAAgB,gBAAA;AAAA,IAChB,YAAA,GAAe,mBAAA;AAAA,IACf;AAAA,GACF,GAAI,OAAA;AAEJ,EAAA,MAAM,UAAA,GAAa,OAAO,KAAK,CAAA;AAE/B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAA,IAAa,CAAC,UAAA,CAAW,OAAA,EAAS;AACpC,MAAA,cAAA,CAAe,cAAc,CAAA;AAAA,IAC/B,CAAA,MAAA,IAAW,CAAC,SAAA,IAAa,UAAA,CAAW,OAAA,EAAS;AAC3C,MAAA,IAAI,KAAA,EAAO;AACT,QAAA,iBAAA,CAAkB,YAAY,CAAA;AAAA,MAChC,CAAA,MAAO;AACL,QAAA,cAAA,CAAe,aAAa,CAAA;AAAA,MAC9B;AAAA,IACF;AACA,IAAA,UAAA,CAAW,OAAA,GAAU,SAAA;AAAA,EACvB,GAAG,CAAC,SAAA,EAAW,OAAO,cAAA,EAAgB,aAAA,EAAe,YAAY,CAAC,CAAA;AACpE","file":"chunk-47MFBHV6.js","sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport {\n  announce,\n  announcePolite,\n  announceAssertive,\n  queueAnnouncement,\n  clearAnnouncements,\n  initAnnouncer,\n  type AnnouncerOptions,\n} from '@a11y-core/core';\n\n/**\n * Hook for screen reader announcements\n *\n * @example\n * ```tsx\n * function SearchResults({ results }) {\n *   const { announce } = useAnnouncer();\n *\n *   useEffect(() => {\n *     announce(`Found ${results.length} results`);\n *   }, [results.length, announce]);\n *\n *   return <ul>...</ul>;\n * }\n * ```\n */\nexport function useAnnouncer() {\n  // Ensure announcer is initialized\n  useEffect(() => {\n    const cleanup = initAnnouncer();\n    return cleanup;\n  }, []);\n\n  const announceMessage = useCallback(\n    (message: string, options?: AnnouncerOptions) => {\n      announce(message, options);\n    },\n    []\n  );\n\n  const polite = useCallback(\n    (message: string, options?: Omit<AnnouncerOptions, 'politeness'>) => {\n      announcePolite(message, options);\n    },\n    []\n  );\n\n  const assertive = useCallback(\n    (message: string, options?: Omit<AnnouncerOptions, 'politeness'>) => {\n      announceAssertive(message, options);\n    },\n    []\n  );\n\n  const queue = useCallback(\n    (message: string, options?: AnnouncerOptions & { debounce?: number }) => {\n      queueAnnouncement(message, options);\n    },\n    []\n  );\n\n  const clear = useCallback(() => {\n    clearAnnouncements();\n  }, []);\n\n  return {\n    announce: announceMessage,\n    polite,\n    assertive,\n    queue,\n    clear,\n  };\n}\n\n/**\n * Announce a message when a value changes\n *\n * @example\n * ```tsx\n * function Counter({ count }) {\n *   useAnnounceOnChange(count, (value) => `Count is now ${value}`);\n *   return <span>{count}</span>;\n * }\n * ```\n */\nexport function useAnnounceOnChange<T>(\n  value: T,\n  getMessage: (value: T) => string,\n  options?: AnnouncerOptions & { skipInitial?: boolean }\n): void {\n  const { skipInitial = true, ...announceOptions } = options ?? {};\n  const isFirstRender = useRef(true);\n  const previousValue = useRef(value);\n\n  useEffect(() => {\n    // Skip initial render if specified\n    if (isFirstRender.current && skipInitial) {\n      isFirstRender.current = false;\n      previousValue.current = value;\n      return;\n    }\n\n    // Only announce if value changed\n    if (previousValue.current !== value) {\n      announce(getMessage(value), announceOptions);\n      previousValue.current = value;\n    }\n  }, [value, getMessage, announceOptions]);\n}\n\n/**\n * Announce loading states\n *\n * @example\n * ```tsx\n * function DataList({ isLoading }) {\n *   useAnnounceLoading(isLoading, {\n *     loadingMessage: 'Loading data...',\n *     loadedMessage: 'Data loaded',\n *   });\n *\n *   return <div>...</div>;\n * }\n * ```\n */\nexport function useAnnounceLoading(\n  isLoading: boolean,\n  options: {\n    loadingMessage?: string;\n    loadedMessage?: string;\n    errorMessage?: string;\n    error?: Error | null;\n  } = {}\n): void {\n  const {\n    loadingMessage = 'Loading...',\n    loadedMessage = 'Content loaded',\n    errorMessage = 'An error occurred',\n    error,\n  } = options;\n\n  const wasLoading = useRef(false);\n\n  useEffect(() => {\n    if (isLoading && !wasLoading.current) {\n      announcePolite(loadingMessage);\n    } else if (!isLoading && wasLoading.current) {\n      if (error) {\n        announceAssertive(errorMessage);\n      } else {\n        announcePolite(loadedMessage);\n      }\n    }\n    wasLoading.current = isLoading;\n  }, [isLoading, error, loadingMessage, loadedMessage, errorMessage]);\n}\n"]}

package/dist/chunk-7A3IDIUB.cjs

@@ -0,0 +1,89 @@
+'use strict';
+
+var react = require('react');
+var core = require('@a11y-core/core');
+
+// src/hooks/use-announcer.ts
+function useAnnouncer() {
+  react.useEffect(() => {
+    const cleanup = core.initAnnouncer();
+    return cleanup;
+  }, []);
+  const announceMessage = react.useCallback(
+    (message, options) => {
+      core.announce(message, options);
+    },
+    []
+  );
+  const polite = react.useCallback(
+    (message, options) => {
+      core.announcePolite(message, options);
+    },
+    []
+  );
+  const assertive = react.useCallback(
+    (message, options) => {
+      core.announceAssertive(message, options);
+    },
+    []
+  );
+  const queue = react.useCallback(
+    (message, options) => {
+      core.queueAnnouncement(message, options);
+    },
+    []
+  );
+  const clear = react.useCallback(() => {
+    core.clearAnnouncements();
+  }, []);
+  return {
+    announce: announceMessage,
+    polite,
+    assertive,
+    queue,
+    clear
+  };
+}
+function useAnnounceOnChange(value, getMessage, options) {
+  const { skipInitial = true, ...announceOptions } = options ?? {};
+  const isFirstRender = react.useRef(true);
+  const previousValue = react.useRef(value);
+  react.useEffect(() => {
+    if (isFirstRender.current && skipInitial) {
+      isFirstRender.current = false;
+      previousValue.current = value;
+      return;
+    }
+    if (previousValue.current !== value) {
+      core.announce(getMessage(value), announceOptions);
+      previousValue.current = value;
+    }
+  }, [value, getMessage, announceOptions]);
+}
+function useAnnounceLoading(isLoading, options = {}) {
+  const {
+    loadingMessage = "Loading...",
+    loadedMessage = "Content loaded",
+    errorMessage = "An error occurred",
+    error
+  } = options;
+  const wasLoading = react.useRef(false);
+  react.useEffect(() => {
+    if (isLoading && !wasLoading.current) {
+      core.announcePolite(loadingMessage);
+    } else if (!isLoading && wasLoading.current) {
+      if (error) {
+        core.announceAssertive(errorMessage);
+      } else {
+        core.announcePolite(loadedMessage);
+      }
+    }
+    wasLoading.current = isLoading;
+  }, [isLoading, error, loadingMessage, loadedMessage, errorMessage]);
+}
+
+exports.useAnnounceLoading = useAnnounceLoading;
+exports.useAnnounceOnChange = useAnnounceOnChange;
+exports.useAnnouncer = useAnnouncer;
+//# sourceMappingURL=chunk-7A3IDIUB.cjs.map
+//# sourceMappingURL=chunk-7A3IDIUB.cjs.map

package/dist/chunk-7A3IDIUB.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-announcer.ts"],"names":["useEffect","initAnnouncer","useCallback","announce","announcePolite","announceAssertive","queueAnnouncement","clearAnnouncements","useRef"],"mappings":";;;;;;AA2BO,SAAS,YAAA,GAAe;AAE7B,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAUC,kBAAA,EAAc;AAC9B,IAAA,OAAO,OAAA;AAAA,EACT,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,eAAA,GAAkBC,iBAAA;AAAA,IACtB,CAAC,SAAiB,OAAA,KAA+B;AAC/C,MAAAC,aAAA,CAAS,SAAS,OAAO,CAAA;AAAA,IAC3B,CAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,MAAA,GAASD,iBAAA;AAAA,IACb,CAAC,SAAiB,OAAA,KAAmD;AACnE,MAAAE,mBAAA,CAAe,SAAS,OAAO,CAAA;AAAA,IACjC,CAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,SAAA,GAAYF,iBAAA;AAAA,IAChB,CAAC,SAAiB,OAAA,KAAmD;AACnE,MAAAG,sBAAA,CAAkB,SAAS,OAAO,CAAA;AAAA,IACpC,CAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,KAAA,GAAQH,iBAAA;AAAA,IACZ,CAAC,SAAiB,OAAA,KAAuD;AACvE,MAAAI,sBAAA,CAAkB,SAAS,OAAO,CAAA;AAAA,IACpC,CAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,KAAA,GAAQJ,kBAAY,MAAM;AAC9B,IAAAK,uBAAA,EAAmB;AAAA,EACrB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO;AAAA,IACL,QAAA,EAAU,eAAA;AAAA,IACV,MAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA;AAAA,GACF;AACF;AAaO,SAAS,mBAAA,CACd,KAAA,EACA,UAAA,EACA,OAAA,EACM;AACN,EAAA,MAAM,EAAE,WAAA,GAAc,IAAA,EAAM,GAAG,eAAA,EAAgB,GAAI,WAAW,EAAC;AAC/D,EAAA,MAAM,aAAA,GAAgBC,aAAO,IAAI,CAAA;AACjC,EAAA,MAAM,aAAA,GAAgBA,aAAO,KAAK,CAAA;AAElC,EAAAR,eAAA,CAAU,MAAM;AAEd,IAAA,IAAI,aAAA,CAAc,WAAW,WAAA,EAAa;AACxC,MAAA,aAAA,CAAc,OAAA,GAAU,KAAA;AACxB,MAAA,aAAA,CAAc,OAAA,GAAU,KAAA;AACxB,MAAA;AAAA,IACF;AAGA,IAAA,IAAI,aAAA,CAAc,YAAY,KAAA,EAAO;AACnC,MAAAG,aAAA,CAAS,UAAA,CAAW,KAAK,CAAA,EAAG,eAAe,CAAA;AAC3C,MAAA,aAAA,CAAc,OAAA,GAAU,KAAA;AAAA,IAC1B;AAAA,EACF,CAAA,EAAG,CAAC,KAAA,EAAO,UAAA,EAAY,eAAe,CAAC,CAAA;AACzC;AAiBO,SAAS,kBAAA,CACd,SAAA,EACA,OAAA,GAKI,EAAC,EACC;AACN,EAAA,MAAM;AAAA,IACJ,cAAA,GAAiB,YAAA;AAAA,IACjB,aAAA,GAAgB,gBAAA;AAAA,IAChB,YAAA,GAAe,mBAAA;AAAA,IACf;AAAA,GACF,GAAI,OAAA;AAEJ,EAAA,MAAM,UAAA,GAAaK,aAAO,KAAK,CAAA;AAE/B,EAAAR,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAA,IAAa,CAAC,UAAA,CAAW,OAAA,EAAS;AACpC,MAAAI,mBAAA,CAAe,cAAc,CAAA;AAAA,IAC/B,CAAA,MAAA,IAAW,CAAC,SAAA,IAAa,UAAA,CAAW,OAAA,EAAS;AAC3C,MAAA,IAAI,KAAA,EAAO;AACT,QAAAC,sBAAA,CAAkB,YAAY,CAAA;AAAA,MAChC,CAAA,MAAO;AACL,QAAAD,mBAAA,CAAe,aAAa,CAAA;AAAA,MAC9B;AAAA,IACF;AACA,IAAA,UAAA,CAAW,OAAA,GAAU,SAAA;AAAA,EACvB,GAAG,CAAC,SAAA,EAAW,OAAO,cAAA,EAAgB,aAAA,EAAe,YAAY,CAAC,CAAA;AACpE","file":"chunk-7A3IDIUB.cjs","sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport {\n  announce,\n  announcePolite,\n  announceAssertive,\n  queueAnnouncement,\n  clearAnnouncements,\n  initAnnouncer,\n  type AnnouncerOptions,\n} from '@a11y-core/core';\n\n/**\n * Hook for screen reader announcements\n *\n * @example\n * ```tsx\n * function SearchResults({ results }) {\n *   const { announce } = useAnnouncer();\n *\n *   useEffect(() => {\n *     announce(`Found ${results.length} results`);\n *   }, [results.length, announce]);\n *\n *   return <ul>...</ul>;\n * }\n * ```\n */\nexport function useAnnouncer() {\n  // Ensure announcer is initialized\n  useEffect(() => {\n    const cleanup = initAnnouncer();\n    return cleanup;\n  }, []);\n\n  const announceMessage = useCallback(\n    (message: string, options?: AnnouncerOptions) => {\n      announce(message, options);\n    },\n    []\n  );\n\n  const polite = useCallback(\n    (message: string, options?: Omit<AnnouncerOptions, 'politeness'>) => {\n      announcePolite(message, options);\n    },\n    []\n  );\n\n  const assertive = useCallback(\n    (message: string, options?: Omit<AnnouncerOptions, 'politeness'>) => {\n      announceAssertive(message, options);\n    },\n    []\n  );\n\n  const queue = useCallback(\n    (message: string, options?: AnnouncerOptions & { debounce?: number }) => {\n      queueAnnouncement(message, options);\n    },\n    []\n  );\n\n  const clear = useCallback(() => {\n    clearAnnouncements();\n  }, []);\n\n  return {\n    announce: announceMessage,\n    polite,\n    assertive,\n    queue,\n    clear,\n  };\n}\n\n/**\n * Announce a message when a value changes\n *\n * @example\n * ```tsx\n * function Counter({ count }) {\n *   useAnnounceOnChange(count, (value) => `Count is now ${value}`);\n *   return <span>{count}</span>;\n * }\n * ```\n */\nexport function useAnnounceOnChange<T>(\n  value: T,\n  getMessage: (value: T) => string,\n  options?: AnnouncerOptions & { skipInitial?: boolean }\n): void {\n  const { skipInitial = true, ...announceOptions } = options ?? {};\n  const isFirstRender = useRef(true);\n  const previousValue = useRef(value);\n\n  useEffect(() => {\n    // Skip initial render if specified\n    if (isFirstRender.current && skipInitial) {\n      isFirstRender.current = false;\n      previousValue.current = value;\n      return;\n    }\n\n    // Only announce if value changed\n    if (previousValue.current !== value) {\n      announce(getMessage(value), announceOptions);\n      previousValue.current = value;\n    }\n  }, [value, getMessage, announceOptions]);\n}\n\n/**\n * Announce loading states\n *\n * @example\n * ```tsx\n * function DataList({ isLoading }) {\n *   useAnnounceLoading(isLoading, {\n *     loadingMessage: 'Loading data...',\n *     loadedMessage: 'Data loaded',\n *   });\n *\n *   return <div>...</div>;\n * }\n * ```\n */\nexport function useAnnounceLoading(\n  isLoading: boolean,\n  options: {\n    loadingMessage?: string;\n    loadedMessage?: string;\n    errorMessage?: string;\n    error?: Error | null;\n  } = {}\n): void {\n  const {\n    loadingMessage = 'Loading...',\n    loadedMessage = 'Content loaded',\n    errorMessage = 'An error occurred',\n    error,\n  } = options;\n\n  const wasLoading = useRef(false);\n\n  useEffect(() => {\n    if (isLoading && !wasLoading.current) {\n      announcePolite(loadingMessage);\n    } else if (!isLoading && wasLoading.current) {\n      if (error) {\n        announceAssertive(errorMessage);\n      } else {\n        announcePolite(loadedMessage);\n      }\n    }\n    wasLoading.current = isLoading;\n  }, [isLoading, error, loadingMessage, loadedMessage, errorMessage]);\n}\n"]}