@compa11y/react 0.1.0

package/dist/chunk-OIVTOU4Z.cjs

@@ -0,0 +1,386 @@
+'use strict';
+
+var chunkRBDQCIS7_cjs = require('./chunk-RBDQCIS7.cjs');
+var chunkGDLOJH6K_cjs = require('./chunk-GDLOJH6K.cjs');
+var chunk52J4Z3QD_cjs = require('./chunk-52J4Z3QD.cjs');
+var react = require('react');
+var core = require('@compa11y/core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var warnings = core.createComponentWarnings("Combobox");
+var ComboboxContext = react.createContext(null);
+function useComboboxContext() {
+  const context = react.useContext(ComboboxContext);
+  if (!context) {
+    throw new Error(
+      "Combobox compound components must be used within a Combobox component"
+    );
+  }
+  return context;
+}
+function Combobox({
+  options,
+  value: controlledValue,
+  onValueChange,
+  onInputChange,
+  defaultInputValue = "",
+  disabled = false,
+  filterFn,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  children
+}) {
+  const [inputValue, setInputValueState] = react.useState(defaultInputValue);
+  const [selectedValue, setSelectedValueState] = react.useState(
+    controlledValue ?? null
+  );
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [highlightedIndex, setHighlightedIndex] = react.useState(-1);
+  const inputId = chunk52J4Z3QD_cjs.useId("combobox-input");
+  const listboxId = chunk52J4Z3QD_cjs.useId("combobox-listbox");
+  const baseOptionId = chunk52J4Z3QD_cjs.useId("combobox-option");
+  react.useEffect(() => {
+    if (controlledValue !== void 0) {
+      setSelectedValueState(controlledValue);
+      const option = options.find((o) => o.value === controlledValue);
+      if (option) {
+        setInputValueState(option.label);
+      }
+    }
+  }, [controlledValue, options]);
+  const setInputValue = react.useCallback(
+    (value) => {
+      setInputValueState(value);
+      onInputChange?.(value);
+    },
+    [onInputChange]
+  );
+  const setSelectedValue = react.useCallback(
+    (value) => {
+      if (controlledValue === void 0) {
+        setSelectedValueState(value);
+      }
+      onValueChange?.(value);
+    },
+    [controlledValue, onValueChange]
+  );
+  const filteredOptions = react.useMemo(() => {
+    if (!inputValue) return options;
+    const defaultFilter = (opt, input) => opt.label.toLowerCase().includes(input.toLowerCase());
+    const filter = filterFn ?? defaultFilter;
+    return options.filter((opt) => filter(opt, inputValue));
+  }, [options, inputValue, filterFn]);
+  const getOptionId = react.useCallback(
+    (index) => `${baseOptionId}-${index}`,
+    [baseOptionId]
+  );
+  const onSelect = react.useCallback(
+    (option) => {
+      setSelectedValue(option.value);
+      setInputValue(option.label);
+      setIsOpen(false);
+      setHighlightedIndex(-1);
+    },
+    [setSelectedValue, setInputValue]
+  );
+  react.useEffect(() => {
+    if (!ariaLabel && !ariaLabelledBy) {
+      warnings.warning(
+        "Combobox has no accessible label.",
+        "Add aria-label or aria-labelledby prop."
+      );
+    }
+  }, [ariaLabel, ariaLabelledBy]);
+  const contextValue = {
+    inputValue,
+    setInputValue,
+    selectedValue,
+    setSelectedValue,
+    isOpen,
+    setIsOpen,
+    highlightedIndex,
+    setHighlightedIndex,
+    options,
+    filteredOptions,
+    inputId,
+    listboxId,
+    getOptionId,
+    onSelect
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ComboboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-compa11y-combobox": true, "data-disabled": disabled, children }) });
+}
+var ComboboxInput = react.forwardRef(
+  function ComboboxInput2({ clearable = false, onKeyDown, onFocus, onBlur, ...props }, ref) {
+    const {
+      inputValue,
+      setInputValue,
+      setSelectedValue,
+      isOpen,
+      setIsOpen,
+      highlightedIndex,
+      setHighlightedIndex,
+      filteredOptions,
+      inputId,
+      listboxId,
+      getOptionId,
+      onSelect
+    } = useComboboxContext();
+    const { announce } = chunkRBDQCIS7_cjs.useAnnouncer();
+    const keyboardProps = chunkGDLOJH6K_cjs.useKeyboard(
+      {
+        ArrowDown: () => {
+          if (!isOpen) {
+            setIsOpen(true);
+            setHighlightedIndex(0);
+          } else {
+            const nextIndex = (highlightedIndex + 1) % filteredOptions.length;
+            setHighlightedIndex(nextIndex);
+          }
+        },
+        ArrowUp: () => {
+          if (!isOpen) {
+            setIsOpen(true);
+            setHighlightedIndex(filteredOptions.length - 1);
+          } else {
+            const prevIndex = (highlightedIndex - 1 + filteredOptions.length) % filteredOptions.length;
+            setHighlightedIndex(prevIndex);
+          }
+        },
+        Enter: () => {
+          if (isOpen && highlightedIndex >= 0) {
+            const option = filteredOptions[highlightedIndex];
+            if (option && !option.disabled) {
+              onSelect(option);
+              announce(`${option.label} selected`);
+            }
+          }
+        },
+        Escape: () => {
+          if (isOpen) {
+            setIsOpen(false);
+            setHighlightedIndex(-1);
+          }
+        },
+        Tab: () => {
+          if (isOpen) {
+            setIsOpen(false);
+            setHighlightedIndex(-1);
+          }
+          return false;
+        },
+        Home: () => {
+          if (isOpen) {
+            setHighlightedIndex(0);
+          }
+        },
+        End: () => {
+          if (isOpen) {
+            setHighlightedIndex(filteredOptions.length - 1);
+          }
+        }
+      },
+      { preventDefault: true, stopPropagation: false }
+    );
+    const handleKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (!event.defaultPrevented) {
+        keyboardProps.onKeyDown(event);
+      }
+    };
+    const handleChange = (event) => {
+      const value = event.target.value;
+      setInputValue(value);
+      setIsOpen(true);
+      setHighlightedIndex(0);
+      if (value === "") {
+        setSelectedValue(null);
+      }
+    };
+    const handleFocus = (event) => {
+      onFocus?.(event);
+      setIsOpen(true);
+    };
+    const handleBlur = (event) => {
+      onBlur?.(event);
+      setTimeout(() => {
+        setIsOpen(false);
+      }, 150);
+    };
+    const handleClear = () => {
+      setInputValue("");
+      setSelectedValue(null);
+      setIsOpen(false);
+    };
+    const activeDescendant = isOpen && highlightedIndex >= 0 ? getOptionId(highlightedIndex) : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-compa11y-combobox-input-wrapper": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref,
+          id: inputId,
+          type: "text",
+          role: "combobox",
+          value: inputValue,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          "aria-expanded": isOpen,
+          "aria-controls": listboxId,
+          "aria-activedescendant": activeDescendant,
+          "aria-autocomplete": "list",
+          "aria-haspopup": "listbox",
+          autoComplete: "off",
+          "data-compa11y-combobox-input": true,
+          ...props
+        }
+      ),
+      clearable && inputValue && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleClear,
+          "aria-label": "Clear selection",
+          tabIndex: -1,
+          "data-compa11y-combobox-clear": true,
+          children: "\xD7"
+        }
+      )
+    ] });
+  }
+);
+var ComboboxListbox = react.forwardRef(function ComboboxListbox2({ emptyMessage = "No results found", children, style, ...props }, forwardedRef) {
+  const { isOpen, filteredOptions, listboxId, inputId } = useComboboxContext();
+  const { announce } = chunkRBDQCIS7_cjs.useAnnouncer();
+  const internalRef = react.useRef(null);
+  const [position, setPosition] = react.useState("bottom");
+  react.useEffect(() => {
+    if (isOpen) {
+      const count = filteredOptions.length;
+      announce(
+        count === 0 ? "No results" : `${count} result${count === 1 ? "" : "s"} available`
+      );
+    }
+  }, [isOpen, filteredOptions.length, announce]);
+  react.useLayoutEffect(() => {
+    if (isOpen && internalRef.current) {
+      const listbox = internalRef.current;
+      const rect = listbox.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const spaceBelow = viewportHeight - rect.top;
+      const spaceAbove = rect.top;
+      const listboxHeight = Math.min(rect.height, 200);
+      if (spaceBelow < listboxHeight + 50 && spaceAbove > spaceBelow) {
+        setPosition("top");
+      } else {
+        setPosition("bottom");
+      }
+    }
+  }, [isOpen]);
+  const setRefs = react.useCallback(
+    (node) => {
+      internalRef.current = node;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else if (forwardedRef) {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef]
+  );
+  if (!isOpen) {
+    return null;
+  }
+  const positionStyle = position === "top" ? { bottom: "100%", top: "auto", marginBottom: "4px", marginTop: 0 } : {};
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "ul",
+    {
+      ref: setRefs,
+      id: listboxId,
+      role: "listbox",
+      "aria-labelledby": inputId,
+      style: { ...style, ...positionStyle },
+      "data-compa11y-combobox-listbox": true,
+      "data-position": position,
+      ...props,
+      children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { role: "presentation", "data-compa11y-combobox-empty": true, children: emptyMessage }) : children ?? filteredOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(ComboboxOption, { option, index }, option.value))
+    }
+  );
+});
+var ComboboxOption = react.forwardRef(
+  function ComboboxOption2({ option, index, onClick, onMouseEnter, ...props }, forwardedRef) {
+    const {
+      selectedValue,
+      highlightedIndex,
+      setHighlightedIndex,
+      getOptionId,
+      onSelect
+    } = useComboboxContext();
+    const internalRef = react.useRef(null);
+    const isSelected = selectedValue === option.value;
+    const isHighlighted = highlightedIndex === index;
+    const optionId = getOptionId(index);
+    react.useEffect(() => {
+      if (isHighlighted && internalRef.current) {
+        internalRef.current.scrollIntoView({
+          block: "nearest",
+          behavior: "smooth"
+        });
+      }
+    }, [isHighlighted]);
+    const handleClick = (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented && !option.disabled) {
+        onSelect(option);
+      }
+    };
+    const handleMouseEnter = (event) => {
+      onMouseEnter?.(event);
+      if (!option.disabled) {
+        setHighlightedIndex(index);
+      }
+    };
+    const setRefs = react.useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      [forwardedRef]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "li",
+      {
+        ref: setRefs,
+        id: optionId,
+        role: "option",
+        "aria-selected": isSelected,
+        "aria-disabled": option.disabled,
+        "data-highlighted": isHighlighted,
+        "data-selected": isSelected,
+        "data-disabled": option.disabled,
+        onClick: handleClick,
+        onMouseEnter: handleMouseEnter,
+        "data-compa11y-combobox-option": true,
+        ...props,
+        children: option.label
+      }
+    );
+  }
+);
+var ComboboxCompound = Object.assign(Combobox, {
+  Input: ComboboxInput,
+  Listbox: ComboboxListbox,
+  Option: ComboboxOption
+});
+
+exports.Combobox = Combobox;
+exports.ComboboxCompound = ComboboxCompound;
+exports.ComboboxInput = ComboboxInput;
+exports.ComboboxListbox = ComboboxListbox;
+exports.ComboboxOption = ComboboxOption;
+//# sourceMappingURL=chunk-OIVTOU4Z.cjs.map
+//# sourceMappingURL=chunk-OIVTOU4Z.cjs.map

