@turtleclub/ui 0.7.0-beta.1 → 0.7.0-beta.10

package/src/components/molecules/swap-input.tsx

@@ -6,8 +6,10 @@ import { Chip } from "@/components/ui/chip";
 import { TokenSelector, type Token } from "./token-selector";
 import { BaseSelector } from "./widget/base-selector";
 
-interface SwapInputProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+interface SwapInputProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "onChange"
+> {
   value?: string;
   tokens: Token[];
   selectedToken?: string;
@@ -24,6 +26,8 @@ interface SwapInputProps
   useCustomTokenSelector?: boolean;
   selectedTokenData?: Token | null;
   onCustomTokenSelectorClick?: () => void;
+  showTokenSelectorBalance?: boolean;
+  showInputBalance?: boolean;
 }
 
 const SwapInput = React.forwardRef<HTMLDivElement, SwapInputProps>(
@@ -46,6 +50,8 @@ const SwapInput = React.forwardRef<HTMLDivElement, SwapInputProps>(
       useCustomTokenSelector = false,
       selectedTokenData,
       onCustomTokenSelectorClick,
+      showTokenSelectorBalance = true,
+      showInputBalance = true,
       ...props
     },
     ref,
@@ -127,40 +133,45 @@ const SwapInput = React.forwardRef<HTMLDivElement, SwapInputProps>(
                 size="sm"
                 variant="default"
                 className="rounded-full"
+                showBalance={showTokenSelectorBalance}
               />
             ))}
         </div>
 
         {/* Bottom row: USD value and balance with MAX */}
-        <div className="text-muted-foreground flex items-center justify-between text-sm">
-          <div>
-            {usdValue ? (
-              <span>≈ {usdValue}</span>
-            ) : value ? (
-              <span className="text-destructive/50">Insufficient balance</span>
-            ) : null}
+        {showInputBalance && (
+          <div className="text-muted-foreground flex items-center justify-between text-sm">
+            <div>
+              {usdValue ? (
+                <span>≈ {usdValue}</span>
+              ) : value ? (
+                <span className="text-destructive/50">
+                  Insufficient balance
+                </span>
+              ) : null}
+            </div>
+            <div className="flex items-center gap-2">
+              {balance && (
+                <span className="text-sm">
+                  Balance: {balance} {currentToken?.symbol || ""}
+                </span>
+              )}
+              {onMaxClick && (
+                <Chip
+                  variant="default"
+                  size="xs"
+                  onClick={onMaxClick}
+                  className={cn(
+                    "hover:bg-primary hover:text-primary-foreground h-5 cursor-pointer px-2 py-0.5 text-xs transition-colors",
+                    disabled && "cursor-not-allowed opacity-50",
+                  )}
+                >
+                  MAX
+                </Chip>
+              )}
+            </div>
           </div>
-          <div className="flex items-center gap-2">
-            {balance && (
-              <span className="text-sm">
-                Balance: {balance} {currentToken?.symbol || ""}
-              </span>
-            )}
-            {onMaxClick && (
-              <Chip
-                variant="default"
-                size="xs"
-                onClick={onMaxClick}
-                className={cn(
-                  "hover:bg-primary hover:text-primary-foreground h-5 cursor-pointer px-2 py-0.5 text-xs transition-colors",
-                  disabled && "cursor-not-allowed opacity-50",
-                )}
-              >
-                MAX
-              </Chip>
-            )}
-          </div>
-        </div>
+        )}
       </Card>
     );
   },

package/src/components/molecules/token-selector.tsx

