@multiplatform.one/forms 6.1.0 → 6.4.0

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

@@ -0,0 +1,177 @@
+"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 SearchInput_exports = {};
+__export(SearchInput_exports, {
+  SearchInput: () => SearchInput
+});
+module.exports = __toCommonJS(SearchInput_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("@phosphor-icons/react");
+var import_theme = require("@multiplatform.one/theme");
+var import_react2 = require("react");
+var import_tamagui = require("tamagui");
+var import_t = require("../../shared/t.native.js");
+var import_Input = require("../Input/index.native.js");
+var iconSizeForToken = {
+  $1: 12,
+  $2: 14,
+  $3: 16,
+  $4: 16,
+  $5: 18,
+  $6: 20
+};
+function SearchInput(param) {
+  var {
+    value,
+    defaultValue,
+    onChange,
+    onSearch,
+    onClear,
+    debounceMs = 300,
+    placeholder = (0, import_t.t)("Search..."),
+    clearable = true,
+    disabled,
+    size,
+    compact,
+    chromeless,
+    label,
+    "aria-label": ariaLabel,
+    iconSize,
+    inputProps
+  } = param;
+  var _ref;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    size,
+    compact
+  });
+  var isControlled = value !== void 0;
+  var [internalText, setInternalText] = (0, import_react2.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "");
+  var text = isControlled ? value : internalText;
+  var timerRef = (0, import_react2.useRef)(void 0);
+  var onSearchRef = (0, import_react2.useRef)(onSearch);
+  onSearchRef.current = onSearch;
+  (0, import_react2.useEffect)(function () {
+    return function () {
+      if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+    };
+  }, []);
+  var fireSearch = (0, import_react2.useCallback)(function (next) {
+    var _onSearchRef_current;
+    if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+    timerRef.current = void 0;
+    (_onSearchRef_current = onSearchRef.current) === null || _onSearchRef_current === void 0 ? void 0 : _onSearchRef_current.call(onSearchRef, next);
+  }, []);
+  var scheduleSearch = (0, import_react2.useCallback)(function (next) {
+    if (debounceMs <= 0) {
+      fireSearch(next);
+      return;
+    }
+    if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(function () {
+      return fireSearch(next);
+    }, debounceMs);
+  }, [debounceMs, fireSearch]);
+  var handleChangeText = (0, import_react2.useCallback)(function (next) {
+    if (!isControlled) setInternalText(next);
+    onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    scheduleSearch(next);
+  }, [isControlled, onChange, scheduleSearch]);
+  var onClearRef = (0, import_react2.useRef)(onClear);
+  onClearRef.current = onClear;
+  var handleClear = (0, import_react2.useCallback)(function () {
+    var _onClearRef_current;
+    if (!isControlled) setInternalText("");
+    onChange === null || onChange === void 0 ? void 0 : onChange("");
+    fireSearch("");
+    (_onClearRef_current = onClearRef.current) === null || _onClearRef_current === void 0 ? void 0 : _onClearRef_current.call(onClearRef);
+  }, [isControlled, onChange, fireSearch]);
+  var resolvedIconSize = (_ref = iconSize !== null && iconSize !== void 0 ? iconSize : iconSizeForToken[size !== null && size !== void 0 ? size : knobProps.sizeToken]) !== null && _ref !== void 0 ? _ref : 16;
+  var clearButton = clearable && !disabled && text ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    role: "button",
+    tabIndex: 0,
+    padding: "$1",
+    borderRadius: knobProps.borderRadius.borderRadius,
+    cursor: "pointer",
+    hoverStyle: {
+      backgroundColor: "$color4"
+    },
+    pressStyle: {
+      backgroundColor: "$color5"
+    },
+    focusVisibleStyle: {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: "$color8"
+    },
+    onPress: handleClear,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        e.stopPropagation();
+        handleClear();
+      }
+    },
+    "aria-label": (0, import_t.t)("Clear search"),
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
+      size: resolvedIconSize - 2
+    })
+  }) : void 0;
+  var areaProps = {
+    role: "searchbox",
+    "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Search",
+    enterKeyHint: "search",
+    value: text,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        handleClear();
+      } else if (e.key === "Enter") {
+        fireSearch(text);
+      }
+    },
+    onSubmitEditing: function onSubmitEditing() {
+      return fireSearch(text);
+    },
+    ...inputProps
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Input.Input, {
+    label,
+    size,
+    compact,
+    chromeless,
+    disabled,
+    onChangeText: handleChangeText,
+    placeholder,
+    leftIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MagnifyingGlassIcon, {
+      size: resolvedIconSize
+    }),
+    rightIcon: clearButton,
+    rightIconInteractive: true,
+    inputProps: areaProps
+  });
+}
+//# sourceMappingURL=index.native.js.map

