@a11y-core/react 0.1.0-alpha.0

package/dist/chunk-N774QCHE.js

@@ -0,0 +1,234 @@
+import { useAnnouncer } from './chunk-47MFBHV6.js';
+import { useKeyboard } from './chunk-U6DUSMEA.js';
+import { useId } from './chunk-3WBTHTVK.js';
+import React, { createContext, forwardRef, useState, useRef, useCallback, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var TabsContext = createContext(null);
+function useTabsContext() {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error(
+      "Tabs compound components must be used within a Tabs component"
+    );
+  }
+  return context;
+}
+var TabsProvider = TabsContext.Provider;
+var Tabs = forwardRef(function Tabs2({
+  defaultValue = "",
+  value: controlledValue,
+  onValueChange,
+  orientation = "horizontal",
+  activationMode = "automatic",
+  children,
+  ...props
+}, ref) {
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const selectedValue = controlledValue ?? uncontrolledValue;
+  const tabsRef = useRef([]);
+  const baseId = useId("tabs");
+  const setSelectedValue = useCallback(
+    (value) => {
+      if (controlledValue === void 0) {
+        setUncontrolledValue(value);
+      }
+      onValueChange?.(value);
+    },
+    [controlledValue, onValueChange]
+  );
+  const registerTab = useCallback((value) => {
+    if (!tabsRef.current.includes(value)) {
+      tabsRef.current.push(value);
+    }
+  }, []);
+  const unregisterTab = useCallback((value) => {
+    const index = tabsRef.current.indexOf(value);
+    if (index > -1) {
+      tabsRef.current.splice(index, 1);
+    }
+  }, []);
+  const getTabValues = useCallback(() => [...tabsRef.current], []);
+  const contextValue = {
+    selectedValue,
+    setSelectedValue,
+    baseId,
+    orientation,
+    activationMode,
+    registerTab,
+    unregisterTab,
+    getTabValues
+  };
+  return /* @__PURE__ */ jsx(TabsProvider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-orientation": orientation,
+      "data-a11y-core-tabs": true,
+      ...props,
+      children
+    }
+  ) });
+});
+var TabList = forwardRef(
+  function TabList2({ children, "aria-label": ariaLabel, onKeyDown, ...props }, ref) {
+    const {
+      orientation,
+      selectedValue,
+      setSelectedValue,
+      getTabValues,
+      activationMode
+    } = useTabsContext();
+    const navigateToTab = useCallback(
+      (direction) => {
+        const values = getTabValues();
+        if (values.length === 0) return;
+        const currentIndex = values.indexOf(selectedValue);
+        let newIndex;
+        switch (direction) {
+          case "next":
+            newIndex = (currentIndex + 1) % values.length;
+            break;
+          case "previous":
+            newIndex = (currentIndex - 1 + values.length) % values.length;
+            break;
+          case "first":
+            newIndex = 0;
+            break;
+          case "last":
+            newIndex = values.length - 1;
+            break;
+        }
+        const newValue = values[newIndex];
+        if (newValue) {
+          const tabElement = document.querySelector(
+            `[data-a11y-core-tab][data-value="${newValue}"]`
+          );
+          tabElement?.focus();
+          if (activationMode === "automatic") {
+            setSelectedValue(newValue);
+          }
+        }
+      },
+      [getTabValues, selectedValue, setSelectedValue, activationMode]
+    );
+    const keyboardProps = useKeyboard(
+      {
+        ArrowRight: () => {
+          if (orientation === "horizontal") navigateToTab("next");
+        },
+        ArrowLeft: () => {
+          if (orientation === "horizontal") navigateToTab("previous");
+        },
+        ArrowDown: () => {
+          if (orientation === "vertical") navigateToTab("next");
+        },
+        ArrowUp: () => {
+          if (orientation === "vertical") navigateToTab("previous");
+        },
+        Home: () => navigateToTab("first"),
+        End: () => navigateToTab("last")
+      },
+      { preventDefault: true }
+    );
+    const handleKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (!event.defaultPrevented) {
+        keyboardProps.onKeyDown(event);
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "tablist",
+        "aria-label": ariaLabel,
+        "aria-orientation": orientation,
+        onKeyDown: handleKeyDown,
+        "data-a11y-core-tablist": true,
+        ...props,
+        children
+      }
+    );
+  }
+);
+var Tab = forwardRef(function Tab2({ value, disabled = false, children, onClick, ...props }, ref) {
+  const {
+    selectedValue,
+    setSelectedValue,
+    baseId,
+    registerTab,
+    unregisterTab
+  } = useTabsContext();
+  const { announce } = useAnnouncer();
+  React.useEffect(() => {
+    registerTab(value);
+    return () => unregisterTab(value);
+  }, [value, registerTab, unregisterTab]);
+  const isSelected = selectedValue === value;
+  const tabId = `${baseId}-tab-${value}`;
+  const panelId = `${baseId}-panel-${value}`;
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented && !disabled) {
+      setSelectedValue(value);
+      announce(`${value} tab selected`);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "tab",
+      id: tabId,
+      "aria-selected": isSelected,
+      "aria-controls": panelId,
+      "aria-disabled": disabled,
+      tabIndex: isSelected ? 0 : -1,
+      onClick: handleClick,
+      disabled,
+      "data-selected": isSelected,
+      "data-disabled": disabled,
+      "data-value": value,
+      "data-a11y-core-tab": true,
+      ...props,
+      children
+    }
+  );
+});
+var TabPanel = forwardRef(
+  function TabPanel2({ value, forceMount = false, children, ...props }, ref) {
+    const { selectedValue, baseId } = useTabsContext();
+    const isSelected = selectedValue === value;
+    const tabId = `${baseId}-tab-${value}`;
+    const panelId = `${baseId}-panel-${value}`;
+    if (!isSelected && !forceMount) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "tabpanel",
+        id: panelId,
+        "aria-labelledby": tabId,
+        tabIndex: 0,
+        hidden: !isSelected,
+        "data-selected": isSelected,
+        "data-a11y-core-tabpanel": true,
+        ...props,
+        children
+      }
+    );
+  }
+);
+var TabsCompound = Object.assign(Tabs, {
+  List: TabList,
+  Tab,
+  Panel: TabPanel
+});
+
+export { Tab, TabList, TabPanel, Tabs, TabsCompound, useTabsContext };
+//# sourceMappingURL=chunk-N774QCHE.js.map
+//# sourceMappingURL=chunk-N774QCHE.js.map

