azamat-ui-kit-cli 0.3.13 → 0.3.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "azamat-ui-kit-cli",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "description": "CLI for Azamat UI Kit source-copy, presets, and theme setup.",
   "license": "MIT",
   "type": "module",

package/vendor/src/components/data-table/data-table-pagination.tsx

@@ -49,7 +49,7 @@ function DataTablePagination({
     <div
       data-slot="data-table-pagination"
       className={cn(
-        "flex flex-col gap-3 border-t border-border/70 bg-muted/[0.18] px-4 py-3 sm:flex-row sm:items-center sm:justify-between",
+        "flex flex-col gap-3 border-t px-4 py-3 sm:flex-row sm:items-center sm:justify-between",
         className
       )}
       {...props}

package/vendor/src/components/data-table/data-table-toolbar.tsx

@@ -3,12 +3,12 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-const dataTableToolbarVariants = cva("flex flex-col", {
+const dataTableToolbarVariants = cva("flex flex-col", {
   variants: {
     variant: {
-      default: "rounded-[var(--radius-2xl)] border border-border/70 bg-card/72 shadow-sm ring-1 ring-foreground/5",
+      default: "",
       plain: "border-transparent bg-transparent shadow-none",
-      soft: "rounded-[var(--radius-2xl)] border border-transparent bg-muted/32 shadow-none",
+      soft: "",
     },
     density: {
       compact: "gap-3 p-3",
@@ -62,10 +62,11 @@ function DataTableToolbar({
   const hasSelection = selectedCount > 0 && Boolean(selectionActions)
 
   return (
-    <div
-      data-slot="data-table-toolbar"
-      data-density={density ?? "default"}
-      className={cn(dataTableToolbarVariants({ variant, density }), className)}
+    <div
+      data-slot="data-table-toolbar"
+      data-variant={variant ?? "plain"}
+      data-density={density ?? "default"}
+      className={cn(dataTableToolbarVariants({ variant, density }), className)}
       {...props}
     >
       {(hasHeading || actions) && (
@@ -89,11 +90,11 @@ function DataTableToolbar({
             {children}
           </div>
 
-          {hasSelection && (
-            <div className="flex shrink-0 items-center gap-2 rounded-full border border-border/75 bg-background/92 px-2.5 py-1.5 text-sm shadow-[0_1px_0_rgba(255,255,255,0.08)] backdrop-blur">
-              <span className="text-muted-foreground">{selectedLabel(selectedCount, totalCount)}</span>
-              {selectionActions}
-            </div>
+          {hasSelection && (
+            <div data-slot="data-table-selection-bar" className="flex shrink-0 items-center gap-2 rounded-full border px-2.5 py-1.5 text-sm backdrop-blur">
+              <span className="text-muted-foreground">{selectedLabel(selectedCount, totalCount)}</span>
+              {selectionActions}
+            </div>
           )}
         </div>
       )}

package/vendor/src/components/data-table/data-table.tsx

@@ -225,16 +225,17 @@ function DataTable<TData, TValue = unknown>({
   rowClassName,
   ...props
 }: DataTableProps<TData, TValue>) {
-  const resolvedColumns = React.useMemo<ColumnDef<TData, TValue | unknown>[]>(() => {
-    if (!rowActions || features?.rowActions === false) return columns
-
-    return [
-      ...columns,
-      createDataTableActionsColumn<TData>({
-        getActions: rowActions,
-      }) as ColumnDef<TData, TValue | unknown>,
-    ]
-  }, [columns, features?.rowActions, rowActions])
+  const resolvedColumns = React.useMemo<ColumnDef<TData, unknown>[]>(() => {
+    const baseColumns = columns as ColumnDef<TData, unknown>[]
+    if (!rowActions || features?.rowActions === false) return baseColumns
+
+    return [
+      ...baseColumns,
+      createDataTableActionsColumn<TData>({
+        getActions: rowActions,
+      }) as ColumnDef<TData, unknown>,
+    ]
+  }, [columns, features?.rowActions, rowActions])
 
   const paginationConfig = pagination === false ? undefined : pagination
   const controlledPagination = paginationConfig
@@ -408,7 +409,7 @@ function DataTable<TData, TValue = unknown>({
         data-striped={striped || undefined}
         data-bordered={bordered || undefined}
         className={cn(
-          "overflow-hidden rounded-[var(--radius-2xl)] border border-border/70 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),white_8%),var(--card))] shadow-sm ring-1 ring-foreground/5 backdrop-blur",
+          "overflow-hidden rounded-[var(--radius-2xl)] border backdrop-blur",
           !bordered && "border-border",
           renderMobileCard && "hidden md:block",
           tableWrapperClassName
@@ -419,7 +420,7 @@ function DataTable<TData, TValue = unknown>({
           className={cn("text-[0.95rem]", tableClassName)}
         >
           <TableHeader
-            className={cn(stickyHeader && "sticky top-0 z-10 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--background),white_5%),var(--background))] shadow-sm backdrop-blur")}
+            className={cn(stickyHeader && "sticky top-0 z-10 shadow-sm backdrop-blur")}
           >
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
@@ -430,7 +431,7 @@ function DataTable<TData, TValue = unknown>({
                       className={cn(
                         densityHeadClassName[density],
                         "text-muted-foreground",
-                        stickyHeader && "bg-[linear-gradient(180deg,color-mix(in_oklch,var(--background),white_5%),var(--background))] backdrop-blur",
+                        stickyHeader && "backdrop-blur",
                         bordered && "border-r last:border-r-0",
                         getHeaderCellClassName(header, headerCellClassName)
                       )}
@@ -460,7 +461,6 @@ function DataTable<TData, TValue = unknown>({
                         className={cn(
                           onRowClick && !rowDisabled && "cursor-pointer",
                           !rowDisabled && "transition-colors",
-                          striped && rowIndex % 2 === 1 && "bg-muted/20",
                           rowDisabled && "pointer-events-none opacity-55",
                           getRowClassName(row, rowClassName)
                         )}

package/vendor/src/components/display/smart-card.tsx

@@ -47,11 +47,12 @@ export type SmartCardRenderContext = {
 /** @deprecated Prefer `InfoCardProps` via `InfoCard` or `CardFamily.Info` for new public usage. */
 export type SmartCardProps = Omit<React.ComponentProps<typeof Card>, "title" | "content" | "size"> & SmartCardRenderContext & {
   orientation?: SmartCardOrientation
-  variant?: SmartCardVariant
-  size?: SmartCardSize
-  density?: SmartCardDensity
-  loading?: boolean
-  disabled?: boolean
+  variant?: SmartCardVariant
+  size?: SmartCardSize
+  density?: SmartCardDensity
+  compact?: boolean
+  loading?: boolean
+  disabled?: boolean
   selected?: boolean
   interactive?: boolean
   classNames?: SmartCardClassNames
@@ -93,10 +94,11 @@ function SmartCard({
   content,
   footer,
   orientation = "vertical",
-  variant = "outline",
-  size = "md",
-  density = "default",
-  loading = false,
+  variant = "outline",
+  size = "md",
+  density,
+  compact,
+  loading = false,
   disabled = false,
   selected = false,
   interactive,
@@ -109,9 +111,10 @@ function SmartCard({
   children,
   onClick,
   ...props
-}: SmartCardProps) {
-  const ctx: SmartCardRenderContext = { eyebrow, title, description, media, icon, status, actions, meta, content, footer }
-  const clickable = Boolean(onClick || interactive)
+}: SmartCardProps) {
+  const ctx: SmartCardRenderContext = { eyebrow, title, description, media, icon, status, actions, meta, content, footer }
+  const clickable = Boolean(onClick || interactive)
+  const resolvedDensity = compact ? "compact" : density ?? "default"
 
   return (
     <Card
@@ -131,7 +134,7 @@ function SmartCard({
       {...props}
     >
       {loading ? (
-        <div className={cn("grid gap-3", densityClassName[density])}>
+        <div className={cn("grid gap-3", densityClassName[resolvedDensity])}>
           <Skeleton className="h-5 w-1/2" />
           <SkeletonText rows={3} />
         </div>
@@ -150,7 +153,7 @@ function SmartCard({
                 {media}
               </div>
             ))}
-          <div data-slot="smart-card-body" className={cn("grid min-w-0 flex-1 gap-3", densityClassName[density], classNames?.body)}>
+          <div data-slot="smart-card-body" className={cn("grid min-w-0 flex-1 gap-3", densityClassName[resolvedDensity], classNames?.body)}>
             {renderHeader?.(ctx) ?? (
               <div data-slot="smart-card-header" className={cn("flex items-start justify-between gap-3", classNames?.header)}>
                 <div className="flex min-w-0 items-start gap-3">

package/vendor/src/components/form/form-input.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from "react"
-import { Controller, type Control, type FieldPath, type FieldValues } from "react-hook-form"
+import { Controller, type Control, type FieldPath, type FieldValues, type RegisterOptions } from "react-hook-form"
 
 import {
   DateRangeInput,
@@ -57,6 +57,7 @@ type FormControlledFieldProps<
 > = FormFieldShellControlProps & {
   control: Control<TFieldValues>
   name: TName
+  rules?: RegisterOptions<TFieldValues, TName>
   fieldClassName?: string
   id?: string
 }
@@ -226,6 +227,7 @@ function FormInput<
     <Controller
       control={props.control}
       name={props.name}
+      rules={props.rules}
       render={({ field, fieldState }) => {
         const error = fieldState.error?.message
 

package/vendor/src/components/form/form-textarea.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Controller, type Control, type FieldPath, type FieldValues } from "react-hook-form"
+import { Controller, type Control, type FieldPath, type FieldValues, type RegisterOptions } from "react-hook-form"
 
 import { FormFieldShell, type FormFieldShellControlProps } from "@/components/form/form-field-shell"
 import { Textarea } from "@/components/ui/textarea"
@@ -9,10 +9,11 @@ export type FormTextareaProps<
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = Omit<React.ComponentProps<typeof Textarea>, "name" | "value" | "defaultValue"> &
   FormFieldShellControlProps & {
-    control: Control<TFieldValues>
-    name: TName
-    fieldClassName?: string
-    transformIn?: (value: unknown) => string | number | readonly string[] | undefined
+    control: Control<TFieldValues>
+    name: TName
+    rules?: RegisterOptions<TFieldValues, TName>
+    fieldClassName?: string
+    transformIn?: (value: unknown) => string | number | readonly string[] | undefined
     transformOut?: (event: React.ChangeEvent<HTMLTextAreaElement>) => unknown
   }
 
@@ -20,9 +21,10 @@ function FormTextarea<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
-  control,
-  name,
-  label,
+  control,
+  name,
+  rules,
+  label,
   description,
   required,
   className,
@@ -50,10 +52,11 @@ function FormTextarea<
   const textareaId = id ?? name
 
   return (
-    <Controller
-      control={control}
-      name={name}
-      render={({ field, fieldState }) => (
+    <Controller
+      control={control}
+      name={name}
+      rules={rules}
+      render={({ field, fieldState }) => (
         <FormFieldShell
           label={label}
           description={description}

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

@@ -282,7 +282,7 @@ function getCachedOptionGroups<
   return entry.groups
 }
 
-function setCachedOptionGroups<
+function setCachedOptionGroups<
   TValue extends string,
   TData,
   TOption extends AsyncSelectOption<TValue, TData>,
@@ -291,11 +291,15 @@ function setCachedOptionGroups<
   key: string,
   groups: AsyncSelectOptionGroup<TValue, TData, TOption>[]
 ) {
-  cache.set(key, {
-    groups,
-    createdAt: Date.now(),
-  })
-}
+  cache.set(key, {
+    groups,
+    createdAt: Date.now(),
+  })
+}
+
+function normalizeAsyncSearch(search: string) {
+  return search.trim().toLowerCase()
+}
 
 function AsyncStateMessage({
   className,
@@ -306,8 +310,9 @@ function AsyncStateMessage({
 }) {
   return (
     <div
+      data-slot="async-select-state"
       className={cn(
-        "rounded-[min(var(--radius-xl),16px)] border border-border/70 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--muted),white_10%),color-mix(in_oklch,var(--muted),transparent_8%))] px-3 py-3 text-sm text-muted-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]",
+        "rounded-[min(var(--radius-xl),16px)] border px-3 py-3 text-sm text-muted-foreground",
         className
       )}
     >
@@ -342,12 +347,14 @@ function AsyncOptionButton<
   onSelect: (option: TOption) => void
 }) {
   return (
-    <button
+    <button
       type="button"
       disabled={option.disabled}
+      data-slot="async-select-option"
+      data-selected={selected || undefined}
+      data-disabled={option.disabled || undefined}
       className={cn(
-        "flex w-full items-start gap-2 rounded-[min(var(--radius-xl),16px)] border border-transparent px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] hover:border-border/70 hover:bg-accent/60 hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50",
-        selected && "border-primary/18 bg-primary/8 text-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.12)]",
+        "flex w-full items-start gap-2 rounded-[min(var(--radius-xl),16px)] border border-transparent px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] disabled:pointer-events-none disabled:opacity-50",
         optionClassName
       )}
       onClick={() => onSelect(option)}
@@ -387,7 +394,8 @@ function AsyncCreateButton({
     <button
       type="button"
       disabled={isCreating}
-      className="flex w-full items-center gap-2 rounded-[min(var(--radius-xl),16px)] border border-dashed border-border/80 px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] hover:border-primary/25 hover:bg-primary/6 hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+      data-slot="async-select-create"
+      className="flex w-full items-center gap-2 rounded-[min(var(--radius-xl),16px)] border border-dashed px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] disabled:pointer-events-none disabled:opacity-50"
       onClick={onCreate}
     >
       <span className="flex size-4 shrink-0 items-center justify-center">
@@ -462,10 +470,14 @@ function AsyncSelect<
   )
   const canClear = clearable && Boolean(value) && !disabled
   const searchTooShort = searchKey.length < minSearchLength
-  const canCreate =
-    !searchTooShort &&
-    Boolean(onCreateOption) &&
-    (showCreateOption ?? defaultShowCreateOption)(search, flatOptions)
+  const canCreate =
+    !searchTooShort &&
+    Boolean(onCreateOption) &&
+    (showCreateOption ?? defaultShowCreateOption)(search, flatOptions)
+
+  React.useEffect(() => {
+    cacheRef.current.clear()
+  }, [loadOptions])
 
   React.useEffect(() => {
     setOptionGroups(resolvedDefaultGroups)
@@ -561,17 +573,36 @@ function AsyncSelect<
     event.stopPropagation()
     clearSelection()
   }
+
+  const handleTriggerKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (disabled) return
+
+    if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+      event.preventDefault()
+      setOpen(true)
+      return
+    }
+
+    if ((event.key === "Backspace" || event.key === "Delete") && value) {
+      event.preventDefault()
+      clearSelection()
+    }
+  }
 
   const handleCreate = async () => {
     if (!onCreateOption || !search.trim() || searchTooShort) return
 
     setIsCreating(true)
 
-    try {
-      const createdOption = await onCreateOption(search.trim())
-      setOptionGroups((previousGroups) => [{ options: [createdOption] }, ...previousGroups])
-      onValueChange?.(createdOption.value, createdOption)
-      setSearch("")
+    try {
+      const createdOption = await onCreateOption(search.trim())
+      const normalizedSearch = normalizeAsyncSearch(search)
+      setOptionGroups((previousGroups) => [{ options: [createdOption] }, ...previousGroups])
+      if (cacheOptions && normalizedSearch) {
+        setCachedOptionGroups(cacheRef.current, normalizedSearch, [{ options: [createdOption] }])
+      }
+      onValueChange?.(createdOption.value, createdOption)
+      setSearch("")
       setOpen(false)
     } finally {
       setIsCreating(false)
@@ -583,15 +614,17 @@ function AsyncSelect<
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger
           render={
-            <Button
+            <Button
               type="button"
               variant="outline"
               disabled={disabled}
               aria-expanded={open}
+              data-slot="async-select-trigger"
               className={cn(
-                "min-h-11 w-full justify-between border-border/80 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--background),white_12%),var(--background))] shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_1px_0_rgba(255,255,255,0.06)]",
+                "min-h-11 w-full justify-between",
                 triggerClassName
               )}
+              onKeyDown={handleTriggerKeyDown}
             />
           }
         >
@@ -632,18 +665,20 @@ function AsyncSelect<
         </PopoverTrigger>
         <PopoverContent
           align="start"
+          data-slot="async-select-content"
           className={cn(
-            "w-(--anchor-width) gap-3 rounded-[var(--radius-2xl)] border-border/80 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--popover),white_10%),var(--popover))] p-3.5 shadow-[0_24px_80px_rgba(15,23,42,0.18)] backdrop-blur",
+            "w-(--anchor-width) gap-3 rounded-[var(--radius-2xl)] p-3.5",
             contentClassName
           )}
         >
-          <div className="relative">
+          <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" />
             <Input
+              data-slot="async-select-search"
               value={search}
               onChange={(event) => setSearch(event.target.value)}
               placeholder={labels?.searchPlaceholder ?? "Search..."}
-              className={cn("border-border/75 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--background),white_12%),var(--background))] pl-8 shadow-[inset_0_1px_0_rgba(255,255,255,0.12),0_1px_0_rgba(255,255,255,0.05)]", searchClassName)}
+              className={cn("pl-8", searchClassName)}
             />
           </div>
 
@@ -795,7 +830,11 @@ function AsyncMultiSelect<
     (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 canSelectAll = showSelectAll && unselectedVisibleOptions.length > 0 && !isMaxReached
+
+  React.useEffect(() => {
+    cacheRef.current.clear()
+  }, [loadOptions])
 
   React.useEffect(() => {
     setOptionGroups(resolvedDefaultGroups)
@@ -907,7 +946,7 @@ function AsyncMultiSelect<
   }
 
   const handleTagRemoveKeyDown = (event: React.KeyboardEvent<HTMLElement>, option: TOption) => {
-    if (event.key !== "Enter" && event.key !== " ") return
+    if (event.key !== "Enter" && event.key !== " " && event.key !== "Backspace" && event.key !== "Delete") return
 
     event.preventDefault()
     event.stopPropagation()
@@ -915,7 +954,15 @@ function AsyncMultiSelect<
   }
 
   const handleTriggerKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
-    if (disabled || search.length > 0 || values.length === 0) return
+    if (disabled) return
+
+    if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+      event.preventDefault()
+      setOpen(true)
+      return
+    }
+
+    if (search.length > 0 || values.length === 0) return
 
     if (event.key === "Backspace" || event.key === "Delete") {
       event.preventDefault()
@@ -953,17 +1000,21 @@ function AsyncMultiSelect<
 
     setIsCreating(true)
 
-    try {
-      const createdOption = await onCreateOption(search.trim())
-      const nextKnownOptions = mergeUniqueOptions(allKnownOptions, [createdOption])
-      const nextValues = selectedSet.has(createdOption.value)
-        ? values
+    try {
+      const createdOption = await onCreateOption(search.trim())
+      const normalizedSearch = normalizeAsyncSearch(search)
+      const nextKnownOptions = mergeUniqueOptions(allKnownOptions, [createdOption])
+      const nextValues = selectedSet.has(createdOption.value)
+        ? values
         : isMaxReached
           ? values
           : [...values, createdOption.value]
-
-      setOptionGroups((previousGroups) => [{ options: [createdOption] }, ...previousGroups])
-      emitChange(nextValues, nextKnownOptions)
+
+      setOptionGroups((previousGroups) => [{ options: [createdOption] }, ...previousGroups])
+      if (cacheOptions && normalizedSearch) {
+        setCachedOptionGroups(cacheRef.current, normalizedSearch, [{ options: [createdOption] }])
+      }
+      emitChange(nextValues, nextKnownOptions)
       setSearch("")
 
       if (closeOnSelect) {
@@ -984,8 +1035,9 @@ function AsyncMultiSelect<
               variant="outline"
               disabled={disabled}
               aria-expanded={open}
+              data-slot="async-select-trigger"
               className={cn(
-                "min-h-11 w-full justify-between border-border/80 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--background),white_12%),var(--background))] shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_1px_0_rgba(255,255,255,0.06)]",
+                "min-h-11 w-full justify-between",
                 triggerClassName
               )}
               onKeyDown={handleTriggerKeyDown}
@@ -995,10 +1047,11 @@ function AsyncMultiSelect<
           <span className="flex min-w-0 flex-1 flex-wrap gap-1 text-left">
             {currentOptions.length > 0 ? (
               currentOptions.map((option) => (
-                <span
+                <span
                   key={option.value}
+                  data-slot="async-select-tag"
                   className={cn(
-                    "inline-flex max-w-full items-center gap-1 rounded-full border border-border/70 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--muted),white_10%),color-mix(in_oklch,var(--muted),transparent_8%))] px-2 py-1 text-xs text-foreground shadow-[0_1px_0_rgba(255,255,255,0.04)]",
+                    "inline-flex max-w-full items-center gap-1 rounded-full border px-2 py-1 text-xs text-foreground",
                     tagClassName
                   )}
                 >
@@ -1016,6 +1069,7 @@ function AsyncMultiSelect<
                     <span
                       role="button"
                       tabIndex={0}
+                      data-slot="async-select-tag-remove"
                       className="rounded-full text-muted-foreground transition-colors hover:text-foreground"
                       aria-label={`Remove ${getOptionLabelText(option)}`}
                       onClick={(event) => {
@@ -1040,7 +1094,8 @@ function AsyncMultiSelect<
               <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"
+                data-slot="async-select-clear"
+                className="rounded-full border p-1 text-muted-foreground transition-colors hover:text-foreground"
                 aria-label={labels?.clearAll ?? labels?.clear ?? "Clear all"}
                 onClick={handleClear}
                 onKeyDown={(event) => {
@@ -1058,22 +1113,24 @@ function AsyncMultiSelect<
         </PopoverTrigger>
         <PopoverContent
           align="start"
+          data-slot="async-select-content"
           className={cn(
-            "w-(--anchor-width) gap-3 rounded-[var(--radius-2xl)] border-border/80 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--popover),white_10%),var(--popover))] p-3.5 shadow-[0_24px_80px_rgba(15,23,42,0.18)] backdrop-blur",
+            "w-(--anchor-width) gap-3 rounded-[var(--radius-2xl)] p-3.5",
             contentClassName
           )}
         >
-          <div className="relative">
+          <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" />
             <Input
+              data-slot="async-select-search"
               value={search}
               onChange={(event) => setSearch(event.target.value)}
               placeholder={labels?.searchPlaceholder ?? "Search..."}
-              className={cn("border-border/75 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--background),white_12%),var(--background))] pl-8 shadow-[inset_0_1px_0_rgba(255,255,255,0.12),0_1px_0_rgba(255,255,255,0.05)]", searchClassName)}
+              className={cn("pl-8", searchClassName)}
             />
           </div>
 
-          <div className="flex flex-wrap items-center justify-between gap-2 rounded-[min(var(--radius-xl),16px)] border border-border/70 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--muted),white_10%),color-mix(in_oklch,var(--muted),transparent_8%))] 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 rounded-[min(var(--radius-xl),16px)] border px-3 py-2 text-xs text-muted-foreground">
             {hasValue && labels?.selectedCount && <span>{labels.selectedCount(values.length)}</span>}
             {isMaxReached &&
               (renderMaxSelected?.(state) ?? (
@@ -1083,6 +1140,7 @@ function AsyncMultiSelect<
               {canSelectAll && (
                 <button
                   type="button"
+                  data-slot="async-select-meta-action"
                   className="rounded-full border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background"
                   onClick={handleSelectAllVisible}
                 >
@@ -1092,6 +1150,7 @@ function AsyncMultiSelect<
               {canClear && (
                 <button
                   type="button"
+                  data-slot="async-select-meta-action"
                   className="rounded-full border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background"
                   onClick={() => onValueChange?.([], [])}
                 >
@@ -1146,9 +1205,9 @@ function AsyncMultiSelect<
               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 className="sticky top-0 z-10 bg-popover px-2 py-1 text-xs font-medium text-muted-foreground">
+                      <span data-slot="async-select-group-label">{group.label}</span>
+                    </div>
                   )}
                   {group.options.map((option) => (
                     <AsyncOptionButton

package/vendor/src/components/inputs/clearable-input.tsx

@@ -79,6 +79,7 @@ const ClearableInput = React.forwardRef<HTMLInputElement, ClearableInputProps>(
             {canClear && (
               <button
                 type="button"
+                data-slot="clearable-input-clear"
                 aria-label={clearLabel}
                 className="inline-flex size-7 items-center justify-center rounded-full border border-transparent bg-transparent text-muted-foreground/74 transition hover:border-border/60 hover:bg-muted/58 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
                 onClick={clearValue}

package/vendor/src/components/inputs/input-chrome.tsx

@@ -22,7 +22,7 @@ function InputChrome({
     <div
       data-slot="input-chrome"
       className={cn(
-        "flex h-8 w-full min-w-0 items-center rounded-lg border border-input bg-transparent transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50",
+        "flex h-10 w-full min-w-0 items-center rounded-[var(--aui-control-radius,var(--radius-lg))] border border-[color:var(--aui-control-border-strong,var(--input))] bg-[color:var(--aui-control-surface,var(--background))] shadow-[var(--aui-control-shadow,none)] transition-[background-color,border-color,box-shadow] hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] focus-within:border-[color:var(--ring)] focus-within:shadow-[var(--aui-control-shadow,none),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)]",
         className
       )}
       {...props}