@multiplatform.one/forms 7.58.0 → 7.60.0

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

@@ -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,