@customafk/lunas-ui 0.0.21 → 0.0.22

package/packages/components/ui/multi-select.tsx

@@ -1,155 +1,141 @@
-"use client";
-import React from "react";
-import { Command as CommandPrimitive, useCommandState } from "cmdk";
-import { PlusIcon, X } from "lucide-react";
-
-import {
-  Command,
-  CommandGroup,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-} from "@/components/ui/command";
-import { cn } from "@/lib/utils";
-
-import { Button } from "./button";
+'use client'
+import React from 'react'
+import { Command as CommandPrimitive, useCommandState } from 'cmdk'
+import { PlusIcon, X } from 'lucide-react'
+
+import { Command, CommandGroup, CommandItem, CommandList, CommandSeparator } from '@/components/ui/command'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
 
 export interface Option {
-  value: string;
-  label: string;
-  disable?: boolean;
+  value: string
+  label: string
+  disable?: boolean
   /** fixed option that can‘t be removed. */
-  fixed?: boolean;
+  fixed?: boolean
   /** Group the options by providing key. */
-  [key: string]: string | boolean | undefined;
+  [key: string]: string | boolean | undefined
 }
 interface GroupOption {
-  [key: string]: Option[];
+  [key: string]: Option[]
 }
 
 interface MultipleSelectorProps {
-  value?: Option[];
-  defaultOptions?: Option[];
+  value?: Option[]
+  defaultOptions?: Option[]
   /** manually controlled options */
-  options?: Option[];
-  placeholder?: string;
+  options?: Option[]
+  placeholder?: string
   /** Loading component. */
-  loadingIndicator?: React.ReactNode;
+  loadingIndicator?: React.ReactNode
   /** Empty component. */
-  emptyIndicator?: React.ReactNode;
+  emptyIndicator?: React.ReactNode
   /** Debounce time for async search. Only work with `onSearch`. */
-  delay?: number;
+  delay?: number
   /**
    * Only work with `onSearch` prop. Trigger search when `onFocus`.
    * For example, when user click on the input, it will trigger the search to get initial options.
    **/
-  triggerSearchOnFocus?: boolean;
+  triggerSearchOnFocus?: boolean
   /** async search */
-  onSearch?: (value: string) => Promise<Option[]>;
+  onSearch?: (value: string) => Promise<Option[]>
   /**
    * sync search. This search will not showing loadingIndicator.
    * The rest props are the same as async search.
    * i.e.: creatable, groupBy, delay.
    **/
-  onSearchSync?: (value: string) => Option[];
-  onChange?: (options: Option[]) => void;
+  onSearchSync?: (value: string) => Option[]
+  onChange?: (options: Option[]) => void
   /** Limit the maximum number of selected options. */
-  maxSelected?: number;
+  maxSelected?: number
   /** When the number of selected options exceeds the limit, the onMaxSelected will be called. */
-  onMaxSelected?: (maxLimit: number) => void;
+  onMaxSelected?: (maxLimit: number) => void
   /** Hide the placeholder when there are options selected. */
-  hidePlaceholderWhenSelected?: boolean;
-  disabled?: boolean;
+  hidePlaceholderWhenSelected?: boolean
+  disabled?: boolean
   /** Group the options base on provided key. */
-  groupBy?: string;
-  className?: string;
-  badgeClassName?: string;
+  groupBy?: string
+  className?: string
+  badgeClassName?: string
   /**
    * First item selected is a default behavior by cmdk. That is why the default is true.
    * This is a workaround solution by add a dummy item.
    *
    * @reference: https://github.com/pacocoursey/cmdk/issues/171
    */
-  selectFirstItem?: boolean;
+  selectFirstItem?: boolean
   /** Allow user to create option when there is no option matched. */
-  creatable?: boolean;
+  creatable?: boolean
   /** Props of `Command` */
-  commandProps?: React.ComponentPropsWithoutRef<typeof Command>;
+  commandProps?: React.ComponentPropsWithoutRef<typeof Command>
   /** Props of `CommandInput` */
-  inputProps?: Omit<
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>,
-    "value" | "placeholder" | "disabled"
-  >;
+  inputProps?: Omit<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>, 'value' | 'placeholder' | 'disabled'>
   /** hide the clear all button. */
-  hideClearAllButton?: boolean;
+  hideClearAllButton?: boolean
 
   /**  Add new item event for select with search */
-  onAddNewItem?: () => void;
+  onAddNewItem?: () => void
 }
 
 export interface MultipleSelectorRef {
-  selectedValue: Option[];
-  input: HTMLInputElement;
-  focus: () => void;
-  reset: () => void;
+  selectedValue: Option[]
+  input: HTMLInputElement
+  focus: () => void
+  reset: () => void
 }
 
 // eslint-disable-next-line react-refresh/only-export-components
 export function useDebounce<T>(value: T, delay?: number): T {
-  const [debouncedValue, setDebouncedValue] = React.useState<T>(value);
+  const [debouncedValue, setDebouncedValue] = React.useState<T>(value)
 
   React.useEffect(() => {
-    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500)
 
     return () => {
-      clearTimeout(timer);
-    };
-  }, [value, delay]);
+      clearTimeout(timer)
+    }
+  }, [value, delay])
 
