@multiplatform.one/forms 7.58.0 → 7.59.0

package/dist/cjs/fields/Select/InlineChoices.cjs

@@ -0,0 +1,148 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var InlineChoices_exports = {};
+__export(InlineChoices_exports, {
+  InlineChoices: () => InlineChoices
+});
+module.exports = __toCommonJS(InlineChoices_exports);
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_native = require("react-native-web");
+var import_tamagui = require("tamagui");
+var import_fieldLayout = require("../../fieldLayout.cjs");
+var import_colorRamps = require("../../shared/colorRamps.cjs");
+var import_nativeA11y = require("../../shared/nativeA11y.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const nextKeys = /* @__PURE__ */new Set(["ArrowDown", "ArrowRight"]);
+const previousKeys = /* @__PURE__ */new Set(["ArrowUp", "ArrowLeft"]);
+function InlineChoices({
+  options,
+  value,
+  onValueChange,
+  onBlur,
+  disabled,
+  id,
+  labelledBy,
+  "aria-label": ariaLabel,
+  knobProps,
+  markColor
+}) {
+  const describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
+  const rowsRef = (0, import_react2.useRef)([]);
+  const textColor = knobProps.textAccentColor;
+  const selectedIndex = options.findIndex(option => option.value === value);
+  const tabStop = selectedIndex >= 0 ? selectedIndex : 0;
+  const choose = index => {
+    const option = options[index];
+    if (disabled || !option || option.value === value) return;
+    onValueChange(option.value);
+  };
+  const onKeyDown = index => event => {
+    const step = nextKeys.has(event.key) ? 1 : previousKeys.has(event.key) ? -1 : 0;
+    if (step) {
+      event.preventDefault();
+      const next = (index + step + options.length) % options.length;
+      rowsRef.current[next]?.focus();
+      choose(next);
+    } else if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      choose(index);
+    }
+  };
+  const rowContent = (option, index, selected) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    alignItems: "center",
+    height: knobProps.menuRow.minHeight,
+    paddingHorizontal: knobProps.panelPadding.padding,
+    ...knobProps.gap,
+    ...(index === 0 ? void 0 : import_theme.hairline.top),
+    borderColor: import_colorRamps.formCommonColors.divider,
+    pointerEvents: "none",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      flexShrink: 0,
+      alignItems: "center",
+      justifyContent: "center",
+      minWidth: 18,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.IconSlot, {
+        icon: option.icon,
+        color: textColor
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontFamily: knobProps.body.fontFamily,
+      fontWeight: knobProps.body.fontWeight,
+      color: textColor,
+      numberOfLines: 1,
+      flex: 1,
+      children: option.label
+    }), selected ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CheckIcon, {
+      size: 14,
+      weight: "bold",
+      color: markColor
+    }) : null]
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    id,
+    role: "radiogroup",
+    "aria-labelledby": labelledBy,
+    "aria-label": labelledBy ? void 0 : ariaLabel,
+    "aria-describedby": describedBy,
+    "aria-disabled": disabled || void 0,
+    "data-testid": "select-inline-choices",
+    ...knobProps.borderRadius,
+    borderColor: import_colorRamps.formInputColors.border.base,
+    backgroundColor: import_colorRamps.formInputColors.background.base,
+    overflow: "hidden",
+    width: "100%",
+    children: options.map((option, index) => {
+      const selected = option.value === value;
+      if (import_tamagui.isWeb) {
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          ref: node => {
+            rowsRef.current[index] = node;
+          },
+          role: "radio",
+          "aria-checked": selected,
+          "aria-disabled": disabled || void 0,
+          tabIndex: !disabled && index === tabStop ? 0 : -1,
+          cursor: disabled ? "default" : "pointer",
+          onPress: () => choose(index),
+          onKeyDown: onKeyDown(index),
+          onBlur,
+          outlineWidth: 0,
+          focusVisibleStyle: import_theme.keyboardFocusRingProps,
+          children: rowContent(option, index, selected)
+        }, option.value);
+      }
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
+        ...(0, import_nativeA11y.choiceItemA11y)({
+          name: option.label,
+          selected,
+          disabled: !!disabled
+        }),
+        disabled,
+        onPress: () => choose(index),
+        children: rowContent(option, index, selected)
+      }, option.value);
+    })
+  });
+}

package/dist/cjs/fields/Select/InlineChoices.native.js

