@dloizides/ui-forms 1.7.0 → 1.9.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-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';
@@ -36,6 +36,40 @@ function resolveFieldMarker(required, optional) {
   if (optional) return "optional";
   return "none";
 }
+var FIELD_STACK_MARGIN_BOTTOM = 16;
+var FIELD_STACK_LABEL_MARGIN_BOTTOM = 4;
+var FIELD_STACK_CHILD_MARGIN_TOP = 4;
+var FIELD_CONTRACT_GAP = 6;
+var fieldSpacingStyles = StyleSheet.create({
+  stackContainer: { marginBottom: FIELD_STACK_MARGIN_BOTTOM },
+  stackLabel: { marginBottom: FIELD_STACK_LABEL_MARGIN_BOTTOM },
+  stackChild: { marginTop: FIELD_STACK_CHILD_MARGIN_TOP },
+  /**
+   * The gap model sets NO margins — not even zeroed ones. An explicit `marginBottom: 0` here would
+   * defeat a caller who legitimately wants to push one field down via `containerStyle`, because
+   * `containerStyle` composes AFTER this and a zero is indistinguishable from "unset" to a reader.
+   */
+  gapContainer: { gap: FIELD_CONTRACT_GAP },
+  none: {}
+});
+function resolveFieldSpacing(explicit, insideGrid) {
+  if (explicit !== void 0) return explicit;
+  return insideGrid ? "gap" : "stack";
+}
+function fieldSpacingStyleSet(spacing) {
+  if (spacing === "gap") {
+    return {
+      container: fieldSpacingStyles.gapContainer,
+      label: fieldSpacingStyles.none,
+      child: fieldSpacingStyles.none
+    };
+  }
+  return {
+    container: fieldSpacingStyles.stackContainer,
+    label: fieldSpacingStyles.stackLabel,
+    child: fieldSpacingStyles.stackChild
+  };
+}
 var FIELD_FONT_SIZE = 13;
 var FIELD_FONT_WEIGHT = "600";
 var CONTROL_FONT_SIZE = 11;
