@a11y-core/react 0.1.0-alpha.0

package/dist/index.js

@@ -0,0 +1,426 @@
+export { DialogCompound as Dialog, DialogActions, Dialog as DialogBase, DialogClose, DialogContent, DialogDescription, DialogTitle, DialogTrigger, useDialogContext, useFocusTrap, useFocusTrapControls } from './chunk-FTZ5KCOO.js';
+export { ActionMenuCompound as ActionMenu, ActionMenu as ActionMenuBase, ActionMenuContent, ActionMenuItem, ActionMenuLabel, ActionMenuSeparator, ActionMenuTrigger, useActionMenuContext } from './chunk-SRJSGDIA.js';
+export { Tab, TabList, TabPanel, TabsCompound as Tabs, Tabs as TabsBase, useTabsContext } from './chunk-N774QCHE.js';
+export { ToastProvider, ToastViewport, useToast, useToastHelpers } from './chunk-FJABCNFE.js';
+export { ComboboxCompound as Combobox, Combobox as ComboboxBase, ComboboxInput, ComboboxListbox, ComboboxOption } from './chunk-EY73HQNR.js';
+import { useAnnouncer } from './chunk-47MFBHV6.js';
+export { useAnnounceLoading, useAnnounceOnChange, useAnnouncer } from './chunk-47MFBHV6.js';
+import { useKeyboard } from './chunk-U6DUSMEA.js';
+export { useGridKeyboard, useKeyPressed, useKeyboard, useMenuKeyboard, useTabsKeyboard, useTypeAhead } from './chunk-U6DUSMEA.js';
+import { useId } from './chunk-3WBTHTVK.js';
+export { useId, useIdScope, useIds } from './chunk-3WBTHTVK.js';
+import { forwardRef, useState, useEffect, useCallback, useRef } from 'react';
+import { createComponentWarnings, initFocusVisible, isFocusVisible, focusWithVisibleRing } from '@a11y-core/core';
+export { announce, announceAssertive, announceError, announcePolite, announceProgress, announceStatus, aria, buildAriaProps, checks, createComponentWarnings, hasAccessibleName, isAndroid, isBrowser, isIOS, isMac, mergeAriaIds, prefersDarkMode, prefersHighContrast, prefersReducedMotion, setWarningHandler, warn } from '@a11y-core/core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function useFocusVisible() {
+  const [isFocusVisible$1, setIsFocusVisible] = useState(false);
+  useEffect(() => {
+    const cleanup = initFocusVisible();
+    return cleanup;
+  }, []);
+  const handleFocus = useCallback(() => {
+    setIsFocusVisible(isFocusVisible());
+  }, []);
+  const handleBlur = useCallback(() => {
+    setIsFocusVisible(false);
+  }, []);
+  return {
+    isFocusVisible: isFocusVisible$1,
+    focusProps: {
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    }
+  };
+}
+function useFocusManager(options = {}) {
+  const { autoFocus = false, restoreFocus = false, focusVisible = true } = options;
+  const elementRef = useCallback(
+    (node) => {
+      if (node && autoFocus) {
+        requestAnimationFrame(() => {
+          if (focusVisible) {
+            focusWithVisibleRing(node);
+          } else {
+            node.focus();
+          }
+        });
+      }
+    },
+    [autoFocus, focusVisible]
+  );
+  useEffect(() => {
+    if (!restoreFocus) return;
+    const previousElement = document.activeElement;
+    return () => {
+      if (previousElement && previousElement.focus) {
+        previousElement.focus();
+      }
+    };
+  }, [restoreFocus]);
+  return elementRef;
+}
+function useFocusControl() {
+  const elementRef = useCallback((_node) => {
+  }, []);
+  const focus = useCallback((options) => {
+    const element = elementRef;
+    if (element.current) {
+      if (options?.visible) {
+        focusWithVisibleRing(element.current);
+      } else {
+        element.current.focus();
+      }
+    }
+  }, []);
+  return { ref: elementRef, focus };
+}
+function useFocusWithin() {
+  const [hasFocus, setHasFocus] = useState(false);
+  const containerRef = useCallback((_node) => {
+  }, []);
+  const handleFocusIn = useCallback(() => {
+    setHasFocus(true);
+  }, []);
+  const handleFocusOut = 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] = useState(initialIndex);
+  const itemRefs = useRef([]);
+  useEffect(() => {
+    if (activeIndex >= itemCount) {
+      setActiveIndex(Math.max(0, itemCount - 1));
+    }
+  }, [itemCount, activeIndex]);
+  const moveTo = 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 = 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 = 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 = 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 = createComponentWarnings("Switch");
+var Switch = 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 = useId("switch");
+    const labelId = `${id}-label`;
+    const { announce: announce2 } = useAnnouncer();
+    const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
+    const isControlled = controlledChecked !== void 0;
+    const checked = isControlled ? controlledChecked : uncontrolledChecked;
+    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 = 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 = useCallback(
+      (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+          toggleSwitch();
+        }
+      },
+      [onClick, toggleSwitch]
+    );
+    const keyboardProps = 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__ */ jsxs(
+      "div",
+      {
+        style: wrapperStructuralStyles,
+        "data-a11y-core-switch-wrapper": true,
+        "data-size": size,
+        children: [
+          /* @__PURE__ */ 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-a11y-core-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__ */ jsx(
+                "span",
+                {
+                  style: { ...thumbStructuralStyles, ...thumbVisualStyles },
+                  "data-a11y-core-switch-thumb": true,
+                  "aria-hidden": "true"
+                }
+              )
+            }
+          ),
+          label && /* @__PURE__ */ jsx(
+            "label",
+            {
+              id: labelId,
+              onClick: disabled ? void 0 : () => toggleSwitch(),
+              style: labelStyles,
+              "data-a11y-core-switch-label": true,
+              children: label
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Switch.displayName = "Switch";
+
+export { Switch, useFocusControl, useFocusManager, useFocusVisible, useFocusWithin, useRovingTabindex, useRovingTabindexMap };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-focus-visible.ts","../src/hooks/use-roving-tabindex.ts","../src/components/switch/switch.tsx"],"names":["isFocusVisible","checkFocusVisible","useState","useEffect","useCallback","Switch","announce"],"mappings":"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","file":"index.js","sourcesContent":["import { useEffect, useState, useCallback } from 'react';\nimport {\n  initFocusVisible,\n  isFocusVisible as checkFocusVisible,\n  focusWithVisibleRing,\n} from '@a11y-core/core';\n\n/**\n * Hook to detect if focus should be visible (keyboard navigation)\n *\n * @example\n * ```tsx\n * function Button({ children }) {\n *   const { isFocusVisible, focusProps } = useFocusVisible();\n *\n *   return (\n *     <button\n *       {...focusProps}\n *       className={isFocusVisible ? 'focus-ring' : ''}\n *     >\n *       {children}\n *     </button>\n *   );\n * }\n * ```\n */\nexport function useFocusVisible() {\n  const [isFocusVisible, setIsFocusVisible] = useState(false);\n\n  // Initialize focus-visible tracking\n  useEffect(() => {\n    const cleanup = initFocusVisible();\n    return cleanup;\n  }, []);\n\n  const handleFocus = useCallback(() => {\n    setIsFocusVisible(checkFocusVisible());\n  }, []);\n\n  const handleBlur = useCallback(() => {\n    setIsFocusVisible(false);\n  }, []);\n\n  return {\n    isFocusVisible,\n    focusProps: {\n      onFocus: handleFocus,\n      onBlur: handleBlur,\n    },\n  };\n}\n\n/**\n * Hook for managing focus on a specific element\n *\n * @example\n * ```tsx\n * function Combobox() {\n *   const inputRef = useFocusManager<HTMLInputElement>({\n *     autoFocus: true,\n *   });\n *\n *   return <input ref={inputRef} />;\n * }\n * ```\n */\nexport function useFocusManager<T extends HTMLElement = HTMLElement>(options: {\n  autoFocus?: boolean;\n  restoreFocus?: boolean;\n  focusVisible?: boolean;\n} = {}) {\n  const { autoFocus = false, restoreFocus = false, focusVisible = true } = options;\n\n  const elementRef = useCallback(\n    (node: T | null) => {\n      if (node && autoFocus) {\n        // Delay focus to ensure DOM is ready\n        requestAnimationFrame(() => {\n          if (focusVisible) {\n            focusWithVisibleRing(node);\n          } else {\n            node.focus();\n          }\n        });\n      }\n    },\n    [autoFocus, focusVisible]\n  );\n\n  // Store ref for restore focus\n  useEffect(() => {\n    if (!restoreFocus) return;\n\n    const previousElement = document.activeElement as HTMLElement;\n\n    return () => {\n      if (previousElement && previousElement.focus) {\n        previousElement.focus();\n      }\n    };\n  }, [restoreFocus]);\n\n  return elementRef;\n}\n\n/**\n * Focus an element programmatically with proper focus-visible handling\n */\nexport function useFocusControl<T extends HTMLElement = HTMLElement>() {\n  const elementRef = useCallback((_node: T | null) => {\n    // Just store the ref\n  }, []);\n\n  const focus = useCallback((options?: { visible?: boolean }) => {\n    const element = elementRef as unknown as { current: T | null };\n    if (element.current) {\n      if (options?.visible) {\n        focusWithVisibleRing(element.current);\n      } else {\n        element.current.focus();\n      }\n    }\n  }, []);\n\n  return { ref: elementRef, focus };\n}\n\n/**\n * Track if an element has focus\n */\nexport function useFocusWithin<T extends HTMLElement = HTMLElement>() {\n  const [hasFocus, setHasFocus] = useState(false);\n  const containerRef = useCallback<React.RefCallback<T>>((_node) => {\n    // Element ref callback\n  }, []);\n\n  const handleFocusIn = useCallback(() => {\n    setHasFocus(true);\n  }, []);\n\n  const handleFocusOut = useCallback((event: React.FocusEvent) => {\n    const container = event.currentTarget;\n    const relatedTarget = event.relatedTarget as Node | null;\n\n    // Check if focus moved outside the container\n    if (!relatedTarget || !container.contains(relatedTarget)) {\n      setHasFocus(false);\n    }\n  }, []);\n\n  return {\n    ref: containerRef,\n    hasFocus,\n    focusWithinProps: {\n      onFocus: handleFocusIn,\n      onBlur: handleFocusOut,\n    },\n  };\n}\n","import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface UseRovingTabindexOptions {\n  /** Initial active index */\n  initialIndex?: number;\n  /** Whether navigation wraps around */\n  wrap?: boolean;\n  /** Orientation for arrow keys */\n  orientation?: 'horizontal' | 'vertical' | 'both';\n  /** Called when active index changes */\n  onChange?: (index: number) => void;\n}\n\nexport interface RovingTabindexItem {\n  /** Props to spread on the item element */\n  props: {\n    tabIndex: number;\n    onKeyDown: (event: React.KeyboardEvent) => void;\n    onFocus: () => void;\n  };\n  /** Whether this item is the active/focusable one */\n  isActive: boolean;\n}\n\n/**\n * Hook for roving tabindex pattern\n *\n * @example\n * ```tsx\n * function Toolbar() {\n *   const { getItemProps, activeIndex } = useRovingTabindex({\n *     itemCount: 3,\n *     orientation: 'horizontal',\n *   });\n *\n *   return (\n *     <div role=\"toolbar\">\n *       <button {...getItemProps(0)}>Cut</button>\n *       <button {...getItemProps(1)}>Copy</button>\n *       <button {...getItemProps(2)}>Paste</button>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useRovingTabindex(options: UseRovingTabindexOptions & { itemCount: number }) {\n  const {\n    itemCount,\n    initialIndex = 0,\n    wrap = true,\n    orientation = 'both',\n    onChange,\n  } = options;\n\n  const [activeIndex, setActiveIndex] = useState(initialIndex);\n  const itemRefs = useRef<(HTMLElement | null)[]>([]);\n\n  // Reset if item count changes\n  useEffect(() => {\n    if (activeIndex >= itemCount) {\n      setActiveIndex(Math.max(0, itemCount - 1));\n    }\n  }, [itemCount, activeIndex]);\n\n  const moveTo = useCallback(\n    (index: number) => {\n      let newIndex = index;\n      if (newIndex < 0) {\n        newIndex = wrap ? itemCount - 1 : 0;\n      } else if (newIndex >= itemCount) {\n        newIndex = wrap ? 0 : itemCount - 1;\n      }\n\n      setActiveIndex(newIndex);\n      onChange?.(newIndex);\n\n      // Focus the element\n      const element = itemRefs.current[newIndex];\n      element?.focus();\n    },\n    [itemCount, wrap, onChange]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent, index: number) => {\n      let handled = false;\n\n      switch (event.key) {\n        case 'ArrowRight':\n          if (orientation === 'horizontal' || orientation === 'both') {\n            moveTo(index + 1);\n            handled = true;\n          }\n          break;\n        case 'ArrowLeft':\n          if (orientation === 'horizontal' || orientation === 'both') {\n            moveTo(index - 1);\n            handled = true;\n          }\n          break;\n        case 'ArrowDown':\n          if (orientation === 'vertical' || orientation === 'both') {\n            moveTo(index + 1);\n            handled = true;\n          }\n          break;\n        case 'ArrowUp':\n          if (orientation === 'vertical' || orientation === 'both') {\n            moveTo(index - 1);\n            handled = true;\n          }\n          break;\n        case 'Home':\n          moveTo(0);\n          handled = true;\n          break;\n        case 'End':\n          moveTo(itemCount - 1);\n          handled = true;\n          break;\n      }\n\n      if (handled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [orientation, moveTo, itemCount]\n  );\n\n  const getItemProps = useCallback(\n    (index: number) => ({\n      ref: (el: HTMLElement | null) => {\n        itemRefs.current[index] = el;\n      },\n      tabIndex: index === activeIndex ? 0 : -1,\n      onKeyDown: (event: React.KeyboardEvent) => handleKeyDown(event, index),\n      onFocus: () => {\n        if (index !== activeIndex) {\n          setActiveIndex(index);\n          onChange?.(index);\n        }\n      },\n    }),\n    [activeIndex, handleKeyDown, onChange]\n  );\n\n  return {\n    activeIndex,\n    setActiveIndex: moveTo,\n    getItemProps,\n    first: () => moveTo(0),\n    last: () => moveTo(itemCount - 1),\n    next: () => moveTo(activeIndex + 1),\n    previous: () => moveTo(activeIndex - 1),\n  };\n}\n\n/**\n * Simplified roving tabindex for items with known IDs\n */\nexport function useRovingTabindexMap<T extends string>(\n  ids: T[],\n  options: Omit<UseRovingTabindexOptions, 'itemCount'> = {}\n) {\n  const roving = useRovingTabindex({\n    ...options,\n    itemCount: ids.length,\n  });\n\n  const getItemProps = useCallback(\n    (id: T) => {\n      const index = ids.indexOf(id);\n      if (index === -1) {\n        throw new Error(`Unknown item ID: ${id}`);\n      }\n      return roving.getItemProps(index);\n    },\n    [ids, roving]\n  );\n\n  const activeId = ids[roving.activeIndex];\n\n  return {\n    ...roving,\n    activeId,\n    getItemProps,\n    setActiveId: (id: T) => {\n      const index = ids.indexOf(id);\n      if (index !== -1) {\n        roving.setActiveIndex(index);\n      }\n    },\n  };\n}\n","import React, { forwardRef, useCallback, useEffect, useState } from 'react';\nimport { createComponentWarnings } from '@a11y-core/core';\nimport { useId } from '../../hooks/use-id';\nimport { useKeyboard } from '../../hooks/use-keyboard';\nimport { useAnnouncer } from '../../hooks/use-announcer';\n\nconst warnings = createComponentWarnings('Switch');\n\nexport interface SwitchProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onChange' | 'role'\n> {\n  /** Controlled checked state */\n  checked?: boolean;\n  /** Default checked state (uncontrolled) */\n  defaultChecked?: boolean;\n  /** Called when the switch state changes */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Accessible label for the switch (renders visible label next to switch) */\n  label?: string;\n  /** Whether the switch is disabled */\n  disabled?: boolean;\n  /** Remove default styles to allow full customization via className */\n  unstyled?: boolean;\n  /** Custom class name */\n  className?: string;\n  /** Size variant */\n  size?: 'sm' | 'md' | 'lg';\n}\n\n/**\n * Switch component - An accessible toggle switch (on/off control)\n *\n * Follows WAI-ARIA Switch pattern with proper keyboard support and screen reader announcements.\n *\n * @example\n * ```tsx\n * // Uncontrolled\n * <Switch defaultChecked={true} label=\"Enable notifications\" />\n *\n * // Controlled\n * <Switch\n *   checked={enabled}\n *   onCheckedChange={setEnabled}\n *   aria-label=\"Dark mode\"\n * />\n *\n * // With visible label\n * <Switch checked={enabled} onCheckedChange={setEnabled} label=\"Dark mode\" />\n * ```\n */\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n  function Switch(\n    {\n      checked: controlledChecked,\n      defaultChecked = false,\n      onCheckedChange,\n      label,\n      disabled = false,\n      unstyled = false,\n      className,\n      size = 'md',\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      onClick,\n      ...props\n    },\n    ref\n  ) {\n    const id = useId('switch');\n    const labelId = `${id}-label`;\n    const { announce } = useAnnouncer();\n\n    // Support both controlled and uncontrolled modes\n    const [uncontrolledChecked, setUncontrolledChecked] =\n      useState(defaultChecked);\n    const isControlled = controlledChecked !== undefined;\n    const checked = isControlled ? controlledChecked : uncontrolledChecked;\n\n    // Warn if no accessible label is provided\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledby) {\n        warnings.warning(\n          'Switch has no accessible label. Screen readers need this to identify the switch.',\n          'Add label=\"Description\", aria-label=\"...\", or aria-labelledby=\"...\"'\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledby]);\n\n    const toggleSwitch = useCallback(() => {\n      if (disabled) return;\n\n      const newChecked = !checked;\n\n      if (!isControlled) {\n        setUncontrolledChecked(newChecked);\n      }\n\n      onCheckedChange?.(newChecked);\n\n      // Announce state change to screen readers\n      const labelText = label || ariaLabel || 'Switch';\n      announce(`${labelText} ${newChecked ? 'on' : 'off'}`);\n    }, [\n      checked,\n      disabled,\n      isControlled,\n      onCheckedChange,\n      label,\n      ariaLabel,\n      announce,\n    ]);\n\n    const handleClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) {\n          toggleSwitch();\n        }\n      },\n      [onClick, toggleSwitch]\n    );\n\n    // Keyboard handling: Space and Enter should toggle\n    const keyboardProps = useKeyboard(\n      {\n        ' ': () => {\n          // Space toggles the switch\n          toggleSwitch();\n        },\n        Enter: () => {\n          // Enter also toggles (some users prefer Enter over Space)\n          toggleSwitch();\n        },\n      },\n      { preventDefault: true }\n    );\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      props.onKeyDown?.(event);\n      if (!event.defaultPrevented) {\n        keyboardProps.onKeyDown(event);\n      }\n    };\n\n    // Compute ARIA label\n    const computedAriaLabel = ariaLabel;\n    const computedAriaLabelledby =\n      ariaLabelledby || (label ? labelId : undefined);\n\n    // Structural styles (always applied)\n    const wrapperStructuralStyles: React.CSSProperties = {\n      display: 'inline-flex',\n      alignItems: 'center',\n    };\n\n    // Size dimensions for structural styles\n    const sizes = {\n      sm: { width: 32, height: 18, thumb: 14, translate: 14 },\n      md: { width: 44, height: 24, thumb: 20, translate: 20 },\n      lg: { width: 56, height: 30, thumb: 26, translate: 26 },\n    };\n\n    const sizeConfig = sizes[size];\n\n    const trackStructuralStyles: React.CSSProperties = {\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      flexShrink: 0,\n      width: sizeConfig.width,\n      height: sizeConfig.height,\n      border: 'none',\n      padding: 2,\n      cursor: disabled ? 'not-allowed' : 'pointer',\n    };\n\n    const trackVisualStyles: React.CSSProperties = unstyled\n      ? {}\n      : {\n          backgroundColor: checked ? '#0066cc' : '#d1d5db',\n          borderRadius: sizeConfig.height / 2,\n          transition: 'background-color 0.2s ease',\n          opacity: disabled ? 0.5 : 1,\n        };\n\n    const thumbStructuralStyles: React.CSSProperties = {\n      position: 'absolute',\n      left: 2,\n      width: sizeConfig.thumb,\n      height: sizeConfig.thumb,\n      pointerEvents: 'none',\n      transform: checked\n        ? `translateX(${sizeConfig.translate}px)`\n        : 'translateX(0)',\n    };\n\n    const thumbVisualStyles: React.CSSProperties = unstyled\n      ? {}\n      : {\n          backgroundColor: 'white',\n          borderRadius: '50%',\n          boxShadow: '0 1px 3px rgba(0, 0, 0, 0.2)',\n          transition: 'transform 0.2s ease',\n        };\n\n    const labelStyles: React.CSSProperties = unstyled\n      ? {\n          marginLeft: 8,\n          userSelect: 'none',\n          cursor: disabled ? 'not-allowed' : 'pointer',\n        }\n      : {\n          marginLeft: 8,\n          userSelect: 'none',\n          cursor: disabled ? 'not-allowed' : 'pointer',\n          opacity: disabled ? 0.5 : 1,\n        };\n\n    return (\n      <div\n        style={wrapperStructuralStyles}\n        data-a11y-core-switch-wrapper\n        data-size={size}\n      >\n        <button\n          ref={ref}\n          type=\"button\"\n          role=\"switch\"\n          aria-checked={checked}\n          aria-label={computedAriaLabel}\n          aria-labelledby={computedAriaLabelledby}\n          disabled={disabled}\n          onClick={handleClick}\n          onKeyDown={handleKeyDown}\n          className={className}\n          style={{ ...trackStructuralStyles, ...trackVisualStyles }}\n          tabIndex={disabled ? -1 : 0}\n          data-a11y-core-switch\n          data-checked={checked}\n          data-disabled={disabled || undefined}\n          data-size={size}\n          {...props}\n          // CSS-in-JS focus-visible styles\n          onFocus={(e) => {\n            // Add focus-visible indicator\n            if (!unstyled) {\n              e.currentTarget.style.outline = '2px solid #0066cc';\n              e.currentTarget.style.outlineOffset = '2px';\n            }\n            props.onFocus?.(e);\n          }}\n          onBlur={(e) => {\n            // Remove focus indicator on blur\n            if (!unstyled) {\n              e.currentTarget.style.outline = 'none';\n            }\n            props.onBlur?.(e);\n          }}\n        >\n          <span\n            style={{ ...thumbStructuralStyles, ...thumbVisualStyles }}\n            data-a11y-core-switch-thumb\n            aria-hidden=\"true\"\n          />\n        </button>\n        {label && (\n          <label\n            id={labelId}\n            onClick={disabled ? undefined : () => toggleSwitch()}\n            style={labelStyles}\n            data-a11y-core-switch-label\n          >\n            {label}\n          </label>\n        )}\n      </div>\n    );\n  }\n);\n\nSwitch.displayName = 'Switch';\n"]}

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@a11y-core/react",
+  "version": "0.1.0-alpha.0",
+  "description": "Accessible React components that just work",
+  "author": "Ivan Trajkovski",
+  "license": "MIT",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./dialog": {
+      "types": "./dist/components/dialog/index.d.ts",
+      "import": "./dist/components/dialog/index.js",
+      "require": "./dist/components/dialog/index.cjs"
+    },
+    "./menu": {
+      "types": "./dist/components/menu/index.d.ts",
+      "import": "./dist/components/menu/index.js",
+      "require": "./dist/components/menu/index.cjs"
+    },
+    "./tabs": {
+      "types": "./dist/components/tabs/index.d.ts",
+      "import": "./dist/components/tabs/index.js",
+      "require": "./dist/components/tabs/index.cjs"
+    },
+    "./toast": {
+      "types": "./dist/components/toast/index.d.ts",
+      "import": "./dist/components/toast/index.js",
+      "require": "./dist/components/toast/index.cjs"
+    },
+    "./combobox": {
+      "types": "./dist/components/combobox/index.d.ts",
+      "import": "./dist/components/combobox/index.js",
+      "require": "./dist/components/combobox/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist node_modules"
+  },
+  "dependencies": {
+    "@a11y-core/core": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.1.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "jsdom": "^23.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "vitest": "^1.2.0"
+  },
+  "sideEffects": false,
+  "keywords": [
+    "accessibility",
+    "a11y",
+    "react",
+    "components",
+    "dialog",
+    "modal",
+    "menu",
+    "tabs",
+    "wcag",
+    "aria"
+  ]
+}