package/dist/chunk-OIVTOU4Z.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/combobox/combobox.tsx"],"names":["createComponentWarnings","createContext","useContext","useState","useId","useEffect","useCallback","useMemo","jsx","forwardRef","ComboboxInput","useAnnouncer","useKeyboard","jsxs","ComboboxListbox","useRef","useLayoutEffect","ComboboxOption"],"mappings":"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","file":"chunk-OIVTOU4Z.cjs","sourcesContent":["import React, {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useId } from '../../hooks/use-id';\nimport { useKeyboard } from '../../hooks/use-keyboard';\nimport { useAnnouncer } from '../../hooks/use-announcer';\nimport { createComponentWarnings } from '@compa11y/core';\n\nconst warnings = createComponentWarnings('Combobox');\n\nexport interface ComboboxOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\ninterface ComboboxContextValue {\n  inputValue: string;\n  setInputValue: (value: string) => void;\n  selectedValue: string | null;\n  setSelectedValue: (value: string | null) => void;\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n  highlightedIndex: number;\n  setHighlightedIndex: (index: number) => void;\n  options: ComboboxOption[];\n  filteredOptions: ComboboxOption[];\n  inputId: string;\n  listboxId: string;\n  getOptionId: (index: number) => string;\n  onSelect: (option: ComboboxOption) => void;\n}\n\nconst ComboboxContext = createContext<ComboboxContextValue | null>(null);\n\nfunction useComboboxContext(): ComboboxContextValue {\n  const context = useContext(ComboboxContext);\n  if (!context) {\n    throw new Error(\n      'Combobox compound components must be used within a Combobox component'\n    );\n  }\n  return context;\n}\n\nexport interface ComboboxProps {\n  /** List of options */\n  options: ComboboxOption[];\n  /** Currently selected value */\n  value?: string | null;\n  /** Called when selection changes */\n  onValueChange?: (value: string | null) => void;\n  /** Called when input changes */\n  onInputChange?: (value: string) => void;\n  /** Default input value */\n  defaultInputValue?: string;\n  /** Whether the combobox is disabled */\n  disabled?: boolean;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Custom filter function */\n  filterFn?: (option: ComboboxOption, inputValue: string) => boolean;\n  /** Accessible label */\n  'aria-label'?: string;\n  /** ID of labelling element */\n  'aria-labelledby'?: string;\n  children: React.ReactNode;\n}\n\nexport function Combobox({\n  options,\n  value: controlledValue,\n  onValueChange,\n  onInputChange,\n  defaultInputValue = '',\n  disabled = false,\n  filterFn,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  children,\n}: ComboboxProps) {\n  const [inputValue, setInputValueState] = useState(defaultInputValue);\n  const [selectedValue, setSelectedValueState] = useState<string | null>(\n    controlledValue ?? null\n  );\n  const [isOpen, setIsOpen] = useState(false);\n  const [highlightedIndex, setHighlightedIndex] = useState(-1);\n\n  const inputId = useId('combobox-input');\n  const listboxId = useId('combobox-listbox');\n  const baseOptionId = useId('combobox-option');\n\n  // Sync controlled value\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      setSelectedValueState(controlledValue);\n      // Update input value to match selected option\n      const option = options.find((o) => o.value === controlledValue);\n      if (option) {\n        setInputValueState(option.label);\n      }\n    }\n  }, [controlledValue, options]);\n\n  const setInputValue = useCallback(\n    (value: string) => {\n      setInputValueState(value);\n      onInputChange?.(value);\n    },\n    [onInputChange]\n  );\n\n  const setSelectedValue = useCallback(\n    (value: string | null) => {\n      if (controlledValue === undefined) {\n        setSelectedValueState(value);\n      }\n      onValueChange?.(value);\n    },\n    [controlledValue, onValueChange]\n  );\n\n  const filteredOptions = useMemo(() => {\n    if (!inputValue) return options;\n\n    const defaultFilter = (opt: ComboboxOption, input: string) =>\n      opt.label.toLowerCase().includes(input.toLowerCase());\n\n    const filter = filterFn ?? defaultFilter;\n    return options.filter((opt) => filter(opt, inputValue));\n  }, [options, inputValue, filterFn]);\n\n  const getOptionId = useCallback(\n    (index: number) => `${baseOptionId}-${index}`,\n    [baseOptionId]\n  );\n\n  const onSelect = useCallback(\n    (option: ComboboxOption) => {\n      setSelectedValue(option.value);\n      setInputValue(option.label);\n      setIsOpen(false);\n      setHighlightedIndex(-1);\n    },\n    [setSelectedValue, setInputValue]\n  );\n\n  useEffect(() => {\n    if (!ariaLabel && !ariaLabelledBy) {\n      warnings.warning(\n        'Combobox has no accessible label.',\n        'Add aria-label or aria-labelledby prop.'\n      );\n    }\n  }, [ariaLabel, ariaLabelledBy]);\n\n  const contextValue: ComboboxContextValue = {\n    inputValue,\n    setInputValue,\n    selectedValue,\n    setSelectedValue,\n    isOpen,\n    setIsOpen,\n    highlightedIndex,\n    setHighlightedIndex,\n    options,\n    filteredOptions,\n    inputId,\n    listboxId,\n    getOptionId,\n    onSelect,\n  };\n\n  return (\n    <ComboboxContext.Provider value={contextValue}>\n      <div data-compa11y-combobox data-disabled={disabled}>\n        {children}\n      </div>\n    </ComboboxContext.Provider>\n  );\n}\n\nexport interface ComboboxInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'value' | 'onChange'\n> {\n  /** Show clear button */\n  clearable?: boolean;\n}\n\nexport const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(\n  function ComboboxInput(\n    { clearable = false, onKeyDown, onFocus, onBlur, ...props },\n    ref\n  ) {\n    const {\n      inputValue,\n      setInputValue,\n      setSelectedValue,\n      isOpen,\n      setIsOpen,\n      highlightedIndex,\n      setHighlightedIndex,\n      filteredOptions,\n      inputId,\n      listboxId,\n      getOptionId,\n      onSelect,\n    } = useComboboxContext();\n    const { announce } = useAnnouncer();\n\n    const keyboardProps = useKeyboard(\n      {\n        ArrowDown: () => {\n          if (!isOpen) {\n            setIsOpen(true);\n            setHighlightedIndex(0);\n          } else {\n            const nextIndex = (highlightedIndex + 1) % filteredOptions.length;\n            setHighlightedIndex(nextIndex);\n          }\n        },\n        ArrowUp: () => {\n          if (!isOpen) {\n            setIsOpen(true);\n            setHighlightedIndex(filteredOptions.length - 1);\n          } else {\n            const prevIndex =\n              (highlightedIndex - 1 + filteredOptions.length) %\n              filteredOptions.length;\n            setHighlightedIndex(prevIndex);\n          }\n        },\n        Enter: () => {\n          if (isOpen && highlightedIndex >= 0) {\n            const option = filteredOptions[highlightedIndex];\n            if (option && !option.disabled) {\n              onSelect(option);\n              announce(`${option.label} selected`);\n            }\n          }\n        },\n        Escape: () => {\n          if (isOpen) {\n            setIsOpen(false);\n            setHighlightedIndex(-1);\n          }\n        },\n        Tab: () => {\n          // Tab should close the listbox and allow natural focus movement\n          if (isOpen) {\n            setIsOpen(false);\n            setHighlightedIndex(-1);\n          }\n          // Return false to allow browser's default Tab behavior\n          return false;\n        },\n        Home: () => {\n          if (isOpen) {\n            setHighlightedIndex(0);\n          }\n        },\n        End: () => {\n          if (isOpen) {\n            setHighlightedIndex(filteredOptions.length - 1);\n          }\n        },\n      },\n      { preventDefault: true, stopPropagation: false }\n    );\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n      onKeyDown?.(event);\n      if (!event.defaultPrevented) {\n        keyboardProps.onKeyDown(event);\n      }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      const value = event.target.value;\n      setInputValue(value);\n      setIsOpen(true);\n      setHighlightedIndex(0);\n\n      if (value === '') {\n        setSelectedValue(null);\n      }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n      onFocus?.(event);\n      setIsOpen(true);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n      onBlur?.(event);\n      // Use setTimeout to allow clicks on options to register before closing\n      // This delay allows option click events to fire before the listbox closes\n      setTimeout(() => {\n        // Only close if focus didn't move to the listbox itself\n        // This handles cases where user clicks on an option\n        setIsOpen(false);\n      }, 150);\n    };\n\n    const handleClear = () => {\n      setInputValue('');\n      setSelectedValue(null);\n      setIsOpen(false);\n    };\n\n    const activeDescendant =\n      isOpen && highlightedIndex >= 0\n        ? getOptionId(highlightedIndex)\n        : undefined;\n\n    return (\n      <div data-compa11y-combobox-input-wrapper>\n        <input\n          ref={ref}\n          id={inputId}\n          type=\"text\"\n          role=\"combobox\"\n          value={inputValue}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          aria-expanded={isOpen}\n          aria-controls={listboxId}\n          aria-activedescendant={activeDescendant}\n          aria-autocomplete=\"list\"\n          aria-haspopup=\"listbox\"\n          autoComplete=\"off\"\n          data-compa11y-combobox-input\n          {...props}\n        />\n        {clearable && inputValue && (\n          <button\n            type=\"button\"\n            onClick={handleClear}\n            aria-label=\"Clear selection\"\n            tabIndex={-1}\n            data-compa11y-combobox-clear\n          >\n            ×\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n\nexport interface ComboboxListboxProps extends React.HTMLAttributes<HTMLUListElement> {\n  /** Render when no options match */\n  emptyMessage?: React.ReactNode;\n  children?: React.ReactNode;\n}\n\nexport const ComboboxListbox = forwardRef<\n  HTMLUListElement,\n  ComboboxListboxProps\n>(function ComboboxListbox(\n  { emptyMessage = 'No results found', children, style, ...props },\n  forwardedRef\n) {\n  const { isOpen, filteredOptions, listboxId, inputId } = useComboboxContext();\n  const { announce } = useAnnouncer();\n  const internalRef = useRef<HTMLUListElement | null>(null);\n  const [position, setPosition] = useState<'bottom' | 'top'>('bottom');\n\n  useEffect(() => {\n    if (isOpen) {\n      const count = filteredOptions.length;\n      announce(\n        count === 0\n          ? 'No results'\n          : `${count} result${count === 1 ? '' : 's'} available`\n      );\n    }\n  }, [isOpen, filteredOptions.length, announce]);\n\n  useLayoutEffect(() => {\n    if (isOpen && internalRef.current) {\n      const listbox = internalRef.current;\n      const rect = listbox.getBoundingClientRect();\n      const viewportHeight = window.innerHeight;\n      const spaceBelow = viewportHeight - rect.top;\n      const spaceAbove = rect.top;\n      const listboxHeight = Math.min(rect.height, 200); // max-height from CSS\n\n      if (spaceBelow < listboxHeight + 50 && spaceAbove > spaceBelow) {\n        setPosition('top');\n      } else {\n        setPosition('bottom');\n      }\n    }\n  }, [isOpen]);\n\n  const setRefs = useCallback(\n    (node: HTMLUListElement | null) => {\n      internalRef.current = node;\n      if (typeof forwardedRef === 'function') {\n        forwardedRef(node);\n      } else if (forwardedRef) {\n        (\n          forwardedRef as React.MutableRefObject<HTMLUListElement | null>\n        ).current = node;\n      }\n    },\n    [forwardedRef]\n  );\n\n  if (!isOpen) {\n    return null;\n  }\n\n  const positionStyle: React.CSSProperties =\n    position === 'top'\n      ? { bottom: '100%', top: 'auto', marginBottom: '4px', marginTop: 0 }\n      : {};\n\n  return (\n    <ul\n      ref={setRefs}\n      id={listboxId}\n      role=\"listbox\"\n      aria-labelledby={inputId}\n      style={{ ...style, ...positionStyle }}\n      data-compa11y-combobox-listbox\n      data-position={position}\n      {...props}\n    >\n      {filteredOptions.length === 0 ? (\n        <li role=\"presentation\" data-compa11y-combobox-empty>\n          {emptyMessage}\n        </li>\n      ) : (\n        (children ??\n        filteredOptions.map((option, index) => (\n          <ComboboxOption key={option.value} option={option} index={index} />\n        )))\n      )}\n    </ul>\n  );\n});\n\nexport interface ComboboxOptionProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  option: ComboboxOption;\n  index: number;\n}\n\nexport const ComboboxOption = forwardRef<HTMLLIElement, ComboboxOptionProps>(\n  function ComboboxOption(\n    { option, index, onClick, onMouseEnter, ...props },\n    forwardedRef\n  ) {\n    const {\n      selectedValue,\n      highlightedIndex,\n      setHighlightedIndex,\n      getOptionId,\n      onSelect,\n    } = useComboboxContext();\n    const internalRef = useRef<HTMLLIElement | null>(null);\n\n    const isSelected = selectedValue === option.value;\n    const isHighlighted = highlightedIndex === index;\n    const optionId = getOptionId(index);\n\n    useEffect(() => {\n      if (isHighlighted && internalRef.current) {\n        internalRef.current.scrollIntoView({\n          block: 'nearest',\n          behavior: 'smooth',\n        });\n      }\n    }, [isHighlighted]);\n\n    const handleClick = (event: React.MouseEvent<HTMLLIElement>) => {\n      onClick?.(event);\n      if (!event.defaultPrevented && !option.disabled) {\n        onSelect(option);\n      }\n    };\n\n    const handleMouseEnter = (event: React.MouseEvent<HTMLLIElement>) => {\n      onMouseEnter?.(event);\n      if (!option.disabled) {\n        setHighlightedIndex(index);\n      }\n    };\n\n    const setRefs = useCallback(\n      (node: HTMLLIElement | null) => {\n        internalRef.current = node;\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(node);\n        } else if (forwardedRef) {\n          (\n            forwardedRef as React.MutableRefObject<HTMLLIElement | null>\n          ).current = node;\n        }\n      },\n      [forwardedRef]\n    );\n\n    return (\n      <li\n        ref={setRefs}\n        id={optionId}\n        role=\"option\"\n        aria-selected={isSelected}\n        aria-disabled={option.disabled}\n        data-highlighted={isHighlighted}\n        data-selected={isSelected}\n        data-disabled={option.disabled}\n        onClick={handleClick}\n        onMouseEnter={handleMouseEnter}\n        data-compa11y-combobox-option\n        {...props}\n      >\n        {option.label}\n      </li>\n    );\n  }\n);\n\nexport const ComboboxCompound = Object.assign(Combobox, {\n  Input: ComboboxInput,\n  Listbox: ComboboxListbox,\n  Option: ComboboxOption,\n});\n"]}

package/dist/chunk-OND5B7UG.js

@@ -0,0 +1,85 @@
+import { useEffect, useCallback, useRef } from 'react';
+import { initAnnouncer, announce, announcePolite, announceAssertive, queueAnnouncement, clearAnnouncements } from '@compa11y/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-OND5B7UG.js.map
+//# sourceMappingURL=chunk-OND5B7UG.js.map

package/dist/chunk-OND5B7UG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-announcer.ts"],"names":[],"mappings":"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","file":"chunk-OND5B7UG.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 '@compa11y/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"]}