@@ -54,7 +54,13 @@ const TokenSelector = ({
   const getTokenIcon = (token: Token) => {
     if (token.icon) return token.icon;
     if (token.logoUrl) {
-      return <img src={token.logoUrl} alt={token.symbol} className="size-full rounded-full" />;
+      return (
+        <img
+          src={token.logoUrl}
+          alt={token.symbol}
+          className="size-full rounded-full"
+        />
+      );
     }
     return null;
   };

package/src/components/ui/avatar.tsx

@@ -21,19 +21,13 @@ function Avatar({
   return (
     <AvatarPrimitive.Root
       data-slot="avatar"
-      className={cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className,
-      )}
+      className={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
       {...props}
     />
   );
 }
 
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
   return (
     <AvatarPrimitive.Image
       data-slot="avatar-image"
@@ -50,10 +44,7 @@ function AvatarFallback({
   return (
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
-      className={cn(
-        "bg-muted flex size-full items-center justify-center rounded-full",
-        className,
-      )}
+      className={cn("bg-muted flex size-full items-center justify-center rounded-full", className)}
       {...props}
     />
   );
@@ -65,14 +56,16 @@ function TurtleAvatar({
   fallback,
   ...rest
 }: AvatarPrimitive.AvatarProps & {
-  src: string;
-  alt: string;
+  src?: string;
+  alt?: string;
   fallback?: React.ReactNode;
 }) {
   return (
     <Avatar {...rest}>
       <AvatarImage src={src} alt={alt} />
-      <AvatarFallback>{fallback}</AvatarFallback>
+      <AvatarFallback className="border-gradient-primary bg-primary/10 opacity-50">
+        {fallback}
+      </AvatarFallback>
     </Avatar>
   );
 }

package/src/components/ui/combobox.tsx

@@ -12,7 +12,11 @@ import {
   CommandItem,
   CommandList,
 } from "@/components/ui/command";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
 
@@ -85,20 +89,43 @@ interface ComboboxOption<T = string> {
  * />
  */
 interface ComboboxProps<T = string>
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "animationConfig" | "defaultValue"> {
+  extends Omit<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    "animationConfig" | "defaultValue"
+  > {
   /**
    * An array of option objects or groups to be displayed in the multi-select component.
    */
   options: ComboboxOption<T>[];
+
   /**
    * Callback function triggered when the selected values change.
    * Receives an array of the new selected values.
    */
   onValueChange: (value: T) => void;
 
+  /**
+   * Custom renderer for the selected value displayed in the input.
+   * @param option The currently selected option object.
+   */
+  renderValue?: (option: ComboboxOption<T>) => React.ReactNode;
+
   /** The default selected values when the component mounts. */
   defaultValue?: T;
 
+  /**
+   * Callback function triggered when the search input value changes.
+   * Useful for server-side filtering or handling large datasets externally.
+   */
+  onInputValueChange?: (value: string) => void;
+
+  /**
+   * If true, disables the built-in filtering logic.
+   * Use this when you filter options externally (e.g. server-side search).
+   * Optional, defaults to false.
+   */
+  disableLocalFiltering?: boolean;
+
   /**
    * Placeholder text to be displayed when no values are selected.
    * Optional, defaults to "Select options".
@@ -137,6 +164,12 @@ interface ComboboxProps<T = string>
    */
   searchable?: boolean;
 
+  /**
+   * If true, searching will also check the 'value' field in addition to 'label'.
+   * Optional, defaults to false.
+   */
+  searchByValue?: boolean;
+
   /**
    * Custom empty state message when no options match search.
    * Optional, defaults to "No results found."
@@ -230,7 +263,10 @@ export interface ComboboxRef {
   focus: () => void;
 }
 
-const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<ComboboxRef>) => {
+const ComboboxComponent = <T = string,>(
+  props: ComboboxProps<T>,
+  ref: React.Ref<ComboboxRef>,
+) => {
   const {
     options,
     onValueChange,
@@ -248,6 +284,10 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
     minWidth,
     maxWidth,
     closeOnSelect = false,
+    renderValue,
+    searchByValue = false,
+    onInputValueChange,
+    disableLocalFiltering = false,
     ...restProps
   } = props;
 
@@ -283,7 +323,7 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
         setTimeout(() => setPoliteMessage(""), 100);
       }
     },
-    []
+    [],
   );
 
   const multiSelectId = React.useId();
@@ -324,10 +364,12 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
         }
       },
     }),
-    [resetToDefault, selectedValue, onValueChange]
+    [resetToDefault, onValueChange],
   );
 
-  const [screenSize, setScreenSize] = React.useState<"mobile" | "tablet" | "desktop">("desktop");
+  const [screenSize, setScreenSize] = React.useState<
+    "mobile" | "tablet" | "desktop"
+  >("desktop");
 
   React.useEffect(() => {
     if (typeof window === "undefined") return;
@@ -380,42 +422,53 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
 
   const getAllOptions = React.useCallback((): ComboboxOption<T>[] => {
     if (options.length === 0) return [];
-    const allOptions: ComboboxOption<T>[] = options;
+
     const valueSet = new Set<T>();
-    const duplicates: T[] = [];
     const uniqueOptions: ComboboxOption<T>[] = [];
-    allOptions.forEach((option) => {
-      if (valueSet.has(option.value)) {
-        duplicates.push(option.value);
-      } else {
+
+    options.forEach((option) => {
+      if (!valueSet.has(option.value)) {
         valueSet.add(option.value);
         uniqueOptions.push(option);
       }
     });
-    return allOptions;
+
+    return uniqueOptions;
   }, [options]);
 
   const getOptionByValue = React.useCallback(
     (value: T): ComboboxOption<T> | undefined => {
       const option = getAllOptions().find((option) => option.value === value);
       if (!option && process.env.NODE_ENV === "development") {
-        console.warn(`Combobox: Option with value "${value}" not found in options list`);
+        console.warn(
+          `Combobox: Option with value "${value}" not found in options list`,
+        );
       }
       return option;
     },
-    [getAllOptions]
+    [getAllOptions],
   );
 
   const filteredOptions = React.useMemo(() => {
+    if (disableLocalFiltering) return options;
     if (!searchable || !searchValue) return options;
     if (options.length === 0) return [];
 
-    return options.filter(
-      (option) =>
-        option.label.toLowerCase().includes(searchValue.toLowerCase()) ||
-        String(option.value).toLowerCase().includes(searchValue.toLowerCase())
-    );
-  }, [options, searchValue, searchable]);
+    return options.filter((option) => {
+      const labelMatch = option.label
+        .toLowerCase()
+        .includes(searchValue.toLowerCase());
+      if (!searchByValue) return labelMatch;
+
+      const val = option.value;
+      const valueMatch =
+        typeof val === "string" || typeof val === "number"
+          ? String(val).toLowerCase().includes(searchValue.toLowerCase())
+          : false;
+
+      return labelMatch || valueMatch;
+    });
+  }, [disableLocalFiltering, options, searchable, searchValue, searchByValue]);
 
   // const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
   //   if (event.key === "Enter") {
@@ -464,7 +517,9 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
 
     if (isPopoverOpen !== prevIsOpen.current) {
       if (isPopoverOpen) {
-        announce(`Dropdown opened. ${totalOptions} options available. Use arrow keys to navigate.`);
+        announce(
+          `Dropdown opened. ${totalOptions} options available. Use arrow keys to navigate.`,
+        );
       } else {
         announce("Dropdown closed.");
       }
@@ -476,11 +531,11 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
         const filteredCount = allOptions.filter(
           (opt) =>
             opt.label.toLowerCase().includes(searchValue.toLowerCase()) ||
-            String(opt.value).toLowerCase().includes(searchValue.toLowerCase())
+            String(opt.value).toLowerCase().includes(searchValue.toLowerCase()),
         ).length;
 
         announce(
-          `${filteredCount} option${filteredCount === 1 ? "" : "s"} found for "${searchValue}"`
+          `${filteredCount} option${filteredCount === 1 ? "" : "s"} found for "${searchValue}"`,
         );
       }
       prevSearchValue.current = searchValue;
@@ -498,9 +553,14 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
         </div>
       </div>
 
-      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>
+      <Popover
+        open={isPopoverOpen}
+        onOpenChange={setIsPopoverOpen}
+        modal={modalPopover}
+      >
         <div id={triggerDescriptionId} className="sr-only">
-          Multi-select dropdown. Use arrow keys to navigate, Enter to select, and Escape to close.
+          Multi-select dropdown. Use arrow keys to navigate, Enter to select,
+          and Escape to close.
         </div>
         <PopoverTrigger asChild>
           <Button
@@ -521,7 +581,7 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
               responsiveSettings.compactMode && "h-8 text-sm",
               screenSize === "mobile" && "h-12 text-base",
               disabled && "cursor-not-allowed opacity-50",
-              className
+              className,
             )}
             style={{
               ...widthConstraints,
@@ -532,7 +592,14 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
               <div className="mx-auto flex w-full items-center justify-between">
                 <div className="flex items-center gap-2">
                   {(() => {
-                    const selectedOption = options.find((op) => op.value === selectedValue);
+                    const selectedOption = options.find(
+                      (op) => op.value === selectedValue,
+                    );
+
+                    if (renderValue && selectedOption) {
+                      return renderValue(selectedOption);
+                    }
+
                     return (
                       <>
                         {selectedOption?.icon && (
@@ -541,7 +608,9 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
                             aria-hidden="true"
                           />
                         )}
-                        <span className="text-foreground text-sm">{selectedOption?.label}</span>
+                        <span className="text-foreground text-sm">
+                          {selectedOption?.label}
+                        </span>
                       </>
                     );
                   })()}
@@ -565,7 +634,10 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
                   >
                     <XIcon className="size-3.5" />
                   </div>
-                  <Separator orientation="vertical" className="flex h-full min-h-6" />
+                  <Separator
+                    orientation="vertical"
+                    className="flex h-full min-h-6"
+                  />
                   <ChevronDown
                     className="text-muted-foreground mx-2 h-4 cursor-pointer"
                     aria-hidden="true"
@@ -574,7 +646,9 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
               </div>
             ) : (
               <div className="mx-auto flex w-full items-center justify-between">
-                <span className="text-muted-foreground text-sm">{placeholder}</span>
+                <span className="text-muted-foreground text-sm">
+                  {placeholder}
+                </span>
                 <ChevronDown className="text-muted-foreground mx-2 h-4 cursor-pointer" />
               </div>
             )}
@@ -590,7 +664,7 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
             screenSize === "mobile" && "w-[85vw] max-w-[280px]",
             screenSize === "tablet" && "w-[70vw] max-w-md",
             screenSize === "desktop" && "min-w-[300px]",
-            popoverClassName
+            popoverClassName,
           )}
           style={{
             maxWidth: `min(${widthConstraints.maxWidth}, 85vw)`,
@@ -600,13 +674,16 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
           align="start"
           onEscapeKeyDown={() => setIsPopoverOpen(false)}
         >
-          <Command>
+          <Command shouldFilter={false}>
             {searchable && (
               <CommandInput
                 placeholder="Search options..."
                 // onKeyDown={handleInputKeyDown}
                 value={searchValue}
-                onValueChange={setSearchValue}
+                onValueChange={(val) => {
+                  setSearchValue(val);
+                  onInputValueChange?.(val);
+                }}
                 aria-label="Search through available options"
                 aria-describedby={`${multiSelectId}-search-help`}
               />
@@ -620,10 +697,12 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
               className={cn(
                 "multiselect-scrollbar max-h-[40vh] overflow-y-auto",
                 screenSize === "mobile" && "max-h-[50vh]",
-                "overscroll-behavior-y-contain"
+                "overscroll-behavior-y-contain",
               )}
             >
-              <CommandEmpty>{emptyIndicator || "No results found."}</CommandEmpty>{" "}
+              <CommandEmpty>
+                {emptyIndicator || "No results found."}
+              </CommandEmpty>{" "}
               <CommandGroup>
                 {filteredOptions.map((option) => {
                   const isSelected = selectedValue === option.value;
@@ -639,7 +718,7 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
                       }${option.disabled ? ", disabled" : ""}`}
                       className={cn(
                         "cursor-pointer",
-                        option.disabled && "cursor-not-allowed opacity-50"
+                        option.disabled && "cursor-not-allowed opacity-50",
                       )}
                       disabled={option.disabled}
                     >
@@ -650,7 +729,9 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
                         />
                       )}
                       <span className="grow">{option.label}</span>
-                      {isSelected ? <CheckIcon className="text-muted-foreground size-3.5" /> : null}
+                      {isSelected ? (
+                        <CheckIcon className="text-muted-foreground size-3.5" />
+                      ) : null}
                     </CommandItem>
                   );
                 })}
@@ -662,7 +743,7 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
           <WandSparkles
             className={cn(
               "text-foreground bg-background my-2 h-3 w-3 cursor-pointer",
-              isAnimating ? "" : "text-muted-foreground"
+              isAnimating ? "" : "text-muted-foreground",
             )}
             onClick={() => setIsAnimating(!isAnimating)}
           />
@@ -674,7 +755,7 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
 
 // Create the forwardRef wrapper with proper generic typing
 const ComboboxForwardRef = React.forwardRef(ComboboxComponent) as <T = string>(
-  props: ComboboxProps<T> & { ref?: React.Ref<ComboboxRef> }
+  props: ComboboxProps<T> & { ref?: React.Ref<ComboboxRef> },
 ) => React.ReactElement;
 
 // Set displayName on a mutable object

package/src/components/ui/dialog.tsx

@@ -6,27 +6,19 @@ import { XIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
   return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
   return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
   return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
   return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
@@ -38,8 +30,8 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className,
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/50",
+        className
       )}
       {...props}
     />
@@ -61,7 +53,7 @@ function DialogContent({
         data-slot="dialog-content"
         className={cn(
           "bg-background 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 border-gradient-soft fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg p-6 shadow-lg duration-200 sm:max-w-lg",
-          className,
+          className
         )}
         {...props}
       >
@@ -94,19 +86,13 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className,
-      )}
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
       {...props}
     />
   );
 }
 
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"

package/src/components/ui/tooltip.tsx

@@ -50,7 +50,7 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-neutral-alpha-10 border-border z-50 origin-(--radix-tooltip-content-transform-origin) rounded-lg border p-2 backdrop-blur-lg transition-all",
+          "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-neutral-alpha-10 border-border z-50 max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-lg border p-2 text-xs backdrop-blur-lg transition-all",
           gradient === "primary" && "border-gradient-primary",
           gradient === "white" && "border-gradient-white",
           className,