package/dist/chunk-N774QCHE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/tabs/tabs-context.ts","../src/components/tabs/tabs.tsx"],"names":["Tabs","TabList","Tab","TabPanel"],"mappings":"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","file":"chunk-N774QCHE.js","sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface TabsContextValue {\n  /** Currently selected tab value */\n  selectedValue: string;\n  /** Change selected tab */\n  setSelectedValue: (value: string) => void;\n  /** Base ID for ARIA relationships */\n  baseId: string;\n  /** Orientation of tabs */\n  orientation: 'horizontal' | 'vertical';\n  /** Whether tabs are activated on focus or on click */\n  activationMode: 'automatic' | 'manual';\n  /** Register a tab */\n  registerTab: (value: string) => void;\n  /** Unregister a tab */\n  unregisterTab: (value: string) => void;\n  /** Get all tab values */\n  getTabValues: () => string[];\n}\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nexport function useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error(\n      'Tabs compound components must be used within a Tabs component'\n    );\n  }\n  return context;\n}\n\nexport const TabsProvider = TabsContext.Provider;\n","import React, { forwardRef, useCallback, useRef, useState } from 'react';\nimport { useId } from '../../hooks/use-id';\nimport { useKeyboard } from '../../hooks/use-keyboard';\nimport { useAnnouncer } from '../../hooks/use-announcer';\nimport {\n  TabsProvider,\n  useTabsContext,\n  type TabsContextValue,\n} from './tabs-context';\n\nexport interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Default selected tab value */\n  defaultValue?: string;\n  /** Controlled selected value */\n  value?: string;\n  /** Called when selection changes */\n  onValueChange?: (value: string) => void;\n  /** Orientation of tabs */\n  orientation?: 'horizontal' | 'vertical';\n  /** Activation mode */\n  activationMode?: 'automatic' | 'manual';\n  children: React.ReactNode;\n}\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  {\n    defaultValue = '',\n    value: controlledValue,\n    onValueChange,\n    orientation = 'horizontal',\n    activationMode = 'automatic',\n    children,\n    ...props\n  },\n  ref\n) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const selectedValue = controlledValue ?? uncontrolledValue;\n  const tabsRef = useRef<string[]>([]);\n  const baseId = useId('tabs');\n\n  const setSelectedValue = useCallback(\n    (value: string) => {\n      if (controlledValue === undefined) {\n        setUncontrolledValue(value);\n      }\n      onValueChange?.(value);\n    },\n    [controlledValue, onValueChange]\n  );\n\n  const registerTab = useCallback((value: string) => {\n    if (!tabsRef.current.includes(value)) {\n      tabsRef.current.push(value);\n    }\n  }, []);\n\n  const unregisterTab = useCallback((value: string) => {\n    const index = tabsRef.current.indexOf(value);\n    if (index > -1) {\n      tabsRef.current.splice(index, 1);\n    }\n  }, []);\n\n  const getTabValues = useCallback(() => [...tabsRef.current], []);\n\n  const contextValue: TabsContextValue = {\n    selectedValue,\n    setSelectedValue,\n    baseId,\n    orientation,\n    activationMode,\n    registerTab,\n    unregisterTab,\n    getTabValues,\n  };\n\n  return (\n    <TabsProvider value={contextValue}>\n      <div\n        ref={ref}\n        data-orientation={orientation}\n        data-a11y-core-tabs\n        {...props}\n      >\n        {children}\n      </div>\n    </TabsProvider>\n  );\n});\n\nexport interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Accessible label for the tab list */\n  'aria-label'?: string;\n  children: React.ReactNode;\n}\n\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(\n  function TabList(\n    { children, 'aria-label': ariaLabel, onKeyDown, ...props },\n    ref\n  ) {\n    const {\n      orientation,\n      selectedValue,\n      setSelectedValue,\n      getTabValues,\n      activationMode,\n    } = useTabsContext();\n\n    const navigateToTab = useCallback(\n      (direction: 'next' | 'previous' | 'first' | 'last') => {\n        const values = getTabValues();\n        if (values.length === 0) return;\n\n        const currentIndex = values.indexOf(selectedValue);\n        let newIndex: number;\n\n        switch (direction) {\n          case 'next':\n            newIndex = (currentIndex + 1) % values.length;\n            break;\n          case 'previous':\n            newIndex = (currentIndex - 1 + values.length) % values.length;\n            break;\n          case 'first':\n            newIndex = 0;\n            break;\n          case 'last':\n            newIndex = values.length - 1;\n            break;\n        }\n\n        const newValue = values[newIndex];\n        if (newValue) {\n          const tabElement = document.querySelector(\n            `[data-a11y-core-tab][data-value=\"${newValue}\"]`\n          ) as HTMLElement;\n          tabElement?.focus();\n\n          if (activationMode === 'automatic') {\n            setSelectedValue(newValue);\n          }\n        }\n      },\n      [getTabValues, selectedValue, setSelectedValue, activationMode]\n    );\n\n    const keyboardProps = useKeyboard(\n      {\n        ArrowRight: () => {\n          if (orientation === 'horizontal') navigateToTab('next');\n        },\n        ArrowLeft: () => {\n          if (orientation === 'horizontal') navigateToTab('previous');\n        },\n        ArrowDown: () => {\n          if (orientation === 'vertical') navigateToTab('next');\n        },\n        ArrowUp: () => {\n          if (orientation === 'vertical') navigateToTab('previous');\n        },\n        Home: () => navigateToTab('first'),\n        End: () => navigateToTab('last'),\n      },\n      { preventDefault: true }\n    );\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n      if (!event.defaultPrevented) {\n        keyboardProps.onKeyDown(event);\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"tablist\"\n        aria-label={ariaLabel}\n        aria-orientation={orientation}\n        onKeyDown={handleKeyDown}\n        data-a11y-core-tablist\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport interface TabProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'value'\n> {\n  /** Value identifying this tab */\n  value: string;\n  /** Whether the tab is disabled */\n  disabled?: boolean;\n  children: React.ReactNode;\n}\n\nexport const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(\n  { value, disabled = false, children, onClick, ...props },\n  ref\n) {\n  const {\n    selectedValue,\n    setSelectedValue,\n    baseId,\n    registerTab,\n    unregisterTab,\n  } = useTabsContext();\n  const { announce } = useAnnouncer();\n\n  React.useEffect(() => {\n    registerTab(value);\n    return () => unregisterTab(value);\n  }, [value, registerTab, unregisterTab]);\n\n  const isSelected = selectedValue === value;\n  const tabId = `${baseId}-tab-${value}`;\n  const panelId = `${baseId}-panel-${value}`;\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event);\n    if (!event.defaultPrevented && !disabled) {\n      setSelectedValue(value);\n      announce(`${value} tab selected`);\n    }\n  };\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      role=\"tab\"\n      id={tabId}\n      aria-selected={isSelected}\n      aria-controls={panelId}\n      aria-disabled={disabled}\n      tabIndex={isSelected ? 0 : -1}\n      onClick={handleClick}\n      disabled={disabled}\n      data-selected={isSelected}\n      data-disabled={disabled}\n      data-value={value}\n      data-a11y-core-tab\n      {...props}\n    >\n      {children}\n    </button>\n  );\n});\n\nexport interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Value identifying this panel (must match a Tab value) */\n  value: string;\n  /** Whether to keep panel mounted when not selected */\n  forceMount?: boolean;\n  children: React.ReactNode;\n}\n\nexport const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(\n  function TabPanel({ value, forceMount = false, children, ...props }, ref) {\n    const { selectedValue, baseId } = useTabsContext();\n\n    const isSelected = selectedValue === value;\n    const tabId = `${baseId}-tab-${value}`;\n    const panelId = `${baseId}-panel-${value}`;\n\n    if (!isSelected && !forceMount) {\n      return null;\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"tabpanel\"\n        id={panelId}\n        aria-labelledby={tabId}\n        tabIndex={0}\n        hidden={!isSelected}\n        data-selected={isSelected}\n        data-a11y-core-tabpanel\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport const TabsCompound = Object.assign(Tabs, {\n  List: TabList,\n  Tab: Tab,\n  Panel: TabPanel,\n});\n"]}

package/dist/chunk-OSHIYZCZ.cjs

@@ -0,0 +1,386 @@
+'use strict';
+
+var chunk7A3IDIUB_cjs = require('./chunk-7A3IDIUB.cjs');
+var chunkGS3H4T2O_cjs = require('./chunk-GS3H4T2O.cjs');
+var chunkN6L4GLFC_cjs = require('./chunk-N6L4GLFC.cjs');
+var react = require('react');
+var core = require('@a11y-core/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 = chunkN6L4GLFC_cjs.useId("combobox-input");
+  const listboxId = chunkN6L4GLFC_cjs.useId("combobox-listbox");
+  const baseOptionId = chunkN6L4GLFC_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-a11y-core-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 } = chunk7A3IDIUB_cjs.useAnnouncer();
+    const keyboardProps = chunkGS3H4T2O_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-a11y-core-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-a11y-core-combobox-input": true,
+          ...props
+        }
+      ),
+      clearable && inputValue && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleClear,
+          "aria-label": "Clear selection",
+          tabIndex: -1,
+          "data-a11y-core-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 } = chunk7A3IDIUB_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-a11y-core-combobox-listbox": true,
+      "data-position": position,
+      ...props,
+      children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { role: "presentation", "data-a11y-core-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-a11y-core-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-OSHIYZCZ.cjs.map
+//# sourceMappingURL=chunk-OSHIYZCZ.cjs.map