@dloizides/ui-forms 1.6.0 → 1.8.0

package/dist/index.mjs

@@ -1,45 +1,116 @@
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react';
 import { StyleSheet, Platform, TextInput, View, Text, Switch, Pressable, TouchableOpacity } from 'react-native';
 import { useUi } from '@dloizides/ui-feedback';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { Button } from '@dloizides/ui-buttons';
 
 // src/Field/Field.tsx
+function FieldLabel({
+  label,
+  marker,
+  optionalLabel,
+  style,
+  requiredMarkStyle,
+  optionalMarkStyle
+}) {
+  return /* @__PURE__ */ jsxs(Text, { style, children: [
+    label,
+    " ",
+    marker === "required" ? (
+      // The asterisk is decorative — the control's `aria-required` conveys "required" to
+      // assistive tech, so a screen reader says "required" instead of "star".
+      /* @__PURE__ */ jsx(Text, { "aria-hidden": true, accessibilityElementsHidden: true, importantForAccessibility: "no", style: requiredMarkStyle, children: "*" })
+    ) : null,
+    marker === "optional" && optionalLabel !== "" ? (
+      // Also decorative: "optional" is the ABSENCE of `aria-required`, which assistive tech
+      // already conveys. Rendering it to a screen reader would double-announce the same fact.
+      /* @__PURE__ */ jsx(Text, { "aria-hidden": true, accessibilityElementsHidden: true, importantForAccessibility: "no", style: optionalMarkStyle, children: optionalLabel })
+    ) : null
+  ] });
+}
+
+// src/Field/fieldMarkers.ts
+var DEFAULT_OPTIONAL_LABEL = "(optional)";
+function resolveFieldMarker(required, optional) {
+  if (required) return "required";
+  if (optional) return "optional";
+  return "none";
+}
+var FIELD_FONT_SIZE = 13;
+var FIELD_FONT_WEIGHT = "600";
+var CONTROL_FONT_SIZE = 11;
+var CONTROL_FONT_WEIGHT = "700";
+var CONTROL_LETTER_SPACING = 0.4;
+var labelVariantStyles = StyleSheet.create({
+  field: {
+    fontSize: FIELD_FONT_SIZE,
+    fontWeight: FIELD_FONT_WEIGHT
+  },
+  control: {
+    fontSize: CONTROL_FONT_SIZE,
+    fontWeight: CONTROL_FONT_WEIGHT,
+    letterSpacing: CONTROL_LETTER_SPACING,
+    textTransform: "uppercase"
+  }
+});
+function resolveLabelVariantStyle(variant) {
+  return variant === "control" ? labelVariantStyles.control : labelVariantStyles.field;
+}
 var CONTAINER_MARGIN_BOTTOM = 16;
-var LABEL_FONT_SIZE = 13;
-var LABEL_FONT_WEIGHT = "600";
 var LABEL_MARGIN_BOTTOM = 4;
 var ERROR_FONT_SIZE = 12;
 var ERROR_MARGIN_TOP = 4;
+var HINT_FONT_SIZE = 12;
+var HINT_MARGIN_TOP = 4;
+var OPTIONAL_MARK_FONT_WEIGHT = "400";
 var styles = StyleSheet.create({
   container: {
     marginBottom: CONTAINER_MARGIN_BOTTOM
   },
   label: {
-    marginBottom: LABEL_MARGIN_BOTTOM,
-    fontSize: LABEL_FONT_SIZE,
-    fontWeight: LABEL_FONT_WEIGHT
+    marginBottom: LABEL_MARGIN_BOTTOM
+  },
+  hintText: {
+    fontSize: HINT_FONT_SIZE,
+    marginTop: HINT_MARGIN_TOP
   },
   errorText: {
     fontSize: ERROR_FONT_SIZE,
     marginTop: ERROR_MARGIN_TOP
+  },
+  optionalMark: {
+    fontWeight: OPTIONAL_MARK_FONT_WEIGHT
   }
 });
 var fieldSeq = 0;
