@godxjp/ui 22.0.0 → 23.1.0

package/dist/components/data-entry/radio.js

@@ -7,6 +7,7 @@ import { cn } from "../../lib/utils.js";
 import { pickFieldA11y, useFieldIdentity, useMirroredInputAttributes } from "../../lib/field-a11y.js";
 import { Field } from "./field.js";
 import { choiceGroupClassName } from "./choice-option.js";
+import { withOwnHitTarget } from "./choice-hit-target.js";
 function checkedState(isSelected) {
   return isSelected ? "checked" : "unchecked";
 }
@@ -61,11 +62,11 @@ const RadioItem = React.forwardRef(
           // records: react-aria's root is a `<label>`, which is `display:inline`, so without it the
           // 16px dot collapses to nothing. `data-[invalid]` replaces `aria-invalid:` because
           // react-aria puts `aria-invalid` on the `<input>` and `data-invalid` on this box.
-          "ui-radio data-[invalid]:border-destructive inline-flex shrink-0 items-center justify-center shadow-xs transition-shadow outline-none",
+          "ui-radio data-[invalid]:border-destructive inline-flex shrink-0 items-center justify-center shadow-xs transition-shadow",
           className
         ),
         ...props,
-        render: (domProps, state) => /* @__PURE__ */ jsx("label", { ...domProps, "data-state": checkedState(state.isSelected) }),
+        render: (domProps, state) => /* @__PURE__ */ jsx("label", { ...domProps, "data-state": checkedState(state.isSelected), children: withOwnHitTarget(domProps.children) }),
         children: /* @__PURE__ */ jsx("span", { "data-slot": "radio-group-indicator", className: "ui-choice-indicator", children: /* @__PURE__ */ jsx(Circle, { className: "ui-radio-icon", "aria-hidden": "true" }) })
       }
     );
@@ -87,7 +88,7 @@ function RadioBarButton({
       isDisabled: option.disabled,
       "data-slot": "radio-button",
       className: "ui-radio-button ui-focus-ring",
-      render: (domProps, state) => /* @__PURE__ */ jsx("label", { ...domProps, "data-state": checkedState(state.isSelected) }),
+      render: (domProps, state) => /* @__PURE__ */ jsx("label", { ...domProps, "data-state": checkedState(state.isSelected), children: withOwnHitTarget(domProps.children) }),
       children: /* @__PURE__ */ jsx("span", { className: "ui-radio-button-label", children: option.label })
     }
   );

package/dist/components/data-entry/search-select.js

@@ -10,15 +10,24 @@ import {
   applyMaxTagCount,
   controlSurfaceAttrs,
   resolveAllowClear,
-  resolveAriaInvalid
+  resolveAriaInvalid,
+  splitByTokenSeparators
 } from "./control-surface.js";
+import { normalizeSelectOptions } from "../../lib/select-options.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 import { Command, CommandGroup } from "./command.js";
 import { Input } from "./input.js";
 const DEBOUNCE_MS = 250;