-  return debouncedValue;
+  return debouncedValue
 }
 
 function transToGroupOption(options: Option[], groupBy?: string) {
   if (options.length === 0) {
-    return {};
+    return {}
   }
   if (!groupBy) {
     return {
-      "": options,
-    };
+      '': options,
+    }
   }
 
-  const groupOption: GroupOption = {};
+  const groupOption: GroupOption = {}
   options.forEach((option) => {
-    const key = (option[groupBy] as string) || "";
+    const key = (option[groupBy] as string) || ''
     if (!groupOption[key]) {
-      groupOption[key] = [];
+      groupOption[key] = []
     }
-    groupOption[key].push(option);
-  });
-  return groupOption;
+    groupOption[key].push(option)
+  })
+  return groupOption
 }
 
 function removePickedOption(groupOption: GroupOption, picked: Option[]) {
-  const cloneOption = JSON.parse(JSON.stringify(groupOption)) as GroupOption;
+  const cloneOption = JSON.parse(JSON.stringify(groupOption)) as GroupOption
 
   for (const [key, value] of Object.entries(cloneOption)) {
-    cloneOption[key] = value.filter(
-      (val) => !picked.find((p) => p.value === val.value),
-    );
+    cloneOption[key] = value.filter((val) => !picked.find((p) => p.value === val.value))
   }
-  return cloneOption;
+  return cloneOption
 }
 
 function isOptionsExist(groupOption: GroupOption, targetOption: Option[]) {
   for (const [, value] of Object.entries(groupOption)) {
-    if (
-      value.some((option) => targetOption.find((p) => p.value === option.value))
-    ) {
-      return true;
+    if (value.some((option) => targetOption.find((p) => p.value === option.value))) {
+      return true
     }
   }
-  return false;
+  return false
 }
 
 /**
@@ -158,31 +144,17 @@ function isOptionsExist(groupOption: GroupOption, targetOption: Option[]) {
  *
  * @reference: https://github.com/hsuanyi-chou/shadcn-ui-expansions/issues/34#issuecomment-1949561607
  **/
-const CommandEmpty = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<typeof CommandPrimitive.Empty>
->(({ className, ...props }, forwardedRef) => {
-  const render = useCommandState((state) => state.filtered.count === 0);
-
-  if (!render) return null;
-
-  return (
-    <div
-      ref={forwardedRef}
-      className={cn("px-2 py-4 text-center text-sm", className)}
-      cmdk-empty=""
-      role="presentation"
-      {...props}
-    />
-  );
-});
-
-CommandEmpty.displayName = "CommandEmpty";
-
-const MultipleSelector = React.forwardRef<
-  MultipleSelectorRef,
-  MultipleSelectorProps
->(
+const CommandEmpty = React.forwardRef<HTMLDivElement, React.ComponentProps<typeof CommandPrimitive.Empty>>(({ className, ...props }, forwardedRef) => {
+  const render = useCommandState((state) => state.filtered.count === 0)
+
+  if (!render) return null
+
+  return <div ref={forwardedRef} className={cn('px-2 py-4 text-center text-sm', className)} cmdk-empty="" role="presentation" {...props} />
+})
+
+CommandEmpty.displayName = 'CommandEmpty'
+
+export const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorProps>(
   (
     {
       value,
@@ -212,20 +184,18 @@ const MultipleSelector = React.forwardRef<
     }: MultipleSelectorProps,
     ref: React.Ref<MultipleSelectorRef>,
   ) => {
-    const inputRef = React.useRef<HTMLInputElement>(null);
-    const dropdownRef = React.useRef<HTMLDivElement>(null); // Added this
+    const inputRef = React.useRef<HTMLInputElement>(null)
+    const dropdownRef = React.useRef<HTMLDivElement>(null) // Added this
 
-    const [open, setOpen] = React.useState(false);
-    const [onScrollbar, setOnScrollbar] = React.useState(false);
-    const [isLoading, setIsLoading] = React.useState(false);
+    const [open, setOpen] = React.useState(false)
+    const [onScrollbar, setOnScrollbar] = React.useState(false)
+    const [isLoading, setIsLoading] = React.useState(false)
 
-    const [selected, setSelected] = React.useState<Option[]>(value || []);
-    const [options, setOptions] = React.useState<GroupOption>(
-      transToGroupOption(arrayDefaultOptions, groupBy),
-    );
-    const [inputValue, setInputValue] = React.useState("");
+    const [selected, setSelected] = React.useState<Option[]>(value || [])
+    const [options, setOptions] = React.useState<GroupOption>(transToGroupOption(arrayDefaultOptions, groupBy))
+    const [inputValue, setInputValue] = React.useState('')
 
-    const debouncedSearchTerm = useDebounce(inputValue, delay || 500);
+    const debouncedSearchTerm = useDebounce(inputValue, delay || 500)
 
     React.useImperativeHandle(
       ref,
@@ -236,145 +206,134 @@ const MultipleSelector = React.forwardRef<
         reset: () => setSelected([]),
       }),
       [selected],
-    );
-
-    const handleClickOutside = React.useCallback(
-      (event: MouseEvent | TouchEvent) => {
-        if (
-          dropdownRef.current &&
-          !dropdownRef.current.contains(event.target as Node) &&
-          inputRef.current &&
-          !inputRef.current.contains(event.target as Node)
-        ) {
-          setOpen(false);
-          inputRef.current.blur();
-        }
-      },
-      [],
-    );
+    )
+
+    const handleClickOutside = React.useCallback((event: MouseEvent | TouchEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node) && inputRef.current && !inputRef.current.contains(event.target as Node)) {
+        setOpen(false)
+        inputRef.current.blur()
+      }
+    }, [])
 
     const handleUnselect = React.useCallback(
       (option: Option) => {
-        const newOptions = selected.filter((s) => s.value !== option.value);
-        setSelected(newOptions);
-        onChange?.(newOptions);
+        const newOptions = selected.filter((s) => s.value !== option.value)
+        setSelected(newOptions)
+        onChange?.(newOptions)
       },
       [onChange, selected],
-    );
+    )
 
     const handleKeyDown = React.useCallback(
       (e: React.KeyboardEvent<HTMLDivElement>) => {
-        const input = inputRef.current;
-        if (!input) return;
+        const input = inputRef.current
+        if (!input) return
 
-        if (e.key === "Delete" || e.key === "Backspace") {
-          if (input.value === "" && selected.length > 0) {
-            const lastSelectOption = selected[selected.length - 1];
+        if (e.key === 'Delete' || e.key === 'Backspace') {
+          if (input.value === '' && selected.length > 0) {
+            const lastSelectOption = selected[selected.length - 1]
             // If last item is fixed, we should not remove it.
             if (!lastSelectOption.fixed) {
-              handleUnselect(selected[selected.length - 1]);
+              handleUnselect(selected[selected.length - 1])
             }
           }
         }
 
         // This is not a default behavior of the <input /> field
-        if (e.key === "Escape") {
-          input.blur();
+        if (e.key === 'Escape') {
+          input.blur()
         }
       },
       [handleUnselect, selected],
-    );
+    )
 
     React.useEffect(() => {
       if (open) {
-        document.addEventListener("mousedown", handleClickOutside);
-        document.addEventListener("touchend", handleClickOutside);
+        document.addEventListener('mousedown', handleClickOutside)
+        document.addEventListener('touchend', handleClickOutside)
       } else {
-        document.removeEventListener("mousedown", handleClickOutside);
-        document.removeEventListener("touchend", handleClickOutside);
+        document.removeEventListener('mousedown', handleClickOutside)
+        document.removeEventListener('touchend', handleClickOutside)
       }
 
       return () => {
-        document.removeEventListener("mousedown", handleClickOutside);
-        document.removeEventListener("touchend", handleClickOutside);
-      };
+        document.removeEventListener('mousedown', handleClickOutside)
+        document.removeEventListener('touchend', handleClickOutside)
+      }
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [open]);
+    }, [open])
 
     React.useEffect(() => {
       if (value) {
-        setSelected(value);
+        setSelected(value)
       }
-    }, [value]);
+    }, [value])
 
     React.useEffect(() => {
       /** If `onSearch` is provided, do not trigger options updated. */
       if (!arrayOptions || onSearch) {
-        return;
+        return
       }
-      const newOption = transToGroupOption(arrayOptions || [], groupBy);
+      const newOption = transToGroupOption(arrayOptions || [], groupBy)
       if (JSON.stringify(newOption) !== JSON.stringify(options)) {
-        setOptions(newOption);
+        setOptions(newOption)
       }
-    }, [arrayDefaultOptions, arrayOptions, groupBy, onSearch, options]);
+    }, [arrayDefaultOptions, arrayOptions, groupBy, onSearch, options])
 
     React.useEffect(() => {
       /** sync search */
 
       const doSearchSync = () => {
-        const res = onSearchSync?.(debouncedSearchTerm);
-        setOptions(transToGroupOption(res || [], groupBy));
-      };
+        const res = onSearchSync?.(debouncedSearchTerm)
+        setOptions(transToGroupOption(res || [], groupBy))
+      }
 
       const exec = async () => {
-        if (!onSearchSync || !open) return;
+        if (!onSearchSync || !open) return
 
         if (triggerSearchOnFocus) {
-          doSearchSync();
+          doSearchSync()
         }
 
         if (debouncedSearchTerm) {
-          doSearchSync();
+          doSearchSync()
         }
-      };
+      }
 