@@ -0,0 +1,163 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var InlineChoices_exports = {};
+__export(InlineChoices_exports, {
+  InlineChoices: () => InlineChoices
+});
+module.exports = __toCommonJS(InlineChoices_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_native = require("react-native");
+var import_tamagui = require("tamagui");
+var import_fieldLayout = require("../../fieldLayout.native.js");
+var import_colorRamps = require("../../shared/colorRamps.native.js");
+var import_nativeA11y = require("../../shared/nativeA11y.native.js");
+var nextKeys = /* @__PURE__ */new Set(["ArrowDown", "ArrowRight"]);
+var previousKeys = /* @__PURE__ */new Set(["ArrowUp", "ArrowLeft"]);
+function InlineChoices(param) {
+  var {
+    options,
+    value,
+    onValueChange,
+    onBlur,
+    disabled,
+    id,
+    labelledBy,
+    "aria-label": ariaLabel,
+    knobProps,
+    markColor
+  } = param;
+  var describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
+  var rowsRef = (0, import_react2.useRef)([]);
+  var textColor = knobProps.textAccentColor;
+  var selectedIndex = options.findIndex(function (option) {
+    return option.value === value;
+  });
+  var tabStop = selectedIndex >= 0 ? selectedIndex : 0;
+  var choose = function choose2(index) {
+    var option = options[index];
+    if (disabled || !option || option.value === value) return;
+    onValueChange(option.value);
+  };
+  var onKeyDown = function onKeyDown2(index) {
+    return function (event) {
+      var step = nextKeys.has(event.key) ? 1 : previousKeys.has(event.key) ? -1 : 0;
+      if (step) {
+        var _rowsRef_current_next;
+        event.preventDefault();
+        var next = (index + step + options.length) % options.length;
+        (_rowsRef_current_next = rowsRef.current[next]) === null || _rowsRef_current_next === void 0 ? void 0 : _rowsRef_current_next.focus();
+        choose(next);
+      } else if (event.key === " " || event.key === "Enter") {
+        event.preventDefault();
+        choose(index);
+      }
+    };
+  };
+  var rowContent = function rowContent2(option, index, selected) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      alignItems: "center",
+      height: knobProps.menuRow.minHeight,
+      paddingHorizontal: knobProps.panelPadding.padding,
+      ...knobProps.gap,
+      ...(index === 0 ? void 0 : import_theme.hairline.top),
+      borderColor: import_colorRamps.formCommonColors.divider,
+      pointerEvents: "none",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        flexShrink: 0,
+        alignItems: "center",
+        justifyContent: "center",
+        minWidth: 18,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.IconSlot, {
+          icon: option.icon,
+          color: textColor
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontFamily: knobProps.body.fontFamily,
+        fontWeight: knobProps.body.fontWeight,
+        color: textColor,
+        numberOfLines: 1,
+        flex: 1,
+        children: option.label
+      }), selected ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CheckIcon, {
+        size: 14,
+        weight: "bold",
+        color: markColor
+      }) : null]
+    });
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    id,
+    role: "radiogroup",
+    "aria-labelledby": labelledBy,
+    "aria-label": labelledBy ? void 0 : ariaLabel,
+    "aria-describedby": describedBy,
+    "aria-disabled": disabled || void 0,
+    "data-testid": "select-inline-choices",
+    ...knobProps.borderRadius,
+    borderColor: import_colorRamps.formInputColors.border.base,
+    backgroundColor: import_colorRamps.formInputColors.background.base,
+    overflow: "hidden",
+    width: "100%",
+    children: options.map(function (option, index) {
+      var selected = option.value === value;
+      if (import_tamagui.isWeb) {
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          ref: function ref(node) {
+            rowsRef.current[index] = node;
+          },
+          role: "radio",
+          "aria-checked": selected,
+          "aria-disabled": disabled || void 0,
+          tabIndex: !disabled && index === tabStop ? 0 : -1,
+          cursor: disabled ? "default" : "pointer",
+          onPress: function onPress() {
+            return choose(index);
+          },
+          onKeyDown: onKeyDown(index),
+          onBlur,
+          outlineWidth: 0,
+          focusVisibleStyle: import_theme.keyboardFocusRingProps,
+          children: rowContent(option, index, selected)
+        }, option.value);
+      }
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
+        ...(0, import_nativeA11y.choiceItemA11y)({
+          name: option.label,
+          selected,
+          disabled: !!disabled
+        }),
+        disabled,
+        onPress: function onPress() {
+          return choose(index);
+        },
+        children: rowContent(option, index, selected)
+      }, option.value);
+    })
+  });
+}
+//# sourceMappingURL=InlineChoices.native.js.map