package/dist/cjs/fields/SearchInput/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","SearchInput_exports","__export","SearchInput","module","exports","import_jsx_runtime","require","import_react","import_theme","import_react2","import_tamagui","import_t","import_Input","iconSizeForToken","$1","$2","$3","$4","$5","$6","param","defaultValue","onChange","onSearch","onClear","debounceMs","placeholder","t","clearable","disabled","size","compact","chromeless","label","ariaLabel","iconSize","inputProps","_ref","knobProps","useResolvedKnobs","isControlled","internalText","setInternalText","useState","text","timerRef","useRef","onSearchRef","current","useEffect","clearTimeout","fireSearch","useCallback","next","_onSearchRef_current","call","scheduleSearch","setTimeout","handleChangeText","onClearRef","handleClear","_onClearRef_current","resolvedIconSize","sizeToken","clearButton","jsx","View","role","tabIndex","padding","borderRadius","cursor","hoverStyle","backgroundColor","pressStyle","focusVisibleStyle","outlineWidth","outlineStyle","outlineColor","onPress","onKeyDown","e","key","preventDefault","stopPropagation","children","XIcon","areaProps","enterKeyHint","onSubmitEditing","Input","onChangeText","leftIcon","MagnifyingGlassIcon"],"sources":["../../../../src/fields/SearchInput/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

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

@@ -28,27 +28,28 @@ module.exports = __toCommonJS(Select_exports);
 var import_react = require("react");
 var import_react2 = require("@phosphor-icons/react");
 var import_react3 = require("@floating-ui/react");
