@a13y/react 0.1.2 → 0.1.3

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useRef, useEffect, useCallback, useId, useState, useContext } from 'react';
+import React4, { createContext, useRef, useEffect, useCallback, useId, useState, cloneElement, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { announce } from '@a13y/core/runtime/announce';
 
@@ -844,6 +844,2822 @@ var AccessibleTabs = (props) => {
     )
   ] });
 };
+var idCounter = 0;
+function useId2(prefix = "a13y") {
+  const idRef = useRef(void 0);
+  if (!idRef.current) {
+    idRef.current = `${prefix}-${++idCounter}`;
+  }
+  return idRef.current;
+}
+var AccessibleTooltip = ({
+  content,
+  placement = "top",
+  delay = 300,
+  trigger = "both",
+  children,
+  className = "",
+  style = {}
+}) => {
+  const tooltipId = useId2("tooltip");
+  const [isVisible, setIsVisible] = useState(false);
+  const timeoutRef = useRef(void 0);
+  const triggerRef = useRef(null);
+  const showTooltip = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setIsVisible(true);
+    }, delay);
+  };
+  const hideTooltip = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsVisible(false);
+  };
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (!isVisible) return;
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        hideTooltip();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isVisible]);
+  const shouldTriggerOnHover = trigger === "hover" || trigger === "both";
+  const shouldTriggerOnFocus = trigger === "focus" || trigger === "both";
+  const childProps = {
+    ref: triggerRef,
+    "aria-describedby": isVisible ? tooltipId : void 0
+  };
+  if (shouldTriggerOnHover) {
+    childProps.onMouseEnter = () => showTooltip();
+    childProps.onMouseLeave = () => hideTooltip();
+  }
+  if (shouldTriggerOnFocus) {
+    childProps.onFocus = () => showTooltip();
+    childProps.onBlur = () => hideTooltip();
+  }
+  const getTooltipPosition = () => {
+    const baseStyles = {
+      position: "absolute",
+      zIndex: 1e3,
+      padding: "8px 12px",
+      backgroundColor: "#333",
+      color: "#fff",
+      borderRadius: "4px",
+      fontSize: "14px",
+      whiteSpace: "nowrap",
+      pointerEvents: "none"
+    };
+    switch (placement) {
+      case "top":
+        return { ...baseStyles, bottom: "100%", left: "50%", transform: "translateX(-50%)", marginBottom: "8px" };
+      case "bottom":
+        return { ...baseStyles, top: "100%", left: "50%", transform: "translateX(-50%)", marginTop: "8px" };
+      case "left":
+        return { ...baseStyles, right: "100%", top: "50%", transform: "translateY(-50%)", marginRight: "8px" };
+      case "right":
+        return { ...baseStyles, left: "100%", top: "50%", transform: "translateY(-50%)", marginLeft: "8px" };
+      default:
+        return baseStyles;
+    }
+  };
+  return /* @__PURE__ */ jsxs("span", { style: { position: "relative", display: "inline-block" }, children: [
+    cloneElement(children, childProps),
+    isVisible && /* @__PURE__ */ jsx(
+      "span",
+      {
+        role: "tooltip",
+        id: tooltipId,
+        className,
+        style: { ...getTooltipPosition(), ...style },
+        children: content
+      }
+    )
+  ] });
+};
+var AccessibleToggle = ({
+  checked,
+  onChange,
+  label,
+  description,
+  disabled = false,
+  className = "",
+  switchClassName = "",
+  style = {}
+}) => {
+  const toggleId = useId2("toggle");
+  const descriptionId = useId2("toggle-description");
+  const handleKeyDown = (event) => {
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      if (!disabled) {
+        onChange(!checked);
+      }
+    }
+  };
+  const handleClick = () => {
+    if (!disabled) {
+      onChange(!checked);
+    }
+  };
+  const containerStyles = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "12px",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.6 : 1,
+    ...style
+  };
+  const switchStyles = {
+    position: "relative",
+    width: "44px",
+    height: "24px",
+    backgroundColor: checked ? "#007bff" : "#ccc",
+    borderRadius: "12px",
+    transition: "background-color 0.2s",
+    flexShrink: 0
+  };
+  const thumbStyles = {
+    position: "absolute",
+    top: "2px",
+    left: checked ? "22px" : "2px",
+    width: "20px",
+    height: "20px",
+    backgroundColor: "#fff",
+    borderRadius: "50%",
+    transition: "left 0.2s"
+  };
+  const labelStyles = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px"
+  };
+  const descriptionStyles = {
+    fontSize: "0.875rem",
+    color: "#666"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: containerStyles,
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "switch",
+            "aria-checked": checked,
+            "aria-labelledby": toggleId,
+            "aria-describedby": description ? descriptionId : void 0,
+            "aria-disabled": disabled,
+            tabIndex: disabled ? -1 : 0,
+            onKeyDown: handleKeyDown,
+            className: switchClassName,
+            style: switchStyles,
+            children: /* @__PURE__ */ jsx("div", { style: thumbStyles })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: labelStyles, children: [
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              id: toggleId,
+              htmlFor: toggleId,
+              style: { fontWeight: 500, cursor: disabled ? "not-allowed" : "pointer" },
+              children: label
+            }
+          ),
+          description && /* @__PURE__ */ jsx("span", { id: descriptionId, style: descriptionStyles, children: description })
+        ] })
+      ]
+    }
+  );
+};
+var AccessibleToast = ({
+  message,
+  type = "info",
+  duration = 5e3,
+  position = "top-right",
+  action,
+  isOpen,
+  onClose,
+  className = "",
+  style = {}
+}) => {
+  const toastId = useId2("toast");
+  const [isVisible, setIsVisible] = useState(isOpen);
+  useEffect(() => {
+    setIsVisible(isOpen);
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isVisible || duration === 0) return;
+    const timer = setTimeout(() => {
+      setIsVisible(false);
+      onClose();
+    }, duration);
+    return () => clearTimeout(timer);
+  }, [isVisible, duration, onClose]);
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape") {
+      setIsVisible(false);
+      onClose();
+    }
+  };
+  if (!isVisible) return null;
+  const getAriaRole = () => {
+    return type === "error" ? "alert" : "status";
+  };
+  const getAriaPoliteness = () => {
+    return type === "error" ? "assertive" : "polite";
+  };
+  const getPositionStyles = () => {
+    const base = {
+      position: "fixed",
+      zIndex: 9999
+    };
+    switch (position) {
+      case "top-right":
+        return { ...base, top: "16px", right: "16px" };
+      case "top-left":
+        return { ...base, top: "16px", left: "16px" };
+      case "bottom-right":
+        return { ...base, bottom: "16px", right: "16px" };
+      case "bottom-left":
+        return { ...base, bottom: "16px", left: "16px" };
+      case "top-center":
+        return { ...base, top: "16px", left: "50%", transform: "translateX(-50%)" };
+      case "bottom-center":
+        return { ...base, bottom: "16px", left: "50%", transform: "translateX(-50%)" };
+      default:
+        return base;
+    }
+  };
+  const getTypeStyles = () => {
+    const baseTypeStyles = {
+      success: { backgroundColor: "#10b981", color: "#fff" },
+      error: { backgroundColor: "#ef4444", color: "#fff" },
+      warning: { backgroundColor: "#f59e0b", color: "#fff" },
+      info: { backgroundColor: "#3b82f6", color: "#fff" }
+    };
+    return baseTypeStyles[type];
+  };
+  const toastStyles = {
+    ...getPositionStyles(),
+    ...getTypeStyles(),
+    minWidth: "300px",
+    maxWidth: "500px",
+    padding: "16px",
+    borderRadius: "8px",
+    boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+    display: "flex",
+    alignItems: "center",
+    gap: "12px",
+    animation: "slideIn 0.3s ease-out",
+    ...style
+  };
+  const messageStyles = {
+    flex: 1,
+    fontSize: "14px",
+    lineHeight: "1.5"
+  };
+  const buttonStyles = {
+    background: "transparent",
+    border: "1px solid currentColor",
+    color: "inherit",
+    padding: "4px 12px",
+    borderRadius: "4px",
+    fontSize: "14px",
+    cursor: "pointer",
+    transition: "opacity 0.2s"
+  };
+  const closeButtonStyles = {
+    ...buttonStyles,
+    border: "none",
+    padding: "4px 8px",
+    fontSize: "18px",
+    lineHeight: "1"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: toastId,
+      role: getAriaRole(),
+      "aria-live": getAriaPoliteness(),
+      "aria-atomic": "true",
+      className,
+      style: toastStyles,
+      onKeyDown: handleKeyDown,
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ jsx("div", { style: messageStyles, children: message }),
+        action && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              action.onClick();
+              setIsVisible(false);
+              onClose();
+            },
+            style: buttonStyles,
+            onMouseEnter: (e) => e.currentTarget.style.opacity = "0.8",
+            onMouseLeave: (e) => e.currentTarget.style.opacity = "1",
+            children: action.label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setIsVisible(false);
+              onClose();
+            },
+            "aria-label": "Close notification",
+            style: closeButtonStyles,
+            onMouseEnter: (e) => e.currentTarget.style.opacity = "0.8",
+            onMouseLeave: (e) => e.currentTarget.style.opacity = "1",
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+};
+var ToastContainer = ({
+  toasts,
+  onRemove,
+  position = "top-right"
+}) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: toasts.map((toast) => /* @__PURE__ */ jsx(
+    AccessibleToast,
+    {
+      message: toast.message,
+      type: toast.type,
+      duration: toast.duration,
+      position,
+      action: toast.action,
+      isOpen: true,
+      onClose: () => onRemove(toast.id)
+    },
+    toast.id
+  )) });
+};
+var AccessibleAccordion = ({
+  items,
+  allowMultiple = false,
+  defaultOpenItems = [],
+  onToggle,
+  className = "",
+  itemClassName = "",
+  headerClassName = "",
+  contentClassName = "",
+  style = {}
+}) => {
+  const [openItems, setOpenItems] = useState(
+    new Set(defaultOpenItems)
+  );
+  const toggleItem = (itemId) => {
+    setOpenItems((prev) => {
+      const newOpenItems = new Set(prev);
+      if (newOpenItems.has(itemId)) {
+        newOpenItems.delete(itemId);
+        onToggle?.(itemId, false);
+      } else {
+        if (!allowMultiple) {
+          newOpenItems.clear();
+        }
+        newOpenItems.add(itemId);
+        onToggle?.(itemId, true);
+      }
+      return newOpenItems;
+    });
+  };
+  const handleKeyDown = (event, itemId, index) => {
+    const item = items.find((i) => i.id === itemId);
+    if (item?.disabled) return;
+    switch (event.key) {
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        toggleItem(itemId);
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        focusNextItem(index);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        focusPreviousItem(index);
+        break;
+      case "Home":
+        event.preventDefault();
+        focusFirstItem();
+        break;
+      case "End":
+        event.preventDefault();
+        focusLastItem();
+        break;
+    }
+  };
+  const focusNextItem = (currentIndex) => {
+    const nextIndex = (currentIndex + 1) % items.length;
+    focusItemByIndex(nextIndex);
+  };
+  const focusPreviousItem = (currentIndex) => {
+    const prevIndex = currentIndex === 0 ? items.length - 1 : currentIndex - 1;
+    focusItemByIndex(prevIndex);
+  };
+  const focusFirstItem = () => {
+    focusItemByIndex(0);
+  };
+  const focusLastItem = () => {
+    focusItemByIndex(items.length - 1);
+  };
+  const focusItemByIndex = (index) => {
+    const button = document.querySelector(
+      `[data-accordion-button][data-index="${index}"]`
+    );
+    button?.focus();
+  };
+  const containerStyles = {
+    border: "1px solid #e5e7eb",
+    borderRadius: "8px",
+    overflow: "hidden",
+    ...style
+  };
+  const itemStyles = {
+    borderBottom: "1px solid #e5e7eb"
+  };
+  const headerStyles = {
+    width: "100%",
+    padding: "16px",
+    backgroundColor: "#fff",
+    border: "none",
+    textAlign: "left",
+    fontSize: "16px",
+    fontWeight: 500,
+    cursor: "pointer",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    transition: "background-color 0.2s"
+  };
+  const contentStyles = {
+    padding: "16px",
+    backgroundColor: "#f9fafb"
+  };
+  const iconStyles = (isOpen) => ({
+    transition: "transform 0.2s",
+    transform: isOpen ? "rotate(180deg)" : "rotate(0deg)"
+  });
+  return /* @__PURE__ */ jsx("div", { className, style: containerStyles, children: items.map((item, index) => {
+    const isOpen = openItems.has(item.id);
+    const buttonId = useId2(`accordion-button-${item.id}`);
+    const panelId = useId2(`accordion-panel-${item.id}`);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: itemClassName,
+        style: { ...itemStyles, borderBottom: index === items.length - 1 ? "none" : itemStyles.borderBottom },
+        children: [
+          /* @__PURE__ */ jsx("h3", { style: { margin: 0 }, children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              id: buttonId,
+              type: "button",
+              "aria-expanded": isOpen,
+              "aria-controls": panelId,
+              "aria-disabled": item.disabled,
+              disabled: item.disabled,
+              onClick: () => !item.disabled && toggleItem(item.id),
+              onKeyDown: (e) => handleKeyDown(e, item.id, index),
+              className: headerClassName,
+              style: {
+                ...headerStyles,
+                cursor: item.disabled ? "not-allowed" : "pointer",
+                opacity: item.disabled ? 0.6 : 1
+              },
+              "data-accordion-button": true,
+              "data-index": index,
+              onMouseEnter: (e) => !item.disabled && (e.currentTarget.style.backgroundColor = "#f9fafb"),
+              onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "#fff",
+              children: [
+                /* @__PURE__ */ jsx("span", { children: item.title }),
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: iconStyles(isOpen), children: "\u25BC" })
+              ]
+            }
+          ) }),
+          isOpen && /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: panelId,
+              role: "region",
+              "aria-labelledby": buttonId,
+              className: contentClassName,
+              style: contentStyles,
+              children: item.content
+            }
+          )
+        ]
+      },
+      item.id
+    );
+  }) });
+};
+var AccessibleBreadcrumb = ({
+  items,
+  separator = "/",
+  ariaLabel = "Breadcrumb",
+  className = "",
+  itemClassName = "",
+  style = {}
+}) => {
+  if (items.length === 0) return null;
+  const navStyles = {
+    ...style
+  };
+  const listStyles = {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    listStyle: "none",
+    margin: 0,
+    padding: 0,
+    flexWrap: "wrap"
+  };
+  const itemStyles = {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  };
+  const linkStyles = {
+    color: "#3b82f6",
+    textDecoration: "none",
+    transition: "color 0.2s"
+  };
+  const currentStyles = {
+    color: "#6b7280",
+    fontWeight: 500
+  };
+  const separatorStyles = {
+    color: "#9ca3af",
+    userSelect: "none"
+  };
+  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className, style: navStyles, children: /* @__PURE__ */ jsx("ol", { style: listStyles, children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    const isCurrent = isLast;
+    return /* @__PURE__ */ jsxs("li", { className: itemClassName, style: itemStyles, children: [
+      isCurrent ? /* @__PURE__ */ jsx("span", { "aria-current": "page", style: currentStyles, children: item.label }) : item.href ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: item.href,
+          style: linkStyles,
+          onMouseEnter: (e) => e.currentTarget.style.color = "#2563eb",
+          onMouseLeave: (e) => e.currentTarget.style.color = "#3b82f6",
+          children: item.label
+        }
+      ) : item.onClick ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: item.onClick,
+          style: {
+            ...linkStyles,
+            background: "transparent",
+            border: "none",
+            padding: 0,
+            cursor: "pointer",
+            font: "inherit"
+          },
+          onMouseEnter: (e) => e.currentTarget.style.color = "#2563eb",
+          onMouseLeave: (e) => e.currentTarget.style.color = "#3b82f6",
+          children: item.label
+        }
+      ) : /* @__PURE__ */ jsx("span", { style: currentStyles, children: item.label }),
+      !isLast && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: separatorStyles, children: separator })
+    ] }, index);
+  }) }) });
+};
+var AccessibleCheckboxGroup = ({
+  options,
+  value,
+  onChange,
+  label,
+  description,
+  required = false,
+  disabled = false,
+  error,
+  className = "",
+  style = {}
+}) => {
+  const descriptionId = useId2("checkbox-description");
+  const errorId = useId2("checkbox-error");
+  const handleChange = (optionValue, checked) => {
+    if (disabled) return;
+    const newValue = checked ? [...value, optionValue] : value.filter((v) => v !== optionValue);
+    onChange(newValue);
+  };
+  const fieldsetStyles = {
+    border: "1px solid #e5e7eb",
+    borderRadius: "8px",
+    padding: "16px",
+    margin: 0,
+    ...style
+  };
+  const legendStyles = {
+    fontWeight: 600,
+    fontSize: "16px",
+    marginBottom: "8px",
+    padding: "0 4px"
+  };
+  const descriptionStyles = {
+    fontSize: "14px",
+    color: "#6b7280",
+    marginBottom: "12px"
+  };
+  const optionContainerStyles = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px"
+  };
+  const optionStyles = {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "8px"
+  };
+  const checkboxStyles = {
+    width: "18px",
+    height: "18px",
+    marginTop: "2px",
+    cursor: disabled ? "not-allowed" : "pointer"
+  };
+  const labelStyles = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+    cursor: disabled ? "not-allowed" : "pointer",
+    flex: 1
+  };
+  const optionDescriptionStyles = {
+    fontSize: "13px",
+    color: "#9ca3af"
+  };
+  const errorStyles = {
+    color: "#ef4444",
+    fontSize: "14px",
+    marginTop: "8px"
+  };
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      className,
+      style: fieldsetStyles,
+      "aria-describedby": [description && descriptionId, error && errorId].filter(Boolean).join(" ") || void 0,
+      disabled,
+      children: [
+        /* @__PURE__ */ jsxs("legend", { style: legendStyles, children: [
+          label,
+          required && /* @__PURE__ */ jsxs("span", { "aria-label": "required", style: { color: "#ef4444" }, children: [
+            " ",
+            "*"
+          ] })
+        ] }),
+        description && /* @__PURE__ */ jsx("div", { id: descriptionId, style: descriptionStyles, children: description }),
+        /* @__PURE__ */ jsx("div", { style: optionContainerStyles, role: "group", children: options.map((option) => {
+          const checkboxId = useId2(`checkbox-${option.value}`);
+          const optionDescId = option.description ? useId2(`checkbox-desc-${option.value}`) : void 0;
+          const isChecked = value.includes(option.value);
+          const isDisabled = disabled || option.disabled;
+          return /* @__PURE__ */ jsxs("div", { style: optionStyles, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                id: checkboxId,
+                checked: isChecked,
+                onChange: (e) => handleChange(option.value, e.target.checked),
+                disabled: isDisabled,
+                "aria-describedby": optionDescId,
+                style: checkboxStyles
+              }
+            ),
+            /* @__PURE__ */ jsxs("label", { htmlFor: checkboxId, style: { ...labelStyles, opacity: isDisabled ? 0.6 : 1 }, children: [
+              /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: option.label }),
+              option.description && /* @__PURE__ */ jsx("span", { id: optionDescId, style: optionDescriptionStyles, children: option.description })
+            ] })
+          ] }, option.value);
+        }) }),
+        error && /* @__PURE__ */ jsx("div", { id: errorId, role: "alert", style: errorStyles, children: error })
+      ]
+    }
+  );
+};
+var AccessibleRadioGroup = ({
+  options,
+  value,
+  onChange,
+  name,
+  label,
+  description,
+  required = false,
+  disabled = false,
+  error,
+  className = "",
+  style = {}
+}) => {
+  const groupId = useId2("radio-group");
+  const descriptionId = useId2("radio-description");
+  const errorId = useId2("radio-error");
+  const handleKeyDown = (event, currentIndex) => {
+    let nextIndex = currentIndex;
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowRight":
+        event.preventDefault();
+        nextIndex = (currentIndex + 1) % options.length;
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        event.preventDefault();
+        nextIndex = currentIndex === 0 ? options.length - 1 : currentIndex - 1;
+        break;
+      default:
+        return;
+    }
+    while (options[nextIndex]?.disabled && nextIndex !== currentIndex) {
+      if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+        nextIndex = (nextIndex + 1) % options.length;
+      } else {
+        nextIndex = nextIndex === 0 ? options.length - 1 : nextIndex - 1;
+      }
+    }
+    if (!options[nextIndex]?.disabled) {
+      onChange(options[nextIndex].value);
+      const nextRadio = document.getElementById(`${groupId}-${options[nextIndex].value}`);
+      nextRadio?.focus();
+    }
+  };
+  const fieldsetStyles = {
+    border: "1px solid #e5e7eb",
+    borderRadius: "8px",
+    padding: "16px",
+    margin: 0,
+    ...style
+  };
+  const legendStyles = {
+    fontWeight: 600,
+    fontSize: "16px",
+    marginBottom: "8px",
+    padding: "0 4px"
+  };
+  const descriptionStyles = {
+    fontSize: "14px",
+    color: "#6b7280",
+    marginBottom: "12px"
+  };
+  const optionContainerStyles = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px"
+  };
+  const optionStyles = {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "8px"
+  };
+  const radioStyles = {
+    width: "18px",
+    height: "18px",
+    marginTop: "2px",
+    cursor: disabled ? "not-allowed" : "pointer"
+  };
+  const labelStyles = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+    cursor: disabled ? "not-allowed" : "pointer",
+    flex: 1
+  };
+  const optionDescriptionStyles = {
+    fontSize: "13px",
+    color: "#9ca3af"
+  };
+  const errorStyles = {
+    color: "#ef4444",
+    fontSize: "14px",
+    marginTop: "8px"
+  };
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      className,
+      style: fieldsetStyles,
+      "aria-describedby": [description && descriptionId, error && errorId].filter(Boolean).join(" ") || void 0,
+      disabled,
+      children: [
+        /* @__PURE__ */ jsxs("legend", { style: legendStyles, children: [
+          label,
+          required && /* @__PURE__ */ jsxs("span", { "aria-label": "required", style: { color: "#ef4444" }, children: [
+            " ",
+            "*"
+          ] })
+        ] }),
+        description && /* @__PURE__ */ jsx("div", { id: descriptionId, style: descriptionStyles, children: description }),
+        /* @__PURE__ */ jsx("div", { style: optionContainerStyles, role: "radiogroup", "aria-labelledby": groupId, children: options.map((option, index) => {
+          const radioId = `${groupId}-${option.value}`;
+          const optionDescId = option.description ? useId2(`radio-desc-${option.value}`) : void 0;
+          const isChecked = value === option.value;
+          const isDisabled = disabled || option.disabled;
+          return /* @__PURE__ */ jsxs("div", { style: optionStyles, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "radio",
+                id: radioId,
+                name,
+                value: option.value,
+                checked: isChecked,
+                onChange: (e) => onChange(e.target.value),
+                onKeyDown: (e) => handleKeyDown(e, index),
+                disabled: isDisabled,
+                "aria-describedby": optionDescId,
+                style: radioStyles,
+                tabIndex: isChecked ? 0 : -1
+              }
+            ),
+            /* @__PURE__ */ jsxs("label", { htmlFor: radioId, style: { ...labelStyles, opacity: isDisabled ? 0.6 : 1 }, children: [
+              /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: option.label }),
+              option.description && /* @__PURE__ */ jsx("span", { id: optionDescId, style: optionDescriptionStyles, children: option.description })
+            ] })
+          ] }, option.value);
+        }) }),
+        error && /* @__PURE__ */ jsx("div", { id: errorId, role: "alert", style: errorStyles, children: error })
+      ]
+    }
+  );
+};
+function useAriaLive(politeness = "polite") {
+  const [message, setMessage] = useState("");
+  const timeoutRef = useRef(void 0);
+  const clearMessage = () => {
+    setMessage("");
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+  };
+  const setMessageWithClear = (newMessage) => {
+    setMessage(newMessage);
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setMessage("");
+    }, 5e3);
+  };
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return {
+    setMessage: setMessageWithClear,
+    clearMessage,
+    message,
+    liveRegionProps: {
+      role: politeness === "assertive" ? "alert" : "status",
+      "aria-live": politeness,
+      "aria-atomic": "true",
+      "aria-relevant": "additions text"
+    }
+  };
+}
+var AccessibleProgress = ({
+  value,
+  max = 100,
+  min = 0,
+  label,
+  variant = "linear",
+  showValue = false,
+  announceChanges = false,
+  className = "",
+  style = {}
+}) => {
+  const progressId = useId2("progress");
+  const labelId = useId2("progress-label");
+  const { setMessage, liveRegionProps, message } = useAriaLive("polite");
+  const isIndeterminate = value === void 0;
+  const percentage = isIndeterminate ? 0 : Math.round((value - min) / (max - min) * 100);
+  React4.useEffect(() => {
+    if (announceChanges && !isIndeterminate && value !== void 0) {
+      const milestones = [25, 50, 75, 100];
+      if (milestones.includes(percentage)) {
+        setMessage(`${label}: ${percentage}% complete`);
+      }
+    }
+  }, [percentage, announceChanges, isIndeterminate, value, label, setMessage]);
+  const containerStyles = {
+    display: "inline-flex",
+    flexDirection: variant === "linear" ? "column" : "row",
+    alignItems: variant === "linear" ? "stretch" : "center",
+    gap: variant === "linear" ? "8px" : "12px",
+    width: variant === "linear" ? "100%" : "auto",
+    ...style
+  };
+  const labelContainerStyles = {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    fontSize: "14px",
+    fontWeight: 500
+  };
+  const renderLinearProgress = () => {
+    const trackStyles = {
+      width: "100%",
+      height: "8px",
+      backgroundColor: "#e5e7eb",
+      borderRadius: "4px",
+      overflow: "hidden",
+      position: "relative"
+    };
+    const barStyles = {
+      height: "100%",
+      backgroundColor: "#3b82f6",
+      transition: isIndeterminate ? "none" : "width 0.3s ease",
+      width: isIndeterminate ? "30%" : `${percentage}%`,
+      animation: isIndeterminate ? "indeterminateLinear 1.5s infinite ease-in-out" : "none"
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("style", { children: `
+            @keyframes indeterminateLinear {
+              0% { transform: translateX(-100%); }
+              100% { transform: translateX(400%); }
+            }
+          ` }),
+      /* @__PURE__ */ jsxs("div", { style: labelContainerStyles, children: [
+        /* @__PURE__ */ jsx("span", { id: labelId, children: label }),
+        showValue && !isIndeterminate && /* @__PURE__ */ jsxs("span", { children: [
+          percentage,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: trackStyles, children: /* @__PURE__ */ jsx("div", { style: barStyles }) })
+    ] });
+  };
+  const renderCircularProgress = () => {
+    const size = 48;
+    const strokeWidth = 4;
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = isIndeterminate ? circumference * 0.25 : circumference - percentage / 100 * circumference;
+    const svgStyles = {
+      transform: "rotate(-90deg)",
+      animation: isIndeterminate ? "spin 1s linear infinite" : "none"
+    };
+    const circleStyles = {
+      transition: isIndeterminate ? "none" : "stroke-dashoffset 0.3s ease"
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("style", { children: `
+            @keyframes spin {
+              from { transform: rotate(-90deg); }
+              to { transform: rotate(270deg); }
+            }
+          ` }),
+      /* @__PURE__ */ jsxs("svg", { width: size, height: size, style: svgStyles, children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: size / 2,
+            cy: size / 2,
+            r: radius,
+            fill: "none",
+            stroke: "#e5e7eb",
+            strokeWidth
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: size / 2,
+            cy: size / 2,
+            r: radius,
+            fill: "none",
+            stroke: "#3b82f6",
+            strokeWidth,
+            strokeDasharray: circumference,
+            strokeDashoffset: offset,
+            strokeLinecap: "round",
+            style: circleStyles
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
+        /* @__PURE__ */ jsx("span", { id: labelId, style: { fontSize: "14px", fontWeight: 500 }, children: label }),
+        showValue && !isIndeterminate && /* @__PURE__ */ jsxs("span", { style: { fontSize: "12px", color: "#6b7280" }, children: [
+          percentage,
+          "%"
+        ] })
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs("div", { className, style: containerStyles, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: progressId,
+        role: "progressbar",
+        "aria-labelledby": labelId,
+        "aria-valuenow": isIndeterminate ? void 0 : value,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuetext": isIndeterminate ? "Loading..." : `${percentage}%`,
+        children: variant === "linear" ? renderLinearProgress() : renderCircularProgress()
+      }
+    ),
+    announceChanges && /* @__PURE__ */ jsx("div", { ...liveRegionProps, style: { position: "absolute", left: "-10000px", width: "1px", height: "1px", overflow: "hidden" }, children: message })
+  ] });
+};
+var SkipLinks = ({
+  links,
+  className = "",
+  style = {},
+  linkStyle = {}
+}) => {
+  if (links.length === 0) return null;
+  const containerStyles = {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    zIndex: 1e4,
+    ...style
+  };
+  const listStyles = {
+    listStyle: "none",
+    margin: 0,
+    padding: 0,
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px"
+  };
+  const defaultLinkStyles = {
+    position: "absolute",
+    left: "-10000px",
+    top: "auto",
+    width: "1px",
+    height: "1px",
+    overflow: "hidden",
+    display: "block",
+    padding: "12px 24px",
+    backgroundColor: "#000",
+    color: "#fff",
+    textDecoration: "none",
+    fontWeight: 600,
+    fontSize: "14px",
+    borderRadius: "0 0 4px 0",
+    transition: "none",
+    ...linkStyle
+  };
+  const focusStyles = {
+    position: "static",
+    width: "auto",
+    height: "auto",
+    overflow: "visible",
+    left: "auto"
+  };
+  const handleClick = (e, href) => {
+    e.preventDefault();
+    const target = document.getElementById(href);
+    if (target) {
+      target.scrollIntoView({ behavior: "smooth", block: "start" });
+      const originalTabIndex = target.getAttribute("tabindex");
+      if (!target.hasAttribute("tabindex")) {
+        target.setAttribute("tabindex", "-1");
+      }
+      target.focus();
+      if (originalTabIndex === null) {
+        setTimeout(() => {
+          target.removeAttribute("tabindex");
+        }, 100);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "Skip navigation",
+      className,
+      style: containerStyles,
+      children: /* @__PURE__ */ jsx("ul", { style: listStyles, children: links.map((link, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: `#${link.href}`,
+          onClick: (e) => handleClick(e, link.href),
+          style: defaultLinkStyles,
+          onFocus: (e) => {
+            Object.assign(e.currentTarget.style, focusStyles);
+          },
+          onBlur: (e) => {
+            Object.assign(e.currentTarget.style, defaultLinkStyles);
+          },
+          children: link.label
+        }
+      ) }, index)) })
+    }
+  );
+};
+var AccessiblePagination = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  siblingCount = 1,
+  showFirstLast = false,
+  ariaLabel = "Pagination",
+  className = "",
+  style = {}
+}) => {
+  if (totalPages <= 1) return null;
+  const generatePageNumbers = () => {
+    const pages2 = [];
+    pages2.push(1);
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 2);
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages - 1);
+    if (leftSiblingIndex > 2) {
+      pages2.push("...");
+    }
+    for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
+      pages2.push(i);
+    }
+    if (rightSiblingIndex < totalPages - 1) {
+      pages2.push("...");
+    }
+    if (totalPages > 1) {
+      pages2.push(totalPages);
+    }
+    return pages2;
+  };
+  const pages = generatePageNumbers();
+  const navStyles = {
+    ...style
+  };
+  const listStyles = {
+    display: "flex",
+    alignItems: "center",
+    gap: "4px",
+    listStyle: "none",
+    margin: 0,
+    padding: 0
+  };
+  const buttonBaseStyles = {
+    minWidth: "40px",
+    height: "40px",
+    padding: "8px 12px",
+    border: "1px solid #e5e7eb",
+    backgroundColor: "#fff",
+    borderRadius: "6px",
+    fontSize: "14px",
+    fontWeight: 500,
+    cursor: "pointer",
+    transition: "all 0.2s",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  };
+  const activeButtonStyles = {
+    ...buttonBaseStyles,
+    backgroundColor: "#3b82f6",
+    color: "#fff",
+    borderColor: "#3b82f6"
+  };
+  const disabledButtonStyles = {
+    ...buttonBaseStyles,
+    opacity: 0.5,
+    cursor: "not-allowed"
+  };
+  const ellipsisStyles = {
+    minWidth: "40px",
+    height: "40px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "#9ca3af"
+  };
+  const handlePageChange = (page) => {
+    if (page >= 1 && page <= totalPages && page !== currentPage) {
+      onPageChange(page);
+    }
+  };
+  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className, style: navStyles, children: /* @__PURE__ */ jsxs("ul", { style: listStyles, children: [
+    showFirstLast && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => handlePageChange(1),
+        disabled: currentPage === 1,
+        "aria-label": "Go to first page",
+        style: currentPage === 1 ? disabledButtonStyles : buttonBaseStyles,
+        onMouseEnter: (e) => {
+          if (currentPage !== 1) {
+            e.currentTarget.style.backgroundColor = "#f3f4f6";
+          }
+        },
+        onMouseLeave: (e) => {
+          if (currentPage !== 1) {
+            e.currentTarget.style.backgroundColor = "#fff";
+          }
+        },
+        children: "\xAB\xAB"
+      }
+    ) }),
+    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => handlePageChange(currentPage - 1),
+        disabled: currentPage === 1,
+        "aria-label": "Go to previous page",
+        style: currentPage === 1 ? disabledButtonStyles : buttonBaseStyles,
+        onMouseEnter: (e) => {
+          if (currentPage !== 1) {
+            e.currentTarget.style.backgroundColor = "#f3f4f6";
+          }
+        },
+        onMouseLeave: (e) => {
+          if (currentPage !== 1) {
+            e.currentTarget.style.backgroundColor = "#fff";
+          }
+        },
+        children: "\xAB"
+      }
+    ) }),
+    pages.map((page, index) => {
+      if (page === "...") {
+        return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("span", { style: ellipsisStyles, "aria-hidden": "true", children: "\u2026" }) }, `ellipsis-${index}`);
+      }
+      const pageNumber = page;
+      const isActive = pageNumber === currentPage;
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => handlePageChange(pageNumber),
+          "aria-label": `Go to page ${pageNumber}`,
+          "aria-current": isActive ? "page" : void 0,
+          style: isActive ? activeButtonStyles : buttonBaseStyles,
+          onMouseEnter: (e) => {
+            if (!isActive) {
+              e.currentTarget.style.backgroundColor = "#f3f4f6";
+            }
+          },
+          onMouseLeave: (e) => {
+            if (!isActive) {
+              e.currentTarget.style.backgroundColor = "#fff";
+            }
+          },
+          children: pageNumber
+        }
+      ) }, pageNumber);
+    }),
+    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => handlePageChange(currentPage + 1),
+        disabled: currentPage === totalPages,
+        "aria-label": "Go to next page",
+        style: currentPage === totalPages ? disabledButtonStyles : buttonBaseStyles,
+        onMouseEnter: (e) => {
+          if (currentPage !== totalPages) {
+            e.currentTarget.style.backgroundColor = "#f3f4f6";
+          }
+        },
+        onMouseLeave: (e) => {
+          if (currentPage !== totalPages) {
+            e.currentTarget.style.backgroundColor = "#fff";
+          }
+        },
+        children: "\xBB"
+      }
+    ) }),
+    showFirstLast && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => handlePageChange(totalPages),
+        disabled: currentPage === totalPages,
+        "aria-label": "Go to last page",
+        style: currentPage === totalPages ? disabledButtonStyles : buttonBaseStyles,
+        onMouseEnter: (e) => {
+          if (currentPage !== totalPages) {
+            e.currentTarget.style.backgroundColor = "#f3f4f6";
+          }
+        },
+        onMouseLeave: (e) => {
+          if (currentPage !== totalPages) {
+            e.currentTarget.style.backgroundColor = "#fff";
+          }
+        },
+        children: "\xBB\xBB"
+      }
+    ) })
+  ] }) });
+};
+function useClickOutside(ref, handler, enabled = true) {
+  useEffect(() => {
+    if (!enabled) return;
+    const handleClickOutside = (event) => {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("touchstart", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
+    };
+  }, [ref, handler, enabled]);
+}
+function AccessibleCombobox({
+  options,
+  value,
+  onChange,
+  label,
+  placeholder = "Select an option",
+  searchable = false,
+  required = false,
+  disabled = false,
+  error,
+  className = "",
+  style = {}
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [highlightedIndex, setHighlightedIndex] = useState(0);
+  const comboboxId = useId2("combobox");
+  const labelId = useId2("combobox-label");
+  const listboxId = useId2("combobox-listbox");
+  const errorId = useId2("combobox-error");
+  const containerRef = useRef(null);
+  const inputRef = useRef(null);
+  const listboxRef = useRef(null);
+  useClickOutside(containerRef, () => setIsOpen(false), isOpen);
+  const filteredOptions = searchable ? options.filter(
+    (option) => option.label.toLowerCase().includes(searchQuery.toLowerCase())
+  ) : options;
+  const selectedOption = options.find((opt) => opt.value === value);
+  useEffect(() => {
+    if (isOpen && listboxRef.current) {
+      const highlightedElement = listboxRef.current.querySelector(
+        `[data-index="${highlightedIndex}"]`
+      );
+      highlightedElement?.scrollIntoView({ block: "nearest" });
+    }
+  }, [highlightedIndex, isOpen]);
+  const handleToggle = () => {
+    if (disabled) return;
+    setIsOpen(!isOpen);
+    if (!isOpen) {
+      setSearchQuery("");
+      setHighlightedIndex(0);
+      setTimeout(() => inputRef.current?.focus(), 0);
+    }
+  };
+  const handleSelect = (option) => {
+    if (option.disabled) return;
+    onChange(option.value);
+    setIsOpen(false);
+    setSearchQuery("");
+    inputRef.current?.blur();
+  };
+  const handleKeyDown = (event) => {
+    if (disabled) return;
+    switch (event.key) {
+      case "Enter":
+        event.preventDefault();
+        if (isOpen && filteredOptions[highlightedIndex]) {
+          handleSelect(filteredOptions[highlightedIndex]);
+        } else {
+          setIsOpen(!isOpen);
+        }
+        break;
+      case " ":
+        if (!searchable || !isOpen) {
+          event.preventDefault();
+          setIsOpen(!isOpen);
+        }
+        break;
+      case "Escape":
+        event.preventDefault();
+        setIsOpen(false);
+        setSearchQuery("");
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+        } else {
+          setHighlightedIndex(
+            (prev) => prev < filteredOptions.length - 1 ? prev + 1 : prev
+          );
+        }
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (isOpen) {
+          setHighlightedIndex((prev) => prev > 0 ? prev - 1 : prev);
+        }
+        break;
+      case "Home":
+        if (isOpen) {
+          event.preventDefault();
+          setHighlightedIndex(0);
+        }
+        break;
+      case "End":
+        if (isOpen) {
+          event.preventDefault();
+          setHighlightedIndex(filteredOptions.length - 1);
+        }
+        break;
+    }
+  };
+  const containerStyles = {
+    position: "relative",
+    width: "100%",
+    ...style
+  };
+  const labelStyles = {
+    display: "block",
+    fontWeight: 600,
+    fontSize: "14px",
+    marginBottom: "6px"
+  };
+  const inputContainerStyles = {
+    position: "relative",
+    width: "100%"
+  };
+  const inputStyles = {
+    width: "100%",
+    padding: "10px 36px 10px 12px",
+    border: `1px solid ${error ? "#ef4444" : "#e5e7eb"}`,
+    borderRadius: "6px",
+    fontSize: "14px",
+    backgroundColor: disabled ? "#f9fafb" : "#fff",
+    cursor: disabled ? "not-allowed" : "pointer",
+    outline: "none"
+  };
+  const iconStyles = {
+    position: "absolute",
+    right: "12px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    pointerEvents: "none",
+    transition: "transform 0.2s"
+  };
+  const listboxStyles = {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    right: 0,
+    marginTop: "4px",
+    maxHeight: "240px",
+    overflowY: "auto",
+    backgroundColor: "#fff",
+    border: "1px solid #e5e7eb",
+    borderRadius: "6px",
+    boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+    zIndex: 1e3,
+    listStyle: "none",
+    margin: 0,
+    padding: "4px"
+  };
+  const optionStyles = (isHighlighted, isSelected, isDisabled) => ({
+    padding: "10px 12px",
+    cursor: isDisabled ? "not-allowed" : "pointer",
+    backgroundColor: isHighlighted ? "#f3f4f6" : isSelected ? "#e5e7eb" : "transparent",
+    borderRadius: "4px",
+    fontSize: "14px",
+    opacity: isDisabled ? 0.5 : 1
+  });
+  const errorStyles = {
+    marginTop: "6px",
+    fontSize: "13px",
+    color: "#ef4444"
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className, style: containerStyles, children: [
+    /* @__PURE__ */ jsxs("label", { id: labelId, htmlFor: comboboxId, style: labelStyles, children: [
+      label,
+      required && /* @__PURE__ */ jsxs("span", { "aria-label": "required", style: { color: "#ef4444" }, children: [
+        " ",
+        "*"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: inputContainerStyles, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          id: comboboxId,
+          type: "text",
+          role: "combobox",
+          "aria-labelledby": labelId,
+          "aria-controls": listboxId,
+          "aria-expanded": isOpen,
+          "aria-autocomplete": searchable ? "list" : "none",
+          "aria-activedescendant": isOpen && filteredOptions[highlightedIndex] ? `${listboxId}-option-${highlightedIndex}` : void 0,
+          "aria-describedby": error ? errorId : void 0,
+          "aria-required": required,
+          "aria-invalid": !!error,
+          disabled,
+          value: searchable && isOpen ? searchQuery : selectedOption?.label || "",
+          onChange: (e) => {
+            if (searchable) {
+              setSearchQuery(e.target.value);
+              setHighlightedIndex(0);
+              if (!isOpen) setIsOpen(true);
+            }
+          },
+          onKeyDown: handleKeyDown,
+          onClick: handleToggle,
+          placeholder,
+          style: inputStyles,
+          readOnly: !searchable
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          style: {
+            ...iconStyles,
+            transform: `translateY(-50%) rotate(${isOpen ? "180deg" : "0deg"})`
+          },
+          children: "\u25BC"
+        }
+      )
+    ] }),
+    isOpen && /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref: listboxRef,
+        id: listboxId,
+        role: "listbox",
+        "aria-labelledby": labelId,
+        style: listboxStyles,
+        children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("li", { role: "option", "aria-disabled": "true", style: { padding: "10px 12px", color: "#9ca3af" }, children: "No options found" }) : filteredOptions.map((option, index) => {
+          const isHighlighted = index === highlightedIndex;
+          const isSelected = option.value === value;
+          return /* @__PURE__ */ jsx(
+            "li",
+            {
+              id: `${listboxId}-option-${index}`,
+              role: "option",
+              "aria-selected": isSelected,
+              "aria-disabled": option.disabled,
+              "data-index": index,
+              onClick: () => handleSelect(option),
+              onMouseEnter: () => setHighlightedIndex(index),
+              style: optionStyles(isHighlighted, isSelected, !!option.disabled),
+              children: option.label
+            },
+            String(option.value)
+          );
+        })
+      }
+    ),
+    error && /* @__PURE__ */ jsx("div", { id: errorId, role: "alert", style: errorStyles, children: error })
+  ] });
+}
+var AccessibleDatePicker = ({
+  value,
+  onChange,
+  label,
+  minDate,
+  maxDate,
+  disabledDates = [],
+  required = false,
+  disabled = false,
+  error,
+  dateFormat = "MM/DD/YYYY",
+  className = "",
+  style = {}
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [viewDate, setViewDate] = useState(value || /* @__PURE__ */ new Date());
+  const [focusedDate, setFocusedDate] = useState(null);
+  const pickerId = useId2("datepicker");
+  const labelId = useId2("datepicker-label");
+  const calendarId = useId2("datepicker-calendar");
+  const errorId = useId2("datepicker-error");
+  const containerRef = useRef(null);
+  const buttonRef = useRef(null);
+  useClickOutside(containerRef, () => setIsOpen(false), isOpen);
+  const formatDate = (date) => {
+    if (!date) return "";
+    const day = String(date.getDate()).padStart(2, "0");
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const year = date.getFullYear();
+    switch (dateFormat) {
+      case "DD/MM/YYYY":
+        return `${day}/${month}/${year}`;
+      case "YYYY-MM-DD":
+        return `${year}-${month}-${day}`;
+      case "MM/DD/YYYY":
+      default:
+        return `${month}/${day}/${year}`;
+    }
+  };
+  const isSameDay = (date1, date2) => {
+    return date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
+  };
+  const isDateDisabled = (date) => {
+    if (minDate && date < minDate) return true;
+    if (maxDate && date > maxDate) return true;
+    return disabledDates.some((disabledDate) => isSameDay(date, disabledDate));
+  };
+  const getDaysInMonth = (date) => {
+    const year = date.getFullYear();
+    const month = date.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    const days2 = [];
+    const startDayOfWeek = firstDay.getDay();
+    for (let i = 0; i < startDayOfWeek; i++) {
+      days2.push(new Date(year, month, -startDayOfWeek + i + 1));
+    }
+    for (let day = 1; day <= lastDay.getDate(); day++) {
+      days2.push(new Date(year, month, day));
+    }
+    return days2;
+  };
+  const handlePreviousMonth = () => {
+    setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1));
+  };
+  const handleNextMonth = () => {
+    setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1));
+  };
+  const handleDateSelect = (date) => {
+    if (isDateDisabled(date)) return;
+    onChange(date);
+    setIsOpen(false);
+    buttonRef.current?.focus();
+  };
+  const handleKeyDown = (event, date) => {
+    let nextDate = null;
+    switch (event.key) {
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        handleDateSelect(date);
+        return;
+      case "Escape":
+        event.preventDefault();
+        setIsOpen(false);
+        buttonRef.current?.focus();
+        return;
+      case "ArrowLeft":
+        event.preventDefault();
+        nextDate = new Date(date);
+        nextDate.setDate(date.getDate() - 1);
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        nextDate = new Date(date);
+        nextDate.setDate(date.getDate() + 1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        nextDate = new Date(date);
+        nextDate.setDate(date.getDate() - 7);
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        nextDate = new Date(date);
+        nextDate.setDate(date.getDate() + 7);
+        break;
+      case "Home":
+        event.preventDefault();
+        nextDate = new Date(date.getFullYear(), date.getMonth(), 1);
+        break;
+      case "End":
+        event.preventDefault();
+        nextDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+        break;
+      case "PageUp":
+        event.preventDefault();
+        nextDate = new Date(date.getFullYear(), date.getMonth() - 1, date.getDate());
+        break;
+      case "PageDown":
+        event.preventDefault();
+        nextDate = new Date(date.getFullYear(), date.getMonth() + 1, date.getDate());
+        break;
+    }
+    if (nextDate) {
+      setFocusedDate(nextDate);
+      if (nextDate.getMonth() !== viewDate.getMonth()) {
+        setViewDate(new Date(nextDate.getFullYear(), nextDate.getMonth(), 1));
+      }
+    }
+  };
+  const days = getDaysInMonth(viewDate);
+  const monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ];
+  const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  const containerStyles = {
+    position: "relative",
+    width: "100%",
+    ...style
+  };
+  const labelStyles = {
+    display: "block",
+    fontWeight: 600,
+    fontSize: "14px",
+    marginBottom: "6px"
+  };
+  const buttonStyles = {
+    width: "100%",
+    padding: "10px 36px 10px 12px",
+    border: `1px solid ${error ? "#ef4444" : "#e5e7eb"}`,
+    borderRadius: "6px",
+    fontSize: "14px",
+    backgroundColor: disabled ? "#f9fafb" : "#fff",
+    cursor: disabled ? "not-allowed" : "pointer",
+    textAlign: "left",
+    position: "relative"
+  };
+  const calendarStyles = {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    marginTop: "4px",
+    backgroundColor: "#fff",
+    border: "1px solid #e5e7eb",
+    borderRadius: "8px",
+    boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+    padding: "16px",
+    zIndex: 1e3,
+    minWidth: "280px"
+  };
+  const headerStyles = {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "12px"
+  };
+  const navButtonStyles = {
+    padding: "6px 12px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "4px",
+    backgroundColor: "#fff",
+    cursor: "pointer",
+    fontSize: "14px"
+  };
+  const gridStyles = {
+    display: "grid",
+    gridTemplateColumns: "repeat(7, 1fr)",
+    gap: "4px"
+  };
+  const dayHeaderStyles = {
+    textAlign: "center",
+    fontWeight: 600,
+    fontSize: "12px",
+    padding: "8px 0",
+    color: "#6b7280"
+  };
+  const dayCellStyles = (_date, isCurrentMonth, isSelected, isToday, isDisabled) => ({
+    padding: "8px",
+    border: "none",
+    borderRadius: "4px",
+    fontSize: "14px",
+    cursor: isDisabled ? "not-allowed" : "pointer",
+    backgroundColor: isSelected ? "#3b82f6" : isToday ? "#e5e7eb" : "transparent",
+    color: isSelected ? "#fff" : !isCurrentMonth ? "#9ca3af" : isDisabled ? "#d1d5db" : "#1f2937",
+    fontWeight: isSelected || isToday ? 600 : 400,
+    opacity: isDisabled ? 0.5 : 1
+  });
+  const errorStyles = {
+    marginTop: "6px",
+    fontSize: "13px",
+    color: "#ef4444"
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className, style: containerStyles, children: [
+    /* @__PURE__ */ jsxs("label", { id: labelId, htmlFor: pickerId, style: labelStyles, children: [
+      label,
+      required && /* @__PURE__ */ jsxs("span", { "aria-label": "required", style: { color: "#ef4444" }, children: [
+        " ",
+        "*"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: buttonRef,
+        id: pickerId,
+        type: "button",
+        "aria-labelledby": labelId,
+        "aria-expanded": isOpen,
+        "aria-controls": calendarId,
+        "aria-describedby": error ? errorId : void 0,
+        "aria-required": required,
+        "aria-invalid": !!error,
+        disabled,
+        onClick: () => !disabled && setIsOpen(!isOpen),
+        style: buttonStyles,
+        children: [
+          value ? formatDate(value) : "Select date",
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              style: {
+                position: "absolute",
+                right: "12px",
+                top: "50%",
+                transform: "translateY(-50%)"
+              },
+              children: "\u{1F4C5}"
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs("div", { id: calendarId, role: "dialog", "aria-modal": "false", "aria-label": "Calendar", style: calendarStyles, children: [
+      /* @__PURE__ */ jsxs("div", { style: headerStyles, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handlePreviousMonth,
+            "aria-label": "Previous month",
+            style: navButtonStyles,
+            children: "\u2039"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600 }, children: [
+          monthNames[viewDate.getMonth()],
+          " ",
+          viewDate.getFullYear()
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleNextMonth,
+            "aria-label": "Next month",
+            style: navButtonStyles,
+            children: "\u203A"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { role: "grid", "aria-labelledby": labelId, style: gridStyles, children: [
+        dayNames.map((day) => /* @__PURE__ */ jsx("div", { role: "columnheader", style: dayHeaderStyles, children: day }, day)),
+        days.map((cellDate, index) => {
+          const isCurrentMonth = cellDate.getMonth() === viewDate.getMonth();
+          const isSelected = value ? isSameDay(cellDate, value) : false;
+          const isToday = isSameDay(cellDate, /* @__PURE__ */ new Date());
+          const isDisabled = isDateDisabled(cellDate);
+          const isFocused = focusedDate ? isSameDay(cellDate, focusedDate) : false;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "gridcell",
+              "aria-label": formatDate(cellDate),
+              "aria-selected": isSelected,
+              "aria-disabled": isDisabled,
+              disabled: isDisabled,
+              tabIndex: isFocused || isSelected && !focusedDate ? 0 : -1,
+              onClick: () => handleDateSelect(cellDate),
+              onKeyDown: (e) => handleKeyDown(e, cellDate),
+              style: dayCellStyles(cellDate, isCurrentMonth, isSelected, isToday, isDisabled),
+              onMouseEnter: (e) => {
+                if (!isDisabled && !isSelected) {
+                  e.currentTarget.style.backgroundColor = "#f3f4f6";
+                }
+              },
+              onMouseLeave: (e) => {
+                if (!isDisabled && !isSelected) {
+                  e.currentTarget.style.backgroundColor = "transparent";
+                }
+              },
+              children: cellDate.getDate()
+            },
+            index
+          );
+        })
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx("div", { id: errorId, role: "alert", style: errorStyles, children: error })
+  ] });
+};
+function AccessibleTreeView({
+  data,
+  onSelect,
+  expandedNodes: controlledExpanded,
+  onToggle,
+  multiSelect = false,
+  selectedNodes: controlledSelected = [],
+  ariaLabel = "Tree navigation",
+  className = "",
+  style = {}
+}) {
+  const [internalExpanded, setInternalExpanded] = useState(/* @__PURE__ */ new Set());
+  const [internalSelected, setInternalSelected] = useState(/* @__PURE__ */ new Set());
+  const treeId = useId2("tree");
+  const expandedSet = controlledExpanded ? new Set(controlledExpanded) : internalExpanded;
+  const selectedSet = new Set(controlledSelected.length > 0 ? controlledSelected : Array.from(internalSelected));
+  const toggleNode = (nodeId) => {
+    const isExpanded = expandedSet.has(nodeId);
+    if (controlledExpanded) {
+      onToggle?.(nodeId, !isExpanded);
+    } else {
+      setInternalExpanded((prev) => {
+        const next = new Set(prev);
+        if (isExpanded) {
+          next.delete(nodeId);
+        } else {
+          next.add(nodeId);
+        }
+        return next;
+      });
+    }
+  };
+  const selectNode = (node) => {
+    if (node.disabled) return;
+    if (multiSelect) {
+      setInternalSelected((prev) => {
+        const next = new Set(prev);
+        if (next.has(node.id)) {
+          next.delete(node.id);
+        } else {
+          next.add(node.id);
+        }
+        return next;
+      });
+    } else {
+      setInternalSelected(/* @__PURE__ */ new Set([node.id]));
+    }
+    onSelect?.(node);
+  };
+  const getAllNodes = (nodes) => {
+    const result = [];
+    const traverse = (nodeList) => {
+      for (const node of nodeList) {
+        result.push(node);
+        if (node.children && expandedSet.has(node.id)) {
+          traverse(node.children);
+        }
+      }
+    };
+    traverse(nodes);
+    return result;
+  };
+  const handleKeyDown = (event, node, allNodes2) => {
+    const currentIndex = allNodes2.findIndex((n) => n.id === node.id);
+    switch (event.key) {
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        selectNode(node);
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        if (currentIndex < allNodes2.length - 1) {
+          const nextNode = allNodes2[currentIndex + 1];
+          document.getElementById(`${treeId}-${nextNode.id}`)?.focus();
+        }
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (currentIndex > 0) {
+          const prevNode = allNodes2[currentIndex - 1];
+          document.getElementById(`${treeId}-${prevNode.id}`)?.focus();
+        }
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        if (node.children && node.children.length > 0) {
+          if (!expandedSet.has(node.id)) {
+            toggleNode(node.id);
+          } else if (node.children[0]) {
+            document.getElementById(`${treeId}-${node.children[0].id}`)?.focus();
+          }
+        }
+        break;
+      case "ArrowLeft":
+        event.preventDefault();
+        if (node.children && expandedSet.has(node.id)) {
+          toggleNode(node.id);
+        }
+        break;
+      case "Home":
+        event.preventDefault();
+        if (allNodes2[0]) {
+          document.getElementById(`${treeId}-${allNodes2[0].id}`)?.focus();
+        }
+        break;
+      case "End":
+        event.preventDefault();
+        if (allNodes2[allNodes2.length - 1]) {
+          document.getElementById(`${treeId}-${allNodes2[allNodes2.length - 1].id}`)?.focus();
+        }
+        break;
+    }
+  };
+  const renderNode = (node, level, allNodes2) => {
+    const hasChildren = node.children && node.children.length > 0;
+    const isExpanded = expandedSet.has(node.id);
+    const isSelected = selectedSet.has(node.id);
+    const nodeStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      padding: "8px 12px",
+      paddingLeft: `${12 + level * 24}px`,
+      cursor: node.disabled ? "not-allowed" : "pointer",
+      backgroundColor: isSelected ? "#e5e7eb" : "transparent",
+      borderRadius: "4px",
+      opacity: node.disabled ? 0.5 : 1
+    };
+    const iconStyles = {
+      width: "16px",
+      textAlign: "center",
+      transition: "transform 0.2s",
+      transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)"
+    };
+    return /* @__PURE__ */ jsxs(React4.Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          id: `${treeId}-${node.id}`,
+          role: "treeitem",
+          "aria-expanded": hasChildren ? isExpanded : void 0,
+          "aria-selected": isSelected,
+          "aria-level": level + 1,
+          "aria-disabled": node.disabled,
+          tabIndex: isSelected ? 0 : -1,
+          onClick: () => {
+            if (!node.disabled) {
+              if (hasChildren) {
+                toggleNode(node.id);
+              }
+              selectNode(node);
+            }
+          },
+          onKeyDown: (e) => handleKeyDown(e, node, allNodes2),
+          style: nodeStyles,
+          onMouseEnter: (e) => {
+            if (!node.disabled && !isSelected) {
+              e.currentTarget.style.backgroundColor = "#f3f4f6";
+            }
+          },
+          onMouseLeave: (e) => {
+            if (!node.disabled && !isSelected) {
+              e.currentTarget.style.backgroundColor = "transparent";
+            }
+          },
+          children: [
+            hasChildren ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: iconStyles, children: "\u25B6" }) : /* @__PURE__ */ jsx("span", { style: { width: "16px" } }),
+            /* @__PURE__ */ jsx("span", { children: node.label })
+          ]
+        }
+      ),
+      hasChildren && isExpanded && /* @__PURE__ */ jsx("div", { role: "group", children: node.children.map((child) => renderNode(child, level + 1, allNodes2)) })
+    ] }, node.id);
+  };
+  const allNodes = getAllNodes(data);
+  const containerStyles = {
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: treeId,
+      role: "tree",
+      "aria-label": ariaLabel,
+      "aria-multiselectable": multiSelect,
+      className,
+      style: containerStyles,
+      children: data.map((node) => renderNode(node, 0, allNodes))
+    }
+  );
+}
+function AccessibleTable({
+  data,
+  columns,
+  caption,
+  selectable = false,
+  selectedRows: controlledSelected = [],
+  onSelectionChange,
+  getRowKey = (_, index) => String(index),
+  sortable = false,
+  sortColumn: controlledSortColumn,
+  sortDirection: controlledSortDirection,
+  onSort,
+  className = "",
+  style = {}
+}) {
+  const [internalSelected, setInternalSelected] = useState(/* @__PURE__ */ new Set());
+  const [internalSortColumn, setInternalSortColumn] = useState(null);
+  const [internalSortDirection, setInternalSortDirection] = useState(null);
+  const tableId = useId2("table");
+  const selectedSet = new Set(controlledSelected.length > 0 ? controlledSelected : Array.from(internalSelected));
+  const sortColumn = controlledSortColumn !== void 0 ? controlledSortColumn : internalSortColumn;
+  const sortDirection = controlledSortDirection !== void 0 ? controlledSortDirection : internalSortDirection;
+  const handleSelectAll = (checked) => {
+    if (checked) {
+      const allIndices = data.map((_, index) => index);
+      setInternalSelected(new Set(allIndices));
+      onSelectionChange?.(allIndices);
+    } else {
+      setInternalSelected(/* @__PURE__ */ new Set());
+      onSelectionChange?.([]);
+    }
+  };
+  const handleSelectRow = (index, checked) => {
+    const newSelected = new Set(selectedSet);
+    if (checked) {
+      newSelected.add(index);
+    } else {
+      newSelected.delete(index);
+    }
+    setInternalSelected(newSelected);
+    onSelectionChange?.(Array.from(newSelected));
+  };
+  const handleSort = (column) => {
+    const col = columns.find((c) => c.key === column);
+    if (!col?.sortable && !sortable) return;
+    let newDirection = "asc";
+    if (sortColumn === column) {
+      if (sortDirection === "asc") {
+        newDirection = "desc";
+      } else if (sortDirection === "desc") {
+        newDirection = null;
+      }
+    }
+    if (onSort) {
+      onSort(column, newDirection);
+    } else {
+      setInternalSortColumn(newDirection ? column : null);
+      setInternalSortDirection(newDirection);
+    }
+  };
+  const isAllSelected = data.length > 0 && selectedSet.size === data.length;
+  const isSomeSelected = selectedSet.size > 0 && selectedSet.size < data.length;
+  const tableStyles = {
+    width: "100%",
+    borderCollapse: "collapse",
+    fontSize: "14px",
+    ...style
+  };
+  const thStyles = {
+    padding: "12px",
+    textAlign: "left",
+    borderBottom: "2px solid #e5e7eb",
+    fontWeight: 600,
+    backgroundColor: "#f9fafb"
+  };
+  const sortButtonStyles = {
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    font: "inherit",
+    fontWeight: 600,
+    padding: 0,
+    width: "100%"
+  };
+  const tdStyles = {
+    padding: "12px",
+    borderBottom: "1px solid #e5e7eb"
+  };
+  const rowStyles = (isSelected) => ({
+    backgroundColor: isSelected ? "#eff6ff" : "transparent"
+  });
+  const getSortIcon = (column) => {
+    if (sortColumn !== column) return "\u21C5";
+    if (sortDirection === "asc") return "\u2191";
+    if (sortDirection === "desc") return "\u2193";
+    return "\u21C5";
+  };
+  return /* @__PURE__ */ jsxs(
+    "table",
+    {
+      id: tableId,
+      className,
+      style: tableStyles,
+      role: "table",
+      "aria-label": caption,
+      children: [
+        /* @__PURE__ */ jsx("caption", { style: { padding: "12px", textAlign: "left", fontWeight: 600, fontSize: "16px" }, children: caption }),
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+          selectable && /* @__PURE__ */ jsx("th", { scope: "col", style: { ...thStyles, width: "50px" }, children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: isAllSelected,
+              ref: (el) => {
+                if (el) {
+                  el.indeterminate = isSomeSelected;
+                }
+              },
+              onChange: (e) => handleSelectAll(e.target.checked),
+              "aria-label": "Select all rows"
+            }
+          ) }),
+          columns.map((column) => {
+            const isSortable = column.sortable || sortable;
+            return /* @__PURE__ */ jsx(
+              "th",
+              {
+                scope: "col",
+                style: { ...thStyles, width: column.width },
+                "aria-sort": sortColumn === column.key ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0,
+                children: isSortable ? /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleSort(column.key),
+                    style: sortButtonStyles,
+                    "aria-label": `Sort by ${column.label}`,
+                    children: [
+                      /* @__PURE__ */ jsx("span", { children: column.label }),
+                      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: getSortIcon(column.key) })
+                    ]
+                  }
+                ) : column.label
+              },
+              column.key
+            );
+          })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+          "td",
+          {
+            colSpan: columns.length + (selectable ? 1 : 0),
+            style: { ...tdStyles, textAlign: "center", color: "#9ca3af" },
+            children: "No data available"
+          }
+        ) }) : data.map((item, index) => {
+          const isSelected = selectedSet.has(index);
+          const rowKey = getRowKey(item, index);
+          return /* @__PURE__ */ jsxs("tr", { style: rowStyles(isSelected), children: [
+            selectable && /* @__PURE__ */ jsx("td", { style: tdStyles, children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: isSelected,
+                onChange: (e) => handleSelectRow(index, e.target.checked),
+                "aria-label": `Select row ${index + 1}`
+              }
+            ) }),
+            columns.map((column) => /* @__PURE__ */ jsx("td", { style: tdStyles, children: column.render ? column.render(item, index) : String(item[column.key] ?? "") }, column.key))
+          ] }, rowKey);
+        }) })
+      ]
+    }
+  );
+}
+function useReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {
+    if (typeof window === "undefined") return false;
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    return mediaQuery.matches;
+  });
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handleChange = (event) => {
+      setPrefersReducedMotion(event.matches);
+    };
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    }
+    mediaQuery.addListener(handleChange);
+    return () => mediaQuery.removeListener(handleChange);
+  }, []);
+  return prefersReducedMotion;
+}
+function useAnnounce() {
+  const regionRef = useRef(null);
+  useEffect(() => {
+    if (!regionRef.current) {
+      const region = document.createElement("div");
+      region.setAttribute("role", "status");
+      region.setAttribute("aria-live", "polite");
+      region.setAttribute("aria-atomic", "true");
+      region.style.position = "absolute";
+      region.style.left = "-10000px";
+      region.style.width = "1px";
+      region.style.height = "1px";
+      region.style.overflow = "hidden";
+      document.body.appendChild(region);
+      regionRef.current = region;
+    }
+    return () => {
+      if (regionRef.current) {
+        document.body.removeChild(regionRef.current);
+        regionRef.current = null;
+      }
+    };
+  }, []);
+  const announce6 = useCallback(
+    (message, politeness = "polite") => {
+      if (!regionRef.current) return;
+      regionRef.current.setAttribute("aria-live", politeness);
+      regionRef.current.textContent = "";
+      setTimeout(() => {
+        if (regionRef.current) {
+          regionRef.current.textContent = message;
+        }
+      }, 100);
+      setTimeout(() => {
+        if (regionRef.current) {
+          regionRef.current.textContent = "";
+        }
+      }, 5100);
+    },
+    []
+  );
+  return announce6;
+}
+var AccessibleCarousel = ({
+  items,
+  autoPlay = false,
+  interval = 5e3,
+  controls = true,
+  indicators = true,
+  loop = true,
+  ariaLabel = "Carousel",
+  className = "",
+  style = {}
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(autoPlay);
+  const [isPaused, setIsPaused] = useState(false);
+  const carouselId = useId2("carousel");
+  const regionRef = useRef(null);
+  const intervalRef = useRef(void 0);
+  const prefersReducedMotion = useReducedMotion();
+  const announce6 = useAnnounce();
+  const totalSlides = items.length;
+  useEffect(() => {
+    if (isPlaying && !isPaused && !prefersReducedMotion) {
+      intervalRef.current = setInterval(() => {
+        handleNext();
+      }, interval);
+    }
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [isPlaying, isPaused, currentIndex, interval, prefersReducedMotion]);
+  const handlePrevious = () => {
+    const newIndex = currentIndex === 0 ? loop ? totalSlides - 1 : 0 : currentIndex - 1;
+    setCurrentIndex(newIndex);
+    announce6(`Slide ${newIndex + 1} of ${totalSlides}`, "polite");
+  };
+  const handleNext = () => {
+    const newIndex = currentIndex === totalSlides - 1 ? loop ? 0 : totalSlides - 1 : currentIndex + 1;
+    setCurrentIndex(newIndex);
+    announce6(`Slide ${newIndex + 1} of ${totalSlides}`, "polite");
+  };
+  const handleGoToSlide = (index) => {
+    setCurrentIndex(index);
+    announce6(`Slide ${index + 1} of ${totalSlides}`, "polite");
+  };
+  const handlePlayPause = () => {
+    setIsPlaying(!isPlaying);
+    announce6(isPlaying ? "Carousel paused" : "Carousel playing", "polite");
+  };
+  const handleKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowLeft":
+        event.preventDefault();
+        handlePrevious();
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        handleNext();
+        break;
+      case "Home":
+        event.preventDefault();
+        handleGoToSlide(0);
+        break;
+      case "End":
+        event.preventDefault();
+        handleGoToSlide(totalSlides - 1);
+        break;
+    }
+  };
+  const containerStyles = {
+    position: "relative",
+    overflow: "hidden",
+    width: "100%",
+    ...style
+  };
+  const slidesContainerStyles = {
+    display: "flex",
+    transition: prefersReducedMotion ? "none" : "transform 0.5s ease-in-out",
+    transform: `translateX(-${currentIndex * 100}%)`
+  };
+  const slideStyles = {
+    minWidth: "100%",
+    flex: "0 0 auto"
+  };
+  const controlsContainerStyles = {
+    position: "absolute",
+    top: "50%",
+    left: 0,
+    right: 0,
+    transform: "translateY(-50%)",
+    display: "flex",
+    justifyContent: "space-between",
+    padding: "0 16px",
+    pointerEvents: "none"
+  };
+  const controlButtonStyles = {
+    pointerEvents: "auto",
+    width: "48px",
+    height: "48px",
+    borderRadius: "50%",
+    border: "none",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    color: "#fff",
+    fontSize: "20px",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "background-color 0.2s"
+  };
+  const indicatorsStyles = {
+    display: "flex",
+    justifyContent: "center",
+    gap: "8px",
+    marginTop: "16px"
+  };
+  const indicatorButtonStyles = (isActive) => ({
+    width: "12px",
+    height: "12px",
+    borderRadius: "50%",
+    border: "none",
+    backgroundColor: isActive ? "#3b82f6" : "#d1d5db",
+    cursor: "pointer",
+    padding: 0,
+    transition: "background-color 0.2s"
+  });
+  const playPauseButtonStyles = {
+    position: "absolute",
+    bottom: "16px",
+    right: "16px",
+    padding: "8px 16px",
+    borderRadius: "4px",
+    border: "none",
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+    color: "#fff",
+    fontSize: "14px",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    gap: "6px"
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref: regionRef,
+      "aria-roledescription": "carousel",
+      "aria-label": ariaLabel,
+      className,
+      onMouseEnter: () => setIsPaused(true),
+      onMouseLeave: () => setIsPaused(false),
+      onFocus: () => setIsPaused(true),
+      onBlur: () => setIsPaused(false),
+      onKeyDown: handleKeyDown,
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: containerStyles, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: `${carouselId}-slides`,
+              style: slidesContainerStyles,
+              "aria-live": "polite",
+              "aria-atomic": "false",
+              children: items.map((item, index) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "group",
+                  "aria-roledescription": "slide",
+                  "aria-label": `Slide ${index + 1} of ${totalSlides}`,
+                  "aria-hidden": index !== currentIndex,
+                  style: slideStyles,
+                  children: item
+                },
+                index
+              ))
+            }
+          ),
+          controls && /* @__PURE__ */ jsxs("div", { style: controlsContainerStyles, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handlePrevious,
+                "aria-label": "Previous slide",
+                "aria-controls": `${carouselId}-slides`,
+                disabled: !loop && currentIndex === 0,
+                style: {
+                  ...controlButtonStyles,
+                  opacity: !loop && currentIndex === 0 ? 0.5 : 1,
+                  cursor: !loop && currentIndex === 0 ? "not-allowed" : "pointer"
+                },
+                onMouseEnter: (e) => {
+                  if (loop || currentIndex !== 0) {
+                    e.currentTarget.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
+                  }
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
+                },
+                children: "\u2039"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleNext,
+                "aria-label": "Next slide",
+                "aria-controls": `${carouselId}-slides`,
+                disabled: !loop && currentIndex === totalSlides - 1,
+                style: {
+                  ...controlButtonStyles,
+                  opacity: !loop && currentIndex === totalSlides - 1 ? 0.5 : 1,
+                  cursor: !loop && currentIndex === totalSlides - 1 ? "not-allowed" : "pointer"
+                },
+                onMouseEnter: (e) => {
+                  if (loop || currentIndex !== totalSlides - 1) {
+                    e.currentTarget.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
+                  }
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
+                },
+                children: "\u203A"
+              }
+            )
+          ] }),
+          autoPlay && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: handlePlayPause,
+              "aria-label": isPlaying ? "Pause carousel" : "Play carousel",
+              style: playPauseButtonStyles,
+              onMouseEnter: (e) => {
+                e.currentTarget.style.backgroundColor = "rgba(0, 0, 0, 0.9)";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
+              },
+              children: [
+                isPlaying ? "\u23F8" : "\u25B6",
+                " ",
+                isPlaying ? "Pause" : "Play"
+              ]
+            }
+          )
+        ] }),
+        indicators && /* @__PURE__ */ jsx("div", { role: "group", "aria-label": "Slide indicators", style: indicatorsStyles, children: items.map((_, index) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleGoToSlide(index),
+            "aria-label": `Go to slide ${index + 1}`,
+            "aria-current": index === currentIndex ? "true" : "false",
+            style: indicatorButtonStyles(index === currentIndex),
+            onMouseEnter: (e) => {
+              if (index !== currentIndex) {
+                e.currentTarget.style.backgroundColor = "#9ca3af";
+              }
+            },
+            onMouseLeave: (e) => {
+              if (index !== currentIndex) {
+                e.currentTarget.style.backgroundColor = "#d1d5db";
+              }
+            }
+          },
+          index
+        )) })
+      ]
+    }
+  );
+};
+var AccessibleDrawer = ({
+  isOpen,
+  onClose,
+  side = "right",
+  modal = true,
+  title,
+  children,
+  className = "",
+  backdropClassName = "",
+  style = {}
+}) => {
+  const drawerId = useId2("drawer");
+  const titleId = useId2("drawer-title");
+  const { trapRef } = useFocusTrap({
+    isActive: isOpen && modal,
+    onEscape: onClose
+  });
+  const prefersReducedMotion = useReducedMotion();
+  useEffect(() => {
+    if (isOpen && modal) {
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = originalOverflow;
+      };
+    }
+  }, [isOpen, modal]);
+  if (!isOpen) return null;
+  const getDrawerPosition = () => {
+    const baseStyles = {
+      position: "fixed",
+      zIndex: 1e3,
+      backgroundColor: "#fff",
+      boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+      transition: prefersReducedMotion ? "none" : "transform 0.3s ease-in-out"
+    };
+    switch (side) {
+      case "left":
+        return {
+          ...baseStyles,
+          top: 0,
+          left: 0,
+          bottom: 0,
+          width: "320px",
+          maxWidth: "80vw"
+        };
+      case "right":
+        return {
+          ...baseStyles,
+          top: 0,
+          right: 0,
+          bottom: 0,
+          width: "320px",
+          maxWidth: "80vw"
+        };
+      case "top":
+        return {
+          ...baseStyles,
+          top: 0,
+          left: 0,
+          right: 0,
+          height: "320px",
+          maxHeight: "80vh"
+        };
+      case "bottom":
+        return {
+          ...baseStyles,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: "320px",
+          maxHeight: "80vh"
+        };
+      default:
+        return baseStyles;
+    }
+  };
+  const backdropStyles = {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    zIndex: 999,
+    opacity: isOpen ? 1 : 0,
+    transition: prefersReducedMotion ? "none" : "opacity 0.3s ease-in-out"
+  };
+  const drawerStyles = {
+    ...getDrawerPosition(),
+    display: "flex",
+    flexDirection: "column",
+    overflowY: "auto",
+    ...style
+  };
+  const headerStyles = {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "16px 20px",
+    borderBottom: "1px solid #e5e7eb"
+  };
+  const titleStyles = {
+    fontSize: "18px",
+    fontWeight: 600,
+    margin: 0
+  };
+  const closeButtonStyles = {
+    width: "32px",
+    height: "32px",
+    borderRadius: "4px",
+    border: "none",
+    backgroundColor: "transparent",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "20px",
+    transition: "background-color 0.2s"
+  };
+  const contentStyles = {
+    flex: 1,
+    padding: "20px",
+    overflowY: "auto"
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    modal && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: backdropClassName,
+        style: backdropStyles,
+        onClick: onClose,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: modal ? trapRef : null,
+        id: drawerId,
+        role: "dialog",
+        "aria-modal": modal,
+        "aria-labelledby": title ? titleId : void 0,
+        className,
+        style: drawerStyles,
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: headerStyles, children: [
+            title && /* @__PURE__ */ jsx("h2", { id: titleId, style: titleStyles, children: title }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                "aria-label": "Close drawer",
+                style: closeButtonStyles,
+                onMouseEnter: (e) => {
+                  e.currentTarget.style.backgroundColor = "#f3f4f6";
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.backgroundColor = "transparent";
+                },
+                children: "\xD7"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: contentStyles, children })
+        ]
+      }
+    )
+  ] });
+};
 var useAccessibleForm = (config) => {
   const {
     fields,
@@ -1154,6 +3970,28 @@ var useFormField = (props) => {
     fieldRef
   };
 };
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === "undefined") return false;
+    const mediaQuery = window.matchMedia(query);
+    return mediaQuery.matches;
+  });
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia(query);
+    setMatches(mediaQuery.matches);
+    const handleChange = (event) => {
+      setMatches(event.matches);
+    };
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    }
+    mediaQuery.addListener(handleChange);
+    return () => mediaQuery.removeListener(handleChange);
+  }, [query]);
+  return matches;
+}
 var DialogStackContext = createContext(null);
 var useDialogStack = () => {
   const context = useContext(DialogStackContext);
@@ -1870,6 +4708,6 @@ var Wizard = (props) => {
 // src/index.ts
 var VERSION = "0.0.0";
 
-export { AccessibleButton, AccessibleDialog, AccessibleMenu, AccessibleModal, AccessibleTabs, DialogStackProvider, InfiniteList, NestedMenu, VERSION, VirtualizedList, Wizard, useAccessibleButton, useAccessibleDialog, useAccessibleForm, useDialogStack, useFocusTrap, useFormField, useKeyboardNavigation, useWizard };
+export { AccessibleAccordion, AccessibleBreadcrumb, AccessibleButton, AccessibleCarousel, AccessibleCheckboxGroup, AccessibleCombobox, AccessibleDatePicker, AccessibleDialog, AccessibleDrawer, AccessibleMenu, AccessibleModal, AccessiblePagination, AccessibleProgress, AccessibleRadioGroup, AccessibleTable, AccessibleTabs, AccessibleToast, AccessibleToggle, AccessibleTooltip, AccessibleTreeView, DialogStackProvider, InfiniteList, NestedMenu, SkipLinks, ToastContainer, VERSION, VirtualizedList, Wizard, useAccessibleButton, useAccessibleDialog, useAccessibleForm, useAnnounce, useAriaLive, useClickOutside, useDialogStack, useFocusTrap, useFormField, useId2 as useId, useKeyboardNavigation, useMediaQuery, useReducedMotion, useWizard };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map