-      void exec();
+      void exec()
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus]);
+    }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus])
 
     React.useEffect(() => {
       /** async search */
 
       const doSearch = async () => {
-        setIsLoading(true);
-        const res = await onSearch?.(debouncedSearchTerm);
-        setOptions(transToGroupOption(res || [], groupBy));
-        setIsLoading(false);
-      };
+        setIsLoading(true)
+        const res = await onSearch?.(debouncedSearchTerm)
+        setOptions(transToGroupOption(res || [], groupBy))
+        setIsLoading(false)
+      }
 
       const exec = async () => {
-        if (!onSearch || !open) return;
+        if (!onSearch || !open) return
 
         if (triggerSearchOnFocus) {
-          await doSearch();
+          await doSearch()
         }
 
         if (debouncedSearchTerm) {
-          await doSearch();
+          await doSearch()
         }
-      };
+      }
 
-      void exec();
+      void exec()
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus]);
+    }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus])
 
     const CreatableItem = () => {
-      if (!creatable) return undefined;
-      if (
-        isOptionsExist(options, [{ value: inputValue, label: inputValue }]) ||
-        selected.find((s) => s.value === inputValue)
-      ) {
-        return undefined;
+      if (!creatable) return undefined
+      if (isOptionsExist(options, [{ value: inputValue, label: inputValue }]) || selected.find((s) => s.value === inputValue)) {
+        return undefined
       }
 
       const Item = (
@@ -382,39 +341,39 @@ const MultipleSelector = React.forwardRef<
           value={inputValue}
           className="cursor-pointer"
           onMouseDown={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
+            e.preventDefault()
+            e.stopPropagation()
           }}
           onSelect={(value: string) => {
             if (selected.length >= maxSelected) {
-              onMaxSelected?.(selected.length);
-              return;
+              onMaxSelected?.(selected.length)
+              return
             }
-            setInputValue("");
-            const newOptions = [...selected, { value, label: value }];
-            setSelected(newOptions);
-            onChange?.(newOptions);
+            setInputValue('')
+            const newOptions = [...selected, { value, label: value }]
+            setSelected(newOptions)
+            onChange?.(newOptions)
           }}
         >
           {`Create "${inputValue}"`}
         </CommandItem>
-      );
+      )
 
       // For normal creatable
       if (!onSearch && inputValue.length > 0) {
-        return Item;
+        return Item
       }
 
       // For async search creatable. avoid showing creatable item before loading at first.
       if (onSearch && debouncedSearchTerm.length > 0 && !isLoading) {
-        return Item;
+        return Item
       }
 