+function PopupRender({
+  render,
+  children
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: render ? render(children) : children });
+}
 function SearchSelect(props) {
   const {
-    options: staticOptions,
+    options: rawOptions,
+    fieldNames,
     loadOptions,
     renderOption,
     labelRender,
@@ -44,11 +53,18 @@ function SearchSelect(props) {
     search: searchProp,
     onSearchChange,
     filterOption,
+    optionFilterProp,
     filterSort,
     autoClearSearchValue = true,
     optionRender,
     menuItemSelectedIcon,
     notFoundContent,
+    prefix,
+    suffixIcon,
+    placement,
+    popupRender,
+    listHeight,
+    onPopupScroll,
     popupMatchSelectWidth = true,
     allowClear,
     onClear,
@@ -66,7 +82,15 @@ function SearchSelect(props) {
     "aria-invalid": ariaInvalid,
     "aria-required": ariaRequired
   } = props;
-  const multiple = props.mode === "multiple";
+  const staticOptions = React.useMemo(
+    () => normalizeSelectOptions(rawOptions, fieldNames),
+    [rawOptions, fieldNames]
+  );
+  const multiple = props.mode === "multiple" || props.mode === "tags";
+  const tagsMode = props.mode === "tags";
+  const maxTagTextLength = props.mode !== void 0 ? props.maxTagTextLength : void 0;
+  const tokenSeparators = props.mode !== void 0 ? props.tokenSeparators : void 0;
+  const tagRender = props.mode !== void 0 ? props.tagRender : void 0;
   const { t } = useTranslation();
   const nameFallback = useFieldNameFallback({
     "aria-label": ariaLabel,
@@ -111,7 +135,7 @@ function SearchSelect(props) {
     {}
   );
   const [internalValue, setInternalValue] = React.useState(
-    props.defaultValue ?? (props.mode === "multiple" ? [] : "")
+    props.defaultValue ?? (props.mode === "multiple" || props.mode === "tags" ? [] : "")
   );
   const isControlled = props.value !== void 0;
   const rawValue = isControlled ? props.value : internalValue;
@@ -127,14 +151,20 @@ function SearchSelect(props) {
     () => loadOptions ?? (async ({ query: search }) => {
       const needle = search.trim();
       const list = staticOptions ?? [];
-      const matches = (option) => filterOption ? filterOption(option, needle) : option.label.toLowerCase().includes(needle.toLowerCase()) || option.value.toLowerCase().includes(needle.toLowerCase());
+      const matches = (option) => {
+        if (filterOption) return filterOption(option, needle);
+        const haystack = optionFilterProp ? [String(option[optionFilterProp] ?? "")] : [option.label, option.value];
+        return haystack.some(
+          (field) => String(field).toLowerCase().includes(needle.toLowerCase())
+        );
+      };
       const kept = needle ? list.filter(matches) : list;
       return {
         options: filterSort ? [...kept].sort((a, b) => filterSort(a, b, { searchValue: needle })) : kept,
         hasMore: false
       };
     }),
-    [loadOptions, staticOptions, filterOption, filterSort]
+    [loadOptions, staticOptions, filterOption, optionFilterProp, filterSort]
   );
   React.useEffect(() => {
     const handle = window.setTimeout(() => setDebouncedQuery(query.trim()), DEBOUNCE_MS);
@@ -171,10 +201,24 @@ function SearchSelect(props) {
     setActiveIndex(0);
     void fetchPage(1, debouncedQuery, false);
   }, [open, debouncedQuery, fetchPage]);
+  const displayOptions = React.useMemo(() => {
+    if (!tagsMode) return loaded;
+    const known = new Set(loaded.map((option) => option.value));
+    const extras = [];
+    for (const entry of values) {
+      if (known.has(entry)) continue;
+      known.add(entry);
+      extras.push(pickedOptions[entry] ?? { value: entry, label: entry });
+    }
+    const needle = query.trim();
+    const exists = known.has(needle) || loaded.some((option) => option.label === needle);
+    const create = needle && !exists ? [{ value: needle, label: needle }] : [];
+    return create.length || extras.length ? [...create, ...extras, ...loaded] : loaded;
+  }, [tagsMode, loaded, values, query, pickedOptions]);
   const grouped = React.useMemo(() => {
     const order = [];
     const buckets = /* @__PURE__ */ new Map();
-    for (const option of loaded) {
+    for (const option of displayOptions) {
       const key = option.group ?? "";
       if (!buckets.has(key)) {
         buckets.set(key, []);
@@ -187,7 +231,7 @@ function SearchSelect(props) {
       heading: key || void 0,
       items: (buckets.get(key) ?? []).map((option) => ({ option, index: flatIndex++ }))
     }));
-  }, [loaded]);
+  }, [displayOptions]);
   const flatOrdered = React.useMemo(
     () => grouped.flatMap((group) => group.items.map((entry) => entry.option)),
     [grouped]
@@ -197,9 +241,10 @@ function SearchSelect(props) {
   const selectedOption = value ? optionFor(value) : null;
   const currentLabel = value ? selectedOption?.label ?? selectedLabel ?? value : resolvedPlaceholder;
   const currentIcon = value ? selectedOption?.icon ?? selectedIcon : null;
+  const chipLabel = (label) => maxTagTextLength !== void 0 && maxTagTextLength >= 0 && label.length > maxTagTextLength ? `${label.slice(0, maxTagTextLength)}\u2026` : label;
   const selectedChips = multiple ? values.map((entry) => ({
     value: entry,
-    label: optionFor(entry)?.label ?? entry
+    label: chipLabel(optionFor(entry)?.label ?? entry)
   })) : [];
   const {
     visible: visibleChips,
@@ -207,15 +252,15 @@ function SearchSelect(props) {
     overflow: chipOverflow
   } = applyMaxTagCount(
     selectedChips,
-    props.mode === "multiple" ? props.maxTagCount : void 0,
-    props.mode === "multiple" ? props.maxTagPlaceholder : void 0
+    props.mode !== void 0 ? props.maxTagCount : void 0,
+    props.mode !== void 0 ? props.maxTagPlaceholder : void 0
   );
-  const maxCount = props.mode === "multiple" ? props.maxCount : void 0;
+  const maxCount = props.mode !== void 0 ? props.maxCount : void 0;
   const atMaxCount = maxCount !== void 0 && values.length >= maxCount;
   const remember = (option) => setPickedOptions((prev) => ({ ...prev, [option.value]: option }));
   const select = (option) => {
     if (option.disabled) return;
-    if (props.mode === "multiple") {
+    if (props.mode !== void 0) {
       const already = values.includes(option.value);
       if (!already && atMaxCount) return;
       const next = already ? values.filter((entry) => entry !== option.value) : [...values, option.value];
@@ -237,8 +282,35 @@ function SearchSelect(props) {
     if (autoClearSearchValue) setQuery("");
     setOpen(false);
   };
+  const selectTokens = (text) => {
+    if (props.mode === void 0) return;
+    const next = [...values];
+    const picked = [];
+    for (const raw of splitByTokenSeparators(text, tokenSeparators ?? [])) {
+      const token = raw.trim();
+      if (!token) continue;
+      const match = flatOrdered.find((option2) => option2.value === token || option2.label === token);
+      const option = match ?? (tagsMode ? { value: token, label: token } : void 0);
+      if (!option || option.disabled) continue;
+      if (next.includes(option.value)) continue;
+      if (maxCount !== void 0 && next.length >= maxCount) break;
+      next.push(option.value);
+      picked.push(option);
+    }
+    if (picked.length === 0) return;
+    for (const option of picked) remember(option);
+    if (!isControlled) setInternalValue(next);
+    props.onValueChange?.(
+      next,
+      next.map((entry) => picked.find((option) => option.value === entry) ?? optionFor(entry)).filter((entry) => entry != null)
+    );
+    for (const option of picked) props.onSelect?.(option.value, option);
+  };
+  const deselect = (chipValue) => {
+    select(optionFor(chipValue) ?? { value: chipValue, label: chipValue });
+  };
   const clear = () => {
-    if (props.mode === "multiple") {
+    if (props.mode !== void 0) {
       if (!isControlled) setInternalValue([]);
       props.onValueChange?.([], []);
     } else {
@@ -302,100 +374,136 @@ function SearchSelect(props) {
   );
   const showClear = clearControl.enabled && hasSelection && !disabled && !readOnly && !loadingProp;
   const surface = controlSurfaceAttrs({ variant, status, size });
+  const triggerProps = {
+    id,
+    role: "combobox",
+    ...surface,
+    "aria-expanded": open,
+    "aria-controls": open ? listId : void 0,
+    "aria-label": triggerAriaLabel,
+    "aria-labelledby": triggerAriaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    "aria-errormessage": ariaErrorMessage,
+    "aria-invalid": resolveAriaInvalid(ariaInvalid, status),
+    "aria-required": ariaRequired,
+    "aria-readonly": readOnly || void 0,
+    "aria-busy": loadingProp || void 0,
+    "data-testid": dataTestId,
+    "data-field": resolvedField,
+    // label. `""` (nothing selected) is omitted rather than rendered as an empty attribute.
+    "data-value": (multiple ? values.join(",") : value) || void 0,
+    "data-mode": multiple ? "multiple" : void 0,
+    "data-width": width,
+    className: cn(
+      controlSurfaceTriggerClass,
+      "justify-start",
+      // `bounded` deliberately emits NO width utility — its width is owned by the
+      // `[data-width="bounded"]` rule in control.css, and a utility here would win the layer
+      // order and make that token dead. Same reasoning as SelectTrigger.
+      width === "auto" && "w-auto",
+      width === "full" && "w-full",
+      // Reserve trailing room for the single clear-or-chevron overlay rendered below.
+      "ui-control-trigger-affixed"
+    )
+  };
+  const chipsRemovable = !disabled && !readOnly;
+  const triggerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    prefix === void 0 || prefix === null ? null : /* @__PURE__ */ jsx("span", { "data-slot": "select-prefix", className: "ui-select-prefix", children: prefix }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "ui-search-select-option-body text-start",
+          !hasSelection && "text-muted-foreground"
+        ),
+        children: multiple ? hasSelection ? /* @__PURE__ */ jsxs("span", { className: "ui-search-select-values", "data-slot": "search-select-values", children: [
+          visibleChips.map((chip, index) => {
+            const close = () => deselect(chip.value);
+            return /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: tagRender ? void 0 : "ui-search-select-value",
+                "data-slot": "search-select-value",
+                children: tagRender ? tagRender({
+                  value: chip.value,
+                  label: chip.label,
+                  index,
+                  disabled: Boolean(disabled) || Boolean(readOnly),
+                  onClose: close
+                }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  labelRender ? labelRender({
+                    value: chip.value,
+                    label: chip.label,
+                    option: optionFor(chip.value) ?? void 0
+                  }) : chip.label,
+                  chipsRemovable ? /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "ui-search-select-value-remove",
+                      "data-slot": "search-select-value-remove",
+                      "aria-label": t("ui.tagInput.removeTag", { tag: chip.label }),
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        close();
+                      },
+                      children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+                    }
+                  ) : null
+                ] })
+              },
+              chip.value
+            );
+          }),
+          omittedChips.length > 0 ? /* @__PURE__ */ jsx("span", { className: "ui-search-select-value", "data-slot": "search-select-value-overflow", children: chipOverflow ?? t("dataEntry.selection.overflow", { count: omittedChips.length }) }) : null
+        ] }) : /* @__PURE__ */ jsx("span", { className: "truncate", children: resolvedPlaceholder }) : value && labelRender ? labelRender({ value, label: currentLabel, option: selectedOption ?? void 0 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          currentIcon ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: currentIcon }) : null,
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: currentLabel })
+        ] })
+      }
+    )
+  ] });
   return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
     /* @__PURE__ */ jsxs(
       Popover,
       {
         open,
         onOpenChange: (next) => {
-          if (readOnly && next) return;
+          if ((readOnly || disabled) && next) return;
           setOpen(next);
           if (!next && autoClearSearchValue) setQuery("");
         },
         children: [
-          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-            "button",
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: multiple ? /* @__PURE__ */ jsx(
+            "div",
             {
-              id,
-              type: "button",
-              role: "combobox",
-              ...surface,
-              "aria-expanded": open,
-              "aria-controls": open ? listId : void 0,
-              "aria-label": triggerAriaLabel,
-              "aria-labelledby": triggerAriaLabelledby,
-              "aria-describedby": ariaDescribedby,
-              "aria-errormessage": ariaErrorMessage,
-              "aria-invalid": resolveAriaInvalid(ariaInvalid, status),
-              "aria-required": ariaRequired,
-              "aria-readonly": readOnly || void 0,
-              "aria-busy": loadingProp || void 0,
-              disabled,
-              "data-testid": dataTestId,
-              "data-field": resolvedField,
-              "data-value": (multiple ? values.join(",") : value) || void 0,
-              "data-mode": multiple ? "multiple" : void 0,
-              "data-width": width,
-              className: cn(
-                controlSurfaceTriggerClass,
-                "justify-start",
-                // `bounded` deliberately emits NO width utility — its width is owned by the
-                // `[data-width="bounded"]` rule in control.css, and a utility here would win the
-                // layer order and make that token dead. Same reasoning as SelectTrigger.
-                width === "auto" && "w-auto",
-                width === "full" && "w-full",
-                // Reserve trailing room for the single clear-or-chevron overlay rendered below.
-                "ui-control-trigger-affixed"
-              ),
-              children: /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    "ui-search-select-option-body text-start",
-                    !hasSelection && "text-muted-foreground"
-                  ),
-                  children: multiple ? hasSelection ? (
-                    // Labels, not removable chips: the trigger IS a <button>, and a per-label remove
-                    // button inside it would be a button nested in a button (invalid HTML →
-                    // hydration error). Removal is a second click on the row, or the clear ✕.
-                    /* @__PURE__ */ jsxs("span", { className: "ui-search-select-values", "data-slot": "search-select-values", children: [
-                      visibleChips.map((chip) => /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: "ui-search-select-value",
-                          "data-slot": "search-select-value",
-                          children: labelRender ? labelRender({
-                            value: chip.value,
-                            label: chip.label,
-                            option: optionFor(chip.value) ?? void 0
-                          }) : chip.label
-                        },
-                        chip.value
-                      )),
-                      omittedChips.length > 0 ? /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: "ui-search-select-value",
-                          "data-slot": "search-select-value-overflow",
-                          children: chipOverflow ?? t("dataEntry.selection.overflow", { count: omittedChips.length })
-                        }
-                      ) : null
-                    ] })
-                  ) : /* @__PURE__ */ jsx("span", { className: "truncate", children: resolvedPlaceholder }) : value && labelRender ? labelRender({ value, label: currentLabel, option: selectedOption ?? void 0 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                    currentIcon ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: currentIcon }) : null,
-                    /* @__PURE__ */ jsx("span", { className: "truncate", children: currentLabel })
-                  ] })
+              ...triggerProps,
+              tabIndex: disabled ? -1 : 0,
+              "aria-disabled": disabled || void 0,
+              "data-disabled": disabled ? "" : void 0,
+              onKeyDown: (event) => {
+                if (disabled || readOnly) return;
+                if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+                  event.preventDefault();
+                  setOpen(true);
+                  return;
                 }
