tembro 3.0.0 → 3.1.5

package/packages/cli/vendor/src/components/inputs/async-select.tsx

@@ -3,10 +3,10 @@
 import * as React from "react"
 import { CheckIcon, ChevronsUpDownIcon, Loader2Icon, PlusIcon, SearchIcon, XIcon } from "lucide-react"
 
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
-import { cn, stopInteractivePropagation } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { cn, stopInteractivePropagation } from "@/lib/utils"
 
 export type AsyncSelectOption<TValue extends string = string, TData = unknown> = {
   value: TValue
@@ -50,10 +50,10 @@ export type AsyncSelectStateRenderer<
   TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
 > = (state: AsyncSelectRenderState<TValue, TData, TOption>) => React.ReactNode
 
-export type AsyncSelectLabels = {
-  placeholder?: string
-  multiPlaceholder?: string
-  searchPlaceholder?: string
+export type AsyncSelectLabels = {
+  placeholder?: string
+  multiPlaceholder?: string
+  searchPlaceholder?: string
   loading?: string
   creating?: string
   empty?: string
@@ -62,20 +62,20 @@ export type AsyncSelectLabels = {
   clearAll?: string
   selectAll?: string
   minSearchLength?: (minSearchLength: number) => string
-  maxSelected?: (maxSelected: number) => string
-  selectedCount?: (count: number) => string
-  hiddenSelected?: (count: number) => string
-}
-
-export type AsyncSelectProps<
-  TValue extends string = string,
-  TData = unknown,
-  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
-> = Omit<React.ComponentProps<"div">, "onChange"> & {
-  isMulti?: false
-  value?: TValue
-  selectedOption?: TOption | null
-  onValueChange?: (value: TValue | undefined, option?: TOption) => void
+  maxSelected?: (maxSelected: number) => string
+  selectedCount?: (count: number) => string
+  hiddenSelected?: (count: number) => string
+}
+
+export type AsyncSelectProps<
+  TValue extends string = string,
+  TData = unknown,
+  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
+> = Omit<React.ComponentProps<"div">, "onChange"> & {
+  isMulti?: false
+  value?: TValue
+  selectedOption?: TOption | null
+  onValueChange?: (value: TValue | undefined, option?: TOption) => void
   loadOptions: (search: string, signal?: AbortSignal) => Promise<AsyncSelectOptionsResult<TValue, TData, TOption>>
   loadSelectedOption?: (value: TValue, signal?: AbortSignal) => Promise<TOption | null | undefined>
   defaultOptions?: AsyncSelectOptionsResult<TValue, TData, TOption>
@@ -92,30 +92,30 @@ export type AsyncSelectProps<
   renderEmpty?: AsyncSelectStateRenderer<TValue, TData, TOption>
   renderError?: AsyncSelectStateRenderer<TValue, TData, TOption>
   renderMinSearch?: AsyncSelectStateRenderer<TValue, TData, TOption>
-  onCreateOption?: (search: string) => Promise<TOption> | TOption
-  createOptionLabel?: (search: string) => React.ReactNode
-  showCreateOption?: (search: string, options: TOption[]) => boolean
-  showSelectedDescription?: boolean
-  triggerClassName?: string
+  onCreateOption?: (search: string) => Promise<TOption> | TOption
+  createOptionLabel?: (search: string) => React.ReactNode
+  showCreateOption?: (search: string, options: TOption[]) => boolean
+  showSelectedDescription?: boolean
+  triggerClassName?: string
   contentClassName?: string
   searchClassName?: string
   optionClassName?: string
-  invalid?: boolean
-}
-
-export type AsyncSelectMultiModeProps<
-  TValue extends string = string,
-  TData = unknown,
-  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
-> = AsyncMultiSelectProps<TValue, TData, TOption> & {
-  isMulti: true
-}
-
-export type AsyncMultiSelectProps<
-  TValue extends string = string,
-  TData = unknown,
-  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
-> = Omit<React.ComponentProps<"div">, "onChange"> & {
+  invalid?: boolean
+}
+
+export type AsyncSelectMultiModeProps<
+  TValue extends string = string,
+  TData = unknown,
+  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
+> = AsyncMultiSelectProps<TValue, TData, TOption> & {
+  isMulti: true
+}
+
+export type AsyncMultiSelectProps<
+  TValue extends string = string,
+  TData = unknown,
+  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
+> = Omit<React.ComponentProps<"div">, "onChange"> & {
   value?: TValue[]
   selectedOptions?: TOption[]
   onValueChange?: (value: TValue[], options: TOption[]) => void
@@ -129,9 +129,9 @@ export type AsyncMultiSelectProps<
   closeOnSelect?: boolean
   debounceMs?: number
   minSearchLength?: number
-  maxSelected?: number
-  maxVisibleTags?: number
-  showSelectAll?: boolean
+  maxSelected?: number
+  maxVisibleTags?: number
+  showSelectAll?: boolean
   labels?: AsyncSelectLabels
   renderOption?: (option: TOption, state: { selected: boolean }) => React.ReactNode
   renderValue?: (option: TOption) => React.ReactNode
@@ -141,17 +141,17 @@ export type AsyncMultiSelectProps<
   renderError?: AsyncSelectStateRenderer<TValue, TData, TOption>
   renderMinSearch?: AsyncSelectStateRenderer<TValue, TData, TOption>
   renderMaxSelected?: AsyncSelectStateRenderer<TValue, TData, TOption>
-  onCreateOption?: (search: string) => Promise<TOption> | TOption
-  createOptionLabel?: (search: string) => React.ReactNode
-  showCreateOption?: (search: string, options: TOption[]) => boolean
-  showSelectedDescription?: boolean
-  triggerClassName?: string
+  onCreateOption?: (search: string) => Promise<TOption> | TOption
+  createOptionLabel?: (search: string) => React.ReactNode
+  showCreateOption?: (search: string, options: TOption[]) => boolean
+  showSelectedDescription?: boolean
+  triggerClassName?: string
   contentClassName?: string
   searchClassName?: string
   optionClassName?: string
   tagClassName?: string
-  invalid?: boolean
-}
+  invalid?: boolean
+}
 
 type AsyncSelectCacheEntry<
   TValue extends string,
@@ -328,11 +328,8 @@ function AsyncStateMessage({
 }) {
   return (
     <div
-      data-slot="async-select-state"
-      className={cn(
-        "rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-3 text-sm leading-5 text-muted-foreground",
-        className
-      )}
+      data-slot="async-select-state"
+      className={className}
     >
       {children}
     </div>
@@ -371,19 +368,19 @@ function AsyncOptionButton<
       data-slot="async-select-option"
       data-selected={selected || undefined}
       data-disabled={option.disabled || undefined}
-      className={cn(
-        "flex w-full items-start gap-2.5 rounded-[var(--radius-md)] border border-transparent px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] hover:border-[color:color-mix(in_oklch,var(--primary),transparent_76%)] hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_93%)] focus-visible:border-[color:var(--aui-focus-ring,var(--ring))] focus-visible:shadow-[0_0_0_3px_var(--aui-focus-ring-soft,transparent)] data-[selected=true]:border-[color:color-mix(in_oklch,var(--primary),transparent_68%)] data-[selected=true]:bg-[color:color-mix(in_oklch,var(--primary),transparent_89%)] data-[selected=true]:text-foreground disabled:pointer-events-none disabled:opacity-50",
+      className={cn(
+        "flex w-full items-start gap-2.5 text-left outline-none disabled:pointer-events-none",
         optionClassName
       )}
       onClick={() => onSelect(option)}
     >
-      <span className={cn("mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border border-border/70", selected && "border-primary bg-primary text-primary-foreground")}>
-        {selected && <CheckIcon className="size-3" />}
+      <span data-slot="async-select-option-indicator" data-selected={selected || undefined} className="mt-0.5 shrink-0">
+        {selected && <CheckIcon data-icon="selected" />}
       </span>
       <span className="min-w-0 flex-1">
         {renderOption?.(option, { selected }) ?? (
           <span className="flex min-w-0 flex-col">
-            <span className="truncate font-medium">{option.label}</span>
+            <span className="truncate font-medium">{option.label}</span>
             {option.description && (
               <span className="truncate text-xs text-muted-foreground">{option.description}</span>
             )}
@@ -412,8 +409,8 @@ function AsyncCreateButton({
     <button
       type="button"
       disabled={isCreating}
-      data-slot="async-select-create"
-      className="flex w-full items-center gap-2 rounded-[var(--radius-md)] border border-dashed border-[color:color-mix(in_oklch,var(--primary),transparent_55%)] bg-[color:color-mix(in_oklch,var(--primary),transparent_94%)] px-3 py-2.5 text-left text-sm font-medium text-foreground outline-none transition-[background-color,border-color,color,box-shadow] hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)] disabled:pointer-events-none disabled:opacity-50"
+      data-slot="async-select-create"
+      className="flex w-full items-center gap-2 text-left outline-none disabled:pointer-events-none"
       onClick={onCreate}
     >
       <span className="flex size-4 shrink-0 items-center justify-center">
@@ -426,21 +423,15 @@ function AsyncCreateButton({
   )
 }
 
-function AsyncSelect<
-  TValue extends string = string,
-  TData = unknown,
-  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
->(props: AsyncSelectProps<TValue, TData, TOption> | AsyncSelectMultiModeProps<TValue, TData, TOption>) {
-  if ("isMulti" in props && props.isMulti) {
-    const multiProps = { ...props }
-    delete (multiProps as { isMulti?: true }).isMulti
-    return <AsyncMultiSelect {...multiProps} />
-  }
-
-  const {
-  className,
-  value,
-  selectedOption,
+function AsyncSingleSelect<
+  TValue extends string = string,
+  TData = unknown,
+  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
+>(props: AsyncSelectProps<TValue, TData, TOption>) {
+  const {
+  className,
+  value,
+  selectedOption,
   onValueChange,
   loadOptions,
   loadSelectedOption,
@@ -457,18 +448,18 @@ function AsyncSelect<
   renderLoading,
   renderEmpty,
   renderError,
-  renderMinSearch,
-  onCreateOption,
-  createOptionLabel,
-  showCreateOption,
-  showSelectedDescription = true,
-  triggerClassName,
+  renderMinSearch,
+  onCreateOption,
+  createOptionLabel,
+  showCreateOption,
+  showSelectedDescription = true,
+  triggerClassName,
   contentClassName,
-  searchClassName,
-  optionClassName,
-  invalid,
-  ...rootProps
-  } = props as AsyncSelectProps<TValue, TData, TOption>
+  searchClassName,
+  optionClassName,
+  invalid,
+  ...rootProps
+  } = props
   const resolvedDefaultGroups = React.useMemo(() => normalizeOptionGroups(defaultOptions), [defaultOptions])
   const defaultFlatOptions = React.useMemo(() => flattenOptionGroups(resolvedDefaultGroups), [resolvedDefaultGroups])
   const [open, setOpen] = React.useState(false)
@@ -596,10 +587,10 @@ function AsyncSelect<
     setSearch("")
   }
 
-  const handleClear = (event: React.MouseEvent<HTMLElement>) => {
-    stopInteractivePropagation(event)
-    clearSelection()
-  }
+  const handleClear = (event: React.MouseEvent<HTMLElement>) => {
+    stopInteractivePropagation(event)
+    clearSelection()
+  }
 
   const handleTriggerKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
     if (disabled) return
@@ -637,7 +628,7 @@ function AsyncSelect<
   }
 
   return (
-    <div data-slot="async-select" className={cn("w-full", className)} {...rootProps}>
+    <div data-slot="async-select" className={cn("w-full", className)} {...rootProps}>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger
           render={
@@ -647,47 +638,44 @@ function AsyncSelect<
               disabled={disabled}
               aria-expanded={open}
               aria-invalid={invalid || undefined}
-              data-slot="async-select-trigger"
-              className={cn(
-                "min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left",
-                triggerClassName
-              )}
+              data-slot="async-select-trigger"
+              className={cn("w-full justify-between text-left", triggerClassName)}
               onKeyDown={handleTriggerKeyDown}
             />
           }
         >
-          <span className="min-w-0 flex-1 text-left">
-            {currentOption ? (
-              <span className="flex min-w-0 flex-col gap-0.5">
-                <span className="truncate font-semibold">
-                  {renderValue?.(currentOption) ?? currentOption.label}
-                </span>
-                {showSelectedDescription && (currentOption.description || (currentOption.disabled && currentOption.disabledReason)) ? (
-                  <span className="truncate text-xs text-muted-foreground">
-                    {currentOption.description ?? currentOption.disabledReason}
-                  </span>
-                ) : null}
-              </span>
-            ) : (
-              <span className="truncate text-muted-foreground">{labels?.placeholder ?? "Select"}</span>
+          <span className="min-w-0 flex-1 text-left">
+            {currentOption ? (
+              <span className="flex min-w-0 flex-col gap-0.5">
+                <span className="truncate font-semibold">
+                  {renderValue?.(currentOption) ?? currentOption.label}
+                </span>
+                {showSelectedDescription && (currentOption.description || (currentOption.disabled && currentOption.disabledReason)) ? (
+                  <span className="truncate text-xs text-muted-foreground">
+                    {currentOption.description ?? currentOption.disabledReason}
+                  </span>
+                ) : null}
+              </span>
+            ) : (
+              <span className="truncate text-muted-foreground">{labels?.placeholder ?? "Select"}</span>
             )}
           </span>
           <span className="ml-2 flex shrink-0 items-center gap-1">
             {canClear && (
-              <span
-                role="button"
-                tabIndex={0}
-                className="rounded-full border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground"
-                aria-label={labels?.clear ?? "Clear"}
-                onClick={handleClear}
-                onKeyDown={(event) => {
-                  if (event.key !== "Enter" && event.key !== " ") return
-                  event.preventDefault()
-                  stopInteractivePropagation(event)
-                  clearSelection()
-                }}
-              >
-                <XIcon className="size-3.5" />
+              <span
+                role="button"
+                tabIndex={0}
+                data-slot="async-select-clear"
+                aria-label={labels?.clear ?? "Clear"}
+                onClick={handleClear}
+                onKeyDown={(event) => {
+                  if (event.key !== "Enter" && event.key !== " ") return
+                  event.preventDefault()
+                  stopInteractivePropagation(event)
+                  clearSelection()
+                }}
+              >
+                <XIcon data-icon="clear" />
               </span>
             )}
             <ChevronsUpDownIcon className="size-4 opacity-60" />
@@ -695,14 +683,11 @@ function AsyncSelect<
         </PopoverTrigger>
         <PopoverContent
           align="start"
-          data-slot="async-select-content"
-          className={cn(
-            "w-(--anchor-width) min-w-72 gap-3 rounded-[var(--aui-card-radius,var(--radius-lg))] border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]",
-            contentClassName
-          )}
+          data-slot="async-select-content"
+          className={cn("w-(--anchor-width) min-w-72 gap-3", contentClassName)}
         >
           <div data-slot="async-select-search-wrap" className="relative">
-            <SearchIcon className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <SearchIcon data-slot="async-select-search-icon" />
             <Input
               data-slot="async-select-search"
               value={search}
@@ -712,7 +697,7 @@ function AsyncSelect<
             />
           </div>
 
-          <div className="max-h-72 space-y-1 overflow-y-auto pr-1">
+          <div className="flex max-h-72 flex-col gap-1 overflow-y-auto pr-1">
             {searchTooShort && flatOptions.length === 0 && (
               renderMinSearch?.(state) ?? (
                 <AsyncStateMessage>
@@ -733,7 +718,7 @@ function AsyncSelect<
 
             {!isLoading && hasError &&
               (renderError?.(state) ?? (
-                <AsyncStateMessage className="text-destructive">
+                <AsyncStateMessage data-tone="danger">
                   {labels?.error ?? "Could not load options"}
                 </AsyncStateMessage>
               ))}
@@ -757,9 +742,7 @@ function AsyncSelect<
               optionGroups.map((group, groupIndex) => (
                 <div key={groupIndex}>
                   {group.label && (
-                    <div className="sticky top-0 z-10 bg-popover px-2 py-1 text-xs font-medium text-muted-foreground">
-                      {group.label}
-                    </div>
+                    <div data-slot="async-select-group-label" className="sticky top-0">{group.label}</div>
                   )}
                   {group.options.map((option) => (
                     <AsyncOptionButton
@@ -780,10 +763,10 @@ function AsyncSelect<
   )
 }
 
-/**
- * @deprecated Prefer `AsyncSelect` with `isMulti` for new usage.
- */
-function AsyncMultiSelect<
+/**
+ * @deprecated Prefer `AsyncSelect` with `isMulti` for new usage.
+ */
+function AsyncMultiSelect<
   TValue extends string = string,
   TData = unknown,
   TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
@@ -802,9 +785,9 @@ function AsyncMultiSelect<
   closeOnSelect = false,
   debounceMs = 250,
   minSearchLength = 0,
-  maxSelected,
-  maxVisibleTags,
-  showSelectAll = false,
+  maxSelected,
+  maxVisibleTags,
+  showSelectAll = false,
   labels,
   renderOption,
   renderValue,
@@ -813,18 +796,18 @@ function AsyncMultiSelect<
   renderEmpty,
   renderError,
   renderMinSearch,
-  renderMaxSelected,
-  onCreateOption,
-  createOptionLabel,
-  showCreateOption,
-  showSelectedDescription = true,
-  triggerClassName,
+  renderMaxSelected,
+  onCreateOption,
+  createOptionLabel,
+  showCreateOption,
+  showSelectedDescription = true,
+  triggerClassName,
   contentClassName,
   searchClassName,
   optionClassName,
-  tagClassName,
-  invalid,
-  ...props
+  tagClassName,
+  invalid,
+  ...props
 }: AsyncMultiSelectProps<TValue, TData, TOption>) {
   const values = React.useMemo(() => value ?? [], [value])
   const selectedValueKey = values.join("|")
@@ -856,20 +839,20 @@ function AsyncMultiSelect<
     () => ({ search, minSearchLength, options: flatOptions, selectedCount: values.length, maxSelected }),
     [flatOptions, maxSelected, minSearchLength, search, values.length]
   )
-  const hasValue = values.length > 0
-  const canClear = clearable && hasValue && !disabled
-  const isMaxReached = typeof maxSelected === "number" && values.length >= maxSelected
-  const resolvedMaxVisibleTags = Math.max(maxVisibleTags ?? values.length, 1)
-  const searchTooShort = searchKey.length < minSearchLength
+  const hasValue = values.length > 0
+  const canClear = clearable && hasValue && !disabled
+  const isMaxReached = typeof maxSelected === "number" && values.length >= maxSelected
+  const resolvedMaxVisibleTags = Math.max(maxVisibleTags ?? values.length, 1)
+  const searchTooShort = searchKey.length < minSearchLength
   const canCreate =
     !searchTooShort &&
     Boolean(onCreateOption) &&
     (showCreateOption ?? defaultShowCreateOption)(search, flatOptions)
   const visibleSelectableOptions = flatOptions.filter((option) => !option.disabled)
   const unselectedVisibleOptions = visibleSelectableOptions.filter((option) => !selectedSet.has(option.value))
-  const canSelectAll = showSelectAll && unselectedVisibleOptions.length > 0 && !isMaxReached
-  const visibleTagOptions = currentOptions.slice(0, resolvedMaxVisibleTags)
-  const hiddenTagCount = Math.max(currentOptions.length - visibleTagOptions.length, 0)
+  const canSelectAll = showSelectAll && unselectedVisibleOptions.length > 0 && !isMaxReached
+  const visibleTagOptions = currentOptions.slice(0, resolvedMaxVisibleTags)
+  const hiddenTagCount = Math.max(currentOptions.length - visibleTagOptions.length, 0)
 
   React.useEffect(() => {
     cacheRef.current.clear()
@@ -984,13 +967,13 @@ function AsyncMultiSelect<
     }
   }
 
-  const handleTagRemoveKeyDown = (event: React.KeyboardEvent<HTMLElement>, option: TOption) => {
-    if (event.key !== "Enter" && event.key !== " " && event.key !== "Backspace" && event.key !== "Delete") return
-
-    event.preventDefault()
-    stopInteractivePropagation(event)
-    removeValue(option.value)
-  }
+  const handleTagRemoveKeyDown = (event: React.KeyboardEvent<HTMLElement>, option: TOption) => {
+    if (event.key !== "Enter" && event.key !== " " && event.key !== "Backspace" && event.key !== "Delete") return
+
+    event.preventDefault()
+    stopInteractivePropagation(event)
+    removeValue(option.value)
+  }
 
   const handleTriggerKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
     if (disabled) return
@@ -1029,10 +1012,10 @@ function AsyncMultiSelect<
     setSearch("")
   }
 
-  const handleClear = (event: React.MouseEvent<HTMLElement>) => {
-    stopInteractivePropagation(event)
-    clearAllSelection()
-  }
+  const handleClear = (event: React.MouseEvent<HTMLElement>) => {
+    stopInteractivePropagation(event)
+    clearAllSelection()
+  }
 
   const handleCreate = async () => {
     if (!onCreateOption || !search.trim() || searchTooShort) return
@@ -1065,7 +1048,7 @@ function AsyncMultiSelect<
   }
 
   return (
-    <div data-slot="async-multi-select" className={cn("w-full", className)} {...props}>
+    <div data-slot="async-multi-select" className={cn("w-full", className)} {...props}>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger
           render={
@@ -1075,26 +1058,20 @@ function AsyncMultiSelect<
               disabled={disabled}
               aria-expanded={open}
               aria-invalid={invalid || undefined}
-              data-slot="async-select-trigger"
-              className={cn(
-                "min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left",
-                triggerClassName
-              )}
+              data-slot="async-select-trigger"
+              className={cn("w-full justify-between text-left", triggerClassName)}
               onKeyDown={handleTriggerKeyDown}
             />
           }
         >
           <span className="flex min-w-0 flex-1 flex-wrap gap-1 text-left">
-            {currentOptions.length > 0 ? (
-              <>
-              {visibleTagOptions.map((option) => (
-                <span
-                  key={option.value}
+            {currentOptions.length > 0 ? (
+              <>
+              {visibleTagOptions.map((option) => (
+                <span
+                  key={option.value}
                   data-slot="async-select-tag"
-                  className={cn(
-                    "inline-flex max-w-full items-center gap-1.5 rounded-[var(--radius-sm)] border border-[color:color-mix(in_oklch,var(--primary),transparent_70%)] bg-[color:color-mix(in_oklch,var(--primary),transparent_92%)] px-2 py-1 text-xs font-medium text-foreground",
-                    tagClassName
-                  )}
+                  className={cn("inline-flex max-w-full items-center gap-1.5", tagClassName)}
                 >
                   <span className="flex min-w-0 flex-col">
                     <span className="truncate">
@@ -1102,65 +1079,60 @@ function AsyncMultiSelect<
                         renderValue?.(option) ??
                         option.label}
                     </span>
-                    {showSelectedDescription && (option.description || (option.disabled && option.disabledReason)) ? (
-                      <span className="truncate text-[11px] text-muted-foreground">
-                        {option.description ?? option.disabledReason}
-                      </span>
-                    ) : null}
+                    {showSelectedDescription && (option.description || (option.disabled && option.disabledReason)) ? (
+                      <span className="truncate text-[11px] text-muted-foreground">
+                        {option.description ?? option.disabledReason}
+                      </span>
+                    ) : null}
                   </span>
                   {!disabled && (
                     <span
                       role="button"
                       tabIndex={0}
-                      data-slot="async-select-tag-remove"
-                      className="rounded-full p-0.5 text-muted-foreground transition-colors hover:bg-background hover:text-foreground"
-                      aria-label={`Remove ${getOptionLabelText(option)}`}
-                      onClick={(event) => {
-                        stopInteractivePropagation(event)
-                        removeOption(option)
-                      }}
-                      onKeyDown={(event) => handleTagRemoveKeyDown(event, option)}
+                      data-slot="async-select-tag-remove"
+                      aria-label={`Remove ${getOptionLabelText(option)}`}
+                      onClick={(event) => {
+                        stopInteractivePropagation(event)
+                        removeOption(option)
+                      }}
+                      onKeyDown={(event) => handleTagRemoveKeyDown(event, option)}
                     >
-                      <XIcon className="size-3" />
+                      <XIcon data-icon="remove" />
                     </span>
-                  )}
-                </span>
-              ))}
-              {hiddenTagCount > 0 ? (
-                <span
+                  )}
+                </span>
+              ))}
+              {hiddenTagCount > 0 ? (
+                <span
                   data-slot="async-select-tag-overflow"
-                  className={cn(
-                    "inline-flex max-w-full items-center rounded-[var(--radius-sm)] border border-dashed border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_58%)] px-2 py-1 text-xs font-medium text-muted-foreground",
-                    tagClassName
-                  )}
-                >
-                  {labels?.hiddenSelected?.(hiddenTagCount) ?? `+${hiddenTagCount} more`}
-                </span>
-              ) : null}
-              </>
-            ) : (
-              <span className="truncate text-muted-foreground">
-                {labels?.multiPlaceholder ?? labels?.placeholder ?? "Select"}
-              </span>
-            )}
+                  className={cn("inline-flex max-w-full items-center", tagClassName)}
+                >
+                  {labels?.hiddenSelected?.(hiddenTagCount) ?? `+${hiddenTagCount} more`}
+                </span>
+              ) : null}
+              </>
+            ) : (
+              <span className="truncate text-muted-foreground">
+                {labels?.multiPlaceholder ?? labels?.placeholder ?? "Select"}
+              </span>
+            )}
           </span>
           <span className="ml-2 flex shrink-0 items-center gap-1">
             {canClear && (
               <span
                 role="button"
                 tabIndex={0}
-                data-slot="async-select-clear"
-                className="rounded-full border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground"
+              data-slot="async-select-clear"
                 aria-label={labels?.clearAll ?? labels?.clear ?? "Clear all"}
-                onClick={handleClear}
-                onKeyDown={(event) => {
-                  if (event.key !== "Enter" && event.key !== " ") return
-                  event.preventDefault()
-                  stopInteractivePropagation(event)
-                  clearAllSelection()
-                }}
+                onClick={handleClear}
+                onKeyDown={(event) => {
+                  if (event.key !== "Enter" && event.key !== " ") return
+                  event.preventDefault()
+                  stopInteractivePropagation(event)
+                  clearAllSelection()
+                }}
               >
-                <XIcon className="size-3.5" />
+              <XIcon data-icon="clear" />
               </span>
             )}
             <ChevronsUpDownIcon className="size-4 opacity-60" />
@@ -1168,14 +1140,11 @@ function AsyncMultiSelect<
         </PopoverTrigger>
         <PopoverContent
           align="start"
-          data-slot="async-select-content"
-          className={cn(
-            "w-(--anchor-width) min-w-72 gap-3 rounded-[var(--aui-card-radius,var(--radius-lg))] border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]",
-            contentClassName
-          )}
+          data-slot="async-select-content"
+          className={cn("w-(--anchor-width) min-w-72 gap-3", contentClassName)}
         >
           <div data-slot="async-select-search-wrap" className="relative">
-            <SearchIcon className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <SearchIcon data-slot="async-select-search-icon" />
             <Input
               data-slot="async-select-search"
               value={search}
@@ -1185,7 +1154,7 @@ function AsyncMultiSelect<
             />
           </div>
 
-          <div data-slot="async-select-meta" className="flex flex-wrap items-center justify-between gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_62%)] px-3 py-2 text-xs text-muted-foreground">
+          <div data-slot="async-select-meta" className="flex flex-wrap items-center justify-between gap-2">
             {hasValue && labels?.selectedCount && <span>{labels.selectedCount(values.length)}</span>}
             {isMaxReached &&
               (renderMaxSelected?.(state) ?? (
@@ -1195,8 +1164,7 @@ function AsyncMultiSelect<
               {canSelectAll && (
                 <button
                   type="button"
-                  data-slot="async-select-meta-action"
-                  className="rounded-[var(--radius-sm)] border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background"
+                  data-slot="async-select-meta-action"
                   onClick={handleSelectAllVisible}
                 >
                   {labels?.selectAll ?? "Select all"}
@@ -1205,8 +1173,7 @@ function AsyncMultiSelect<
               {canClear && (
                 <button
                   type="button"
-                  data-slot="async-select-meta-action"
-                  className="rounded-[var(--radius-sm)] border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background"
+                  data-slot="async-select-meta-action"
                   onClick={() => onValueChange?.([], [])}
                 >
                   {labels?.clearAll ?? labels?.clear ?? "Clear all"}
@@ -1215,7 +1182,7 @@ function AsyncMultiSelect<
             </div>
           </div>
 
-          <div className="max-h-72 space-y-1 overflow-y-auto pr-1">
+          <div className="flex max-h-72 flex-col gap-1 overflow-y-auto pr-1">
             {searchTooShort && flatOptions.length === 0 && (
               renderMinSearch?.(state) ?? (
                 <AsyncStateMessage>
@@ -1236,7 +1203,7 @@ function AsyncMultiSelect<
 
             {!isLoading && hasError &&
               (renderError?.(state) ?? (
-                <AsyncStateMessage className="text-destructive">
+                <AsyncStateMessage data-tone="danger">
                   {labels?.error ?? "Could not load options"}
                 </AsyncStateMessage>
               ))}
@@ -1283,4 +1250,17 @@ function AsyncMultiSelect<
   )
 }
 
+function AsyncSelect<
+  TValue extends string = string,
+  TData = unknown,
+  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
+>(props: AsyncSelectProps<TValue, TData, TOption> | AsyncSelectMultiModeProps<TValue, TData, TOption>) {
+  if (props.isMulti) {
+    const { isMulti, ...multiProps } = props
+    return <AsyncMultiSelect data-multi={isMulti} {...multiProps} />
+  }
+
+  return <AsyncSingleSelect {...props} />
+}
+
 export { AsyncSelect, AsyncMultiSelect }