@compa11y/react 0.1.0

package/LICENSE

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

package/README.md

@@ -0,0 +1,252 @@
+# @compa11y/react
+
+Accessible React components that just work.
+
+## Installation
+
+```bash
+npm install @compa11y/react
+```
+
+## Components
+
+### Dialog
+
+```tsx
+import { Dialog } from '@compa11y/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 '@compa11y/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 '@compa11y/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 '@compa11y/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 '@compa11y/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 '@compa11y/react';
+
+function Modal({ isOpen }) {
+  const trapRef = useFocusTrap({ active: isOpen });
+
+  return (
+    <div ref={trapRef} role="dialog">
+      <button>Close</button>
+    </div>
+  );
+}
+```
+
+### useAnnouncer
+
+```tsx
+import { useAnnouncer } from '@compa11y/react';
+
+function SearchResults({ count }) {
+  const { announce } = useAnnouncer();
+
+  useEffect(() => {
+    announce(`Found ${count} results`);
+  }, [count, announce]);
+}
+```
+
+### useKeyboard
+
+```tsx
+import { useKeyboard } from '@compa11y/react';
+
+function CustomList() {
+  const keyboardProps = useKeyboard({
+    ArrowDown: () => focusNext(),
+    ArrowUp: () => focusPrevious(),
+    Enter: () => selectItem(),
+  });
+
+  return <ul {...keyboardProps}>...</ul>;
+}
+```
+
+### useFocusVisible
+
+```tsx
+import { useFocusVisible } from '@compa11y/react';
+
+function Button({ children }) {
+  const { isFocusVisible, focusProps } = useFocusVisible();
+
+  return (
+    <button {...focusProps} className={isFocusVisible ? 'focus-ring' : ''}>
+      {children}
+    </button>
+  );
+}
+```
+
+### useRovingTabindex
+
+```tsx
+import { useRovingTabindex } from '@compa11y/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-compa11y-dialog-overlay] {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+[data-compa11y-dialog] {
+  background: white;
+  padding: 1.5rem;
+  border-radius: 8px;
+}
+
+/* Menu */
+[data-compa11y-menu-content] {
+  background: white;
+  border: 1px solid #e0e0e0;
+}
+
+[data-compa11y-menu-item][data-highlighted='true'] {
+  background: #f0f0f0;
+}
+
+/* Tabs */
+[data-compa11y-tab][data-selected='true'] {
+  border-bottom: 2px solid blue;
+}
+
+/* Combobox */
+[data-compa11y-combobox-option][data-highlighted='true'] {
+  background: #f0f0f0;
+}
+```
+
+## License
+
+MIT

package/dist/chunk-2S4C6FGA.js

@@ -0,0 +1,380 @@
+import { useAnnouncer } from './chunk-OND5B7UG.js';
+import { useKeyboard } from './chunk-JXYOE7SH.js';
+import { useId } from './chunk-WURPAE3R.js';
+import { createContext, forwardRef, useRef, useState, useEffect, useLayoutEffect, useCallback, useContext, useMemo } from 'react';
+import { createComponentWarnings } from '@compa11y/core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var warnings = createComponentWarnings("Combobox");
+var ComboboxContext = createContext(null);
+function useComboboxContext() {
+  const context = 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] = useState(defaultInputValue);
+  const [selectedValue, setSelectedValueState] = useState(
+    controlledValue ?? null
+  );
+  const [isOpen, setIsOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const inputId = useId("combobox-input");
+  const listboxId = useId("combobox-listbox");
+  const baseOptionId = useId("combobox-option");
+  useEffect(() => {
+    if (controlledValue !== void 0) {
+      setSelectedValueState(controlledValue);
+      const option = options.find((o) => o.value === controlledValue);
+      if (option) {
+        setInputValueState(option.label);
+      }
+    }
+  }, [controlledValue, options]);
+  const setInputValue = useCallback(
+    (value) => {
+      setInputValueState(value);
+      onInputChange?.(value);
+    },
+    [onInputChange]
+  );
+  const setSelectedValue = useCallback(
+    (value) => {
+      if (controlledValue === void 0) {
+        setSelectedValueState(value);
+      }
+      onValueChange?.(value);
+    },
+    [controlledValue, onValueChange]
+  );
+  const filteredOptions = 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 = useCallback(
+    (index) => `${baseOptionId}-${index}`,
+    [baseOptionId]
+  );
+  const onSelect = useCallback(
+    (option) => {
+      setSelectedValue(option.value);
+      setInputValue(option.label);
+      setIsOpen(false);
+      setHighlightedIndex(-1);
+    },
+    [setSelectedValue, setInputValue]
+  );
+  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__ */ jsx(ComboboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { "data-compa11y-combobox": true, "data-disabled": disabled, children }) });
+}
+var ComboboxInput = 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 } = useAnnouncer();
+    const keyboardProps = 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__ */ jsxs("div", { "data-compa11y-combobox-input-wrapper": true, children: [
+      /* @__PURE__ */ 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__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleClear,
+          "aria-label": "Clear selection",
+          tabIndex: -1,
+          "data-compa11y-combobox-clear": true,
+          children: "\xD7"
+        }
+      )
+    ] });
+  }
+);
+var ComboboxListbox = forwardRef(function ComboboxListbox2({ emptyMessage = "No results found", children, style, ...props }, forwardedRef) {
+  const { isOpen, filteredOptions, listboxId, inputId } = useComboboxContext();
+  const { announce } = useAnnouncer();
+  const internalRef = useRef(null);
+  const [position, setPosition] = useState("bottom");
+  useEffect(() => {
+    if (isOpen) {
+      const count = filteredOptions.length;
+      announce(
+        count === 0 ? "No results" : `${count} result${count === 1 ? "" : "s"} available`
+      );
+    }
+  }, [isOpen, filteredOptions.length, announce]);
+  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 = 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__ */ 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__ */ jsx("li", { role: "presentation", "data-compa11y-combobox-empty": true, children: emptyMessage }) : children ?? filteredOptions.map((option, index) => /* @__PURE__ */ jsx(ComboboxOption, { option, index }, option.value))
+    }
+  );
+});
+var ComboboxOption = forwardRef(
+  function ComboboxOption2({ option, index, onClick, onMouseEnter, ...props }, forwardedRef) {
+    const {
+      selectedValue,
+      highlightedIndex,
+      setHighlightedIndex,
+      getOptionId,
+      onSelect
+    } = useComboboxContext();
+    const internalRef = useRef(null);
+    const isSelected = selectedValue === option.value;
+    const isHighlighted = highlightedIndex === index;
+    const optionId = getOptionId(index);
+    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 = useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      [forwardedRef]
+    );
+    return /* @__PURE__ */ 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
+});
+
+export { Combobox, ComboboxCompound, ComboboxInput, ComboboxListbox, ComboboxOption };
+//# sourceMappingURL=chunk-2S4C6FGA.js.map
+//# sourceMappingURL=chunk-2S4C6FGA.js.map