-      return undefined;
-    };
+      return undefined
+    }
 
     const EmptyItem = React.useCallback(() => {
-      if (!emptyIndicator) return undefined;
+      if (!emptyIndicator) return undefined
 
       // For async search that showing emptyIndicator
       if (onSearch && !creatable && Object.keys(options).length === 0) {
@@ -422,66 +381,58 @@ const MultipleSelector = React.forwardRef<
           <CommandItem value="-" disabled>
             {emptyIndicator}
           </CommandItem>
-        );
+        )
       }
 
-      return <CommandEmpty>{emptyIndicator}</CommandEmpty>;
-    }, [creatable, emptyIndicator, onSearch, options]);
+      return <CommandEmpty>{emptyIndicator}</CommandEmpty>
+    }, [creatable, emptyIndicator, onSearch, options])
 
-    const selectables = React.useMemo<GroupOption>(
-      () => removePickedOption(options, selected),
-      [options, selected],
-    );
+    const selectables = React.useMemo<GroupOption>(() => removePickedOption(options, selected), [options, selected])
 
     /** Avoid Creatable Selector freezing or lagging when paste a long string. */
     const commandFilter = React.useCallback(() => {
       if (commandProps?.filter) {
-        return commandProps.filter;
+        return commandProps.filter
       }
 
       if (creatable) {
         return (value: string, search: string) => {
-          return value.toLowerCase().includes(search.toLowerCase()) ? 1 : -1;
-        };
+          return value.toLowerCase().includes(search.toLowerCase()) ? 1 : -1
+        }
       }
       // Using default filter in `cmdk`. We don&lsquo;t have to provide it.
-      return undefined;
-    }, [creatable, commandProps?.filter]);
+      return undefined
+    }, [creatable, commandProps?.filter])
 
     return (
       <Command
         ref={dropdownRef}
         {...commandProps}
         onKeyDown={(e) => {
-          handleKeyDown(e);
-          commandProps?.onKeyDown?.(e);
+          handleKeyDown(e)
+          commandProps?.onKeyDown?.(e)
         }}
-        className={cn(
-          "h-auto overflow-visible bg-transparent",
-          commandProps?.className,
-        )}
-        shouldFilter={
-          commandProps?.shouldFilter !== undefined
-            ? commandProps.shouldFilter
-            : !onSearch
-        } // When onSearch is provided, we don&lsquo;t want to filter the options. You can still override it.
+        className={cn('h-auto overflow-visible bg-transparent', commandProps?.className)}
+        shouldFilter={commandProps?.shouldFilter !== undefined ? commandProps.shouldFilter : !onSearch} // When onSearch is provided, we don&lsquo;t want to filter the options. You can still override it.
         filter={commandFilter()}
       >
         <div
           className={cn(
-            "border-input focus-within:border-primary focus-within:ring-ring relative rounded-md border text-sm transition-shadow focus-within:ring-4 focus-within:outline-hidden",
-            "has-disabled:bg-muted",
-            "has-disabled:text-muted-foreground",
-            {
-              "p-1": selected.length !== 0,
-              "cursor-text": !disabled && selected.length !== 0,
-            },
-            !hideClearAllButton && "pe-9",
+            'border-border-weak relative rounded-md border text-sm transition-shadow',
+            'focus-within:border-primary',
+            'focus-within:ring-primary-weak',
+            'focus-within:ring-4',
+            'focus-within:outline-hidden',
+            'has-disabled:bg-muted',
+            'has-disabled:text-muted-foreground',
+            selected.length !== 0 && 'p-1',
+            !disabled && selected.length !== 0 && 'cursor-text',
+            !hideClearAllButton && 'pe-9',
             className,
           )}
           onClick={() => {
-            if (disabled) return;
-            inputRef?.current?.focus();
+            if (disabled) return
+            inputRef?.current?.focus()
           }}
         >
           <div className="flex flex-wrap gap-1">
@@ -490,7 +441,14 @@ const MultipleSelector = React.forwardRef<
                 <div
                   key={option.value}
                   className={cn(
-                    "animate-fadeIn bg-background text-secondary-foreground hover:bg-background relative inline-flex h-7 cursor-default items-center rounded-md border border-solid ps-2 pe-7 pl-2 text-xs font-medium transition-all disabled:cursor-not-allowed disabled:opacity-50 data-fixed:pe-2",
+                    'animate-fadeIn',
+                    'bg-background',
+                    'hover:bg-background',
+                    'border-border-weak border border-solid',
+                    'text-text-positive-weak relative inline-flex h-7 cursor-default items-center rounded-md ps-2 pe-7 pl-2 text-xs font-medium transition-all',
+                    'disabled:cursor-not-allowed',
+                    'disabled:opacity-50',
+                    'data-fixed:pe-2',
                     badgeClassName,
                   )}
                   data-fixed={option.fixed}
@@ -501,21 +459,20 @@ const MultipleSelector = React.forwardRef<
                     type="button"
                     disabled={disabled || option.fixed}
                     className={cn(
-                      "text-muted-foreground/80 absolute -inset-y-px -end-px flex size-7 items-center justify-center rounded-e-lg border border-transparent p-0 outline-0 transition-colors",
-                      "hover:text-foreground",
-                      "focus-visible:outline",
-                      "focus-visible:outline-2",
-                      "focus-visible:outline-ring/70",
-                      "disabled:hover:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+                      'text-text-positive-muted absolute -inset-y-px -end-px flex size-7 items-center justify-center rounded-e-lg border border-transparent p-0 outline-0 transition-colors',
+                      'hover:text-foreground',
+                      'focus-visible:outline',
+                      'focus-visible:outline-2',
+                      'focus-visible:outline-primary-weak',
+                      'disabled:hover:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
                     )}
                     onKeyDown={(e) => {
-                      if (e.key === "Enter") {
-                        handleUnselect(option);
-                      }
+                      if (e.key !== 'Enter') return
+                      handleUnselect(option)
                     }}
                     onMouseDown={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
+                      e.preventDefault()
+                      e.stopPropagation()
                     }}
                     onClick={() => handleUnselect(option)}
                     aria-label="Remove"