-function useFieldErrorId() {
-  const [id] = React.useState(() => {
+function useFieldIds() {
+  const [ids] = React.useState(() => {
     fieldSeq += 1;
-    return `field-error-${String(fieldSeq)}`;
+    const seq = String(fieldSeq);
+    return { hintId: `field-hint-${seq}`, errorId: `field-error-${seq}` };
   });
-  return id;
+  return ids;
+}
+function isPresent(value) {
+  return typeof value === "string" && value !== "";
 }
 function hasFieldError(error) {
-  return typeof error === "string" && error !== "";
+  return isPresent(error);
+}
+function joinDescribedBy(hintId, errorId) {
+  const ids = [hintId, errorId].filter((id) => isPresent(id));
+  return ids.length > 0 ? ids.join(" ") : void 0;
 }
 var Field = ({
   label,
   children,
   required = false,
+  optional = false,
+  optionalLabel = DEFAULT_OPTIONAL_LABEL,
+  hint,
   error,
+  labelVariant,
+  labelStyle,
   containerStyle,
   testID
 }) => {
@@ -47,31 +118,89 @@ var Field = ({
   const { colors, semantic } = theme;
   const errorColor = semantic.error["500"];
   const hasError = hasFieldError(error);
-  const hasLabel = typeof label === "string" && label !== "";
-  const errorId = useFieldErrorId();
+  const hasHint = isPresent(hint);
+  const labelText = label ?? "";
+  const hasLabel = labelText !== "";
+  const marker = resolveFieldMarker(required, optional);
+  const { hintId, errorId } = useFieldIds();
   const themeStyles = React.useMemo(
     () => ({
       label: { color: colors.textSecondary },
       requiredMark: { color: errorColor },
+      // The optional marker is an aside, so it sits a step back from the label's own ink.
+      optionalMark: { color: colors.textSecondary },
+      hintText: { color: colors.textSecondary },
       errorText: { color: errorColor }
     }),
     [colors.textSecondary, errorColor]
   );
-  const control = typeof children === "function" ? children({ describedById: hasError ? errorId : void 0, hasError }) : children;
+  const describedById = joinDescribedBy(hasHint ? hintId : void 0, hasError ? errorId : void 0);
+  const control = typeof children === "function" ? children({ describedById, hasError }) : children;
   return /* @__PURE__ */ jsxs(View, { style: [styles.container, containerStyle], testID, children: [
-    hasLabel ? /* @__PURE__ */ jsxs(Text, { style: [styles.label, themeStyles.label], children: [
-      label,
-      " ",
-      required ? (
-        // The asterisk is decorative — the control's `aria-required` conveys "required" to
-        // assistive tech, so a screen reader says "required" instead of "star".
-        /* @__PURE__ */ jsx(Text, { "aria-hidden": true, accessibilityElementsHidden: true, importantForAccessibility: "no", style: themeStyles.requiredMark, children: "*" })
-      ) : null
-    ] }) : null,
+    hasLabel ? /* @__PURE__ */ jsx(
+      FieldLabel,
+      {
+        label: labelText,
+        marker,
+        optionalLabel,
+        optionalMarkStyle: [styles.optionalMark, themeStyles.optionalMark],
+        requiredMarkStyle: themeStyles.requiredMark,
+        style: [styles.label, resolveLabelVariantStyle(labelVariant), themeStyles.label, labelStyle]
+      }
+    ) : null,
     control,
+    hasHint ? /* @__PURE__ */ jsx(Text, { nativeID: hintId, style: [styles.hintText, themeStyles.hintText], children: hint }) : null,
     hasError ? /* @__PURE__ */ jsx(Text, { nativeID: errorId, role: "alert", style: [styles.errorText, themeStyles.errorText], children: error }) : null
   ] });
 };
+var ACTIONS_GAP = 12;
+var styles2 = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    gap: ACTIONS_GAP
+  }
+});
+var FormActions = ({
+  onSave,
+  onCancel,
+  saveLabel,
+  cancelLabel = "",
+  saveHint,
+  cancelHint,
+  saving = false,
+  saveDisabled = false,
+  containerStyle,
+  saveTestID = "save-button",
+  cancelTestID = "cancel-button",
+  testID
+}) => /* @__PURE__ */ jsxs(View, { style: [styles2.container, containerStyle], testID, children: [
+  typeof onCancel === "function" ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      accessibilityHint: cancelHint ?? cancelLabel,
+      accessibilityLabel: cancelLabel,
+      disabled: saving,
+      label: cancelLabel,
+      testID: cancelTestID,
+      variant: "outline",
+      onPress: onCancel
+    }
+  ) : null,
+  /* @__PURE__ */ jsx(
+    Button,
+    {
+      accessibilityHint: saveHint ?? saveLabel,
+      accessibilityLabel: saveLabel,
+      disabled: saveDisabled,
+      label: saveLabel,
+      loading: saving,
+      testID: saveTestID,
+      variant: "primary",
+      onPress: onSave
+    }
+  )
+] });
 var IS_WEB = Platform.OS === "web";
 var TRANSITION_PROPERTY = "border-color, background-color, box-shadow";
 var TRANSITION_DURATION = "0.14s";
