@compa11y/react 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -229,191 +229,2801 @@ function useRovingTabindexMap(ids, options = {}) {
     }
   };
 }
-var warnings = core.createComponentWarnings("Switch");
-var Switch = react.forwardRef(
-  function Switch2({
+var warnings = core.createComponentWarnings("Select");
+var SelectContext = react.createContext(null);
+function useSelectContext() {
+  const context = react.useContext(SelectContext);
+  if (!context) {
+    throw new Error(
+      "Select compound components must be used within a Select component"
+    );
+  }
+  return context;
+}
+function findNextEnabledIndex(options, currentIndex, direction) {
+  const length = options.length;
+  let index = currentIndex + direction;
+  if (index < 0) index = length - 1;
+  if (index >= length) index = 0;
+  const startIndex = index;
+  while (options[index]?.disabled) {
+    index += direction;
+    if (index < 0) index = length - 1;
+    if (index >= length) index = 0;
+    if (index === startIndex) return -1;
+  }
+  return index;
+}
+function findFirstEnabledIndex(options) {
+  return options.findIndex((o) => !o.disabled);
+}
+function findLastEnabledIndex(options) {
+  for (let i = options.length - 1; i >= 0; i--) {
+    if (!options[i]?.disabled) return i;
+  }
+  return -1;
+}
+function Select({
+  options,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  disabled = false,
+  placeholder = "Select an option...",
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  children
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = react.useState(
+    defaultValue ?? null
+  );
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [highlightedIndex, setHighlightedIndex] = react.useState(-1);
+  const triggerRef = react.useRef(null);
+  const selectedValue = controlledValue !== void 0 ? controlledValue : uncontrolledValue;
+  const triggerId = chunk52J4Z3QD_cjs.useId("select-trigger");
+  const listboxId = chunk52J4Z3QD_cjs.useId("select-listbox");
+  const baseOptionId = chunk52J4Z3QD_cjs.useId("select-option");
+  const setSelectedValue = react.useCallback(
+    (value) => {
+      if (controlledValue === void 0) {
+        setUncontrolledValue(value);
+      }
+      onValueChange?.(value);
+    },
+    [controlledValue, onValueChange]
+  );
+  const getOptionId = react.useCallback(
+    (index) => `${baseOptionId}-${index}`,
+    [baseOptionId]
+  );
+  const onSelect = react.useCallback(
+    (option) => {
+      setSelectedValue(option.value);
+      setIsOpen(false);
+      setHighlightedIndex(-1);
+      triggerRef.current?.focus();
+    },
+    [setSelectedValue]
+  );
+  react.useEffect(() => {
+    if (!ariaLabel && !ariaLabelledBy) {
+      warnings.warning(
+        "Select has no accessible label.",
+        "Add aria-label or aria-labelledby prop."
+      );
+    }
+  }, [ariaLabel, ariaLabelledBy]);
+  const contextValue = {
+    selectedValue,
+    setSelectedValue,
+    isOpen,
+    setIsOpen,
+    highlightedIndex,
+    setHighlightedIndex,
+    options,
+    triggerId,
+    listboxId,
+    getOptionId,
+    onSelect,
+    triggerRef,
+    placeholder,
+    disabled
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-compa11y-select": true, "data-disabled": disabled || void 0, children }) });
+}
+var SelectTrigger = react.forwardRef(
+  function SelectTrigger2({ onKeyDown, onClick, onBlur, ...props }, forwardedRef) {
+    const {
+      selectedValue,
+      isOpen,
+      setIsOpen,
+      highlightedIndex,
+      setHighlightedIndex,
+      options,
+      triggerId,
+      listboxId,
+      getOptionId,
+      onSelect,
+      triggerRef,
+      placeholder,
+      disabled
+    } = useSelectContext();
+    const { announce: announce2 } = chunkRBDQCIS7_cjs.useAnnouncer();
+    const typeAheadProps = chunkGDLOJH6K_cjs.useTypeAhead(
+      options.map((o) => o.label),
+      (match) => {
+        const index = options.findIndex(
+          (o) => o.label === match && !o.disabled
+        );
+        if (index >= 0) {
+          if (!isOpen) {
+            setIsOpen(true);
+          }
+          setHighlightedIndex(index);
+        }
+      },
+      { disabled }
+    );
+    const openAndHighlight = react.useCallback(
+      (preferLast = false) => {
+        setIsOpen(true);
+        const selectedIndex = options.findIndex(
+          (o) => o.value === selectedValue
+        );
+        if (selectedIndex >= 0) {
+          setHighlightedIndex(selectedIndex);
+        } else {
+          setHighlightedIndex(
+            preferLast ? findLastEnabledIndex(options) : findFirstEnabledIndex(options)
+          );
+        }
+      },
+      [options, selectedValue, setIsOpen, setHighlightedIndex]
+    );
+    const keyboardProps = chunkGDLOJH6K_cjs.useKeyboard(
+      {
+        ArrowDown: () => {
+          if (!isOpen) {
+            openAndHighlight();
+          } else {
+            const next = findNextEnabledIndex(options, highlightedIndex, 1);
+            if (next >= 0) setHighlightedIndex(next);
+          }
+        },
+        ArrowUp: () => {
+          if (!isOpen) {
+            openAndHighlight(true);
+          } else {
+            const prev = findNextEnabledIndex(options, highlightedIndex, -1);
+            if (prev >= 0) setHighlightedIndex(prev);
+          }
+        },
+        Enter: () => {
+          if (isOpen && highlightedIndex >= 0) {
+            const option = options[highlightedIndex];
+            if (option && !option.disabled) {
+              onSelect(option);
+              announce2(`${option.label} selected`);
+            }
+          } else if (!isOpen) {
+            openAndHighlight();
+          }
+        },
+        " ": () => {
+          if (isOpen && highlightedIndex >= 0) {
+            const option = options[highlightedIndex];
+            if (option && !option.disabled) {
+              onSelect(option);
+              announce2(`${option.label} selected`);
+            }
+          } else if (!isOpen) {
+            openAndHighlight();
+          }
+        },
+        Escape: () => {
+          if (isOpen) {
+            setIsOpen(false);
+            setHighlightedIndex(-1);
+          }
+        },
+        Home: () => {
+          if (isOpen) {
+            setHighlightedIndex(findFirstEnabledIndex(options));
+          }
+        },
+        End: () => {
+          if (isOpen) {
+            setHighlightedIndex(findLastEnabledIndex(options));
+          }
+        },
+        Tab: () => {
+          if (isOpen) {
+            setIsOpen(false);
+            setHighlightedIndex(-1);
+          }
+          return false;
+        }
+      },
+      { preventDefault: true, stopPropagation: false }
+    );
+    const handleKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (!event.defaultPrevented) {
+        keyboardProps.onKeyDown(event);
+      }
+      if (!event.defaultPrevented) {
+        typeAheadProps.onKeyDown(event);
+      }
+    };
+    const handleClick = (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented && !disabled) {
+        if (isOpen) {
+          setIsOpen(false);
+          setHighlightedIndex(-1);
+        } else {
+          openAndHighlight();
+        }
+      }
+    };
+    const handleBlur = (event) => {
+      onBlur?.(event);
+      setTimeout(() => {
+        setIsOpen(false);
+        setHighlightedIndex(-1);
+      }, 150);
+    };
+    const activeDescendant = isOpen && highlightedIndex >= 0 ? getOptionId(highlightedIndex) : void 0;
+    const selectedOption = options.find((o) => o.value === selectedValue);
+    const displayText = selectedOption?.label ?? placeholder;
+    const setRefs = react.useCallback(
+      (node) => {
+        triggerRef.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      [forwardedRef, triggerRef]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref: setRefs,
+        id: triggerId,
+        type: "button",
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-controls": listboxId,
+        "aria-haspopup": "listbox",
+        "aria-activedescendant": activeDescendant,
+        disabled,
+        onKeyDown: handleKeyDown,
+        onClick: handleClick,
+        onBlur: handleBlur,
+        "data-compa11y-select-trigger": true,
+        "data-placeholder": !selectedOption || void 0,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "data-compa11y-select-value": true, children: displayText }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", "data-compa11y-select-chevron": true, children: "\u25BC" })
+        ]
+      }
+    );
+  }
+);
+var SelectListbox = react.forwardRef(
+  function SelectListbox2({ children, style, ...props }, forwardedRef) {
+    const { isOpen, options, listboxId, triggerId } = useSelectContext();
+    const { announce: announce2 } = chunkRBDQCIS7_cjs.useAnnouncer();
+    const internalRef = react.useRef(null);
+    const [position, setPosition] = react.useState("bottom");
+    react.useEffect(() => {
+      if (isOpen) {
+        announce2(
+          `${options.length} option${options.length === 1 ? "" : "s"} available`
+        );
+      }
+    }, [isOpen, options.length, announce2]);
+    react.useLayoutEffect(() => {
+      if (isOpen && internalRef.current) {
+        const listbox = internalRef.current;
+        const rect = listbox.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const spaceBelow = viewportHeight - rect.top;
+        const spaceAbove = rect.top;
+        const listboxHeight = Math.min(rect.height, 200);
+        if (spaceBelow < listboxHeight + 50 && spaceAbove > spaceBelow) {
+          setPosition("top");
+        } else {
+          setPosition("bottom");
+        }
+      }
+    }, [isOpen]);
+    const handleMouseDown = (event) => {
+      event.preventDefault();
+    };
+    const setRefs = react.useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      [forwardedRef]
+    );
+    if (!isOpen) {
+      return null;
+    }
+    const positionStyle = position === "top" ? { bottom: "100%", top: "auto", marginBottom: "4px", marginTop: 0 } : {};
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "ul",
+      {
+        ref: setRefs,
+        id: listboxId,
+        role: "listbox",
+        "aria-labelledby": triggerId,
+        style: { ...style, ...positionStyle },
+        onMouseDown: handleMouseDown,
+        "data-compa11y-select-listbox": true,
+        "data-position": position,
+        ...props,
+        children: children ?? options.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          SelectOptionItem,
+          {
+            option,
+            index
+          },
+          option.value
+        ))
+      }
+    );
+  }
+);
+var SelectOptionItem = react.forwardRef(
+  function SelectOptionItem2({ option, index, onClick, onMouseEnter, ...props }, forwardedRef) {
+    const {
+      selectedValue,
+      highlightedIndex,
+      setHighlightedIndex,
+      getOptionId,
+      onSelect
+    } = useSelectContext();
+    const { announce: announce2 } = chunkRBDQCIS7_cjs.useAnnouncer();
+    const internalRef = react.useRef(null);
+    const isSelected = selectedValue === option.value;
+    const isHighlighted = highlightedIndex === index;
+    const optionId = getOptionId(index);
+    react.useEffect(() => {
+      if (isHighlighted && internalRef.current) {
+        internalRef.current.scrollIntoView({
+          block: "nearest",
+          behavior: "smooth"
+        });
+      }
+    }, [isHighlighted]);
+    const handleClick = (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented && !option.disabled) {
+        onSelect(option);
+        announce2(`${option.label} selected`);
+      }
+    };
+    const handleMouseEnter = (event) => {
+      onMouseEnter?.(event);
+      if (!option.disabled) {
+        setHighlightedIndex(index);
+      }
+    };
+    const setRefs = react.useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      [forwardedRef]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        ref: setRefs,
+        id: optionId,
+        role: "option",
+        "aria-selected": isSelected,
+        "aria-disabled": option.disabled,
+        "data-highlighted": isHighlighted,
+        "data-selected": isSelected,
+        "data-disabled": option.disabled,
+        onClick: handleClick,
+        onMouseEnter: handleMouseEnter,
+        "data-compa11y-select-option": true,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "data-compa11y-select-option-text": true, children: option.label }),
+          isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", "data-compa11y-select-check": true, children: "\u2713" })
+        ]
+      }
+    );
+  }
+);
+var SelectCompound = Object.assign(Select, {
+  Trigger: SelectTrigger,
+  Listbox: SelectListbox,
+  Option: SelectOptionItem
+});
+var warnings2 = core.createComponentWarnings("Checkbox");
+var CheckmarkIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    "aria-hidden": "true",
+    style: { display: "block" },
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M2.5 6L5 8.5L9.5 3.5",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+var IndeterminateIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    "aria-hidden": "true",
+    style: { display: "block" },
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M3 6H9",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      }
+    )
+  }
+);
+var CheckboxGroupContext = react.createContext(
+  null
+);
+function useCheckboxGroupContext() {
+  return react.useContext(CheckboxGroupContext);
+}
+var CheckboxGroup = react.forwardRef(
+  function CheckboxGroup2({
+    value: controlledValue,
+    defaultValue = [],
+    onValueChange,
+    disabled = false,
+    legend,
+    error,
+    orientation = "vertical",
+    name: providedName,
+    unstyled = false,
+    className = "",
+    children,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
+  }, ref) {
+    const generatedName = chunk52J4Z3QD_cjs.useId("checkbox-group");
+    const name = providedName || generatedName;
+    const errorId = chunk52J4Z3QD_cjs.useId("checkbox-group-error");
+    const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
+    const isControlled = controlledValue !== void 0;
+    const value = isControlled ? controlledValue : uncontrolledValue;
+    react.useEffect(() => {
+      if (!legend && !ariaLabel && !ariaLabelledBy) {
+        warnings2.warning(
+          "CheckboxGroup has no accessible label. Screen readers need this to identify the group.",
+          'Add legend="...", aria-label="...", or aria-labelledby="..."'
+        );
+      }
+    }, [legend, ariaLabel, ariaLabelledBy]);
+    const handleCheckboxChange = react.useCallback(
+      (checkboxValue, checked) => {
+        const currentValue = isControlled ? controlledValue : uncontrolledValue;
+        const newValue = checked ? [...currentValue, checkboxValue] : currentValue.filter((v) => v !== checkboxValue);
+        if (!isControlled) {
+          setUncontrolledValue(newValue);
+        }
+        onValueChange?.(newValue);
+      },
+      [isControlled, controlledValue, uncontrolledValue, onValueChange]
+    );
+    const contextValue = {
+      name,
+      value,
+      disabled,
+      unstyled,
+      onCheckboxChange: handleCheckboxChange
+    };
+    const hasError = Boolean(error);
+    const fieldsetStyle = {
+      border: "none",
+      margin: 0,
+      padding: 0,
+      minWidth: 0
+    };
+    const legendStyle = unstyled ? { padding: 0, marginBottom: "0.5rem" } : {
+      padding: 0,
+      marginBottom: "0.5rem",
+      fontWeight: 600
+    };
+    const itemsStyle = {
+      display: "flex",
+      flexDirection: orientation === "horizontal" ? "row" : "column",
+      flexWrap: orientation === "horizontal" ? "wrap" : void 0,
+      gap: "var(--compa11y-checkbox-group-gap, 0.75rem)"
+    };
+    const errorStyle = unstyled ? { marginTop: "0.25rem" } : {
+      color: "var(--compa11y-checkbox-group-error-color, #ef4444)",
+      fontSize: "0.8125rem",
+      marginTop: "0.25rem"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(CheckboxGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "fieldset",
+      {
+        ref,
+        className,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": hasError ? errorId : void 0,
+        disabled,
+        "data-compa11y-checkbox-group": "",
+        "data-orientation": orientation,
+        "data-disabled": disabled ? "true" : void 0,
+        style: fieldsetStyle,
+        children: [
+          legend && /* @__PURE__ */ jsxRuntime.jsx(
+            "legend",
+            {
+              "data-compa11y-checkbox-group-legend": "",
+              style: legendStyle,
+              children: legend
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: itemsStyle, children }),
+          hasError && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: errorId,
+              role: "alert",
+              "data-compa11y-checkbox-group-error": "",
+              style: errorStyle,
+              children: error
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+CheckboxGroup.displayName = "CheckboxGroup";
+var Checkbox = react.forwardRef(
+  function Checkbox2({
     checked: controlledChecked,
     defaultChecked = false,
     onCheckedChange,
+    indeterminate = false,
+    label,
+    hint,
+    error,
+    disabled: localDisabled = false,
+    value,
+    required = false,
+    unstyled: localUnstyled,
+    className = "",
+    size = "md",
+    name: localName,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": externalDescribedBy,
+    onClick,
+    onFocus,
+    onBlur,
+    ...props
+  }, ref) {
+    const groupContext = useCheckboxGroupContext();
+    const id = chunk52J4Z3QD_cjs.useId("checkbox");
+    const fieldId = `${id}-input`;
+    const labelId = `${id}-label`;
+    const hintId = `${id}-hint`;
+    const errorId = `${id}-error`;
+    const { announce: announce2 } = chunkRBDQCIS7_cjs.useAnnouncer();
+    const { isFocusVisible, focusProps } = useFocusVisible();
+    const isInGroup = groupContext !== null;
+    const disabled = isInGroup ? groupContext.disabled || localDisabled : localDisabled;
+    const unstyled = localUnstyled ?? (isInGroup ? groupContext.unstyled : false);
+    const name = isInGroup ? groupContext.name : localName;
+    const [uncontrolledChecked, setUncontrolledChecked] = react.useState(defaultChecked);
+    const checked = isInGroup ? groupContext.value.includes(value || "") : controlledChecked !== void 0 ? controlledChecked : uncontrolledChecked;
+    const inputRef = react.useRef(null);
+    const mergedRef = react.useCallback(
+      (node) => {
+        inputRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    react.useEffect(() => {
+      if (inputRef.current) {
+        inputRef.current.indeterminate = indeterminate;
+      }
+    }, [indeterminate]);
+    react.useEffect(() => {
+      if (!label && !ariaLabel && !ariaLabelledBy) {
+        warnings2.warning(
+          "Checkbox has no accessible label. Screen readers need this to identify the checkbox.",
+          'Add label="...", aria-label="...", or aria-labelledby="..."'
+        );
+      }
+    }, [label, ariaLabel, ariaLabelledBy]);
+    const handleChange = react.useCallback(
+      (event) => {
+        const newChecked = event.target.checked;
+        if (isInGroup) {
+          groupContext.onCheckboxChange(value || "", newChecked);
+        } else {
+          if (controlledChecked === void 0) {
+            setUncontrolledChecked(newChecked);
+          }
+          onCheckedChange?.(newChecked);
+        }
+        const labelText = typeof label === "string" ? label : ariaLabel || "Checkbox";
+        announce2(`${labelText} ${newChecked ? "checked" : "unchecked"}`);
+      },
+      [
+        isInGroup,
+        groupContext,
+        value,
+        controlledChecked,
+        onCheckedChange,
+        label,
+        ariaLabel,
+        announce2
+      ]
+    );
+    const handleFocus = react.useCallback(
+      (event) => {
+        focusProps.onFocus();
+        onFocus?.(event);
+      },
+      [focusProps, onFocus]
+    );
+    const handleBlur = react.useCallback(
+      (event) => {
+        focusProps.onBlur();
+        onBlur?.(event);
+      },
+      [focusProps, onBlur]
+    );
+    const hasLabel = Boolean(label);
+    const hasHint = Boolean(hint);
+    const hasError = Boolean(error);
+    const describedByParts = [];
+    if (externalDescribedBy) describedByParts.push(externalDescribedBy);
+    if (hasHint) describedByParts.push(hintId);
+    if (hasError) describedByParts.push(errorId);
+    const describedBy = describedByParts.length ? describedByParts.join(" ") : void 0;
+    const sizes = {
+      sm: { box: 16 },
+      md: { box: 20 },
+      lg: { box: 24 }
+    };
+    const sizeConfig = sizes[size];
+    const wrapperStyle = {
+      display: "inline-flex",
+      alignItems: "flex-start",
+      gap: "0.5rem",
+      cursor: disabled ? "not-allowed" : "pointer",
+      userSelect: "none",
+      ...disabled && !unstyled ? { opacity: 0.5 } : {}
+    };
+    const controlStyle = {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0
+    };
+    const hiddenInputStyle = {
+      position: "absolute",
+      opacity: 0,
+      width: "100%",
+      height: "100%",
+      margin: 0,
+      cursor: "inherit",
+      zIndex: 1
+    };
+    const indicatorStyle = unstyled ? {} : {
+      width: sizeConfig.box,
+      height: sizeConfig.box,
+      minWidth: 24,
+      minHeight: 24,
+      border: checked || indeterminate ? "var(--compa11y-checkbox-checked-border, 2px solid #0066cc)" : "var(--compa11y-checkbox-border, 2px solid #666)",
+      borderRadius: "var(--compa11y-checkbox-radius, 3px)",
+      background: checked || indeterminate ? "var(--compa11y-checkbox-checked-bg, #0066cc)" : "var(--compa11y-checkbox-bg, white)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      transition: "all 0.15s ease",
+      pointerEvents: "none",
+      color: "var(--compa11y-checkbox-check-color, white)",
+      ...isFocusVisible ? {
+        outline: "2px solid var(--compa11y-focus-color, #0066cc)",
+        outlineOffset: "2px"
+      } : {}
+    };
+    const contentStyle = {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.125rem",
+      paddingTop: "0.125rem"
+    };
+    const labelStyle = unstyled ? { cursor: "inherit" } : {
+      cursor: "inherit",
+      color: "var(--compa11y-checkbox-label-color, inherit)"
+    };
+    const hintStyle = unstyled ? {} : {
+      color: "var(--compa11y-checkbox-hint-color, #666)",
+      fontSize: "0.8125rem"
+    };
+    const errorStyles = unstyled ? {} : {
+      color: "var(--compa11y-checkbox-error-color, #ef4444)",
+      fontSize: "0.8125rem"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className,
+        "data-compa11y-checkbox": "",
+        "data-checked": checked ? "true" : "false",
+        "data-indeterminate": indeterminate ? "true" : void 0,
+        "data-disabled": disabled ? "true" : void 0,
+        "data-size": size,
+        style: wrapperStyle,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: controlStyle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: mergedRef,
+                type: "checkbox",
+                id: fieldId,
+                name,
+                value,
+                checked,
+                onChange: handleChange,
+                onClick,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                disabled,
+                required,
+                "aria-required": required || void 0,
+                "aria-invalid": hasError || void 0,
+                "aria-label": !hasLabel && !ariaLabelledBy ? ariaLabel : void 0,
+                "aria-labelledby": ariaLabelledBy || (hasLabel ? labelId : void 0),
+                "aria-describedby": describedBy,
+                "aria-checked": indeterminate ? "mixed" : checked,
+                tabIndex: disabled ? -1 : 0,
+                style: hiddenInputStyle,
+                ...props
+              }
+            ),
+            !unstyled && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                "data-compa11y-checkbox-indicator": "",
+                "aria-hidden": "true",
+                style: indicatorStyle,
+                children: [
+                  checked && !indeterminate && /* @__PURE__ */ jsxRuntime.jsx(CheckmarkIcon, {}),
+                  indeterminate && /* @__PURE__ */ jsxRuntime.jsx(IndeterminateIcon, {})
+                ]
+              }
+            )
+          ] }),
+          (hasLabel || hasHint || hasError) && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle, children: [
+            hasLabel && /* @__PURE__ */ jsxRuntime.jsxs(
+              "label",
+              {
+                htmlFor: fieldId,
+                id: labelId,
+                "data-compa11y-checkbox-label": "",
+                style: labelStyle,
+                children: [
+                  label,
+                  required && /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      style: {
+                        color: "var(--compa11y-checkbox-required-color, #ef4444)",
+                        marginLeft: "0.125rem"
+                      },
+                      children: "*"
+                    }
+                  )
+                ]
+              }
+            ),
+            hasHint && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                id: hintId,
+                "data-compa11y-checkbox-hint": "",
+                style: hintStyle,
+                children: hint
+              }
+            ),
+            hasError && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                id: errorId,
+                role: "alert",
+                "data-compa11y-checkbox-error": "",
+                style: errorStyles,
+                children: error
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+var CheckboxIndicator = react.forwardRef(function CheckboxIndicator2({ children, className }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className,
+      "data-compa11y-checkbox-indicator": "",
+      "aria-hidden": "true",
+      children
+    }
+  );
+});
+CheckboxIndicator.displayName = "CheckboxIndicator";
+var CheckboxCompound = Object.assign(Checkbox, {
+  Group: CheckboxGroup,
+  Indicator: CheckboxIndicator
+});
+var warnings3 = core.createComponentWarnings("RadioGroup");
+var RadioGroupContext = react.createContext(null);
+function useRadioGroupContext() {
+  const context = react.useContext(RadioGroupContext);
+  if (!context) {
+    throw new Error(
+      "[Compa11y RadioGroup]: Radio must be used within a RadioGroup."
+    );
+  }
+  return context;
+}
+var RadioGroup = react.forwardRef(
+  function RadioGroup2({
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    disabled = false,
+    discoverable = true,
+    required = false,
+    orientation = "vertical",
+    name: providedName,
+    legend,
+    hint,
+    error,
+    unstyled = false,
+    className = "",
+    children,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
+  }, ref) {
+    const generatedName = chunk52J4Z3QD_cjs.useId("radiogroup");
+    const name = providedName || generatedName;
+    const hintId = chunk52J4Z3QD_cjs.useId("radiogroup-hint");
+    const errorId = chunk52J4Z3QD_cjs.useId("radiogroup-error");
+    const [uncontrolledValue, setUncontrolledValue] = react.useState(
+      defaultValue ?? null
+    );
+    const isControlled = controlledValue !== void 0;
+    const value = isControlled ? controlledValue : uncontrolledValue;
+    const radiosRef = react.useRef(/* @__PURE__ */ new Map());
+    react.useEffect(() => {
+      if (!legend && !ariaLabel && !ariaLabelledBy) {
+        warnings3.warning(
+          "RadioGroup has no accessible label. Screen readers need this to identify the group.",
+          'Add legend="...", aria-label="...", or aria-labelledby="..."'
+        );
+      }
+    }, [legend, ariaLabel, ariaLabelledBy]);
+    const handleValueChange = react.useCallback(
+      (newValue) => {
+        if (disabled) return;
+        if (!isControlled) {
+          setUncontrolledValue(newValue);
+        }
+        onValueChange?.(newValue);
+      },
+      [disabled, isControlled, onValueChange]
+    );
+    const registerRadio = react.useCallback(
+      (radioValue, radioDisabled) => {
+        radiosRef.current.set(radioValue, radioDisabled);
+      },
+      []
+    );
+    const unregisterRadio = react.useCallback((radioValue) => {
+      radiosRef.current.delete(radioValue);
+    }, []);
+    const updateRadioDisabled = react.useCallback(
+      (radioValue, radioDisabled) => {
+        radiosRef.current.set(radioValue, radioDisabled);
+      },
+      []
+    );
+    const getEnabledRadioValues = react.useCallback(() => {
+      const values = [];
+      radiosRef.current.forEach((isDisabled, radioValue) => {
+        if (!isDisabled && !disabled) {
+          values.push(radioValue);
+        }
+      });
+      return values;
+    }, [disabled]);
+    const internalRef = react.useRef(null);
+    const groupRef = ref || internalRef;
+    const navigateWithRef = react.useCallback(
+      (direction) => {
+        const enabledValues = getEnabledRadioValues();
+        if (enabledValues.length === 0) return;
+        const currentIndex = value ? enabledValues.indexOf(value) : -1;
+        let nextIndex;
+        switch (direction) {
+          case "next":
+            nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % enabledValues.length;
+            break;
+          case "prev":
+            nextIndex = currentIndex < 0 ? enabledValues.length - 1 : (currentIndex - 1 + enabledValues.length) % enabledValues.length;
+            break;
+          case "first":
+            nextIndex = 0;
+            break;
+          case "last":
+            nextIndex = enabledValues.length - 1;
+            break;
+        }
+        const nextValue = enabledValues[nextIndex];
+        if (nextValue !== void 0) {
+          handleValueChange(nextValue);
+          const groupEl = typeof groupRef === "object" && groupRef ? groupRef.current : null;
+          if (groupEl) {
+            const input = groupEl.querySelector(
+              `input[type="radio"][value="${CSS.escape(nextValue)}"]`
+            );
+            input?.focus();
+          }
+        }
+      },
+      [getEnabledRadioValues, value, handleValueChange, groupRef]
+    );
+    const keyboardProps = chunkGDLOJH6K_cjs.useKeyboard(
+      {
+        ArrowDown: () => navigateWithRef("next"),
+        ArrowRight: () => navigateWithRef("next"),
+        ArrowUp: () => navigateWithRef("prev"),
+        ArrowLeft: () => navigateWithRef("prev"),
+        Home: () => navigateWithRef("first"),
+        End: () => navigateWithRef("last")
+      },
+      { preventDefault: true, stopPropagation: true, disabled }
+    );
+    const contextValue = {
+      name,
+      value: value ?? null,
+      disabled,
+      discoverable,
+      required,
+      unstyled,
+      orientation,
+      onValueChange: handleValueChange,
+      registerRadio,
+      unregisterRadio,
+      updateRadioDisabled
+    };
+    const describedByParts = [];
+    if (hint) describedByParts.push(hintId);
+    if (error) describedByParts.push(errorId);
+    const ariaDescribedBy = describedByParts.length > 0 ? describedByParts.join(" ") : void 0;
+    const groupContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: unstyled ? {
+            display: "flex",
+            flexDirection: orientation === "horizontal" ? "row" : "column"
+          } : {
+            display: "flex",
+            flexDirection: orientation === "horizontal" ? "row" : "column",
+            gap: "var(--compa11y-radio-gap, 0.75rem)"
+          },
+          children
+        }
+      ),
+      hint && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          id: hintId,
+          style: unstyled ? {} : {
+            color: "var(--compa11y-radio-group-hint-color, #666)",
+            fontSize: "0.8125rem",
+            marginTop: "0.25rem"
+          },
+          children: hint
+        }
+      ),
+      error && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          id: errorId,
+          role: "alert",
+          style: unstyled ? {} : {
+            color: "var(--compa11y-radio-group-error-color, #ef4444)",
+            fontSize: "0.8125rem",
+            marginTop: "0.25rem"
+          },
+          children: error
+        }
+      )
+    ] });
+    if (legend) {
+      return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "fieldset",
+        {
+          ref: groupRef,
+          role: "radiogroup",
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-orientation": orientation,
+          "aria-required": required || void 0,
+          "aria-disabled": disabled || void 0,
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": ariaDescribedBy,
+          className: `compa11y-radiogroup ${className}`.trim(),
+          "data-compa11y-radiogroup": "",
+          "data-orientation": orientation,
+          "data-disabled": disabled ? "true" : void 0,
+          "data-error": error ? "true" : void 0,
+          onKeyDown: keyboardProps.onKeyDown,
+          style: unstyled ? { border: "none", margin: 0, padding: 0, minWidth: 0 } : {
+            border: "none",
+            margin: 0,
+            padding: 0,
+            minWidth: 0
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "legend",
+              {
+                style: unstyled ? {} : {
+                  padding: 0,
+                  marginBottom: "var(--compa11y-radio-group-legend-gap, 0.5rem)",
+                  fontWeight: "var(--compa11y-radio-group-legend-weight, 600)",
+                  color: "var(--compa11y-radio-group-legend-color, inherit)",
+                  fontSize: "var(--compa11y-radio-group-legend-size, 1rem)"
+                },
+                children: [
+                  legend,
+                  required && !unstyled && /* @__PURE__ */ jsxRuntime.jsxs(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      style: {
+                        color: "var(--compa11y-radio-group-required-color, #ef4444)",
+                        marginLeft: "0.125rem"
+                      },
+                      children: [
+                        " ",
+                        "*"
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            groupContent
+          ]
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: groupRef,
+        role: "radiogroup",
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-orientation": orientation,
+        "aria-required": required || void 0,
+        "aria-disabled": disabled || void 0,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": ariaDescribedBy,
+        className: `compa11y-radiogroup ${className}`.trim(),
+        "data-compa11y-radiogroup": "",
+        "data-orientation": orientation,
+        "data-disabled": disabled ? "true" : void 0,
+        "data-error": error ? "true" : void 0,
+        onKeyDown: keyboardProps.onKeyDown,
+        children: groupContent
+      }
+    ) });
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+var Radio = react.forwardRef(
+  function Radio2({
+    value,
+    disabled: localDisabled = false,
+    discoverable: localDiscoverable,
     label,
+    hint,
+    unstyled: localUnstyled,
+    className = "",
+    children,
+    "aria-label": ariaLabel
+  }, ref) {
+    const context = useRadioGroupContext();
+    const generatedId = chunk52J4Z3QD_cjs.useId("radio");
+    const hintId = chunk52J4Z3QD_cjs.useId("radio-hint");
+    const disabled = context.disabled || localDisabled;
+    const discoverable = localDiscoverable ?? context.discoverable;
+    const unstyled = localUnstyled ?? context.unstyled;
+    const checked = context.value === value;
+    const { announce: announce2 } = chunkRBDQCIS7_cjs.useAnnouncer();
+    const { isFocusVisible, focusProps } = useFocusVisible();
+    const inputRef = react.useRef(null);
+    const mergedRef = react.useCallback(
+      (node) => {
+        inputRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    react.useEffect(() => {
+      context.registerRadio(value, disabled);
+      return () => context.unregisterRadio(value);
+    }, [value]);
+    react.useEffect(() => {
+      context.updateRadioDisabled(value, disabled);
+    }, [disabled, value]);
+    const handleChange = react.useCallback(
+      (event) => {
+        if (disabled) {
+          event.preventDefault();
+          return;
+        }
+        context.onValueChange(value);
+        const labelText = label || (typeof children === "string" ? children : null) || value;
+        announce2(`${labelText} selected`, { politeness: "polite" });
+      },
+      [disabled, context, value, label, children, announce2]
+    );
+    const handleClick = react.useCallback(
+      (event) => {
+        if (disabled) {
+          event.preventDefault();
+        }
+      },
+      [disabled]
+    );
+    const handleFocus = react.useCallback(
+      (_event) => {
+        focusProps.onFocus();
+        if (!checked && !disabled) {
+          context.onValueChange(value);
+        }
+      },
+      [focusProps, checked, disabled, context, value]
+    );
+    const handleBlur = react.useCallback(() => {
+      focusProps.onBlur();
+    }, [focusProps]);
+    const hasLabel = Boolean(children || label);
+    const labelContent = children || label;
+    const labelId = `${generatedId}-label`;
+    const hasHint = Boolean(hint);
+    const isFirstEnabled = (() => {
+      if (context.value !== null) return false;
+      const entries = Array.from(
+        inputRef.current?.closest('[role="radiogroup"]')?.querySelectorAll('input[type="radio"]') ?? []
+      );
+      for (const entry of entries) {
+        const input = entry;
+        if (!input.disabled && input.getAttribute("aria-disabled") !== "true") {
+          return input.value === value;
+        }
+      }
+      return false;
+    })();
+    const tabIndex = (() => {
+      if (disabled && !discoverable) return -1;
+      if (checked) return 0;
+      if (context.value === null && isFirstEnabled) return 0;
+      return -1;
+    })();
+    const useNativeDisabled = disabled && !discoverable;
+    const ariaDescribedBy = hasHint ? hintId : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        htmlFor: generatedId,
+        className: `compa11y-radio-wrapper ${className}`.trim(),
+        "data-compa11y-radio": "",
+        "data-value": value,
+        "data-checked": checked ? "true" : "false",
+        "data-disabled": disabled ? "true" : void 0,
+        style: unstyled ? {
+          display: "inline-flex",
+          alignItems: "flex-start",
+          cursor: disabled ? "not-allowed" : "pointer",
+          gap: "0.5rem"
+        } : {
+          display: "inline-flex",
+          alignItems: "flex-start",
+          gap: "var(--compa11y-radio-gap, 0.5rem)",
+          cursor: disabled ? "not-allowed" : "pointer",
+          userSelect: "none",
+          opacity: disabled ? 0.5 : 1
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                position: "relative",
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexShrink: 0
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    ref: mergedRef,
+                    type: "radio",
+                    id: generatedId,
+                    name: context.name,
+                    value,
+                    checked,
+                    onChange: handleChange,
+                    onClick: handleClick,
+                    onFocus: handleFocus,
+                    onBlur: handleBlur,
+                    disabled: useNativeDisabled,
+                    tabIndex,
+                    "aria-disabled": disabled ? "true" : void 0,
+                    "aria-label": !hasLabel ? ariaLabel : void 0,
+                    "aria-labelledby": hasLabel ? labelId : void 0,
+                    "aria-describedby": ariaDescribedBy,
+                    required: context.required,
+                    className: "compa11y-radio-input",
+                    style: {
+                      position: "absolute",
+                      opacity: 0,
+                      width: "var(--compa11y-radio-size, 1.25rem)",
+                      height: "var(--compa11y-radio-size, 1.25rem)",
+                      margin: 0,
+                      cursor: disabled ? "not-allowed" : "pointer"
+                    }
+                  }
+                ),
+                !unstyled && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "compa11y-radio-circle",
+                    style: {
+                      width: "var(--compa11y-radio-size, 1.25rem)",
+                      height: "var(--compa11y-radio-size, 1.25rem)",
+                      minWidth: "24px",
+                      minHeight: "24px",
+                      border: checked ? "var(--compa11y-radio-checked-border, 2px solid #0066cc)" : "var(--compa11y-radio-border, 2px solid #666)",
+                      borderRadius: "50%",
+                      background: checked ? "var(--compa11y-radio-checked-bg, #0066cc)" : "var(--compa11y-radio-bg, white)",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      flexShrink: 0,
+                      transition: "all 0.15s ease",
+                      pointerEvents: "none",
+                      ...isFocusVisible ? {
+                        outline: "2px solid var(--compa11y-focus-color, #0066cc)",
+                        outlineOffset: "2px"
+                      } : {}
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        "aria-hidden": "true",
+                        style: {
+                          width: "var(--compa11y-radio-dot-size, 0.5rem)",
+                          height: "var(--compa11y-radio-dot-size, 0.5rem)",
+                          borderRadius: "50%",
+                          background: "var(--compa11y-radio-dot-color, white)",
+                          opacity: checked ? 1 : 0,
+                          transform: checked ? "scale(1)" : "scale(0)",
+                          transition: "all 0.15s ease"
+                        }
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          (hasLabel || hasHint) && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: unstyled ? {} : {
+                display: "flex",
+                flexDirection: "column",
+                gap: "0.125rem",
+                paddingTop: "0.125rem"
+              },
+              children: [
+                hasLabel && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    id: labelId,
+                    className: "compa11y-radio-label",
+                    style: unstyled ? {} : {
+                      color: "var(--compa11y-radio-label-color, inherit)",
+                      fontSize: "var(--compa11y-radio-label-size, 1rem)"
+                    },
+                    children: labelContent
+                  }
+                ),
+                hasHint && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    id: hintId,
+                    className: "compa11y-radio-hint",
+                    style: unstyled ? {} : {
+                      color: "var(--compa11y-radio-hint-color, #666)",
+                      fontSize: "var(--compa11y-radio-hint-size, 0.8125rem)"
+                    },
+                    children: hint
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
+var RadioGroupCompound = Object.assign(RadioGroup, { Radio });
+var warnings4 = 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) {
+        warnings4.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";
+var warnings5 = core.createComponentWarnings("Listbox");
+var ListboxContext = react.createContext(null);
+function useListboxContext() {
+  const context = react.useContext(ListboxContext);
+  if (!context) {
+    throw new Error(
+      "[Compa11y Listbox]: Option/Group must be used within a Listbox."
+    );
+  }
+  return context;
+}
+var ListboxGroupContext = react.createContext({
+  groupDisabled: false
+});
+var Listbox = react.forwardRef(
+  function Listbox2({
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    multiple = false,
+    disabled = false,
+    discoverable = true,
+    orientation = "vertical",
+    unstyled = false,
+    className = "",
+    children,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
+  }, ref) {
+    const listboxId = chunk52J4Z3QD_cjs.useId("listbox");
+    const { announce: announce2 } = chunkRBDQCIS7_cjs.useAnnouncer();
+    const [uncontrolledValue, setUncontrolledValue] = react.useState(() => defaultValue ?? (multiple ? [] : ""));
+    const isControlled = controlledValue !== void 0;
+    const currentValue = isControlled ? controlledValue : uncontrolledValue;
+    const selectedValues = react.useMemo(() => {
+      if (multiple) {
+        return new Set(
+          Array.isArray(currentValue) ? currentValue : []
+        );
+      }
+      return new Set(currentValue ? [String(currentValue)] : []);
+    }, [currentValue, multiple]);
+    const [focusedValue, setFocusedValue] = react.useState(null);
+    const optionsRef = react.useRef(/* @__PURE__ */ new Map());
+    const [optionsVersion, setOptionsVersion] = react.useState(0);
+    const registerOption = react.useCallback(
+      (value, optDisabled, label) => {
+        optionsRef.current.set(value, { disabled: optDisabled, label });
+        setOptionsVersion((v) => v + 1);
+      },
+      []
+    );
+    const unregisterOption = react.useCallback((value) => {
+      optionsRef.current.delete(value);
+      setOptionsVersion((v) => v + 1);
+    }, []);
+    const updateOptionDisabled = react.useCallback(
+      (value, optDisabled) => {
+        const existing = optionsRef.current.get(value);
+        if (existing) {
+          optionsRef.current.set(value, { ...existing, disabled: optDisabled });
+        }
+      },
+      []
+    );
+    const enabledValues = react.useMemo(() => {
+      const result = [];
+      optionsRef.current.forEach((info, value) => {
+        if (!info.disabled && !disabled) {
+          result.push(value);
+        }
+      });
+      return result;
+    }, [optionsVersion, disabled]);
+    react.useEffect(() => {
+      if (!ariaLabel && !ariaLabelledBy) {
+        warnings5.warning(
+          "Listbox has no accessible label. Screen readers need this.",
+          'Add aria-label="..." or aria-labelledby="..."'
+        );
+      }
+    }, [ariaLabel, ariaLabelledBy]);
+    const isSelected = react.useCallback(
+      (value) => selectedValues.has(value),
+      [selectedValues]
+    );
+    const handleSelect = react.useCallback(
+      (optionValue) => {
+        if (disabled) return;
+        const info = optionsRef.current.get(optionValue);
+        if (info?.disabled) return;
+        let newValue;
+        const label = info?.label || optionValue;
+        if (multiple) {
+          const current = new Set(selectedValues);
+          if (current.has(optionValue)) {
+            current.delete(optionValue);
+            announce2(`${label} deselected`, { politeness: "polite" });
+          } else {
+            current.add(optionValue);
+            announce2(`${label} selected`, { politeness: "polite" });
+          }
+          newValue = Array.from(current);
+        } else {
+          newValue = optionValue;
+          announce2(`${label} selected`, { politeness: "polite" });
+        }
+        if (!isControlled) {
+          setUncontrolledValue(newValue);
+        }
+        onValueChange?.(newValue);
+      },
+      [disabled, multiple, selectedValues, isControlled, onValueChange, announce2]
+    );
+    const navigateOption = react.useCallback(
+      (direction) => {
+        if (enabledValues.length === 0) return;
+        const currentIndex = focusedValue ? enabledValues.indexOf(focusedValue) : -1;
+        let nextIndex;
+        switch (direction) {
+          case "next":
+            nextIndex = currentIndex < 0 ? 0 : Math.min(currentIndex + 1, enabledValues.length - 1);
+            break;
+          case "prev":
+            nextIndex = currentIndex < 0 ? enabledValues.length - 1 : Math.max(currentIndex - 1, 0);
+            break;
+          case "first":
+            nextIndex = 0;
+            break;
+          case "last":
+            nextIndex = enabledValues.length - 1;
+            break;
+        }
+        const nextValue = enabledValues[nextIndex];
+        if (nextValue !== void 0) {
+          setFocusedValue(nextValue);
+          if (!multiple) {
+            const info = optionsRef.current.get(nextValue);
+            const label = info?.label || nextValue;
+            let newVal = nextValue;
+            if (!isControlled) {
+              setUncontrolledValue(newVal);
+            }
+            onValueChange?.(newVal);
+            announce2(`${label} selected`, { politeness: "polite" });
+          } else {
+            const info = optionsRef.current.get(nextValue);
+            const label = info?.label || nextValue;
+            const sel = selectedValues.has(nextValue);
+            announce2(`${label}${sel ? ", selected" : ""}`, {
+              politeness: "polite"
+            });
+          }
+        }
+      },
+      [
+        enabledValues,
+        focusedValue,
+        multiple,
+        isControlled,
+        onValueChange,
+        announce2,
+        selectedValues
+      ]
+    );
+    const toggleFocusedOption = react.useCallback(() => {
+      if (focusedValue && multiple) {
+        handleSelect(focusedValue);
+      }
+    }, [focusedValue, multiple, handleSelect]);
+    const selectRangeToFirst = react.useCallback(() => {
+      if (!multiple || !focusedValue) return;
+      const currentIdx = enabledValues.indexOf(focusedValue);
+      if (currentIdx < 0) return;
+      const toSelect = enabledValues.slice(0, currentIdx + 1);
+      const newSet = new Set(selectedValues);
+      toSelect.forEach((v) => newSet.add(v));
+      const newValue = Array.from(newSet);
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onValueChange?.(newValue);
+      setFocusedValue(enabledValues[0] ?? null);
+      announce2(`${toSelect.length} items selected`, { politeness: "polite" });
+    }, [
+      multiple,
+      focusedValue,
+      enabledValues,
+      selectedValues,
+      isControlled,
+      onValueChange,
+      announce2
+    ]);
+    const selectRangeToLast = react.useCallback(() => {
+      if (!multiple || !focusedValue) return;
+      const currentIdx = enabledValues.indexOf(focusedValue);
+      if (currentIdx < 0) return;
+      const toSelect = enabledValues.slice(currentIdx);
+      const newSet = new Set(selectedValues);
+      toSelect.forEach((v) => newSet.add(v));
+      const newValue = Array.from(newSet);
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onValueChange?.(newValue);
+      setFocusedValue(enabledValues[enabledValues.length - 1] ?? null);
+      announce2(`${toSelect.length} items selected`, { politeness: "polite" });
+    }, [
+      multiple,
+      focusedValue,
+      enabledValues,
+      selectedValues,
+      isControlled,
+      onValueChange,
+      announce2
+    ]);
+    const toggleSelectAll = react.useCallback(() => {
+      if (!multiple) return;
+      const allSelected = enabledValues.every((v) => selectedValues.has(v));
+      let newValue;
+      if (allSelected) {
+        newValue = [];
+        announce2("All deselected", { politeness: "polite" });
+      } else {
+        newValue = [...enabledValues];
+        announce2("All selected", { politeness: "polite" });
+      }
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onValueChange?.(newValue);
+    }, [
+      multiple,
+      enabledValues,
+      selectedValues,
+      isControlled,
+      onValueChange,
+      announce2
+    ]);
+    const keyboardHandlers = react.useMemo(() => {
+      const handlers = {
+        ArrowDown: () => navigateOption("next"),
+        ArrowUp: () => navigateOption("prev"),
+        Home: () => navigateOption("first"),
+        End: () => navigateOption("last")
+      };
+      if (multiple) {
+        handlers[" "] = () => toggleFocusedOption();
+        handlers["Shift+ArrowDown"] = () => {
+          navigateOption("next");
+          setTimeout(() => toggleFocusedOption(), 0);
+        };
+        handlers["Shift+ArrowUp"] = () => {
+          navigateOption("prev");
+          setTimeout(() => toggleFocusedOption(), 0);
+        };
+        handlers["Ctrl+Shift+Home"] = () => selectRangeToFirst();
+        handlers["Ctrl+Shift+End"] = () => selectRangeToLast();
+        handlers["Ctrl+a"] = () => toggleSelectAll();
+        handlers["Meta+a"] = () => toggleSelectAll();
+      }
+      return handlers;
+    }, [
+      multiple,
+      navigateOption,
+      toggleFocusedOption,
+      selectRangeToFirst,
+      selectRangeToLast,
+      toggleSelectAll
+    ]);
+    const keyboardProps = chunkGDLOJH6K_cjs.useKeyboard(keyboardHandlers, {
+      preventDefault: true,
+      stopPropagation: true,
+      disabled
+    });
+    const optionLabels = react.useMemo(() => {
+      return Array.from(optionsRef.current.values()).map((info) => info.label);
+    }, [optionsVersion]);
+    const typeAheadProps = chunkGDLOJH6K_cjs.useTypeAhead(
+      optionLabels,
+      (matchedLabel) => {
+        for (const [value, info] of optionsRef.current.entries()) {
+          if (info.label === matchedLabel && !info.disabled) {
+            setFocusedValue(value);
+            if (!multiple) {
+              let newVal = value;
+              if (!isControlled) {
+                setUncontrolledValue(newVal);
+              }
+              onValueChange?.(newVal);
+              announce2(`${matchedLabel} selected`, { politeness: "polite" });
+            }
+            break;
+          }
+        }
+      },
+      { disabled }
+    );
+    const handleKeyDown = react.useCallback(
+      (event) => {
+        keyboardProps.onKeyDown(event);
+        if (!event.defaultPrevented) {
+          typeAheadProps.onKeyDown(event);
+        }
+      },
+      [keyboardProps, typeAheadProps]
+    );
+    const handleFocus = react.useCallback(() => {
+      if (focusedValue) return;
+      if (!multiple && currentValue && typeof currentValue === "string") {
+        setFocusedValue(currentValue);
+        return;
+      }
+      if (multiple && Array.isArray(currentValue) && currentValue.length > 0) {
+        setFocusedValue(currentValue[0] ?? null);
+        return;
+      }
+      if (enabledValues.length > 0) {
+        setFocusedValue(enabledValues[0] ?? null);
+      }
+    }, [focusedValue, multiple, currentValue, enabledValues]);
+    const handleBlur = react.useCallback(() => {
+    }, []);
+    const listboxRef = react.useRef(null);
+    react.useEffect(() => {
+      if (focusedValue && listboxRef.current) {
+        const el = listboxRef.current.querySelector(
+          `[data-value="${CSS.escape(focusedValue)}"]`
+        );
+        el?.scrollIntoView({ block: "nearest" });
+      }
+    }, [focusedValue]);
+    const contextValue = react.useMemo(
+      () => ({
+        multiple,
+        disabled,
+        discoverable,
+        unstyled,
+        orientation,
+        selectedValues,
+        focusedValue,
+        onSelect: handleSelect,
+        onFocusOption: setFocusedValue,
+        registerOption,
+        unregisterOption,
+        updateOptionDisabled,
+        isSelected,
+        listboxId
+      }),
+      [
+        multiple,
+        disabled,
+        discoverable,
+        unstyled,
+        orientation,
+        selectedValues,
+        focusedValue,
+        handleSelect,
+        registerOption,
+        unregisterOption,
+        updateOptionDisabled,
+        isSelected,
+        listboxId
+      ]
+    );
+    const mergedRef = react.useCallback(
+      (node) => {
+        listboxRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const activeDescendantId = focusedValue ? `${listboxId}-option-${focusedValue}` : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(ListboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: mergedRef,
+        role: "listbox",
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-orientation": orientation,
+        "aria-multiselectable": multiple || void 0,
+        "aria-disabled": disabled || void 0,
+        "aria-activedescendant": activeDescendantId,
+        tabIndex: disabled && !discoverable ? -1 : 0,
+        className: `compa11y-listbox ${className}`.trim(),
+        "data-compa11y-listbox": "",
+        "data-orientation": orientation,
+        "data-disabled": disabled ? "true" : void 0,
+        "data-multiple": multiple ? "true" : void 0,
+        onKeyDown: handleKeyDown,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        style: unstyled ? {} : {
+          width: "var(--compa11y-listbox-width, 250px)",
+          maxHeight: "var(--compa11y-listbox-max-height, 300px)",
+          overflowY: "auto",
+          border: "var(--compa11y-listbox-border, 1px solid #e0e0e0)",
+          borderRadius: "var(--compa11y-listbox-radius, 4px)",
+          background: "var(--compa11y-listbox-bg, white)",
+          padding: "var(--compa11y-listbox-padding, 0.25rem 0)",
+          ...disabled ? {
+            opacity: "var(--compa11y-listbox-disabled-opacity, 0.5)",
+            cursor: "not-allowed"
+          } : {}
+        },
+        children
+      }
+    ) });
+  }
+);
+Listbox.displayName = "Listbox";
+var ListboxOption = react.forwardRef(
+  function ListboxOption2({
+    value,
+    disabled: localDisabled = false,
+    discoverable: _,
+    unstyled: localUnstyled,
+    className = "",
+    children,
+    "aria-label": ariaLabel
+  }, ref) {
+    const context = useListboxContext();
+    const { groupDisabled } = react.useContext(ListboxGroupContext);
+    const disabled = context.disabled || groupDisabled || localDisabled;
+    const unstyled = localUnstyled ?? context.unstyled;
+    const selected = context.isSelected(value);
+    const focused = context.focusedValue === value;
+    const optionId = `${context.listboxId}-option-${value}`;
+    const labelRef = react.useRef("");
+    const optionRef = react.useRef(null);
+    const mergedRef = react.useCallback(
+      (node) => {
+        optionRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    react.useEffect(() => {
+      const label = typeof children === "string" ? children : optionRef.current?.textContent?.trim() || value;
+      labelRef.current = label;
+      context.registerOption(value, disabled, label);
+      return () => context.unregisterOption(value);
+    }, [value]);
+    react.useEffect(() => {
+      context.updateOptionDisabled(value, disabled);
+    }, [disabled, value]);
+    const handleClick = react.useCallback(
+      (event) => {
+        if (disabled) {
+          event.preventDefault();
+          return;
+        }
+        context.onFocusOption(value);
+        context.onSelect(value);
+      },
+      [disabled, context, value]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: mergedRef,
+        id: optionId,
+        role: "option",
+        "aria-selected": selected,
+        "aria-disabled": disabled || void 0,
+        "aria-label": ariaLabel,
+        className: `compa11y-listbox-option ${className}`.trim(),
+        "data-compa11y-listbox-option": "",
+        "data-value": value,
+        "data-selected": selected ? "true" : "false",
+        "data-focused": focused ? "true" : "false",
+        "data-disabled": disabled ? "true" : void 0,
+        onClick: handleClick,
+        style: unstyled ? {
+          cursor: disabled ? "not-allowed" : "pointer"
+        } : {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "var(--compa11y-listbox-option-padding, 0.5rem 0.75rem)",
+          cursor: disabled ? "not-allowed" : "pointer",
+          userSelect: "none",
+          transition: "background 0.1s ease",
+          background: focused ? selected ? "var(--compa11y-listbox-option-selected-hover-bg, #cce0ff)" : "var(--compa11y-listbox-option-hover-bg, #f5f5f5)" : selected ? "var(--compa11y-listbox-option-selected-bg, #e6f0ff)" : "transparent",
+          fontWeight: selected ? 500 : "normal",
+          opacity: disabled ? 0.5 : 1
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1 }, children }),
+          selected && !unstyled && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              style: {
+                fontSize: "0.875rem",
+                color: "var(--compa11y-listbox-check-color, #0066cc)",
+                marginLeft: "0.5rem"
+              },
+              children: "\u2713"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ListboxOption.displayName = "ListboxOption";
+var ListboxGroup = react.forwardRef(
+  function ListboxGroup2({
+    label,
+    disabled: groupDisabled = false,
+    unstyled: localUnstyled,
+    className = "",
+    children
+  }, ref) {
+    const context = useListboxContext();
+    const unstyled = localUnstyled ?? context.unstyled;
+    const labelId = chunk52J4Z3QD_cjs.useId("listbox-group");
+    const groupContextValue = react.useMemo(
+      () => ({ groupDisabled: context.disabled || groupDisabled }),
+      [context.disabled, groupDisabled]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(ListboxGroupContext.Provider, { value: groupContextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role: "group",
+        "aria-labelledby": labelId,
+        "aria-disabled": groupDisabled || void 0,
+        className: `compa11y-listbox-group ${className}`.trim(),
+        "data-compa11y-listbox-group": "",
+        "data-disabled": groupDisabled ? "true" : void 0,
+        style: unstyled ? {} : {
+          opacity: groupDisabled ? 0.5 : 1
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: labelId,
+              role: "presentation",
+              style: unstyled ? {} : {
+                padding: "var(--compa11y-listbox-group-label-padding, 0.5rem 0.75rem 0.25rem)",
+                fontSize: "var(--compa11y-listbox-group-label-size, 0.75rem)",
+                fontWeight: 600,
+                color: "var(--compa11y-listbox-group-label-color, #666)",
+                textTransform: "uppercase",
+                letterSpacing: "0.05em"
+              },
+              children: label
+            }
+          ),
+          children
+        ]
+      }
+    ) });
+  }
+);
+ListboxGroup.displayName = "ListboxGroup";
+var ListboxCompound = Object.assign(Listbox, {
+  Option: ListboxOption,
+  Group: ListboxGroup
+});
+var InputContext = react.createContext(null);
+function useInputContext() {
+  const ctx = react.useContext(InputContext);
+  if (!ctx) {
+    throw new Error(
+      "[Compa11y Input]: Input sub-components (Input.Label, Input.Field, etc.) must be used within <Input>."
+    );
+  }
+  return ctx;
+}
+var InputLabel = react.forwardRef(
+  function InputLabel2({ children, className }, ref) {
+    const ctx = useInputContext();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        ref,
+        id: ctx.labelId,
+        htmlFor: ctx.fieldId,
+        "data-compa11y-input-label": "",
+        className,
+        style: ctx.unstyled ? {} : {
+          display: "block",
+          color: ctx.disabled ? "var(--compa11y-input-disabled-color, #999)" : "var(--compa11y-input-label-color, inherit)",
+          fontSize: "var(--compa11y-input-label-size, 0.875rem)",
+          fontWeight: "var(--compa11y-input-label-weight, 500)"
+        },
+        children: [
+          children,
+          ctx.required && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-compa11y-input-required": "",
+              "aria-hidden": "true",
+              style: ctx.unstyled ? {} : {
+                color: "var(--compa11y-input-required-color, #ef4444)",
+                marginLeft: "0.125rem"
+              },
+              children: "*"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+InputLabel.displayName = "InputLabel";
+var InputField = react.forwardRef(
+  function InputField2({
+    type = "text",
+    onFocus: providedOnFocus,
+    onBlur: providedOnBlur,
+    className,
+    style,
+    ...rest
+  }, ref) {
+    const ctx = useInputContext();
+    const inputRef = react.useRef(null);
+    const mergedRef = react.useCallback(
+      (node) => {
+        inputRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const handleChange = react.useCallback(
+      (event) => {
+        ctx.setValue(event.target.value);
+      },
+      [ctx.setValue]
+    );
+    const handleFocus = react.useCallback(
+      (event) => {
+        ctx.focusProps.onFocus();
+        providedOnFocus?.(event);
+      },
+      [ctx.focusProps, providedOnFocus]
+    );
+    const handleBlur = react.useCallback(
+      (event) => {
+        ctx.focusProps.onBlur();
+        providedOnBlur?.(event);
+      },
+      [ctx.focusProps, providedOnBlur]
+    );
+    const describedByParts = [];
+    describedByParts.push(ctx.hintId);
+    if (ctx.hasError) {
+      describedByParts.push(ctx.errorId);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: mergedRef,
+        id: ctx.fieldId,
+        type,
+        value: ctx.value,
+        onChange: handleChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        disabled: ctx.disabled,
+        readOnly: ctx.readOnly,
+        "aria-describedby": describedByParts.join(" ") || void 0,
+        "aria-invalid": ctx.hasError ? "true" : void 0,
+        "aria-required": ctx.required ? "true" : void 0,
+        "data-compa11y-input-field": "",
+        className,
+        style: ctx.unstyled ? style : {
+          width: "100%",
+          padding: "var(--compa11y-input-padding, 0.5rem 0.75rem)",
+          border: ctx.hasError ? "1px solid var(--compa11y-input-border-error, #ef4444)" : "var(--compa11y-input-border, 1px solid #ccc)",
+          borderRadius: "var(--compa11y-input-radius, 4px)",
+          fontSize: "var(--compa11y-input-font-size, 0.875rem)",
+          fontFamily: "inherit",
+          background: ctx.disabled ? "var(--compa11y-input-disabled-bg, #f5f5f5)" : ctx.readOnly ? "var(--compa11y-input-readonly-bg, #f9f9f9)" : "var(--compa11y-input-bg, white)",
+          color: "inherit",
+          cursor: ctx.disabled ? "not-allowed" : void 0,
+          opacity: ctx.disabled ? "var(--compa11y-input-disabled-opacity, 0.7)" : void 0,
+          ...ctx.isFocusVisible && !ctx.disabled ? {
+            outline: ctx.hasError ? "2px solid var(--compa11y-input-border-error, #ef4444)" : "2px solid var(--compa11y-focus-color, #0066cc)",
+            outlineOffset: "-1px",
+            borderColor: ctx.hasError ? "var(--compa11y-input-border-error, #ef4444)" : "var(--compa11y-input-border-focus, #0066cc)"
+          } : {},
+          ...style
+        },
+        ...rest
+      }
+    );
+  }
+);
+InputField.displayName = "InputField";
+var InputHint = react.forwardRef(
+  function InputHint2({ children, className }, ref) {
+    const ctx = useInputContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        id: ctx.hintId,
+        "data-compa11y-input-hint": "",
+        className,
+        style: ctx.unstyled ? {} : {
+          color: "var(--compa11y-input-hint-color, #666)",
+          fontSize: "var(--compa11y-input-hint-size, 0.8125rem)"
+        },
+        children
+      }
+    );
+  }
+);
+InputHint.displayName = "InputHint";
+var InputError = react.forwardRef(
+  function InputError2({ children, className }, ref) {
+    const ctx = useInputContext();
+    if (!children) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        id: ctx.errorId,
+        role: "alert",
+        "data-compa11y-input-error": "",
+        className,
+        style: ctx.unstyled ? {} : {
+          color: "var(--compa11y-input-error-color, #ef4444)",
+          fontSize: "var(--compa11y-input-error-size, 0.8125rem)"
+        },
+        children
+      }
+    );
+  }
+);
+InputError.displayName = "InputError";
+var Input = react.forwardRef(
+  function Input2({
+    value: controlledValue,
+    defaultValue = "",
+    onValueChange,
+    type = "text",
+    label,
+    hint,
+    error,
+    required = false,
+    disabled = false,
+    readOnly = false,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    placeholder,
+    name,
+    autoComplete,
+    maxLength,
+    minLength,
+    pattern,
+    inputMode,
+    id: providedId,
+    unstyled = false,
+    className,
+    onFocus: providedOnFocus,
+    onBlur: providedOnBlur,
+    children
+  }, ref) {
+    const generatedId = chunk52J4Z3QD_cjs.useId("input");
+    const baseId = providedId || generatedId;
+    const fieldId = `${baseId}-field`;
+    const labelId = `${baseId}-label`;
+    const hintId = `${baseId}-hint`;
+    const errorId = `${baseId}-error`;
+    const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
+    const isControlled = controlledValue !== void 0;
+    const currentValue = isControlled ? controlledValue : uncontrolledValue;
+    const setValue = react.useCallback(
+      (newValue) => {
+        if (!isControlled) {
+          setUncontrolledValue(newValue);
+        }
+        onValueChange?.(newValue);
+      },
+      [isControlled, onValueChange]
+    );
+    const { isFocusVisible, focusProps } = useFocusVisible();
+    react.useEffect(() => {
+      if (process.env.NODE_ENV !== "production") {
+        const isCompound2 = react.Children.count(children) > 0;
+        if (!isCompound2 && !label && !ariaLabel && !ariaLabelledBy) {
+          console.warn(
+            "[Compa11y Input]: Input has no accessible label. Screen readers need this to identify the input. Use label prop, aria-label, or aria-labelledby."
+          );
+        }
+      }
+    }, [children, label, ariaLabel, ariaLabelledBy]);
+    const hasError = Boolean(error);
+    const isCompound = react.Children.count(children) > 0;
+    const contextValue = {
+      fieldId,
+      labelId,
+      hintId,
+      errorId,
+      value: currentValue,
+      setValue,
+      hasError,
+      disabled,
+      readOnly,
+      required,
+      isFocusVisible,
+      focusProps,
+      unstyled
+    };
+    const dataAttrs = {
+      "data-compa11y-input": "",
+      "data-error": hasError ? "true" : "false",
+      "data-disabled": disabled ? "true" : "false",
+      "data-required": required ? "true" : "false",
+      "data-readonly": readOnly ? "true" : "false"
+    };
+    const wrapperStyle = unstyled ? {} : {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.25rem"
+    };
+    if (isCompound) {
+      return /* @__PURE__ */ jsxRuntime.jsx(InputContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...dataAttrs, className, style: wrapperStyle, children }) });
+    }
+    const inputRef = react.useRef(null);
+    const mergedRef = react.useCallback(
+      (node) => {
+        inputRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const handleChange = react.useCallback(
+      (event) => {
+        setValue(event.target.value);
+      },
+      [setValue]
+    );
+    const handleFocus = react.useCallback(
+      (event) => {
+        focusProps.onFocus();
+        providedOnFocus?.(event);
+      },
+      [focusProps, providedOnFocus]
+    );
+    const handleBlur = react.useCallback(
+      (event) => {
+        focusProps.onBlur();
+        providedOnBlur?.(event);
+      },
+      [focusProps, providedOnBlur]
+    );
+    const describedByParts = [];
+    if (hint) describedByParts.push(hintId);
+    if (hasError) describedByParts.push(errorId);
+    const ariaDescribedBy = describedByParts.length > 0 ? describedByParts.join(" ") : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...dataAttrs, className, style: wrapperStyle, children: [
+      label && /* @__PURE__ */ jsxRuntime.jsxs(
+        "label",
+        {
+          id: labelId,
+          htmlFor: fieldId,
+          "data-compa11y-input-label": "",
+          style: unstyled ? {} : {
+            display: "block",
+            color: disabled ? "var(--compa11y-input-disabled-color, #999)" : "var(--compa11y-input-label-color, inherit)",
+            fontSize: "var(--compa11y-input-label-size, 0.875rem)",
+            fontWeight: "var(--compa11y-input-label-weight, 500)"
+          },
+          children: [
+            label,
+            required && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "data-compa11y-input-required": "",
+                "aria-hidden": "true",
+                style: unstyled ? {} : {
+                  color: "var(--compa11y-input-required-color, #ef4444)",
+                  marginLeft: "0.125rem"
+                },
+                children: "*"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref: mergedRef,
+          id: fieldId,
+          type,
+          value: currentValue,
+          onChange: handleChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          disabled,
+          readOnly,
+          required,
+          placeholder,
+          name,
+          autoComplete,
+          maxLength,
+          minLength,
+          pattern,
+          inputMode,
+          "aria-label": !label ? ariaLabel : void 0,
+          "aria-labelledby": !label && ariaLabelledBy ? ariaLabelledBy : label ? labelId : void 0,
+          "aria-describedby": ariaDescribedBy,
+          "aria-invalid": hasError ? "true" : void 0,
+          "aria-required": required ? "true" : void 0,
+          "data-compa11y-input-field": "",
+          style: unstyled ? {} : {
+            width: "100%",
+            padding: "var(--compa11y-input-padding, 0.5rem 0.75rem)",
+            border: hasError ? "1px solid var(--compa11y-input-border-error, #ef4444)" : "var(--compa11y-input-border, 1px solid #ccc)",
+            borderRadius: "var(--compa11y-input-radius, 4px)",
+            fontSize: "var(--compa11y-input-font-size, 0.875rem)",
+            fontFamily: "inherit",
+            background: disabled ? "var(--compa11y-input-disabled-bg, #f5f5f5)" : readOnly ? "var(--compa11y-input-readonly-bg, #f9f9f9)" : "var(--compa11y-input-bg, white)",
+            color: "inherit",
+            cursor: disabled ? "not-allowed" : void 0,
+            opacity: disabled ? "var(--compa11y-input-disabled-opacity, 0.7)" : void 0,
+            ...isFocusVisible && !disabled ? {
+              outline: hasError ? "2px solid var(--compa11y-input-border-error, #ef4444)" : "2px solid var(--compa11y-focus-color, #0066cc)",
+              outlineOffset: "-1px",
+              borderColor: hasError ? "var(--compa11y-input-border-error, #ef4444)" : "var(--compa11y-input-border-focus, #0066cc)"
+            } : {}
+          }
+        }
+      ),
+      hint && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          id: hintId,
+          "data-compa11y-input-hint": "",
+          style: unstyled ? {} : {
+            color: "var(--compa11y-input-hint-color, #666)",
+            fontSize: "var(--compa11y-input-hint-size, 0.8125rem)"
+          },
+          children: hint
+        }
+      ),
+      hasError && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          id: errorId,
+          role: "alert",
+          "data-compa11y-input-error": "",
+          style: unstyled ? {} : {
+            color: "var(--compa11y-input-error-color, #ef4444)",
+            fontSize: "var(--compa11y-input-error-size, 0.8125rem)"
+          },
+          children: error
+        }
+      )
+    ] });
+  }
+);
+Input.displayName = "Input";
+var InputCompound = Object.assign(Input, {
+  Label: InputLabel,
+  Field: InputField,
+  Hint: InputHint,
+  Error: InputError
+});
+var VARIANT_STYLES = {
+  primary: {
+    background: "var(--compa11y-button-primary-bg, #0066cc)",
+    color: "var(--compa11y-button-primary-color, white)",
+    border: "var(--compa11y-button-primary-border, 1px solid #0066cc)"
+  },
+  secondary: {
+    background: "var(--compa11y-button-secondary-bg, white)",
+    color: "var(--compa11y-button-secondary-color, #333)",
+    border: "var(--compa11y-button-secondary-border, 1px solid #ccc)"
+  },
+  danger: {
+    background: "var(--compa11y-button-danger-bg, #ef4444)",
+    color: "var(--compa11y-button-danger-color, white)",
+    border: "var(--compa11y-button-danger-border, 1px solid #ef4444)"
+  },
+  outline: {
+    background: "var(--compa11y-button-outline-bg, transparent)",
+    color: "var(--compa11y-button-outline-color, #0066cc)",
+    border: "var(--compa11y-button-outline-border, 1px solid #0066cc)"
+  },
+  ghost: {
+    background: "var(--compa11y-button-ghost-bg, transparent)",
+    color: "var(--compa11y-button-ghost-color, #333)",
+    border: "var(--compa11y-button-ghost-border, 1px solid transparent)"
+  }
+};
+var SIZE_STYLES = {
+  sm: {
+    padding: "var(--compa11y-button-padding-sm, 0.25rem 0.5rem)",
+    fontSize: "var(--compa11y-button-font-size-sm, 0.75rem)"
+  },
+  md: {
+    padding: "var(--compa11y-button-padding-md, 0.5rem 1rem)",
+    fontSize: "var(--compa11y-button-font-size-md, 0.875rem)"
+  },
+  lg: {
+    padding: "var(--compa11y-button-padding-lg, 0.75rem 1.5rem)",
+    fontSize: "var(--compa11y-button-font-size-lg, 1rem)"
+  }
+};
+var Button = react.forwardRef(
+  function Button2({
+    variant = "secondary",
+    size = "md",
+    type = "button",
     disabled = false,
+    discoverable = false,
+    loading = false,
     unstyled = false,
-    className,
-    size = "md",
     "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby,
+    className,
+    style,
     onClick,
-    ...props
+    onFocus: providedOnFocus,
+    onBlur: providedOnBlur,
+    children,
+    ...rest
   }, 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;
+    const generatedId = chunk52J4Z3QD_cjs.useId("button");
+    const buttonRef = react.useRef(null);
+    const mergedRef = react.useCallback(
+      (node) => {
+        buttonRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const { isFocusVisible, focusProps } = useFocusVisible();
     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);
+      if (process.env.NODE_ENV !== "production") {
+        if (!children && !ariaLabel && !rest["aria-labelledby"]) {
+          console.warn(
+            "[Compa11y Button]: Button has no accessible label. Screen readers need this to identify the button. Add text content, aria-label, or aria-labelledby."
+          );
+        }
       }
-      onCheckedChange?.(newChecked);
-      const labelText = label || ariaLabel || "Switch";
-      announce2(`${labelText} ${newChecked ? "on" : "off"}`);
-    }, [
-      checked,
-      disabled,
-      isControlled,
-      onCheckedChange,
-      label,
-      ariaLabel,
-      announce2
-    ]);
+    }, [children, ariaLabel, rest["aria-labelledby"]]);
+    const useNativeDisabled = disabled && !discoverable;
+    const isInteractionDisabled = disabled || loading;
     const handleClick = react.useCallback(
       (event) => {
-        onClick?.(event);
-        if (!event.defaultPrevented) {
-          toggleSwitch();
+        if (isInteractionDisabled) {
+          event.preventDefault();
+          return;
         }
+        onClick?.(event);
       },
-      [onClick, toggleSwitch]
+      [isInteractionDisabled, onClick]
     );
-    const keyboardProps = chunkGDLOJH6K_cjs.useKeyboard(
-      {
-        " ": () => {
-          toggleSwitch();
-        },
-        Enter: () => {
-          toggleSwitch();
-        }
+    const handleFocus = react.useCallback(
+      (event) => {
+        focusProps.onFocus();
+        providedOnFocus?.(event);
       },
-      { preventDefault: true }
+      [focusProps, providedOnFocus]
     );
-    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 handleBlur = react.useCallback(
+      (event) => {
+        focusProps.onBlur();
+        providedOnBlur?.(event);
+      },
+      [focusProps, providedOnBlur]
+    );
+    const dataAttrs = {
+      "data-compa11y-button": "",
+      "data-variant": variant,
+      "data-size": size,
+      "data-disabled": disabled ? "true" : "false",
+      "data-loading": loading ? "true" : "false"
     };
-    const sizeConfig = sizes[size];
-    const trackStructuralStyles = {
-      position: "relative",
+    const baseStyle = unstyled ? {} : {
       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
+      justifyContent: "center",
+      gap: "0.5rem",
+      borderRadius: "var(--compa11y-button-radius, 4px)",
+      fontFamily: "inherit",
+      fontWeight: "var(--compa11y-button-font-weight, 500)",
+      lineHeight: "1.5",
+      cursor: isInteractionDisabled ? "not-allowed" : "pointer",
+      opacity: disabled ? "var(--compa11y-button-disabled-opacity, 0.5)" : void 0,
+      transition: "background-color 0.15s ease, border-color 0.15s ease",
+      ...VARIANT_STYLES[variant],
+      ...SIZE_STYLES[size],
+      ...isFocusVisible && !useNativeDisabled ? {
+        outline: "2px solid var(--compa11y-focus-color, #0066cc)",
+        outlineOffset: "2px"
+      } : {}
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+      "button",
       {
-        style: wrapperStructuralStyles,
-        "data-compa11y-switch-wrapper": true,
-        "data-size": size,
+        ref: mergedRef,
+        id: generatedId,
+        type,
+        disabled: useNativeDisabled,
+        tabIndex: disabled && !discoverable ? void 0 : 0,
+        "aria-disabled": isInteractionDisabled ? "true" : void 0,
+        "aria-busy": loading ? "true" : void 0,
+        "aria-label": ariaLabel,
+        onClick: handleClick,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        className,
+        style: { ...baseStyle, ...style },
+        ...dataAttrs,
+        ...rest,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+          loading && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
             {
-              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"
-                }
-              )
+              "data-compa11y-button-spinner": "",
+              "aria-hidden": "true",
+              style: unstyled ? {} : {
+                display: "inline-block",
+                width: "1em",
+                height: "1em",
+                border: "2px solid currentColor",
+                borderRightColor: "transparent",
+                borderRadius: "50%",
+                animation: "compa11y-spin 0.6s linear infinite"
+              }
             }
           ),
-          label && /* @__PURE__ */ jsxRuntime.jsx(
-            "label",
+          children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var TextareaContext = react.createContext(null);
+function useTextareaContext() {
+  const ctx = react.useContext(TextareaContext);
+  if (!ctx) {
+    throw new Error(
+      "[Compa11y Textarea]: Textarea sub-components (Textarea.Label, Textarea.Field, etc.) must be used within <Textarea>."
+    );
+  }
+  return ctx;
+}
+var TextareaLabel = react.forwardRef(
+  function TextareaLabel2({ children, className }, ref) {
+    const ctx = useTextareaContext();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        ref,
+        id: ctx.labelId,
+        htmlFor: ctx.fieldId,
+        "data-compa11y-textarea-label": "",
+        className,
+        style: ctx.unstyled ? {} : {
+          display: "block",
+          color: ctx.disabled ? "var(--compa11y-textarea-disabled-color, #999)" : "var(--compa11y-textarea-label-color, inherit)",
+          fontSize: "var(--compa11y-textarea-label-size, 0.875rem)",
+          fontWeight: "var(--compa11y-textarea-label-weight, 500)"
+        },
+        children: [
+          children,
+          ctx.required && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
             {
-              id: labelId,
-              onClick: disabled ? void 0 : () => toggleSwitch(),
-              style: labelStyles,
-              "data-compa11y-switch-label": true,
-              children: label
+              "data-compa11y-textarea-required": "",
+              "aria-hidden": "true",
+              style: ctx.unstyled ? {} : {
+                color: "var(--compa11y-textarea-required-color, #ef4444)",
+                marginLeft: "0.125rem"
+              },
+              children: "*"
             }
           )
         ]
@@ -421,7 +3031,375 @@ var Switch = react.forwardRef(
     );
   }
 );
-Switch.displayName = "Switch";
+TextareaLabel.displayName = "TextareaLabel";
+var TextareaField = react.forwardRef(
+  function TextareaField2({
+    onFocus: providedOnFocus,
+    onBlur: providedOnBlur,
+    className,
+    style,
+    rows: rowsOverride,
+    ...rest
+  }, ref) {
+    const ctx = useTextareaContext();
+    const textareaRef = react.useRef(null);
+    const mergedRef = react.useCallback(
+      (node) => {
+        textareaRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const handleChange = react.useCallback(
+      (event) => {
+        ctx.setValue(event.target.value);
+      },
+      [ctx.setValue]
+    );
+    const handleFocus = react.useCallback(
+      (event) => {
+        ctx.focusProps.onFocus();
+        providedOnFocus?.(event);
+      },
+      [ctx.focusProps, providedOnFocus]
+    );
+    const handleBlur = react.useCallback(
+      (event) => {
+        ctx.focusProps.onBlur();
+        providedOnBlur?.(event);
+      },
+      [ctx.focusProps, providedOnBlur]
+    );
+    const describedByParts = [];
+    describedByParts.push(ctx.hintId);
+    if (ctx.hasError) {
+      describedByParts.push(ctx.errorId);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        ref: mergedRef,
+        id: ctx.fieldId,
+        rows: rowsOverride ?? ctx.rows,
+        value: ctx.value,
+        onChange: handleChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        disabled: ctx.disabled,
+        readOnly: ctx.readOnly,
+        "aria-describedby": describedByParts.join(" ") || void 0,
+        "aria-invalid": ctx.hasError ? "true" : void 0,
+        "aria-required": ctx.required ? "true" : void 0,
+        "data-compa11y-textarea-field": "",
+        className,
+        style: ctx.unstyled ? style : {
+          width: "100%",
+          padding: "var(--compa11y-textarea-padding, 0.5rem 0.75rem)",
+          border: ctx.hasError ? "1px solid var(--compa11y-textarea-border-error, #ef4444)" : "var(--compa11y-textarea-border, 1px solid #ccc)",
+          borderRadius: "var(--compa11y-textarea-radius, 4px)",
+          fontSize: "var(--compa11y-textarea-font-size, 0.875rem)",
+          fontFamily: "inherit",
+          lineHeight: "1.5",
+          resize: ctx.resize,
+          background: ctx.disabled ? "var(--compa11y-textarea-disabled-bg, #f5f5f5)" : ctx.readOnly ? "var(--compa11y-textarea-readonly-bg, #f9f9f9)" : "var(--compa11y-textarea-bg, white)",
+          color: "inherit",
+          cursor: ctx.disabled ? "not-allowed" : void 0,
+          opacity: ctx.disabled ? "var(--compa11y-textarea-disabled-opacity, 0.7)" : void 0,
+          ...ctx.isFocusVisible && !ctx.disabled ? {
+            outline: ctx.hasError ? "2px solid var(--compa11y-textarea-border-error, #ef4444)" : "2px solid var(--compa11y-focus-color, #0066cc)",
+            outlineOffset: "-1px",
+            borderColor: ctx.hasError ? "var(--compa11y-textarea-border-error, #ef4444)" : "var(--compa11y-textarea-border-focus, #0066cc)"
+          } : {},
+          ...style
+        },
+        ...rest
+      }
+    );
+  }
+);
+TextareaField.displayName = "TextareaField";
+var TextareaHint = react.forwardRef(
+  function TextareaHint2({ children, className }, ref) {
+    const ctx = useTextareaContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        id: ctx.hintId,
+        "data-compa11y-textarea-hint": "",
+        className,
+        style: ctx.unstyled ? {} : {
+          color: "var(--compa11y-textarea-hint-color, #666)",
+          fontSize: "var(--compa11y-textarea-hint-size, 0.8125rem)"
+        },
+        children
+      }
+    );
+  }
+);
+TextareaHint.displayName = "TextareaHint";
+var TextareaError = react.forwardRef(
+  function TextareaError2({ children, className }, ref) {
+    const ctx = useTextareaContext();
+    if (!children) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        id: ctx.errorId,
+        role: "alert",
+        "data-compa11y-textarea-error": "",
+        className,
+        style: ctx.unstyled ? {} : {
+          color: "var(--compa11y-textarea-error-color, #ef4444)",
+          fontSize: "var(--compa11y-textarea-error-size, 0.8125rem)"
+        },
+        children
+      }
+    );
+  }
+);
+TextareaError.displayName = "TextareaError";
+var Textarea = react.forwardRef(
+  function Textarea2({
+    value: controlledValue,
+    defaultValue = "",
+    onValueChange,
+    rows = 3,
+    resize = "vertical",
+    label,
+    hint,
+    error,
+    required = false,
+    disabled = false,
+    readOnly = false,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    placeholder,
+    name,
+    autoComplete,
+    maxLength,
+    minLength,
+    id: providedId,
+    unstyled = false,
+    className,
+    onFocus: providedOnFocus,
+    onBlur: providedOnBlur,
+    children
+  }, ref) {
+    const generatedId = chunk52J4Z3QD_cjs.useId("textarea");
+    const baseId = providedId || generatedId;
+    const fieldId = `${baseId}-field`;
+    const labelId = `${baseId}-label`;
+    const hintId = `${baseId}-hint`;
+    const errorId = `${baseId}-error`;
+    const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
+    const isControlled = controlledValue !== void 0;
+    const currentValue = isControlled ? controlledValue : uncontrolledValue;
+    const setValue = react.useCallback(
+      (newValue) => {
+        if (!isControlled) {
+          setUncontrolledValue(newValue);
+        }
+        onValueChange?.(newValue);
+      },
+      [isControlled, onValueChange]
+    );
+    const { isFocusVisible, focusProps } = useFocusVisible();
+    react.useEffect(() => {
+      if (process.env.NODE_ENV !== "production") {
+        const isCompound2 = react.Children.count(children) > 0;
+        if (!isCompound2 && !label && !ariaLabel && !ariaLabelledBy) {
+          console.warn(
+            "[Compa11y Textarea]: Textarea has no accessible label. Screen readers need this to identify the textarea. Use label prop, aria-label, or aria-labelledby."
+          );
+        }
+      }
+    }, [children, label, ariaLabel, ariaLabelledBy]);
+    const hasError = Boolean(error);
+    const isCompound = react.Children.count(children) > 0;
+    const contextValue = {
+      fieldId,
+      labelId,
+      hintId,
+      errorId,
+      value: currentValue,
+      setValue,
+      hasError,
+      disabled,
+      readOnly,
+      required,
+      rows,
+      resize,
+      isFocusVisible,
+      focusProps,
+      unstyled
+    };
+    const dataAttrs = {
+      "data-compa11y-textarea": "",
+      "data-error": hasError ? "true" : "false",
+      "data-disabled": disabled ? "true" : "false",
+      "data-required": required ? "true" : "false",
+      "data-readonly": readOnly ? "true" : "false"
+    };
+    const wrapperStyle = unstyled ? {} : {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.25rem"
+    };
+    if (isCompound) {
+      return /* @__PURE__ */ jsxRuntime.jsx(TextareaContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...dataAttrs, className, style: wrapperStyle, children }) });
+    }
+    const textareaRef = react.useRef(null);
+    const mergedRef = react.useCallback(
+      (node) => {
+        textareaRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const handleChange = react.useCallback(
+      (event) => {
+        setValue(event.target.value);
+      },
+      [setValue]
+    );
+    const handleFocus = react.useCallback(
+      (event) => {
+        focusProps.onFocus();
+        providedOnFocus?.(event);
+      },
+      [focusProps, providedOnFocus]
+    );
+    const handleBlur = react.useCallback(
+      (event) => {
+        focusProps.onBlur();
+        providedOnBlur?.(event);
+      },
+      [focusProps, providedOnBlur]
+    );
+    const describedByParts = [];
+    if (hint) describedByParts.push(hintId);
+    if (hasError) describedByParts.push(errorId);
+    const ariaDescribedBy = describedByParts.length > 0 ? describedByParts.join(" ") : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...dataAttrs, className, style: wrapperStyle, children: [
+      label && /* @__PURE__ */ jsxRuntime.jsxs(
+        "label",
+        {
+          id: labelId,
+          htmlFor: fieldId,
+          "data-compa11y-textarea-label": "",
+          style: unstyled ? {} : {
+            display: "block",
+            color: disabled ? "var(--compa11y-textarea-disabled-color, #999)" : "var(--compa11y-textarea-label-color, inherit)",
+            fontSize: "var(--compa11y-textarea-label-size, 0.875rem)",
+            fontWeight: "var(--compa11y-textarea-label-weight, 500)"
+          },
+          children: [
+            label,
+            required && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "data-compa11y-textarea-required": "",
+                "aria-hidden": "true",
+                style: unstyled ? {} : {
+                  color: "var(--compa11y-textarea-required-color, #ef4444)",
+                  marginLeft: "0.125rem"
+                },
+                children: "*"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          ref: mergedRef,
+          id: fieldId,
+          rows,
+          value: currentValue,
+          onChange: handleChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          disabled,
+          readOnly,
+          required,
+          placeholder,
+          name,
+          autoComplete,
+          maxLength,
+          minLength,
+          "aria-label": !label ? ariaLabel : void 0,
+          "aria-labelledby": !label && ariaLabelledBy ? ariaLabelledBy : label ? labelId : void 0,
+          "aria-describedby": ariaDescribedBy,
+          "aria-invalid": hasError ? "true" : void 0,
+          "aria-required": required ? "true" : void 0,
+          "data-compa11y-textarea-field": "",
+          style: unstyled ? {} : {
+            width: "100%",
+            padding: "var(--compa11y-textarea-padding, 0.5rem 0.75rem)",
+            border: hasError ? "1px solid var(--compa11y-textarea-border-error, #ef4444)" : "var(--compa11y-textarea-border, 1px solid #ccc)",
+            borderRadius: "var(--compa11y-textarea-radius, 4px)",
+            fontSize: "var(--compa11y-textarea-font-size, 0.875rem)",
+            fontFamily: "inherit",
+            lineHeight: "1.5",
+            resize,
+            background: disabled ? "var(--compa11y-textarea-disabled-bg, #f5f5f5)" : readOnly ? "var(--compa11y-textarea-readonly-bg, #f9f9f9)" : "var(--compa11y-textarea-bg, white)",
+            color: "inherit",
+            cursor: disabled ? "not-allowed" : void 0,
+            opacity: disabled ? "var(--compa11y-textarea-disabled-opacity, 0.7)" : void 0,
+            ...isFocusVisible && !disabled ? {
+              outline: hasError ? "2px solid var(--compa11y-textarea-border-error, #ef4444)" : "2px solid var(--compa11y-focus-color, #0066cc)",
+              outlineOffset: "-1px",
+              borderColor: hasError ? "var(--compa11y-textarea-border-error, #ef4444)" : "var(--compa11y-textarea-border-focus, #0066cc)"
+            } : {}
+          }
+        }
+      ),
+      hint && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          id: hintId,
+          "data-compa11y-textarea-hint": "",
+          style: unstyled ? {} : {
+            color: "var(--compa11y-textarea-hint-color, #666)",
+            fontSize: "var(--compa11y-textarea-hint-size, 0.8125rem)"
+          },
+          children: hint
+        }
+      ),
+      hasError && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          id: errorId,
+          role: "alert",
+          "data-compa11y-textarea-error": "",
+          style: unstyled ? {} : {
+            color: "var(--compa11y-textarea-error-color, #ef4444)",
+            fontSize: "var(--compa11y-textarea-error-size, 0.8125rem)"
+          },
+          children: error
+        }
+      )
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
+var TextareaCompound = Object.assign(Textarea, {
+  Label: TextareaLabel,
+  Field: TextareaField,
+  Hint: TextareaHint,
+  Error: TextareaError
+});
 
 Object.defineProperty(exports, "Dialog", {
   enumerable: true,
@@ -691,12 +3669,46 @@ Object.defineProperty(exports, "warn", {
   enumerable: true,
   get: function () { return core.warn; }
 });
+exports.Button = Button;
+exports.Checkbox = CheckboxCompound;
+exports.CheckboxBase = Checkbox;
+exports.CheckboxGroup = CheckboxGroup;
+exports.CheckboxIndicator = CheckboxIndicator;
+exports.Input = InputCompound;
+exports.InputBase = Input;
+exports.InputError = InputError;
+exports.InputField = InputField;
+exports.InputHint = InputHint;
+exports.InputLabel = InputLabel;
+exports.Listbox = ListboxCompound;
+exports.ListboxBase = Listbox;
+exports.ListboxGroup = ListboxGroup;
+exports.ListboxOption = ListboxOption;
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroupCompound;
+exports.RadioGroupBase = RadioGroup;
+exports.Select = SelectCompound;
+exports.SelectBase = Select;
+exports.SelectListbox = SelectListbox;
+exports.SelectOptionItem = SelectOptionItem;
+exports.SelectTrigger = SelectTrigger;
 exports.Switch = Switch;
+exports.Textarea = TextareaCompound;
+exports.TextareaBase = Textarea;
+exports.TextareaError = TextareaError;
+exports.TextareaField = TextareaField;
+exports.TextareaHint = TextareaHint;
+exports.TextareaLabel = TextareaLabel;
+exports.useCheckboxGroupContext = useCheckboxGroupContext;
 exports.useFocusControl = useFocusControl;
 exports.useFocusManager = useFocusManager;
 exports.useFocusVisible = useFocusVisible;
 exports.useFocusWithin = useFocusWithin;
+exports.useInputContext = useInputContext;
+exports.useListboxContext = useListboxContext;
+exports.useRadioGroupContext = useRadioGroupContext;
 exports.useRovingTabindex = useRovingTabindex;
 exports.useRovingTabindexMap = useRovingTabindexMap;
+exports.useTextareaContext = useTextareaContext;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map