@classytic/fluid 0.2.1 → 0.3.2

package/dist/client/table.mjs

@@ -0,0 +1,373 @@
+"use client";
+
+import { t as cn } from "../utils-DQ5SCVoW.mjs";
+import { t as useIsMobile } from "../use-mobile-BX3SQVo2.mjs";
+import { t as useScrollDetection } from "../use-scroll-detection-CsgsQYvy.mjs";
+import { t as ApiPagination } from "../api-pagination-DBTE0yk4.mjs";
+import { n as useSearch } from "../search-context-DR7DBs7S.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, Search, SlidersHorizontal, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Badge } from "@/components/ui/badge";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { Input } from "@/components/ui/input";
+
+//#region src/components/data-table.tsx
+const ScrollButton = React.memo(function ScrollButton({ direction, onClick, visible, className }) {
+	if (!visible) return null;
+	const handleClick = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		onClick();
+	};
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cn("absolute top-1/2 -translate-y-1/2 z-50", "flex items-center justify-center", "size-10 rounded-md shadow-lg border-2 border-border", "bg-background hover:bg-muted", "transition-transform duration-200", "hover:scale-105 active:scale-95", direction === "left" ? "left-2" : "right-2", className),
+		onClick: handleClick,
+		onMouseDown: (e) => e.stopPropagation(),
+		"aria-label": `Scroll ${direction}`,
+		children: direction === "left" ? /* @__PURE__ */ jsx(ChevronLeft, { className: "size-5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-5" })
+	});
+});
+function DataTable({ columns, data, isLoading = false, pagination, enableSorting = false, enableRowSelection = false, onRowSelectionChange, className, loadingState: customLoadingState, emptyState: customEmptyState }) {
+	const [sorting, setSorting] = useState([]);
+	const [rowSelection, setRowSelection] = useState({});
+	const scrollAreaRef = useRef(null);
+	const { canScrollLeft, canScrollRight, isScrollable, checkScroll } = useScrollDetection(scrollAreaRef);
+	const { total = 0, limit = 10, pages = 1, page = 1, hasNext = false, hasPrev = false, onPageChange = () => {} } = pagination ?? {};
+	const table = useReactTable({
+		data,
+		columns,
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: enableSorting ? getSortedRowModel() : void 0,
+		onSortingChange: setSorting,
+		onRowSelectionChange: enableRowSelection ? (updater) => {
+			setRowSelection(updater);
+			if (onRowSelectionChange) {
+				const newSelection = typeof updater === "function" ? updater(rowSelection) : updater;
+				onRowSelectionChange(data.filter((_, index) => newSelection[index]));
+			}
+		} : void 0,
+		state: {
+			sorting,
+			rowSelection: enableRowSelection ? rowSelection : void 0
+		},
+		enableRowSelection
+	});
+	const scrollHorizontally = useCallback((direction) => {
+		const scrollContainer = scrollAreaRef.current?.querySelector("[data-slot=\"scroll-area-viewport\"]");
+		if (!scrollContainer) return;
+		const scrollAmount = Math.min(300, scrollContainer.clientWidth * .8);
+		scrollContainer.scrollBy({
+			left: direction === "left" ? -scrollAmount : scrollAmount,
+			behavior: "smooth"
+		});
+	}, []);
+	const handleWheel = useCallback((e) => {
+		if (!isScrollable) return;
+		const scrollContainer = scrollAreaRef.current?.querySelector("[data-slot=\"scroll-area-viewport\"]");
+		if (!scrollContainer?.contains(e.target)) return;
+		if (e.shiftKey || Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+			e.preventDefault();
+			const delta = e.deltaY || e.deltaX;
+			scrollContainer.scrollBy({
+				left: delta,
+				behavior: "auto"
+			});
+		}
+	}, [isScrollable]);
+	useEffect(() => {
+		const scrollContainer = scrollAreaRef.current?.querySelector("[data-slot=\"scroll-area-viewport\"]");
+		if (!scrollContainer) return;
+		checkScroll();
+		scrollContainer.addEventListener("scroll", checkScroll, { passive: true });
+		scrollContainer.addEventListener("wheel", handleWheel, { passive: false });
+		return () => {
+			scrollContainer.removeEventListener("scroll", checkScroll);
+			scrollContainer.removeEventListener("wheel", handleWheel);
+		};
+	}, [checkScroll, handleWheel]);
+	useEffect(() => {
+		const timer = setTimeout(checkScroll, 150);
+		return () => clearTimeout(timer);
+	}, [data, checkScroll]);
+	const defaultLoadingState = useMemo(() => /* @__PURE__ */ jsx("div", {
+		className: "w-full h-full min-h-[24rem] flex items-center justify-center bg-background/50 rounded-lg border border-border",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center gap-3",
+			children: [/* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent" }), /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: "Loading data..."
+			})]
+		})
+	}), []);
+	const defaultEmptyState = useMemo(() => /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+		colSpan: columns.length,
+		className: "h-32 text-center",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center justify-center py-8",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "rounded-full bg-muted p-3 mb-4",
+					children: /* @__PURE__ */ jsx(Search, { className: "h-6 w-6 text-muted-foreground" })
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-lg font-medium text-foreground mb-1",
+					children: "No results found"
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground",
+					children: "Try adjusting your search or filters"
+				})
+			]
+		})
+	}) }), [columns.length]);
+	if (isLoading) return /* @__PURE__ */ jsx(Fragment, { children: customLoadingState || defaultLoadingState });
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col h-full gap-4", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex-1 min-h-0 rounded-lg border overflow-hidden bg-background shadow-sm relative",
+			children: [
+				/* @__PURE__ */ jsxs(ScrollArea, {
+					ref: scrollAreaRef,
+					className: "h-full w-full",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "min-w-full",
+						children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, {
+							className: "sticky top-0 z-10 bg-muted/50 backdrop-blur-sm",
+							children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, {
+								className: "border-b border-border hover:bg-transparent",
+								children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, {
+									className: cn("bg-muted/50 font-semibold text-foreground h-12 px-4 whitespace-nowrap", "first:rounded-tl-lg last:rounded-tr-lg"),
+									children: header.isPlaceholder ? null : enableSorting && header.column.getCanSort() ? /* @__PURE__ */ jsxs(Button, {
+										variant: "ghost",
+										onClick: () => header.column.toggleSorting(header.column.getIsSorted() === "asc"),
+										className: "h-auto p-0 font-semibold hover:bg-transparent whitespace-nowrap",
+										children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "ml-2 h-4 w-4" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "ml-2 h-4 w-4" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "ml-2 h-4 w-4 opacity-50" })]
+									}) : flexRender(header.column.columnDef.header, header.getContext())
+								}, header.id))
+							}, headerGroup.id))
+						}), /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row, index) => /* @__PURE__ */ jsx(TableRow, {
+							className: cn("hover:bg-muted/50 transition-colors border-b border-border/50", index % 2 === 0 ? "bg-background" : "bg-muted/20"),
+							children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
+								className: "px-4 py-3 text-sm whitespace-nowrap",
+								children: flexRender(cell.column.columnDef.cell, cell.getContext())
+							}, cell.id))
+						}, row.id)) : customEmptyState ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+							colSpan: columns.length,
+							className: "h-32 text-center",
+							children: customEmptyState
+						}) }) : defaultEmptyState })] })
+					}), /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" })]
+				}),
+				canScrollLeft && /* @__PURE__ */ jsx(ScrollButton, {
+					direction: "left",
+					onClick: () => scrollHorizontally("left"),
+					visible: true
+				}),
+				canScrollRight && /* @__PURE__ */ jsx(ScrollButton, {
+					direction: "right",
+					onClick: () => scrollHorizontally("right"),
+					visible: true
+				})
+			]
+		}), pagination && /* @__PURE__ */ jsx(ApiPagination, {
+			total,
+			limit,
+			pages,
+			page,
+			hasNext,
+			hasPrev,
+			onPageChange
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/data-table-toolbar.tsx
+/**
+* DataTableToolbar - Composable toolbar with search, filters, and bulk actions
+*
+* Must be used inside a `Search.Root` context.
+*
+* @example
+* ```tsx
+* <Search.Root hook={searchHook}>
+*   <DataTableToolbar
+*     searchPlaceholder="Search users..."
+*     filterContent={<SelectInput name="role" items={roles} />}
+*     totalResults={data?.total}
+*     selectedCount={selected.length}
+*     bulkActions={<Button variant="destructive">Delete</Button>}
+*   />
+*   <DataTable columns={columns} data={data?.items ?? []} />
+* </Search.Root>
+* ```
+*/
+function DataTableToolbar({ children, className, showSearch = true, searchPlaceholder = "Search...", showFilters = true, filterContent, filterTitle = "Filters", selectedCount, bulkActions, totalResults, showResultCount }) {
+	const search = useSearch();
+	const isMobile = useIsMobile();
+	const [filterOpen, setFilterOpen] = useState(false);
+	const hasSelection = selectedCount != null && selectedCount > 0;
+	const showResults = showResultCount ?? (totalResults != null && totalResults >= 0);
+	const handleSearchInput = useCallback((e) => {
+		search.setSearchValue(e.target.value);
+	}, [search]);
+	if (hasSelection) return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-3 py-2", className),
+		children: [
+			/* @__PURE__ */ jsxs(Badge, {
+				variant: "secondary",
+				className: "shrink-0",
+				children: [selectedCount, " selected"]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-2",
+				children: bulkActions
+			}),
+			/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+			children
+		]
+	});
+	const filterElement = showFilters && filterContent && /* @__PURE__ */ jsx(Fragment, { children: isMobile ? /* @__PURE__ */ jsxs(Sheet, {
+		open: filterOpen,
+		onOpenChange: setFilterOpen,
+		children: [/* @__PURE__ */ jsxs(Button, {
+			variant: "outline",
+			size: "sm",
+			onClick: () => setFilterOpen(true),
+			className: "shrink-0",
+			children: [
+				/* @__PURE__ */ jsx(SlidersHorizontal, { className: "mr-2 h-4 w-4" }),
+				filterTitle,
+				search.hasActiveFilters && /* @__PURE__ */ jsx(Badge, {
+					variant: "default",
+					className: "ml-1.5 h-5 min-w-5 px-1",
+					children: "!"
+				})
+			]
+		}), /* @__PURE__ */ jsxs(SheetContent, {
+			side: "bottom",
+			children: [
+				/* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: filterTitle }) }),
+				/* @__PURE__ */ jsx("div", {
+					className: "py-4 space-y-4",
+					children: filterContent
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex gap-2 pt-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						className: "flex-1",
+						onClick: () => {
+							search.clearSearch();
+							setFilterOpen(false);
+						},
+						children: "Clear"
+					}), /* @__PURE__ */ jsx(Button, {
+						className: "flex-1",
+						onClick: () => {
+							search.handleSearch();
+							setFilterOpen(false);
+						},
+						children: "Apply"
+					})]
+				})
+			]
+		})]
+	}) : /* @__PURE__ */ jsxs(Popover, {
+		open: filterOpen,
+		onOpenChange: setFilterOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsxs(Button, {
+			variant: "outline",
+			size: "sm",
+			className: "shrink-0",
+			children: [
+				/* @__PURE__ */ jsx(SlidersHorizontal, { className: "mr-2 h-4 w-4" }),
+				filterTitle,
+				search.hasActiveFilters && /* @__PURE__ */ jsx(Badge, {
+					variant: "default",
+					className: "ml-1.5 h-5 min-w-5 px-1",
+					children: "!"
+				})
+			]
+		}) }), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-80",
+			align: "end",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ jsx("h4", {
+						className: "font-medium text-sm",
+						children: filterTitle
+					}),
+					filterContent,
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex gap-2 pt-2",
+						children: [/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "sm",
+							className: "flex-1",
+							onClick: () => {
+								search.clearSearch();
+								setFilterOpen(false);
+							},
+							children: "Clear"
+						}), /* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							className: "flex-1",
+							onClick: () => {
+								search.handleSearch();
+								setFilterOpen(false);
+							},
+							children: "Apply"
+						})]
+					})
+				]
+			})
+		})]
+	}) });
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-3 py-2", className),
+		children: [
+			showSearch && /* @__PURE__ */ jsxs("div", {
+				className: "relative flex-1 max-w-sm",
+				children: [
+					/* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
+					/* @__PURE__ */ jsx(Input, {
+						placeholder: searchPlaceholder,
+						defaultValue: search.searchValue,
+						onChange: handleSearchInput,
+						className: "pl-8 h-9"
+					}),
+					search.hasActiveSearch && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: search.clearSearch,
+						className: "absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+						"aria-label": "Clear search",
+						children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+					})
+				]
+			}),
+			filterElement,
+			showResults && totalResults != null && /* @__PURE__ */ jsxs("span", {
+				className: "text-sm text-muted-foreground shrink-0",
+				children: [
+					totalResults,
+					" result",
+					totalResults !== 1 ? "s" : ""
+				]
+			}),
+			/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+			children
+		]
+	});
+}
+
+//#endregion
+export { DataTable, DataTableToolbar };

