@2urgseui/core 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -226,6 +226,7 @@ __export(index_exports, {
   colors: () => colors,
   containerVariants: () => containerVariants,
   dismissToast: () => dismissToast,
+  formValueToAsyncSelectOption: () => formValueToAsyncSelectOption,
   getIcon: () => getIcon,
   headingVariants: () => headingVariants,
   inputGroupSelectTriggerTextAlignClass: () => inputGroupSelectTriggerTextAlignClass,
@@ -638,6 +639,15 @@ function resolveLabel(item, labelKey) {
   if (typeof labelKey === "function") return labelKey(item);
   return String(item[labelKey] ?? "");
 }
+function reactNodeToLabelString(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(reactNodeToLabelString).join("");
+  return "";
+}
+function resolveStringLabel(item, labelKey) {
+  return reactNodeToLabelString(resolveLabel(item, labelKey));
+}
 function AsyncSelectInner(props) {
   const {
     url,
@@ -653,6 +663,7 @@ function AsyncSelectInner(props) {
     disabled = false,
     error: error2 = false,
     name,
+    id,
     className,
     fetcher,
     dataPath = "data",
@@ -674,8 +685,8 @@ function AsyncSelectInner(props) {
   const searchInputRef = React6.useRef(null);
   const abortRef = React6.useRef(null);
   React6.useEffect(() => {
-    const id = setTimeout(() => setDebouncedSearch(search), debounceMs);
-    return () => clearTimeout(id);
+    const id2 = setTimeout(() => setDebouncedSearch(search), debounceMs);
+    return () => clearTimeout(id2);
   }, [search, debounceMs]);
   React6.useEffect(() => {
     setPage(1);
@@ -749,38 +760,43 @@ function AsyncSelectInner(props) {
     }
   }, [open]);
   React6.useEffect(() => {
-    if (!value) {
+    const v = value?.value;
+    if (v == null || v === "") {
       setSelectedItem(null);
       return;
     }
     const found = items.find(
-      (it) => String(it[valueKey]) === value
+      (it) => String(it[valueKey]) === v
     );
-    if (found) setSelectedItem(found);
+    setSelectedItem(found ?? null);
   }, [value, items, valueKey]);
   const handleSelect = (item) => {
     const itemValue = String(item[valueKey]);
-    if (itemValue === value && clearable) {
-      onValueChange?.("");
+    if (itemValue === value?.value && clearable) {
+      onValueChange?.(null);
       setSelectedItem(null);
     } else {
-      onValueChange?.(itemValue);
+      onValueChange?.({
+        value: itemValue,
+        label: resolveStringLabel(item, labelKey)
+      });
       setSelectedItem(item);
     }
     setOpen(false);
   };
   const handleClear = (e) => {
     e.stopPropagation();
-    onValueChange?.("");
+    onValueChange?.(null);
     setSelectedItem(null);
   };
-  const triggerLabel = selectedItem ? resolveLabel(selectedItem, labelKey) : null;
+  const triggerLabel = selectedItem ? resolveLabel(selectedItem, labelKey) : value?.label ? value.label : null;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
-    name && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "hidden", name, value: value ?? "" }),
+    name && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "hidden", name, value: value?.value ?? "" }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "button",
       {
         ref: innerRef,
+        id,
         type: "button",
         role: "combobox",
         "aria-expanded": open,
@@ -802,7 +818,7 @@ function AsyncSelectInner(props) {
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "flex shrink-0 items-center gap-1", children: [
-            clearable && value && !disabled && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            clearable && value?.value && !disabled && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "span",
               {
                 role: "button",
@@ -849,7 +865,7 @@ function AsyncSelectInner(props) {
               const itemValue = String(
                 item[valueKey]
               );
-              const isSelected = itemValue === value;
+              const isSelected = itemValue === value?.value;
               return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                 "button",
                 {
@@ -2814,7 +2830,7 @@ function FormField({
           };
           const controlNode = renderInput ? renderInput({
             ...sharedInputShell,
-            value: field.value ?? "",
+            value: variant === "async-select" ? formValueToAsyncSelectOption(field.value) ?? null : field.value ?? "",
             onChange: field.onChange,
             onBlur: field.onBlur,
             ref: field.ref
@@ -2958,6 +2974,17 @@ function FormField({
     externalError && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Text, { id: `${inputId}-error`, size: "sm", tone: "destructive", children: externalError })
   ] });
 }
+function formValueToAsyncSelectOption(v) {
+  if (v == null || v === "") return void 0;
+  if (typeof v === "object" && v !== null && "value" in v) {
+    const o = v;
+    return {
+      value: String(o.value ?? ""),
+      label: o.label != null ? String(o.label) : ""
+    };
+  }
+  return { value: String(v), label: "" };
+}
 function FormFieldVariantControl({
   variant,
   inputId,
@@ -3082,7 +3109,8 @@ function FormFieldVariantControl({
         AsyncSelect,
         {
           ...asyncSelectProps,
-          value: field.value == null || field.value === "" ? void 0 : String(field.value),
+          id: inputId,
+          value: formValueToAsyncSelectOption(field.value),
           onValueChange: field.onChange,
           disabled: field.disabled,
           error: hasError,
@@ -5455,6 +5483,7 @@ var typography = {
   colors,
   containerVariants,
   dismissToast,
+  formValueToAsyncSelectOption,
   getIcon,
   headingVariants,
   inputGroupSelectTriggerTextAlignClass,

package/dist/index.d.cts

@@ -64,6 +64,11 @@ declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimi
 declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
+/** Controlled value / `onValueChange` payload (same shape for prepopulation and after select). */
+type AsyncSelectOption = {
+    value: string;
+    label: string;
+};
 interface AsyncSelectPage<T = Record<string, unknown>> {
     data: T[];
     hasMore: boolean;
@@ -80,10 +85,10 @@ interface AsyncSelectProps<T = Record<string, unknown>> {
     valueKey: keyof T & string;
     /** Key (or render fn) for the display label. */
     labelKey: (keyof T & string) | ((item: T) => React.ReactNode);
-    /** Controlled value. */
-    value?: string;
-    /** Change handler — receives the selected item's value key, or `""` when cleared. */
-    onValueChange?: (value: string) => void;
+    /** Controlled value (`value` + `label`, e.g. from the server). */
+    value?: AsyncSelectOption | null;
+    /** Called with `{ value, label }` for a selection, or `null` when cleared. */
+    onValueChange?: (option: AsyncSelectOption | null) => void;
     /** Placeholder shown in the trigger when nothing is selected. */
     placeholder?: string;
     /** Placeholder for the search input inside the dropdown. */
@@ -97,6 +102,8 @@ interface AsyncSelectProps<T = Record<string, unknown>> {
     disabled?: boolean;
     error?: boolean;
     name?: string;
+    /** Sets `id` on the combobox trigger (use with `Label htmlFor`). */
+    id?: string;
     className?: string;
     /** Custom fetcher. Defaults to a JSON fetch that appends `?search=&page=` to `url`. */
     fetcher?: AsyncSelectFetcher<T>;
@@ -124,8 +131,8 @@ interface AsyncSelectProps<T = Record<string, unknown>> {
  *   url="/api/employees"
  *   valueKey="id"
  *   labelKey="fullName"
- *   value={employeeId}
- *   onValueChange={setEmployeeId}
+ *   value={{ value: employee.id, label: employee.fullName }}
+ *   onValueChange={setEmployee}
  *   placeholder="Choose an employee…"
  * />
  * ```
@@ -476,7 +483,11 @@ type FormFieldOtpConfig = {
     containerClassName?: string;
 } & Omit<React.ComponentPropsWithoutRef<typeof InputOTP>, "maxLength" | "value" | "onChange" | "containerClassName" | "render" | "invalid">;
 type FormFieldDropzoneConfig = Omit<FileDropzoneProps, "id" | "name" | "onChange" | "onBlur" | "ref" | "disabled" | "error" | "value">;
-type FormFieldAsyncSelectConfig = Omit<AsyncSelectProps, "value" | "onValueChange" | "disabled" | "error" | "name">;
+/**
+ * Props for `AsyncSelect` when used via `FormField` (`variant="async-select"`).
+ * The controlled field value is `{ value, label } | null | undefined` (legacy plain `string` is still read as id-only).
+ */
+type FormFieldAsyncSelectConfig = Omit<AsyncSelectProps, "value" | "onValueChange" | "disabled" | "error" | "name" | "id">;
 interface FormFieldProps<TFieldValues extends FieldValues> {
     name: Path<TFieldValues>;
     /** When omitted, no visible label is rendered; use `aria-label` on controls or descriptions for a11y. */
@@ -498,16 +509,21 @@ interface FormFieldProps<TFieldValues extends FieldValues> {
     otpProps?: FormFieldOtpConfig;
     richTextProps?: Omit<RichTextEditorProps, "value" | "onChange" | "disabled">;
     dropzoneProps?: FormFieldDropzoneConfig;
+    /** With `variant="async-select"`: URL fetch config; form state is `AsyncSelectOption | null` (see `FormFieldAsyncSelectConfig`). */
     asyncSelectProps?: FormFieldAsyncSelectConfig;
     className?: string;
-    renderInput?: (props: FormFieldRenderProps & {
+    renderInput?: (props: Omit<FormFieldRenderProps, "value"> & {
         id: string;
         name: string;
         "aria-describedby"?: string;
         error?: boolean;
+        /** With `variant="async-select"`, this is `AsyncSelectOption | null`; otherwise the field primitive value. */
+        value?: InputProps["value"] | AsyncSelectOption | null;
     }) => React.ReactNode;
 }
 declare function FormField<TFieldValues extends FieldValues>({ name, label, register, control, rules, description, required, error, variant, inputProps, textareaProps, checkboxProps, switchProps, selectProps, radioProps, otpProps, richTextProps, dropzoneProps, asyncSelectProps, className, renderInput, }: FormFieldProps<TFieldValues>): react_jsx_runtime.JSX.Element;
+/** Maps react-hook-form field values to `AsyncSelect`’s `value` prop (supports `{ value, label }`, legacy `string`, `null`/`undefined`). */
+declare function formValueToAsyncSelectOption(v: unknown): AsyncSelectOption | undefined;
 
 /**
  * Heading levels map to the correct HTML element and default size/weight from
@@ -876,4 +892,4 @@ declare namespace Toaster {
     var displayName: string;
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, AppShell, type AppShellProps, AspectRatio, type AspectRatioProps, AsyncSelect, type AsyncSelectFetcher, type AsyncSelectPage, type AsyncSelectProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, CalendarDayButton, Caption, type CaptionProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Container, type ContainerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileDropzone, type FileDropzoneProps, FormField, type FormFieldAsyncSelectConfig, type FormFieldDropzoneConfig, type FormFieldOtpConfig, type FormFieldProps, type FormFieldRadioConfig, type FormFieldRadioOption, type FormFieldSelectConfig, type FormFieldSelectItem, type FormFieldVariant, Heading, type HeadingProps, Icon, type IconComponent, type IconComponentProps, type IconProps, Input, InputGroup, InputGroupIcon, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, type LabelProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, Progress, type ProgressProps, RadioGroup, RadioGroupItem, RichHtml, type RichHtmlProps, RichTextEditor, type RichTextEditorProps, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, type SkeletonProps, Slider, type SliderProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, type TextProps, Textarea, type TextareaProps, Toast, ToastAction, ToastClose, ToastDescription, type ToastPayload, type ToastProps, ToastProvider, type ToastRecord, ToastTitle, ToastViewport, Toaster, type ToasterProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, captionVariants, checkboxVariants, containerVariants, dismissToast, getIcon, headingVariants, inputGroupSelectTriggerTextAlignClass, inputVariants, labelVariants, registerIcons, separatorVariants, sidebarMenuButtonVariants, skeletonVariants, switchRootVariants, switchThumbVariants, textVariants, toast, toastVariants, useSidebar, useToast };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, AppShell, type AppShellProps, AspectRatio, type AspectRatioProps, AsyncSelect, type AsyncSelectFetcher, type AsyncSelectOption, type AsyncSelectPage, type AsyncSelectProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, CalendarDayButton, Caption, type CaptionProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Container, type ContainerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileDropzone, type FileDropzoneProps, FormField, type FormFieldAsyncSelectConfig, type FormFieldDropzoneConfig, type FormFieldOtpConfig, type FormFieldProps, type FormFieldRadioConfig, type FormFieldRadioOption, type FormFieldSelectConfig, type FormFieldSelectItem, type FormFieldVariant, Heading, type HeadingProps, Icon, type IconComponent, type IconComponentProps, type IconProps, Input, InputGroup, InputGroupIcon, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, type LabelProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, Progress, type ProgressProps, RadioGroup, RadioGroupItem, RichHtml, type RichHtmlProps, RichTextEditor, type RichTextEditorProps, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, type SkeletonProps, Slider, type SliderProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, type TextProps, Textarea, type TextareaProps, Toast, ToastAction, ToastClose, ToastDescription, type ToastPayload, type ToastProps, ToastProvider, type ToastRecord, ToastTitle, ToastViewport, Toaster, type ToasterProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, captionVariants, checkboxVariants, containerVariants, dismissToast, formValueToAsyncSelectOption, getIcon, headingVariants, inputGroupSelectTriggerTextAlignClass, inputVariants, labelVariants, registerIcons, separatorVariants, sidebarMenuButtonVariants, skeletonVariants, switchRootVariants, switchThumbVariants, textVariants, toast, toastVariants, useSidebar, useToast };

package/dist/index.d.ts

@@ -64,6 +64,11 @@ declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimi
 declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
+/** Controlled value / `onValueChange` payload (same shape for prepopulation and after select). */
+type AsyncSelectOption = {
+    value: string;
+    label: string;
+};
 interface AsyncSelectPage<T = Record<string, unknown>> {
     data: T[];
     hasMore: boolean;
@@ -80,10 +85,10 @@ interface AsyncSelectProps<T = Record<string, unknown>> {
     valueKey: keyof T & string;
     /** Key (or render fn) for the display label. */
     labelKey: (keyof T & string) | ((item: T) => React.ReactNode);
-    /** Controlled value. */
-    value?: string;
-    /** Change handler — receives the selected item's value key, or `""` when cleared. */
-    onValueChange?: (value: string) => void;
+    /** Controlled value (`value` + `label`, e.g. from the server). */
+    value?: AsyncSelectOption | null;
+    /** Called with `{ value, label }` for a selection, or `null` when cleared. */
+    onValueChange?: (option: AsyncSelectOption | null) => void;
     /** Placeholder shown in the trigger when nothing is selected. */
     placeholder?: string;
     /** Placeholder for the search input inside the dropdown. */
@@ -97,6 +102,8 @@ interface AsyncSelectProps<T = Record<string, unknown>> {
     disabled?: boolean;
     error?: boolean;
     name?: string;
+    /** Sets `id` on the combobox trigger (use with `Label htmlFor`). */
+    id?: string;
     className?: string;
     /** Custom fetcher. Defaults to a JSON fetch that appends `?search=&page=` to `url`. */
     fetcher?: AsyncSelectFetcher<T>;
@@ -124,8 +131,8 @@ interface AsyncSelectProps<T = Record<string, unknown>> {
  *   url="/api/employees"
  *   valueKey="id"
  *   labelKey="fullName"
- *   value={employeeId}
- *   onValueChange={setEmployeeId}
+ *   value={{ value: employee.id, label: employee.fullName }}
+ *   onValueChange={setEmployee}
  *   placeholder="Choose an employee…"
  * />
  * ```
@@ -476,7 +483,11 @@ type FormFieldOtpConfig = {
     containerClassName?: string;
 } & Omit<React.ComponentPropsWithoutRef<typeof InputOTP>, "maxLength" | "value" | "onChange" | "containerClassName" | "render" | "invalid">;
 type FormFieldDropzoneConfig = Omit<FileDropzoneProps, "id" | "name" | "onChange" | "onBlur" | "ref" | "disabled" | "error" | "value">;
-type FormFieldAsyncSelectConfig = Omit<AsyncSelectProps, "value" | "onValueChange" | "disabled" | "error" | "name">;
+/**
+ * Props for `AsyncSelect` when used via `FormField` (`variant="async-select"`).
+ * The controlled field value is `{ value, label } | null | undefined` (legacy plain `string` is still read as id-only).
+ */
+type FormFieldAsyncSelectConfig = Omit<AsyncSelectProps, "value" | "onValueChange" | "disabled" | "error" | "name" | "id">;
 interface FormFieldProps<TFieldValues extends FieldValues> {
     name: Path<TFieldValues>;
     /** When omitted, no visible label is rendered; use `aria-label` on controls or descriptions for a11y. */
@@ -498,16 +509,21 @@ interface FormFieldProps<TFieldValues extends FieldValues> {
     otpProps?: FormFieldOtpConfig;
     richTextProps?: Omit<RichTextEditorProps, "value" | "onChange" | "disabled">;
     dropzoneProps?: FormFieldDropzoneConfig;
+    /** With `variant="async-select"`: URL fetch config; form state is `AsyncSelectOption | null` (see `FormFieldAsyncSelectConfig`). */
     asyncSelectProps?: FormFieldAsyncSelectConfig;
     className?: string;
-    renderInput?: (props: FormFieldRenderProps & {
+    renderInput?: (props: Omit<FormFieldRenderProps, "value"> & {
         id: string;
         name: string;
         "aria-describedby"?: string;
         error?: boolean;
+        /** With `variant="async-select"`, this is `AsyncSelectOption | null`; otherwise the field primitive value. */
+        value?: InputProps["value"] | AsyncSelectOption | null;
     }) => React.ReactNode;
 }
 declare function FormField<TFieldValues extends FieldValues>({ name, label, register, control, rules, description, required, error, variant, inputProps, textareaProps, checkboxProps, switchProps, selectProps, radioProps, otpProps, richTextProps, dropzoneProps, asyncSelectProps, className, renderInput, }: FormFieldProps<TFieldValues>): react_jsx_runtime.JSX.Element;
+/** Maps react-hook-form field values to `AsyncSelect`’s `value` prop (supports `{ value, label }`, legacy `string`, `null`/`undefined`). */
+declare function formValueToAsyncSelectOption(v: unknown): AsyncSelectOption | undefined;
 
 /**
  * Heading levels map to the correct HTML element and default size/weight from
@@ -876,4 +892,4 @@ declare namespace Toaster {
     var displayName: string;
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, AppShell, type AppShellProps, AspectRatio, type AspectRatioProps, AsyncSelect, type AsyncSelectFetcher, type AsyncSelectPage, type AsyncSelectProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, CalendarDayButton, Caption, type CaptionProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Container, type ContainerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileDropzone, type FileDropzoneProps, FormField, type FormFieldAsyncSelectConfig, type FormFieldDropzoneConfig, type FormFieldOtpConfig, type FormFieldProps, type FormFieldRadioConfig, type FormFieldRadioOption, type FormFieldSelectConfig, type FormFieldSelectItem, type FormFieldVariant, Heading, type HeadingProps, Icon, type IconComponent, type IconComponentProps, type IconProps, Input, InputGroup, InputGroupIcon, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, type LabelProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, Progress, type ProgressProps, RadioGroup, RadioGroupItem, RichHtml, type RichHtmlProps, RichTextEditor, type RichTextEditorProps, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, type SkeletonProps, Slider, type SliderProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, type TextProps, Textarea, type TextareaProps, Toast, ToastAction, ToastClose, ToastDescription, type ToastPayload, type ToastProps, ToastProvider, type ToastRecord, ToastTitle, ToastViewport, Toaster, type ToasterProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, captionVariants, checkboxVariants, containerVariants, dismissToast, getIcon, headingVariants, inputGroupSelectTriggerTextAlignClass, inputVariants, labelVariants, registerIcons, separatorVariants, sidebarMenuButtonVariants, skeletonVariants, switchRootVariants, switchThumbVariants, textVariants, toast, toastVariants, useSidebar, useToast };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, AppShell, type AppShellProps, AspectRatio, type AspectRatioProps, AsyncSelect, type AsyncSelectFetcher, type AsyncSelectOption, type AsyncSelectPage, type AsyncSelectProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, CalendarDayButton, Caption, type CaptionProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Container, type ContainerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileDropzone, type FileDropzoneProps, FormField, type FormFieldAsyncSelectConfig, type FormFieldDropzoneConfig, type FormFieldOtpConfig, type FormFieldProps, type FormFieldRadioConfig, type FormFieldRadioOption, type FormFieldSelectConfig, type FormFieldSelectItem, type FormFieldVariant, Heading, type HeadingProps, Icon, type IconComponent, type IconComponentProps, type IconProps, Input, InputGroup, InputGroupIcon, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, type LabelProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, Progress, type ProgressProps, RadioGroup, RadioGroupItem, RichHtml, type RichHtmlProps, RichTextEditor, type RichTextEditorProps, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, type SkeletonProps, Slider, type SliderProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, type TextProps, Textarea, type TextareaProps, Toast, ToastAction, ToastClose, ToastDescription, type ToastPayload, type ToastProps, ToastProvider, type ToastRecord, ToastTitle, ToastViewport, Toaster, type ToasterProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, captionVariants, checkboxVariants, containerVariants, dismissToast, formValueToAsyncSelectOption, getIcon, headingVariants, inputGroupSelectTriggerTextAlignClass, inputVariants, labelVariants, registerIcons, separatorVariants, sidebarMenuButtonVariants, skeletonVariants, switchRootVariants, switchThumbVariants, textVariants, toast, toastVariants, useSidebar, useToast };

package/dist/index.js

@@ -398,6 +398,15 @@ function resolveLabel(item, labelKey) {
   if (typeof labelKey === "function") return labelKey(item);
   return String(item[labelKey] ?? "");
 }
+function reactNodeToLabelString(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(reactNodeToLabelString).join("");
+  return "";
+}
+function resolveStringLabel(item, labelKey) {
+  return reactNodeToLabelString(resolveLabel(item, labelKey));
+}
 function AsyncSelectInner(props) {
   const {
     url,
@@ -413,6 +422,7 @@ function AsyncSelectInner(props) {
     disabled = false,
     error = false,
     name,
+    id,
     className,
     fetcher,
     dataPath = "data",
@@ -434,8 +444,8 @@ function AsyncSelectInner(props) {
   const searchInputRef = React6.useRef(null);
   const abortRef = React6.useRef(null);
   React6.useEffect(() => {
-    const id = setTimeout(() => setDebouncedSearch(search), debounceMs);
-    return () => clearTimeout(id);
+    const id2 = setTimeout(() => setDebouncedSearch(search), debounceMs);
+    return () => clearTimeout(id2);
   }, [search, debounceMs]);
   React6.useEffect(() => {
     setPage(1);
@@ -509,38 +519,43 @@ function AsyncSelectInner(props) {
     }
   }, [open]);
   React6.useEffect(() => {
-    if (!value) {
+    const v = value?.value;
+    if (v == null || v === "") {
       setSelectedItem(null);
       return;
     }
     const found = items.find(
-      (it) => String(it[valueKey]) === value
+      (it) => String(it[valueKey]) === v
     );
-    if (found) setSelectedItem(found);
+    setSelectedItem(found ?? null);
   }, [value, items, valueKey]);
   const handleSelect = (item) => {
     const itemValue = String(item[valueKey]);
-    if (itemValue === value && clearable) {
-      onValueChange?.("");
+    if (itemValue === value?.value && clearable) {
+      onValueChange?.(null);
       setSelectedItem(null);
     } else {
-      onValueChange?.(itemValue);
+      onValueChange?.({
+        value: itemValue,
+        label: resolveStringLabel(item, labelKey)
+      });
       setSelectedItem(item);
     }
     setOpen(false);
   };
   const handleClear = (e) => {
     e.stopPropagation();
-    onValueChange?.("");
+    onValueChange?.(null);
     setSelectedItem(null);
   };
-  const triggerLabel = selectedItem ? resolveLabel(selectedItem, labelKey) : null;
+  const triggerLabel = selectedItem ? resolveLabel(selectedItem, labelKey) : value?.label ? value.label : null;
   return /* @__PURE__ */ jsxs5(Popover, { open, onOpenChange: setOpen, children: [
-    name && /* @__PURE__ */ jsx6("input", { type: "hidden", name, value: value ?? "" }),
+    name && /* @__PURE__ */ jsx6("input", { type: "hidden", name, value: value?.value ?? "" }),
     /* @__PURE__ */ jsx6(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs5(
       "button",
       {
         ref: innerRef,
+        id,
         type: "button",
         role: "combobox",
         "aria-expanded": open,
@@ -562,7 +577,7 @@ function AsyncSelectInner(props) {
             }
           ),
           /* @__PURE__ */ jsxs5("span", { className: "flex shrink-0 items-center gap-1", children: [
-            clearable && value && !disabled && /* @__PURE__ */ jsx6(
+            clearable && value?.value && !disabled && /* @__PURE__ */ jsx6(
               "span",
               {
                 role: "button",
@@ -609,7 +624,7 @@ function AsyncSelectInner(props) {
               const itemValue = String(
                 item[valueKey]
               );
-              const isSelected = itemValue === value;
+              const isSelected = itemValue === value?.value;
               return /* @__PURE__ */ jsxs5(
                 "button",
                 {
@@ -2580,7 +2595,7 @@ function FormField({
           };
           const controlNode = renderInput ? renderInput({
             ...sharedInputShell,
-            value: field.value ?? "",
+            value: variant === "async-select" ? formValueToAsyncSelectOption(field.value) ?? null : field.value ?? "",
             onChange: field.onChange,
             onBlur: field.onBlur,
             ref: field.ref
@@ -2724,6 +2739,17 @@ function FormField({
     externalError && /* @__PURE__ */ jsx32(Text, { id: `${inputId}-error`, size: "sm", tone: "destructive", children: externalError })
   ] });
 }
+function formValueToAsyncSelectOption(v) {
+  if (v == null || v === "") return void 0;
+  if (typeof v === "object" && v !== null && "value" in v) {
+    const o = v;
+    return {
+      value: String(o.value ?? ""),
+      label: o.label != null ? String(o.label) : ""
+    };
+  }
+  return { value: String(v), label: "" };
+}
 function FormFieldVariantControl({
   variant,
   inputId,
@@ -2848,7 +2874,8 @@ function FormFieldVariantControl({
         AsyncSelect,
         {
           ...asyncSelectProps,
-          value: field.value == null || field.value === "" ? void 0 : String(field.value),
+          id: inputId,
+          value: formValueToAsyncSelectOption(field.value),
           onValueChange: field.onChange,
           disabled: field.disabled,
           error: hasError,
@@ -4913,6 +4940,7 @@ export {
   colors,
   containerVariants,
   dismissToast,
+  formValueToAsyncSelectOption,
   getIcon,
   headingVariants,
   inputGroupSelectTriggerTextAlignClass,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@2urgseui/core",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "2URGSE Shared UI component library",
   "license": "UNLICENSED",
   "main": "./dist/index.cjs",