@turtleclub/ui 0.7.0-beta.3 → 0.7.0-beta.30

package/src/components/ui/combobox.tsx

@@ -1,9 +1,8 @@
 "use client";
 
 import * as React from "react";
-import { CheckIcon, ChevronDown, WandSparkles, XIcon } from "lucide-react";
-
-import { Button } from "@/components/ui/button";
+import { Check as CheckIcon, ChevronDown, WandSparkles, X as XIcon } from "lucide-react";
+import { buttonVariants } from "@/components/ui/button";
 import {
   Command,
   CommandEmpty,
@@ -12,11 +11,7 @@ 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";
 
@@ -89,23 +84,40 @@ 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".
@@ -144,6 +156,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."
@@ -237,10 +255,7 @@ 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,
@@ -258,6 +273,10 @@ const ComboboxComponent = <T = string,>(
     minWidth,
     maxWidth,
     closeOnSelect = false,
+    renderValue,
+    searchByValue = false,
+    onInputValueChange,
+    disableLocalFiltering = false,
     ...restProps
   } = props;
 
@@ -293,7 +312,7 @@ const ComboboxComponent = <T = string,>(
         setTimeout(() => setPoliteMessage(""), 100);
       }
     },
-    [],
+    []
   );
 
   const multiSelectId = React.useId();
@@ -334,12 +353,10 @@ const ComboboxComponent = <T = string,>(
         }
       },
     }),
-    [resetToDefault, 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;
@@ -410,25 +427,31 @@ const ComboboxComponent = <T = string,>(
     (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") {
@@ -477,9 +500,7 @@ const ComboboxComponent = <T = string,>(
 
     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.");
       }
@@ -491,11 +512,11 @@ const ComboboxComponent = <T = string,>(
         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;
@@ -513,101 +534,94 @@ const ComboboxComponent = <T = string,>(
         </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
-            ref={buttonRef}
-            {...restProps}
-            onClick={handleTogglePopover}
-            disabled={disabled}
-            role="combobox"
-            aria-expanded={isPopoverOpen}
-            aria-haspopup="listbox"
-            aria-controls={isPopoverOpen ? listboxId : undefined}
-            aria-describedby={`${triggerDescriptionId} ${selectedCountId}`}
-            border="plain"
-            className={cn(
-              "flex h-10 items-center justify-between p-1 [&_svg]:pointer-events-auto",
-              "!bg-neutral-alpha-2 text-base !font-normal shadow md:text-sm",
-              autoSize ? "w-auto" : "w-full",
-              responsiveSettings.compactMode && "h-8 text-sm",
-              screenSize === "mobile" && "h-12 text-base",
-              disabled && "cursor-not-allowed opacity-50",
-              className,
-            )}
-            style={{
-              ...widthConstraints,
-              maxWidth: `min(${widthConstraints.maxWidth}, 100%)`,
-            }}
-          >
-            {selectedValue ? (
-              <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,
-                    );
-                    return (
-                      <>
-                        {selectedOption?.icon && (
-                          <selectedOption.icon
-                            className="text-muted-foreground size-3.5"
-                            aria-hidden="true"
-                          />
-                        )}
-                        <span className="text-foreground text-sm">
-                          {selectedOption?.label}
-                        </span>
-                      </>
-                    );
-                  })()}
-                </div>
-                <div className="flex items-center justify-between">
-                  <div
-                    role="button"
-                    tabIndex={0}
-                    onClick={(event) => {
+        <PopoverTrigger
+          ref={buttonRef}
+          {...restProps}
+          onClick={handleTogglePopover}
+          disabled={disabled}
+          role="combobox"
+          aria-expanded={isPopoverOpen}
+          aria-haspopup="listbox"
+          aria-controls={isPopoverOpen ? listboxId : undefined}
+          aria-describedby={`${triggerDescriptionId} ${selectedCountId}`}
+          className={cn(
+            buttonVariants({
+              variant: "default",
+              size: "default",
+              border: "plain",
+            }),
+            "flex h-10 items-center justify-between [&_svg]:pointer-events-auto",
+            "!bg-neutral-alpha-2 text-base !font-normal shadow md:text-sm",
+            autoSize ? "w-auto" : "w-full",
+            responsiveSettings.compactMode && "h-8 text-sm",
+            screenSize === "mobile" && "h-12 text-base",
+            disabled && "cursor-not-allowed opacity-50",
+            className
+          )}
+          style={{
+            ...widthConstraints,
+            maxWidth: `min(${widthConstraints.maxWidth}, 100%)`,
+          }}
+        >
+          {selectedValue ? (
+            <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);
+
+                  if (renderValue && selectedOption) {
+                    return renderValue(selectedOption);
+                  }
+
+                  return (
+                    <>
+                      {selectedOption?.icon && (
+                        <selectedOption.icon
+                          className="text-muted-foreground size-3.5"
+                          aria-hidden="true"
+                        />
+                      )}
+                      <span className="text-foreground text-sm">{selectedOption?.label}</span>
+                    </>
+                  );
+                })()}
+              </div>
+              <div className="flex items-center justify-between">
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    handleClear();
+                  }}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.preventDefault();
                       event.stopPropagation();
                       handleClear();
-                    }}
-                    onKeyDown={(event) => {
-                      if (event.key === "Enter" || event.key === " ") {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        handleClear();
-                      }
-                    }}
-                    className="text-muted-foreground hover:text-foreground focus:ring-ring mx-2 flex size-3.5 cursor-pointer items-center justify-center rounded-sm focus:ring-2 focus:ring-offset-1 focus:outline-none"
-                  >
-                    <XIcon className="size-3.5" />
-                  </div>
-                  <Separator
-                    orientation="vertical"
-                    className="flex h-full min-h-6"
-                  />
-                  <ChevronDown
-                    className="text-muted-foreground mx-2 h-4 cursor-pointer"
-                    aria-hidden="true"
-                  />
+                    }
+                  }}
+                  className="text-muted-foreground hover:text-foreground focus:ring-ring mx-2 flex size-3.5 cursor-pointer items-center justify-center rounded-sm focus:ring-2 focus:ring-offset-1 focus:outline-none"
+                >
+                  <XIcon className="size-3.5" />
                 </div>