package/dist/client/theme.d.mts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/mode-toggle.d.ts
+declare function ModeToggle(): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ModeToggle };

package/dist/client/theme.mjs

@@ -0,0 +1,65 @@
+"use client";
+
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { useTheme } from "next-themes";
+
+//#region src/components/mode-toggle.tsx
+function ModeToggle() {
+	const { theme, setTheme } = useTheme();
+	const [mounted, setMounted] = React$1.useState(false);
+	React$1.useEffect(() => {
+		setMounted(true);
+	}, []);
+	if (!mounted) return /* @__PURE__ */ jsxs(Button, {
+		variant: "ghost",
+		size: "icon",
+		children: [/* @__PURE__ */ jsx(Sun, { className: "h-[1.2rem] w-[1.2rem]" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Toggle theme"
+		})]
+	});
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		modal: false,
+		children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon"
+			}),
+			children: [
+				/* @__PURE__ */ jsx(Sun, { className: "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }),
+				/* @__PURE__ */ jsx(Moon, { className: "absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Toggle theme"
+				})
+			]
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align: "end",
+			children: /* @__PURE__ */ jsxs(DropdownMenuRadioGroup, {
+				value: theme,
+				onValueChange: setTheme,
+				children: [
+					/* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+						value: "light",
+						children: "Light"
+					}),
+					/* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+						value: "dark",
+						children: "Dark"
+					}),
+					/* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+						value: "system",
+						children: "System"
+					})
+				]
+			})
+		})]
+	});
+}
+
+//#endregion
+export { ModeToggle };

package/dist/command.d.mts

@@ -0,0 +1,134 @@
+import { n as useKeyboardShortcut } from "./use-keyboard-shortcut-_mRCh3QO.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region src/components/command/command-search.d.ts
+interface CommandSearchContextValue {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+/**
+ * useCommandSearch — Access command search open/close state.
+ *
+ * @example
+ * ```tsx
+ * const { open, setOpen } = useCommandSearch();
+ * ```
+ */
+declare function useCommandSearch(): CommandSearchContextValue;
+interface CommandSearchProps {
+  children: ReactNode;
+  /** Controlled open state */
+  open?: boolean;
+  /** Open state change handler */
+  onOpenChange?: (open: boolean) => void;
+  /** Keyboard shortcut to toggle (default: "mod+k") */
+  shortcut?: string;
+  /** Whether to register the keyboard shortcut (default: true) */
+  enableShortcut?: boolean;
+  /** Dialog title for accessibility (default: "Command Palette") */
+  title?: string;
+  /** Dialog description for accessibility */
+  description?: string;
+  className?: string;
+}
+interface CommandSearchInputProps {
+  placeholder?: string;
+  className?: string;
+}
+interface CommandSearchGroupProps {
+  heading?: string;
+  children: ReactNode;
+  className?: string;
+}
+interface CommandSearchItemProps {
+  children: ReactNode;
+  /** Icon element rendered before the label */
+  icon?: ReactNode;
+  /** Keyboard shortcut displayed via Kbd component */
+  shortcut?: string;
+  /** Called when the item is selected */
+  onSelect?: (value: string) => void;
+  /** Value for filtering */
+  value?: string;
+  disabled?: boolean;
+  className?: string;
+}
+interface CommandSearchEmptyProps {
+  children?: ReactNode;
+  className?: string;
+}
+interface CommandSearchListProps {
+  children: ReactNode;
+  className?: string;
+}
+/**
+ * CommandSearch — Command palette dialog with keyboard shortcut.
+ * Wraps consumer's @/components/ui/command (Base UI shadcn).
+ *
+ * @example
+ * ```tsx
+ * <CommandSearch shortcut="mod+k">
+ *   <CommandSearch.Input placeholder="Type a command or search..." />
+ *   <CommandSearch.List>
+ *     <CommandSearch.Empty>No results found.</CommandSearch.Empty>
+ *     <CommandSearch.Group heading="Navigation">
+ *       <CommandSearch.Item icon={<Home />} shortcut="⌘H" onSelect={() => navigate("/")}>
+ *         Home
+ *       </CommandSearch.Item>
+ *     </CommandSearch.Group>
+ *   </CommandSearch.List>
+ * </CommandSearch>
+ * ```
+ */
+declare function CommandSearchRoot({
+  children,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+  shortcut,
+  enableShortcut,
+  title,
+  description,
+  className
+}: CommandSearchProps): react_jsx_runtime0.JSX.Element;
+declare function CommandSearchInput({
+  placeholder,
+  className
+}: CommandSearchInputProps): react_jsx_runtime0.JSX.Element;
+declare function CommandSearchList({
+  children,
+  className
+}: CommandSearchListProps): react_jsx_runtime0.JSX.Element;
+declare function CommandSearchGroup({
+  heading,
+  children,
+  className
+}: CommandSearchGroupProps): react_jsx_runtime0.JSX.Element;
+declare function CommandSearchItemComponent({
+  children,
+  icon,
+  shortcut: shortcutDisplay,
+  onSelect,
+  value,
+  disabled,
+  className
+}: CommandSearchItemProps): react_jsx_runtime0.JSX.Element;
+declare function CommandSearchEmpty({
+  children,
+  className
+}: CommandSearchEmptyProps): react_jsx_runtime0.JSX.Element;
+declare function CommandSearchSeparator({
+  className
+}: {
+  className?: string;
+}): react_jsx_runtime0.JSX.Element;
+declare const CommandSearch: typeof CommandSearchRoot & {
+  Input: typeof CommandSearchInput;
+  List: typeof CommandSearchList;
+  Group: typeof CommandSearchGroup;
+  Item: typeof CommandSearchItemComponent;
+  Empty: typeof CommandSearchEmpty;
+  Separator: typeof CommandSearchSeparator;
+};
+//#endregion
+export { CommandSearch, type CommandSearchEmptyProps, type CommandSearchGroupProps, type CommandSearchInputProps, type CommandSearchItemProps, type CommandSearchListProps, type CommandSearchProps, useCommandSearch, useKeyboardShortcut };