@@ -523,7 +480,7 @@ const MultipleSelector = React.forwardRef<
                     <X size={14} strokeWidth={2} aria-hidden="true" />
                   </button>
                 </div>
-              );
+              )
             })}
             {/* Avoid having the "Search" Icon */}
             <CommandPrimitive.Input
@@ -532,34 +489,30 @@ const MultipleSelector = React.forwardRef<
               value={inputValue}
               disabled={disabled}
               onValueChange={(value) => {
-                setInputValue(value);
-                inputProps?.onValueChange?.(value);
+                setInputValue(value)
+                inputProps?.onValueChange?.(value)
               }}
               onBlur={(event) => {
                 if (!onScrollbar) {
-                  setOpen(false);
+                  setOpen(false)
                 }
-                inputProps?.onBlur?.(event);
+                inputProps?.onBlur?.(event)
               }}
               onFocus={(event) => {
-                setOpen(true);
+                setOpen(true)
                 if (triggerSearchOnFocus) {
-                  onSearch?.(debouncedSearchTerm);
+                  onSearch?.(debouncedSearchTerm)
                 }
-                inputProps?.onFocus?.(event);
+                inputProps?.onFocus?.(event)
               }}
-              placeholder={
-                hidePlaceholderWhenSelected && selected.length !== 0
-                  ? ""
-                  : placeholder
-              }
+              placeholder={hidePlaceholderWhenSelected && selected.length !== 0 ? '' : placeholder}
               className={cn(
-                "placeholder:text-muted-foreground flex-1 bg-transparent outline-hidden",
-                "disabled:placeholder:text-transparent",
+                'placeholder:text-text-positive-muted flex-1 bg-transparent outline-hidden',
+                'disabled:placeholder:text-transparent',
                 {
-                  "w-full": hidePlaceholderWhenSelected,
-                  "px-3 py-2": selected.length === 0,
-                  "ml-1": selected.length !== 0,
+                  'w-full': hidePlaceholderWhenSelected,
+                  'px-3 py-2': selected.length === 0,
+                  'ml-1': selected.length !== 0,
                 },
                 inputProps?.className,
               )}