@@ -131,7 +260,8 @@ function useThemedInput(options = {}) {
     const backgroundColor = isFocused ? colors.surface : colors.surfaceElevated;
     const base = { color: colors.text, borderColor, backgroundColor };
     if (!IS_WEB) return base;
-    const ring = isFocused && !hasError ? `0 0 0 ${FOCUS_RING_WIDTH}px ${withAlpha(primary, FOCUS_RING_ALPHA)}` : "none";
+    const ringColor = hasError ? errorColor : primary;
+    const ring = isFocused ? `0 0 0 ${FOCUS_RING_WIDTH}px ${withAlpha(ringColor, FOCUS_RING_ALPHA)}` : "none";
     const webStyle = {
       transitionProperty: TRANSITION_PROPERTY,
       // Collapse the eased transition to instant when the user prefers reduced motion.
@@ -197,7 +327,7 @@ var INPUT_PADDING_V = 10;
 var INPUT_PADDING_H = 12;
 var INPUT_BORDER_RADIUS = 8;
 var INPUT_BORDER_WIDTH = 1;
-var styles2 = StyleSheet.create({
+var styles3 = StyleSheet.create({
   input: {
     paddingVertical: INPUT_PADDING_V,
     paddingHorizontal: INPUT_PADDING_H,
@@ -219,7 +349,7 @@ var FormField = ({
     describedById,
     hasError,
     requiredField: required,
-    style: styles2.input,
+    style: styles3.input,
     testID: "form-field-input",
     ...textInputProps
   }
@@ -240,6 +370,13 @@ 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;
@@ -250,7 +387,7 @@ function withAlpha2(hex, alpha) {
   const isValid = !Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b);
   return isValid ? `rgba(${r}, ${g}, ${b}, ${alpha})` : hex;
 }
-var styles3 = StyleSheet.create({
+var styles4 = StyleSheet.create({
   chipContainer: {
     flexDirection: "row",
     flexWrap: "wrap",
@@ -279,11 +416,23 @@ var styles3 = StyleSheet.create({
   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 OutlineChip({
   option,
   selected,
   disabled,
   colors,
+  testID,
+  accessibilityHint,
+  ariaPressed,
   onPress
 }) {
   const [hovered, setHovered] = React.useState(false);
@@ -294,18 +443,19 @@ function OutlineChip({
   return /* @__PURE__ */ jsx(
     Pressable,
     {
-      accessibilityHint: `Selects ${option.label}`,
+      accessibilityHint,
       accessibilityLabel: option.label,
       accessibilityRole: "button",
       accessibilityState: { selected, disabled },
+      "aria-pressed": ariaPressed,
       disabled,
       hitSlop: CHIP_HIT_SLOP,
-      style: styles3.chipWrapper,
-      testID: `chip-selector-chip-${String(option.value)}`,
+      style: styles4.chipWrapper,
+      testID,
       onHoverIn: () => setHovered(true),
       onHoverOut: () => setHovered(false),
       onPress,
-      children: /* @__PURE__ */ jsx(View, { style: [styles3.chipOutline, { borderColor, backgroundColor }], children: /* @__PURE__ */ jsx(Text, { style: [styles3.chipText, styles3.chipTextOutline, { color: textColor }], children: option.label }) })
+      children: /* @__PURE__ */ jsx(View, { style: [styles4.chipOutline, { borderColor, backgroundColor }], children: /* @__PURE__ */ jsx(Text, { style: [styles4.chipText, styles4.chipTextOutline, { color: textColor }], children: option.label }) })
     }
   );
 }
@@ -314,23 +464,27 @@ function SolidChip({
   selected,
   disabled,
   colors,
+  testID,
+  accessibilityHint,
+  ariaPressed,
   onPress
 }) {
   const backgroundColor = selected ? colors.primary : TRANSPARENT_COLOR;
-  const textColor = selected ? WHITE_COLOR : colors.textStrong;
+  const textColor = selected ? colors.onPrimary : colors.textStrong;
   return /* @__PURE__ */ jsx(
     TouchableOpacity,
     {
-      accessibilityHint: `Selects ${option.label}`,
+      accessibilityHint,
       accessibilityLabel: option.label,
       accessibilityRole: "button",
       accessibilityState: { selected, disabled },
+      "aria-pressed": ariaPressed,
       disabled,
       hitSlop: CHIP_HIT_SLOP,
-      style: styles3.chipWrapper,
-      testID: `chip-selector-chip-${String(option.value)}`,
+      style: styles4.chipWrapper,
+      testID,
       onPress,
-      children: /* @__PURE__ */ jsx(View, { style: [styles3.chip, { borderColor: colors.border, backgroundColor }], children: /* @__PURE__ */ jsx(Text, { style: [styles3.chipText, { color: textColor }], children: option.label }) })
+      children: /* @__PURE__ */ jsx(View, { style: [styles4.chip, { borderColor: colors.border, backgroundColor }], children: /* @__PURE__ */ jsx(Text, { style: [styles4.chipText, { color: textColor }], children: option.label }) })
     }
   );
 }
@@ -350,7 +504,9 @@ var ChipSelector = ({
   containerStyle,
   required = false,
   error,
-  testID
+  testID,
+  chipTestIDPrefix = DEFAULT_CHIP_TESTID_PREFIX,
+  optionAccessibilityHint
 }) => {
   const { theme } = useUi();
   const { colors, palette } = theme;
@@ -361,30 +517,37 @@ var ChipSelector = ({
       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.primary]);
+  }, [colors.border, colors.text, colors.textSecondary, colors.background, palette]);
   function isSelected(optionValue) {
     if (multiple && Array.isArray(value))
       return value.includes(optionValue);
     return value === optionValue;
   }
   function renderChip(option) {
+    const selected = isSelected(option.value);
     const chipProps = {
       colors: chipColors,
       disabled,
       option,
-      selected: isSelected(option.value),
+      selected,
+      ...chipIdentity(option, selected, {
+        prefix: chipTestIDPrefix,
+        hint: optionAccessibilityHint,
+        multiple
+      }),
       onPress: () => onChange(option.value)
     };
     const key = String(option.value);
     return variant === "outline" ? /* @__PURE__ */ jsx(OutlineChip, { ...chipProps }, key) : /* @__PURE__ */ jsx(SolidChip, { ...chipProps }, key);
   }
-  return /* @__PURE__ */ jsx(Field, { containerStyle, error, label, required, testID, children: ({ describedById, hasError }) => /* @__PURE__ */ jsx(View, { style: styles3.chipContainer, ...groupA11yProps(describedById, hasError), children: options.map(renderChip) }) });
+  return /* @__PURE__ */ jsx(Field, { containerStyle, error, label, required, testID, children: ({ describedById, hasError }) => /* @__PURE__ */ jsx(View, { style: styles4.chipContainer, ...groupA11yProps(describedById, hasError), children: options.map(renderChip) }) });
 };
 var DESCRIPTION_FONT_SIZE = 12;
-var styles4 = StyleSheet.create({
+var styles5 = StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -424,13 +587,13 @@ var FormSwitch = ({
     View,
     {
       style: [
-        styles4.container,
+        styles5.container,
         containerStyle
       ],
       children: [
-        /* @__PURE__ */ jsxs(View, { style: styles4.textColumn, children: [
-          /* @__PURE__ */ jsx(Text, { style: [styles4.label, themeStyles.label], children: label }),
-          hasDescription ? /* @__PURE__ */ jsx(Text, { style: [styles4.description, themeStyles.description], children: description }) : null
+        /* @__PURE__ */ jsxs(View, { style: styles5.textColumn, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles5.label, themeStyles.label], children: label }),
+          hasDescription ? /* @__PURE__ */ jsx(Text, { style: [styles5.description, themeStyles.description], children: description }) : null
         ] }),
         /* @__PURE__ */ jsx(
           Switch,
@@ -450,12 +613,12 @@ var FormSwitch = ({
   );
 };
 var ACTIVATION_KEYS = ["Enter", " ", "Spacebar"];
-var HINT_FONT_SIZE = 12;
+var HINT_FONT_SIZE2 = 12;
 var BOX_SIZE = 20;
 var BOX_RADIUS = 5;
 var CHECK_FONT_SIZE = 14;
 var DISABLED_OPACITY = 0.5;
-var styles5 = StyleSheet.create({
+var styles6 = StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -484,7 +647,7 @@ var styles5 = StyleSheet.create({
     fontWeight: "600"
   },
   hint: {
-    fontSize: HINT_FONT_SIZE,
+    fontSize: HINT_FONT_SIZE2,
     marginTop: 2
   }
 });
@@ -537,20 +700,419 @@ var FormCheckbox = ({
       disabled,
       onPress: toggle,
       role: "checkbox",
-      style: [styles5.container, containerStyle, disabled ? { opacity: DISABLED_OPACITY } : null],
+      style: [styles6.container, containerStyle, disabled ? { opacity: DISABLED_OPACITY } : null],
       testID,
       ...keyboardProps,
       children: [
-        /* @__PURE__ */ jsx(View, { style: [styles5.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsx(Text, { style: [styles5.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null }),
-        /* @__PURE__ */ jsxs(View, { style: styles5.textColumn, children: [
-          /* @__PURE__ */ jsx(Text, { style: [styles5.label, themeStyles.label], children: label }),
-          hasHint ? /* @__PURE__ */ jsx(Text, { style: [styles5.hint, themeStyles.hint], children: hintText }) : null
+        /* @__PURE__ */ jsx(View, { style: [styles6.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsx(Text, { style: [styles6.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null }),
+        /* @__PURE__ */ jsxs(View, { style: styles6.textColumn, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles6.label, themeStyles.label], children: label }),
+          hasHint ? /* @__PURE__ */ jsx(Text, { style: [styles6.hint, themeStyles.hint], children: hintText }) : null
         ] })
       ]
     }
   );
 };
+var FIELD_GAP = 4;
+var LABEL_FONT = 11;
+var LABEL_LETTER_SPACING = 0.4;
+var INPUT_RADIUS = 8;
+var INPUT_PAD_H = 12;
+var INPUT_PAD_V = 10;
+var INPUT_FONT = 14;
+var INPUT_BORDER = 1;
+var DATE_ROW_GAP = 8;
+var CHEVRON_FONT = 10;
+var MENU_TOP_GAP = 4;
+var MENU_RADIUS = 8;
+var MENU_PAD_V = 4;
+var MENU_OPT_PAD_H = 12;
+var MENU_OPT_PAD_V = 8;
+var MENU_MIN_WIDTH = 160;
+var MENU_MAX_HEIGHT = 260;
+var MENU_Z = 1e3;
+var MENU_ELEVATION = 8;
+var MENU_BOX_SHADOW = "0px 2px 8px rgba(0, 0, 0, 0.15)";
+var OPTION_FONT = 14;
+var ERROR_FONT = 12;
+var ERROR_GAP = 3;
+var controlStyles = StyleSheet.create({
+  /** The shared bordered box every dense text control renders in. */
+  input: {
+    borderWidth: INPUT_BORDER,
+    borderRadius: INPUT_RADIUS,
+    paddingHorizontal: INPUT_PAD_H,
+    paddingVertical: INPUT_PAD_V,
+    fontSize: INPUT_FONT
+  },
+  /** The select trigger: a bordered field box matching the text inputs + a chevron. */
+  selectTrigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: DATE_ROW_GAP,
+    borderWidth: INPUT_BORDER,
+    borderRadius: INPUT_RADIUS,
+    paddingHorizontal: INPUT_PAD_H,
+    paddingVertical: INPUT_PAD_V
+  },
+  selectTriggerText: { fontSize: INPUT_FONT, flexShrink: 1 },
+  chevron: { fontSize: CHEVRON_FONT },
+  dateRow: { flexDirection: "row", gap: DATE_ROW_GAP },
+  dateCol: { gap: FIELD_GAP, flex: 1 },
+  /**
+   * The micro-caption above a sub-control (a date range's From/To) and beside a switch. Note it
+   * is deliberately NOT the `control` label voice: it carries no `700`/uppercase, because it
+   * names a HALF of a control that already has a `control`-voice label above it. Uppercasing it
+   * too would make one field shout twice.
+   */
+  subLabel: { fontSize: LABEL_FONT, letterSpacing: LABEL_LETTER_SPACING },
+  /** Positioning context for a floating `AnchoredMenu` (`position:absolute; top:100%`). */
+  anchor: { position: "relative" },
+  menu: {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    marginTop: MENU_TOP_GAP,
+    minWidth: MENU_MIN_WIDTH,
+    maxHeight: MENU_MAX_HEIGHT,
+    borderWidth: INPUT_BORDER,
+    borderRadius: MENU_RADIUS,
+    paddingVertical: MENU_PAD_V,
+    zIndex: MENU_Z,
+    boxShadow: MENU_BOX_SHADOW,
+    elevation: MENU_ELEVATION,
+    overflow: "hidden"
+  },
+  option: { paddingHorizontal: MENU_OPT_PAD_H, paddingVertical: MENU_OPT_PAD_V },
+  optionText: { fontSize: OPTION_FONT },
+  error: { fontSize: ERROR_FONT, marginTop: ERROR_GAP }
+});
+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,
+  testID,
+  anchorRef
+}) {
+  const menuRef = React.useRef(null);
+  useDismiss(anchorRef, menuRef, onDismiss);
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      ref: menuRef,
+      accessibilityRole: "menu",
+      style: [controlStyles.menu, { borderColor: colors.border, backgroundColor: colors.surface }],
+      testID: `${testID}-menu`,
+      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
+        );
+      })
+    }
+  );
+}
+var CHEVRON_DOWN = "\u25BE";
+var CHEVRON_UP = "\u25B4";
+function SelectControl({
+  options,
+  value,
+  onChange,
+  placeholder = "",
+  accessibilityLabel,
+  accessibilityHint,
+  optionHint = "",
+  style,
+  testID
+}) {
+  const { theme } = useUi();
+  const { colors, palette } = theme;
+  const anchorRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const selectedLabel = useMemo(() => {
+    const found = options.find((o) => o.value === value);
+    return found?.label ?? placeholder;
+  }, [options, placeholder, value]);
+  const close = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const toggle = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+  const select = useCallback(
+    (next) => {
+      onChange(next);
+      setIsOpen(false);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxs(View, { ref: anchorRef, style: [controlStyles.anchor, style], children: [
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel,
+        accessibilityHint,
+        accessibilityState: { expanded: isOpen },
+        "aria-expanded": isOpen,
+        onPress: toggle,
+        style: [controlStyles.selectTrigger, { borderColor: colors.border, backgroundColor: colors.surface }],
+        testID: `${testID}-trigger`,
+        children: [
+          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [controlStyles.selectTriggerText, { color: value === "" ? colors.textSecondary : colors.text }], children: selectedLabel }),
+          /* @__PURE__ */ jsx(Text, { "aria-hidden": true, style: [controlStyles.chevron, { color: colors.textSecondary }], children: isOpen ? CHEVRON_UP : CHEVRON_DOWN })
+        ]
+      }
+    ),
+    isOpen ? /* @__PURE__ */ jsx(
+      AnchoredMenu,
+      {
+        options,
+        selectedValue: value,
+        onSelect: select,
+        onDismiss: close,
+        colors: { text: colors.text, border: colors.border, surface: colors.surface, brand: palette.primary["500"] },
+        optionHint,
+        testID,
+        anchorRef
+      }
+    ) : null
+  ] });
+}
+
+// src/controls/suggestOptions.ts
+var RANK_VALUE_EXACT = 0;
+var RANK_VALUE_PREFIX = 1;
+var RANK_LABEL_PREFIX = 2;
+var RANK_LABEL_CONTAINS = 3;
+var NO_MATCH = -1;
+function rankOf(option, needle) {
+  const value = option.value.toLowerCase();
+  const label = option.label.toLowerCase();
+  if (value === needle) return RANK_VALUE_EXACT;
+  if (value.startsWith(needle)) return RANK_VALUE_PREFIX;
+  if (label.startsWith(needle)) return RANK_LABEL_PREFIX;
+  if (label.includes(needle)) return RANK_LABEL_CONTAINS;
+  return NO_MATCH;
+}
+function suggestOptions(options, query, minChars, limit) {
+  const needle = query.trim().toLowerCase();
+  if (needle.length < minChars) return [];
+  const scored = [];
+  for (const option of options) {
+    const rank = rankOf(option, needle);
+    if (rank !== NO_MATCH) scored.push({ option, rank });
+  }
+  scored.sort((a, b) => a.rank !== b.rank ? a.rank - b.rank : a.option.label.localeCompare(b.option.label));
+  return scored.slice(0, limit).map((entry) => entry.option);
+}
+function isUnmatched(options, text) {
+  const needle = text.trim().toLowerCase();
+  if (needle === "") return false;
+  return !options.some((o) => o.value.toLowerCase() === needle || o.label.toLowerCase() === needle);
+}
+var CLOSE_DELAY_MS = 140;
+var DEFAULT_TYPEAHEAD_MIN_CHARS = 1;
+var DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS = 8;
+function TypeaheadControl({
+  options,
+  value,
+  onChange,
+  onSubmit,
+  placeholder,
+  accessibilityLabel,
+  accessibilityHint,
+  optionHint = "",
+  error,
+  minChars = DEFAULT_TYPEAHEAD_MIN_CHARS,
+  maxSuggestions = DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS,
+  style,
+  testID
+}) {
+  const { theme } = useUi();
+  const { colors, palette, semantic } = theme;
+  const anchorRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const exactPick = useMemo(() => options.some((o) => o.label === value), [options, value]);
+  const suggestions = useMemo(
+    () => exactPick ? [] : suggestOptions(options, value, minChars, maxSuggestions),
+    [exactPick, options, value, minChars, maxSuggestions]
+  );
+  const showMenu = isOpen && suggestions.length > 0;
+  const handleChange = useCallback(
+    (next) => {
+      onChange(next);
+      setIsOpen(true);
+    },
+    [onChange]
+  );
+  const pick = useCallback(
+    (optionValue) => {
+      const opt = options.find((o) => o.value === optionValue);
+      onChange(opt?.label ?? optionValue);
+      setIsOpen(false);
+    },
+    [options, onChange]
+  );
+  const handleBlur = useCallback(() => {
+    setTimeout(() => setIsOpen(false), CLOSE_DELAY_MS);
+  }, []);
+  const handleSubmit = useCallback(() => {
+    setIsOpen(false);
+    onSubmit?.();
+  }, [onSubmit]);
+  const hasError = error !== void 0 && error !== "";
+  return /* @__PURE__ */ jsxs(View, { ref: anchorRef, style: [controlStyles.anchor, style], children: [
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        accessibilityLabel,
+        accessibilityHint,
+        autoCapitalize: "none",
+        autoCorrect: false,
+        placeholder,
+        placeholderTextColor: colors.textSecondary,
+        spellCheck: false,
+        value,
+        onChangeText: handleChange,
+        onFocus: () => setIsOpen(true),
+        onBlur: handleBlur,
+        onSubmitEditing: handleSubmit,
+        style: [controlStyles.input, { borderColor: hasError ? semantic.error["500"] : colors.border, backgroundColor: colors.surface, color: colors.text }],
+        testID: `${testID}-input`
+      }
+    ),
+    showMenu ? /* @__PURE__ */ jsx(
+      AnchoredMenu,
+      {
+        options: suggestions,
+        selectedValue: value,
+        onSelect: pick,
+        onDismiss: () => setIsOpen(false),
+        colors: { text: colors.text, border: colors.border, surface: colors.surface, brand: palette.primary["500"] },
+        optionHint,
+        testID,
+        anchorRef
+      }
+    ) : null,
+    hasError ? /* @__PURE__ */ jsx(Text, { role: "alert", style: [controlStyles.error, { color: semantic.error["500"] }], testID: `${testID}-error`, children: error }) : null
+  ] });
+}
+var WEB_DATE_PROPS = typeof document !== "undefined" ? { type: "date" } : {};
+function DateInput(p) {
+  return /* @__PURE__ */ jsxs(View, { style: controlStyles.dateCol, children: [
+    /* @__PURE__ */ jsx(Text, { style: [controlStyles.subLabel, { color: p.muted }], children: p.label }),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        accessibilityLabel: p.label,
+        accessibilityHint: p.hint,
+        placeholder: p.placeholder,
+        placeholderTextColor: p.muted,
+        value: p.value,
+        onChangeText: p.onChangeText,
+        onSubmitEditing: p.onSubmit,
+        style: [controlStyles.input, { borderColor: p.border, backgroundColor: p.surface, color: p.color }],
+        testID: `${p.testID}-${p.side}`,
+        ...WEB_DATE_PROPS
+      }
+    )
+  ] });
+}
+function DateRangeControl({
+  value,
+  onChange,
+  onSubmit,
+  fromLabel,
+  toLabel,
+  fromPlaceholder,
+  toPlaceholder,
+  accessibilityHint,
+  style,
+  testID
+}) {
+  const { theme } = useUi();
+  const { colors } = theme;
+  return /* @__PURE__ */ jsxs(View, { style: [controlStyles.dateRow, style], testID: `${testID}-range`, children: [
+    /* @__PURE__ */ jsx(
+      DateInput,
+      {
+        side: "from",
+        label: fromLabel,
+        placeholder: fromPlaceholder,
+        value: value.from,
+        color: colors.text,
+        border: colors.border,
+        surface: colors.surface,
+        muted: colors.textSecondary,
+        hint: accessibilityHint,
+        testID,
+        onChangeText: (from) => onChange({ from, to: value.to }),
+        onSubmit
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DateInput,
+      {
+        side: "to",
+        label: toLabel,
+        placeholder: toPlaceholder,
+        value: value.to,
+        color: colors.text,
+        border: colors.border,
+        surface: colors.surface,
+        muted: colors.textSecondary,
+        hint: accessibilityHint,
+        testID,
+        onChangeText: (to) => onChange({ from: value.from, to }),
+        onSubmit
+      }
+    )
+  ] });
+}
 
-export { ChipSelector, Field, FormCheckbox, FormField, FormSwitch, ThemedTextInput, useThemedInput };
+export { AnchoredMenu, ChipSelector, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, Field, FormActions, FormCheckbox, FormField, FormSwitch, SelectControl, ThemedTextInput, TypeaheadControl, controlStyles, isUnmatched, suggestOptions, useThemedInput };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map