+var import_theme = require("@multiplatform.one/theme");
+var import_react_native = require("react-native-web");
 var import_tamagui = require("tamagui");
 var import_Chip = require("../../Chip/index.cjs");
 var import_Skeleton = require("../../Skeleton/index.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_InputParts = require("../../InputParts/index.cjs");
 var import_colorRamps = require("../../shared/colorRamps.cjs");
+var import_devWarn = require("../../shared/devWarn.cjs");
 var import_utils = require("../../shared/utils.cjs");
 var import_floatingList = require("../../shared/floatingList.cjs");
 var import_FloatingPanel = require("../../FloatingPanel/index.cjs");
 var import_zIndex = require("../../shared/zIndex.cjs");
 var import_useDragScroll = require("../../shared/useDragScroll.cjs");
 var import_tableCellContext = require("../../shared/tableCellContext.cjs");
+var import_t = require("../../shared/t.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const SelectRow = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "SelectRow",
-  flexDirection: "row",
-  alignItems: "center",
+  ...import_theme.menuRowFrame,
   gap: "$2",
-  paddingHorizontal: "$3",
   cursor: "default",
-  outlineStyle: "none",
   hoverStyle: {
     backgroundColor: import_colorRamps.formInputColors.background.focus
   },
@@ -202,6 +203,8 @@ const SelectItem = (0, import_react.memo)(function SelectItem2({
     "aria-selected": isSelected,
     "data-state": isSelected ? "active" : "inactive",
     size: ctx.knobProps.sizeToken,
+    paddingHorizontal: ctx.knobProps.panelPadding.padding,
+    ...ctx.knobProps.gap,
     onMouseEnter: () => setActiveIndex(index),
     ...(suppressHover ? {
       hoverStyle: {
@@ -235,12 +238,15 @@ function FloatingSelectCore({
   placeholder,
   disabled,
   id,
+  "aria-label": ariaLabel,
+  hasLabel,
   knobProps,
   groupLabel,
   multiple,
   dismissible
 }) {
   const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  const describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   const [open, setOpen] = (0, import_react.useState)(false);
   const [activeIndex, setActiveIndex] = (0, import_react.useState)(null);
   const [controlledScrolling, setControlledScrolling] = (0, import_react.useState)(false);
@@ -602,6 +608,9 @@ function FloatingSelectCore({
   boxEventProps["aria-haspopup"] = "listbox";
   boxEventProps["aria-expanded"] = open;
   boxEventProps["aria-autocomplete"] = "none";
+  if (id) boxEventProps.id = id;
+  if (ariaLabel) boxEventProps["aria-label"] = ariaLabel;else if (hasLabel && id) boxEventProps["aria-labelledby"] = `${id}-label`;else if (placeholder) boxEventProps["aria-label"] = placeholder;
+  if (describedBy) boxEventProps["aria-describedby"] = describedBy;
   const handleScroll = (0, import_react.useCallback)(event => {
     const el = event.target;
     panel.updateArrows(el);
@@ -636,7 +645,11 @@ function FloatingSelectCore({
       cursor: "pointer",
       disabled,
       size: knobProps.sizeToken,
-      ...(inTableCell ? {} : {
+      ...(inTableCell ?
+      // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
+      {
+        minHeight: 44
+      } : {
         borderRadius: knobProps.borderRadius.borderRadius,
         borderWidth: knobProps.borderRadius.borderWidth
       }),
@@ -644,9 +657,8 @@ function FloatingSelectCore({
         open
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
         flex: 1,
-        paddingHorizontal: "$3",
+        paddingHorizontal: knobProps.panelPadding.padding,
         paddingVertical: "$2",
-        id,
         justifyContent: multiple && selectedValues.length > 0 ? "center" : "flex-start",
         alignItems: multiple && selectedValues.length > 0 ? "center" : "flex-start",
         children: multiple && selectedValues.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
@@ -676,7 +688,7 @@ function FloatingSelectCore({
           children: selectedOption?.label ?? placeholder
         })
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        paddingRight: "$2",
+        paddingInlineEnd: "$2",
         alignSelf: "center",
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
           size: 16
@@ -753,6 +765,7 @@ function FloatingSelectCore({
             arrowScrollDirRef: panel.arrowScrollDirRef
           }), groupLabel && /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupHeader, {
             color: textColor,
+            paddingHorizontal: knobProps.panelPadding.padding,
             children: groupLabel
           }), multiple ? sortedOptionsRef.current.map((option, i) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectItem, {
             option,
@@ -766,6 +779,7 @@ function FloatingSelectCore({
             optionCount: sortedOptionsRef.current.length
           }, option.value)) : groupedItems.map(item => item.type === "header" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupHeader, {
             color: textColor,
+            paddingHorizontal: knobProps.panelPadding.padding,
             children: item.label
           }, `header-${item.label}`) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectItem, {
             option: item.option,
@@ -796,11 +810,15 @@ function NativeSelectCore({
   placeholder,
   disabled,
   id,
+  "aria-label": ariaLabel,
+  hasLabel,
   knobProps,
   groupLabel,
   multiple,
   dismissible
 }) {
+  const describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
+  const fieldA11y = (0, import_fieldLayout.useFieldA11y)();
   const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   const [open, setOpen] = (0, import_react.useState)(false);
   const [activeIndex, setActiveIndex] = (0, import_react.useState)(0);
@@ -868,14 +886,23 @@ function NativeSelectCore({
       }
     }
   }, [options, activeIndex, handleSelect]);
-  const listContent = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+  const listContent =
+  // Native sheet path: do NOT set flex={1} — inside FloatingPanel's
+  // RNScrollView (flexGrow:0) flex:1 resolves to ~0 height and collapses
+  // every option row except a stray fragment of the selected one.
+  // tabIndex/onKeyDown are web-only: on iOS tabIndex makes the container an
+  // accessibility element, which merges every option into one unactionable
+  // VoiceOver blob.
+  /* @__PURE__ */
+  (0, import_jsx_runtime.jsxs)(import_tamagui.View, {
     ref: listRef,
-    tabIndex: 0,
-    onKeyDown: handleListKeyDown,
+    ...(import_tamagui.isWeb ? {
+      tabIndex: 0,
+      onKeyDown: handleListKeyDown
+    } : void 0),
     outlineStyle: "none",
-    flex: 1,
     children: [groupLabel && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      paddingHorizontal: "$3",
+      paddingHorizontal: knobProps.panelPadding.padding,
       paddingVertical: "$2",
       fontFamily: knobProps.body.fontFamily,
       fontWeight: "700",
@@ -886,13 +913,13 @@ function NativeSelectCore({
     }), options.map((option, i) => {
       const selected = isSelectedFn(option.value);
       const active = i === activeIndex;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+      const row = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
         flexDirection: "row",
         alignItems: "center",
-        gap: "$2",
-        paddingHorizontal: "$3",
+        ...knobProps.gap,
+        paddingHorizontal: knobProps.panelPadding.padding,
         height: knobProps.sizeToken,
-        onPress: () => handleSelect(option.value),
+        onPress: import_tamagui.isWeb ? () => handleSelect(option.value) : void 0,
         onMouseEnter: () => setActiveIndex(i),
         hoverStyle: activeIndex != null ? {
           backgroundColor: active ? import_colorRamps.formInputColors.background.focus : selected ? import_colorRamps.formInputColors.background.base : "transparent"
@@ -903,6 +930,7 @@ function NativeSelectCore({
         pressStyle: {
           backgroundColor: import_colorRamps.formInputColors.background.focus
         },
+        pointerEvents: import_tamagui.isWeb ? void 0 : "none",
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
           fontFamily: knobProps.body.fontFamily,
           fontWeight: knobProps.body.fontWeight,
@@ -913,9 +941,20 @@ function NativeSelectCore({
         }), selected && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CheckIcon, {
           size: 14
         })]
+      }, import_tamagui.isWeb ? option.value : void 0);
+      if (import_tamagui.isWeb) return row;
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
+        onPress: () => handleSelect(option.value),
+        accessibilityRole: "button",
+        accessibilityLabel: option.label,
+        accessibilityState: {
+          selected
+        },
+        children: row
       }, option.value);
     })]
   });
+  const triggerValueText = multiple ? selectedValues.length > 0 ? selectedValues.map(getLabel).join(", ") : placeholder : selectedOption?.label ?? placeholder;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
     open,
     onOpenChange: val => {
@@ -923,15 +962,39 @@ function NativeSelectCore({
       if (!val) onBlur?.();
     },
     sheet: true,
+    triggerA11y: {
+      label: ariaLabel ?? fieldA11y?.label,
+      value: triggerValueText,
+      hint: fieldA11y?.description
+    },
     trigger: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
       disabled,
       size: knobProps.sizeToken,
-      ...(inTableCell ? {} : {
+      ...(inTableCell ?
+      // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
+      {
+        minHeight: 44
+      } : {
         borderRadius: knobProps.borderRadius.borderRadius,
         borderWidth: knobProps.borderRadius.borderWidth
       }),
       "data-testid": "select-trigger",
-      tabIndex: disabled ? -1 : 0,
+      id,
+      ...(import_tamagui.isWeb ? {
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-autocomplete": "none",
+        // Standalone (no label): fall back to placeholder so the
+        // trigger still has a name (axe button-name)
+        "aria-label": ariaLabel ?? (!hasLabel ? placeholder : void 0),
+        "aria-labelledby": !ariaLabel && hasLabel && id ? `${id}-label` : void 0,
+        "aria-describedby": describedBy,
+        tabIndex: disabled ? -1 : 0
+      } : {
+        importantForAccessibility: "no"
+      }),
+      onPress: import_tamagui.isWeb && !disabled ? () => setOpen(prev => !prev) : void 0,
       onKeyDown: e => {
         if (["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(e.key) || e.code === "Space") {
           e.preventDefault();
@@ -940,9 +1003,8 @@ function NativeSelectCore({
       },
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
         flex: 1,
-        paddingHorizontal: "$3",
+        paddingHorizontal: knobProps.panelPadding.padding,
         paddingVertical: "$2",
-        id,
         justifyContent: multiple && selectedValues.length > 0 ? "center" : "flex-start",
         alignItems: multiple && selectedValues.length > 0 ? "center" : "flex-start",
         children: multiple && selectedValues.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
@@ -971,7 +1033,7 @@ function NativeSelectCore({
           children: selectedOption?.label ?? placeholder
         })
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        paddingRight: "$2",
+        paddingInlineEnd: "$2",
         alignSelf: "center",
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
           size: 16
@@ -1000,17 +1062,23 @@ function Select({
   id: idProp,
   value,
   defaultValue,
+  onChange,
   onValueChange,
   onBlur,
   options,
-  placeholder = "Select an option",
+  placeholder = (0, import_t.t)("Select an option"),
   groupLabel,
   multiple,
   dismissible,
   skeleton,
   compact,
+  "aria-label": ariaLabel,
   ...rest
 }) {
+  const emitValueChange = val => {
+    onChange?.(val);
+    onValueChange?.(val);
+  };
   const {
     resolvedForm,
     knobProps,
@@ -1021,6 +1089,15 @@ function Select({
     compact
   });
   const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
+  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 effectiveGtSm = typeof window !== "undefined" ? viewportGtSm : false;
   const shouldUseSheet = !import_tamagui.isWeb || !effectiveGtSm;
@@ -1045,7 +1122,7 @@ function Select({
         fontSize: knobProps.sizeToken,
         color: knobProps.textAccentColor,
         paddingVertical: "$2",
-        paddingHorizontal: "$3",
+        paddingHorizontal: knobProps.panelPadding.padding,
         fontFamily: knobProps.body.fontFamily,
         fontWeight: knobProps.body.fontWeight,
         "aria-readonly": "true",
@@ -1059,7 +1136,7 @@ function Select({
       fontSize: knobProps.sizeToken,
       color: knobProps.textAccentColor,
       paddingVertical: "$2",
-      paddingHorizontal: "$3",
+      paddingHorizontal: knobProps.panelPadding.padding,
       fontFamily: knobProps.body.fontFamily,
       fontWeight: knobProps.body.fontWeight,
       borderRadius: knobProps.borderRadius.borderRadius,
@@ -1080,12 +1157,14 @@ function Select({
       onValueChange: val => {
         if (disabled) return;
         handleValueChange?.(val);
-        onValueChange?.(val);
+        emitValueChange(val);
       },
       onBlur: handleBlur,
       placeholder,
       disabled,
       id,
+      "aria-label": ariaLabel,
+      hasLabel,
       knobProps,
       groupLabel,
       multiple,
@@ -1102,10 +1181,11 @@ function Select({
       required,
       size: sizeProp,
       knobProps,
+      disabled,
       ...rest,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
         size: sizeProp || knobProps.sizeToken,
-        children: renderSelectContent(value ?? defaultValue, void 0, onBlur)
+        children: renderSelectContent(value ?? uncontrolledValue, isControlled ? void 0 : setUncontrolledValue, onBlur)
       })
     });
   }
@@ -1125,6 +1205,7 @@ function Select({
         required,
         size: sizeProp,
         knobProps,
+        disabled,
         ...rest,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
           size: sizeProp || knobProps.sizeToken,