@@ -567,21 +520,16 @@ const MultipleSelector = React.forwardRef<
             <button
               type="button"
               onClick={() => {
-                setSelected(selected.filter((s) => s.fixed));
-                onChange?.(selected.filter((s) => s.fixed));
+                setSelected(selected.filter((s) => s.fixed))
+                onChange?.(selected.filter((s) => s.fixed))
               }}
               className={cn(
-                "text-muted-foreground/80",
-                "absolute end-0 top-0 flex size-9 items-center justify-center rounded-lg border border-transparent transition-colors",
-                "focus-visible:outline-2",
-                "hover:text-foreground",
-                "focus-visible:outline-ring/70",
-                (hideClearAllButton ||
-                  disabled ||
-                  selected.length < 1 ||
-                  selected.filter(({ fixed }) => fixed).length ===
-                    selected.length) &&
-                  "hidden",
+                'text-muted-foreground/80',
+                'absolute end-0 top-0 flex size-9 items-center justify-center rounded-lg border border-transparent transition-colors',
+                'focus-visible:outline-2',
+                'hover:text-text-positive',
+                'focus-visible:outline-primary-weak',
+                (hideClearAllButton || disabled || selected.length < 1 || selected.filter(({ fixed }) => fixed).length === selected.length) && 'hidden',
               )}
               aria-label="Clear all"
             >
