@dloizides/ui-forms 1.13.4 → 1.15.0

package/dist/index.mjs

@@ -1,10 +1,10 @@
-import React2, { useState, useCallback, useMemo, useRef, useEffect, useLayoutEffect } from 'react';
-import { Platform, StyleSheet, TextInput, View, Text, Switch, Pressable, ScrollView, TouchableOpacity } from 'react-native';
+import React2, { useState, useCallback, useMemo, useEffect, useRef, useLayoutEffect } from 'react';
+import { Platform, StyleSheet, TextInput, View, Text, ScrollView, Pressable, Switch, TouchableOpacity } from 'react-native';
 import { useUi } from '@dloizides/ui-feedback';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Button } from '@dloizides/ui-buttons';
-import { MIN_TOUCH_TARGET_PX } from '@dloizides/a11y';
 import { createPortal } from 'react-dom';
+import { MIN_TOUCH_TARGET_PX } from '@dloizides/a11y';
 
 // src/Field/Field.tsx
 function attachControlId(child, candidateId, describedById) {
@@ -459,6 +459,142 @@ var controlStyles = StyleSheet.create({
   error: { fontSize: ERROR_FONT, marginTop: ERROR_GAP }
 });
 var IS_WEB3 = Platform.OS === "web";
+var MENU_PORTAL_Z_INDEX = 1e3;
+var MENU_TOP_GAP2 = 4;
+function toDomNode(ref) {
+  const node = ref.current;
+  if (node === null || typeof node.getBoundingClientRect !== "function") return null;
+  return node;
+}
+function readAnchorRect(ref) {
+  if (!IS_WEB3) return null;
+  const node = toDomNode(ref);
+  if (node === null) return null;
+  const r = node.getBoundingClientRect();
+  return { top: r.top, left: r.left, width: r.width, bottom: r.bottom };
+}
+function buildPortalPopoverStyle(rect) {
+  return {
+    // RN's ViewStyle union omits 'fixed', but react-native-web honours it at runtime.
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- web-only position value
+    position: "fixed",
+    top: rect.bottom + MENU_TOP_GAP2,
+    left: rect.left,
+    width: rect.width,
+    zIndex: MENU_PORTAL_Z_INDEX
+  };
+}
+function useAnchorRect(ref, enabled) {
+  const [rect, setRect] = useState(null);
+  useLayoutEffect(() => {
+    if (!IS_WEB3 || !enabled) {
+      setRect(null);
+      return void 0;
+    }
+    let frame = null;
+    let disposed = false;
+    const apply = () => {
+      frame = null;
+      if (disposed) return;
+      setRect(readAnchorRect(ref));
+    };
+    const schedule = () => {
+      if (frame !== null) return;
+      frame = window.requestAnimationFrame(apply);
+    };
+    apply();
+    document.addEventListener("scroll", schedule, true);
+    window.addEventListener("resize", schedule);
+    const node = toDomNode(ref);
+    const observer = typeof ResizeObserver === "function" ? new ResizeObserver(schedule) : null;
+    if (observer !== null) {
+      if (node !== null) observer.observe(node);
+      observer.observe(document.body);
+    }
+    return () => {
+      disposed = true;
+      if (frame !== null) window.cancelAnimationFrame(frame);
+      document.removeEventListener("scroll", schedule, true);
+      window.removeEventListener("resize", schedule);
+      if (observer !== null) observer.disconnect();
+    };
+  }, [ref, enabled]);
+  return IS_WEB3 && enabled ? rect : null;
+}
+var IS_WEB4 = typeof document !== "undefined";
+var ESCAPE_KEY = "Escape";
+var ACTIVE_WEIGHT = "700";
+var IDLE_WEIGHT = "400";
+function useDismiss(anchorRef, menuRef, onDismiss) {
+  useEffect(() => {
+    if (!IS_WEB4) return void 0;
+    const onMouseDown = (event) => {
+      const anchorNode = anchorRef.current;
+      const menuNode = menuRef.current;
+      const target = event.target instanceof Node ? event.target : null;
+      const insideAnchor = anchorNode !== null && target !== null && anchorNode.contains(target);
+      const insideMenu = menuNode !== null && target !== null && menuNode.contains(target);
+      if (!insideAnchor && !insideMenu) onDismiss();
+    };
+    const onKeyDown = (event) => {
+      if (event.key === ESCAPE_KEY) onDismiss();
+    };
+    document.addEventListener("mousedown", onMouseDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onMouseDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [anchorRef, menuRef, onDismiss]);
+}
+function AnchoredMenu({
+  options,
+  selectedValue,
+  onSelect,
+  onDismiss,
+  colors,
+  optionHint,
+  accessibilityLabel,
+  testID,
+  anchorRef,
+  usePortal = true
+}) {
+  const menuRef = React2.useRef(null);
+  useDismiss(anchorRef, menuRef, onDismiss);
+  const rect = useAnchorRect(anchorRef, usePortal);
+  const portalStyle = rect !== null ? buildPortalPopoverStyle(rect) : null;
+  const menu = /* @__PURE__ */ jsx(
+    View,
+    {
+      ref: menuRef,
+      accessibilityLabel,
+      accessibilityRole: "menu",
+      style: [controlStyles.menu, { borderColor: colors.border, backgroundColor: colors.surface }, portalStyle],
+      testID: `${testID}-menu`,
+      children: /* @__PURE__ */ jsx(ScrollView, { keyboardShouldPersistTaps: "handled", nestedScrollEnabled: true, children: options.map((opt) => {
+        const active = opt.value === selectedValue;
+        return /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "menuitem",
+            accessibilityLabel: opt.label,
+            accessibilityHint: optionHint,
+            accessibilityState: { selected: active },
+            "aria-selected": active,
+            onPress: () => onSelect(opt.value),
+            style: controlStyles.option,
+            testID: `${testID}-option-${opt.value}`,
+            children: /* @__PURE__ */ jsx(Text, { style: [controlStyles.optionText, { color: active ? colors.brand : colors.text, fontWeight: active ? ACTIVE_WEIGHT : IDLE_WEIGHT }], children: opt.label })
+          },
+          opt.value
+        );
+      }) })
+    }
+  );
+  if (usePortal && IS_WEB4) return createPortal(menu, document.body);
+  return menu;
+}
+var IS_WEB5 = Platform.OS === "web";
 var TRANSITION_PROPERTY = "border-color, background-color, box-shadow";
 var TRANSITION_DURATION = "0.14s";
 var TRANSITION_TIMING = "ease";
@@ -474,7 +610,7 @@ var GREEN_START = 3;
 var BLUE_START = 5;
 var CHANNEL_END_OFFSET = 2;
 function prefersReducedMotion() {
-  if (!IS_WEB3 || typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  if (!IS_WEB5 || typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
 function withAlpha(color, alpha) {
@@ -517,7 +653,7 @@ function useThemedInput(options = {}) {
     const borderColor = isFocused ? focusBorder : isHovered ? withAlpha(colors.text, HOVER_BORDER_ALPHA) : restBorder;
     const backgroundColor = isFocused ? colors.surface : colors.surfaceElevated;
     const base = { color: colors.text, borderColor, backgroundColor };
-    if (!IS_WEB3) return base;
+    if (!IS_WEB5) return base;
     const ringColor = hasError ? errorColor : primary;
     const ring = isFocused ? `0 0 0 ${FOCUS_RING_WIDTH}px ${withAlpha(ringColor, FOCUS_RING_ALPHA)}` : "none";
     const webStyle = {
@@ -542,7 +678,7 @@ function useThemedInput(options = {}) {
   ]);
   const focusBind = useMemo(() => ({ onFocus: handleFocus, onBlur: handleBlur }), [handleFocus, handleBlur]);
   const hoverBind = useMemo(
-    () => IS_WEB3 ? { onMouseEnter: handleHoverIn, onMouseLeave: handleHoverOut } : {},
+    () => IS_WEB5 ? { onMouseEnter: handleHoverIn, onMouseLeave: handleHoverOut } : {},
     [handleHoverIn, handleHoverOut]
   );
   return {
@@ -554,9 +690,9 @@ function useThemedInput(options = {}) {
     hoverBind
   };
 }
-var IS_WEB4 = Platform.OS === "web";
+var IS_WEB6 = Platform.OS === "web";
 function webFieldA11y({ describedById, hasError = false, required = false }) {
-  if (!IS_WEB4) {
+  if (!IS_WEB6) {
     return {};
   }
   return {
@@ -606,12 +742,187 @@ var ThemedTextInput = React2.forwardRef(function ThemedTextInput2({
     }
   );
 });
+
+// src/useRecentValues/recentValuesCore.ts
+var STORAGE_PREFIX = "@dloizides/ui-forms:recent:";
+var DEFAULT_MAX_RECENTS = 10;
+function recentStorageKey(key) {
+  return `${STORAGE_PREFIX}${key}`;
+}
+function getStorage() {
+  try {
+    if (typeof window === "undefined") return null;
+    const storage = window.localStorage;
+    return storage !== null && storage !== void 0 ? storage : null;
+  } catch {
+    return null;
+  }
+}
+function readRecents(key) {
+  const storage = getStorage();
+  if (storage === null) return [];
+  try {
+    const raw = storage.getItem(recentStorageKey(key));
+    if (raw === null) return [];
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((entry) => typeof entry === "string");
+  } catch {
+    return [];
+  }
+}
+function writeRecents(key, values) {
+  const storage = getStorage();
+  if (storage === null) return;
+  try {
+    storage.setItem(recentStorageKey(key), JSON.stringify(values));
+  } catch {
+  }
+}
+function clearRecents(key) {
+  const storage = getStorage();
+  if (storage === null) return;
+  try {
+    storage.removeItem(recentStorageKey(key));
+  } catch {
+  }
+}
+function computeNextRecents(current, value, max) {
+  const trimmed = value.trim();
+  if (trimmed === "") return [...current];
+  const lower = trimmed.toLowerCase();
+  const withoutMatch = current.filter((entry) => entry.toLowerCase() !== lower);
+  const promoted = [trimmed, ...withoutMatch];
+  const cap = max > 0 ? max : 0;
+  return promoted.slice(0, cap);
+}
+function recentsEqual(a, b) {
+  if (a.length !== b.length) return false;
+  return a.every((entry, index) => entry === b[index]);
+}
+
+// src/useRecentValues/useRecentValues.ts
+function useRecentValues(key, max = DEFAULT_MAX_RECENTS) {
+  const [recents, setRecents] = useState(() => readRecents(key).slice(0, max));
+  useEffect(() => {
+    setRecents(readRecents(key).slice(0, max));
+  }, [key, max]);
+  const remember = useCallback(
+    (value) => {
+      setRecents((current) => {
+        const next = computeNextRecents(current, value, max);
+        if (recentsEqual(next, current)) return current;
+        writeRecents(key, next);
+        return next;
+      });
+    },
+    [key, max]
+  );
+  const clear = useCallback(() => {
+    clearRecents(key);
+    setRecents([]);
+  }, [key]);
+  return { recents, remember, clear };
+}
+var CLOSE_DELAY_MS = 140;
+function RecentInputField({
+  recentKey,
+  recentMax,
+  label,
+  value,
+  testID,
+  onChangeText,
+  onSubmitEditing,
+  onFocus,
+  onBlur,
+  ...rest
+}) {
+  const { theme } = useUi();
+  const { colors, palette } = theme;
+  const { recents, remember } = useRecentValues(recentKey, recentMax);
+  const anchorRef = useRef(null);
+  const latestText = useRef(typeof value === "string" ? value : "");
+  const [isOpen, setIsOpen] = useState(false);
+  const handleChange = useCallback(
+    (text) => {
+      latestText.current = text;
+      onChangeText?.(text);
+    },
+    [onChangeText]
+  );
+  const handleFocus = useCallback(
+    (event) => {
+      setIsOpen(true);
+      onFocus?.(event);
+    },
+    [onFocus]
+  );
+  const handleBlur = useCallback(
+    (event) => {
+      if (latestText.current.trim() !== "") remember(latestText.current);
+      setTimeout(() => setIsOpen(false), CLOSE_DELAY_MS);
+      onBlur?.(event);
+    },
+    [remember, onBlur]
+  );
+  const handleSubmit = useCallback(
+    (event) => {
+      remember(latestText.current);
+      setIsOpen(false);
+      onSubmitEditing?.(event);
+    },
+    [remember, onSubmitEditing]
+  );
+  const pick = useCallback(
+    (picked) => {
+      latestText.current = picked;
+      onChangeText?.(picked);
+      remember(picked);
+      setIsOpen(false);
+    },
+    [onChangeText, remember]
+  );
+  const options = recents.map((entry) => ({ label: entry, value: entry }));
+  const showMenu = isOpen && options.length > 0;
+  const recentTestID = testID !== void 0 ? `${testID}-recent` : "form-field-recent";
+  return /* @__PURE__ */ jsxs(View, { ref: anchorRef, style: controlStyles.anchor, children: [
+    /* @__PURE__ */ jsx(
+      ThemedTextInput,
+      {
+        ...rest,
+        testID,
+        value,
+        onChangeText: handleChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onSubmitEditing: handleSubmit
+      }
+    ),
+    showMenu ? /* @__PURE__ */ jsx(
+      AnchoredMenu,
+      {
+        accessibilityLabel: `Recent ${label} values`,
+        anchorRef,
+        colors: { text: colors.text, border: colors.border, surface: colors.surface, brand: palette.primary["500"] },
+        onDismiss: () => setIsOpen(false),
+        onSelect: pick,
+        optionHint: `Fill ${label} with this recent value`,
+        options,
+        selectedValue: typeof value === "string" ? value : "",
+        testID: recentTestID,
+        usePortal: true
+      }
+    ) : null
+  ] });
+}
 var FormField = ({
   label,
   labelHidden = false,
   required = false,
   error,
   containerStyle,
+  recentKey,
+  recentMax,
   ...textInputProps
 }) => /* @__PURE__ */ jsx(
   Field,
@@ -620,9 +931,8 @@ var FormField = ({
     error,
     label: labelHidden ? void 0 : label,
     required,
-    children: ({ describedById, hasError, controlId }) => /* @__PURE__ */ jsx(
-      ThemedTextInput,
-      {
+    children: ({ describedById, hasError, controlId }) => {
+      const inputProps = {
         accessibilityHint: `Enter ${label}`,
         accessibilityLabel: label,
         describedById,
@@ -631,60 +941,24 @@ var FormField = ({
         requiredField: required,
         testID: "form-field-input",
         ...textInputProps
-      }
-    )
+      };
+      return recentKey !== void 0 && recentKey !== "" ? /* @__PURE__ */ jsx(RecentInputField, { label, recentKey, recentMax, ...inputProps }) : /* @__PURE__ */ jsx(ThemedTextInput, { ...inputProps });
+    }
   }
 );
+
+// src/ChipSelector/constants.ts
 var TRANSPARENT_COLOR = "transparent";
-var WHITE_COLOR = "#fff";
+var CHIP_HIT_SLOP = { top: 10, bottom: 10, left: 4, right: 4 };
+var CHIP_GUTTER = 8;
+var DEFAULT_CHIP_TESTID_PREFIX = "chip-selector-chip";
 var SOLID_RADIUS = 20;
 var OUTLINE_RADIUS = 999;
 var OUTLINE_PAD_H = 12;
 var OUTLINE_PAD_V = 5;
 var OUTLINE_FONT_SIZE = 13;
-var OUTLINE_TINT_ALPHA = 0.1;
-var HEX_SHORT_LENGTH2 = 3;
-var HEX_RADIX2 = 16;
-var RGB_R_START = 0;
-var RGB_R_END = 2;
-var RGB_G_END = 4;
-var RGB_B_END = 6;
-var CHIP_HIT_SLOP = { top: 10, bottom: 10, left: 4, right: 4 };
-var CHIP_GUTTER = 8;
-var DEFAULT_CHIP_TESTID_PREFIX = "chip-selector-chip";
-var ON_BRAND_SCALE = "onBrand";
-var MAIN_STEP = "500";
-function onBrandInk(palette) {
-  const scales = palette;
-  return scales[ON_BRAND_SCALE]?.[MAIN_STEP] ?? WHITE_COLOR;
-}
-function withAlpha2(hex, alpha) {
-  const normalized = hex.replace("#", "");
-  const isShort = normalized.length === HEX_SHORT_LENGTH2;
-  const full = isShort ? normalized.split("").map((c) => c + c).join("") : normalized;
-  const r = parseInt(full.slice(RGB_R_START, RGB_R_END), HEX_RADIX2);
-  const g = parseInt(full.slice(RGB_R_END, RGB_G_END), HEX_RADIX2);
-  const b = parseInt(full.slice(RGB_G_END, RGB_B_END), HEX_RADIX2);
-  const isValid = !Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b);
-  return isValid ? `rgba(${r}, ${g}, ${b}, ${alpha})` : hex;
-}
-var styles5 = StyleSheet.create({
-  chipContainer: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    // `gap`, NOT per-chip margins plus a compensating negative container margin.
-    //
-    // The old form was `chipWrapper { marginRight: 8, marginBottom: 8 }` with
-    // `chipContainer { marginBottom: -8 }`. Its comment blamed `Field`'s 16px container margin —
-    // that was WRONG, and worth recording: F3 was briefed on the belief that the -8 compensated for
-    // `Field` and had to move in lockstep with it. It did not. -8 cancelled the CHIP's own gutter
-    // hanging off the last row, identically whether `Field` contributed 16, 0, or anything else.
-    //
-    // The pair is still the wrong tool: it holds only while the two constants agree, and it leaves
-    // a real negative margin any measuring parent inherits. `gap` produces the byte-identical box
-    // and is correct under BOTH of `Field`'s spacing models, not just the one it was tuned against.
-    gap: CHIP_GUTTER
-  },
+var CHIP_ICON_GAP = 6;
+var chipStyles = StyleSheet.create({
   chip: {
     paddingHorizontal: 12,
     paddingVertical: 6,
@@ -698,28 +972,21 @@ var styles5 = StyleSheet.create({
     borderRadius: OUTLINE_RADIUS,
     borderWidth: 1
   },
+  chipContent: { flexDirection: "row", alignItems: "center", gap: CHIP_ICON_GAP },
   chipText: {},
   chipTextOutline: { fontSize: OUTLINE_FONT_SIZE }
 });
-function chipIdentity(option, selected, config) {
-  return {
-    testID: `${config.prefix}-${String(option.value)}`,
-    // The English default is retained verbatim: erevna/katalogos assert the exact string
-    // `Selects Red`. Consumers that localize pass `optionAccessibilityHint`.
-    accessibilityHint: config.hint ?? `Selects ${option.label}`,
-    ariaPressed: config.multiple ? selected : void 0
-  };
+function ChipContent({ icon, label, textStyle }) {
+  const text = /* @__PURE__ */ jsx(Text, { style: textStyle, children: label });
+  if (icon === void 0 || icon === null)
+    return text;
+  return /* @__PURE__ */ jsxs(View, { style: chipStyles.chipContent, children: [
+    /* @__PURE__ */ jsx(View, { "aria-hidden": true, children: icon }),
+    text
+  ] });
 }
-function OutlineChip({
-  option,
-  selected,
-  disabled,
-  colors,
-  testID,
-  accessibilityHint,
-  ariaPressed,
-  onPress
-}) {
+function OutlineChip(props) {
+  const { option, selected, disabled, colors, testID, accessibilityHint, onPress } = props;
   const [hovered, setHovered] = React2.useState(false);
   const active = selected || hovered;
   const borderColor = active ? colors.primary : colors.border;
@@ -728,49 +995,179 @@ function OutlineChip({
   return /* @__PURE__ */ jsx(
     Pressable,
     {
+      ref: props.hostRef,
       accessibilityHint,
       accessibilityLabel: option.label,
-      accessibilityRole: "button",
+      accessibilityRole: props.accessibilityRole,
       accessibilityState: { selected, disabled },
-      "aria-pressed": ariaPressed,
+      "aria-checked": props.ariaChecked,
+      "aria-pressed": props.ariaPressed,
       disabled,
       hitSlop: CHIP_HIT_SLOP,
+      tabIndex: props.tabIndex,
       testID,
       onHoverIn: () => setHovered(true),
       onHoverOut: () => setHovered(false),
       onPress,
-      children: /* @__PURE__ */ jsx(View, { style: [styles5.chipOutline, { borderColor, backgroundColor }], children: /* @__PURE__ */ jsx(Text, { style: [styles5.chipText, styles5.chipTextOutline, { color: textColor }], children: option.label }) })
+      children: /* @__PURE__ */ jsx(View, { style: [chipStyles.chipOutline, { borderColor, backgroundColor }], children: /* @__PURE__ */ jsx(
+        ChipContent,
+        {
+          icon: option.icon,
+          label: option.label,
+          textStyle: [chipStyles.chipText, chipStyles.chipTextOutline, { color: textColor }]
+        }
+      ) })
     }
   );
 }
-function SolidChip({
-  option,
-  selected,
-  disabled,
-  colors,
-  testID,
-  accessibilityHint,
-  ariaPressed,
-  onPress
-}) {
+function SolidChip(props) {
+  const { option, selected, disabled, colors, testID, accessibilityHint, onPress } = props;
   const backgroundColor = selected ? colors.primary : TRANSPARENT_COLOR;
   const textColor = selected ? colors.onPrimary : colors.textStrong;
+  const rovingTabStop = { tabIndex: props.tabIndex };
   return /* @__PURE__ */ jsx(
     TouchableOpacity,
     {
+      ref: props.hostRef,
       accessibilityHint,
       accessibilityLabel: option.label,
-      accessibilityRole: "button",
+      accessibilityRole: props.accessibilityRole,
       accessibilityState: { selected, disabled },
-      "aria-pressed": ariaPressed,
+      "aria-checked": props.ariaChecked,
+      "aria-pressed": props.ariaPressed,
       disabled,
       hitSlop: CHIP_HIT_SLOP,
       testID,
       onPress,
-      children: /* @__PURE__ */ jsx(View, { style: [styles5.chip, { borderColor: colors.border, backgroundColor }], children: /* @__PURE__ */ jsx(Text, { style: [styles5.chipText, { color: textColor }], children: option.label }) })
+      ...rovingTabStop,
+      children: /* @__PURE__ */ jsx(View, { style: [chipStyles.chip, { borderColor: colors.border, backgroundColor }], children: /* @__PURE__ */ jsx(ChipContent, { icon: option.icon, label: option.label, textStyle: [chipStyles.chipText, { color: textColor }] }) })
     }
   );
 }
+
+// src/ChipSelector/utils/radioKeyboard.ts
+var SPACE_KEYS = [" ", "Spacebar"];
+var NEXT_KEYS = ["ArrowRight", "ArrowDown"];
+var PREVIOUS_KEYS = ["ArrowLeft", "ArrowUp"];
+var ROVING_TAB_STOP = 0;
+var ROVING_SKIPPED = -1;
+function radioKeyTarget(key, index, count) {
+  const isOutOfRange = index < 0 || index >= count;
+  if (isOutOfRange)
+    return null;
+  if (SPACE_KEYS.includes(key))
+    return index;
+  const isArrow = NEXT_KEYS.includes(key) || PREVIOUS_KEYS.includes(key);
+  if (!isArrow || count === 1)
+    return null;
+  const step = NEXT_KEYS.includes(key) ? 1 : -1;
+  return (index + step + count) % count;
+}
+function radioTabIndex(index, selectedIndex, disabled) {
+  if (disabled)
+    return ROVING_SKIPPED;
+  const tabStop = selectedIndex >= 0 ? selectedIndex : 0;
+  return index === tabStop ? ROVING_TAB_STOP : ROVING_SKIPPED;
+}
+
+// src/ChipSelector/hooks/useRadioKeyboard.ts
+var NO_GROUP_PROPS = {};
+function useRadioKeyboard(config) {
+  const { enabled, disabled, values, selectedIndex, onChange } = config;
+  const nodes = React2.useRef([]);
+  const chipRef = React2.useCallback((index) => (node) => {
+    nodes.current[index] = node;
+  }, []);
+  const onKeyDown = (event) => {
+    if (disabled)
+      return;
+    const index = nodes.current.indexOf(event.target);
+    const target = radioKeyTarget(event.key, index, values.length);
+    const nextValue = target === null ? void 0 : values[target];
+    if (target === null || nextValue === void 0)
+      return;
+    event.preventDefault();
+    if (target !== index)
+      nodes.current[target]?.focus?.();
+    onChange(nextValue);
+  };
+  return {
+    chipRef,
+    tabIndexFor: (index) => enabled ? radioTabIndex(index, selectedIndex, disabled) : void 0,
+    // `onKeyDown` is a web-only View prop RN's types do not declare; RNW forwards it to the DOM.
+    groupProps: enabled ? { onKeyDown } : NO_GROUP_PROPS
+  };
+}
+
+// src/ChipSelector/utils/chipColors.ts
+var WHITE_COLOR = "#fff";
+var OUTLINE_TINT_ALPHA = 0.1;
+var HEX_SHORT_LENGTH2 = 3;
+var HEX_RADIX2 = 16;
+var RGB_R_START = 0;
+var RGB_R_END = 2;
+var RGB_G_END = 4;
+var RGB_B_END = 6;
+var ON_BRAND_SCALE = "onBrand";
+var MAIN_STEP = "500";
+function onBrandInk(palette) {
+  const scales = palette;
+  return scales[ON_BRAND_SCALE]?.[MAIN_STEP] ?? WHITE_COLOR;
+}
+function withAlpha2(hex, alpha) {
+  const normalized = hex.replace("#", "");
+  const isShort = normalized.length === HEX_SHORT_LENGTH2;
+  const full = isShort ? normalized.split("").map((c) => c + c).join("") : normalized;
+  const r = parseInt(full.slice(RGB_R_START, RGB_R_END), HEX_RADIX2);
+  const g = parseInt(full.slice(RGB_R_END, RGB_G_END), HEX_RADIX2);
+  const b = parseInt(full.slice(RGB_G_END, RGB_B_END), HEX_RADIX2);
+  const isValid = !Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b);
+  return isValid ? `rgba(${r}, ${g}, ${b}, ${alpha})` : hex;
+}
+function buildChipColors(colors, palette) {
+  const primary = palette.primary[500];
+  return {
+    border: colors.border,
+    textStrong: colors.text,
+    textMuted: colors.textSecondary,
+    primary,
+    onPrimary: onBrandInk(palette),
+    muted: colors.background,
+    tint: withAlpha2(primary, OUTLINE_TINT_ALPHA)
+  };
+}
+
+// src/ChipSelector/utils/chipIdentity.ts
+function chipIdentity(option, selected, config) {
+  const isRadio = config.radio === true && !config.multiple;
+  return {
+    testID: `${config.prefix}-${String(option.value)}`,
+    // The English default is retained verbatim: erevna/katalogos assert the exact string
+    // `Selects Red`. Consumers that localize pass `optionAccessibilityHint`.
+    accessibilityHint: config.hint ?? `Selects ${option.label}`,
+    ariaPressed: config.multiple ? selected : void 0,
+    accessibilityRole: isRadio ? "radio" : "button",
+    ariaChecked: isRadio ? selected : void 0
+  };
+}
+var styles5 = StyleSheet.create({
+  chipContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    // `gap`, NOT per-chip margins plus a compensating negative container margin.
+    //
+    // The old form was `chipWrapper { marginRight: 8, marginBottom: 8 }` with
+    // `chipContainer { marginBottom: -8 }`. Its comment blamed `Field`'s 16px container margin —
+    // that was WRONG, and worth recording: F3 was briefed on the belief that the -8 compensated for
+    // `Field` and had to move in lockstep with it. It did not. -8 cancelled the CHIP's own gutter
+    // hanging off the last row, identically whether `Field` contributed 16, 0, or anything else.
+    //
+    // The pair is still the wrong tool: it holds only while the two constants agree, and it leaves
+    // a real negative margin any measuring parent inherits. `gap` produces the byte-identical box
+    // and is correct under BOTH of `Field`'s spacing models, not just the one it was tuned against.
+    gap: CHIP_GUTTER
+  }
+});
 var ChipSelector = ({
   label,
   options,
@@ -785,28 +1182,26 @@ var ChipSelector = ({
   error,
   testID,
   chipTestIDPrefix = DEFAULT_CHIP_TESTID_PREFIX,
-  optionAccessibilityHint
+  optionAccessibilityHint,
+  singleSelectRole = "button"
 }) => {
+  const isRadioGroup = !multiple && singleSelectRole === "radio";
   const { theme } = useUi();
   const { colors, palette } = theme;
-  const chipColors = React2.useMemo(() => {
-    const primary = palette.primary["500"];
-    return {
-      border: colors.border,
-      textStrong: colors.text,
-      textMuted: colors.textSecondary,
-      primary,
-      onPrimary: onBrandInk(palette),
-      muted: colors.background,
-      tint: withAlpha2(primary, OUTLINE_TINT_ALPHA)
-    };
-  }, [colors.border, colors.text, colors.textSecondary, colors.background, palette]);
+  const chipColors = React2.useMemo(() => buildChipColors(colors, palette), [colors, palette]);
   function isSelected(optionValue) {
     if (multiple && Array.isArray(value))
       return value.includes(optionValue);
     return value === optionValue;
   }
-  function renderChip(option) {
+  const radio = useRadioKeyboard({
+    enabled: isRadioGroup,
+    disabled,
+    values: options.map((option) => option.value),
+    selectedIndex: options.findIndex((option) => isSelected(option.value)),
+    onChange
+  });
+  function renderChip(option, index) {
     const selected = isSelected(option.value);
     const chipProps = {
       colors: chipColors,
@@ -816,8 +1211,13 @@ var ChipSelector = ({
       ...chipIdentity(option, selected, {
         prefix: chipTestIDPrefix,
         hint: optionAccessibilityHint,
-        multiple
+        multiple,
+        radio: isRadioGroup
       }),
+      // Radio mode only: roving tab stop + host node for arrow-key focus moves. Both stay
+      // `undefined` otherwise, so button / multi chips keep their existing tab order.
+      tabIndex: radio.tabIndexFor(index),
+      hostRef: isRadioGroup ? radio.chipRef(index) : void 0,
       onPress: () => onChange(option.value)
     };
     const key = String(option.value);
@@ -832,7 +1232,16 @@ var ChipSelector = ({
       required,
       spacing,
       testID,
-      children: ({ describedById, hasError }) => /* @__PURE__ */ jsx(View, { style: styles5.chipContainer, ...webFieldA11y({ describedById, hasError }), children: options.map(renderChip) })
+      children: ({ describedById, hasError }) => /* @__PURE__ */ jsx(
+        View,
+        {
+          accessibilityRole: isRadioGroup ? "radiogroup" : void 0,
+          style: styles5.chipContainer,
+          ...webFieldA11y({ describedById, hasError }),
+          ...radio.groupProps,
+          children: options.map(renderChip)
+        }
+      )
     }
   );
 };
@@ -890,8 +1299,7 @@ var FormSwitch = ({
           {
             accessibilityHint: accessibilityHint ?? label,
             accessibilityLabel: label,
-            accessibilityRole: "switch",
-            accessibilityState: { checked: value },
+            accessibilityState: { checked: value, disabled },
             disabled,
             testID,
             value,
@@ -1003,140 +1411,6 @@ var FormCheckbox = ({
     }
   );
 };
-var IS_WEB5 = Platform.OS === "web";
-var MENU_PORTAL_Z_INDEX = 1e3;
-var MENU_TOP_GAP2 = 4;
-function toDomNode(ref) {
-  const node = ref.current;
-  if (node === null || typeof node.getBoundingClientRect !== "function") return null;
-  return node;
-}
-function readAnchorRect(ref) {
-  if (!IS_WEB5) return null;
-  const node = toDomNode(ref);
-  if (node === null) return null;
-  const r = node.getBoundingClientRect();
-  return { top: r.top, left: r.left, width: r.width, bottom: r.bottom };
-}
-function buildPortalPopoverStyle(rect) {
-  return {
-    // RN's ViewStyle union omits 'fixed', but react-native-web honours it at runtime.
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- web-only position value
-    position: "fixed",
-    top: rect.bottom + MENU_TOP_GAP2,
-    left: rect.left,
-    width: rect.width,
-    zIndex: MENU_PORTAL_Z_INDEX
-  };
-}
-function useAnchorRect(ref, enabled) {
-  const [rect, setRect] = useState(null);
-  useLayoutEffect(() => {
-    if (!IS_WEB5 || !enabled) {
-      setRect(null);
-      return void 0;
-    }
-    let frame = null;
-    let disposed = false;
-    const apply = () => {
-      frame = null;
-      if (disposed) return;
-      setRect(readAnchorRect(ref));
-    };
-    const schedule = () => {
-      if (frame !== null) return;
-      frame = window.requestAnimationFrame(apply);
-    };
-    apply();
-    document.addEventListener("scroll", schedule, true);
-    window.addEventListener("resize", schedule);
-    const node = toDomNode(ref);
-    const observer = typeof ResizeObserver === "function" ? new ResizeObserver(schedule) : null;
-    if (observer !== null) {
-      if (node !== null) observer.observe(node);
-      observer.observe(document.body);
-    }
-    return () => {
-      disposed = true;
-      if (frame !== null) window.cancelAnimationFrame(frame);
-      document.removeEventListener("scroll", schedule, true);
-      window.removeEventListener("resize", schedule);
-      if (observer !== null) observer.disconnect();
-    };
-  }, [ref, enabled]);
-  return IS_WEB5 && enabled ? rect : null;
-}
-var IS_WEB6 = typeof document !== "undefined";
-var ESCAPE_KEY = "Escape";
-var ACTIVE_WEIGHT = "700";
-var IDLE_WEIGHT = "400";
-function useDismiss(anchorRef, menuRef, onDismiss) {
-  useEffect(() => {
-    if (!IS_WEB6) return void 0;
-    const onMouseDown = (event) => {
-      const anchorNode = anchorRef.current;
-      const menuNode = menuRef.current;
-      const target = event.target instanceof Node ? event.target : null;
-      const insideAnchor = anchorNode !== null && target !== null && anchorNode.contains(target);
-      const insideMenu = menuNode !== null && target !== null && menuNode.contains(target);
-      if (!insideAnchor && !insideMenu) onDismiss();
-    };
-    const onKeyDown = (event) => {
-      if (event.key === ESCAPE_KEY) onDismiss();
-    };
-    document.addEventListener("mousedown", onMouseDown);
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("mousedown", onMouseDown);
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [anchorRef, menuRef, onDismiss]);
-}
-function AnchoredMenu({
-  options,
-  selectedValue,
-  onSelect,
-  onDismiss,
-  colors,
-  optionHint,
-  testID,
-  anchorRef,
-  usePortal = true
-}) {
-  const menuRef = React2.useRef(null);
-  useDismiss(anchorRef, menuRef, onDismiss);
-  const rect = useAnchorRect(anchorRef, usePortal);
-  const portalStyle = rect !== null ? buildPortalPopoverStyle(rect) : null;
-  const menu = /* @__PURE__ */ jsx(
-    View,
-    {
-      ref: menuRef,
-      accessibilityRole: "menu",
-      style: [controlStyles.menu, { borderColor: colors.border, backgroundColor: colors.surface }, portalStyle],
-      testID: `${testID}-menu`,
-      children: /* @__PURE__ */ jsx(ScrollView, { keyboardShouldPersistTaps: "handled", nestedScrollEnabled: true, children: options.map((opt) => {
-        const active = opt.value === selectedValue;
-        return /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            accessibilityRole: "menuitem",
-            accessibilityLabel: opt.label,
-            accessibilityHint: optionHint,
-            accessibilityState: { selected: active },
-            "aria-selected": active,
-            onPress: () => onSelect(opt.value),
-            style: controlStyles.option,
-            testID: `${testID}-option-${opt.value}`,
-            children: /* @__PURE__ */ jsx(Text, { style: [controlStyles.optionText, { color: active ? colors.brand : colors.text, fontWeight: active ? ACTIVE_WEIGHT : IDLE_WEIGHT }], children: opt.label })
-          },
-          opt.value
-        );
-      }) })
-    }
-  );
-  if (usePortal && IS_WEB6) return createPortal(menu, document.body);
-  return menu;
-}
 var CHEVRON_DOWN = "\u25BE";
 var CHEVRON_UP = "\u25B4";
 function SelectControl({
@@ -1238,7 +1512,7 @@ function isUnmatched(options, text) {
   if (needle === "") return false;
   return !options.some((o) => o.value.toLowerCase() === needle || o.label.toLowerCase() === needle);
 }
-var CLOSE_DELAY_MS = 140;
+var CLOSE_DELAY_MS2 = 140;
 var DEFAULT_TYPEAHEAD_MIN_CHARS = 1;
 var DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS = 8;
 function TypeaheadControl({
@@ -1282,7 +1556,7 @@ function TypeaheadControl({
     [options, onChange]
   );
   const handleBlur = useCallback(() => {
-    setTimeout(() => setIsOpen(false), CLOSE_DELAY_MS);
+    setTimeout(() => setIsOpen(false), CLOSE_DELAY_MS2);
   }, []);
   const handleSubmit = useCallback(() => {
     setIsOpen(false);
@@ -1399,6 +1673,6 @@ function DateRangeControl({
   ] });
 }
 
-export { AnchoredMenu, ChipSelector, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, Field, FormActions, FormCell, FormCheckbox, FormField, FormGrid, FormSection, FormSwitch, SelectControl, ThemedTextInput, TypeaheadControl, controlStyles, isUnmatched, suggestOptions, useThemedInput };
+export { AnchoredMenu, ChipSelector, DEFAULT_MAX_RECENTS, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, Field, FormActions, FormCell, FormCheckbox, FormField, FormGrid, FormSection, FormSwitch, SelectControl, ThemedTextInput, TypeaheadControl, controlStyles, isUnmatched, suggestOptions, useRecentValues, useThemedInput };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map