package/dist/cjs/fields/Select/InlineChoices.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","InlineChoices_exports","__export","InlineChoices","module","exports","import_jsx_runtime","require","import_theme","import_react","import_react2","import_react_native","import_tamagui","import_fieldLayout","import_colorRamps","import_nativeA11y","nextKeys","Set","previousKeys","param","options","onValueChange","onBlur","disabled","id","labelledBy","ariaLabel","knobProps","markColor","describedBy","useFieldDescribedBy","rowsRef","useRef","textColor","textAccentColor","selectedIndex","findIndex","option","tabStop","choose","choose2","index","onKeyDown","onKeyDown2","event","step","has","key","_rowsRef_current_next","preventDefault","next","length","current","focus","rowContent","rowContent2","selected","jsxs","XStack","alignItems","height","menuRow","minHeight","paddingHorizontal","panelPadding","padding","gap","hairline","top","borderColor","formCommonColors","divider","pointerEvents","children","jsx","View","flexShrink","justifyContent","minWidth","IconSlot","icon","color","Text","fontFamily","body","fontWeight","numberOfLines","flex","label","CheckIcon","size","weight","YStack","role","borderRadius","formInputColors","border","base","backgroundColor","background","overflow","width","map","isWeb","ref","node","tabIndex","cursor","onPress","outlineWidth","focusVisibleStyle","keyboardFocusRingProps","Pressable","choiceItemA11y","name"],"sources":["../../../../src/fields/Select/InlineChoices.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/fields/Select/index.cjs

@@ -62,6 +62,8 @@ var import_tableCellContext = require("../../shared/tableCellContext.cjs");
 var import_t = require("../../shared/t.cjs");
 var import_selectedOrder = require("../selectedOrder.cjs");
 var import_nativeSelect = require("../nativeSelect.cjs");