+                <Separator orientation="vertical" className="flex h-full min-h-6" />
+                <ChevronDown
+                  className="text-muted-foreground mx-2 h-4 cursor-pointer"
+                  aria-hidden="true"
+                />
               </div>
-            ) : (
-              <div className="mx-auto flex w-full items-center justify-between">
-                <span className="text-muted-foreground text-sm">
-                  {placeholder}
-                </span>
-                <ChevronDown className="text-muted-foreground mx-2 h-4 cursor-pointer" />
-              </div>
-            )}
-          </Button>
+            </div>
+          ) : (
+            <div className="mx-auto flex w-full items-center justify-between">
+              <span className="text-muted-foreground text-sm">{placeholder}</span>
+              <ChevronDown className="text-muted-foreground mx-2 h-4 cursor-pointer" />
+            </div>
+          )}
         </PopoverTrigger>
         <PopoverContent
           id={listboxId}
@@ -619,7 +633,7 @@ const ComboboxComponent = <T = string,>(
             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)`,
@@ -635,7 +649,10 @@ const ComboboxComponent = <T = string,>(
                 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`}
               />
@@ -649,12 +666,10 @@ const ComboboxComponent = <T = string,>(
               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;
@@ -670,7 +685,7 @@ const ComboboxComponent = <T = string,>(
                       }${option.disabled ? ", disabled" : ""}`}
                       className={cn(
                         "cursor-pointer",
-                        option.disabled && "cursor-not-allowed opacity-50",
+                        option.disabled && "cursor-not-allowed opacity-50"
                       )}
                       disabled={option.disabled}
                     >
@@ -681,9 +696,7 @@ const ComboboxComponent = <T = string,>(
                         />
                       )}
                       <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>
                   );
                 })}
@@ -695,7 +708,7 @@ const ComboboxComponent = <T = string,>(
           <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)}
           />
@@ -707,7 +720,7 @@ const ComboboxComponent = <T = string,>(
 
 // 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/dropdown.tsx

@@ -43,10 +43,12 @@ function DropdownMenuTrigger({
   children,
   size = "default",
   src,
+  compact = false,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger> & {
   src?: string;
   size?: "default" | "sm" | "lg";
+  compact?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.Trigger
@@ -76,7 +78,7 @@ function DropdownMenuTrigger({
           )}
         />
       ) : undefined}
-      <div className={cn("grow py-2 pr-2.5", src ? "pl-2.5" : "pl-4")}>
+      <div className={cn("grow py-2 pr-2.5", src ? "pl-2.5" : compact ? "pl-2.5" : "pl-4")}>
         {children}
       </div>
       <ChevronDownIcon className="mr-2.5 size-4" />

package/src/components/ui/index.ts

@@ -45,3 +45,4 @@ export * from "./collapsible";
 export * from "./banner";
 export * from "./skeleton";
 export * from "./pagination";
+export * from "./sheet";