@@ -592,40 +540,36 @@ const MultipleSelector = React.forwardRef<
         <div className="relative">
           <div
             className={cn(
-              "border-input absolute top-2 z-10 w-full overflow-hidden rounded-lg border shadow-sm",
-              "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-              !open && "hidden",
+              'shadow-dropdown absolute top-2 z-10 w-full overflow-hidden rounded-lg',
+              'data-[state=open]:animate-in',
+              'data-[state=closed]:animate-out',
+              'data-[state=closed]:fade-out-0',
+              'data-[state=open]:fade-in-0',
+              'data-[state=closed]:zoom-out-95',
+              'data-[state=open]:zoom-in-95',
+              !open && 'hidden',
             )}
-            data-state={open ? "open" : "closed"}
+            data-state={open ? 'open' : 'closed'}
           >
             {open && (
               <CommandList
-                className="bg-popover text-popover-foreground shadow-lg outline-hidden"
+                className="shadow-lg outline-hidden"
                 onMouseLeave={() => {
-                  setOnScrollbar(false);
+                  setOnScrollbar(false)
                 }}
                 onMouseEnter={() => {
-                  setOnScrollbar(true);
+                  setOnScrollbar(true)
                 }}
                 onMouseUp={() => {
-                  inputRef?.current?.focus();
+                  inputRef?.current?.focus()
                 }}
               >
                 {onAddNewItem && (
                   <>
                     <CommandSeparator />
                     <CommandGroup>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        className="w-full font-normal [&_div]:justify-start"
-                        onClick={onAddNewItem}
-                      >
-                        <PlusIcon
-                          size={14}
-                          className="-ms-2 opacity-60"
-                          aria-hidden="true"
-                        />
+                      <Button type="button" variant="ghost" className="w-full font-normal [&_div]:justify-start" onClick={onAddNewItem}>
+                        <PlusIcon size={14} className="opacity-60" aria-hidden="true" />
                         Thêm mới
                       </Button>
                     </CommandGroup>
@@ -637,15 +581,9 @@ const MultipleSelector = React.forwardRef<
                   <React.Fragment>
                     {EmptyItem()}
                     {CreatableItem()}
-                    {!selectFirstItem && (
-                      <CommandItem value="-" className="hidden" />
-                    )}
+                    {!selectFirstItem && <CommandItem value="-" className="hidden" />}
                     {Object.entries(selectables).map(([key, dropdowns]) => (
-                      <CommandGroup
-                        key={key}
-                        heading={key}
-                        className="h-full overflow-auto"
-                      >
+                      <CommandGroup key={key} heading={key} className="h-full overflow-auto">
                         {dropdowns.map((option) => {
                           return (
                             <CommandItem
@@ -653,28 +591,24 @@ const MultipleSelector = React.forwardRef<
                               value={option.value}
                               disabled={option.disable}
                               onMouseDown={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
+                                e.preventDefault()
+                                e.stopPropagation()
                               }}
                               onSelect={() => {
                                 if (selected.length >= maxSelected) {
-                                  onMaxSelected?.(selected.length);
-                                  return;
+                                  onMaxSelected?.(selected.length)
+                                  return
                                 }
-                                setInputValue("");
-                                const newOptions = [...selected, option];
-                                setSelected(newOptions);
-                                onChange?.(newOptions);
+                                const newOptions = [...selected, option]
+                                setInputValue('')
+                                setSelected(newOptions)
+                                onChange?.(newOptions)
                               }}
-                              className={cn(
-                                "cursor-pointer",
-                                option.disable &&
-                                  "cursor-not-allowed opacity-50",
-                              )}
+                              className={cn('cursor-pointer', option.disable && 'cursor-not-allowed opacity-50')}
                             >
                               {option.label}
                             </CommandItem>
-                          );
+                          )
                         })}
                       </CommandGroup>
                     ))}
@@ -685,9 +619,8 @@ const MultipleSelector = React.forwardRef<
           </div>
         </div>
       </Command>
-    );
+    )
   },
-);
+)
 
-MultipleSelector.displayName = "MultipleSelector";
-export default MultipleSelector;
+MultipleSelector.displayName = 'MultipleSelector'