@@ -56,27 +90,25 @@ var labelVariantStyles = StyleSheet.create({
 function resolveLabelVariantStyle(variant) {
   return variant === "control" ? labelVariantStyles.control : labelVariantStyles.field;
 }
-var CONTAINER_MARGIN_BOTTOM = 16;
-var LABEL_MARGIN_BOTTOM = 4;
+var FormGridContext = React.createContext(null);
+var GapOwnedContext = React.createContext(false);
+var FormGridProvider = FormGridContext.Provider;
+var GapOwnedProvider = GapOwnedContext.Provider;
+function useFormGridMetrics() {
+  return React.useContext(FormGridContext);
+}
+function useIsGapOwned() {
+  return React.useContext(GapOwnedContext);
+}
 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
-  },
   hintText: {
-    fontSize: HINT_FONT_SIZE,
-    marginTop: HINT_MARGIN_TOP
+    fontSize: HINT_FONT_SIZE
   },
   errorText: {
-    fontSize: ERROR_FONT_SIZE,
-    marginTop: ERROR_MARGIN_TOP
+    fontSize: ERROR_FONT_SIZE
   },
   optionalMark: {
     fontWeight: OPTIONAL_MARK_FONT_WEIGHT
@@ -112,9 +144,12 @@ var Field = ({
   labelVariant,
   labelStyle,
   containerStyle,
+  spacing,
   testID
 }) => {
   const { theme } = useUi();
+  const gapOwned = useIsGapOwned();
+  const spacingStyles = fieldSpacingStyleSet(resolveFieldSpacing(spacing, gapOwned));
   const { colors, semantic } = theme;
   const errorColor = semantic.error["500"];
   const hasError = hasFieldError(error);
@@ -136,7 +171,7 @@ var Field = ({
   );
   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: [
+  return /* @__PURE__ */ jsxs(View, { style: [spacingStyles.container, containerStyle], testID, children: [
     hasLabel ? /* @__PURE__ */ jsx(
       FieldLabel,
       {
@@ -145,16 +180,107 @@ var Field = ({
         optionalLabel,
         optionalMarkStyle: [styles.optionalMark, themeStyles.optionalMark],
         requiredMarkStyle: themeStyles.requiredMark,
-        style: [styles.label, resolveLabelVariantStyle(labelVariant), themeStyles.label, labelStyle]
+        style: [spacingStyles.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
+    hasHint ? /* @__PURE__ */ jsx(Text, { nativeID: hintId, style: [styles.hintText, spacingStyles.child, themeStyles.hintText], children: hint }) : null,
+    hasError ? /* @__PURE__ */ jsx(Text, { nativeID: errorId, role: "alert", style: [styles.errorText, spacingStyles.child, themeStyles.errorText], children: error }) : null
   ] });
 };
-var ACTIONS_GAP = 12;
+var FORM_GRID_DEFAULT_GAP = 12;
+var FORM_GRID_DEFAULT_MIN_WIDTH = 220;
+var FORM_GRID_DEFAULT_BASIS = 260;
 var styles2 = StyleSheet.create({
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap"
+  }
+});
+var FormGrid = ({
+  children,
+  gap = FORM_GRID_DEFAULT_GAP,
+  minWidth = FORM_GRID_DEFAULT_MIN_WIDTH,
+  basis = FORM_GRID_DEFAULT_BASIS,
+  style,
+  testID
+}) => {
+  const metrics = React.useMemo(() => ({ minWidth, basis }), [minWidth, basis]);
+  return /* @__PURE__ */ jsx(FormGridProvider, { value: metrics, children: /* @__PURE__ */ jsx(GapOwnedProvider, { value: true, children: /* @__PURE__ */ jsx(View, { style: [styles2.grid, { gap }, style], testID, children }) }) });
+};
+var GROW = 1;
+var NO_GROW = 0;
+var FormCell = ({
+  children,
+  minWidth,
+  basis,
+  grow = true,
+  style,
+  testID
+}) => {
+  const metrics = useFormGridMetrics();
+  const resolvedMinWidth = minWidth ?? metrics?.minWidth ?? FORM_GRID_DEFAULT_MIN_WIDTH;
+  const resolvedBasis = basis ?? metrics?.basis ?? FORM_GRID_DEFAULT_BASIS;
+  const cellStyle = {
+    minWidth: resolvedMinWidth,
+    flexBasis: resolvedBasis,
+    flexGrow: grow ? GROW : NO_GROW
+  };
+  return /* @__PURE__ */ jsx(View, { style: [cellStyle, style], testID, children });
+};
+var SECTION_GAP = 10;
+var DESCRIPTION_FONT_SIZE = 12;
+var styles3 = StyleSheet.create({
+  section: {
+    gap: SECTION_GAP
+  },
+  description: {
+    fontSize: DESCRIPTION_FONT_SIZE
+  }
+});
+var sectionSeq = 0;
+function useSectionLegendId() {
+  const [id] = React.useState(() => {
+    sectionSeq += 1;
+    return `form-section-legend-${String(sectionSeq)}`;
+  });
+  return id;
+}
+var FormSection = ({
+  title,
+  description,
+  children,
+  labelVariant,
+  titleStyle,
+  style,
+  testID
+}) => {
+  const { theme } = useUi();
+  const { colors } = theme;
+  const legendId = useSectionLegendId();
+  const hasTitle = typeof title === "string" && title !== "";
+  const hasDescription = typeof description === "string" && description !== "";
+  const a11y = { "aria-labelledby": hasTitle ? legendId : void 0 };
+  return (
+    // The section spaces its children with `gap`, so it owns their vertical rhythm exactly as a
+    // `FormGrid` owns a row's — without this a `Field` placed directly in a section would stack its
+    // 16px margin on the section's gap and recreate the F3 bug one level up.
+    /* @__PURE__ */ jsx(GapOwnedProvider, { value: true, children: /* @__PURE__ */ jsxs(View, { role: "group", style: [styles3.section, style], testID, ...a11y, children: [
+      hasTitle ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          nativeID: legendId,
+          style: [resolveLabelVariantStyle(labelVariant), { color: colors.text }, titleStyle],
+          children: title
+        }
+      ) : null,
+      hasDescription ? /* @__PURE__ */ jsx(Text, { style: [styles3.description, { color: colors.textSecondary }], children: description }) : null,
+      children
+    ] }) })
+  );
+};
+var ACTIONS_GAP = 12;
+var styles4 = StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "flex-end",
@@ -174,7 +300,7 @@ var FormActions = ({
   saveTestID = "save-button",
   cancelTestID = "cancel-button",
   testID
-}) => /* @__PURE__ */ jsxs(View, { style: [styles2.container, containerStyle], testID, children: [
+}) => /* @__PURE__ */ jsxs(View, { style: [styles4.container, containerStyle], testID, children: [
   typeof onCancel === "function" ? /* @__PURE__ */ jsx(
     Button,
     {
@@ -327,7 +453,7 @@ var INPUT_PADDING_V = 10;
 var INPUT_PADDING_H = 12;
 var INPUT_BORDER_RADIUS = 8;
 var INPUT_BORDER_WIDTH = 1;
-var styles3 = StyleSheet.create({
+var styles5 = StyleSheet.create({
   input: {
     paddingVertical: INPUT_PADDING_V,
     paddingHorizontal: INPUT_PADDING_H,
@@ -349,7 +475,7 @@ var FormField = ({
     describedById,
     hasError,
     requiredField: required,
-    style: styles3.input,
+    style: styles5.input,
     testID: "form-field-input",
     ...textInputProps
   }
@@ -387,18 +513,22 @@ function withAlpha2(hex, alpha) {
   const isValid = !Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b);
   return isValid ? `rgba(${r}, ${g}, ${b}, ${alpha})` : hex;
 }
-var styles4 = StyleSheet.create({
+var styles6 = StyleSheet.create({
   chipContainer: {
     flexDirection: "row",
     flexWrap: "wrap",
-    // Each chip's bottom gutter also hangs off the LAST row, stacking on `Field`'s container
-    // margin (8 + 16 = 24) and dropping the block below the `FormField` beside it. Cancelling it
-    // is standard gutter compensation: inner rows keep their 8px, the block ends at Field's 16.
-    marginBottom: -CHIP_GUTTER
-  },
-  chipWrapper: {
-    marginRight: CHIP_GUTTER,
-    marginBottom: CHIP_GUTTER
+    // `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
   },
   chip: {
     paddingHorizontal: 12,
@@ -450,12 +580,11 @@ function OutlineChip({
       "aria-pressed": ariaPressed,
       disabled,
       hitSlop: CHIP_HIT_SLOP,
-      style: styles4.chipWrapper,
       testID,
       onHoverIn: () => setHovered(true),
       onHoverOut: () => setHovered(false),
       onPress,
-      children: /* @__PURE__ */ jsx(View, { style: [styles4.chipOutline, { borderColor, backgroundColor }], children: /* @__PURE__ */ jsx(Text, { style: [styles4.chipText, styles4.chipTextOutline, { color: textColor }], children: option.label }) })
+      children: /* @__PURE__ */ jsx(View, { style: [styles6.chipOutline, { borderColor, backgroundColor }], children: /* @__PURE__ */ jsx(Text, { style: [styles6.chipText, styles6.chipTextOutline, { color: textColor }], children: option.label }) })
     }
   );
 }
@@ -481,10 +610,9 @@ function SolidChip({
       "aria-pressed": ariaPressed,
       disabled,
       hitSlop: CHIP_HIT_SLOP,
-      style: styles4.chipWrapper,
       testID,
       onPress,
-      children: /* @__PURE__ */ jsx(View, { style: [styles4.chip, { borderColor: colors.border, backgroundColor }], children: /* @__PURE__ */ jsx(Text, { style: [styles4.chipText, { color: textColor }], children: option.label }) })
+      children: /* @__PURE__ */ jsx(View, { style: [styles6.chip, { borderColor: colors.border, backgroundColor }], children: /* @__PURE__ */ jsx(Text, { style: [styles6.chipText, { color: textColor }], children: option.label }) })
     }
   );
 }
@@ -502,6 +630,7 @@ var ChipSelector = ({
   disabled = false,
   variant = "solid",
   containerStyle,
+  spacing,
   required = false,
   error,
   testID,
@@ -544,10 +673,21 @@ var ChipSelector = ({
     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: styles4.chipContainer, ...groupA11yProps(describedById, hasError), children: options.map(renderChip) }) });
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      containerStyle,
+      error,
+      label,
+      required,
+      spacing,
+      testID,
+      children: ({ describedById, hasError }) => /* @__PURE__ */ jsx(View, { style: styles6.chipContainer, ...groupA11yProps(describedById, hasError), children: options.map(renderChip) })
+    }
+  );
 };
-var DESCRIPTION_FONT_SIZE = 12;
-var styles5 = StyleSheet.create({
+var DESCRIPTION_FONT_SIZE2 = 12;
+var styles7 = StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -561,7 +701,7 @@ var styles5 = StyleSheet.create({
     fontWeight: "600"
   },
   description: {
-    fontSize: DESCRIPTION_FONT_SIZE,
+    fontSize: DESCRIPTION_FONT_SIZE2,
     marginTop: 2
   }
 });
@@ -587,13 +727,13 @@ var FormSwitch = ({
     View,
     {
       style: [
-        styles5.container,
+        styles7.container,
         containerStyle
       ],
       children: [
-        /* @__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__ */ jsxs(View, { style: styles7.textColumn, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles7.label, themeStyles.label], children: label }),
+          hasDescription ? /* @__PURE__ */ jsx(Text, { style: [styles7.description, themeStyles.description], children: description }) : null
         ] }),
         /* @__PURE__ */ jsx(
           Switch,
@@ -618,7 +758,7 @@ var BOX_SIZE = 20;
 var BOX_RADIUS = 5;
 var CHECK_FONT_SIZE = 14;
 var DISABLED_OPACITY = 0.5;
-var styles6 = StyleSheet.create({
+var styles8 = StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -700,20 +840,419 @@ var FormCheckbox = ({
       disabled,
       onPress: toggle,
       role: "checkbox",
-      style: [styles6.container, containerStyle, disabled ? { opacity: DISABLED_OPACITY } : null],
+      style: [styles8.container, containerStyle, disabled ? { opacity: DISABLED_OPACITY } : null],
       testID,
       ...keyboardProps,
       children: [
-        /* @__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
+        /* @__PURE__ */ jsx(View, { style: [styles8.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsx(Text, { style: [styles8.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null }),
+        /* @__PURE__ */ jsxs(View, { style: styles8.textColumn, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles8.label, themeStyles.label], children: label }),
+          hasHint ? /* @__PURE__ */ jsx(Text, { style: [styles8.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, DEFAULT_OPTIONAL_LABEL, Field, FormActions, FormCheckbox, FormField, FormSwitch, ThemedTextInput, useThemedInput };
+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 };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map