@compa11y/react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,702 @@
+'use strict';
+
+var chunkIR46CNNY_cjs = require('./chunk-IR46CNNY.cjs');
+var chunkR4FR6M6I_cjs = require('./chunk-R4FR6M6I.cjs');
+var chunkD2UMS62N_cjs = require('./chunk-D2UMS62N.cjs');
+var chunkSOBS7MIH_cjs = require('./chunk-SOBS7MIH.cjs');
+var chunkOIVTOU4Z_cjs = require('./chunk-OIVTOU4Z.cjs');
+var chunkRBDQCIS7_cjs = require('./chunk-RBDQCIS7.cjs');
+var chunkGDLOJH6K_cjs = require('./chunk-GDLOJH6K.cjs');
+var chunk52J4Z3QD_cjs = require('./chunk-52J4Z3QD.cjs');
+var react = require('react');
+var core = require('@compa11y/core');
+var jsxRuntime = require('react/jsx-runtime');
+
+function useFocusVisible() {
+  const [isFocusVisible, setIsFocusVisible] = react.useState(false);
+  react.useEffect(() => {
+    const cleanup = core.initFocusVisible();
+    return cleanup;
+  }, []);
+  const handleFocus = react.useCallback(() => {
+    setIsFocusVisible(core.isFocusVisible());
+  }, []);
+  const handleBlur = react.useCallback(() => {
+    setIsFocusVisible(false);
+  }, []);
+  return {
+    isFocusVisible,
+    focusProps: {
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    }
+  };
+}
+function useFocusManager(options = {}) {
+  const {
+    autoFocus = false,
+    restoreFocus = false,
+    focusVisible = true
+  } = options;
+  const elementRef = react.useCallback(
+    (node) => {
+      if (node && autoFocus) {
+        requestAnimationFrame(() => {
+          if (focusVisible) {
+            core.focusWithVisibleRing(node);
+          } else {
+            node.focus();
+          }
+        });
+      }
+    },
+    [autoFocus, focusVisible]
+  );
+  react.useEffect(() => {
+    if (!restoreFocus) return;
+    const previousElement = document.activeElement;
+    return () => {
+      if (previousElement && previousElement.focus) {
+        previousElement.focus();
+      }
+    };
+  }, [restoreFocus]);
+  return elementRef;
+}
+function useFocusControl() {
+  const elementRef = react.useCallback((_node) => {
+  }, []);
+  const focus = react.useCallback((options) => {
+    const element = elementRef;
+    if (element.current) {
+      if (options?.visible) {
+        core.focusWithVisibleRing(element.current);
+      } else {
+        element.current.focus();
+      }
+    }
+  }, []);
+  return { ref: elementRef, focus };
+}
+function useFocusWithin() {
+  const [hasFocus, setHasFocus] = react.useState(false);
+  const containerRef = react.useCallback((_node) => {
+  }, []);
+  const handleFocusIn = react.useCallback(() => {
+    setHasFocus(true);
+  }, []);
+  const handleFocusOut = react.useCallback((event) => {
+    const container = event.currentTarget;
+    const relatedTarget = event.relatedTarget;
+    if (!relatedTarget || !container.contains(relatedTarget)) {
+      setHasFocus(false);
+    }
+  }, []);
+  return {
+    ref: containerRef,
+    hasFocus,
+    focusWithinProps: {
+      onFocus: handleFocusIn,
+      onBlur: handleFocusOut
+    }
+  };
+}
+function useRovingTabindex(options) {
+  const {
+    itemCount,
+    initialIndex = 0,
+    wrap = true,
+    orientation = "both",
+    onChange
+  } = options;
+  const [activeIndex, setActiveIndex] = react.useState(initialIndex);
+  const itemRefs = react.useRef([]);
+  react.useEffect(() => {
+    if (activeIndex >= itemCount) {
+      setActiveIndex(Math.max(0, itemCount - 1));
+    }
+  }, [itemCount, activeIndex]);
+  const moveTo = react.useCallback(
+    (index) => {
+      let newIndex = index;
+      if (newIndex < 0) {
+        newIndex = wrap ? itemCount - 1 : 0;
+      } else if (newIndex >= itemCount) {
+        newIndex = wrap ? 0 : itemCount - 1;
+      }
+      setActiveIndex(newIndex);
+      onChange?.(newIndex);
+      const element = itemRefs.current[newIndex];
+      element?.focus();
+    },
+    [itemCount, wrap, onChange]
+  );
+  const handleKeyDown = react.useCallback(
+    (event, index) => {
+      let handled = false;
+      switch (event.key) {
+        case "ArrowRight":
+          if (orientation === "horizontal" || orientation === "both") {
+            moveTo(index + 1);
+            handled = true;
+          }
+          break;
+        case "ArrowLeft":
+          if (orientation === "horizontal" || orientation === "both") {
+            moveTo(index - 1);
+            handled = true;
+          }
+          break;
+        case "ArrowDown":
+          if (orientation === "vertical" || orientation === "both") {
+            moveTo(index + 1);
+            handled = true;
+          }
+          break;
+        case "ArrowUp":
+          if (orientation === "vertical" || orientation === "both") {
+            moveTo(index - 1);
+            handled = true;
+          }
+          break;
+        case "Home":
+          moveTo(0);
+          handled = true;
+          break;
+        case "End":
+          moveTo(itemCount - 1);
+          handled = true;
+          break;
+      }
+      if (handled) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [orientation, moveTo, itemCount]
+  );
+  const getItemProps = react.useCallback(
+    (index) => ({
+      ref: (el) => {
+        itemRefs.current[index] = el;
+      },
+      tabIndex: index === activeIndex ? 0 : -1,
+      onKeyDown: (event) => handleKeyDown(event, index),
+      onFocus: () => {
+        if (index !== activeIndex) {
+          setActiveIndex(index);
+          onChange?.(index);
+        }
+      }
+    }),
+    [activeIndex, handleKeyDown, onChange]
+  );
+  return {
+    activeIndex,
+    setActiveIndex: moveTo,
+    getItemProps,
+    first: () => moveTo(0),
+    last: () => moveTo(itemCount - 1),
+    next: () => moveTo(activeIndex + 1),
+    previous: () => moveTo(activeIndex - 1)
+  };
+}
+function useRovingTabindexMap(ids, options = {}) {
+  const roving = useRovingTabindex({
+    ...options,
+    itemCount: ids.length
+  });
+  const getItemProps = react.useCallback(
+    (id) => {
+      const index = ids.indexOf(id);
+      if (index === -1) {
+        throw new Error(`Unknown item ID: ${id}`);
+      }
+      return roving.getItemProps(index);
+    },
+    [ids, roving]
+  );
+  const activeId = ids[roving.activeIndex];
+  return {
+    ...roving,
+    activeId,
+    getItemProps,
+    setActiveId: (id) => {
+      const index = ids.indexOf(id);
+      if (index !== -1) {
+        roving.setActiveIndex(index);
+      }
+    }
+  };
+}
+var warnings = core.createComponentWarnings("Switch");
+var Switch = react.forwardRef(
+  function Switch2({
+    checked: controlledChecked,
+    defaultChecked = false,
+    onCheckedChange,
+    label,
+    disabled = false,
+    unstyled = false,
+    className,
+    size = "md",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    onClick,
+    ...props
+  }, ref) {
+    const id = chunk52J4Z3QD_cjs.useId("switch");
+    const labelId = `${id}-label`;
+    const { announce: announce2 } = chunkRBDQCIS7_cjs.useAnnouncer();
+    const [uncontrolledChecked, setUncontrolledChecked] = react.useState(defaultChecked);
+    const isControlled = controlledChecked !== void 0;
+    const checked = isControlled ? controlledChecked : uncontrolledChecked;
+    react.useEffect(() => {
+      if (!label && !ariaLabel && !ariaLabelledby) {
+        warnings.warning(
+          "Switch has no accessible label. Screen readers need this to identify the switch.",
+          'Add label="Description", aria-label="...", or aria-labelledby="..."'
+        );
+      }
+    }, [label, ariaLabel, ariaLabelledby]);
+    const toggleSwitch = react.useCallback(() => {
+      if (disabled) return;
+      const newChecked = !checked;
+      if (!isControlled) {
+        setUncontrolledChecked(newChecked);
+      }
+      onCheckedChange?.(newChecked);
+      const labelText = label || ariaLabel || "Switch";
+      announce2(`${labelText} ${newChecked ? "on" : "off"}`);
+    }, [
+      checked,
+      disabled,
+      isControlled,
+      onCheckedChange,
+      label,
+      ariaLabel,
+      announce2
+    ]);
+    const handleClick = react.useCallback(
+      (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+          toggleSwitch();
+        }
+      },
+      [onClick, toggleSwitch]
+    );
+    const keyboardProps = chunkGDLOJH6K_cjs.useKeyboard(
+      {
+        " ": () => {
+          toggleSwitch();
+        },
+        Enter: () => {
+          toggleSwitch();
+        }
+      },
+      { preventDefault: true }
+    );
+    const handleKeyDown = (event) => {
+      props.onKeyDown?.(event);
+      if (!event.defaultPrevented) {
+        keyboardProps.onKeyDown(event);
+      }
+    };
+    const computedAriaLabel = ariaLabel;
+    const computedAriaLabelledby = ariaLabelledby || (label ? labelId : void 0);
+    const wrapperStructuralStyles = {
+      display: "inline-flex",
+      alignItems: "center"
+    };
+    const sizes = {
+      sm: { width: 32, height: 18, thumb: 14, translate: 14 },
+      md: { width: 44, height: 24, thumb: 20, translate: 20 },
+      lg: { width: 56, height: 30, thumb: 26, translate: 26 }
+    };
+    const sizeConfig = sizes[size];
+    const trackStructuralStyles = {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      flexShrink: 0,
+      width: sizeConfig.width,
+      height: sizeConfig.height,
+      border: "none",
+      padding: 2,
+      cursor: disabled ? "not-allowed" : "pointer"
+    };
+    const trackVisualStyles = unstyled ? {} : {
+      backgroundColor: checked ? "#0066cc" : "#d1d5db",
+      borderRadius: sizeConfig.height / 2,
+      transition: "background-color 0.2s ease",
+      opacity: disabled ? 0.5 : 1
+    };
+    const thumbStructuralStyles = {
+      position: "absolute",
+      left: 2,
+      width: sizeConfig.thumb,
+      height: sizeConfig.thumb,
+      pointerEvents: "none",
+      transform: checked ? `translateX(${sizeConfig.translate}px)` : "translateX(0)"
+    };
+    const thumbVisualStyles = unstyled ? {} : {
+      backgroundColor: "white",
+      borderRadius: "50%",
+      boxShadow: "0 1px 3px rgba(0, 0, 0, 0.2)",
+      transition: "transform 0.2s ease"
+    };
+    const labelStyles = unstyled ? {
+      marginLeft: 8,
+      userSelect: "none",
+      cursor: disabled ? "not-allowed" : "pointer"
+    } : {
+      marginLeft: 8,
+      userSelect: "none",
+      cursor: disabled ? "not-allowed" : "pointer",
+      opacity: disabled ? 0.5 : 1
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: wrapperStructuralStyles,
+        "data-compa11y-switch-wrapper": true,
+        "data-size": size,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              ref,
+              type: "button",
+              role: "switch",
+              "aria-checked": checked,
+              "aria-label": computedAriaLabel,
+              "aria-labelledby": computedAriaLabelledby,
+              disabled,
+              onClick: handleClick,
+              onKeyDown: handleKeyDown,
+              className,
+              style: { ...trackStructuralStyles, ...trackVisualStyles },
+              tabIndex: disabled ? -1 : 0,
+              "data-compa11y-switch": true,
+              "data-checked": checked,
+              "data-disabled": disabled || void 0,
+              "data-size": size,
+              ...props,
+              onFocus: (e) => {
+                if (!unstyled) {
+                  e.currentTarget.style.outline = "2px solid #0066cc";
+                  e.currentTarget.style.outlineOffset = "2px";
+                }
+                props.onFocus?.(e);
+              },
+              onBlur: (e) => {
+                if (!unstyled) {
+                  e.currentTarget.style.outline = "none";
+                }
+                props.onBlur?.(e);
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: { ...thumbStructuralStyles, ...thumbVisualStyles },
+                  "data-compa11y-switch-thumb": true,
+                  "aria-hidden": "true"
+                }
+              )
+            }
+          ),
+          label && /* @__PURE__ */ jsxRuntime.jsx(
+            "label",
+            {
+              id: labelId,
+              onClick: disabled ? void 0 : () => toggleSwitch(),
+              style: labelStyles,
+              "data-compa11y-switch-label": true,
+              children: label
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Switch.displayName = "Switch";
+
+Object.defineProperty(exports, "Dialog", {
+  enumerable: true,
+  get: function () { return chunkIR46CNNY_cjs.DialogCompound; }
+});
+Object.defineProperty(exports, "DialogActions", {
+  enumerable: true,
+  get: function () { return chunkIR46CNNY_cjs.DialogActions; }
+});
+Object.defineProperty(exports, "DialogBase", {
+  enumerable: true,
+  get: function () { return chunkIR46CNNY_cjs.Dialog; }
+});
+Object.defineProperty(exports, "DialogClose", {
+  enumerable: true,
+  get: function () { return chunkIR46CNNY_cjs.DialogClose; }
+});
+Object.defineProperty(exports, "DialogContent", {
+  enumerable: true,
+  get: function () { return chunkIR46CNNY_cjs.DialogContent; }
+});
+Object.defineProperty(exports, "DialogDescription", {
+  enumerable: true,
+  get: function () { return chunkIR46CNNY_cjs.DialogDescription; }
+});
+Object.defineProperty(exports, "DialogTitle", {
+  enumerable: true,
+  get: function () { return chunkIR46CNNY_cjs.DialogTitle; }
+});
+Object.defineProperty(exports, "DialogTrigger", {
+  enumerable: true,
+  get: function () { return chunkIR46CNNY_cjs.DialogTrigger; }
+});
+Object.defineProperty(exports, "useDialogContext", {
+  enumerable: true,
+  get: function () { return chunkIR46CNNY_cjs.useDialogContext; }
+});
+Object.defineProperty(exports, "useFocusTrap", {
+  enumerable: true,
+  get: function () { return chunkIR46CNNY_cjs.useFocusTrap; }
+});
+Object.defineProperty(exports, "useFocusTrapControls", {
+  enumerable: true,
+  get: function () { return chunkIR46CNNY_cjs.useFocusTrapControls; }
+});
+Object.defineProperty(exports, "ActionMenu", {
+  enumerable: true,
+  get: function () { return chunkR4FR6M6I_cjs.ActionMenuCompound; }
+});
+Object.defineProperty(exports, "ActionMenuBase", {
+  enumerable: true,
+  get: function () { return chunkR4FR6M6I_cjs.ActionMenu; }
+});
+Object.defineProperty(exports, "ActionMenuContent", {
+  enumerable: true,
+  get: function () { return chunkR4FR6M6I_cjs.ActionMenuContent; }
+});
+Object.defineProperty(exports, "ActionMenuItem", {
+  enumerable: true,
+  get: function () { return chunkR4FR6M6I_cjs.ActionMenuItem; }
+});
+Object.defineProperty(exports, "ActionMenuLabel", {
+  enumerable: true,
+  get: function () { return chunkR4FR6M6I_cjs.ActionMenuLabel; }
+});
+Object.defineProperty(exports, "ActionMenuSeparator", {
+  enumerable: true,
+  get: function () { return chunkR4FR6M6I_cjs.ActionMenuSeparator; }
+});
+Object.defineProperty(exports, "ActionMenuTrigger", {
+  enumerable: true,
+  get: function () { return chunkR4FR6M6I_cjs.ActionMenuTrigger; }
+});
+Object.defineProperty(exports, "useActionMenuContext", {
+  enumerable: true,
+  get: function () { return chunkR4FR6M6I_cjs.useActionMenuContext; }
+});
+Object.defineProperty(exports, "Tab", {
+  enumerable: true,
+  get: function () { return chunkD2UMS62N_cjs.Tab; }
+});
+Object.defineProperty(exports, "TabList", {
+  enumerable: true,
+  get: function () { return chunkD2UMS62N_cjs.TabList; }
+});
+Object.defineProperty(exports, "TabPanel", {
+  enumerable: true,
+  get: function () { return chunkD2UMS62N_cjs.TabPanel; }
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function () { return chunkD2UMS62N_cjs.TabsCompound; }
+});
+Object.defineProperty(exports, "TabsBase", {
+  enumerable: true,
+  get: function () { return chunkD2UMS62N_cjs.Tabs; }
+});
+Object.defineProperty(exports, "useTabsContext", {
+  enumerable: true,
+  get: function () { return chunkD2UMS62N_cjs.useTabsContext; }
+});
+Object.defineProperty(exports, "ToastProvider", {
+  enumerable: true,
+  get: function () { return chunkSOBS7MIH_cjs.ToastProvider; }
+});
+Object.defineProperty(exports, "ToastViewport", {
+  enumerable: true,
+  get: function () { return chunkSOBS7MIH_cjs.ToastViewport; }
+});
+Object.defineProperty(exports, "useToast", {
+  enumerable: true,
+  get: function () { return chunkSOBS7MIH_cjs.useToast; }
+});
+Object.defineProperty(exports, "useToastHelpers", {
+  enumerable: true,
+  get: function () { return chunkSOBS7MIH_cjs.useToastHelpers; }
+});
+Object.defineProperty(exports, "Combobox", {
+  enumerable: true,
+  get: function () { return chunkOIVTOU4Z_cjs.ComboboxCompound; }
+});
+Object.defineProperty(exports, "ComboboxBase", {
+  enumerable: true,
+  get: function () { return chunkOIVTOU4Z_cjs.Combobox; }
+});
+Object.defineProperty(exports, "ComboboxInput", {
+  enumerable: true,
+  get: function () { return chunkOIVTOU4Z_cjs.ComboboxInput; }
+});
+Object.defineProperty(exports, "ComboboxListbox", {
+  enumerable: true,
+  get: function () { return chunkOIVTOU4Z_cjs.ComboboxListbox; }
+});
+Object.defineProperty(exports, "ComboboxOption", {
+  enumerable: true,
+  get: function () { return chunkOIVTOU4Z_cjs.ComboboxOption; }
+});
+Object.defineProperty(exports, "useAnnounceLoading", {
+  enumerable: true,
+  get: function () { return chunkRBDQCIS7_cjs.useAnnounceLoading; }
+});
+Object.defineProperty(exports, "useAnnounceOnChange", {
+  enumerable: true,
+  get: function () { return chunkRBDQCIS7_cjs.useAnnounceOnChange; }
+});
+Object.defineProperty(exports, "useAnnouncer", {
+  enumerable: true,
+  get: function () { return chunkRBDQCIS7_cjs.useAnnouncer; }
+});
+Object.defineProperty(exports, "useGridKeyboard", {
+  enumerable: true,
+  get: function () { return chunkGDLOJH6K_cjs.useGridKeyboard; }
+});
+Object.defineProperty(exports, "useKeyPressed", {
+  enumerable: true,
+  get: function () { return chunkGDLOJH6K_cjs.useKeyPressed; }
+});
+Object.defineProperty(exports, "useKeyboard", {
+  enumerable: true,
+  get: function () { return chunkGDLOJH6K_cjs.useKeyboard; }
+});
+Object.defineProperty(exports, "useMenuKeyboard", {
+  enumerable: true,
+  get: function () { return chunkGDLOJH6K_cjs.useMenuKeyboard; }
+});
+Object.defineProperty(exports, "useTabsKeyboard", {
+  enumerable: true,
+  get: function () { return chunkGDLOJH6K_cjs.useTabsKeyboard; }
+});
+Object.defineProperty(exports, "useTypeAhead", {
+  enumerable: true,
+  get: function () { return chunkGDLOJH6K_cjs.useTypeAhead; }
+});
+Object.defineProperty(exports, "useId", {
+  enumerable: true,
+  get: function () { return chunk52J4Z3QD_cjs.useId; }
+});
+Object.defineProperty(exports, "useIdScope", {
+  enumerable: true,
+  get: function () { return chunk52J4Z3QD_cjs.useIdScope; }
+});
+Object.defineProperty(exports, "useIds", {
+  enumerable: true,
+  get: function () { return chunk52J4Z3QD_cjs.useIds; }
+});
+Object.defineProperty(exports, "announce", {
+  enumerable: true,
+  get: function () { return core.announce; }
+});
+Object.defineProperty(exports, "announceAssertive", {
+  enumerable: true,
+  get: function () { return core.announceAssertive; }
+});
+Object.defineProperty(exports, "announceError", {
+  enumerable: true,
+  get: function () { return core.announceError; }
+});
+Object.defineProperty(exports, "announcePolite", {
+  enumerable: true,
+  get: function () { return core.announcePolite; }
+});
+Object.defineProperty(exports, "announceProgress", {
+  enumerable: true,
+  get: function () { return core.announceProgress; }
+});
+Object.defineProperty(exports, "announceStatus", {
+  enumerable: true,
+  get: function () { return core.announceStatus; }
+});
+Object.defineProperty(exports, "aria", {
+  enumerable: true,
+  get: function () { return core.aria; }
+});
+Object.defineProperty(exports, "buildAriaProps", {
+  enumerable: true,
+  get: function () { return core.buildAriaProps; }
+});
+Object.defineProperty(exports, "checks", {
+  enumerable: true,
+  get: function () { return core.checks; }
+});
+Object.defineProperty(exports, "createComponentWarnings", {
+  enumerable: true,
+  get: function () { return core.createComponentWarnings; }
+});
+Object.defineProperty(exports, "hasAccessibleName", {
+  enumerable: true,
+  get: function () { return core.hasAccessibleName; }
+});
+Object.defineProperty(exports, "isAndroid", {
+  enumerable: true,
+  get: function () { return core.isAndroid; }
+});
+Object.defineProperty(exports, "isBrowser", {
+  enumerable: true,
+  get: function () { return core.isBrowser; }
+});
+Object.defineProperty(exports, "isIOS", {
+  enumerable: true,
+  get: function () { return core.isIOS; }
+});
+Object.defineProperty(exports, "isMac", {
+  enumerable: true,
+  get: function () { return core.isMac; }
+});
+Object.defineProperty(exports, "mergeAriaIds", {
+  enumerable: true,
+  get: function () { return core.mergeAriaIds; }
+});
+Object.defineProperty(exports, "prefersDarkMode", {
+  enumerable: true,
+  get: function () { return core.prefersDarkMode; }
+});
+Object.defineProperty(exports, "prefersHighContrast", {
+  enumerable: true,
+  get: function () { return core.prefersHighContrast; }
+});
+Object.defineProperty(exports, "prefersReducedMotion", {
+  enumerable: true,
+  get: function () { return core.prefersReducedMotion; }
+});
+Object.defineProperty(exports, "setWarningHandler", {
+  enumerable: true,
+  get: function () { return core.setWarningHandler; }
+});
+Object.defineProperty(exports, "warn", {
+  enumerable: true,
+  get: function () { return core.warn; }
+});
+exports.Switch = Switch;
+exports.useFocusControl = useFocusControl;
+exports.useFocusManager = useFocusManager;
+exports.useFocusVisible = useFocusVisible;
+exports.useFocusWithin = useFocusWithin;
+exports.useRovingTabindex = useRovingTabindex;
+exports.useRovingTabindexMap = useRovingTabindexMap;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map