+var import_InlineChoices = require("./InlineChoices.cjs");
+var import_shouldInlineChoices = require("./shouldInlineChoices.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const actionSheetIOS = ReactNative.ActionSheetIOS;
 const selectOutlineRest = {
@@ -86,9 +88,10 @@ const SelectRow = (0, import_tamagui.styled)(import_tamagui.View, {
   // Do not put outlineWidth here — Tamagui maps these onto mouse :focus and
   // they beat instance ring props. Rows paint the ring via selectItemRingProps.
   variants: {
+    // LC-262: the accent check alone marks the chosen row, never a grey fill.
     selected: {
       true: {
-        backgroundColor: import_colorRamps.formInputColors.background.base,
+        backgroundColor: "transparent",
         borderRadius: 0
       },
       false: {
@@ -109,6 +112,21 @@ const SelectRow = (0, import_tamagui.styled)(import_tamagui.View, {
     }
   }
 });
+function OptionGlyph({
+  icon,
+  color
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: 18,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.IconSlot, {
+      icon,
+      color
+    })
+  });
+}
 function GroupHeader(props) {
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme2.Text, {
     paddingHorizontal: "$3",
@@ -306,7 +324,7 @@ const SelectItem = (0, import_react.memo)(function SelectItem2({
     role: "option",
     tabIndex: -1,
     selected: isSelected,
-    active: isActive,
+    active: Boolean(isActive) && ctx.kbNav,
     "aria-selected": isSelected,
     "data-state": isSelected ? "active" : "inactive",
     height: ctx.knobProps.menuRow.minHeight,
@@ -315,15 +333,18 @@ const SelectItem = (0, import_react.memo)(function SelectItem2({
     onMouseEnter: () => setActiveIndex(index),
     ...(suppressHover ? {
       hoverStyle: {
-        backgroundColor: isActive ? import_colorRamps.formInputColors.background.focus : isSelected ? import_colorRamps.formInputColors.background.base : "transparent"
+        backgroundColor: isActive ? import_colorRamps.formInputColors.background.focus : "transparent"
       }
     } : {
       hoverStyle: {
-        backgroundColor: isSelected ? import_colorRamps.formInputColors.background.base : import_colorRamps.formInputColors.background.focus
+        backgroundColor: import_colorRamps.formInputColors.background.focus
       }
     }),
     ...(0, import_theme2.transitionProps)(ctx.knobProps.motion.control),
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+    children: [option.icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(OptionGlyph, {
+      icon: option.icon,
+      color: ctx.textColor
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       fontFamily: ctx.knobProps.body.fontFamily,
       fontWeight: ctx.knobProps.body.fontWeight,
       color: ctx.textColor,
@@ -1109,16 +1130,19 @@ function NativeSelectCore({
         onPointerDown: import_tamagui.isWeb ? () => setKbNav(false) : void 0,
         ...(import_tamagui.isWeb ? selectItemRingProps(active, kbNav) : void 0),
         hoverStyle: activeIndex != null ? {
-          backgroundColor: active ? import_colorRamps.formInputColors.background.focus : selected ? import_colorRamps.formInputColors.background.base : "transparent"
+          backgroundColor: active ? import_colorRamps.formInputColors.background.focus : "transparent"
         } : {
-          backgroundColor: selected ? import_colorRamps.formInputColors.background.base : import_colorRamps.formInputColors.background.focus
+          backgroundColor: import_colorRamps.formInputColors.background.focus
         },
-        backgroundColor: active ? import_colorRamps.formInputColors.background.focus : selected ? import_colorRamps.formInputColors.background.base : "transparent",
+        backgroundColor: active && kbNav ? import_colorRamps.formInputColors.background.focus : "transparent",
         pressStyle: {
           backgroundColor: import_colorRamps.formInputColors.background.focus
         },
         pointerEvents: import_tamagui.isWeb ? void 0 : "none",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        children: [option.icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(OptionGlyph, {
+          icon: option.icon,
+          color: textColor
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
           fontFamily: knobProps.body.fontFamily,
           fontWeight: knobProps.body.fontWeight,
           color: textColor,
@@ -1362,18 +1386,27 @@ function Select({
   const [uncontrolledValue, setUncontrolledValue] = (0, import_react.useState)(defaultValue);
   const isControlled = value !== void 0;
   const hasLabel = Boolean(label);
-  (0, import_devWarn.warnSelectTooFewOptions)({
-    count: options?.length ?? 0,
-    multiple,
-    component: "Select",
-    id
-  });
   const viewportGtSm = (0, import_FloatingPanel.useViewportGtSm)();
   const insideOverlay = (0, import_overlayStack.useInsideOverlay)();
   const effectiveGtSm = typeof window !== "undefined" ? viewportGtSm : false;
   const hydrated = (0, import_react.useSyncExternalStore)(subscribeNothing, clientSnapshot, serverSnapshot);
   const compactMenu = hydrated && (0, import_compactFace.resolveCompactFace)((0, import_compactFace.pickerCompactFace)(options?.length ?? 0), insideOverlay) === "menu";
   const shouldUseSheet = !import_tamagui.isWeb || !effectiveGtSm && !compactMenu;
+  const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  const inline = !inTableCell && (0, import_shouldInlineChoices.shouldInlineChoices)({
+    insideOverlay,
+    multiple,
+    options
+  });
+  if (!inline) {
+    (0, import_devWarn.warnSelectTooFewOptions)({
+      count: options?.length ?? 0,
+      multiple,
+      component: "Select",
+      id
+    });
+  }
+  const markColor = useSelectedMarkColor();
   if (skeleton) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input, {
       size: sizeProp || knobProps.sizeToken,
@@ -1423,6 +1456,24 @@ function Select({
   };
   const renderSelectContent = (selectValue, handleValueChange, handleBlur) => {
     if (readOnly) return renderReadOnly(selectValue);
+    if (inline) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InlineChoices.InlineChoices, {
+        options,
+        value: typeof selectValue === "string" ? selectValue : void 0,
+        onValueChange: val => {
+          if (disabled) return;
+          handleValueChange?.(val);
+          emitValueChange(val);
+        },
+        onBlur: handleBlur,
+        disabled,
+        id,
+        labelledBy: hasLabel ? `${id}-label` : void 0,
+        "aria-label": ariaLabel,
+        knobProps,
+        markColor
+      });
+    }
     const SelectCore = shouldUseSheet ? NativeSelectCore : FloatingSelectCore;
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectCore, {
       options,

package/dist/cjs/fields/Select/index.native.js

@@ -47,16 +47,16 @@ var import_theme2 = require("@multiplatform.one/theme");
 var ReactNative = __toESM(require("react-native"));
 var import_react_native = require("react-native");
 var import_tamagui = require("tamagui");
-var import_Chip = require("../../Chip");
+var import_Chip = require("../../Chip/index.native.js");
 var import_pickerTriggerContract = require("../../shared/pickerTriggerContract.native.js");
-var import_Skeleton = require("../../Skeleton");
+var import_Skeleton = require("../../Skeleton/index.native.js");
 var import_fieldLayout = require("../../fieldLayout.native.js");
-var import_InputParts = require("../../InputParts");
+var import_InputParts = require("../../InputParts/index.native.js");
 var import_colorRamps = require("../../shared/colorRamps.native.js");
 var import_devWarn = require("../../shared/devWarn.native.js");
 var import_utils = require("../../shared/utils.native.js");
 var import_floatingList = require("../../shared/floatingList.native.js");
-var import_FloatingPanel = require("../../FloatingPanel");
+var import_FloatingPanel = require("../../FloatingPanel/index.native.js");
 var import_compactFace = require("../../FloatingPanel/compactFace.native.js");
 var import_PanelPortal = require("../../FloatingPanel/PanelPortal.native.js");
 var import_overlayStack = require("../../shared/overlayStack.native.js");
@@ -65,6 +65,8 @@ var import_tableCellContext = require("../../shared/tableCellContext.native.js")
 var import_t = require("../../shared/t.native.js");
 var import_selectedOrder = require("../selectedOrder.native.js");
 var import_nativeSelect = require("../nativeSelect.native.js");
+var import_InlineChoices = require("./InlineChoices.native.js");
+var import_shouldInlineChoices = require("./shouldInlineChoices.native.js");
 var actionSheetIOS = ReactNative.ActionSheetIOS;
 var selectOutlineRest = {
   outlineWidth: 0,
@@ -88,9 +90,10 @@ var SelectRow = (0, import_tamagui.styled)(import_tamagui.View, {
   // Do not put outlineWidth here — Tamagui maps these onto mouse :focus and
   // they beat instance ring props. Rows paint the ring via selectItemRingProps.
   variants: {
+    // LC-262: the accent check alone marks the chosen row, never a grey fill.
     selected: {
       true: {
-        backgroundColor: import_colorRamps.formInputColors.background.base,
+        backgroundColor: "transparent",
         borderRadius: 0
       },
       false: {
@@ -113,6 +116,22 @@ var SelectRow = (0, import_tamagui.styled)(import_tamagui.View, {
     }
   }
 });
+function OptionGlyph(param) {
+  var {
+    icon,
+    color
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: 18,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.IconSlot, {
+      icon,
+      color
+    })
+  });
+}
 function GroupHeader(props) {
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme2.Text, {
     paddingHorizontal: "$3",
@@ -404,7 +423,9 @@ var SelectItem = /* @__PURE__ */(0, import_react.memo)(function SelectItem2(para
     role: "option",
     tabIndex: -1,
     selected: isSelected,
-    active: isActive,
+    // The open-time cursor sits on the chosen row; it only paints while the
+    // keyboard drives it, so the chosen row never opens grey (LC-262).
+    active: Boolean(isActive) && ctx.kbNav,
     "aria-selected": isSelected,
     "data-state": isSelected ? "active" : "inactive",
     height: ctx.knobProps.menuRow.minHeight,
@@ -419,15 +440,18 @@ var SelectItem = /* @__PURE__ */(0, import_react.memo)(function SelectItem2(para
     },
     ...(suppressHover ? {
       hoverStyle: {
-        backgroundColor: isActive ? import_colorRamps.formInputColors.background.focus : isSelected ? import_colorRamps.formInputColors.background.base : "transparent"
+        backgroundColor: isActive ? import_colorRamps.formInputColors.background.focus : "transparent"
       }
     } : {
       hoverStyle: {
-        backgroundColor: isSelected ? import_colorRamps.formInputColors.background.base : import_colorRamps.formInputColors.background.focus
+        backgroundColor: import_colorRamps.formInputColors.background.focus
       }
     }),
     ...(0, import_theme2.transitionProps)(ctx.knobProps.motion.control),
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+    children: [option.icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(OptionGlyph, {
+      icon: option.icon,
+      color: ctx.textColor
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       fontFamily: ctx.knobProps.body.fontFamily,
       fontWeight: ctx.knobProps.body.fontWeight,
       color: ctx.textColor,
@@ -1361,17 +1385,21 @@ function NativeSelectCore(param) {
         } : void 0,
         ...(import_tamagui.isWeb ? selectItemRingProps(active, kbNav) : void 0),
         hoverStyle: activeIndex != null ? {
-          backgroundColor: active ? import_colorRamps.formInputColors.background.focus : selected ? import_colorRamps.formInputColors.background.base : "transparent"
+          backgroundColor: active ? import_colorRamps.formInputColors.background.focus : "transparent"
         } : {
-          backgroundColor: selected ? import_colorRamps.formInputColors.background.base : import_colorRamps.formInputColors.background.focus
+          backgroundColor: import_colorRamps.formInputColors.background.focus
         },
-        backgroundColor: active ? import_colorRamps.formInputColors.background.focus : selected ? import_colorRamps.formInputColors.background.base : "transparent",
+        // LC-262: the accent check alone marks the chosen row.
+        backgroundColor: active && kbNav ? import_colorRamps.formInputColors.background.focus : "transparent",
         pressStyle: {
           backgroundColor: import_colorRamps.formInputColors.background.focus
         },
         // Native: parent RNPressable owns the hit; disable child stealing.
         pointerEvents: import_tamagui.isWeb ? void 0 : "none",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        children: [option.icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(OptionGlyph, {
+          icon: option.icon,
+          color: textColor
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
           fontFamily: knobProps.body.fontFamily,
           fontWeight: knobProps.body.fontWeight,
           color: textColor,
@@ -1626,7 +1654,7 @@ function Select(param) {
     "aria-label": ariaLabel,
     ...rest
   } = param;
-  var _ref, _ref1;
+  var _ref;
   var emitValueChange = function emitValueChange2(val) {
     onChange === null || onChange === void 0 ? void 0 : onChange(val);
     onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(val);
@@ -1644,18 +1672,28 @@ function Select(param) {
   var [uncontrolledValue, setUncontrolledValue] = (0, import_react.useState)(defaultValue);
   var isControlled = value !== void 0;
   var hasLabel = Boolean(label);
-  (0, import_devWarn.warnSelectTooFewOptions)({
-    count: (_ref = options === null || options === void 0 ? void 0 : options.length) !== null && _ref !== void 0 ? _ref : 0,
-    multiple,
-    component: "Select",
-    id
-  });
   var viewportGtSm = (0, import_FloatingPanel.useViewportGtSm)();
   var insideOverlay = (0, import_overlayStack.useInsideOverlay)();
   var effectiveGtSm = typeof window !== "undefined" ? viewportGtSm : false;
   var hydrated = (0, import_react.useSyncExternalStore)(subscribeNothing, clientSnapshot, serverSnapshot);
-  var compactMenu = hydrated && (0, import_compactFace.resolveCompactFace)((0, import_compactFace.pickerCompactFace)((_ref1 = options === null || options === void 0 ? void 0 : options.length) !== null && _ref1 !== void 0 ? _ref1 : 0), insideOverlay) === "menu";
+  var compactMenu = hydrated && (0, import_compactFace.resolveCompactFace)((0, import_compactFace.pickerCompactFace)((_ref = options === null || options === void 0 ? void 0 : options.length) !== null && _ref !== void 0 ? _ref : 0), insideOverlay) === "menu";
   var shouldUseSheet = !import_tamagui.isWeb || !effectiveGtSm && !compactMenu;
+  var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  var inline = !inTableCell && (0, import_shouldInlineChoices.shouldInlineChoices)({
+    insideOverlay,
+    multiple,
+    options
+  });
+  if (!inline) {
+    var _ref1;
+    (0, import_devWarn.warnSelectTooFewOptions)({
+      count: (_ref1 = options === null || options === void 0 ? void 0 : options.length) !== null && _ref1 !== void 0 ? _ref1 : 0,
+      multiple,
+      component: "Select",
+      id
+    });
+  }
+  var markColor = useSelectedMarkColor();
   if (skeleton) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input, {
       size: sizeProp || knobProps.sizeToken,
@@ -1715,6 +1753,24 @@ function Select(param) {
   };
   var renderSelectContent = function renderSelectContent2(selectValue, handleValueChange, handleBlur) {
     if (readOnly) return renderReadOnly(selectValue);
+    if (inline) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InlineChoices.InlineChoices, {
+        options,
+        value: typeof selectValue === "string" ? selectValue : void 0,
+        onValueChange: function onValueChange2(val) {
+          if (disabled) return;
+          handleValueChange === null || handleValueChange === void 0 ? void 0 : handleValueChange(val);
+          emitValueChange(val);
+        },
+        onBlur: handleBlur,
+        disabled,
+        id,
+        labelledBy: hasLabel ? `${id}-label` : void 0,
+        "aria-label": ariaLabel,
+        knobProps,
+        markColor
+      });
+    }
     var SelectCore = shouldUseSheet ? NativeSelectCore : FloatingSelectCore;
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectCore, {
       options,