-              )
+                if (event.key === "Backspace" && values.length > 0) {
+                  event.preventDefault();
+                  deselect(values[values.length - 1]);
+                }
+              },
+              children: triggerContent
             }
-          ) }),
+          ) : /* @__PURE__ */ jsx("button", { ...triggerProps, type: "button", disabled, children: triggerContent }) }),
           resolvedName ? multiple ? values.map((entry) => /* @__PURE__ */ jsx("input", { type: "hidden", name: resolvedName, value: entry, readOnly: true }, entry)) : /* @__PURE__ */ jsx("input", { type: "hidden", name: resolvedName, value, readOnly: true }) : null,
           /* @__PURE__ */ jsx(
             PopoverContent,
             {
               "aria-label": triggerAriaLabelledby ? void 0 : triggerAriaLabel ?? resolvedPlaceholder,
               "aria-labelledby": triggerAriaLabelledby,
-              align: "start",
+              side: placement?.startsWith("top") ? "top" : "bottom",
+              align: placement?.endsWith("End") ? "end" : "start",
               sideOffset: 4,
               collisionPadding: 12,
               className: "ui-search-select-panel",
@@ -403,7 +511,7 @@ function SearchSelect(props) {
               style: typeof popupMatchSelectWidth === "number" ? {
                 "--search-select-panel-inline-size": `${popupMatchSelectWidth}px`
               } : void 0,
-              children: /* @__PURE__ */ jsxs(Command, { value, shouldFilter: false, className: "ui-search-select-command", children: [
+              children: /* @__PURE__ */ jsx(PopupRender, { render: popupRender, children: /* @__PURE__ */ jsxs(Command, { value, shouldFilter: false, className: "ui-search-select-command", children: [
                 /* @__PURE__ */ jsx("div", { className: "ui-search-select-search", children: /* @__PURE__ */ jsx(
                   Input,
                   {
@@ -413,7 +521,23 @@ function SearchSelect(props) {
                     "aria-activedescendant": activeOptionId,
                     "aria-label": searchPlaceholder ?? t("dataEntry.searchSelect.search"),
                     value: query,
-                    onChange: (event) => setQuery(event.target.value),
+                    onChange: (event) => {
+                      const next = event.target.value;
+                      if (multiple && tokenSeparators?.length && tokenSeparators.some((separator) => next.includes(separator))) {
+                        selectTokens(next);
+                        setQuery("");
+                        return;
+                      }
+                      setQuery(next);
+                    },
+                    onPaste: (event) => {
+                      if (!multiple || !tokenSeparators?.length) return;
+                      const text = event.clipboardData.getData("text");
+                      if (!tokenSeparators.some((separator) => text.includes(separator))) return;
+                      event.preventDefault();
+                      selectTokens(text);
+                      setQuery("");
+                    },
                     onKeyDown,
                     placeholder: searchPlaceholder ?? t("dataEntry.searchSelect.search"),
                     className: "ui-search-select-search-input"
@@ -427,7 +551,13 @@ function SearchSelect(props) {
                     "aria-multiselectable": multiple || void 0,
                     "aria-busy": loading,
                     className: "ui-search-select-list",
-                    onScroll,
+                    style: listHeight === void 0 ? void 0 : {
+                      "--search-select-list-max-height": `${listHeight}px`
+                    },
+                    onScroll: (event) => {
+                      onPopupScroll?.(event);
+                      onScroll(event);
+                    },
                     children: [
                       grouped.map((group) => {
                         const rows = group.items.map(({ option, index }) => /* @__PURE__ */ jsxs(
@@ -491,7 +621,7 @@ function SearchSelect(props) {
                           "data-tone": "destructive",
                           children: errorMessage ?? t("dataEntry.searchSelect.error")
                         }
-                      ) : loaded.length === 0 ? /* @__PURE__ */ jsx(
+                      ) : displayOptions.length === 0 ? /* @__PURE__ */ jsx(
                         "div",
                         {
                           role: "option",
@@ -518,7 +648,7 @@ function SearchSelect(props) {
                     })
                   }
                 ) : null
-              ] })
+              ] }) })
             }
           )
         ]
@@ -546,7 +676,7 @@ function SearchSelect(props) {
         onClick: clear,
         children: clearControl.clearIcon ?? /* @__PURE__ */ jsx(X, { className: "ui-control-affix-icon", "aria-hidden": "true" })
       }
-    ) : /* @__PURE__ */ jsx(
+    ) : suffixIcon === null ? null : suffixIcon !== void 0 ? /* @__PURE__ */ jsx("span", { "data-slot": "select-suffix", className: "ui-select-suffix", "aria-hidden": "true", children: suffixIcon }) : /* @__PURE__ */ jsx(
       ChevronsUpDown,
       {
         className: "ui-control-affix-icon ui-control-affix-indicator",

package/dist/components/data-entry/select.d.ts

@@ -1,12 +1,30 @@
 import * as React from "react";
 import type { ControlStatusProp, ControlVariantProp, ControlWidthProp, SizeProp } from "../../props/vocabulary/index.js";
-import * as SelectPrimitive from "@radix-ui/react-select";
 import type { FieldA11yProps } from "../../lib/field-a11y.js";
 import type { SelectDataProp } from "../../props/components/data-entry.prop.js";
-/** Compound-API props: the Radix root's own props PLUS the FormField field-a11y contract, which
+/** Compound-API props — the shape the Radix root had, plus the FormField field-a11y contract that
  *  this component re-routes to the trigger (see {@link SelectFieldA11yContext}). */
-export type SelectCompoundProp = React.ComponentProps<typeof SelectPrimitive.Root> & FieldA11yProps & {
+export type SelectCompoundProp = FieldA11yProps & {
     id?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * @deprecated Accepted so Radix-era call sites keep compiling. Direction now comes from the
+     * ambient locale (`AppProvider` / `I18nProvider`), which react-aria reads itself.
+     */
+    dir?: "ltr" | "rtl";
+    /** Form field name — a hidden native `<select>` carries the value on submit. */
+    name?: string;
+    autoComplete?: string;
+    disabled?: boolean;
+    /** Native `required`: an empty select blocks a native form submit. */
+    required?: boolean;
+    form?: string;
+    children?: React.ReactNode;
 };
 export type SelectProp = SelectDataProp | SelectCompoundProp;
 /**
@@ -17,9 +35,16 @@ export type SelectProp = SelectDataProp | SelectCompoundProp;
  * optgroup grouping, and `renderOption`.
  */
 export declare function Select(props: SelectProp): React.JSX.Element;
-export declare function SelectGroup(props: React.ComponentProps<typeof SelectPrimitive.Group>): React.JSX.Element;
-export declare function SelectValue(props: React.ComponentProps<typeof SelectPrimitive.Value>): React.JSX.Element;
-export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+export declare function SelectGroup({ className, children, ...props }: React.HTMLAttributes<HTMLElement>): React.JSX.Element;
+export declare const SelectValue: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /** Shown while nothing is selected. */
+    placeholder?: React.ReactNode;
+    /** Replaces the selected option's label on the trigger while a value is selected. */
+    children?: React.ReactNode;
+    /** @deprecated Radix-only; has no effect. */
+    asChild?: boolean;
+} & React.RefAttributes<HTMLSpanElement>>;
+export declare const SelectTrigger: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
     /** Control height tier — the shared `--control-height` ladder (antd `size`). */
     size?: SizeProp;
     /** Control surface (antd `variant`). Default `outlined`. */
@@ -43,27 +68,64 @@ export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectP
     "data-field"?: string;
     /**
      * Normally supplied by `Select` itself — the trigger shows the option's LABEL, and this is the
-     * only place the underlying value is readable from the DOM without reaching into Radix's
-     * aria-hidden native `<select>`.
+     * only place the underlying value is readable from the DOM without reaching into the aria-hidden
+     * native `<select>`.
      */
     "data-value"?: string;
+    /** @deprecated Radix-only; has no effect — the trigger is always the library's own button. */
+    asChild?: boolean;
 } & React.RefAttributes<HTMLButtonElement>>;
-export declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+type SelectScrollButtonProp = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * @deprecated Radix-only. react-aria's listbox is a native scroll container, so there is nothing
+ * to render; kept (as a no-op) so existing imports keep compiling until the next major.
+ */
+export declare const SelectScrollUpButton: React.ForwardRefExoticComponent<SelectScrollButtonProp & React.RefAttributes<HTMLDivElement>>;
+/** @deprecated Radix-only — see {@link SelectScrollUpButton}. */
+export declare const SelectScrollDownButton: React.ForwardRefExoticComponent<SelectScrollButtonProp & React.RefAttributes<HTMLDivElement>>;
+type RadixSide = "top" | "right" | "bottom" | "left";
+export declare const SelectContent: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "dir"> & {
     /**
      * How the popup sizes against its trigger — the DOM half of antd `popupMatchSelectWidth`.
      * Absent = the trigger's width is the floor (antd's `true`); `content` releases that floor;
      * `fixed` pins both edges to `--select-content-inline-size`.
      */
     "data-popup-match"?: "content" | "fixed";
+    side?: RadixSide;
+    sideOffset?: number;
+    align?: "start" | "center" | "end";
+    alignOffset?: number;
+    /** `false` keeps the popup on `side` even when it would overflow. */
+    avoidCollisions?: boolean;
+    collisionPadding?: number;
+    /** @deprecated Radix-only. The popup always positions against the trigger (`popper`). */
+    position?: "popper" | "item-aligned";
+    /** @deprecated Radix-only; has no effect. */
+    sticky?: "partial" | "always";
+    /** @deprecated Radix-only; has no effect. */
+    hideWhenDetached?: boolean;
+    /** @deprecated Radix-only; has no effect. */
+    onCloseAutoFocus?: (event: Event) => void;
+    /** @deprecated Radix-only; has no effect — Escape always closes. */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /** @deprecated Radix-only; has no effect — an outside press always closes. */
+    onPointerDownOutside?: (event: Event) => void;
+    /** @deprecated Radix-only; has no effect. */
+    forceMount?: true;
 } & React.RefAttributes<HTMLDivElement>>;
-export declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+export declare const SelectLabel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+export declare const SelectItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> & {
+    value: string;
+    disabled?: boolean;
+    /** Text for type-to-select and the hidden native `<option>`; derived from `children` if omitted. */
+    textValue?: string;
     /**
      * antd `menuItemSelectedIcon` — a decorative mark on the picked row. Off by default: this
      * library marks the picked row with fill + weight, which costs no width.
      */
     selectedIcon?: React.ReactNode;
+    /** @deprecated Radix-only; has no effect. */
+    asChild?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
-export declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectSeparator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+export {};